/* ═══════════════════════════════════════════════════════════════
   Typographic Poster · theme.css   (port of v14 · 2026-09-09)
   스위스 포스터 격자 — 여백 110 · 측정폭 1700 · 12열 123.33 · 거터 20
   헤드라인 800 / 1.02 / -.045em, 측정폭에 잠김(theme.js 가 넘침만 줄인다)
   색 면 4장 = k-section (03 09 14 20) · 탤리 틱 + 시트 번호는 theme.js 주입
   ═══════════════════════════════════════════════════════════════ */

/* ───────── 팔레트 (v14 그대로 · 코어 --bg/--fg/--line/--accent 덮어쓰기) ───────── */
:root{
  --bg:#F3F1EA; --fg:#12110F; --dim:#5A5852; --faint:#8F8C85; --line:#C9C6BD; --hair:#DEDBD2;
  --muted:var(--dim);
  --accent:var(--cmds-green); --accent-on:#FFFFFF; --em:var(--accent);
  --ease:cubic-bezier(.2,.7,.2,1);
  --m:110px; --measure:1700px; --col:123.33px; --gut:20px;
  --mast-gap:48px; --block-gap:36px;
  --dk-panel-bg:rgba(243,241,234,.94); --dk-panel-fg:#12110F; --dk-panel-line:#C9C6BD;
  --dk-panel-h:44px; --dk-notes-w:440px; --dk-font:var(--font-mono); --dk-accent:var(--accent);
}
html[data-theme="dark"]{
  --bg:#0F0F0E; --fg:#F1EFE8; --dim:#A8A59D; --faint:#6C695F; --line:#33322E; --hair:#242320;
  --muted:var(--dim); --accent:var(--cmds-pink); --accent-on:#1B1B1B;
  --dk-panel-bg:rgba(15,15,14,.94); --dk-panel-fg:#F1EFE8; --dk-panel-line:#33322E;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bg:#0F0F0E; --fg:#F1EFE8; --dim:#A8A59D; --faint:#6C695F; --line:#33322E; --hair:#242320;
    --muted:var(--dim); --accent:var(--cmds-pink); --accent-on:#1B1B1B;
    --dk-panel-bg:rgba(15,15,14,.94); --dk-panel-fg:#F1EFE8; --dk-panel-line:#33322E;
  }
}
html[data-aspect="16x10"]{ --mast-gap:64px; --block-gap:48px; }

body{ font-size:24px; line-height:1.4; letter-spacing:-.012em; text-rendering:optimizeLegibility; }
b,strong{ font-weight:800; color:var(--em); }
code{ font-family:var(--font-mono); font-size:.86em; letter-spacing:0; font-weight:500; }

/* ───────── 시트 ───────── */
.slide{
  padding:72px var(--m) 40px; background:var(--bg); color:var(--fg);
  --em:var(--accent);
}
html.js .slide[data-active]{ animation:tpSheet .45s var(--ease) both; }
@keyframes tpSheet{ from{opacity:0} to{opacity:1} }

/* 색 면 — 네 섹션 디바이더 */
.k-section{
  background:var(--accent); color:var(--accent-on);
  --fg:var(--accent-on);
  --dim:color-mix(in srgb,var(--accent-on) 78%,transparent);
  --faint:color-mix(in srgb,var(--accent-on) 60%,transparent);
  --line:color-mix(in srgb,var(--accent-on) 42%,transparent);
  --hair:color-mix(in srgb,var(--accent-on) 24%,transparent);
  --em:var(--accent-on); --bg:var(--accent);
}

/* ───────── 머리 괘선 (kicker = 마스트: 왼쪽 아이브로우 · 오른쪽 섹션 라벨 ::after) ───────── */
.kicker{
  margin:0 0 var(--mast-gap); padding-bottom:14px; border-bottom:2px solid var(--fg);
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  font:400 21px/1 var(--font-mono); letter-spacing:.14em; color:var(--fg); white-space:nowrap;
}
.kicker::after{ content:attr(data-tp-right); color:var(--dim); }

