{# ───────────────────────────────────────────────────────────────────────────── 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)) - section-title-left color : line 125 → #5C3714 (갈) - section-title-right color : line 126 → #084C56 (짙은 청록) - bullets text : line 136 → 700 / #000 / list-disc - banner SVG asset (left) : line 196 → assets/header_left_bg.svg (좌측 180° rotate) - banner SVG asset (right) : line 197 → assets/header_right_bg.svg - body bg SVG asset : line 193 → assets/body_bg.svg (3845×933 상단) - arrow PNG asset : line 220 → assets/arrow.png (AS-IS → TO-BE) - footnote (＊) inline : lines 144, 281-283 → 25.8px small + indent 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 구조 + assets line 196,197 + gradient lines 101-113) #} {# Body — 6 cell grid (row-major: row 1 좌/우, row 2 좌/우, row 3 좌/우). row 별 height = max(좌, 우) → divider Y 정렬 #}

{# ───── Row 1: section 1 ───── #} {% set s1 = slot_payload.process.sections[0] %}

{% if s1.title %}

{{ s1.title | safe }}

{% if s1.transforms %}

{% for t in s1.transforms %}

{{ t.from | safe }}

➜

{{ t.to | safe }}

{% endfor %}

{% elif s1.text_lines %} {% for line in s1.text_lines %}

{{ line.text | safe }}

{% endfor %} {% endif %} {% endif %}

{% set p1 = slot_payload.product.sections[0] %}

{% if p1.title %}

{{ p1.title | safe }}

{% for line in p1.text_lines %}

{{ line.text | safe }}

{% endfor %} {% endif %}

{# ───── Row 2: section 2 ───── #} {% set s2 = slot_payload.process.sections[1] %}

{% if s2.title %}

{{ s2.title | safe }}

{% for line in s2.text_lines %}

{{ line.text | safe }}

{% endfor %} {% endif %}

{% set p2 = slot_payload.product.sections[1] %}

{% if p2.title %}

{{ p2.title | safe }}

{% for line in p2.text_lines %}

{{ line.text | safe }}

{% endfor %} {% if p2.footnote %}

＊ {{ p2.footnote | safe }}

{% endif %} {% endif %}

{# ───── Row 3: section 3 ───── #} {% set s3 = slot_payload.process.sections[2] %}

{% if s3.title %}

{{ s3.title | safe }}

{% for line in s3.text_lines %}

{{ line.text | safe }}

{% endfor %} {% endif %}

{% set p3 = slot_payload.product.sections[2] %}

{% if p3.title %}

{{ p3.title | safe }}{% if p3.sub_title %}{{ p3.sub_title | safe }}{% endif %}

{% for line in p3.text_lines %}

{{ line.text | safe }}

{% endfor %} {% endif %}