/* 테마 E — 「여정」. 담장 안을 탐험하는 스토리 홈페이지.
 *
 * 설계 원본: docs/superpowers/plans/2026-07-30-journey-plan.md
 * 지금은 T1 뼈대다 — 토큰·기본 크롬·최소 타이포만 있다.
 * 로딩(T2), 사진·연출(T3~T5), 빠른 길·진행표시(T6)는 이후에 입힌다.
 *
 * 색이 곧 스토리다: 잉크(담장 안)에서 시작해 크림(기록·소망·초대)으로
 * 밝아진다. 강조색은 하나(금색)뿐이다 — 색을 줄인 쪽이 아름다웠다
 * (조사 결론, award-redesign.md). §2.5·§3 이 정한 값 밖의 색·크기를
 * 새로 만들지 않는다.
 *
 * ⚠ 토큰 이름은 계획서 §3 그대로가 아니라 styles.css 가 모든 테마에
 * 요구하는 공용 이름(--ink-900, --paper, --brand …)을 따른다. A~D 가
 * 전부 이 이름으로 :root 를 채운다 — styles.css 의 헤더·메뉴·버튼·
 * 목록·표는 이 이름이 없으면 값이 무효가 되어 조용히 흰 글자 위에
 * 흰 배경 같은 사고가 난다(실제로 후원하기 버튼에서 겪었다:
 * body.has-hero .site-header:not(.scrolled) .btn-donate 가
 * var(--ink-900) 를 참조하는데 이 파일에 없어서 텍스트가 안 보였다).
 * 계획서의 --ink·--dawn·--hope 같은 이름은 아래 별칭으로만 존재한다.
 */

:root {
  /* ── styles.css 가 요구하는 공용 토큰 (모든 테마가 채워야 한다) ── */
  --ink-900: #0b0d12; /* 계획서 §3 --ink */
  --ink-800: #141821;
  --ink-700: #1c212c;
  --ink-500: #8b8f9c;
  --ink-400: #b3b7c2;
  --ink-300: #d7d9de;

  --paper: #faf7ef; /* 계획서 §3 --dawn. A 안처럼 "잉크 위 밝은 글자"로도 쓴다 */
  --paper-soft: #f2eee3;

  --brand: #ffc700; /* 계획서 §3 --hope. 유일한 강조색 */
  --brand-bright: #ffd633;
  --brand-soft: rgba(255, 199, 0, 0.14);

  --line: rgba(10, 10, 10, 0.12); /* 크림(밝은) 배경 위 헤어라인 */
  --line-dark: rgba(255, 255, 255, 0.14); /* 잉크(어두운) 배경 위 헤어라인 */

  --radius: 10px;
  --radius-lg: 20px;
  --header-h: 68px;
  --wide: 76rem;
  --measure: 36rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 로딩 커튼 전용 — 계획서 §4-4 "A안 saBootOut 재사용" (theme-a --ease-inout) */
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  /* 2026-08-01 — 브루노 사이몬 해부 결과: 문서는 ease-out, 게임은 back.out
     을 쓴다. 이 하나가 "읽는 것"과 "만지는 것"을 가른다. 본문 텍스트에는
     쓰지 않는다(읽기 방해) — 카드·버튼·문패 같은 상호작용 요소에만. */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 계획서 §3 이름 그대로의 별칭. .e-* 규칙은 이쪽을 읽는다.
     값은 위 공용 토큰 하나에서만 나온다 — 같은 색을 두 번 적지 않는다. */
  --ink: var(--ink-900);
  --ink-soft: var(--ink-800);
  --dawn: var(--paper);
  --hope: var(--brand);
  --line-d: var(--line-dark);
  --line-l: var(--line);

  /* 계획서 §3 "글자" 행 — 배경별 글자색.
     흰 글자를 금색 위에 쓰면 대비 1.6:1 로 낙제한다. */
  --fg-on-ink: #f2f0ec;
  --fg-on-dawn: #1a1a1a;

  /* ── §2 서체 ──────────────────────────────────────────────
     한글 명조(마루부리)는 line-height 1.0 을 주면 받침이 잘린다.
     디스플레이 1.28, 본문 1.8 이상을 지킨다. */
  --font-en: 'Fraunces', Georgia, serif;
  --font-ko-display: 'MaruBuriSemiBold', 'Nanum Myeongjo', serif;
  --font-ko-display-bold: 'MaruBuriBold', 'Nanum Myeongjo', serif;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;

  /* ── §2.5 타이포 스케일 — 이 표 밖의 크기를 새로 만들지 않는다 ── */
  --t-hero-en: clamp(2.5rem, 8vw, 6rem);
  --t-q: clamp(1.9rem, 6vw, 4.25rem);
  --t-h: clamp(1.4rem, 3.2vw, 2.5rem);
  --t-lead: clamp(1.0625rem, 1.8vw, 1.25rem);
  --t-num: clamp(2.5rem, 6vw, 4.5rem);
  --t-eyeb: 0.75rem;
  --t-cap: 0.8125rem;

  --gx: clamp(1.25rem, 6vw, 4rem);
}

