add: figma_to_html_agent/blocks/ + 변환 도구 docs 갱신

전체 401 files (397 추가 + 4 수정), 14304 insertions.

추가:
- figma_to_html_agent/blocks/ — Figma 변환 결과 (32 frame, ~79MB).
  각 frame folder = {analysis.md, flat.md, texts.md, index.html, assets/,
  _renders/, _render.py, RELATIONSHIPS.md / STATUS.md / classification.md
  (일부 frame)}.
  Phase Z 의 *figma source layer* — runtime 에서 직접 사용 X, contract /
  partial / builder adapter (미래 axis A) 의 source.
- figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md — 변환 설계 회의 기록.
- figma_to_html_agent/HARNESS.md — 변환 검증 harness.
- figma_to_html_agent/scripts/fetch_figma_screenshots.py — Figma 스크린샷 자동 수집.

수정:
- figma_to_html_agent/PROCESS-CONTROL.md / PROCESS.md / RULES.md —
  변환 프로세스 / 룰 갱신 (R8/R9 lock 강화 등).
- figma_to_html_agent/blocks_index.md — 32 frame 인덱스 갱신.

Phase Z 영향 0 (figma_to_html_agent/blocks/ 가 V4 catalog +
templates/phase_z2/families adapter 의 source — runtime 에서 직접 import X).

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

figma_to_html_agent/PROCESS.md

@@ -108,9 +108,27 @@ f05ebf15....png   arc_top
 
 ---
 
-## STEP 5 — flat.md 작성 (분석 + 이상 탐지)
+## STEP 5 — 산출물 3종 작성 (flat.md + texts.md + index.html)
 
