/* 로슈베른의 24주 — 로판 무드: 진한 바탕 + 금색 포인트 + 세리프 제목. 가독성 우선. */

:root {
  --bg-0: #14101a;
  --bg-1: #1c1624;
  --bg-2: #241c2e;
  --panel: #211a29;
  --border: #3a2f46;
  --gold: #d8b25c;
  --gold-soft: #b99b52;
  --text: #ece6e0;
  --text-dim: #a99cb3;
  --text-faint: #7c6f8a;
  --up: #7fd88f;
  --down: #e08a8a;
  --danger: #d8546a;
  --serif: Georgia, 'Times New Roman', 'Nanum Myeongjo', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(ellipse at top, rgba(216,178,92,0.06), transparent 60%),
    var(--bg-0);
}

button { font-family: inherit; }

h1, h2, h3 { font-family: var(--serif); margin: 0 0 0.5em; }

.hidden { display: none !important; }

/* 화면 전환 크로스페이드: 메인/이벤트/활동컷/리포트/엔딩이 각자 root.innerHTML을 새로 그릴 때마다
   최상위 래퍼에 이 애니메이션이 자동으로 걸려 배경·인물이 순간이동하는 대신 부드럽게 겹쳐 들어온다. */
.screen, .main-scene, .activity-cut, .report-scene {
  animation: sceneFadeIn 0.3s ease;
}

@keyframes sceneFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------------------------------------------------------------- */
/* 상단 고정 바: 파멸 카운트다운 (상시 노출) */
/* ---------------------------------------------------------------- */
.doom-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1.25rem;
  background: linear-gradient(90deg, #241a12 0%, #2e2018 100%);
  border-bottom: 1px solid var(--gold-soft);
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.topbar-week {
  font-family: var(--serif);
  color: var(--gold);
  font-weight: bold;
  white-space: nowrap;
  border-right: 1px solid rgba(216,178,92,0.3);
  padding-right: 1rem;
}

.topbar-doom {
  color: #f0d9a0;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.topbar-doom.doom-clear {
  color: var(--text-dim);
  font-style: italic;
}

/* ---------------------------------------------------------------- */
/* 공용 */
/* ---------------------------------------------------------------- */
.screen {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.btn {
  font-family: var(--serif);
  font-size: 1.02rem;
  padding: 0.65rem 1.6rem;
  border-radius: 4px;
  border: 1px solid var(--gold-soft);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.btn:hover:not(:disabled) {
  background: #2c2236;
  box-shadow: 0 0 12px rgba(216,178,92,0.25);
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, #7a5a2c, #5c4320);
  border-color: var(--gold);
  color: #fff4de;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #8c6733, #6b4e26);
}

.btn-secondary { background: var(--bg-2); }

.panel-heading {
  font-size: 1rem;
  color: var(--gold);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
  margin-top: 1.4rem;
}

/* ---------------------------------------------------------------- */
/* 타이틀 — 키비주얼(우측 세라) + 좌측 1/3 로고 컬럼. 본편(메인 화면)과 같은 급의 비주얼. */
/* ---------------------------------------------------------------- */
.title-screen {
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 100vh;
}

/* 배경 레이어(키비주얼 또는 세라 포트레이트+그라데이션 폴백) — 이 레이어만 천천히 확대된다. */
.title-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: center;
  animation: titleKenBurns 20s ease-in-out infinite alternate;
}

.title-bg-layer.title-bg-fallback {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(216,178,92,0.10), transparent 55%),
    linear-gradient(180deg, #1a1420 0%, #120e18 100%);
}

@keyframes titleKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .title-bg-layer { animation: none; }
}

/* 타이틀 포트레이트(키비주얼 없을 때 폴백): 에셋이 있을 때만 렌더링됨(render.js에서 조건부 삽입). */
.title-portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 92vh;
  max-height: 900px;
  width: auto;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to left, black 30%, transparent 92%);
  mask-image: linear-gradient(to left, black 30%, transparent 92%);
  pointer-events: none;
}

/* 장미 꽃잎 파티클 (CSS만으로, 부담 없는 transform 애니메이션) */
.title-petals {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .title-petals { display: none; }
}

.petal {
  position: absolute;
  top: -6%;
  width: 11px;
  height: 9px;
  background: linear-gradient(135deg, #c86a7a, #7a2c3a);
  border-radius: 0 100% 0 100%;
  opacity: 0;
  animation-name: petalFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes petalFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.8; }
  50% { transform: translate(22px, 55vh) rotate(190deg); }
  92% { opacity: 0.65; }
  100% { transform: translate(-14px, 112vh) rotate(360deg); opacity: 0; }
}

/* 좌측 1/3 로고 컬럼 */
.title-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 42%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 3rem;
  text-align: left;
}

/* 어떤 배경이든 로고 텍스트가 읽히도록 컬럼 뒤에만 깔리는 은은한 방사형 스크림 */
.title-scrim {
  position: absolute;
  inset: -20% -80% -20% -40%;
  z-index: 0;
  /* 경계가 세로줄로 보이지 않도록 소멸 구간을 길게 편다 */
  background: radial-gradient(ellipse at 30% 50%, rgba(10,7,14,0.72) 0%, rgba(10,7,14,0.42) 38%, rgba(10,7,14,0.18) 60%, transparent 82%);
  pointer-events: none;
}

.title-logo, .title-buttons, .title-notice, .title-credit {
  position: relative;
  z-index: 1;
}

.title-deco-line {
  width: 64%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  margin: 0.7rem 0;
}

.title-heading {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  line-height: 1.18;
  letter-spacing: 0.02em;
  margin: 0;
  background: linear-gradient(180deg, #f6e3ac 0%, var(--gold) 55%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gold);
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 18px rgba(216,178,92,0.3));
}

.title-sub {
  color: var(--text-dim);
  max-width: 22rem;
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0.5rem 0 0;
}

.title-notice {
  color: var(--down);
  background: rgba(224,138,138,0.1);
  border: 1px solid rgba(224,138,138,0.35);
  padding: 0.65rem 0.9rem;
  border-radius: 4px;
  max-width: 22rem;
  font-size: 0.85rem;
  margin-top: 1.2rem;
}

.title-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 2.1rem;
}

.btn-title-primary, .btn-title-secondary {
  width: 14rem;
  text-align: center;
  padding: 0.85rem 1.4rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--gold);
  background: rgba(24, 17, 12, 0.55);
  backdrop-filter: blur(2px);
  transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.btn-title-primary:hover, .btn-title-secondary:hover {
  box-shadow: 0 0 22px rgba(216,178,92,0.45);
  background: rgba(46, 32, 18, 0.7);
  transform: translateY(-1px);
}

.btn-title-secondary { border-color: var(--gold-soft); background: rgba(20, 14, 10, 0.4); }

.title-credit {
  margin-top: 2.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* F(NG+): 회차 배지 + 엔딩 갤러리 버튼 — clearCount>=1일 때만 */
.title-ng-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.title-ng-badge {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  background: rgba(20, 14, 10, 0.4);
}

.title-gallery-btn { width: auto; padding: 0.5rem 1rem; font-size: 0.82rem; }

/* F(NG+): 엔딩 갤러리 화면 */
.ending-gallery-screen {
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.4rem 1.5rem;
  background: linear-gradient(180deg, #1c0d12 0%, #120810 100%);
}

.ending-gallery-heading {
  color: var(--gold);
  font-size: 1.8rem;
  text-shadow: 0 0 20px rgba(216,178,92,0.3);
  margin-bottom: 1.6rem;
}

.ending-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 52rem;
}

.ending-gallery-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  text-align: center;
}