/* styles.css 는 기본이 밝은 종이(body{background:var(--paper)})다.
   이 안은 장면 1~4 가 잉크라 A 안과 같은 방식으로 뒤집는다:
   같은 두 토큰의 역할만 맞바꾼다(문서 함정 #1). */
html body {
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-body);
}

/* ══ 어두운 크롬 ═══════════════════════════════════════════════
   장면 1~4 는 잉크 배경이라 밝은 종이를 전제로 한 styles.css 의
   헤더·메뉴·목록·버튼 색을 되돌린다. */

html body .site-header.scrolled,
html body:not(.has-hero) .site-header {
  background: rgba(0, 0, 0, 0.82);
  border-bottom-color: var(--line-dark);
}

html body .site-header .brand-text strong {
  color: var(--fg-on-ink);
}

html body .site-header .brand-text em,
html body .site-header .nav-trigger {
  color: var(--ink-300);
}

html body .site-header .hamburger span {
  background: var(--ink-300);
}

html body .nav-panel,
html body .mobile-nav {
  background: var(--ink-800);
  border: 1px solid var(--line-dark);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

html body .nav-panel a,
html body .mobile-nav a {
  color: var(--ink-300);
}

html body .nav-panel a:hover,
html body .nav-panel a[aria-current='page'],
html body .mobile-nav a:hover {
  background: var(--ink-700);
  color: #fff;
}

html body .m-group {
  color: var(--ink-500);
}

html body .btn-donate {
  background: var(--brand);
  color: var(--fg-on-dawn);
  border-color: transparent;
  font-weight: 700;
}

html body .btn-donate:hover {
  background: var(--brand-bright);
}

/* A 안에서 실제로 겪은 함정: 히어로 위(스크롤 전) 헤더는 더 높은
   특이성의 규칙(body.has-hero .site-header:not(.scrolled) .btn-donate)
   이 styles.css 에 따로 있다. 거기서 참조하는 --ink-900 를 이 파일이
   정의하고 있으니 색 자체는 이제 무효가 되지 않지만, 배경을 흰색으로
   고정해 버려 우리 색과 안 맞는다. html 을 앞에 붙여 특이성을 한 단계
   더 올려 이긴다. */
html body.has-hero .site-header:not(.scrolled) .btn-donate {
  background: var(--brand);
  color: var(--fg-on-dawn);
}

html body.has-hero .site-header:not(.scrolled) .btn-donate:hover {
  background: var(--brand-bright);
  color: var(--fg-on-dawn);
}

html body .post-list li {
  border-bottom-color: var(--line-dark);
}

html body .post-list a {
  color: var(--fg-on-ink);
}

html body .post-list time {
  color: var(--ink-500);
}

html body .more a {
  color: var(--brand);
}

html body .skip:focus {
  background: var(--brand);
  color: var(--fg-on-dawn);
}

/* ══ 크림 크롬 (§5 고정 요소: "장면 5부터는 스크롤 시 크림 배경 크롬") ══
   journey.js 가 장면 5(기록) 경계에서 body.e-scene-light 를 켠다.
   위 어두운 크롬보다 클래스가 하나 많아 특이성으로 이긴다. */
html body.e-scene-light .site-header.scrolled {
  background: rgba(250, 247, 239, 0.92);
  border-bottom-color: var(--line);
}

html body.e-scene-light .site-header.scrolled .brand-text strong {
  color: var(--fg-on-dawn);
}

html body.e-scene-light .site-header.scrolled .brand-text em,
html body.e-scene-light .site-header.scrolled .nav-trigger {
  color: rgba(26, 26, 26, 0.64);
}

html body.e-scene-light .site-header.scrolled .hamburger span {
  background: rgba(26, 26, 26, 0.64);
}

/* ══ 로딩 화면 (§4) ═══════════════════════════════════════════
   journey.js 가 실제 로드 신호(폰트·이미지·window load)에 맞춰
   .go 클래스를 붙이면 즉시 커튼이 걷힌다. journey.js 가 죽거나
   차단돼도 이 CSS 만으로 2.2초 뒤 저절로 걷힌다(§4-7) — 콘텐츠는
   그 아래 이미 정상 렌더돼 있다. */

.e-boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  gap: 1.25rem;
  padding: var(--gx);
  text-align: center;
  background: var(--ink-900);
  color: var(--fg-on-ink);
  pointer-events: none;
  animation: eBootOut 0.55s var(--ease-inout) 2.2s both;
}

