/* ZUZ 스토리 — 앞면(감성)
   흰 공간 = 활동의 세계, 검은 공간 = 내면의 우주 */

:root {
  --bg-light: #f6f6fa;
  --bg-dark: #04050c;
  --ink-light: #111827;
  --ink-dark: #ecebf7;
  --muted-light: #6b7280;
  --muted-dark: #9aa0bb;
  --cool: #0e7490;
  --warm: #6d28d9;
  --cool-d: #78d7ff;
  --warm-d: #af82ff;

  --bg: var(--bg-light);
  --ink: var(--ink-light);
  --muted: var(--muted-light);
  --hair: rgba(17, 24, 39, 0.1);
  --accent: var(--warm);
  --accent-2: var(--cool);

  --col-left: clamp(300px, 34vw, 520px);
  --col-w: 640px;
  --serif: "Gowun Batang", "Noto Serif KR", serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

html[data-space="dark"] {
  --bg: var(--bg-dark);
  --ink: var(--ink-dark);
  --muted: var(--muted-dark);
  --hair: rgba(236, 235, 247, 0.12);
  --accent: var(--warm-d);
  --accent-2: var(--cool-d);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-x: hidden;
  transition: background-color 1.2s ease, color 1.2s ease;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
/* 일본어·중국어는 띄어쓰기가 없으므로 글자 단위로 줄을 바꾼다 (keep-all 은 한국어용) */
html[lang="ja"] body, html[lang^="zh"] body { word-break: normal; line-break: strict; }
img { display: block; max-width: 100%; }

/* ───────── 피터 캔버스 ───────── */
#peter {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 1.6s ease;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  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='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ───────── HUD: 네 모서리 ─────────
   위   왼쪽 로고 · 오른쪽 언어            — 사이트
   아래 왼쪽 장 이름 · 오른쪽 기록 보관소  — 지금 읽는 자리 */
.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(16px, 3vw, 36px) 26px;
  pointer-events: none;
}
.hud a, .hud .lang { pointer-events: auto; }
/* 띠 배경: 그라데이션 대신 「단색 + 투명도 마스크」.
   그라데이션은 서서히 바뀌지 않고 한 번에 바뀌어서, 밝은↔어두운 장면이 바뀔 때 띠가 먼저 바뀌어 보였다.
   단색은 본문 배경과 같은 1.2초 동안 같이 바뀐다. */
.hud::before, .hud-foot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  transition: background-color 1.2s ease, opacity 0.5s ease;
}
.hud::before {
  -webkit-mask-image: linear-gradient(#000 35%, rgba(0, 0, 0, 0.7) 65%, transparent);
  mask-image: linear-gradient(#000 35%, rgba(0, 0, 0, 0.7) 65%, transparent);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  transition: color 1.2s ease, opacity 0.3s;
}
.wordmark svg { display: block; height: 20px; width: auto; }
@media (max-width: 760px) { .wordmark svg { height: 18px; } }
.wordmark:hover { opacity: 0.7; }
.hud-nav { display: flex; align-items: center; }

.hud-foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 34px clamp(16px, 3vw, 36px) calc(18px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.hud-foot::before {
  -webkit-mask-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7) 45%, #000 78%);
  mask-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7) 45%, #000 78%);
}
.hud-foot > * { pointer-events: auto; }
.hud-chapter {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 30px;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: opacity 0.5s ease, color 1.2s ease;
}
.hud-chapter:empty { opacity: 0; }
.hud-no { color: var(--accent); margin-right: 12px; transition: color 1.2s ease; }
/* 종장: 마지막 화면의 링크·SNS 를 가리지 않게 띠를 걷는다 */
html[data-scene="s8"] .hud-foot::before { opacity: 0; }

/* 보관소 — 오른쪽 아래. 글자 없이 테두리 안의 초록 불만: 「열려 있으니 눌러 봐」 (이름은 aria-label) */
.archive-fab {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  text-decoration: none;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.82;
  transition: opacity 0.3s, border-color 0.3s, transform 0.3s, background-color 1.2s ease;
}
.archive-fab::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: fabPulse 2.4s ease-out infinite;
}
@keyframes fabPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.archive-fab:hover, .archive-fab:focus-visible {
  opacity: 1;
  border-color: color-mix(in srgb, #22c55e 55%, var(--hair));
  transform: translateY(-1px);
}

/* ───────── 언어 변경 ───────── */
.lang { --lang-bg: color-mix(in srgb, var(--bg) 90%, transparent); --lang-faint: color-mix(in srgb, var(--muted) 72%, transparent); }
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px 0 10px;
  font: 500 11px/1 var(--mono); letter-spacing: 0.1em;
  color: var(--muted); background: transparent;
  border: 1px solid var(--hair); border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.lang-btn svg { width: 13px; height: 13px; display: block; }
.lang-btn:hover, .lang-btn:focus-visible, .lang.is-open .lang-btn {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 26%, transparent);
  outline: none;
}
.lang.is-open .lang-btn { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.lang-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
  width: 208px;
  padding: 14px 6px 6px;
  background: var(--lang-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 28px 56px -32px rgba(8, 8, 30, 0.5), 0 2px 6px -2px rgba(8, 8, 30, 0.08);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(0.98); transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.22s;
}
.lang.is-open .lang-panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.lang-head {
  margin: 0 10px 8px;
  font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lang-faint);
}
/* 한·중·일 머리글은 자간을 벌리지 않는다 */
html[lang="ko"] .lang-head, html[lang="ja"] .lang-head, html[lang^="zh"] .lang-head { font: 500 11px/1 var(--sans); letter-spacing: 0.02em; }
.lang-menu { list-style: none; margin: 0; padding: 0; }
.lang-menu li {
  display: grid; grid-template-columns: 30px 1fr 14px; align-items: center;
  height: 34px; padding: 0 10px;
  border-radius: 8px;
  font: 400 14px/1 var(--sans); letter-spacing: 0;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.lang-code { font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--lang-faint); transition: color 0.15s; }
