/* ═══════════════════════════════════════════════════════════════════════
   web-parts/parts.css — 웹 공용 부품 레이어 (정보형태 스켈레톤 30종)  v1.2 · 2026-08-17
   ppt-parts(부품 33종 + 토큰 주입 테마) 패턴의 웹 이식.

   계약:
   · 이 파일은 hex 를 단 1개도 갖지 않는다 — 색·서체·라운딩은 전부 --wp-* 소비.
   · --wp-* 는 어댑터(adapters/<시스템>.css)가 각 시스템 정본 변수로 정의한다.
   · 로드 순서: <시스템>/tokens.css → adapters/<시스템>.css → parts.css
   · 구조가 무드에 독립적인 부품만 이 파일에 들어온다 — 시스템 고유 블록
     (FORM STUDIO 관통 가이드, MS 커머스 퍼널 등)은 끌어올리지 않는다.
   부품 추가·사용 규칙: PARTS_LIBRARY.md
   ═══════════════════════════════════════════════════════════════════ */

/* ── 공통 리듬 ─────────────────────────────────────────────────────── */
.wp-part { margin: 0; font-family: var(--wp-font); color: var(--wp-text); }
.wp-part h4 { margin: 0; font-size: 16px; font-weight: 700; color: var(--wp-ink); font-family: var(--wp-font-strong, var(--wp-font)); }
.wp-part p  { margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--wp-muted); }
.wp-label   { font-family: var(--wp-font-en, var(--wp-font)); font-size: 11px; letter-spacing: var(--wp-track-label, 0); text-transform: uppercase; color: var(--wp-muted); }

/* ── 모션 계약 (v1.2 · 2026-08-17) ──────────────────────────────────────
   색·서체·라운딩은 정본에서 주입되는데 모션만 산출물이 손으로 타이핑하고 있었다
   (15개 시스템 중 8개가 모션 키 0개, 이 파일의 transition 은 0개였다).
   --wp-dur-* · --wp-ease 는 어댑터가 시스템 tokens.json 의 motion 블록에서 넘긴다.
   폴백(200ms/ease-out)은 모션 토큰이 아직 없는 시스템에서 부품이 죽지 않게 하는 최소치.
   대상은 '상태가 바뀌는 곳'만 — 등장·스크롤 애니메이션은 부품이 아니라 산출물 책임. */
.wp-faq summary,
.wp-articles > a h4,
.wp-pricing .wp-cta,
.wp-chartcard { transition: color var(--wp-dur-fast, 200ms) var(--wp-ease, ease-out),
                            border-color var(--wp-dur-fast, 200ms) var(--wp-ease, ease-out),
                            opacity var(--wp-dur-fast, 200ms) var(--wp-ease, ease-out); }
.wp-faq summary:hover,
.wp-articles > a:hover h4 { color: var(--wp-accent); }
.wp-pricing .wp-cta:hover { opacity: .82; }
/* 접근성 — 시스템 설정이 모션 감소면 전 부품 트랜지션을 사실상 끈다.
   iteration-count 를 같이 1로 눕히지 않으면 무한 애니메이션(wp-loader)이 1ms 주기로
   스트로브가 된다 — 모션 감소 사용자에게 가장 해로운 결과다. */
@media (prefers-reduced-motion: reduce) {
  .wp-part, .wp-part *, .wp-chartcard, .wp-chartcard * {
    transition-duration: 1ms !important; animation-duration: 1ms !important;
    animation-iteration-count: 1 !important; }
}

/* ── 1. wp-steps — 가로 프로세스 (N-가변) ──────────────────────────── */
ol.wp-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; padding: 0; list-style: none; counter-reset: wpstep; }
.wp-steps li { position: relative; padding-top: 18px; }
.wp-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: -28px; height: 1px; background: var(--wp-line); }
.wp-steps li:last-child::before { right: 0; }
.wp-steps li::after { content: ""; position: absolute; top: -3.5px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--wp-accent); }
.wp-steps b { display: block; font-family: var(--wp-font-en, var(--wp-font)); font-size: 12px; font-weight: 600; color: var(--wp-accent); margin-bottom: 8px; }