.e-boot.go {
  animation: eBootOut 0.55s var(--ease-inout) both;
}

.e-boot-en {
  margin: 0;
  font-family: var(--font-en);
  font-variation-settings: 'opsz' 144;
  font-weight: 600;
  font-size: var(--t-hero-en);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.e-boot-en.on {
  opacity: 1;
  transform: none;
}

.e-boot-en em {
  font-style: italic;
  font-weight: 500;
}

.e-boot-ko {
  margin: 0;
  font-family: var(--font-ko-display);
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  line-height: 1.5;
  word-break: keep-all;
  opacity: 0;
}

.e-boot-ko.on {
  animation: eBootKoIn 0.6s var(--ease) forwards;
}

.e-boot-pct {
  position: absolute;
  right: var(--gx);
  bottom: var(--gx);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 2.4vw, 1.375rem);
  color: var(--paper);
  /* §2: 폰트 준비 전에는 안 보인다 — 폴백 이탤릭으로 번쩍이는 FOUT 방지 */
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

/* 차오르는 금색 링 — journey.js 가 진행률에 맞춰 --p(0~100)를 올린다.
   conic-gradient 를 원형으로 마스킹해 얇은 링만 남긴다(칠해진 원 아님). */
.e-boot-ring {
  --p: 0;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), rgba(255, 255, 255, 0.2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
}

.e-boot-pct.on {
  opacity: 1;
}

/* 재방문(같은 탭): 로고만 짧게 보여준다 — 한글 부제·퍼센트는 생략 */
.e-boot.revisit .e-boot-ko,
.e-boot.revisit .e-boot-pct {
  display: none;
}

.e-boot.revisit .e-boot-en {
  opacity: 1;
  transform: none;
  transition: none;
}

/* prefers-reduced-motion: 카운터·페이드 없이 정지 화면만 0.3초 */
.e-boot.reduce .e-boot-en,
.e-boot.reduce .e-boot-ko,
.e-boot.reduce .e-boot-pct {
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
}

@keyframes eBootOut {
  /* 2026-08-01 — 예전엔 위에서 아래로 잘리는 사각 커튼(inset)이었다.
     브루노 사이몬 해부 결과: "발밑에서 퍼지는 원형 파면"이 "문서가 걷힌다"가
     아니라 "세계가 열린다"는 인상을 준다 — 원형으로 바꿨다. 150%는 어떤
     화면 비율에서도 모서리까지 완전히 덮도록 여유를 둔 값. */
  0% {
    clip-path: circle(150% at 50% 62%);
  }
  100% {
    clip-path: circle(0% at 50% 62%);
    /* clip-path 만으로는 접근성 트리에 "불러오는 중" 이 영구 잔존한다.
       visibility 는 이산 보간이라 애니메이션 끝에서 hidden 으로 스냅되고,
       JS 사망 시의 순수 CSS 경로에서도 똑같이 작동한다. */
    visibility: hidden;
  }
}

@keyframes eBootKoIn {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .e-boot {
    animation: eBootOut 1ms linear 0.3s both;
  }
  /* journey.js 생존 시 .go(특이성 0,2,0)가 위 1ms 해제를 이겨 0.55s
     커튼이 재생되던 구멍 — reduce 에서는 .go 도 즉시 해제한다(§4-6). */
  .e-boot.go {
    animation-duration: 1ms;
    animation-delay: 0s;
    animation-timing-function: linear;
  }
}

/* ══ 타이포 기본 클래스 (§2.5) ═══════════════════════════════ */

.e-q,
.e-h {
  margin: 0;
  font-family: var(--font-ko-display);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.e-q {
  font-size: var(--t-q);
}

.e-h {
  font-size: var(--t-h);
}

.e-eyeb {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: var(--t-eyeb);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--brand);
  word-break: keep-all;
}

.e-lead {
  margin: 1.25rem 0 0;
  max-width: var(--measure);
  font-size: var(--t-lead);
  line-height: 1.9;
  word-break: keep-all;
}

.e-cap {
  margin: 1.5rem 0 0;
  font-size: var(--t-cap);
  color: var(--ink-300);
  word-break: keep-all;
}

.e-cap a {
  color: inherit;
}

.e-gold {
  font-family: var(--font-en);
  font-weight: 700;
  font-style: normal;
  /* 금색 글자는 크림 위 1.46:1 낙제 (대형 기준 3:1 도 못 넘는다) —
     소망의 금색은 형광펜처럼 배경으로 옮기고 글자는 잉크 (11.12:1, T7 개정) */
  color: var(--fg-on-dawn);
  background: var(--hope);
  padding: 0 0.14em;
  border-radius: 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ══ 장면 공통 여백 ════════════════════════════════════════════
   T4~T5 가 갈림길·기록·소망·초대에 사진·연출을 입힐 자리.
   장면 1~3(T3)은 아래에서 사진·연출까지 갖췄다. */

.e-ask,
.e-life,
.e-meet,
.e-doors,
.e-record,
.e-hope,
.e-invite,
.e-news {
  padding: clamp(4rem, 12vh, 8rem) var(--gx);
}

.e-ask {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: clip;
}

/* flex 항목은 position:static 이어도 z-index 가 먹는다 —
   자손에 position 을 주지 않고도 배경 사진 위로 띄운다(함정 #2). */
.e-ask > * {
  z-index: 1;
}

.e-ask-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.12;
  z-index: 0;
}

@media (max-width: 56rem) {
  .e-ask-bg {
    opacity: 0.08;
  }
}

.e-scroll {
  margin: 0.75rem 0 0;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.9375rem;
  color: var(--ink-300);
  animation: eScrollBob 2.6s var(--ease) infinite;
}

@keyframes eScrollBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .e-scroll {
    animation: none;
  }
}

