/* ============================================================
   雲谷 3D — 구름 골짜기 익스플로러
   디자인 시스템: ung/assets/css/style.css 의 토큰·규칙 계승
   (흰 배경 · 수묵 산수 · 모노톤 · 세리프 · 낙관 주홍 포인트)
   주의: :hover 시각 변화 금지 — 선택/포커스만 상태 표현.
   ============================================================ */

:root {
  --ink:        #1a1a1a;
  --ink-soft:   #3d3d3d;
  --gray:       #6f6f6f;
  --gray-light: #9a9a9a;
  --line:       #e4e2dd;
  --line-soft:  #efeee9;
  --paper:      #ffffff;
  --paper-warm: #faf9f6;
  --accent:     #8a1f1f;

  /* 기본 폰트 전체 Noto Sans 통일 — 기존 --serif 사용처도 모두 Noto Sans로 렌더 (雲谷 브러시 로고만 예외) */
  --serif: 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --sans:  'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --brush: 'Ma Shan Zheng', 'Noto Sans KR', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --drawer-w: clamp(300px, 33vw, 384px);
}

* { box-sizing: border-box; }

/* 모바일 — 페이지에 스크롤할 것이 없다: 당겨서 새로고침·러버밴드·주소줄 제스처를
   차단하고 스와이프는 오직 투어 진행에만 쓴다 (scrollDriver 의 preventDefault 와 이중 안전망) */
html { -webkit-text-size-adjust: 100%; height: 100%; overscroll-behavior: none; }

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.75;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  text-wrap: pretty;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 종이 질감 오버레이 — 가장자리 비네트(::before) + 한지 그레인(::after) ----------
   캔버스 위·HUD 아래. 인쇄물 같은 재질감을 아주 옅게 얹는다. */
:root { --grain-alpha: 0.05; }
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 6;
  pointer-events: none;
  /* 스튜디오 무드 — 가장자리 비네트 + 상단(천장)을 짙게 감싸 깊이 부여 */
  background:
    radial-gradient(ellipse 122% 116% at 50% 44%, rgba(72,62,46,0) 50%, rgba(72,62,46,0.15) 100%),
    linear-gradient(to bottom, rgba(64,55,40,0.13) 0%, rgba(64,55,40,0) 28%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 6;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: var(--grain-alpha);
}
/* ---------- WebGL 캔버스 + 스크롤 스페이서 ---------- */
#gl {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  display: block;
  outline: none;
  touch-action: none;   /* 캔버스 위 제스처는 브라우저가 아니라 투어가 처리 */
  transition: width .42s var(--ease), right .42s var(--ease);   /* 목차 열고 닫을 때 부드럽게 */
}
#scroll-space { position: relative; width: 1px; }   /* 높이는 JS 가 경로 길이에 맞춰 설정 */

/* ---------- 로딩 스크린 — ung 홈 히어로 이식 (구름 배경 줌 + 붓글씨 로고 쓰임 연출) ---------- */
body.is-covered { overflow: hidden; }   /* 입장 전 스크롤 잠금 — 투어 진행도 오염 방지 */

.loading {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  text-align: center;
  background: var(--paper);
  overflow: hidden;
  padding: 64px 24px 120px;
  transition: opacity 2.1s var(--ease), visibility 2.1s var(--ease);
}
.loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.loading__bg {
  position: absolute; inset: 0;
  background: url('../img/intro/bg-wide.webp') center bottom / cover no-repeat;
  opacity: .92;
  transform-origin: center 72%;
  animation: heroZoom 22s cubic-bezier(.12,.7,.2,1) forwards;
}
.loading__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.4) 38%, rgba(255,255,255,0) 66%);
}
@keyframes heroZoom { from { transform: scale(1.26); } to { transform: scale(1); } }

