/* ───────── 이 덱 전용 추가 스타일 — 2026-10-28 "종이 위 스펙시트" (엔진 deck.css는 손대지 않는다) ─────────
 * 규칙
 * - 색은 tokens.css 토큰만 쓴다. 흰 카드 + 1px --line-1, 그림자 없음, 모서리 2~4px. 터미널만 검은 패널.
 * - 무대는 1920×1080 고정(deck.js가 scale) → 단위는 px. 글자 최소 20px, 본문 24px 이상.
 * - 장면(scene) 애니메이션은 전부 `.X:not(.is-pending)` 에서 시작한다. 엔진이 is-pending 을 붙였다 뗀다.
 *   step 0 요소(클릭 없이 나오는 것)는 is-pending 이 바뀌지 않으므로 `.slide.is-active` 가 붙는 순간을 함께 쓴다
 *   (퇴장 중 `.is-leaving` 과 인쇄 `html.print` 에서도 끝 상태를 유지).
 */

/* ───────── 공통: 안내선, § 라벨, 터미널 바 ───────── */

/* 세로 안내선 6칸. 무대 바깥 고정 레이어(입자 위, 무대 아래). 인쇄 땐 숨김 */
.guides {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  background-position: 0 0;
}
html.print .guides { display: none; }

/* 모노 라벨은 `§ ` 로 시작 (deck.css 의 "/ " 를 덮어쓴다) */
.label::before { content: "§ "; color: var(--fg-3); }
.label--bare::before { content: none; }
.hud__section::before { content: "§ "; color: var(--fg-3); }

/* 검은 터미널 바 위 글자는 종이용 --fg-2 가 안 보인다 → 터미널 전용 dim */
.term__bar { color: var(--term-dim); }
.term__bar i { background: var(--term-line); }

/* 긴 한글 제목: hero 크기를 한 단계 낮춘다 (두 줄 유지) */
.h-hero.is-long { font-size: 120px; }

/* ───────── 증거 이미지 (.fig) ───────── */
.fig { margin: 0; min-width: 0; }
.fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--panel);
}
.fig figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: var(--track-label);
  color: var(--fg-2);
}
/* split 장: 글 반대편 열에 놓는다 */
.slide--split .fig { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; width: 100%; }
.slide--split.is-right .fig { grid-column: 1; grid-row: 1; justify-self: start; }
.appendix .fig { max-width: 1100px; margin-top: var(--s-3); }
/* 캡처 스포트라이트: 바깥은 잉크 28% 로 어둡게, 틀은 amber. 위치·크기는 HTML 의 --x/--y/--w/--h (%) */
.fig.has-spot { position: relative; overflow: hidden; }   /* 스포트라이트 그림자는 캡처 안에서만 */
.spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 3px solid var(--accent-fill);
  border-radius: 6px;
  box-shadow: 0 0 0 9999px var(--spot-dim);
  pointer-events: none;
}
:is(.slide.is-active, .slide.is-leaving) .spot:not(.is-pending) { animation: spot-in 0.7s var(--ease-out) both; }
@keyframes spot-in { from { transform: scale(1.25); box-shadow: 0 0 0 9999px transparent; } }

/* ───────── 사진 슬롯 (.slots) — 파일이 없으면 점선 틀 + 안내만 ───────── */
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); min-width: 0; }
.slot { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.slot img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--panel);
}
.slot__empty {
  display: none;
  height: 360px;
  padding: 32px;
  border: 1px dashed var(--fg-3);
  border-radius: var(--r-md);
  place-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-2);
}
.slot__empty b { display: block; margin-bottom: 8px; font-weight: 500; color: var(--fg-0); }
.slot.is-missing img { display: none; }
.slot.is-missing .slot__empty { display: grid; }
.slot figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: var(--track-label);
  color: var(--fg-2);
}

/* ───────── 영상 — 종이 위에 끼운 검은 프레임. 파일이 없으면 점선 틀만 ───────── */
.video-frame {
  border-color: var(--term-line);
  border-radius: var(--r-md);
  background: var(--term-bg);
  box-shadow: var(--term-shadow);
}
.video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--term-bg); }
.video-frame.is-missing { border: 1px dashed var(--fg-3); background: var(--panel); box-shadow: none; }
.video-frame.is-missing video { display: none; }
.video-frame:not(.is-missing) .video-frame__empty { display: none; }
.video-frame__empty { color: var(--fg-2); }