/* ── 장면 2: 사진 액자 (원형 확장 와이프는 fx.css .fx-wipe) ──── */

.e-frame {
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  max-width: 42rem;
  border-radius: var(--radius-lg);
  overflow: clip;
  background: var(--ink-800);
}

.e-frame img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* ── 장면 3: 사진 레일 (가장자리 페이드는 fx.css .fx-scroll-fade) ── */

.e-rail {
  list-style: none;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0 0 1.25rem;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.e-rail-item {
  flex: 0 0 clamp(14rem, 26vw, 22rem);
  scroll-snap-align: start;
}

.e-rail figure {
  margin: 0;
}

.e-rail img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  filter: grayscale(0.25);
  transition: filter 0.5s var(--ease);
}

.e-rail-item:hover img {
  filter: grayscale(0);
}

.e-rail figcaption {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  word-break: keep-all;
}

/* 오도미터 숫자는 명조가 아니라 tabular-nums 되는 본문 서체로 (함정 #10) */
.e-h .fx-odo {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* 장면 5(기록)부터 크림으로 밝아진다 (§3, §5) */
.e-record,
.e-hope,
.e-invite,
.e-news {
  background: var(--dawn);
  color: var(--fg-on-dawn);
}

.e-record .e-cap,
.e-hope .e-lead {
  /* 0.6 합성은 4.47:1 로 §2.5 기준(4.5:1)에 0.03 미달 — 실측 */
  color: rgba(26, 26, 26, 0.64);
}

/* 크림 배경에서 금색 #ffc700 글자는 1.46:1 낙제 (§2.5 실측) — 잉크로 */
.e-record .e-eyeb,
.e-news .e-eyeb {
  color: var(--fg-on-dawn);
}

.e-news .more a {
  color: var(--fg-on-dawn);
  text-decoration: underline;
}

/* 어두운 크롬 블록의 post-list 규칙(흰 글자)은 잉크 서브페이지용이다 —
   e-news 는 크림이라 그대로 두면 1.06:1 로 안 보인다 (T7 Lighthouse 실측) */
.e-news .post-list li {
  border-bottom-color: var(--line);
}

.e-news .post-list a {
  color: var(--fg-on-dawn);
}

.e-news .post-list time {
  color: rgba(26, 26, 26, 0.64);
}

/* ══ 갈림길 — 세 개의 문 ══════════════════════════════════════ */

.e-door-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2rem, 5vh, 3rem);
}