/* ── 2. wp-timeline — 수직 타임라인 ────────────────────────────────── */
ul.wp-timeline { list-style: none; margin: 0; padding: 0; }
.wp-timeline li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 0 0 28px 0; }
.wp-timeline li::before { content: ""; position: absolute; left: 116px; top: 6px; bottom: -6px; width: 1px; background: var(--wp-line); }
.wp-timeline li:last-child::before { display: none; }
.wp-timeline li::after { content: ""; position: absolute; left: 113px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--wp-accent); }
.wp-timeline time { font-family: var(--wp-font-en, var(--wp-font)); font-size: 12px; color: var(--wp-muted); text-align: right; padding-top: 1px; }
.wp-timeline li > div { padding-left: 20px; }

/* ── 3. wp-matrix — 2×2 매트릭스 (축 라벨 포함) ────────────────────── */
.wp-matrix { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 1fr 24px; gap: 10px; }
.wp-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
.wp-axis-x { grid-column: 2; text-align: center; }
.wp-matrix-grid { display: grid; grid-template-columns: 1fr 1fr; }
.wp-matrix-grid section { padding: 20px 22px; border: 0 solid var(--wp-line); min-height: 110px; }
.wp-matrix-grid section:nth-child(1) { border-width: 0 1px 1px 0; }
.wp-matrix-grid section:nth-child(2) { border-width: 0 0 1px 0; }
.wp-matrix-grid section:nth-child(3) { border-width: 0 1px 0 0; }
.wp-matrix-grid section.is-hero { background: var(--wp-accent-tint); }
.wp-matrix-grid h4 { font-size: 14px; }

/* ── 4. wp-hub — 허브-스포크 (위성 4 또는 6) ───────────────────────── */
.wp-hub { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px 28px; }
.wp-hub-core { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 26px 30px; text-align: center;
  background: var(--wp-ink); color: var(--wp-paper); border-radius: var(--wp-radius, 0); font-family: var(--wp-font-strong, var(--wp-font)); font-weight: 700; font-size: 15px; }
.wp-hub-node { position: relative; padding: 12px 0 12px 16px; border-left: 2px solid var(--wp-accent); }
.wp-hub-node h4 { font-size: 13.5px; }
.wp-hub-node p { font-size: 12.5px; margin-top: 3px; }
.wp-hub-node:nth-child(odd) { text-align: left; }

/* ── 5. wp-funnel — 퍼널 (인라인 --w 로 폭 지정) ───────────────────── */
.wp-funnel { display: grid; gap: 8px; }
.wp-funnel > div { width: var(--w, 100%); margin: 0 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 18px; background: var(--wp-accent-tint); border-radius: var(--wp-radius, 0); }
.wp-funnel > div:first-child { background: var(--wp-accent); }
.wp-funnel > div:first-child h4, .wp-funnel > div:first-child b { color: var(--wp-on-accent); }
.wp-funnel h4 { font-size: 13.5px; }
.wp-funnel b { font-family: var(--wp-font-en, var(--wp-font)); font-size: 13px; color: var(--wp-ink); white-space: nowrap; }

/* ── 6. wp-stats — KPI 스탯 행 (N-가변) ────────────────────────────── */
dl.wp-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 32px; margin: 0; padding: 0; }
.wp-stats > div { border-top: 2px solid var(--wp-ink); padding-top: 14px; }
.wp-stats dt { font-size: 12px; color: var(--wp-muted); margin: 0 0 6px; }
.wp-stats dd { margin: 0; font-family: var(--wp-font-en, var(--wp-font)); font-size: 38px; font-weight: 600; line-height: 1.05; color: var(--wp-ink); }
.wp-stats dd small { font-size: 16px; font-weight: 500; }
.wp-stats span { display: block; margin-top: 6px; font-size: 12px; color: var(--wp-accent); }

/* ── 7. wp-bars — 수평 바 차트 (인라인 --w) ────────────────────────── */
.wp-bars { display: grid; gap: 14px; }
.wp-bar { display: grid; grid-template-columns: 120px 1fr 52px; align-items: center; gap: 14px; }
.wp-bar span { font-size: 12.5px; color: var(--wp-text); }
.wp-bar i { display: block; height: 14px; background: var(--wp-accent-tint); position: relative; }
.wp-bar i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); background: var(--wp-accent); }
.wp-bar.is-muted i::before { background: var(--wp-line-strong); }
.wp-bar b { font-family: var(--wp-font-en, var(--wp-font)); font-size: 12px; font-weight: 600; color: var(--wp-ink); text-align: right; }