/* ───────── 6장: 추천 표 (.rec) — 행이 차례로 떠오른다 ───────── */
.rec {
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: hidden;
}
.rec__row {
  display: grid;
  grid-template-columns: 1fr 300px 170px 230px 200px;   /* 전체 폭 1648px 기준 */
  align-items: center;
  column-gap: 24px;
  padding: 9px 28px;
  border-top: 1px solid var(--line-0);
  font-size: 31px;
  line-height: 1.3;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(18px);
}
.rec__row:first-child { border-top: 0; }
.rec__row > :first-child { color: var(--fg-0); font-weight: 600; }
.rec__row.is-head {
  padding: 10px 28px;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-2);
  border-bottom: 1px solid var(--line-1);
}
.rec__row.is-head > :first-child { color: var(--fg-2); font-weight: 500; }
.rec__row.is-best { background: var(--accent-wash); border-left: 3px solid var(--accent-fill); padding-left: 25px; }
/* 장면(.scene__objects) 안에서 표는 전체 폭. split 열에 넣지 않는다 */
.scene__objects .rec { width: 100%; max-width: none; }
.rec__row.is-best > :first-child { color: var(--accent); }
.rec__tag {
  justify-self: start;
  padding: 4px 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--fg-2);
  background: var(--bg-0);
}
:is(.slide.is-active, .slide.is-leaving, html.print .slide) .rec:not(.is-pending) .rec__row {
  animation: rise 0.7s var(--ease-out) forwards;
  animation-delay: calc(0.15s + var(--i, 0) * 90ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }
.rec__foot {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1.4;
  color: var(--fg-2);
}

/* ───────── 7장: 회사 (.office) — 사진 슬롯 두 개 + 작은 터미널 ───────── */
.office { display: grid; grid-template-columns: 860px 1fr; column-gap: 96px; align-items: end; min-width: 0; }
.term.is-mini { width: 100%; min-width: 0; overflow: hidden; align-self: end; }
.term.is-mini .term__body { min-height: 0; padding: 22px 28px 0; font-size: 24px; line-height: 1.7; white-space: pre; }
.term.is-mini .term__body.is-more { padding: 0 28px 26px; }
.term.is-mini .term__body .p { color: var(--term-dim); }

/* Mac mini 세 대 (.macs): 위에서 본 모습. 단계 표시용 .macs__go 가 풀리면 터미널 타이핑에 맞춰
   init(약 0.8초) → 1번이 헤드로 켜짐, join(약 2.0초, 3.2초) → 선이 하나씩 이어지고 그 Mac이 켜짐, 마지막에 2–3번 선 */
.macs { position: relative; width: 860px; height: 400px; }
.macs__go { position: absolute; width: 0; height: 0; }
.macs__cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cable { fill: none; stroke: var(--accent-fill); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mac { position: absolute; left: var(--x); top: var(--y); width: 150px; height: 150px; box-sizing: border-box; border: 1px solid var(--line-1); border-radius: 26px; background: linear-gradient(160deg, #ffffff, #ece8df); box-shadow: 0 14px 30px rgba(23, 20, 15, 0.12); }
.mac b { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; font-size: 24px; font-weight: 600; color: var(--fg-0); }
.mac__role { position: absolute; left: 50%; top: calc(100% + 48px); transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 20px; color: var(--accent); opacity: 0; }
.mac:first-of-type .mac__role::after { content: "헤드"; }
.mac:not(:first-of-type) .mac__role::after { content: "멤버"; }
.mac__led { position: absolute; left: 50%; bottom: 14px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--fg-3); }
.mac:first-of-type .mac__role { top: auto; bottom: calc(100% + 10px); }
.macs__go:not(.is-pending) ~ .mac .mac__led { background: var(--accent-fill); box-shadow: 0 0 10px var(--accent-fill); transition: background 0.3s, box-shadow 0.3s; transition-delay: var(--on); }
.macs__go:not(.is-pending) ~ .mac .mac__role { opacity: 1; transition: opacity 0.4s var(--ease-out) var(--on); }
.macs__go:not(.is-pending) ~ .mac { border-color: var(--accent-line); transition: border-color 0.4s var(--on); }
.macs__go:not(.is-pending) ~ .macs__cables .cable { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s var(--ease-out) var(--on); }
.mac[style*="--k:0"] { --on: 0.8s; }
.mac[style*="--k:1"], .cable[style*="--k:1"] { --on: 2.0s; }
.mac[style*="--k:2"], .cable[style*="--k:2"] { --on: 3.2s; }
.cable[style*="--k:3"] { --on: 3.6s; }

/* ───────── 9장: 구조도 위를 도는 요청 점 ───────── */
.diagram .d-trip { fill: var(--accent-fill); stroke: var(--panel-solid); stroke-width: 3; }
/* 구조도 안 사무실 경계 */
.diagram .d-bound { fill: none; stroke: var(--fg-3); stroke-width: 1.5; stroke-dasharray: 8 10; }
.diagram .d-bound-label { fill: var(--fg-2); font-family: var(--font-mono); font-size: 20px; }

/* ───────── 11장: 도구 칩 (.chips) ───────── */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-3); }
.chip {
  padding: 10px 18px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.3;
  color: var(--fg-0);
}

/* ───────── 16장: 비전 — 선순환 고리 (.loop). 엔진 draw 가 선을 그리고, 점 하나가 고리를 돈다 ───────── */
.loop { width: 100%; max-width: none; height: auto; justify-self: stretch; align-self: center; overflow: visible; }
.slide--split .loop { grid-column: 2; grid-row: 1; }
.slide--split .split__text { grid-column: 1; }   /* 글이 고리 열로 넘치지 않게 */
.loop__ring { fill: none; stroke: var(--fg-3); stroke-width: 2.5; stroke-dasharray: 6 10; }
#loop-path { fill: none; stroke: none; }
.loop__node rect { fill: var(--panel); stroke: var(--fg-3); stroke-width: 1.5; }
.loop__node text { font: 500 24px var(--font-mono); fill: var(--fg-0); text-anchor: middle; }
.loop__node .sub { font-size: 19px; fill: var(--fg-2); }
.loop__dot { fill: var(--accent-fill); stroke: var(--panel); stroke-width: 3; }

/* ───────── 10장: 가져다 쓴 것 위에 "보탬" 판이 얹힌다 (.card__add, 엔진 up 으로 등장) ───────── */
.card__add {
  margin-top: var(--s-2);
  padding: 16px 20px;
  background: var(--accent-wash);
  border-top: 2px solid var(--accent-fill);
}
.card__add b {
  font: 500 var(--t-label) / 1 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
.card__add p { margin: 8px 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--fg-0); }

/* ───────── 15장: 활용 카드 명령 흐름 (.card__flow) — 하나씩 켜진다 ───────── */
.card__flow {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font: 500 20px / 1 var(--font-mono);
}
.card__flow span {
  padding: 8px 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--fg-2);
  opacity: 0.4;
}
.card__flow span + span::before { content: "→ "; color: var(--fg-3); }
:is(.slide.is-active, .slide.is-leaving) .card:not(.is-pending) .card__flow span {
  animation: light 0.4s var(--ease-out) forwards;
  animation-delay: calc(var(--j, 0) * 220ms + 0.8s);
}
@keyframes light { to { opacity: 1; color: var(--fg-0); border-color: var(--fg-0); } }

/* ───────── 12장: 카드 아이콘 (.card__icon) — 카드가 나오고 1초쯤 뒤에 움직인다 ───────── */
.card__icon { display: block; width: 120px; height: 72px; overflow: visible; margin-bottom: var(--s-1); }
.card__icon .ink { fill: none; stroke: var(--fg-0); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.card__icon .amber { fill: var(--accent-fill); }
/* 자물쇠: 고리가 위에서 내려와 잠긴다 */
.card__icon .lock-shackle { transform: translateY(-14px); }
/* 방화벽: 들어오던 선이 반으로 줄고 벽이 그려진다 */
.card__icon .fw-in { transform-origin: 6px 36px; }
.card__icon .fw-wall { stroke-dasharray: 48; stroke-dashoffset: 48; }
/* 스위치: 트랙이 amber 에서 회색으로, 손잡이가 왼쪽으로 (꺼짐) */
.card__icon .tog-track { fill: var(--accent-fill); }
.card__icon .tog-knob { transform: translateX(0); }
:is(.slide.is-active, .slide.is-leaving, html.print .slide) .card:not(.is-pending) .lock-shackle {
  animation: lock-down 0.6s var(--ease-out) 1s forwards;
}
:is(.slide.is-active, .slide.is-leaving, html.print .slide) .card:not(.is-pending) .fw-in {
  animation: fw-cut 0.7s var(--ease-inout) 1s forwards;
}
:is(.slide.is-active, .slide.is-leaving, html.print .slide) .card:not(.is-pending) .fw-wall {
  animation: fw-draw 0.6s var(--ease-out) 1.3s forwards;
}
:is(.slide.is-active, .slide.is-leaving, html.print .slide) .card:not(.is-pending) .tog-track {
  animation: tog-track-off 0.5s var(--ease-micro) 1.1s forwards;
}
:is(.slide.is-active, .slide.is-leaving, html.print .slide) .card:not(.is-pending) .tog-knob {
  animation: tog-knob-off 0.5s var(--ease-inout) 1.1s forwards;
}
@keyframes lock-down { to { transform: translateY(0); } }
@keyframes fw-cut { to { transform: scaleX(0.48); } }
@keyframes fw-draw { to { stroke-dashoffset: 0; } }
@keyframes tog-track-off { to { fill: var(--fg-3); } }
@keyframes tog-knob-off { to { transform: translateX(-44px); } }

/* ───────── 13장: 숫자 4개 한 줄 + 점 331개 ───────── */
.stat-row.is-4 { gap: 0; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }  /* 설명 줄 수가 달라도 숫자 높이가 같게 (PR #8) */
.stat-row.is-4 > * { padding: 0 var(--s-4); border-left: 1px solid var(--line-1); min-width: 0; }
.stat-row.is-4 > :first-child { padding-left: 0; border-left: 0; }
.stat-row.is-4 .stat__num { font-size: 170px; white-space: nowrap; }

/* 점: 48열, 14px. extra.js 가 <i style="--i:n"> 을 만든다. 3ms 씩 늦게 찍힌다 */
.dots {
  display: grid;
  grid-template-columns: repeat(48, 14px);
  gap: 12px 18px;
  margin-top: var(--s-4);
}
.dots i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fg-0);
  opacity: 0;
  transform: scale(0.3);
}
:is(.slide.is-active, .slide.is-leaving, html.print .slide) .dots:not(.is-pending) i {
  animation: dot-in 0.4s var(--ease-out) forwards;
  animation-delay: calc(0.2s + var(--i, 0) * 3ms);
}
@keyframes dot-in { to { opacity: 0.75; transform: scale(1); } }
.dots__label {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: var(--track-label);
  color: var(--fg-2);
}

