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/1171281182/_render.py

@@ -0,0 +1,42 @@
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from PIL import Image
+import os, time
+
+here = os.path.dirname(os.path.abspath(__file__))
+renders = os.path.join(here, '_renders')
+os.makedirs(renders, exist_ok=True)
+
+opts = Options()
+opts.add_argument('--headless=new')
+opts.add_argument('--hide-scrollbars')
+opts.add_argument('--force-device-scale-factor=1')
+opts.add_argument('--window-size=1600,900')
+d = webdriver.Chrome(options=opts)
+
+p = os.path.join(here, 'index.html').replace(os.sep, '/')
+d.get('file:///' + p)
+time.sleep(2.0)
+full_png = os.path.join(renders, '_full.png')
+d.save_screenshot(full_png)
+
+r = d.execute_script(
+  'const r=document.querySelector(".slide").getBoundingClientRect();'
+  'return [r.x,r.y,r.width,r.height];'
+)
+print('slide bounds:', r)
+Image.open(full_png).crop(
+  (int(r[0]), int(r[1]), int(r[0]+r[2]), int(r[1]+r[3]))
+).save(os.path.join(renders, 'slide.png'))
+
+b = d.execute_script(
+  'const r=document.querySelector(".block").getBoundingClientRect();'
+  'return [r.x,r.y,r.width,r.height];'
+)
+print('block bounds:', b)
+Image.open(full_png).crop(
+  (int(b[0]), int(b[1]), int(b[0]+b[2]), int(b[1]+b[3]))
+).save(os.path.join(renders, 'block.png'))
+
+d.quit()
+print('OK')

figma_to_html_agent/blocks/1171281182/analysis.md

@@ -0,0 +1,63 @@
+# Frame 1171281182 — 시공단계 BIM 모델·정보 활용 구분
+
+## 내용 설명
+
+시공단계에서 BIM 모델과 정보 활용을 3가지로 구분해 제시하는 디자인.
+Model-based(모델 기반)·Object 기반·Position 기반 3가지 활용법을
+카드 3열로 나란히 설명. 이 디자인은 주체별(발주자/시공자/설계자)
+이나 필수요건(기술/사람/자연)이 아니라 BIM 정보 활용 방식의 3가지
+분류. 시공단계 BIM 활용 3분류·Model/Object/Position 기반 활용법·
+BIM 정보 이용 패턴 분류에 적합. 주체별 나열·필수요건 나열·2개
+비교·4개 이상 항목·시간 순서·BIM vs DX 다면 비교에는 부적합.
+
+## 후보 키워드
+
+모델기반, Object, Position, Object기반, Position기반, 시공단계, BIM모델, 활용구분, 정보활용, Model
+
+## 정제 Anchor Sets
+
+- **three_bim_usage**: 모델기반, Object, Position, Object기반, Position기반
+- **construction_bim**: 시공단계, BIM모델, 활용구분, 정보활용
+- **model_context**: Model
+
+## 구조 매칭 정보
+
+- **family**: cards
+- **layout**: cards-3-category
+- **axis**: horizontal
+- **relation_type**: parallel
+- **cardinality**: ideal 3 / min 3 / max 3
+- **slots** (7개, required 7개): title, category_1_label, category_1_body, category_2_label, category_2_body, category_3_label, category_3_body
+- **source title**: 시공단계 BIM 모델·정보 활용 구분
+- **original layout**: 3-category
+
+## 적합/부적합 기준
+
+### suits
+- 시공단계 BIM 활용 3분류
+- Model/Object/Position 기반 활용법
+- BIM 정보 이용 패턴 분류
+
+### not_suits
+- 주체별 나열 (발주자/시공자/설계자)
+- 필수요건 나열 (기술/사람/자연)
+- 2개 비교
+- 4개 이상 항목
+- 시간 순서
+- BIM vs DX 직접 대조
+
+## 재구성 허용
+
+- **split**: False
+- **merge**: False
+- **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/1171281182/analysis.md.pre_milestone2.bak