/* ── 8. wp-donut — 단일 비율 강조 (인라인 --p: 0~100) ──────────────── */
.wp-donut { display: inline-grid; place-items: center; width: 152px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--wp-accent) calc(var(--p, 50) * 1%), var(--wp-accent-tint) 0); }
.wp-donut::before { content: ""; grid-area: 1/1; width: 68%; aspect-ratio: 1; border-radius: 50%; background: var(--wp-paper); }
.wp-donut b { grid-area: 1/1; z-index: 1; font-family: var(--wp-font-en, var(--wp-font)); font-size: 26px; color: var(--wp-ink); line-height: 1; text-align: center; }
.wp-donut b small { display: block; font-family: var(--wp-font); font-size: 11px; font-weight: 400; color: var(--wp-muted); margin-top: 5px; }

/* ── 9. wp-split — 좌 고정/우 유동 화면 골격 ───────────────────────── */
.wp-split { display: grid; grid-template-columns: 32% 1fr; gap: 48px; align-items: start; }
.wp-split > aside { position: sticky; top: 32px; }
.wp-split > aside h3 { margin: 10px 0 0; font-size: 26px; line-height: 1.3; color: var(--wp-ink); font-family: var(--wp-font-strong, var(--wp-font)); }
.wp-split > aside p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--wp-muted); }

/* ── 10. wp-cards — 카드 그리드 (auto-fit) ─────────────────────────── */
.wp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--wp-line); border: 1px solid var(--wp-line); }
.wp-cards > article { background: var(--wp-paper); padding: 22px; }
.wp-cards > article.is-hero { background: var(--wp-surface); }
.wp-cards .wp-label { display: block; margin-bottom: 10px; color: var(--wp-accent); }

/* ── 11. wp-compare — 비교표 (.is-hero 열 강조) ────────────────────── */
table.wp-compare { width: 100%; border-collapse: collapse; font-size: 13px; }
.wp-compare th, .wp-compare td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--wp-line); }
.wp-compare thead th { font-size: 12px; color: var(--wp-muted); border-bottom: 1px solid var(--wp-line-strong, var(--wp-ink)); font-weight: 600; }
.wp-compare tbody th { font-weight: 500; color: var(--wp-text); width: 30%; }
.wp-compare .is-hero { background: var(--wp-accent-tint); }
.wp-compare thead .is-hero { color: var(--wp-accent); }

/* ── 12. wp-faq — 질문/답변 ────────────────────────────────────────── */
details.wp-faq { border-top: 1px solid var(--wp-line); }
details.wp-faq:last-of-type { border-bottom: 1px solid var(--wp-line); }
.wp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 2px; font-size: 14px; font-weight: 600; color: var(--wp-ink); font-family: var(--wp-font-strong, var(--wp-font)); }
.wp-faq summary::-webkit-details-marker { display: none; }
.wp-faq summary::after { content: "+"; font-family: var(--wp-font-en, var(--wp-font)); color: var(--wp-muted); font-weight: 400; }
.wp-faq[open] summary::after { content: "–"; }
.wp-faq > p { margin: 0; padding: 0 2px 18px; font-size: 13.5px; line-height: 1.7; color: var(--wp-muted); }

/* ═══ v1.1 증설 (2026-08-17) — 레퍼런스 검토 13종: ppt-parts 검증품 10 + 웹 신규 3 ═══ */

/* ── 13. wp-asis-tobe — 전환 전/후 대비 ────────────────────────────── */
.wp-asis-tobe { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; position: relative; }
.wp-asis-tobe > div { padding: 22px 24px; }
.wp-asis-tobe .is-asis { background: var(--wp-surface); }
.wp-asis-tobe .is-tobe { background: var(--wp-accent-tint); position: relative; }
.wp-asis-tobe .is-tobe::before { content: "→"; position: absolute; left: -19px; top: 50%; transform: translateY(-50%);
  color: var(--wp-accent); font-size: 17px; background: var(--wp-paper); line-height: 1; padding: 2px 0; }
.wp-asis-tobe h5 { margin: 0 0 12px; font-size: 11px; letter-spacing: var(--wp-track-label, 0); color: var(--wp-muted); font-weight: 600; }
.wp-asis-tobe .is-tobe h5 { color: var(--wp-accent); }
.wp-asis-tobe li { font-size: 13px; color: var(--wp-text); margin: 6px 0 0 0; }
.wp-asis-tobe ul { margin: 0; padding-left: 18px; }

/* ── 14. wp-hero — 커버 + 하단 메타 행 (.is-dark 반전) ─────────────── */
.wp-hero { display: grid; align-content: space-between; gap: 56px; min-height: 400px; padding: 44px 46px 36px;
  background: var(--wp-surface); }
