/* Lilo Studio · 자율 콘텐츠 스튜디오 소개 홈페이지
   vanilla 의 종이 · 먹 · 주홍을 이어받아 「상영관」을 「제어실」로 넓혔다.
   스튜디오 탤리 색은 점 · 선 · 스테이지 안에서만 쓴다(본문 글자색으로 쓰지 않는다).
   폰트: Paperlogy(한글 제목) · Big Shoulders Display(라틴 제목) · SUIT(본문) · JetBrains Mono(수치·로그) */

:root {
  --paper: #eee8dc;
  --paper-2: #e4dccb;
  --paper-3: #d6ccb7;
  --ink: #0d0c0b;
  --ink-2: #161513;
  --ink-3: #201e1b;
  --ink-4: #2b2824;
  --signal: #ff4d1a;
  --signal-ink: #1a0600;
  --signal-paper: #a8320c; /* 종이 위 작은 주홍 글자 — 대비 AA(5.5:1) */
  --on-paper-mute: #645c51;
  --on-ink-mute: #a39b8f;
  --rule-paper: rgba(13, 12, 11, 0.14);
  --rule-ink: rgba(238, 232, 220, 0.13);

  /* 스튜디오 탤리 */
  --c-chat: #ff4d1a;
  --c-drama: #ffb01f;
  --c-toon: #33d69f;
  --c-novel: #5fb0ff;
  --c-cf: #ff3d7f;
  --c-game: #c6f432;
  --c-ondo: #ff002e; /* ondo 브랜드 레드 — 글자 배경으로 쓸 땐 --ondo-deep(AA) */
  --ondo-deep: #d40027;

  --f-kr: "Paperlogy", "SUIT Variable", system-ui, sans-serif;
  --f-lat: "Big Shoulders Display", "Paperlogy", Impact, sans-serif;
  --f-body: "SUIT Variable", "SUIT", -apple-system, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(20px, 4.2vw, 72px);
  --max: 1600px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --snap: cubic-bezier(0.7, 0, 0.2, 1);
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
.nb { white-space: nowrap; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--signal); color: var(--signal-ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: #4a453f var(--ink); }

/* 필름 입자 — 고정 가상요소 하나에만 */
body::after {
  content: "";
  position: fixed; inset: -50%;
  z-index: 90; pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--signal); color: var(--signal-ink); padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.signal { color: var(--signal); }
.mono-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-mute); }

[data-theme="paper"] { background: var(--paper); color: var(--ink); }
[data-theme="paper"] .mono-k { color: var(--on-paper-mute); }
[data-theme="paper"] .eyebrow { color: var(--signal-paper); }

/* ───────── 버튼 ───────── */
.btn {
  --h: 54px;
  display: inline-flex; align-items: center; gap: 10px;
  height: var(--h); padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-body); font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 180ms var(--ease), background-color 180ms, color 180ms, border-color 180ms;
}
.btn:active { transform: scale(0.97); }
.btn--sm { --h: 40px; padding: 0 18px; font-size: 14px; }
.btn--signal { background: var(--signal); color: var(--signal-ink); }
.btn--signal:hover { background: #ff6a3d; }
.btn--line { border-color: rgba(238, 232, 220, 0.4); background: transparent; }
.btn--line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ───────── 내비 ───────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--pad);
  color: var(--paper);
  transition: color 240ms, transform 360ms var(--ease);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule-ink);
  opacity: 0; transition: opacity 240ms, background-color 240ms;
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-paper { color: var(--ink); }
.nav.is-paper::before { background: color-mix(in srgb, var(--paper) 84%, transparent); border-color: var(--rule-paper); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand-logo { display: block; height: 34px; width: auto; }
.brand-dot { fill: var(--signal); }
.nav-links { display: flex; gap: 26px; }
.nav-links a { text-decoration: none; font-size: 15px; font-weight: 600; opacity: 0.7; transition: opacity 150ms; position: relative; }
.nav-links a:hover, .nav-links a[aria-current="true"] { opacity: 1; }
.nav-links a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--signal); border-radius: 2px; }

/* ───────── 공통 머리 ───────── */
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); margin-bottom: 18px; }
.h2 { font-family: var(--f-kr); font-weight: 800; font-size: clamp(38px, 5.6vw, 84px); line-height: 1.08; letter-spacing: -0.035em; }
.section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; max-width: var(--max); margin: 0 auto 64px; }
.section-lede { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.75; color: var(--on-ink-mute); max-width: 620px; }
[data-theme="paper"] .section-lede { color: var(--on-paper-mute); }
.section-lede b { color: currentColor; font-weight: 700; }
[data-theme="paper"] .section-lede b { color: var(--ink); }

/* 스크롤 구동 올라오기(JS 가 .in 을 단다) */
.js [data-rise] { opacity: 0; transform: translateY(0.5em); transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
.js [data-rise].in { opacity: 1; transform: none; }

/* ═════════ 히어로 ═════════ */
.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(28px, 5vh, 64px)) var(--pad) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: 1fr auto;
  gap: 40px clamp(32px, 4vw, 72px);
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
}
.hero-copy { align-self: center; position: relative; z-index: 2; container-type: inline-size; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-mute); margin-bottom: 26px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(255, 77, 26, 0.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 26, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(255, 77, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 26, 0); } }
/* 가장 긴 줄 「기다리는 건 사람.」(6.44em)이 칸 안에 한 줄로 — 동사가 바뀌어도 두 줄이 그대로 */
.hero-title { font-family: var(--f-kr); font-weight: 800; font-size: min(clamp(46px, 6.4vw, 108px), 15.2cqi); line-height: 1.04; letter-spacing: -0.045em; }
.ht-line { display: block; white-space: nowrap; }
.verb { position: relative; display: inline-block; color: var(--vc, var(--signal)); min-width: 2.05em; transition: color 160ms; }
.verb-word { position: relative; }
.verb-word::after { content: ""; position: absolute; left: 0; right: 0.04em; bottom: 0.04em; height: 0.08em; background: currentColor; transform-origin: left; animation: verbbar var(--vd, 1290ms) linear both; }
.verb-word.out::after { animation: none; transform: scaleX(1); }
@keyframes verbbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.verb-word { display: inline-block; }
.verb-word.out { animation: vout 140ms var(--snap) forwards; }
.verb-word.in { animation: vin 260ms var(--ease) both; }
@keyframes vout { to { transform: translateY(-55%) skewX(-8deg); opacity: 0; filter: blur(4px); } }
@keyframes vin { from { transform: translateY(55%) skewX(8deg); opacity: 0; filter: blur(4px); } }
.hero-lede { margin-top: 28px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.75; color: var(--on-ink-mute); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-formats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 36px; }
.hero-formats li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--paper); opacity: 0.85; }
.hero-formats li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--t); }
/* 히어로 칩 = 파이프라인 순서 — 칩 사이에 화살표 */
.hero-formats--flow { gap: 8px 10px; }
.hero-formats--flow li:not(:last-child)::after { content: "→"; margin-left: 2px; color: var(--on-ink-mute); font-weight: 400; }

/* 제작 월 */
.wall { position: relative; align-self: center; }
.wall-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 6px;
  height: clamp(420px, calc(100svh - var(--nav-h) - 170px), 760px);
}
.tile { position: relative; overflow: hidden; border-radius: 6px; background: var(--ink-3); }
.tile--big { grid-column: span 2; grid-row: span 2; }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile img.next { clip-path: inset(0 0 0 100%); }
.tile img.next.go { clip-path: inset(0 0 0 0); transition: clip-path 240ms var(--snap); }
.tile::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.tile.flash::after { animation: flash 220ms ease-out; }
@keyframes flash { 0% { opacity: 0.55; } 100% { opacity: 0; } }
.tile-tag {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 7px; border-radius: 4px;
  background: rgba(13, 12, 11, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--paper); white-space: nowrap;
}
.tile-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t, var(--signal)); }
.tile--big .tile-tag { font-size: 11px; left: 10px; bottom: 10px; }
.wall-hud { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--on-ink-mute); }
.hud-rec { display: inline-flex; align-items: center; gap: 8px; }
.hud-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.hud-tc { font-variant-numeric: tabular-nums; }

/* 생산 로그 티커 */
.ticker { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; border-top: 1px solid var(--rule-ink); padding: 14px 0 18px; }
.ticker-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--signal); white-space: nowrap; }
.ticker-list { position: relative; height: 26px; overflow: hidden; }
.ticker-list li {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 13px; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: tickin 380ms var(--ease) both;
}
.ticker-list li.old { animation: tickout 300ms var(--snap) forwards; }
.ticker-list li b { color: var(--t); font-weight: 700; min-width: 64px; }
.ticker-list li time { color: var(--on-ink-mute); }
@keyframes tickin { from { transform: translateY(100%); opacity: 0; } }
@keyframes tickout { to { transform: translateY(-100%); opacity: 0; } }

/* ═════════ Studio Film — 화면 전체 키네틱 모션그래픽 ═════════
   pf 포트폴리오 Life Reel 의 문법: 비트 하드 컷 + 블러 아웃 · 챕터 전환 플래시와 시그널 와이프 ·
   화면 폭을 꽉 채우는 대문자 디스플레이 · 흐르는 거대 아웃라인 · 스캔라인과 비네트 · HUD 타임코드 */
.film { position: relative; }
.film-stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); color: var(--paper); container-type: inline-size; --fc: var(--signal); }
.film-stage > * { position: absolute; }
.fx-bgimg { inset: 0; }
.fx-bgimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25); opacity: 0.16; animation: bgzoom 9s linear both; }
@keyframes bgzoom { from { transform: scale(1.18); } to { transform: scale(1); } }
.fx-bgword { left: 0; right: 0; bottom: 10%; overflow: hidden; opacity: 0.08; pointer-events: none; }
.fx-bgword p { font-family: var(--f-lat); font-weight: 900; font-size: 28cqi; line-height: 0.9; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px var(--paper); animation: bgdrift 10s linear infinite; }
@keyframes bgdrift { to { transform: translateX(-50%); } }
.fx-host { inset: 0; }
.fx-wipe { inset: 0; pointer-events: none; z-index: 6; }
.fx-wipe i { position: absolute; top: -5%; bottom: -5%; transform: skewX(-18deg); }
.fx-wipe .flashf { inset: 0; top: 0; bottom: 0; transform: none; background: var(--paper); }
.fx-scan { inset: 0; z-index: 7; pointer-events: none; opacity: 0.4; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px); }
.fx-vig { inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55)); }
.fx-top { left: 0; right: 0; top: 0; z-index: 8; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: calc(var(--nav-h) + 14px) var(--pad) 0; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(238, 232, 220, 0.72); }
.fx-rec { display: inline-flex; align-items: center; gap: 8px; }
.fx-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); animation: blink 1s steps(2) infinite; }
.film-stage.is-paused .fx-rec i, .film-stage.user-paused .fx-rec i { animation: none; opacity: 0.4; }
.fx-tc { font-variant-numeric: tabular-nums; }
.fx-chips { display: flex; gap: 6px; }
.fx-chips li { padding: 4px 8px; border: 1px solid rgba(238, 232, 220, 0.2); color: rgba(238, 232, 220, 0.45); transition: all 200ms; }
.fx-chips li.got { border-color: var(--c); color: var(--paper); }
.fx-chips li.now { background: var(--c); border-color: var(--c); color: var(--ink); }
.fx-bot { left: var(--pad); right: var(--pad); bottom: 28px; z-index: 8; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; color: rgba(238, 232, 220, 0.75); text-transform: uppercase; padding-right: 120px; }
.fx-bar { height: 2px; background: rgba(238, 232, 220, 0.12); overflow: hidden; }
.fx-bar i { display: block; height: 100%; background: var(--fc); transform-origin: left; transform: scaleX(var(--p, 0)); }
.fx-pause { position: absolute; right: var(--pad); bottom: 16px; z-index: 9; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(238, 232, 220, 0.3); background: rgba(13, 12, 11, 0.6); color: var(--paper); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; cursor: pointer; }
.fx-pause:hover { background: var(--paper); color: var(--ink); }

.fx-beat { font-variant-numeric: tabular-nums; color: rgba(238, 232, 220, 0.55); }
/* 촬영 프레임 모서리 */
.fx-frame { inset: calc(var(--nav-h) + 44px) calc(var(--pad) - 10px) 64px; z-index: 7; pointer-events: none; }
.fx-frame i { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(238, 232, 220, 0.45); }
.fx-frame i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.fx-frame i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.fx-frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.fx-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }

/* 비트 공통 */
.bt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.bt .disp { font-family: var(--f-lat); font-weight: 900; line-height: 0.86; letter-spacing: -0.01em; text-transform: uppercase; white-space: pre; color: var(--paper); }
.bt .kr { font-family: var(--f-kr); font-weight: 800; letter-spacing: -0.055em; line-height: 1.02; color: var(--paper); }
.bt .ol { color: transparent; -webkit-text-stroke: 2px var(--paper); }
.bt .sg { color: var(--fc); }
.bt .mono { font-family: var(--f-mono); font-size: clamp(11px, 1.1cqi, 15px); letter-spacing: 0.2em; text-transform: uppercase; }
.bt--signal { background: var(--fc); }
.bt--signal .disp, .bt--signal .kr, .bt--signal .mono { color: var(--ink); }
.bt-ghost { position: absolute; }
.bt-count { position: absolute; left: 4cqi; bottom: 16svh; opacity: 0.6; }
.bt-kr { align-items: flex-start; padding: 0 6cqi; }
.bt-kr .kr { font-size: clamp(34px, 7.2cqi, 132px); max-width: 15ch; }
.bt-kr .w { display: inline-block; overflow: hidden; padding-bottom: 0.06em; vertical-align: bottom; }
.bt-kr .w > span { display: inline-block; }
.bt-kr ul { margin-top: 3svh; display: grid; gap: 4px; font-size: clamp(14px, 1.25cqi, 19px); color: rgba(238, 232, 220, 0.72); }
.bt-kr .mono { color: var(--fc); margin-bottom: 2.5svh; }
.bt-tick { gap: 1svh; align-items: stretch; }
.bt-tick .disp { font-size: clamp(48px, 13cqi, 260px); line-height: 0.9; }
.bt-media { justify-content: flex-end; align-items: flex-start; }
.bt-media .panes { position: absolute; inset: 0; display: flex; gap: 3px; }
.bt-media .pane { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.bt-media .pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.bt-media .shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--ink) 0%, rgba(13, 12, 11, 0.25) 45%, rgba(13, 12, 11, 0.15)); }
.bt-media .disp { position: relative; margin: 0 0 17svh 3cqi; }
.bt-media .cap { position: relative; margin: 0 0 1.4svh 3.2cqi; color: var(--fc); }
.bt-assemble .pcs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqi; max-width: 90cqi; }
.bt-assemble .pc { font-family: var(--f-lat); font-weight: 900; font-size: clamp(16px, 2.6cqi, 48px); padding: 0.6cqi 1.2cqi; border: 1px solid rgba(238, 232, 220, 0.3); color: var(--paper); }
.bt-assemble .ttl { margin-top: 5svh; text-align: center; }
.bt-final .logo { width: min(64cqi, 92svh); height: auto; margin-bottom: 3svh; }
.bt-stat .disp { font-variant-numeric: tabular-nums; }

/* 단계 시퀀스 — 맥락 헤더 · 거대 단계 번호 · 한 줄 활자 · 단계 레일 */
.bt-kr ul li { overflow: hidden; }
.bt-kr ul li > span { display: inline-block; }
.bt-steps { align-items: flex-start; padding: 0 7cqi; }
.bt-steps .sk { position: absolute; left: 7cqi; top: calc(var(--nav-h) + 64px); color: var(--fc); }
.bt-steps .snum { position: absolute; right: 4cqi; top: 50%; margin-top: -0.42em; font-size: min(40cqi, 62svh); line-height: 0.84; -webkit-text-stroke: 2px rgba(238, 232, 220, 0.16); font-variant-numeric: tabular-nums; }
.bt-steps .sline { position: relative; width: 100%; height: 0; }
.bt-steps .sline .kr { position: absolute; left: 0; top: 0; translate: 0 -50%; white-space: nowrap; line-height: 1.08; }
.bt-steps .w { display: inline-block; overflow: hidden; padding-bottom: 0.08em; vertical-align: bottom; }
.bt-steps .w > span { display: inline-block; }
.bt-steps .sep { display: inline-block; color: var(--fc); margin: 0 0.22em; vertical-align: bottom; padding-bottom: 0.08em; }
.bt-steps .rail { position: absolute; left: 7cqi; right: 7cqi; bottom: 92px; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; }
.bt-steps .rail i { display: block; height: 3px; background: rgba(238, 232, 220, 0.16); transition: background 180ms; }
.bt-steps .rail span { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; color: rgba(238, 232, 220, 0.45); }
.bt-steps .rail li.got i { background: color-mix(in srgb, var(--fc) 55%, transparent); }
.bt-steps .rail li.now i { background: var(--fc); }
.bt-steps .rail li.now span { color: var(--paper); }

