Spaces:

Junhoee
/

interactive-chat

Sleeping

File size: 30,258 Bytes

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>카르밀라 — 잠들지 않는 밤</title>
<style>
  :root {
    --ink: #0b0e14; --mist: #1a2233; --mist2: #232f47;
    --gold: #c9a86a; --gold-dim: #8a7448;
    --text: #d8d5cd; --text-dim: #8f8c85; --blood: #6e2233;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    background: radial-gradient(ellipse at 50% -20%, var(--mist) 0%, var(--ink) 62%);
    color: var(--text);
    font-family: "Noto Serif KR", "Apple SD Gothic Neo", serif;
    line-height: 1.95; letter-spacing: .01em;
    overflow-x: hidden;
  }

  /* ── 장소 배경 (비주얼 노벨) — 서버가 페이지마다 지정, 크로스페이드 ── */
  .bg-layer { position: fixed; inset: 0; z-index: -2; pointer-events: none;
              background-size: cover; background-position: center;
              opacity: 0; transition: opacity 1.6s ease;
              filter: brightness(.5) saturate(.85); }
  .bg-layer.show { opacity: .55; }
  #bg-dim { position: fixed; inset: 0; z-index: -1; pointer-events: none;
            background: linear-gradient(rgba(11,14,20,.3) 0%, rgba(11,14,20,.55) 45%,
                                        rgba(11,14,20,.82) 100%); }

  /* ── 진행 바 + 장 라벨 ── */
  #progress-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 40; }
  #progress-bar { height: 2px; width: 0%; background: linear-gradient(90deg, var(--gold-dim), var(--gold));
                  transition: width .8s ease; box-shadow: 0 0 6px rgba(201,168,106,.5); }
  #progress-label { position: fixed; top: 10px; right: 16px; color: var(--gold-dim);
                    font-size: .74rem; letter-spacing: .22em; opacity: .85; z-index: 40; }
  #chapter-label { position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
                   color: var(--gold-dim); font-size: .72rem; letter-spacing: .3em;
                   text-indent: .3em; opacity: .8; z-index: 40; white-space: nowrap; }

  /* ── 본문 — 화면 단위 읽기: 한 화면은 뷰포트 안에 들어간다 (스크롤 대신 페이지 넘김) ── */
  #stage { max-width: 680px; margin: 0 auto; padding: 54px 24px 96px;
           min-height: 100%; position: relative; }
  #page-measure { position: absolute; left: 24px; right: 24px; top: 54px;
                  visibility: hidden; pointer-events: none; }
  .prose { margin: 0 0 1.6em; font-size: 1.02rem; text-align: justify;
           word-break: keep-all; white-space: pre-line; }
  .center-line { text-align: center; color: var(--gold); font-size: 1.12rem;
                 margin: 2.4em 0; line-height: 2.1; word-break: keep-all; }
  .center-line::before { content: "❝ "; color: var(--gold-dim); }
  .center-line::after  { content: " ❞"; color: var(--gold-dim); }
  /* ── 캐릭터 발화 — 서사 속 발화는 컴팩트: 좌 화자명 · 우 대사 (책의 흐름) ── */
  .char-line { margin: 1.2em 0; padding-left: 1em; border-left: 2px solid var(--gold-dim);
               color: #cfc4ad; word-break: keep-all; }
  .char-line .spk { color: var(--gold-dim); font-size: .85rem; margin-right: .6em; }

  /* ── VN 스테이지 — 선택지·채팅이 있는 페이지: 초상이 프레임을 채우고
        하단 패널에 이름표·대사·선택지가 겹쳐 얹힘 (참고: 플래이 이미지/7.png) ── */
  .vn-stage { position: relative; margin: 1.2em auto 0; height: min(76vh, 860px);
              overflow: hidden; border: 1px solid rgba(201,168,106,.28);
              box-shadow: 0 0 80px rgba(0,0,0,.9); }
  .vn-stage-art { position: absolute; inset: 0; width: 100%; height: 100%;
                  object-fit: cover; object-position: top center; }
  .vn-stage::after { content: ""; position: absolute; inset: 0;
                     background: linear-gradient(rgba(11,14,20,.1) 0%, transparent 20%,
                                                 transparent 46%, rgba(11,14,20,.9) 88%); }
  .vn-stage-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
                    padding: 0 14px 14px; }
  /* 사각 말풍선 — 좌측 화자명 · 우측 대사 */
  .vn-box { display: flex; gap: 14px; align-items: flex-start; text-align: left;
            background: rgba(11,14,20,.82); border: 1px solid rgba(201,168,106,.45);
            border-radius: 2px; padding: 14px 18px; animation: fadein .5s ease both; }
  .vn-box .spk { flex: 0 0 auto; color: var(--gold); font-size: .88rem;
                 letter-spacing: .1em; padding-top: 3px; max-width: 7em;
                 word-break: keep-all; }
  .vn-box .lines { flex: 1; min-width: 0; }
  .vn-box .vn-line { font-size: 1rem; color: #e5dfd2; line-height: 1.9;
                     word-break: keep-all; margin: .2em 0; }
  .vn-box.narr .vn-line { color: var(--text-dim); font-style: normal; }  /* 지문 전환 단계 */
  .vn-stage-panel #choice-area { margin: 12px auto 0; max-width: 470px; }
  .vn-stage-panel #choice-area button { padding: 12px 10px; background: rgba(11,14,20,.45); }
  .stage-dir { color: var(--text-dim); font-style: italic; font-size: .92rem;
               text-align: center; margin: 1.4em 0; }
  .result-block { margin: 1.6em 0; padding: 1em 1.2em; background: rgba(201,168,106,.05);
                  border: 1px solid rgba(201,168,106,.18); border-radius: 2px;
                  white-space: pre-line; word-break: keep-all; }
  .fade { animation: fadein 1.1s ease both; }
  @keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

  /* ── 선택지: 대화하듯 — › 마커 + 가는 구분선 리스트 (참고: 플래이 이미지/7.png) ── */
  #choice-area { margin: 8vh auto 0; max-width: 520px; display: flex;
                 flex-direction: column; gap: 0; }
  #choice-area button { background: transparent; border: none; border-radius: 0;
                        border-top: 1px solid rgba(201,168,106,.22);
                        text-align: left; padding: 17px 12px; font-size: 1rem; }
  #choice-area button:last-child { border-bottom: 1px solid rgba(201,168,106,.22); }
  #choice-area button::before { content: "›"; color: var(--gold-dim);
                                margin-right: .8em; font-size: 1.05rem; }
  #choice-area button:hover { color: var(--gold); background: rgba(201,168,106,.06); }
  #choice-area button.chat-open { border-style: solid; }
  button {
    font-family: inherit; font-size: .98rem; cursor: pointer; word-break: keep-all;
    background: rgba(26,34,51,.85); color: var(--text);
    border: 1px solid rgba(201,168,106,.35); border-radius: 2px;
    padding: 13px 22px; text-align: center; transition: all .25s;
  }
  button:hover { border-color: var(--gold); color: var(--gold); background: var(--mist2); }
  button:disabled { opacity: .4; cursor: wait; }
  button.chat-open { font-style: italic; color: var(--gold-dim);
                     background: transparent; border-style: dashed; }
  @keyframes nudge { 0%,100% { transform: none; } 30% { transform: translateX(-4px); }
                     60% { transform: translateX(4px); } }
  .nudge { animation: nudge .4s ease; }

  /* ── 좌/우 내비 존 ── */
  .nav-zone { position: fixed; top: 0; bottom: 0; width: 26%; z-index: 5; cursor: pointer; }
  #nav-left { left: 0; } #nav-right { right: 0; width: 40%; }
  .nav-hint { position: fixed; bottom: 18px; color: var(--gold-dim); font-size: .72rem;
              letter-spacing: .2em; opacity: 0; transition: opacity .6s; z-index: 6;
              pointer-events: none; }
  #hint-left { left: 18px; } #hint-right { right: 18px; }
  body.show-hints .nav-hint { opacity: .6; }
  #browse-ribbon { position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
                   color: var(--text-dim); font-size: .76rem; letter-spacing: .2em;
                   border: 1px solid rgba(201,168,106,.25); padding: 4px 14px;
                   background: rgba(11,14,20,.85); border-radius: 2px; z-index: 41; display: none; }
  body.browsing #browse-ribbon { display: block; }
  body.browsing #choice-area { pointer-events: none; opacity: .45; }

  /* ── 채팅 (하단 드로어 유지) ── */
  #chat-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
               background: linear-gradient(transparent, var(--ink) 30%);
               padding: 46px 24px 24px; display: none; }
  #chat-wrap.open { display: block; }
  .chat-inner { max-width: 680px; margin: 0 auto; }
  #chat-log { max-height: 40vh; overflow-y: auto; margin-bottom: 12px;
              border-top: 1px solid rgba(201,168,106,.25); padding-top: 12px; }
  .msg { margin: .7em 0; word-break: keep-all; }
  .msg.laura { text-align: right; color: var(--text-dim); }
  .msg.laura::before { content: "나 — "; font-size: .8rem; color: var(--gold-dim); }
  .msg.carmilla { color: #cfc4ad; }
  .msg.carmilla::before { content: "카르밀라 — "; font-size: .8rem; color: var(--gold); }
  .msg.system { text-align: center; color: var(--text-dim); font-style: italic; font-size: .88rem; }
  #chat-input-row { display: flex; gap: 8px; }
  #chat-input { flex: 1; background: var(--mist); color: var(--text);
                border: 1px solid rgba(201,168,106,.35); border-radius: 2px;
                padding: 11px 14px; font-family: inherit; font-size: .96rem; }
  #chat-input:focus { outline: none; border-color: var(--gold); }

  /* ── 표지·엔딩 ──
     원본(1086×1448)을 화면에 cover로 늘리면 해상도가 깨진다 —
     블러 백드롭 + 원본 크기 이하로만 선명하게 중앙 배치 (인트로도 동일 기법) */
  #cover { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
           align-items: center; justify-content: flex-end; padding-bottom: 9vh;
           background: var(--ink); overflow: hidden; }
  #cover-blur { position: absolute; inset: -48px; background-size: cover;
                background-position: center 20%; filter: blur(30px) brightness(.45); }
  #cover-art { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
               max-width: min(92vw, 1086px); max-height: min(84vh, 1448px);
               box-shadow: 0 0 90px rgba(0,0,0,.85);
               border: 1px solid rgba(201,168,106,.2); }
  #cover::after { content: ""; position: absolute; inset: 0; z-index: 1;
                  background: linear-gradient(transparent 55%, rgba(11,14,20,.9)); }
  #cover button { position: relative; z-index: 2; padding: 14px 52px;
                  background: rgba(11,14,20,.75); font-size: 1.02rem;
                  letter-spacing: .3em; text-indent: .3em; }

  /* ── 인트로 시퀀스 (작품 소개 → 인물 소개 → 1장 시작) ── */
  #intro { position: fixed; inset: 0; z-index: 68; background: var(--ink);
           display: none; align-items: center; justify-content: center;
           cursor: pointer; overflow: hidden; }
  #intro.open { display: flex; }
  #intro-blur { position: absolute; inset: -48px; background-size: cover;
                background-position: center; filter: blur(30px) brightness(.4); }
  #intro-art { position: relative; max-width: min(94vw, 1086px); max-height: min(92vh, 1491px);
               object-fit: contain; box-shadow: 0 0 90px rgba(0,0,0,.85);
               border: 1px solid rgba(201,168,106,.2); animation: fadein 1s ease both; }
  #intro-hint { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
                color: var(--text-dim); font-size: .72rem; letter-spacing: .25em;
                animation: fadein 1.6s ease both 1s; }
  .ending { text-align: center; }
  .ending h2 { color: var(--gold); letter-spacing: .25em; margin: 20vh 0 1.4em; font-weight: 500; }
  .ending p { color: var(--text-dim); }
  .ending button { margin: 3.5em auto 0; display: block; }
