/* ═══════════════════════════════════════════════════════════════
   Broadsheet · theme.css  (port of v11 Broadsheet onto deck-core R1)
   한 장 = 신문 1면. 마스트헤드(제호·귀·폴리오·이중 괘선)가 크롬이고
   본문은 6단 격자 위에 1px 괘선으로만 나눈다. 카드·그림자·둥근 모서리 없음.
   강조는 잉크 반전 한 가지. 세리프 없음 — 웨이트·자간·괘선이 신문을 만든다.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── 토큰 · 신문지(라이트) ───────── */
:root{
  --paper:#F3F0E8; --ink:#17160F; --dim:#56534B; --faint:#6E6A60;
  --rule:#C9C4B5; --rule2:#DFDACC; --tint:#EAE6DA;
  --bg:var(--paper); --fg:var(--ink); --muted:var(--dim); --line:var(--rule);
  --accent:var(--cmds-green); --accent-on:#FFFFFF;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* 격자 */
  --pad-x:96px; --pad-t:52px; --pad-b:60px; --gut:36px; --col:calc((1920px - var(--pad-x)*2 - var(--gut)*5) / 6);
  --body-gap:32px;
  /* 코어 패널 재스킨 */
  --dk-panel-bg:rgba(243,240,232,.96); --dk-panel-fg:var(--ink); --dk-panel-line:var(--rule);
  --dk-panel-h:44px; --dk-notes-w:460px; --dk-font:var(--font-mono); --dk-accent:var(--accent);
}
/* 야간판(다크) — 잉크 반전 · 액센트 핑크 */
html[data-theme="dark"]{
  --paper:#121212; --ink:#EDE8DC; --dim:#ABA79B; --faint:#8A867B;
  --rule:#3A3831; --rule2:#282722; --tint:#1B1A17;
  --accent:var(--cmds-pink); --accent-on:#1B1B1B;
  --dk-panel-bg:rgba(18,18,18,.96);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --paper:#121212; --ink:#EDE8DC; --dim:#ABA79B; --faint:#8A867B;
    --rule:#3A3831; --rule2:#282722; --tint:#1B1A17;
    --accent:var(--cmds-pink); --accent-on:#1B1B1B;
    --dk-panel-bg:rgba(18,18,18,.96);
  }
}
html[data-aspect="16x10"]{ --pad-t:64px; --pad-b:72px; --body-gap:44px; }

/* ───────── 지면 ───────── */
body{ font-size:24px; line-height:1.5; letter-spacing:-.012em; font-feature-settings:"kern","liga","calt"; text-rendering:optimizeLegibility; }
html[data-engine="stage"] #deck{ box-shadow:0 0 0 1px var(--rule); }
.slide{ padding:var(--pad-t) var(--pad-x) var(--pad-b); gap:0; color:var(--ink); }
.slide > * + *{ margin-top:var(--body-gap); }
b,strong{ font-weight:700; }
code{ font-family:var(--font-mono); font-size:.86em; letter-spacing:0; }

