{# ───────────────────────────────────────────────────────────────────────────── Visual Provenance — figma_to_html_agent/blocks/1171281180/index.html ───────────────────────────────────────────────────────────────────────────── PROMOTED (Figma 1:1): - title-bar background : #fbd5b9 (line 43) + box-shadow - title text gradient : #cc5200 (line 128) 강조부 - vertical label color : #144838 (line 68) + text-shadow drop - pill background : rgba(255,255,255,0.5) (line 88) - pill border-radius : 30px (line 89) - pill box-shadow : 2px 4px 5px rgba(0,0,0,0.5) (line 90) - 5 pill border-bottom 색상 (line 141, 147, 153, 159, 165): 1: #fb5915, 2: #e79000, 3: #e9a804, 4: #919f00, 5: #0d6361 ADAPTED (zone flex 재구성): - 1153×592 absolute → flex column layout - pill height 70px hardcode → dynamic (콘텐츠 양에 따라 auto) - 계단 배치 (width/margin-left hardcode) → 가운데 정렬 + width 100% (계단은 1 라인 짧은 텍스트 전제, multi-line 콘텐츠엔 부적합) - 1 pill 1 라인 → pill_N_label (title) + pill_N_body (text_lines) (사용자 룰 = frame 구조를 콘텐츠에 맞춰 보완) NOT PROMOTED: - 좌측 arc-deco SVG (장식 — 공간 절약 위해 단순화) - arrow PNG (CSS triangle 대체 가능, 일단 ▶ 문자 사용) slots : title + pill_N_label / pill_N_body (N = 1.._slot_count) — dynamic. #}