Figma-to-HTML 에이전트 초기 커밋

- 10단계 변환 프로세스 (PROCESS.md)
- 수학 공식 레퍼런스 (MATH.md, gradient_math.py)
- CSS 보정 규칙 R1~R16 (RULES.md)
- 작업 규율 7개 규칙 (PROCESS-CONTROL.md)
- 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/)
- 8개 Jinja2 템플릿 staging (templates_staging/)
- 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md)
- 사용법 가이드 (README.md)

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

.gitignore

@@ -0,0 +1,29 @@
+# Legacy / 임시 파일
+block_index.faiss
+block_metadata.json
+figma_beps_full.json
+figma_center_elements.json
+figma_center_full.json
+figma_frames.json
+figma-analysis/
+figma-assets/
+figma-screenshots/
+figma_ref/
+previews/
+FIGMA-COMPONENT-EXTRACTION-PLAN.md
+FIGMA-CONVERSION-REVIEW.md
+FIGMA-DESIGN-LANGUAGE.md
+FIGMA-EXTRACTION.md
+INSIGHT-GRADIENT.md
+PHASE-FIGMA-BLOCKS.md
+PLAN.md
+RESEARCH.md
+
+# Selenium 렌더 결과 / 비교 스크린샷
+block-tests/_renders/
+block-tests/*.png
+
+# Python
+__pycache__/
+*.pyc
+scripts/__pycache__/

CLAUDE.md

@@ -0,0 +1,131 @@
+# Figma → HTML Agent
+
+Figma 프레임을 **수학적으로 정확하게** HTML/CSS로 변환하고, 변환물을 **재사용 가능한 블록 라이브러리**로 축적하는 에이전트.
+
+## 목적
+
+사용자가 Figma 파일에서 프레임을 선택하면:
+1. 그 프레임을 16:9 슬라이드(1280×720) 안의 HTML 블록으로 100% 동일하게 변환한다
+2. 변환물의 "변형 가능 축"을 기록한다 (원 개수, 색상, 라벨 등)
+3. 같은 패턴이 반복되면 Jinja2 템플릿으로 추상화하여 design_agent의 블록 라이브러리에 편입한다
+
+## 핵심 원칙 (절대 어기지 않음)
+
+1. **수학적 계산만 허용** — 시행착오 px 조정 금지. Figma 좌표 → 스케일 → CSS 값 수학적 도출
+2. **Bottom-up 프로세스** — leaf 노드 플래튼 → 2개씩 묶기 → 계층 쌓기. top-down하면 누락
+3. **이상 탐지 필수** — 모든 노드에 bbox 비율 검사, 회전 감지, 중복 감지 수행
+4. **AI가 먼저 발견** — 디테일(1px, 1° 차이)을 사용자 피드백 전에 AI가 스스로 찾음
+5. **하드코딩 금지** — 결과물을 수동으로 고치지 말고 프로세스를 고친다
+6. **AI 역할 분담** — AI는 분류(고르기)만, 구성(만들기)은 코드. LLM은 px을 못 본다
+7. **컨텍스트 관리는 compact로** — 한 세션에서 여러 프레임을 연속 작업할 수 있다. 컨텍스트가 무거워지면 `/compact` 로 핵심만 요약하고 계속 진행. 이유: 핵심 결정/구조/규칙은 모두 파일(CLAUDE.md, PROCESS.md, RULES.md, blocks_index.md, 산출물)에 박혀있어 compact 후에도 보존됨. 손실되는 건 시행착오/디버깅 과정 뿐이며, 이건 잃어도 OK. 매 프레임마다 새 세션을 강제하면 누적 학습이 silo되어 R13 같은 sub-pattern 발견의 즉시 적용이 불가능해짐.
+8. **순수 CSS 우선, SVG는 곡선/필터에만** — 동적 재구성 위해 가능한 한 HTML div + linear-gradient 사용
+9. **프로모션은 사용자 승인 후 진행** — 1:1 HTML 검증 완료 후, 사용자 승인을 받아 `templates/blocks/new/`에 블록을 생성하고 `templates/blocks/svg/`에 이미지를 정리한다. catalog.yaml 등록과 blocks_index.md 업데이트까지 에이전트가 수행한다. 단, 사용자 승인 없이 프로모션하지 않는다.
+10. **시맨틱 우선, Figma 평면 레이어 그대로 옮기지 말 것** — Figma의 평면 레이어 구조는 디자인 도구의 한계일 뿐, 의미 구조가 아니다. 마커+텍스트는 list item, 카드 묶음은 column unit, 등 시맨틱하게 재그룹핑하여 작성한다. RULES.md R13 (Custom-marker bullet list) 참조. 새로 발견되는 sub-pattern은 [blocks_index.md](blocks_index.md) "디자인 인사이트" 섹션에 누적한다.
+11. **모든 슬롯은 기본 optional** — 1:1 단계에서 모든 슬롯이 채워져 있다고 해서 "이 블록은 필수" 로 해석하지 않는다. 같은 블록이 사진 없는/짧은/긴 mdx에 모두 매칭되어야 한다는 가정으로 설계한다.
+
+## 변환 프로세스 (10단계)
+
+전체 절차는 [PROCESS.md](PROCESS.md) 참조.
+
+```
+0-A. 에이전트: blocks_index.md 한 번 읽기 (지난 변환 패턴 확인)
+0-B. 사용자: Figma에서 프레임 선택
+1.  get_metadata          ← 구조 + bbox
+2.  get_design_context    ← gradient/filter/text 정보
+3.  get_screenshot        ← Figma 원본 (검증 비교용)
+4.  자산 → block-tests/assets/shared/{hash} 캐시
+5.  flat.md 작성          ← bottom-up + 이상 탐지 + 변형 축 메모
+6.  그라데이션 수학 변환  ← scripts/gradient_math.py 호출
+7.  HTML 작성             ← 순수 CSS 우선, transform: scale() 균일 축소
+8.  Selenium 스크린샷     ← Figma 프리뷰와 사람 눈 비교
+9.  block-tests/{slug}.html + flat.md 저장
+10. blocks_index.md 1줄 업데이트
+```
+
+**패턴 발견 트리거:** 동일 구조의 프레임이 **2번째** 등장하는 순간 → `templates_staging/{pattern_id}.html.j2` 로 Jinja2화. 이게 staging 종착점.
+
+**프로모션 게이트:** staging까지가 에이전트 책임. 그 다음은 사용자가 직접 검수하고 [design_agent/templates/blocks/](../templates/blocks/) 로 이전 + [catalog.yaml](../templates/catalog.yaml) 등록. **에이전트는 design_agent/templates/ 를 절대 건드리지 않는다.**
+
+## 도구
+
+| 도구 | 용도 |
+|------|------|
+| Figma MCP `get_metadata` | 프레임 구조 + 절대 좌표 |
+| Figma MCP `get_design_context` | gradient/filter/font 등 stylable 데이터 |
+| Figma MCP `get_screenshot` | Figma 원본 PNG (눈 검증용) |
+| `scripts/gradient_math.py` | SVG `<linearGradient>` → CSS `linear-gradient(...)` 수학 변환 |
+| Selenium (headless Chrome) | HTML 렌더링 + 검증 스크린샷 |
+| Pillow | 스크린샷 자르기/비교 |
+
+## 입출력
+
+**입력:** Figma 파일 + 노드 ID (또는 현재 선택 노드)
+**출력 (변환):**
+- `block-tests/{slug}.html` — 1:1 변환 결과
+- `block-tests/{slug}_flat.md` — 플래튼/이상 탐지/변형 축 메모
+- `assets/shared/...` — 공유 자산 캐시
+- `blocks_index.md` 한 줄 추가
+
+**출력 (프로모션, 사용자 승인 후):**
+- `templates/blocks/new/{pattern}.html` — AI가 재디자인 가능한 블록 (CSS + Jinja2)
+- `templates/blocks/svg/{name}.png/svg` — 블록 공용 이미지
+- `templates/catalog.yaml` — 블록 등록 (content_structure, when, not_for)
+- `blocks_index.md` 상태 → promoted
+
+## 폴더 구조
+
+```
+figma_to_html_agent/                ← 에이전트 작업 영역 (staging)
+├── CLAUDE.md                       ← 이 파일 (에이전트 명세)
+├── PROCESS.md                      ← 10단계 운영 절차 (변환 핸드북)
+├── MATH.md                         ← 수학 공식 레퍼런스
+├── RULES.md                        ← CSS 보정 규칙 (R1~R16)
+├── PROCESS-CONTROL.md              ← "찍어맞추기 금지" 규칙
+├── README.md                       ← 사용법 가이드
+├── blocks_index.md                 ← 변환 완료 도서관
+│
+├── scripts/
+│   ├── __init__.py                 ← 빈 파일 (패키지 인식용)
+│   └── gradient_math.py            ← SVG→CSS 그라데이션 변환 함수
+│
+├── block-tests/                    ← Stage 1: 정적 1:1 변환물
+│   ├── {slug}.html
+│   ├── {slug}_flat.md
+│   ├── _renders/                   ← Selenium 검증 스크린샷
+│   └── assets/
+│       ├── shared/                 ← 해시 기반 자산 캐시 (재사용)
+│       └── frame_{id}/             ← 프레임 전용 자산 (legacy)
+│
+└── templates_staging/              ← Stage 2: Jinja2 추상화 (legacy, 현재 미사용)
+
+────────────────────────────────────────────────────────
+프로모션 (사용자 승인 후 에이전트가 실행)
+────────────────────────────────────────────────────────
+
+design_agent/templates/
+├── blocks/
+│   ├── new/                        ← Figma 추출 블록 (에이전트가 작성)
+│   ├── svg/                        ← 블록 공용 이미지 (에이전트가 정리)
+│   ├── slide-base.html             ← 고정 슬라이드 배경
+│   └── cards/, emphasis/, ...      ← 기존 블록
+└── catalog.yaml                    ← 블록 등록 (에이전트가 업데이트)
+```
+
+**중요:** 프로모션(블록 생성, 이미지 정리, catalog 등록)은 사용자가 1:1 HTML을 검증하고 승인한 후에만 진행한다. 사용자 승인 없이 templates/ 를 수정하지 않는다.
+
+## 금지 사항
+
+- 시행착오 px 조정 (1씩 늘려보기 등)
+- 사용자에게 "맞나요?" 반복 질문 (스스로 검증)
+- line-height 등 CSS 속성을 감으로 보정 (폰트 메트릭에서 수학적 도출)
+- 흰 텍스트 스트로크 (`-webkit-text-stroke: white`) 사용
+- 블록 배경을 검정으로 표시 (미리보기는 항상 흰색 배경)
+- **이미지 해석으로 gradient 방향 판단** (멀티모달 금지, 데이터로만 판단 — PROCESS-CONTROL.md 참조)
+- **한 번에 여러 값 동시 수정** (gradient 각도와 border-radius 동시 변경 금지)
+- **장식 요소를 이미지 슬롯(img src)으로 넣기** — gradient bar, ribbon, pill, badge, 오버레이 등은 CSS로 구현. AI가 색상/크기를 조정할 수 없는 이미지 의존 블록은 쓸 수 없다
+- **사용자 승인 없이 templates/ 수정** — 프로모션은 사용자 승인 후에만
+- **여러 프레임을 한 세션에 변환** (1세션 1프레임 원칙)
+- **plus-darker 블렌드 사용** (Safari 전용 → multiply로 교체, RULES.md R10)
+- **Figma 인벤토리/지문/군집 같은 사전 분류** (work-creating-work, 패턴은 bottom-up으로 발견)
+- **`design_agent/templates/` 직접 수정** (프로모션 게이트는 사용자 전용. 에이전트는 staging까지만)
+- **사용자에게 "templates/ 에 옮겨드릴까요?" 같은 제안** (월권. 사용자가 알아서 함)

MATH.md

@@ -0,0 +1,362 @@
+# 수학 공식 레퍼런스
+
+Figma → HTML 변환에서 사용하는 모든 수학 공식. 이 문서의 공식만 사용하고, 직관/감으로 보정하지 않는다.
+
+---
+
+## §1. 스케일 팩터
+
+### 정의
+
+```
+S = 1280 / W_원본_프레임
+```
+
+`1280`은 16:9 슬라이드 가로 폭. 모든 프레임은 가로 1280에 맞춰 축소된다.
+
+### 적용 방법: CSS transform scale (권장)
+
+```html
+<div class="block">
+  <div class="inner">  <!-- 원본 W × H 좌표계 그대로 -->
+    ... 모든 요소 (Figma 원본 px) ...
+  </div>
+</div>
+```
+
+```css
+.block {
+  width: 1280px;
+  height: {H × S}px;
+  overflow: hidden;
+  position: relative;
+}
+.inner {
+  position: absolute;
+  left: 0; top: 0;
+  width: {W}px;       /* 원본 그대로 */
+  height: {H}px;
+  transform: scale({S});
+  transform-origin: top left;
+}
+```
+
+**왜 transform이 좋은가:**
+- 위치/크기/폰트/그림자/스트로크/blur radius 모두 한 번에 균일 축소
+- 매 값 수동 곱셈하면 누적 오차 + 검증 어려움
+- transform은 GPU 가속, 계산 정확
+
+### 적용 대상
+
+| 적용 | 미적용 |
+|------|------|
+| 위치 (x, y) | 색상 |
+| 크기 (width, height) | 그라데이션 방향 (각도 그대로) |
+| 폰트 크기 | 그라데이션 stop 퍼센트 (그대로) |
+| 스트로크 너비 | 폰트 굵기 |
+| 간격 (gap, padding) | line-height 비율 (1.5 등) |
+| 그림자 (blur, offset) | border-radius 비율 (50% 등) |
+| border-radius (px) | |
+
+---
+
+## §2. SVG `<linearGradient>` → CSS `linear-gradient()`
+
+### 입력
+
+SVG에서:
+```xml
+<linearGradient id="..." gradientUnits="userSpaceOnUse"
+                x1="..." y1="..." x2="..." y2="...">
+  <stop offset="0" stop-color="..."/>
+  <stop offset="1" stop-color="..."/>
+</linearGradient>
+```
+
+### 변환 공식
+
+```
+1. dx = x2 - x1
+   dy = y2 - y1
+   L_svg = √(dx² + dy²)
+
+2. SVG 벡터 각도 (y-down 좌표계, 0°=오른쪽, +CW):
+   svg_angle = atan2(dy, dx)  (단위: 라디안)
+
+3. CSS 각도 (12시 방향=0°, +CW):
+   css_angle = degrees(svg_angle) + 90
+   css_angle = css_angle mod 360
+
+4. CSS 그라데이션 선 길이 (W×H 박스 안):
+   α = radians(css_angle)
+   L_css = |W × sin(α)| + |H × cos(α)|
+
+5. 박스 중심의 t 파라미터 (SVG 벡터 위, 0=시작, 1=끝):
+   t_center = ((W/2 - x1)·dx + (H/2 - y1)·dy) / L_svg²
+
+6. CSS 0% / 100%가 SVG t-space의 어디에 매핑되는지:
+   half = (L_css / 2) / L_svg
+   t0 = t_center - half        ← CSS 0%
+   t1 = t_center + half        ← CSS 100%
+
+7. SVG 각 stop offset (0~1)을 CSS percent로:
+   pct = (offset - t0) / (t1 - t0) × 100
+```
+
+### 예시
+
+SVG:
+```xml
+<linearGradient x1="110.833" y1="18.2292" x2="219.479" y2="175"
+                gradientUnits="userSpaceOnUse">
+  <stop offset="0" stop-color="#FDC69E"/>
+  <stop offset="1" stop-color="#E0782C"/>
+</linearGradient>
+```
+
+박스 W=H=350일 때:
+
+```
+dx = 108.65, dy = 156.77
+L_svg = √(108.65² + 156.77²) = 190.74
+svg_angle = atan2(156.77, 108.65) = 0.9646 rad = 55.27°
+css_angle = 55.27 + 90 = 145.27°
+α = 2.535 rad
+L_css = 350 × |sin 145.27°| + 350 × |cos 145.27°|
+      = 350 × 0.5696 + 350 × 0.8220
+      = 487.06
+t_center = ((175 - 110.833)·108.65 + (175 - 18.229)·156.77) / 190.74²
+         = (6971.7 + 24577.3) / 36382
+         = 0.8672
+half = (487.06 / 2) / 190.74 = 1.2767
+t0 = 0.8672 - 1.2767 = -0.4095
+t1 = 0.8672 + 1.2767 = 2.1439
+SVG offset 0 → pct = (0 - (-0.4095)) / 2.5534 × 100 = 16.04%
+SVG offset 1 → pct = (1 - (-0.4095)) / 2.5534 × 100 = 55.20%
+```
+
+CSS:
+```css
+background: linear-gradient(145.27deg, #FDC69E 16.04%, #E0782C 55.20%);
+```
+
+### 코드: `scripts/gradient_math.py`
+
+```python
+from scripts.gradient_math import svg_to_css
+
+svg_to_css(W=350, H=350,
+           x1=110.833, y1=18.2292, x2=219.479, y2=175,
+           stops=[(0, '#FDC69E'), (1, '#E0782C')])
+# → "linear-gradient(145.27deg, #FDC69E 16.04%, #E0782C 55.20%)"
+```
+
+---
+
+## §3. 회전 감지 (bbox 비율 검사)
+
+Figma MCP는 `rotation` 속성을 출력하지 않으므로 bbox 비율로 추론:
+
+```
+단일 문자 텍스트:
+  width > height × 1.5  →  90° 회전 (가로로 누움)
+
+일반 텍스트:
+  width < fontSize × 0.8  →  좁은 박스 세로 배치 (writing-mode 아님, <br>로 줄바꿈)
+```
+
+CSS 적용:
+```css
+.rotated {
+  transform: rotate(90deg);  /* 또는 -90deg */
+}
+```
+
+---
+
+## §4. Descender 보정 (padding-bottom)
+
+CSS `line-height: 1`이거나 `< font_content_area_ratio`이면 글리프 하강부(g, y, p, 쉼표)가 잘림.
+
+### 폰트별 메트릭
+
+| 폰트 | UPM | typoAscender | typoDescender | content_area_ratio |
+|------|-----|------|------|------|
+| Noto Sans KR | 1000 | 1160 | 288 | 1.448 |
+| Pretendard | 1000 | 1100 | 300 | 1.400 |
+
+### 공식
+
+```
+content_area_ratio = (typoAscender + |typoDescender|) / UPM
+half_leading = (line_height_ratio - content_area_ratio) / 2
+                ↑ 음수면 잘림 발생
+clipped_px = |half_leading| × font_size
+padding-bottom = ceil(clipped_px)
+```
+
+### 예시 (Noto Sans KR, font 27.1px, lh 1)
+
+```
+half_leading = (1.0 - 1.448) / 2 = -0.224
+clipped = 0.224 × 27.1 = 6.07 px
+→ padding-bottom: 7px
+```
+
+### 예시 (Noto Sans KR, font 30px, lh 35px → ratio 1.167)
+
+```
+half_leading = (1.167 - 1.448) / 2 = -0.1405
+clipped = 0.1405 × 30 = 4.215 px
+→ padding-bottom: 5px
+```
+
+---
+
+## §5. SVG viewBox padding → CSS box-sizing 매핑
+
+SVG가 drop-shadow blur 여백을 위해 viewBox를 확장해놓은 경우 (예: 280×280 fill을 310 viewBox에 넣음):
+
+### 케이스 A — Stroke가 fill 외부 (안전과 품질 ring 같은 케이스)
+
+```
+SVG: viewBox 310, fill r=140 (d=280), stroke r=142.5 width=5 (extends r=140 to 145)
+visible: 290×290 (fill 280 + 5px stroke 외부 확장)
+viewBox padding: 310 - 290 = 20 (각 변 10이 drop-shadow blur 패딩, 추가 5는 stroke)
+
+CSS:
+  div W=H=290
+  border: 5px solid white
+  box-sizing: border-box
+  → border-box 290, padding-box 280 ← fill 영역
+  position: Figma fill 위치 - (5, 5) ← stroke 외부 확장 보정
+```
+
+### 케이스 B — Stroke가 fill 내부 (생산성/소통 ring 같은 케이스)
+
+```
+SVG: viewBox 300, fill r=140, stroke r=137.5 width=5 (extends r=135 to 140 — fill 외곽 5px overlap)
+visible: 280×280 (stroke가 fill 외곽 5px를 덮음)
+viewBox padding: 300 - 280 = 20 (전부 drop-shadow blur)
+
+CSS:
+  div W=H=280
+  border: 5px solid white
+  box-sizing: border-box
+  background-origin: border-box   ← gradient를 border-box 280에 매핑
+  background-clip: border-box
+  → border 5가 외곽 fill을 덮어 그라데이션 가시 영역은 270
+  position: Figma 위치 그대로 (offset 없음)
+```
+
+### 그라데이션 좌표 remap
+
+SVG `<linearGradient>` 좌표는 viewBox 공간 기준. CSS box로 매핑할 때:
+
+```
+viewBox padding이 P (예: 15 또는 10)이라면:
+  CSS_x = SVG_x - P
+  CSS_y = SVG_y - P
+```
+
+이렇게 보정한 좌표를 §2의 svg_to_css 공식에 W=H=fill_size로 넣는다.
+
+---
+
+## §6. Drop shadow: SVG `feGaussianBlur` ↔ CSS `box-shadow`
+
+SVG:
+```xml
+<filter>
+  <feGaussianBlur stdDeviation="5"/>
+  <feColorMatrix .../>
+</filter>
+```
+
+CSS 근사:
+```css
+box-shadow: 0 0 {2 × stdDeviation}px {color};
+```
+
+`stdDeviation=5` → CSS `box-shadow: 0 0 10px black`
+
+**주의:** 정확한 픽셀 일치는 아님. 시각적으로 매우 유사하지만 SVG 가우시안과 CSS 블러 알고리즘이 다름. ±2px 차이는 허용.
+
+---
+
+## §7. Blend mode 호환
+
+### Figma가 사용하는 blend mode → CSS 호환 매핑
+
+| Figma | CSS 정확 | CSS 호환 (Chrome/Firefox) | 비고 |
+|-------|---------|----------------------|------|
+| Normal | normal | normal | 기본 |
+| Multiply | multiply | multiply | OK |
+| **Plus darker** | plus-darker | **multiply** | plus-darker는 Safari 전용 |
+| Darken | darken | darken | OK |
+| Screen | screen | screen | OK |
+| Overlay | overlay | overlay | OK |
+
+### Plus-darker vs Multiply 차이
+
+```
+plus-darker(src, dst) = max(0, src + dst - 1)
+multiply(src, dst)    = src × dst
+```
+
+- 흰 배경: 둘 다 동일 (효과 없음)
+- 어두운 배경: multiply가 plus-darker보다 강하게 어두워짐
+- 밝은 그라데이션 + 흰 배경 조합: 시각적 차이 거의 없음 (이 프로젝트 디자인 대부분 해당)
+
+→ **Chrome/Firefox 호환 위해 multiply로 통일.** RULES.md R10 참조.
+
+---
+
+## §8. CSS `border-radius` 비율 변환
+
+Figma `cornerRadius`는 px 단위. CSS도 px 단위 그대로 사용 + scale 적용.
+
+특수 케이스:
+- 완전 원: `border-radius: 50%`
+- 캡슐: `border-radius: {height/2}px`
+- 한쪽만 둥근 사각: `border-radius: {tl} {tr} {br} {bl}` (개별 4값)
+
+스케일링 시: scale transform이 자동으로 px 값을 비율 유지하며 축소함. 별도 계산 불필요.
+
+---
+
+## §9. 글자 수 추정 (블록 안에 들어갈 텍스트 양)
+
+블록 너비/높이에서 들어갈 수 있는 한글 글자 수를 미리 계산:
+
+```
+한 줄 글자 수 = 블록 너비(px) / (font_size × 한글_글자_너비_계수)
+줄 수         = 블록 높이(px) / (font_size × line_height_ratio)
+총 글자 수    = 한 줄 × 줄 수 × 안전계수(0.85)
+```
+
+### Pretendard / Noto Sans KR 한글 글자 너비 계수 = 0.97
+
+| font-size | 한글 글자 너비 | line_height 1.6 줄 높이 |
+|-----------|-------------|---------------------|
+| 12px | 11.6px | 19.2px |
+| 16px | 15.5px | 25.6px |
+| 20px | 19.4px | 32.0px |
+| 24px | 23.3px | 38.4px |
+| 30px | 29.1px | 48.0px |
+
+이는 design_agent 텍스트 편집 단계에서 사용. 변환 단계에서는 직접 사용하지 않음.
+
+---
+
+## 검증 체크리스트
+
+변환 후 매번 확인:
+
+- [ ] §1 스케일 — `transform: scale(S)` 한 번만 사용했는가, 매 값 수동 곱셈은 없는가
+- [ ] §2 그라데이션 — gradient_math.py로 도출한 값을 그대로 사용했는가, 눈대중 각도/stop은 없는가
+- [ ] §3 회전 — bbox 비율로 회전 감지했는가
+- [ ] §4 descender — `line_height < content_area_ratio`인 텍스트에 padding-bottom 추가했는가
+- [ ] §5 viewBox — stroke 정렬 확인 (외부/내부)에 따라 box-sizing 적용했는가
+- [ ] §6 shadow — `box-shadow blur = 2 × stdDeviation`인가
+- [ ] §7 blend — `plus-darker`를 `multiply`로 교체했는가

PROCESS-CONTROL.md

@@ -0,0 +1,66 @@
+# Figma → HTML 프로세스 제어
+
+## 변경 전 반드시 확인
+
+### 1. 소스는 Figma 데이터다
+- gradient 방향: Figma 데이터의 각도에서 CSS 변환 (CSS = 90 - Figma)
+- border-radius: Figma 데이터 그대로 (스케일만)
+- PNG를 보고 방향을 판단하지 않는다
+- PNG는 픽셀 데이터 분석으로만 교차 검증에 사용
+
+### 2. 이미지 해석 금지
+- 멀티모달 이미지 해석으로 gradient 방향 판단 불가 (미묘한 alpha에서 틀림)
+- 방향 확인이 필요하면 픽셀 데이터를 숫자로 분석
+- "보니까 ~인 것 같다" 금지. 데이터로 확인
+
+### 3. 작동하는 것은 건드리지 않는다
+- 사용자가 A만 문제라고 하면 A만 수정
+- B, C가 "같은 이유로 틀릴 것 같다"고 추측해서 함께 바꾸지 않는다
+- 변경 전: 현재 값이 뭔지 기록
+- 변경 후: 변경한 값이 뭔지 기록
+- 되돌려야 할 때 정확히 어디로 돌아가는지 알아야 한다
+
+### 4. 한 번에 하나만 바꾼다
+- gradient 각도와 border-radius를 동시에 바꾸지 않는다
+- 하나 바꾸고 확인, 맞으면 다음 하나
+
+### 5. 사용자가 말한 것만 한다
+- 사용자의 피드백을 자의적으로 해석하지 않는다
+- "주황색 gradient가 안 맞다" → 주황색 gradient만 수정
+- 초록, 다른 요소는 건드리지 않는다
+
+### 6. 찍어맞추기 금지
+- 0deg 안 되면 180deg, 그것도 안 되면 90deg... 이런 식 금지
+- 값을 바꾸기 전에 WHY를 먼저 설명할 수 있어야 한다
+- 설명 못하면 바꾸지 않는다
+
+### 7. "쉬운 전면 재작성" 절대 금지
+- 80점 결과물에서 2가지 문제를 고칠 때, 구조를 flex/grid 등으로 **전면 재작성하지 않는다**
+- 기존에 맞춘 수십 가지(pill 크기, 위치, 비율, border 걸침)가 전부 깨진다
+- **기존 구조 유지 + 문제만 정확히 수정**이 원칙
+- 보완이 안 되면 그 방식을 오답노트로 두고 **다른 방식으로 접근**
+- 점점 나빠지면 **즉시 멈추고 마지막 OK 상태로 복원**
+- 구조 변경이 불가피하면 **사전에 영향 범위 분석 + 사용자 확인 후** 진행
+
+## Figma 도형 gradient 처리 프로세스
+
+```
+1. Figma gradient 각도 확인
+2. gradient를 0으로 돌린 기본 상태 파악
+   - border-radius: Figma 값 그대로
+   - gradient: CSS 90deg (Figma 0 = 왼→오 = CSS 90deg)
+3. CSS로 기본 상태 구현
+4. Figma gradient 각도 적용: CSS = 90 - Figma각도
+5. 위치(left, top)와 크기(width, height) 배치
+```
+
+## Figma gradient 각도 체계
+
+```
+Figma  0° = 왼쪽 진 → 오른쪽 옅 = CSS  90°
+Figma -90° = 위 진 → 아래 옅     = CSS 180°
+Figma -180° = 오른쪽 진 → 왼쪽 옅 = CSS 270°
+Figma  90° = 아래 진 → 위 옅     = CSS   0°
+```
+
+변환: **CSS = 90 - Figma**

PROCESS.md

@@ -0,0 +1,410 @@
+# 변환 절차 (10 STEP)
+
+Figma 프레임 1개를 HTML+template으로 변환할 때 매번 동일하게 따르는 운영 핸드북.
+
+> **원칙: 같은 세션에서 여러 프레임 연속 작업 OK.** 컨텍스트가 무거워지면 `/compact` 로 정리하고 계속 진행. 핵심 결정/규칙/산출물은 모두 파일에 박혀있어 compact 후에도 보존됨. 이렇게 해야 누적 학습(R13 등 sub-pattern)이 즉시 적용됨. CLAUDE.md 원칙 7 참조.
+
+> **원칙: 1 프레임 변환 = 1:1 reference + 템플릿 동시 작성.** 1번째 등장이라도 templates_staging/{pattern}.html.j2 + meta.yaml + example.yaml 까지 작성한다. 정적 HTML만 두는 것은 work-creating-work. 사용자가 final 검수 후 design_agent/templates/ 로 직접 프로모션.
+
+---
+
+## STEP 0 — 준비
+
+### 0-A. 에이전트: blocks_index.md 한 번 읽기 (필수)
+
+새 세션은 메모리가 없다. 패턴 발견 트리거(2번째 등장)가 작동하려면 **세션 시작 직후** [blocks_index.md](blocks_index.md)를 한 번 통으로 읽어야 한다.
+
+```
+Read figma_to_html_agent/blocks_index.md
+```
+
+확인할 것:
+- "변환 완료 (현행 방법론)" 섹션의 패턴 목록
+- "패턴 카탈로그" 섹션의 등록 패턴 (등장 횟수)
+- "templates_staging 대기열" 의 진행 중 패턴
+
+### 0-B. 사용자: 프레임 선택
+
+1. Figma desktop에서 변환할 프레임을 **선택** (클릭) 한다
+2. 에이전트에게 "이 프레임 변환해줘"라고 알린다 (프레임 ID/이름 명시 권장)
+
+### 0-C. 에이전트: 패턴 비교
+
+STEP 1~3로 metadata + screenshot 받은 직후, 0-A에서 본 인덱스와 비교:
+
+- 비슷한 구조 발견 → "이거 X 패턴과 비슷합니다. 두 번째 등장이면 templates_staging/ 로 Jinja2 추출 진행할까요?" 사용자에게 확인
+- 비슷한 게 없음 → 일반 STEP 4 이하 진행
+
+**확인사항:**
+- Figma desktop 앱이 활성 탭에 올바른 파일이 떠 있는가
+- `.mcp.json`에 figma-desktop SSE 서버가 등록돼있는가 (`http://127.0.0.1:3845/sse`)
+
+---
+
+## STEP 1~3 — 데이터 수집 (병렬)
+
+세 도구를 **단일 메시지에 multiple tool_use 블록**으로 동시 호출한다 (도구 호출 단위 병렬). 순차 호출하면 같은 노드 ID를 두 번 추출하느라 토큰만 낭비됨.
+
+```
+[single message, multiple tool_use blocks]
+1. mcp__figma-desktop__get_metadata        nodeId="" (현재 선택 노드)
+2. mcp__figma-desktop__get_design_context  nodeId="" (현재 선택 노드)
+3. mcp__figma-desktop__get_screenshot      nodeId="" (현재 선택 노드)
+```
+
+**주의:** nodeId를 비우면 현재 선택 노드를 사용하므로 metadata 응답을 기다릴 필요 없음. 셋 다 동시에 갈 수 있다.
+
+| 도구 | 얻는 것 | 사용처 |
+|------|--------|-------|
+| get_metadata | 모든 leaf 노드의 `id, type, name, x, y, width, height` (XML) | bottom-up 플래튼 |
+| get_design_context | gradient/filter/font/color (React+Tailwind 코드) | CSS 변환 |
+| get_screenshot | Figma가 렌더한 PNG | STEP 8 사람 눈 검증 |
+
+**주의:**
+- get_metadata 응답이 100KB+ 면 frame이 너무 커서 자르지 않은 상태. 사용자에게 더 작은 단위 선택 요청
+- get_design_context는 응답이 매우 크므로 한 프레임당 1회만 호출
+
+---
+
+## STEP 4 — 자산 정리 (block-tests/assets/shared/ 캐시)
+
+design_context에서 `localhost:3845/assets/{hash}.png|svg` 패턴의 자산 URL 추출.
+
+각 자산에 대해:
+1. URL 끝의 hash를 파일명으로 사용
+2. `block-tests/assets/shared/{hash}.{ext}` 가 **이미 있으면 다운로드 스킵**
+3. 없으면 curl로 다운로드
+
+```bash
+cd block-tests/assets/shared
+for url in $URLS; do
+  hash=$(basename "$url")
+  [ -f "$hash" ] || curl -sSo "$hash" "$url"
+done
+```
+
+HTML에서 참조 시:
+```html
+<img src="assets/shared/{hash}.png">
+```
+
+(`block-tests/{slug}.html` 기준으로 상대 경로 `assets/shared/`)
+
+**효과:**
+- 동일 자산이 여러 프레임에서 등장해도 한 번만 다운로드 (해시 파일명이라 자동 dedup)
+- 후속 프레임 변환 시간 단축
+- 토큰 절약 (이미 있는지 확인만)
+
+**프레임 매핑 메모:** `block-tests/{slug}_assets.txt`에 사용한 hash 목록 + 의미 라벨 기록 → 추후 재추출 시 빠른 매핑
+
+```
+# bim-goals-3circles_assets.txt
+84965807....png   bg_texture
+f05ebf15....png   arc_top
+2f0f1750....png   arc_side
+```
+
+**legacy:** 이전에 다운로드한 자산이 `block-tests/assets/frame_{id}/` 에 있다면 그대로 두되, 새 변환부터는 `shared/` 만 사용한다.
+
+---
+
+## STEP 5 — flat.md 작성 (분석 + 이상 탐지)
+
+`block-tests/{slug}_flat.md` 파일 생성. 다음 섹션을 반드시 포함:
+
+### 섹션 1. 메타
+```markdown
+# Frame {ID} — {이름}
+
+> 원본: {W} × {H} px (node {ID})
+> Scale: × {S} → {1280} × {H×S} px
+> 슬라이드 16:9 안 배치
+```
+
+### 섹션 2. 계층 경로 (bottom-up)
+
+모든 leaf 노드를 들여쓰기 트리로 표현. 그룹별 누적 offset 표시.
+
+```
+Frame {root} ({W}×{H})
+├─ Group "X" (offset → 누적)
+│   ├─ TEXT "..." (abs_x, abs_y) {w}×{h}
+│   └─ ...
+```
+
+### 섹션 3. 이상 탐지 결과
+
+| 검사 | 결과 |
+|------|------|
+| 회전 단일문자 (bbox 가로 > 세로 × 1.5) | 발견 노드 ID 또는 "없음" |
+| 좁은 박스 세로 텍스트 (width < fontSize × 0.8) | ... |
+| 중복 노드 (동일 좌표 + 동일 내용) | ... |
+| Vector 좌표 metadata vs design_context 불일치 | ... (있으면 어느 쪽 신뢰) |
+
+### 섹션 4. 변형 가능 축 메모 + 슬롯 옵션
+
+이 블록을 템플릿화한다면 무엇이 파라미터가 될지 1~5줄로. **각 슬롯이 required인지 optional인지 표시**:
+
+```markdown
+## 변형 가능 축
+- columns[N=2~4] (required)
+  - badge (required)
+  - bullet_items[1~12] (required)
+  - bg_image (required)
+  - bottom_photo (optional)  ← 사진 없는 mdx도 이 블록 매칭 가능
+- color_palette[N] (required, N과 일치)
+```
+
+이 메모가 STEP 10의 `blocks_index.md` 요약 + 향후 templates_staging meta.yaml 의 초안.
+
+### 섹션 5. Sub-pattern 식별 (재사용 가능한 atomic 단위)
+
+이 블록 안에 **다른 블록과 공유 가능한 sub-pattern**이 있는가? RULES.md R13~ 참조.
+
+```markdown
+## Sub-patterns
+- `bullet-list-with-marker` (R13) — 각 텍스트 앞에 장식 마커
+  - 위치: 각 컬럼 본문 영역
+  - 마커: checkbox PNG
+  - 적용 구조: .bullet-list / .bullet-row / .bullet-icon / .bullet-text
+```
+
+Sub-pattern을 **즉시 RULES.md에 등록할 필요는 없다**. 동일 sub-pattern이 2번째 등장하면 그때 R번호 부여해서 정식 등록.
+
+---
+
+## STEP 6 — 그라데이션 수학 변환
+
+각 SVG `<linearGradient>` 데이터를 [scripts/gradient_math.py](scripts/gradient_math.py)로 CSS로 변환.
+
+```bash
+python scripts/gradient_math.py \
+  --w 350 --h 350 \
+  --x1 110.833 --y1 18.2292 --x2 219.479 --y2 175 \
+  --stops "0:#FDC69E,1:#E0782C"
+```
+
+출력:
+```
+linear-gradient(145.28deg, #FDC69E 16.04%, #E0782C 55.20%)
+```
+
+수학 원리는 [MATH.md §2 참조](MATH.md).
+
+**여러 그라데이션을 한 번에 변환할 땐 Python 인라인 스크립트 사용:**
+
+```python
+import sys, os
+# scripts/ 디렉토리를 sys.path에 명시 추가 (작업 디렉토리 무관)
+sys.path.insert(0, os.path.join('figma_to_html_agent', 'scripts'))
+from gradient_math import svg_to_css
+
+svg_to_css(W=350, H=350, x1=110.833, y1=18.2292, x2=219.479, y2=175,
+           stops=[(0, '#FDC69E'), (1, '#E0782C')])
+```
+
+**작업 디렉토리가 `figma_to_html_agent/` 인 경우:**
+```python
+import sys; sys.path.insert(0, 'scripts')
+from gradient_math import svg_to_css
+```
+
+**또는 정식 패키지로 사용** (`scripts/__init__.py` 가 있으므로):
+```python
+# 작업 디렉토리가 figma_to_html_agent/ 일 때
+from scripts.gradient_math import svg_to_css
+```
+
+⚠️ **금지: 함수 코드를 인라인 Python에 복사 붙여넣기**. 한 번 만든 `gradient_math.py`를 항상 import해서 쓴다. 복사하면 버그 수정 시 여러 곳을 동시에 고쳐야 하고 수식이 미세하게 어긋날 위험.
+
+---
+
+## STEP 7 — HTML 작성
+
+### 7-A. 기본 구조
+
+```html
+<div class="slide">             <!-- 1280×720 흰색 -->
+  <div class="block">           <!-- 1280 × (H×S) -->
+    <div class="inner">         <!-- 원본 W×H, transform: scale(S) -->
+      ... 모든 요소 (Figma 원본 좌표 사용) ...
+    </div>
+  </div>
+</div>
+```
+
+```css
+.inner {
+  position: absolute;
+  left: 0; top: 0;
+  width: {W}px; height: {H}px;
+  transform: scale({S});
+  transform-origin: top left;
+}
+```
+
+**왜 transform: scale을 쓰는가:** 모든 위치/크기/폰트/그림자/스트로크가 한 번의 transform으로 균일하게 축소됨. 매 값을 수동으로 ×S 곱하는 것보다 안전하고 검증 가능. ([MATH.md §1](MATH.md))
+
+### 7-B. 요소 변환 우선순위
+
+| 요소 종류 | 구현 방법 | 이유 |
+|---------|---------|-----|
+| 원/사각형 + gradient + blend | **HTML div** + `border-radius` + `linear-gradient` + `mix-blend-mode: multiply` | 동적 재구성 위해 |
+| Stroke (경계선) | `border: Npx solid color` + `box-sizing: border-box` | gradient와 함께 사용 가능 |
+| Drop shadow blur | `box-shadow: 0 0 {2×stdDev}px {color}` | SVG feGaussianBlur 근사 |
+| 곡선 (아크, 비원형) | **SVG `<path>`** 또는 미리 export된 PNG | CSS 불가능 |
+| 텍스트 | HTML `<div>` 절대 배치 | 선택 가능, 접근성 |
+| 실사 이미지 | `<img>` PNG | 재현 불가 |
+| 회전된 도형 | 래퍼 div + `transform: rotate()` ([INSIGHT-GRADIENT.md](INSIGHT-GRADIENT.md)) | gradient 동시 회전 |
+
+### 7-C. 보정 규칙
+
+[RULES.md](RULES.md) R1~R16 모두 적용:
+- R1: descender padding-bottom
+- R2~R3: 회전/세로 텍스트
+- R4: 그라데이션 텍스트
+- R5: 다중 fills
+- R6: 중복 노드
+- R7: 흰 배경
+- R8: 스케일 팩터
+- R9: 순수 CSS 우선
+- R10: blend mode 호환
+- R11: stroke 정렬 (inside/outside)
+- R12: viewBox padding
+
+---
+
+## STEP 8 — Selenium 렌더링 + 사람 눈 검증
+
+```python
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from PIL import Image
+import os, time
+
+# _renders/ 폴더 없으면 생성
+os.makedirs('block-tests/_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.abspath('block-tests/{slug}.html').replace('\\','/')
+d.get('file:///' + p)
+time.sleep(1.5)
+d.save_screenshot('block-tests/_renders/{slug}_full.png')
+
+r = d.execute_script(
+  'const r=document.querySelector(".slide").getBoundingClientRect();'
+  'return [r.x,r.y,r.width,r.height];'
+)
+Image.open('block-tests/_renders/{slug}_full.png').crop(
+  (int(r[0]), int(r[1]), int(r[0]+r[2]), int(r[1]+r[3]))
+).save('block-tests/_renders/{slug}.png')
+d.quit()
+```
+
+**검증 방식:**
+- 자동 픽셀 diff는 하지 않음 (font 렌더 차이로 노이즈만 많음)
+- Figma `get_screenshot` 응답과 Selenium 결과를 **사람 눈**으로 비교
+- 차이 발견 시 STEP 5~7로 돌아가서 원인 파악 (값 수정 금지)
+
+---
+
+## STEP 9 — 결과물 저장
+
+```
+block-tests/
+├── {slug}.html              ← 변환물
+├── {slug}_flat.md           ← 플래튼/이상/변형 축 메모
+└── _renders/
+    └── {slug}.png           ← 검증 스크린샷
+```
+
+`{slug}` 명명 규칙: 의미 기반 kebab-case (예: `bim-goals-3circles`, `cards-3col-icon`).
+프레임 ID는 metadata로 추적 가능하므로 파일명에 넣지 않음.
+
+---
+
+## STEP 10 — blocks_index.md 1줄 업데이트
+
+`blocks_index.md` 끝에 한 줄 추가:
+
+```markdown
+| {slug} | {프레임 ID} | {1줄 변형 축 요약} | {날짜} |
+```
+
+이 인덱스가 패턴 발견의 단서가 된다. 다음 변환 시작 전에 이 인덱스를 한 번 훑어서 "이미 비슷한 거 했나?" 확인.
+
+---
+
+## 패턴 → 템플릿화 (1번째부터 즉시)
+
+**규칙: 1번째 등장부터 templates_staging 작성. 정적 HTML만 두는 것 금지.**
+
+| 등장 횟수 | 처리 |
+|---------|------|
+| **1번째** | `block-tests/{slug}.html` (1:1 reference) + `templates_staging/{pattern_id}.html.j2` (Jinja2 + meta.yaml + example.yaml) **함께 작성** |
+| 2번째 | 기존 staging 템플릿이 새 데이터로 잘 렌더되는지 확인. 안 되면 템플릿 수정. example 추가. |
+| 3번째 이후 | 동일 |
+
+**왜 1번째부터 템플릿화하나?**
+- 변환의 목적은 **블록 라이브러리 구축**, 단순 HTML 복제가 아님
+- 1:1 단계에서 발견한 인사이트(R13 등)를 즉시 템플릿에 반영해야 잊지 않음
+- 사용자가 검수할 때 "이게 블록으로 어떻게 작동할지" 즉시 확인 가능
+- 2번째 등장을 기다리면 사용자 수동 복제 작업이 누적됨 (work-creating-work)
+
+**Stage 2 산출물:**
+```
+templates_staging/
+├── {pattern_id}.html.j2     ← Jinja2 템플릿 본체
+└── {pattern_id}.meta.yaml   ← when / slots / min_size_px / 변형 축 초안
+```
+
+여기까지가 **에이전트 책임의 끝.**
+
+---
+
+## 🚧 프로모션 게이트 (사용자 전용)
+
+> 이 게이트 이후 작업은 **에이전트가 절대 수행하지 않는다.** 모든 design_agent/templates/ 변경은 사용자 본인이 직접 한다.
+
+### 사용자가 수행할 작업
+
+1. **검수**: `templates_staging/{pattern_id}.html.j2` 를 다양한 파라미터로 렌더 테스트
+2. **품질 게이트 통과 확인**:
+   - [ ] 1:1 변환물과 시각적으로 동일한가
+   - [ ] 슬롯 파라미터를 바꿔도 깨지지 않는가 (원 4개, 라벨 0개 등 극단 케이스)
+   - [ ] meta.yaml의 when/slots가 design_agent의 다른 블록과 충돌 없는가
+3. **이동**: `templates_staging/{pattern_id}.html.j2` → `design_agent/templates/blocks/{category}/`
+4. **등록**: `design_agent/templates/catalog.yaml` 에 when/slots/min_size_px 추가
+5. **상태 업데이트**: `blocks_index.md` 의 해당 행 상태 → `promoted`
+
+### 에이전트의 역할
+
+- staging 작성까지만
+- 사용자 요청 없이 `design_agent/templates/` 를 절대 읽거나 쓰지 않음
+- "templates/ 에 옮겨드릴까요?" 같은 제안 금지 (월권)
+- 사용자가 명시적으로 "이 staging 결과 검토해줘"라고 요청하면 → staging 폴더 내에서만 검토
+
+---
+
+## 안티 패턴 (하지 말 것)
+
+| ❌ 하지 말 것 | 이유 |
+|------------|-----|
+| 사전에 인벤토리/지문/군집 단계 | work-creating-work, 패턴은 변환하면서 발견됨 |
+| 1번째 등장은 정적 HTML로만 두기 (templates_staging 미작성) | work-creating-work, 인사이트 잊혀짐. 1번째부터 템플릿 작성 |
+| 컨텍스트 차면 강제 새 세션 | compact 사용. 핵심 결정은 모두 파일에 박혀있어 손실 없음 |
+| Figma 데이터 안 보고 멀티모달 이미지로 추측 | 미묘한 alpha/blend에서 틀림 |
+| "여기 1px 어색하니 다른 곳도 같이 바꾸자" | 사용자 피드백만 정확히 반영 |
+| 같은 자산을 매번 새로 다운로드 | `block-tests/assets/shared/` 캐시 활용 |
+| 그라데이션 각도/색을 눈대중으로 | gradient_math.py로 수학 도출 |
+| gradient_math.py 함수 코드 인라인 복사 | import만 한다. 복사하면 수식 어긋남 |
+| 세션 시작에 blocks_index.md 안 읽음 | 패턴 발견 트리거 영영 작동 안 함 |
+| `design_agent/templates/` 직접 수정 | 프로모션은 사용자 전용. 에이전트는 staging까지만 |
+| "templates/ 옮겨드릴까요?" 제안 | 월권. 사용자가 알아서 함 |
+| `prerequisites-3col.html` 을 신규 변환 레퍼런스로 사용 | 구 방법론 (R8/R9 미적용). legacy 표시됨 |

README.md

@@ -0,0 +1,165 @@
+# Figma → HTML Agent
+
+Figma 디자인 프레임을 **수학적으로 정확하게** HTML/CSS로 변환하고, design_agent의 **블록 라이브러리**로 축적하는 독립 에이전트.
+
+---
+
+## 이 에이전트는 뭘 하는가?
+
+1. Figma 파일에서 프레임을 선택하면
+2. MCP(Figma Dev Mode)로 구조/스타일/스크린샷을 가져와서
+3. 수학적 계산(scale, gradient 변환, shadow 등)으로 1:1 HTML/CSS를 만들고
+4. AI가 재디자인할 수 있는 블록(순수 CSS + Jinja2 슬롯)으로 변환하여
+5. design_agent의 블록 라이브러리(`templates/blocks/`)에 편입한다
+
+**핵심:** AI redesigner가 색상/크기/구조를 조정할 수 있도록, 장식 요소는 **CSS로 구현**하고 이미지는 crop/곡선/일러스트/사진만 남긴다.
+
+---
+
+## 폴더 구조
+
+```
+figma_to_html_agent/
+├── README.md                 ← 이 파일 (사용법)
+├── CLAUDE.md                 ← 에이전트 명세 (11개 원칙)
+├── PROCESS.md                ← 10단계 변환 절차 핸드북
+├── MATH.md                   ← 수학 공식 (§1~9)
+├── RULES.md                  ← CSS 보정 규칙 (R1~R16)
+├── PROCESS-CONTROL.md        ← 작업 규율 (찍어맞추기 금지 등)
+├── blocks_index.md           ← 변환 완료 도서관 + 디자인 인사이트
+│
+├── scripts/
+│   └── gradient_math.py      ← SVG → CSS gradient 수학 변환 도구
+│
+├── block-tests/              ← 1:1 HTML 변환물 (원본 검증용)
+│   ├── {slug}.html           ← Figma 원본과 100% 동일한 정적 HTML
+│   ├── {slug}_flat.md        ← 플래튼/이상탐지/변형축 메모
+│   └── assets/               ← 이미지 에셋
+│       ├── shared/           ← 해시 기반 공유 캐시
+│       └── frame_{id}/       ← 프레임 전용 (legacy)
+│
+└── templates_staging/        ← Jinja2 템플릿 초안 (legacy, 현재 미사용)
+```
+
+### 산출물 최종 위치 (design_agent 본체)
+
+```
+design_agent/
+└── templates/
+    └── blocks/
+        ├── new/              ← Figma 추출 블록 (8개)
+        ├── svg/              ← 블록 공용 이미지 (33개)
+        ├── slide-base.html   ← 고정 슬라이드 배경 (16:9)
+        └── cards/, emphasis/, headers/, media/, visuals/, BEPs/, redesign/
+```
+
+---
+
+## 사용법
+
+### 사전 준비
+
+1. **Figma Desktop** 앱에서 대상 파일을 열고 **Dev Mode** 활성화
+2. `.mcp.json`에 Figma Desktop SSE 서버 등록 확인:
+   ```json
+   { "url": "http://127.0.0.1:3845/sse" }
+   ```
+3. Claude Code 세션 시작
+
+### 변환 실행 (10단계)
+
+```
+STEP 0  에이전트가 blocks_index.md 읽기 → 기존 패턴 확인
+STEP 1  get_metadata         — 구조 + bbox (XML)
+STEP 2  get_design_context   — gradient/filter/font (React+Tailwind)
+STEP 3  get_screenshot       — Figma 원본 PNG (검증용)
+STEP 4  자산 다운로드         — block-tests/assets/shared/ 캐시
+STEP 5  flat.md 작성          — bottom-up 플래튼 + 이상탐지 + 변형축
+STEP 6  gradient 수학 변환    — scripts/gradient_math.py
+STEP 7  HTML 작성             — 순수 CSS 우선, transform: scale() 균일 축소
+STEP 8  검증                  — Figma 스크린샷과 비교
+STEP 9  저장                  — block-tests/{slug}.html + flat.md
+STEP 10 인덱스 업데이트       — blocks_index.md 1줄 추가
+```
+
+**상세:** [PROCESS.md](PROCESS.md) 참조
+
+### 블록 프로모션 (block-tests → templates/blocks/)
+
+1:1 HTML이 검증되면:
+
+1. **CSS 전환** — SVG/PNG 장식 요소를 CSS gradient/border-radius/shadow로 변환
+   - CSS 전환 대상: gradient bar, ribbon, pill, badge, 오버레이 등
+   - 이미지 유지 대상: crop/프레임 배치(R16), 곡선 아크, 아이콘, 일러스트, 실사 사진
+2. **블록 작성** — `templates/blocks/new/{pattern}.html`
+   - flex layout, width: 100%, Jinja2 슬롯
+   - 수학적 계산 주석 (Figma px → scale → CSS 값)
+   - 이미지는 `svg/` 폴더에서 참조 (`{{ slot | default('svg/파일명') }}`)
+3. **이미지 정리** — `templates/blocks/svg/`에 의미 있는 이름으로 저장
+4. **catalog.yaml 등록** — content_structure, when, not_for 작성
+5. **blocks_index.md 상태** — `staged` → `promoted` 업데이트
+
+---
+
+## 핵심 원칙 요약
+
+| # | 원칙 | 설명 |
+|---|------|------|
+| 1 | 수학적 계산만 | Figma 좌표 → scale → CSS. 시행착오 px 조정 금지 |
+| 2 | Bottom-up | leaf 노드부터 → 2개씩 묶기 → 계층 쌓기 |
+| 3 | 순수 CSS 우선 | AI가 색상/크기 조정할 수 있게. SVG는 곡선/필터만 |
+| 4 | 이미지 해석 금지 | gradient 방향은 데이터로. "보니까 ~인 것 같다" 금지 |
+| 5 | 하드코딩 금지 | 결과물을 고치지 말고 프로세스를 고친다 |
+| 6 | 전면 재작성 금지 | 80점에서 2개 고칠 때 구조를 갈아엎지 말 것 |
+| 7 | 모든 슬롯 optional | 블록이 다양한 MDX에 매칭될 수 있게 |
+
+**상세:** [CLAUDE.md](CLAUDE.md), [PROCESS-CONTROL.md](PROCESS-CONTROL.md), [RULES.md](RULES.md)
+
+---
+
+## 도구
+
+| 도구 | 용도 |
+|------|------|
+| Figma MCP `get_metadata` | 프레임 구조 + 절대 좌표 (XML) |
+| Figma MCP `get_design_context` | gradient/filter/font (React+Tailwind 코드) |
+| Figma MCP `get_screenshot` | Figma 원본 PNG |
+| `scripts/gradient_math.py` | SVG linearGradient → CSS linear-gradient 수학 변환 |
+| Pillow | 이미지 픽셀 분석 (gradient 색상 추출, 이미지 해석 아님) |
+
+---
+
+## 수학 공식 요약
+
+| 공식 | 용도 | 상세 |
+|------|------|------|
+| `S = 1280 / W_figma` | 균일 축소 scale | MATH.md §1 |
+| `CSS_angle = 90 - Figma_angle` | gradient 각도 변환 | MATH.md §2 |
+| SVG `<linearGradient>` → CSS | gradient stop % 변환 | gradient_math.py |
+| `plus-darker → multiply` | blend mode 호환 | RULES.md R10 |
+| bbox 비율 ≠ 텍스트 비율 → 회전 | rotation 감지 | RULES.md R11 |
+
+---
+
+## 현재 상태 (2026-04-13)
+
+### 프로모션 완료 블록 (8개)
+
+| 패턴 | 원본 프레임 | 블록 위치 |
+|------|-----------|---------|
+| statement-pill-highlight | 1171281207 | blocks/new/ |
+| stacked-arrow-list | 1171281180 | blocks/new/ |
+| split-panel-numbered | 1171281202 | blocks/new/ |
+| issues-paired-rows | 1171281194 | blocks/new/ |
+| compare-vs-rows | 1171281195 | blocks/new/ |
+| quadrant-2x2-issues | 1171281193 | blocks/new/ |
+| cards-3col-persona | 1171281191 | blocks/new/ |
+| cycle-3way-intersect | 1171281211 | blocks/new/ |
+
+### 공용 이미지 (templates/blocks/svg/, 33개)
+
+화살표, 아크, 뱃지, 아이콘, 배경 텍스처, 사진 등. 블록에서 `svg/파일명`으로 참조.
+
+### 고정 슬라이드 배경
+
+`templates/blocks/slide-base.html` — 16:9 (1280×720), 상단 제목 + 구분선 + 본문 영역 + 하단 결론 pill.

RULES.md

@@ -0,0 +1,466 @@
+# CSS 보정 규칙
+
+Figma → HTML 변환 시 Figma와 CSS 렌더링 차이를 수학적으로 보정하는 규칙 모음.
+**모든 규칙은 수학적 근거가 있어야 한다. 감으로 보정하지 않는다.**
+
+---
+
+## R1. Descender 보정 (padding-bottom)
+
+**문제:** CSS `line-height: 1`이면 글리프 하강부(g, y, p, 쉼표)가 잘림.
+Figma는 line-height에 관계없이 글리프를 항상 표시하지만, CSS는 line box 밖을 자른다.
+
+**원인:** 폰트의 content area > line box일 때 half-leading이 음수가 되어 잘림 발생.
+
+**계산:**
+```
+content_area_ratio = (typoAscender + |typoDescender|) / UPM
+half_leading = (line_height - content_area_ratio) / 2   ← 음수이면 잘림
+clipped_px = |half_leading| × font_size
+padding-bottom = ceil(clipped_px)
+```
+
+**폰트별 값:**
+
+| 폰트 | UPM | Ascender | Descender | content_area_ratio |
+|------|-----|----------|-----------|-------------------|
+| Noto Sans KR | 1000 | 1160 | 288 | 1.448 |
+| Pretendard | 1000 | 1100 | 300 | 1.400 |
+
+**예시 (Noto Sans KR, font-size 27.1px, line-height 1):**
+```
+half_leading = (1 - 1.448) / 2 = -0.224
+clipped = 0.224 × 27.1 = 6.07px
+→ padding-bottom: 7px
+```
+
+**적용:** `line-height < content_area_ratio`인 모든 텍스트 요소에 padding-bottom 추가.
+
+---
+
+## R2. 회전 감지 (bbox 비율)
+
+**문제:** Figma MCP는 `rotation`/`transform` 속성을 출력하지 않음.
+
+**감지 방법:** 바운딩 박스의 가로세로 비율이 해당 글자의 정상 비율과 반대이면 회전.
+
+```
+단일 문자 "(" 정상: ~18×50 (세로가 김)
+Figma bbox:          60×19 (가로가 김)
+→ 가로:세로 = 3.2:1 → 90° 회전 확정
+```
+
+**규칙:**
+- 단일 문자 텍스트에서 `width > height × 1.5` → 90° 회전
+- 일반 텍스트에서 `width < fontSize × 0.8` → 세로 배치용 좁은 박스 (writing-mode 아님, <br> 줄바꿈)
+
+**CSS 구현:**
+```css
+.rotated-bracket { transform: rotate(90deg); }   /* 여는 괄호 */
+.rotated-bracket-close { transform: rotate(-90deg); }  /* 닫는 괄호 */
+```
+
+---
+
+## R3. 세로 텍스트 (좁은 박스)
+
+**문제:** Figma에서 좁은 박스(width < fontSize) 안에 텍스트를 넣으면 글자가 한 줄에 하나씩 배치됨.
+
+**감지:** `bbox.width < fontSize × 0.8` + 2글자 이상
+
+**CSS 구현:** `writing-mode` 사용하지 않음. HTML에서 `<br>`로 글자마다 줄바꿈.
+```html
+<span class="vlabel">기<br>술</span>
+```
+이유: `writing-mode: vertical-rl`은 Figma 원본과 다른 간격/정렬을 만듦.
+
+---
+
+## R4. 그라데이션 텍스트
+
+**Figma:** 텍스트 fills에 GRADIENT_LINEAR이 있으면 그라데이션 텍스트.
+
+**CSS:**
+```css
+.gradient-text {
+  background: linear-gradient(...);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+```
+
+**주의:** 흰 텍스트 스트로크(`-webkit-text-stroke: white`) 사용 금지.
+HTML에서 보기 불편하므로 제거한다.
+
+---
+
+## R5. 다중 fills 처리
+
+**Figma:** 하나의 노드에 여러 fill이 쌓일 수 있음 (리스트 순서 = 위에서 아래).
+
+**규칙:** 첫 번째 fill이 불투명(opacity 1)이면 나머지는 가려짐 → 첫 번째만 사용.
+
+---
+
+## R6. 중복 노드
+
+**감지:** 동일 좌표 + 동일 내용 + 동일 크기 → Figma 복사 흔적.
+
+**처리:** 1개만 렌더링, 나머지 무시. flat 목록에 [중복] 표기.
+
+---
+
+## R7. 미리보기 배경
+
+**슬라이드 배경:** 항상 `#ffffff` (흰색)
+**블록 배경:** 항상 `#ffffff` (미리보기용). 원본 배경색은 주석으로 기록.
+
+이유: 다크 배경에서 요소가 안 보이는 문제 방지. 위치/크기 확인이 우선.
+
+---
+
+## R8. 스케일 팩터
+
+**계산:** `Scale = 1280 / 원본_width`
+
+**적용 대상:**
+- 위치 (x, y)
+- 크기 (width, height)
+- 폰트 크기 (fontSize)
+- 스트로크 너비 (strokeWeight)
+- 간격 (gap, padding)
+- 그림자 (blur, offset)
+
+**적용하지 않는 것:**
+- 색상 (그대로 유지)
+- 그라데이션 방향/퍼센트 (그대로 유지)
+- 폰트 굵기 (그대로 유지)
+- line-height 비율 (그대로 유지)
+- border-radius 비율 (스케일 적용)
+
+**구현 권장:** 매 값 수동 곱셈 대신 `transform: scale(S)` 한 번으로 균일 축소. MATH.md §1 참조.
+
+---
+
+## R9. 순수 CSS 우선, SVG는 곡선/필터에만
+
+블록 라이브러리의 동적 재구성을 위해 가능한 한 **HTML div + CSS**로 구현한다.
+
+| 요소 | 구현 |
+|------|------|
+| 원/사각형 + linear-gradient | `<div>` + `border-radius` + `background: linear-gradient(...)` |
+| Stroke (경계선) | `border` + `box-sizing: border-box` |
+| Drop shadow blur | `box-shadow: 0 0 {2×stdDev}px {color}` |
+| **곡선 (아크, 비원형 path)** | **SVG `<path>` 또는 PNG** ← CSS 불가능 |
+| **복잡한 SVG filter chain** | **SVG `<filter>`** ← CSS 근사 불가 시 |
+| 텍스트 | HTML `<div>` 절대 배치 |
+
+**이유:** SVG `<img src="...svg">`는 정적 파일. 색상/개수/위치 변경 시 매번 재export 필요. CSS는 변수/Jinja로 즉시 파라미터화 가능.
+
+---
+
+## R10. Blend mode 호환 (plus-darker → multiply)
+
+**문제:** Figma의 `plus darker` blend mode는 Apple CoreGraphics 전용. CSS 스펙엔 `plus-darker`가 있지만 **Safari/WebKit만 지원**, Chrome/Firefox에서는 무시되어 효과 사라짐.
+
+**규칙:**
+1. SVG/CSS에 `mix-blend-mode: plus-darker` 발견 시 → **`multiply`로 교체**
+2. SVG 파일 내부의 `style="mix-blend-mode:plus-darker"`도 함께 교체
+3. 시각 차이 검증: 흰 배경 위 밝은 그라데이션은 거의 동일. 어두운 영역은 multiply가 더 강함
+
+```
+plus-darker(src, dst) = max(0, src + dst - 1)   [Safari only]
+multiply(src, dst)    = src × dst                [모든 브라우저]
+```
+
+자세한 비교: MATH.md §7
+
+---
+
+## R11. Stroke 정렬: viewBox padding 처리
+
+SVG는 stroke가 fill의 안/밖으로 확장될 수 있어 viewBox에 padding이 들어감. CSS 변환 시 두 케이스로 나뉨:
+
+### 케이스 A — Stroke가 fill **외부**
+
+예: `r=140 fill` + `r=142.5 stroke-width=5` → stroke가 r=140~145 (외부)
+
+```css
+.ring {
+  width: 290px; height: 290px;       /* fill 280 + 외부 stroke 5×2 */
+  border: 5px solid white;
+  box-sizing: border-box;            /* border 안쪽 padding-box = 280 = fill */
+  background: linear-gradient(...);  /* default origin: padding-box 280 */
+  border-radius: 50%;
+}
+/* 위치: Figma fill 위치에서 (-5, -5) 오프셋 */
+```
+
+### 케이스 B — Stroke가 fill **내부** (overlap)
+
+예: `r=140 fill` + `r=137.5 stroke-width=5` → stroke가 r=135~140 (fill 외곽 overlap)
+
+```css
+.ring {
+  width: 280px; height: 280px;       /* fill 280 그대로 */
+  border: 5px solid white;
+  box-sizing: border-box;            /* padding-box 270 */
+  background: linear-gradient(...);
+  background-origin: border-box;     /* gradient는 280 영역에 매핑 */
+  background-clip: border-box;
+  border-radius: 50%;
+}
+/* 위치: Figma fill 위치 그대로 */
+```
+
+판별: SVG 안의 stroke `r` 값이 fill `r`보다 **크면** 외부 (케이스 A), **작거나 같으면** 내부 (케이스 B).
+
+---
+
+## R12. viewBox padding gradient remap
+
+viewBox padding이 있는 SVG의 그라데이션 좌표는 viewBox 공간 기준이므로, CSS 박스로 매핑할 때 **각 좌표에서 padding 만큼 빼야** 한다.
+
+```python
+# SVG viewBox 310, 실제 fill 280, padding 15
+css_x1 = svg_x1 - 15
+css_y1 = svg_y1 - 15
+css_x2 = svg_x2 - 15
+css_y2 = svg_y2 - 15
+# 그 다음 svg_to_css(W=280, H=280, ...)
+```
+
+또는 `scripts/gradient_math.py`의 `svg_to_css_remap()` 사용:
+
+```python
+svg_to_css_remap(css_W=280, css_H=280, viewbox_padding=15,
+                 x1=..., y1=..., x2=..., y2=..., stops=[...])
+```
+
+---
+
+## R14. 한글 줄바꿈은 word-break: keep-all (전역 default)
+
+**문제:** Chrome 기본 동작은 한글을 글자 단위로 wrap (예: "수행공정의 쉬운이해로 관리 편의성 증" / "진"). Figma는 단어 단위 wrap이라 시각이 다름.
+
+**규칙:** 모든 변환물의 base CSS에 `word-break: keep-all` 적용.
+
+```css
+body {
+  font-family: 'Noto Sans KR', sans-serif;
+  ...
+  word-break: keep-all;   /* 한글 단어 단위 wrap (Figma matching) */
+}
+```
+
+또는 텍스트 컨테이너 단위로:
+```css
+.bullet-text, .left-text, .right-text, .body-text {
+  word-break: keep-all;
+}
+```
+
+**언제 빼나:**
+- `white-space: nowrap` 단일 라인 텍스트 (영향 없음, 안 빼도 무방)
+- 코드/숫자 등 단어 경계가 없는 콘텐츠
+
+**예외:** 영문/기호 혼합 텍스트는 `word-break: keep-all` 만으로는 부족할 수 있음. 그 경우 `overflow-wrap: anywhere` 또는 `<br>` 명시 split.
+
+---
+
+## R15. 박스 vertical center align (Figma flex justify-center 모방)
+
+**문제:** Figma React 코드에서 자주 보이는 패턴:
+```jsx
+<div className="-translate-y-1/2 absolute flex flex-col h-[71px] justify-center top-[243.5px]">
+```
+
+이는 **컨테이너 박스의 vertical center에 텍스트를 정렬**한다는 의미. 단순히 `top` 값만 받아서 박는 건 잘못 — 텍스트가 박스 top에 붙어 다른 요소(예: cat pill의 vertical center)와 어긋남.
+
+**올바른 변환:**
+
+```css
+.text-box {
+  position: absolute;
+  top: <visual_top>;          /* Figma top - height/2 */
+  height: <figma_height>;
+  width: <figma_width>;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;    /* vertical center */
+}
+```
+
+**또는 인접 박스(예: 옆에 있는 cat pill)와 동일한 top + height를 박고 flex justify-center 적용**하면 자동으로 가운데 align. 1:1 변환에서 가장 안전.
+
+**검증:** 인접 박스 center y 와 텍스트 박스 center y 가 같은지 측정. 차이 > 5px이면 잘못된 것.
+
+---
+
+## R13. Custom-Marker Bullet List 패턴 (sub-pattern)
+
+**감지 조건 (3가지 모두 충족):**
+1. 여러 텍스트 항목이 세로로 나열됨
+2. 각 항목 앞에 **장식 마커**가 있음 (체크박스 아이콘, 점, 화살표, 숫자, 원, PNG 등)
+3. 마커는 인터랙티브하지 않고 순수 시각 요소 (실제 `<input type="checkbox">` 가 아님)
+
+**Figma 원본에서는** 마커와 텍스트가 별도 요소로 평면 배치돼있을 수 있다. 그래도 **시맨틱적으로는 하나의 list item**으로 봐야 한다.
+
+### 구조 (CSS Flex Pair Pattern)
+
+```html
+<div class="bullet-list" style="--icon-gap: ...;">
+  <div class="bullet-row">
+    <span class="bullet-icon"><img src="marker.png"></span>
+    <span class="bullet-text">텍스트 항목</span>
+  </div>
+  <div class="bullet-row compact">
+    <span class="bullet-icon"><img src="marker.png"></span>
+    <span class="bullet-text">긴 텍스트가<br>두 줄로</span>
+  </div>
+</div>
+```
+
+### CSS
+
+```css
+.bullet-list {
+  display: flex;
+  flex-direction: column;
+  /* 동일 top/bottom 정렬을 위해 컨테이너에 fixed height + space-between */
+  justify-content: space-between;
+}
+.bullet-row {
+  display: flex;
+  align-items: flex-start;
+  --lh: 85px;  /* 기본 라인 높이 */
+}
+.bullet-row.compact {
+  --lh: 50px;  /* 2-line 항목용 타이트 lh */
+}
+.bullet-icon {
+  flex: none;
+  width: var(--icon-w);
+  height: var(--icon-h);
+  /* 핵심: 아이콘 vertical center를 첫 줄 vertical center에 align */
+  margin-top: calc(var(--lh) / 2 - var(--icon-h) / 2);
+  /* 컬럼별 figma gap (text_left − icon_left − icon_w) */
+  margin-right: var(--icon-gap);
+}
+.bullet-text {
+  flex: 1;
+  line-height: var(--lh);
+  white-space: normal;
+  word-break: keep-all;  /* 한글: 단어 단위 줄바꿈 */
+}
+```
+
+### 핵심 수학
+
+```
+icon margin-top  = lh / 2 − icon_h / 2     (첫 줄 vertical center)
+icon margin-right = text_left − icon_left − icon_w   (Figma 데이터)
+```
+
+### 절대 하지 말 것
+
+- 마커와 텍스트를 별도 요소로 절대 배치 (`<div class="checkbox" style="left:..; top:..">` × N)
+- row에 fixed `height` 설정 (wrap 시 overlap)
+- `white-space: nowrap` (텍스트가 컨테이너 밖으로 overflow)
+- 모든 row에 동일한 top/bottom margin 강제 (텍스트 길이가 결정해야 함)
+
+### 정렬 원칙
+
+3개 이상의 평행한 컬럼이 있을 때:
+- **모든 컬럼은 동일한 top + 동일한 height** 로 시작
+- 컬럼별 자연 콘텐츠 합 중 **가장 큰 값**을 height로 사용
+- `justify-content: space-between` 으로 내부 균등 분포
+- 결과: 컬럼별 spacing은 다르지만 vertical extent는 동일
+
+### 적용 사례
+
+| 프레임 | 사용 | 비고 |
+|--------|------|------|
+| 1171281191 (cards-3col-persona) | 3 컬럼 × 6~7 마커-text 페어 | 첫 적용 |
+| (앞으로 비슷한 패턴 발견 시 추가) | | |
+
+### 1:1 변환 단계의 임시 보정 (템플릿화 시 제거)
+
+다음은 1:1 시각 fidelity를 위한 **임시 보정**이며, 템플릿화 시 모두 제거해야 한다 (자연 wrap이 처리):
+
+- `letter-spacing: -1.5px` 등 — Chrome Noto Sans KR 너비가 Figma보다 약간 넓어 wrap이 일어나는 것을 방지하기 위한 보정
+- `<br>` 명시적 줄바꿈 — Figma의 의도된 split 위치 보존용. 템플릿화 시 자연 wrap이 알아서 처리
+- `class="compact"` 수동 지정 — 어떤 항목이 2-line인지 1:1 단계에선 수동, 템플릿화 시 텍스트 길이 자동 판정
+
+이 보정들은 HTML 코멘트로 `<!-- TEMP: 1:1 fidelity, 템플릿화 시 제거 -->` 표시한다.
+
+---
+
+## R16. 이미지 프레임 배치 — overflow:hidden으로 부분 표시
+
+**상황:** 하나의 원본 이미지에 양쪽 끝 모두 디자인 요소(곡선, 말림, 장식 등)가 있고, Figma에서 프레임(컨테이너)보다 이미지를 크게 배치하여 **한쪽만 보이게** 하는 경우.
+
+**Figma가 하는 것:**
+- 프레임: 457.96px (표시 영역)
+- 이미지: 664px (원본, 프레임보다 큼)
+- 이미지를 프레임 안에서 `left`, `width`로 위치/크기 지정
+- 프레임에 `overflow: hidden` → 프레임 밖으로 나간 부분 안 보임
+- 결과: 이미지의 **원하는 쪽만** 프레임 안에 보임
+
+**Figma가 주는 값의 의미:**
+```
+left: -45.3%; width: 145.3%
+→ 이미지를 좌측으로 45.3% 밀어서 배치
+→ 좌측 끝이 프레임 밖으로 나감 → 좌측 디자인 요소 안 보임
+→ 우측 디자인 요소만 프레임 안에 보임
+
+left: 0; width: 151.25%
+→ 이미지를 좌측 정렬, 우측이 프레임 밖으로 넘침
+→ 우측 디자인 요소 안 보임
+→ 좌측 디자인 요소만 프레임 안에 보임
+```
+
+**이것은 crop이 아니다.** 이미지를 자르는 것이 아니라, 프레임 안에서 이미지의 **위치**를 조절하는 것. 이미지 원본은 그대로 유지.
+
+**CSS 구현:**
+```css
+.pill-frame {
+  position: relative;    /* 또는 absolute */
+  width: 457.96px;       /* 프레임 크기 */
+  height: 95.62px;
+  overflow: hidden;      /* 핵심: 프레임 밖 숨김 */
+}
+.pill-frame img {
+  position: absolute;
+  top: 0;
+  left: -45.3%;          /* Figma 값 그대로 */
+  width: 145.3%;         /* Figma 값 그대로 */
+  height: 100%;
+}
+```
+
+**절대 하지 말 것:**
+- `width: 100%; object-fit: fill` — 이미지가 찌그러져 양쪽 디자인 요소가 다 보임
+- `scaleX(-1)` 임의 추가 — Figma에 없는 변환
+- `object-fit: cover/contain` — 이미지 비율/위치가 달라짐
+- "crop"이라 부르기 — 이미지를 자르는 게 아니라 위치를 조절하는 것
+
+**rotate(180deg) + 이미지 배치 주의:**
+
+부모에 `rotate(180deg)`가 적용된 경우 (예: 하단 pill), 이미지가 상하좌우 모두 뒤집힘. 이때 **이미지 배치(left/width)를 상단과 반대로** 적용해야 최종 결과가 올바른 방향이 됨.
+
+```
+상단 left-pill:  left: -45.3%; width: 145.3%  → 우측 보임
+하단 left-pill:  rotate(180) + left: 0; width: 151.25%  → 결과적으로 우측 보임 (뒤집혀서)
+
+상단 right-pill: left: 0; width: 151.25%  → 좌측 보임
+하단 right-pill: rotate(180) + left: -45.3%; width: 145.3%  → 결과적으로 좌측 보임 (뒤집혀서)
+```
+
+**검증 방법:** 각 pill을 개별 screenshot으로 뽑아서 Figma 원본 pill screenshot과 **곡선/직선 위치**를 1:1 대조. 양쪽 다 곡선이 보이면 이미지 배치가 잘못된 것.
+
+**적용 사례:**
+| 프레임 | 사용 | 비고 |
+|--------|------|------|
+| 1171281194 (issues-paired-rows) | 두루마리 pill 8개 | 첫 적용. 상/하 배치 반전 패턴 발견. |

block-tests/assets/ellipse_597.svg

@@ -0,0 +1,10 @@
+<svg width="101" height="212" viewBox="0 0 101 212" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M-1.36179e-05 210.5C54.6762 210.5 99 163.714 99 106C99 48.2862 54.6762 1.5 -4.48227e-06 1.5" stroke="url(#paint0_linear_17_1348)" stroke-opacity="0.7" stroke-width="3" stroke-dasharray="5 5"/>
+<defs>
+<linearGradient id="paint0_linear_17_1348" x1="-157.3" y1="87.4222" x2="85.8287" y2="95.2389" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CC5201"/>
+<stop offset="0.5" stop-color="#286852"/>
+<stop offset="1" stop-color="#5C4E31"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/ellipse_599.svg

@@ -0,0 +1,10 @@
+<svg width="212" height="101" viewBox="0 0 212 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 -4.22083e-06C1.5 54.6762 48.2862 99 106 99C163.714 99 210.5 54.6762 210.5 -1.72853e-06" stroke="url(#paint0_linear_17_1347)" stroke-opacity="0.7" stroke-width="3" stroke-dasharray="5 5"/>
+<defs>
+<linearGradient id="paint0_linear_17_1347" x1="124.578" y1="-157.3" x2="116.761" y2="85.8287" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5C4E31"/>
+<stop offset="0.5" stop-color="#286852"/>
+<stop offset="1" stop-color="#CC5201"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/ellipse_600.svg

@@ -0,0 +1,10 @@
+<svg width="101" height="212" viewBox="0 0 101 212" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100.5 1.5C45.8238 1.5 1.50001 48.2862 1.5 106C1.5 163.714 45.8238 210.5 100.5 210.5" stroke="url(#paint0_linear_17_1357)" stroke-opacity="0.7" stroke-width="3" stroke-dasharray="5 5"/>
+<defs>
+<linearGradient id="paint0_linear_17_1357" x1="257.8" y1="124.578" x2="14.6713" y2="116.761" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CC5201"/>
+<stop offset="0.5" stop-color="#286852"/>
+<stop offset="1" stop-color="#5C4E31"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/29c778b566aca6778f505874f21670de129351f8.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 22.4 16.8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M21.4629 0.5L11.1191 15.8984L0.930664 0.5H21.4629Z" fill="var(--fill-0, black)" stroke="var(--stroke-0, white)"/>
+</svg>

block-tests/assets/shared/42b569ef8be40cb859fc5aa4fcbaa6310f2478c1.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1080 119.144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 42421" d="M0 50C0 22.3858 22.3858 1.3574e-10 50 1.3202e-10L1030 0C1057.61 0 1080 22.3858 1080 50V69.1436C1080 96.7578 1057.61 119.144 1030 119.144H50C22.3858 119.144 0 96.7578 0 69.1436V59.5718V50Z" fill="url(#paint0_linear_102_194)"/>
+<defs>
+<linearGradient id="paint0_linear_102_194" x1="1370.18" y1="59.5718" x2="290.181" y2="59.5718" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A5A196" stop-opacity="0.5"/>
+<stop offset="1" stop-color="#39321E"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/5d27ecb194e670c9af26e98d11075b86c40efffa.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1080 118.047" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 42422" d="M0 50C0 22.3858 22.3858 -1.00084e-07 50 0L1030 3.55188e-06C1057.61 3.65196e-06 1080 22.3858 1080 50V68.0473C1080 95.6616 1057.61 118.047 1030 118.047L50 118.047C22.3858 118.047 0 95.6616 0 68.0474V50Z" fill="url(#paint0_linear_102_198)"/>
+<defs>
+<linearGradient id="paint0_linear_102_198" x1="1080" y1="59.0233" x2="1.03314e-06" y2="59.0233" gradientUnits="userSpaceOnUse">
+<stop stop-color="#296B55" stop-opacity="0.5"/>
+<stop offset="1" stop-color="#032118"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/6d311a18898deded5376b25996a13757e8c42d17.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1080 119.144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 42421" d="M0 50C0 22.3858 22.3858 1.3574e-10 50 1.3202e-10L1030 0C1057.61 0 1080 22.3858 1080 50V69.1436C1080 96.7578 1057.61 119.144 1030 119.144H50C22.3858 119.144 0 96.7578 0 69.1436V59.5718V50Z" fill="url(#paint0_linear_102_196)"/>
+<defs>
+<linearGradient id="paint0_linear_102_196" x1="1370.18" y1="59.5718" x2="290.181" y2="59.5718" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A5A196" stop-opacity="0.5"/>
+<stop offset="1" stop-color="#39321E"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/7713e15d6eaebd868c6ea632c1199b94603af2fd.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1214 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Rectangle 42631">
+<path d="M0 0H1214V170H0V0Z" fill="var(--fill-0, #FAEDCB)" style="mix-blend-mode:multiply"/>
+</g>
+</svg>

block-tests/assets/shared/README.md

@@ -0,0 +1,51 @@
+# shared/ — 해시 기반 공통 자산 캐시
+
+여러 프레임에서 등장하는 자산(배경 텍스처, 아이콘, 아크 등)을 **해시 파일명**으로 한 번만 저장한다.
+
+## 파일명 규칙
+
+Figma MCP 가 자산 URL을 다음 형식으로 제공:
+```
+http://localhost:3845/assets/849658071be46a26936e8666e3722b2dd548aee7.png
+```
+
+URL 끝의 hash (`849658071be46a26936e8666e3722b2dd548aee7`) 그대로 파일명 사용:
+```
+shared/849658071be46a26936e8666e3722b2dd548aee7.png
+```
+
+## dedup 작동 원리
+
+Figma는 같은 자산을 다른 노드에서 사용해도 동일 hash로 서빙한다. 따라서:
+
+```
+프레임 A: bg_texture (hash: 849658...) → 다운로드 → shared/849658....png
+프레임 B: bg_texture (hash: 849658...) → 이미 있음 → 다운로드 스킵
+프레임 C: 새 아이콘   (hash: f05ebf...) → 다운로드 → shared/f05ebf....png
+```
+
+매 변환마다 다운로드 전 `[ -f "shared/${hash}.${ext}" ]` 체크.
+
+## 의미 매핑
+
+해시 파일명은 사람이 못 읽으므로 의미 라벨을 따로 관리:
+
+1. **블록별 매핑**: `block-tests/{slug}_assets.txt`
+   ```
+   849658071be46a26936e8666e3722b2dd548aee7.png   bg_texture
+   f05ebf15a1125b6c5809f9ffa35b4e4e750687d3.png   arc_top
+   ```
+
+2. **전체 카탈로그**: `blocks_index.md` 의 "발견된 공통 자산" 표
+
+## HTML 참조
+
+블록 HTML은 `block-tests/{slug}.html` 위치이므로 상대 경로:
+
+```html
+<img src="assets/shared/849658071be46a26936e8666e3722b2dd548aee7.png">
+```
+
+## legacy 자산
+
+이전 변환물 ([bim-goals-3circles](../../bim-goals-3circles.html)) 의 자산은 `block-tests/assets/frame_1171281211/` 에 그대로 두었음. 새 변환부터는 shared/ 만 사용.

block-tests/assets/shared/b614390a7ec2f351fc8290d640bcd3e6b237bfb2.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 195 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 934" d="M195 1H0" stroke="var(--stroke-0, #60A451)" stroke-width="2" stroke-dasharray="2 2"/>
+</svg>

block-tests/assets/shared/bf1755273910e17f7a012ce2d269a93cca9483ac.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 192 169" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M192 169L179.022 154.254C168.646 142.474 159.023 133.381 145.754 127.296C133.472 121.666 118.062 118.732 97.6292 118.185V165.326L0 82.663L97.6292 0V47.3981C131.266 48.7758 156.328 59.8343 172.195 80.3485C185.335 97.3587 192 120.867 192 150.291V169Z" fill="url(#paint0_linear_101_190)"/>
+<defs>
+<linearGradient id="paint0_linear_101_190" x1="0" y1="84.5" x2="192" y2="84.5" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0.3"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/cab8c8284090fb4893d7f584cc6081370b115b11.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1080 118.047" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 42422" d="M0 50C0 22.3858 22.3858 -1.00084e-07 50 0L1030 3.55188e-06C1057.61 3.65196e-06 1080 22.3858 1080 50V68.0473C1080 95.6616 1057.61 118.047 1030 118.047L50 118.047C22.3858 118.047 0 95.6616 0 68.0474V50Z" fill="url(#paint0_linear_102_200)"/>
+<defs>
+<linearGradient id="paint0_linear_102_200" x1="1080" y1="59.0233" x2="1.03314e-06" y2="59.0233" gradientUnits="userSpaceOnUse">
+<stop stop-color="#296B55" stop-opacity="0.5"/>
+<stop offset="1" stop-color="#032118"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg

@@ -0,0 +1,30 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 210.699 489.919" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Mask group" filter="url(#filter0_d_106_321)">
+<mask id="mask0_106_321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="201" height="475">
+<path id="Intersect" d="M0 58.1721C0 62.7691 3.14483 66.7452 7.5533 68.0482C80.6773 89.662 134.036 157.329 134.036 237.46C134.036 317.59 80.677 385.255 7.55332 406.868C3.14484 408.171 0 412.148 0 416.745V465.118C0 471.337 5.62415 476.059 11.6872 474.677C119.925 450.01 200.699 353.169 200.699 237.46C200.699 121.751 119.925 24.9083 11.6872 0.241745C5.62413 -1.13998 0 3.58191 0 9.80042V58.1721Z" fill="url(#paint0_linear_106_321)"/>
+</mask>
+<g mask="url(#mask0_106_321)">
+<rect id="Rectangle 43991" y="-0.00117085" width="270" height="95" fill="var(--fill-0, #FD9164)" fill-opacity="0.8"/>
+<rect id="Rectangle 43992" y="94.9988" width="270" height="95" fill="var(--fill-0, #F29700)" fill-opacity="0.8"/>
+<rect id="Rectangle 43993" x="-54" y="189.999" width="270" height="95" fill="var(--fill-0, #FCC948)" fill-opacity="0.8"/>
+<rect id="Rectangle 43994" y="284.999" width="270" height="95" fill="var(--fill-0, #C3D601)" fill-opacity="0.8"/>
+<rect id="Rectangle 43995" y="379.999" width="270" height="95" fill="var(--fill-0, #65C6C4)" fill-opacity="0.8"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_106_321" x="0" y="0" width="210.699" height="489.919" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="5" dy="10"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_106_321"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_106_321" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_106_321" x1="121.177" y1="-3.68723" x2="22.5301" y2="487.856" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6FD6D8"/>
+<stop offset="1" stop-color="#14706E"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/bg-shapes-only.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  display: flex; justify-content: center; align-items: center;
+  min-height: 100vh; background: #f5f5f5;
+}
+.block {
+  width: 1280px; height: 697px;
+  background: #000;
+  position: relative;
+}
+/* 42335 - 실제 dimensions 727 × 351 (MCP 라벨이 반대)
+   스케일: 424 × 205
+   BR: 175.5 0 0 175.5 → 102 0 0 102
+   gradient: 90deg, Figma 색상 그대로 */
+.shape-42335 {
+  position: absolute;
+  left: 428px; top: 246px;
+  width: 424px; height: 205px;
+  border-radius: 102px 0 0 102px;
+  background: linear-gradient(90deg, rgba(217,162,104,1) 37%, rgba(220,103,14,0) 89%);
+}
+</style>
+</head>
+<body>
+<div class="block">
+  <div class="shape-42335"></div>
+</div>
+</body>
+</html>

block-tests/bim-3roles-cards.html

@@ -0,0 +1,368 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>BIM 3역할 목표 카드 (Frame 1171281191)</title>
+<!--
+  ============================================================
+  Figma → HTML 수학적 변환 (bottom-up, Pure CSS)
+  ============================================================
+  원본 Frame: 2600.998 × 1927.004 px  (node 45:16, Frame 1171281191)
+  Scale factor S = 1280 / 2600.998 = 0.49213
+  블록 높이 = 1927.004 × S ≈ 948.5 px
+
+  ⚠️ 본 프레임은 16:9 (720) 보다 높음. 1:1 변환 단계는 슬라이드를 1280×949 로 만들어
+     원본을 그대로 보존. design_agent 본체 이전 시 컨텐츠 재배치 필요.
+
+  구현 전략: CSS transform: scale(S) 균일 축소
+    → .inner 컨테이너는 Figma 원본 좌표(2601 × 1927) 그대로
+    → 모든 위치/크기/폰트는 Figma 원본 px
+
+  플래튼: bim-3roles-cards_flat.md
+  ============================================================
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&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;
+  padding: 20px;
+}
+
+/* 1280×949 (16:9 초과 — 본 프레임 전용) */
+.slide {
+  width: 1280px;
+  height: 948.5px;
+  background: #ffffff;
+  position: relative;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+}
+
+.block {
+  width: 1280px;
+  height: 948.5px;
+  background: #ffffff;
+  position: relative;
+  overflow: hidden;
+}
+
+.inner {
+  position: absolute;
+  left: 0; top: 0;
+  width: 2600.998px;
+  height: 1927.004px;
+  transform: scale(0.492129);
+  transform-origin: top left;
+}
+
+/* ─────────────────────────────────────────────────────────
+   레이어 1 — 3 컬럼 배경 (image 2977 × 3, same src)
+   각 컬럼 833/834 wide, 1844.7 tall, top 82.3
+   ───────────────────────────────────────────────────────── */
+.col-bg { position: absolute; top: 82.3px; height: 1844.701px; }
+.col-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.col-bg--left  { left: 43px;   width: 833px; }
+.col-bg--mid   { left: 880px;  width: 834px; }
+.col-bg--right { left: 1718px; width: 833px; }
+
+/* ─────────────────────────────────────────────────────────
+   레이어 2 — 컬러 오버레이 (CSS 단색 + opacity 0.80)
+   Figma MCP 확인: opacity-80, 각 컬럼 다른 색상
+   픽셀 분석: left=#d6e7c4, mid=#e1efe1, right=#d0c0ad
+   border-radius 추정: ~30px (이미지 모서리 anti-alias 패턴)
+   ───────────────────────────────────────────────────────── */
+.col-overlay { position: absolute; top: 180.66px; opacity: 0.80; border-radius: 30px; }
+.col-overlay--left  { left: 114.01px;  width: 691px; height: 1510.487px; background: #d6e7c4; }
+.col-overlay--mid   { left: 948.01px;  width: 692px; height: 1053.828px; background: #e1efe1; }
+.col-overlay--right { left: 1783.01px; width: 691px; height: 1128.098px; background: #d0c0ad; }
+
+/* ─────────────────────────────────────────────────────────
+   레이어 3 — 하단 사진 카드 3개 (둥근 모서리, opacity 0.70)
+   ───────────────────────────────────────────────────────── */
+.bottom-photo {
+  position: absolute;
+  top: 1150.18px;
+  width: 697px;
+  height: 700.545px;
+  border-radius: 50px;
+  opacity: 0.70;
+  overflow: hidden;
+}
+.bottom-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.bottom-photo--left  { left: 108px;  border-radius: 49px; }
+.bottom-photo--mid   { left: 948px; }
+.bottom-photo--right { left: 1781px; }
+
+/* ─────────────────────────────────────────────────────────
+   레이어 4 — 상단 원형 뱃지 3개 (outer + inner + 2줄 텍스트)
+   각 뱃지: 396.024 × 397.468, top 0
+   ───────────────────────────────────────────────────────── */
+.badge { position: absolute; top: 0; width: 396.024px; height: 397.468px; }
+.badge img.badge-outer {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%; object-fit: cover; display: block;
+}
+.badge img.badge-inner {
+  position: absolute;
+  width: 301.829px; height: 302.93px;
+  object-fit: cover; display: block;
+}
+
+.badge--owner   { left: 265.38px; }
+.badge--owner   .badge-inner { left: 47.6px; top: 53.88px; width: 300.816px; height: 302.93px; }
+
+.badge--builder { left: 1092.88px; }
+.badge--builder .badge-inner { left: 46.59px; top: 51.84px; width: 301.829px; height: 301.913px; }
+
+.badge--designer { left: 1945.7px; }
+.badge--designer .badge-inner { left: 47.6px; top: 59.98px; width: 300.816px; height: 302.93px; }
+
+/* 뱃지 라벨 (2줄: 큰 글씨 65px / 작은 글씨 50px) */
+.badge-label {
+  position: absolute;
+  width: 179.274px;
+  font-weight: 700;
+  text-align: center;
+  letter-spacing: -1.3px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.badge-label .ln1 { font-size: 65px; line-height: 1; }
+.badge-label .ln2 { font-size: 50px; line-height: 1.2; }
+
+/* 발주자: center x = 464.4 (badge_left + 199), top 191.7 */
+.badge-label--owner    { left: 374.76px; top: 191.7px; height: 130.474px; color: #285b4a; }
+/* 시공자 */
+.badge-label--builder  { left: 1202.27px; top: 191.7px; height: 130.474px; color: #445a2f; }
+/* 설계자 (label width 179.274) — translate-x-1/2 left=2143.71 → left = 2054.07 */
+.badge-label--designer { left: 2054.08px; top: 191.7px; width: 179.274px; height: 136.496px; color: #743002; }
+.badge-label--designer .ln1 { line-height: 1.2; }
+
+/* ─────────────────────────────────────────────────────────
+   레이어 5 — 본문 텍스트 3 컬럼 (font 40 medium)
+   ───────────────────────────────────────────────────────── */
+/* ─────────────────────────────────────────────────────────
+   본문 bullet 리스트 — 시맨틱: 커스텀 marker가 있는 list
+   각 .bullet-list 가 column, .bullet-row 가 list item.
+   .bullet-icon 은 marker (장식), .bullet-text 는 본문.
+
+   수학 (CSS 변수로 자동 도출):
+     icon_margin_top = lh/2 − icon_h/2 = lh/2 − 16.265
+       → 아이콘 vertical center를 텍스트 첫 줄 center에 align
+     icon_margin_right = text_left − icon_left − icon_w (Figma값)
+   ───────────────────────────────────────────────────────── */
+.bullet-list {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  /* 핵심: 모든 컬럼 동일 top/bottom. 페어들이 컨테이너 안에서 균등 분포.
+     같은 height 기준으로 페어 간 spacing이 컬럼별로 다름 (적은 아이템 = 더 넓은 spacing) */
+  justify-content: space-between;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 500;
+  font-size: 40px;
+  color: #000000;
+  /* Per-column 인라인: width, height, --icon-gap */
+}
+.bullet-row {
+  display: flex;
+  align-items: flex-start;
+  --lh: 85px;  /* 기본 line-height — 모든 single-line row 균일 */
+  /* fixed height 없음. row 높이는 내용으로 결정 (1줄 = lh, 2줄 wrap = 2×lh).
+     wrap 되어도 다음 row가 자동 시프트 → overlap 없음 */
+}
+.bullet-row.compact {
+  --lh: 50px;  /* 2-line item: 더 타이트한 lh, 자연 wrap으로 2줄 */
+}
+.bullet-icon {
+  flex: none;
+  width: 32.411px;
+  height: 32.529px;
+  /* 수학: 아이콘 center를 첫 줄 center에 align */
+  margin-top: calc(var(--lh) / 2 - 16.265px);
+  /* 수학: 컬럼별 Figma gap (text_left − icon_left − icon_w) */
+  margin-right: var(--icon-gap, 11px);
+}
+.bullet-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.bullet-text {
+  flex: 1;
+  line-height: var(--lh);
+  /* wrap 허용: 텍스트가 컬럼 너비를 초과하면 자연 줄바꿈 */
+  white-space: normal;
+  word-break: keep-all;  /* 한글: 단어 단위 줄바꿈 */
+}
+
+.body--owner    { left: 171.18px;  top: 421.58px; width: 643.423px; height: 750.343px; }
+.body--builder  { left: 1004.79px; top: 417.52px; width: 624.306px; height: 650.611px; }
+.body--designer { left: 1842.01px; top: 417.52px; width: 664.695px; height: 750.343px; }
+
+/* (체크박스는 페어 .bullet-icon으로 통합. standalone 클래스 제거) */
+</style>
+</head>
+<body>
+
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <!-- 레이어 1: 3 컬럼 배경 (image 2977 × 3) -->
+      <div class="col-bg col-bg--left"><img src="assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
+      <div class="col-bg col-bg--mid"><img src="assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
+      <div class="col-bg col-bg--right"><img src="assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
+
+      <!-- 레이어 2: 컬러 오버레이 — CSS 단색 전환 -->
+      <div class="col-overlay col-overlay--left"></div>
+      <div class="col-overlay col-overlay--mid"></div>
+      <div class="col-overlay col-overlay--right"></div>
+
+      <!-- 레이어 3: 하단 사진 카드 (좌하 — image 3574) -->
+      <div class="bottom-photo bottom-photo--left"><img src="assets/shared/d2c070f200af83f563976b6b0f309d38321d204d.png" alt=""></div>
+
+      <!-- 레이어 4: 상단 원형 뱃지 3개 -->
+      <div class="badge badge--owner">
+        <img class="badge-outer" src="assets/shared/77f319979c880da34ff3d423fcd97827f636c01e.png" alt="">
+        <img class="badge-inner" src="assets/shared/e64c967dd00302bfbef6cfbcbb4f7a4db5d9d96c.png" alt="">
+      </div>
+      <div class="badge badge--builder">
+        <img class="badge-outer" src="assets/shared/1550ec755fa7922dcfc1c90135a570d6b9df82cc.png" alt="">
+        <img class="badge-inner" src="assets/shared/85beaf9dfc17b7ed4620729a086ba22143606517.png" alt="">
+      </div>
+      <div class="badge badge--designer">
+        <img class="badge-outer" src="assets/shared/9ac089fa9c5106b6b26d47727003641bb56ba4b0.png" alt="">
+        <img class="badge-inner" src="assets/shared/4b534ccf4e945fbe7436a0d8d96a6deffcfe5cef.png" alt="">
+      </div>
+
+      <!-- 뱃지 라벨 (별도 레이어) -->
+      <div class="badge-label badge-label--owner"><span class="ln1">발주자</span><span class="ln2">목표</span></div>
+      <div class="badge-label badge-label--builder"><span class="ln1">시공자</span><span class="ln2">목표</span></div>
+      <div class="badge-label badge-label--designer"><span class="ln1">설계자</span><span class="ln2">목표</span></div>
+
+      <!--
+        레이어 5: 본문 페어 (체크박스 + 텍스트) — flex 구조
+        템플릿화 준비: 각 row는 add/remove 가능, 텍스트 길이가 row 높이 결정
+        row의 height가 다음 row까지의 간격을 결정 (Figma 체크박스 y 차이 그대로)
+      -->
+
+      <!--
+        모든 row에 fixed height 없음. 자연 flex stacking.
+        single-line: lh 85 → row 85 tall (균일)
+        compact: lh 50 + 자연 wrap → row N×50 tall (텍스트 길이 결정)
+        wrap이 일어나도 next row가 자동으로 밀림 → overlap 없음
+
+        Letter-spacing은 Figma에서 wrap 방지를 위한 디자인 의도 (-0.8/-1.6 등)
+        → 측정값 기반으로 약간 더 강하게 적용 (Chrome Noto Sans KR 너비 차이 보정)
+      -->
+
+      <!-- 발주자: list_left 127.63, list_w 686.97, icon_gap 11.14
+           top/height: 모든 컬럼 동일 (top 421.58, height 720) → bottom 1141.58 -->
+      <div class="bullet-list" style="left:127.63px;top:421.58px;width:686.97px;height:720px;--icon-gap:11.14px;">
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">민원, 재 작업 등의 예방 및 최소화</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">직관화로 품질 향상 및 안정성 제고</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text" style="letter-spacing:-1.5px;">수행공정의 쉬운이해로 관리 편의성 증진</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">실무자와 발주자간의 소통 오류 최소화</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">행정 자동화와 최소화로 생산성 향상</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">건설정보의 통합관리로 활용성 강화</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text" style="letter-spacing:-3.5px;">전 생애주기에 걸친 효율적 디지털 자산관리</span>
+        </div>
+      </div>
+
+      <!-- 시공자: list_left 961.20, list_w 667.90, icon_gap 11.18 (top/height 동일) -->
+      <div class="bullet-list" style="left:961.20px;top:421.58px;width:667.90px;height:720px;--icon-gap:11.18px;">
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text" style="letter-spacing:-1.5px;">시공 오류예방 및 공사 Risk 최소화</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">시각화로 안전성 제고 및 품질 향상</span>
+        </div>
+        <div class="bullet-row compact">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">중간태, 완성태 측량을 통한<br>시‧공간적 관리 편리성 향상</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">건설 관계자들 간의 의사소통 강화</span>
+        </div>
+        <div class="bullet-row compact">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">Model을 활용한 시공상세도 등의<br>관련도서 작성 용이</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">System 구축을 통한 행정 간소화</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">기술개발을 통한 생산성 향상</span>
+        </div>
+      </div>
+
+      <!-- 설계자: list_left 1794.78, list_w 711.93, icon_gap 14.82 (top/height 동일) -->
+      <div class="bullet-list" style="left:1794.78px;top:421.58px;width:711.93px;height:720px;--icon-gap:14.82px;">
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">직관적 시각화로 원활한 소통</span>
+        </div>
+        <div class="bullet-row compact">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">3D 모델 활용으로 오류 최소화 및<br>Claim 예방</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">발주자와의 상호 신뢰 증진</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">정보물 생산으로 부가가치 창출</span>
+        </div>
+        <div class="bullet-row">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">고부가가치 창출산업으로 전환</span>
+        </div>
+        <div class="bullet-row compact">
+          <span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
+          <span class="bullet-text">프로젝트 정보의 일관성 유지 및<br>관리를 통한 오류 최소화</span>
+        </div>
+      </div>
+
+      <!-- 체크박스는 페어 내부 .bullet-icon으로 통합됨 (이전 standalone 21개 제거) -->
+
+      <!-- 하단 사진 (중/우) — 레이어 순서상 마지막 -->
+      <div class="bottom-photo bottom-photo--mid"><img src="assets/shared/2a6a58e7bf7a645b5ede65115feb2890ccc414d1.png" alt=""></div>
+      <div class="bottom-photo bottom-photo--right"><img src="assets/shared/39113493f6e3ae76d766e86e293b0f0dcbf55d91.png" alt=""></div>
+
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

block-tests/bim-3roles-cards_flat.md

@@ -0,0 +1,104 @@
+# Frame 1171281191 — BIM 3역할(발주자/시공자/설계자) 목표 카드
+
+> 원본: 2600.998 × 1927.004 px
+> Scale: × 0.49213 → 1280 × 948.5 px
+> Node ID: 45:16 (Figma)
+> 패턴 ID (잠정): `cards-3col-persona`
+> 슬라이드 컨테이너: **1280 × 949** (16:9 초과. design_agent 본체 이전 시 재배치 필요)
+
+## 계층 경로
+
+```
+Frame 45:16 "Frame 1171281191" (2600.998 × 1927.004)
+└─ 17:1450 "오른쪽" (0,0) full size
+   ├─ 17:1451 Frame 1171276940 (0, 1204.82) 2600.998 × 677.02 — bottom area placeholder
+   ├─ 17:1452 Group 1171276418 (43, 82.30) 2508 × 1844.70
+   │   └─ 17:1453 Group 1171276417
+   │       ├─ 17:1454 image 2977 (43, 82.30) 833 × 1844.70   ← 좌 컬럼 BG
+   │       ├─ 17:1455 image 2978 (880, 82.30) 834 × 1844.70  ← 중 컬럼 BG (동일 src 2977)
+   │       └─ 17:1456 image 2979 (1718, 82.30) 833 × 1844.70 ← 우 컬럼 BG (동일 src 2977)
+   │   ├─ 17:1457 image 2986 (114.01, 180.66) 691 × 1510.49 opacity 0.80  ← 좌 오버레이
+   │   ├─ 17:1458 image 2987 (948.01, 180.66) 692 × 1053.83 opacity 0.80  ← 중 오버레이
+   │   ├─ 17:1459 image 2988 (1783.01, 180.66) 691 × 1128.10 opacity 0.80 ← 우 오버레이
+   │   └─ 17:1460 image 3574 (108, 1150.18) 697 × 700.55 r=49 opacity 0.70 ← 좌하 사진
+   ├─ 17:1461 Group 1171276695 "시공자 뱃지" (1092.88, 0) 396.02 × 397.47
+   │   ├─ 17:1462 image 2984 outer (1092.88, 0) 396.02 × 397.47
+   │   ├─ 17:1463 image 2981 inner (1139.46, 51.84) 301.83 × 301.91
+   │   └─ 17:1464 TEXT "시공자 목표" center (1291.9, 256.94) 179.27 × 130.47
+   │            #445a2f Bold, "시공자" 65px / "목표" 50px
+   ├─ 17:1465 Group 1171276696 "설계자 뱃지" (1945.7, 0) 396.02 × 397.47
+   │   ├─ 17:1466 image 2985 outer
+   │   ├─ 17:1467 image 2982 inner
+   │   └─ 17:1468 TEXT "설계자 목표" #743002, 65/50px
+   ├─ 17:1469 Group 1171276694 "발주자 뱃지" (265.38, 0) 396.02 × 397.47
+   │   ├─ 17:1470 image 2983 outer
+   │   ├─ 17:1471 image 2980 inner
+   │   └─ 17:1472 TEXT "발주자 목표" #285b4a, 65/50px
+   ├─ 17:1473 TEXT "발주자 본문" (171.18, 421.58) 643.4 × 750.34
+   │            font 40 Medium black, leading 85, 7줄
+   ├─ 17:1474 TEXT "시공자 본문" (1004.79, 417.52) 624.3 × 650.61
+   │            font 40 Medium, mixed leading 50/85, 12+줄 (긴 본문)
+   ├─ 17:1475 TEXT "설계자 본문" (1842.01, 417.52) 664.7 × 750.34
+   │            font 40 Medium, mixed, 8+줄
+   ├─ 17:1476 image 3571 (948, 1150.18) 697 × 700.55 r=50 opacity 0.70 ← 중하 사진
+   ├─ 17:1477 Group "체크박스 우 6개" (1794.78, 446.04~919.74)
+   │            6개 아이콘 32.41×32.53 image 3005 (체크박스)
+   │            y: 446, 526, 661, 746, 833, 919
+   ├─ 17:1484 Group "체크박스 중 7개" (961.20, 447.04~1056.84)
+   │            7개 아이콘. y: 447, 530, 609, 744, 832, 969, 1056
+   ├─ 17:1492 Group "체크박스 좌 7개" (127.63, 449.63~963.46)
+   │            7개 아이콘. y: 449, 535, 620, 704, 791, 877, 963
+   └─ 17:1500 image 3572 (1781, 1150.18) 697 × 700.55 r=50 opacity 0.70 ← 우하 사진
+```
+
+## 이상 탐지 결과
+
+| 검사 | 결과 |
+|------|------|
+| 회전 단일문자 | 없음 |
+| 좁은 박스 세로 텍스트 | 없음 |
+| 중복 노드 | image 2977이 image 2978/2979로 3번 사용됨 — 의도된 재사용 (각 컬럼의 BG가 동일 텍스처). image 3005는 20개 인스턴스 모두 동일 src — 체크박스 아이콘 |
+| Vector metadata 회전 불일치 | 없음 (vector 노드 없음) |
+| 텍스트 leading 혼합 | 17:1474 시공자 본문에서 leading 50/85/40 혼재 — Figma 원본의 line break 표현 의도 그대로 보존 |
+| 색상 시스템 | 발주자 #285b4a (녹), 시공자 #445a2f (올리브), 설계자 #743002 (브라운). 각 컬럼 컬러 코드 |
+
+## 패턴 분류
+
+이 패턴은 기존 `cycle-3way-intersect`와 **다름**:
+- cycle: 3원 교차 다이어그램 (관계/통합)
+- cards-3col-persona: 3 stakeholder 세로 카드 + 본문 리스트 (병렬/대조)
+
+기존 legacy `prerequisites-3col`와도 **다름**:
+- legacy: 색상바 + 한자 라벨 + 키워드 카드
+- cards-3col-persona: 사진 배경 + 원형 뱃지 + 긴 본문 리스트
+
+→ **새 패턴 등록.** 패턴 카탈로그에 `cards-3col-persona` 추가, 등장 횟수 1.
+
+## 변형 가능 축
+
+- **columns[N]**: 현재 3, 가능 2~4
+  - 각 column: bg_image, overlay_image, badge_outer, badge_inner, badge_label, role_color, body_text, checkbox_count, bottom_photo
+- **role_colors[3]**: 현재 #285b4a / #445a2f / #743002 (역할별)
+- **body_text_lines[]**: 각 컬럼당 6~10줄
+- **checkbox_count[col]**: 현재 7/7/6, 가능 5~10
+- **bottom_photos[N]**: 현재 3 (둥근 모서리 사진), 가능 0~N
+- **badge_label_2lines**: "역할이름"/"목표" 형식 (변형 가능)
+
+## 자산 매핑
+
+| hash | 의미 라벨 | 사용처 |
+|------|---------|------|
+| 4a17cd1d... | column_bg_texture | 3컬럼 BG (재사용 ×3) |
+| e837f870... | overlay_left | 좌 컬럼 컬러 오버레이 |
+| 755384bd... | overlay_mid | 중 컬럼 컬러 오버레이 |
+| 5577732e... | overlay_right | 우 컬럼 컬러 오버레이 |
+| 77f31997... | badge_outer_owner | 발주자 outer circle |
+| e64c967d... | badge_inner_owner | 발주자 inner circle |
+| 1550ec75... | badge_outer_builder | 시공자 outer circle |
+| 85beaf9d... | badge_inner_builder | 시공자 inner circle |
+| 9ac089fa... | badge_outer_designer | 설계자 outer circle |
+| 4b534ccf... | badge_inner_designer | 설계자 inner circle |
+| 6896d5c2... | checkbox_icon | 체크박스 (재사용 ×20) |
+| d2c070f2... | bottom_photo_left | 하단 좌 사진 |
+| 2a6a58e7... | bottom_photo_mid | 하단 중 사진 |
+| 39113493... | bottom_photo_right | 하단 우 사진 |

block-tests/bim-figma-devmode.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>BIM 목표 — Figma Dev Mode 직접 적용</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap" rel="stylesheet">
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  display: flex; justify-content: center; align-items: center;
+  min-height: 100vh; background: #f5f5f5;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+/* 슬라이드 1280×720 */
+.slide {
+  width: 1280px; height: 720px;
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+}
+/* Figma 원본 frame 크기: 2062.21 × 957
+   슬라이드에 맞추기 위해 스케일: 1280 / 2062.21 = 0.6207
+   원본 그대로 두고 transform: scale로 축소 */
+.figma-frame {
+  position: absolute;
+  width: 2062.21px;
+  height: 957px;
+  top: 0; left: 0;
+  transform: scale(0.6207);
+  transform-origin: top left;
+  background: #000;
+}
+</style>
+</head>
+<body>
+
+<div class="slide">
+<div class="figma-frame">
+
+<!-- Figma Dev Mode HTML 그대로 -->
+<div style="width: 100%; height: 100%; position: relative">
+    <img style="width: 1768px; height: 274px; left: 139px; top: 683px; position: absolute" src="assets/bg_bottom_image.png" />
+    <div style="width: 350px; height: 350px; left: 694px; top: 480px; position: absolute; background: linear-gradient(219deg, #D5AA89 0%, #737373 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
+    <div style="width: 280px; height: 280px; left: 728.06px; top: 514.06px; position: absolute; background: linear-gradient(154deg, #897445 0%, #3E3523 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; border: 5px white solid"></div>
+    <div style="width: 262.92px; height: 114.08px; left: 737.46px; top: 604.49px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 50px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word">생산성<br/>향상</div>
+    <div style="width: 350px; height: 350px; left: 853px; top: 206px; position: absolute; background: linear-gradient(145deg, #FDC69E 0%, #E0782C 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
+    <div style="width: 280px; height: 280px; left: 887.06px; top: 240.06px; position: absolute; background: linear-gradient(145deg, #BC652B 0%, #A24200 100%), linear-gradient(148deg, #EB5F00 0%, #BC4C00 100%), linear-gradient(150deg, #EC8F53 0%, #CC5200 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 5px white solid"></div>
+    <div style="width: 262.92px; height: 114.08px; left: 896.46px; top: 330.49px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 50px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">안전과<br/>품질</div>
+    <div style="width: 350px; height: 350px; left: 1009px; top: 480px; position: absolute; background: linear-gradient(146deg, white 0%, #253E1F 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
+    <div style="width: 280px; height: 280px; left: 1043.06px; top: 514.06px; position: absolute; background: linear-gradient(154deg, #296B55 0%, #123328 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; border: 5px white solid"></div>
+    <div style="width: 262.92px; height: 114.08px; left: 1053.63px; top: 597.45px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 50px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word">소통과<br/>신뢰</div>
+    <div style="width: 544.20px; height: 70.56px; left: 1518.01px; top: 754.21px; position: absolute; justify-content: center; display: flex; flex-direction: column; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">3D 모델을 통한 오류<br/>최소화 및 Claim 예방</div>
+    <div style="left: 1518px; top: 664px; position: absolute; color: #124133; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">신뢰ㆍ투명성 강화</div>
+    <div style="left: 1518px; top: 541px; position: absolute; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">성과품, Solution을 통한<br/>사용 편리성, 협업 및 의사소통 강화</div>
+    <div style="left: 1518px; top: 456px; position: absolute; color: #124133; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">소통ㆍ이해 원할</div>
+    <div style="width: 478.74px; height: 70.56px; left: 52.01px; top: 546px; position: absolute; text-align: right; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">Analogue 기반 업무를<br/>Digital화 하는 Process 혁신</div>
+    <div style="width: 531.41px; height: 95.35px; left: 0px; top: 456px; position: absolute; text-align: right; color: #604F32; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">신속ㆍ정확성 증진</div>
+    <div style="width: 428.31px; height: 91.34px; left: 102px; top: 734px; position: absolute; text-align: right; justify-content: center; display: flex; flex-direction: column; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">건설비용 및 유지관리비 감소,<br/>인력투입 최소화 등 생산성 향상</div>
+    <div style="width: 446.05px; height: 96.42px; left: 84.68px; top: 662px; position: absolute; text-align: right; justify-content: center; display: flex; flex-direction: column; color: #604F32; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">비용저감ㆍ부가가치 창출</div>
+    <div style="width: 508.49px; height: 91.34px; left: 1233px; top: 78px; position: absolute; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">Copy & Paste로 하향 평준화된<br/>기존 성과물의 품질 향상</div>
+    <div style="left: 1233px; top: 0px; position: absolute; text-align: right; color: #CC5200; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">품질 향상</div>
+    <div style="width: 508.49px; height: 91.34px; left: 331px; top: 78px; position: absolute; text-align: right; color: #525151; font-size: 30px; font-family: Noto Sans KR; font-weight: 500; line-height: 35px; word-wrap: break-word">시설물의 요구성능의 만족, <br/>건설중 및 운영중 안전확보 </div>
+    <div style="left: 645px; top: 0px; position: absolute; text-align: right; color: #CC5200; font-size: 40px; font-family: Noto Sans KR; font-weight: 700; line-height: 95px; word-wrap: break-word">안전성 제고</div>
+    <div style="width: 209px; height: 99px; left: 1135px; top: 233px; position: absolute; transform: rotate(-180deg); transform-origin: top left; border: 3px rgba(92, 78, 49, 0.70) solid"></div>
+    <div style="width: 209px; height: 99px; left: 726px; top: 549px; position: absolute; transform: rotate(90deg); transform-origin: top left; border: 3px rgba(204, 82, 1, 0.70) solid"></div>
+    <div style="width: 130.90px; height: 130.90px; left: 555px; top: 483px; position: absolute; background: linear-gradient(219deg, rgba(213, 170, 137, 0.30) 0%, rgba(115, 115, 115, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
+    <div style="width: 78.96px; height: 78.96px; left: 580.47px; top: 508.47px; position: absolute; background: linear-gradient(154deg, #897445 0%, #3E3523 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
+    <div style="width: 98.33px; height: 42.67px; left: 571.25px; top: 524.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">速</div>
+    <div style="width: 130.90px; height: 130.90px; left: 555px; top: 689px; position: absolute; background: linear-gradient(219deg, rgba(213, 170, 137, 0.30) 0%, rgba(115, 115, 115, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
+    <div style="width: 78.96px; height: 78.96px; left: 580.47px; top: 714.47px; position: absolute; background: linear-gradient(154deg, #897445 0%, #3E3523 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
+    <div style="width: 98.33px; height: 42.67px; left: 571.25px; top: 730.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">利</div>
+    <div style="width: 209px; height: 99px; left: 1329px; top: 758px; position: absolute; transform: rotate(-90deg); transform-origin: top left; border: 3px rgba(204, 82, 1, 0.70) solid"></div>
+    <div style="width: 130.90px; height: 130.90px; left: 859px; top: 22px; position: absolute; background: linear-gradient(146deg, rgba(216.75, 199.77, 103.56, 0.30) 0%, rgba(219.58, 103.10, 14.03, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
+    <div style="width: 78.96px; height: 78.96px; left: 884.47px; top: 47.47px; position: absolute; background: linear-gradient(145deg, #BC652B 0%, #A24200 100%), linear-gradient(148deg, #EB5F00 0%, #BC4C00 100%), linear-gradient(150deg, #EC8F53 0%, #CC5200 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
+    <div style="width: 98.33px; height: 42.67px; left: 875.25px; top: 63.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">安</div>
+    <div style="width: 130.90px; height: 130.90px; left: 1071px; top: 22px; position: absolute; background: linear-gradient(146deg, rgba(216.75, 199.77, 103.56, 0.30) 0%, rgba(219.58, 103.10, 14.03, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
+    <div style="width: 78.96px; height: 78.96px; left: 1096.47px; top: 47.47px; position: absolute; background: linear-gradient(145deg, #BC652B 0%, #A24200 100%), linear-gradient(148deg, #EB5F00 0%, #BC4C00 100%), linear-gradient(150deg, #EC8F53 0%, #CC5200 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
+    <div style="width: 98.33px; height: 42.67px; left: 1087.25px; top: 63.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">質</div>
+    <div style="width: 130.90px; height: 130.90px; left: 1372px; top: 483px; position: absolute; background: linear-gradient(146deg, rgba(96.48, 164.33, 81.25, 0.30) 0%, rgba(36.60, 62.33, 30.82, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
+    <div style="width: 78.96px; height: 78.96px; left: 1397.47px; top: 508.47px; position: absolute; background: linear-gradient(154deg, #296B55 0%, #123328 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
+    <div style="width: 98.33px; height: 42.67px; left: 1388.25px; top: 524.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">通</div>
+    <div style="width: 130.90px; height: 130.90px; left: 1372px; top: 689px; position: absolute; background: linear-gradient(146deg, rgba(96.48, 164.33, 81.25, 0.30) 0%, rgba(36.60, 62.33, 30.82, 0.30) 100%); background-blend-mode: linear-burn; border-radius: 9999px"></div>
+    <div style="width: 78.96px; height: 78.96px; left: 1397.47px; top: 714.47px; position: absolute; background: linear-gradient(154deg, #296B55 0%, #123328 100%); box-shadow: 0px 0px 10px black; border-radius: 9999px; outline: 2px white solid"></div>
+    <div style="width: 98.33px; height: 42.67px; left: 1388.25px; top: 730.60px; position: absolute; text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 45px; font-family: Noto Sans KR; font-weight: 700; line-height: 50px; word-wrap: break-word; text-shadow: 0px 0px 5px rgba(204, 82, 0, 1.00)">信</div>
+    <div style="width: 763px; height: 351px; left: 452.50px; top: 874.28px; position: absolute; transform: rotate(-120deg); transform-origin: top left">
+        <div style="width: 685.47px; height: 836.28px; left: 0px; top: 0px; position: absolute">
+            <div style="width: 685.47px; height: 836.28px; left: 0px; top: 0px; position: absolute; background: linear-gradient(270deg, rgba(115, 115, 115, 0) 0%, rgba(213, 170, 137, 0.33) 100%); background-blend-mode: linear-burn; border-top-left-radius: 175.50px; border-bottom-left-radius: 175.50px"></div>
+        </div>
+    </div>
+</div>
+
+</div>
+</div>
+
+</body>
+</html>

block-tests/bim-future-statement.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>BIM 미래 선언 (Frame 1171281207)</title>
+<!--
+  ============================================================
+  Figma → HTML 1:1 변환
+  원본: 3547 × 163 px (node 51:170, Frame 1171281207)
+  Scale: × 0.36088 → 1280 × 58.8 px
+
+  패턴: statement-pill-highlight
+  단일 메시지 + 일부 span highlighted + pill 배경 PNG
+  ============================================================
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&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;
+  padding: 20px;
+}
+
+.slide {
+  width: 1280px; height: 720px;
+  background: #ffffff;
+  position: relative;
+  display: flex; justify-content: center; align-items: center;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
+}
+
+.block {
+  width: 1280px;
+  height: 58.8px;       /* 163 × 0.36088 */
+  position: relative;
+  overflow: hidden;
+}
+
+.inner {
+  position: absolute;
+  left: 0; top: 0;
+  width: 3547px;
+  height: 163px;
+  transform: scale(0.360869);
+  transform-origin: top left;
+}
+
+/* 배경 pill (CSS gradient, border-radius 97 = 완전 캡슐)
+   원본 이미지 픽셀 분석:
+     x=5%: #3b3523, x=50%: #263a2a, x=95%: #113f31
+     수직: 균일 (수평 gradient만)
+   → linear-gradient(90deg, ...)
+   원본에 미세한 네트워크 텍스처 패턴 있었으나 CSS gradient로 대체
+*/
+.banner-bg {
+  position: absolute;
+  left: 0; top: 0;
+  width: 3547px;
+  height: 163px;
+  border-radius: 97px;
+  background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
+}
+
+/* 텍스트: center (1671.5, 78), font 80 Bold White, line-height 90 */
+.banner-text {
+  position: absolute;
+  /* translate-x-1/2 translate-y-1/2 → top-left = (center - w/2, center - h/2) */
+  left: 205px;          /* 1671.5 - 2933/2 = 205 */
+  top: 33px;            /* 78 - 90/2 = 33 */
+  width: 2933px;
+  height: 90px;
+  font-weight: 700;
+  font-size: 80px;
+  line-height: 90px;
+  color: #ffffff;
+  text-align: center;
+  letter-spacing: -0.16px;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+  white-space: nowrap;
+  word-break: keep-all;
+}
+.banner-text .highlight {
+  color: #fe3;          /* highlighted span (yellow) */
+}
+</style>
+</head>
+<body>
+
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+      <div class="banner-bg"></div>
+      <div class="banner-text">수행과정 연속화와 관리체계 일원화된 형태의 <span class="highlight">전용ㆍ전문 S/W 개발</span> 없이는 미래가 없다.</div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

block-tests/bim-future-statement_flat.md

@@ -0,0 +1,58 @@
+# Frame 1171281207 — BIM 미래 선언 메시지 (pill banner)
+
+> 원본: 3547 × 163 px
+> Scale: × 0.36088 → 1280 × 58.8 px (매우 wide & thin)
+> Node ID: 51:170 (Figma)
+> 패턴 ID (잠정): `statement-pill-highlight`
+> 매우 단순한 단일 메시지 배너
+
+## 계층 경로
+
+```
+Frame 51:170 "Frame 1171281207" (3547 × 163)
+├─ 17:2087 image 3668 (0, 0) 3547 × 163 — 배경 PNG, border-radius 97 (= 163/2 → 완전 캡슐)
+└─ 17:2088 TEXT (205, 33) 2933 × 90
+       center (1671.5, 78), font 80 Bold Noto Sans KR, white
+       text-shadow 0 0 4px rgba(0,0,0,0.5)
+       tracking -0.16px
+       inline span 분리:
+         "수행과정 연속화와 관리체계 일원화된 형태의 " (white)
+         "전용ㆍ전문 S/W 개발" (#fe3 yellow)
+         " 없이는 미래가 없다." (white)
+```
+
+## 이상 탐지 결과
+
+| 검사 | 결과 |
+|------|------|
+| 회전 | 없음 |
+| 좁은 박스 | 없음 |
+| 중복 | 없음 |
+| Vector metadata | N/A |
+
+## 패턴 분류
+
+**새 패턴 발견.** 잠정 ID: `statement-pill-highlight`
+
+특징:
+- pill 모양 (border-radius = height/2)
+- 배경 PNG (어두운 그래프 텍스처)
+- 단일 line 메시지, 일부 span만 highlighted color
+- text-shadow로 가독성 강화
+
+## 변형 가능 축
+
+- text_segments[N]: 인라인 span들 (각각 텍스트 + 색상)
+- bg_image (optional, default: dark texture)
+- text_shadow_color (optional)
+- block_w (zone width), block_h (자동 = font_size × 1.1 or fixed)
+
+## Sub-patterns
+
+없음 (atomic 단순 패턴)
+
+## 자산 매핑
+
+| hash | 의미 |
+|------|------|
+| 527bd780... | bg_dark_texture |

block-tests/bim-goal-circles.html

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>건설산업의 목표 (BIM의 목적) — 원형 다이어그램</title>
+<!--
+  ============================================================
+  Figma → HTML 수학적 변환 (bottom-up)
+  ============================================================
+  원본 Frame: 2195.21 × 1195 px (node 45:14, Frame 1171281189)
+  타겟: 1280 × 720 px (16:9)
+  Scale S = 1280 / 2195.21 = 0.58309
+  스케일 후: 1280 × 696.8 px
+
+  leaf 노드: 48개 (타이틀 2 삭제 → 46개 렌더링)
+  "오른쪽 상단" 그룹 offset: (133, 77) → scaled (77.6, 44.9)
+  ============================================================
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap" rel="stylesheet">
+<style>
+/* S = 0.58309 */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  display: flex; justify-content: center; align-items: center;
+  min-height: 100vh; background: #f5f5f5;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+.slide {
+  width: 1280px; height: 720px; background: #fff;
+  position: relative; display: flex; justify-content: center; align-items: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+}
+/* 블록: 2195.21×1195 → 1280×697 */
+.block {
+  width: 1280px; height: 697px;
+  background: #ffffff; /* 미리보기용 흰색 */
+  position: relative; overflow: hidden;
+}
+
+/* ============================================
+   배경 도형 (4개)
+   OX=133, OY=77 → scaled OX=77.6, OY=44.9
+   ============================================ */
+
+/* 17:1316 Rectangle 42333 — abs(415, 718) 763×351
+   grad(-90deg, transparent 14% → #D5AA89 84%) r=175.5 0 0 175.5
+   → scaled (242, 419) 445×205, r=102 0 0 102 */
+/* 배경 도형: gradient 각도 = 90 - Figma각도
+   border-radius는 PNG에서 확인한 방향 */
+
+/* 래퍼 회전 방식:
+   - 래퍼: pre-rotation 위치/크기 + transform: rotate()
+   - 도형: Figma 값 그대로, 래퍼 채움 */
+
+/* 42335: Figma grad=90° → CSS rotate(-90°) */
+.wrap-42335 {
+  position: absolute;
+  left: 464.5px; top: 154.5px; width: 424px; height: 205px;
+  transform: rotate(-90deg);
+}
+.shape-42335 {
+  width: 100%; height: 100%;
+  border-radius: 102px 0 0 102px;
+  background: linear-gradient(90deg, rgba(217,162,104,1) 37%, rgba(220,103,14,0) 89%);
+}
+
+/* 42334: Figma grad=0° → 회전 없음 */
+.wrap-42334 {
+  position: absolute;
+  left: 671px; top: 420px; width: 381px; height: 206px;
+}
+.shape-42334 {
+  width: 100%; height: 100%;
+  border-radius: 0 0 139px 139px;
+  background: linear-gradient(90deg, rgba(96,164,81,1) 0%, rgba(37,62,31,0) 79%);
+}
+
+/* 42333: Figma grad=-90° → CSS rotate(90°) */
+.wrap-42333 {
+  position: absolute;
+  left: 362px; top: 299px; width: 205px; height: 445px;
+  transform: rotate(90deg);
+}
+.shape-42333 {
+  width: 100%; height: 100%;
+  border-radius: 102px 0 0 102px;
+  background: linear-gradient(90deg, rgba(115,115,115,0) 14%, rgba(213,170,137,1) 84%);
+}
+
+/* 17:1315 배경 이미지 — abs(272, 921) 1768×274
+   → scaled (159, 537) 1031×160 */
+.bg-image {
+  position: absolute;
+  left: 159px; top: 537px; width: 1031px; height: 160px;
+  overflow: hidden;
+}
+.bg-image img {
+  width: 100%; height: 100%; object-fit: cover;
+}
+
+/* ============================================
+   큰 원 공통 (3개)
+   outer: 350→204, inner: 280→163
+   ============================================ */
+.big-circle {
+  position: absolute; width: 204px; height: 204px;
+  border-radius: 50%;
+  mix-blend-mode: multiply; /* Figma blend mode — MCP 미제공, 사용자 확인 */
+}
+.big-circle-inner {
+  position: absolute; width: 163px; height: 163px;
+  border-radius: 50%;
+  border: 2.9px solid #FFF; /* 5×S */
+  box-shadow: 0 0 5.8px 0 rgba(0,0,0,1); /* 10×S */
+}
+.big-circle-text {
+  position: absolute;
+  font-weight: 700; font-size: 29.2px; /* 50×S */
+  line-height: 1; letter-spacing: -0.05em;
+  text-align: center; color: #FFF;
+  padding-bottom: 7px; /* descender 보정 */
+}
+
+/* 생산성 향상 — Group abs(827, 718) → scaled (482, 419) */
+.circle-productivity       { left: 482px; top: 419px; background: linear-gradient(219deg, #D5AA89 14%, #737373 100%); }
+.circle-productivity-inner { left: 502px; top: 439px; background: linear-gradient(154deg, #897445 6%, #3E3523 62%); }
+.circle-productivity-text  { left: 507px; top: 491px; width: 153px; /* 262.92×S */ }
+
+/* 안전과 품질 — Group abs(986, 444) → scaled (575, 259) */
+.circle-safety       { left: 575px; top: 259px; background: linear-gradient(145deg, #FDC69E 5%, #E0782C 50%); }
+.circle-safety-inner { left: 595px; top: 279px; background: linear-gradient(145deg, #BC652B 5%, #A24200 50%); }
+.circle-safety-text  { left: 600px; top: 331px; width: 153px; text-shadow: 0 0 2.9px #CC5200; }
+
+/* 소통과 신뢰 — Group abs(1142, 718) → scaled (666, 419) */
+.circle-comm       { left: 666px; top: 419px; background: linear-gradient(146deg, #FFF 3%, #253E1F 94%); }
+.circle-comm-inner { left: 686px; top: 439px; background: linear-gradient(154deg, #296B55 6%, #123328 62%); }
+.circle-comm-text  { left: 692px; top: 487px; width: 153px; }
+
+/* ============================================
+   작은 원 공통 (6개)
+   outer: 130.9→76, inner: 78.96→46
+   ============================================ */
+.sm-circle {
+  position: absolute; width: 76px; height: 76px;
+  border-radius: 50%;
+  mix-blend-mode: multiply;
+}
+.sm-circle-inner {
+  position: absolute; width: 46px; height: 46px;
+  border-radius: 50%;
+  border: 1.2px solid #FFF; /* 2×S */
+  box-shadow: 0 0 5.8px 0 rgba(0,0,0,1);
+}
+.sm-circle-text {
+  position: absolute;
+  font-weight: 700; font-size: 26.2px; /* 45×S */
+  line-height: 1.111; letter-spacing: -0.05em;
+  text-align: center; color: #FFF;
+  text-shadow: 0 0 2.9px #CC5200;
+}
+
+/* 速 — abs(688, 721) → (401, 420) */
+.sm-speed       { left: 401px; top: 420px; background: linear-gradient(219deg, #D5AA89 14%, #737373 100%); }
+.sm-speed-inner { left: 416px; top: 435px; background: linear-gradient(154deg, #897445 6%, #3E3523 62%); }
+.sm-speed-text  { left: 411px; top: 445px; width: 57px; }
+
+/* 利 — abs(688, 927) → (401, 540) */
+.sm-profit       { left: 401px; top: 540px; background: linear-gradient(219deg, #D5AA89 14%, #737373 100%); }
+.sm-profit-inner { left: 416px; top: 555px; background: linear-gradient(154deg, #897445 6%, #3E3523 62%); }
+.sm-profit-text  { left: 411px; top: 565px; width: 57px; }
+
+/* 安 — abs(992, 260) → (579, 152) */
+.sm-safe       { left: 579px; top: 152px; background: linear-gradient(146deg, #D9C868 3%, #DC670E 94%); }
+.sm-safe-inner { left: 594px; top: 167px; background: linear-gradient(145deg, #BC652B 5%, #A24200 50%); }
+.sm-safe-text  { left: 588px; top: 176px; width: 57px; }
+
+/* 質 — abs(1204, 260) → (702, 152) */
+.sm-quality       { left: 702px; top: 152px; background: linear-gradient(146deg, #D9C868 3%, #DC670E 94%); }
+.sm-quality-inner { left: 717px; top: 167px; background: linear-gradient(145deg, #BC652B 5%, #A24200 50%); }
+.sm-quality-text  { left: 712px; top: 176px; width: 57px; }
+
+/* 通 — abs(1505, 721) → (878, 420) */
+.sm-connect       { left: 878px; top: 420px; background: linear-gradient(146deg, #60A451 3%, #253E1F 94%); }
+.sm-connect-inner { left: 893px; top: 435px; background: linear-gradient(154deg, #296B55 6%, #123328 62%); }
+.sm-connect-text  { left: 887px; top: 445px; width: 57px; }
+
+/* 信 — abs(1505, 927) → (878, 540) */
+.sm-trust       { left: 878px; top: 540px; background: linear-gradient(146deg, #60A451 3%, #253E1F 94%); }
+.sm-trust-inner { left: 893px; top: 555px; background: linear-gradient(154deg, #296B55 6%, #123328 62%); }
+.sm-trust-text  { left: 887px; top: 565px; width: 57px; }
+
+/* 점선 타원 → SVG로 전환 (CSS 제거) */
+
+/* ============================================
+   텍스트 그룹 (6×2 = 12개)
+   제목: 700 40px→23.3px, 설명: 500 30px→17.5px
+   descender 보정: padding-bottom 5px
+   (Noto Sans KR, 23.3px: half_leading = (1-1.448)/2 × 23.3 = -5.22 → pb:6)
+   (17.5px: half_leading = |(1.167-1.448)/2| × 17.5 = 2.46 → pb:3)
+   ============================================ */
+.txt-title {
+  position: absolute;
+  font-weight: 700; font-size: 23.3px; /* 40×S */
+  line-height: 2.375;
+  padding-bottom: 6px;
+  white-space: nowrap;
+  /* Figma에서는 1줄이지만 Chrome에서 글자 넓이 차이로 줄바꿈 발생 방지 */
+}
+.txt-desc {
+  position: absolute;
+  font-weight: 500; font-size: 17.5px; /* 30×S */
+  line-height: 1.167;
+  color: #525151;
+  padding-bottom: 3px;
+}
+
+/* 좌상: 안전성 제고 */
+.txt-safe-t { left: 454px; top: 139px; width: 113px; color: #CC5200; text-align: right; }
+.txt-safe-d { left: 271px; top: 184px; width: 296px; text-align: right; }
+
+/* 우상: 품질 향상 */
+.txt-qual-t { left: 797px; top: 139px; width: 92px; color: #CC5200; text-align: right; }
+.txt-qual-d { left: 797px; top: 184px; width: 296px; text-align: left; }
+
+/* 좌중: 신속ㆍ정확성 증진 */
+.txt-fast-t { left: 78px; top: 405px; width: 310px; color: #604F32; text-align: right; }
+.txt-fast-d { left: 108px; top: 457px; width: 279px; text-align: right; }
+
+/* 우중: 소통ㆍ이해 원할 */
+.txt-comm-t { left: 963px; top: 405px; width: 156px; color: #124133; text-align: left; }
+.txt-comm-d { left: 963px; top: 454px; width: 250px; text-align: left; }
+
+/* 좌하: 비용저감ㆍ부가가치 창출 */
+.txt-cost-t { left: 127px; top: 525px; width: 260px; color: #604F32; text-align: right; }
+.txt-cost-d { left: 137px; top: 567px; width: 250px; text-align: right; }
+
+/* 우하: 신뢰ㆍ투명성 강화 */
+.txt-trust-t { left: 963px; top: 526px; width: 177px; color: #124133; text-align: left; }
+.txt-trust-d { left: 963px; top: 579px; width: 317px; text-align: left; }
+
+</style>
+</head>
+<body>
+
+<div class="slide">
+  <div class="block">
+
+    <!-- ===== Figma 레이어 순서 (뒤→앞) ===== -->
+
+    <!-- 1~4: 배경 도형 (래퍼 회전 방식) + 이미지 -->
+    <div class="wrap-42335"><div class="shape-42335"></div></div>
+    <div class="wrap-42334"><div class="shape-42334"></div></div>
+    <div class="bg-image"><img src="assets/bg_bottom_image.png" alt="bg"></div>
+    <div class="wrap-42333"><div class="shape-42333"></div></div>
+
+    <!-- 5~7: 큰 원 3개 -->
+    <div class="big-circle circle-productivity"></div>
+    <div class="big-circle-inner circle-productivity-inner"></div>
+    <div class="big-circle-text circle-productivity-text">생산성<br>향상</div>
+
+    <div class="big-circle circle-safety"></div>
+    <div class="big-circle-inner circle-safety-inner"></div>
+    <div class="big-circle-text circle-safety-text">안전과<br>품질</div>
+
+    <div class="big-circle circle-comm"></div>
+    <div class="big-circle-inner circle-comm-inner"></div>
+    <div class="big-circle-text circle-comm-text">소통과<br>신뢰</div>
+
+    <!-- 8~13: 텍스트 6그룹 -->
+    <div class="txt-title txt-trust-t">신뢰ㆍ투명성 강화</div>
+    <div class="txt-desc txt-trust-d">3D 모델을 통한 오류<br>최소화 및 Claim 예방</div>
+    <div class="txt-title txt-comm-t">소통ㆍ이해 원할</div>
+    <div class="txt-desc txt-comm-d">성과품, Solution을 통한<br>사용 편리성, 협업 및 의사소통 강화</div>
+    <div class="txt-title txt-fast-t">신속ㆍ정확성 증진</div>
+    <div class="txt-desc txt-fast-d">Analogue 기반 업무를<br>Digital화 하는 Process 혁신</div>
+    <div class="txt-title txt-cost-t">비용저감ㆍ부가가치 창출</div>
+    <div class="txt-desc txt-cost-d">건설비용 및 유지관리비 감소,<br>인력투입 최소화 등 생산성 향상</div>
+    <div class="txt-title txt-qual-t">품질 향상</div>
+    <div class="txt-desc txt-qual-d">Copy &amp; Paste로 하향 평준화된<br>기존 성과물의 품질 향상</div>
+    <div class="txt-title txt-safe-t">안전성 제고</div>
+    <div class="txt-desc txt-safe-d">시설물의 요구성능의 만족,<br>건설중 및 운영중 안전확보</div>
+
+    <!-- 14~15: 커브 599, 597 -->
+    <img src="assets/ellipse_599.svg" style="position:absolute;left:617px;top:217px;width:122px;height:58px;">
+    <img src="assets/ellipse_597.svg" style="position:absolute;left:443px;top:459px;width:58px;height:122px;">
+
+    <!-- 16~17: 작은원 速, 利 -->
+    <div class="sm-circle sm-speed"></div>
+    <div class="sm-circle-inner sm-speed-inner"></div>
+    <div class="sm-circle-text sm-speed-text">速</div>
+    <div class="sm-circle sm-profit"></div>
+    <div class="sm-circle-inner sm-profit-inner"></div>
+    <div class="sm-circle-text sm-profit-text">利</div>
+
+    <!-- 18: 커브 600 (速/利 위에!) -->
+    <img src="assets/ellipse_600.svg" style="position:absolute;left:853px;top:459px;width:58px;height:122px;">
+
+    <!-- 19~22: 작은원 安, 質, 通, 信 -->
+    <div class="sm-circle sm-safe"></div>
+    <div class="sm-circle-inner sm-safe-inner"></div>
+    <div class="sm-circle-text sm-safe-text">安</div>
+    <div class="sm-circle sm-quality"></div>
+    <div class="sm-circle-inner sm-quality-inner"></div>
+    <div class="sm-circle-text sm-quality-text">質</div>
+    <div class="sm-circle sm-connect"></div>
+    <div class="sm-circle-inner sm-connect-inner"></div>
+    <div class="sm-circle-text sm-connect-text">通</div>
+    <div class="sm-circle sm-trust"></div>
+    <div class="sm-circle-inner sm-trust-inner"></div>
+    <div class="sm-circle-text sm-trust-text">信</div>
+
+    <!-- 텍스트: 우하 신뢰ㆍ투명성 -->
+    <div class="txt-title txt-trust-t">신뢰ㆍ투명성 강화</div>
+    <div class="txt-desc txt-trust-d">3D 모델을 통한 오류<br>최소화 및 Claim 예방</div>
+
+  </div>
+</div>
+
+</body>
+</html>

block-tests/bim-goals-3circles.html

@@ -0,0 +1,475 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>BIM 목표 3원 블록 (Frame 1171281211) — Pure CSS</title>
+<!--
+  ============================================================
+  Figma → HTML 수학적 변환 (bottom-up, Pure CSS 버전)
+  ============================================================
+  원본 Frame: 2062.205 × 956.998 px  (node 66:310, Frame 1171281211)
+  타겟 슬라이드: 1280 × 720 px  (16:9)
+  Scale factor S = 1280 / 2062.205 = 0.620694
+  블록 높이 = 956.998 × S ≈ 594 px
+
+  구현 전략:
+  1. CSS `transform: scale(0.620694)` 균일 축소 — 내부는 Figma 원본 좌표계(2062×957) 그대로
+  2. 모든 원은 **순수 HTML div + linear-gradient + mix-blend-mode: multiply**
+     - SVG 파일 의존 제거
+     - 블렌드는 브라우저 호환 가능한 multiply (원본 plus-darker는 Safari 전용)
+  3. 곡선 아크 3개만 SVG img로 유지 (CSS로 곡선 불가)
+  4. 배경 텍스처는 PNG img (실사 이미지)
+
+  그라데이션 수학적 도출:
+    SVG `<linearGradient x1 y1 x2 y2 gradientUnits="userSpaceOnUse">` 를
+    CSS `linear-gradient(Ndeg, color P%, color Q%)` 로 변환:
+      - 각도 = atan2(dy, dx) + 90° (SVG y-down → CSS from-12-o'clock-CW)
+      - stop % = 박스 중심의 t_center 기준 (L_css / 2) / L_svg 범위로 정규화
+    계산 코드: 본 프로젝트 내 Python svg_to_css() 스크립트 참조
+
+  플래튼 목록: frame_1171281211_flat.md
+  ============================================================
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&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;       /* 한글 단어 단위 줄바꿈 (전역 default) */
+}
+
+.slide {
+  width: 1280px; height: 720px;
+  background: #ffffff;
+  position: relative;
+  display: flex; justify-content: center; align-items: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+}
+
+.block {
+  width: 1280px;
+  height: 593.96px;       /* 957 × 0.620694 */
+  background: #ffffff;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Figma 원본 좌표계 유지, CSS transform으로 균일 축소 */
+.inner {
+  position: absolute;
+  left: 0; top: 0;
+  width: 2062.205px;
+  height: 956.998px;
+  transform: scale(0.620694);
+  transform-origin: top left;
+}
+
+/* ─────────────────────────────────────────────────────────
+   레이어 1 — 배경 이미지 (실사 텍스처)
+   ───────────────────────────────────────────────────────── */
+.bg-texture {
+  position: absolute;
+  left: 139px; top: 683px;
+  width: 1768px; height: 274px;
+  mix-blend-mode: multiply;
+  pointer-events: none;
+  z-index: 0;
+}
+.bg-texture img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+/* ─────────────────────────────────────────────────────────
+   레이어 2 — 회전 그라데이션 데코 (66:306 → 66:309 → 64:245)
+   순수 CSS: gradient + border-radius + nested transforms
+   ───────────────────────────────────────────────────────── */
+.deco-wrap {
+  position: absolute;
+  left: 71px; top: 38px;
+  width: 685.475px; height: 836.277px;
+  display: flex; align-items: center; justify-content: center;
+  pointer-events: none;
+  z-index: 1;
+}
+.deco-rot  { flex: none; transform: rotate(-120deg); }
+.deco-flip { transform: scaleY(-1); }
+.deco-rect {
+  width: 763px; height: 351px;
+  border-radius: 175.5px 0 0 175.5px;
+  background: linear-gradient(235.162deg,
+    rgba(115,115,115,0) 14.18%,
+    rgba(213,170,137,0.33) 66.964%);
+}
+
+/* ─────────────────────────────────────────────────────────
+   레이어 3 — 연결 아크 3개 (SVG img, 곡선 CSS 불가)
+   ───────────────────────────────────────────────────────── */
+.arc { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; }
+.arc img { display: block; flex: none; }
+
+.arc--top   { left: 926px;  top: 134px; width: 209px; height: 99px; }
+.arc--top img { width: 209px; height: 99px; transform: rotate(180deg); }
+
+.arc--left  { left: 627px;  top: 549px; width: 99px;  height: 209px; }
+.arc--left img { width: 209px; height: 99px; transform: rotate(90deg); }
+
+.arc--right { left: 1329px; top: 549px; width: 99px;  height: 209px; }
+.arc--right img { width: 209px; height: 99px; transform: rotate(-90deg); }
+
+/* ─────────────────────────────────────────────────────────
+   레이어 4 — 메인 3원 (순수 CSS div, mix-blend-mode)
+
+   각 원 = outer 350×350 + inner ring (280 또는 290 w/ border)
+   outer: linear-gradient + mix-blend-mode: multiply
+   inner: linear-gradient + 5px white border (box-sizing border-box)
+          + box-shadow (SVG drop-shadow stdDev 5 근사: 0 0 10px black)
+   ───────────────────────────────────────────────────────── */
+.big-outer {
+  position: absolute;
+  width: 350px; height: 350px;
+  border-radius: 50%;
+  /* Figma plus-darker → CSS multiply (Safari 외 호환) */
+  mix-blend-mode: multiply;
+  z-index: 3;
+}
+
+.big-outer--safety {
+  left: 853px; top: 206px;
+  background: linear-gradient(145.28deg, #FDC69E 16.04%, #E0782C 55.20%);
+}
+.big-outer--prod {
+  left: 694px; top: 480px;
+  background: linear-gradient(218.84deg, #D5AA89 14.08%, #737373 92.67%);
+}
+.big-outer--trust {
+  left: 1009px; top: 480px;
+  background: linear-gradient(145.90deg, #FFFFFF 8.47%, #253E1F 87.56%);
+}
+
+/* inner ring: 안전과 품질은 stroke가 fill 바깥 → 290 border-box */
+.big-ring {
+  position: absolute;
+  border-radius: 50%;
+  box-shadow: 0 0 10px 0 rgba(0,0,0,1);   /* SVG feGaussianBlur stdDev 5 ≈ CSS blur 10px */
+  z-index: 4;
+}
+
+.big-ring--safety {
+  /* Figma (887.06, 240.06) 280×280 → 290×290 at (-5,-5) (stroke 5 outside) */
+  left: 882.06px; top: 235.06px;
+  width: 290px; height: 290px;
+  border: 5px solid #FFFFFF;
+  /* 그라데이션은 fill 영역 280×280에 매핑 (padding-box 기본값) */
+  background: linear-gradient(145.28deg, #BC652B 16.04%, #A24200 55.20%);
+}
+
+/* 생산성/소통 ring: stroke가 fill 내부 → 280×280 그대로, 그라데이션은 border-box 포함 */
+.big-ring--prod {
+  left: 728.06px; top: 514.06px;
+  width: 280px; height: 280px;
+  border: 5px solid #FFFFFF;
+  background: linear-gradient(153.95deg, #897445 15.27%, #3E3523 61.74%);
+  background-origin: border-box;
+  background-clip: border-box;
+}
+.big-ring--trust {
+  left: 1043.06px; top: 514.06px;
+  width: 280px; height: 280px;
+  border: 5px solid #FFFFFF;
+  background: linear-gradient(153.95deg, #296B55 15.27%, #123328 61.74%);
+  background-origin: border-box;
+  background-clip: border-box;
+}
+
+/* 메인 원 라벨 (50px Bold 흰색, 2줄) */
+.big-title {
+  position: absolute;
+  width: 262.923px; height: 114.078px;
+  font-weight: 700;
+  font-size: 50px;
+  line-height: 50px;
+  color: #ffffff;
+  text-align: center;
+  letter-spacing: -2.5px;
+  display: flex; flex-direction: column; justify-content: center;
+  z-index: 5;
+}
+.big-title p { line-height: 50px; }
+.big-title--safety { left: 896.46px; top: 330.49px; text-shadow: 0 0 5px #cc5200; }
+.big-title--prod   { left: 737.46px; top: 604.49px; }
+.big-title--trust  { left: 1053.63px; top: 597.45px; }
+
+/* ─────────────────────────────────────────────────────────
+   레이어 5 — 액센트 6원 (순수 CSS)
+
+   outer 130.9 (fill-opacity 0.3 → rgba alpha 또는 opacity)
+        + mix-blend-mode: multiply
+   inner 82.96 (= fill 78.96 + 2px outer stroke)
+        + white 2px border + box-shadow
+   ───────────────────────────────────────────────────────── */
+.acc-outer {
+  position: absolute;
+  width: 130.901px; height: 130.901px;
+  border-radius: 50%;
+  opacity: 0.3;           /* fill-opacity 0.3 */
+  mix-blend-mode: multiply;
+  z-index: 6;
+}
+.acc-inner {
+  position: absolute;
+  width: 82.965px; height: 82.965px;        /* fill 78.96 + stroke 2×2 */
+  border: 2px solid #FFFFFF;
+  border-radius: 50%;
+  box-shadow: 0 0 10px 0 rgba(0,0,0,1);
+  z-index: 7;
+}
+
+/* outer 위치는 Figma 좌표 그대로, inner는 offset -2 (stroke 외부) */
+.acc-outer--an   { left: 859px;  top: 22px;
+  background: linear-gradient(145.90deg, #D9C868 8.47%, #DC670E 87.56%); }
+.acc-outer--jil  { left: 1071px; top: 22px;
+  background: linear-gradient(145.90deg, #D9C868 8.47%, #DC670E 87.56%); }
+.acc-outer--sok  { left: 555px;  top: 483px;
+  background: linear-gradient(218.84deg, #D5AA89 14.08%, #737373 92.67%); }
+.acc-outer--ri   { left: 555px;  top: 689px;
+  background: linear-gradient(218.84deg, #D5AA89 14.08%, #737373 92.67%); }
+.acc-outer--tong { left: 1372px; top: 483px;
+  background: linear-gradient(145.90deg, #60A451 8.47%, #253E1F 87.56%); }
+.acc-outer--sin  { left: 1372px; top: 689px;
+  background: linear-gradient(145.90deg, #60A451 8.47%, #253E1F 87.56%); }
+
+/* inner: outer + 25.97 (= (130.9-78.96)/2) - 2 (stroke) = +23.97 */
+.acc-inner--an   { left: 882.47px; top: 45.47px;
+  background: linear-gradient(145.28deg, #BC652B 16.04%, #A24200 55.20%); }
+.acc-inner--jil  { left: 1094.47px; top: 45.47px;
+  background: linear-gradient(145.28deg, #BC652B 16.04%, #A24200 55.20%); }
+.acc-inner--sok  { left: 578.47px;  top: 506.47px;
+  background: linear-gradient(153.95deg, #897445 15.27%, #3E3523 61.73%); }
+.acc-inner--ri   { left: 578.47px;  top: 712.47px;
+  background: linear-gradient(153.95deg, #897445 15.27%, #3E3523 61.73%); }
+.acc-inner--tong { left: 1395.47px; top: 506.47px;
+  background: linear-gradient(153.95deg, #296B55 15.27%, #123328 61.73%); }
+.acc-inner--sin  { left: 1395.47px; top: 712.47px;
+  background: linear-gradient(153.95deg, #296B55 15.27%, #123328 61.73%); }
+
+/* 한자 텍스트 (font 45 bold white, lh 50, tracking -2.25, text-shadow) */
+.acc-text {
+  position: absolute;
+  width: 98.334px; height: 42.666px;
+  font-weight: 700;
+  font-size: 45px;
+  line-height: 50px;
+  color: #ffffff;
+  text-align: center;
+  letter-spacing: -2.25px;
+  text-shadow: 0 0 5px #cc5200;
+  display: flex; align-items: center; justify-content: center;
+  z-index: 8;
+}
+.acc-text--an   { left: 875.25px;  top: 63.60px; }
+.acc-text--jil  { left: 1087.25px; top: 63.60px; }
+.acc-text--sok  { left: 571.25px;  top: 524.60px; }
+.acc-text--ri   { left: 571.25px;  top: 730.60px; }
+.acc-text--tong { left: 1388.25px; top: 524.60px; }
+.acc-text--sin  { left: 1388.25px; top: 730.60px; }
+
+/* ─────────────────────────────────────────────────────────
+   레이어 6 — 사이드 텍스트 라벨 (상/좌/우 12개)
+   ───────────────────────────────────────────────────────── */
+
+/* 상단 타이틀 orange #cc5200 */
+.lbl-top-title {
+  position: absolute;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 95px;
+  color: #cc5200;
+  white-space: nowrap;
+  top: 0;
+  z-index: 5;
+}
+.title--safety-top  { left: 645px;  width: 194px;  text-align: right; }
+.title--quality-top { left: 1233px; width: 157px;  text-align: right; }
+
+/* 상단 desc */
+.lbl-top-desc {
+  position: absolute;
+  font-weight: 500;
+  font-size: 30px;
+  color: #525151;
+  top: 78px;
+  z-index: 5;
+}
+.lbl-top-desc p { line-height: 35px; padding-bottom: 5px; }
+.desc--safety-top  { left: 331px;  width: 508.478px; text-align: right; }
+.desc--quality-top { left: 1233px; width: 508.478px; }
+
+/* 좌측 타이틀 olive #604f32 */
+.lbl-left-title {
+  position: absolute;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 95px;
+  color: #604f32;
+  text-align: right;
+  z-index: 5;
+}
+.title--speed  { left: 0; top: 456px; width: 531.393px; height: 95.345px; white-space: nowrap; }
+.title--profit {
+  left: 84.67px; top: 661.79px; width: 446.049px; height: 96.418px;
+  display: flex; flex-direction: column; justify-content: center;
+}
+
+/* 좌측 desc */
+.lbl-left-desc {
+  position: absolute;
+  font-weight: 500;
+  font-size: 30px;
+  color: #525151;
+  text-align: right;
+  z-index: 5;
+}
+.lbl-left-desc p { line-height: 35px; padding-bottom: 5px; }
+.desc--speed  { left: 52.01px;  top: 546px; width: 478.731px; height: 70.561px; }
+.desc--profit {
+  left: 102.02px; top: 734px; width: 428.315px; height: 91.343px;
+  display: flex; flex-direction: column; justify-content: center;
+}
+
+/* 우측 타이틀 green #124133 */
+.lbl-right-title {
+  position: absolute;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 95px;
+  color: #124133;
+  white-space: nowrap;
+  z-index: 5;
+}
+.title--comm       { left: 1518px; top: 456px; width: 267.016px; }
+.title--trust-side { left: 1518px; top: 664px; width: 304.016px; }
+
+/* 우측 desc */
+.lbl-right-desc {
+  position: absolute;
+  font-weight: 500;
+  font-size: 30px;
+  color: #525151;
+  z-index: 5;
+}
+.lbl-right-desc p { line-height: 35px; padding-bottom: 5px; }
+.desc--comm { left: 1518px; top: 541px; width: 429.012px; white-space: nowrap; }
+.desc--trust-desc {
+  left: 1518px; top: 754.21px; width: 544.198px; height: 70.561px;
+  display: flex; flex-direction: column; justify-content: center;
+}
+</style>
+</head>
+<body>
+
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <!-- ═══ 배경 ═══ -->
+      <div class="bg-texture"><img src="assets/frame_1171281211/bg_texture.png" alt=""></div>
+
+      <div class="deco-wrap">
+        <div class="deco-rot">
+          <div class="deco-flip">
+            <div class="deco-rect"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══ 아크 3개 (SVG) ═══ -->
+      <div class="arc arc--top"><img src="assets/frame_1171281211/arc_top.png" alt=""></div>
+      <div class="arc arc--left"><img src="assets/frame_1171281211/arc_side.png" alt=""></div>
+      <div class="arc arc--right"><img src="assets/frame_1171281211/arc_side.png" alt=""></div>
+
+      <!-- ═══ 메인 3원 (순수 CSS) ═══ -->
+      <div class="big-outer big-outer--safety"></div>
+      <div class="big-ring  big-ring--safety"></div>
+
+      <div class="big-outer big-outer--prod"></div>
+      <div class="big-ring  big-ring--prod"></div>
+
+      <div class="big-outer big-outer--trust"></div>
+      <div class="big-ring  big-ring--trust"></div>
+
+      <!-- 메인 원 타이틀 -->
+      <div class="big-title big-title--safety"><p>안전과</p><p>품질</p></div>
+      <div class="big-title big-title--prod"><p>생산성</p><p>향상</p></div>
+      <div class="big-title big-title--trust"><p>소통과</p><p>신뢰</p></div>
+
+      <!-- ═══ 액센트 6원 (순수 CSS) ═══ -->
+      <div class="acc-outer acc-outer--an"></div>
+      <div class="acc-inner acc-inner--an"></div>
+      <div class="acc-text  acc-text--an">安</div>
+
+      <div class="acc-outer acc-outer--jil"></div>
+      <div class="acc-inner acc-inner--jil"></div>
+      <div class="acc-text  acc-text--jil">質</div>
+
+      <div class="acc-outer acc-outer--sok"></div>
+      <div class="acc-inner acc-inner--sok"></div>
+      <div class="acc-text  acc-text--sok">速</div>
+
+      <div class="acc-outer acc-outer--ri"></div>
+      <div class="acc-inner acc-inner--ri"></div>
+      <div class="acc-text  acc-text--ri">利</div>
+
+      <div class="acc-outer acc-outer--tong"></div>
+      <div class="acc-inner acc-inner--tong"></div>
+      <div class="acc-text  acc-text--tong">通</div>
+
+      <div class="acc-outer acc-outer--sin"></div>
+      <div class="acc-inner acc-inner--sin"></div>
+      <div class="acc-text  acc-text--sin">信</div>
+
+      <!-- ═══ 사이드 텍스트 (상단) ═══ -->
+      <div class="lbl-top-title title--safety-top">안전성 제고</div>
+      <div class="lbl-top-desc desc--safety-top">
+        <p>시설물의 요구성능의 만족,</p>
+        <p>건설중 및 운영중 안전확보</p>
+      </div>
+      <div class="lbl-top-title title--quality-top">품질 향상</div>
+      <div class="lbl-top-desc desc--quality-top">
+        <p>Copy &amp; Paste로 하향 평준화된</p>
+        <p>기존 성과물의 품질 향상</p>
+      </div>
+
+      <!-- ═══ 사이드 텍스트 (좌측) ═══ -->
+      <div class="lbl-left-title title--speed">신속ㆍ정확성 증진</div>
+      <div class="lbl-left-desc desc--speed">
+        <p>Analogue 기반 업무를</p>
+        <p>Digital화 하는 Process 혁신</p>
+      </div>
+      <div class="lbl-left-title title--profit"><p>비용저감ㆍ부가가치 창출</p></div>
+      <div class="lbl-left-desc desc--profit">
+        <p>건설비용 및 유지관리비 감소,</p>
+        <p>인력투입 최소화 등 생산성 향상</p>
+      </div>
+
+      <!-- ═══ 사이드 텍스트 (우측) ═══ -->
+      <div class="lbl-right-title title--comm">소통ㆍ이해 원할</div>
+      <div class="lbl-right-desc desc--comm">
+        <p>성과품, Solution을 통한</p>
+        <p>사용 편리성, 협업 및 의사소통 강화</p>
+      </div>
+      <div class="lbl-right-title title--trust-side">신뢰ㆍ투명성 강화</div>
+      <div class="lbl-right-desc desc--trust-desc">
+        <p>3D 모델을 통한 오류</p>
+        <p>최소화 및 Claim 예방</p>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

block-tests/bim-info-products.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>시공상세 정보물 (Frame 1171281180)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@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; padding: 20px;
+  word-break: keep-all;
+}
+.slide {
+  width: 1280px; height: 657px;
+  background: #fff;
+  position: relative;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+}
+.block {
+  width: 1280px; height: 657px;
+  position: relative; overflow: hidden;
+}
+/* Scale UP: 원본이 1153로 1280보다 작음. 확대. */
+.inner {
+  position: absolute; left: 0; top: 0;
+  width: 1153px; height: 591.92px;
+  transform: scale(1.11014);
+  transform-origin: top left;
+}
+
+/* 타이틀 배경 bar */
+.title-bar {
+  position: absolute;
+  left: 12px; top: 47px;
+  width: 1141px; height: 29px;
+  background: #fbd5b9;
+  border-radius: 5px;
+  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
+}
+
+/* 타이틀 텍스트 */
+.title-text {
+  position: absolute;
+  left: 53px; top: 0;
+  width: 1078px; height: 76px;
+  font-weight: 700;
+  font-size: 43px;
+  line-height: 76px;
+  color: #144838;
+  text-align: center;
+  letter-spacing: -2.25px;
+  white-space: nowrap;
+}
+.title-text .hl {
+  font-weight: 900;
+  font-size: 50px;
+  background-image: linear-gradient(90deg, #cc5200 0%, #cc5200 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* 좌측 원호 장식 */
+.left-arc {
+  position: absolute;
+  left: 12px; top: 117px;
+  width: 200.7px; height: 474.92px;
+}
+.left-arc img { width: 105%; height: 103%; display: block; }
+
+/* 좌측 세로 라벨 */
+.left-label {
+  position: absolute;
+  left: 0; top: 228px;
+  width: 125px; height: 228px;
+  font-weight: 700;
+  font-size: 45px;
+  line-height: 76px;
+  color: #144838;
+  text-align: center;
+  text-shadow: 0 4px 4px rgba(0,0,0,0.25);
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* 아이템 rows */
+.item-row {
+  position: absolute;
+  height: 70px;
+  background: rgba(255,255,255,0.5);
+  border-radius: 30px;
+  box-shadow: 2px 4px 5px rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 10px 20px;
+  border-bottom-width: 3px;
+  border-bottom-style: solid;
+}
+.item-row .arrow {
+  flex: none;
+  width: 16.8px; height: 22.4px;
+  transform: rotate(-90deg);
+}
+.item-row .arrow img { width: 100%; height: 100%; }
+.item-row .text {
+  font-weight: 500;
+  font-size: 38px;
+  line-height: 75px;
+  color: #000;
+  letter-spacing: -1.14px;
+  white-space: nowrap;
+}
+
+/* 각 row 위치 + border 색 (Figma 좌표 그대로) */
+.item-1 { left: 65px;  top: 128.89px; width: 1088px; border-bottom-color: #fb5915; }
+.item-2 { left: 137px; top: 220.89px; width: 1016px; border-bottom-color: #e79000; }
+.item-3 { left: 166px; top: 318.89px; width: 987px;  border-bottom-color: #e9a804; }
+.item-4 { left: 137px; top: 420.89px; width: 1016px; border-bottom-color: #919f00; }
+.item-5 { left: 65px;  top: 508.89px; width: 1088px; border-bottom-color: #0d6361; }
+</style>
+</head>
+<body>
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <div class="title-bar"></div>
+      <div class="title-text">시공 전  모델 기반 <span class="hl">시공상세 정보물</span> 이용한 시공계획 작성 지원</div>
+
+      <div class="left-arc"><img src="assets/shared/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg" alt=""></div>
+      <div class="left-label">시공<br>상세<br>정보물</div>
+
+      <div class="item-row item-1">
+        <div class="arrow"><img src="assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
+        <div class="text">3차원 형상의 정보 모델과 Data Base (D/B)</div>
+      </div>
+
+      <div class="item-row item-2">
+        <div class="arrow"><img src="assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
+        <div class="text">목적물, 가시설 등의 단계별 시공 시뮬레이션</div>
+      </div>
+
+      <div class="item-row item-3">
+        <div class="arrow"><img src="assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
+        <div class="text">시공 및 안전교육에 도움이 되는 영상물 등 성과물</div>
+      </div>
+
+      <div class="item-row item-4">
+        <div class="arrow"><img src="assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
+        <div class="text">모델 또는 D/B, 시뮬레이션으로 부터 추출한 도면</div>
+      </div>
+
+      <div class="item-row item-5">
+        <div class="arrow"><img src="assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
+        <div class="text">모델에서 추출이 곤란한 안전, 유의사항, 개념도 등 상세 표현 도면</div>
+      </div>
+
+    </div>
+  </div>
+</div>
+</body>
+</html>

block-tests/bim-info-products_flat.md

@@ -0,0 +1,27 @@
+# Frame 1171281180 — 시공상세 정보물 (stacked arrow list)
+
+> 원본: 1153 × 591.92 px
+> Scale: × 1.11014 → 1280 × 657 px (슬라이드 720 내에 fit)
+> Node ID: 45:5 (Figma)
+> 패턴 ID: `stacked-arrow-list`
+
+## 구조
+
+- 타이틀 (gradient text "시공상세 정보물" highlighted, 배경 bar)
+- 5개 pill-row: 각각 다른 색 border-bottom + 화살표 마커 + 텍스트
+- 좌측 원호 장식 SVG ("시공 상세 정보물" 세로 텍스트)
+- 각 row의 width와 left가 계단식으로 변화 (indent)
+
+## 변형 가능 축
+
+- items[N=3~8]: { text, border_color }
+- title_segments[]: { text, highlight? }
+- left_decoration (optional, SVG arc)
+- left_label (optional, 세로 텍스트)
+
+## 자산
+
+| hash | 의미 |
+|------|------|
+| ff649c28... | left_arc_decoration (SVG) |
+| 29c778b5... | arrow_marker (SVG) |

block-tests/bim-issues-paired.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>현황 및 문제점 (Frame 1171281194)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&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; padding: 20px;
+  word-break: keep-all;
+}
+.slide {
+  width: 1280px; height: 913.5px;
+  background: #fff;
+  position: relative;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+}
+.block { width: 1280px; height: 913.5px; position: relative; overflow: hidden; }
+.inner {
+  position: absolute; left: 0; top: 0;
+  width: 1857px; height: 1325.62px;
+  transform: scale(0.689285);
+  transform-origin: top left;
+}
+
+/* 헤더 */
+.header {
+  position: absolute; left: 0; top: 0;
+  display: flex; align-items: center; gap: 15px; height: 101px;
+}
+.header-icon { width: 50px; height: 50px; }
+.header-icon img { width: 100%; height: 100%; object-fit: cover; }
+.header-title {
+  font-weight: 700; font-size: 70px; line-height: normal; white-space: nowrap;
+  background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  text-shadow: 0 0 4px #322c1e;
+}
+
+/* row-box */
+.row-box {
+  position: absolute;
+  left: 60px; width: 1797px;
+  border: 3px solid #60a451;
+  border-radius: 30px;
+  background: rgba(250, 237, 203, 0.15);
+}
+
+/* 점선 */
+.row-divider {
+  position: absolute;
+  left: 945px; width: 0; height: 195px;
+  border-left: 1px dashed rgba(96, 164, 81, 0.4);
+}
+
+/* 텍스트 */
+.pair-text {
+  position: absolute;
+  font-weight: 500; font-size: 36px; line-height: 65px;
+  color: #0c271e;
+  word-break: keep-all;
+  z-index: 3;
+}
+.pair-text.left { left: 95.28px; width: 829.93px; }
+.pair-text.right { left: 958.01px; width: 867.9px; text-align: right; }
+
+/* pill — absolute, Figma 좌표 그대로, row-box 밖으로 걸침
+   두루마리 형태: 이미지(R16 프레임 배치) — crop/프레임이므로 이미지 유지 */
+.label-pill {
+  position: absolute;
+  width: 457.96px;
+  height: 95.62px;
+  overflow: hidden;
+  z-index: 1;
+}
+/* 상단 pill 이미지 배치 (R16) */
+.label-pill.left-pill img {
+  position: absolute;
+  top: 0;
+  left: -45.3%;
+  width: 145.3%;
+  height: 100%;
+}
+.label-pill.right-pill img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 151.25%;
+  height: 100%;
+}
+/* 하단 pill: rotate(180) + 이미지 배치 반전 (R16) */
+.label-pill.bottom.left-pill img {
+  left: 0;
+  width: 151.25%;
+}
+.label-pill.bottom.right-pill img {
+  left: -45.3%;
+  width: 145.3%;
+}
+.label-pill .text {
+  position: absolute; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: 40px; color: #fff;
+  line-height: 70px; white-space: nowrap; z-index: 2;
+}
+.label-pill.bottom { transform: rotate(180deg); }
+.label-pill.bottom .text { transform: rotate(180deg); }
+</style>
+</head>
+<body>
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <!-- 헤더 -->
+      <div class="header">
+        <div class="header-icon"><img src="assets/shared/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" alt=""></div>
+        <div class="header-title">현황 및 문제점</div>
+      </div>
+
+      <!-- Row 1: 개념 부재 / 잘못된 접근방식 — pills top -->
+      <div class="row-box" style="top:143px; height:229px;"></div>
+      <div class="row-divider" style="top:160px;"></div>
+      <div class="pair-text left" style="top:228px;">BIM을 Digital 전환의 개념이 아닌, CAD의 확장판으로 해석하여 3D를 그리는 수단 정도로만 인식</div>
+      <div class="pair-text right" style="top:228px;">단순 업무효율 증진을 위한 도구로만 인식하여, 기술자들이 도구로서 사용만 할 수 있도록 교육시키면 된다고 판단</div>
+      <div class="label-pill left-pill" style="left:60px; top:124px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">개념 부재</div></div>
+      <div class="label-pill right-pill" style="left:1399.04px; top:124px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">잘못된 접근방식</div></div>
+
+      <!-- Row 2: 방향성 상실 / 전제조건 오류 — pills bottom -->
+      <div class="row-box" style="top:372px; height:231px;"></div>
+      <div class="row-divider" style="top:387px;"></div>
+      <!-- TEMP: 1:1 fidelity — Chrome Noto Sans KR 너비 보정. 템플릿화 시 제거 -->
+      <div class="pair-text left" style="top:389px; letter-spacing:-0.8px;">대형 S/W 개발 및 판매회사에서 제시된 내용과 방향대로 따라하므로써, 국내는 자체적 목표설정 기능을 상실</div>
+      <div class="pair-text right" style="top:389px;">건축과 토목이 유사하다는 전제하에 Library를 활용하는 건축에서 수행하고 있는 방식을 토목에도 동일하게 적용</div>
+      <div class="label-pill bottom left-pill" style="left:60px; top:522px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">방향성 상실</div></div>
+      <div class="label-pill bottom right-pill" style="left:1399.04px; top:526.43px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">전제조건 오류</div></div>
+
+      <!-- Row 3: 수행주체 혼란 / 수행방식 무지 — pills top -->
+      <div class="row-box" style="top:706px; height:310px;"></div>
+      <div class="row-divider" style="top:791px;"></div>
+      <div class="pair-text left" style="top:801px;">학자, 발주처 중심으로 S/W 판매회사에서 제시한 기술 수행 방식의 변화를 주도, 실행주체인 기업과 기술자들은 기존의 방식을 고수하면서 눈치만 보는 실정</div>
+      <div class="pair-text right" style="top:801px;">기존 2D 설계의 결과가 옳다는 전제와 3D 설계를 수행/검토해본 경험이 없어, 전환설계의 개념으로 수행하므로써 비용과 시간이 추가로 소요, 높은 수준의 품질확보 불가</div>
+      <div class="label-pill left-pill" style="left:60px; top:687px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">수행주체 혼란</div></div>
+      <div class="label-pill right-pill" style="left:1399.04px; top:687px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">수행방식 무지</div></div>
+
+      <!-- Row 4: 외산S/W 기술예속 / H/W 미비 — pills bottom -->
+      <div class="row-box" style="top:1016px; height:290px;"></div>
+      <div class="row-divider" style="top:1036px;"></div>
+      <div class="pair-text left" style="top:1031px;">단순 외산 범용S/W만 사용하면 BIM이 될 수 있을 것이라는 안일한 생각으로 접근하므로 외국 대형S/W 회사에 기술예속 가속</div>
+      <!-- TEMP: 1:1 fidelity — Chrome Noto Sans KR 너비 보정. 템플릿화 시 제거 -->
+      <div class="pair-text right" style="top:1031px; letter-spacing:-1.2px;">도면작성 중심의 기존 설계방식과 동일한 개념으로 생각하여, 탁상용 개인 PC, Monitor 사용기반 정도에 머물러 있어 실무적용에 필요한 높은 수준의 모델 등의 표출은 한계</div>
+      <div class="label-pill bottom left-pill" style="left:60px; top:1226.08px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">외산S/W 기술예속</div></div>
+      <div class="label-pill bottom right-pill" style="left:1399.04px; top:1226px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">H/W 미비</div></div>
+
+    </div>
+  </div>
+</div>
+</body>
+</html>

block-tests/bim-issues-paired_flat.md

@@ -0,0 +1,32 @@
+# Frame 1171281194 — 현황 및 문제점 (paired issues rows)
+
+> 원본: 1857 × 1325.62 px
+> Scale: × 0.689285 → 1280 × 913.5 px
+> Node ID: 45:19 (Figma)
+> 패턴 ID: `issues-paired-rows`
+
+## 구조
+
+4개 행, 각 행 = rounded box (border 3px green) + 좌 본문 + 우 본문 + 가운데 세로선 + 좌 label pill + 우 label pill
+
+pill 위치: 행 1,3 = 상단 좌/우, 행 2,4 = 하단 좌/우 (교차)
+
+## 변형 가능 축
+
+- rows[N=2~8]
+  - left: { label, body_text }
+  - right: { label, body_text }
+  - pill_position: top | bottom (교차 또는 고정)
+- header: { icon, title } (optional)
+
+## Sub-patterns
+
+없음
+
+## 자산
+
+| hash | 의미 | 재사용 |
+|------|------|------|
+| b0e9fad5... | header_icon | ✓ (1195에서 등록) |
+| b47d2977... | label_pill_bg | NEW |
+| b614390a... | vertical_divider_svg | NEW |

block-tests/bim-issues-quadrant.html

@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>BIM 수행실정 (Frame 1171281193)</title>
+<!--
+  Frame: 45:18, 2226×1766 px
+  Scale: 1280 / 2226 = 0.575022 → 1280×1015 px
+  Pattern: quadrant-2x2-issues
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;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;
+  padding: 20px;
+}
+.slide {
+  width: 1280px;
+  height: 1015px;
+  background: #ffffff;
+  position: relative;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+}
+.block {
+  width: 1280px;
+  height: 1015px;
+  position: relative;
+  overflow: hidden;
+}
+.inner {
+  position: absolute;
+  left: 0; top: 0;
+  width: 2226px;
+  height: 1766px;
+  transform: scale(0.575022);
+  transform-origin: top left;
+}
+
+/* ─── 카드 배경 (4 cards) ─── CSS gradient로 전환
+   픽셀 분석: 수직 gradient #f2f2f2 (top) → #ffffff (bottom), 단색에 가까움
+   border-radius: 50px (Figma) */
+.card-bg {
+  position: absolute;
+  width: 1080px;
+  height: 270.183px;
+  background: linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%);
+}
+
+/* 상단 (rounded top corners) */
+.card-bg.tl { left: 5px; top: 0; border-radius: 50px 50px 0 0; }
+.card-bg.tr { left: 1142px; top: 0; border-radius: 50px 50px 0 0; }
+
+/* 하단 (gradient 반전 + rounded bottom corners) */
+.card-bg.bl { left: 5px; top: 1495.69px; border-radius: 0 0 50px 50px; background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%); }
+.card-bg.br { left: 1146px; top: 1495.69px; border-radius: 0 0 50px 50px; background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%); }
+
+/* ─── Header ribbons (4 카테고리) ─── CSS gradient로 전환
+   SVG gradient_math.py 계산 결과:
+   TL/BL: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%)
+   TR/BR: linear-gradient(270deg, rgba(41,107,85,0.5) 0%, #032118 100%)
+   border-radius: 50px (SVG path r=50)
+*/
+.header-ribbon {
+  position: absolute;
+  width: 1080px;
+  height: 119px;
+  border-radius: 50px;
+}
+.header-ribbon .text {
+  position: absolute;
+  inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 900;
+  font-size: 60px;
+  color: #ffffff;
+  text-shadow: 0 0 4px #322c1e;
+  z-index: 2;
+}
+
+/* TL/BL: warm gradient (올리브→갈색) */
+.header-ribbon.tl {
+  left: 5px; top: 0;
+  background: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%);
+}
+.header-ribbon.bl {
+  left: 5px; top: 1646.86px;
+  background: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%);
+}
+/* TR/BR: teal gradient (청록→진녹) — 방향 반전 (원본 SVG rotate 180) → 90deg */
+.header-ribbon.tr {
+  left: 1142px; top: 0;
+  background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%);
+}
+.header-ribbon.br {
+  left: 1146px; top: 1646.99px;
+  background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%);
+}
+
+/* ─── 가운데 원 (인용구 배경) ─── */
+.center-quote {
+  position: absolute;
+  left: 809.01px;
+  top: 581.87px;
+  width: 644.99px;
+  height: 584.43px;
+}
+.center-quote img {
+  width: 100%; height: 100%;
+  object-fit: cover;
+}
+.center-quote .text {
+  position: absolute;
+  /* center: (1132.46, 880.59) - (552.41/2, 220.93/2) → (856.25, 770.13) - quote 좌상단 */
+  left: 47.24px; top: 188.26px;     /* 856.25-809.01, 770.13-581.87 */
+  width: 552.41px;
+  height: 220.93px;
+  font-weight: 700;
+  font-size: 55px;
+  color: #ffffff;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: normal;
+}
+
+/* ─── 빨간 헤드라인 (Figma에서 모두 한 줄) ─── */
+.red-h {
+  position: absolute;
+  font-weight: 700;
+  font-size: 55px;
+  line-height: 65px;
+  color: #ff0000;
+  white-space: nowrap;    /* Figma 원본: 모두 single line */
+}
+.red-h.right {
+  /* translate-x-full → text-right at left=2225 */
+  right: 1px;          /* (2226 - 2225) */
+  text-align: right;
+}
+
+/* ─── 본문 (검정 bullet) ─── */
+.body-text {
+  position: absolute;
+  font-weight: 400;
+  font-size: 42px;
+  line-height: 60px;
+  color: #000000;
+  word-break: keep-all;   /* 한글: 단어 단위 줄바꿈 */
+}
+.body-text ul { list-style: disc; margin: 0; padding-left: 63px; }
+.body-text ul li { word-break: keep-all; }
+.body-text.right {
+  right: 21px;     /* 2226 - 2205 */
+  text-align: right;
+}
+.body-text.right ul { list-style-position: inside; padding-left: 0; }
+
+/* ─── 헤드라인/본문 위치 ─── */
+.h-tl-1 { left: 12px; top: 151.22px; width: 771px; }
+.b-tl-1 { left: 8px; top: 222.25px; width: 993px; height: 239.75px; }
+
+.h-tr-1 { right: 1px; top: 151.22px; width: 771px; text-align: right; }
+.b-tr-1 { right: 21px; top: 222.25px; width: 1058px; height: 299.69px; text-align: right; }
+
+.h-tl-2 { left: 12px; top: 565.27px; width: 885px; }
+.b-tl-2 { left: 8px; top: 645.49px; width: 870px; height: 239.75px; }
+
+.h-tr-2 { right: 1px; top: 564.35px; width: 807px; text-align: right; }
+.b-tr-2 { right: 21px; top: 635.35px; width: 915px; height: 119.88px; text-align: right; }
+.b-tr-3 { right: 21px; top: 775.45px; width: 751px; height: 119.38px; text-align: right; }
+
+.h-bl-1 { left: 12px; top: 957.17px; width: 657px; }
+.b-bl-1 { left: 8px; top: 1035.56px; width: 972px; height: 179.81px; }
+
+.h-br-1 { right: 1px; top: 957.17px; width: 539px; text-align: right; }
+.b-br-1 { right: 21px; top: 1028.17px; width: 880px; height: 119.88px; text-align: right; }
+.b-br-2 { right: 21px; top: 1154.20px; width: 1025px; height: 119.88px; text-align: right; }
+
+.h-bl-2 { left: 12px; top: 1298.36px; width: 771px; }
+.b-bl-2 { left: 0; top: 1367.52px; width: 1082px; height: 239.75px; }
+
+.h-br-2 { right: 1px; top: 1312.18px; width: 820px; text-align: right; }
+.b-br-3 { right: 21px; top: 1379.50px; width: 1074px; height: 239.75px; text-align: right; }
+</style>
+</head>
+<body>
+
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <!-- 카드 배경 4개 -->
+      <!-- card-bg: CSS gradient 전환 -->
+      <div class="card-bg tl"></div>
+      <div class="card-bg tr"></div>
+      <div class="card-bg bl"></div>
+      <div class="card-bg br"></div>
+
+      <!-- 헤더 ribbons -->
+      <!-- ribbons: CSS gradient 전환 (SVG gradient_math.py 기반) -->
+      <div class="header-ribbon tl">
+        <div class="text">정책 집행</div>
+      </div>
+      <div class="header-ribbon tr">
+        <div class="text">수행 개념</div>
+      </div>
+      <div class="header-ribbon bl">
+        <div class="text">근본 취지의 이해부족</div>
+      </div>
+      <div class="header-ribbon br">
+        <div class="text">지속적 투자 의지 부재</div>
+      </div>
+
+      <!-- 가운데 원 (Rome wasn't Built in a day!) -->
+      <div class="center-quote">
+        <img src="assets/shared/922ee6f4bea1434652ffc08f962086052286b6c5.png" alt="">
+        <div class="text">Rome wasn't<br>Built in a day!</div>
+      </div>
+
+      <!-- ─── 좌상 (정책 집행) ─── -->
+      <p class="red-h h-tl-1">인정주의 정책 집행</p>
+      <div class="body-text b-tl-1">
+        <ul>
+          <li>수행능력이 없는 업체 선정 후 품질을 낮추어 시행하고 낮은 수준의 성과품을 실적으로 수용</li>
+          <li>모든 설계사가 할 수 있다는 전제하에 정책 시행</li>
+          <li>발주처의 책임회피를 위한 제도 운영</li>
+        </ul>
+      </div>
+
+      <p class="red-h h-tl-2">적용효과도 사례도 없는 방침부터 남발</p>
+      <div class="body-text b-tl-2">
+        <ul>
+          <li>효과 검증도 없는 지침부터 만들고보는 현실</li>
+          <li>BIM/DX 적용효과를 판단할 사례 부재</li>
+          <li>대부분 홍보목적으로 포장되어 투자 대비 효과 없음</li>
+        </ul>
+      </div>
+
+      <!-- ─── 우상 (수행 개념) ─── -->
+      <p class="red-h h-tr-1">공학적 개념 정립 부재</p>
+      <div class="body-text right b-tr-1">
+        <ul>
+          <li>DX 개념과 BIM 기술의 차이점의 이해부족으로 전략적 접근방식과 기술적 도구 사이의 혼란만 가중</li>
+          <li>인프라시설의 DX의 기본은 단순 모델이 아닌 위치기반 3D 모델(BIM)을 활용한 과정(Process)의 혁신</li>
+          <li>기술적 도구인 3D 모델 제작S/W에 과도하게 의존</li>
+        </ul>
+      </div>
+
+      <p class="red-h h-tr-2">'본업 기술력 확보' 우선의 개념 부재</p>
+      <div class="body-text right b-tr-2">
+        <ul>
+          <li>깊은 기반지식 바탕의 기술이 축적된 메뉴얼에 대한 중요성 및 필요성에 대한 이해 부족</li>
+        </ul>
+      </div>
+      <div class="body-text right b-tr-3">
+        <ul>
+          <li>자체 기술개발 없이 국내 발주처의 지침과 방침에만 의존한 낮은 기술력</li>
+        </ul>
+      </div>
+
+      <!-- ─── 좌하 (근본 취지의 이해부족) ─── -->
+      <p class="red-h h-bl-1">기술투자 없는 성과 창출 기대</p>
+      <div class="body-text b-bl-1">
+        <ul>
+          <li>이전의 CAD 도입·확장 시기처럼 상용화된 BIM S/W만 구입·구독하면 될거라는 안일한 생각</li>
+          <li>기술개발 노력없이 과거처럼 하면 된다는 착각</li>
+        </ul>
+      </div>
+
+      <p class="red-h h-bl-2">엔지니어링 S/W에 대한 개념 부재</p>
+      <div class="body-text b-bl-2">
+        <ul>
+          <li>다양한 엔지니어링 S/W의 특성에 대한 깊은 이해없이 단기 비용절감에 치우쳐 범용 S/W 선택</li>
+          <li>대형 Global S/W 회사에 과도한 의존과 이에 예속되는 방침 남발로 전용S/W 소멸</li>
+        </ul>
+      </div>
+
+      <!-- ─── 우하 (지속적 투자 의지 부재) ─── -->
+      <p class="red-h h-br-1">근본적인 역할은 회피</p>
+      <div class="body-text right b-br-1">
+        <ul>
+          <li>엔지니어의 근본적인 역할인 과정의 혁신과 결과물의 변화에 대한 고민 부재</li>
+        </ul>
+      </div>
+      <div class="body-text right b-br-2">
+        <ul>
+          <li>기술자가 직접 3D 모델을 만들고 수정하며 설계를 수행해야하는데 정작 모델제작은 외주처리</li>
+        </ul>
+      </div>
+
+      <p class="red-h h-br-2">과거의 타성에 머무르고 있는 업계</p>
+      <div class="body-text right b-br-3">
+        <ul>
+          <li>설계/감리/시공 임직원들의 디지털무지와 전략적 무지</li>
+          <li>S/W 판매업체의 기능적 사용법을 BIM 교육으로 착각</li>
+          <li>교육을 통한 인재양성보다는 당장 실무활용이 가능한 타사의 인력을 빼오기에 집중</li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

block-tests/bim-issues-quadrant_flat.md

@@ -0,0 +1,52 @@
+# Frame 1171281193 — BIM 수행실정 2×2 issues quadrant
+
+> 원본: 2226 × 1766 px
+> Scale: × 0.575022 → 1280 × 1015 px
+> Node ID: 45:18 (Figma)
+> 패턴 ID (잠정): `quadrant-2x2-issues`
+
+## 구조
+
+```
+Frame 45:18 (2226×1766)
+├─ 4 quadrant cards (2 columns × 2 rows)
+│   각 카드:
+│     - rounded card (top: rounded-t-50)
+│     - quadrant header ribbon (top/bottom)
+│     - red headline (Bold 55px)
+│     - bullet body (Regular 42px, lh 60)
+│
+├─ 4 quadrants:
+│   상좌: "정책 집행" header / 인정주의 정책 집행, 적용효과도... (2 issues × headlines + bodies)
+│   상우: "수행 개념" header / 공학적 개념 정립 부재, 본업..., 깊은..., 자체... (multi)
+│   하좌: "근본 취지의 이해부족" header / 기술투자..., 엔지니어링... (multi)
+│   하우: "지속적 투자 의지 부재" header / 근본적인 역할은 회피, 과거의 타성... (multi)
+│
+└─ 가운데 원 (background): 644.99×584.43 image + "Rome wasn't Built in a day!" (white 55px Bold)
+```
+
+## 패턴: quadrant-2x2-issues
+
+특징:
+- 2×2 그리드 (4개 카테고리)
+- 각 카테고리 = ribbon header + N개의 (red headline + bullet body)
+- 가운데 원형 인용구 (optional)
+- 카드 배경: 둥근 모서리 (top), 진한 색
+
+## 변형 가능 축
+
+- quadrants[4] (보통 4 fixed, 2 또는 6도 가능)
+  - header_label
+  - issues[N=1~5]: { headline, body_bullets[] }
+- center_quote (optional): { image, text }
+
+## 자산
+
+| hash | 의미 |
+|------|------|
+| fdcafc1b... | card_bg_dark |
+| 922ee6f4... | center_quote_circle |
+| 5d27ecb1... | header_ribbon_right (수행개념) |
+| 6d311a18... | header_ribbon_left (정책 집행) |
+| cab8c828... | header_ribbon_right_bot |
+| 42b569ef... | header_ribbon_left_bot |

block-tests/bim-sw-overview.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>Model에 특화된 Engn. S/W (Frame 1171281202)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@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; padding: 20px;
+  word-break: keep-all;
+}
+.slide {
+  width: 1280px; height: 573px;
+  background: #fff;
+  position: relative;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+}
+.block { width: 1280px; height: 573px; position: relative; overflow: hidden; }
+.inner {
+  position: absolute; left: 0; top: 0;
+  width: 1863.306px; height: 834.005px;
+  transform: scale(0.68706);
+  transform-origin: top left;
+}
+/* All elements absolute positioned at Figma coordinates */
+.abs { position: absolute; }
+.abs img { width: 100%; height: 100%; object-fit: cover; display: block; }
+/* 타이틀 */
+.title-icon { left: 0; top: 13px; width: 38.05px; height: 40px; }
+.title-text {
+  left: 51px; top: 0; width: 1198px; height: 48px;
+  font-weight: 900; line-height: 55px; white-space: nowrap;
+}
+.title-text .model {
+  font-size: 70px;
+  background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.title-text .sub {
+  font-size: 50px;
+  background-image: linear-gradient(180deg, #296b55 0%, #000 100%);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+/* 타이틀 bar — 원본: 미세 그림자 PNG → CSS box-shadow로 대체
+   픽셀 분석: rgba(0,0,0,0.11) 균일, 매우 미세 */
+.title-bar {
+  left: 26px; top: 42px; width: 255.13px; height: 26px;
+  background: rgba(0,0,0,0.08);
+  border-radius: 4px;
+  filter: blur(8px);
+}
+/* 좌측 패널 BG — 원본: 셰브론(화살표) 형태 + 좌→우 alpha gradient
+   픽셀 분석: x=10% rgba(192,213,208,0.19) → x=95% rgba(211,227,226,1.0)
+   형태: clip-path polygon (우측 뾰족한 화살표) */
+.left-bg {
+  left: 38px; top: 74.02px; width: 964.14px; height: 759.99px;
+  background: linear-gradient(90deg,
+    rgba(192,213,208,0.19) 0%,
+    rgba(195,214,209,0.66) 50%,
+    rgba(211,227,226,1) 95%);
+  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
+  border-radius: 20px 0 0 20px;
+}
+/* 카테고리 헤더 bar — 원본: 단색 gradient PNG → CSS solid + border-radius
+   픽셀 분석: cat-1=#417d38, cat-2=#008e52, cat-3=#008970
+   우측 alpha fadeout → border-radius + 우측 투명 gradient */
+.cat-bar { height: 49px; border-radius: 5px; }
+.cat-bar-1 {
+  left: 103.13px; top: 153px; width: 693.19px;
+  background: linear-gradient(90deg, #417d38 0%, #417d38 85%, rgba(65,125,56,0) 100%);
+}
+.cat-bar-2 {
+  left: 103.13px; top: 352px; width: 693.19px;
+  background: linear-gradient(90deg, #008e52 0%, #008e52 85%, rgba(0,142,82,0) 100%);
+}
+.cat-bar-3 {
+  left: 103.13px; top: 612px; width: 693.19px;
+  background: linear-gradient(90deg, #008970 0%, #008970 85%, rgba(0,137,112,0) 100%);
+}
+/* 카테고리 제목 텍스트 */
+.cat-title {
+  font-weight: 700; font-size: 40px; line-height: 90px;
+  color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.5);
+  width: 606.27px;
+  display: flex; flex-direction: column; justify-content: center;
+}
+.cat-title-1 { left: 162.77px; top: 126px; height: 95.8px; }
+.cat-title-2 { left: 162.77px; top: 326px; height: 95.8px; }
+.cat-title-3 { left: 162.77px; top: 586px; height: 95.8px; }
+/* SW 리스트 */
+.sw-list {
+  font-weight: 500; font-size: 35px; line-height: 60px;
+  color: #000; text-shadow: 0 0 4px rgba(0,0,0,0.5);
+  display: flex; flex-direction: column; justify-content: center;
+}
+.sw-1 { left: 166.42px; top: 207px; width: 323.36px; height: 120px; }
+.sw-2 { left: 166.42px; top: 405px; width: 654.63px; height: 180px; }
+.sw-3 { left: 162.46px; top: 671px; width: 654.63px; height: 120px; }
+/* 중간 장식 — 원본: 미세 반달형 그림자 PNG → CSS radial-gradient
+   픽셀 분석: 우측에만 rgba(224,224,224,0.13~0.81) */
+.mid-deco {
+  left: 884.33px; top: 192px; width: 180.96px; height: 541px;
+  background: radial-gradient(ellipse 60% 50% at 100% 50%,
+    rgba(217,217,217,0.8) 0%,
+    rgba(217,217,217,0.13) 60%,
+    transparent 100%);
+}
+.mid-arrow { left: 943.66px; top: 375px; width: 73.18px; height: 158px; }
+/* 우측 번호 badge — bar 위에 (z-index) */
+.num-badge { width: 88.01px; height: 93px; z-index: 2; }
+.num-1 { left: 1047.5px; top: 78px; }
+.num-2 { left: 1047.5px; top: 230px; }
+.num-3 { left: 1047.5px; top: 384px; }
+.num-4 { left: 1047.5px; top: 539px; }
+.num-5 { left: 1047.5px; top: 694px; }
+/* 우측 배경 bar — 원본: 단색 #e8ede3 PNG → CSS solid
+   픽셀 분석: 균일 #e8ede3, 상하 모서리 anti-alias → border-radius */
+.right-bar {
+  left: 1094.96px; width: 751.54px; height: 97px;
+  background: #e8ede3;
+  border-radius: 10px;
+}
+.rb-1 { top: 105px; } .rb-2 { top: 257px; } .rb-3 { top: 412px; }
+.rb-4 { top: 567px; } .rb-5 { top: 721px; }
+/* 우측 설명 텍스트 */
+.right-text {
+  font-weight: 500; font-size: 45px; line-height: 60px;
+  color: #11231d; text-shadow: 0 0 4px rgba(0,0,0,0.5);
+  left: 1176.05px; width: 687.26px; height: 60px;
+  display: flex; flex-direction: column; justify-content: center;
+}
+.rt-1 { top: 123px; } .rt-2 { top: 276px; } .rt-3 { top: 430px; }
+.rt-4 { top: 586px; } .rt-5 { top: 734px; }
+/* 우측 화살표 아이콘 — Figma design_context는 transform 후 좌표(1794.09) 제공 */
+.right-arrow { width: 47.47px; height: 45px; transform: rotate(180deg); }
+.ra-1 { left: 1794.09px; top: 152px; }
+.ra-2 { left: 1794.09px; top: 302px; }
+.ra-3 { left: 1794.09px; top: 456px; }
+.ra-4 { left: 1794.09px; top: 606px; }
+.ra-5 { left: 1794.09px; top: 760px; }
+</style>
+</head>
+<body>
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+      <!-- 타이틀 -->
+      <div class="abs title-icon"><img src="assets/shared/bd3796e13b417d32322b3cd6d3962f892c52ec9b.png" alt=""></div>
+      <div class="abs title-text"><span class="model">Model</span><span class="sub">에 특화된 Engn. S/W</span></div>
+      <div class="abs title-bar"></div>
+
+      <!-- 좌측 BG — CSS gradient + clip-path -->
+      <div class="abs left-bg"></div>
+
+      <!-- 카테고리 bars — CSS solid color -->
+      <div class="abs cat-bar cat-bar-1"></div>
+      <div class="abs cat-bar cat-bar-2"></div>
+      <div class="abs cat-bar cat-bar-3"></div>
+
+      <!-- 카테고리 제목 -->
+      <div class="abs cat-title cat-title-1">GIS</div>
+      <div class="abs cat-title cat-title-2">Modeler</div>
+      <div class="abs cat-title cat-title-3">Simulation &amp; Video</div>
+
+      <!-- SW 리스트 -->
+      <div class="abs sw-list sw-1">· ArcGIS, QGIS<br>· 천지인</div>
+      <div class="abs sw-list sw-2">· Rhino, Blender, Sketch-up<br>· EG-BIM Modeller · Revit<br>· Civil 3D(+KG Road), Naviswork</div>
+      <div class="abs sw-list sw-3">· Twin Highway<br>· Infraworks</div>
+
+      <!-- 중간 장식 — CSS radial-gradient -->
+      <div class="abs mid-deco"></div>
+      <div class="abs mid-arrow"><img src="assets/shared/2f95748966536058809971fd1c9ed646d3e1f3a7.png" alt=""></div>
+
+      <!-- 번호 badge -->
+      <div class="abs num-badge num-1"><img src="assets/shared/42dca7c1ca42ba8520aa274fd4471bd054dfe36b.png" alt=""></div>
+      <div class="abs num-badge num-2"><img src="assets/shared/9d86013a10b048eede6cceb2012f7958dfaf616c.png" alt=""></div>
+      <div class="abs num-badge num-3"><img src="assets/shared/470d76de62f4864e6c42b25bcf7446e2aaef981a.png" alt=""></div>
+      <div class="abs num-badge num-4"><img src="assets/shared/7e83d2e4d7df471367df19708e2628010d586ed2.png" alt=""></div>
+      <div class="abs num-badge num-5"><img src="assets/shared/4ea963b9abbbbb2623d4ec41c2a6eea6ea2856d4.png" alt=""></div>
+
+      <!-- 우측 배경 bars (동일 이미지 ×5) -->
+      <div class="abs right-bar rb-1"></div>
+      <div class="abs right-bar rb-2"></div>
+      <div class="abs right-bar rb-3"></div>
+      <div class="abs right-bar rb-4"></div>
+      <div class="abs right-bar rb-5"></div>
+
+      <!-- 우측 설명 텍스트 -->
+      <div class="abs right-text rt-1">Model 구축에 필요한 기능 위주</div>
+      <div class="abs right-text rt-2">고가, 고사양, 복잡, 전문가용</div>
+      <div class="abs right-text rt-3">Engn. S/W간에 호환 안됨</div>
+      <div class="abs right-text rt-4">성과물 제작은 별도</div>
+      <div class="abs right-text rt-5">시공 현장상황 반영에 한계</div>
+
+      <!-- 우측 화살표 아이콘 (×5, 동일 src) -->
+      <div class="abs right-arrow ra-1"><img src="assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
+      <div class="abs right-arrow ra-2"><img src="assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
+      <div class="abs right-arrow ra-3"><img src="assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
+      <div class="abs right-arrow ra-4"><img src="assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
+      <div class="abs right-arrow ra-5"><img src="assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

block-tests/bim-sw-overview_flat.md

@@ -0,0 +1,26 @@
+# Frame 1171281202 — Model에 특화된 Engn. S/W (split-panel-numbered)
+
+> 원본: 1863.31 × 834 px
+> Scale: × 0.68706 → 1280 × 573 px
+> Node ID: 45:27 (Figma)
+> 패턴 ID: `split-panel-numbered`
+
+## 구조
+
+- 좌측 패널: 그라데이션 배경 이미지(image 3844) + 3 카테고리 (GIS / Modeler / Simulation & Video) 각각 헤더바 + SW 리스트
+- 중간 세로 장식 이미지(image 3855 + 3845)
+- 우측 패널: 5개 번호 badge (01~05 PNG) + 설명 텍스트 + 배경 bar + 우상단 화살표 아이콘
+- 상단 타이틀: gradient text "Model" + "에 특화된 Engn. S/W"
+
+## 변형 가능 축
+
+- left_categories[N=2~5]: { header_text, sw_list[] }
+- right_items[N=3~8]: { number_badge_image, description }
+- title_segments[]: highlighted text
+
+## 특이사항
+
+- 이미지 에셋 15+ 개 (대부분 장식/배지). 이미지 의존 높은 패턴.
+- 템플릿화 시 이미지 의존도가 높아 블록 재사용성 낮을 수 있음. 콘텐츠 구조(좌: 카테고리 리스트 / 우: 번호 설명)는 재사용 가능.
+
+## 자산: 15개 (shared 캐시)

block-tests/bim-vs-dx-table.html

@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>BIM vs DX 비교 표 (Frame 1171281195)</title>
+<!--
+  Frame: 45:20, 1868×1908 px
+  Scale: 1280 / 1868 = 0.685225 → 1280×1307 px (16:9 720 초과)
+  Pattern: compare-vs-rows
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&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;
+  padding: 20px;
+}
+.slide {
+  width: 1280px;
+  height: 1307px;
+  background: #ffffff;
+  position: relative;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+}
+.block {
+  width: 1280px;
+  height: 1307px;
+  background: #ffffff;
+  position: relative;
+  overflow: hidden;
+}
+.inner {
+  position: absolute;
+  left: 0; top: 0;
+  width: 1868px;
+  height: 1908px;
+  transform: scale(0.685225);
+  transform-origin: top left;
+}
+
+/* ─── 헤더 (BIM과 DX의 이해) ─── */
+.header {
+  position: absolute;
+  left: 0; top: 0;
+  display: flex; align-items: center; gap: 15px;
+  height: 85px; width: 570px;
+  padding-left: 0;
+}
+.header-icon {
+  width: 50px; height: 50px;
+}
+.header-icon img { width: 100%; height: 100%; object-fit: cover; }
+.header-title {
+  font-weight: 700;
+  font-size: 70px;
+  line-height: normal;
+  white-space: nowrap;
+  /* gradient text */
+  background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: 0 0 4px #322c1e;
+}
+
+/* ─── 메인 타이틀 pill (BIM vs DX) — grid 3-col 카테고리 컬럼 align ─── */
+.main-pill {
+  position: absolute;
+  left: 65px; top: 103px;
+  width: 1803px; height: 75px;
+  border-radius: 50px;
+  background-image: linear-gradient(270deg,
+    rgb(40,91,74) 0%,
+    rgba(40,91,74,0.8) 30%,
+    rgba(74,64,38,0.8) 70%,
+    rgb(74,64,38) 100%);
+  /* 카테고리 컬럼 left=813, width=242, main pill left=65, width=1803
+     → 내부 grid: 좌(748) | 중(242) | 우(813) */
+  display: grid;
+  grid-template-columns: 748px 242px 813px;
+  align-items: center;
+}
+.main-pill > div {
+  font-weight: 700;
+  font-size: 55px;
+  color: #ffffff;
+  text-align: center;
+  white-space: nowrap;
+}
+
+/* ─── 좌/우 텍스트 공통: 박스 vertical center align (Figma flex justify-center 모방) ─── */
+.left-text, .right-text {
+  position: absolute;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 1.3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  word-break: keep-all;
+}
+.left-text {
+  color: #5c3714;
+  text-align: right;
+  align-items: flex-end;
+}
+.right-text {
+  color: #285b4a;
+  text-align: left;
+  align-items: flex-start;
+}
+.left-text .sub, .right-text .sub { font-size: 35px; }
+
+/* ─── 가운데 카테고리 pill (white text) ─── */
+.cat-pill {
+  position: absolute;
+  left: 813px;
+  width: 242px;
+  border-radius: 10px;
+  background-image: linear-gradient(270deg,
+    rgba(40,91,74,0.8) 0%,
+    rgba(40,91,74,0.64) 30%,
+    rgba(74,64,38,0.64) 70%,
+    rgba(74,64,38,0.8) 100%);
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700;
+  font-size: 40px;
+  color: #ffffff;
+  text-align: center;
+  white-space: pre;
+}
+
+/* ─── 결론 박스 ─── 원본 SVG: #FAEDCB 단색 + mix-blend-mode: multiply → CSS 직접 */
+.conclusion-bg {
+  position: absolute;
+  left: 427px; top: 1738px;
+  width: 1214px; height: 170px;
+  background: #FAEDCB;
+  mix-blend-mode: multiply;
+}
+.conclusion-text {
+  position: absolute;
+  left: 446px; top: 1730px;
+  width: 1265.018px;
+  font-weight: 700;
+  color: #000000;
+}
+.conclusion-text .l1 { line-height: 90px; font-size: 50px; }
+.conclusion-text .l2 { line-height: 90px; font-size: 50px; }
+.conclusion-text .l2 .hl { color: #ae3607; font-size: 55px; }
+
+/* 화살표 */
+.arrow-vec {
+  position: absolute;
+  left: 202px; top: 1721px;
+  width: 192px; height: 169px;
+  transform: rotate(180deg);
+}
+.arrow-vec img { width: 100%; height: 100%; display: block; }
+</style>
+</head>
+<body>
+
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <!-- 헤더 -->
+      <div class="header">
+        <div class="header-icon"><img src="assets/shared/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" alt=""></div>
+        <div class="header-title">BIM과 DX의 이해</div>
+      </div>
+
+      <!-- 메인 타이틀 pill: BIM | vs. | DX (카테고리 컬럼과 grid align) -->
+      <div class="main-pill">
+        <div>BIM</div>
+        <div>vs.</div>
+        <div>DX</div>
+      </div>
+
+      <!-- ─── 12 rows ───
+           각 row: cat pill의 top/height를 좌/우 text 박스에도 동일하게 적용 →
+           flex justify-center 로 자동 vertical 정렬 (cat pill center == text center) -->
+
+      <!-- Row 1: BIM/DX -->
+      <div class="cat-pill" style="top:205px; height:83px;">BIM/DX</div>
+      <div class="left-text" style="left:47px; top:205px; height:83px; width:733px;">• Only 3D</div>
+      <div class="right-text" style="left:1088px; top:205px; height:83px; width:780px;">• BIM &lt;&lt; DX <span class="sub">(ENG. + Management 포함)</span></div>
+
+      <!-- Row 2: S/W -->
+      <div class="cat-pill" style="top:321px; height:138px;">S/W</div>
+      <div class="left-text" style="left:22px; top:321px; height:138px; width:758px;">• 모델 제작용 상용 S/W<br><span class="sub">[Civil 3D, Revit, Navisworks, Autocad]</span></div>
+      <div class="right-text" style="left:1088px; top:321px; height:138px; width:780px;">• 제작 및 운영 (상용 + 전용 40~80개)<br><span class="sub">[Rhino, Sketchup, Blender ..] + [EG-BIM 등]</span></div>
+
+      <!-- Row 3: 프로세스 -->
+      <div class="cat-pill" style="top:492px; height:84px;">프로세스</div>
+      <div class="left-text" style="left:47px; top:492px; height:84px; width:733px;">• 기존 2D 설계방식 유지</div>
+      <div class="right-text" style="left:1088px; top:492px; height:84px; width:701px;">• 근본적 문제의식을 통한 개선</div>
+
+      <!-- Row 4: 성과물 -->
+      <div class="cat-pill" style="top:609px; height:138px;">성과물</div>
+      <div class="left-text" style="left:47px; top:609px; height:138px; width:733px;">• 3D 모델 중심<br>• 기존 성과품 유지</div>
+      <div class="right-text" style="left:1088px; top:609px; height:138px; width:701px;">• 공학 정보 및 콘텐츠 연계에 집중<br>• 도면, 수량, 시공계획 등 일식</div>
+
+      <!-- Row 5: 활용 -->
+      <div class="cat-pill" style="top:780px; height:83px;">활&nbsp;&nbsp;용</div>
+      <div class="left-text" style="left:47px; top:780px; height:83px; width:733px;">• 3D 모델에 의한 일반적 이해 향상</div>
+      <div class="right-text" style="left:1088px; top:780px; height:83px; width:701px;">• 설계/시공의 혁신(개념의 재정립)</div>
+
+      <!-- Row 6: 확장성 -->
+      <div class="cat-pill" style="top:896px; height:83px;">확장성</div>
+      <div class="left-text" style="left:47px; top:896px; height:83px; width:733px;">• (설계/시공/운영) 분야별 단절</div>
+      <div class="right-text" style="left:1088px; top:896px; height:83px; width:623px;">• 전 생애주기 활용 시스템</div>
+
+      <!-- Row 7: 수행개념 -->
+      <div class="cat-pill" style="top:1012px; height:84px;">수행개념</div>
+      <div class="left-text" style="left:47px; top:1012px; height:84px; width:733px;">• 단순화(오류) - 수동적/집단적 동질화</div>
+      <div class="right-text" style="left:1088px; top:1012px; height:84px; width:701px;">• 구체화(복잡) - 적극/구체적 실현 방안</div>
+
+      <!-- Row 8: CIVIL+IT -->
+      <div class="cat-pill" style="top:1129px; height:82px;">CIVIL + IT</div>
+      <div class="left-text" style="left:142px; top:1129px; height:82px; width:638px;">• 소극적, 상용 기술에 의존</div>
+      <div class="right-text" style="left:1088px; top:1129px; height:82px; width:638px;">• 적극적, 주체적인 기술 접목/융합</div>
+
+      <!-- Row 9: 주체 -->
+      <div class="cat-pill" style="top:1244px; height:83px;">주&nbsp;&nbsp;체</div>
+      <div class="left-text" style="left:160px; top:1244px; height:83px; width:620px;">• S/W 제작사 판매 정책에 의존</div>
+      <div class="right-text" style="left:1088px; top:1244px; height:83px; width:638px;">• 자체 수행능력 - 지속가능성 확보</div>
+
+      <!-- Row 10: 발주처 -->
+      <div class="cat-pill" style="top:1360px; height:83px;">발주처</div>
+      <div class="left-text" style="left:47px; top:1360px; height:83px; width:733px;">• 평준화, 국내 중심</div>
+      <div class="right-text" style="left:1088px; top:1360px; height:83px; width:701px;">• 차별화 및 경쟁력 확보, 해외 진출</div>
+
+      <!-- Row 11: 설계사 -->
+      <div class="cat-pill" style="top:1476px; height:84px;">설계사</div>
+      <div class="left-text" style="left:47px; top:1476px; height:84px; width:733px;">• 소규모 BIM팀 운영 + 단순교육에 집중</div>
+      <div class="right-text" style="left:1088px; top:1476px; height:84px; width:737px;">• IT + CIVIL ENG 220명 운영 + 기술 개발</div>
+
+      <!-- Row 12: 시공사 -->
+      <div class="cat-pill" style="top:1593px; height:140px;">시공사</div>
+      <div class="left-text" style="left:47px; top:1593px; height:140px; width:733px;">• 국내 토목 소극적/해외 토목증가</div>
+      <div class="right-text" style="left:1088px; top:1593px; height:140px; width:701px;">• 분야 확장 모델 및 시스템</div>
+
+      <!-- 결론 박스 -->
+      <div class="conclusion-bg"></div>
+      <div class="conclusion-text">
+        <p class="l1">BIM은 건설산업의 DX(디지털전환)을 수행하는 과정에서</p>
+        <p class="l2"><span class="hl">가장 기초가 되는 일부분</span>임을 인지하는 것이 매우 중요</p>
+      </div>
+      <div class="arrow-vec"><img src="assets/shared/bf1755273910e17f7a012ce2d269a93cca9483ac.svg" alt=""></div>
+
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

block-tests/bim-vs-dx-table_flat.md

@@ -0,0 +1,66 @@
+# Frame 1171281195 — BIM vs DX 비교 표
+
+> 원본: 1868 × 1908 px
+> Scale: × 0.685225 → 1280 × 1307 px (16:9 720 초과)
+> Node ID: 45:20 (Figma)
+> 패턴 ID (잠정): `compare-vs-rows`
+
+## 계층 경로
+
+```
+Frame 45:20 "Frame 1171281195" (1868 × 1908)
+├─ 헤더 영역
+│   ├─ 17:1937~1940 "BIM과 DX의 이해" (gradient text + icon, top:0)
+│   ├─ 17:1990 main title pill bg (65, 103) 1803×75 — gradient
+│   └─ 17:1991 "BIM vs. DX" text (331, 100)
+│
+├─ 12 row × 3 col 비교 표 (top: 205~1755)
+│   각 row: { 좌 BIM 텍스트, 가운데 카테고리 pill, 우 DX 텍스트 }
+│   카테고리: BIM/DX, S/W, 프로세스, 성과물, 활용, 확장성,
+│              수행개념, CIVIL+IT, 주체, 발주처, 설계사, 시공사
+│
+│   좌 컬럼 (text-right, color #5c3714 brown):
+│     17:1941 ~ 17:1952 (12개)
+│   가운데 컬럼 (white text on gradient pill, 242×varies):
+│     17:1954/1956/1958/1960/1962/1964/1966/1968/1970/1972/1974/1976
+│   우 컬럼 (text-left, color #285b4a green):
+│     17:1978 ~ 17:1989 (12개)
+│
+└─ 하단 결론 영역
+    ├─ 17:1992 Rectangle 42631 (427, 1738) 1214×170 — SVG box
+    ├─ 17:1993 결론 텍스트 "BIM은 건설산업의 DX..." (446, 1730)
+    └─ 17:1994 화살표 vector (좌하단)
+```
+
+## 패턴 분류
+
+**새 패턴.** ID: `compare-vs-rows`
+
+특징:
+- 12개 비교 행 (N=variable)
+- 각 행: 좌(text) | 중앙(pill 라벨) | 우(text)
+- 헤더 + 메인 타이틀 pill
+- 좌/우 색상 대조 (brown vs green)
+- 하단 결론 박스
+
+## 변형 가능 축
+
+- header: { icon, title, gradient_colors, optional }
+- main_pill_title: { text_left, text_center, text_right (e.g. "BIM vs. DX") }
+- rows[N=2~15]: 각 행
+  - left: { text, color, sub_text? }
+  - center: { label, height_variant }
+  - right: { text, color, sub_text? }
+- conclusion_box: { text_segments (with highlights), arrow_image, optional }
+
+## Sub-patterns
+
+- 좌/우 대조 텍스트 페어 (없는 sub-pattern, 1번째 등장이라 미등록)
+
+## 자산
+
+| hash | 의미 |
+|------|------|
+| b0e9fad5... | bim_dx_header_icon |
+| 7713e15d... | conclusion_box_svg |
+| bf175527... | arrow_vector |

block-tests/card-image.html

@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>블록 테스트: card-image</title>
+<style>
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body {
+    font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
+    background: #e8ecf0;
+    display: flex;
+    justify-content: center;
+    padding: 30px;
+    margin: 0;
+}
+.block-container {
+    width: 920px;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+}
+.block-container .block-section-title {
+    margin: -20px -20px 0;
+    border-radius: 8px 8px 0 0;
+    overflow: hidden;
+}
+</style>
+</head>
+<body>
+<div class="block-container">
+<!-- 이미지 카드: 상단 이미지 + 하단 텍스트 (2~4열) -->
+<!--
+  📋 card-image
+  ─────────────────
+  용도: 단계별 설명, 카테고리별 설명 (이미지가 핵심인 카드)
+  슬롯: cards[] 배열 (각 카드에 image, title, title_en, items[])
+  Figma 원본: 2-1_02 > Group 1171281594 (카드 3열)
+-->
+<div class="block-card-image" style="--ci-count: 3">
+  
+  <div class="ci-card">
+    
+    <img class="ci-img" src="figma-assets/card_img_design.png" alt="설계단계">
+    
+    <div class="ci-body">
+      <div class="ci-title" style="color: #00aaff">설계단계</div>
+      <div class="ci-title-en">Design Stage</div>
+      <div class="ci-divider"></div>
+      <ul class="ci-list">
+        
+        <li>고도화된 BIM 구현</li>
+        
+        <li>최첨단 디지털트윈</li>
+        
+        <li>시뮬레이션 분석 & 성능평가</li>
+        
+        <li>지속가능한 인프라개발</li>
+        
+      </ul>
+      
+    </div>
+  </div>
+  
+  <div class="ci-card">
+    
+    <img class="ci-img" src="figma-assets/card_img_construction.png" alt="시공 단계">
+    
+    <div class="ci-body">
+      <div class="ci-title" style="color: #006aff">시공 단계</div>
+      <div class="ci-title-en">Construction Stage</div>
+      <div class="ci-divider"></div>
+      <ul class="ci-list">
+        
+        <li>향상된 건설 계획과 공정 순서 관리</li>
+        
+        <li>Big Room 등 환경을 통한 협업 및 조정</li>
+        
+        <li>정확한 수량산출서와 비용 산정</li>
+        
+      </ul>
+      
+    </div>
+  </div>
+  
+  <div class="ci-card">
+    
+    <img class="ci-img" src="figma-assets/card_img_maintenance.png" alt="유지관리 단계">
+    
+    <div class="ci-body">
+      <div class="ci-title" style="color: #004cbe">유지관리 단계</div>
+      <div class="ci-title-en">Maintenance Stage</div>
+      <div class="ci-divider"></div>
+      <ul class="ci-list">
+        
+        <li>자산 정보 및 데이터 관리</li>
+        
+        <li>예측 기반 유지보수 및 생애주기 분석</li>
+        
+        <li>효율적인 시설 운영 및 지속가능한 관리</li>
+        
+      </ul>
+      
+    </div>
+  </div>
+  
+</div>
+
+<style>
+.block-card-image {
+  display: grid;
+  grid-template-columns: repeat(var(--ci-count, 3), 1fr);
+  gap: 16px;
+}
+.ci-card {
+  background: var(--color-bg, #ffffff);
+  border-radius: var(--radius, 8px);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.ci-img {
+  width: 100%;
+  height: 160px;
+  object-fit: contain;
+  background: #f8f9fb;
+  padding: 10px;
+}
+.ci-body {
+  padding: 16px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.ci-title {
+  font-size: 14px;
+  font-weight: var(--weight-bold, 700);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  margin-bottom: 2px;
+}
+.ci-title-en {
+  font-size: 12px;
+  font-weight: var(--weight-normal, 400);
+  color: var(--color-text-secondary, #666);
+  margin-bottom: 10px;
+}
+.ci-divider {
+  width: 100%;
+  height: 1px;
+  background: #000;
+  margin-bottom: 10px;
+}
+.ci-list {
+  list-style: disc;
+  padding-left: 18px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--color-text, #000);
+  flex: 1;
+}
+.ci-list li {
+  margin-bottom: 3px;
+}
+.ci-source {
+  font-size: 11px;
+  color: var(--color-text-light, #94a3b8);
+  font-style: italic;
+  margin-top: 8px;
+  border-top: 1px solid var(--color-border, #e2e8f0);
+  padding-top: 6px;
+}
+</style>
+</div>
+</body>
+</html>

block-tests/cards_card-compare-3col.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-compare-3col</title>
+<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+</style></head><body><div class="block-container"><!-- 3단 비교 카드: 각각 다른 색상 헤더 + 아이콘/이미지 + 불릿 -->
+<!--
+  📋 card-compare-3col
+  ─────────────────
+  용도: 3개 카테고리 비교 (예: 상용SW / 3rd Party / 전문SW)
+  슬롯: cards[] (각 카드에 title, subtitle, color, image, bullets[])
+  Figma 원본: 2-2_03 "상용 / 3rd Party(범용) / 전문·전용 S/W"
+-->
+<div class="block-compare-3" style="--cc-count: 3">
+  
+  <div class="cc-card">
+    <div class="cc-header" style="background: #6b7280">
+      <div class="cc-title">상용 S/W</div>
+      <div class="cc-sub">Commercial</div>
+    </div>
+    
+    
+    <ul class="cc-list">
+      
+      <li>Autodesk, Bentley 등</li>
+      
+      <li>범용 기능 제공</li>
+      
+      <li>라이선스 비용 높음</li>
+      
+    </ul>
+    
+  </div>
+  
+  <div class="cc-card">
+    <div class="cc-header" style="background: #2563eb">
+      <div class="cc-title">3rd Party 범용</div>
+      <div class="cc-sub">General Purpose</div>
+    </div>
+    
+    
+    <ul class="cc-list">
+      
+      <li>Rhino, Sketchup 등</li>
+      
+      <li>특정 분야 특화</li>
+      
+      <li>상대적 저비용</li>
+      
+    </ul>
+    
+  </div>
+  
+  <div class="cc-card">
+    <div class="cc-header" style="background: #dc2626">
+      <div class="cc-title">전문·전용 S/W</div>
+      <div class="cc-sub">Specialized</div>
+    </div>
+    
+    
+    <ul class="cc-list">
+      
+      <li>자체 개발 솔루션</li>
+      
+      <li>업무 프로세스 최적화</li>
+      
+      <li>지속적 업그레이드 가능</li>
+      
+    </ul>
+    
+  </div>
+  
+</div>
+
+<style>
+.block-compare-3 {
+  display: grid;
+  grid-template-columns: repeat(var(--cc-count, 3), 1fr);
+  gap: 14px;
+}
+.cc-card {
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #ffffff;
+}
+.cc-header {
+  padding: 12px 16px;
+  text-align: center;
+  color: #ffffff;
+}
+.cc-title {
+  font-size: 15px;
+  font-weight: 800;
+}
+.cc-sub {
+  font-size: 11px;
+  opacity: 0.85;
+  margin-top: 2px;
+}
+.cc-img {
+  width: 100%;
+  height: 120px;
+  object-fit: contain;
+  background: #f8fafc;
+  padding: 8px;
+}
+.cc-list {
+  list-style: disc;
+  padding: 12px 16px 14px 30px;
+  font-size: 13px;
+  color: #334155;
+  line-height: 1.7;
+}
+.cc-list li {
+  margin-bottom: 3px;
+  white-space: pre-line;
+}
+</style></div></body></html>

block-tests/cards_card-dark-overlay.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>cards/card-dark-overlay</title>
+<style>
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+</style>
+</head>
+<body><div class="block-container"><!-- 다크 오버레이 카드: 배경 이미지 + 흰 텍스트 오버레이 -->
+<!--
+  📋 card-dark-overlay
+  ─────────────────
+  용도: 키워드+짧은 설명을 시각적으로 강조. 이미지 위에 다크 오버레이 + 흰 텍스트.
+  슬롯: cards[] (각 카드에 image, title, description)
+  Figma 원본: 2-2_01 > 아이콘 카드 5열 (협업지원, 오류감소, 생산성향상 등)
+-->
+<div class="block-card-dark" style="--cd-count: 5">
+  
+  <div class="cd-card">
+    
+    <img class="cd-bg" src="../figma-assets/2-2_icon_card_1.png" alt="">
+    
+    <div class="cd-overlay">
+      <div class="cd-title">협업지원</div>
+      <div class="cd-desc">팀원간 협업 원활히하여
+프로젝트 관리 개선</div>
+    </div>
+  </div>
+  
+  <div class="cd-card">
+    
+    <img class="cd-bg" src="../figma-assets/2-2_icon_card_2.png" alt="">
+    
+    <div class="cd-overlay">
+      <div class="cd-title">오류감소</div>
+      <div class="cd-desc">설계 오류 최소화
+품질 향상</div>
+    </div>
+  </div>
+  
+  <div class="cd-card">
+    
+    <img class="cd-bg" src="../figma-assets/2-2_icon_card_3.png" alt="">
+    
+    <div class="cd-overlay">
+      <div class="cd-title">생산성 향상</div>
+      <div class="cd-desc">반복적 작업의 자동화
+시간과 노력 절약</div>
+    </div>
+  </div>
+  
+  <div class="cd-card">
+    
+    <img class="cd-bg" src="../figma-assets/2-2_icon_card_4.png" alt="">
+    
+    <div class="cd-overlay">
+      <div class="cd-title">비용절감</div>
+      <div class="cd-desc">설계 변경 최소화
+공사비 절감</div>
+    </div>
+  </div>
+  
+  <div class="cd-card">
+    
+    <img class="cd-bg" src="../figma-assets/2-2_icon_card_5.png" alt="">
+    
+    <div class="cd-overlay">
+      <div class="cd-title">데이터 관리</div>
+      <div class="cd-desc">체계적 정보 관리
+생애주기 활용</div>
+    </div>
+  </div>
+  
+</div>
+
+<style>
+.block-card-dark {
+  display: grid;
+  grid-template-columns: repeat(var(--cd-count, 3), 1fr);
+  gap: 12px;
+}
+.cd-card {
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  height: 200px;
+}
+.cd-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+.cd-bg-default {
+  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
+}
+.cd-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  text-align: center;
+  color: #ffffff;
+}
+.cd-title {
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 1.3;
+  margin-bottom: 6px;
+  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
+}
+.cd-desc {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  opacity: 0.9;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  white-space: pre-line;
+}
+</style></div></body>
+</html>

block-tests/cards_card-icon-desc.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head><meta charset="UTF-8"><title>cards/card-icon-desc</title>
+<style>
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+</style></head>
+<body><div class="block-container"><!-- 아이콘 설명 카드: 아이콘 + 제목 + 설명 (2~4열) -->
+<!--
+  📋 card-icon-desc
+  ─────────────────
+  용도: 기능/특성/장점을 아이콘과 함께 나열. 시각적으로 분류.
+  슬롯: cards[] (각 카드에 icon, title, description)
+  Figma 원본: 2-3_01 아이콘 3열 설명
+-->
+<div class="block-card-icon" style="--ci-count: 3">
+  
+  <div class="cid-card">
+    <div class="cid-icon">🔧</div>
+    <div class="cid-title">기술 기반</div>
+    <div class="cid-desc">건설 분야별
+전문지식과 경험</div>
+  </div>
+  
+  <div class="cid-card">
+    <div class="cid-icon">💻</div>
+    <div class="cid-title">S/W 역량</div>
+    <div class="cid-desc">디지털 도구와
+Process 통합</div>
+  </div>
+  
+  <div class="cid-card">
+    <div class="cid-icon">🌏</div>
+    <div class="cid-title">여건 조성</div>
+    <div class="cid-desc">사회·기업·제도
+수용 환경 구축</div>
+  </div>
+  
+</div>
+
+<style>
+.block-card-icon {
+  display: grid;
+  grid-template-columns: repeat(var(--ci-count, 3), 1fr);
+  gap: 16px;
+}
+.cid-card {
+  text-align: center;
+  padding: 20px 16px;
+  background: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+.cid-icon {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+.cid-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 6px;
+}
+.cid-desc {
+  font-size: 13px;
+  color: #475569;
+  line-height: 1.7;
+  white-space: pre-line;
+}
+</style></div></body></html>

block-tests/cards_card-image-3col.html

@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>cards/card-image-3col</title>
+<style>
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
+</style>
+</head>
+<body><div class="block-container"><!-- 이미지 카드: 상단 이미지 + 하단 텍스트 (2~4열) -->
+<!--
+  📋 card-image
+  ─────────────────
+  용도: 단계별 설명, 카테고리별 설명 (이미지가 핵심인 카드)
+  슬롯: cards[] 배열 (각 카드에 image, title, title_en, items[])
+  Figma 원본: 2-1_02 > Group 1171281594 (카드 3열)
+-->
+<div class="block-card-image" style="--ci-count: 3">
+  
+  <div class="ci-card">
+    
+    <img class="ci-img" src="../figma-assets/card_img_design.png" alt="설계단계">
+    
+    <div class="ci-body">
+      <div class="ci-title" style="color: #00aaff">설계단계</div>
+      <div class="ci-title-en">Design Stage</div>
+      <div class="ci-divider"></div>
+      <ul class="ci-list">
+        
+        <li>고도화된 BIM 구현</li>
+        
+        <li>최첨단 디지털트윈</li>
+        
+        <li>시뮬레이션 분석 & 성능평가</li>
+        
+        <li>지속가능한 인프라개발</li>
+        
+      </ul>
+      
+    </div>
+  </div>
+  
+  <div class="ci-card">
+    
+    <img class="ci-img" src="../figma-assets/card_img_construction.png" alt="시공 단계">
+    
+    <div class="ci-body">
+      <div class="ci-title" style="color: #006aff">시공 단계</div>
+      <div class="ci-title-en">Construction Stage</div>
+      <div class="ci-divider"></div>
+      <ul class="ci-list">
+        
+        <li>향상된 건설 계획과 공정 순서 관리</li>
+        
+        <li>Big Room 등 환경을 통한 협업 및 조정</li>
+        
+        <li>정확한 수량산출서와 비용 산정</li>
+        
+      </ul>
+      
+    </div>
+  </div>
+  
+  <div class="ci-card">
+    
+    <img class="ci-img" src="../figma-assets/card_img_maintenance.png" alt="유지관리 단계">
+    
+    <div class="ci-body">
+      <div class="ci-title" style="color: #004cbe">유지관리 단계</div>
+      <div class="ci-title-en">Maintenance Stage</div>
+      <div class="ci-divider"></div>
+      <ul class="ci-list">
+        
+        <li>자산 정보 및 데이터 관리</li>
+        
+        <li>예측 기반 유지보수 및 생애주기 분석</li>
+        
+        <li>효율적인 시설 운영 및 지속가능한 관리</li>
+        
+      </ul>
+      
+    </div>
+  </div>
+  
+</div>
+
+<style>
+.block-card-image {
+  display: grid;
+  grid-template-columns: repeat(var(--ci-count, 3), 1fr);
+  gap: 16px;
+}
+.ci-card {
+  background: var(--color-bg, #ffffff);
+  border-radius: var(--radius, 8px);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.ci-img {
+  width: 100%;
+  height: 160px;
+  object-fit: contain;
+  background: #f8f9fb;
+  padding: 10px;
+}
+.ci-body {
+  padding: 16px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.ci-title {
+  font-size: 14px;
+  font-weight: var(--weight-bold, 700);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  margin-bottom: 2px;
+}
+.ci-title-en {
+  font-size: 12px;
+  font-weight: var(--weight-normal, 400);
+  color: var(--color-text-secondary, #666);
+  margin-bottom: 10px;
+}
+.ci-divider {
+  width: 100%;
+  height: 1px;
+  background: #000;
+  margin-bottom: 10px;
+}
+.ci-list {
+  list-style: disc;
+  padding-left: 18px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--color-text, #000);
+  flex: 1;
+}
+.ci-list li {
+  margin-bottom: 3px;
+}
+.ci-source {
+  font-size: 11px;
+  color: var(--color-text-light, #94a3b8);
+  font-style: italic;
+  margin-top: 8px;
+  border-top: 1px solid var(--color-border, #e2e8f0);
+  padding-top: 6px;
+}
+</style></div></body>
+</html>

block-tests/cards_card-image-round.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-image-round</title>
+<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+</style></head><body><div class="block-container"><!-- 원형 이미지 카드: 원형 이미지 + 하단 제목/설명 -->
+<!--
+  📋 card-image-round
+  ─────────────────
+  용도: 포트폴리오형, 팀 소개, 가치/비전 표현 (원형 이미지가 핵심)
+  슬롯: cards[] (각 카드에 image, title, description)
+  Figma 원본: 1장_가치 하단 3열 원형 이미지 + 설명
+-->
+<div class="block-card-round" style="--cr-count: 3">
+  
+  <div class="cr-card">
+    
+    <div class="cr-img-wrap">
+      <img src="../figma-assets/card_img_design.png" alt="설계 혁신">
+    </div>
+    
+    <div class="cr-title">설계 혁신</div>
+    <div class="cr-desc">3D 모델 기반
+통합 설계</div>
+  </div>
+  
+  <div class="cr-card">
+    
+    <div class="cr-img-wrap">
+      <img src="../figma-assets/card_img_construction.png" alt="시공 효율">
+    </div>
+    
+    <div class="cr-title">시공 효율</div>
+    <div class="cr-desc">디지털 관리
+품질 향상</div>
+  </div>
+  
+  <div class="cr-card">
+    
+    <div class="cr-img-wrap">
+      <img src="../figma-assets/card_img_maintenance.png" alt="유지관리">
+    </div>
+    
+    <div class="cr-title">유지관리</div>
+    <div class="cr-desc">생애주기
+자산 관리</div>
+  </div>
+  
+</div>
+
+<style>
+.block-card-round {
+  display: grid;
+  grid-template-columns: repeat(var(--cr-count, 3), 1fr);
+  gap: 24px;
+  text-align: center;
+}
+.cr-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.cr-img-wrap {
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid #e2e8f0;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  margin-bottom: 12px;
+}
+.cr-img-wrap img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.cr-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 4px;
+}
+.cr-desc {
+  font-size: 13px;
+  color: #475569;
+  line-height: 1.6;
+  white-space: pre-line;
+  max-width: 200px;
+}
+</style></div></body></html>

block-tests/cards_card-numbered.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-numbered</title>
+<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+</style></head><body><div class="block-container"><!-- 번호 카드: 순서 번호 + 제목 + 설명 (세로 나열) -->
+<!--
+  📋 card-numbered
+  ─────────────────
+  용도: 순서가 있는 항목 나열 (1. 2. 3.), 실행 조건, 요구사항
+  슬롯: items[] (각 항목에 title, description)
+  card-icon-desc와 다른 점: 아이콘 대신 순서 번호, 세로 나열
+-->
+<div class="block-card-num">
+  
+  <div class="cn-item">
+    <div class="cn-number" style="background: #2563eb">1</div>
+    <div class="cn-body">
+      <div class="cn-title">요구사항 분석</div>
+      <div class="cn-desc">디지털 전환 목표 수립
+사용자 요구사항 수집</div>
+    </div>
+  </div>
+  
+  <div class="cn-item">
+    <div class="cn-number" style="background: #059669">2</div>
+    <div class="cn-body">
+      <div class="cn-title">S/W 개발</div>
+      <div class="cn-desc">건설산업 디지털화를 위한
+솔루션 개발 및 업그레이드</div>
+    </div>
+  </div>
+  
+  <div class="cn-item">
+    <div class="cn-number" style="background: #7c3aed">3</div>
+    <div class="cn-body">
+      <div class="cn-title">System 통합</div>
+      <div class="cn-desc">기존 시스템 호환성 분석
+API 데이터 통합</div>
+    </div>
+  </div>
+  
+  <div class="cn-item">
+    <div class="cn-number" style="background: #dc2626">4</div>
+    <div class="cn-body">
+      <div class="cn-title">교육/피드백</div>
+      <div class="cn-desc">사용자 교육 프로그램
+지속적 모니터링 & 개선</div>
+    </div>
+  </div>
+  
+</div>
+
+<style>
+.block-card-num {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.cn-item {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  padding: 12px 16px;
+  background: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+.cn-number {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 800;
+  flex-shrink: 0;
+}
+.cn-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 2px;
+}
+.cn-desc {
+  font-size: 13px;
+  color: #475569;
+  line-height: 1.7;
+  white-space: pre-line;
+}
+</style></div></body></html>

block-tests/cards_card-stat-number.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-stat-number</title>
+<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+</style></head><body><div class="block-container"><!-- 통계 숫자 카드: 큰 숫자 + 라벨 + 설명 -->
+<!--
+  📋 card-stat-number
+  ─────────────────
+  용도: KPI, 성과 수치, 목표 달성률, 비용 절감율 등 핵심 지표 강조
+  슬롯: stats[] (각 항목에 number, unit, label, description, color)
+  Figma 참고: 건설 정책 수치 (30% 절감, 40% 감소 등)
+-->
+<div class="block-stat" style="--st-count: 4">
+  
+  <div class="st-card">
+    <div class="st-number" style="color: #2563eb">
+      30<span class="st-unit">%</span>
+    </div>
+    <div class="st-label">공기/공사비 절감</div>
+    
+  </div>
+  
+  <div class="st-card">
+    <div class="st-number" style="color: #059669">
+      40<span class="st-unit">%</span>
+    </div>
+    <div class="st-label">안전사고 감소</div>
+    
+  </div>
+  
+  <div class="st-card">
+    <div class="st-number" style="color: #7c3aed">
+      220<span class="st-unit">명+</span>
+    </div>
+    <div class="st-label">IT+CIVIL ENG 인력</div>
+    
+  </div>
+  
+  <div class="st-card">
+    <div class="st-number" style="color: #dc2626">
+      80<span class="st-unit">개+</span>
+    </div>
+    <div class="st-label">전용 S/W 개발</div>
+    
+  </div>
+  
+</div>
+
+<style>
+.block-stat {
+  display: grid;
+  grid-template-columns: repeat(var(--st-count, 3), 1fr);
+  gap: 16px;
+}
+.st-card {
+  text-align: center;
+  padding: 20px 12px;
+  background: #f8fafc;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+}
+.st-number {
+  font-size: 36px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+.st-unit {
+  font-size: 18px;
+  font-weight: 700;
+  margin-left: 2px;
+}
+.st-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-top: 6px;
+}
+.st-desc {
+  font-size: 12px;
+  color: #64748b;
+  margin-top: 4px;
+  line-height: 1.5;
+  white-space: pre-line;
+}
+</style></div></body></html>

block-tests/cards_card-step-vertical.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-step-vertical</title>
+<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+</style></head><body><div class="block-container"><!-- 세로 단계 카드: 좌측 단계 마커 + 우측 이미지/텍스트 -->
+<!--
+  📋 card-step-vertical
+  ─────────────────
+  용도: 생애주기 단계별 설명, 시간순 프로세스 (설계→시공→운영→유지관리)
+  슬롯: steps[] (각 단계에 phase, title, description, image, color)
+  Figma 원본: 2-3_04 "건설 생애주기와 정보모델 연계" (설계단계/시공단계/운영관리/유지관리)
+-->
+<div class="block-step-v">
+  
+  <div class="sv-step">
+    <div class="sv-marker" style="background: #00aaff">
+      <div class="sv-phase">설계단계</div>
+    </div>
+    <div class="sv-content">
+      <div class="sv-title">BIM 기반 3D 설계</div>
+      
+      <div class="sv-desc">• 고도화된 BIM 구현
+• 시뮬레이션 분석 & 성능평가</div>
+    </div>
+  </div>
+  
+  <div class="sv-connector">
+    <div class="sv-line" style="background: #00aaff"></div>
+  </div>
+  
+  
+  <div class="sv-step">
+    <div class="sv-marker" style="background: #006aff">
+      <div class="sv-phase">시공단계</div>
+    </div>
+    <div class="sv-content">
+      <div class="sv-title">현장 디지털 관리</div>
+      
+      <div class="sv-desc">• 공정 순서 관리
+• Big Room 협업 환경</div>
+    </div>
+  </div>
+  
+  <div class="sv-connector">
+    <div class="sv-line" style="background: #006aff"></div>
+  </div>
+  
+  
+  <div class="sv-step">
+    <div class="sv-marker" style="background: #004cbe">
+      <div class="sv-phase">운영단계</div>
+    </div>
+    <div class="sv-content">
+      <div class="sv-title">디지털 트윈 운영</div>
+      
+      <div class="sv-desc">• 실시간 모니터링
+• 예측 기반 유지보수</div>
+    </div>
+  </div>
+  
+  
+</div>
+
+<style>
+.block-step-v {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.sv-step {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.sv-marker {
+  width: 100px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  padding: 10px 12px;
+  text-align: center;
+  color: #ffffff;
+}
+.sv-phase {
+  font-size: 13px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.sv-content {
+  flex: 1;
+  background: #f8fafc;
+  border-radius: 8px;
+  padding: 14px;
+  border: 1px solid #e2e8f0;
+}
+.sv-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+.sv-img {
+  width: 100%;
+  max-height: 150px;
+  object-fit: cover;
+  border-radius: 6px;
+  margin-bottom: 8px;
+}
+.sv-desc {
+  font-size: 13px;
+  color: #475569;
+  line-height: 1.7;
+  white-space: pre-line;
+}
+.sv-connector {
+  display: flex;
+  justify-content: 50px;
+  padding-left: 48px;
+  height: 20px;
+}
+.sv-line {
+  width: 3px;
+  height: 100%;
+  border-radius: 2px;
+  opacity: 0.4;
+}
+</style></div></body></html>

block-tests/cards_card-tag-image.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head><meta charset="UTF-8"><title>cards/card-tag-image</title>
+<style>
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+</style></head>
+<body><div class="block-container"><!-- 태그 카드: 상단 태그 라벨 + 이미지 + 설명 -->
+<!--
+  📋 card-tag-image
+  ─────────────────
+  용도: 카테고리별 분류 (제조/건축/토목 등), 태그로 구분되는 항목
+  슬롯: cards[] (각 카드에 tag, tag_color, image, title, description)
+  Figma 원본: 2-3_01 "산업별 특성과 현장의 모습" (제조, 건축, 인프라/토목)
+-->
+<div class="block-card-tag" style="--ct-count: 3">
+  
+  <div class="ct-card">
+    <div class="ct-tag" style="background: #2563eb">제조</div>
+    
+    <div class="ct-title">제조업 현장</div>
+    <div class="ct-desc">반복적 공정
+표준화된 부품
+자동화 라인</div>
+  </div>
+  
+  <div class="ct-card">
+    <div class="ct-tag" style="background: #059669">건축</div>
+    
+    <div class="ct-title">건축 현장</div>
+    <div class="ct-desc">수직적 작업공간
+Library 기반 설계
+반복 요소 활용</div>
+  </div>
+  
+  <div class="ct-card">
+    <div class="ct-tag" style="background: #dc2626">인프라/토목</div>
+    
+    <div class="ct-title">인프라 현장</div>
+    <div class="ct-desc">수평적 작업공간
+비반복적 공정
+GIS 기반 위치정보 필수</div>
+  </div>
+  
+</div>
+
+<style>
+.block-card-tag {
+  display: grid;
+  grid-template-columns: repeat(var(--ct-count, 3), 1fr);
+  gap: 16px;
+}
+.ct-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.ct-tag {
+  display: inline-block;
+  padding: 4px 14px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #ffffff;
+  border-radius: 0 0 8px 0;
+  align-self: flex-start;
+}
+.ct-img {
+  width: 100%;
+  height: 140px;
+  object-fit: cover;
+}
+.ct-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1e293b;
+  padding: 10px 14px 4px;
+}
+.ct-desc {
+  font-size: 13px;
+  color: #475569;
+  line-height: 1.7;
+  padding: 0 14px 14px;
+  white-space: pre-line;
+}
+</style></div></body></html>

block-tests/cards_card-text-grid.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>cards/card-text-grid</title>
+<style>
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
+</style>
+</head>
+<body><div class="block-container"><!-- 카드 그리드 블록: 2~4열 카드 배열 -->
+<div class="block-card-grid" style="--card-count: 3">
+    
+    <div class="card" style="border-top-color: None">
+        
+        <div class="card-title">건설산업</div>
+        <span class="card-category">종합산업</span>
+        <div class="card-description">다양한 시설물을 광범위한 기술을 통합·융합하여 만들어내는 종합산업</div>
+        
+    </div>
+    
+    <div class="card" style="border-top-color: None">
+        
+        <div class="card-title">BIM</div>
+        <span class="card-category">핵심 인프라 기술</span>
+        <div class="card-description">시설물 생애주기 정보를 3D 모델 기반으로 통합·관리하는 도구</div>
+        <div class="card-source">국토교통부, 2020</div>
+    </div>
+    
+    <div class="card" style="border-top-color: None">
+        
+        <div class="card-title">DX</div>
+        <span class="card-category">패러다임 변화</span>
+        <div class="card-description">디지털 기술 기반으로 업무방식과 가치 창출 구조를 전환하는 과정</div>
+        <div class="card-source">IBM, 2011</div>
+    </div>
+    
+</div>
+
+<style>
+.block-card-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--card-count, 3), 1fr);
+    gap: var(--spacing-inner);
+    height: 100%;
+}
+.card {
+    background: var(--color-bg);
+    border: var(--border-width) solid var(--color-border);
+    border-top: var(--accent-border) solid var(--color-accent);
+    border-radius: var(--radius);
+    padding: var(--spacing-inner);
+    display: flex;
+    flex-direction: column;
+}
+.card-icon {
+    font-size: 1.5rem;
+    margin-bottom: var(--spacing-small);
+}
+.card-title {
+    font-size: var(--font-subtitle);
+    font-weight: var(--weight-bold);
+    color: var(--color-primary);
+    margin-bottom: 4px;
+}
+.card-category {
+    font-size: var(--font-small);
+    font-weight: var(--weight-medium);
+    color: var(--color-accent);
+    background: #dbeafe;
+    padding: 2px 8px;
+    border-radius: 12px;
+    display: inline-block;
+    margin-bottom: var(--spacing-small);
+    width: fit-content;
+}
+.card-description {
+    font-size: var(--font-body);
+    color: var(--color-text);
+    line-height: var(--line-height-ko);
+    flex: 1;
+}
+.card-source {
+    font-size: var(--font-small);
+    color: var(--color-text-light);
+    font-style: italic;
+    margin-top: var(--spacing-small);
+    border-top: var(--border-width) solid var(--color-border);
+    padding-top: var(--spacing-small);
+}
+</style></div></body>
+</html>

block-tests/circle-label.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>블록 테스트: circle-label</title>
+<style>
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body {
+    font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
+    background: #e8ecf0;
+    display: flex;
+    justify-content: center;
+    padding: 30px;
+    margin: 0;
+}
+.block-container {
+    width: 920px;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+}
+.block-container .block-section-title {
+    margin: -20px -20px 0;
+    border-radius: 8px 8px 0 0;
+    overflow: hidden;
+}
+</style>
+</head>
+<body>
+<div class="block-container">
+<!-- 원형 라벨: CSS 그라데이션 원 + 중앙 텍스트 -->
+<!--
+  📋 circle-label
+  ─────────────────
+  용도: 섹션 전환점, 핵심 키워드 강조, 시각적 구분자
+  슬롯: label (필수), sub_label (선택)
+  Figma 원본: 2-1_02 > Group 1171281590 (190x190)
+-->
+<div class="block-circle-label">
+  <div class="cl-outer">
+    <div class="cl-inner">
+      <div class="cl-text">단계별
+BIM의 활용</div>
+      
+    </div>
+  </div>
+</div>
+
+<style>
+.block-circle-label {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+}
+.cl-outer {
+  width: 190px;
+  height: 190px;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #3db8ff 0%, #006aff 100%);
+  box-shadow: 0 0 30px rgba(0, 106, 255, 0.25), 0 0 60px rgba(0, 106, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cl-inner {
+  width: 170px;
+  height: 170px;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #4dc4ff 0%, #0080ff 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  text-align: center;
+}
+.cl-text {
+  font-size: 20px;
+  font-weight: var(--weight-bold, 700);
+  line-height: 1.4;
+}
+.cl-sub {
+  font-size: 12px;
+  opacity: 0.8;
+  margin-top: 4px;
+}
+</style>
+</div>
+</body>
+</html>

block-tests/compare-box.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>compare-box</title>
+<style>
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+</style>
+</head>
+<body><div class="block-container"><!-- 비교 박스: 둥근 테두리 박스 2개 + VS 라벨 -->
+<!--
+  📋 compare-box
+  ─────────────────
+  용도: 2개 개념을 시각적으로 대비 (비교 테이블 위 헤더로 사용)
+  슬롯: left_label, left_sub, right_label, right_sub
+  Figma 원본: 2-1_02 > 하늘색 둥근 박스 2개 + 시안 텍스트
+-->
+<div class="block-compare-box">
+  <div class="cb-item">
+    <div class="cb-text">
+      <div class="cb-label">디지털 기술을 활용한
+협업 프로세스</div>
+      
+    </div>
+  </div>
+  <div class="cb-vs">VS</div>
+  <div class="cb-item">
+    <div class="cb-text">
+      <div class="cb-label">시설물의 전 생애주기 동안
+정보의 생성 및 관리</div>
+      
+    </div>
+  </div>
+</div>
+
+<style>
+.block-compare-box {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  padding: 15px 0;
+}
+.cb-item {
+  width: 340px;
+  height: 110px;
+  border-radius: 55px;
+  border: 3px solid #7ec8f0;
+  background: linear-gradient(135deg, #e8f4fd 0%, #d4ecfa 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 10px rgba(0, 140, 220, 0.1);
+}
+.cb-text {
+  text-align: center;
+}
+.cb-label {
+  font-size: 19px;
+  font-weight: 800;
+  color: #0090d0;
+  line-height: 1.4;
+}
+.cb-sub {
+  font-size: 13px;
+  color: #0090d0;
+  margin-top: 3px;
+  line-height: 1.5;
+  white-space: pre-line;
+  font-weight: 500;
+}
+.cb-vs {
+  font-size: 22px;
+  font-weight: 700;
+  color: #333;
+  flex-shrink: 0;
+}
+</style></div></body>
+</html>

block-tests/comparison-table.html

@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>comparison-table</title>
+<style>
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
+.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
+</style>
+</head>
+<body><div class="block-container"><!-- 비교 테이블: BIM vs DX 스타일 3단 테이블 -->
+<!--
+  📋 comparison-table
+  ─────────────────
+  용도: 다항목 비교 (좌측 A | 중앙 기준 | 우측 B)
+  슬롯: headers[] (3개), rows[][] (각 행 3칸)
+  Figma 원본: 2-1_02 > BIM VS D/X 테이블
+  특징: 중앙 칼럼에 파란 그라데이션 배지, 좌우 불릿 대비
+-->
+<div class="block-table-figma">
+  <table>
+    <thead>
+      <tr>
+        
+        <th class="th-left">
+          BIM
+        </th>
+        
+        <th class="th-center">
+          <span class="th-badge">VS</span>
+        </th>
+        
+        <th class="th-right">
+          D/X
+        </th>
+        
+      </tr>
+    </thead>
+    <tbody>
+      
+      <tr>
+        
+        <td class="td-left">• Only 3D</td>
+        
+        <td class="td-center">BIM · D/X</td>
+        
+        <td class="td-right">• BIM ≪ D/X (ENG. + Management 포함)</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• 모델 제작용 상용 S/W
+(Civil 3D, Revit, Navisworks, Autocad)</td>
+        
+        <td class="td-center">S/W</td>
+        
+        <td class="td-right">• 제작 및 운영(상용 + 전용 40~80개)
+[Rhino, Sketchup, Blender...] + [EG-BIM 등]</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• 기존 2D 설계방식 유지</td>
+        
+        <td class="td-center">프로세스</td>
+        
+        <td class="td-right">• 근본적 문제의식을 통한 개선</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• 3D 모델 중심
+• 기존 성과품 유지</td>
+        
+        <td class="td-center">성과물</td>
+        
+        <td class="td-right">• 공학 정보 및 콘텐츠 연계에 집중
+• 도면, 수량, 시공계획 등 일식</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• 3D 모델에 의한 일반적 이해 향상</td>
+        
+        <td class="td-center">활용</td>
+        
+        <td class="td-right">• 설계/시공의 혁신(개념의 재정립)</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• (설계/시공/운영) 분야별 단절</td>
+        
+        <td class="td-center">확장성</td>
+        
+        <td class="td-right">• 전 생애주기 활용 시스템</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• 단순화(오류) - 수동적/집단적 동질화</td>
+        
+        <td class="td-center">수행개념</td>
+        
+        <td class="td-right">• 구체화(복잡) - 적극/구체적 실현 방안</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• 소극적, 상용 기술에 의존</td>
+        
+        <td class="td-center">CIVIL + IT</td>
+        
+        <td class="td-right">• 적극적, 주체적인 기술 접목/융합</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• S/W 제작사 판매 정책에 의존</td>
+        
+        <td class="td-center">주체</td>
+        
+        <td class="td-right">• 자체 수행능력 - 지속가능성 확보</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• 평준화, 국내 중심</td>
+        
+        <td class="td-center">발주처</td>
+        
+        <td class="td-right">• 차별화 및 경쟁력 확보, 해외 진출</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• 소규모 BIM팀 운영 + 단순교육에 집중</td>
+        
+        <td class="td-center">설계사</td>
+        
+        <td class="td-right">• IT + CIVIL ENG 220명 운영 + 기술 개발</td>
+        
+      </tr>
+      
+      <tr>
+        
+        <td class="td-left">• 국내 토목 소극적/ 해외 토목증가</td>
+        
+        <td class="td-center">시공사</td>
+        
+        <td class="td-right">• 분야 확장 모델 및 시스템</td>
+        
+      </tr>
+      
+    </tbody>
+  </table>
+</div>
+
+<style>
+.block-table-figma {
+  overflow: auto;
+}
+.block-table-figma table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+/* 헤더 */
+.block-table-figma thead th {
+  padding: 14px 12px;
+  font-size: 16px;
+  font-weight: 700;
+  border-bottom: 2px solid #e8edf2;
+}
+.th-left {
+  text-align: center;
+  color: #6bcdff;
+}
+.th-center {
+  text-align: center;
+  width: 120px;
+}
+.th-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #006eff 0%, #00aaff 100%);
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 700;
+  padding: 8px 28px;
+  border-radius: 25px;
+}
+.th-right {
+  text-align: center;
+  color: #006eff;
+}
+
+/* 본문 */
+.block-table-figma tbody td {
+  padding: 10px 14px;
+  border-bottom: 1px solid #f0f2f5;
+  vertical-align: middle;
+}
+.td-left {
+  text-align: center;
+  color: #444;
+}
+.td-center {
+  text-align: center;
+  font-weight: 700;
+  color: #333;
+  background: #f6f8fb;
+  font-size: 13px;
+}
+.td-right {
+  text-align: center;
+  color: #444;
+}
+.block-table-figma tbody tr:hover {
+  background: #fafbfd;
+}
+</style></div></body>
+</html>