</style>
</head>
<body>
<div class="bg-layer" id="bgA"></div>
<div class="bg-layer" id="bgB"></div>
<div id="bg-dim"></div>

<div id="progress-wrap"><div id="progress-bar"></div></div>
<div id="progress-label"></div>
<div id="chapter-label"></div>
<div id="browse-ribbon">지나온 페이지 — 오른쪽을 눌러 지금으로</div>

<div id="cover">
  <div id="cover-blur"></div>
  <img id="cover-art" alt="카르밀라 표지">
  <button onclick="start()" id="start-btn">밤을 연다</button>
</div>

<div id="intro">
  <div id="intro-blur"></div>
  <img id="intro-art" alt="">
  <div id="intro-hint">— 눌러서 계속 —</div>
</div>

<div id="stage"><div id="page"></div><div id="page-measure" aria-hidden="true"></div></div>

<div id="nav-left"  class="nav-zone" title="이전"></div>
<div id="nav-right" class="nav-zone" title="다음"></div>
<div id="hint-left"  class="nav-hint">◂ 이전</div>
<div id="hint-right" class="nav-hint">다음 ▸</div>

<div id="chat-wrap">
  <div class="chat-inner">
    <div id="chat-log"></div>
    <div id="chat-input-row">
      <input id="chat-input" placeholder="그녀에게 하고 싶은 말…" autocomplete="off">
      <button onclick="sendChat()" id="chat-send">말한다</button>
      <button onclick="endChat()" id="chat-end" title="대화를 접는다">…그만</button>
    </div>
  </div>
