Upload 57 files

engine/schemas/chapter.py

@@ -49,7 +49,8 @@ class Chapter(BaseModel):
     canon_rules: list[str] = Field(default_factory=list)
     r_cards: list[RCardRef] = Field(default_factory=list)
     pocket_max_turns: int = 6  # 개입 포켓 자유채팅 턴 상한 (강제 수렴)
-    page_target_chars: int = 500  # 페이지 병합 목표 글자 수 (넘으면 다음 카드부터 새 페이지)
+    page_target_chars: int = 850  # 페이지 병합 목표 글자 수 — 텍스트 화면을 가득 채우는 기준
+    # (프론트가 뷰포트 실측으로 다시 화면 분할하므로, 크게 잡을수록 화면이 알차게 채워진다)
 
 
 class ChapterFile(BaseModel):

web/index.html

@@ -67,29 +67,26 @@
   .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.with-lead { height: min(62vh, 720px); }  /* 리드인 지문이 위에 붙는 화면 */
   .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,.12) 0%, transparent 22%,
-                                                 transparent 40%, rgba(11,14,20,.96) 82%); }
+                     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 22px 20px; text-align: center; }
-  .vn-stage-panel .vn-line { font-size: 1.02rem; line-height: 1.9; margin: .3em 0;
-                             text-shadow: 0 1px 8px rgba(0,0,0,.9); }
-  .vn-stage-panel #choice-area { margin: 14px auto 0; max-width: 470px; }
-  .vn-stage-panel #choice-area button { padding: 13px 10px; background: rgba(11,14,20,.35); }
-  .vn-name { display: inline-block; position: relative; margin-bottom: 14px;
-             padding: 5px 30px; font-size: .9rem; color: var(--gold);
-             letter-spacing: .3em; text-indent: .3em;
-             border: 1px solid rgba(201,168,106,.5); background: rgba(11,14,20,.72); }
-  .vn-name::before, .vn-name::after {
-    content: ""; position: absolute; top: 50%; width: 46px; height: 1px;
-    background: linear-gradient(90deg, transparent, var(--gold-dim)); }
-  .vn-name::before { right: 100%; margin-right: 10px; }
-  .vn-name::after { left: 100%; margin-left: 10px; transform: scaleX(-1); }
-  .vn-line { font-size: 1.06rem; color: #e5dfd2; line-height: 2.05;
-             word-break: keep-all; margin: .35em 0; }
+                    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);
@@ -348,12 +345,20 @@ function charLines(g) {             // 서사 속 발화 — 좌 화자명 ·
     `<div class="char-line fade"><span class="spk">${esc(name)}</span>“${esc(t)}”</div>`).join('');
 }
 
