IMPROVEMENT Phase A~D + Phase 2 전체 반영

## IMPROVEMENT (Phase A~D)
- A-1: 4단계 Sonnet 디자인 조정 (_adjust_design) — CSS 변수 cascade
- A-2: 5단계 HTML 전문 프롬프트 전달
- A-3: shrink/expand 하드코딩 제거 → Sonnet target_ratio 기반
- A-4: rewrite action 구현
- A-5: overflow: visible (area 레벨 텍스트 잘림 방지)
- A-6: object-fit cover → contain (이미지 crop 방지)
- A-7: table-layout: fixed
- A-8: container query 폰트 스케일링
- B-1: details-block 템플릿 신규 (CSS 변수만 사용)
- B-2: 인쇄 시 details 자동 펼침 JS
- B-3: catalog에 details-block 등록
- B-4/B-5: images[]/tables[] 상세 판단 + fallback 3곳 동기화
- B-8: fallback card-grid → topic-header + char_guide 제거
- C-1: CLAUDE.md gradient 원칙 완화
- C-3: border-radius 9개 파일 var(--radius) 통일
- C-4: box-shadow 2레벨 → 1레벨
- D-0: 이미지 경로 입력 UI + API base_path
- D-1: Pillow 의존성 + image_utils.py
- D-2~D-4: 이미지 비율/축소방지 프롬프트 전달
- D-5: HTML에 이미지 base64 삽입

## Phase 2 (다른 Claude 작업)
- P2-A: FAISS 블록 검색 (bge-m3, 46개 블록)
- P2-B: SVG N개 자동 배치 (svg_calculator.py)
- P2-C: Opus 블록 추천 (Kei API 경유)
- P2-D: 5단계 재검토 루프 강화 (MAX_REVIEW_ROUNDS=2)
- P2-E: details-block fallback 연동

## 버그 수정 (BF-8~10)
- BF-8: 컨테이너 예산 기반 블록 배치
- BF-9: grid와 Sonnet 역할 분리
- BF-10: catalog mtime 캐시 자동 갱신

## 블록 라이브러리
- 46개 블록 (6 카테고리), catalog/BLOCK_SLOTS/INDEX 동기화
- 구 블록 제거 (quote-block, card-grid, comparison)
- 13개 _legacy 블록 보존

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

templates/blocks/INDEX.md

