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/blocks/1171281202/RELATIONSHIPS.md

@@ -0,0 +1,128 @@
+# Frame 1171281202 — 원본 시각 관계 분석
+
+> 소스: `design_agent(원본)/figma_to_html_agent/block-tests/bim-sw-overview.html`
+> 목적: hybrid 재구성 전, 보존/flow화/CSS대체 영역을 명확히 분리
+
+---
+
+## 1. 반드시 유지할 시각 관계
+
+### 1-A. 좌측 패널 전체 (absolute 유지, 변경 없음)
+
+| 요소 | 위치 | 크기 |
+|------|------|------|
+| left-bg | left:38, top:74.02 | w:964.14, h:759.99 |
+| cat-bar-1 | left:103.13, top:153 | w:693.19, h:49 |
+| cat-bar-2 | left:103.13, top:352 | w:693.19, h:49 |
+| cat-bar-3 | left:103.13, top:612 | w:693.19, h:49 |
+| cat-title-1 | left:162.77, top:126 | w:606.27, h:95.8 |
+| cat-title-2 | left:162.77, top:326 | w:606.27, h:95.8 |
+| cat-title-3 | left:162.77, top:586 | w:606.27, h:95.8 |
+| sw-1 | left:166.42, top:207 | w:323.36, h:120 |
+| sw-2 | left:166.42, top:405 | w:654.63, h:180 |
+| sw-3 | left:162.46, top:671 | w:654.63, h:120 |
+
+**좌측은 건드리지 않는다.**
+
+### 1-B. 타이틀 (absolute 유지)
+
+| 요소 | 위치 | 크기 |
+|------|------|------|
+| title-icon | left:0, top:13 | w:38.05, h:40 |
+| title-text | left:51, top:0 | w:1198, h:48 |
+| title-bar | left:26, top:42 | w:255.13, h:26 |
+
+### 1-C. 장식 요소 (absolute 유지)
+
+| 요소 | 위치 | 크기 |
+|------|------|------|
+| mid-deco | left:884.33, top:192 | w:180.96, h:541 |
+| mid-arrow | left:943.66, top:375 | w:73.18, h:158 |
+
+### 1-D. 우측 5행 top rhythm (absolute Y 유지)
+
+| Row | badge top | bar top | text top | arrow top | interval |
+|-----|-----------|---------|----------|-----------|----------|
+| 1 | 78 | 105 | 123 | 152 | — |
+| 2 | 230 | 257 | 276 | 302 | 152 |
+| 3 | 384 | 412 | 430 | 456 | 154 |
+| 4 | 539 | 567 | 586 | 606 | 155 |
+| 5 | 694 | 721 | 734 | 760 | 155 |
+
+**핵심**: 이 Y rhythm은 고정. flex column으로 일반화하면 안 됨.
+
+### 1-E. 우측 row 내부 겹침 관계
+
+각 row에서 4개 요소의 X 관계:
+```
+badge:  left:1047.5,  w:88.01  → 1047.5 ~ 1135.51
+bar:    left:1094.96, w:751.54 → 1094.96 ~ 1846.50
+text:   left:1176.05, w:687.26 → 1176.05 ~ 1863.31
+arrow:  left:1794.09, w:47.47  → 1794.09 ~ 1841.56
+```
+
+**겹침 관계:**
+- badge는 bar 시작점 좌측으로 47.46px 돌출 (1094.96-1047.5)
+- badge와 bar는 40.55px 겹침 (1135.51-1094.96)
+- text는 bar 좌측에서 81.09px 안쪽에서 시작 (1176.05-1094.96)
+- text는 bar 우측을 16.81px 넘어감 (1863.31-1846.50) ← 원본 특성
+- arrow는 bar 내부, 우측에서 52.41px 안쪽 (1846.50-1794.09)
+
+---
+
+## 2. flow/flex로 바꿔도 되는 내부 영역
+
+### 우측 row 내부만 (row Y는 유지)
+
+**현재 (원본)**:
+- badge, bar, text, arrow 모두 독립 absolute
+
+**하이브리드**:
+각 row를 하나의 컨테이너로 묶고, row의 top은 원본 값 유지.
+내부에서만 관계 재정의:
+
+```
+.row-N (absolute top: 원본 값, left: 1047.5px)
+  .badge (absolute overlay, z-index:2)
+  .bar (CSS background, position:relative)
+    .text (bar 내부 usable area 기준)
+    .arrow (bar 끝 구조 자산)
+```
+
+**"bar 내부 usable area" 계산:**
+- bar left edge → text start: 81px (padding-left)
+- text end → bar right edge: text가 16.8px 넘어감 → 넘어가도록 허용하거나 bar를 확장
+- arrow start → bar right edge: 52px (padding-right for arrow area)
+
+---
+
+## 3. CSS로 대체 가능한 자산
+
+| 원본 자산 | CSS 대체 | 상태 |
+|----------|---------|------|
+| left-bg | CSS gradient + clip-path | 원본에서 이미 CSS |
+| cat-bar × 3 | CSS gradient | 원본에서 이미 CSS |
+| right-bar × 5 | CSS background | 원본에서 이미 CSS |
+| mid-deco | CSS radial-gradient | 원본에서 이미 CSS |
+| title-bar | CSS blur | 원본에서 이미 CSS |
+| badge × 5 | **이미지 유지** (복잡한 원형 + 숫자) | — |
+| arrow × 5 | **이미지 유지** (화살표 아이콘) | — |
+| mid-arrow | **이미지 유지** | — |
+| title-icon | **이미지 유지** | — |
+
+→ 원본에서 이미 모든 CSS 변환 완료. 추가 대체 대상 없음.
+
+---
+
+## 4. 하이브리드 재구성 축 순서
+
+**축1 (먼저)**: row geometry
+- 좌측 전체 유지 (absolute 그대로)
+- 우측 5행: 각 row를 하나의 컨테이너로 묶기
+- row top은 원본 값 유지
+- 내부: badge overlay + bar(contains text + arrow)
+- 이 단계에서는 text usable area는 아직 안 건드림
+
+**축2 (다음)**: text usable area
+- bar 내부에서 text의 padding/width를 "bar usable area"로 재정의
+- arrow를 bar 끝 구조 자산으로 재배치