/* ── 귀로 鬼路 ── 어두운 기록물 테마 ─────────────────────────── */
:root {
  --bg: #050508;
  --surface: #0c0c12;
  --surface-2: #111119;
  --line: #1d1d28;
  --ink: #c5bfb2;          /* 오래된 종이 위 먹색 */
  --ink-dim: #7d7870;
  --ink-faint: #4d4a45;
  --blood: #7a2830;        /* 마른 핏빛 — 핵심 CTA에만 */
  --blood-bright: #9c343e;
  --cold: #5d7d96;         /* 물빛 — 해금 알림 */
  --radius: 10px;
  /* 낡은 종이 입자 — 카드 질감용 (동양적 공포: 오래된 사진·한지·먹 번짐) */
  --grain: 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='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ── 마루부리 — 앱에 직접 포함해 어느 기기에서나 같은 글씨체로 보이게 한다 ──
   기기에 설치된 폰트에 기대면 PC는 나눔명조, 안드로이드는 기본 명조, 아이폰은
   고딕으로 제각각 보인다. 앱의 분위기가 글씨체에 크게 기대므로 직접 넣는다.
   woff2 로 변환해 1.90MB → 0.85MB.
   font-display: swap — 폰트를 받는 동안 글자가 안 보이는 것보다 낫다. */
@font-face {
  font-family: "MaruBuri";
  src: url("/assets/fonts/maruburi-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MaruBuri";
  src: url("/assets/fonts/maruburi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 아이콘 선 두께 — 앱 전체를 여기 한 줄로 조절한다.
   각 아이콘의 stroke-width 속성(1.6)보다 CSS가 우선하므로,
   개별 아이콘을 일일이 고치지 않아도 한꺼번에 바뀐다. */
svg[stroke="currentColor"] { stroke-width: 2.1; }

html, body {
  height: 100%;
  background: #000;
  color: var(--ink);
  font-family: "MaruBuri", "Batang", "BatangChe", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* 전체 화면 뷰어가 열려 있는 동안 — 문서 스크롤을 잠근다.
   iOS 사파리는 문서가 움직이면 툴바를 접었다 펴면서 화면 높이를 바꾸고,
   그 사이 화면을 덮은 요소(position:fixed)의 아래쪽이 어긋난다.
   뷰어 안쪽 본문 스크롤은 각자의 통(.reader-stage 등)에서 따로 처리된다. */
html.fs-layer, body.fs-layer {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

/* 글자 선택·복사 방지 —
   읽기 화면을 길게 누르면 화면 전체가 파랗게 선택되어 몰입이 깨지고,
   이야기 본문이 그대로 복사되는 것도 막아야 한다.
   길게 눌렀을 때 뜨는 확대경·복사 메뉴(touch-callout)와 탭 하이라이트도 함께 끈다.
   단, 아래에서 입력창은 예외로 두어 글자를 쓰고 고칠 수 있게 한다. */
html {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 입력창은 선택·편집이 가능해야 한다 (댓글, 사자 이름, 검색어) */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
input, textarea, select {
  font-family: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 15px;
  width: 100%;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.7; }
input:focus, textarea:focus, select:focus { outline: 1px solid var(--ink-faint); }

/* ── 레이아웃 ─────────────────────────────────────────────── */
#frame {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, #0d0d16 0%, var(--bg) 60%),
    var(--bg);
  box-shadow: 0 0 60px rgba(0,0,0,.9);
  display: flex;
  flex-direction: column;
}
#screen {
  flex: 1;
  /* 아래 여백은 하단 네비(약 67px + 기기 제스처 영역)를 피하도록 잡는다 */
  padding: 20px 20px calc(92px + env(safe-area-inset-bottom, 0px));
  animation: screen-in .5s ease both;
}
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

/* 하단 네비게이션 — 화면 바닥에 붙는 평평한 막대.
   떠 있는 알약형에서 바꿨다. 내용과 겹치지 않도록 위쪽에 얇은 경계선만 두고,
   선택된 항목은 배경 없이 색과 아이콘 형태(속이 찬 아이콘)로만 구분한다.
   기기 하단의 제스처 영역(홈 바)을 피하도록 safe-area 만큼 아래 여백을 둔다. */
#nav {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  max-width: 480px;       /* 앱 화면 폭과 같게 */
  margin: 0 auto;
  display: flex;
  /* 홈 화면의 귀신 그림에서 시선을 뺏지 않도록 어둡게 둔다.
     모서리 곡선은 면의 밝기가 아니라 위쪽 경계선이 그리게 한다 —
     밝기로 형태를 만들면 네비가 화면에서 튄다. */
  background: rgba(6, 6, 10, .97);
  border-top: 1px solid #1e1e28;
  /* 위쪽 두 모서리만 둥글게 — 아래는 화면 끝에 붙으므로 각지게 둔다 */
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(12px);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, .65);   /* 본문과 경계를 짓되 어둡게 */
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
}
#nav button {
  position: relative;   /* 누름 음영(::before)의 기준 */
  flex: 1;
  margin: 0;
  padding: 7px 0 5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  border: none;
  border-radius: 0;
  background: none;
  transition: color .25s;
  /* 작은 글씨의 획을 살짝 깎아 얇아 보이게 한다. 테두리 색은 네비 배경과 같게.
     10px 글씨라 많이 깎으면 글자가 뭉개진다 — 0.15px 정도가 한계다. */
  -webkit-text-stroke: .15px rgba(6, 6, 10, .97);
}
/* 누르고 있는 동안(길게 누를 때 포함) 아이콘과 글씨를 함께 감싸는 음영.
   버튼 전체에 배경을 주면 칸 너비만큼 넓게 퍼지므로, 가운데에 고정 폭으로 깐다. */
#nav button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  width: 58px;
  height: calc(100% - 4px);
  border-radius: 13px;
  background: transparent;
  transition: background .16s ease;
  pointer-events: none;
}
#nav button:active::before { background: rgba(196, 196, 214, .13); }
/* 아이콘과 글씨가 음영 위에 오도록 */
#nav button > * { position: relative; }
#nav button .nav-glyph {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
#nav button .nav-glyph svg { width: 24px; height: 24px; }
/* 현재 화면과 일치하면 꽉 찬(채워진) 아이콘으로 */
#nav button .nav-glyph .ico-fill { display: none; }
#nav button.active .nav-glyph .ico-line { display: none; }
#nav button.active .nav-glyph .ico-fill { display: block; }
/* 선택된 항목 — 배경이나 테두리 없이 밝기로만 구분한다 */
#nav button.active { color: #ece6d9; }
.hidden { display: none !important; }

/* ── 공통 요소 ────────────────────────────────────────────── */
.screen-title {
  font-size: 20px;
  letter-spacing: .35em;
  color: var(--ink);
  margin: 8px 0 2px;
  text-align: center;
}
/* 이야기·귀록 — 제목 좌측 정렬, 설명 문구 없음 */
.screen-title.left {
  text-align: left;
  letter-spacing: .2em;
  margin-bottom: 16px;
}
.screen-head { position: relative; }
.screen-head-btn {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: color .3s;
}
.screen-head-btn:hover { color: var(--ink); }
.screen-head-btn svg { width: 19px; height: 19px; }
.screen-sub {
  text-align: center;
  color: var(--ink-dim);
  font-size: 12.5px;
  letter-spacing: .06em;
  margin-bottom: 22px;
}
.divider {
  height: 1px;
  margin: 18px auto;
  width: 60%;
  background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}

.btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 10px;
  text-align: center;
  font-size: 15px;
  letter-spacing: .14em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .3s, background .3s;
}
.btn:hover { border-color: var(--ink-faint); }
.btn-primary {
  border-color: #3a1a1f;
  background: linear-gradient(180deg, #1a0e11, #140a0c);
  color: #d8ccc0;
}
.btn-primary:hover { border-color: var(--blood); box-shadow: 0 0 16px rgba(122,40,48,.25); }
.btn-white {
  background: #e9e5db;
  border-color: #e9e5db;
  color: #15151c;
  font-weight: 600;
}
.btn-white:hover { background: #f5f2ea; border-color: #f5f2ea; box-shadow: 0 0 18px rgba(233,229,219,.18); }
.btn-white:disabled:hover { background: #e9e5db; border-color: #e9e5db; }
.btn-ghosted { color: var(--ink-dim); font-size: 13.5px; border-color: transparent; background: none; }
.btn-ghosted:hover { color: var(--ink); border-color: transparent; }
.btn:disabled { opacity: .35; cursor: default; }
.btn:disabled:hover { border-color: var(--line); box-shadow: none; }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.card.tappable { cursor: pointer; transition: border-color .3s; }
.card.tappable:hover { border-color: var(--ink-faint); }

.meta-line { font-size: 12px; color: var(--ink-dim); letter-spacing: .05em; }
.hint-line { font-size: 12.5px; color: var(--cold); opacity: .85; margin-top: 8px; line-height: 1.6; }

.progress-track {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 10px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a3038, var(--blood));
  transition: width .6s ease;
}

/* ── 인트로 ───────────────────────────────────────────────── */
#intro-layer {
  position: fixed; inset: 0;
  background: #000;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;  /* 안내 문구가 길어 화면을 넘치면 스크롤 */
}
/* 기존 사자의 짧은 플래시 화면 */
#intro-layer.splash-leaving { opacity: 0; transition: opacity .5s ease; }
.splash-stage {
  position: absolute;
  inset: 0;
  background-image: url("/assets/splash-gwirok.webp");
  background-size: cover;
  background-position: center;
  animation: splash-in 1.1s ease both;
}
@keyframes splash-in { from { opacity: 0; } to { opacity: 1; } }
.splash-skip {
  position: absolute;
  bottom: 26px; left: 0; right: 0;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.splash-skip.shown { opacity: 1; animation: breathe-text 3s ease-in-out infinite; }
.intro-stage {
  max-width: 480px;
  width: 100%;
  padding: 40px 32px;
  text-align: center;
  margin: auto;  /* 내용이 화면보다 길 때도 위가 잘리지 않게 */
}
@keyframes breathe-text { 0%,100% { opacity: .3; } 50% { opacity: .7; } }

/* 인트로 5단계 — 한 화면 한 문구, 하단 고정 버튼으로 진행 */
.intro5-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.intro5-bg.shown { opacity: 1; }
/* 문구가 얹히는 중앙을 살짝 어둡게 눌러 가독성을 지킨다 */
.intro5-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 55% at 50% 46%, rgba(0, 0, 0, .48), rgba(0, 0, 0, 0) 78%),
    linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .45));
}
.intro5 {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 32px calc(34px + env(safe-area-inset-bottom));
}
.istep-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 1;
  transition: opacity .3s ease;
}
.istep-wrap.leaving { opacity: 0; }
.istep-wrap.entering { animation: istep-in 1s ease both; }
@keyframes istep-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.istep-title {
  font-size: 32px;
  color: #e9e3d6;
  margin-bottom: 30px;
  text-shadow: 0 0 26px rgba(197, 191, 178, .22);
}
.istep-text {
  font-size: 17px;
  line-height: 2.2;
  letter-spacing: .08em;
  color: var(--ink);
  white-space: normal;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .85);
}
/* "이제, 너는 사자다." — 가장 중요한 한 줄 */
.istep-text.key {
  font-size: 21px;
  letter-spacing: .16em;
  color: #e9e3d6;
  animation: istep-key 3.2s ease-in-out infinite;
}
@keyframes istep-key {
  0%, 100% { text-shadow: 0 0 12px rgba(160, 158, 190, .14); }
  50%      { text-shadow: 0 0 28px rgba(160, 158, 190, .38); }
}
/* 버튼 영역 — 버튼이 없는 단계에서도 같은 높이를 차지해 레이아웃이 흔들리지 않는다 */
.intro5-btnarea {
  width: 100%;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.istep-btn {
  width: 100%;
  margin: 0;
  animation: istep-btn-in 1.2s ease both;
}
@keyframes istep-btn-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.level-low .istep-wrap.entering { animation-duration: .25s; }
body.level-low .istep-wrap { transition-duration: .12s; }
body.level-low .istep-text.key { animation: none; }
body.level-low .istep-btn { animation-duration: .25s; }
body.level-low .intro5-bg { transition-duration: .3s; }

/* ── 경고 ─────────────────────────────────────────────────── */
.warning-box {
  border: 1px solid #2a1518;
  background: #0b0709;
  border-radius: var(--radius);
  padding: 22px 20px;
  line-height: 2;
  font-size: 14px;
  color: #b3a99c;
}
.warning-title {
  color: var(--blood-bright);
  letter-spacing: .3em;
  font-size: 13px;
  text-align: center;
  margin-bottom: 14px;
}
.consent-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  letter-spacing: .03em;
}
.consent-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #34c759;   /* 체크 시 초록색 — 동의 여부가 한눈에 보이게 */
  cursor: pointer;
}
#btn-consent {
  margin-top: 22px;  /* 동의 버튼을 체크줄보다 조금 아래로 */
}

