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

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

---

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

### 1-A. 좌측 패널 전체 (absolute 유지, 변경 없음)

| 요소 | 위치 | 크기 |
|------|------|------|
| left-bg | left:38, top:74.02 | w:964.14, h:759.99 |
| cat-bar-1 | left:103.13, top:153 | w:693.19, h:49 |
| cat-bar-2 | left:103.13, top:352 | w:693.19, h:49 |
| cat-bar-3 | left:103.13, top:612 | w:693.19, h:49 |
| cat-title-1 | left:162.77, top:126 | w:606.27, h:95.8 |
| cat-title-2 | left:162.77, top:326 | w:606.27, h:95.8 |
| cat-title-3 | left:162.77, top:586 | w:606.27, h:95.8 |
| sw-1 | left:166.42, top:207 | w:323.36, h:120 |
| sw-2 | left:166.42, top:405 | w:654.63, h:180 |
| sw-3 | left:162.46, top:671 | w:654.63, h:120 |

**좌측은 건드리지 않는다.**

### 1-B. 타이틀 (absolute 유지)

| 요소 | 위치 | 크기 |
|------|------|------|
| title-icon | left:0, top:13 | w:38.05, h:40 |
| title-text | left:51, top:0 | w:1198, h:48 |
| title-bar | left:26, top:42 | w:255.13, h:26 |

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

| 요소 | 위치 | 크기 |
|------|------|------|
| mid-deco | left:884.33, top:192 | w:180.96, h:541 |
| mid-arrow | left:943.66, top:375 | w:73.18, h:158 |

### 1-D. 우측 5행 top rhythm (absolute Y 유지)

| Row | badge top | bar top | text top | arrow top | interval |
|-----|-----------|---------|----------|-----------|----------|
| 1 | 78 | 105 | 123 | 152 | — |
| 2 | 230 | 257 | 276 | 302 | 152 |
| 3 | 384 | 412 | 430 | 456 | 154 |
| 4 | 539 | 567 | 586 | 606 | 155 |
| 5 | 694 | 721 | 734 | 760 | 155 |

**핵심**: 이 Y rhythm은 고정. flex column으로 일반화하면 안 됨.

### 1-E. 우측 row 내부 겹침 관계

각 row에서 4개 요소의 X 관계:
```
badge:  left:1047.5,  w:88.01  → 1047.5 ~ 1135.51
bar:    left:1094.96, w:751.54 → 1094.96 ~ 1846.50
text:   left:1176.05, w:687.26 → 1176.05 ~ 1863.31
arrow:  left:1794.09, w:47.47  → 1794.09 ~ 1841.56
```

**겹침 관계:**
- badge는 bar 시작점 좌측으로 47.46px 돌출 (1094.96-1047.5)
- badge와 bar는 40.55px 겹침 (1135.51-1094.96)
- text는 bar 좌측에서 81.09px 안쪽에서 시작 (1176.05-1094.96)
- text는 bar 우측을 16.81px 넘어감 (1863.31-1846.50) ← 원본 특성
- arrow는 bar 내부, 우측에서 52.41px 안쪽 (1846.50-1794.09)

---

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

### 우측 row 내부만 (row Y는 유지)

**현재 (원본)**:
- badge, bar, text, arrow 모두 독립 absolute

**하이브리드**:
각 row를 하나의 컨테이너로 묶고, row의 top은 원본 값 유지.
내부에서만 관계 재정의:

```
.row-N (absolute top: 원본 값, left: 1047.5px)
  .badge (absolute overlay, z-index:2)
  .bar (CSS background, position:relative)
    .text (bar 내부 usable area 기준)
    .arrow (bar 끝 구조 자산)
```

**"bar 내부 usable area" 계산:**
- bar left edge → text start: 81px (padding-left)
- text end → bar right edge: text가 16.8px 넘어감 → 넘어가도록 허용하거나 bar를 확장
- arrow start → bar right edge: 52px (padding-right for arrow area)

---

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

| 원본 자산 | CSS 대체 | 상태 |
|----------|---------|------|
| left-bg | CSS gradient + clip-path | 원본에서 이미 CSS |
| cat-bar × 3 | CSS gradient | 원본에서 이미 CSS |
| right-bar × 5 | CSS background | 원본에서 이미 CSS |
| mid-deco | CSS radial-gradient | 원본에서 이미 CSS |
| title-bar | CSS blur | 원본에서 이미 CSS |
| badge × 5 | **이미지 유지** (복잡한 원형 + 숫자) | — |
| arrow × 5 | **이미지 유지** (화살표 아이콘) | — |
| mid-arrow | **이미지 유지** | — |
| title-icon | **이미지 유지** | — |

→ 원본에서 이미 모든 CSS 변환 완료. 추가 대체 대상 없음.

---

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

**축1 (먼저)**: row geometry
- 좌측 전체 유지 (absolute 그대로)
- 우측 5행: 각 row를 하나의 컨테이너로 묶기
- row top은 원본 값 유지
- 내부: badge overlay + bar(contains text + arrow)
- 이 단계에서는 text usable area는 아직 안 건드림

**축2 (다음)**: text usable area
- bar 내부에서 text의 padding/width를 "bar usable area"로 재정의
- arrow를 bar 끝 구조 자산으로 재배치