# Frame 1171281211 — BIM 3-Circles (건설산업의 목표)

> 원본: 2062.205 × 956.998 px
> Scale: × 0.620694 → 1280 × 593.96 px (슬라이드 16:9 안에 배치)
> Node ID: 66:310 (Figma)
> 전략: CSS `transform: scale()` 균일 축소 → 내부는 Figma 원본 좌표계 유지

## 계층 경로

```
Frame 66:310 "Frame 1171281211" (2062.21 × 956.998)
├─ 배경 이미지 64:244 "1자산 8@4x 1" (139, 683) 1768×274 mix-blend-multiply
├─ 데코 그룹 66:306 "Frame 1171281208" (71, 38) 685.48×836.28 rotate(-120°)
│   └─ 66:309 "Frame 1171281211" (inner) 763×351 scaleY(-1)
│       └─ 64:245 Rectangle 42333 763×351 rounded-bl/tl 175.5 linear-gradient
│
├─ [메인 3원] 안전과 품질 (top)
│   ├─ 64:251 Ellipse 589 outer (853, 206) 350×350  linear #FDC69E→#E0782C plus-darker
│   ├─ 64:252 Ellipse 590 ring (887.06, 240.06) 280×280 (viewBox 310 inset -5.36%)
│   │        3×linear orange + white 5px stroke + drop-shadow blur 5
│   └─ 64:253 text "안전과 품질" center (1027.92, 387.53) w262.92 h114.08
│           font 50 bold white lh 50 tracking -2.5 text-shadow 0 0 5 #cc5200
│
├─ [메인 3원] 생산성 향상 (bottom-left)
│   ├─ 64:247 Ellipse 591 outer (694, 480) 350×350 linear #D5AA89→#737373 plus-darker
│   ├─ 64:248 Ellipse 592 ring (728.06, 514.06) 280×280 (inset -3.57%)
│   │        linear #897445→#3E3523 + white 5px stroke
│   └─ 64:249 text "생산성 향상" center (868.92, 661.53) w262.92 h114.08
│
├─ [메인 3원] 소통과 신뢰 (bottom-right)
│   ├─ 64:255 Ellipse 585 outer (1009, 480) 350×350 linear white→#253E1F plus-darker
│   ├─ 64:256 Ellipse 586 ring (1043.06, 514.06) 280×280 (inset -3.57%)
│   │        linear #296B55→#123328 + white 5px stroke
│   └─ 64:257 text "소통과 신뢰" center (1185.09, 654.49) w262.92 h114.08
│
├─ [액센트 6개, 130.9 outer + 78.96 inner (viewBox 102.97 inset -15.2%) + 한자]
│   ├─ 64:288~290 安 outer (859, 22)  / inner (884.47, 47.47) / text (875.25, 63.60)
│   ├─ 64:292~294 質 outer (1071, 22) / inner (1096.47, 47.47)/ text (1087.25, 63.60)
│   ├─ 64:279~281 速 outer (555, 483) / inner (580.47, 508.47)/ text (571.25, 524.60)
│   ├─ 64:283~285 利 outer (555, 689) / inner (580.47, 714.47)/ text (571.25, 730.60)
│   ├─ 64:296~298 通 outer (1372, 483)/ inner (1397.47, 508.47)/ text (1388.25, 524.60)
│   └─ 64:300~302 信 outer (1372, 689)/ inner (1397.47, 714.47)/ text (1388.25, 730.60)
│     outer: yellow-orange 탑(安質) / khaki 좌(速利) / green 우(通信), plus-darker 0.3
│     inner: 3×orange(安質) / dark khaki(速利) / dark green(通信) + white 2px stroke + drop-shadow
│     한자: font 45 bold white lh 50 tracking -2.25 text-shadow 0 0 5 #cc5200
│
├─ [연결 아크 3개, PNG]
│   ├─ 64:276 Ellipse 599 wrapper (926, 134) 209×99  rotate(180)   [안-질 사이]
│   ├─ 64:277 Ellipse 597 wrapper (627, 549) 99×209 ← 209×99 rot90  [速利 쪽 아크]
│   └─ 64:286 Ellipse 600 wrapper (1329, 549) 99×209 ← 209×99 rot-90 [通信 쪽 아크]
│
└─ [텍스트 라벨 12개]
    # 상단 (top=0, font 40 bold #cc5200 lh95 + desc font 30 medium #525151 lh35)
    ├─ 64:275 "안전성 제고"    (645, 0)  w194 h95    text-right
    ├─ 64:274 "시설물의..."    (331, 78) w508.48 h91 text-right (2줄)
    ├─ 64:272 "품질 향상"      (1233, 0) w157 h95    text-right
    ├─ 64:271 "Copy&Paste..."  (1233, 78) w508.48 h91  text-left (2줄)
    # 좌측 (font 40 bold #604f32 + desc #525151)
    ├─ 64:266 "신속ㆍ정확성 증진"    (0, 456) w531.39 h95.35 text-right
    ├─ 64:265 "Analogue..."          (52.01, 546) w478.73 h70.56 text-right (2줄)
    ├─ 64:269 "비용저감ㆍ부가가치 창출" (84.67, 661.79) w446.05 h96.42 text-right (flex-center)
    ├─ 64:268 "건설비용..."          (102.02, 734) w428.31 h91.34 text-right (2줄, flex-center)
    # 우측 (font 40 bold #124133 + desc #525151)
    ├─ 64:263 "소통ㆍ이해 원할"      (1518, 456) w267.02 h95  text-left
    ├─ 64:262 "성과품..."            (1518, 541) w429.01 text-left (2줄)
    ├─ 64:260 "신뢰ㆍ투명성 강화"    (1518, 664) w304.02 h95  text-left
    └─ 64:259 "3D 모델..."           (1518, 754.21) w544.2 h70.56 text-left (2줄, flex-center)
```

