# [Lv.3] 생보 3대질병 계단식 SVG 재구현 (승인 목업 v2 + 평가 미팅 반영)

## allowed_resources
```yaml
allowed_resources:
  paths:
    - "src/components/composite/LifeThreeCriticalDiff.tsx"
    - "src/components/composite/__tests__/LifeThreeCriticalDiff.test.tsx"
    - "src/components/composite/ConsultationHistoryView.tsx"
    - "src/components/composite/RpPresentation.tsx"
    - "src/lib/lifeThreeCritical.ts"
    - "src/lib/__tests__/lifeThreeCritical.test.ts"
    - "tests/e2e/composite-design-vpath.spec.ts"
  forbidden_paths:
    - "server/**"
    - "extension/**"
    - ".github/**"
    - "src/config/api.ts"
    - "src/integrations/**"
  commands: ["npx vitest","npx tsc","npx playwright","git"]
  merge_policy: "none"
  ttl_hours: 16
```
> ★ merge_policy=none. base=현 origin/main. **webapp-only, 서버·확장 무변경.** RpPresentation은 손보 계단식 시각 참조/재사용용(손보 로직 변경 금지). 회장 승인 목업 = `/home/jay/.cokacdir/workspace/autoset/life_staircase_mock_v2.png` (참조).

## 배경 (회장 승인 + 2차 평가 미팅)
현재 생보 계단식을, 상단 손보 계단식과 동일 양식의 **SVG 계단식**으로 재구현. 회장 승인 목업 v2 기준 + 평가 미팅 경량 정리 반영.

## 목표 화면 (위→아래)
1. **섹션 타이틀** "생보 3대질병 진단비 계단식 비교" + 안내 각주(1개사 최고 Max 대비·비갱신형·완납 가정·납입연수 동적·**보장범위/지급조건/감액 회사별 상이, 단순 금액비교 주의**).
2. **91% 리드 배너** (게이지 **인라인**, 문장 옆): "암진단비 하나만 바꿔도 3대질병 전체 차액의 **N%** 확보". N = **실데이터 계산**(①암만 최저 생보사 월차액 ÷ ②3대질병 전체 월차액), 하드코딩 금지. 서브텍스트에 **분모 기준 명시**("①암만 대체 월−X ÷ ②3대질병 전체 대체 월−Y, 나머지 2담보 월 Z 차이"). ※①과 ②의 생보사가 다를 수 있음(암최저사≠3담보합최저사) → 서브텍스트에 그 사실 반영.
3. **① 암진단비 계단** (SVG): 최고 Max(현재 3사복합 배정 손보사·월보험료) → 최저 min(암진단비 최저 생보사·월보험료).
4. **② 3대질병 계단** (SVG): 캡션 "암+뇌혈관+허혈성심장 **합산(암 포함)**". 최고 Max(손보 3사복합 3담보 합) → 최저 min(3담보 합 최저 단일 생보사).
5. **담보별 근거표 + 비율바**: 담보 | 손보사·월보험료 | 생보사·월보험료 | 월 차액(막대). 생보가 비싼 담보(예 허혈성심장) = **빨강 ▲ "유지 유리"**.
6. **하단 컴플라이언스 각주**.

## 각 계단 SVG 사양 (손보 양식 통일)
- 좌측 파란 뱃지(최고 Max / 최저 min) + 회사명(이탤릭, `text-anchor:start`) + 월보험료(볼드, `text-anchor:end`, tabular-nums).
- **초록 하강 화살표 = 월 차액만 primary**(큰 초록 "월 −X원 ▼"). ★ **20년 총액을 ▼ 아래에 중복 표기 금지**(평가 미팅: 총액은 오른쪽 화살표 한 곳에만).
- **오른쪽 초록 직각 누적 화살표**(최고 Max→최저로 꺾여 화살촉) = **20년(=payment_years) 총액 차액**, **흰 바탕 라벨을 세로줄 위에** 얹음(회장 요구). 총액 = 월차액 × 12 × payment_years.
- 색: **파랑=중립(뱃지/회사명), 초록=차액(▼·화살표·절감방향), 빨강=증가**. ★ 색 단독 금지 — **방향(▼/▲)+부호(−/+) 병기**(색맹 대비, 이리스).

## 데이터 (기존 계약 재사용, task-2886 매칭)
- 손보 담보별 배정(회사+월보험료) = composite `triple_best.coverages[]`.
- 생보 담보별 = `life_matrix`. **①암 최저 생보사** = 암진단비 argmin. **②3담보 합 최저 단일 생보사** = 3담보 합 argmin(각 담보 그 회사 보험료).
- 담보 매칭 = task-2886 로직(coverage_cd 우선 + 정확명 allowlist + **유사암 배제**). 3담보: 암진단비·뇌혈관질환진단비·허혈성심장질환진단비.
- 납입연수 = `query_condition.payment_years` **동적**(20 하드코딩 금지). 없으면 총액 생략 graceful.
- exact 원(반올림 금지). life_matrix 없으면 섹션 미표시 graceful. triple_best 없으면 계단 미표시(task-2886 게이트 유지).

## 컴플라이언스 (로키 조건 — 각주 아닌 항목단위)
- **생보 감액담보 인라인 플래그**: 생보 진단비가 초기 감액 구조면 해당 담보 행에 "초기 감액 시 실차액 축소" 소형 표기(데이터로 감액여부 알 수 없으면 3대질병 공통 각주로 "생보 진단비 초기 감액기간 있을 수 있음—실차액 축소 가능" 명시).
- **승환 경고 1줄**: "기존계약 해지 시 손실 가능—유지·비교 신중".
- "절감" 단어 금지 → **"차액"**. 곡선 금지(직각). "20년 총액=납입 단순합, 할인·해지환급·갱신 미반영" 각주.

## 구현 견고성 (이리스)
- SVG **viewBox 고정 좌표계 + CSS 스케일**(px width 하드코딩 금지). 계단 높이 동적(단수×rowH).
- 오른쪽 화살표 길이 = 값 스케일 **min/max clamp**. 흰바탕 라벨 = `<rect>` 먼저 그리고 텍스트(z-order), 글자수 기반 rect 폭 선산출(getBBox SSR 함정 회피).
- 긴 회사명 축약(+`<title>`), 모바일 반응형(≤480 분기). tabular-nums·천단위 콤마. 상단 손보와 시각 통일(가능하면 공용 `<StairComparison>` 추출은 surgical, 손보 회귀 0).

## 검증
- `npx tsc` 0. `npx vitest run` 회귀 0. 신규/갱신: N%(91%류) 실계산·①암최저사/②3담보합최저사 독립산출 / 월차액 primary·총액 오른쪽 1회만 / 담보 매칭 유사암 배제 / 허혈성심장류 생보 비쌈=빨강▲"유지유리" / payment_years 동적(20 하드코딩 부재) / "절감" 부재·"차액" 존재 / 색+부호 이중인코딩 / life·triple_best graceful.
- e2e 케이스 C 새 구조 testId로 갱신, strict-mode 회귀 방지, clean worktree PASS.

## 완료 (★ 순서 B)
- 변경 = src/ (+tests/e2e) 만. 서버/확장 불변.
- **dev6 금지** — dev1. 커밋 → push → finish-task **foreground 1회** → .done 즉시 종료. **background wait 금지.** ANU 검증·머지·CF Pages 배포(source /home/jay/workspace/.env.keys → wrangler pages deploy dist --project-name insuro --branch main)는 ANU.

## goal_assertions (auto-generated)
- `npx tsc`
- `npx vitest run`