/* ───────── 바닥 괘선 (theme.js 주입) ───────── */
.tp-base{
  margin-top:26px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.tp-ticks{ display:flex; gap:6px; }
.tp-ticks i{ display:block; width:34px; height:8px; background:var(--hair); }
.tp-ticks i.on{ background:var(--fg); }
.tp-no{ font:400 19px/1 var(--font-mono); letter-spacing:.16em; color:var(--fg); font-variant-numeric:tabular-nums; }

/* ───────── 활자 ───────── */
.headline{
  margin:0; font-family:var(--font-display); font-weight:800; line-height:1.02; letter-spacing:-.045em;
  color:var(--fg); white-space:nowrap; word-break:keep-all; font-size:104px;
}
.headline em{ font-style:normal; color:var(--em); }
.k-section .headline em, .k-section .headline b{ color:var(--accent-on); text-decoration:underline; text-decoration-thickness:.055em; text-underline-offset:.1em; text-decoration-skip-ink:none; }
.headline .sub{ display:block; font-size:64px; font-weight:500; letter-spacing:-.02em; line-height:1.15; margin-top:.22em; color:var(--dim); white-space:normal; }
.lead{ margin:28px 0 0; font:400 32px/1.42 var(--font-sans); letter-spacing:-.016em; max-width:1270px; color:var(--fg); }
.lead b{ color:var(--em); }
.foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:60px;
  font:400 22px/1.45 var(--font-sans); color:var(--dim);
}
.foot-note{ max-width:1270px; }
.foot-note b{ color:var(--fg); font-weight:700; }
.foot-src{ font:400 19px/1 var(--font-mono); letter-spacing:.12em; white-space:nowrap; color:var(--dim); flex:0 0 auto; }
.k-cover .foot-src::before, .k-outro .foot-src::before{ content:""; display:inline-block; width:18px; height:18px; border-radius:50%; background:var(--accent); margin-right:14px; vertical-align:-2px; }

/* ───────── 활자 리스트 공통 (표·카드의 해체) ───────── */
.tp-rows, .tbl{ border-top:1px solid var(--fg); }

/* ───────── 01 표지 ───────── */
.k-cover .headline{ font-size:230px; margin-top:24px; }
.k-cover .lead{ margin-top:56px; font-size:36px; max-width:1420px; }
.k-cover .foot{ margin-top:auto; }

/* ───────── 03 09 14 20 색 면 섹션 ───────── */
.k-section .headline{ font-size:380px; margin-top:60px; }
.k-section .tp-base{ margin-top:auto; }
.k-section .headline .sub{ font-size:64px; margin-top:32px; }
.k-section .lead{ margin-top:64px; font:400 28px/1 var(--font-mono); letter-spacing:.1em; max-width:none; color:var(--dim); }

/* ───────── 04 17 선언 ───────── */
.k-statement .headline{ font-size:140px; }
#s17 .headline{ font-size:200px; }
.k-statement .lead{ margin-top:36px; max-width:1700px; }
.body-list{ list-style:none; margin:var(--block-gap) 0 0; padding:0; border-top:1px solid var(--fg); max-width:1700px; }
.body-list li{ padding:22px 0; border-bottom:1px solid var(--line); font-size:34px; line-height:1.35; color:var(--fg); }
.body-list li b{ color:var(--fg); font-weight:800; display:inline-block; min-width:266px; }

/* ───────── 05 4단 (가로) ───────── */
.k-steps .headline{ font-size:150px; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 var(--gut); margin-top:var(--block-gap); }
.step{ padding-top:16px; border-top:1px solid var(--fg); display:grid; gap:0; align-content:start; }
.step.hi{ border-top:3px solid var(--em); padding-top:14px; }
.step-no{ font:400 20px/1 var(--font-mono); letter-spacing:.14em; color:var(--dim); }
.step-title{ display:block; font-family:var(--font-display); font-size:52px; font-weight:800; letter-spacing:-.04em; line-height:1.05; margin-top:14px; color:var(--fg); }
.step.hi .step-no, .step.hi .step-title{ color:var(--em); }
.step-text{ display:block; font-size:24px; line-height:1.4; color:var(--dim); margin-top:16px; }

