Spaces:

Junhoee
/

interactive-chat

Sleeping

App Files Files Community

interactive-chat / web /index.html

Junhoee

Upload 140 files

c609294 verified about 1 month ago

Raw

History Blame Contribute Delete

30.3 kB

	<!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,'&').replace(/</g,'<');
	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>