.ending-gallery-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(160deg, #201a26 0%, #382c42 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

.ending-gallery-card.locked .ending-gallery-thumb { border-color: rgba(255,255,255,0.15); }

.ending-gallery-silhouette {
  background: repeating-linear-gradient(135deg, #1a1620, #1a1620 10px, #221c28 10px, #221c28 20px);
}

.ending-gallery-name { font-size: 0.8rem; color: #f0d9a0; }
.ending-gallery-unknown { color: rgba(255,255,255,0.4); font-family: var(--serif); letter-spacing: 0.1em; }

.ending-gallery-back { margin-top: 2rem; }

@media (max-width: 900px) {
  .ending-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- */
/* 스탯 플로팅 텍스트 (메인 화면 스탯/호감도 변화 연출 — 여러 곳에서 재사용) */
/* ---------------------------------------------------------------- */
.stat-float {
  position: absolute;
  right: 0;
  top: -0.2rem;
  font-size: 0.82rem;
  font-weight: bold;
  animation: floatUp 1.1s ease-out forwards;
  pointer-events: none;
}

.stat-float-up { color: var(--up); }
.stat-float-down { color: var(--down); }

@keyframes floatUp {
  0% { opacity: 0; transform: translateY(4px); }
  20% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* ---------------------------------------------------------------- */
/* 메인 화면 — 폼이 아니라 "장면": 배경(공작저) + 세라피나 상시 스탠딩 +
   좌상단 콤팩트 스탯 / 우상단 인물 썸네일+파멸 리본 / 하단 커맨드 카드줄.
   1280x800 기준 스크롤 없이 한 화면에 들어가도록 100vh 고정 + vh 단위로 크기를 잡는다.
   목업(assets/concept/main-screen-mockup.png)의 구도만 따르고 장식은 담백하게(반투명 크림 패널 + 가는 금색 보더). */
/* ---------------------------------------------------------------- */
.main-scene {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: cover, cover;
  background-position: center, center;
  padding: 1.1rem 1.3rem;
}

.scene-standing {
  /* 스탠딩은 화면 바닥에 붙이고 하단 UI가 그 위를 덮는다(VN/PM 오버레이 문법).
     하단 바 상단선에 발끝을 올리면 배경 방바닥과 어긋나 방 한가운데 공중부양으로 보인다. */
  position: absolute;
  bottom: 0;
  left: 52%;
  transform: translateX(-50%);
  height: 85vh;
  z-index: 0;
  /* 주인공 클릭 상호작용(PM 문법): 스탠딩 위에서만 클릭을 받는다 — 배경/다른 UI는 그대로 통과. */
  pointer-events: auto;
  cursor: pointer;
}

.standing-img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,0.45));
  animation: portraitFadeIn 0.4s ease-out;
  transform-origin: bottom center;
}

/* 클릭 반응 모션: 살짝 기울였다 돌아오는 0.3s 통통 튐. 클릭마다 클래스를 새로 붙였다 떼서
   같은 클래스가 연속으로 와도(에너메이션 이미 끝난 상태) 다시 재생되게 한다(main.js가 처리). */
.standing-img-react {
  animation: standingReact 0.3s ease-out;
}

@keyframes standingReact {
  0% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-2.5deg) scale(1.03); }
  60% { transform: rotate(1.5deg) scale(1.01); }
  100% { transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .standing-img-react { animation: none; }
}

.standing-img-fallback { height: 68vh; object-position: bottom center; }

.standing-silhouette {
  width: 220px;
  height: 62vh;
  border-radius: 130px 130px 0 0;
  background: linear-gradient(180deg, rgba(216,178,92,0.30), rgba(216,178,92,0.08));
  border: 1px solid rgba(216,178,92,0.25);
}

/* 세라 말풍선: 스탠딩(left:52%, bottom:0, height:85vh) 왼쪽에 뜬다 — 우상단 파멸 리본·계략
   게이지·인물 썸네일과 안 겹치게 스탠딩 반대편에 배치하고, 꼬리는 스탠딩 쪽(오른쪽)을 가리킨다.
   6초 생애(페이드인→유지→페이드아웃) 후 그대로 숨어 있는다(다음 전체 렌더 전까진 재생 안 됨 —
   클릭 반응 말풍선은 main.js가 직접 재마운트해 애니메이션을 다시 튼다). */
.sera-bubble {
  position: absolute;
  top: 19vh;
  left: 30%;
  z-index: 2;
  max-width: 15rem;
  display: flex;
  align-items: center;
  opacity: 0;
  animation: seraBubbleLife 6s ease-in-out forwards;
}

@keyframes seraBubbleLife {
  0% { opacity: 0; transform: translateY(6px) scale(0.92); }
  6% { opacity: 1; transform: translateY(0) scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sera-bubble { animation: seraBubbleLifeReduced 6s linear forwards; }
}

@keyframes seraBubbleLifeReduced {
  0%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

.sera-bubble-text {
  background: rgba(20, 16, 26, 0.88);
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* 꼬리는 텍스트 박스 오른쪽에 붙어 오른쪽(스탠딩 쪽)을 가리킨다. */
.sera-bubble-tail {
  width: 0;
  height: 0;
  flex-shrink: 0;
  margin-left: -1px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid rgba(20, 16, 26, 0.88);
}

/* 상단 열: 좌측 스탯 패널 / 우측 인물 썸네일+파멸 리본 */
/* 화면 맨 위 가장자리에 고정한다. flow에 두면 높이 0인 형제 래퍼들과 space-between이
   맞물려 세로 중앙으로 밀려난다 (실측 y=323). 정보 패널은 항상 상단 — PM 계열 공통 문법. */
.scene-top {
  position: absolute;
  top: 1.1rem;
  left: 1.3rem;
  right: 1.3rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

/* 좌상단 압축 스탯 카드: 아이콘+숫자 2열 그리드(라벨·바 없음, 상세는 클릭 시 모달로).
   기존 8줄 세로 패널보다 훨씬 작아 배경/캐릭터를 덜 가린다. */
.stat-mini-panel {
  background: rgba(250, 244, 230, 0.90);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  color: #3a2f22;
  padding: 0.5rem 0.7rem;
  width: 12.5rem;
  cursor: pointer;
}

.stat-mini-panel:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.32); }

.stat-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem 0.6rem;
}

.stat-mini-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.stat-mini-icon { font-size: 0.85rem; }
.stat-mini-value { font-variant-numeric: tabular-nums; color: #3a2f22; font-weight: bold; }

/* 스탯 상세 모달: 압축 카드를 클릭하면 뜬다. .stat-compact-row 등은 그대로 재사용(아이콘+
   라벨+바+숫자 상세 레이아웃) — 모달 안에서만 쓰인다. */
.stat-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(8, 6, 10, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.stat-modal {
  width: 100%;
  max-width: 22rem;
  background: rgba(250, 244, 230, 0.97);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  color: #3a2f22;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.stat-modal-heading {
  font-family: var(--serif);
  color: #5c3d1a;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}

.stat-modal-close {
  display: block;
  margin: 0.9rem auto 0;
  cursor: pointer;
}

/* 컨디션 배지: 스탯 패널 맨 위, 스트레스 구간(또는 앓아눕기 예약)을 한눈에. */
.condition-badge {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}

.condition-badge-great { color: #7a5a10; background: rgba(216,178,92,0.35); border: 1px solid var(--gold-soft); }
.condition-badge-ok { color: #4a4038; background: rgba(58,47,34,0.1); border: 1px solid rgba(58,47,34,0.25); }
.condition-badge-tired { color: #8a4a10; background: rgba(216,120,50,0.22); border: 1px solid rgba(216,120,50,0.45); }
.condition-badge-critical {
  color: #fff;
  background: var(--danger);
  border: 1px solid rgba(216,84,106,0.7);
  animation: conditionCriticalPulse 1.6s ease-in-out infinite;
}
.condition-badge-sick { color: #fff; background: #6b6b78; border: 1px solid rgba(255,255,255,0.3); }

@keyframes conditionCriticalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,84,106,0.5); }
  50% { box-shadow: 0 0 10px 3px rgba(216,84,106,0.65); }
}

@media (prefers-reduced-motion: reduce) {
  .condition-badge-critical { animation: none; box-shadow: 0 0 8px 2px rgba(216,84,106,0.5); }
}

/* 캐릭터 옆 플로팅 스탯 배지: 압축 카드 대신 여기서 변화를 확실히 보여준다("교양 +7"). */
.char-float-layer {
  position: absolute;
  left: calc(52% + 8vh);
  bottom: 40vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  pointer-events: none;
}

.char-float-badge {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: bold;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(20, 16, 26, 0.85);
  border: 1px solid var(--gold-soft);
  animation: floatUp 1.8s ease-out forwards;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .char-float-badge { animation-duration: 0.4s; }
}

.char-float-badge.stat-float-up { color: #7ad19a; border-color: rgba(122,209,154,0.6); }
.char-float-badge.stat-float-down { color: #e08a8a; border-color: rgba(224,138,138,0.6); }

/* 2차: 장착 드레스 배지 — 스탯 패널 맨 위(컨디션 배지 다음 줄). game.equippedDress 있을 때만. */
.stat-compact-dress {
  font-size: 0.72rem;
  color: #6b4a1e;
  background: rgba(216,178,92,0.22);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.4rem;
  display: inline-block;
}

.stat-compact-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.3rem 3.3rem 1fr 2.1rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
}

.stat-compact-icon { font-size: 0.85rem; text-align: center; }

.stat-compact-label { font-size: 0.74rem; color: #5c4c38; white-space: nowrap; }

.stat-compact-bar {
  height: 7px;
  background: rgba(58,47,34,0.15);
  border-radius: 4px;
  overflow: hidden;
}

.stat-compact-bar-none { visibility: hidden; }

.stat-compact-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  transition: width 0.5s ease;
}

.stat-compact-row[data-stat="stress"] .stat-compact-fill { background: linear-gradient(90deg, #a25a5a, var(--danger)); }
.stat-compact-row[data-stat="divergence"] .stat-compact-fill { background: linear-gradient(90deg, #5a6fa2, #7f9fd8); }

.stat-compact-value {
  text-align: right;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: #3a2f22;
}

.scene-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.char-thumb-row {
  display: flex;
  gap: 0.45rem;
  background: rgba(250, 244, 230, 0.90);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.4rem 0.6rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.char-thumb { position: relative; width: 44px; height: 44px; }

.char-thumb-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--gold);
  display: block;
}

.char-thumb-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  color: #fff;
  font-size: 1.1rem;
}

.char-thumb-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 1.1rem;
  padding: 0 0.15rem;
  background: #3a2f22;
  color: var(--gold);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  font-size: 0.62rem;
  text-align: center;
  line-height: 1.1rem;
}

/* 파멸 카운트다운 리본: 상시 노출 doom-bar를 메인 화면에서는 이걸로 대체한다 */
.doom-ribbon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(90deg, #5a1420, #7a1c2c 55%, #5a1420);
  border: 1px solid rgba(216,178,92,0.55);
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  max-width: 26rem;
}

.doom-ribbon-week {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: bold;
  white-space: nowrap;
  border-right: 1px solid rgba(216,178,92,0.4);
  padding-right: 0.6rem;
}

.doom-ribbon-text {
  color: #ffe9c4;
  font-size: 0.8rem;
  line-height: 1.3;
}

.doom-ribbon-text.doom-clear { color: #e8c9c9; font-style: italic; }

/* 계략 게이지 (addendum-2 B): 파멸 리본 바로 아래 얇은 바. game.schemeGauge가 있을 때만 렌더된다. */
.scheme-gauge {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  max-width: 26rem;
  background: rgba(40, 20, 45, 0.55);
  border: 1px solid rgba(150, 110, 200, 0.4);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
}

.scheme-gauge.scheme-gauge-hidden { display: none; }

.scheme-gauge-label-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.scheme-gauge-label {
  font-size: 0.68rem;
  color: #d8c4ec;
  letter-spacing: 0.04em;
}

/* 2차: 정보상("종이 파는 사내") 구매로 다음 수가 예고됐을 때만 뜨는 아이콘. */
.scheme-gauge-hint-icon { font-size: 0.8rem; cursor: help; }

.scheme-gauge-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
}

.scheme-gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, #6d4a9c, #9a5cc4);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.scheme-gauge.scheme-gauge-danger { border-color: rgba(216,84,106,0.7); animation: schemeGaugePulse 1.6s ease-in-out infinite; }
.scheme-gauge.scheme-gauge-danger .scheme-gauge-fill { background: linear-gradient(90deg, #8c1e2a, #d8546a); }

@keyframes schemeGaugePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(216,84,106,0); }
  50% { box-shadow: 0 0 12px 2px rgba(216,84,106,0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .scheme-gauge.scheme-gauge-danger { animation: none; box-shadow: 0 0 10px 2px rgba(216,84,106,0.4); }
}

/* 주간 기회 카드 (addendum-2 D): 슬롯칩 줄 왼쪽 끝의 콤팩트 칩(정보 위계 정리 — 배너였던 걸
   화면 중앙을 안 가리게 이동). game.weekCard가 없으면 자리 자체를 접는다. */
.week-card-chip-wrap { position: relative; }
.week-card-chip-wrap.week-card-chip-hidden { display: none; }

.week-card-chip {
  background: rgba(250, 244, 230, 0.92);
  border: 1px solid var(--gold-soft);
  color: #5c3d1a;
  font-size: 0.76rem;
  font-weight: bold;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  max-width: 9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.week-card-chip-wrap.open .week-card-chip { border-color: var(--gold); }

.week-card-chip-popover {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0;
  background: rgba(250, 244, 230, 0.96);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  width: 16rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
  z-index: 6;
  cursor: default;
}

.week-card-name {
  font-family: var(--serif);
  font-weight: bold;
  font-size: 0.85rem;
  color: #5c3d1a;
}

.week-card-summary { font-size: 0.72rem; color: #8a5a1e; margin-top: 0.25rem; line-height: 1.5; }
.week-card-flavor { font-size: 0.68rem; color: #6b5a44; font-style: italic; margin-top: 0.35rem; }

/* 하단: 컨트롤 바(3구역) + 커맨드 카드줄 */
.scene-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* 컨트롤 바: 화면 폭 전체(좌우 1.3rem 여백) 3구역 그리드. 배경과 분리되도록 은은한 반투명
   다크 띠를 깐다(가독성 — 유저 피드백: "UI가 가운데로 모여 넓게 안 쓴다"). */
.control-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 1rem;
  /* 부모(.main-scene) 좌우 패딩 1.3rem을 음수 마진으로 상쇄하되, 폭도 그만큼 늘려야
     오른쪽에 빈 띠가 남지 않는다 (실측: 폭이 안 늘어 우측 42px 공백). */
  width: calc(100% + 2.6rem);
  margin: 0 -1.3rem;
  padding: 0.7rem 1.9rem;
  background: rgba(14, 11, 16, 0.55);
  backdrop-filter: blur(2px);
  border-top: 1px solid rgba(216,178,92,0.2);
  border-bottom: 1px solid rgba(216,178,92,0.2);
}

.control-bar-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.control-bar-center { min-width: 0; }

.control-bar-right {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: end;
}

.slot-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}

.slot-chips { display: flex; gap: 0.7rem; flex: 1; min-width: 0; }

.slot-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  background: rgba(250, 244, 230, 0.92);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: #3a2f22;
  cursor: pointer;
}

.slot-chip.empty {
  background: rgba(30, 22, 36, 0.55);
  color: rgba(255, 248, 235, 0.9);
  border-style: dashed;
  border-color: rgba(216, 178, 92, 0.6);
  cursor: default;
}

.slot-chip.filled:hover { background: rgba(216,178,92,0.35); }

.slot-chip-icon { font-size: 1rem; flex-shrink: 0; }

/* 배치된 커맨드명이 잘리지 않게 — 칩 자체가 넓어졌으니 줄바꿈 없이 한 줄로 다 보여준다. */
.slot-chip-label { white-space: nowrap; overflow: visible; }

/* "이번 주 진행": 컨트롤 바 우측 끝에 크고 단독으로 — 스탠딩(중앙 52%)과 겹치지 않는 자리라
   더 이상 반투명해 보이지 않는다. */
/* 활성: 금색 채움+글로우로 확실히 눈에 띄게. 비활성: 전역 .btn:disabled의 opacity:0.4를
   오버라이드 — 어두운 채움+금테를 유지해 배경(컨트롤 바 반투명 띠)에 묻히지 않게 한다. */
.slot-assign-btn-big {
  padding: 0.7rem 1.6rem;
  font-size: 0.95rem;
  font-weight: bold;
  white-space: nowrap;
  background: linear-gradient(180deg, #d8b45c, #b5892a);
  border: 2px solid var(--gold);
  color: #2a1a06;
  box-shadow: 0 0 16px rgba(216,178,92,0.5);
}

.slot-assign-btn-big:hover:not(:disabled) {
  background: linear-gradient(180deg, #e8c66e, #c69836);
  box-shadow: 0 0 22px rgba(216,178,92,0.7);
}

.slot-assign-btn-big:disabled {
  opacity: 1;
  background: rgba(20, 16, 26, 0.88);
  border-color: var(--gold-soft);
  color: rgba(216, 178, 92, 0.6);
  box-shadow: none;
  cursor: not-allowed;
}

.command-card-row {
  /* 부록 4 §1로 커맨드가 14종이 되며 8열 그리드가 2줄로 늘어 캐릭터를 가렸다.
     "캐릭터 전신은 절대 안 가림" 철칙을 지키려 한 줄 가로 스크롤로 바꾼다 —
     카드 폭은 고정하고 넘치는 만큼 옆으로 흐른다(스크롤바는 얇게 숨김 처리). */
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(216,178,92,0.5) transparent;
}

.command-card-row::-webkit-scrollbar { height: 6px; }
.command-card-row::-webkit-scrollbar-thumb { background: rgba(216,178,92,0.5); border-radius: 999px; }
.command-card-row::-webkit-scrollbar-track { background: transparent; }

.command-card-row > .cmd-card {
  flex: 0 0 auto;
  width: 8.6rem;
}

.cmd-card {
  position: relative;
  background: rgba(250, 244, 230, 0.92);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 0.5rem 0.4rem 0.6rem;
  text-align: center;
  color: #3a2f22;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cmd-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

.cmd-card.active { border-color: var(--gold); border-width: 2px; background: rgba(255, 249, 235, 0.96); }

.cmd-card.disabled { opacity: 0.45; cursor: not-allowed; }
.cmd-card.disabled:hover { transform: none; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }

.cmd-card-art {
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.3rem;
}

.cmd-card-emoji { font-size: 2rem; }

.cmd-card-img { max-height: 100%; max-width: 100%; object-fit: contain; }

.cmd-card-name { font-size: 0.72rem; font-weight: bold; line-height: 1.2; margin-bottom: 0.15rem; }

.cmd-card-effect { font-size: 0.66rem; color: #6b5a44; }

.cmd-card-reason { font-size: 0.62rem; color: var(--danger); margin-top: 0.15rem; }

.cmd-card-count {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  background: var(--gold);
  color: #3a2205;
  font-size: 0.68rem;
  font-weight: bold;
  border-radius: 999px;
  padding: 0 0.35rem;
}

/* 이번 주 기회 카드가 영향을 주는 커맨드에 붙는 방향 뱃지. 좌상단 — 우상단의 배치수(×N)와 안 겹치게. */
.cmd-card-weekcard-badge {
  position: absolute;
  top: 0.3rem;
  left: 0.4rem;
  font-size: 0.72rem;
  font-weight: bold;
  border-radius: 999px;
  padding: 0 0.3rem;
  line-height: 1.3;
}

.cmd-card-weekcard-badge-up { background: rgba(94,160,110,0.85); color: #fff; }
.cmd-card-weekcard-badge-down { background: rgba(180,70,70,0.85); color: #fff; }

.target-popover {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28, 21, 18, 0.96);
  border: 1px solid var(--gold-soft);
  border-radius: 6px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 9rem;
  z-index: 5;
  cursor: default;
}

.target-popover-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
  text-align: left;
}

.target-popover-btn:hover { background: #2c2236; }

.target-popover-cancel {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0.15rem 0;
}

/* 컨트롤 바 좌측 구역: 일지·증거·상점(트리거)·지식 카드를 아이콘+라벨 버튼으로(정보 위계
   정리 — 라벨 없는 아이콘/카드 뒷면은 뭔지 알 수 없다는 피드백 반영). 열리는 팝오버는 openPanel
   하나로만 정해지므로 항상 최대 1개다. position:relative라 팝오버(position:absolute)가
   이 컨테이너 기준으로 뜬다. */
.utility-bar-wrap {
  position: relative;
  min-width: 0;
}

.utility-bar {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.utility-btn {
  background: rgba(20, 16, 26, 0.75);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-size: 0.74rem;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.1;
  flex-shrink: 1;
  min-width: 0;
}

.utility-btn.active { border-color: var(--gold); background: rgba(216,178,92,0.22); }
/* 이번 주 사용한 지식 카드 버튼: 흐리게(선택 불가는 아니지만 "소진됨"을 바로 알 수 있게). */
.utility-btn.spent { opacity: 0.6; }

.utility-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.4rem;
  background: rgba(20, 16, 26, 0.94);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  min-width: 16rem;
  max-width: 20rem;
  max-height: 42vh;
  overflow-y: auto;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  z-index: 6;
  cursor: default;
}

.utility-popover .week-log-line { padding: 0.12rem 0; font-size: 0.78rem; color: var(--text-dim); }

.evidence-popover-empty { font-size: 0.78rem; color: var(--text-dim); }
.evidence-popover-item { padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.evidence-popover-item:last-child { border-bottom: none; }
.evidence-popover-item-name { font-size: 0.8rem; color: var(--gold); font-weight: bold; }
.evidence-popover-item-desc { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.1rem; line-height: 1.4; }

/* 증거품 획득 토스트: document.body 직속, 우하단 고정. */
.evidence-toast {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  background: rgba(20, 16, 26, 0.94);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.evidence-toast.show { opacity: 1; transform: translateY(0); }

.evidence-toast-label {
  font-size: 0.68rem;
  color: var(--gold-soft);
  letter-spacing: 0.1em;
}

.evidence-toast-name { font-size: 0.9rem; color: #fff; font-weight: bold; margin-top: 0.1rem; }

@media (prefers-reduced-motion: reduce) {
  .evidence-toast { transition: opacity 0.25s ease; }
}

/* 2차: 상점 패널 — 우측 고정 슬라이드인(정보 위계 정리: 예전엔 좌표 팝오버라 거대해 보였다).
   트리거(🛍)는 유틸 바에 있고, 이 패널은 shopCtx.open일 때만 그려진다(빈 wrap은 0 크기라
   닫혀 있을 때 클릭을 가로막지 않는다). */
.shop-panel-wrap {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
}

.shop-panel {
  position: relative;
  height: 100vh;
  width: min(22rem, 92vw);
  background: rgba(18, 14, 20, 0.97);
  border-left: 1px solid var(--gold-soft);
  box-shadow: -12px 0 32px rgba(0,0,0,0.4);
  padding: 1rem;
  overflow-y: auto;
  animation: shopSlideIn 0.2s ease-out;
}

@keyframes shopSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

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

.shop-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.shop-panel-title {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

.shop-panel-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
}

.shop-panel-close:hover { border-color: var(--gold-soft); color: var(--gold); }

.shop-tab-row { display: flex; gap: 0.35rem; margin-bottom: 0.7rem; }

.shop-tab-btn {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  font-size: 0.72rem;
  padding: 0.3rem 0.4rem;
  border-radius: 999px;
  cursor: pointer;
}

.shop-tab-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(216,178,92,0.12); }

/* 품목 행: 이름+가격 한 줄, desc는 접힘 기본(클릭해 펼침). */
.shop-item-list { display: flex; flex-direction: column; gap: 0.4rem; }

.shop-item-row {
  background: rgba(250, 244, 230, 0.92);
  border: 1px solid var(--gold-soft);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  color: #3a2f22;
}

.shop-item-row.disabled { opacity: 0.5; }

.shop-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.shop-item-head-toggle { cursor: pointer; }

.shop-item-name { font-size: 0.82rem; font-weight: bold; }
.shop-item-price { font-size: 0.76rem; color: #8a5a1e; font-weight: bold; flex-shrink: 0; }

.shop-item-desc {
  font-size: 0.7rem;
  color: #6b5a44;
  margin-top: 0.35rem;
  line-height: 1.5;
  max-height: 6rem;
  overflow: hidden;
}

.shop-item-desc.shop-item-desc-collapsed { max-height: 0; margin-top: 0; }

.shop-item-reason { font-size: 0.66rem; color: var(--danger); margin-top: 0.3rem; }

.shop-item-buy-btn { margin-top: 0.4rem; font-size: 0.74rem; padding: 0.3rem 0.8rem; }

/* 2차: 지식 카드 목록 팝오버 — "✨ 지식 카드 N장" 버튼 하나로 3장을 전부 펼친다(정보 위계
   정리 — 라벨 없는 카드 뒷면 아이콘 3개였던 걸 이름이 보이는 목록으로). */
.knowledge-list-popover { display: flex; flex-direction: column; gap: 0.7rem; color: #f0e4fa; }

.knowledge-list-item {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(180, 140, 220, 0.25);
}

.knowledge-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.knowledge-list-item.spent { opacity: 0.55; }

.knowledge-card-name { font-size: 0.85rem; font-weight: bold; color: var(--gold); }
.knowledge-card-desc { font-size: 0.72rem; color: #d8c4ec; margin-top: 0.25rem; line-height: 1.5; }

.knowledge-card-meta { display: flex; gap: 0.7rem; margin-top: 0.35rem; }
.knowledge-card-cost { font-size: 0.7rem; color: #b48ce0; }
.knowledge-card-failchance { font-size: 0.7rem; color: #e0a0a0; }

.knowledge-card-reason { font-size: 0.68rem; color: var(--danger); margin-top: 0.4rem; }
.knowledge-use-btn { margin-top: 0.5rem; }
.knowledge-target-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }

/* 오디오 설정 ⚙ 버튼 + 팝오버 — 타이틀/메인 화면 공용. 메인에서는 일지 패널 반대편(우하단). */
.audio-settings {
  position: absolute;
  z-index: 3;
}

/* 메인 화면: 이제 컨트롤 바 우측 구역의 평범한 플렉스 자식이다(더 이상 화면에 직접 떠 있지
   않음) — 팝오버(.audio-popover)는 이 컨테이너 기준으로 위쪽에 뜬다. */
.main-audio-settings { position: relative; right: auto; bottom: auto; }

.title-audio-settings { top: 1.2rem; right: 1.3rem; z-index: 2; }

.audio-toggle-btn {
  width: 2.1rem;
  height: 2.1rem;
  background: rgba(20, 16, 26, 0.75);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-size: 1.05rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-popover {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  z-index: 30;
}

/* 타이틀 화면의 ⚙는 우상단이라 위로 열면 화면 밖으로 나간다 — 아래로 연다. */
.title-audio-settings .audio-popover {
  bottom: auto;
  top: calc(100% + 0.5rem);
}

.audio-popover {
  width: 13.5rem;
  background: rgba(20, 16, 26, 0.92);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.audio-row { display: flex; align-items: center; gap: 0.5rem; }

.audio-row-label { font-size: 0.72rem; color: var(--text-dim); width: 2.6rem; flex-shrink: 0; }

.audio-slider { flex: 1; accent-color: var(--gold); cursor: pointer; }

.audio-mute-btn {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
}

.audio-mute-btn:hover { border-color: var(--gold-soft); color: var(--gold); }

/* 편의 기능: 텍스트 속도 3단 선택 */
.audio-textspeed-row { align-items: flex-start; }
.audio-textspeed-row .audio-row-label { width: auto; margin-bottom: 0.2rem; }

.audio-textspeed-group { display: flex; gap: 0.3rem; flex: 1; }

.audio-textspeed-btn {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.68rem;
  padding: 0.2rem 0.3rem;
  border-radius: 999px;
  cursor: pointer;
}

.audio-textspeed-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(216,178,92,0.12); }

.audio-save-slots-btn { align-self: stretch; text-align: center; }

@media (max-width: 900px) {
  .command-card-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-mini-panel { width: 10.5rem; }
}

/* ---------------------------------------------------------------- */
/* 편의 기능: 세이브 슬롯 화면 */
/* ---------------------------------------------------------------- */
.save-slots-screen {
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.4rem 1.5rem;
  background: linear-gradient(180deg, #1c0d12 0%, #120810 100%);
}

.save-slots-heading {
  color: var(--gold);
  font-size: 1.7rem;
  text-shadow: 0 0 20px rgba(216,178,92,0.3);
  margin-bottom: 0.5rem;
}

.save-slots-note {
  color: var(--text-dim);
  font-size: 0.8rem;
  max-width: 30rem;
  text-align: center;
  margin-bottom: 1.6rem;
}

.save-slots-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
  max-width: 34rem;
}

.save-slot-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(20, 16, 26, 0.75);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 0.8rem 1rem;
}

.save-slot-label {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.85rem;
  width: 3.5rem;
  flex-shrink: 0;
}

.save-slot-info { flex: 1; font-size: 0.78rem; color: rgba(255,255,255,0.85); line-height: 1.5; }
.save-slot-empty { color: var(--text-faint); font-style: italic; }
.save-slot-week { font-weight: bold; }
.save-slot-ending { color: var(--gold-soft); }
.save-slot-time { color: var(--text-faint); font-size: 0.7rem; }

.save-slot-btn-group { display: flex; gap: 0.4rem; flex-shrink: 0; }

.save-slot-btn {
  font-size: 0.72rem;
  padding: 0.35rem 0.7rem;
  width: auto;
}

.save-slot-delete-btn { border-color: var(--danger); color: var(--danger); background: transparent; }
.save-slot-delete-btn:hover { background: rgba(216,84,106,0.15); }

.save-slots-back { margin-top: 2rem; }

/* ---------------------------------------------------------------- */
/* 편의 기능: 이벤트 화면 AUTO/백로그 컨트롤 + 백로그 오버레이 */
/* ---------------------------------------------------------------- */
.event-controls {
  position: absolute;
  right: 1.25rem;
  bottom: 1.1rem;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

.event-auto-btn, .event-backlog-btn {
  background: rgba(20, 16, 26, 0.75);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: bold;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.05em;
}

.event-auto-btn.active { border-color: var(--gold); background: rgba(216,178,92,0.25); }

.backlog-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8, 6, 10, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.backlog-panel {
  width: 100%;
  max-width: 38rem;
  max-height: 80vh;
  background: rgba(20, 16, 26, 0.96);
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.backlog-heading {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.7rem;
  flex-shrink: 0;
}

.backlog-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-right: 0.3rem;
}

.backlog-empty { color: var(--text-faint); font-style: italic; font-size: 0.85rem; }

.backlog-line {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.5rem;
}

.backlog-line-speaker { font-size: 0.75rem; color: var(--gold-soft); font-weight: bold; margin-bottom: 0.15rem; }
.backlog-line-text { font-size: 0.88rem; color: rgba(255,255,255,0.9); line-height: 1.6; }

.backlog-close-btn {
  align-self: center;
  margin-top: 1rem;
  background: transparent;
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-size: 0.8rem;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}

.backlog-close-btn:hover { background: rgba(216,178,92,0.12); }

/* ---------------------------------------------------------------- */
/* 챕터 타이틀 카드 (플래그 이벤트 전용, PM6 행사감) */
/* ---------------------------------------------------------------- */
.chapter-card {
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  cursor: pointer;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(216,178,92,0.12), transparent 60%),
    linear-gradient(180deg, #1c0d12 0%, #120810 100%);
  animation: sceneFadeIn 0.3s ease;
}

.chapter-deco-line {
  width: 40%;
  max-width: 20rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.chapter-eyebrow {
  font-family: var(--serif);
  color: var(--gold-soft);
  letter-spacing: 0.3em;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.chapter-title {
  font-family: var(--serif);
  color: var(--gold);
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-shadow: 0 0 28px rgba(216,178,92,0.4);
  margin: 0;
  padding: 0 1.5rem;
}

.chapter-card-final .chapter-eyebrow { color: #e08a8a; letter-spacing: 0.35em; }
.chapter-card-final .chapter-title { text-shadow: 0 0 34px rgba(216,84,106,0.45); }

.chapter-vignette-pulse {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(140,20,30,0.35) 100%);
  animation: chapterVignettePulse 2s ease-in-out infinite;
}

@keyframes chapterVignettePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-vignette-pulse { animation: none; opacity: 0.7; }
}

/* ---------------------------------------------------------------- */
/* 이벤트(대사) 화면 */
/* ---------------------------------------------------------------- */
.event-screen {
  max-width: none;
  min-height: calc(100vh - 48px);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  cursor: pointer;
}

.event-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 프롤로그 pro_office: 의식이 꺼지는 톤의 어두운 비네트 */
.event-vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 28%, rgba(0,0,0,0.82) 100%);
}

.event-place-label {
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  font-family: var(--serif);
  color: rgba(255, 248, 235, 0.92);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  background: rgba(18, 14, 22, 0.55);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.35);
}

/* 메인 화면 우상단과 같은 자리에 같은 리본을 띄운다 — 상단 doom-bar 대신 화면마다 톤을 통일. */
.event-ribbon-slot {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  z-index: 2;
}

/* 행사 프레임: 플래그(파멸) 이벤트에만 상하단에 얇은 진홍+금테 배너를 둘러 일상 이벤트와
   등급을 가른다. z-index를 리본(2)보다 낮춰 리본이 배너 위에 자연스럽게 얹히게 하고,
   라벨은 좌측에 둬 우측 리본과 안 겹치게 한다. */
.flag-banner {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 2.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.25rem;
  background: linear-gradient(180deg, rgba(90,20,30,0.55), rgba(40,10,16,0.25));
  pointer-events: none;
}

.flag-banner-top { top: 0; border-bottom: 1px solid rgba(216,178,92,0.45); }

/* 행사 배너가 이벤트명을 보여주므로 플래그 이벤트에선 장소 라벨을 숨겨 겹침 방지 */
.event-screen:has(.flag-banner) .event-place-label { display: none; }
.flag-banner-bottom {
  bottom: 0;
  border-top: 1px solid rgba(216,178,92,0.45);
  background: linear-gradient(0deg, rgba(90,20,30,0.55), rgba(40,10,16,0.25));
}

.flag-banner-tag {
  font-family: var(--serif);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #ffd9d9;
  background: rgba(140,20,30,0.55);
  border: 1px solid rgba(216,84,106,0.5);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

.flag-banner-title {
  font-family: var(--serif);
  font-size: 0.85rem;
  color: #f0d9a0;
  letter-spacing: 0.03em;
}

/* 계략 이벤트("단베르크의 수"): 같은 배너 프레임을 자주색 톤으로 바꿔 파멸 플래그와 구분한다. */
.event-screen-scheme .flag-banner-top,
.event-screen-scheme .flag-banner-bottom {
  background: linear-gradient(180deg, rgba(60,20,90,0.55), rgba(30,10,45,0.25));
  border-color: rgba(180,140,220,0.45);
}

.event-screen-scheme .flag-banner-bottom {
  background: linear-gradient(0deg, rgba(60,20,90,0.55), rgba(30,10,45,0.25));
}

.event-screen-scheme .flag-banner-tag {
  color: #ecd9ff;
  background: rgba(90,40,130,0.55);
  border-color: rgba(180,140,220,0.6);
}

.event-portraits {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 인물 가로 위치를 메인 화면 스탠딩(left 60%)과 통일해 화면 전환 시 순간이동 느낌을 없앤다. */
.portrait-image {
  position: absolute;
  bottom: 0;
  left: 58%;
  transform: translateX(-50%);
  height: 62vh;
  max-height: 640px;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.5));
  animation: portraitFadeIn 0.35s ease-out;
}

@keyframes portraitFadeIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.portrait-fallback-wrap {
  position: absolute;
  bottom: 8vh;
  left: 58%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: portraitFadeIn 0.35s ease-out;
}

.portrait-circle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.portrait-initial {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: rgba(255,255,255,0.85);
}

.portrait-name {
  color: #fff;
  font-size: 0.85rem;
  background: rgba(0,0,0,0.4);
  padding: 0.15rem 0.7rem;
  border-radius: 10px;
}

/* 다인 대화 무대: 세라 좌측 고정 + 상대 1~2인을 좌표별로 배치, 화자만 밝게/확대해 강조한다.
   화면이 씬마다 통째로 재렌더되므로(각 씬 = 새 DOM) transition은 사실상 순간전환처럼 보이지만,
   추후 DOM을 유지하는 구조로 바뀌어도 자연히 부드러워지도록 선언은 남겨둔다. */
.event-actor {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.event-actor .portrait-image,
.event-actor .portrait-fallback-wrap {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  animation: none;
}

.event-actor-speaking {
  filter: brightness(1);
  transform: translateX(-50%) scale(1.03);
  z-index: 3;
}

.event-actor-dim {
  filter: brightness(0.62);
  transform: translateX(-50%) scale(1);
  z-index: 2;
}

.event-actor-enter {
  animation: portraitFadeIn 0.35s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .event-actor {
    transition: none;
  }
  .event-actor-enter {
    animation: none;
  }
}

/* 표정 차분 크로스페이드: 같은 인물의 표정이 바뀌는 씬에서만 두 <img>를 겹쳐 얹는다.
   .portrait-image 기본 크기/위치를 그대로 물려받되, 절대 배치로 쌓아 겹치게 한다. */
.portrait-cross-wrap {
  position: relative;
  height: 62vh;
  max-height: 640px;
}

.portrait-cross-wrap .portrait-image {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  animation: none;
}

.portrait-cross-out { animation: portraitCrossOut 0.25s ease forwards; }
.portrait-cross-in { animation: portraitCrossIn 0.25s ease forwards; }

@keyframes portraitCrossOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes portraitCrossIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-cross-out { display: none; }
  .portrait-cross-in { animation: none; opacity: 1; }
}

.dialogue-box {
  position: relative;
  z-index: 1;
  margin: 0 1rem 1.25rem;
  background: rgba(18,14,22,0.88);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  backdrop-filter: blur(2px);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 2rem);
}

.dialogue-box.dialogue-narrator { border-color: var(--border); }

.dialogue-box.dialogue-inner {
  border-color: #6a7fb0;
  background: rgba(20,20,32,0.9);
}

.speaker-name {
  font-family: var(--serif);
  color: var(--gold);
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.speaker-name.speaker-inner { color: #9fb3e0; font-style: italic; }

.dialogue-text {
  line-height: 1.65;
  font-size: 1.02rem;
  white-space: pre-wrap;
}

.dialogue-box.dialogue-inner .dialogue-text {
  font-style: italic;
  color: #c7cfe6;
}

.dialogue-box.dialogue-narrator .dialogue-text {
  color: var(--text-dim);
}

.dialogue-continue {
  margin-top: 0.7rem;
  text-align: right;
  font-size: 0.78rem;
  color: var(--text-faint);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.choices {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.choice-btn {
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--gold-soft);
  border-radius: 5px;
  padding: 0.6rem 0.8rem;
  color: var(--text);
  cursor: pointer;
}

.choice-btn:hover:not(:disabled) { background: #2c2236; border-color: var(--gold); }

.choice-btn.disabled, .choice-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border);
}

.choice-text { font-size: 0.95rem; }

.choice-require { font-size: 0.75rem; color: var(--down); margin-top: 0.2rem; }

/* 플래그 이벤트의 회피 조건 선택지(require 있고 활성 상태)만 금색 발광 펄스 — 일상 이벤트나
   disabled(미달, 붉은 흐림 우선)에는 안 붙는다. */
.choice-btn.choice-glow {
  border-color: var(--gold);
  animation: choiceGlowPulse 2s ease-in-out infinite;
}

@keyframes choiceGlowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,178,92,0.35); }
  50% { box-shadow: 0 0 14px 3px rgba(216,178,92,0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .choice-btn.choice-glow { animation: none; box-shadow: 0 0 10px 2px rgba(216,178,92,0.4); }
}

/* ---------------------------------------------------------------- */
/* 주간 활동 컷씬: '이번 주 진행' 클릭 시 슬롯 3개를 순서대로 재생하는 전체 화면 컷 */
/* ---------------------------------------------------------------- */
.activity-cut {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
}

/* CG/배경 레이어를 컨테이너와 분리해 슬롯이 바뀔 때마다 이 레이어에만 0.6s 크로스페이드 +
   슬롯 내내 아주 느린 줌을 건다 — CG가 정지 화면처럼 느껴지지 않게 하는 최소한의 움직임. */
.activity-cut-cg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  opacity: 0;
  transform-origin: center;
  animation: cgFadeIn 0.6s ease forwards, cutZoom 3.4s ease-out forwards;
}

@keyframes cgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cutZoom {
  from { transform: scale(1); }
  to { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .activity-cut-cg { animation: cgFadeIn 0.6s ease forwards; }
}

/* 같은 슬롯의 둘째 날: CG가 안 바뀌므로 크로스페이드 없이 바로 보인다(깜빡임 방지). */
.activity-cut-cg-hold {
  opacity: 1;
  animation: cutZoom 3.4s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .activity-cut-cg-hold { animation: none; }
}

/* fail 결과: 화면 가장자리를 어둡게 눌러 "실패" 톤을 준다 */
.activity-cut-fail .activity-cut-cg {
  filter: saturate(0.7) brightness(0.75);
}

.activity-cut-fail::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.6) 100%);
}

.activity-cut-art-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-cut-art-img {
  max-height: 60vh;
  max-width: 60vw;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.4));
  animation: portraitFadeIn 0.4s ease-out;
}

.activity-cut-emoji {
  font-size: 9rem;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
  animation: portraitFadeIn 0.4s ease-out;
}

.activity-cut-label {
  position: relative;
  z-index: 1;
  align-self: center;
  margin-bottom: 1.4rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold);
  background: rgba(18,14,22,0.75);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.5rem 1.6rem;
  text-shadow: 0 0 16px rgba(216,178,92,0.35);
}

/* 결과 스탬프: 도장 찍히는 느낌의 스케일 애니메이션. 0.6s(CG 페이드가 끝나는 시점)에 등장. */
.result-stamp {
  position: absolute;
  top: 38%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(-8deg) scale(0);
  font-family: var(--serif);
  font-weight: bold;
  padding: 0.5rem 1.6rem;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  animation: stampIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}

@keyframes stampIn {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); }
  60% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}

.result-stamp-crit {
  font-size: 2.6rem;
  color: #2a1a05;
  background: linear-gradient(155deg, #ffe9ab, var(--gold) 55%, #a9782f);
  border: 3px solid #fff3d0;
  box-shadow: 0 0 32px rgba(216,178,92,0.6), 0 8px 20px rgba(0,0,0,0.4);
}

.result-stamp-fail {
  font-size: 2rem;
  color: #e8c9c9;
  background: rgba(30, 12, 16, 0.85);
  border: 3px solid rgba(216,84,106,0.6);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* ok: 매일 판정 받는 느낌을 위해 작은 은색 스탬프로 표시 */
.result-stamp-ok {
  font-size: 1.2rem;
  padding: 0.3rem 0.9rem;
  color: #e4e8ee;
  background: rgba(60, 66, 78, 0.85);
  border: 2px solid rgba(200, 210, 224, 0.5);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}

/* 치비 머리 위: 화면 중앙 38% 대신 치비 중심(58%) 바로 위쪽으로 자리를 옮긴다. */
.result-stamp-on-chibi { top: 32%; left: 52%; }
.stamp-sparkles-chibi { top: 32%; left: 52%; }

/* 대성공 반짝 파티클: 스탬프 주위로 방사형으로 튀는 별 조각 */
.stamp-sparkles {
  position: absolute;
  top: 38%;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
  transform: rotate(var(--angle)) translateY(0) scale(0);
  animation: sparkleBurst 0.7s ease-out forwards;
}

@keyframes sparkleBurst {
  0% { opacity: 0; transform: rotate(var(--angle)) translateY(0) scale(0); }
  30% { opacity: 1; transform: rotate(var(--angle)) translateY(-70px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(-105px) scale(0.4); }
}

/* 플레이버 대사: 스탬프 다음 타이밍(1.1s)에 페이드인 */
.activity-cut-flavor {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 32rem;
  margin: 0 1.5rem 1.2rem;
  padding: 0.6rem 1.1rem;
  background: rgba(18,14,22,0.78);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  color: #d8cfe0;
  font-style: italic;
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  animation: tickerPop 0.4s ease-out 1.1s forwards;
}

.activity-cut-ticker {
  position: absolute;
  left: 1.5rem;
  bottom: 5rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ticker-item {
  background: rgba(18,14,22,0.82);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  color: var(--up);
  font-weight: bold;
  font-size: 0.95rem;
  opacity: 0;
  animation: tickerPop 0.4s ease-out forwards;
}

.ticker-item.negative { color: var(--down); border-color: rgba(216,84,106,0.4); }

@keyframes tickerPop {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

.activity-cut-continue {
  position: relative;
  z-index: 1;
  align-self: center;
  margin-bottom: 1rem;
}

/* 요일 캘린더 카드 (PM3 "Jun 8 MON" 카드 오마주): 좌상단, 주차 + 큰 요일 글자.
   앞/뒷면을 미리 다 그려두고 CSS 3D 회전만으로 플립한다 — 중간에 텍스트를 바꿔치기할 필요가
   없어 애니메이션 타이밍이 절대 어긋나지 않는다. */
.calendar-card {
  position: absolute;
  top: 1.1rem;
  left: 1.3rem;
  z-index: 2;
  width: 5.2rem;
  background: rgba(250, 244, 230, 0.95);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  overflow: hidden;
  cursor: default;
}

.calendar-week {
  background: #7a1c2c;
  color: #ffe9c4;
  font-size: 0.62rem;
  text-align: center;
  padding: 0.2rem 0;
  letter-spacing: 0.02em;
}

.calendar-flip {
  height: 3.4rem;
  perspective: 320px;
}

/* 하루마다 즉시(지연 없이) 전날→오늘로 플립. 첫날(prevDayLetter 없음)은 .calendar-flip-inner-still이
   붙어 애니메이션 없이 그냥 나타난다(앞면=뒷면=오늘이라 회전할 필요가 없다). */
.calendar-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  animation: calendarFlip 0.6s ease-in-out forwards;
}

.calendar-flip-inner-still { animation: none; }

@keyframes calendarFlip {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-180deg); }
}

.calendar-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: bold;
  color: #3a2f22;
}

.calendar-face-back { transform: rotateX(180deg); }

/* 스탯 카운팅 게이지: 주 효과를 아이콘+이름+바+숫자로, 숫자는 JS가 rAF로 0→실측값 카운팅. */
.cut-gauge {
  position: absolute;
  left: 1.5rem;
  /* 티커 알약(최대 3개, 아래에서 위로 쌓임)이 라벨을 덮지 않도록 충분히 띄운다 */
  bottom: 12.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(18,14,22,0.85);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.4rem 1rem 0.4rem 0.7rem;
  opacity: 0;
  animation: tickerPop 0.3s ease-out forwards;
}

.cut-gauge-icon { font-size: 1.1rem; }

.cut-gauge-label { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; }

.cut-gauge-bar {
  width: 6rem;
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
}

.cut-gauge-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  border-radius: 4px;
}

.cut-gauge-fill.negative { background: linear-gradient(90deg, #7a2c2c, var(--down)); }

.cut-gauge-number {
  min-width: 2.4rem;
  text-align: right;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--up);
}

.cut-gauge-number.negative { color: var(--down); }

/* 특수 리캡 스탬프(절호조!/최악의 한 주…): 컨텍스트 카드 없이 화면 중앙에 바로. */
.result-stamp-special {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  animation: stampInCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
  font-size: 3rem;
}

@keyframes stampInCenter {
  0% { opacity: 0; transform: scale(2.2) rotate(-6deg); }
  60% { opacity: 1; transform: scale(0.94) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}

.activity-special {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.activity-special-streak {
  background: radial-gradient(ellipse at center, #4a3410 0%, #1c1410 70%);
}

.activity-special-worst {
  background: radial-gradient(ellipse at center, #2c1418 0%, #140e12 70%);
}

.stamp-sparkles-wide {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
}

/* PM2식 치비 무대: CG가 메인, 치비는 화면 중앙 살짝 아래(세로 58%)에 크게(34vh) 떠서 행동 루프를
   반복한다. 걷기·진행 띠는 전부 폐기 — 하루(day) 단위로 그 자체가 통째로 다시 그려진다. */
.chibi-dim {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 46vh;
  height: 46vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, transparent 70%);
}

.sprite-frame {
  display: block;
  width: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4));
}

.chibi-act {
  position: absolute;
  left: 52%;
  top: 58%;
  height: 34vh;
  z-index: 1;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  animation: chibiPopIn 0.3s ease-out forwards;
}

.chibi-npc {
  position: absolute;
  left: 26%;
  top: 62%;
  height: 24vh;
  z-index: 0;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  animation: chibiPopIn 0.3s ease-out 0.1s forwards;
}

@keyframes chibiPopIn {
  from { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chibi-act, .chibi-npc { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.chibi-dimmed { filter: grayscale(0.7) brightness(0.85) drop-shadow(0 6px 10px rgba(0,0,0,0.4)); }

/* 앓아눕는 주 카드: 짧고 담백하게 */
.activity-sick {
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: linear-gradient(160deg, #1a1622 0%, #241c2c 100%);
}

.activity-sick-emoji {
  font-size: 4.5rem;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
  animation: portraitFadeIn 0.4s ease-out;
}

.activity-sick .activity-cut-label { align-self: center; }
.activity-sick .activity-cut-flavor { position: relative; opacity: 1; animation: none; }

/* ---------------------------------------------------------------- */
/* 월말 리포트 — 메인/이벤트와 같은 톤: bg_mansion 풀블리드 + 우상단 리본 +
   화면 중앙(약간 좌측)의 반투명 크림 패널. 세라피나 스탠딩이 패널 뒤 우측에 은은히 비친다. */
/* ---------------------------------------------------------------- */
.report-scene {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-size: cover, cover;
  background-position: center, center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* 메인 화면 스탠딩과 같은 자리(좌 52%)에, 패널에 가려지는 만큼 옅게 */
.report-standing {
  left: 52%;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.report-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  margin-right: 20%;
  background: rgba(250, 244, 230, 0.94);
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  color: #3a2f22;
  padding: 1.4rem 1.6rem 1.6rem;
}

@media (max-width: 760px) {
  .report-panel { margin-right: 0; }
}

.report-panel .report-heading {
  color: #6b3a1c;
  text-align: center;
  font-size: 1.5rem;
}

.report-section-title {
  font-size: 0.85rem;
  color: #8a6a3a;
  border-bottom: 1px solid rgba(184,144,63,0.35);
  padding-bottom: 0.3rem;
  margin-top: 1.1rem;
}

.report-deltas {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}

.report-row {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(184,144,63,0.25);
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  font-size: 0.88rem;
  color: #4a3d2c;
}

.report-row.up { color: #2f7a45; font-weight: bold; }
.report-row.down { color: #a23a3a; font-weight: bold; }

.report-duke-comment {
  font-family: var(--serif);
  font-style: italic;
  color: #5c4c38;
  border-left: 3px solid var(--gold-soft);
  padding-left: 0.8rem;
}

.report-doom { color: #6b3a1c; }

.report-continue-btn { display: block; margin: 1.3rem auto 0; }

/* ---------------------------------------------------------------- */
/* 엔딩 */
/* ---------------------------------------------------------------- */
.ending-screen {
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  cursor: pointer;
}

.ending-kind {
  color: var(--gold-soft);
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.ending-name {
  color: var(--gold);
  font-size: 2.1rem;
  text-shadow: 0 0 20px rgba(216,178,92,0.3);
  margin-bottom: 1.5rem;
}

.ending-line {
  max-width: 40rem;
  line-height: 1.8;
  font-size: 1.05rem;
  background: rgba(15,12,18,0.55);
  padding: 1rem 1.3rem;
  border-radius: 8px;
}

.ending-screen .dialogue-continue { margin-top: 1rem; }

.ending-screen .btn { margin-top: 1.5rem; cursor: pointer; }

/* ---------------------------------------------------------------- */
/* 엔딩 CG 몽타주: 카메오 반응 / 편지 에필로그 / 성적표 (로드맵 C') */
/* 세 화면이 공유하는 배경 레이어 — CG(manifest ending_<id>)가 있으면 풀블리드,
   없으면 엔딩 기본 배경 그라데이션 위에 스크림을 얹어 "딤" 처리한다. */
/* ---------------------------------------------------------------- */
.ending-cg-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.ending-cg-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,14,0.15) 0%, rgba(10,8,14,0.55) 100%);
}

.ending-cameo-screen,
.ending-letter-screen,
.ending-reportcard-screen {
  max-width: none;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem;
  cursor: pointer;
  animation: sceneFadeIn 0.3s ease;
}

.ending-cameo-counter {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  font-size: 0.75rem;
  color: var(--gold-soft);
  letter-spacing: 0.1em;
}

.ending-cameo-screen .dialogue-box { position: relative; z-index: 1; }

/* 편지 에필로그: 양피지 톤 패널에 줄이 하나씩 누적된다(재렌더마다 통째로 다시 그려지지만
   마지막 줄에만 fade-in 클래스를 걸어 새로 추가된 줄만 도드라지게 한다). */
.ending-letter-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(28,20,14,0.78);
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.2rem;
  text-align: left;
}

.ending-letter-heading {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.8rem;
}

.ending-letter-line {
  line-height: 1.8;
  font-size: 0.98rem;
  color: rgba(255,255,255,0.92);
  margin: 0 0 0.7rem;
}

.ending-letter-line-enter { animation: portraitFadeIn 0.4s ease-out; }

.ending-letter-screen .dialogue-continue { position: relative; z-index: 1; margin-bottom: 0.4rem; }

/* 성적표: 세피아 톤 + 최종 스탯 + 플레이 기록. PM3 문법의 마지막 정지 화면. */
.ending-reportcard-sepia {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(40,28,14,0.5);
  backdrop-filter: sepia(0.4) brightness(0.85);
}

.ending-reportcard-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  background: rgba(24,18,14,0.82);
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  padding: 1.6rem 1.8rem;
  text-align: center;
  margin: auto;
}

.ending-reportcard-heading {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.4rem;
}

.ending-reportcard-ending {
  color: var(--gold-soft);
  font-size: 0.95rem;
  margin-bottom: 1.1rem;
}

.ending-reportcard-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(216,178,92,0.25);
}

.ending-reportcard-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.ending-reportcard-stat-label { color: rgba(255,255,255,0.7); }
.ending-reportcard-stat-value { color: #fff; font-variant-numeric: tabular-nums; }

.ending-reportcard-records {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.3rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}

@media (prefers-reduced-motion: reduce) {
  .ending-cameo-screen, .ending-letter-screen, .ending-reportcard-screen { animation: none; }
  .ending-letter-line-enter { animation: none; }
}

/* ---------------------------------------------------------------- */
/* 엔딩 후 연대기(journey) — "24주의 기록" 앨범 */
/* ---------------------------------------------------------------- */
.journey-screen {
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.2rem 1.5rem 2.5rem;
  position: relative;
}

.journey-vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, transparent 20%, rgba(10,8,14,0.72) 100%);
}

.journey-heading {
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-size: 1.8rem;
  text-shadow: 0 0 20px rgba(216,178,92,0.3);
  margin-bottom: 1.2rem;
}

/* 스크롤은 이 패널 내부에서만 — 화면 전체가 스크롤되지 않는다. */
.journey-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  max-height: 62vh;
  overflow-y: auto;
  background: rgba(18,14,22,0.72);
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.journey-entry {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--border);
  opacity: 0;
  animation: journeyEntryIn 0.4s ease-out forwards;
}

@keyframes journeyEntryIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .journey-entry { animation: none; opacity: 1; }
}

.journey-entry-flag { border-left-color: var(--gold-soft); }

.journey-entry-final {
  border-left-color: var(--down);
  background: rgba(140,20,30,0.12);
  padding: 0.8rem 0.9rem;
}

.journey-entry-final .journey-title { font-size: 1.05rem; font-weight: bold; }

.journey-entry-sick { border-left-color: var(--text-faint); opacity: 0.8; }
.journey-entry-sick .journey-title { color: var(--text-faint); font-size: 0.85rem; }

.journey-week {
  font-family: var(--serif);
  color: var(--gold-soft);
  font-size: 0.78rem;
  white-space: nowrap;
  min-width: 2.6rem;
}

.journey-title { flex: 1; font-size: 0.92rem; color: var(--text); }

.journey-tag {
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.journey-tag-gold { color: var(--gold); border-color: var(--gold-soft); background: rgba(216,178,92,0.12); }
.journey-tag-crimson { color: #f0a0a0; border-color: rgba(216,84,106,0.5); background: rgba(140,20,30,0.18); }
.journey-tag-soft { color: var(--text-dim); background: rgba(255,255,255,0.05); }

.journey-thumb {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
}

.journey-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  color: #fff;
  font-size: 0.9rem;
}

.journey-growth {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.journey-growth-title {
  font-size: 0.9rem;
  color: var(--gold-soft);
  margin-bottom: 0.5rem;
}

.journey-growth-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr 7.5rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

.journey-growth-label { font-size: 0.8rem; color: var(--text-dim); }

.journey-growth-bar {
  height: 7px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.journey-growth-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
}

.journey-growth-fill.negative { background: linear-gradient(90deg, #7a4a4a, var(--danger)); }

.journey-growth-value {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.journey-restart-btn { position: relative; z-index: 1; margin-top: 1.5rem; }

/* ---------------------------------------------------------------- */
/* 1.5차 "역전재판 라이트": 죄목 사이 힌트 / 증거 제시 패널 / "이의 있습니다!" 배너 */
/* 죄목 카드 자체는 renderChapterCard(isFinal:true)를 재사용하므로 별도 CSS 없음. */
/* ---------------------------------------------------------------- */
.trial-hint-screen {
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
  cursor: pointer;
  padding: 2rem;
  background: linear-gradient(180deg, #1c0d12 0%, #120810 100%);
  animation: sceneFadeIn 0.3s ease;
}

.trial-hint-label {
  font-family: var(--serif);
  color: var(--gold-soft);
  letter-spacing: 0.2em;
  font-size: 0.8rem;
}

.trial-hint-text {
  max-width: 36rem;
  font-style: italic;
  line-height: 1.8;
  color: rgba(255,255,255,0.88);
  font-size: 1rem;
}

.evidence-picker-screen {
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(180deg, #1c0d12 0%, #120810 100%);
  animation: sceneFadeIn 0.3s ease;
}

.evidence-picker-charge {
  max-width: 34rem;
  font-family: var(--serif);
  color: #f0d9a0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.evidence-picker-heading {
  color: var(--gold);
  font-size: 1.3rem;
  margin: 0;
}

.evidence-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem;
  width: 100%;
  max-width: 42rem;
  margin-top: 0.5rem;
}

.evidence-picker-card {
  background: rgba(250, 244, 230, 0.92);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  text-align: left;
  color: #3a2f22;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.evidence-picker-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

.evidence-picker-card-name { font-size: 0.82rem; font-weight: bold; margin-bottom: 0.2rem; }
.evidence-picker-card-desc { font-size: 0.7rem; color: #6b5a44; line-height: 1.4; }

.evidence-picker-skip {
  margin-top: 0.8rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.75);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.evidence-picker-skip:hover { border-color: var(--gold-soft); color: var(--gold-soft); }

/* "이의 있습니다!" 배너: 화면을 가로지르는 금색 사선 + 플래시. */
.objection-banner-screen {
  max-width: none;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #0c0810;
  overflow: hidden;
}

.objection-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(216,178,92,0.35), transparent 70%);
  animation: objectionFlash 0.5s ease-out;
}

.objection-banner {
  position: relative;
  z-index: 1;
  transform: rotate(-4deg);
  background: linear-gradient(90deg, #8c1e2a, #d8a03c 50%, #8c1e2a);
  color: #fff8e8;
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: bold;
  letter-spacing: 0.06em;
  padding: 0.8rem 3rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  border-top: 2px solid rgba(255,255,255,0.6);
  border-bottom: 2px solid rgba(255,255,255,0.6);
  animation: objectionBannerIn 0.35s cubic-bezier(0.2, 1.4, 0.5, 1);
}

@keyframes objectionFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes objectionBannerIn {
  0% { transform: rotate(-4deg) scale(0.6); opacity: 0; }
  60% { transform: rotate(-4deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(-4deg) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .trial-hint-screen, .evidence-picker-screen { animation: none; }
  .objection-flash { animation: none; opacity: 0.4; }
  .objection-banner { animation: none; }
}

/* ---------------------------------------------------------------- */
/* 디버그 패널 (?debug=1 전용) */
/* ---------------------------------------------------------------- */
/* 상단 중앙에 둔다 — 우상단(인물 썸네일·파멸 리본·계략 게이지)과도, 우하단(⚙ 설정, 이제 컨트롤
   바 우측 구역 안)과도 겹칠 자리가 없는 중립 지대. */
.debug-toggle {
  position: fixed;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(20,16,26,0.9);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  cursor: pointer;
  font-size: 1.1rem;
}

.debug-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 22rem;
  max-width: 90vw;
  z-index: 9998;
  background: rgba(14,11,18,0.97);
  border-left: 1px solid var(--gold-soft);
  overflow-y: auto;
  padding: 3rem 1rem 1.5rem;
  transition: transform 0.2s ease;
}

.debug-drawer-closed { transform: translateX(100%); }

.debug-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }

.debug-tab {
  flex: 1;
  padding: 0.4rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 4px;
}

.debug-tab.active { color: var(--gold); border-color: var(--gold-soft); background: rgba(216,178,92,0.12); }

.debug-section { margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.8rem; }

.debug-section-title { color: var(--gold-soft); font-size: 0.8rem; margin: 0.6rem 0 0.4rem; }

.debug-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0; }

.debug-row-label { font-size: 0.78rem; color: var(--text-dim); }

.debug-input { width: 5rem; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 0.15rem 0.3rem; border-radius: 4px; }

.debug-apply { margin-top: 0.5rem; width: 100%; }

.debug-btn-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.debug-note { font-size: 0.78rem; color: var(--text-faint); margin-bottom: 0.6rem; }

.debug-textarea { width: 100%; height: 5rem; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font-size: 0.7rem; margin-bottom: 0.4rem; }

.debug-event-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0; font-size: 0.78rem; }

.debug-event-label { flex: 1; color: var(--text-dim); }

/* ---------------------------------------------------------------- */
/* 부록 3 §1 도감 「세라피나의 비망록」 — 인물록·증거품록·기록실 3탭.
   엔딩 갤러리와 같은 어두운 회고 톤을 쓰되, 카드는 그리드가 아니라 세로 목록형
   (인물 한줄평·증거 설명처럼 읽을 텍스트가 길어 가로 카드가 더 읽기 편하다). */
/* ---------------------------------------------------------------- */
.compendium-screen {
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(180deg, #1c0d12 0%, #120810 100%);
  overflow-y: auto;
}

.compendium-heading {
  color: var(--gold);
  font-size: 1.7rem;
  text-shadow: 0 0 20px rgba(216,178,92,0.3);
  margin-bottom: 1.1rem;
}

.compendium-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.compendium-tab {
  font-family: var(--serif);
  font-size: 0.86rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: rgba(20, 16, 26, 0.7);
  color: var(--text);
  cursor: pointer;
}

.compendium-tab.active {
  background: rgba(216,178,92,0.22);
  color: var(--gold);
  border-color: var(--gold);
}

.compendium-body {
  width: 100%;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.compendium-card {
  display: flex;
  gap: 0.9rem;
  padding: 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--gold-soft);
  background: rgba(28, 22, 34, 0.72);
}

.compendium-card.locked { border-color: rgba(255,255,255,0.12); background: rgba(20, 16, 24, 0.6); }
.compendium-card-slim { padding: 0.7rem 0.9rem; }

.compendium-thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 90px;
  border-radius: 8px;
  border: 1px solid var(--gold-soft);
  background-size: cover;
  background-position: top center;
  background-color: #201a26;
}

.compendium-silhouette {
  background: repeating-linear-gradient(135deg, #1a1620, #1a1620 8px, #221c28 8px, #221c28 16px);
  border-color: rgba(255,255,255,0.15);
}

.compendium-info { min-width: 0; flex: 1 1 auto; }
.compendium-name { font-family: var(--serif); font-size: 1rem; color: var(--gold); }
.compendium-unknown { color: rgba(255,255,255,0.35); }
.compendium-title-line { font-size: 0.74rem; color: rgba(255,255,255,0.5); margin-top: 0.1rem; }
.compendium-desc { font-size: 0.8rem; color: var(--text); line-height: 1.55; margin-top: 0.35rem; }
.compendium-aff { font-size: 0.74rem; color: #e0a8c0; margin-top: 0.4rem; }
.compendium-star { color: var(--gold); margin-left: 0.4rem; }

.compendium-notes { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }

.compendium-note {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.78rem;
  line-height: 1.5;
}

.compendium-note-tier {
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: var(--gold);
  background: rgba(216,178,92,0.14);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

.compendium-note.locked .compendium-note-text { color: rgba(255,255,255,0.32); font-style: italic; }
.compendium-note.locked .compendium-note-tier { color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); }

.compendium-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }

.compendium-tag {
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.compendium-tag-avoided { color: #7ad19a; border-color: rgba(122,209,154,0.5); }
.compendium-tag-fired { color: #e08a8a; border-color: rgba(224,138,138,0.5); }
.compendium-tag-todo { color: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.12); }

.compendium-gallery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px dashed var(--gold-soft);
}

.compendium-gallery-label { font-family: var(--serif); color: var(--gold); font-size: 0.9rem; }
.compendium-back { margin-top: 1.4rem; }

/* 디버그 에셋 인스펙터 탭: 썸네일 + 사용처. 미사용 항목은 붉게 띄워 "만들고 연결 안 한 것"을
   서랍을 열자마자 눈에 걸리게 한다(자동 검사는 tests/content_audit.mjs). */
.debug-asset-grid { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }

.debug-asset-card {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.35rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.debug-asset-card.unused { border-color: rgba(224,138,138,0.55); background: rgba(224,138,138,0.08); }

.debug-asset-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 4px;
  object-fit: cover;
  object-position: top center;
  background: #1a1620;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  color: #8b8089;
  font-size: 0.62rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.debug-asset-play { font-size: 0.85rem; color: #d8b25c; }
.debug-asset-meta { min-width: 0; flex: 1 1 auto; }
.debug-asset-name { font-size: 0.72rem; color: #efe6ea; display: flex; align-items: center; gap: 0.3rem; }
.debug-asset-badge { font-size: 0.6rem; color: #ffd9df; background: #7a2f3d; border-radius: 999px; padding: 0.02rem 0.35rem; }
.debug-asset-where { font-size: 0.64rem; color: #8b8089; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debug-asset-card.reserved { border-color: rgba(216,178,92,0.45); background: rgba(216,178,92,0.07); }
.debug-asset-badge-hold { background: #6b5320; color: #f5e3b0; }
.debug-asset-card.reserved .debug-asset-where { white-space: normal; }

/* ---------------------------------------------------------------- */
/* 부록 4 §3a 상점 화면 — 패널이 아니라 장소.
   전용 BGM이 크로스페이드되는 곳은 화면이어야 한다(소리/그림 일치). 이벤트 화면과 같은
   문법: 풀블리드 배경 + 좌상단 장소 라벨 + 좌우 인물 + 하단 정보. */
/* ---------------------------------------------------------------- */
.shop-scene {
  max-width: none;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 0;
}

.shop-scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* 품목 글자가 배경 위에서 읽히도록 하단으로 갈수록 어두워지는 베일 */
.shop-scene-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,12,20,0.15) 0%, rgba(18,12,20,0.45) 45%, rgba(18,12,20,0.88) 100%);
}

.shop-scene-place { position: absolute; top: 1.1rem; left: 1.3rem; z-index: 3; }

.shop-scene-sera {
  position: absolute;
  bottom: 0;
  left: 2%;
  height: 82vh;
  width: auto;
  z-index: 1;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,0.45));
  /* portraitFadeIn은 translate(-50%)가 박혀 있어(중앙 정렬 요소 전용) left로 배치한 여기에
     쓰면 폭의 절반만큼 왼쪽으로 밀린다 — 실측 -185px. 전용 키프레임을 쓴다. */
  animation: shopFadeIn 0.4s ease-out;
}

@keyframes shopFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.shop-scene-merchant {
  position: absolute;
  /* 상인은 진열대 너머에 서 있으므로 살짝 뒤(작게)·아래로 물린다 — 세라와 같은 바닥선을
     공유하되 원근으로 한 걸음 뒤에 있는 것처럼 읽히게 한다. */
  bottom: -4vh;
  right: 1%;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  animation: shopFadeIn 0.4s ease-out;
}

/* 상인은 무릎 위 프레이밍이라 전신 스탠딩(82vh)과 같은 높이로 두면 머리가 훨씬 아래에 온다.
   같은 바닥에 선 것처럼 보이려면 더 크게 그려 무릎 아래를 화면 밖으로 흘려보내야 한다
   (유저 지적: 상인과 주인공의 카메라 거리가 달라 보인다). */
.shop-scene-merchant-img { height: 78vh; width: auto; filter: drop-shadow(0 16px 34px rgba(0,0,0,0.45)); }

/* 상인 에셋이 아직 없을 때 자리를 지키는 실루엣 — 구도가 비어 보이지 않게 한다. */
.shop-scene-merchant-ph {
  width: 190px;
  height: 56vh;
  border-radius: 110px 110px 0 0;
  background: repeating-linear-gradient(135deg, rgba(26,22,32,0.85), rgba(26,22,32,0.85) 10px, rgba(38,32,46,0.85) 10px, rgba(38,32,46,0.85) 20px);
  border: 1px solid var(--gold-soft);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1.2rem;
  color: rgba(255,255,255,0.45);
  font-family: var(--serif);
}

.shop-scene-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.2rem;
  z-index: 4;
  width: min(46rem, 84vw);
  max-height: 74vh;
  overflow-y: auto;
  padding: 0.9rem 1.1rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--gold-soft);
  background: rgba(20, 16, 26, 0.9);
  backdrop-filter: blur(3px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.45);
}

.shop-scene-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.shop-scene-title { font-family: var(--serif); color: var(--gold); font-size: 1.05rem; }
.shop-scene-money { font-size: 0.85rem; color: #f0c674; }

.shop-scene-line {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text);
  border-left: 2px solid var(--gold-soft);
  padding: 0.15rem 0 0.15rem 0.6rem;
  margin-bottom: 0.6rem;
}

.shop-scene-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }

.shop-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.55rem;
}

.shop-scene-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.7rem;
  border-radius: 9px;
  border: 1px solid rgba(216,178,92,0.28);
  background: rgba(255,255,255,0.04);
}

.shop-scene-card.disabled { opacity: 0.5; }
.shop-scene-card.equipped { border-color: var(--gold); background: rgba(216,178,92,0.14); }
.shop-scene-card-name { font-family: var(--serif); font-size: 0.9rem; color: var(--text); }
.shop-scene-card-price { font-size: 0.78rem; color: #f0c674; }
.shop-scene-card-desc { font-size: 0.72rem; color: rgba(255,255,255,0.6); line-height: 1.45; }
.shop-scene-card-state { font-size: 0.7rem; color: rgba(255,255,255,0.45); margin-top: 0.15rem; }
.shop-scene-buy { align-self: flex-start; margin-top: 0.3rem; }
.shop-scene-back { display: block; margin: 0.9rem auto 0; }
/* 부록 4 §3c 드레스 미리보기 토글 — 구매 버튼과 구분되게 테두리만 있는 보조 버튼 */
.shop-scene-preview {
  align-self: flex-start;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
}
.shop-scene-preview.active { background: rgba(216,178,92,0.22); }
/* 부록 4 §3b 상점 품목 아이콘 — 아이콘 + 이름/가격을 한 줄로 묶어 카드 높이를 줄인다 */
.shop-scene-card-head { display: flex; align-items: center; gap: 0.5rem; }
.shop-scene-card-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.shop-scene-card-nameWrap { min-width: 0; }