/* 영상 비트 — 패널 꼬리표 · 몽타주 · 영상 벽 · 장르 롤 · 분할 */
.bt video, .bt img { display: block; }
.bt-media .pane video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.bt-media .ptag { position: absolute; left: 8px; top: calc(var(--nav-h) + 52px); z-index: 1; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: rgba(13, 12, 11, 0.62); padding: 3px 6px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-reel .rf { position: absolute; inset: 0; overflow: hidden; }
.bt-reel .rf > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bt-reel .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 12, 11, 0.85), rgba(13, 12, 11, 0.1) 45%, rgba(13, 12, 11, 0.35)); }
.bt-reel.alt .rf { filter: grayscale(1) contrast(1.3); }
.bt-reel.alt .shade { background: linear-gradient(to top, rgba(13, 12, 11, 0.85), transparent 50%), color-mix(in srgb, var(--fc) 26%, transparent); mix-blend-mode: normal; }
.bt-reel .disp { position: relative; text-align: center; -webkit-text-stroke-width: 2.5px; }
.bt-reel .cap { position: absolute; left: var(--pad); bottom: 74px; color: var(--paper); max-width: calc(100% - 2 * var(--pad)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-reel .sub { position: absolute; left: var(--pad); bottom: 98px; color: var(--fc); }
.bt-reel .cnt { position: absolute; right: var(--pad); top: calc(var(--nav-h) + 52px); color: var(--paper); font-variant-numeric: tabular-nums; }
.bt-reel .cutf { position: absolute; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; }
.bt-wall .grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: 1fr; gap: 3px; }
.bt-wall .tile { position: relative; overflow: hidden; background: #1b1916; }
.bt-wall .tile > video, .bt-wall .tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bt-wall .chip { position: absolute; left: 6px; bottom: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--paper); background: rgba(13, 12, 11, 0.7); padding: 2px 5px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-wall .ov { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 4svh 5cqi; background: radial-gradient(ellipse at center, rgba(13, 12, 11, 0.86) 30%, rgba(13, 12, 11, 0) 72%); }
.bt-wall .ov .disp { text-align: center; }
.bt-wall .ov .mono { margin-top: 2svh; color: var(--fc); text-align: center; }
.bt-genre .gword { position: absolute; white-space: nowrap; line-height: 1; color: var(--fc); opacity: 0.95; }
.bt-genre .gword.ol { color: transparent; -webkit-text-stroke: 2px var(--fc); }
.bt-genre .card { position: relative; height: min(58svh, 70cqi); aspect-ratio: 3 / 4; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); outline: 1px solid rgba(238, 232, 220, 0.25); }
.bt-genre .card > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-genre .nm { position: relative; margin-top: 2.4svh; font-size: clamp(16px, 2cqi, 30px); text-align: center; padding: 0 20px; }
.bt-genre .cnt { position: relative; margin-top: 1svh; color: rgba(238, 232, 220, 0.7); text-align: center; padding: 0 20px; }
.bt-split { flex-direction: row; gap: 5cqi; padding: calc(var(--nav-h) + 40px) 7cqi 80px; }
.bt-split .card { position: relative; flex: none; height: min(66svh, 52cqi); aspect-ratio: 3 / 4; overflow: hidden; outline: 1px solid rgba(238, 232, 220, 0.25); }
.bt-split .card > video, .bt-split .card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.bt-split .card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(to top, rgba(13, 12, 11, 0.9), transparent); color: var(--paper); font-size: 10px; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-split .tx { flex: 1; min-width: 0; }
.bt-split .tx > .mono { color: var(--fc); margin-bottom: 2.4svh; }
.bt-split .kr { font-size: clamp(30px, 5cqi, 96px); max-width: 14ch; }
.bt-split .w { display: inline-block; overflow: hidden; padding-bottom: 0.06em; vertical-align: bottom; }
.bt-split .w > span { display: inline-block; }
.bt-split ul { margin-top: 3.4svh; display: grid; gap: 10px; font-size: clamp(14px, 1.35cqi, 21px); color: rgba(238, 232, 220, 0.82); }
.bt-split li b { display: inline-block; width: 2.6em; font-family: var(--f-mono); font-weight: 500; color: var(--fc); font-size: 0.8em; }

@media (max-width: 720px) {
  .fx-chips { display: none; }
  .fx-beat { display: none; }
  .fx-frame { display: none; }
  .bt-split { flex-direction: column; gap: 3svh; padding: calc(var(--nav-h) + 36px) 6cqi 76px; align-items: flex-start; justify-content: center; }
  .bt-split .card { height: 36svh; }
  .bt-steps .sk { top: calc(var(--nav-h) + 48px); }
  .bt-steps .rail { bottom: 84px; }
  .bt-split .kr { font-size: clamp(24px, 7.6cqi, 40px); }
  .bt-split ul { margin-top: 2svh; gap: 6px; font-size: 13.5px; }
  .bt-genre .card { height: 50svh; }
  .bt-reel .cap { bottom: 70px; }
  .bt-reel .sub { bottom: 92px; max-width: calc(100% - 2 * var(--pad)); }
  .fx-top { font-size: 9.5px; }
  .fx-bot { padding-right: 112px; bottom: 26px; }
  .bt-media .pane:nth-child(n + 4) { display: none; }
  .bt-kr .kr { font-size: clamp(30px, 10.5cqi, 60px); }
}
@media (prefers-reduced-motion: reduce) { .fx-bgword p, .fx-bgimg img { animation: none !important; } }

/* ═════════ 키네틱 띠 ═════════ */
.band { overflow: hidden; padding: clamp(28px, 4vw, 56px) 0; border-block: 1px solid var(--rule-ink); display: grid; gap: 4px; }
.band-row { white-space: nowrap; }
.band-row p { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--f-lat); font-weight: 900; font-size: clamp(56px, 9vw, 150px); line-height: 0.95; letter-spacing: 0.01em; will-change: transform; transform: translateX(var(--x, 0)) skewX(var(--k, 0deg)); }
.band-row:first-child p { color: var(--paper); }
.band-row i { display: inline-block; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--signal); margin: 0 0.1em; }
.band-row--rev p { color: transparent; -webkit-text-stroke: 1.5px rgba(238, 232, 220, 0.45); font-size: clamp(44px, 6.5vw, 110px); }
.band-row--rev b { -webkit-text-stroke: 0; color: var(--signal); font-family: var(--f-mono); font-size: 0.4em; margin: 0 0.3em; }

/* ═════════ 자율 루프 ═════════ */
.loop { position: relative; height: 240vh; }
.loop-stage {
  position: sticky; top: 0; height: 100svh; min-height: 640px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px;
  align-items: center;
  padding: calc(var(--nav-h) + 16px) var(--pad) 32px;
  max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto;
}
.loop-copy .h2 { margin-bottom: 18px; }
.loop-steps { position: relative; margin-top: 30px; min-height: 230px; }
.loop-step { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(16px); transition: opacity 320ms var(--ease), transform 420ms var(--ease); pointer-events: none; }
.loop-step.on { opacity: 1; transform: none; pointer-events: auto; }
.ls-k { font-family: var(--f-kr); font-weight: 700; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 14px; }
.ls-k b { font-family: var(--f-mono); font-size: 14px; color: var(--signal); font-weight: 500; }
.ls-d { margin-top: 12px; color: var(--on-ink-mute); max-width: 560px; }
.ls-m { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 22px; }
.ls-m dt { font-size: 13px; color: var(--on-ink-mute); }
.ls-m dd { white-space: nowrap; font-family: var(--f-lat); font-weight: 800; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }

.loop-viz { position: relative; aspect-ratio: 1; width: min(100%, 72vh); justify-self: center; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-track { fill: none; stroke: var(--rule-ink); stroke-width: 2; }
.ring-dash { fill: none; stroke: rgba(238, 232, 220, 0.12); stroke-width: 1; stroke-dasharray: 2 9; animation: spin 60s linear infinite; transform-origin: 300px 300px; }
.ring-prog { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 300px 300px; transition: stroke-dasharray 500ms var(--ease); }
.ring-comet { transform-origin: 300px 300px; animation: spin 3.2s linear infinite; }
.ring-comet circle { fill: var(--signal); filter: drop-shadow(0 0 8px var(--signal)); }
.ring-comet path { fill: none; stroke-width: 4; stroke-linecap: round; }
@keyframes spin { to { transform: rotate(360deg); } }
.ring-nodes li {
  --r: 38.3%;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  display: grid; justify-items: center; gap: 2px;
  padding: 10px 14px; border-radius: 12px; min-width: 92px;
  background: var(--ink-2); border: 1px solid var(--rule-ink);
  transition: background-color 260ms, border-color 260ms, transform 360ms var(--ease);
}
.ring-nodes b { font-family: var(--f-lat); font-weight: 800; font-size: 20px; letter-spacing: 0.04em; }
.ring-nodes span { font-size: 12px; color: var(--on-ink-mute); }
.ring-nodes li.on { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))) scale(1.12); }
.ring-nodes li.on span { color: var(--signal-ink); }
.ring-nodes li.done { border-color: rgba(255, 77, 26, 0.6); }
.ring-core { position: absolute; inset: 31%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, var(--ink-3), var(--ink) 70%); border: 1px solid var(--rule-ink); }
.rc-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--on-ink-mute); }
.rc-n { font-family: var(--f-lat); font-weight: 900; font-size: clamp(56px, 7vw, 104px); line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums; }
.rc-s { font-size: 13px; color: var(--signal); margin-top: 4px; }

/* ═════════ AI 크리에이터 ═════════ */
.creators { padding: clamp(96px, 12vw, 180px) var(--pad); }
.crew-stats { max-width: var(--max); margin: 0 auto 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--rule-paper); padding-top: 28px; }
.crew-stats p { display: grid; gap: 4px; }
.crew-stats b { font-family: var(--f-lat); font-weight: 900; font-size: clamp(48px, 5vw, 80px); line-height: 0.95; font-variant-numeric: tabular-nums; }
.crew-stats span { color: var(--on-paper-mute); font-size: 15px; }
.crew { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mate {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px;
  padding: 20px 20px 18px; border-radius: 14px;
  background: var(--paper-2); border: 1px solid var(--rule-paper);
  min-height: 210px; overflow: hidden;
  transition: transform 260ms var(--ease), background-color 200ms;
}
.mate::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--t); }
.mate:hover { transform: translateY(-3px); background: #fffaf0; }
.mate-lane { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--on-paper-mute); text-transform: uppercase; }
.mate-lane i { font-style: normal; color: var(--ink); }
.mate-name { font-family: var(--f-kr); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; }
.mate-formula { font-size: 14.5px; color: var(--on-paper-mute); line-height: 1.55; }
.mate-now { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink); border-top: 1px dashed var(--rule-paper); padding-top: 10px; min-height: 32px; overflow: hidden; }
.mate-now::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--t); animation: blink 0.9s steps(2) infinite; }
.mate-now span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mate-now span.swap { animation: tickin 300ms var(--ease) both; }

/* ═════════ 스튜디오 ═════════ */
.studios { padding: clamp(96px, 12vw, 180px) 0 0; }
.studios-head { max-width: var(--max); margin: 0 auto 36px; padding: 0 var(--pad); }
.studios-head .h2 { margin-bottom: 20px; }
.switcher {
  position: sticky; top: var(--nav-h); z-index: 40;
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 10px var(--pad);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid var(--rule-ink);
}
.switcher a {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 999px;
  font-family: var(--f-lat); font-weight: 800; font-size: 17px; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase;
  color: var(--on-ink-mute); border: 1px solid transparent;
  transition: color 160ms, background-color 160ms, border-color 160ms;
}
.switcher a i { font-style: normal; font-family: var(--f-mono); font-size: 11px; font-weight: 500; }
.switcher a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t); opacity: 0.5; }
.switcher a:hover { color: var(--paper); }
.switcher a[aria-current="true"] { color: var(--ink); background: var(--t); }
.switcher a[aria-current="true"]::before { background: var(--ink); opacity: 1; }

.studio {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  grid-template-areas: "head stage" "body body" "try try";
  gap: 48px clamp(32px, 4vw, 72px);
  padding: clamp(80px, 9vw, 140px) var(--pad);
  max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto;
}
.studio[data-theme="paper"] { max-width: none; padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2)); }
.studio-head { grid-area: head; align-self: center; position: relative; container-type: inline-size; }
.studio-no { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.studio-no span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--t); color: var(--ink); font-weight: 700; }
/* 가장 긴 CHARACTER(4.68em)가 칸 안에 한 줄로 들어가는 크기까지만 — 단어가 쪼개지지 않게 */
.studio-lat { white-space: nowrap; font-family: var(--f-lat); font-weight: 900; font-size: min(clamp(64px, 9vw, 150px), 20.8cqi); line-height: 0.86; letter-spacing: 0.005em; margin: 18px 0 8px; color: transparent; -webkit-text-stroke: 1.5px var(--t); opacity: 0.95; }
.studio-title { font-family: var(--f-kr); font-weight: 800; font-size: clamp(28px, 2.8vw, 44px); line-height: 1.2; letter-spacing: -0.03em; }
.studio-lede { margin-top: 18px; color: var(--on-ink-mute); max-width: 560px; }
[data-theme="paper"] .studio-lede { color: var(--on-paper-mute); }
.flow { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 26px; counter-reset: f; }
.flow li {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--rule-ink); background: rgba(238, 232, 220, 0.03);
}
[data-theme="paper"] .flow li { border-color: var(--rule-paper); background: rgba(13, 12, 11, 0.03); }
.flow li:not(:last-child)::after { content: "→"; margin-left: 6px; opacity: 0.45; }
.flow li.lit { border-color: var(--t); background: color-mix(in srgb, var(--t) 16%, transparent); }

.studio-body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; border-top: 1px solid var(--rule-ink); padding-top: 40px; }
[data-theme="paper"] .studio-body { border-color: var(--rule-paper); }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 36px; }
.feats dt { font-family: var(--f-kr); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.feats dt::before { content: ""; width: 14px; height: 2px; background: var(--t); flex: none; }
.feats dd { font-size: 15px; line-height: 1.7; color: var(--on-ink-mute); }
[data-theme="paper"] .feats dd { color: var(--on-paper-mute); }
.feats-more { display: none; }
.metrics { display: grid; gap: 18px; align-content: start; border-left: 1px solid var(--rule-ink); padding-left: 28px; }
[data-theme="paper"] .metrics { border-color: var(--rule-paper); }
.metrics dt { font-size: 13px; color: var(--on-ink-mute); }
[data-theme="paper"] .metrics dt { color: var(--on-paper-mute); }
.metrics dd { white-space: nowrap; font-family: var(--f-lat); font-weight: 900; font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; }
.metrics small { font-family: var(--f-body); font-size: 15px; font-weight: 600; margin-left: 4px; opacity: 0.6; }

/* ───────── 직접 해 보기 — 실제 작품으로 가는 카드(새 탭 · 로그인 없이) ───────── */
.try { grid-area: try; min-width: 0; border-top: 1px solid var(--rule-ink); padding-top: 32px; }
[data-theme="paper"] .try { border-color: var(--rule-paper); }
.try-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 22px; }
.try-k b { font-family: var(--f-kr); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.try-k b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--t); vertical-align: 2px; }
.try-k span { font-size: 14px; color: var(--on-ink-mute); }
[data-theme="paper"] .try-k span { color: var(--on-paper-mute); }
.try-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.try-card { display: grid; align-content: start; gap: 6px; height: 100%; color: inherit; text-decoration: none; }
.try-pic { display: block; aspect-ratio: 3 / 4; margin-bottom: 10px; overflow: hidden; border-radius: 12px; outline: 1px solid var(--rule-ink); background: rgba(238, 232, 220, 0.06); }
[data-theme="paper"] .try-pic { outline-color: var(--rule-paper); background: rgba(13, 12, 11, 0.05); }
.try-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.try-card:hover .try-pic img, .try-card:focus-visible .try-pic img { transform: scale(1.04); }
.try-meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--on-ink-mute); }
[data-theme="paper"] .try-meta { color: var(--on-paper-mute); }
.try-name { font-family: var(--f-kr); font-weight: 800; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; }
.try-line { font-size: 14px; line-height: 1.6; color: var(--on-ink-mute); }
[data-theme="paper"] .try-line { color: var(--on-paper-mute); }
.try-go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 16px; border-radius: 999px; background: var(--t); color: var(--ink); font-weight: 700; font-size: 14px; white-space: nowrap; transition: transform 180ms var(--ease); }
.try-card:hover .try-go { transform: translateX(3px); }
.try-go i { font-style: normal; }
@media (max-width: 480px) {
  /* 좁은 폰에선 2열 카드가 낱말을 못 담는다 — 포스터 왼쪽 · 글 오른쪽 한 줄 카드로 */
  .try-list { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  .try-card { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .try-pic { grid-row: 1 / span 4; margin-bottom: 0; border-radius: 10px; }
  .try-go { margin-top: 4px; white-space: normal; }
}

/* ───────── 스테이지 공통 ───────── */
.stage {
  grid-area: stage; position: relative; align-self: center;
  aspect-ratio: 16 / 11;
  border-radius: 16px; overflow: hidden;
  background: #0a0908; color: var(--paper);
  border: 1px solid rgba(238, 232, 220, 0.1);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column;
  container-type: inline-size;
  isolation: isolate;
}
.stage::before { /* 탤리 색 은은한 빛 */
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 70%; height: 80%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--t) 22%, transparent), transparent);
  pointer-events: none;
}
.stage .mono-k { color: #8f877b; }
.stage-bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; color: #a39b8f; border-bottom: 1px solid rgba(238, 232, 220, 0.08); flex: none; }
.sb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 10px var(--t); }
.stage.is-paused .sb-dot { box-shadow: none; opacity: 0.5; }
.sb-tc { margin-left: auto; font-variant-numeric: tabular-nums; }
.stage-bar { position: relative; }
.sb-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--t); transform-origin: left; transform: scaleX(var(--p, 0)); }
.stage img { user-select: none; -webkit-user-drag: none; }

