{# ───────────────────────────────────────────────────────────────────────────── Visual Provenance — figma_to_html_agent/blocks/1171281198/ (frame 20) ───────────────────────────────────────────────────────────────────────────── Frame 20 = "디지털 전환(DX)은 S/W가 필수다" (cards-3-header). Figma 원본 = 상단 dark banner ("디지털 전환(DX)은 S/W가 필수다") + 좌측 DX circular area + 우측 3 perspective cards (BIM 전면설계 / 디지털 전환 S/W / 고부가가치 산업전환). 본 partial = Figma 1:1 — *우측 3 cards* 만 가져옴. 좌측 DX circle area = 사용자 지시로 제외 (zone fit). 중목차 (zone title) 디자인 = 건드리지 않음. Figma asset PNG 직접 사용 (recolor X) : card_frame.png (515.579×377.767) — 카드 외곽 stroke/frame card_header_bg.png (378.435×85.881) — 카드 header 배경 card_bottom_decor.png(515.579×185.746) — 카드 하단 장식 bullet_arrow.png (41.246×39.486) — ▶ 화살표 PROMOTED — Figma visual identity 1:1 : - 카드 frame asset (외곽 line + 내부 background) - header bg asset (상단 colored bar) - bottom decor asset (하단 그림자 + 장식) - 카드 title = white fill + 컬러 stroke + dark glow · card 1 stroke = #1d4d3e (dark green) · card 2 stroke = #cc5200 (orange) · card 3 stroke = #1d4d3e (dark green) · text-shadow = 0 0 4px #322c1e (모든 card 공통) · paint-order = stroke fill (Figma 렌더 일치) - bullet = bullet_arrow.png (CSS recolor X) NOT PROMOTED (zone fit / 사용자 지시) : - 좌측 DX circular area (multi-image + center text + decor) - 상단 dark banner (zone title 이 대체) - hanmaek-label / left-bg / left-decor / left-inner-bg / middle-overlay ADAPTED — geometry only : - Figma 1682×540 px 3-card canvas → zone-compatible 3-col grid - 카드 내부 absolute 좌표 → flex column (bullet 개수 가변 대응) - Figma 40px title / 37px body → token-fixed (sub-title / body) assets_dir : `assets/` (run-relative). render() 호출 시 주입. ───────────────────────────────────────────────────────────────────────────── min_height_px derivation : 3 col × (header 50 + body 3-bullets × 26) + decor 60 + title 30 + padding 20 = ~238 + buffer 82 = **320**. F12/F11/F18 class. ───────────────────────────────────────────────────────────────────────────── slots : - title : section.title - perspective_1/2/3_label : 3 card headers - perspective_1/2/3_body : list[{text, indent}] : 3 card bullets ───────────────────────────────────────────────────────────────────────────── #} {# assets_dir = 'assets/' (run-relative). pipeline render() 가 주입. url() 안의 single-quote 는 jinja autoescape (style= attribute) 가 ' 로 바꿔 CSS parse 가 실패. quote 빼고 (asset path 에 space/특수문자 없음) + `| safe`. #} {% set _assets = assets_dir | default('', true) %} {% set _frame_bg = "url(" ~ _assets ~ "/card_frame.png)" if _assets else 'none' %} {% set _header_bg = "url(" ~ _assets ~ "/card_header_bg.png)" if _assets else 'none' %} {% set _decor_bg = "url(" ~ _assets ~ "/card_bottom_decor.png)" if _assets else 'none' %} {% set _bullet_bg = "url(" ~ _assets ~ "/bullet_arrow.png)" if _assets else 'none' %} {% set _body_bg = "url(" ~ _assets ~ "/body_bg.png)" if _assets else 'none' %} {% set _middle_ov = "url(" ~ _assets ~ "/middle_overlay.png)" if _assets else 'none' %}

{{ slot_payload.title }}

{# Axis B 산식 — 카드별 bullet line 수 = body lines. card --max-body-lines 로 line-height clamp 계산에 사용. perspective_N_body 가 list 또는 None. #} {% set p1_lines = (slot_payload.perspective_1_body | length) if slot_payload.perspective_1_body else 1 %} {% set p2_lines = (slot_payload.perspective_2_body | length) if slot_payload.perspective_2_body else 1 %} {% set p3_lines = (slot_payload.perspective_3_body | length) if slot_payload.perspective_3_body else 1 %}

{# 3 cards — quadrant_flat_slots produces perspective_N_label / perspective_N_body for N=1..3. 각 카드 inline --max-body-lines : 카드의 실제 line 수 → line-height 비례 산식. #}

{% if slot_payload.perspective_1_body %} {% for line in slot_payload.perspective_1_body %}

{{ line.text | safe }}

{% endfor %} {% endif %}

{% if slot_payload.perspective_2_body %} {% for line in slot_payload.perspective_2_body %}

{{ line.text | safe }}

{% endfor %} {% endif %}

{% if slot_payload.perspective_3_body %} {% for line in slot_payload.perspective_3_body %}

{{ line.text | safe }}

{% endfor %} {% endif %}