/* ───────── 라이선스 표 (.sbom) — 흰 패널 위 ───────── */
.sbom-wrap {
  padding: 20px 28px 8px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--panel);
}
.slide--split .sbom-wrap { align-self: center; justify-self: end; width: 100%; max-width: 760px; }
.sbom { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 22px; line-height: 1.5; color: var(--fg-1); }
.sbom th { text-align: left; font-weight: 500; color: var(--fg-2); padding: 0 24px 12px 0; border-bottom: 1px solid var(--line-1); }
.sbom td { padding: 12px 24px 12px 0; border-bottom: 1px solid var(--line-0); white-space: nowrap; }
.sbom tr:last-child td { border-bottom: 0; }
.sbom td:first-child { color: var(--fg-0); }
.sbom__foot { margin-top: 18px; font-family: var(--font-mono); font-size: 20px; color: var(--fg-2); }
/* 라이선스 도장: 행 순서(--i)대로 찍힌다 */
.sbom .ok { display: inline-block; width: 22px; margin-right: 8px; color: var(--term-ok); font-weight: 700; opacity: 0; transform: scale(1.8); }
.sbom .ok::before { content: "✓"; }
:is(.slide.is-active, .slide.is-leaving) .sbom-wrap:not(.is-pending) .ok {
  animation: stamp 0.35s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 0.9s);
}
@keyframes stamp { to { opacity: 1; transform: none; } }

/* ───────── 17장: 권고 표 아래 "아직 안 된 것" (.notyet) ───────── */
.notyet {
  max-width: 1100px;
  margin-top: var(--s-4);
  padding: 22px 28px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent-fill);
  background: var(--panel);
}
.notyet b {
  display: block;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
.notyet p { margin: 8px 0 0; font-size: 26px; line-height: 1.5; color: var(--fg-1); }

/* ───────── 마지막 장: 설치 한 줄 아래 실행기, 에이전트 띠 ───────── */
.closing__marquee {
  margin-top: var(--s-4);
  width: 100%;
  font: 500 28px / 1 var(--font-mono);
  color: var(--fg-2);
  --marquee-dur: 36s;
}
.closing__marquee span::after { content: "✦"; margin: 0 0.6em; color: var(--accent-fill); }

/* ───────── 1장: 표지 — 이름과 한 문장을 한 줄에, 화면 가운데 높이 ───────── */
.slide--cover.is-own { justify-content: center; padding-bottom: var(--safe-top); }
.cover__pair { display: flex; align-items: flex-end; gap: var(--s-6); }
.cover__pair .display { line-height: 0.82; }
.cover__pair .cover__tag { padding-bottom: 28px; }

/* ───────── 2장: 발표 순서 (.order) — 장 번호, 이름, 맡은 것 ───────── */
.order { list-style: none; margin: var(--s-5) 0 0; padding: 0; max-width: 1400px; }
.order li { display: grid; grid-template-columns: 200px 280px 1fr; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--line-1); }
.order li:last-child { border-bottom: 1px solid var(--line-1); }
.order__no { font-family: var(--font-mono); font-size: 30px; color: var(--fg-2); }
.order b { font-size: var(--t-h3); font-weight: 600; color: var(--fg-0); letter-spacing: -0.02em; }
.order li > span:last-child { font-size: 30px; color: var(--fg-1); }

/* ───────── 17장: 1차 멘토링 권고 표 (.advice) ───────── */
.advice { margin-top: var(--s-4); width: 100%; max-width: 1648px; border-collapse: collapse; font-size: 26px; line-height: 1.4; background: var(--panel); border: 1px solid var(--line-1); }
.advice td { padding: 13px 28px 13px 24px; border-bottom: 1px solid var(--line-0); color: var(--fg-1); vertical-align: baseline; }
.advice tr:last-child td { border-bottom: 0; }
.advice td:first-child { width: 300px; color: var(--fg-0); font-weight: 600; white-space: nowrap; }
.advice td:last-child { width: 90px; padding-right: 24px; text-align: right; }
.advice code { font-family: var(--font-mono); font-size: 0.9em; color: var(--fg-0); }
.advice__state { font-family: var(--font-mono); font-size: 22px; }
.advice__state.is-done { color: var(--accent); }
.advice__state.is-part { color: var(--fg-1); }
.advice__state.is-todo { color: var(--fg-3); }

/* ───────── 18장: 오늘 본 두 화면 + 설치 한 줄 (.ending) ───────── */
.ending { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: auto; align-items: end; }
.ending figure { margin: 0; }
.ending img { display: block; max-width: 100%; max-height: 500px; width: auto; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line-1); background: var(--panel); }
.ending figcaption { margin-top: 14px; font-size: 24px; color: var(--fg-2); }
.ending figcaption code { font-family: var(--font-mono); color: var(--fg-1); }
.ending__links { display: flex; gap: var(--s-5); align-items: baseline; margin-top: var(--s-4); font-family: var(--font-mono); font-size: 30px; color: var(--fg-0); }
.ending__links span { color: var(--fg-2); }

/* ───────── 부록: 글이 많으니 위에서부터, 입자는 거의 끔 ───────── */
.slide.is-appendix { justify-content: flex-start; }
.appendix { margin-top: var(--s-4); font-size: 26px; line-height: 1.5; color: var(--fg-1); max-width: 1648px; }
.appendix ul { margin: 0; padding-left: 1.1em; }
.appendix li { margin: 8px 0; }
.appendix li::marker { color: var(--fg-3); }
.appendix strong { color: var(--fg-0); font-weight: 600; }
.appendix code { font-family: var(--font-mono); font-size: 0.9em; color: var(--fg-0); }
.appendix table { border-collapse: collapse; width: 100%; font-size: 22px; line-height: 1.45; background: var(--panel); border: 1px solid var(--line-1); }
.appendix th, .appendix td { text-align: left; vertical-align: top; padding: 9px 20px; border-bottom: 1px solid var(--line-0); }
.appendix th { color: var(--fg-2); font-weight: 500; border-bottom-color: var(--line-1); }
.appendix tr:last-child td { border-bottom: 0; }
.appendix td:first-child { color: var(--fg-0); white-space: nowrap; }
.appendix .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
.appendix .mono { font-family: var(--font-mono); }
.appendix .todo { color: var(--accent); }

/* ───────── 3·4장: 앱 세 칸 (.runners) — 두 장에서 같은 자리·같은 모양 (data-keep, 넘겨도 안 움직임) ─────────
   단계 표시용 빈 요소 .runners__go 하나가 상태를 정한다.
   3장 [data-got]: is-pending 이면 칸이 비어 있고, 풀리면 파일이 한 칸씩 들어온다.
   4장 [data-link]: 처음엔 3장 끝과 같은 모양, 풀리면 파일이 허브 링크로 바뀌고 디스크가 5.03 GB로.
   transition 은 "바뀐 뒤" 쪽에만 둬서 장에 들어올 때·뒤로 갈 때는 바로 그 모양이 된다. */
.slide > .runners { position: absolute; left: var(--gutter); top: 640px; width: 1648px; display: grid; grid-template-columns: repeat(3, 400px) 1fr; column-gap: 32px; z-index: 2; }
.runner { box-sizing: border-box; height: 210px; padding: 22px 26px; border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--panel); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 30px rgba(23, 20, 15, 0.06); }
.runners__go { position: absolute; width: 0; height: 0; }
.runner b { font-size: 30px; font-weight: 600; color: var(--fg-0); line-height: 1.2; }
.runner__file { display: grid; gap: 4px; padding: 14px 18px; border: 1px solid var(--accent-line); border-radius: var(--r-sm); background: var(--accent-wash); font-family: var(--font-mono); font-size: 21px; color: var(--fg-0); }
.runner__file small { flex: none; font-size: 20px; color: var(--accent); }
.runner__ln { display: none; font-family: var(--font-mono); font-size: 21px; line-height: 1.4; color: var(--fg-1); padding: 14px 18px; border: 1px dashed var(--fg-3); border-radius: var(--r-sm); }
.runners__disk { align-self: end; padding-left: 32px; display: grid; gap: 6px; white-space: nowrap; }
.runners__cap { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); color: var(--fg-2); }
.runners__before, .runners__after { font-family: var(--font-display); font-size: 84px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.runners__after, .runners__note2 { display: none; }
.runners__note, .runners__note2 { font-size: 22px; color: var(--fg-1); }

/* 3장: 비어 있다가 → 한 칸씩 채워짐 */
.runners__go[data-got].is-pending ~ .runner .runner__file { opacity: 0; transform: translateY(-12px); }
.runners__go[data-got].is-pending ~ .runners__disk { opacity: 0; }
.runners__go[data-got]:not(.is-pending) ~ .runner .runner__file { transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); transition-delay: calc(var(--k) * 0.25s); }
.runners__go[data-got]:not(.is-pending) ~ .runners__disk { transition: opacity 0.5s var(--ease-out) 0.8s; }

