/* ════════════════════════════════════════════════
   에이테르나 — 네 나라 판 · 현악(絃)조
   설계 원칙 (일부러 지키는 규칙)
     1. border-radius 는 어디에도 쓰지 않는다  → 각진 형태 유지
     2. 면을 나누는 것은 1px 금선. 카드를 띄우는 그림자는 쓰지 않는다
        (예외: 호버 시 안쪽에서 번지는 금빛. 그림자가 아니라 광원이다)
     3. 배경 그라데이션 금지. 색은 밤·별빛·균열, 그리고 잿빛 푸름
        (별은 그라데이션이 아니라 '점'이다. 깔아도 되는 유일한 배경.
         선이 양 끝에서 스러지는 그라데이션은 '면'이 아니므로 허용)
     4. 좌우 대칭 배치를 피하고 여백을 크게 남긴다
     5. 별빛(금) = 미덕 · 표면, 균열(적) = 참이름 · 심연
        잿빛 푸름(--ash) = 색이 빠진 자리. 비네트 · 먼 별 · 번지는 빛에만 쓴다

   ── 배경음악(느린 피아노+바이올린)에 맞춘 조정 ──────────
     · 색   금은 촛불처럼 채도를 내리고, 붉음은 마른 장미로 식혔다
     · 속도 등장 1s→2.1s, 호흡 11s→17s, 회전·호버 전부 약 1.5배로 늦췄다
            튀는 곡선(.2,.8,.2,1) 대신 시작도 끝도 흐린 곡선을 쓴다
     · 여백 장과 장 사이가 쉼표다. 빽빽하면 느려도 조급해 보인다
     · 질감 비네트는 검정이 아니라 잿빛 푸름으로 누르고, 그레인은 눕힌다
            섬광·점등은 '터지지' 말고 '차올랐다 스러지게'
   ════════════════════════════════════════════════ */

/* ── 0. 글꼴 파일 ───────────────────────────── */
@font-face {
  font-family: "HeirOfLight";
  src: url("fonts/HeirofLightRegular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "HeirOfLight";
  src: url("fonts/HeirofLightBold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "GyeonggiBatang";
  src: url("fonts/GyeonggiBatang-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "GyeonggiBatang";
  src: url("fonts/GyeonggiBatang-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

.font-warm {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  font-family: var(--char-name);
}

/* ── 1. 토큰 ───────────────────────────────── */
:root {
  /* 실제 값은 design/tokens.json -> public/tokens.generated.css 에서 온다.
     이 파일은 기존 화면 구조와 컴포넌트 스타일만 담당한다. */
  /* 밤 — 완전한 검정이 아니라 아주 깊은 남색. 별이 뜨려면 하늘이 필요하다.
     현악(絃)판에서 남보라 기를 빼고 잿빛 쪽으로 눕혔다 — 화려한 밤이 아니라 식은 밤 */
  --ink:        var(--ds-color-ink);
  --ink-2:      var(--ds-color-ink-2);
  --ink-3:      var(--ds-color-ink-3);

  /* 별빛 — 쨍한 금박이 아니라 다 탄 촛불 빛. 채도를 내리고 한 톤 눕혔다 */
  --gold:       var(--ds-color-gold);
  --gold-hi:    var(--ds-color-gold-hi);
  --gold-soft:  var(--ds-color-gold-soft);   /* 라벨에 쓰이므로 충분히 밝아야 한다 */
  --gold-line:  var(--ds-color-gold-line);
  --gold-faint: var(--ds-color-gold-faint);

  /* 균열 — 끓는 피가 아니라 마른 장미. 붉되 뜨겁지 않게 식혔다 */
  --rift:    var(--ds-color-rift);
  --rift-hi: var(--ds-color-rift-hi);
  --rift-dim:var(--ds-color-rift-dim);

  /* 잿빛 푸름 — 슬픔의 색. 금(빛)도 붉음(피)도 아닌, 소리가 그친 자리.
     세 번째 색이 아니라 '색이 빠진 자리'로만 쓴다: 비네트·별·먼 광원 */
  --ash:      var(--ds-color-ash);
  --ash-line: var(--ds-color-ash-line);

  --text:       var(--ds-color-text);   /* 본문 */
  --text-dim:   var(--ds-color-text-dim);   /* 보조 — 이게 묻히면 절반이 안 읽힌다 */

  --serif:   var(--ds-font-body);
  --latin:   var(--ds-font-latin);
  --sans:    var(--ds-font-sans);
  --heading: var(--ds-font-heading);
  --char-name: var(--ds-font-character);

  --pad: var(--ds-layout-page-pad);
}

*, *::before, *::after { box-sizing: border-box; }

/* 기준 글꼴. 모든 rem 값이 여기에 매여 있으므로 이 한 줄이 전체 크기를 정한다
   (18px 이 조금 커서 17px 로 내렸다) */
html {
  font-size: 106.25%;
  scroll-behavior: smooth;
  background: var(--ink);   /* 하늘은 문서 전체가 들고 있는다 */
}

/* 배경 그림. bg/backdrop.jpg 를 넣으면 별 아래에 깔린다.
   글씨를 덮으면 안 되므로 아주 옅게, 화면에 고정해 둔다.
   파일이 없으면 아무 일도 일어나지 않는다 */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: url("bg/backdrop.jpg");
  background-size: cover;
  background-position: center;
  /* ↓ 이 두 줄이 배경의 세기입니다.
     흐리면 opacity 를 올리고, 글씨가 묻히면 다시 내리세요.
     채도를 더 뺀 것은 색을 죽이려는 게 아니라 '빛바랜 것'으로 보이게 하려는 것 */
  opacity: .46;
  filter: saturate(.55) brightness(.74) contrast(.94);
}

/* 배경 위에 덮는 아주 옅은 잿빛 푸름 — 사진의 남은 온기를 마저 식힌다.
   backdrop 자체에 얹어야 별·글씨보다 반드시 뒤에 깔린다 */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(24, 32, 52, .3);
  mix-blend-mode: soft-light;
}

/* ── 두루마리의 축(軸) ─────────────────────────
   문서 맨 위와 맨 아래에 서는 나무 축. 페이지 전체가 두루마리 한 장이고,
   지금 읽는 자리는 그 사이 어딘가에 풀려 있다는 뜻으로 둔다.
   둥근 나무를 곡선으로 그리지 않고, 깎아 낸 각면으로만 표현한다 */
.scrollrod {
  position: relative;
  height: 13px;
  background:
    repeating-linear-gradient(90deg,
      rgba(207, 171, 114, .05) 0, rgba(207, 171, 114, .05) 1px,
      transparent 1px, transparent 3px),
    linear-gradient(180deg, #10131f 0%, #070911 52%, #10131f 100%);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.scrollrod::before,
.scrollrod::after {
  content: "";
  position: absolute;
  top: -3px; bottom: -3px;
  width: 9px;
  background: var(--ink-3);
  border: 1px solid var(--gold-line);
  clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%);
}
.scrollrod::before { left: calc(var(--pad) * .35); }
.scrollrod::after  { right: calc(var(--pad) * .35); }
.scrollrod--top    { margin-bottom: -1px; }
.scrollrod--bottom { margin-top: -1px; }

/* 글이 놓이는 자리만 배경을 눌러 준다 —
   배경을 밝게 올려도 본문이 묻히지 않게 하는 장치 */
.chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(5, 7, 16, .4);
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: .01em;
  overflow-x: hidden;
  /* 한글은 음절 단위로 아무 데서나 줄바꿈되면 단어가 쪼개져 보인다.
     띄어쓰기에서만 줄이 바뀌도록 고정 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 화면 가장자리를 어둡게 눌러 가운데로 시선을 모은다.
   너무 진하면 가장자리 글씨를 덮으므로 약하게, 그리고 늦게 시작한다 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  /* 순수한 검정으로 누르면 '어둡다'로 끝난다. 잿빛 푸름을 섞어 눌러야
     가장자리가 식어 가는 느낌 — 소리가 멀어지는 쪽으로 읽힌다 */
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(11, 15, 28, .5) 100%),
    radial-gradient(ellipse at center, transparent 74%, rgba(0, 0, 0, .34) 100%);
}

/* 필름 그레인 — 매끈한 디지털 느낌을 죽인다.
   현악판에서는 한 톤 더 눕혔다. 거칠면 관악처럼 들린다 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .026;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
::selection { background: var(--rift); color: #fff; }

/* hidden 속성은 아래에서 display 를 지정한 요소에도 반드시 이겨야 한다 */
[hidden] { display: none !important; }

/* ── 스크롤 잠금 ───────────────────────────────
   상세창이 열리면 뒤 문서의 스크롤을 막는데, 그냥 막으면 스크롤바가
   사라지면서 본문이 그 폭만큼 오른쪽으로 밀린다.
   사라진 스크롤바 폭(--sbw)을 그대로 여백으로 채워 넣어 밀림을 없앤다 */
body.is-locked {
  overflow: hidden;
  padding-right: var(--sbw, 0px);
}
/* 화면에 고정된 것들은 body 여백의 영향을 받지 않으므로 따로 당겨준다.
   backdrop 과 body::before/::after 는 inset:0 로 뷰포트를 꽉 채우는데,
   스크롤바가 사라지면 그만큼 뷰포트가 넓어져서 배경 그림이 오른쪽으로 밀려 보인다 */
body.is-locked .topbar,
body.is-locked .progress,
body.is-locked .backdrop { right: var(--sbw, 0px); }
body.is-locked::before,
body.is-locked::after { right: var(--sbw, 0px); }


/* ── 첫 방문 오프닝 ────────────────────────────
   금빛 문양 속에서 타이틀이 완성된 뒤 입장 버튼이 나타난다. */
.gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: #04060d;
}

.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(211, 172, 106, .12), transparent 24%),
    radial-gradient(circle at 50% 48%, rgba(104, 69, 38, .08), transparent 48%),
    linear-gradient(180deg, rgba(16, 21, 34, .72), rgba(4, 6, 13, .96));
  opacity: 0;
  transition: opacity 1.2s ease;
}

.gate.is-ready::before { opacity: 1; }

.gate__content {
  position: relative;
  z-index: 10;
  display: flex;
  width: min(92vw, 60rem);
  min-height: min(76vh, 38rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.gate__title {
  position: relative;
  display: grid;
  width: min(88vw, 46rem);
  place-items: center;
  margin: 0;
  isolation: isolate;
  perspective: 900px;
}

.gate__word,
.gate__title-echo {
  grid-area: 1 / 1;
  font-family: var(--heading);
  font-size: clamp(4.7rem, 14vw, 10rem);
  font-weight: 800;
  line-height: .82;
  letter-spacing: .045em;
  white-space: nowrap;
}

.gate__word {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  color: #fffaf0;
  text-shadow:
    0 0 10px rgba(255, 244, 214, .18),
    0 0 36px rgba(207, 171, 114, .13);
}

.gate__word > span {
  display: inline-block;
  opacity: 0;
  filter: blur(16px);
  transform: translateY(.32em) rotateX(72deg) scale(.72);
  transform-origin: center bottom;
}

.gate__title-echo {
  position: relative;
  z-index: 1;
  color: var(--gold-hi);
  opacity: 0;
  filter: blur(22px);
  transform: scale(1.22);
}

.gate__title-shine {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 199, .95), transparent);
  opacity: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(237, 201, 137, .55);
  pointer-events: none;
}

.gate__sigil {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(76vw, 38rem);
  aspect-ratio: 1;
  border: 1px solid rgba(207, 171, 114, .08);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.48) rotate(-28deg);
  box-shadow: 0 0 80px rgba(207, 171, 114, .04), inset 0 0 45px rgba(207, 171, 114, .03);
}

.gate__sigil::before,
.gate__sigil::after,
.gate__sigil i {
  content: "";
  position: absolute;
  border: 1px solid rgba(207, 171, 114, .12);
  transform: rotate(45deg);
}

.gate__sigil::before { inset: 9%; }
.gate__sigil::after { inset: 22%; border-color: rgba(207, 171, 114, .18); }
.gate__sigil i:first-child { inset: 4% 49.9%; border-width: 0 0 0 1px; transform: none; }
.gate__sigil i:nth-child(2) { inset: 49.9% 4%; border-width: 1px 0 0; transform: none; }
.gate__sigil i:last-child {
  inset: 35%;
  border-color: rgba(231, 195, 130, .2);
  box-shadow: 0 0 26px rgba(207, 171, 114, .08);
}

.gate__spark {
  position: absolute;
  z-index: 5;
  width: .55rem;
  aspect-ratio: 1;
  border: 1px solid var(--gold-hi);
  opacity: 0;
  transform: rotate(45deg) scale(.2);
  box-shadow: 0 0 14px rgba(245, 217, 163, .7);
}

.gate__spark--one { top: -18%; left: 7%; }
.gate__spark--two { right: 12%; bottom: -26%; width: .38rem; }
.gate__spark--three { top: -34%; right: 39%; width: .28rem; }

.gate.is-ready .gate__sigil { animation: gateSigilBloom 2.4s cubic-bezier(.16, .8, .18, 1) .12s forwards; }
.gate.is-ready .gate__title-echo { animation: gateTitleEcho 2.15s ease .18s forwards; }
.gate.is-ready .gate__word > span {
  animation: gateLetterBirth 1.12s cubic-bezier(.16, .82, .2, 1) calc(.38s + var(--letter) * .17s) forwards;
}
.gate.is-ready .gate__title-shine { animation: gateTitleShine 1.2s ease .82s forwards; }
.gate.is-ready .gate__spark--one { animation: gateSpark .75s ease 1.18s forwards; }
.gate.is-ready .gate__spark--two { animation: gateSpark .7s ease 1.55s forwards; }
.gate.is-ready .gate__spark--three { animation: gateSpark .62s ease 1.88s forwards; }

@keyframes gateSigilBloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.48) rotate(-28deg); }
  40% { opacity: .62; }
  72% { opacity: .34; transform: translate(-50%, -50%) scale(1.04) rotate(3deg); }
  100% { opacity: .18; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes gateTitleEcho {
  0% { opacity: 0; transform: scale(1.22); }
  38% { opacity: .52; }
  100% { opacity: .07; transform: scale(1); }
}

@keyframes gateLetterBirth {
  0% { opacity: 0; filter: blur(16px); transform: translateY(.32em) rotateX(72deg) scale(.72); }
  54% { opacity: 1; filter: blur(1px); transform: translateY(-.035em) rotateX(-4deg) scale(1.055); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) rotateX(0) scale(1); }
}

