# [Lv.2] 계단식 누적 화살표가 파란 숫자 침범 수정 (폰트 확대 부작용)

## allowed_resources
```yaml
allowed_resources:
  paths:
    - "src/components/composite/**"
    - "src/**/__tests__/**"
    - "tests/e2e/**"
  forbidden_paths:
    - "server/**"
    - "extension/**"
    - ".github/**"
    - "src/config/api.ts"
    - "src/integrations/**"
  commands: ["npx vitest","npx tsc","git"]
  merge_policy: "none"
  ttl_hours: 10
```
> ★ merge_policy=none. base=현 origin/main. webapp-only. **이 침범 수정만, 다른 건 절대 그대로 유지.**

## 배경 (회장 지적)
복합설계 계단식 비교 흐름 도식에서, 앞서 **차액합계(총액차이) 폰트를 키우면서** 누적 직각 화살표가 파란 숫자 영역을 **침범**하게 됨.

## 문제 (정확히)
- **하늘색(누적, 최고→2사) 직각 화살표의 세로선**이 **파란색 단계차액 숫자**(예 "−15,983,520원", "−9,282,000원")의 **오른쪽 끝을 가로질러 관통**함.
- 3사 도식에선 주황(누적, 최고→3사)도 함께 있으나, 핵심은 **하늘색 세로선이 단계차액 숫자와 겹치는 것**.
- 원인: 차액합계 폰트 확대로 숫자 폭이 넓어졌는데, 누적 화살표 세로선 x위치가 그대로여서 숫자 위로 겹침.

## 작업 — 침범만 해소
- **누적 직각 화살표(하늘색 최고→2사, 주황 최고→3사)의 세로선을 "모든 파란 숫자(단계차액·누적차액 포함) 오른쪽"으로 이동**해서 어떤 숫자와도 겹치지 않게.
  - 숫자 열과 화살표 세로선 열을 **명확히 분리**(충분한 가로 간격).
  - 하늘색(안쪽)·주황(바깥쪽) 순서·간격 유지하되, 둘 다 단계차액 숫자(−15,983,520 등)보다 확실히 오른쪽.
  - 커진 폰트 기준으로 가장 넓은 숫자도 안 겹치게 여유 확보(반응형 폭 고려).
- **다른 건 그대로 유지**: 폰트 크기(차액합계 큰 폰트 유지)·색·회사명·박스·단계 아래 화살표·금액(exact 원)·직각 형태 전부 불변. **오직 누적 화살표 세로선의 가로 위치만** 조정.

## 제약
- webapp-only. 계단식 도식의 화살표 라우팅(가로 위치)만. 계산·표·값·폰트크기·색 불변.
- 곡선 금지(직각 유지), 반올림 추가 금지.

## 검증
- `npx tsc` 클린. `npx vitest run` 회귀 0. 신규/갱신: 누적 화살표 세로선 x위치가 단계차액 숫자 우측 경계보다 오른쪽(겹침 0). 폰트크기·색·값 불변 확인. e2e 회귀 0.
- 육안: 2사·3사 도식에서 하늘색/주황 세로선이 어떤 파란 숫자와도 안 겹침.

## 완료 (★ 순서 B)
- 변경 = src/ (+tests) 만.
- **dev6 금지** — dev1. 커밋 → push → finish-task **foreground 1회** → .done 즉시 종료. **background wait 금지.** ANU 검증·머지·CF Pages 배포는 ANU.