@media (max-width: 56rem) {
  .e-door-grid {
    grid-template-columns: 1fr;
  }
}

/* 이중 테두리 — 바깥은 카드 자체 border, 안쪽은 ::after 를
   10px 안으로 inset 해 문틀 인상을 낸다. */
.e-door {
  position: relative;
  display: block;
  padding: 1.75rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--ink-soft);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
    transform 0.45s var(--ease-back), box-shadow 0.45s var(--ease-back);
}

.e-door::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--line-dark);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}

.e-door:hover,
.e-door:focus-visible {
  border-color: var(--brand);
  background: var(--ink-700);
  transform: translateY(-4px);
  /* 검정 그림자 대신 따뜻한 색(브루노 접지 그림자 원리) — 밋밋한 느낌을 줄인다 */
  box-shadow: 0 18px 34px rgba(120, 72, 0, 0.28);
}

.e-door:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: 0.08s;
}

.e-door-photo {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: clip;
  border-radius: calc(var(--radius) - 4px);
  margin: 0 0 1.25rem;
  background: var(--ink-900);
}

.e-door-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.4) brightness(0.6);
  transition: filter 0.5s var(--ease), transform 0.5s var(--ease);
}

.e-door:hover .e-door-photo img,
.e-door:focus-visible .e-door-photo img {
  filter: grayscale(0) brightness(0.85);
  transform: scale(1.02);
}

/* 문패 01/02/03 이 hover·focus 에서 "→ 들어가기" 로 바뀐다.
   두 줄 다 DOM 에 두고 위치만 겹쳐 크로스페이드한다(장식이라
   aria-hidden — 진짜 접근 가능한 이름은 아래 문 이름이 준다). */
.e-door-no {
  position: relative;
  display: block;
  height: 1.4em;
  overflow: hidden;
  /* §5-4: 문패는 --t-eyeb + --hope. "→ 들어가기" 한글까지 Pretendard 로 통일. */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-eyeb);
  letter-spacing: 0.22em;
  color: var(--brand);
}

