Phase W + V' 완료: before→filled→after 파이프라인 + 조립 로직 수정

Phase W: - weight 비율 초기 배정 (space_allocator header 높이 반영) - block_assembler 공통 조립 함수 (filled/assembled 통합) - filled → Selenium 측정 → context 저장 - sidebar overflow 확장 + body 재배분 - sub_layouts 사전 계산 (이미지 누락 해결) Phase V': - 팝업 링크 우측상단 배치 (인라인 → position:absolute) - 표 내용 Kei 판단 (공란 크기 계산 → 행/열 산출 → Kei 요약) - 출처 라벨 삭제 + 이미지 아래 캡션 배치 - after 공란 제거 (결론 바로 위까지 body/sidebar 채움) 추가: - V-10 bold 키워드: 기계적 추출 → Kei 문맥 판단 - ** 마크다운 → <strong> 변환 - [이미지:] 마커 제거 (bold 변환 전 처리) - grid-template-rows AFTER 크기 반영 (Sonnet final) - assemble_stage2 CSS font-size override, white-space fix - 하드코딩 전수 검토 완료 - 본심 여러 topic 텍스트 합침 Phase X 계획 문서 작성 (동적 역할 구조) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 05:00:52 +09:00
parent 24eb1bc5ad
commit 1f7579cf64
64 changed files with 13955 additions and 696 deletions
--- a/src/step_visualizer.py
+++ b/src/step_visualizer.py
@@ -0,0 +1,780 @@
+"""파이프라인 각 Stage 실행 후 자동으로 HTML 시각화를 생성.
+
+save_snapshot()에서 호출됨. 각 stage의 실제 context 데이터로 HTML 생성.
+JSON context 파일과 동일한 stage 이름을 사용.
+
+생성되는 파일 (JSON context 파일과 1:1 매칭):
+  stage_0.html               — MDX 정규화 결과 (섹션, 팝업, 이미지)
+  stage_1a.html              — Kei 꼭지 + 영역 배정 (테이블)
+  stage_1b.html              — 컨셉 구체화 (source_data, summary 추가)
+  stage_1_5a.html            — 빈 컨테이너 (1280x720)
+  stage_1_5a_content.html    — 컨테이너에 실제 콘텐츠 배치
+  stage_1_5b.html            — 디자인 예산 (영역별 available_height/width)
+  stage_1_7.html             — 블록 선택 표시
+  stage_1_8_fit_before.html  — 적합성 검증 (재배분 전)
+  stage_1_8_fit_after.html   — 재배분 후 + 보강 결과
+  stage_1_8_blocks.html      — 재배분 후 컨테이너에 블록 배치
+  stage_2.html               — HTML 생성 결과 (영역별 생성된 HTML)
+  stage_3.html               — 렌더링 조립 → final.html 링크
+  stage_4.html               — 품질 게이트 (측정값, 점수)
+"""
+from __future__ import annotations
+
+import logging
+from pathlib import Path
+from typing import Any, TYPE_CHECKING
+
+if TYPE_CHECKING:
+    from src.pipeline_context import PipelineContext
+
+logger = logging.getLogger(__name__)
+
+COLORS = {"배경": "#dc2626", "본심": "#2563eb", "첨부": "#16a34a", "결론": "#7c3aed"}
+FONT_MAP = {"배경": "bg", "본심": "core", "첨부": "sidebar", "결론": "key_msg"}
+
+
+def generate_step_html(stage_name: str, ctx: "PipelineContext", steps_dir: Path) -> None:
+    """stage_name에 따라 적절한 시각화 HTML 생성. 파일명은 JSON context와 1:1 매칭."""
+    try:
+        if stage_name == "stage_0":
+            _gen_stage_0(ctx, steps_dir)
+        elif stage_name == "stage_1a":
+            _gen_stage_1a(ctx, steps_dir)
+        elif stage_name == "stage_1b":
+            _gen_stage_1b(ctx, steps_dir)
+        elif stage_name == "stage_1_5a":
+            _gen_stage_1_5a(ctx, steps_dir)
+            _gen_stage_1_5a_content(ctx, steps_dir)
+        elif stage_name == "stage_1_5b":
+            _gen_stage_1_5b(ctx, steps_dir)
+        elif stage_name == "stage_1_7":
+            _gen_stage_1_7(ctx, steps_dir)
+        elif stage_name == "stage_1_8":
+            # before와 filled는 pipeline.py Stage 1.8 내부에서 before context로 이미 생성됨
+            # step_visualizer는 after context로 호출되므로 덮어쓰면 안 됨
+            # blocks와 fit_after만 생성 (after 상태 반영)
+            _gen_stage_1_8_blocks(ctx, steps_dir)
+            _gen_stage_1_8_fit_after(ctx, steps_dir)
+        elif stage_name == "stage_2":
+            _gen_stage_2(ctx, steps_dir)
+        elif stage_name == "stage_3":
+            _gen_stage_3(ctx, steps_dir)
+        elif stage_name == "stage_4":
+            _gen_stage_4(ctx, steps_dir)
+    except Exception as e:
+        logger.warning(f"[step_viz] {stage_name} 시각화 실패: {e}")
+
+
+# ══════════════════════════════════════
+# 공통
+# ══════════════════════════════════════
+
+def _tokens():
+    from src.fit_verifier import _load_design_tokens
+    return _load_design_tokens()
+
+
+def _calc_coords(containers: dict, ratio: tuple) -> dict:
+    t = _tokens()
+    pad = t.get("spacing_page", 40)
+    gap = t.get("spacing_block", 20)
+    small = t.get("spacing_small", 8)
+    header_h = 66
+
+    inner_w = 1280 - pad * 2
+    body_w = int(inner_w * ratio[0] / 100) if ratio[0] > 0 else inner_w
+    sidebar_w = inner_w - body_w - gap if ratio[1] > 0 else 0
+
+    def gh(c):
+        if hasattr(c, "height_px"): return c.height_px
+        return c.get("height_px", 0) if isinstance(c, dict) else 0
+
+    bg_h = gh(containers.get("배경", {}))
+    core_h = gh(containers.get("본심", {}))
+    sb_h = gh(containers.get("첨부", {}))
+    ft_h = gh(containers.get("결론", {}))
+
+    bg_top = pad + header_h + gap
+    core_top = bg_top + bg_h + small
+    ft_top = max(core_top + core_h, bg_top + sb_h) + gap
+
+    return {
+        "header": {"l": pad, "t": pad, "w": inner_w, "h": header_h},
+        "배경": {"l": pad, "t": bg_top, "w": body_w, "h": bg_h},
+        "본심": {"l": pad, "t": core_top, "w": body_w, "h": core_h},
+        "첨부": {"l": pad + body_w + gap, "t": bg_top, "w": sidebar_w, "h": sb_h},
+        "결론": {"l": pad, "t": ft_top, "w": inner_w, "h": ft_h},
+    }
+
+
+def _wrap(title, subtitle, slide_body):
+    return f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
+<style>
+*{{margin:0;padding:0;box-sizing:border-box;}}
+body{{background:#e5e5e5;padding:10px;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;word-break:keep-all;}}
+.bl{{display:flex;gap:0;margin-bottom:2px;}}.bl-m{{flex-shrink:0;width:1em;}}.bl-t{{flex:1;}}
+</style></head><body>
+<div style="font-size:16px;font-weight:bold;margin-bottom:4px;">{title}</div>
+<div style="font-size:11px;color:#666;margin-bottom:8px;">{subtitle}</div>
+<div style="width:1280px;height:720px;background:white;position:relative;border:1px solid #ccc;">
+{slide_body}
+</div></body></html>"""
+
+
+def _hdr(c, title):
+    return (f'<div style="position:absolute;left:{c["l"]}px;top:{c["t"]}px;width:{c["w"]}px;height:{c["h"]}px;'
+            f'background:#f8fafc;border-bottom:3px solid #2563eb;display:flex;align-items:center;'
+            f'padding:0 20px;font-size:22px;font-weight:900;color:#1e293b;">{title}</div>\n')
+
+
+def _box(c, role, inner, extra=""):
+    cl = COLORS.get(role, "#333")
+    return (f'<div style="position:absolute;left:{c["l"]}px;top:{c["t"]}px;width:{c["w"]}px;height:{c["h"]}px;'
+            f'border:2px solid {cl};border-radius:6px;background:{cl}08;overflow:hidden;{extra}">{inner}</div>\n')
+
+
+# ══════════════════════════════════════
+# Stage 0: MDX 정규화
+# ══════════════════════════════════════
+
+def _gen_stage_0(ctx, steps_dir):
+    """MDX 정규화 결과: 섹션, 팝업, 이미지, 테이블 목록."""
+    norm = ctx.normalized if hasattr(ctx, 'normalized') else {}
+    if hasattr(norm, 'model_dump'):
+        norm = norm.model_dump()
+    elif not isinstance(norm, dict):
+        norm = {}
+
+    sections = norm.get("sections", [])
+    popups = norm.get("popups", [])
+    images = norm.get("images", [])
+    tables = norm.get("tables", [])
+    title = norm.get("title", ctx.analysis.title if ctx.analysis else "")
+
+    sec_rows = ""
+    for i, s in enumerate(sections):
+        heading = s.get("heading", "") if isinstance(s, dict) else ""
+        content = s.get("content", "") if isinstance(s, dict) else str(s)
+        preview = content[:120].replace("<", "&lt;") + ("..." if len(content) > 120 else "")
+        bg = "#f8fafc" if i % 2 == 0 else "#fff"
+        sec_rows += f'<tr style="background:{bg};"><td style="padding:6px 8px;">{i+1}</td><td style="padding:6px 8px;font-weight:700;">{heading}</td><td style="padding:6px 8px;font-size:11px;">{preview}</td></tr>\n'
+
+    popup_rows = ""
+    for p in popups:
+        pt = p.get("title", "") if isinstance(p, dict) else str(p)
+        pc = p.get("content", "") if isinstance(p, dict) else ""
+        popup_rows += f'<tr><td style="padding:6px 8px;font-weight:700;">{pt}</td><td style="padding:6px 8px;font-size:11px;">{len(pc)}자</td></tr>\n'
+
+    html = f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
+<style>*{{margin:0;padding:0;box-sizing:border-box;}}body{{background:#e5e5e5;padding:10px;font-family:sans-serif;word-break:keep-all;}}</style>
+</head><body>
+<div style="font-size:16px;font-weight:bold;margin-bottom:8px;">Stage 0: MDX 정규화</div>
+<div style="font-size:12px;color:#555;margin-bottom:12px;">제목: <b>{title}</b> | 섹션: {len(sections)}개 | 팝업: {len(popups)}개 | 이미지: {len(images)}개 | 테이블: {len(tables)}개</div>
+<div style="font-size:13px;font-weight:700;margin-bottom:4px;">섹션</div>
+<table style="border-collapse:collapse;font-size:12px;width:100%;max-width:900px;margin-bottom:16px;">
+<tr style="background:#1e293b;color:white;"><th style="padding:8px;">#</th><th style="padding:8px;">heading</th><th style="padding:8px;">content (미리보기)</th></tr>{sec_rows}</table>
+<div style="font-size:13px;font-weight:700;margin-bottom:4px;">팝업</div>
+<table style="border-collapse:collapse;font-size:12px;width:100%;max-width:600px;">
+<tr style="background:#1e293b;color:white;"><th style="padding:8px;">title</th><th style="padding:8px;">분량</th></tr>{popup_rows}</table>
+</body></html>"""
+    (steps_dir / "stage_0.html").write_text(html, encoding="utf-8")
+
+
+# ══════════════════════════════════════
+# Stage 1A: Kei 꼭지
+# ══════════════════════════════════════
+
+def _gen_stage_1a(ctx, steps_dir):
+    ps = ctx.page_structure.roles
+    rm = {}
+    for role, info in ps.items():
+        if isinstance(info, dict):
+            for tid in info.get("topic_ids", []):
+                rm[tid] = role
+
+    rows = ""
+    for t in ctx.topics:
+        role = rm.get(t.id, "?")
+        c = COLORS.get(role, "#333")
+        bg = "#f8fafc" if t.id % 2 == 0 else "#fff"
+        rows += (f'<tr style="background:{bg};"><td style="padding:6px 8px;text-align:center;">{t.id}</td>'
+                 f'<td style="padding:6px 8px;font-weight:700;">{t.title}</td>'
+                 f'<td style="padding:6px 8px;">{t.purpose}</td><td style="padding:6px 8px;">{t.layer}</td>'
+                 f'<td style="padding:6px 8px;">{t.relation_type}</td>'
+                 f'<td style="padding:6px 8px;color:{c};font-weight:700;">{role}</td></tr>\n')
+
+    ps_info = "<br>".join(f"{r}: topic_ids={info.get('topic_ids')}, weight={info.get('weight')}"
+                           for r, info in ps.items() if isinstance(info, dict))
+
+    html = f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
+<style>*{{margin:0;padding:0;box-sizing:border-box;}}body{{background:#e5e5e5;padding:10px;font-family:sans-serif;word-break:keep-all;}}</style>
+</head><body>
+<div style="font-size:16px;font-weight:bold;margin-bottom:8px;">Stage 1A/1B: Kei 꼭지 + 영역 배정</div>
+<table style="border-collapse:collapse;font-size:12px;width:100%;max-width:900px;">
+<tr style="background:#1e293b;color:white;"><th style="padding:8px;">ID</th><th style="padding:8px;">제목</th>
+<th style="padding:8px;">purpose</th><th style="padding:8px;">layer</th><th style="padding:8px;">relation_type</th>
+<th style="padding:8px;">영역</th></tr>{rows}</table>
+<div style="margin-top:12px;font-size:12px;color:#555;"><b>페이지 구조:</b><br>{ps_info}</div></body></html>"""
+    (steps_dir / "stage_1a.html").write_text(html, encoding="utf-8")
+
+
+# ══════════════════════════════════════
+# Stage 1B: 컨셉 구체화
+# ══════════════════════════════════════
+
+def _gen_stage_1b(ctx, steps_dir):
+    """Stage 1B 후 꼭지에 source_data, summary가 추가된 상태."""
+    ps = ctx.page_structure.roles
+    rm = {}
+    for role, info in ps.items():
+        if isinstance(info, dict):
+            for tid in info.get("topic_ids", []):
+                rm[tid] = role
+
+    rows = ""
+    for t in ctx.topics:
+        role = rm.get(t.id, "?")
+        c = COLORS.get(role, "#333")
+        bg = "#f8fafc" if t.id % 2 == 0 else "#fff"
+        sd = (t.source_data or "")[:150]
+        sd_display = sd.replace("<", "&lt;") + ("..." if len(t.source_data or "") > 150 else "")
+        summary = (t.summary or "")[:100] if hasattr(t, 'summary') else ""
+        rows += (f'<tr style="background:{bg};"><td style="padding:6px 8px;text-align:center;">{t.id}</td>'
+                 f'<td style="padding:6px 8px;font-weight:700;">{t.title}</td>'
+                 f'<td style="padding:6px 8px;color:{c};">{role}</td>'
+                 f'<td style="padding:6px 8px;">{t.layer}</td>'
+                 f'<td style="padding:6px 8px;font-size:10px;">{sd_display}</td>'
+                 f'<td style="padding:6px 8px;font-size:10px;color:#555;">{summary}</td></tr>\n')
+
+    html = f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
+<style>*{{margin:0;padding:0;box-sizing:border-box;}}body{{background:#e5e5e5;padding:10px;font-family:sans-serif;word-break:keep-all;}}</style>
+</head><body>
+<div style="font-size:16px;font-weight:bold;margin-bottom:8px;">Stage 1B: 컨셉 구체화</div>
+<div style="font-size:11px;color:#666;margin-bottom:8px;">Stage 1A의 꼭지에 source_data(원본 텍스트)와 summary가 추가됨</div>
+<table style="border-collapse:collapse;font-size:12px;width:100%;">
+<tr style="background:#1e293b;color:white;"><th style="padding:8px;">ID</th><th style="padding:8px;">제목</th>
+<th style="padding:8px;">영역</th><th style="padding:8px;">layer</th>
+<th style="padding:8px;">source_data (미리보기)</th><th style="padding:8px;">summary</th></tr>{rows}</table></body></html>"""
+    (steps_dir / "stage_1b.html").write_text(html, encoding="utf-8")
+
+
+# ══════════════════════════════════════
+# Stage 1.5a: 빈 컨테이너
+# ══════════════════════════════════════
+
+def _gen_stage_1_5a(ctx, steps_dir):
+    coords = _calc_coords(ctx.containers, ctx.container_ratio)
+    fh = ctx.font_hierarchy
+    title = ctx.analysis.title or "슬라이드"
+    body = _hdr(coords["header"], title)
+
+    for role in ["배경", "본심", "첨부", "결론"]:
+        c = coords[role]
+        cl = COLORS[role]
+        fk = FONT_MAP[role]
+        font = getattr(fh, fk, "?")
+        inner = (f'<div style="text-align:center;margin-top:{max(0,c["h"]//2-15)}px;">'
+                 f'<b style="color:{cl};font-size:13px;">{role}</b><br>'
+                 f'<span style="color:#888;font-size:10px;">{c["w"]}x{c["h"]}px / font:{font}px</span></div>')
+        body += _box(c, role, inner)
+
+    r = ctx.container_ratio
+    html = _wrap(f"Step 1: 빈 컨테이너 (Stage 1.5a)", f"비율 {r[0]}:{r[1]}", body)
+    (steps_dir / "stage_1_5a.html").write_text(html, encoding="utf-8")
+
+
+# ══════════════════════════════════════
+# Stage 1.5a: 컨테이너에 콘텐츠 배치
+# ══════════════════════════════════════
+
+def _gen_stage_1_5a_content(ctx, steps_dir):
+    coords = _calc_coords(ctx.containers, ctx.container_ratio)
+    title = ctx.analysis.title or "슬라이드"
+    body = _hdr(coords["header"], title)
+    ps = ctx.page_structure.roles
+    topic_map = {t.id: t for t in ctx.topics}
+
+    for role in ["배경", "본심", "첨부", "결론"]:
+        c = coords[role]
+        cl = COLORS[role]
+        info = ps.get(role, {})
+        tids = info.get("topic_ids", []) if isinstance(info, dict) else []
+
+        lines = [f'<div style="font-size:10px;color:{cl};font-weight:700;margin-bottom:4px;">{role}</div>']
+        for tid in tids:
+            t = topic_map.get(tid)
+            if not t:
+                continue
+            lines.append(f'<div style="font-size:11px;font-weight:700;margin-bottom:2px;">[꼭지{tid}] {t.title} — {t.purpose} · {t.layer}</div>')
+            sd = t.source_data
+            if sd:
+                # 불릿으로 표시
+                for sent in sd.split(", "):
+                    sent = sent.strip()
+                    if sent:
+                        lines.append(f'<div class="bl" style="font-size:10px;color:#444;"><span class="bl-m">•</span><span class="bl-t">{sent}</span></div>')
+
+        inner = f'<div style="padding:6px 10px;overflow:hidden;">{"".join(lines)}</div>'
+        body += _box(c, role, inner)
+
+    html = _wrap("Step 1b: 콘텐츠 배치 (꼭지 → 컨테이너)", "각 컨테이너에 배정된 꼭지의 source_data", body)
+    (steps_dir / "stage_1_5a_content.html").write_text(html, encoding="utf-8")
+
+
+# ══════════════════════════════════════
+# Stage 1.5b: 디자인 예산
+# ══════════════════════════════════════
+
+def _gen_stage_1_5b(ctx, steps_dir):
+    """영역별 디자인 예산 (available height/width, fits 여부)."""
+    coords = _calc_coords(ctx.containers, ctx.container_ratio)
+    title = ctx.analysis.title or "슬라이드"
+    body = _hdr(coords["header"], title)
+
+    for role in ["배경", "본심", "첨부", "결론"]:
+        c = coords[role]
+        cl = COLORS[role]
+        ci = ctx.containers.get(role)
+        if not ci:
+            continue
+        db = ci.design_budget
+        if db and hasattr(db, 'model_dump'):
+            db = db.model_dump()
+        elif not isinstance(db, dict):
+            db = {}
+
+        avail_h = db.get("available_height_px", 0)
+        avail_w = db.get("available_width_px", 0)
+        fits = db.get("fits", False)
+        icon = "✅" if fits else "⚠️"
+
+        inner = (f'<div style="padding:6px 10px;">'
+                 f'<div style="font-size:10px;color:{cl};font-weight:700;">{icon} {role} ({c["w"]}×{c["h"]}px)</div>'
+                 f'<div style="font-size:10px;color:#555;">available: {avail_h}×{avail_w}px</div>'
+                 f'<div style="font-size:10px;color:#555;">fits: {fits}</div>'
+                 f'</div>')
+        body += _box(c, role, inner)
+
+    html = _wrap("Stage 1.5b: 디자인 예산", "영역별 available_height/width + fits 여부", body)
+    (steps_dir / "stage_1_5b.html").write_text(html, encoding="utf-8")
+
+
+# ══════════════════════════════════════
+# Stage 1.7: 블록 선택
+# ══════════════════════════════════════
+
+def _gen_stage_1_7(ctx, steps_dir):
+    coords = _calc_coords(ctx.containers, ctx.container_ratio)
+    title = ctx.analysis.title or "슬라이드"
+    body = _hdr(coords["header"], title)
+
+    for role in ["배경", "본심", "첨부", "결론"]:
+        c = coords[role]
+        cl = COLORS[role]
+        ref_list = ctx.references.get(role, [])
+
+        lines = [f'<div style="font-size:10px;color:{cl};font-weight:700;margin-bottom:4px;">{role} ({c["w"]}x{c["h"]}px)</div>']
+        for r in ref_list:
+            bid = r.block_id
+            var = r.variant
+            vtype = r.visual_type
+            line = f'<b>{bid}</b> ({var}) <span style="color:#888;font-size:9px;">{vtype}</span>'
+            # 주종 정보 — model_dump에서 확인
+            rd = r.model_dump() if hasattr(r, "model_dump") else {}
+            # BlockReference에는 supporting 정보가 없음 — stage_1_7_context.json에서 확인
+            lines.append(f'<div style="font-size:11px;margin-bottom:2px;">{line}</div>')
+
+        inner = f'<div style="padding:6px 10px;">{"".join(lines)}</div>'
+        body += _box(c, role, inner)
+
+    html = _wrap("Step 2: 블록 선택 (Stage 1.7)", "layer 기반 주종 판단. 컨테이너 위에 블록 표시.", body)
+    (steps_dir / "stage_1_7.html").write_text(html, encoding="utf-8")
+
+
+# ══════════════════════════════════════
+# Stage 1.8: 텍스트/그림 채운 상태 (filled)
+# ══════════════════════════════════════
+
+def _gen_stage_1_8_filled(ctx, steps_dir):
+    """블록 디자인에 텍스트를 채운 상태. 공통 조립 함수(block_assembler) 사용."""
+    from src.block_assembler import assemble_slide_html
+    slide_html = assemble_slide_html(ctx)
+    # 시각화 제목 삽입
+    header = (
+        '<div style="font-size:16px;font-weight:bold;margin-bottom:4px;">'
+        'Stage 1.8: 블록 디자인에 텍스트 채운 상태 (fit 검증 전)</div>\n'
+        '<div style="font-size:11px;color:#666;margin-bottom:8px;">'
+        '블록 CSS + structured_text + font_hierarchy. 공통 조립 함수 사용.</div>\n'
+    )
+    html = slide_html.replace('</head><body>', '</head><body>\n' + header, 1)
+    (steps_dir / "stage_1_8_filled.html").write_text(html, encoding="utf-8")
+
+
+def _gen_stage_1_8_fit_before(ctx, steps_dir):
+    """before: weight 비중대로 배정된 빈 컨테이너. fit 판단 없이 크기만 표시."""
+    coords = _calc_coords(ctx.containers, ctx.container_ratio)
+    title = ctx.analysis.title or "슬라이드"
+    body = _hdr(coords["header"], title)
+
+    for role in ["배경", "본심", "첨부", "결론"]:
+        c = coords[role]
+        cl = COLORS[role]
+
+        ref_list = ctx.references.get(role, [])
+        blocks = ", ".join(r.block_id for r in ref_list) if ref_list else "미선택"
+
+        ps = ctx.page_structure.roles
+        info = ps.get(role, {})
+        weight = info.get("weight", 0) if isinstance(info, dict) else 0
+
+        inner = (f'<div style="padding:6px 10px;">'
+                 f'<div style="font-size:10px;color:{cl};font-weight:700;">{role} ({c["w"]}x{c["h"]}px)</div>'
+                 f'<div style="font-size:10px;color:#555;">weight: {weight}</div>'
+                 f'<div style="font-size:10px;color:#888;margin-top:2px;">블록: {blocks}</div>'
+                 f'</div>')
+        body += _box(c, role, inner)
+
+    html = _wrap("Stage 1.8: before (weight 비중 초기 배정)", "빈 컨테이너. filled에서 텍스트를 채운 후 넘침 확인.", body)
+    (steps_dir / "stage_1_8_fit_before.html").write_text(html, encoding="utf-8")
+
+
+# ══════════════════════════════════════
+# Stage 1.8: 재배분 후 + 보강
+# ══════════════════════════════════════
+
+def _gen_stage_1_8_fit_after(ctx, steps_dir):
+    fit = ctx.fit_result
+    enh = ctx.enhancement_result
+    redist = fit.get("redistribution", {})
+    roles_fit = fit.get("roles", {})
+
+    # 재배분된 컨테이너
+    new_c = {}
+    for role, ci in ctx.containers.items():
+        new_h = int(redist.get(role, ci.height_px))
+        new_c[role] = {"height_px": new_h, "width_px": ci.width_px}
+
+    coords = _calc_coords(new_c, ctx.container_ratio)
+    title = ctx.analysis.title or "슬라이드"
+    body = _hdr(coords["header"], title)
+
+    emps = enh.get("emphasis_blocks", [])
+    bolds = enh.get("bold_keywords", {})
+    sups = enh.get("supplement_blocks", [])
+
+    for role in ["배경", "본심", "첨부", "결론"]:
+        c = coords[role]
+        cl = COLORS[role]
+        rf = roles_fit.get(role, {})
+        status = rf.get("fit_status", "?")
+        icon = {"OK": "✅", "TIGHT": "⚠️", "OVERFLOW": "❌"}.get(status, "?")
+        old_h = rf.get("allocated_px", 0)
+        new_h = int(redist.get(role, old_h))
+        needed = rf.get("total_required_px", 0)
+        delta = new_h - old_h
+
+        ref_list = ctx.references.get(role, [])
+        blocks = ", ".join(r.block_id for r in ref_list)
+
+        delta_str = f" <span style='color:#16a34a;'>({delta:+d}px)</span>" if delta != 0 else ""
+
+        inner = (f'<div style="padding:6px 10px;">'
+                 f'<div style="font-size:10px;color:{cl};font-weight:700;">{icon} {role} ({c["w"]}x{new_h}px){delta_str}</div>'
+                 f'<div style="font-size:10px;color:#555;">필요: {needed:.0f}px / 재배분 후: {new_h}px</div>'
+                 f'<div style="font-size:10px;color:#888;margin-top:2px;">블록: {blocks}</div>')
+
+        # 보강 정보
+        role_emps = [e for e in emps if e.get("role") == role]
+        role_bolds = bolds.get(role, [])
+        role_sups = [s for s in sups if s.get("role") == role]
+
+        if role_emps:
+            for e in role_emps:
+                inner += f'<div style="margin-top:3px;background:#991b1b;color:#fff;border-radius:2px;padding:2px 6px;font-size:9px;font-weight:700;">강조: {e.get("sentence","")[:40]}...</div>'
+        if role_sups:
+            for s in role_sups:
+                inner += f'<div style="margin-top:3px;font-size:9px;color:#2563eb;">보충: {s.get("block_id")} ({s.get("content_source")})</div>'
+        if role_bolds:
+            inner += f'<div style="margin-top:3px;font-size:9px;color:#475569;">bold: {role_bolds[:4]}</div>'
+
+        inner += '</div>'
+        body += _box(c, role, inner)
+
+    redist_str = ", ".join(f"{r}:{int(v)}px" for r, v in redist.items())
+    html = _wrap("Step 3b: 재배분 후 + 보강 (Stage 1.8)", f"재배분: {redist_str}", body)
+    (steps_dir / "stage_1_8_fit_after.html").write_text(html, encoding="utf-8")
+
+
+# ══════════════════════════════════════
+# Stage 1.8: 블록 디자인을 컨테이너에 배치
+# ══════════════════════════════════════
+
+def _gen_stage_1_8_blocks(ctx, steps_dir):
+    """재배분된 컨테이너에 블록 SLOT 구조 + 블록 디자인 + 주종관계 표시.
+    debug_steps/step2_phase_v.html 수준의 시각화."""
+    import re as _re
+
+    fit = ctx.fit_result or {}
+    redist = fit.get("redistribution", {})
+    topic_map = {t.id: t for t in ctx.topics}
+    ps = ctx.page_structure.roles
+
+    new_c = {}
+    for role, ci in ctx.containers.items():
+        new_h = int(redist.get(role, ci.height_px))
+        new_c[role] = {"height_px": new_h, "width_px": ci.width_px}
+
+    coords = _calc_coords(new_c, ctx.container_ratio)
+    title = ctx.analysis.title or "슬라이드"
+
+    all_block_css = set()
+    slide_body = _hdr(coords["header"], title)
+    legend_lines = []
+
+    for role in ["배경", "본심", "첨부", "결론"]:
+        c = coords[role]
+        cl = COLORS[role]
+        ref_list = ctx.references.get(role, [])
+        info = ps.get(role, {})
+        tids = info.get("topic_ids", []) if isinstance(info, dict) else []
+
+        if not ref_list:
+            slide_body += _box(c, role, f'<div style="padding:6px;color:#888;">블록 없음</div>')
+            continue
+
+        r0 = ref_list[0]
+        bid = r0.block_id
+        var = r0.variant
+        is_hier = r0.is_hierarchical if hasattr(r0, 'is_hierarchical') else False
+        sup_tids = r0.supporting_topic_ids if hasattr(r0, 'supporting_topic_ids') else []
+        primary_tid = r0.topic_id if hasattr(r0, 'topic_id') and r0.topic_id else (tids[0] if tids else None)
+
+        # 블록 디자인 HTML — SLOT 주석은 유지, 내용은 SLOT 마커로
+        raw = r0.design_reference_html or ""
+        # CSS 추출
+        styles = _re.findall(r'<style>(.*?)</style>', raw, _re.DOTALL)
+        for s in styles:
+            all_block_css.add(s)
+        clean = _re.sub(r'<style>.*?</style>', '', raw, flags=_re.DOTALL)
+
+        # SLOT 주석을 보이는 텍스트로 변환
+        def _slot_comment_to_visible(match):
+            text = match.group(1).strip()
+            if 'SLOT:' in text:
+                return f'<span style="color:#888;font-size:9px;background:#f0f0f0;padding:1px 4px;border-radius:2px;">{text}</span>'
+            return ''
+        clean = _re.sub(r'<!--\s*(SLOT:[^>]+?)-->', _slot_comment_to_visible, clean)
+        # 나머지 주석 제거
+        clean = _re.sub(r'<!--.*?-->', '', clean, flags=_re.DOTALL)
+
+        # 태그 라벨 (동적)
+        tag_parts = [f"{role} ({c['w']}×{c['h']})", bid]
+        if is_hier:
+            sup_str = "+".join(f"꼭지{st}" for st in sup_tids)
+            tag_parts.append(f"꼭지{primary_tid}(주)+{sup_str}(종) → 블록 1개")
+        tag_label = " · ".join(tag_parts)
+
+        # 종속 꼭지 SLOT 표시
+        sub_slot = ""
+        if is_hier and sup_tids:
+            for st in sup_tids:
+                st_topic = topic_map.get(st)
+                st_purpose = st_topic.purpose if st_topic and hasattr(st_topic, 'purpose') else ""
+                sub_slot += (
+                    f'<div style="padding-left:8px;border-left:2px solid {cl};margin-top:4px;'
+                    f'font-size:10px;color:{cl};">'
+                    f'SLOT: 하위 (꼭지{st} — {st_purpose})</div>'
+                )
+
+        # key-msg SLOT (본심만)
+        keymsg_slot = ""
+        if role == "본심" and ctx.analysis.core_message:
+            keymsg_slot = (
+                f'<div style="background:#dbeafe;border:1px solid #2563eb;border-radius:3px;'
+                f'padding:2px 6px;font-size:9px;color:#1e40af;font-weight:700;margin-top:4px;">'
+                f'SLOT: key-msg</div>'
+            )
+
+        inner = (
+            f'<div style="position:relative;padding-top:18px;width:100%;height:100%;">'
+            f'<span style="position:absolute;top:-16px;left:4px;font-size:9px;font-weight:700;'
+            f'background:white;padding:1px 6px;border-radius:3px;border:1px solid {cl};'
+            f'color:{cl};white-space:nowrap;">{tag_label}</span>'
+            f'{clean}{sub_slot}{keymsg_slot}</div>'
+        )
+
+        slide_body += (
+            f'<div style="position:absolute;left:{c["l"]}px;top:{c["t"]}px;width:{c["w"]}px;'
+            f'height:{c["h"]}px;border:2px dashed {cl};border-radius:6px;overflow:hidden;">'
+            f'{inner}</div>\n'
+        )
+
+        # 범례
+        if is_hier:
+            primary_topic = topic_map.get(primary_tid)
+            p_layer = primary_topic.layer if primary_topic and hasattr(primary_topic, 'layer') else ""
+            legend_lines.append(
+                f'• {role}: 꼭지{primary_tid}({p_layer}) + '
+                f'{"+".join(f"꼭지{st}" for st in sup_tids)} → '
+                f'<b>주종 관계 → {bid} 1개</b>'
+            )
+        else:
+            for r in ref_list:
+                t = topic_map.get(r.topic_id if hasattr(r, 'topic_id') else None)
+                t_layer = t.layer if t and hasattr(t, 'layer') else ""
+                legend_lines.append(f'• {role}: 꼭지{r.topic_id}({t_layer}) → <b>{r.block_id}</b>')
+
+    css_block = "\n".join(all_block_css)
+    legend_html = "<br>".join(legend_lines)
+
+    html = f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
+<style>
+*{{margin:0;padding:0;box-sizing:border-box;}}
+body{{background:#e5e5e5;padding:10px;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;word-break:keep-all;}}
+:root{{--radius:6px;--line-height-ko:1.7;--color-accent:#2563eb;--color-primary:#1e293b;}}
+{css_block}
+</style></head><body>
+<div style="font-size:16px;font-weight:bold;margin-bottom:4px;">Stage 1.8: SLOT 구조 + 블록 디자인 (재배분 후)</div>
+<div style="font-size:11px;color:#666;margin-bottom:8px;">블록 디자인에 SLOT 마커 + 주종관계 표시. 다음 Stage 2에서 실제 콘텐츠로 채워짐.</div>
+<div style="width:1280px;height:720px;background:white;position:relative;border:1px solid #ccc;">
+{slide_body}
+</div>
+<div style="margin-top:16px;font-size:12px;color:#555;line-height:1.8;">
+<b>블록 선택 근거 (layer 기반):</b><br>{legend_html}
+</div></body></html>"""
+    (steps_dir / "stage_1_8_blocks.html").write_text(html, encoding="utf-8")
+
+
+def _gen_stage_2(ctx, steps_dir):
+    """Stage 2 결과: 영역별 Sonnet 출력을 실제 렌더링하여 보여줌.
+    각 역할(배경/본심/첨부/결론)의 HTML을 개별 컨테이너에 실제 렌더링."""
+    gen = ctx.generated_html or {}
+    sub_layouts = ctx.sub_layouts or {}
+    ps = ctx.page_structure.roles
+
+    # body_html에서 배경/본심 분리 (spacer로 구분)
+    body_html = gen.get("body_html", "")
+    sidebar_html = gen.get("sidebar_html", "")
+    footer_html = gen.get("footer_html", "")
+
+    # body_html = 배경 + spacer + 본심. spacer로 분리
+    import re as _re
+    spacer_pattern = r'<div style="height:\d+px;"></div>'
+    body_parts = _re.split(spacer_pattern, body_html, maxsplit=1)
+    bg_html = body_parts[0].strip() if len(body_parts) > 1 else ""
+    core_html = body_parts[1].strip() if len(body_parts) > 1 else body_html.strip()
+
+    # 역할별 HTML 매핑
+    role_htmls = {}
+    if bg_html and "배경" in ps:
+        role_htmls["배경"] = bg_html
+    if core_html and "본심" in ps:
+        role_htmls["본심"] = core_html
+    if sidebar_html and "첨부" in ps:
+        role_htmls["첨부"] = sidebar_html
+    if footer_html and "결론" in ps:
+        role_htmls["결론"] = footer_html
+
+    # 각 역할을 컨테이너 크기에 맞게 실제 렌더링
+    fit = ctx.fit_result or {}
+    redist = fit.get("redistribution", {})
+    sections = []
+
+    for role in ["배경", "본심", "첨부", "결론"]:
+        rhtml = role_htmls.get(role, "")
+        if not rhtml:
+            continue
+        cl = COLORS.get(role, "#333")
+        ci = ctx.containers.get(role)
+        if not ci:
+            continue
+        h = int(redist.get(role, ci.height_px))
+        w = ci.width_px
+
+        # sub_layout 정보
+        layout = sub_layouts.get(role, {})
+        scs = layout.get("sub_containers", [])
+        sc_desc = " + ".join(f'{sc["name"]}({int(sc["width_px"])}×{int(sc["height_px"])}px)' for sc in scs) if scs else ""
+
+        sections.append(
+            f'<div style="margin-bottom:20px;">'
+            f'<div style="font-size:13px;font-weight:700;color:{cl};margin-bottom:4px;">'
+            f'{role} ({w}×{h}px)'
+            f'{" — " + sc_desc if sc_desc else ""}</div>'
+            f'<div style="width:{w}px;height:{h}px;border:2px solid {cl};border-radius:6px;'
+            f'overflow:hidden;background:white;font-family:Pretendard Variable,sans-serif;'
+            f'word-break:keep-all;">{rhtml}</div></div>'
+        )
+
+    html = f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
+<style>*{{margin:0;padding:0;box-sizing:border-box;}}
+body{{background:#e5e5e5;padding:10px;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;word-break:keep-all;}}
+:root{{--radius:6px;--line-height-ko:1.7;--color-accent:#2563eb;--color-primary:#1e293b;}}</style>
+</head><body>
+<div style="font-size:16px;font-weight:bold;margin-bottom:4px;">Stage 2: 영역별 HTML 생성 결과 (Sonnet)</div>
+<div style="font-size:11px;color:#666;margin-bottom:12px;">각 역할의 Sonnet 출력을 컨테이너 크기에 맞게 실제 렌더링</div>
+{"".join(sections)}
+</body></html>"""
+    (steps_dir / "stage_2.html").write_text(html, encoding="utf-8")
+
+
+def _gen_stage_3(ctx, steps_dir):
+    """Stage 3 결과: rendered_html을 별도 파일로 저장 + 링크.
+    rendered_html 자체가 완성 HTML이므로 직접 렌더링 가능."""
+    rendered = ctx.rendered_html or ""
+    if rendered:
+        # rendered_html을 별도 파일로 저장하여 브라우저에서 직접 확인 가능
+        (steps_dir / "stage_3_rendered.html").write_text(rendered, encoding="utf-8")
+
+    html = f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
+<style>*{{margin:0;padding:0;box-sizing:border-box;}}
+body{{background:#e5e5e5;padding:10px;font-family:sans-serif;}}</style>
+</head><body>
+<div style="font-size:16px;font-weight:bold;margin-bottom:4px;">Stage 3: 렌더링 조립 결과</div>
+<div style="font-size:11px;color:#666;margin-bottom:8px;">Stage 2의 영역별 HTML을 슬라이드 프레임(CSS Grid)에 배치 + 후처리 적용</div>
+<p style="margin-bottom:8px;"><a href="stage_3_rendered.html" style="font-size:16px;font-weight:700;">렌더링 결과 보기 (1280×720) →</a></p>
+<p><a href="../final.html" style="font-size:14px;">final.html 보기 →</a></p>
+<div style="margin-top:16px;font-size:12px;color:#555;">
+Stage 3 후처리: sidebar width:100% 조정, 폰트 캡핑 (배경≤{ctx.font_hierarchy.bg}px, 첨부≤{ctx.font_hierarchy.sidebar}px), overflow 제거, bold 변환
+</div>
+</body></html>"""
+    (steps_dir / "stage_3.html").write_text(html, encoding="utf-8")
+
+
+# ══════════════════════════════════════
+# Stage 4: 품질 게이트
+# ══════════════════════════════════════
+
+def _gen_stage_4(ctx, steps_dir):
+    """Stage 4 결과: 측정값 + 품질 점수."""
+    measurement = ctx.measurement or {}
+    quality_score = ctx.quality_score if hasattr(ctx, 'quality_score') else "N/A"
+
+    slide_m = measurement.get("slide", {})
+    zones = measurement.get("zones", {})
+
+    zone_rows = ""
+    for zone_name, zone_data in zones.items():
+        overflowed = zone_data.get("overflowed", False)
+        excess = zone_data.get("excess_px", 0)
+        client_h = zone_data.get("clientHeight", 0)
+        scroll_h = zone_data.get("scrollHeight", 0)
+        icon = "❌" if overflowed else "✅"
+        bg = "#fee2e2" if overflowed else "#f0fdf4"
+        zone_rows += (f'<tr style="background:{bg};"><td style="padding:6px 8px;">{icon} {zone_name}</td>'
+                      f'<td style="padding:6px 8px;">{client_h}px</td>'
+                      f'<td style="padding:6px 8px;">{scroll_h}px</td>'
+                      f'<td style="padding:6px 8px;">{excess:+d}px</td></tr>\n')
+
+    score_color = "#16a34a" if (isinstance(quality_score, (int, float)) and quality_score >= 80) else "#dc2626"
+
+    html = f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
+<style>*{{margin:0;padding:0;box-sizing:border-box;}}body{{background:#e5e5e5;padding:10px;font-family:sans-serif;word-break:keep-all;}}</style>
+</head><body>
+<div style="font-size:16px;font-weight:bold;margin-bottom:8px;">Stage 4: 품질 게이트</div>
+<div style="font-size:24px;font-weight:900;color:{score_color};margin-bottom:12px;">품질 점수: {quality_score}</div>
+<div style="font-size:12px;color:#555;margin-bottom:4px;">슬라이드: clientHeight={slide_m.get("clientHeight", "?")}px, scrollHeight={slide_m.get("scrollHeight", "?")}px, overflow={slide_m.get("overflowed", "?")}</div>
+<table style="border-collapse:collapse;font-size:12px;width:100%;max-width:600px;margin-top:8px;">
+<tr style="background:#1e293b;color:white;"><th style="padding:8px;">영역</th><th style="padding:8px;">clientH</th><th style="padding:8px;">scrollH</th><th style="padding:8px;">excess</th></tr>{zone_rows}</table>
+</body></html>"""
+    (steps_dir / "stage_4.html").write_text(html, encoding="utf-8")