@@ -0,0 +1,17 @@
+# Frame 1171281182 — 시공단계 BIM 모델·정보 활용 구분
+
+## 구조
+- **layout**: 3-category
+- **detail**: 타이틀("시공단계 BIM 모델과 정보 활용 구분") + 3카테고리 섹션(모델기반·Object·Position)
+
+## 내용
+시공단계에서 BIM 모델과 정보 활용의 3가지 구분 — 모델기반(Model-based)·Object 기반·Position 기반 활용법.
+
+## 후보 키워드
+시공단계, BIM모델, 정보활용, 모델기반, Object, Position, Model, 3카테고리, 활용구분, Object기반, Position기반
+
+## 메타
+- 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/1171281182/flat.md

@@ -0,0 +1,128 @@
+# Frame 1171281182 — 실측 기록 (flat)
+
+> 원본: 1248 × 1066 px (node 182:2523, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373)
+> 패턴: cards-3-category-with-bim-process-diagram (상단 3 카테고리 카드 + 하단 BIM 모델/공사 Process 연계 원형 다이어그램)
+> Scale: **min(1280/1248, 720/1066) = 720/1066 = 0.67542** (height fit, 843×720 block)
+
+## 구조 (bottom-up)
+
+```
+Frame 182:2523 "Frame 1171281182" (1248 × 1066)
+│
+├─ ① 헤더 (title-row, flex gap 25)
+│  ├─ 182:2551 icon 50×50  ← title_icon.png (녹색 원형, 1171281179와 공유)
+│  └─ 182:2552 TEXT "시공단계 BIM 모델과 정보 활용 구분" — 50px Bold black (gradient bg-clip-text 솔리드 검정)
+│
+├─ ② 상단 3 카테고리 카드
+│  │
+│  ├─ Section 1 — Model-based (top=116)
+│  │   ├─ 182:2567 brown label (21, 116, 335×124) — bg rgba(50,31,9,0.8), rounded right r=20, drop-shadow
+│  │   │   "모델" 45px #FFE100 yellow + "기반" 38px white
+│  │   │   "(Model-based)" 38px white
+│  │   ├─ 182:2569 white card (378, 116, 870×124) — border 3px #A5BBB4, rounded right r=20
+│  │   ├─ 182:2570 card decor (981, 119, 264×118) — card_decor.png (rounded-bl,tl r=17)
+│  │   └─ 182:2571 body list (378, 148, 821×77) — 40px Bold black, list-disc
+│  │       "최종 목적물의 전체 또는 부분 [3D 형상정보 ] 활용"
+│  │       (강조: 45px #144838)
+│  │
+│  ├─ Section 2 — Object-based (top=263)
+│  │   ├─ 182:2555 brown label (19, 263, 335×124) — 동일 스타일
+│  │   │   "객체" 45px yellow + "기반" 38px white / "(Object-based)" 38px
+│  │   ├─ 182:2557 white card (376, 263, 870×124)
+│  │   ├─ 182:2558 card decor (983, 265, 260×119)
+│  │   └─ 182:2559 body list (376, 295, 857×77)
+│  │       "Model의 개별 [객체]에 정의된 [건설정보 ]활용"
+│  │
+│  └─ Section 3 — Position-based (top=411)
+│      ├─ 182:2562 brown label (21, 411, 335×124)
+│      │   "위치" 45px yellow + "기반" 38px white / "(Position-based)" 38px
+│      ├─ 182:2564 white card (378, 411, 870×124)
+│      ├─ 182:2565 card decor (981, 413, 265×119)
+│      └─ 182:2566 body list (378, 442, 821×77)
+│          "공사 중 발생하는 데이터의 [위치정보] 활용"
+│
+└─ ③ 하단 BIM 모델 / 공사 Process 연계 다이어그램 (656~1029)
+   │
+   ├─ 182:2537 container_bg.png (66, 660, 1084×370) — 큰 둥근 컨테이너 BG, rounded 69
+   ├─ 182:2535 wave_bg crop A (62, 656, 425×374, overflow hidden, image scaled 708%) — 좌측 부분
+   ├─ 182:2536 wave_bg crop B (475, 656, 675×374, overflow hidden, image translate-left 442%) — 우측 부분
+   │
+   ├─ 좌측 BIM 모델 영역
+   │   ├─ 182:2526 circle_bg.png (164, 707, 294×294)
+   │   ├─ 182:2539 left_circle_content (167, 656, 374×374) — BIM 와이어프레임
+   │   ├─ 182:2540 left_inner_decor (192.7, 742.55, 307×215)
+   │   ├─ 182:2527 dot_small (190, 717, 41×41)
+   │   ├─ 182:2531 dot_small (246, 995, 20×20)
+   │   ├─ 182:2532 element_122 (195, 944, 122×122)
+   │   └─ 182:2542 TEXT "BIM 모델" — 45px Bold gradient (#276853 → #B65320)
+   │       container at (233.29, 801, 256×?), text-shadow 0 7 4 rgba(0,0,0,0.5)
+   │
+   ├─ 가운데 X-shape decoration
+   │   ├─ 182:2543 x_shape_center (475, 743.05, 250×200)
+   │   ├─ 182:2544 x_shape_center mirror (-scale-y-100) (475, 741, 250×200)
+   │   └─ 182:2530 dot_small (446, 850, 20×20)
+   │
+   └─ 우측 공사 Process 연계 영역
+       ├─ 182:2525 circle_bg.png (590, 707, 294×294)
+       ├─ 182:2538 right_circle_content (671, 656, 374×374, opacity 0.95) — 페이퍼/문서
+       ├─ 182:2545 right_overlay (820, 771, 152×180, opacity 0.7)
+       ├─ 182:2529 dot_small (822, 733, 20×20)
+       ├─ 182:2528 dot_small (650.03, 980, 41×41)
+       ├─ 182:2533 element_122 (772, 682, 122×122)
+       └─ 182:2547 TEXT "공사 / Process 연계" — 45px Bold gradient
+           container at (720, 717, 256×214), 2 lines (line-height 60)
+```
+
+## 에셋 (12개)
+
+| 파일 | 의미 | 크기 | 사용 |
+|------|------|------|------|
+| `title_icon.png` | 녹색 원형 아이콘 (1171281179 공유) | 50×50 | 1× |
+| `card_decor.png` | 카드 우측 장식 (1171281179 공유) | 264×118 | 3× |
+| `container_bg.png` | 하단 다이어그램 컨테이너 큰 둥근 BG | 1084×370 | 1× |
+| `circle_bg.png` | 원형 둥근 사각 BG | 294×294 | 2× |
+| `left_circle_content.png` | 좌측 BIM 와이어프레임 모델 | 374×374 | 1× |
+| `right_circle_content.png` | 우측 페이퍼/문서 (opacity 0.95) | 374×374 | 1× |
+| `left_inner_decor.png` | 좌측 원 안 장식 | 307×215 | 1× |
+| `x_shape_center.png` | 중앙 X 모양 (원래 + 거울 mirror) | 250×200 | 2× |
+| `right_overlay.png` | 우측 추가 오버레이 (opacity 0.7) | 152×180 | 1× |
+| `wave_bg.png` | 컨테이너 안 wave 배경 (좌/우 crop 변형) | 425×374 / 675×374 | 2× |
+| `dot_small.png` | 작은 동그라미 dot | 41×41 / 20×20 | 5× |
+| `element_122.png` | 보조 장식 122×122 | 122×122 | 2× |
+
+## 이상 탐지 결과
+
+| 검사 | 결과 |
+|------|------|
+| 회전 | x_shape_center 두 번째 인스턴스 `-scale-y-100` (수직 미러) |
+| Vector 좌표 metadata vs design_context | 일치 |
+| **z-order 비정상** | 본문 ul들이 카드/decor 뒤에 섹션별로 분산 그려짐 — overlap 시각 영향 없음 |
+| 중복 노드 | circle_bg (2×), x_shape_center (2×), card_decor (3×), dot_small (5×), element_122 (2×) — 정상 재사용 |
+| **wave_bg crop** | 동일 src를 width 708%/542%로 스케일링하여 다른 부분 노출 — overflow:hidden 처리 필요 |
+
+## 변형 가능 축
+
+- **categories[N=3] (required)** — 모델기반 / 객체기반 / 위치기반 (cardinality 3 고정)
+  - `category_label_kr` (required, 한글, 강조 부분 yellow)
+  - `category_label_en` (required, "(English-based)" 형식)
+  - `category_body` (required, list-disc, 인라인 #144838 강조)
+- **bottom_diagram (optional?)** — BIM 모델 ↔ 공사 Process 연계 다이어그램. 다른 구성 가능
+  - `left_label` (required, "BIM 모델" 형태, 45px gradient)
+  - `right_label` (required, "공사 / Process 연계" 형태, 2 lines OK)
+  - 좌/우 원 콘텐츠 이미지는 도메인-specific (BIM, Process 시각화)
+- `title` (required, 50px Bold gradient bg-clip-text)
+- `title_icon` (required, 녹색 원형)
+
+## Sub-patterns
+
+- `cards-3-category-rounded-right` — 1171281179와 동일 사이드 라벨 패턴 (label-body-rounded-right-pair) 재사용
+- `dual-circle-process-diagram` — 신규 sub-pattern. 좌/우 큰 원 + 중앙 X-shape decoration + 다중 작은 dot 장식
+  - 좌/우 원: circle_bg + content(domain image) + decor 오버레이
+  - 중앙: X-shape (mirror 적용)
+  - 라벨: 45px Bold gradient bg-clip-text 텍스트
+
+## 임시 보정 (1:1, 템플릿화 시 재고려)
+
+- 하단 다이어그램의 모든 dot_small / element_122 위치는 Figma 데이터 그대로. 템플릿화 시 단순화 가능
+- wave_bg crop은 단일 이미지를 두 영역에 다른 변환으로 사용 — overflow:hidden 수동 적용
+- x_shape_center mirror는 CSS `transform: scaleY(-1)` (회전 아님)

figma_to_html_agent/blocks/1171281182/index.html

@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>시공단계 BIM 모델과 정보 활용 구분 (Frame 1171281182)</title>
+<!--
+  Frame: 182:2523, 1248 × 1066 px (Frame 1171281182)
+  Source: file 9S6LsQyO6zlRxtiqZccOUM, page 29:373
+  Scale: min(1280/1248, 720/1066) = 720/1066 = 0.67542 (height fit)
+  Block in slide: 843 × 720 px (centered horizontally)
+  패턴: cards-3-category-with-bim-process-diagram
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<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; height: 720px;
+  background: #fff;
+  position: relative; overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+  display: flex; align-items: center; justify-content: center;
+}
+.block {
+  position: relative;
+  overflow: hidden;
+}
+.inner {
+  width: 1248px; height: 1066px;
+  position: relative;
+  zoom: 0.67542;
+}
+
+/* ────────────────────────────────────────────────
+   ① 헤더
+   ──────────────────────────────────────────────── */
+.title-row {
+  position: absolute;
+  left: 0; top: 0;
+  display: flex; align-items: center; gap: 25px;
+}
+.title-icon { flex: none; width: 50px; height: 61px; display: flex; align-items: center; justify-content: center; }
+.title-icon img { width: 50px; height: 50px; object-fit: cover; display: block; }
+.title-text {
+  flex: none;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 700;
+  font-size: 50px;
+  line-height: 1;
+  white-space: nowrap;
+  text-shadow: 0 0 4px #322C1E;
+  /* gradient bg-clip-text: 첫 레이어 솔리드 검정 → 텍스트 검정 */
+  background-image: linear-gradient(90deg, rgb(0,0,0) 0%, rgb(0,0,0) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+/* ────────────────────────────────────────────────
+   ② 상단 3 카테고리 카드
+   ──────────────────────────────────────────────── */
+.label-box {
+  position: absolute;
+  width: 335px; height: 124px;
+  background: rgba(50, 31, 9, 0.8);
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  filter: drop-shadow(0 4px 2px rgba(0,0,0,0.25));
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  padding: 9px 22px;
+}
+.label-box .row1 { display: block; white-space: nowrap; letter-spacing: -1px; }
+.label-box .row1 .yellow { color: #FFE100; font-weight: 700; font-size: 45px; line-height: 45px; }
+.label-box .row1 .white  { color: #fff;     font-weight: 700; font-size: 38px; line-height: 45px; }
+.label-box .row2 { color: #fff; font-weight: 700; font-size: 38px; line-height: 45px; white-space: nowrap; letter-spacing: -1px; }
+
+.label--model    { left: 21px; top: 116px; }
+.label--object   { left: 19px; top: 263px; }
+.label--position { left: 21px; top: 411px; }
+
+.card-box {
+  position: absolute;
+  height: 124px;
+  width: 870px;
+  background: white;
+  border: 3px solid #A5BBB4;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+.card--model    { left: 378px; top: 116px; }
+.card--object   { left: 376px; top: 263px; }
+.card--position { left: 378px; top: 411px; }
+
+.card-decor {
+  position: absolute;
+  height: 119px;
+  border-bottom-left-radius: 17px;
+  border-top-left-radius: 17px;
+  overflow: hidden;
+}
+.card-decor img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.decor--model    { left: 981px; top: 119px; width: 264px; height: 118px; }
+.decor--object   { left: 983px; top: 265px; width: 260px; }
+.decor--position { left: 981px; top: 413px; width: 265px; }
+
+.body-list {
+  position: absolute;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 700;
+  height: 77px;
+  list-style: disc outside;
+  padding-left: 50px;
+  text-align: justify;
+  letter-spacing: -2px;
+  text-shadow: 0 4px 4px rgba(0,0,0,0.25);
+}
+.body-list li { line-height: 1.2; }
+.body-list .text  { font-size: 40px; color: #000; }
+.body-list .accent {
+  font-size: 45px;
+  color: #144838;
+  font-weight: 700;
+}
+
+.body--model    { left: 378px; top: 148px; width: 821px; }
+.body--object   { left: 376px; top: 295px; width: 857px; }
+.body--position { left: 378px; top: 442px; width: 821px; }
+
+/* ────────────────────────────────────────────────
+   ③ 하단 BIM ↔ Process 다이어그램
+   ──────────────────────────────────────────────── */
+.diagram-container {
+  position: absolute;
+  left: 66px; top: 660px;
+  width: 1084px; height: 370px;
+  border-radius: 69px;
+  overflow: hidden;
+}
+.diagram-container img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+/* wave_bg crop A (좌측, 4억대 스케일) */
+.wave-crop-a {
+  position: absolute;
+  left: 62px; top: 656px;
+  width: 425px; height: 374px;
+  overflow: hidden;
+  pointer-events: none;
+}
+.wave-crop-a img {
+  position: absolute;
+  left: 0; top: 0; height: 100%;
+  width: 708.65%;
+  max-width: none;
+  display: block;
+}
+
+/* wave_bg crop B (우측, 음수 left translate) */
+.wave-crop-b {
+  position: absolute;
+  left: 475px; top: 656px;
+  width: 675px; height: 374px;
+  overflow: hidden;
+  pointer-events: none;
+}
+.wave-crop-b img {
+  position: absolute;
+  left: -442.52%; top: 0; height: 100%;
+  width: 542.52%;
+  max-width: none;
+  display: block;
+}
+
+/* 좌/우 원 BG (square) */
+.circle-bg {
+  position: absolute;
+  width: 294px; height: 294px;
+  pointer-events: none;
+}
+.circle-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.circle-bg--left  { left: 164px; top: 707px; }
+.circle-bg--right { left: 590px; top: 707px; }
+
+/* 좌측 원 안 BIM 모델 콘텐츠 */
+.circle-content--left {
+  position: absolute;
+  left: 167px; top: 656px;
+  width: 374px; height: 374px;
+  pointer-events: none;
+}
+.circle-content--left img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+/* 좌측 원 안 추가 장식 */
+.left-inner-decor {
+  position: absolute;
+  left: 192.7px; top: 742.55px;
+  width: 306.794px; height: 215.139px;
+  pointer-events: none;
+}
+.left-inner-decor img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+/* "BIM 모델" 텍스트 */
+.bim-label {
+  position: absolute;
+  left: 233.29px; top: 801px;
+  width: 256.413px;
+  display: flex; align-items: center; justify-content: center;
+  padding: 10px;
+}
+.bim-label p {
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 700;
+  font-size: 45px;
+  line-height: 60px;
+  text-align: center;
+  white-space: nowrap;
+  text-shadow: 0 7px 4px rgba(0,0,0,0.5);
+  background-image: linear-gradient(to right, #276853 0%, #B65320 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  margin: 0;
+}
+
+/* 우측 원 안 콘텐츠 (페이퍼/문서) */
+.circle-content--right {
+  position: absolute;
+  left: 671px; top: 656px;
+  width: 374px; height: 374px;
+  pointer-events: none;
+}
+.circle-content--right img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; display: block; }
+
+/* 우측 추가 오버레이 */
+.right-overlay {
+  position: absolute;
+  left: 820px; top: 771px;
+  width: 152px; height: 180px;
+  overflow: hidden;
+  pointer-events: none;
+}
+.right-overlay img {
+  position: absolute;
+  left: -3.68%; top: -4.32%;
+  width: 111.76%; height: 114.22%;
+  opacity: 0.7;
+  max-width: none;
+  display: block;
+}
+
+/* "공사 / Process 연계" 텍스트 */
+.process-label {
+  position: absolute;
+  left: 720px; top: 717px;
+  width: 256.413px; height: 214.651px;
+  display: flex; align-items: center; justify-content: center;
+  padding: 10px;
+}
+.process-label .gradient-text {
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 700;
+  font-size: 45px;
+  text-align: center;
+  text-shadow: 0 7px 4px rgba(0,0,0,0.5);
+  background-image: linear-gradient(to right, #276853 0%, #B65320 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  white-space: nowrap;
+}
+.process-label .gradient-text p { line-height: 60px; margin: 0; }
+
+/* 중앙 X-shape (2개 — 원본 + scale-y-100 mirror) */
+.x-shape {
+  position: absolute;
+  width: 250.45px; height: 199.821px;
+  pointer-events: none;
+}
+.x-shape img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.x-shape--top { left: 475px; top: 743.05px; }
+.x-shape--bottom { left: 475px; top: 741px; transform: scaleY(-1); transform-origin: center; }
+
+/* 작은 dot 장식 (5개) */
+.dot {
+  position: absolute;
+  pointer-events: none;
+}
+.dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.dot--a { left: 190px;     top: 717px; width: 41px;     height: 41px; }
+.dot--b { left: 650.03px;  top: 980px; width: 41.037px; height: 41px; }
+.dot--c { left: 822px;     top: 733px; width: 20.018px; height: 20px; }
+.dot--d { left: 446px;     top: 850px; width: 20.018px; height: 20px; }
+.dot--e { left: 246px;     top: 995px; width: 20.018px; height: 20px; }
+
+/* 보조 장식 element 122 (2개) */
+.elem122 {
+  position: absolute;
+  width: 122px; height: 122px;
+  pointer-events: none;
+}
+.elem122 img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.elem122--left  { left: 195px; top: 944px; }
+.elem122--right { left: 772px; top: 682px; }
+</style>
+</head>
+<body>
+
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <!-- ① 헤더 -->
+      <div class="title-row">
+        <div class="title-icon"><img src="assets/title_icon.png" alt=""></div>
+        <p class="title-text">시공단계 BIM 모델과 정보 활용 구분</p>
+      </div>
+
+      <!-- ② Section 1 — Model-based -->
+      <div class="card-box card--model"></div>
+      <div class="card-decor decor--model"><img src="assets/card_decor.png" alt=""></div>
+      <div class="label-box label--model">
+        <div class="row1"><span class="yellow">모델</span><span class="white">기반</span></div>
+        <div class="row2">(Model-based)</div>
+      </div>
+      <ul class="body-list body--model">
+        <li><span class="text">최종 목적물의 전체 또는 부분</span><span class="accent"> 3D 형상정보 </span><span class="text">활용</span></li>
+      </ul>
+
+      <!-- ② Section 2 — Object-based -->
+      <div class="card-box card--object"></div>
+      <div class="card-decor decor--object"><img src="assets/card_decor.png" alt=""></div>
+      <div class="label-box label--object">
+        <div class="row1"><span class="yellow">객체</span><span class="white">기반</span></div>
+        <div class="row2">(Object-based)</div>
+      </div>
+      <ul class="body-list body--object">
+        <li><span class="text">Model의 개별 </span><span class="accent">객체</span><span class="text">에 정의된</span><span class="accent"> 건설정보 </span><span class="text">활용</span></li>
+      </ul>
+
+      <!-- ② Section 3 — Position-based -->
+      <div class="card-box card--position"></div>
+      <div class="card-decor decor--position"><img src="assets/card_decor.png" alt=""></div>
+      <div class="label-box label--position">
+        <div class="row1"><span class="yellow">위치</span><span class="white">기반</span></div>
+        <div class="row2">(Position-based)</div>
+      </div>
+      <ul class="body-list body--position">
+        <li><span class="text">공사 중 발생하는 데이터의 </span><span class="accent">위치정보</span><span class="text"> 활용</span></li>
+      </ul>
+
+      <!-- ③ 하단 다이어그램 -->
+      <div class="diagram-container"><img src="assets/container_bg.png" alt=""></div>
+      <div class="wave-crop-a"><img src="assets/wave_bg.png" alt=""></div>
+      <div class="wave-crop-b"><img src="assets/wave_bg.png" alt=""></div>
+
+      <!-- 좌측 BIM 모델 영역 -->
+      <div class="circle-bg circle-bg--left"><img src="assets/circle_bg.png" alt=""></div>
+      <div class="circle-content--left"><img src="assets/left_circle_content.png" alt=""></div>
+      <div class="left-inner-decor"><img src="assets/left_inner_decor.png" alt=""></div>
+      <div class="dot dot--a"><img src="assets/dot_small.png" alt=""></div>
+      <div class="dot dot--e"><img src="assets/dot_small.png" alt=""></div>
+      <div class="elem122 elem122--left"><img src="assets/element_122.png" alt=""></div>
+      <div class="bim-label"><p>BIM 모델</p></div>
+
+      <!-- 중앙 X-shape -->
+      <div class="x-shape x-shape--top"><img src="assets/x_shape_center.png" alt=""></div>
+      <div class="x-shape x-shape--bottom"><img src="assets/x_shape_center.png" alt=""></div>
+      <div class="dot dot--d"><img src="assets/dot_small.png" alt=""></div>
+
+      <!-- 우측 공사 Process 연계 영역 -->
+      <div class="circle-bg circle-bg--right"><img src="assets/circle_bg.png" alt=""></div>
+      <div class="circle-content--right"><img src="assets/right_circle_content.png" alt=""></div>
+      <div class="right-overlay"><img src="assets/right_overlay.png" alt=""></div>
+      <div class="dot dot--c"><img src="assets/dot_small.png" alt=""></div>
+      <div class="dot dot--b"><img src="assets/dot_small.png" alt=""></div>
+      <div class="elem122 elem122--right"><img src="assets/element_122.png" alt=""></div>
+      <div class="process-label">
+        <div class="gradient-text">
+          <p>공사</p>
+          <p>Process 연계</p>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

figma_to_html_agent/blocks/1171281182/texts.md

@@ -0,0 +1,36 @@
+# Frame 1171281182 — 텍스트 (TF-IDF 매칭용)
+
+> 프레임 안의 모든 텍스트를 빠짐없이 추출.
+
+## 타이틀
+시공단계 BIM 모델과 정보 활용 구분
+
+## 섹션1 — 모델기반 (Model-based)
+**모델**기반
+(Model-based)
+
+### 본문
+- 최종 목적물의 전체 또는 부분 **3D 형상정보** 활용
+
+## 섹션2 — 객체기반 (Object-based)
+**객체**기반
+(Object-based)
+
+### 본문
+- Model의 개별 **객체**에 정의된 **건설정보** 활용
+
+## 섹션3 — 위치기반 (Position-based)
+**위치**기반
+(Position-based)
+
+### 본문
+- 공사 중 발생하는 데이터의 **위치정보** 활용
+
+## 하단 다이어그램
+
+### 좌측 원
+BIM 모델
+
+### 우측 원
+공사
+Process 연계