# Frame 1171281182 — 실측 기록 (flat)

> 원본: 1248 × 1066 px (node 182:2523, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373)
> 패턴: cards-3-category-with-bim-process-diagram (상단 3 카테고리 카드 + 하단 BIM 모델/공사 Process 연계 원형 다이어그램)
> Scale: **min(1280/1248, 720/1066) = 720/1066 = 0.67542** (height fit, 843×720 block)

## 구조 (bottom-up)

```
Frame 182:2523 "Frame 1171281182" (1248 × 1066)
│
├─ ① 헤더 (title-row, flex gap 25)
│  ├─ 182:2551 icon 50×50  ← title_icon.png (녹색 원형, 1171281179와 공유)
│  └─ 182:2552 TEXT "시공단계 BIM 모델과 정보 활용 구분" — 50px Bold black (gradient bg-clip-text 솔리드 검정)
│
├─ ② 상단 3 카테고리 카드
│  │
│  ├─ Section 1 — Model-based (top=116)
│  │   ├─ 182:2567 brown label (21, 116, 335×124) — bg rgba(50,31,9,0.8), rounded right r=20, drop-shadow
│  │   │   "모델" 45px #FFE100 yellow + "기반" 38px white
│  │   │   "(Model-based)" 38px white
│  │   ├─ 182:2569 white card (378, 116, 870×124) — border 3px #A5BBB4, rounded right r=20
│  │   ├─ 182:2570 card decor (981, 119, 264×118) — card_decor.png (rounded-bl,tl r=17)
│  │   └─ 182:2571 body list (378, 148, 821×77) — 40px Bold black, list-disc
│  │       "최종 목적물의 전체 또는 부분 [3D 형상정보 ] 활용"
│  │       (강조: 45px #144838)
│  │
│  ├─ Section 2 — Object-based (top=263)
│  │   ├─ 182:2555 brown label (19, 263, 335×124) — 동일 스타일
│  │   │   "객체" 45px yellow + "기반" 38px white / "(Object-based)" 38px
│  │   ├─ 182:2557 white card (376, 263, 870×124)
│  │   ├─ 182:2558 card decor (983, 265, 260×119)
│  │   └─ 182:2559 body list (376, 295, 857×77)
│  │       "Model의 개별 [객체]에 정의된 [건설정보 ]활용"
│  │
│  └─ Section 3 — Position-based (top=411)
│      ├─ 182:2562 brown label (21, 411, 335×124)
│      │   "위치" 45px yellow + "기반" 38px white / "(Position-based)" 38px
│      ├─ 182:2564 white card (378, 411, 870×124)
│      ├─ 182:2565 card decor (981, 413, 265×119)
│      └─ 182:2566 body list (378, 442, 821×77)
│          "공사 중 발생하는 데이터의 [위치정보] 활용"
│
└─ ③ 하단 BIM 모델 / 공사 Process 연계 다이어그램 (656~1029)
   │
   ├─ 182:2537 container_bg.png (66, 660, 1084×370) — 큰 둥근 컨테이너 BG, rounded 69
   ├─ 182:2535 wave_bg crop A (62, 656, 425×374, overflow hidden, image scaled 708%) — 좌측 부분
   ├─ 182:2536 wave_bg crop B (475, 656, 675×374, overflow hidden, image translate-left 442%) — 우측 부분
   │
   ├─ 좌측 BIM 모델 영역
   │   ├─ 182:2526 circle_bg.png (164, 707, 294×294)
   │   ├─ 182:2539 left_circle_content (167, 656, 374×374) — BIM 와이어프레임
   │   ├─ 182:2540 left_inner_decor (192.7, 742.55, 307×215)
   │   ├─ 182:2527 dot_small (190, 717, 41×41)
   │   ├─ 182:2531 dot_small (246, 995, 20×20)
   │   ├─ 182:2532 element_122 (195, 944, 122×122)
   │   └─ 182:2542 TEXT "BIM 모델" — 45px Bold gradient (#276853 → #B65320)
   │       container at (233.29, 801, 256×?), text-shadow 0 7 4 rgba(0,0,0,0.5)
   │
   ├─ 가운데 X-shape decoration
   │   ├─ 182:2543 x_shape_center (475, 743.05, 250×200)
   │   ├─ 182:2544 x_shape_center mirror (-scale-y-100) (475, 741, 250×200)
   │   └─ 182:2530 dot_small (446, 850, 20×20)
   │
   └─ 우측 공사 Process 연계 영역
       ├─ 182:2525 circle_bg.png (590, 707, 294×294)
       ├─ 182:2538 right_circle_content (671, 656, 374×374, opacity 0.95) — 페이퍼/문서
       ├─ 182:2545 right_overlay (820, 771, 152×180, opacity 0.7)
       ├─ 182:2529 dot_small (822, 733, 20×20)
       ├─ 182:2528 dot_small (650.03, 980, 41×41)
       ├─ 182:2533 element_122 (772, 682, 122×122)
       └─ 182:2547 TEXT "공사 / Process 연계" — 45px Bold gradient
           container at (720, 717, 256×214), 2 lines (line-height 60)
```