.lang-menu li::after {
  content: "→"; justify-self: end;
  font: 12px/1 var(--mono); color: var(--accent);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.lang-menu li:hover, .lang-menu li:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); outline: none; }
.lang-menu li:hover .lang-code, .lang-menu li:focus-visible .lang-code { color: var(--ink); }
.lang-menu li:hover::after, .lang-menu li:focus-visible::after { opacity: 1; transform: none; }
.lang-menu li[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.lang-menu li[aria-selected="true"] .lang-code { color: var(--accent); }
.lang-menu li[aria-selected="true"]::after { content: "✓"; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lang-panel, .lang.is-open .lang-panel { transition: none; } }

/* ───────── 기록 보관소 레이어 ───────── */
html.layer-open { overflow: hidden; }
html.layer-open body { overflow: hidden; }
.layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  visibility: hidden;
  pointer-events: none;
}
.layer.is-open { visibility: visible; pointer-events: auto; }
.layer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 14, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.layer.is-open .layer-scrim { opacity: 1; }
.layer-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1320px, 96vw);
  height: min(980px, 92vh);
  background: #fbfbf8;
  color: #111827;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.layer.is-open .layer-panel { opacity: 1; transform: none; }
.layer-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 22px;
  border-bottom: 1px solid #e6e6e0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