/* ───────── 01 Character ───────── */
.sc-grid { flex: 1; display: grid; grid-template-columns: 1fr 1.05fr 1.15fr; grid-template-rows: 1fr 1fr; gap: 10px; padding: 12px; min-height: 0; }
.sc-seed { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: #151412; position: relative; overflow: hidden; }
.sc-seed-line { font-family: var(--f-kr); font-weight: 700; font-size: clamp(13px, 2.1cqi, 18px); line-height: 1.35; letter-spacing: -0.02em; min-height: 2.7em; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--t); vertical-align: -0.12em; margin-left: 2px; animation: blink 0.7s steps(2) infinite; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-chips li { font-size: clamp(9.5px, 1.4cqi, 11.5px); padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(238, 232, 220, 0.16); color: #c9c1b4; transition: background-color 90ms, color 90ms, border-color 90ms; }
.sc-chips li.hot { background: var(--t); border-color: var(--t); color: var(--ink); }
.sc-dice { position: absolute; right: 10px; top: 8px; font-size: 20px; color: var(--t); }
.sc-dice.roll { animation: roll 500ms var(--ease); }
@keyframes roll { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.3); } 100% { transform: rotate(360deg) scale(1); } }
.sc-card { grid-column: 2; grid-row: 1 / span 2; border-radius: 12px; overflow: hidden; background: #151412; display: flex; flex-direction: column; transform-style: preserve-3d; }
.sc-card.flip { animation: cardflip 260ms var(--snap); }
@keyframes cardflip { 0% { transform: perspective(600px) rotateY(0); } 50% { transform: perspective(600px) rotateY(90deg); } 100% { transform: perspective(600px) rotateY(0); } }
.sc-photo { position: relative; flex: 1; min-height: 0; }
.sc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.sc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, #151412); }
.sc-card-body { padding: 0 12px 12px; margin-top: -26px; position: relative; }
.sc-genre { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--t); }
.sc-name { font-family: var(--f-kr); font-weight: 800; font-size: clamp(16px, 2.8cqi, 24px); letter-spacing: -0.02em; }
.sc-stats { display: grid; gap: 4px; margin-top: 6px; }
.sc-stats li { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 6px; font-size: 10px; color: #a39b8f; }
.sc-stats i { height: 4px; border-radius: 4px; background: rgba(238, 232, 220, 0.1); position: relative; overflow: hidden; }
.sc-stats i::after { content: ""; position: absolute; inset: 0; background: var(--t); transform-origin: left; transform: scaleX(var(--v)); transition: transform 600ms var(--ease); }
.sc-chat { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: #151412; min-height: 0; }
.sc-bubbles { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; min-height: 0; }
.sc-bubbles li { max-width: 88%; font-size: clamp(10px, 1.55cqi, 13px); line-height: 1.45; padding: 6px 10px; border-radius: 12px; animation: pop 260ms var(--ease) both; }
.sc-bubbles li.me { align-self: flex-end; background: var(--paper); color: var(--ink); border-bottom-right-radius: 3px; }
.sc-bubbles li.ai { align-self: flex-start; background: #24221f; border-bottom-left-radius: 3px; }
.sc-bubbles li.ai em { font-style: normal; color: #a39b8f; }
.sc-bubbles li.typing { display: inline-flex; gap: 3px; padding: 9px 10px; }
.sc-bubbles li.typing i { width: 5px; height: 5px; border-radius: 50%; background: #a39b8f; animation: dots 0.9s infinite; }
.sc-bubbles li.typing i:nth-child(2) { animation-delay: 0.15s; }
.sc-bubbles li.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.92); } }
.sc-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 10.5px; color: #a39b8f; }
.sc-meter i { height: 6px; border-radius: 6px; background: rgba(238, 232, 220, 0.1); position: relative; overflow: hidden; }
.sc-meter i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--t), #ffd3c4); transform-origin: left; transform: scaleX(var(--m, 0.12)); transition: transform 500ms var(--ease); }
.sc-meter b { font-family: var(--f-mono); color: var(--paper); min-width: 22px; text-align: right; }
.sc-unlock { grid-column: 1; grid-row: 2; position: relative; border-radius: 10px; overflow: hidden; background: #151412; }
.sc-unlock img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(0.6); transform: scale(1.15); transition: filter 400ms var(--ease), transform 600ms var(--ease); }
.sc-unlock.open img { filter: none; transform: scale(1); }
.sc-unlock p { position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; font-size: 10px; line-height: 1.3; }
.sc-unlock b { font-family: var(--f-kr); font-size: clamp(11px, 1.8cqi, 14px); color: var(--paper); }
.sc-unlock span { font-family: var(--f-mono); color: #d8d0c3; }
.sc-unlock::before { content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; z-index: 2; transition: opacity 200ms, transform 300ms var(--ease); }
.sc-unlock.open::before { opacity: 0; transform: scale(2); }
.sc-ship-k { padding: 0 12px 4px; font-size: 9.5px !important; flex: none; }
.sc-ship { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 0 12px 12px; flex: none; }
.sc-ship li { position: relative; text-align: center; font-family: var(--f-mono); font-size: clamp(9px, 1.2cqi, 10px); letter-spacing: 0.02em; padding: 6px 2px; border-radius: 6px; border: 1px dashed rgba(238, 232, 220, 0.18); color: #7d766b; overflow: hidden; white-space: nowrap; }
.sc-ship li.ok { border-style: solid; border-color: var(--t); color: var(--paper); background: color-mix(in srgb, var(--t) 18%, transparent); animation: stamp 260ms var(--snap); }
.sc-ship li.ok::after { content: "✓"; margin-left: 4px; color: var(--t); }
@keyframes stamp { 0% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1); } }

/* ───────── 02 Drama ───────── */
.sd-grid { flex: 1; display: grid; grid-template-columns: 0.62fr 1fr; gap: 12px; padding: 12px 12px 0; min-height: 0; }
.sd-view { position: relative; border-radius: 10px; overflow: hidden; background: #000; }
.sd-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.sd-frames img.on { opacity: 1; animation: kb 1.6s linear both; }
@keyframes kb { from { transform: scale(1.12) translate(var(--kx, 0), var(--ky, 0)); } to { transform: scale(1.02); } }
.sd-size { position: absolute; left: 8px; top: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; padding: 3px 6px; border-radius: 4px; background: var(--t); color: var(--ink); font-weight: 700; }
.sd-sub { position: absolute; left: 8px; right: 8px; bottom: 10px; text-align: center; font-family: var(--f-kr); font-weight: 700; font-size: clamp(11px, 1.9cqi, 15px); line-height: 1.35; color: #fff; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.8); }
.sd-sub:empty { display: none; }
.sd-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.sd-flash.go { animation: flash 260ms ease-out; }
.sd-flash.black { background: #000; }
.sd-script { display: flex; flex-direction: column; gap: 8px; min-height: 0; border-radius: 10px; background: #151412; padding: 12px; }
.sd-lines { flex: 1; min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 2px; position: relative; }
.sd-lines li { display: grid; grid-template-columns: 22px 54px 1fr; gap: 8px; align-items: baseline; font-size: clamp(10.5px, 1.45cqi, 12.5px); line-height: 1.4; padding: 4px 6px; border-radius: 6px; color: #8f877b; transition: background-color 120ms, color 120ms; }
.sd-lines li b { font-family: var(--f-mono); font-weight: 500; font-size: 0.92em; }
.sd-lines li span:nth-child(2) { font-family: var(--f-mono); font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; }
.sd-lines li.on { background: color-mix(in srgb, var(--t) 18%, transparent); color: var(--paper); }
.sd-lines li.on b { color: var(--t); }
.sd-tl { position: relative; display: grid; gap: 4px; padding: 10px 12px 12px 12px; flex: none; }
.sd-track { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 6px; height: 16px; }
.sd-tk { font-family: var(--f-mono); font-size: 9.5px; color: #8f877b; }
.sd-clips, .sd-subs { display: flex; gap: 2px; height: 100%; }
.sd-clips i { flex: var(--w, 1); border-radius: 3px; background: color-mix(in srgb, var(--t) 45%, #2b2824); }
.sd-clips i.on { background: var(--t); }
.sd-subs i { flex: var(--w, 1); border-radius: 3px; background: rgba(238, 232, 220, 0.14); }
.sd-subs i.none { background: transparent; }
.sd-wave { height: 100%; display: flex; align-items: center; gap: 1px; overflow: hidden; }
.sd-wave i { flex: 1; height: calc(var(--h) * 100%); background: rgba(238, 232, 220, 0.3); border-radius: 1px; }
.sd-head { position: absolute; top: 6px; bottom: 6px; left: calc(48px + var(--p, 0) * (100% - 60px)); width: 2px; background: #fff; box-shadow: 0 0 8px #fff; }
.sd-judge { position: absolute; right: 14px; top: 46px; width: min(46%, 300px); padding: 12px; border-radius: 12px; background: rgba(13, 12, 11, 0.92); border: 1px solid color-mix(in srgb, var(--t) 50%, transparent); backdrop-filter: blur(8px); opacity: 0; transform: translateY(-8px) scale(0.98); transition: opacity 220ms, transform 300ms var(--ease); pointer-events: none; }
.sd-judge.on { opacity: 1; transform: none; }
.sd-judge ul { display: grid; gap: 4px; margin-top: 8px; }
.sd-judge li { display: grid; grid-template-columns: 70px 1fr 26px; gap: 6px; align-items: center; font-size: 10.5px; color: #c9c1b4; }
.sd-judge li i { height: 5px; border-radius: 5px; background: rgba(238, 232, 220, 0.1); position: relative; overflow: hidden; }
.sd-judge li i::after { content: ""; position: absolute; inset: 0; background: var(--t); transform-origin: left; transform: scaleX(0); transition: transform 500ms var(--ease); }
.sd-judge.on li i::after { transform: scaleX(var(--v)); }
.sd-judge li b { font-family: var(--f-mono); font-weight: 500; text-align: right; }

/* ───────── 03 Webtoon ───────── */
.st-grid { flex: 1; display: grid; grid-template-columns: 0.8fr 0.9fr 1fr; gap: 12px; padding: 12px; min-height: 0; }
.st-steps { display: grid; align-content: center; gap: 6px; counter-reset: s; }
.st-steps li { counter-increment: s; display: flex; align-items: center; gap: 8px; font-size: clamp(10px, 1.6cqi, 13px); color: #6f685e; transition: color 150ms; }
.st-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--f-mono); font-size: 0.8em; width: 24px; height: 20px; border-radius: 4px; display: grid; place-items: center; border: 1px solid rgba(238, 232, 220, 0.15); transition: background-color 150ms, color 150ms; }
.st-steps li.done { color: #c9c1b4; }
.st-steps li.done::before { content: "✓"; background: color-mix(in srgb, var(--t) 25%, transparent); border-color: transparent; color: var(--t); }
.st-steps li.on { color: var(--paper); font-weight: 700; }
.st-steps li.on::before { background: var(--t); color: var(--ink); border-color: var(--t); }
.st-phone { position: relative; border-radius: 16px; background: #fff; overflow: hidden; border: 4px solid #24221f; }
.st-strip { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; will-change: transform; }
.st-panel { position: relative; margin: 0 8px; overflow: visible; }
.st-panel .pic { position: relative; overflow: hidden; border: 2px solid #111; background: #ddd; }
.st-panel .pic img { width: 100%; height: 100%; object-fit: cover; }
.st-gap { position: relative; }
.st-gap span { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 9px; color: #9d958a; }
.balloon { position: absolute; z-index: 2; max-width: 74%; background: #fff; color: #111; border: 1.5px solid #111; font-family: var(--f-kr); font-weight: 700; font-size: clamp(9.5px, 1.35cqi, 11px); line-height: 1.3; padding: 5px 8px; border-radius: 50% / 46%; text-align: center; transform: scale(0); transform-origin: var(--o, 30% 100%); }
.balloon.pop { animation: balloon 280ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes balloon { to { transform: scale(1); } }
.balloon--narr { border-radius: 2px; background: #111; color: #fff; font-family: var(--f-body); font-weight: 600; }
.balloon--spike { border-radius: 4px; clip-path: polygon(0 12%, 8% 0, 22% 10%, 38% 0, 52% 10%, 68% 0, 82% 10%, 100% 4%, 92% 30%, 100% 52%, 92% 74%, 100% 96%, 78% 88%, 60% 100%, 44% 90%, 26% 100%, 12% 88%, 0 96%, 6% 70%, 0 50%, 8% 30%); padding: 9px 12px; background: #ffe14d; }
.balloon--cloud { border-radius: 40%; border-style: dashed; }
.sfx { position: absolute; z-index: 2; font-family: var(--f-lat); font-weight: 900; font-size: clamp(16px, 3cqi, 26px); color: var(--t); -webkit-text-stroke: 1.5px #111; transform: rotate(-12deg) scale(0); }
.sfx.pop { animation: sfx 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes sfx { to { transform: rotate(-12deg) scale(1); } }
.st-side { display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 0; }
.st-ruler, .st-readers { border-radius: 10px; background: #151412; padding: 10px 12px; }
.st-ruler ul { display: grid; gap: 4px; margin-top: 8px; }
.st-ruler li { display: grid; grid-template-columns: 48px 1fr; gap: 6px; font-size: clamp(9.5px, 1.45cqi, 12px); color: #8f877b; padding: 2px 4px; border-radius: 4px; transition: background-color 120ms, color 120ms; }
.st-ruler li b { font-family: var(--f-mono); font-weight: 500; }
.st-ruler li.on { background: color-mix(in srgb, var(--t) 22%, transparent); color: var(--paper); }
.st-readers ul { display: grid; gap: 6px; margin-top: 8px; }
.st-readers li { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.st-readers li i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2b2824; font-family: var(--f-mono); font-size: 10px; margin-right: 2px; }
.st-readers li span { font-size: clamp(9.5px, 1.3cqi, 10.5px); padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(238, 232, 220, 0.14); color: #6f685e; transition: all 160ms; }
.st-readers li span.yes { background: var(--t); border-color: var(--t); color: var(--ink); animation: stamp 220ms var(--snap); }

/* ───────── 04 Novel ───────── */
.sn-grid { flex: 1; display: grid; grid-template-columns: 1.45fr 1fr; gap: 12px; padding: 12px; min-height: 0; }
.sn-book { position: relative; display: flex; flex-direction: column; border-radius: 10px; background: #f6f1e6; color: #1d1b18; padding: clamp(12px, 2.6cqi, 22px); min-height: 0; overflow: hidden; }
.sn-meta { font-family: var(--f-mono); font-size: clamp(9.5px, 1.25cqi, 10.5px); letter-spacing: 0.04em; color: #8a8173; }
.sn-title { font-family: var(--f-kr); font-weight: 800; font-size: clamp(15px, 2.7cqi, 24px); letter-spacing: -0.03em; margin: 4px 0 10px; }
.sn-text { flex: 1; min-height: 0; overflow: hidden; font-family: "Noto Serif KR", "Paperlogy", serif; font-size: clamp(10px, 1.6cqi, 13.5px); line-height: 1.75; }
.sn-text p { margin-bottom: 0.7em; }
.sn-text .cur::after { content: ""; display: inline-block; width: 0.5em; height: 1em; background: var(--t); vertical-align: -0.15em; margin-left: 1px; animation: blink 0.6s steps(2) infinite; }
.sn-text mark { background: color-mix(in srgb, var(--c-cf) 30%, transparent); color: inherit; text-decoration: line-through; text-decoration-color: var(--c-cf); }
.sn-text ins { text-decoration: none; background: color-mix(in srgb, var(--t) 30%, transparent); }
.sn-count { font-family: var(--f-mono); font-size: clamp(9.5px, 1.25cqi, 10.5px); color: #8a8173; border-top: 1px solid #e0d8c8; padding-top: 6px; margin-top: 6px; }
.sn-side { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; min-height: 0; }
.sn-box { border-radius: 10px; background: #151412; padding: 10px 12px; }
.sn-box ul { display: grid; gap: 3px; margin-top: 6px; }
.sn-box li { font-size: clamp(9px, 1.4cqi, 11.5px); color: #a39b8f; display: flex; gap: 6px; padding: 2px 4px; border-radius: 4px; transition: background-color 150ms; }
.sn-box li b { color: var(--paper); font-weight: 600; min-width: 3.4em; }
.sn-canon li.ping { background: color-mix(in srgb, var(--t) 25%, transparent); }
.sn-hooks li::before { content: "○"; color: #6f685e; }
.sn-hooks li.got { color: var(--paper); }
.sn-hooks li.got::before { content: "●"; color: var(--t); }
.sn-filter p { margin-top: 6px; font-size: clamp(9.5px, 1.5cqi, 12.5px); display: grid; gap: 2px; }
.sn-filter s { color: #8f877b; text-decoration-color: var(--c-cf); }
.sn-filter span { color: var(--t); }
.sn-filter span::before { content: "→ "; color: #6f685e; }

/* ───────── 05 CF ───────── */
.cf-grid { flex: 1; display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; padding: 12px; min-height: 0; }
.cf-canvas { position: relative; display: grid; place-items: center; border-radius: 10px; background: repeating-conic-gradient(#121110 0% 25%, #171614 0% 50%) 0 0 / 16px 16px; min-height: 0; overflow: hidden; }
.cf-frame { position: relative; overflow: hidden; container-type: inline-size; background: #111; transition: width 420ms var(--snap), height 420ms var(--snap); width: 94%; aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.cf-frame[data-ratio="9x16"] { width: auto; height: 94%; aspect-ratio: 9 / 16; }
.cf-frame[data-ratio="1x1"] { width: auto; height: 94%; aspect-ratio: 1; }
.cf-bg { position: absolute; inset: 0; background: var(--bg, #111); transition: background-color 120ms; }
.cf-mask { position: absolute; inset: 0; clip-path: var(--clip, inset(0 100% 0 0)); transition: clip-path 360ms var(--snap); }
.cf-mask img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.1)); transition: transform 2.4s linear; }
.cf-type { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6%; pointer-events: none; }
.cf-type .w { max-width: 100%; }
.cf-type .w { display: block; font-family: var(--f-lat); font-weight: 900; text-transform: uppercase; line-height: 0.88; letter-spacing: 0.01em; color: var(--fg, #fff); font-size: var(--fs, 15cqi); animation: slam 260ms var(--snap) both; }
.cf-type .w.kr { font-family: var(--f-kr); font-weight: 800; letter-spacing: -0.04em; text-transform: none; }
.cf-type .w.out { animation: slamout 160ms var(--snap) forwards; }
.cf-type .w.sub { font-family: var(--f-mono); font-weight: 500; font-size: max(9px, 2cqi); letter-spacing: 0.2em; margin-top: 0.6em; animation-delay: 120ms; }
@keyframes slam { from { transform: scale(1.8) translateY(-6%); opacity: 0; filter: blur(6px); } }
@keyframes slamout { to { transform: scale(0.85); opacity: 0; } }
.cf-beat { position: absolute; inset: auto 0 0 0; height: 4px; display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; padding: 0 2px 2px; }
.cf-beat i { background: rgba(255, 255, 255, 0.15); }
.cf-beat i.on { background: var(--t); }
.cf-side { display: grid; grid-auto-rows: min-content; gap: 10px; align-content: start; min-height: 0; }
.cf-kinds, .cf-ratios { display: flex; flex-wrap: wrap; gap: 4px; }
.cf-kinds li, .cf-ratios li { font-size: clamp(9px, 1.4cqi, 11.5px); padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(238, 232, 220, 0.16); color: #8f877b; transition: all 120ms; }
.cf-ratios li { font-family: var(--f-mono); }
.cf-kinds li.on, .cf-ratios li.on { background: var(--t); border-color: var(--t); color: var(--ink); font-weight: 700; }
.cf-render, .cf-review { border-radius: 10px; background: #151412; padding: 10px 12px; }
.cf-bar { height: 6px; border-radius: 6px; background: rgba(238, 232, 220, 0.1); overflow: hidden; margin: 8px 0 6px; }
.cf-bar i { display: block; height: 100%; width: 100%; background: var(--t); transform-origin: left; transform: scaleX(var(--p, 0)); }
.cf-frames { font-family: var(--f-mono); font-size: clamp(9px, 1.4cqi, 11px); color: #a39b8f; font-variant-numeric: tabular-nums; }
.cf-review ol { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin: 8px 0 6px; }
.cf-review li { aspect-ratio: 16 / 10; border-radius: 3px; background: #24221f; position: relative; overflow: hidden; }
.cf-review li.ok { background: color-mix(in srgb, var(--t) 40%, #24221f); }
.cf-review li.ok::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: #fff; }
.cf-score { font-size: clamp(9.5px, 1.45cqi, 12px); color: #a39b8f; }
.cf-score b { font-family: var(--f-lat); font-size: 1.7em; color: var(--paper); }

/* ═════════ 엔진 ═════════ */
.engine { padding: clamp(96px, 12vw, 180px) var(--pad); max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }
.forge { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 64px; }
.forge-mon { position: relative; }
.fm-frame { position: relative; aspect-ratio: 3 / 4; max-height: 70vh; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--rule-ink); }
.fm-img, .fm-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 380ms var(--ease), opacity 300ms; }
.fm-vid { opacity: 0; }
.fm-frame[data-s="0"] .fm-img { filter: grayscale(1) contrast(1.4) brightness(1.2); }
.fm-frame[data-s="2"] .fm-img { filter: grayscale(1) brightness(0.35) blur(2px); }
.fm-frame[data-s="3"] .fm-img { filter: none; }
.fm-frame[data-s="4"] .fm-img { animation: sharpen 1s var(--ease) both; }
@keyframes sharpen { from { filter: blur(5px) contrast(0.8); } to { filter: none; } }
.fm-frame[data-s="5"] .fm-vid { opacity: 1; }
.fm-scan { position: absolute; left: 0; right: 0; height: 22%; top: -22%; background: linear-gradient(transparent, color-mix(in srgb, var(--c-toon) 35%, transparent), transparent); border-bottom: 2px solid var(--c-toon); opacity: 0; }
.fm-frame[data-s="1"] .fm-scan { opacity: 1; animation: scan 1.2s linear infinite; }
@keyframes scan { to { top: 100%; } }
.fm-grid { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms; background-image: linear-gradient(90deg, transparent calc(33.33% - 1px), rgba(255, 255, 255, 0.6) 33.33%, transparent calc(33.33% + 1px), transparent calc(66.66% - 1px), rgba(255, 255, 255, 0.6) 66.66%, transparent calc(66.66% + 1px)), linear-gradient(transparent calc(33.33% - 1px), rgba(255, 255, 255, 0.6) 33.33%, transparent calc(33.33% + 1px), transparent calc(66.66% - 1px), rgba(255, 255, 255, 0.6) 66.66%, transparent calc(66.66% + 1px)); }
.fm-frame[data-s="2"] .fm-grid { opacity: 1; }
.fm-tags li { position: absolute; left: var(--x); top: var(--y); font-family: var(--f-mono); font-size: 11px; padding: 3px 7px; border: 1px solid var(--c-toon); color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 4px; opacity: 0; transform: scale(0.8); transition: opacity 200ms, transform 260ms var(--ease); }
.fm-frame[data-s="1"] .fm-tags li { opacity: 1; transform: none; }
.fm-frame[data-s="1"] .fm-tags li:nth-child(2) { transition-delay: 120ms; }
.fm-frame[data-s="1"] .fm-tags li:nth-child(3) { transition-delay: 240ms; }
.fm-frame[data-s="1"] .fm-tags li:nth-child(4) { transition-delay: 360ms; }
.fm-checks { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 4px; opacity: 0; transition: opacity 200ms; }
.fm-frame[data-s="6"] .fm-checks { opacity: 1; }
.fm-checks li { font-size: 12px; padding: 5px 9px; border-radius: 6px; background: rgba(13, 12, 11, 0.8); display: flex; justify-content: space-between; opacity: 0; transform: translateX(-10px); }
.fm-frame[data-s="6"] .fm-checks li { animation: chk 240ms var(--ease) forwards; }
.fm-frame[data-s="6"] .fm-checks li:nth-child(2) { animation-delay: 140ms; }
.fm-frame[data-s="6"] .fm-checks li:nth-child(3) { animation-delay: 280ms; }
.fm-frame[data-s="6"] .fm-checks li:nth-child(4) { animation-delay: 420ms; }
.fm-frame[data-s="6"] .fm-checks li:nth-child(5) { animation-delay: 560ms; }
.fm-checks li::after { content: "PASS"; font-family: var(--f-mono); font-size: 10px; color: var(--c-toon); }
@keyframes chk { to { opacity: 1; transform: none; } }
.fm-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--on-ink-mute); }
.fm-cap span:first-child { color: var(--paper); }
.forge-rail { display: grid; gap: 4px; counter-reset: r; }
.forge-rail li { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--rule-ink); font-size: 16px; color: var(--on-ink-mute); transition: background-color 200ms, color 200ms, border-color 200ms, transform 300ms var(--ease); }
.forge-rail b { white-space: nowrap; font-family: var(--f-lat); font-weight: 800; font-size: 20px; letter-spacing: 0.04em; color: var(--paper); opacity: 0.5; }
.forge-rail li.done { color: var(--paper); }
.forge-rail li.done b { opacity: 1; }
.forge-rail li.on { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: translateX(10px); }
.forge-rail li.on b { color: var(--signal-paper); opacity: 1; }

.same { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; margin-bottom: 64px; padding: clamp(24px, 3vw, 44px); border-radius: 18px; background: var(--ink-2); border: 1px solid var(--rule-ink); }
.same-head h3 { font-family: var(--f-kr); font-weight: 800; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.12; letter-spacing: -0.035em; }
.same-head > p:not(.eyebrow) { margin-top: 16px; color: var(--on-ink-mute); max-width: 460px; }
.same-who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.same-who button { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-ink); background: transparent; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--on-ink-mute); transition: all 150ms; }
.same-who button:hover { color: var(--paper); border-color: rgba(238, 232, 220, 0.4); }
.same-who button[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.same-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; }
.same-main { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #000; }
.same-main video { width: 100%; height: 100%; object-fit: cover; }
.same-main figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); display: grid; gap: 2px; }
.same-main b { font-family: var(--f-kr); font-size: 17px; }
.same-main span { font-family: var(--f-mono); font-size: 11px; color: #cfc7ba; }
.same-cuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.same-cuts button { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--ink-3); outline-offset: 2px; }
.same-cuts img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease), filter 200ms; filter: saturate(0.85) brightness(0.8); }
.same-cuts button:hover img { transform: scale(1.05); filter: none; }
.same-cuts button[aria-current="true"] { box-shadow: 0 0 0 2px var(--signal); }
.same-cuts button[aria-current="true"] img { filter: none; }
.same-cuts li.in { animation: pop 300ms var(--ease) both; }

.engines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.eng { position: relative; padding: 22px 20px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--rule-ink); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.eng::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--t); }
.eng-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--t); }
.eng h3 { font-family: var(--f-lat); font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: 0.01em; }
.eng > p:not(.eng-k) { font-size: 14.5px; color: var(--on-ink-mute); line-height: 1.65; }
.eng-foot { font-size: 12px !important; line-height: 1.5 !important; color: #8f877b !important; order: 9; }
.eng dl { margin-top: auto; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule-ink); }
.eng dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.eng dt { color: var(--on-ink-mute); }
.eng dd { font-family: var(--f-mono); font-weight: 500; text-align: right; }

.engine-lower { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.slot, .pods { padding: 28px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--rule-ink); }
.slot h3, .pods h3 { font-family: var(--f-kr); font-weight: 800; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.03em; }
.slot > p, .pods > p { color: var(--on-ink-mute); font-size: 15px; margin-top: 8px; }
.slot-reels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 22px; }
.reel-col p { font-family: var(--f-mono); font-size: 10.5px; color: var(--on-ink-mute); margin-bottom: 6px; letter-spacing: 0.04em; }
.reel-win { height: 44px; overflow: hidden; border-radius: 8px; background: #0a0908; border: 1px solid var(--rule-ink); position: relative; }
.reel-win::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0a0908, transparent 30%, transparent 70%, #0a0908); pointer-events: none; }
.reel-win ul { will-change: transform; }
.reel-win li { height: 44px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--paper); white-space: nowrap; }
.reel-win.landed { border-color: var(--signal); }
.slot-total { margin-top: 16px; font-size: 14px; color: var(--on-ink-mute); }
@media (max-width: 360px) { .reel-win li { font-size: 10.5px; } }
.slot-total b { font-family: var(--f-lat); font-size: 30px; color: var(--paper); margin-right: 4px; }
.pod-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; margin-top: 16px; }
.pod-row p { font-family: var(--f-mono); font-size: 11px; color: var(--on-ink-mute); }
.pod-row ul { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.pod-row li { height: 28px; border-radius: 5px; background: #0a0908; border: 1px solid var(--rule-ink); transition: background-color 260ms, box-shadow 260ms, border-color 260ms; }
.pod-row li.on { background: var(--c-toon); border-color: var(--c-toon); box-shadow: 0 0 12px color-mix(in srgb, var(--c-toon) 50%, transparent); }
.pod-row li.boot { background: color-mix(in srgb, var(--c-drama) 60%, transparent); border-color: var(--c-drama); animation: blink 0.4s steps(2) infinite; }
.pod-q { display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--f-mono); font-size: 11px; color: var(--on-ink-mute); }
.pod-q i { height: 8px; border-radius: 8px; background: #0a0908; border: 1px solid var(--rule-ink); position: relative; overflow: hidden; }
.pod-q i::after { content: ""; position: absolute; inset: 0; background: var(--signal); transform-origin: left; transform: scaleX(var(--q, 0)); transition: transform 400ms var(--ease); }
.pod-q b { color: var(--paper); text-align: right; font-weight: 500; }
.pod-note { margin-top: 16px; font-size: 13px !important; }

/* ═════════ 피드백 ═════════ */
.feedback { padding: clamp(96px, 12vw, 180px) var(--pad); }
.dash { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 12px; }
.dash-card { padding: 24px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--rule-paper); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-note { font-size: 13.5px; color: var(--on-paper-mute); line-height: 1.6; margin-top: auto; }
.fun-ring { position: relative; width: 168px; aspect-ratio: 1; margin: 0 auto; }
.fun-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fr-track { fill: none; stroke: var(--paper-3); stroke-width: 10; }
.fr-val { fill: none; stroke: var(--signal); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s var(--ease); }
.fun-ring p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.fun-ring b { font-family: var(--f-lat); font-weight: 900; font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums; }
.fun-ring span { font-family: var(--f-mono); font-size: 11px; color: var(--on-paper-mute); }
.fun-w { display: grid; gap: 8px; }
.fun-w li { display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 10px; font-size: 13px; }
.fun-w i { height: 8px; border-radius: 8px; background: var(--paper-3); position: relative; overflow: hidden; }
.fun-w i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease); }
.dash.in .fun-w i::after { transform: scaleX(calc(var(--w) / 40)); }
.fun-w b { font-family: var(--f-mono); font-weight: 500; text-align: right; }
.sig { display: grid; gap: 8px; align-content: start; min-height: 336px; }
.sig li { display: grid; grid-template-columns: 6px 1fr; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule-paper); animation: sigin 420ms var(--ease) both; }
.sig li::before { content: ""; border-radius: 3px; background: var(--t); }
.sig li p { font-size: 13.5px; line-height: 1.45; }
.sig li .s-in { font-family: var(--f-mono); font-size: 11px; color: var(--on-paper-mute); margin-bottom: 4px; display: flex; justify-content: space-between; gap: 8px; }
.sig li .s-out { font-weight: 600; }
.sig li .s-out::before { content: "→ "; color: var(--signal); }
.sig li.fade::before { opacity: 0.35; }
.sig li.fade .s-out { color: var(--on-paper-mute); font-weight: 500; }
@keyframes sigin { from { opacity: 0; transform: translateY(-14px) scale(0.98); } }
.delta { display: grid; gap: 14px; }
.delta li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13.5px; }
.delta li span { color: var(--on-paper-mute); }
.delta li b { font-family: var(--f-mono); font-weight: 500; font-size: 13px; text-align: right; }
.dl-bar { grid-column: 1 / -1; height: 10px; border-radius: 10px; background: var(--paper-3); position: relative; overflow: hidden; }
.dl-bar i { position: absolute; inset: 0; }
.dl-bar i::before, .dl-bar i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; transition: width 1.1s var(--ease); width: 0; }
.dl-bar i::before { background: var(--signal); z-index: 0; }
.dl-bar i::after { background: #9d958a; z-index: 1; }
.dash.in .dl-bar i::after { width: calc(var(--a) * 1%); }
.dash.in .dl-bar i::before { width: calc(var(--b) * 1%); transition-delay: 500ms; }
.dl-bar--down i::before { z-index: 2; }

/* ═════════ 기록 ═════════ */
.record { padding: clamp(96px, 12vw, 180px) var(--pad); max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }
.ledger { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule-ink); }
.ledger div { padding: 26px 20px 30px 0; border-bottom: 1px solid var(--rule-ink); }
.ledger dt { font-size: 14px; color: var(--on-ink-mute); margin-bottom: 8px; }
.ledger dd { font-family: var(--f-lat); font-weight: 900; font-size: clamp(44px, 5vw, 80px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.005em; }
.unit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.unit li { display: grid; gap: 4px; }
.unit b { white-space: nowrap; font-family: var(--f-mono); font-weight: 700; font-size: 20px; color: var(--signal); }
.unit span { font-size: 14px; color: var(--on-ink-mute); }

/* ═════════ 마무리 ═════════ */
.outro { padding: clamp(80px, 10vw, 160px) var(--pad); text-align: center; border-top: 1px solid var(--rule-ink); display: grid; justify-items: center; gap: 36px; }
.outro-title { font-family: var(--f-kr); font-weight: 800; font-size: clamp(36px, 6vw, 96px); line-height: 1.1; letter-spacing: -0.045em; }
.outro-title span { display: block; text-wrap: balance; }
.outro-title:lang(en) { letter-spacing: -0.03em; }

/* ═════════ 회사 정보 (vanilla 와 같은 톤) ═════════ */
.contact { background: var(--paper); color: var(--ink); padding: clamp(72px, 8vw, 120px) var(--pad) 40px; }
.corp-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.corp { padding: clamp(24px, 3vw, 44px); border-radius: 18px; background: var(--paper-2); border: 1px solid var(--rule-paper); display: flex; flex-direction: column; gap: 14px; }
.corp-mark { font-family: var(--f-lat); font-weight: 900; font-size: clamp(40px, 4vw, 60px); line-height: 1; }
.corp-sub { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--on-paper-mute); }
.corp-name { font-weight: 700; }
.corp-desc { color: var(--on-paper-mute); font-size: 15px; }
.corp-info { display: grid; gap: 10px; border-top: 1px solid var(--rule-paper); padding-top: 16px; }
.corp-info div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; font-size: 14.5px; }
.corp-info dt { color: var(--on-paper-mute); }
.corp-info dd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mail-addr { font-weight: 700; display: inline-flex; align-items: center; min-height: 40px; }
.mail-copy { font-size: 13px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-paper); background: transparent; cursor: pointer; }
.mail-copy:hover { background: var(--ink); color: var(--paper); }
.corp-links, .corp-asks { display: flex; flex-wrap: wrap; gap: 8px; }
.corp-asks { margin-top: auto; padding-top: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule-paper); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: background-color 150ms, color 150ms; }
.pill:hover { background: var(--ink); color: var(--paper); }
.pill--lg { padding: 12px 20px; font-size: 15px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill--lg:hover { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.foot { max-width: var(--max); margin: 48px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--on-paper-mute); border-top: 1px solid var(--rule-paper); padding-top: 20px; }

/* ═════════ 반응형 ═════════ */
@media (max-width: 1280px) {
  .engines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto; }
  .wall { max-width: 720px; width: 100%; justify-self: center; }
  .wall-grid { height: auto; aspect-ratio: 1; }
  .studio { grid-template-columns: 1fr; grid-template-areas: "head" "stage" "body" "try"; }
  .try-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-body { grid-template-columns: 1fr; }
  .metrics { border-left: 0; padding-left: 0; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-ink); padding-top: 24px; }
  [data-theme="paper"] .metrics { border-color: var(--rule-paper); }
  .forge { grid-template-columns: 1fr; }
  .same { grid-template-columns: 1fr; }
  .fm-frame { max-width: 420px; }
  .engine-lower { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr 1fr; }
  .dash-delta { grid-column: 1 / -1; }
  .loop { height: auto; }
  .loop-stage { position: relative; height: auto; min-height: 0; grid-template-columns: 1fr; padding-block: 96px; }
  .loop-viz { width: min(100%, 520px); grid-row: 1; }
  .loop-steps { min-height: 0; display: grid; gap: 28px; }
  .loop-step { position: relative; opacity: 1; transform: none; pointer-events: auto; border-top: 1px solid var(--rule-ink); padding-top: 22px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .try-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .try-name { font-size: 17px; }
  .try-line { font-size: 13.5px; }
  .try-go { font-size: 13px; padding: 7px 13px; }
  .section-head { grid-template-columns: 1fr; margin-bottom: 40px; }
    .wall-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: 3 / 4; }
  .same-body { grid-template-columns: 1fr; }
  .same-cuts { grid-template-columns: repeat(4, 1fr); }
  .tile--big { grid-column: span 2; grid-row: span 2; }
  .tile:nth-child(n + 10) { display: none; }
  .ticker { grid-template-columns: 1fr; gap: 6px; }
  .ticker-list li { font-size: 12px; }
  .crew-stats { grid-template-columns: 1fr; }
  .mate { min-height: 0; padding: 16px 14px 14px; }
  .mate-name { font-size: 19px; }
  .mate-formula { font-size: 13px; }
  .switcher { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .switcher::-webkit-scrollbar { display: none; }
  .switcher a { flex: none; height: 40px; padding: 0 14px; font-size: 15px; }
  .stage { aspect-ratio: auto; height: 152vw; max-height: 700px; }
  /* 좁은 화면 스테이지 — 글자를 키우고 덜 중요한 칸은 접는다 */
  .sc-bubbles li { font-size: 11.5px; }
  .sc-seed-line { font-size: 15px; }
  .sc-chips li { font-size: 10.5px; }
  .sc-ship li { font-size: 10px; }
  .sd-grid { grid-template-columns: 1.1fr 0.9fr; }
  .sd-lines li { grid-template-columns: 18px 1fr; font-size: 11px; }
  .sd-lines li span:nth-child(2) { display: none; }
  .sd-sub { font-size: 13px; }
  .st-steps li { font-size: 11px; }
  .st-ruler { display: none; }
  .st-side { grid-template-rows: 1fr; }
  .st-readers li span { font-size: 10.5px; }
  .balloon { font-size: 10.5px; }
  .sn-text { font-size: 12.5px; }
  .sn-box li { font-size: 11px; }
  .cf-kinds li, .cf-ratios li { font-size: 11px; }
  .cf-frames, .cf-score { font-size: 11px; }
  .feats > div:nth-child(n + 4) { display: none; }
  .feats.open > div { display: block; }
  .feats-more { display: inline-flex; align-items: center; justify-self: start; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid currentColor; background: transparent; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: -8px; }
  .crew { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--pad)); padding: 0 var(--pad) 8px; scrollbar-width: none; }
  .crew::-webkit-scrollbar { display: none; }
  .crew .mate { flex: 0 0 72%; scroll-snap-align: start; }
  .sc-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; }
  .sc-seed { grid-column: 1 / -1; grid-row: 1; }
  .sc-card { grid-column: 1; grid-row: 2; }
  .sc-unlock { grid-column: 1; grid-row: 3; }
  .sc-chat { grid-column: 2; grid-row: 2 / span 2; }
  .sc-ship { grid-template-columns: repeat(3, 1fr); }
  .sd-grid { grid-template-columns: 1fr 1fr; }
  .sd-judge { width: auto; left: 12px; right: 12px; }
  .st-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
  .st-steps { grid-column: 1 / -1; grid-template-columns: repeat(4, auto); justify-content: start; gap: 4px 10px; }
  .st-phone { grid-row: 2; }
  .st-side { grid-row: 2; }
  .sn-grid { grid-template-columns: 1fr; grid-template-rows: 1.4fr auto; }
  .sn-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .sn-filter { display: none; }
  .cf-grid { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .cf-side { grid-template-columns: 1fr 1fr; }
  .cf-kinds, .cf-ratios { grid-column: 1 / -1; }
  .feats { grid-template-columns: 1fr; gap: 22px; }
  .metrics dd { font-size: 34px; }
  .engines { grid-template-columns: 1fr; }
  .slot-reels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slot, .pods { padding: 20px; }
  .dash { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr 1fr; }
  .unit { grid-template-columns: 1fr 1fr; }
  .corp-grid { grid-template-columns: 1fr; }
  .corp-info div { grid-template-columns: 1fr; gap: 2px; }
  .ring-nodes li { min-width: 0; padding: 6px 9px; }
  .ring-nodes b { font-size: 15px; }
  .ring-nodes span { font-size: 10.5px; }
}

/* 움직임을 줄이도록 설정한 경우 — 전부 정지 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-rise] { opacity: 1; transform: none; }
}

/* ═════════ 06 Game — 원작이 끝까지 플레이되는 게임이 된다 ═════════
   플레이어는 실제 게임 스튜디오 화면(문서 170 §6)의 문법을 그대로 옮긴다 — 장 + 얼굴 링 HUD · 유리 대사창 + 퀵 메뉴 ·
   글자 한 자씩 · 숨죽인 선택지 · 고르면 피어난다. 장르(연애 · 공포 · 추리)는 옷(색 · 모서리 · 글꼴 · 장식)만 바꾼다. */
.gm-map { display: grid; gap: 6px; margin-top: 22px; max-width: 460px; }
.gm-map div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--rule-ink); transition: border-color 200ms, background-color 200ms; }
.gm-map dt { font-size: 14px; color: var(--on-ink-mute); }
.gm-map dd { font-family: var(--f-kr); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.gm-map dd::before { content: "→"; color: var(--t); font-family: var(--f-mono); }
.gm-map div.on { border-color: var(--t); background: color-mix(in srgb, var(--t) 9%, transparent); }
.gm-map div.on dt { color: var(--paper); }

.gm-grid { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 12px; padding: 12px; min-height: 0; }
.gm-play { height: 100%; aspect-ratio: 9 / 16; min-height: 0; }
.gp {
  --glass: rgba(255, 247, 250, 0.8); --ink: #4a1d36; --ink2: #8a5470; --edge: rgba(232, 140, 170, 0.75); --acc: #e5517f;
  --chip: linear-gradient(100deg, #f58cad, #e5517f); --chip-ink: #fff; --r: 3.2cqi; --pill: 999px; --lf: "Noto Serif KR", "Nanum Myeongjo", serif; --orn: "♡";
  position: relative; width: 100%; height: 100%; overflow: clip; border-radius: 12px; background: #000;
  container-type: inline-size; isolation: isolate; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.gp[data-g="horror"] { --glass: rgba(20, 6, 9, 0.84); --ink: #f3e6e4; --ink2: #b89c99; --edge: rgba(200, 32, 44, 0.8); --acc: #ff3b3b; --chip: #a5111b; --r: 0.6cqi; --pill: 0.6cqi; --lf: var(--f-body); --orn: "†"; }
.gp[data-g="mystery"] { --glass: rgba(9, 15, 32, 0.86); --ink: #eef0f6; --ink2: #a9b0c6; --edge: rgba(216, 176, 90, 0.85); --acc: #e3bb62; --chip: linear-gradient(100deg, #e3bb62, #b8893a); --chip-ink: #141a2c; --r: 1.4cqi; --pill: 1.4cqi; --orn: "◆"; }
.gp > * { position: absolute; }
.gp-bg { inset: 0; z-index: 0; overflow: hidden; transition: filter 400ms var(--ease); }
.gp-bg img { width: 100%; height: 100%; object-fit: cover; animation: gpBgIn 1.1s var(--ease) both, gpDrift 32s 1.1s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes gpBgIn { from { filter: blur(12px) brightness(1.25); transform: scale(1.1); } to { filter: none; transform: scale(1.03); } }
@keyframes gpDrift { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, -1%); } }
.gp-sprites { inset: 0; z-index: 1; transition: filter 400ms var(--ease); }
.gp-spr { position: absolute; top: var(--top, 13%); height: var(--h, 118%); left: var(--x, 50%); transform: translateX(-50%); transition: left 600ms var(--ease), top 600ms var(--ease), height 600ms var(--ease); }
.gp-spr .br { height: 100%; transform-origin: 50% 55%; animation: gpBreath 4.2s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.gp-spr .fo { height: 100%; transition: transform 500ms var(--ease), filter 500ms var(--ease); }
.gp-spr img { height: 100%; width: auto; max-width: none; transform: scaleX(var(--flip, 1)); filter: var(--tone, none); animation: gpSprIn 0.9s var(--ease) both; }
.gp-spr.speak .fo { transform: scale(1.025); }
.gp-spr.listen .fo { transform: scale(0.985); filter: brightness(0.8) blur(0.5px); }
.gp-spr.out { opacity: 0; transition: opacity 300ms; }
@keyframes gpSprIn { from { opacity: 0; filter: blur(8px) brightness(1.4); transform: scaleX(var(--flip, 1)) translateY(2%); } }
@keyframes gpBreath { to { transform: scale(1.008); } }
.gp[data-g="horror"] .gp-spr img { --tone: brightness(0.72) saturate(0.7) sepia(0.12) hue-rotate(-12deg); }
.gp[data-g="mystery"] .gp-spr img { --tone: brightness(0.82) saturate(0.85) hue-rotate(6deg); }
.gp-haze { inset: 0; z-index: 2; pointer-events: none; display: none; }
.gp[data-g="romance"] .gp-haze { display: block; }
.gp-haze i { position: absolute; bottom: -10%; left: calc(var(--k) * 12.5%); width: calc(3cqi + var(--k) * 0.5cqi); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 244, 0.9), rgba(255, 190, 215, 0)); mix-blend-mode: screen; animation: gpRise calc(7s + var(--k) * 0.9s) linear infinite; animation-delay: calc(var(--k) * -1.3s); }
@keyframes gpRise { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-120cqi); opacity: 0; } }
.gp::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--fear, 0); transition: opacity 600ms; background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(60, 0, 4, 0.85) 100%); }
.gp.hush .gp-bg, .gp.hush .gp-sprites { filter: blur(1.2px) brightness(0.72); }

.gp-hud { left: 4%; right: 4%; top: 3%; z-index: 4; display: flex; justify-content: space-between; align-items: flex-start; gap: 2cqi; }
.gp-hl { display: grid; gap: 1.6cqi; justify-items: start; }
.gp-ch, .gp-hr span, .gp-meter { display: inline-flex; align-items: center; gap: 1.6cqi; padding: 1cqi 2.6cqi 1cqi 1cqi; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); color: var(--ink); font-size: max(9px, 2.9cqi); font-weight: 600; backdrop-filter: blur(8px); white-space: nowrap; }
.gp-ch b { padding: 0.3cqi 1.8cqi; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-family: "Noto Serif KR", serif; font-style: italic; font-weight: 500; font-size: max(9px, 2.6cqi); }
.gp-hr { display: flex; gap: 1.4cqi; }
.gp-hr span { padding: 1cqi 2.4cqi; }
.gp-faces { display: flex; gap: 2cqi; }
.gp-faces:empty { display: none; }
.gp-faces li { position: relative; min-width: 11cqi; display: grid; justify-items: center; gap: 0.6cqi; font-size: max(9px, 2.4cqi); font-weight: 700; color: var(--ink); }
.gp-face { position: relative; width: 11cqi; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 0.5cqi var(--glass), 0 0 0 calc(0.5cqi + 1px) var(--edge); }
.gp-face img { position: absolute; width: 270%; max-width: none; left: -85%; top: 1%; }
.gp-faces span { white-space: nowrap; padding: 0.2cqi 1.4cqi; border-radius: 999px; background: var(--glass); }
.gp-faces li.beat .gp-face { animation: gpBeat 0.7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gpBeat { 40% { transform: scale(1.18); } }
.gp-meter { padding: 1cqi 2.6cqi; }
.gp-meter[hidden] { display: none; }
.gp-meter i { width: 14cqi; height: 1.2cqi; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.gp-meter b { display: block; height: 100%; width: 100%; background: var(--acc); transform-origin: left; transform: scaleX(var(--v, 1)); transition: transform 700ms var(--ease); }
.gp-meter em { font-style: normal; font-variant-numeric: tabular-nums; min-width: 3.5cqi; text-align: right; }

.gp-box { left: 4%; right: 4%; bottom: 3%; z-index: 3; min-height: 27%; padding: 7.5cqi 5.5cqi 2.6cqi; border-radius: var(--r); background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 0.6cqi rgba(255, 255, 255, 0.06); display: grid; grid-template-rows: 1fr auto; }
.gp-box::before { content: var(--orn); position: absolute; top: -1.9cqi; left: 50%; transform: translateX(-50%); font-size: 3cqi; line-height: 1; color: var(--acc); }
.gp-name { position: absolute; top: -3.4cqi; left: 4.5cqi; padding: 1cqi 3.4cqi; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-family: var(--lf); font-weight: 600; font-size: max(9px, 3.6cqi); box-shadow: 0 1cqi 3cqi -1cqi rgba(0, 0, 0, 0.35); }
.gp-name:empty { display: none; }
.gp-name.in { animation: gpName 480ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gpName { from { transform: translateY(40%) scale(0.85); opacity: 0; } }
.gp-line { font-family: var(--lf); font-size: max(9px, 4.3cqi); line-height: 1.7; color: var(--ink); min-height: 3.4em; letter-spacing: -0.01em; }
.gp-line.think { color: var(--ink2); }
.gp-line.dim { opacity: 0.55; }
.gp-line .ch { animation: gpCh 320ms var(--ease) both; }
@keyframes gpCh { from { opacity: 0; filter: blur(3px); } }
.gp-quick { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.6cqi 2.8cqi; border-top: 1px solid color-mix(in srgb, var(--edge) 45%, transparent); padding-top: 1.6cqi; margin-top: 1cqi; font-size: max(9px, 2.5cqi); color: var(--ink2); }

.gp-choices { left: 7%; right: 7%; bottom: calc(3% + 30%); z-index: 5; display: grid; gap: 2.6cqi; }
.gp-choices li { position: relative; padding: 2.8cqi 7cqi; border-radius: var(--pill); background: var(--glass); border: 1px solid var(--edge); color: var(--ink); font-family: var(--lf); font-weight: 600; font-size: max(9px, 3.9cqi); text-align: center; backdrop-filter: blur(12px); animation: gpOpt 560ms var(--ease) both; animation-delay: calc(var(--i) * 90ms); transition: transform 300ms var(--ease), box-shadow 300ms, opacity 300ms, filter 300ms; }
.gp-choices li::before, .gp-choices li::after { content: var(--orn); position: absolute; top: 50%; transform: translateY(-50%); color: var(--acc); font-size: 0.8em; transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.gp-choices li::before { left: 3.2cqi; }
.gp-choices li::after { right: 3.2cqi; }
.gp-choices li.hov { transform: translateY(-6%); box-shadow: 0 0 0 1px var(--acc), 0 2cqi 6cqi -1cqi color-mix(in srgb, var(--acc) 60%, transparent); }
.gp-choices li.hov::before, .gp-choices li.hov::after { transform: translateY(-50%) scale(1.4); }
.gp-choices li.pick { animation: gpPick 560ms cubic-bezier(.34, 1.56, .64, 1) both; background: var(--chip); color: var(--chip-ink); }
.gp-choices li.pick::before, .gp-choices li.pick::after { color: currentColor; }
.gp-choices li.gone { opacity: 0; filter: blur(4px); transform: scale(0.96); }
@keyframes gpOpt { from { opacity: 0; transform: translateY(40%); filter: blur(5px); } }
@keyframes gpPick { 40% { transform: scale(1.07); } to { transform: scale(1.02); } }
.gp-timer { top: 22%; left: 50%; z-index: 5; transform: translateX(-50%); display: none; align-items: center; gap: 2cqi; padding: 1.2cqi 3cqi; border-radius: var(--pill); background: var(--glass); border: 1px solid var(--edge); color: var(--ink); font-size: max(9px, 3cqi); font-weight: 700; white-space: nowrap; }
.gp-timer.on { display: flex; }
.gp-timer i { width: 16cqi; height: 1cqi; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.gp-timer i::before { content: ""; display: block; height: 100%; background: var(--acc); transform-origin: left; transform: scaleX(var(--t, 1)); }
.gp-pop { top: 42%; left: 50%; z-index: 7; transform: translateX(-50%); padding: 1.6cqi 4cqi; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); color: var(--ink); font-weight: 700; font-size: max(9px, 3.4cqi); white-space: nowrap; opacity: 0; pointer-events: none; }
.gp-pop.on { animation: gpPop 1.9s var(--ease) both; }
.gp-pop b { color: var(--acc); }
@keyframes gpPop { 0% { opacity: 0; transform: translate(-50%, 30%) scale(0.85); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -40%); } }
.gp-burst { left: 50%; top: 55%; z-index: 7; pointer-events: none; }
.gp-burst i { position: absolute; font-style: normal; color: var(--acc); font-size: max(10px, 4.6cqi); animation: gpBurst 900ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes gpBurst { from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(0.4); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-24cqi) scale(1); opacity: 0; } }
.gp-flash { inset: 0; z-index: 10; pointer-events: none; background: #fff; opacity: 0; }
.gp-flash.go { animation: gpFlash 420ms ease-out; }
.gp[data-g="horror"] .gp-flash { background: #ff2a2a; }
@keyframes gpFlash { from { opacity: 0.75; } to { opacity: 0; } }
.gp.shake .gp-bg, .gp.shake .gp-sprites { animation: gpShake 420ms cubic-bezier(.36, .07, .19, .97); }
@keyframes gpShake { 20%, 60% { transform: translateX(-1.6%); } 40%, 80% { transform: translateX(1.6%); } }

.gp-cut { inset: 0; z-index: 6; background: #000; opacity: 0; visibility: hidden; transition: opacity 300ms, visibility 300ms; }
.gp-cut.on { opacity: 1; visibility: visible; }
.gp-cut video { width: 100%; height: 100%; object-fit: cover; }
.gp-cap { left: 6%; right: 6%; bottom: 14%; text-align: center; color: #fff; font-weight: 700; font-size: max(9px, 4cqi); text-shadow: 0 0.4cqi 2cqi rgba(0, 0, 0, 0.9); }
.gp-skip, .gp-cut-k { position: absolute; font-size: max(9px, 2.5cqi); padding: 0.8cqi 2.4cqi; border-radius: 999px; color: #fff; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.25); }
.gp-skip { right: 4%; bottom: 4%; }
.gp-cut-k { left: 4%; top: 4%; font-family: var(--f-mono); letter-spacing: 0.08em; }

.gp-chap { inset: 0; z-index: 8; display: grid; place-content: center; text-align: center; gap: 2cqi; background: rgba(5, 5, 8, 0.72); color: #fff; opacity: 0; visibility: hidden; transition: opacity 400ms, visibility 400ms; pointer-events: none; }
.gp[data-g="romance"] .gp-chap { background: rgba(255, 246, 250, 0.72); color: #4a1d36; }
.gp-chap.on { opacity: 1; visibility: visible; }
.gp-chap-k { font-family: "Noto Serif KR", serif; font-style: italic; font-size: max(9px, 4cqi); color: var(--acc); letter-spacing: 0.2em; }
.gp-chap-t { font-family: var(--lf); font-weight: 600; font-size: max(11px, 6.2cqi); padding: 0 8cqi; line-height: 1.35; }
.gp-chap.on .gp-chap-k { animation: gpTrack 1.2s var(--ease) both; }
.gp-chap.on .gp-chap-t { animation: gpOpt 800ms 200ms var(--ease) both; }
@keyframes gpTrack { from { letter-spacing: 0.9em; opacity: 0; } }

.gp-title { inset: 0; z-index: 9; display: flex; flex-direction: column; justify-content: flex-end; gap: 2cqi; padding: 8cqi 7cqi 10cqi; color: #fff; background: linear-gradient(180deg, transparent 30%, rgba(8, 4, 8, 0.86) 78%); opacity: 0; visibility: hidden; transition: opacity 450ms, visibility 450ms; }
.gp-title.on { opacity: 1; visibility: visible; }
.gp-title-k { font-family: var(--f-mono); font-size: max(9px, 2.4cqi); letter-spacing: 0.28em; color: var(--acc); }
.gp-title-t { font-family: var(--lf); font-weight: 600; font-size: max(13px, 8cqi); line-height: 1.25; letter-spacing: -0.02em; text-shadow: 0 1cqi 4cqi rgba(0, 0, 0, 0.6); margin-bottom: 3cqi; }
.gp-menu { display: grid; gap: 1.8cqi; }
.gp-menu li { display: flex; justify-content: space-between; align-items: center; padding: 2.2cqi 4cqi; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, 0.28); font-size: max(9px, 3.4cqi); font-weight: 700; background: rgba(255, 255, 255, 0.06); }
.gp-menu small { font-family: var(--f-mono); font-size: max(9px, 2.1cqi); letter-spacing: 0.16em; opacity: 0.7; font-weight: 500; }
.gp-menu li.on { background: var(--chip); color: var(--chip-ink); border-color: transparent; }
.gp-menu li.press { animation: gpPick 420ms cubic-bezier(.34, 1.56, .64, 1); }

.gp-ends { inset: 0; z-index: 9; display: flex; flex-direction: column; justify-content: center; gap: 3cqi; padding: 8cqi 6cqi; background: rgba(6, 5, 8, 0.82); backdrop-filter: blur(6px); color: #fff; opacity: 0; visibility: hidden; transition: opacity 450ms, visibility 450ms; }
.gp-ends.on { opacity: 1; visibility: visible; }
.gp-ends-k { font-family: var(--f-mono); font-size: max(9px, 2.8cqi); letter-spacing: 0.3em; text-align: center; color: var(--acc); }
.gp-ends ol { display: grid; gap: 1.8cqi; }
.gp-ends li { display: grid; grid-template-columns: 15cqi minmax(0, 1fr) auto; align-items: center; gap: 2.4cqi; padding: 2cqi 3cqi; border-radius: 1.6cqi; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); font-size: max(9px, 3.1cqi); opacity: 0.35; transition: opacity 260ms, background-color 260ms; }
.gp-ends li b { font-family: var(--f-lat); font-weight: 800; letter-spacing: 0.06em; font-size: 1.05em; text-align: center; padding: 0.3cqi 0; border-radius: 0.8cqi; color: #111; background: var(--rk, #888); }
.gp-ends li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-ends li em { font-style: normal; font-family: var(--f-mono); font-size: max(9px, 2.6cqi); color: #c9c1b5; font-variant-numeric: tabular-nums; }
.gp-ends li.got { opacity: 1; background: rgba(255, 255, 255, 0.1); animation: gpPick 420ms cubic-bezier(.34, 1.56, .64, 1); }
.rk-true { --rk: #f2c94c; } .rk-good { --rk: #f58cad; } .rk-normal { --rk: #c9c1b5; } .rk-bad { --rk: #d9534f; }

.gm-side { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
.gm-genres { display: flex; gap: 4px; }
.gm-genres li { flex: 1; text-align: center; font-size: clamp(9.5px, 1.5cqi, 12px); font-weight: 700; padding: 5px 6px; border-radius: 999px; border: 1px solid rgba(238, 232, 220, 0.16); color: #8f877b; transition: all 160ms; }
.gm-genres li.on { background: var(--t); border-color: var(--t); color: var(--ink); }
.gm-graph, .gm-sim { border-radius: 10px; background: #151412; padding: 10px 12px; min-height: 0; overflow: hidden; display: grid; gap: 8px; align-content: start; }
.gm-graph { align-content: space-between; }
.gm-nodes { display: grid; grid-template-columns: repeat(10, minmax(0, 15px)); justify-content: space-between; gap: 7px 4px; padding: 6px 0; }
.gm-nodes i { aspect-ratio: 1; border-radius: 3px; background: #24221f; transition: background-color 160ms, transform 200ms var(--ease); }
.gm-nodes i.on { background: color-mix(in srgb, var(--t) 55%, #24221f); }
.gm-nodes i.walk { background: var(--t); transform: scale(1.15); box-shadow: 0 0 8px var(--t); }
.gm-nodes i.end { border-radius: 50%; }
.gm-nodes i.end.on { background: var(--rk, var(--t)); }
.gm-count { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gm-count dt { font-size: clamp(9px, 1.35cqi, 11px); color: #8f877b; }
.gm-count dd { font-family: var(--f-lat); font-weight: 900; font-size: clamp(18px, 3.4cqi, 30px); line-height: 1; font-variant-numeric: tabular-nums; }
.gm-sim ol { display: grid; gap: 5px; }
.gm-sim li { display: grid; grid-template-columns: minmax(0, 1fr) 30% 3.4em; align-items: center; gap: 8px; font-size: clamp(9px, 1.35cqi, 11.5px); color: #c9c1b5; }
.gm-sim li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-sim li i { height: 6px; border-radius: 6px; background: rgba(238, 232, 220, 0.08); overflow: hidden; }
.gm-sim li i::before { content: ""; display: block; height: 100%; background: var(--rk, var(--t)); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform 700ms var(--ease); }
.gm-sim li b { font-family: var(--f-mono); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.gm-ok { font-size: clamp(9px, 1.4cqi, 12px); color: #8f877b; transition: color 200ms; }
.gm-ok.on { color: var(--t); }
.gm-ok.on::before { content: "✓ "; }

/* ═════════ 앱 ondo — 밝은 회백 + 레드 한 점(ondo 디자인 시스템 v2.1) ═════════ */
.ondo { --ondo-bg: #f2f1ef; background: var(--ondo-bg); color: #111; padding: clamp(96px, 12vw, 180px) var(--pad); }
.ondo .eyebrow { color: #c4001f; display: flex; align-items: center; gap: 10px; }
.ondo-logo { width: 28px; height: 28px; border-radius: 8px; }
.ondo-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; max-width: var(--max); margin: 0 auto 64px; }
.ondo .section-lede { color: #5f5a55; }
.ondo-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; font-size: 14px; color: #5f5a55; }
.btn--ondo { background: var(--ondo-deep); color: #fff; border-color: var(--ondo-deep); }
.btn--ondo:hover { background: #b80021; border-color: #b80021; }
.btn--ondo-line { background: transparent; color: #a3001b; border-color: #a3001b; }
.btn--ondo-line:hover { background: var(--ondo-deep); color: #fff; }
.ondo-stage { display: grid; grid-template-columns: minmax(0, 1fr) 316px minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: center; max-width: var(--max); margin: 0 auto; }
.od-k { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #6e6a66; margin-bottom: 14px; }
.od-k span, .od-k b { color: #111; font-weight: 700; }

.od-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.od-cards li { position: relative; background: #fff; border-radius: 22px; padding: 8px 8px 12px; transition: transform 400ms var(--ease), box-shadow 300ms, opacity 300ms; opacity: 0; transform: translateY(14px); }
.od-cards li.in { opacity: 1; transform: none; }
.od-cards li::before, .od-cards li::after { content: ""; position: absolute; top: calc(8px + 75% * 0.98); width: 16px; height: 16px; border-radius: 50%; background: var(--ondo-bg); }
.od-cards li::before { left: -8px; } .od-cards li::after { right: -8px; }
.od-cards img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; }
.od-cards .ai { position: absolute; left: 14px; top: 14px; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(17, 17, 17, 0.62); color: #fff; }
.od-cards p { padding: 10px 4px 0; border-top: 2px dashed #e7e4e0; margin-top: 10px; font-size: 13px; line-height: 1.45; color: #6e6a66; }
.od-cards p b { display: block; color: #111; font-size: 15px; }
.od-cards em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #ffe8ec; color: #c4001f; }
.od-cards li.pick { box-shadow: 0 0 0 3px var(--c-ondo); transform: translateY(-6px); }
.od-cards li.dim img { filter: grayscale(0.7) opacity(0.55); } /* 글자는 흐리지 않는다(대비 AA) */
.od-send { margin-top: 16px; display: inline-flex; padding: 12px 22px; border-radius: 999px; background: #fff; color: #111; font-weight: 700; font-size: 15px; transition: background-color 200ms, color 200ms, transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.od-send.go { background: var(--ondo-deep); color: #fff; transform: scale(1.05); }
.od-send.done { background: #111; color: #fff; }
.od-note { margin-top: 10px; font-size: 13px; color: #6e6a66; }

.od-phone { width: 316px; aspect-ratio: 9 / 19; padding: 10px; border-radius: 48px; background: #111; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.45); }
.od-screen { position: relative; height: 100%; border-radius: 39px; overflow: hidden; background: var(--ondo-bg); display: flex; flex-direction: column; }
.od-status { display: flex; justify-content: space-between; padding: 12px 24px 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.od-status span { font-size: 10px; letter-spacing: 0.05em; color: #6e6a66; }
.od-top { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid #e7e4e0; background: #fff; }
.od-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.od-name { font-weight: 800; font-size: 15px; line-height: 1.2; }
.od-state { font-size: 11.5px; color: #6e6a66; line-height: 1.3; }
.od-temp { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: #ffe8ec; color: #c4001f; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.od-temp i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ondo); }
.od-temp.up { animation: odUp 700ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes odUp { 40% { transform: scale(1.18); } }
.od-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 12px; overflow: hidden; min-height: 0; }
.od-chat li { max-width: 78%; font-size: 13.5px; line-height: 1.45; padding: 8px 12px; border-radius: 18px; animation: odIn 380ms var(--ease) both; white-space: pre-line; }
@keyframes odIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.od-chat .them { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; }
.od-chat .me { align-self: flex-end; background: var(--ondo-deep); color: #fff; font-weight: 600; border-bottom-right-radius: 6px; }
.od-chat .meta { align-self: flex-end; background: none; padding: 0 4px; font-size: 10.5px; color: #6e6a66; animation: none; }
.od-chat .meta.read { color: #c4001f; font-weight: 700; }
.od-chat .sys { align-self: center; background: #e7e4e0; color: #5f5a55; font-size: 11px; padding: 3px 10px; }
.od-chat .photo { padding: 4px; background: #fff; position: relative; width: 62%; }
.od-chat .photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.od-chat .photo span { position: absolute; left: 10px; top: 10px; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(17, 17, 17, 0.62); color: #fff; }
.od-chat .typing { display: flex; gap: 4px; padding: 11px 14px; }
.od-chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: #a8a39e; animation: odDot 1s infinite; }
.od-chat .typing i:nth-child(2) { animation-delay: 0.15s; } .od-chat .typing i:nth-child(3) { animation-delay: 0.3s; }
.od-chat .typing.stop i { animation: none; opacity: 0.4; }
@keyframes odDot { 30% { transform: translateY(-4px); background: #6e6a66; } }
.od-input { display: flex; align-items: center; justify-content: space-between; margin: 6px 12px 16px; padding: 10px 8px 10px 16px; border-radius: 999px; background: #fff; font-size: 13px; color: #a8a39e; }
.od-input i { width: 28px; height: 28px; border-radius: 50%; background: var(--ondo-deep); }
.od-push { position: absolute; z-index: 3; left: 10px; right: 10px; top: 36px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.35); transform: translateY(-140%); transition: transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.od-push.on { transform: none; }
.od-push img { width: 20px; height: 20px; border-radius: 6px; }
.od-push p { font-size: 12.5px; line-height: 1.35; }
.od-push b { display: block; font-size: 11px; color: #6e6a66; }
.od-match { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--ondo-deep); color: #fff; text-align: center; opacity: 0; visibility: hidden; transition: opacity 400ms, visibility 400ms; }
.od-match.on { opacity: 1; visibility: visible; }
.od-match p { font-weight: 700; font-size: 15px; }
.od-match p span { font-family: var(--f-lat); font-size: 28px; font-weight: 900; }
.od-match-t { font-size: 22px !important; font-weight: 800 !important; }
.od-thermo { position: relative; width: 120px; height: 90px; }
.od-thermo i { position: absolute; bottom: 0; width: 22px; height: 90px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.od-thermo i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #fff; border-radius: 999px; }
.od-thermo i:first-child { left: 0; } .od-thermo i:last-child { right: 0; }
.od-match.on .od-thermo i:first-child { animation: odMeetL 1.1s var(--ease) both; }
.od-match.on .od-thermo i:last-child { animation: odMeetR 1.1s var(--ease) both; }
.od-match.on .od-thermo i::after { animation: odFill 1.1s var(--ease) both; }
@keyframes odMeetL { to { transform: translateX(38px) rotate(8deg); } }
@keyframes odMeetR { to { transform: translateX(-38px) rotate(-8deg); } }
@keyframes odFill { to { height: 72%; } }

.od-side { display: grid; gap: 18px; }
.od-day { position: relative; background: #fff; border-radius: 28px; padding: 20px 20px 22px; }
.od-blocks { position: relative; height: 300px; margin-left: 46px; border-left: 2px solid #e7e4e0; }
.od-blocks li { position: absolute; left: 10px; right: 0; top: var(--y); height: var(--h); min-height: 22px; border-radius: 10px; padding: 3px 10px; font-size: 12px; font-weight: 700; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; overflow: hidden; }
.od-blocks li small { font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; color: #55514c; }
.od-blocks li[data-a="busy"] { background: #ffe8ec; color: #8d0019; }
.od-blocks li[data-a="free"] { background: #e6f4ea; color: #1d5b33; left: 34px; z-index: 1; }
.od-blocks li[data-a="away"] { background: #ebe8e4; color: #4b4743; }
.od-blocks li[data-a="sleep"] { background: #2a2826; color: #e7e4e0; }
.od-blocks li[data-a="sleep"] small { color: #c9c4be; }
.od-blocks li[data-a="move"] { background: #fff4d6; color: #6b4b00; }
.od-blocks::before { content: attr(data-t0); position: absolute; left: -46px; top: -6px; font-family: var(--f-mono); font-size: 10.5px; color: #6e6a66; }
.od-blocks::after { content: attr(data-t1); position: absolute; left: -46px; bottom: -6px; font-family: var(--f-mono); font-size: 10.5px; color: #6e6a66; }
.od-now { position: absolute; z-index: 2; left: 20px; right: 20px; top: 52px; height: 2px; background: var(--c-ondo); transition: top 600ms var(--ease); }
.od-now b { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 10.5px; color: #fff; background: var(--ondo-deep); padding: 1px 6px; border-radius: 999px; }
.od-gauge { background: #fff; border-radius: 28px; padding: 20px; }
.od-deg { display: flex; align-items: baseline; gap: 4px; }
.od-deg b { font-family: var(--f-lat); font-weight: 900; font-size: 64px; line-height: 0.9; font-variant-numeric: tabular-nums; color: #111; }
.od-deg span { font-weight: 800; font-size: 20px; color: #c4001f; }
.od-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 14px; }
.od-steps li { position: relative; padding-top: 12px; font-size: 11.5px; font-weight: 700; color: #6e6a66; text-align: center; }
.od-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 6px; background: #ebe8e4; }
.od-steps li::after { content: ""; position: absolute; top: 0; left: 0; height: 6px; border-radius: 6px; background: var(--c-ondo); width: calc(var(--f, 0) * 100%); transition: width 700ms var(--ease); }
.od-steps li.on { color: #111; }
.od-mile { margin-top: 14px; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 14px; background: #ffe8ec; color: #8d0019; opacity: 0; transform: translateY(6px); transition: opacity 300ms, transform 400ms cubic-bezier(.34, 1.56, .64, 1); }
.od-mile.on { opacity: 1; transform: none; }

.ondo-body { max-width: var(--max); margin: 72px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px 48px; }
.od-principles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: p; }
.od-principles li { background: #fff; border-radius: 28px; padding: 24px 24px 26px; display: grid; gap: 8px; counter-increment: p; }
.od-principles li::before { content: counter(p, decimal-leading-zero); font-family: var(--f-mono); font-size: 12px; color: #c4001f; }
.od-principles b { font-family: var(--f-kr); font-size: 19px; letter-spacing: -0.02em; }
.od-principles span { font-size: 15px; line-height: 1.65; color: #5f5a55; }
.ondo .feats dd, .ondo .metrics dt { color: #5f5a55; }
.ondo .metrics { border-color: #e1ddd8; }

@media (max-width: 1360px) and (min-width: 1081px) { .nav-links { gap: 18px; } .nav-links a { font-size: 14px; } }
@media (max-width: 1280px) {
  .ondo-stage { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "today phone" "side phone"; }
  .od-today { grid-area: today; } .od-phone { grid-area: phone; width: 300px; } .od-side { grid-area: side; grid-template-columns: 1fr 1fr; }
  .od-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .ondo-head { grid-template-columns: 1fr; }
  .ondo-body { grid-template-columns: 1fr; }
  .ondo .metrics { border-left: 0; padding-left: 0; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e1ddd8; padding-top: 24px; }
}
@media (max-width: 720px) {
  .gm-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .gm-side { grid-row: 1; grid-template-rows: auto; }
  .gm-graph, .gm-sim { display: none; }
  .gm-play { grid-row: 2; justify-self: center; }
  .gm-map div { padding: 6px 10px; }
  .ondo-stage { grid-template-columns: 1fr; grid-template-areas: "phone" "today" "side"; justify-items: stretch; }
  .od-phone { justify-self: center; width: min(300px, 82vw); }
  .od-side { grid-template-columns: 1fr; }
  .od-principles { grid-template-columns: 1fr; }
  .ondo .metrics dd { font-size: 34px; }
  .od-cards p { font-size: 12px; }
}

/* 06 Game 은 다섯 스튜디오가 모이는 장 — 무대를 넓게 */
@media (min-width: 1081px) {
  .studio--game { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.38fr); }
  .st-game { aspect-ratio: 16 / 10.6; }
}

/* ─────────── 파이프라인 — 시나리오 → 웹툰 → 드라마 → 게임 → 앱 ─────────── */
.pipe { padding: clamp(96px, 12vw, 180px) var(--pad); }
.pipe .section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.pipe-steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); max-width: var(--max); margin: 0 auto; counter-reset: none; }
.pipe-steps li { position: relative; }
/* 칸 사이 화살표 — 다음 단계로 넘어간다 */
.pipe-steps li:not(:last-child)::after {
  content: "→"; position: absolute; z-index: 2;
  top: 1.5px; right: calc(-1 * clamp(14px, 1.6vw, 28px) / 2); transform: translate(50%, -50%);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 700; line-height: 1;
}
.pipe-steps a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-top: 3px solid var(--t); padding-top: 0; }
.pipe-pic { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: 0 0 10px 10px; background: var(--paper-2); filter: saturate(0.92); transition: filter 220ms, transform 420ms var(--ease); }
.pipe-steps a:hover .pipe-pic, .pipe-steps a:focus-visible .pipe-pic { filter: saturate(1.08); transform: translateY(-4px); }
.pipe-no { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-paper-mute); }
.pipe-no b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--t); color: var(--ink); font-weight: 700; letter-spacing: 0; }
.pipe-name { margin-top: 10px; font-family: var(--f-kr); font-weight: 800; font-size: clamp(26px, 2.1vw, 36px); line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; }
.pipe-verb { margin-top: 6px; font-size: 15px; color: var(--on-paper-mute); }
.pipe-verb b { color: var(--ink); font-weight: 800; }
.pipe-do { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--on-paper-mute); flex: 1; }
.pipe-pass { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--rule-paper); font-size: 13px; font-weight: 700; color: var(--ink); }
.pipe-pass span { display: block; margin-bottom: 2px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-paper); }
.pipe-pass--end { color: #b0001d; font-size: 16px; }
.pipe-carry { max-width: var(--max); margin: clamp(36px, 4vw, 56px) auto 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px 28px; padding: 22px 26px; border-radius: 14px; background: var(--ink); color: var(--paper); }
.pipe-carry-k { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--on-ink-mute); }
.pipe-carry ul { display: flex; flex-wrap: wrap; gap: 8px; }
.pipe-carry li { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--rule-ink); font-family: var(--f-kr); font-weight: 700; font-size: 15px; white-space: nowrap; }
.pipe-carry li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--signal); vertical-align: 2px; }
.pipe-carry-n { justify-self: end; max-width: 440px; font-size: 14px; line-height: 1.65; color: var(--on-ink-mute); }
.pipe-carry-n a { color: var(--paper); text-underline-offset: 3px; }
.pipe-try { max-width: var(--max); margin: clamp(28px, 3vw, 40px) auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pipe-try-k { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--on-paper-mute); }
.pipe-try ul { display: flex; flex-wrap: wrap; gap: 8px; }
.pipe-try a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color 180ms, color 180ms; }
.pipe-try a::after { content: "↓"; opacity: 0.55; }
.pipe-try a:hover { background: var(--ink); color: var(--paper); }
.studios--side .studios-head { margin-bottom: 0; }

@media (max-width: 1280px) {
  .pipe-carry { grid-template-columns: auto minmax(0, 1fr); }
  .pipe-carry-n { grid-column: 1 / -1; justify-self: start; max-width: none; }
}
/* 좁은 화면 — 세로 타임라인: 사진 왼쪽, 글 오른쪽, 화살표는 아래로 (여섯 칸이 좁아지기 전에) */
@media (max-width: 1200px) {
  .pipe-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 720px; }
  .pipe-steps a { display: grid; grid-template-columns: clamp(96px, 26vw, 180px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: clamp(16px, 4vw, 28px); border-top: 0; border-left: 3px solid var(--t); padding-left: clamp(14px, 3vw, 22px); }
  .pipe-pic { grid-row: 1 / -1; border-radius: 10px; align-self: start; }
  .pipe-no { margin-top: 0; }
  .pipe-steps li:not(:last-child)::after { content: "↓"; top: auto; bottom: -14px; left: 0; right: auto; transform: translate(-50%, 50%) translateX(1.5px); width: 28px; height: 28px; font-size: 14px; }
}
@media (max-width: 720px) {
  .pipe-carry { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .pipe-do { font-size: 14px; }
}
@media (max-width: 420px) {
  .pipe-steps a { grid-template-columns: 84px minmax(0, 1fr); }
  .pipe-name { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .pipe-pic { transition: none; } }
.pipe .section-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
.pipe .section-lede { max-width: 760px; }

/* 필름이 페이지 맨 위 — 고정 내비 아래에서 시작해 화면을 채운다 · 다음 히어로는 내비 여백이 필요 없다 */
.film--top { padding-top: var(--nav-h); background: var(--ink); }
.film--top .film-stage { height: calc(100svh - var(--nav-h)); }
.film--top + .hero { padding-top: clamp(72px, 9vh, 120px); }

/* ═════════ 캐릭터 — 모든 단계의 출발점: 영상 벽 + 무작위 세 사람과 대화 ═════════ */
.cast { padding: clamp(96px, 12vw, 180px) 0 clamp(80px, 10vw, 150px); overflow: hidden; }
.cast .section-head { padding-inline: var(--pad); grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
.cast .section-lede { max-width: 760px; }
.cast-wall { display: grid; gap: 12px; margin-bottom: clamp(64px, 8vw, 120px); }
.cw-row { overflow: hidden; }
.cw-track { display: flex; gap: 12px; width: max-content; animation: cw-drift var(--dur, 70s) linear infinite; }
.cw-row[data-dir="-1"] .cw-track { animation-direction: reverse; }
.cw-dup { display: contents; }
.cast-wall:hover .cw-track { animation-play-state: paused; }
@keyframes cw-drift { to { transform: translateX(calc(-50% - 6px)); } }
.cw-tile { position: relative; flex: none; width: clamp(150px, 13vw, 210px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: #1b1916; }
.cw-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cw-tile figcaption { position: absolute; inset: auto 0 0 0; display: flex; align-items: baseline; gap: 8px; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(13, 12, 11, 0.86)); color: var(--paper); }
.cw-tile b { font-family: var(--f-kr); font-weight: 700; font-size: 14px; white-space: nowrap; }
.cw-tile span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; color: #cfc7bb; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .cw-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
}

.talk { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.talk-title { font-family: var(--f-kr); font-weight: 800; font-size: clamp(30px, 3vw, 48px); line-height: 1.15; letter-spacing: -0.03em; }
.talk-lede { margin-top: 14px; color: var(--on-ink-mute); max-width: 460px; }
.talk-cards { display: grid; gap: 10px; margin-top: 28px; }
.tk-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; padding: 10px 16px 10px 10px; border-radius: 14px; border: 1px solid var(--rule-ink); background: rgba(238, 232, 220, 0.03); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 180ms, background-color 180ms; }
.tk-card:hover { border-color: rgba(238, 232, 220, 0.4); }
.tk-card[aria-pressed="true"] { border-color: var(--c-chat); background: color-mix(in srgb, var(--c-chat) 12%, transparent); }
.tk-card img { width: 64px; height: 80px; border-radius: 10px; object-fit: cover; object-position: center 20%; }
.tk-card-body { display: grid; gap: 2px; min-width: 0; }
.tk-card-body b { font-family: var(--f-kr); font-weight: 800; font-size: 18px; }
.tk-card-world { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--on-ink-mute); }
.tk-card-tag { font-size: 14px; line-height: 1.5; color: #d8d0c4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.talk-shuffle { margin-top: 14px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule-ink); background: transparent; color: var(--paper); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.talk-shuffle:hover { border-color: var(--paper); }

.talk-room { display: flex; flex-direction: column; height: min(640px, 78svh); border-radius: 20px; overflow: hidden; background: var(--paper); color: var(--ink); }
.talk-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--rule-paper); }
.talk-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--paper-2); }
.talk-head p { display: grid; }
.talk-head b { font-family: var(--f-kr); font-weight: 800; font-size: 17px; }
.talk-head span { font-family: var(--f-mono); font-size: 11px; color: var(--on-paper-mute); }
.talk-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; overscroll-behavior: contain; }
.tk-msg { max-width: 86%; padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; }
.tk-msg--them { align-self: flex-start; background: #fff; border: 1px solid var(--rule-paper); border-top-left-radius: 4px; }
.tk-msg--me { align-self: flex-end; background: var(--ink); color: var(--paper); border-top-right-radius: 4px; }
.tk-msg--sys { align-self: center; max-width: 100%; padding: 6px 12px; background: transparent; font-size: 13px; color: var(--signal-paper); }
.tk-narr { color: var(--on-paper-mute); font-style: normal; }
.tk-msg--me .tk-narr { color: #cfc7bb; }
.tk-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.tk-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--on-paper-mute); animation: tk-dot 1s infinite ease-in-out; }
.tk-typing i:nth-child(2) { animation-delay: 0.15s; } .tk-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tk-dot { 0%, 100% { opacity: 0.25; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.talk-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--rule-paper); }
.talk-form textarea { flex: 1; min-height: 46px; max-height: 120px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule-paper); background: #fff; color: var(--ink); font: inherit; font-size: 15px; resize: none; }
.talk-form textarea:focus { outline: 2px solid var(--c-chat); outline-offset: 0; }
.talk-form button { padding: 0 20px; border-radius: 12px; border: 0; background: var(--ink); color: var(--paper); font: inherit; font-weight: 700; cursor: pointer; }
.talk-form button:disabled, .talk-form textarea:disabled { opacity: 0.5; cursor: default; }
.talk-note { padding: 0 18px 12px; font-size: 12px; color: var(--on-paper-mute); }
@media (max-width: 1080px) {
  .talk { grid-template-columns: minmax(0, 1fr); }
  .talk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-card { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .tk-card img { width: 100%; height: auto; aspect-ratio: 3 / 4; }
}
@media (max-width: 560px) {
  .talk-cards { gap: 8px; }
  .tk-card-body b { font-size: 15px; }
  .tk-card-world { font-size: 10px; }
  .tk-card-tag { display: none; }
  .talk-room { height: min(560px, 80svh); }
}

/* ═════════════════════ v2 — 한 절에 한 메시지 · 스크롤 연출 · 다국어 (2026-10-06) ═════════════════════ */
:root:lang(ja) { --f-kr: "Paperlogy", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif; --f-body: "SUIT Variable", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif; }
:root:lang(zh-Hans) { --f-kr: "Paperlogy", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; --f-body: "SUIT Variable", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
:root:lang(ja) body, :root:lang(zh-Hans) body { word-break: normal; line-break: strict; }

/* 읽은 만큼 — 맨 위 얇은 막대 */
.progress { position: fixed; inset: 0 0 auto 0; z-index: 90; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }

/* 내비 — 언어 메뉴 · 플랫폼 바로가기 */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lang-btn b { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 150px; padding: 6px; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 160ms, transform 200ms var(--ease); }
.lang.open .lang-list { opacity: 1; transform: none; pointer-events: auto; }
.lang-list a { display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none; font-size: 15px; font-weight: 600; }
.lang-list a:hover { background: var(--paper-2); }
.lang-list a[aria-current="true"] { color: var(--signal-paper); }
.lang-list a[aria-current="true"]::after { content: " ✓"; }
.nav-cta { white-space: nowrap; }
@media (max-width: 720px) {
  .nav { gap: 10px; }
  .nav-cta { padding: 0 14px; font-size: 13px; }
  .lang-btn { padding: 0 10px; }
  .lang-btn span { display: none; }
}
@media (max-width: 380px) { .nav-cta [data-i18n] { font-size: 12px; } .brand-logo { height: 28px; } }

/* 나타나기 — 아래에서 떠오르며 초점이 맞는다 · 제목은 줄마다 가려졌다 올라온다 */
.js [data-rv] { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease); transition-delay: var(--rd, 0ms); }
.js [data-rv].in { opacity: 1; transform: none; filter: none; }
.ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ln > span { display: inline-block; transform: translateY(105%); transition: transform 1100ms var(--ease); transition-delay: calc(var(--li, 0) * 110ms); }
[data-lines].in .ln > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-rv] { opacity: 1; transform: none; filter: none; transition: none; }
  .ln > span { transform: none; transition: none; }
}

/* 1. 선언 */
.hero--v2 { grid-template-rows: 1fr; padding-bottom: clamp(48px, 8vh, 96px); }
.hero--v2 .hero-lede { max-width: 30em; font-size: clamp(17px, 1.45vw, 21px); }
.scroll-cue { position: absolute; left: var(--pad); bottom: 22px; display: grid; justify-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink-mute); }
.scroll-cue i { width: 1px; height: 40px; background: linear-gradient(var(--on-ink-mute), transparent); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* 2. 사람 */
.cast--v2 { padding-top: clamp(110px, 14vw, 200px); }
.cast-intro { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto clamp(48px, 6vw, 88px); padding-inline: var(--pad); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 24px 64px; }
.cast-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.cast-count { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 4px; justify-self: end; text-align: left; }
.cast-count b { font-family: var(--f-lat); font-weight: 900; font-size: clamp(88px, 11vw, 168px); line-height: 0.85; color: var(--c-chat); font-variant-numeric: tabular-nums; }
.cast-count > span { font-family: var(--f-lat); font-weight: 900; font-size: clamp(48px, 6vw, 90px); line-height: 0.85; color: var(--c-chat); }
.cast-count em { grid-column: 1 / -1; margin-top: 12px; font-style: normal; font-size: 15px; color: var(--on-ink-mute); max-width: 18em; }
.cast--v2 .talk { margin-top: clamp(80px, 10vw, 140px); }
@media (max-width: 900px) { .cast-intro { grid-template-columns: minmax(0, 1fr); } .cast-count { justify-self: start; } }

/* 3. 흐름 — 여섯 단계를 화면에 붙잡고 넘긴다 */
.path { position: relative; height: 760svh; }
.flow-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(12px, 2vh, 24px); padding: calc(var(--nav-h) + clamp(16px, 3vh, 36px)) var(--pad) clamp(20px, 3vh, 36px); max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; overflow: hidden; }
.flow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.flow-head .eyebrow { margin-bottom: 0; color: var(--signal-paper); }
.flow-title { font-family: var(--f-kr); font-weight: 800; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.2; letter-spacing: -0.03em; text-align: right; }
.flow-steps { position: relative; min-height: 0; }
.fs { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 4vw, 72px); opacity: 0; pointer-events: none; transition: opacity 700ms var(--ease); }
.fs.on { opacity: 1; pointer-events: auto; }
.fs-media { order: 2; justify-self: center; height: 100%; max-height: 72svh; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; background: var(--paper-2); clip-path: inset(9% 9% 9% 9% round 22px); transform: scale(1.06) rotate(-1.5deg); transition: clip-path 1100ms var(--ease), transform 1300ms var(--ease); box-shadow: 0 40px 80px -40px rgba(13, 12, 11, 0.5); }
.fs.on .fs-media { clip-path: inset(0 0 0 0 round 22px); transform: none; }
.fs-media img, .fs-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-text > * { opacity: 0; transform: translateY(36px); transition: opacity 700ms var(--ease), transform 900ms var(--ease); }
.fs.on .fs-text > * { opacity: 1; transform: none; }
.fs.on .fs-text > :nth-child(2) { transition-delay: 90ms; } .fs.on .fs-text > :nth-child(3) { transition-delay: 180ms; } .fs.on .fs-text > :nth-child(4) { transition-delay: 270ms; }
.fs-no { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-paper-mute); }
.fs-no b { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--t); color: var(--ink); font-size: 14px; }
.fs-name { margin-top: 18px; font-family: var(--f-kr); font-weight: 800; font-size: clamp(64px, 9vw, 150px); line-height: 0.95; letter-spacing: -0.05em; }
.fs-verb { margin-top: 18px; font-size: clamp(20px, 2vw, 30px); color: var(--on-paper-mute); }
.fs-verb b { color: var(--ink); font-weight: 800; box-shadow: inset 0 -0.38em 0 color-mix(in srgb, var(--t) 55%, transparent); }
.fs-do { margin-top: 16px; max-width: 22em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; color: var(--on-paper-mute); }
.flow-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.flow-rail li { height: 4px; border-radius: 4px; background: var(--rule-paper); overflow: hidden; }
.flow-rail li::before { content: ""; display: block; height: 100%; background: var(--t); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.flow-carry { position: absolute; left: var(--pad); bottom: clamp(40px, 6vh, 64px); font-size: 14px; color: var(--on-paper-mute); }
.flow-carry b { color: var(--ink); }
@media (max-width: 900px) {
  .path { height: 700svh; }
  .flow-head { flex-direction: column; gap: 6px; }
  .flow-title { text-align: left; font-size: 20px; }
  .fs { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: end; gap: 18px; }
  .fs-media { order: 0; height: 100%; max-height: none; width: auto; justify-self: start; border-radius: 18px; }
  .fs-name { margin-top: 10px; font-size: clamp(48px, 13vw, 84px); }
  .fs-verb { margin-top: 8px; font-size: 18px; }
  .fs-do { margin-top: 6px; font-size: 15px; }
  .fs-no b { width: 32px; height: 32px; font-size: 12px; }
  .flow-carry { position: static; font-size: 13px; }
  .flow-pin { grid-template-rows: auto minmax(0, 1fr) auto auto; }
}
/* 움직임을 줄인 사람 — 붙잡지 않고 여섯 장을 차례로 */
.path--static { height: auto; }
.path--static .flow-pin { position: static; height: auto; overflow: visible; grid-template-rows: auto; }
.path--static .flow-steps { display: grid; gap: 64px; }
.path--static .fs { position: static; opacity: 1; pointer-events: auto; }
.path--static .fs-media, .path--static .fs-text > * { clip-path: none; transform: none; opacity: 1; transition: none; }
.path--static .fs-media { height: auto; width: min(100%, 420px); }
.path--static .flow-rail { display: none; }

/* 4. 체험 */
.try2 { padding: clamp(110px, 13vw, 190px) var(--pad); }
.try2-head { max-width: var(--max); margin: 0 auto clamp(48px, 6vw, 88px); }
.try2-head .eyebrow { color: var(--signal-paper); }
.try2-sub { margin-top: 20px; font-size: 18px; color: var(--on-paper-mute); }
.try-row { max-width: var(--max); margin: 0 auto clamp(56px, 7vw, 100px); }
.try2 .try-k b { font-size: clamp(26px, 2.6vw, 38px); }
.try-app { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding: 24px 28px; border-radius: 20px; background: var(--paper-2); }
.try-app img { border-radius: 18px; }
.try-app p { display: grid; gap: 4px; margin-right: auto; }
.try-app p b { font-family: var(--f-kr); font-weight: 800; font-size: 22px; }
.try-app p span { color: var(--on-paper-mute); }
.try-lang-note { max-width: var(--max); margin: 0 auto; font-size: 13px; color: var(--on-paper-mute); }
.try-lang-note:empty { display: none; }
.try2 .try-name { font-size: 18px; }

/* 5. 작업실 — 제목 한 줄 · 수치 셋 · 모션 */
.studios--v2 .studios-head { margin-bottom: clamp(40px, 5vw, 72px); }
.studio--v2 { grid-template-areas: "head stage"; padding-block: clamp(72px, 8vw, 128px); }
.studio--v2 .studio-title { font-size: clamp(30px, 3vw, 48px); }
.metrics--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--rule-ink); }
[data-theme="paper"] .metrics--row { border-top-color: var(--rule-paper); }
.metrics--row dt { font-size: 12.5px; }
.metrics--row dd { font-size: clamp(32px, 3vw, 46px); }
.metrics--row small { font-size: 13px; }
.studio--v2 .stage { transform: translateY(40px) scale(0.97); opacity: 0.4; transition: transform 1100ms var(--ease), opacity 900ms var(--ease); }
.studio--v2.in .stage { transform: none; opacity: 1; }
@media (max-width: 1080px) { .studio--v2 { grid-template-areas: "head" "stage"; } }
@media (prefers-reduced-motion: reduce) { .studio--v2 .stage { transform: none; opacity: 1; transition: none; } }

/* 6. 온도 */
.od-principles--v2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 36px; max-width: var(--max); margin: clamp(48px, 6vw, 80px) auto 0; }
.od-principles--v2 li { display: grid; gap: 8px; padding-top: 18px; border-top: 2px solid var(--c-ondo); }
.od-principles--v2 b { font-family: var(--f-kr); font-weight: 800; font-size: 20px; }
.od-principles--v2 span { color: var(--on-paper-mute); font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) { .od-principles--v2 { grid-template-columns: minmax(0, 1fr); } }

/* 7. 엔진 */
.eng-chips { display: flex; flex-wrap: wrap; gap: 10px; align-self: end; }
.eng-chips li { display: grid; gap: 2px; padding: 12px 18px 12px 16px; border-radius: 14px; border: 1px solid var(--rule-ink); border-left: 3px solid var(--t); }
.eng-chips b { font-family: var(--f-lat); font-weight: 800; font-size: 20px; letter-spacing: 0.01em; }
.eng-chips span { font-size: 13px; color: var(--on-ink-mute); }

/* 8. 숫자 */
.record--v2 { padding: clamp(110px, 13vw, 190px) var(--pad); }
.record-head { max-width: var(--max); margin: 0 auto clamp(40px, 5vw, 72px); }
.ledger--v2 { max-width: var(--max); margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ledger--v2 dd { font-size: clamp(56px, 7vw, 120px); }
@media (max-width: 720px) { .ledger--v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ledger--v2 dd { font-size: clamp(40px, 12vw, 64px); } }

/* 마무리 */
.outro-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* 언어마다 히어로 제목 상한 — 한 줄 글자 수가 달라서 */
:root:lang(en) .hero-title { font-size: min(clamp(40px, 5.4vw, 92px), 10cqi); letter-spacing: -0.035em; }
:root:lang(ja) .hero-title { font-size: min(clamp(34px, 5vw, 84px), 10.2cqi); letter-spacing: -0.02em; }
:root:lang(zh-Hans) .hero-title { font-size: min(clamp(38px, 5.6vw, 96px), 12.6cqi); letter-spacing: -0.02em; }
:root:lang(en) .fs-name, :root:lang(ja) .fs-name { font-size: clamp(48px, 7vw, 120px); letter-spacing: -0.03em; }