/* 4장: 링크로 바뀜 */
.runners__go[data-link]:not(.is-pending) ~ .runner .runner__file { display: none; }
.runners__go[data-link]:not(.is-pending) ~ .runner .runner__ln { display: grid; align-content: center; min-height: 62px; animation: runner-in 0.45s var(--ease-out) both; animation-delay: calc(0.5s + var(--k) * 0.12s); }
.runners__go[data-link]:not(.is-pending) ~ .runners__disk .runners__before { font-size: 34px; color: var(--fg-3); text-decoration: line-through; }
.runners__go[data-link]:not(.is-pending) ~ .runners__disk .runners__after,
.runners__go[data-link]:not(.is-pending) ~ .runners__disk .runners__note2 { display: block; animation: runner-in 0.5s var(--ease-out) 0.7s both; }
.runners__go[data-link]:not(.is-pending) ~ .runners__disk .runners__note { display: none; }
@keyframes runner-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 4장: 허브 한 벌과 세 칸으로 가는 선 */
.slide > .hub { position: absolute; left: calc(var(--gutter) + 452px); top: 440px; width: 360px; box-sizing: border-box; padding: 18px 24px; border: 1px solid var(--accent-fill); border-radius: var(--r-md); background: var(--panel); display: grid; gap: 4px; font-family: var(--font-mono); font-size: 21px; color: var(--fg-0); }
.hub b { font-family: var(--font-sans); font-size: 28px; font-weight: 600; }
.hub small { font-size: 20px; color: var(--accent); }
.slide > .hub__lines { position: absolute; left: var(--gutter); top: 560px; width: 1264px; height: 80px; overflow: visible; }
.hub__lines path { fill: none; stroke: var(--accent-fill); stroke-width: 2; }

/* 칸 아래 한 줄: 3장 "겪는 사람", 4장 "앱 4개 더" */
.slide > .runners__below { position: absolute; left: var(--gutter); top: 886px; margin: 0; }
.more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.more__cap { font-size: 24px; color: var(--fg-1); margin-right: 10px; }
.more__app { padding: 10px 18px; border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--panel); font-size: 22px; font-weight: 500; color: var(--fg-0); }

/* 3장 배경: Hugging Face 실제 파일 목록 (2026-10-28 캡처). 글이 놓이는 왼쪽 위는 종이색으로 덮는다 */
.slide > .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 0; pointer-events: none; }
.shot.is-hf {
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.75) 10%, rgba(0, 0, 0, 0.12) 22%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.35) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.75) 10%, rgba(0, 0, 0, 0.12) 22%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.35) 100%);
}

/* ───────── 장면(scene): 제목은 위, 물체는 아래에서 움직인다 ───────── */
.slide.is-scene { justify-content: flex-start; }
.scene__objects { margin-top: auto; padding-bottom: 20px; }
.slide.is-scene .body { margin-top: 20px; }

/* ───────── reduced motion: 장면은 끝 상태로 바로 ───────── */
@media (prefers-reduced-motion: reduce) {
  .rec__row, .dots i,
  .card__icon .lock-shackle, .card__icon .fw-in, .card__icon .fw-wall, .card__icon .tog-track, .card__icon .tog-knob,
  .spot, .sbom .ok, .card__flow span {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
  }
  .runner__file, .runner__ln, .runners__disk, .runners__disk > * { transition: none !important; }
}

/* ───────── 인쇄(html.print): 장면 애니메이션 대신 끝 상태를 정적으로 지정 (제출 PDF) ───────── */
html.print .rec__row { animation: none; opacity: 1; transform: none; }
html.print .dots i { animation: none; opacity: 0.75; transform: scale(1); }
html.print .card__icon .lock-shackle { animation: none; transform: translateY(0); }
html.print .card__icon .fw-in { animation: none; transform: scaleX(0.48); }
html.print .card__icon .fw-wall { animation: none; stroke-dashoffset: 0; }
html.print .card__icon .tog-track { animation: none; fill: var(--fg-3); }
html.print .card__icon .tog-knob { animation: none; transform: translateX(-44px); }
html.print .spot { animation: none; transform: none; box-shadow: 0 0 0 9999px var(--spot-dim); }
html.print .sbom .ok { animation: none; opacity: 1; transform: none; }
html.print .card__flow span { animation: none; opacity: 1; color: var(--fg-0); border-color: var(--fg-0); }
html.print .marquee__track { animation: none; }
html.print .closing__marquee { display: none; }   /* 인쇄본에서는 흐르는 띠를 뺀다 (잘린 채 찍힘) */

/* 아직 차례가 안 된 단계 요소는 숨긴다 (엔진은 is-pending 표시만 하고 숨기지 않는다 → 클릭 전에 미리 보이던 원인) */
html:not(.print) .slide [data-reveal].is-pending { opacity: 0 !important; }

/* 쪽 번호(01 / 18) 숨김: 화면 HUD와 인쇄본 모두 */
.hud__count,
html.print .slide .print-folio { display: none; }

/* 증거가 주인공인 split (11장, PR #8): 글 칸을 640px로 줄이고 캡처 칸을 넓힌다 */
.slide--split.is-right.is-wide-evidence { grid-template-columns: 1fr 640px; }

/* ───────── 말하는 발표용 보조 화면 (10/28 밤, 팀 요청으로 재설계) ─────────
   화면은 말을 받쳐 주는 핵심어 + 그림. 문장은 발표자 노트(대본)에만.
   글자 하한 60px (16:9 슬라이드의 30pt = 1080px 무대의 60px). '-다'로 끝나는 문구 금지. 부록 없음. */

/* 심사위원 화면에는 엔진 안내 글자(HUD 텍스트, 인쇄 쪽 번호)를 띄우지 않는다 */
.hud__brand span, .hud__section, .hud__count, .hud__hint { display: none; }
.print-folio { display: none !important; }

/* 기본 판: 왼쪽 글, 오른쪽 그림 */
.pane { display: grid; grid-template-columns: 1fr 640px; column-gap: 72px; align-items: center; height: 100%; }
.pane.is-text { grid-template-columns: 1fr; }
.pane.is-wide-art { grid-template-columns: 1fr 820px; }
.pane__text { min-width: 0; }
.pane__art { width: 100%; }
.pane__art svg { width: 100%; height: auto; display: block; overflow: visible; }

.cmd { font-family: var(--font-mono); font-size: 72px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; line-height: 1.1; }
.say { margin: 24px 0 0; font-size: 96px; font-weight: 800; line-height: 1.18; letter-spacing: -0.035em; color: var(--fg-0); word-break: keep-all; }
.cmd + .say { margin-top: 28px; }
.say.is-hero { font-size: 128px; }
.sub { margin: 36px 0 0; font-size: 60px; font-weight: 500; line-height: 1.35; color: var(--fg-1); word-break: keep-all; letter-spacing: -0.02em; }
.sub b { color: var(--fg-0); font-weight: 700; }
.mono { font-family: var(--font-mono); letter-spacing: -0.02em; }