## 이상 탐지 결과 (STEP 3)

| 검사 | 결과 |
|------|------|
| 회전 단일문자 (bbox반전) | 없음 — 한자 6개는 98.33×42.67로 가로 > 세로 정상 |
| 좁은 박스 세로배치 | 없음 |
| 중복 노드 (동일 좌표+내용) | 없음 |
| 특수 line-height | desc 2줄 lh=35 on font 30 → Noto content_area(1.448) 초과 불가, descender 5px 클리핑 위험 → padding-bottom 5px 보정 |
| Vector 좌표 이상 | 64:276/64:277/64:286 arc의 metadata bbox와 React wrapper bbox 불일치 → **React wrapper 좌표 신뢰** (Figma 회전 변환이 반영된 렌더 좌표) |

## 스케일 계산 (STEP 5)

```
Scale = 1280 / 2062.205 = 0.6206940...
블록 높이 = 956.998 × 0.6206940 = 593.96 px
```

**구현 방식:** CSS `transform: scale(0.620694)`로 내부 컨테이너 균일 축소.
모든 내부 요소는 Figma 원본 좌표계(px)를 그대로 사용. 폰트/여백/그림자 모두 비율대로 축소됨.

## 에셋 (assets/frame_1171281211/)

| 파일 | 용도 | 원본 크기 |
|------|------|---------|
| bg_texture.png | 배경 텍스처 (mix-blend-multiply) | 1768×274 |
| arc_top.png | 안-질 연결 아크 | 209×99 |
| arc_side.png | 좌/우 연결 아크 (양쪽 공용) | 209×99 |
| big_fill_safety.svg / big_ring_safety.svg | 안전과 품질 베이스/링 | 350 / 310 |
| big_fill_productivity.svg / big_ring_productivity.svg | 생산성 향상 베이스/링 | 350 / 300 |
| big_fill_trust.svg / big_ring_trust.svg | 소통과 신뢰 베이스/링 | 350 / 300 |
| acc_outer_safety.svg | 안/질 액센트 outer (노랑→오렌지) | 130.9 |
| acc_outer_speed.svg | 속/리 액센트 outer (탠→그레이) | 130.9 |
| acc_outer_comm.svg | 통/신 액센트 outer (다크그린) | 130.9 |
| acc_inner_safety.svg | 安 inner (오렌지) | 102.97 |
| acc_inner_quality.svg | 質 inner (오렌지) | 102.97 |
| acc_inner_speed.svg | 速 inner (다크 카키) | 102.97 |
| acc_inner_profit.svg | 利 inner (다크 카키) | 102.97 |
| acc_inner_comm.svg | 通/信 inner (다크 그린) | 102.97 |