/* ───────── 15 사다리 (세로 4단 · 강조 행은 액센트 스트립) ───────── */
.k-ladder .headline{ font-size:130px; }
.steps.ladder{ grid-template-columns:1fr; gap:0; border-top:1px solid var(--fg); }
.ladder .step{ grid-template-columns:266px 410px 1fr; gap:0 var(--gut); align-items:baseline; padding:26px 0; border-top:0; border-bottom:1px solid var(--line); }
.ladder .step-no{ font-size:22px; letter-spacing:.1em; }
.ladder .step-title{ margin-top:0; font-size:56px; }
.ladder .step-text{ margin-top:0; font-size:28px; line-height:1.4; }
.ladder .step.hi{
  background:var(--accent); color:var(--accent-on); --em:var(--accent-on);
  margin:0 calc(-1 * var(--m)); padding:30px var(--m) 32px; border-bottom:0; border-top:0;
}
.ladder .step.hi .step-no, .ladder .step.hi .step-title, .ladder .step.hi .step-text{ color:var(--accent-on); }
.ladder .step.hi + .step{ border-top:0; }

/* ───────── 02 06 22 격자 · 21 카드 · 24 링크 ───────── */
.k-grid .headline, .k-cards .headline{ font-size:150px; }
#s02 .headline{ font-size:200px; }
#s22 .headline{ font-size:102px; }
.grid{ display:grid; gap:40px var(--gut); margin-top:var(--block-gap); }
.cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); }
.cell{ padding-top:16px; border-top:1px solid var(--fg); display:grid; gap:0; align-content:start; }
.cell-no{ font:400 20px/1 var(--font-mono); letter-spacing:.14em; color:var(--dim); }
.cell-title{ display:block; font-family:var(--font-display); font-size:52px; font-weight:800; letter-spacing:-.035em; line-height:1.08; margin-top:14px; color:var(--fg); }
.cell-text{ display:block; font-size:24px; line-height:1.4; color:var(--dim); margin-top:14px; }
.cols-4 .cell-title{ font-size:46px; }
.grid.nine{ gap:34px var(--gut); }
.grid.nine .cell{ padding-top:14px; }
.grid.nine .cell-title{ font-size:50px; margin-top:12px; }
.grid.nine .cell-text{ margin-top:8px; }
.constellation .cell-title{ font-family:var(--font-mono); font-weight:600; letter-spacing:-.02em; font-size:42px; }
.grid.cards .cell-no{ color:var(--em); }
.grid.links .cell-title{ font-family:var(--font-mono); font-weight:600; letter-spacing:-.01em; font-size:38px; color:var(--em); }
.k-outro .headline{ font-size:180px; }
.k-outro .lead{ margin-top:var(--block-gap); font-size:30px; max-width:1700px; }

/* ───────── 07 거대 숫자 ───────── */
.k-stats .headline{ font-size:140px; }
.stats{ display:grid; grid-template-columns:983px 1fr; gap:0 var(--gut); align-items:end; margin-top:30px; }
.stat{ display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; align-items:baseline; justify-content:start; column-gap:14px; }
.stat .num{ font-family:var(--font-display); font-weight:800; letter-spacing:-.06em; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--fg); }
.stat .unit{ font-family:var(--font-display); font-weight:700; color:var(--dim); }
.stat .label{ grid-column:1 / -1; font:400 20px/1.4 var(--font-mono); letter-spacing:.06em; color:var(--dim); margin-top:14px; }
.stat:first-child{ grid-row:1 / span 3; align-self:end; }
.stat:first-child .num{ font-size:250px; letter-spacing:-.075em; color:var(--em); line-height:.9; }
.stat:first-child .unit{ font-size:72px; color:var(--fg); }
.stat:first-child .label{ margin-top:22px; }
.stat:not(:first-child){ padding:16px 0 18px; border-top:1px solid var(--line); }
.stat:nth-child(2){ border-top:0; padding-top:0; }
.stat:not(:first-child) .num{ font-size:100px; }
.stat:not(:first-child) .unit{ font-size:30px; }
.stat:not(:first-child) .label{ margin-top:8px; }
.k-stats .lead{ margin-top:var(--block-gap); font-size:28px; max-width:1700px; }