/* 구간 표지: 큰 번호 + 한 줄 */
.part { display: flex; align-items: baseline; gap: 48px; }
.part b { font-family: var(--font-display); font-weight: 800; font-size: 240px; line-height: 0.9; color: var(--accent-fill); }
.part span { font-size: 112px; font-weight: 800; letter-spacing: -0.035em; color: var(--fg-0); line-height: 1.15; }

/* 큰 숫자 하나 */
.num { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: 300px; line-height: 0.85; letter-spacing: -0.03em; color: var(--fg-0); }
.num.is-acc { color: var(--accent-fill); }
.num small { font-size: 120px; font-stretch: 100%; margin-left: 12px; color: var(--fg-1); }
.num + .sub { margin-top: 28px; }
.before-after { display: flex; align-items: baseline; gap: 40px; margin-top: 32px; }
.before-after s { font-family: var(--font-display); font-weight: 700; font-size: 140px; color: var(--fg-3); text-decoration-thickness: 10px; }
.before-after i { font-style: normal; font-size: 100px; color: var(--fg-2); }
.before-after b { font-family: var(--font-display); font-weight: 800; font-size: 200px; line-height: 0.9; color: var(--accent-fill); }

/* 큰 표 (추천 3줄) */
.bigrows { margin-top: 40px; border-top: 3px solid var(--fg-0); }
.bigrows > div { display: grid; grid-template-columns: 1fr 360px; align-items: baseline; padding: 22px 0; border-bottom: 2px solid var(--line-1); font-size: 60px; font-weight: 700; color: var(--fg-0); }
.bigrows > div > :last-child { font-family: var(--font-mono); color: var(--accent); text-align: right; }

/* 한 줄씩 크게 나열 */
.lines { margin-top: 40px; }
.lines > div { display: flex; align-items: baseline; gap: 36px; padding: 18px 0; border-bottom: 2px solid var(--line-1); font-size: 64px; font-weight: 700; color: var(--fg-0); }
.lines > div:first-child { border-top: 2px solid var(--line-1); }
.lines b { color: var(--fg-2); font-weight: 600; min-width: 520px; }
.lines .arrow { color: var(--accent-fill); font-weight: 800; }

/* 세 칸 (역할, 링크 순서, 현황) */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.trio > div { padding: 40px 36px; background: var(--panel); border: 2px solid var(--line-1); border-radius: 6px; text-align: center; }
.trio > div.is-acc { border-color: var(--accent-fill); background: var(--accent-wash); }
.trio svg { width: 200px; height: 200px; display: block; margin: 0 auto 16px; overflow: visible; }
.trio b { display: block; font-size: 72px; font-weight: 800; color: var(--fg-0); letter-spacing: -0.03em; }
.trio span { display: block; margin-top: 12px; font-size: 60px; color: var(--fg-1); }

/* 실제 화면 캡처 */
.shotbox { margin: 0; }
.shotbox img { display: block; width: 100%; border-radius: 10px; border: 2px solid var(--line-1); box-shadow: 0 30px 80px rgba(0,0,0,.18); }