.wp-hero.is-dark { background: var(--wp-ink); }
/* max-width 는 em 으로 — ch 는 "0" 글자 폭 기준이라 한글에서 절반 이하로 좁아진다.
   word-break:keep-all 은 한글이 단어 중간에서 끊기는 것을 막는다(영문은 normal 과 동일). */
.wp-hero h1 { margin: 14px 0 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.12; color: var(--wp-ink);
  font-family: var(--wp-font-strong, var(--wp-font)); max-width: 17em; word-break: keep-all; }
.wp-hero.is-dark h1, .wp-hero.is-dark dd { color: var(--wp-paper); }
.wp-hero.is-dark .wp-label { color: var(--wp-accent-tint); }
.wp-hero-meta { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; margin: 0; padding-top: 18px;
  border-top: 1px solid var(--wp-line); }
.wp-hero.is-dark .wp-hero-meta { border-top-color: var(--wp-muted); }
.wp-hero-meta dt { font-size: 10.5px; color: var(--wp-muted); text-transform: uppercase; letter-spacing: var(--wp-track-label, 0); }
.wp-hero-meta dd { margin: 5px 0 0; font-size: 13px; color: var(--wp-ink); line-height: 1.55; }

/* ── 15. wp-logos — 로고월 (텍스트 로고, 이미지 교체 가능) ─────────── */
.wp-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--wp-line); border: 1px solid var(--wp-line); }
.wp-logos > b { display: grid; place-items: center; min-height: 78px; padding: 12px; background: var(--wp-paper);
  font-family: var(--wp-font-en, var(--wp-font)); font-weight: 600; font-size: 14px; color: var(--wp-ink); text-align: center; }
.wp-logos > b small { display: block; font-weight: 400; font-size: 10px; color: var(--wp-muted); }

/* ── 16. wp-quote — 인용 한 방 ─────────────────────────────────────── */
blockquote.wp-quote { margin: 0; padding: 34px 0 26px; border-top: 2px solid var(--wp-ink); border-bottom: 1px solid var(--wp-line); }
.wp-quote p { margin: 0; font-size: clamp(19px, 2.6vw, 26px); line-height: 1.5; color: var(--wp-ink);
  font-family: var(--wp-font-strong, var(--wp-font)); font-weight: 600; max-width: 30ch; }
.wp-quote p b { color: var(--wp-accent); }
.wp-quote footer { margin-top: 16px; font-size: 12.5px; color: var(--wp-muted); }

/* ── 17. wp-reviews — 후기·레퍼런스 목록 ───────────────────────────── */
.wp-reviews { display: grid; }
.wp-reviews > article { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--wp-line); }
.wp-reviews > article:first-child { border-top: 1px solid var(--wp-line-strong, var(--wp-ink)); }
.wp-reviews h4 { font-size: 13.5px; }
.wp-reviews .wp-tags { margin-top: 6px; }
.wp-tags i { display: inline-block; font-style: normal; font-size: 10.5px; padding: 2px 8px; margin: 0 4px 4px 0;
  background: var(--wp-accent-tint); color: var(--wp-accent); border-radius: var(--wp-radius-chip, var(--wp-radius, 0)); }
.wp-reviews p { margin: 0; align-self: center; }

/* ── 18. wp-stair — 단계 상승 로드맵 (인라인 --lift: 0,1,2…) ───────── */
.wp-stair { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; align-items: end;
  padding-top: 26px; }
.wp-stair > div { transform: translateY(calc(var(--lift, 0) * -26px)); border-top: 2px solid var(--wp-accent);
  background: var(--wp-surface); padding: 14px 16px 16px; }
.wp-stair > div:last-child { background: var(--wp-accent); }
.wp-stair > div:last-child h4, .wp-stair > div:last-child p, .wp-stair > div:last-child b { color: var(--wp-on-accent); }
.wp-stair b { display: block; font-family: var(--wp-font-en, var(--wp-font)); font-size: 12px; color: var(--wp-muted); margin-bottom: 6px; }
.wp-stair h4 { font-size: 13.5px; }
.wp-stair p { font-size: 12px; margin-top: 4px; }

/* ── 19. wp-gantt — 일정·기간 (인라인 --s 시작%, --w 길이%) ────────── */
.wp-gantt { display: grid; gap: 0; }
.wp-gantt-months { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-left: 130px;
  font-family: var(--wp-font-en, var(--wp-font)); font-size: 10.5px; color: var(--wp-muted); padding-bottom: 8px; }