/* ── 첫 기록 (사진 남기기) ──────────────────────────────────── */
.photo-guide {
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .06em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 20px;
}
.photo-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed #2a2a38;
  border-radius: var(--radius);
  background: #08080c;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 6px;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-frame .photo-empty { color: var(--ink-faint); font-size: 12px; letter-spacing: .25em; }
#photo-input { display: none; }
.origin-photo img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  opacity: .85;
  display: block;
}

/* ── 홈 — 화면 전체를 채우는 장면 ────────────────────────────── */
.home {
  position: fixed;
  inset: 0;
  left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, #0d0d16 0%, var(--bg) 60%),
    var(--bg);
}
.home-scene { position: absolute; inset: 0; }
.home-scene-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5,5,8,.35) 0%, rgba(5,5,8,.02) 18%,
    rgba(5,5,8,.02) 46%, rgba(5,5,8,.86) 76%, #050508 100%);
}
.ghost-figure-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ghost-aura { top: 38%; width: 380px; height: 380px; }
.home-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 160px;   /* 플로팅 CTA·네비게이션에 가리지 않게 */
}
.home-front .home-spacer { flex: 1; }
.ghost-figure {
  height: 102%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 0 24px rgba(20,20,34,.9));
  animation: ghost-breathe 7s ease-in-out infinite, ghost-sway 11s ease-in-out infinite;
}
.ghost-figure.dim { opacity: .45; filter: blur(3px) drop-shadow(0 0 24px rgba(20,20,34,.9)); }
.ghost-figure.flickering { animation: ghost-breathe 7s ease-in-out infinite, ghost-sway 11s ease-in-out infinite, ghost-flicker 9s steps(1) infinite; }
@keyframes ghost-breathe { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.015) translateY(-5px); } }
@keyframes ghost-sway { 0%,100% { rotate: 0deg; } 30% { rotate: .5deg; } 70% { rotate: -.5deg; } }
@keyframes ghost-flicker {
  0%, 91.9%, 92.6%, 100% { opacity: 1; }
  92% { opacity: .35; }
  92.3% { opacity: .85; }
}
body.level-low .ghost-figure { animation: ghost-breathe 9s ease-in-out infinite; }
body.level-low .ghost-figure.flickering { animation: ghost-breathe 9s ease-in-out infinite; }
body.level-high .ghost-figure { animation-duration: 5s, 8s; }

.ghost-dialogue {
  margin-top: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  min-height: 52px;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: .06em;
  color: #d0cabd;
  padding: 0 24px;
  opacity: 0;
  animation: dialogue-in 2.4s ease .6s forwards;
}
@keyframes dialogue-in { to { opacity: 1; } }
/* 홈의 귀신 이름 — 귀신 상세와 같은 크기·좌측 정렬 */
.ghost-name-tag {
  margin-top: 12px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #e9e3d6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
  text-align: left;
}
.home .stage-badge { margin-top: 3px; }
.home-status {
  text-align: left;
  font-size: 12px;
  color: var(--ink-dim);
  margin: 4px 0 14px;
  letter-spacing: .08em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
.home-actions { padding-bottom: 8px; }
.home-gwirok-link { cursor: pointer; }

/* 귀신 뒤의 기척 — 천천히 숨 쉬는 안개 */
.ghost-aura {
  position: absolute;
  top: 50%; left: 50%;
  width: 300px; height: 300px;
  transform: translate(-50%, -58%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58,58,90,.14) 0%, rgba(58,58,90,.05) 45%, transparent 70%);
  animation: aura-breathe 9s ease-in-out infinite;
  pointer-events: none;
}
.ghost-aura.calm {
  background: radial-gradient(circle, rgba(201,168,106,.1) 0%, rgba(201,168,106,.04) 45%, transparent 70%);
}
@keyframes aura-breathe {
  0%, 100% { opacity: .6; transform: translate(-50%, -58%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -58%) scale(1.08); }
}
body.level-low .ghost-aura { animation: none; opacity: .5; }

.wet-footprints {
  text-align: center;
  margin-top: 8px;
  color: var(--cold);
  font-size: 12px;
  letter-spacing: 1.4em;
  text-indent: 1.4em;
  opacity: 0;
  animation: footprints 8s ease-in-out infinite;
}
@keyframes footprints { 0%,100% { opacity: 0; } 40%,60% { opacity: .5; } }

/* ── 이야기 목록/상세 ─────────────────────────────────────── */
/* 이야기 상세 상단 — 대표 이미지 위에 제목을 얹는다 */
.story-hero {
  position: relative;
  margin: -20px -20px 18px;
  height: 232px;
  overflow: hidden;
  background: #08080e;
}
.story-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,8,.3) 0%, transparent 28%, transparent 52%, var(--bg) 100%);
  pointer-events: none;
}
.icon-ctrl.hero-back {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(5,5,8,.55);
  color: var(--ink);
  font-size: 16px;
  backdrop-filter: blur(4px);
  transition: background .3s;
}
.hero-back:hover { background: rgba(5,5,8,.8); }
.hero-title-block {
  position: absolute;
  left: 20px; right: 20px; bottom: 10px;
  z-index: 2;
}
.hero-title {
  font-size: 22px;
  letter-spacing: .12em;
  color: #ddd7ca;
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
}
.hero-meta {
  margin-top: 6px;
  font-size: 12px;
  color: #aaa496;
  letter-spacing: .06em;
  text-shadow: 0 1px 8px rgba(0,0,0,.85);
}

.story-card-title { font-size: 17px; letter-spacing: .08em; margin-bottom: 6px; }
.story-card-summary {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-dim);
  margin-bottom: 10px;
  display: -webkit-box;          /* 2줄을 넘으면 …으로 줄인다 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-cover-row { display: flex; gap: 14px; align-items: flex-start; }
.story-cover-thumb {
  width: 78px; height: 110px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #08080e;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.story-cover-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }

.episode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .3s;
}
.episode-row:hover { background: rgba(255,255,255,.015); }
.episode-row .ep-num {
  flex-shrink: 0;
  width: 26px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.episode-row .ep-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.episode-row .ep-title { font-size: 14.5px; }
.episode-row .ep-views { font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; }
.episode-row .ep-state { font-size: 11.5px; color: var(--ink-faint); letter-spacing: .1em; flex-shrink: 0; margin-left: 12px; }
.episode-row.read .ep-num { color: var(--ink-dim); }
.episode-row.read .ep-title { color: var(--ink-dim); }
.episode-row.read .ep-state { color: var(--cold); opacity: .8; }

/* ── 검색 ─────────────────────────────────────────────────── */
/* 제목과 우측 아이콘을 한 줄에 — 세로 가운데가 맞는다 */
.screen-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.screen-topbar .screen-title.left { margin: 0; }