/* ───────── 08 16 표 → 활자 행 ───────── */
.k-table .headline{ font-size:110px; }
#s16 .headline{ font-size:92px; }
.tbl{ width:100%; border-collapse:collapse; margin-top:var(--block-gap); font-size:30px; line-height:1.3; color:var(--fg); }
.tbl th{ text-align:left; padding:0 var(--gut) 14px 0; font:400 20px/1 var(--font-mono); letter-spacing:.14em; color:var(--dim); border-bottom:1px solid var(--line); }
.tbl td{ padding:19px var(--gut) 19px 0; border-bottom:1px solid var(--line); vertical-align:baseline; }
.tbl td:first-child{ font-family:var(--font-mono); font-size:22px; letter-spacing:.06em; color:var(--dim); }
.tbl th.hi, .tbl td.hi{ color:var(--em); font-weight:800; }
.tbl th.hi{ font-weight:600; }
.compare-tbl td.hi{ border-bottom-color:var(--em); }

/* ───────── 10 인용 ───────── */
.k-quote .quote{ margin:20px 0 0; }
.k-quote .quote p{ margin:0; font-family:var(--font-display); font-size:140px; font-weight:800; line-height:1.02; letter-spacing:-.045em; white-space:nowrap; color:var(--fg); }
.k-quote .quote cite{ display:block; margin-top:30px; font:400 22px/1 var(--font-mono); font-style:normal; letter-spacing:.14em; color:var(--dim); }
.k-quote .lead{ margin-top:var(--block-gap); font-size:32px; }

/* ───────── 11 도해 ───────── */
.k-diagram .headline{ font-size:160px; }
.diagram{ width:100%; height:auto; display:block; margin-top:var(--block-gap); overflow:visible; color:var(--fg); }
.diagram .dg-layer rect{ fill:none; stroke:var(--fg); stroke-width:1.5; }
.diagram .dg-layer:nth-of-type(3) rect{ fill:var(--accent); stroke:var(--accent); }
.dg-t{ font-family:var(--font-display); font-size:38px; font-weight:800; letter-spacing:-.03em; fill:var(--fg); }
.dg-s{ font-family:var(--font-sans); font-size:16px; letter-spacing:-.01em; fill:var(--dim); }
.diagram .dg-layer:nth-of-type(3) .dg-t{ fill:var(--accent-on); }
.diagram .dg-layer:nth-of-type(3) .dg-s{ fill:var(--accent-on); opacity:.86; }
.diagram .dg-arrow path{ stroke:var(--accent); stroke-width:3; fill:none; stroke-linecap:square; }
.dg-v{ font-family:var(--font-mono); font-size:14px; letter-spacing:.02em; fill:var(--accent); }
.diagram .dg-loop path{ stroke:var(--line); stroke-width:1.5; fill:none; }
.diagram .dg-loop .dg-v{ fill:var(--dim); font-size:17px; letter-spacing:.14em; }

/* ───────── 12 대비 ───────── */
.k-compare .headline{ font-size:140px; }
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:0 60px; margin-top:var(--block-gap); }
.compare h3{ margin:0; padding-bottom:18px; border-bottom:1px solid var(--fg); font-family:var(--font-display); font-size:52px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--fg); }
.compare .b h3{ color:var(--em); }
.compare ul{ list-style:none; margin:0; padding:0; }
.compare li{ padding:22px 0; border-bottom:1px solid var(--line); font-size:34px; line-height:1.35; color:var(--fg); }
.compare .a li{ color:var(--dim); }