.wp-gantt-row { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; padding: 7px 0; }
.wp-gantt-row > span { font-size: 12.5px; color: var(--wp-text); }
.wp-gantt-track { position: relative; height: 16px;
  background-image: repeating-linear-gradient(to right, var(--wp-line) 0 1px, transparent 1px 25%); }
.wp-gantt-track i { position: absolute; top: 0; bottom: 0; left: var(--s, 0%); width: var(--w, 30%); background: var(--wp-accent); }
.wp-gantt-row:nth-child(odd) .wp-gantt-track i { background: var(--wp-accent-tint); }
.wp-gantt-row.is-hero .wp-gantt-track i { background: var(--wp-accent) !important; }

/* ── 20. wp-tree — 상위→하위 분기 (2레벨) ──────────────────────────── */
.wp-tree { text-align: center; }
.wp-tree-root { display: inline-block; padding: 13px 26px; background: var(--wp-ink); color: var(--wp-paper);
  font-weight: 700; font-size: 14px; font-family: var(--wp-font-strong, var(--wp-font)); border-radius: var(--wp-radius, 0); }
.wp-tree > ul { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px;
  margin: 0; padding: 26px 0 0; position: relative; text-align: left; }
.wp-tree > ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 13px; background: var(--wp-line-strong, var(--wp-ink)); }
.wp-tree > ul > li { border-top: 1px solid var(--wp-line-strong, var(--wp-ink)); padding-top: 12px; position: relative; }
.wp-tree > ul > li::before { content: ""; position: absolute; top: -13px; left: 50%; width: 1px; height: 13px; background: var(--wp-line); }
.wp-tree h4 { font-size: 13px; }
.wp-tree p { font-size: 12px; margin-top: 4px; }

/* ── 21. wp-columns — 크기 대비 수직 바 (인라인 --h: %) ────────────── */
.wp-columns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 22px; align-items: end; min-height: 210px; }
.wp-columns > div { display: grid; gap: 8px; align-content: end; text-align: center; }
.wp-columns i { display: block; height: calc(var(--h, 50) * 1.6px); background: var(--wp-accent-tint); }
.wp-columns > div.is-hero i { background: var(--wp-accent); }
.wp-columns b { font-family: var(--wp-font-en, var(--wp-font)); font-size: 15px; color: var(--wp-ink); }
.wp-columns span { font-size: 11.5px; color: var(--wp-muted); }

/* ── 22. wp-numbered — 순번 목록 + 부연 ────────────────────────────── */
ol.wp-numbered { list-style: none; margin: 0; padding: 0; counter-reset: wpnum; }
.wp-numbered > li { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--wp-line); counter-increment: wpnum; }
.wp-numbered > li:first-child { border-top: 1px solid var(--wp-line-strong, var(--wp-ink)); }
.wp-numbered > li::before { content: counter(wpnum, decimal-leading-zero); font-family: var(--wp-font-en, var(--wp-font));
  font-size: 21px; font-weight: 600; color: var(--wp-accent); line-height: 1.1; }
.wp-numbered p { max-width: 62ch; }

/* ── 23. wp-articles — 기사·소식 인덱스 그리드 ─────────────────────── */
.wp-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px; }
.wp-articles > a { text-decoration: none; display: block; color: inherit; }
.wp-articles .wp-art-date { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--wp-line); padding-bottom: 8px; margin-bottom: 10px; }
.wp-art-date::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--wp-ink); }
.wp-art-date time { font-family: var(--wp-font-en, var(--wp-font)); font-size: 10.5px; color: var(--wp-muted); }
.wp-articles h4 { font-size: 13px; line-height: 1.5; }
.wp-articles .wp-art-thumb { margin-top: 12px; aspect-ratio: 4/3; background: var(--wp-surface); }
.wp-articles .wp-label { display: block; margin-top: 8px; }

/* ── 24. wp-chapter — 거대 번호 챕터 헤더 ──────────────────────────── */
.wp-chapter { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: baseline;
  border-top: 2px solid var(--wp-ink); padding-top: 20px; }
.wp-chapter > b { font-family: var(--wp-font-en, var(--wp-font)); font-size: clamp(44px, 6vw, 72px); font-weight: 600;
  line-height: .9; color: var(--wp-accent); }
.wp-chapter h3 { margin: 0; font-size: 24px; color: var(--wp-ink); font-family: var(--wp-font-strong, var(--wp-font)); }
.wp-chapter .wp-chapter-body { grid-column: 2; columns: 2; column-gap: 40px; font-size: 13px; line-height: 1.7; color: var(--wp-muted); margin: 6px 0 0; }