.loading__inner {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(-4vh);   /* 시각 중심 보정 — 살짝 위로 */
}
.loading__eyebrow {
  font-size: 18px; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 30px;
  opacity: 0; animation: heroUp .8s ease .15s forwards;
}
.loading__logo {
  width: min(400px, 68vw); height: auto;
  overflow: visible;
  /* 좌상단→우하단 부드러운 대각선 마스크 — 붓으로 써지듯 드러남 */
  -webkit-mask-image: linear-gradient(135deg, #000 34%, rgba(0,0,0,0) 60%);
          mask-image: linear-gradient(135deg, #000 34%, rgba(0,0,0,0) 60%);
  -webkit-mask-size: 260% 260%; mask-size: 260% 260%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%; mask-position: 100% 100%;
  filter: blur(9px);
  opacity: .2;
  animation: heroWrite 2.6s cubic-bezier(.4,0,.2,1) .35s forwards;
}
@media (max-width: 640px) { .loading__logo { width: min(320px, 60vw); } }
.loading__sign { height: 60px; width: auto; margin-top: 26px; opacity: 0; animation: heroUp .9s ease 2.1s forwards; }

@keyframes heroWrite {
  to { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; filter: blur(0); opacity: 1; }
}
@keyframes heroUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* 중앙 하단 — 로딩바 (threejs 로딩 완료 시 타이틀과 함께 블러로 잦아든다)
   주의: heroUp 애니메이션이 transform 을 덮어쓰므로 translateX 중앙 정렬 금지 → left/right 스팬 */
.loading__foot {
  position: absolute; bottom: 72px; left: 0; right: 0;
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; animation: heroUp .8s ease .5s forwards;
}
.loading__bar {
  width: min(260px, 60vw); height: 3px; border-radius: 2px;
  background: rgba(26, 26, 26, .12);
  position: relative; overflow: hidden;
}
.loading__bar i {
  position: absolute; inset: 0; border-radius: 2px;
  transform-origin: left center; transform: scaleX(0);
  background: var(--accent);   /* transform 은 rAF 가 매 프레임 구동 — transition 불필요 */
}
.loading__pct {
  font-size: 12px; color: var(--gray); letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}

/* 관람 방식 선택 — 히어로가 걷힌 뒤 3D 시작 화면 위 중앙 하단 */
.mode-choice {
  position: fixed; left: 0; right: 0; bottom: 72px; z-index: 22;
  display: flex; justify-content: center; gap: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .8s var(--ease), visibility .8s var(--ease), right .4s var(--ease);
}
.mode-choice.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.mode-choice__btn {
  min-width: 116px;
  padding: 11px 24px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  background: rgba(255, 255, 255, .55);          /* 반투명 */
  border: 1px solid rgba(61, 61, 61, .55);
  outline: 1px solid rgba(24, 22, 19, .16);      /* 내부 헤어라인 — 이중 액자 프레임 */
  outline-offset: -4px;
  box-shadow: 0 10px 26px rgba(26, 26, 26, .12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mode-choice__btn--auto {
  color: #f5f3ef;
  background: rgba(24, 22, 19, .66);             /* 먹색 반투명 */
  border-color: rgba(24, 22, 19, .5);
  outline-color: rgba(245, 243, 239, .25);
}
.mode-choice__btn:focus-visible { outline-color: var(--accent); }
/* 선택 중에는 하단 스크롤 힌트를 잠시 숨긴다 */
body.is-choosing .hud__hint { display: none; }

/* 퇴장(.is-exit) — 타이틀이 다시 블러 속으로 사라지고, 이어서 오버레이(.is-done)가 걷힌다 */
@keyframes heroBlurOut {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(9px); }
}
@keyframes heroLogoOut {   /* 마스크는 쓰여진 상태(0% 0%) 그대로 유지한 채 블러로 용해 */
  from { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; opacity: 1; filter: blur(0); }
  to   { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; opacity: 0; filter: blur(9px); }
}
/* fill-mode 'both' — 딜레이 구간에도 from 프레임을 적용해, 교체 직전 기본 상태로
   튀는 깜박임(로고가 한 번 사라졌다 나타나는 현상)을 방지한다.
   퇴장은 느긋하게 — 여운을 남기며 걷힌다 */
.loading.is-exit .loading__eyebrow { animation: heroBlurOut 1.5s ease both; }
.loading.is-exit .loading__logo    { animation: heroLogoOut 1.8s ease .12s both; }
.loading.is-exit .loading__sign    { animation: heroBlurOut 1.5s ease .24s both; }
.loading.is-exit .loading__foot    { animation: heroBlurOut 1.2s ease both; }

@media (prefers-reduced-motion: reduce) {
  .loading__bg, .loading__eyebrow, .loading__logo, .loading__sign, .loading__foot {
    animation: none; opacity: 1; filter: none; transform: none;
  }
  .loading__bg { opacity: .92; }
  .loading__logo { -webkit-mask-image: none; mask-image: none; }
  .loading.is-exit .loading__eyebrow, .loading.is-exit .loading__logo,
  .loading.is-exit .loading__sign, .loading.is-exit .loading__foot { animation: none; }
}

/* ---------- HUD ---------- */
/* 비네트 — 가장자리를 미묘하게 눌러 공간의 밀도·접지감 확보 (인터랙션 무관 정적 오버레이) */
.vignette {
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 60%, rgba(84,72,56,.15) 100%);
}

.hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.hud > * { pointer-events: auto; }

.hud__brand {
  position: fixed; top: 20px; left: clamp(20px, 3vw, 40px); z-index: 21;
  display: flex; align-items: center; gap: 12px;
}
/* 단색 검정 로고 — 그림자 없이. 하이키 아이보리 톤에서 먹색으로 또렷하게 */
.hud__brand img {
  height: 28px; width: auto;
  filter: brightness(0);
}
.hud__brand-sub {
  font-size: 11px; color: #2e2a24; letter-spacing: .04em; white-space: nowrap;
}
@media (max-width: 720px) { .hud__brand-sub { display: none; } }

.hud__right {
  position: absolute; top: 20px; right: clamp(20px, 3vw, 40px);
  display: flex; align-items: center; gap: 14px;
}
.hud__flat {
  font-size: 12px; color: var(--ink-soft); letter-spacing: .04em;
  border: 1px solid var(--line); background: rgba(255,255,255,.75);
  padding: 7px 14px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hud__flat:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 언어 전환 (ung 계승) */
.lang-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* 자동 둘러보기 토글 — 가운데 하단. 대기: ▶ + "자동으로 보기" / 재생 중: ⏸ + "멈춤" */
.tour-toggle {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 6px 16px;
  font-family: var(--sans); font-size: 13px; line-height: 1.3;
  color: var(--gray);
}
body.is-choosing .tour-toggle { display: none; }   /* 관람 방식 선택 중에는 중복 노출 방지 */
/* 종점 버튼 바(endbar)가 떠 있는 동안에도 토글은 양보 */
body.is-endbar .tour-toggle { opacity: 0; visibility: hidden; pointer-events: none; }
.tour-toggle { transition: opacity .5s var(--ease), visibility .5s var(--ease); }
.tour-toggle__ic { width: 10px; height: 10px; fill: currentColor; }
.tour-toggle .tour-toggle__pause { display: none; }
.tour-toggle[aria-pressed="true"] { color: var(--ink); }
.tour-toggle[aria-pressed="true"] .tour-toggle__play { display: none; }
.tour-toggle[aria-pressed="true"] .tour-toggle__pause { display: block; }
.tour-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* 배경음악 토글 — 언어 전환 왼쪽.
   아이콘 = 현재 상태(재생: 움직이는 바 / 꺼짐: 정지 바 + 음소거 사선),
   텍스트 = 누르면 일어날 행동("배경음 끄기"/"배경음 켜기") */
.bgm-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 4px 13px;
  font-family: var(--sans); font-size: 13px; line-height: 1.3;
  color: var(--gray);
}
.bgm-toggle__bars { position: relative; display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.bgm-toggle__bars i { width: 2px; background: currentColor; }
.bgm-toggle__bars i:nth-child(1) { height: 5px; }
.bgm-toggle__bars i:nth-child(2) { height: 9px; }
.bgm-toggle__bars i:nth-child(3) { height: 6px; }
.bgm-toggle__bars i:nth-child(4) { height: 10px; }
/* 꺼짐 — 음소거 사선(플레이어 관례) */
.bgm-toggle[aria-pressed="false"] .bgm-toggle__bars::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 50%;
  height: 1.5px; background: var(--accent);
  transform: rotate(-28deg);
}
.bgm-toggle[aria-pressed="false"] .bgm-toggle__bars { opacity: .55; }
.bgm-toggle[aria-pressed="true"] { color: var(--ink); }
.bgm-toggle[aria-pressed="true"] .bgm-toggle__bars i { animation: bgmEq 0.9s ease-in-out infinite alternate; }
.bgm-toggle[aria-pressed="true"] .bgm-toggle__bars i:nth-child(1) { animation-duration: .82s; animation-delay: -.35s; }
.bgm-toggle[aria-pressed="true"] .bgm-toggle__bars i:nth-child(2) { animation-duration: 1.04s; animation-delay: -.6s; }
.bgm-toggle[aria-pressed="true"] .bgm-toggle__bars i:nth-child(3) { animation-duration: .74s; animation-delay: -.15s; }
.bgm-toggle[aria-pressed="true"] .bgm-toggle__bars i:nth-child(4) { animation-duration: .96s; animation-delay: -.8s; }
@keyframes bgmEq { from { height: 3px; } to { height: 11px; } }
.bgm-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .bgm-toggle[aria-pressed="true"] .bgm-toggle__bars i { animation: none; }
}
.lang-switch__opt {
  border: 0; background: none; padding: 5px 13px;
  font-family: var(--sans); font-size: 11px; line-height: 1;
  letter-spacing: .08em; color: var(--gray);
}
.lang-switch__opt + .lang-switch__opt { border-left: 1px solid var(--line); }
.lang-switch__opt[aria-pressed="true"] { background: rgba(26,26,26,.07); color: var(--ink); font-weight: 700; }
.lang-switch__opt:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* 챕터 탭 (좌중단) — 기존 gx__tab 계승 */
.hud__tab {
  position: absolute; left: clamp(24px, 4vw, 48px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease);
  /* 전시월 정면 뷰에서 액자 위에 얹혀도 읽히도록 */
  background: rgba(253,253,252,.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 22px 26px 20px;
  min-width: 220px; box-sizing: border-box;   /* 내용이 짧아도 카드가 좁아지지 않게 */
  border: 1px solid var(--line-soft);
}
.hud__tab.is-on { opacity: 1; }
.hud__tab-no { font-family: var(--serif); font-size: 13px; letter-spacing: .22em; color: var(--accent); }
.hud__tab-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.hud__tab-ko { font-family: var(--serif); font-weight: 700; font-size: clamp(23px, 3.2vh, 32px); line-height: 1; color: var(--ink); letter-spacing: .02em; }
.hud__tab-en { font-size: 13px; letter-spacing: .04em; font-style: italic; color: var(--gray-light); }
.hud__tab-line { margin: 6px 0 0; font-family: var(--serif); font-size: 14px; color: var(--ink-soft); max-width: 22ch; line-height: 1.6; }
.hud__tab-line--body { margin-top: 12px; max-width: 34ch; font-size: 13.5px; line-height: 1.85; }
@media (max-width: 720px) {
  /* 존 타이틀 카드 — 모바일: 좌측 상단(벽 윗선 높이)의 컴팩트 태그. 본문 없이 존 이름만,
     라운드 없음(데스크톱과 동일 결), 페이드·슬라이드 없이 즉시 표시 (hud.js 도 720px 이하에서 animate 생략) */
  .hud__tab {
    top: 11vh; bottom: auto;   /* 상단 HUD 바로 아래 하늘 영역 — 벽 콘텐츠와 확실히 분리 (27→11vh) */
    left: 12px; transform: none;
    flex-direction: row; align-items: baseline;
    min-width: 0; width: max-content; max-width: 88vw;
    padding: 7px 15px; gap: 6px;
    transition: none;
  }
  .hud__tab-head { gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
  .hud__tab-ko { font-size: 15px; }
  .hud__tab-en { font-size: 11px; }
  .hud__tab-line { display: none; }
}

/* 스크롤 힌트 — 발자국(앞=전진) 아래에 리지 스크롤 휠. 휠 리지가 아래로 굴러
   '휠을 굴리면 바닥면이 전진 = 스크롤=전진'을 그대로 보여준다. */
.hud__hint {
  position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%);   /* 하단 토글 위 — hud 밖 독립 요소 */
  z-index: 19;   /* hud(20) 아래 — 버튼류를 가리지 않는다 */
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0; color: #fff; transition: opacity .5s var(--ease), left .4s var(--ease);
  mix-blend-mode: difference;   /* 밝은 벽 위=먹색, 어두운 바닥 위=흰색으로 반전 — 배경 무관 가독 */
  pointer-events: none;   /* 비인터랙티브 힌트 — 숨겨져도(opacity:0) 하위 버튼 클릭을 막지 않게 */
}
.hud__hint.is-hidden { opacity: 0; }
body.is-autotour .hud__hint { opacity: 0; }   /* 자동 관람 중 — 스크롤 안내 불필요 */
body.is-endbar .hud__hint { opacity: 0; }     /* 종점 버튼 바 표시 중 — 스크롤 안내 불필요 */
.hud__scroll { position: relative; display: inline-flex; }
.hud__mouse { position: relative; z-index: 1; width: 22px; height: auto; }
/* 터치 기기 — 마우스 휠 아이콘 대신 위로 쓸어 올리는 셰브론 */
.hud__swipe { display: none; position: relative; z-index: 1; width: 22px; height: auto; }
@media (hover: none) and (pointer: coarse) {
  .hud__mouse { display: none; }
  .hud__swipe { display: block; animation: swipeUp var(--scroll-beat, 1.8s) ease-in-out infinite; }
}
@keyframes swipeUp {
  0%   { transform: translateY(7px);  opacity: 0; }
  28%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(-7px); opacity: 0; }
}
/* 점 하강(등속·무정지 loop)과 물결 발산을 같은 주기(--scroll-beat)로 묶는다 */
.hud__scroll { --scroll-beat: 1.8s; }
/* 점은 쉬는 구간 없이 위→아래로 끊김 없이 계속 흘러내린다(linear). 위·아래 끝에서만 페이드해 loop 이음매를 감춤 */
.hud__mouse-dot { animation: mouseScroll var(--scroll-beat) linear infinite; }
@keyframes mouseScroll {
  0%   { transform: translateY(0);   opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(9px); opacity: 0; }
}
/* 마우스 주위 단방향 방사 펄스 — inset(가장자리) 링형 흰색 그라데이션이 밖으로 번져 사라짐(역방향 없음) */
.hud__pulse {
  position: absolute; left: 50%; top: 54%; z-index: 0;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.36) 63%,
    rgba(255,255,255,.12) 78%,
    rgba(255,255,255,0) 90%);
  transform: scale(.3); opacity: 0;
  /* 점과 완전 동일: 같은 주기·같은 시작(0%)·같은 등속(linear) → 반경이 점 위치에 정확히 비례 */
  animation: mousePulse var(--scroll-beat) linear infinite;
}
/* 점이 위→아래로 내려가는 만큼 물결도 같은 속도로 밖으로 퍼진다(1:1 동기) */
@keyframes mousePulse {
  0%   { transform: scale(.3);  opacity: 0; }
  18%  { opacity: .4; }
  82%  { opacity: .14; }
  100% { transform: scale(3);   opacity: 0; }
}
.hud__hint-txt {
  margin: 13px 0 6px; text-align: center; line-height: 1.9;
  font-size: 13px; letter-spacing: .1em; color: #fff; font-weight: 500;   /* difference 블렌드용 흰색 */
}
@media (prefers-reduced-motion: reduce) {
  .hud__mouse-dot { animation: none; }
  .hud__swipe { animation: none; }
  .hud__pulse { animation: none; opacity: 0; }
}
.hud__clickhint {
  position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);   /* 하단 토글 위 — 겹침 방지 */
  margin: 0; font-size: 14px; color: #f5f3ef;
  background: rgba(24, 22, 19, .92); border: 1px solid rgba(24, 22, 19, .92);
  padding: 9px 20px; border-radius: 999px; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .7s var(--ease);
  pointer-events: none;
}
.hud__clickhint.is-on { opacity: 1; }
body.is-endbar .hud__clickhint { opacity: 0; }   /* 종점 버튼 바와 겹침 방지 — 이미 떠 있어도 덮는다 */

