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/1171281203/analysis.md

@@ -0,0 +1,59 @@
+# Frame 1171281203 — Application S/W 의 구분
+
+## 내용 설명
+
+Application S/W를 Package와 Solution 2가지로 구분하여 2열 표로
+비교하는 디자인. Commercial 여부·고객·정의·특징·장점·단점 같은
+여러 관점을 행별로 대조해 두 유형의 차이를 보여줌.
+2개 S/W 유형의 다면 비교, 용어 구분 정리에 적합.
+3개 이상 유형 비교·시간 순서·단일 유형 설명에는 부적합.
+
+## 후보 키워드
+
+Package, Solution, Application, ApplicationSW, Commercial
+
+## 정제 Anchor Sets
+
+- **package_solution**: Package, Solution  _[min_hits=2, cap=0.7, exempt_if≥0.5]_
+  - note: 2-term generic pair (영어 일반어). 둘 다 등장해도 이 템플릿 주제라고 단정 불가. Application/Commercial 맥락이나 비교 차원 방증 필요.
+- **application_sw**: Application, ApplicationSW, Commercial
+
+## 구조 매칭 정보
+
+- **family**: table
+- **layout**: table-2col
+- **axis**: vertical
+- **relation_type**: compare
+- **cardinality**: ideal 2 / min 2 / max 2
+- **slots** (4개, required 4개): title, col_a_label, col_b_label, rows
+- **source title**: Application S/W 의 구분
+- **original layout**: table-2col
+
+## 적합/부적합 기준
+
+### suits
+- 2개 S/W 유형 비교
+- Package vs Solution 구분
+- Application S/W 분류 정리
+
+### not_suits
+- 3개 이상 유형 비교
+- 시간 순서
+- 단일 개념 설명
+- 병렬 나열 (비교 없음)
+
+## 재구성 허용
+
+- **split**: False
+- **merge**: True
+- **infer_missing_slot**: False
+- **rewrite_label**: True
+- **rewrite_body**: True
+
+## 메타
+
+- schema_version: template-fit-v1 mirror
+- source_of_truth: structure_ontology.yaml + keyword_base.yaml
+- structure_content_original_tagged_by: claude-opus-4-7 (2026-04-21)
+- keyword_base_sync_at: 2026-04-22
+- anchor_sets_cleaned_at: 2026-04-22

figma_to_html_agent/blocks/1171281203/analysis.md.pre_milestone2.bak

@@ -0,0 +1,17 @@
+# Frame 1171281203 — Application S/W의 구분
+
+## 구조
+- **layout**: table-2col
+- **detail**: 타이틀("Application S/W 의 구분") + 2열 표 (Package vs Solution — Commercial/고객/정의/특징/장점/단점)
+
+## 내용
+Application S/W 2가지 구분 — Package와 Solution의 정의·특징·장점·단점·고객 차이를 2열 표로 비교.
+
+## 후보 키워드
+ApplicationSW, S/W구분, Package, Solution, Commercial, 고객, 정의, 특징, 장점, 단점, 2열비교, 표
+
+## 메타
+- source: texts.md + flat.md
+- schema_version: analysis-v1
+- tagged_by: claude-opus-4-7
+- tagged_at: 2026-04-21

figma_to_html_agent/blocks/1171281203/flat.md

