{# ───────────────────────────────────────────────────────────────────────────── 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. #}
{{ slot_payload.title }}
{# vertical label — slot_payload.vlabel 있을 때만 표시 (현재 v0 미사용) #} {% if slot_payload.vlabel %}
{{ slot_payload.vlabel | safe }}
{% endif %}
{% set slot_count = slot_payload._slot_count or 5 %} {% for n in range(1, slot_count + 1) %} {% set label = slot_payload['pill_' ~ n ~ '_label'] %} {% set body = slot_payload['pill_' ~ n ~ '_body'] %} {% if label or body %}
{% if label %}
{{ label | safe }}
{% endif %} {% if body %}
{% for line in body %}
{{ line.text | safe }}
{% endfor %}
{% endif %}
{% endif %} {% endfor %}