/* ═══════════════════════════════════════════════════════════════════
   Intertitle · theme.css  (port of v10-intertitle onto deck-core R1)
   무성영화 자막 카드. 1920×H 무대 안에 2.39:1 픽처 밴드(804px)를 두고
   상·하 바(--bar)가 슬레이트·진행·각주를 나른다. 밴드 안은 센터 대활자.
   규칙: id 선택자 0 · 그라디언트 0 · 외부 자산 0 · 색은 CI 두 토큰의 톤만.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── 팔레트 (다크 우선) ───────── */
html{
  --bars:#E6E1D5; --bg:#F6F3EC; --fg:#1B1B1B; --dim:#5A574F; --faint:#948F86; --line:#D5CFC2; --surface:#ECE8DE;
  --accent:var(--cmds-green); --accent-on:#FFFFFF; --muted:var(--dim);
  --term-bg:#0B0B0B; --term-fg:#F2F0EB; --term-line:#0B0B0B;
  --dk-panel-bg:rgba(230,225,213,.94); --dk-panel-fg:#1B1B1B; --dk-panel-line:#D5CFC2; --dk-font:var(--font-mono); --dk-accent:var(--accent);
  --ease:cubic-bezier(.2,.7,.2,1);
  --bar:138px; --band:804px; --frame:34px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bars:#000000; --bg:#0B0B0B; --fg:#F2F0EB; --dim:#A9A59D; --faint:#6A6760; --line:#2A2825; --surface:#161513;
  --accent:var(--cmds-pink); --accent-on:#1B1B1B; --muted:var(--dim);
  --term-bg:#161513; --term-fg:#F2F0EB; --term-line:#2A2825;
  --dk-panel-bg:rgba(0,0,0,.94); --dk-panel-fg:#F2F0EB; --dk-panel-line:#2A2825;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bars:#000000; --bg:#0B0B0B; --fg:#F2F0EB; --dim:#A9A59D; --faint:#6A6760; --line:#2A2825; --surface:#161513;
    --accent:var(--cmds-pink); --accent-on:#1B1B1B; --muted:var(--dim);
    --term-bg:#161513; --term-fg:#F2F0EB; --term-line:#2A2825;
    --dk-panel-bg:rgba(0,0,0,.94); --dk-panel-fg:#F2F0EB; --dk-panel-line:#2A2825;
    color-scheme:dark;
  }
}
/* 16:10 — 픽처 밴드는 804px 그대로, 바만 198px로 자란다 (레터박스의 자연스러운 동작) */
html[data-aspect="16x10"]{ --bar:198px; }

body{ background:var(--bars); font-size:24px; line-height:1.5; letter-spacing:-.012em; }
b,strong{ font-weight:700; }
code{ font-family:var(--font-mono); font-size:.88em; letter-spacing:0; }

