{# ───────────────────────────────────────────────────────────────────────────── Visual Provenance — figma_to_html_agent/blocks/1171281210/index.html ───────────────────────────────────────────────────────────────────────────── PROMOTED (Figma 1:1 변환물 → 그대로 사용): - banner-left text gradient : lines 101-104 → linear-gradient(90deg, rgb(62,53,35), rgb(62,53,35)) on linear-gradient(180deg, rgb(41,107,85), rgb(18,51,40)) - banner-right text gradient : lines 110-113 → linear-gradient(90deg, rgb(34,95,74), rgb(34,95,74)) on linear-gradient(180deg, rgb(41,107,85), rgb(18,51,40)) - banner-left bg gradient : lines 84-91 → linear-gradient(to right, rgba(136,131,118,.343), #39321E 73.1%, #39321E) + border-radius pill - banner-right bg gradient : lines 92-98 → linear-gradient(to right, #032118, rgba(41,107,85,.1)) + border-radius pill - body bg gradients (좌/우) : lines 53-68 → multi-bg / 좌(57,50,30) α0.3 → white α0.3, 우(41,107,85) α0.3 → white α0.3 - section-title-left color : line 125 → #5C3714 (갈) - section-title-right color : line 126 → #084C56 (짙은 청록) - bullets text : line 136 → 700 / #000 / list-disc - arrow PNG asset : line 220 → assets/arrow.png (AS-IS → TO-BE) - footnote (*) inline : lines 144, 281-283 → 25.8px small + indent (2026-05-08 수정) 원본 SVG 3 개 (header_left_bg / header_right_bg / body_bg) → CSS gradient 로 재현. asset 파일 부재 (figma 원본 R8 룰 = "순수 CSS 우선" 따라 SVG 자체 미생성). 시각 fidelity 동일. ADAPTED (Figma px / native 무시, zone flex 재구성): - 3848×1388 inner + zoom 0.33270 → flex layout (no zoom, no fixed inner) - 70px banner / 50px section / 40px body→ var(--font-sub-title) / 8-10px / var(--font-caption) - absolute left/top px → flex grid (no absolute) - banner heights 142px + body 933px → 비율 기반 flex (banner ~28%, body ~72%) - assets 1921×142 / 3845×933 sizes → object-fit cover, 비율 유지 ───────────────────────────────────────────────────────────────────────────── slots: title (omitted), banner_left, banner_right, process.sections[3] (s[0]: AS-IS/TO-BE, s[1-2]: bullets), product.sections[3] (bullets, optional footnote/sub_title) #}
{# H2 mid-heading — section.title 렌더 (frame 13 의 f13b__title 과 동일 위계) #}
{{ slot_payload.title }}
{# Banners (PROMOTED 구조 + gradient lines 101-113). 배경 = .f29b__banner--left/right 의 CSS gradient (figma SVG → R8 CSS gradient 재현). #}
{{ slot_payload.banner_left }}
{{ slot_payload.banner_right }}
{# Body — 6 cell grid (row-major: row 1 좌/우, row 2 좌/우, row 3 좌/우). row 별 height = max(좌, 우) → divider Y 정렬. 배경 = .f29b__body 의 CSS multi-gradient (figma SVG → R8 CSS gradient 재현). #}
{# 2026-05-14 — dynamic cardinality loop. row 0..N-1, N = max(process.sections, product.sections). 원본 콘텐츠 N cards 가 어떤 값이든 (3 / 4 / 5 ...) 그대로 표시. 부족한 쪽은 빈 cell. row 0 의 process column 만 AS-IS/TO-BE transform block 지원 (legacy 03 호환). #} {% set proc_len = slot_payload.process.sections | length %} {% set prod_len = slot_payload.product.sections | length %} {% set row_count = [proc_len, prod_len] | max %} {% for r in range(row_count) %} {% set s = slot_payload.process.sections[r] if r < proc_len else none %} {% set p = slot_payload.product.sections[r] if r < prod_len else none %}
{% if s and s.title %}
{{ s.title | safe }}
{% if s.transforms %}
AS-IS TO-BE
{% for t in s.transforms %}
{{ t.from | safe }}
➜
{{ t.to | safe }}
{% endfor %}
{% elif s.text_lines %} {% for line in s.text_lines %}
{{ line.text | safe }}
{% endfor %} {% endif %} {% endif %}
{% if p and p.title %}
{{ p.title | safe }}{% if p.sub_title %}{{ p.sub_title | safe }}{% endif %}
{% for line in p.text_lines %}
{{ line.text | safe }}
{% endfor %} {% if p.footnote %}
* {{ p.footnote | safe }}
{% endif %} {% endif %}
{% endfor %}
{# 2026-05-14 — popup links : 좌/우 column 끝에 파란색 글씨 (사용자 lock). slot_payload.popup_left_summary / popup_right_summary 가 있으면 표시. #} {% if slot_payload.popup_left_summary or slot_payload.popup_right_summary %}
{% if slot_payload.popup_left_summary %} {% endif %}
{% if slot_payload.popup_right_summary %} {% endif %}
{% endif %}