.search-corner {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 제목 줄 안에 들어갈 때는 떠 있지 않고 줄의 일부가 된다 */
.search-corner.inline {
  position: static;
  flex-shrink: 0;
}
.search-corner .icon-ctrl { background: rgba(10, 10, 14, .55); border-radius: 50%; }
/* 프로필 버튼 — 전체 메뉴 입구 (대표 사자 프로필 또는 구글 프로필) */
.profile-btn {
  padding: 0;
  overflow: hidden;
  border: 1px solid #33333c;
}
.profile-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.search-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.search-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 14.5px;
  color: var(--ink);
  letter-spacing: .03em;
  outline: none;
}
.search-input:focus { border-color: #55555f; }
.search-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.search-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: #101016;
  flex-shrink: 0;
}
.search-thumb.round { border-radius: 50%; border: 1px solid #2c2c35; }
.search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-row-title { font-size: 14.5px; }
.search-row-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; letter-spacing: .05em; }
/* 최근 검색 이력 */
.sh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 10px;
}
.sh-title { font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.sh-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-item {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-dim);
  background: var(--surface);
  cursor: pointer;
}
.sh-item:hover { color: var(--ink); border-color: #55555f; }

/* ── 추천 — 이야기 상세(카드) · 귀신 상세(원형 프로필) ────── */
.rec-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink);
  margin: 22px 0 12px;
}
.rec-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rec-row::-webkit-scrollbar { display: none; }
.rec-card { width: 128px; flex-shrink: 0; cursor: pointer; }
.rec-cover {
  width: 128px;
  height: 128px;
  border-radius: 10px;
  overflow: hidden;
  background: #101016;
  margin-bottom: 8px;
}
.rec-cover img { width: 100%; height: 100%; object-fit: cover; }
.rec-name {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-sub { font-size: 11px; color: var(--ink-faint); margin-top: 3px; letter-spacing: .04em; }
.rec-ghost { width: 104px; flex-shrink: 0; cursor: pointer; text-align: center; }
.rec-ghost-img {
  width: 96px;
  height: 96px;
  margin: 0 auto 8px;
  border-radius: 50%;
  overflow: hidden;
  background: #101016;
  border: 1px solid #2c2c35;
}
.rec-ghost-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rec-ghost-img.sil img { opacity: .55; filter: brightness(.7); }

/* 이야기 목록 — 진행바 우측에 읽은 회차 수 (다 읽으면 숫자 없이 바만) */
.progress-row { display: flex; align-items: center; gap: 8px; }
.progress-row .progress-track { flex: 1; }
.progress-count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* 이야기 설명 — 두 줄 넘으면 ∨ 버튼으로 접고 편다 */
.desc-wrap {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 14px;
}
.story-desc {
  flex: 1;
  font-size: 14px;
  line-height: 2;
  color: var(--ink-dim);
  margin: 0;
}
.story-desc.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-toggle {
  flex-shrink: 0;
  align-self: flex-end;   /* 접힌 두 번째 줄 끝에 맞춰 표시 */
  color: var(--ink-faint);
  padding: 2px 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.desc-toggle svg { width: 16px; height: 16px; }
.desc-toggle:hover { color: var(--ink); }

/* 플로팅 CTA — 네비게이션 바 위 중앙의 다음 행동 */
.float-cta {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* 네비게이션(약 67px) 바로 위에 16px 띄운다.
     네비의 아래 여백에 이미 safe-area 가 들어 있어 여기서도 같은 값을 더한다. */
  bottom: calc(83px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;   /* 사진·글씨에 붙는 낮은 높이 */
  border-radius: 999px;
  background: #f0ede4;
  border: 1px solid #cfccc3;
  color: #17171d;
  font-size: 13.5px;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  cursor: pointer;
  animation: float-cta-in .45s ease both;
}
/* 하단 네비가 없는 화면(귀신·이야기 상세)에서는 바닥에 더 가깝게 붙인다 */
body:has(#nav.hidden) .float-cta { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.float-cta .fc-arrow { font-size: 16px; color: #55555f; }
.float-cta.has-avatar { padding-left: 6px; }
.float-cta .fc-label { overflow: hidden; text-overflow: ellipsis; }
/* 버튼 좌측의 귀신 프로필 — 해소 단계에 따른 현재 모습 */
.fc-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #cfccc3;
  background: #101016;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fc-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fc-avatar img.sil { opacity: .55; filter: brightness(.7); }
.fc-avatar img.dim { filter: grayscale(.7) brightness(.55); }
.fc-avatar .fc-q { font-size: 15px; color: #3d3a44; }
@keyframes float-cta-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
body.level-low .float-cta { animation-duration: .15s; }

/* 행적의 주인 — 이름을 누르면 귀신 상세로 */
.ghost-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #56565f;
}
.ghost-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #3a3a44;
  background-size: 240%;              /* 해소 사진의 얼굴 부분만 보이게 확대 크롭 */
  background-position: 50% 18%;
  background-color: #101016;
  flex-shrink: 0;
}

/* ── 읽기 화면 ────────────────────────────────────────────── */
.reader {
  position: fixed;
  inset: 0;
  left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, #0d0d16 0%, var(--bg) 60%),
    var(--bg);
  z-index: 50;
}
/* 상단 메뉴 — 평소엔 숨김, 화면 가운데를 누르면 나타남 */
.reader-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  background: rgba(26,26,31,.98);   /* 본문(검정)과 구분되는 밝은 회흑색 */
  border-bottom: 1px solid var(--line);
  z-index: 9;
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}
.reader-top.visible { transform: none; opacity: 1; pointer-events: auto; }
.reader-top .r-title { font-size: 12.5px; color: var(--ink-dim); letter-spacing: .12em; }
.reader-top .r-title #page-indicator { color: var(--ink-faint); }
.reader-top button { color: var(--ink-faint); font-size: 12px; letter-spacing: .1em; padding: 4px 8px; }
.reader-top button:hover { color: var(--ink); }

/* 하단 풋터 — 완독 시(또는 가운데 탭) 나타난다: 이전화 · 댓글 · 다음화 */
.reader-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(26,26,31,.98);   /* 헤더와 같은 회흑색 — 본문과 구분 */
  border-top: 1px solid #2e2e37;
  z-index: 9;
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}
.reader-footer.visible { transform: none; opacity: 1; pointer-events: auto; }
.reader-footer .icon-ctrl { padding: 0; font-size: 0; }
.rf-btns {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}
.rf-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 18px;
}
.rf-btn svg { width: 21px; height: 21px; }
.rf-btn span { font-size: 10.5px; letter-spacing: .1em; color: var(--ink-faint); }
.rf-btn.disabled { opacity: .3; pointer-events: none; }
/* 이동바 — 흰색 슬라이더로 구간 이동 */
.rf-seek {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 4px 0 6px;
}
.rf-seek input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
.rf-seek input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, #fff var(--p, 0%), rgba(255,255,255,.22) var(--p, 0%));
}
.rf-seek input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  margin-top: -6.5px;
  box-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.rf-seek input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.22);
}
.rf-seek input[type="range"]::-moz-range-progress { height: 3px; border-radius: 2px; background: #fff; }
.rf-seek input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border: none;
  border-radius: 50%;
  background: #fff;
}
.seek-label {
  min-width: 40px;
  text-align: right;
  font-size: 12px;
  letter-spacing: .05em;
  color: #e9e3d6;
}
/* 뷰어 설정 패널 */
.rset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}
.rset-label { font-size: 13.5px; color: var(--ink); }
.rset-seg { display: flex; gap: 6px; }
.rset-seg button {
  padding: 7px 14px;
  border: 1px solid #26263266;
  border-radius: 9px;
  background: rgba(12,12,18,.8);
  color: var(--ink-faint);
  font-size: 12.5px;
  cursor: pointer;
}
.rset-seg button.on { color: var(--ink); border-color: #6a6455; background: rgba(24,24,32,.9); }
.icon-ctrl.disabled { opacity: .25; pointer-events: none; }

/* 페이지 무대 — 좌/우 터치로 장 넘김 */
.reader-stage {
  position: absolute;
  inset: 0;
  padding: 46px 26px 40px;
  cursor: pointer;
}
.reader-body {
  height: 100%;
  overflow: hidden;
  font-size: 16.5px;
  line-height: 2.15;
  letter-spacing: .02em;
  color: #cfc9bc;
  /* 획을 깎던 처리는 없앴다 — 본문 글꼴을 마루부리로 바꾸면서 필요가 없어졌다.
     가짜 굵게만 막아 둔다(원본 굵기 그대로 그리게 한다). */
  font-synthesis-weight: none;
}
/* 글자 프리셋 — 크기·줄 간격·여백을 함께 조절 */
.reader.preset-small .reader-stage { padding: 40px 20px 34px; }
.reader.preset-small .reader-body { font-size: 14.5px; line-height: 1.95; }
.reader.preset-large .reader-stage { padding: 52px 32px 46px; }
.reader.preset-large .reader-body { font-size: 19px; line-height: 2.3; }
/* 스크롤뷰 — 본문 전체를 이어서 읽는다 */
.reader.flow-scroll .reader-stage {
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reader.flow-scroll .reader-stage::-webkit-scrollbar { display: none; }
.reader.flow-scroll .reader-body {
  height: auto;
  overflow: visible;
  padding-bottom: 140px;   /* 마지막 문단이 풋터에 가리지 않게 */
}
.reader-measure {
  position: absolute;
  left: -9999px; top: 0;
  height: auto;
  visibility: hidden;
  pointer-events: none;
}
/* 본문 강조 — 관리자에서 별표 두 개로 감싼 부분.
   어두운 화면에서는 굵기만으로 잘 드러나지 않아 한 톤 밝게 함께 올린다. */
.reader-body b {
  font-weight: 700;
  color: #e8e2d6;
}
.reader-body p {
  margin-bottom: 26px;
  opacity: 0;
  animation: para-in 1.1s ease forwards;
}
.page-hint {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--ink-faint);
  z-index: 8;
  pointer-events: none;
  animation: breathe-text 3s ease-in-out infinite;
  transition: opacity 1.2s;
}
.page-hint.fading { opacity: 0; }
@keyframes para-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
body.level-low .reader-body p { animation-duration: .4s; }

/* 회차 도입 삽화 — 뷰어의 첫 화면. 페이지뷰는 첫 장 전체, 스크롤뷰는 최상단 한 화면 */
.page-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: art-in 1.6s ease both;
}
.reader.flow-scroll .scroll-art {
  height: 100dvh;
  margin: -46px -26px 34px;   /* reader-stage 여백을 상쇄해 화면 가득 채운다 */
  background-size: cover;
  background-position: center;
  animation: art-in 1.6s ease both;
}
.reader.preset-small.flow-scroll .scroll-art { margin: -40px -20px 30px; }
.reader.preset-large.flow-scroll .scroll-art { margin: -52px -32px 38px; }
@keyframes art-in { from { opacity: 0; } to { opacity: 1; } }
body.level-low .page-art,
body.level-low .reader.flow-scroll .scroll-art { animation-duration: .4s; }

/* 회차 진입 도입 연출 — 검은 화면 위 첫 문장 */
.reader-entry {
  position: fixed; inset: 0;
  z-index: 70;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 34px;
  text-align: center;
  cursor: pointer;
  transition: opacity .9s ease;
}
.reader-entry.leaving { opacity: 0; pointer-events: none; }
.reader-entry .entry-meta {
  font-size: 11.5px;
  letter-spacing: .3em;
  color: var(--ink-faint);
  margin-bottom: 30px;
}
.reader-entry .entry-line {
  max-width: 420px;
  font-size: 19px;
  line-height: 2.2;
  letter-spacing: .06em;
  color: #d5cfc2;
  opacity: 0;
  transition: opacity 2.4s ease;
}
.reader-entry .entry-line.shown { opacity: 1; }
.reader-entry .entry-hint {
  position: absolute;
  bottom: 30px; left: 0; right: 0;
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--ink-faint);
  animation: breathe-text 3s ease-in-out infinite;
}
.reader-done-page { display: flex; flex-direction: column; justify-content: center; }
.reader-done {
  animation: screen-in 1.2s ease both;
}
.reader-done-title {
  text-align: center;
  letter-spacing: .3em;
  color: var(--ink-dim);
  font-size: 13px;
  margin: 18px 0;
}