## 에셋 (12개)

| 파일 | 의미 | 크기 | 사용 |
|------|------|------|------|
| `title_icon.png` | 녹색 원형 아이콘 (1171281179 공유) | 50×50 | 1× |
| `card_decor.png` | 카드 우측 장식 (1171281179 공유) | 264×118 | 3× |
| `container_bg.png` | 하단 다이어그램 컨테이너 큰 둥근 BG | 1084×370 | 1× |
| `circle_bg.png` | 원형 둥근 사각 BG | 294×294 | 2× |
| `left_circle_content.png` | 좌측 BIM 와이어프레임 모델 | 374×374 | 1× |
| `right_circle_content.png` | 우측 페이퍼/문서 (opacity 0.95) | 374×374 | 1× |
| `left_inner_decor.png` | 좌측 원 안 장식 | 307×215 | 1× |
| `x_shape_center.png` | 중앙 X 모양 (원래 + 거울 mirror) | 250×200 | 2× |
| `right_overlay.png` | 우측 추가 오버레이 (opacity 0.7) | 152×180 | 1× |
| `wave_bg.png` | 컨테이너 안 wave 배경 (좌/우 crop 변형) | 425×374 / 675×374 | 2× |
| `dot_small.png` | 작은 동그라미 dot | 41×41 / 20×20 | 5× |
| `element_122.png` | 보조 장식 122×122 | 122×122 | 2× |

## 이상 탐지 결과

| 검사 | 결과 |
|------|------|
| 회전 | x_shape_center 두 번째 인스턴스 `-scale-y-100` (수직 미러) |
| Vector 좌표 metadata vs design_context | 일치 |
| **z-order 비정상** | 본문 ul들이 카드/decor 뒤에 섹션별로 분산 그려짐 — overlap 시각 영향 없음 |
| 중복 노드 | circle_bg (2×), x_shape_center (2×), card_decor (3×), dot_small (5×), element_122 (2×) — 정상 재사용 |
| **wave_bg crop** | 동일 src를 width 708%/542%로 스케일링하여 다른 부분 노출 — overflow:hidden 처리 필요 |

## 변형 가능 축

- **categories[N=3] (required)** — 모델기반 / 객체기반 / 위치기반 (cardinality 3 고정)
  - `category_label_kr` (required, 한글, 강조 부분 yellow)
  - `category_label_en` (required, "(English-based)" 형식)
  - `category_body` (required, list-disc, 인라인 #144838 강조)
- **bottom_diagram (optional?)** — BIM 모델 ↔ 공사 Process 연계 다이어그램. 다른 구성 가능
  - `left_label` (required, "BIM 모델" 형태, 45px gradient)
  - `right_label` (required, "공사 / Process 연계" 형태, 2 lines OK)
  - 좌/우 원 콘텐츠 이미지는 도메인-specific (BIM, Process 시각화)
- `title` (required, 50px Bold gradient bg-clip-text)
- `title_icon` (required, 녹색 원형)

## Sub-patterns

- `cards-3-category-rounded-right` — 1171281179와 동일 사이드 라벨 패턴 (label-body-rounded-right-pair) 재사용
- `dual-circle-process-diagram` — 신규 sub-pattern. 좌/우 큰 원 + 중앙 X-shape decoration + 다중 작은 dot 장식
  - 좌/우 원: circle_bg + content(domain image) + decor 오버레이
  - 중앙: X-shape (mirror 적용)
  - 라벨: 45px Bold gradient bg-clip-text 텍스트

## 임시 보정 (1:1, 템플릿화 시 재고려)

- 하단 다이어그램의 모든 dot_small / element_122 위치는 Figma 데이터 그대로. 템플릿화 시 단순화 가능
- wave_bg crop은 단일 이미지를 두 영역에 다른 변환으로 사용 — overflow:hidden 수동 적용
- x_shape_center mirror는 CSS `transform: scaleY(-1)` (회전 아님)