/* 위 막대의 탭: 피터의 보관소 · 피터의 노트 · 제작소 */
.layer-tabs { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 22px; align-self: stretch; }
.layer-tab {
  position: relative;
  font: inherit; letter-spacing: inherit;
  color: #9aa0aa; background: none; border: 0;
  padding: 4px 0; cursor: pointer; white-space: nowrap;
  transition: color 0.2s;
}
.layer-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -13px; height: 2px;
  background: #6d28d9; border-radius: 2px;
  transform: scaleX(0); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.layer-tab:hover { color: #5b6270; }
.layer-tab.is-on { color: #111827; }
.layer-tab.is-on::after { transform: none; }
.layer-tab:focus-visible { outline: 2px solid #6d28d9; outline-offset: 3px; border-radius: 2px; }
.l-short { display: none; }
.layer-close {
  font: inherit;
  color: #111827;
  background: none;
  border: 1px solid #e6e6e0;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.layer-close:hover { border-color: #6d28d9; color: #6d28d9; }
.layer-frame { flex: 1; width: 100%; border: 0; background: #fbfbf8; }
@media (prefers-color-scheme: dark) {
  .layer-panel, .layer-frame { background: #0b0c12; color: #e8e8f0; }
  .layer-bar { border-color: #24263a; }
  .layer-tab { color: #6c7182; }
  .layer-tab:hover { color: #a2a7b6; }
  .layer-tab.is-on { color: #e8e8f0; }
  .layer-tab::after { background: #af82ff; }
  .layer-close { color: #e8e8f0; border-color: #24263a; }
}

/* ───────── 장면 ───────── */
main { position: relative; z-index: 2; }
.scene {
  position: relative;
  min-height: 100vh;
  padding: 18vh 0 16vh;
  overflow: hidden;
}
.col {
  position: relative;
  z-index: 2;
  margin-left: var(--col-left);
  margin-right: clamp(20px, 6vw, 80px);
  max-width: var(--col-w);
}
.col + .col { margin-top: 6vh; }
.col--center {
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
  padding: 0 20px;
}
.col--quiet { opacity: 0.92; }

.kicker, .chapter-no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 3.2em;
}
.chapter-no::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.6;
}

.line { margin: 0 0 1.15em; font-size: 19px; }
.line--lg { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.6; font-weight: 500; letter-spacing: -0.01em; }
.line--xl { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; }
.line--soft { color: var(--muted); }
.line--strong { font-weight: 700; }
.line--serif { font-family: var(--serif); font-weight: 400; }
.line--glow { text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent); }
.line strong { font-weight: 700; }

/* 타이핑 */
.js .line[data-type] .ch { opacity: 0; transition: opacity 0.22s ease; }
.js .line[data-type] .ch.on { opacity: 1; }

/* 숨은 링크 */
/* 밑줄은 글자 장식이 아니라 링크 전체 배경으로 그린다.
   (타이핑용으로 글자마다 span 이 쪼개져 있어서 text-decoration 은 띄어쓰기마다 끊겨 보인다) */
a.rec {
  text-decoration: none;
  background-image: linear-gradient(color-mix(in srgb, currentColor 45%, transparent), color-mix(in srgb, currentColor 45%, transparent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  white-space: nowrap; /* 링크 하나는 한 줄로: 중간에서 줄바꿈되면 두 개의 링크처럼 보인다 */
  cursor: pointer;
  max-width: 100%;
  border-radius: 3px;
  transition: color 0.35s, text-shadow 0.35s;
}
a.rec:hover, a.rec:focus-visible {
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
  outline: none;
}
/* 한 줄에 다 들어가지 않는 링크만 줄바꿈을 허락한다 (story.js 가 화면 폭을 보고 .wrap 을 붙인다).
   줄이 바뀌어도 밑줄은 배경이라 이어진다 */
a.rec.wrap { white-space: normal; }
/* 타이핑되는 문장 안의 링크: 밑줄은 글자가 나오는 만큼 함께 그어진다 (story.js 가 폭을 갱신) */
.js .line[data-type] a.rec { background-size: 0% 1px; transition: background-size 0.12s linear; }
.js .line[data-type] a.rec.drawn { background-size: 100% 1px; }
a.rec.shimmer { animation: recShimmer 2.4s ease 0.2s 1; }
@keyframes recShimmer {
  0%, 100% { text-shadow: none; }
  45% { text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
}

/* 등장 */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }
/* 빠르게 스크롤할 때 한 번에 보여 준 요소: 연출을 짧게, 지연 없이 */
.js .fast, .js .fast * { transition-duration: 0.3s !important; transition-delay: 0s !important; }
.js .line.fast .ch { transition: none !important; }
/* 프롤로그는 이미 지연된 연출이 걸려 있으므로, 내리는 순간 연출을 끊고 바로 보인다 */
.js .scene--pre .fast, .js .scene--pre .fast * { transition: none !important; }

/* ───────── 프롤로그: 말풍선 하나 ───────── */
.scene--pre { display: flex; align-items: center; justify-content: center; padding: 0; min-height: 100vh; }
.col--pre { margin: 0 auto; width: min(460px, 86vw); text-align: center; }
.pre-chat { display: flex; flex-direction: column; gap: 18px; margin-bottom: 9vh; }
.pre-bubble {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 22px;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.pre-bubble--a { align-self: flex-start; background: #fff; border: 1px solid var(--hair); border-bottom-left-radius: 6px; box-shadow: 0 10px 30px rgba(17,24,39,.06); }
.pre-bubble--b { align-self: flex-end; background: #e5e7eb; color: #374151; border-bottom-right-radius: 6px; }
.js .pre-chat .pre-bubble { opacity: 0; transform: translateY(10px); }
.js .pre-chat.in .pre-bubble--a { opacity: 1; transform: none; transition-delay: 0.2s; transition-duration: 0.6s; }
.js .pre-chat.in .pre-bubble--b { opacity: 1; transform: none; transition-delay: 1.1s; transition-duration: 0.6s; }
.pre-q { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); color: var(--muted); margin: 0; }
.js .pre-q[data-reveal].in { transition-delay: 2s; transition-duration: 1.2s; }
.js .scene--pre .scroll-hint[data-reveal].in { transition-delay: 2.8s; }
/* 종장: 같은 질문, 다른 대답 */
.pre-chat--answer { width: min(420px, 86vw); margin: 5vh auto 7vh; text-align: left; }
.pre-chat--answer .pre-bubble--a { background: rgba(255,255,255,.92); color: #111827; }
.pre-chat--answer .pre-bubble--b { background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: #fff; }

/* ───────── 서장 ───────── */
.scene--hero { display: flex; align-items: flex-end; padding-bottom: 12vh; }
.scene--hero .col--center { padding-top: 50vh; }
.scroll-hint {
  margin-top: 4em;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.scroll-hint span {
  display: block;
  width: 1px; height: 42px;
  margin: 0 auto 14px;
  background: linear-gradient(var(--muted), transparent);
  animation: hint 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes hint { 0%, 100% { transform: scaleY(0.3); opacity: 0.3; } 50% { transform: scaleY(1); opacity: 1; } }

/* ───────── 1장 따뜻한 빛 ───────── */
.scene--warm::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 70% 30%, rgba(255, 196, 140, 0.22), transparent 70%);
  pointer-events: none;
}

/* 미니 채팅 */
.mini-chat { display: flex; flex-direction: column; gap: 10px; margin: 0.6em 0 1.8em; max-width: 420px; }
.bubble {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 17px;
  line-height: 1.5;
  max-width: 100%;
}
.bubble--a { align-self: flex-start; background: #fff; border: 1px solid var(--hair); border-bottom-left-radius: 6px; box-shadow: 0 6px 24px rgba(17, 24, 39, 0.06); }
.bubble--b { align-self: flex-end; background: #ede9fe; color: #4c1d95; border-bottom-right-radius: 6px; }
.mini-chat--cold .bubble--a { background: #fff; }
.mini-chat--cold .bubble--b { background: #e5e7eb; color: #374151; }
.mini-chat--warm .bubble--a { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.mini-chat--night { max-width: 520px; }
.mini-chat--night .bubble--a { background: #f4f1ea; color: #111827; border: 0; }
.mini-chat--night .bubble--b { background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: #fff; }

/* ───────── 2장 그리고 지금 ───────── */
.scene--now::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.08) 50%, transparent);
  pointer-events: none;
}

/* ───────── 3장 ───────── */
.scene--grey::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(107, 114, 128, 0.10) 45%, rgba(107, 114, 128, 0.10) 70%, transparent);
  pointer-events: none;
}
.reason { display: grid; grid-template-columns: 56px 1fr; gap: 6px 18px; margin: 0 0 1.6em; }
.reason-no {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
  padding-top: 4px;
  border-top: 1px solid var(--accent);
  height: fit-content;
}
.reason .line { margin: 0; }
.turn { margin-top: 12vh; }

/* ───────── 우주 ───────── */
.stars {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 120px 80px, rgba(175,130,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 60px 160px, rgba(120,215,255,.8), transparent 60%),
    radial-gradient(1px 1px at 190px 210px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 250px 40px, rgba(255,255,255,.5), transparent 60%);
  background-size: 280px 260px;
  opacity: 0.55;
  animation: drift 120s linear infinite;
}
@keyframes drift { to { background-position: 280px 520px; } }

.questions {
  list-style: none; padding: 0; margin: 0.4em 0 2em;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.7;
}
.questions li { opacity: 0.35; transition: opacity 1.2s ease; }
.questions.in li { opacity: 1; }
.questions.in li:nth-child(2) { transition-delay: 0.7s; }
.questions.in li:nth-child(3) { transition-delay: 1.4s; }

/* 행성 — 앱 InnerCoordinateGlobe */
.planet-stage {
  position: relative;
  width: min(620px, 92vw);
  margin: 6vh auto 4vh calc(var(--col-left) - 60px);
}
.planet-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 71%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 71%);
}
.planet-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.planet-fallback {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(175,130,255,.5), transparent 45%), radial-gradient(circle, #1b1d52, #04050c 70%);
}
.planet-caption {
  margin: -2vh 0 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  padding: 0 12px;
}

/* 고양이 */
.cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 4vw, 56px);
  max-width: 980px;
  margin: 6vh auto 8vh;
  padding: 0 20px;
}
.cat { margin: 0; transition: transform 1.4s ease, opacity 1.4s ease; }
.js .cats .cat--busan { transform: translate(-40px, 30px); opacity: 0; }
.js .cats .cat--paris { transform: translate(40px, 90px); opacity: 0; }
.js .cats.in .cat--busan { transform: translate(0, 0); opacity: 1; }
.js .cats.in .cat--paris { transform: translate(0, 60px); opacity: 1; transition-delay: 0.35s; }
.cat img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(80, 60, 200, 0.35);
}
.cat figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 14px 4px 0; flex-wrap: wrap; }
.cat-city { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.08em; }
.cat-word { font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--ink); }

/* ───────── 5장 ───────── */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0.4em 0 2.4em; }
.trio div { border-top: 1px solid var(--ink); padding-top: 12px; }
.trio b { display: block; font-size: 17px; margin-bottom: 6px; }
.trio span { font-size: 14px; color: var(--muted); line-height: 1.6; display: block; }

.doors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 4vh clamp(20px, 6vw, 80px) 6vh var(--col-left);
  max-width: 860px;
  perspective: 1200px;
}
.door {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 210px;
  padding: 20px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--hair);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.door:hover { transform: translateY(-4px); box-shadow: 0 16px 40px color-mix(in srgb, var(--c) 25%, transparent); }
.door::before {
  content: ""; position: absolute; inset: 0;
  background: var(--c);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.6, .05, .2, 1);
  z-index: 2;
}
.doors.in .door::before { transform: perspective(900px) rotateY(-96deg); }
.doors.in .door:nth-child(2)::before { transition-delay: 0.25s; }
.doors.in .door:nth-child(3)::before { transition-delay: 0.5s; }
.doors.in .door:nth-child(4)::before { transition-delay: 0.75s; }
.door::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.door-time { font-family: var(--mono); font-size: 13px; color: var(--c); }
.door b { font-size: 20px; letter-spacing: 0.04em; color: var(--c); margin-top: auto; }
.door-desc { font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ───────── 6장 ───────── */
.sub {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  margin: 3.4em 0 1.4em;
}
.city-roll {
  display: inline;
  font-weight: 700;
  color: var(--accent-2);
  transition: opacity 0.35s;
}
.translate {
  margin: 1vh clamp(20px, 6vw, 80px) 6vh var(--col-left);
  max-width: 520px;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(236, 235, 247, 0.1);
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.translate.on { opacity: 1; }
.tr-row { display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(8px); transition: all 0.6s ease; }
.tr-row--b { align-items: flex-end; }
.tr-row.on { opacity: 1; transform: none; }
.tr-label { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
.tr-bubble { padding: 12px 16px; border-radius: 16px; font-size: 18px; line-height: 1.45; }
.tr-row--a .tr-bubble { background: #f4f1ea; color: #111827; border-bottom-left-radius: 5px; }
.tr-row--a .tr-bubble small { color: #6b7280; }
.tr-row--b .tr-bubble { background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: #fff; border-bottom-right-radius: 5px; text-align: right; }
.tr-bubble small { display: block; font-size: 13px; opacity: 0.8; margin-top: 4px; }
.tr-status {
  align-self: center;
  font-family: var(--mono); font-size: 12px;
  color: var(--cool-d);
  padding: 6px 14px;
  border: 1px dashed rgba(120, 215, 255, 0.5);
  border-radius: 999px;
  opacity: 0; transition: opacity 0.4s;
}
.tr-status.on { opacity: 1; }
.tr-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cool-d); margin-right: 8px; vertical-align: middle; animation: blink 0.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

/* ───────── 7장 ───────── */
.promises {
  list-style: none;
  counter-reset: p;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
  padding: 0;
  margin: 2vh clamp(20px, 6vw, 80px) 6vh var(--col-left);
  max-width: 820px;
}
.promises li {
  counter-increment: p;
  display: flex; gap: 16px; align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--hair);
  font-size: 19px;
  font-weight: 500;
}
.promises li::before {
  content: counter(p, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  min-width: 22px;
}
.js .promises li { opacity: 0; transform: translateX(-10px); transition: all 0.6s ease; }
.js .promises.in li { opacity: 1; transform: none; }
.promises.in li:nth-child(2) { transition-delay: .08s; }
.promises.in li:nth-child(3) { transition-delay: .16s; }
.promises.in li:nth-child(4) { transition-delay: .24s; }
.promises.in li:nth-child(5) { transition-delay: .32s; }
.promises.in li:nth-child(6) { transition-delay: .40s; }
.promises.in li:nth-child(7) { transition-delay: .48s; }
.promises.in li:nth-child(8) { transition-delay: .56s; }

/* ───────── 종장: 화면에 고정되는 무대 ───────── */
.scene--end { padding: 0; min-height: 220vh; text-align: center; overflow: visible; } /* overflow:hidden 이면 sticky 가 동작하지 않는다 */
.end-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 20px 24px;
}
.together {
  display: flex;
  justify-content: center;
  gap: clamp(90px, 14vw, 200px);
  margin-bottom: 3.5vh;
}
.together img {
  width: clamp(100px, 11vw, 165px);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(90, 70, 220, 0.4);
}
.js .together img:first-child { transform: translateX(-40px); }
.js .together img:last-child { transform: translateX(40px); }
.js .together img { transition: transform 2.2s cubic-bezier(.2, .7, .2, 1); }
.js .together.in img { transform: none; }
.end-copy .line { margin-bottom: 0.6em; }
.end-copy .line--xl { font-size: clamp(22px, 2.6vw, 34px); }
.end-copy .pre-chat--answer { margin: 2vh auto 3vh; }
.end-copy .pre-bubble { font-size: clamp(16px, 1.6vw, 20px); padding: 10px 18px; }
.signature { font-family: var(--serif); color: var(--muted); margin-top: 1.4em; }
.end-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 1.8em; }
.end-links a {
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  transition: all 0.3s;
}
.end-links a:hover { border-color: var(--accent); color: var(--accent); }
.end-links .soon {
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px dashed var(--hair);
  color: var(--muted);
  cursor: default;
}
.end-links .soon em { font-style: normal; opacity: 0.7; margin-left: 6px; }
.social { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; margin-top: 1.4em; }
.social a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
}
.social a:hover { color: var(--accent); }
.social a[hidden] { display: none; }

/* ───────── 모바일 ───────── */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .scene { padding: 22vh 0 14vh; }
  .col, .doors, .translate, .promises { margin-left: 20px; margin-right: 20px; }
  .planet-stage { margin: 6vh auto; }
  .line { font-size: 17px; }
  .line--lg { font-size: 20px; }
  .line--xl { font-size: 26px; }
  .doors { grid-template-columns: 1fr 1fr; }
  .trio { grid-template-columns: 1fr; }
  .promises { grid-template-columns: 1fr; }
  .scene--hero .col--center { padding-top: 46vh; }
  /* 피터가 상단에 머무는 동안 본문이 그 아래로 사라지게 */
  .hud { padding-bottom: 96px; }
  .hud::before {
    -webkit-mask-image: linear-gradient(#000 62%, transparent);
    mask-image: linear-gradient(#000 62%, transparent);
  }
  /* 종장 화면에서는 아래 링크와 겹치지 않게 장 이름을 감춘다 */
  html[data-scene="s8"] .hud-chapter { opacity: 0; }
  #peter { z-index: 21; }
  .planet-stage { width: 74vw; }
  .end-stage { justify-content: flex-start; padding-top: 80px; }
  .end-copy .pre-chat--answer { margin: 1.4vh auto 2vh; }
  .end-copy .pre-chat--answer { gap: 12px; }
  .signature { margin-top: 0.8em; }
  .end-links { gap: 8px; margin-top: 1.1em; }
  .end-links a, .end-links .soon { font-size: 12px; padding: 8px 13px; }
  .end-links .soon em { margin-left: 4px; }
  .social { margin-top: 1em; gap: 4px 16px; }
  html[data-scene="s8"] .hud { padding-bottom: 20px; }
  .layer-panel { width: 100vw; height: 100%; border-radius: 0; }
  .layer-bar { padding: 10px 12px 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .layer-tabs { gap: 18px; }
  .layer-tab::after { bottom: -11px; }
  .together img { width: 92px; }
  .together { gap: 92px; margin-bottom: 2.5vh; }
  .cats { gap: 12px; }
  .cat figcaption { flex-direction: column; gap: 2px; }
  .cat-word { font-size: 14px; }
}

/* 화면이 짧은 폰: 종장 무대가 한 화면에 들어오게 줄인다 */
@media (max-width: 760px) and (max-height: 740px) {
  .end-stage { padding-top: 62px; }
  .together img { width: 70px; }
  .together { gap: 84px; margin-bottom: 1.2vh; }
  .end-copy .line--lg { font-size: 18px; }
  .end-copy .line--xl { font-size: 22px; }
  .end-copy .pre-bubble { font-size: 15px; padding: 8px 14px; }
  .end-copy .pre-chat--answer { margin: 1vh auto 1.4vh; gap: 8px; }
  .signature { margin-top: 0.4em; font-size: 15px; }
  .end-links { margin-top: 0.8em; }
  .social { margin-top: 0.8em; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js .line[data-type] .ch { opacity: 1; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* 좁은 폰: 탭은 짧은 이름(보관소 · 노트 · 제작소), 닫기는 ✕ 만 */
@media (max-width: 560px) {
  .l-long, .l-close-t { display: none; }
  .l-short { display: inline; }
  .layer-close { padding: 5px 10px; }
}

/* ───────── 스크롤바: 보관소·제작 노트와 같은 얇고 조용한 막대 ─────────
   장면이 밝고 어두워질 때(data-space) 막대 색도 따라 바뀐다. 바탕은 비워 두어 장면 색이 그대로 보인다. */
:root { --sb-thumb: rgba(17, 24, 39, 0.16); --sb-thumb-hover: rgba(109, 40, 217, 0.55); }
html[data-space="dark"] { --sb-thumb: rgba(232, 232, 240, 0.16); --sb-thumb-hover: rgba(175, 130, 255, 0.6); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 4px solid transparent;
  background-clip: content-box;
  min-height: 48px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: content-box; border-width: 3px; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}

/* ═════════════════════════ v2 — 글을 줄이고 그림·움직임으로 ═════════════════════════
   사람 = 점 (#crowd), 피터 = 오브 (#peter). 장면 그림은 같은 선 굵기의 손그림 SVG 로 통일한다.
   선은 잉크색, 「이어지는 것」(사람과 사람 사이에 오가는 것)만 보라색으로 칠한다. */

#crowd { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
/* 점·선 위에서도 글이 또렷하게: 바탕색으로 살짝 감싼다 */
.line, .vig figcaption, .trio-cell > div, .stage-cap { text-shadow: 0 0 10px var(--bg), 0 0 3px var(--bg); }
.scene--tall { min-height: 150vh; }
.scene--tall .turn { margin-top: 34vh; }

/* 선 그림 공통 */
.ln { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.82; }
.ln--soft { opacity: 0.38; }
.ln--dash { stroke-dasharray: 2 6; opacity: 0.45; }
.ac { fill: var(--accent); }
.ac-ln { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.glow { fill: rgba(255, 196, 140, 0.32); filter: blur(7px); }
svg g { transform-box: fill-box; }

/* 그려지듯 나타나기: 이 장면들의 첫 등장 한 번만 */
.js .vigs .ln:not(.ln--dash), .js .trio .ln { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1); }
.js .vigs.in .ln, .js .trio.in .ln { stroke-dashoffset: 0; }
.js .vigs.in .vig:nth-child(2) .ln, .js .trio.in .trio-cell:nth-child(2) .ln { transition-delay: 0.35s; }
.js .vigs.in .vig:nth-child(3) .ln, .js .trio.in .trio-cell:nth-child(3) .ln { transition-delay: 0.7s; }

/* ───────── 1장: 그림 셋 ───────── */
.vigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); margin: 0.2em 0 3em; }
.vig { margin: 0; }
.vig svg { display: block; width: 100%; height: auto; overflow: visible; }
.vig figcaption { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }

.vigs.in .kid { animation: hop 4.4s ease-in-out 1.6s infinite both; }
.vigs.in .kid--2 { animation-delay: 3.8s; }
@keyframes hop {
  0% { transform: translate(0, 0); opacity: 0; }
  6% { opacity: 1; }
  16% { transform: translate(20px, -6px); }
  26% { transform: translate(40px, 0); }
  36% { transform: translate(60px, -6px); }
  46%, 82% { transform: translate(80px, 0); opacity: 1; }
  92%, 100% { transform: translate(80px, 0); opacity: 0; }
}
.vigs.in .who--l { transform-origin: 50% 100%; animation: leanL 5s ease-in-out 1.8s infinite; }
.vigs.in .who--r { transform-origin: 50% 100%; animation: leanR 5s ease-in-out 1.8s infinite; }
@keyframes leanL { 0%, 30%, 100% { transform: none; } 45%, 75% { transform: rotate(7deg); } }
@keyframes leanR { 0%, 30%, 100% { transform: none; } 45%, 75% { transform: rotate(-7deg); } }
.vigs.in .cup--l { animation: clinkL 5s ease-in-out 1.8s infinite; }
.vigs.in .cup--r { animation: clinkR 5s ease-in-out 1.8s infinite; }
@keyframes clinkL { 0%, 52%, 100% { transform: none; } 58% { transform: translate(1.5px, -3px) rotate(10deg); } 64% { transform: none; } }
@keyframes clinkR { 0%, 52%, 100% { transform: none; } 58% { transform: translate(-1.5px, -3px) rotate(-10deg); } 64% { transform: none; } }
.js .vig--game .say { opacity: 0; transform-origin: 50% 100%; }
.vigs.in .say--a { animation: sayA 4.8s ease 2s infinite both; }
.vigs.in .say--b { animation: sayB 4.8s ease 2s infinite both; }
.vigs.in .pc { animation: jump 4.8s ease 2s infinite both; }
@keyframes sayA { 0% { opacity: 0; transform: scale(.4); } 8%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: none; } }
@keyframes sayB { 0%, 22% { opacity: 0; transform: scale(.4); } 30%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: none; } }
@keyframes jump { 0%, 44%, 60%, 100% { transform: none; } 50% { transform: translateY(-7px); } 55% { transform: none; } }

/* ───────── 2장: 화면 셋 ───────── */
.col--wide { max-width: 700px; }
.phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: 16px clamp(14px, 2.4vw, 30px);
  margin: 0.2em 0 3.4em;
}
.phone-cell { display: flex; justify-content: center; }
.phone {
  position: relative;
  width: 100%;
  max-width: 176px;
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  background: #fff;
  border: 1.5px solid rgba(17, 24, 39, 0.16);
  box-shadow: 0 22px 60px rgba(17, 24, 39, 0.09);
  overflow: hidden;
  padding: 14px 12px;
}
.phone::before { content: ""; position: absolute; top: 7px; left: 50%; width: 34px; height: 4px; margin-left: -17px; border-radius: 4px; background: rgba(17, 24, 39, 0.12); }
.phone-cap { margin: 0; font-size: 15.5px; line-height: 1.55; text-align: center; }

/* 넘기기 */
.deck { position: absolute; inset: 22px 14px 62px; }
.card {
  position: absolute; inset: 0;
  border-radius: 16px;
  background: linear-gradient(170deg, #eef0f6, #dfe3ec);
  border: 1px solid rgba(17, 24, 39, 0.07);
  transition: transform 0.5s cubic-bezier(.3,.6,.3,1), opacity 0.5s ease;
}
.card:nth-child(2n) { background: linear-gradient(170deg, #f1eefa, #e2dcf3); }
.card:nth-child(3n) { background: linear-gradient(170deg, #ecf5f7, #d9e9ee); }
.card::before { content: ""; position: absolute; left: 50%; top: 30%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(17, 24, 39, 0.13); }
.card::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 62%; height: 26%; transform: translateX(-50%); border-radius: 50% 50% 12px 12px; background: rgba(17, 24, 39, 0.1); }
.card:nth-last-child(2) { transform: translateY(6px) scale(0.95); }
.card:nth-last-child(3) { transform: translateY(12px) scale(0.9); opacity: 0.8; }
.card:nth-last-child(4) { transform: translateY(18px) scale(0.85); opacity: 0.5; }
.card.gone--l { transform: translate(-125%, -12px) rotate(-18deg); opacity: 0; }
.card.gone--r { transform: translate(125%, -12px) rotate(18deg); opacity: 0; }
.deck-btns { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 18px; }
.deck-btns span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #9ca3af; border: 1px solid rgba(17, 24, 39, 0.1); }
.deck-btns span + span { color: var(--warm); }

/* 망설임 · 끊김 */
.ph-head { display: flex; align-items: center; gap: 8px; padding: 8px 2px 12px; border-bottom: 1px solid rgba(17, 24, 39, 0.06); }
.ph-av { width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; flex: none; }
.ph-name { width: 54px; height: 8px; border-radius: 4px; background: #e5e7eb; }
.ph-input {
  position: absolute; left: 10px; right: 10px; bottom: 14px;
  height: 34px; padding: 0 12px;
  display: flex; align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.12); border-radius: 17px;
  font-size: 13px; color: #111827; white-space: nowrap; overflow: hidden;
}
.caret { width: 1.5px; height: 15px; margin-left: 1px; background: var(--warm); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ph-out { display: flex; justify-content: flex-end; margin-top: 18px; }
.ph-out span { padding: 7px 11px; border-radius: 14px 14px 4px 14px; background: #ede9fe; color: #4c1d95; font-size: 13px; line-height: 1.4; }
.ph-read { display: block; text-align: right; font-size: 11px; color: #9ca3af; margin-top: 4px; }
.ph-time { position: absolute; left: 0; right: 0; bottom: 22%; height: 24px; }
.ph-time span {
  position: absolute; left: 50%; transform: translate(-50%, 6px);
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; color: #9ca3af; white-space: nowrap;
  border: 1px solid rgba(17, 24, 39, 0.08);
  opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease;
}
.ph-time span.on { opacity: 1; transform: translate(-50%, 0); }

/* ───────── 4장: 세 조건 (그림 + 두 줄) ───────── */
.trio .trio-cell { border: 0; padding: 0; }
.trio-cell svg { display: block; width: 86px; height: auto; margin-bottom: 14px; overflow: visible; }
.trio-cell > div { border-top: 1px solid var(--hair); padding-top: 12px; }
.trio.in .ball { animation: pass 2.6s ease-in-out 1.6s infinite alternate; }
@keyframes pass { 0% { transform: translate(-22px, 10px); } 50% { transform: translate(0, -8px); } 100% { transform: translate(22px, 10px); } }

/* ───────── 5장: 둘의 대화 ───────── */
.cat-word { font-style: normal; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.thread { position: relative; z-index: 2; margin: 2vh clamp(20px, 6vw, 80px) 0 var(--col-left); max-width: 600px; }
.stage + .stage { margin-top: 8vh; }
.stage-cap { color: var(--muted); font-size: 17px; margin-bottom: 1em; }
.stage-cap.line--lg { color: var(--ink); font-size: clamp(21px, 2.1vw, 27px); }
.stage-cap.line--soft { color: var(--muted); margin-top: 1.2em; }
.msgs { display: flex; flex-direction: column; gap: 10px; }
.msg {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 84%;
  padding: 11px 16px 10px;
  border-radius: 20px;
  font-size: 16px; line-height: 1.5;
}
.msg--busan { align-self: flex-start; background: #dff3f9; color: #0b3440; border-bottom-left-radius: 6px; }
.msg--paris { align-self: flex-end; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; border-bottom-right-radius: 6px; }
.msg-t { font-size: 13.5px; line-height: 1.5; opacity: 0.74; padding-top: 6px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
/* 내 언어로 쓴 말에는 통역을 붙이지 않는다 */
html[lang="ko"] .msg--busan .msg-t, html[lang="fr"] .msg--paris .msg-t { display: none; }
.js .msgs .msg { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .msgs .msg-t { opacity: 0; transition: opacity 0.9s ease; }
.js .msgs.in .msg { opacity: 1; transform: none; }
.js .msgs.in .msg-t { opacity: 0.74; transition-delay: 0.9s; }
.js .msgs.in .msg--paris { transition-delay: 0.8s; }
.js .msgs.in .msg--paris .msg-t { transition-delay: 1.7s; }
/* 친구가 된 뒤: 내용은 보이지 않는다 */
.msgs--private .msg { filter: blur(4px); padding: 14px 18px; }
.msgs--private .bar { display: block; width: 200px; max-width: 100%; height: 8px; border-radius: 5px; background: currentColor; opacity: 0.4; }
.msgs--private .bar + .bar { margin-top: 6px; }
.msgs--private .bar--s { width: 120px; }
.js .msgs--private.in .msg:nth-child(3) { transition-delay: 1.4s; }

/* ───────── 6장: 없는 것 셋 ───────── */
.nots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); margin: 1.2em 0 3em; }
.not svg { display: block; width: 84px; height: 84px; overflow: visible; }
.not .ln { opacity: 0.7; }
.strike { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.js .nots .strike { stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset 0.7s ease 0.5s; }
.js .nots.in .strike { stroke-dashoffset: 0; }
.js .nots.in .not:nth-child(2) .strike { transition-delay: 1s; }
.js .nots.in .not:nth-child(3) .strike { transition-delay: 1.5s; }
.not-cap { margin: 0.8em 0 0; font-size: 17px; line-height: 1.5; }

/* ───────── v2 모바일 ───────── */
@media (max-width: 760px) {
  .thread { margin-left: 20px; margin-right: 20px; }
  .vigs { grid-template-columns: 1fr; gap: 18px; }
  .vig { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
  .vig figcaption { margin: 0; font-size: 15px; }
  .phones { grid-template-columns: 116px 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 18px 18px; align-items: center; }
  .phone { border-radius: 20px; padding: 10px 8px; }
  .phone-cap { text-align: left; font-size: 16px; }
  .deck { inset: 18px 10px 52px; }
  .deck-btns { bottom: 12px; gap: 12px; }
  .deck-btns span { width: 26px; height: 26px; font-size: 11px; }
  .ph-input { height: 28px; font-size: 11px; left: 8px; right: 8px; bottom: 10px; padding: 0 9px; }
  .ph-out span { font-size: 11px; padding: 6px 9px; }
  .ph-time span { font-size: 10px; }
  .trio-cell { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; }
  .trio-cell svg { width: 72px; margin: 0; }
  .msg { max-width: 92%; font-size: 15px; }
  .nots { gap: 12px; }
  .not svg { width: 56px; height: 56px; }
  .not-cap { font-size: 14px; }
  .scene--tall { min-height: 130vh; }
}

/* 짧은 설명 줄(화면 아래·그림 아래·대화 단계)은 칸이 좁으므로 링크도 줄을 바꿀 수 있게 한다 */
.phones > *, .nots > *, .vigs > *, .trio > * { min-width: 0; }
.phone-cap a.rec, .not-cap a.rec, .stage-cap a.rec { white-space: normal; }
.ph-time span { max-width: 88%; white-space: normal; text-align: center; line-height: 1.3; }
@media (max-width: 760px) {
  .nots { grid-template-columns: 1fr; gap: 14px; }
  .not { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; }
  .not-cap { margin: 0; }
}
.ph-time span { left: 0; right: 0; margin: 0 auto; width: max-content; transform: translateY(6px); }
.ph-time span.on { transform: none; }

/* 넘기는 카드의 사람 모양: 머리와 어깨를 붙여 흔한 프로필 사진 자리처럼 (머리·몸이 떨어져 보이지 않게) */
.card { overflow: hidden; }
.card::before { top: 38%; width: 36%; }
.card::after { top: 54%; bottom: -12%; width: 74%; height: auto; border-radius: 50% 50% 0 0 / 46% 46% 0 0; }
.card::after { top: 55%; width: 86%; border-radius: 50% 50% 0 0 / 64% 64% 0 0; }

/* ───────── 위 고정: 웹 버전 · 공식 채널 (cooctal.com 의 ZUZ 소개와 같은 둥근 테두리 아이콘) ───────── */
.hud-nav { gap: 10px; }
.hud-links { display: flex; align-items: center; gap: 6px; }
.hud-links a {
  pointer-events: auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted);
  border: 1px solid var(--hair);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  text-decoration: none;
  transition: color 0.25s, background-color 0.25s, border-color 0.25s, transform 0.25s;
}
.hud-links svg { display: block; width: 13px; height: 13px; fill: currentColor; }
/* 웹 버전: 로고와 테두리만, 조금 더 또렷하게 */
.hud-links a.hud-web { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.hud-links a.hud-web svg { width: 17px; height: 17px; }
.hud-links a:hover, .hud-links a:focus-visible {
  color: var(--bg); background: var(--ink); border-color: var(--ink);
  transform: translateY(-1px); outline: none;
}
.hud-sep { width: 1px; height: 14px; margin: 0 3px; background: var(--hair); }
@media (max-width: 760px) {
  .hud-nav { gap: 6px; }
  .hud-links { gap: 4px; }
  .hud-links a { width: 27px; height: 27px; }
  .hud-links svg { width: 11px; height: 11px; }
  .hud-links a.hud-web svg { width: 15px; height: 15px; }
  .hud-sep { margin: 0 1px; }
}
/* 휴대폰: 피터가 위 고정 줄 아래로 내려온 만큼, 본문이 사라지는 띠도 조금 길게 */
@media (max-width: 760px) {
  .hud { padding-bottom: 128px; }
  html[data-scene="s8"] .hud { padding-bottom: 20px; }
}