/* 엔딩 후 음성 Q&A — 크레딧/청첩장 톤(금빛·짙은 녹청)에 맞춤 */

.story-qa-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* ⚠ 2026-08-16 — 얼굴 판이 들어오면서 패널이 세로로 길어졌다. `place-items:center` 는
     넘칠 때 위를 잘라 버리고 **스크롤도 막는다**(마이크 버튼이 화면 밖으로 사라졌다).
     flex + `margin:auto` 는 가운데 정렬을 지키면서 넘칠 때만 스크롤을 내준다. */
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding:
    max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 28%, rgba(58, 72, 68, 0.96), rgba(9, 13, 14, 0.98) 72%);
  color: #f6efe0;
  font-family: "Noto Serif KR", "Nanum Myeongjo", "Batang", "AppleMyungjo", serif;
  animation: storyQaFadeIn 0.45s ease both;
}

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

.story-qa-panel {
  position: relative;
  margin: auto;
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 11px;
  padding: 24px 22px 30px;
}

.story-qa-close {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 248, 232, 0.72);
  background: transparent;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.story-qa-close:hover {
  color: #fff8e8;
}

.story-qa-kicker {
  margin: 8px 0 0;
  color: var(--gold, #dfbd79);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-family: system-ui, sans-serif;
}

.story-qa-title {
  margin: 0;
  color: #fff4e0;
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.45;
  word-break: keep-all;
}

.story-qa-lead {
  margin: 0;
  max-width: 32em;
  color: rgba(246, 239, 224, 0.68);
  font-size: 14px;
  line-height: 1.75;
  word-break: keep-all;
}

/* Live Face 3D 무대 (2026-08-16 복원). `memory/` 앱을 같은 출처 iframe 으로 얹는다.
   ⚠ 얼굴이 못 떠도 이 상자만 비고 아래 마이크 흐름은 그대로 살아야 한다 —
   그래서 높이를 상자에 고정하지 않고 `data-face-state` 로만 표정을 바꾼다. */
.story-qa-face {
  /* ⚠ 이 앱은 자기 화면을 390×844 설계 상자에 **고정**해 놓고 축소만 한다
     (memory 렌더러 resize(): designWidth 390 / designHeight 844, 좌상단 고정).
     그래서 상자에 그냥 100%로 채우면 왼쪽에 세로 띠 하나만 들어오고 오른쪽이 검게 남는다.
     iframe 을 설계 크기 그대로 두고, 우리가 얼굴 높이만큼 잘라 확대한다.
     --face-scale = 268 / 390. --face-crop = 잘라낼 윗머리 여백(설계 좌표 px). */
  --face-scale: 0.541; /* 211 / 390 */
  --face-crop: 128px;
  position: relative;
  width: 211px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  border: 1px solid rgba(231, 205, 153, 0.26);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(46, 58, 56, 0.9), rgba(10, 15, 16, 0.96));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 16px 40px rgba(0, 0, 0, 0.38);
}

.story-qa-face-frame {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 390px;
  height: 844px;
  border: 0;
  transform-origin: top left;
  transform: scale(var(--face-scale)) translateY(calc(var(--face-crop) * -1));
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none; /* 얼굴은 보는 것이다 — 탭은 아래 마이크 버튼 몫 */
}

.story-qa-face[data-face-state="ready"] .story-qa-face-frame {
  opacity: 1;
}

/* 불러오는 동안엔 빈 상자 대신 숨결 한 겹만 둔다. */
.story-qa-face[data-face-state="loading"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(223, 189, 121, 0.10), transparent 62%);
  animation: storyQaFaceBreath 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes storyQaFaceBreath {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

/* 얼굴을 못 불러온 경우 — 자리를 접고 음성만 남긴다. */
.story-qa-face[data-face-state="unavailable"] {
  display: none;
}

.story-qa-status {
  margin: 6px 0 4px;
  min-height: 1.5em;
  color: rgba(244, 221, 176, 0.88);
  font-family: system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.story-qa-status[data-state="listening"] {
  color: #f0d9a4;
}

.story-qa-status[data-state="answering"] {
  color: #e8c9b8;
}

.story-qa-status[data-state="error"] {
  color: rgba(255, 196, 180, 0.9);
}

.story-qa-mic {
  position: relative;
  width: 100px;
  height: 100px;
  margin-top: 4px;
  border: 1px solid rgba(231, 205, 153, 0.32);
  border-radius: 50%;
  color: #fff6e8;
  background:
    radial-gradient(circle at 50% 35%, rgba(55, 68, 64, 0.9), rgba(16, 22, 22, 0.96));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 14px 36px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 0;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.story-qa-mic:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.story-qa-mic:not(:disabled):hover {
  border-color: rgba(244, 221, 176, 0.55);
  transform: translateY(-1px);
}

.story-qa-mic.is-active {
  border-color: rgba(244, 221, 176, 0.72);
  box-shadow:
    0 0 0 1px rgba(244, 221, 176, 0.12) inset,
    0 0 28px rgba(223, 189, 121, 0.28),
    0 14px 36px rgba(0, 0, 0, 0.35);
}

.story-qa-mic-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(231, 205, 153, 0.18);
  opacity: 0;
  pointer-events: none;
}

.story-qa-mic.is-active .story-qa-mic-ring {
  opacity: 1;
  animation: storyQaPulse 1.6s ease-in-out infinite;
}

@keyframes storyQaPulse {
  0%, 100% { transform: scale(0.96); opacity: 0.35; }
  50% { transform: scale(1.06); opacity: 0.85; }
}

.story-qa-mic-icon {
  font-size: 28px;
  line-height: 1;
  filter: grayscale(0.15);
}

.story-qa-mic-label {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: rgba(255, 248, 232, 0.62);
  font-family: system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.story-qa-error {
  width: min(100%, 340px);
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(239, 216, 177, 0.28);
  border-radius: 14px;
  background: rgba(10, 15, 16, 0.92);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.story-qa-error[hidden] {
  display: none;
}

.story-qa-error p {
  margin: 0 0 12px;
  color: rgba(248, 239, 223, 0.88);
  font-family: system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  word-break: keep-all;
}

.story-qa-error-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.story-qa-error-actions button {
  flex: 1;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(231, 205, 153, 0.28);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  cursor: pointer;
}

.story-qa-error-actions button:first-child {
  color: #fff4e0;
  border-color: rgba(244, 221, 176, 0.42);
  background: rgba(255, 255, 255, 0.04);
}

/* 크레딧 진입 버튼 — restart-story 와 나란히 */
.story-qa-enter {
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 22px;
  border: 1px solid rgba(231, 205, 153, 0.38);
  border-radius: 999px;
  color: #fff4e0;
  /* ⚠ 2026-08-14 — 흰 채움 4%는 **밝은 배경 위에서 사라진다.** 크레딧 뒷벽이
     어두운 그라데이션이던 시절의 값이었는데, 뒷벽이 창빛 드는 예식 홀로 바뀌면서
     이 버튼만 혼자 지워졌다(형제 둘은 `game.css` 에서 어둠 채움을 받았다).
     ⚠ 배경 밝기에 기대는 채움은 배경이 바뀌면 조용히 깨진다 — 자기 대비를 갖게 한다. */
  background: rgba(6, 10, 11, 0.6); /* blur 제거 보상 — 2026-08-17 WebView 검은 판 결함, cinematic-v2 .menu-sheet 주석 */
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
  font-family: system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.story-qa-enter:hover {
  border-color: rgba(244, 221, 176, 0.55);
}