/* ───────── 슬라이드 = 바 + 밴드 ───────── */
.slide{
  background:var(--bars); color:var(--fg); isolation:isolate;
  padding:calc(var(--bar) + var(--frame) + 30px) 100px;
  justify-content:center; align-items:center; gap:40px; text-align:center;
}
.slide::before{ content:""; position:absolute; z-index:-1; left:0; right:0; top:var(--bar); height:var(--band); background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.slide::after{ content:""; position:absolute; z-index:-1; left:var(--frame); right:var(--frame); top:calc(var(--bar) + var(--frame)); height:calc(var(--band) - var(--frame) * 2); border:1px solid var(--line); pointer-events:none; }
.slide > *{ position:relative; z-index:1; margin:0; max-width:1720px; }

/* ───────── 바 크롬 (theme.js가 슬레이트·진행을 주입, kicker/foot는 콘텐츠) ───────── */
.it-top,.it-bottom,.kicker,.foot{ position:absolute; height:var(--bar); display:flex; align-items:center; font-family:var(--font-mono); font-size:17px; letter-spacing:.2em; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap; max-width:none; }
.it-top{ top:0; left:100px; right:100px; justify-content:space-between; pointer-events:none; }
.it-slate .sc{ color:var(--dim); }
.it-sec{ letter-spacing:.18em; }
.kicker{ top:0; left:50%; transform:translateX(-50%); color:var(--dim); letter-spacing:.22em; }
.kicker::before{ content:""; display:inline-block; width:26px; height:2px; background:var(--accent); vertical-align:middle; margin-right:16px; }
.it-bottom{ bottom:0; left:100px; width:380px; gap:22px; }
.it-prog{ width:240px; height:2px; background:var(--line); position:relative; overflow:hidden; display:block; }
.it-prog i{ position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(0); transition:transform .4s var(--ease); }
.foot{ bottom:0; left:520px; right:100px; justify-content:space-between; gap:40px; white-space:normal; }
.foot-note{ flex:1 1 auto; min-width:0; font:400 18px/1.4 var(--font-sans); letter-spacing:-.005em; color:var(--dim); text-align:left; }
.foot-src{ flex:0 0 auto; white-space:nowrap; font-size:15px; letter-spacing:.12em; }

/* ───────── 대활자 ───────── */
.headline{ font:700 52px/1.12 var(--font-display); letter-spacing:-.035em; text-wrap:balance; word-break:keep-all; }
.headline em{ font-style:normal; color:var(--accent); }
.headline .sub{ display:block; font:500 44px/1.2 var(--font-sans); letter-spacing:-.02em; color:var(--dim); margin-top:.28em; }
.k-cover .headline{ font-size:144px; letter-spacing:-.04em; }
.k-section .headline{ font-size:140px; letter-spacing:-.04em; }
.k-statement .headline{ font-size:92px; }
.k-statement .headline em{ color:var(--accent); }
.lead{ font:400 28px/1.5 var(--font-sans); color:var(--fg); text-wrap:balance; max-width:1440px; }
.k-cover .lead{ font-size:32px; color:var(--dim); }
.k-section .lead{ font-family:var(--font-mono); font-size:22px; letter-spacing:.2em; color:var(--accent); }
.k-statement .lead{ font-size:30px; color:var(--dim); }
.k-cover{ gap:40px; } .k-section{ gap:36px; } .k-statement{ gap:34px; }

/* 리스트 (17) — 자막 카드 릴 */
.body-list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:14px; font:400 28px/1.45 var(--font-sans); max-width:1440px; }
.body-list li b{ color:var(--accent); font-family:var(--font-mono); font-size:.72em; letter-spacing:.2em; font-weight:700; margin-right:14px; }