/* ── 댓글 ─────────────────────────────────────────────────── */
.comment-item {
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.8;
}
.comment-item .c-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.comment-item .c-name { font-size: 12px; color: var(--ink); letter-spacing: .05em; }
.comment-item .c-time { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.comment-item .c-body { color: #cfc9bc; }
.comment-item .c-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}
.comment-item .c-foot .spacer { flex: 1; }
.comment-item .c-ep {
  font-size: 11px;
  color: var(--ink-faint);
  border: 1px solid #26263255;
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46%;
}
.c-react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 11.5px;
  cursor: pointer;
  padding: 2px 4px;
}
.c-react svg { width: 15px; height: 15px; }
.c-react.on { color: #e9e3d6; }
.c-report { font-size: 10.5px; color: #4d4a45; padding: 2px 6px; letter-spacing: .1em; background: none; border: none; cursor: pointer; }
.c-report:hover { color: #8a4a52; }
.comment-form { margin-top: 16px; }
.comment-form select {
  width: 100%;
  margin-bottom: 8px;
}
/* 댓글 도구줄 — 정렬 탭 + 새로고침 */
.c-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--line);
}
.c-tabs { display: flex; gap: 4px; }
.c-tabs button {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 12.5px;
  letter-spacing: .06em;
  padding: 5px 9px;
  cursor: pointer;
}
.c-tabs button.on { color: var(--ink); font-weight: 600; }
.c-refresh {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 4px;
}
.c-refresh svg { width: 16px; height: 16px; }
.c-refresh:hover { color: var(--ink); }
/* BEST 배지 — 좋아요 50개 이상 상위 10개 */
.c-best {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(146,44,50,.85);
  color: #f0e8dc;
  font-size: 9.5px;
  letter-spacing: .12em;
  vertical-align: 1px;
}
/* 회차 댓글 시트 — 뷰어 위로 떠오르는 바닥 패널 */
#csheet {
  position: fixed; inset: 0;
  z-index: 85;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.csheet-box {
  width: 100%;
  max-width: 480px;
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  background: #14141a;
  border: 1px solid #2e2e37;
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  animation: csheet-up .3s ease both;
}
@keyframes csheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.csheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.csheet-title { font-size: 13.5px; letter-spacing: .12em; color: var(--ink); }
.csheet-title b { color: #e9e3d6; }
.csheet-list {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  scrollbar-width: none;
}
.csheet-list::-webkit-scrollbar { display: none; }
.csheet-form { margin-top: 10px; }
.csheet-form textarea { min-height: 64px; }
.login-gate {
  margin-top: 16px;
  padding: 18px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.google-btn-slot {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin: 6px 0 4px;
}
/* 앱 안에서는 구글이 그려주는 버튼을 쓸 수 없어(내장 화면 로그인 차단)
   같은 크기의 자체 버튼을 세운다. 눌러야 안드로이드 계정 선택 창이 뜬다. */
.google-btn-slot .google-native-btn { width: 260px; max-width: 100%; }
.google-btn-slot .google-native-btn:disabled { opacity: .6; }

/* ── 귀록 ─────────────────────────────────────────────────── */
.gwirok-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
/* 귀록 목록 — 원형 프로필형 항목 (프로필을 크게, 간격은 좁게) */
.gk-item { text-align: center; cursor: pointer; padding: 6px 0 10px; }
.gk-img {
  width: 100%;
  max-width: 172px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #101016;
  border: 1px solid #2c2c35;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gk-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gk-img img.sil { opacity: .55; filter: brightness(.7); }
.gk-img img.dim { filter: grayscale(.7) brightness(.55); }
.gk-unknown { font-size: 34px; color: #16161f; text-shadow: 0 0 18px rgba(60, 60, 90, .3); }
.gk-closed { font-size: 10.5px; letter-spacing: .2em; color: #4a463e; }
/* 완전한 인도 — 금색 테두리로 구분 */
.gk-item.complete .gk-img {
  border: 2px solid #c9a86a;
  box-shadow: 0 0 14px rgba(201, 168, 106, .25);
}
.gk-name { font-size: 14px; letter-spacing: .12em; color: var(--ink); margin-bottom: 4px; }
.gk-sub { font-size: 11.5px; color: var(--ink-dim); letter-spacing: .06em; }
.gk-hint { font-size: 10.5px; color: var(--cold); margin-top: 5px; }
.gwirok-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 40%),
    var(--surface);
  padding: 14px 12px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .3s;
}
.gwirok-card:hover { border-color: var(--ink-faint); }
.gwirok-card .g-img {
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.gwirok-card .g-img img { height: 100%; }
.gwirok-card .g-img.locked img { opacity: .25; filter: blur(4px) brightness(.6); }
.gwirok-card .g-img .unknown-mark { font-size: 40px; color: #16161f; text-shadow: 0 0 18px rgba(60,60,90,.3); }
.gwirok-card .g-name { font-size: 14px; letter-spacing: .15em; margin-bottom: 3px; }
.gwirok-card .g-story { font-size: 11px; color: var(--ink-faint); margin-bottom: 8px; }
.gwirok-card .g-rate { font-size: 11px; color: var(--ink-dim); margin-top: 6px; letter-spacing: .1em; }

/* ── 귀신 상세 — 카드가 화면을 가득 채운다 ───────────────────── */
.ghost-detail {
  position: fixed;
  inset: 0;
  left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background: #050508;   /* 이미지 아래 정보 영역은 검정 배경 */
}
/* overflow:hidden 이 반드시 필요하다 —
   귀신 이미지(.ghost-figure)에는 drop-shadow 가 걸려 있는데, 이미지 아래쪽으로 번진
   그림자가 이 레이어 밖으로 새어나가면 어두운 배경 위에 옅은 가로줄로 보인다.
   레이어는 스크롤에 따라 위로 밀려 올라가므로, 그 줄이 '다른 귀신' 영역까지
   따라 올라와 화면을 가로지른다. 여기서 잘라내면 아래는 항상 순수 배경색이 된다. */
.gd-scene { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.gd-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.gd-scrim {
  position: absolute;
  inset: 0;
  /* 귀신 이름 중간쯤부터 검정으로 저물어 아래 정보 영역의 가독성을 지킨다 */
  background: linear-gradient(180deg,
    rgba(5,5,8,.45) 0%, rgba(5,5,8,.05) 18%,
    rgba(5,5,8,.05) 42%, rgba(5,5,8,.9) 56%, #050508 64%);
}
.gd-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a3a44;
  font-size: 13px;
  letter-spacing: .3em;
  background:
    radial-gradient(ellipse 40% 22% at 48% 40%, rgba(30,30,42,.8) 0%, transparent 70%),
    radial-gradient(ellipse 22% 14% at 60% 55%, rgba(24,24,34,.7) 0%, transparent 70%),
    #050507;
}
.gd-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.gd-top .icon-ctrl {
  background: rgba(5,5,8,.5);
  border-color: var(--line);
  backdrop-filter: blur(4px);
  color: var(--ink);
}
/* 이미지 하단을 지나면 — 헤더가 짙어지고 이름이 드러난다 */
.gd-top-name {
  flex: 1;
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .25s ease;
}
.ghost-detail.scrolled .gd-top {
  background: rgba(7, 7, 12, .92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.ghost-detail.scrolled .gd-top-name { opacity: 1; }
/* 홈에서 마주하는 중 — 금색으로 켜진다 */
.gd-top .icon-ctrl.active { color: #c9a86a; border-color: #c9a86a; }
/* 남은 일이 있으면 느낌표 아이콘에 빨간 점 */
.icon-ctrl.has-dot { position: relative; }
.icon-ctrl.has-dot::after {
  content: "";
  position: absolute;
  top: 5px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c0303a;
  box-shadow: 0 0 6px rgba(192, 48, 58, .6);
}

/* 사자의 기록 — 네비게이션까지 덮는 전체 화면 오버레이 */
#stasks {
  position: fixed;
  inset: 0;
  z-index: 92;   /* 하단 네비(40)·플로팅 CTA(40) 위 */
  background: #050508;
  overflow-y: auto;
  animation: screen-in .3s ease both;
}
.st-box {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 20px calc(40px + env(safe-area-inset-bottom, 0px));
}
.st-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.st-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink);
}
.st-label {
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--ink-faint);
  margin-bottom: 5px;
}
.st-ghost {
  font-size: 19px;
  letter-spacing: .16em;
  color: #e9e3d6;
  margin-bottom: 4px;
}
.st-sec {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink);
  margin: 24px 2px 8px;
  text-align: left;
}
.st-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-dim);
}
.st-row .st-mark {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  color: var(--ink-faint);
}
.st-row.done { color: var(--ink); }
.st-row.done .st-mark { color: var(--cold); }
/* 프로필 줄의 이야기 제목 — 누르면 이야기 상세로 */
.gd-story-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #56565f;
}

/* 프로필 — 이미지 하단 좌측 정렬 (이름 · 출몰 정보 · 해소 상태) */
.gd-profile { text-align: left; margin-bottom: 14px; }
.gd-name {
  font-size: 27px;
  letter-spacing: .16em;
  color: #e9e3d6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
  margin-bottom: 8px;
}
.gd-profile-sub {
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .08em;
  margin-bottom: 10px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
.gd-profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gd-profile-row .stage-badge { margin-top: 0; }
.gd-rate { font-size: 12px; color: var(--ink-dim); letter-spacing: .06em; }

/* 기록된 정보 — 해소 전에는 투명한 블러로 가려진다 */
.gd-info {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(11, 11, 17, .72);
  padding: 14px 16px;
  margin-bottom: 14px;
  overflow: hidden;
}
.gd-info-title {
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.gd-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--ink-dim);
}
.gd-info-row b { color: var(--ink); font-weight: 400; text-align: right; }
.gd-info.locked .gd-info-body {
  filter: blur(7px);
  opacity: .55;
  user-select: none;
  pointer-events: none;
}
.gd-info-lock {
  position: absolute;
  inset: 0;
  top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ink-dim);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
  pointer-events: none;
}
.gd-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 20px 140px;   /* 하단 네비가 마지막 버튼을 가리지 않게 */
}
.gd-front::-webkit-scrollbar { display: none; }
.gd-spacer { height: 44dvh; flex-shrink: 0; }
.ghost-detail .gwirok-detail-name,
.ghost-detail .gwirok-detail-loc,
.ghost-detail .home-status { text-shadow: 0 2px 12px rgba(0,0,0,.9); }

.gwirok-detail-img {
  height: 230px;
  display: flex; align-items: center; justify-content: center;
  margin: 6px 0 4px;
}
.gwirok-detail-img img { height: 100%; }
.gwirok-detail-img.silhouette-only img { opacity: .7; }
.gwirok-detail-img.locked img { opacity: .2; filter: blur(6px); }
.gwirok-detail-name { text-align: center; font-size: 19px; letter-spacing: .3em; }
.gwirok-detail-loc { text-align: center; font-size: 12px; color: var(--ink-dim); margin-top: 6px; letter-spacing: .1em; }