/* ───────── 마스트헤드 — 귀 · 제호 · 폴리오 · 이중 괘선 (theme.js 가 인쇄) ───────── */
.bs-mast{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:24px; flex:0 0 auto; }
.bs-mast .ear{ font:400 17px/1 var(--font-mono); letter-spacing:.1em; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bs-mast .ear.l{ justify-self:start; }
.bs-mast .ear.r{ justify-self:end; text-transform:uppercase; }
.bs-mast .name{ font:800 40px/1.1 var(--font-display); letter-spacing:-.035em; text-align:center; white-space:nowrap; color:var(--ink); }
.bs-mast .folio{ grid-column:1/-1; text-align:center; margin-top:14px; font:400 16px/1 var(--font-mono); letter-spacing:.14em; color:var(--dim); font-variant-numeric:tabular-nums; }
.bs-mast .folio .pg{ color:var(--ink); font-weight:600; }
.slide[data-active] .bs-mast .folio .pg{ color:var(--accent); }      /* 현재 면 — CSS 만으로 강조 */
.bs-mast .rules{ grid-column:1/-1; margin-top:14px; height:11px; border-top:4px solid var(--ink); border-bottom:1px solid var(--ink); position:relative; }
.bs-mast .rules .prog{ position:absolute; left:0; top:-4px; height:4px; width:calc(var(--p) * 100%); background:var(--accent); }
/* 커버 — 마스트헤드가 헤드라인을 감싼다 (귀 → 제호=헤드라인 → 폴리오 → 괘선) */
.k-cover .bs-mast{ display:contents; }
.k-cover .bs-mast .ears{ order:0; display:flex; justify-content:space-between; align-items:baseline; gap:40px; margin-top:0; }
.k-cover .bs-mast .ear{ font-size:20px; }
.k-cover .kicker{ order:1; align-self:center; }
.k-cover .headline{ order:2; text-align:center; }
.k-cover .bs-mast .folio{ order:3; font-size:18px; margin-top:34px; }
.k-cover .bs-mast .rules{ order:4; margin-top:16px; }
.k-cover .lead{ order:5; align-self:center; text-align:center; }
.k-cover .foot{ order:6; }

/* ───────── 기사 부품 ───────── */
.kicker{ display:inline-block; align-self:flex-start; font:400 17px/1 var(--font-mono); letter-spacing:.1em; padding:9px 14px 8px; background:var(--accent); color:var(--accent-on); margin:0; }
.slide > .kicker{ margin-top:var(--body-gap); }
.headline{ font:800 88px/1.06 var(--font-display); letter-spacing:-.04em; margin:0; text-wrap:balance; color:var(--ink); }
.slide > .headline{ margin-top:22px; }
.headline em{ font-style:normal; color:var(--accent); }
.headline .sub{ display:block; font-size:.5em; font-weight:500; letter-spacing:-.02em; color:var(--dim); margin-top:.28em; }
.bs-by{ margin:18px 0 0; font:400 16px/1 var(--font-mono); letter-spacing:.12em; color:var(--faint); white-space:nowrap; }
.bs-by::before{ content:""; display:inline-block; width:28px; height:1px; background:var(--faint); vertical-align:middle; margin-right:14px; }
.lead{ font:400 32px/1.48 var(--font-sans); letter-spacing:-.02em; color:var(--ink); margin:0; max-width:calc(var(--col)*4 + var(--gut)*3); text-wrap:balance; }
.slide > .lead{ margin-top:28px; }
/* 하단 밴드 — 3px 괘선 · 각주 + 출처 */
.foot{ margin-top:auto; padding-top:20px; border-top:3px solid var(--ink); display:grid; grid-template-columns:1fr auto; column-gap:var(--gut); align-items:start; font:400 23px/1.5 var(--font-sans); color:var(--dim); }
.foot-note{ text-wrap:balance; max-width:calc(var(--col)*4 + var(--gut)*3); }
.foot-note b{ color:var(--ink); }
.foot-src{ font:400 16px/1.5 var(--font-mono); letter-spacing:.12em; color:var(--faint); white-space:nowrap; padding-top:8px; }
.foot-src::before{ content:"— "; }

/* ───────── 6단 격자 · 괘선 (모든 종류의 밑 격자) ───────── */
.grid, .steps:not(.ladder), .timeline, .compare, .toggle-grid{ flex:1 1 auto; min-height:0; align-content:start; }
.grid{ display:grid; column-gap:var(--gut); row-gap:0; border-top:1px solid var(--ink); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.cell{ padding:26px 0 30px; align-self:stretch; display:flex; flex-direction:column; gap:10px; position:relative; }
.cell::before{ content:""; position:absolute; left:calc(var(--gut) / -2); top:0; bottom:0; width:1px; background:var(--rule); }   /* 단 사이 괘선 — 거터 중앙 */
.cols-3 .cell:nth-child(3n+1)::before, .cols-4 .cell:nth-child(4n+1)::before{ display:none; }
.cell-no{ font:400 17px/1 var(--font-mono); letter-spacing:.1em; color:var(--accent); }
.cell-title{ font:800 34px/1.12 var(--font-display); letter-spacing:-.035em; color:var(--ink); }
.cell-text{ font:400 22px/1.45 var(--font-sans); color:var(--dim); text-wrap:balance; }
/* 9칸 — 3행: 행 사이 괘선 */
.grid.nine{ align-content:stretch; grid-auto-rows:1fr; } .grid.nine .cell{ padding:22px 0 24px; border-bottom:1px solid var(--rule); gap:6px; }
.grid.nine .cell:nth-last-child(-n+3){ border-bottom:0; }
.grid.nine .cell-title{ font-size:36px; }
.grid.nine .cell-text{ font-size:21px; }
.grid.constellation .cell-title{ font-family:var(--font-mono); font-weight:700; font-size:30px; letter-spacing:-.01em; }
/* 관련 기사 3단(카드) — 셋째 단 반전 (v11 S05) */
.grid.cards .cell{ padding:28px 28px 36px; min-height:340px; }
.grid.cards .cell:first-child{ padding-left:0; }
.grid.cards .cell::before{ display:none; }
.grid.cards .cell + .cell{ border-left:1px solid var(--rule); margin-left:calc(var(--gut) * -1); padding-left:var(--gut); }
.grid.cards .cell-title{ font-size:44px; margin-top:8px; }
.grid.cards .cell-text{ font-size:24px; line-height:1.5; margin-top:8px; }
.grid.cards .cell:last-child{ background:var(--accent); color:var(--accent-on); border-left-color:var(--accent); padding-right:28px; }
.grid.cards .cell:last-child .cell-no, .grid.cards .cell:last-child .cell-title, .grid.cards .cell:last-child .cell-text{ color:var(--accent-on); }
.grid.cards .cell:last-child .cell-text{ opacity:.92; }
/* 클로징 링크 3단 */
.grid.links .cell-title{ font-family:var(--font-mono); font-weight:700; font-size:30px; letter-spacing:-.01em; }
.grid.links .cell-text{ font-size:23px; }

/* ───────── 흐름표 (steps · 05) — → 구분 · 4단 ───────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }
.step{ position:relative; align-self:stretch; padding:26px 28px 30px 0; display:flex; flex-direction:column; gap:12px; }
.step + .step{ padding-left:48px; }
.step + .step::before{ content:"→"; position:absolute; left:4px; top:26px; font:400 26px/1 var(--font-mono); color:var(--faint); }
.step-no{ font:400 17px/1 var(--font-mono); letter-spacing:.1em; color:var(--accent); }
.step-title{ font:800 42px/1.1 var(--font-display); letter-spacing:-.035em; color:var(--ink); }
.step-text{ font:400 22px/1.45 var(--font-sans); color:var(--dim); text-wrap:balance; }
.step.hi::after{ content:""; position:absolute; left:0; right:28px; top:-1px; height:4px; background:var(--accent); }
.step.hi .step-no, .step.hi .step-title{ color:var(--accent); }
/* 사다리 (15) — 4행 표 · v3 행 반전 */
.steps.ladder{ grid-template-columns:1fr; }
.steps.ladder .step{ display:grid; grid-template-columns:160px 320px 1fr; column-gap:var(--gut); align-items:baseline; padding:22px 0; border-bottom:1px solid var(--rule); }
.steps.ladder .step + .step{ padding-left:0; }
.steps.ladder .step + .step::before{ display:none; }
.steps.ladder .step-no{ font-size:20px; padding-top:6px; }
.steps.ladder .step-title{ font-size:38px; }
.steps.ladder .step-text{ font-size:25px; line-height:1.45; }
.steps.ladder .step.hi{ background:var(--accent); color:var(--accent-on); border-bottom-color:var(--accent); padding:28px 24px; margin:0 -24px; }
.steps.ladder .step.hi::after{ display:none; }
.steps.ladder .step.hi .step-no, .steps.ladder .step.hi .step-title, .steps.ladder .step.hi .step-text{ color:var(--accent-on); }
.steps.ladder .step.hi .step-text{ font-weight:600; }

/* ───────── 시세표 (stats · 07) — 첫 칸 액센트 ───────── */
.stats{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.stat{ display:grid; grid-template-rows:1fr auto; grid-template-columns:auto auto 1fr; align-items:end; padding:26px 24px 30px 0; }
.stat .unit{ padding-bottom:.12em; }
.stat + .stat{ border-left:1px solid var(--rule); padding-left:28px; }
.stat .num{ font:800 128px/1 var(--font-display); letter-spacing:-.05em; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink); }
.stat .unit{ font:700 34px/1 var(--font-display); letter-spacing:-.02em; margin-left:8px; color:var(--ink); }
.stat .label{ grid-column:1/-1; margin-top:18px; font:400 21px/1.45 var(--font-sans); color:var(--dim); text-wrap:balance; }
.stat:first-child .num{ font-size:170px; color:var(--accent); }
.stat:first-child .unit{ color:var(--accent); font-size:44px; }
.k-stats .lead{ max-width:calc(var(--col)*5 + var(--gut)*4); font-size:29px; }

/* ───────── 표 (08 · 16) — 신문 표: 잉크 괘선 · 모노 머리 · 강조 열 반전 ───────── */
.tbl{ width:100%; border-collapse:collapse; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font:400 26px/1.35 var(--font-sans); letter-spacing:-.015em; }
.tbl th, .tbl td{ text-align:left; padding:15px 22px 15px 0; vertical-align:top; }
.tbl th{ font:400 16px/1 var(--font-mono); letter-spacing:.12em; color:var(--dim); text-transform:uppercase; border-bottom:1px solid var(--ink); padding-top:14px; padding-bottom:12px; }
.tbl td{ border-bottom:1px solid var(--rule); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl td:first-child{ color:var(--ink); font-weight:600; }
.tbl th.hi{ background:var(--accent); color:var(--accent-on); padding-left:22px; border-bottom-color:var(--accent); }
.tbl td.hi{ background:var(--accent); color:var(--accent-on); font-weight:600; padding-left:22px; border-bottom-color:rgba(255,255,255,.22); }
html[data-theme="dark"] .tbl td.hi{ border-bottom-color:rgba(27,27,27,.25); }
.tbl td.hi:last-child, .tbl th.hi:last-child{ padding-right:22px; }
.tbl .hi{ transition:none; }
.compare-tbl td:first-child{ font-family:var(--font-mono); font-weight:400; font-size:20px; letter-spacing:.02em; color:var(--dim); }

/* ───────── 발췌문 (quote · 10) ───────── */
.quote{ margin:0; border-top:3px solid var(--ink); border-bottom:1px solid var(--ink); padding:40px 0 36px; max-width:calc(var(--col)*5 + var(--gut)*4); }
.slide > .quote{ margin-top:var(--body-gap); }
.quote p{ font:800 72px/1.14 var(--font-display); letter-spacing:-.04em; margin:0 0 26px; color:var(--ink); text-wrap:balance; }
.quote cite{ display:block; font:400 17px/1 var(--font-mono); letter-spacing:.12em; color:var(--faint); font-style:normal; }
.quote cite::before{ content:""; display:inline-block; width:28px; height:1px; background:var(--faint); vertical-align:middle; margin-right:14px; }
.k-quote .lead{ color:var(--accent); font-weight:600; }

/* ───────── 도해 (diagram · 11) — 손으로 라벨 단 잉크 인포그래픽 ───────── */
.diagram{ width:100%; max-height:520px; display:block; overflow:visible; color:var(--ink); }
.slide > .diagram{ margin-top:var(--body-gap); }
.diagram rect{ fill:var(--paper); stroke:var(--ink); stroke-width:1.5; }
.diagram .dg-layer:nth-of-type(3) rect{ fill:var(--tint); }
.diagram path{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.diagram .dg-loop path{ stroke:var(--dim); stroke-width:1.5; stroke-dasharray:6 6; }
.dg-t{ font:800 34px var(--font-display); letter-spacing:-.03em; fill:var(--ink); }
.dg-s{ font:400 19px var(--font-sans); fill:var(--dim); }
.dg-v{ font:600 15px var(--font-mono); letter-spacing:0; fill:var(--accent); }
.dg-loop .dg-v{ fill:var(--dim); font-family:var(--font-sans); font-weight:500; letter-spacing:-.01em; font-size:20px; }

/* ───────── 2단 대비 (compare · 12) — 단 사이 괘선 · 행 괘선 목록 ───────── */
.compare{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gut); border-top:1px solid var(--ink); }
.compare .col{ padding:26px 0 10px; position:relative; align-self:stretch; }
.compare .col.b::before{ content:""; position:absolute; left:calc(var(--gut) / -2); top:0; bottom:0; width:1px; background:var(--rule); }
.compare h3{ font:800 44px/1.1 var(--font-display); letter-spacing:-.035em; margin:0 0 18px; color:var(--dim); }
.compare .b h3{ color:var(--accent); }
.compare ul{ list-style:none; margin:0; padding:0; }
.compare li{ font:400 27px/1.45 var(--font-sans); letter-spacing:-.015em; padding:16px 0; border-top:1px solid var(--rule); color:var(--ink); }
.compare .a li{ color:var(--dim); }
.compare li::before{ content:"·"; display:inline-block; width:28px; color:var(--faint); }
.compare .b li::before{ color:var(--accent); }

/* ───────── 터미널 (13) — 검정 박스가 아니라 지면 위 발췌 목록 ───────── */
.terminal{ margin:0; background:var(--tint); color:var(--ink); border:1px solid var(--ink); border-top-width:3px; padding:28px 32px; font:400 23px/1.7 var(--font-mono); letter-spacing:0; white-space:pre; overflow:hidden; font-variant-numeric:tabular-nums; border-radius:0; }
.slide > .terminal{ margin-top:var(--body-gap); }
.terminal .prompt{ color:var(--accent); font-weight:700; }
.terminal .dim{ color:var(--faint); opacity:1; }
.terminal .ok{ color:var(--accent); font-weight:600; }

/* ───────── 본문 목록 (statement 17) ───────── */
.body-list{ list-style:none; margin:0; padding:0; max-width:calc(var(--col)*4 + var(--gut)*3); border-top:1px solid var(--ink); }
.slide > .body-list{ margin-top:var(--body-gap); }
.body-list li{ font:400 28px/1.45 var(--font-sans); letter-spacing:-.015em; padding:16px 0; border-bottom:1px solid var(--rule); color:var(--dim); }
.body-list li b{ color:var(--ink); font-family:var(--font-mono); font-weight:700; font-size:22px; letter-spacing:.02em; margin-right:10px; }
.k-statement .headline{ font-size:96px; }
.k-statement .lead{ max-width:calc(var(--col)*5 + var(--gut)*4); }

/* ───────── 시간축 (timeline · 18) — 5단 · 괘선 ───────── */
.timeline{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--ink); }
.tick{ align-self:stretch; padding:26px 24px 30px 0; display:flex; flex-direction:column; gap:10px; position:relative; }
.tick + .tick{ border-left:1px solid var(--rule); padding-left:24px; }
.tick-when{ font:800 40px/1 var(--font-display); letter-spacing:-.03em; color:var(--ink); }
.tick-lv{ font:400 17px/1 var(--font-mono); letter-spacing:.1em; color:var(--accent); }
.tick-what{ font:400 22px/1.45 var(--font-sans); color:var(--dim); margin-top:6px; text-wrap:balance; }
.tick:nth-child(4) .tick-when{ color:var(--accent); }
.tick:nth-child(4)::after{ content:""; position:absolute; left:0; right:24px; top:-1px; height:4px; background:var(--accent); }
.tick:nth-child(4){ padding-left:0; border-left:0; }
.tick:nth-child(4)::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:1px; background:var(--rule); }
.tick:nth-child(4) .tick-when, .tick:nth-child(4) .tick-lv, .tick:nth-child(4) .tick-what{ margin-left:24px; }

/* ───────── 막대 (bars · 19) — 라벨 단 | 막대 단 | 값 (막대는 라벨과 다른 칸) ───────── */
.bars{ display:grid; border-top:1px solid var(--ink); }
.bar{ display:grid; grid-template-columns:1fr 560px 110px; column-gap:var(--gut); align-items:center; padding:16px 0; border-bottom:1px solid var(--rule); font:400 25px/1.35 var(--font-sans); letter-spacing:-.015em; color:var(--dim); }
.bar-label b{ font-family:var(--font-mono); font-weight:700; color:var(--ink); margin-right:12px; font-size:22px; }
.bar-track{ height:18px; background:var(--tint); position:relative; }
.bar-track i{ display:block; height:100%; width:calc(var(--w) * 1%); background:var(--ink); transition:width .6s var(--ease); }
.bar-val{ font:600 26px/1 var(--font-mono); text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
.bar.hi{ color:var(--ink); }
.bar.hi .bar-track i{ background:var(--accent); }
.bar.hi .bar-val, .bar.hi .bar-label b{ color:var(--accent); }
.k-bars .lead{ font-size:27px; max-width:calc(var(--col)*5 + var(--gut)*4); }
.k-bars .headline{ font-size:80px; }

/* ───────── 관점 전환 (toggle · 23) ───────── */
.toggle-ctl{ display:flex; gap:10px; margin-bottom:26px; }
.toggle-ctl button{ font:600 20px/1 var(--font-sans); letter-spacing:-.01em; padding:15px 26px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; border-radius:0; transition:background .25s, color .25s; }
.toggle-ctl button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.toggle-grid{ display:grid; grid-template-columns:repeat(4,1fr); column-gap:var(--gut); border-top:1px solid var(--ink); }
.tg{ align-self:stretch; padding:26px 0 30px; display:flex; flex-direction:column; gap:12px; position:relative; }
.tg::before{ content:""; position:absolute; left:calc(var(--gut) / -2); top:0; bottom:0; width:1px; background:var(--rule); }
.tg:first-child::before{ display:none; }
.tg-a, .tg-b{ font:800 46px/1.05 var(--font-display); letter-spacing:-.04em; color:var(--ink); }
.tg-b{ color:var(--accent); }
.toggle[data-view="note"] .tg-b, .toggle[data-view="harness"] .tg-a{ display:none; }
.tg-desc{ font:400 21px/1.45 var(--font-sans); color:var(--dim); text-wrap:balance; }
.toggle-verdict{ margin:30px 0 0; font:400 30px/1.45 var(--font-sans); letter-spacing:-.02em; color:var(--dim); max-width:calc(var(--col)*5 + var(--gut)*4); }
.toggle-verdict:empty{ display:none; }
.toggle[data-view="harness"] .toggle-verdict{ color:var(--accent); font-weight:600; }

/* ───────── 섹션 면 — "면 머리" ───────── */
.k-section{ justify-content:flex-start; }
.k-section .headline{ font-size:150px; line-height:1.0; letter-spacing:-.05em; margin-top:40px; }
.k-section .headline .sub{ font-size:.32em; font-weight:500; letter-spacing:-.02em; margin-top:.35em; }
.k-section .lead{ font:400 34px/1.4 var(--font-mono); letter-spacing:.02em; color:var(--accent); margin-top:36px; }
/* 면 색인 — 메타의 섹션 4개, 현재 섹션 반전 (BUSINESS / SCIENCE 식 면 머리) */
.bs-secindex{ margin-top:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); border-bottom:1px solid var(--rule); }
.bs-secindex .ix{ padding:22px 24px 24px 0; font:500 26px/1.2 var(--font-sans); letter-spacing:-.02em; color:var(--dim); display:flex; gap:16px; align-items:baseline; }
.bs-secindex .ix + .ix{ border-left:1px solid var(--rule); padding-left:24px; }
.bs-secindex .ix b{ font:400 17px/1 var(--font-mono); letter-spacing:.1em; color:var(--faint); }
.bs-secindex .ix.on{ background:var(--accent); color:var(--accent-on); font-weight:700; padding-left:24px; margin-left:-1px; border-left-color:var(--accent); }
.bs-secindex .ix.on b{ color:var(--accent-on); }
.bs-secindex .ix.on + .ix{ border-left-color:var(--accent); }
.bs-secfoot{ margin-top:0; border-top:0; padding-top:20px; }
.bs-secfoot .foot-note{ font:400 17px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding-top:6px; }

/* ───────── 커버 ───────── */
.k-cover .kicker{ margin-top:36px; }
.k-cover .headline{ font-size:168px; line-height:1.02; letter-spacing:-.045em; margin-top:22px; text-align:left; }
.k-cover .lead{ font-size:36px; line-height:1.36; letter-spacing:-.025em; max-width:none; margin-top:40px; color:var(--ink); }
.k-cover .foot{ border-top:1px solid var(--rule); padding-top:18px; font:400 17px/1.5 var(--font-mono); letter-spacing:.14em; color:var(--faint); grid-template-columns:auto 1fr; }
.k-cover .foot-note{ max-width:none; }
.k-cover .foot-src{ justify-self:end; padding-top:0; }
.k-cover .foot-src::before{ content:""; }

/* ───────── 클로징 ───────── */
.k-outro .headline{ font-size:108px; }
.k-outro .lead{ font-size:30px; color:var(--dim); }
.k-outro .lead::before{ content:""; display:inline-block; width:28px; height:1px; background:var(--faint); vertical-align:middle; margin-right:14px; }

/* ───────── 그리드 면(02 · 06 · 22) 헤드라인 ───────── */
.k-grid .headline, .k-cards .headline, .k-table .headline, .k-compare .headline, .k-terminal .headline, .k-timeline .headline, .k-steps .headline, .k-ladder .headline, .k-stats .headline, .k-diagram .headline, .k-toggle .headline{ font-size:84px; }
.k-toggle .toggle{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.k-toggle .toggle-grid{ flex:1 1 auto; }
.k-table .headline{ font-size:72px; }

/* ───────── 모션 — 잉크가 내려앉듯 ───────── */
html.js [data-step]{ transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.js svg [data-step]{ transform:none; }

/* ───────── 인쇄 — 항상 신문지 라이트 · 마스트헤드는 지면 안이라 그대로 찍힌다 ───────── */
@media print{
  :root, html[data-theme="dark"]{
    --paper:#F3F0E8; --ink:#17160F; --dim:#56534B; --faint:#6E6A60; --rule:#C9C4B5; --rule2:#DFDACC; --tint:#EAE6DA;
    --accent:#134538; --accent-on:#FFFFFF;
  }
  html[data-engine="stage"] #deck{ box-shadow:none; }
  .slide{ border-bottom:1px solid var(--rule); }
  .bar-track i{ transition:none; }
}