-`block-tests/{slug}_flat.md` 파일 생성. 다음 섹션을 반드시 포함:
+### 산출물 폴더 구조 (프레임별)
+
+```
+blocks/{frame_id}/
+├── index.html        ← ① HTML 블록 (CSS gradient, transform: scale)
+├── flat.md           ← ② 실측 기록 (모든 노드 좌표/크기/속성)
+└── texts.md          ← ③ TF-IDF용 텍스트 (모든 텍스트 빠짐없이)
+```
+
+**texts.md 작성 규칙:**
+- MCP get_design_context에서 모든 텍스트 노드의 텍스트를 추출
+- 노드 계층 설명이 아니라 **텍스트만** 깨끗하게 나열
+- 빠짐없이. "간략하게" 금지. flat.md에서 TEXT 타입 노드를 전수 추출
+- 섹션별로 그룹핑 (열1, 열2, 열3 등)
+- TF-IDF 인덱스 구축 시 이 파일을 직접 사용
+
+### flat.md 작성 규칙
+
+`blocks/{frame_id}/flat.md` 파일 생성. 다음 섹션을 반드시 포함:
 
 ### 섹션 1. 메타
 ```markdown
@@ -245,6 +263,73 @@ from scripts.gradient_math import svg_to_css
 
 **왜 transform: scale을 쓰는가:** 모든 위치/크기/폰트/그림자/스트로크가 한 번의 transform으로 균일하게 축소됨. 매 값을 수동으로 ×S 곱하는 것보다 안전하고 검증 가능. ([MATH.md §1](MATH.md))
 
+### 7-A1. 콘텐츠 주도형 구조 (R17/R19, 권장)
+
+텍스트 분량 변화에 유연한 블록을 만들 때는 아래 구조를 사용한다:
+
+```html
+<div class="slide">
+  <div class="block">
+    <div class="inner">  <!-- zoom: S (transform:scale 대신, R19) -->
+      <div class="title">...</div>
+      <div class="rows">  <!-- flex column: 행 간 자연 flow -->
+        <section class="row">  <!-- flex column: pill → body → pill -->
+          <div class="pill-area">...</div>
+          <div class="body-area">  <!-- flex row: left | divider | right -->
+            <div class="body-left">텍스트 (자연 flow)</div>
+            <div class="divider"></div>
+            <div class="body-right">텍스트 (자연 flow)</div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.inner { width: {W}px; zoom: {S}; }
+.rows { display: flex; flex-direction: column; }
+.row { display: flex; flex-direction: column; }
+.body-area { flex: 1; display: flex; }
+.body-left, .body-right { flex: 1; }
+```
+
+**핵심 원칙:**
+- 본문 텍스트에 absolute 금지 → flex/flow로 자연 배치
+- 텍스트 늘면 body-area가 늘고, 아래 행이 밀림
+- overflow:hidden으로 텍스트 숨기기 절대 금지
+- pill 장식은 section 기준 상대 배치 (콘텐츠를 따름)
+- pill의 crop variant와 label position은 분리 (R18)
+
+**사용 시점:** 텍스트 분량이 가변적인 블록 (비교표, 이슈 목록, 불릿 리스트 등)
+
+### 7-A2. MCP 데이터 → HTML 1:1 변환 원칙 (PROCESS-CONTROL 규칙 8)
+
+MCP get_design_context 응답의 React+Tailwind 코드를 HTML/CSS로 변환할 때:
+
+1. **모든 요소를 빠짐없이 반영** — "핵심만", "단순화" 금지
+2. **래퍼 구조 유지** — MCP에 flex container + rotate 래퍼가 있으면 HTML에도 동일 구조
+3. **시각 속성 절대 생략 금지**:
+   - `mix-blend-mode: multiply` → CSS에 반드시 포함
+   - `opacity-80`, `opacity-70` → CSS opacity 반드시 포함
+   - `transform: rotate()`, `scaleY()` → 래퍼 div 구조로
+   - `border-radius`, `inset` → Figma 값 그대로
+   - `background-image` (gradient) → gradient_math.py 변환 또는 MCP 값 직접 사용
+   - `box-shadow`, `text-shadow`, `letter-spacing` → 값 그대로
+4. **검증**: 변환 후 MCP 응답의 CSS 속성 수 vs index.html CSS 속성 수 대조
+
+**변환 순서:**
+```
+MCP className/style 읽기
+  → 각 속성을 CSS로 매핑
+  → position: absolute + MCP 좌표(left, top, width, height)
+  → 래퍼가 있으면 래퍼 div 생성 + transform 적용
+  → 시각 속성 (blend, opacity, radius, shadow) 전부 추가
+  → 텍스트 내용 삽입
+  → 완성 후 MCP 원본과 속성 수 대조
+```
+
 ### 7-B. 요소 변환 우선순위
 
 | 요소 종류 | 구현 방법 | 이유 |
@@ -312,6 +397,40 @@ d.quit()
 - Figma `get_screenshot` 응답과 Selenium 결과를 **사람 눈**으로 비교
 - 차이 발견 시 STEP 5~7로 돌아가서 원인 파악 (값 수정 금지)
 
+### STEP 8-B. 전수 대조 검증 (필수, 다음 프레임 진행 전 반드시 통과)
+
+**원칙: "간략하게", "핵심만", "중요한 것만" — 전부 금지. 전수 처리.**
+
+프레임 완료 전 아래 3가지 검증을 모두 통과해야 다음 프레임으로 넘어갈 수 있다:
+
+**① texts.md 전수 검증:**
+- MCP get_design_context의 모든 텍스트 노드를 texts.md와 1:1 대조
+- texts.md에 없는 텍스트 노드가 하나라도 있으면 실패
+- 검증 방법: MCP 응답에서 텍스트 추출 → texts.md와 diff
+
+**② flat.md 전수 검증:**
+- MCP get_metadata의 모든 노드가 flat.md에 기록되어 있는지 대조
+- 좌표, 크기, 타입, 이름이 빠짐없이 기록되어야 함
+- "간략하게만 적었습니다" → 절대 금지. 실측 기록부에 간략은 없다
+
+**③ index.html 전수 검증:**
+- texts.md의 모든 텍스트가 index.html에 존재하는지 대조
+- flat.md의 모든 시각 요소(bar, line, icon 등)가 index.html에 반영되어 있는지 대조
+- 하나라도 누락되면 실패
+
+**검증 실행 방법:**
+```
+# texts.md vs index.html 교차 대조
+texts.md의 각 줄 텍스트 → index.html에서 grep → 없으면 FAIL
+
+# MCP 텍스트 노드 수 vs texts.md 항목 수
+MCP 텍스트 노드: N개
+texts.md 항목: M개
+N == M 이어야 PASS
+```
+
+**검증 미통과 시:** 다음 프레임 진행 금지. 누락 항목 수정 후 재검증.
+
 ---
 
 ## STEP 9 — 결과물 저장