@@ -0,0 +1,64 @@
+# Frame 1171281203 — 실측 기록 (flat)
+
+> 원본: 1924 × 2014 px (node 145:8266)
+> 패턴: compare-table-2col (2열 S/W 비교 표)
+> Scale: 1280 / 1924 = 0.66527
+
+## 구조
+
+```
+Frame 145:8266 (1924 × 2014)
+├── 145:8270 배경1 IMG (0, 0) 1924×737
+├── 145:8269 배경2 IMG (1, 489) 1923×1525
+│
+├── 145:8273 타이틀 (3.97, 48.98)
+│   ├── 145:8275 아이콘 IMG 50×50
+│   └── 145:8276 TEXT "Application S/W 의 구분" — mixed gradient
+│
+├── 열 헤더 (y=171~251)
+│   ├── 145:8277 bar (53.58, 171.43) 1003×79 — bg:#589e8d
+│   ├── 145:8278 bar (1056.68, 171.43) 803×79 — bg:#ef7a26
+│   ├── 145:8279 TEXT "구 분" center(155.65, 211.28) — 40px Bold white
+│   ├── 145:8280 TEXT "(Commercial) Package Program" center(657.33, 211.11)
+│   └── 145:8281 TEXT "(System) Solution S/W" center(1457.03, 211.11)
+│
+├── 행 배경 (교대 white/rgba(253,198,158,0.16))
+│   ├── 145:8271 (51.59, 535.84) rgba(253,198,158,0.16) — 고객+정의 영역
+│   └── 145:8272 (51.59, 1282.31) rgba(253,198,158,0.16) — 장점+단점 영역
+│
+├── 수평선 CSS: y=537.81, 910.06, 1282.31, 1579.14, 1948.45
+├── 수직선 CSS: x=257.74 (전체), x=1056.68 (전체)
+│
+├── 5개 행
+│   ├── 고객(분야) — 145:8287/8288/8289
+│   ├── 정의 — 145:8291/8292/8293
+│   ├── 특징 — 145:8295/8296/8297
+│   ├── 장점 — 145:8299/8300/8301
+│   └── 단점 — 145:8303/8304/8305
+```
+
+## 에셋
+
+| hash | 의미 |
+|------|------|
+| 855b9d71...png | 배경1 (상단) |
+| f808a8c7...png | 배경2 (하단) |
+| b0e9fad5...png | 아이콘 |
+| line SVG 5개 | 전부 CSS border |
+
+## 색상
+
+| 요소 | 값 |
+|------|------|
+| 헤더 좌 | #589e8d |
+| 헤더 우 | #ef7a26 |
+| 행 배경 교대 | white / rgba(253,198,158,0.16) |
+| 강조 키워드 | #a14101 Bold |
+| 본문 | black, 40px Medium |
+
+## 변형 가능 축
+
+- columns[2] (required)
+- rows[N=3~7] (required)
+- header_colors[2] (required)
+- bg_images[2] (optional)