</div>

<script>
let SID = null, STEP = null, busy = false;
let history = [], cursor = -1;      // 뷰 히스토리 — {html, progress, ep, bg} (읽기 전용 되돌아보기)
let pendingStep = null;             // 다음 넘김에 표시할 step (선택 결과 뒤 · 연출 컷 뒤 본문)
let pendingScreens = [];            // 현재 서버 페이지의 남은 화면들 (뷰포트 분할분)
let chatOpen = false;

const $ = (id) => document.getElementById(id);
const esc = (s) => (s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;');
const api = async (path, body) => {
  const res = await fetch('/api' + path, {
    method: body === undefined ? 'GET' : 'POST',
    headers: {'Content-Type': 'application/json'},
    body: body === undefined ? undefined : JSON.stringify(body || {}),
  });
  if (!res.ok) throw new Error((await res.json()).detail || res.status);
  return res.json();
};

/* ── 시작 ── */
let RESUME = null;                  // {sid, step} — 저장된 세션 복원분
let INTRO = [];                     // 인트로 시퀀스 이미지 (새 시작에만, 서버 /meta)
(async () => {
  try {
    const m = await api('/meta');
    $('cover-blur').style.backgroundImage = `url("${encodeURI(m.cover_image)}")`;
    $('cover-art').src = encodeURI(m.cover_image);
    INTRO = m.intro_images || [];
  } catch (e) {}
  const saved = localStorage.getItem('carmilla_sid');
  if (saved) {
    try {
      const d = await api(`/session/${saved}`);
      RESUME = {sid: saved, step: d.step};
      $('start-btn').textContent = '밤을 잇는다';   // 이어 읽기
    } catch (e) {
      localStorage.removeItem('carmilla_sid');       // 만료·콘텐츠 갱신 → 새로 시작
    }
  }
})();

async function start() {
  $('start-btn').disabled = true;
  let step;
  const fresh = !RESUME;
  if (RESUME) {
    SID = RESUME.sid; step = RESUME.step;
  } else {
    const data = await api('/session', {});
    SID = data.session_id;
    localStorage.setItem('carmilla_sid', SID);
    step = data.step;
  }
  $('cover').remove();
  if (fresh && INTRO.length) return showIntro(0, step);  // 새 시작에만 인트로
  beginReading(step);
}

function beginReading(step) {
  document.body.classList.add('show-hints');
  setTimeout(() => document.body.classList.remove('show-hints'), 5000);
  showStep(step, true);
}

function showIntro(i, step) {       // 작품 소개 → 인물 소개 → 1장 시작 → 본문
  const el = $('intro');
  $('intro-blur').style.backgroundImage = `url("${encodeURI(INTRO[i])}")`;
  $('intro-art').src = encodeURI(INTRO[i]);
  el.classList.add('open');
  el.onclick = () => {
    if (i + 1 < INTRO.length) showIntro(i + 1, step);
    else { el.classList.remove('open'); el.onclick = null; beginReading(step); }
  };
}

/* ── 장소 배경 (크로스페이드) ── */
let bgFlip = false, bgCurrent = null;
function setBackground(url) {
  if ((url || null) === bgCurrent) return;
  bgCurrent = url || null;
  const nxt = $(bgFlip ? 'bgA' : 'bgB'), prv = $(bgFlip ? 'bgB' : 'bgA');
  bgFlip = !bgFlip;
  if (url) { nxt.style.backgroundImage = `url("${encodeURI(url)}")`; nxt.classList.add('show'); }
  else nxt.classList.remove('show');
  prv.classList.remove('show');
}

/* ── 렌더 ── */
const PLAYER_SPEAKERS = new Set(['유저', '로라', '나']);   // 1인칭 — 초상 없이 오른쪽 정렬

function block(b) {
  if (b.type === 'dialogue_center') return `<div class="center-line fade">${esc(b.text)}</div>`;
  if (b.type === 'stage_direction') return `<div class="stage-dir fade">( ${esc(b.text)} )</div>`;
  return `<div class="prose fade">${esc(b.text)}</div>`;
}

function charLines(g) {             // 서사 속 발화 — 좌 화자명 · 우 대사 (책의 흐름)
  const name = PLAYER_SPEAKERS.has(g.spk) ? '나' : g.spk;
  return g.lines.map(t =>
    `<div class="char-line fade"><span class="spk">${esc(name)}</span>“${esc(t)}”</div>`).join('');
}

function speechBox(name, lines, mode) { // 사각 말풍선: 좌 화자명 · 우 대사. mode: speech|narr|center
  let h = `<div class="vn-box${mode === 'narr' ? ' narr' : ''}">`;
  if (name) h += `<span class="spk">${esc(name)}</span>`;
  h += `<div class="lines">`;
  for (const t of lines)
    h += `<div class="vn-line">${mode === 'narr' ? esc(t) : '“' + esc(t) + '”'}</div>`;
  return h + `</div></div>`;
}

function stageScreen(art, alt, boxHtml, choices) { // 전면 이미지 + 말풍선 (+선택지)
  return `<div class="vn-stage">` +
         `<img class="vn-stage-art" src="${encodeURI(art)}" alt="${esc(alt)}">` +
         `<div class="vn-stage-panel">${boxHtml}` +
         `<div id="choice-area">${choices}</div></div></div>`;
}

function groupToStep(g) {           // 스테이지 탑승 그룹 → 말풍선 단계
  if (g.lines)
    return {mode: 'speech', name: PLAYER_SPEAKERS.has(g.spk) ? '나' : g.spk, lines: g.lines};
  if (g.block.type === 'dialogue_center')
    return {mode: 'center', name: null, lines: [g.block.text]};
  return {mode: 'narr', name: null, lines: [g.block.text]};
}

function groupNarration(blocks) {
  // 연속된 같은 화자의 발화는 한 그룹으로. card = 소속 카드 (스테이지 탑승 경계)
  const groups = [];
  for (let i = 0; i < blocks.length;) {
    const b = blocks[i];
    if (b.type !== 'character_dialogue') { groups.push({card: b.card, block: b}); i++; continue; }
    const spk = b.speaker, lines = [];
    let portrait = null;
    while (i < blocks.length && blocks[i].type === 'character_dialogue'
           && blocks[i].speaker === spk) {
      lines.push(blocks[i].text);
      portrait = portrait || blocks[i].portrait;
      i++;
    }
    groups.push({card: b.card, spk, portrait, lines});
  }
  return groups;
}

/* 서버 페이지 → 화면들 {html, prog} (스크롤 없는 넘김).
   화(話) 표기는 상단 중앙 상시 라벨이 담당 — 본문 헤더는 넣지 않는다.
   - 초상 화자(카르밀라·아버지)의 발화 = 전면 스테이지. 같은 카드 안의 후속 지문·
     무초상 발화·중앙 대사는 그 이미지 위 말풍선 단계로 탑승 (원문 순서 보존)
   - 직전의 짧은 리드인(role=lead_in, 같은 카드)은 스테이지의 첫 단계(지문 박스)로
   - 마지막 장면이 스테이지면 선택지는 최종 단계에, 아니면 텍스트 화면 하단에
   - 텍스트는 세그먼트별 실측 균형 분할로 화면을 최대한 채운다 */
function buildScreens(step) {
  const groups = groupNarration(step.narration);
  const choices = choicesHtml(step);
  const isP = (g) => g.lines && g.portrait && !PLAYER_SPEAKERS.has(g.spk);

  // 1) 장면 조립: text(그룹 나열) | stage(초상 + 말풍선 단계들)
  const scenes = [];
  for (let i = 0; i < groups.length;) {
    const g = groups[i];
    if (!isP(g)) {
      let last = scenes[scenes.length - 1];
      if (!last || last.type !== 'text') { last = {type: 'text', groups: []}; scenes.push(last); }
      last.groups.push(g); i++;
      continue;
    }
    const steps = [];
    // 리드인 → 첫 단계로 이동. 단, 리드인이 앞 텍스트 장면의 "유일한" 내용일 때만 —
    // 앞에 다른 지문이 있으면 그 흐름에 합쳐 두는 게 자연스럽다 (고아 화면일 때만 구제)
    const prev = scenes[scenes.length - 1];
    if (prev && prev.type === 'text' && prev.groups.length === 1) {
      const lg = prev.groups[0];
      if (lg.block && lg.block.role === 'lead_in' && lg.card === g.card) {
        scenes.pop();
        steps.push({mode: 'narr', name: null, lines: [lg.block.text]});
      }
    }
    steps.push({mode: 'speech', name: g.spk, lines: g.lines});
    i++;
    while (i < groups.length && !isP(groups[i]) && groups[i].card === g.card) {
      steps.push(groupToStep(groups[i]));            // 같은 카드 — 이미지에 탑승
      i++;
    }
    scenes.push({type: 'stage', g, steps});
  }

  // 2) 렌더: 텍스트 균형 분할 + 스테이지 단계 화면
  const meas = $('page-measure');
  const budget = Math.max((window.innerHeight || 900) - 130, 320);
  const measure = (html) => { meas.innerHTML = html; return meas.offsetHeight; };
  const screens = [];
  const flushSeg = (seg) => {
    if (!seg.length) return;
    const total = seg.reduce((s, u) => s + u.h, 0);
    const k = Math.max(1, Math.ceil(total / budget));
    const target = total / k;
    let cur = '', acc = 0, cuts = 0;
    seg.forEach((u, i) => {
      cur += u.html; acc += u.h;
      const remainUnits = seg.length - i - 1;
      const remainCuts = (k - 1) - cuts;
      if (cuts < k - 1 && remainUnits > 0) {
        const boundary = target * (cuts + 1);
        const nextAcc = acc + seg[i + 1].h;
        if (Math.abs(acc - boundary) <= Math.abs(nextAcc - boundary)
            || remainUnits === remainCuts) {
          screens.push(cur); cur = ''; cuts++;
        }
      }
    });
    if (cur) screens.push(cur);
  };

  const lastScene = scenes[scenes.length - 1];
  scenes.forEach((sc) => {
    if (sc.type === 'stage') {
      sc.steps.forEach((s, si) => {
        const withChoices = (sc === lastScene && si === sc.steps.length - 1) ? choices : '';
        screens.push(stageScreen(sc.g.portrait, sc.g.spk,
                                 speechBox(s.name, s.lines, s.mode), withChoices));
      });
    } else {
      const seg = sc.groups.map((g) => {
        const html = g.lines ? charLines(g) : block(g.block);
        return {html, h: measure(html)};
      });
      if (sc === lastScene && choices) {
        const area = `<div id="choice-area">${choices}</div>`;
        seg.push({html: area, h: measure(area)});
      }
      flushSeg(seg);
    }
  });
  meas.innerHTML = '';

  if (!screens.length) screens.push('');
  return screens.map((html) => ({html, prog: step.progress}));
}

/* 연출 컷(이미지 카드) → 캔버스 화면들: 이미지 위 지문·발화 말풍선 단계 → 선택지.
   단독 캡션 화면은 두지 않는다 (같은 이미지가 바로 캔버스로 이어지므로 군더더기) */
function buildCutScreens(step) {
  const steps = groupNarration(step.narration).map(groupToStep);
  const choices = choicesHtml(step);
  if (!steps.length) steps.push({mode: 'narr', name: null, lines: []});
  return steps.map((s, i) => ({
    html: stageScreen(step.image, step.card.title,
                      s.lines.length ? speechBox(s.name, s.lines, s.mode) : '',
                      i === steps.length - 1 ? choices : ''),
    prog: step.progress,
  }));
}

function choicesHtml(step) {
  let h = step.choices.map((ch, i) =>
    `<button onclick="choose(${i})">${esc(ch.label)}</button>`).join('');
  if (step.can_chat)
    h += `<button class="chat-open" onclick="openChat()">…선택하기 전에, 그녀에게 말을 건다</button>`;
  return h;
}

function setProgress(p, epLabel) {
  if (!p) return;
  $('progress-bar').style.width = (p.index / p.total * 100).toFixed(1) + '%';
  $('progress-label').textContent = `${p.index} / ${p.total}`;
  $('chapter-label').textContent = epLabel || '';   // 현재 장(話) — 상단 중앙 상시 표시
}

function showStep(step, fresh) {
  STEP = step; pendingStep = null; pendingScreens = [];
  if (step.ending) return renderEnding(step.ending);
  const screens = step.image ? buildCutScreens(step) : buildScreens(step);
  const first = screens.shift();
  pushEntry(first.html, first.prog, step.card.episode_title, step.background);
  pendingScreens = screens;           // 나머지는 페이지 넘김으로
}

function pushEntry(html, progress, ep, bg) {
  $('page').innerHTML = html;
  history.push({html, progress, ep, bg});
  cursor = history.length - 1;
  document.body.classList.remove('browsing');
  setProgress(progress, ep);
  setBackground(bg);
  window.scrollTo({top: 0});
}

function renderEntry(i) {
  const h = history[i];
  $('page').innerHTML = h.html;
  document.body.classList.toggle('browsing', i < history.length - 1);
  setProgress(h.progress, h.ep);
  setBackground(h.bg);
  window.scrollTo({top: 0});
}

/* ── 내비게이션 (좌/우 클릭) ── */
$('nav-right').onclick = () => go(+1);
$('nav-left').onclick = () => go(-1);
document.addEventListener('keydown', (e) => {
  if (chatOpen) return;
  const intro = $('intro');
  if (intro && intro.classList.contains('open')) {   // 인트로 중 — →/스페이스로 넘김
    if ((e.key === 'ArrowRight' || e.key === ' ' || e.key === 'Enter') && intro.onclick)
      intro.onclick();
    return;
  }
  if (e.key === 'ArrowRight' || e.key === ' ') go(+1);
  if (e.key === 'ArrowLeft') go(-1);
});

async function go(dir) {
  if (busy || chatOpen || !SID || !STEP
      || STEP.ending && cursor >= history.length - 1 && dir > 0) return;
  if (dir < 0) {                                   // 과거 페이지 훑어보기 (읽기 전용)
    if (cursor <= 0) return;
    cursor--;
    renderEntry(cursor);
    return;
  }
  if (cursor < history.length - 1) {               // 현재로 복귀
    cursor++;
    renderEntry(cursor);
    return;
  }
  if (pendingScreens.length) {                     // 같은 서버 페이지의 다음 화면
    const s = pendingScreens.shift();
    pushEntry(s.html, s.prog, STEP.card.episode_title, STEP.background);
    return;
  }
  if (pendingStep) {                               // 선택 결과 확인 후 다음 장
    const s = pendingStep; pendingStep = null;
    showStep(s);
    return;
  }
  if (STEP.choices.length) {                       // 선택이 필요한 페이지
    const area = $('choice-area');
    if (area) { area.classList.remove('nudge'); void area.offsetWidth; area.classList.add('nudge'); }
    return;
  }
  busy = true;
  try { showStep((await api(`/session/${SID}/advance`, {})).step); }
  finally { busy = false; }
}

/* ── 선택 ── */
async function choose(i) {
  if (busy || document.body.classList.contains('browsing')) return;
  busy = true;
  try {
    const data = await api(`/session/${SID}/choose`, {index: i});
    if (data.picked.result) {
      $('choice-area').outerHTML =
        `<div class="result-block fade">${esc(data.picked.result)}</div>`;
      history[cursor].html = $('page').innerHTML;   // 스냅샷 갱신 (선택 반영)
      pendingStep = data.step;                       // 우측 클릭으로 다음 장
      document.body.classList.add('show-hints');
      setTimeout(() => document.body.classList.remove('show-hints'), 2500);
    } else {
      showStep(data.step);
    }
  } finally { busy = false; }
}

/* ── 포켓 채팅 ── */
async function openChat() {
  if (document.body.classList.contains('browsing')) return;
  await api(`/session/${SID}/pocket/open`, {});
  chatOpen = true;
  $('chat-wrap').classList.add('open');
  $('chat-log').innerHTML = '';
  addMsg('system', '그녀가 고요히 이쪽을 바라본다.');
  $('chat-input').focus();
}

function addMsg(who, text) {
  $('chat-log').insertAdjacentHTML('beforeend', `<div class="msg ${who} fade">${esc(text)}</div>`);
  $('chat-log').scrollTop = $('chat-log').scrollHeight;
}

async function sendChat() {
  const input = $('chat-input');
  const text = input.value.trim();
  if (!text || busy) return;
  busy = true; input.value = '';
  addMsg('laura', text);
  addMsg('system', '…');
  const typing = $('chat-log').lastElementChild;
  $('chat-send').disabled = true;
  try {
    const t = await api(`/session/${SID}/pocket/turn`, {text});
    typing.remove();
    addMsg('carmilla', t.reply);
    if (t.converged) {
      setTimeout(() => addMsg('system', '…장면이 조용히 다음으로 기운다.'), 1200);
      setTimeout(() => closeChatUI(), 3400);        // 답변을 읽을 여운을 준다
    }
  } catch (e) {
    typing.remove();
    addMsg('system', '(밤바람이 말을 삼켰다 — 다시 시도)');
  } finally { $('chat-send').disabled = false; busy = false; }
}

async function endChat() {                           // 유저가 먼저 접기
  if (busy) return;
  await api(`/session/${SID}/pocket/close`, {});
  closeChatUI();
}

function closeChatUI() {
  chatOpen = false;
  $('chat-wrap').classList.remove('open');
}

$('chat-input').addEventListener('keydown', (e) => { if (e.key === 'Enter') sendChat(); });

/* ── 엔딩 ── */
function renderEnding(end) {
  setProgress(STEP.progress, '');
  $('progress-label').textContent = '';
  setBackground(null);               // 엔딩 — 배경을 걷고 정적으로
  $('page').innerHTML = `<div class="ending fade">
    <h2>${esc(end.label)}</h2><p>${esc(end.description)}</p>
    <button onclick="restart()">다시, 처음의 밤으로</button></div>`;
  history.push({html: $('page').innerHTML, progress: STEP.progress, ep: '', bg: null});
  cursor = history.length - 1;
}

function restart() {                 // 엔딩 후 재시작 — 저장 세션을 버리고 처음부터
  localStorage.removeItem('carmilla_sid');
  location.reload();
}
</script>
</body>
</html>