/* ---------- 에필로그 (경로 종점에서 디졸브 인) ---------- */
.epilogue {
  position: fixed; inset: 0; z-index: 15;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  text-align: center; padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 1.4s var(--ease), visibility 1.4s var(--ease);
  /* 여정의 끝 — 장면이 종이 흰색으로 녹아든다 */
  background: radial-gradient(ellipse at center, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.72) 100%);
}
.epilogue.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.epilogue__sign { height: 84px; width: auto; opacity: .75; }
.epilogue__line {
  margin: 0; font-family: var(--serif); font-size: clamp(17px, 2.4vh, 21px);
  line-height: 1.9; color: var(--ink-soft); max-width: 30ch; text-wrap: balance;
}
.epilogue__dates { margin: 0; font-size: 12px; letter-spacing: .18em; color: var(--gray-light); }
.epilogue__links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.epilogue__links a {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ink); background: rgba(255,255,255,.8);
  padding: 13px 24px; font-family: var(--serif); font-size: 14px; color: var(--ink); letter-spacing: .04em;
}
.epilogue__links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- 내비게이션 — 챕터 버튼·팝오버·진행 바 스트립·종점 바 ---------- */
.nav-fab {
  position: fixed; right: clamp(14px, 2.2vw, 28px); bottom: 42px; z-index: 22;
  width: 62px; height: 62px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(253,253,252,.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.nav-fab__ring {
  position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
  transform: rotate(-90deg); overflow: visible;
}
.nav-fab__track { fill: none; stroke: var(--line); stroke-width: 2.4; }
.nav-fab__arc { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.nav-fab__icon { position: relative; width: 22px; height: 22px; color: var(--ink-soft); }
.nav-fab[aria-expanded="true"] { background: rgba(26,26,26,.06); }
.nav-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- 목차 드로어 (우측 슬라이드 · 공간 차지 · 딤드 없음) ----------
   열리면 body.is-drawer-open 이 #gl·HUD 를 좁아진 좌측으로 밀어 넣는다(오버레이 아님). */
body.is-drawer-open #gl { right: var(--drawer-w); width: calc(100% - var(--drawer-w)); }
body.is-drawer-open .hud { right: var(--drawer-w); }
body.is-drawer-open .hud__hint { left: calc(50% - var(--drawer-w) / 2); }   /* hud 밖 힌트도 같이 이동 */
body.is-drawer-open .mode-choice { right: var(--drawer-w); }                /* 관람 방식 버튼도 캔버스 중앙 유지 */
body.is-drawer-open .nav-fab { right: calc(var(--drawer-w) + clamp(14px, 2.2vw, 28px)); transition: right .4s var(--ease); }
body.is-drawer-open .endbar { left: calc(50% - var(--drawer-w) / 2); }
.nav-fab { transition: right .4s var(--ease); }
.hud { transition: right .4s var(--ease); }

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
  width: var(--drawer-w); max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--paper-warm); border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  overscroll-behavior: contain;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 14px;
}
.nav-drawer__eyebrow {
  margin: 0; font-family: var(--serif); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; color: var(--gray);
}
.nav-drawer__close {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-soft);
}
.nav-drawer__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.nav-tl { overflow-y: auto; padding: 12px 18px 14px; }
.nav-tl__item {
  position: relative; display: grid; grid-template-columns: 26px 1fr;
  align-items: center; gap: 12px;
  border: 0; background: none; text-align: left; width: 100%;
  padding: 3px 8px; min-height: 46px;
}
.nav-tl__item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.nav-tl__rail { position: relative; align-self: stretch; display: grid; place-items: center; }
.nav-tl__rail::before, .nav-tl__rail::after {
  content: ''; position: absolute; left: 50%; width: 1.5px; transform: translateX(-50%);
  background: var(--line);
}
.nav-tl__rail::before { top: 0; height: 50%; }
.nav-tl__rail::after  { bottom: 0; height: 50%; }
.nav-tl__item:first-child .nav-tl__rail::before,
.nav-tl__item:last-child .nav-tl__rail::after { display: none; }
.nav-tl__node {
  position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--gray-light); background: var(--paper-warm);
}
.nav-tl__txt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nav-tl__ko { font-family: var(--serif); font-size: 15px; color: var(--ink-soft); }
.nav-tl__en { font-size: 11.5px; font-style: italic; color: var(--gray-light); }