/* ───────── 13 터미널 ───────── */
.k-terminal .headline{ font-size:150px; }
.terminal{ margin:var(--block-gap) 0 0; background:#0B0B0B; color:#F2F0EB; padding:40px 44px; font:400 26px/1.75 var(--font-mono); letter-spacing:0; white-space:pre; overflow:hidden; border-radius:0; }
.terminal .prompt{ color:var(--cmds-pink); }
.terminal .dim{ color:#8E8C86; }
.terminal .ok{ color:#F2F0EB; font-weight:600; }

/* ───────── 18 시각표 ───────── */
.k-timeline .headline{ font-size:120px; }
.timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:0 var(--gut); margin-top:var(--block-gap); }
.tick{ padding-top:16px; border-top:1px solid var(--fg); display:grid; gap:0; align-content:start; }
.tick-when{ font-family:var(--font-mono); font-size:56px; letter-spacing:.02em; line-height:1; font-variant-numeric:tabular-nums; color:var(--fg); }
.tick-lv{ font:400 20px/1 var(--font-mono); letter-spacing:.14em; color:var(--em); margin-top:14px; }
.tick-what{ font-size:24px; line-height:1.4; color:var(--dim); margin-top:16px; }

/* ───────── 19 막대 → 활자 행 ───────── */
.k-bars .headline{ font-size:110px; }
.bars{ margin-top:var(--block-gap); border-top:1px solid var(--fg); }
.bar{ display:grid; grid-template-columns:1fr 600px 120px; gap:0 var(--gut); align-items:center; padding:24px 0; border-bottom:1px solid var(--line); }
.bar-label{ font-size:30px; line-height:1.3; color:var(--fg); }
.bar-label b{ font-family:var(--font-mono); font-weight:700; color:var(--em); display:inline-block; min-width:52px; letter-spacing:.06em; }
.bar-track{ display:block; height:14px; background:var(--hair); }
.bar-track i{ display:block; height:100%; width:calc(var(--w) * 1%); background:var(--fg); }
.bar-val{ font:400 30px/1 var(--font-mono); letter-spacing:.04em; text-align:right; color:var(--fg); font-variant-numeric:tabular-nums; }
.bar.hi .bar-label{ color:var(--em); font-weight:700; }
.bar.hi .bar-track i, .bar.hi .bar-val{ background:var(--em); color:var(--em); }
.bar.hi .bar-val{ background:none; }
.k-bars .lead{ margin-top:var(--block-gap); font-size:28px; max-width:1700px; }

/* ───────── 23 관점 토글 ───────── */
.k-toggle .headline{ font-size:170px; }
.toggle{ margin-top:var(--block-gap); }
.toggle-ctl{ display:flex; gap:12px; }
.toggle-ctl button{ font:600 22px/1 var(--font-sans); letter-spacing:-.01em; padding:16px 26px; border:1.5px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; border-radius:0; transition:background .25s, color .25s, border-color .25s; }
.toggle-ctl button[aria-pressed="true"]{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.toggle-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 var(--gut); margin-top:36px; }
.tg{ padding-top:16px; border-top:1px solid var(--fg); display:grid; align-content:start; }
.tg-a, .tg-b{ display:block; font-family:var(--font-display); font-size:72px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--fg); }
.tg-b{ color:var(--em); }
.toggle[data-view="note"] .tg-b, .toggle[data-view="harness"] .tg-a{ display:none; }
.tg-desc{ display:block; font-size:24px; line-height:1.4; color:var(--dim); margin-top:18px; }
.toggle-verdict{ margin:48px 0 0; font-size:34px; line-height:1.35; color:var(--fg); max-width:1700px; }
.toggle[data-view="harness"] .toggle-verdict{ color:var(--em); }

/* ───────── 모션 (라이즈 스태거 · v14 .rise) ───────── */
html.js .slide[data-active] > :not(.tp-base){ animation:tpRise .6s var(--ease) both; }
html.js .slide[data-active] > :nth-child(1){ animation-delay:0ms; }
html.js .slide[data-active] > :nth-child(2){ animation-delay:80ms; }
html.js .slide[data-active] > :nth-child(3){ animation-delay:160ms; }
html.js .slide[data-active] > :nth-child(4){ animation-delay:240ms; }
html.js .slide[data-active] > :nth-child(5){ animation-delay:320ms; }
html.js .slide[data-active] > :nth-child(6){ animation-delay:400ms; }
@keyframes tpRise{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }
html.js [data-step]{ opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.js [data-step].in{ opacity:1; transform:none; }
html.js svg [data-step]{ transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js .slide[data-active], html.js .slide[data-active] > :not(.tp-base){ animation:none; }
  .toggle-ctl button{ transition:none; }
}

/* ───────── 인쇄 ───────── */
@media print{
  .slide{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  html.js .slide[data-active], html.js .slide[data-active] > :not(.tp-base){ animation:none !important; }
}