@keyframes gateTitleShine {
  0% { width: 0; opacity: 0; }
  28% { opacity: 1; }
  72% { width: 112%; opacity: .72; }
  100% { width: 124%; opacity: 0; }
}

@keyframes gateSpark {
  0% { opacity: 0; transform: rotate(45deg) scale(.2); }
  45% { opacity: 1; transform: rotate(45deg) scale(1.35); }
  100% { opacity: .35; transform: rotate(45deg) scale(.75); }
}

.gate__enter {
  position: relative;
  margin-top: clamp(4.4rem, 11vh, 7rem);
  min-width: 10.5rem;
  padding: .9rem 1.6rem;
  border: 1px solid var(--gold-line);
  background: rgba(7, 10, 19, .62);
  color: var(--gold-hi);
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .22em;
  opacity: 0;
  transform: translateY(14px);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.gate.is-ready .gate__enter { animation: gateEnterReveal .75s ease 2.72s forwards; }

.gate__enter::before,
.gate__enter::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(2rem, 7vw, 5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line));
}
.gate__enter::before { right: calc(100% + 1rem); }
.gate__enter::after { left: calc(100% + 1rem); transform: rotate(180deg); }

@keyframes gateEnterReveal {
  to { opacity: 1; transform: translateY(0); }
}

.gate__enter:hover,
.gate__enter:focus-visible {
  border-color: var(--gold);
  background: rgba(207, 171, 114, .09);
  color: #fff6e6;
  box-shadow: 0 0 28px rgba(207, 171, 114, .12);
  outline: none;
}

.gate__enter:disabled { cursor: default; pointer-events: none; }

.gate.is-parting .gate__content {
  opacity: 0;
  transform: scale(.985);
  transition: opacity .35s ease, transform .35s ease;
}

/* 개문할 때 검은 바탕을 두 짝(.gate__leaf)에게 넘긴다.
   그래야 갈라진 틈으로 뒤가 보인다 */
.gate.is-parting { background: transparent; pointer-events: none; }
.gate.is-parting::before { opacity: 0; }

/* 검은 두 짝과 그 사이의 금빛 이음선 */
.gate__leaf {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 8;
  width: 50.5%;
  background: #04060d;
  opacity: 0;
  pointer-events: none;
}
.gate__leaf--l { left: 0; }
.gate__leaf--r { right: 0; }
.gate.is-parting .gate__leaf {
  opacity: 1;   /* 트랜지션 없이 즉시 — 이미 같은 검정이라 눈에 띄지 않는다 */
  transition: transform 1.5s cubic-bezier(.72, 0, .2, 1) .5s;
}
.gate.is-parting .gate__leaf--l { transform: translateX(-100%); }
.gate.is-parting .gate__leaf--r { transform: translateX(100%); }

.gate__seam {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  z-index: 9;
  width: 1px;
  margin-left: -.5px;
  background: var(--gold-hi);
  box-shadow: 0 0 34px 7px rgba(207, 171, 114, .5);
  opacity: 0;
  pointer-events: none;
  transform: scaleY(0);
}
.gate.is-parting .gate__seam { animation: gateSeam 1.9s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes gateSeam {
  0%   { opacity: 0; transform: scaleY(0); }
  13%  { opacity: 1; transform: scaleY(1); }
  32%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

/* 오프닝이 떠 있는 동안에는 뒤가 움직이지 않는다.
   그냥 막으면 스크롤바가 사라졌다 돌아오면서 화면이 한 번 밀리므로,
   사라진 스크롤바 폭만큼 여백을 채워 둔다 (상세창과 같은 방식) */
body.is-gated {
  overflow: hidden;
  padding-right: var(--sbw, 0px);
}
body.is-gated .topbar,
body.is-gated .progress,
body.is-gated .backdrop { right: var(--sbw, 0px); }
body.is-gated::before,
body.is-gated::after { right: var(--sbw, 0px); }

@media (prefers-reduced-motion: reduce) {
  .gate::before,
  .gate__content { transition: none; }
  .gate__sigil,
  .gate__title-echo,
  .gate__word > span,
  .gate__title-shine,
  .gate__spark,
  .gate__enter {
    opacity: 1;
    clip-path: none;
    filter: none;
    animation: none !important;
  }
  .gate__sigil { transform: translate(-50%, -50%); opacity: .18; }
  .gate__title-echo,
  .gate__title-shine,
  .gate__spark { opacity: 0; }
  .gate__word > span,
  .gate__enter { transform: none; }
  .hero { transition: none; }
}


/* ── 2. 두루마리가 풀리는 정도 ─────────────────
   가로로 채우는 막대가 아니라, 왼쪽 여백 안에 세로로 선다.
   두루마리를 얼마나 풀었는지를 보여주는 축(軸)의 눈금이다 */
.progress {
  position: fixed;
  top: 0; bottom: 0;
  left: 9px;
  width: 1px;
  z-index: 95;
  pointer-events: none;
  background: var(--gold-faint);
}
.progress i {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-hi));
  box-shadow: 0 0 10px rgba(207, 171, 114, .7);
  transition: height .1s linear;
}


/* ── 소리 단추 ─────────────────────────────────
   보내주신 그림은 둥근 알약 모양이었지만, 이 사이트는 어디에도
   둥근 모서리를 쓰지 않으므로 모서리를 자른 형태로 맞췄습니다 */
.sound-control {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-left: auto;
}
.bgm {
  --cut: 8px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .46rem 1rem;
  background: transparent;
  border: 1px solid rgba(180, 185, 203, .3);
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  font-family: var(--sans);
  font-size: .62rem; font-weight: 400;
  letter-spacing: .24em;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .65s, border-color .65s, background .65s;
}
.bgm:hover { color: var(--text); border-color: rgba(180, 185, 203, .6); }

/* ON 과 OFF 는 글자 수가 달라서, 폭을 고정하지 않으면 헤더가 밀린다 */
.bgm__txt { display: inline-block; min-width: 1.9rem; text-align: left; }

.bgm__ico { display: block; width: 1.05rem; height: 1.05rem; }
.bgm__ico svg { width: 100%; height: 100%; }
.bgm__ico path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bgm__horn { fill: currentColor; }

/* 꺼짐 = 물결 대신 가위표 */
.bgm .bgm__wave { display: none; }
.bgm .bgm__mute { display: block; }
.bgm.is-on .bgm__wave { display: block; }
.bgm.is-on .bgm__mute { display: none; }

.bgm.is-on {
  color: var(--gold);
  border-color: var(--gold-line);
  background: rgba(207, 171, 114, .06);
}
.bgm.is-on:hover { color: var(--gold-hi); border-color: var(--gold); }
.bgm:disabled { cursor: default; opacity: .48; }

.sound-volume {
  display: grid;
  grid-template-columns: auto minmax(4.4rem, 5.4rem) 1.7rem;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  font-family: var(--latin);
  font-size: .52rem;
  letter-spacing: .15em;
  color: var(--gold-soft);
}
.sound-volume input {
  width: 100%;
  height: 20px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.sound-volume input::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--gold-line);
}
.sound-volume input::-webkit-slider-thumb {
  width: 9px;
  height: 9px;
  margin-top: -4px;
  appearance: none;
  border: 1px solid var(--gold);
  border-radius: 0;
  transform: rotate(45deg);
  background: var(--ink);
}
.sound-volume input::-moz-range-track {
  height: 1px;
  background: var(--gold-line);
}
.sound-volume input::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border: 1px solid var(--gold);
  border-radius: 0;
  transform: rotate(45deg);
  background: var(--ink);
}
.sound-volume output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sound-volume input:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.sound-volume input:disabled { cursor: default; opacity: .35; }
.sound-control[data-audio-state="missing"] .sound-volume { opacity: .45; }


/* ── 3. 공용 부품 ──────────────────────────── */
.overline {
  margin: 0;
  font-family: var(--sans);
  font-size: .76rem; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold);
}

.rule-diamond { display: flex; align-items: center; gap: .9rem; width: min(360px, 70%); }
.rule-diamond span { flex: 1; height: 1px; background: var(--gold-line); }
.rule-diamond b { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }

/* 한국어 위에 라틴어를 얹는 표기 */
.ruby { position: relative; display: inline-block; color: var(--gold); white-space: nowrap; }
.ruby em {
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans); font-style: normal;
  font-size: .5em; font-weight: 400;
  letter-spacing: .22em;
  color: var(--gold-soft);
  line-height: 1;
  white-space: nowrap;
}

.em-rift { color: var(--rift-hi); font-weight: 400; }
.em-gold    { color: var(--gold);        font-weight: 400; }

/* 사선으로 모서리를 자른 버튼 — 둥근 버튼을 쓰지 않기 위한 대안.
   속을 채우지 않고 얇은 금선 하나로만 테를 두른다 — 판에 새긴 표(標)처럼,
   게임 메뉴 버튼처럼 보이지 않도록 자간이 늘어나는 호버 연출은 걷어냈다 */
.cut-btn {
  --cut: 8px;
  position: relative;
  display: inline-block;
  margin-top: 3rem;
  padding: .95rem 2.6rem;
  font-family: var(--sans);
  font-size: .74rem; font-weight: 400;
  letter-spacing: .3em;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: color .65s, background .65s;
}
/* clip-path 를 쓰면 테두리가 잘리므로, 테두리는 별도 레이어로 그린다 */
.cut-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-line);
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut),
    var(--cut) 1px, 1px calc(var(--cut) + .4px), 1px calc(100% - 1px), calc(100% - var(--cut) - .4px) calc(100% - 1px),
    calc(100% - 1px) calc(100% - var(--cut) - .4px), calc(100% - 1px) 1px, var(--cut) 1px
  );
  transition: background .65s;
}
.cut-btn:hover        { color: var(--gold-hi); background: rgba(207, 171, 114, .07); }
.cut-btn:hover::before{ background: var(--gold); }
/* 두 번째 단추는 테두리까지 옅게 — 첫 단추보다 한 걸음 물러서 있다 */
.cut-btn--ghost { color: var(--text-dim); }
.cut-btn--ghost::before { background: var(--gold-faint); }
.cut-btn--ghost:hover { background: rgba(207, 171, 114, .05); }
.cut-btn--ghost:hover::before { background: var(--gold-line); }


/* ── 4. 상단 바 ────────────────────────────── */
/* 인장과 장 색인을 한 줄에 묶은 고정 메뉴바. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(1.4rem, 3vw, 3.6rem);
  padding: 1.15rem var(--pad);
  background: rgba(5, 7, 16, .66);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gold-faint);
  transition: background .8s, border-color .8s, padding .8s;
}
.topbar.is-stuck {
  padding-block: .85rem;
  background: rgba(5, 7, 16, .9);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--gold-line);
}

.topbar__mark { flex: none; text-decoration: none; line-height: 1.15; }
.topbar__mark-ko { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: .3em; color: var(--text); }
.topbar__mark-la {
  display: block;
  font-family: var(--sans);
  font-size: .56rem; font-weight: 400;
  letter-spacing: .46em; text-transform: uppercase;
  color: var(--gold-soft);
}

/* GLORY 오른쪽에 이어지는 가로 장 색인. */
.topnav {
  position: static;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(1.1rem, 2.4vw, 2.5rem);
  padding: 0;
}
.topnav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  writing-mode: horizontal-tb;
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--text-dim);
  text-decoration: none;
  min-height: 44px;
  padding: .4rem 0;
  transition: color .65s;
  white-space: nowrap;
}
.topnav a i {
  font-style: normal;
  display: inline-block;
  margin-right: .45rem;
  font-size: .7rem;
  color: var(--gold-soft);
  transition: color .65s;
}
/* 현재 장은 아래 금빛 눈금으로 표시한다. */
.topnav a::after {
  content: "";
  position: absolute;
  left: 0; right: .16em; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .72s cubic-bezier(.2, .8, .2, 1);
}
.topnav a:hover, .topnav a.is-active { color: var(--gold-hi); }
.topnav a:hover i, .topnav a.is-active i { color: var(--gold); }
.topnav a:hover::after, .topnav a.is-active::after { transform: scaleX(1); }

.topbar .sound-control { margin-left: auto; }


/* ── 5. 히어로 ─────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 9rem var(--pad) 6rem;
  overflow: hidden;
  transition: opacity 2.4s ease, transform 2.4s ease;
}
/* 문(.gate)이 사라지는 건 페이드 아웃일 뿐, 그 뒤의 히어로는 늘 그 자리에
   이미 다 켜져 있었다 — 그래서 드러날 때 스스로 떠오르는 느낌이 없었다.
   오프닝이 떠 있는 동안만 죽여 두고, 문이 걷히는 순간(.is-gated 해제)에
   맞춰 같이 떠오르게 한다 */
body.is-gated .hero {
  opacity: 0;
  transform: translateY(18px);
}

