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>

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>

block-tests/conclusion-bar.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>conclusion-bar</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"><!-- 결론 바: Figma 톤에 맞춘 하단 핵심 메시지 -->
+<!--
+  📋 conclusion-bar
+  ─────────────────
+  용도: 슬라이드/페이지 하단 핵심 한 줄 요약
+  슬롯: conclusion_text (필수), label (선택)
+  Figma 톤: 밝은 회색 배경 + 좌측 파란 액센트 라인 + 진한 텍스트
+-->
+<div class="block-conclusion-figma">
+  <div class="cf-label">핵심 요약</div>
+  <div class="cf-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
+</div>
+
+<style>
+.block-conclusion-figma {
+  background: #f4f6f9;
+  border-left: 4px solid #006aff;
+  border-radius: 0 8px 8px 0;
+  padding: 18px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.cf-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #006aff;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.cf-text {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e293b;
+  line-height: 1.6;
+  word-break: keep-all;
+}
+</style></div></body>
+</html>

block-tests/emphasis_banner-gradient.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>emphasis/banner-gradient</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"><!-- 그라데이션 배너 바: 전체 너비 파란 그라데이션 + 중앙 텍스트 -->
+<!--
+  📋 banner-gradient
+  ─────────────────
+  용도: 섹션 구분, 핵심 선언, 강조 문구를 전체 너비 배너로
+  슬롯: text (필수), sub_text (선택)
+  Figma 원본: 2-2_01 하단, 2-2_03 분류 바
+-->
+<div class="block-banner-grad">
+  <div class="bg-text">Engineering Software는 건설산업 DX를 실현하기 위한 핵심 도구입니다</div>
+  <div class="bg-sub">단순 도구가 아닌, 엔지니어의 전문지식과 프로세스를 디지털화하는 기반 기술</div>
+</div>
+
+<style>
+.block-banner-grad {
+  background: linear-gradient(135deg, #006aff 0%, #00aaff 100%);
+  border-radius: 8px;
+  padding: 16px 30px;
+  text-align: center;
+  color: #ffffff;
+}
+.bg-text {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.5;
+}
+.bg-sub {
+  font-size: 12px;
+  font-weight: 400;
+  opacity: 0.85;
+  margin-top: 4px;
+}
+</style></div></body>
+</html>

block-tests/emphasis_callout-solution.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/callout-solution</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"><!-- 솔루션 콜아웃: 강조 배경 + 아이콘 + 제목 + 설명 -->
+<!--
+  📋 callout-solution
+  ─────────────────
+  용도: 핵심 해결책/솔루션/방향성 강조. 눈에 띄는 콜아웃 박스.
+  슬롯: icon (선택), title (필수), description (필수), source (선택)
+  Figma 원본: 2-3_05 "Solution 제시 포인트"
+-->
+<div class="block-callout-sol">
+  <div class="cs-icon">💡</div>
+  <div class="cs-body">
+    <div class="cs-title">Solution 제시 포인트</div>
+    <div class="cs-desc">지금의 방식 속에서도 앞으로도 지속적으로 가능할까?
+건설산업의 디지털 전환을 위해 근본적인 변화가 필요한 시점입니다.</div>
+    <div class="cs-source">건설산업 DX 전략 보고서</div>
+  </div>
+</div>
+
+<style>
+.block-callout-sol {
+  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+  border: 2px solid #93c5fd;
+  border-radius: 12px;
+  padding: 20px 24px;
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.cs-icon {
+  font-size: 2rem;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.cs-body {
+  flex: 1;
+}
+.cs-title {
+  font-size: 17px;
+  font-weight: 800;
+  color: #1e40af;
+  margin-bottom: 6px;
+}
+.cs-desc {
+  font-size: 14px;
+  color: #334155;
+  line-height: 1.7;
+  white-space: pre-line;
+  word-break: keep-all;
+}
+.cs-source {
+  font-size: 11px;
+  color: #64748b;
+  font-style: italic;
+  margin-top: 8px;
+}
+</style></div></body></html>

block-tests/emphasis_callout-warning.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/callout-warning</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"><!-- 경고 콜아웃: 주의/경고/문제점 강조 -->
+<!--
+  📋 callout-warning
+  ─────────────────
+  용도: 문제점 지적, 주의사항, 잘못된 접근 경고
+  슬롯: title (필수), description (필수), icon (선택)
+  callout-solution과 다른 점: 경고 톤 (빨간/주황), 문제 지적용
+-->
+<div class="block-callout-warn">
+  <div class="cw-icon">⚠️</div>
+  <div class="cw-body">
+    <div class="cw-title">현재 접근 방식의 한계</div>
+    <div class="cw-desc">단순 BIM S/W 도입만으로는 DX를 달성할 수 없습니다.
+기존 2D 설계방식 위에 3D를 덧씌우는 접근은
+비용 증가와 효율 저하를 초래합니다.</div>
+  </div>
+</div>
+
+<style>
+.block-callout-warn {
+  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+  border: 2px solid #fca5a5;
+  border-radius: 12px;
+  padding: 20px 24px;
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.cw-icon {
+  font-size: 2rem;
+  flex-shrink: 0;
+}
+.cw-body { flex: 1; }
+.cw-title {
+  font-size: 17px;
+  font-weight: 800;
+  color: #991b1b;
+  margin-bottom: 6px;
+}
+.cw-desc {
+  font-size: 14px;
+  color: #7f1d1d;
+  line-height: 1.7;
+  white-space: pre-line;
+  word-break: keep-all;
+}
+</style></div></body></html>

block-tests/emphasis_comparison-2col.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>emphasis/comparison-2col</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단 병렬 레이아웃 -->
+<div class="block-comparison">
+    <div class="comparison-left">
+        <div class="comparison-header comparison-header--left">잘못된 인식</div>
+        
+        <div class="comparison-content">• BIM 기술 도입 = DX 완성
+• DX를 단순 기술 도입으로 한정
+• 개별 기술 중심의 접근</div>
+    </div>
+    <div class="comparison-divider"></div>
+    <div class="comparison-right">
+        <div class="comparison-header comparison-header--right">올바른 이해</div>
+        
+        <div class="comparison-content">• DX는 BIM을 포함한 상위 개념
+• 산업 패러다임의 근본적 변화
+• GIS-BIM-디지털트윈 기술 융합 필수</div>
+    </div>
+</div>
+
+<style>
+.block-comparison {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: var(--spacing-inner);
+    height: 100%;
+}
+.comparison-divider {
+    width: 1px;
+    background: var(--color-border);
+}
+.comparison-header {
+    font-size: var(--font-subtitle);
+    font-weight: var(--weight-bold);
+    padding-bottom: var(--spacing-small);
+    margin-bottom: var(--spacing-small);
+    border-bottom: var(--accent-border) solid;
+}
+.comparison-header--left {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+}
+.comparison-header--right {
+    border-color: var(--color-danger);
+    color: var(--color-danger);
+}
+.comparison-subtitle {
+    font-size: var(--font-caption);
+    color: var(--color-text-secondary);
+    margin-bottom: var(--spacing-small);
+}
+.comparison-content {
+    font-size: var(--font-body);
+    line-height: var(--line-height-ko);
+}
+</style></div></body>
+</html>

block-tests/emphasis_conclusion-accent-bar.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>emphasis/conclusion-accent-bar</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"><!-- 결론 바: Figma 톤에 맞춘 하단 핵심 메시지 -->
+<!--
+  📋 conclusion-bar
+  ─────────────────
+  용도: 슬라이드/페이지 하단 핵심 한 줄 요약
+  슬롯: conclusion_text (필수), label (선택)
+  Figma 톤: 밝은 회색 배경 + 좌측 파란 액센트 라인 + 진한 텍스트
+-->
+<div class="block-conclusion-figma">
+  <div class="cf-label">핵심 요약</div>
+  <div class="cf-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
+</div>
+
+<style>
+.block-conclusion-figma {
+  background: #f4f6f9;
+  border-left: 4px solid #006aff;
+  border-radius: 0 8px 8px 0;
+  padding: 18px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.cf-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #006aff;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.cf-text {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e293b;
+  line-height: 1.6;
+  word-break: keep-all;
+}
+</style></div></body>
+</html>

block-tests/emphasis_dark-bullet-list.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head><meta charset="UTF-8"><title>emphasis/dark-bullet-list</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"><!-- 다크 배경 불릿 리스트: 짙은 배경 + 흰 텍스트 불릿 목록 -->
+<!--
+  📋 dark-bullet-list
+  ─────────────────
+  용도: 핵심 포인트를 짙은 배경 위에 강조. 시각적 무게감.
+  슬롯: title (선택), bullets[] (필수)
+  Figma 원본: 2-2_01 하단, 2-3_01 하단 다크 섹션
+-->
+<div class="block-dark-bullets">
+  <div class="db-title">건설산업 DX의 핵심 과제</div>
+  <ul class="db-list">
+    
+    <li>기존 2D 설계방식의 근본적 한계 인식</li>
+    
+    <li>3D 모델 기반의 정보 통합·관리 체계 구축</li>
+    
+    <li>전 생애주기 데이터 연계 및 활용 시스템 도입</li>
+    
+    <li>디지털 트윈 기반 시뮬레이션 및 의사결정 지원</li>
+    
+  </ul>
+</div>
+
+<style>
+.block-dark-bullets {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  border-radius: 8px;
+  padding: 20px 28px;
+  color: #ffffff;
+}
+.db-title {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  color: #93c5fd;
+}
+.db-list {
+  list-style: none;
+  padding: 0;
+}
+.db-list li {
+  font-size: 14px;
+  line-height: 1.8;
+  padding-left: 16px;
+  position: relative;
+  margin-bottom: 4px;
+}
+.db-list li::before {
+  content: '•';
+  position: absolute;
+  left: 0;
+  color: #60a5fa;
+}
+</style></div></body></html>