.e-door-no-idx,
.e-door-no-cta {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.e-door-no-cta {
  transform: translateY(100%);
  opacity: 0;
}

.e-door:hover .e-door-no-idx,
.e-door:focus-visible .e-door-no-idx {
  transform: translateY(-100%);
  opacity: 0;
}

.e-door:hover .e-door-no-cta,
.e-door:focus-visible .e-door-no-cta {
  transform: translateY(0);
  opacity: 1;
}

.e-door-name {
  margin: 0.75rem 0 0.5rem;
  font-family: var(--font-ko-display);
  /* --t-h 하한 고정 — 넓은 화면에서 clamp 상한(2.5rem)은 카드 폭을 넘친다 (T7 개정) */
  font-size: 1.4rem;
  line-height: 1.3;
  word-break: keep-all;
}

.e-door-desc {
  margin: 0;
  font-size: var(--t-cap);
  line-height: 1.7;
  color: var(--ink-300);
  word-break: keep-all;
}

@media (prefers-reduced-motion: reduce) {
  .e-door-no-idx,
  .e-door-no-cta,
  .e-door-photo img,
  .e-door {
    transition: none;
  }
  .e-door:hover,
  .e-door:focus-visible,
  .e-door:active {
    transform: none;
  }
}

/* ══ 기록 — 오도미터 뼈대 (숫자 릴은 T5) ═══════════════════════ */

.e-figs {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.e-figs a {
  display: block;
  padding: 1.75rem 0.25rem;
  background: var(--dawn);
  text-decoration: none;
  color: inherit;
}

.e-num {
  display: block;
  /* §2.5 --t-num: Pretendard 700 tnum. Fraunces 는 tnum 보장이 없어
     오도미터 릴 폭이 흔들린다 (함정 #10) — 릴이 이 값을 상속한다. */
  font-family: var(--font-body);
  font-size: var(--t-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.e-num em {
  font-style: normal;
  font-family: var(--font-ko-display);
  font-size: 0.34em;
  /* 금색 단위는 크림 위 1.46:1 낙제 — 잉크 명조로 */
  color: var(--fg-on-dawn);
  margin-left: 0.25rem;
}

/* 직계 자식으로 좁힌다 — 그냥 .e-figs span 이면 .e-num 안의 오도미터가
   주입하는 자릿수 span(.fx-odo-d 등)까지 걸려 릴이 세로로 쌓였었다. */
.e-figs a > span {
  display: block;
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: rgba(26, 26, 26, 0.62);
  word-break: keep-all;
}

.e-ledger {
  margin: 2.5rem 0 0;
}

.e-ledger div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.e-ledger dt {
  color: rgba(26, 26, 26, 0.64);
  word-break: keep-all;
}

.e-ledger dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ══ 초대 — 사진 액자 + 티켓 버튼 (A안 sa-close/sa-ticket 패턴) ═══ */

.e-invite {
  padding-top: clamp(3rem, 8vh, 5rem);
}

.e-invite-frame {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: var(--radius-lg);
  height: min(78svh, 42rem);
  min-height: 24rem;
}

.e-invite-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 계획서 §5-7: "veil 은 하단만" — A안처럼 사진 전체를 덮지 않는다. */
.e-invite-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 실측(T7 스크린샷): 제목 첫 줄이 veil 위 밝은 옷과 겹쳐 대비가 무너졌다.
     텍스트 구역(하단 45%)까지 어둠을 올린다 — 그래도 "하단만"이다(§5-7). */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.52) 34%, rgba(0, 0, 0, 0.2) 56%, transparent 76%);
}

.e-invite-in {
  position: absolute;
  left: clamp(1.25rem, 3.5vw, 3rem);
  bottom: clamp(1.5rem, 5vh, 3.5rem);
  max-width: min(30rem, 60%);
  color: var(--fg-on-ink);
}

.e-invite-in .e-h,
.e-invite-in .e-lead {
  color: var(--fg-on-ink);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.e-invite-cta {
  position: absolute;
  right: clamp(1.25rem, 3.5vw, 3rem);
  bottom: clamp(1.5rem, 5vh, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.875rem;
}

/* 좁은 화면은 두 블록을 사진 위에 겹쳐 올릴 자리가 없다(고정 오프셋으로
   맞추면 계좌 메타 줄 수가 조금만 늘어도 다시 겹친다). 액자를 낮추고
   글·CTA 를 사진 아래 보통 흐름으로 뺀다 — 배경이 --dawn 이라 글자색도
   되돌린다. */
@media (max-width: 56rem) {
  .e-invite-frame {
    height: min(46svh, 24rem);
    min-height: 16rem;
  }
  .e-invite-in,
  .e-invite-cta {
    position: static;
    max-width: none;
    padding: 1.5rem var(--gx) 0;
  }
  .e-invite-in .e-h,
  .e-invite-in .e-lead {
    color: var(--fg-on-dawn);
    text-shadow: none;
  }
  /* 좁은 화면에선 눈썹이 크림 배경 위로 내려온다 — 금색은 1.46:1 낙제 */
  .e-invite-in .e-eyeb {
    color: var(--fg-on-dawn);
  }
  .e-invite-cta {
    align-items: flex-start;
    padding-top: 1rem;
  }
}

/* 후원 티켓 버튼 — A안 .sa-ticket 재사용. hover 는 금색 배경에
   반드시 검정 글자(계획서 §3: 금색 위 흰 글자는 대비 1.6:1로 낙제). */
.e-ticket {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--fg-on-ink);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.28);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.e-ticket:hover,
.e-ticket:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--fg-on-dawn);
}

.e-ticket-t {
  padding: 0.7rem 1.1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.e-ticket-a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  border-left: 1px dashed rgba(255, 255, 255, 0.45);
  font-size: 0.875rem;
  transition: transform 0.3s var(--ease);
}

.e-ticket:hover .e-ticket-a {
  transform: translateX(3px);
}

.e-invite-meta {
  margin: 0;
  display: grid;
  gap: 0.3rem;
  text-align: right;
}

.e-invite-meta div {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.e-invite-meta dt {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
  word-break: keep-all;
}

.e-invite-meta dd {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--fg-on-ink);
  word-break: keep-all;
}

/* ⚠ 이 블록은 반드시 위의 .e-ticket/.e-invite-meta 기본 규칙 뒤에 있어야
   한다 — 같은 특이성이라 순서로 이긴다. 실측(T7 Lighthouse): 티켓 오버라이드가
   기본 규칙보다 앞에 있어 좁은 화면에서 흰 글자가 크림 위에 그대로 남았었다
   (1.86:1). 메타(후원계좌 3칸)는 오버라이드 자체가 없어 1.04:1 — 안 보였다. */