.nav-tl__item.is-past .nav-tl__node { background: var(--accent); border-color: var(--accent); }
.nav-tl__item.is-past .nav-tl__rail::before,
.nav-tl__item.is-past .nav-tl__rail::after,
.nav-tl__item.is-current .nav-tl__rail::before { background: var(--accent); }
.nav-tl__item.is-current .nav-tl__node {
  background: var(--accent); border-color: var(--accent);
  animation: navPulse 1.9s var(--ease) infinite;
}
.nav-tl__item.is-current .nav-tl__ko { color: var(--ink); font-weight: 700; }
@keyframes navPulse {
  0%   { box-shadow: 0 0 0 0 rgba(138,31,31,.34); }
  70%  { box-shadow: 0 0 0 8px rgba(138,31,31,0); }
  100% { box-shadow: 0 0 0 0 rgba(138,31,31,0); }
}

/* ---------- 목차 드로어 탭 (지도 / 목록) — 세그먼트 컨트롤 ---------- */
.nav-drawer__tabs {
  display: flex; gap: 5px; margin: 16px 18px 6px; padding: 5px;
  background: var(--line-soft); border-radius: 12px;
}
.nav-drawer__tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 0; border: 0; border-radius: 9px; background: none;
  font-family: var(--serif); font-size: 14px; color: var(--gray); letter-spacing: .01em;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-drawer__tab svg { flex: none; width: 15px; height: 15px; opacity: .7; }