@@ -0,0 +1,112 @@
+# 블록 라이브러리 인덱스 (46개)
+
+디자인 팀장이 콘텐츠에 맞는 블록을 선택할 때 참조하는 라이브러리.
+각 카테고리 안에 변형이 여러 개 있으며, 콘텐츠 성격에 따라 적절한 변형을 선택한다.
+
+**시각화(visuals/)는 SVG로 제작한다** — CSS/AI 이미지 금지.
+
+---
+
+## 📁 headers/ (5개) — 타이틀, 꼭지 헤더
+
+| 파일 | 설명 | 언제 사용 |
+|------|------|---------|
+| `section-title-with-bg.html` | 배경 이미지 위 영문+한글 타이틀 (500px) | 페이지 맨 첫 화면, 배경 이미지 있을 때 |
+| `section-header-bar.html` | 파란 바 + 중앙 흰 제목 (컴팩트) | 섹션 시작 가볍게, 주제 전환 |
+| `topic-left-right.html` | 좌:파란 제목 + 우:설명 | 질문+답변 구조, 주장+근거 |
+| `topic-center.html` | 중앙 정렬 대제목 + 서브+설명 | 단독 강조, 주제 선언 |
+| `topic-numbered.html` | 번호 원형 + 제목 + 구분선 + 설명 | 순서 있는 꼭지 (1번, 2번, 3번) |
+
+---
+
+## 📁 cards/ (10개) — 카드 계열
+
+| 파일 | 설명 | 언제 사용 |
+|------|------|---------|
+| `card-image-3col.html` | 이미지(160px) + 색상 제목 + 영문 + 불릿 (3열) | 단계별 설명에 이미지 핵심 |
+| `card-text-grid.html` | 파란 액센트 + 제목 + 뱃지 + 설명 + 출처 (2~4열) | 용어 정의, 텍스트만 나열 |
+| `card-dark-overlay.html` | 다크 이미지 배경 + 흰 제목 + 짧은 설명 (3~5열) | 키워드 시각 강조, 임팩트 |
+| `card-tag-image.html` | 색상 태그 라벨 + 이미지 + 제목 + 설명 (3열) | 카테고리별 분류 (제조/건축/토목) |
+| `card-icon-desc.html` | 큰 이모지 아이콘 + 제목 + 설명 (2~4열) | 기능/특성/장점 아이콘 나열 |
+| `card-compare-3col.html` | 색상 헤더 카드 3열 + 불릿 | 3개 카테고리 비교 (상용/범용/전문) |
+| `card-step-vertical.html` | 좌 색상 마커 + 우 콘텐츠 (세로, 연결선) | 생애주기 단계별 (이미지+설명) |
+| `card-image-round.html` | 원형 이미지(140px) + 제목 + 설명 (2~3열) | 포트폴리오형, 비전/가치 |
+| `card-stat-number.html` | 큰 숫자(36px) + 단위 + 라벨 (2~4열) | KPI, 성과 수치, 비용 절감율 |
+| `card-numbered.html` | 색상 원형 번호 + 제목 + 설명 (세로) | 순서 있는 항목 (실행 단계, 조건) |
+
+---
+
+## 📁 tables/ (3개) — 표/비교 계열
+
+| 파일 | 설명 | 언제 사용 |
+|------|------|---------|
+| `compare-3col-badge.html` | A \| VS배지 \| B 3단 비교 (행별) | 두 개념 다항목 비교 (BIM vs DX) |
+| `compare-2col-split.html` | 파란 헤더 좌/구분/우 + 행별 비교 | 두 기술 항목별 상세 비교 (GIS vs BIM) |
+| `table-simple-striped.html` | 남색 헤더 + 줄무늬 행. 범용 | 스펙표, 일정표, 수치 목록 |
+
+---
+
+## 📁 visuals/ (10개) — 시각 요소 (**SVG**)
+
+**SVG 노하우:**
+- `<text>` = 원 좌표와 같은 공간 → 위치 100% 정확
+- `radialGradient`/`linearGradient` → 고급 그라데이션
+- `filter` → 글로우/그림자
+- 수학적 계산 (cos/sin) → N개 자동 배치 (Phase 2)
+- **AI 이미지로 시각화 만들면 안 됨** — 원 위치 맞출 수 없음
+
+| 파일 | 설명 | 언제 사용 |
+|------|------|---------|
+| `venn-diagram.html` | **SVG premium** 벤 다이어그램 (그라데이션+글로우) | 포함 관계, 기술 융합 (**★단독 배치**) |
+| `circle-gradient.html` | 파란 그라데이션 원 + 중앙 텍스트 | 섹션 전환 키워드 강조 |
+| `compare-pill-pair.html` | 이중 테두리 둥근 박스 2개 + VS | 2개 개념 시각 대비 (표 위 헤더) |
+| `process-horizontal.html` | 파란 번호 원 + 카드 + → 화살표 (가로) | 논리적 프로세스 흐름 |
+| `flow-arrow-horizontal.html` | 색상 캡슐 + 화살표 (SVG, 컴팩트) | 기술 발전/전환 흐름 간결하게 |
+| `keyword-circle-row.html` | SVG 원형 안 큰 글자 + 라벨 + 설명 | 약어 풀이 (G-S-I-M) |
+| `layer-diagram.html` | SVG 겹친 사다리꼴 레이어 (3D) | 기술 스택/계층 구조 |
+| `timeline-vertical.html` | 세로 선 + SVG 마커 + 연도+제목+설명 | 연혁, 로드맵 (4개+ 이벤트) |
+| `timeline-horizontal.html` | SVG 가로 선 + 마커 + 연도+제목 | 짧은 일정 (3~5개, 컴팩트) |
+| `pyramid-hierarchy.html` | SVG 위→아래 넓어지는 사각형 | 위계, 우선순위 (좁은→넓은) |
+
+---
+
+## 📁 emphasis/ (13개) — 강조, 인용, 결론
+
+| 파일 | 설명 | 언제 사용 |
+|------|------|---------|
+| `quote-left-border.html` | 좌측 빨간 라인 + 연한 배경 + 인용+출처 | 짧은 인용, 문제 제기 |
+| `quote-big-mark.html` | ❝❞ 큰따옴표 장식 + 인용+출처 | 임팩트 인용, 핵심 발언 |
+| `quote-question.html` | 파란 배경+테두리 + 큰 질문 텍스트 | 독자에게 질문, 전환점 |
+| `conclusion-accent-bar.html` | 회색 배경 + 좌측 파란 라인 + 결론 | 페이지 하단 핵심 한 줄 |
+| `comparison-2col.html` | 좌 파란 vs 우 빨간 헤더 + 본문 | A vs B 직접 비교 |
+| `banner-gradient.html` | 파란 그라데이션 배너 + 중앙 흰 텍스트 | 섹션 구분, 핵심 선언 |
+| `dark-bullet-list.html` | 짙은 남색 배경 + 파란 제목 + 흰 불릿 | 핵심 포인트 강조 (무게감) |
+| `highlight-strip.html` | 가로 색상 구간 + 흰 라벨 | 카테고리 색상 분류 바 |
+| `callout-solution.html` | 파란 배경+테두리 + 아이콘 + 제목+설명 | 해결책, 솔루션, 방향성 |
+| `callout-warning.html` | 빨간 배경+테두리 + 아이콘 + 제목+설명 | 문제점, 주의, 잘못된 접근 |
+| `tab-label-row.html` | 가로 탭 버튼 (선택됨=색상, 나머지=회색) | 카테고리 전환/분류 표시 |
+| `divider-text.html` | 좌우 회색 선 + 중앙 텍스트 | 가벼운 섹션 구분, 휴식점 |
+| `details-block.html` | `<details>/<summary>` 접기/펼치기 | 상세 콘텐츠, 자세히보기 |
+
+---
+
+## 📁 media/ (5개) — 이미지/미디어
+
+| 파일 | 설명 | 언제 사용 |
+|------|------|---------|
+| `image-row-2col.html` | 이미지 2장 나란히 (354px) | 시공 사진 2장, 현장 비교 |
+| `image-grid-2x2.html` | 이미지 4장 2x2 격자 (200px) | 현장 사진 4장, 갤러리 |
+| `image-side-text.html` | 좌:이미지(320px) + 우:제목+설명+불릿 | 이미지 설명, 시스템 소개 |
+| `image-full-caption.html` | 전체 너비 이미지 1장 + 캡션 | 핵심 도표, 대형 다이어그램 |
+| `image-before-after.html` | Before(회색) + → + After(파란) | 변화 전후 비교 |
+
+---
+
+## 추가 규칙
+
+1. **이름 규칙:** `{유형}-{특징}.html`
+2. **모든 변형은 catalog.yaml에 등록** — 미등록 = 팀장이 모름
+3. **각 파일 상단에 HTML 주석으로 용도/슬롯 명시**
+4. **디자인 토큰 사용** — 하드코딩 색상 금지 (가능한 범위에서)
+5. **높이 고정 금지** — 모드 독립적 (슬라이드/웹 겸용)
+6. **visuals/는 SVG로 제작** — CSS 원/AI 이미지 금지