# Frame 1171281193 — 원본 시각 관계 분석

> 소스: `design_agent(원본)/figma_to_html_agent/block-tests/bim-issues-quadrant.html`
> 목적: hybrid 재구성 전, 보존/flow화/CSS대체 영역을 명확히 분리

---

## 1. 반드시 유지할 시각 관계

### 1-A. 8개 headline box 위치 (absolute 유지)

| ID | 위치 | 크기 | 정렬 |
|----|------|------|------|
| h-tl-1 | left:12, top:151.22 | w:771 | left |
| h-tl-2 | left:12, top:565.27 | w:885 | left |
| h-tr-1 | right:1, top:151.22 | w:771 | right |
| h-tr-2 | right:1, top:564.35 | w:807 | right |
| h-bl-1 | left:12, top:957.17 | w:657 | left |
| h-bl-2 | left:12, top:1298.36 | w:771 | left |
| h-br-1 | right:1, top:957.17 | w:539 | right |
| h-br-2 | right:1, top:1312.18 | w:820 | right |

### 1-B. 12개 body box 위치와 폭 (absolute 유지, 높이만 auto)

| ID | 위치 | 폭 | 원본 높이 | 정렬 | 중심 근접? |
|----|------|-----|---------|------|-----------|
| b-tl-1 | left:8, top:222.25 | 993 | 239.75 | left | N |
| b-tl-2 | left:8, top:645.49 | 870 | 239.75 | left | **Y** (중심 y:582~1166) |
| b-tr-1 | right:21, top:222.25 | 1058 | 299.69 | right | N |
| b-tr-2 | right:21, top:635.35 | 915 | 119.88 | right | **Y** |
| b-tr-3 | right:21, top:775.45 | 751 | 119.38 | right | **Y** |
| b-bl-1 | left:8, top:1035.56 | 972 | 179.81 | left | **Y** |
| b-bl-2 | left:0, top:1367.52 | 1082 | 239.75 | left | N |
| b-br-1 | right:21, top:1028.17 | 880 | 119.88 | right | **Y** |
| b-br-2 | right:21, top:1154.20 | 1025 | 119.88 | right | **Y** |
| b-br-3 | right:21, top:1379.50 | 1074 | 239.75 | right | N |

**핵심**: 중심 근접 body box들의 폭이 좁다 → 중심 원 금지영역을 피함.

### 1-C. 중심 원 금지영역

```
center-quote: left:809.01, top:581.87, w:644.99, h:584.43
→ x 범위: 809 ~ 1454
→ y 범위: 582 ~ 1166
```

body box의 폭은 이 영역과 겹치지 않도록 설계됨.

### 1-D. 장식 요소 (absolute 유지)

- 4 card-bg: gradient 배경, 꼭지점에 배치
- 4 header-ribbon: 카테고리 라벨, gradient 배경
- center-quote: 이미지 + 오버레이 텍스트

### 1-E. 우측 body box의 배치 방식

원본에서 우측 body box는:
- `right: 21px` → **박스 자체가 우측에 위치**
- `text-align: right` + `list-style-position: inside`

**하이브리드에서**: bullet-row 블록 자체를 우측에 배치.
text-align:right가 아니라 컨테이너가 right에 앵커됨.

---

## 2. flow/flex로 바꿔도 되는 내부 영역

### body box 내부만

| 원본 | 하이브리드 |
|------|-----------|
| `<ul><li>` + list-style: disc | R13 flex pair (marker + text) |
| height 고정 (239.75, 179.81 등) | height: auto (콘텐츠 결정) |
| padding-left: 63px | marker width: 1.5em (≈63px) |

**절대 바꾸지 않는 것:**
- body box의 left/right/top/width (absolute 위치)
- headline의 위치/크기
- center-quote의 위치

---

## 3. CSS로 대체 가능한 자산

| 원본 자산 | CSS 대체 | 상태 |
|----------|---------|------|
| card-bg gradient | CSS linear-gradient | 원본에서 이미 CSS |
| header-ribbon gradient | CSS linear-gradient | 원본에서 이미 CSS |
| center-quote 배경 | img (복잡한 이미지) | 이미지 유지 |

→ 원본 bim-issues-quadrant.html은 이미 모든 CSS 변환이 완료된 상태.
   추가 CSS 대체 대상 없음.

---

## 4. 하이브리드 재구성 축 순서

**축1 (먼저)**: body 내부 flow화
- body box의 absolute 위치는 원본 그대로
- 내부만: ul/li → R13 flex pair
- height 고정 → auto
- 이 단계에서는 우측 정렬 방식은 아직 안 건드림

**축2 (다음)**: 우측 bullet-row 배치
- 우측 body box: text-align:right 제거
- bullet-row 블록을 우측 앵커 컨테이너 안에 좌→우 읽기로 배치