/* 마법진 뒤의 금빛 광원 — 배경 그라데이션이 아니라 '빛나는 물건' */
.hero__glow {
  position: absolute;
  top: 50%; right: 4vw;
  width: min(80vh, 900px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  /* 안쪽은 촛불, 바깥은 식은 잿빛 푸름 — 따뜻한 것이 차가운 데로 번져 나가다
     끊기는 모양. 금빛 하나만 두면 그냥 '밝은 것'이라 애절함이 안 실린다 */
  background:
    radial-gradient(circle, rgba(207, 171, 114, .15) 0%, rgba(207, 171, 114, .045) 34%, transparent 62%),
    radial-gradient(circle, transparent 40%, rgba(139, 154, 184, .07) 62%, transparent 82%);
  animation: breathe 17s ease-in-out infinite;
}
/* 활을 한 번 긋고 놓는 길이. 들이쉬는 쪽을 더 깊게 죽여 두어야
   부풀 때 '차오르는' 느낌이 난다 — 균등하게 오가면 기계 호흡이 된다 */
@keyframes breathe {
  0%, 100% { opacity: .58; transform: translateY(-50%) scale(.985); }
  46%      { opacity: 1;   transform: translateY(-50%) scale(1.07); }
}

.hero__sigil {
  position: absolute;
  top: 50%; right: -10vw;
  width: min(80vh, 920px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .65;
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 78%);
          mask-image: radial-gradient(circle, #000 55%, transparent 78%);
}
.hero__sigil svg { width: 100%; height: 100%; }
.hero__sigil circle,
.hero__sigil rect,
.hero__sigil path { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .4; }
.hero__sigil .thin { opacity: .18; }
/* 점선 간격만으로 눈금을 만든다 — 요소를 수십 개 그릴 필요가 없다 */
.hero__sigil .ticks      { stroke-dasharray: 1.5 13; opacity: .48; }
.hero__sigil .ticks-fine { stroke-dasharray: 1 6;    opacity: .36; }

.sigil-slow, .sigil-fast, .sigil-core { transform-origin: 300px 300px; }
.sigil-slow { animation: spin 420s linear infinite; }
.sigil-fast { animation: spin 250s linear infinite reverse; }
.sigil-core { animation: spin 155s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 별 ────────────────────────────────────────
   히어로 안에서만 뜬다. 위치도 크기도 주기도 전부 제각각이라
   script.js 가 하나씩 만들어 뿌린다.
   떠 있는 시간이 짧아서, 보고 있으면 생겼다 사라진다      */
.hero__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.star {
  position: absolute;
  border-radius: 50%;          /* 별은 예외 — 점은 각지게 그릴 수 없다 */
  background: #fff;
  opacity: 0;
  animation: starLife var(--life, 7s) ease-in-out var(--wait, 0s) infinite;
}
/* 몇 개는 금빛으로 두어 성도(星圖)의 인상을 남긴다 */
.star--gold { background: var(--gold); }
/* 몇 개는 잿빛 푸름 — 꺼져 가는 쪽의 별. 흰 점만 뿌리면 밤이 너무 맑다 */
.star--ash  { background: var(--ash); }

/* 천천히 떠올랐다가 잠깐 머물고 사라진다.
   머무는 구간을 좁히고 꺼지는 구간을 길게 늘였다 — 여운이 남는 감쇠 */
@keyframes starLife {
  0%       { opacity: 0;   transform: scale(.55); }
  22%, 48% { opacity: var(--peak, .8); transform: scale(1); }
  100%     { opacity: 0;   transform: scale(.55); }
}

/* 표지도 여백 규칙을 따른다 — 가운데가 아니라 두루마리 왼쪽 끝에서 시작한다.
   펼쳐 든 첫 장, 글은 왼쪽 여백부터 흘러나온다 */
.hero__body {
  position: relative;
  z-index: 2;
  margin: 0 auto 0 0;
  max-width: 40rem;
  text-align: left;
}

.hero__prompt {
  max-width: 28rem;
  margin: 0 0 clamp(1.4rem, 4vh, 2.6rem);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.9;
  color: rgba(243, 245, 252, .82);
}

.hero__title {
  position: relative;
  display: block;
  margin: 0 0 1.8rem;
  line-height: 1;
}
/* 글자 자체를 물들이는 대신, 뒤에서 은은하게 숨쉬는 금빛 기운을 둔다
   (.hero__glow 와 같은 breathe 리듬 — 사이트 전체의 '빛나는 물건' 언어를 그대로 따른다) */
.hero__title::before {
  content: "";
  position: absolute;
  inset: -22% -12%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(207, 171, 114, .3) 0%, rgba(207, 171, 114, .1) 45%, transparent 74%);
  filter: blur(10px);
  animation: breathe 17s ease-in-out infinite;
}

.hero__title-img {
  position: relative;
  z-index: 1;
  display: block;
  height: clamp(3.6rem, 9vw, 6.6rem);
  width: auto;
  max-width: 90vw;
  margin: 0;
  /* 또렷한 테두리 광을 줄이고 번짐을 넓혔다 — 가까이서 빛나는 게 아니라
     멀리서 새어 나오는 빛으로 보이게 */
  filter:
    drop-shadow(0 0 3px rgba(240, 236, 228, .22))
    drop-shadow(0 0 58px rgba(207, 171, 114, .34))
    drop-shadow(0 0 110px rgba(139, 154, 184, .18));
}

.hero__reply {
  max-width: 31rem;
  margin: 0 0 1.4rem 1.5rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--gold-line);
  color: var(--text-dim);
}
.hero__reply p {
  margin: 0;
  font-size: clamp(.9rem, 1.35vw, 1.02rem);
  line-height: 1.9;
}
.hero__reply p + p { margin-top: .55rem; }
.hero__begin {
  margin: 0 0 1rem;
  font-size: clamp(.92rem, 1.4vw, 1.06rem);
  line-height: 1.9;
  color: rgba(243, 245, 252, .86);
}

/* 왼쪽에서 뻗어 나오는 실선 위의 인용문 — 좌우 대칭 대신 한쪽에서만 자란다 */
.hero__quote {
  position: relative;
  margin: 0 0 1.1rem 1.6rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--gold-line);
  font-size: clamp(.94rem, 1.3vw, 1.05rem);
  line-height: 1.9;
  color: var(--text);
}
.hero__quote span { display: none; }

.hero__sub {
  margin: 0 0 2.6rem;
  font-family: var(--sans);
  font-size: .66rem; font-weight: 400;
  letter-spacing: .34em;
  color: var(--gold-soft);
}

.hero__acts { display: flex; justify-content: flex-start; gap: .9rem; flex-wrap: wrap; }
.hero__acts .cut-btn { margin-top: 0; padding: .85rem 2.1rem; }

.hero__scroll {
  position: absolute;
  bottom: 2.4rem;
  left: var(--pad);
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--sans);
  font-size: .6rem; font-weight: 400;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold-soft);
}
.hero__scroll i { display: block; width: 62px; height: 1px; background: var(--gold-line); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--gold); animation: sweep 4.6s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }


/* ── 6. 장(章) 공통 ──────────────────────────
   장과 장 사이를 크게 벌렸다. 이 여백이 쉼표다 —
   빽빽하면 아무리 느리게 움직여도 조급해 보인다 */
.chapter {
  position: relative;
  padding: clamp(6.5rem, 15vh, 12rem) var(--pad);
}
/* 장을 가르는 선. 끝이 벽에 닿아 뚝 끊기는 대신 양쪽으로 스러지게 했다 —
   활을 그었다 떼는 자리. 1px 금선이라는 규칙은 그대로 지킨다 */
.chapter::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(to right,
    transparent 0%,
    var(--gold-line) 18%,
    var(--gold-line) 62%,
    var(--ash-line) 84%,
    transparent 100%);
}

.chapter__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-bottom: clamp(2.6rem, 6vh, 4.4rem);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--gold-faint);
}
.chapter__num {
  font-family: var(--latin);
  font-size: clamp(3.4rem, 8vw, 6.2rem);
  font-weight: 400;
  line-height: .8;
  color: var(--gold);
  text-shadow: 0 0 46px rgba(207, 171, 114, .26), 0 0 90px rgba(139, 154, 184, .14);
}
.chapter__title {
  margin: .5rem 0 0;
  font-family: var(--heading);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: #f3f5fc;
}
.chapter__intro {
  max-width: 46rem;
  margin: 0 0 clamp(2.2rem, 5vh, 3.6rem);
  font-size: 1.08rem;
  line-height: 2;
  color: var(--text-dim);
}
.chapter__intro b { color: var(--rift-hi); font-weight: 400; }
.chapter__intro em { color: var(--gold); font-style: normal; }

/* 장 도입 기록화. 이미지가 없어도 같은 크기와 캡션을 유지하고,
   추후 src만 연결하면 빈 슬롯 대신 그림이 같은 자리에서 열린다. */
.chapter-visual {
  position: relative;
  width: 100%;
  max-width: 76rem;
  aspect-ratio: 2.05 / 1;
  margin: 0 auto clamp(6.5rem, 14vh, 10rem);
  overflow: hidden;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-faint);
  background: #070a13;
}
.chapter-visual[data-has-image="true"]::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 7, 16, .08) 40%, rgba(5, 7, 16, .9) 100%),
    linear-gradient(90deg, rgba(5, 7, 16, .52), transparent 38%);
}
.chapter-visual::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: clamp(.65rem, 1.4vw, 1rem);
  pointer-events: none;
  border: 1px solid rgba(207, 171, 114, .09);
}
.chapter-visual__image {
  z-index: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .45s ease;
}
.chapter-visual[data-has-image="true"] .chapter-visual__image { opacity: 1; }
.chapter-visual[data-has-image="true"] .chapter-visual__empty { visibility: hidden; }
.chapter-visual__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(207, 171, 114, .36);
  background: #070a13;
}
.chapter-visual__empty span {
  font-family: var(--latin);
  font-size: .55rem;
  letter-spacing: .28em;
  color: rgba(207, 171, 114, .34);
}
.chapter-visual figcaption {
  position: absolute;
  z-index: 4;
  right: clamp(1.4rem, 3vw, 2.8rem);
  bottom: clamp(1.35rem, 3vw, 2.6rem);
  left: clamp(1.4rem, 3vw, 2.8rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.chapter-visual figcaption span {
  font-family: var(--sans);
  font-size: .58rem;
  line-height: 1.4;
  letter-spacing: .25em;
  color: var(--gold-soft);
}
.chapter-visual figcaption strong {
  font-family: var(--heading);
  font-size: clamp(.95rem, 2vw, 1.3rem);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(243, 245, 252, .82);
}

@media (max-width: 640px) {
  .chapter-visual {
    aspect-ratio: 4 / 3;
    margin-bottom: 6rem;
  }
  .chapter-visual::after { inset: .65rem; }
  .chapter-visual__empty span { font-size: .48rem; }
  .chapter-visual figcaption {
    right: 1.25rem;
    bottom: 1.2rem;
    left: 1.25rem;
    display: block;
  }
  .chapter-visual figcaption span { display: block; margin-bottom: .35rem; }
  .chapter-visual figcaption strong { display: block; }
}

/* 장 제목 아래 한 줄 — 가운데 정렬은 여기서만 허용한다 */
.chapter__sub {
  margin: -1rem 0 clamp(2.4rem, 5vh, 3.6rem);
  font-family: var(--sans);
  font-size: .86rem; font-weight: 400;
  letter-spacing: .22em;
  color: var(--gold-soft);
}

/* ── 세계관 — 카드 세 칸을 접었다 ─────────────
   나란히 세운 상자 세 개 대신, 하나의 본문이 위에서 아래로 흐르고
   장부(스탯·미덕 대응표)는 본문 오른쪽 여백에 붙는 주석으로 물러난다.
   상자도 배경도 없다 — 다만 장과 장 사이에 가는 금선 하나가 쉼표로 남는다 */
.facets {
  display: flex;
  flex-direction: column;
  max-width: 54rem;
}

.facet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(2.2rem, 5vh, 3.4rem) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--gold-faint);
}
.facets .facet:first-child { border-top: 0; padding-top: 0; }

/* 아이콘은 선으로만 그린다 — 채우면 이모지처럼 보인다 */
.facet__icon { display: block; width: 2.1rem; height: 2.1rem; margin-bottom: 1.1rem; grid-column: 1; }
.facet__icon svg { width: 100%; height: 100%; }
.facet__icon path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: square;
}

.facet__name {
  grid-column: 1;
  margin: 0 0 .9rem;
  font-size: 1.35rem; font-weight: 700;
  color: #f3f5fc;
}
.facet__name em {
  display: block;
  margin-top: .3rem;
  font-family: var(--sans); font-style: normal;
  font-size: .58rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-soft);
}
.facet__body { grid-column: 1; margin: 0; font-size: 1rem; line-height: 1.95; color: var(--text-dim); }
.facet__body + .facet__body { margin-top: 1.3rem; }
.facet__body b { color: var(--text); font-weight: 700; }

/* 여백 주석 — 본문 오른쪽에 붙어, 본문 전체 높이만큼 걸쳐 선다 */
.facet__stat {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  margin: 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--gold-faint);
}
.facet__stat > div { padding: .34rem 0; }
.facet__stat dt {
  display: block;
  font-family: var(--sans);
  font-size: .64rem; font-weight: 400;
  letter-spacing: .18em;
  color: var(--gold-soft);
}
.facet__stat dd { margin: .1rem 0 0; font-size: .92rem; color: var(--text); }

/* ── 뒤집히는 대응표 ────────────────────────────
   미덕/참이름은 아이콘·이름·본문·목록이 전부 한 벌로 갈리므로
   본문 곁에 반씩 걸치지 않고, 여백 안에 통째로 끼운 작은 판(版)으로 둔다 —
   나란히 세운 카드가 아니라, 본문 사이사이에 끼워 넣은 삽화 한 장처럼 */
.facet--flip {
  display: block;
  grid-template-columns: none;
}
.facet--flip .facet__inner { margin-left: auto; max-width: 23rem; }

/* 3D 뒤집기 컨테이너 */
.facet__inner {
  position: relative;
  perspective: 1400px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.3, .8, .2, 1);
}
.facet--flip.is-flipped .facet__inner { transform: rotateY(180deg); }

.facet__face {
  position: relative;
  padding-left: 1.1rem;
  border-left: 1px solid var(--gold-faint);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color .72s;
}
.facet__inner:hover .facet__face { border-color: var(--gold-line); }

/* 뒷면만 앞면 위에 정확히 포개 놓는다 */
.facet__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  overflow: hidden;
}
.facet__face--back .facet__icon path { stroke: var(--rift-hi); }
.facet__face--back .facet__name em { color: var(--rift); }
.facet__inner:hover .facet__face--back { border-color: var(--rift-dim); }

.pair { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.pair li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--gold-faint);
}
.pair b { font-size: .92rem; font-weight: 400; color: var(--text-dim); }
.pair span { font-size: 1.02rem; font-weight: 700; }
.pair--virtue span { color: var(--gold); }
.pair--sin li { border-bottom-color: rgba(157, 74, 76, .16); }
.pair--sin span { color: var(--rift-hi); }

.facet__flipcue {
  margin: 1.2rem 0 0;
  font-family: var(--sans);
  font-size: .66rem; font-weight: 400;
  letter-spacing: .22em;
  color: var(--gold-soft);
}
.facet__flipcue em { font-style: normal; color: var(--gold); }
.facet__face--back .facet__flipcue { color: rgba(221, 107, 88, .6); }
.facet__face--back .facet__flipcue em { color: var(--rift-hi); }