/* ── 25. wp-pricing — 가격 플랜 비교 ───────────────────────────────── */
.wp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--wp-line); border: 1px solid var(--wp-line); }
.wp-pricing > article { background: var(--wp-paper); padding: 24px 22px; display: grid; align-content: start; gap: 0; }
.wp-pricing > article.is-hero { background: var(--wp-accent-tint); }
.wp-pricing h4 { font-size: 13px; }
.wp-pricing .wp-price { margin: 12px 0 2px; font-family: var(--wp-font-en, var(--wp-font)); font-size: 30px; font-weight: 600; color: var(--wp-ink); line-height: 1; }
.wp-pricing .wp-price small { font-size: 12px; font-weight: 400; color: var(--wp-muted); font-family: var(--wp-font); }
.wp-pricing ul { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--wp-line); list-style: none; display: grid; gap: 7px; }
.wp-pricing li { font-size: 12.5px; color: var(--wp-text); padding-left: 14px; position: relative; }
.wp-pricing li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 1.5px; background: var(--wp-accent); }
.wp-pricing li.is-off { color: var(--wp-muted); text-decoration: line-through; }
.wp-pricing .wp-cta { margin-top: 18px; display: block; text-align: center; padding: 10px 12px; font-size: 12.5px; font-weight: 600;
  background: var(--wp-ink); color: var(--wp-paper); text-decoration: none; border-radius: var(--wp-radius, 0); }
.wp-pricing .is-hero .wp-cta { background: var(--wp-accent); color: var(--wp-on-accent); }

/* ═══ v1.2 증설 (2026-08-17) — amicro mono-charts 레퍼런스 검토 4종 ═══
   원본 30종 중 채택 4. 게이지 계열 6종(스피도미터·아크·레이디얼·동심원·폴라·도넛변형)은
   전부 거절 — 단일 비율은 wp-donut 하나로 족하고 부품 6종은 선택 피로다. 레이더·캔들스틱·
   산키도 거절(다축 오독 · 도메인 특수 · CSS-only 계약 밖). 아래 4종만 '기존 부품으로
   표현 불가능한 정보형태'다. */

/* ── 26. wp-chartcard — 차트 카드 셸 (부품을 감싸는 크롬) ──────────────
   레퍼런스의 진짜 수확. 차트 종류와 무관한 껍데기라 기존 bars·columns·donut·
   funnel·stats 가 전부 이 셸에 꽂힌다. figcaption 우측 칸은 dataviz 의
   '출처 캡션 필수' 규칙을 구조로 강제하는 자리. */
figure.wp-chartcard { margin: 0; display: grid; gap: 14px; padding: 20px 22px;
  border: 1px solid var(--wp-line); background: var(--wp-paper); }
.wp-chartcard > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wp-chartcard .wp-pill { font-style: normal; font-family: var(--wp-font-en, var(--wp-font)); font-size: 10.5px;
  padding: 2px 9px; background: var(--wp-accent-tint); color: var(--wp-accent);
  border-radius: var(--wp-radius-chip, var(--wp-radius, 0)); }
.wp-chartcard .wp-kpi { font-family: var(--wp-font-en, var(--wp-font)); font-size: 30px; font-weight: 600;
  line-height: 1; color: var(--wp-ink); }
.wp-chartcard .wp-kpi small { font-family: var(--wp-font); font-size: 12.5px; font-weight: 400;
  color: var(--wp-muted); margin-left: 7px; }
/* min-width:0 이 없으면 그리드 자식이 콘텐츠 최소폭으로 버텨 카드가 페이지를 민다.
   넓은 플롯(격자·표)은 페이지가 아니라 자기 안에서 스크롤한다. */
.wp-chartcard .wp-plot { padding: 6px 0 2px; min-width: 0; overflow-x: auto; }
.wp-chartcard figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px;
  border-top: 1px solid var(--wp-line); font-family: var(--wp-font-en, var(--wp-font)); font-size: 10.5px;
  color: var(--wp-muted); }

/* ── 27. wp-bullet — 실적 대비 목표 (인라인 --v 실적%, --t 목표%) ──────
   wp-bars 에 없던 '목표선' 개념. .is-miss 는 목표 미달 행. */
