/* 대화 엔진 — 두 보기의 모양 (전체계획 #19 · 02_개발팀)
 *
 * 숫자의 출처는 두 곳뿐이다. 이 파일이 새로 고른 값은 없다.
 *   03_디자인팀\산출물\2026-08-20_M14-2_재기_배치계약.md §2   — 스테이지 34evh · 스프라이트 46vw ·
 *                                                              얼굴중심 x68vw/y40% · 말풍선 left16px/max 50vw
 *   07_기획팀\산출물\NPC대화명세.md §3-1 · §3-4               — 전환 버튼 44×44 · 크로스페이드 150ms
 * 값 자체는 dialogue.js 가 CSS 변수로 넣어 준다(--npc-* / --view-fade-ms) — 두 벌로 적지 않는다.
 * 색·라운드·그림자는 reading.css 토큰을 그대로 쓴다(계약 §2-4 [스타일] — 새 시각 언어를 만들지 않는다).
 */

/* ── 전환 버튼 (명세 §3-1) ────────────────────────────────────────────────
   흐름 안에 둔다 — 은화 배지가 fixed 라 버튼까지 fixed 면 둘 다 자기 자리를 모른다.
   order:-1 은 .back 과 같은 값이라 헤더 1행에 나란히 선다(reading.css:44 의 방법 그대로). */
.view-toggle{
  order:-1; flex-shrink:0;
  min-width:44px; min-height:44px; width:44px; height:44px;
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; margin:0;
  border:1px solid var(--border); border-radius:12px;
  background:var(--card); color:var(--text);
  font-size:1.05rem; line-height:1; cursor:pointer; font-family:inherit;
}
/*  ★ [hidden] 은 UA 스타일시트라 클래스 선택자(.view-toggle 의 display:inline-flex)에 진다.
    NPC 원화가 없는 화면에서 전환 버튼을 감추려면 이 한 줄이 있어야 한다(2026-08-22). */
.view-toggle[hidden]{ display:none; }
.view-toggle:hover{ border-color:var(--accent); }
.view-toggle:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; }

/* ── 두 보기 중 하나만 보인다 (명세 §2-1 — 씬이 아니라 보기다) ───────────── */
#npc-view{ display:none; }
body.view-npc #npc-view{ display:flex; flex-direction:column; flex:1; min-height:0; }
body.view-npc #chat{ display:none; }
body.view-chat #npc-view{ display:none; }

/* ── NPC 스테이지 (계약 §2-2) ────────────────────────────────────────────
   높이는 [유효 높이]의 34% 다. 유효 높이 = 100dvh − 배너(reading.css 의 body padding 방식과 같은 근거). */
.npc-stage{
  position:relative;
  height:calc((100dvh - var(--banner-ad-height, 0px)) * 0.34);
  flex:0 0 auto;
  overflow:visible;
}

/* ── 스프라이트 (계약 §2-3) — 우측 정렬 · 하단 = 스테이지 하단 · 폭 46vw ── */
.npc-sprite{
  position:absolute; right:0; bottom:0;
  width:var(--npc-sprite-w, 46vw); height:100%;
  object-fit:contain; object-position:bottom right;
  pointer-events:none;
}

/* ── 말풍선 (계약 §2-4) — left 16px · max 50vw · 얼굴 중심과 수평 정렬 ──── */
.npc-bubble{
  position:absolute;
  left:var(--npc-bubble-left, 16px);
  top:var(--npc-face-y, 40%);
  transform:translateY(-50%);
  max-width:var(--npc-bubble-max, 50vw);
  padding:12px 14px;
  background:var(--bubble-bot); border:1px solid var(--border);
  border-radius:16px; border-bottom-right-radius:4px;   /* 꼬리 쪽(우측 = NPC 얼굴)만 4px */
  box-shadow:var(--shadow);
  font-size:.92rem; line-height:1.55;
}
.npc-bubble.empty{ display:none; }
.npc-bubble-text{ white-space:pre-wrap; }
.npc-past{
  display:block; margin:0 0 6px; padding:0;
  background:none; border:none; min-height:0;
  color:var(--muted); font-size:.72rem; font-family:inherit;
  text-decoration:underline; cursor:pointer;
}
.npc-past[hidden]{ display:none; }

/* ── 남는 자리 — 여기가 flex:1 이라 입력창이 두 보기에서 같은 자리에 선다(검증 11) ── */
.npc-rest{
  flex:1; min-height:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  max-width:520px; width:100%; margin:0 auto;
  padding:0 16px 8px;
}
/* 선택지는 A 에서 입력창 바로 위에 고정된다(명세 §3-5) */
.npc-choice-slot:empty{ display:none; }

/* ── 보기 전환 크로스페이드 (명세 §3-4 · 150ms) ─────────────────────────
   슬라이드·씬 전환 연출을 쓰지 않는다 — 같은 화면의 보기 전환이지 다른 화면으로 가는 것이 아니다. */
.view-fade{ animation:view-fade-in var(--view-fade-ms, 150ms) ease; }
@keyframes view-fade-in{ from{ opacity:0; } to{ opacity:1; } }

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