@media (max-width: 720px) {
  .facet { grid-template-columns: 1fr; }
  .facet__stat { grid-column: 1; grid-row: auto; margin-top: 1.4rem; padding-left: 0; border-left: 0; padding-top: 1.1rem; border-top: 1px solid var(--gold-faint); }
  .facet--flip .facet__inner { max-width: none; }
  .facet__face { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .facet__inner { transition: none; }
}

/* ── 프롤로그 웹툰 ─────────────────────────────
   페이지 전체가 아니라 이 상자 안에서만 세로로 굴러간다 */
.toon {
  width: min(38rem, 100%);
  height: min(74vh, 46rem);
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;   /* 끝까지 내려도 페이지가 따라 움직이지 않는다 */
  background: var(--ink-2);
  border: 1px solid var(--gold-line);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-soft) transparent;
}
.toon::-webkit-scrollbar { width: 8px; }
.toon::-webkit-scrollbar-track { background: transparent; }
.toon::-webkit-scrollbar-thumb { background: rgba(207, 171, 114, .34); }
.toon::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }

.toon__strip { display: block; }
.toon__page { position: relative; margin: 0; }
.toon__page img { width: 100%; height: auto; display: block; }

/* 그림이 아직 없을 때 자리를 지키는 빈 칸 */
.toon__page.is-empty { height: 26rem; border-bottom: 1px solid var(--gold-faint); }
.toon__page.is-empty img { visibility: hidden; }
.toon__page figcaption {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  font-family: var(--latin);
  font-size: 3.4rem;
  color: var(--gold);
  opacity: .14;
}
.toon__page.is-empty figcaption { display: grid; }

.sub-title {
  margin: clamp(3rem, 7vh, 4.5rem) 0 1.6rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--gold-line);
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold);
}

/* 본문 7 : 패널 4 — 일부러 균등 분할을 피한다 */
.chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.prose { max-width: 40rem; font-size: 1.05rem; }
.prose p { margin: 0 0 1.8rem; }
.prose p:last-child { margin-bottom: 0; }
.prose__drop::first-letter {
  float: left;
  margin: .4rem .55rem 0 0;
  font-size: 3.6em;
  line-height: .72;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(207, 171, 114, .4);
}

/* 오른쪽 사양 패널 — 위/아래 금선만, 상자로 가두지 않는다 */
.spec { padding: 1.9rem 0; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); }
.spec__label {
  margin: 0 0 1.1rem;
  font-family: var(--sans);
  font-size: .7rem; font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-soft);
}
.spec__name { margin: 0 0 1.6rem; font-size: 1.65rem; font-weight: 700; color: var(--gold); }
.spec__name em {
  display: block; margin-top: .45rem;
  font-family: var(--sans); font-style: normal;
  font-size: .68rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-dim);
}
.spec__list { margin: 0; }
.spec__list > div {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: 1rem;
  padding: .75rem 0;
  border-top: 1px solid var(--gold-faint);
  font-size: 1rem;
  line-height: 1.7;
}
.spec__list dt { color: var(--text-dim); letter-spacing: .08em; }
.spec__list dd { margin: 0; color: var(--text); }
.spec__list .is-warn { color: var(--rift-hi); }
.spec__note { margin: 1.4rem 0 0; font-size: .9rem; line-height: 1.8; color: var(--text-dim); }


/* ── 7. 표 ─────────────────────────────────── */
.table-wrap { overflow-x: auto; margin-top: clamp(2.5rem, 6vh, 4rem); }
.tbl-caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 1rem;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-soft);
}
.rules {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 1.05rem;
  text-align: left;
}
.rules th {
  padding: .8rem 1.2rem .8rem 0;
  border-bottom: 1px solid var(--gold);
  font-family: var(--sans);
  font-size: .7rem; font-weight: 400;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold);
}
.rules td {
  padding: 1.1rem 1.2rem 1.1rem 0;
  border-bottom: 1px solid var(--gold-faint);
  color: var(--text-dim);
  line-height: 1.8;
  vertical-align: top;
}
.rules td:first-child { width: 3rem; color: var(--gold); font-size: 1.3rem; }
.rules td:nth-child(2) { width: 30%; }
.rules b { color: var(--text); font-weight: 700; }
.rules .is-warn { color: var(--rift-hi); }
.rules tbody tr { transition: background .55s; }
.rules tbody tr:hover { background: rgba(207, 171, 114, .05); }


/* ── 8. 2부의 세 선택 ──────────────────────── */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--gold-line);
  border: 1px solid var(--gold-line);
}
.choice {
  position: relative;
  overflow: hidden;
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  background: var(--ink-2);
  transition: background .8s;
}
.choice:hover { background: var(--ink-3); }
/* 배경에 깔린 거대한 한자 */
.choice__ghost {
  position: absolute;
  right: -.22em; bottom: -.3em;
  font-size: 10rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}
.choice--fall .choice__ghost { color: var(--rift); opacity: .12; }
.choice__name { position: relative; margin: 0 0 1rem; font-size: 2.4rem; font-weight: 800; color: var(--gold); }
.choice--fall .choice__name { color: var(--rift-hi); }
.choice__name em {
  display: block; margin-top: .4rem;
  font-style: normal;
  font-size: .92rem; font-weight: 400;
  letter-spacing: .26em;
  color: var(--text-dim);
}
.choice__body { position: relative; margin: 0; font-size: 1.02rem; line-height: 1.95; color: var(--text-dim); }

.cond__link {
  margin: 2rem 0 0;
  padding-left: clamp(1.2rem, 3vw, 2.2rem);
  border-left: 2px solid var(--rift);
  max-width: 46rem;
  font-size: 1.02rem;
  line-height: 2.05;
  color: var(--text);
}
.cond__link b { color: var(--gold); font-weight: 400; }
.cond__link em { color: var(--rift-hi); font-style: normal; font-weight: 700; }

/* 명분처럼 통째로 못 박는 문장 — 굵은 적색 기둥에 큰 활자 */
.verdict {
  margin: clamp(3rem, 7vh, 4.5rem) 0;
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 0 clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.4rem, 3.5vw, 2.6rem);
  border-left: 3px solid var(--rift);
  max-width: 50rem;
}
.verdict blockquote {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.85;
  color: #f3f5fc;
}
.verdict blockquote b { color: var(--rift-hi); }
.verdict figcaption { margin-top: 1.2rem; font-size: 1.02rem; line-height: 1.85; color: var(--text-dim); }
.verdict figcaption em { color: var(--gold); font-style: normal; font-weight: 700; }
.verdict--gold { border-left-color: var(--gold); }
.verdict--gold blockquote b { color: var(--gold); }
.verdict--gold figcaption em { color: var(--rift-hi); }

/* 표나 목록 아래 붙는 보충 설명 */
.foot-note {
  margin: 1.6rem 0 0;
  max-width: 50rem;
  font-size: .98rem;
  line-height: 1.95;
  color: var(--text-dim);
}
.foot-note b { color: var(--gold); font-weight: 700; }
.foot-note em { color: var(--rift-hi); font-style: normal; font-weight: 700; }

/* 「누가 신이 되면 어떤 세계가 오는가」 — 이름과 세계를 좌우로 벌린다 */
.worlds { list-style: none; margin: 2rem 0 0; padding: 0; }
.worlds li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .4rem clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--gold-faint);
}
.worlds b { font-size: 1.12rem; font-weight: 700; color: #f3f5fc; white-space: nowrap; }
/* 「~가 신이 되면」 조사는 인물마다 다르므로 본문에 직접 쓴다 */
.worlds b i { font-style: normal; margin-left: .1rem; font-size: .9rem; font-weight: 400; color: var(--text-dim); }
.worlds span { font-size: 1.16rem; color: var(--gold); letter-spacing: .03em; }

/* 무기 권능표 */
.rules--arms td:first-child { width: 8rem; color: var(--text); font-family: var(--serif); font-size: 1.05rem; }
.rules--arms td:nth-child(2) { width: 30%; }
.rules--arms td:nth-child(2) b { color: var(--gold); font-weight: 700; }
.rules--hunt { min-width: 34rem; }
.rules--hunt td:first-child { width: 3rem; }
.rules--hunt td:nth-child(2),
.rules--hunt td:nth-child(3) { width: 6rem; }
.rules--hunt td:nth-child(2) b { color: var(--rift-hi); }

/* 선택지 카드에 붙는 길 이름과 사양 */
.choice__way {
  position: relative;
  margin: 0 0 .6rem;
  font-family: var(--sans);
  font-size: .7rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-soft);
}
.choice__spec { position: relative; margin: 1.2rem 0 0; }
.choice__spec > div {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: .8rem;
  padding: .5rem 0;
  border-top: 1px solid var(--gold-faint);
  font-size: .98rem;
}
.choice__spec dt { color: var(--text-dim); font-size: .9rem; }
.choice__spec dd { margin: 0; color: var(--text); }
.choice__spec .is-shut { color: var(--gold); font-weight: 700; }
.choice__spec .is-open { color: var(--rift-hi); font-weight: 700; }

/* 신좌 앞의 두 선택은 크게 둘로만 나눈다 */
.choices--two { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
.choices--two .choice__ghost { font-size: 13rem; }
.choices--two .choice__name { font-size: 3rem; }

/* 문이 닫힌 뒤 / 에필로그 */
.after {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border: 1px solid var(--gold-line);
  background: var(--ink-2);
}
.after__lead { margin: 1.2rem 0 1.6rem; max-width: 50rem; font-size: 1.06rem; line-height: 1.95; color: var(--text); }
.after__lead b { color: var(--gold); font-weight: 700; }
.after__lead em { color: var(--rift-hi); font-style: normal; font-weight: 700; }
.after__list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.after__list li {
  position: relative;
  padding: .7rem 0 .7rem 1.4rem;
  border-top: 1px solid var(--gold-faint);
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--text-dim);
}
.after__list li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.after__list b { color: #f3f5fc; font-weight: 700; }
.after__list em { color: var(--gold); font-style: normal; }

/* 다섯 막 */
.acts { list-style: none; margin: 0; padding: 0; }
.act {
  position: relative;
  padding: clamp(1.8rem, 4vh, 2.6rem) 0;
  border-top: 1px solid var(--gold-line);
}
.act:last-child { border-bottom: 1px solid var(--gold-line); }
.act__pct {
  position: absolute;
  right: 0; top: clamp(1.8rem, 4vh, 2.6rem);
  margin: 0;
  font-family: var(--latin);
  font-size: 1.4rem;
  color: var(--gold);
  opacity: .5;
}
.act__name { margin: 0 0 1rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; color: #f3f5fc; }
.act__body { margin: 0 0 1.2rem; max-width: 50rem; font-size: 1.04rem; line-height: 1.95; color: var(--text-dim); }
.act__body b { color: #f3f5fc; font-weight: 700; }
.act__body em { color: var(--gold); font-style: normal; }
/* 막을 닫는 한 줄 — 라벨을 앞에 붙여 문단과 구별한다 */
.act__end {
  margin: 1.2rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--rift);
  max-width: 50rem;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text);
}
.act__end b:first-child {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--rift-hi);
}
.act__end b { color: var(--gold); font-weight: 700; }

.act__list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.act__list li { padding: 1rem 0; border-top: 1px solid var(--gold-faint); font-size: 1.02rem; line-height: 1.9; color: var(--text-dim); }
.act__list b:first-child {
  display: block;
  margin-bottom: .3rem;
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: .04em;
}
.act__list b { color: #f3f5fc; font-weight: 700; }
.act__list em { color: var(--rift-hi); font-style: normal; }
.act--last .act__name { color: var(--gold); }
/* 반전이 터지는 막만 핏빛으로 */
.act--key { border-left: 2px solid var(--rift); padding-left: clamp(1rem, 2.5vw, 1.8rem); }
.act--key .act__name { color: var(--rift-hi); }


/* ── 9. 베는 자 카드 ───────────────────────── */
.nine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1px;                      /* 칸 사이를 1px 만 띄우고 */
  background: var(--gold-faint); /* 그 틈으로 금선이 비치게 한다 */
  border: 1px solid var(--gold-line);
}

.nine__card {
  position: relative;
  overflow: hidden;
  padding: 1.9rem 1.7rem;
  background: var(--ink-2);
  transition: background .8s, box-shadow .8s;
}
/* 배경에 깔린 거대한 번호 */
.nine__ghost {
  position: absolute;
  right: -.06em; top: -.18em;
  font-family: var(--latin);
  font-size: 8.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  opacity: .07;
  pointer-events: none;
  user-select: none;
  transition: opacity .8s, color .8s;
}
/* 오른쪽 위 모서리를 사선으로 깎아낸 금색 삼각 */
.nine__card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  border-top: 15px solid var(--gold);
  border-left: 15px solid transparent;
  opacity: .45;
  transition: border-top-color .8s, opacity .8s;
}
/* 그림자가 아니라 안쪽에서 번지는 금빛 — 카드가 떠오르지는 않는다 */
.nine__card:hover {
  background: #0c1020;
  box-shadow: inset 0 0 60px rgba(207, 171, 114, .1);
}
.nine__card:hover::after { border-top-color: var(--rift); opacity: 1; }
.nine__card:hover .nine__ghost { opacity: .11; color: var(--rift); }

.nine__name { position: relative; margin: 0 0 .3rem; font-family: var(--char-name); font-size: 1.6rem; font-weight: 700; color: #f3f5fc; }
.nine__name em {
  display: block; margin-top: .4rem;
  font-family: var(--sans); font-style: normal;
  font-size: .7rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-dim);
}
/* 이명 — 라틴 이름 바로 아래, 금색 */
.nine__alias {
  position: relative;
  margin: .55rem 0 .3rem;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold);
}
.nine__alias::before { content: "「"; opacity: .55; }
.nine__alias::after  { content: "」"; opacity: .55; }
.nine__epithet { position: relative; margin: 0 0 1.3rem; font-size: .95rem; letter-spacing: .08em; color: var(--text-dim); }