-function vnStage(g, choices, withLead) { // 초상 + 이름표 + 그 캐릭터의 대사 (+선택지)
-  let h = `<div class="vn-stage${withLead ? ' with-lead' : ''} fade">` +
-          `<img class="vn-stage-art" src="${encodeURI(g.portrait)}" alt="${esc(g.spk)}">` +
-          `<div class="vn-stage-panel"><div class="vn-name">${esc(g.spk)}</div>`;
-  for (const t of g.lines) h += `<div class="vn-line">“${esc(t)}”</div>`;
-  return h + `<div id="choice-area">${choices}</div></div></div>`;
+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(g, boxHtml, choices) { // 전면 이미지 + 말풍선 (+선택지)
+  return `<div class="vn-stage">` +
+         `<img class="vn-stage-art" src="${encodeURI(g.portrait)}" alt="${esc(g.spk)}">` +
+         `<div class="vn-stage-panel">${boxHtml}` +
+         `<div id="choice-area">${choices}</div></div></div>`;
 }
 
 function groupNarration(blocks) {
@@ -377,9 +382,10 @@ function groupNarration(blocks) {
 
 /* 서버 페이지 → 화면들 (스크롤 없는 넘김).
    - 타이틀은 에피소드 첫 페이지의 화(話) 헤더만 — 카드 소제목은 표시하지 않는다 (책의 흐름)
-   - ��테이지(초상 화면)는 이미지+그 캐릭터의 대사(+선택지)만 — 지문은 섞지 않는다
-   - 지문·발화(char-line)는 세그먼트(스테이지 경계 사이)별로 실측 균형 분할:
-     화면 수 k = ceil(총높이/예산)를 먼저 정하고 균등 경계에서 절단 — 한 문장 고아 화면 방지 */
+   - 초상 있는 화자의 발화는 전부 전면 스테이지(이미지 + 사각 말풍선) 단독 화면
+   - 인터랙션 페이지의 마지막 초상 발화부터는 "말풍선 단계 시퀀스" — 같은 이미지 위에서
+     대사 → (이후 지문·대사) → 마지막 단계에 선택지. 원문 순서 보존 + 발화·선택지 인접
+   - 나머지 지문·발화는 세그먼트별 실측 균형 분할로 화면을 최대한 채운다 */
 function buildScreens(step, fresh) {
   const c = step.card;
   let head = '';
@@ -389,17 +395,15 @@ function buildScreens(step, fresh) {
 
   const groups = groupNarration(step.narration);
   const choices = choicesHtml(step);
-  let stageIdx = -1;                 // 인터랙션 페이지의 마지막 초상 발화만 스테이지
+  const isPortraitG = (g) => g.lines && g.portrait && !PLAYER_SPEAKERS.has(g.spk);
+  let seqIdx = -1;                   // 인터랙션 페이지: 마지막 초상 발화 = 시퀀스 시작
   if (step.can_chat || step.choices.length) {
-    for (let k = groups.length - 1; k >= 0; k--) {
-      const g = groups[k];
-      if (g.lines && g.portrait && !PLAYER_SPEAKERS.has(g.spk)) { stageIdx = k; break; }
-    }
+    for (let k = groups.length - 1; k >= 0; k--)
+      if (isPortraitG(groups[k])) { seqIdx = k; break; }
   }
-  const stageIsLast = stageIdx === groups.length - 1;
 
   const meas = $('page-measure');
-  const budget = Math.max((window.innerHeight || 900) - 190, 320);
+  const budget = Math.max((window.innerHeight || 900) - 130, 320);  // 최대한 가득 채움
   const measure = (html) => { meas.innerHTML = html; return meas.offsetHeight; };
 
   const screens = [];
@@ -427,28 +431,43 @@ function buildScreens(step, fresh) {
     seg = [];
   };
 
-  groups.forEach((g, k) => {
-    if (k === stageIdx) {            // 스테이지 = 독립 화면 (이미지+대사만)
-      // 직전 리드인(role=lead_in, 짧은 도입 지문)은 같은 화면의 프레임 "밖 위쪽"에 —
-      // 혼자 화면을 차지하지도, 이미지에 겹치지도 않게. 프레임은 with-lead로 축소
-      let leadHtml = '';
-      const prev = groups[k - 1];
-      if (prev && prev.block && prev.block.role === 'lead_in'
-          && seg.length && seg[seg.length - 1].html === block(prev.block)) {
-        leadHtml = seg.pop().html;
-      }
+  const upto = seqIdx >= 0 ? seqIdx : groups.length;
+  for (let k = 0; k < upto; k++) {
+    const g = groups[k];
+    if (isPortraitG(g)) {            // 일반 초상 발화 — 전면 스테이지 1장 (서사 위치 유지)
       flushSeg();
-      screens.push(leadHtml + vnStage(g, stageIsLast ? choices : '', !!leadHtml));
-      return;
+      screens.push(stageScreen(g, speechBox(g.spk, g.lines, 'speech'), ''));
+    } else {
+      const html = g.lines ? charLines(g) : block(g.block);
+      seg.push({html, h: measure(html)});
     }
-    const html = g.lines ? charLines(g) : block(g.block);
-    seg.push({html, h: measure(html)});
-  });
-  if (choices && !stageIsLast) {
-    const area = `<div id="choice-area">${choices}</div>`;
-    seg.push({html: area, h: measure(area)});
   }
-  flushSeg();
+
+  if (seqIdx < 0) {                  // 스테이지 시퀀스 없음 — 선택지는 마지막 화면 하단
+    if (choices) {
+      const area = `<div id="choice-area">${choices}</div>`;
+      seg.push({html: area, h: measure(area)});
+    }
+    flushSeg();
+  } else {                           // 말풍선 단계 시퀀스 (같은 이미지, 박스 내용만 전환)
+    flushSeg();
+    const sg = groups[seqIdx];
+    const steps = [{name: sg.spk, lines: sg.lines, mode: 'speech'}];
+    for (let k = seqIdx + 1; k < groups.length; k++) {
+      const g = groups[k];
+      if (g.lines)
+        steps.push({name: PLAYER_SPEAKERS.has(g.spk) ? '나' : g.spk,
+                    lines: g.lines, mode: 'speech'});
+      else if (g.block.type === 'dialogue_center')
+        steps.push({name: null, lines: [g.block.text], mode: 'center'});
+      else
+        steps.push({name: null, lines: [g.block.text], mode: 'narr'});
+    }
+    steps.forEach((s, i) => {
+      screens.push(stageScreen(sg, speechBox(s.name, s.lines, s.mode),
+                               i === steps.length - 1 ? choices : ''));
+    });
+  }
   meas.innerHTML = '';
 
   if (screens.length) screens[0] = head + screens[0];  // 화(話) 헤더는 첫 화면에