.wp-bullet { display: grid; gap: 12px; }
.wp-bullet > div { display: grid; grid-template-columns: 110px 1fr 72px; align-items: center; gap: 14px; }
.wp-bullet > div > span { font-size: 12.5px; color: var(--wp-text); }
.wp-bullet i { position: relative; display: block; height: 12px; background: var(--wp-accent-tint); }
.wp-bullet i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 50) * 1%); background: var(--wp-accent); }
.wp-bullet i::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: calc(var(--t, 75) * 1%);
  width: 2px; background: var(--wp-ink); }
/* 미달 행은 '더 강조'가 아니라 '탈색'이다 — 잉크로 칠하면 실패 행이 화면에서 제일
   세져 시선이 거꾸로 간다(2026-08-17 실측). 목표 마커가 묻히는 문제도 같이 생긴다. */
.wp-bullet .is-miss i::before { background: var(--wp-muted); }
.wp-bullet b { font-family: var(--wp-font-en, var(--wp-font)); font-size: 11.5px; color: var(--wp-ink); text-align: right; }

/* ── 28. wp-heatmap — 밀도 격자 (인라인 --cols, 셀에 .is-d1~3) ─────────
   알파 램프 규칙: 0단=계선 / 1단=32% / 2단=60% / 3단=100%. 액센트 1색만 쓰고
   강도는 불투명도로만 — 순서 있는 밀도에 카테고리 4색을 쓰면 안 된다(dataviz 규칙). */
/* 셀은 1fr 이 아니라 고정 --cell — 1fr 로 두면 컨테이너 폭에 비례해 48px 까지 부풀어
   '밀도 격자'가 아니라 타일 벽이 된다(2026-08-17 실측). 격자는 왼쪽 정렬로 남는다. */
.wp-heatmap { display: grid; grid-template-columns: repeat(var(--cols, 20), var(--cell, 14px));
  gap: 3px; justify-content: start; }
.wp-heatmap i { display: block; aspect-ratio: 1; background: var(--wp-line);
  border-radius: var(--wp-radius-cell, var(--wp-radius, 0)); }
.wp-heatmap i.is-d1 { background: var(--wp-accent); opacity: .32; }
.wp-heatmap i.is-d2 { background: var(--wp-accent); opacity: .60; }
.wp-heatmap i.is-d3 { background: var(--wp-accent); opacity: 1; }
.wp-heatmap-legend { display: flex; align-items: center; gap: 6px; margin-top: 12px;
  font-family: var(--wp-font-en, var(--wp-font)); font-size: 10.5px; color: var(--wp-muted); }
.wp-heatmap-legend i { display: block; width: 11px; height: 11px; background: var(--wp-line);
  border-radius: var(--wp-radius-cell, var(--wp-radius, 0)); }
.wp-heatmap-legend i.is-d1 { background: var(--wp-accent); opacity: .32; }
.wp-heatmap-legend i.is-d2 { background: var(--wp-accent); opacity: .60; }
.wp-heatmap-legend i.is-d3 { background: var(--wp-accent); opacity: 1; }

/* ── 29. wp-sparkrow — 라벨 + 값 + 미니 추세 행 ────────────────────────
   wp-stats(격자)와 다른 형태. polyline 의 points 만 갈아끼우면 된다 —
   viewBox 는 0 0 100 24 고정, vector-effect 로 비균등 스케일에도 선 두께 유지. */
ul.wp-sparkrow { list-style: none; margin: 0; padding: 0; display: grid; }
.wp-sparkrow > li { display: grid; grid-template-columns: 1fr auto 156px; align-items: center; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--wp-line); }
.wp-sparkrow > li:first-child { border-top: 1px solid var(--wp-line-strong, var(--wp-ink)); }
.wp-sparkrow > li > span { font-size: 12.5px; color: var(--wp-text); }
.wp-sparkrow b { font-family: var(--wp-font-en, var(--wp-font)); font-size: 13px; color: var(--wp-ink); }
.wp-sparkrow svg { display: block; width: 100%; height: 24px; overflow: visible; }
.wp-sparkrow polyline { fill: none; stroke: var(--wp-accent); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ── 8b. wp-donut 확장 — 범례 리스트 (항목별 값·비율) ──────────────────
   기존 도넛은 중앙 수치 1개뿐이라 항목별 값을 담지 못했다. 범례는 플롯 위에
   띄우는 박스가 아니라 옆에 세우는 값 표 — dataviz '범례 박스 금지'와 충돌하지 않는다. */
.wp-donut-set { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
dl.wp-donut-legend { margin: 0; display: grid; gap: 8px; min-width: 230px; }
.wp-donut-legend > div { display: grid; grid-template-columns: 9px 1fr auto 42px; align-items: center; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--wp-line); }
.wp-donut-legend > div::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--wp-accent); opacity: .32; }
.wp-donut-legend > div.is-hero::before { opacity: 1; }
.wp-donut-legend dt { font-size: 12.5px; color: var(--wp-text); }
.wp-donut-legend dd { margin: 0; font-family: var(--wp-font-en, var(--wp-font)); font-size: 12.5px; color: var(--wp-ink); }
.wp-donut-legend dd.wp-pct { color: var(--wp-muted); text-align: right; }