.nine__stat { position: relative; margin: 0 0 1.2rem; }
.nine__stat > div {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  gap: .8rem;
  padding: .58rem 0;
  border-top: 1px solid var(--gold-faint);
  font-size: 1.06rem;
  line-height: 1.6;
}
.nine__stat dt { color: var(--text-dim); font-size: .92rem; letter-spacing: .06em; }
.nine__stat dd { margin: 0; }
.nine__stat .is-virtue { color: var(--gold); }
/* 참이름은 평소 어둡게 잠들어 있다가, 카드에 손을 올리면 깨어난다 */
.nine__stat .is-sin { color: var(--rift-hi); font-weight: 700; opacity: .65; transition: opacity .8s; }
.nine__card:hover .is-sin { opacity: 1; }
.nine__stat .is-none { color: var(--text-dim); opacity: .5; }

.nine__twist { position: relative; margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.85; color: var(--text-dim); }
.nine__twist b { color: var(--text); font-weight: 700; }

/* 「신이 되면 오는 세계」 — 이들이 싸우는 유일한 이유라 카드 맨 아래에 금색으로 둔다 */
.nine__why {
  position: relative;
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--gold-faint);
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--gold);
}
.nine__why b:first-child {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-soft);
}
/* 야나기만 바랄 세계가 없다 */
.nine__why--none { color: var(--text-dim); }

/* 무기 권능 — 참이름과 헷갈리지 않게 회색으로 */
.nine__stat .is-arm { color: var(--text-dim); }

/* 이름을 받지 않은 자 — 핏빛 테두리 */
.nine__card--nameless { background: #070a12; }
.nine__card--nameless::after { border-top-color: var(--rift); opacity: .8; }
.nine__card--nameless .nine__ghost { color: var(--rift); opacity: .1; }

/* 파편 없는 열 번째 — 금색을 진하게 */
.nine__card--tenth { background: #0b0f1e; }
.nine__card--tenth .nine__ghost { font-family: var(--serif); font-size: 10rem; opacity: .1; }
.nine__card--tenth:hover .nine__ghost { color: var(--gold); opacity: .16; }
.nine__card--tenth:hover::after { border-top-color: var(--gold-hi); }


/* ── 10. 네 나라 (탭) ──────────────────────── */
/* 48명을 한 번에 쌓으면 스크롤이 감당이 안 되므로 나라별로 갈아 끼운다 */
/* 대륙 지도 — 그림이 아니라 도면이다. 땅 모양은 전부 각지게 */
/* 대륙 지도 — 관광 안내도가 아니라 오래된 해도(海圖)처럼.
   바다는 격자가 아니라 비워 두고, 땅은 아주 옅은 면에 가는 선만 남긴다 */
/* 왼쪽 지도 · 오른쪽 패널 */
.atlas {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-bottom: 2.4rem;
  align-items: stretch;
}
.atlas > * { min-width: 0; }

/* 모바일에서는 작은 핀을 억지로 누르지 않아도 장소를 찾을 수 있게
   지도와 장소 목록을 같은 탐색기의 두 보기로 둔다. */
.atlas__mode,
.atlas-mobile { display: none; }

.atlas__mode {
  grid-column: 1 / -1;
  gap: .5rem;
  padding-bottom: .2rem;
}
.atlas__mode-btn,
.atlas-mobile__filter {
  min-height: 44px;
  padding: .65rem 1rem;
  border: 1px solid var(--gold-faint);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .12em;
  cursor: pointer;
}
.atlas__mode-btn.is-on,
.atlas-mobile__filter.is-on {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}
.atlas-mobile__filters {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .75rem;
  scrollbar-width: none;
}
.atlas-mobile__filters::-webkit-scrollbar { display: none; }
.atlas-mobile__filter { flex: none; }
.atlas-mobile__places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}
.atlas-place {
  min-height: 64px;
  padding: .8rem .9rem;
  border: 1px solid var(--gold-faint);
  background: rgba(8, 11, 22, .72);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.atlas-place[hidden] { display: none; }
.atlas-place b,
.atlas-place span { display: block; }
.atlas-place b { font-family: var(--serif); font-size: .98rem; }
.atlas-place span {
  margin-top: .25rem;
  font-family: var(--sans);
  font-size: .66rem;
  line-height: 1.45;
  letter-spacing: .08em;
  color: var(--gold-soft);
}
.atlas-place:hover,
.atlas-place:focus-visible,
.atlas-place.is-on { border-color: var(--gold); background: rgba(207, 171, 114, .08); }

@media (max-width: 900px) {
  .atlas { grid-template-columns: minmax(0, 1fr); }
  .atlas__mode { display: flex; }
  .atlas__mode,
  .atlas-mobile,
  .map,
  .area { width: 100%; max-width: 100%; box-sizing: border-box; }
  .atlas.is-list .map { display: none; }
  .atlas.is-list .atlas-mobile { display: block; }
  .atlas.is-map .atlas-mobile { display: none; }
}

.map {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  border: 1px solid var(--gold-faint);
  background: #070a14;
}
.map svg { width: 100%; height: auto; display: block; }

/* 도면 네 귀퉁이의 짧은 금선 */
.map::before,
.map::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid var(--gold-line);
  pointer-events: none;
}
.map::before { top: 10px; left: 10px;  border-right: 0; border-bottom: 0; }
.map::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* 해안선. 각진 다각형 대신 곡선으로 그린다 —
   해안이 자로 그은 듯 반듯하면 도면이 아니라 도형처럼 보인다 */
.mapland { cursor: pointer; }
/* 땅이 도면 안에서 너무 작아 보이지 않도록, 각 땅을 자기 중심에서
   조금 부풀린다 (좌표를 다시 그리지 않고 화면에서만 키우는 방법) */
.coast,
.coastglow {
  transform-box: fill-box;
  transform-origin: center;
}
.coast {
  fill: rgba(207, 171, 114, .12);
  stroke: rgba(207, 171, 114, .55);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transform: scale(1.12);
  transition: fill .95s, stroke .95s, stroke-width .95s, transform .95s ease;
}
/* 해안선 바깥으로 아주 옅게 번지는 빛 — 종이에 스민 잉크처럼 */
.coastglow {
  fill: none;
  stroke: rgba(207, 171, 114, .3);
  stroke-width: 5;
  filter: url(#coast);
  opacity: .4;
  pointer-events: none;
  transform: scale(1.12);
  transition: opacity .95s, stroke .95s, transform .95s ease;
}

/* 야시마는 섬 여덟 개가 다닥다닥 붙어 있어 조금만 부풀려도
   서로 들러붙고 이웃한 천조와도 겹친다 — 이곳은 원래 크기 그대로 둔다 */
.mapland[data-land="2"] .coast,
.mapland[data-land="2"] .coastglow { transform: scale(1); }
.mapland[data-land="2"].is-on .coast,
.mapland[data-land="2"]:hover .coast { transform: scale(1); }

.mapland:hover .coast { fill: rgba(207, 171, 114, .19); stroke: var(--gold); }
.mapland:hover .coastglow { opacity: .65; }

/* 지금 보고 있는 땅 */
.mapland.is-on .coast { fill: rgba(207, 171, 114, .26); stroke: var(--gold-hi); stroke-width: 1.5; }
.mapland.is-on .coastglow { opacity: .9; stroke: var(--gold-hi); }

.mapland:focus { outline: none; }
.mapland:focus-visible .coast { stroke: var(--gold-hi); stroke-width: 1.6; }

/* 심연은 땅이 아니라 벌어진 자리라, 면이 아니라 금으로 그린다 */
.rift {
  fill: none;
  stroke: var(--rift);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .75;
  transition: stroke .8s, opacity .8s;
}
.rift--thin { stroke-width: .7; opacity: .35; }
.mapland--abyss:hover .rift,
.mapland--abyss.is-on .rift { stroke: var(--rift-hi); opacity: 1; }

/* 나라 이름 — 지도가 UI가 아니라 옛 문서로 읽히도록,
   본문과 같은 명조 계열로 쓰고 자간으로 넓힌다 */
.maplabel {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .38em;
  fill: rgba(243, 245, 252, .86);
  text-anchor: middle;
  pointer-events: none;
  transition: fill .8s;
}
.mapland:hover .maplabel,
.mapland.is-on .maplabel { fill: var(--gold-hi); }

.mapsub {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .22em;
  fill: rgba(185, 138, 72, .65);
  text-anchor: middle;
  pointer-events: none;
}
.mapland--abyss .maplabel { fill: rgba(221, 107, 88, .78); letter-spacing: .5em; }

/* 위도선 — 있는지 없는지 모를 정도로 */
.maplat line { stroke: rgba(207, 171, 114, .07); stroke-width: 1; stroke-dasharray: 2 10; }

/* 방위는 한자 대신 작은 라틴 약자로 */
.mapdir {
  font-family: var(--latin);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  fill: var(--gold-soft);
  text-anchor: middle;
  opacity: .5;
}
.map__hint {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 400;
  letter-spacing: .26em;
  color: var(--gold-soft);
  text-align: center;
}
.map__hint em { font-style: normal; color: var(--gold-hi); }

/* 지역 표식 — 지도에 꽂힌 핀. 이름표는 평소 숨겨 두고
   손을 올리거나 고른 것만 보여준다. 그래야 겹치지 않는다 */
.mappin { cursor: pointer; }
.pin__hit { fill: transparent; }

/* 원형 배지 — 안에 작은 핀 글리프(pin__core)가 얹힌다.
   원 자체는 배지, 진짜 위치를 가리키는 건 원 한가운데 점이다 */
.pin__drop {
  fill: var(--ink-2);
  stroke: var(--gold);
  stroke-width: 1.8;
  transition: fill .55s, stroke .55s, transform .55s cubic-bezier(.2, .8, .2, 1), filter .55s;
  transform-box: fill-box;
  transform-origin: center;
}
.pin__core {
  fill: var(--gold);
  pointer-events: none;
  transition: fill .55s, transform .55s cubic-bezier(.2, .8, .2, 1);
  transform-box: fill-box;
  transform-origin: center;
}
/* 고른 표식 뒤에 도는 옅은 고리 */
.pin__halo {
  fill: none;
  stroke: var(--gold-hi);
  stroke-width: 1;
  opacity: 0;
  transition: opacity .72s, r .72s;
}

.mappin text {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  fill: #fff;
  text-anchor: middle;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s;
}
/* 이름표 뒤에 까는 판 — 글자 길이가 저마다 달라 script.js 가 크기를 재서 앉힌다 */
.pin__tag {
  fill: rgba(6, 8, 16, .88);
  stroke: var(--gold-line);
  stroke-width: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}

.mappin:hover .pin__drop {
  fill: var(--gold);
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(207, 171, 114, .65)) drop-shadow(0 0 14px rgba(207, 171, 114, .35));
}
.mappin:hover .pin__core { fill: var(--ink); transform: scale(1.15); }
.mappin:hover .pin__halo { opacity: .5; }
.mappin:hover text,
.mappin:hover .pin__tag { opacity: 1; }
.mappin:focus { outline: none; }
.mappin:focus-visible .pin__halo { opacity: .8; }
.mappin:focus-visible text,
.mappin:focus-visible .pin__tag { opacity: 1; }

/* 야나기의 나루터와 심연의 입구 */
.mappin--key .pin__drop { stroke: #fff; }
.mappin--key .pin__core { fill: #fff; }
.mappin--key:hover .pin__drop { fill: #fff; }
.mappin--rift .pin__drop { stroke: var(--rift-hi); }
.mappin--rift .pin__core { fill: var(--rift-hi); }
.mappin--rift .pin__halo { stroke: var(--rift-hi); }
.mappin--rift:hover .pin__drop { fill: var(--rift-hi); }
.mappin--rift text { fill: var(--rift-hi); }

/* 사람이 사는 자리는 한 치수 작고 옅게 */
.pin__drop--town { fill: var(--ink-2); stroke: rgba(185, 138, 72, .75); stroke-width: 1.4; }
.pin__core--town { fill: rgba(185, 138, 72, .8); }
.mappin--town:hover .pin__drop--town { stroke: var(--gold-hi); fill: var(--gold-hi); }
.mappin--town:hover .pin__core--town { fill: var(--ink); }
.mappin--town text { font-size: 11.5px; }

/* 하나를 고르면 나머지는 한 발 물러난다 */
.map.is-picking .mappin { opacity: .4; transition: opacity .65s; }
.map.is-picking .mappin.is-on,
.map.is-picking .mappin:hover { opacity: 1; }

/* 고른 지역 — 원래 쓰던 금색 그대로, 뒤로 은은한 빛무리(bloom)만 번진다 */
.mappin.is-on .pin__drop {
  fill: var(--gold-hi);
  stroke: var(--gold-hi);
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(243, 201, 136, .8)) drop-shadow(0 0 20px rgba(207, 171, 114, .5));
}
.mappin.is-on .pin__core { fill: var(--ink); transform: scale(1.08); }
.mappin.is-on text,
.mappin.is-on .pin__tag { opacity: 1; }
.mappin.is-on:hover .pin__drop,
.mappin.is-on:hover .pin__core { transform: scale(1.2); }
.mappin--rift.is-on .pin__drop {
  fill: var(--rift-hi);
  stroke: var(--rift-hi);
  filter: drop-shadow(0 0 6px rgba(221, 107, 88, .8)) drop-shadow(0 0 20px rgba(157, 74, 76, .5));
}

/* 고른 표식은 고리가 물결처럼 계속 퍼져 나간다 */
.mappin.is-on .pin__halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: pinPulse 1.8s ease-out infinite;
}
@keyframes pinPulse {
  0%   { transform: scale(.55); opacity: .85; }
  70%  { opacity: .12; }
  100% { transform: scale(2.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mappin.is-on .pin__halo { animation: none; opacity: .9; }
}

/* ── 지역 패널 ─────────────────────────────────
   지도 옆에 나란히 서서, 아무것도 안 고른 동안에도 자리를 지킨다 */
.area {
  position: relative;
  scroll-margin-top: 4.8rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gold-faint);
  background: rgba(8, 11, 22, .72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

/* 고르기 전 */
.area__empty {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}
.area.is-empty .area__empty { display: grid; }
.area:not(.is-empty) .area__empty { display: none; }

.area__mark { display: block; width: 2.4rem; opacity: .28; }
.area__mark svg { width: 100%; height: auto; }
.area__mark path,
.area__mark circle { fill: none; stroke: var(--gold); stroke-width: 2; }
.area__empty p {
  margin: 0;
  font-family: var(--sans);
  font-size: .74rem; font-weight: 400;
  letter-spacing: .18em;
  color: var(--gold-soft);
  opacity: .7;
}

/* 고른 뒤 */
.area__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: areaIn .45s cubic-bezier(.2, .9, .2, 1) both;
}
@keyframes areaIn { from { opacity: 0; transform: translateY(10px); } }

/* 닫을 때는 조용히 물러난다 */
@keyframes areaOut { to { opacity: 0; transform: translateY(8px); } }
.area__body.is-closing { animation: areaOut .2s cubic-bezier(.4, 0, .8, .3) both; pointer-events: none; }

.area__text {
  padding: 1.3rem 1.5rem 1.6rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(207, 171, 114, .28) transparent;
}
.area__text::-webkit-scrollbar { width: 5px; }
.area__text::-webkit-scrollbar-track { background: transparent; }
.area__text::-webkit-scrollbar-thumb { background: rgba(207, 171, 114, .22); }

.area__x {
  position: absolute;
  top: .5rem; right: .6rem;
  z-index: 3;
  width: 2rem; height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: .9rem;
  cursor: pointer;
  transition: color .5s;
}
.area__x:hover { color: var(--gold-hi); }

.area__no {
  margin: 0 0 .5rem;
  font-family: var(--sans);
  font-size: .6rem; font-weight: 400;
  letter-spacing: .3em;
  color: var(--gold-soft);
}
.area__name { margin: 0 0 .3rem; font-family: var(--heading); font-size: 1.4rem; font-weight: 700; color: #f3f5fc; }
.area__sub {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 400;
  letter-spacing: .16em;
  color: var(--gold);
}

/* 지역 그림 — 패널 맨 위에서 좌우로 꽉 찬다.
   파일이 없으면 script.js 가 통째로 접는다 */
.area__shot {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--gold-line);
}
.area__shot img { width: 100%; height: 100%; object-fit: cover; }
.area__shot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(8, 11, 22, .95), transparent);
}

.area__desc {
  margin: 0;
  padding-left: .9rem;
  border-left: 1px solid var(--gold-line);
  font-size: .96rem;
  line-height: 1.85;
  color: var(--text-dim);
}
/* 분류 — 이름 바로 아래 작은 딱지 */
.area__kind {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .26rem .7rem;
  border: 1px solid var(--gold-faint);
  font-family: var(--sans);
  font-size: .58rem; font-weight: 400;
  letter-spacing: .2em;
  color: var(--gold-soft);
}

.area__note {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--gold-faint);
}
.area__note b {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--sans);
  font-size: .6rem; font-weight: 400;
  letter-spacing: .24em;
  color: var(--gold-soft);
}
.area__note span { font-size: .95rem; line-height: 1.8; font-style: italic; color: var(--text); }