.nav-drawer__tab.is-active {
  background: var(--paper); color: var(--ink); font-weight: 700;
  box-shadow: 0 1px 4px rgba(26,24,20,.12);
}
.nav-drawer__tab.is-active svg { opacity: 1; color: var(--accent); }
.nav-drawer__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.nav-drawer__body { flex: 1; min-height: 0; display: flex; }
.nav-drawer__panel { display: none; }
.nav-drawer__panel.is-on { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.nav-drawer__panel--map { padding-top: 6px; }

.nav-map__stage { flex: 1; position: relative; min-height: 0; }
.nav-map__cv { position: absolute; inset: 0; margin: auto; cursor: pointer; }
.nav-map__hint { margin: 0; padding: 10px 18px 16px; text-align: center; font-size: 12px; letter-spacing: .04em; color: var(--gray-light); }

.nav-strip {
  position: fixed; left: 0; right: 0; bottom: 0; height: 18px; z-index: 21;
  cursor: pointer;
}

.endbar {
  /* 힌트·토글보다 높은 z — 종점 버튼(입구로 이동·동영상 재생·챕터 이동)이 항상 우선.
     하단 토글(bottom 22px, 높이 ~34px)과 겹치지 않게 그 위 슬롯에 배치 */
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 23;
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(253,253,252,.88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 12px 26px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .9s var(--ease), visibility .9s var(--ease), left .4s var(--ease);
}
.endbar.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.endbar__btn {
  border: 0; background: none;
  font-family: var(--serif); font-size: 14px; color: var(--ink);
  letter-spacing: .03em;
}
.endbar__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.endbar__btn--video { display: inline-flex; align-items: center; gap: 7px; }
.endbar__play { width: 15px; height: 15px; flex: none; }
.endbar__sep { width: 1px; height: 14px; background: var(--line); }

@media (max-width: 720px) {
  /* ── 하단 레인 정리 — 좁은 뷰포트에서 토글·fab·종점바·힌트가 겹치지 않게 ──
     레인0(맨아래): 자동보기 토글(중앙) + 탐색 fab(우측)
     레인1(그 위): 종점 버튼 바 / 레인2: 스크롤 힌트·클릭 힌트·관람 방식 버튼
     (존 타이틀 카드는 좌상단으로 — .hud__tab 모바일 규칙 참고) */
  .tour-toggle { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .nav-fab { width: 52px; height: 52px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .nav-fab__icon { width: 19px; height: 19px; }
  .endbar {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    width: max-content;                 /* left:50% 고정 요소의 shrink-to-fit(뷰포트 절반) 제한 해제 */
    max-width: calc(100vw - 16px);
    flex-direction: column; align-items: center;   /* 한 줄에 하나씩 — 3줄 세로 배열 */
    gap: 10px; padding: 14px 26px;
    border-radius: 22px;                /* 세로형 — 캡슐 대신 둥근 사각 */
    white-space: nowrap;
  }
  .endbar__sep { display: none; }   /* 좁은 폭 — 구분선 대신 간격으로 */
  .hud__hint { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: 86vw; }
  .hud__hint-txt { line-height: 1.7; letter-spacing: .04em; }
  .hud__clickhint {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    max-width: 90vw; white-space: normal; text-align: center;
    line-height: 1.55; border-radius: 20px; padding: 10px 18px;
  }
  .mode-choice { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  .nav-drawer { width: 100vw; border-left: 0; }
  /* 모바일: 전체 폭 드로어 — 캔버스 축소 대신 그대로 두고 위에 얹는다 */
  body.is-drawer-open #gl { right: 0; width: 100%; }
  body.is-drawer-open .hud { right: 0; }
  body.is-drawer-open .hud__hint { left: 50%; }
  body.is-drawer-open .mode-choice { right: 0; }
  body.is-drawer-open .nav-fab { right: clamp(14px, 2.2vw, 28px); }
  body.is-drawer-open .endbar { left: 50%; }
}

/* ---------- 유품 상세 모달 — 딤드 없는 라이트 패널, 유품 간 슬라이드 ---------- */
.am { position: fixed; inset: 0; z-index: 330; display: none; align-items: center; justify-content: center; padding: 18px; }
.am.is-on { display: flex; }
.am__backdrop { position: absolute; inset: 0; }   /* 투명 — 검정 딤드 없이 바깥 클릭 닫기만 */
.am__panel {
  position: relative; display: flex; flex-direction: column;
  width: min(580px, 92vw); max-height: 86vh;   /* 고정 폭 — 어떤 유품이든 같은 너비 */
  background: #fdfdfc;                             /* 불투명 — 뒤 배경 비침 없음 */
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px rgba(26, 24, 20, .16);   /* 약한 그림자 */
  padding: 14px;
  animation: pmRise .38s var(--ease);
}
.am__close {
  position: absolute; top: 0; right: 0; z-index: 2;   /* 패널 우상단 모서리에 완전 밀착 */
  width: 42px; height: 42px; border: 0; border-radius: 0;
  background: #fff; color: var(--ink);   /* 불투명 흰색 사각 버튼 — 그림자 없음 */
  font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 히트 영역 확장 — 보이는 사각형은 그대로, 클릭 가능 범위만 사방 12px 넓힌다 */
.am__close::after { content: ''; position: absolute; inset: -12px; }
/* 스테이지 비율 고정(디테일 원본 1600×1067) — 이미지 로드 전에도 패널 높이가 잡혀
   레이아웃이 튀지 않고, 로드가 늦으면 중앙에 미니멀 스피너를 띄운다 */
.am__stage {
  margin: 0; min-height: 0; position: relative;
  aspect-ratio: 1600 / 1067; max-height: calc(86vh - 122px);
  display: flex; align-items: center; justify-content: center; background: #f4f1ec;
}
.am__img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* 스테이지 채움 — 비율 어긋나면 크롭 */
.am__stage::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid var(--line); border-top-color: var(--ink-soft); border-radius: 50%;
  opacity: 0; pointer-events: none;
}
.am__stage.is-loading::after { opacity: 1; animation: am-spin .8s linear infinite; }
.am__stage.is-loading .am__img { opacity: 0; }
@keyframes am-spin { to { transform: rotate(360deg); } }
.am__foot { display: flex; align-items: center; gap: 12px; padding: 12px 2px 2px; }
.am__nav {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: rgba(253, 253, 252, .9); color: var(--ink-soft);
}
.am__nav svg { width: 17px; height: 17px; }
.am__cap { flex: 1; min-width: 0; text-align: center; }
.am__name { display: block; font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }   /* pre-line: 원고의 \\n 줄바꿈 렌더 · anywhere: 『』 연속 표기도 필요 시 분리(영문은 공백 우선) */
.am__close:focus-visible, .am__nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
@media (max-width: 720px) {
  .am { padding: 14px; }
  .am__panel { width: calc(100vw - 28px); padding: 10px; }
  .am__close { top: 0; right: 0; width: 38px; height: 38px; }
  .am__stage { max-height: calc(76vh - 110px); }
}

/* ---------- 유품 호버 팝오버 ---------- */
.obj-pop {
  position: fixed; left: 0; top: 0; z-index: 24;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 440px;
  border: 1px solid var(--line); background: rgba(253,253,252,.95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 12px 15px;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s var(--ease);
}
.obj-pop.is-on { opacity: 1; visibility: visible; }

/* 사진·영상 호버 안내 팝오버 — 커서 곁을 따라다니는 먹색 필 */
.pick-pop {
  position: fixed; left: 0; top: 0; z-index: 24;
  padding: 9px 17px; border-radius: 999px; white-space: nowrap;
  background: rgba(24, 22, 19, .92); border: 1px solid rgba(24, 22, 19, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 13px; color: #f5f3ef;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.pick-pop.is-on { opacity: 1; visibility: visible; }
.obj-pop__name { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.5; }
.obj-pop__en { font-size: 11px; letter-spacing: .06em; color: var(--gray); text-transform: uppercase; }
.obj-pop__imgs { display: flex; gap: 6px; margin-top: 4px; }
.obj-pop__imgs img { max-height: 240px; max-width: 200px; object-fit: cover; border: 1px solid var(--line-soft); }
.obj-pop__imgs img:only-child { max-width: 408px; max-height: 280px; }

/* ---------- 정적 폴백 (no-WebGL / JS 실패) ---------- */
.fallback { display: none; }
.fallback.is-on { display: block; }
.fallback__inner {
  min-height: 100vh; min-height: 100svh;   /* vh 선행 = svh 미지원(iOS 15.3-) 폴백 */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center; padding: 48px 24px;
}
.fallback__logo { width: min(260px, 60vw); }
.fallback__title { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 3vw, 26px); }
.fallback__desc { margin: 0; color: var(--gray); font-size: 15px; max-width: 42ch; }
.fallback__go {
  display: inline-flex; border: 1px solid var(--ink);
  padding: 13px 26px; font-family: var(--serif); font-size: 15px; color: var(--ink); letter-spacing: .04em;
}
noscript .fallback { display: block; }

/* ---------- 성능 안내 — 히어로 벤치 최하위 판정 시 1회 노출 (비차단) ---------- */
.perf-note {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;                              /* HUD(19) 위 · 모달(.pm 300) 아래 */
  display: flex; align-items: center; gap: 14px;
  max-width: min(92vw, 560px);
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 12px 10px 20px;
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
  box-shadow: 0 12px 34px rgba(40, 34, 26, .16);
  animation: pmFade .3s var(--ease);
}
.perf-note a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.perf-note button {
  width: 30px; height: 30px; flex: 0 0 auto; border: 0; background: none; color: var(--gray);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ---------- 사진 상세 모달 (ung .pm 이식 · 사진 우선 레이아웃) ---------- */
/* 스크롤은 오버레이 전체(.pm)에서 — 스크롤바가 뷰포트 바깥쪽 끝에 놓이고
   모달 전체가 한 페이지처럼 스크롤된다 (다이얼로그 내부 스크롤 아님) */
.pm { position: fixed; inset: 0; z-index: 300; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pm.is-open { display: block; }
.pm__backdrop { position: fixed; inset: 0; background: rgba(18,16,14,.82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: pmFade .3s var(--ease); }
.pm__dialog {
  position: relative;
  width: min(1240px, 96vw); margin: 28px auto;
  background: var(--paper); border: 0;
  box-shadow: 0 40px 110px rgba(0,0,0,.5);
  animation: pmRise .42s var(--ease);
}
@keyframes pmFade { from { opacity: 0; } }
@keyframes pmRise { from { opacity: 0; transform: translateY(18px); } }
.pm__close {
  position: fixed; top: 12px; right: 14px; z-index: 305;
  background: none; border: 0; width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  mix-blend-mode: difference;
}
.pm__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pm__body { display: grid; grid-template-columns: 2.1fr 1fr; }
/* 사진이 주인공 — 딥 잉크 무대 위에 띄운다 */
.pm__figure { margin: 0; background: #1b1916; display: grid; place-items: center; padding: 30px 30px; }
.pm__figure img {
  /* 창 높이에 연동하지 않는 고정 상한 — 모달이 짧아져도 사진은 그대로,
     넘치면 모달 전체가 스크롤된다 */
  max-width: 100%; max-height: 680px; width: auto; object-fit: contain;
  cursor: zoom-in;
}

.pm__zoom { position: fixed; inset: 0; z-index: 320; display: none; place-items: center; padding: 12px; background: rgba(12,11,10,.95); cursor: zoom-out; touch-action: none; overflow: hidden; }
.pm__zoomimg { cursor: zoom-in; }
.pm__zoom.is-open { display: grid; animation: pmFade .25s var(--ease); }
.pm__zoomimg { max-width: calc(100vw - 24px); max-height: 92vh; max-height: calc(100dvh - 40px); object-fit: contain; }
/* 줌 닫기 — 모달 닫기(.pm__close)와 동일 스타일. 줌 뷰만 닫는다 (모달 유지) */
.pm__zoomclose {
  position: fixed; top: 12px; right: 14px; z-index: 5;
  background: none; border: 0; width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  mix-blend-mode: difference; cursor: pointer; padding: 0;
}

.pm__info { padding: 46px 40px 38px; display: flex; flex-direction: column; min-width: 0; }
.pm__theme { font-size: 14px; font-weight: 700; color: var(--accent); margin: 0 0 18px; }
.pm__theme-sub { font-size: 12px; font-weight: 500; color: var(--gray-light); letter-spacing: .04em; margin-left: 5px; }
.pm__date { font-family: var(--serif); font-size: 18px; color: var(--ink-soft); margin: 0 0 10px; }
.pm__title { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.35; margin: 0 0 16px; text-wrap: balance; }
.pm__caption { color: var(--gray); font-size: 15px; line-height: 1.7; margin: 0 0 30px; }
/* 이전/다음 — 썸네일 카드 (세로 2단: 제목이 온전히 보이게) */
.pm__nav { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 24px; }
.pm__navspacer { display: none; }
.pm__navbtn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-width: 0;
  background: none; border: 1px solid var(--line-soft); padding: 8px;
  text-align: left; cursor: pointer;
}
.pm__navthumb {
  width: 72px; height: 54px; flex: 0 0 auto;
  object-fit: cover; object-position: top; border: 1px solid var(--line);
  background: var(--paper-warm);
}
.pm__navtext {
  min-width: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pm__navtext em { display: block; font-style: normal; font-size: 11px; letter-spacing: .08em; color: var(--gray); margin-bottom: 3px; }
.pm__navbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 820px) {
  .pm__dialog { width: 94vw; margin: 62px auto 26px; }   /* 상단 고정 닫기(✕)와 분리 */
  .pm__body { grid-template-columns: 1fr; }
  .pm__figure { padding: 16px; }
  .pm__figure img { max-height: 54vh; }
  .pm__info { padding: 28px 22px 30px; }
  .pm__title { font-size: 20px; }
  .pm__navthumb { width: 58px; height: 44px; }
}
/* ---------- 피날레 영상 모달 (검은 딤드 + Plyr) ---------- */
.vm { position: fixed; inset: 0; z-index: 340; display: none; align-items: center; justify-content: center; padding: 4vh 4vw; }
.vm.is-on { display: flex; animation: pmFade .3s var(--ease); }
.vm__backdrop { position: fixed; inset: 0; background: rgba(6,6,8,.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vm__close {
  position: fixed; top: 16px; right: 18px; z-index: 3;
  background: none; border: 0; width: 44px; height: 44px; border-radius: 50%;
  color: #fff; font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.vm__close:hover { cursor: pointer; }
.vm__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vm__stage { position: relative; z-index: 2; width: min(1200px, 92vw); max-height: 90vh; box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.vm__video { width: 100%; height: auto; display: block; background: #000; }
.vm .plyr { width: 100%; --plyr-color-main: #8a1f1f; }

@media (max-width: 820px) {
  .pm__dialog { width: 94vw; margin: 62px auto 26px; }   /* 상단 고정 닫기(✕)와 분리 */
  .pm__body { grid-template-columns: 1fr; }
  .pm__figure { padding: 16px; }
  .pm__figure img { max-height: 54vh; }
  .pm__info { padding: 28px 22px 30px; }
  .pm__title { font-size: 20px; }
  .pm__navthumb { width: 58px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm__backdrop, .pm__dialog { animation: none; }
  .loading, .hud__tab, .epilogue { transition: none; }
}