{# ───────────────────────────────────────────────────────────────────────────── Visual Provenance — figma_to_html_agent/blocks/1171281193/index.html ───────────────────────────────────────────────────────────────────────────── PROMOTED (Figma 1:1 변환물 → 그대로 사용): - card-bg gradient (TL/TR top→bottom) : line 49 → linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%) - card-bg gradient (BL/BR bottom→top) : line 53-54 → linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%) - header-ribbon (TL/BL — 갈색) : line 75, 79 → linear-gradient(270deg, rgba(165,161,150,0.5), #39321E 73%) - header-ribbon (TR/BR — 청록) : line 83, 87 → linear-gradient(90deg, rgba(41,107,85,0.5), #032118) - red headline color : line 127 → #ff0000 - body-text color : line 136 → #000 - center-quote (Rome wasn't Built in a day!) : line 233 (decorative, MDX 4-2.2 의 핵심 메시지로 대체 가능) - bullet marker : line 241 → "•" - card 모서리 radius : line 51-54 → 50px (top corners TL/TR, bottom corners BL/BR) NOT PROMOTED (Figma 데코지만 MDX 04-2.2 에 없는 콘텐츠): - center-quote 의 영문 ("Rome wasn't Built in a day!") — slot_payload.center_quote 로 동적 (없으면 omit) ADAPTED (Figma px / native size 무시, zone-compatible): - 2226×1766 inner + zoom 0.575 → CSS grid 2×2 (no zoom, no fixed inner) - Figma 60px ribbon font / 55px headline / 42px body → token-fixed (zone-title 13 / sub-title 12 / body 11) - 1080px card width / 119px ribbon height → grid 1fr 1fr / 22px ribbon - 644×584 center 원 → 90px 원 (zone-fit) - absolute positioning (4 quadrants) → grid-template-areas ───────────────────────────────────────────────────────────────────────────── slots: title, center_quote (옵션), quadrant_{1,2,3,4}_{label, body} - quadrant 1 = TL (정책 집행) - quadrant 2 = TR (수행 개념) - quadrant 3 = BL (근본 취지의 이해부족) - quadrant 4 = BR (지속적 투자 의지 부재) - body 형식 = text-line family 호환 HTML (text_lines list 또는 pre-rendered string) #}

{% if slot_payload.title %}

{{ slot_payload.title }}

{% endif %}

{# Quadrant 1 (TL) — 정책 집행 (갈색 ribbon) #}

{% if slot_payload.quadrant_1_label %}

{{ slot_payload.quadrant_1_label | safe }}

{% endif %} {% if slot_payload.quadrant_1_headline or slot_payload.quadrant_1_body %}

{% if slot_payload.quadrant_1_headline %}

{{ slot_payload.quadrant_1_headline | safe }}

{% endif %} {% for line in slot_payload.quadrant_1_body %}

{{ line.text | safe }}

{% endfor %}

{% endif %}

{# Quadrant 2 (TR) — 수행 개념 (청록 ribbon) #}

{% if slot_payload.quadrant_2_label %}

{{ slot_payload.quadrant_2_label | safe }}

{% endif %} {% if slot_payload.quadrant_2_headline or slot_payload.quadrant_2_body %}

{% if slot_payload.quadrant_2_headline %}

{{ slot_payload.quadrant_2_headline | safe }}

{% endif %} {% for line in slot_payload.quadrant_2_body %}

{{ line.text | safe }}

{% endfor %}

{% endif %}

{# Quadrant 3 (BL) — 근본 취지의 이해부족 (갈색 ribbon) #}

{% if slot_payload.quadrant_3_label %}

{{ slot_payload.quadrant_3_label | safe }}

{% endif %} {% if slot_payload.quadrant_3_headline or slot_payload.quadrant_3_body %}

{% if slot_payload.quadrant_3_headline %}

{{ slot_payload.quadrant_3_headline | safe }}

{% endif %} {% for line in slot_payload.quadrant_3_body %}

{{ line.text | safe }}

{% endfor %}

{% endif %}

{# Quadrant 4 (BR) — 지속적 투자 의지 부재 (청록 ribbon) #}

{% if slot_payload.quadrant_4_label %}

{{ slot_payload.quadrant_4_label | safe }}

{% endif %} {% if slot_payload.quadrant_4_headline or slot_payload.quadrant_4_body %}

{% if slot_payload.quadrant_4_headline %}

{{ slot_payload.quadrant_4_headline | safe }}

{% endif %} {% for line in slot_payload.quadrant_4_body %}

{{ line.text | safe }}

{% endfor %}

{% endif %}

{# Center quote — 옵션 #} {% if slot_payload.center_quote %}

{{ slot_payload.center_quote | safe }}

{% endif %}