/* 실제 출력 한 줄 */
.out { margin-top: 44px; padding: 34px 40px; border-radius: 10px; background: #17140f; font-family: var(--font-mono); font-size: 60px; line-height: 1.3; color: #f4efe6; }
.out b { color: #5bd98a; font-weight: 700; }

/* 표지·마무리 */
.cover__tag.is-talk { font-size: 72px; line-height: 1.25; }
.closing-cmd { margin-top: 56px; font-family: var(--font-mono); font-size: 60px; color: var(--fg-0); }
.closing-cmd + .closing-cmd { margin-top: 16px; color: var(--fg-1); }

/* 영상 자리 안내도 크게 */
.video-frame__empty { font-size: 60px !important; line-height: 1.4; }
.video-frame__empty .accent { font-size: 60px; }

/* 그림 공통 선 */
.ill .ln { fill: none; stroke: var(--fg-0); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ill .ln2 { fill: none; stroke: var(--fg-2); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ill .bx { fill: var(--panel); stroke: var(--fg-0); stroke-width: 6; stroke-linejoin: round; }
.ill .soft { fill: var(--line-1); }
.ill .acc { fill: var(--accent-fill); }
.ill .accl { fill: none; stroke: var(--accent-fill); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.ill .wash { fill: var(--accent-wash); stroke: var(--accent-fill); stroke-width: 6; }
.ill .dash { fill: none; stroke: var(--accent-fill); stroke-width: 7; stroke-dasharray: 18 14; animation: ill-run 1.2s linear infinite; }
.ill .ink { fill: var(--fg-0); }
.ill .bg { fill: var(--bg-1, #ebe5d8); }
@keyframes ill-run { to { stroke-dashoffset: -32; } }
.ill .pulse { animation: ill-pulse 1.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ill-pulse { 50% { transform: scale(1.12); } }

/* 16장 15 GB → 5 GB 한 줄 유지 */
.before-after { white-space: nowrap; }
.before-after s { font-size: 110px; }
.before-after b { font-size: 160px; }

/* ───────── 기능 장: 명령어가 크게 떴다가 좌측 상단으로, 이어서 동작 방식 ─────────
   한 번 누르면(step 1) .stepmark 의 is-pending 이 풀리고, :has() 로 명령어·한 줄이 제자리로 간다.
   인쇄(?print)에서는 is-pending 이 없으므로 처음부터 최종 배치. */
.stepmark { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero-cmd, .hero-tag { position: absolute; z-index: 3; white-space: nowrap; transform-origin: 0 0;
  transition: left 1s var(--ease-out), top 1s var(--ease-out), transform 1s var(--ease-out); }
.hero-cmd { left: var(--gutter); top: var(--safe-top); font: 700 64px var(--font-mono); letter-spacing: -0.02em; color: var(--accent); }
.hero-tag { left: var(--gutter); top: calc(var(--safe-top) + 92px); font-size: 80px; font-weight: 800; letter-spacing: -0.035em; color: var(--fg-0); }
.slide:has(.stepmark.is-pending) .hero-cmd { left: 50%; top: 36%; transform: translate(-125%, -125%) scale(2.5); }
.slide:has(.stepmark.is-pending) .hero-tag { left: 50%; top: 60%; transform: translate(-50%, -50%); }

/* 동작 방식: 세 단계 */
.how { margin-top: 250px; }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; align-items: start; }
.flow > div { position: relative; text-align: center; }
.flow > div + div::before { content: ""; position: absolute; left: -52px; top: 110px; width: 40px; height: 6px; background: var(--accent-fill); border-radius: 3px; }
.flow > div + div::after { content: ""; position: absolute; left: -24px; top: 101px; border: 12px solid transparent; border-left: 16px solid var(--accent-fill); }
.flow svg { width: 240px; height: 220px; display: block; margin: 0 auto 18px; overflow: visible; }
.flow b { display: block; font-size: 64px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--fg-0); }
.flow span { display: block; margin-top: 8px; font-size: 60px; line-height: 1.25; color: var(--fg-1); letter-spacing: -0.02em; }
.flow .is-acc b { color: var(--accent); }

/* ───────── 문제 상황 애니메이션 (사람 등장) ─────────
   장에 들어올 때마다 다시 재생된다(꺼진 장은 display:none 이라 애니메이션이 처음부터 시작).
   애니메이션이 없을 때(인쇄)의 모습 = 마지막 장면. */
.anim .a-fill   { transform-box: fill-box; transform-origin: left center; animation: a-fill var(--t, 2.2s) var(--d, .4s) cubic-bezier(.65,0,.35,1) both; }
.anim .a-fillY  { transform-box: fill-box; transform-origin: center bottom; animation: a-fillY var(--t, .5s) var(--d, 0s) var(--ease-out) both; }
.anim .a-pop    { transform-box: fill-box; transform-origin: center; animation: a-pop .55s var(--d, 0s) cubic-bezier(.34,1.56,.64,1) both; }
.anim .a-in     { animation: a-in .5s var(--d, 0s) var(--ease-out) both; }
.anim .a-out    { animation: a-out .3s var(--d, 0s) both; }
.anim .a-dropin { animation: a-dropin .7s var(--d, 0s) cubic-bezier(.34,1.56,.64,1) both; }
.anim .a-sweat  { animation: a-sweat 1.4s var(--d, 0s) ease-in infinite both; }
.anim .a-float  { animation: a-float 3s var(--d, 0s) ease-in-out infinite; }
.anim .a-bob    { animation: a-bob 1s var(--d, 0s) ease-in-out infinite; }
.anim .a-shake  { transform-box: fill-box; transform-origin: center bottom; animation: a-shake .5s var(--d, 0s) ease-in-out 4; }
.anim .a-blink  { animation: a-blink 1s var(--d, 0s) steps(1) infinite; }
.anim .a-scratch{ transform-box: fill-box; transform-origin: 10% 100%; animation: a-scratch .35s var(--d, 0s) ease-in-out infinite alternate; }
.anim .a-bounce { animation: a-bounce 2.4s var(--d, .3s) cubic-bezier(.5,0,.5,1) both; }
.anim .a-zz     { animation: a-zz 2.4s var(--d, 0s) ease-out infinite; }
.anim .a-speed  { animation: a-speed .6s var(--d, 0s) linear infinite; }
@keyframes a-fill   { from { transform: scaleX(0); } }
@keyframes a-fillY  { from { transform: scaleY(0); } }
@keyframes a-pop    { from { transform: scale(0); opacity: 0; } }
@keyframes a-in     { from { opacity: 0; transform: translateY(16px); } }
@keyframes a-out    { to { opacity: 0; } }
@keyframes a-dropin { from { opacity: 0; transform: translateY(-140px); } }
@keyframes a-sweat  { 0% { opacity: 0; transform: translateY(-6px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }
@keyframes a-float  { 50% { transform: translateY(-18px); } }
@keyframes a-bob    { 50% { transform: translateY(-10px); } }
@keyframes a-shake  { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes a-blink  { 50% { opacity: .25; } }
@keyframes a-scratch{ to { transform: rotate(-14deg); } }
@keyframes a-bounce { 0% { transform: translateX(0); } 45% { transform: translateX(250px); } 55% { transform: translateX(215px); } 100% { transform: translateX(0); } }
@keyframes a-zz     { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(30px, -90px); } }
@keyframes a-speed  { from { transform: translateX(30px); opacity: 1; } to { transform: translateX(-60px); opacity: 0; } }
html.print .anim * { animation: none !important; }
html.print .anim .a-out { opacity: 0; }
html.print .anim .a-sweat, html.print .anim .a-zz { opacity: 1; }

/* ───────── 기능 장: 원래는 → omm으로 (전후 비교) ─────────
   한 번 누르면 명령어가 좌측 상단으로 + '원래는' 줄, 한 번 더 누르면 'omm으로' 줄. */
.ba { margin-top: 260px; display: grid; gap: 44px; }
.ba__row { display: grid; grid-template-columns: 250px 1fr; align-items: center; }
.ba__lab { font-size: 60px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg-2); }
.ba__row.is-after .ba__lab { color: var(--accent); }
.ba__flow { display: flex; align-items: stretch; gap: 0; }
.ba__box { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 16px 22px; box-sizing: border-box;
  background: var(--panel); border: 3px solid var(--line-1); border-radius: 14px;
  font-size: 60px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; text-align: center; color: var(--fg-0); word-break: keep-all; }
.ba__box.is-bad { background: transparent; border: 3px dashed var(--fg-3); color: var(--fg-1); }
.ba__box.is-bad::before { content: "✕"; margin-right: 18px; color: var(--fg-2); }
.ba__box.is-good { background: var(--accent-wash); border-color: var(--accent-fill); color: var(--fg-0); }
.ba__box.is-good::before { content: "✓"; margin-right: 18px; color: var(--accent); font-weight: 800; }
.ba__arrow { flex: none; width: 64px; position: relative; align-self: center; height: 6px; margin: 0 6px; background: var(--fg-3); border-radius: 3px; }
.ba__arrow::after { content: ""; position: absolute; right: -6px; top: -11px; border: 14px solid transparent; border-left: 18px solid var(--fg-3); }
.ba__row.is-after .ba__arrow { background: var(--accent-fill); }
.ba__row.is-after .ba__arrow::after { border-left-color: var(--accent-fill); }
.ba__foot { margin: 0 0 0 250px; font-size: 60px; color: var(--fg-1); }

/* 결과 칸은 ✕·✓ 표시가 있어 조금 넓게 */
.ba__box.is-bad, .ba__box.is-good { flex-grow: 1.4; }

/* ───────── 디자인 2차 (10/29, 평가 3건 반영) ─────────
   그림은 한 가지 선(6)·한 사람·한 물건 모양. 배경 입자는 끔. 기능 장은 칸 글자를 한 줄로. */

/* 프로젝터에서 틀이 사라지지 않게 */
:root { --line-1: #c4baa7; }

/* 그림 공통 추가 */
.ill .lnw { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.ill .bg { fill: var(--line-1); }
.ill .lens { fill: rgba(255, 255, 255, .55); stroke: var(--fg-0); stroke-width: 6; }
.ill .t, .ill .tm, .ill .tw { font-size: 60px; font-weight: 700; letter-spacing: -0.02em; fill: var(--fg-0); font-family: var(--font-sans); }
.ill .tm { font-family: var(--font-mono); letter-spacing: -0.03em; }
.ill .tw { fill: #fff; }
.ill .acc-t { fill: var(--accent-fill); }

/* 그림 칸은 모두 820px 폭 (viewBox 800 → 글자 60이 실제 61px) */
.pane { grid-template-columns: 1fr 820px; }
.pane__art svg { max-height: 640px; }

/* 움직임 추가: 표정 바꾸기, 부딪혀 튕기기, 한 바퀴, 옮겨 가기. 끝나면 멈춘다 */
.anim .a-show { animation: a-show .3s var(--d, 0s) both; }
.anim .a-hit { animation: a-hit 1.6s var(--d, 0s) cubic-bezier(.5, 0, .5, 1) both; }
.anim .a-spin { transform-box: view-box; animation: a-spin var(--t, 1.6s) var(--d, 0s) ease-in-out var(--n, 1) both; }
.anim .a-from { animation: a-from var(--t, 1.2s) var(--d, 0s) cubic-bezier(.65, 0, .35, 1) both; }
.anim .a-scratch { animation-iteration-count: 6; }
.anim .a-bob { animation-iteration-count: 3; }
@keyframes a-show { from { opacity: 0; } }
@keyframes a-hit { 0% { transform: translateX(0); } 42% { transform: translateX(var(--hx, 100px)); } 56% { transform: translateX(calc(var(--hx, 100px) * .82)); } 100% { transform: translateX(0); } }
@keyframes a-spin { from { transform: rotate(var(--from, -360deg)); } }
@keyframes a-from { from { transform: translate(var(--fx, 0), var(--fy, 0)); } }
html.print .anim .a-show { opacity: 1; }

/* 표지 */
.cover2 { display: flex; align-items: center; gap: 88px; height: 100%; }
.cover2__mark .hippo { width: 360px; height: 360px; display: block; }
.cover2 .display { font-size: 280px; line-height: .8; }
.cover2__tag { margin: 48px 0 0; font-size: 80px; font-weight: 800; letter-spacing: -0.035em; color: var(--fg-0); }
.cover2__team { margin: 20px 0 0; font-size: 60px; font-weight: 600; color: var(--fg-2); }

/* 걸림돌·역할·신뢰 세 칸: 아이콘 크게, 강조 칸 없음 */
.trio.is-ico > div, .chain.is-ico > div { padding: 32px 28px 40px; }
.trio.is-ico svg, .chain svg { width: 200px; height: 200px; display: block; margin: 0 auto 20px; overflow: visible; }
.trio > div, .chain > div { border-width: 3px; border-radius: 14px; }

/* 4장 전체 폭 그림 */
.wide-art { margin-top: 56px; }
.wide-art svg { width: 100%; height: auto; display: block; overflow: visible; }

/* 구간 표지: 큰 번호 + 제목 + 그림, 아래 진행 표시 */
.part2 { display: grid; grid-template-columns: 1fr 640px; column-gap: 72px; align-items: center; height: 100%; }
.part2__text { display: flex; align-items: center; gap: 56px; }
.part2__text b { font-family: var(--font-display); font-weight: 800; font-size: 300px; line-height: .8; color: var(--accent-fill); }
.part2__text span { font-size: 112px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; color: var(--fg-0); }
.part2__art svg { width: 100%; height: auto; display: block; overflow: visible; }
.roadmap { position: absolute; left: var(--gutter); bottom: 80px; display: flex; gap: 56px; font-size: 60px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg-3); }
.roadmap .is-on { color: var(--fg-0); }
.roadmap span + span::before { content: "·"; margin-right: 56px; color: var(--fg-3); }

/* 기능 장: 명령어·한 줄 제목 + 오른쪽 위 그림 */
.hero-tag { font-size: 88px; top: calc(var(--safe-top) + 96px); }
.feat-ico { position: absolute; right: var(--gutter); top: calc(var(--safe-top) - 10px); width: 320px; height: 220px; }
.feat-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* 원래는 / omm으로: 꼬리표는 줄 위, 칸은 한 줄, 두 줄의 칸이 같은 격자에 */
.ba { margin-top: 290px; display: grid; gap: 40px; }
.ba__row { display: grid; grid-template-columns: 1fr; row-gap: 14px; }
.ba__lab { line-height: 1.1; }
.ba__flow { display: grid; grid-template-columns: 1fr 88px 1fr 88px 1.3fr; align-items: stretch; }
.ba__box { position: relative; min-height: 156px; padding: 16px 24px; white-space: nowrap; border-width: 3px; border-color: var(--line-1); }
.ba__box.is-bad { border: 4px dashed var(--fg-2); }
.ba__box.is-bad::before, .ba__box.is-good::before { position: absolute; left: -26px; top: -26px; width: 64px; height: 64px; margin: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 40px; font-weight: 800; line-height: 1; color: #fff; }
.ba__box.is-bad::before { background: var(--fg-2); }
.ba__box.is-good::before { background: var(--accent-fill); color: #fff; }
.ba__arrow { width: 52px; height: 10px; margin: 0; justify-self: center; border-radius: 5px; background: var(--fg-2); }
.ba__arrow::after { right: -14px; top: -13px; border: 18px solid transparent; border-left: 22px solid var(--fg-2); border-right: 0; }
.ba__box .mono { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.03em; }
.ba__foot { margin: 0; font-size: 60px; font-weight: 700; color: var(--fg-1); }

/* 차례가 있는 세 칸 (링크 순서, 입구) */
.chain { display: grid; grid-template-columns: 1fr 120px 1fr 120px 1fr; align-items: center; margin-top: 64px; }
.chain > div { padding: 40px 28px; background: var(--panel); border: 3px solid var(--line-1); text-align: center; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.chain > div.is-acc { border-color: var(--accent-fill); background: var(--accent-wash); }
.chain b { display: block; font-size: 72px; font-weight: 800; color: var(--fg-0); letter-spacing: -0.03em; }
.chain span { display: block; margin-top: 12px; font-size: 60px; color: var(--fg-1); }
.chain > .ba__arrow { justify-self: center; align-self: center; }

/* 11장 속도 막대 */
.bars { margin-top: 56px; display: grid; gap: 30px; }
.bars > div { display: grid; grid-template-columns: 600px 1fr 200px; align-items: center; column-gap: 40px; font-size: 60px; font-weight: 700; color: var(--fg-0); }
.bars i { display: block; height: 72px; width: var(--w); border-radius: 10px; background: var(--accent-fill); transform-origin: left center; animation: a-fill 1.2s .4s cubic-bezier(.65, 0, .35, 1) both; }
.bars b { font-family: var(--font-mono); color: var(--accent); text-align: right; }
.bars .bars__head { font-size: 60px; font-weight: 600; color: var(--fg-2); }
.bars .bars__head span:last-child { text-align: right; }
html.print .bars i { animation: none; }

/* 26장 실제 화면: 글 왼쪽, 확대한 캡처 오른쪽 */
.shot2 { display: grid; grid-template-columns: 1fr 1020px; column-gap: 64px; align-items: center; height: 100%; }
.shot2__img { margin: 0; }
.shot2__img img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .22); }

/* 34장 */
.sub.is-strong { font-size: 88px; font-weight: 800; color: var(--fg-0); margin-top: 20px; }

/* 41장 머리말 */
.lines .lines__head { border-top: 0 !important; font-size: 60px; font-weight: 600; color: var(--fg-2); padding-bottom: 8px; }
.lines .lines__head b, .lines .lines__head span { color: var(--fg-2); font-weight: 600; }

/* 43장 진행 단계 */
.stepper { margin-top: 96px; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; text-align: center; }
.stepper::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 44px; height: 10px; border-radius: 5px;
  background: linear-gradient(to right, var(--accent-fill) 50%, var(--line-1) 50%); }
.stepper > div { position: relative; }
.stepper i { position: relative; display: block; width: 98px; height: 98px; margin: 0 auto 32px; box-sizing: border-box; border-radius: 50%; background: var(--bg-0); border: 10px solid var(--line-1); }
.stepper .is-done i { background: var(--accent-fill); border-color: var(--accent-fill); }
.stepper .is-done i::after { content: ""; position: absolute; left: 22px; top: 16px; width: 22px; height: 38px; border: solid #fff; border-width: 0 10px 10px 0; transform: rotate(45deg); }
.stepper .is-now i { border-color: var(--accent-fill); }
.stepper b { display: block; font-size: 80px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg-0); }
.stepper span { display: block; margin-top: 12px; font-size: 60px; color: var(--fg-1); }
.stepper > div:last-child b, .stepper > div:last-child span { color: var(--fg-2); }

/* 시연 자리: 영상이 없을 때도 흰 상자 대신 어두운 화면 + 재생 표시 */
.video-frame.is-missing { border: 0; background: var(--term-bg); }
.video-frame.is-missing .video-frame__empty { display: grid; place-items: center; align-content: center; gap: 36px; color: #f4efe6; font-family: var(--font-sans); font-weight: 700; }
.video-frame__empty .play { display: block; width: 0; height: 0; border-top: 70px solid transparent; border-bottom: 70px solid transparent; border-left: 120px solid var(--accent-fill); margin-left: 30px; }

/* 마무리: 표지와 같은 로고, 주소가 주인공, QR */
/* 59장 마무리: 로고가 허브. 상자 없이 글자와 가는 선만 */
.end3 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; }
.end3__art svg { width: 1500px; height: auto; display: block; overflow: visible; }
.end3 .ill .thin { fill: none; stroke: var(--accent-fill); stroke-width: 4; stroke-linecap: round; }
.end3 .ill .brand { font-weight: 800; letter-spacing: -0.04em; }
.end3 .sub { margin: 0; text-align: center; }
.end3__links { font-family: var(--font-mono); font-size: 40px; color: var(--fg-2); }
.anim .a-dim { animation: a-dim .6s var(--d, 0s) both; }
@keyframes a-dim { to { opacity: .4; } }
html.print .anim .a-dim { opacity: .4; }

/* ───────── 디자인 2차 · 둘째 손질 (2차 평가 반영) ───────── */
/* 제목 높이 고정: 글만 있는 장도 기능 장과 같은 자리(무대 위에서 216px)에서 시작, 크기 88 */
.pane.is-text { align-items: start; }
.pane.is-text .pane__text { padding-top: 96px; }
.pane.is-text .pane__text > .say:first-child { margin-top: 0; }
.pane.is-text .pane__text:has(> .cmd) { padding-top: 0; }
.pane.is-text .say, .shot2 .say { font-size: 88px; }
.cmd { font-size: 64px; line-height: 1.2; }
.pane__text > .cmd:first-child { margin-top: 0; }
.cmd + .say { margin-top: 19px; }
.pane.is-text .trio, .pane.is-text .chain { margin-top: 96px; }
.pane.is-text .stepper { margin-top: 140px; }
.eyebrow { font-size: 60px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg-2); margin-bottom: 8px; }

/* 기능 장 칸: 긴 글자가 열 폭을 밀지 않게 */
.ba__flow { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr) 88px minmax(0, 1.3fr); }
.ba__box { padding: 16px 12px; }
.ba__foot { position: absolute; left: var(--gutter); bottom: 64px; }
.feat-ico { top: calc(var(--safe-top) + 4px); height: 220px; }

/* 시연 화면: 16:9 가운데 */
.slide--video { justify-content: center; align-items: center; }
.slide--video .video-frame { flex: none; width: min(100%, 1520px); height: auto; aspect-ratio: 16 / 9; border-radius: 14px; }

/* 표지 가운데 */
.cover2 { justify-content: center; }

/* 11장: 크기 열 */
.bars > div { grid-template-columns: 520px 220px 1fr 250px; }
.bars small { font-size: 60px; font-style: normal; font-family: var(--font-mono); color: var(--fg-1); font-weight: 600; }
.bars .bars__head small { font-family: var(--font-sans); color: var(--fg-2); }

/* 26장: 캡처 크게 */
.shot2 { grid-template-columns: 1fr 1100px; }

/* 34장 숫자 위아래 간격 같게 */
.pane__text .num { margin-top: 32px; }
.pane__text .num + .sub.is-strong { margin-top: 32px; }

/* 돋보기 렌즈는 비우고 아래 카드를 강조 */
.ill .lens { fill: none; }

/* 표정은 한 번에 바뀐다 (반쯤 겹친 입이 보이지 않게) */
.anim .a-out, .anim .a-show { animation-timing-function: steps(1, end); }
/* 그림 칸이 떠오른 뒤에 장면이 시작된다 */
.pane__art .anim [class*="a-"], .wide-art .anim [class*="a-"] { animation-delay: calc(var(--d, 0s) + .8s); }
/* 스톱워치 칠하기: 바늘과 같은 시간 */
.anim .a-sweep { animation: a-sweep 1.6s var(--d, 0s) ease-in-out both; }
@keyframes a-sweep { from { stroke-dashoffset: 264; } }
.ba__note { font-weight: 600; color: var(--fg-1); }
.slide--video .video-frame { margin: 0 auto; align-self: center; }

/* 25장처럼 한 칸에 꼭 넣어야 하는 조금 긴 문구: 안쪽 여백과 자간만 줄인다 (글자 크기는 그대로 60) */
.ba__box.is-tight { padding-left: 4px; padding-right: 4px; letter-spacing: -0.05em; }

/* 앞 발표 14장 (omm 2차 평가 발표.html 1~14장): 원본 1920x1080 판을 그대로 무대에 올린다. 글꼴은 Google Fonts(Noto Sans KR, JetBrains Mono) */
.slide.is-ext { padding: 0; }
.slide.is-ext .ext { position: absolute; inset: 0; }
.slide.is-ext .ext > div { word-break: keep-all; }

/* 명령 두 개를 한 장에: 첫 화면 확대를 줄여 한 줄에 맞춤 */
.slide:has(.stepmark.is-pending) .hero-cmd.is-pair { transform: translate(-80%, -80%) scale(1.6); }

/* 웹 화면 모음: 실제 캡처 여러 장을 비스듬히 흩어 놓고 천천히 떠 있게 */
.wall { position: absolute; inset: 0; pointer-events: none; }
.wall__card { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; }
.wall__tilt { transform: rotate(var(--r)); }
.wall__card img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 28px 70px rgba(0, 0, 0, .28); animation: wall-float var(--f) ease-in-out infinite alternate; }
@keyframes wall-float { from { transform: translateY(0); } to { transform: translateY(-14px); } }
html.print .wall__card img { animation: none; }
.roadmap { gap: 40px; }
.roadmap span + span::before { margin-right: 40px; }

/* 장면 그림을 카드 셋에 나눠 담기 */
.trio.is-scene > div { padding: 24px 24px 40px; }
.trio.is-scene svg { width: 100%; height: 280px; margin: 0 auto 16px; }
.trio.is-scene span { color: var(--accent); font-weight: 800; }

/* 앞 발표 장의 바탕색을 무대 밖까지 (extra.js 가 색을 넣는다). 장이 바뀔 때 색이 부드럽게 넘어간다 */
.ext-fill { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: background-color .35s ease, opacity .35s ease; }
html.has-ext-fill .ext-fill { opacity: 1; }
html.has-ext-fill .guides,
html.has-ext-fill .vignette { display: none; }
html.print .ext-fill { display: none; }
/* 어두운 판 위에서는 HUD(로고, 쪽수, 모서리)를 밝은 잉크로 */
html.ext-dark .hud { --fg-0: #f4f1ea; --fg-1: #c9c3b6; --fg-2: #a39b8d; --fg-3: #6b6459; }

/* 부록 명령어 전체 목록: 명령(고정폭) | 기능 */
.cmdlist { margin-top: 36px; border-top: 3px solid var(--fg-0); }
.cmdlist > div { display: grid; grid-template-columns: 760px 1fr; align-items: baseline; column-gap: 40px; padding: 12px 0; border-bottom: 2px solid var(--line-1); font-size: 60px; line-height: 1.2; }
.cmdlist code { font-family: var(--font-mono); font-weight: 600; color: var(--accent); letter-spacing: -0.04em; }
.cmdlist span { font-weight: 700; color: var(--fg-0); letter-spacing: -0.02em; }

/* 부록 명령어 상세: 문서형 표 (참고 자료라 본문 60px 규칙 예외) */
.docpage { position: absolute; inset: 0; padding: 72px 96px 64px; display: flex; flex-direction: column; gap: 28px; }
.docpage__head { display: flex; align-items: baseline; gap: 32px; border-bottom: 4px solid var(--fg-0); padding-bottom: 18px; }
.docpage__head span { font-family: var(--font-mono); font-size: 26px; color: var(--accent); letter-spacing: 0.02em; }
.docpage__head b { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg-0); }
.doctable > div { display: grid; grid-template-columns: 500px 1fr 330px; column-gap: 32px; align-items: baseline; padding: 15px 0; border-bottom: 2px solid var(--line-1); font-size: 29px; line-height: 1.4; color: var(--fg-0); }
.doctable code { font-family: var(--font-mono); font-weight: 600; font-size: 27px; color: var(--accent); letter-spacing: -0.03em; word-break: break-all; }
.doctable span { word-break: keep-all; }
.doctable small { font-family: var(--font-mono); font-size: 24px; color: var(--fg-2); word-break: break-word; }
.doctable > .is-head { padding: 8px 0; border-bottom: 2px solid var(--fg-2); }
.doctable > .is-head > * { font-family: var(--font-sans); font-size: 24px; font-weight: 600; color: var(--fg-2); }

/* 19장: 예측 옆 실측 열 (값은 발표 전 omm benchmark 로 채움) */
.bars.has-measured > div { grid-template-columns: 440px 250px 1fr 180px 180px; }
.bars.has-measured .meas { color: var(--fg-2); }