@media (max-width: 56rem) {
  .e-invite-meta,
  .e-invite-meta div {
    text-align: left;
    justify-content: flex-start;
  }
  .e-ticket {
    color: var(--fg-on-dawn);
    background: transparent;
    border-color: var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .e-ticket-a {
    border-left-color: var(--line);
  }
  .e-invite-meta dt {
    color: rgba(26, 26, 26, 0.64);
  }
  .e-invite-meta dd {
    color: var(--fg-on-dawn);
  }
}

/* ══ 진행 표시 (.e-trail) — 좌하단 세로 점 6개 (§5 고정 요소) ═══════
   journey.js 가 IntersectionObserver 로 지금 보고 있는 장면의 점만
   밝힌다. 점 자체는 <a href="#장면-id">라 JS 없이도 눌리면 이동한다.
   장식(현재 위치 표시)이라 aria-hidden. 모바일은 숨긴다. */

.e-trail {
  position: fixed;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vh, 1.75rem);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.e-trail a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.45);
}

.e-trail a > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-back);
}

.e-trail em {
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  word-break: keep-all;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}

.e-trail a:hover em,
.e-trail a:focus-visible em {
  opacity: 1;
  transform: none;
}

.e-trail a.on {
  color: var(--brand);
}

.e-trail a.on > span {
  transform: scale(1.35);
}

.e-trail a.on em {
  opacity: 1;
  transform: none;
  color: var(--fg-on-ink);
}

/* 장면 5(기록)부터 배경이 크림이라 흰 계열 글자는 대비가 무너진다. */
body.e-scene-light .e-trail a {
  color: rgba(26, 26, 26, 0.4);
}

body.e-scene-light .e-trail a.on em {
  color: var(--fg-on-dawn);
}

@media (max-width: 56rem) {
  .e-trail {
    display: none;
  }
}

/* ══ 빠른 길 (§6, Dropbox Brand 방식) ══════════════════════════ */

.e-quick-btn {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vh, 1.75rem);
  z-index: 150;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--fg-on-dawn);
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(120, 72, 0, 0.3);
  transition: background 0.2s var(--ease), transform 0.35s var(--ease-back);
}

.e-quick-btn:hover,
.e-quick-btn:focus-visible {
  background: var(--brand-bright);
  transform: translateY(-2px) scale(1.03);
}

.e-quick-btn:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
  .e-quick-btn {
    transition: background 0.2s var(--ease);
  }
  .e-quick-btn:hover,
  .e-quick-btn:focus-visible,
  .e-quick-btn:active {
    transform: none;
  }
}

.e-quick {
  position: fixed;
  inset: 0;
  z-index: 250;
  margin: auto;
  width: min(90vw, 46rem);
  max-height: min(86svh, 40rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: var(--ink-800);
  color: var(--fg-on-ink);
}

.e-quick::backdrop {
  background: rgba(5, 6, 9, 0.7);
  backdrop-filter: blur(4px);
}

/* 다이얼로그가 열린 동안 배경 스크롤을 잠근다. */
body.e-quick-open {
  overflow: hidden;
}

.e-quick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.e-quick-head .e-h {
  margin: 0;
  font-size: 1.375rem;
}

.e-quick-close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--fg-on-ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.e-quick-close:hover,
.e-quick-close:focus-visible {
  background: var(--ink-700);
  border-color: var(--brand);
}

.e-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 34rem) {
  .e-quick-grid {
    grid-template-columns: 1fr;
  }
}

.e-quick-grid a {
  position: relative;
  display: block;
  padding: 1rem 2.25rem 1rem 1rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.e-quick-grid a:hover,
.e-quick-grid a:focus-visible {
  border-color: var(--brand);
  background: var(--ink-700);
}

.e-quick-grid b {
  display: block;
  font-family: var(--font-ko-display);
  font-size: 1rem;
  word-break: keep-all;
}

.e-quick-grid span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--ink-300);
  word-break: keep-all;
}

.e-quick-grid em {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-style: normal;
  color: var(--brand);
}

.e-quick-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-dark);
}

.e-quick-jump a {
  font-size: 0.8125rem;
  color: var(--ink-300);
  text-decoration: none;
}

.e-quick-jump a:hover,
.e-quick-jump a:focus-visible {
  color: var(--brand);
}