.gwirok-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  background: var(--surface);
}
.gwirok-item.locked { opacity: .6; background: transparent; }
.gwirok-item .gi-type { font-size: 10.5px; letter-spacing: .25em; color: var(--ink-faint); margin-bottom: 6px; }
.gwirok-item .gi-title { font-size: 14px; margin-bottom: 6px; letter-spacing: .05em; }
.gwirok-item .gi-desc { font-size: 13px; line-height: 1.9; color: var(--ink-dim); }
.gwirok-item.unlocked .gi-desc { color: #b8b1a3; }
.gwirok-item .gi-locked-msg { font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
.gwirok-item .gi-condition { font-size: 11.5px; color: var(--cold); margin-top: 8px; opacity: .8; }

.next-condition-box {
  border-left: 2px solid var(--cold);
  padding: 10px 14px;
  margin: 16px 0;
  font-size: 13px;
  color: #9db2c2;
  line-height: 1.8;
  background: rgba(93,125,150,.04);
}

/* ── 보관함 ───────────────────────────────────────────────── */
.tab-row {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.tab-row button {
  flex: 1;
  padding: 11px 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: .08em;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.tab-row button.active { color: var(--ink); border-bottom-color: var(--ink-dim); }
.empty-note {
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  padding: 48px 20px;
  line-height: 2;
  font-style: italic;
}

/* ── 설정 ─────────────────────────────────────────────────── */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
}
.setting-row .s-label { font-size: 14.5px; }
.setting-row .s-desc { font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; line-height: 1.6; }
.toggle {
  width: 42px; height: 24px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  position: relative;
  flex-shrink: 0;
  margin-left: 14px;
  transition: background .3s, border-color .3s;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: left .25s, background .25s;
}
.toggle.on { border-color: #3a2228; background: #1c1014; }
.toggle.on::after { left: 21px; background: var(--blood-bright); }
.level-picker { display: flex; gap: 8px; margin-left: 14px; }
.level-picker button {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-faint);
}
.level-picker button.active { color: var(--ink); border-color: var(--ink-dim); }

/* ── 토스트 / 연출 레이어 ─────────────────────────────────── */
/* 토스트 — 상단에 하얀 캡슐로 떠오른다 */
#toast-layer {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 432px;
  z-index: 110;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  border: 1px solid rgba(233,227,214,.25);
  background: rgba(18,18,24,.62);          /* 반투명 — 뒤 내용이 비친다 */
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-radius: 999px;                    /* 양끝이 둥근 알약 */
  padding: 10px 22px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .03em;
  text-align: center;
  color: #ece7db;
  cursor: pointer;
  animation: toast-in 1s ease both;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.toast.fading { opacity: 0; transition: opacity 1.2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

#flicker {
  position: fixed; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 90;
}
#flicker.blink { animation: hard-flicker .28s steps(2) 1; }
@keyframes hard-flicker { 0% { opacity: 0; } 25% { opacity: .85; } 50% { opacity: .1; } 75% { opacity: .7; } 100% { opacity: 0; } }

#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 30;
  background: radial-gradient(ellipse 90% 75% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
  opacity: .8;
}
body.midnight-mode #vignette {
  background: radial-gradient(ellipse 80% 65% at 50% 45%, transparent 45%, rgba(0,0,0,.8) 100%);
  opacity: 1;
}

/* ── 모달 ─────────────────────────────────────────────────── */
#modal-layer {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.82);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-box {
  width: 100%;
  max-width: 420px;
  max-height: 82dvh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  animation: screen-in .6s ease both;
}

/* ── 로딩 ─────────────────────────────────────────────────── */
.loading-note {
  text-align: center;
  padding: 120px 30px;
  color: var(--ink-faint);
  font-size: 13.5px;
  letter-spacing: .2em;
  animation: breathe-text 2.6s ease-in-out infinite;
}

/* ── 마지막 대화 — 귀신과 마주하는 화면 ─────────────────────── */
.dialogue {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 60;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, #0d0d16 0%, var(--bg) 60%),
    var(--bg);
  display: flex;
  flex-direction: column;
  padding: 14px 22px 26px;
  overflow: hidden;
}
.dialogue-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dialogue-top button { color: var(--ink-faint); font-size: 12px; letter-spacing: .1em; padding: 4px 8px; }
.dialogue-top button:hover { color: var(--ink); }
.dialogue-top .dlg-title { font-size: 12px; letter-spacing: .35em; color: var(--ink-dim); }
.dialogue-top .dlg-step { font-size: 11px; color: var(--ink-faint); letter-spacing: .15em; min-width: 44px; text-align: right; }
/* 화면 전체를 채우는 장면 — 대사와 선택지는 그 위에 얹힌다 */
.dlg-scene { position: absolute; inset: 0; overflow: hidden; }
.dlg-scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .8;
}
.dlg-scene-ghost {
  position: absolute;
  left: 50%;
  top: 7%;
  height: 66%;
  transform: translateX(-50%);
  opacity: .92;
  filter: drop-shadow(0 0 30px rgba(20,20,34,.9));
  /* 마지막 대화에서는 움직이지 않는다 */
}
.dlg-scene-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5,5,8,.6) 0%, rgba(5,5,8,.12) 22%,
    rgba(5,5,8,.12) 48%, rgba(5,5,8,.9) 78%, #050508 100%);
}
.dialogue-top { position: relative; z-index: 2; }
.dlg-spacer { flex: 1; }
.dialogue-line {
  position: relative;
  z-index: 2;
  min-height: 92px;
  text-align: center;
  font-size: 16.5px;
  line-height: 2.05;
  letter-spacing: .04em;
  color: #ddd7ca;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  opacity: 0;
  transition: opacity 1.5s ease;
  padding: 0 4px;
}
.dialogue-line.shown { opacity: 1; }
.dialogue-choices {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  min-height: 186px;   /* 선택지 자리를 미리 확보 — 대사 위치가 처음부터 고정된다 */
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.dialogue-choices.shown { opacity: 1; pointer-events: auto; }
.choice-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  margin-top: 9px;
  border: 1px solid #26263266;
  border-radius: var(--radius);
  background: rgba(12,12,18,.88);
  backdrop-filter: blur(4px);
  color: #c4bdaf;
  font-size: 14.5px;
  line-height: 1.7;
  transition: border-color .3s, background .3s;
}
.choice-btn:hover { border-color: var(--ink-faint); background: rgba(17,17,25,.95); }

/* 은은하게 밝아졌다 어두워지는 빛 — 단서 찾기 안내 화면(.rn-glow)에서 쓴다 */
@keyframes gate-breathe { 0%,100% { opacity: .5; } 50% { opacity: .9; } }

/* ── 온보딩 마무리 시트 (첫 화 완독 직후 — 로그인 유도) ─────── */
#obsheet {
  position: fixed; inset: 0;
  z-index: 88;
  background: rgba(0,0,0,.66);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#obsheet .rn-box { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
#ob-actions .google-btn-slot { margin-top: 4px; }

/* ── 단서 찾기 유도 시트 (마지막 회차 완독 직후) · 공유 유도 시트 ── */
#restnudge,
#sharenudge {
  position: fixed; inset: 0;
  z-index: 88;
  background: rgba(0,0,0,.66);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity .35s ease;
}
#restnudge.leaving,
#sharenudge.leaving { opacity: 0; pointer-events: none; }
/* 공유 시트의 책 이미지 — 귀록을 건네는 손 (배경 투명) */
.sn-art {
  height: 200px;
  margin: 6px 0 8px;
  background-image: url("/assets/share-nudge.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.rn-box {
  width: 100%;
  max-width: 480px;
  background: #14141a;
  border: 1px solid #2e2e37;
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 14px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  animation: csheet-up .4s ease both;
}
.rn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rn-head b { font-size: 14.5px; letter-spacing: .1em; color: var(--ink); font-weight: 700; }
.rn-title {
  font-size: 16px;
  letter-spacing: .08em;
  color: #e9e3d6;
  margin: 8px 0 8px;
}
.rn-text {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
/* 카드 더미 — 블러된 해소 카드가 앞에, 뒤로 남은 기록들이 겹친다 */
.rn-cards {
  position: relative;
  height: 188px;
  margin-bottom: 12px;
}
.rn-card {
  position: absolute;
  left: 50%; top: 50%;
  width: 118px; height: 166px;
  border-radius: 12px;
  border: 1px solid #3a3a46;
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, #131320 0%, #0a0a10 70%),
    #0a0a10;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.rn-card.b1 { transform: translate(-72%, -52%) rotate(-7deg); width: 104px; height: 148px; filter: brightness(.6); }
.rn-card.b2 { transform: translate(-24%, -50%) rotate(8deg); width: 104px; height: 148px; filter: brightness(.45); }
.rn-card.front { transform: translate(-50%, -50%); z-index: 2; }
.rn-card.front img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(7px) brightness(.8) saturate(.7);   /* 아직 열리지 않은 기록 */
  transform: scale(1.08);   /* 블러 가장자리 숨김 */
}
.rn-seal {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(146,44,50,.75);
  border: 2px solid rgba(146,44,50,.6);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: .1em;
  filter: blur(1.2px);
}
.rn-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 45% at 50% 34%, rgba(222,214,196,.18) 0%, rgba(0,0,0,0) 70%);
  animation: gate-breathe 3.2s ease-in-out infinite;
}
.rn-count {
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--ink);
  margin-bottom: 14px;
}
.rn-box .btn { margin-top: 0; }
.rn-box .link-btn { margin-top: 10px; }

/* ── 사자 프로필 만들기 ─────────────────────────────────────── */
.saja-screen {
  margin: -20px -20px -110px;
  padding: 14px 20px 60px;
  min-height: 100dvh;
}
.saja-guide-title {
  text-align: center;
  font-size: 17px;
  letter-spacing: .12em;
  color: var(--ink);
  margin: 26px 0 16px;
}
.saja-guide-text {
  text-align: center;
  font-size: 13.5px;
  line-height: 2;
  color: #b3a99c;
  margin-bottom: 26px;
}
.saja-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 44px rgba(0,0,0,.6);
}
.saja-sec {
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--ink-faint);
  margin: 18px 2px 8px;
}
.saja-chips { display: grid; grid-template-columns: 1fr; gap: 7px; }
.saja-chips.row { grid-template-columns: 1fr 1fr; }
.saja-chip {
  text-align: left;
  padding: 10px 13px;
  border: 1px solid #26263266;
  border-radius: 10px;
  background: rgba(12,12,18,.8);
  color: #b3a99c;
  cursor: pointer;
}
.saja-chip b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.saja-chip span { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.saja-chip.on { border-color: #6a6455; background: rgba(24,24,32,.9); }
.saja-screen .btn { margin-top: 8px; }
.saja-current { max-width: 220px; margin: 0 auto 10px; }
.saja-current img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.saja-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 2px 0 16px;
  border: 1px solid #26263266;
  border-radius: 14px;
  background: rgba(12,12,18,.7);
  cursor: pointer;
}
.saja-entry-thumb {
  width: 46px; height: 46px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.saja-entry-mark {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed #26263288;
  border-radius: 10px;
  color: var(--ink-faint);
  font-size: 19px;
}
.saja-entry-text { flex: 1; min-width: 0; }
.saja-entry-text b { display: block; font-size: 14px; color: var(--ink); font-weight: 500; }
.saja-entry-text span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.saja-entry-go { color: var(--ink-faint); font-size: 18px; }

/* 보관함 목록 — 표지 썸네일이 있는 행 */
.archive-row { display: flex; align-items: center; gap: 12px; }
.archive-thumb {
  width: 54px; height: 76px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #08080e;
  overflow: hidden;
}
.archive-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.archive-thumb.ghost img { object-fit: contain; padding: 4px 0; }
.archive-thumb.ghost.dim img { opacity: .4; filter: blur(2px) brightness(.7); }
/* 비로그인 로그인 유도 배너 */
.archive-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 15px 16px;
  border: 1px solid #2e2e37;
  border-radius: 14px;
  background: rgba(18,18,24,.85);
}
.archive-login-text b {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 3px;
}
.archive-login-text span {
  display: block;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* ── 전체 메뉴 ─────────────────────────────────────────────── */
.menu-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #26263266;
  border-radius: 14px;
  background: rgba(12,12,18,.7);
  margin-bottom: 12px;
}
.menu-account-text { flex: 1; min-width: 0; }
.menu-account-text b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 500; }
.menu-account-text span {
  display: block;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-faint);
  margin-top: 3px;
}
.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 6px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.menu-row:hover { background: rgba(255,255,255,.015); }
.menu-row-text b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 500; }
.menu-row-text span { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }

/* 라이브 필터 화면 — 카메라 위 실시간 합성 */
.saja-live {
  position: fixed; inset: 0;
  background: #000;
  z-index: 80;
}
.saja-live canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.saja-live-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  z-index: 2;
}
.saja-live-hint {
  font-size: 11.5px;
  letter-spacing: .2em;
  color: rgba(233,227,214,.75);
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.saja-live-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  z-index: 2;
}
.saja-live-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.saja-live-filters .saja-chip { background: rgba(10,10,16,.78); }
.saja-shutter {
  display: block;
  width: 68px; height: 68px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid rgba(233,227,214,.9);
  background: rgba(233,227,214,.16);
  cursor: pointer;
}
.saja-shutter:active { background: rgba(233,227,214,.5); }

/* ── 귀신 카드 모음 화면 ────────────────────────────────────── */
.cards-screen {
  margin: -20px -20px -110px;             /* #screen 패딩을 걷어내고 자체 여백 사용 */
  padding: 14px 20px 150px;               /* 하단 네비에 가리지 않도록 넉넉히 */
  min-height: 100dvh;
}
.cc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cc-title { font-size: 14px; letter-spacing: .25em; color: var(--ink); }
.cc-status {
  text-align: center;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink);
  margin: 2px 0 12px;
}
.cc-status .cc-dot { color: var(--ink-faint); margin: 0 4px; }
/* 영역 제목 — 귀신 카드 / 단서 카드 (구분선 없이 추천 섹션과 같은 결) */
.cc-sec {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink);
  margin: 22px 2px 12px;
  text-align: left;
}
.cards-screen .tooltip-box { margin: 0 20px 12px; text-align: center; }
/* 귀신 카드 — 해소 5단계 가로 스크롤 */
.cc-stage-card { width: 132px; flex-shrink: 0; text-align: center; }
.cc-stage-card.open { cursor: pointer; }
.cc-sc-img {
  aspect-ratio: 3 / 4;
  border: 1px dashed #26263255;
  border-radius: 10px;
  background: rgba(8, 8, 12, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
}
.cc-stage-card.open .cc-sc-img { border-style: solid; border-color: #3a3a4a; }
.cc-sc-img.locked span { font-size: 22px; color: #3d3a34; }
.cc-sc-img img { width: 100%; height: 100%; object-fit: cover; }
.cc-sc-img img.dim { opacity: .55; filter: brightness(.7); }
.cc-sc-img .cc-empty { font-size: 11px; letter-spacing: .2em; color: #4a463e; }
.cc-sc-img .cc-scene {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cc-sc-img .cc-scene img { width: 74%; height: auto; object-fit: contain; }
.cv-nav.disabled { opacity: .25; pointer-events: none; }
/* 단서 카드 — 가로 스크롤 */
.cc-rest-row { margin-bottom: 12px; }
.cc-rest-row .cc-rest-card { width: 132px; flex-shrink: 0; }
.cc-hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin: 8px 0 22px;
}
.cc-rest-head {
  text-align: center;
  font-size: 14px;
  letter-spacing: .2em;
  color: var(--ink);
  margin-bottom: 8px;
}
.cc-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* 소품·주변 인물·장소·해소 카드 — 좌측 정렬 */
  gap: 6px;
  margin-bottom: 6px;
}
/* 섹션 제목 우측의 진행 현황 */
.cc-sec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.cc-sec-status {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink-dim);
  white-space: nowrap;
}
.cc-type {
  font-size: 11.5px;
  color: var(--ink-faint);
  border: 1px solid #26263255;
  border-radius: 12px;
  padding: 2px 9px;
}
.cc-type.done { color: var(--ink); border-color: #3a3a4a; }
.cc-frag { text-align: center; font-size: 12px; color: var(--ink-faint); margin-bottom: 14px; }
.cc-rest-card {
  border: 1px dashed #26263255;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.cc-rest-card.on { border-style: solid; border-color: #3a3a4a; background: rgba(16,16,24,.6); }
.cc-rc-img {
  aspect-ratio: 3 / 4;   /* 단서 카드 일러스트(세로형)와 같은 비율 — 잘리지 않는다 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(8,8,12,.7);
  margin-bottom: 8px;
  overflow: hidden;
}
.cc-rc-img img { width: 100%; height: 100%; object-fit: contain; }
.cc-rc-img.locked span { font-size: 22px; color: #3d3a34; }
.cc-rc-mark { font-size: 20px; color: var(--ink-faint); }
.cc-rc-type { font-size: 10.5px; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: 2px; }
.cc-rc-name { font-size: 13px; color: var(--ink); }
.cc-rc-name.dim { color: #5d574d; }
.cc-rest-card.on { cursor: pointer; }
/* 단서 카드 상세 뷰어 */
.rc-viewer { text-align: center; }
.rc-v-img {
  aspect-ratio: 3 / 4;
  max-width: 250px;
  margin: 0 auto 12px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(8, 8, 12, .7);
  border: 1px solid #3a3a4a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-v-img img { width: 100%; height: 100%; object-fit: contain; }
.rc-v-name { font-size: 16px; letter-spacing: .12em; color: var(--ink); margin: 2px 0 8px; }
.rc-v-desc { font-size: 13px; line-height: 1.9; color: var(--ink-dim); margin-bottom: 6px; }
.cards-screen .btn { margin-top: 8px; }

/* 진행률 옆 [?] 툴팁 */
.tip-btn {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  background: none;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  vertical-align: 1px;
}
/* 안내 툴팁 — 열어도 아래 내용이 밀리지 않도록 화면 위에 겹쳐서 띄운다.
   position:absolute 이면서 top 을 주지 않으면, 원래 흐름에서 놓였을 자리
   (안내 버튼 바로 아래)에 그대로 뜨면서 자리는 차지하지 않는다.
   좌우는 본문과 같은 선에 맞춘다 — 기준은 화면 스크롤 영역(.gd-front)의 padding 20px. */
.tooltip-box {
  position: absolute;
  left: 20px;
  right: 20px;
  z-index: 6;
  margin: 6px 0 0;
  padding: 10px 12px;
  border: 1px solid #33333f;
  border-radius: 10px;
  background: rgba(12,12,18,.97);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(0,0,0,.7);
  font-size: 12px;
  line-height: 1.8;
  color: #b3a99c;
  text-align: left;
  cursor: pointer;   /* 눌러서 닫을 수 있다 */
}
.tooltip-box.hidden { display: none; }
.gd-cta { margin-bottom: 4px; }
.gd-cta .btn { margin-top: 0; }

/* ── 단서 찾기 ─────────────────────────────────────────────── */
.rest-box {
  margin: 14px 0 4px;
  padding: 16px 14px;
  border: 1px solid #26263266;
  border-radius: var(--radius);
  background: rgba(10,10,15,.72);
  backdrop-filter: blur(3px);
  text-align: center;
}
.rest-head {
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ink);
  margin-bottom: 10px;
}
.rest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.rest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 9px;
  border: 1px dashed #26263255;
  border-radius: 8px;
  text-align: left;
}
.rest-item .rest-type { font-size: 10.5px; letter-spacing: .12em; color: var(--ink-faint); }
.rest-item .rest-name { font-size: 12.5px; color: #5d574d; }
.rest-item.on { border-style: solid; border-color: #3a3a4a; background: rgba(20,20,28,.6); }
.rest-item.on .rest-name { color: var(--ink); }
.rest-frag { font-size: 12px; color: var(--ink-faint); margin-bottom: 10px; }
.rest-done { font-size: 13px; color: var(--ink); padding: 6px 0; }
.rest-note { font-size: 12px; line-height: 1.7; color: #b3a99c; margin-top: 8px; }
.rest-note.dim { color: var(--ink-faint); }
.link-btn {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.rate-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13.5px;
}
.rest-img { text-align: center; margin-bottom: 10px; }
.rest-img img { max-width: 60%; max-height: 180px; border-radius: 8px; }
.rest-pick-btn { display: block; width: 100%; margin-top: 8px; text-align: left; }

/* 단서 찾기 연출 영상 — 전체 화면. 결과는 이미 결정되어 있고, 이건 감상용 연출이다 */
#restore-video-layer {
  position: fixed; inset: 0;
  z-index: 300;
  background: #000;
  overflow: hidden;
}
#restore-video-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 마지막 대화 결과 연출 영상 — 위와 동일한 방식.
   영상이 끝나면 마지막 장면이 그대로 배경으로 남고, 그 위에 결과 카드가 떠오른다. */
#dialogue-video-layer {
  position: fixed; inset: 0;
  z-index: 300;
  background: #000;
  overflow: hidden;
}
#dialogue-video-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#dialogue-video-layer.reveal-shown .rv-scrim { opacity: 1; }

/* 대화 결과 오버레이 — 단서 찾기(.rv-reveal)과 같은 틀에, 카드만 세로 포스터형 */
.dr-reveal { justify-content: center; gap: 0; }
.dr-reveal-card {
  width: 62%;
  max-width: 230px;
  margin-bottom: 18px;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .6));
}
.dr-reveal-card .poster-card {
  width: 100%;
  /* 카드 비율을 반드시 지정해야 한다 —
     1~3단계 카드는 안에 든 요소가 모두 절대 위치라 스스로 높이를 갖지 못한다.
     비율이 없으면 높이가 0으로 찌그러져 카드가 통째로 보이지 않는다.
     (4·5단계만 흐름 안의 <img>가 있어 우연히 높이가 생겼다) */
  aspect-ratio: 3 / 4;
  cursor: pointer;
  box-shadow: 0 0 40px rgba(201, 168, 106, .3);
}
/* 마지막 대화에서만 들을 수 있는 한마디 — 설명보다 또렷하게 */
.rv-desc.strong {
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 10px;
}
/* 영상이 멈춘 화면을 지그시 눌러 그 위 카드 결과가 또렷이 읽히게 한다 */
.rv-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .72) 100%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
#restore-video-layer.reveal-shown .rv-scrim { opacity: 1; }

/* 결과 카드 — 영상이 멈춘 배경 위로 그대로 떠오른다 (화면 전환 없음) */
.rv-reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.rv-reveal.shown { opacity: 1; transform: none; }
.rv-new {
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--blood);
  color: #f5ece6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 16px;
  box-shadow: 0 0 20px rgba(122, 40, 48, .5);
}
.rv-card {
  width: 62%;
  max-width: 230px;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10, 10, 15, .8);
  border: 1px solid #4a3a2a;
  box-shadow: 0 0 40px rgba(201, 168, 106, .35), 0 18px 40px rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.rv-card.dup { box-shadow: 0 18px 40px rgba(0, 0, 0, .6); border-color: #3a3a44; }
.rv-card img { width: 100%; height: 100%; object-fit: cover; }
.rv-card-mark { font-size: 32px; color: var(--ink-faint); }
.rv-kicker {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ink-faint);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
  margin-bottom: 6px;
}
.rv-name {
  font-size: 20px;
  letter-spacing: .1em;
  color: #f0ebe0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
  margin-bottom: 10px;
}
.rv-desc {
  font-size: 13px;
  line-height: 1.8;
  color: #cfc9bc;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .95);
  max-width: 320px;
  margin-bottom: 22px;
}
.rv-reveal .btn { width: 200px; }
body.level-low .rv-reveal { transition-duration: .2s; }

/* 광고 자리표시 화면 — 출시 버전에서 실제 광고 SDK로 교체 */
#ad-layer {
  position: fixed; inset: 0;
  background: #000;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 광고를 불러오는 동안 덮는 화면.
   이게 화면을 덮지 않으면 뒤의 '단서 찾기' 버튼이 그대로 눌려 광고가 두 번 뜬다. */
#ad-loading {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .82);
  z-index: 310;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 뒤쪽 요소가 눌리지 않도록 터치를 여기서 받는다 */
  touch-action: none;
}
#ad-loading .ad-body { animation: ad-loading-pulse 1.6s ease-in-out infinite; }
@keyframes ad-loading-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
body.level-low #ad-loading .ad-body { animation: none; opacity: .9; }
.ad-box { text-align: center; padding: 24px; max-width: 420px; width: 100%; }
.ad-tag {
  display: inline-block;
  border: 1px solid var(--ink-faint);
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: .25em;
  padding: 2px 10px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.ad-body {
  border: 1px dashed #2a2a38;
  border-radius: var(--radius);
  padding: 70px 20px;
  color: var(--ink);
  font-size: 15px;
  line-height: 2;
}
.ad-body .dim { font-size: 12px; color: var(--ink-faint); }
.ad-count { margin: 16px 0 10px; font-size: 14px; color: var(--ink); letter-spacing: .1em; }
.ad-close {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* 해소 카드가 찾아지지 않아 잠긴 선택지 */
.choice-btn.locked {
  color: #5d574d;
  border-style: dashed;
  border-color: #26263244;
  cursor: default;
}
.choice-btn.locked:hover { border-color: #26263244; background: rgba(12,12,18,.88); }
.choice-lock {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--blood-bright, #7a3a3a);
  opacity: .75;
}

/* ── 조작 아이콘 버튼 (닫기 · 일시정지 · 뒤로) ───────────────── */
.icon-ctrl {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-faint);
  border: 1px solid transparent;
  transition: color .3s, border-color .3s, background .3s;
  flex-shrink: 0;
}
.icon-ctrl:hover {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255,255,255,.02);
}
.icon-ctrl svg { width: 18px; height: 18px; }
.done-cover { margin: 10px auto 0; display: flex; }
/* 상단 바 안에서는 바의 기본 버튼 여백을 무시한다 */
.reader-top .icon-ctrl,
.dialogue-top .icon-ctrl,
.cv-top .icon-ctrl { padding: 0; font-size: 0; }
.rt-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
#btn-bgm { color: #f5f2ea; }   /* 재생 중 — 흰색 */
#btn-bgm.muted { color: var(--ink-faint); }

/* ── 좋아요 · 공유 아이콘 버튼 ──────────────────────────────── */
.action-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 6px;
}
.icon-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink-dim);
  font-size: 12.5px;
  letter-spacing: .08em;
  transition: color .3s, border-color .3s;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.icon-btn.like.on { color: var(--blood-bright); border-color: #3a1a1f; }
.icon-btn.like.on svg path { fill: var(--blood-bright); stroke: var(--blood-bright); }
.like-count { color: #8a4a52; letter-spacing: .05em; }

/* ── 귀록 보기 전환 (목록 ↔ 카드) ───────────────────────────── */
/* ── 포스터형 카드 ──────────────────────────────────────────── */
.poster-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, #10101a 0%, #07070c 70%),
    #07070c;
  box-shadow: 0 12px 40px rgba(0,0,0,.65);
  cursor: pointer;
}
.poster-card .pc-title {
  position: absolute;
  top: 18px; left: 0; right: 0;
  z-index: 3;
  text-align: center;
  font-size: 17px;
  letter-spacing: .45em;
  text-indent: .45em;
  color: rgba(213,207,194,.9);
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.poster-card .pc-full { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-card .pc-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* 귀신 모습 — 다른 단계 카드처럼 테두리 안을 가득 채운다 */
.poster-card .pc-ghost {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  height: 100%;
  z-index: 2;
}
.poster-card .pc-dim { opacity: .5; filter: blur(2px); }
.poster-card .pc-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a3a44;
  font-size: 12px;
  letter-spacing: .3em;
}
.poster-card .pc-unknown { font-size: 52px; color: #16161f; text-shadow: 0 0 20px rgba(60,60,90,.3); }
.poster-card .pc-stage {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  z-index: 3;
  text-align: center;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ink-dim);
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.poster-card .pc-stage.s1 { color: #4d4a45; }
.poster-card .pc-stage.s2 { color: #7d7870; }
.poster-card .pc-stage.s3 { color: #5d7d96; }
.poster-card .pc-stage.s4 { color: #b0846a; }
.poster-card .pc-stage.s5 { color: #c9a86a; }
/* 1단계(원한 미해소)도 다른 단계와 같은 실선 테두리를 쓴다 */
.poster-card.stage-5 { border-color: #3a3224; box-shadow: 0 12px 44px rgba(201,168,106,.16); }

/* ── 카드 상태별 시각 규칙 (empty → finalPassage) ─────────────
   낡은 종이 입자 + 비네트는 모든 카드에, 상태별 처리는 아래에.  */
.poster-card::after,
.gwirok-card .g-img::after,
.gwirok-detail-img.state-empty::after,
.gwirok-detail-img.state-ghostOnly::after,
.gwirok-detail-img.state-ghostWithBackground::after,
.gwirok-detail-img.state-specialIllustration::after,
.gwirok-detail-img.state-finalPassage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.35) 100%),
    var(--grain);
  background-size: auto, 140px 140px;
  opacity: .5;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 4;
}
.gwirok-card .g-img { position: relative; overflow: hidden; border-radius: 8px; }
.gwirok-detail-img { position: relative; overflow: hidden; }

/* empty — 먹이 번진 흔적만 남은 닫힌 기록 */
.state-empty .empty-card,
.state-empty .pc-center {
  background:
    radial-gradient(ellipse 45% 30% at 48% 44%, rgba(30,30,42,.8) 0%, transparent 70%),
    radial-gradient(ellipse 25% 18% at 60% 60%, rgba(24,24,34,.7) 0%, transparent 70%),
    #050507;
}

/* ghostOnly(희미한 해소) — 단계마다 전용 일러스트가 생기면서
   흑백 필터와 안쪽 네모 틀은 없앴다. 그림이 이미 그 단계의 분위기를 담고 있어
   덧씌우면 색이 죽고 사각 테두리가 겹쳐 보인다. */

/* ghostWithBackground — 존재와 장소가 함께 남은 완성 카드 */
.state-ghostWithBackground .g-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,8,.25) 0%, transparent 35%);
  pointer-events: none;
}
.g-scene { position: relative; }

/* specialIllustration — 서사적 특별 일러스트: 이중 먹선 틀 */
.poster-card.state-specialIllustration,
.gwirok-card.state-specialIllustration {
  border-color: #322a3a;
  box-shadow: 0 12px 40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(176,132,106,.14);
}

/* finalPassage — 원한이 걷힌 기록: 따뜻한 빛, 옅어진 입자 */
.state-finalPassage::after { opacity: .3; }
.poster-card.state-finalPassage,
.gwirok-card.state-finalPassage {
  border-color: #3a3224;
  box-shadow: 0 12px 44px rgba(201,168,106,.16), inset 0 0 0 1px rgba(201,168,106,.16);
}

/* 카드 캐러셀 (귀록 목록의 카드 보기) */
.card-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 4px -20px 12px;
  padding: 12px 42px 26px;
  scrollbar-width: none;
}
.card-carousel::-webkit-scrollbar { display: none; }
.card-carousel .poster-card {
  flex: 0 0 76%;
  max-width: 300px;
  aspect-ratio: 3 / 4.3;
  scroll-snap-align: center;
}

/* 카드 뷰어 (전체 화면) */
.card-viewer {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 60;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, #0d0d16 0%, var(--bg) 60%),
    var(--bg);
  display: flex;
  flex-direction: column;
  padding: 14px 20px 26px;
}
.cv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cv-top button { color: var(--ink-faint); font-size: 12px; letter-spacing: .1em; padding: 4px 8px; }
.cv-top button:hover { color: var(--ink); }
.cv-top .cv-count { font-size: 11px; color: var(--ink-faint); letter-spacing: .15em; }
.cv-stage-area {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  min-height: 0;
}
.card-viewer .poster-card {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4.4;
  max-height: 100%;
  animation: screen-in .7s ease both;
}
.cv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 34px; height: 56px;
  color: var(--ink-faint);
  font-size: 26px;
  transition: color .3s;
}
.cv-nav:hover { color: var(--ink); }
.cv-nav.prev { left: -2px; }
.cv-nav.next { right: -2px; }
.cv-info { text-align: center; padding-top: 6px; }

/* ── 원한 해소 단계별 귀록 카드 ─────────────────────────────── */
.empty-card {
  width: 100%;
  height: 100%;
  min-height: 110px;
  border: 1px dashed #26262f;
  border-radius: 8px;
  background: #050507;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a3a44;
  font-size: 11px;
  letter-spacing: .3em;
}
.g-scene {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.g-scene img { height: 88%; }
.scene-img { height: 100%; border-radius: 8px; }
/* 목록 카드도 상세보기와 같은 실선 — 흐린 정도(opacity)로만 미해소를 나타낸다 */
.gwirok-card.stage-1 { opacity: .85; }
.gwirok-card.stage-5 { border-color: #3a3224; box-shadow: 0 0 18px rgba(201,168,106,.1); }
.gwirok-detail-img .g-scene,
.gwirok-detail-img .empty-card,
.dr-card .g-scene,
.dr-card .empty-card { width: 172px; height: 100%; }
.gwirok-detail-img.stage-2 img { height: 100%; }
.stage-badge { font-size: 10.5px; letter-spacing: .22em; margin-top: 7px; }
.stage-badge.s1 { color: #4d4a45; }
.stage-badge.s2 { color: #7d7870; }
.stage-badge.s3 { color: #5d7d96; }
.stage-badge.s4 { color: #b0846a; }
.stage-badge.s5 { color: #c9a86a; }
.dr-stage.s1 { color: #4d4a45; }
.dr-stage.s2 { color: #7d7870; }
.dr-stage.s3 { color: #5d7d96; }
.dr-stage.s4 { color: #b0846a; }
.dr-stage.s5 { color: #c9a86a; }

/* 귀록 상세 — 대화 결과 상자 */
.resolution-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 14px 0;
  background: var(--surface);
  text-align: center;
}
.resolution-box .rb-name { font-size: 12px; letter-spacing: .35em; margin-bottom: 8px; }
.resolution-box .rb-text { font-size: 12.5px; color: var(--ink-dim); line-height: 1.9; }
.resolution-box.s1 .rb-name { color: #4d4a45; }
.resolution-box.s2 .rb-name { color: #7d7870; }
.resolution-box.s3 .rb-name { color: #5d7d96; }
.resolution-box.s4 .rb-name { color: #b0846a; }
.resolution-box.s5 .rb-name { color: #c9a86a; }
.resolution-box.s5 { border-color: #3a3224; }

@media (max-width: 400px) {
  .reader-body { font-size: 16px; }
  .reader-stage { padding: 42px 20px 36px; }
  .reader.flow-scroll .scroll-art { margin: -42px -20px 32px; }
}

/* ── 귀신과의 대화 ─────────────────────────────────────────────
   원한이 풀린 존재와 마주 앉는 채팅 화면. 배경은 그 귀신의 해소 단계 그림이다.
   아직 말을 주고받을 수는 없다 — 입력줄은 닫힌 채 자리만 지킨다. */
.ghost-chat {
  position: fixed;
  inset: 0;
  left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: #050508;
}
.gc-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  filter: blur(2px) brightness(.5) saturate(.85);
  transform: scale(1.05);   /* 흐림 처리로 생기는 가장자리 번짐을 화면 밖으로 밀어낸다 */
}
.gc-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5,5,8,.85), rgba(5,5,8,.3) 30%, rgba(5,5,8,.45) 70%, rgba(5,5,8,.92));
}
.gc-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gc-top .icon-ctrl {
  background: rgba(5,5,8,.5);
  border-color: var(--line);
  color: var(--ink);
}
.gc-name {
  flex: 1;
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-stage {
  font-size: 11px;
  letter-spacing: .12em;
  color: #c9a86a;
  border: 1px solid rgba(201,168,106,.4);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
}
.gc-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: 20px 18px 16px;
}
.gc-bubble {
  align-self: flex-start;
  max-width: 80%;
  background: rgba(12,12,18,.78);
  border: 1px solid var(--line);
  border-radius: 4px 14px 14px 14px;
  padding: 12px 15px;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--ink);
  backdrop-filter: blur(6px);
}
.gc-notice {
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: .08em;
  color: var(--ink-dim);
  padding: 6px 0 2px;
}
.gc-input {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(6,6,10,.9);
  backdrop-filter: blur(8px);
}
.gc-input input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 11px 16px;
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: .04em;
  cursor: default;
}
.gc-send {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .55;   /* 아직 열리지 않은 기능 — 눌리긴 하지만 잠긴 인상을 준다 */
}
.gc-send svg { width: 18px; height: 18px; }

/* ── 넓은 화면(태블릿·PC) 대응 ──────────────────────────────────
   앱 본체는 #frame 안에서 최대 480px 폭으로 표시된다.
   화면을 덮는 레이어들도 같은 폭 안에 머물러야 영상·광고·시트가 앱 밖으로 넘치지 않는다.
   태블릿에서 단서 찾기 영상과 대화 영상이 화면 전체로 퍼지던 문제를 잡는다.

   주의 1: 이 규칙은 파일 맨 끝에 둔다. 각 레이어가 inset:0 으로 좌우를 0으로 잡는데,
           그 뒤에 와야 여기서 정한 폭이 이긴다.
   주의 2: 가운데 정렬에 transform 을 쓰지 않는다 — 일부 레이어(시트 올라오기 등)가
           transform 애니메이션을 쓰고 있어 서로 덮어쓴다. left/right:0 + margin:auto 로 맞춘다. */
#intro-layer,
.reader-entry,
#csheet,
#stasks,
#flicker,
#vignette,
#modal-layer,
#obsheet,
#sharenudge,
.saja-live,
#restore-video-layer,
#dialogue-video-layer,
#ad-layer,
#ad-loading {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 480px;
}

/* ══ 기존 사자 진입 인트로 ══
   앱을 껐다 다시 열 때 한 번 지나가는 텍스트 연출. 전체 약 5.4초.
     0.35s~1.2s  글줄이 아래에서 떠오르며 흐림이 걷힌다 (줄마다 0.15s 간격)
     1.2s~3.4s   문장이 머문다. 둘째 줄만 아주 느리게 흐른다 (읽는 시간)
     3.4s~4.3s   행 사이가 벌어지며 먹물처럼 번져 사라진다
     4.1s~5.0s   「귀로」가 떠올라 그대로 머문다
     4.9s~5.4s   '화면을 누르면 넘어갑니다' 안내가 뜬다
   이후 누를 때까지 기다린다 (자동으로 넘어가지 않는다).
   동작 줄이기 설정에서는 아래쪽 축약형(약 0.6초)이 대신 쓰인다.
   멈춰 있던 기록이 다시 움직이기 시작하는 느낌 — 텍스트가 중심이고,
   배경은 먹빛과 아주 옅은 한지 결만 둔다. 붉은 번쩍임·글리치는 쓰지 않는다.
   움직임은 transform·opacity·filter 로만 만들어 저사양 기기에서도 끊기지 않게 한다. */
#intro-layer.return-intro {
  background: var(--bg);       /* 완전한 검정이 아닌 푸른 기가 도는 먹빛 */
  overflow: hidden;
}
/* 먹빛 바탕 — 가운데가 아주 조금 밝아 글이 떠오를 자리를 만든다 */
.ri-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 50%, #0d0d15 0%, var(--bg) 70%),
    var(--bg);
}
/* 한지 섬유 결 — 기존 --grain 토큰을 그대로 쓴다. 아주 옅게. */
.ri-grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 글줄 — Pretext가 계산한 줄을 한 줄씩 따로 그린다 */
.ri-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 24px;             /* 좌우 최소 여백 */
  text-align: center;
}
.ri-line {
  display: block;
  font-size: var(--ri-fs);
  line-height: var(--ri-lh);
  letter-spacing: var(--ri-ls);
  color: #cfc7b6;              /* 탁한 미색 */
  white-space: nowrap;         /* 줄바꿈은 Pretext가 정한다 — 브라우저가 다시 나누지 않게 */
  text-shadow: 0 1px 18px rgba(0, 0, 0, .9);
  /* 시작: 어둠에 잠긴 듯 흐리고 아래에 가라앉아 있다 */
  opacity: 0;
  transform: translateY(9px);
  filter: blur(5px);
}
/* 계산이 실패했을 때만 쓰는 대체 — 브라우저 줄바꿈에 맡긴다 */
.ri-line.ri-fallback { white-space: normal; max-width: 340px; }

/* 떠오름 — 둘째 줄부터 아주 조금 늦게 시작해 관성이 생긴다 */
.return-intro.ri-playing .ri-line {
  transition:
    opacity .85s ease-out,
    transform .95s cubic-bezier(.22, .68, .28, 1),
    filter .85s ease-out;
  transition-delay: calc(.35s + var(--ri-i) * .15s);
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* 첫 줄은 무겁게 머무르고, 그 아래 줄만 아주 미세하게 흐른다 */
.return-intro.ri-playing .ri-line:not(:first-child) {
  animation: ri-drift 2.1s ease-in-out 1.3s both;
}
@keyframes ri-drift {
  0%   { margin-left: 0; }
  60%  { margin-left: 3px; }
  100% { margin-left: 2px; }
}

/* 먹물처럼 번지며 사라짐 — 행 사이가 아주 조금 벌어진다 */
.return-intro.ri-playing .ri-text {
  animation: ri-disperse .9s ease-in 3.4s both;
}
@keyframes ri-disperse {
  from { opacity: 1; letter-spacing: var(--ri-ls); gap: 0; filter: blur(0); }
  to   { opacity: 0; gap: 5px; filter: blur(6px); }
}

/* 귀로 로고 — 글이 흩어진 뒤 짧게 떠올랐다 사라진다. 크게 확대되지 않는다. */
.ri-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  letter-spacing: .1em;
  color: #d5cdbb;
  text-shadow: 0 0 26px rgba(197, 191, 178, .18);
  opacity: 0;
  pointer-events: none;
}
/* 떠오른 뒤 그대로 남는다 — 자동으로 넘어가지 않고 누를 때까지 기다리므로,
   화면이 빈 채로 남지 않도록 로고가 대기 상태를 보여준다. */
.return-intro.ri-playing .ri-logo {
  animation: ri-logo .9s ease-out 4.1s both;
}
@keyframes ri-logo {
  0%   { opacity: 0; transform: scale(.985); }
  100% { opacity: .95; transform: scale(1); }
}

/* 안내 문구 — 연출이 끝나고 로고가 자리잡은 뒤에 조용히 떠오른다.
   기존 스플래시 안내와 같은 모양(위치·크기·자간·숨쉬는 밝기)으로 맞춘다. */
.ri-skip {
  position: absolute;
  bottom: 26px; left: 0; right: 0;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--ink-faint);
  opacity: 0;
  pointer-events: none;
}
.return-intro.ri-playing .ri-skip {
  animation: ri-skip-in .5s ease-out 4.9s both, breathe-text 3s ease-in-out 5.4s infinite;
}
@keyframes ri-skip-in { from { opacity: 0; } to { opacity: .55; } }

/* 화면을 벗어날 때 */
.return-intro.ri-leaving { transition: opacity .26s ease; opacity: 0; }

/* ── 동작 줄이기 — 이동·흔들림·블러를 없애고 짧게 나타났다 사라진다 ── */
.return-intro.ri-reduced .ri-line {
  transform: none;
  filter: none;
  transition: opacity .22s ease;
  transition-delay: 0s;
  animation: none;
}
.return-intro.ri-reduced.ri-playing .ri-line { opacity: 1; }
.return-intro.ri-reduced.ri-playing .ri-text {
  animation: ri-fade-out .2s ease-in .34s both;
}
@keyframes ri-fade-out { from { opacity: 1; } to { opacity: 0; } }
.return-intro.ri-reduced.ri-playing .ri-logo {
  animation: ri-logo-reduced .26s ease-out .36s both;
}
@keyframes ri-logo-reduced {
  from { opacity: 0; } to { opacity: .95; }
}
.return-intro.ri-reduced .ri-grain { display: none; }
/* 축약형은 전체가 짧으므로 안내도 일찍, 깜빡임 없이 */
.return-intro.ri-reduced.ri-playing .ri-skip {
  animation: ri-skip-in .3s ease-out .6s both;
}