.area__people {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gold-faint);
}
.area__people > b {
  display: block;
  margin-bottom: .65rem;
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--gold-soft);
}
.area__people > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.area__person {
  min-height: 44px;
  padding: .45rem .7rem;
  border: 1px solid var(--gold-faint);
  background: transparent;
  color: var(--text);
  font-family: var(--serif);
  font-size: .84rem;
  cursor: pointer;
}
.area__person:hover,
.area__person:focus-visible { color: var(--gold-hi); border-color: var(--gold); }

@media (max-width: 640px) {
  .area { position: static; width: auto; margin-top: 1rem; animation: none; }
}


/* ── 상세창 ────────────────────────────────── */
/* 여백을 줄여 창이 쓸 수 있는 높이를 늘린다 — 스크롤 없이 담아야 하므로 */
.sheet { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(.9rem, 3vw, 2rem); }
.sheet__dim {
  position: absolute; inset: 0;
  background: rgba(4, 5, 8, .84);
  backdrop-filter: blur(6px);
  animation: dimIn .35s ease-out both;
  cursor: pointer;
}
@keyframes dimIn { from { opacity: 0; } }

/* 높이를 고정한다. 인물마다 글 길이가 달라서 높이를 내용에 맡기면
   창이 커졌다 작아졌다 하고, 모습을 바꿀 때마다 글이 잘린다 */
.sheet__panel {
  position: relative;
  width: min(58rem, 100%);
  height: min(88vh, 45rem);
  overflow: hidden;
  padding: 0;
  background: var(--ink-2);
  border: 1px solid var(--gold-line);
  box-shadow: 0 0 80px rgba(0, 0, 0, .8), inset 0 0 90px rgba(207, 171, 114, .05);
  animation: sheetIn .5s cubic-bezier(.2, .9, .2, 1) both;
}
/* scale 을 함께 주면 글자가 확대·축소되는 프레임을 다시 그려야 해서,
   애니메이션이 도는 동안 (특히 획이 많은 한글이) 순간적으로 다른 글자처럼 뭉개져 보인다.
   그래서 scale 은 빼고 옮겨오는 움직임만 남긴다 */
@keyframes sheetIn { from { opacity: 0; transform: translateY(26px); } }

/* 닫힐 때는 들어올 때보다 조금 빠르게, 아래로 가라앉으며 사라진다 */
@keyframes sheetOut { to { opacity: 0; transform: translateY(20px); } }
@keyframes dimOut   { to { opacity: 0; } }
.sheet.is-closing .sheet__panel { animation: sheetOut .26s cubic-bezier(.4, 0, .8, .3) both; }
.sheet.is-closing .sheet__dim   { animation: dimOut .26s ease both; }
.sheet.is-closing { pointer-events: none; }

.sheet__x {
  position: absolute;
  top: .8rem; right: .9rem;
  z-index: 3;
  width: 2.4rem; height: 2.4rem;
  border: 0; border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color .5s;
}
.sheet__x:hover { color: var(--rift-hi); }

/* ── 창 안의 두 칸 ─────────────────────────────
   왼쪽은 초상, 오른쪽은 글. 좁은 화면에서는 위아래로 쌓인다 */
.sheet__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.sheet__side {
  position: relative;
  background: #080b16;
  border-right: 1px solid var(--gold-faint);
  overflow: hidden;
}
.sheet__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center top;
}
.sheet__face--left-focus { background-position: left top; }
/* 그림이 없을 때 자리를 지키는 첫 글자 */
.sheet__ini {
  font-size: clamp(6rem, 16vw, 11rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  opacity: .13;
}
/* 참이름의 모습 — 미덕의 모습 위에 겹쳐 두었다가 천천히 갈아 끼운다 */
.sheet__face { transition: filter 1s ease, transform 1.2s ease; }
.sheet__face--dark {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s ease, transform 1.2s ease;
}
.sheet__side.is-dark .sheet__face--dark { opacity: 1; transform: none; }
/* 아래 깔린 미덕의 모습은 물러나면서 색이 빠진다 */
.sheet__side.is-dark .sheet__face:not(.sheet__face--dark) { filter: saturate(.3) brightness(.7); }

/* 참이름의 모습에서는 창 전체가 한 톤 차가워진다 */
.sheet__side.is-dark { box-shadow: inset 0 0 100px rgba(157, 74, 76, .34); }
.sheet__inner.is-dark { background: #080b16; transition: background 1s ease; }
.sheet__inner.is-dark .sheet__name { color: #dfe6ff; }
.sheet__inner.is-dark .sheet__side { border-right-color: var(--rift-dim); }

/* 글자가 갈릴 때 한 번 흐려졌다 떠오른다 */
/* 글자가 갈릴 때 흐려지는 것은 '글자'뿐이다.
   칸 자체(바탕과 왼쪽 금선)까지 흐리면 상자가 통째로 깜빡여서
   갑자기 사라졌다 나타나는 것처럼 보인다 */
.sheet__cell b,
.sheet__cell span,
.sheet__block p { transition: opacity .5s ease, transform .5s ease, color .8s ease; }

.sheet__cell.is-fading b,
.sheet__cell.is-fading span,
p.is-fading { opacity: 0; transform: translateY(4px); }

/* 주요 테크닉 — 권능이 없는 사람이 대신 몸에 익힌 것.
   권능처럼 번쩍이지 않게, 금선 한 줄로만 세운다 */
.tech {
  padding: .1rem 0 .1rem .85rem;
  border-left: 1px solid var(--gold-line);
}
.tech strong {
  display: block;
  margin-bottom: .18rem;
  font-family: var(--serif);
  font-size: 1.04rem; font-weight: 500;
  letter-spacing: .02em;
  color: var(--gold-hi);
}
.tech p { margin: 0; font-size: .95rem; font-weight: 400; line-height: 1.62; color: var(--text-dim); }

/* 권능 — 이 창에서 가장 눈에 띄어야 하는 한 칸 */
.sheet__art {
  margin-top: .4rem;
  padding: .7rem .9rem;
  background: rgba(207, 171, 114, .07);
  border-left: 2px solid var(--gold);
  transition: background .95s ease, border-color .95s ease;
}
.sheet__art > b {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--serif);
  font-size: .95rem; font-weight: 500;
  letter-spacing: 0;
  color: var(--gold-hi);
}
.sheet__art strong {
  display: block;
  margin-bottom: .3rem;
  font-size: 1.08rem; font-weight: 800;
  letter-spacing: .04em;
  color: var(--gold-hi);
  text-shadow: 0 0 26px rgba(207, 171, 114, .35);
  transition: color .95s ease, text-shadow .95s ease;
}
/* 부제 — 한자든 라틴어든 이름 옆에 작게 붙는다 */
.sheet__art strong em {
  font-style: normal;
  margin-left: .55rem;
  font-family: var(--sans);
  font-size: .58rem; font-weight: 400;
  letter-spacing: .24em;
  color: var(--gold-soft);
  text-shadow: none;
  vertical-align: .28em;
  transition: color .95s ease;
}
.sheet__inner.is-dark .sheet__art strong em { color: rgba(221, 107, 88, .65); }

.sheet__art p { margin: 0; font-size: .96rem; font-weight: 400; line-height: 1.62; color: var(--text-dim); }
/* 참이름의 모습에서는 권능도 같이 식는다 */
.sheet__inner.is-dark .sheet__art { background: rgba(157, 74, 76, .1); border-left-color: var(--rift); }
.sheet__inner.is-dark .sheet__art strong { color: var(--rift-hi); text-shadow: 0 0 26px rgba(157, 74, 76, .45); }

/* 스테이터스 — 두 칸씩 묶어 아이콘과 채운 막대로 보여준다 */
.stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 1.1rem;
}
.stats__head {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .26rem;
}
.stats__icon {
  flex: none;
  width: .95rem; height: .95rem;
  color: var(--gold-soft);
}
.stats__icon svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stats__label {
  flex: 1;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em;
  color: var(--gold-soft);
}
.stats__num {
  font-family: var(--latin);
  font-style: normal;
  font-size: .96rem;
  font-weight: 500;
  color: var(--text);
  /* 숫자마다 글자 폭이 달라서 오른쪽 끝은 맞아도 자릿수가 다르면
     열이 삐뚤빼뚤해 보인다 — 숫자 폭을 고정폭으로 맞춰 열을 맞춘다 */
  font-variant-numeric: tabular-nums;
}
.stats__track {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: rgba(207, 171, 114, .12);
  overflow: hidden;
}
.stats__track i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: inherit;
  background: var(--gold);
  transition: background .95s ease;
}
/* 권능이 없는 사람 */
.stats__cell.is-zero .stats__icon,
.stats__cell.is-zero .stats__label,
.stats__cell.is-zero .stats__num { color: var(--text-dim); opacity: .5; }
.stats__cell.is-zero .stats__track { opacity: .4; }

/* 참이름의 모습에서는 막대도 식는다 */
.sheet__inner.is-dark .stats__track i { background: var(--rift-hi); }

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
}

/* 이름과 모습 전환 단추가 한 줄에. 단추는 오른쪽 끝, 무기 박스와 같은 폭 안에서만 움직인다 */
.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  margin: 0 0 .7rem;
}
.sheet__head .sheet__name { margin: 0; }

/* 천사 딱지 — 이름 옆, 사도 미덕 표기와는 다른 자리에 둔다 */
.sheet__angel,
.sheet__exception {
  flex: none;
  align-self: center;
  padding: .3rem .8rem;
  border: 1px solid var(--gold-line);
  font-family: var(--sans);
  font-size: .68rem; font-weight: 400;
  letter-spacing: .22em;
  color: var(--gold-hi);
}
.sheet__exception { border-color: var(--rift-dim); color: var(--rift-hi); }

/* 두 모습을 오가는 단추 */
.sheet__form {
  flex: none;
  margin-top: .3rem;
  display: flex;
  padding: 0;
  border: 1px solid var(--gold-line);
  background: rgba(5, 7, 16, .82);
  backdrop-filter: blur(6px);
  font-family: var(--sans);
  font-size: .72rem; font-weight: 400;
  letter-spacing: .1em;
  cursor: pointer;
  transition: border-color .65s;
}
.sheet__form:hover { border-color: var(--gold); }
.sheet__form b,
.sheet__form span {
  padding: .62rem 1.05rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background .65s, color .65s;
}
.sheet__form b     { background: var(--gold); color: #06070f; }
.sheet__form span  { color: var(--text-dim); }
.sheet__inner.is-dark .sheet__form b    { background: transparent; color: var(--text-dim); }
.sheet__inner.is-dark .sheet__form span { background: var(--rift-hi); color: #06070f; }

/* 초상 위에 얹히는 직업 딱지 */
.sheet__badge {
  position: absolute;
  left: 0; bottom: 1.2rem;
  display: inline-flex;
  align-items: center;
  padding: .22rem 1rem;
  line-height: 1;
  background: var(--gold);
  font-family: var(--serif);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .08em;
  color: #06070f;
}

/* 글이 넘칠 때만 이 칸 안에서 조금 움직인다.
   창 전체가 아니라 오른쪽 글 칸만이라, 창은 흔들리지 않는다 */
.sheet__main {
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(207, 171, 114, .3) transparent;
}
.sheet__main::-webkit-scrollbar { width: 6px; }
.sheet__main::-webkit-scrollbar-track { background: transparent; }
.sheet__main::-webkit-scrollbar-thumb { background: rgba(207, 171, 114, .22); }
.sheet__main:hover::-webkit-scrollbar-thumb { background: rgba(207, 171, 114, .4); }

/* 미덕 · 참이름 · 무기 · 권능 */
.sheet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: .4rem;
}
.sheet__cell {
  padding: .45rem .7rem;
  background: rgba(207, 171, 114, .05);
  border-left: 1px solid var(--gold-line);
  /* 참이름으로 바뀔 때 칸도 같이 천천히 식는다 */
  transition: background .95s ease, border-color .95s ease;
}
.sheet__inner.is-dark .sheet__cell {
  background: rgba(157, 74, 76, .09);
  border-left-color: var(--rift-dim);
}
.sheet__cell b {
  display: block;
  margin-bottom: .16rem;
  font-family: var(--serif);
  font-size: .78rem; font-weight: 500;
  letter-spacing: 0;
  color: var(--gold-hi);
}
.sheet__cell span { font-size: .94rem; font-weight: 700; color: var(--text); }
.sheet__cell .is-virtue { color: var(--gold); }
.sheet__cell .is-sin    { color: var(--rift-hi); }
.sheet__cell .is-none   { color: var(--text-dim); }

@media (max-width: 680px) {
  .sheet__panel { height: auto; max-height: 100%; }
  .sheet__inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .sheet__side { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--gold-faint); }
}