figma_to_html_agent/blocks/1171281203/index.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>Application S/W 구분 (Frame 1171281203)</title>
+<!--
+  Frame: 145:8266, 1924×2014 px
+  Scale: 1280 / 1924 = 0.66527
+  패턴: compare-table-2col
+  구조: CSS grid 표 (R17 콘텐츠 주도형)
+    - 텍스트 늘면 → 셀 늘고 → 행 늘고 → border 자동 따라감
+    - R13 flex pair (• level 1)
+    - R19 zoom
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet">
+<style>
+* { margin:0; padding:0; box-sizing:border-box; }
+body {
+  font-family: 'Noto Sans KR', sans-serif;
+  background: #e8ecf0;
+  display: flex; justify-content: center; align-items: center;
+  min-height: 100vh; word-break: keep-all;
+}
+.slide {
+  width: 1280px;
+  background: #fff; position: relative;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+}
+.block { width: 1280px; position: relative; overflow: hidden; }
+.inner {
+  width: 1924px;
+  zoom: 0.66527; /* R19 */
+  position: relative;
+}
+
+/* 배경 이미지 */
+.bg-img { position: absolute; z-index: 0; }
+.bg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+/* 타이틀 */
+.title-area {
+  position: relative; z-index: 1;
+  padding: 48px 4px 10px;
+  display: flex; align-items: center; gap: 15px;
+}
+.title-area img { width: 50px; height: 50px; object-fit: cover; }
+
+/* CSS Grid 표 */
+.tbl {
+  display: grid;
+  grid-template-columns: 204px 1fr 1fr;
+  margin: 0 53px;
+  position: relative; z-index: 1;
+}
+.tbl-header { display: contents; }
+.tbl-header .th {
+  padding: 15px 10px;
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: 40px; line-height: 45px;
+  color: #fff; text-align: center; letter-spacing: -2px;
+}
+.tbl-header .th:nth-child(1) { background: #589e8d; }
+.tbl-header .th:nth-child(2) { background: #589e8d; }
+.tbl-header .th:nth-child(3) { background: #ef7a26; }
+
+.tbl-row { display: contents; }
+.tbl-row .td {
+  padding: 15px 12px;
+  border-bottom: 1.5px solid #888;
+  border-right: 1.5px solid #888;
+  font-weight: 500; font-size: 40px; line-height: 75px;
+  color: #000;
+}
+.tbl-row .td:last-child { border-right: none; }
+.tbl-row .td-label {
+  font-weight: 700; font-size: 40px; line-height: 75px;
+  text-align: center;
+  display: flex; align-items: center; justify-content: center;
+  border-right: 1.5px solid #888;
+  border-bottom: 1.5px solid #888;
+}
+.tbl-row:nth-child(odd) .td,
+.tbl-row:nth-child(odd) .td-label { background: rgba(255,255,255,0.85); }
+.tbl-row:nth-child(even) .td,
+.tbl-row:nth-child(even) .td-label { background: rgba(253,198,158,0.2); }
+
+.hl { font-weight: 700; color: #a14101; }
+.big { font-size: 50px; font-weight: 700; color: #a14101; }
+
+/* R13 flex pair */
+.b1 { display: flex; align-items: flex-start; }
+.b1 .m { flex: none; width: 35px; text-align: center; }
+.b1 .t { flex: 1; }
+</style>
+</head>
+<body>
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <!-- 배경 이미지 -->
+      <div class="bg-img" style="left:0; top:0; width:1924px; height:737px;"><img src="assets/855b9d71b1cce30bcd89b214265fa8b6de58968f.png" alt=""></div>
+      <div class="bg-img" style="left:1px; top:489px; width:1923px; height:1525px;"><img src="assets/f808a8c71388afbadc21c5c4b4bbe76bcd73d420.png" alt=""></div>
+
+      <!-- 타이틀 -->
+      <div class="title-area">
+        <img src="assets/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" alt="">
+        <div style="font-size:0; line-height:0; text-shadow:0 0 4px #322c1e;">
+          <span style="font-weight:900; font-size:70px; line-height:normal; background:linear-gradient(#CC5200,#883700); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;">Application S/W </span>
+          <span style="font-weight:900; font-size:50px; line-height:normal; background:linear-gradient(#296b55,#000); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;">의 구분</span>
+        </div>
+      </div>
+
+      <!-- CSS Grid 표 -->
+      <div class="tbl">
+        <div class="tbl-header">
+          <div class="th">구&nbsp;&nbsp;&nbsp;&nbsp;분</div>
+          <div class="th">(Commercial) Package Program</div>
+          <div class="th">(System) Solution S/W</div>
+        </div>
+
+        <!-- 고객(분야) -->
+        <div class="tbl-row">
+          <div class="td-label">고객<br>(분야)</div>
+          <div class="td">
+            <div class="b1"><span class="m">•</span><span class="t"><span class="big">Customer</span></span></div>
+            <div class="b1"><span class="m">•</span><span class="t">구매자, 사용자 (상품, 제품 등)</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">이용자 (서비스, 구독 등)</span></div>
+          </div>
+          <div class="td">
+            <div class="b1"><span class="m">•</span><span class="t"><span class="big">Client</span></span></div>
+            <div class="b1"><span class="m">•</span><span class="t">발주자 (건설, 엔지니어링, 광고, 조선분야)</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">의뢰자 (법률, 회계, 자문 등)</span></div>
+          </div>
+        </div>
+
+        <!-- 정의 -->
+        <div class="tbl-row">
+          <div class="td-label">정의</div>
+          <div class="td">
+            <div class="b1"><span class="m">•</span><span class="t"><span class="hl">특정 기능이나 서비스를 제공</span>하기 위해 미리 구성된 Program</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">사용자가 직접 사용할 수 있도록 개발한 독립적이고 기성 제품화된 Program</span></div>
+          </div>
+          <div class="td">
+            <div class="b1"><span class="m">•</span><span class="t"><span class="hl">주어진 상황과 목적에 대한 해결책</span></span></div>
+            <div class="b1"><span class="m">•</span><span class="t">고객(의뢰인)의 요구를 충족시키면서 사용자가 편리하게 원하는 작업을 할 수 있도록 해주는 S/W 및 H/W를 제공</span></div>
+          </div>
+        </div>
+
+        <!-- 특징 -->
+        <div class="tbl-row">
+          <div class="td-label">특징</div>
+          <div class="td">
+            <div class="b1"><span class="m">•</span><span class="t">일반적인 업무프로세스 전반이 완성형 형태</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">고객필요기능 포함, <span class="hl">기성품</span></span></div>
+            <div class="b1"><span class="m">•</span><span class="t">변경 불가, API로 기능추가</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">예) ERP 패키지, AutoCAD, Midas 등</span></div>
+          </div>
+          <div class="td">
+            <div class="b1"><span class="m">•</span><span class="t">특정한 목적을 수행하는 H/W, S/W, 기술</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">고객요구로 <span class="hl">커스터마이징</span> 가능(맞춤형)</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">기능 또는 모듈을 추가하여 시스템 확장 기능</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">예) ERP 솔루션, CRM 솔루션</span></div>
+          </div>
+        </div>
+
+        <!-- 장점 -->
+        <div class="tbl-row">
+          <div class="td-label">장점</div>
+          <div class="td">
+            <div class="b1"><span class="m">•</span><span class="t">비용 효율적, 즉시 사용 가능</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">검증이 되어 안정성, 신뢰성</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">설치 및 사용이 상대적으로 간편</span></div>
+          </div>
+          <div class="td">
+            <div class="b1"><span class="m">•</span><span class="t">특정 비즈니스 문제해결 맞춤형 개발</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">고객의 요구가 자세히 반영</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">유연하고 확장성 뛰어남</span></div>
+          </div>
+        </div>
+
+        <!-- 단점 -->
+        <div class="tbl-row">
+          <div class="td-label">단점</div>
+          <div class="td">
+            <div class="b1"><span class="m">•</span><span class="t">특정 비즈니스 요구사항 딱 맞지 않음</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">소프트웨어 변경이 제작사에 의해 수행</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">필요하지 않은 기능이 많음</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">표준기능으로 경쟁우위 확보가 어려움</span></div>
+          </div>
+          <div class="td">
+            <div class="b1"><span class="m">•</span><span class="t">개발비용 및 시간 많이 소요</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">유지보수 및 업그레이드 비용 높음</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">개발 초기 안정성 신뢰도 낮음</span></div>
+            <div class="b1"><span class="m">•</span><span class="t">수요처가 제한적으로 상품화에 한계</span></div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+</body>
+</html>

figma_to_html_agent/blocks/1171281203/texts.md

@@ -0,0 +1,33 @@
+# Frame 1171281203 — 텍스트 (TF-IDF 매칭용)
+
+## 타이틀
+Application S/W 의 구분
+
+## 열 헤더
+구분
+(Commercial) Package Program
+(System) Solution S/W
+
+## 고객 (분야)
+Customer
+구매자, 사용자 (상품, 제품 등)
+이용자 (서비스, 구독 등)
+Client
+발주자 (건설, 엔지니어링, 광고, 조선분야)
+의뢰자 (법률, 회계, 자문 등)
+
+## 정의
+특정 기능이나 서비스를 제공하기 위해 미리 구성된 Program 사용자가 직접 사용할 수 있도록 개발한 독립적이고 기성 제품화된 Program
+주어진 상황과 목적에 대한 해결책 고객(의뢰인)의 요구를 충족시키면서 사용자가 편리하게 원하는 작업을 할 수 있도록 해주는 S/W 및 H/W를 제공
+
+## 특징
+일반적인 업무프로세스 전반이 완성형 형태 고객필요기능 포함, 기성품 변경 불가, API로 기능추가 예) ERP 패키지, AutoCAD, Midas 등
+특정한 목적을 수행하는 H/W, S/W, 기술 고객요구로 커스터마이징 가능(맞춤형) 기능 또는 모듈을 추가하여 시스템 확장 기능 예) ERP 솔루션, CRM 솔루션
+
+## 장점
+비용 효율적, 즉시 사용 가능 검증이 되어 안정성, 신뢰성 설치 및 사용이 상대적으로 간편
+특정 비즈니스 문제해결 맞춤형 개발 고객의 요구가 자세히 반영 유연하고 확장성 뛰어남
+
+## 단점
+특정 비즈니스 요구사항 딱 맞지 않음 소프트웨어 변경이 제작사에 의해 수행 필요하지 않은 기능이 많음 표준기능으로 경쟁우위 확보가 어려움
+개발비용 및 시간 많이 소요 유지보수 및 업그레이드 비용 높음 개발 초기 안정성 신뢰도 낮음 수요처가 제한적으로 상품화에 한계