/* ── 30. wp-loader — 로딩 점 (레퍼런스 24종 중 1종만) ──────────────────
   사이트 1개에 로더는 1종이면 족하다 — 24종 카탈로그는 부품이 아니라 선택 피로다.
   주기는 발명하지 않고 모션 토큰에서 파생한다(base × 3). 모션 배관을 hover 말고
   실제 애니메이션까지 쓰는 첫 부품. */
.wp-loader { display: inline-flex; gap: 6px; align-items: center; }
.wp-loader i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--wp-accent);
  opacity: .28; animation: wp-pulse calc(var(--wp-dur-base, 400ms) * 3) var(--wp-ease, ease-out) infinite; }
.wp-loader i:nth-child(2) { animation-delay: calc(var(--wp-dur-base, 400ms) * .5); }
.wp-loader i:nth-child(3) { animation-delay: var(--wp-dur-base, 400ms); }
.wp-loader span { font-size: 12px; color: var(--wp-muted); margin-left: 4px; }
@keyframes wp-pulse {
  0%, 100% { opacity: .28; transform: translateY(0); }
  40%      { opacity: 1;   transform: translateY(-4px); }
}

/* ── 반응형 붕괴 (공통 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  ol.wp-steps, dl.wp-stats { grid-auto-flow: row; gap: 20px; }
  .wp-steps li::before { right: 0; }
  .wp-timeline li { grid-template-columns: 72px 1fr; }
  .wp-timeline li::before { left: 92px; }
  .wp-timeline li::after { left: 89px; }
  .wp-matrix-grid { grid-template-columns: 1fr; }
  .wp-matrix-grid section { border-width: 0 0 1px 0 !important; }
  .wp-matrix-grid section:last-child { border-width: 0 !important; }
  .wp-hub { grid-template-columns: 1fr; }
  .wp-hub-core { grid-column: 1; grid-row: 1; }
  .wp-split { grid-template-columns: 1fr; gap: 28px; }
  .wp-split > aside { position: static; }
  .wp-bar { grid-template-columns: 88px 1fr 44px; }
  /* v1.1 증설분 */
  .wp-asis-tobe { grid-template-columns: 1fr; gap: 30px; }
  .wp-asis-tobe .is-tobe::before { left: 50%; top: -24px; transform: translateX(-50%) rotate(90deg); }
  .wp-hero { min-height: 320px; padding: 30px 24px 26px; }
  .wp-hero-meta { grid-auto-flow: row; gap: 14px; }
  .wp-stair { grid-auto-flow: row; padding-top: 0; }
  .wp-stair > div { transform: none; }
  .wp-gantt-row { grid-template-columns: 88px 1fr; }
  .wp-gantt-months { margin-left: 102px; } /* 라벨 88 + gap 14 — 눈금이 트랙 시작에 맞아야 한다 */
  .wp-tree > ul { grid-auto-flow: row; }
  .wp-tree > ul::before, .wp-tree > ul > li::before { display: none; }
  .wp-columns { grid-auto-flow: row; min-height: 0; }
  .wp-columns i { height: 12px; width: calc(var(--h, 50) * 1%); }
  .wp-reviews > article { grid-template-columns: 1fr; gap: 8px; }
  .wp-chapter .wp-chapter-body { columns: 1; }
  /* v1.2 증설분 */
  figure.wp-chartcard { padding: 16px 16px; }
  .wp-chartcard figcaption { flex-direction: column; gap: 4px; }
  .wp-heatmap { --cell: 10px; gap: 2px; }   /* 20열 × 10px + gap = 238px — 390 뷰포트에 들어간다 */
  .wp-bullet > div { grid-template-columns: 84px 1fr 62px; gap: 10px; }
  .wp-sparkrow > li { grid-template-columns: 1fr auto 72px; gap: 12px; }
  .wp-donut-set { flex-direction: column; align-items: flex-start; gap: 22px; }
  dl.wp-donut-legend { min-width: 0; width: 100%; }
}