.sheet__kicker {
  margin: 0 0 .45rem;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
}
.sheet__name { margin: 0 0 1rem; font-family: var(--char-name); font-size: clamp(1.5rem, 3.4vw, 1.95rem); font-weight: 800; color: #f3f5fc; }
.sheet__name em { font-style: normal; margin-left: .6rem; font-size: .5em; color: var(--gold-soft); letter-spacing: .2em; }
.sheet__line { margin: 0; font-size: 1.14rem; line-height: 1.95; color: var(--text); }
.sheet__line em { font-style: normal; color: var(--rift-hi); font-weight: 700; }
.sheet__line b { color: var(--gold); font-weight: 700; }

.sheet__block { margin-top: .85rem; padding-top: 0; border-top: 0; }
.sheet__block > b {
  display: block;
  margin-bottom: .5rem;
  padding-bottom: .38rem;
  border-bottom: 1px solid var(--gold-line);
  font-family: var(--serif);
  font-size: 1.1rem; font-weight: 500;
  letter-spacing: .02em; text-transform: none;
  color: var(--gold-hi);
}
.sheet__block p { margin: 0; font-size: .98rem; font-weight: 400; line-height: 1.62; color: var(--text-dim); }
.sheet__story {
  margin: .9rem 0 1.1rem;
  padding: .95rem 0 1.05rem;
  border-top: 1px solid var(--gold-faint);
  border-bottom: 1px solid var(--gold-faint);
}
.sheet__story > b { border-bottom: 0; margin-bottom: .55rem; padding-bottom: 0; }
.sheet__story p { font-size: 1rem; line-height: 1.78; color: var(--text); }

.sheet__relation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.sheet__relation {
  min-width: 0;
  padding: .65rem .75rem;
  border: 1px solid var(--gold-faint);
  background: rgba(207, 171, 114, .035);
  text-align: left;
  cursor: pointer;
  transition: border-color .35s ease, background .35s ease;
}
.sheet__relation:hover,
.sheet__relation:focus-visible {
  border-color: var(--gold-line);
  background: rgba(207, 171, 114, .075);
}
.sheet__relation strong,
.sheet__relation span { display: block; }
.sheet__relation strong { color: var(--gold-hi); font: 700 .9rem/1.45 var(--serif); }
.sheet__relation span { margin-top: .18rem; color: var(--text-dim); font: 400 .72rem/1.45 var(--sans); }
@media (max-width: 420px) {
  .sheet__relation-list { grid-template-columns: 1fr; }
}
/* 외형 태그는 그대로 복사해 쓰는 값이라 고정폭으로 */
.sheet__block code {
  display: block;
  padding: .75rem .9rem;
  background: rgba(207, 171, 114, .05);
  border-left: 1px solid var(--gold-line);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--gold-hi);
  word-break: break-word;
}

/* 사도 카드를 복제해 넣는다. 스크롤 없이 한 화면에 들어가야 하므로
   목록에 있을 때보다 조금만 키운다 */
.sheet__card .nine__name { margin-bottom: .2rem; font-size: clamp(1.7rem, 4vw, 2.1rem); }
.sheet__card .nine__name em { font-size: .72rem; letter-spacing: .3em; }
.sheet__card .nine__alias { font-size: 1.14rem; }
.sheet__card .nine__epithet { font-size: 1rem; margin-bottom: 1rem; }
.sheet__card .nine__stat > div { grid-template-columns: 5rem 1fr; font-size: 1.02rem; padding: .46rem 0; }
.sheet__card .nine__stat dt { font-size: .94rem; }
.sheet__card .nine__twist, .sheet__card .nine__why { font-size: 1rem; line-height: 1.8; }

/* 누를 수 있는 대상 */
.folk li, .nine__card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.folk li:focus-visible, .nine__card:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* 상자 대신 글자만 두고, 아래에서 금선이 자라나게 한다 */
/* 나라 고르는 줄. 붙어 있는 동안 뒤 내용이 비쳐 지저분해지므로 가려야 하는데,
   불투명한 상자를 그대로 두면 검은 띠가 화면을 뚝 자른다.
   그래서 상자를 좌우로 넓혀 화면 끝까지 빼고, 위아래는 서서히 풀리게 한다 */
/* 색인 — 상자도 유리질 배경도 없다. 나라 이름이 죽 늘어선 가는 줄 하나,
   지금 펼친 판 아래에만 붉은 눈금이 선다. 관인처럼 루브릭으로 찍는다 */
.people-tools {
  display: flex;
  align-items: end;
  gap: .8rem;
  max-width: 54rem;
  margin: 0 0 1rem;
}
.people-search {
  flex: 1;
  display: grid;
  gap: .5rem;
}
.people-search > span {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .24em;
  color: var(--gold-soft);
}
.people-search input {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1px solid var(--gold-faint);
  border-radius: 0;
  outline: none;
  background: rgba(8, 11, 22, .72);
  color: var(--text);
  font: 400 .92rem/1.5 var(--serif);
}
.people-search input::placeholder { color: rgba(174, 180, 198, .6); }
.people-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-line); }
.people-search__clear {
  min-height: 48px;
  padding: .7rem 1rem;
  border: 1px solid var(--gold-faint);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: .7rem;
  cursor: pointer;
}
.people-count {
  flex: none;
  min-width: 5rem;
  margin: 0 0 .8rem;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .12em;
  text-align: right;
  color: var(--gold-soft);
}

.tabs {
  position: sticky;
  top: 4.4rem;          /* 압축된 상단 바 바로 아래 */
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(1rem, 2.6vw, 2rem);
  margin-bottom: 2.6rem;
  padding: .8rem var(--pad) .8rem calc(var(--pad) * .4);
  margin-left: calc(var(--pad) * -.4);
  margin-right: calc(var(--pad) * -1);
  background: rgba(5, 7, 16, .82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gold-faint);
}
.tab {
  position: relative;
  min-height: 44px;
  padding: .55rem 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .2em;
  cursor: pointer;
  transition: color .6s, letter-spacing .6s;
}
/* 인원수는 위첨자처럼 작게 */
.tab i {
  font-style: normal;
  margin-left: .4rem;
  font-family: var(--latin);
  font-size: .8rem;
  color: var(--gold-soft);
  vertical-align: super;
  transition: color .6s;
}
/* 밑줄이 아니라 붉은 점 하나 — 지금 펼친 판을 가리키는 루브릭 표식 */
.tab::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -.15rem;
  width: 3px; height: 3px;
  background: var(--rift-hi);
  transform: translateX(-50%) scale(0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--gold-hi); letter-spacing: .26em; }
.tab.is-on i { color: var(--gold); }
.tab.is-on::before { transform: translateX(-50%) scale(1); background: var(--gold); }
.tab--abyss.is-on { color: var(--rift-hi); }
.tab--abyss.is-on i { color: var(--rift); }

/* 격자는 걷었다. 카드가 아니라 명부(名簿)라, 나라 판이 곧 하나의 두루마리 단이다.
   「전체」·「사도」에서도 판 경계는 그대로 두고 제목만 접는다 —
   줄로 흐르는 목록은 격자처럼 칸을 맞출 이유가 없다 */
.lands { max-width: 54rem; }
.lands.is-spread .land__head { display: none; }
.lands.is-spread .land { margin-top: 0; padding-top: 0; border-top: 0; }

.land {
  position: relative;
  max-width: 54rem;
  margin-top: clamp(2.4rem, 5vh, 3.6rem);
  padding-top: clamp(2.4rem, 5vh, 3.6rem);
  border-top: 1px solid var(--gold-faint);
}
.lands > .land:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* 나라를 고르면 판과 인물 목록이 아래에서 떠오른다 */
.land--enter { animation: landIn .7s cubic-bezier(.2, .8, .2, 1) both; }
/* backwards 로 두어야 등장이 끝난 뒤 마우스 올림 효과가 살아난다 */
.land--enter .folk li {
  animation: folkIn .55s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: var(--d, 0s);
}

@keyframes landIn  { from { opacity: 0; transform: translateY(22px); } }
@keyframes folkIn  { from { opacity: 0; transform: translateY(14px); } }

.land__head { position: relative; margin-bottom: 2.4rem; }
.land__name { margin: 0 0 .8rem; font-family: var(--heading); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; color: #f3f5fc; }
.land__name em { font-style: normal; margin-left: .8rem; font-size: .5em; color: var(--gold); letter-spacing: .3em; }
.land__char { margin: 0 0 1.2rem; max-width: 46rem; font-size: 1.14rem; line-height: 1.9; color: var(--text); }
.land__stance {
  margin: 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--rift);
  max-width: 46rem;
  font-size: 1.04rem;
  line-height: 1.9;
  color: var(--text-dim);
}
.land__stance span {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--sans);
  font-size: .7rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--rift-hi);
}

/* 세력 — 나라 아래 한 겹 더. 나라 탭보다 작고 조용하게 둔다 */
.clans {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.4rem 0 .4rem;
}
.clan {
  padding: .34rem .85rem;
  border: 1px solid var(--gold-faint);
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--serif);
  font-size: .95rem; font-weight: 400;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .55s, border-color .55s, background .55s;
}
.clan:hover { color: var(--text); border-color: var(--gold-line); }
.clan.is-on {
  background: var(--gold);
  border-color: var(--gold);
  color: #06070f;
  font-weight: 500;
}
.folk li[hidden] { display: none; }
.folk[hidden], .clans[hidden], .land[hidden] { display: none; }

.land__label {
  position: relative;
  margin: 2.4rem 0 .6rem;
  font-family: var(--sans);
  font-size: .74rem; font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold);
}

/* ── 명부 ──────────────────────────────────────
   액자로 세운 초상 대신, 이졸데가 옮겨 적었을 법한 명부 한 줄 한 줄.
   작은 문장(紋章) 자리 하나에 이름 · 직함 · 한 줄이 가로로 이어지고,
   56명이 쌓이면 그대로 긴 두루마리가 된다 */
.folk {
  list-style: none;
  margin: 1.6rem 0 0; padding: 0;
}
.folk:first-of-type { margin-top: 0; }

.folk li {
  position: relative;
  padding: 1.1rem 0 1.1rem 5.4rem;
  min-height: 4rem;
  border-bottom: 1px solid var(--gold-faint);
  transition: border-color .5s;
}
.folk li:hover,
.folk li:focus-visible {
  border-color: var(--gold-line);
}

/* 문장 자리 — 그림이 있으면 그림을, 없으면 이름의 첫 글자를 새긴 작은 패 */
.folk li::before {
  content: var(--ini, "");
  position: absolute;
  left: 0; top: 1.1rem;
  width: 3.6rem; height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem; font-weight: 800;
  line-height: 1;
  color: var(--gold);
  background: var(--ink-2);
  background-image: var(--img, none);
  background-size: cover;
  background-position: center top;
  border: 1px solid rgba(236, 237, 245, .18);
  opacity: .82;
  filter: grayscale(1) brightness(.7);
  transition: filter .6s, border-color .6s, opacity .6s;
}
.folk li:hover::before,
.folk li:focus-visible::before {
  filter: none;
  opacity: 1;
  border-color: var(--gold-line);
}
/* 그림이 붙은 패에서는 글자를 지운다 */
.folk li.has-image::before { content: ""; }

.folk li > i {
  position: relative;
  display: inline-block;
  margin-left: .8rem;
  font-style: normal;
  font-family: var(--serif);
  font-size: .84rem; font-weight: 500;
  letter-spacing: .04em;
  color: var(--gold-soft);
}

.folk b {
  position: relative;
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.3;
  color: #f3f5fc;
}
.folk b em { font-style: normal; font-size: .85rem; color: var(--gold-soft); letter-spacing: .06em; }

/* 한 줄 소개 — 액자 시절엔 글자 크기 0으로 숨겨 두었지만,
   명부에서는 이것이 본문이다. 그대로 드러낸다 */
.folk li > span {
  display: block;
  margin-top: .35rem;
  max-width: 42rem;
  font-size: .96rem;
  line-height: 1.75;
  color: var(--text-dim);
}

/* 사도는 문장 왼쪽에 금선 한 줄로 갈린다 — 카드 시절의 상단 금선이 옆으로 누웠다 */
.folk--blade li { border-left: 2px solid var(--gold); padding-left: calc(5.4rem - 2px); }
.folk--blade li::before { color: var(--gold-hi); opacity: .9; }

/* 천사 — 조각 없이 사도에 필적하는 유일한 존재. 이름 앞에 붙는 작은 표식으로 구분한다 */
.folk li[data-angel] { border-left: 2px solid var(--gold-hi); padding-left: calc(5.4rem - 2px); }
.folk__angel {
  display: inline-block;
  margin-right: .6rem;
  padding: .1rem .5rem;
  border: 1px solid var(--gold-line);
  font-family: var(--sans);
  font-size: .58rem; font-weight: 400;
  letter-spacing: .2em;
  color: var(--gold-hi);
  vertical-align: middle;
}
.folk__exception {
  display: inline-block;
  margin-right: .6rem;
  padding: .1rem .5rem;
  border: 1px solid var(--rift-dim);
  font-family: var(--sans);
  font-size: .58rem;
  font-style: normal;
  letter-spacing: .2em;
  color: var(--rift-hi);
  vertical-align: middle;
}

