/* ==========================================================================
   낯선 점술관 (strange-oracle) — 제품 전용 스타일 (2차: 신비로움·움직임 강화)
   - 먼저 ../../common/base.css를 불러온다. 색·간격·글자 크기·움직임은 base.css 토큰을 쓴다.
   - 제품 전용 치수는 아래 :root에 이름을 붙여 한 곳에만 둔다.
   - 움직임 원칙: transform·opacity 위주, 긴 글 뒤에서는 계속 움직이는 것 금지(body.is-reading에서 배경 정지).
   - 명세: design/strange-oracle.md "애니메이션 명세"
   ========================================================================== */

/* ───────── 제품 토큰 ───────── */
:root {
  --font-serif: "Gowun Batang", "Noto Serif KR", "AppleMyungjo", serif;
  --font-latin: "Cinzel", "Gowun Batang", serif;
  --font-symbol: "Noto Sans Runic", "Segoe UI Historic", "Segoe UI Symbol", sans-serif;

  --topbar-h: 52px;
  --door-min-h: 0px;     /* (2단계) 여섯 문 2×3: 높이는 같은 줄끼리 grid가 맞춘다 */
  --portal: 76px;        /* (2단계) 104 → 76: 360×640에서 첫 줄 포털 2개 + 둘째 줄 포털이 첫 화면에 */
  --emblem: 88px;
  --pouch: 184px;
  --ring-r: 128px;
  --stone-w: 84px;
  --stone-h: 104px;
  --mini-stone-w: 64px;
  --mini-stone-h: 76px;
  --dial: min(330px, 86vw);
  --fs-year: 4.5rem;     /* 베다의 방 되감기 연도 */
  --fs-numeral: 2.5rem;  /* 장 번호 I·II·III·IV */
  --ritual-ms: 5000ms;   /* 베다의 방 의식 길이 (JS 타이머와 맞춘다) */
  --wheel-ms: 4400ms;    /* 별 바퀴 되감기 */
  --stone-shape: 48% 52% 46% 54% / 55% 50% 50% 45%;
}

/* ───────── 방마다 강조색 (동명도: 명도·채도는 base 토큰, hue만 바꿈) ───────── */
[data-room="hall"] { --accent-h: var(--hue-gold); --accent-c-scale: 1;   --room-h: 285; }
[data-room="rune"] { --accent-h: var(--hue-ice);  --accent-c-scale: 0.8; --room-h: 240; }
[data-room="star"] { --accent-h: var(--hue-moon); --accent-c-scale: 0.8; --room-h: 295; }
/* (2단계) 네 방: 강조색 명도 0.84 고정, hue와 채도 배율만 다르다. --room-h는 바탕·카드·포털 안쪽 어둠의 색조 */
[data-room="ogham"]   { --accent-h: var(--hue-forest); --accent-c-scale: 0.85; --room-h: 160; } /* 자작나무 숲의 이끼빛 · 어둑한 숲 */
[data-room="decan"]   { --accent-h: var(--hue-sand);   --accent-c-scale: 1.1;  --room-h: 55; }  /* 정오 사막의 호박빛 금 · 모래 밤 */
[data-room="tzolkin"] { --accent-h: var(--hue-jade);   --accent-c-scale: 0.9;  --room-h: 185; } /* 터키석 · 정글의 깊은 청록 */
[data-room="sibyl"]   { --accent-h: var(--hue-candle); --accent-c-scale: 0.8;  --room-h: 340; } /* 촛불의 장밋빛 · 로마 자줏빛 신전 */

/* ───────── 바탕 ───────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-serif);
  background-color: oklch(0.12 0.035 var(--room-h, 285));
}
.runic { font-family: var(--font-symbol); }
.latin { font-family: var(--font-latin); letter-spacing: 0.06em; color: var(--accent-dim); }
.btn { font-family: var(--font-serif); }
.rune-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ═════════ 우주 배경 ═════════
   성운 2겹(90~120초 흐름) · 오로라(26초 흔들림) · 원근 별 3겹(느린 흐름 + 스크롤 시차 --scroll) · 먼지 · 유성 2개 */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, oklch(0.24 0.07 var(--room-h)) 0%, oklch(0.15 0.045 var(--room-h)) 55%, oklch(0.1 0.03 var(--room-h)) 100%);
  transition: opacity var(--dur-slow);
}
.cosmos > * { position: absolute; will-change: transform; }

.cosmos__nebula {
  left: 50%;
  top: 40%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  border-radius: 50%;
}
.cosmos__nebula--a {
  background:
    radial-gradient(closest-side at 32% 28%, oklch(0.42 0.12 var(--room-h) / 0.5), transparent 72%),
    radial-gradient(closest-side at 72% 62%, oklch(0.34 0.1 calc(var(--room-h) + 40) / 0.38), transparent 70%);
  animation: nebula-drift 90s ease-in-out infinite alternate;
}
.cosmos__nebula--b {
  background:
    radial-gradient(closest-side at 62% 22%, oklch(0.5 0.09 var(--accent-h) / 0.22), transparent 70%),
    radial-gradient(closest-side at 22% 78%, oklch(0.3 0.08 330 / 0.3), transparent 70%);
  animation: nebula-drift 120s ease-in-out infinite alternate-reverse;
}
@keyframes nebula-drift {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(28deg) scale(1.14) translate3d(3%, -2%, 0); }
}

.cosmos__aurora {
  left: -30%;
  right: -30%;
  top: -8%;
  height: 58vh;
  background: linear-gradient(100deg,
    transparent 8%,
    oklch(0.72 0.12 var(--accent-h) / 0.16) 28%,
    oklch(0.62 0.12 calc(var(--accent-h) + 60) / 0.12) 48%,
    oklch(0.72 0.1 var(--accent-h) / 0.15) 68%,
    transparent 90%);
  /* (2026-10-25 성능) filter: blur(28px) 뺌 — 흔들리는 큰 판을 매 프레임 흐리게 다시 그려 휴대폰에서 끊겼다. 대신 가장자리를 더 부드럽게 */
  -webkit-mask: linear-gradient(to bottom, transparent, #000 30%, #000 55%, transparent);
  mask: linear-gradient(to bottom, transparent, #000 30%, #000 55%, transparent);
  transform-origin: 50% 0;
  animation: aurora-sway 26s ease-in-out infinite alternate;
}
@keyframes aurora-sway {
  0% { transform: translate3d(-6%, 0, 0) skewY(-4deg) scaleY(1); opacity: 0.7; }
  50% { opacity: 1; }
  100% { transform: translate3d(6%, 2%, 0) skewY(3deg) scaleY(1.18); opacity: 0.8; }
}

/* 원근 별: 멀수록 작고 흐리고 느리다. translate = 스크롤 시차(JS가 :root에 --scroll=scrollY), transform = 흐름 */
.cosmos__stars { left: 0; top: 0; width: 100%; background-repeat: repeat; }
.cosmos__stars--far {
  height: calc(100% + 900px);
  background-size: 180px 180px;
  background-image:
    radial-gradient(1px 1px at 20px 30px, oklch(1 0 0 / 0.7), transparent),
    radial-gradient(1px 1px at 120px 80px, oklch(1 0 0 / 0.5), transparent),
    radial-gradient(1px 1px at 70px 150px, oklch(1 0 0 / 0.6), transparent),
    radial-gradient(1px 1px at 160px 120px, oklch(1 0 0 / 0.4), transparent),
    radial-gradient(1px 1px at 40px 100px, oklch(1 0 0 / 0.5), transparent);
  translate: 0 calc(var(--scroll, 0) * -0.02px);
  animation: stars-far 240s linear infinite;
}
.cosmos__stars--mid {
  height: calc(100% + 880px);
  background-size: 220px 220px;
  background-image:
    radial-gradient(1.4px 1.4px at 50px 60px, oklch(1 0 0 / 0.8), transparent),
    radial-gradient(1.4px 1.4px at 180px 20px, oklch(0.95 0.04 var(--accent-h) / 0.7), transparent),
    radial-gradient(1.4px 1.4px at 140px 170px, oklch(1 0 0 / 0.6), transparent);
  translate: 0 calc(var(--scroll, 0) * -0.05px);
  animation: stars-mid 170s linear infinite;
}
.cosmos__stars--near {
  height: calc(100% + 1040px);
  background-size: 260px 260px;
  background-image:
    radial-gradient(2px 2px at 30px 200px, oklch(1 0 0 / 0.9), transparent),
    radial-gradient(2.2px 2.2px at 210px 90px, oklch(0.95 0.06 var(--accent-h) / 0.85), transparent);
  translate: 0 calc(var(--scroll, 0) * -0.1px);
  animation: stars-near 120s linear infinite;
}
@keyframes stars-far { to { transform: translate3d(0, -900px, 0); } }
@keyframes stars-mid { to { transform: translate3d(0, -880px, 0); } }
@keyframes stars-near { to { transform: translate3d(0, -1040px, 0); } }

.cosmos__dust {
  left: -10%;
  top: 0;
  width: 120%;
  height: calc(100% + 600px);
  opacity: 0.35;
  background-size: 150px 200px;
  background-image:
    radial-gradient(0.8px 0.8px at 20px 40px, oklch(0.9 0.05 var(--accent-h)), transparent),
    radial-gradient(0.8px 0.8px at 110px 160px, oklch(0.9 0.05 var(--accent-h)), transparent);
  animation: dust-rise 70s linear infinite;
}
@keyframes dust-rise { to { transform: translate3d(40px, -600px, 0); } }

/* 유성: 대부분 쉬다가 마지막 8~10% 동안 한 번 가로지른다 */
.cosmos__meteor {
  top: 10%;
  left: 72%;
  width: 150px;
  height: 1.5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, oklch(1 0 0 / 0.95), oklch(0.9 0.05 var(--accent-h) / 0.45) 30%, transparent);
  opacity: 0;
  transform-origin: 0 50%;
  animation: meteor 13s linear 4s infinite;
}
.cosmos__meteor--late { top: 28%; left: 96%; width: 110px; animation-duration: 19s; animation-delay: 11s; }
@keyframes meteor {
  0%, 90% { opacity: 0; transform: rotate(-32deg) translate3d(0, 0, 0) scaleX(0.3); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-32deg) translate3d(-440px, 0, 0) scaleX(1); }
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-bg);
  pointer-events: none;
  opacity: 0.8;
  transition: opacity var(--dur-slow);
}

/* 긴 글 읽는 중: 배경 움직임 정지 + 어둡게 (본문 뒤에서 계속 움직이는 효과 금지) */
body.is-reading .cosmos { opacity: 0.45; }
body.is-reading .cosmos > * { animation-play-state: paused; }
body.is-reading .cosmos__meteor,
body.is-reading .cosmos__dust { display: none; }
body.is-reading #sky { opacity: 0.2; }

/* ───────── 빨려 들어가는 빛 (포털 → 방) ───────── */
.warp {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--warp-x, 50%) var(--warp-y, 45%),
    oklch(0.97 0.03 var(--accent-h)) 0,
    oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.8) 8%,
    oklch(0.3 0.08 var(--room-h) / 0.6) 30%,
    transparent 60%);
  transform-origin: var(--warp-x, 50%) var(--warp-y, 45%);
}
.warp.is-active { animation: warp 800ms var(--ease-in-out) both; }
@keyframes warp {
  0% { opacity: 0; transform: scale(0.4); }
  45% { opacity: 1; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* ───────── 상단 막대 ───────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: oklch(0.14 0.04 var(--hue-neutral) / 0.94); /* (2026-10-25 성능) 뒤 흐림(backdrop-filter) 대신 거의 불투명한 바탕 — 스크롤 중 매 프레임 흐림 계산 없앰 */
  border-bottom: 1px solid oklch(0.4 0.04 var(--hue-neutral) / 0.45);
}
.topbar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--page-max);
  height: var(--topbar-h);
  margin: 0 auto;
  padding: 0 var(--space-2);
}
.topbar__back,
.topbar__clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.topbar__back { grid-column: 1; }
.topbar__clear { grid-column: 3; }
.topbar__clear-icon { width: 16px; height: 16px; flex-shrink: 0; }
.topbar__chapter {
  display: none;
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.topbar__count { margin-left: var(--space-1); color: var(--c-text-faint); font-family: var(--font-sans); }

.read-progress {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-max);
  gap: var(--space-1);
  padding: 0 var(--space-3);
  height: 3px;
}
.read-progress__seg { position: relative; flex: 1; border-radius: var(--radius-pill); background: var(--c-line); overflow: hidden; }
.read-progress__seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform-origin: left;
  transform: scaleX(var(--fill, 0));
  transition: transform var(--dur-base) linear;
}
.read-progress__seg.is-done::after { transform: scaleX(1); }
/* 결과 화면에서만 (허브·입력·의식에서는 숨김) */
.topbar.is-reading .topbar__chapter { display: block; }
.topbar.is-reading .read-progress { display: flex; }
/* 13단계 UI 점검: 360px 장 안에서는 가운데 칸(약 75px)에 "장 이름 · n / N"이 들어가지 않아 말줄임으로 잘렸다.
   같은 정보가 종이의 머리줄(장 이름)과 쪽 번호에 있으므로 좁은 화면에서는 눈에서만 숨긴다(낭독은 book-live·이 칸 그대로). */
@media (max-width: 419px) {
  .topbar.is-reading:not(.is-room) .topbar__chapter {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* ───────── 화면과 화면 전환: 흐림 속에서 떠오르고, 빛 속으로 사라진다 ───────── */
.screen { display: none; padding: var(--space-6) 0 var(--space-16); }
.screen.is-active {
  display: block;
  animation: screen-in 700ms var(--ease-reveal) both;
}
.screen.is-leaving {
  display: block;
  animation: screen-out 320ms var(--ease-in-out) forwards;
}
@keyframes screen-in {
  from { opacity: 0; transform: scale(1.03); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes screen-out {
  to { opacity: 0; transform: scale(0.97); filter: blur(6px); }
}

.screen--dock.is-active {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--topbar-h));
  padding-bottom: 0;
}
.cta-dock {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  padding: var(--space-8) 0 calc(var(--space-4) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, oklch(0.12 0.035 var(--room-h)) 55%, transparent);
}

/* ═════════ 0. 허브 ═════════ */
.hub-head { text-align: center; padding: var(--space-2) 0 var(--space-5); }
.hub-sigil { width: 52px; height: 52px; margin: 0 auto var(--space-2); }
.hub-sigil svg { width: 100%; height: 100%; overflow: visible; }
.hub-sigil__orbit {
  fill: none;
  stroke: var(--accent-line);
  stroke-dasharray: 1;
  animation: base-draw 1.6s var(--ease-out) 0.2s both;
}
.hub-sigil__orbit--inner { stroke-dasharray: 0.01 0.03; animation: none; }
.hub-sigil__moon {
  fill: oklch(0.95 0.05 var(--accent-h));
  filter: drop-shadow(0 0 10px var(--accent-glow));
  transform-box: fill-box;
  transform-origin: center;
  animation: base-fade-in 1.2s ease-out 0.6s both, moon-breathe 5s ease-in-out 2s infinite;
}
.hub-sigil__star {
  fill: oklch(0.98 0.02 90);
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 2.8s ease-in-out infinite;
}
.hub-sigil__star:nth-of-type(2) { animation-delay: -1s; }
.hub-sigil__star:nth-of-type(3) { animation-delay: -2s; }
@keyframes moon-breathe { 50% { filter: drop-shadow(0 0 18px var(--accent)); } }
@keyframes twinkle { 50% { opacity: 0.3; transform: scale(0.6); } }

.logo {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: 0.06em;
  background: linear-gradient(100deg, var(--accent-dim) 0%, oklch(0.97 0.04 90) 35%, var(--accent) 50%, oklch(0.97 0.04 90) 65%, var(--accent-dim) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px var(--accent-soft));
  animation: logo-shimmer 9s ease-in-out infinite;
}
@keyframes logo-shimmer {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
}
.hub-lead { font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--c-text-muted); }

/* 포털 */
.doors {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.door {
  --arch: calc((100cqi - var(--space-3)) / 4);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--door-min-h);
  padding: var(--space-6) var(--space-2) var(--space-4); /* (2단계) 여섯 문: 좁고 낮게. 위 24px는 장 번호 자리 */
  border-radius: var(--arch) var(--arch) var(--radius-lg) var(--radius-lg);
  border: 1px solid var(--accent-line);
  background: linear-gradient(180deg, oklch(0.24 0.05 var(--room-h) / 0.85), oklch(0.16 0.04 var(--room-h) / 0.9));
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.door::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.14);
  border-radius: calc(var(--arch) - 6px) calc(var(--arch) - 6px) calc(var(--radius-lg) - 6px) calc(var(--radius-lg) - 6px);
  pointer-events: none;
}
.door:hover, .door:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 0 40px var(--accent-soft);
}
.door__portal {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--portal);
  aspect-ratio: 1;
  margin-bottom: var(--space-3);
  border-radius: 50%;
}
.door__portal::before { /* 바깥 맥동 빛 */
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 52%, var(--accent-glow) 62%, transparent 74%);
  animation: portal-pulse 3.2s ease-in-out infinite;
}
.door__portal::after { /* 테두리 */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  box-shadow: 0 0 18px var(--accent-glow), inset 0 0 26px var(--accent-soft);
}
.door__swirl { /* 안쪽 소용돌이 빛 */
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    oklch(0.18 0.06 var(--room-h)),
    oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.75),
    oklch(0.24 0.08 var(--room-h)),
    oklch(0.92 0.05 var(--accent-h) / 0.8),
    oklch(0.18 0.06 var(--room-h)),
    oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.6),
    oklch(0.18 0.06 var(--room-h)));
  /* (2단계) 포털 6개가 동시에 돌아 흐림(filter)은 뺐다 — 대신 가장자리를 마스크로 부드럽게 */
  -webkit-mask: radial-gradient(circle, #000 55%, transparent 72%);
  mask: radial-gradient(circle, #000 55%, transparent 72%);
  animation: portal-swirl 16s linear infinite;
}
.door__swirl::after { /* 가운데 빛샘 */
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.97 0.03 var(--accent-h) / 0.9), transparent 70%);
  animation: portal-core 3.2s ease-in-out infinite;
}
/* (2단계) 여섯 문: 짝수 문은 반대로 돌고, 맥동은 문마다 반 박자씩 어긋난다 */
.door:nth-child(even) .door__swirl { animation-direction: reverse; }
.door:nth-child(2) .door__portal::before, .door:nth-child(2) .door__swirl::after { animation-delay: -0.53s; }
.door:nth-child(3) .door__portal::before, .door:nth-child(3) .door__swirl::after { animation-delay: -1.07s; }
.door:nth-child(4) .door__portal::before, .door:nth-child(4) .door__swirl::after { animation-delay: -1.6s; }
.door:nth-child(5) .door__portal::before, .door:nth-child(5) .door__swirl::after { animation-delay: -2.13s; }
.door:nth-child(6) .door__portal::before, .door:nth-child(6) .door__swirl::after { animation-delay: -2.67s; }
@keyframes portal-swirl { to { transform: rotate(360deg); } }
@keyframes portal-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.07); }
}
@keyframes portal-core { 50% { opacity: 0.55; transform: scale(0.82); } }

.door__glyph {
  position: relative;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  line-height: 1;
  color: oklch(0.98 0.02 var(--accent-h));
  text-shadow: 0 0 12px var(--accent), 0 0 30px var(--accent-glow);
}
.door__moon { width: 36px; height: 36px; filter: drop-shadow(0 0 10px var(--accent)); }
.door__glyph.runic { font-size: 2rem; }
/* (2단계) 선 도형 아이콘(오검 획·해시계·톱니·촛불) */
.door__icon {
  width: 34px;
  height: 34px;
  overflow: visible;
  fill: none;
  stroke: oklch(0.98 0.02 var(--accent-h));
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--accent));
}
.door__icon--tall { width: 22px; height: 44px; stroke-width: 4.5; }
.door__num { position: absolute; top: var(--space-2); left: 50%; transform: translateX(-50%); font-family: var(--font-latin); font-size: var(--fs-2xs); letter-spacing: 0.1em; color: var(--accent-dim); }
.door__name { font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-tight); color: var(--c-text-strong); text-wrap: balance; }
.door__origin { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--accent); }
.door__desc { margin-top: var(--space-1); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); text-wrap: balance; }
.door__badge { display: none; }
.door.is-visited .door__badge {
  display: inline-block;
  margin-top: auto;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--accent);
}
.door.is-visited .door__desc { margin-bottom: var(--space-3); }

/* 누르는 순간: 포털이 커지며 빛으로 삼킨다 (JS: .is-entering + .warp.is-active, 약 450ms 뒤 화면 전환) */
.door.is-entering { transform: none; border-color: var(--accent); }
.door.is-entering .door__portal { animation: portal-enter 600ms var(--ease-in-out) forwards; }
.door.is-entering :is(.door__name, .door__origin, .door__desc, .door__badge) { animation: fade-away 300ms ease-out forwards; }
@keyframes portal-enter {
  60% { transform: scale(1.4); }
  100% { transform: scale(2.3); opacity: 0; }
}
@keyframes fade-away { to { opacity: 0; transform: translateY(6px); } }

/* 아치 모양 진행 표시 */
.arch-mark {
  display: inline-block;
  width: 10px;
  height: 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: 5px 5px 2px 2px;
}
.arch-mark.is-done {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.arch-mark--lg {
  display: grid;
  place-items: center;
  width: 36px;
  height: 48px;
  border-radius: 18px 18px 6px 6px;
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}
.arch-mark--lg.is-done { color: var(--c-on-accent); font-weight: 700; }

.story-teaser {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--accent-line);
  background: oklch(0.2 0.045 var(--room-h) / 0.8);
  text-align: left;
}
.story-teaser__marks { display: flex; gap: 3px; flex-shrink: 0; }
.story-teaser__text { display: grid; gap: 2px; flex: 1; }
.story-teaser__title { font-size: var(--fs-md); font-weight: 700; color: var(--c-text-strong); }
.story-teaser__desc { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); }
.story-teaser__arrow { color: var(--accent); }

.about { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--c-line); }
.about__title { margin-bottom: var(--space-4); font-size: var(--fs-lg); color: var(--c-text-strong); }
.about__body { display: grid; gap: var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-read); color: var(--c-text-muted); }
.about__body b { color: var(--c-text); }

/* ═════════ 1·2. 방 시작 · 입력 ═════════ */
.room-head { text-align: center; padding: var(--space-6) 0; }
.room-head--compact { padding: var(--space-4) 0 var(--space-6); }
.room-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--emblem);
  height: var(--emblem);
  margin: 0 auto var(--space-4);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  color: var(--accent);
  animation: emblem-glow 4s ease-in-out infinite;
}
.room-emblem svg { width: 48px; height: 48px; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.room-emblem__rune {
  fill: none;
  stroke: oklch(0.96 0.03 var(--accent-h));
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: base-draw 1.2s var(--ease-out) 0.3s both;
}
.room-emblem--rune {
  border-radius: var(--stone-shape);
  background:
    radial-gradient(circle at 30% 25%, oklch(1 0 0 / 0.16), transparent 45%),
    linear-gradient(150deg, oklch(0.46 0.03 235), oklch(0.26 0.03 245));
  box-shadow: inset 0 -8px 16px oklch(0 0 0 / 0.45), 0 8px 24px oklch(0 0 0 / 0.4);
}
.room-emblem--star { outline: 1px dashed var(--accent-line); outline-offset: 8px; }
@keyframes emblem-glow { 50% { box-shadow: 0 0 36px var(--accent-glow); } }
.room-emblem--rune { animation-name: emblem-glow-stone; }
@keyframes emblem-glow-stone {
  0%, 100% { box-shadow: inset 0 -8px 16px oklch(0 0 0 / 0.45), 0 8px 24px oklch(0 0 0 / 0.4); }
  50% { box-shadow: inset 0 -8px 16px oklch(0 0 0 / 0.45), 0 0 36px var(--accent-glow); }
}
.room-head__title { margin: var(--space-1) 0 var(--space-3); font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--c-text-strong); }
.room-head__chapter {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.room-head__chapter-num { color: var(--accent); font-weight: 700; }
.room-head__pitch { margin-top: var(--space-4); font-size: var(--fs-lg); line-height: var(--lh-ui); color: var(--c-text-strong); }
.room-head__lead { margin-top: var(--space-3); font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--c-text-muted); }

.lore {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: oklch(0.17 0.04 var(--room-h) / 0.82);
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--c-text);
}
.lore b { color: var(--accent); }

.saved-info {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface-1);
}
.saved-info__label { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.saved-info__value { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text-strong); }
.saved-info__ask { font-size: var(--fs-sm); color: var(--c-text-muted); }
.saved-info__edit { justify-self: start; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.form { display: grid; gap: var(--space-6); }
.form .field + .field { margin-top: 0; }
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field > legend { padding: 0; margin-bottom: var(--space-2); }
.field__label .field__hint { margin-left: var(--space-1); }
.field__row .input { min-width: 0; }
.date-y { flex: 1.6; }
.date-md { flex: 1; }
.notice--privacy { margin-top: var(--space-6); }

/* ═════════ 3. 의식 공통 ═════════ */
.ritual {
  position: relative;
  isolation: isolate;
  text-align: center;
  min-height: calc(100dvh - var(--topbar-h));
  /* 개발 담당 추가(2026-09-25, 디자인 담당 확인 필요): 되감기 궤적·지평선 빛이 화면 폭을 넘어 360px에서 가로 스크롤·축소가 생겨 잘라 낸다 */
  overflow-x: hidden;
  overflow-x: clip;
}
.ritual.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ritual__guide {
  min-height: 3.2em;
  margin-bottom: var(--space-6);
  font-size: var(--fs-lg);
  line-height: var(--lh-ui);
  color: var(--c-text-muted);
}
.ritual__guide b { color: var(--c-text-strong); }

/* ═════════ 3-R. 룬의 방 의식 — 손으로 쥐고 흔들고 뒤집는 촉각 연출 (얼음·가죽·돌) ═════════ */
.cast-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: calc(var(--ring-r) * 2 + var(--space-12));
}
.cast-stage > * { grid-area: 1 / 1; }

/* JS는 .cast에 style="--progress:0~1"만 바꾼다 */
.cast {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--ring-r) * 2 + var(--space-10));
  aspect-ratio: 1;
}
/* 서리 고리: 누른 만큼 원을 따라 얼음빛이 차오른다 */
.rune-ring__frost {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, oklch(0.9 0.05 var(--accent-h) / 0.35) 0 calc(var(--progress, 0) * 360deg), transparent 0),
    repeating-conic-gradient(from 0deg, oklch(0.95 0.03 var(--accent-h) / 0.1) 0 1.5deg, transparent 1.5deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%, #000 80%, transparent 82%);
  mask: radial-gradient(circle, transparent 66%, #000 68%, #000 80%, transparent 82%);
  opacity: calc(0.35 + 0.65 * var(--progress, 0));
}
/* 룬 24자: 켜질수록 밝고 크고 빛난다 */
.rune-ring { position: absolute; inset: 0; }
.rune-ring li {
  --lit: clamp(0, calc(var(--progress, 0) * 24 - var(--i)), 1);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5em;
  margin: -0.75em 0 0 -0.75em;
  line-height: 1.5em;
  text-align: center;
  font-family: var(--font-symbol);
  font-size: var(--fs-lg);
  color: oklch(calc(0.6 + 0.37 * var(--lit)) calc(0.02 + 0.06 * var(--lit)) var(--accent-h));
  opacity: calc(0.22 + 0.78 * var(--lit));
  text-shadow: 0 0 calc(2px + 10px * var(--lit)) var(--accent-glow), 0 0 calc(20px * var(--lit)) var(--accent);
  transform: rotate(calc(var(--i) * 15deg)) translateY(calc(var(--ring-r) * -1)) scale(calc(0.85 + 0.3 * var(--lit)));
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.cast:has(.pouch.is-spilled) .rune-ring li { animation: ring-burst 700ms var(--ease-out) forwards; }
.cast:has(.pouch.is-spilled) .rune-ring__frost { animation: fade-away 700ms ease-out forwards; }
@keyframes ring-burst {
  30% { opacity: 1; text-shadow: 0 0 24px var(--accent), 0 0 4px #fff; }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 15deg)) translateY(calc(var(--ring-r) * -1.35)) scale(0.6); }
}

/* 마법 가죽 주머니: 한밤 남색 가죽 + 은실 바느질 + 룬 인장 + 은 매듭끈 */
.pouch {
  position: relative;
  width: var(--pouch);
  height: var(--pouch);
  border-radius: 50%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pouch__aura {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.35), transparent 65%);
  opacity: calc(0.35 + 0.65 * var(--progress, 0));
  scale: calc(0.9 + 0.25 * var(--progress, 0));
  animation: aura-breathe 3.6s ease-in-out infinite;
}
@keyframes aura-breathe { 50% { transform: scale(1.08); } }
.pouch__bag {
  position: absolute;
  inset: 0;
  transform-origin: 50% 25%;
  animation: pouch-float 4s ease-in-out infinite;
}
@keyframes pouch-float { 50% { transform: translateY(-5px); } }
.pouch__ruffle { /* 벌어진 입구 주름 */
  position: absolute;
  left: 21%;
  right: 21%;
  top: 7%;
  height: 19%;
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  background: repeating-linear-gradient(90deg, oklch(0.38 0.05 250) 0 6px, oklch(0.25 0.045 256) 6px 12px);
  box-shadow: inset 0 3px 0 oklch(0.66 0.05 232 / 0.55), inset 0 -6px 8px oklch(0 0 0 / 0.45);
}
.pouch__neck { /* 졸라맨 목 */
  position: absolute;
  left: 35%;
  right: 35%;
  top: 22%;
  height: 15%;
  border-radius: 30% 30% 20% 20%;
  background: repeating-linear-gradient(90deg, oklch(0.32 0.05 252) 0 4px, oklch(0.21 0.04 258) 4px 8px);
  box-shadow: inset 0 -4px 6px oklch(0 0 0 / 0.45);
}
.pouch__body { /* 불룩한 몸통 */
  position: absolute;
  left: 12%;
  right: 12%;
  top: 33%;
  bottom: 2%;
  border-radius: 36% 36% 46% 46% / 24% 24% 76% 76%;
  background:
    radial-gradient(ellipse at 32% 26%, oklch(0.58 0.05 245 / 0.45), transparent 45%),
    radial-gradient(ellipse at 70% 88%, oklch(0.1 0.03 262 / 0.7), transparent 60%),
    linear-gradient(165deg, oklch(0.36 0.05 252), oklch(0.19 0.04 262));
  box-shadow:
    inset 0 -16px 28px oklch(0.08 0.02 260 / 0.7),
    inset 0 6px 10px oklch(0.62 0.04 240 / 0.15),
    0 18px 40px oklch(0 0 0 / 0.55);
}
.pouch__body::before { /* 은실 바느질 */
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  border: 1.5px dashed oklch(0.82 0.04 225 / 0.45);
}
.pouch__body::after { /* 가죽 주름 */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(100deg, transparent 0 18px, oklch(0.08 0.02 260 / 0.14) 18px 22px);
}
.pouch__seal { /* 룬 인장: 누를수록 빛난다 */
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 1;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 calc(3px + 14px * var(--progress, 0)) var(--accent));
}
.pouch__seal > svg { width: 100%; height: 100%; overflow: visible; }
.pouch__seal-ring { fill: oklch(0.18 0.04 258 / 0.85); stroke: var(--accent); stroke-width: 1.5; }
.pouch__seal-dots { fill: none; stroke: var(--accent-dim); stroke-width: 1; stroke-dasharray: 1 3; }
.pouch__seal-rune {
  fill: none;
  stroke: oklch(calc(0.75 + 0.23 * var(--progress, 0)) 0.06 var(--accent-h));
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pouch__cord { /* 은 매듭끈 */
  position: absolute;
  left: 29%;
  right: 29%;
  top: 29%;
  height: 6%;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, oklch(0.96 0.02 230), oklch(0.72 0.03 235) 60%, oklch(0.5 0.03 240));
  box-shadow: 0 0 10px var(--accent-glow);
}
.pouch__tassel {
  position: absolute;
  top: 55%;
  right: -3px;
  width: 2px;
  height: 36px;
  background: linear-gradient(oklch(0.92 0.02 230), oklch(0.65 0.03 235));
  transform-origin: top;
  transform: rotate(-12deg);
  animation: tassel-sway 3s ease-in-out infinite;
}
.pouch__tassel::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.95 0.04 var(--accent-h));
  box-shadow: 0 0 8px var(--accent);
}
.pouch__tassel--r { right: -11px; height: 26px; transform: rotate(-4deg); animation-delay: -1.2s; }
@keyframes tassel-sway { 50% { transform: rotate(6deg); } }

.pouch.is-shaking .pouch__bag { animation: pouch-shake 0.11s infinite; }
.pouch.is-shaking .pouch__aura { animation-duration: 0.6s; }
.pouch.is-spilled { animation: pouch-spill 0.7s var(--ease-in-out) forwards; }
@keyframes pouch-shake {
  25% { transform: translate(-3px, 1px) rotate(-3deg); }
  50% { transform: translate(2px, -2px) rotate(2deg); }
  75% { transform: translate(3px, 2px) rotate(-1deg); }
}
@keyframes pouch-spill {
  40% { transform: rotate(-24deg) translateY(-6px); }
  100% { opacity: 0; transform: rotate(-40deg) translate(-10px, 30px) scale(0.7); }
}

/* 얼음판 위 세 개의 돌 */
.cloth {
  position: relative;
  width: 100%;
  padding: var(--space-10) var(--space-3) var(--space-8);
  border-radius: 50% / 40%;
  background: radial-gradient(ellipse at 50% 35%, oklch(0.42 0.05 232 / 0.9), oklch(0.26 0.04 240 / 0.9) 60%, oklch(0.2 0.04 245 / 0) 100%);
}
.cloth::before { /* 서리 결 */
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 18px, oklch(0.92 0.03 230 / 0.07) 18px 19px),
    repeating-conic-gradient(from 10deg, oklch(0.95 0.03 230 / 0.05) 0 1deg, transparent 1deg 20deg);
  pointer-events: none;
}
.cloth.is-cast::before { animation: frost-spread 1.2s var(--ease-out) both; }
@keyframes frost-spread { from { opacity: 0; transform: scale(0.6); } }
.stones { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: var(--space-3); }
.stone { position: relative; width: var(--stone-w); height: var(--stone-h); perspective: 600px; }
.stone:nth-child(2) { transform: translateY(calc(var(--space-3) * -1)); }
.cloth.is-cast .stone { animation: stone-drop 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
.cloth.is-cast .stone:nth-child(2) { animation-delay: 0.15s; }
.cloth.is-cast .stone:nth-child(3) { animation-delay: 0.3s; }
@keyframes stone-drop { from { opacity: 0; translate: 0 -80px; rotate: -20deg; } }

.stone__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.stone.is-flipped .stone__inner { transform: rotateY(180deg); }
.stone__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--stone-shape);
  background:
    radial-gradient(circle at 30% 25%, oklch(1 0 0 / 0.22), transparent 45%),
    linear-gradient(150deg, oklch(0.55 0.015 250), oklch(0.34 0.015 255));
  box-shadow: inset 0 -8px 16px oklch(0 0 0 / 0.45), 0 8px 20px oklch(0 0 0 / 0.5);
}
.stone__back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 30% 25%, oklch(1 0 0 / 0.18), transparent 45%),
    linear-gradient(150deg, oklch(0.46 0.03 235), oklch(0.26 0.03 245));
}
.stone__norn { font-family: var(--font-latin); font-size: var(--fs-2xs); letter-spacing: 0.02em; color: oklch(0.88 0.01 250 / 0.75); }
/* 룬 획: 뒤집히면 끌로 새기듯 그려지고, 다 새겨지면 한 번 번쩍인다 */
.stone__rune {
  width: 58%;
  height: 70%;
  overflow: visible;
  fill: none;
  stroke: oklch(0.95 0.04 var(--accent-h));
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 10px var(--accent-glow));
}
.stone.is-flipped .stone__rune { animation: base-draw 1s var(--ease-out) 0.45s both, rune-flare 1s ease-out 1.4s both; }
@keyframes rune-flare {
  35% { filter: drop-shadow(0 0 6px oklch(0.99 0.02 230)) drop-shadow(0 0 24px var(--accent)); }
}
.stone.is-next .stone__front {
  box-shadow: inset 0 -8px 16px oklch(0 0 0 / 0.45), 0 0 0 2px var(--accent), 0 0 24px var(--accent-glow);
  animation: stone-pulse 1.6s ease-in-out infinite;
}
@keyframes stone-pulse { 50% { filter: brightness(1.2); } }
.stone::after { /* 서리 고리 */
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.stone.is-flipped::after { animation: frost-burst 0.9s ease-out 0.35s both; }
@keyframes frost-burst {
  from { opacity: 0.8; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.5); }
}

.norn-hint { max-width: 26em; min-height: 3em; margin-top: var(--space-8); font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--c-text-muted); }
.norn-hint b { color: var(--accent); }

/* ═════════ 3-S. 베다의 방 의식 — 손대지 않고 지켜보는 되감기 (밤하늘·달빛) ═════════
   0.0s .is-running: 테두리 눈금 그리기(1.4s) · 중앙 얀트라(2s) · 27개 별자리가 차례로 이어짐(0.4s+n×60ms)
        바퀴 되감기(--wheel-ms) · 달이 궤도를 따라 이동 · 연도 굴러감(JS)
   4.4s .is-landed: 달 착지 빛, 달이 멈춘 집(.is-home) 점등, 연도 번쩍 */
.ritual--star.is-active { justify-content: space-evenly; padding-bottom: var(--space-8); }

.rewind { position: relative; }
.rewind__label { font-size: var(--fs-md); letter-spacing: 0.1em; color: var(--c-text-muted); }
.rewind__year { position: relative; display: flex; align-items: baseline; justify-content: center; gap: var(--space-1); margin-top: var(--space-1); }
.rewind__num {
  display: inline-block;
  min-width: 4.2ch;
  font-family: var(--font-latin);
  font-size: var(--fs-year);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-strong);
  text-shadow: 0 0 30px var(--accent-glow);
}
.rewind__unit { font-size: var(--fs-lg); color: var(--c-text-muted); }
.ritual--star.is-running:not(.is-landed) .rewind__num {
  text-shadow: 0 -0.35em 0.25em var(--accent-soft), 0 0.35em 0.25em var(--accent-soft), 0 0 30px var(--accent-glow);
  animation: year-roll 0.14s linear infinite;
}
@keyframes year-roll { 50% { transform: translateY(3px) scaleY(0.94); opacity: 0.8; } }
.ritual--star.is-landed .rewind__num { animation: year-land 0.9s var(--ease-spring) both; }
@keyframes year-land {
  0% { transform: scale(1.35); text-shadow: 0 0 60px var(--accent), 0 0 12px oklch(1 0 0); }
  100% { transform: scale(1); text-shadow: 0 0 30px var(--accent-glow); }
}
.rewind__flare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.rewind__flare::before { /* 가로 빛줄기 */
  content: "";
  position: absolute;
  left: -40%;
  right: -40%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.98 0.03 var(--accent-h)), transparent);
}
.ritual--star.is-landed .rewind__flare { animation: flare 1s var(--ease-out) both; }
@keyframes flare {
  from { opacity: 0.95; transform: scale(0.2); }
  to { opacity: 0; transform: scale(1.4); }
}

.star-dial { position: relative; width: var(--dial); aspect-ratio: 1; margin: var(--space-4) auto; }
.star-dial__trails {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  opacity: 0.7;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 9px, oklch(0.9 0.04 var(--accent-h) / 0.2) 9px 10px);
  -webkit-mask: conic-gradient(from 0deg, transparent 0 10deg, #000 40deg, transparent 90deg 130deg, #000 170deg, transparent 220deg 250deg, #000 300deg, transparent 350deg);
  mask: conic-gradient(from 0deg, transparent 0 10deg, #000 40deg, transparent 90deg 130deg, #000 170deg, transparent 220deg 250deg, #000 300deg, transparent 350deg);
}
.ritual--star.is-running .star-dial__trails { animation: trails-rewind 4.8s var(--ease-out) both; }
@keyframes trails-rewind { to { transform: rotate(-420deg); } }

/* 바퀴: 쉬는 상태 = 달이 꼭대기 바늘 아래. 되감기 = 두 바퀴 거꾸로 돌아 그 자리에 멈춤 */
.wheel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(calc(-1 * var(--moon-deg, 0deg)));
}
.ritual--star.is-running .wheel { animation: wheel-rewind var(--wheel-ms) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes wheel-rewind { from { transform: rotate(calc(720deg - var(--moon-deg, 0deg))); } }

.wheel .ring { fill: none; stroke: var(--accent-line); }
.wheel .ring--outer { stroke: var(--accent-dim); stroke-width: 1.2; }
.wheel .ring--inner { stroke: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.18); }
.wheel .rim-ticks { fill: none; stroke: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.55); stroke-dasharray: 1; }
.wheel .rashi-lines { stroke: var(--accent-line); }
.wheel .rashi-label { fill: var(--c-text-muted); font-size: 8.5px; font-family: var(--font-serif); }
.wheel .nak-dividers { stroke: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.14); stroke-dasharray: 2 3; }
.wheel .moon-orbit { fill: none; stroke: oklch(0.9 0.03 var(--accent-h) / 0.25); stroke-dasharray: 1 5; }
.wheel .yantra { fill: none; stroke: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.3); stroke-width: 0.6; stroke-dasharray: 1; }
.wheel .yantra-core { fill: var(--accent-soft); stroke: var(--accent-line); }
.wheel .nak-line { fill: none; stroke: oklch(0.9 0.04 var(--accent-h) / 0.55); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.wheel .nak-star { fill: oklch(0.97 0.02 95); transform-box: fill-box; transform-origin: center; }
.moon-arm {
  transform-box: view-box;
  transform-origin: 0 0; /* view-box 기준 상자는 viewBox의 (0,0)에서 시작한다 → 0 0 = 바퀴 중심 (UI 점검 2단계에서 50% 50% 오류 수정) */
  transform: rotate(var(--moon-deg, 0deg));
}
.wheel .moon { fill: oklch(0.98 0.03 95); filter: drop-shadow(0 0 6px oklch(0.98 0.03 95)); }
.wheel .moon-glow { fill: oklch(0.95 0.05 var(--accent-h) / 0.25); transform-box: fill-box; transform-origin: center; }
.wheel .moon-trail { fill: none; stroke: oklch(0.95 0.04 var(--accent-h) / 0.55); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity var(--dur-slow); }

.ritual--star.is-running .rim-ticks { animation: base-draw 1.4s var(--ease-out) both; }
.ritual--star.is-running .yantra { animation: base-draw 2s var(--ease-out) 0.2s both; }
.ritual--star.is-running .rashi-label { animation: base-fade-in 0.8s ease-out 0.8s both; }
.ritual--star.is-running .nak-line { animation: base-draw 0.9s var(--ease-out) calc(0.5s + var(--n) * 60ms) both; }
.ritual--star.is-running .nak-star { animation: base-pop 0.5s var(--ease-out) calc(0.4s + var(--n) * 60ms) both; }
.ritual--star.is-running .moon-arm { animation: moon-travel var(--wheel-ms) cubic-bezier(0.3, 0.7, 0.2, 1) both; }
.ritual--star.is-running:not(.is-landed) .moon-trail { opacity: 1; }
@keyframes moon-travel { from { transform: rotate(calc(var(--moon-deg, 0deg) - 300deg)); } }

.ritual--star.is-landed .moon-glow { animation: moon-land 1.2s var(--ease-out) both; }
@keyframes moon-land {
  0% { transform: scale(1); fill: oklch(0.98 0.03 95 / 0.9); }
  100% { transform: scale(2.4); fill: oklch(0.95 0.05 var(--accent-h) / 0); }
}
.ritual--star.is-landed .nak.is-home .nak-line,
.is-static-preview .nak.is-home .nak-line { stroke: var(--accent); stroke-width: 1.6; filter: drop-shadow(0 0 3px var(--accent)); }
.ritual--star.is-landed .nak.is-home .nak-star,
.is-static-preview .nak.is-home .nak-star { fill: oklch(1 0 0); filter: drop-shadow(0 0 4px var(--accent)); }
.ritual--star.is-landed .nak.is-home .nak-star { animation: base-pop 0.6s var(--ease-spring) both; }

.star-dial__pointer {
  position: absolute;
  top: calc(var(--space-3) * -1);
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.trivia {
  max-width: 26em;
  min-height: 4.8em;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: oklch(0.17 0.04 var(--room-h) / 0.88); /* (2026-10-25 성능) 뒤 흐림 대신 진한 바탕 */
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--c-text-muted);
  transition: opacity var(--dur-base);
}
.ritual-timer { width: 60%; height: 2px; margin-top: var(--space-5); border-radius: var(--radius-pill); background: var(--c-line); overflow: hidden; }
.ritual-timer__bar { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 8px var(--accent); transform-origin: left; transform: scaleX(0); }
.ritual--star.is-running .ritual-timer__bar { animation: ritual-timer var(--ritual-ms) linear forwards; }
@keyframes ritual-timer { to { transform: scaleX(1); } }
.ritual__horizon { /* 아래쪽 지평선 달빛: 빈 느낌을 채운다 */
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  z-index: -1;
  height: 32%;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 50% 100%, oklch(0.55 0.1 var(--accent-h) / 0.28), transparent 70%),
    radial-gradient(30% 60% at 50% 100%, oklch(0.9 0.05 var(--accent-h) / 0.12), transparent 70%);
}

/* ═════════ 3-S′. 후보 고르기 (2개·3개) ═════════ */
.day-line { margin: 0 0 var(--space-6); }
.day-line__track { display: flex; gap: 2px; height: 36px; border-radius: var(--radius-md); overflow: hidden; }
.day-line__seg {
  flex: var(--share, 1) 1 0;
  min-width: 24px;
  display: grid;
  place-items: center;
  background: oklch(var(--accent-l) var(--accent-c) var(--seg-h));
  color: var(--c-on-accent);
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  font-weight: 700;
  transform-origin: left;
  animation: seg-grow 700ms var(--ease-reveal) calc(var(--seg-i, 0) * 120ms) both;
}
.day-line__seg:nth-child(1), .choice:nth-child(1) { --seg-h: var(--hue-moon); --seg-i: 0; }
.day-line__seg:nth-child(2), .choice:nth-child(2) { --seg-h: var(--hue-gold); --seg-i: 1; }
.day-line__seg:nth-child(3), .choice:nth-child(3) { --seg-h: var(--hue-jade); --seg-i: 2; }
@keyframes seg-grow { from { transform: scaleX(0); opacity: 0; } }
.day-line__ticks { display: flex; justify-content: space-between; margin-top: var(--space-1); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-faint); }
.choices { display: grid; gap: var(--space-3); }
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: oklch(0.2 0.045 var(--room-h) / 0.85);
  text-align: left;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-base);
  animation: base-fade-up var(--dur-reveal) var(--ease-reveal) calc(300ms + var(--seg-i, 0) * var(--stagger) * 1.5) both;
}
.choice:hover, .choice:focus-visible { border-color: oklch(var(--accent-l) var(--accent-c) var(--seg-h)); box-shadow: 0 0 24px oklch(var(--accent-l) var(--accent-c) var(--seg-h) / 0.2); }
.choice.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.choice__n {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: oklch(var(--accent-l) var(--accent-c) var(--seg-h));
  box-shadow: 0 0 12px oklch(var(--accent-l) var(--accent-c) var(--seg-h) / 0.5);
  color: var(--c-on-accent);
  font-family: var(--font-latin);
  font-weight: 700;
}
.choice__body { display: grid; gap: var(--space-1); }
.choice__when { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.choice__name { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text-strong); }
.choice__trait { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); }
.star-choose__note { margin-top: var(--space-6); text-align: center; font-size: var(--fs-sm); color: var(--c-text-faint); }

/* ═════════ 4. 결과 (룬·별 공통 틀) ═════════ */
.result { padding-top: var(--space-4); }
.topbar--sample { position: relative; margin-bottom: var(--space-6); border: 1px solid var(--c-line); border-radius: var(--radius-md); }

.capture, .archetype-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) var(--space-5) var(--space-6);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 60% at 50% 0%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.18), transparent 70%),
    linear-gradient(180deg, oklch(0.24 0.05 var(--room-h)), oklch(0.17 0.04 var(--room-h)));
  box-shadow: var(--shadow-2), 0 0 60px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.08);
  text-align: center;
}
.capture::before, .archetype-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.18);
  border-radius: calc(var(--radius-xl) - 7px);
  pointer-events: none;
}
.capture__eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--accent-dim); }
.capture__title { font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--c-text-strong); }
[data-room="star"] .capture__title { font-size: var(--fs-3xl); }
.capture__names { margin-top: var(--space-2); font-size: var(--fs-md); color: var(--accent); }
.capture__key {
  max-width: 20em;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--c-text-strong);
  text-shadow: 0 0 18px var(--accent-soft);
}
.capture__meta { max-width: 26em; margin: var(--space-5) auto 0; font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-muted); text-wrap: balance; } /* 이름 10자로 28자를 넘으면 두 줄로 고르게 꺾인다 */
.capture-share { display: flex; margin: var(--space-3) auto 0; }

/* 봉인: 쉬는 상태에서는 보이지 않고, .is-revealed에서 그려졌다가 부서지며 사라진다 */
.seal {
  position: absolute;
  left: 50%;
  top: var(--space-4);
  width: 200px;
  height: 200px;
  margin-left: -100px;
  opacity: 0;
  pointer-events: none;
}
.seal__ring, .seal__marks { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 1; }
.seal__ring--inner { stroke-width: 0.8; }
.capture__flash {
  position: absolute;
  left: 50%;
  top: 104px;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.98 0.03 var(--accent-h) / 0.9), var(--accent-soft) 35%, transparent 65%);
  opacity: 0;
  pointer-events: none;
}

.mini-stones { display: flex; justify-content: center; gap: var(--space-3); margin: var(--space-6) 0 var(--space-5); }
.mini-stone { display: grid; justify-items: center; gap: var(--space-1); }
.mini-stone__rune {
  width: var(--mini-stone-w);
  height: var(--mini-stone-h);
  padding: 14px 16px;
  overflow: visible;
  border-radius: var(--stone-shape);
  background:
    radial-gradient(circle at 30% 25%, oklch(1 0 0 / 0.16), transparent 45%),
    linear-gradient(150deg, oklch(0.46 0.03 235), oklch(0.26 0.03 245));
  box-shadow: inset 0 -6px 12px oklch(0 0 0 / 0.45), 0 6px 16px oklch(0 0 0 / 0.4);
  fill: none;
  stroke: oklch(0.95 0.04 var(--accent-h));
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
.mini-stone__rune use { filter: drop-shadow(0 0 4px var(--accent)); }
.mini-stone__label { font-family: var(--font-latin); font-size: var(--fs-2xs); letter-spacing: 0.08em; color: var(--c-text-faint); }

.moon-emblem { position: relative; width: 120px; margin: var(--space-5) auto var(--space-6); }
.moon-emblem__svg { overflow: visible; }
.moon-emblem__orbit { fill: none; stroke: var(--accent-line); stroke-dasharray: 1; }
.moon-emblem__moon { fill: oklch(0.95 0.04 var(--accent-h)); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 1; filter: drop-shadow(0 0 14px var(--accent-glow)); }
.moon-emblem__star { fill: oklch(0.98 0.02 90); filter: drop-shadow(0 0 4px var(--accent)); }
.moon-emblem__n {
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-2) * -1);
  transform: translateX(-50%);
  padding: 2px var(--space-3);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  color: var(--accent);
  white-space: nowrap;
}

/* 봉인 풀기 순서 (JS가 결과 화면에 들어오면 .capture.is-revealed, 약 2.3초)
   0.0 봉인 고리 그리기 → 0.3 룬·달 그리기 → 0.85 빛 번짐 + 봉인 부서짐 → 1.15 제목 → 1.4 부제 → 1.6 핵심 문장 → 1.85 메타 */
.capture.is-revealed .seal { animation: seal-life 1.6s var(--ease-out) both; }
.capture.is-revealed .seal__ring { animation: base-draw 0.8s var(--ease-out) both; }
.capture.is-revealed .seal__ring--inner { animation-delay: 0.15s; }
.capture.is-revealed .seal__marks { animation: base-draw 0.6s var(--ease-out) 0.35s both; }
@keyframes seal-life {
  0% { opacity: 1; transform: scale(0.9) rotate(-20deg); }
  55% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.6) rotate(10deg); }
}
.capture.is-revealed .capture__flash { animation: capture-flash 1.1s ease-out 0.85s both; }
@keyframes capture-flash {
  0% { opacity: 0; transform: scale(0.3); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}
.capture.is-revealed .capture__eyebrow { animation: base-fade-in 0.6s ease-out both; }
.capture.is-revealed .mini-stone { animation: base-fade-in 0.4s ease-out both; }
.capture.is-revealed .mini-stone__rune { animation: base-draw 0.9s var(--ease-out) 0.35s both; }
.capture.is-revealed .mini-stone:nth-child(2) { animation-delay: 0.15s; }
.capture.is-revealed .mini-stone:nth-child(3) { animation-delay: 0.3s; }
.capture.is-revealed .mini-stone:nth-child(2) .mini-stone__rune { animation-delay: 0.5s; }
.capture.is-revealed .mini-stone:nth-child(3) .mini-stone__rune { animation-delay: 0.65s; }
.capture.is-revealed .moon-emblem__orbit { animation: base-draw 0.9s var(--ease-out) both; }
.capture.is-revealed .moon-emblem__moon { animation: base-draw 1s var(--ease-out) 0.3s both, moon-fill 0.6s ease-out 1s both; }
.capture.is-revealed .moon-emblem__n { animation: base-fade-in 0.5s ease-out 1.1s both; }
@keyframes moon-fill { from { fill-opacity: 0; } }
.capture.is-revealed .capture__title { animation: title-emerge 0.9s var(--ease-reveal) 1.15s both; }
.capture.is-revealed .capture__names { animation: base-fade-up var(--dur-reveal) var(--ease-reveal) 1.4s both; }
.capture.is-revealed .capture__key { animation: base-fade-up var(--dur-reveal) var(--ease-reveal) 1.6s both; }
.capture.is-revealed .capture__meta { animation: base-fade-up var(--dur-reveal) var(--ease-reveal) 1.85s both; }
@keyframes title-emerge {
  from { opacity: 0; transform: translateY(10px) scale(0.96); filter: blur(6px); text-shadow: 0 0 30px var(--accent); }
  to { opacity: 1; transform: none; filter: none; text-shadow: 0 0 0 transparent; }
}

/* 공감·반전 포인트 */
.turn { margin-top: var(--space-10); padding: var(--space-6) var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: oklch(0.19 0.04 var(--room-h) / 0.88); text-align: center; }
.turn .eyebrow { margin-bottom: var(--space-3); }
.turn__title { margin-bottom: var(--space-4); font-size: var(--fs-lg); color: var(--c-text-strong); }
.turn__text { font-size: var(--fs-md); line-height: 1.75; color: var(--c-text-muted); text-align: left; }
.turn__note { margin-top: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-faint); text-align: left; }
.thread { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-5); }
.thread::before { content: ""; position: absolute; top: 4px; left: 16%; right: 16%; height: 1px; background: linear-gradient(90deg, var(--accent-line), var(--accent)); }
.thread__step { position: relative; display: grid; justify-items: center; gap: var(--space-1); padding-top: var(--space-5); }
.thread__step::before { content: ""; position: absolute; top: 0; width: 9px; height: 9px; border: 1px solid var(--accent); border-radius: 50%; background: var(--c-surface-1); }
.thread__step.is-key::before { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.thread__when { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-faint); }
.thread__word { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-strong); }
.thread__step.is-key .thread__word { color: var(--accent); }
.twist { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.twist__from { color: var(--c-text-muted); text-decoration: line-through; text-decoration-color: oklch(0.79 0.03 285 / 0.6); }
.twist__arrow { color: var(--accent-dim); }
.twist__to { font-size: var(--fs-xl); font-weight: 700; color: var(--accent); text-shadow: 0 0 16px var(--accent-soft); }

/* 목차 */
.toc { margin-top: var(--space-10); }
.toc__meta { margin-bottom: var(--space-3); text-align: center; font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: 0.05em; color: var(--c-text-muted); }
.toc__list { border-top: 1px solid var(--c-line); }
.toc__link { display: grid; grid-template-columns: 2.25em 3.25em 1fr; align-items: baseline; gap: var(--space-2); min-height: var(--tap); padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--c-line); text-decoration: none; }
.toc__num { font-family: var(--font-latin); color: var(--accent); }
.toc__name { font-size: var(--fs-sm); color: var(--c-text-muted); }
.toc__title { font-size: var(--fs-md); color: var(--c-text-strong); }

/* ───────── 장 (긴 글: 가독성 최우선. 움직임은 장이 처음 보일 때 한 번뿐) ───────── */
.chapters { margin-top: var(--space-6); }
.chapter { padding-top: var(--space-10); scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.chapter__head { margin-bottom: var(--space-8); text-align: center; }
.chapter__num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-family: var(--font-latin);
  font-size: var(--fs-numeral);
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 20px var(--accent-glow);
}
.chapter__num::before, .chapter__num::after {
  content: "";
  width: var(--space-12);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  transform-origin: right;
}
.chapter__num::after { background: linear-gradient(90deg, var(--accent), transparent); transform-origin: left; }
.chapter__label { margin-top: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-sm); letter-spacing: 0.08em; color: var(--accent-dim); }
.chapter__title { margin-top: var(--space-2); font-size: var(--fs-xl); line-height: var(--lh-tight); color: var(--c-text-strong); }
.chapter__time { margin-top: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-faint); }

/* 장 등장 (JS: 결과 화면에 .js-reveal, 장이 보이면 .chapter.is-in. 문단·인용·떡밥은 [data-reveal]로 하나씩) */
.js-reveal .chapter:not(.is-in) :is(.chapter__num, .chapter__label, .chapter__title, .chapter__time) { opacity: 0; }
.js-reveal .chapter:not(.is-in) .chapter__num::before,
.js-reveal .chapter:not(.is-in) .chapter__num::after { transform: scaleX(0); }
.chapter.is-in .chapter__num { animation: numeral-glow 1.4s var(--ease-out) both; }
.chapter.is-in .chapter__num::before,
.chapter.is-in .chapter__num::after { animation: line-draw 0.8s var(--ease-out) 0.2s both; }
.chapter.is-in .chapter__label { animation: base-fade-up var(--dur-reveal) var(--ease-reveal) 0.3s both; }
.chapter.is-in .chapter__title { animation: base-fade-up var(--dur-reveal) var(--ease-reveal) 0.4s both; }
.chapter.is-in .chapter__time { animation: base-fade-up var(--dur-reveal) var(--ease-reveal) 0.5s both; }
@keyframes numeral-glow {
  0% { opacity: 0; transform: scale(0.8); text-shadow: 0 0 0 transparent; }
  40% { opacity: 1; transform: scale(1.08); text-shadow: 0 0 28px var(--accent), 0 0 60px var(--accent-glow); }
  100% { opacity: 1; transform: scale(1); text-shadow: 0 0 20px var(--accent-glow); }
}
@keyframes line-draw { from { transform: scaleX(0); opacity: 0; } }

.prose__lede { font-size: var(--fs-lg); line-height: 1.75; color: var(--c-text-strong); }
.prose > .prose__sub { display: flex; align-items: center; gap: var(--space-3); margin-top: 2em; font-size: var(--fs-md); line-height: var(--lh-tight); color: var(--c-text-strong); }
.prose__sub-glyph { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--stone-shape); background: var(--accent-soft); font-size: var(--fs-xl); color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); }
/* 인용 한 줄: 은은한 빛 + 보일 때 한 번 빛이 스쳐 지나감 */
.prose > .pull-quote {
  position: relative;
  overflow: hidden;
  margin: 2em 0;
  padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--accent-line);
  border-bottom: 1px solid var(--accent-line);
  font-size: var(--fs-lg);
  line-height: 1.7;
  text-align: center;
  color: var(--accent);
  text-shadow: 0 0 16px var(--accent-soft);
}
.pull-quote::before { content: "\201C"; display: block; height: 0.6em; font-family: var(--font-latin); font-size: var(--fs-3xl); line-height: 1; color: var(--accent-dim); }
.pull-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, oklch(1 0 0 / 0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.pull-quote.is-in::after { animation: sweep 1.6s ease-out 0.5s both; }
@keyframes sweep { to { transform: translateX(100%); } }

/* 다음 장 떡밥: ✦이 세 번 반짝이고 멈춘다 */
.chapter__hook { margin-top: var(--space-10); text-align: center; font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--accent); text-shadow: 0 0 12px var(--accent-soft); }
.chapter__hook::before {
  content: "✦";
  display: block;
  width: max-content;
  margin: 0 auto var(--space-3);
  color: var(--accent);
}
.chapter__hook.is-in::before { animation: spark 1.8s ease-in-out 0.6s 3; }
@keyframes spark {
  0%, 100% { opacity: 0.5; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(45deg); text-shadow: 0 0 12px var(--accent); }
}

.chapter-break, .page-end { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-12); color: var(--accent-dim); }
.page-end { font-family: var(--font-symbol); }
.chapter-break::before, .chapter-break::after, .page-end::before, .page-end::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); }

/* 장 안의 인셋 */
.prose > .inset, .prose > .fact-list { margin: 2em 0; }
.inset { padding: var(--space-5) var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-1); font-size: var(--fs-md); line-height: var(--lh-ui); }
.inset__label { margin-bottom: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--accent); }
.inset__fact { font-size: var(--fs-sm); color: var(--c-text-muted); }
.inset__fact + .inset__fact { margin-top: var(--space-2); }
.inset__count { min-height: 1.5em; margin-top: var(--space-3); text-align: center; font-size: var(--fs-sm); color: var(--accent); }
.name-runes { margin: var(--space-2) 0 var(--space-3); font-size: clamp(1.375rem, 7vw, 2rem); letter-spacing: 0.06em; text-align: center; word-break: break-all; color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }
.fact-list { border-top: 1px solid var(--c-line); }
.fact-list__row { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-md); line-height: var(--lh-ui); }
.fact-list dt { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); }
.fact-list dd { margin: 0; color: var(--c-text-strong); }
.trait-list { display: grid; gap: var(--space-2); }
.trait { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--c-surface-2); }
.trait__text { font-size: var(--fs-md); line-height: var(--lh-ui); }
.trait__btn { flex-shrink: 0; min-height: var(--tap-min); padding: 0 var(--space-3); border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); transition: background-color var(--dur-fast), box-shadow var(--dur-base); }
.trait__btn.is-selected { border-color: var(--accent); background: var(--accent); color: var(--c-on-accent); font-weight: 700; box-shadow: 0 0 14px var(--accent-glow); animation: base-pop 0.4s var(--ease-spring); }

/* 장 뒤 */
.fact-card { margin-top: var(--space-12); padding: var(--space-5); border: 1px dashed var(--accent-line); border-radius: var(--radius-lg); background: oklch(0.17 0.04 var(--room-h) / 0.6); }
.fact-card .eyebrow { margin-bottom: var(--space-2); }
.fact-card__text { font-size: var(--fs-md); line-height: 1.75; color: var(--c-text-muted); }
.result-actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }

.archetype-line { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-10); padding: var(--space-4); border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--c-surface-1); }
.archetype-line__badge { flex-shrink: 0; width: 28px; height: 28px; color: var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow)); }
.archetype-line__text { font-size: var(--fs-md); line-height: var(--lh-ui); }
.archetype-line__label { display: block; margin-bottom: 2px; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.archetype-line__text b { color: var(--accent); }

.next-rooms { margin-top: var(--space-12); }
.next-rooms__title { margin-bottom: var(--space-4); text-align: center; font-size: var(--fs-lg); color: var(--c-text-strong); }
.next-rooms__list { display: grid; gap: var(--space-3); }
.next-room {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, oklch(0.26 0.05 var(--room-h)), oklch(0.18 0.04 var(--room-h)));
  text-align: left;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.next-room:hover, .next-room:focus-visible { border-color: var(--accent); box-shadow: 0 0 30px var(--accent-soft); }
.next-room__glyph {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.9 0.05 var(--accent-h) / 0.35), oklch(0.2 0.06 var(--room-h)) 70%);
  box-shadow: 0 0 16px var(--accent-glow);
  color: oklch(0.98 0.02 var(--accent-h));
  animation: portal-pulse-small 3.2s ease-in-out infinite;
}
@keyframes portal-pulse-small { 50% { box-shadow: 0 0 28px var(--accent); } }
.next-room__glyph svg { width: 28px; height: 28px; overflow: visible; }
.next-room__glyph svg use { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.next-room__text { flex: 1; display: grid; gap: var(--space-1); }
.next-room__name { font-size: var(--fs-md); font-weight: 700; color: var(--c-text-strong); }
.next-room__chapter { display: block; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 400; color: var(--accent); }
.next-room__hook { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); }
.next-room__arrow { color: var(--accent); }
.next-rooms__story { margin-top: var(--space-4); }

/* ═════════ 5. 나의 이야기 ═════════ */
.story-head { padding: var(--space-6) 0 var(--space-8); text-align: center; }
.story-head__title { margin: var(--space-2) 0; font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--c-text-strong); }
.story-head__lead { font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--c-text-muted); }
.story-progress { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.story-progress__marks { display: flex; gap: var(--space-2); }
.story-progress__count { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); }
.story-progress__count b { font-size: var(--fs-lg); color: var(--accent); }
/* 채워진 장에 불이 켜짐 (JS: .story-progress.is-revealed) */
.story-progress.is-revealed .arch-mark.is-done { animation: arch-ignite 0.9s var(--ease-out) calc(0.2s + var(--i) * 120ms) both; }
@keyframes arch-ignite {
  0% { background: transparent; box-shadow: none; transform: scale(0.9); }
  50% { background: oklch(0.98 0.03 var(--accent-h)); box-shadow: 0 0 24px var(--accent), 0 0 48px var(--accent-glow); transform: scale(1.12); }
  100% { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); transform: scale(1); }
}

.archetype-card__emblem { width: 128px; margin: 0 auto var(--space-4); }
.archetype-card__emblem svg { overflow: visible; }
.archetype-card__ring { fill: none; stroke: var(--accent-line); stroke-dasharray: 1; }
.archetype-card__web { fill: none; stroke: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.3); stroke-width: 0.8; stroke-dasharray: 1; }
.archetype-card__star { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.archetype-card__dots circle { fill: var(--accent); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 4px var(--accent)); }
.archetype-card__core { fill: oklch(0.98 0.03 var(--accent-h)); filter: drop-shadow(0 0 6px var(--accent)); transform-box: fill-box; transform-origin: center; }
.archetype-card__lead { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); }
.archetype-card__name { margin: var(--space-1) 0 var(--space-3); font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); color: var(--accent); text-shadow: 0 0 24px var(--accent-glow); }
.archetype-card__status { font-size: var(--fs-md); color: var(--c-text-strong); }
.archetype-card__desc { margin-top: var(--space-4); font-size: var(--fs-md); line-height: 1.75; text-align: left; color: var(--c-text-muted); }
.archetype-card.is-empty .archetype-card__emblem { opacity: 0.4; }
.archetype-card.is-empty .archetype-card__name { color: var(--c-text-faint); text-shadow: none; }
.archetype-card.is-complete .archetype-card__status { color: var(--accent); }

/* 문장이 별자리처럼 그려짐 (JS: .archetype-card.is-revealed, 약 3초)
   0.0 테두리 원 → 0.3 점 8개 차례로 → 1.0 점을 잇는 선 → 1.5 별 → 2.4 중심 점등·채움 → 2.3~2.9 글자 */
.archetype-card.is-revealed .archetype-card__ring { animation: base-draw 0.9s var(--ease-out) both; }
.archetype-card.is-revealed .archetype-card__dots circle { animation: base-pop 0.45s var(--ease-spring) calc(0.3s + var(--i) * var(--stagger)) both; }
.archetype-card.is-revealed .archetype-card__web { animation: base-draw 1s var(--ease-out) 1s both; }
.archetype-card.is-revealed .archetype-card__star { animation: base-draw 1.1s var(--ease-out) 1.5s both, star-fill 0.6s ease-out 2.4s both; }
.archetype-card.is-revealed .archetype-card__core { animation: base-pop 0.6s var(--ease-spring) 2.4s both; }
.archetype-card.is-revealed .archetype-card__lead { animation: base-fade-in 0.6s ease-out 2.1s both; }
.archetype-card.is-revealed .archetype-card__name { animation: title-emerge 0.9s var(--ease-reveal) 2.3s both; }
.archetype-card.is-revealed .archetype-card__status { animation: base-fade-up var(--dur-reveal) var(--ease-reveal) 2.6s both; }
.archetype-card.is-revealed :is(.archetype-card__desc, .evidence) { animation: base-fade-up var(--dur-reveal) var(--ease-reveal) 2.8s both; }
@keyframes star-fill { from { fill-opacity: 0; } }

.evidence { margin-top: var(--space-5); border-top: 1px solid var(--c-line); text-align: left; }
.evidence__item { display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "g room tag" "g type tag"; column-gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); }
.evidence__glyph { grid-area: g; text-align: center; font-size: var(--fs-lg); color: var(--accent); }
/* (2단계 개발 담당, 디자인 담당 확인 필요) 근거 목록 기호를 글자 대신 방 아이콘 SVG로 — .next-room__glyph svg와 같은 방식 */
.evidence__glyph svg { width: 22px; height: 22px; overflow: visible; vertical-align: middle; }
.evidence__glyph svg use { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.evidence__room { grid-area: room; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.evidence__type { grid-area: type; font-size: var(--fs-sm); color: var(--c-text-strong); }
.evidence__tag { grid-area: tag; padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--accent-soft); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }

.story-empty { margin-top: var(--space-6); padding: var(--space-6) var(--space-5); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-lg); text-align: center; }
.story-empty__title { font-size: var(--fs-lg); color: var(--c-text-strong); }
.story-empty__text { margin-top: var(--space-2); font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--c-text-muted); }
.story-empty__doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-4); } /* (2단계) 여섯 방 2×3 */
.story-empty__doors .btn { padding-inline: var(--space-2); font-size: var(--fs-sm); }

/* 이야기의 등뼈: 운명의 실로 이어진 1~6장 (JS: 보이면 .spine.is-in, 각 장 .is-in) */
.spine { position: relative; margin-top: var(--space-10); }
.spine::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(var(--accent), var(--accent-line) 40%, var(--c-line)); transform-origin: top; }
.spine.is-in::before { animation: spine-grow 1.4s var(--ease-out) both; }
@keyframes spine-grow { from { transform: scaleY(0); } }
.spine-item { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: var(--space-4); padding-bottom: var(--space-6); }
.spine-item__node { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--c-line-strong); border-radius: 50%; background: var(--c-bg); font-family: var(--font-latin); font-size: var(--fs-sm); color: var(--c-text-faint); }
.spine-item.is-done .spine-item__node { border-color: var(--accent); background: var(--accent); color: var(--c-on-accent); font-weight: 700; box-shadow: 0 0 14px var(--accent-glow); }
.spine-item.is-done.is-in .spine-item__node { animation: node-ignite 1s var(--ease-out) both; }
@keyframes node-ignite {
  0% { background: var(--c-bg); box-shadow: none; transform: scale(0.7); }
  45% { background: oklch(0.98 0.03 var(--accent-h)); box-shadow: 0 0 30px var(--accent), 0 0 60px var(--accent-glow); transform: scale(1.18); }
  100% { background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); transform: scale(1); }
}
.spine-item.is-available .spine-item__node { border: 1px dashed var(--accent); color: var(--accent); animation: portal-pulse-small 3.2s ease-in-out infinite; }
.spine-item__body { min-width: 0; padding-top: 6px; }
.spine-item__label { font-size: var(--fs-md); font-weight: 700; color: var(--c-text-strong); }
.spine-item.is-upcoming .spine-item__label { color: var(--c-text-muted); font-weight: 400; }
.spine-item__room { margin-top: 2px; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); }
.spine-item__type { display: block; margin-top: var(--space-1); font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 700; color: var(--accent); }
.spine-item__teaser { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--c-text-faint); }
.spine-item__go { margin-top: var(--space-3); }
.spine-item__summary { display: grid; gap: 0.9em; margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--c-surface-1); font-size: var(--fs-md); line-height: 1.8; }
.spine-item__reread { margin-top: var(--space-2); color: var(--accent); }


/* ═══════════════════════════════════════════════════════════════════════════
   2단계 (2026-09-27): 오검 · 데칸 · 촐킨 · 시빌라 네 방
   - 틀(시작·입력·결과·목차·장·떡밥)은 룬·별과 같은 class를 쓰고, 여기에는 방마다 다른 것만 둔다.
   - 의식 연출은 방마다 다르다: 오검 = 손끝으로 껍질에 새김(사용자가 쓸어내림) / 데칸 = 멈춘 원반 위를 그림자만 똑딱 이동(지켜봄)
     / 촐킨 = 맞물린 두 톱니가 반대로 돌다 멈춤 + 260일 돌판(지켜봄) / 시빌라 = 두루마리를 촛불로 끌어 내림 → 글자가 떠오름(옮겨 놓기)
   - 움직임 줄이기: 상태 class(is-carved, is-landed, is-warming)의 기본 스타일이 곧 최종 모습. 애니메이션은 그 앞의 과정만 그린다.
   - 명세: design/strange-oracle.md "2단계: 네 방"
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bark-w: 124px;
  --bark-h: min(380px, 50dvh);
  --sundial: min(320px, 86vw);
  --gears-w: min(340px, 100%);
  --gear-ms: 4200ms;      /* 촐킨 톱니 회전 (JS 착지 타이머와 맞춘다) */
  --shadow-ms: 4400ms;    /* 데칸 그림자 이동 */
  --stage-h: 372px;       /* 시빌라 신탁 무대 (360×640에서 안내·질문·무대가 한 화면에) */
  --sheet-h: 170px;       /* 두루마리 종이 높이 */
  --rod-h: 14px;
  --travel: 172px;        /* 두루마리를 끌어 내리는 거리 (JS: near = 끈 거리 ÷ 이 값) */
  --scroll-w: min(250px, 72vw);
}

/* ───────── 방 시작: 방 상징 ───────── */
.room-emblem__icon, .room-emblem__ogham {
  fill: none;
  stroke: oklch(0.96 0.03 var(--accent-h));
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: base-draw 1.4s var(--ease-out) 0.3s both;
}
.room-emblem .room-emblem__ogham { width: 28px; height: 56px; stroke-width: 4.5; }
.room-emblem--ogham { /* 자작나무 껍질 조각 */
  border-radius: 40% 44% 38% 42% / 12% 12% 10% 10%;
  width: 64px;
  background:
    radial-gradient(10px 2px at 30% 22%, oklch(0.3 0.02 60 / 0.7), transparent),
    radial-gradient(12px 2px at 68% 58%, oklch(0.3 0.02 60 / 0.6), transparent),
    radial-gradient(8px 1.5px at 40% 80%, oklch(0.3 0.02 60 / 0.6), transparent),
    linear-gradient(90deg, oklch(0.62 0.02 85), oklch(0.92 0.012 90) 30%, oklch(0.96 0.008 95) 55%, oklch(0.66 0.02 80));
  color: oklch(0.3 0.04 60);
}
.room-emblem--ogham .room-emblem__ogham { stroke: oklch(0.3 0.04 60); filter: drop-shadow(0 0 6px var(--accent)); }
.room-emblem--decan { background: radial-gradient(circle, oklch(0.5 0.08 var(--accent-h) / 0.5), oklch(0.26 0.05 var(--room-h)) 70%); }
.room-emblem--tzolkin .room-emblem__gear { animation: base-draw 1.4s var(--ease-out) 0.3s both, emblem-turn 40s linear infinite; }
@keyframes emblem-turn { to { rotate: 360deg; } }
.room-emblem--sibyl { overflow: visible; }
.room-emblem--sibyl .room-emblem__laurel { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); filter: none; }
.room-emblem--sibyl .room-emblem__flame { width: 40px; height: 40px; }

/* 월계관 (시빌라 시작·결과 캡처) */
.laurel__stem { fill: none; stroke: var(--accent-dim); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; }
.laurel__leaves path { fill: oklch(0.7 0.07 145 / 0.9); stroke: oklch(0.84 0.06 140 / 0.6); stroke-width: 0.6; transform-box: fill-box; transform-origin: center; }
.room-emblem__laurel { color: var(--accent); }

/* ───────── 입력: 5개 주제 칩 · 질문 칸 ───────── */
.chip-group--five .chip:last-child { grid-column: 1 / -1; }
.input--area { min-height: calc(var(--tap) * 1.6); resize: none; line-height: var(--lh-ui); }
.field__count { justify-self: end; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }

/* ───────── 결과 공통 보강 ───────── */
.source-note { /* 고증 한 줄: 실제로 전해지는 것과 새로 붙인 해석의 구분 */
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--accent-line);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--c-text-muted);
}
.source-note::before { content: "※"; flex-shrink: 0; color: var(--accent-dim); }
.page-end__glyph { width: 14px; height: 28px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.page-end__glyph--icon { width: 24px; height: 24px; stroke-width: 2.4; stroke-linejoin: round; }

/* ═════════ 3-O. 오검의 방 의식 — 자작나무 껍질에 손끝으로 이름을 새긴다 (숲·촉각·사용자 속도) ═════════
   쓸어내리는 동안: JS가 .bark의 --carve(0~1)만 바꾼다 → 줄기가 자라고, 글자 획이 차례로 파이고, 빛나는 칼끝이 따라 내려온다.
   다 새기면 .ritual--ogham.is-carved: 글자가 위에서부터 빛남(0~1.2s) → 껍질이 어두워짐(0.9s~) → 뿌리 글자가 떠오르며 그려짐(1.1~2.5s) → 이름(2.3s~) */
.ritual--ogham.is-active { justify-content: flex-start; padding-top: var(--space-5); }
.grove { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.grove__trunk { /* 멀리 선 자작나무들: 흰 줄기 + 검은 껍질눈 */
  position: absolute;
  top: -4%;
  bottom: -4%;
  left: var(--x);
  width: var(--w);
  opacity: var(--o);
  background:
    radial-gradient(40% 3px at 30% 22px, oklch(0.14 0.02 160 / 0.85), transparent),
    radial-gradient(55% 3.5px at 70% 71px, oklch(0.14 0.02 160 / 0.8), transparent),
    radial-gradient(30% 2.5px at 45% 118px, oklch(0.14 0.02 160 / 0.7), transparent),
    linear-gradient(90deg, oklch(0.55 0.015 150), oklch(0.9 0.01 110) 40%, oklch(0.8 0.012 120) 70%, oklch(0.5 0.015 150));
  background-size: 100% 140px, 100% 140px, 100% 140px, 100% 100%;
  filter: blur(0.6px);
  -webkit-mask: linear-gradient(to bottom, transparent, #000 25%, #000 70%, transparent);
  mask: linear-gradient(to bottom, transparent, #000 25%, #000 70%, transparent);
}
.grove__mist {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: 0;
  height: 40%;
  background: radial-gradient(50% 60% at 30% 100%, oklch(0.6 0.04 var(--accent-h) / 0.18), transparent 70%), radial-gradient(40% 50% at 75% 100%, oklch(0.7 0.03 var(--accent-h) / 0.14), transparent 70%);
  animation: mist-drift 30s ease-in-out infinite alternate;
}
@keyframes mist-drift { to { transform: translate3d(12%, 0, 0); } }
.grove__motes { /* 숲 속을 떠도는 빛 알갱이 (반딧불처럼) */
  position: absolute;
  inset: 0 0 -300px;
  opacity: 0.8;
  background-size: 170px 230px;
  background-image:
    radial-gradient(1.6px 1.6px at 40px 60px, oklch(0.92 0.12 var(--accent-h)), transparent),
    radial-gradient(1.2px 1.2px at 130px 170px, oklch(0.9 0.1 var(--accent-h)), transparent),
    radial-gradient(1px 1px at 90px 20px, oklch(0.95 0.06 var(--accent-h)), transparent);
  animation: motes-rise 40s linear infinite, motes-blink 3.4s ease-in-out infinite alternate;
}
@keyframes motes-rise { to { transform: translate3d(0, -230px, 0); } }
@keyframes motes-blink { from { opacity: 0.35; } to { opacity: 0.9; } }

.bark-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: calc(var(--bark-h) + var(--space-6)); }
.bark-stage > * { grid-area: 1 / 1; }
.bark { /* 흰 자작나무 껍질 한 조각. 눌러 끄는 동안 화면이 스크롤되지 않게 */
  --blade-y: calc(8% + var(--carve, 0) * 84%);
  position: relative;
  width: var(--bark-w);
  height: var(--bark-h);
  border-radius: 44% 50% 46% 48% / 5% 5% 4% 4%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
  background:
    radial-gradient(16px 2.4px at 26% 14%, oklch(0.24 0.02 60 / 0.75), transparent),
    radial-gradient(22px 2.6px at 70% 27%, oklch(0.24 0.02 60 / 0.7), transparent),
    radial-gradient(12px 2px at 40% 41%, oklch(0.24 0.02 60 / 0.6), transparent),
    radial-gradient(20px 2.4px at 76% 55%, oklch(0.24 0.02 60 / 0.7), transparent),
    radial-gradient(14px 2px at 22% 68%, oklch(0.24 0.02 60 / 0.65), transparent),
    radial-gradient(24px 2.8px at 62% 83%, oklch(0.24 0.02 60 / 0.7), transparent),
    radial-gradient(10px 2px at 34% 93%, oklch(0.24 0.02 60 / 0.6), transparent),
    repeating-linear-gradient(180deg, transparent 0 9px, oklch(0.7 0.015 80 / 0.25) 9px 10px),
    linear-gradient(90deg, oklch(0.58 0.02 80), oklch(0.9 0.012 90) 18%, oklch(0.97 0.008 95) 46%, oklch(0.9 0.012 88) 74%, oklch(0.55 0.02 75));
  box-shadow: 0 0 0 1px oklch(0.2 0.02 160 / 0.5), 0 24px 60px oklch(0 0 0 / 0.55), 0 0 calc(20px + 40px * var(--carve, 0)) oklch(var(--accent-l) var(--accent-c) var(--accent-h) / calc(0.1 + 0.3 * var(--carve, 0)));
  transition: filter 0.8s ease-out 0.9s;
}
.bark:active { cursor: grabbing; }
.bark__skin { /* 칼끝이 지나간 자리에 번지는 초록 빛 */
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 18% at 50% var(--blade-y), oklch(0.84 0.1 var(--accent-h) / 0.35), transparent 70%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.bark__stem { /* 줄기(druim): 새긴 만큼 위에서 아래로 파인다 */
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, oklch(0.26 0.03 60), oklch(0.5 0.04 70), oklch(0.26 0.03 60));
  box-shadow: 0 0 6px var(--accent-glow);
  transform-origin: top;
  transform: scaleY(var(--carve, 0));
}
.bark::before { /* 새길 길 전체를 희미하게 보여 줌 */
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 0;
  border-left: 2px dotted oklch(0.4 0.03 70 / 0.35);
  margin-left: -1px;
}
.bark__letters {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bark__letter {
  --cut: clamp(0, calc(var(--carve, 0) * var(--count, 1) - var(--k, 0)), 1);
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  width: 100%;
  min-height: 0;
}
.bark__letter::before { /* 새길 자리 표시 */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: oklch(0.4 0.03 70);
  opacity: calc(0.4 * (1 - var(--cut)));
}
.bark__letter svg {
  height: 100%;
  max-height: 64px;
  aspect-ratio: 1 / 2;
  overflow: visible;
  fill: none;
  stroke: oklch(0.27 0.035 60);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--cut));
  filter: drop-shadow(0 0 calc(5px * var(--cut)) var(--accent));
}
.bark__blade { /* 빛나는 칼끝: 쓸어내린 자리를 따라온다. 처음엔 숨쉬며 "여기서부터" */
  position: absolute;
  left: 50%;
  top: var(--blade-y);
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.99 0.02 var(--accent-h)) 0 22%, var(--accent) 45%, transparent 72%);
  box-shadow: 0 0 24px var(--accent-glow);
  pointer-events: none;
  animation: blade-breathe 1.6s ease-in-out infinite;
}
.bark__blade::after { /* 아래 방향 안내 화살표: 조금이라도 새기면 사라진다 */
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  opacity: calc(1 - var(--carve, 0) * 12);
  animation: blade-hint 1.6s ease-in-out infinite;
}
@keyframes blade-breathe { 50% { transform: scale(1.25); } }
@keyframes blade-hint { 50% { translate: 0 6px; } }

/* 다 새김: 글자가 위에서부터 하나씩 빛나고, 껍질은 물러나고, 뿌리 글자가 떠오른다 */
.ritual--ogham.is-carved .bark { filter: brightness(0.55) saturate(0.7); }
.ritual--ogham.is-carved .bark__blade { display: none; }
.ritual--ogham.is-carved .bark__letter svg { animation: letter-kindle 0.9s var(--ease-out) calc(var(--k, 0) * 80ms) both; }
@keyframes letter-kindle {
  0% { stroke: oklch(0.27 0.035 60); filter: none; }
  40% { stroke: oklch(0.98 0.04 var(--accent-h)); filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 20px var(--accent-glow)); }
}
.ogham-root { /* 뿌리 글자: 쉬는 상태에서는 보이지 않고, .is-carved의 기본 모습이 최종 모습 */
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  opacity: 0;
  pointer-events: none;
}
.ogham-root::before { /* 뒤에서 번지는 초록 빛 */
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: -1;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.84 0.1 var(--accent-h) / 0.45), oklch(0.3 0.06 var(--room-h) / 0.6) 45%, transparent 70%);
}
.ogham-root__glyph {
  width: 80px;
  height: 160px;
  overflow: visible;
  fill: none;
  stroke: oklch(0.97 0.04 var(--accent-h));
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 22px var(--accent-glow));
}
.ogham-root__name {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: oklch(0.16 0.04 var(--room-h) / 0.85);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text-strong);
  text-shadow: 0 0 16px var(--accent-glow);
}
.ritual--ogham.is-carved .ogham-root { opacity: 1; animation: root-rise 1.2s var(--ease-reveal) 1.1s both; }
.ritual--ogham.is-carved .ogham-root__glyph { animation: base-draw 1.3s var(--ease-out) 1.2s both; }
.ritual--ogham.is-carved .ogham-root__name { animation: base-fade-up var(--dur-reveal) var(--ease-reveal) 2.3s both; }
@keyframes root-rise {
  from { opacity: 0; transform: translateY(28px) scale(0.85); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.ogham-latin { margin-top: var(--space-3); font-family: var(--font-latin); font-size: var(--fs-sm); letter-spacing: 0.14em; color: var(--accent-dim); }

/* ═════════ 3-D. 데칸의 방 의식 — 정오의 해시계 (원반은 멈춰 있고 그림자만 열흘씩 똑딱 이동, 약 4.4초, 조작 없음) ═════════
   0.0s .is-running: 하늘이 새벽 → 정오 빛으로(4.4s) · 테두리·시간선 그려짐 · 36개 데칸 별이 하나씩 켜짐(0.2s + n×40ms)
        그림자와 해가 원반 둘레를 반대편에서 돈다: 360° 전부터 한 칸(10°)씩 똑딱, 점점 느리게 (18칸 → 12칸 → 5칸 → 마지막 1칸은 미끄러지듯)
   4.4s .is-landed: 그림자가 멈춘 칸(.is-home)이 금빛으로 달아오르고, 그림자 끝에 빛, 데칸 이름이 떠오름 */
.ritual--decan { --ritual-ms: 5000ms; }
.ritual--decan.is-active { justify-content: space-evenly; padding-bottom: var(--space-8); }
.sun-sky { /* 새벽 → 정오: 아래에서 금빛이 차오름 */
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 45% at 50% 100%, oklch(0.62 0.12 var(--accent-h) / 0.4), transparent 70%),
    radial-gradient(90% 40% at 50% 0%, oklch(0.5 0.08 calc(var(--accent-h) + 20) / 0.25), transparent 70%);
  opacity: 1;
}
.ritual--decan.is-running:not(.is-landed) .sun-sky { animation: sky-dawn var(--shadow-ms) ease-in-out both; }
@keyframes sky-dawn { from { opacity: 0.2; } }
.dunes { /* 모래 언덕 두 겹 + 옆으로 흐르는 모래 알갱이 */
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  z-index: -1;
  height: 26%;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 25% 100%, oklch(0.3 0.06 var(--room-h)) 60%, transparent 61%),
    radial-gradient(70% 60% at 80% 100%, oklch(0.24 0.05 var(--room-h)) 60%, transparent 61%),
    radial-gradient(50% 80% at 55% 100%, oklch(0.36 0.07 var(--accent-h) / 0.5), transparent 70%);
}
.dunes__sand {
  position: absolute;
  inset: -20% -10% 0;
  opacity: 0.6;
  background-size: 120px 60px;
  background-image:
    radial-gradient(1px 1px at 20px 30px, oklch(0.9 0.08 var(--accent-h)), transparent),
    radial-gradient(1px 1px at 80px 10px, oklch(0.85 0.06 var(--accent-h)), transparent),
    radial-gradient(0.8px 0.8px at 60px 50px, oklch(0.9 0.05 var(--accent-h)), transparent);
  animation: sand-blow 12s linear infinite;
}
@keyframes sand-blow { to { transform: translate3d(-120px, -12px, 0); } }

.decan-head { text-align: center; }
.decan-head__label { font-size: var(--fs-md); letter-spacing: 0.1em; color: var(--c-text-muted); }
.decan-head__date { margin-top: var(--space-1); font-family: var(--font-latin); font-size: var(--fs-lg); letter-spacing: 0.08em; color: var(--accent); font-variant-numeric: tabular-nums; }

.decan-dial { position: relative; width: var(--sundial); aspect-ratio: 1; margin: var(--space-2) auto; }
.decan-dial::before { /* 사암 원반 (SVG 밖에서 CSS로: 결이 있는 돌) */
  content: "";
  position: absolute;
  inset: 3.1%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 42% 38%, transparent 0 7px, oklch(0.3 0.04 55 / 0.12) 7px 8px),
    radial-gradient(circle at 40% 35%, oklch(0.5 0.06 72), oklch(0.36 0.05 62) 55%, oklch(0.24 0.04 55));
  box-shadow: inset 0 0 30px oklch(0 0 0 / 0.5), inset 0 -8px 20px oklch(0 0 0 / 0.35), 0 18px 44px oklch(0 0 0 / 0.55);
}
.sundial { position: relative; width: 100%; height: 100%; overflow: visible; }
.sundial__rays { stroke: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.55); stroke-width: 1.4; stroke-linecap: round; }
.sundial__rim { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 1; }
.sundial__ring { fill: none; stroke: oklch(0.2 0.03 55 / 0.55); stroke-width: 1; }
.sundial__dividers { stroke: oklch(0.2 0.03 55 / 0.55); stroke-width: 1; }
.sundial__hours { fill: none; stroke: oklch(0.2 0.03 55 / 0.4); stroke-width: 0.8; stroke-dasharray: 1; }
.sundial__inner { fill: oklch(0.3 0.04 55 / 0.6); stroke: oklch(0.2 0.03 55 / 0.6); }
.decan-cell__bg { fill: transparent; }
.decan-cell__star { fill: oklch(0.96 0.05 var(--accent-h)); opacity: 0.85; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 2px var(--accent)); }
.gnomon-arm { /* 그림자(위쪽)와 해(아래쪽, 반대편)가 한 팔에 달려 함께 돈다 */
  transform-box: view-box;
  transform-origin: 0 0; /* = 원반 중심 (viewBox가 중심 0,0) */
  transform: rotate(var(--decan-deg, 0deg));
}
.gnomon-shadow { fill: oklch(0.08 0.02 50 / 0.62); filter: blur(1.2px); }
.gnomon-shadow__tip { fill: oklch(0.98 0.06 var(--accent-h)); opacity: 0; transform-box: fill-box; transform-origin: center; }
.gnomon-sun { fill: oklch(0.98 0.05 95); filter: drop-shadow(0 0 6px oklch(0.92 0.12 85)) drop-shadow(0 0 14px var(--accent)); }
.gnomon-sun__glow { fill: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.28); transform-box: fill-box; transform-origin: center; animation: sun-pulse 2.4s ease-in-out infinite; }
@keyframes sun-pulse { 50% { transform: scale(1.35); opacity: 0.5; } }
.gnomon circle { fill: oklch(0.42 0.05 65); stroke: oklch(0.2 0.03 55 / 0.7); }
.gnomon path { fill: oklch(0.82 0.09 80); stroke: oklch(0.3 0.04 55); stroke-width: 0.8; }

.ritual--decan.is-running .sundial__rim { animation: base-draw 1s var(--ease-out) both; }
.ritual--decan.is-running .sundial__hours { animation: base-draw 1.4s var(--ease-out) 0.2s both; }
.ritual--decan.is-running .sundial__rays { animation: base-fade-in 1s ease-out 0.4s both; }
.ritual--decan.is-running .decan-cell__star { animation: base-pop 0.4s var(--ease-out) calc(0.2s + var(--n) * 40ms) both; }
.ritual--decan.is-running .gnomon-arm { animation: shadow-tick var(--shadow-ms) both; }
/* 한 칸 = 10° = 약 열흘. steps로 "똑딱" 넘어가고 구간마다 느려진다. 마지막 한 칸만 미끄러지듯 */
@keyframes shadow-tick {
  0% { transform: rotate(calc(var(--decan-deg, 0deg) - 360deg)); animation-timing-function: steps(18, end); }
  30% { transform: rotate(calc(var(--decan-deg, 0deg) - 180deg)); animation-timing-function: steps(12, end); }
  60% { transform: rotate(calc(var(--decan-deg, 0deg) - 60deg)); animation-timing-function: steps(5, end); }
  84% { transform: rotate(calc(var(--decan-deg, 0deg) - 10deg)); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  100% { transform: rotate(var(--decan-deg, 0deg)); }
}
/* 착지: 기본 스타일이 최종 모습(점등). 애니메이션은 번쩍임만 */
.ritual--decan.is-landed .decan-cell.is-home .decan-cell__bg { fill: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.55); filter: drop-shadow(0 0 8px var(--accent)); animation: cell-ignite 1s var(--ease-out) both; }
.ritual--decan.is-landed .decan-cell.is-home .decan-cell__star { fill: oklch(1 0 0); filter: drop-shadow(0 0 5px oklch(1 0 0)); }
.ritual--decan.is-landed .gnomon-shadow__tip { opacity: 0.9; animation: tip-flash 1s var(--ease-out) both; }
@keyframes cell-ignite {
  0% { fill: oklch(0.99 0.03 var(--accent-h) / 0.95); filter: drop-shadow(0 0 16px var(--accent)) drop-shadow(0 0 30px var(--accent-glow)); }
}
@keyframes tip-flash { 0% { opacity: 0; transform: scale(0.3); } 40% { opacity: 1; transform: scale(2.2); } }
.decan-name { font-size: var(--fs-xl); font-weight: 700; color: var(--c-text-strong); text-shadow: 0 0 18px var(--accent-glow); opacity: 0; }
.ritual--decan.is-landed .decan-name { opacity: 1; animation: title-emerge 0.9s var(--ease-reveal) both; }
.decan-note { margin-top: var(--space-3); }
.ritual.is-running .ritual-timer__bar { animation: ritual-timer var(--ritual-ms) linear forwards; }

/* 데칸 후보 고르기: 베다의 방 틀 그대로, 두 칸 색만 이 방에 맞춤 (1 = 호박빛, 2 = 터키석) */
.decan-choose .day-line__seg:nth-child(1), .decan-choose .choice:nth-child(1) { --seg-h: var(--hue-sand); }
.decan-choose .day-line__seg:nth-child(2), .decan-choose .choice:nth-child(2) { --seg-h: var(--hue-jade); }

/* ═════════ 3-T. 촐킨의 방 의식 — 맞물린 두 돌 톱니가 반대로 돌다 멈춘다 (약 4.2초, 조작 없음) ═════════
   큰 톱니 = 스무 문양(한 칸 18°), 작은 톱니 = 열세 숫자(한 칸 27.69°). 하루에 두 톱니가 한 이씩 함께 넘어간다.
   0.0s .is-running: 40일 전 위치에서 출발 → 큰 톱니 +720°, 작은 톱니 −1107.69°를 같은 이징으로 되돌아와 맞물린 채 멈춤
        260일 돌판 위로 빛 띠가 세 번 훑고 지나감
   4.2s .is-landed: 맞물린 자리에 빛, 그날의 문양·숫자 칸 점등, 돌판에 가로·세로 줄과 그날 점이 켜짐, 가운데에 이름 */
.ritual--tzolkin { --ritual-ms: 4800ms; }
.ritual--tzolkin.is-active { justify-content: space-evenly; padding-bottom: var(--space-6); }
.canopy { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.canopy__leaf { /* 위 모서리에서 드리운 정글 잎 (뾰족한 잎 3장: 본체 + ::before + ::after) */
  position: absolute;
  top: -40px;
  width: 150px;
  height: 64px;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(160deg, oklch(0.3 0.06 160), oklch(0.16 0.04 170));
  box-shadow: inset 0 0 0 1px oklch(0.5 0.06 var(--accent-h) / 0.18);
  opacity: 0.75;
  animation: leaf-sway 9s ease-in-out infinite alternate;
}
.canopy__leaf::before, .canopy__leaf::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 50px;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(160deg, oklch(0.26 0.055 165), oklch(0.14 0.035 170));
}
.canopy__leaf::before { left: -30px; top: 50px; rotate: 32deg; }
.canopy__leaf::after { left: 50px; top: 40px; rotate: 58deg; width: 96px; height: 40px; opacity: 0.8; }
.canopy__leaf--l { left: -40px; transform-origin: 0 0; rotate: 18deg; }
.canopy__leaf--r { right: -40px; transform-origin: 100% 0; scale: -1 1; rotate: 18deg; animation-delay: -4s; }
@keyframes leaf-sway { to { translate: 0 6px; } }
.canopy__motes {
  position: absolute;
  inset: 0 0 -200px;
  opacity: 0.7;
  background-size: 190px 210px;
  background-image:
    radial-gradient(1.4px 1.4px at 50px 80px, oklch(0.9 0.1 var(--accent-h)), transparent),
    radial-gradient(1px 1px at 150px 30px, oklch(0.92 0.08 85), transparent);
  animation: motes-rise 50s linear infinite;
}

.gears { position: relative; width: var(--gears-w); aspect-ratio: 355 / 230; margin: var(--space-2) auto; }
.gear { position: absolute; overflow: visible; }
.gear--num { left: 0; top: 17.39%; width: 42.25%; height: 65.22%; transform: rotate(var(--num-deg, 0deg)); }
.gear--sign { left: 35.21%; top: 0; width: 64.79%; height: 100%; transform: rotate(var(--sign-deg, 0deg)); }
.gear__body { fill: oklch(0.4 0.035 165); stroke: oklch(0.62 0.05 var(--accent-h) / 0.7); stroke-width: 1.2; stroke-linejoin: round; }
.gear--num .gear__body { fill: oklch(0.34 0.035 175); }
.gear__groove { fill: none; stroke: oklch(0.18 0.03 170 / 0.7); stroke-width: 1.4; }
.gear-sign__frame { fill: oklch(0.3 0.03 170); stroke: oklch(0.84 0.1 var(--hue-gold) / 0.45); stroke-width: 0.8; }
.gear-sign__label { fill: oklch(0.88 0.08 var(--hue-gold)); font-family: var(--font-latin); font-size: 7.5px; letter-spacing: 0.04em; }
.gear-num { fill: oklch(0.86 0.1 var(--hue-gold)); }
.gears__mesh { /* 두 톱니가 맞물리는 자리: 위에서 내려오는 바늘 + 둥근 빛 */
  position: absolute;
  left: 39.44%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  box-shadow: 0 0 16px var(--accent-glow), inset 0 0 10px var(--accent-soft);
  pointer-events: none;
}
.gears__mesh::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--accent));
}
.gears__mesh::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
}
.gears__core { /* 톱니 가운데(돌지 않음): 착지하면 그날의 숫자·문양 */
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.3 0.05 var(--room-h)), oklch(0.2 0.04 var(--room-h)));
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 18px oklch(0 0 0 / 0.5);
  transform: translate(-50%, -50%);
}
.gears__core--num { left: 21.13%; width: 15%; aspect-ratio: 1; }
.gears__core--num svg { width: 70%; height: 70%; fill: oklch(0.9 0.1 var(--hue-gold)); opacity: 0; }
.gears__core--sign { left: 67.61%; width: 24%; aspect-ratio: 1; padding: var(--space-1); font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; text-align: center; color: var(--c-text-strong); }
.gears__core--sign > span { opacity: 0; }
.ritual--tzolkin.is-running .gear--sign { animation: gear-sign-turn var(--gear-ms) cubic-bezier(0.25, 0.7, 0.2, 1) both; }
.ritual--tzolkin.is-running .gear--num { animation: gear-num-turn var(--gear-ms) cubic-bezier(0.25, 0.7, 0.2, 1) both; }
@keyframes gear-sign-turn { from { transform: rotate(calc(var(--sign-deg, 0deg) + 720deg)); } }
@keyframes gear-num-turn { from { transform: rotate(calc(var(--num-deg, 0deg) - 1107.69deg)); } }
.ritual--tzolkin.is-landed .gear-sign.is-home .gear-sign__frame { fill: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.35); stroke: var(--accent); stroke-width: 1.4; filter: drop-shadow(0 0 5px var(--accent)); }
.ritual--tzolkin.is-landed .gear-sign.is-home .gear-sign__label { fill: oklch(1 0 0); }
.ritual--tzolkin.is-landed .gear-num.is-home { fill: oklch(1 0 0); filter: drop-shadow(0 0 4px var(--accent)); }
.ritual--tzolkin.is-landed .gears__mesh { animation: mesh-flash 1s var(--ease-out) both; }
@keyframes mesh-flash {
  0% { transform: scale(0.6); box-shadow: 0 0 0 transparent; }
  40% { transform: scale(1.6); background: oklch(0.98 0.03 var(--accent-h) / 0.6); box-shadow: 0 0 40px var(--accent); }
}
.ritual--tzolkin.is-landed .gears__core svg,
.ritual--tzolkin.is-landed .gears__core--sign > span { opacity: 1; animation: base-pop 0.6s var(--ease-spring) 0.2s both; }
.tzolkin-day { font-size: var(--fs-xl); font-weight: 700; color: var(--c-text-strong); text-shadow: 0 0 18px var(--accent-glow); opacity: 0; }
.ritual--tzolkin.is-landed .tzolkin-day { opacity: 1; animation: title-emerge 0.9s var(--ease-reveal) 0.2s both; }

/* 260일 돌판: 가로 스무 문양 × 세로 열세 줄 = 260개의 점 (점은 배경 무늬, DOM 없음) */
.tablet {
  position: relative;
  width: min(300px, 84vw);
  aspect-ratio: 2 / 1;
  margin-top: var(--space-3);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
  background-color: oklch(0.24 0.03 175 / 0.85);
  background-image: radial-gradient(circle, oklch(0.74 0.035 175 / 0.6) 1.3px, transparent 1.9px);
  background-size: 5% calc(100% / 13);
  box-shadow: inset 0 2px 8px oklch(0 0 0 / 0.45);
  overflow: hidden;
}
.tablet > span { position: absolute; pointer-events: none; }
.tablet__glow { /* 달리는 빛 띠 (의식 동안만) */
  inset: 0;
  background-image: radial-gradient(circle, oklch(0.97 0.06 var(--accent-h)) 1.6px, transparent 2.4px);
  background-size: 5% calc(100% / 13);
  -webkit-mask: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  mask: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  opacity: 0;
}
.ritual--tzolkin.is-running:not(.is-landed) .tablet__glow { animation: tablet-sweep 1.3s linear 3 both; }
@keyframes tablet-sweep {
  0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
.tablet__col { top: 0; bottom: 0; left: calc(var(--col, 0) * 5%); width: 5%; background: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.2); opacity: 0; }
.tablet__row { left: 0; right: 0; top: calc(var(--row, 0) * 100% / 13); height: calc(100% / 13); background: oklch(0.84 0.1 var(--hue-gold) / 0.16); opacity: 0; }
.tablet__day {
  left: calc((var(--col, 0) + 0.5) * 5%);
  top: calc((var(--row, 0) + 0.5) * 100% / 13);
  width: 11px;
  height: 11px;
  margin: -5.5px;
  border-radius: 50%;
  background: oklch(0.99 0.02 var(--accent-h));
  box-shadow: 0 0 8px var(--accent), 0 0 18px var(--accent-glow);
  opacity: 0;
}
.ritual--tzolkin.is-landed :is(.tablet__col, .tablet__row, .tablet__day) { opacity: 1; }
.ritual--tzolkin.is-landed .tablet__col { animation: base-fade-in 0.6s ease-out 0.3s both; }
.ritual--tzolkin.is-landed .tablet__row { animation: base-fade-in 0.6s ease-out 0.45s both; }
.ritual--tzolkin.is-landed .tablet__day { animation: base-pop 0.6s var(--ease-spring) 0.6s both; }
.tzolkin-count { margin-top: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ═════════ 3-V. 시빌라 신탁의 방 의식 — 두루마리를 촛불로 끌어 내리면 펼쳐지며 숨은 글자가 떠오른다 (대리석·월계수·촛불) ═════════
   끄는 동안: JS가 .oracle-stage의 --near(0~1)만 바꾼다 → 두루마리가 내려오고, 불꽃이 커지고, 종이가 데워진다.
   .is-warming (놓거나 누름) 0.0s: 두루마리가 불꽃 위에 자리 잡음(0.3s) → 봉랍이 깨짐(0.2~0.8s) → 아래에서 위로 펼쳐짐(0.5~1.7s)
        → 글자가 아래에서부터 갈색으로 떠오름(1.6~4.0s, 비밀 잉크처럼) → 약 4.4초 뒤 결과 */
.ritual--sibyl.is-active { justify-content: flex-start; padding-top: var(--space-4); padding-bottom: 0; }
.temple { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.temple::after { /* 촛불이 신전 바닥을 비추는 빛 (가까이 끌수록 밝게) */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 140%;
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 88%, oklch(0.8 0.12 60 / 0.22), oklch(0.5 0.1 var(--accent-h) / 0.1) 45%, transparent 70%);
}
.temple__col { /* 양옆 대리석 기둥 (홈이 파인 기둥, 어둠 속에 반쯤) */
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  opacity: 0.28;
  background:
    repeating-linear-gradient(90deg, oklch(0.9 0.008 60) 0 5px, oklch(0.62 0.012 300) 5px 7px, oklch(0.84 0.01 60) 7px 11px),
    linear-gradient(90deg, oklch(0.8 0.01 300), oklch(0.95 0.006 60));
  -webkit-mask: linear-gradient(to bottom, #000, transparent 85%);
  mask: linear-gradient(to bottom, #000, transparent 85%);
}
.temple__col--l { left: -8px; }
.temple__col--r { right: -8px; }

.asked { /* 물어본 것: 카테고리 알약 + (적었다면) 질문 */
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  max-width: 26em;
  margin: 0 auto var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: oklch(0.18 0.04 var(--room-h) / 0.7);
}
.asked__category { padding: 1px var(--space-3); border-radius: var(--radius-pill); background: var(--accent-soft); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.asked__question {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--c-text);
}
.asked__question:empty { display: none; }
.asked--result { margin: 0 auto var(--space-4); }

.oracle-stage { position: relative; width: 100%; height: var(--stage-h); }
.oracle-stage__path { /* 두루마리에서 불꽃까지 희미한 점선 안내 (가까워질수록 사라짐) */
  position: absolute;
  left: 50%;
  top: 56px;
  height: calc(var(--travel) - 16px);
  border-left: 2px dotted oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.5);
  opacity: calc(0.9 - var(--near) * 1.2);
}
.scroll {
  position: absolute;
  left: 50%;
  top: 20px;
  z-index: 2;
  width: var(--scroll-w);
  height: calc(var(--sheet-h) + var(--rod-h) * 2);
  margin-left: calc(var(--scroll-w) / -2);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  transform: translateY(calc((var(--near) - 1) * var(--travel)));
  transition: transform var(--dur-base) var(--ease-out);
}
.oracle-stage.is-dragging .scroll { transition: none; cursor: grabbing; }
.oracle-stage.is-warming .scroll { transform: none; }
.scroll__rod { /* 나무 막대 (종이보다 넓어 양 끝 손잡이가 보인다) */
  position: absolute;
  left: 0;
  right: 0;
  height: var(--rod-h);
  border-radius: 7px;
  background: linear-gradient(180deg, oklch(0.66 0.07 60), oklch(0.44 0.06 50) 55%, oklch(0.28 0.04 45));
  box-shadow: 0 4px 10px oklch(0 0 0 / 0.45);
}
.scroll__rod--bottom { top: calc(var(--rod-h) + var(--sheet-h)); }
.scroll__rod--top { top: 0; transform: translateY(var(--sheet-h)); } /* 말린 상태: 아래 막대 위에 겹쳐 있음 */
.oracle-stage.is-warming .scroll__rod--top { transform: none; transition: transform 1.2s var(--ease-in-out) 0.5s; }
.scroll__roll { /* 말려 있는 종이 뭉치 + 봉랍 */
  position: absolute;
  left: 7%;
  right: 7%;
  top: calc(var(--sheet-h) - 6px);
  height: calc(var(--rod-h) + 26px);
  border-radius: 14px;
  background: linear-gradient(180deg, oklch(0.93 0.03 85), oklch(0.82 0.05 75) 50%, oklch(0.66 0.06 65));
  box-shadow: inset 0 -4px 8px oklch(0.4 0.05 55 / 0.35), 0 6px 14px oklch(0 0 0 / 0.4);
  opacity: calc(0.85 + var(--near) * 0.15);
  filter: brightness(calc(0.85 + var(--near) * 0.3));
}
.oracle-stage.is-warming .scroll__roll { opacity: 0; transition: opacity 0.6s ease-out 0.6s; }
.scroll__seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px;
  border-radius: 46% 54% 50% 50%;
  background: radial-gradient(circle at 35% 35%, oklch(0.62 0.16 25), oklch(0.42 0.14 22) 70%);
  box-shadow: 0 2px 4px oklch(0 0 0 / 0.4), inset 0 0 0 3px oklch(0.5 0.15 24);
}
.scroll__seal::after { /* 봉랍에 찍힌 작은 월계 잎 두 장 */
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50% 0;
  border: 1.5px solid oklch(0.75 0.12 30 / 0.7);
}
.oracle-stage.is-warming .scroll__seal { opacity: 0; animation: seal-break 0.6s ease-in 0.2s both; }
@keyframes seal-break {
  0% { opacity: 1; transform: none; }
  30% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: translateY(24px) rotate(40deg) scale(0.6); }
}
.scroll__sheet { /* 양피지: 말린 상태에서는 잘려 보이지 않고, 아래에서 위로 펼쳐진다 */
  position: absolute;
  left: 5%;
  right: 5%;
  top: var(--rod-h);
  height: var(--sheet-h);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4);
  background:
    radial-gradient(80% 50% at 50% 115%, oklch(0.7 0.13 55 / 0.45), transparent 70%),
    radial-gradient(circle at 20% 20%, oklch(0.8 0.05 70 / 0.35), transparent 40%),
    linear-gradient(90deg, oklch(0.84 0.045 78), oklch(0.93 0.03 88) 20%, oklch(0.95 0.025 90) 50%, oklch(0.92 0.03 85) 80%, oklch(0.82 0.045 75));
  box-shadow: inset 0 0 18px oklch(0.55 0.07 60 / 0.45);
  clip-path: inset(100% 0 0 0);
}
.oracle-stage.is-warming .scroll__sheet { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-in-out) 0.5s; }
.scroll__num { font-family: var(--font-latin); font-size: var(--fs-2xs); letter-spacing: 0.18em; color: oklch(0.45 0.07 45); opacity: 0; }
.scroll__text {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
  color: oklch(0.3 0.06 45);                 /* 양피지(L 0.93) 위 짙은 갈색: 대비 약 9:1 [코드 판단] */
  opacity: 0;
  -webkit-mask: linear-gradient(to top, #000 45%, transparent 55%) 0 100% / 100% 220% no-repeat;
  mask: linear-gradient(to top, #000 45%, transparent 55%) 0 100% / 100% 220% no-repeat;
}
.oracle-stage.is-warming :is(.scroll__text, .scroll__num) { opacity: 1; }
.oracle-stage.is-warming .scroll__num { animation: base-fade-in 0.8s ease-out 3.2s both; }
.oracle-stage.is-warming .scroll__text { animation: ink-rise 2.4s ease-out 1.6s both; }
@keyframes ink-rise { /* 비밀 잉크: 아래에서부터 흐린 갈색 → 불빛에 달아오름 → 또렷한 글자 */
  0% { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; color: oklch(0.75 0.06 65); filter: blur(3px); }
  55% { color: oklch(0.5 0.14 40); text-shadow: 0 0 10px oklch(0.8 0.15 55 / 0.8); filter: blur(0.5px); }
  100% { opacity: 1; -webkit-mask-position: 0 100%; mask-position: 0 100%; }
}

.candle { position: absolute; left: 50%; bottom: 22px; width: 44px; height: 132px; margin-left: -22px; }
.candle__halo {
  position: absolute;
  left: 50%;
  bottom: 60px;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.9 0.12 70 / 0.35), oklch(0.7 0.13 var(--accent-h) / 0.12) 40%, transparent 68%);
  transform: scale(calc(0.8 + 0.6 * var(--near)));
  animation: halo-breathe 2.6s ease-in-out infinite;
}
@keyframes halo-breathe { 50% { opacity: 0.75; } }
.candle__flame {
  position: absolute;
  left: 50%;
  bottom: 80px;
  width: 22px;
  height: 46px;
  margin-left: -11px;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse 60% 70% at 50% 78%, oklch(0.99 0.03 95) 0 26%, oklch(0.9 0.14 82) 44%, oklch(0.72 0.17 48 / 0.85) 68%, transparent 76%);
  filter: drop-shadow(0 0 12px oklch(0.85 0.14 70));
  transform-origin: 50% 100%;
  transform: scale(calc(1 + 0.35 * var(--near)));
  animation: flame-flicker 1.3s ease-in-out infinite;
}
.candle__core { position: absolute; left: 36%; right: 36%; bottom: 8%; height: 34%; border-radius: 50%; background: oklch(0.55 0.1 260 / 0.5); }
@keyframes flame-flicker {
  0%, 100% { rotate: -2deg; scale: 1 1; }
  30% { rotate: 3deg; scale: 0.96 1.06; }
  60% { rotate: -1deg; scale: 1.03 0.97; }
}
.oracle-stage.is-warming .candle__flame { transform: scale(1.35); animation: flame-flicker 1.3s ease-in-out infinite, flame-flare 1.4s var(--ease-out) both; }
@keyframes flame-flare { 30% { filter: drop-shadow(0 0 28px oklch(0.9 0.15 70)) brightness(1.3); } }
.candle__wick { position: absolute; left: 50%; bottom: 74px; width: 2px; height: 9px; margin-left: -1px; background: oklch(0.2 0.02 50); }
.candle__body {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 76px;
  border-radius: 6px 6px 3px 3px;
  background:
    radial-gradient(40% 20% at 35% 0%, oklch(0.99 0.01 90), transparent 70%),
    linear-gradient(90deg, oklch(0.78 0.03 80), oklch(0.95 0.015 88) 40%, oklch(0.76 0.03 75));
  box-shadow: inset 0 8px 10px oklch(1 0 0 / 0.25), 0 0 20px oklch(0.8 0.1 70 / 0.2);
}
.altar { /* 대리석 제단: 흰 돌 + 비스듬한 결 */
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 24px;
  border-radius: 4px 4px 2px 2px;
  background:
    repeating-linear-gradient(115deg, transparent 0 22px, oklch(0.6 0.02 330 / 0.35) 22px 23px, transparent 23px 51px),
    linear-gradient(100deg, oklch(0.84 0.01 320), oklch(0.93 0.008 60) 35%, oklch(0.86 0.01 320) 70%, oklch(0.92 0.008 60));
  box-shadow: 0 -2px 0 oklch(0.97 0.005 60 / 0.6) inset, 0 10px 30px oklch(0 0 0 / 0.5);
}

/* ═════════ 4. 결과 캡처 카드: 방마다 핵심 비주얼 ═════════ */
/* 오검: 껍질 조각에 새겨진 뿌리 글자 */
.bark-tile { display: grid; justify-items: center; gap: var(--space-2); margin: var(--space-5) 0 var(--space-5); }
.bark-tile__glyph {
  width: 66px;
  height: 118px;
  padding: 10px 14px;
  overflow: visible;
  border-radius: 40% 44% 38% 42% / 10% 10% 8% 8%;
  background:
    radial-gradient(12px 2px at 28% 18%, oklch(0.24 0.02 60 / 0.7), transparent),
    radial-gradient(14px 2px at 70% 76%, oklch(0.24 0.02 60 / 0.6), transparent),
    linear-gradient(90deg, oklch(0.6 0.02 80), oklch(0.92 0.012 90) 25%, oklch(0.97 0.008 95) 50%, oklch(0.62 0.02 78));
  box-shadow: 0 8px 20px oklch(0 0 0 / 0.45), 0 0 30px var(--accent-soft);
  fill: none;
  stroke: oklch(0.27 0.035 60);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
}
.bark-tile__glyph use { filter: drop-shadow(0 0 4px var(--accent)); }
.bark-tile__label { font-family: var(--font-latin); font-size: var(--fs-2xs); letter-spacing: 0.14em; color: var(--c-text-faint); }
.capture.is-revealed .bark-tile__glyph { animation: base-fade-in 0.4s ease-out both, base-draw 1.1s var(--ease-out) 0.35s both; }
.capture.is-revealed .bark-tile__label { animation: base-fade-in 0.5s ease-out 1s both; }

/* 데칸: 작은 해시계 (그림자가 가리키는 칸) */
.mini-dial { position: relative; width: 120px; margin: var(--space-5) auto var(--space-6); }
.mini-dial__svg { display: block; overflow: visible; }
.mini-dial__rim { fill: oklch(0.36 0.05 62 / 0.5); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 1; }
.mini-dial__ticks { fill: none; stroke: var(--accent-line); stroke-width: 1; stroke-dasharray: 1; }
.mini-dial__ring { fill: none; stroke: var(--accent-line); }
.mini-dial__arm { transform-box: view-box; transform-origin: 0 0; transform: rotate(var(--decan-deg, 0deg)); }
.mini-dial__home { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.mini-dial__shadow { fill: oklch(0.08 0.02 50 / 0.7); }
.mini-dial__sun { fill: oklch(0.98 0.05 95); filter: drop-shadow(0 0 6px var(--accent)); }
.mini-dial__gnomon { fill: oklch(0.82 0.09 80); }
.capture.is-revealed .mini-dial__rim { animation: base-draw 0.9s var(--ease-out) both; }
.capture.is-revealed .mini-dial__ticks { animation: base-draw 1s var(--ease-out) 0.2s both; }
.capture.is-revealed .mini-dial__arm { animation: mini-shadow 1.2s var(--ease-out) 0.3s both; }
@keyframes mini-shadow { from { transform: rotate(calc(var(--decan-deg, 0deg) - 90deg)); opacity: 0; } }

/* 촐킨: 금빛 막대·점 숫자 + 문양 이름이 든 카르투슈 */
.day-glyph { position: relative; display: grid; justify-items: center; gap: var(--space-1); margin: var(--space-5) 0 var(--space-6); }
.day-glyph__num { width: 64px; height: 64px; fill: oklch(0.88 0.1 var(--hue-gold)); filter: drop-shadow(0 0 8px oklch(0.84 0.1 var(--hue-gold) / 0.5)); }
.day-glyph__cartouche { /* 모서리가 둥근 틀 + 받침 (문양 그림은 새로 지어내지 않고 이름만 새긴다) */
  position: relative;
  display: grid;
  place-items: center;
  min-width: 112px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--accent);
  border-radius: 18px;
  background: oklch(0.3 0.04 var(--room-h));
  box-shadow: inset 0 0 0 4px oklch(0.24 0.035 var(--room-h)), inset 0 0 0 5px var(--accent-line), 0 0 24px var(--accent-soft);
}
.day-glyph__cartouche::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -8px; height: 6px; border: 1.5px solid var(--accent); border-top: 0; border-radius: 0 0 4px 4px; }
.day-glyph__sign { font-family: var(--font-latin); font-size: var(--fs-lg); letter-spacing: 0.12em; color: var(--c-text-strong); }
.day-glyph .moon-emblem__n { position: static; transform: none; margin-top: var(--space-3); }
.capture.is-revealed .day-glyph__num { animation: base-pop 0.6s var(--ease-spring) 0.3s both; }
.capture.is-revealed .day-glyph__cartouche { animation: base-fade-up var(--dur-reveal) var(--ease-reveal) 0.5s both; }
.capture.is-revealed .day-glyph .moon-emblem__n { animation: base-fade-in 0.5s ease-out 1.1s both; }

/* 시빌라: 월계관 안의 신탁 번호 */
.wreath { position: relative; width: 132px; margin: var(--space-4) auto var(--space-5); }
.wreath__svg { display: block; overflow: visible; }
.wreath__num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-latin); font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.08em; color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }
.capture.is-revealed .wreath .laurel__stem { animation: base-draw 1s var(--ease-out) both; }
.capture.is-revealed .wreath .laurel__leaves path { animation: base-pop 0.45s var(--ease-spring) calc(0.3s + var(--i) * 80ms) both; }
.capture.is-revealed .wreath__num { animation: base-fade-in 0.6s ease-out 1s both; }

/* ───────── 결과: 방별 공감·반전 카드 ───────── */
/* 오검: 이름이 새긴 가지들 (세로로 선 글자들이 숲처럼 한 줄로. 넘치면 다음 줄) */
.name-branch { margin: var(--space-2) 0 var(--space-5); }
.name-branch__letters {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-3);
}
.name-branch__letter { display: grid; justify-items: center; width: 30px; }
.name-branch__letter svg {
  width: 22px;
  height: 44px;
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--accent-glow));
}
.name-branch__letter span { margin-top: var(--space-1); font-family: var(--font-latin); font-size: var(--fs-2xs); color: var(--c-text-faint); }
.name-branch__latin { margin-top: var(--space-3); font-family: var(--font-latin); font-size: var(--fs-sm); letter-spacing: 0.12em; color: var(--accent-dim); }

/* 촐킨: 두 톱니 (숫자 × 문양) */
.gear-pair { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.gear-pair__item { display: grid; justify-items: center; gap: var(--space-1); min-width: 88px; }
.gear-pair__num { width: 44px; height: 44px; fill: oklch(0.88 0.1 var(--hue-gold)); }
.gear-pair__sign { display: grid; place-items: center; height: 44px; font-size: var(--fs-lg); font-weight: 700; color: var(--accent); }
.gear-pair__label { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-faint); }
.gear-pair__x { font-family: var(--font-latin); color: var(--accent-dim); }

/* 시빌라: 펼친 두루마리 인용 (양피지 바탕 짙은 갈색 글자) */
.scroll-quote {
  position: relative;
  margin: 0 0 var(--space-5);
  padding: var(--space-5) var(--space-5);
  border-radius: 4px;
  background:
    radial-gradient(80% 60% at 50% 120%, oklch(0.75 0.1 60 / 0.35), transparent 70%),
    linear-gradient(90deg, oklch(0.84 0.045 78), oklch(0.94 0.028 88) 25%, oklch(0.95 0.025 90) 50%, oklch(0.93 0.03 86) 75%, oklch(0.83 0.045 76));
  box-shadow: inset 0 0 16px oklch(0.55 0.07 60 / 0.4);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.65;
  text-align: center;
  text-wrap: balance;
  color: oklch(0.3 0.06 45);
}
.scroll-quote::before, .scroll-quote::after { /* 위아래 나무 막대 */
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, oklch(0.66 0.07 60), oklch(0.36 0.05 48));
}
.scroll-quote::before { top: -5px; }
.scroll-quote::after { bottom: -5px; }

/* ───────── 움직임 줄이기: 배경 정지, 의식은 최종 모습, 공개 연출은 즉시 표시 ─────────
   (base.css가 모든 애니메이션을 즉시 끝내므로 여기서는 계속 도는 것과 대체 표현만 정리) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cosmos__meteor, .cosmos__dust, .star-dial__trails { display: none; }
  .cosmos__stars { translate: none; }
  .pouch.is-shaking .pouch__bag { filter: brightness(1.25); }
  .pouch.is-shaking .pouch__aura { opacity: 1; }
  .ritual--star.is-running .rewind__num { text-shadow: 0 0 30px var(--accent-glow); }
  /* 등장 전 숨김 상태를 되돌린다: 장 머리는 스크롤과 상관없이 바로 보인다 (UI 점검 1차) */
  .js-reveal .chapter:not(.is-in) :is(.chapter__num, .chapter__label, .chapter__title, .chapter__time) { opacity: 1; }
  .js-reveal .chapter:not(.is-in) .chapter__num::before,
  .js-reveal .chapter:not(.is-in) .chapter__num::after { transform: none; }
  .ritual--star.is-running .ritual-timer__bar { transform: scaleX(1); }
  /* (2단계) 계속 떠도는 장식은 숨긴다. 의식의 상태 class(is-carved·is-landed·is-warming)는 기본 스타일이 최종 모습이라 따로 되돌릴 것 없음 */
  .grove__motes, .canopy__motes, .dunes__sand, .tablet__glow { display: none; }
  .ritual.is-running .ritual-timer__bar { transform: scaleX(1); }
  .bark__blade::after { display: none; }
}

/* ═════════ 정적 검토 모드 (body.is-static-preview) — 개발 담당이 class를 지우면 모두 꺼진다 ═════════ */
body:not(.is-static-preview) [data-preview-only] { display: none; }
.is-static-preview .screen {
  display: block;
  position: relative;
  min-height: 0;
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px dashed var(--c-line-strong);
}
.is-static-preview .screen--dock { display: flex; flex-direction: column; }
.is-static-preview .ritual { display: flex; flex-direction: column; align-items: center; }
.is-static-preview .screen::before {
  content: attr(data-preview);
  position: absolute;
  top: var(--space-3);
  left: 0;
  right: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--accent);
  text-align: left;
}
.is-static-preview .cast-stage { display: flex; flex-direction: column; gap: var(--space-8); }
.is-static-preview .topbar__back { visibility: hidden; } /* 전역 막대는 허브 상태로 보여 줌 */
.is-static-preview .dialog { position: static; display: block; margin: var(--space-16) auto; }
.is-static-preview .toast { position: static; display: table; margin: var(--space-6) auto var(--space-16); transform: none; }

/* ═════════════════════════════════════════════════════════════════
   6단계: 유료 리포트 — 미리보기(#deeper) · 봉인 해제(#unseal) · 리포트(#report) · 진입점 · 영수증 코드
   무료 = 금빛 테두리로 "펼친" 카드 / 유료 = 밀랍 인장 + 흐린 별자리 줄로 "봉인된" 칸 (글자 없음, D-4)
   광고 자리 없음 (D-12). 색은 hall(금) 강조 + 인장 전용 밀랍색 2개(장식, 글자 없음)
   ═════════════════════════════════════════════════════════════════ */
:root {
  --wax: oklch(0.42 0.13 25);       /* 밀랍 (장식, 글자 없음) */
  --wax-rim: oklch(0.52 0.14 25);   /* 밀랍 가장자리 눌린 선 */
  --seal: 40px;
  --unseal-ring: min(280px, 78vw);
  --unseal-ms: 3000ms;              /* 봉인 해제 전체 길이 (JS 타이머와 맞춘다) */
}
.wax-seal { width: var(--seal); height: var(--seal); overflow: visible; }




/* 테스트/모의 결제 띠: 세 화면 맨 위. mock·test 모양 같음, 문구만 다름 */

/* ───────── 6-P. 미리보기 ───────── */

.toc { margin-top: var(--space-8); }
.toc__title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--fs-lg); color: var(--c-text-strong); }
.toc__total { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }
.toc__list { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.toc-item {
  position: relative;
  padding: var(--space-4) calc(var(--space-4) + var(--seal) + var(--space-2)) var(--space-4) var(--space-4);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  /* 봉인 칸 바탕: 흐린 별자리 점 (의미 없는 장식) */
  background:
    radial-gradient(circle at 78% 30%, var(--accent-soft) 0 1.5px, transparent 2px),
    radial-gradient(circle at 64% 72%, var(--accent-soft) 0 1.5px, transparent 2px),
    radial-gradient(circle at 90% 82%, var(--accent-soft) 0 1.5px, transparent 2px),
    var(--c-surface-1);
}
.toc-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.toc-item__num { flex-shrink: 0; min-width: 1.2em; font-family: var(--font-latin); color: var(--accent); }
.toc-item__name { flex: 1 1 12em; min-width: 0; font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-ui); color: var(--c-text-strong); overflow-wrap: anywhere; }
.toc-item__vol { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); white-space: nowrap; }
.toc-item__teaser { margin-top: var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); }
/* 흐린 줄: 글자가 아닌 점선 막대 3줄 = "별자리로 잠긴 문단" */
.seal-lines { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.seal-lines span {
  display: block; height: 6px; border-radius: var(--radius-pill); opacity: 0.55;
  background: repeating-linear-gradient(90deg, var(--c-line-strong) 0 22px, transparent 22px 28px, var(--c-line-strong) 28px 34px, transparent 34px 42px);
}
.seal-lines span:nth-child(2) { width: 86%; }
.seal-lines span:nth-child(3) { width: 58%; }
.toc-item > .wax-seal { position: absolute; top: var(--space-4); right: var(--space-4); filter: drop-shadow(0 2px 3px oklch(0 0 0 / 0.45)); }
.toc-item.is-open { border-color: var(--accent-line); }
.toc-item.is-open :is(.wax-seal, .seal-lines) { display: none; }

/* 견본: 봉인 없이 펼친 무료 블록 */
.sample {
  margin-top: var(--space-8); padding: var(--space-5);
  border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
  background: linear-gradient(170deg, oklch(0.25 0.04 var(--accent-h)), var(--c-surface-1) 60%);
}
.sample__badge {
  display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-pill);
  background: var(--accent); color: var(--c-on-accent);
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700;
}
.sample__title { margin: var(--space-3) 0 var(--space-1); font-size: var(--fs-lg); line-height: var(--lh-tight); color: var(--c-text-strong); }
.sample__note { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); }
.sample__body { margin-top: var(--space-4); }

/* 입력 */
.partner { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: var(--space-4); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-lg); }
.partner__legend { padding: 0 var(--space-2); font-size: var(--fs-md); font-weight: 700; color: var(--c-text-strong); }
.notice--partner { border-left: 3px solid oklch(0.84 0.09 var(--hue-candle)); }
.notice--partner .notice__icon { color: oklch(0.84 0.09 var(--hue-candle)); }

/* 결제 전 고지: 접지 않음 (D-2) */
.consent { align-items: flex-start; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--c-line); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.consent input { margin-top: 2px; }


.legal-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-top: var(--space-3); }
.legal-links a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }

/* ───────── 진입점 (조르지 않기) ───────── */
/* 방 결과: "나의 이야기" 버튼 아래 글자 링크 한 줄 (D-3). 버튼 모양·배경 없음 */
/* 나의 이야기 유료 카드: 인장 장식 + 상태 */
/* 허브 하단 */

/* 영수증 코드로 열기 */
.receipt-open { display: grid; gap: var(--space-2); }
.receipt-open__label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-strong); }
.receipt-open__row { display: flex; gap: var(--space-2); }
.receipt-open__input { flex: 1 1 auto; min-width: 0; font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.receipt-open__go { flex-shrink: 0; }
.receipt-open__how { font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-muted); }
.receipt-open--hub { padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-1); }

/* ───────── 6-U. 봉인 해제 의식 — 별자리 고리의 인장 여섯 개가 차례로 갈라지고 별이 켜진다 ─────────
   기본 스타일 = 최종(갈라진) 모습. .is-running일 때만 "온전한 인장 → 갈라짐"을 재생 (움직임 줄이기는 base.css가 애니메이션을 끔) */
@keyframes seal-crack { from { transform: none; opacity: 1; } }
@keyframes seal-star { from { opacity: 0; transform: scale(0.2); } }
@keyframes core-breathe { to { opacity: 0.5; scale: 0.9; } }
/* (11단계 C4) 오류 상자가 360x640 첫 화면 아래로 밀려 "여는 중" 글과 건너뛰기만 보이던 것: 오류일 때 인장 고리·진행 글·건너뛰기를 숨김(상자의 role=alert가 알린다) */
.ritual--unseal.is-error :is(.unseal-ring, [data-js=unseal-status], [data-js=unseal-skip]) { display: none; }

/* ───────── 6-R. 유료 리포트 ───────── */

.report-head { margin-top: var(--space-10); text-align: center; }
.report-head__badge { display: inline-block; padding: 2px var(--space-3); border: 1px solid var(--accent-line); border-radius: var(--radius-pill); font-size: var(--fs-xs); color: var(--accent); }
.report-head__title { margin: var(--space-3) 0 var(--space-2); font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--c-text-strong); }
.report-head__meta { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); }

.report-part { margin-top: var(--space-10); }
.report-part__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--accent-line); }
.report-part__seal { flex-shrink: 0; display: flex; --seal: 30px; }
.report-part__label { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text-strong); }
/* 봉인 해제 연출: JS가 모든 부분에 .is-sealed → 차례로 .is-unsealing으로 바꾼다 */
.report-part.is-sealed > :not(.report-part__head) { opacity: 0; }
.report-part.is-unsealing > :not(.report-part__head) { animation: part-open 700ms var(--ease-reveal) both; animation-delay: calc(var(--i) * 450ms + 250ms); }
.report-part.is-unsealing .report-part__seal .wax-seal { animation: seal-pop 500ms var(--ease-out) both; animation-delay: calc(var(--i) * 450ms); }
@keyframes part-open { from { opacity: 0; transform: translateY(12px); clip-path: inset(0 0 100% 0); } }
@keyframes seal-pop { 40% { transform: scale(1.3) rotate(-8deg); filter: brightness(1.8); } }

.hidden-room { margin-top: var(--space-6); }
.hidden-room:first-child { margin-top: 0; }
.hidden-room__title { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--fs-md); color: var(--c-text-strong); }
.hidden-room__glyph { color: var(--accent); }

.timeline { position: relative; margin: 0; padding: 0 0 0 var(--space-6); list-style: none; border-left: 1px dashed var(--accent-line); }
.timeline__stage { position: relative; padding-bottom: var(--space-6); }
.timeline__stage::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-6) - 6px); top: 4px; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--accent); background: var(--c-bg);
}
.timeline__stage.is-now::before { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.timeline__age { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }
.timeline__areas { display: grid; gap: var(--space-3); margin: var(--space-3) 0 0; }
.timeline__areas dt { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-muted); }
.timeline__areas dd { margin: var(--space-1) 0 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--c-text); }

.match-pair { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); font-size: var(--fs-xl); font-weight: 700; color: var(--c-text-strong); }
.match-pair__me, .match-pair__you { padding: var(--space-1) var(--space-4); border: 1px solid var(--accent-line); border-radius: var(--radius-pill); }
.match-pair__x { font-family: var(--font-latin); color: var(--accent); }
.match-rooms { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.match-rooms li { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--c-surface-2); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); }
.match-rooms__room { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }

.deep-block { margin-top: var(--space-5); }
.deep-block:first-of-type { margin-top: 0; }
.deep-block__title { margin-bottom: var(--space-2); font-size: var(--fs-md); color: var(--accent); }
.deep-block--shadow { padding: var(--space-4); border-radius: var(--radius-md); background: var(--c-surface-2); }

/* ───────── legal/ 세 페이지 (legal/*.html이 ../style.css를 불러 씀) ───────── */
.legal { padding: var(--space-8) 0 var(--space-16); }
.legal__back { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--fs-sm); color: var(--c-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.legal__title { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--c-text-strong); }
.legal__meta { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.legal__toc { margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-1); }
.legal__toc ol { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-5); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.legal__toc a { color: var(--c-text); }
.legal__section { margin-top: var(--space-8); scroll-margin-top: var(--space-6); }
.legal__section h2 { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--c-line); font-size: var(--fs-lg); color: var(--c-text-strong); }
.legal__section p, .legal__section li { font-size: var(--fs-md); line-height: var(--lh-read); color: var(--c-text); }
.legal__section ul, .legal__section ol { display: grid; gap: var(--space-2); padding-left: var(--space-5); }
.legal__table-wrap { overflow-x: auto; }
.legal__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-ui); }
.legal__table th, .legal__table td { padding: var(--space-2) var(--space-3); border: 1px solid var(--c-line); text-align: left; vertical-align: top; color: var(--c-text); overflow-wrap: anywhere; }
.legal__table th { background: var(--c-surface-2); color: var(--c-text-strong); }
.legal__blank { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: oklch(0.84 0.1 var(--hue-candle) / 0.18); color: var(--c-text-strong); }

@media (prefers-reduced-motion: reduce) {
  /* 봉인 해제: 애니메이션이 꺼지면 기본 = 모두 갈라진 최종 모습. 리포트 부분은 처음부터 열림 */
  .report-part.is-sealed > :not(.report-part__head) { opacity: 1; }
}

/* 정적 검토 모드: 결제 켜짐일 때만 보이는 진입점과 오류 상태를 펼쳐 보여 준다 */


/* ═════════════════════════════════════════════════════════════════
   7단계: 완성도 개편 — 인트로 · 허브 진행 막대 · 고대 문 · 절단 봉인 · 이야기 다리/다음 문 · 수렴 결말
   공통 재료: 낡은 청동(--bronze*), 부조는 청동빛 옅은 선, 봉인은 기존 밀랍(--wax, #i-seal)
   ═════════════════════════════════════════════════════════════════ */
:root {
  --bronze: oklch(0.66 0.075 75);        /* 낡은 청동 테두리 */
  --bronze-dark: oklch(0.36 0.045 65);   /* 녹슨 그늘 */
  --bronze-hi: oklch(0.84 0.07 85);      /* 모서리에 닿은 빛 */
  --gate-w: min(232px, 64vw);
  --finale-ms: 2600ms;                   /* 수렴 연출 길이 (JS 타이머와 맞춘다) */
  --shard-w: 64px;
  --shard-h: 84px;
  --orbit-r: min(128px, 34vw);
}
/* 금속 테두리 한 벌: 안쪽 그늘 + 윗모서리 빛 */
.door, .next-door__leaves, .gate__arch {
  box-shadow:
    inset 0 0 0 1px var(--bronze-dark),
    inset 0 1px 0 1px oklch(0.84 0.07 85 / 0.28),
    inset 0 -14px 28px oklch(0 0 0 / 0.45),
    0 0 0 1px oklch(0 0 0 / 0.5);
}

/* ───────── 00. 인트로 ───────── */
.intro.is-active {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100svh - var(--topbar-h)); padding-top: var(--space-4); text-align: center;
}
.gate { position: relative; width: var(--gate-w); aspect-ratio: 232 / 300; margin-bottom: var(--space-6); perspective: 900px; }
.gate__halo {
  position: absolute; inset: -18% -22% -6%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 75%);
}
.gate__arch {
  position: absolute; inset: 0 0 7%;
  border: 3px solid var(--bronze);
  border-radius: calc(var(--gate-w) / 2) calc(var(--gate-w) / 2) 6px 6px;
  background:
    repeating-linear-gradient(90deg, oklch(0 0 0 / 0.16) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, oklch(0.26 0.04 60), oklch(0.15 0.03 280));
  overflow: hidden;
  transform-style: preserve-3d;
}
/* 아치 안쪽 반원에 놓인 여섯 인장 (Ⅰ~Ⅵ 방 상징, --i 순서로 왼쪽→오른쪽) */
.gate__ring { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gate__sigil {
  --ang: calc(-75deg + var(--i) * 30deg);
  position: absolute; left: 50%; top: 44%;
  display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; border: 1px solid var(--bronze);
  background: oklch(0.2 0.03 60);
  color: var(--accent);
  transform: rotate(var(--ang)) translateY(calc(var(--gate-w) * -0.34)) rotate(calc(var(--ang) * -1));
}
.gate__sigil :is(.door__icon, .door__moon) { width: 15px; height: 15px; stroke-width: 3; filter: none; }
.gate__sigil .door__icon--tall { width: 9px; height: 18px; stroke-width: 6; }
.gate__sigil .door__moon { color: var(--accent); }
.gate__sigil .runic { font-size: 0.9rem; line-height: 1; }
.gate__leaf {
  position: absolute; top: 50%; bottom: 0; width: 50%;
  background:
    linear-gradient(90deg, transparent 0 12%, oklch(0.84 0.07 85 / 0.18) 12% 13%, transparent 13% 87%, oklch(0.84 0.07 85 / 0.18) 87% 88%, transparent 88%),
    repeating-linear-gradient(180deg, transparent 0 30%, oklch(0.66 0.075 75 / 0.55) 30% calc(30% + 2px), transparent calc(30% + 2px) 60%),
    linear-gradient(180deg, oklch(0.3 0.045 55), oklch(0.19 0.035 40));
  border-top: 2px solid var(--bronze);
  transition: transform 700ms var(--ease-in-out);
}
.gate__leaf--l { left: 0; transform-origin: left center; border-right: 1px solid var(--bronze-dark); }
.gate__leaf--r { right: 0; transform-origin: right center; border-left: 1px solid var(--bronze-dark); }
.gate__knocker {
  position: absolute; top: 40%; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--bronze); box-shadow: inset 0 0 0 2px oklch(0 0 0 / 0.4);
}
.gate__leaf--l .gate__knocker { right: 12px; }
.gate__leaf--r .gate__knocker { left: 12px; }
/* 두 문짝이 맞닿은 틈으로 새는 빛 */
.gate__seam {
  position: absolute; left: 50%; top: 50%; bottom: 0; width: 2px; margin-left: -1px; z-index: 1;
  background: linear-gradient(180deg, transparent, var(--accent) 30%, oklch(0.97 0.03 var(--accent-h)) 60%, transparent);
  box-shadow: 0 0 14px 3px var(--accent-glow);
  animation: seam-breathe 3.6s ease-in-out infinite;
}
.gate__step { position: absolute; left: -6%; right: -6%; bottom: 0; height: 7%; border-radius: 3px; background: linear-gradient(180deg, var(--bronze-dark), oklch(0.14 0.02 60)); }
@keyframes seam-breathe { 50% { opacity: 0.45; } }
/* 시작 버튼을 누른 순간 (JS: .gate.is-opening, 약 700ms 뒤 전환) */
.gate.is-opening .gate__leaf--l { transform: rotateY(-78deg); }
.gate.is-opening .gate__leaf--r { transform: rotateY(78deg); }
.gate.is-opening .gate__seam { width: 60%; margin-left: -30%; transition: width 700ms, margin 700ms; animation: none; }
.intro__eyebrow { margin-bottom: var(--space-2); }
.intro__logo { margin-bottom: var(--space-4); }
.intro__summary { max-width: 22em; margin: 0 auto var(--space-8); font-size: var(--fs-lg); line-height: var(--lh-ui); color: var(--c-text-strong); text-wrap: balance; }
.intro__start { max-width: 320px; }
.intro__note { margin-top: var(--space-4); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.intro__receipt { display: block; margin: var(--space-2) auto 0; }

/* ───────── 허브: 나의 이야기 N/6 ───────── */
.hub-progress { margin: 0 0 var(--space-5); }
.hub-progress__label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); font-size: var(--fs-sm); color: var(--c-text); }
.hub-progress__count { font-family: var(--font-latin); font-size: var(--fs-md); color: var(--accent); letter-spacing: 0.08em; }
.hub-progress__bar {
  position: relative; display: block; height: 10px; overflow: hidden;
  border: 1px solid var(--bronze-dark); border-radius: var(--radius-pill);
  background: oklch(0.13 0.03 280);
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.6);
}
.hub-progress__fill {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--n, 0) / 6 * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bronze), var(--accent));
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width 600ms var(--ease-out);
}
/* 여섯 칸 눈금: 앞뒤 빈 가상 요소 + 선 5개를 양끝 정렬 → 1/6 간격 */
.hub-progress__ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; }
.hub-progress__ticks::before, .hub-progress__ticks::after { content: ""; }
.hub-progress__ticks i { width: 1px; background: oklch(0 0 0 / 0.55); }

/* ───────── 허브: 고대 문 (기존 .door 위에 덮어쓴다) ───────── */
.door {
  border: 2px solid var(--bronze);
  background:
    radial-gradient(ellipse 70% 40% at 50% 30%, oklch(0.3 0.06 var(--room-h) / 0.7), transparent 70%),
    linear-gradient(180deg, oklch(0.23 0.04 var(--room-h)), oklch(0.14 0.03 var(--room-h)));
  padding-top: var(--space-8);
}
.door::before { border-color: oklch(0.66 0.075 75 / 0.35); }
.door > :not(.door__frame, .door__num, .door__lock) { position: relative; }
.door__frame { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
/* 부조: 방마다 다른 무늬를 문 윗부분에만 옅게 (글자 영역은 비움) */
.door__relief {
  position: absolute; inset: 10px 10px 45%;
  border-radius: calc(var(--arch) - 10px) calc(var(--arch) - 10px) 0 0;
  opacity: 0.2;
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent);
  mask: linear-gradient(180deg, #000 55%, transparent);
  background: var(--motif);
}
.door[data-room="ogham"]   { --motif: repeating-linear-gradient(90deg, transparent 0 9px, var(--bronze-hi) 9px 10px); }
.door[data-room="star"]    { --motif: radial-gradient(circle at 20% 30%, var(--bronze-hi) 0 1.5px, transparent 2px) 0 0 / 22px 22px, radial-gradient(circle at 70% 70%, var(--bronze-hi) 0 1px, transparent 1.5px) 0 0 / 15px 15px; }
.door[data-room="decan"]   { --motif: repeating-conic-gradient(from 0deg at 50% 100%, var(--bronze-hi) 0 1.5deg, transparent 1.5deg 12deg); }
.door[data-room="tzolkin"] { --motif: repeating-linear-gradient(0deg, transparent 0 10px, var(--bronze-hi) 10px 11px), repeating-linear-gradient(90deg, transparent 0 16px, var(--bronze-hi) 16px 17px); }
.door[data-room="rune"]    { --motif: repeating-linear-gradient(60deg, transparent 0 11px, var(--bronze-hi) 11px 12px), repeating-linear-gradient(-60deg, transparent 0 11px, var(--bronze-hi) 11px 12px); }
.door[data-room="sibyl"]   { --motif: repeating-linear-gradient(90deg, var(--bronze-hi) 0 2px, transparent 2px 5px, oklch(0 0 0 / 0.6) 5px 7px, transparent 7px 12px); }
/* 리벳: 양옆 아래쪽 세 개씩 */
.door__rivets {
  position: absolute; inset: auto 7px 14px; height: 46%;
  background:
    radial-gradient(circle, var(--bronze-hi) 0 1.6px, var(--bronze-dark) 2.4px, transparent 3px) left top / 6px 33.3% repeat-y,
    radial-gradient(circle, var(--bronze-hi) 0 1.6px, var(--bronze-dark) 2.4px, transparent 3px) right top / 6px 33.3% repeat-y;
  opacity: 0.8;
}
/* 쐐기돌: 아치 꼭대기의 장 번호 */
.door__num {
  top: -2px; padding: 3px 10px 4px;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze));
  color: oklch(0.2 0.03 60); font-weight: 700; font-size: var(--fs-xs);
}
.door__portal::after { border: 2px solid var(--bronze); box-shadow: 0 0 0 3px oklch(0.2 0.03 60), 0 0 0 4px var(--bronze-dark), inset 0 0 22px var(--accent-soft); }
.door__reads { margin-top: var(--space-1); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); text-wrap: balance; }
.door__origin { color: var(--c-text-muted); }
.door__seal { display: none; position: absolute; width: 34px; height: 34px; right: -6px; bottom: -6px; filter: drop-shadow(0 2px 3px oklch(0 0 0 / 0.5)); }
.door__lock { display: none; }
/* 소용돌이는 "다음 문"만 돈다 (기본·지나온 문은 멈춘 빛) */
.door .door__swirl, .door .door__portal::before, .door .door__swirl::after { animation-play-state: paused; }
.door.is-next .door__swirl, .door.is-next .door__portal::before, .door.is-next .door__swirl::after { animation-play-state: running; }

/* 상태: 다음 문 — 테두리가 은은히 숨 쉰다 */
.door.is-next { border-color: var(--bronze-hi); animation: door-breathe 3.2s ease-in-out infinite; }
@keyframes door-breathe {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--bronze-dark), inset 0 -14px 28px oklch(0 0 0 / 0.45), 0 0 14px var(--accent-soft); }
  50%      { box-shadow: inset 0 0 0 1px var(--bronze-dark), inset 0 -14px 28px oklch(0 0 0 / 0.45), 0 0 34px var(--accent-glow); }
}
/* 상태: 지나온 문 — 빛이 고정, 배지 표시(기존 .is-visited) */
.door.is-visited .door__portal::before { opacity: 0.6; }
/* 상태: 잠긴 문 — 어둡고 봉인. 글자는 흐리게(opacity) 하지 않고 색만 한 단계 낮춰 AA 유지 */
.door.is-locked {
  border-color: var(--bronze-dark);
  background:
    linear-gradient(90deg, transparent 47%, oklch(0 0 0 / 0.35) 47% 53%, transparent 53%),
    linear-gradient(180deg, oklch(0.17 0.015 var(--room-h)), oklch(0.12 0.01 var(--room-h)));
}
.door.is-locked:hover, .door.is-locked:focus-visible { transform: none; box-shadow: none; border-color: var(--bronze); }
.door.is-locked .door__relief { opacity: 0.1; }
.door.is-locked .door__num { background: linear-gradient(180deg, var(--bronze), var(--bronze-dark)); color: oklch(0.14 0.02 60); }
.door.is-locked .door__portal::before, .door.is-locked .door__swirl { display: none; }
.door.is-locked .door__portal::after { box-shadow: 0 0 0 3px oklch(0.15 0.02 60), 0 0 0 4px var(--bronze-dark); border-color: var(--bronze-dark); background: oklch(0.1 0.01 280); }
.door.is-locked .door__glyph { z-index: 1; opacity: 0.32; text-shadow: none; }
.door.is-locked .door__glyph svg { filter: none; }
.door.is-locked .door__seal { display: block; z-index: 2; }
.door.is-locked .door__name { color: var(--c-text); }
.door.is-locked .door__reads { color: var(--c-text-muted); }
.door.is-locked .door__lock { display: block; }
/* 잠긴 문을 눌렀을 때 (JS: .is-denied 잠깐 → 토스트) */
.door.is-denied { animation: door-rattle 320ms var(--ease-out); }
@keyframes door-rattle { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ───────── 방 결과: 목차의 봉인 장 · 무료 절단부 ───────── */
.chapters-paid { display: none; }
.toc__list li.is-sealed .toc__link { color: var(--c-text-muted); }
.toc__list li.is-sealed .toc__title { display: none; }
.toc__list li.is-sealed .toc__link::after {
  content: ""; width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--wax-rim), var(--wax) 70%);
}
.sealed-rest {
  position: relative; margin-top: var(--space-10, 40px); padding: var(--space-8) var(--space-5) var(--space-5);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--c-surface-1);
  text-align: center;
}
.sealed-rest__seal { position: absolute; top: calc(var(--seal) / -2); left: 50%; margin-left: calc(var(--seal) / -2); filter: drop-shadow(0 2px 4px oklch(0 0 0 / 0.5)); }
.sealed-rest__title { font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--c-text-strong); text-wrap: balance; }
.sealed-rest__list { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; text-align: left; }
.sealed-rest__item {
  display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); border: 1px dashed var(--c-line-strong);
  font-size: var(--fs-sm); color: var(--c-text);
}
.sealed-rest__num { min-width: 2em; font-family: var(--font-latin); color: var(--accent); }
.sealed-rest .seal-lines { margin-top: var(--space-4); }

/* ───────── 방 결과: 이야기 다리 + 다음 문 ───────── */
.result-actions__note { font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-muted); text-align: center; }
.passage { margin-top: var(--space-12); text-align: center; }
.passage__bridge {
  position: relative; margin: 0 0 var(--space-8); padding: var(--space-5) var(--space-2) 0;
  font-size: var(--fs-md); line-height: var(--lh-read); color: var(--c-text); text-wrap: pretty;
}
.passage__bridge::before { /* 다리 머리 장식: 가는 선 + 마름모 */
  content: "◆"; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; font-size: 8px; line-height: 1; color: var(--accent);
  background: linear-gradient(90deg, transparent, var(--accent-line) 30% 42%, transparent 42% 58%, var(--accent-line) 58% 70%, transparent) center / 100% 1px no-repeat;
}
.next-door {
  --nd-w: min(248px, 72vw);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: var(--nd-w); min-height: calc(var(--nd-w) * 1.1); margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-5);
  border: 0; background: none; cursor: pointer; color: var(--c-text-strong);
  perspective: 700px;
}
.next-door__leaves {
  position: absolute; inset: 0; overflow: hidden;
  border: 3px solid var(--bronze);
  border-radius: calc(var(--nd-w) / 2) calc(var(--nd-w) / 2) 8px 8px;
  background: radial-gradient(ellipse 60% 50% at 50% 55%, oklch(0.97 0.03 var(--accent-h)), var(--accent) 35%, oklch(0.2 0.05 var(--room-h)) 80%);
  transform-style: preserve-3d;
}
.next-door__leaf {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    radial-gradient(ellipse 90% 45% at 50% 30%, oklch(0.3 0.06 var(--room-h) / 0.8), transparent 70%),
    repeating-linear-gradient(90deg, oklch(0 0 0 / 0.14) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, oklch(0.25 0.045 var(--room-h)), oklch(0.13 0.03 var(--room-h)));
  transition: transform 650ms var(--ease-in-out);
  backface-visibility: hidden;
}
.next-door__leaf--l { left: 0; transform-origin: left center; border-right: 1px solid var(--bronze-dark); }
.next-door__leaf--r { right: 0; transform-origin: right center; border-left: 1px solid var(--bronze-dark); }
.next-door__light {
  position: absolute; left: 50%; top: 14%; bottom: 50%; width: 2px; margin-left: -1px; /* 글자 영역 위에서 멈춘다 (가독성) */
  background: linear-gradient(180deg, transparent, var(--accent) 25%, oklch(0.97 0.03 var(--accent-h)) 70%, transparent);
  box-shadow: 0 0 12px 2px var(--accent-glow);
  animation: seam-breathe 3.2s ease-in-out infinite;
}
.next-door > :not(.next-door__leaves) { position: relative; z-index: 1; }
.next-door__glyph {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: auto;
  border-radius: 50%; border: 2px solid var(--bronze);
  background: oklch(0.14 0.03 var(--room-h));
  box-shadow: 0 0 0 3px oklch(0.2 0.03 60), 0 0 22px var(--accent-glow);
  font-size: 1.9rem; line-height: 1; color: oklch(0.98 0.02 var(--accent-h)); text-shadow: 0 0 10px var(--accent);
}
.next-door__glyph--star { font-family: var(--font-symbol); }
.next-door__glyph :is(.door__icon, .door__moon) { width: 32px; height: 32px; }
.next-door__glyph .door__icon--tall { width: 20px; height: 40px; }
.next-door__num {
  margin-top: var(--space-4); padding: 2px 12px 3px;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze));
  font-family: var(--font-latin); font-size: var(--fs-xs); font-weight: 700; color: oklch(0.2 0.03 60);
}
.next-door__label { margin-top: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text); }
.next-door__name { margin-top: var(--space-1); font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight); color: var(--c-text-strong); text-wrap: balance; }
.next-door:hover .next-door__leaves, .next-door:focus-visible .next-door__leaves { border-color: var(--bronze-hi); }
.next-door:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: calc(var(--nd-w) / 2) calc(var(--nd-w) / 2) 10px 10px; }
.next-door:hover .next-door__leaf--l { transform: rotateY(-12deg); }
.next-door:hover .next-door__leaf--r { transform: rotateY(12deg); }
/* 누른 순간 (JS: .is-opening, 약 650ms 뒤 다음 방으로) */
.next-door.is-opening .next-door__leaf--l { transform: rotateY(-100deg); }
.next-door.is-opening .next-door__leaf--r { transform: rotateY(100deg); }
.next-door.is-opening > :not(.next-door__leaves) { animation: fade-away 300ms ease-out forwards; }
.passage__story {
  display: block; min-height: var(--tap-min); margin: var(--space-5) auto 0; padding: var(--space-2) var(--space-4);
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-serif); font-size: var(--fs-sm); color: var(--c-text-muted);
  text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 4px;
}
.passage__story:hover, .passage__story:focus-visible { color: var(--c-text-strong); }
/* 다음 문과 맨 아래 광고 사이 간격을 넉넉히 (바로 아래 금지) */
.passage ~ .page-end { margin-top: var(--space-12); }

/* ───────── 7. 수렴 결말 ───────── */
.finale.is-active { display: flex; flex-direction: column; align-items: center; text-align: center; }
.converge { position: relative; width: 100%; height: 380px; perspective: 760px; perspective-origin: 50% 40%; }
.converge__space { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-10deg); }
.converge__shard {
  --a: calc(var(--i) * 60deg);
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center; align-content: center; gap: 4px;
  width: var(--shard-w); height: var(--shard-h); margin: calc(var(--shard-h) / -2) 0 0 calc(var(--shard-w) / -2);
  border: 2px solid var(--bronze); border-radius: 32px 32px 6px 6px;
  background: linear-gradient(180deg, oklch(0.26 0.05 var(--room-h)), oklch(0.15 0.03 var(--room-h)));
  box-shadow: 0 0 18px var(--accent-glow);
  color: oklch(0.98 0.02 var(--accent-h)); font-size: 1.5rem; line-height: 1;
  opacity: 0; /* 기본(=최종) 모습: 조각은 카드 속으로 모여 사라진 뒤 */
}
.converge__num { font-family: var(--font-latin); font-size: var(--fs-2xs); color: var(--bronze-hi); }
.converge__shard :is(.door__icon, .door__moon) { width: 26px; height: 26px; }
.converge__shard .door__icon--tall { width: 14px; height: 28px; }
.converge__card {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 320px; margin: -160px 0 0 -110px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: var(--space-6) var(--space-4);
  border: 3px solid var(--bronze); border-radius: 110px 110px 12px 12px;
  background:
    radial-gradient(ellipse 70% 45% at 50% 38%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, oklch(0.24 0.05 285), oklch(0.14 0.035 285));
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.5), 0 0 60px var(--accent-glow), inset 0 0 0 1px var(--bronze-dark);
}
.converge__ring { position: absolute; left: 50%; top: 30%; width: 0; height: 0; }
.converge__sigil {
  --ang: calc(var(--i) * 60deg);
  position: absolute; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 1px solid var(--bronze); background: oklch(0.16 0.03 var(--room-h));
  color: var(--accent); font-size: 0.95rem; line-height: 1;
  transform: rotate(var(--ang)) translateY(-50px) rotate(calc(var(--ang) * -1));
}
.converge__sigil :is(.door__icon, .door__moon) { width: 16px; height: 16px; stroke-width: 3; filter: none; }
.converge__sigil .door__icon--tall { width: 9px; height: 18px; stroke-width: 6; }
.converge__eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.converge__title { margin: var(--space-1) 0; font-size: var(--fs-xl); line-height: var(--lh-tight); color: var(--c-text-strong); }
.converge__count { font-size: var(--fs-sm); color: var(--accent); }
.finale__lead { max-width: 22em; margin: var(--space-4) auto var(--space-6); font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--c-text); text-wrap: balance; }
.finale .btn { max-width: 320px; }
.finale__skip { visibility: hidden; margin-top: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.finale.is-running .finale__skip { visibility: visible; }
/* 움직임: 여섯 조각이 원근 속에서 한 바퀴 돌다가(Z축 앞뒤) 가운데로 모여 카드가 된다 */
.finale.is-running .converge__shard { animation: converge-orbit var(--finale-ms) var(--ease-in-out) both; }
.finale.is-running .converge__space { animation: converge-tilt var(--finale-ms) var(--ease-in-out) both; }
.finale.is-running .converge__card { animation: converge-card var(--finale-ms) var(--ease-out) both; }
.finale.is-running .finale__lead, .finale.is-running .btn { animation: fade-in-late var(--finale-ms) ease-out both; }
@keyframes converge-orbit {
  0%   { opacity: 0; transform: rotateY(var(--a)) translateZ(calc(var(--orbit-r) * 1.5)) rotateY(calc(var(--a) * -1)) rotateZ(var(--tilt)) rotateX(24deg) scale(0.7); }
  14%  { opacity: 1; }
  55%  { opacity: 1; transform: rotateY(calc(var(--a) + 200deg)) translateZ(var(--orbit-r)) rotateY(calc((var(--a) + 200deg) * -1)) rotateZ(calc(var(--tilt) * 0.6)) rotateX(10deg) scale(1); }
  82%  { opacity: 1; transform: rotateY(calc(var(--a) + 320deg)) translateZ(calc(var(--orbit-r) * 0.25)) rotateY(calc((var(--a) + 320deg) * -1)) rotateZ(0deg) scale(0.8); }
  100% { opacity: 0; transform: rotateY(calc(var(--a) + 360deg)) translateZ(0) rotateY(calc((var(--a) + 360deg) * -1)) scale(0.4); }
}
@keyframes converge-tilt { 0% { transform: rotateX(-22deg); } 100% { transform: rotateX(-10deg); } }
@keyframes converge-card {
  0%, 72% { opacity: 0; transform: translateZ(-240px) rotateY(-28deg) scale(0.7); }
  100%    { opacity: 1; transform: none; }
}
@keyframes fade-in-late { 0%, 80% { opacity: 0; } 100% { opacity: 1; } }

/* ───────── 유료 리포트: 방별 온전한 이야기 ───────── */
.full-room + .full-room { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--c-line); }
.full-room__title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-lg); color: var(--c-text-strong); }
.full-room__num {
  flex-shrink: 0; padding: 2px 10px 3px; clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze));
  font-family: var(--font-latin); font-size: var(--fs-xs); font-weight: 700; color: oklch(0.2 0.03 60);
}
.full-room__chapter { margin-top: var(--space-5); }
.full-room__chapter-name { margin-bottom: var(--space-2); font-size: var(--fs-md); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .gate__seam, .next-door__light { animation: none; }
  .door.is-next { animation: none; box-shadow: inset 0 0 0 1px var(--bronze-dark), 0 0 28px var(--accent-glow); }
  .door.is-next .door__swirl, .door.is-next .door__portal::before, .door.is-next .door__swirl::after { animation-play-state: paused; }
  .door.is-denied { animation: none; }
  .gate__leaf, .next-door__leaf { transition: opacity 300ms; }
  .gate.is-opening .gate__leaf, .next-door.is-opening .next-door__leaf, .next-door:hover .next-door__leaf { transform: none; }
  .gate.is-opening .gate__leaf, .next-door.is-opening .next-door__leaf { opacity: 0; }
  .hub-progress__fill { transition: none; }
  /* 결말: base.css가 움직임 줄이기에서 모든 animation·transition을 끈다(!important).
     그래서 CSS 애니메이션 대신 상태로 나눈다 — .is-running 동안 = 여섯 아이콘 정적 그리드(카드 숨김),
     JS가 약 1.2초 뒤 .is-running을 떼면 = 카드(기본=최종 모습). 교차 페이드는 JS가 element.animate()로 opacity만 (선택) */
  .finale.is-running .converge__space { transform: none; }
  .finale.is-running .converge__shard { opacity: 1; transform: translate(calc(var(--gx) * 80px), calc(var(--gy) * 104px)); box-shadow: none; }
  .finale.is-running .converge__card { opacity: 0; }
  .finale.is-running .finale__lead, .finale.is-running .btn { opacity: 0; }
}

/* ═════════════════════════════════════════════════════════════════════
   8단계: 흐름 다듬기 (입구 첫 화면 · 입구 버튼 · 상징 떠오름 · 짧은 방 결과 · 한 권의 책)
   ═════════════════════════════════════════════════════════════════════ */

/* ───────── 공통: 방 상징 (.sig) — 8-3 표의 symbol을 작은 크기로 ───────── */
.sig {
  width: var(--sig, 20px); height: var(--sig, 20px); flex-shrink: 0; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
}
.sig--tall { width: calc(var(--sig, 20px) * 0.5); stroke-width: 5.5; }
.sig--rune { width: calc(var(--sig, 20px) * 0.667); stroke-width: 4.5; }
.text-link {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); padding: 0 var(--space-1);
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted);
  text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 4px;
}
.text-link:hover, .text-link:focus-visible { color: var(--c-text-strong); text-decoration-color: currentColor; }

/* ───────── 상단 막대: "입구" 버튼 (U2, 결정 49) ───────── */
.topbar__home {
  grid-column: 1; display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap-min); padding: 0 var(--space-4) 0 var(--space-3);
  border: 1px solid var(--bronze); border-radius: var(--radius-pill);
  background: linear-gradient(180deg, oklch(0.32 0.05 75 / 0.7), oklch(0.2 0.04 65 / 0.7));
  box-shadow: inset 0 1px 0 oklch(0.84 0.07 85 / 0.35), 0 0 14px oklch(0.84 0.07 85 / 0.18);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-strong); white-space: nowrap;
}
.topbar__home:hover, .topbar__home:focus-visible { border-color: var(--bronze-hi); box-shadow: inset 0 1px 0 oklch(0.84 0.07 85 / 0.45), 0 0 20px oklch(0.84 0.07 85 / 0.3); }
.topbar__home-icon { width: 18px; height: 18px; color: var(--bronze-hi); }
.topbar__end { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; }
.topbar__toc {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); padding: 0 var(--space-2);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--c-text);
}
/* 방 화면(U10): 방 이름 + N/6만. 책: 부 이름 · N/9 (JS가 topbar에 .is-room 또는 .is-reading) */
.topbar.is-room .topbar__chapter { display: block; font-family: var(--font-sans); }
.read-progress--book { gap: 3px; }

/* ───────── 입구: 머리 · 주 버튼 ───────── */
.hub .hub-head { padding-bottom: var(--space-4); }
.hub-summary { max-width: 21em; margin: var(--space-3) auto 0; font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--c-text); text-wrap: balance; }
.hub-privacy { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.hub-privacy svg { width: 14px; height: 14px; flex-shrink: 0; }
.hub-cta { position: relative; gap: var(--space-3); min-height: 56px; font-size: var(--fs-md); animation: cta-breathe 3.2s ease-in-out infinite; }
.hub-cta__num {
  padding: 1px 8px 2px; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  background: oklch(0.2 0.03 60 / 0.35); font-family: var(--font-latin); font-size: var(--fs-xs); letter-spacing: 0.06em;
}
@keyframes cta-breathe { 50% { box-shadow: 0 0 0 1px var(--accent-line), 0 0 28px var(--accent-glow); } }

/* ───────── 입구: 여정 한눈에 (칩 3개 + 여섯 방 줄) ───────── */
.journey { margin-top: var(--space-5); }
.journey__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.journey__chip {
  padding: 4px var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  background: oklch(0.2 0.04 285 / 0.6); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text);
}
.journey__end { display: flex; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; }
.journey__end-mark { color: var(--accent); }
.doors-note { margin: var(--space-8) 0 var(--space-3); text-align: center; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ───────── 입구: 진행 + 지금까지의 이야기 ───────── */
.so-far {
  margin-top: var(--space-8); padding: var(--space-5) var(--space-4) var(--space-3);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  background: oklch(0.19 0.045 var(--room-h) / 0.85);
}
.so-far__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.so-far__title { font-size: var(--fs-lg); color: var(--c-text-strong); }
.so-far .hub-progress { display: flex; align-items: center; gap: var(--space-2); flex: 0 1 132px; margin: 0; }
.so-far .hub-progress__count { font-size: var(--fs-sm); }
.so-far .hub-progress__bar { flex: 1; height: 8px; }
.so-far__arch { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--c-text-muted); }
.so-far__arch b { color: var(--accent); }
.so-far__list { margin-top: var(--space-3); }
.so-far__item { border-top: 1px solid oklch(0.4 0.04 285 / 0.5); }
.so-far__line { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-2) 0; text-align: left; }
.so-far__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--accent-line); color: var(--accent); --sig: 16px; font-family: var(--font-latin); }
.so-far__text { display: grid; min-width: 0; }
.so-far__room { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--c-text); }
.so-far__room b { color: var(--c-text-strong); }
.so-far__key { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.so-far__go { color: var(--accent); font-size: var(--fs-lg); }
button.so-far__line:hover .so-far__room b, button.so-far__line:focus-visible .so-far__room b { color: var(--accent); }
.so-far__all { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-1); width: 100%; min-height: var(--tap-min); border-top: 1px solid oklch(0.4 0.04 285 / 0.5); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }

/* ───────── 입구: 한 권의 책 카드 ───────── */
.book-card {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--space-3) var(--space-4); align-items: center;
  margin-top: var(--space-6); padding: var(--space-5) var(--space-4);
  border: 1px solid var(--bronze-dark); border-radius: var(--radius-lg);
  background: radial-gradient(90% 120% at 0% 0%, oklch(0.3 0.05 75 / 0.35), transparent 60%), oklch(0.17 0.035 285 / 0.9);
}
.book-card__cover { position: relative; width: 52px; height: 64px; }
.book-card__cover svg:first-child { width: 100%; height: 100%; fill: oklch(0.26 0.05 30); stroke: var(--bronze-hi); stroke-width: 1.6; stroke-linejoin: round; }
.book-card__seal { position: absolute; right: -6px; bottom: 2px; --seal: 24px; filter: drop-shadow(0 2px 3px oklch(0 0 0 / 0.5)); }
.book-card__eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.book-card__title { margin: 2px 0 var(--space-1); font-size: var(--fs-lg); color: var(--c-text-strong); }
.book-card__desc { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); }
.book-card__lock { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); }
.book-card__hint { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.book-card__go { grid-column: 1 / -1; }
.book-card .pay-entry { grid-column: 1 / -1; display: grid; gap: var(--space-2); } /* (2026-10-21) 1/7부터 결제 버튼 + 한 줄 */
.pay-entry__note { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-muted); text-align: center; }
.story-pay-btn { margin-top: var(--space-3); }
.book-card__pips { display: inline-flex; gap: 4px; flex-shrink: 0; }
.book-card__pips i { width: 14px; height: 6px; border-radius: var(--radius-pill); background: oklch(0.4 0.04 285 / 0.8); }
.book-card__pips i.is-on { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.book-card[data-state="ready"] { border-color: var(--bronze); box-shadow: 0 0 24px oklch(0.84 0.07 85 / 0.15); }
.book-card[data-state="ready"] .book-card__lock, .book-card[data-state="owned"] .book-card__lock { display: none; }
.book-card[data-state="owned"] .book-card__seal { display: none; }
.receipt-toggle { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); margin-top: var(--space-1); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-line); }
.receipt-toggle__caret { display: inline-block; transition: transform var(--dur-fast); }
.receipt-toggle[aria-expanded="true"] .receipt-toggle__caret { transform: rotate(180deg); }
.hub .receipt-open--hub { margin-top: var(--space-2); }

/* ───────── 입구: 자주 묻는 것 (펼친 채) ───────── */
.faq { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--c-line); }
.faq__title { margin-bottom: var(--space-4); font-size: var(--fs-lg); color: var(--c-text-strong); }
.faq__list { display: grid; gap: var(--space-4); }
.faq__item dt { position: relative; padding-left: 22px; font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-tight); color: var(--c-text-strong); }
.faq__item dt::before { content: "Q"; position: absolute; left: 0; top: 1px; font-family: var(--font-latin); font-size: var(--fs-sm); color: var(--accent); }
.faq__item dd { margin-top: var(--space-1); padding-left: 22px; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.7; color: var(--c-text-muted); }
.hub-clear-note { margin-top: var(--space-4); text-align: center; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }

/* ───────── 방 시작: 저장값 한 줄 (U3) · 의식: 건너뛰기 힌트 (U4) ───────── */
.room-saved { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--space-2); margin-top: var(--space-5); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; }
.room-saved__value { color: var(--c-text); }
.room-saved__edit { min-height: var(--tap-min); padding: 0 var(--space-2); color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.ritual-skip {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-5)); z-index: var(--z-sticky);
  text-align: center; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-slow);
}
.ritual-skip.is-visible { opacity: 0.9; }
.is-static-preview .ritual-skip { position: static; opacity: 0.9; margin-bottom: var(--space-3); }

/* ───────── 방 결과 (8-1 표 순서) ───────── */
.result .capture-share { min-height: var(--tap-min); padding-inline: var(--space-6); }
.archetype-line--top { margin-top: var(--space-6); }
.reading { margin-top: var(--space-10); }
.reading__title { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
.reading__rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line)); }
.reading__rule:last-child { background: linear-gradient(90deg, var(--accent-line), transparent); }
.reading__body { font-size: var(--fs-read); line-height: var(--lh-read); color: var(--c-text); word-break: keep-all; text-wrap: pretty; }
.reading__lede { font-size: var(--fs-lg); line-height: 1.75; color: var(--c-text-strong); }
.reading__sub { margin-top: 1.6em; font-size: var(--fs-md); color: var(--accent); }
.reading__sub:first-child { margin-top: 0; }
.reading__facts { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: oklch(0.2 0.04 var(--room-h) / 0.6); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.reading__facts li { position: relative; padding-left: 18px; }
.reading__facts li::before { content: "✦"; position: absolute; left: 0; top: 0.35em; font-size: 0.7em; color: var(--accent); }
.reading__close { margin-top: 1.1em; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--c-text); }
.reading__close:empty { display: none; }
.book-line {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--space-1) var(--space-3); align-items: start;
  margin-top: var(--space-8); padding: var(--space-4) 0; border-top: 1px dashed var(--accent-line); border-bottom: 1px dashed var(--accent-line);
}
.book-line__icon { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.book-line__text { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); }
.book-line__hook { color: var(--c-text); }
.book-line__link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }
.result-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--space-2); margin-top: var(--space-4); }
.result-more:has(.btn) { display: grid; justify-items: center; gap: var(--space-2); }
.result-more:has(.btn) .btn { width: 100%; }
.result-more__dot { color: var(--c-text-faint); }

/* ───────── 문 열림: 상징 떠오름 (8-3, 약 1.2초) ─────────
   0~250ms 문짝(기존 .is-entering) / 150~650ms 획 그리기 / 650~1000ms 가운데로 커지며 화면이 방 색으로 / 1000~1200ms 엠블럼 자리에 착지 */
.sigil-rise {
  --from-x: 50vw; --from-y: 40vh; --to-x: 50vw; --to-y: 30vh; --to-scale: 1; --rise-ms: 1200ms;
  position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none;
}
.sigil-rise.is-playing, .sigil-rise.is-flash { pointer-events: auto; cursor: pointer; }
.sigil-rise__veil { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 42%, oklch(0.32 0.09 var(--room-h) / 0.96), oklch(0.12 0.035 var(--room-h)) 72%); }
.sigil-rise__mark {
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: var(--emblem); height: var(--emblem); margin: calc(var(--emblem) / -2) 0 0 calc(var(--emblem) / -2);
  color: var(--accent); opacity: 0;
  transform: translate(var(--to-x), var(--to-y)) scale(var(--to-scale));
}
.sigil-rise__halo { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow), transparent 65%); opacity: 0; }
.sigil-rise__art { display: none; position: relative; place-items: center; width: 100%; height: 100%; --sig: 48px; }
.sigil-rise__art .sig { stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.sigil-rise__art .sig--tall { stroke-width: 4.5; }
.sigil-rise__art .sig--rune { stroke-width: 3.6; }
.sigil-rise__art .sig--laurel { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); stroke: none; filter: none; }
.sigil-rise[data-room="ogham"] [data-for="ogham"], .sigil-rise[data-room="star"] [data-for="star"], .sigil-rise[data-room="decan"] [data-for="decan"],
.sigil-rise[data-room="tzolkin"] [data-for="tzolkin"], .sigil-rise[data-room="rune"] [data-for="rune"], .sigil-rise[data-room="sibyl"] [data-for="sibyl"] { display: grid; }
.sigil-rise.is-playing .sigil-rise__mark { animation: sigil-travel var(--rise-ms) var(--ease-in-out) both; }
.sigil-rise.is-playing .sigil-rise__art .sig:not(.sig--laurel) { animation: sigil-draw var(--rise-ms) linear both; }
.sigil-rise.is-playing .sig--laurel { animation: sigil-laurel var(--rise-ms) ease-out both; }
.sigil-rise.is-playing .sigil-rise__halo { animation: sigil-halo var(--rise-ms) ease-out both; }
.sigil-rise.is-playing .sigil-rise__veil { animation: sigil-veil var(--rise-ms) ease-in-out both; }
@keyframes sigil-travel {
  0%    { opacity: 0; transform: translate(var(--from-x), var(--from-y)) scale(0.42); }
  12.5% { opacity: 1; transform: translate(var(--from-x), var(--from-y)) scale(0.45); }
  54%   { opacity: 1; transform: translate(var(--from-x), calc(var(--from-y) - 14px)) scale(0.62); }
  83%   { opacity: 1; transform: translate(50vw, 42vh) scale(1.45); }
  100%  { opacity: 1; transform: translate(var(--to-x), var(--to-y)) scale(var(--to-scale)); }
}
@keyframes sigil-draw { 0%, 12.5% { stroke-dashoffset: 1; } 54%, 100% { stroke-dashoffset: 0; } }
@keyframes sigil-laurel { 0%, 40% { opacity: 0; transform: scale(0.8); } 70%, 100% { opacity: 1; transform: none; } }
@keyframes sigil-halo { 0%, 12.5% { opacity: 0; transform: scale(0.4); } 54% { opacity: 0.8; } 83% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1); } }
@keyframes sigil-veil { 0%, 21% { opacity: 0; } 83% { opacity: 1; } 100% { opacity: 0; } }
/* 누르면 바로 4단계: 가운데에서 도착 자리로 200ms */
.sigil-rise.is-skipped .sigil-rise__mark { animation: sigil-land 200ms var(--ease-out) both; }
.sigil-rise.is-skipped .sigil-rise__veil { animation: sigil-veil-out 200ms ease-out both; }
.sigil-rise.is-skipped .sig { animation: none; stroke-dashoffset: 0; }
@keyframes sigil-land { from { opacity: 1; transform: translate(50vw, 42vh) scale(1.3); } to { opacity: 1; transform: translate(var(--to-x), var(--to-y)) scale(var(--to-scale)); } }
@keyframes sigil-veil-out { from { opacity: 1; } to { opacity: 0; } }
/* 마친 방 다시 보기: 한 번 번쩍 (약 0.5초, 획 그리기 없음) */
.sigil-rise.is-flash .sigil-rise__mark { animation: sigil-flash 500ms ease-out both; }
.sigil-rise.is-flash .sigil-rise__veil { animation: sigil-flash-veil 500ms ease-in-out both; }
@keyframes sigil-flash { 0% { opacity: 0; transform: translate(50vw, 42vh) scale(0.9); } 35% { opacity: 1; transform: translate(50vw, 42vh) scale(1.1); } 100% { opacity: 0; transform: translate(50vw, 42vh) scale(1.2); } }
@keyframes sigil-flash-veil { 0% { opacity: 0; } 40% { opacity: 0.85; } 100% { opacity: 0; } }
/* 착지하는 동안 진짜 엠블럼은 숨겨 두었다가(JS .is-awaiting) 오버레이가 사라질 때 드러난다 */
.room-emblem.is-awaiting { visibility: hidden; }

/* ───────── 한 권의 책 (#report) ───────── */
.book .prose { max-width: var(--measure); font-size: var(--fs-read); line-height: 1.9; color: var(--c-text); word-break: keep-all; text-wrap: pretty; }
.book .prose > * + * { margin-top: 1.2em; }
.book-resume {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); margin-top: var(--space-6); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-line); border-radius: var(--radius-md); background: var(--accent-soft);
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text); text-decoration: none;
}
.book-resume__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
.book-resume__text { flex: 1; }
.book-resume b { color: var(--c-text-strong); }
.book-section { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.book-section__head { margin-top: var(--space-16); text-align: center; }
.book-section__head::before { content: "✦"; display: block; margin-bottom: var(--space-3); color: var(--bronze-hi); }
.book-section__num { font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: 0.2em; color: var(--bronze-hi); }
.book-section__title { margin-top: var(--space-1); font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--c-text-strong); text-wrap: balance; }
.book-part, .book-room { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.book-room { margin-top: var(--space-12); padding-top: var(--space-10); border-top: 1px solid var(--c-line); }
.book-section__head + .book-room { margin-top: var(--space-10); padding-top: 0; border-top: 0; }
.book-room__head { text-align: center; }
.book-room__mark { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto var(--space-3); border-radius: 50%; border: 1px solid var(--accent-line); background: radial-gradient(circle, var(--accent-soft), transparent 70%); color: var(--accent); --sig: 30px; box-shadow: 0 0 24px var(--accent-soft); }
.book-room__num { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); }
.book-room__title { margin: var(--space-1) 0 var(--space-2); font-size: var(--fs-xl); line-height: var(--lh-tight); color: var(--c-text-strong); }
.book-room__key { max-width: 22em; margin: 0 auto; font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--accent); text-wrap: balance; }
.book-ch { margin-top: var(--space-10); }
.book-ch__name { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); font-size: var(--fs-lg); color: var(--c-text-strong); }
.book-ch__num {
  flex-shrink: 0; padding: 2px 10px 3px; clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze));
  font-family: var(--font-latin); font-size: var(--fs-xs); font-weight: 700; color: oklch(0.2 0.03 60);
}
.book-ch--hidden { padding: var(--space-5) var(--space-4); border: 1px dashed var(--accent-line); border-radius: var(--radius-lg); background: oklch(0.2 0.045 var(--room-h) / 0.7); }
.book-ch__seal { --seal: 26px; flex-shrink: 0; }
.book-room__foot { display: flex; justify-content: space-between; margin-top: var(--space-6); }
.book .result-actions .text-link { justify-self: center; }
/* 목차 시트 (dialog, 아래에서 올라옴) */

/* ───────── 미리보기: 6/6 전 잠금 · 부 번호 ───────── */

@media (prefers-reduced-motion: reduce) {
  .hub-cta { animation: none; }
  /* 상징: 이동·확대·획 그리기 없음. 가운데에서 200ms 페이드 인 → 200ms 페이드 아웃(전체 400ms). 기본 = 오버레이 안 보임, 엠블럼 제자리 */
  .sigil-rise.is-playing .sigil-rise__mark, .sigil-rise.is-flash .sigil-rise__mark, .sigil-rise.is-skipped .sigil-rise__mark { animation: sigil-rm 400ms linear both; transform: translate(50vw, 42vh); }
  .sigil-rise.is-playing .sigil-rise__veil, .sigil-rise.is-flash .sigil-rise__veil, .sigil-rise.is-skipped .sigil-rise__veil { animation: sigil-rm-veil 400ms linear both; }
  .sigil-rise .sig, .sigil-rise .sig--laurel, .sigil-rise__halo { animation: none !important; stroke-dashoffset: 0; }
  .receipt-toggle__caret { transition: none; }
}
@keyframes sigil-rm { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sigil-rm-veil { 0% { opacity: 0; } 50% { opacity: 0.9; } 100% { opacity: 0; } }
.so-far__title { flex: 1; min-width: 0; white-space: nowrap; }

/* ═════════ 9단계: 방의 안내자 (결정 51, 9-2) ═════════
   - .guide-figure: 방 시작 화면 .room-emblem 오른쪽 옆의 안내자 실루엣(선 그림, 방 강조색). 상징 원과 겹치지 않는다.
     8-3 상징 떠오름 동안(.room-emblem.is-awaiting)은 숨었다가, 끝나면 200ms 페이드로 나타난다. 기본 상태가 최종 모습.
   - .say: 안내자 한마디(이름 라벨 + 인용형 한 줄). greet(방 시작) · ritual(의식) · open/close(결과 앞뒤) · bridge(다음 문 위) */
.room-head { position: relative; }
.guide-figure {
  position: absolute;
  top: calc(var(--space-6) + (var(--emblem) - 59px) / 2);
  left: calc(50% + var(--emblem) / 2 + var(--space-5));
  width: 44px;
  height: 59px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  filter: drop-shadow(0 0 6px var(--accent-glow));
  transition: opacity 200ms var(--ease-out);
}
.room-emblem--sibyl + .guide-figure { margin-left: var(--space-2); } /* 월계관이 원 밖으로 14px 나옴 */
.room-emblem.is-awaiting + .guide-figure { opacity: 0; transition: none; }

.say {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
  max-width: 26rem;
  margin: var(--space-6) auto;
  text-align: left;
  animation: say-in 420ms var(--ease-out) both;
}
@keyframes say-in { from { opacity: 0; translate: 0 6px; } }
.say__figure {
  grid-row: span 2;
  width: 30px;
  height: 40px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.say__name {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  letter-spacing: 0.06em;
  color: var(--accent);
}
.say__name b { font-weight: 700; }
.say__role { color: var(--c-text-muted); font-weight: 400; }
.say__line {
  margin-top: var(--space-1);
  padding-left: var(--space-3);
  border-left: 2px solid var(--accent-line);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--c-text-strong);
  text-wrap: pretty;
}
/* 방 시작 인사: 큰 실루엣이 위에 있으므로 작은 실루엣 없이 가운데 정렬, 따옴표로 대사임을 표시 */
.say--greet { grid-template-columns: minmax(0, 1fr); justify-items: center; margin: var(--space-5) auto 0; text-align: center; }
.say--greet .say__line { padding: 0; border: 0; font-size: var(--fs-md); color: var(--c-text); }
.say--greet .say__line::before { content: "\201C" / ""; color: var(--accent); }
.say--greet .say__line::after { content: "\201D" / ""; color: var(--accent); }
/* 의식: 기존 .ritual__guide 자리 그대로, 글자만 읽기 쉽게 */
.say--ritual { margin: 0 auto var(--space-6); }
.say--ritual .say__line.ritual__guide { min-height: 0; margin-bottom: 0; font-size: var(--fs-md); color: var(--c-text-strong); }
.say--open { margin: 0 auto var(--space-5); }
.say--close { margin: var(--space-8) auto var(--space-6); }
/* 다리: 블록을 늘리지 않도록 기존 머리 장식(◆ 선)을 안내자 머리줄로 바꾼다 */
.say--bridge { display: block; max-width: none; margin: 0; text-align: center; }
.say__head { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.say__head .say__figure { width: 24px; height: 32px; }
.say--bridge .passage__bridge { padding-top: var(--space-3); }
.say--bridge .passage__bridge::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .say { animation: none; }
  .guide-figure { transition: none; }
}
/* 빈 상태: 문구가 아직 없으면(데이터 키 누락) 따옴표·이름만 남지 않게 통째로 숨긴다 */
.say:not(.say--bridge):has(.say__line:empty) { display: none; }

/* ═════════ (결정 52) 입구 다듬기: 고대의 문 주 버튼 + 정보 위계 정리 ═════════
   순서: 머리 → 고대의 문(주 버튼) → 여섯 방(한 줄 요약 + 작은 문 3×2) → 지금까지의 이야기 → 한 권의 책 → 자주 묻는 것 → 광고
   상자·테두리는 줄이고, 구역 사이는 청동 장식 구분선 하나로 나눈다 */

/* ── 고대의 문 ── */
.hub-cta.hub-gate {
  --gw: 184px;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; min-height: 0; margin: var(--space-1) 0 0; padding: var(--space-3) 0 var(--space-1);
  border: 0; border-radius: 0; background: none; box-shadow: none; animation: none;
  color: var(--c-text-strong); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* 문 뒤 안개빛: 천천히 숨 쉰다 */
.hub-gate::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -8%;
  width: calc(var(--gw) * 1.7); height: calc(var(--gw) * 1.75); margin-left: calc(var(--gw) * -0.85);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--accent-glow), oklch(0.5 0.08 var(--accent-h) / 0.08) 45%, transparent 70%);
  opacity: 0.55; pointer-events: none;
  animation: gate-breathe 4.8s ease-in-out infinite;
}
@keyframes gate-breathe { 50% { opacity: 0.95; transform: scale(1.04); } }
/* (16단계 H5) 입구 위에 지도 띠·링크가 붙으면 낮은 화면(360×640 등)에서 문이 밀려 잘린다 → 그때만 문을 줄이고 머리 위 여백을 덜어 시작 버튼을 첫 화면 안에 둔다 */
@media (max-height: 760px) {
  .hub:has(> .map-slot--hub:not([hidden])) .hub-head { padding-top: 0; }
  .hub:has(> .map-slot--hub:not([hidden])) .hub-cta.hub-gate { --gw: 144px; }
}
.hub-gate__door {
  position: relative; display: block; overflow: hidden;
  width: var(--gw); height: calc(var(--gw) * 1.4);
  border: 3px solid var(--bronze);
  border-radius: calc(var(--gw) / 2) calc(var(--gw) / 2) 4px 4px;
  /* 문짝 뒤에 고인 빛 (문이 벌어지면 보인다) */
  background: radial-gradient(ellipse 45% 55% at 50% 55%, oklch(0.97 0.03 var(--accent-h)), var(--accent) 38%, oklch(0.2 0.05 var(--room-h)) 85%);
  box-shadow: 0 0 0 3px oklch(0.14 0.02 60), 0 0 0 4px var(--bronze-dark), 0 18px 40px oklch(0 0 0 / 0.55);
  perspective: 700px;
  transition: border-color var(--dur-base);
}
.hub-gate__leaf {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    radial-gradient(ellipse 130% 38% at 50% 14%, oklch(0.36 0.05 70 / 0.5), transparent 70%),
    repeating-linear-gradient(0deg, oklch(0 0 0 / 0.13) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, oklch(0.28 0.035 65), oklch(0.15 0.025 60));
  transition: transform 700ms var(--ease-in-out);
  backface-visibility: hidden;
}
.hub-gate__leaf--l { left: 0; transform-origin: left center; box-shadow: inset -1px 0 0 var(--bronze-dark), inset -6px 0 10px oklch(0 0 0 / 0.35); }
.hub-gate__leaf--r { right: 0; transform-origin: right center; box-shadow: inset 1px 0 0 var(--bronze-dark), inset 6px 0 10px oklch(0 0 0 / 0.35); }
/* 문짝의 오목한 널 두 칸 */
.hub-gate__panel {
  position: absolute; left: 20%; right: 14%; top: 67%; height: 13%;
  border: 1px solid oklch(0.66 0.075 75 / 0.35); border-radius: 2px;
  box-shadow: inset 0 2px 6px oklch(0 0 0 / 0.55), 0 1px 0 oklch(1 0 0 / 0.04);
}
.hub-gate__panel--low { top: 84%; height: 9%; }
.hub-gate__leaf--r .hub-gate__panel { left: 14%; right: 20%; }
/* 틈새로 새는 빛 */
.hub-gate__light {
  position: absolute; z-index: 1; left: 50%; top: 10%; bottom: 3%; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--accent) 18%, oklch(0.97 0.03 var(--accent-h)) 55%, var(--accent) 85%, transparent);
  box-shadow: 0 0 10px 2px var(--accent-glow);
  animation: seam-breathe 3.2s ease-in-out infinite;
  transition: width 600ms var(--ease-in-out), margin 600ms var(--ease-in-out);
}
/* 아치 몰딩 · 여섯 방의 상징 · 열쇠 구멍 봉인 */
.hub-gate__carve { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.hub-gate__arch { stroke: var(--bronze); stroke-width: 2; opacity: 0.8; }
.hub-gate__arch--in { stroke: var(--bronze-dark); stroke-width: 1.2; opacity: 1; }
.hub-gate__motifs {
  stroke: var(--bronze-hi); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.7; filter: drop-shadow(0 0 3px var(--accent-glow));
  transition: opacity 400ms;
}
.hub-gate__seal { transition: opacity 400ms, transform 600ms var(--ease-in-out); transform-origin: 100px 158px; }
.hub-gate__seal circle { fill: oklch(0.3 0.04 65); stroke: var(--bronze-hi); stroke-width: 1.5; }
.hub-gate__seal .hub-gate__seal-in { fill: oklch(0.18 0.025 60); stroke: var(--bronze); stroke-width: 1; }
.hub-gate__keyhole { fill: oklch(0.96 0.04 var(--accent-h)); filter: drop-shadow(0 0 4px var(--accent)); }
/* 떠다니는 먼지(별가루) */
.hub-gate__dust { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.hub-gate__dust i {
  position: absolute; bottom: 18%; left: 48%; width: 3px; height: 3px; border-radius: 50%;
  background: oklch(0.96 0.04 var(--accent-h)); box-shadow: 0 0 6px var(--accent);
  opacity: 0; animation: gate-dust 7s linear infinite;
}
.hub-gate__dust i:nth-child(2) { left: 38%; bottom: 30%; animation-delay: -1.2s; animation-duration: 8s; }
.hub-gate__dust i:nth-child(3) { left: 60%; bottom: 10%; animation-delay: -2.6s; }
.hub-gate__dust i:nth-child(4) { left: 30%; bottom: 8%; width: 2px; height: 2px; animation-delay: -3.9s; animation-duration: 9s; }
.hub-gate__dust i:nth-child(5) { left: 66%; bottom: 36%; width: 2px; height: 2px; animation-delay: -5.1s; }
.hub-gate__dust i:nth-child(6) { left: 52%; bottom: 44%; animation-delay: -6.3s; animation-duration: 8.5s; }
@keyframes gate-dust {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(10px, -120px); }
}
/* 새김 명판: 상태별 문구가 들어가는 자리 (문턱에 살짝 겹친다) */
.hub-gate__plate {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: calc(var(--gw) + 56px); min-height: 50px; margin-top: -6px; padding: var(--space-2) var(--space-5);
  border: 1px solid var(--bronze); border-radius: 3px;
  background: linear-gradient(180deg, oklch(0.26 0.03 65), oklch(0.17 0.025 60));
  box-shadow: inset 0 1px 0 oklch(0.84 0.07 85 / 0.25), inset 0 -3px 8px oklch(0 0 0 / 0.45), 0 0 0 3px oklch(0.13 0.02 60), 0 0 0 4px var(--bronze-dark);
  font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.04em;
  color: oklch(0.95 0.03 85); text-shadow: 0 1px 0 oklch(0 0 0 / 0.7);
}
.hub-gate .hub-cta__num {
  padding: 1px 9px 2px; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze));
  font-family: var(--font-latin); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
  color: oklch(0.2 0.03 60); text-shadow: none;
}
/* 손을 대면 문짝이 아주 조금 */
@media (hover: hover) {
  .hub-gate:hover .hub-gate__door { border-color: var(--bronze-hi); }
  .hub-gate:hover .hub-gate__leaf--l { transform: rotateY(-9deg); }
  .hub-gate:hover .hub-gate__leaf--r { transform: rotateY(9deg); }
}
.hub-gate:focus-visible { outline: none; }
.hub-gate:focus-visible .hub-gate__plate { outline: 2px solid var(--accent); outline-offset: 5px; }
.hub-gate:focus-visible .hub-gate__door { border-color: var(--bronze-hi); }
/* 누른 순간 (JS: .is-entering) — 문짝이 벌어지고 봉인이 풀리며 빛이 샌다 → 상징 떠오름 */
.hub-gate.is-entering .hub-gate__leaf--l { transform: rotateY(-40deg); }
.hub-gate.is-entering .hub-gate__leaf--r { transform: rotateY(40deg); }
.hub-gate.is-entering .hub-gate__light { width: 30%; margin-left: -15%; }
.hub-gate.is-entering .hub-gate__seal { opacity: 0; transform: scale(1.3); }
.hub-gate.is-entering .hub-gate__motifs { opacity: 1; }

/* ── 여섯 방: 한 줄 요약 + 작은 문 3×2 ── */
.hub .journey { margin-top: var(--space-10); text-align: center; }
.hub .journey__chips { gap: 0; }
.hub .journey__chip { padding: 0; border: 0; background: none; font-size: var(--fs-xs); color: var(--c-text); }
.hub .journey__chip + .journey__chip::before { content: "·"; margin: 0 0.5em; color: var(--bronze); }
.hub .doors-note { margin: var(--space-1) 0 0; font-size: var(--fs-xs); }
.hub .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-2); margin-top: var(--space-5); }
.hub .door {
  --arch: calc((100cqi - 2 * var(--space-2)) / 6);
  --portal: 44px;
  min-height: 0; gap: 2px; padding: var(--space-6) 4px var(--space-3);
  border-width: 1px;
}
.hub .door::before { inset: 4px; border-radius: calc(var(--arch) - 4px) calc(var(--arch) - 4px) calc(var(--radius-lg) - 4px) calc(var(--radius-lg) - 4px); }
.hub .door__num { padding: 2px 8px 3px; font-size: var(--fs-2xs); }
.hub .door__rivets { display: none; }
.hub .door__portal { margin-bottom: var(--space-2); }
.hub .door__portal::before { inset: -7px; }
.hub .door__glyph { font-size: 1.5rem; }
.hub .door__icon { width: 22px; height: 22px; stroke-width: 2.4; }
.hub .door__icon--tall { width: 14px; height: 28px; stroke-width: 4; }
.hub .door__moon { width: 22px; height: 22px; }
.hub .door__seal { width: 22px; height: 22px; right: -6px; bottom: -4px; }
.hub .door__name { font-size: var(--fs-sm); word-break: keep-all; }
.hub .door__origin { display: none; }
.hub .door__reads { margin-top: 0; font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1.35; color: var(--c-text-muted); word-break: keep-all; }
.hub .door.is-visited .door__badge { margin-top: var(--space-1); padding: 0 6px; font-size: var(--fs-2xs); }
.hub .hub-end { margin-top: var(--space-4); font-size: var(--fs-xs); }

/* ── 구역 구분: 상자 대신 청동 장식선 하나 ── */
.hub :is(.so-far, .faq)::before {
  content: ""; display: block; width: 72%; height: 12px; margin: 0 auto var(--space-6);
  background:
    radial-gradient(circle, var(--bronze) 0 2px, transparent 2.5px) center / 12px 12px no-repeat,
    linear-gradient(90deg, transparent, oklch(0.66 0.075 75 / 0.45) 20% 44%, transparent 44% 56%, oklch(0.66 0.075 75 / 0.45) 56% 80%, transparent) center / 100% 1px no-repeat;
}
/* ── 지금까지의 이야기: 상자 없이, 마친 방만 (아직 안 연 방은 위 여섯 문이 보여 준다) ── */
.hub .so-far { margin-top: var(--space-10); padding: 0; border: 0; border-radius: 0; background: none; }
.hub .so-far__item { border-top-color: oklch(0.4 0.04 285 / 0.35); }
.hub .so-far__all { margin-top: var(--space-2); }
/* ── 자주 묻는 것: 펼친 채로, 더 조용하게 ── */
.hub .faq { margin-top: var(--space-12); padding-top: 0; border-top: 0; }
.hub .faq__title { text-align: center; font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.04em; color: var(--c-text); }
.hub .faq__list { gap: var(--space-5); }
.hub .faq__item dt { padding-left: 0; font-size: var(--fs-sm); color: var(--c-text); }
.hub .faq__item dt::before { content: none; }
.hub .faq__item dd { padding-left: 0; font-size: var(--fs-sm); line-height: 1.75; }
.hub [data-ad="hub"] { margin-top: var(--space-10); }

@media (prefers-reduced-motion: reduce) {
  .hub-gate::before, .hub-gate__light { animation: none; }
  .hub-gate::before { opacity: 0.75; }
  .hub-gate__dust { display: none; }
  .hub-gate__leaf, .hub-gate__light, .hub-gate__seal, .hub-gate__motifs { transition: none; }
  .hub-gate:hover .hub-gate__leaf--l, .hub-gate:hover .hub-gate__leaf--r,
  .hub-gate.is-entering .hub-gate__leaf--l, .hub-gate.is-entering .hub-gate__leaf--r { transform: none; }
  .hub-gate.is-entering .hub-gate__light { width: 2px; margin-left: -1px; }
  .hub-gate.is-entering .hub-gate__seal { opacity: 1; transform: none; }
}

/* ═════════════════════════════════════════════════════════════════
   (결정 53) 책을 넘기는 리더 — 한 쪽 = 한 화면, 낡은 종이, 쪽 넘김
   명세: design/strange-oracle.md "책을 넘기는 리더 (결정 53)"
   ═════════════════════════════════════════════════════════════════ */
.book-reader {
  /* 종이·잉크 (OKLCH). 대비는 명세 표 참고: 본문 잉크는 종이의 가장 어두운 가장자리에서도 AA */
  --paper: oklch(0.91 0.03 82);
  --paper-warm: oklch(0.88 0.042 76);
  --ink: oklch(0.29 0.035 45);
  --ink-strong: oklch(0.23 0.035 40);
  --ink-soft: oklch(0.4 0.04 50);
  --ink-rubric: oklch(0.43 0.13 32);   /* 머리글자·장 번호 (붉은 잉크) */
  --ink-line: oklch(0.55 0.05 55 / 0.45);
  /* 쪽 치수: 개발 담당은 이 값으로 쪽을 재어 나눈다 */
  --book-bar-h: 60px;
  --book-line: 30px;                   /* 본문 한 줄 = 17px 글자 × 약 1.76 */
  --page-run-h: 22px;                  /* 머리글(달리는 제목) */
  --page-folio-h: 22px;                /* 쪽 번호 */
  --turn-dur: 380ms;                   /* (14-6 성능) 520ms → 380ms: 쪽 넘김 0.45초 기준. 넘김 모양은 그대로 (개발 담당, 디자인 담당 확인 필요) */
  --turn-ease: cubic-bezier(0.3, 0.1, 0.2, 1);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-inline: calc(var(--space-2) - var(--gutter)); /* 좌우 8px만 우주 배경이 보이게 */
}
/* 책 화면은 스크롤 없이 한 화면에 고정 */
.screen.book.is-active {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--topbar-h) - 1px); /* 1px = 상단 막대 아래 테두리 */
  padding: 0;
  overflow: visible; /* 좌우 -12px로 넓힌 책이 잘리지 않게. 세로는 높이 고정 + 자식 min-height:0 */
}
.book-source[hidden] { display: none !important; }
/* 9칸 진행률은 은퇴: 쪽 번호와 book-bar 진행 줄이 대신한다 (개발 담당이 마크업·코드 삭제) */
.read-progress--book { display: none !important; }

/* ── 보기 전환: 표지 ↔ 책장 ── */
.book-reader[data-view="cover"] .book-stage,
.book-reader[data-view="cover"] .book-bar { display: none; }

/* ── 표지: 낡은 가죽 장정 ── */
.leather {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: center;
  padding: var(--space-8) var(--space-6) var(--space-8) var(--space-8);
  border-radius: 4px 12px 12px 4px;
  background:
    radial-gradient(ellipse 60% 40% at 70% 25%, oklch(0.42 0.07 40 / 0.55), transparent 70%),
    radial-gradient(ellipse 50% 35% at 25% 80%, oklch(0.2 0.04 35 / 0.6), transparent 70%),
    radial-gradient(circle at 82% 88%, oklch(0.5 0.06 55 / 0.25) 0 6%, transparent 14%),
    repeating-radial-gradient(circle at 30% 40%, oklch(0.32 0.055 38) 0 1px, oklch(0.3 0.05 36) 1px 3px),
    oklch(0.3 0.05 36);
  box-shadow:
    inset 0 0 0 1px oklch(0.2 0.03 35),
    inset 0 0 40px oklch(0.12 0.03 30 / 0.8),
    4px 0 0 -1px oklch(0.86 0.03 80),
    6px 1px 0 -1px oklch(0.78 0.04 75),
    0 18px 40px oklch(0.05 0.02 285 / 0.7);
  overflow: hidden;
  text-align: center;
}
/* 금박 이중 테두리 (눌린 자국처럼 희미하게) */
.leather::before, .leather::after { content: ""; position: absolute; pointer-events: none; border: 1px solid oklch(0.7 0.08 80 / 0.55); border-radius: 2px; }
.leather::before { inset: 14px 14px 14px 26px; }
.leather::after { inset: 19px 19px 19px 31px; border-color: oklch(0.7 0.08 80 / 0.3); }
.leather__spine { position: absolute; inset: 0 auto 0 0; width: 16px; background: linear-gradient(to right, oklch(0.18 0.03 35), oklch(0.27 0.045 36) 60%, oklch(0.16 0.03 35)); box-shadow: 1px 0 0 oklch(0.4 0.05 45 / 0.5); }
.leather__corner { position: absolute; width: 22px; height: 22px; border: 2px solid oklch(0.66 0.075 75 / 0.75); }
.leather__corner--tl { top: 10px; left: 22px; border-right: 0; border-bottom: 0; }
.leather__corner--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.leather__corner--bl { bottom: 10px; left: 22px; border-right: 0; border-top: 0; }
.leather__corner--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.leather .report-head__badge { border-color: oklch(0.7 0.08 80 / 0.7); background: oklch(0.2 0.03 35 / 0.5); color: var(--bronze-hi); letter-spacing: 0.1em; }
.leather .report-head__title { color: var(--bronze-hi); text-shadow: 0 1px 0 oklch(0.15 0.03 35), 0 0 18px oklch(0.84 0.07 85 / 0.25); text-wrap: balance; }
.leather .report-head__meta { color: oklch(0.86 0.04 80); }

/* ── 책장(무대) ── */
.book-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: var(--space-2);
  touch-action: pan-y;          /* 좌우 스와이프는 JS가, 세로는 브라우저가 */
  user-select: none;
  -webkit-user-select: none;
}
.book-stage__pages { position: absolute; inset: 0; perspective: 1600px; }

/* ── 쪽: 낡은 종이 (CSS 그라데이션만, 이미지 없음) ── */
.book-page {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: var(--page-run-h) 1fr var(--page-folio-h);
  row-gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-6); /* 왼쪽이 제본(홈) 쪽이라 4px 더 */
  border-radius: 2px 7px 7px 2px;
  color: var(--ink);
  background:
    linear-gradient(to right, oklch(0.4 0.05 50 / 0.34), oklch(0.55 0.05 55 / 0.12) 4%, transparent 9%),
    radial-gradient(circle at 86% 9%, oklch(0.72 0.07 62 / 0.28) 0 3px, transparent 9px),
    radial-gradient(circle at 91% 14%, oklch(0.72 0.07 62 / 0.2) 0 2px, transparent 6px),
    radial-gradient(ellipse 22% 14% at 12% 92%, oklch(0.74 0.06 65 / 0.22), transparent 70%),
    radial-gradient(ellipse 30% 18% at 78% 70%, oklch(0.8 0.05 70 / 0.18), transparent 70%),
    radial-gradient(circle at 30% 60%, oklch(0.74 0.06 65 / 0.14) 0 2px, transparent 5px),
    radial-gradient(135% 105% at 55% 48%, transparent 58%, oklch(0.8 0.055 68 / 0.75) 100%),
    linear-gradient(170deg, var(--paper) 0%, var(--paper-warm) 55%, var(--paper) 100%);
  box-shadow:
    inset 0 0 0 1px oklch(0.7 0.05 65 / 0.55),
    inset -1px 0 6px oklch(0.6 0.06 60 / 0.35),
    2px 1px 0 -0.5px oklch(0.84 0.035 78),
    4px 2px 0 -1px oklch(0.76 0.04 72),
    0 14px 34px oklch(0.05 0.02 285 / 0.65);
  overflow: hidden;
  visibility: hidden;
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.book-page:focus { outline: none; }
.book-page:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 3px; }
/* 넘길 때 종이 위에 드리우는 그늘 */
.book-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to left, oklch(0.2 0.03 40 / 0.45), transparent 70%); }

/* 상태: is-current(보이는 쪽) · is-under(넘어가는 쪽 아래 깔린 쪽) · is-turn-next / is-turn-prev(넘어가는 중) */
.book-page.is-current { visibility: visible; z-index: 2; }
.book-page.is-under { visibility: visible; z-index: 1; }
.book-page.is-turn-next, .book-page.is-turn-prev { visibility: visible; z-index: 3; will-change: transform; }
.book-page.is-turn-next { animation: page-turn-away var(--turn-dur) var(--turn-ease) both; }
.book-page.is-turn-prev { animation: page-turn-back var(--turn-dur) var(--turn-ease) both; }
.book-page.is-turn-next::after { animation: page-shade var(--turn-dur) var(--turn-ease) both; }
.book-page.is-turn-prev::after { animation: page-shade var(--turn-dur) var(--turn-ease) reverse both; }
/* 아래 깔린 쪽: 넘어가는 종이의 그림자가 왼쪽(제본 쪽)에서 걷힌다 */
.book-page.is-under::after { opacity: 1; background: linear-gradient(to right, oklch(0.15 0.03 40 / 0.4), transparent 45%); animation: page-under-shade var(--turn-dur) var(--turn-ease) both; }
.book-stage.is-turning-prev .book-page.is-under::after { animation-direction: reverse; }
@keyframes page-turn-away {
  0%   { transform: rotateY(0deg); }
  55%  { transform: rotateY(-62deg) skewY(-1.2deg); }
  100% { transform: rotateY(-102deg) skewY(-2deg); }
}
@keyframes page-turn-back {
  0%   { transform: rotateY(-102deg) skewY(-2deg); }
  45%  { transform: rotateY(-62deg) skewY(-1.2deg); }
  100% { transform: rotateY(0deg); }
}
@keyframes page-shade { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-under-shade { from { opacity: 1; } to { opacity: 0; } }

/* 머리글 · 쪽 번호 */
.book-page__run {
  display: flex; justify-content: center; align-items: center; gap: var(--space-2);
  min-width: 0; overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid var(--ink-line);
  font-size: var(--fs-xs); line-height: var(--page-run-h); letter-spacing: 0.04em; color: var(--ink-soft);
}
.book-page__run > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.book-page__run-dot { color: var(--ink-rubric); }
.book-page.is-chapter-start .book-page__run { visibility: hidden; } /* 장 시작 쪽은 머리글 없이 (책의 관례). 자리는 남긴다 */
.book-page__folio { font-family: var(--font-latin); font-size: var(--fs-xs); line-height: var(--page-folio-h); letter-spacing: 0.08em; color: var(--ink-soft); text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.book-page__folio::before, .book-page__folio::after { content: "—"; margin: 0 var(--space-2); color: var(--ink-line); }

/* 본문: 17px / 30px, 단락 사이 반 줄, 들여쓰기 1em. 안쪽 스크롤 없음 */
.book-page__body {
  min-height: 0;
  overflow: hidden;
  font-size: var(--fs-read);
  line-height: var(--book-line);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.book-page__body > p { margin: 0; text-indent: 1em; }
.book-page__body > * + * { margin-top: calc(var(--book-line) / 2); }
.book-page__body > p.is-cont { text-indent: 0; }             /* 앞 쪽에서 이어진 단락 */
.book-page__body > p.match-pair { text-indent: 0; margin-bottom: var(--space-5); } /* (R53-3) 궁합 짝 칸: 들여쓰기가 flex 알약 글자에 상속되어 오른쪽으로 밀리던 것 / (R53-4) 위 p 규칙의 margin: 0이 짝 칸 아래 간격을 지우던 것 */
.book-page__body b, .book-page__body strong { color: var(--ink-strong); }
/* 머리글자(drop cap): 두 줄 높이, 붉은 잉크 */
.book-page__body > p.has-dropcap { text-indent: 0; }
.book-page__body > p.has-dropcap::first-letter {
  float: left;
  margin: 3px var(--space-2) 0 0;
  font-size: calc(var(--book-line) * 2 - 6px);
  line-height: calc(var(--book-line) * 2 - 6px);
  font-weight: 700;
  color: var(--ink-rubric);
}

/* 장 머리 (장 시작 쪽 맨 위). --room: 방의 첫 쪽 / --ch: 방 안의 II~IV장·숨은 장 / --part: 여는 글·제2부 각 장·닫는 글 */
.book-opening { padding-top: var(--space-2); text-align: center; }
.book-page__body > .book-opening + * { margin-top: var(--space-5); }
.book-opening__orn { display: block; width: 132px; height: 16px; margin: 0 auto var(--space-3); color: var(--ink-rubric); opacity: 0.85; }
.book-opening__kicker { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--ink-soft); }
.book-opening__kicker > span { font-family: var(--font-latin); color: var(--ink-rubric); }
.book-opening__title { margin-top: var(--space-1); font-size: var(--fs-xl); line-height: var(--lh-tight); color: var(--ink-strong); text-wrap: balance; }
.book-opening__key { max-width: 18em; margin: var(--space-2) auto 0; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--ink-soft); text-wrap: balance; }
.book-opening__ch { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--ink-line); font-size: var(--fs-md); line-height: var(--lh-tight); font-weight: 700; color: var(--ink-strong); }
.book-opening__num { font-family: var(--font-latin); color: var(--ink-rubric); }
.book-opening__numeral { font-family: var(--font-latin); font-size: var(--fs-numeral); line-height: 1; color: var(--ink-rubric); }
.book-opening--ch .book-opening__title { font-size: var(--fs-lg); }
.book-opening--part { padding-top: var(--space-8); }
/* 부 표제지(제1부·제2부): 쪽 가운데에 장식선 + 부 번호 + 제목만 */
.book-page--half .book-page__body { display: grid; place-content: center; text-align: center; }
.book-page--half .book-opening__title { font-size: var(--fs-2xl); }

/* 특수 쪽: 면지(영수증)·목차·뒷면지(면책·공유·영수증). 원본 노드를 옮겨 와 종이 위 색으로 */
.book-page--end .book-page__body { display: grid; align-content: center; gap: var(--space-3); text-align: center; } /* (UI 점검 53) space-5 → 3: 끝 표시 ✦가 빈 쪽으로 홀로 밀리지 않게 */
.book-page--end .book-page__body > * + * { margin-top: 0; }
.book-page .page-end { padding-top: 0; color: var(--ink-rubric); } /* (UI 점검 53) 위 48px 여백 빼서 뒷면지 쪽에 함께 들어가게 */
.book-page .result-actions .text-link { color: var(--ink-rubric); }

/* (UI 점검 53) 종이 위 색 토큰: 영수증 칸·시기별 흐름·궁합·원형 심층·근거 목록이 밤 테마 토큰(밝은 글자)을 그대로 써서
   종이 위 대비가 1.1~1.5:1이었다. 쪽 안에서만 토큰을 종이·잉크 값으로 바꾼다. 강조색은 명도만 낮춰 방 색조(hue)는 유지.
   [data-room] 요소는 base.css가 --accent를 다시 계산하므로 --accent-l·--accent-c만 내려 주면 따라온다. */
.book-page {
  --c-text-strong: var(--ink-strong);
  --c-text: var(--ink);
  --c-text-muted: var(--ink-soft);
  --c-text-faint: var(--ink-soft);
  --c-line: var(--ink-line);
  --c-line-strong: oklch(0.5 0.05 55);
  --c-surface-1: oklch(0.95 0.02 85 / 0.55);
  --c-surface-2: oklch(0.83 0.04 74 / 0.45);
  --c-surface-3: oklch(0.8 0.045 72 / 0.5);
  --accent-l: 0.39;
  --accent-c: calc(0.12 * var(--accent-c-scale));
  --accent-dim-l: 0.35;
  --c-on-accent: oklch(0.96 0.02 85);
  --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-dim: oklch(var(--accent-dim-l) calc(var(--accent-c) * 0.9) var(--accent-h));
  --accent-soft: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.1);
  --accent-line: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.4);
  --accent-glow: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.3);
}
/* 쪽 나누기가 근거 목록을 한 줄씩 ul.evidence로 감싸므로, 이어진 줄은 윗선·간격 없이 한 목록처럼 */
.book-page__body > .evidence + .evidence { margin-top: 0; border-top: 0; }

/* ── 가장자리 탭 영역 (보이지 않음, 쪽 폭의 22%) ── */
.book-stage__edge { position: absolute; top: 0; bottom: 0; z-index: 5; width: 22%; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.book-stage__edge--prev { left: 0; }
.book-stage__edge--next { right: 0; }
.book-stage.is-turning .book-stage__edge { pointer-events: none; }
.book-stage.is-first .book-stage__edge--prev, .book-stage.is-last .book-stage__edge--next { display: none; }

/* ── 쪽 넘기기 막대 ── */
.book-bar {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  height: var(--book-bar-h);
  padding: 0 var(--space-1);
}
.book-bar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-width: 80px; min-height: var(--tap-min); padding: 0 var(--space-3);
  border: 1px solid var(--bronze-dark); border-radius: var(--radius-pill);
  background: oklch(0.2 0.035 285 / 0.85);
  font-size: var(--fs-sm); color: var(--c-text-strong); cursor: pointer;
}
.book-bar__btn > span[aria-hidden] { font-size: var(--fs-lg); line-height: 1; color: var(--bronze-hi); }
.book-bar__btn:hover { border-color: var(--bronze); }
.book-bar__btn:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 2px; }
.book-bar__btn:disabled { opacity: 0.4; cursor: default; }
.book-bar__track { position: relative; height: 3px; border-radius: var(--radius-pill); background: var(--c-line); overflow: hidden; }
.book-bar__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--bronze-hi); box-shadow: 0 0 6px oklch(0.84 0.07 85 / 0.5); transition: transform var(--dur-base) linear; }

@media (min-width: 481px) {
  .book-stage { margin-top: var(--space-4); }
}

/* ── 움직임 줄이기: 쪽은 즉시 바뀐다. 기본 상태가 최종 모습 (JS는 turn class를 붙이지 않는 것이 원칙, 붙어도 아래로 무력화) ── */
@media (prefers-reduced-motion: reduce) {
  .book-page.is-turn-next, .book-page.is-turn-prev,
  .book-page.is-turn-next::after, .book-page.is-turn-prev::after,
  .book-page.is-under::after { animation: none; }
  .book-page.is-turn-next { visibility: hidden; }
  .book-page.is-under::after { opacity: 0; }
  .book-bar__fill { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════
   (10단계) 출시 전 다듬기 — 결정 55~61
   명세: design/strange-oracle.md "10단계: 출시 전 다듬기 (디자인)"
   ═════════════════════════════════════════════════════════════════ */

/* ── 입구 머리 (10-1 a, 10-5): 제목 → 요약 → 칩 한 줄 → 무엇을 넣는지 → 문. 영문 윗줄은 지웠다 ── */
.hub .hub-head { padding-bottom: var(--space-3); }
.hub .hub-chips { margin-top: var(--space-2); row-gap: 2px; }
.hub .hub-chips .journey__chip { white-space: nowrap; }
.hub .hub-chips .journey__chip + .journey__chip::before { margin: 0 0.35em; }
.hub .hub-chips .journey__chip:first-child { font-weight: 700; color: var(--accent); } /* "여섯 방 모두 무료" */
.hub .hub-privacy { display: flex; justify-content: center; align-items: flex-start; max-width: 28em; margin-inline: auto; line-height: var(--lh-ui); text-wrap: balance; }
.hub .hub-privacy svg { margin-top: 2px; }
.hub .hub-assure { text-wrap: balance; word-break: keep-all; }
.hub .hub-assure > span:last-child { min-width: 0; }
/* 낮은 화면(360x640)에서도 문 명판(주 버튼 글자)까지 한 화면에: 장식인 머리 문양만 접는다 */
@media (max-height: 680px) {
  .hub .hub-sigil { display: none; }
}

/* ── 이어가기 코드 (10-1 b): 글자 링크 → 같은 자리에 펼침 ── */
.resume-enter { margin-top: var(--space-1); text-align: center; }
.resume-enter.is-hidden, .resume-make.is-hidden { display: none; }
.resume-enter__toggle, .resume-make__toggle { font-size: var(--fs-xs); }
.resume-enter__toggle[aria-expanded="true"] .receipt-toggle__caret,
.resume-make__toggle[aria-expanded="true"] .receipt-toggle__caret { transform: rotate(180deg); }
/* (UI 점검 10단계) 밑줄은 글자에만: 화살표(▾)까지 밑줄이 이어져, 펼치면(180도) 화살표 위에 줄이 떠 보였다 */
.resume-enter__toggle, .resume-make__toggle, .receipt-toggle { text-decoration: none; }
:is(.resume-enter__toggle, .resume-make__toggle, .receipt-toggle) > span:first-child { text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 4px; }
:is(.resume-enter__toggle, .resume-make__toggle, .receipt-toggle):is(:hover, :focus-visible) > span:first-child { text-decoration-color: currentColor; }
.resume-enter__panel, .resume-make__panel {
  display: grid; gap: var(--space-3); margin-top: var(--space-1); padding: var(--space-4);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-1); text-align: left;
}
.resume-enter__panel.is-hidden, .resume-make__panel.is-hidden { display: none; }
.resume-enter__panel .receipt-open__row { flex-wrap: wrap; }
.resume-enter__panel .receipt-open__input, .resume-enter__panel .receipt-open__go { flex: 1 1 100%; min-width: 0; }
.resume-enter__panel .receipt-open__input { letter-spacing: 0.04em; }
.resume-make { margin-top: var(--space-1); }
.resume-code {
  min-height: calc(1.5em + 2 * var(--space-3)); padding: var(--space-3);
  border: 1px dashed var(--bronze); border-radius: var(--radius-md); background: oklch(0.14 0.03 285 / 0.7);
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Consolas, monospace); font-size: var(--fs-md); line-height: 1.5;
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--c-text-strong); text-align: center;
  overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}
/* 경고: 접히지 않고, 복사 버튼 바로 위에 항상 보인다 */
.resume-warn {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--space-2); padding: var(--space-3);
  border-left: 3px solid oklch(0.84 0.09 var(--hue-candle)); border-radius: var(--radius-md);
  background: oklch(0.24 0.04 60 / 0.5);
  font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text-strong); word-break: keep-all;
}
.resume-warn svg { width: 18px; height: 18px; margin-top: 2px; color: oklch(0.84 0.09 var(--hue-candle)); }
.so-far__restored {
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--accent-soft);
  font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-strong);
  word-break: keep-all; text-wrap: balance; /* (UI 점검 10단계) 360px에서 "이에요"만 다음 줄로 떨어지지 않게 */
}
.so-far__restored.is-hidden { display: none; }

/* ── 3/6 한 줄 (10-1 c) ── */
.so-far__half {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-2);
  margin-top: var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); text-align: center;
}
.so-far__half.is-hidden { display: none; }
.so-far__half .text-link { color: var(--accent); }

/* ── 공유 줄 (10-2): 링크 복사 + 카카오톡 자리(키가 비면 빈 채로 숨음) + 완료 한 줄 ── */
.share-links { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.share-links::before { content: "·"; margin-right: var(--space-2); color: var(--c-text-faint); }
.share-links--solo::before, .result-more:has(.btn) .share-links::before { content: none; }
.share-kakao-slot { display: inline-flex; align-items: center; }
.share-kakao-slot:empty { display: none; }
.share-kakao-slot:not(:empty)::before { content: "·"; margin: 0 var(--space-1); color: var(--c-text-faint); }
.share-status { flex: 0 0 100%; width: 100%; font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text); text-align: center; }
.share-status.is-hidden, .share-url.is-hidden, .share-status__msg.is-hidden { display: none; }
.share-url {
  display: block; margin-top: var(--space-1); padding: var(--space-2); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-md);
  color: var(--c-text-strong); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}
.result-more--share { margin-top: 0; }
/* 방 결과의 보조 링크는 세로로 쌓는다: 360px에서 줄이 꺾이며 가운뎃점이 줄 끝·줄 머리에 남던 것 */
.result-more:has(.share-links) { display: grid; justify-items: center; gap: 0; }
.result-more:has(.share-links) .result-more__dot { display: none; }
.result-more:has(.share-links) .share-links::before { content: none; }

/* ── 복원 상태: 입력값이 필요한 부분 대신 한 줄 (10-1 b) ── */
.restore-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-2);
  margin-top: var(--space-5); padding: var(--space-2) var(--space-4);
  border: 1px dashed var(--c-line-strong); border-radius: var(--radius-lg);
  font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); text-align: center;
}
.restore-note.is-hidden { display: none; }
.restore-note .text-link { color: var(--accent); }

/* ── 결제 전 화면: 책 모양 두 쪽 (10-3 b). 종이·잉크 값은 .book-reader(결정 53)와 같게 유지 ── */
/* 1쪽: 속표지 */
/* 속표지 관례: 제목 묶음은 위쪽 1/3, 여섯 상징과 읽는 시간은 아래 끝 */
/* 2쪽: 견본 */
.toc__time { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 400; color: var(--c-text-muted); white-space: nowrap; }
/* (UI 점검 10단계) 가운뎃점은 app.js가 글자에 붙여 넣는다 → CSS 점을 빼 "· ·" 겹침을 없앰. 글자 수와 읽는 시간은 오른쪽에 붙여 둔다 */
.toc__time:empty { display: none; }
.toc__title:has(.toc__time) .toc__total { margin-left: auto; }

/* ═════════ 11단계 묶음 1 — 결제까지의 길 (off에서도 보이는 것). 명세: design/strange-oracle.md "11단계 묶음 1" ═════════ */
/* H3 흔들리는 원형: 방 결과 원형 줄(flex: 배지 | 글) 아래 둘째 줄. 배지 폭만큼 들여 글 칸에 맞춘다 */
.archetype-line { flex-wrap: wrap; }
.archetype-line__text { flex: 1 1 0; min-width: 0; }
.archetype-line__sway {
  flex: 0 0 100%; margin: var(--space-2) 0 0; padding-top: var(--space-2);
  border-top: 1px dashed var(--c-line); font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui);
  color: var(--c-text-muted); word-break: keep-all; text-wrap: pretty;
}
/* 입구 "지금의 원형" 줄 안 둘째 줄 (요소 수 그대로) */
.so-far__sway { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-muted); word-break: keep-all; text-wrap: pretty; }

/* H4 바통 질문: 한 문장 질문(45자) — 2줄이 고르게 */
.say--bridge .passage__bridge { word-break: keep-all; text-wrap: balance; }

/* H5 3/6 중간 결말: 중간 맺음 → 남은 세 장 칸 → 다음 문(주). 4~6장 줄은 숨긴다(칸이 대신) */
#screen-story.is-half .spine-item:is(.is-available, .is-upcoming) { display: none; }
.story-half { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.story-half__close { font-size: var(--fs-md); line-height: var(--lh-read); color: var(--c-text); text-align: center; word-break: keep-all; text-wrap: pretty; }
.story-half__slots { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.story-half__slot {
  display: grid; grid-template-columns: 2em 28px 1fr; align-items: center; column-gap: var(--space-3);
  min-height: 56px; padding: var(--space-2) var(--space-4);
  border: 1px dashed var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-surface-1);
}
.story-half__num, .story-half__slot > .sig { grid-row: span 2; }
.story-half__num { font-family: var(--font-latin); font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; }
.story-half__slot > .sig { width: 28px; height: 28px; color: var(--accent); opacity: 0.75; }
.story-half__slot > .sig--rune { width: 24px; height: 36px; justify-self: center; }
.story-half__name { font-weight: 700; color: var(--c-text-strong); }
.story-half__wait { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.story-half__door { margin-top: var(--space-2); }
.story-half__door .next-door__glyph .sig { width: 28px; height: 28px; }

/* 11-5·F6 결제 꺼짐 6/6: 책은 글 한 줄뿐(카드·가격·버튼 없음). 본문보다 조용하게 */

/* F4 결제 실패 안내: 내가 닫음 = 차분한 회색 / 거절 = 촛불색 / 그 밖 = 기존 붉은 상자 */
/* 문의처 줄: pay.contact가 비면 JS가 .is-hidden, 값 칸이 비어도 CSS가 한 번 더 숨긴다(빈 줄·"undefined" 방지) */

/* F3 분량 표기 하나: 목차 제목은 deeper-read-time 한 칸만 쓰고 deeper-total은 비운다 */
.toc__total:empty { display: none; }

/* F1 쪽 나누기 — 시기별 흐름: 구간마다 새 쪽, 네 항목 한 쪽 또는 2+2. 글자 크기는 그대로, 쪽 안 간격만 줄인다 */
.book-page .timeline { margin-left: var(--space-2); padding-left: var(--space-3); } /* (C4) 글 시작점은 그대로(8+1+12=21px), 구간 점이 쪽 본문 왼쪽 끝(overflow: hidden)에 반쯤 잘리던 것 */
.book-page .timeline__stage::before { left: calc(-1 * var(--space-3) - 6px); } /* 점 가운데를 점선 위에 */
.book-page .timeline__stage { padding-bottom: 0; }
.book-page .timeline__areas { gap: var(--space-2); }
.book-page .timeline__age.is-cont { font-weight: 400; color: var(--ink-soft); } /* 2+2로 나뉜 뒷쪽 머리: "서른 무렵 · 이어서" */
/* F1 ④ 제2부 표제 + 시기별 흐름 머리를 한 쪽에. 첫 구간(또는 그 앞 두 항목)이 들어가면 이어 담고, 안 들어가면 .is-solo(가운데 정렬 표제지) */
.book-page--part-open .book-page__body { display: block; text-align: start; }
.book-page--part-open .book-opening--half { padding-top: var(--space-6); text-align: center; }
.book-page--part-open .book-opening--half .book-opening__title { font-size: var(--fs-2xl); }
.book-page--part-open .book-opening--part { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--ink-line); }
.book-page--part-open.is-solo .book-page__body { display: grid; place-content: center; text-align: center; }
.book-page.is-solo .book-page__body { display: grid; place-content: center; text-align: center; } /* (QA 필수 5) 장 머리만 남은 장 표제지도 가운데 정렬 */

/* 정적 검토(.is-static-preview)에서는 숨은 새 블록도 보이게 */
.is-static-preview :is(.story-half, .story-book-note).is-hidden { display: grid !important; }

/* ═════════ 12단계 잔여: 입구 바닥글 (14단계 F6에서 은퇴한 잠금 상자 .unlock*·배너 .ad-slot* 규칙을 지움) ═════════ */
.hub-cookie[hidden] { display: none !important; }

/* 입구 바닥글 줄: 지우기 안내 다음 줄에 쿠키 안내(분석 ID가 있을 때만) */
.hub-foot { display: grid; gap: var(--space-3); padding-bottom: var(--space-6); }
.hub-foot .hub-clear-note { margin-top: 0; }
.hub-cookie { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-muted); text-align: center; }
.hub-cookie__link { display: inline-block; padding: var(--space-1) 0; color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }

/* ═════════ 13단계: 광고로 여는 책 (E1, design/strange-oracle.md 「13단계: 광고로 여는 책 (디자인)」) ═════════
   책의 집 = 목차. book-reader[data-view] = toc | cover | pages. toc·cover는 화면 스크롤, pages만 한 화면 고정(결정 53).
   잠금 표시·버튼은 12단계 잠금 버튼과 같은 모양(보조 버튼 + 재생 아이콘). 배너는 목차 맨 아래 book-toc 하나뿐. */
.hub > .book-card { margin-top: var(--space-8); }

/* ── 보기 전환 ── */
.book-reader[data-view="toc"] > :not(.book-home),
.book-reader[data-view="cover"] > :not(.chapter-cover),
.book-reader[data-view="pages"] > :is(.book-home, .chapter-cover) { display: none; }
.screen.book.is-active:has(> .book-reader:not([data-view="pages"])) { display: block; height: auto; padding: var(--space-6) 0 var(--space-16); }
.book-reader:not([data-view="pages"]) { display: block; margin-inline: 0; }
.book-reader [hidden] { display: none !important; }

/* ── 목차 머리 ── */
.book-home__head { text-align: center; }
.book-home__fleuron { display: block; width: 160px; height: 20px; margin: 0 auto var(--space-3); color: var(--bronze-hi); }
.book-home__title { font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--c-text-strong); text-wrap: balance; }
.book-home__arch { margin-top: var(--space-2); font-family: var(--font-serif); font-size: var(--fs-lg); line-height: var(--lh-tight); color: var(--accent); text-wrap: balance; }
.book-home__arch:empty { display: none; }
.book-home__lede { max-width: 22em; margin: var(--space-3) auto 0; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); text-wrap: pretty; word-break: keep-all; }
.book-home .book-resume { width: 100%; margin-top: var(--space-6); text-align: left; cursor: pointer; }
.book-resume.is-hidden { display: none; }

/* ── 장 카드 (한 줄 = 버튼 하나). 상태 아이콘은 mask로 그린다(글자색을 따른다) ── */
.chapters {
  --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7.5' rx='1.5'/%3E%3Cpath d='M5.2 7V5.2a2.8 2.8 0 0 1 5.6 0V7' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
  --ico-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M6.5 5v6l4.8-3z'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-top: var(--space-6);
  font-family: var(--font-sans);
}
.chapters__part { margin: var(--space-8) 0 var(--space-3); font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--bronze-hi); }
.chapters__part span:first-child { font-weight: 700; }
.chapters__list { display: grid; gap: var(--space-2); }
.chapters__list--close { margin-top: var(--space-8); }
.chapter-row__btn {
  display: grid;
  grid-template-columns: 28px 30px minmax(0, 1fr) auto;
  grid-template-areas: "num mark text time";
  column-gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: 68px;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: oklch(0.17 0.035 285 / 0.9);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.chapter-row__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chapter-row__btn:active { transform: scale(0.99); }
.chapter-row__num { grid-area: num; font-family: var(--font-latin); font-size: var(--fs-xs); color: var(--bronze-hi); text-align: center; white-space: nowrap; }
.chapter-row__mark { grid-area: mark; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--accent-line); color: var(--accent); --sig: 15px; }
.chapter-row__text { grid-area: text; display: grid; gap: 2px; min-width: 0; }
.chapter-row__name { font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-tight); color: var(--c-text-strong); }
.chapter-row__sub { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-xs); line-height: 1.45; color: var(--c-text-muted); word-break: keep-all; } /* 한 줄 소개 30자 = 360px 두 줄 */
.chapter-row__sub:empty { display: none; }
.chapter-row__state { display: inline-flex; align-items: center; justify-self: start; gap: 6px; margin-top: var(--space-1); font-size: var(--fs-xs); line-height: 1.4; color: var(--c-text-muted); }
.chapter-row__state::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.chapter-row__time { grid-area: time; align-self: start; padding-top: 2px; font-size: var(--fs-xs); color: var(--c-text-muted); white-space: nowrap; }
/* 아직 못 엶: 점선 테두리, 배경 없음. 글자는 흐리게(opacity) 하지 않는다(AA) */
.chapter-row[data-state="need-room"] .chapter-row__btn { border-style: dashed; background: transparent; }
.chapter-row[data-state="need-room"] .chapter-row__name { color: var(--c-text); font-weight: 400; }
.chapter-row[data-state="need-room"] .chapter-row__mark { border-color: var(--c-line); color: var(--c-text-muted); }
.chapter-row[data-state="need-room"] .chapter-row__state { --ico: var(--ico-lock); }
/* 열 수 있음: 재생 아이콘 + "광고 한 편" — 12단계 잠금 버튼과 같은 테두리 알약(배너와 다른 모양) */
.chapter-row[data-state="can-open"] .chapter-row__state { --ico: var(--ico-play); padding: 2px 10px 2px 6px; border: 1px solid var(--accent-line); border-radius: 999px; color: var(--accent); }
/* 열림 / 다 읽음 */
.chapter-row[data-state="opened"] .chapter-row__btn { border-color: var(--accent-line); }
.chapter-row[data-state="opened"] .chapter-row__state { --ico: var(--ico-check); color: var(--accent); font-weight: 700; }
.chapter-row[data-state="read"] .chapter-row__state { --ico: var(--ico-check); }

/* ── 목차 아래: 공유 → 법적 고지 → 면책 → 배너(book-toc). 배너는 공유 버튼에서 고지 줄·면책·48px만큼 떨어진다 ── */
.book-home__share { margin-top: var(--space-10); }
.book-home__legal { justify-content: center; margin-top: var(--space-4); font-family: var(--font-sans); font-size: var(--fs-xs); }

/* ── 장 표지: 결정 53의 가죽 장정을 장마다 한 장 ── */
.chapter-cover { display: grid; gap: var(--space-5); }
.chapter-cover__leather { min-height: min(52dvh, 400px); padding: var(--space-10) var(--space-6) var(--space-10) var(--space-8); }
.chapter-cover[data-chapter="match"] .chapter-cover__leather,
.chapter-cover.has-form .chapter-cover__leather { min-height: 0; padding-block: var(--space-8); }
.chapter-cover__head { position: relative; display: grid; justify-items: center; gap: var(--space-2); }
.chapter-cover__part { font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: 0.2em; color: oklch(0.86 0.04 80); }
.chapter-cover__part:empty, .chapter-cover__mark:empty { display: none; }
.chapter-cover__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid oklch(0.66 0.075 75 / 0.7); background: oklch(0.22 0.035 35 / 0.8); color: var(--bronze-hi); --sig: 28px; }
.chapter-cover__title { font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--bronze-hi); text-shadow: 0 1px 0 oklch(0.15 0.03 35), 0 0 18px oklch(0.84 0.07 85 / 0.25); text-wrap: balance; }
.chapter-cover__result { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: var(--lh-tight); color: oklch(0.93 0.03 80); text-wrap: balance; }
.chapter-cover__key { max-width: 20em; font-size: var(--fs-sm); line-height: var(--lh-ui); color: oklch(0.86 0.04 80); text-wrap: balance; word-break: keep-all; }
.chapter-cover__hidden { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--fs-sm); color: oklch(0.86 0.04 80); }
.chapter-cover__hidden b { color: var(--bronze-hi); }
.chapter-cover__seal { --seal: 20px; flex: none; }
.chapter-cover__volume { margin-top: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-xs); color: oklch(0.84 0.035 80); }

/* 궁합 입력 · 흐름 생년월일 */
.chapter-form { display: grid; gap: var(--space-4); min-width: 0; margin: 0; }
.chapter-cover:not([data-chapter="match"]) :is(.chapter-form--match, .chapter-cover__alt) { display: none; }
.chapter-form .field { margin: 0; }
.rel-type { min-width: 0; margin: 0; padding: 0; border: 0; }
.rel-type__legend { margin-bottom: var(--space-2); padding: 0; }
.rel-type__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.rel-type__opt { position: relative; display: grid; cursor: pointer; }
.rel-type__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rel-type__label {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--tap); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-md);
  background: oklch(0.17 0.035 285 / 0.9);
  font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.35; color: var(--c-text);
  text-align: center; word-break: keep-all;
}
/* 고름: 색 + 체크 표시 + 굵기 (색만으로 알리지 않는다) */
.rel-type__input:checked + .rel-type__label { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; color: var(--c-text-strong); }
.rel-type__input:checked + .rel-type__label::before { content: "✓"; color: var(--accent); }
.rel-type__input:focus-visible + .rel-type__label { outline: 2px solid var(--accent); outline-offset: 2px; }
.rel-type[aria-invalid="true"] .rel-type__label { border-style: dashed; border-color: var(--c-danger); }

/* 버튼 묶음: data-state에 따라 하나만. 주 버튼(펼치기)은 열렸을 때만 → 한 화면 주 버튼 ≤1 */
.chapter-cover__actions { display: grid; justify-items: center; gap: var(--space-3); }
.chapter-cover__actions > .btn { width: 100%; }
.chapter-cover[data-state="open"] .chapter-fail,
.chapter-cover[data-state="fail"] .chapter-open { display: none; } /* 장 표지 상태는 open·fail 둘 (잠금·기다림은 14단계에서 은퇴) */
.chapter-open.is-fetching { opacity: 0.7; cursor: progress; }
.chapter-fail { display: grid; justify-items: center; gap: var(--space-3); width: 100%; padding: var(--space-4); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-md); text-align: center; }
.chapter-fail__text { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); }
.chapter-cover__alt, .chapter-cover__toc { min-height: var(--tap-min); }

/* ── 장 끝 쪽 (종이 위): 다음 장(주, 짙은 잉크) + 목차로(보조, 잉크 테두리) ── */
.chapter-end { display: grid; justify-items: center; gap: var(--space-3); font-family: var(--font-sans); text-align: center; }
.chapter-end__fleuron { width: 160px; height: 20px; color: var(--ink-rubric); }
.chapter-end__name { font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--ink-strong); }
.chapter-end .btn { width: 100%; }
.chapter-end .btn.chapter-end__next, .chapter-end .btn.chapter-end__next:hover { border-color: var(--ink-strong); background: var(--ink-strong); color: var(--paper); box-shadow: none; }
.chapter-end__next-name { font-weight: 700; }
.chapter-end__state { font-size: var(--fs-xs); color: var(--ink-soft); }
.chapter-end__state:empty, .chapter-end .is-hidden { display: none; }
.chapter-end .btn.chapter-end__toc, .chapter-end .btn.chapter-end__toc:hover { border-color: var(--ink-soft); background: transparent; color: var(--ink); box-shadow: none; }
.chapter-end .btn:focus-visible { outline: 2px solid var(--ink-rubric); outline-offset: 2px; }

/* ── 나의 이야기: 책 목차로 가는 한 줄 버튼 ── */
.story-book { margin-top: var(--space-8); }
.story-book.is-hidden { display: none; }
.story-book__go { gap: var(--space-2); }
.story-book__icon { flex: none; width: 20px; height: 20px; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .chapter-row__btn { transition: none; }
  .chapter-row__btn:active { transform: none; }
}

/* 정적 검토(.is-static-preview): 목차 아래에 장 표지(궁합)도 함께 보인다 */
.is-static-preview .book-reader[data-view="toc"] > .chapter-cover { display: grid; margin-top: var(--space-16); }
.is-static-preview .book-resume.is-hidden { display: flex; }

/* ═════════════════════════════════════════════════════════════════
   14단계: Ⅰ 만신의 방 · 일곱 문 · 결제 전 화면 (F2). 명세: design/strange-oracle.md 「14단계」
   무드: 고요한 신당 · 단정한 한국풍 · 따뜻한 촛불. 바탕은 밤의 먹빛(다른 방과 같은 어둠), 읽을 것은 한지 위.
   오방색은 채도를 낮춰 오행 색(동명도 L 0.56)으로만 쓴다. 움직임은 transform·opacity 위주(성능 14-6)
   ═════════════════════════════════════════════════════════════════ */
:root {
  --font-hanja: "Gowun Batang", "Noto Serif KR", "Noto Serif CJK KR", "Batang", "AppleMyungjo", serif;
  /* 한지·나무·기와 (입구의 한옥 대문에서도 쓰므로 :root) */
  --hanji: oklch(0.93 0.022 85);
  --hanji-lit: oklch(0.8 0.06 75);           /* 밤에 안쪽 불빛이 비친 창호지 */
  --hanji-ink: oklch(0.24 0.025 50);         /* 한지 위 글자: 대비 약 12:1 */
  --hanji-ink-muted: oklch(0.42 0.03 55);    /* 한지 위 보조 글자: 대비 약 6:1 */
  --wood: oklch(0.34 0.05 40);
  --wood-hi: oklch(0.46 0.06 45);
  --wood-dark: oklch(0.2 0.035 40);
  --roof: oklch(0.3 0.015 250);
  --dancheong-green: oklch(0.55 0.07 175);
  --dancheong-red: oklch(0.5 0.12 28);
  /* 오행 = 오방색, 동명도 L 0.56 (한지 위 약 3.8:1, 밤 바탕 위 약 4.3:1 — 그래픽 3:1 이상). 색만으로 구분하지 않고 늘 글자를 붙인다 */
  --el-wood: oklch(0.56 0.08 165);   /* 목 · 청 */
  --el-fire: oklch(0.56 0.11 28);    /* 화 · 적 */
  --el-earth: oklch(0.56 0.09 80);   /* 토 · 황 */
  --el-metal: oklch(0.56 0.015 85);  /* 금 · 백 (흰 비단의 그늘빛) */
  --el-water: oklch(0.56 0.07 265);  /* 수 · 흑 (먹에 가까운 쪽빛) */
}
/* 방 강조색: 단청 주홍(밝은 쪽). 바탕 색조 25 = 옻칠한 나무의 밤 */
[data-room="saju"] { --accent-h: 18; --accent-c-scale: 0.9; --room-h: 25; }
[data-el="wood"] { --el: var(--el-wood); }
[data-el="fire"] { --el: var(--el-fire); }
[data-el="earth"] { --el: var(--el-earth); }
[data-el="metal"] { --el: var(--el-metal); }
[data-el="water"] { --el: var(--el-water); }

/* ───────── 입구: 다음 방이 만신이면 고대 문 → 한옥 대문 (CSS만) ───────── */
.hub-gate__roof, .hub-gate__ring { display: none; }
.hub-gate[data-room="saju"] .hub-gate__roof { display: block; position: relative; z-index: 2; width: calc(var(--gw) * 1.3); margin-bottom: -4px; }
.hub-gate__roof svg, .saju-gate__roof { display: block; width: 100%; height: auto; overflow: visible; }
.hub-gate__tiles, .saju-gate__tiles { fill: var(--roof); stroke: oklch(0.45 0.02 250); stroke-width: 1; }
.hub-gate__ridge, .saju-gate__ridge { fill: none; stroke: oklch(0.52 0.02 250); stroke-width: 3; stroke-linecap: round; }
.hub-gate__eave, .saju-gate__eave { fill: none; stroke: oklch(0.2 0.015 250); stroke-width: 2; }
.hub-gate__dancheong, .saju-gate__band { fill: var(--dancheong-green); stroke: var(--dancheong-red); stroke-width: 2; }
.hub-gate[data-room="saju"] .hub-gate__door {
  height: calc(var(--gw) * 1.12);
  border-width: 6px 9px 0; border-color: var(--wood-hi); border-radius: 2px;
  box-shadow: 0 0 0 2px var(--wood-dark), 0 18px 40px oklch(0 0 0 / 0.55);
}
.hub-gate[data-room="saju"] .hub-gate__carve { display: none; }
/* 띠살 문짝: 위쪽은 불빛 비친 창호지 + 세로 살, 아래는 널 */
.hub-gate[data-room="saju"] .hub-gate__leaf,
.saju-gate__leaf {
  background:
    repeating-linear-gradient(90deg, var(--wood-dark) 0 2px, transparent 2px 9px) 50% 10% / 70% 50% no-repeat,
    linear-gradient(var(--hanji-lit), var(--hanji-lit)) 50% 10% / 70% 50% no-repeat,
    linear-gradient(180deg, var(--wood), var(--wood-dark));
}
.hub-gate[data-room="saju"] .hub-gate__panel { top: 70%; height: 11%; }
.hub-gate[data-room="saju"] .hub-gate__panel--low { top: 85%; height: 8%; }
.hub-gate[data-room="saju"] .hub-gate__ring { display: block; }
.hub-gate__ring, .saju-gate__ring { position: absolute; top: 62%; width: 11px; height: 11px; border: 2px solid var(--bronze-hi); border-radius: 50%; }
.hub-gate__leaf--l .hub-gate__ring, .saju-gate__leaf--l .saju-gate__ring { right: 5px; }
.hub-gate__leaf--r .hub-gate__ring, .saju-gate__leaf--r .saju-gate__ring { left: 5px; }
/* 풍경: 처마 끝에 매달려 아주 천천히 (포기 가능 — 움직임 줄이기면 멈춤) */
.hub-gate__chime, .saju-gate__chime { position: absolute; z-index: 3; width: 1.5px; height: 20px; background: var(--bronze); transform-origin: top center; }
.hub-gate__chime { right: 7%; top: 70%; animation: chime-sway 6s ease-in-out infinite; }
.hub-gate__chime i, .saju-gate__chime i { position: absolute; top: 100%; left: -4.25px; width: 10px; height: 9px; border-radius: 5px 5px 2px 2px; background: var(--bronze-hi); }
.hub-gate__chime i::after, .saju-gate__chime i::after { content: ""; position: absolute; top: 11px; left: 2px; width: 6px; height: 8px; background: var(--el-wood); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); }
@keyframes chime-sway { 50% { rotate: 5deg; } }

/* 일곱 문: Ⅰ 대문은 맨 앞 한 줄 전체(가로형), 나머지 여섯은 3×2 그대로 */
.hub .door[hidden] { display: none; }
.hub .doors .door--gate {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-3); border-radius: var(--radius-md); text-align: left;
  border-color: var(--wood-hi);
  background: linear-gradient(180deg, oklch(0.26 0.045 30), oklch(0.15 0.03 30));
  box-shadow: inset 0 5px 0 var(--roof), inset 0 6px 0 var(--dancheong-green), 0 0 0 1px oklch(0 0 0 / 0.5);
}
.hub .door--gate::before { border-radius: calc(var(--radius-md) - 4px); }
.hub .door--gate .door__portal { margin: 0; }
.hub .door--gate .door__icon--hanok { width: 30px; height: 30px; stroke-width: 1.8; }
.hub .door--gate .door__text { display: grid; gap: 2px; min-width: 0; }
.hub .door--gate .door__name { font-size: var(--fs-md); }
.hub .door--gate .door__origin { display: block; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.hub .door--gate .door__badge { grid-column: 2; }

/* ───────── 만신의 방 공통 바탕: 오방색 천 · 촛불 (밤의 신당) ───────── */
.room-intro--saju.is-active, .ritual--saju.is-active { position: relative; }
.shrine-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.room-intro--saju > :not(.shrine-bg, .cta-dock), .ritual--saju > :not(.shrine-bg) { position: relative; z-index: 1; }
.shrine-bg__cloth { position: absolute; top: 0; display: flex; gap: 3px; }
.shrine-bg__cloth--l { left: 0; }
.shrine-bg__cloth--r { right: 0; }
.shrine-bg__cloth i {
  display: block; width: 5px; height: calc(44px + var(--h, 0px)); border-radius: 0 0 2px 2px;
  background: var(--el); opacity: 0.55; transform-origin: top center;
  animation: cloth-sway 6s ease-in-out infinite;
}
.shrine-bg__cloth i:nth-child(2) { --h: 14px; animation-delay: -1.2s; }
.shrine-bg__cloth i:nth-child(3) { --h: 6px; animation-delay: -2.4s; }
.shrine-bg__cloth i:nth-child(4) { --h: 18px; animation-delay: -3.6s; }
.shrine-bg__cloth i:nth-child(5) { --h: 4px; animation-delay: -4.8s; }
@keyframes cloth-sway { 50% { rotate: 2.5deg; } }
.shrine-bg__candle {
  position: absolute; bottom: 16%; width: 140px; height: 180px;
  background: radial-gradient(closest-side, oklch(0.8 0.1 70 / 0.2), transparent);
  animation: candle-flicker 3.4s ease-in-out infinite;
}
.shrine-bg__candle--l { left: -56px; }
.shrine-bg__candle--r { right: -56px; animation-delay: -1.7s; }
@keyframes candle-flicker { 40% { opacity: 0.72; } 55% { opacity: 1; } 70% { opacity: 0.86; } }

/* ───────── 1-K. 대문 (의식 1단계) ───────── */
.saju-gate { --sg: 188px; position: relative; width: var(--sg); margin: 0 auto var(--space-4); }
.saju-gate__roof { position: relative; z-index: 2; width: calc(var(--sg) * 1.15); margin: 0 0 -4px calc(var(--sg) * -0.075); }
.saju-gate__frame {
  position: relative; display: grid; place-items: center;
  height: calc(var(--sg) * 0.62); margin: 0 6%;
  border: solid var(--wood-hi); border-width: 6px 9px 0;
  perspective: 600px; overflow: hidden;
}
.saju-gate__yard { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 78%, oklch(0.8 0.08 70 / 0.5), oklch(0.34 0.06 35 / 0.6) 55%, oklch(0.15 0.03 30) 100%); }
.room-emblem--saju { --emblem: 64px; z-index: 1; margin: 0; }
.room-emblem--saju .room-emblem__icon { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.saju-gate__leaf {
  position: absolute; z-index: 2; top: 0; bottom: 0; width: 50%;
  backface-visibility: hidden;
  transition: transform 1100ms var(--ease-in-out);
}
.saju-gate__leaf--l { left: 0; transform-origin: left center; transform: rotateY(-74deg); }
.saju-gate__leaf--r { right: 0; transform-origin: right center; transform: rotateY(74deg); }
.saju-gate.is-closed .saju-gate__leaf { transform: none; }
.saju-gate__sill { display: block; height: 6px; margin: 0 3%; border-radius: 1px; background: linear-gradient(var(--wood-hi), var(--wood-dark)); }
.saju-gate__chime { right: 3px; top: 36px; }
.saju-gate:not(.is-closed) .saju-gate__chime { animation: chime-ring 1.6s var(--ease-out) 0.5s 1; }
@keyframes chime-ring { 20% { rotate: 14deg; } 45% { rotate: -9deg; } 70% { rotate: 5deg; } 100% { rotate: 0deg; } }
/* 안내자: 대문 오른쪽 아래(지붕·천과 겹치지 않음). 좁은 화면에서는 오른쪽 끝에 붙는다 */
.room-intro--saju .guide-figure--saju { top: calc(var(--space-6) + 100px); left: min(calc(50% + 100px), calc(100% - 44px)); }

/* ───────── 2-K. 채비 (입력 네 칸 + 고지, 360×640 한 화면) ───────── */
.room-input--saju.is-active { padding-top: var(--space-2); }
.room-input--saju .room-head--compact { padding: var(--space-1) 0 var(--space-3); }
.room-input--saju .room-head__title { margin: 0; font-size: var(--fs-lg); }
.form--saju { display: grid; gap: var(--space-2); } /* F6: 360×640에서 이름 이유가 두 줄이 되어 고지 24px가 버튼 띠에 가려졌다 → 칸 사이 12→8 */
.form--saju .field { gap: var(--space-1); }
.form--saju .field + .field { margin-top: 0; }
.form--saju .field__label { font-size: var(--fs-sm); line-height: 1.45; }
.field__why { margin-left: var(--space-1); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 400; color: var(--c-text-muted); }
.field__why::before { content: "· "; }
.form--saju .input { height: var(--tap-min); min-height: var(--tap-min); padding-block: 0; } /* F6: 48→44 (탭 최소 44 유지) */
.field__solar { margin: 0; font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1.4; color: var(--c-text-muted); }
.field__row--time .chip-toggle { flex: 1.3; }
.form--saju .chip-toggle span { min-height: var(--tap-min); } /* F6: 시·분 칸(44)과 높이를 맞춤 */
/* "모름" 한 번 누르기 · 성별 세 칸: 진짜 checkbox·radio를 위에 투명하게 덮어 탭·키보드·낭독을 그대로 쓴다 */
.chip-toggle, .seg__opt { position: relative; display: grid; }
.chip-toggle input, .seg__opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-toggle span, .seg__opt span {
  display: grid; place-items: center; min-height: var(--tap-min); padding: 0 var(--space-2);
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text); white-space: nowrap;
}
.chip-toggle span { min-height: var(--tap); border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); }
.chip-toggle input:checked + span, .seg__opt input:checked + span { background: var(--accent-soft); color: var(--c-text-strong); box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }
.chip-toggle input:focus-visible + span, .seg__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: grid; grid-template-columns: 1fr 1fr 1.7fr; border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); overflow: hidden; }
.seg__opt + .seg__opt span { border-left: 1px solid var(--c-line); }
.notice--saju { margin-top: var(--space-1); padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); line-height: 1.5; }
.room-input--saju .cta-dock { padding-top: var(--space-3); }

/* ───────── 원국 표 (의식의 쌀 위 + 결과의 한지 판 공통) ───────── */
/* 4기둥을 오른쪽부터 년·월·일·시(전통 표기). DOM은 년→시 순서라 낭독·등장 순서도 년→시 */
.wonguk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; direction: rtl; }
.wonguk__col { direction: ltr; display: grid; gap: var(--space-1); justify-items: stretch; text-align: center; }
.wonguk__label { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--hanji-ink-muted); }
.wonguk__char {
  position: relative; display: grid; justify-items: center; padding: var(--space-2) 0 var(--space-1);
  border: 1px solid oklch(0.5 0.03 60 / 0.25); border-radius: var(--radius-sm); background: oklch(1 0 0 / 0.35);
}
.wonguk__char b { font-family: var(--font-hanja); font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--hanji-ink); }
.wonguk__char small { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1.3; color: var(--hanji-ink-muted); white-space: nowrap; }
.wonguk__char::before { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--el); }
/* 일간(나) = 일주의 윗글자: 주홍 테 */
.wonguk__col.is-self > .wonguk__char:not(.wonguk__char ~ .wonguk__char) { border-color: var(--dancheong-red); box-shadow: inset 0 0 0 1px var(--dancheong-red); }
.wonguk__unknown { display: none; }
.wonguk__col.is-unknown > .wonguk__char { display: none; }
.wonguk__col.is-unknown > .wonguk__unknown {
  display: grid; place-items: center; min-height: 6.5rem; border: 1px dashed oklch(0.45 0.03 60 / 0.6); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--hanji-ink-muted);
}

/* ───────── 3-K. 쌀점과 방울 → 공수 (의식 3·4단계) ───────── */
.ritual--saju { text-align: center; }
.soban-stage { display: grid; justify-items: center; gap: var(--space-4); width: 100%; margin-top: var(--space-4); } /* F6: 부모가 가운데 정렬이라 폭이 방울(96px)로 줄어 쌀 위 8글자가 겹쳤다 → 줄 전체 폭 */
.soban { position: relative; width: min(300px, 100%); aspect-ratio: 300 / 200; }
/* F6: 공수 단계에서 소반을 조금 줄여 도장·"공수 듣기"가 360×640 첫 화면에 들어오게 (글자 칸 약 38px, 한자 28px 그대로 들어감) */
.soban { transition: width 500ms var(--ease-out); }
.ritual--saju[data-stage="gongsu"] .soban { width: min(220px, 100%); }
@media (prefers-reduced-motion: reduce) { .soban { transition: none; } }
.soban__top {
  position: absolute; inset: 0 0 18%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--wood-hi), var(--wood) 60%, var(--wood-dark));
  box-shadow: inset 0 0 0 4px var(--wood-dark), inset 0 0 0 6px oklch(0.5 0.06 45 / 0.6), 0 16px 30px oklch(0 0 0 / 0.5);
}
/* 흰 쌀: 낟알 점 두 겹 + 둥근 그늘 (그림 파일 없음) */
.soban__rice {
  position: absolute; inset: 9% 7%; border-radius: 50%;
  background:
    radial-gradient(ellipse 2px 1.2px at 30% 40%, oklch(0.99 0.005 90) 60%, transparent 70%) 0 0 / 9px 7px,
    radial-gradient(ellipse 1.6px 1px at 60% 60%, oklch(0.8 0.02 80) 60%, transparent 70%) 4px 3px / 11px 8px,
    radial-gradient(closest-side, oklch(0.95 0.012 90), oklch(0.86 0.025 80));
  box-shadow: inset 0 3px 8px oklch(0 0 0 / 0.25);
}
.soban__legs {
  position: absolute; left: 22%; right: 22%; bottom: 0; height: 26%;
  background: linear-gradient(90deg, var(--wood-dark) 0 9%, transparent 9% 91%, var(--wood-dark) 91%);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
}
.wonguk--rice { position: absolute; z-index: 1; left: 15%; right: 15%; top: 15%; height: 54%; gap: var(--space-1); }
.wonguk--rice .wonguk__char { padding: 2px 0; border: 0; background: none; }
.wonguk--rice .wonguk__char b { font-size: 1.75rem; opacity: 0; text-shadow: 0 1px 0 oklch(1 0 0 / 0.5); }
.wonguk--rice .wonguk__char::before { top: 2px; right: 2px; width: 6px; height: 6px; }
.wonguk--rice .wonguk__col.is-unknown > .wonguk__unknown { min-height: 0; height: 100%; border-color: oklch(0.4 0.03 60 / 0.45); background: oklch(1 0 0 / 0.3); }
.wonguk__char + .wonguk__char { --i: 1; }
/* 붓글씨처럼 한 자씩: 위에서 아래로 먹이 번지듯 (년 → 월 → 일 → 시, 글자 사이 0.36초, 합 약 3초) */
.ritual--saju:is([data-stage="rung"], [data-stage="gongsu"]) .wonguk--rice .wonguk__char b {
  animation: brush-in 560ms var(--ease-out) both;
  animation-delay: calc((var(--k, 0) * 2 + var(--i, 0)) * 360ms);
}
@keyframes brush-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-3px) scale(1.06); }
  55% { opacity: 1; }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}
/* 방울 */
.bell {
  position: relative; display: grid; justify-items: center; gap: var(--space-1);
  min-width: 96px; min-height: 96px; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-lg); background: none; color: var(--accent); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bell__icon { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px var(--accent-glow)); transform-origin: 50% 8%; }
.bell__label { font-size: var(--fs-sm); color: var(--c-text); }
.bell__ring { position: absolute; top: 8px; left: 50%; width: 56px; height: 56px; margin-left: -28px; border: 1px solid var(--accent-line); border-radius: 50%; opacity: 0; pointer-events: none; }
.ritual--saju[data-stage="rice"] .bell__icon { animation: bell-wait 2.6s ease-in-out infinite; }
.ritual--saju[data-stage="rung"] .bell__icon { animation: bell-shake 700ms var(--ease-out) 1; }
.ritual--saju[data-stage="rung"] .bell__ring { animation: bell-ring 1.2s var(--ease-out) 2; }
.ritual--saju:not([data-stage="rice"]) .bell { pointer-events: none; }
.ritual--saju[data-stage="gongsu"] .bell { display: none; }
@keyframes bell-wait { 50% { rotate: 4deg; } }
@keyframes bell-shake { 20% { rotate: -16deg; } 45% { rotate: 12deg; } 70% { rotate: -6deg; } 100% { rotate: 0deg; } }
@keyframes bell-ring { from { opacity: 0.8; transform: scale(0.8); } to { opacity: 0; transform: scale(2.2); } }
.saju-ritual__hour { margin-top: var(--space-3); font-size: var(--fs-md); color: var(--c-text); }
/* 공수 (4단계) */
.gongsu { display: none; }
.ritual--saju[data-stage="gongsu"] .gongsu { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-3); animation: gongsu-in 700ms var(--ease-reveal) both; }
@keyframes gongsu-in { from { opacity: 0; transform: translateY(8px); } }
.gongsu__stem {
  display: grid; place-items: center; width: 88px; height: 88px; border-radius: var(--radius-md);
  background: var(--hanji); box-shadow: inset 0 0 0 3px var(--hanji), inset 0 0 0 5px var(--dancheong-red), 0 0 24px var(--accent-glow);
  font-family: var(--font-hanja); font-size: 3.25rem; font-weight: 700; line-height: 1; color: var(--hanji-ink);
}
.gongsu__call { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight); color: var(--c-text-strong); word-break: keep-all; }
.gongsu__go { max-width: 22rem; }

/* ───────── 4-K. 결과 ───────── */
.stem-seal {
  display: grid; place-items: center; width: 88px; height: 88px; margin: var(--space-3) auto var(--space-4);
  border-radius: var(--radius-md); background: var(--hanji);
  box-shadow: inset 0 0 0 3px var(--hanji), inset 0 0 0 5px var(--el, var(--dancheong-red)), 0 6px 18px oklch(0 0 0 / 0.35);
}
.stem-seal__hanja { font-family: var(--font-hanja); font-size: 3.25rem; font-weight: 700; line-height: 1; color: var(--hanji-ink); }
/* 결과 이름: 360px에서 10자까지 한 줄 (7vw ≈ 25px × 10 = 250px < 카드 안 폭) */
.capture--saju .capture__title { font-size: min(var(--fs-2xl), 7vw); word-break: keep-all; text-wrap: balance; }
/* 한지 판: 원국 표 + 오행 막대. 안쪽 글자색은 먹 */
.hanji-board {
  --c-text: var(--hanji-ink); --c-text-strong: var(--hanji-ink); --c-text-muted: var(--hanji-ink-muted);
  margin-top: var(--space-8); padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md); color: var(--hanji-ink);
  background:
    radial-gradient(ellipse at 20% 8%, oklch(0.97 0.012 85), transparent 60%),
    repeating-linear-gradient(115deg, oklch(0.5 0.03 70 / 0.035) 0 1px, transparent 1px 7px),
    var(--hanji);
  box-shadow: 0 10px 28px oklch(0 0 0 / 0.4), inset 0 0 0 1px oklch(0.6 0.04 70 / 0.35);
}
.hanji-board__title { margin: 0 0 var(--space-3); text-align: center; font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.08em; color: var(--hanji-ink); }
.hanji-board__self, .hanji-board__note { margin-top: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1.5; color: var(--hanji-ink-muted); text-align: center; word-break: keep-all; }
.hanji-board__note { color: var(--hanji-ink); }
.hanji-board.is-restored .wonguk, .hanji-board.is-restored .hanji-board__self { display: none; }
.ohaeng { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid oklch(0.5 0.03 60 / 0.25); }
.ohaeng__title { margin-bottom: var(--space-3); text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--hanji-ink); }
.ohaeng__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ohaeng__row { display: grid; grid-template-columns: 2.25em minmax(0, 1fr) 1.5em; align-items: center; gap: var(--space-2); }
.ohaeng__name { font-size: var(--fs-sm); font-weight: 700; color: var(--hanji-ink); }
.ohaeng__bar { position: relative; height: 12px; border-radius: 6px; background: oklch(0.5 0.03 60 / 0.12); overflow: hidden; }
.ohaeng__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--n, 0) / 8 * 100%); border-radius: inherit; background: var(--el); transform-origin: left center; animation: bar-grow 700ms var(--ease-out) both; }
@keyframes bar-grow { from { transform: scaleX(0); } }
.ohaeng__row.is-empty .ohaeng__bar { background: none; border: 1px dashed oklch(0.45 0.03 60 / 0.6); }
.ohaeng__row.is-most .ohaeng__bar { box-shadow: 0 0 0 1px var(--el); }
.ohaeng__row.is-least .ohaeng__name { text-decoration: underline dotted var(--el); text-underline-offset: 4px; }
.ohaeng__count { text-align: right; font-family: var(--font-sans); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--hanji-ink); }
/* 풀이 모듈 */
.reading--saju .saju-module { text-align: left; }
.saju-module + .saju-module { margin-top: var(--space-8); }
.saju-module__title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--fs-lg); line-height: var(--lh-tight); color: var(--c-text-strong); }
.saju-module__title::before { content: ""; flex: none; width: 9px; height: 9px; rotate: 45deg; background: var(--accent); }
.saju-module__ask { margin-top: var(--space-6); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); text-align: center; }
/* S5 만신의 공수: 한지 빛 띠를 두른 안내자 한마디 */
.say--gongsu { padding: var(--space-4); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: oklch(0.93 0.022 85 / 0.07); }
.say--gongsu .say__line { font-size: var(--fs-read); line-height: var(--lh-read); color: var(--c-text-strong); }
.saju-basis { margin-top: var(--space-8); font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1.5; color: var(--c-text-faint); text-align: center; }
.result--saju .page-end__glyph { fill: none; stroke: currentColor; stroke-width: 2; }

/* ───────── 6-P. 결제 전 화면 (template 안 · test·live에서만) ───────── */
.pay-band { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px dashed oklch(0.84 0.12 85 / 0.6); border-radius: var(--radius-sm); background: oklch(0.84 0.12 85 / 0.12); font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text-strong); }
.pay-band[hidden] { display: none; }
.pay-band__dot { flex: none; width: 8px; height: 8px; margin-top: 0.5em; border-radius: 50%; background: oklch(0.84 0.14 85); }
.pay-sec { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--c-line); }
.pay-sec__title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--fs-md); font-weight: 700; color: var(--c-text-strong); }
.pay-sec__num { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--accent-line); border-radius: 50%; font-family: var(--font-latin); font-size: var(--fs-xs); color: var(--accent); }
.pay-sec__body, .pay-note { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); word-break: keep-all; }
.pay-note { margin-top: var(--space-2); color: var(--c-text-muted); }
.pay-sec__link { display: inline-block; margin-top: var(--space-2); font-size: var(--fs-sm); }
.pay-sec--row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pay-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pay-list__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px dotted var(--c-line); font-size: var(--fs-sm); line-height: 1.45; }
.pay-list__name { min-width: 0; word-break: keep-all; }
.pay-list__vol { flex: none; font-family: var(--font-sans); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--c-text-muted); }
.pay-total { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-strong); }
.pay-price { margin: 0; text-align: right; }
.pay-price b { font-size: var(--fs-xl); color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
.pay-price__unit { display: block; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.pay-act { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.pay-buy { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); text-decoration: none; }
.pay-buy[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.pay-buy__ext { width: 16px; height: 16px; }
.pay-act__note { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; }
.pass-enter { margin-top: var(--space-6); text-align: center; }
.pass-enter__panel { margin-top: var(--space-3); text-align: left; }
.pay-back { display: block; margin: var(--space-8) auto 0; }

@media (prefers-reduced-motion: reduce) {
  .hub-gate__chime, .saju-gate__chime, .shrine-bg__cloth i, .shrine-bg__candle { animation: none !important; }
  .saju-gate__leaf { transition: none; }
  .saju-gate.is-closed .saju-gate__leaf--l { transform: rotateY(-74deg); }   /* 움직임 줄이기: 처음부터 열린 대문 */
  .saju-gate.is-closed .saju-gate__leaf--r { transform: rotateY(74deg); }
  .ritual--saju:is([data-stage="rung"], [data-stage="gongsu"]) .wonguk--rice .wonguk__char b { animation: none; opacity: 1; }
  .bell__icon, .bell__ring { animation: none !important; }
  .ritual--saju[data-stage="gongsu"] .gongsu, .ohaeng__bar i { animation: none; }
}

/* ───────── (14-6 성능, 개발 담당 — 디자인 담당 확인 필요) ─────────
   입구 첫 화면 아래쪽(지금까지·책 안내·묻고 답하기·바닥글)은 화면 가까이 올 때 배치한다.
   첫 배치(Layout)가 360px·CPU 4배에서 약 1.2~1.5초 걸렸고, 대부분이 이 아래쪽 글이었다. 보이는 모양은 그대로다. */
.hub > .so-far,
.hub > .book-card,
.hub > .faq,
.hub > .hub-foot {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

/* ═════════ 15단계 G1 — 페이앱 결제 (template 안 · test·live에서만). 명세: design/strange-oracle.md 「15단계」 ═════════
   14단계 결제 전 화면(.pay-*)의 언어를 그대로 잇는다: 얇은 선 구획, 청동 번호 원, sans 작은 글, 촛불색은 기다림·주의에만 */

/* 결제 전 화면: 3 결제 방법·판매자 */
.pay-method__seller { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-left: 2px solid var(--accent-line); font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-strong); word-break: keep-all; overflow-wrap: anywhere; }

/* 7 결제하기: 같은 탭 <button> (옛 새 탭 아이콘 .pay-buy__ext 없음) */
.pay-buy[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* 이미 열려 있음: .pay-act.is-opened → 동의·버튼·준비 중 줄을 숨기고 안내 상자만 */
.pay-opened { display: none; }
.pay-act.is-opened > :not(.pay-opened) { display: none; }
.pay-act.is-opened .pay-opened { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); background: var(--c-surface-1); text-align: center; }
.pay-opened__icon { width: 24px; height: 24px; color: var(--accent); }
.pay-opened__text { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-strong); word-break: keep-all; }

/* 판매자 정보 줄 (버튼 아래, 조용하게). dt·dd 두 칸, 긴 주소는 줄바꿈 */
.pay-seller { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--c-line); font-family: var(--font-sans); }
.pay-seller__title { margin-bottom: var(--space-2); font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-muted); }
.pay-seller__list { display: grid; gap: var(--space-1); margin: 0; }
.pay-seller__row { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: var(--space-2); font-size: var(--fs-xs); line-height: 1.55; }
.pay-seller__row.is-hidden { display: none; }
.pay-seller__row dt { color: var(--c-text-faint); word-break: keep-all; }
.pay-seller__row dd { margin: 0; min-width: 0; color: var(--c-text-muted); word-break: keep-all; overflow-wrap: anywhere; }
.pay-seller__legal { gap: 0 var(--space-3); margin-top: var(--space-2); }
.pay-seller__legal a { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* ── 결제 확인 (#screen-paycheck) · 팝업 (#screen-paypopup) ── 가운데 정렬 한 단: 봉인 표지 + 한 줄 + 버튼 */
.paycheck, .paypopup { text-align: center; }
.paycheck > .pay-band { text-align: left; }
.paycheck [data-when] { display: none; }
.paycheck[data-state="wait"] [data-when~="wait"],
.paycheck[data-state="checking"] [data-when~="checking"],
.paycheck[data-state="late"] [data-when~="late"],
.paycheck[data-state="cancelled"] [data-when~="cancelled"],
.paycheck[data-state="noreq"] [data-when~="noreq"],
.paycheck[data-state="busy"] [data-when~="busy"],
.paycheck[data-state="offline"] [data-when~="offline"],
.paycheck[data-state="sdkfail"] [data-when~="sdkfail"] { display: block; }
.paycheck[data-state="wait"] .btn[data-when~="wait"],
.paycheck[data-state="checking"] .btn[data-when~="checking"],
.paycheck[data-state="late"] .btn[data-when~="late"],
.paycheck[data-state="cancelled"] .btn[data-when~="cancelled"],
.paycheck[data-state="noreq"] .btn[data-when~="noreq"],
.paycheck[data-state="busy"] .btn[data-when~="busy"],
.paycheck[data-state="offline"] .btn[data-when~="offline"],
.paycheck[data-state="sdkfail"] .btn[data-when~="sdkfail"] { display: flex; }
.paycheck [data-when].is-hidden { display: none !important; }     /* 문의처가 비면 JS가 숨김 */
.paycheck .btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* 봉인 표지 96px: 바깥 점선 고리 + 책 문양. 상태별 색 */
.paycheck__seal { position: relative; width: 96px; height: 96px; margin: var(--space-8) auto var(--space-5); color: var(--accent); }
.paycheck__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.paycheck__glyph { position: absolute; inset: 28px; width: 40px; height: 40px; filter: drop-shadow(0 0 8px var(--accent-glow)); }
.paycheck[data-state="checking"] .paycheck__ring { animation: paycheck-turn 6s linear infinite; }
.paycheck[data-state="checking"] .paycheck__glyph { animation: moon-breathe 2.4s ease-in-out infinite; }
.paycheck:is([data-state="late"], [data-state="busy"], [data-state="offline"], [data-state="sdkfail"]) .paycheck__seal { color: oklch(0.78 0.13 75); }   /* 시험 띠(.pay-band)와 같은 호박색 계열 */
.paycheck:is([data-state="cancelled"], [data-state="noreq"]) .paycheck__seal { color: var(--c-text-faint); }
.paycheck:is([data-state="cancelled"], [data-state="noreq"]) .paycheck__glyph { filter: none; }
.paycheck__seal--done .paycheck__glyph { animation: moon-breathe 3.2s ease-in-out infinite; }
@keyframes paycheck-turn { to { transform: rotate(360deg); } }

.paycheck__title { font-size: var(--fs-xl); line-height: var(--lh-tight); color: var(--c-text-strong); text-wrap: balance; word-break: keep-all; }
.paycheck__msg { display: grid; gap: var(--space-2); max-width: 22em; margin: var(--space-3) auto 0; }
.paycheck__line { font-size: var(--fs-md); line-height: var(--lh-ui); color: var(--c-text); text-wrap: pretty; word-break: keep-all; }
.paycheck__help { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); word-break: keep-all; }
.paycheck__contact { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); overflow-wrap: anywhere; }
.paycheck__contact b { color: var(--c-text-strong); font-weight: 700; }

/* 로딩: 시간을 약속하지 않는 가는 막대(왕복) */
.paycheck__loading { position: relative; width: 160px; height: 2px; margin: var(--space-5) auto 0; overflow: hidden; border-radius: 2px; background: var(--c-line); }
.paycheck__loading span { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: var(--accent); animation: paycheck-slide 1.4s var(--ease-out) infinite alternate; }
@keyframes paycheck-slide { to { transform: translateX(150%); } }

.paycheck__act { display: grid; gap: var(--space-2); margin-top: var(--space-8); }

/* ── 코드 카드 (dialog) ── 코드를 크게, [복사]는 코드 아래(360에서 한 줄 넘침 방지) */
.code-card__body { text-align: center; }
.code-card__title { text-wrap: balance; }
.code-card__list { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.code-card__item { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border: 1px dashed var(--accent-line); border-radius: var(--radius-lg); background: var(--c-surface-2); }
.code-card__code { display: block; max-width: 100%; font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Consolas, monospace); font-size: clamp(1.0625rem, 5.2vw, var(--fs-xl)); font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; color: var(--c-text-strong); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.code-card__copy { min-width: 7em; }
.code-card__copy.is-copied { border-color: var(--accent); color: var(--accent); }
.code-card__double { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: oklch(0.84 0.12 85 / 0.12); font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-strong); text-align: left; word-break: keep-all; }
.code-card__double.is-hidden { display: none; }
.code-card__text { line-height: var(--lh-ui); text-align: left; word-break: keep-all; }
.code-card__tab { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-faint); text-align: left; word-break: keep-all; }
/* (21단계) 카카오 로그인 버튼 — 카카오 디자인 가이드: 바탕 #FEE500 · 말풍선 #000 · 글자 #000 85% · 모서리 12px */
.btn-kakao { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--tap-min, 48px); padding: 0 16px; border: 0; border-radius: 12px; background: #FEE500; color: rgba(0, 0, 0, 0.85); font-family: var(--font-sans); font-size: var(--fs-md, 16px); font-weight: 700; cursor: pointer; }
.btn-kakao:focus-visible { outline: 3px solid var(--accent, #fff); outline-offset: 2px; }
.btn-kakao__sym { width: 20px; height: 20px; fill: #000; flex: none; }
.kakao-row, .kakao-link { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.kakao-row__help { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-muted); word-break: keep-all; }
.code-card .kakao-row__help { color: var(--c-text-faint); }
.kakao-row__forget { justify-self: start; font-size: var(--fs-xs); }
/* G5: 코드가 2개 이상이면 코드 상자를 조금 좁혀 360×640에서도 [책 읽으러 가기]까지 스크롤 없이 보이게 한다(3개 이상은 기존대로 dialog 안 스크롤) */
.code-card__body:has(.code-card__list > li + li) { gap: var(--space-2); padding-top: var(--space-5); }
.code-card__list:has(> li + li) { gap: var(--space-2); }
.code-card__list:has(> li + li) .code-card__item { padding-block: var(--space-2); }
/* G5: 결제창 팝업 안에서는 상단 막대(입구·내 정보 지우기)를 숨긴다 — 누를 일이 없고 팝업 탭의 sessionStorage를 건드리지 않게(design 15단계 4절) */
body:has(#screen-paypopup.is-active) .topbar { display: none; }

/* ── 목차의 "내 열람 코드 보기" (책 카드 공유 위, 작은 글 링크) ── */
.book-home__code { margin-top: var(--space-6); text-align: center; }
.book-home__code.is-hidden { display: none; }
.book-home__code-btn svg { width: 18px; height: 18px; flex: none; }

/* ── 내 정보 지우기: 결제 확인 중 경고 한 줄 (payreq 있을 때만) ── */
.dialog__warn { padding-left: var(--space-2); border-left: 2px solid oklch(0.84 0.12 85 / 0.8); color: var(--c-text); }
.dialog__warn.is-hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .paycheck[data-state="checking"] .paycheck__ring, .paycheck .paycheck__glyph, .paycheck__seal--done .paycheck__glyph { animation: none; }
  .paycheck__loading span { animation: none; width: 100%; opacity: 0.5; }
}

/* ══════════════════════════════════════════════════════════════════════════
   16단계 친구 궁합 지도 (H1 · 2026-10-17). 명세: design/strange-oracle.md 「16단계」
   - 마크업은 index.html <template data-js="map-tpl"> 안(map:on 구획). off 배포판에는 이 스타일이 쓰일 DOM이 없다.
   - 좌표계: 외접원 반지름 100, 무대 viewBox "-130 -130 260 245". 친구 아이콘 지름 16 단위 고정(--map-d, 키우지 않음).
   - 색: 축 5개·띠 4개 모두 명도 0.84·채도 0.10 고정, hue만 다름(동명도). 낮은 띠도 같은 밝기(깎아 보이지 않게).
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --map-d: 16;                 /* 아이콘 지름(좌표 단위) — map.js 상수와 같아야 함 */
  --map-vw: 260;               /* 무대 가로(좌표 단위) */
  --map-vh: 245;               /* 무대 세로(좌표 단위) */
  --map-stage-max: 360px;      /* 480px 화면에서도 무대는 360px까지만 */
  --map-label-fs: 11px;        /* 지도 위 이름표 */
  --map-axis-fs: 12px;         /* 꼭짓점 이름 */
}
/* 축 색 (0 act · 1 talk · 2 heart · 3 order · 4 free). JS는 data-axis="N"과 --k(지연용)를 넣는다 */
[data-axis="0"] { --axis-h: var(--hue-gold); }
[data-axis="1"] { --axis-h: var(--hue-ice); }
[data-axis="2"] { --axis-h: var(--hue-candle); }
[data-axis="3"] { --axis-h: var(--hue-forest); }
[data-axis="4"] { --axis-h: var(--hue-moon); }
/* 띠 색 (0 = 90 이상 … 3 = 59 이하). 같은 밝기, hue만 다름 */
[data-band="0"] { --band-h: var(--hue-gold); }
[data-band="1"] { --band-h: var(--hue-jade); }
[data-band="2"] { --band-h: var(--hue-moon); }
[data-band="3"] { --band-h: var(--hue-ice); }

/* ───────── 상태 표시: data-state ↔ data-when (보이는 쪽은 원래 display 유지) ───────── */
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="locked"] [data-when]:not([data-when~="locked"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="locked-join"] [data-when]:not([data-when~="locked-join"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="create"] [data-when]:not([data-when~="create"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="view"] [data-when]:not([data-when~="view"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="join"] [data-when]:not([data-when~="join"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="joined"] [data-when]:not([data-when~="joined"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="birth"] [data-when]:not([data-when~="birth"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="young"] [data-when]:not([data-when~="young"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="down"] [data-when]:not([data-when~="down"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="loading"] [data-when]:not([data-when~="loading"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="invited"] [data-when]:not([data-when~="invited"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="mine"] [data-when]:not([data-when~="mine"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="closed"] [data-when]:not([data-when~="closed"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="form"] [data-when]:not([data-when~="form"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="sending"] [data-when]:not([data-when~="sending"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="unsure"] [data-when]:not([data-when~="unsure"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="ready"] [data-when]:not([data-when~="ready"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="empty"] [data-when]:not([data-when~="empty"]),
:is(.map-card, .map-invite, .map-consent, .map-screen, .map-friend)[data-state="notfound"] [data-when]:not([data-when~="notfound"]) { display: none !important; }
.map-consent[data-role="owner"] [data-role-when="friend"],
.map-consent[data-role="friend"] [data-role-when="owner"] { display: none !important; }

/* ───────── 자리(slot) ───────── */
.map-slot[hidden] { display: none; }
.map-slot--hub { margin-bottom: var(--space-3); }
.map-slot--hub:has(> .map-hub-link) { display: flex; justify-content: flex-end; }
.map-slot--finale, .map-slot--story { margin-top: var(--space-8); }

/* ───────── 아이콘 원 (지도·순위·고르기·카드 공용) ───────── */
.map-ico {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid oklch(0.84 0.1 var(--band-h, var(--hue-gold)) / 0.9);
  background: radial-gradient(circle at 35% 30%, oklch(0.3 0.04 var(--band-h, var(--hue-gold))), oklch(0.17 0.03 var(--room-h, 285)));
  color: oklch(0.9 0.08 var(--band-h, var(--hue-gold)));
}
.map-ico svg { width: 66%; height: 66%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.map-ico--sm { width: 28px; border-width: 1px; }
.map-ico--md { width: 40px; }
.map-ico--lg { width: 52px; }

/* ───────── ② 지도 카드 ───────── */
.map-card {
  position: relative; display: grid; justify-items: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid var(--accent-line); border-radius: var(--radius-xl);
  background: radial-gradient(120% 70% at 50% 0%, var(--accent-soft), transparent 70%), var(--c-surface-1);
  text-align: center; overflow: hidden;
}
.map-card > .btn, .map-card > .map-block, .map-card > .map-down, .map-card > .map-birth, .map-card > .map-fold { justify-self: stretch; }
.map-card__emblem { width: 72px; height: 72px; }
.map-card__emblem svg { width: 100%; height: 100%; overflow: visible; }
.map-card__pent { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.map-card__pent--in { stroke: var(--accent-line); stroke-width: 1.2; }
.map-card__dot { fill: var(--accent); }
.map-card__dot--f { fill: oklch(0.84 0.1 var(--hue-ice)); animation: map-twinkle 3.6s var(--ease-in-out) infinite; }
.map-card__dot--f:nth-of-type(3) { fill: oklch(0.84 0.1 var(--hue-candle)); animation-delay: -1.2s; }
.map-card__dot--f:nth-of-type(4) { fill: oklch(0.84 0.1 var(--hue-forest)); animation-delay: -2.4s; }
.map-card__eyebrow { margin-top: calc(-1 * var(--space-1)); }
.map-card__title { font-size: var(--fs-xl); line-height: var(--lh-tight); color: var(--c-text-strong); text-wrap: balance; }
.map-card__text { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); word-break: keep-all; text-wrap: pretty; }
.map-card__text b { color: var(--c-text-strong); }
.map-card__host { display: flex; align-items: center; gap: var(--space-3); text-align: left; }
.map-card__loading { justify-self: stretch; height: 3px; border-radius: 2px; background: var(--c-line); overflow: hidden; }
.map-card__loading span { display: block; width: 40%; height: 100%; background: var(--accent); animation: map-load 1.4s var(--ease-in-out) infinite; }
.map-birth { display: grid; gap: var(--space-2); text-align: left; }
.map-birth__input { flex: 1 1 auto; min-width: 0; letter-spacing: 0.04em; }

/* 접힌 칸 (열람 키 넣기·삭제 코드 넣기) — pass-enter와 같은 언어 */
.map-fold { text-align: center; }
.map-fold + .map-fold { margin-top: calc(-1 * var(--space-2)); }
.map-fold__toggle { font-size: var(--fs-sm); min-height: var(--tap-min); }
.map-fold__toggle[aria-expanded="true"] .receipt-toggle__caret { transform: rotate(180deg); }
.map-fold__panel { display: grid; gap: var(--space-2); margin-top: var(--space-2); text-align: left; }
.map-fold__panel.is-hidden { display: none; }

/* 막힘·안내 상자, 지도 쉼 */
.map-block { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-2); text-align: left; }
.map-block__text { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); word-break: keep-all; }
.map-block--warn { border-style: dashed; border-color: oklch(0.84 0.12 85 / 0.6); background: oklch(0.84 0.12 85 / 0.1); }
.map-down { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border: 1px dashed oklch(0.84 0.12 85 / 0.6); border-radius: var(--radius-lg); background: oklch(0.84 0.12 85 / 0.1); text-align: left; }
.map-down__text { flex: 1 1 14em; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-strong); word-break: keep-all; }

/* ───────── ③ 초대 띠 · ④ 입구 링크 ───────── */
.map-invite {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--accent-soft), transparent), var(--c-surface-1);
  font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.45; color: var(--c-text-strong);
  animation: map-rise var(--dur-slow) var(--ease-out) both;
}
.map-invite__text { flex: 1 1 0; min-width: 0; word-break: keep-all; }
.map-invite__text b { color: var(--accent); }
.map-invite__go { margin-left: auto; font-size: var(--fs-sm); }
.map-invite[data-state="closed"], .map-invite[data-state="down"] { border-style: dashed; background: var(--c-surface-1); color: var(--c-text-muted); }
.map-hub-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--accent-line); border-radius: var(--radius-pill);
  background: var(--c-surface-1); color: var(--c-text-strong); font-family: var(--font-sans); font-size: var(--fs-sm); cursor: pointer;
}
.map-hub-link svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 9; stroke-linejoin: round; }
.map-hub-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ───────── ⑤ 동의 화면 ───────── */
.map-consent.is-active { display: grid; gap: var(--space-5); align-content: start; }
.map-field { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.map-field__label { padding: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-strong); }
.map-field__help { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-muted); word-break: keep-all; }
.map-nick { position: relative; }
.map-nick__input { width: 100%; padding-right: 3.5em; }
.map-nick__input[aria-invalid="true"] { border-color: var(--c-danger); box-shadow: 0 0 0 1px var(--c-danger); }
.map-nick__count { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-faint); pointer-events: none; }
.map-nick__error { font-family: var(--font-sans); font-size: var(--fs-sm); }
.map-icons__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.map-icons__opt { position: relative; display: grid; place-items: center; min-height: var(--tap); cursor: pointer; }
.map-icons__opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.map-icons__opt .map-ico { width: min(44px, 100%); border-color: var(--c-line-strong); color: var(--c-text-muted); background: var(--c-surface-1); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast); }
.map-icons__opt input:checked + .map-ico { border-color: var(--accent); border-width: 2px; color: var(--c-text-strong); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 18px var(--accent-glow); transform: scale(1.06); }
.map-icons__opt input:focus-visible + .map-ico { outline: 2px solid var(--accent); outline-offset: 3px; }
.map-notice { display: grid; margin: 0; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-1); overflow: hidden; }
.map-notice__row { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.map-notice__row + .map-notice__row { border-top: 1px solid var(--c-line); }
.map-notice__row dt { font-weight: 700; color: var(--c-text-strong); word-break: keep-all; }
.map-notice__row dd { margin: 0; color: var(--c-text-muted); word-break: keep-all; }
.map-notice__row--send { background: var(--accent-soft); }
.map-notice__row--send dd { color: var(--c-text); }
.map-notice__arch { display: block; color: var(--c-text-strong); }
.map-optional { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); word-break: keep-all; }
.map-agree { align-items: flex-start; }
.map-agree span { word-break: keep-all; }
.map-consent__act { display: grid; gap: var(--space-2); }
:is(.map-consent, .map-screen, .map-friend, .map-card, .map-key, .map-pop) .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.map-send[aria-busy="true"] { position: relative; color: transparent; }
.map-send[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2px solid var(--c-on-accent); border-right-color: transparent; border-radius: 50%; animation: map-spin 0.8s linear infinite; }

/* ───────── ⑥ 지도 화면 ───────── */
.map-screen.is-active, .map-friend.is-active { display: grid; gap: var(--space-5); align-content: start; }
.map-screen__head { padding-bottom: 0; text-align: center; }
.map-screen__count { margin-top: var(--space-1); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); }
.map-screen__count [data-js="map-count"] { color: var(--accent); font-weight: 700; }

.map-stage { position: relative; width: 100%; max-width: var(--map-stage-max); margin-inline: auto; aspect-ratio: 260 / 245; }
.map-stage__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-stage__pent { fill: oklch(0.84 0.1 85 / 0.05); stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--accent-glow)); }
.map-stage__rings path { fill: none; stroke: var(--accent-line); stroke-width: 0.7; stroke-dasharray: 2 3; }
.map-stage__spokes path { fill: none; stroke: var(--c-line); stroke-width: 0.6; }
.map-stage__verts circle { fill: oklch(0.84 0.1 var(--axis-h)); }
/* 좌표 → % (좌표 원점은 무대 왼쪽 위에서 130, 130) */
.map-axis, .map-node { position: absolute; left: calc((var(--x) + 130) / 260 * 100%); top: calc((var(--y) + 130) / 245 * 100%); }
.map-axis {
  margin: 0; max-width: 6.5em; padding: 2px 6px; border-radius: var(--radius-pill);
  background: oklch(0.14 0.03 285 / 0.82);
  font-family: var(--font-sans); font-size: var(--map-axis-fs); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  color: oklch(0.88 0.08 var(--axis-h)); text-align: center; white-space: nowrap; pointer-events: none;
}
.map-axis--top { transform: translate(-50%, -100%); }
.map-axis--bottom { transform: translate(-50%, 0); }
.map-nodes { position: absolute; inset: 0; }
.map-node {
  display: block; width: calc(var(--map-d) / var(--map-vw) * 100%); aspect-ratio: 1; margin: 0; padding: 0; border: 0; background: none;
  transform: translate(-50%, -50%); cursor: pointer; z-index: 1; -webkit-tap-highlight-color: transparent;
}
.map-node::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; } /* 누르는 영역(아이콘보다 넓게) */
.map-node .map-ico { width: 100%; border-width: 1.5px; box-shadow: 0 0 8px oklch(0.84 0.1 var(--band-h, 85) / 0.35); }
.map-node .map-ico svg { width: 70%; height: 70%; stroke-width: 2.4; }
.map-node__name {
  position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  max-width: 4.6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-sans); font-size: var(--map-label-fs); line-height: 1.3; color: var(--c-text-strong);
  text-shadow: 0 0 3px oklch(0.1 0.03 285), 0 0 6px oklch(0.1 0.03 285); pointer-events: none;
}
.map-node.is-label-hidden .map-node__name { display: none; }
/* 이름표 자리 4곳(아래 b → 위 t → 오른쪽 r → 왼쪽 l 차례로 시도, 규칙은 design 「16단계」 5절). 기본 = 아래 */
.map-node[data-label="t"] .map-node__name { top: auto; bottom: calc(100% + 1px); }
.map-node[data-label="r"] .map-node__name { top: 50%; left: calc(100% + 3px); transform: translateY(-50%); }
.map-node[data-label="l"] .map-node__name { top: 50%; left: auto; right: calc(100% + 3px); transform: translateY(-50%); }
.map-node:is(:focus-visible, .is-selected) { z-index: 3; outline: none; }
.map-node:is(:focus-visible, .is-selected) .map-ico { outline: 2px solid var(--c-text-strong); outline-offset: 2px; }
.map-node:is(:focus-visible, .is-selected) .map-node__name { display: block; padding: 0 4px; border-radius: 4px; background: oklch(0.14 0.03 285 / 0.9); }
.map-node--owner { cursor: default; z-index: 2; }
.map-node--owner .map-ico { --band-h: var(--hue-gold); border-width: 2px; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 14px var(--accent-glow); }
.map-node--owner::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; border: 1px solid var(--accent-line); animation: map-halo 4.8s var(--ease-in-out) infinite; pointer-events: none; }
/* 처음 그릴 때(.is-drawn): 선 그리기 0.9초 → 고리 → 아이콘이 순위 차례로(30명이면 약 1.7초에 끝) */
.map-stage.is-drawn .map-stage__pent { stroke-dasharray: 1; animation: map-draw 900ms var(--ease-out) both; }
.map-stage.is-drawn .map-stage__rings, .map-stage.is-drawn .map-stage__spokes { animation: map-fade 700ms var(--ease-out) 300ms both; }
.map-stage.is-drawn .map-axis { animation: map-fade 500ms var(--ease-out) calc(400ms + var(--k) * 80ms) both; }
.map-stage.is-drawn .map-node:not(.map-node--owner) { animation: map-pop 420ms var(--ease-spring) calc(650ms + min(var(--i, 0), 30) * 35ms) both; }
.map-screen[data-state="loading"] .map-stage { opacity: 0.5; }
.map-hint { margin-top: calc(-1 * var(--space-3)); font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-muted); text-align: center; word-break: keep-all; }
.map-empty { text-align: center; }
.map-empty__text { font-size: var(--fs-md); color: var(--c-text-strong); word-break: keep-all; }
.map-share { display: grid; justify-items: center; gap: var(--space-2); }
.map-share > .btn { justify-self: stretch; }
.map-share__closed { display: none; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; word-break: keep-all; }
.map-share.is-closed > .btn, .map-share.is-closed > .share-links { display: none; }
.map-share.is-closed .map-share__closed { display: block; }

/* 순위 */
.map-rank__title { margin-bottom: var(--space-2); font-size: var(--fs-md); color: var(--c-text-strong); }
.map-rank__list, .map-pick__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.map-rank__row {
  display: grid; grid-template-columns: 1.8em 28px minmax(0, 1fr) auto; grid-template-areas: "num ico name score" "num ico band score";
  align-items: center; column-gap: var(--space-3); width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface-1);
  color: var(--c-text); text-align: left; cursor: pointer; font-family: var(--font-sans);
}
.map-rank__row:hover, .map-rank__row:focus-visible { border-color: var(--accent-line); background: var(--c-surface-2); }
.map-rank__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-rank__num { grid-area: num; font-family: var(--font-latin); font-size: var(--fs-sm); color: var(--c-text-faint); text-align: center; }
.map-rank__row .map-ico { grid-area: ico; }
.map-rank__name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); font-weight: 700; color: var(--c-text-strong); }
.map-rank__band { grid-area: band; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: oklch(0.84 0.1 var(--band-h, 85)); }
.map-rank__score { grid-area: score; font-family: var(--font-latin); font-size: var(--fs-lg); color: var(--c-text-strong); }
.map-pick__list .map-rank__row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "ico name score"; }

.map-keep { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--c-text-muted); text-align: center; word-break: keep-all; }
.map-manage { border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface-1); }
.map-manage__sum { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); padding: 0 var(--space-4); font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-strong); cursor: pointer; list-style: none; }
.map-manage__sum::-webkit-details-marker { display: none; }
.map-manage[open] .receipt-toggle__caret { transform: rotate(180deg); }
.map-manage__list { display: grid; border-top: 1px solid var(--c-line); }
.map-manage__item { min-height: var(--tap); padding: 0 var(--space-4); border: 0; background: none; color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.map-manage__item + .map-manage__item { border-top: 1px solid var(--c-line); }
.map-manage__item:hover, .map-manage__item:focus-visible { background: var(--c-surface-2); color: var(--c-text-strong); }
.map-manage__item--danger { color: var(--c-danger); }
.map-manage__item.is-hidden { display: none; }
.map-back { justify-self: center; }

/* ───────── ⑦·⑨ 궁합 묶음 (친구 카드·팝업 공용) ───────── */
.map-match { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.map-match--card { padding: var(--space-6) var(--space-5); border: 1px solid oklch(0.84 0.1 var(--band-h, 85) / 0.5); border-radius: var(--radius-xl); background: radial-gradient(100% 60% at 50% 0%, oklch(0.84 0.1 var(--band-h, 85) / 0.14), transparent 70%), var(--c-surface-1); }
.map-match__pair { display: flex; align-items: center; gap: var(--space-2); }
.map-match__link { width: 56px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, oklch(0.84 0.1 var(--band-h, 85)), transparent); box-shadow: 0 0 8px oklch(0.84 0.1 var(--band-h, 85) / 0.6); }
.map-match--card .map-match__name { display: none; }
.map-match__name { font-size: var(--fs-lg); line-height: var(--lh-tight); color: var(--c-text-strong); overflow-wrap: anywhere; }
.map-match__arch { margin-top: calc(-1 * var(--space-2)); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.map-match__score { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.map-match__score b { font-family: var(--font-latin); font-size: var(--fs-display); line-height: 1; color: var(--c-text-strong); text-shadow: 0 0 18px oklch(0.84 0.1 var(--band-h, 85) / 0.5); }
.map-match__band { padding: 2px var(--space-3); border: 1px solid oklch(0.84 0.1 var(--band-h, 85) / 0.7); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-sm); color: oklch(0.88 0.08 var(--band-h, 85)); white-space: nowrap; }
.map-bars { display: grid; gap: var(--space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.map-bars__row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 2.2em; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-xs); }
.map-bars__name { color: var(--c-text-muted); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-bars__track { height: 8px; border-radius: 4px; background: var(--c-surface-3); overflow: hidden; }
.map-bars__fill { display: block; width: calc(var(--v) * 1%); height: 100%; border-radius: inherit; background: oklch(0.84 0.1 var(--axis-h) / 0.75); transform-origin: left center; animation: map-bar 700ms var(--ease-out) calc(var(--k) * 70ms) both; }
.map-bars__val { font-family: var(--font-latin); font-size: var(--fs-sm); color: var(--c-text); text-align: right; }
.map-bars__row.is-top .map-bars__name { color: var(--c-text-strong); font-weight: 700; }
.map-bars__row.is-top .map-bars__fill { background: oklch(0.84 0.1 var(--axis-h)); box-shadow: 0 0 8px oklch(0.84 0.1 var(--axis-h) / 0.6); }
.map-match__pairline { font-size: var(--fs-md); line-height: var(--lh-read); color: var(--c-text-strong); word-break: keep-all; text-wrap: pretty; }
.map-match__lines { display: grid; gap: var(--space-2); width: 100%; margin: 0; text-align: left; }
.map-match__lines div { padding: var(--space-2) var(--space-3); border-left: 2px solid var(--accent-line); }
.map-match__lines dt { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.map-match__lines dd { margin: 2px 0 0; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); word-break: keep-all; }
.map-match__deep { font-size: var(--fs-sm); }
.map-match__deep.is-hidden { display: none; }
.map-match--pop { gap: var(--space-2); }
.map-pop .dialog__body, .map-pick .dialog__body { padding-top: var(--space-5); }
.map-pop .dialog__actions { margin-top: var(--space-2); }
.map-pop__erase { color: var(--c-danger); }
.map-pop__erase.is-hidden { display: none; }

/* 삭제 코드 카드 */
.map-del { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-5); border: 1px dashed var(--accent-line); border-radius: var(--radius-xl); background: var(--c-surface-1); text-align: center; }
.map-del > .code-card__item, .map-del__erase { justify-self: stretch; }
.map-del__title { font-size: var(--fs-lg); color: var(--c-text-strong); }
.map-del__text { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); text-align: left; word-break: keep-all; }
.map-del__erase { color: var(--c-danger); }

/* ───────── ⑧ 열람 키 카드 ───────── */
.map-key__code, .map-del .code-card__code { font-size: clamp(0.9375rem, 4.4vw, 1.125rem); overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.map-key__facts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; text-align: left; }
.map-key__facts li { position: relative; padding-left: var(--space-5); font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); word-break: keep-all; }
.map-key__facts li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.map-key__facts .map-key__warn { padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6); border-radius: var(--radius-md); background: oklch(0.84 0.12 85 / 0.12); color: var(--c-text-strong); }
.map-key__facts .map-key__warn::before { left: 10px; top: calc(var(--space-2) + 0.6em); background: oklch(0.84 0.14 85); }
.map-key__invite { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--c-line); text-align: left; }
.map-key__url { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--c-surface-2); font-family: var(--font-mono, ui-monospace, Consolas, monospace); font-size: var(--fs-xs); line-height: 1.5; color: var(--c-text-muted); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.map-key__share { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.map-key__ack { margin-top: var(--space-1); padding: var(--space-3); border: 1px solid var(--accent-line); border-radius: var(--radius-md); background: var(--accent-soft); text-align: left; }
.map-key__ack span { font-weight: 700; color: var(--c-text-strong); }

/* 내 정보 지우기 대화의 선택 칸 */
.clear-map { display: grid; gap: var(--space-2); }
.clear-map:not(:has(.clear-map__opt:not(.is-hidden))) { display: none; }
.clear-map__opt { align-items: flex-start; font-size: var(--fs-sm); text-align: left; word-break: keep-all; }

/* ───────── 움직임 ───────── */
@keyframes map-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes map-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes map-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes map-halo { 0%, 100% { transform: scale(0.9); opacity: 0.25; } 50% { transform: scale(1.15); opacity: 0.7; } }
@keyframes map-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes map-twinkle { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes map-rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes map-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes map-spin { to { transform: rotate(360deg); } }
body.is-reading .map-node--owner::after, body.is-reading .map-card__dot--f { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .map-stage.is-drawn :is(.map-stage__pent, .map-stage__rings, .map-stage__spokes, .map-axis, .map-node),
  .map-node--owner::after, .map-card__dot--f, .map-bars__fill, .map-invite, .map-card__loading span { animation: none !important; }
  .map-stage.is-drawn .map-stage__pent { stroke-dasharray: none; }
  .map-card__loading span { width: 100%; opacity: 0.5; }
  .map-send[aria-busy="true"]::after { animation: none; border-right-color: var(--c-on-accent); opacity: 0.6; }
  .map-icons__opt .map-ico { transition: none; }
  .map-icons__opt input:checked + .map-ico { transform: none; }
}

/* ═════════ (17단계 I1) 일곱 문: 방마다 다른 문 (결정 87, specs 17-8) ═════════
   한 방의 문은 세 자리에서 같은 결로 보인다: ① 입구 작은 문(.door) ② 입구 고대 문(.hub-gate, 다음 방) ③ 결과 뒤 다음 문(.next-door)
   + 문 열림(.sigil-rise) 막에 같은 무늬. 모두 [data-room]만으로 고른다(JS 변경 없음).
   가볍게: 방마다 단색 그라데이션 몇 겹 + 테두리 모양만. filter·큰 그림자·blur 새로 0. 무늬는 문 윗부분·문틀에만(글자 자리 비움) */
:root { --door-stone: oklch(0.34 0.02 70); --door-bark: oklch(0.86 0.02 90); --door-bark-mark: oklch(0.26 0.02 60); }
.door__frame::after, .next-door__leaves::after, .hub-gate__door::after { content: none; position: absolute; pointer-events: none; }
.door[data-room]:not(.door--gate) .door__relief { opacity: 0.34; }
.door.is-locked[data-room] .door__relief { opacity: 0.16; }

/* ── 실루엣: 문 위쪽 모양 (작은 문 · 다음 문 · 고대 문이 같은 결) ── */
.door[data-room="ogham"]   { --door-r: 9px; }
.door[data-room="star"]    { --door-r: var(--arch); }
.door[data-room="decan"]   { --door-r: 3px; border-top-width: 3px; }
.door[data-room="tzolkin"] { --door-r: 2px; }
.door[data-room]:is([data-room="ogham"], [data-room="star"], [data-room="decan"], [data-room="tzolkin"]) { border-radius: var(--door-r) var(--door-r) var(--radius-lg) var(--radius-lg); }
.hub .door[data-room]:is([data-room="ogham"], [data-room="star"], [data-room="decan"], [data-room="tzolkin"])::before { border-radius: max(0px, calc(var(--door-r) - 4px)) max(0px, calc(var(--door-r) - 4px)) calc(var(--radius-lg) - 4px) calc(var(--radius-lg) - 4px); }
/* Ⅵ 룬: 바닷가에 선 돌 — 좌우가 다른 둥근 돌머리 / Ⅶ 시빌라: 낮고 넓은 동굴 입 — 바위처럼 비대칭 */
.door[data-room="rune"], .hub .door[data-room="rune"]::before { border-radius: 58% 24% var(--radius-lg) var(--radius-lg) / 30% 13% var(--radius-lg) var(--radius-lg); }
.door[data-room="sibyl"], .hub .door[data-room="sibyl"]::before { border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 17% 21% var(--radius-lg) var(--radius-lg); }

/* ── Ⅱ 오검: 자작나무 껍질 문. 위 띠 = 흰 껍질과 가로 껍질눈, 왼쪽 문설주 = 줄기선과 오검 획 ── */
.door[data-room="ogham"] { --motif:
  linear-gradient(var(--bronze-hi), var(--bronze-hi)) 10px 0 / 1.5px 100% no-repeat,
  repeating-linear-gradient(180deg, var(--bronze-hi) 0 1.5px, transparent 1.5px 7px) 4px 14px / 6px 52% no-repeat,
  repeating-linear-gradient(180deg, transparent 0 4px, var(--bronze-hi) 4px 5.5px, transparent 5.5px 13px) 11.5px 22px / 6px 40% no-repeat; }
.door[data-room="ogham"] .door__frame::after,
.next-door[data-room="ogham"] .next-door__leaves::after,
.hub-gate[data-room="ogham"] .hub-gate__door::after {
  content: ""; inset: 0 0 auto; height: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, var(--door-bark-mark) 6px 11px, transparent 11px 17px, var(--door-bark-mark) 17px 19px, transparent 19px 27px) 0 3px / 100% 2px no-repeat, var(--door-bark);
  opacity: 0.55;
}
.next-door[data-room="ogham"] .next-door__leaves::after, .hub-gate[data-room="ogham"] .hub-gate__door::after { z-index: 2; height: 16px; background-position: 0 6px, 0 0; }
.door.is-locked[data-room="ogham"] .door__frame::after { opacity: 0.25; }

/* ── Ⅲ 별: 달의 집을 세는 밤하늘 아치. 안쪽 테 = 하나씩 센 별(점선) ── */
.door[data-room="star"]::before { border: 2px dotted oklch(0.9 0.05 var(--accent-h) / 0.42); }
.door.is-locked[data-room="star"]::before { border-color: oklch(0.9 0.03 var(--accent-h) / 0.2); }
.next-door[data-room="star"] .next-door__leaves::after,
.hub-gate[data-room="star"] .hub-gate__door::after { content: ""; z-index: 2; inset: 7px; border: 2px dotted oklch(0.92 0.05 var(--accent-h) / 0.55); border-radius: inherit; }

/* ── Ⅳ 데칸: 별시계 문. 두꺼운 상인방 + 위쪽 반원 눈금(부조) + 눈금을 짚는 그림자 바늘 ── */
.door[data-room="decan"] .door__frame::after,
.next-door[data-room="decan"] .next-door__leaves::after,
.hub-gate[data-room="decan"] .hub-gate__door::after {
  content: ""; z-index: 2; left: 50%; top: 4px; width: 1.5px; height: 34%;
  background: linear-gradient(180deg, var(--bronze-hi), transparent);
  transform-origin: 50% 0; rotate: -38deg; transition: rotate 900ms var(--ease-in-out);
}
.next-door[data-room="decan"] .next-door__leaves::after, .hub-gate[data-room="decan"] .hub-gate__door::after {
  width: 2px; height: 40%;
  box-shadow: none;
}
.next-door[data-room="decan"] .next-door__leaves, .hub-gate[data-room="decan"] .hub-gate__door { border-top-width: 6px; }
.next-door[data-room="decan"] .next-door__leaves::before, .hub-gate[data-room="decan"] .hub-gate__door::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: 0; width: 76%; aspect-ratio: 2 / 1; translate: -50% 0; pointer-events: none;
  border-radius: 0 0 999px 999px; opacity: 0.5;
  background: repeating-conic-gradient(from 90deg at 50% 0, var(--bronze-hi) 0 1deg, transparent 1deg 15deg);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 0 78%, #000 79% 100%); mask: radial-gradient(circle at 50% 0, transparent 0 78%, #000 79% 100%);
}
.door[data-room="decan"].is-next .door__frame::after,
.next-door[data-room="decan"]:is(:hover, :focus-visible, .is-opening) .next-door__leaves::after,
.hub-gate[data-room="decan"]:is(:hover, :focus-visible, .is-entering) .hub-gate__door::after { rotate: -12deg; }
.door.is-locked[data-room="decan"] .door__frame::after { opacity: 0.3; }

/* ── Ⅴ 촐킨: 말하는 석판. 계단식 돌 아치(코벨) + 문설주에 점·막대 숫자(사람 모양 없음, 9-1) ── */
.door[data-room="tzolkin"] { --motif:
  repeating-linear-gradient(0deg, transparent 0 10px, var(--bronze-hi) 10px 11px),
  linear-gradient(var(--bronze-hi), var(--bronze-hi)) 5px 34px / 2px 20px no-repeat,
  radial-gradient(circle, var(--bronze-hi) 0 1.6px, transparent 2.1px) 9px 34px / 6px 6px no-repeat,
  radial-gradient(circle, var(--bronze-hi) 0 1.6px, transparent 2.1px) 9px 41px / 6px 6px no-repeat,
  linear-gradient(var(--bronze-hi), var(--bronze-hi)) calc(100% - 5px) 34px / 2px 20px no-repeat,
  radial-gradient(circle, var(--bronze-hi) 0 1.6px, transparent 2.1px) calc(100% - 9px) 37px / 6px 6px no-repeat; }
.door[data-room="tzolkin"] .door__frame::after,
.next-door[data-room="tzolkin"] .next-door__leaves::after,
.hub-gate[data-room="tzolkin"] .hub-gate__door::after {
  --st: var(--door-stone); --sh: 7px;
  content: ""; z-index: 2; inset: 0 0 auto; height: calc(var(--sh) * 3);
  background:
    linear-gradient(var(--st), var(--st)) 0 0 / 36% var(--sh) no-repeat,
    linear-gradient(var(--st), var(--st)) 100% 0 / 36% var(--sh) no-repeat,
    linear-gradient(var(--st), var(--st)) 0 var(--sh) / 24% var(--sh) no-repeat,
    linear-gradient(var(--st), var(--st)) 100% var(--sh) / 24% var(--sh) no-repeat,
    linear-gradient(var(--st), var(--st)) 0 calc(var(--sh) * 2) / 12% var(--sh) no-repeat,
    linear-gradient(var(--st), var(--st)) 100% calc(var(--sh) * 2) / 12% var(--sh) no-repeat;
}
.next-door[data-room="tzolkin"] .next-door__leaves::after, .hub-gate[data-room="tzolkin"] .hub-gate__door::after { --sh: 12px; }
.door.is-locked[data-room="tzolkin"] .door__frame::after { --st: oklch(0.24 0.012 70); }

/* ── Ⅵ 룬: 북쪽 바닷가의 돌 문. 문 윗부분에 비늘 물결 ── */
.door[data-room="rune"] { --motif: radial-gradient(circle at 50% 0, transparent 0 5px, var(--bronze-hi) 5px 6.2px, transparent 6.8px) 0 0 / 14px 9px; }
.next-door[data-room="rune"] .next-door__leaves::after,
.hub-gate[data-room="rune"] .hub-gate__door::after {
  content: ""; z-index: 2; inset: 12% 12% auto; height: 26px; opacity: 0.6;
  background: radial-gradient(circle at 50% 0, transparent 0 7px, var(--bronze-hi) 7px 8.5px, transparent 9px) 0 0 / 20px 13px;
}

/* ── Ⅶ 시빌라: 동굴 입구. 상징을 가운데로 번지는 울림의 파문 ── */
.door[data-room="sibyl"] { --motif: repeating-radial-gradient(circle at 50% 62%, transparent 0 7px, var(--bronze-hi) 7px 8px); }
.next-door[data-room="sibyl"] .next-door__leaves::after,
.hub-gate[data-room="sibyl"] .hub-gate__door::after {
  content: ""; z-index: 2; inset: 0 0 48%; opacity: 0.45;
  background: repeating-radial-gradient(circle at 50% 70%, transparent 0 10px, var(--bronze-hi) 10px 11.5px);
  -webkit-mask: radial-gradient(circle at 50% 70%, #000 30%, transparent 70%); mask: radial-gradient(circle at 50% 70%, #000 30%, transparent 70%);
}

/* ── 다음 문·고대 문의 실루엣 (작은 문과 같은 모양) ── */
.next-door[data-room="ogham"] .next-door__leaves { border-radius: 14px 14px 8px 8px; }
.next-door[data-room="decan"] .next-door__leaves { border-radius: 4px 4px 8px 8px; }
.next-door[data-room="tzolkin"] .next-door__leaves { border-radius: 3px 3px 8px 8px; }
.next-door[data-room="rune"] .next-door__leaves { border-radius: 58% 24% 8px 8px / 32% 14% 8px 8px; }
.next-door[data-room="sibyl"] .next-door__leaves { border-radius: 50% 50% 8px 8px / 18% 22% 8px 8px; }
.next-door[data-room]:is([data-room="ogham"], [data-room="decan"], [data-room="tzolkin"]):focus-visible { border-radius: 10px; }
.hub-gate[data-room="ogham"] .hub-gate__door { border-radius: 12px 12px 4px 4px; }
.hub-gate[data-room="decan"] .hub-gate__door { border-radius: 4px; }
.hub-gate[data-room="tzolkin"] .hub-gate__door { border-radius: 3px 3px 4px 4px; }
.hub-gate[data-room="rune"] .hub-gate__door { border-radius: 58% 24% 4px 4px / 32% 14% 4px 4px; }
.hub-gate[data-room="sibyl"] .hub-gate__door { border-radius: 50% 50% 4px 4px / 18% 22% 4px 4px; }
/* 아치 몰딩 선은 둥근 아치 문(Ⅲ 별)에서만. 다른 모양에서는 선이 문 밖으로 삐져 보이므로 숨긴다 */
.hub-gate[data-room]:is([data-room="ogham"], [data-room="decan"], [data-room="tzolkin"], [data-room="rune"], [data-room="sibyl"]) .hub-gate__arch { display: none; }

/* ── 문 열림 막(8-3): 방의 무늬가 막에 한 번 비친다 (막의 투명도 애니메이션을 그대로 탄다 = 끝나면 사라짐) ── */
.sigil-rise__veil::after { content: ""; position: absolute; inset: 0; opacity: 0.16; pointer-events: none; }
.sigil-rise[data-room="ogham"] .sigil-rise__veil::after { background: linear-gradient(var(--bronze-hi), var(--bronze-hi)) 50% 0 / 2px 100% no-repeat, repeating-linear-gradient(180deg, var(--bronze-hi) 0 2px, transparent 2px 26px) calc(50% - 7px) 0 / 14px 100% no-repeat; }
.sigil-rise[data-room="star"] .sigil-rise__veil::after { background: radial-gradient(circle, var(--bronze-hi) 0 1.5px, transparent 2px) 0 0 / 34px 34px, radial-gradient(circle, var(--bronze-hi) 0 1px, transparent 1.5px) 17px 11px / 46px 46px; }
.sigil-rise[data-room="decan"] .sigil-rise__veil::after { background: repeating-conic-gradient(from 0deg at 50% 42%, var(--bronze-hi) 0 0.8deg, transparent 0.8deg 15deg); }
.sigil-rise[data-room="tzolkin"] .sigil-rise__veil::after { background: repeating-linear-gradient(0deg, transparent 0 22px, var(--bronze-hi) 22px 23px), repeating-linear-gradient(90deg, transparent 0 36px, var(--bronze-hi) 36px 37px); }
.sigil-rise[data-room="rune"] .sigil-rise__veil::after { background: radial-gradient(circle at 50% 0, transparent 0 11px, var(--bronze-hi) 11px 12.5px, transparent 13px) 0 0 / 30px 18px; }
.sigil-rise[data-room="sibyl"] .sigil-rise__veil::after { background: repeating-radial-gradient(circle at 50% 42%, transparent 0 22px, var(--bronze-hi) 22px 23.5px); }

/* ═════════ (17단계 I1) 17-9 넘어온 항목 ═════════ */
/* F6 3차-1: 480px 이상 넓은 화면의 채비 화면 — 버튼 띠를 고지 바로 아래에 붙인다(띠가 화면 맨 아래로 떨어져 생기던 약 260px 빈칸 제거). 내용이 길면 sticky는 그대로 */
@media (min-width: 480px) { .room-input--saju .cta-dock { margin-top: var(--space-6); } }
/* F6 3차-3: 소제목(굵은 글 한 줄만 든 단락) 뒤에서는 소제목이 아니라 그다음 본문 첫 글자를 머리글자로 */
.book-page__body > p.has-dropcap:has(> b:only-child)::first-letter { float: none; margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; }
.book-page__body > p.has-dropcap:has(> b:only-child) + p { text-indent: 0; }
.book-page__body > p.has-dropcap:has(> b:only-child) + p::first-letter {
  float: left; margin: 3px var(--space-2) 0 0;
  font-size: calc(var(--book-line) * 2 - 6px); line-height: calc(var(--book-line) * 2 - 6px); font-weight: 700; color: var(--ink-rubric);
}
/* F6 3차-4: 촛불빛 원이 방 밖으로 나가지 않게 (overflow: clip + paint 격리) */
.shrine-bg { overflow: clip; contain: paint; }
/* H5: 지도 이름표 사이 최소 간격 — 이름표 상자에 좌우 3px·위아래 1px 투명 여백. 겹침 검사(map.js가 상자 크기로 잼)가 이웃 이름표 사이 6px·2px를 지킨다. 글자 폭(4.6em)은 그대로 */
.map-node__name { box-sizing: content-box; padding: 1px 3px; }

/* ═════════ (17단계 I1) 인연의 장 · 첫 줄 · 마음 한 줄 (책 쪽 모양, design 「17단계」 5절) ═════════ */
/* 첫 줄(firstLine): 장 첫 쪽, 장 머리 바로 아래. 들여쓰기 없음, 한 단계 큰 글, 위에 붉은 잉크 짧은 선 하나(장식은 글 바깥 위쪽에만) */
.book-page__body > p.book-first-line { text-indent: 0; padding-top: var(--space-1); font-size: var(--fs-lg); line-height: 1.7; color: var(--ink-strong); text-wrap: pretty; }
.book-page__body > p.book-first-line::before { content: ""; display: block; width: 28px; height: 2px; margin: 0 auto var(--space-3); background: var(--ink-rubric); opacity: 0.7; }
/* 첫 줄이 있으면 머리글자는 첫 줄 뒤 본문에 그대로 둔다(첫 줄 자체에는 머리글자 없음) */
.book-page__body > p.book-first-line.has-dropcap::first-letter { float: none; margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; }
/* 마음 한 줄(heartLine): 장 가운데의 한 장면. 왼쪽 붉은 선 + 작은 머리말, 본문과 같은 크기(오래 읽는 글 크기를 줄이지 않는다) */
.book-heart { margin-block: calc(var(--book-line) / 2); padding: 2px 0 2px var(--space-4); border-left: 2px solid oklch(0.43 0.13 32 / 0.55); text-indent: 0; }
.book-heart__label { display: block; font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-ui); letter-spacing: 0.02em; color: var(--ink-soft); }
.book-heart__text { display: block; margin: 2px 0 0; font-size: var(--fs-read); line-height: var(--book-line); color: var(--ink); }
/* 인연의 장 쪽 머리: 쪽 번호(1~7) + 쪽 이름 */
.yeon-sec__head { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--fs-md); line-height: var(--lh-tight); font-weight: 700; color: var(--ink-strong); text-indent: 0; }
.yeon-sec__num { font-family: var(--font-latin); font-size: var(--fs-sm); color: var(--ink-rubric); }
.yeon-sec__note { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--ink-soft); text-indent: 0; }
/* 6쪽 인연의 시기: 지금 구간 · 다음 구간 두 칸 (시기별 흐름의 점 줄과 같은 결, 잉크 색) */
.yeon-when { display: grid; gap: var(--space-3); margin: 0; padding: 0 0 0 var(--space-5); list-style: none; border-left: 1px dashed var(--ink-line); }
.yeon-when__item { position: relative; }
.yeon-when__item::before { content: ""; position: absolute; left: calc(var(--space-5) * -1 - 4px); top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); }
.yeon-when__item.is-now::before { background: var(--ink-rubric); }
.yeon-when__age { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-ui); color: var(--ink-rubric); }
.yeon-when__text { margin: 2px 0 0; font-size: var(--fs-read); line-height: var(--book-line); color: var(--ink); }
/* 7쪽 인연의 계절: 오행 계절 이름 앞 색 점 하나(배경 무늬 없음) */
.yeon-season__name { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-strong); }
.yeon-season__name::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--el, var(--ink-rubric)); }
/* 결제 전 "받는 것": 새로 더해진 장(인연의 장) 줄. JS가 li에 .pay-list__item--new를 붙이고 이름 뒤에 .pay-list__new(문구 data.js)를 넣는다 */
.pay-list__new { margin-left: var(--space-2); padding: 0 6px; border: 1px solid var(--accent-line); border-radius: 999px; font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1.6; color: var(--c-text); white-space: nowrap; }

/* ═════════ (17단계 I1) 대비 맞춤 (design 「17단계」 1절, 다섯 점 측정에서 4.5:1 아래였던 것) ═════════ */
.capture__eyebrow { color: color-mix(in oklch, var(--accent-dim) 82%, white); }   /* 4.42~4.49 → 4.5 이상 */
.hub-summary { color: var(--c-text-strong); }                                       /* 360px에서 문 뒤 안개빛과 겹쳐 3.76 */
.door__glyph.runic { color: oklch(0.97 0.025 var(--accent-h)); }                    /* 룬 문의 글자 상징: 다른 문의 SVG 상징과 같은 밝기 */

/* ═════════ (17단계 I4) UI 점검에서 고친 것 (design 「17단계 UI 점검」) ═════════ */
.yeon-when { margin-left: 4px; }                         /* 시기 칸 점(7px)이 본문 왼쪽 끝에서 반쯤 잘리던 것 */
.yeon-sec__note { margin-top: var(--space-3); }           /* 안내 한 줄이 위 본문·시기 칸에 붙어 보이던 것 */
.year-span { margin-top: var(--space-1); margin-bottom: var(--space-3); } /* (20단계) 「2027년의 흐름」 기간 한 줄: 아래 본문과 띄움 */
.hub-progress__count { text-shadow: 0 0 3px oklch(0.12 0.03 280 / 0.9), 0 0 1px oklch(0.12 0.03 280); } /* "7/7"이 배경 별 점과 겹칠 때도 글자 테두리가 남게 */


/* ═════════ (18단계 J1) 상품성·전환 개선 — 첫 화면에서도 쓰이는 몫만 (미리보기·새 장·대조표·목차 조각은 style-book.css, 운영자 결정 120) ═════════ */

/* ── 5. 입구 책 카드 상태 (18-5): none·some = 지금 / all(7/7 결제 전) = 청동 테 + 은은한 빛 / owned(결제 뒤) = 잠금 줄·인장 없음(기존 규칙) ── */
.book-card[data-state="all"] { border-color: var(--bronze); box-shadow: 0 0 24px oklch(0.84 0.07 85 / 0.15); }

/* ── 6. 나의 이야기 7/7 결제 전 미리보기 카드 (입구 책 카드와 같은 결, 주 버튼 하나) ── */
.story-preview {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: center;
  margin-top: var(--space-8); padding: var(--space-5) var(--space-4);
  border: 1px solid var(--bronze); border-radius: var(--radius-lg);
  background: radial-gradient(90% 120% at 0% 0%, oklch(0.3 0.05 75 / 0.35), transparent 60%), oklch(0.17 0.035 285 / 0.9);
}
.story-preview[hidden] { display: none; }
.story-preview__cover { position: relative; width: 52px; height: 64px; }
.story-preview__cover svg:first-child { width: 100%; height: 100%; fill: oklch(0.26 0.05 30); stroke: var(--bronze-hi); stroke-width: 1.6; stroke-linejoin: round; }
.story-preview__seal { position: absolute; right: -6px; bottom: 2px; --seal: 24px; }
.story-preview__text { min-width: 0; }
.story-preview__eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--c-text-muted); }
.story-preview__title { margin: 2px 0 var(--space-1); font-size: var(--fs-lg); line-height: var(--lh-tight); color: var(--c-text-strong); }
.story-preview__desc { font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); word-break: keep-all; }
.story-preview__go { grid-column: 1 / -1; }

/* ── 7. 결제 전 화면 "받는 것": 새 장 줄 상태 글자(방 1개) · 미리보기로 돌아가기 ── */
.pay-list__state { display: block; margin-top: 2px; font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1.45; color: var(--c-text-muted); }
.pay-list__state:empty { display: none; }
.pay-back--preview { margin-top: var(--space-1); }
.pay-back--preview[hidden] { display: none; }

/* ═══ (18단계 J4) UI 점검에서 고친 것 (나의 이야기 화면. 책 쪽 대조표 몫은 style-book.css) ═══ */
/* 나의 이야기 7/7 결제 전(test·live): 미리보기 카드가 주 버튼이므로, 같은 화면 아래 지도 카드의 주 버튼은 보조 모양으로 내린다(한 화면 주 버튼 1개).
   결말(map-slot-finale)·결제 뒤·off는 그대로. 버튼 크기·글자는 같고 바탕·그림자만 보조 버튼 결 */
#screen-story:has([data-js="story-preview"]:not([hidden])) .map-slot--story .btn--primary {
  background: transparent;
  color: var(--c-text-strong);
  border: 1px solid var(--c-line-strong);
  box-shadow: none;
}

/* ═══ (19단계 K1) 입구 바로 가기 띠 · 지도 동의 화면 접기 · 면책 빠진 자리 여백 — 명세: design/strange-oracle.md 「19단계 (K1)」 ═══ */

/* ── 1. 입구 바로 가기 띠 (nav.hub-tabs). 입구(#screen-hub) 안에만 있어 입구가 숨으면 함께 숨는다 ── */
.hub { --tabs-h: 64px; }
/* 입구가 떠오른 뒤 transform 애니메이션이 남아 있으면(fill both) 띠의 고정 위치 기준이 입구 화면이 된다 → 입구만 끝난 뒤 효과를 남기지 않는다(모양은 같음) */
#screen-hub.is-active { animation-fill-mode: backwards; }
/* 낮은 화면(360×640 등): 띠(64px + 안전 영역)가 문 아래를 가리지 않게 문을 줄이고 머리 위 여백을 덜어 문 전체를 첫 화면에 둔다(16단계 H5 지도 띠 규칙과 같은 값) */
@media (max-height: 700px) {
  .hub:has(> .hub-tabs) .hub-head { padding-top: 0; }
  .hub:has(> .hub-tabs) .hub-cta.hub-gate { --gw: 144px; }
}
.hub.is-active { padding-bottom: calc(var(--space-16) + var(--tabs-h) + env(safe-area-inset-bottom, 0px)); } /* 쿠키 줄·FAQ 끝이 띠에 가리지 않게 */
.hub-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  max-width: 480px; margin-inline: auto;
  padding: 0 var(--space-2) env(safe-area-inset-bottom, 0px);
  border-top: 1px solid oklch(0.66 0.075 75 / 0.45); /* --bronze 옅게 */
  background: oklch(0.12 0.035 var(--room-h, 285) / 0.97);
  box-shadow: 0 -10px 24px oklch(0 0 0 / 0.35);
  transition: transform var(--dur-base) var(--ease-out), visibility 0s linear 0s;
  /* 입구가 떠오르는 700ms(screen-in, transform이 걸려 고정 위치가 풀림) 뒤에 아래에서 올라온다. 숨김(transform)과 겹치지 않게 translate로 */
  animation: hub-tabs-in var(--dur-base) var(--ease-out) 700ms both;
}
@keyframes hub-tabs-in { from { translate: 0 100%; opacity: 0; } to { translate: none; opacity: 1; } }
.hub-tabs__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 120px); justify-content: center;
  min-height: var(--tabs-h);
}
.hub-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: var(--tabs-h); padding: var(--space-1) 2px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1.2; color: var(--c-text);
  -webkit-tap-highlight-color: transparent;
}
.hub-tab[hidden] { display: none !important; }
.hub-tab__icon { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: var(--bronze-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hub-tab__dot { fill: var(--bronze-hi); stroke: none; }
.hub-tab__label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; }
.hub-tab:hover .hub-tab__label { color: var(--c-text-strong); }
.hub-tab:active { background: oklch(1 0 0 / 0.06); }
.hub-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* 보이는 칸이 하나뿐(off·0/7 = 공유만): 그림과 이름을 한 줄로 눕힌 넓은 칸 */
.hub-tabs__row:not(:has(> .hub-tab:not([hidden]) ~ .hub-tab:not([hidden]))) { grid-auto-columns: minmax(0, 200px); }
.hub-tabs__row:not(:has(> .hub-tab:not([hidden]) ~ .hub-tab:not([hidden]))) .hub-tab { flex-direction: row; gap: var(--space-2); font-size: var(--fs-sm); }
/* 공유 완료 줄: 띠 바로 위에 뜨는 말풍선(띠 높이는 그대로) */
.hub-tabs__status {
  position: absolute; left: 50%; bottom: calc(100% + var(--space-2)); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2 * var(--gutter)); margin: 0;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--c-surface-3); color: var(--c-text-strong); box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); text-align: center; overflow-wrap: anywhere;
}
.hub-tabs__status.is-hidden { display: none; }
/* 숨김: 입구 글 칸(이어가기 코드)에 초점 · 문 열리는 연출 중 · JS .is-hidden. 아래로 빠지고 누를 수 없다 */
.hub:has(:is(input, textarea, select):focus) .hub-tabs,
.hub:has(:is(.hub-cta, .door).is-entering) .hub-tabs,
.hub-tabs.is-hidden {
  transform: translateY(calc(100% + 12px)); visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
/* 토스트(지도 칸 7/7 전 안내 등)는 입구에서 띠 위로 올린다 */
body:has(.hub.is-active) .toast { bottom: calc(var(--tabs-h, 64px) + var(--space-4) + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) {
  .hub-tabs, .hub:has(:is(input, textarea, select):focus) .hub-tabs, .hub:has(:is(.hub-cta, .door).is-entering) .hub-tabs, .hub-tabs.is-hidden { transition: none; }
}
/* 정적 검토 모드: 고정하지 않고 입구 맨 끝에 놓는다 */
.is-static-preview .hub-tabs { position: relative; margin-top: var(--space-8); animation: none; }

/* ── 2. 지도 동의 화면: 한 줄 요약 + 동의 체크 + 바로 아래 "자세히 보기"(details) ── */
.map-summary {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2); align-items: start;
  margin: 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-line); border-radius: var(--radius-lg); background: var(--accent-soft);
  font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text); word-break: keep-all;
}
.map-summary__icon { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.map-summary b { color: var(--c-text-strong); }
.map-consent__agree { display: grid; gap: 0; }
.map-more { margin: 0; }
.map-more__toggle {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--tap-min); padding: 0 var(--space-2); margin-left: calc(22px + var(--space-3) - var(--space-2)); /* 체크 글 첫머리와 맞춤 */
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--accent);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent-line);
  cursor: pointer; list-style: none;
}
.map-more__toggle::-webkit-details-marker { display: none; }
.map-more__toggle::marker { content: ""; }
.map-more__toggle:hover { text-decoration-color: currentColor; }
.map-more__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-more__chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-out); }
.map-more[open] .map-more__chev { transform: rotate(180deg); }
.map-more__close, .map-more[open] .map-more__open { display: none; }
.map-more[open] .map-more__close { display: inline; }
.map-more__body { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.map-notice__row--purpose dd { color: var(--c-text); }
@media (prefers-reduced-motion: reduce) { .map-more__chev { transition: none; } }

/* ── 3. 면책 문구가 빠진 자리: 결과 9곳은 마지막 말(say--close / 만신 기준 줄) 바로 뒤에 공유 줄이 붙는다 → 읽을거리와 행동 사이 간격을 지킨다 ── */
.result .say--close + .result-more { margin-top: var(--space-8); }
.result .saju-basis + .result-more { margin-top: var(--space-6); }

/* ── (22단계, 결정 134) 방 결과 아래 "이 방의 나머지 이야기" (app.js renderRest가 만든다. off 배포판에는 없음)
   잠김: 장 이름 + 흐린 막대(글자 아님) + 결제 버튼 / 열림: Ⅰ장 나머지·Ⅱ~Ⅳ장·숨은 장 본문 */
.room-rest { margin-top: var(--space-6); padding: var(--space-5) var(--space-4); border: 1px solid var(--accent-line); border-radius: 16px; background: oklch(0.2 0.035 285 / 0.55); }
.room-rest__title { margin: 0 0 var(--space-2); font-size: var(--fs-lg); color: var(--c-text-strong); }
.room-rest__lead, .room-rest__note, .room-rest__price { margin: 0 0 var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); }
.room-rest__price { margin-top: var(--space-3); color: var(--c-text); }
.room-rest__locks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.room-rest__lock { display: grid; grid-template-columns: 28px auto 1fr; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: 10px; background: oklch(0.16 0.03 285 / 0.7); }
.room-rest__lock-name { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); white-space: nowrap; }
.room-rest__lock-name::before { content: ""; display: inline-block; width: 10px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 1.5px solid var(--accent); border-radius: 2px; box-shadow: inset 0 0 0 2px oklch(0.16 0.03 285); background: var(--accent-dim, var(--accent)); opacity: 0.8; }
.room-rest__bars { height: 10px; border-radius: 5px; background: linear-gradient(90deg, oklch(0.6 0.03 285 / 0.35) 0 62%, transparent 62% 68%, oklch(0.6 0.03 285 / 0.25) 68%); filter: blur(2px); }
.room-rest__num { font-family: var(--font-latin); font-size: var(--fs-sm); color: var(--accent); text-align: center; }
.room-rest__buy, .room-rest__read { margin-top: var(--space-2); }
.room-rest__have { display: block; margin: var(--space-3) auto 0; min-height: var(--tap-min); font-size: var(--fs-sm); color: var(--c-text-muted); }
.room-rest__ch { margin-top: var(--space-5); }
.room-rest__ch:first-of-type { margin-top: var(--space-3); }
.room-rest__name { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--fs-md); color: var(--c-text-strong); }
.room-rest__body p { margin: 0 0 var(--space-3); }
.room-rest__sub { font-weight: 700; color: var(--c-text-strong); }
.room-rest__ch--hidden .room-rest__name { color: var(--gold, var(--accent)); }
/* (22단계) 입구 카카오 로그인 — 문 아래 안내 줄 다음, 이어가기 링크 위 */
.hub-kakao { margin: var(--space-4) auto 0; max-width: 360px; text-align: center; }
/* (23단계) 입구 로그인 상태 줄 · 저장 동의 대화 상자 */
.hub-kakao__on { padding: var(--space-3) var(--space-4); border: 1px solid var(--accent-line); border-radius: 12px; }
.hub-kakao__state { margin: 0; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-text); }
.hub-kakao__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-3); margin: var(--space-1) 0 0; }
.hub-kakao__links .text-link { min-height: var(--tap-min); font-size: var(--fs-sm); }
.kakao-consent__lead, .kakao-consent__sum { margin: 0 0 var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-muted); word-break: keep-all; }
.kakao-consent__sum { color: var(--c-text); }
.kakao-consent__check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-text-strong); }
.kakao-consent__check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.kakao-consent__more { margin: var(--space-2) 0 var(--space-3); font-size: var(--fs-sm); }
.kakao-consent__more summary { min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer; color: var(--accent); }
.kakao-consent__list { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-1); color: var(--c-text-muted); line-height: var(--lh-ui); word-break: keep-all; }

/* ── (24단계) 직격: 유료 장 맨 앞 세 마디 + 한 줄. 화면에 들어오면 한 마디씩 내리꽂힌다 ── */
.strike { position: relative; margin: var(--space-3) 0 var(--space-5); padding: 22px 18px 20px; border: 1px solid oklch(0.55 0.17 28 / 0.6); border-radius: 14px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, oklch(0.27 0.1 25 / 0.95), oklch(0.13 0.035 285) 72%);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.4), 0 18px 40px oklch(0.1 0.06 25 / 0.55); }
.strike::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.22;
  background: repeating-linear-gradient(115deg, transparent 0 22px, oklch(0.7 0.16 28 / 0.12) 22px 23px); }
.strike::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 38%, oklch(0.78 0.2 30 / 0.65), transparent 62%); }
.strike__label { margin: 0 0 14px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: oklch(0.76 0.15 30); }
.strike__line { margin: 0 0 10px; font-size: clamp(19px, 5.6vw, 23px); line-height: 1.42; font-weight: 800; letter-spacing: -0.01em; color: #fff; word-break: keep-all; text-wrap: pretty; transform-origin: 50% 60%; }
.strike__line:first-of-type { font-size: clamp(21px, 6.2vw, 26px); }
.strike__turn { margin: 16px 0 0; word-break: keep-all; padding-top: 14px; border-top: 1px solid oklch(0.6 0.12 30 / 0.35); font-size: var(--fs-sm); line-height: 1.7; color: oklch(0.9 0.06 80); }
.strike.is-armed .strike__line, .strike.is-armed .strike__turn { opacity: 0; }
.strike.is-hit { animation: strike-quake 2.9s linear 0.35s both; }
.strike.is-hit::after { animation: strike-flash 2.9s linear 0.35s both; }
.strike.is-hit .strike__line { animation: strike-slam 0.52s cubic-bezier(0.2, 1.5, 0.35, 1) calc(0.35s + var(--i, 0) * 1s) both; }
.strike.is-hit .strike__turn { animation: strike-rise 0.9s ease-out 3.5s both; }
@keyframes strike-slam {
  0% { opacity: 0; transform: scale(1.9) translateY(-8px); filter: blur(8px); text-shadow: 0 0 34px oklch(0.7 0.22 28); }
  55% { opacity: 1; transform: scale(0.97); filter: blur(0); }
  100% { opacity: 1; transform: none; text-shadow: 0 0 0 transparent; }
}
@keyframes strike-quake { /* 마디가 꽂히는 0초·1초·2초(= 0%·34.5%·69%)에 짧게 흔들림 */
  0%, 8%, 34.5%, 42.5%, 69%, 77%, 100% { transform: none; }
  2%, 36.5%, 71% { transform: translate(-6px, 3px) rotate(-0.4deg); }
  4%, 38.5%, 73% { transform: translate(5px, -3px) rotate(0.3deg); }
  6%, 40.5%, 75% { transform: translate(-2px, 1px); }
}
@keyframes strike-flash {
  0%, 34.5%, 69% { opacity: 0; }
  1.5%, 36%, 70.5% { opacity: 1; }
  12%, 46%, 80%, 100% { opacity: 0; }
}
@keyframes strike-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 책 장의 직격 (종이 위, 움직임 없음) */
.book-strike { display: block; margin-block: calc(var(--book-line) / 2); padding: var(--space-3) 0; border-top: 2px solid oklch(0.43 0.13 32 / 0.75); border-bottom: 1px solid oklch(0.43 0.13 32 / 0.35); text-indent: 0; }
.book-strike__label { display: block; margin-bottom: 4px; font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: 0.12em; color: oklch(0.43 0.13 32); }
.book-strike__line { display: block; font-size: var(--fs-lg); line-height: 1.55; font-weight: 700; color: var(--ink-strong); }
.book-strike__turn { display: block; margin-top: 6px; font-size: var(--fs-read); line-height: var(--book-line); color: var(--ink); }

/* ── (2026-10-25) 시빌라: 당신의 질문에 대한 신탁 (질문을 적었을 때만) */
.ask-answer { margin: var(--space-5) 0 0; padding: var(--space-5) var(--space-4); border: 1px solid var(--accent-line, oklch(0.8 0.08 35 / 0.4)); border-radius: 16px; background: linear-gradient(180deg, oklch(0.24 0.05 20 / 0.55), oklch(0.17 0.04 300 / 0.55)); }
.ask-answer .eyebrow { margin: 0; text-align: left; }
.ask-answer__title { margin: var(--space-1) 0 var(--space-3); font-size: var(--fs-lg); color: var(--c-text-strong); }
.ask-answer p { margin: 0 0 var(--space-3); line-height: 1.75; word-break: keep-all; }
.ask-answer__open { color: var(--accent); }
.ask-answer__act { margin-bottom: 0 !important; padding-top: var(--space-3); border-top: 1px dashed oklch(0.8 0.08 35 / 0.35); color: var(--c-text-strong); font-weight: 700; }

/* (2026-10-25 성능) 스크롤하는 동안 배경 애니메이션을 잠시 멈춘다 (JS가 body.is-scrolling, 멈추고 0.15초 뒤 풀림) */
body.is-scrolling .cosmos > * { animation-play-state: paused; }