/* ───────── 격자 (02 · 06 · 22 · 21 · 24) ───────── */
.grid{ display:grid; gap:14px; width:100%; }
.cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); }
.cell{ border:1px solid var(--line); padding:26px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.cell-no{ font:600 16px/1 var(--font-mono); letter-spacing:.24em; color:var(--accent); }
.cell-title{ font:700 30px/1.2 var(--font-display); letter-spacing:-.025em; }
.cell-text{ font:400 22px/1.4 var(--font-sans); color:var(--dim); text-wrap:pretty; }
.nine .cell{ padding:22px 18px; gap:8px; }
.nine .cell-title{ font-size:28px; } .nine .cell-text{ font-size:20px; }
.constellation .cell-title{ font-family:var(--font-mono); letter-spacing:-.01em; font-size:26px; }
.cards .cell{ padding:32px 28px; gap:14px; }
.cards .cell-no{ background:var(--accent); color:var(--accent-on); padding:5px 12px; border-radius:2px; }
.cards .cell-text{ font-size:22px; line-height:1.45; }
.links .cell-title{ font-family:var(--font-mono); font-size:27px; letter-spacing:-.01em; color:var(--accent); }

/* ───────── 단계 (05 · 15) ───────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; width:100%; }
.step{ border-top:1px solid var(--line); padding-top:20px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.step.hi{ border-top:2px solid var(--accent); }
.step-no{ font:600 17px/1 var(--font-mono); letter-spacing:.24em; color:var(--accent); }
.step.hi .step-no{ background:var(--accent); color:var(--accent-on); padding:5px 12px; border-radius:2px; }
.step-title{ font:700 34px/1.2 var(--font-display); letter-spacing:-.025em; }
.step-text{ font:400 23px/1.45 var(--font-sans); color:var(--dim); text-wrap:pretty; }
.steps.ladder{ grid-template-columns:1fr; gap:0; max-width:1440px; }
.ladder .step{ display:grid; grid-template-columns:120px 300px 1fr; align-items:baseline; gap:24px; text-align:left; padding:22px 0; border-top:1px solid var(--line); }
.ladder .step.hi{ border-top:1px solid var(--accent); }
.ladder .step-no{ justify-self:start; }
.ladder .step-title{ font-size:34px; }
.ladder .step-text{ font-size:25px; }
.ladder .step.hi .step-title,.ladder .step.hi .step-text{ color:var(--accent); }
.ladder .step.hi .step-text{ color:var(--fg); }

/* ───────── 숫자 (07) ───────── */
.stats{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; width:100%; max-width:1600px; }
.stat{ display:grid; grid-template-columns:auto auto; justify-content:center; align-items:baseline; column-gap:6px; }
.num{ font:700 156px/1 var(--font-display); letter-spacing:-.06em; color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.unit{ font:700 52px/1 var(--font-display); color:var(--accent); }
.label{ grid-column:1/-1; font:400 22px/1.4 var(--font-sans); color:var(--dim); margin-top:20px; }
.k-stats .lead{ font-size:26px; color:var(--dim); }

/* ───────── 표 (08 · 16) ───────── */
.tbl{ border-collapse:collapse; width:100%; max-width:1600px; font:400 26px/1.35 var(--font-sans); letter-spacing:-.01em; text-align:left; }
.tbl th,.tbl td{ padding:14px 22px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl thead th{ font:600 15px/1 var(--font-mono); letter-spacing:.22em; color:var(--faint); text-transform:uppercase; border-bottom:1px solid var(--dim); padding-bottom:14px; }
.tbl tbody tr:first-child td{ padding-top:16px; }
.tbl td:first-child{ color:var(--dim); font-size:23px; }
.tbl .hi{ color:var(--accent); font-weight:600; }
.tbl thead th.hi{ color:var(--accent); }
.compare-tbl th,.compare-tbl td{ padding:12px 20px; }

/* ───────── 인용 (10) ───────── */
.quote{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.quote p{ font:700 80px/1.15 var(--font-display); letter-spacing:-.04em; text-wrap:balance; }
.quote cite{ font:400 19px/1 var(--font-mono); letter-spacing:.2em; color:var(--faint); font-style:normal; }
.quote cite::before{ content:"— "; }
.k-quote .lead{ font-size:30px; color:var(--dim); }
.k-quote{ gap:40px; }

/* ───────── 도해 (11) ───────── */
.diagram{ width:auto; max-width:100%; max-height:460px; display:block; color:var(--fg); overflow:visible; }
.diagram rect{ fill:var(--surface); stroke:var(--line); stroke-width:1.5; }
.diagram path{ stroke:var(--accent); stroke-width:3; fill:none; stroke-linecap:round; }
.dg-t{ font:700 38px var(--font-display); fill:var(--fg); letter-spacing:-.03em; }
.dg-s{ font:400 18px var(--font-sans); fill:var(--dim); }
.dg-v{ font:600 16px var(--font-mono); fill:var(--accent); letter-spacing:.04em; }

/* ───────── 대비 (12) ───────── */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:80px; width:100%; max-width:1560px; text-align:left; }
.compare h3{ font:700 36px/1.2 var(--font-display); letter-spacing:-.03em; margin:0 0 20px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.compare .b h3{ color:var(--accent); border-bottom-color:var(--accent); }
.compare ul{ margin:0; padding:0; list-style:none; font:400 26px/1.4 var(--font-sans); display:flex; flex-direction:column; gap:14px; }
.compare li::before{ content:"·"; color:var(--faint); margin-right:14px; }
.compare .b li::before{ color:var(--accent); }
.compare .a{ color:var(--dim); }

/* ───────── 터미널 (13) ───────── */
.terminal{ background:var(--term-bg); color:var(--term-fg); border:1px solid var(--term-line); padding:30px 40px; font:400 22px/1.65 var(--font-mono); letter-spacing:0; text-align:left; white-space:pre; overflow:hidden; max-width:1400px; width:100%; }
.terminal .prompt{ color:var(--cmds-pink); } .terminal .dim{ color:#8E8C86; } .terminal .ok{ color:var(--cmds-pink); font-weight:600; }

/* ───────── 타임라인 (18) ───────── */
.timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; width:100%; }
.tick{ border-top:1px solid var(--line); padding-top:22px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.tick-when{ font:700 30px/1 var(--font-mono); letter-spacing:.02em; color:var(--accent); font-variant-numeric:tabular-nums; }
.tick-lv{ font:500 16px/1 var(--font-mono); letter-spacing:.22em; color:var(--faint); }
.tick-what{ font:400 23px/1.45 var(--font-sans); color:var(--fg); text-wrap:pretty; }

/* ───────── 막대 (19) ───────── */
.bars{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:1560px; }
.bar{ display:grid; grid-template-columns:1fr 520px 90px; align-items:center; gap:28px; font:400 24px/1.3 var(--font-sans); text-align:left; padding:8px 0; border-bottom:1px solid var(--line); }
.bar-label b{ color:var(--accent); font-family:var(--font-mono); font-size:.8em; letter-spacing:.2em; margin-right:14px; }
.bar-track{ height:12px; background:var(--line); display:block; }
.bar-track i{ display:block; height:100%; width:calc(var(--w) * 1%); background:var(--dim); }
.bar.hi .bar-track i{ background:var(--accent); }
.bar-val{ font:600 24px/1 var(--font-mono); text-align:right; color:var(--dim); font-variant-numeric:tabular-nums; }
.bar.hi .bar-val,.bar.hi .bar-label{ color:var(--accent); }
.k-bars .lead{ font-size:24px; color:var(--dim); }

/* ───────── 토글 (23) ───────── */
.toggle{ display:flex; flex-direction:column; align-items:center; gap:28px; width:100%; }
.toggle-ctl{ display:flex; gap:12px; }
.toggle-ctl button{ font:600 20px/1 var(--font-sans); letter-spacing:-.01em; padding:15px 26px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; border-radius:3px; }
.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); gap:14px; width:100%; }
.tg{ border:1px solid var(--line); padding:30px 22px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.tg-a,.tg-b{ font:700 40px/1.1 var(--font-display); letter-spacing:-.03em; }
.tg-b{ color:var(--accent); }
.toggle[data-view="note"] .tg-b,.toggle[data-view="harness"] .tg-a{ display:none; }
.tg-desc{ font:400 20px/1.4 var(--font-sans); color:var(--dim); }
.toggle-verdict{ font:400 28px/1.4 var(--font-sans); color:var(--fg); text-wrap:balance; }
.toggle-verdict:empty{ display:none; }
.toggle[data-view="harness"] .toggle-verdict{ color:var(--accent); }

/* ───────── 아웃트로 (24) ───────── */
.k-outro .lead{ font-size:28px; color:var(--dim); }

/* ───────── 컷 공개 (핵심 규칙: id 선택자 금지, html.js [data-step].in 보다 강한 선택자 금지) ───────── */
html.js [data-step]{ opacity:0; transform:translateY(14px); transition:opacity .28s var(--ease), transform .28s var(--ease); }
html.js [data-step].in{ opacity:1; transform:none; transition:opacity .45s var(--ease) .1s, transform .45s var(--ease) .1s; }
html.js svg [data-step]{ transform:none; }
/* 릴 모드 — 지나간 자막은 dim으로 물러난다 (뒤에 공개된 형제가 있으면 = 최신 컷이 아니면) */
html.js .body-list li[data-step].in:has(~ [data-step].in),
html.js .tick[data-step].in:has(~ [data-step].in) .tick-what{ color:var(--dim); }
html.js .body-list li[data-step].in:has(~ [data-step].in) b{ color:var(--dim); }
/* 카드 인 — 밴드가 컷처럼 켜진다 */
@media screen and (prefers-reduced-motion: no-preference){
  html.js .slide[data-active]::before{ animation:it-cardIn .32s var(--ease) both; }
  @keyframes it-cardIn{ from{ opacity:0; } to{ opacity:1; } }
}

/* ───────── 인쇄 — 바·밴드는 슬라이드 안에 있으므로 그대로. 진행바 전환만 끈다 ───────── */
@media print{
  .it-prog i{ transition:none; }
  .slide::before{ animation:none !important; }
}