/* 커서를 올리면 소개 아래 스테이터스 막대가 값만큼 채워져 떠오른다 */
.folk__stats {
  position: relative;
  margin: 0;
  max-width: 20rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(4px);
  transition: max-height .55s ease, opacity .5s ease, transform .55s ease, margin-top .55s ease;
}
.folk li:hover .folk__stats,
.folk li:focus-visible .folk__stats {
  margin-top: .6rem;
  max-height: 6rem;
  opacity: 1;
  transform: translateY(0);
}
.folk__stat {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .3rem;
}
.folk__stat:first-child { margin-top: 0; }
.folk__stat-label {
  flex: none;
  width: 2.4rem;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--text);
}
.folk__stat-track {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(216, 205, 176, .18);
}
.folk__stat-track i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--text);
}


/* ── 10-b. 균등형 초상 색인 ───────────────────
   쉰여섯 명 모두 같은 크기와 같은 정보량으로 놓는다.
   사도와 예외도 카드 크기를 키우지 않고 기록 표식만 달리한다. */
#people .chapter-visual { margin-bottom: clamp(2.8rem, 7vh, 5rem); }
#people .chapter__intro { max-width: 58rem; margin-bottom: clamp(2.8rem, 7vh, 5rem); }

.people-passage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(3.6rem, 8vh, 6rem);
  padding: 1rem 0;
  border-top: 1px solid var(--gold-faint);
  border-bottom: 1px solid var(--gold-faint);
}

.people-index-toggle {
  flex: none;
  min-height: 44px;
  padding: .55rem 0;
  border: 0;
  background: transparent;
  color: var(--gold-hi);
  font-family: var(--serif);
  font-size: .9rem;
  cursor: pointer;
}
.people-index-toggle span {
  display: inline-block;
  width: 1.6rem;
  color: var(--gold);
  font-family: var(--latin);
  font-size: 1.05rem;
}

.people-chapters {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .35rem clamp(.9rem, 2.3vw, 1.8rem);
}
.people-chapters button {
  position: relative;
  min-height: 42px;
  padding: .5rem 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--serif);
  font-size: .88rem;
  cursor: pointer;
  transition: color .35s ease;
}
.people-chapters button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: .25rem;
  height: 1px;
  background: var(--gold);
  transition: right .35s ease;
}
.people-chapters button:hover,
.people-chapters button:focus-visible { color: var(--gold-hi); }
.people-chapters button:hover::after,
.people-chapters button:focus-visible::after { right: 0; }

.people-regions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-bottom: 1rem;
  padding: .8rem 0;
  border-top: 1px solid var(--gold-faint);
  border-bottom: 1px solid var(--gold-faint);
}
.people-region {
  position: relative;
  flex: none;
  min-height: 44px;
  padding: .55rem 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--serif);
  font-size: .92rem;
  cursor: pointer;
  transition: color .35s ease;
}
.people-region::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .2rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.people-region:hover,
.people-region:focus-visible { color: var(--text); }
.people-region.is-on { color: var(--gold-hi); }
.people-region.is-on::after { transform: scaleX(1); }
.people-region--abyss.is-on { color: var(--rift-hi); }
.people-region--abyss.is-on::after { background: var(--rift-hi); }

.people-view-status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2.2rem, 5vh, 3.8rem);
  color: var(--text-dim);
}
.people-view-status p { margin: 0; font-size: .92rem; }
.people-view-status span {
  flex: none;
  font-family: var(--latin);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}

#people .people-tools {
  max-width: none;
  margin-bottom: 1rem;
}

#people .people-search input {
  min-height: 52px;
  background: rgba(5, 7, 16, .88);
}

#people .people-count {
  min-width: 11rem;
  font-variant-numeric: tabular-nums;
}

.people-index {
  position: relative;
  margin-bottom: clamp(2.4rem, 5vh, 4rem);
  padding: clamp(1rem, 2.5vw, 1.6rem);
  background: rgba(5, 7, 16, .78);
  border: 1px solid var(--gold-faint);
}

.people-filter-row,
.people-sort-row {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: center;
  min-height: 3.2rem;
  border-top: 1px solid rgba(207, 171, 114, .08);
}
.people-filter-row:first-child { border-top: 0; }

.people-filter-label {
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .26em;
  color: var(--gold-soft);
}

.people-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem clamp(.8rem, 2vw, 1.55rem);
}

.people-filter {
  position: relative;
  min-height: 42px;
  padding: .55rem 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--serif);
  font-size: .9rem;
  cursor: pointer;
  transition: color .35s ease;
}
.people-filter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .25rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.people-filter:hover,
.people-filter:focus-visible { color: var(--text); }
.people-filter.is-on { color: var(--gold-hi); }
.people-filter.is-on::after { transform: scaleX(1); }
.people-filter--abyss.is-on { color: var(--rift-hi); }
.people-filter--abyss.is-on::after { background: var(--rift-hi); }

.people-sort {
  position: relative;
  width: max-content;
}
.people-sort::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: .7rem;
  color: var(--gold-soft);
  transform: translateY(-55%);
  pointer-events: none;
}
.people-sort select {
  min-width: 8.2rem;
  min-height: 40px;
  padding: .45rem 2.1rem .45rem .75rem;
  border: 1px solid var(--gold-faint);
  border-radius: 0;
  outline: none;
  appearance: none;
  background: rgba(8, 11, 22, .72);
  color: var(--text);
  font: 400 .86rem/1.4 var(--serif);
  cursor: pointer;
}
.people-sort select:focus { border-color: var(--gold); }

.people-empty {
  margin: 0;
  padding: clamp(4rem, 10vh, 7rem) 1rem;
  border-top: 1px solid var(--gold-faint);
  border-bottom: 1px solid var(--gold-faint);
  text-align: center;
  color: var(--text-dim);
}

#people .lands {
  display: block;
  max-width: none;
  padding: 0;
  background: transparent;
}

#people .lands.is-all {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.8rem);
}
#people .lands.is-all .land,
#people .lands.is-all .folk { display: contents; }
#people .lands.is-all .land__head { display: none !important; }

#people .land {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.8rem);
  max-width: none;
  margin-top: clamp(7rem, 15vh, 11rem);
  padding-top: clamp(3.2rem, 7vh, 5rem);
  border-top: 1px solid var(--gold-faint);
  scroll-margin-top: 6rem;
}
#people .lands > .land:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
#people .lands:not(.is-all) .land:not([hidden]) {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#people .folk {
  display: contents;
}
#people .land[hidden],
#people .folk[hidden],
#people .folk li[hidden] { display: none; }

#people .clans,
#people .land__label { display: none !important; }

#people .land__head {
  position: relative;
  z-index: 1;
  display: block !important;
  grid-column: 1 / -1;
  max-width: 50rem;
  margin: 0 0 clamp(1.8rem, 4vh, 3rem);
}
#people .land__name {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
}
#people .land__char {
  max-width: 46rem;
  margin-bottom: 0;
  font-size: clamp(.98rem, 1.6vw, 1.12rem);
  color: var(--text-dim);
}
#people .land__stance { margin-top: 1.2rem; }

#people .folk li {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0 0 .9rem;
  border: 0;
  background: rgba(5, 7, 16, .42);
  cursor: pointer;
  overflow: hidden;
  transition: background .45s ease, box-shadow .45s ease;
}
#people .folk li:hover,
#people .folk li:focus-visible {
  background: rgba(13, 17, 30, .72);
  box-shadow: inset 0 -1px 0 var(--gold-line);
  outline: none;
}

#people .folk li::before {
  content: var(--ini, "");
  position: relative;
  inset: auto;
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #080b16;
  background-image:
    linear-gradient(180deg, transparent 55%, rgba(5, 7, 16, .88)),
    var(--img, none);
  background-size: cover;
  background-position: center top;
  border: 0;
  border-bottom: 1px solid rgba(207, 171, 114, .12);
  color: var(--gold);
  font-family: var(--char-name);
  font-size: clamp(3.8rem, 8vw, 7rem);
  font-weight: 800;
  opacity: .82;
  filter: grayscale(1) brightness(.64);
  transition: filter .65s ease, opacity .65s ease, transform .8s ease;
}
#people .folk li[data-virtue]::before,
#people .folk li[data-exception]::before {
  background-position: left top;
}
#people .folk li:hover::before,
#people .folk li:focus-visible::before {
  border-color: rgba(207, 171, 114, .12);
  filter: grayscale(.15) brightness(.84);
  opacity: 1;
  transform: scale(1.012);
}
#people .folk li.has-image::before { content: ""; }

#people .folk li::after {
  display: none;
}

#people .folk b {
  order: 2;
  margin: .95rem .9rem 0;
  font-family: var(--char-name);
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#people .folk b em { font-size: .72em; }

#people .folk li > i {
  order: 3;
  display: block;
  margin: .25rem .9rem 0;
  font-size: .8rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#people .folk__meta {
  order: 4;
  display: block;
  min-height: 1.5rem;
  margin: .45rem .9rem 0;
  padding-top: .45rem;
  border-top: 1px solid rgba(207, 171, 114, .08);
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: .62rem;
  line-height: 1.45;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .4s ease;
}
#people .folk li:hover .folk__meta,
#people .folk li:focus-visible .folk__meta { opacity: .72; }

#people .folk li > span:not(.folk__meta),
#people .folk__stats,
#people .folk__angel,
#people .folk__exception { display: none; }

#people .folk--blade li,
#people .folk li[data-angel] { padding-left: 0; border-left: 0; }

@media (max-width: 1100px) {
  #people .land { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #people .lands.is-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .people-regions {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .people-regions::-webkit-scrollbar { display: none; }
  .people-view-status { align-items: flex-start; }
  .people-passage { align-items: flex-start; flex-direction: column; }
  .people-chapters { justify-content: flex-start; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .people-chapters::-webkit-scrollbar { display: none; }
  .people-chapters button { flex: none; }
  .people-filter-row,
  .people-sort-row {
    grid-template-columns: 1fr;
    gap: .2rem;
    padding: .65rem 0;
  }
  .people-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .people-filters::-webkit-scrollbar { display: none; }
  .people-filter { flex: none; }
  #people .land { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  #people .lands.is-all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  #people .land__head { margin-bottom: 1.4rem; }
  #people .people-count { min-width: 0; }
  .sheet__side { aspect-ratio: 4 / 3; max-height: 42vh; }
}

@media (max-width: 420px) {
  #people .folk li::after { top: .5rem; left: .5rem; }
  #people .folk b,
  #people .folk li > i,
  #people .folk__meta { margin-left: .7rem; margin-right: .7rem; }
}


/* ── 11. 미정 ──────────────────────────────── */
.opens {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: open;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.open { counter-increment: open; padding: 1.6rem 0; border-top: 1px solid var(--gold-line); }
.open h3 { margin: 0 0 .7rem; font-size: 1.2rem; font-weight: 700; color: #f3f5fc; }
/* 번호를 적색으로 — 미해결이라는 표시 */
.open h3::before { content: counter(open) " · "; color: var(--rift-hi); font-family: var(--latin); }
.open p { margin: 0; font-size: 1.04rem; line-height: 1.9; color: var(--text-dim); }
.open p em { color: var(--gold); font-style: normal; font-weight: 700; }
.open p b { color: var(--text); font-weight: 700; }


/* ── 12. 푸터 ──────────────────────────────── */
.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  padding: 5rem var(--pad);
  border-top: 1px solid var(--gold-line);
  text-align: center;
}
.foot .rule-diamond { width: 180px; }
.foot__line { margin: 0; font-size: .95rem; color: var(--text-dim); letter-spacing: .06em; }


/* ── 13. 등장 연출 ───────────────────────────
   활을 긋듯 들어온다. 튀어 오르는 곡선(.2,.8,.2,1)은 끝이 탁 멈춰서
   현악의 감쇠와 안 맞는다 — 시작도 끝도 흐릿한 곡선으로 바꾸고 배로 늘렸다 */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2.1s cubic-bezier(.22, .61, .21, 1),
              transform 2.1s cubic-bezier(.22, .61, .21, 1);
}
.reveal.is-in { opacity: 1; transform: none; }


/* ── 14. 반응형 ────────────────────────────── */
@media (max-width: 900px) {
  .chapter__grid { grid-template-columns: 1fr; }
  .hero__sigil { right: -30vw; opacity: .35; }
  .hero__glow { right: -20vw; }
  .topnav a i { display: none; }
  .tabs { top: 0; }
}

@media (max-width: 760px) {
  .topbar { gap: clamp(.8rem, 2.4vw, 1.2rem); }
  .topnav {
    flex: 1;
    gap: clamp(.65rem, 2.2vw, 1rem);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { flex: none; letter-spacing: .08em; }
  .topbar .sound-control {
    position: static;
    gap: 0;
    margin-left: auto;
  }
  .topbar .bgm { padding: .42rem .62rem; }
  .topbar .sound-volume { display: none; }
}

@media (max-width: 560px) {
  html { font-size: 100%; }
  .topbar {
    flex-direction: row;
    align-items: center;
    gap: .8rem;
    padding: .78rem max(1rem, env(safe-area-inset-right)) .78rem max(1rem, env(safe-area-inset-left));
  }
  .topbar__mark-ko { font-size: .9rem; letter-spacing: .2em; }
  .topnav {
    flex: 1;
    gap: clamp(.55rem, 2.7vw, .9rem);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: 0;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { flex: none; min-height: 44px; font-size: .72rem; letter-spacing: .04em; }
  .progress { display: none; }
  .hero { padding-top: 7rem; }
  .hero__scroll { display: none; }
  .nine { grid-template-columns: 1fr; }
  .choices { grid-template-columns: 1fr; }
  .worlds li { grid-template-columns: 1fr; gap: .2rem; }
  /* 막 비율은 제목 위로 올린다 */
  .act__pct { position: static; margin-bottom: .4rem; }
  .atlas-mobile__places { grid-template-columns: 1fr; }
  .people-tools { align-items: stretch; flex-wrap: wrap; }
  .people-search { flex-basis: 100%; }
  .people-search__clear { flex: 1; }
  .people-count { align-self: center; margin: 0; }
  .tabs { position: static; gap: .35rem 1.1rem; margin-left: 0; padding-left: 0; }
  .tab { font-size: .78rem; }
}


/* ── 15. 애니메이션을 끈 사용자 존중 ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sigil-slow, .sigil-fast, .sigil-core,
  .hero__scroll i::after, .hero__glow,
  .star { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}