PHASE-Z-ROADMAP refactor — Codex 검토 안 + Step 22 정정

§1 상단에 lock phrase blockquote 추가:
  "현재 당장 할 일은 개발 진행이 아니라, 보고와 피드백을 위한
   PROCESS_OVERVIEW.html 프로토타입을 먼저 만드는 것이다."

§2 — 토픽별 6 영역 → axis 명 list (Step 5 보완 / 6-A / 7-conn /
     8-conn / Step 9 v0 / cleanup-1 / F29 / README / push 완료).
     CHANGE-LOG reference 로 추적성 확보.
§3 — Step 22 추정 % 20% → 10% (UI 미시작 정합).
     caveat 강화 (STATUS-BOARD 가 single source of truth 명시).
§4 — 큰 로드맵 7 단계 한 블록.
§5 — 우선순위 3 줄 분리 (1. 프로토타입 / 2. 보고 / 3. 복귀).
§6 — 보고용 프로토타입 계획 (포함 내용 / 목적) 별도 섹션.
§7 — Pipeline 복귀 후 Todo (MDX04 / 시각 점검 확장 / 어댑터 /
     MDX 정규화 / Step 21 / MDX01 02 검증) 별도 섹션.
§8 — 문서 역할 분담 표 (README / OVERVIEW / STATUS-BOARD /
     CHANGE-LOG / ROADMAP / PROCESS_OVERVIEW 6 문서).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.claude/settings.json

@@ -0,0 +1,415 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cmd /c \"npx -y figma-developer-mcp --help\")",
+      "Bash(npx -y figma-developer-mcp --version)",
+      "mcp__Framelink_Figma_MCP__get_figma_data",
+      "mcp__Framelink_Figma_MCP__download_figma_images",
+      "Bash(start \"\" \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/prerequisites-3col.html\")",
+      "Bash(python -c \"from selenium import webdriver; print\\('selenium OK'\\)\")",
+      "Bash(python -c ':*)",
+      "Bash(python)",
+      "Bash(start \"\" \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/bim-goal-circles.html\")",
+      "Bash(start \"\" \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/bg-shapes-only.html\")",
+      "Bash(start \"\" \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/bim-figma-devmode.html\")",
+      "Bash(claude mcp:*)",
+      "Bash(curl -sS -o /dev/null -w \"mcp endpoint: HTTP %{http_code}\\\\n\" http://127.0.0.1:3845/mcp)",
+      "Bash(curl -sS -o /dev/null -w \"sse endpoint: HTTP %{http_code}\\\\n\" http://127.0.0.1:3845/sse)",
+      "Bash(curl -sS -o /dev/null -w \"root: HTTP %{http_code}\\\\n\" http://127.0.0.1:3845/)",
+      "Bash(curl -s -o NUL -w \"%{http_code}\" http://127.0.0.1:3845/mcp)",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://127.0.0.1:3845/sse --max-time 3)",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://127.0.0.1:3845/mcp --max-time 3)",
+      "Bash(curl -s -X POST http://127.0.0.1:3845/mcp -H \"Content-Type: application/json\" -H \"Accept: application/json, text/event-stream\" -d '{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"protocolVersion\":\"2024-11-05\",\"capabilities\":{},\"clientInfo\":{\"name\":\"test\",\"version\":\"1.0\"}}}' --max-time 5)",
+      "Bash(curl -v http://127.0.0.1:3845/mcp)",
+      "Bash(curl -s -m 3 http://127.0.0.1:3845/sse)",
+      "Bash(curl -s -m 3 -o /dev/null -w \"%{http_code}\\\\n\" http://127.0.0.1:3845/sse)",
+      "mcp__figma-desktop__get_metadata",
+      "mcp__figma-desktop__get_screenshot",
+      "mcp__figma-desktop__get_design_context",
+      "Bash(curl -sSo bg_texture.png \"http://localhost:3845/assets/849658071be46a26936e8666e3722b2dd548aee7.png\")",
+      "Bash(curl -sSo arc_top.png \"http://localhost:3845/assets/f05ebf15a1125b6c5809f9ffa35b4e4e750687d3.png\")",
+      "Bash(curl -sSo arc_side.png \"http://localhost:3845/assets/2f0f17507c681b7bc2fb109f3d4fafb9ff2f7ce0.png\")",
+      "Bash(curl -sSo big_fill_productivity.svg \"http://localhost:3845/assets/21a89b8138bd47debcc6f12bb140ee63bbd9fdf2.svg\")",
+      "Bash(curl -sSo big_ring_productivity.svg \"http://localhost:3845/assets/fbe84134d2e14bbf84b2c42516e9b85ffe6f7c1e.svg\")",
+      "Bash(curl -sSo big_fill_safety.svg \"http://localhost:3845/assets/1f24875931dc3c36e2c841eaf5b94466fa035a48.svg\")",
+      "Bash(curl -sSo big_ring_safety.svg \"http://localhost:3845/assets/c5aeccdfc884051848fc60f04abf2a9d367dd731.svg\")",
+      "Bash(curl -sSo big_fill_trust.svg \"http://localhost:3845/assets/67ef527c29921d401d31032c02d6b3a0ae1d3050.svg\")",
+      "Bash(curl -sSo acc_outer_speed.svg \"http://localhost:3845/assets/1391787caa4cb8241a1adadbb2c70aed3625e1b8.svg\")",
+      "Bash(curl -sSo acc_inner_speed.svg \"http://localhost:3845/assets/eeb8e9bf8b1841215ae0253017512a7e4a6d5a95.svg\")",
+      "Bash(curl -sSo acc_inner_profit.svg \"http://localhost:3845/assets/4885055cba20f72e83401be371fe74b9b43ec869.svg\")",
+      "Bash(curl -sSo acc_outer_safety.svg \"http://localhost:3845/assets/688b5af1d813b16cd6410453e3d4d1f79c084222.svg\")",
+      "Bash(curl -sSo acc_inner_safety.svg \"http://localhost:3845/assets/2fab268821fc763dbdff12e1dd65820dfa9b628e.svg\")",
+      "Bash(ls block-tests/*.html block-tests/*.md)",
+      "Bash(python scripts/gradient_math.py --test)",
+      "Bash(python scripts/gradient_math.py --w 350 --h 350 --x1 110.833 --y1 18.2292 --x2 219.479 --y2 175 --stops \"0:#FDC69E,1:#E0782C\")",
+      "Bash(python -c \"from scripts.gradient_math import svg_to_css; print\\(svg_to_css\\(W=350,H=350,x1=110.833,y1=18.2292,x2=219.479,y2=175,stops=[\\(0,'#FDC69E'\\),\\(1,'#E0782C'\\)]\\)\\)\")",
+      "Bash(python render.py cards-3col-persona example)",
+      "Bash(python render.py cards-3col-persona example-no-photos)",
+      "Bash(python render.py cycle-3way-intersect example)",
+      "WebFetch(domain:claude.com)",
+      "WebFetch(domain:help.figma.com)",
+      "Bash(curl -sSo \"527bd7809f4b2e5f3cd42f2e713ccbfb37537d82.png\" \"http://localhost:3845/assets/527bd7809f4b2e5f3cd42f2e713ccbfb37537d82.png\")",
+      "Bash(ls \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/_renders/pill_flex_\"*)",
+      "Bash(awk '/visual_diff:/{found=1} found && /^- id:/{print NR\": \"$0; found=0}' \"d:/ad-hoc/kei/design_agent/templates/catalog.yaml\")",
+      "Bash(curl -s -o \"bg_slide_texture.png\" \"http://localhost:3845/assets/16a1b2ea5b64663a3ee44bfad24671a612952c29.png\")",
+      "Bash(curl -s -o \"line_divider.svg\" \"http://localhost:3845/assets/01731a60f7d9d35816932c019149e301a3aae1a7.svg\")",
+      "Bash(head -20 /d/ad-hoc/kei/design_agent/samples/mdx/01*.mdx)",
+      "Bash(head -20 /d/ad-hoc/kei/design_agent/samples/mdx/02*.mdx)",
+      "Bash(head -20 /d/ad-hoc/kei/design_agent/samples/mdx/03*.mdx)",
+      "Bash(ls -la /d/ad-hoc/kei/design_agent/data/runs/20260413_*/)",
+      "Bash(python -c \"from src.config import settings; print\\(f'API configured: {bool\\(settings.anthropic_api_key\\)}'\\)\")",
+      "Bash(python run_test.py)",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:8000/health)",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:8000/)",
+      "Read(//d/ad-hoc/kei/**)",
+      "Bash(curl -s http://localhost:8000/docs)",
+      "Bash(taskkill //F //IM python.exe)",
+      "Bash(python assemble_mdx02_test.py)",
+      "Bash(wc -c data/runs/20260407_*/final.html)",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:8000/docs)",
+      "Bash(curl -s http://localhost:8080/docs -o /dev/null -w \"%{http_code}\")",
+      "Bash(curl -s http://localhost:8001/docs -o /dev/null -w \"%{http_code}\")",
+      "Bash(curl -s http://localhost:3000/ -o /dev/null -w \"%{http_code}\")",
+      "Bash(python assemble_mdx02_v3.py)",
+      "Bash(python assemble_mdx02_v4.py)",
+      "Bash(python assemble_mdx02_v5.py)",
+      "Bash(python assemble_mdx02_v6.py)",
+      "Bash(python assemble_mdx02_v7.py)",
+      "Bash(python assemble_mdx02_v8_3plans.py)",
+      "Bash(python assemble_mdx02_v9.py)",
+      "Bash(python build_plan1.py)",
+      "Bash(python build_plan2.py)",
+      "Bash(python build_plan3.py)",
+      "Bash(python build_plan1_v2.py)",
+      "Bash(python build_4plans_final.py)",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://127.0.0.1:8000/docs)",
+      "Bash(uvicorn backend.main:app --port 8000)",
+      "Bash(python final_plan1.py)",
+      "Bash(python final_plan2.py)",
+      "Bash(python build_all_4plans.py)",
+      "Bash(python build_plan3_kei.py)",
+      "Bash(python build_plan4_kei.py)",
+      "Bash(python make_4plans.py)",
+      "Bash(ls -la \"d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/html_render_final\"*)",
+      "Bash(taskkill //PID 48540 //F)",
+      "Bash(python make_mdx03.py)",
+      "Bash(python run_mdx03_pipeline.py)",
+      "Bash(powershell -Command \"Get-Process python -ErrorAction SilentlyContinue | Select-Object Id,StartTime\")",
+      "Bash(grep \"class FontHierarchy\" src/*.py)",
+      "Bash(ls -ltr /d/ad-hoc/kei/design_agent/data/runs/*/step_*_context.json)",
+      "Bash(awk '{print $2}')",
+      "Bash(stat /d/ad-hoc/kei/design_agent/data/runs/20260414_120225/stage_*_context.json)",
+      "Bash(ls -la /d/ad-hoc/kei/design_agent/data/runs/20260414_120225/stage_*_context.json)",
+      "Bash(awk '{print $6, $7, $8, $9}')",
+      "Bash(ls -lt data/runs/20260414_120225/*_context.json)",
+      "Bash(awk '{print $6,$7,$8,$9}')",
+      "Bash(python -c \" import yaml with open\\('catalog.yaml'\\) as f: data = yaml.safe_load\\(f\\) blocks = data.get\\('blocks', []\\) for b in blocks: print\\(f\\\\\"{b['id']} | {b.get\\('category',''\\)} | items:{b.get\\('min_items','?'\\)}-{b.get\\('max_items','?'\\)}\\\\\"\\) \")",
+      "Bash(python add_tags.py)",
+      "Bash(python -c \"import src.block_reference; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.block_assembler; print\\('OK'\\)\")",
+      "Bash(ls -t d:/ad-hoc/kei/design_agent/docs/history/PHASE-*.md d:/ad-hoc/kei/design_agent/docs/history/IMPROVEMENT-PHASE-*.md)",
+      "Bash(python -c \"import src.pipeline_context; import src.kei_client; import src.pipeline; print\\('모든 import OK'\\)\")",
+      "Bash(python -c \"import src.step_visualizer; import src.pipeline; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.pipeline; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.pipeline; import src.block_assembler; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.block_assembler; import src.pipeline; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.kei_client; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.pipeline; import src.block_assembler; import src.pipeline_context; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.pipeline; import src.validators; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.validators; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.validators; import src.pipeline; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.pipeline; import src.section_parser; import src.block_assembler; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.pipeline; import src.block_assembler; import src.section_parser; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.pipeline; import src.block_assembler; import src.space_allocator; import src.pipeline_context; print\\('OK'\\)\")",
+      "Bash(grep -l \"pp2-grid-wrap\\\\|pp2\" templates/blocks/**/*.html)",
+      "Bash(echo file:///D:/ad-hoc/kei/design_agent/data/runs/20260415_110323/final.html)",
+      "Bash(python -c \"import src.block_reference; import src.section_parser; import src.pipeline; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.block_assembler; import src.section_parser; import src.pipeline; print\\('OK'\\)\")",
+      "Bash(python -c \"import src.block_reference; import src.pipeline; import src.block_assembler; print\\('OK'\\)\")",
+      "Bash(ls d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/*.html)",
+      "Bash(ls d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/*_flat.md)",
+      "Bash(ls d:/ad-hoc/kei/design_agent/figma_to_html_agent/*.md d:/ad-hoc/kei/design_agent/figma_to_html_agent/*.json d:/ad-hoc/kei/design_agent/figma_to_html_agent/*.faiss)",
+      "Bash(ls d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/*.html d:/ad-hoc/kei/design_agent/figma_to_html_agent/block-tests/*.md)",
+      "Bash(python -c ' *)",
+      "Bash(ls d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281189/assets/*.svg)",
+      "Bash(ls -d d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/*/)",
+      "Bash(sort -t'\"' -k4)",
+      "Bash(awk -F: '{print $1}')",
+      "Bash(curl -sS -o fdcafc1b6ab639b9a4c75ce36014f3b16ea0fbc1.png \"http://localhost:3845/assets/fdcafc1b6ab639b9a4c75ce36014f3b16ea0fbc1.png\")",
+      "Bash(curl -sS -o 922ee6f4bea1434652ffc08f962086052286b6c5.png \"http://localhost:3845/assets/922ee6f4bea1434652ffc08f962086052286b6c5.png\")",
+      "Bash(curl -sS -o 5d27ecb194e670c9af26e98d11075b86c40efffa.svg \"http://localhost:3845/assets/5d27ecb194e670c9af26e98d11075b86c40efffa.svg\")",
+      "Bash(curl -sS -o 6d311a18898deded5376b25996a13757e8c42d17.svg \"http://localhost:3845/assets/6d311a18898deded5376b25996a13757e8c42d17.svg\")",
+      "Bash(curl -sS -o cab8c8284090fb4893d7f584cc6081370b115b11.svg \"http://localhost:3845/assets/cab8c8284090fb4893d7f584cc6081370b115b11.svg\")",
+      "Bash(curl -sS -o b0e9fad5b03f4d9e368524976c20c9886392e17b.png \"http://localhost:3845/assets/b0e9fad5b03f4d9e368524976c20c9886392e17b.png\")",
+      "Bash(curl -sS -o 7713e15d6eaebd868c6ea632c1199b94603af2fd.svg \"http://localhost:3845/assets/7713e15d6eaebd868c6ea632c1199b94603af2fd.svg\")",
+      "Bash(curl -sS -o bf1755273910e17f7a012ce2d269a93cca9483ac.svg \"http://localhost:3845/assets/bf1755273910e17f7a012ce2d269a93cca9483ac.svg\")",
+      "Bash(curl -sS -o b47d2977a36ab6a0c180d8f090afff798c44ed27.png \"http://localhost:3845/assets/b47d2977a36ab6a0c180d8f090afff798c44ed27.png\")",
+      "Bash(curl -sS -o b614390a7ec2f351fc8290d640bcd3e6b237bfb2.svg \"http://localhost:3845/assets/b614390a7ec2f351fc8290d640bcd3e6b237bfb2.svg\")",
+      "Bash(curl -sS -o ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg \"http://localhost:3845/assets/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg\")",
+      "Bash(curl -sS -o 29c778b566aca6778f505874f21670de129351f8.svg \"http://localhost:3845/assets/29c778b566aca6778f505874f21670de129351f8.svg\")",
+      "Bash(curl -sS -o f808a8c71388afbadc21c5c4b4bbe76bcd73d420.png \"http://localhost:3845/assets/f808a8c71388afbadc21c5c4b4bbe76bcd73d420.png\")",
+      "Bash(curl -sS -o 855b9d71b1cce30bcd89b214265fa8b6de58968f.png \"http://localhost:3845/assets/855b9d71b1cce30bcd89b214265fa8b6de58968f.png\")",
+      "Bash(curl -sS -o 9de5354619ad8ba9f47efd104df0f388c6778cc1.png \"http://localhost:3845/assets/9de5354619ad8ba9f47efd104df0f388c6778cc1.png\")",
+      "Bash(curl -sS -o 461a9f67c756d5057df3efbe01c515beb0a07a59.png \"http://localhost:3845/assets/461a9f67c756d5057df3efbe01c515beb0a07a59.png\")",
+      "Bash(curl -sS -o 5a11195e0df9ff8292d56ab0c0bd78a31e95e2ba.png \"http://localhost:3845/assets/5a11195e0df9ff8292d56ab0c0bd78a31e95e2ba.png\")",
+      "Bash(curl -sS -o 62d8e408b8381ece554ed55d20d3b54e375f92cb.svg \"http://localhost:3845/assets/62d8e408b8381ece554ed55d20d3b54e375f92cb.svg\")",
+      "Bash(ls \"d:/ad-hoc/kei/design_agent\\(원본\\)/figma_to_html_agent/block-tests/\"*.html)",
+      "Bash(python scripts/eval_block_matcher.py)",
+      "Bash(python scripts/run_pipeline_v2.py)",
+      "Bash(python \"C:\\\\Users\\\\User\\\\.claude\\\\projects\\\\d--ad-hoc-kei-design-agent\\\\58697289-9e64-4f6b-955d-8f289d7ea0d1\\\\tool-results\\\\mcp-figma-desktop-get_metadata-1776417198239.txt\")",
+      "Bash(where python *)",
+      "Skill(update-config)",
+      "Skill(update-config:*)",
+      "Bash('C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe' -c ' *)",
+      "Bash(curl -s -o /dev/null -w \"HTTP %{http_code}\\\\n\" -m 3 http://127.0.0.1:3845/mcp)",
+      "Bash(curl -s -o /dev/null -w \"HTTP %{http_code}\\\\n\" -m 3 http://127.0.0.1:3845/sse)",
+      "Bash(curl -s -X POST http://127.0.0.1:3845/mcp -H 'Content-Type: application/json' -H 'Accept: application/json, text/event-stream' -d '{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"protocolVersion\":\"2024-11-05\",\"capabilities\":{},\"clientInfo\":{\"name\":\"test\",\"version\":\"1.0\"}}}' --max-time 5)",
+      "Bash(env)",
+      "Bash(curl -s -X POST http://127.0.0.1:3845/mcp -H \"Content-Type: application/json\" -H \"Accept: application/json, text/event-stream\" -d '{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"protocolVersion\":\"2024-11-05\",\"capabilities\":{},\"clientInfo\":{\"name\":\"test\",\"version\":\"1.0\"}}}')",
+      "Bash(python figma_to_html_agent/scripts/fetch_figma_screenshots.py)",
+      "Bash(xargs -I {} echo \"blocks/{}\")",
+      "Bash(python scripts/match_mdx_to_frames_tfidf.py)",
+      "WebSearch",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import bm25s; print\\('bm25s:', bm25s.__version__\\)\")",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import kiwipiepy; print\\('kiwipiepy:', kiwipiepy.__version__\\)\")",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -m pip install bm25s)",
+      "Bash(python scripts/fetch_all_frame_screenshots.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/run_all.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/by_section.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/matrix_simple.py)",
+      "Bash(python scripts/match_mdx_strict.py)",
+      "Bash(python scripts/match_17_units_my_matcher.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/extract_units.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/matrix_17.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/compare_hybrids.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/test_mdx03_1_depth.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/matrix_cases.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import markdown; print\\(markdown.__version__\\)\")",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/md_to_html.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/case3.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" \"d:/ad-hoc/kei/design_agent/tests/matching/md_to_html.py\")",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/extract_rare_keywords.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/idf_only_test.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/case1_only.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/keyword_report.py)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import gensim; print\\('gensim:', gensim.__version__\\)\")",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import sentence_transformers; print\\('sentence-transformers:', sentence_transformers.__version__\\)\")",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -c \"import torch; print\\('torch:', torch.__version__\\)\")",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" -m pip install gensim)",
+      "Bash(\"C:\\\\Users\\\\User\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python313\\\\python.exe\" tests/matching/phase2.py)",
+      "Bash(python tests/matching/phase2.py)",
+      "Bash(python tests/matching/md_to_html.py)",
+      "Bash(python tests/matching/phase3.py)",
+      "Bash(python tests/matching/phase4.py)",
+      "Bash(tasklist)",
+      "Bash(python tests/matching/phase4_1st.py)",
+      "Bash(python tests/matching/phase5.py)",
+      "Bash(python tests/matching/phase6.py)",
+      "Bash(python tests/matching/phase7.py)",
+      "Bash(python tests/matching/phase8.py)",
+      "Bash(python tests/matching/phase9.py)",
+      "Bash(python tests/matching/phase10.py)",
+      "Bash(python tests/matching/phase11.py)",
+      "Bash(python tests/matching/phase12.py)",
+      "Bash(python tests/matching/phase13.py)",
+      "Bash(python tests/matching/phase14.py)",
+      "Bash(python tests/matching/phase14_sample.py)",
+      "Bash(python tests/matching/phase15.py)",
+      "Bash(gh repo *)",
+      "Read(//d/for python//**)",
+      "Bash(git -C '/d/for python/__TRACKED_VAR__' remote -v)",
+      "Read(//d/for python/**)",
+      "Bash(git -C \"/d/for python/geulbeot-light/upload/\" remote -v)",
+      "Bash(git -C \"/d/for python/geulbeot-light/upload/\" log --oneline -5)",
+      "WebFetch(domain:github.com)",
+      "Bash(git -C /d/tmp/geulbeot-check log --oneline -10)",
+      "Bash(python -m py_compile domain_api.py converters/pipeline/step8_content.py)",
+      "Bash(node -c \"/d/for python/geulbeot-light/upload/static/js/generator.js\")",
+      "Bash(node --check \"/d/for python/geulbeot-light/upload/static/js/generator.js\")",
+      "Bash(python -m py_compile converters/pipeline/step8_content.py)",
+      "Bash(python tests/matching/phase16.py)",
+      "Bash(git -C figma_to_html_agent status --short)",
+      "Bash(xargs -I {} dirname {})",
+      "Bash(python tests/matching/phase17.py)",
+      "Bash(python tests/matching/phase18_21.py)",
+      "Bash(python tests/matching/phase22.py)",
+      "Bash(python tests/matching/synonyms_report.py)",
+      "Bash(python tests/matching/figma_audit.py)",
+      "Bash(sed -n '30,80p' figma_to_html_agent/blocks/1171281171/texts.md)",
+      "Bash(sed -n '500,540p' figma_to_html_agent/blocks/1171281171/texts.md)",
+      "Bash(python tests/matching/synonym_mine.py)",
+      "Bash(python tests/matching/phase23.py)",
+      "Bash(python tests/matching/domain_terms_report.py)",
+      "Bash(python tests/matching/phase23b.py)",
+      "Bash(python tests/matching/build_structure_ontology.py)",
+      "Bash(python tests/matching/phase21b.py)",
+      "Bash(python tests/matching/template_fit.py)",
+      "Bash(python template_fit.py)",
+      "Bash(awk '/^━━ MDX01-2/,/^━━ MDX02/')",
+      "Bash(awk '/^━━ MDX02/,/^━━ MDX03-1/')",
+      "Bash(awk '/^━━ MDX/ || /construction_goals/ || /policy_goals/ || /policy_achievement/ || /=== Result/ || /^✓/ || /^⚠/')",
+      "Bash(awk '/━━ MDX02/,/━━ MDX03-1/')",
+      "Bash(awk '/━━ MDX03-1/,/━━ MDX03-2/')",
+      "Bash(awk '/^━━/ || /sw_development_cycle_six/ || /domestic_bim_actor/ || /compensation_complaint/ || /field_effectiveness/ || /model_specialized/ || /=== Result/ || /^✓/ || /^⚠/')",
+      "Bash(git mv *)",
+      "Bash(mv phase23.py phase_domain_terms.py)",
+      "Bash(mv phase23b.py phase_domain_terms_v2.py)",
+      "Bash(python phase23.py)",
+      "Bash(python phase24.py)",
+      "Bash(python phase25.py)",
+      "Bash(python phase26.py)",
+      "Bash(python phase22.py)",
+      "Bash(python md_to_html.py)",
+      "Bash(python inspect_keywords.py)",
+      "Bash(python keyword_refinement.py)",
+      "Bash(python build_keyword_base.py)",
+      "Bash(python -c \"import yaml; d=yaml.safe_load\\(open\\('keyword_base.yaml',encoding='utf-8'\\)\\); print\\('keywords:', len\\(d['keywords']\\)\\); print\\('excluded:', len\\(d['excluded']\\)\\)\")",
+      "Bash(python clean_anchor_sets.py)",
+      "Bash(python sync_analysis_from_ontology.py)",
+      "Bash(awk '/^## 1. TARGET별/,/^## 2\\\\./' MATRIX_PHASE23.md)",
+      "Bash(python _rename_phase_refs.py)",
+      "Bash(python _fix_self_refs.py)",
+      "Bash(python _add_structure_intent.py)",
+      "Bash(python intent_diagnostic.py)",
+      "Bash(awk '/^## 1. TARGET/,/^## 2\\\\./' MATRIX_PHASE25.md)",
+      "Bash(python build_beps_summary.py)",
+      "Bash(python text_pipeline.py)",
+      "Bash(python tests/matching/pipeline_01_extract_nodes.py)",
+      "Bash(python tests/matching/pipeline_02_tokenize.py)",
+      "Bash(python tests/matching/pipeline_02_5_special_forms.py)",
+      "Bash(python tests/matching/pipeline_04a_smoke_test.py)",
+      "Bash(python tests/matching/pipeline_04_normalize.py)",
+      "Bash(python -c \"import markdown; print\\(markdown.__version__\\)\")",
+      "Bash(python tests/matching/generate_inventory_report.py)",
+      "Bash(python tests/matching/pipeline_05_anchor_candidates.py)",
+      "Bash(python tests/matching/pipeline_06_anchor_sets.py)",
+      "Bash(python tests/matching/pipeline_06_2_mdx_matching.py)",
+      "Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_01_extract_nodes.py\")",
+      "Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_02_tokenize.py\")",
+      "Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_02_5_special_forms.py\")",
+      "Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_04_normalize.py\")",
+      "Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/generate_inventory_report.py\")",
+      "Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_06_2_mdx_matching.py\")",
+      "Bash(python -c \"import paddleocr; print\\('paddleocr OK', paddleocr.__version__\\)\")",
+      "Bash(python -c \"import easyocr; print\\('easyocr OK', easyocr.__version__\\)\")",
+      "Bash(tesseract --version)",
+      "Bash(python -c \"import pytesseract; print\\('pytesseract OK'\\)\")",
+      "Bash(pip install *)",
+      "Bash(python -c \"import easyocr; print\\('OK', easyocr.__version__\\)\")",
+      "Bash(python scripts/ocr_augment_texts.py --only 1171281172)",
+      "Bash(python scripts/ocr_augment_texts.py)",
+      "Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/pipeline_07_auto_anchor_candidates.py\")",
+      "Bash(cp anchor_sets_input.yaml anchor_sets_input.ai_curated_legacy.yaml)",
+      "Bash(cat)",
+      "Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/generate_frame_keyword_review.py\")",
+      "Bash(mkdir -p _archive)",
+      "Bash(mv NORMALIZED_TOKEN_INVENTORY.html NORMALIZED_TOKEN_INVENTORY.md NORMALIZED_TOKEN_INVENTORY.before_plain_line.html _archive/)",
+      "Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/generate_keyword_inventory.py\")",
+      "Bash(mv -f mdx_matching_report.html mdx_matching_report.md _archive/)",
+      "Bash(python pipeline_06_2_mdx_matching.py)",
+      "Bash(python \"d:/ad-hoc/kei/design_agent/tests/matching/generate_filter_candidates.py\")",
+      "Bash(python pipeline_04_normalize.py)",
+      "Bash(python pipeline_07_auto_anchor_candidates.py)",
+      "Bash(python generate_keyword_inventory.py)",
+      "Bash(python generate_frame_keyword_review.py)",
+      "Bash(python generate_filter_candidates.py)",
+      "Bash(python pipeline_01_extract_nodes.py)",
+      "Bash(python pipeline_02_tokenize.py)",
+      "Bash(awk '{print $6,$7,$8,$NF}')",
+      "Bash(python pipeline_08_v3_structure_rerank.py)",
+      "Bash(python pipeline_08_v4_template_fit_judgment.py)",
+      "Bash(python pipeline_08_5_matching_report.py)",
+      "Bash(awk '{print $5, $NF}')",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "Bash(python pipeline_09_v2_diagnosis.py)",
+      "Bash(python pipeline_10_holdout_labeling_prep.py)",
+      "Bash(python pipeline_10_5_holdout_eval.py)",
+      "Bash(python pipeline_11_templates_v1_audit.py)",
+      "Bash(python pipeline_12_generate_templates_v2.py)",
+      "Bash(python pipeline_12_r2_generate_templates_v2.py)",
+      "Bash(python pipeline_12_r3_generate_templates_v2.py)",
+      "Bash(python pipeline_12_finalize_v2.py)",
+      "Bash(python pipeline_08_v3_r2_structure_rerank.py)",
+      "Bash(python pipeline_08_v3_r3_structure_rerank.py)",
+      "Bash(python pipeline_08_v3_r4_structure_rerank.py)",
+      "Bash(python pipeline_12_promote_frame13.py)",
+      "Bash(python pipeline_08_v3_r5_structure_rerank.py)",
+      "Bash(python pipeline_08_v4_r2_template_fit_judgment.py)",
+      "Bash(python pipeline_08_5_r2_matching_report.py)",
+      "Bash(python pipeline_13_generate_meeting_samples.py)",
+      "Bash(python pipeline_13_r2_meeting_docs.py)",
+      "Bash(python pipeline_14_single_sample.py)",
+      "Bash(python pipeline_15_idf_comparison.py)",
+      "Bash(python pipeline_15_bm25_comparison.py)",
+      "Bash(python pipeline_15_bm25_with_sets.py)",
+      "Bash(python -c \"import sklearn; print\\(sklearn.__version__\\)\")",
+      "Bash(python pipeline_15_logistic_regression.py)",
+      "Bash(python pipeline_16_deck_4pages.py)",
+      "Bash(python pipeline_17_v4_full32.py)",
+      "Bash(python tests/matching/pipeline_16_deck_4pages.py)",
+      "Bash(python pipeline_18_slot_axis_ablation.py)",
+      "Bash(python tests/matching/pipeline_18_slot_axis_ablation.py)",
+      "Bash(cp tests/matching/pipeline_01_extract_nodes.py tests/pipeline/code/)",
+      "Bash(cp tests/matching/pipeline_02_tokenize.py tests/pipeline/code/)",
+      "Bash(cp tests/matching/pipeline_02_5_special_forms.py tests/pipeline/code/)",
+      "Bash(cp tests/matching/pipeline_04_normalize.py tests/pipeline/code/)",
+      "Bash(cp tests/matching/pipeline_05_anchor_candidates.py tests/pipeline/code/)",
+      "Bash(python _tmp_inject.py)",
+      "Bash(python _tmp_inject2.py)",
+      "Bash(python _tmp_fix.py)",
+      "Bash(python _tmp_fix2.py)",
+      "Bash(grep -n \"^---$\" tests/PIPELINE.md)",
+      "Bash(python _tmp_replace_col.py)",
+      "Bash(python3)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1_test1)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1_test2)",
+      "Bash(awk '/data-template-id=\"process_product_two_way\"/,/<\\\\/div>/' d:/ad-hoc/kei/design_agent/data/runs/mvp1_test2/phase_z2/final.html)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1_test3)",
+      "Bash(awk '/data-template-id=\"process_product_two_way\"/,/<\\\\/div>$/' d:/ad-hoc/kei/design_agent/data/runs/mvp1_test3/phase_z2/final.html)",
+      "Bash(awk '/data-col=\"process\"/,/data-col=\"product\"/' d:/ad-hoc/kei/design_agent/data/runs/mvp1_test3/phase_z2/final.html)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1_test4)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1_test5)",
+      "Bash(curl -sS -o /dev/null -w \"HTTP %{http_code}\\\\n\" http://127.0.0.1:3845/sse --max-time 3)",
+      "Bash(mkdir -p d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281210/assets d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281210/_renders)",
+      "Bash(curl -sSo arrow.png \"http://localhost:3845/assets/0ad6379ae47598a529dba23bbc5730ba1da7117f.png\")",
+      "Bash(curl -sSo body_bg.svg \"http://localhost:3845/assets/7e328327e3e54e3989e2c6b76545de69fbc6f327.svg\")",
+      "Bash(curl -sSo header_left_bg.svg \"http://localhost:3845/assets/80402d8da588fab7aa4c209de37e71f9b22c4d47.svg\")",
+      "Bash(curl -sSo header_right_bg.svg \"http://localhost:3845/assets/a7d2b0029efb030aaac60ec160ba5a5b39a3b17a.svg\")",
+      "Bash(python blocks/1171281210/_render.py)",
+      "Bash(python -c \"from PIL import Image; im=Image.open\\('blocks/1171281210/_renders/slide.png'\\); im2=im.resize\\(\\(im.size[0]*2, im.size[1]*2\\), Image.LANCZOS\\); im2.save\\('blocks/1171281210/_renders/slide_2x.png'\\); print\\(im.size, '->', im2.size\\)\")",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5_test1)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5_test2)",
+      "Bash(mkdir -p d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281174/assets d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281174/_renders)",
+      "Bash(curl -sSo header_pill.png \"http://localhost:3845/assets/acafc8a08706fff6b50942c715048b6720570afd.png\")",
+      "Bash(curl -sSo pin_icon.png \"http://localhost:3845/assets/0ecfd235666abd5299c05395f02fdc7add6085b9.png\")",
+      "Bash(curl -sSo text_bubble.png \"http://localhost:3845/assets/944d66dab1fd437246764c06e3b4264dcee933a9.png\")",
+      "Bash(curl -sSo badge_01.png \"http://localhost:3845/assets/42dca7c1ca42ba8520aa274fd4471bd054dfe36b.png\")",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5_test3)",
+      "Bash(python blocks/1171281174/_render.py)",
+      "Bash(python -c \"from PIL import Image; im=Image.open\\('blocks/1171281174/_renders/block.png'\\); im2=im.resize\\(\\(im.size[0]*2, im.size[1]*2\\), Image.LANCZOS\\); im2.save\\('blocks/1171281174/_renders/block_2x.png'\\); print\\('size:', im.size, '->', im2.size\\)\")",
+      "Bash(mkdir -p d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281179/assets d:/ad-hoc/kei/design_agent/figma_to_html_agent/blocks/1171281179/_renders)",
+      "Bash(curl -sSo title_icon.png \"http://localhost:3845/assets/b0e9fad5b03f4d9e368524976c20c9886392e17b.png\")",
+      "Bash(curl -sSo card_decor.png \"http://localhost:3845/assets/69b6281daa6320fdc36d844cfcfb086fcb102123.png\")",
+      "Bash(python blocks/1171281179/_render.py)",
+      "Bash(python -c \"from PIL import Image; im=Image.open\\('blocks/1171281179/_renders/slide.png'\\); im2=im.resize\\(\\(im.size[0]*2, im.size[1]*2\\), Image.LANCZOS\\); im2.save\\('blocks/1171281179/_renders/slide_2x.png'\\); print\\(im.size, '->', im2.size\\)\")",
+      "Bash(python -c \"from PIL import Image; im=Image.open\\('blocks/1171281179/_renders/slide.png'\\); im.resize\\(\\(im.size[0]*2, im.size[1]*2\\), Image.LANCZOS\\).save\\('blocks/1171281179/_renders/slide_2x.png'\\)\")",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5a_test1)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5b_test1)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5b_test2)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5b_test4)",
+      "Read(//tmp/**)",
+      "Read(//d/tmp/**)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5b_test5)",
+      "Bash(python run_mdx03_pipeline.py --phase-z2 --run-id mvp1.5b_test7)"
+    ],
+    "additionalDirectories": [
+      "d:\\ad-hoc\\kei\\design_agent\\templates\\blocks\\new",
+      "d:\\ad-hoc\\kei\\design_agent\\figma_to_html_agent\\blocks",
+      "d:\\ad-hoc\\kei\\design_agent\\figma_to_html_agent\\blocks\\1171281193\\assets",
+      "D:\\"
+    ]
+  },
+  "enabledMcpjsonServers": [
+    "figma-desktop"
+  ]
+}

.gitignore

@@ -9,3 +9,6 @@ build/
 .venv/
 node_modules/
 data/
+
+# session workspace (push X — 작업 흐름 trace, 사용자 결정 2026-05-08)
+forex/

.mcp.json

@@ -1,15 +1,8 @@
 {
   "mcpServers": {
-    "Framelink Figma MCP": {
+    "figma-desktop": {
-      "command": "cmd",
+      "type": "http",
-      "args": [
+      "url": "http://127.0.0.1:3845/mcp"
-        "/c",
-        "npx",
-        "-y",
-        "figma-developer-mcp",
-        "--figma-api-key=figd_s23TfSDL0hS97DIialy0R2P6QsoZQHfuGx1l_t-k",
-        "--stdio"
-      ]
     }
   }
 }

ARCHITECTURE_OVERVIEW.md

@@ -1,4 +1,12 @@
-# Design Agent 전체 구조 파악 리포트
+# ⚠ DEPRECATED — 이 문서는 2026-03-27 기준 스냅샷입니다
+
+> **최신 파이프라인 문서는 [`PIPELINE.md`](PIPELINE.md)를 참조하세요.**
+> 이 문서는 Type A/B 분기, B'/B'' 변형, Stage 1.7/1.8 등 현재 구조를 반영하지 않습니다.
+> 히스토리 참고용으로만 유지합니다.
+
+---
+
+# Design Agent 전체 구조 파악 리포트 (archived)
 
 **작성일:** 2026-03-27  
 **목표:** design_agent의 아키텍처, 파이프라인, 코드 구조를 체계적으로 이해

CLAUDE.md

@@ -12,10 +12,89 @@
 
 ---
 
-## 아키텍처 (Phase Q 파이프라인)
+## 위계 + 용어 (Phase Z 정리, 2026-04-28)
+
+> 매칭 시스템 (V1~V4) 통합 설계 시 정리. 상세는 [`IMPROVEMENT-REDESIGN.md`](IMPROVEMENT-REDESIGN.md) 4 장 참조.
+>
+> Phase Z 사전 작업 — Frame Zone 적용 분류 [`docs/architecture/FRAME-INTEGRATION-MAP.md`](docs/architecture/FRAME-INTEGRATION-MAP.md), Frame / Style / Token 인벤토리 [`docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md`](docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md).
+
+### 슬라이드 위계
+
+```
+[ slide ] 1280×720 (전체 슬라이드)
+   │
+   ├─ slide-title           ← MDX 대목차 제목 (자동 매핑)
+   ├─ slide-divider         (고정)
+   │
+   ├─ slide-body ≈ 1200×590 (콘텐츠 영역 — `templates/blocks/slide-base.html`)
+   │     │
+   │     └─ 레이아웃 (8-preset layout vocabulary; legacy hint = Type A/B/B'/B'')
+   │           │
+   │           └─ Zone (top / bottom_l / bottom_r 등)
+   │                 │
+   │                 └─ 프레임 (Figma 디자인 단위)
+   │
+   └─ slide-footer          ← MDX 대목차 결론 (자동 매핑)
+```
+
+### 용어
+
+| 용어 | 의미 |
+|---|---|
+| **슬라이드** | 1280×720 한 장 |
+| **slide-base** | 모든 슬라이드 공통 그릇 (배경 + 제목 + 구분선 + 결론 pill) — `templates/blocks/slide-base.html` |
+| **slide-body** | 본문 가용 영역 (≈ 1200×590) |
+| **레이아웃 (Layout)** | 8-preset layout vocabulary — slide-body 안 zone 분배 형태 (legacy hint = Type A/B/B'/B'') |
+| **Zone (영역)** | 레이아웃이 결정한 콘텐츠 구역 |
+| **Internal Region** | Zone 안의 placement / planning unit (Layer A) — content_object 를 배치하는 내부 영역 (SPEC v1 §2) |
+| **컨테이너 (Container)** | zone 의 px 명세 (코드 레벨) |
+| **프레임 (Frame)** | Figma 디자인 단위 (= 기존 "블록") — zone 안 |
+| **Frame Slot** | Frame 안의 declared placement slot (Layer B) — frame contract 가 선언하는 콘텐츠 placement target (SPEC v1 §3) |
+| **Layer A** | composition planning 의 zone-내 layer — content_object 를 Internal Region 으로 배치하는 단위 (SPEC v1 §1~§2) |
+| **Layer B** | frame contract 기반 frame-내 layer — 콘텐츠 매핑 대상인 Frame Slot 구조를 선언하는 단위 (SPEC v1 §3) |
+
+### MDX → 슬라이드 매핑
+
+| MDX 위치 | 슬라이드 위치 |
+|---|---|
+| `# 대목차 제목` | `slide-title` |
+| 본문 (`##` / `###`) | `slide-body` 안 (레이아웃 + zone + 프레임) |
+| `# 대목차 결론` | `slide-footer` |
+| `<details>` 팝업 | 슬라이드 위 별도 레이어 |
+
+Layer A planning telemetry is active in trace-only mode; render path activation remains the next axis.
+
+---
+
+## 아키텍처 — Phase Z 흐름 (5 단계)
+
+> 상세는 [`IMPROVEMENT-REDESIGN.md`](IMPROVEMENT-REDESIGN.md) 5 장 참조.
+
+```
+STAGE 1) MDX 분석 + 레이아웃 매칭 (8-preset layout vocabulary; legacy = Type A/B/B'/B'')
+STAGE 2) Zone 별 텍스트 1차 배치
+STAGE 3) Zone 별 프레임 매칭 (V1~V4; B4 frame_selection evidence integration pending)
+            ├ 매칭 완벽   → 텍스트 업데이트
+            ├ 매칭 어정쩡 → 디자인 참고 재구성
+            └ 매칭 안 됨  → 디자인 컨셉 바탕 재구성
+STAGE 4) 프레임 검토 + 컨테이너 조정 (5 차 Fallback)
+STAGE 5) HTML 조립 + 검증 + 출력
+```
+
+핵심 원칙 :
+- **MDX 1 파일 = 슬라이드 1 장** (절대 분할 X)
+- **텍스트 원문 무손실 보존** (본문 미리보기 + 팝업 원문)
+- **자유 디자인 금지** (항상 Figma 프레임 DB 참고)
+- **불일치 시 레이아웃 회귀** (콘텐츠 줄이지 않고 그릇 변경)
+
+---
+
+## 아키텍처 (Phase Q 파이프라인 — 기존)
 
 > Phase P(다후보 렌더링 비교) 실행 결과 20/100점. 업계 조사(Beautiful.ai, Napkin.ai, VASCAR 등) 기반으로 Phase Q에서 재설계.
 > 핵심 전환: "계산 먼저, AI 판단 나중에, 렌더링은 검증만"
+>
+> ⚠️ Phase Z (매칭 시스템 통합) 진행 후 이 섹션의 일부는 새 흐름으로 대체될 예정.
 
 ```
 [1단계] Kei 실장 (Opus) — AI 사고
@@ -65,30 +144,48 @@ reference 꼭지 있음 → sidebar-right
 나머지 → single-column
 ```
 
-### 역할 분리 (Phase R')
+### 역할 분리 (Phase Z)
+
+> ⚠️ Phase R' 의 역할 분리 (AI 가 HTML 구조 직접 생성) 는 **Phase Z 에서 폐기**. 아래는 Phase Z 기준.
 
 | 역할 | 담당 | 방식 | 하는 일 | 하지 않는 일 |
 |------|------|------|---------|------------|
-| Kei 실장 | Opus (Kei API) | AI | 꼭지 추출, 비중 판단, relation_type + expression_hint 부여, 최종 검수 | HTML 생성, 레이아웃 계산 |
+| Kei 실장 | Opus (Kei API) | AI | MDX 본문 분석 보조, 최종 검수 | HTML 생성, 레이아웃 계산 |
-| 컨테이너 계산 | 코드 | 결정론적 | Kei 비중 → 역할별 컨테이너 px 확정 | AI 판단 불필요 |
+| 레이아웃 결정 | 코드 | 룰 매칭 | MDX 콘텐츠 → 8-preset layout vocabulary 기반 slide/zone topology 선택 (legacy hint = Type A/B/B'/B'') | — |
-| 프리셋 선택 | 코드 | 규칙 | 실장의 role에 따라 프리셋 자동 선택 | AI 판단 불필요 |
+| 컨테이너 계산 | 코드 | 결정론적 | zone 별 px 확정 (`space_allocator`) | — |
-| **HTML 생성** | **AI (Kei API)** | **AI** | **콘텐츠 전달 의도에 맞는 HTML 구조를 직접 생성. 블록 CSS를 참고하되 구조는 AI가 결정.** | 블록 "선택" 안 함. 슬롯 "채우기" 안 함. |
+| 프레임 매칭 | 코드 (V1~V4; B4 frame_selection evidence integration pending) | 결정론적 | zone ↔ Figma 프레임 매칭 | — |
-| 검증 | 코드 + AI | Selenium + 비전 모델 | overflow 측정, 시각 품질 평가 | |
+| **콘텐츠 매핑** | **코드 + AI** | **하이브리드** | **zone 안 콘텐츠 / 텍스트를 프레임 슬롯에 배치 / 다듬기 / 변형** | **HTML 구조 생성 X** |
+| HTML 조립 | 코드 (Jinja2) | 결정론적 | `slide-base` + 프레임 + 슬롯 콘텐츠 합쳐서 final.html | AI 호출 X |
+| 검증 | 코드 + AI | Selenium + Vision | overflow 측정, 시각 품질 평가 | — |
 
-### HTML 생성 원칙 (Phase R')
+### HTML 생성 원칙 (Phase Z)
 
 ```
-블록이 구조를 결정 (P=Q=R, 실패) → 콘텐츠가 구조를 결정 (R', 접근 C)
+블록이 구조를 결정 (P=Q=R, 실패)
+콘텐츠가 구조를 결정 (R', 폐기 — AI 가 HTML 직접 생성하면 회귀 가능성 큼)
+→ slide-base + 프레임 DB 가 구조를 결정, AI 는 zone 안 콘텐츠만 (Phase Z)
 ```
 
-- AI가 콘텐츠 전달 의도(expression_hint)에 맞는 HTML 구조를 직접 생성
+**Phase Z 의 핵심 원칙**:
-- 기존 38개 블록의 CSS(색상, 폰트, 배경, radius)를 **스타일 참고**로 활용
+- **HTML 구조** = `slide-base.html` + 코드 (Jinja2) 가 결정 (절대 AI 가 생성 X)
-- 블록을 **"선택"하지 않음**. topic 합침/분리, 포함 관계, 핵심 메시지 분리 가능
+- **AI 의 역할** = zone 안 콘텐츠 매핑 / 텍스트 다듬기 / 디자인 변형 (콘텐츠 단위)
-- 디자인 토큰(CSS 변수)으로 품질 제약 + Selenium 측정 + 비전 모델 검증
+- **프레임 DB 참고 필수** — 자유 디자인 금지
+- **MDX 원문 무손실 보존** (본문 preview, 팝업에 원문)
+
+⚠️ **Phase R' 회귀 방지**: AI 한테 "HTML 구조 만들어줘" 같은 호출 절대 X. AI 호출은 zone 안 콘텐츠 단위로만.
 
 ---
 
-## 핵심 프로세스
+## 핵심 프로세스 (구 Phase Q 기준 — Phase Z 에서 대체됨)
+
+> ⚠️ **아래 흐름은 구 Phase Q 기준의 5 단계 (Kei 실장 → 디자인 팀장 → 텍스트 편집자 → 디자인 실무자 → 재검토). Phase Z 에서 대체됨.**
+>
+> **신규 흐름은 위 "아키텍처 — Phase Z 흐름 (5 단계)" 섹션 또는 [IMPROVEMENT-REDESIGN.md](IMPROVEMENT-REDESIGN.md) 5 장 따름.**
+>
+> ⚠️ **특히 Phase Z 와 충돌하므로 무시할 것**:
+> - "페이지 분리" → Phase Z: MDX 1 파일 = 슬라이드 1 장 (절대 분할 X)
+> - "텍스트 압축 / 요약" → Phase Z: MDX 원문 무손실 보존 (본문 preview, 팝업 원문)
+> - "AI 5 단계" → Phase Z: AI 호출은 zone 안 콘텐츠 단위로만 (HTML 구조 / 레이아웃 / 프리셋 결정 X)
 
 ```
 사용자 콘텐츠 입력 (텍스트/MDX 붙여넣기 또는 파일 업로드)

IMPROVEMENT-REDESIGN.md

@@ -0,0 +1,578 @@
+# Pipeline 개선 — 매칭 시스템 통합 (Redesign)
+
+> **작성일**: 2026-04-28
+> **목적**: 매칭 시스템 (V1~V4) 테스트 결과를 기존 design_agent pipeline 에 통합. AI 호출을 줄이고 결정론적 매칭 + 정밀한 공간 관리를 결합.
+> **상태**: 설계 단계. 실행은 사용자 승인 후 단계적 진행.
+
+---
+
+## 1. 배경 / 문제의식
+
+### 기존 pipeline 의 한계
+
+| 문제 | 현황 |
+|---|---|
+| AI 호출 과다 | Stage 1A / 1B / 1B-ST / 1.7 / 1.8 / 2 / 4 — 5~6 회 호출 |
+| Type A/B/B'/B'' 하드코딩 | 콘텐츠별 전용 코드 분기 (오답노트 #2 위반 우려) |
+| 블록 catalog 50+ 개 vs 실제 사용 7.9% | Phase P 결과 — 다양성 부족 |
+| 유령 블록 / overflow 출력 | Phase Q 에서 일부 해결 |
+
+### 매칭 시스템 (V1~V4) 테스트 결과
+
+`tests/matching/` 에서 별도 검증한 결과:
+
+| 항목 | 결과 |
+|---|---|
+| TARGET 정답률 | 3/4 (75%) — Logistic Regression 가중치 학습 + LOOCV 4/4 검증 |
+| BM25 / IDF 비교 | 현 방식 우위 (4/4 vs 3/4) |
+| V4 slot 축 ablation | Top-1 매칭 7/7 동일 — slot 축 frame 선별 무영향 확인 |
+| 발견된 약점 | 8 가지 (`tests/PROGRESS.md` 참조) |
+
+### 통합 필요성
+
+매칭 시스템이 **콘텐츠 분석 / 디자인 추천** 부분을 코드로 대체 가능함을 확인. 단, 1280×720 안 정밀 공간 관리는 매칭 시스템이 다루지 않으므로 기존 pipeline 의 공간 관리 로직 (`space_allocator`, `fit_verifier`, `slide_measurer`) 은 유지 필요.
+
+→ **콘텐츠 분석은 매칭 시스템, 공간 관리는 기존 pipeline** 으로 책임 분리.
+
+---
+
+## 2. 영역 분리 — 3 가지
+
+| 영역 | 무엇을 하나 | 누가 담당 |
+|---|---|---|
+| **A. 콘텐츠 분석 / 디자인 추천** | "이 MDX 콘텐츠에 어떤 디자인이 어울리나?" | **매칭 시스템 V1~V4 (신규)** |
+| **B. 공간 관리 / 사이즈 조정** | "1280×720 안에 어떻게 끼워 넣나? overflow 안 나게?" | **기존 pipeline (유지)** |
+| **C. HTML 생성 / 슬롯 채움** | "선택된 디자인에 MDX 텍스트를 어떻게 넣나?" | **기존 + V4 label 분기** |
+
+### 핵심 원칙
+
+- A 는 매칭 시스템으로 완전 대체 (AI 호출 줄임)
+- B 는 절대 손대지 않음 (정밀한 공간 관리는 기존 로직이 검증됨)
+- C 는 매칭 결과의 label 에 따라 분기 (코드 / AI 1회 / Sonnet 재구성)
+
+---
+
+## 3. 핵심 결정 사항 (확정)
+
+### 3.1 처리 단위
+
+```
+MDX 1 파일 = 대목차 1개 = 슬라이드 1장
+   └ 중목차들 = 슬라이드 안의 frame 들 (조합)
+       └ 소목차들 = 더 작은 단위 frame 또는 슬롯
+```
+
+### 3.2 매칭 알고리즘 — 소→중→대 합치기 룰
+
+```
+[1단계] 모든 소목차에 V1~V4 매칭 시도
+   각 소목차의 best frame 도출
+
+[2단계] 같은 중목차 내 소목차 매칭이 비슷하면 → 중목차로 묶어서 다시 매칭
+   더 큰 frame 단위로 합치기 가능한지 확인
+
+[3단계] 중목차들이 비슷하면 → 대목차로 묶어서 매칭
+   슬라이드 1장 전체를 1 frame 으로 처리 가능한지 확인
+
+→ 가장 적합한 합치기 단위 + frame 조합 채택
+```
+
+### 3.3 레이아웃 프리셋
+
+기존 design_agent 의 4 가지 Type 으로 시작:
+
+| 프리셋 | 조건 | 비고 |
+|---|---|---|
+| Type A | 참조 자료 (용어 정의 등) 별도 존재 | 기존 그대로 유지 (오답노트 #7) |
+| Type B | 본문 흐름만 | 기존 그대로 |
+| Type B' | 카드형 + 표 | 기존 그대로 |
+| Type B'' | 색상바 + 여백 분리 | 기존 그대로 |
+
+→ 4 개로 시작. 운영하면서 부족하면 추가.
+
+### 3.4 V4 label 분기
+
+매칭 결과의 label 이 후속 작업 비용을 결정:
+
+| label | confidence | 후속 작업 | 비용 |
+|---|---|---|---|
+| use_as_is | ≥ 0.90 | 슬롯에 텍스트만 매핑 | 자동, AI 0회 |
+| light_edit | ≥ 0.75 | AI 가 슬롯 텍스트 다듬기 | AI 1회 |
+| restructure | ≥ 0.60 | 가장 유사 frame 참고 + Sonnet 변형 | 사람 + AI |
+| reject | < 0.60 | 대안 frame 시도 → 그래도 안 되면 유사 frame 참고 | 사람 + AI |
+
+### 3.5 자유 HTML 생성 금지
+
+→ 항상 frame DB 의 어떤 frame 을 참고하여 생성. Phase R' 식 자유 디자인은 X.
+
+### 3.6 텍스트 원문 보존 원칙 (절대 룰)
+
+> **슬라이드 본문은 preview / 요약 가능하지만, MDX 원문은 popup / detail 에 무손실 보존한다.**
+
+- 슬라이드 본문에 표시되는 것 = 일부 / 핵심 / preview 가능
+- 단, 원문이 잘리거나 사라지지 않음 — 항상 팝업 / "자세히 보기" 에 무손실 저장
+- "텍스트 압축 / trim / restructure" 같은 처리 금지 (오답노트 #5 준수)
+- 안 들어가면 슬라이드를 키우는 게 아니라 → 본문은 preview, 팝업에 원문 보존
+- AI 가 텍스트를 "줄여서 채워 넣지" 않는다 — preview 로 가공 후, 원문은 detail 에 보존
+
+### 3.7 팝업 처리 룰
+
+- MDX 에 팝업 콘텐츠 (`<details>`) 가 있으면 별도 보존
+- 슬라이드 1장 룰 절대 유지 (2장으로 분리 X)
+- 처리: **본문 요약 / 일부만 표시 + "자세히 보기" 클릭 → 팝업으로 전체**
+- 전체를 팝업으로 빼는 것 X
+- 팝업 콘텐츠도 MDX 원문 무손실 (3.6 원칙 적용)
+
+---
+
+## 4. 위계 + 용어 정리
+
+### 4.1 슬라이드 위계
+
+```
+[ 슬라이드 ] 1280 × 720
+   │
+   ├─ slide-title         ← MDX 대목차 제목 (자동 매핑)
+   ├─ slide-divider       (고정)
+   │
+   ├─ slide-body  ≈ 1200 × 590   ─ ★ 여기에 콘텐츠
+   │     │
+   │     └─ 레이아웃 (Type A / B / B' / B'')
+   │           │
+   │           └─ Zone  (top / bottom_l / bottom_r 등)
+   │                 │
+   │                 └─ 프레임 (Figma 디자인)
+   │
+   └─ slide-footer        ← MDX 대목차 결론 (자동 매핑)
+```
+
+### 4.2 용어
+
+| 용어 | 의미 | 단위 / 위치 |
+|---|---|---|
+| **슬라이드** | 1280×720 한 장 | 가장 큰 단위 |
+| **slide-base** | 배경 + 제목 + 구분선 + 결론 pill (모든 슬라이드 공통 그릇) | `templates/blocks/slide-base.html` 고정 |
+| **slide-body** | 본문 가용 영역 (≈ 1200×590) | slide-base 안 |
+| **레이아웃 (Layout)** | Type A / B / B' / B'' (4 가지 프리셋) | slide-body 안 |
+| **Zone (영역)** | 레이아웃이 결정한 콘텐츠 구역 (top / bottom 등) | 레이아웃 안 |
+| **컨테이너 (Container)** | zone 의 px 명세 (코드 레벨 표현) | zone 의 구체화 |
+| **프레임 (Frame)** | Figma 디자인 단위 (= 기존 "블록") | zone 안 |
+
+### 4.3 MDX → 슬라이드 매핑
+
+| MDX 위치 | 슬라이드 위치 |
+|---|---|
+| `# 대목차 제목` | `slide-title` |
+| 본문 (`##` / `###` 중·소목차) | `slide-body` 안 — 레이아웃 / zone / 프레임 |
+| `# 대목차 결론` (있을 시) | `slide-footer` |
+| `<details>` 팝업 콘텐츠 | 슬라이드 위 별도 레이어 |
+
+### 4.4 매칭 시스템 (V1~V4) 의 frame 단위 — 명확화
+
+- 매칭 시스템에서 **frame 32 개를 슬라이드 1장 단위로 검증** 함 (예: Frame 18 = BIM/DX 비교 슬라이드 통째로)
+- 새 흐름에서는 **frame = zone 안 디자인 단위**
+- → frame DB 라벨링 재검토 필요 (사이즈 분류: "슬라이드 전체 / zone 1 개 / 작은 박스")
+- 8.1 항목 (32 frame 사이즈 라벨링) 의 핵심 작업
+
+---
+
+## 5. 새 Pipeline Flow
+
+```
+═══════════════════════════════════════════════════════════════
+[전처리 — 한 번만, 결과 캐싱]
+═══════════════════════════════════════════════════════════════
+
+T-0. Figma frame DB 구축
+     · 각 frame 의 키워드 (핵심/세트/연관) 라벨링       ✅ 완료
+     · 각 frame 의 구조 (layout, family, relation_type,
+                         cardinality, content_affinity,
+                         structure_intent, slots,
+                         alternative_patterns) 라벨링    ✅ 완료
+     · 각 frame 의 사이즈 비율 (전체 / 절반 / 1/3 / 박스)  ✅ 대체 완료 (Zone 적용 분류 — `docs/architecture/FRAME-INTEGRATION-MAP.md` 의 `zone_direct/adapt/extract/reference_only`)
+     · 각 frame 의 스타일 / 시각 언어 인벤토리                ✅ 완료 (`docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md`)
+
+T-1. (새 frame 추가 시) 자동 라벨링 룰
+     · 새 Figma frame 입력 → V3 의 detect_mdx_v2_profile 로 자동 감지
+     · 사람이 검수 후 DB 추가
+
+T-2. 레이아웃 프리셋 정의 (4 개)
+     · 각 프리셋의 grid / area 정의
+     · 어떤 frame 사이즈 조합에 어울리나 메타 정보
+
+═══════════════════════════════════════════════════════════════
+[실행 — MDX 1 파일 처리 = 슬라이드 1 장 생성]
+═══════════════════════════════════════════════════════════════
+
+STAGE 1)  MDX 분석 + 레이아웃 매칭                         [코드]
+          · MDX 정규화 + 외부 컴포넌트 인라인 (Phase Y)
+          · 팝업 콘텐츠 (<details>) 별도 보존
+          · 대 / 중 / 소목차 트리 추출
+          · 콘텐츠 성격 분석 (V3 의 detect_mdx_v2_profile)
+          · 4 가지 레이아웃 (Type A / B / B' / B'') 중 1 개 결정
+          · MDX 대목차 제목 → slide-title
+          · MDX 대목차 결론 → slide-footer
+
+STAGE 2)  Zone 별 텍스트 1 차 배치                         [코드]
+          · 레이아웃이 결정한 zone 들에 콘텐츠 분배
+          · 어떤 중 / 소목차가 어떤 zone 에 갈지 결정
+          · 컨테이너 (zone 의 px) 계산 — space_allocator.py
+
+STAGE 3)  Zone 별 프레임 매칭 (V1~V4 매칭 시스템)           [코드 + label 분기 AI]
+          ┌──────────────────────────────────────────────┐
+          │ 각 zone 의 콘텐츠와 Figma 프레임 DB 매칭      │
+          │ V1 키워드 → V2 의미 → V3 구조 → V4 종합 판정 │
+          │                                                │
+          │ 매칭 결과 분기:                                │
+          │   ├ 매칭 완벽 (use_as_is)   → 텍스트 업데이트 │
+          │   ├ 매칭 어정쩡 (light_edit │
+          │   │            / restructure) → 디자인 참고   │
+          │   │              재구성 (Sonnet)              │
+          │   └ 매칭 안 됨 (reject)    → 디자인 컨셉      │
+          │                              바탕 재구성       │
+          │                                                │
+          │ 자유 디자인 금지 — 항상 프레임 DB 참고        │
+          └──────────────────────────────────────────────┘
+
+STAGE 4)  프레임 내용 검토 + 컨테이너 조정                 [코드 + AI fallback]
+          · zone 별 검증 (넘침 / 공란 / 적정 / 불균형)
+          · 보정:
+              ├ 넘침   → 본문 미리보기 + "자세히 보기" 팝업
+              │           (MDX 원문 절대 줄이지 않음 — 3.6 원칙)
+              ├ 공란   → MDX 팝업 콘텐츠 있으면 일부 끌어옴
+              ├ 적정   → 그대로
+              └ 불균형 → 레이아웃 자체 부적절 → STAGE 1 회귀
+                         (5 차 Fallback — 6 장 참조)
+
+STAGE 5)  HTML 조립 + 검증 + 출력                          [코드 + AI]
+          · slide-base.html (배경 + 제목 + 구분선 + 결론 pill)
+              + slide-body 안 (레이아웃 + zone + 프레임)
+              + slide-title / slide-footer 채움
+              + 팝업 레이어
+          · Jinja2 렌더링
+          · 실측 검증 (Selenium) — 넘침 차단
+          · 시각 검증 (Vision — Opus) — 품질 평가
+          · final.html 출력
+```
+
+---
+
+## 6. 컨테이너 검증 + Fallback 룰 (STAGE 4 상세)
+
+### 6.1 검증 케이스 분류
+
+```
+[모든 컨테이너 검증 결과 종합]
+
+케이스 1) 모두 적정
+   → 다음 단계 진행
+
+케이스 2) 일부 Overflow + 나머지 적정
+   → 본문 요약 + "자세히 보기" 팝업 처리
+
+케이스 3) 일부 Underflow (특정 컨테이너만 공란) + 나머지 정상
+   ❗ 레이아웃 잘못 → STAGE 1 회귀 (레이아웃 재선택)
+
+케이스 4) 일부 Overflow + 일부 Underflow 동시
+   ❗ 레이아웃 잘못 (불균형) → STAGE 1 회귀 (레이아웃 재선택)
+
+케이스 5) 모두 Underflow + 채울 콘텐츠 없음
+   ✅ 공란 허용 (콘텐츠 자체가 적은 슬라이드)
+```
+
+### 6.2 5 차 Fallback (불균형 검출 시)
+
+```
+[1차] 매칭 → 적합 프리셋 → 검증
+   OK → 종료
+   불균형 → 2차
+
+[2차] 다른 프리셋 시도 (예: Type B → Type B')
+   또는 frame 합치기 단위 변경 (소→중 또는 중→대)
+   OK → 종료
+   불균형 → 3차
+
+[3차] 매칭 결과 자체 변경 (Top-1 → Top-2 frame)
+   OK → 종료
+   불균형 → 4차
+
+[4차] AI 콘텐츠 조정 의뢰 (Sonnet 1회)
+   현재 매칭된 frame / zone / container 는 유지한 채,
+   zone 안 콘텐츠 분량과 슬롯 매핑만 AI 로 조정한다.
+     · 긴 텍스트 → 본문 preview + 팝업 원문 분리 제안
+     · 슬롯 의미 매핑 미세 조정
+     · 불필요한 반복 표현을 preview 에서 정리
+     · 원문은 popup / detail 에 무손실 보존
+   ⚠️ AI 는 zone 안 콘텐츠만 조정한다.
+   ⚠️ 레이아웃 / 프리셋 / 새 frame 결정 / HTML 구조 생성은 코드만 수행한다.
+   OK → 종료
+   안 되면 → 5차
+
+[5차] 단일 프리셋 강제 (Type A 또는 가장 큰 frame 만 사용)
+   나머지 콘텐츠 → "자세히 보기" 팝업
+   OK → 종료
+   그래도 안 되면 → 사람 개입 알림
+```
+
+### 6.3 Fallback 단계별 비율 추정
+
+| 단계 | 종료 비율 (가설) | 비용 |
+|---|---|---|
+| 1차 | 80%+ | 낮음 (코드만) |
+| 2~3차 | 15% | 낮음 (코드만) |
+| 4차 (AI) | 4% | 중간 |
+| 5차 (단일 + 팝업) | 1% 이하 | 낮음 |
+| 사람 개입 | 매우 드물게 | 최후 수단 |
+
+→ 실제 비율은 MDX 데이터로 검증 필요. 일단 가설.
+
+---
+
+## 7. 단계적 진행 계획
+
+### Phase Z-0 — 매칭 시스템 (✅ 완료)
+
+```
+✅ V1~V4 매칭 시스템 구축
+✅ 32 frame 키워드 + 구조 라벨링
+✅ TARGET 3/4 정답
+✅ 보고서 (DECK 1~7)
+```
+
+### Phase Z-1 사전 작업 — 진행 중
+
+```
+✅ 완료 (2026-04-28)
+  · Frame Integration Map (32 frame Zone 적용 분류)
+    → docs/architecture/FRAME-INTEGRATION-MAP.md
+  · Frame Style Inventory (32 frame + 18 token + 6 legacy)
+    → docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md
+
+⬜ 미진행 (Phase Z-1 본격 진입 전)
+  · catalog / runtime 설계 prep
+  · slide-base 검증
+
+⚠️ 미실행 / 의도적으로 보류 (승인 전)
+  · 기존 templates/blocks 삭제 / 교체
+  · catalog / runtime 구현
+  · templates/styles/frame-patterns 신규 파일 생성
+  · 새 token (gap_candidate) 추가
+```
+
+### Phase Z-1 — 통합 prototype (본격)
+
+```
+[목표] MDX 03 (회귀 기준) 으로 매칭 시스템 + 기존 pipeline 통합 검증
+
+작업:
+  · Stage 1.7 (블록 선택) 만 V4 로 교체
+  · 32 frame ↔ Type B/B'/B'' 매핑 테이블 작성
+  · MDX 03 결과 기존과 비교 (회귀 통과)
+
+완료 기준:
+  · MDX 03 기존 결과 대비 overflow 없음
+  · 텍스트 누락 없음 (MDX 원문 무손실 보존, 3.6 원칙)
+  · AI 호출 수 감소 (Stage 1.7 의 Kei 1회 제거)
+  · 옵션 플래그 off 시 동일 경로 복귀 (회귀 방지)
+
+리스크: 낮음 (한 곳만 교체)
+산출물: 매칭 시스템이 기존 pipeline 안에서 작동 확인
+```
+
+### Phase Z-2 — 매칭 + 프리셋 통합
+
+```
+[목표] Type A/B/B'/B'' 프리셋과 매칭 결과 연결
+
+작업:
+  · 매칭 결과 → 4 프리셋 중 1 개 자동 선택 룰
+  · 합치기 룰 (소→중→대) 구현
+  · MDX 02, 01 적용 검증
+
+완료 기준:
+  · MDX 03 / 02 / 01 모두 매칭 + 프리셋 자동 선택 작동
+  · 합치기 룰이 소목차 → 중목차 → 대목차 순서로 작동
+  · MDX 원문 무손실 유지 (3.6 원칙)
+
+리스크: 중간
+산출물: MDX 03/02/01 모두 매칭 + 프리셋 자동
+```
+
+### Phase Z-3 — 컨테이너 검증 + Fallback
+
+```
+[목표] 컨테이너 별 검증 + 5 차 Fallback 로직
+
+작업:
+  · 불균형 검출 룰 (Overflow / Underflow / 동시)
+  · STAGE 4 의 1~5 차 Fallback 단계 구현
+  · 팝업 처리 룰 (안 들어가면 자세히 보기)
+
+완료 기준:
+  · 컨테이너 별 검증 (Overflow / Underflow / 불균형) 작동
+  · Fallback 5 차 단계 작동 (각 단계 독립 검증)
+  · 팝업 처리 — preview 본문 + 무손실 팝업
+
+리스크: 중간 ~ 높음
+산출물: 안정적 자동 처리
+```
+
+### Phase Z-4 — 전체 통합 + 검증
+
+```
+[목표] 새 pipeline 으로 모든 MDX 처리 + 회귀 확인
+
+작업:
+  · MDX 03 / 02 / 01 회귀
+  · Selenium + Vision 검증
+  · AI 호출 수 / 처리 시간 측정
+
+완료 기준:
+  · MDX 03 / 02 / 01 모두 새 pipeline 통과
+  · Vision 품질 평가 합격
+  · AI 호출 수 / 처리 시간 기존 대비 감소
+
+산출물: 새 pipeline 완성
+```
+
+---
+
+## 8. 검토 / 결정 필요한 항목
+
+### 8.1 32 frame 의 사이즈 라벨링
+
+frame DB 에 "이 frame 은 슬라이드 전체 / 위 절반 / 좌측 1/3 / 작은 박스" 같은 사이즈 분류 필요.
+
+| 옵션 | 방법 |
+|---|---|
+| (a) 사용자 직접 분류 | 정확하지만 시간 소요 |
+| (b) Figma 캔버스 사이즈 자동 추정 | 빠르지만 부정확 가능 |
+| (c) 매칭 시스템의 기존 라벨 (layout) 활용 + 보완 | 절충 |
+
+→ **추천 (c)** : 기존 layout 라벨 (compare-rows / table-2col / cards-3col 등) 을 사이즈 라벨에 매핑하는 룰 작성.
+
+### 8.2 프리셋 자동 선택 룰
+
+frame 들의 사이즈 / 개수 → 4 프리셋 중 1 개 선택하는 룰.
+
+예시:
+- frame 1 개 + 사이즈 = 슬라이드 전체 → Type A 또는 Type B 단일
+- frame 2 개 + 사이즈 = 위/아래 절반 → Type B (상단 + 하단)
+- frame 2 개 + 사이즈 = 좌/우 절반 → Type A (사이드바)
+
+### 8.3 합치기 룰 종료 조건
+
+소→중→대 합치기 룰에서 어디까지 합칠지 결정:
+- 소목차 매칭 결과가 "비슷" 하다는 기준은?
+- 같은 frame_id ? 같은 layout family ? V4 axes 일부 일치 ?
+
+### 8.4 슬롯 매핑 — 코드 + AI 하이브리드 비율
+
+- 어디까지 코드 휴리스틱? (제목 → title 같은 명확한 것)
+- 어디부터 AI? (의미 매핑 / 사이즈 조정 / 텍스트 다듬기)
+
+---
+
+## 9. 회귀 방지 / 안전 원칙
+
+### 9.1 기존 작동 코드 보존
+
+- **Type A 코드** (오답노트 #7) — 절대 건드리지 않음
+- **공간 관리 로직** (`space_allocator`, `fit_verifier`, `slide_measurer`) — 그대로 유지
+- **Phase Y 진행 중 작업** — MDX 외부 컴포넌트 처리 그대로
+
+### 9.2 회귀 검증
+
+- 단계마다 **MDX 03 (회귀 기준)** 결과 기존과 비교
+- 변경 전 / 변경 후 다음 항목 측정:
+  - 최종 HTML 의 시각 결과 (스크린샷 비교)
+  - AI 호출 수
+  - 처리 시간
+  - overflow 발생 여부
+
+### 9.3 옵션 플래그 도입
+
+```
+USE_MATCHING_SYSTEM = False  # 기본값
+```
+
+- 새 기능은 플래그로 도입
+- 문제 발생 시 즉시 기존 경로로 fallback
+- 안정화 후 기본값 True
+
+### 9.4 핵심 원칙 (오답노트.md 준수)
+
+- **거짓말 금지** — 못 하면 못 한다고 명시
+- **하드코딩 금지** — 결과물 고치지 말고 프로세스 고침
+- **검증 없이 넘어가지 마라** — 단계마다 실측 + 회귀
+- **텍스트 원문 무손실 보존** — 슬라이드 본문은 preview / 일부만 표시 가능, MDX 원문은 팝업 / detail 에 무손실 보존 (3.6 원칙)
+- **프로세스 만들어라** — 매번 사고하여 판단 (AI 든 코드든)
+
+---
+
+## 10. 참고 문서
+
+### 우선순위 — 충돌 시 어느 문서가 최신인가
+
+**매칭 시스템 관련**:
+- ✅ 최신 기준 = `tests/PIPELINE.md` (V1~V4 통합 정리)
+- ⚠️ `tests/matching/CURRENT_STATUS.md` 등 옛 문서는 **과거 기록 (참조 X)**
+- 옛 문서에 "V2/V3/V4 미완료" 로 적혀 있어도 무시. 실제는 모두 완료.
+
+**design_agent 전체**:
+- ✅ 최신 기준 = `PIPELINE.md` + 이 문서 (`IMPROVEMENT-REDESIGN.md`)
+- ⚠️ `ARCHITECTURE_OVERVIEW.md` 는 **deprecated** (2026-03-27 스냅샷, Type A/B 분기 등 미반영)
+
+### 매칭 시스템 (V1~V4)
+
+| 문서 | 위치 |
+|---|---|
+| 매칭 시스템 V1~V4 통합 정리 | `tests/PIPELINE.md` |
+| 매칭 시스템 진행 / 약점 | `tests/PROGRESS.md` |
+| 매칭 시스템 단계별 계획 | `tests/PLAN.md` |
+| 매칭 시스템 코드 + 결과 + 보고서 | `tests/pipeline/` |
+| 매칭 시스템 원본 (보존) | `tests/matching/` |
+
+### 기존 design_agent
+
+| 문서 | 위치 |
+|---|---|
+| 현재 pipeline 흐름 | `PIPELINE.md` |
+| 전체 Phase 이력 | `PROGRESS.md` |
+| 단계별 계획 | `PLAN.md` |
+| 절대 원칙 | `오답노트.md` |
+| 프로젝트 규칙 | `CLAUDE.md` |
+| README | `README.md` |
+
+### 보고서 (임원 보고용)
+
+| 문서 | 위치 |
+|---|---|
+| DECK 1~7 (TARGET / Holdout / 방법 / DB / 키워드) | `tests/pipeline/reports/DECK_*.html` |
+
+---
+
+## 11. 리스크 + 대응 방안
+
+설계안에서 실행계획으로 넘어갈 때 고려해야 할 리스크.
+
+| # | 리스크 | 대응 방안 |
+|---|---|---|
+| 1 | **V4 가 디자인 적합성은 보지만 공간 적합성은 보지 않음** | 기존 공간 관리 (B 영역, `space_allocator` / `fit_verifier`) 그대로 유지. STAGE 4 컨테이너 검증으로 보완. V4 confidence 와 별개로 컨테이너 단위 overflow / underflow 측정 |
+| 2 | **slot 의미 매핑 부재** (BIM → col_a_label 같은 매핑 없음) | STAGE 3 (zone 별 프레임 매칭) 의 슬롯 매핑에 AI 1회 호출 (Sonnet). 또는 frame DB 에 매핑 룰 사전 정의. 매칭 시스템의 slot 축 ablation 결과 — 이 영역은 별도 작업 필요 |
+| 3 | **32 frame DB 의 사이즈 라벨 부족** | 8.1 항목 결정 후 라벨링 작업 (사용자 직접 또는 매칭 시스템의 layout 라벨 활용). Phase Z-1 시작 전 완료 필요 |
+| 4 | **기존 Type B'/B'' 하드코딩 관성 재발 위험** | 4 프리셋 안에서만 조합. 새 콘텐츠별 전용 코드 절대 금지 (오답노트 #2). 새 변형 필요 시 — 코드 분기 추가 X, frame DB 또는 프리셋 추가로 해결 |
+| 5 | **보고서용 매칭 성능 ≠ 실제 렌더 품질** | TARGET 3/4 정답률은 매칭 단독 성능. 실제 슬라이드 품질은 Phase Z-1 ~ Z-4 단계마다 MDX 03 실 렌더 + Vision 평가 회귀 |
+| 6 | **MDX 분석 키워드 사전의 부정확성** (V3) | Hybrid 룰 — 코드 자동 + Kei fallback (신뢰도 낮을 때). 또는 추후 LLM 분석으로 교체 (`tests/PROGRESS.md` 의 Phase E.1, E.2) |
+| 7 | **합치기 룰 (소→중→대) 무한 재시도 위험** | Fallback 5 차로 명확히 종료 (STAGE 4). 각 단계 최대 1 회 시도. 5 차 후엔 사람 개입 알림 |
+| 8 | **매칭 시스템의 02-2.2 매칭 실패 사례** | 매칭 시스템 자체 약점 (`tests/PROGRESS.md` 약점 #1). Phase Z-1 진행 전 frame 14 의 anchor_sets 재라벨링 필요 (사전 작업) |
+
+---
+
+## 다음 단계
+
+1. **이 문서 검토** — 사용자 + 협업자
+2. **검토 사항 (7장) 결정** — 4 가지 항목
+3. **리스크 대응 (11장) 사전 작업** — 32 frame 사이즈 라벨링 + frame 14 재라벨링
+4. **Phase Z-1 시작** — 통합 prototype
+5. **단계별 회귀 검증** — MDX 03 기준

PIPELINE.md

@@ -0,0 +1,304 @@
+# Design Agent 파이프라인 현황
+
+> **최종 갱신:** 2026-04-13
+> **목적:** 새 세션의 AI가 이 문서만 읽으면 파이프라인 전체를 이해하고 작업할 수 있도록 한다.
+
+---
+
+## 1. 전체 흐름 요약
+
+```
+MDX 입력
+  ↓
+[Stage 0]  MDX 정규화              (코드)
+  ↓
+[Stage 1A] Kei 실장 — 꼭지 추출     (AI: Opus)
+           → layout_template: A 또는 B 선택
+  ↓
+[Stage 1B] 컨셉 구체화              (AI: Opus)
+           → relation_type, expression_hint, source_data
+  ↓
+[Stage 1B-ST] 구조화 텍스트 생성     (AI: Opus)
+           → structured_text per topic
+  ↓
+[Stage 1.5a] 컨테이너 계산          (코드: 결정론적)
+           → FontHierarchy, ContainerSpec, Preset
+  ↓
+[Stage 1.7] 블록 레퍼런스 선택       (코드 + AI 1회)
+           → relation_type → 카테고리 → 필터 → 블록 결정
+  ↓
+[Stage 1.8] 적합성 검증 + 보강       (코드 + Selenium + AI)
+           → overflow 감지 → Kei 에스컬레이션 → 재배분
+  ↓
+[Stage 1.5b] 디자인 예산 계산        (코드)
+  ↓
+[Stage 2]  HTML 생성                 (Type에 따라 다름)
+           → Type B/B'/B'': block_assembler (코드)
+           → Type A: Sonnet 재구성 (AI, 미완성)
+  ↓
+[Stage 3]  렌더링 조립               (Type A만, Jinja2)
+  ↓
+[Stage 4]  검증                     (Selenium + Opus Vision)
+           → overflow 측정 + 스크린샷 품질 평가
+  ↓
+최종 HTML 출력 (data/runs/{id}/final.html)
+```
+
+---
+
+## 2. 레이아웃 유형 (Type A / B / B' / B'')
+
+### 2.1 Kei가 선택하는 유형: A와 B
+
+Kei 프롬프트(`src/kei_client.py:34-46`)에서 A 또는 B를 선택한다.
+
+| 유형 | 조건 | Zone 구조 |
+|------|------|-----------|
+| **Type A** | 참조자료(용어 정의, 부록 등)가 별도로 존재 | body(배경+본심) + sidebar(첨부) + footer(결론) |
+| **Type B** | 본문 흐름만. 배경/첨부가 없거나 억지로 만들어야 하면 | top + bottom_left + bottom_right + footer |
+
+### 2.2 Type B 변형: B'과 B''
+
+B'과 B''은 **Kei가 선택하지 않는다.** 특정 MDX 테스트 과정에서 하드코딩한 변형이다.
+
+| 변형 | 생성 경위 | 차이점 | 코드 위치 |
+|------|----------|--------|----------|
+| **B** | 범용 | 상단(전체폭 텍스트+이미지) + 하단 2분할 + 결론 | `block_assembler.py:461` `_assemble_slide_html_type_b()` |
+| **B'** | 03번 MDX 테스트 중 생성 | 상단이 세로 카드 형태 + 하단에 표 렌더링 + 불릿 전용 | `block_assembler.py:885` `_assemble_slide_html_type_b_prime()` |
+| **B''** | B'에서 스타일 변형 | border/gradient 없음. 색상바+여백으로 구분 | `block_assembler_b2.py:9` `_assemble_slide_html_type_b_double_prime()` |
+
+**분기 코드** (`block_assembler.py:370-378`):
+```python
+if ctx.analysis.layout_template == "B":
+    return _assemble_slide_html_type_b(ctx, title_text)
+if ctx.analysis.layout_template == "B'":
+    return _assemble_slide_html_type_b_prime(ctx, title_text)
+if ctx.analysis.layout_template == "B''":
+    return _assemble_slide_html_type_b_double_prime(ctx, title_text)
+```
+
+### 2.3 향후 방향
+
+B'/B''은 **범용화가 필요하다.** 현재는 03번 콘텐츠 구조(카드형+표)를 B 조립 함수가 커버하지 못해서 만든 땜질이다. 궁극적으로는 B 하나로 다양한 콘텐츠 구조를 커버하거나, AI가 서브타입을 판단하게 해야 한다.
+
+---
+
+## 3. MDX 샘플 ↔ 유형 매핑
+
+| MDX | 파일 | 콘텐츠 성격 | 선택 유형 | 상태 |
+|-----|------|-----------|----------|------|
+| **01번** | `samples/mdx/01. 건설산업 DX의 올바른 이해(0127).mdx` | 용어 혼용 문제 + 용어 정의(참조) | **Type A** | ⚠ Stage 2 미완성 (Sonnet 의존) |
+| **02번** | `samples/mdx/02. DX의 시행 목표 및 기대효과.mdx` | 본문 흐름 (3대 목표) | **Type B** | ✅ 동작 |
+| **03번** | `samples/mdx/03. DX 시행을 위한 필수 요건 및 혁신 방안.mdx` | 카드형 구조 + 표 + 불릿 | **Type B'** | ✅ 동작 (하드코딩) |
+
+---
+
+## 4. 단계별 상세
+
+### Stage 0: MDX 정규화
+- **파일:** `src/mdx_normalizer.py` → `normalize_mdx_content()`
+- **입력:** raw MDX 텍스트
+- **출력:** `NormalizedContent` (sections, images, tables 분리)
+
+### Stage 1A: Kei 실장 — 꼭지 추출
+- **파일:** `src/kei_client.py` → `classify_content()`
+- **AI:** Opus (Kei API)
+- **입력:** 정규화된 텍스트
+- **출력:** `Analysis` (title, core_message, layout_template, total_pages, page_structure, topics)
+- **핵심 판단:**
+  - 꼭지 5개 이내 추출
+  - 각 꼭지에 purpose, layer, role, emphasis, direction 부여
+  - layout_template = "A" 또는 "B" 선택
+  - page_structure에 역할별 weight(비중) 배정
+
+### Stage 1B: 컨셉 구체화
+- **파일:** `src/kei_client.py` → `refine_concepts()`
+- **AI:** Opus
+- **출력:** topics에 relation_type, expression_hint, source_data 추가
+
+### Stage 1B-ST: 구조화 텍스트 생성
+- **파일:** `src/kei_client.py` → `generate_structured_text()`
+- **AI:** Opus
+- **출력:** topic별 structured_text (마크다운 형태)
+
+### Stage 1.5a: 컨테이너 계산 (결정론적)
+- **파일:** `src/space_allocator.py`
+- **함수:**
+  - Type A → `calculate_container_specs()`
+  - Type B/B'/B'' → `build_containers_type_b()`
+  - 공통 → `calculate_font_hierarchy()`, `select_preset()`
+- **입력:** page_structure의 weight, slide 크기(1280×720)
+- **출력:** 역할별 `ContainerSpec` (width_px, height_px, zone)
+- **로직:** weight × available_px = 각 zone px 확정
+
+### Stage 1.7: 블록 레퍼런스 선택
+- **파일:** `src/block_reference.py` → `select_and_generate_references()`
+- **로직 (코드 결정론적 + AI 1회):**
+  1. relation_type → 블록 카테고리 매핑
+  2. expression_hint 키워드 매칭
+  3. 컨테이너 크기 적합성 필터
+  4. role/zone 제약 (sidebar → visuals/media 제외)
+  5. catalog.yaml 존재 검증 (유령 블록 차단)
+  6. 후보 2-3개 → Kei 1회 호출로 최종 선택
+- **출력:** 역할별 `BlockReference` (block_id, design_reference_html)
+
+### Stage 1.8: 적합성 검증 + 보강
+- **파일:** `src/fit_verifier.py` → `calculate_fit()`
+- **로직:**
+  1. 텍스트 분량 vs 할당 공간 계산
+  2. Selenium으로 실제 높이 측정 (3회 루프)
+  3. overflow 시 → Kei 에스컬레이션 (`call_kei_fit_escalation()`)
+     - 팝업 분리 판단, zone 간 재배분
+  4. 보강 제안: bold 키워드, 팝업 요약 등
+
+### Stage 2: HTML 생성
+
+**Type B/B'/B'' (코드 조립):**
+- **파일:** `src/block_assembler.py` → `assemble_slide_html()`
+- 역할별 `assemble_role_html()` 호출 → 블록 HTML 조립
+- structured_text + design_reference_html 결합
+- 이미지/팝업 embed
+- **즉시 완성 HTML 반환**
+
+**Type A (AI 재구성, 미완성):**
+- **파일:** `src/content_verifier.py` → `generate_with_retry()`
+- Sonnet에 phase_t_context 전달 → CSS + 레이아웃 생성
+- **현재 검증 불완전**
+
+### Stage 3: 렌더링 조립 (Type A만)
+- **파일:** `src/renderer.py` → `render_slide_from_html()`
+- Type B는 Stage 2에서 완전한 HTML이므로 스킵
+
+### Stage 4: 검증
+- **파일:** `src/slide_measurer.py`
+  - `measure_rendered_heights()` — Selenium 실측
+  - `capture_slide_screenshot()` — 스크린샷 캡처
+- **파일:** `src/kei_client.py` → `vision_quality_gate()`
+  - Opus 멀티모달: 스크린샷 보고 시각 품질 평가
+
+---
+
+## 5. 핵심 파일 맵
+
+```
+src/
+├── main.py                 ← FastAPI 서버, POST /api/generate
+├── pipeline.py             ← 파이프라인 오케스트레이터 (generate_slide)
+├── pipeline_context.py     ← PipelineContext 데이터 클래스
+├── config.py               ← 설정 (API key, 슬라이드 크기)
+│
+├── mdx_normalizer.py       ← Stage 0: MDX → NormalizedContent
+├── kei_client.py           ← Stage 1A/1B/1B-ST: Kei API 호출 + 프롬프트
+├── space_allocator.py      ← Stage 1.5a: 컨테이너 px 계산
+├── block_reference.py      ← Stage 1.7: 블록 선택 (relation_type 기반)
+├── fit_verifier.py         ← Stage 1.8: 적합성 검증 + Selenium 루프
+├── block_assembler.py      ← Stage 2: Type B/B' HTML 조립
+├── block_assembler_b2.py   ← Stage 2: Type B'' HTML 조립
+├── content_verifier.py     ← Stage 2: Type A HTML (Sonnet, 미완성)
+├── renderer.py             ← Stage 3: Jinja2 렌더링 (Type A만)
+├── slide_measurer.py       ← Stage 4: Selenium 측정 + 스크린샷
+├── validators.py           ← Kei 응답 검증 (A/B별 구조 확인)
+│
+├── image_utils.py          ← 이미지 크기 측정 + data URI 변환
+├── svg_calculator.py       ← SVG 다이어그램 좌표 계산
+└── sse_utils.py            ← SSE 스트리밍 유틸
+
+templates/
+├── slide-base.html         ← 슬라이드 기본 구조 (Jinja2, CSS Grid)
+├── catalog.yaml            ← 블록 라이브러리 정의 (50+개)
+└── blocks/                 ← 블록 HTML 템플릿
+    ├── headers/   (8개)
+    ├── cards/     (17개)
+    ├── emphasis/  (12개)
+    ├── tables/    (8개)
+    ├── visuals/   (6개)
+    ├── media/     (4개)
+    └── BEPs/      (6개)
+```
+
+---
+
+## 6. 데이터 흐름 (PipelineContext)
+
+```
+PipelineContext:
+  raw_content          ← 원본 MDX
+  normalized           ← NormalizedContent (sections, images, tables)
+  analysis             ← Analysis (title, core_message, layout_template, page_structure, topics)
+  topics               ← list[Topic] (relation_type, expression_hint, structured_text 포함)
+  page_structure       ← PageStructure (roles → {topic_ids, weight, zone})
+  containers           ← dict[role → ContainerSpec(width_px, height_px)]
+  font_hierarchy       ← FontHierarchy (key_msg, core, bg, sidebar 폰트 크기)
+  references           ← dict[role → list[BlockReference]]
+  sub_layouts          ← dict[role → SubLayout]
+  fit_result           ← 역할별 fit_status, 재배분값
+  enhancement_result   ← bold_keywords, popup_summaries 등
+  generated_html       ← Stage 2 출력
+  rendered_html        ← Stage 3 출력 (완전 HTML)
+  measurement          ← Selenium 측정값
+  quality_score        ← 0-100
+```
+
+---
+
+## 7. 현재 구현 상태 (Phase Y-11~13, 2026-04-15)
+
+> Phase Y: slide-base 기반 파이프라인 재설계. 상세: `docs/history/PHASE-Y-PLAN.md`
+
+### 파이프라인 흐름 (현재)
+
+```
+[Stage 0] MDX → normalized.sections (source of truth)
+[Stage 1A] Kei 꼭지 추출 (영역/zone 판단 안 함)
+[Phase Y] 코드: normalized → 대목차 추출 → group schema 분류 → 블록 매칭 → 영역 확정
+[Stage 1.5a] space_allocator: weight → zone px (% 기반)
+[Stage 1.7] block_reference: tag_match → schema_match → fallback 순서
+[Stage 1.8] assembler(measure_mode) → Selenium 측정 → fit 루프
+[Stage 2] assembler(slide-base + 블록) → final HTML
+[Stage 4] Selenium overflow + 비전 (-1 미평가)
+```
+
+### MDX별 상태
+
+| MDX | 상태 | 비고 |
+|-----|------|------|
+| **03** | ✅ 동작 | prerequisites-3col + pp2. 텍스트 누락 없음. 회귀 기준. |
+| **02** | ⚠ schema 1차 | top: parallel_3_with_image. bottom: 분류 정교화 필요. |
+| **01** | ⬜ 미착수 | Type A. 별도 작업. |
+
+### 핵심 원칙 (확립됨)
+
+- source of truth = normalized.sections (Stage 0)
+- 영역 = 코드가 결정 (Kei 아님). sub_titles 기반 + group schema.
+- 블록 CSS에 최종 고정값. slide_font_css는 공통 레이아웃 계약만.
+- zone = % 기반, block = height:100%.
+- 글씨 크기 고정. fit은 padding → 내용량 → font 1단계(responsive tier).
+- 기존 경로 삭제 금지. 새 schema 점진적 추가. MDX 03 회귀 기준.
+- 하드코딩 금지. 프로세스가 결과를 만드는 구조.
+
+3. **블록 글씨 크기 하드코딩 (px 고정)**
+   - 블록 CSS에 font-size가 Figma 원본 px로 고정
+   - 컨테이너 크기에 따라 조정 불가 → overflow 원인
+   - CSS 변수(`var(--block-font-heading)`)로 전환 → assembler가 zone 크기에 따라 계산
+
+### 미해결 프로세스
+1. **overflow 시 font 조정 루프** — 재배분만으로 부족할 때 font/padding 줄이기 (Y-5)
+2. **Sonnet redesign 경로** — tag 매칭 실패 시 블록 단위 redesign → 저장 (Y-6)
+
+---
+
+## 8. 검증 계획
+
+업데이트된 템플릿이 파이프라인에서 제대로 동작하는지 확인한다.
+
+| MDX | 유형 | 검증 포인트 |
+|-----|------|-----------|
+| **01번** | Type A | 업데이트된 블록 + slide-base.html로 조립 정상 동작 |
+| **02번** | Type B | 업데이트된 블록 선택 + 조립 + overflow 없음 |
+| **03번** | Type B' | 카드/표 구조가 업데이트된 템플릿으로 정상 렌더링 |
+
+### 검증 방법
+1. 각 MDX를 파이프라인에 투입
+2. 중간 산출물(step1_analysis.json 등) 확인 — 블록 선택이 의도대로인지
+3. 최종 HTML(final.html) 렌더링 — overflow, 시각 품질 확인
+4. 업데이트 전/후 비교

PLAN.md

@@ -393,6 +393,36 @@ P2-E (누락기능) ── 병렬             │
 
 ---
 
+## Phase Y: MDX 외부 컴포넌트 인라인 삽입
+
+> 근거: MDX에서 `import ... from '*.astro'`로 불러오는 외부 컴포넌트(표, 다이어그램 등)가 파이프라인에서 누락됨. import문은 제거되고 `<DxEffect />` 같은 태그는 사라져서 콘텐츠 손실 발생.
+
+### Y-1: import문 파싱 — 컴포넌트명:파일경로 매핑
+- **파일:** `src/mdx_normalizer.py`
+- **내용:** `import Foo from '../../components/foo.astro'` → `{"Foo": 절대경로}` 매핑 추출
+- **의존성:** base_path (MDX 원본 파일 위치, pipeline.py에서 전달)
+- **완료 기준:** import문에서 컴포넌트명→절대경로 dict 반환
+
+### Y-2: .astro 파일 파싱 — HTML + CSS 추출
+- **파일:** `src/mdx_normalizer.py`
+- **내용:** .astro 파일에서 `---` frontmatter 제거, HTML 본문 + `<style>` 블록 추출
+- **의존성:** Y-1
+- **완료 기준:** dx.astro → `<div class="table-wrapper">...</div>` + `<style>...</style>` 반환
+
+### Y-3: 셀프클로징 태그 교체 — 인라인 삽입
+- **파일:** `src/mdx_normalizer.py`
+- **내용:** `<DxEffect />` 태그를 Y-2에서 추출한 HTML+CSS로 교체
+- **의존성:** Y-1, Y-2
+- **완료 기준:** MDX 정규화 결과에 외부 컴포넌트 HTML이 인라인으로 포함
+
+### Y-4: Astro 특수 문법 정리
+- **파일:** `src/mdx_normalizer.py`
+- **내용:** Astro의 멀티라인 태그(`<td class="category-cell">텍스트</td>` 줄바꿈 패턴), `style="letter-spacing: -0.9px"` 등 인라인 스타일 정리
+- **의존성:** Y-2
+- **완료 기준:** 추출된 HTML이 브라우저에서 정상 렌더링
+
+---
+
 ## 의존 관계
 
 ```
@@ -421,6 +451,50 @@ Phase V (적합성 검증):
 
 ---
 
+## Phase Z: 매칭 시스템 통합 (2026-04-28 ~)
+
+> **상세 설계**: [IMPROVEMENT-REDESIGN.md](IMPROVEMENT-REDESIGN.md)
+>
+> 별도 검증된 매칭 시스템 (V1~V4, `tests/matching/`) 을 기존 pipeline 에 통합.
+
+### 단계적 진행
+
+| 단계 | 내용 | 산출물 |
+|---|---|---|
+| **Phase Z-1** | 통합 prototype — Stage 1.7 (블록 선택) 만 V4 로 교체 | MDX 03 회귀 통과 |
+| **Phase Z-2** | 매칭 + 4 프리셋 (Type A/B/B'/B'') 통합 | MDX 03/02/01 자동 매칭 |
+| **Phase Z-3** | 컨테이너 검증 + 5 차 Fallback | 안정적 자동 처리 |
+| **Phase Z-4** | 전체 통합 + 회귀 검증 | 새 pipeline 완성 |
+
+### 사전 결정 사항 (검토 완료)
+
+- **위계** : slide → slide-base → slide-body → 레이아웃 → Zone → 프레임
+- **5 단계 흐름** : MDX 분석/레이아웃 → Zone 텍스트 배치 → 프레임 매칭 → 검토 → 출력
+- **매칭 분기** : 완벽 / 어정쩡 / 안 됨 → 후속 작업 차등
+- **레이아웃 프리셋** : Type A / B / B' / B'' (기존 4 가지 활용)
+- **절대 룰** : 텍스트 원문 무손실, 자유 디자인 금지, MDX 1 = 슬라이드 1
+
+### 사전 작업 진행 상태
+
+✅ **완료** (2026-04-28)
+- 32 frame Zone 적용 분류 (`zone_direct` / `zone_adapt` / `zone_extract` / `reference_only`) — [docs/architecture/FRAME-INTEGRATION-MAP.md](docs/architecture/FRAME-INTEGRATION-MAP.md)
+- Frame / Style Inventory (32 frame + 18 token + 6 legacy) — [docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md](docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md)
+
+⬜ **미진행**
+- catalog / runtime 설계 prep
+- slide-base 검증
+
+⚠️ **미실행 / 의도적으로 보류** (승인 전)
+- 기존 `templates/blocks/` 삭제 / 교체
+- catalog / runtime 구현
+- `templates/styles/frame-patterns/` 신규 파일 생성
+- 새 token (`gap_candidate`) 추가
+- legacy structures 6 파일 삭제
+
+> ⚠️ **Phase Z-1 자체는 진행 중**. 위 ✅ 는 *사전 작업 중 일부* 완료 표시.
+
+---
+
 ## 기술 스택
 
 | 역할 | 도구 | 비고 |

PROGRESS.md

@@ -154,6 +154,15 @@ Phase R은 접근 C로 가기로 합의했으나, 구현에서 기존 블록 선
 
 ## 📋 Phase R': 접근 C — 블록 CSS 참고 + AI 구조 결정 (설계 확정)
 
+> ⚠️ **Legacy — Phase Z 로 대체됨 (2026-04-28)**
+>
+> Phase R' 의 "AI 가 HTML 구조를 직접 생성" 흐름은 Phase Z 에서 다음과 같이 변경됨:
+> - **HTML 구조** = `slide-base.html` + 코드 (Jinja2) 가 결정 (AI 가 생성하지 않음)
+> - **AI 의 역할** = zone 안의 콘텐츠 / 텍스트 매핑 / 텍스트 다듬기 / 디자인 변형만
+> - **자유 디자인 금지** — 항상 Figma 프레임 DB 참고
+>
+> 아래 R' 설계 내용은 히스토리 / 참고용. 실제 구현은 [`IMPROVEMENT-REDESIGN.md`](IMPROVEMENT-REDESIGN.md) 의 5 단계 흐름 따름.
+
 **상세:** [IMPROVEMENT-PHASE-R-PRIME.md](IMPROVEMENT-PHASE-R-PRIME.md)
 
 ### 핵심 전환
@@ -165,6 +174,8 @@ R' (접근 C):   콘텐츠가 구조를 결정 → 블록 CSS를 참고하여 HT
 
 ### 프로세스 변경
 
+> ⚠️ **아래 표는 폐기된 Phase R' 기록이며 신규 구현 지시가 아니다.** 새 구현은 [IMPROVEMENT-REDESIGN.md](IMPROVEMENT-REDESIGN.md) 의 Phase Z 5 단계 흐름 따름.
+
 | 단계 | 현재 (P=Q=R) | R' (접근 C) |
 |------|-------------|------------|
 | 1단계 Kei 분석 | 유지 | 유지 |
@@ -213,15 +224,115 @@ C_reference.png와 동일 수준의 결과를 **자동으로** 생성:
 
 ---
 
+## Phase Z: 매칭 시스템 통합 설계 (2026-04-28)
+
+### 배경
+별도 검증한 매칭 시스템 (V1~V4) 을 기존 design_agent pipeline 에 통합하기 위한 설계.
+
+**매칭 시스템 (`tests/matching/`) 검증 결과**:
+- V1 키워드 매칭 (Logistic Regression 가중치, TARGET 4/4 LOOCV 검증)
+- V2 의미 매칭 (ko-sroberta cosine)
+- V3 구조 매칭 (layout / content_affinity / structure_intent)
+- V4 종합 판정 (5축 + 라벨)
+- TARGET 정답률 3/4 (75%), BM25 / IDF 보다 우위
+- V4 slot 축 ablation: Top-1 매칭 7/7 동일 (slot 축 frame 선별 무영향)
+
+### 설계 결정 사항
+
+**위계 + 용어 정리** :
+```
+[ slide ] 1280×720
+   ├─ slide-title           ← MDX 대목차 제목
+   ├─ slide-divider         (고정)
+   ├─ slide-body ≈ 1200×590 ← 콘텐츠 영역
+   │     └─ 레이아웃 (Type A/B/B'/B'')
+   │           └─ Zone (top/bottom_l/bottom_r 등)
+   │                 └─ 프레임 (Figma 디자인 단위)
+   └─ slide-footer          ← MDX 대목차 결론
+```
+
+**5 단계 새 흐름**:
+1. STAGE 1 — MDX 분석 + 레이아웃 매칭 (Type A/B/B'/B'')
+2. STAGE 2 — Zone 별 텍스트 1차 배치
+3. STAGE 3 — Zone 별 프레임 매칭 (완벽 / 어정쩡 / 안 됨 분기)
+4. STAGE 4 — 프레임 검토 + 컨테이너 조정 (5 차 Fallback)
+5. STAGE 5 — HTML 조립 + 검증 + 출력
+
+**핵심 원칙**:
+- MDX 1 파일 = 대목차 1 개 = 슬라이드 1 장
+- 텍스트 원문 무손실 보존 (본문 미리보기 + 팝업 원문)
+- 자유 디자인 금지 (항상 Figma 프레임 DB 참고)
+- 불일치 시 레이아웃 회귀 (콘텐츠 줄이지 않고 그릇 변경)
+
+### 산출물 (이번 세션)
+
+| 파일 | 용도 |
+|---|---|
+| [`IMPROVEMENT-REDESIGN.md`](IMPROVEMENT-REDESIGN.md) | 매칭 시스템 통합 설계 문서 (전체 명세) |
+| [`PROCESS_OVERVIEW.html`](PROCESS_OVERVIEW.html) | 임원 보고용 A4 2 페이지 (프로세스 + 구조도) |
+| [`tests/PIPELINE.md`](tests/PIPELINE.md) | V1~V4 통합 정리 + frame 단위 명확화 |
+| [`tests/pipeline/`](tests/pipeline/) | 매칭 시스템 코드 + 결과 + 보고서 (분류 복사본) |
+
+### 다음 단계 (구현)
+
+`IMPROVEMENT-REDESIGN.md` 의 **단계적 진행 계획** 참조.
+- **Phase Z-1**: 통합 prototype (MDX 03 회귀 통과)
+- **Phase Z-2**: 매칭 + 프리셋 통합
+- **Phase Z-3**: 컨테이너 검증 + Fallback
+- **Phase Z-4**: 전체 통합 + 검증
+
+### 발견된 약점 (8가지) — Phase Z 진행 시 대응
+
+`IMPROVEMENT-REDESIGN.md` 11 장 (리스크) + `tests/PROGRESS.md` 약점 표 참조.
+
+핵심 :
+- 02-2.2 매칭 실패 (Frame 14 anchor 재라벨링 필요)
+- 32 frame DB 사이즈 라벨링 부족 (zone 단위 vs 슬라이드 단위)
+- slot 의미 매핑 부재
+- V3 콘텐츠 성격 분류 부정확 (키워드 사전 한계)
+
+---
+
+## Phase Z-1 사전 작업 진행 (2026-04-28)
+
+> **Phase Z-1 자체는 진행 중**. 본 entry 는 사전 작업 중 **Frame / Style Inventory 완료** 만 기록.
+
+### ✅ 완료 — Frame / Style Inventory (사전 작업 일부)
+
+| 산출 | 위치 | 내용 |
+|---|---|---|
+| Frame Integration Map | [`docs/architecture/FRAME-INTEGRATION-MAP.md`](docs/architecture/FRAME-INTEGRATION-MAP.md) | 32 frame Zone 적용 분류 (`zone_direct` / `zone_adapt` / `zone_extract` / `reference_only`). row 21~28 Figma ID 정정. 1171281171 부록 처리 |
+| Frame Style Inventory | [`docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md`](docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md) | 32 frame (변환 14 + 미변환 18) + Token 18 행 (covered 7 / gap 5 / hierarchy 3 / hold 3) + Legacy 6 행 |
+
+### ⬜ 다음 — Phase Z-2 본격 (catalog / runtime 설계)
+
+- Phase Z-1 의 catalog / runtime 설계 prep 부분 (slide-base 검증 등) 은 미진행
+- Phase Z-2 본격 (매칭 + 4 프리셋 통합) 도 미진행
+
+### ⚠️ 미실행 / 의도적으로 보류
+
+- 기존 `templates/blocks/` 삭제 / 교체 실행
+- catalog / runtime 구현
+- `templates/styles/frame-patterns/` 신규 파일 생성
+- `templates/styles/tokens/` 의 `gap_candidate` token 추가
+- legacy structures 6 파일 삭제
+
+→ 모두 **승인 전 보류**. Frame / Style Inventory 는 추출 / 검증 단계이고, 실제 변경은 별도 승인 단계.
+
+---
+
 ## 프로젝트 구조
 
 | 항목 | 파일 | 상태 |
 |------|------|------|
-| 프로젝트 규칙 | CLAUDE.md | Phase R' 반영 |
+| 프로젝트 규칙 | CLAUDE.md | Phase Z 반영 (2026-04-28) |
-| 개선 계획 | IMPROVEMENT.md | Phase R' 반영 |
+| 개선 계획 (이전) | IMPROVEMENT.md | Phase R' 반영 |
-| 진행 추적 | PROGRESS.md | 이 파일 (2026-03-30 갱신) |
+| **개선 계획 (신규)** | **IMPROVEMENT-REDESIGN.md** | **Phase Z 매칭 시스템 통합 (2026-04-28)** |
+| 임원 보고용 | PROCESS_OVERVIEW.html | Phase Z 흐름 반영 |
+| 진행 추적 | PROGRESS.md | 이 파일 (2026-04-28 갱신) |
 | 전체 감사 | CLEANUP-AUDIT.md | 유효/무력화 분류 완료 |
 | Phase별 상세 | IMPROVEMENT-PHASE-{A~R'}.md | 각 Phase 기록 |
 | Phase R 실패 기록 | IMPROVEMENT-PHASE-R.md | 블록 선택 위에 variant 패치 — 실패 |
 | Phase R' 설계 | IMPROVEMENT-PHASE-R-PRIME.md | 접근 C 기반 재설계 |
-| README | README.md | Phase R' 반영 |
+| 매칭 시스템 (별도 검증) | tests/PIPELINE.md + tests/pipeline/ | V1~V4 검증 완료 (2026-04-27) |
+| README | README.md | Phase Z 반영 |

README.md

@@ -1,303 +1,269 @@
-# Kei Design Agent
+# Design Agent / C.E.L Slide Automation
 
-콘텐츠를 시각적으로 구조화된 슬라이드 HTML(1280×720px, 16:9)로 변환하는 AI 파이프라인.
+## 1. 프로젝트 개요
 
-## 개요
+MDX 문서를 입력받아 1280×720 프레젠테이션 슬라이드 HTML 로 자동 변환하는 파이프라인입니다.
 
-텍스트/MDX 콘텐츠를 입력하면:
+- **입력**: MDX 파일 (텍스트 + 표 + 불릿 + JSX 블록 + details + 이미지)
-1. Kei 실장(Opus)이 정보 구조와 비중을 판단하고
+- **변환 흐름**: V4 매칭 → Phase Z 렌더 파이프라인
-2. 코드가 컨테이너 크기를 계산하고
+- **출력**: `final.html` (단일 슬라이드) + 단계별 산출물 (의사결정 추적)
-3. 블록을 선택하고
+- **최종 목표**: 파이프라인 + AI 보정 + DB / 카탈로그 + 프론트엔드 에디터가 연결된 *제품형* 시스템
-4. 콘텐츠-컨테이너 적합성을 검증하고
-5. AI(Sonnet)가 블록 디자인을 참고하여 HTML을 생성하고
-6. 코드가 슬라이드 프레임에 조립하고
-7. 측정+비전 모델로 검증합니다
 
----
+### 핵심 용어 (처음 보는 분 위해)
 
-## 파이프라인 (10단계)
+| 용어 | 의미 |
+|---|---|
+| **MDX** | 마크다운 + JSX 컴포넌트 결합 형식. 슬라이드의 *원본 콘텐츠* |
+| **Figma BEPs frame** | 디자인 원천. 32 개의 Figma 프레임을 HTML / CSS 로 변환해 `figma_to_html_agent/blocks/` 에 누적 |
+| **V4** | MDX 섹션 ↔ Figma 프레임 매칭 시스템 (네 번째 버전). 콘텐츠 의미 / 구조 / 키워드 / 카디널리티 등 5 개 축으로 점수화. `tests/matching/v4_full32_result.yaml` 에 결과 저장 |
+| **Phase Z** | 현재 활성 렌더 파이프라인. V4 매칭 결과를 받아 슬라이드 HTML 로 만듦 |
+| **프레임 (Frame)** | Figma 디자인 단위. 1 개의 슬라이드 영역(zone) 안에 들어감 |
+| **Internal Region** | zone 내부의 콘텐츠 배치 단위 (text 영역, table 영역, image 영역 등) |
+| **Frame Slot** | frame 내부의 콘텐츠 자리 (예: pillar_1, quadrant_1, process_column) |
+
+### 위계
 
 ```
-MDX 원본
+Slide → Zone → Internal Region → Frame → Frame Slot → Content
-  ↓
-[Stage 0]   MDX 정규화                        (코드)
-  ↓
-[Stage 1A]  꼭지 추출 + 영역 배정             (Kei API / Opus)
-  ↓
-[Stage 1B]  컨셉 구체화                       (Kei API / Opus)
-  ↓
-[Stage 1.5a] 컨테이너 초기 계산              (코드)
-  ↓
-[Stage 1.7] 블록 선택                        (코드)
-  ↓
-[Stage 1.8] 적합성 검증 + 재배분 + 보강      (코드 + Kei 에스컬레이션)
-  ↓
-[Stage 1.5b] 디자인 예산 재계산              (코드)
-  ↓
-[Stage 2]   HTML 생성 (영역별 개별 호출)     (Claude Sonnet)
-  ↓
-[Stage 3]   렌더링 조립 + 후처리             (코드)
-  ↓
-[Stage 4]   측정 + 품질 검증                 (Selenium + Opus Vision)
-  ↓
-검증 통과 시 → final.html 저장 + 팝업 분리 (파일 출력)
 ```
 
-※ Stage 4 이후의 파일 저장은 별도 Stage가 아닌 후처리입니다.
-
 ---
 
-## 단계별 상세
+## 2. 전체 실행 구조 (22 단계 파이프라인)
 
-### Stage 0: MDX 정규화
+22 단계를 3 개 블록으로 묶어 운영합니다:
 
-| 항목 | 내용 |
+- **블록 A — 렌더 전 계획 (Step 0~12)**: 모든 의사결정. 가장 중요한 영역.
-|------|------|
+- **블록 B — 렌더 (Step 13)**: Jinja2 + 프레임 partial → final.html.
-| **목적** | 원본 MDX에서 JSX/frontmatter를 제거하고, 섹션/팝업/이미지/테이블로 분리 |
+- **블록 C — 렌더 후 점검 / 예외 처리 (Step 14~22)**: 시각 검증 + 필요 시 재시도. *블록 A 가 정밀하면 거의 동작 안 함*.
-| **적용기술** | 코드 (`normalize_mdx_content()`) |
-| **인풋** | 원본 MDX 문자열 |
-| **아웃풋** | `normalized` — clean_text, title, sections[], popups[], images[], tables[] |
-| **연계** | → Stage 1A가 clean_text를 Kei에게 전달 |
 
-### Stage 1A: 꼭지 추출 + 영역 배정
+```mermaid
+flowchart TD
+    Input([MDX 입력])
 
-| 항목 | 내용 |
+    subgraph BlockA["블록 A — 렌더 전 계획 (Step 0~12)"]
-|------|------|
+        S0["Step 0<br/>사전 준비<br/><sub>카탈로그 / 컨트랙트 / V4 결과</sub>"]
-| **목적** | 콘텐츠에서 핵심 파트(꼭지)를 식별하고, 슬라이드의 어떤 영역(배경/본심/첨부/결론)에 배치할지 결정 |
+        S1["Step 1<br/>MDX 업로드"]
-| **적용기술** | Kei API (`classify_content()`) |
+        S2["Step 2<br/>MDX 정규화<br/><sub>frontmatter / 목차 / 푸터 분리</sub>"]
-| **인풋** | normalized.clean_text |
+        S3["Step 3<br/>콘텐츠 객체 추출<br/><sub>텍스트 / 표 / 이미지 / details</sub>"]
-| **아웃풋** | `topics[]` (id, title, purpose, layer, relation_type, expression_hint), `page_structure` (role별 topic_ids, weight) |
+        S4["Step 4<br/>섹션 내부 구성 계획<br/><sub>전체 / 묶기 / 분할</sub>"]
-| **연계** | → Stage 1B가 각 꼭지를 구체화 |
+        S5["Step 5<br/>V4 매칭 후보 추출<br/><sub>거절 제외 최대 6 개</sub>"]
+        S6["Step 6<br/>구성 계획<br/><sub>어떤 섹션 묶음 = 한 zone</sub>"]
+        S7["Step 7<br/>슬라이드 레이아웃 계획<br/><sub>8 개 프리셋 중 선택</sub>"]
+        S8["Step 8<br/>Zone / Region 비율 계획"]
+        S9["Step 9<br/>적용 계획<br/><sub>V4 후보를 어떻게 넣을지 번역</sub>"]
+        S10["Step 10<br/>프레임 컨트랙트 확인"]
+        S11["Step 11<br/>콘텐츠 → Region → Frame Slot 매핑"]
+        S12["Step 12<br/>슬롯 데이터 생성"]
+    end
 
-### Stage 1B: 컨셉 구체화
+    subgraph BlockB["블록 B — 렌더 (Step 13)"]
+        S13["Step 13<br/>HTML 렌더<br/><sub>Jinja2 + 프레임 partial → final.html</sub>"]
+    end
 
-| 항목 | 내용 |
+    subgraph BlockC["블록 C — 렌더 후 점검 / 예외 처리 (Step 14~22)"]
-|------|------|
+        S14["Step 14<br/>시각 점검<br/><sub>Selenium 으로 실제 렌더 검사</sub>"]
-| **목적** | 각 꼭지에 실제 원본 텍스트(source_data)와 요약(summary)을 매핑 |
+        S15["Step 15<br/>문제 분류<br/><sub>오버플로우 / 잘림 / 비율 어긋남</sub>"]
-| **적용기술** | Kei API (`refine_concepts()`) |
+        S16["Step 16<br/>재시도 라우터<br/><sub>어떤 조치를 할지 선택</sub>"]
-| **인풋** | topics + clean_text |
+        S17["Step 17<br/>조치 실행<br/><sub>zone 비율 재시도 / 팝업 전환 / ...</sub>"]
-| **아웃풋** | `topics` 업데이트 — source_data, summary 추가 |
+        S18["Step 18<br/>실패 분류"]
-| **연계** | → Stage 1.5a가 텍스트 양을 기반으로 컨테이너 비율 계산 |
+        S19["Step 19<br/>다음 조치 제안"]
+        S20["Step 20<br/>슬라이드 상태 결정<br/><sub>PASS / 시각 회귀 / ...</sub>"]
+        S21["Step 21<br/>디버그 / 추적 기록"]
+        S22["Step 22<br/>사용자 확인 / 내보내기"]
+    end
 
-### Stage 1.5a: 컨테이너 초기 계산
+    Visual{"시각 점검 OK?"}
+    Repair{"수정 방식?"}
+    AI["AI 보정 / 재구성<br/><i>(향후 예정)</i>"]
 
-| 항목 | 내용 |
+    Input --> S0 --> S1 --> S2 --> S3 --> S4 --> S5
-|------|------|
+    S5 --> S6 --> S7 --> S8 --> S9 --> S10 --> S11 --> S12
-| **목적** | 폰트 위계 확정 + 슬라이드 내 영역별 컨테이너 크기(px) 계산 + 프리셋 선택 |
+    S12 --> S13 --> S14 --> Visual
-| **적용기술** | 코드 (`calculate_font_hierarchy()`, `calculate_dynamic_ratio()`, `calculate_container_specs()`) |
+    Visual -->|예| S20 --> S21 --> S22
-| **인풋** | topics, page_structure (weight), preset |
+    Visual -->|아니오| S15 --> S16 --> S17 --> S18 --> S19 --> Repair
-| **아웃풋** | `font_hierarchy` (key_msg/core/bg/sidebar px), `container_ratio` (71:29 등), `containers` (role별 width_px, height_px), `preset` |
+    Repair -->|결정론적<br/>zone 재시도 / 팝업 / 레이아웃 조정| S13
-| **연계** | → Stage 1.7이 컨테이너 크기를 보고 블록 선택 |
+    Repair -->|AI 필요<br/>재구성 / 점수 낮음 / 반복 오버플로우| AI
+    AI --> S13
 
-### Stage 1.7: 블록 선택
+    classDef plan fill:#e7f5ff,stroke:#1971c2,color:#000
+    classDef render fill:#fff3cd,stroke:#f59f00,color:#000
+    classDef check fill:#f3f0ff,stroke:#7048e8,color:#000
+    classDef decision fill:#ffd8a8,stroke:#d9480f,color:#000
+    classDef future fill:#f8f9fa,stroke:#868e96,color:#000,stroke-dasharray: 5 5
 
-| 항목 | 내용 |
+    class S0,S1,S2,S3,S4,S5,S6,S7,S8,S9,S10,S11,S12 plan
-|------|------|
+    class S13 render
-| **목적** | 각 꼭지의 relation_type + expression_hint + 컨테이너 크기로 적합한 블록 결정. 같은 영역 꼭지들의 layer가 다르면 주종관계 판단 (블록 1개로 합침) |
+    class S14,S15,S16,S17,S18,S19,S20,S21,S22 check
-| **적용기술** | 코드 (`select_and_generate_references()`) — catalog.yaml 기반 결정론적 매칭 |
+    class Visual,Repair decision
-| **인풋** | topics, containers, page_structure |
+    class AI future
-| **아웃풋** | `references` — role별 block_id, variant, design_reference_html, topic_id, is_hierarchical, supporting_topic_ids |
-| **연계** | → Stage 1.8이 선택된 블록+콘텐츠가 컨테이너에 맞는지 검증 |
-
-### Stage 1.8: 적합성 검증 + 재배분 + 보강 + 서브 컨테이너
-
-| 항목 | 내용 |
-|------|------|
-| **목적** | 콘텐츠가 컨테이너에 들어가는지 검증 → 안 맞으면 재배분 → 여전히 안 되면 Kei 에스컬레이션 → 여유 공간에 보충 콘텐츠 → 서브 컨테이너 배치 계산 |
-| **적용기술** | 코드 (`calculate_fit()`, `redistribute()`, `analyze_enhancements()`, `apply_enhancements()`, `calculate_sub_layout()`) + Kei API (에스컬레이션 시 `call_kei_fit_escalation()`) |
-| **인풋** | topics, containers, references, font_hierarchy, normalized, core_message |
-| **아웃풋** | `containers` (재배분된 height_px), `fit_result` (role별 fit_status, redistribution), `enhancement_result` (V-7 subordinate_treatments, V-8 supplement_blocks, V-9 emphasis_blocks, V-10 bold_keywords, V-4 kei_decisions), `sub_layouts` (role별 서브 컨테이너 name/width/height, table_rows) |
-| **내부 흐름** | Step 1: 필요 높이 계산 → Step 2: 재배분 → Step 3: Kei 에스컬레이션 → Step 4-5: 보강 분석+적용 → Step 6: fit 재검증 → Step 7: 서브 컨테이너 배치 → Step 8: 확정 |
-| **연계** | → Stage 1.5b가 재배분된 크기로 디자인 예산 재계산, → Stage 2가 sub_layouts + enhancements를 프롬프트에 반영 |
-
-### Stage 1.5b: 디자인 예산 재계산
-
-| 항목 | 내용 |
-|------|------|
-| **목적** | 재배분된 컨테이너 크기 + 선택된 블록 schema 기준으로 영역별 가용 공간 계산 |
-| **적용기술** | 코드 (`calculate_design_budget()`) |
-| **인풋** | containers (재배분 후), references (블록 schema) |
-| **아웃풋** | `containers` 업데이트 — design_budget (available_height_px, available_width_px, fits) |
-| **연계** | → Stage 2가 design_budgets를 프롬프트에 포함 |
-
-### Stage 2: HTML 생성 (영역별 개별 호출)
-
-| 항목 | 내용 |
-|------|------|
-| **목적** | page_structure에 존재하는 각 역할(배경/본심/첨부/결론)의 HTML을 **영역별 개별 Sonnet 호출**로 생성. 블록 디자인을 참고하되 콘텐츠가 구조를 결정 (Phase R' 방식) |
-| **적용기술** | Claude Sonnet API — 영역당 1회 호출 (`build_area_prompt()` → `_call_claude()`) |
-| **인풋** | raw_content, topics, containers, font_hierarchy, references (design_reference_html), sub_layouts (서브 컨테이너 치수), enhancements (V-4~V-10 지시), design_budgets |
-| **호출 흐름** | Sonnet(배경) → bg_html, Sonnet(본심) → core_html, Sonnet(첨부) → sidebar_html, Sonnet(결론) → footer_html. 해당 역할에 꼭지가 없으면 스킵. body_html = bg_html + spacer + core_html |
-| **아웃풋** | `generated_html` — body_html, sidebar_html, footer_html |
-| **프롬프트에 포함되는 것** | 서브 컨테이너 레이아웃 제약, 디자인 레퍼런스 HTML (블록 CSS 참고), Kei 에스컬레이션 결정, 종속 꼭지 처리 지시, 보충 블록 지시, 강조 문장, bold 키워드, 폰트/컨테이너 크기 제약 |
-| **연계** | → Stage 3이 영역별 HTML을 슬라이드 프레임에 배치 |
-
-### Stage 3: 렌더링 조립 + 후처리
-
-| 항목 | 내용 |
-|------|------|
-| **목적** | 생성된 HTML 조각을 CSS Grid 슬라이드 프레임에 삽입 + 후처리 (폰트 캡핑, overflow 제거, sidebar width 조정, bold 변환) |
-| **적용기술** | 코드 (`render_slide_from_html()`) |
-| **인풋** | generated_html, preset (grid_areas, grid_columns), font_hierarchy, container_ratio |
-| **아웃풋** | `rendered_html` → `final.html` 파일 저장 |
-| **연계** | → Stage 4가 렌더링 결과를 측정+검증 |
-
-### Stage 4: 품질 검증
-
-| 항목 | 내용 |
-|------|------|
-| **목적** | Selenium으로 실제 브라우저 렌더링 후 overflow 측정 + Opus Vision으로 시각적 품질 평가 |
-| **적용기술** | Selenium (`measure_rendered_heights()`) + Claude Opus Vision (`vision_quality_gate()`) |
-| **인풋** | rendered_html |
-| **아웃풋** | `measurement` (zone별 clientHeight, scrollHeight, overflow, excess_px), `quality_score` |
-| **연계** | 파이프라인 완료. overflow 시 경고 포함하여 진행 |
-
----
-
-## 중간 산출물
-
-파이프라인 실행마다 `data/runs/{timestamp}/`에 단계별 결과가 저장된다.
-
-### JSON Context (Stage별 누적 상태)
-| 파일 | Stage | 내용 |
-|------|-------|------|
-| `stage_0_context.json` | 0 | normalized (섹션, 팝업, 이미지) |
-| `stage_1a_context.json` | 1A | topics, page_structure |
-| `stage_1b_context.json` | 1B | topics (source_data 추가) |
-| `stage_1_5a_context.json` | 1.5a | font_hierarchy, containers, ratio |
-| `stage_1_7_context.json` | 1.7 | references (블록 선택 결과) |
-| `stage_1_8_context.json` | 1.8 | fit_result, enhancements, sub_layouts |
-| `stage_1_5b_context.json` | 1.5b | containers (design_budget 추가) |
-| `stage_2_context.json` | 2 | generated_html |
-| `stage_3_context.json` | 3 | (rendered_html은 final.html로 별도 저장) |
-| `stage_4_context.json` | 4 | measurement, quality_score |
-| `final_context.json` | 최종 | 전체 context |
-
-### HTML 시각화 (`steps/` 폴더)
-| 파일 | Stage | 내용 |
-|------|-------|------|
-| `stage_0.html` | 0 | 섹션/팝업/이미지 목록 |
-| `stage_1a.html` | 1A | 꼭지 테이블 (purpose, layer, 영역) |
-| `stage_1b.html` | 1B | 꼭지 + source_data + summary |
-| `stage_1_5a.html` | 1.5a | 빈 컨테이너 (1280×720) |
-| `stage_1_5a_content.html` | 1.5a | 컨테이너에 콘텐츠 배치 |
-| `stage_1_5b.html` | 1.5b | 디자인 예산 (available height/width) |
-| `stage_1_7.html` | 1.7 | 블록 선택 표시 |
-| `stage_1_8_fit_before.html` | 1.8 | 적합성 (재배분 전) |
-| `stage_1_8_fit_after.html` | 1.8 | 재배분 후 + 보강 |
-| `stage_1_8_blocks.html` | 1.8 | SLOT 구조 + 블록 디자인 + 주종관계 (1280×720) |
-| `stage_2.html` | 2 | 영역별 Sonnet 출력을 실제 렌더링 (역할별 개별 확인) |
-| `stage_3.html` | 3 | 영역을 합쳐 슬라이드 프레임에 배치한 결과 (1280×720 실제 렌더링) |
-| `stage_4.html` | 4 | 측정 결과 + 품질 점수 |
-
----
-
-## 핵심 원칙
-
-1. **콘텐츠가 구조를 결정** — 블록 CSS는 참고만. AI가 콘텐츠 전달 의도를 보고 HTML 구조 결정 (Phase R')
-2. **하드코딩 금지** — font-size 외 모든 수치는 동적 계산. 어떤 MDX가 들어와도 동일하게 동작
-3. **스크롤 절대 금지** — overflow:auto/scroll 어떤 영역에서도 불허
-4. **Kei API 필수** — fallback 없음. 성공할 때까지 무한 재시도
-5. **AI가 옵션 생성, Kei가 결정** — 공간 부족 시 하드코딩 대응이 아니라 Kei 판단 요청
-6. **계산 먼저, AI 판단 나중에, 렌더링은 검증만**
-7. **overflow 상태에서 출력 금지** — Vision 모델 품질 게이트 통과 필수
-
----
-
-## 블록 라이브러리 (38개)
-
-6개 카테고리, 38개 블록. 각 블록은 `catalog.yaml`에 용도(when), 금지(not_for), purpose_fit, schema(슬롯 정의)가 있음.
-
-| 카테고리 | 개수 | 용도 |
-|---------|------|------|
-| **headers** | 5 | 타이틀, 꼭지 헤더 |
-| **cards** | 9 | 항목 나열, 카드 그리드 |
-| **tables** | 3 | 비교표, 데이터 테이블 |
-| **visuals** | 6 | SVG 다이어그램, 관계도 |
-| **emphasis** | 10 | 강조, 인용, 결론, 불릿 |
-| **media** | 5 | 이미지/사진 |
-
----
-
-## 기술 스택
-
-| 역할 | 도구 |
-|------|------|
-| 서버 | FastAPI + uvicorn (포트 8001) |
-| AI (Kei 실장/편집자) | Kei API → Opus (localhost:8000) |
-| AI (HTML 생성) | Anthropic API → Claude Sonnet |
-| AI (품질 검증) | Anthropic API → Claude Opus Vision |
-| 블록 검색 | FAISS + bge-m3 |
-| 템플릿 | Jinja2 (블록 디자인 레퍼런스용) |
-| 렌더링 | CSS Grid + 디자인 토큰 (1280×720) |
-| 렌더링 측정 | Selenium headless Chrome |
-| SVG 시각화 | svg_calculator.py (N개 동적 배치) |
-| 이미지 | Pillow (크기 측정) + base64 인라인 |
-| 폰트 | Pretendard Variable |
-| 공간 계산 | space_allocator.py + fit_verifier.py (결정론적) |
-
----
-
-## 설치 및 실행
-
-```bash
-# 설치
-cd design_agent
-pip install -e .
-
-# FAISS 인덱스 빌드 (블록 추가/수정 시)
-python scripts/build_block_index.py
-
-# .env 설정
-ANTHROPIC_API_KEY=sk-ant-...
-KEI_API_URL=http://localhost:8000
-LOG_LEVEL=DEBUG
 ```
 
-```bash
+각 단계의 자세한 진행 상태는 [`PHASE-Z-PIPELINE-STATUS-BOARD.md`](docs/architecture/PHASE-Z-PIPELINE-STATUS-BOARD.md) 가 단일 출처입니다 (자주 갱신됨).
-# 터미널 1: Kei API (필수)
-cd D:\ad-hoc\kei\persona_agent
-python -m uvicorn backend.main:app --host 127.0.0.1 --port 8000
-
-# 터미널 2: Design Agent
-cd D:\ad-hoc\kei\design_agent
-python -m uvicorn src.main:app --host 127.0.0.1 --port 8001 --reload
-```
-
-접속: http://localhost:8001
 
 ---
 
-## 개선 이력
+## 3. 현재 완료 수준
 
-| Phase | 내용 | 상태 |
+### 3.1 MDX03 정상 경로 — 통과
-|-------|------|------|
+
-| A~D | 슬라이드 품질 핵심 | 완료 |
+기준 샘플 (`samples/mdx_batch/03.mdx`) 의 자동 렌더 경로가 정상으로 닫혔습니다.
-| G~N | Kei API, 스토리라인, 정합성, 블록 선택, 비중, 측정 | 완료 |
+
-| O | 컨테이너 기반 레이아웃 | 완료 |
+```
-| P | 다후보 렌더링 비교 | 완료 (20/100점 → 방향 전환) |
+overall                : PASS
-| Q | 제약 기반 블록 선택 | 완료 |
+visual_check_passed    : true
-| R | 하이브리드 블록 (실패 — P=Q=R 동일 구조) | 실패 |
+full_mdx_coverage      : true
-| R' | 블록 CSS 참고 + AI 구조 결정 | 설계 확정 |
+adapter_needed_count   : 0
-| S | 검증 합격 프롬프트 + Claude HTML 생성 | 설계 확정 |
+content_truncated_count: 0
-| T | 11-Stage 파이프라인 + 디자인 레퍼런스 | 완료 (31/31 통과) |
+units                  : 03-1 → F13 (그대로 사용 가능, 0.927)
-| V | 적합성 검증 + Kei 에스컬레이션 + 서브 컨테이너 | 완료 |
+                         03-2 → F29 (그대로 사용 가능, 0.920)
-| W | Stage 2 출력 품질 수정 (6건) | 진행 중 |
+```
+
+### 3.2 22 단계 진행 수준
+
+전체 약 **65~70%**. MDX03 정상 경로는 닫혔고, 일반화 (다른 MDX / 예외 케이스 / 재시도 / UI) 는 진행 중.
+
+상세 ✅ / ⚠ / ❌ 표는 [`PHASE-Z-PIPELINE-STATUS-BOARD.md`](docs/architecture/PHASE-Z-PIPELINE-STATUS-BOARD.md) 에서 확인.
+
+### 3.3 검증 / 실험 저장소 성격
+
+본 저장소는 *제품형 시스템* 까지 가는 과정에서 다음 샘플을 *검증 재료* 로 사용:
+
+- `samples/mdx_batch/03.mdx` — 기준 샘플 (정상 경로 확인)
+- `samples/mdx_batch/04.mdx` — 다음 검증 예정
+- `samples/mdx/01. ...mdx` / `02. ...mdx` — 향후 검증
+
+**샘플 MDX 는 로드맵 단계가 아니라 22 단계 파이프라인을 보완하기 위한 검증 재료입니다.**
+
+### 3.4 결정 변경 이력
+
+설계 변경 / 폐기된 안 / 일치 정정의 시간 순 기록은 [`PHASE-Z-CHANGE-LOG.md`](docs/architecture/PHASE-Z-CHANGE-LOG.md) 참조.
 
 ---
 
-## Kei Persona와의 관계
+## 4. 향후 로드맵
 
-```
+```mermaid
-Kei Persona Agent (localhost:8000)
+flowchart LR
-  ├── Opus + RAG + 세션 컨텍스트
+    R1["1. 22 단계 파이프라인<br/>안정화<br/><sub>프레임 연결 / 시각 점검 보강 /<br/>MDX 정리 / 01·02·04 검증</sub>"]
-  ├── 도메인 지식 (건설/DX/BIM)
+    R2["2. 옛 코드 검토<br/>및 반영<br/><sub>Phase Q 25 모듈 audit</sub>"]
-  └── 대화/생성/피드백/실행 모드
+    R3["3. AI 보정 /<br/>재구성 단계<br/><sub>점수 낮음 / 모두 거절 /<br/>재구성 / 오버플로우 반복</sub>"]
+    R4["4. DB / 카탈로그<br/>정리<br/><sub>프레임 / V4 / 실행이력 / 사용자 변경</sub>"]
+    R5["5. 프론트엔드 연결<br/><sub>실행 목록 / 타임라인 /<br/>매칭 후보 / 적용 계획</sub>"]
+    R6["6. HTML 수정 기능<br/><sub>user_overrides.json</sub>"]
+    R7["7. 프레임 지속<br/>업데이트<br/><sub>Figma → Phase Z 어댑터 추가</sub>"]
 
-Design Agent (localhost:8001, 이 프로젝트)
+    R1 --> R2 --> R3 --> R4 --> R5 --> R6 --> R7
-  ├── 슬라이드 생성 전용
+
-  ├── Kei API로 꼭지 추출(1A) + 컨셉 구체화(1B) + 에스컬레이션(1.8) 호출
+    classDef current fill:#fff3cd,stroke:#f59f00,color:#000
-  ├── Sonnet으로 HTML 생성(Stage 2)
+    classDef future fill:#f3f0ff,stroke:#7048e8,color:#000
-  ├── Opus Vision으로 품질 검증(Stage 4)
+    classDef later fill:#f8f9fa,stroke:#868e96,color:#000,stroke-dasharray: 5 5
-  └── 두 프로젝트는 독립. 코드 공유 없음. API 연동만.
+
+    class R1 current
+    class R2,R3 future
+    class R4,R5,R6,R7 later
 ```
+
+**현재 위치**: 단계 1 (22 단계 파이프라인 안정화). MDX03 정상 경로 닫힘 → 일반화 진행 중.
+
+### 단계별 상세
+
+**1. 22 단계 파이프라인 안정화 (현재)**
+
+- 프레임 ↔ Phase Z 연결 구조 정리
+  - F14 / F11 / F18 등 Phase Z 가 아직 받지 못하는 Figma 프레임의 어댑터 추가
+  - *Figma 새 디자인이나 V4 새 매칭이 아니라*, 이미 두 곳 (Figma / V4) 에 있는 프레임을 Phase Z 런타임이 받아 쓸 수 있게 연결만
+- 시각 점검 범위 확장 (Step 14)
+  - 누락 이미지 / 표 잘림 / 이미지 비율 어긋남 / 빈 공간 검사
+- MDX 정규화 / 정리 방법 적용 (Step 2 / 3 / 4)
+- MDX 01 / 02 / 04 검증으로 예외 케이스 발견 + 파이프라인 일반화
+
+**2. 옛 코드 검토 및 반영**
+
+- `src/` 안 옛 25 개 모듈 (slide_measurer, space_allocator, content_editor 등) 각각 검토
+- 살릴 기능 / 폐기할 모듈 / 학습 자료로만 둘 것 분류
+- 살릴 것은 Phase Z 로 이식
+
+**3. AI 보정 / 재구성 단계**
+
+- 점수 낮음 / 모두 거절 / 재구성 필요 / 오버플로우 반복 케이스 처리
+- AI 가 MDX 원문은 보존하면서 슬롯 데이터 / Region / 팝업 / 레이아웃 제안
+- 연결되는 단계: Step 9 / 12 / 17 / 19 / 21
+
+**4. DB / 카탈로그 정리**
+
+- 프레임 카탈로그 / 컨트랙트
+- V4 결과
+- 실행 이력 / 단계별 산출물
+- 사용자 변경 이력 (어떤 후보를 골랐는지 등)
+
+**5. 프론트엔드 연결**
+
+- 실행 목록 / preview.png / final.html 보기
+- 22 단계 타임라인 (각 단계 산출물 시각화)
+- V4 1~6 위 후보 표시 + 사용자 선택
+- 레이아웃 / Region / 적용 계획 표시
+- 시각 점검 / 재시도 / 다음 조치 결과
+
+**6. HTML 수정 기능**
+
+- 텍스트 수정
+- 이미지 크기 / 위치 조정
+- 프레임 후보 변경 (V4 의 1 위 외 다른 위 선택)
+- 레이아웃 / Region 조정
+- `user_overrides.json` 으로 저장 (final.html 직접 수정 X — MDX 원문 보존 원칙 정합)
+
+**7. 프레임 지속 업데이트**
+
+- Figma → HTML 변환 추가 (`figma_to_html_agent/`)
+- Phase Z 어댑터 연결 (단계 1 의 작업과 같은 방식)
+- 컨트랙트 / partial / 빌더 추가
+- V4 카탈로그와 런타임 동기화
+
+---
+
+## 5. 운영 원칙
+
+### 5.1 절대 원칙
+
+- **MDX 원문 무손실 보존** — AI 가 일반 경로에서 MDX 원문을 *재작성 / 삭제 / 요약하지 않음*. 원문은 본문 미리보기 또는 자세히보기 / 팝업 어딘가에 *반드시* 보존.
+- **자유 디자인 금지** — Figma 프레임 DB / 카탈로그 / 컨트랙트 기반으로만 디자인 결정. AI 가 프레임 / 레이아웃 / 새 디자인 패턴을 *생성하지 않음*.
+- **그릇 변경 원칙** — 콘텐츠가 안 맞을 때 *콘텐츠를 줄이지 않음*. 대신 *그릇* (레이아웃 / zone / Region / 프레임 / 표시 방식) 을 변경. 공통 CSS / padding / tolerance 임의 축소 *금지*.
+- **dropped 절대 룰** — `text_block / table / image / details` 콘텐츠는 *절대 삭제하지 않음*. 장식 요소 (decorative_element) 만 공간 부족 시 dropped 가능.
+
+### 5.2 V4 ↔ Phase Z 책임 분담
+
+| 시스템 | 역할 |
+|---|---|
+| **V4** | 프레임 *선택* — 점수 + 라벨 (그대로 사용 / 가벼운 편집 / 재구성 / 거절) |
+| **Step 5** | V4 후보를 거절 제외 최대 6 개로 정리 |
+| **Step 6** | 구성 단위 결정 (어느 섹션 묶음 = 1 zone) — 현재는 V4 1 위를 그대로 채택 |
+| **Step 9** | V4 후보를 *어떻게 적용할지* 번역 (V4 점수를 다시 계산하지 않음) |
+
+V4 라벨 → 적용 방식 변환:
+- `그대로 사용` → 바로 삽입
+- `가벼운 편집` → 같은 프레임에 약간 조정
+- `재구성` → 레이아웃 / Region 변경 (자동으로는 적용 안 함, 사람 확인)
+- `거절` → 제외
+
+### 5.3 렌더 정책
+
+- 현재 렌더는 V4 의 1 위 후보 사용
+- 2~6 위는 보존만 — 향후 프론트엔드에서 사용자가 선택할 수 있게
+- `final.html` 을 직접 수정하지 않음 — 프론트엔드에서 변경 시 `user_overrides.json` 으로 누적 (원문 보존 원칙과 정합)
+
+---
+
+## 참고 문서
+
+| 문서 | 역할 |
+|---|---|
+| [`CLAUDE.md`](CLAUDE.md) | 프로젝트 규칙 + Phase Z 위계 |
+| [`PHASE-Z-PIPELINE-OVERVIEW.md`](docs/architecture/PHASE-Z-PIPELINE-OVERVIEW.md) | 22 단계 도면 (구조 잠금) |
+| [`PHASE-Z-PIPELINE-STATUS-BOARD.md`](docs/architecture/PHASE-Z-PIPELINE-STATUS-BOARD.md) | 현재 진행 상태 (✅ / ⚠ / ❌) |
+| [`PHASE-Z-CHANGE-LOG.md`](docs/architecture/PHASE-Z-CHANGE-LOG.md) | 결정 변경 이력 |
+| [`PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md`](docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md) | 콘텐츠 객체 + Internal Region + Frame Slot 명세 |
+| [`PHASE-Z-FIT-CLASSIFIER-ROUTER-SPEC.md`](docs/architecture/PHASE-Z-FIT-CLASSIFIER-ROUTER-SPEC.md) | Step 14~19 점검 / 라우팅 명세 |
+| [`IMPROVEMENT-REDESIGN.md`](IMPROVEMENT-REDESIGN.md) | Phase Z 통합 설계 |
+| [`PROCESS_OVERVIEW.html`](PROCESS_OVERVIEW.html) | 임원 보고용 A4 2 페이지 (프로세스 + 구조도) |
+| [`PROGRESS.md`](PROGRESS.md) | 전체 Phase 이력 (Phase 1~T + R' + Z) |

docs/BLOCK_SLOTS_45.py

@@ -1,105 +0,0 @@
-# 45개 블록 BLOCK_SLOTS — design_director.py에 반영 필요
-# 다른 쪽 작업 완료 후 교체
-
-BLOCK_SLOTS = {
-    # headers/
-    "section-title-with-bg": {"required": ["title_ko"], "optional": ["title_en", "breadcrumb", "bg_image"]},
-    "section-header-bar": {"required": ["title"], "optional": ["subtitle"]},
-    "topic-left-right": {"required": ["title", "description"], "optional": []},
-    "topic-center": {"required": ["title"], "optional": ["subtitle", "description"]},
-    "topic-numbered": {"required": ["number", "title"], "optional": ["description", "color"]},
-    # cards/
-    "card-image-3col": {"required": ["cards"], "optional": []},
-    "card-text-grid": {"required": ["cards"], "optional": []},
-    "card-dark-overlay": {"required": ["cards"], "optional": []},
-    "card-tag-image": {"required": ["cards"], "optional": []},
-    "card-icon-desc": {"required": ["cards"], "optional": []},
-    "card-compare-3col": {"required": ["cards"], "optional": []},
-    "card-step-vertical": {"required": ["steps"], "optional": []},
-    "card-image-round": {"required": ["cards"], "optional": []},
-    "card-stat-number": {"required": ["stats"], "optional": []},
-    "card-numbered": {"required": ["items"], "optional": []},
-    # tables/
-    "compare-3col-badge": {"required": ["headers", "rows"], "optional": []},
-    "compare-2col-split": {"required": ["left_title", "right_title", "rows"], "optional": []},
-    "table-simple-striped": {"required": ["headers", "rows"], "optional": []},
-    # visuals/
-    "venn-diagram": {"required": ["center_label", "items"], "optional": ["center_sub", "description"]},
-    "circle-gradient": {"required": ["label"], "optional": ["sub_label"]},
-    "compare-pill-pair": {"required": ["left_label", "right_label"], "optional": ["left_sub", "right_sub"]},
-    "process-horizontal": {"required": ["steps"], "optional": []},
-    "flow-arrow-horizontal": {"required": ["steps"], "optional": []},
-    "keyword-circle-row": {"required": ["keywords"], "optional": []},
-    "layer-diagram": {"required": ["layers"], "optional": ["title"]},
-    "timeline-vertical": {"required": ["events"], "optional": []},
-    "timeline-horizontal": {"required": ["events"], "optional": []},
-    "pyramid-hierarchy": {"required": ["levels"], "optional": []},
-    # emphasis/
-    "quote-left-border": {"required": ["quote_text"], "optional": ["source"]},
-    "quote-big-mark": {"required": ["quote_text"], "optional": ["source"]},
-    "quote-question": {"required": ["question"], "optional": ["description"]},
-    "conclusion-accent-bar": {"required": ["conclusion_text"], "optional": ["label"]},
-    "comparison-2col": {"required": ["left_title", "left_content", "right_title", "right_content"], "optional": ["left_subtitle", "right_subtitle"]},
-    "banner-gradient": {"required": ["text"], "optional": ["sub_text"]},
-    "dark-bullet-list": {"required": ["bullets"], "optional": ["title"]},
-    "highlight-strip": {"required": ["segments"], "optional": []},
-    "callout-solution": {"required": ["title", "description"], "optional": ["icon", "source"]},
-    "callout-warning": {"required": ["title", "description"], "optional": ["icon"]},
-    "tab-label-row": {"required": ["tabs"], "optional": []},
-    "divider-text": {"required": ["text"], "optional": []},
-    # media/
-    "image-row-2col": {"required": ["images"], "optional": []},
-    "image-grid-2x2": {"required": ["images"], "optional": []},
-    "image-side-text": {"required": ["image_src"], "optional": ["image_alt", "title", "description", "bullets"]},
-    "image-full-caption": {"required": ["src"], "optional": ["alt", "caption"]},
-    "image-before-after": {"required": ["before_src", "after_src"], "optional": ["before_label", "after_label", "caption"]},
-}
-
-# _apply_defaults 용
-BLOCK_DEFAULTS = {
-    "section-title-with-bg": {"title_ko": "(제목)"},
-    "section-header-bar": {"title": "(섹션)"},
-    "topic-left-right": {"title": "(소제목)", "description": ""},
-    "topic-center": {"title": "(제목)"},
-    "topic-numbered": {"number": "1", "title": "(단계)"},
-    "card-image-3col": {"cards": []},
-    "card-text-grid": {"cards": []},
-    "card-dark-overlay": {"cards": []},
-    "card-tag-image": {"cards": []},
-    "card-icon-desc": {"cards": []},
-    "card-compare-3col": {"cards": []},
-    "card-step-vertical": {"steps": []},
-    "card-image-round": {"cards": []},
-    "card-stat-number": {"stats": []},
-    "card-numbered": {"items": []},
-    "compare-3col-badge": {"headers": [], "rows": []},
-    "compare-2col-split": {"left_title": "A", "right_title": "B", "rows": []},
-    "table-simple-striped": {"headers": [], "rows": []},
-    "venn-diagram": {"center_label": "관계도", "items": [], "center_sub": "", "description": ""},
-    "circle-gradient": {"label": "(라벨)"},
-    "compare-pill-pair": {"left_label": "A", "right_label": "B"},
-    "process-horizontal": {"steps": []},
-    "flow-arrow-horizontal": {"steps": []},
-    "keyword-circle-row": {"keywords": []},
-    "layer-diagram": {"layers": []},
-    "timeline-vertical": {"events": []},
-    "timeline-horizontal": {"events": []},
-    "pyramid-hierarchy": {"levels": []},
-    "quote-left-border": {"quote_text": "(인용)"},
-    "quote-big-mark": {"quote_text": "(인용)"},
-    "quote-question": {"question": "(질문)"},
-    "conclusion-accent-bar": {"conclusion_text": "(결론)"},
-    "comparison-2col": {"left_title": "A", "left_content": "-", "right_title": "B", "right_content": "-"},
-    "banner-gradient": {"text": "(배너)"},
-    "dark-bullet-list": {"bullets": []},
-    "highlight-strip": {"segments": []},
-    "callout-solution": {"title": "(솔루션)", "description": ""},
-    "callout-warning": {"title": "(경고)", "description": ""},
-    "tab-label-row": {"tabs": []},
-    "divider-text": {"text": "구분"},
-    "image-row-2col": {"images": []},
-    "image-grid-2x2": {"images": []},
-    "image-side-text": {"image_src": ""},
-    "image-full-caption": {"src": ""},
-    "image-before-after": {"before_src": "", "after_src": ""},
-}

docs/FIGMA-COMPONENT-EXTRACTION-PLAN.md

@@ -1,582 +0,0 @@
-# Figma → 컴포넌트 추출 + 카탈로그 구축 계획
-
-## 목적
-
-Figma 디자인(바론컨설턴트 홈페이지 기획팀 공유)에서 재사용 가능한 **콘텐츠 블록**을 추출하고, 디자인 팀장(Sonnet)이 선택할 수 있는 카탈로그로 체계화한다.
-
-**핵심 원칙: 블록은 모드 독립적이다.**
-- 블록 자체는 "슬라이드 전용"이 아니라 **HTML/CSS 콘텐츠 블록**
-- 슬라이드 모드(100vh, overflow:hidden)와 웹/스크롤 모드(auto, overflow:visible)는 **컨테이너(base 템플릿)**가 결정
-- 블록은 높이를 고정하지 않음 → 어떤 컨테이너에도 들어갈 수 있음
-- 현재는 `slide-base.html`(슬라이드)에 집중하되, 향후 `page-base.html`(웹) 추가 가능
-
-```
-블록 (카드, 표, 인용 등) — 모드와 무관, 재사용 가능
-    ↓
-slide-base.html → height:100vh, overflow:hidden (슬라이드 모드)
-page-base.html  → height:auto, overflow:visible (웹/스크롤 모드, 향후)
-```
-
----
-
-## 현재 상태
-
-### 보유 자산
-
-| 항목 | 상태 | 위치 |
-|------|------|------|
-| Figma API 접근 | ✅ 가능 | Token: `.env` |
-| 기존 블록 템플릿 7종 | ✅ 완성 | `templates/blocks/` |
-| 디자인 토큰 | ✅ 완성 | `static/tokens.css` |
-| 슬라이드 렌더러 | ✅ 완성 | `src/renderer.py` |
-| 디자인 팀장 (DA-13) | ❌ todo | `src/design_director.py` |
-| 블록 카탈로그 | ❌ 없음 | - |
-
-### Figma 파일 구조
-
-```
-바론 공유 2025.05.13 (node: 1574-6254)
-├── 1장 바론컨설턴트
-├── 2장 디지털전환
-│   ├── 2-1 건설산업에서의 디지털전환 (1920x8538, 스크롤형)
-│   ├── 2-2 디지털전환과 소프트웨어 (1920x9123, 스크롤형)
-│   └── 건설산업에서의 디지털전환 (1920x8536, 스크롤형)
-│   [자세히보기]
-│   ├── 2-1장 자세히보기 (4프레임: 건설산업/BIM/GIS/디지털트윈)
-│   ├── 2-2장 자세히보기
-│   └── 2-3장 자세히보기
-├── 3장 제공서비스
-│   ├── 3-1장 솔루션프로그램 자세히보기
-│   └── 3-3장 빅룸 자세히보기
-└── 모션작업
-```
-
-### 기존 블록 vs Figma에서 발견된 패턴
-
-| 패턴 | 기존 블록 | Figma에서 발견 | 갭 |
-|------|----------|--------------|-----|
-| 2단 비교 | ✅ comparison | ✅ | - |
-| 카드 그리드 | ✅ card-grid | ✅ (변형 다수) | 변형 추가 필요 |
-| 벤 다이어그램 | ✅ relationship | ✅ | - |
-| 단계 흐름 | ✅ process | ✅ | - |
-| 강조 인용 | ✅ quote-block | ✅ (큰따옴표 장식) | 변형 추가 필요 |
-| 결론 바 | ✅ conclusion-bar | ✅ | - |
-| 비교 테이블 | ✅ comparison-table | ✅ | - |
-| **이미지 갤러리** | ❌ | ✅ (2열, 3열, 2x2) | **신규** |
-| **타임라인** | ❌ | ✅ (세로 원형 4단계) | **신규** |
-| **섹션 타이틀** | ❌ | ✅ (영문+한글 공통 헤더) | **신규** |
-| **사례 카드** | ❌ | ✅ (출처+불릿 카드) | **신규** |
-| **핵심 지표** | ❌ (정의만) | ✅ (큰 숫자+보조) | **신규** |
-| **아이콘 리스트** | ❌ | ✅ (아이콘+제목+설명) | **신규** |
-| **Hero 섹션** | ❌ | ✅ (배경+원형이미지+텍스트) | **신규** |
-| **CTA 버튼 바** | ❌ | ✅ (자세히보기 버튼) | **필요 시** |
-| **이미지 블록** | ❌ | ✅ (도표, 참고자료) | **신규** (3변형: full/side/thumb) |
-| **자세히보기 블록** | ❌ | ✅ (상세 콘텐츠 접기/펼치기) | **신규** (`<details>/<summary>`) |
-
----
-
-## 작업 계획
-
-### Phase A: Figma 분석 + 패턴 추출
-
-#### A-1: Figma 전체 섹션 이미지 렌더링
-- **작업:** 각 섹션/프레임을 이미지로 렌더링하여 시각적으로 패턴 식별
-- **방법:**
-  - **1차:** Framelink MCP `get_figma_data` — CSS-ready 데이터로 노드 구조 + 스타일 동시 추출
-  - **2차:** Figma 공식 MCP `get_screenshot` — 시각 참고용 스크린샷
-  - **fallback:** Figma REST API `/v1/images/{file_key}?ids={node_ids}` (MCP 미설치 시)
-- **산출물:** `docs/figma-screenshots/` 폴더에 PNG 저장
-- **완료 기준:** 모든 자세히보기 프레임(8개)의 스크린샷 확보
-
-#### A-2: Figma 노드 구조 심층 분석
-- **작업:** 각 프레임의 상세 스타일 + 레이아웃 정보 추출
-- **방법:**
-  - **1차:** Framelink MCP `get_figma_data` (nodeId 지정, depth 조절)
-    - 자동 CSS 변환: 색상→hex/rgba, 레이아웃→flex 용어, 그림자→box-shadow, 그라데이션→linear-gradient()
-    - 스타일 중복 제거 (글로벌 변수로 추출)
-    - 토큰 효율적 (raw API 대비 1/5 크기)
-  - **2차:** Figma 공식 MCP `get_variable_defs` — 디자인 토큰/변수 추출
-  - **fallback:** Figma REST API `/v1/files/{key}/nodes?ids={ids}&depth=5` (MCP 미설치 시)
-- **추출 정보:**
-  - TEXT 노드: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, color, 텍스트 내용
-  - FRAME/GROUP: auto-layout (direction, gap, padding, alignItems, justifyContent), constraints
-  - RECTANGLE: fills (solid/gradient/image), strokes, cornerRadius, effects
-  - INSTANCE: componentId (재사용 컴포넌트 식별)
-- **Figma → CSS 매핑 (Framelink MCP가 자동 처리, REST API 시 수동):**
-  - `layoutMode: "VERTICAL"` → `flex-direction: column`
-  - `primaryAxisAlignItems: "CENTER"` → `justify-content: center`
-  - `itemSpacing: 20` → `gap: 20px`
-  - `paddingLeft/Right/Top/Bottom` → `padding`
-  - `fills[].color {r,g,b,a}` → `rgba()` 또는 `#hex`
-  - `fills[].type: "GRADIENT_LINEAR"` → `linear-gradient(...)`
-  - `cornerRadius` → `border-radius`
-  - `strokes + strokeWeight` → `border`
-  - `effects[].type: "DROP_SHADOW"` → `box-shadow`
-  - `fontSize` → `font-size` (px 단위)
-  - `lineHeightPercentFontSize: 170` → `line-height: 1.7`
-- **산출물:** `docs/figma-analysis/` 폴더에 구조 문서
-- **주의:** Figma API rate limit 심함 — depth 깊은 요청은 30분 차단 가능. 얕게 요청 후 필요한 노드만 상세 조회
-
-#### A-3: 디자인 패턴 분류 + 명명
-- **작업:** 추출된 시각 요소를 재사용 가능한 블록 단위로 분류
-- **기준:**
-  - 2회 이상 반복되는 패턴 → 블록 후보
-  - 슬롯(교체 가능한 위치)이 명확한 것 → 우선 순위 높음
-  - 콘텐츠 유형과 매칭되는 것 → 우선 순위 높음
-- **산출물:** 패턴 목록 + 각 패턴의 Figma 원본 노드 ID
-
-### Phase B: HTML/CSS 컴포넌트 제작
-
-#### B-1: 신규 블록 템플릿 제작 (8~10종)
-- **파일:** `templates/blocks/{name}/` 폴더별 정리 (변형별 파일 + preview.png)
-- **제작 순서 (우선순위):**
-  1. `section-title/default.html` — 공통 헤더 (모든 슬라이드에서 사용)
-  2. `example-card/2col.html` — 사례 카드 (출처+불릿, 정책 문서 인용)
-  3. `image-block/full.html`, `side.html`, `thumb.html` — 이미지 블록 3변형
-     - full: 전체 너비 (핵심 도표, 가로형)
-     - side: 텍스트 옆 (보조 이미지, 세로형)
-     - thumb: 썸네일 (참고 문서 표지)
-     - CSS: `object-fit: contain` (비율 유지, 잘리지 않음)
-     - 원본 이미지 그대로 사용, 크기만 조절 (crop 안 함)
-  4. `image-gallery/2col.html`, `3col.html`, `2x2.html` — 이미지 갤러리
-  5. `timeline/vertical.html`, `horizontal.html` — 타임라인 (연혁/로드맵)
-  6. `big-number/3col.html`, `4col.html` — 핵심 지표 (큰 숫자 + 보조 텍스트)
-  7. `icon-list/vertical.html`, `grid.html` — 아이콘 리스트 (기능 나열)
-  8. `details-block/default.html` — 자세히보기 (`<details>/<summary>`)
-     - 슬라이드 표면: 요약만 표시
-     - 펼치면: 전체 상세 내용
-     - 인쇄 시: `beforeprint` 이벤트로 자동 펼침
-- **규칙:**
-  - 디자인 토큰(`var(--color-*)`) 사용 (하드코딩 색상 금지)
-  - Jinja2 슬롯 (`{{ variable }}`) 형식
-  - `<style>` 태그를 블록 HTML 안에 포함 (자체 완결)
-  - Figma 원본과 시각적으로 유사하되 1:1 복제 아님 (디자인 토큰 기준)
-  - **높이를 고정하지 않음** (auto 또는 비율 사용) — 모드 독립적
-  - 각 블록에 사람용 주석 포함 (용도, 적합/부적합, Figma 원본 위치)
-
-#### B-1a: Figma 웹 → 블록 변환 규칙
-Figma는 웹사이트 디자인(920px 너비, 세로 스크롤)이므로, 블록으로 변환할 때 아래 규칙을 적용한다:
-
-| Figma 원본 | 블록 변환 | 이유 |
-|------------|----------|------|
-| 높이: 고정 px (예: 200px) | `height: auto` 또는 비율(%) | 720px 안에 들어가야 하고, 웹 모드에서도 동작해야 함 |
-| 너비: 고정 px (예: 920px) | `fr` 또는 `%` (grid 컬럼에 맞춤) | 컨테이너 너비에 적응해야 함 |
-| 색상: Figma 값 (예: #1565c0) | `var(--color-accent)` 등 디자인 토큰 | 토큰 체계 통일. 필요 시 `tokens.css`에 토큰 추가 |
-| 폰트: Figma 값 (예: Noto Sans CJK KR 24px) | `var(--font-subtitle)` 등 디자인 토큰 | Pretendard 기준. 크기 비율만 참고 |
-| 간격: Figma 값 (예: padding 20px, gap 80px) | `var(--spacing-inner)`, `var(--spacing-block)` 등 | 토큰 체계. 비율 참고 |
-| 그라데이션 배경 | **제거** | CLAUDE.md 디자인 규칙: 그라데이션 금지 |
-| 호버/클릭 효과 | **제거** | CLAUDE.md 디자인 규칙: 호버 금지 |
-| 애니메이션/트랜지션 | **제거** | CLAUDE.md 디자인 규칙: 애니메이션 금지 |
-| 원형 이미지 마스크 | **제거** (필요 시 별도 변형으로) | 장식 요소는 기본에서 제외 |
-| 텍스트 위치 | `{{ variable }}` Jinja2 슬롯으로 표시 | 교체 가능한 부분 |
-
-**원칙:** Figma에서 가져오는 것은 **정보 구조(카드 배치, 타임라인 흐름, 비교 레이아웃)**이지, 장식 요소가 아니다.
-
-#### B-2: 기존 블록 변형 추가
-- **대상:**
-  - `quote-block.html` → `quote-block-decorated.html` (큰따옴표 ::before/::after 장식)
-  - `card-grid.html` → `card-grid-icon.html` (아이콘 강조 변형)
-  - `comparison.html` → `comparison-visual.html` (이미지 포함 비교)
-- **규칙:** 기존 슬롯 구조 유지, CSS만 변형
-
-#### B-3: slide-base.html 업데이트
-- **내용:** 신규 블록의 grid-area 지원, 디자인 토큰 추가 (필요 시)
-- **주의:** 기존 7개 블록의 렌더링이 깨지지 않는지 반드시 검증
-
-### Phase C: 카탈로그 구축
-
-#### C-1: catalog.yaml 생성
-- **파일:** `templates/catalog.yaml`
-- **구조:**
-
-```yaml
-version: "1.0"
-blocks:
-  # --- 기존 블록 ---
-  - id: quote-block
-    name: 강조 인용
-    visual: "좌측 컬러 라인 + 배경색 + 인용 텍스트"
-    when: "문제 제기, 핵심 주장, 정의 강조할 때"
-    not_for: "일반 설명문, 사례 나열"
-    slots:
-      required: [quote_text]
-      optional: [source]
-    character_limits:
-      quote_text: 150
-      source: 50
-    variations: [default, decorated]
-    figma_ref: null  # 기존 블록은 Figma 이전에 제작됨
-
-  # --- 신규 블록 ---
-  - id: example-card
-    name: 사례 카드
-    visual: "제목 + 출처(기관/연도) + 불릿 목록, 테두리 박스. 2~3장 나란히."
-    when: "정책 문서 인용, 법령/지침 사례, 출처가 명확한 근거 제시"
-    not_for: "용어 정의, 일반 설명, 비교"
-    slots:
-      required: [items[].title, items[].bullets[]]
-      optional: [items[].source_org, items[].source_year]
-    character_limits:
-      title: 30
-      bullet: 60
-    variations: [single, 2col, 3col]
-    figma_ref: "1574:54586 > 2-1_01 > examples-row"
-
-  - id: image-gallery
-    name: 이미지 갤러리
-    visual: "이미지 2~4장 나란히 + 캡션, 중앙 정렬"
-    when: "근거 자료 사진, 문서 표지, 현장 사진, 참고 이미지"
-    not_for: "텍스트 콘텐츠, 다이어그램 (다이어그램은 relationship 사용)"
-    slots:
-      required: [images[].src, images[].alt]
-      optional: [images[].caption]
-    variations: [2col, 3col, 2x2]
-    figma_ref: "1574:54586 > 2-1_03 > image grid"
-
-  - id: timeline
-    name: 타임라인
-    visual: "세로/가로 축 위에 원형 마커 + 연도/제목/설명"
-    when: "연혁, 로드맵, 정책 시행 일정, 단계별 계획"
-    not_for: "프로세스 흐름 (순서는 있지만 시간이 아닌 것은 process 사용)"
-    slots:
-      required: [events[].year, events[].title]
-      optional: [events[].description]
-    character_limits:
-      title: 25
-      description: 60
-    variations: [vertical, horizontal]
-    figma_ref: "1574:54586 > 2-1_01 > timeline"
-
-  - id: big-number
-    name: 핵심 지표
-    visual: "큰 숫자(2rem+) + 단위 + 보조 설명. 2~4개 나란히."
-    when: "KPI, 통계, 목표 수치, 성과 지표"
-    not_for: "텍스트 설명, 정의"
-    slots:
-      required: [metrics[].number, metrics[].label]
-      optional: [metrics[].unit, metrics[].description]
-    variations: [2col, 3col, 4col]
-    figma_ref: null
-
-  - id: section-title
-    name: 섹션 타이틀
-    visual: "영문 소제목(작은 글씨) + 한글 대제목(큰 글씨), 하단 구분선"
-    when: "모든 슬라이드 상단, 섹션 시작"
-    not_for: "본문 콘텐츠 영역"
-    slots:
-      required: [title_ko]
-      optional: [title_en, subtitle]
-    figma_ref: "공통 > section_title 컴포넌트"
-
-  - id: icon-list
-    name: 아이콘 리스트
-    visual: "아이콘 + 제목 + 설명이 세로로 나열, 좌측 아이콘 정렬"
-    when: "기능 나열, 특성 목록, 장점 리스트"
-    not_for: "비교 (comparison 사용), 순서 (process 사용)"
-    slots:
-      required: [items[].icon, items[].title, items[].description]
-    character_limits:
-      title: 20
-      description: 80
-    variations: [vertical, horizontal, grid]
-    figma_ref: null
-
-layouts:
-  - id: "65-35"
-    name: "6.5:3.5 좌우 분할"
-    grid_columns: "6.5fr 3.5fr"
-    when: "좌측 메인 콘텐츠 + 우측 보조/정의"
-
-  - id: "50-50"
-    name: "5:5 균등 분할"
-    grid_columns: "1fr 1fr"
-    when: "대등한 비교, 병렬 콘텐츠"
-
-  - id: "single"
-    name: "단일 컬럼"
-    grid_columns: "1fr"
-    when: "프로세스 흐름, 타임라인, 단순 구조"
-
-  - id: "35-65"
-    name: "3.5:6.5 좌우 분할"
-    grid_columns: "3.5fr 6.5fr"
-    when: "좌측 요약/네비게이션 + 우측 메인 콘텐츠"
-```
-
-#### C-2: 카탈로그 → 디자인 팀장 프롬프트 연결
-- **파일:** `src/design_director.py` 수정
-- **방법:** `catalog.yaml` 로드 → 블록 목록을 시스템 프롬프트에 삽입
-- **프롬프트 구조:**
-  ```
-  사용 가능한 블록:
-  - quote-block: 좌측 컬러 라인 + 인용 텍스트. 문제 제기할 때 사용. 일반 설명문에는 부적합.
-  - example-card: 제목+출처+불릿. 정책 사례 인용할 때 사용. 2~3장 나란히.
-  - card-grid: 2~4열 카드. 용어 정의 여러 개 나열할 때 사용.
-  ...
-
-  사용 가능한 레이아웃:
-  - 65-35: 좌측 메인 + 우측 보조. 메인 콘텐츠가 많을 때.
-  - 50-50: 균등 비교. 대등한 내용일 때.
-  ...
-
-  위 블록과 레이아웃만 사용하여 배치해라. 목록에 없는 블록은 만들지 마라.
-  ```
-
-#### C-3: renderer.py 업데이트
-- **내용:** 신규 블록 템플릿 로드 지원
-- **주의:** 기존 `BLOCK_SLOTS` dict에 신규 블록 추가
-
----
-
-## 충돌 지점 + 리스크 검토
-
-### 1. Figma 디자인 ≠ 디자인 토큰
-
-| 리스크 | 설명 | 대응 |
-|--------|------|------|
-| **색상 불일치** | Figma는 파란 그라데이션 배경 사용, 디자인 토큰은 `#2563eb` 단색 | Figma 색상을 참고하되 토큰 체계 우선. 필요 시 토큰 추가 (`--color-accent-light` 등) |
-| **폰트 불일치** | Figma는 Noto Sans CJK KR 사용, 토큰은 Pretendard Variable | Pretendard 유지. Figma 폰트 크기 비율만 참고 |
-| **여백 불일치** | Figma 920px 프레임 vs 슬라이드 1280px | 비율 기반으로 변환. 고정 px 대신 토큰 사용 |
-| **웹 vs 슬라이드** | Figma는 웹사이트(세로 스크롤, 920x1231~2208px), 슬라이드는 고정(1280x720px) | 높이 고정하지 않음(auto). 컨테이너가 모드를 결정 |
-
-**원칙:** Figma 디자인을 1:1 복제하지 않는다. 패턴(정보 구조)만 추출하고, 스타일은 디자인 토큰으로 통일한다.
-
-**디자인 토큰 매핑 테이블 (Figma 추출 시 작성):**
-Figma에서 추출한 색상/폰트/간격을 기존 `tokens.css`와 매핑하고, 누락된 토큰이 있으면 추가한다.
-
-| Figma 속성 | 추출값 (예시) | 기존 토큰 매핑 | 신규 토큰 필요? |
-|------------|-------------|--------------|--------------|
-| 배경색 (SOLID fill) | `#f8fafc` | `--color-bg-subtle` | - |
-| 포인트 색상 | `#1565c0` | `--color-accent` (현재 `#2563eb`) | 검토 필요 |
-| 텍스트 색상 | `#1e293b` | `--color-primary` | - |
-| 보조 텍스트 | `#64748b` | `--color-neutral` | - |
-| 경고/강조 | `#dc2626` | `--color-danger` | - |
-| 본문 폰트 크기 | `16px` | `--font-body` (현재 `0.95rem ≈ 15.2px`) | 비율 확인 |
-| 제목 폰트 크기 | `24px` | `--font-subtitle` (현재 `1.25rem = 20px`) | 비율 확인 |
-| 블록 간 간격 | `20px` | `--spacing-block` | - |
-| 내부 패딩 | `16px` | `--spacing-inner` | - |
-| 카드 상단 액센트 | `3px solid` | `--accent-border` | - |
-
-이 매핑 테이블은 Phase A-2에서 실제 Figma 값을 추출한 후 정확한 값으로 채운다. 기존 토큰과 차이가 크면 토큰을 추가하되, 기존 토큰의 값을 변경하지 않는다 (기존 7개 블록이 깨질 수 있음).
-
-### 2. 블록 개수 증가 → 디자인 팀장 혼란
-
-| 리스크 | 설명 | 대응 |
-|--------|------|------|
-| **선택지 과다** | 7개 → 13~15개로 증가 시 Sonnet이 부적절한 블록 선택 가능 | `when` + `not_for` 필드로 선택 기준 명확화. 프롬프트에 "이런 콘텐츠에는 이 블록을 쓰지 마라" 명시 |
-| **유사 블록 혼동** | card-grid vs example-card vs icon-list 구분 | 카탈로그에 각 블록의 차이점 명시. 예: "card-grid는 정의, example-card는 출처 있는 사례, icon-list는 기능 나열" |
-
-**대응:** catalog.yaml의 `not_for` 필드가 핵심. "이 블록은 이것에 쓰지 마라"를 명시해야 혼동 감소.
-
-### 3. 기존 파이프라인 깨짐
-
-| 리스크 | 설명 | 대응 |
-|--------|------|------|
-| **renderer.py 호환성** | 신규 블록 추가 시 기존 렌더링 깨짐 | 기존 7개 블록 테스트 먼저 통과 확인 후 신규 추가 |
-| **BLOCK_SLOTS 누락** | design_director.py의 BLOCK_SLOTS에 신규 블록 미등록 | catalog.yaml에서 자동 로드하는 방식으로 전환 |
-| **slide-base.html** | grid-template-areas에 신규 area명 미지원 | 동적 생성이므로 문제 없음 (Sonnet이 area명을 직접 지정) |
-
-**대응:** Phase B 완료 후 기존 테스트 케이스(DA-16) 반드시 재실행.
-
-### 4. Figma API 제약
-
-| 리스크 | 설명 | 대응 |
-|--------|------|------|
-| **CSS 미제공** | Figma REST API는 CSS를 직접 제공하지 않음. 스타일 속성만 제공 | **Framelink MCP 사용 시 자동 CSS 변환.** REST API만 사용 시 수동 변환 필요 |
-| **이미지 에셋** | 벡터(VECTOR, ELLIPSE)는 PNG로 렌더링 가능하나 CSS 재현 필요 | **Framelink MCP `download_figma_images`로 일괄 export.** 단순 도형은 CSS, 복잡한 것은 PNG |
-| **INSTANCE 참조** | Figma 컴포넌트(Instance)의 master 확인 필요 | `GET /v1/files/{key}/components`로 마스터 컴포넌트 조회 |
-| **Rate Limit** | REST API depth 깊은 요청 시 30분 차단 가능 | **Framelink MCP가 토큰 효율적 (raw API 대비 1/5).** 얕게 요청 후 필요한 노드만 상세 조회. 결과 캐싱 |
-| **디자인 토큰 접근** | REST API로는 Figma 변수/토큰 추출 불가 (별도 scope 필요) | **Figma 공식 MCP `get_variable_defs` 사용.** 또는 노드 속성에서 수동 추출 |
-| **의미적 HTML 추론 불가** | "버튼"은 FRAME+TEXT, "카드"는 FRAME+FRAME — 태그 구분 없음 | 노드 이름(naming convention)으로 추론. 예: `section_title`, `example-card` |
-
-#### MCP 도구 설정
-
-**Framelink MCP (권장, CSS-ready 추출):**
-```json
-// Claude Code MCP 설정
-{
-  "mcpServers": {
-    "Framelink MCP for Figma": {
-      "command": "cmd",
-      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
-    }
-  }
-}
-```
-- `get_figma_data`: 노드 스타일을 CSS-ready YAML로 변환 (색상→hex, 레이아웃→flex, 그림자→box-shadow)
-- `download_figma_images`: 이미지 일괄 다운로드 (크롭, 중복 제거 자동)
-
-**Figma 공식 MCP (디자인 토큰 + 스크린샷):**
-```
-claude mcp add --transport http figma https://mcp.figma.com/mcp
-```
-- `get_variable_defs`: 디자인 토큰(색상, 간격, 타이포) 추출
-- `get_screenshot`: 시각 참고용 스크린샷
-- 주의: Free/Starter 플랜 = 월 6회 호출 제한
-
-### 5. Starlight(.astro) 연결 시 충돌
-
-| 리스크 | 설명 | 대응 |
-|--------|------|------|
-| **CSS 변수 충돌** | Starlight 자체 CSS 변수(`--sl-*`)와 디자인 토큰(`--color-*`) 충돌 | 네임스페이스 분리: `--da-color-*` 접두사 사용 검토 |
-| **폰트 로딩** | .astro에서 Pretendard CDN 로드 필요 | `<style is:global>`에 @import 포함 |
-| **`<style>` 인라인** | 현재 렌더러가 CSS를 인라인하는데, .astro에서 Starlight CSS와 섞임 | `.astro` 출력 시 scoped style 또는 `is:global` + 높은 specificity |
-
-**대응:** .astro 출력은 Phase C 이후 별도 태스크로. 현재는 독립 HTML 출력에 집중.
-
-### 6. 유사 프로젝트 사례에서 발견된 문제
-
-| 사례 | 문제 | 교훈 |
-|------|------|------|
-| **SlideSpeak** | 16개 레이아웃으로 시작했으나 실제 콘텐츠 다양성 커버 못함 | 블록을 조합하는 방식이 고정 레이아웃보다 유연 (현재 방식 유지) |
-| **PPTAgent (EMNLP 2025)** | 레퍼런스 슬라이드 클러스터링 시 과소/과다 분류 문제 | 블록 수를 10~15개로 제한. 너무 세분화하면 AI 선택이 어려워짐 |
-| **Beautiful.ai** | 300개 템플릿 중 실제 사용은 20개 | 처음부터 많이 만들지 않기. 실제 사용 빈도 보고 추가 |
-| **InfoDesignLM** | 텍스트만으로 레이아웃 생성 시 콘텐츠 양 ↔ 공간 불일치 | character_limits를 카탈로그에 명시, 텍스트 편집자가 강제 준수 |
-
----
-
-## 작업 순서 (의존 관계)
-
-```
-A-1 (Figma 스크린샷) ──┐
-                        ├→ A-3 (패턴 분류) → B-1 (신규 블록 제작) → B-3 (base 업데이트)
-A-2 (노드 구조 분석) ──┘                                              ↓
-                                                              C-1 (catalog.yaml)
-                                                                      ↓
-                                              B-2 (변형 추가) → C-2 (팀장 프롬프트 연결)
-                                                                      ↓
-                                                              C-3 (renderer 업데이트)
-                                                                      ↓
-                                                              기존 테스트 재실행 (DA-16)
-```
-
-### 예상 소요
-
-| Phase | 작업 | 규모 |
-|-------|------|------|
-| A (분석) | Figma 스크린샷 + 노드 분석 + 패턴 분류 | 탐색/조사 |
-| B (제작) | 신규 블록 6~8종 + 변형 3종 + base 업데이트 | 구현 (핵심) |
-| C (카탈로그) | catalog.yaml + 팀장 프롬프트 + renderer 업데이트 | 연결/통합 |
-
-**핵심 원칙:** Phase A에서 패턴을 정확히 분류하지 않으면 Phase B에서 쓸모없는 블록을 만들게 된다. 분석 먼저, 제작은 그 다음.
-
----
-
-## 산출물 목록
-
-```
-docs/
-├── figma-screenshots/           # A-1: 각 프레임 PNG
-├── figma-analysis/              # A-2: 노드 구조 문서 + 디자인 토큰 매핑 테이블
-└── FIGMA-COMPONENT-EXTRACTION-PLAN.md  # 이 파일
-
-templates/
-├── catalog.yaml                 # C-1: 블록 카탈로그 (AI용 메뉴판 + 사람용 참고)
-├── blocks/
-│   ├── comparison/              # 기존 (폴더 구조로 재편)
-│   │   ├── default.html
-│   │   └── preview.png
-│   ├── card-grid/               # 기존
-│   │   ├── default.html
-│   │   ├── icon.html            # B-2: 변형
-│   │   └── preview.png
-│   ├── relationship/            # 기존
-│   ├── process/                 # 기존
-│   ├── quote-block/             # 기존
-│   │   ├── default.html
-│   │   ├── decorated.html       # B-2: 변형
-│   │   └── preview.png
-│   ├── conclusion-bar/          # 기존
-│   ├── comparison-table/        # 기존
-│   ├── section-title/           # B-1: 신규
-│   │   ├── default.html
-│   │   └── preview.png
-│   ├── example-card/            # B-1: 신규
-│   │   ├── single.html
-│   │   ├── 2col.html
-│   │   ├── 3col.html
-│   │   └── preview.png
-│   ├── image-block/             # B-1: 신규 (3변형)
-│   │   ├── full.html            # 전체 너비 (핵심 도표)
-│   │   ├── side.html            # 텍스트 옆 (보조 이미지)
-│   │   ├── thumb.html           # 썸네일 (참고 문서)
-│   │   └── preview.png
-│   ├── image-gallery/           # B-1: 신규
-│   │   ├── 2col.html
-│   │   ├── 3col.html
-│   │   ├── 2x2.html
-│   │   └── preview.png
-│   ├── timeline/                # B-1: 신규
-│   │   ├── vertical.html
-│   │   ├── horizontal.html
-│   │   └── preview.png
-│   ├── big-number/              # B-1: 신규
-│   │   ├── 3col.html
-│   │   ├── 4col.html
-│   │   └── preview.png
-│   ├── icon-list/               # B-1: 신규
-│   │   ├── vertical.html
-│   │   ├── grid.html
-│   │   └── preview.png
-│   └── details-block/           # B-1: 신규
-│       ├── default.html
-│       └── preview.png
-├── slide-base.html              # B-3: 업데이트 (슬라이드 모드)
-└── page-base.html               # 향후: 웹/스크롤 모드
-
-samples/                         # 완성 슬라이드 레시피
-├── dx-bim-comparison/
-│   ├── slide.html               # 완성 HTML
-│   ├── preview.png              # 스크린샷
-│   └── meta.yaml                # 사용된 블록 조합 + Figma 원본 참조
-└── ...
-
-src/
-├── design_director.py           # C-2: catalog.yaml 연동
-└── renderer.py                  # C-3: 신규 블록 지원
-```
-
----
-
-## PROGRESS.md 연동
-
-이 계획의 태스크들은 PROGRESS.md에 아래와 같이 등록한다:
-
-### Phase F (Figma 컴포넌트 추출) — PROGRESS.md 등록 항목
-
-| 태스크 | 상태 | 의존성 | 메모 |
-|--------|------|--------|------|
-| F-A1: Figma 스크린샷 확보 | todo | MCP 설치 후 | Framelink MCP 또는 REST API |
-| F-A2: 노드 구조 심층 분석 | todo | F-A1 | CSS-ready 데이터 + 토큰 매핑 테이블 |
-| F-A3: 패턴 분류 + 명명 | todo | F-A1, F-A2 | 블록 후보 목록 확정 |
-| F-B1: 신규 블록 템플릿 제작 (8~10종) | todo | F-A3 | 폴더 구조, 변환 규칙 적용 |
-| F-B1a: Figma 웹→블록 변환 규칙 검증 | todo | F-B1 | 토큰 매핑, 높이 auto 확인 |
-| F-B2: 기존 블록 변형 추가 | todo | F-B1 | CSS만 변형, 슬롯 유지 |
-| F-B3: slide-base.html 업데이트 | todo | F-B1 | 기존 7개 블록 깨지지 않는지 검증 |
-| F-C1: catalog.yaml 생성 | todo | F-B1 | when/not_for/slots/char_limits |
-| F-C2: 팀장 프롬프트 연결 | todo | F-C1 | catalog.yaml → 시스템 프롬프트 |
-| F-C3: renderer.py 업데이트 | todo | F-C1 | 신규 블록 로드 + BLOCK_SLOTS 동기화 |
-| F-T1: 기존 테스트 재실행 | todo | F-B3, F-C3 | DA-16 기존 케이스 전체 통과 확인 |
-
-**사전 세팅 (Figma 작업 시작 전 필요):**
-
-| 세팅 | 상태 | 설명 |
-|------|------|------|
-| Framelink MCP 설치 | todo | `npx figma-developer-mcp --figma-api-key=...` |
-| Figma 공식 MCP 설치 | todo | `claude mcp add --transport http figma https://mcp.figma.com/mcp` |
-| 기존 블록 폴더 구조 재편 | todo | 플랫 파일 → 블록별 폴더 (`templates/blocks/{name}/`) |
-| preview.png 생성 방법 확보 | todo | HTML을 브라우저로 열어 스크린샷 (수동 또는 Playwright) |
-
----
-
-## 금지 사항
-
-1. Figma 디자인을 1:1 복제하지 않는다 (정보 구조만 추출, 장식은 제거, 스타일은 토큰 기준)
-2. 기존 7개 블록 템플릿을 수정하지 않는다 (신규/변형은 별도 파일)
-3. 한 번에 모든 블록을 만들지 않는다 (A-3 분류 결과를 보고 우선순위 재조정)
-4. catalog.yaml 없이 블록을 추가하지 않는다 (카탈로그 미등록 = 디자인 팀장이 모름)
-5. Kei Persona Agent 코드를 수정하지 않는다
-6. 블록의 높이를 고정 px로 하드코딩하지 않는다 (모드 독립적이어야 함)
-7. 기존 `tokens.css`의 값을 변경하지 않는다 (신규 토큰 추가는 가능, 기존 값 변경은 7개 블록 깨짐 위험)
-8. 이미지를 crop하지 않는다 (원본 그대로, 크기만 조절)
-9. 그라데이션, 호버, 애니메이션 등 Figma 장식 요소를 가져오지 않는다

docs/RESEARCH.md

@@ -1,686 +0,0 @@
-# Design Agent - Technology Research Report
-
-Date: 2026-03-24
-
----
-
-## 1. CSS Grid for Slide Layouts
-
-### 1.1 Fixed-Viewport Approach (16:9, 1280x720)
-
-**Recommended technique: Fixed container + CSS transform scaling.**
-
-The slide container should be authored at a fixed "normal" size (1280x720), then scaled to fit any viewport using `transform: scale()`. This is the same approach used by reveal.js, the dominant HTML presentation framework.
-
-```css
-.slide {
-    width: 1280px;
-    height: 720px;
-    aspect-ratio: 16 / 9;
-    overflow: hidden;
-    position: relative;
-}
-```
-
-For preview/embedding, wrap in a container that calculates a scale factor:
-```css
-.slide-wrapper {
-    width: 100%;
-    max-width: 1280px;
-    aspect-ratio: 16 / 9;
-    overflow: hidden;
-}
-.slide-wrapper > .slide {
-    transform-origin: top left;
-    transform: scale(var(--slide-scale, 1));
-}
-```
-
-The scale factor can be computed with minimal JS: `containerWidth / 1280`.
-
-**Key insight from reveal.js:** All presentations have a "normal" size at which they are authored. The framework automatically scales uniformly to fit different resolutions without changing aspect ratio or layout. Default is 960x700; for our use case, 1280x720 is the standard 16:9 HD dimension.
-
-**Why this works for Design Agent:** The renderer produces HTML at exactly 1280x720. It never needs to be "responsive" -- it's a fixed-format document like a PDF page. Scaling is only for preview purposes.
-
-### 1.2 Grid-Template-Areas for Block Combinations
-
-`grid-template-areas` provides named regions that map directly to the block composition concept in the CLAUDE.md:
-
-```css
-.layout-quote-compare-cards-conclusion {
-    display: grid;
-    grid-template-areas:
-        "quote   quote"
-        "compare cards"
-        "diagram diagram"
-        "conclusion conclusion";
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto 1fr auto auto;
-    gap: var(--spacing-block);
-    padding: var(--spacing-page);
-}
-```
-
-**Best practice:** Define each layout as a separate CSS class with its own `grid-template-areas`. The Sonnet agent selects which layout class to apply based on the block combination it decides. This keeps the renderer deterministic -- it just applies the class.
-
-**Reusability:** CSS variables allow the same grid template to adapt:
-- Column count: `grid-template-columns: repeat(var(--cols, 3), 1fr)`
-- Gap: `gap: var(--spacing-block)`
-- Row sizing: `grid-template-rows` can mix `auto` (content-sized) and `1fr` (fill remaining)
-
-### 1.3 Design Tokens
-
-**Naming convention:** `--{category}-{property}-{variant}`
-
-The CLAUDE.md already defines a good token set. The industry standard approach (from EightShapes, Nord Design System) uses kebab-case with semantic naming:
-
-```
---color-primary, --color-accent, --color-neutral
---font-title, --font-subtitle, --font-body, --font-caption
---spacing-page, --spacing-block, --spacing-inner
---radius, --border-width, --accent-border
-```
-
-This matches what's already in the project's CLAUDE.md. No changes needed.
-
-**For slide-specific tokens, add:**
-```css
---slide-width: 1280px;
---slide-height: 720px;
---slide-aspect: 16 / 9;
-```
-
-### 1.4 Overflow Handling in Fixed Pages
-
-Three techniques for ensuring content fits within fixed dimensions:
-
-1. **Single-line truncation:**
-   ```css
-   .truncate {
-       overflow: hidden;
-       white-space: nowrap;
-       text-overflow: ellipsis;
-   }
-   ```
-
-2. **Multi-line truncation (line clamping):**
-   ```css
-   .line-clamp-3 {
-       display: -webkit-box;
-       -webkit-line-clamp: 3;
-       -webkit-box-orient: vertical;
-       overflow: hidden;
-   }
-   ```
-
-3. **Container overflow hidden (safety net):**
-   ```css
-   .block { overflow: hidden; }
-   .slide { overflow: hidden; }
-   ```
-
-**Korean-specific consideration:** `word-break: keep-all` affects how text wraps, which impacts line count. Content fitting calculations must account for this. The Sonnet agent should be instructed with character limits per slot, not word limits.
-
----
-
-## 2. Content-to-Layout Classification
-
-### 2.1 How to Prompt an LLM for Reliable Classification
-
-**Claude Structured Output (recommended):**
-
-Anthropic launched Structured Outputs in November 2025, supporting Claude Sonnet 4.5 and Opus 4.1. This guarantees JSON schema conformance at the token generation level -- the model literally cannot produce tokens that violate the schema.
-
-Implementation:
-```python
-from pydantic import BaseModel, Field
-from anthropic import Anthropic
-
-class ContentBlock(BaseModel):
-    content_type: str = Field(description="One of: comparison, process, relationship, big-number, definition, list, timeline, emphasis, problem")
-    evidence: str = Field(description="Which text patterns led to this classification")
-    suggested_block: str = Field(description="Block type from the template library")
-
-class ContentAnalysis(BaseModel):
-    blocks: list[ContentBlock]
-    layout_direction: str = Field(description="How blocks should be arranged on the page")
-    primary_message: str = Field(description="The single key takeaway for this slide")
-```
-
-**Reliability strategies:**
-- Set temperature to 0.0-0.1 for classification tasks (reduces format drift)
-- Use the `output_format` parameter with JSON schema (not just prompting)
-- Include one perfect example in the system prompt
-- Add explicit validation instructions
-
-### 2.2 Information Type Taxonomy for Presentations
-
-Based on research from SlideSpeak (16 layout types), PPTAgent (EMNLP 2025), Beautiful.ai (300 templates), and Dr. Andrew Abela's Chart Chooser:
-
-**The CLAUDE.md already defines 9 excellent content types.** Here is how they map to industry precedent:
-
-| CLAUDE.md Type | SlideSpeak Equivalent | PPTAgent Category | Common Slide Type |
-|---|---|---|---|
-| comparison | SS_ITEMS_*_A/B | Content slide (multi-column) | Comparison slide |
-| process | SS_STEPS_3/4/5 | Content slide (sequential) | Process/workflow slide |
-| relationship | (custom) | Content slide (diagram) | Venn/tree diagram slide |
-| big-number | SS_BIGNUMBER_1/3 | Content slide (metric) | KPI/statistics slide |
-| definition (card-grid) | SS_ITEMS_3/4/5/6 | Content slide (grid) | Definition/feature slide |
-| list | SS_CONTENT | Content slide (list) | Bullet point slide |
-| timeline | (custom) | Content slide (sequential) | Timeline slide |
-| emphasis (quote-block) | (custom) | Structural slide | Quote/callout slide |
-| problem | (custom) | Structural slide | Problem statement slide |
-
-**Additional types to consider (from industry):**
-- **SWOT** (SlideSpeak has SS_SWOT) -- 4-quadrant grid
-- **Matrix/Table** (already covered by comparison-table)
-- **Cover/Title** -- for when the content is just a single title/subtitle
-
-### 2.3 Structured Output Schema for Layout Decisions
-
-The PPTAgent paper (EMNLP 2025) uses a two-stage approach that aligns perfectly with the Design Agent architecture:
-
-- **Stage 1 (Opus):** Analyze content, classify into functional types, extract content schemas
-- **Stage 2 (Sonnet):** Select reference layouts, fill content into slots, apply editing actions
-
-PPTAgent represents all parsed outputs in JSON format for LLM compatibility. The Design Agent should do the same.
-
----
-
-## 3. Slot-Based Template Systems
-
-### 3.1 SlideSpeak's Named Slot System
-
-SlideSpeak uses a comprehensive naming convention for template placeholders:
-
-**Layout names:** SS_COVER, SS_CONTENT, SS_TABLE_OF_CONTENT, SS_BIGNUMBER_1_A, SS_BIGNUMBER_3_A, SS_ITEMS_3_A through SS_ITEMS_6_B, SS_STEPS_3 through SS_STEPS_5_ICONS, SS_SWOT
-
-**Universal slot names:**
-- `SS_TITLE` -- slide title
-- `SS_SUBTITLE` -- subtitle
-- `SS_LOGO` -- logo placeholder
-- `SS_IMAGE` -- general image
-- `SS_PAGE` -- page number
-- `SS_PRESENTATION_TITLE` -- footer title
-
-**Multi-item slot naming pattern:**
-- `SS_ITEM_{N}_TITLE` -- title for item N
-- `SS_ITEM_{N}_CONTENT` -- content for item N
-- `SS_ITEM_{N}_NUMBER` -- number for item N (big-number layouts)
-- `SS_ICON_{N}` -- icon for item N
-
-**Key insight for Design Agent:** The `{{SLOT_NAME}}` convention in CLAUDE.md maps well. Adopt a similar systematic naming: `{{BLOCK_TITLE}}`, `{{ITEM_1_TITLE}}`, `{{ITEM_1_CONTENT}}`, etc.
-
-### 3.2 Jinja2 for Template Rendering
-
-Jinja2 is the recommended engine. It integrates natively with FastAPI and Python.
-
-**Block inheritance for base layout:**
-```jinja2
-{# base_slide.html #}
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <link rel="stylesheet" href="design-tokens.css">
-    <style>{% block extra_style %}{% endblock %}</style>
-</head>
-<body>
-    <div class="slide">
-        {% block content %}{% endblock %}
-    </div>
-</body>
-</html>
-```
-
-**Block-level templates:**
-```jinja2
-{# blocks/comparison.html #}
-<div class="block-comparison">
-    <div class="col-left">
-        <h3>{{ left_title }}</h3>
-        <p>{{ left_content }}</p>
-    </div>
-    <div class="col-right">
-        <h3>{{ right_title }}</h3>
-        <p>{{ right_content }}</p>
-    </div>
-</div>
-```
-
-**Composition via includes:**
-```jinja2
-{# Generated by renderer based on Sonnet's layout decision #}
-{% extends "base_slide.html" %}
-{% block content %}
-    {% include "blocks/quote-block.html" %}
-    <div class="grid-row-2">
-        {% include "blocks/comparison.html" %}
-        {% include "blocks/card-grid.html" %}
-    </div>
-    {% include "blocks/conclusion-bar.html" %}
-{% endblock %}
-```
-
-### 3.3 Slot Constraints
-
-Each slot should have defined constraints that Sonnet respects:
-
-| Slot Type | Max Characters (Korean) | Required | Notes |
-|---|---|---|---|
-| slide_title | 30 | Yes | Single line |
-| block_title | 20 | Yes | Single line |
-| item_title | 15 | Yes | Single line |
-| item_content | 80 | No | 2-3 lines |
-| quote_text | 120 | Yes | 3-4 lines |
-| big_number | 8 | Yes | Number + unit |
-| conclusion | 60 | Yes | Single line |
-| caption | 40 | No | Single line |
-
-**Korean consideration:** Korean characters are roughly 2x the width of Latin characters at the same font size. Character limits should be specified in characters, not words, since Korean doesn't use spaces the same way as English.
-
----
-
-## 4. HTML to PDF Conversion
-
-### 4.1 Playwright (Recommended)
-
-**Why Playwright over Puppeteer:**
-- Native Python SDK (no Node.js dependency for a Python project)
-- Multiple browser support (Chromium, Firefox, WebKit), though PDF only works in Chromium
-- Growing community, active maintenance, better CI/CD integration
-- Full CSS Grid support via real Chromium rendering engine
-
-**Python implementation:**
-```python
-from playwright.async_api import async_playwright
-
-async def html_to_pdf(html_content: str, output_path: str) -> None:
-    async with async_playwright() as p:
-        browser = await p.chromium.launch()
-        page = await browser.new_page()
-        await page.set_content(html_content, wait_until="networkidle")
-        await page.pdf(
-            path=output_path,
-            width="1280px",
-            height="720px",
-            print_background=True,
-            prefer_css_page_size=True,
-        )
-        await browser.close()
-```
-
-**Key options:**
-- `print_background=True` -- required for background colors/images
-- `prefer_css_page_size=True` -- lets CSS `@page` rules control dimensions
-- `width`/`height` -- custom page dimensions (accepts px, in, mm, cm units)
-
-### 4.2 Print CSS for Slide Format
-
-```css
-@media print {
-    @page {
-        size: 1280px 720px;
-        margin: 0;
-    }
-    body {
-        margin: 0;
-        -webkit-print-color-adjust: exact;
-        print-color-adjust: exact;
-    }
-    .slide {
-        width: 1280px;
-        height: 720px;
-        page-break-after: always;
-        overflow: hidden;
-    }
-}
-```
-
-**`-webkit-print-color-adjust: exact`** is critical -- without it, background colors and images may be stripped in PDF output.
-
-### 4.3 Quality Comparison
-
-Both Puppeteer and Playwright use Chromium's print-to-PDF engine, so output quality is identical. The choice comes down to:
-
-| Factor | Playwright | Puppeteer |
-|---|---|---|
-| Language | Python, JS, C#, Java | JS/Node.js only |
-| PDF engine | Chromium only | Chromium only |
-| CSS Grid quality | Excellent (Chromium) | Excellent (Chromium) |
-| Korean font rendering | Excellent | Excellent |
-| Install size | ~400MB (browser binary) | ~300MB |
-| API ergonomics | Better async patterns | More established |
-
-**Recommendation:** Playwright, because the Design Agent backend is Python. No need to bridge to Node.js.
-
-### 4.4 Korean-Specific Considerations
-
-- Fonts must be available on the server. Self-host Pretendard/Noto Sans KR WOFF2 files or use CDN.
-- Set `lang="ko"` on the HTML element for proper line-breaking algorithms.
-- Ensure `@font-face` declarations are loaded before PDF generation (`wait_until="networkidle"`).
-
----
-
-## 5. Pure CSS Diagrams
-
-### 5.1 Venn Diagrams (Pure CSS)
-
-**Technique:** Overlapping circles with opacity and negative margins.
-
-```css
-.venn-container { display: flex; align-items: center; justify-content: center; }
-.venn-circle {
-    width: 200px; height: 200px;
-    border-radius: 50%;
-    opacity: 0.7;
-    display: flex; align-items: center; justify-content: center;
-    padding: 20px;
-    text-align: center;
-}
-.venn-a { background: var(--color-accent); }
-.venn-b { background: var(--color-neutral); margin-left: -60px; }
-```
-
-**Advanced approach (Adrian Roselli):** CSS Grid + `shape-outside` for text wrapping within overlapping regions. More complex but better for text-heavy Venn diagrams.
-
-**Limitation:** Pure CSS Venn diagrams work well for 2-3 circles. Beyond that, SVG is more practical.
-
-### 5.2 Flowcharts / Process Arrows (Pure CSS)
-
-**Technique:** Flexbox/Grid layout + pseudo-elements for arrows.
-
-```css
-.process-steps { display: flex; align-items: center; gap: 0; }
-.process-step {
-    background: var(--color-bg-subtle);
-    padding: var(--spacing-inner);
-    position: relative;
-    flex: 1;
-}
-.process-step + .process-step::before {
-    content: '';
-    position: absolute;
-    left: -12px; top: 50%;
-    transform: translateY(-50%);
-    border: 8px solid transparent;
-    border-left-color: var(--color-accent);
-}
-```
-
-**CSS Anchor Positioning (2025-2026):** A new CSS feature for connecting elements with lines. Supported in Chrome 125+, Safari 26+, not yet in Firefox. Since we target Chromium (for PDF generation), this is usable but adds complexity. For the Design Agent, pseudo-element arrows are simpler and more reliable.
-
-### 5.3 Tree/Hierarchy Diagrams (Pure CSS)
-
-**Technique:** Nested `<ul>/<li>` + pseudo-elements for connector lines.
-
-Libraries:
-- **Treeflex** (https://dumptyd.github.io/treeflex/) -- CSS-only library for hierarchy trees, no JS
-- Custom implementation using `border-left` on `<li>` for vertical lines, `::before` for horizontal connectors, `::after` for node circles
-
-### 5.4 When to Use SVG Instead
-
-| Use Case | CSS | SVG | Recommendation |
-|---|---|---|---|
-| Venn (2-3 circles) | Good | Better | CSS for simplicity |
-| Process arrows (linear) | Excellent | Overkill | CSS |
-| Tree (2-3 levels) | Good | Better | CSS (Treeflex) |
-| Complex flowchart (branches) | Difficult | Much better | SVG |
-| Curved connectors | Impossible | Easy | SVG |
-| Data-driven charts | Impossible | Required | SVG |
-| Accessible diagrams | Poor | Excellent | SVG |
-
-**Recommendation for Design Agent:** Use pure CSS for simple diagrams (process arrows, 2-circle Venn, basic tree). Generate inline SVG for anything more complex. Since the renderer produces static HTML for PDF export, there's no JS concern.
-
-**Accessibility note:** SVG has built-in accessibility elements (`<title>`, `<desc>`, `aria-*`). For the Design Agent's output (primarily visual slides for PDF), this is less critical but good practice.
-
----
-
-## 6. Korean Typography in CSS
-
-### 6.1 Font Selection
-
-**Primary recommendation: Pretendard**
-
-- Modern system-ui replacement font designed for cross-platform use
-- Built on Inter (Latin) + Source Han Sans (CJK) + M PLUS 1p
-- 9 weights + variable font support
-- Dynamic subset via CDN (Google Fonts-style loading for Korean)
-- Most popular Korean web font according to HTTP Archive 2024
-
-**CDN options:**
-```css
-/* Dynamic subset (recommended for web) */
-@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
-
-/* Or from cdnjs */
-@import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable-dynamic-subset.min.css');
-```
-
-**For PDF generation (self-hosted):**
-Download WOFF2 files and serve locally to avoid CDN dependency during headless browser PDF generation.
-
-**Fallback stack:**
-```css
-font-family: 'Pretendard Variable', 'Pretendard', -apple-system, 'Noto Sans KR',
-             'Malgun Gothic', sans-serif;
-```
-
-**Alternative: Noto Sans KR**
-- Google Fonts native, widest browser support
-- Available via Google Fonts CDN with automatic Korean subsetting
-- Good for when Pretendard is not available
-
-### 6.2 Line-Height and Letter-Spacing
-
-**W3C KLREQ (Korean Layout Requirements) recommendations:**
-
-| Property | Value | Rationale |
-|---|---|---|
-| `line-height` | 1.6-1.8 | CJK text needs ~1.7 (vs 1.2-1.5 for Latin) due to higher information density per character |
-| `letter-spacing` | 0 to -0.02em | Korean text looks best with tight or default spacing. Avoid positive letter-spacing. |
-| `word-spacing` | normal | Korean uses spaces between words (unlike Japanese/Chinese) |
-
-**For slides specifically:**
-```css
-body {
-    line-height: 1.7;
-    letter-spacing: -0.01em;
-}
-h1, h2, h3 {
-    line-height: 1.3;
-    letter-spacing: -0.02em;
-}
-```
-
-### 6.3 Word-Break Rules
-
-```css
-/* Korean text: keep syllable blocks together */
-body {
-    word-break: keep-all;
-    overflow-wrap: break-word;
-}
-```
-
-**`word-break: keep-all`** prevents line breaks within Korean syllable blocks (e.g., "한글" won't break as "한" / "글" mid-word). This is essential for readable Korean typography.
-
-**`overflow-wrap: break-word`** is the safety net for extremely long strings (URLs, technical terms) that might overflow.
-
-**Browser support:** All modern browsers support `keep-all` since 2016. There is ongoing W3C discussion about a potential `keep-all-hangul` value that would apply `keep-all` only to Hangul characters and `normal` to everything else.
-
-### 6.4 Mixing Korean + English
-
-**Key challenge:** At the same point size, Latin letters appear smaller than Korean characters.
-
-**Solutions:**
-1. Use a font designed for mixed text (Pretendard handles this well, being built on Inter + Source Han Sans)
-2. Set the Latin font first in `font-family` stack, CJK font second (most CJK fonts include Latin glyphs, but their Latin is often inferior)
-3. No need for `font-size-adjust` if using Pretendard (it's designed for optical balance between scripts)
-
-**Punctuation:** Korean uses proportional-width punctuation (like Latin), unlike Japanese/Chinese which use full-width. Pretendard handles this correctly.
-
-### 6.5 Language Attribute
-
-Always set `lang="ko"` on the HTML element:
-```html
-<html lang="ko">
-```
-This enables the browser's Korean-specific line-breaking algorithms and font selection.
-
----
-
-## 7. FastAPI Integration
-
-### 7.1 Serving the Design Agent
-
-The Design Agent should be a FastAPI application with these endpoints:
-
-| Endpoint | Method | Purpose |
-|---|---|---|
-| `/api/analyze` | POST | Step 1: Send content to Opus for classification |
-| `/api/generate` | POST | Steps 2-3: Sonnet selects + renderer produces HTML |
-| `/api/generate/stream` | GET (SSE) | Steps 1-3 with real-time progress |
-| `/api/preview/{job_id}` | GET | Return generated HTML for iframe preview |
-| `/api/download/{job_id}/pdf` | GET | Generate and return PDF |
-| `/api/download/{job_id}/html` | GET | Return HTML file |
-| `/api/templates` | GET | List available block templates |
-
-### 7.2 SSE Streaming
-
-FastAPI has native SSE support (added to official docs). Two library options:
-
-**Option A: sse-starlette (recommended)**
-- Production-ready, W3C SSE spec compliant
-- Already used in the HWPX project
-- `pip install sse-starlette`
-
-**Option B: fastapi-sse**
-- Lighter weight, built specifically for FastAPI
-- Supports sending Pydantic models as SSE events
-- `pip install fastapi-sse`
-
-**Implementation:**
-```python
-from sse_starlette.sse import EventSourceResponse
-
-@router.get("/api/generate/stream")
-async def stream_generation(content: str):
-    async def event_generator():
-        yield {"event": "step_start", "data": "analyzing"}
-        # ... Opus classification
-        yield {"event": "step_complete", "data": json.dumps(analysis)}
-
-        yield {"event": "step_start", "data": "selecting"}
-        # ... Sonnet selection
-        yield {"event": "step_complete", "data": json.dumps(slots)}
-
-        yield {"event": "step_start", "data": "rendering"}
-        # ... CSS Grid rendering
-        yield {"event": "complete", "data": job_id}
-
-    return EventSourceResponse(event_generator())
-```
-
-### 7.3 File Upload
-
-```python
-from fastapi import UploadFile, File
-
-@router.post("/api/upload")
-async def upload_content(file: UploadFile = File(...)):
-    # Read and extract text from uploaded file
-    text = await extract_text(file)
-    return {"text": text, "filename": file.filename}
-```
-
-### 7.4 Static File Serving for Preview
-
-**For development:** FastAPI's `StaticFiles` mount for serving generated HTML:
-```python
-from fastapi.staticfiles import StaticFiles
-app.mount("/static", StaticFiles(directory="output"), name="static")
-```
-
-**For production:** Serve HTML via API response body (like the HWPX project does with `<iframe srcDoc>`). This is more secure -- no direct file path exposure.
-
-**Font serving:** Self-hosted Pretendard WOFF2 files should be served as static files for reliable PDF generation.
-
----
-
-## Summary: Technology Stack Recommendation
-
-| Component | Technology | Version | Rationale |
-|---|---|---|---|
-| LLM (Analysis) | Claude Opus via Anthropic API | Structured Outputs beta | Content classification, layout direction |
-| LLM (Selection) | Claude Sonnet via Anthropic API | Structured Outputs beta | Slot filling, content editing |
-| Template Engine | Jinja2 | >=3.1 | Native Python, FastAPI integration, block inheritance |
-| CSS Layout | CSS Grid + grid-template-areas | Native CSS | Named regions map to block composition |
-| Design Tokens | CSS Custom Properties | Native CSS | Already defined in CLAUDE.md |
-| Typography | Pretendard Variable | 1.3.9 | Best Korean web font, dynamic subset |
-| Fallback Font | Noto Sans KR | Latest | Google Fonts CDN backup |
-| PDF Generation | Playwright (Python) | >=1.40 | Native Python SDK, full CSS Grid support |
-| Web Framework | FastAPI | >=0.115 | SSE support, file upload, same as HWPX project |
-| SSE | sse-starlette | >=2.0 | Production-ready, W3C compliant |
-| CSS Diagrams | Pure CSS + inline SVG fallback | N/A | Pseudo-elements for simple, SVG for complex |
-| Slide Scaling | CSS transform: scale() | Native CSS | reveal.js-proven approach |
-| Korean Line Breaking | word-break: keep-all | Native CSS | W3C KLREQ recommendation |
-
----
-
-## Key References
-
-### CSS Grid & Layout
-- [CSS-Tricks Complete Guide to CSS Grid](https://css-tricks.com/complete-guide-css-grid-layout/)
-- [Smashing Magazine: Understanding CSS Grid Template Areas](https://www.smashingmagazine.com/2020/02/understanding-css-grid-template-areas/)
-- [MDN: aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
-- [Grid by Example](https://gridbyexample.com/examples/)
-- [reveal.js Presentation Size](https://revealjs.com/presentation-size/)
-
-### Design Tokens
-- [CSS-Tricks: What Are Design Tokens?](https://css-tricks.com/what-are-design-tokens/)
-- [EightShapes: Naming Tokens in Design Systems](https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676)
-- [FrontendTools: CSS Variables Guide](https://www.frontendtools.tech/blog/css-variables-guide-design-tokens-theming-2025)
-- [Nord Design System: Naming](https://nordhealth.design/naming/)
-
-### Content Classification & Presentation AI
-- [PPTAgent (EMNLP 2025)](https://arxiv.org/abs/2501.03936)
-- [SlideSpeak Layouts & Placeholders](https://docs.slidespeak.co/basics/custom-templates/layouts-and-placeholders)
-- [SlideSpeak Template Preparation](https://docs.slidespeak.co/basics/custom-templates/preparing)
-- [SlideModel: 12 Types of Slides](https://slidemodel.com/types-of-slides/)
-- [SlideUpLift: Types of Slides](https://slideuplift.com/blog/types-of-slides/)
-- [LLM-Powered Slide Decks Comparison](https://nbrosse.github.io/posts/llm-slides/llm-slides.html)
-
-### Structured Output
-- [Anthropic Structured Outputs Docs](https://platform.claude.com/docs/en/build-with-claude/structured-outputs)
-- [PromptLayer: How JSON Schema Works for Structured Outputs](https://blog.promptlayer.com/how-json-schema-works-for-structured-outputs-and-tool-integration/)
-
-### PDF Generation
-- [Playwright Python page.pdf() API](https://playwright.dev/python/docs/api/class-page)
-- [PDF Generation from HTML Comparison (2026)](https://medium.com/@coders.stop/pdf-generation-from-html-i-tested-puppeteer-playwright-and-wkhtmltopdf-so-you-dont-have-to-d14228d28c4c)
-- [Checkly: Generating PDFs with Playwright](https://www.checklyhq.com/docs/learn/playwright/generating-pdfs/)
-- [Print CSS Cheatsheet](https://www.customjs.space/blog/print-css-cheatsheet/)
-
-### Pure CSS Diagrams
-- [Adrian Roselli: A CSS Venn Diagram](https://adrianroselli.com/2018/12/a-css-venn-diagram.html)
-- [CSS-Tricks: A CSS Venn Diagram](https://css-tricks.com/a-css-venn-diagram/)
-- [FreeFrontend: 17 Pure CSS Flowcharts](https://freefrontend.com/css-flowcharts/)
-- [Cory Rylan: Flow Charts with CSS Anchor Positioning](https://coryrylan.com/blog/flow-charts-with-css-anchor-positioning)
-- [Treeflex: CSS Tree Library](https://dumptyd.github.io/treeflex/)
-- [MDN: CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning)
-
-### Korean Typography
-- [W3C KLREQ: Requirements for Hangul Text Layout](https://www.w3.org/TR/klreq/)
-- [Pretendard GitHub](https://github.com/orioncactus/pretendard)
-- [Noto Sans KR on Google Fonts](https://fonts.google.com/noto/specimen/Noto+Sans+KR)
-- [CJK Typesetting in 2025](https://asianabsolute.co.uk/blog/cjk-typesetting-challenges-workflows-and-best-practices/)
-- [Typotheque: CJK Typesetting Principles](https://www.typotheque.com/articles/typesetting-cjk-text)
-- [CSS WG: word-break for Korean (Issue #4285)](https://github.com/w3c/csswg-drafts/issues/4285)
-
-### FastAPI & SSE
-- [FastAPI SSE Tutorial](https://fastapi.tiangolo.com/tutorial/server-sent-events/)
-- [sse-starlette on PyPI](https://pypi.org/project/sse-starlette/)
-- [Real Python: FastAPI with Jinja2](https://realpython.com/fastapi-jinja2-template/)
-
-### SVG vs CSS
-- [Adobe Blog: CSS vs SVG](https://blog.adobe.com/en/publish/2015/09/16/css-vs-svg-the-final-roundup)
-- [Sara Soueidan: Accessible Data Charts](https://www.sarasoueidan.com/blog/accessible-data-charts-for-khan-academy-2018-annual-report/)

docs/architecture/BLOCK-RULES.md

@@ -0,0 +1,162 @@
+# 블록 작성 규칙
+
+Figma 1:1 HTML을 재사용 가능한 블록으로 전환할 때, 이 규칙을 따른다.
+figma_to_html_agent와 design_agent 간의 **계약서**.
+
+---
+
+## 1. HTML 규칙
+
+### 구조 스타일은 OK
+블록의 배치/정렬을 위한 CSS는 블록 안에 있어야 한다.
+```css
+/* OK */
+display: flex;
+grid-template-columns: repeat(3, 1fr);
+align-items: center;
+overflow: hidden;
+position: relative;
+```
+
+### 직접값은 금지
+하드코딩된 폰트/색/여백은 블록 안에 넣지 않는다.
+```css
+/* NG */
+font-size: 11px;
+color: #475569;
+padding: 16px;
+
+/* OK — 토큰 참조 */
+font-size: var(--font-body);
+color: var(--color-body);
+padding: var(--card-padding);
+```
+
+---
+
+## 2. 클래스명 규칙
+
+### 공통 클래스 (모든 블록에서 사용)
+| 클래스 | 용도 | 토큰 참조 |
+|--------|------|-----------|
+| `.zone-title` | 중목차 제목 | `--font-zone-title`, `--color-zone-title` |
+| `.sub-title` | 소목차 제목 | `--font-sub-title` |
+| `.bul` | 본문 블릿 (hanging indent) | `--font-body`, `--bullet-indent` |
+| `.body-text` | 본문 텍스트 | `--font-body`, `--color-body` |
+| `.caption` | 캡션/보조 | `--font-caption`, `--color-caption` |
+
+### 블록 고유 클래스
+블록별 고유 요소는 블록 prefix를 붙인다.
+```
+.p3c-bar        (prerequisites-3col의 gradient 바)
+.pp2-col        (process-product-2col의 컬럼)
+.cid-card       (card-icon-desc의 카드)
+```
+
+---
+
+## 3. 슬롯 규칙
+
+블록이 받아들이는 콘텐츠 슬롯. catalog에 명시.
+
+| 슬롯 | 용도 | 예시 |
+|------|------|------|
+| `zone_title` | 중목차 제목 | "DX의 궁극적 목표" |
+| `sub_title` | 소목차 제목 | "안전과 품질" |
+| `body` | 본문 텍스트 | 설명 문장 |
+| `bullets` | 블릿 리스트 | D2: 항목들 |
+| `image` | 이미지 | 시각 앵커 |
+| `preview` | 상세 preview | 표 헤더+행 |
+| `detail_link` | 자세히보기 링크 | 첨부 파일 연결 |
+
+---
+
+## 4. 토큰 참조 방법
+
+### 토큰 파일 위치
+```
+templates/styles/tokens/
+├── typography.css   ← 글자 위계
+├── spacing.css      ← 여백/간격
+└── colors.css       ← 색상
+```
+
+### 사용법
+```css
+/* 블록 CSS에서 */
+.my-block-title {
+  font-size: var(--font-sub-title);
+  font-weight: var(--weight-sub-title);
+  line-height: var(--lh-sub-title);
+  color: var(--color-zone-title);
+  margin-bottom: var(--heading-gap);
+}
+
+.my-block-body {
+  font-size: var(--font-body);
+  color: var(--color-body);
+  padding-left: var(--bullet-indent);
+  text-indent: calc(var(--bullet-indent) * -1);
+}
+```
+
+### 블록 의미색이 필요할 때
+공통 테마색으로 안 되는 역할색은 colors.css의 2층 의미색을 참조.
+```css
+/* 3열 비교의 열별 색상 */
+.col-1 .bar { background: linear-gradient(180deg, var(--color-col-1-from), var(--color-col-1-to)); }
+.col-2 .bar { background: linear-gradient(180deg, var(--color-col-2-from), var(--color-col-2-to)); }
+```
+
+---
+
+## 5. 블록 HTML 예시
+
+### 좋은 예
+```html
+<section class="block block-3col">
+  <div class="col">
+    <div class="sub-title">{{ col.title }}</div>
+    <div class="bul">• {{ col.desc }}</div>
+  </div>
+</section>
+
+<style>
+.block-3col {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--card-gap);
+}
+.block-3col .col {
+  padding: var(--card-padding);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--card-radius);
+}
+</style>
+```
+
+### 나쁜 예
+```html
+<!-- NG: 직접값 하드코딩 -->
+<div style="font-size:12px; color:#1e293b; padding:16px; background:#f8fafc; border-radius:6px;">
+```
+
+---
+
+## 6. 전환 체크리스트
+
+Figma 1:1 HTML → 재사용 블록으로 전환할 때:
+
+- [ ] font-size 직접값 → `var(--font-*)` 교체
+- [ ] color 직접값 → `var(--color-*)` 교체
+- [ ] padding/margin 직접값 → semantic spacing 또는 `var(--space-*)` 교체
+  - 카드 내부: `var(--card-padding)`
+  - 블릿 들여쓰기: `var(--bullet-indent)`
+  - 소제목 아래: `var(--heading-gap)`
+  - 일반 여백: `var(--space-sm)`, `var(--space-md)` 등
+- [ ] gap → `var(--card-gap)`, `var(--flex-gap)` 등
+- [ ] border-radius → `var(--card-radius)` 교체
+- [ ] 공통 클래스 사용 (`.bul`, `.sub-title` 등)
+- [ ] 블록 고유 요소에 prefix 클래스
+- [ ] catalog에 슬롯/구조/호환 정보 등록

docs/architecture/FRAME-INTEGRATION-MAP.md

@@ -0,0 +1,183 @@
+# Frame Integration Map — 32 Figma Frame ↔ Phase Z Zone 통합 매핑
+
+> **핵심 방향 (2026-04-28 정정)**
+>
+> Figma frame 은 슬라이드에 **원본 그대로 꽂는 게 아니라**, **디자인 레퍼런스 / 구조 패턴 / 슬롯 힌트**로 본다.
+> **최종 결과는 항상 현재 slide-body 의 Zone 안에 맞게 재구성한다.**
+>
+> - 원본이 full-slide 디자인이어도 → Zone 안 맞게 축약 / 재배치 / 슬롯화해서 사용
+> - 복합 슬라이드여도 → Zone 안에서는 일부 패턴만 참고해 재구성
+>
+> → 분류는 **"원본 크기"** 가 아니라 **"Zone 에 어떻게 적용할지"** 기준으로 한다.
+
+---
+
+## 라벨 정의
+
+### Zone 적용 방식 (zone_application)
+
+| 값 | 의미 |
+|---|---|
+| `zone_direct` | Zone 안에 거의 그대로 적용 가능 (구조 / 사이즈 변환 최소) |
+| `zone_adapt` | 구조는 맞지만 Zone 크기에 맞게 재구성 필요 |
+| `zone_extract` | 전체 frame 중 일부 패턴만 추출해서 Zone 에 사용 |
+| `reference_only` | 직접 구조로 쓰기보다 디자인 톤 / 아이디어만 참고 |
+| `reject` | Phase Z 에서 사용하지 않음 |
+
+### Zone 적합성 (zone_fit)
+
+| 값 | 의미 |
+|---|---|
+| `high` | Zone 에 바로 맞추기 쉬움 (단순 리스트 / 표 등) |
+| `medium` | 조정하면 가능 (3 단 카드 / 다이어그램 등) |
+| `low` | 많이 재구성해야 함 (복합 구조 / 분할 패널) |
+| `reference` | 참고용 |
+
+### 검토 상태 (review_status)
+
+| 값 | 의미 |
+|---|---|
+| `auto_estimated` | 코드가 layout 패턴으로 추정. 사용자 검토 필요 |
+| `user_confirmed` | 사용자 검토 후 확정 |
+| `needs_review` | 자동 추정에 의문 — 사람이 Figma 캔버스 직접 확인 필요 |
+
+---
+
+## 1차 — 32 Frame Zone 적용 분류
+
+> ⚠️ **`legacy 스타일 출처(참고)` 컬럼 의미**
+>
+> 기존 `templates/blocks/` 는 **Phase Z 의 실제 조립 재료가 아님** (삭제 / 폐기 방향).
+> 이 컬럼은 **frame ↔ 블록 매핑이 아니라**, frame 의 디자인 / 시각 언어를 만들 때 참고할 수 있는 **스타일 출처** (색감, 여백, 폰트 위계, 표 스타일, 카드 스타일, pill / badge, SVG / CSS 구현 힌트) 만 가리킨다.
+>
+> Phase Z 의 실제 실행 기준은 **새 frame / zone catalog**.
+> 정밀화는 [`PHASE-Z-STYLE-SOURCES.md`](PHASE-Z-STYLE-SOURCES.md) (예정) 에서 별도 진행.
+
+| Frame | Figma ID | 패턴 | Zone 적합성 | Zone 적용 방식 | 검토 상태 | legacy 스타일 출처(참고) | 비고 |
+|---|---|---|---|---|---|---|---|
+| **01** | `1171281172` | `circular-nodes-6` | `medium` | `zone_adapt` | `auto_estimated` | `templates/blocks/visuals/` (다이어그램) | S/W 개발 방향 순환도. 6 노드 — Zone 사이즈에 맞춰 시각 재구성 |
+| **02** | `1171281173` | `bullet-cards-4-plus-center` | `low` | `zone_extract` | `auto_estimated` | (복합 — 일부 패턴 추출) | 4 카드 + 중앙 강조. Zone 에서는 4 카드 부분만 추출하거나 중앙만 강조로 사용 |
+| **03** | `1171281174` | `list-numbered-4` | `high` | `zone_direct` | `auto_estimated` | `templates/blocks/cards/` 또는 list 류 | 4 항목 번호 리스트 — 단순 구조, Zone 직접 적용 |
+| **04** | `1171281175` | `quadrilateral-relations` | `medium` | `zone_extract` | `user_confirmed` | (관계도 — 기존 venn / cycle 로 부족 가능) | 4 actors + 관계도 + hierarchy 단계 결합된 복합형. 큰 Zone 에서는 zone_adapt 가능, 기본은 actor / hierarchy 패턴 추출 |
+| **05** | `1171281176` | `side-card-with-list` | `medium` | `zone_extract` | `auto_estimated` | (좌우 분할 — 일부 추출) | 좌측 카드 + 우측 리스트. Zone 안에서 좌·우 패턴 추출 |
+| **06** | `1171281177` | `full-page-map-banner` | `reference` | `reference_only` | `user_confirmed` | (콘텐츠 슬롯형 X — 참고용) | 지도 / 마커 / 현황 시각자료 중심. 일반 텍스트 Zone 구조로 직접 사용 X. 지도형 콘텐츠가 있을 때 디자인 참고 |
+| **07** | `1171281178` | `2col-paired-list` | `high` | `zone_adapt` | `auto_estimated` | `templates/blocks/tables/` 또는 페어드 | 2 컬럼 페어드 리스트 — Zone 사이즈 맞춰 표 재구성 |
+| **08** | `1171281179` | `3-section-framework` | `medium` | `zone_extract` | `auto_estimated` | (3 섹션 — 일부 추출) | 효율적 정보 관리 (What/How/When). 3 섹션 패턴 추출 |
+| **09** | `1171281180` | `list-stacked-vertical` | `high` | `zone_direct` | `auto_estimated` | `templates/blocks/cards/` 또는 list 류 | 5 항목 세로 리스트 — Zone 직접 적용 |
+| **10** | `1171281181` | `radial-diagram-5` | `medium` | `zone_adapt` | `auto_estimated` | `templates/blocks/visuals/` | 5 way 방사형 다이어그램 — Zone 시각 재구성 |
+| **11** | `1171281182` | `cards-3-category` | `medium` | `zone_extract` | `auto_estimated` | (3 카드 — 패턴 추출) | 시공단계 BIM 활용 — 3 카드 패턴 추출 |
+| **12** | `1171281189` | `cycle-3way-intersection` | `medium` | `zone_adapt` | `auto_estimated` | `templates/blocks/visuals/venn-diagram.html` | 3 way 벤다이어그램. Zone 사이즈 맞춰 SVG 재구성 |
+| **13** | `1171281190` | `3-column` | `medium` | `zone_extract` | `auto_estimated` | (3 단 — 패턴 추출) | 필수조건 (pillar 3). Zone 안에 3 단 패턴 추출. 02-2.2 매칭 실패 정답 frame (3차 대상) |
+| **14** | `1171281191` | `persona-3col` | `medium` | `zone_extract` | `auto_estimated` | `templates/blocks/cards/card-text-grid.html` (참고) | 주체별 기대효과. Zone 안에서 3 카드 패턴 추출 |
+| **15** | `1171281192` | `policy-4card-plus-list` | `low` | `zone_extract` | `auto_estimated` | (복합 — 일부 추출) | 4 카드 + 부속 리스트. Zone 안에서 4 카드만 추출하거나 리스트만 사용 |
+| **16** | `1171281193` | `quadrant-4` | `medium` | `zone_extract` | `auto_estimated` | (4 사분면 — 패턴 추출) | BIM 수행 이슈 4사분면. 4 사분면 패턴 추출 |
+| **17** | `1171281194` | `paired-rows-2x2` | `high` | `zone_adapt` | `auto_estimated` | `templates/blocks/tables/` | 2x2 페어드 행 — Zone 표 재구성 |
+| **18** | `1171281195` | `compare-rows` | `high` | `zone_adapt` | `auto_estimated` | `templates/blocks/tables/compare-3col-badge.html` (참고) | BIM·DX 비교. 매칭 시스템 검증된 대표 frame. Zone 안 표 재구성 |
+| **19** | `1171281197` | `cards-3-compare` | `medium` | `zone_extract` | `auto_estimated` | (3 단 비교 — 패턴 추출) | 설계방식 왜곡 — 3 비교 패턴 추출 |
+| **20** | `1171281198` | `cards-3-header` | `medium` | `zone_extract` | `auto_estimated` | (3 헤더형 — 패턴 추출) | DX 는 S/W 가 필수 — 3 헤더 패턴 추출 |
+| **21** | `1171281201` | `split-panel-diagram` | `low` | `zone_extract` | `auto_estimated` | (분할 패널 — 패턴 추출) | Solution Engn. S/W. 분할 패널 패턴 일부 추출 |
+| **22** | `1171281202` | `split-panel-numbered` | `low` | `zone_extract` | `auto_estimated` | (분할 패널 + 번호 — 패턴 추출) | Model 특화 Engn. S/W. 분할 + 번호 패턴 추출 |
+| **23** | `1171281203` | `table-2col` | `high` | `zone_adapt` | `auto_estimated` | `templates/blocks/tables/` | Application S/W 의 구분. **table family 중복 — variant 통합 검토** |
+| **24** | `1171281204` | `table-3col` | `high` | `zone_adapt` | `auto_estimated` | `templates/blocks/tables/` | Engn. S/W 구성과 특징. **table family 중복 — variant 통합 검토** |
+| **25** | `1171281205` | `left-categories-right-logos` | `medium` | `zone_extract` | `auto_estimated` | (좌우 분할 — 패턴 추출) | 상용 Engn. S/W. 좌우 분할 패턴 추출 |
+| **26** | `1171281206` | `cards-4-grid` | `medium` | `zone_extract` | `auto_estimated` | (4 카드 — 패턴 추출) | 상용 S/W 의존 4 대 문제. 4 카드 그리드 추출 |
+| **27** | `1171281208` | `central-split-synthesis` | `low` | `zone_extract` | `auto_estimated` | (중앙 합성 — 일부 추출) | 건설산업 고부가가치화. 중앙 + 양쪽 패턴 일부 추출 |
+| **28** | `1171281209` | `title-plus-3-emphasis` | `medium` | `zone_extract` | `auto_estimated` | (제목 + 3 강조 — 패턴 추출) | 현존 상용 S/W 의 현실. 제목 + 3 카드 패턴 추출 |
+| **29** | `1171281210` | `banner-top-2col-bottom` | `low` | `zone_extract` | `auto_estimated` | (banner + 2col 복합 — 패턴 추출) | Process/Product 혁신 (AS-IS/TO-BE). Zone 안에서 banner + 2col 패턴만 추출 |
+| **30** | `1171281211` | `table-3col` | `high` | `zone_adapt` | `auto_estimated` | `templates/blocks/tables/` | 산업별 현황. **table family 중복 — variant 통합 검토** |
+| **31** | `1171281212` | `table-3col` | `high` | `zone_adapt` | `auto_estimated` | `templates/blocks/tables/` | 산업별 특성과 발전방향. **table family 중복 — variant 통합 검토** |
+| **32** | `1171281213` | `central-5-goals` | `low` | `zone_extract` | `auto_estimated` | (5 목표 복합 — 일부 추출) | 정책 달성. 중앙 5 목표 패턴 일부 추출 |
+
+---
+
+## 자동 추정 룰
+
+### layout 패턴 → Zone 적용 방식
+
+| 패턴 / family | Zone 적용 방식 | Zone 적합성 | 근거 |
+|---|---|---|---|
+| `list-*` (단순 리스트) | `zone_direct` | `high` | 구조 단순 — Zone 안 그대로 |
+| `compare-rows` / `table-*col` / `paired-rows-*` (표 / 페어드) | `zone_adapt` | `high` | 표 구조 — Zone 사이즈 맞춰 재구성 |
+| `cycle-*` / `circular-*` / `radial-*` / `quadrilateral-*` (시각 다이어그램) | `zone_adapt` | `medium` | 시각 디자인 — Zone 사이즈 맞춰 SVG 재구성 |
+| `cards-3-*` / `persona-3col` / `3-column` / `cards-4-grid` / `quadrant-4` / `3-section-*` (3·4 단 카드 / 칼럼) | `zone_extract` | `medium` | 패턴 일부 추출 (카드 / 칼럼) |
+| `side-*` / `left-*-right-*` / `title-plus-*` (좌우 / 제목+카드) | `zone_extract` | `medium` | 부분 패턴 추출 |
+| `banner-top-*-bottom` / `bullet-cards-*-plus-center` / `policy-*-plus-list` (복합) | `zone_extract` | `low` | 복합 구조 — Zone 에서는 일부만 추출 |
+| `split-panel-*` / `central-*` (분할 / 중앙 합성) | `zone_extract` | `low` | 새 시각 패턴 — 일부 추출 |
+| `full-page-map-*` (지도 / 배너) | `reference_only` | `reference` | 콘텐츠 슬롯형 X — 디자인 참고만 |
+
+---
+
+## 분포 요약
+
+### Zone 적용 방식
+
+| 적용 방식 | 개수 | Frame |
+|---|---|---|
+| `zone_direct` | **2** | 03, 09 |
+| `zone_adapt` | **11** | 01, 04, 07, 10, 12, 17, 18, 23, 24, 30, 31 |
+| `zone_extract` | **18** | 02, 05, 08, 11, 13, 14, 15, 16, 19, 20, 21, 22, 25, 26, 27, 28, 29, 32 |
+| `reference_only` | **1** | 06 |
+| `reject` | **0** | — |
+
+**합계 검증** : 2 + 11 + 18 + 1 + 0 = **32** ✓
+
+### Zone 적합성
+
+| 적합성 | 개수 | Frame |
+|---|---|---|
+| `high` | **9** | 03, 07, 09, 17, 18, 23, 24, 30, 31 |
+| `medium` | **15** | 01, 04, 05, 08, 10, 11, 12, 13, 14, 16, 19, 20, 25, 26, 28 |
+| `low` | **7** | 02, 15, 21, 22, 27, 29, 32 |
+| `reference` | **1** | 06 |
+
+**합계 검증** : 9 + 15 + 7 + 1 = **32** ✓
+
+### 검토 상태
+
+| review_status | 개수 | Frame |
+|---|---|---|
+| `auto_estimated` | **30** | (04, 06 제외 모두) |
+| `needs_review` | **0** | (04, 06 사용자 확정 완료) |
+| `user_confirmed` | **2** | **04** (zone_extract 확정), **06** (reference_only 확정) |
+
+---
+
+## 핵심 메시지
+
+> **모든 frame 은 최종적으로 Zone 에 맞게 들어간다.**
+> **원본이 full-slide 인지 아닌지는 참고 정보일 뿐, 최종 사용 단위는 Zone 이다.**
+>
+> - 사용자가 의미한 "needs_split" = 실제 의미는 `zone_extract` 또는 `zone_adapt`
+> - frame 은 디자인 레퍼런스 / 구조 패턴 / 슬롯 힌트
+> - Phase Z output 은 항상 Zone 에 맞는 재구성 결과
+
+---
+
+## 다음 단계
+
+### ✅ 완료 (1 차)
+- 32 frame 자동 추정 표 작성
+- Frame 04, 06 사용자 확정 (`user_confirmed`)
+- 컬럼명 정정 : `legacy 대응 블록(참고, 미검증)` → `legacy 스타일 출처(참고)`
+
+### ✅ 완료 (2 차, 2026-04-28) — Phase Z Frame Style Inventory 작성
+
+산출물 : [`PHASE-Z-FRAME-STYLE-INVENTORY.md`](PHASE-Z-FRAME-STYLE-INVENTORY.md)
+
+- Source Policy : 메인 (`figma_to_html_agent/blocks/` 32 frame) / 토큰 (`templates/styles/tokens/`) / legacy (`templates/blocks/structures/`)
+- Frame Inventory 32 행 (변환 14 + 미변환 18 보일러플레이트)
+- Token Inventory 18 행 (`covered` 7 / `gap_candidate` 5 / `hierarchy_mapping_only` 3 / `hold_recheck_after_conversion` 3)
+- Legacy Reference 6 행 (모두 `delete_after_extract` 후보)
+
+> ⚠️ inventory = **추출 / 검증 단계**. 실제 token 파일 생성 / 변경 / catalog 설계 / templates/blocks 삭제 등 **실행은 별도 승인 단계**.
+
+### 후속 작업
+- **3차** — Frame 14 anchor_sets 재라벨링 (02-2.2 매칭 실패 교정 — 매칭 성능 교정 작업, 별도 진행)
+- **추가** — table family (23/24/30/31) variant 통합 설계 (Phase Z catalog 작성 시)
+- **확정 처리** — 2 차 조사 결과 후 high confidence frame 부터 `user_confirmed` 일괄 처리
+
+---
+
+## 부록 — 제외 / 특수 항목
+
+`1171281171` 은 `texts.md` 만 존재하고 `index.html` / `analysis.md` 가 없어 Phase Z frame / style inventory 메인 대상에서 제외한다. 정체는 미확인.

docs/architecture/IMPROVEMENT-PLAN.md

@@ -0,0 +1,157 @@
+# C.E.L. Slide Pipeline — 개선 설계
+
+## 목표
+
+**MDX 콘텐츠를 넣으면, 중목차/소목차 기준으로 BEPs 디자인과 매칭하여 슬라이드를 자동 생성한다.**
+
+현재는 블록마다 스타일이 제각각이고, 매칭/조립/크기 조정이 불완전하여 수작업 보정이 필요한 상태. 이를 토큰 기반 통일 + 블록 구조 부품화 + 파이프라인 2경로화로 개선한다.
+
+---
+
+## 개선 방향
+
+| 현재 문제 | 개선 방향 |
+|-----------|-----------|
+| 블록마다 폰트/색/여백이 직접 박혀있어 통일 안 됨 | 토큰으로 공통 기준 확정, 블록은 변수 참조 |
+| slide-base에 구조+스타일이 섞여있음 | 프레임(HTML)과 스타일(CSS) 분리 |
+| 블록이 완성 HTML이라 재사용/조합이 어려움 | 블록 = 구조 부품, 스타일은 테마로 분리 |
+| 블록 매칭이 파일명/tag 중심 | 속성 테이블(catalog) 기반 매칭 |
+| 크기 조정이 1회 렌더로 끝남 | 입력→조정 반복 (빈 공간/overflow 자동 재분배) |
+| 검증이 overflow만 | 시각 품질까지 검증 (정렬, 위계, 가독성) |
+
+---
+
+## 핵심 축 3개
+
+### 1. 표현 기준 통일
+
+typography, spacing, colors, layout을 토큰으로 확정하여 모든 블록이 이 공통 기준을 따르게 한다.
+
+### 2. 블록의 역할 재정의
+
+블록 = 완성 HTML이 아니라 **구조 부품**. 구조 스타일(flex, grid)은 블록에, 직접값(font-size, color)은 토큰으로 분리한다.
+
+### 3. 파이프라인 2경로화
+
+- **direct-fit:** BEPs 매칭 → 블록 삽입 + 크기 조절
+- **recipe/composition:** 미매칭 → 꼭지 정리 → redesign + 반복 조정
+
+---
+
+## 실행 원칙
+
+**direct-fit 기준:**
+direct-fit은 구조, 슬롯, 시각 위계가 기존 블록과 거의 1:1로 대응될 때만 허용한다.
+
+**recipe-path 목적:**
+recipe/composition 경로는 미매칭 콘텐츠를 새로운 구조로 재정리하되, 기존 visual language를 최대한 상속한다.
+
+**fit 루프 우선순위:**
+fit 조정은 줄바꿈 → 간격 조정 → preview 축약 → 폰트 1단계 축소 순으로 수행한다.
+
+---
+
+## 진행 계획
+
+### 1단계: 토큰 기준 확정
+
+**목표:** 모든 블록이 따라야 할 공통 기준표 확정
+
+| 토큰 | 내용 |
+|------|------|
+| typography | 대목차/중목차/소목차/본문/캡션/footer 크기·굵기·줄간격 |
+| spacing | padding/gap/indent/margin |
+| colors 1층 | 공통 테마색 (title, body, border, card-bg, accent) |
+| colors 2층 | 블록 의미색 (compare-left/right, role-a/b, pill-left/right) |
+| layout | slide-base 위치값 (body-top, body-height, footer-bottom) |
+
+### 2단계: slide-base CSS 분리
+
+**목표:** slide-base를 프레임 전용으로 얇게
+
+- HTML에서 `<style>` 추출 → 외부 CSS
+- 직접값 → 토큰 변수로 교체
+- slide-base = 대목차 + divider + body container + footer만 책임
+
+### 3단계: 블록 작성 규칙 문서
+
+**목표:** 블록화 시 참조할 기준 제공 (두 에이전트 간 계약서)
+
+- 구조 스타일 OK (display:flex, grid, align-items, overflow)
+- 직접값 금지 (hardcoded font-size/color/padding)
+- 값은 토큰 참조 (`var(--font-body)`)
+- 클래스명 규칙 (`.zone-title`, `.bul` 등)
+- 슬롯 규칙 (zone_title, sub_title, body, bullets, image 등)
+
+### 4단계: 폴더 구조 정리
+
+**목표:** 프레임/구조/스타일/메타/자산 분리
+
+```
+templates/
+├── base/           ← 프레임 (slide-base)
+├── blocks/
+│   ├── structures/ ← 구조 부품 (토큰 기반)
+│   ├── recipes/    ← 조합형 구조
+│   └── legacy/     ← 기존 블록 (점진 전환)
+├── styles/
+│   ├── tokens/     ← 공통 기준값
+│   ├── themes/     ← 톤 변형 (light/dark/formal)
+│   ├── base/       ← slide-base CSS
+│   └── blocks/     ← 블록별 CSS
+├── assets/         ← 이미지/SVG/텍스처
+└── catalog/        ← 속성 테이블 (blocks/recipes/rules)
+```
+
+### 5단계: 기존 블록 점진 전환
+
+**목표:** Figma 1:1 HTML → 토큰 기반 재사용 블록으로 전환
+
+**5-1. 블록 분류 먼저**
+
+| 분류 | 의미 | 전환 순서 |
+|------|------|-----------|
+| direct-fit candidate | 바로 사용 가능 | 먼저 (토큰 교체만) |
+| recipe component candidate | 조합용 부품 | 다음 |
+| rewrite required | 구조부터 다시 | 마지막 |
+
+**5-2. 분류 결과에 따라 전환**
+- `figma_to_html_agent/blocks/` 완료물을
+- 토큰 기준에 맞춰 `templates/blocks/structures/`로
+- 한 번에 다 뜯지 않고 점진적으로
+
+### 6단계: 파이프라인 연결
+
+**목표:** TO-BE 프로세스 완성
+
+- TF-IDF 기반 **direct-fit block 매칭**
+- 미매칭 시 **recipe/composition 경로 전환**
+- 토큰 기반 resize
+- 입력→조정 반복 (fit 루프 확장)
+- 시각 품질 검증 강화
+
+**Source of Truth:**
+
+| 기준 | 위치 |
+|------|------|
+| 구조 판정 | `normalized.sections` |
+| 블록 매칭 | `catalog/blocks.yaml` |
+| 스타일 기준 | `styles/tokens/` + `styles/themes/` |
+
+---
+
+## 역할 분리 (동시 진행)
+
+```
+figma_to_html_agent (원재료)     design_agent (조립 시스템)
+─────────────────────          ──────────────────────
+"이 블록은 무엇인가"              "이 블록을 언제 쓸까"
+구조 유형 발견                    토큰 기준 확정
+슬롯 정의                        catalog 필드 설계
+자산 메타                        direct-fit vs recipe 규칙
+seam/crop/anchor                 theme/token 적용
+                                 fit/validation
+
+         ↓ 접점: 블록 작성 규칙 문서 (3단계) ↓
+         블록화 시 이 규칙에 맞춰 전환
+```

docs/architecture/PHASE-Z-CHANGE-LOG.md

@@ -0,0 +1,226 @@
+# Phase Z — change log
+
+**역할** : axis-by-axis 의사결정 / reframe / 폐기 / lock 의 *history* 기록.
+
+**관련 문서** :
+- [`PHASE-Z-PIPELINE-OVERVIEW.md`](PHASE-Z-PIPELINE-OVERVIEW.md) — 22-step 도면 (구조 lock)
+- [`PHASE-Z-PIPELINE-STATUS-BOARD.md`](PHASE-Z-PIPELINE-STATUS-BOARD.md) — 현재 snapshot (자주 갱신)
+- 본 문서 = 누적 history (newest-on-top, append-only)
+
+**본 문서의 목적** :
+- "왜 이 안을 폐기했는지" / "왜 이 axis 로 쪼갰는지" 의 회귀 시 trace
+- STATUS-BOARD 가 *현재* 라면 본 문서는 *과거*
+- entry 단위 = 한 axis (한 결정 단위)
+
+**format** :
+
+```
+## YYYY-MM-DD — Step X-Y / axis 이름
+
+scope:
+  - 무엇이 추가 / 변경 / 폐기됐나
+
+lock:
+  - 사용자 결정 lock
+
+why:
+  - 의사결정 근거 / 회귀 방지 사실
+
+next axis:
+  - 이어지는 다음 axis
+```
+
+---
+
+## 2026-05-08 #2 — axis naming / scope 정정 (6-B 폐기 + F14 표현 정정 + label gate policy 분리)
+
+scope:
+- **6-B (frame ownership transfer) 폐기** — misframed axis.
+- **"F14 / F11 / F18 frame contract 등록" 표현 폐기** — `V4 frame 후보 → Phase Z render path 연결 확장` 으로 rename.
+- **label gate policy 재검토 = 별 axis 로 분리** (= 6-B 안에 숨어 있던 진짜 content).
+- forex/status.md §0 Refinement F + §3 진행 순서 + §5 갱신.
+- `PHASE-Z-PIPELINE-STATUS-BOARD.md` §3 item 5 + §6 갱신.
+- `PHASE-Z-PIPELINE-OVERVIEW.md` Step 6 Gap note 정정.
+
+lock:
+
+[6-B 폐기]
+- V4 = frame 선택 (점수 + label).
+- Step 6 = V4 rank-1 을 default 로 *전사* (선택 X, 전사).
+- Step 9 = V4 후보를 application_plan 으로 *번역* (재선택 X, 번역).
+- 따라서 "Step 6 의 frame 채택 책임을 Step 9 로 이전" = *허구* (Step 6 이 그런 책임을 원래부터 안 가짐).
+
+[F14 표현 정정 — 3 layer 분리 lock]
+- Figma → HTML 변환 (`figma_to_html_agent/blocks/`) = 32 frame 모두 끝 (이미 layer).
+- V4 catalog (`tests/matching/v4_full32_result.yaml`) = 32 frame 매칭 끝 (이미 layer).
+- Phase Z render path = F13 / F29 / F16 만 연결 — 나머지 미연결 (작업 layer).
+- 작업 = adapter 박기 (contract + partial + builder + fresh run 검증). *Figma 새 디자인 X / V4 새 매칭 X*.
+- frame 당 4 가지 entry :
+  1. `templates/phase_z2/catalog/frame_contracts.yaml` — contract entry.
+  2. `templates/phase_z2/families/{template_id}.html` — Phase Z runtime partial. *`figma_to_html_agent/blocks/{frame_id}/index.html` source 와 별도 layer* — slot/payload 받게 변형.
+  3. `src/phase_z2_mapper.py` — PAYLOAD_BUILDERS / ITEM_PARSERS entry.
+  4. fresh run 검증.
+
+[label gate policy 분리]
+- 현재 Step 6 의 `MVP1_ALLOWED_STATUSES = {matched_zone, adapt_matched_zone}` binary gate.
+- restructure / reject label = 자동 drop (현재).
+- 정책 question = restructure 도 unit 으로 살려둘지 / Step 9 v0 4-mode 해석으로 대체할지.
+- 자체 가치는 Step 17 / 19 fallback 또는 Step 9 v1 활성화 후 발현 — 단독 axis 가치 X.
+- 현 시점 = 별 axis 로 *명시* 만 (구현 axis X).
+
+why:
+- mental model 정정 = layer 책임을 정확히 박기.
+- 6-B 와 F14 표현 모두 layer 가 잘못 그려졌었음 — 같은 종류의 정정.
+- label gate 는 6-B 안에 숨어 있던 *진짜 axis* — 분리해서 추적성 확보.
+- compat 매트릭스 폐기 (2026-05-08 #1 entry) 와 같은 패턴 — *misframed axis 는 폐기 + history 박힘*.
+
+next axis (별 axis 후보 list):
+- (A) V4 frame 후보 → Phase Z render path 연결 확장 (F14 / F11 / F18 등 미연결 frame adapter)
+- (B) Step 17 details_popup_escalation 구현
+- (C) Step 4 unit_count 산출 logic
+- (D) Step 3 / 4 render path 활성화 (Layer A activation)
+- (E) label gate policy 재검토 (= 6-B 의 진짜 content 였던 것)
+- (F) Step 9 v1 scoring + auto decision
+
+---
+
+## 2026-05-08 — Step 5/6/9 boundary reframe
+
+scope:
+- Step 9 의 *"compat 매트릭스" 안 폐기* (region × frame slot count 표) — V4 cardinality 재계산 위험.
+- Step 9 = **application_plan** 으로 reframe — V4 후보 + layout/region/display 통합 *적용 계획* (V4 axis 재계산 X).
+- Step 5/6/7/8/9 boundary 재정리 — 진행 순서 lock = `5 → 6-A → 7-conn → 8-conn → 6-B → 9`.
+- Step 6 = `6-A` (additive, logic 무변) + `6-B` (logic 변화) 두 axis 로 분리.
+
+lock:
+- V4 점수 재계산 X — V4 의 anchor / cardinality / relation / slot / content 산식은 Step 5 에서 끝남.
+- V4 후보 삭제 X — Step 5 = non-reject max-6 후보 list (raw 32 entry 는 `tests/matching/v4_full32_result.yaml` 영속).
+- V4 label 존중 — Step 9 = label (use_as_is / light_edit / restructure / reject) → application_mode (direct_insert / same_frame_with_adjustment / layout_or_region_change / exclude) 변환.
+- 진행 순서 = 5 → 6-A → 7-conn → 8-conn → 6-B → 9 (risk 분산: 6-B 를 9 신설 직전으로 미룸).
+
+why:
+- V4 confidence 산식 (`tests/matching/template_fit.py`) 의 5 axis 가 이미 frame 자체 적합도 평가. compat 매트릭스 = 동일 axis 재계산 → 폐기 결정.
+- V4 가 *못* 보는 영역 = layout / zone / region / display / contract — 이게 Step 9 의 진짜 영역.
+- Step 6 가 V4 rank-1 즉시 frame 채택 + layout 일부 결정해버려서 Step 9 가 받을 candidate list 없음 → Step 5 (rank-1 → top-N) + Step 6 (frame 채택 빼기) 선행 reframe 필요.
+- 6-A / 6-B 분리 이유 = 6-A 는 schema 확장 (안전), 6-B 는 selection logic 변경 (위험). 함께 하면 위험 누적.
+
+next axis:
+- Step 5 보완 = `lookup_v4_candidates()` 추가 (non-reject max-6) + `step05_v4_evidence.json` schema 확장 (`v4_candidates` list + `candidate_status`).
+- backward compat 유지 = `lookup_v4_match()` (rank-1) 보존, Step 6 호출처 무변.
+
+---
+
+## 2026-05-07 — Step 8-B-2 / display strategy candidate function
+
+scope:
+- `select_display_strategy_candidates(content_type, long_text, large_table, fits_in_region)` 함수 추가.
+- `load_display_strategies()` + `DISPLAY_STRATEGIES` 모듈 변수 + `_KNOWN_CONTENT_TYPES` frozenset.
+- catalog (`templates/phase_z2/regions/display_strategies.yaml`) 의 `applies_to` / `forbidden_for` 직독 기반 hard filter.
+
+lock:
+- `text_block / table / image / details` → `dropped` 절대 X (catalog `forbidden_for` 박혀 있음 — 원문 무손실).
+- hard filter = catalog `applies_to` / `forbidden_for` 직독 (hardcoding X).
+- escalate signal (`long_text` / `large_table` / `fits_in_region == False`) → `inline_preview_with_details` 우선.
+- decorative_element 의 dropped 는 `inline_full` 후순위 (공간 부족 신호 전에는 일단 보여주기).
+- unknown content_type → `ValueError` (catalog scope 위반).
+
+why:
+- 8-A catalog 위에 candidate 함수 추가 = passive piece 패턴 (7-A/B + 8-A 와 일관).
+- 원문 무손실 lock 의 코드 enforcement.
+- Step 9 application_plan 의 display_strategy axis input.
+
+next axis:
+- Step 9 진입 시도 (compat 매트릭스 안) → 폐기 → boundary reframe (2026-05-08 entry 참조).
+
+---
+
+## 2026-05-07 — Step 8-B-1 / region layout candidate function
+
+scope:
+- `load_region_layouts()` + `REGION_LAYOUTS` 모듈 변수.
+- `select_region_layout_candidates(region_count, ..., ratio_asymmetric, ...)` 함수 추가 — SPEC §2.5 sequential first-match decision tree.
+- 6 entry catalog 와 1:1 일치 (catalog 직독, hardcoding X).
+
+lock:
+- `region_count < 1 or > 4` → `ValueError` (SPEC §2.5 vocabulary scope).
+- `region-vertical-stack` 만 `default_fallback: true` (SPEC 박힘).
+- `ratio_asymmetric` 게이트 = `region-main-support` 의 catalog `candidate_when` 과 1:1 일치 (initial 누락 → Codex 검출 → 박힘).
+- `region_count == 1` → `[region-single]` only (fallback X).
+
+why:
+- SPEC §2.5 결정 트리 6 entry 의 코드 enforcement.
+- catalog 와 함수 1:1 일치 (drift 방지) — 초기 ratio_asymmetric 시그니처 누락 발견 후 정정.
+- Step 9 application_plan 의 region axis input.
+
+next axis:
+- Step 8-B-2 (display strategy candidate function).
+
+---
+
+## 2026-05-07 — Step 8-A / regions catalog (region + display)
+
+scope:
+- `templates/phase_z2/regions/region_layouts.yaml` 신설 — SPEC §2.5 6 entry (region-single / vertical-stack / horizontal-split / main-support / preview-details / grid-2x2).
+- `templates/phase_z2/regions/display_strategies.yaml` 신설 — 4 entry (inline_full / inline_preview_with_details / details_only / dropped).
+- `templates/phase_z2/regions/regions_preview.html` 신설 — 6 region card + 4 display strategy card 시각 검증.
+
+lock:
+- **axis 분리** : region (structure) ≠ display (policy). 두 catalog 는 직교 — 같은 region 이 다른 display strategy 와 결합 가능.
+- **single source of truth** : `preserves_original` 은 display_strategies 의 책임 (region_layouts 에서 제거 — 사용자 검토 후 박힘).
+- `detail_trigger.placement: top-right` (사용자 lock — 본문 흐름 방해 X / 보조 동작 위치 / popup 진입 일관 위치).
+- `dropped` 의 `applies_to: [decorative_element]` only / `forbidden_for: [text_block, table, image, details]` (사용자 절대 룰 — 원문 무손실).
+- `inline_preview_with_details` / `details_only` 의 `preserves_original: true` (popup 안 원문 보존).
+
+why:
+- region 구조 vocabulary 와 display 정책 vocabulary 가 다른 axis. 한 catalog 에 합치면 단일 enum 필드로 표현 안 됨.
+- 사용자 절대 lock (text/table/image/details 절대 dropped X) 의 catalog enforcement.
+- 자유 디자인 금지 lock 과 정합 — preview HTML 에서 사람이 두 axis 시각 검증 가능.
+
+next axis:
+- Step 8-B-1 / 8-B-2 (각 catalog 의 candidate function).
+
+---
+
+## 2026-05-07 — Step 7-B / layout candidate function
+
+scope:
+- `select_layout_candidates(unit_count)` 함수 추가 — `templates/phase_z2/layouts/layouts.yaml` catalog 직독 + `unit_count` 매칭.
+- 출력 정렬 = `default_selection: true` 우선 + catalog 순서.
+
+lock:
+- 입력 = `unit_count` (Step 4 의 placement unit count = section_count + lead_orphan promotion).
+- `default_selection: true` 인 entry 가 list 의 첫 위치.
+- `unit_count` 매칭 entry 0 개면 빈 list (ValueError X — Step 9 가 fallback path 처리).
+
+why:
+- 명명 정정 = `section_count` → `unit_count` (lead_orphan promotion 후 의미 정확).
+- Step 9 application_plan 의 layout axis input (V4 후보 + layout 후보 통합 평가).
+- single-decision (`select_layout_preset`) 은 backward compat 으로 유지 — runtime 호출처는 default 만 사용.
+
+next axis:
+- Step 8-A (regions catalog).
+
+---
+
+## 2026-05-07 — Step 7-A / layout catalog 분리
+
+scope:
+- `templates/phase_z2/layouts/layouts.yaml` 신설 — 8 preset (single / horizontal-2 / vertical-2 / top-1-bottom-2 / top-2-bottom-1 / left-1-right-2 / left-2-right-1 / grid-2x2).
+- `templates/phase_z2/layouts/layouts_preview.html` 신설 — 8 preset 시각 검증.
+- `load_layout_presets()` 함수 추가 — catalog → 기존 `LAYOUT_PRESETS` 와 동일 dict shape 반환.
+- `src/phase_z2_composition.py` 의 hardcoded `LAYOUT_PRESETS` dict → catalog 이전 (logic 무변, backward compat).
+
+lock:
+- **필드 정정** = 단일 `status` enum (implemented / defined) → 두 직교 axis 필드로 분리:
+  - `render_ready: bool` — layout 의 grid 정의 + 검증된 렌더 path 존재 여부
+  - `default_selection: bool` — `select_layout_preset()` 의 default 픽 여부 (Step 7-B / 9 의 single-decision 영역)
+- `candidate_when` 필드 추가 — Step 7-B / Step 9 input (현재 single-decision logic 은 무시 — inert).
+- backward compat 유지 = `load_layout_presets()` 이 같은 dict shape 반환 → `LAYOUT_PRESETS` 사용처 무변.
+
+why:
+- 사용자 절대 lock = "모든 catalog data 는 yaml/HTML 에서 사람이 보고 modify 가능" — hardcoded dict 위반.
+- `status` 단일 enum 은 *render 가능성* 과 *default 선택* 두 axis 를 합쳐서 모호 — render_ready / default_selection 분리 (사용자 검토 후 박힘).
+- 모든 기존 8 preset 의 logic 은 무변 — runtime 결과 동일 (regression 0).
+
+next axis:
+- Step 7-B (layout candidate function).

docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-PLAN.md

@@ -0,0 +1,285 @@
+# Phase Z — composition planning schema plan (Layer A + Layer B)
+
+**Status** : v1 plan (2026-04-30 refactor — SPEC v1 의 Layer A + Layer B 구조 반영). schema 작업 *범위 / 순서 / 완료 기준* 정의. 구현 X.
+**Anchor** : [`PHASE-Z-PIPELINE-STATUS-BOARD.md`](PHASE-Z-PIPELINE-STATUS-BOARD.md) 의 핵심 missing — Step 3 / 4 / 11 + Step 10 (부분).
+
+> **v0 → v1 변경 요약**
+> - SPEC v1 의 renumbered section 으로 cross-reference 일관 갱신 (§1 / §2 신규 / §3 / §4 / §5 …)
+> - Step 4 의 schema 가 SPEC v1 §2 (Internal Region — Layer A) 로 *이미 정의됨* → 본 plan 에서는 *신규 작성* 이 아니라 *완성도 점검* 으로 전환
+> - Step 11 의 schema 가 SPEC v1 §4 (2-stage placement: Stage A → Stage B) 로 재정의됨에 따라 validation 기준 보강
+> - mechanical rename : `sub_zone` → `Frame Slot` (PLAN 본문). YAML 필드명 `sub_zones` 는 코드 reality 로 유지
+> - 4 step 범위 (Step 3 / 4 / 10-partial / 11) 그대로. Step 10 의 density envelope 제외 그대로
+> - implementation / MDX 실행 검증 / AI 호출 / 파일명 변경 / code marker 이름 결정 — *모두 제외 그대로*
+
+---
+
+## 0. 문서 역할 분리
+
+| 문서 | 역할 |
+|---|---|
+| [`PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md`](PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md) (v1) | schema / contract *명세 자체* (authoritative) |
+| **본 문서 (`PHASE-Z-CONTENT-OBJECT-SUBZONE-PLAN.md`)** (v1) | 그 schema 작업을 *어떤 범위 / 순서 / 산출물 / validation 기준* 으로 진행할지 *계획* |
+
+본 plan 은 SPEC 을 *대체하지 않음*. SPEC 의 어느 section 이 어느 step 의 schema 인지 *cross-reference + 완성도 점검* 까지가 본 plan 의 영역.
+
+---
+
+## 1. 목적
+
+일반 MDX 1 파일이 *render 전 단계* 에서 typed content_object → Internal Region → Frame Slot 으로 결정 가능한 상태에 도달하도록, 다음 4 step 의 schema 정의를 *완결* 시킨다.
+
+```
+Step 3.  Content Object 추출
+Step 4.  Section Internal Composition Planning           (Layer A)
+Step 10. Frame Contract 의 accepted_content_types + Frame Slot 선언   (부분, Layer B)
+Step 11. Content Unit / Child Group → Internal Region → Frame Slot Mapping  (2-stage)
+```
+
+---
+
+## 2. 범위
+
+### 2.1 포함
+
+| Step | schema 항목 | SPEC v1 의 위치 |
+|---|---|---|
+| Step 3 | content_object base schema + 6 type 별 schema (text_block / table / transform_table / image / diagram / details) | SPEC v1 §1.1, §1.2 |
+| Step 3 | role 의미 (summary / detail / decorative / reference) | SPEC v1 §1.3 |
+| Step 4 | Internal Region entity schema (region_id / role / content_type / ratio_estimate / content_unit_ids / frame_match_strategy) | SPEC v1 §2.1 |
+| Step 4 | Universal Region Model (every zone = 1+ regions) | SPEC v1 §2.2 |
+| Step 4 | 3-way decision tree (whole / group / split) | SPEC v1 §2.3 |
+| Step 4 | region 비율 산정 (content type 별 size proxy) | SPEC v1 §2.4 |
+| Step 4 | region → frame / display 매칭 interface (frame_match / display_only) | SPEC v1 §2.6 |
+| Step 10 | frame contract 의 `accepted_content_types` 필드 schema | SPEC v1 §3.1 |
+| Step 10 | Frame Slot 선언 schema (YAML 필드명 `sub_zones` — 의미 = Frame Slot) | SPEC v1 §3.1 |
+| Step 10 | F13 / F29 / F16 의 Frame Slots 선언 예시 | SPEC v1 §3.2 |
+| Step 11 | placement algorithm 2-stage I/O schema | SPEC v1 §4.1 |
+| Step 11 | Stage A — content → Internal Region (Layer A 매핑) | SPEC v1 §4.2 |
+| Step 11 | Stage B — Internal Region content → Frame Slot (Layer B 매핑) | SPEC v1 §4.3 |
+| Step 11 | tie-break (Frame Slot 단위) | SPEC v1 §4.4 |
+| Step 11 | display_only region 처리 (frame 우회) | SPEC v1 §4.5 |
+| Step 11 | display_strategy schema (inline_full / inline_preview_with_details / details_only / dropped) | SPEC v1 §5.1, §5.5 |
+| Step 11 | display_strategy 의 region-level + slot-level 양쪽 적용 | SPEC v1 §5.3 |
+
+### 2.2 Step 10 의 *부분 범위* 명시 (불변)
+
+> 본 plan 에서 Step 10 은 **두 항목** 까지만 다룸 :
+> - `accepted_content_types`
+> - Frame Slot 선언 (YAML 필드명 `sub_zones`)
+>
+> 본 plan 에서 *다루지 않는* Step 10 항목 :
+> - `density envelope`
+>
+> `density envelope` 은 `frame_internal_fit_candidate` (Step 17 / Step 19 Gap) 와 연결된 *frame internal fit policy* 영역. 본 plan 에 넣으면 *공통 padding 축소 antipattern* (`feedback_phase_z_spacing_direction`) 과 섞일 risk 있어 *별 plan* 으로 분리.
+>
+> 따라서 본 plan 이 완료되어도 Step 10 전체가 ✅ 완료되는 것은 아니고 — `accepted_content_types` + Frame Slot 부분만 ✅ / density envelope 부분은 ❌ 잔존.
+
+### 2.3 명시적 제외
+
+- 구현 (extractor / planner / parser 코드 작성) — 본 plan 은 schema 까지
+- frame partial template 변경 (Frame Slot / region container marker 추가)
+- mapper / classifier 의 region / Frame Slot-aware 진화
+- details / popup runtime
+- backward flow 자동화 (telemetry → composition 재호출)
+- MDX 01 / 02 / 03 / 04 적용 검증
+- AI 호출 (plan 단계 자체 + plan 산출 schema 자체 모두)
+- code / module / HTML marker / attribute *이름 결정* (SPEC v1 와 동일 — implementation step 에서 결정)
+- 파일명 변경 (PLAN / SPEC 둘 다 — 향후 별 결정)
+- 다음 단계 우선순위 / A/B/C 선택지
+
+---
+
+## 3. 산출물
+
+### 3.1 schema-side 산출물
+
+본 plan 의 schema 작업이 완료되면, SPEC v1 가 다음 상태에 도달 :
+
+| schema | 현재 SPEC v1 상태 | plan 종료 후 목표 상태 |
+|---|---|---|
+| content_object base + 6 type 별 schema | draft (SPEC v1 §1.1, §1.2) | completeness reviewed + gaps listed |
+| role 의미 4 종 | draft (SPEC v1 §1.3) | completeness reviewed + gaps listed |
+| Internal Region entity + Universal Region Model | draft (SPEC v1 §2.1, §2.2) | completeness reviewed + gaps listed |
+| 3-way decision tree | draft (SPEC v1 §2.3) | completeness reviewed + gaps listed |
+| region 비율 산정 | draft (SPEC v1 §2.4) | completeness reviewed + gaps listed |
+| region → frame / display 매칭 interface | draft (SPEC v1 §2.6) | completeness reviewed + gaps listed |
+| accepted_content_types + Frame Slot 선언 | draft (SPEC v1 §3.1, 3 frame 예시 §3.2) | completeness reviewed + gaps listed |
+| 2-stage placement (Stage A + Stage B I/O) | draft (SPEC v1 §4.1, §4.2, §4.3) | completeness reviewed + gaps listed |
+| tie-break + display_only region 처리 | draft (SPEC v1 §4.4, §4.5) | completeness reviewed + gaps listed |
+| display_strategy 4 종 + region/slot 양쪽 적용 | draft (SPEC v1 §5.1, §5.3, §5.5) | completeness reviewed + gaps listed |
+
+### 3.2 plan-side 산출물
+
+- 본 PLAN 문서 (v1) — schema 작업 범위 정의
+- 작업 결과로 SPEC v1 의 *추가 / 수정 부분* (edge case 보강 등 — substantive 신규 schema 가 아닌 점검 결과)
+- pipeline data flow 위치 표 (§5 참조)
+- schema validation 기준 표 (§6 참조)
+
+---
+
+## 4. SPEC ↔ PLAN cross-reference
+
+본 plan 의 4 step 각각이 SPEC v1 의 어느 section 으로 매핑되는지 :
+
+| Step | SPEC v1 section | plan 에서의 작업 |
+|---|---|---|
+| Step 3 | §1 (content_object schema) | *완성도 점검*. nested_list / sub-decomposition edge case (SPEC v1 §9.2 미해결 부분 — text_block 의 nested 구조를 sub_text_block 으로 sub-decompose vs Frame Slot cardinality aggregate 해석) |
+| Step 4 | §2 (Internal Region schema, Layer A) | *완성도 점검*. 3-way decision 의 boundary 케이스 / region 비율의 fallback / frame_match_strategy 가 unknown / ambiguous 일 때 거동 |
+| Step 10 (partial) | §3.1 (schema) + §3.2 (3 frame 예시) | *완성도 점검*. `density envelope` 미포함 명시 |
+| Step 11 | §4 (placement algorithm 2-stage) + §5 (display strategy) | *완성도 점검*. Stage A → Stage B *interface* 정합 (Stage A 의 frame_match_strategy 가 Stage B 의 입력으로 자연 호환) / backward flow 자동화 X 등 v1 한계 재확인 |
+
+---
+
+## 5. Pipeline data flow 위치
+
+본 4 step 의 schema 가 *어디서 생성 / 누가 소비* 하는지.
+
+```
+Step 1 MDX 업로드
+   ↓
+Step 2 MDX 정규화 (section / heading / raw_content 분리)
+   ↓
+   ├─→ Step 3.  Content Object 추출
+   │       INPUT  : section.raw_content (markdown 문자열)
+   │       OUTPUT : section.content_objects = [ContentObject ...]
+   │       SCHEMA : SPEC v1 §1
+   │       소비자  : Step 4, Step 11
+   │
+   └─→ Step 4. Section Internal Composition Planning (Layer A)
+           INPUT  : section.content_objects (from Step 3) + section metadata + V4 evidence
+           OUTPUT : zone.internal_regions = [
+                      {region_id, role, content_type, ratio_estimate,
+                       content_unit_ids, frame_match_strategy}, ...
+                    ]
+           SCHEMA : SPEC v1 §2 (entity / Universal Region Model / 3-way decision / 비율 / interface)
+           소비자  : Step 6 (composition planning) / Step 8 (region ratio) /
+                    Step 9 (region-level frame match) / Step 11 (Stage A 결과)
+
+Step 5 Matching Evidence 생성  (V4 top-k)
+Step 6 Composition Planning   (Step 4 region 분할 결과 입력)
+Step 7 Slide-Level Layout Planning
+Step 8 Zone + Internal Region Ratio Planning   (region 비율 = Step 4 산출)
+Step 9 Region-Level Frame / Display Selection   (region 별 frame_match_strategy = Step 4 산출)
+   ↓
+   └─→ Step 10 (partial). Frame Contract 확인
+           INPUT  : selected frame_id (region 별)
+           OUTPUT : frame_contract.accepted_content_types
+                  + frame_contract.sub_zones (= Frame Slots, Layer B)
+           SCHEMA : SPEC v1 §3
+           소비자  : Step 11 (Stage B)
+
+   ↓
+   └─→ Step 11. Content Unit / Child Group → Internal Region → Frame Slot Mapping (2-stage)
+           INPUT  : section.content_objects                        (from Step 3)
+                  + zone.internal_regions                          (from Step 4)
+                  + frame_contract.sub_zones (= Frame Slots)        (from Step 10, frame_match region 만)
+           Stage A : content → Internal Region                     (Step 4 의 region 분할 결과 소비)
+           Stage B : Internal Region content → Frame Slot           (frame_match region 만 진입)
+                     display_only region → display strategy 처리   (Stage B 우회)
+           OUTPUT : placement = {
+                      internal_regions: [
+                        {..., slot_assignments[], overflow_buffer[], rejection[]}, ...
+                      ]
+                    }
+           SCHEMA : SPEC v1 §4 + §5
+           소비자  : Step 12 (slot payload 생성, region + Frame Slot 단위 grouping)
+
+Step 12 Slot Payload 생성
+Step 13 Render
+...
+```
+
+---
+
+## 6. schema validation 기준
+
+> validation = *schema 자체의 구조 검증* 까지만. *실제 MDX 적용 검증 X* (sample budget rule).
+
+### 6.1 Step 3 — content_object schema
+
+- [ ] base schema 의 모든 필수 필드 (id, type, role, size_estimate, raw_payload, type_specific) 정의됨
+- [ ] 6 type 모두 type_specific schema 있음 (text_block / table / transform_table / image / diagram / details)
+- [ ] role 4 종 (summary / detail / decorative / reference) 정의됨
+- [ ] role 별 fallback 거동 (decorative drop / detail → details escalate / summary·reference rejection) 명시됨
+- [ ] *원문 raw_payload 보존* 룰이 schema 에 포함됨 (자름 / 변형 X)
+
+### 6.2 Step 4 — Internal Region schema (Layer A)
+
+- [ ] Internal Region entity 의 모든 필수 필드 (region_id, role, content_type, ratio_estimate, content_unit_ids, frame_match_strategy) 정의됨
+- [ ] Universal Region Model 명시 (every zone has 1+ regions / single-region for text-only / multi-region for mixed-content)
+- [ ] 3-way decision tree 의 3 분기 (whole-section frame match / child-section grouping / content-type split) 가 *결정론적 함수* 로 표현됨 (AI 판단 X)
+- [ ] 각 분기의 판단 기준 (cardinality / accepted_content_types / heading depth + content 구조) 명시됨
+- [ ] region 비율 산정의 size proxy (text_block: line_count / table: rows × line_height / transform_table: pair_count × pair_height / image: aspect_ratio / details: summary line_count) 정의됨
+- [ ] zone 내 region ratio 합 = 1.0 normalize 룰 명시됨
+- [ ] frame_match_strategy 의 두 kind (frame_match / display_only) 정의됨
+- [ ] display_only path 가 frame contract 없이 동작 가능함이 명시됨
+- [ ] decision 이 unknown / ambiguous 일 때의 fallback 명시됨
+
+### 6.3 Step 10 (partial) — frame contract schema (Layer B 선언)
+
+- [ ] `accepted_content_types` 필드 schema 정의됨 (list of type 이름)
+- [ ] `not_accepted` 필드 schema 정의됨 (디버그용)
+- [ ] Frame Slot 선언 schema 정의됨 (id / role / accepts / cardinality / partial_target_path) — YAML 필드명 `sub_zones`, 의미 = Frame Slot
+- [ ] cardinality 표현 방식 (`strict` 또는 `min`/`max`) 정의됨
+- [ ] F13 / F29 / F16 3 frame 의 Frame Slot declaration 예시 *완비*
+- [ ] *density envelope 미포함* 이 schema 위에 명시 주석으로 박혀 있음
+
+### 6.4 Step 11 — placement (2-stage) + display_strategy schema
+
+- [ ] placement algorithm 2-stage I/O schema 정의됨 (input + Stage A 출력 + Stage B 출력)
+- [ ] Stage A schema 정의됨 (content_object → Internal Region 매핑 결과 + frame_match_strategy 결정)
+- [ ] Stage B schema 정의됨 (Internal Region content → Frame Slot 매핑 결과 — frame_match region 만)
+- [ ] sorting / type 매칭 / cardinality 적용 / role 우선순위 / tie-break 의 결정론적 룰 (Stage B) 명시됨
+- [ ] display_only region path 의 display_strategy 매핑 정의됨 (image area / table preview / details button / diagram inline)
+- [ ] 6 type × 3 escalation (inline / preview+details / popup-only) 매트릭스 정의됨
+- [ ] display_strategy 4 종 (inline_full / inline_preview_with_details / details_only / dropped) 정의됨
+- [ ] display_strategy 가 *region-level + slot-level 둘 다* 적용됨이 명시됨
+- [ ] *AI 호출 X* + *원문 손실 금지* 룰이 schema 위에 명시됨
+- [ ] backward flow 자동화 X (v1 한계) 가 schema 위에 명시됨
+
+### 6.5 통합 validation
+
+- [ ] Step 3 → Step 4 의 type 호환 — content_object.type 이 Internal Region.content_type 으로 *결정론적* 매핑
+- [ ] Step 3 → Step 11 (Stage B) 의 type 호환 — Step 3 의 모든 type 이 어딘가 frame.accepted_content_types 에 등장 가능 (또는 명시적 reject) 또는 display_only path 로 처리 가능
+- [ ] Step 4 → Step 8 의 ratio 호환 — Internal Region.ratio_estimate 가 Step 8 의 region-level ratio 입력으로 호환
+- [ ] Step 4 → Step 9 의 frame_match_strategy 호환 — Step 9 의 region-level frame 매칭 입력으로 호환
+- [ ] Step 4 → Step 11 (Stage A) 의 region 분할 호환 — Stage A 가 Step 4 의 internal_regions 를 *재계산하지 않고 그대로 소비*
+- [ ] Step 10 의 cardinality 가 Step 11 Stage B 의 placement algorithm 이 소비 가능한 형태
+
+---
+
+## 7. AI 원칙
+
+- 본 plan 작성 / schema 정의 단계 — **AI 호출 없음**
+- runtime AI = Step 12 의 *light_edit / restructure 의 content_object → Internal Region / Frame Slot proposal* 1 곳만
+- Step 0 (Figma → HTML 변환 등 사전 준비) 의 AI 사용은 *precondition phase* 로, runtime AI 가 아님
+
+---
+
+## 8. 금지
+
+- 구현 금지 (extractor / planner / parser 코드 작성)
+- render 변경 금지
+- frame partial 변경 금지 (Frame Slot / region container marker 추가 미포함)
+- mapper / classifier 의 region / Frame Slot-aware 진화 금지
+- details / popup runtime 작성 금지
+- MDX 01 / 02 / 03 / 04 실행 금지
+- AI 호출 금지
+- code / module / HTML marker / attribute *이름 결정* 금지 (SPEC v1 와 동일 — implementation step 에서 결정)
+- 파일명 변경 금지
+- next step 추천 금지
+- 우선순위 결정 금지
+- A / B / C 선택지 제시 금지
+
+---
+
+## 9. 본 plan 의 보존 / 변경 정책
+
+- 본 plan 은 *schema 작업 범위 + 완료 기준* 의 기준점. schema 작업 진행 중 새로운 edge case 발견 시 본 plan 의 6 절 (validation 기준) 에 *항목 추가* 형태로 갱신
+- *범위 확장* (예: Step 7 추가, density envelope 포함, code marker 이름 결정 포함) 은 사용자 명시 잠금 후에만
+- 본 plan 이 완료되면 STATUS-BOARD 의 :
+  - Step 3 → ⚠ partial (schema 정의 완료, 구현 미완)
+  - Step 4 → ⚠ partial (Layer A schema 정의 완료, 구현 미완)
+  - Step 11 → ⚠ partial (2-stage schema 정의 완료, 구현 미완)
+  - Step 10 → ⚠ partial (accepted_content_types + Frame Slot 부분 완료, density envelope 미포함 잔존)
+- SPEC 의 *추가 갱신* (edge case 보강 등) 은 본 plan 의 §3.1 목표 상태 (completeness reviewed + gaps listed) 의 자연 산출물

docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md

@@ -0,0 +1,849 @@
+# Phase Z-2 — content composition planning spec (Layer A: Internal Region + Layer B: Frame Slot)
+
+**Status** : v1 spec (2026-04-30 refactor — Layer A / Internal Region 추가 + Layer B / Frame Slot 명확화). 정의만. 구현은 별도 step (사용자 승인 후).
+
+> **v0 → v1 변경 요약**
+> - Zone Internal Region (Layer A) 를 first-class entity 로 추가 (§2 신규)
+> - 기존 §2 ~ §8 → §3 ~ §9 로 renumber (v0 의 ## 9 다음 step → v1 의 ## 10)
+> - 기존 `sub_zone` 단어 = *Frame Slot (Layer B)* 의미로 일관 정리. *YAML 필드명 `sub_zones` 는 코드 reality 로 유지 — 의미만 명시*
+> - placement algorithm (§4) 을 *2-stage* (Stage A: content → Internal Region / Stage B: Internal Region content → Frame Slot) 로 재작성
+> - content_object schema (§1) / display strategy 어휘 (§5) / telemetry 구조 (§6) 는 *layer-agnostic 공유 개념* 으로 보호 — substantive 미변경
+> - code / module / HTML marker 이름은 *implementation step* 으로 defer
+
+---
+
+## §0. 목적 / 위치
+
+본 spec 은 **render *전* composition planning layer** 의 정의. fit_classifier / overflow_router / zone_ratio_retry 같은 *post-render telemetry* 가 아니라, *애초에 content 를 어디에 어떻게 배치할지* 결정하는 *진짜 fit policy 의 중심*.
+
+```
+1. PLANNING (composition)            ← 본 spec 의 영역
+   - section raw_content → content_object 정규화
+   - Zone Internal Region (Layer A) 분할 — text/table/image/details 에 따라
+   - frame contract → accepted_content_types + Frame Slot (Layer B) 선언
+   - content_object → Internal Region → Frame Slot 배치 (compatibility 기반)
+   - inline preview vs details/popup 표시 전략
+   ↓
+2. RENDER (Jinja2 + frame partial — Frame Slot aware)
+   ↓
+3. POST-RENDER TELEMETRY (A1~A4)     ← 별 spec, 이미 구축됨
+   - Selenium → fit_classifier → router → retry → failure_classifier → next_action
+   - 1 단계 (본 spec 영역) 가 정밀하면 거의 trigger 안 됨
+   - exception 케이스의 *진단 + 다음 capability 안내*
+```
+
+### Layer 구분
+
+```
+Slide → Zone → Internal Region → Frame → Frame Slot → Content
+                  ────────────              ──────────
+                  Layer A                   Layer B
+```
+
+- **Layer A — Zone Internal Region** : Zone *내부* 영역, frame *밖*. content type 기반 분할 (text region / table region / image region / details region). region 별 frame 또는 display strategy 선택.
+- **Layer B — Frame Slot** : frame *내부* 자리 (= F13 의 pillar_1, F29 의 process_column 등). frame 안에서 content unit 이 들어갈 곳.
+
+Layer A 와 Layer B 는 *별개 entity* 가 아니라 *한 composition pipeline 의 두 sub-phase*. content_object schema / display strategy 어휘 / telemetry interface 는 *공유*.
+
+### 본 spec 의 핵심 원칙
+
+- *render 전* 결정. *render 후 retry* 가 아님
+- content_object 의 *type* 이 핵심 — text / table / image / diagram / details
+- Layer A 가 *region 분할* 결정 / Layer B 가 *region 안 Frame Slot 매핑* 결정
+- 매칭 안 되는 content 는 *details/popup 으로 escalate*. *원문 삭제 / 압축 X*
+- frame 의 *Frame Slot* 이 어떤 type 을 받을 수 있는지 *명시적으로 선언*
+
+본 spec 은 *정의만*. 구현 우선순위는 별도 step (사용자 승인 후).
+
+---
+
+## §1. content_object 정규화 schema
+
+> **layer-agnostic** — Layer A / Layer B 둘 다 사용. v0 → v1 refactor 시 *substantive 미변경*.
+
+MDX section 의 `raw_content` (markdown 문자열) 를 *typed content_object list* 로 정규화.
+
+### 1.1 base schema
+
+```yaml
+section:
+  section_id: str
+  title: str
+  content_objects:
+    - id: str                     # section 내 unique
+      type: str                   # text_block / table / image / diagram / details / transform_table
+      role: str                   # summary / detail / decorative / reference
+      size_estimate:
+        line_count: int           # text/details 의 경우
+        rows: int                 # table 의 경우
+        aspect_ratio: float       # image/diagram 의 경우
+        bytes: int                # raw payload 크기 (heuristic용)
+      raw_payload: str            # 원본 (자름 / 변형 X)
+      type_specific: {...}        # 아래 type 별 schema
+```
+
+### 1.2 type 별 schema
+
+#### `text_block` — 자유 텍스트 / 불릿
+```yaml
+type: text_block
+type_specific:
+  format: paragraph | bullet_list | nested_list
+  bullet_count: int               # 불릿이면
+  max_indent_level: int
+  has_emphasis: bool              # **bold** 등 inline emphasis
+```
+
+#### `table` — markdown 표
+```yaml
+type: table
+type_specific:
+  rows: int                       # header 제외 데이터 row
+  cols: int
+  header_present: bool
+  is_transform: bool              # AS-IS / arrow / TO-BE 구조면 true → transform_table 으로 분류
+  raw_md: str                     # 원본 markdown
+```
+
+#### `transform_table` — AS-IS / TO-BE pair (`table` 의 specialization)
+```yaml
+type: transform_table
+type_specific:
+  pair_count: int                 # 행 수 (각 행 = 1 transform pair)
+  arrow_glyph: str                # ➠ 등
+  rows: [{from: str, arrow: str, to: str}]
+```
+
+#### `image` — markdown / HTML 이미지
+```yaml
+type: image
+type_specific:
+  src: str
+  alt: str
+  aspect_ratio: float | null       # 알면 (asset metadata 에서)
+  intrinsic_width_px: int | null
+  intrinsic_height_px: int | null
+```
+
+#### `diagram` — SVG / 도식
+```yaml
+type: diagram
+type_specific:
+  source_type: svg_inline | svg_file | mermaid | other
+  src: str | null
+```
+
+#### `details` — `<details>/<summary>` 또는 ":::note[...]" 같은 명시 marker
+```yaml
+type: details
+type_specific:
+  summary: str                    # 펼치기 전 보일 헤더
+  body_raw: str                   # 펼친 후 content (자름 X)
+  display_hint: button | inline_collapse | popup   # MDX 가 hint 줄 수 있음
+```
+
+### 1.3 role 의미
+
+- `summary` — section 의 *핵심 메시지*. inline 으로 반드시 표시
+- `detail` — 보조 / 부연. 공간 부족 시 details 로 escalate 가능
+- `decorative` — 시각 보조 (배경 이미지 등). 공간 부족 시 *생략 가능*
+- `reference` — 출처 / footnote / 보충 자료
+
+### 1.4 정규화 parser 위치
+
+신규 module (이름 *implementation step 에서 결정* — defer) :
+- `extract_content_objects(section: MdxSection) -> list[ContentObject]`
+- markdown AST parser (예: mistune) 활용 또는 regex 기반 v0
+- 현재 `align_sections_to_v4_granularity` 다음 단계에 삽입
+
+---
+
+## §2. Zone Internal Region schema (Layer A — 신규)
+
+본 section 은 **v1 신규**. Zone *내부* 영역 (frame *밖*) 의 entity 정의 + 3-way decision tree + region 비율 + region → frame/display interface.
+
+### 2.1 Internal Region entity schema
+
+```yaml
+zone:
+  zone_id: str
+  layout_position: str            # top / bottom / left / right / ...
+  internal_regions:
+    - region_id: str              # zone 내 unique
+      role: str                   # primary / secondary / supporting / reference
+      content_type: str           # text / table / image / diagram / details / mixed
+      ratio_estimate: float       # 0.0 ~ 1.0 (zone 내 비율, 합 = 1.0)
+      content_unit_ids: [str]     # 이 region 에 배치된 content_object id 들 (Layer A → B 의 입력)
+      frame_match_strategy:       # region → frame/display 매칭 결과
+        kind: str                 # frame_match | display_only
+        frame_id: str | null      # frame_match 이면 실제 frame
+        display_strategy: str     # inline_full | inline_preview_with_details | details_only | dropped
+```
+
+### 2.2 Universal Region Model
+
+```
+모든 Zone 은 1 개 이상의 Internal Region 을 가짐.
+
+  text-only zone     = single-region zone (현 거동의 자연 표현)
+  mixed-content zone = multi-region zone
+
+각 Internal Region 은 *자기만의* frame match + display strategy 를 가질 수 있음.
+```
+
+text-only section 도 *single-region zone* 으로 표현 (= 현 거동 보존). mixed-content (text + table / text + image / 등) 은 *multi-region zone* 으로 확장. region 이 *first-class entity* — special case 가 아님.
+
+### 2.3 3-way decision tree
+
+각 section 에 대해 *Internal Region 분할* 여부 결정 :
+
+```
+section 전체 → 1 frame 매칭 가능?
+   ├ YES → whole-section frame match
+   │       → single-region zone (region 1개, content_type=primary)
+   │
+   └ NO  → child-section grouping 가능?
+           ├ YES → group merge → 1 frame 매칭
+           │       → single-region zone (region 1개, content_type=primary)
+           │
+           └ NO  → content-type split
+                   → text region / table region / image region / details region
+                   → region 비율 산정 (예: text 80% / table 20%)
+                   → multi-region zone (region 2~N개)
+```
+
+**판단 기준** :
+- *whole-section frame match* — section 전체와 frame contract 의 accepted_content_types 가 호환 + cardinality 가 맞는 경우
+- *child-section grouping* — sibling section 들이 같은 frame contract (예: F16 의 4-quadrant) 와 묶이는 경우. heading depth + content 구조 + frame cardinality 로 판단
+- *content-type split* — section 안에 *호환 안 되는 content type 조합* 이 있을 때 (text + table 처럼)
+
+### 2.4 region 비율 산정
+
+content type 별 *expected size* 기반 :
+
+| content type | size proxy |
+|---|---|
+| `text_block` | line_count (text_block.size_estimate.line_count) |
+| `table` | rows × line_height_factor (rows × 1.2 ~ 1.5) |
+| `transform_table` | pair_count × pair_height |
+| `image` | aspect_ratio 기반 height (width 고정 시) |
+| `diagram` | aspect_ratio 기반 height |
+| `details` | summary line_count (펼치기 전) |
+
+*zone 내 합 = 1.0* 으로 normalize. role 가중치 (primary > supporting) 는 v1 에서 균등 — *별 step refinement*.
+
+### 2.5 Internal Region Layout / Topology Vocabulary
+
+region 들의 *공간 배치 패턴* 어휘. multi-region zone 의 *방향 / 배치* 결정. ratio 와 content_type 만으로는 *어떻게 배치되는지* 가 결정 안 되므로 *vocabulary 단계* 가 명시적으로 필요.
+
+#### 명명 style — slide-level vs region-level 의 *의도된 비대칭*
+
+- **Slide-level 8 vocabulary** (Step 7) = *count-based* 명명 (`horizontal-2`, `top-1-bottom-2`). zone 의 *layout-driven* 성격 반영
+- **Region-level vocabulary** (본 §) = *descriptor-based* 명명 (`vertical-stack`, `main-support`). region 의 *content-type / role-driven* 성격 반영
+- 이 비대칭은 *의도된 것*. region count 가 작고 (1~4) content type / role 이 핵심 결정 기준이라 descriptor 가 더 의미 전달
+
+#### v1 vocabulary (6 entry)
+
+| region_layout_type | 의미 | 사용 조건 |
+|---|---|---|
+| `region-single` | 1 region 만 (zone 전체 = region 1개) | region count = 1 (single-region zone) |
+| `region-vertical-stack` | 위·아래 수직 stack | region count ≥ 2, content type 이 *순차적 흐름* (예: 본문 + supporting). default fallback |
+| `region-horizontal-split` | 좌·우 수평 분할 | region count = 2, content type 이 *대등 비교* 또는 *side-by-side 시각* (text + image, text + diagram 등) |
+| `region-main-support` | main region + supporting region (asymmetric ratio) | region count = 2, role = [primary, supporting], ratio asymmetric (예: 0.7 / 0.3) |
+| `region-preview-details` | inline preview region + details/popup region | details_presence = true, 또는 큰 content (table N ≥ 5, long text 등) |
+| `region-grid-2x2` | 2×2 grid (4 region) | region count = 4, content type 이 *대등 4 항목* |
+
+#### deterministic decision rule
+
+`region_layout_type` 은 AI 호출 X. 다음 *결정론적 함수* 로 도출 :
+
+```
+입력 :
+  - region_count : int
+  - content_type_mix : list[str]
+  - ratio_estimate : list[float]
+  - role 분포 : list[str]   (primary / supporting / ...)
+  - details_presence : bool
+
+결정 분기 (순차 적용, 첫 매칭 채택) :
+  1. region_count == 1
+       → region-single
+
+  2. details_presence == true 또는 큰 content (table N ≥ 5 / long text 등)
+       → region-preview-details
+
+  3. region_count == 4 AND content_type_mix 가 *4 종 대등*
+       → region-grid-2x2
+
+  4. region_count == 2 AND role == [primary, supporting] AND ratio asymmetric (max / min ≥ 2)
+       → region-main-support
+
+  5. region_count == 2 AND content_type_mix 내 visual element (image / diagram) 포함
+       → region-horizontal-split
+
+  6. fallback (위 모든 분기 미매칭)
+       → region-vertical-stack
+```
+
+#### 출력 schema
+
+각 zone 의 `internal_regions` 컨테이너에 region_layout 필드 추가 :
+
+```yaml
+zone:
+  zone_id: str
+  internal_regions: [...]
+  region_layout:
+    region_layout_type: str       # 위 6 entry 중 하나
+    region_order: [str]           # region_id 의 배치 순서 (위→아래 / 좌→우 등)
+    region_placement: str         # vertical | horizontal | grid | main-side | stack
+```
+
+#### 구현 위치 (예정)
+
+신규 module (이름 *implementation step 에서 결정* — defer) :
+- input : `zone.internal_regions` (from §2.1, ratio + content_type 산정 후)
+- output : `zone.region_layout` (region_layout_type + order + placement)
+- 위치 : §2.4 region 비율 산정 *직후*, §2.6 region → frame / display interface *직전*
+- 결정 함수 deterministic — AI 호출 X
+
+#### v1 vocabulary 의 한계 / 향후 확장 (참고)
+
+- 현재 6 entry = v1 starting set. 추후 sample / frame DB 확장 시 vocabulary 추가 가능 (예: `region-vertical-3` / `region-horizontal-3` / `region-main-side-bottom` 등)
+- v1 fallback (`region-vertical-stack`) 이 매칭 안 되는 패턴 발견 시 별 step 으로 entry 추가
+
+### 2.6 region → frame / display 매칭 interface
+
+각 region 은 다음 중 하나 :
+- **frame_match** — region 의 content_type 에 호환되는 frame 선택. 매칭된 frame 의 contract 가 §3 의 입력. Stage B 진입
+- **display_only** — frame 없이 display strategy 로 처리 (image area 직접 / table preview / details button). frame contract 미사용. Stage B 우회
+
+현재 *runtime contract-registered / verified* frame set (F13 / F29 / F16) 은 모두 text region 만 수용. image / table / details region 은 현재 *display_only* path.
+
+### 2.7 구현 위치 (예정)
+
+신규 module (이름 *implementation step 에서 결정* — defer) :
+- input : `section.content_objects` (from §1)
+- output : `zone.internal_regions` (with ratio + frame_match_strategy) + `zone.region_layout` (from §2.5)
+- 현재 composition planner 의 frame 매칭 *직전* 에 삽입
+- region 분할 / 비율 산정 / topology vocabulary 선택 / 매칭 기준 — 모두 deterministic rule 기반 (AI 호출 X)
+
+---
+
+## §3. frame contract 확장 — accepted_content_types + Frame Slot (Layer B)
+
+> **v0 의 §2 → v1 의 §3 (renumber)**. *Layer B / Frame Slot* spec.
+
+`templates/phase_z2/catalog/frame_contracts.yaml` 에 *2 개 신규 필드* 추가.
+
+### 3.1 schema
+
+```yaml
+<template_id>:
+  ... (기존 필드 그대로 — source_shape / cardinality / payload / visual_hints / ...)
+
+  # NEW : 이 frame 이 받을 수 있는 content type 들
+  accepted_content_types:
+    - text_block
+    - transform_table
+    - ...
+  not_accepted:                   # 명시적 비호환 (디버그용)
+    - image
+    - diagram
+
+  # NEW : frame 내부 Frame Slot 선언
+  # YAML field name = 'sub_zones' — 코드 / catalog reality 로 유지. 의미 = Frame Slot (Layer B).
+  sub_zones:
+    - id: str                     # Frame Slot 식별자
+      role: main_text | supporting_visual | label | details_button | ...
+      accepts:                    # 이 Frame Slot 이 받는 content_object type
+        - text_block
+        - transform_table
+      cardinality:                # Frame Slot 내 capacity
+        strict: int               # 정확히 N개
+        # or
+        min: int
+        max: int
+      partial_target_path:        # frame partial template 에서 이 Frame Slot 의 위치
+        # 예 : "f29b__cell--left.row-1" — partial 안 marker (attribute name *implementation step 에서 결정*)
+```
+
+> **YAML field 이름** : 코드 / catalog reality 로 `sub_zones` 유지. 의미는 *Frame Slot* (= Layer B).
+
+### 3.2 구체 예시 (현재 3 frame)
+
+#### F13 — three_parallel_requirements
+```yaml
+three_parallel_requirements:
+  ...
+  accepted_content_types: [text_block]
+  sub_zones:                       # = Frame Slots (Layer B)
+    - id: pillar_1
+      role: main_text
+      accepts: [text_block]
+      cardinality: { strict: 1 }
+    - id: pillar_2
+      role: main_text
+      accepts: [text_block]
+      cardinality: { strict: 1 }
+    - id: pillar_3
+      role: main_text
+      accepts: [text_block]
+      cardinality: { strict: 1 }
+```
+
+#### F29 — process_product_two_way
+```yaml
+process_product_two_way:
+  ...
+  accepted_content_types: [text_block, transform_table]
+  sub_zones:                       # = Frame Slots (Layer B)
+    - id: process_column
+      role: main_text
+      accepts: [text_block, transform_table]
+      cardinality: { strict: 3 }   # 3 sections per column
+    - id: product_column
+      role: main_text
+      accepts: [text_block]         # product 쪽은 transform 안 받음 (현재 frame 의 시각적 구분)
+      cardinality: { strict: 3 }
+```
+
+#### F16 — bim_issues_quadrant_four
+```yaml
+bim_issues_quadrant_four:
+  ...
+  accepted_content_types: [text_block]
+  sub_zones:                       # = Frame Slots (Layer B)
+    - id: quadrant_1
+      role: main_text
+      accepts: [text_block]
+      cardinality: { strict: 1 }
+    - id: quadrant_2
+      role: main_text
+      accepts: [text_block]
+      cardinality: { strict: 1 }
+    - id: quadrant_3
+      role: main_text
+      accepts: [text_block]
+      cardinality: { strict: 1 }
+    - id: quadrant_4
+      role: main_text
+      accepts: [text_block]
+      cardinality: { strict: 1 }
+```
+
+### 3.3 partial template 의 Frame Slot 마커
+
+frame partial 의 HTML 에 Frame Slot 식별 marker 추가 — render 후 Selenium 이 Frame Slot 단위 측정 가능, A1~A4 의 정밀도 향상. *marker attribute name (예: `data-subzone` / `data-frame-slot` / 기타) 은 implementation step 에서 결정 — defer*.
+
+---
+
+## §4. placement algorithm — 2-stage (Layer A → Layer B)
+
+> **v0 의 §3 → v1 의 §4 (renumber + 2-stage 재작성)**. *layer 순차 dependency*.
+
+### 4.1 input / output
+
+```
+input :
+  section: { section_id, content_objects: [...] }
+  zone:    { zone_id, layout_position }
+  available_frames: [...]   # V4 top-k from Step 5
+
+output :
+  internal_regions: [
+    {
+      region_id, role, content_type, ratio_estimate,
+      content_unit_ids: [...],
+      frame_match_strategy: { kind, frame_id, display_strategy },
+      # Stage B 결과 (frame_match region 만)
+      slot_assignments: [
+        { content_object_id, frame_slot_id, display_strategy }
+      ],
+      overflow_buffer: [...],
+      rejection: [...]
+    },
+    ...
+  ]
+```
+
+### 4.2 Stage A — content → Internal Region (Layer A)
+
+> region 분할 결정 + content_object → region 배치.
+
+```
+1. 3-way decision (§2.3) 적용
+   - whole-section frame fit 가능 → single-region (Stage B 로 1 region)
+   - child-grouping 가능 → group merge → single-region
+   - content-type split 필요 → multi-region
+
+2. multi-region 인 경우 :
+   - content_object.type 별로 region 분류 (text region / table region / image region / ...)
+   - 같은 region 안의 content_object 끼리 묶음
+   - region 별 ratio 산정 (§2.4)
+
+3. region 별 frame_match_strategy 결정 :
+   - region.content_type 이 frame.accepted_content_types 에 매칭 가능 → frame_match
+   - 매칭 frame 없음 → display_only (image / table / details path)
+
+4. 결과 : zone.internal_regions = [region_1, region_2, ...]
+   각 region 은 content_unit_ids + frame_match_strategy 를 가짐
+```
+
+### 4.3 Stage B — Internal Region content → Frame Slot (Layer B)
+
+> region 의 content 를 frame 의 Frame Slot 에 배치. *frame_match_strategy.kind == "frame_match"* 인 region 에만 적용.
+
+각 frame_match region 에 대해 :
+
+```
+1. content_object 정렬
+   - role 기준 우선순위 : summary > reference > detail > decorative
+   - 같은 role 내 raw_payload 등장 순서
+
+2. content_object.type 이 frame.accepted_content_types 에 없는 것
+   → rejection 으로 분리. 본 frame 부적합 신호 (Stage A 의 frame_match_strategy 재검토 신호)
+
+3. 남은 content_object 를 Frame Slot 들에 배치
+   - 각 Frame Slot 을 순회 (frame contract 의 declaration 순서)
+   - Frame Slot.accepts 에 매칭되는 content_object 들에서
+     cardinality.strict 또는 max 수만큼 할당
+   - role 우선순위 높은 것부터
+
+4. 배치 안 된 content_object
+   - role = decorative → 무조건 drop (생략)
+   - role = detail → overflow_buffer 로 (details/popup 후보)
+   - role = summary / reference → rejection (frame 부적합)
+
+5. 결과 :
+   - slot_assignments : 정확히 무엇이 어디로
+   - overflow_buffer : details/popup 으로 escalate 할 candidate
+   - rejection : 본 frame 으로는 표현 불가 — frame_reselect 신호
+```
+
+### 4.4 매칭 충돌 / tie-break
+
+Frame Slot 단위로 :
+
+- 동일 Frame Slot 에 다수 content_object 후보 시 :
+  - role 우선순위 (summary > reference > detail)
+  - 동률 시 size_estimate 작은 것 우선 (fit 가능성 ↑)
+- 동일 content_object 가 여러 Frame Slot 에 매칭 가능 시 :
+  - role 매칭 우선 (Frame Slot.role == content_object.role)
+  - 그래도 동률이면 contract declaration 순서 (앞쪽 Frame Slot 우선)
+
+### 4.5 display_only region 의 처리
+
+`frame_match_strategy.kind == "display_only"` 인 region 은 Stage B 우회. 대신 :
+- image region → image area 직접 배치 (frame 없이, region 안에 직접 inline)
+- table region → table preview (rows ≤ N inline) + 자세히보기 (rows > N popup)
+- details region → details button + popup
+- diagram region → diagram inline
+
+display strategy 어휘는 §5 와 동일 — region-level 적용.
+
+### 4.6 구현 위치 (예정)
+
+신규 module (이름 *implementation step 에서 결정* — defer) :
+- `plan_placement(section, zone, available_frames) -> Placement`
+- composition planner 의 frame 매칭 *직후*, slot_payload 생성 *직전*
+- Stage A → Stage B 순차 실행
+- 결과를 slot_payload 생성 단계에 전달
+
+---
+
+## §5. 표시 전략 — inline preview vs details / popup escalation
+
+> **v0 의 §4 → v1 의 §5 (renumber)**. **layer-agnostic** — region-level (Stage A) + slot-level (Stage B) 둘 다 적용. *어휘 미변경*.
+
+### 5.1 결정 기준 (per content_object type)
+
+| type | inline 가능 조건 | preview + details 전환 | popup-only 전환 |
+|---|---|---|---|
+| `text_block` | line_count ≤ Frame Slot capacity | line_count > capacity AND role=detail | role=detail AND line_count >> capacity (예: 20+) |
+| `table` (rows N) | N ≤ 4 | 5 ≤ N ≤ 7 (preview 첫 N rows + details) | N ≥ 8 (popup-only) |
+| `transform_table` | rows ≤ frame 의 transform Frame Slot capacity (보통 3) | rows > capacity, 일부 inline | rows >> capacity |
+| `image` | aspect_ratio fit 가능 | 일부 frame 에서 inline + details 의 thumbnail | 거의 없음 (image 는 보통 inline 또는 drop) |
+| `diagram` | Frame Slot 호환 | preview thumbnail + popup full | popup-only |
+| `details` (already-marked) | inline 만 안 함 (정의상) | summary inline + body popup | summary + body popup |
+
+### 5.2 *원문 손실 금지* 룰
+
+- 표시 전략 결정은 *어디 보여줄지*. *content 자르지 / 압축 / 요약 X*
+- inline preview 도 *raw_payload 의 일부* 만 빌려옴. 나머지는 details 로
+- AI 호출 X — 모든 결정은 deterministic rule 기반
+
+### 5.3 적용 layer
+
+display strategy 어휘 (`inline_full` / `inline_preview_with_details` / `details_only` / `dropped`) 는 *동일* :
+- **region-level** (Stage A 의 display_only region) — image area / table preview / details button 등
+- **slot-level** (Stage B 의 frame_match region 안 Frame Slot 별 content) — Frame Slot 안 content 가 fit 안 되면 escalate
+
+### 5.4 details / popup runtime
+
+- frame partial 또는 region container 에 `<details>/<summary>` 또는 별 button + popup layer
+- 단순 v0 : `<details>` 내장 — 클릭으로 펼침
+- 향후 v1 : 별도 popup overlay (CLAUDE.md 의 자세히보기 원칙)
+
+### 5.5 구현 위치 (예정)
+
+placement planner (§4.6) 의 후속 단계 — 각 assignment / region 에 `display_strategy` 부착 :
+- `inline_full` — content 전체 inline
+- `inline_preview_with_details` — 일부 inline, 나머지 details
+- `details_only` — summary 만 inline, content 는 popup
+- `dropped` — decorative 가 공간 부족으로 생략
+
+---
+
+## §6. A1~A4 telemetry 와의 interface
+
+> **v0 의 §5 → v1 의 §6 (renumber)**. *layer-agnostic*. *구조 미변경* — `sub_zone` 단어 mechanical rename + region-level metadata 추가.
+
+본 composition layer 와 기존 telemetry layer (A1~A4) 가 *어떻게 흐르는지*.
+
+### 6.1 forward flow (composition → render → telemetry)
+
+```
+section
+  ↓ extract_content_objects
+content_objects
+  ↓ placement_planner (Stage A → Stage B)
+placement {
+  internal_regions: [
+    {
+      region_id, content_type, ratio_estimate,
+      slot_assignments: [{content_object_id, frame_slot_id, display_strategy}],
+      overflow_buffer: [...],
+      rejection: [...],
+    }
+  ]
+}
+  ↓ slot_payload 생성 (region + Frame Slot 단위로 grouping)
+slot_payload (with region + Frame Slot metadata)
+  ↓ render (frame partial — Frame Slot aware + region container aware)
+HTML
+  ↓ Selenium check
+overflow signals
+  ↓ A1 fit_classifier
+categories
+  ↓ A2 router
+proposed_actions
+  ↓ A3 retry / A4 failure_classifier / next_action
+final_status
+```
+
+### 6.2 telemetry 에 전달되는 새 metadata
+
+각 zone 의 debug entry 에 추가 :
+```yaml
+zone:
+  ... (기존)
+  internal_regions:                  # Layer A
+    - region_id
+      content_type
+      ratio_estimate
+      frame_match_strategy
+  placement:
+    slot_assignments: [...]          # 이 zone 에 어떤 content_object 가 어디 Frame Slot 으로
+    overflow_buffer: [...]           # details 로 간 것
+    rejection: [...]                 # frame 부적합 후보
+  region_metrics:                    # Selenium 이 region 별로 측정 (Layer A)
+    - region_id
+      ch / sh / excess_y             # region 단위 overflow
+  frame_slot_metrics:                # Selenium 이 Frame Slot 별로 측정 (Layer B, frame_match region 만)
+    - frame_slot_id
+      content_object_id
+      ch / sh / excess_y             # Frame Slot 단위 overflow
+```
+
+### 6.3 backward flow (telemetry → composition)
+
+A4 의 `next_proposed_action` 이 `frame_internal_fit_candidate` 또는 `frame_reselect` 일 때 :
+- composition layer 가 *재호출* 됨 (단, retry budget 별도)
+- 다른 frame 또는 다른 placement 시도
+
+본 v1 에서는 *backward flow 자동화 X* (구현 단계). placement 가 정확히 되어 있으면 telemetry 거의 trigger X.
+
+### 6.4 fit_classifier 의 *content_type aware* 진화
+
+현재 fit_classifier 는 *className → semantic_content_type* 매핑. 본 spec 적용 후 :
+- Selenium 이 region marker / Frame Slot marker / content_object_id marker 를 읽음 (marker attribute name *implementation step 에서 결정* — defer)
+- classifier 는 *content_object 의 type* 을 직접 알 수 있음
+- 분류 정밀도 향상 (예: F29 의 frame_match region 안 Frame Slot 의 transform-block 이 transform_table content_object 임을 *직접* 알 수 있음 — 현재는 inner_content_signals 로 추론)
+
+---
+
+## §7. current code gap — 재사용 / 신규 분리
+
+> **v0 의 §6 → v1 의 §7 (renumber)**. 신규 module 이름 *defer*.
+
+### 7.1 이미 있는 것 (재사용)
+
+- MDX parser : section 단위 (## / ### drilling)
+- align_sections_to_v4_granularity
+- composition planner (parent_merged_inferred 포함)
+- frame_contracts.yaml + builder/parser registry
+- mapper (catalog-driven slot_payload 생성)
+- Jinja2 render
+- 8-preset layout vocabulary
+- A1~A4 telemetry chain
+
+### 7.2 신규 필요
+
+| 항목 | 위치 | 비고 |
+|---|---|---|
+| **content_object 정규화** | 신규 module (이름 *defer*) | markdown AST 또는 regex 기반 v0 |
+| **Internal Region planner (Layer A)** | 신규 module (이름 *defer*) | 3-way decision + region 비율 + frame_match_strategy 결정 |
+| **frame_contracts.yaml** 의 `accepted_content_types` + `sub_zones` 필드 (= Frame Slot 선언) | catalog (기존 yaml 확장) | 3 frame (F13/F29/F16) 우선 |
+| **placement_planner (Layer A → Layer B)** | 신규 module (이름 *defer*) | Stage A: content → Internal Region / Stage B: region content → Frame Slot |
+| **display_strategy** 결정기 | placement_planner 내부 | inline_full / inline_preview_with_details / details_only / dropped |
+| **frame partial 에 Frame Slot 마커** | `templates/phase_z2/families/*.html` | marker attribute name *defer* |
+| **region container 마커** | `templates/phase_z2/slide_base.html` 또는 partial | region 단위 측정 marker, name *defer* |
+| **details/popup runtime** | partial template 또는 base slide | `<details>` 우선, 추후 popup overlay |
+| **fit_classifier 의 region / Frame Slot 인식** | `src/phase_z2_classifier.py` 확장 | inner_content_signals → region / Frame Slot 직접 read |
+| **mapper 의 region / Frame Slot-aware slot_payload** | `src/phase_z2_mapper.py` 확장 | builder 들이 region + Frame Slot 그룹핑 인식 |
+
+### 7.3 정의 vs 구현 분리
+
+본 spec 은 *정의만*. 구현 axis 는 별도 step :
+- B1. content_extractor (MDX → content_object 정규화)
+- B2. internal_region_planner (Layer A — 3-way decision + 비율 + frame_match_strategy)
+- B3. frame_contracts 의 accepted_content_types + sub_zones (= Frame Slot) 선언 (3 frame)
+- B4. placement_planner (Layer A → Layer B 통합)
+- B5. partial / region container marker 추가 + telemetry 연동 (이름 결정 포함)
+- B6. details/popup runtime
+
+각 axis 는 *별도 step*. 한 axis 씩 사용자 승인 후 진행.
+
+> **module / marker / attribute 이름** : 본 spec 에서 *defer*. implementation step 에서 결정.
+
+---
+
+## §8. 본 spec 의 활용
+
+> **v0 의 §7 → v1 의 §8 (renumber)**.
+
+### 8.1 composition layer 의 룰북
+
+향후 frame 추가 / content_object 변경 / Layer A 재분할 / Frame Slot 매핑 변경 시 본 spec 의 schema 를 따름. *임의 매핑 / hack 차단*.
+
+### 8.2 telemetry 와의 cross-check
+
+A1~A4 의 분류 결과 (`structural_minor_overflow` 등) 가 본 spec 의 placement 결과와 *일치하는가* 확인 가능. 불일치 = composition planning 의 *예상치 못한 케이스* — 진단 자료.
+
+### 8.3 미사용 sample (MDX 01 / 02) 진단
+
+본 spec 적용 후 MDX 01/02 를 돌리면 :
+- 각 section 의 content_object 정규화 결과 visible
+- 각 zone 의 Internal Region 분할 결과 visible (single vs multi)
+- 어떤 content type 이 frame contract 에 없는지 (frame 추가 필요 신호)
+- placement 의 rejection 비율 (frame coverage gap)
+- overflow_buffer 의 details 후보 (popup runtime 필요 신호)
+- display_only region 비율 (현재 frame DB 의 Layer A 미커버 영역)
+
+이 정보가 *generalization validation* 의 진짜 신호.
+
+---
+
+## §9. MDX 03 의 case 를 본 spec 으로 검증 (illustrative)
+
+> **v0 의 §8 → v1 의 §9 (renumber)**. mechanical rename + 2-stage 표현.
+
+> MDX 03 = sample. *fix 대상 X*. 본 spec 룰의 *예시 적용*.
+
+### 9.1 03-1 의 content_object 정규화 (예상)
+
+```yaml
+section_id: "03-1"
+title: "1. DX 시행을 위한 필수 요건"
+content_objects:
+  - id: "03-1.text-1"
+    type: text_block
+    role: summary
+    type_specific: { format: nested_list, bullet_count: 3 (top), nested_count: 7 }
+    size_estimate: { line_count: ~12 }
+```
+
+→ 1 content_object (text_block, role=summary).
+
+### 9.2 03-1 의 Stage A → Stage B (F13 contract 적용)
+
+**Stage A** :
+- 3-way decision : section 전체가 F13 (3 pillars) 의 child grouping 으로 매칭 → *whole-section frame match*
+- single-region zone, content_type=text, ratio=1.0
+- frame_match_strategy = { kind: "frame_match", frame_id: "F13" }
+
+**Stage B** :
+- F13 sub_zones (= Frame Slots) : [pillar_1, pillar_2, pillar_3] (각 cardinality strict 1, accepts text_block)
+- text_block 1 개 → 3 Frame Slot 에 어떻게 배치?
+- 현재 mapper (`pillar_item` parser) 가 *implicit* 으로 top_bullet 3 개를 3 pillar 에 분배
+- 본 spec 적용 시 : text_block 의 nested 구조를 *3 sub_text_block* 으로 sub-decompose 하거나, Frame Slot cardinality 를 *aggregate (3)* 으로 해석할지 결정 필요
+- v1 단순화 : text_block 의 top-bullet 단위가 *implicit 한 sub-content_object* — 향후 explicit 화
+
+### 9.3 03-2 의 case (transform_table 포함)
+
+```yaml
+section_id: "03-2"
+content_objects:
+  - id: "03-2.transform-1"
+    type: transform_table
+    role: summary
+    type_specific: { pair_count: 3 }
+  - id: "03-2.text-1"
+    type: text_block
+    role: detail
+    type_specific: { bullet_count: 1 }
+  - id: "03-2.text-2"
+    type: text_block
+    role: detail
+    type_specific: { bullet_count: 1 }
+  - id: "03-2.text-3"
+    type: text_block
+    role: detail
+    type_specific: { bullet_count: 3 (large) }
+  - ... (product 쪽도 4 개)
+```
+
+**Stage A** :
+- 3-way decision : section 전체가 F29 (process/product 2-column structure) 와 매칭 → *whole-section frame match*
+- single-region zone, content_type=text+transform_table, ratio=1.0
+- frame_match_strategy = { kind: "frame_match", frame_id: "F29" }
+
+**Stage B** :
+- F29 sub_zones (= Frame Slots) : [process_column (accepts: text_block + transform_table, cardinality 3), product_column (accepts: text_block, cardinality 3)]
+- process_column → transform_table + 2 text_block (3 개)
+- product_column → 3 text_block
+- 모두 inline_full 로 표시
+
+이건 *현재 mapper (column_with_transform / column_plain) 가 implicit 으로 하는 것* — 본 spec 이 *explicit 하게 표현*.
+
+### 9.4 03-2 의 cell row 1 (transform_table) 의 10 px overflow 재해석
+
+placement 가 explicit 하게 되어도 transform_table 이 row 1 cell 에 *콘텐츠 height 131 vs 가용 121* 인 건 변하지 않음.
+
+**그러나** :
+- placement 가 *transform_table 의 size_estimate* 를 미리 알면
+- frame contract 의 Frame Slot 이 *expected_height* 를 declare 하면
+- planning 단계에서 *"transform_table 이 row 1 Frame Slot 의 expected_height 초과한다"* 를 사전 감지 가능
+- 그 시점에서 display_strategy = `inline_preview_with_details` 로 자동 전환 (3 transforms 중 2 inline + "1 더 보기")
+- 또는 placement 가 *frame 부적합* 으로 판정 → frame_reselect 신호
+
+즉 *본 spec 의 §4 placement algorithm 에 size_estimate 기반 fit pre-check* 가 들어가면 — A1~A4 telemetry 가 *trigger 안 되는 정상 path* 가 됨.
+
+이게 본 spec 이 가리키는 *진짜 fit policy 의 자리*.
+
+---
+
+## 10. 다음 step (사용자 결정)
+
+본 spec v1 정의 후 구현 axis 후보 :
+- B1. content_extractor (MDX → content_object 정규화)
+- B2. internal_region_planner (Layer A — 3-way decision + 비율 + frame_match_strategy)
+- B3. frame_contracts 에 accepted_content_types + sub_zones (= Frame Slot) 선언 (3 frame)
+- B4. placement_planner (Layer A → Layer B 통합)
+- B5. partial / region container marker 추가 + telemetry 연동 (이름 결정 포함)
+- B6. details/popup runtime
+
+각 axis 는 *별도 step*. 사용자가 우선순위 결정.
+
+본 spec 자체는 *implementation 0 단계의 정의*. 다음 step 은 사용자가 잠근 후 진행.

docs/architecture/PHASE-Z-FIT-CLASSIFIER-ROUTER-SPEC.md

@@ -0,0 +1,220 @@
+# Phase Z-2 — fit_classifier / overflow_router spec
+
+**Status** : v0 spec (2026-04-29). 정의만. 구현은 별도 step (사용자 승인 후).
+
+---
+
+## 0. 목적 / 위치
+
+자동 파이프라인이 Selenium 으로 *detect 한* overflow / clipping 을 *어떤 pipeline action 으로 routing 할지* 결정하는 layer 의 spec.
+
+현재 파이프라인은 detection 까지 정상 작동 (Selenium + debug.json 으로 신호 캡처). 그러나 detection 결과를 받은 직후 `sys.exit(1)` 으로 abort — **detection 과 action 사이의 decision layer 가 비어 있음**.
+
+```
+parse_mdx → align → composition (v0.2: capacity_fit) → render (Jinja2)
+  ↓
+Selenium visual_runtime_check  ← 기존 (detection)
+  ↓
+🆕 fit_classifier               ← 신규 (사실 분류)
+  ↓
+🆕 overflow_router              ← 신규 (정책 결정)
+  ↓
+action :
+  - zone_ratio_retry            ← 신규 미구현
+  - layout_adjust               ← 신규 미구현
+  - details_popup_escalation    ← 신규 미구현 (CLAUDE.md 의 <details> 원칙 활성)
+  - frame_reselect              ← 신규 미구현 (V4 top-k 활용)
+  - adapter_needed              ← composition v0.1.1 partial
+  - abort                       ← 기존 (현재 default)
+```
+
+**핵심 원칙** : classifier = *사실 분류* (이 overflow 가 어떤 종류인가), router = *정책 결정* (그 종류면 무엇을 할 것인가). 두 layer 분리 — 같은 분류가 context (retry 횟수 등) 에 따라 다른 action 을 요구할 수 있음.
+
+---
+
+## 1. fit_classifier 입력 schema
+
+### 1.1 detection-side (기존 — 이미 캡처됨)
+
+| 입력 | 출처 | 비고 |
+|---|---|---|
+| `clipped_inner: [{class_name, excess_x, excess_y, scrollWidth/Height, clientWidth/Height}]` | `run_overflow_check` Selenium JS | ✅ |
+| zone 별 `overflowed`, `excess_y/x` | 같음 | ✅ |
+| slide / slide_body level overflow | 같음 | ✅ |
+
+### 1.2 composition-side (기존 — composition v0.2)
+
+| 입력 | 출처 | 비고 |
+|---|---|---|
+| `unit.frame_template_id` / `contract_id` | composition + pipeline | ✅ |
+| `capacity_fit` (item count, fit_status) | `mapper.compute_capacity_fit` | ✅ (v0.2) |
+| `content_truncated_count` (zone 별) | pipeline 의 mapper 호출 후 | ✅ (v0.1.1) |
+| zone size (`height_px`, `min_height_px`, `content_weight`) | `compute_zone_layout` | ✅ |
+
+### 1.3 신규 입력 (이번 spec 에서 정의)
+
+| 입력 | 비고 |
+|---|---|
+| `semantic_content_type` | className → 의미적 분류. §2 registry 참조 |
+| `line_equivalent` | excess_y / 해당 element 의 line-height (1 줄 단위로 환산) |
+| `structural_unit_drop_count` | structural_unit 중 *완전히 또는 부분적으로 잘린* 개수 |
+| `retry_budget_used` (router 의 상태) | 같은 slide 에 대해 router 가 이미 시도한 retry 횟수 |
+
+---
+
+## 2. className → semantic content_type registry
+
+| className 패턴 | semantic type | 설명 |
+|---|---|---|
+| `transform-block`, `transform-block__*`, `transform-row*` | `structural_unit` | paired comparison (AS-IS/TO-BE 한 쌍이 의미 단위). 행 단위 자르면 의미 깨짐 |
+| `text-line`, `text-line--bullet`, `text-line--indent-*` | `text_flow` | 자유 wrap, 줄 단위 자르기 가능 |
+| `*table*`, native `<table>` | `tabular` | 행/열 단위 의미 — 행 잘리면 의미 손실 |
+| `f29b`, `f13b`, `f16b` (frame-family root) | `frame_internal` | frame 자체가 zone 안에 못 들어감 (zone level 문제) |
+| `*__cell`, `*__pillar`, `*__quadrant` 등 frame 내부 cell | `frame_internal_cell` | frame 내부 cell 단위 (cell 내부 content 가 cell 경계 초과) |
+| `*__title`, `*__section-title`, `*__banner`, `*__label` 등 | `frame_label` | 제목/라벨 단위 (text 와 비슷하지만 wrap 제약 있음) |
+| `<img>`, `<svg>`, `*-bg` 등 | `visual_asset` | 시각 자산 (cropping 가능) |
+| 매칭 안 됨 | `unknown` | classifier 가 보수적으로 처리 (가장 안전한 action 선택) |
+
+본 registry 는 신규 module (예: `src/phase_z2_classifier.py`) 의 상수 또는 catalog yaml entry 로 구현.
+
+---
+
+## 3. fit_classifier 출력 taxonomy
+
+### 3.1 카테고리 정의 (계산 가능한 룰)
+
+| 카테고리 | 판정 룰 |
+|---|---|
+| `frame_capacity_mismatch` | composition 단계의 `capacity_fit.fit_status` ∈ {`strict_mismatch`, `exceeds_max`, `below_min`, `exceeds_truncate`}. → 이미 v0.2 가 잡고 있는 영역. 본 카테고리는 *post-render 검증 / 누락된 케이스 캐치* 용 |
+| `structural_major_overflow` | content_type = `structural_unit` 또는 `tabular` AND `structural_unit_drop_count` ≥ 1 (1 개 이상 *완전 단위* 잘림) |
+| `structural_minor_overflow` | content_type = `structural_unit` 또는 `tabular` AND `structural_unit_drop_count` < 1 (마지막 1 단위가 *부분만* 잘림, 즉 boundary spill) |
+| `tabular_overflow` | content_type = `tabular` (위와 별도 — 표는 행 1개라도 잘리면 popup) |
+| `layout_zone_mismatch` | content_type = `frame_internal` (frame root 자체 overflow) — zone 이 frame 을 못 담음 |
+| `moderate_overflow` | content_type ∈ {`text_flow`, `frame_label`} AND `line_equivalent` ∈ (1.5, 4] |
+| `minor_overflow` | content_type ∈ {`text_flow`, `frame_label`} AND `line_equivalent` ≤ 1.5 |
+| `hard_visual_fail` | 위 어디에도 매핑 안 됨 OR retry budget 소진 |
+
+### 3.2 분류 우선순위 (위에서 아래로)
+
+1. `frame_capacity_mismatch` (composition 결과 우선)
+2. `tabular_overflow` (표는 즉시 popup 영역)
+3. `structural_major_overflow` (1+ 완전 단위 잘림)
+4. `layout_zone_mismatch` (frame root level)
+5. `structural_minor_overflow` (boundary spill — 양 작음)
+6. `moderate_overflow`
+7. `minor_overflow`
+8. `hard_visual_fail` (fallback)
+
+### 3.3 핵심 구분
+
+- **structural_minor vs structural_major** : 부분만 잘렸나 (`< 1` unit) vs 완전 단위가 잘렸나 (`≥ 1` unit). 부분 잘림은 zone 을 조금 더 주면 fit 가능. 완전 단위 잘림은 의미 손실 — popup escalation.
+- **structural vs moderate vs minor** : content type 이 *구조적 의미 단위* 인지 여부. 같은 px 양이라도 text_flow 는 minor, structural_unit 은 structural_minor 이상.
+
+---
+
+## 4. overflow_router action mapping
+
+| 카테고리 | action | retry budget | fallback (안 풀리면) |
+|---|---|---|---|
+| `minor_overflow` | `zone_ratio_retry` (양보 가능 zone 식별 → compute_zone_layout 재실행) | 1 | escalate → `moderate_overflow` 처리 |
+| `moderate_overflow` | `layout_adjust` (8-preset 중 다른 preset 검토 + zone ratio 재분배) | 1 | escalate → `structural_major_overflow` 처리 |
+| `structural_minor_overflow` | `zone_ratio_retry` (구조 자르지 않도록 zone 키움) | 1 | escalate → `structural_major_overflow` 처리 |
+| `structural_major_overflow` | `details_popup_escalation` (`<details>/<summary>` path) | N/A | popup 미구현 시 → `frame_reselect` → `adapter_needed` |
+| `tabular_overflow` | `details_popup_escalation` 또는 `frame_reselect` (table-friendly frame 후보) | N/A | 없으면 `adapter_needed` |
+| `frame_capacity_mismatch` | `frame_reselect` (V4 top-k rank 2+ 평가) | 1 | 없으면 `adapter_needed` |
+| `layout_zone_mismatch` | `layout_adjust` 또는 `zone_ratio_retry` | 1 | escalate → `frame_reselect` |
+| `hard_visual_fail` | `abort` (현재 sys.exit(1) 그대로) | — | — |
+
+---
+
+## 5. current code gap
+
+### 5.1 이미 있어서 *재사용* 할 것
+
+- detection (Selenium `run_overflow_check`) — clipped_inner / excess_y / className 모두 캡처
+- composition v0.2 의 `compute_capacity_fit` (item count level)
+- composition v0.1.1 의 `adapter_needed` catch (mapper FitError)
+- debug.json 의 `slide_status` / `zones` / `candidates_summary` (입력 자료원)
+- 8-preset layout vocabulary + `compute_zone_layout`
+
+### 5.2 새로 만들어야 할 것
+
+| 신규 항목 | 비고 |
+|---|---|
+| **content_type registry** (§2) | className → semantic type. classifier 의 핵심 입력 |
+| **`fit_classifier` 모듈** | §1 입력 → §3 카테고리 |
+| **`overflow_router` 모듈** | §4 카테고리 → action |
+| `zone_ratio_retry` action 구현 | compute_zone_layout 의 retry path |
+| `layout_adjust` action 구현 | preset 동적 변경 |
+| `details_popup_escalation` 구현 | `<details>/<summary>` runtime + slot_payload 분리 룰 (큰 작업) |
+| `frame_reselect` 구현 | V4 top-k 사용 (rank-2+ 평가) |
+
+### 5.3 정의 vs 구현 분리
+
+본 spec 은 **정의만**. 위 신규 항목 중 어느 axis 부터 구현할지는 *별도 step* 에서 사용자 승인 후. 한꺼번에 다 만들지 X.
+
+---
+
+## 6. 본 spec 의 활용 — *visual fix 결정의 검증 자료*
+
+본 spec 은 *룰북*. 향후 overflow 발생 시 :
+
+1. classifier 가 *어떤 카테고리* 인지 결정
+2. router 가 *어떤 action* 인지 결정
+3. action 이 *현재 구현되어 있나* 확인
+4. 미구현이면 → "본 spec 의 이 path 미구현이라 처리 불가" 로 명확히 보고
+
+**중요 활용** : 누군가 (Claude 든 사람이든) "padding 줄여서 끼우자" 같은 fix axis 를 제시하면 — 이 fix 가 본 spec 의 어느 action 에도 매핑되지 않음 → **자동 반려**. 본 spec 을 검증 자료로 가지면 *symptom-silencing fix* 가 들어올 자리가 없어짐.
+
+---
+
+## 7. MDX 03 의 10px clipping 을 본 spec 으로 분류 (검증용 sample, fix 대상 X)
+
+> MDX 03 = sample instance. spec 룰의 *작동 검증* 용 — fix 대상 아님.
+
+### 측정값
+- excess_y = 10px (~0.6 줄, transform-row line-height 15.95px 기준)
+- clipped element className = `transform-block` 의 마지막 row (cell 내부)
+- semantic content_type = `structural_unit` (transform-row pair)
+- structural_unit_drop_count = 0.6 (1 개의 마지막 row 가 부분만 잘림 — 완전 단위 1 개가 아님)
+- composition `capacity_fit.fit_status` = `ok`
+
+### 분류 적용 (§3.2 우선순위)
+
+1. `frame_capacity_mismatch`? — capacity_fit ok → ✗
+2. `tabular_overflow`? — content_type 이 tabular 아님 → ✗
+3. `structural_major_overflow`? — drop_count `< 1` → ✗
+4. `layout_zone_mismatch`? — frame_internal 아님 → ✗
+5. `structural_minor_overflow`? — content_type = structural_unit AND drop_count `< 1` → **✓**
+
+**카테고리 = `structural_minor_overflow`**
+
+### Action mapping 적용 (§4)
+
+→ `zone_ratio_retry` (구조 자르지 않도록 F29 zone 을 더 키움)
+
+### 현재 구현 상태
+
+→ `zone_ratio_retry` 는 **MISSING**. 따라서 본 spec 기준으로 MDX 03 은 *classifier 가 정상 작동하면 structural_minor_overflow 로 분류되고 zone_ratio_retry 로 routing 되어야 하는 case* 인데, *그 path 가 현재 미구현*. 따라서 정직한 상태는 `RENDERED_WITH_VISUAL_REGRESSION` 그대로 유지.
+
+### 반례 검증 (이전 잘못된 fix)
+
+이전에 시도했던 "transform-block padding 6→4 + transform-row padding 3→2" :
+- 본 spec 의 어떤 action 에도 매핑되지 X (`density_reduce` 같은 action 자체가 없음)
+- 따라서 본 spec 기준으로 **자동 반려되는 fix axis** — 들어올 자리 없음
+
+이게 본 spec 이 *visual fix 결정의 검증 자료* 로 작동한다는 증거.
+
+---
+
+## 8. 다음 step (구현 우선순위 — 사용자 결정 영역)
+
+본 spec 정의 후 구현 axis 후보 (사용자가 우선순위 결정):
+
+- A. content_type registry + fit_classifier (분류 layer)
+- B. overflow_router (정책 layer)
+- C. `zone_ratio_retry` action (가장 자주 트리거될 action)
+- D. `details_popup_escalation` (큰 작업 — 새 path)
+- E. `frame_reselect` (V4 top-k 사용 layer)
+
+각 axis 는 *별도 step* 으로 한 단위씩. 한꺼번에 묶지 X.

docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md

@@ -0,0 +1,229 @@
+# Phase Z Frame Style Inventory
+
+> Phase Z 가 계승할 **색감, 여백, 폰트 위계, 표 / 카드 / 다이어그램 스타일, pill / badge, SVG / CSS 구현 힌트** 를 추출하는 인벤토리.
+>
+> ⚠️ 이 문서는 **블록 매핑이 아니다.** Figma frame 은 디자인 레퍼런스 / 구조 패턴 / 슬롯 힌트로 본다 ([`FRAME-INTEGRATION-MAP.md`](FRAME-INTEGRATION-MAP.md) 참조).
+>
+> ⚠️ `Phase Z Target` 컬럼은 **결정이 아니라 후보**. 사용자 승인 후 프로모션 게이트에서 확정.
+
+---
+
+## 1. Source Policy
+
+| 구분 | 위치 | 역할 |
+|---|---|---|
+| **메인 소스** | `figma_to_html_agent/blocks/{figma_id}/` | 32 frame (1171281171 제외) — Phase Z 스타일 추출의 1 차 출처 |
+| **토큰 소스** | `templates/styles/tokens/` | `colors.css` / `spacing.css` / `typography.css` — Phase Z 에서 계승 / 조정 |
+| **legacy 참고** | `templates/blocks/structures/` 등 | Phase Z 의 실제 조립 재료 X. 폐기 / 아카이브 방향. 스타일 / 시각 언어 참고만 |
+
+추출 우선 순위 :
+
+1. **변환 완료 frame** (`index.html` + `flat.md` 보유) — 실제 CSS 관찰 기반 스타일 추출
+2. **미변환 frame** — `Style Elements` / `Extracted Style Hints` / `Phase Z Target` 보류, 변환 완료 후 갱신
+3. **MCP / Figma 직접 조회 사용 X** — `figma_to_html_agent` 의 본업이므로 inventory 작성 단계에서 침범하지 않음
+
+---
+
+## 2. Frame Inventory — 컬럼 정의
+
+| 컬럼 | 의미 |
+|---|---|
+| **Frame** | `FRAME-INTEGRATION-MAP.md` 의 row 번호 (01~32) |
+| **Figma ID** | `figma_to_html_agent/blocks/` 디렉토리 ID |
+| **Layout** | `layouts.yaml` controlled vocabulary |
+| **Style Elements** | frame 안에서 *관찰되는* 스타일 요소 (gradient bar, pill, table header, radial node, soft shadow 등) |
+| **Extracted Style Hints** | Phase Z 에 *계승할* 구체 힌트 (예 : "table header dark fill + white text", "card gap 12~16px") |
+| **Phase Z Target** | **후보** 위치 (예 : `tokens/colors.css`, `styles/frame-patterns/table.css`, `svg-helpers/`). 결정 X |
+| **Asset Notes** | 자산 의존도 / Phase Z 재사용 가능성 (예 : "타이틀 아이콘 PNG 1 개, conclusion box 는 CSS 변환 가능") |
+| **Notes** | cardinality / optional slot / 변형 축 / 기타 |
+
+### 작성 룰
+
+1. **관찰 가능한 값만 작성** — 변환 frame 의 셀은 `flat.md` + `index.html` 에 *실제 있는* 관찰값만 채운다. flat.md 깊이는 frame 마다 다를 수 있고, 빠진 항목 (예 : 변형 축 명시 없음) 은 채우지 않고 비운다. **다른 frame 깊이에 맞추기 위한 추론 / 추측 채움은 하지 않는다.**
+2. **Phase Z Target 후보는 가능한 한 family 단위로 수렴** — 같은 layout family (표 / 카드 / 다이어그램 / 리스트 / banner) 의 frame 들은 동일한 target 파일 후보를 가리키게 작성. variant 차이는 별도 target 으로 쪼개기보다 `Notes` 에 메타로 남긴다. 표기는 항상 `(후보)` 접미사 — "만들 파일" 이 아니라 "수렴 위치 후보" 로 읽히게.
+3. **scale / zoom 은 Notes 에 메타** — Figma 원본 폭이 1280 이 아닐 경우 `flat.md` 의 scale / zoom 값을 그대로 두 (raw px 는 원본 기준). Phase Z slide-body (≈1200×590) 에 적용 시 재계산이 필요하다는 사실을 `Notes` 에 한 줄 기록.
+4. **redescription 금지** — `analysis.md` 의 cardinality / slot / anchor / layout 설명, `FRAME-INTEGRATION-MAP.md` 의 비고 / 검토 상태를 Inventory 에 다시 베끼지 않는다. 같은 정보가 두 문서에 들어가면 drift 위험.
+
+### 미변환 frame 의 셀 표기
+
+- `Style Elements` : *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.*
+- `Extracted Style Hints` / `Asset Notes` / `Notes` : `—`
+- `Phase Z Target` : `TBD after conversion` (단, `reference_only` frame 은 `N/A — reference_only`)
+
+---
+
+## 3. Frame Inventory (32 행)
+
+> 14 변환 완료 frame 은 `flat.md` + `index.html` 관찰 기반 스타일 추출.
+> 18 미변환 frame 은 보일러플레이트 일괄.
+> 작성 룰 #1~4 (위 섹션 2) 준수.
+
+| Frame | Figma ID | Layout | Style Elements | Extracted Style Hints | Phase Z Target | Asset Notes | Notes |
+|---|---|---|---|---|---|---|---|
+| **01** | `1171281172` | `circular-nodes-6` | • 6 원형 노드 absolute 배치 (각 노드 = 배경 원 + 내부 아이콘 + 라벨)<br>• 모든 노드 / 연결선 / 중앙 / 배경 = 이미지 자산 (9 개) | • **2D 다이어그램 패턴** — 노드 좌표 절대 배치<br>• 자산 의존도 매우 큼 — 본 frame 의 시각 구성은 거의 이미지 | svg helpers (helper area 후보, 자산 의존 제한적) | 9 자산 (배경, 중앙, 노드 ×6, 연결선) — 모두 이미지 유지. Phase Z 재현 시 자산 풀 / placeholder 필요 | 원본 1579×981, scale 0.81064. 변형 축 명시 없음 (flat.md sparse) |
+| **02** | `1171281173` | `bullet-cards-4-plus-center` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **03** | `1171281174` | `list-numbered-4` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **04** | `1171281175` | `quadrilateral-relations` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **05** | `1171281176` | `side-card-with-list` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **06** | `1171281177` | `full-page-map-banner` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `N/A — reference_only` | — | — |
+| **07** | `1171281178` | `2col-paired-list` | • 좌 H/W 7 항목 + 우 S/W 6 항목 + 중앙 시스템 원 + 하단 ground 이미지<br>• 16 자산 (배경 / 패널 / 중앙 원 / 장식 아이콘 / 헤더 바 SVG) | • **2D 복합 시스템 구성도 패턴**<br>• 자산 의존도 매우 큼 — Phase Z 재구성 곤란 | `styles/frame-patterns/system-diagram.css` (후보, 자산 의존 제한적) | 16 자산 모두 이미지 유지. Phase Z 재현 시 자산 풀 필수 | 원본 2446×1943, scale 0.52331. 변형 축 명시 없음 (flat.md sparse) |
+| **08** | `1171281179` | `3-section-framework` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **09** | `1171281180` | `list-stacked-vertical` | • 5 pill 행 : `bg: rgba(255,255,255,0.5)`, `border-bottom: 3px solid {color}`, `radius: 30px`, `box-shadow: 2px 4px 5px rgba(0,0,0,0.5)`, `padding: 10px 20px`<br>• pill 색상 5 개 : `#fb5915` / `#e79000` / `#e9a804` / `#919f00` / `#0d6361`<br>• 다이아몬드 stacking : 넓→좁→좁→넓→넓 (좌측 indent 변화)<br>• 타이틀 바 : `#fbd5b9`, `radius: 5px`, shadow<br>• 좌측 아크 장식 SVG (이미지) + 화살표 SVG (`rotate(-90deg)`) | • **pill row + colored bottom border** : 핵심 패턴, 색만 갈아끼우면 N=3~7 동작<br>• **다이아몬드 stacking 패턴** : indent 차이로 시각 리듬<br>• translucent bg + colored border = 부드러운 카테고리 분리 | `styles/frame-patterns/pill-list.css` (후보) + `tokens/colors.css` 5 pill color palette (후보) | 좌측 아크 SVG / 화살표 SVG 2 개 — 이미지 유지. pill 본체는 CSS 변환 완료 | 변형 축 : `items[N=3~7]`, `stacking_pattern` (required), `arc_decoration` / `vertical_label` (optional). 원본 1153×592 (scale 1.11015 — 원본이 1280 보다 작음, zoom up 처리) |
+| **10** | `1171281181` | `radial-diagram-5` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **11** | `1171281182` | `cards-3-category` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **12** | `1171281189` | `cycle-3way-intersection` | • 메인 3 원 (350×350) : outer + inner SVG (Ellipse585~592) + 중앙 라벨 (50px Bold white, `text-shadow: #cc5200`)<br>• 액센트 6 원 (130.9 px) : 한자 라벨 (45px Bold white, 같은 text-shadow)<br>• 사이드 라벨 6 그룹 : 40px Bold + 30px Medium desc<br>• 영역별 heading color : 상단 `#cc5200` / 좌측 `#604f32` / 우측 `#124133`, desc 공통 `#525151`<br>• 장식 RECT : gradient 회전 + `mix-blend-mode: multiply`<br>• 타이틀 : 70px Bold gradient `#000→#883700` | • **3 원 교차 다이어그램** : main 3 + accent 6 으로 영역 표현<br>• **white text + colored text-shadow** : 깊이 부여 효과<br>• **영역별 hue 분리** (`#cc5200` / `#604f32` / `#124133`) — 시각 zone 구분<br>• bg_texture multiply blending — 부드러운 배경 강조<br>• 사이드 라벨 위계 : Bold heading + Medium desc | svg helpers (helper area 후보, 원 / 교차 영역) + `styles/frame-patterns/cycle.css` (후보) + `tokens/colors.css` 영역별 hue palette (후보) | 19 SVG (Ellipse585~603 outer/inner pairs) — 좌표 기반 SVG 재구성 가능. bg_texture PNG 1 개는 이미지 유지 | 변형 축 명시 없음 (메인 3 원 고정 가능성). 원본 2195×1195, scale 0.58312. 수학 : main 350px = 15.94% width / accent 130.9px = 5.96% width |
+| **13** | `1171281190` | `3-column` | • 3 컬럼 (각 690 원본) : 좌 BAR (152.5 px) gradient + 우 본문<br>• BAR gradient 3 가지 : 기술 `#0D78D0→#023056` / 사람 `#FF9A23→#CC5200` / 자연 `#39BE49→#23742C`<br>• 한자 (技術 / 人材 / 天地) : 50px Bold white on bar<br>• 헤딩 : 45px Bold gradient (top / bottom 별도 gradient 2 종)<br>• 본문 : 35px Medium `#3E3523`<br>• 세로 라벨 (rotate 90°) — 옵셔널 메타<br>• 테두리 : 실선 + 점선 SVG | • **3-pillar 카드 패턴** : 동등 카테고리 3 개 (예 : 기술/사람/자연)<br>• **gradient bar + 한자 + heading + body** 조합<br>• **컬럼별 hue rotation** (blue / orange / green) — 의미 차별화<br>• heading 도 gradient (단색 X) — 일관된 시각 언어 | `styles/frame-patterns/three-pillar.css` (후보) + `tokens/colors.css` 3 column gradient palette (후보) | 아이콘 PNG 1 개 + 테두리 SVG 4 개 (CSS border 변환 가능). 자산 의존 적음 | 변형 축 명시 없음 (3 pillar 고정 가능성 큼). 원본 2123×724, scale 0.60290. 수학 : 열 너비 416px / 바 92px after scale |
+| **14** | `1171281191` | `persona-3col` | • 3 컬럼 동일 사이즈 (833×1845 원본) + 각 컬럼 텍스처 BG 이미지<br>• 컬러 오버레이 (opacity 0.80) — 컬럼별 다른 색감 hue<br>• 하단 사진 3 개 : `border-radius: 49~50px`, opacity 0.70<br>• 상단 원형 뱃지 (3 개) : outer + inner 이미지 + 한글 라벨<br>• 라벨 색 hue rotation : 발주자 `#285B4A` / 시공자 `#445A2F` / 설계자 `#743002`<br>• 체크박스 불릿 아이콘 (이미지, 32×32)<br>• 불릿 텍스트 : 40px Medium `#000` | • **3 컬럼 persona / actor 카드 패턴** : 역할별 한 컬럼<br>• **컬럼별 hue rotation** : 같은 톤 안에서 색상만 다르게 (역할 구분)<br>• **타이틀을 원형 뱃지로 표현** — 컬럼 상단 절반 걸침 (overhang)<br>• **사진을 borderless 가 아니라 둥근 corner + opacity 처리** (텍스트 가독성 확보)<br>• **체크박스 불릿** — 토큰화 가능 (Phase Z list-marker 후보) | `styles/frame-patterns/persona-cards.css` (후보) + `tokens/colors.css` 컬럼별 actor hue palette (후보) + svg helpers 원형 뱃지 (helper area 후보) | 다수 이미지 자산 : BG texture (×3), overlay (×3), photo (×3), badge outer/inner (×6), 체크박스 (×20 동일). 사진은 컨텍스트 의존 → Phase Z 에서 placeholder / 사용자 제공 자산 필요. 체크박스는 SVG 단순 대체 가능 | 원본 2601×1927 (대형 frame), scale 0.49213 |
+| **15** | `1171281192` | `policy-4card-plus-list` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **16** | `1171281193` | `quadrant-4` | • 2×2 사분면 (각 1080×270 헤더/푸터바 + 본문)<br>• 헤더/푸터 bar (4 개) : brown gradient (좌측, `270deg, rgba(165,161,150,0.5)→#39321E`) / green gradient (우측, `270deg, rgba(41,107,85,0.5)→#032118`)<br>• Bar 라벨 : 60px Black white + `text-shadow: 0 0 4px #322c1e`<br>• 사분면 헤드라인 : red `#ff0000` 55px Bold (강조)<br>• 본문 : black 42px Regular, bullet list (`<ul><li>`, 텍스트 마커)<br>• 중앙 원 + 영문 인용 (white 55px Bold)<br>• 배경 텍스처 PNG (`border-radius: 50px`, ×4 동일) | • **2×2 quadrant 패턴** : 4 사분면에 헤드라인 + body 쌍 + 헤더/푸터 bar<br>• **bar 색 양극** (brown / green) — 좌·우 의미 구분<br>• **bar text 강한 시각 강조** : 60px Black + text-shadow<br>• **사분면 헤드라인 red** — 문제 / 이슈 강조 패턴<br>• 중앙 원 + 인용 — 결론 표현 (옵셔널)<br>• bullet — `<ul><li>` 텍스트 마커 (이미지 마커 X) | `styles/frame-patterns/quadrant.css` (후보) + `tokens/colors.css` bar gradient + 강조 red (후보) | 배경 텍스처 PNG (×4 동일) + 중앙 원 PNG + bar SVG (×4, CSS gradient 변환 가능). 배경 / 원만 이미지 유지 | 변형 축 : `quadrants[4]` (required, 고정), `bar_labels[4]` (required), `center_quote` / `center_image` / `bg_texture` (optional). 원본 2226×1766, scale 0.57503 |
+| **17** | `1171281194` | `paired-rows-2x2` | • 4 행 (각 좌 pill + 본문 + 분할선 + 우 pill + 본문)<br>• 행 배경 : `border: 3px #60A451`, `radius: 30px`, `bg: rgba(250,237,203,0.15)`<br>• 분할선 : `dashed 2px #60A451` (CSS)<br>• pill 이미지 (R16: 두루마리 곡선) — 좌측 `left:-45.3% width:145.3%` / 우측 `left:0 width:151.25%`<br>• pill 라벨 : 40px Bold white<br>• 본문 : 36px Medium `#0c271e`<br>• 행 교대 pill 회전 : 상행 정상 / 하행 `rotate(180deg)`<br>• 타이틀 : 70px Bold gradient `#CC5200→#883700` | • **paired-rows 패턴** : 좌 / 우 라벨 + body 페어, 분할선 중앙<br>• **두루마리 pill (R16)** : 이미지 기반 곡선 형상 — CSS 재구성 곤란<br>• **상/하 pill 회전 교대** = 시각 리듬<br>• translucent bg + colored border = visual containment<br>• dashed 분할선 = soft separation | `styles/frame-patterns/compare-paired.css` (후보, Frame 18 과 같은 family) + `tokens/colors.css` border / bg color (후보) | 타이틀 아이콘 PNG + 두루마리 pill PNG (R16 frame 배치, CSS 재구성 곤란) + 분할선 SVG (CSS 변환 가능) | 변형 축 : `rows[N=3~6]`, `pill_alternation` 상/하 교대 (required), `pill_image` (required), `bg_border_color: #60A451` (required). 원본 1857×1326, scale 0.68927. **compare-paired family — variant : `paired-rows` (pill alternation)** |
+| **18** | `1171281195` | `compare-rows` | • 타이틀 70px Bold gradient text (`#CC5200 → #883700`) + 아이콘<br>• 서브헤더 pill bar : `linear-gradient(270deg, #285B4A → #4A4026)`, `border-radius: 50px`<br>• 중앙 카테고리 뱃지 12 개 : 같은 gradient (alpha 0.64~0.8), `border-radius: 10px`<br>• 좌·우 텍스트 색 양극 : `#5C3714` (BIM 측, 갈색계) ↔ `#285B4A` (DX 측, 청록계), 40px Bold<br>• 결론 박스 : `#FAEDCB` + `mix-blend-mode: multiply`<br>• 결론 강조 텍스트 : `#AE3607` 55px Bold | • **다행 비교표 패턴** : 좌 (BIM/AS-IS) ↔ 중앙 카테고리 라벨 ↔ 우 (DX/TO-BE) 의 3 컬럼 페어드<br>• **양극 색 표현** : 좌·우를 명도·색상이 다른 두 hue 로 분리 (대비 의도)<br>• **gradient 재사용** : title gradient + bar/badge gradient 가 동일 팔레트 (저채도 그린 + 다크 brown) 변주<br>• **결론 처리** : multiply blending + accent color 로 강조 | `styles/frame-patterns/compare-paired.css` (후보, Frame 17 과 같은 family) + `tokens/colors.css` 의 `--g-title` / `--c-as-is` / `--c-to-be` (후보) + `styles/blocks/conclusion.css` multiply blend (후보) | 타이틀 아이콘 PNG 1 개 (이미지 유지) + 화살표 SVG 1 개 (`rotate(180deg)`, 이미지 유지) + 결론 박스 SVG → CSS 변환 완료 (자산 불필요) | 변형 축 : `rows[N=8~15]` (required), `title` (required), `conclusion` / `arrow_decoration` (optional). 원본 1868×1908, scale 0.68524. **compare-paired family — variant : `vs-center-badge` (좌·우 텍스트 + 중앙 카테고리 라벨 컬럼)** |
+| **19** | `1171281197` | `cards-3-compare` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **20** | `1171281198` | `cards-3-header` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **21** | `1171281201` | `split-panel-diagram` | • 좌 다이어그램 이미지 + 우 4 번호 항목 + 하단 결론 바<br>• 14 자산 (다이어그램 요소 / 번호 뱃지 / 행 바 / 화살표 / 결론 바) — 모두 이미지 유지 | • **split-panel 패턴** (이미지-기반 다이어그램 + 번호 리스트)<br>• 자산 의존 큼 — Phase Z 재구성 시 다이어그램 이미지 제공 필요 | `styles/frame-patterns/split-panel.css` (후보, Frame 22 와 같은 family) | 14 자산 모두 이미지 유지. 다이어그램 이미지 = 핵심 자산 | 변형 축 : `right_items[N=3~6]`, `conclusion_text` (optional). 원본 1889×824, scale 0.67761. flat.md sparse |
+| **22** | `1171281202` | `split-panel-numbered` | • 좌 패널 : 배경 IMG + 카테고리 텍스트 (40px Bold white, text-shadow) + detail (35px Medium black)<br>• 우 패널 : 5 행 (번호 뱃지 IMG + 행 바 IMG + 텍스트 45px Medium `#11231d` + 화살표 IMG `rotate(180deg)`)<br>• 중앙 연결 : 세로 괄호 IMG + 커넥터 IMG<br>• 행 바 (×5 동일 이미지)<br>• 번호 뱃지 (5 개 별개 이미지)<br>• 타이틀 : 70px/50px gradient | • **split-panel + numbered list 패턴** : 좌 카테고리 패널 + 우 번호 항목 페어<br>• 카테고리 텍스트 = text-shadow + white (배경 위 가독성)<br>• 번호 뱃지 + 행 바 + 화살표 = 단위 리스트 행 컴포넌트<br>• 중앙 괄호 / 커넥터 = 좌 ↔ 우 연결 시각화 | `styles/frame-patterns/split-panel.css` (후보, Frame 21 과 같은 family) | 15 자산 (좌측 BG, 타이틀 장식, 구분선 ×3, 세로 괄호, 커넥터, 행 바 ×5 동일, 뱃지 ×5 별개, 화살표 ×5 동일, 타이틀 아이콘) — 모두 이미지 유지 | 변형 축 : `left_categories[N=2~5]`, `right_items[N=3~8]` (required), `bg_image` (required), `bracket_image` (optional). 원본 1863×834, scale 0.68707 |
+| **23** | `1171281203` | `table-2col` | • 열 헤더 bar (3 개) : `#589e8d` (구분/좌) / `#ef7a26` (우), 40px Bold white<br>• 행 배경 교대 : white / `rgba(253,198,158,0.16)`<br>• 강조 키워드 : `#a14101` Bold inline<br>• 본문 : black 40px Medium<br>• 그리드 라인 : 모두 CSS border<br>• 배경 텍스처 PNG (상단 / 하단 분할) | • **compare-table 패턴** (구분 컬럼 + N 열 비교)<br>• **헤더 bar 색상 양극** (`#589e8d` 청록 / `#ef7a26` 오렌지) — 의미 구분<br>• **행 alternating bg** = readability<br>• **강조 키워드 inline color** (`#a14101`) — 표 셀 안 강조 | `styles/frame-patterns/compare-table.css` (후보, Frame 24 와 같은 family) + `tokens/colors.css` 헤더 bar palette (후보) | 배경 PNG 2 개 + 아이콘 PNG + line SVG ×5 (모두 CSS border 변환). 배경 PNG 만 이미지 유지 | 변형 축 : `columns[2]`, `rows[N=3~7]` (required), `header_colors[2]` (required), `bg_images[2]` (optional). 원본 1924×2014, scale 0.66527. **table family — Frame 24 / 30 / 31 과 column 수 / 행 수만 다름, variant 통합 후보** |
+| **24** | `1171281204` | `table-3col` | • 열 헤더 bar (4 개) : `#589e8d` (구분/상용) / `rgba(62,53,35,0.9)` (3rd) / `#ef7a26` (전용), 40px Bold white<br>• 행 배경 교대 : white / `rgba(253,198,158,0.16)`<br>• 강조 키워드 : `#a14101` Bold inline<br>• 본문 : black 35px Medium<br>• 그리드 라인 : 모두 CSS border<br>• 행 라벨 (좌측 열) : 35px Bold | • **compare-table 패턴** (Frame 23 의 3-column variant — 같은 family)<br>• **헤더 색상 3-way** (`#589e8d` / 다크 brown / `#ef7a26`) — Frame 23 의 2-way 확장<br>• **행 라벨 좌측 열** = 행 그룹 식별자 (예 : 개념 / 개발주체 / 성과품 / 사용) | `styles/frame-patterns/compare-table.css` (후보, Frame 23 과 같은 family — variant: `columns[N=2~4]`) + `tokens/colors.css` 헤더 bar palette 확장 (후보) | 아이콘 PNG + line SVG ×8 (전부 CSS border 변환). 자산 의존 거의 없음 | 변형 축 : `columns[N=2~4]`, `rows[N=3~6]` (required), `header_colors[N]` (required), `highlight_color` (optional, default `#a14101`). 원본 1869×1926, scale 0.68511. **table family — Frame 23 / 30 / 31 과 variant 통합 후보** |
+| **25** | `1171281205` | `left-categories-right-logos` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **26** | `1171281206` | `cards-4-grid` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **27** | `1171281208` | `central-split-synthesis` | • 좌 (생산성 향상) + 우 (디지털 전환) + 중앙 원 (건설산업의 고부가가치화)<br>• 상단 헤더 bar / 하단 결론 bar (SVG `rotate(180deg)`)<br>• 2D 배치 (중앙 원 좌 / 우 영역 겹침) → absolute + zoom | • **split-center 패턴** : 좌 / 우 / 중앙 3-area 합성<br>• 중앙 원 = 좌·우 영역에 걸침 (overhang) — 결론 표현 방식 | `styles/frame-patterns/split-center.css` (후보) | 변환 완료 (preview.png 존재). 자산 상세 미기록 (flat.md sparse) | 원본 1697×914, scale 0.75427. flat.md sparse — 추가 관찰 필요 |
+| **28** | `1171281209` | `title-plus-3-emphasis` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **29** | `1171281210` | `banner-top-2col-bottom` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **30** | `1171281211` | `table-3col` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **31** | `1171281212` | `table-3col` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+| **32** | `1171281213` | `central-5-goals` | *미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.* | — | `TBD after conversion` | — | — |
+
+---
+
+## 4. Token Inventory
+
+> 14 변환 frame 에서 관찰된 값과 기존 `templates/styles/tokens/` 의 매칭 검증.
+>
+> ⚠️ **본 inventory 는 신규 발굴표가 아니라 *기존 token 검증 + gap 발견 + 보류* 정리표**.
+> ⚠️ 추출 / 검증만. 실제 token 파일 생성 / 변경 / 폐기는 별도 승인 단계.
+
+### 작성 룰 (최종 6 개)
+
+1. **2+ frame 에서 반복 관찰된 값만 행 승격**.
+2. **1 frame 에서만 관찰된 값은 Token Inventory 에 올리지 않음** — 해당 Frame Inventory 의 `Notes` 에 "관찰 보류 (single-frame)" 로만 남김.
+3. **패턴 / 기법은 token 이 아니라 family CSS / variant 영역** — `mix-blend-mode`, R16 pill 곡선, hue rotation, badge overhang, pill alternation 등.
+4. **타이포 / 스페이싱은 값 직접 매칭이 아니라 위계 매핑** — figma raw px (frame 1280 폭 기준) ↔ slide-body token (slide-body 스케일) 은 스케일이 다르므로 위계만.
+5. **gradient 는 from / to pair 단위 한 행**.
+6. **`covered` 는 hex 정확 일치일 때만** — 부분 일치 / 변형은 `gap_candidate` 또는 Notes 에 별도 표기.
+
+### 명명 컨벤션 (가벼운 가이드)
+
+신규 token 후보에만 적용. 기존 token (`--color-*`, `--font-*`, `--space-*`, `--card-*`) 은 그대로 사용.
+
+- `--c-*` color
+- `--g-*` gradient
+- `--fs-*` font-size
+- `--sp-*` spacing
+- `--r-*` radius
+- `--sh-*` shadow
+
+### 컬럼 정의
+
+| 컬럼 | 의미 |
+|---|---|
+| **Token Category** | color / gradient / typography / spacing / radius / shadow |
+| **Existing Token** | `templates/styles/tokens/{file}` 의 token 명. 없으면 `—` |
+| **Covered Frame Observations** | frame 번호 + 짧은 컨텍스트 라벨만 (값 X). status 에 따라 의미 다름 (아래 참조) |
+| **Gap / Candidate** | 신규 token 후보 (이름 + 값 + `(후보)`). 기존 token 검증인 행은 `—` |
+| **Status** | `covered` / `gap_candidate` / `hierarchy_mapping_only` / `hold_recheck_after_conversion` |
+| **Notes** | family CSS cross-reference + 변형 메타 + scale 경계 등 |
+
+### `Covered Frame Observations` 셀의 Status 별 의미
+
+| Status | `Covered Frame Observations` 의 의미 |
+|---|---|
+| `covered` | 이 token 이 *cover 한* frame 들 (hex 정확 일치) |
+| `gap_candidate` | 이 후보가 *target 으로 하는* frame 들 (2+ frame 에서 동일 값 관찰) |
+| `hierarchy_mapping_only` | 이 위계 매핑이 *적용 가능한* frame 들 (값 직접 매칭 X) |
+| `hold_recheck_after_conversion` | 현재 cover 한 frame 없음 (`—`). 14 converted 기준 미관찰 — 전체 변환 후 재검증 |
+
+### Token Inventory — 18 행
+
+| Token Category | Existing Token | Covered Frame Observations | Gap / Candidate | Status | Notes |
+|---|---|---|---|---|---|
+| gradient | `--color-block-title-from` / `--color-block-title-to` (`#CC5200` / `#883700`) | F17, F18 (frame inner title) | — | `covered` | compare-paired family 의 title gradient slot. F12, F13 의 title 은 `from` 이 `#000` 으로 변형 — 별도 행 (`gap_candidate`) 처리 |
+| gradient | `--color-col-1-from` / `--color-col-1-to` (`#0D78D0` / `#023056`) | F13 (기술 bar — blue tone) | — | `covered` | three-pillar.css 의 column 1. 1 frame 매칭이지만 token 자체가 frame 값을 정확 흡수 |
+| gradient | `--color-col-2-from` / `--color-col-2-to` (`#FF9A23` / `#CC5200`) | F13 (사람 bar — orange tone) | — | `covered` | three-pillar.css 의 column 2. `#CC5200` 는 title gradient `from` 과 같은 hex 이지만 의미 다름 (column-2 끝값) |
+| gradient | `--color-col-3-from` / `--color-col-3-to` (`#39BE49` / `#23742C`) | F13 (자연 bar — green tone) | — | `covered` | three-pillar.css 의 column 3 |
+| color | `--color-compare-left` (`#5c3714`) | F18 (BIM / AS-IS 측 텍스트) | — | `covered` | compare-paired.css 의 좌측 / AS-IS 색 |
+| color | `--color-compare-right` (`#285b4a`) | F14 (발주자 라벨), F18 (DX / TO-BE 측 텍스트) | — | `covered` | compare-paired.css 의 우측 / TO-BE + persona-cards.css 의 actor 색. F14, F18 모두 hex 정확 일치 (대소문자 제외) — 의미 다르지만 token 재사용 가능 |
+| color | `--color-compare-badge` (`#ae3607`) | F18 (결론 강조 / VS 뱃지) | — | `covered` | compare-paired.css 의 결론 / VS 뱃지 강조색 |
+| gradient | — | F12, F13 (title — `#000` → `#883700`) | `--g-title-dark: linear-gradient(#000, #883700)` (후보) | `gap_candidate` | title gradient 변종 (`from` 이 `#000`). `--color-block-title-to` 와 끝값 공유 — 신규 token 으로 묶을지 / variant 처리할지 검토. 영향 family : 미정 (cycle.css / three-pillar.css) |
+| color | — | F23, F24 (table 헤더 좌 / 구분 — 청록 톤) | `--c-table-header-cyan: #589e8d` (후보) | `gap_candidate` | compare-table.css 의 좌측 / 구분 헤더. 기존 `--color-table-header-bg: #64748b` (회색) 과 다른 톤 — 회색 헤더 token 은 `hold` 행 참조 |
+| color | — | F23, F24 (table 헤더 우 / 전용 — 오렌지 톤) | `--c-table-header-orange: #ef7a26` (후보) | `gap_candidate` | compare-table.css 의 우측 헤더 |
+| color | — | F23, F24 (table 행 강조 키워드) | `--c-table-highlight: #a14101` (후보) | `gap_candidate` | compare-table.css 의 inline 강조색 |
+| color | — | F23, F24 (table 행 교대 배경) | `--c-table-row-alt: rgba(253,198,158,0.16)` (후보) | `gap_candidate` | compare-table.css 의 alternating row bg. white / `--c-table-row-alt` 교대 |
+| typography | `--font-slide-title` (22px) / `--font-zone-title` (13px) / `--font-sub-title` (12px) | F12, F13, F17, F18 (frame inner title — raw 70px Bold) | — | `hierarchy_mapping_only` | frame raw 70px 는 figma 1280 폭 기준 — slide-body 스케일과 다름. **위계 매핑만**. frame inner title 이 slide-body 안에서 어느 위계 (`--font-zone-title` / `--font-sub-title`) 로 매핑될지는 catalog 설계 단계 결정 |
+| typography | `--font-body` (11px) | F12, F13, F16, F17, F18, F22, F23, F24 (본문 — raw 35~42px Medium) | — | `hierarchy_mapping_only` | frame raw 35~42px 는 figma 1280 폭 기준. slide-body 안에서는 `--font-body` 위계 적용 |
+| spacing / radius | `--space-md` / `--space-lg` / `--card-radius` 등 | F09 (pill `radius: 30px`), F16 (배경 `radius: 50px`), F17 (행 `radius: 30px`), F18 (badge `radius: 10px`, pill `radius: 50px`), F23/F24 (셀 padding) | — | `hierarchy_mapping_only` | frame raw radius / gap / padding 은 figma 폭 기준. slide-body 안에서는 위계 매핑 + 재산정 필요 |
+| color | `--color-dark-card-1` (`#1a365d`) / `-2` (`#1e3a2f`) / `-3` (`#3b1f2b`) / `-title` (`#fbbf24`) / `-body` (`#e2e8f0`) | — | — | `hold_recheck_after_conversion` | 다크 카드 시각 시스템 5 token. 14 converted 기준 미관찰. 전체 32 frame 변환 후 재검증 (특히 미변환 zone_extract 18 개) |
+| color | `--color-pill-bg` (`#1e293b`) / `--color-pill-text` (`#ffffff`) | — | — | `hold_recheck_after_conversion` | 다크 pill 스타일. F09 pill (translucent + colored border) / F18 badge (gradient) 와 다른 톤. 14 converted 기준 미관찰 — 전체 변환 후 재검증 |
+| color | `--color-table-header-bg` (`#64748b`) / `--color-table-header-text` (`#ffffff`) | — | — | `hold_recheck_after_conversion` | 회색계 표 헤더. F23 / F24 의 colored 헤더 (`#589e8d` / `#ef7a26`) 와 다른 톤. 14 converted 기준 미관찰. 향후 회색 헤더 frame 등장 시 재검증 |
+
+---
+
+## 5. Legacy Reference
+
+- legacy structures 6 개는 runtime 재사용 후보 X
+- frame 변환본 (`figma_to_html_agent/blocks/`) 이 우선 source
+- disposition 분류 목적은 archive / delete 판단
+- Phase Z catalog / runtime 설계 근거로 **직접 사용 X**
+
+### 발견 — 6 파일 모두 frame 변환본의 *slide-body 스케일 재구현*
+
+각 legacy file 의 헤더 주석에 `Source: figma_to_html_agent/blocks/{figma_id}` 명시 (확인). figma 변환 (raw 1280 폭, 40~70px 폰트) → slide-body 스케일 (`var(--font-sub-title)` 12px, `var(--space-sm)` 8px 등 token 적용) 재구현 시도. 즉 *figma 변환과 별개의 legacy* 가 아니라, *figma 변환에서 파생된 slide-body 스케일 시도*.
+
+→ Phase Z runtime 은 frame catalog + family CSS 로 rebuild 예정. legacy structures 는 *변환 검증 증거 / 토큰 매핑 참고* 외 직접 사용 X.
+
+### `Phase Z Disposition` 값
+
+- `archive` — 보존 (스타일 / 토큰 매핑 증거 가치)
+- `delete_after_extract` — Style Note 추출 후 삭제
+- `hold_until_catalog_ready` — Phase Z catalog 안정화 전까지 유지
+
+### Legacy Reference — 6 행
+
+| Legacy File | Current Role | Phase Z Disposition | Style Note | Notes |
+|---|---|---|---|---|
+| `compare-table-2col.html` | F23 (`1171281203`) 의 slide-body 스케일 재구현. 표 헤더 colored / 행 교대 bg / 강조 inline color | `delete_after_extract` (후보) | inline hex (`#589e8d` / `#ef7a26` / `#a14101` / `rgba(253,198,158,0.16)`) 가 Token Inventory 의 `gap_candidate` 4 행과 정확 일치 | `compare-table.css` family 의 first reference 가치 |
+| `compare-table-3col.html` | F24 (`1171281204`) 의 3-column variant slide-body 재구현 | `delete_after_extract` (후보) | F23 과 같은 hex + 추가 `rgba(62,53,35,0.9)` (column 2 어두운 brown 헤더). 단일 frame 관찰값 — Token Inventory 비승격 (룰 #2) | `compare-table.css` family variant — F23 과 통합 후보 |
+| `compare-vs-rows.html` | F18 (`1171281195`) 의 slide-body 재구현 | `delete_after_extract` (후보) | `var(--color-compare-left)` / `var(--color-compare-right)` 기존 token 활용 — covered token 검증 증거 | `compare-paired.css` family |
+| `issues-paired-rows.html` | F17 (`1171281194`) 의 slide-body 재구현 | `delete_after_extract` (후보) | `--color-row-border: #60A451` inline 정의 — F17 단일 frame 관찰값, Token Inventory 비승격 (룰 #2). family CSS variant 처리 검토 | `compare-paired.css` family |
+| `prerequisites-3col.html` | F13 (`1171281190`) 의 slide-body 재구현 | `delete_after_extract` (후보) | `--color-col-N-{from,to}` 기존 token 활용 가능 — covered token 검증 증거 | `three-pillar.css` family |
+| `stacked-arrow-list.html` | F09 (`1171281180`) 의 slide-body 재구현 | `delete_after_extract` (후보) | 타이틀 바 `#fbd5b9` / 텍스트 `#144838` inline — F09 단일 frame 관찰값, Token Inventory 비승격 (룰 #2) | `pill-list.css` family |
+
+---
+
+## 6. 진행 단계
+
+| 단계 | 상태 |
+|---|---|
+| 33 frame ↔ Integration Map 32 행 대조 | ✅ 완료 (`FRAME-INTEGRATION-MAP.md` row 21~28 ID 정정 반영) |
+| Inventory 골격 + 샘플 5 행 (이 문서) | ✅ 본 단계 |
+| 사용자 검토 | ⬜ |
+| Frame Inventory 27 행 일괄 확장 (32 frame 완성) | ⬜ |
+| Token Inventory 본격 작성 | ⬜ |
+| Legacy Reference 본격 작성 | ⬜ |
+| Phase Z catalog / runtime template 설계 | ⬜ (별도 단계) |
+| 사용자 승인 → `templates/blocks/` 신규 구조 교체 (프로모션 게이트) | ⬜ (별도 단계) |
+
+### 샘플 5 검증 포인트
+
+| 검증 항목 | 결과 |
+|---|---|
+| 변환 / 미변환 frame 이 같은 양식에 들어가는가 | ✅ — 미변환은 `Style Elements` 셀 1 개에 통일 보일러플레이트, 나머지 4 셀은 `—` (`Phase Z Target` 만 `TBD after conversion` 또는 `N/A — reference_only`) |
+| `Style Elements` 와 `Extracted Style Hints` 의 구분이 명확한가 | ✅ (Frame 18, 14) — 관찰 사실 (CSS 값 / 픽셀) vs 계승 의도 (패턴 / 의미) |
+| `Phase Z Target` 후보 표현이 통일되는가 | ✅ — 변환 frame 은 "(후보)" 명시, 미변환은 `TBD after conversion`, reference_only 는 `N/A — reference_only` |
+| 미변환 frame 이 `analysis.md` 내용을 redescribe 하지 않는가 | ✅ — 보일러플레이트 1 행 외 어떤 redescription 도 없음 |
+| 변환 frame 의 `Notes` 가 스타일 계승에 의미 있는 메타만 담는가 | ⚠️ 샘플은 적정. 32 행 확장 시 단순 출처 (Scale 값, "대표 frame" 등) 는 추가로 정리 필요 |
+
+---
+
+## 7. 부록 — 제외 / 특수 항목
+
+`figma_to_html_agent/blocks/` 의 33 개 디렉토리 중 `1171281171` 은 본 인벤토리 메인 32 frame 에서 제외한다 (`texts.md` 만 존재, `index.html` / `analysis.md` 없음, 정체 미확인). 상세는 [`FRAME-INTEGRATION-MAP.md` 부록](FRAME-INTEGRATION-MAP.md#부록--제외--특수-항목) 참조.

docs/architecture/PHASE-Z-MATCHING-ARCHITECTURE.md

@@ -0,0 +1,206 @@
+# Phase Z 매칭 아키텍처 — 원칙 anchor
+
+> 22-step pipeline 의 *매칭 layer* (Step 5/6/7 + B-axis Step 9/10/11) 를 다루는 *원칙 anchor* doc.
+>
+> 본 문서는 *새 디자인 생성* 이 아니라 *기존 코드 / 과거 docs / 관찰 사례 / session 인사이트* 를 근거로 한 *forward improvement consolidation*.
+>
+> 관련 anchors :
+> - `docs/architecture/PHASE-Z-PIPELINE-OVERVIEW.md` (D1, 22-step pipeline)
+> - `docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md` (D2, Layer A/B SPEC)
+> - `docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-PLAN.md` (D3, schema completion plan)
+> - `docs/architecture/PHASE-Z-PIPELINE-STATUS-BOARD.md` (D4, 현재 status)
+
+
+## §0. 본 문서의 작성 방법론 (P0)
+
+**evidence-based forward improvement** — 매번 *4 source* 를 거쳐 도출 :
+
+1. 과거 docs (D1 / D2 / D3 / D4) — *원래 의도*
+2. 현재 코드 (`src/phase_z2_*.py` / `templates/phase_z2/catalog/frame_contracts.yaml`) — *실제 동작*
+3. 관찰된 혼선 / 실패 사례 — *경험적 evidence*
+4. session 인사이트 — *최근 정리된 mental model*
+
+이걸 *관찰 → 혼선 → 도출 원칙 → 개선 방향* form 으로 표면화. *과거 회귀* 가 아니라 *과거를 근거로 한 개선*. *감으로 결정* / *가장 쉬운 선택* 금지.
+
+
+## §1. 현재 코드 상태 (관찰)
+
+### 1.1 매칭 단위 — `CompositionUnit`
+
+매칭의 *atomic unit* 은 section 이 아니라 `CompositionUnit`. `src/phase_z2_composition.py` 의 `collect_candidates` 가 *3 종 candidate type* 을 동시 생성 :
+
+- `single` — `src/phase_z2_composition.py:230-243` (1 section 단독)
+- `parent_merged` — `src/phase_z2_composition.py:260-273` (parent 자체가 V4 매칭, children 묶음)
+- `parent_merged_inferred` — `src/phase_z2_composition.py:352-368` (children rep_match 기반 inferred merge)
+
+각 candidate 는 `source_section_ids[]` + `merge_type` (line 232 / 262 / 354) 로 *어떤 section 들을 어떻게 묶었는지* 표현.
+
+### 1.2 frame 선택 — render path authority = V4 rank-1
+
+현재 render path 의 `frame_template_id` 는 composition planner 의 *V4 rank-1* 기반 :
+- `lookup_v4_match()` in `src/phase_z2_pipeline.py` (D1:212 명시) — rank-1 만 반환
+- composition planner 가 V4 결과로 candidate 생성
+
+B4 (`src/phase_z2_placement_planner.py:90-107` 의 `_select_frame`) 도 frame selection 을 *수행* 하지만 *trace-only* — render path authority 는 V4 rank-1.
+
+V4 = `top-k` 선언만 됐고 *rank-1 사용* 만 활성. D4 의 ⚠ partial.
+
+### 1.3 binding — `phase_z2_mapper.map_with_contract` (Layer 1)
+
+`src/phase_z2_mapper.py:584-609` 의 `map_with_contract(section, contract)` 는 contract 에서 *오직* 두 field 만 read :
+- `contract["source_shape"]` (split 규칙)
+- `contract["payload"]["builder"]` (named PAYLOAD_BUILDERS dispatch)
+
+`accepted_content_types` / `sub_zones` 등 Layer 2 field 는 *접근 X*. 즉 mapper 는 *Layer 1 binder* 로 격리.
+
+### 1.4 placement — `phase_z2_placement_planner` (Layer 2 reader, trace-only)
+
+`src/phase_z2_placement_planner.py` :
+- `_select_frame` (90-107) — `accepted_content_types ⊇ content_type_set` cover + declaration order first
+- `_assign_region_to_sub_zone` (113-151) — `sub_zones` 의 narrowest-accepts first
+- `plan_placement` (157+) — Stage A (B2 internal regions) + Stage B (region ↔ sub_zone) 통합
+
+B4 는 *Layer 2 reader* 이지만 `src/phase_z2_pipeline.py:1060-1145` 에서 *trace-only* 로만 호출. render path (slot_payload 생성) 미연결. D4:78-83 의 *render path placement_trace 미사용* 과 일치.
+
+### 1.5 capacity / fit — classifier (post-render telemetry)
+
+`src/phase_z2_classifier.py` 의 `classify_visual_runtime_check` — *render 후* visual measurement 기반 fit 판정. *Architectural reframe* (D2:16-33 의 PLANNING / RENDER / POST-RENDER 3-layer) : A1~A4 = *post-render telemetry layer*. *덜 중요* 가 아니라 *위치가 다름*. 매칭 결정 자체에는 직접 입력 X (현재).
+
+
+## §2. 확인된 혼선 (resolution)
+
+### 2.1 Sub-zone 용어 4-방향 충돌 → 4-tier 분리 (P5'')
+
+session 안 누적 혼선 :
+- D1 의 "Zone (top / bottom_l / bottom_r 등)"
+- composition.py 의 child unit 분리 (single / parent_merged 등)
+- yaml 의 `sub_zones` field
+- 사용자 mental model 의 "### split"
+
+→ *4 tier 별 명칭 lock* :
+
+| Tier | 명칭 | 위치 | 정체 |
+|---|---|---|---|
+| 1 | **Layout** | slide-level | slide-body 안 zone topology (8-preset vocabulary) |
+| 2 | **Zone** | layout 안 | 콘텐츠 구역 (top / bottom_l / bottom_r 등). 1 frame 매칭 단위 |
+| 3 | **Split Zone (Child Unit)** | zone 안 | composition planner 가 만든 child unit (parent_merged 의 분리 단위) |
+| 4 | **Frame Slot** | frame 안 | yaml 의 `sub_zones` = Layer B placement target. region 매칭 대상 |
+
+이후 본 문서 / 후속 doc 은 *위 명칭 어휘* 만 사용. yaml field `sub_zones` 는 *기존 이름 유지하되 의미 = Frame Slot* 으로 lock (mechanical rename 은 D3 plan).
+
+### 2.2 composition tie-break ≠ Frame Slot tie-break
+
+scope-lock 단계에서 *D2:524-533 의 tie-break* 을 *composition tie-break evidence* 로 잘못 분류. 실제로는 :
+- D2:524-533 = *Frame Slot 단위* tie-break (Stage B 안, frame 이미 선택된 후)
+- composition tie-break = `composition.py:433-441` (sort + greedy + coverage)
+
+두 layer 가 다름. P7 evidence 는 *composition layer* 만, *Frame Slot layer* 는 별개 location.
+
+### 2.3 "Layer 2 미사용" framing 오류
+
+scope-lock 초안의 *"mapper 가 Layer 2 를 consume 안 함"* framing 은 암묵적으로 *mapper 가 Layer 2 reader 가 돼야 한다* 의 fix direction 함의. 실제 architectural intent :
+- mapper = Layer 1 binder (의도된 격리)
+- B4 = Layer 2 reader (의도된 분리)
+
+*문제* 는 *Layer 2 unconsumed* 가 아니라 *B4 의 Layer 2 read 가 trace-only 라 render path 까지 안 닿음*. *bridge* 가 답이지 *mapper 확장* 이 아님.
+
+### 2.4 Step 4/5/9 분리 미완
+
+현재 구현은 D1 이 의도한 *Step 4 → Step 5 → Step 9* 분리가 완성되지 않음 :
+- Step 4 (composition planning input — section_layout_signature / content_object 구조) = *partial/dormant* (D4:73 의 ⚠ partial transition)
+- Step 5 evidence 와 Step 9 final selection = *conflate* (D1:255)
+
+D1:185 가 명시적으로 *Step 4 가 frame matching 보다 먼저 와야 함* 을 지적.
+
+
+## §3. 도출된 원칙
+
+### P1 : 매칭 단위 = `CompositionUnit` (section 아님)
+
+- *근거* : `composition.py:230-243` (single) / `:260-273` (parent_merged) / `:352-368` (parent_merged_inferred). 각 line `:232` / `:262` / `:354` 가 `merge_type` signal
+- *함의* : *MDX section* 을 1:1 zone 매칭 단위로 가정하는 코드 / doc 는 모두 *추상화 누락*. *CompositionUnit* 으로 통일.
+
+### P3 : frame 선택 / content binding *layer 분리*
+
+- *근거* : 현재 코드의 *de facto* 분리 (mapper §1.3 + placement_planner §1.4)
+- *원칙* : frame *선택* (어떤 frame 을 쓸지) 과 content *binding* (선택된 frame 에 콘텐츠를 어떻게 채울지) 는 *별개 axis*. 함께 결정하면 search space 가 곱셈으로 폭발 + 실패 격리 불가.
+- *함의* : 어떤 axis 가 frame 을 *결정* 하는지 + 어떤 axis 가 *binding* 하는지 *명시적 분리* — 한 module 이 둘 다 하면 회귀 위험.
+
+### P5'' : 4-tier terminology lock
+
+§2.1 표 그대로. *후속 doc / commit message / 코드 docstring* 모두 4-tier 어휘만 사용.
+
+### P7 : candidate-based composition (sequential A/B 아님)
+
+- *근거* :
+  - 원리 : `docs/architecture/PHASE-Z-PIPELINE-OVERVIEW.md:216-218` ("child 따로 / sibling 묶기 / parent 단위" + scoring inputs)
+  - 구현 : `composition.py:230-243` / `:260-273` / `:352-368` (3 candidate type 동시 생성)
+  - 선택 : `composition.py:433-441` (`(score desc, source_section_ids count desc)` + greedy covered skip)
+- *원칙* : composition 은 "## → fail → ### split → re-merge" sequential 이 아니라 *3 candidate type 을 동시 생성 → score + coverage tie-break* 의 *parallel evaluation*.
+- D2:524-533 은 *Frame Slot tie-break (Stage B)* 로 본 P7 evidence 와 *별도 layer*.
+
+### P8 : staged migration — frame 선택 authority + binding 진화 분리
+
+#### P8-a (near-term)
+
+- *목표* : frame selection authority 정리 (V4 rank-1 단독 → B4 informant 또는 B4-mediated 의 *어떤 형태*)
+- *유지* : mapper binding channel (PAYLOAD_BUILDERS) — 현재 working channel 안전
+- *open* : B4 결과를 render path frame selection 에 *어떻게 반영* 할지의 bridge 형태 → §5 의 Q-V4B4 / Q-LB 에서 별도 scope-lock
+
+#### P8-b (longer-term, *지금 결정 X*)
+
+- region / Frame Slot-aware slot_payload 진화
+- PLACEMENT_PAYLOAD_BUILDERS 등 별도 namespace 가능성
+- *DC2 Open question (Q-LB) 해결 후* 결정. 본 문서 시점에서는 *deferred*.
+
+
+## §4. 코드 변경 결정 지점
+
+### DC1 : Step 4/5/9 분리 미완
+
+- *현 상태* : D1 의도한 Step 4 → Step 5 → Step 9 분리가 완성되지 않음. Step 4 (composition planning input — section_layout_signature / content_object 구조) 는 *partial/dormant* (D4:73 의 ⚠ partial), Step 5 evidence 와 Step 9 final selection 은 *conflate* (D1:255).
+- *결정 지점* :
+  - Step 4 가 frame matching *전* 에 composition candidate 평가 input 으로 흘러야 (D1:185 명시적 지적)
+  - Step 5 evidence layer 와 Step 9 final selection layer 의 *명시적 분리* 필요
+- *영향 module* : `src/phase_z2_pipeline.py` orchestrator + `src/phase_z2_composition.py` (input 확장)
+
+### DC2-a : `phase_z2_mapper` = Layer 1 working channel
+
+- *현 상태* : `src/phase_z2_mapper.py:584-609` 가 `source_shape` + `payload.builder` 만 read. *현재 render path 의 유일 working channel*.
+- *결정 지점* : *Layer 1 격리 유지*. mapper 에 Layer 2 read 를 추가하는 방향은 *반대* — 실제 의도는 별 axis (DC2-b + Open question Q-LB).
+
+### DC2-b : `phase_z2_placement_planner` = Layer 2 reader, render path 미연결
+
+- *현 상태* : `src/phase_z2_placement_planner.py:90-107` (accepted_content_types) + `:113-151` (sub_zones) — Layer 2 read 활성. 그러나 `src/phase_z2_pipeline.py:1060-1145` 에서 *trace-only*. final render 미연결.
+- *결정 지점* : Layer 2 read 결과를 render path 에 *어떻게 합류시킬지* 의 bridge 결정 — §5 의 Q-LB 에서 별도 scope-lock.
+
+### DC3 : Internal Region runtime — trace-only partial
+
+- *현 상태* : SPEC v1 (D2) 가 Internal Region (Layer A) / Frame Slot (Layer B) 의 layered placement 정의. Layer A runtime 은 *trace-only partial* — `src/phase_z2_placement_planner.py:157+` 의 `plan_placement` 가 Stage A 호출 (`:192-197` 의 `plan_internal_regions` call) 수행하지만, 결과가 render path 미합류. *부재* 가 아니라 *render path authority 미연결*. D4:73 의 ⚠ partial 분류와 일치.
+- *결정 지점* : Layer A planning telemetry 활성 단계 → render path 합류 단계의 *separate axis*. P8-b 와 연관 (slot_payload 진화 이전 단계).
+
+
+## §5. open scope-lock questions
+
+본 axis 범위 *밖* 의 deferred 결정. 후속 axis 에서 각각 별도로 lock.
+
+### Q-FW : 4 filter score weight / threshold
+- F1 frame internal fit / F2 child frame divergence / F3 content type-structure match / F4 content loss risk 의 *score weight* 와 *auto vs review threshold* 결정 필요.
+
+### Q-CO : candidate priority tie-break
+- composition.py:433 의 `(score, source_section_ids count)` 외에 *추가 axis* (cardinality_fit / hierarchy_coherence / density) 도입 시점.
+
+### Q-RT : review / adapter_needed threshold
+- W1/W2/W3 신호 + auto_selectable=False candidate 의 review surface 정책.
+
+### Q-V4B4 : V4 → B4 frame selection authority transition timing
+- P8-a 의 *언제* — V4 단독 / B4 informant / B4-mediated 의 단계.
+
+### Q-LB : Layer 1 ↔ Layer 2 bridge architecture
+- DC2-b 의 *어떻게* — mapper direct consume / B4-mediated integration / 별도 translator. Q-V4B4 와 연관되나 *별개 layer* (frame 선택 timing vs Layer 2 → render path bridge 구조).
+
+### Q-CE : catalog extension surface
+- frame_contracts.yaml 에 신규 frame 추가 시 *어떤 layer 부터 채워야 self-consistent* 인지의 declarative form.
+
+### Q-DT : decision trace 표준 form
+- composition / placement / fit_classification 의 trace 통합 schema. 현재 각각 다른 dict 구조.

docs/architecture/PHASE-Z-OVERLAY-SCHEMA.md

@@ -0,0 +1,177 @@
+# Phase Z Overlay Schema (Option E first migration)
+
+**Status**: Step 0 schema lock — pre-execution spec.
+**Scope**: F13 / F29 / F16 only (3 active Phase Z frames).
+**Last updated**: 2026-05-07.
+
+---
+
+## 0. Why this doc exists
+
+`templates/phase_z2/catalog/frame_contracts.yaml` is currently a hand-curated island. It must be hand-edited whenever a Phase Z frame's slot/sub_zone/payload structure changes, even though most of its sibling Phase Z artifacts (V4 matching results, `structure_ontology.yaml` `templates_v1` section, `figma_to_html_agent/blocks/{frame_id}/analysis.md`) are auto-generated from upstream sources.
+
+Option E first migration converts `frame_contracts.yaml` to a **generated artifact**:
+
+```
+runtime_overlay/{template_id}.yaml  (per-template Phase Z fields, hand-edited)
+  +
+templates_v1[frame_id]              (cross-validation only in first migration)
+  ↓
+build_phase_z2_frame_contracts.py   (generator)
+  ↓
+templates/phase_z2/catalog/frame_contracts.yaml  (committed, generated)
+  ↓
+Phase Z runtime (unchanged — reads frame_contracts.yaml the same way)
+```
+
+This doc locks the schema/keyspace/trigger/rollback rules **before** any overlay file or generator code is written.
+
+---
+
+## 0-1. Field owner table
+
+Each field in current `frame_contracts.yaml` is classified as one of:
+
+- **(a) templates_v1-derived** — generator looks up from `tests/matching/structure_ontology.yaml` `templates_v1` section. **Not declared in overlay.**
+- **(b) overlay-only** — Phase Z 전용 operational config. **Declared in `runtime_overlay/{template_id}.yaml`.**
+- **(c) validation duplicate** — generator cross-checks overlay value against `templates_v1`. Disagreement → hard error.
+
+### F13 — three_parallel_requirements (frame_id 1171281190)
+
+| Field | Current value | Category | Note |
+|---|---|---|---|
+| `template_id` | `three_parallel_requirements` | (c) | overlay filename = template_id; cross-check `templates_v1['1171281190'].template_id` |
+| `frame_id` | `1171281190` | (b) | overlay declares; generator confirms it exists as a `templates_v1` key |
+| `family` | `three_parallel` | (b) | Phase Z categorization. Not the same as `templates_v1.visual_pattern.family` (= `list`) — different semantic axis. Name overlap is incidental. |
+| `source_shape` | `top_bullets` | (b) | Phase Z B1 extractor signal. Not in `templates_v1`. |
+| `cardinality.strict` | `3` | (c) | cross-check against `templates_v1.visual_pattern.cardinality` — must equal `min` (and `max` if min==max). |
+| `cardinality.overflow_policy` | `abort_or_review` | (b) | Phase Z fallback policy. |
+| `role_order` | `[tech, people, nature]` | (b) | F13-specific visual role mapping. Not in `templates_v1`. |
+| `visual_hints.min_height_px` | `230` | (b) | Phase Z layout calculation. Not in `templates_v1`. |
+| `accepted_content_types` | `[text_block]` | (b) | SPEC v1 §3 Layer A→B input. Not in `templates_v1`. |
+| `sub_zones` | `[pillar_1, pillar_2, pillar_3]` (with `partial_target_path`) | (b) | Phase Z Frame Slot declaration. Conceptually overlaps with `templates_v1.slots` (`pillar_*_label/body`) but different shape (sub_zones = column units; slots = label+body pairs). |
+| `payload.*` | `{title, builder, builder_options}` | (b) | Phase Z mapper directives. Not in `templates_v1`. |
+
+### F29 — process_product_two_way (frame_id 1171281210)
+
+| Field | Current value | Category | Note |
+|---|---|---|---|
+| `template_id` | `process_product_two_way` | (c) | filename = template_id; cross-check |
+| `frame_id` | `1171281210` | (b) | |
+| `family` | `two_column_h3` | (b) | `templates_v1.visual_pattern.family` = `compare`; intentionally different |
+| `source_shape` | `h3_subsections` | (b) | F29-specific B1 path |
+| `cardinality.strict` | `2` | (c) | cross-check against `templates_v1.visual_pattern.cardinality.{ideal:2, min:2, max:2}` |
+| `cardinality.overflow_policy` | `abort_or_review` | (b) | |
+| `visual_hints.min_height_px` | `345` | (b) | |
+| `accepted_content_types` | `[text_block, transform_table]` | (b) | F29 process column accepts AS-IS/TO-BE table |
+| `sub_zones` | `[process_column, product_column]` (each `cardinality.strict: 3`) | (b) | 2 column × 3 sections; sub_zone unit = column |
+| `payload.*` | `{title, builder=process_product_pair, builder_options}` | (b) | |
+
+### F16 — bim_issues_quadrant_four (frame_id 1171281193)
+
+| Field | Current value | Category | Note |
+|---|---|---|---|
+| `template_id` | `bim_issues_quadrant_four` | (c) | |
+| `frame_id` | `1171281193` | (b) | |
+| `family` | `bim_issues_quadrant` | (b) | `templates_v1.visual_pattern.family` = `cards` |
+| `source_shape` | `top_bullets` | (b) | |
+| `cardinality.strict` | **(not declared)** | n/a | F16 intentionally omits — uses `pad_to=4` + `truncate>4` policy in `payload.builder_options`. `templates_v1.cardinality` has `{ideal:4, min:4, max:4}` but Phase Z does not enforce strict here. **Generator must NOT auto-derive this from `templates_v1`.** |
+| `accepted_content_types` | `[text_block]` | (b) | |
+| `sub_zones` | `[quadrant_1, quadrant_2, quadrant_3, quadrant_4]` (each `cardinality.strict: 1`) | (b) | sub_zone-level cardinality = capacity; not the same as frame-level |
+| `payload.*` | `{title, builder=quadrant_flat_slots, builder_options.{item_parser, pad_to, truncate_at, label_key_pattern, body_key_pattern, empty_label, empty_body}}` | (b) | |
+
+### Summary
+
+- **(a) templates_v1-derived**: **none** in first migration. Overlay declares all operational config.
+- **(b) overlay-only**: ~all fields. Overlay file is essentially a per-template extract of the current `frame_contracts.yaml` entry.
+- **(c) validation duplicate**: 2 fields per template — `template_id` (overlay filename matches `templates_v1[frame_id].template_id`) and `cardinality.strict` when present (must match `templates_v1.visual_pattern.cardinality.min`).
+
+**Implication**: first migration is mostly a **split-and-concatenate** refactor with light cross-validation. Migration value is (i) per-template editing isolation, (ii) `templates_v1` consistency check at build time. Heavier derivation (e.g., generating `cardinality.strict` from `templates_v1` automatically) is **별 axis** — defer until a concrete need surfaces.
+
+---
+
+## 0-2. Duplicate rule — hard error
+
+If an overlay file declares a field that is classified as **(a) templates_v1-derived**, generator **fails immediately** with a clear message. No silent override semantics.
+
+Currently no fields are in (a), so this rule is dormant for first migration. It exists to prevent regression: a future overlay author cannot quietly duplicate a `templates_v1`-owned field without removing the (a) classification first.
+
+For **(c) validation duplicate** fields, the rule is:
+
+- Overlay declares the value.
+- Generator looks up the corresponding value in `templates_v1`.
+- If the two **disagree**, hard error with both values printed and a pointer to this doc.
+
+This preserves the lock-layer "overlay = single source of truth for declared values" while making `templates_v1` drift visible.
+
+---
+
+## 0-3. Keyspace rule
+
+- **Source ref** = `frame_id` (Figma origin).
+- **Overlay identity** = `template_id` (filename: `runtime_overlay/{template_id}.yaml`).
+- **First-migration assumption**: `frame_id` ↔ `template_id` is **1:1** for all active Phase Z frames (F13/F29/F16).
+- **Generator verification**: for each overlay, the generator looks up `templates_v1[overlay.frame_id].template_id` and asserts it equals the overlay filename's `{template_id}`. Mismatch → hard error.
+- **Multi-variant** (one frame ↔ multiple templates) = **별 axis**. When that case appears, this doc is updated and the keyspace becomes a composite key. Until then, 1:1 is locked.
+
+---
+
+## 0-4. Trigger
+
+- **Manual run** for first migration:
+  ```
+  python scripts/build_phase_z2_frame_contracts.py
+  ```
+- **Verification** (semantic-identical) is **required** after each run. Generator should refuse to write output if the result differs semantically from current `frame_contracts.yaml` during first migration.
+- **CI / pre-commit automation** = **별 axis**. Will be considered after first migration ships and a drift incident actually occurs. Adding it now is over-engineering for 3 templates.
+
+---
+
+## 0-5. Rollback / failure path
+
+If `semantic-identical` verification fails (`yaml.safe_load(current) != yaml.safe_load(generated)`):
+
+1. **Generated artifact is NOT adopted.** No write to `frame_contracts.yaml`.
+2. Current `frame_contracts.yaml` remains canonical (status quo preserved).
+3. Diff source: overlay schema, generator implementation, or `templates_v1` cross-check rule. Identify root cause.
+4. Fix overlay/schema/generator. Retry from Step 1.
+5. **Migration is incomplete**: 3 active templates partially migrated count as failure — either all 3 ship or none.
+
+The migration commit (Step 5) is **only made after** all 3 templates pass both (a) semantic-identical and (b) Phase Z runtime regression (final.html identical).
+
+---
+
+## 0-6. Scope boundary
+
+**Option E first migration solves**:
+- `frame_contracts.yaml` island problem (hand-curated → generated).
+- Per-template editing isolation.
+- Light `templates_v1` consistency check at build time.
+
+**Option E first migration does NOT solve** (= 별 axis, NOT addressed by this migration):
+
+- `analysis.md` ↔ `structure_ontology.yaml` ownership direction conflict. Specifically: `figma_to_html_agent/CLAUDE.md` implies forward direction (agent owns `analysis.md`), while `tests/matching/sync_analysis_from_ontology.py` enforces reverse direction (`structure_ontology.yaml` is source, `analysis.md` is mirror). This is a separate architectural decision and is out of scope here.
+- `templates/blocks/structures` legacy retirement.
+- `legacy templates/catalog/blocks.yaml` removal.
+- `zone_extract` rule formalization (long-term zone_application policy).
+- 32-frame full audit (only active F13/F29/F16 in first migration).
+
+When the user resumes work on the direction inversion axis, this doc is **not invalidated** — overlay schema and generator continue to work because they read `templates_v1` (not `analysis.md`).
+
+---
+
+## Migration steps (post-Step 0)
+
+1. Create `templates/phase_z2/catalog/runtime_overlay/{F13,F29,F16}.yaml` files. Each contains the (b) overlay-only fields + (c) validation duplicate values for one template.
+2. Write `scripts/build_phase_z2_frame_contracts.py` generator. Reads overlays + `templates_v1`, applies 0-2 / 0-3 rules, writes generated `frame_contracts.yaml`.
+3. Run generator. Verify `yaml.safe_load(current) == yaml.safe_load(generated)`. List order preserved (sub_zones especially). On disagreement → 0-5 rollback.
+4. Run Phase Z pipeline once (regression MDX) — confirm `final.html` is byte-identical to current run.
+5. Commit Option E migration (overlay files + generator + new generated `frame_contracts.yaml` with header). Separate commit from Step 0 schema doc.
+
+---
+
+## Out of scope for this doc
+
+- Generator implementation details (parsing, emit format, error message templates) — captured in the script itself.
+- Overlay file format details beyond field categorization — captured in the overlay files themselves.
+- Direction inversion fixes — see future axis docs.

docs/architecture/PHASE-Z-PIPELINE-OVERVIEW.md

@@ -0,0 +1,476 @@
+# Phase Z — master pipeline overview
+
+**Status** : 마스터 reference (2026-04-30 잠금). 본 문서 = *워크플로우 전체 도면*. 향후 모든 작업은 *이 22-step 도면의 어느 위치에 속하는지* 먼저 self-locate 해야 함.
+
+**용도** :
+- 새 작업 시작 시 — "지금 하는 게 22-step 중 어느 step 인가" 식별
+- 새 spec / memory rule 추가 시 — "어느 step 의 어느 의사결정에 적용되는가" 매핑
+- 새 sample / 새 frame 추가 시 — "어디서 막힐 가능성이 높은가" 사전 예측
+
+**본 문서가 *하지 않는* 것** :
+- 새 구현 제안 X
+- next step 추천 X
+- 우선순위 결정 X
+- A/B/C 선택지 X
+- specific MDX sample 분석 X
+
+본 문서는 *기준점*. 의사결정은 별도 step 에서.
+
+---
+
+## 3-block 구조
+
+전체 22 step 은 다음 3 block 으로 grouping :
+
+| Block | Step 범위 | 역할 |
+|---|---|---|
+| **A. PRE-RENDER PLANNING** | 0 — 12 | render *전* 모든 결정 — *slide-level zone 분배* + *zone-internal region 분배* + frame / slot 매핑. *진짜 fit policy 의 중심* |
+| **B. RENDER** | 13 | Jinja2 + frame partial → final.html |
+| **C. POST-RENDER TELEMETRY / EXCEPTION HANDLING** | 14 — 22 | render 결과 검증 + 분류 + routing + status. *exception 처리 layer* |
+
+**중요** : 진짜 fit policy 의 자리는 A block (composition planning). C block (telemetry) 은 *exception 처리 + 진단 안내* layer. 둘 다 필요하지만 *위치가 다름*.
+
+---
+
+## 위계 + 용어 (entity hierarchy)
+
+본 파이프라인은 다음 entity 위계 위에서 동작 :
+
+> **Lock phrase (canonical)** : `Slide → Zone → Internal Region → Frame → Frame Slot → Content`
+
+```
+Slide
+ └─ Zone               (slide-level layout 이 만든 큰 영역)
+     └─ Internal Region (zone *내부* 영역, frame *밖*)
+         └─ Frame       (Figma design 단위)
+             └─ Frame Slot (frame *내부* 자리)
+                 └─ Content unit (text / table / image / details / ...)
+```
+
+### Universal Region Model
+
+> **Lock phrase (canonical)** :
+> `Every Zone has 1+ Internal Regions.`
+> `text-only zone = single-region.`
+> `mixed-content zone = multi-region.`
+
+```
+모든 Zone 은 1 개 이상의 Internal Region 을 가짐.
+
+  text-only zone      = single-region zone (현 거동의 자연 표현)
+  mixed-content zone  = multi-region zone
+
+각 Internal Region 은 *자기만의* :
+  - frame match
+  - display strategy (inline / preview+details / popup-only / dropped)
+을 가질 수 있음.
+```
+
+text-only section 도 *single-region zone* 으로 표현 (= 현 거동 보존). mixed-content (text + table / text + image / 등) 은 *multi-region zone* 으로 확장. region 이 *first-class entity* — special case 가 아님.
+
+### 용어 표
+
+| 용어 | 의미 | 위치 |
+|---|---|---|
+| **Slide** | 1280×720 한 장 | 최상위 |
+| **Zone** | slide-level layout 이 만든 큰 영역 (top / bottom / left / right 등) | Slide 안 |
+| **Internal Region** | Zone *내부* 영역, frame *밖*. content type 기반 분할 (text region / table region / image region / details region) | Zone 안 |
+| **Frame** | Figma design 단위 (= F13 / F29 / F16 등) | Internal Region 안 |
+| **Frame Slot** | frame *내부* 자리 (= pillar_1 / quadrant_1 / process_column 등) | Frame 안 |
+| **Content unit** | MDX section 안의 typed 콘텐츠 조각 (text_block / table / image / details / ...) | Frame Slot 에 배치 |
+
+> **주의** : `PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md` 의 `sub_zones` (YAML 필드명) 은 본 표의 *Frame Slot (Layer B)* 의미로 정의되어 있음. 본 표의 *Internal Region (Layer A)* 는 SPEC v1 §2 에 정의됨.
+
+---
+
+## Operating Principles / Hard Locks
+
+본 섹션 = *anchor / index*. 각 원칙의 상세 정의 / 적용 룰 / 예외 처리는 *referenced source* 에 있음. drift 방지를 위해 OVERVIEW 는 *짧은 anchor* 로만 둠.
+
+### 1. MDX mapping convention
+
+| MDX | 슬라이드 |
+|---|---|
+| `# 대목차 제목` | `slide-title` |
+| `# 대목차 결론` / note | `slide-footer` |
+| `##` / `###` 본문 | `slide-body` 안 (layout + zone + region + frame + slot) |
+| `<details>` | 별도 details layer |
+
+> 참조 : `CLAUDE.md` 의 *MDX → 슬라이드 매핑* 표
+
+### 2. 자유 디자인 금지
+
+Figma frame DB / catalog / frame contract 기반으로만 디자인 결정. *임의 HTML / CSS 디자인 생성 X*. AI 가 frame 자체 / layout 자체 / 새 디자인 패턴을 *생성하지 않음*.
+
+> 참조 : `CLAUDE.md` 디자인 원칙 + `feedback_no_hardcoding` + `feedback_blocks_must_be_css`
+
+### 3. 원문 무손실
+
+MDX 원문 *삭제 / 요약 / 압축 금지*. AI 호출이 normal path 에서 콘텐츠를 *재작성하지 않음*. 원문은 본문 preview 또는 details/popup 어딘가에 *반드시* 보존.
+
+> 참조 : `feedback_ai_isolation_contract` + `PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md` §5.2
+
+### 4. 그릇 변경 원칙 (positive form)
+
+콘텐츠가 안 맞을 때 *콘텐츠를 줄이지 않음*. 대신 *그릇* (layout / zone / internal region / frame / display strategy) 을 변경하여 수용. 공통 CSS / padding / tolerance 임의 축소는 *그릇 변경* 이 아님 → 금지.
+
+> 참조 : `feedback_phase_z_spacing_direction`
+
+### 5. preview / details 원칙
+
+inline preview = 원문의 *일부* 만 빌려 보여주는 것. 원문은 details / popup 에 *반드시* 보존. preview 자체가 원문을 대체하지 않음.
+
+> 참조 : `PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md` §5.1 / §5.5
+
+---
+
+## Heritage / Current State (참고)
+
+본 섹션 = 시간 따라 변할 수 있는 *history / state* 기록. *원칙* 아님. frame DB 확장 / vocabulary 진화 시 mechanical 갱신.
+
+### 1. Type A / B / B' / B'' → 8-layout vocabulary 진화
+
+기존 *Type A / B / B' / B''* 의 4 preset 은 사라진 게 아니라 **8-layout vocabulary** (single / horizontal-2 / vertical-2 / top-1-bottom-2 / top-2-bottom-1 / left-1-right-2 / left-2-right-1 / grid-2x2) 로 *일반화* 된 *전신*. Step 7 의 8 vocabulary 는 이 진화의 결과.
+
+### 2. 현재 runtime-verified frame set 은 text-frame 중심
+
+현재 *runtime contract-registered / verified* frame set = `F13` (three_parallel_requirements) / `F29` (process_product_two_way) / `F16` (bim_issues_quadrant_four) — *모두 text 전용 성격*. `figma_to_html_agent/blocks` 의 전체 frame inventory 가 image / table / mixed frame 을 얼마나 포함하는지는 *전수 audit 전까지 미확정*. 따라서 현재 runtime 기준 :
+
+- *text region* → frame 매칭 (현 거동)
+- *image region* / *table region* / *details region* → 현재 contract-registered frame set 안에서는 frame 매칭 근거가 부족하므로 *display strategy* 로 처리 (image area 직접 배치 / table preview / details button 등)
+
+**Step 9 의 region 단위 매칭은 현재 *runtime-verified frame set 기준으로 text region 만 frame 매칭 가능*** 함을 인지. 전체 frame inventory audit 또는 contract 등록 상태가 바뀌면 본 항목은 갱신 대상.
+
+---
+
+## 22-step 상세
+
+각 step 의 형식 :
+> **Step N. 이름** — purpose (1-2 줄)
+> **Status** : ✅ implemented / ⚠ partial / ❌ missing
+> **Code 위치** : (해당 시)
+> **Gap** : (해당 시)
+
+### Block A — PRE-RENDER PLANNING
+
+#### Step 0. 사전 준비
+파이프라인 가동 전 준비되어 있어야 하는 정적 자료들. catalog / contract / matching data / template / asset.
+
+- **포함** : Figma/BEP frame → HTML 변환물 / frame catalog / frame contract / V4 matching data + ontology / slide-base template / render assets
+- **frame contract 필수 필드** : frame_id, template_id, accepted_content_types, slots, sub_zones, capacity, visual_hints, asset paths
+- **Status** : ⚠ partial
+- **Code 위치** : `templates/phase_z2/catalog/frame_contracts.yaml` / `tests/matching/v4_full32_result.yaml` / `templates/phase_z2/slide_base.html` / `templates/phase_z2/families/*.html` / `figma_to_html_agent/blocks/`
+- **Gap** : `accepted_content_types` 와 `sub_zones` 필드 contract 에 미선언. *visual_hints* 는 일부만 (min_height_px). *density envelope* 미선언.
+
+#### Step 1. MDX 업로드
+사용자 MDX 파일 입력. 목표 : *MDX 1 → 자동 슬라이드 1 장*.
+
+- **Status** : ✅ implemented
+- **Code 위치** : `src/phase_z2_pipeline.py` 의 CLI entry (`run_phase_z2_mvp1(mdx_path, run_id)`)
+
+#### Step 2. MDX 정규화
+업로드된 MDX 를 파이프라인 표준 구조로 변환. frontmatter 분리 / slide title / heading tree / section id / 대중소 목차 관계 / note·footer·details 분리 / **raw content 보존**.
+
+- **Status** : ⚠ partial
+- **Code 위치** : `parse_mdx()` (frontmatter, ## sections, footer 추출) + `align_sections_to_v4_granularity()` (### drilling)
+- **Gap** : heading tree 자체는 미생성 (현재 flat list). note / details 분리 미완. 대중소 목차 관계도 implicit. 정규화 결과가 *단순 문자열 + section_id* 수준 — heading tree 가 있는 *정규화 MDX 모델* 이 아직 아님.
+
+#### Step 3. Content Object 추출
+각 section 의 raw content 를 type 별 객체로 분해. text_block / bullet_list / numbered_list / table / image / diagram / jsx_block / note / details / long_original. *MDX 원문 보존, AI 요약 X*.
+
+- **Status** : ❌ missing
+- **Cross-reference** : `docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md` §1 (content_object 정규화 schema)
+
+#### Step 4. Section Internal Composition Planning
+각 section 을 어떻게 다룰지 결정 — *whole-section 단일 frame 매칭* / *child-section grouping* / *content-type split* 의 3-way decision. split 인 경우 *Internal Region* 들로 분해 + region 비율 산정. **이 단계가 frame matching 보다 *먼저* 와야 함**.
+
+- **3-way decision** :
+  ```
+  section 전체 → 1 frame 매칭 가능?
+     ├ YES → whole-section frame match (single-region zone)
+     └ NO  → child-section grouping 가능?
+              ├ YES → group merge → 1 frame 매칭 (single-region zone)
+              └ NO  → content-type split
+                      → text region / table region / image region / details region
+                      → region 비율 산정 (예: text 80% / table 20%)
+                      → multi-region zone
+  ```
+- **출력** :
+  - `section_layout_signature` = text_only / text_plus_table / text_plus_image / table_heavy / image_with_caption / mixed_visual_text / details_heavy
+  - `composition_decision` = whole / group / split
+  - `internal_regions` (split 인 경우) = [{region_id, role, content_type, ratio_estimate}, ...]
+- **Status** : ❌ missing
+- **Cross-reference** : `docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md` §2 (Internal Region schema, Layer A — entity / Universal Region Model / 3-way decision tree / 비율 산정 / topology vocabulary / region → frame·display interface). §1 의 content_object size_estimate / role 도 입력 자료.
+
+#### Step 5. Matching Evidence 생성
+정규화된 section + layout need 기반으로 V4 매칭 evidence 수집. *최종 선택이 아니라 후보 evidence*.
+
+- **대상** : 소목차 section / 중목차 parent / 필요 시 sibling group 후보
+- **V4 출력** : top-k frame candidates (frame_id, template_id, confidence, label, axes score)
+- **Label** : use_as_is / light_edit / restructure / reject
+- **Status** : ⚠ partial
+- **Code 위치** : `lookup_v4_match()` in `phase_z2_pipeline.py`
+- **Gap** : 현재 *rank-1 만* 반환. top-k 사용 안 됨. sibling group 후보도 없음.
+- **Note (사용자 잠금 2026-05-08)** : Step 5 axis = *non-reject max-6 후보 list* 로 보완 (rank-1 → top-N). raw 32 entry 는 `v4_full32_result.yaml` 영속, `step05_v4_evidence.json` = 정제 list. `lookup_v4_match()` 유지 (Step 6 backward compat). Step 9 application_plan input.
+
+#### Step 6. Composition Planning
+어떤 MDX 덩어리를 하나의 *slide-level zone unit* 으로 볼지 결정. child 따로 / sibling 묶기 / parent 단위.
+
+- **판단 기준** : heading 관계 / content_object 구조 / section_layout_signature / V4 top-k evidence / frame compatibility / capacity fit / content density
+- **Status** : ⚠ partial
+- **Code 위치** : `src/phase_z2_composition.py` (`plan_composition`, `parent_merged_inferred`, `capacity_fit` integration)
+- **Gap** : section_layout_signature / content_object 구조 input 부재 (step 3, 4 가 없어서). frame compatibility 도 rank-1 매칭만 활용.
+- **Note (사용자 잠금 2026-05-08)** : Step 6 = *6-A 박힘*. **6-A** (additive, logic 무변) = `CompositionUnit` 에 `v4_candidates: list[V4Match]` 필드 추가, 기존 단일 frame 필드는 `candidates[0]` 호환 유지 (✓ 박힘).
+- **Note (사용자 잠금 2026-05-08 #2)** : **6-B (frame ownership transfer) 폐기 = misframed axis**. 정정된 mental model = *V4 가 frame 선택, Step 6 은 V4 rank-1 을 default 로 전사, Step 9 는 V4 후보를 application_plan 으로 번역*. Step 6 은 frame 채택 책임을 *원래부터 안 가짐* — 따라서 "Step 6 frame 채택 책임 → Step 9 이전" = 허구. 6-B 의 *실제 가능한 코드 변화* = MVP1_ALLOWED_STATUSES binary gate 위치 결정 → 이건 별 axis (label gate policy 재검토). 자세한 사유 = `PHASE-Z-CHANGE-LOG.md` 2026-05-08 #2 entry.
+
+#### Step 7. Slide-Level Layout Planning
+composition unit 개수와 성격을 보고 slide 전체 layout 선택. *기존 Type A/B/B'/B'' 의 후속 — 8-vocabulary 로 명시화*.
+
+- **8 layout vocabulary** : single, horizontal-2, vertical-2, top-1-bottom-2, top-2-bottom-1, left-1-right-2, left-2-right-1, grid-2x2
+- **Status** : ⚠ partial
+- **Code 위치** : `src/phase_z2_composition.py` 의 `select_layout_preset()` + `LAYOUT_PRESETS`
+- **Gap** : 현재 *count-based 만* (1→single, 2→horizontal-2, 3→top-1-bottom-2, 4→grid-2x2). "성격" (content_object 분포 / section_layout_signature) 미반영. 8 preset 중 horizontal-2 + single 만 실제 검증됨.
+
+#### Step 8. Zone + Internal Region Ratio Planning
+선택된 layout 안에서 각 zone 의 크기 / 비율 결정 + 각 zone *내부의* Internal Region 비율 결정. *두 단계 ratio* 산정 (zone-level + region-level). *50/50 고정 X*. *slide-base / title / divider / footer / gap 임의 축소 금지*.
+
+- **두 단계 ratio** :
+  - zone-level : layout 의 각 zone 크기 (slide-body 안 분배)
+  - region-level : 각 zone 안 Internal Region 비율 (single-region 이면 100%, multi-region 이면 Step 4 의 ratio_estimate)
+- **기준** : composition unit 중요도 / content_object 분량 / text·table·image 비중 / frame aspect / capacity / min·max zone / region 별 content type
+- **Status** : ⚠ partial
+- **Code 위치** : `compute_zone_layout()` (min_height + content_weight 분배) + `build_layout_css()` in `phase_z2_pipeline.py`
+- **Gap** : horizontal-2 만 zone-level dynamic. 나머지 7 preset 은 fr-default. **region-level ratio 미구현** (Internal Region 자체가 Step 4 부재로 입력 X). content_object 분량 기반 정밀화 미반영.
+
+#### Step 9. Region-Level Frame / Display Selection
+각 *Internal Region* 에 들어갈 frame 또는 display strategy 확정. step 5 evidence 위에 composition / layout / region 제약 반영해 *최종* 선택. *unit of analysis = region*. single-region zone 은 자연스럽게 zone 1:1 frame 선택과 같음.
+
+- **region 별 처리** :
+  - text region → text frame 매칭 (현 runtime-verified contract set 기준 F13 / F29 / F16 등)
+  - table region → table preview / details / table frame
+  - image region → image area / image frame
+  - details region → details / popup 전용 region
+- **Label 처리** (region 단위) :
+  - use_as_is → deterministic slot mapping
+  - light_edit → 같은 frame contract 유지, minor adaptation 가능
+  - restructure → frame 후보 유지하되 content-to-slot 재배치 proposal 필요
+  - reject → 자동 적용 X
+- **Status** : ⚠ partial — *step 5 와 분리되지 않음 + region-level 미구현 (zone 단위 만)*
+- **Code 위치** : `plan_composition()` 이 V4 rank-1 즉시 선택 (step 5 와 conflate, zone 단위)
+- **Gap** : top-k 활용 / composition 제약 반영한 final 단계가 없음. *region-level 매칭 부재* (현재 zone 단위만). restructure label 은 현재 *filter* (선택 X). MVP1_ALLOWED_STATUSES = {matched_zone, adapt_matched_zone} 만 통과.
+- **Note (사용자 잠금 2026-05-08)** : Step 9 = **application_plan reframe**. V4 후보 (Step 5) + layout 후보 (Step 7-B) + region/display 후보 (Step 8-B-1/2) 통합 적용 계획. *V4 axis 재계산 X* — V4 의 anchor / cardinality / relation / slot / content 산식은 Step 5 에서 끝남. Step 9 = V4 label (use_as_is / light_edit / restructure / reject) → application_mode (direct_insert / same_frame_with_adjustment / layout_or_region_change / exclude) 변환 + layout/region/display 통합. 폐기 안 = "compat 매트릭스" (region × frame slot count) — V4 cardinality 재계산 위험 (PHASE-Z-CHANGE-LOG.md 2026-05-08 entry 참조).
+
+#### Step 10. Frame Contract 확인
+선택된 frame 의 contract 읽어서 accepted_content_types / slots / sub_zones / cardinality / capacity / visual_hints / density envelope / asset 확인.
+
+- **Status** : ⚠ partial
+- **Code 위치** : `get_contract()` + `frame_contracts.yaml` (F13/F29/F16)
+- **Gap** : `accepted_content_types` 미선언. `sub_zones` 미선언. `density envelope` 미선언.
+- **Cross-reference** : `docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md` §3 (frame contract + Frame Slot, Layer B)
+
+#### Step 11. Content Unit / Child Group → Internal Region → Frame Slot Mapping
+각 zone 안에서 *Internal Region 별로* content unit 또는 child group 을 배치 → 그 region 의 frame 내부 *Frame Slot* 에 매핑. 표 작으면 inline / 크면 preview + 자세히보기 / image aspect 유지 / 긴 원문 details / text capacity 내.
+
+- **2 단계 매핑** :
+  - Layer A : content unit / child group → Internal Region (Step 4 의 region 분할 결과 소비)
+  - Layer B : Internal Region 안 → Frame Slot (frame contract 의 sub_zone 선언 소비)
+- **Status** : ❌ missing
+- **Cross-reference** : `docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md` §4 (placement algorithm 2-stage: Stage A → Stage B) + §5 (display strategy). *해당 SPEC 의 `sub_zones` (YAML 필드명) = Frame Slot (Layer B). Internal Region (Layer A) 는 §2 에 정의됨.*
+
+#### Step 12. Slot Payload 생성
+frame partial 에 주입할 데이터 생성. *deterministic mapper* 가 기본. *AI 는 normal path 에 없음*.
+
+- **AI 가능 위치 (제한적)** : light_edit / restructure 에서 content_object → slot 배치 proposal 필요 시
+- **AI 금지** : MDX 원문 요약·삭제 / HTML·CSS 직접 생성 / 새 디자인 임의 / layout·frame 임의 선택
+- **Status** : ✅ implemented (deterministic 부분)
+- **Code 위치** : `src/phase_z2_mapper.py` (`map_with_contract`, PAYLOAD_BUILDERS, ITEM_PARSERS)
+- **Gap** : restructure label 의 AI proposal path 미구현 (현재 restructure 는 filter). content_object → sub_zone 매핑이 step 11 부재로 *implicit*.
+
+### Block B — RENDER
+
+#### Step 13. Render
+Jinja2 로 HTML 생성. **고정** : slide-base / slide size / title / divider / footer / slide-body. **가변** : layout / zone ratio / frame partial / slot payload / assets.
+
+- **산출** : final.html / assets/ / debug.json / preview.png
+- **Status** : ✅ implemented
+- **Code 위치** : `render_slide()` in `phase_z2_pipeline.py` + `templates/phase_z2/slide_base.html` + `templates/phase_z2/families/*.html`
+
+### Block C — POST-RENDER TELEMETRY / EXCEPTION HANDLING
+
+> 본 block 의 핵심 — *A block (planning) 이 정밀하면 거의 trigger 안 일어남*. 이상적으로 대기 상태. exception 케이스의 *진단 + 다음 capability 안내*.
+
+#### Step 14. Selenium Visual Runtime Check
+브라우저 렌더링 기준 실제 결과 검사. slide size / zone overflow / frame internal clipping / text·table·image clipping / content truncation.
+
+- **Status** : ⚠ partial
+- **Code 위치** : `run_overflow_check()` in `phase_z2_pipeline.py`
+- **Gap** : 현재 *text / structural element overflow* 만 검사. image aspect mismatch / table clipping / under-fill 검사 미구현. clipped_inner 의 inner_content_signals 는 추가됨 (A1 step).
+
+#### Step 15. Fit Classification
+visual fail 발생 시 원인 분류.
+
+- **카테고리** : minor_overflow / structural_minor_overflow / structural_major_overflow / tabular_overflow / image_aspect_mismatch / frame_capacity_mismatch / layout_zone_mismatch / hard_visual_fail
+- **Status** : ✅ implemented (text / structural 도메인)
+- **Code 위치** : `src/phase_z2_classifier.py` (`classify_visual_runtime_check`, `CONTENT_TYPE_PATTERNS`)
+- **Cross-reference** : `docs/architecture/PHASE-Z-FIT-CLASSIFIER-ROUTER-SPEC.md` §1 / §2 / §3
+- **Gap** : image_aspect_mismatch / tabular_overflow 분류는 정의됐지만 *실제 trigger 가 step 14 의 검사 부재로 일어나지 않음*.
+
+#### Step 16. Overflow Router
+fit classification 결과를 action 후보로 매핑.
+
+- **매핑 예** : structural_minor_overflow → zone_ratio_retry / tabular_overflow → details_popup_candidate / image_aspect_mismatch → image_fit_candidate / frame_capacity_mismatch → frame_internal_fit_candidate
+- **Status** : ✅ implemented
+- **Code 위치** : `src/phase_z2_router.py` (`route_fit_classification`, `ACTION_BY_CATEGORY`)
+- **Cross-reference** : `docs/architecture/PHASE-Z-FIT-CLASSIFIER-ROUTER-SPEC.md` §4
+
+#### Step 17. Implemented Action 실행
+구현된 action 만 실행. retry budget 제한 / 성공시만 final.html promote / 실패 candidate 는 final.html 아님 / 공통 CSS·padding·tolerance 변경 X / MDX 내용 삭제·요약 X.
+
+- **Status** : ⚠ partial
+- **Implemented** : `zone_ratio_retry` (A3)
+- **Code 위치** : `src/phase_z2_retry.py` (`plan_zone_ratio_retry`, `apply_retry_to_layout_css`) + `_attempt_zone_ratio_retry` orchestrator in `phase_z2_pipeline.py`
+- **Missing actions** : `layout_adjust` / `frame_reselect` / `details_popup_escalation` / `image_fit_candidate` / `frame_internal_fit_candidate`
+- **Note (사용자 잠금)** : `frame_internal_fit_candidate` 가 *허용할 수 있는 내부 sub-mechanism* (density envelope / line rhythm / internal grid row / text block allocation 등) 은 *frame contract 가 declare 한 envelope 안* 에서만 동작하는 *내부 영역*. **별도 action label 로 등재하지 않음** — `density_adjust_candidate` 같은 이름은 *공통 CSS/padding 축소 antipattern* 을 초대할 위험이 있어 *unified label `frame_internal_fit_candidate` 하나* 로 묶음.
+
+#### Step 18. Failure Classification
+action 실패 시 원인 분류.
+
+- **Failure types** : donor_slack_insufficient / no_donor_candidates / rerender_still_fails / not_attempted
+- **Status** : ✅ implemented
+- **Code 위치** : `src/phase_z2_failure_router.py` (`classify_retry_failure`, `FAILURE_TYPE_DESCRIPTIONS`)
+
+#### Step 19. Next Action Proposal
+실패 원인 + 원래 overflow severity *함께* 보고 다음 후보 기록. failure_type 단독 X. **overflow_category + line_equivalent + failure_type 의 결합**으로 결정.
+
+- **예시 (severity-aware)** :
+  - structural_minor_overflow + donor_slack_insufficient → frame_internal_fit_candidate
+  - structural_major_overflow + * → details_popup_candidate
+  - tabular_overflow + * → table_preview_or_details_candidate
+  - frame mismatch → frame_reselect_candidate
+- **Status** : ⚠ partial
+- **Code 위치** : `src/phase_z2_failure_router.py` (`route_retry_failure`, `NEXT_ACTION_BY_FAILURE`)
+- **Gap** : 현재 *failure_type 단독* mapping (1-차원). severity (overflow_category × line_equivalent) 와의 *2-차원* mapping 미구현. `frame_internal_fit_candidate` 의 *execution contract / internal envelope* 미정의 (label 자체는 router/failure routing 에 등장하지만 *실제로 어떻게 동작하는지 + frame contract 가 declare 할 envelope 의 형식* 은 미정).
+
+#### Step 20. Slide Status 결정
+final.html 존재 ≠ PASS. 정확한 상태 분류.
+
+- **Status enum** : PASS / RENDERED_WITH_VISUAL_REGRESSION / PARTIAL_COVERAGE / ABORTED
+- **판단** : 모든 section coverage + visual ok → PASS / visual fail 있음 → RENDERED_WITH_VISUAL_REGRESSION / 일부 section 만 렌더 → PARTIAL_COVERAGE / 필수 단계 실패 → ABORTED
+- **Status** : ✅ implemented
+- **Code 위치** : `compute_slide_status()` in `phase_z2_pipeline.py`
+
+#### Step 21. Debug / Trace 기록
+전체 의사결정을 debug.json 에 기록. 정규화 MDX / content_objects / section_layout_signature / V4 evidence / composition_units / layout / zone sizes / frames / contracts / sub_zone mapping / slot_payload / render result / visual check / fit classification / router decision / action trace / failure classification / next action proposal / slide_status.
+
+- **Status** : ⚠ partial
+- **Code 위치** : `write_debug_json()` in `phase_z2_pipeline.py`
+- **Gap** : content_objects / section_layout_signature / sub_zone mapping 항목은 step 3, 4, 11 부재로 미기록. *region-level telemetry* (region count / region ratios / region-level frame matching / region-level display strategy) 도 Internal Region (Layer A) 부재로 미기록. 그 외 항목은 모두 기록됨.
+
+#### Step 22. 사용자 확인 / Export
+사용자가 결과 확인. 현재 목표 = MDX → 자동 슬라이드 1 장 → status / debug. 향후 = layout 재선택 UI / top3 frame 선택 UI / zone 이동 / HTML 다운 / Gitea push.
+
+- **Status** : ❌ missing (UI 영역 — 현재 범위 외)
+- **Code 위치** : 없음 (CLI 만)
+
+---
+
+## Status matrix 요약
+
+| Block | Step | Status |
+|---|---|---|
+| A | 0. 사전 준비 | ⚠ partial |
+| A | 1. MDX 업로드 | ✅ |
+| A | 2. MDX 정규화 | ⚠ partial |
+| A | 3. Content Object 추출 | ❌ |
+| A | 4. Section Internal Composition Planning | ❌ |
+| A | 5. Matching Evidence | ⚠ partial (rank-1 only) |
+| A | 6. Composition Planning | ⚠ partial |
+| A | 7. Slide-Level Layout Planning | ⚠ partial (count-based) |
+| A | 8. Zone + Internal Region Ratio Planning | ⚠ partial (zone-level horizontal-2 만 dynamic, region-level 미구현) |
+| A | 9. Region-Level Frame / Display Selection | ⚠ merged with step 5 + region-level 미구현 |
+| A | 10. Frame Contract 확인 | ⚠ partial (no sub_zones) |
+| A | 11. Content Unit / Child Group → Internal Region → Frame Slot Mapping | ❌ |
+| A | 12. Slot Payload 생성 | ✅ (deterministic) |
+| B | 13. Render | ✅ |
+| C | 14. Selenium Visual Runtime Check | ⚠ partial (text/structural only) |
+| C | 15. Fit Classification | ✅ |
+| C | 16. Overflow Router | ✅ |
+| C | 17. Implemented Action 실행 | ⚠ partial (zone_ratio_retry only) |
+| C | 18. Failure Classification | ✅ |
+| C | 19. Next Action Proposal | ⚠ partial (1-D mapping) |
+| C | 20. Slide Status 결정 | ✅ |
+| C | 21. Debug / Trace 기록 | ⚠ partial (planning trace 누락) |
+| C | 22. 사용자 확인 / Export | ❌ (UI 미구현) |
+
+**핵심 gap 위치 (❌ 표시)** :
+- Step 3 — Content Object 추출
+- Step 4 — Section Internal Composition Planning (3-way decision + Internal Region 분할)
+- Step 11 — Content Unit / Child Group → Internal Region → Frame Slot Mapping
+- Step 22 — 사용자 UI
+
+**부분 구현 위치 (⚠) 의 주요 결손** :
+- Step 5 — top-k 미사용
+- Step 8 — region-level ratio 미구현 (zone-level horizontal-2 만 dynamic)
+- Step 9 — Step 5 와 conflate + region-level 매칭 부재
+- Step 10 — sub_zones 미선언 (frame contract / Layer B)
+- Step 14 — image / table 검사 부재
+- Step 17 — `zone_ratio_retry` 외 action 모두 미구현
+- Step 19 — severity-aware 2-차원 매핑 미구현
+- Step 21 — planning trace 누락 (step 3, 4, 11 부재 종속) + region-level telemetry 미기록 (Layer A 부재 종속)
+
+---
+
+## 기존 spec 문서 cross-reference
+
+| Spec 문서 | 다루는 step |
+|---|---|
+| `docs/architecture/PHASE-Z-CATALOG-RUNTIME-DESIGN.md` | Step 0 (catalog 룰), Step 10 (frame contract), Step 12 (mapper) |
+| `docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md` | Step 0 (frame inventory) |
+| `docs/architecture/FRAME-INTEGRATION-MAP.md` | Step 0 (frame inventory) |
+| `docs/architecture/PHASE-Z-FIT-CLASSIFIER-ROUTER-SPEC.md` | Step 14, 15, 16, 17, 18, 19 |
+| `docs/architecture/PHASE-Z-CONTENT-OBJECT-SUBZONE-SPEC.md` | Step 3 (§1), Step 4 (§2 Internal Region / Layer A), Step 10 (§3 frame contract + Frame Slot / Layer B), Step 11 (§4 placement 2-stage + §5 display strategy). *해당 SPEC 의 `sub_zones` (YAML 필드명) = Frame Slot (Layer B). Internal Region (Layer A) 는 §2 에 정의됨.* |
+
+## Memory feedback rules cross-reference
+
+| Memory rule | 적용 step / 의사결정 |
+|---|---|
+| `feedback_one_step_per_turn` | 모든 step (작업 분할 discipline) |
+| `feedback_no_hardcoding` | 모든 step (특히 9, 11, 12, 17) |
+| `feedback_ai_role_separation` | Step 12 (AI 위치 제한) |
+| `feedback_ai_isolation_contract` | Step 12 (normal path AI 금지) |
+| `feedback_phase_z_spacing_direction` | Step 17 (CSS 공통 spacing 변경 금지) |
+| `feedback_artifact_status_naming` | Step 20 (slide_status enum) |
+| `feedback_auto_pipeline_first` | Block C 전체 (review/UI 개념 끼우지 말 것) |
+| `feedback_sample_budget` | Step 1 (미사용 sample 분리 보존) |
+| `feedback_detail_quality` | 모든 step (self-check) |
+| `feedback_blocks_must_be_css` | Step 13 (frame partial CSS 원칙) |
+| `feedback_recipe_variety` | Step 7, 9 (vocabulary 표현 범주) |
+| `feedback_absolute_paths` | 보고 / 문서 작성 시 |
+| `feedback_html_preview_whitebg` | Step 13 (slide-base 배경) |
+| `feedback_figma_*` | Step 0 (figma frame 변환 / asset 작업) |
+
+---
+
+## How to use this document
+
+새 작업 시작 시 :
+1. *어느 step* 의 작업인지 식별
+2. 그 step 의 *Status* 확인 (✅ / ⚠ / ❌)
+3. 해당 step 의 cross-reference 된 spec 문서 / memory rule 확인
+4. 작업 결과가 *다른 step 에 영향* 주는지 확인 (block A 변경 → block C 의 trace 자동 변동)
+
+새 spec 문서 추가 시 :
+- 본 문서의 *cross-reference 표* 에 등록 (어느 step 영역인지)
+
+새 memory rule 추가 시 :
+- 본 문서의 *Memory feedback rules cross-reference* 표에 등록 (어느 step 의 의사결정인지)
+
+작업 도중 — *어느 step 에 속하는지 모르는 작업이 들어오면* — 본 22-step 도면에 매핑이 안 된다는 것 자체가 *작업이 over-scoped 되었거나 새 step 정의가 필요* 하다는 신호.
+
+---
+
+## 본 문서의 보존 / 변경 정책
+
+- 본 문서는 *기준점*. 가벼운 정정 / status 갱신은 진행 가능 (예: ❌ → ⚠ → ✅ 변동)
+- *22 step 의 추가 / 제거 / 순서 변경* 은 사용자 명시 잠금 후에만
+- 본 문서의 *3-block 구조* 는 architectural reframe lock 의 직접 반영. 변경 시 reframe 자체를 다시 봄

docs/architecture/PHASE-Z-PIPELINE-STATUS-BOARD.md

@@ -0,0 +1,172 @@
+# Phase Z — pipeline status board
+
+**Snapshot date** : 2026-05-08 (Step 7-A/B + 8-A/B-1/B-2 catalog/candidate fn axis closure / Step 5-6-9 boundary reframe lock)
+**역할** : 현재 위치표 / grading snapshot. *지도 본문* 은 [`PHASE-Z-PIPELINE-OVERVIEW.md`](PHASE-Z-PIPELINE-OVERVIEW.md).
+
+| 문서 | 역할 | 변동 |
+|---|---|---|
+| `PHASE-Z-PIPELINE-OVERVIEW.md` | 고정 지도 (22-step 도면) | 거의 안 바뀜 |
+| `PHASE-Z-PIPELINE-STATUS-BOARD.md` | 현재 진행 snapshot | 자주 갱신 |
+
+본 문서가 *하지 않는* 것 :
+- 새 구현 제안 X
+- next step 추천 X
+- 우선순위 결정 X
+- A/B/C 선택지 X
+- MDX03 / MDX04 추가 분석 X
+- 코드 변경 X
+- OVERVIEW 구조 수정 X
+
+---
+
+## 1. Counting rule
+
+```
+Step 0      = precondition  (파이프라인 가동 전 사전 준비)
+Step 1~22   = runtime pipeline  ("22-step pipeline" = 이 범위)
+총 항목 수  = 23 (Step 0 + Step 1~22)
+명명 = "22-step" (runtime 기준)
+```
+
+Step 0 은 본체가 아닌 *준비 조건*. Step 1 (MDX 업로드) 부터가 runtime entry.
+
+---
+
+## 2. 22-step status board
+
+| Block | Step | 이름 | Status |
+|---|---|---|---|
+| — | 0 | 사전 준비 (catalog / contract / V4 / template / asset) | ⚠ partial |
+| A | 1 | MDX 업로드 | ✅ |
+| A | 2 | MDX 정규화 | ⚠ partial |
+| A | 3 | Content Object 추출 | ⚠ partial (B1 v0 dormant module + trace-only runtime 호출, render path 미연결) |
+| A | 4 | Section Internal Composition Planning | ⚠ partial (B2 v0 dormant module + trace-only runtime 호출, render path 미연결) |
+| A | 5 | Matching Evidence 생성 | ⚠ partial (rank-1 only) |
+| A | 6 | Composition Planning | ⚠ partial |
+| A | 7 | Slide-Level Layout Planning | ⚠ partial (count-based / 7-A catalog + 7-B candidate fn 추가, runtime 호출처 X) |
+| A | 8 | Zone + Internal Region Ratio Planning | ⚠ partial (zone-level horizontal-2 만 dynamic / 8-A region+display catalog + 8-B-1/2 candidate fn 추가, runtime 호출처 X / region-level 은 B2 안 partial) |
+| A | 9 | Region-Level Frame / Display Selection | ⚠ partial (B4 가 catalog cover + declaration order 로 frame 선택 분담 / V4 evidence 미통합 / Step 5 와 conflate 잔존) |
+| A | 10 | Frame Contract 확인 | ⚠ partial (B3 의 accepted_content_types + sub_zones 선언 추가 — B4 만 읽음, mapper 미읽음 / density envelope 별 axis) |
+| A | 11 | Content Unit / Child Group → Internal Region → Frame Slot Mapping | ⚠ partial (B4 v0 dormant 2-stage + region 1:1 sub_zone + narrowest first + trace-only runtime 호출, render path 미연결) |
+| A | 12 | Slot Payload 생성 | ✅ (deterministic) |
+| B | 13 | Render | ✅ |
+| C | 14 | Selenium Visual Runtime Check | ⚠ partial (text/structural overflow + B5 frame_slot_metrics F29 만 / image / table 검사 부재) |
+| C | 15 | Fit Classification (A1) | ✅ |
+| C | 16 | Overflow Router (A2) | ✅ |
+| C | 17 | Implemented Action 실행 (A3) | ⚠ partial (zone_ratio_retry only) |
+| C | 18 | Failure Classification (A4-1) | ✅ |
+| C | 19 | Next Action Proposal (A4-2) | ⚠ partial (1-D mapping) |
+| C | 20 | Slide Status 결정 | ✅ |
+| C | 21 | Debug / Trace 기록 | ⚠ partial (placement_trace per-zone 기록 + frame_slot_metrics F29 기록 — render path 활성화 X / region marker partial 미주입) |
+| C | 22 | 사용자 확인 / Export | ⚠ future (UI 영역 — 현재 범위 외) |
+
+범례 :
+- ✅ implemented
+- ⚠ partial
+- ❌ missing
+- ⚠ future (현 범위 외 — 후속)
+
+---
+
+## 3. 핵심 missing (전이 후)
+
+이전 Step 3 / 4 / 11 = ❌ missing → **본 session 작업으로 ⚠ partial 로 전이**.
+
+**현재 *남은* gap** :
+
+```
+1. render path 의 placement_trace 활용 X
+   - B4 PlacementPlan 이 trace-only — render_slide() / mapper 가 미사용
+   - region-id / content_unit-id marker 가 partial template 에 미주입 (B5 후속 axis)
+
+2. B4 frame_selection 의 V4 evidence 미통합
+   - B4 v0 = catalog declaration order 만 (cover + first-match)
+   - composition_planner 의 V4 rank-1 와 *cross-axis 비교 자료* 만 — 통합 미완
+
+3. region-level / Frame Slot-level partial 측정
+   - B5 v0 frame_slot_metrics = F29 1 partial 만
+   - F13 / F16 marker 미적용
+
+4. 그 외 잔존
+   - rules 2~5 (region-preview-details / region-grid-2x2 / region-main-support /
+     region-horizontal-split) 의 algorithm 미구현 (SPEC v1 §2.5 deferred)
+   - frame contract 의 density envelope 미선언
+   - tabular_overflow / image_aspect_mismatch 검사 부재 (Step 14)
+   - layout_adjust / frame_reselect / details_popup_escalation / image_fit /
+     frame_internal_fit_candidate (Step 17 missing actions) 미구현
+
+5. Step 5 / 6 / 9 boundary axis breakdown (2026-05-08 lock + 2026-05-08 #2 정정)
+   - Step 5 = rank-1 only → non-reject max-6 후보 list 로 보완 (✓ 박힘)
+   - Step 6-A = CompositionUnit v4_candidates 필드 additive (✓ 박힘)
+   - Step 7-conn / Step 8-conn = layout / region / display candidates artifact 연결 (✓ 박힘, Step 8 placeholder signals)
+   - Step 9 v0 = passive application_plan artifact (✓ 박힘 — V4 후보 + layout/region/display
+     통합 적용 계획, V4 axis 재계산 X)
+   - 폐기된 안 (2 가지) :
+     · "compat 매트릭스" (region × frame slot count) — V4 cardinality 재계산 위험
+       (CHANGE-LOG.md 2026-05-08 entry 참조)
+     · "6-B (frame ownership transfer)" — misframed axis. V4 가 frame 선택, Step 6 은
+       전사, Step 9 는 번역. Step 6 의 frame 채택 책임 = 허구 (CHANGE-LOG.md
+       2026-05-08 #2 entry 참조). 6-B 의 진짜 content (label gate policy) 는 별 axis.
+   - 닫힌 axis = 5 / 6-A / 7-conn / 8-conn / Step 9 v0
+```
+
+**Cross-cutting Layer A — 진전 단계 정리** :
+
+| 단계 | 상태 |
+|---|---|
+| (a) OVERVIEW reframe (Layer A first-class lock + Universal Region Model) | ✓ |
+| (b) SPEC v1 schema (Internal Region §2 + topology vocabulary §2.5 + 2-stage placement §4) | ✓ |
+| (c) PLAN v1 (cross-ref sync) | ✓ |
+| (d) B1 v0 ContentObject extractor (dormant) | ✓ |
+| (e) B2 v0 InternalRegion planner (dormant) | ✓ |
+| (f) B3 frame_contracts.yaml extension (dormant catalog 면) | ✓ |
+| (g) B4 v0 placement planner (dormant) | ✓ |
+| (h) B5 v0 Frame Slot telemetry markers (F29 만) | ✓ |
+| (i) trace-only runtime 연결 (B1→B2→B4 real data 첫 호출 / debug.json placement_trace) | ✓ |
+| (j) **render path 활성화 (region marker partial 주입 / B4 → mapper 통합 / V4 evidence 통합)** | **❌ pending** |
+
+= (a)~(i) 완료 + (j) 가 *남은 핵심 axis* (B5 후속 / runtime 통합).
+
+**Step 22** 는 별도 범주 (UI 영역 — 현재 자동 파이프라인 범위 외).
+
+---
+
+## 4. 구조 적절성 검토 (brief)
+
+> snapshot — 22-step *재구성 / 합치기 / 쪼개기 제안 X*. OVERVIEW 영역.
+
+- **3-block 구조 (A 계획 / B 렌더 / C 사후 telemetry) 적절**. 위계 추가 (Zone Internal Region) 후에도 block 경계는 변동 없음
+- **Step 3~4 가 Step 5 보다 앞** 인 순서 적절. content_object 와 internal composition decision (3-way) 이 frame matching 의 입력이어야 함
+- **Step 5 (evidence 생성) 와 Step 9 (final frame / display 선택) 가 분리** 된 구조 적절. 현재 conflate 된 건 구현 결손이지 도면 결손 아님. Step 9 의 unit of analysis = *region* 으로 reframe (OVERVIEW)
+- **A1~A4 는 post-render telemetry layer**. 진짜 fit policy 의 자리는 Block A (composition planning, region 분할 포함). C block 은 *exception 처리 + 진단 안내*
+- **Universal Region Model 적용 후에도 step numbering 보존** : Layer A 도입은 step 추가가 아니라 Step 4 / 8 / 9 / 11 의 *granularity unit shift* 로 흡수됨. step 0 ~ 22 그대로
+- **Layer A trace-only runtime 활성화 = boolean 차원 X** : B1~B4 가 *real MDX runtime 위에서 호출* 되나 *render path 미대체*. debug.json 의 placement_trace = *진단 telemetry only* — final.html / canonical SHA 미영향. *render 활성화* 는 별 axis (B5 후속)
+
+---
+
+## 5. AI 사용 위치 (runtime 기준)
+
+```
+runtime AI = Step 12 의 light_edit / restructure 1 곳만
+   ├ 입력 : content_object + frame contract + Internal Region 배치 + Frame Slot 명세
+   ├ 출력 : content → Internal Region / Frame Slot proposal
+   └ 금지 : MDX 원문 요약·삭제 / HTML·CSS 직접 생성 / layout·zone·region·frame 임의 선택
+```
+
+Step 0 (사전 준비) 의 Figma → HTML 변환은 *precondition phase 의 작업* — runtime AI 아님.
+
+다른 step 에서의 AI 호출은 본 도면 안에 *없음*.
+
+---
+
+## 6. 현재 병목 (한 줄)
+
+> 현재 Phase Z 의 *Layer A pre-render planning* (Step 3 / 4 / 11) 은 본 session 작업으로 ❌ → ⚠ partial 전이 (B1/B2/B4 dormant module + trace-only runtime 호출). *Layer A telemetry 의 first activation* — debug.json 의 placement_trace per-zone + frame_slot_metrics F29 partial 기록. 단 **render path 활성화는 미완** : B4 PlacementPlan 이 mapper output 을 *대체하지 않고* trace-only / region-id / content_unit_id marker 가 partial template 에 *미주입* / B4 frame_selection 이 V4 evidence *미통합*. **Step 5/6/9 boundary axis breakdown 닫힘** (Step 5 / 6-A / 7-conn / 8-conn / Step 9 v0 박힘 — passive application_plan artifact). 6-B (frame ownership transfer) = misframed axis 폐기 (CHANGE-LOG.md 2026-05-08 #2). 핵심 다음 axis 후보 (별 axis lock) = **(A) V4 frame 후보 → Phase Z render path 연결 확장 (F14/F11/F18 등 미연결 frame adapter — contract + partial + builder, *figma 새 디자인 X / V4 새 매칭 X*)**, **(B) Step 17 details_popup_escalation**, **(C) Step 4 unit_count 산출**, **(D) Step 3/4 render path 활성화 (Layer A activation)**, **(E) label gate policy 재검토 (= 6-B 의 진짜 content 였던 것)**, **(F) Step 9 v1 scoring + auto decision**. *runtime contract-registered / verified frame set 이 text-frame 중심* 한계는 (A) 가 직접 푸는 axis.
+
+---
+
+## 사용 방법
+
+- 새 작업 들어오면 → 본 board 의 *어느 step* 의 status 를 바꾸는 작업인지 식별
+- 작업이 *Step 매핑이 안 되면* → over-scoped 또는 새 step 정의 필요 (OVERVIEW 영역)
+- ✅ → ⚠ → ❌ status 전이 / 갱신 시 → 본 board 만 수정. OVERVIEW 는 step 추가/제거/순서 변경 시에만

docs/architecture/PHASE-Z-ROADMAP.md

@@ -0,0 +1,160 @@
+# Phase Z Roadmap
+
+**문서 성격**: 앞으로의 진행 순서 + 큰 axis + 우선순위. *자주 갱신*.
+**작성일**: 2026-05-08
+**문서 역할 분담**: 본 문서는 *진행 계획*. 정확한 단계별 상태는 [`PHASE-Z-PIPELINE-STATUS-BOARD.md`](PHASE-Z-PIPELINE-STATUS-BOARD.md), 결정 변경 이력은 [`PHASE-Z-CHANGE-LOG.md`](PHASE-Z-CHANGE-LOG.md), 22 단계 도면은 [`PHASE-Z-PIPELINE-OVERVIEW.md`](PHASE-Z-PIPELINE-OVERVIEW.md).
+
+> **현재 당장 할 일은 개발 진행이 아니라, 보고와 피드백을 위한 `PROCESS_OVERVIEW.html` 프로토타입을 먼저 만드는 것이다.**
+
+---
+
+## 1. 현재 위치
+
+- MDX03 정상 경로 통과 (PASS)
+- Phase Z 22 단계 파이프라인 일반화 진행 중
+- 보고용 프로토타입을 먼저 작성 예정
+
+### MDX03 결과 요약
+
+- V4 rank-1 frame 적용 완료
+  - `03-1 → F13 / three_parallel_requirements` (그대로 사용 가능, 0.927)
+  - `03-2 → F29 / process_product_two_way` (그대로 사용 가능, 0.920)
+- rank 2~6 후보 Step 9 `application_plan` 에 보존
+- `final.html` / `preview.png` 생성
+- Step 14 시각 점검 통과 / Step 20 상태 통과
+- F29 missing asset bug 수정 완료
+- missing image count = 0 / full MDX coverage = true
+
+---
+
+## 2. 이번 session 에서 닫힌 작업
+
+이번 session 에서 closed 된 axis 목록:
+
+- Step 5 보완 — V4 rank-1 → non-reject 최대 6 개 후보 list
+- Step 6-A — `CompositionUnit` 에 `v4_candidates` 필드 추가 (additive, logic 무변)
+- Step 7-conn — `select_layout_candidates` artifact 연결
+- Step 8-conn — region / display candidates artifact 연결 (placeholder)
+- Step 9 v0 — passive `application_plan` artifact (V4 후보 적용 계획 trace)
+- cleanup-1 — stale 주석 (`pipeline 호출처 X`) 정정
+- F29 visual fidelity 정정 — missing SVG → CSS gradient 재현
+- README 통합 갱신 — 한글 / 22-step Mermaid / 로드맵 Mermaid
+- push 완료 — origin (GitHub) + slide2 (Gitea)
+
+각 axis 상세 의사결정 / 폐기 / lock 은 [`PHASE-Z-CHANGE-LOG.md`](PHASE-Z-CHANGE-LOG.md) 참조.
+
+---
+
+## 3. 현재 22 단계 진행 수준
+
+> 아래 수치는 MDX03 정상 경로 기준의 *추정 진행률*이다.
+> 22 단계별 공식 상태는 [`PHASE-Z-PIPELINE-STATUS-BOARD.md`](PHASE-Z-PIPELINE-STATUS-BOARD.md) 를 *single source of truth* 로 한다.
+
+| Step | 단계 | 추정 % |
+|---|---|---|
+| 0 | 사전 준비 / 카탈로그 / 컨트랙트 | 65% |
+| 1 | MDX 업로드 | 100% |
+| 2 | MDX 정규화 | 65% |
+| 3 | Content Object 추출 | 45% |
+| 4 | Internal Composition Planning | 40% |
+| 5 | V4 매칭 후보 추출 | 85% |
+| 6 | 구성 계획 | 80% |
+| 7 | 슬라이드 레이아웃 계획 | 85% |
+| 8 | Zone / Region 비율 계획 | 75% |
+| 9 | 적용 계획 (`application_plan`) | 70% |
+| 10 | 프레임 컨트랙트 확인 | 65% |
+| 11 | 슬롯 매핑 | 45% |
+| 12 | 슬롯 데이터 생성 | 85% |
+| 13 | HTML 렌더 | 85% |
+| 14 | 시각 점검 | 70% |
+| 15 | 문제 분류 | 80% |
+| 16 | 재시도 라우터 | 85% |
+| 17 | 조치 실행 | 40% |
+| 18 | 실패 분류 | 85% |
+| 19 | 다음 조치 제안 | 60% |
+| 20 | 슬라이드 상태 결정 | 95% |
+| 21 | 디버그 / 추적 기록 | 45% |
+| 22 | 사용자 확인 / 내보내기 | 10% |
+
+전체 요약:
+- MDX03 정상 경로 = 완료
+- 22 단계 일반화 = 약 **65~70%**
+- 제품형 전체 = 중간 단계
+
+---
+
+## 4. 큰 로드맵
+
+```
+1. 22 단계 파이프라인 안정화 (현재)
+2. Phase Q 재검토 후 Phase Z 반영 (audit & salvage)
+3. AI 보정 / 재구성 단계 (AI Repair / Restructure)
+4. DB / 카탈로그 정리
+5. 프론트엔드 연결
+6. HTML 수정 기능 추가
+7. 프레임 지속 업데이트
+```
+
+자세한 단계별 설명은 [`README.md`](../../README.md) §4 참조. 샘플 MDX (03 / 04 / 01 / 02) 는 *로드맵 단계 X* — *22 단계 보완용 검증 재료*.
+
+---
+
+## 5. 우선순위
+
+```
+1. 보고용 HTML 프로토타입 작성        ← 지금 당장 할 일
+2. 보고 / 피드백 수집
+3. Phase Z 파이프라인 작업 복귀 (22 단계 정리 계속)
+```
+
+---
+
+## 6. 보고용 프로토타입 계획
+
+**파일**: `PROCESS_OVERVIEW.html` (기존 갱신) 또는 `PHASE_Z_REPORT_PROTOTYPE.html` (신규).
+
+**포함할 내용**:
+- 프로젝트 개요
+- MDX03 실제 결과 (`preview.png` / `final.html` / PASS status)
+- 22 단계 파이프라인 타임라인
+- V4 rank 후보 예시 (1~6 위)
+- Layout / Region / Frame 설명
+- Step 9 `application_plan` 예시
+- 아직 미구현인 기능 (HTML 수정 / 이미지 크기 조정 / AI 보정 / DB / 프론트 에디터)
+- 향후 로드맵 (큰 7 단계)
+
+**목적**:
+- 현재 파이프라인 구조 설명
+- MDX03 결과 시각적으로 보여줌
+- 미구현 영역 명확히 표시
+- 향후 front / AI / DB / editor 방향에 대한 피드백 수집
+
+---
+
+## 7. Pipeline 복귀 후 Todo
+
+보고 / 피드백 수집 후 22 단계 안정화 작업 재개. 우선순위 후보:
+
+- **MDX04 검증** — `samples/mdx_batch/04.mdx` fresh run → status / rank-1 frame / 미연결 여부 확인
+- **시각 점검 확장** (Step 14 보강) — 누락 이미지 / 표 잘림 / 비율 어긋남 / 빈 공간 검사
+- **프레임 어댑터 확장** — Figma / V4 에는 있지만 Phase Z 에 미연결인 frame 의 contract / partial / builder 추가
+- **MDX 정규화 보강** (Step 2 / 3 / 4) — Content Object 추출 + Internal Composition Planning 활성화
+- **Step 21 디버그 추적 보강** — schema 채우기 (현재 빈 상태)
+- **MDX01 / 02 검증** — 다른 sample 로 일반화 확장
+
+이 후 단계 = 큰 로드맵의 §2 ~ §7 (Phase Q audit → AI repair → DB → 프론트 → HTML 수정 → frame 지속).
+
+---
+
+## 8. 문서 역할 분담
+
+| 문서 | 역할 | 갱신 빈도 |
+|---|---|---|
+| [`README.md`](../../README.md) | 외부 / 내부 공유용 프로젝트 개요 | 가끔 (큰 방향 변경 시) |
+| [`PHASE-Z-PIPELINE-OVERVIEW.md`](PHASE-Z-PIPELINE-OVERVIEW.md) | 22 단계 도면 (구조 잠금) | 거의 안 바뀜 |
+| [`PHASE-Z-PIPELINE-STATUS-BOARD.md`](PHASE-Z-PIPELINE-STATUS-BOARD.md) | 22 단계별 현재 상태의 single source of truth | 자주 |
+| [`PHASE-Z-CHANGE-LOG.md`](PHASE-Z-CHANGE-LOG.md) | 의사결정 변경 이력 (axis 단위, 시간 순) | 작업 단위 |
+| **`PHASE-Z-ROADMAP.md`** (본 문서) | **앞으로의 진행 순서 / 큰 axis / 우선순위** | **자주** |
+| `PROCESS_OVERVIEW.html` | 보고 / 피드백용 시각 프로토타입 | 보고 시점 |
+
+각 문서가 자기 역할만 하면 drift / 중복 / outdated 방지.

docs/architecture/TOKENS-v1.md

@@ -0,0 +1,69 @@
+# Typography Tokens — 초안 v1
+
+## Global Hierarchy Tokens
+
+슬라이드 전체의 공통 글자 위계. 모든 블록이 이 기준을 따른다.
+
+| 위계 | 토큰명 | font-size | font-weight | line-height | 용도 |
+|------|--------|-----------|-------------|-------------|------|
+| 대목차 | `--font-slide-title` | 22px | 700 | 1.4 | 슬라이드 상단 제목 |
+| 중목차 | `--font-zone-title` | 13px | 700 | 1.4 | zone 제목 (## 대목차 하위) |
+| 소목차 | `--font-sub-title` | 12px | 700 | 1.45 | 블록 내 소제목, 카드 제목 |
+| 본문 | `--font-body` | 11px | 400~500 | 1.55 | 블릿, 설명 텍스트 |
+| 캡션 | `--font-caption` | 10px | 400 | 1.4 | 각주, 출처, 보조 텍스트 |
+| footer | `--font-footer` | 20px | 700 | 1.2 | 핵심 인사이트 pill |
+
+---
+
+## Component Semantic Token 후보
+
+위계 6종으로 안 덮이는 역할. 가까운 위계에서 기본값을 가져오되, 필요시 override.
+
+| 역할 | 기반 위계 | 예상 override | 비고 |
+|------|-----------|---------------|------|
+| body-strong (본문 강조) | 본문 (11px) | weight: 600~700 | 본문 heading, 인라인 강조 |
+| detail-link (자세히보기) | 캡션 (10px) | weight: 500, color: muted | 링크 텍스트 |
+| pill-label | 소목차 (12px) | weight: 700, color: white | pill/badge 안 라벨 |
+| table-header | 소목차 (12px) | weight: 700, color: white, bg: dark | 표 헤더 셀 |
+| table-cell | 본문 (11px) | - | 표 데이터 셀 |
+| compare-badge | 소목차 (12px) | weight: 700 | 비교 블록 VS 뱃지 |
+| callout | 소목차 (12px) | weight: 700, color: accent | 강조 인용 |
+| overline | 캡션 (10px) | weight: 600, letter-spacing | 상단 라벨 |
+
+---
+
+## Source
+
+현재 코드에서 추출한 실제 사용값 기준.
+
+| 출처 | 대목차 | 중목차 | 소목차 | 본문 | 캡션 | footer |
+|------|--------|--------|--------|------|------|--------|
+| slide-base.html | 22px | - | - | - | - | 20px |
+| block_assembler.py zone title | - | 13px | - | - | - | - |
+| block_assembler.py direct render | - | - | 12px | 11px | - | - |
+| block_assembler.py .bul | - | - | - | 11px | - | - |
+| FontHierarchy (legacy) | - | - | key_msg 14 | core 12 | sidebar 10 | - |
+
+---
+
+## FontHierarchy 매핑 (보조 체계)
+
+기존 FontHierarchy는 역할 기반이므로, 위계 기반으로 매핑하여 보조로 유지.
+
+| FontHierarchy | 위계 매핑 | 비고 |
+|---------------|-----------|------|
+| key_msg (14px) | 소목차~중목차 사이 | 강조 메시지용, component token 후보 |
+| core (12px) | 소목차 | 기본 블록 제목급 |
+| bg (11px) | 본문 | 배경/보조 텍스트 |
+| sidebar (10px) | 캡션 | 사이드바/첨부 |
+
+---
+
+## 상태
+
+- [x] inventory 수집 완료
+- [x] global hierarchy v1 초안
+- [x] component token 후보 분리
+- [ ] typography.css 파일 작성
+- [ ] spacing tokens 정의
+- [ ] color tokens 정의 (공통 + 의미색)

docs/block-tests/card-image.html

@@ -1,219 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>블록 테스트: card-image</title>
-<style>
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body {
-    font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
-    background: #e8ecf0;
-    display: flex;
-    justify-content: center;
-    padding: 30px;
-    margin: 0;
-}
-.block-container {
-    width: 920px;
-    background: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-}
-.block-container .block-section-title {
-    margin: -20px -20px 0;
-    border-radius: 8px 8px 0 0;
-    overflow: hidden;
-}
-</style>
-</head>
-<body>
-<div class="block-container">
-<!-- 이미지 카드: 상단 이미지 + 하단 텍스트 (2~4열) -->
-<!--
-  📋 card-image
-  ─────────────────
-  용도: 단계별 설명, 카테고리별 설명 (이미지가 핵심인 카드)
-  슬롯: cards[] 배열 (각 카드에 image, title, title_en, items[])
-  Figma 원본: 2-1_02 > Group 1171281594 (카드 3열)
--->
-<div class="block-card-image" style="--ci-count: 3">
-  
-  <div class="ci-card">
-    
-    <img class="ci-img" src="figma-assets/card_img_design.png" alt="설계단계">
-    
-    <div class="ci-body">
-      <div class="ci-title" style="color: #00aaff">설계단계</div>
-      <div class="ci-title-en">Design Stage</div>
-      <div class="ci-divider"></div>
-      <ul class="ci-list">
-        
-        <li>고도화된 BIM 구현</li>
-        
-        <li>최첨단 디지털트윈</li>
-        
-        <li>시뮬레이션 분석 & 성능평가</li>
-        
-        <li>지속가능한 인프라개발</li>
-        
-      </ul>
-      
-    </div>
-  </div>
-  
-  <div class="ci-card">
-    
-    <img class="ci-img" src="figma-assets/card_img_construction.png" alt="시공 단계">
-    
-    <div class="ci-body">
-      <div class="ci-title" style="color: #006aff">시공 단계</div>
-      <div class="ci-title-en">Construction Stage</div>
-      <div class="ci-divider"></div>
-      <ul class="ci-list">
-        
-        <li>향상된 건설 계획과 공정 순서 관리</li>
-        
-        <li>Big Room 등 환경을 통한 협업 및 조정</li>
-        
-        <li>정확한 수량산출서와 비용 산정</li>
-        
-      </ul>
-      
-    </div>
-  </div>
-  
-  <div class="ci-card">
-    
-    <img class="ci-img" src="figma-assets/card_img_maintenance.png" alt="유지관리 단계">
-    
-    <div class="ci-body">
-      <div class="ci-title" style="color: #004cbe">유지관리 단계</div>
-      <div class="ci-title-en">Maintenance Stage</div>
-      <div class="ci-divider"></div>
-      <ul class="ci-list">
-        
-        <li>자산 정보 및 데이터 관리</li>
-        
-        <li>예측 기반 유지보수 및 생애주기 분석</li>
-        
-        <li>효율적인 시설 운영 및 지속가능한 관리</li>
-        
-      </ul>
-      
-    </div>
-  </div>
-  
-</div>
-
-<style>
-.block-card-image {
-  display: grid;
-  grid-template-columns: repeat(var(--ci-count, 3), 1fr);
-  gap: 16px;
-}
-.ci-card {
-  background: var(--color-bg, #ffffff);
-  border-radius: var(--radius, 8px);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.ci-img {
-  width: 100%;
-  height: 160px;
-  object-fit: contain;
-  background: #f8f9fb;
-  padding: 10px;
-}
-.ci-body {
-  padding: 16px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-.ci-title {
-  font-size: 14px;
-  font-weight: var(--weight-bold, 700);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  margin-bottom: 2px;
-}
-.ci-title-en {
-  font-size: 12px;
-  font-weight: var(--weight-normal, 400);
-  color: var(--color-text-secondary, #666);
-  margin-bottom: 10px;
-}
-.ci-divider {
-  width: 100%;
-  height: 1px;
-  background: #000;
-  margin-bottom: 10px;
-}
-.ci-list {
-  list-style: disc;
-  padding-left: 18px;
-  font-size: 13px;
-  line-height: 1.7;
-  color: var(--color-text, #000);
-  flex: 1;
-}
-.ci-list li {
-  margin-bottom: 3px;
-}
-.ci-source {
-  font-size: 11px;
-  color: var(--color-text-light, #94a3b8);
-  font-style: italic;
-  margin-top: 8px;
-  border-top: 1px solid var(--color-border, #e2e8f0);
-  padding-top: 6px;
-}
-</style>
-</div>
-</body>
-</html>

docs/block-tests/cards_card-compare-3col.html

@@ -1,162 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-compare-3col</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 3단 비교 카드: 각각 다른 색상 헤더 + 아이콘/이미지 + 불릿 -->
-<!--
-  📋 card-compare-3col
-  ─────────────────
-  용도: 3개 카테고리 비교 (예: 상용SW / 3rd Party / 전문SW)
-  슬롯: cards[] (각 카드에 title, subtitle, color, image, bullets[])
-  Figma 원본: 2-2_03 "상용 / 3rd Party(범용) / 전문·전용 S/W"
--->
-<div class="block-compare-3" style="--cc-count: 3">
-  
-  <div class="cc-card">
-    <div class="cc-header" style="background: #6b7280">
-      <div class="cc-title">상용 S/W</div>
-      <div class="cc-sub">Commercial</div>
-    </div>
-    
-    
-    <ul class="cc-list">
-      
-      <li>Autodesk, Bentley 등</li>
-      
-      <li>범용 기능 제공</li>
-      
-      <li>라이선스 비용 높음</li>
-      
-    </ul>
-    
-  </div>
-  
-  <div class="cc-card">
-    <div class="cc-header" style="background: #2563eb">
-      <div class="cc-title">3rd Party 범용</div>
-      <div class="cc-sub">General Purpose</div>
-    </div>
-    
-    
-    <ul class="cc-list">
-      
-      <li>Rhino, Sketchup 등</li>
-      
-      <li>특정 분야 특화</li>
-      
-      <li>상대적 저비용</li>
-      
-    </ul>
-    
-  </div>
-  
-  <div class="cc-card">
-    <div class="cc-header" style="background: #dc2626">
-      <div class="cc-title">전문·전용 S/W</div>
-      <div class="cc-sub">Specialized</div>
-    </div>
-    
-    
-    <ul class="cc-list">
-      
-      <li>자체 개발 솔루션</li>
-      
-      <li>업무 프로세스 최적화</li>
-      
-      <li>지속적 업그레이드 가능</li>
-      
-    </ul>
-    
-  </div>
-  
-</div>
-
-<style>
-.block-compare-3 {
-  display: grid;
-  grid-template-columns: repeat(var(--cc-count, 3), 1fr);
-  gap: 14px;
-}
-.cc-card {
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  overflow: hidden;
-  background: #ffffff;
-}
-.cc-header {
-  padding: 12px 16px;
-  text-align: center;
-  color: #ffffff;
-}
-.cc-title {
-  font-size: 15px;
-  font-weight: 800;
-}
-.cc-sub {
-  font-size: 11px;
-  opacity: 0.85;
-  margin-top: 2px;
-}
-.cc-img {
-  width: 100%;
-  height: 120px;
-  object-fit: contain;
-  background: #f8fafc;
-  padding: 8px;
-}
-.cc-list {
-  list-style: disc;
-  padding: 12px 16px 14px 30px;
-  font-size: 13px;
-  color: #334155;
-  line-height: 1.7;
-}
-.cc-list li {
-  margin-bottom: 3px;
-  white-space: pre-line;
-}
-</style></div></body></html>

docs/block-tests/cards_card-dark-overlay.html

@@ -1,174 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>cards/card-dark-overlay</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 다크 오버레이 카드: 배경 이미지 + 흰 텍스트 오버레이 -->
-<!--
-  📋 card-dark-overlay
-  ─────────────────
-  용도: 키워드+짧은 설명을 시각적으로 강조. 이미지 위에 다크 오버레이 + 흰 텍스트.
-  슬롯: cards[] (각 카드에 image, title, description)
-  Figma 원본: 2-2_01 > 아이콘 카드 5열 (협업지원, 오류감소, 생산성향상 등)
--->
-<div class="block-card-dark" style="--cd-count: 5">
-  
-  <div class="cd-card">
-    
-    <img class="cd-bg" src="../figma-assets/2-2_icon_card_1.png" alt="">
-    
-    <div class="cd-overlay">
-      <div class="cd-title">협업지원</div>
-      <div class="cd-desc">팀원간 협업 원활히하여
-프로젝트 관리 개선</div>
-    </div>
-  </div>
-  
-  <div class="cd-card">
-    
-    <img class="cd-bg" src="../figma-assets/2-2_icon_card_2.png" alt="">
-    
-    <div class="cd-overlay">
-      <div class="cd-title">오류감소</div>
-      <div class="cd-desc">설계 오류 최소화
-품질 향상</div>
-    </div>
-  </div>
-  
-  <div class="cd-card">
-    
-    <img class="cd-bg" src="../figma-assets/2-2_icon_card_3.png" alt="">
-    
-    <div class="cd-overlay">
-      <div class="cd-title">생산성 향상</div>
-      <div class="cd-desc">반복적 작업의 자동화
-시간과 노력 절약</div>
-    </div>
-  </div>
-  
-  <div class="cd-card">
-    
-    <img class="cd-bg" src="../figma-assets/2-2_icon_card_4.png" alt="">
-    
-    <div class="cd-overlay">
-      <div class="cd-title">비용절감</div>
-      <div class="cd-desc">설계 변경 최소화
-공사비 절감</div>
-    </div>
-  </div>
-  
-  <div class="cd-card">
-    
-    <img class="cd-bg" src="../figma-assets/2-2_icon_card_5.png" alt="">
-    
-    <div class="cd-overlay">
-      <div class="cd-title">데이터 관리</div>
-      <div class="cd-desc">체계적 정보 관리
-생애주기 활용</div>
-    </div>
-  </div>
-  
-</div>
-
-<style>
-.block-card-dark {
-  display: grid;
-  grid-template-columns: repeat(var(--cd-count, 3), 1fr);
-  gap: 12px;
-}
-.cd-card {
-  position: relative;
-  border-radius: 10px;
-  overflow: hidden;
-  height: 200px;
-}
-.cd-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: 1;
-}
-.cd-bg-default {
-  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
-}
-.cd-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  text-align: center;
-  color: #ffffff;
-}
-.cd-title {
-  font-size: 18px;
-  font-weight: 800;
-  line-height: 1.3;
-  margin-bottom: 6px;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
-}
-.cd-desc {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.5;
-  opacity: 0.9;
-  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
-  white-space: pre-line;
-}
-</style></div></body>
-</html>

docs/block-tests/cards_card-icon-desc.html

@@ -1,114 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head><meta charset="UTF-8"><title>cards/card-icon-desc</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head>
-<body><div class="block-container"><!-- 아이콘 설명 카드: 아이콘 + 제목 + 설명 (2~4열) -->
-<!--
-  📋 card-icon-desc
-  ─────────────────
-  용도: 기능/특성/장점을 아이콘과 함께 나열. 시각적으로 분류.
-  슬롯: cards[] (각 카드에 icon, title, description)
-  Figma 원본: 2-3_01 아이콘 3열 설명
--->
-<div class="block-card-icon" style="--ci-count: 3">
-  
-  <div class="cid-card">
-    <div class="cid-icon">🔧</div>
-    <div class="cid-title">기술 기반</div>
-    <div class="cid-desc">건설 분야별
-전문지식과 경험</div>
-  </div>
-  
-  <div class="cid-card">
-    <div class="cid-icon">💻</div>
-    <div class="cid-title">S/W 역량</div>
-    <div class="cid-desc">디지털 도구와
-Process 통합</div>
-  </div>
-  
-  <div class="cid-card">
-    <div class="cid-icon">🌏</div>
-    <div class="cid-title">여건 조성</div>
-    <div class="cid-desc">사회·기업·제도
-수용 환경 구축</div>
-  </div>
-  
-</div>
-
-<style>
-.block-card-icon {
-  display: grid;
-  grid-template-columns: repeat(var(--ci-count, 3), 1fr);
-  gap: 16px;
-}
-.cid-card {
-  text-align: center;
-  padding: 20px 16px;
-  background: #f8fafc;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-}
-.cid-icon {
-  font-size: 2.5rem;
-  margin-bottom: 10px;
-}
-.cid-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: #1e293b;
-  margin-bottom: 6px;
-}
-.cid-desc {
-  font-size: 13px;
-  color: #475569;
-  line-height: 1.7;
-  white-space: pre-line;
-}
-</style></div></body></html>

docs/block-tests/cards_card-image-3col.html

@@ -1,199 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>cards/card-image-3col</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 이미지 카드: 상단 이미지 + 하단 텍스트 (2~4열) -->
-<!--
-  📋 card-image
-  ─────────────────
-  용도: 단계별 설명, 카테고리별 설명 (이미지가 핵심인 카드)
-  슬롯: cards[] 배열 (각 카드에 image, title, title_en, items[])
-  Figma 원본: 2-1_02 > Group 1171281594 (카드 3열)
--->
-<div class="block-card-image" style="--ci-count: 3">
-  
-  <div class="ci-card">
-    
-    <img class="ci-img" src="../figma-assets/card_img_design.png" alt="설계단계">
-    
-    <div class="ci-body">
-      <div class="ci-title" style="color: #00aaff">설계단계</div>
-      <div class="ci-title-en">Design Stage</div>
-      <div class="ci-divider"></div>
-      <ul class="ci-list">
-        
-        <li>고도화된 BIM 구현</li>
-        
-        <li>최첨단 디지털트윈</li>
-        
-        <li>시뮬레이션 분석 & 성능평가</li>
-        
-        <li>지속가능한 인프라개발</li>
-        
-      </ul>
-      
-    </div>
-  </div>
-  
-  <div class="ci-card">
-    
-    <img class="ci-img" src="../figma-assets/card_img_construction.png" alt="시공 단계">
-    
-    <div class="ci-body">
-      <div class="ci-title" style="color: #006aff">시공 단계</div>
-      <div class="ci-title-en">Construction Stage</div>
-      <div class="ci-divider"></div>
-      <ul class="ci-list">
-        
-        <li>향상된 건설 계획과 공정 순서 관리</li>
-        
-        <li>Big Room 등 환경을 통한 협업 및 조정</li>
-        
-        <li>정확한 수량산출서와 비용 산정</li>
-        
-      </ul>
-      
-    </div>
-  </div>
-  
-  <div class="ci-card">
-    
-    <img class="ci-img" src="../figma-assets/card_img_maintenance.png" alt="유지관리 단계">
-    
-    <div class="ci-body">
-      <div class="ci-title" style="color: #004cbe">유지관리 단계</div>
-      <div class="ci-title-en">Maintenance Stage</div>
-      <div class="ci-divider"></div>
-      <ul class="ci-list">
-        
-        <li>자산 정보 및 데이터 관리</li>
-        
-        <li>예측 기반 유지보수 및 생애주기 분석</li>
-        
-        <li>효율적인 시설 운영 및 지속가능한 관리</li>
-        
-      </ul>
-      
-    </div>
-  </div>
-  
-</div>
-
-<style>
-.block-card-image {
-  display: grid;
-  grid-template-columns: repeat(var(--ci-count, 3), 1fr);
-  gap: 16px;
-}
-.ci-card {
-  background: var(--color-bg, #ffffff);
-  border-radius: var(--radius, 8px);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.ci-img {
-  width: 100%;
-  height: 160px;
-  object-fit: contain;
-  background: #f8f9fb;
-  padding: 10px;
-}
-.ci-body {
-  padding: 16px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-.ci-title {
-  font-size: 14px;
-  font-weight: var(--weight-bold, 700);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  margin-bottom: 2px;
-}
-.ci-title-en {
-  font-size: 12px;
-  font-weight: var(--weight-normal, 400);
-  color: var(--color-text-secondary, #666);
-  margin-bottom: 10px;
-}
-.ci-divider {
-  width: 100%;
-  height: 1px;
-  background: #000;
-  margin-bottom: 10px;
-}
-.ci-list {
-  list-style: disc;
-  padding-left: 18px;
-  font-size: 13px;
-  line-height: 1.7;
-  color: var(--color-text, #000);
-  flex: 1;
-}
-.ci-list li {
-  margin-bottom: 3px;
-}
-.ci-source {
-  font-size: 11px;
-  color: var(--color-text-light, #94a3b8);
-  font-style: italic;
-  margin-top: 8px;
-  border-top: 1px solid var(--color-border, #e2e8f0);
-  padding-top: 6px;
-}
-</style></div></body>
-</html>

docs/block-tests/cards_card-image-round.html

@@ -1,133 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-image-round</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 원형 이미지 카드: 원형 이미지 + 하단 제목/설명 -->
-<!--
-  📋 card-image-round
-  ─────────────────
-  용도: 포트폴리오형, 팀 소개, 가치/비전 표현 (원형 이미지가 핵심)
-  슬롯: cards[] (각 카드에 image, title, description)
-  Figma 원본: 1장_가치 하단 3열 원형 이미지 + 설명
--->
-<div class="block-card-round" style="--cr-count: 3">
-  
-  <div class="cr-card">
-    
-    <div class="cr-img-wrap">
-      <img src="../figma-assets/card_img_design.png" alt="설계 혁신">
-    </div>
-    
-    <div class="cr-title">설계 혁신</div>
-    <div class="cr-desc">3D 모델 기반
-통합 설계</div>
-  </div>
-  
-  <div class="cr-card">
-    
-    <div class="cr-img-wrap">
-      <img src="../figma-assets/card_img_construction.png" alt="시공 효율">
-    </div>
-    
-    <div class="cr-title">시공 효율</div>
-    <div class="cr-desc">디지털 관리
-품질 향상</div>
-  </div>
-  
-  <div class="cr-card">
-    
-    <div class="cr-img-wrap">
-      <img src="../figma-assets/card_img_maintenance.png" alt="유지관리">
-    </div>
-    
-    <div class="cr-title">유지관리</div>
-    <div class="cr-desc">생애주기
-자산 관리</div>
-  </div>
-  
-</div>
-
-<style>
-.block-card-round {
-  display: grid;
-  grid-template-columns: repeat(var(--cr-count, 3), 1fr);
-  gap: 24px;
-  text-align: center;
-}
-.cr-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.cr-img-wrap {
-  width: 140px;
-  height: 140px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: 3px solid #e2e8f0;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-  margin-bottom: 12px;
-}
-.cr-img-wrap img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.cr-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: #1e293b;
-  margin-bottom: 4px;
-}
-.cr-desc {
-  font-size: 13px;
-  color: #475569;
-  line-height: 1.6;
-  white-space: pre-line;
-  max-width: 200px;
-}
-</style></div></body></html>

docs/block-tests/cards_card-numbered.html

@@ -1,136 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-numbered</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 번호 카드: 순서 번호 + 제목 + 설명 (세로 나열) -->
-<!--
-  📋 card-numbered
-  ─────────────────
-  용도: 순서가 있는 항목 나열 (1. 2. 3.), 실행 조건, 요구사항
-  슬롯: items[] (각 항목에 title, description)
-  card-icon-desc와 다른 점: 아이콘 대신 순서 번호, 세로 나열
--->
-<div class="block-card-num">
-  
-  <div class="cn-item">
-    <div class="cn-number" style="background: #2563eb">1</div>
-    <div class="cn-body">
-      <div class="cn-title">요구사항 분석</div>
-      <div class="cn-desc">디지털 전환 목표 수립
-사용자 요구사항 수집</div>
-    </div>
-  </div>
-  
-  <div class="cn-item">
-    <div class="cn-number" style="background: #059669">2</div>
-    <div class="cn-body">
-      <div class="cn-title">S/W 개발</div>
-      <div class="cn-desc">건설산업 디지털화를 위한
-솔루션 개발 및 업그레이드</div>
-    </div>
-  </div>
-  
-  <div class="cn-item">
-    <div class="cn-number" style="background: #7c3aed">3</div>
-    <div class="cn-body">
-      <div class="cn-title">System 통합</div>
-      <div class="cn-desc">기존 시스템 호환성 분석
-API 데이터 통합</div>
-    </div>
-  </div>
-  
-  <div class="cn-item">
-    <div class="cn-number" style="background: #dc2626">4</div>
-    <div class="cn-body">
-      <div class="cn-title">교육/피드백</div>
-      <div class="cn-desc">사용자 교육 프로그램
-지속적 모니터링 & 개선</div>
-    </div>
-  </div>
-  
-</div>
-
-<style>
-.block-card-num {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.cn-item {
-  display: flex;
-  gap: 14px;
-  align-items: flex-start;
-  padding: 12px 16px;
-  background: #f8fafc;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-}
-.cn-number {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  font-size: 14px;
-  font-weight: 800;
-  flex-shrink: 0;
-}
-.cn-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: #1e293b;
-  margin-bottom: 2px;
-}
-.cn-desc {
-  font-size: 13px;
-  color: #475569;
-  line-height: 1.7;
-  white-space: pre-line;
-}
-</style></div></body></html>

docs/block-tests/cards_card-stat-number.html

@@ -1,129 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-stat-number</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 통계 숫자 카드: 큰 숫자 + 라벨 + 설명 -->
-<!--
-  📋 card-stat-number
-  ─────────────────
-  용도: KPI, 성과 수치, 목표 달성률, 비용 절감율 등 핵심 지표 강조
-  슬롯: stats[] (각 항목에 number, unit, label, description, color)
-  Figma 참고: 건설 정책 수치 (30% 절감, 40% 감소 등)
--->
-<div class="block-stat" style="--st-count: 4">
-  
-  <div class="st-card">
-    <div class="st-number" style="color: #2563eb">
-      30<span class="st-unit">%</span>
-    </div>
-    <div class="st-label">공기/공사비 절감</div>
-    
-  </div>
-  
-  <div class="st-card">
-    <div class="st-number" style="color: #059669">
-      40<span class="st-unit">%</span>
-    </div>
-    <div class="st-label">안전사고 감소</div>
-    
-  </div>
-  
-  <div class="st-card">
-    <div class="st-number" style="color: #7c3aed">
-      220<span class="st-unit">명+</span>
-    </div>
-    <div class="st-label">IT+CIVIL ENG 인력</div>
-    
-  </div>
-  
-  <div class="st-card">
-    <div class="st-number" style="color: #dc2626">
-      80<span class="st-unit">개+</span>
-    </div>
-    <div class="st-label">전용 S/W 개발</div>
-    
-  </div>
-  
-</div>
-
-<style>
-.block-stat {
-  display: grid;
-  grid-template-columns: repeat(var(--st-count, 3), 1fr);
-  gap: 16px;
-}
-.st-card {
-  text-align: center;
-  padding: 20px 12px;
-  background: #f8fafc;
-  border-radius: 10px;
-  border: 1px solid #e2e8f0;
-}
-.st-number {
-  font-size: 36px;
-  font-weight: 900;
-  line-height: 1.2;
-}
-.st-unit {
-  font-size: 18px;
-  font-weight: 700;
-  margin-left: 2px;
-}
-.st-label {
-  font-size: 14px;
-  font-weight: 700;
-  color: #1e293b;
-  margin-top: 6px;
-}
-.st-desc {
-  font-size: 12px;
-  color: #64748b;
-  margin-top: 4px;
-  line-height: 1.5;
-  white-space: pre-line;
-}
-</style></div></body></html>

docs/block-tests/cards_card-step-vertical.html

@@ -1,170 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-step-vertical</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 세로 단계 카드: 좌측 단계 마커 + 우측 이미지/텍스트 -->
-<!--
-  📋 card-step-vertical
-  ─────────────────
-  용도: 생애주기 단계별 설명, 시간순 프로세스 (설계→시공→운영→유지관리)
-  슬롯: steps[] (각 단계에 phase, title, description, image, color)
-  Figma 원본: 2-3_04 "건설 생애주기와 정보모델 연계" (설계단계/시공단계/운영관리/유지관리)
--->
-<div class="block-step-v">
-  
-  <div class="sv-step">
-    <div class="sv-marker" style="background: #00aaff">
-      <div class="sv-phase">설계단계</div>
-    </div>
-    <div class="sv-content">
-      <div class="sv-title">BIM 기반 3D 설계</div>
-      
-      <div class="sv-desc">• 고도화된 BIM 구현
-• 시뮬레이션 분석 & 성능평가</div>
-    </div>
-  </div>
-  
-  <div class="sv-connector">
-    <div class="sv-line" style="background: #00aaff"></div>
-  </div>
-  
-  
-  <div class="sv-step">
-    <div class="sv-marker" style="background: #006aff">
-      <div class="sv-phase">시공단계</div>
-    </div>
-    <div class="sv-content">
-      <div class="sv-title">현장 디지털 관리</div>
-      
-      <div class="sv-desc">• 공정 순서 관리
-• Big Room 협업 환경</div>
-    </div>
-  </div>
-  
-  <div class="sv-connector">
-    <div class="sv-line" style="background: #006aff"></div>
-  </div>
-  
-  
-  <div class="sv-step">
-    <div class="sv-marker" style="background: #004cbe">
-      <div class="sv-phase">운영단계</div>
-    </div>
-    <div class="sv-content">
-      <div class="sv-title">디지털 트윈 운영</div>
-      
-      <div class="sv-desc">• 실시간 모니터링
-• 예측 기반 유지보수</div>
-    </div>
-  </div>
-  
-  
-</div>
-
-<style>
-.block-step-v {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-.sv-step {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-}
-.sv-marker {
-  width: 100px;
-  flex-shrink: 0;
-  border-radius: 8px;
-  padding: 10px 12px;
-  text-align: center;
-  color: #ffffff;
-}
-.sv-phase {
-  font-size: 13px;
-  font-weight: 700;
-  white-space: nowrap;
-}
-.sv-content {
-  flex: 1;
-  background: #f8fafc;
-  border-radius: 8px;
-  padding: 14px;
-  border: 1px solid #e2e8f0;
-}
-.sv-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: #1e293b;
-  margin-bottom: 8px;
-}
-.sv-img {
-  width: 100%;
-  max-height: 150px;
-  object-fit: cover;
-  border-radius: 6px;
-  margin-bottom: 8px;
-}
-.sv-desc {
-  font-size: 13px;
-  color: #475569;
-  line-height: 1.7;
-  white-space: pre-line;
-}
-.sv-connector {
-  display: flex;
-  justify-content: 50px;
-  padding-left: 48px;
-  height: 20px;
-}
-.sv-line {
-  width: 3px;
-  height: 100%;
-  border-radius: 2px;
-  opacity: 0.4;
-}
-</style></div></body></html>

docs/block-tests/cards_card-tag-image.html

@@ -1,132 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head><meta charset="UTF-8"><title>cards/card-tag-image</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head>
-<body><div class="block-container"><!-- 태그 카드: 상단 태그 라벨 + 이미지 + 설명 -->
-<!--
-  📋 card-tag-image
-  ─────────────────
-  용도: 카테고리별 분류 (제조/건축/토목 등), 태그로 구분되는 항목
-  슬롯: cards[] (각 카드에 tag, tag_color, image, title, description)
-  Figma 원본: 2-3_01 "산업별 특성과 현장의 모습" (제조, 건축, 인프라/토목)
--->
-<div class="block-card-tag" style="--ct-count: 3">
-  
-  <div class="ct-card">
-    <div class="ct-tag" style="background: #2563eb">제조</div>
-    
-    <div class="ct-title">제조업 현장</div>
-    <div class="ct-desc">반복적 공정
-표준화된 부품
-자동화 라인</div>
-  </div>
-  
-  <div class="ct-card">
-    <div class="ct-tag" style="background: #059669">건축</div>
-    
-    <div class="ct-title">건축 현장</div>
-    <div class="ct-desc">수직적 작업공간
-Library 기반 설계
-반복 요소 활용</div>
-  </div>
-  
-  <div class="ct-card">
-    <div class="ct-tag" style="background: #dc2626">인프라/토목</div>
-    
-    <div class="ct-title">인프라 현장</div>
-    <div class="ct-desc">수평적 작업공간
-비반복적 공정
-GIS 기반 위치정보 필수</div>
-  </div>
-  
-</div>
-
-<style>
-.block-card-tag {
-  display: grid;
-  grid-template-columns: repeat(var(--ct-count, 3), 1fr);
-  gap: 16px;
-}
-.ct-card {
-  background: #ffffff;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.ct-tag {
-  display: inline-block;
-  padding: 4px 14px;
-  font-size: 12px;
-  font-weight: 700;
-  color: #ffffff;
-  border-radius: 0 0 8px 0;
-  align-self: flex-start;
-}
-.ct-img {
-  width: 100%;
-  height: 140px;
-  object-fit: cover;
-}
-.ct-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: #1e293b;
-  padding: 10px 14px 4px;
-}
-.ct-desc {
-  font-size: 13px;
-  color: #475569;
-  line-height: 1.7;
-  padding: 0 14px 14px;
-  white-space: pre-line;
-}
-</style></div></body></html>

docs/block-tests/cards_card-text-grid.html

@@ -1,137 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>cards/card-text-grid</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 카드 그리드 블록: 2~4열 카드 배열 -->
-<div class="block-card-grid" style="--card-count: 3">
-    
-    <div class="card" style="border-top-color: None">
-        
-        <div class="card-title">건설산업</div>
-        <span class="card-category">종합산업</span>
-        <div class="card-description">다양한 시설물을 광범위한 기술을 통합·융합하여 만들어내는 종합산업</div>
-        
-    </div>
-    
-    <div class="card" style="border-top-color: None">
-        
-        <div class="card-title">BIM</div>
-        <span class="card-category">핵심 인프라 기술</span>
-        <div class="card-description">시설물 생애주기 정보를 3D 모델 기반으로 통합·관리하는 도구</div>
-        <div class="card-source">국토교통부, 2020</div>
-    </div>
-    
-    <div class="card" style="border-top-color: None">
-        
-        <div class="card-title">DX</div>
-        <span class="card-category">패러다임 변화</span>
-        <div class="card-description">디지털 기술 기반으로 업무방식과 가치 창출 구조를 전환하는 과정</div>
-        <div class="card-source">IBM, 2011</div>
-    </div>
-    
-</div>
-
-<style>
-.block-card-grid {
-    display: grid;
-    grid-template-columns: repeat(var(--card-count, 3), 1fr);
-    gap: var(--spacing-inner);
-    height: 100%;
-}
-.card {
-    background: var(--color-bg);
-    border: var(--border-width) solid var(--color-border);
-    border-top: var(--accent-border) solid var(--color-accent);
-    border-radius: var(--radius);
-    padding: var(--spacing-inner);
-    display: flex;
-    flex-direction: column;
-}
-.card-icon {
-    font-size: 1.5rem;
-    margin-bottom: var(--spacing-small);
-}
-.card-title {
-    font-size: var(--font-subtitle);
-    font-weight: var(--weight-bold);
-    color: var(--color-primary);
-    margin-bottom: 4px;
-}
-.card-category {
-    font-size: var(--font-small);
-    font-weight: var(--weight-medium);
-    color: var(--color-accent);
-    background: #dbeafe;
-    padding: 2px 8px;
-    border-radius: 12px;
-    display: inline-block;
-    margin-bottom: var(--spacing-small);
-    width: fit-content;
-}
-.card-description {
-    font-size: var(--font-body);
-    color: var(--color-text);
-    line-height: var(--line-height-ko);
-    flex: 1;
-}
-.card-source {
-    font-size: var(--font-small);
-    color: var(--color-text-light);
-    font-style: italic;
-    margin-top: var(--spacing-small);
-    border-top: var(--border-width) solid var(--color-border);
-    padding-top: var(--spacing-small);
-}
-</style></div></body>
-</html>

docs/block-tests/circle-label.html

@@ -1,133 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>블록 테스트: circle-label</title>
-<style>
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body {
-    font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
-    background: #e8ecf0;
-    display: flex;
-    justify-content: center;
-    padding: 30px;
-    margin: 0;
-}
-.block-container {
-    width: 920px;
-    background: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-}
-.block-container .block-section-title {
-    margin: -20px -20px 0;
-    border-radius: 8px 8px 0 0;
-    overflow: hidden;
-}
-</style>
-</head>
-<body>
-<div class="block-container">
-<!-- 원형 라벨: CSS 그라데이션 원 + 중앙 텍스트 -->
-<!--
-  📋 circle-label
-  ─────────────────
-  용도: 섹션 전환점, 핵심 키워드 강조, 시각적 구분자
-  슬롯: label (필수), sub_label (선택)
-  Figma 원본: 2-1_02 > Group 1171281590 (190x190)
--->
-<div class="block-circle-label">
-  <div class="cl-outer">
-    <div class="cl-inner">
-      <div class="cl-text">단계별
-BIM의 활용</div>
-      
-    </div>
-  </div>
-</div>
-
-<style>
-.block-circle-label {
-  display: flex;
-  justify-content: center;
-  padding: 20px 0;
-}
-.cl-outer {
-  width: 190px;
-  height: 190px;
-  border-radius: 50%;
-  background: linear-gradient(180deg, #3db8ff 0%, #006aff 100%);
-  box-shadow: 0 0 30px rgba(0, 106, 255, 0.25), 0 0 60px rgba(0, 106, 255, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.cl-inner {
-  width: 170px;
-  height: 170px;
-  border-radius: 50%;
-  background: linear-gradient(180deg, #4dc4ff 0%, #0080ff 100%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  text-align: center;
-}
-.cl-text {
-  font-size: 20px;
-  font-weight: var(--weight-bold, 700);
-  line-height: 1.4;
-}
-.cl-sub {
-  font-size: 12px;
-  opacity: 0.8;
-  margin-top: 4px;
-}
-</style>
-</div>
-</body>
-</html>

docs/block-tests/compare-box.html

@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>compare-box</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 비교 박스: 둥근 테두리 박스 2개 + VS 라벨 -->
-<!--
-  📋 compare-box
-  ─────────────────
-  용도: 2개 개념을 시각적으로 대비 (비교 테이블 위 헤더로 사용)
-  슬롯: left_label, left_sub, right_label, right_sub
-  Figma 원본: 2-1_02 > 하늘색 둥근 박스 2개 + 시안 텍스트
--->
-<div class="block-compare-box">
-  <div class="cb-item">
-    <div class="cb-text">
-      <div class="cb-label">디지털 기술을 활용한
-협업 프로세스</div>
-      
-    </div>
-  </div>
-  <div class="cb-vs">VS</div>
-  <div class="cb-item">
-    <div class="cb-text">
-      <div class="cb-label">시설물의 전 생애주기 동안
-정보의 생성 및 관리</div>
-      
-    </div>
-  </div>
-</div>
-
-<style>
-.block-compare-box {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  justify-content: center;
-  padding: 15px 0;
-}
-.cb-item {
-  width: 340px;
-  height: 110px;
-  border-radius: 55px;
-  border: 3px solid #7ec8f0;
-  background: linear-gradient(135deg, #e8f4fd 0%, #d4ecfa 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 10px rgba(0, 140, 220, 0.1);
-}
-.cb-text {
-  text-align: center;
-}
-.cb-label {
-  font-size: 19px;
-  font-weight: 800;
-  color: #0090d0;
-  line-height: 1.4;
-}
-.cb-sub {
-  font-size: 13px;
-  color: #0090d0;
-  margin-top: 3px;
-  line-height: 1.5;
-  white-space: pre-line;
-  font-weight: 500;
-}
-.cb-vs {
-  font-size: 22px;
-  font-weight: 700;
-  color: #333;
-  flex-shrink: 0;
-}
-</style></div></body>
-</html>

docs/block-tests/comparison-table.html

@@ -1,278 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>comparison-table</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 비교 테이블: BIM vs DX 스타일 3단 테이블 -->
-<!--
-  📋 comparison-table
-  ─────────────────
-  용도: 다항목 비교 (좌측 A | 중앙 기준 | 우측 B)
-  슬롯: headers[] (3개), rows[][] (각 행 3칸)
-  Figma 원본: 2-1_02 > BIM VS D/X 테이블
-  특징: 중앙 칼럼에 파란 그라데이션 배지, 좌우 불릿 대비
--->
-<div class="block-table-figma">
-  <table>
-    <thead>
-      <tr>
-        
-        <th class="th-left">
-          BIM
-        </th>
-        
-        <th class="th-center">
-          <span class="th-badge">VS</span>
-        </th>
-        
-        <th class="th-right">
-          D/X
-        </th>
-        
-      </tr>
-    </thead>
-    <tbody>
-      
-      <tr>
-        
-        <td class="td-left">• Only 3D</td>
-        
-        <td class="td-center">BIM · D/X</td>
-        
-        <td class="td-right">• BIM ≪ D/X (ENG. + Management 포함)</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 모델 제작용 상용 S/W
-(Civil 3D, Revit, Navisworks, Autocad)</td>
-        
-        <td class="td-center">S/W</td>
-        
-        <td class="td-right">• 제작 및 운영(상용 + 전용 40~80개)
-[Rhino, Sketchup, Blender...] + [EG-BIM 등]</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 기존 2D 설계방식 유지</td>
-        
-        <td class="td-center">프로세스</td>
-        
-        <td class="td-right">• 근본적 문제의식을 통한 개선</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 3D 모델 중심
-• 기존 성과품 유지</td>
-        
-        <td class="td-center">성과물</td>
-        
-        <td class="td-right">• 공학 정보 및 콘텐츠 연계에 집중
-• 도면, 수량, 시공계획 등 일식</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 3D 모델에 의한 일반적 이해 향상</td>
-        
-        <td class="td-center">활용</td>
-        
-        <td class="td-right">• 설계/시공의 혁신(개념의 재정립)</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• (설계/시공/운영) 분야별 단절</td>
-        
-        <td class="td-center">확장성</td>
-        
-        <td class="td-right">• 전 생애주기 활용 시스템</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 단순화(오류) - 수동적/집단적 동질화</td>
-        
-        <td class="td-center">수행개념</td>
-        
-        <td class="td-right">• 구체화(복잡) - 적극/구체적 실현 방안</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 소극적, 상용 기술에 의존</td>
-        
-        <td class="td-center">CIVIL + IT</td>
-        
-        <td class="td-right">• 적극적, 주체적인 기술 접목/융합</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• S/W 제작사 판매 정책에 의존</td>
-        
-        <td class="td-center">주체</td>
-        
-        <td class="td-right">• 자체 수행능력 - 지속가능성 확보</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 평준화, 국내 중심</td>
-        
-        <td class="td-center">발주처</td>
-        
-        <td class="td-right">• 차별화 및 경쟁력 확보, 해외 진출</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 소규모 BIM팀 운영 + 단순교육에 집중</td>
-        
-        <td class="td-center">설계사</td>
-        
-        <td class="td-right">• IT + CIVIL ENG 220명 운영 + 기술 개발</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 국내 토목 소극적/ 해외 토목증가</td>
-        
-        <td class="td-center">시공사</td>
-        
-        <td class="td-right">• 분야 확장 모델 및 시스템</td>
-        
-      </tr>
-      
-    </tbody>
-  </table>
-</div>
-
-<style>
-.block-table-figma {
-  overflow: auto;
-}
-.block-table-figma table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  line-height: 1.7;
-}
-
-/* 헤더 */
-.block-table-figma thead th {
-  padding: 14px 12px;
-  font-size: 16px;
-  font-weight: 700;
-  border-bottom: 2px solid #e8edf2;
-}
-.th-left {
-  text-align: center;
-  color: #6bcdff;
-}
-.th-center {
-  text-align: center;
-  width: 120px;
-}
-.th-badge {
-  display: inline-block;
-  background: linear-gradient(135deg, #006eff 0%, #00aaff 100%);
-  color: #ffffff;
-  font-size: 15px;
-  font-weight: 700;
-  padding: 8px 28px;
-  border-radius: 25px;
-}
-.th-right {
-  text-align: center;
-  color: #006eff;
-}
-
-/* 본문 */
-.block-table-figma tbody td {
-  padding: 10px 14px;
-  border-bottom: 1px solid #f0f2f5;
-  vertical-align: middle;
-}
-.td-left {
-  text-align: center;
-  color: #444;
-}
-.td-center {
-  text-align: center;
-  font-weight: 700;
-  color: #333;
-  background: #f6f8fb;
-  font-size: 13px;
-}
-.td-right {
-  text-align: center;
-  color: #444;
-}
-.block-table-figma tbody tr:hover {
-  background: #fafbfd;
-}
-</style></div></body>
-</html>

docs/block-tests/conclusion-bar.html

@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>conclusion-bar</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 결론 바: Figma 톤에 맞춘 하단 핵심 메시지 -->
-<!--
-  📋 conclusion-bar
-  ─────────────────
-  용도: 슬라이드/페이지 하단 핵심 한 줄 요약
-  슬롯: conclusion_text (필수), label (선택)
-  Figma 톤: 밝은 회색 배경 + 좌측 파란 액센트 라인 + 진한 텍스트
--->
-<div class="block-conclusion-figma">
-  <div class="cf-label">핵심 요약</div>
-  <div class="cf-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
-</div>
-
-<style>
-.block-conclusion-figma {
-  background: #f4f6f9;
-  border-left: 4px solid #006aff;
-  border-radius: 0 8px 8px 0;
-  padding: 18px 28px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.cf-label {
-  font-size: 11px;
-  font-weight: 600;
-  color: #006aff;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-.cf-text {
-  font-size: 15px;
-  font-weight: 700;
-  color: #1e293b;
-  line-height: 1.6;
-  word-break: keep-all;
-}
-</style></div></body>
-</html>

docs/block-tests/emphasis_banner-gradient.html

@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>emphasis/banner-gradient</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 그라데이션 배너 바: 전체 너비 파란 그라데이션 + 중앙 텍스트 -->
-<!--
-  📋 banner-gradient
-  ─────────────────
-  용도: 섹션 구분, 핵심 선언, 강조 문구를 전체 너비 배너로
-  슬롯: text (필수), sub_text (선택)
-  Figma 원본: 2-2_01 하단, 2-2_03 분류 바
--->
-<div class="block-banner-grad">
-  <div class="bg-text">Engineering Software는 건설산업 DX를 실현하기 위한 핵심 도구입니다</div>
-  <div class="bg-sub">단순 도구가 아닌, 엔지니어의 전문지식과 프로세스를 디지털화하는 기반 기술</div>
-</div>
-
-<style>
-.block-banner-grad {
-  background: linear-gradient(135deg, #006aff 0%, #00aaff 100%);
-  border-radius: 8px;
-  padding: 16px 30px;
-  text-align: center;
-  color: #ffffff;
-}
-.bg-text {
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1.5;
-}
-.bg-sub {
-  font-size: 12px;
-  font-weight: 400;
-  opacity: 0.85;
-  margin-top: 4px;
-}
-</style></div></body>
-</html>

docs/block-tests/emphasis_callout-solution.html

@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/callout-solution</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 솔루션 콜아웃: 강조 배경 + 아이콘 + 제목 + 설명 -->
-<!--
-  📋 callout-solution
-  ─────────────────
-  용도: 핵심 해결책/솔루션/방향성 강조. 눈에 띄는 콜아웃 박스.
-  슬롯: icon (선택), title (필수), description (필수), source (선택)
-  Figma 원본: 2-3_05 "Solution 제시 포인트"
--->
-<div class="block-callout-sol">
-  <div class="cs-icon">💡</div>
-  <div class="cs-body">
-    <div class="cs-title">Solution 제시 포인트</div>
-    <div class="cs-desc">지금의 방식 속에서도 앞으로도 지속적으로 가능할까?
-건설산업의 디지털 전환을 위해 근본적인 변화가 필요한 시점입니다.</div>
-    <div class="cs-source">건설산업 DX 전략 보고서</div>
-  </div>
-</div>
-
-<style>
-.block-callout-sol {
-  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-  border: 2px solid #93c5fd;
-  border-radius: 12px;
-  padding: 20px 24px;
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-}
-.cs-icon {
-  font-size: 2rem;
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-.cs-body {
-  flex: 1;
-}
-.cs-title {
-  font-size: 17px;
-  font-weight: 800;
-  color: #1e40af;
-  margin-bottom: 6px;
-}
-.cs-desc {
-  font-size: 14px;
-  color: #334155;
-  line-height: 1.7;
-  white-space: pre-line;
-  word-break: keep-all;
-}
-.cs-source {
-  font-size: 11px;
-  color: #64748b;
-  font-style: italic;
-  margin-top: 8px;
-}
-</style></div></body></html>

docs/block-tests/emphasis_callout-warning.html

@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/callout-warning</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 경고 콜아웃: 주의/경고/문제점 강조 -->
-<!--
-  📋 callout-warning
-  ─────────────────
-  용도: 문제점 지적, 주의사항, 잘못된 접근 경고
-  슬롯: title (필수), description (필수), icon (선택)
-  callout-solution과 다른 점: 경고 톤 (빨간/주황), 문제 지적용
--->
-<div class="block-callout-warn">
-  <div class="cw-icon">⚠️</div>
-  <div class="cw-body">
-    <div class="cw-title">현재 접근 방식의 한계</div>
-    <div class="cw-desc">단순 BIM S/W 도입만으로는 DX를 달성할 수 없습니다.
-기존 2D 설계방식 위에 3D를 덧씌우는 접근은
-비용 증가와 효율 저하를 초래합니다.</div>
-  </div>
-</div>
-
-<style>
-.block-callout-warn {
-  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
-  border: 2px solid #fca5a5;
-  border-radius: 12px;
-  padding: 20px 24px;
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
-}
-.cw-icon {
-  font-size: 2rem;
-  flex-shrink: 0;
-}
-.cw-body { flex: 1; }
-.cw-title {
-  font-size: 17px;
-  font-weight: 800;
-  color: #991b1b;
-  margin-bottom: 6px;
-}
-.cw-desc {
-  font-size: 14px;
-  color: #7f1d1d;
-  line-height: 1.7;
-  white-space: pre-line;
-  word-break: keep-all;
-}
-</style></div></body></html>

docs/block-tests/emphasis_comparison-2col.html

@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>emphasis/comparison-2col</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 비교 블록: 2단 병렬 레이아웃 -->
-<div class="block-comparison">
-    <div class="comparison-left">
-        <div class="comparison-header comparison-header--left">잘못된 인식</div>
-        
-        <div class="comparison-content">• BIM 기술 도입 = DX 완성
-• DX를 단순 기술 도입으로 한정
-• 개별 기술 중심의 접근</div>
-    </div>
-    <div class="comparison-divider"></div>
-    <div class="comparison-right">
-        <div class="comparison-header comparison-header--right">올바른 이해</div>
-        
-        <div class="comparison-content">• DX는 BIM을 포함한 상위 개념
-• 산업 패러다임의 근본적 변화
-• GIS-BIM-디지털트윈 기술 융합 필수</div>
-    </div>
-</div>
-
-<style>
-.block-comparison {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    gap: var(--spacing-inner);
-    height: 100%;
-}
-.comparison-divider {
-    width: 1px;
-    background: var(--color-border);
-}
-.comparison-header {
-    font-size: var(--font-subtitle);
-    font-weight: var(--weight-bold);
-    padding-bottom: var(--spacing-small);
-    margin-bottom: var(--spacing-small);
-    border-bottom: var(--accent-border) solid;
-}
-.comparison-header--left {
-    border-color: var(--color-accent);
-    color: var(--color-accent);
-}
-.comparison-header--right {
-    border-color: var(--color-danger);
-    color: var(--color-danger);
-}
-.comparison-subtitle {
-    font-size: var(--font-caption);
-    color: var(--color-text-secondary);
-    margin-bottom: var(--spacing-small);
-}
-.comparison-content {
-    font-size: var(--font-body);
-    line-height: var(--line-height-ko);
-}
-</style></div></body>
-</html>

docs/block-tests/emphasis_conclusion-accent-bar.html

@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>emphasis/conclusion-accent-bar</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 결론 바: Figma 톤에 맞춘 하단 핵심 메시지 -->
-<!--
-  📋 conclusion-bar
-  ─────────────────
-  용도: 슬라이드/페이지 하단 핵심 한 줄 요약
-  슬롯: conclusion_text (필수), label (선택)
-  Figma 톤: 밝은 회색 배경 + 좌측 파란 액센트 라인 + 진한 텍스트
--->
-<div class="block-conclusion-figma">
-  <div class="cf-label">핵심 요약</div>
-  <div class="cf-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
-</div>
-
-<style>
-.block-conclusion-figma {
-  background: #f4f6f9;
-  border-left: 4px solid #006aff;
-  border-radius: 0 8px 8px 0;
-  padding: 18px 28px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.cf-label {
-  font-size: 11px;
-  font-weight: 600;
-  color: #006aff;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-.cf-text {
-  font-size: 15px;
-  font-weight: 700;
-  color: #1e293b;
-  line-height: 1.6;
-  word-break: keep-all;
-}
-</style></div></body>
-</html>

docs/block-tests/emphasis_dark-bullet-list.html

@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head><meta charset="UTF-8"><title>emphasis/dark-bullet-list</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head>
-<body><div class="block-container"><!-- 다크 배경 불릿 리스트: 짙은 배경 + 흰 텍스트 불릿 목록 -->
-<!--
-  📋 dark-bullet-list
-  ─────────────────
-  용도: 핵심 포인트를 짙은 배경 위에 강조. 시각적 무게감.
-  슬롯: title (선택), bullets[] (필수)
-  Figma 원본: 2-2_01 하단, 2-3_01 하단 다크 섹션
--->
-<div class="block-dark-bullets">
-  <div class="db-title">건설산업 DX의 핵심 과제</div>
-  <ul class="db-list">
-    
-    <li>기존 2D 설계방식의 근본적 한계 인식</li>
-    
-    <li>3D 모델 기반의 정보 통합·관리 체계 구축</li>
-    
-    <li>전 생애주기 데이터 연계 및 활용 시스템 도입</li>
-    
-    <li>디지털 트윈 기반 시뮬레이션 및 의사결정 지원</li>
-    
-  </ul>
-</div>
-
-<style>
-.block-dark-bullets {
-  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
-  border-radius: 8px;
-  padding: 20px 28px;
-  color: #ffffff;
-}
-.db-title {
-  font-size: 16px;
-  font-weight: 700;
-  margin-bottom: 12px;
-  color: #93c5fd;
-}
-.db-list {
-  list-style: none;
-  padding: 0;
-}
-.db-list li {
-  font-size: 14px;
-  line-height: 1.8;
-  padding-left: 16px;
-  position: relative;
-  margin-bottom: 4px;
-}
-.db-list li::before {
-  content: '•';
-  position: absolute;
-  left: 0;
-  color: #60a5fa;
-}
-</style></div></body></html>

docs/block-tests/emphasis_divider-text.html

@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/divider-text</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 텍스트 구분선: 좌우 선 + 중앙 텍스트 -->
-<!--
-  📋 divider-text
-  ─────────────────
-  용도: 섹션 구분, 주제 전환, 시각적 휴식점
-  슬롯: text (필수)
--->
-<div class="block-divider-text">
-  <div class="dt-line"></div>
-  <div class="dt-text">핵심 요약</div>
-  <div class="dt-line"></div>
-</div>
-
-<style>
-.block-divider-text {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 8px 0;
-}
-.dt-line {
-  flex: 1;
-  height: 1px;
-  background: #cbd5e1;
-}
-.dt-text {
-  font-size: 13px;
-  font-weight: 600;
-  color: #64748b;
-  white-space: nowrap;
-}
-</style></div></body></html>

docs/block-tests/emphasis_highlight-strip.html

@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/highlight-strip</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 강조 스트립: 3구간 색상 분류 바 -->
-<!--
-  📋 highlight-strip
-  ─────────────────
-  용도: 카테고리별 색상 분류 (예: 상용/범용/전문), 비교 카드 상단 헤더
-  슬롯: segments[] (각 구간에 label, color)
-  Figma 원본: 2-2_03 "상용 | 3rd Party(범용) | 전문·전용 S/W" 색상 바
--->
-<div class="block-strip">
-  
-  <div class="strip-seg" style="background: #6b7280; flex: 1">
-    상용
-  </div>
-  
-  <div class="strip-seg" style="background: #2563eb; flex: 1.5">
-    3rd Party(범용)
-  </div>
-  
-  <div class="strip-seg" style="background: #dc2626; flex: 1.5">
-    전문·전용 S/W
-  </div>
-  
-</div>
-
-<style>
-.block-strip {
-  display: flex;
-  border-radius: 6px;
-  overflow: hidden;
-}
-.strip-seg {
-  padding: 10px 16px;
-  color: #ffffff;
-  font-size: 14px;
-  font-weight: 700;
-  text-align: center;
-  white-space: nowrap;
-}
-</style></div></body></html>

docs/block-tests/emphasis_quote-big-mark.html

@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/quote-big-mark</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 큰따옴표 장식 인용: ❝❞ 큰따옴표 + 인용 텍스트 -->
-<!--
-  📋 quote-big-mark
-  ─────────────────
-  용도: 문제 제기, 핵심 발언, 임팩트 있는 인용
-  슬롯: quote_text (필수), source (선택)
-  Figma 원본: DX와 BIM 슬라이드 상단 인용 박스 (큰따옴표 장식)
--->
-<div class="block-quote-big">
-  <div class="qb-mark qb-open">❝</div>
-  <div class="qb-content">
-    <div class="qb-text">건설산업의 디지털 전환 논의에서 DX와 BIM이 개념적으로 명확히 정립되지 않은 채 혼용되어 사용되고 있으며, 이로 인해 BIM 기술의 도입을 DX의 완성으로 오인하는 인식이 확산되고 있다</div>
-    <div class="qb-source">— 건설산업 DX 분석 보고서</div>
-  </div>
-  <div class="qb-mark qb-close">❞</div>
-</div>
-
-<style>
-.block-quote-big {
-  background: #f8fafc;
-  border-radius: 10px;
-  padding: 24px 28px;
-  position: relative;
-  border: 1px solid #e2e8f0;
-}
-.qb-mark {
-  font-size: 3rem;
-  color: #cbd5e1;
-  font-weight: 900;
-  line-height: 1;
-  position: absolute;
-}
-.qb-open {
-  top: 8px;
-  left: 12px;
-}
-.qb-close {
-  bottom: -8px;
-  right: 16px;
-}
-.qb-content {
-  padding: 10px 30px 0;
-}
-.qb-text {
-  font-size: 15px;
-  font-weight: 500;
-  color: #1e293b;
-  line-height: 1.8;
-  word-break: keep-all;
-  white-space: pre-line;
-}
-.qb-source {
-  font-size: 12px;
-  color: #64748b;
-  font-style: italic;
-  margin-top: 10px;
-  text-align: right;
-}
-</style></div></body></html>

docs/block-tests/emphasis_quote-left-border.html

@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>emphasis/quote-left-border</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 강조 인용 블록: 문제 제기, 핵심 메시지 -->
-<div class="block-quote">
-    <div class="quote-text">BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
-    <div class="quote-source">건설산업 BIM 기본지침, 국토교통부, 2020</div>
-</div>
-
-<style>
-.block-quote {
-    background: var(--color-bg-subtle);
-    border-left: var(--accent-border) solid var(--color-danger);
-    padding: var(--spacing-inner) var(--spacing-block);
-    border-radius: 0 var(--radius) var(--radius) 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-.quote-text {
-    font-size: var(--font-body);
-    color: var(--color-text);
-    line-height: var(--line-height-ko);
-    font-weight: var(--weight-medium);
-}
-.quote-source {
-    font-size: var(--font-caption);
-    color: var(--color-text-light);
-    font-style: italic;
-    margin-top: var(--spacing-small);
-}
-</style></div></body>
-</html>

docs/block-tests/emphasis_quote-question.html

@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>emphasis/quote-question</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 질문형 강조 박스: 큰 질문 텍스트 + 부연 설명 -->
-<!--
-  📋 quote-question
-  ─────────────────
-  용도: 독자에게 질문 던지기, 문제 인식 유도, 전환점 강조
-  슬롯: question (필수), description (선택)
-  Figma 원본: 2-3_05 "지금의 방식으로도 가능할까?"
--->
-<div class="block-quote-q">
-  <div class="qq-question">지금의 상황 속에서도 앞으로도,
-지속적으로 가능할까?</div>
-  <div class="qq-desc">지금의 방식으로 복잡해지는 건설 환경에 대응할 수 있을지, 근본적인 변화가 필요한 시점입니다.</div>
-</div>
-
-<style>
-.block-quote-q {
-  background: linear-gradient(135deg, #f0f7ff 0%, #e8f1fb 100%);
-  border: 2px solid #b8d4f0;
-  border-radius: 12px;
-  padding: 28px 36px;
-  text-align: center;
-}
-.qq-question {
-  font-size: 22px;
-  font-weight: 800;
-  color: #1e3a5f;
-  line-height: 1.5;
-  word-break: keep-all;
-}
-.qq-desc {
-  font-size: 14px;
-  color: #4a6b8a;
-  margin-top: 10px;
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body>
-</html>

docs/block-tests/emphasis_tab-label-row.html

@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/tab-label-row</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 탭 라벨 행: 가로로 나열된 탭 버튼 형태 -->
-<!--
-  📋 tab-label-row
-  ─────────────────
-  용도: 카테고리 전환, 분류 표시, 선택된 항목 강조
-  슬롯: tabs[] (각 탭에 label, active, color)
-  Figma 원본: 2-3_02 상단 "건축과 인프라의 건설프로세스 특성" 탭, 2-2_01 탭
--->
-<div class="block-tab-row">
-  
-  <div class="tr-tab " style="">
-    제조
-  </div>
-  
-  <div class="tr-tab " style="">
-    건축
-  </div>
-  
-  <div class="tr-tab tr-active" style="background: #2563eb">
-    인프라/토목
-  </div>
-  
-</div>
-
-<style>
-.block-tab-row {
-  display: flex;
-  gap: 4px;
-  background: #f1f5f9;
-  border-radius: 8px;
-  padding: 4px;
-}
-.tr-tab {
-  flex: 1;
-  padding: 10px 16px;
-  text-align: center;
-  font-size: 14px;
-  font-weight: 600;
-  color: #64748b;
-  border-radius: 6px;
-  cursor: default;
-}
-.tr-active {
-  color: #ffffff;
-  font-weight: 700;
-}
-</style></div></body></html>

docs/block-tests/headers_section-header-bar.html

@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head><meta charset="UTF-8"><title>headers/section-header-bar</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head>
-<body><div class="block-container"><!-- 섹션 헤더 바: 파란 배경 + 흰 텍스트 제목 -->
-<!--
-  📋 section-header-bar
-  ─────────────────
-  용도: 섹션 시작부 강조 헤더. 전체 너비 파란 바 + 흰 대제목.
-  슬롯: title (필수), subtitle (선택)
-  Figma 원본: 2-2_01 "Eng. S/W의 구성", "Eng. S/W의 특성"
--->
-<div class="block-section-bar">
-  <div class="sb-title">Eng. S/W의 구성</div>
-  <div class="sb-sub">Engineering Software Components</div>
-</div>
-
-<style>
-.block-section-bar {
-  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
-  border-radius: 6px;
-  padding: 14px 24px;
-  text-align: center;
-}
-.sb-title {
-  font-size: 18px;
-  font-weight: 800;
-  color: #ffffff;
-  line-height: 1.4;
-}
-.sb-sub {
-  font-size: 12px;
-  color: rgba(255,255,255,0.8);
-  margin-top: 4px;
-}
-</style></div></body></html>

docs/block-tests/headers_section-title-with-bg.html

@@ -1,123 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>headers/section-title-with-bg</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 섹션 타이틀: 배경 헤더 위 영문+한글 타이틀 오버레이 -->
-<!--
-  📋 section-title
-  ─────────────────
-  용도: 자세히보기 페이지 상단, 배경 이미지 위에 타이틀 표시
-  슬롯: title_ko (필수), title_en (선택), breadcrumb (선택), bg_image (선택)
-  Figma 원본: 공통 > section_title + bg 컴포넌트
--->
-<div class="block-section-title">
-  
-  <img class="st-bg" src="../figma-assets/bg_header.png" alt="">
-  
-  
-  <div class="st-breadcrumb">건설산업에서의 디지털전환 › BIM</div>
-  
-  <div class="st-text">
-    <div class="st-en">Building Information Modeling</div>
-    <div class="st-ko">건설정보모델링(BIM)</div>
-  </div>
-</div>
-
-<style>
-.block-section-title {
-  position: relative;
-  width: 100%;
-  height: 500px;
-  overflow: hidden;
-}
-.st-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: 1;
-}
-.st-bg-default {
-  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #4dc4ff 100%);
-}
-.st-breadcrumb {
-  position: absolute;
-  top: 18px;
-  left: 89px;
-  z-index: 5;
-  font-size: 13px;
-  color: rgba(255,255,255,0.7);
-}
-.st-text {
-  position: absolute;
-  bottom: 40px;
-  left: 89px;
-  z-index: 5;
-}
-.st-en {
-  font-size: 15px;
-  font-weight: var(--weight-normal, 400);
-  color: #ffffff;
-  opacity: 0.85;
-  margin-bottom: 4px;
-}
-.st-ko {
-  font-size: 35px;
-  font-weight: var(--weight-bold, 700);
-  color: #ffffff;
-  line-height: 1.3;
-}
-</style></div></body>
-</html>

docs/block-tests/headers_topic-center.html

@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>headers/topic-center</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 중앙 정렬 꼭지 헤더: 대제목 + 하단 설명 -->
-<!--
-  📋 topic-center
-  ─────────────────
-  용도: 단독 강조 꼭지, 페이지 중심 주제 선언
-  슬롯: title (필수), subtitle (선택), description (선택)
-  Figma 원본: 2-2_02 "디지털전환을 위한 S/W 필요성"
--->
-<div class="block-topic-center">
-  <div class="tc-title">디지털전환을 위한
-S/W 필요성</div>
-  <div class="tc-sub">Software Requirements for DX</div>
-  <div class="tc-desc">건설산업의 DX를 실현하기 위해서는 기존 상용 S/W의 한계를 넘어
-전문·전용 소프트웨어의 개발과 도입이 필수적입니다.</div>
-</div>
-
-<style>
-.block-topic-center {
-  text-align: center;
-  padding: 20px 40px;
-}
-.tc-title {
-  font-size: 26px;
-  font-weight: 900;
-  color: #1e293b;
-  line-height: 1.4;
-  word-break: keep-all;
-}
-.tc-sub {
-  font-size: 14px;
-  color: #2563eb;
-  font-weight: 600;
-  margin-top: 6px;
-}
-.tc-desc {
-  font-size: 15px;
-  color: #475569;
-  line-height: 1.7;
-  margin-top: 12px;
-  word-break: keep-all;
-  white-space: pre-line;
-}
-</style></div></body></html>

docs/block-tests/headers_topic-left-right.html

@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>headers/topic-left-right</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 꼭지 제목+설명: 좌측 질문/소제목 + 우측 설명 -->
-<!--
-  📋 topic-header
-  ─────────────────
-  용도: 각 꼭지의 시작부, 좌측에 파란 굵은 제목 + 우측에 본문 설명
-  슬롯: title (필수), description (필수)
-  비율: 좌 240px : 우 나머지
-  Figma 원본: sub_제목,내용 (742x68~78)
--->
-<div class="block-topic-header">
-  <div class="th-title">단순 BIM의 적용이
-D/X가 아닙니다</div>
-  <div class="th-desc">BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분임을 인지하는 것이 매우 중요합니다.</div>
-</div>
-
-<style>
-.block-topic-header {
-  display: flex;
-  gap: 20px;
-  padding: 12px 0;
-}
-.th-title {
-  width: 240px;
-  flex-shrink: 0;
-  font-size: 24px;
-  font-weight: var(--weight-bold, 700);
-  color: var(--color-accent-deep, #004cbe);
-  line-height: 1.4;
-  word-break: keep-all;
-}
-.th-desc {
-  flex: 1;
-  font-size: 16px;
-  font-weight: var(--weight-normal, 400);
-  color: var(--color-text, #000000);
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body>
-</html>

docs/block-tests/headers_topic-numbered.html

@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>headers/topic-numbered</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 번호 꼭지 헤더: 번호 원형 + 제목 + 구분선 + 설명 -->
-<!--
-  📋 topic-numbered
-  ─────────────────
-  용도: 순서가 있는 꼭지 시작, 단계별 섹션 헤더
-  슬롯: number, title, description (선택), color (선택)
-  topic-left-right와 다른 점: 좌우 배치가 아닌 번호+세로 배치
--->
-<div class="block-topic-num">
-  <div class="tn-header">
-    <div class="tn-number" style="background: #2563eb">1</div>
-    <div class="tn-title">건설산업의 디지털전환(DX)</div>
-  </div>
-  <div class="tn-divider" style="background: #2563eb"></div>
-  <div class="tn-desc">건설산업은 디지털 기술의 발전에 따라 빠르게 변화하고 있으며, 생산성 향상과 안전성 강화를 목표로 디지털전환이 가속화되고 있습니다.</div>
-</div>
-
-<style>
-.block-topic-num {
-  padding: 8px 0;
-}
-.tn-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.tn-number {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  font-size: 16px;
-  font-weight: 800;
-  flex-shrink: 0;
-}
-.tn-title {
-  font-size: 20px;
-  font-weight: 800;
-  color: #1e293b;
-}
-.tn-divider {
-  height: 2px;
-  margin: 8px 0 10px;
-  border-radius: 1px;
-  opacity: 0.3;
-}
-.tn-desc {
-  font-size: 15px;
-  color: #475569;
-  line-height: 1.7;
-  white-space: pre-line;
-  word-break: keep-all;
-}
-</style></div></body></html>

docs/block-tests/image-row.html

@@ -1,120 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>블록 테스트: image-row</title>
-<style>
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body {
-    font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
-    background: #e8ecf0;
-    display: flex;
-    justify-content: center;
-    padding: 30px;
-    margin: 0;
-}
-.block-container {
-    width: 920px;
-    background: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-}
-.block-container .block-section-title {
-    margin: -20px -20px 0;
-    border-radius: 8px 8px 0 0;
-    overflow: hidden;
-}
-</style>
-</head>
-<body>
-<div class="block-container">
-<!-- 이미지 행: 2~4장 이미지 나란히 -->
-<!--
-  📋 image-row
-  ─────────────────
-  용도: 시공 사진, 근거 자료, 현장 이미지 나란히 배치
-  슬롯: images[] 배열 (각 이미지에 src, alt, caption)
-  Figma 원본: 2-1_02 > image grid (460x354 x 2)
--->
-<div class="block-image-row" style="--ir-count: 2">
-  
-  <div class="ir-item">
-    <img src="figma-assets/image_grid_left.png" alt="현장1">
-    
-  </div>
-  
-  <div class="ir-item">
-    <img src="figma-assets/image_grid_right.png" alt="현장2">
-    
-  </div>
-  
-</div>
-
-<style>
-.block-image-row {
-  display: grid;
-  grid-template-columns: repeat(var(--ir-count, 2), 1fr);
-  gap: 0;
-}
-.ir-item {
-  overflow: hidden;
-}
-.ir-item img {
-  width: 100%;
-  height: 354px;
-  object-fit: cover;
-  display: block;
-}
-.ir-caption {
-  font-size: 11px;
-  color: var(--color-text-light, #94a3b8);
-  text-align: center;
-  padding: 4px;
-}
-</style>
-</div>
-</body>
-</html>

docs/block-tests/media_image-before-after.html

@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>media/image-before-after</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- Before/After 이미지: 좌측 Before + 우측 After + 화살표 -->
-<!--
-  📋 image-before-after
-  ─────────────────
-  용도: 변화 전후 비교, 공정 전후, 디지털 전환 전후
-  슬롯: before_src, before_label, after_src, after_label, caption (선택)
--->
-<div class="block-ba">
-  <div class="ba-item">
-    <div class="ba-label ba-before">기존 방식</div>
-    <img src="../figma-assets/card_img_construction.png" alt="before">
-  </div>
-  <div class="ba-arrow">→</div>
-  <div class="ba-item">
-    <div class="ba-label ba-after">DX 적용 후</div>
-    <img src="../figma-assets/card_img_design.png" alt="after">
-  </div>
-</div>
-<div class="ba-caption">건설 현장의 디지털 전환 전후 비교</div>
-
-<style>
-.block-ba {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-.ba-item {
-  flex: 1;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid #e2e8f0;
-}
-.ba-label {
-  padding: 6px 14px;
-  font-size: 13px;
-  font-weight: 700;
-  text-align: center;
-  color: #ffffff;
-}
-.ba-before { background: #6b7280; }
-.ba-after { background: #2563eb; }
-.ba-item img {
-  width: 100%;
-  height: 180px;
-  object-fit: cover;
-  display: block;
-}
-.ba-arrow {
-  font-size: 2rem;
-  color: #2563eb;
-  font-weight: 900;
-  flex-shrink: 0;
-}
-.ba-caption {
-  font-size: 12px;
-  color: #64748b;
-  text-align: center;
-  margin-top: 8px;
-}
-</style></div></body></html>

docs/block-tests/media_image-full-caption.html

@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>media/image-full-caption</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 전체 너비 이미지 + 캡션 -->
-<!--
-  📋 image-full-caption
-  ─────────────────
-  용도: 핵심 도표, 대형 다이어그램, 전경 사진을 전체 너비로 표시
-  슬롯: src (필수), alt (선택), caption (선택)
-  Figma 원본: 2-3_05 하단 전경 사진, 2-3_03 하단 항공 사진
--->
-<div class="block-img-full">
-  <img src="../figma-assets/image_grid_left.png" alt="건설 현장 전경">
-  <div class="if-caption">[사진] 인프라 건설 현장 전경 — 디지털 전환의 현장 적용</div>
-</div>
-
-<style>
-.block-img-full {
-  width: 100%;
-  border-radius: 8px;
-  overflow: hidden;
-}
-.block-img-full img {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-.if-caption {
-  font-size: 12px;
-  color: #64748b;
-  text-align: center;
-  padding: 6px;
-  background: #f8fafc;
-}
-</style></div></body></html>

docs/block-tests/media_image-grid-2x2.html

@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>media/image-grid-2x2</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 이미지 2x2 그리드: 4장 이미지 격자 배치 -->
-<!--
-  📋 image-grid-2x2
-  ─────────────────
-  용도: 현장 사진 4장, 참고 이미지 4장, 사례 이미지 갤러리
-  슬롯: images[] (4개, 각각 src, alt, caption)
-  Figma 원본: 2-1_03 GIS 항공/위성/현장 사진
--->
-<div class="block-img-2x2">
-  
-  <div class="ig-item">
-    <img src="../figma-assets/image_grid_left.png" alt="현장1">
-    <div class="ig-caption">항공측량 데이터</div>
-  </div>
-  
-  <div class="ig-item">
-    <img src="../figma-assets/image_grid_right.png" alt="현장2">
-    <div class="ig-caption">시공 현장</div>
-  </div>
-  
-  <div class="ig-item">
-    <img src="../figma-assets/card_img_design.png" alt="설계">
-    <div class="ig-caption">3D 지형 모델</div>
-  </div>
-  
-  <div class="ig-item">
-    <img src="../figma-assets/card_img_construction.png" alt="시공">
-    <div class="ig-caption">시공 BIM 모델</div>
-  </div>
-  
-</div>
-
-<style>
-.block-img-2x2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
-.ig-item {
-  overflow: hidden;
-  border-radius: 6px;
-}
-.ig-item img {
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-  display: block;
-}
-.ig-caption {
-  font-size: 11px;
-  color: #64748b;
-  text-align: center;
-  padding: 4px;
-  background: #f8f9fb;
-}
-</style></div></body>
-</html>

docs/block-tests/media_image-row-2col.html

@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>media/image-row-2col</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 이미지 행: 2~4장 이미지 나란히 -->
-<!--
-  📋 image-row
-  ─────────────────
-  용도: 시공 사진, 근거 자료, 현장 이미지 나란히 배치
-  슬롯: images[] 배열 (각 이미지에 src, alt, caption)
-  Figma 원본: 2-1_02 > image grid (460x354 x 2)
--->
-<div class="block-image-row" style="--ir-count: 2">
-  
-  <div class="ir-item">
-    <img src="../figma-assets/image_grid_left.png" alt="시공 현장 1">
-    
-  </div>
-  
-  <div class="ir-item">
-    <img src="../figma-assets/image_grid_right.png" alt="시공 현장 2">
-    
-  </div>
-  
-</div>
-
-<style>
-.block-image-row {
-  display: grid;
-  grid-template-columns: repeat(var(--ir-count, 2), 1fr);
-  gap: 0;
-}
-.ir-item {
-  overflow: hidden;
-}
-.ir-item img {
-  width: 100%;
-  height: 354px;
-  object-fit: cover;
-  display: block;
-}
-.ir-caption {
-  font-size: 11px;
-  color: var(--color-text-light, #94a3b8);
-  text-align: center;
-  padding: 4px;
-}
-</style></div></body>
-</html>

docs/block-tests/media_image-side-text.html

@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>media/image-side-text</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 이미지+텍스트 가로 배치: 좌측 이미지 + 우측 텍스트 -->
-<!--
-  📋 image-side-text
-  ─────────────────
-  용도: 이미지에 대한 설명, 제품/시스템 소개, 참고 자료 설명
-  슬롯: image_src, image_alt, title, description, bullets[]
-  Figma 원본: 2-2_01 하단 이미지+텍스트 영역
--->
-<div class="block-img-side">
-  <div class="is-image">
-    <img src="../figma-assets/card_img_design.png" alt="3D 지형 모델">
-  </div>
-  <div class="is-text">
-    <div class="is-title">고도화된 BIM 설계</div>
-    <div class="is-desc">최첨단 디지털트윈 기술을 활용하여 시뮬레이션 분석 및 성능평가를 수행합니다.</div>
-    
-    <ul class="is-bullets">
-      
-      <li>3D 지형 모델 기반 설계</li>
-      
-      <li>시뮬레이션 분석 & 성능평가</li>
-      
-      <li>지속가능한 인프라 개발</li>
-      
-    </ul>
-    
-  </div>
-</div>
-
-<style>
-.block-img-side {
-  display: flex;
-  gap: 24px;
-  align-items: flex-start;
-}
-.is-image {
-  flex-shrink: 0;
-  width: 320px;
-  border-radius: 8px;
-  overflow: hidden;
-}
-.is-image img {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-.is-text {
-  flex: 1;
-  padding-top: 4px;
-}
-.is-title {
-  font-size: 18px;
-  font-weight: 700;
-  color: #1e293b;
-  margin-bottom: 8px;
-  line-height: 1.4;
-}
-.is-desc {
-  font-size: 14px;
-  color: #444;
-  line-height: 1.7;
-  word-break: keep-all;
-  margin-bottom: 10px;
-}
-.is-bullets {
-  list-style: disc;
-  padding-left: 18px;
-  font-size: 13px;
-  color: #333;
-  line-height: 1.7;
-}
-.is-bullets li {
-  margin-bottom: 4px;
-}
-</style></div></body>
-</html>

docs/block-tests/quote-block.html

@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>블록 테스트: quote-block</title>
-<style>
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body {
-    font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
-    background: #e8ecf0;
-    display: flex;
-    justify-content: center;
-    padding: 30px;
-    margin: 0;
-}
-.block-container {
-    width: 920px;
-    background: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-}
-.block-container .block-section-title {
-    margin: -20px -20px 0;
-    border-radius: 8px 8px 0 0;
-    overflow: hidden;
-}
-</style>
-</head>
-<body>
-<div class="block-container">
-<!-- 강조 인용 블록: 문제 제기, 핵심 메시지 -->
-<div class="block-quote">
-    <div class="quote-text">BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
-    <div class="quote-source">건설산업 BIM 기본지침, 국토교통부, 2020</div>
-</div>
-
-<style>
-.block-quote {
-    background: var(--color-bg-subtle);
-    border-left: var(--accent-border) solid var(--color-danger);
-    padding: var(--spacing-inner) var(--spacing-block);
-    border-radius: 0 var(--radius) var(--radius) 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-.quote-text {
-    font-size: var(--font-body);
-    color: var(--color-text);
-    line-height: var(--line-height-ko);
-    font-weight: var(--weight-medium);
-}
-.quote-source {
-    font-size: var(--font-caption);
-    color: var(--color-text-light);
-    font-style: italic;
-    margin-top: var(--spacing-small);
-}
-</style>
-</div>
-</body>
-</html>

docs/block-tests/section-title.html

@@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>블록 테스트: section-title</title>
-<style>
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body {
-    font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
-    background: #e8ecf0;
-    display: flex;
-    justify-content: center;
-    padding: 30px;
-    margin: 0;
-}
-.block-container {
-    width: 920px;
-    background: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-}
-.block-container .block-section-title {
-    margin: -20px -20px 0;
-    border-radius: 8px 8px 0 0;
-    overflow: hidden;
-}
-</style>
-</head>
-<body>
-<div class="block-container">
-<!-- 섹션 타이틀: 배경 헤더 위 영문+한글 타이틀 오버레이 -->
-<!--
-  📋 section-title
-  ─────────────────
-  용도: 자세히보기 페이지 상단, 배경 이미지 위에 타이틀 표시
-  슬롯: title_ko (필수), title_en (선택), breadcrumb (선택), bg_image (선택)
-  Figma 원본: 공통 > section_title + bg 컴포넌트
--->
-<div class="block-section-title">
-  
-  <img class="st-bg" src="figma-assets/bg_header.png" alt="">
-  
-  
-  <div class="st-breadcrumb">건설산업에서의 디지털전환 › BIM</div>
-  
-  <div class="st-text">
-    <div class="st-en">Building Information Modeling</div>
-    <div class="st-ko">건설정보모델링(BIM)</div>
-  </div>
-</div>
-
-<style>
-.block-section-title {
-  position: relative;
-  width: 100%;
-  height: 500px;
-  overflow: hidden;
-}
-.st-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: 1;
-}
-.st-bg-default {
-  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #4dc4ff 100%);
-}
-.st-breadcrumb {
-  position: absolute;
-  top: 18px;
-  left: 89px;
-  z-index: 5;
-  font-size: 13px;
-  color: rgba(255,255,255,0.7);
-}
-.st-text {
-  position: absolute;
-  bottom: 40px;
-  left: 89px;
-  z-index: 5;
-}
-.st-en {
-  font-size: 15px;
-  font-weight: var(--weight-normal, 400);
-  color: #ffffff;
-  opacity: 0.85;
-  margin-bottom: 4px;
-}
-.st-ko {
-  font-size: 35px;
-  font-weight: var(--weight-bold, 700);
-  color: #ffffff;
-  line-height: 1.3;
-}
-</style>
-</div>
-</body>
-</html>

docs/block-tests/tables_compare-2col-split.html

@@ -1,141 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>tables/compare-2col-split</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 2단 분할 비교: 좌측 GIS / 우측 BIM 같은 상세 비교 -->
-<!--
-  📋 compare-2col-split
-  ─────────────────
-  용도: 두 개념/기술의 상세 항목별 비교 (좌우 나란히, 중앙 기준 라벨)
-  슬롯: left_title, right_title, rows[] (각 행에 criteria, left, right)
-  Figma 원본: 2-3_03 GIS vs BIM 비교 (개념/분석/도면/발전 등)
--->
-<div class="block-split-compare">
-  <div class="sc-header">
-    <div class="sc-h-left">GIS</div>
-    <div class="sc-h-center">구분</div>
-    <div class="sc-h-right">BIM</div>
-  </div>
-  
-  <div class="sc-row sc-row-odd">
-    <div class="sc-left">지리적 데이터를
-공간 분석하여 시각적 표현</div>
-    <div class="sc-center">개념</div>
-    <div class="sc-right">3D 모델 기반
-건설 정보 통합 관리</div>
-  </div>
-  
-  <div class="sc-row ">
-    <div class="sc-left">Surface Shape 분석
-지형/지질 해석</div>
-    <div class="sc-center">분석</div>
-    <div class="sc-right">Object Shape 분석
-구조/설비 해석</div>
-  </div>
-  
-  <div class="sc-row sc-row-odd">
-    <div class="sc-left">GIS, 지도, 배치도</div>
-    <div class="sc-center">도면</div>
-    <div class="sc-right">CAD, BIM 모델</div>
-  </div>
-  
-  <div class="sc-row ">
-    <div class="sc-left">GIS ↔ SPCC</div>
-    <div class="sc-center">발전</div>
-    <div class="sc-right">CAD → BIM</div>
-  </div>
-  
-</div>
-
-<style>
-.block-split-compare {
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  overflow: hidden;
-}
-.sc-header {
-  display: grid;
-  grid-template-columns: 1fr 100px 1fr;
-  background: linear-gradient(135deg, #0d47a1, #1565c0);
-  color: #ffffff;
-  font-weight: 700;
-  font-size: 15px;
-  text-align: center;
-}
-.sc-h-left, .sc-h-right, .sc-h-center {
-  padding: 12px;
-}
-.sc-h-center {
-  background: rgba(0,0,0,0.15);
-  font-size: 13px;
-}
-.sc-row {
-  display: grid;
-  grid-template-columns: 1fr 100px 1fr;
-  border-top: 1px solid #e2e8f0;
-}
-.sc-row-odd {
-  background: #f8fafc;
-}
-.sc-left, .sc-right {
-  padding: 10px 14px;
-  font-size: 13px;
-  line-height: 1.7;
-  color: #334155;
-  white-space: pre-line;
-}
-.sc-center {
-  padding: 10px 8px;
-  font-size: 12px;
-  font-weight: 700;
-  color: #1565c0;
-  text-align: center;
-  background: #f0f7ff;
-  border-left: 1px solid #e2e8f0;
-  border-right: 1px solid #e2e8f0;
-}
-</style></div></body></html>

docs/block-tests/tables_compare-3col-badge.html

@@ -1,219 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>tables/compare-3col-badge</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 비교 테이블: BIM vs DX 스타일 3단 테이블 -->
-<!--
-  📋 comparison-table
-  ─────────────────
-  용도: 다항목 비교 (좌측 A | 중앙 기준 | 우측 B)
-  슬롯: headers[] (3개), rows[][] (각 행 3칸)
-  Figma 원본: 2-1_02 > BIM VS D/X 테이블
-  특징: 중앙 칼럼에 파란 그라데이션 배지, 좌우 불릿 대비
--->
-<div class="block-table-figma">
-  <table>
-    <thead>
-      <tr>
-        
-        <th class="th-left">
-          BIM
-        </th>
-        
-        <th class="th-center">
-          <span class="th-badge">VS</span>
-        </th>
-        
-        <th class="th-right">
-          D/X
-        </th>
-        
-      </tr>
-    </thead>
-    <tbody>
-      
-      <tr>
-        
-        <td class="td-left">• Only 3D</td>
-        
-        <td class="td-center">BIM · D/X</td>
-        
-        <td class="td-right">• BIM ≪ D/X (ENG. + Management 포함)</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 모델 제작용 상용 S/W
-(Civil 3D, Revit, Navisworks)</td>
-        
-        <td class="td-center">S/W</td>
-        
-        <td class="td-right">• 제작 및 운영(상용 + 전용 40~80개)
-[Rhino, Sketchup, Blender...]</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 기존 2D 설계방식 유지</td>
-        
-        <td class="td-center">프로세스</td>
-        
-        <td class="td-right">• 근본적 문제의식을 통한 개선</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 3D 모델 중심
-• 기존 성과품 유지</td>
-        
-        <td class="td-center">성과물</td>
-        
-        <td class="td-right">• 공학 정보 및 콘텐츠 연계에 집중
-• 도면, 수량, 시공계획 등 일식</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• 3D 모델에 의한 일반적 이해 향상</td>
-        
-        <td class="td-center">활용</td>
-        
-        <td class="td-right">• 설계/시공의 혁신(개념의 재정립)</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td class="td-left">• (설계/시공/운영) 분야별 단절</td>
-        
-        <td class="td-center">확장성</td>
-        
-        <td class="td-right">• 전 생애주기 활용 시스템</td>
-        
-      </tr>
-      
-    </tbody>
-  </table>
-</div>
-
-<style>
-.block-table-figma {
-  overflow: auto;
-}
-.block-table-figma table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  line-height: 1.7;
-}
-
-/* 헤더 */
-.block-table-figma thead th {
-  padding: 14px 12px;
-  font-size: 16px;
-  font-weight: 700;
-  border-bottom: 2px solid #e8edf2;
-}
-.th-left {
-  text-align: center;
-  color: #6bcdff;
-}
-.th-center {
-  text-align: center;
-  width: 120px;
-}
-.th-badge {
-  display: inline-block;
-  background: linear-gradient(135deg, #006eff 0%, #00aaff 100%);
-  color: #ffffff;
-  font-size: 15px;
-  font-weight: 700;
-  padding: 8px 28px;
-  border-radius: 25px;
-}
-.th-right {
-  text-align: center;
-  color: #006eff;
-}
-
-/* 본문 */
-.block-table-figma tbody td {
-  padding: 10px 14px;
-  border-bottom: 1px solid #f0f2f5;
-  vertical-align: middle;
-}
-.td-left {
-  text-align: center;
-  color: #444;
-}
-.td-center {
-  text-align: center;
-  font-weight: 700;
-  color: #333;
-  background: #f6f8fb;
-  font-size: 13px;
-}
-.td-right {
-  text-align: center;
-  color: #444;
-}
-.block-table-figma tbody tr:hover {
-  background: #fafbfd;
-}
-</style></div></body>
-</html>

docs/block-tests/tables_table-simple-striped.html

@@ -1,154 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>tables/table-simple-striped</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 심플 줄무늬 테이블: 범용 데이터 테이블 -->
-<!--
-  📋 table-simple-striped
-  ─────────────────
-  용도: 스펙, 수치, 일정, 항목별 데이터 나열
-  슬롯: headers[], rows[][]
-  compare-3col-badge와 다른 점: VS 배지 없음, 범용 데이터용
--->
-<div class="block-table-striped">
-  <table>
-    <thead>
-      <tr>
-        
-        <th>구분</th>
-        
-        <th>현재</th>
-        
-        <th>목표</th>
-        
-        <th>비고</th>
-        
-      </tr>
-    </thead>
-    <tbody>
-      
-      <tr>
-        
-        <td>BIM 적용률</td>
-        
-        <td>30%</td>
-        
-        <td>100%</td>
-        
-        <td>2025 목표</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td>디지털 전환 수준</td>
-        
-        <td>초기</td>
-        
-        <td>고도화</td>
-        
-        <td>단계적 추진</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td>전문 인력</td>
-        
-        <td>50명</td>
-        
-        <td>220명+</td>
-        
-        <td>IT+CIVIL</td>
-        
-      </tr>
-      
-      <tr>
-        
-        <td>자체 S/W</td>
-        
-        <td>5개</td>
-        
-        <td>80개+</td>
-        
-        <td>지속 개발</td>
-        
-      </tr>
-      
-    </tbody>
-  </table>
-</div>
-
-<style>
-.block-table-striped table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  line-height: 1.7;
-}
-.block-table-striped thead th {
-  background: #1e293b;
-  color: #ffffff;
-  font-weight: 700;
-  padding: 10px 14px;
-  text-align: left;
-  font-size: 13px;
-}
-.block-table-striped tbody td {
-  padding: 9px 14px;
-  border-bottom: 1px solid #e2e8f0;
-  white-space: pre-line;
-  color: #334155;
-}
-.block-table-striped tbody tr:nth-child(even) {
-  background: #f8fafc;
-}
-.block-table-striped tbody td:first-child {
-  font-weight: 600;
-  color: #1e293b;
-}
-</style></div></body></html>

docs/block-tests/topic-header.html

@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>블록 테스트: topic-header</title>
-<style>
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body {
-    font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
-    background: #e8ecf0;
-    display: flex;
-    justify-content: center;
-    padding: 30px;
-    margin: 0;
-}
-.block-container {
-    width: 920px;
-    background: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-}
-.block-container .block-section-title {
-    margin: -20px -20px 0;
-    border-radius: 8px 8px 0 0;
-    overflow: hidden;
-}
-</style>
-</head>
-<body>
-<div class="block-container">
-<!-- 꼭지 제목+설명: 좌측 질문/소제목 + 우측 설명 -->
-<!--
-  📋 topic-header
-  ─────────────────
-  용도: 각 꼭지의 시작부, 좌측에 파란 굵은 제목 + 우측에 본문 설명
-  슬롯: title (필수), description (필수)
-  비율: 좌 240px : 우 나머지
-  Figma 원본: sub_제목,내용 (742x68~78)
--->
-<div class="block-topic-header">
-  <div class="th-title">단순 BIM의 적용이
-D/X가 아닙니다</div>
-  <div class="th-desc">BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분임을 인지하는 것이 매우 중요합니다.</div>
-</div>
-
-<style>
-.block-topic-header {
-  display: flex;
-  gap: 20px;
-  padding: 12px 0;
-}
-.th-title {
-  width: 240px;
-  flex-shrink: 0;
-  font-size: 24px;
-  font-weight: var(--weight-bold, 700);
-  color: var(--color-accent-deep, #004cbe);
-  line-height: 1.4;
-  word-break: keep-all;
-}
-.th-desc {
-  flex: 1;
-  font-size: 16px;
-  font-weight: var(--weight-normal, 400);
-  color: var(--color-text, #000000);
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style>
-</div>
-</body>
-</html>

docs/block-tests/visuals_circle-gradient.html

@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>visuals/circle-gradient</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 원형 라벨: CSS 그라데이션 원 + 중앙 텍스트 -->
-<!--
-  📋 circle-label
-  ─────────────────
-  용도: 섹션 전환점, 핵심 키워드 강조, 시각적 구분자
-  슬롯: label (필수), sub_label (선택)
-  Figma 원본: 2-1_02 > Group 1171281590 (190x190)
--->
-<div class="block-circle-label">
-  <div class="cl-outer">
-    <div class="cl-inner">
-      <div class="cl-text">단계별
-BIM의 활용</div>
-      
-    </div>
-  </div>
-</div>
-
-<style>
-.block-circle-label {
-  display: flex;
-  justify-content: center;
-  padding: 20px 0;
-}
-.cl-outer {
-  width: 190px;
-  height: 190px;
-  border-radius: 50%;
-  background: linear-gradient(180deg, #3db8ff 0%, #006aff 100%);
-  box-shadow: 0 0 30px rgba(0, 106, 255, 0.25), 0 0 60px rgba(0, 106, 255, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.cl-inner {
-  width: 170px;
-  height: 170px;
-  border-radius: 50%;
-  background: linear-gradient(180deg, #4dc4ff 0%, #0080ff 100%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  text-align: center;
-}
-.cl-text {
-  font-size: 20px;
-  font-weight: var(--weight-bold, 700);
-  line-height: 1.4;
-}
-.cl-sub {
-  font-size: 12px;
-  opacity: 0.8;
-  margin-top: 4px;
-}
-</style></div></body>
-</html>

docs/block-tests/visuals_compare-pill-pair.html

@@ -1,131 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>visuals/compare-pill-pair</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 비교 박스: 이중 테두리 둥근 박스 2개 + VS -->
-<!--
-  📋 compare-pill-pair
-  ─────────────────
-  용도: 2개 개념 시각적 대비 (비교 테이블 위 헤더)
-  슬롯: left_label, left_sub, right_label, right_sub
-  Figma 원본: 이중 테두리 (바깥 얇은 선 + 안쪽 둥근 박스)
--->
-<div class="block-compare-pill">
-  <div class="cp-item">
-    <div class="cp-outer">
-      <div class="cp-inner">
-        <div class="cp-label">디지털 기술을 활용한
-협업 프로세스</div>
-        
-      </div>
-    </div>
-  </div>
-  <div class="cp-vs">VS</div>
-  <div class="cp-item">
-    <div class="cp-outer">
-      <div class="cp-inner">
-        <div class="cp-label">시설물의 전 생애주기 동안
-정보의 생성 및 관리</div>
-        
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-.block-compare-pill {
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  justify-content: center;
-  padding: 20px 0;
-}
-.cp-item {
-  width: 350px;
-}
-.cp-outer {
-  border: 2px solid #a8d8f0;
-  border-radius: 60px;
-  padding: 6px;
-  background: transparent;
-}
-.cp-inner {
-  border: 2px solid #7ec8f0;
-  border-radius: 55px;
-  background: linear-gradient(135deg, #e8f4fd 0%, #d6edfa 100%);
-  padding: 18px 30px;
-  text-align: center;
-}
-.cp-label {
-  font-size: 18px;
-  font-weight: 800;
-  color: #0088cc;
-  line-height: 1.4;
-  white-space: pre-line;
-}
-.cp-sub {
-  font-size: 12px;
-  color: #0088cc;
-  margin-top: 4px;
-  line-height: 1.5;
-  white-space: pre-line;
-  font-weight: 500;
-}
-.cp-vs {
-  font-size: 24px;
-  font-weight: 800;
-  color: #333;
-  flex-shrink: 0;
-}
-</style></div></body>
-</html>

docs/block-tests/visuals_flow-arrow-horizontal.html

@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>visuals/flow-arrow-horizontal</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 가로 흐름도: 좌→우 화살표로 연결된 단계 (SVG) -->
-<!--
-  📋 flow-arrow-horizontal
-  ─────────────────
-  용도: 발전 과정, 기술 진화, 전환 흐름 (A → B → C)
-  슬롯: steps[] (각 단계에 label, sub)
-  Figma 원본: 2-3_03 "GIS ↔ SPCC → 토공 → ..." / 2-2_04 개발 패러다임
--->
-<div class="block-flow-h">
-  <svg viewBox="0 0 720 80" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
-    
-    
-    <rect x="10" y="10" width="120" height="50" rx="25" fill="#059669" opacity="0.9" />
-    <text x="70" y="32" text-anchor="middle" fill="white" font-size="13" font-weight="700">GIS</text>
-    
-    
-    <polygon points="135,35 150,35 145,28" fill="#94a3b8" />
-    <polygon points="135,35 150,35 145,42" fill="#94a3b8" />
-    
-    
-    
-    <rect x="190" y="10" width="120" height="50" rx="25" fill="#2563eb" opacity="0.9" />
-    <text x="250" y="32" text-anchor="middle" fill="white" font-size="13" font-weight="700">SPCC</text>
-    
-    
-    <polygon points="315,35 330,35 325,28" fill="#94a3b8" />
-    <polygon points="315,35 330,35 325,42" fill="#94a3b8" />
-    
-    
-    
-    <rect x="370" y="10" width="120" height="50" rx="25" fill="#7c3aed" opacity="0.9" />
-    <text x="430" y="32" text-anchor="middle" fill="white" font-size="13" font-weight="700">토공</text>
-    
-    
-    <polygon points="495,35 510,35 505,28" fill="#94a3b8" />
-    <polygon points="495,35 510,35 505,42" fill="#94a3b8" />
-    
-    
-    
-    <rect x="550" y="10" width="120" height="50" rx="25" fill="#dc2626" opacity="0.9" />
-    <text x="610" y="32" text-anchor="middle" fill="white" font-size="13" font-weight="700">BIM</text>
-    
-    
-    
-  </svg>
-</div>
-
-<style>
-.block-flow-h {
-  padding: 10px 0;
-  overflow-x: auto;
-}
-.block-flow-h svg {
-  min-width: 400px;
-}
-</style></div></body></html>

docs/block-tests/visuals_keyword-circle-row.html

@@ -1,153 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>visuals/keyword-circle-row</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 키워드 원형 행: 원 안에 키워드 + 하단 설명 (SVG) -->
-<!--
-  📋 keyword-circle-row
-  ─────────────────
-  용도: 핵심 키워드를 원형으로 나열하며 각각 설명. 약어 풀이.
-  슬롯: keywords[] (각 항목에 letter, label, description, color)
-  Figma 원본: 2-3_03 G-S-I-M 약어 설명, 2-2_04 개발 조건 키워드
--->
-<div class="block-kw-circles">
-  
-  <div class="kw-item">
-    <svg viewBox="0 0 80 80" width="70" height="70" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <radialGradient id="kwGrad1" cx="40%" cy="35%" r="60%">
-          <stop offset="0%" stop-color="#6ee7b7" />
-          <stop offset="100%" stop-color="#059669" />
-        </radialGradient>
-      </defs>
-      <circle cx="40" cy="40" r="38" fill="url(#kwGrad1)" />
-      <text x="40" y="44" text-anchor="middle" dominant-baseline="central" fill="white" font-size="28" font-weight="900" font-family="Pretendard Variable, sans-serif">G</text>
-    </svg>
-    <div class="kw-label">Geographic</div>
-    <div class="kw-desc">지리적 위치
-공간 정보</div>
-  </div>
-  
-  <div class="kw-item">
-    <svg viewBox="0 0 80 80" width="70" height="70" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <radialGradient id="kwGrad2" cx="40%" cy="35%" r="60%">
-          <stop offset="0%" stop-color="#93c5fd" />
-          <stop offset="100%" stop-color="#2563eb" />
-        </radialGradient>
-      </defs>
-      <circle cx="40" cy="40" r="38" fill="url(#kwGrad2)" />
-      <text x="40" y="44" text-anchor="middle" dominant-baseline="central" fill="white" font-size="28" font-weight="900" font-family="Pretendard Variable, sans-serif">S</text>
-    </svg>
-    <div class="kw-label">Structure</div>
-    <div class="kw-desc">구조물
-형상 정보</div>
-  </div>
-  
-  <div class="kw-item">
-    <svg viewBox="0 0 80 80" width="70" height="70" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <radialGradient id="kwGrad3" cx="40%" cy="35%" r="60%">
-          <stop offset="0%" stop-color="#c4b5fd" />
-          <stop offset="100%" stop-color="#7c3aed" />
-        </radialGradient>
-      </defs>
-      <circle cx="40" cy="40" r="38" fill="url(#kwGrad3)" />
-      <text x="40" y="44" text-anchor="middle" dominant-baseline="central" fill="white" font-size="28" font-weight="900" font-family="Pretendard Variable, sans-serif">I</text>
-    </svg>
-    <div class="kw-label">Information</div>
-    <div class="kw-desc">건설 정보
-속성 데이터</div>
-  </div>
-  
-  <div class="kw-item">
-    <svg viewBox="0 0 80 80" width="70" height="70" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <radialGradient id="kwGrad4" cx="40%" cy="35%" r="60%">
-          <stop offset="0%" stop-color="#fca5a5" />
-          <stop offset="100%" stop-color="#dc2626" />
-        </radialGradient>
-      </defs>
-      <circle cx="40" cy="40" r="38" fill="url(#kwGrad4)" />
-      <text x="40" y="44" text-anchor="middle" dominant-baseline="central" fill="white" font-size="28" font-weight="900" font-family="Pretendard Variable, sans-serif">M</text>
-    </svg>
-    <div class="kw-label">Model</div>
-    <div class="kw-desc">3D 모델
-통합 관리</div>
-  </div>
-  
-</div>
-
-<style>
-.block-kw-circles {
-  display: flex;
-  gap: 24px;
-  justify-content: center;
-  flex-wrap: wrap;
-  padding: 10px 0;
-}
-.kw-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  width: 140px;
-}
-.kw-label {
-  font-size: 14px;
-  font-weight: 700;
-  color: #1e293b;
-  margin-top: 8px;
-}
-.kw-desc {
-  font-size: 12px;
-  color: #475569;
-  line-height: 1.5;
-  margin-top: 4px;
-  white-space: pre-line;
-}
-</style></div></body></html>

docs/block-tests/visuals_layer-diagram.html

@@ -1,134 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>visuals/layer-diagram</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 레이어 다이어그램: 겹쳐진 레이어 표현 (SVG) -->
-<!--
-  📋 layer-diagram
-  ─────────────────
-  용도: GIS/BIM/DT 레이어 구조, 기술 스택, 계층 구조 시각화
-  슬롯: layers[] (각 레이어에 label, color), title (선택)
-  Figma 원본: 1장_1-1_미래 "GIS+BIM+DT 레이어 시각화"
--->
-<div class="block-layer-diag">
-  <div class="ld-title">건설산업 DX 기술 레이어</div>
-  <svg viewBox="0 0 400 280" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
-    <defs>
-      
-      <linearGradient id="layerGrad1" x1="0" y1="0" x2="1" y2="0">
-        <stop offset="0%" stop-color="#7c3aed" stop-opacity="0.85" />
-        <stop offset="100%" stop-color="#7c3aed" stop-opacity="0.6" />
-      </linearGradient>
-      
-      <linearGradient id="layerGrad2" x1="0" y1="0" x2="1" y2="0">
-        <stop offset="0%" stop-color="#2563eb" stop-opacity="0.85" />
-        <stop offset="100%" stop-color="#2563eb" stop-opacity="0.6" />
-      </linearGradient>
-      
-      <linearGradient id="layerGrad3" x1="0" y1="0" x2="1" y2="0">
-        <stop offset="0%" stop-color="#059669" stop-opacity="0.85" />
-        <stop offset="100%" stop-color="#059669" stop-opacity="0.6" />
-      </linearGradient>
-      
-      <linearGradient id="layerGrad4" x1="0" y1="0" x2="1" y2="0">
-        <stop offset="0%" stop-color="#475569" stop-opacity="0.85" />
-        <stop offset="100%" stop-color="#475569" stop-opacity="0.6" />
-      </linearGradient>
-      
-      <filter id="layerShadow">
-        <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.15" />
-      </filter>
-    </defs>
-    
-    
-    
-    <!-- 3D 효과: 사다리꼴 레이어 -->
-    <path d="M 40,185 L 360,185 L 340,225 L 60,225 Z"
-          fill="url(#layerGrad1)" filter="url(#layerShadow)" />
-    <text x="200" y="210" text-anchor="middle" fill="white" font-size="14" font-weight="700">Digital Twin (가상환경)</text>
-    
-    
-    
-    <!-- 3D 효과: 사다리꼴 레이어 -->
-    <path d="M 55,130 L 345,130 L 325,170 L 75,170 Z"
-          fill="url(#layerGrad2)" filter="url(#layerShadow)" />
-    <text x="200" y="155" text-anchor="middle" fill="white" font-size="14" font-weight="700">BIM (건설정보모델링)</text>
-    
-    
-    
-    <!-- 3D 효과: 사다리꼴 레이어 -->
-    <path d="M 70,75 L 330,75 L 310,115 L 90,115 Z"
-          fill="url(#layerGrad3)" filter="url(#layerShadow)" />
-    <text x="200" y="100" text-anchor="middle" fill="white" font-size="14" font-weight="700">GIS (공간정보시스템)</text>
-    
-    
-    
-    <!-- 3D 효과: 사다리꼴 레이어 -->
-    <path d="M 85,20 L 315,20 L 295,60 L 105,60 Z"
-          fill="url(#layerGrad4)" filter="url(#layerShadow)" />
-    <text x="200" y="45" text-anchor="middle" fill="white" font-size="14" font-weight="700">실세계 인프라</text>
-    
-  </svg>
-</div>
-
-<style>
-.block-layer-diag {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 0;
-}
-.ld-title {
-  font-size: 16px;
-  font-weight: 700;
-  color: #1e293b;
-}
-.block-layer-diag svg {
-  max-width: 400px;
-}
-</style></div></body></html>

docs/block-tests/visuals_process-horizontal.html

@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>visuals/process-horizontal</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
-</style>
-</head>
-<body><div class="block-container"><!-- 프로세스 블록: 가로 단계 흐름 -->
-<div class="block-process">
-    
-    <div class="process-step">
-        <div class="process-number">1</div>
-        <div class="process-title">요구사항 분석</div>
-        <div class="process-desc">목표 수립</div>
-    </div>
-    
-    <div class="process-arrow">→</div>
-    
-    
-    <div class="process-step">
-        <div class="process-number">2</div>
-        <div class="process-title">S/W 개발</div>
-        <div class="process-desc">솔루션 개발</div>
-    </div>
-    
-    <div class="process-arrow">→</div>
-    
-    
-    <div class="process-step">
-        <div class="process-number">3</div>
-        <div class="process-title">System 통합</div>
-        <div class="process-desc">데이터 통합</div>
-    </div>
-    
-    <div class="process-arrow">→</div>
-    
-    
-    <div class="process-step">
-        <div class="process-number">4</div>
-        <div class="process-title">교육/피드백</div>
-        <div class="process-desc">지속 개선</div>
-    </div>
-    
-    
-</div>
-
-<style>
-.block-process {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-small);
-    height: 100%;
-}
-.process-step {
-    flex: 1;
-    text-align: center;
-    padding: var(--spacing-inner);
-    background: var(--color-bg-subtle);
-    border: var(--border-width) solid var(--color-border);
-    border-radius: var(--radius);
-}
-.process-number {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: var(--color-accent);
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: var(--weight-bold);
-    font-size: var(--font-body);
-    margin: 0 auto var(--spacing-small);
-}
-.process-title {
-    font-size: var(--font-body);
-    font-weight: var(--weight-bold);
-    color: var(--color-primary);
-    margin-bottom: 4px;
-}
-.process-desc {
-    font-size: var(--font-caption);
-    color: var(--color-text-secondary);
-    line-height: var(--line-height-ko);
-}
-.process-arrow {
-    font-size: 1.5rem;
-    color: var(--color-accent);
-    font-weight: var(--weight-bold);
-    flex-shrink: 0;
-}
-</style></div></body>
-</html>

docs/block-tests/visuals_pyramid-hierarchy.html

@@ -1,121 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>visuals/pyramid-hierarchy</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 피라미드 계층: 위에서 아래로 넓어지는 계층 구조 (SVG) -->
-<!--
-  📋 pyramid-hierarchy
-  ─────────────────
-  용도: 위계, 우선순위, 상위→하위 개념 (좁은→넓은)
-  슬롯: levels[] (상단부터, 각 레벨에 label, color)
--->
-<div class="block-pyramid">
-  <svg viewBox="0 0 500 300" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
-    <defs>
-      
-      <linearGradient id="pyrGrad1" x1="0" y1="0" x2="1" y2="0">
-        <stop offset="0%" stop-color="#0d47a1" />
-        <stop offset="100%" stop-color="#0d47a1" stop-opacity="0.7" />
-      </linearGradient>
-      
-      <linearGradient id="pyrGrad2" x1="0" y1="0" x2="1" y2="0">
-        <stop offset="0%" stop-color="#1565c0" />
-        <stop offset="100%" stop-color="#1565c0" stop-opacity="0.7" />
-      </linearGradient>
-      
-      <linearGradient id="pyrGrad3" x1="0" y1="0" x2="1" y2="0">
-        <stop offset="0%" stop-color="#1976d2" />
-        <stop offset="100%" stop-color="#1976d2" stop-opacity="0.7" />
-      </linearGradient>
-      
-      <linearGradient id="pyrGrad4" x1="0" y1="0" x2="1" y2="0">
-        <stop offset="0%" stop-color="#2196f3" />
-        <stop offset="100%" stop-color="#2196f3" stop-opacity="0.7" />
-      </linearGradient>
-      
-      <filter id="pyrShadow">
-        <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.12" />
-      </filter>
-    </defs>
-    
-    
-    
-    
-    <rect x="190" y="10" width="120" height="50" rx="6" fill="url(#pyrGrad1)" filter="url(#pyrShadow)" />
-    <text x="250" y="40" text-anchor="middle" fill="white" font-size="14" font-weight="700">DX (디지털 전환)</text>
-    
-    
-    
-    
-    <rect x="135" y="75" width="230" height="50" rx="6" fill="url(#pyrGrad2)" filter="url(#pyrShadow)" />
-    <text x="250" y="105" text-anchor="middle" fill="white" font-size="14" font-weight="700">BIM + GIS + Digital Twin</text>
-    
-    
-    
-    
-    <rect x="80" y="140" width="340" height="50" rx="6" fill="url(#pyrGrad3)" filter="url(#pyrShadow)" />
-    <text x="250" y="170" text-anchor="middle" fill="white" font-size="14" font-weight="700">프로세스 혁신 + S/W 개발</text>
-    
-    
-    
-    
-    <rect x="25" y="205" width="450" height="50" rx="6" fill="url(#pyrGrad4)" filter="url(#pyrShadow)" />
-    <text x="250" y="235" text-anchor="middle" fill="white" font-size="14" font-weight="700">기반 인프라 + 인력 양성</text>
-    
-  </svg>
-</div>
-
-<style>
-.block-pyramid {
-  display: flex;
-  justify-content: center;
-  padding: 10px 0;
-}
-.block-pyramid svg {
-  max-width: 450px;
-}
-</style></div></body></html>

docs/block-tests/visuals_timeline-horizontal.html

@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>visuals/timeline-horizontal</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 가로 타임라인: 좌→우 시간축 + 마커 + 라벨 (SVG) -->
-<!--
-  📋 timeline-horizontal
-  ─────────────────
-  용도: 연도별 로드맵, 짧은 일정, 마일스톤 (가로 배치)
-  슬롯: events[] (각 이벤트에 year, title, color)
-  timeline-vertical과 다른 점: 가로 방향, 공간 효율적
--->
-<div class="block-timeline-h">
-  <svg viewBox="0 0 680 100" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
-    <!-- 가로 선 -->
-    <line x1="30" y1="40" x2="630" y2="40" stroke="#cbd5e1" stroke-width="2" />
-    
-    
-    <!-- 마커 -->
-    <circle cx="60" cy="40" r="12" fill="#059669" />
-    <circle cx="60" cy="40" r="5" fill="white" />
-    <!-- 연도 -->
-    <text x="60" y="22" text-anchor="middle" fill="#059669" font-size="12" font-weight="800">2020</text>
-    <!-- 제목 -->
-    <text x="60" y="65" text-anchor="middle" fill="#1e293b" font-size="12" font-weight="600">BIM 기본지침</text>
-    
-    
-    
-    <!-- 마커 -->
-    <circle cx="220" cy="40" r="12" fill="#2563eb" />
-    <circle cx="220" cy="40" r="5" fill="white" />
-    <!-- 연도 -->
-    <text x="220" y="22" text-anchor="middle" fill="#2563eb" font-size="12" font-weight="800">2022</text>
-    <!-- 제목 -->
-    <text x="220" y="65" text-anchor="middle" fill="#1e293b" font-size="12" font-weight="600">스마트건설 방안</text>
-    
-    
-    
-    <!-- 마커 -->
-    <circle cx="380" cy="40" r="12" fill="#7c3aed" />
-    <circle cx="380" cy="40" r="5" fill="white" />
-    <!-- 연도 -->
-    <text x="380" y="22" text-anchor="middle" fill="#7c3aed" font-size="12" font-weight="800">2023</text>
-    <!-- 제목 -->
-    <text x="380" y="65" text-anchor="middle" fill="#1e293b" font-size="12" font-weight="600">7차 기본계획</text>
-    
-    
-    
-    <!-- 마커 -->
-    <circle cx="540" cy="40" r="12" fill="#dc2626" />
-    <circle cx="540" cy="40" r="5" fill="white" />
-    <!-- 연도 -->
-    <text x="540" y="22" text-anchor="middle" fill="#dc2626" font-size="12" font-weight="800">2025</text>
-    <!-- 제목 -->
-    <text x="540" y="65" text-anchor="middle" fill="#1e293b" font-size="12" font-weight="600">전면 BIM</text>
-    
-    
-  </svg>
-</div>
-
-<style>
-.block-timeline-h {
-  padding: 10px 0;
-  overflow-x: auto;
-}
-.block-timeline-h svg {
-  min-width: 500px;
-}
-</style></div></body></html>

docs/block-tests/visuals_timeline-vertical.html

@@ -1,167 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>visuals/timeline-vertical</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 세로 타임라인: 좌측 선 + 원형 마커 + 우측 내용 (SVG 마커) -->
-<!--
-  📋 timeline-vertical
-  ─────────────────
-  용도: 연혁, 정책 시행 일정, 로드맵, 연도별 사건
-  슬롯: events[] (각 이벤트에 year, title, description, color)
-  Figma 참고: 정책 로드맵, 건설 정책 추진현황
--->
-<div class="block-timeline-v">
-  
-  <div class="tv-event">
-    <div class="tv-marker-col">
-      <svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="10" fill="#059669" />
-        <circle cx="12" cy="12" r="5" fill="white" />
-      </svg>
-      <div class="tv-line" style="background: #059669"></div>
-    </div>
-    <div class="tv-content">
-      <div class="tv-year" style="color: #059669">2020</div>
-      <div class="tv-title">건설산업 BIM 기본지침</div>
-      <div class="tv-desc">BIM 도입의 법적 근거 마련</div>
-    </div>
-  </div>
-  
-  <div class="tv-event">
-    <div class="tv-marker-col">
-      <svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="10" fill="#2563eb" />
-        <circle cx="12" cy="12" r="5" fill="white" />
-      </svg>
-      <div class="tv-line" style="background: #2563eb"></div>
-    </div>
-    <div class="tv-content">
-      <div class="tv-year" style="color: #2563eb">2022.07</div>
-      <div class="tv-title">스마트 건설 활성화 방안</div>
-      <div class="tv-desc">BIM 전면 도입 + 전문인력 양성</div>
-    </div>
-  </div>
-  
-  <div class="tv-event">
-    <div class="tv-marker-col">
-      <svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="10" fill="#7c3aed" />
-        <circle cx="12" cy="12" r="5" fill="white" />
-      </svg>
-      <div class="tv-line" style="background: #7c3aed"></div>
-    </div>
-    <div class="tv-content">
-      <div class="tv-year" style="color: #7c3aed">2023.12</div>
-      <div class="tv-title">제7차 건설기술진흥 기본계획</div>
-      <div class="tv-desc">디지털 전환을 통한 스마트 건설 확산</div>
-    </div>
-  </div>
-  
-  <div class="tv-event">
-    <div class="tv-marker-col">
-      <svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="10" fill="#dc2626" />
-        <circle cx="12" cy="12" r="5" fill="white" />
-      </svg>
-      
-    </div>
-    <div class="tv-content">
-      <div class="tv-year" style="color: #dc2626">2025</div>
-      <div class="tv-title">전면 BIM 적용</div>
-      <div class="tv-desc">공공 건설사업 BIM 의무화 목표</div>
-    </div>
-  </div>
-  
-</div>
-
-<style>
-.block-timeline-v {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 10px 0;
-}
-.tv-event {
-  display: flex;
-  gap: 14px;
-}
-.tv-marker-col {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-shrink: 0;
-  width: 24px;
-}
-.tv-line {
-  width: 2px;
-  flex: 1;
-  min-height: 20px;
-  opacity: 0.3;
-  border-radius: 1px;
-}
-.tv-content {
-  padding-bottom: 20px;
-  flex: 1;
-}
-.tv-year {
-  font-size: 13px;
-  font-weight: 800;
-  margin-bottom: 2px;
-}
-.tv-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: #1e293b;
-  margin-bottom: 4px;
-}
-.tv-desc {
-  font-size: 13px;
-  color: #475569;
-  line-height: 1.7;
-  white-space: pre-line;
-}
-</style></div></body></html>

docs/block-tests/visuals_venn-2items-p2.html

@@ -1,151 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>venn-2items</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 벤 다이어그램: SVG premium (N개 자동 배치) -->
-<!--
-  📋 venn-diagram (P2-B: 동적 좌표 계산)
-  ─────────────────
-  용도: 상위-하위 포함 관계, 기술 융합 구조
-  방식: renderer가 svg_calculator.prepare_venn_data()로 좌표 사전 계산
-        → items[].cx, cy, r + outer_r, center_x, center_y 전달
-  Phase 1 fallback: outer_r이 없으면 3개 고정 좌표 사용
--->
-<div class="block-venn-svg">
-  
-  
-  <svg viewBox="0 0 600.0 550.0" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
-    <defs>
-      <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="#dce3ea" />
-        <stop offset="100%" stop-color="#f0f2f5" />
-      </linearGradient>
-      <radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
-        <stop offset="0%" stop-color="#2979ff" />
-        <stop offset="40%" stop-color="#1565c0" />
-        <stop offset="100%" stop-color="#0d47a1" />
-      </radialGradient>
-      <radialGradient id="hlGrad" cx="35%" cy="25%" r="40%">
-        <stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
-        <stop offset="100%" stop-color="rgba(255,255,255,0)" />
-      </radialGradient>
-      <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-        <feGaussianBlur stdDeviation="8" result="blur" />
-        <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
-      </filter>
-      <filter id="shadow">
-        <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
-      </filter>
-      
-      <radialGradient id="itemGrad1" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#10b98180" />
-        <stop offset="100%" stop-color="#10b981" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad2" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#3b82f680" />
-        <stop offset="100%" stop-color="#3b82f6" />
-      </radialGradient>
-      
-    </defs>
-
-    <rect width="600.0" height="550.0" fill="url(#bgGrad)" />
-
-    <circle cx="300.0" cy="295.0" r="235.0" fill="url(#blueOuter)" filter="url(#shadow)" />
-    <circle cx="300.0" cy="295.0" r="225.0" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
-    <circle cx="300.0" cy="295.0" r="210.0" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
-    <circle cx="300.0" cy="295.0" r="195.0" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
-
-    
-    <circle cx="300.0" cy="175.0" r="75.0" fill="url(#itemGrad1)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="300.0" cy="175.0" r="75.0" fill="url(#hlGrad)" />
-    <text x="300.0" y="175.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">BIM</text>
-    
-    
-    <circle cx="300.0" cy="415.0" r="75.0" fill="url(#itemGrad2)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="300.0" cy="415.0" r="75.0" fill="url(#hlGrad)" />
-    <text x="300.0" y="415.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">GIS</text>
-    
-    
-
-    <text x="300.0" y="95.0" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
-    <text x="300.0" y="120.0" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="900">DX (2개)</text>
-  </svg>
-
-  
-
-  
-  <div class="venn-desc">2개 요소의 기술 융합 구조</div>
-  
-</div>
-
-<style>
-.block-venn-svg {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 0;
-  flex-shrink: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-.block-venn-svg svg {
-  max-width: 450px;
-  width: 100%;
-  height: auto;
-  flex-shrink: 1;
-}
-.venn-desc {
-  font-size: 14px;
-  color: #444;
-  text-align: center;
-  max-width: 450px;
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body></html>

docs/block-tests/visuals_venn-3items-p2.html

@@ -1,161 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>venn-3items</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 벤 다이어그램: SVG premium (N개 자동 배치) -->
-<!--
-  📋 venn-diagram (P2-B: 동적 좌표 계산)
-  ─────────────────
-  용도: 상위-하위 포함 관계, 기술 융합 구조
-  방식: renderer가 svg_calculator.prepare_venn_data()로 좌표 사전 계산
-        → items[].cx, cy, r + outer_r, center_x, center_y 전달
-  Phase 1 fallback: outer_r이 없으면 3개 고정 좌표 사용
--->
-<div class="block-venn-svg">
-  
-  
-  <svg viewBox="0 0 600.0 550.0" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
-    <defs>
-      <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="#dce3ea" />
-        <stop offset="100%" stop-color="#f0f2f5" />
-      </linearGradient>
-      <radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
-        <stop offset="0%" stop-color="#2979ff" />
-        <stop offset="40%" stop-color="#1565c0" />
-        <stop offset="100%" stop-color="#0d47a1" />
-      </radialGradient>
-      <radialGradient id="hlGrad" cx="35%" cy="25%" r="40%">
-        <stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
-        <stop offset="100%" stop-color="rgba(255,255,255,0)" />
-      </radialGradient>
-      <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-        <feGaussianBlur stdDeviation="8" result="blur" />
-        <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
-      </filter>
-      <filter id="shadow">
-        <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
-      </filter>
-      
-      <radialGradient id="itemGrad1" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#6ee7b7" />
-        <stop offset="100%" stop-color="#10b981" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad2" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#93c5fd" />
-        <stop offset="100%" stop-color="#3b82f6" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad3" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#c4b5fd" />
-        <stop offset="100%" stop-color="#8b5cf6" />
-      </radialGradient>
-      
-    </defs>
-
-    <rect width="600.0" height="550.0" fill="url(#bgGrad)" />
-
-    <circle cx="300.0" cy="295.0" r="235.0" fill="url(#blueOuter)" filter="url(#shadow)" />
-    <circle cx="300.0" cy="295.0" r="225.0" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
-    <circle cx="300.0" cy="295.0" r="210.0" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
-    <circle cx="300.0" cy="295.0" r="195.0" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
-
-    
-    <circle cx="300.0" cy="175.0" r="75.0" fill="url(#itemGrad1)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="300.0" cy="175.0" r="75.0" fill="url(#hlGrad)" />
-    <text x="300.0" y="175.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">GIS</text>
-    
-    
-    <circle cx="403.9" cy="355.0" r="75.0" fill="url(#itemGrad2)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="403.9" cy="355.0" r="75.0" fill="url(#hlGrad)" />
-    <text x="403.9" y="355.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">BIM</text>
-    
-    
-    <circle cx="196.1" cy="355.0" r="75.0" fill="url(#itemGrad3)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="196.1" cy="355.0" r="75.0" fill="url(#hlGrad)" />
-    <text x="196.1" y="355.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">DT</text>
-    
-    
-
-    <text x="300.0" y="95.0" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
-    <text x="300.0" y="120.0" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="900">DX (3개)</text>
-  </svg>
-
-  
-
-  
-  <div class="venn-desc">3개 요소의 기술 융합 구조</div>
-  
-</div>
-
-<style>
-.block-venn-svg {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 0;
-  flex-shrink: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-.block-venn-svg svg {
-  max-width: 450px;
-  width: 100%;
-  height: auto;
-  flex-shrink: 1;
-}
-.venn-desc {
-  font-size: 14px;
-  color: #444;
-  text-align: center;
-  max-width: 450px;
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body></html>

docs/block-tests/visuals_venn-3items.html

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>venn-3items</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 벤 다이어그램: 수학적 계산 기반 원형 배치 + SVG -->
-<!--
-  📋 venn-diagram (계산 기반)
-  ─────────────────
-  용도: 상위-하위 포함 관계, 기술 융합 구조
-  방식: 중앙 큰 원 + 작은 원 N개를 360/N 간격으로 배치 (수학적 계산)
-  슬롯: center_label, center_sub, items[] (개수 자유), description
-  계산: items 개수에 따라 자동으로 360도 분할 → cos/sin으로 좌표 결정
-
-  렌더링 전 Python에서 계산 필요:
-    for i, item in enumerate(items):
-        angle = (2 * pi * i / n) - pi/2  # 12시부터 시작
-        item['cx'] = 200 + 110 * cos(angle)
-        item['cy'] = 200 + 110 * sin(angle)
--->
-<div class="block-venn-calc">
-  <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" class="vc-svg">
-    <defs>
-      <radialGradient id="outerGrad" cx="50%" cy="40%" r="55%">
-        <stop offset="0%" stop-color="#e8f4fd" />
-        <stop offset="100%" stop-color="#d0e8f8" />
-      </radialGradient>
-      <filter id="glow">
-        <feGaussianBlur stdDeviation="6" result="blur" />
-        <feMerge>
-          <feMergeNode in="blur" />
-          <feMergeNode in="SourceGraphic" />
-        </feMerge>
-      </filter>
-      <filter id="shadow">
-        <feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.15" />
-      </filter>
-      
-      <radialGradient id="itemGrad1" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#6ee7b7" />
-        <stop offset="100%" stop-color="#10b981" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad2" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#93c5fd" />
-        <stop offset="100%" stop-color="#3b82f6" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad3" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#c4b5fd" />
-        <stop offset="100%" stop-color="#8b5cf6" />
-      </radialGradient>
-      
-    </defs>
-
-    <!-- 바깥 링 -->
-    <circle cx="200" cy="200" r="185" fill="none" stroke="#b8d4f0" stroke-width="1" opacity="0.5" />
-
-    <!-- 큰 원 (상위 개념) -->
-    <circle cx="200" cy="200" r="170" fill="url(#outerGrad)" stroke="#7eb8e0" stroke-width="2.5" />
-
-    <!-- 연결선 (각 작은 원 → 중심) -->
-    
-    <line x1="200" y1="200" x2="200.0" y2="110.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-    <line x1="200" y1="200" x2="295.3" y2="275.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-    <line x1="200" y1="200" x2="104.7" y2="275.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-
-    <!-- 작은 원들 (하위 요소) -->
-    
-    <circle cx="200.0" cy="110.0" r="42" fill="url(#itemGrad1)" filter="url(#shadow)" opacity="0.9" />
-    <text x="200.0" y="110.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">GIS</text>
-    
-    <circle cx="295.3" cy="275.0" r="42" fill="url(#itemGrad2)" filter="url(#shadow)" opacity="0.9" />
-    <text x="295.3" y="275.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">BIM</text>
-    
-    <circle cx="104.7" cy="275.0" r="42" fill="url(#itemGrad3)" filter="url(#shadow)" opacity="0.9" />
-    <text x="104.7" y="275.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">DT</text>
-    
-
-    <!-- 중앙 텍스트 -->
-    <text x="200" y="85" text-anchor="middle" dominant-baseline="central" fill="#1e3a6e" font-size="20" font-weight="900" font-family="Pretendard Variable, sans-serif">건설산업의 DX</text>
-    
-    <text x="200" y="108" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="11" font-family="Pretendard Variable, sans-serif">Digital Transformation</text>
-    
-  </svg>
-
-  
-  <div class="vc-desc">건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능</div>
-  
-</div>
-
-<style>
-.block-venn-calc {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 20px 0;
-}
-.vc-svg {
-  width: 380px;
-  height: 380px;
-}
-.vc-desc {
-  font-size: 14px;
-  color: #444;
-  text-align: center;
-  max-width: 450px;
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body>
-</html>

docs/block-tests/visuals_venn-4items-p2.html

@@ -1,171 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>venn-4items</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 벤 다이어그램: SVG premium (N개 자동 배치) -->
-<!--
-  📋 venn-diagram (P2-B: 동적 좌표 계산)
-  ─────────────────
-  용도: 상위-하위 포함 관계, 기술 융합 구조
-  방식: renderer가 svg_calculator.prepare_venn_data()로 좌표 사전 계산
-        → items[].cx, cy, r + outer_r, center_x, center_y 전달
-  Phase 1 fallback: outer_r이 없으면 3개 고정 좌표 사용
--->
-<div class="block-venn-svg">
-  
-  
-  <svg viewBox="0 0 600.0 550.0" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
-    <defs>
-      <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="#dce3ea" />
-        <stop offset="100%" stop-color="#f0f2f5" />
-      </linearGradient>
-      <radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
-        <stop offset="0%" stop-color="#2979ff" />
-        <stop offset="40%" stop-color="#1565c0" />
-        <stop offset="100%" stop-color="#0d47a1" />
-      </radialGradient>
-      <radialGradient id="hlGrad" cx="35%" cy="25%" r="40%">
-        <stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
-        <stop offset="100%" stop-color="rgba(255,255,255,0)" />
-      </radialGradient>
-      <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-        <feGaussianBlur stdDeviation="8" result="blur" />
-        <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
-      </filter>
-      <filter id="shadow">
-        <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
-      </filter>
-      
-      <radialGradient id="itemGrad1" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#10b98180" />
-        <stop offset="100%" stop-color="#10b981" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad2" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#3b82f680" />
-        <stop offset="100%" stop-color="#3b82f6" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad3" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#8b5cf680" />
-        <stop offset="100%" stop-color="#8b5cf6" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad4" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#f59e0b80" />
-        <stop offset="100%" stop-color="#f59e0b" />
-      </radialGradient>
-      
-    </defs>
-
-    <rect width="600.0" height="550.0" fill="url(#bgGrad)" />
-
-    <circle cx="300.0" cy="295.0" r="232.1" fill="url(#blueOuter)" filter="url(#shadow)" />
-    <circle cx="300.0" cy="295.0" r="222.1" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
-    <circle cx="300.0" cy="295.0" r="207.1" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
-    <circle cx="300.0" cy="295.0" r="192.1" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
-
-    
-    <circle cx="300.0" cy="165.4" r="62.5" fill="url(#itemGrad1)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="300.0" cy="165.4" r="62.5" fill="url(#hlGrad)" />
-    <text x="300.0" y="165.4" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">설계</text>
-    
-    
-    <circle cx="429.6" cy="295.0" r="62.5" fill="url(#itemGrad2)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="429.6" cy="295.0" r="62.5" fill="url(#hlGrad)" />
-    <text x="429.6" y="295.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">시공</text>
-    
-    
-    <circle cx="300.0" cy="424.6" r="62.5" fill="url(#itemGrad3)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="300.0" cy="424.6" r="62.5" fill="url(#hlGrad)" />
-    <text x="300.0" y="424.6" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">유지관리</text>
-    
-    
-    <circle cx="170.4" cy="295.0" r="62.5" fill="url(#itemGrad4)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="170.4" cy="295.0" r="62.5" fill="url(#hlGrad)" />
-    <text x="170.4" y="295.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">운영</text>
-    
-    
-
-    <text x="300.0" y="97.9" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
-    <text x="300.0" y="122.9" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="900">DX (4개)</text>
-  </svg>
-
-  
-
-  
-  <div class="venn-desc">4개 요소의 기술 융합 구조</div>
-  
-</div>
-
-<style>
-.block-venn-svg {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 0;
-  flex-shrink: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-.block-venn-svg svg {
-  max-width: 450px;
-  width: 100%;
-  height: auto;
-  flex-shrink: 1;
-}
-.venn-desc {
-  font-size: 14px;
-  color: #444;
-  text-align: center;
-  max-width: 450px;
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body></html>

docs/block-tests/visuals_venn-4items.html

@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>venn-4items</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 벤 다이어그램: 수학적 계산 기반 원형 배치 + SVG -->
-<!--
-  📋 venn-diagram (계산 기반)
-  ─────────────────
-  용도: 상위-하위 포함 관계, 기술 융합 구조
-  방식: 중앙 큰 원 + 작은 원 N개를 360/N 간격으로 배치 (수학적 계산)
-  슬롯: center_label, center_sub, items[] (개수 자유), description
-  계산: items 개수에 따라 자동으로 360도 분할 → cos/sin으로 좌표 결정
-
-  렌더링 전 Python에서 계산 필요:
-    for i, item in enumerate(items):
-        angle = (2 * pi * i / n) - pi/2  # 12시부터 시작
-        item['cx'] = 200 + 110 * cos(angle)
-        item['cy'] = 200 + 110 * sin(angle)
--->
-<div class="block-venn-calc">
-  <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" class="vc-svg">
-    <defs>
-      <radialGradient id="outerGrad" cx="50%" cy="40%" r="55%">
-        <stop offset="0%" stop-color="#e8f4fd" />
-        <stop offset="100%" stop-color="#d0e8f8" />
-      </radialGradient>
-      <filter id="glow">
-        <feGaussianBlur stdDeviation="6" result="blur" />
-        <feMerge>
-          <feMergeNode in="blur" />
-          <feMergeNode in="SourceGraphic" />
-        </feMerge>
-      </filter>
-      <filter id="shadow">
-        <feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.15" />
-      </filter>
-      
-      <radialGradient id="itemGrad1" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#7dd3fc" />
-        <stop offset="100%" stop-color="#00aaff" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad2" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#93c5fd" />
-        <stop offset="100%" stop-color="#006aff" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad3" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#6b9fff" />
-        <stop offset="100%" stop-color="#004cbe" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad4" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#c4b5fd" />
-        <stop offset="100%" stop-color="#7c3aed" />
-      </radialGradient>
-      
-    </defs>
-
-    <!-- 바깥 링 -->
-    <circle cx="200" cy="200" r="185" fill="none" stroke="#b8d4f0" stroke-width="1" opacity="0.5" />
-
-    <!-- 큰 원 (상위 개념) -->
-    <circle cx="200" cy="200" r="170" fill="url(#outerGrad)" stroke="#7eb8e0" stroke-width="2.5" />
-
-    <!-- 연결선 (각 작은 원 → 중심) -->
-    
-    <line x1="200" y1="200" x2="200.0" y2="110.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-    <line x1="200" y1="200" x2="310.0" y2="220.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-    <line x1="200" y1="200" x2="200.0" y2="330.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-    <line x1="200" y1="200" x2="90.0" y2="220.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-
-    <!-- 작은 원들 (하위 요소) -->
-    
-    <circle cx="200.0" cy="110.0" r="42" fill="url(#itemGrad1)" filter="url(#shadow)" opacity="0.9" />
-    <text x="200.0" y="110.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">설계</text>
-    
-    <circle cx="310.0" cy="220.0" r="42" fill="url(#itemGrad2)" filter="url(#shadow)" opacity="0.9" />
-    <text x="310.0" y="220.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">시공</text>
-    
-    <circle cx="200.0" cy="330.0" r="42" fill="url(#itemGrad3)" filter="url(#shadow)" opacity="0.9" />
-    <text x="200.0" y="330.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">유지관리</text>
-    
-    <circle cx="90.0" cy="220.0" r="42" fill="url(#itemGrad4)" filter="url(#shadow)" opacity="0.9" />
-    <text x="90.0" y="220.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">운영</text>
-    
-
-    <!-- 중앙 텍스트 -->
-    <text x="200" y="85" text-anchor="middle" dominant-baseline="central" fill="#1e3a6e" font-size="20" font-weight="900" font-family="Pretendard Variable, sans-serif">생애주기</text>
-    
-    <text x="200" y="108" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="11" font-family="Pretendard Variable, sans-serif">Life Cycle</text>
-    
-  </svg>
-
-  
-  <div class="vc-desc">설계 → 시공 → 유지관리 → 운영의 전 생애주기 관리</div>
-  
-</div>
-
-<style>
-.block-venn-calc {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 20px 0;
-}
-.vc-svg {
-  width: 380px;
-  height: 380px;
-}
-.vc-desc {
-  font-size: 14px;
-  color: #444;
-  text-align: center;
-  max-width: 450px;
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body>
-</html>

docs/block-tests/visuals_venn-5items-p2.html

@@ -1,181 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>venn-5items</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 벤 다이어그램: SVG premium (N개 자동 배치) -->
-<!--
-  📋 venn-diagram (P2-B: 동적 좌표 계산)
-  ─────────────────
-  용도: 상위-하위 포함 관계, 기술 융합 구조
-  방식: renderer가 svg_calculator.prepare_venn_data()로 좌표 사전 계산
-        → items[].cx, cy, r + outer_r, center_x, center_y 전달
-  Phase 1 fallback: outer_r이 없으면 3개 고정 좌표 사용
--->
-<div class="block-venn-svg">
-  
-  
-  <svg viewBox="0 0 600.0 550.0" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
-    <defs>
-      <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="#dce3ea" />
-        <stop offset="100%" stop-color="#f0f2f5" />
-      </linearGradient>
-      <radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
-        <stop offset="0%" stop-color="#2979ff" />
-        <stop offset="40%" stop-color="#1565c0" />
-        <stop offset="100%" stop-color="#0d47a1" />
-      </radialGradient>
-      <radialGradient id="hlGrad" cx="35%" cy="25%" r="40%">
-        <stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
-        <stop offset="100%" stop-color="rgba(255,255,255,0)" />
-      </radialGradient>
-      <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-        <feGaussianBlur stdDeviation="8" result="blur" />
-        <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
-      </filter>
-      <filter id="shadow">
-        <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
-      </filter>
-      
-      <radialGradient id="itemGrad1" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#10b98180" />
-        <stop offset="100%" stop-color="#10b981" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad2" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#3b82f680" />
-        <stop offset="100%" stop-color="#3b82f6" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad3" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#8b5cf680" />
-        <stop offset="100%" stop-color="#8b5cf6" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad4" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#f59e0b80" />
-        <stop offset="100%" stop-color="#f59e0b" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad5" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#ef444480" />
-        <stop offset="100%" stop-color="#ef4444" />
-      </radialGradient>
-      
-    </defs>
-
-    <rect width="600.0" height="550.0" fill="url(#bgGrad)" />
-
-    <circle cx="300.0" cy="295.0" r="232.8" fill="url(#blueOuter)" filter="url(#shadow)" />
-    <circle cx="300.0" cy="295.0" r="222.8" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
-    <circle cx="300.0" cy="295.0" r="207.8" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
-    <circle cx="300.0" cy="295.0" r="192.8" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
-
-    
-    <circle cx="300.0" cy="155.8" r="53.6" fill="url(#itemGrad1)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="300.0" cy="155.8" r="53.6" fill="url(#hlGrad)" />
-    <text x="300.0" y="155.8" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">기술</text>
-    
-    
-    <circle cx="432.4" cy="252.0" r="53.6" fill="url(#itemGrad2)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="432.4" cy="252.0" r="53.6" fill="url(#hlGrad)" />
-    <text x="432.4" y="252.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">S/W</text>
-    
-    
-    <circle cx="381.8" cy="407.6" r="53.6" fill="url(#itemGrad3)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="381.8" cy="407.6" r="53.6" fill="url(#hlGrad)" />
-    <text x="381.8" y="407.6" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">인력</text>
-    
-    
-    <circle cx="218.2" cy="407.6" r="53.6" fill="url(#itemGrad4)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="218.2" cy="407.6" r="53.6" fill="url(#hlGrad)" />
-    <text x="218.2" y="407.6" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">여건</text>
-    
-    
-    <circle cx="167.6" cy="252.0" r="53.6" fill="url(#itemGrad5)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="167.6" cy="252.0" r="53.6" fill="url(#hlGrad)" />
-    <text x="167.6" y="252.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">투자</text>
-    
-    
-
-    <text x="300.0" y="97.19999999999999" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
-    <text x="300.0" y="122.19999999999999" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="900">DX (5개)</text>
-  </svg>
-
-  
-
-  
-  <div class="venn-desc">5개 요소의 기술 융합 구조</div>
-  
-</div>
-
-<style>
-.block-venn-svg {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 0;
-  flex-shrink: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-.block-venn-svg svg {
-  max-width: 450px;
-  width: 100%;
-  height: auto;
-  flex-shrink: 1;
-}
-.venn-desc {
-  font-size: 14px;
-  color: #444;
-  text-align: center;
-  max-width: 450px;
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body></html>

docs/block-tests/visuals_venn-5items.html

@@ -1,185 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>venn-5items</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 벤 다이어그램: 수학적 계산 기반 원형 배치 + SVG -->
-<!--
-  📋 venn-diagram (계산 기반)
-  ─────────────────
-  용도: 상위-하위 포함 관계, 기술 융합 구조
-  방식: 중앙 큰 원 + 작은 원 N개를 360/N 간격으로 배치 (수학적 계산)
-  슬롯: center_label, center_sub, items[] (개수 자유), description
-  계산: items 개수에 따라 자동으로 360도 분할 → cos/sin으로 좌표 결정
-
-  렌더링 전 Python에서 계산 필요:
-    for i, item in enumerate(items):
-        angle = (2 * pi * i / n) - pi/2  # 12시부터 시작
-        item['cx'] = 200 + 110 * cos(angle)
-        item['cy'] = 200 + 110 * sin(angle)
--->
-<div class="block-venn-calc">
-  <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" class="vc-svg">
-    <defs>
-      <radialGradient id="outerGrad" cx="50%" cy="40%" r="55%">
-        <stop offset="0%" stop-color="#e8f4fd" />
-        <stop offset="100%" stop-color="#d0e8f8" />
-      </radialGradient>
-      <filter id="glow">
-        <feGaussianBlur stdDeviation="6" result="blur" />
-        <feMerge>
-          <feMergeNode in="blur" />
-          <feMergeNode in="SourceGraphic" />
-        </feMerge>
-      </filter>
-      <filter id="shadow">
-        <feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.15" />
-      </filter>
-      
-      <radialGradient id="itemGrad1" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#67e8f9" />
-        <stop offset="100%" stop-color="#0891b2" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad2" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#93c5fd" />
-        <stop offset="100%" stop-color="#3b82f6" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad3" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#c4b5fd" />
-        <stop offset="100%" stop-color="#8b5cf6" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad4" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#f9a8d4" />
-        <stop offset="100%" stop-color="#ec4899" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad5" cx="40%" cy="35%" r="65%">
-        <stop offset="0%" stop-color="#fcd34d" />
-        <stop offset="100%" stop-color="#f59e0b" />
-      </radialGradient>
-      
-    </defs>
-
-    <!-- 바깥 링 -->
-    <circle cx="200" cy="200" r="185" fill="none" stroke="#b8d4f0" stroke-width="1" opacity="0.5" />
-
-    <!-- 큰 원 (상위 개념) -->
-    <circle cx="200" cy="200" r="170" fill="url(#outerGrad)" stroke="#7eb8e0" stroke-width="2.5" />
-
-    <!-- 연결선 (각 작은 원 → 중심) -->
-    
-    <line x1="200" y1="200" x2="200.0" y2="110.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-    <line x1="200" y1="200" x2="304.6" y2="186.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-    <line x1="200" y1="200" x2="264.7" y2="309.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-    <line x1="200" y1="200" x2="135.3" y2="309.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-    <line x1="200" y1="200" x2="95.4" y2="186.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
-    
-
-    <!-- 작은 원들 (하위 요소) -->
-    
-    <circle cx="200.0" cy="110.0" r="42" fill="url(#itemGrad1)" filter="url(#shadow)" opacity="0.9" />
-    <text x="200.0" y="110.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">기술기반</text>
-    
-    <circle cx="304.6" cy="186.0" r="42" fill="url(#itemGrad2)" filter="url(#shadow)" opacity="0.9" />
-    <text x="304.6" y="186.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">S/W</text>
-    
-    <circle cx="264.7" cy="309.0" r="42" fill="url(#itemGrad3)" filter="url(#shadow)" opacity="0.9" />
-    <text x="264.7" y="309.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">인력</text>
-    
-    <circle cx="135.3" cy="309.0" r="42" fill="url(#itemGrad4)" filter="url(#shadow)" opacity="0.9" />
-    <text x="135.3" y="309.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">여건</text>
-    
-    <circle cx="95.4" cy="186.0" r="42" fill="url(#itemGrad5)" filter="url(#shadow)" opacity="0.9" />
-    <text x="95.4" y="186.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">투자</text>
-    
-
-    <!-- 중앙 텍스트 -->
-    <text x="200" y="85" text-anchor="middle" dominant-baseline="central" fill="#1e3a6e" font-size="20" font-weight="900" font-family="Pretendard Variable, sans-serif">DX 성공 요건</text>
-    
-    <text x="200" y="108" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="11" font-family="Pretendard Variable, sans-serif">5대 필수 요건</text>
-    
-  </svg>
-
-  
-  <div class="vc-desc">디지털 전환 성공을 위해 기술, S/W, 인력, 여건, 투자 5가지 요건이 필요</div>
-  
-</div>
-
-<style>
-.block-venn-calc {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 20px 0;
-}
-.vc-svg {
-  width: 380px;
-  height: 380px;
-}
-.vc-desc {
-  font-size: 14px;
-  color: #444;
-  text-align: center;
-  max-width: 450px;
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body>
-</html>

docs/block-tests/visuals_venn-7items-p2.html

@@ -1,201 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"><head><meta charset="UTF-8"><title>venn-7items</title>
-<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style></head><body><div class="block-container"><!-- 벤 다이어그램: SVG premium (N개 자동 배치) -->
-<!--
-  📋 venn-diagram (P2-B: 동적 좌표 계산)
-  ─────────────────
-  용도: 상위-하위 포함 관계, 기술 융합 구조
-  방식: renderer가 svg_calculator.prepare_venn_data()로 좌표 사전 계산
-        → items[].cx, cy, r + outer_r, center_x, center_y 전달
-  Phase 1 fallback: outer_r이 없으면 3개 고정 좌표 사용
--->
-<div class="block-venn-svg">
-  
-  
-  <svg viewBox="0 0 600.0 550.0" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
-    <defs>
-      <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="#dce3ea" />
-        <stop offset="100%" stop-color="#f0f2f5" />
-      </linearGradient>
-      <radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
-        <stop offset="0%" stop-color="#2979ff" />
-        <stop offset="40%" stop-color="#1565c0" />
-        <stop offset="100%" stop-color="#0d47a1" />
-      </radialGradient>
-      <radialGradient id="hlGrad" cx="35%" cy="25%" r="40%">
-        <stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
-        <stop offset="100%" stop-color="rgba(255,255,255,0)" />
-      </radialGradient>
-      <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-        <feGaussianBlur stdDeviation="8" result="blur" />
-        <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
-      </filter>
-      <filter id="shadow">
-        <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
-      </filter>
-      
-      <radialGradient id="itemGrad1" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#10b98180" />
-        <stop offset="100%" stop-color="#10b981" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad2" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#3b82f680" />
-        <stop offset="100%" stop-color="#3b82f6" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad3" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#8b5cf680" />
-        <stop offset="100%" stop-color="#8b5cf6" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad4" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#f59e0b80" />
-        <stop offset="100%" stop-color="#f59e0b" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad5" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#ef444480" />
-        <stop offset="100%" stop-color="#ef4444" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad6" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#06b6d480" />
-        <stop offset="100%" stop-color="#06b6d4" />
-      </radialGradient>
-      
-      <radialGradient id="itemGrad7" cx="35%" cy="30%" r="65%">
-        <stop offset="0%" stop-color="#ec489980" />
-        <stop offset="100%" stop-color="#ec4899" />
-      </radialGradient>
-      
-    </defs>
-
-    <rect width="600.0" height="550.0" fill="url(#bgGrad)" />
-
-    <circle cx="300.0" cy="295.0" r="240.1" fill="url(#blueOuter)" filter="url(#shadow)" />
-    <circle cx="300.0" cy="295.0" r="230.1" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
-    <circle cx="300.0" cy="295.0" r="215.1" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
-    <circle cx="300.0" cy="295.0" r="200.1" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
-
-    
-    <circle cx="300.0" cy="136.6" r="41.7" fill="url(#itemGrad1)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="300.0" cy="136.6" r="41.7" fill="url(#hlGrad)" />
-    <text x="300.0" y="136.6" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">GIS</text>
-    
-    
-    <circle cx="423.8" cy="196.2" r="41.7" fill="url(#itemGrad2)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="423.8" cy="196.2" r="41.7" fill="url(#hlGrad)" />
-    <text x="423.8" y="196.2" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">BIM</text>
-    
-    
-    <circle cx="454.4" cy="330.2" r="41.7" fill="url(#itemGrad3)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="454.4" cy="330.2" r="41.7" fill="url(#hlGrad)" />
-    <text x="454.4" y="330.2" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">DT</text>
-    
-    
-    <circle cx="368.7" cy="437.7" r="41.7" fill="url(#itemGrad4)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="368.7" cy="437.7" r="41.7" fill="url(#hlGrad)" />
-    <text x="368.7" y="437.7" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">IoT</text>
-    
-    
-    <circle cx="231.3" cy="437.7" r="41.7" fill="url(#itemGrad5)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="231.3" cy="437.7" r="41.7" fill="url(#hlGrad)" />
-    <text x="231.3" y="437.7" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">AI</text>
-    
-    
-    <circle cx="145.6" cy="330.2" r="41.7" fill="url(#itemGrad6)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="145.6" cy="330.2" r="41.7" fill="url(#hlGrad)" />
-    <text x="145.6" y="330.2" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">Cloud</text>
-    
-    
-    <circle cx="176.2" cy="196.2" r="41.7" fill="url(#itemGrad7)" opacity="0.9" filter="url(#glow)" />
-    <circle cx="176.2" cy="196.2" r="41.7" fill="url(#hlGrad)" />
-    <text x="176.2" y="196.2" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">Robot</text>
-    
-    
-
-    <text x="300.0" y="89.9" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
-    <text x="300.0" y="114.9" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="900">DX (7개)</text>
-  </svg>
-
-  
-
-  
-  <div class="venn-desc">7개 요소의 기술 융합 구조</div>
-  
-</div>
-
-<style>
-.block-venn-svg {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 0;
-  flex-shrink: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-.block-venn-svg svg {
-  max-width: 450px;
-  width: 100%;
-  height: auto;
-  flex-shrink: 1;
-}
-.venn-desc {
-  font-size: 14px;
-  color: #444;
-  text-align: center;
-  max-width: 450px;
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body></html>

docs/block-tests/visuals_venn-diagram.html

@@ -1,172 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>venn-diagram</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-</style>
-</head>
-<body><div class="block-container"><!-- 벤 다이어그램: AI 생성 배경 이미지 + HTML 텍스트 오버레이 -->
-<!--
-  📋 venn-diagram (레이어 방식)
-  ─────────────────
-  용도: 상위-하위 포함 관계, 기술 융합 구조
-  방식: 배경 이미지(원형 다이어그램) + HTML 텍스트 오버레이
-  슬롯: bg_image (선택), center_label, center_sub, items[], description
-  참고: bg_image가 없으면 기본 CSS 원으로 fallback
--->
-<div class="block-venn-layer">
-  <div class="vl-diagram">
-    
-    <img class="vl-bg" src="../figma-assets/venn_bg.png" alt="">
-    
-
-    <div class="vl-center-text">
-      <div class="vl-main">건설산업의 DX</div>
-      <div class="vl-sub">Digital Transformation</div>
-    </div>
-
-    <div class="vl-items">
-      
-      <div class="vl-item vl-item-1">GIS</div>
-      
-      <div class="vl-item vl-item-2">BIM</div>
-      
-      <div class="vl-item vl-item-3">DT</div>
-      
-    </div>
-  </div>
-
-  
-  <div class="vl-desc">건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능</div>
-  
-</div>
-
-<style>
-.block-venn-layer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 20px 0;
-}
-.vl-diagram {
-  position: relative;
-  width: 400px;
-  height: 400px;
-}
-.vl-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  z-index: 1;
-}
-.vl-bg-fallback {
-  border-radius: 50%;
-  background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(37,99,235,0.08));
-  border: 3px solid rgba(37,99,235,0.2);
-}
-.vl-center-text {
-  position: absolute;
-  top: 15%;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 5;
-  text-align: center;
-}
-.vl-main {
-  font-size: 20px;
-  font-weight: 900;
-  color: #1e3a6e;
-  line-height: 1.3;
-  white-space: pre-line;
-}
-.vl-sub {
-  font-size: 11px;
-  color: #6b7280;
-  margin-top: 3px;
-}
-.vl-items {
-  position: absolute;
-  bottom: 8%;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 0;
-  z-index: 5;
-}
-.vl-item {
-  width: 76px;
-  height: 76px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  font-size: 14px;
-  font-weight: 700;
-  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
-  /* 배경은 투명 — 이미지의 원이 보이도록 */
-  background: transparent;
-}
-.vl-item-1 { margin-right: -8px; }
-.vl-item-2 { z-index: 3; }
-.vl-item-3 { margin-left: -8px; }
-.vl-desc {
-  font-size: 14px;
-  color: #444;
-  text-align: center;
-  max-width: 450px;
-  line-height: 1.7;
-  word-break: keep-all;
-}
-</style></div></body>
-</html>

docs/block-tests/visuals_venn-premium.html

@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>venn-premium v6</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-/* Design Agent — 디자인 토큰 */
-/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
-
-:root {
-    /* 색상 */
-    --color-primary: #1e293b;
-    --color-accent: #2563eb;
-    --color-neutral: #64748b;
-    --color-bg: #ffffff;
-    --color-bg-subtle: #f8fafc;
-    --color-border: #e2e8f0;
-    --color-danger: #dc2626;
-    --color-success: #16a34a;
-    --color-text: #1e293b;
-    --color-text-secondary: #64748b;
-    --color-text-light: #94a3b8;
-
-    /* 폰트 크기 */
-    --font-title: 2rem;
-    --font-subtitle: 1.25rem;
-    --font-body: 0.95rem;
-    --font-caption: 0.8rem;
-    --font-small: 0.7rem;
-
-    /* 폰트 두께 */
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-    --weight-black: 900;
-
-    /* 여백 */
-    --spacing-page: 40px;
-    --spacing-block: 20px;
-    --spacing-inner: 16px;
-    --spacing-small: 8px;
-
-    /* 기타 */
-    --radius: 6px;
-    --border-width: 1px;
-    --accent-border: 3px;
-    --line-height-ko: 1.7;
-}
-
-body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
-
-.venn-premium { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 10px 0; }
-.vp-diagram { position: relative; width: 480px; height: 480px; }
-.vp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
-.vp-label {
-  position: absolute; z-index: 5; color: #fff;
-  text-align: center; font-weight: 700;
-  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
-  transform: translate(-50%, -50%);
-}
-.vp-center { top: 22%; left: 50%; }
-.vp-center .en { font-size: 13px; font-weight: 400; opacity: 0.9; }
-.vp-center .ko { font-size: 24px; font-weight: 900; margin-top: 2px; }
-
-.vp-dt { top: 51.8%; left: 40.2%; }
-.vp-dt .name { font-size: 20px; font-weight: 800; }
-.vp-dt .sub { font-size: 13px; font-weight: 400; opacity: 0.85; margin-top: 2px; }
-
-.vp-bim { top: 41%; left: 60.6%; }
-.vp-bim .name { font-size: 20px; font-weight: 800; }
-
-.vp-gis { top: 62.9%; left: 60.3%; }
-.vp-gis .name { font-size: 20px; font-weight: 800; }
-
-.vp-desc { font-size: 14px; color: #444; text-align: center; max-width: 500px; line-height: 1.7; word-break: keep-all; }
-</style>
-</head>
-<body>
-<div class="block-container">
-  <div class="venn-premium">
-    <div class="vp-diagram">
-      <img class="vp-bg" src="venn_premium_bg.png" alt="">
-      <div class="vp-label vp-center">
-        <div class="en">Digital Transformation</div>
-        <div class="ko">디지털 전환(D/X)</div>
-      </div>
-      <div class="vp-label vp-dt">
-        <div class="name">Digital Twin</div>
-        <div class="sub">(Metaverse)</div>
-      </div>
-      <div class="vp-label vp-bim">
-        <div class="name">BIM</div>
-      </div>
-      <div class="vp-label vp-gis">
-        <div class="name">GIS</div>
-      </div>
-    </div>
-    <div class="vp-desc">건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능</div>
-  </div>
-</div>
-</body>
-</html>

docs/block-tests/visuals_venn-svg-premium.html

@@ -1,121 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-<meta charset="UTF-8">
-<title>venn SVG premium test</title>
-<style>
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-body { font-family: "Pretendard Variable", sans-serif; background: #e0e5ea; display: flex; justify-content: center; padding: 30px; margin: 0; }
-.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; gap: 16px; }
-.desc { font-size: 14px; color: #444; text-align: center; line-height: 1.7; }
-</style>
-</head>
-<body>
-<div class="block-container">
-
-<svg viewBox="0 0 600 550" width="500" height="460" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
-  <defs>
-    <!-- 배경 그라데이션 (연한 회색→흰) -->
-    <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#dce3ea" />
-      <stop offset="100%" stop-color="#f0f2f5" />
-    </linearGradient>
-
-    <!-- 큰 파란 원 그라데이션 -->
-    <radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
-      <stop offset="0%" stop-color="#2979ff" />
-      <stop offset="40%" stop-color="#1565c0" />
-      <stop offset="100%" stop-color="#0d47a1" />
-    </radialGradient>
-
-    <!-- 주황→마젠타 원 -->
-    <radialGradient id="orangeGrad" cx="35%" cy="35%" r="65%">
-      <stop offset="0%" stop-color="#ffab40" />
-      <stop offset="40%" stop-color="#ff6d00" />
-      <stop offset="100%" stop-color="#c2185b" />
-    </radialGradient>
-
-    <!-- 민트/틸 원 -->
-    <radialGradient id="mintGrad" cx="40%" cy="30%" r="65%">
-      <stop offset="0%" stop-color="#80deea" />
-      <stop offset="40%" stop-color="#26c6da" />
-      <stop offset="100%" stop-color="#00897b" />
-    </radialGradient>
-
-    <!-- 골드 원 -->
-    <radialGradient id="goldGrad" cx="40%" cy="30%" r="65%">
-      <stop offset="0%" stop-color="#ffd54f" />
-      <stop offset="40%" stop-color="#ffb300" />
-      <stop offset="100%" stop-color="#e65100" />
-    </radialGradient>
-
-    <!-- 하이라이트 (구체 광택) -->
-    <radialGradient id="highlight" cx="35%" cy="25%" r="40%">
-      <stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
-      <stop offset="100%" stop-color="rgba(255,255,255,0)" />
-    </radialGradient>
-
-    <!-- 글로우 필터 -->
-    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="8" result="blur" />
-      <feMerge>
-        <feMergeNode in="blur" />
-        <feMergeNode in="SourceGraphic" />
-      </feMerge>
-    </filter>
-
-    <!-- 그림자 -->
-    <filter id="shadow">
-      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
-    </filter>
-
-    <!-- 큰 원 안쪽 그림자 (깊이감) -->
-    <filter id="innerDepth" x="-10%" y="-10%" width="120%" height="120%">
-      <feGaussianBlur in="SourceAlpha" stdDeviation="15" result="blur" />
-      <feOffset dx="0" dy="5" result="offsetBlur" />
-      <feComposite in="SourceGraphic" in2="offsetBlur" operator="over" />
-    </filter>
-  </defs>
-
-  <!-- 배경 -->
-  <rect width="600" height="550" fill="url(#bgGrad)" rx="0" />
-
-  <!-- 큰 파란 원 + 동심원 링 (바깥→안쪽) -->
-  <circle cx="300" cy="270" r="230" fill="url(#blueOuter)" filter="url(#shadow)" />
-  <circle cx="300" cy="270" r="220" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
-  <circle cx="300" cy="270" r="205" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
-  <circle cx="300" cy="270" r="190" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
-  <circle cx="300" cy="270" r="175" fill="none" stroke="#7ab8ec" stroke-width="0.6" opacity="0.2" />
-
-  <!-- 주황→마젠타 원 (가장 큼, 좌측) -->
-  <circle cx="265" cy="300" r="120" fill="url(#orangeGrad)" opacity="0.92" filter="url(#glow)" />
-  <circle cx="265" cy="300" r="120" fill="url(#highlight)" />
-
-  <!-- 민트 원 (우상) -->
-  <circle cx="370" cy="230" r="75" fill="url(#mintGrad)" opacity="0.9" filter="url(#glow)" />
-  <circle cx="370" cy="230" r="75" fill="url(#highlight)" />
-
-  <!-- 골드 원 (우하) -->
-  <circle cx="365" cy="355" r="75" fill="url(#goldGrad)" opacity="0.9" filter="url(#glow)" />
-  <circle cx="365" cy="355" r="75" fill="url(#highlight)" />
-
-  <!-- 텍스트: 디지털 전환 (큰 원 상단) -->
-  <text x="300" y="95" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
-  <text x="300" y="125" text-anchor="middle" fill="#ffffff" font-size="26" font-weight="900">디지털 전환(D/X)</text>
-
-  <!-- 텍스트: Digital Twin (주황 원 중앙) -->
-  <text x="250" y="295" text-anchor="middle" fill="#ffffff" font-size="20" font-weight="800">Digital Twin</text>
-  <text x="250" y="318" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">(Metaverse)</text>
-
-  <!-- 텍스트: BIM (민트 원 중앙) -->
-  <text x="370" y="237" text-anchor="middle" fill="#ffffff" font-size="20" font-weight="800">BIM</text>
-
-  <!-- 텍스트: GIS (골드 원 중앙) -->
-  <text x="365" y="362" text-anchor="middle" fill="#ffffff" font-size="20" font-weight="800">GIS</text>
-</svg>
-
-<div class="desc">건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능</div>
-
-</div>
-</body>
-</html>

docs/figma-analysis/1-1_d1.json

@@ -1 +0,0 @@
-{"status":429,"err":"Rate limit exceeded"}

docs/figma-analysis/1-1_raw.json

@@ -1 +0,0 @@
-{"status":429,"err":"Rate limit exceeded"}

docs/figma-analysis/1-1_미래_raw.json

@@ -1 +0,0 @@
-{"status":429,"err":"Rate limit exceeded"}