<!-- Phase Z-2 MVP-1.5b frame-derived adapted block.
     §17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt. -->
{#
─────────────────────────────────────────────────────────────────────────────
Visual Provenance — figma_to_html_agent/blocks/1171281198/ (frame 20)
─────────────────────────────────────────────────────────────────────────────
Frame 20 = "디지털 전환(DX)은 S/W가 필수다" (cards-3-header). Figma 원본 =
상단 dark green banner ("디지털 전환(DX)은 S/W가 필수다" green/white mix) +
좌측 DX circular area + 우측 3 perspective cards (BIM 전면설계 / 디지털
전환 S/W / 고부가가치 산업전환).

본 partial = Track A frame 5 (Codex round 45 accepted, V4 LE tier strongest).
builder 재사용 = `quadrant_flat_slots` (F11 cards-3-category pattern). 새
builder/parser 0.

3-layer architecture (matrix §0) :
- V4 = matching authority — V4 ranked this frame light_edit for 03-1 + 01-1.
- figma_to_html (1171281198) = source/evidence — 386-line index.html + assets/.
- Phase Z = runtime — 본 commit adds catalog + partial + smoke fixture.

PROMOTED — CSS (verbatim from figma_to_html_agent/blocks/1171281198/index.html) :
  - 3 column header bg : two-stop vertical adaptation of upstream horizontal
    banner gradient end-stops — start `rgb(15, 50, 30)` (upstream :54, stop 0%),
    end `rgb(60, 52, 34)` (upstream :64, stop 100%). Adaptation surface =
    direction (90deg → 180deg) + stop count (11 → 2); colors verbatim.
  - header text white bold + green accent (white #fff verbatim, see upstream
    :202 `color: #ffffff`)
  - title gradient (#000 → #883700, F13/F14/F12/F11/F18 zone-title family;
    shared zone-title token, not from this frame)
  - card border + bullet markers : `#1d4d3e` (upstream :208 `.card-title-1`
    `-webkit-text-stroke: 1.5px #1d4d3e`). Replaces earlier eyeballed
    `#296B55` approximation (IMP-49 #78 u1).

NOT PROMOTED (P1 case-by-case, compact zone fit) :
  - 상단 dark green banner (Figma 의 큰 visual 영역, MDX 의 *title 만* 핵심)
  - 좌측 DX circular area (multi-image + center text + decor — Figma 의 main
    rhetorical anchor 단 compact zone 에서 표현 불가). title 의 gradient 로 의도 보존
  - 한자/장식/배경 텍스처 — Figma source evidence 보존, 미 promote

ADAPTED :
  - Figma 90/65/40px → token-fixed (zone-title 13 / sub-title 12 / caption / body 11)
  - 1280×426 absolute positioning + zoom → Phase Z 3-column grid
  - 3 perspective cards (header + body) → flex column
─────────────────────────────────────────────────────────────────────────────
min_height_px derivation :
  3 col × (header 30 + body 3-bullets × 25) + title 30 + padding 30 = ~195
  + safety buffer (longer label / 5+ bullets) 125 = **320**. F12/F11/F18 class.
─────────────────────────────────────────────────────────────────────────────
slots :
  - title                                                 : section.title
  - perspective_1/2/3_label                               : 3 column headers
  - perspective_1/2/3_body : list[{text, indent}]         : 3 column bullets
─────────────────────────────────────────────────────────────────────────────
4-class failure taxonomy :
  - class 1 readiness : builder reuse `quadrant_flat_slots` + `quadrant_item`.
    contract + partial + smoke fixture.
  - class 2 content-fit : header label 짧게 (single line). body 3-5 bullets per
    column (zone fit). 6+ bullets 시 watch.
#}

<style>
  .f20b {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    gap: 6px;
    font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
    word-break: keep-all;
    /* IMP-36 (Gitea #65 u6) P1 root — enable container queries on .f20b.
       container-type: size unlocks cqh/cqi/cqw + aspect-ratio matching against
       this element. container-name: f20b-root namespaces the @container rule
       below (partial-fidelity lock per IMP-49 #78 — no cross-frame borrowing). */
    container-type: size;
    container-name: f20b-root;
  }
  .f20b__title {
    font-size: var(--font-zone-title);
    font-weight: 700;
    line-height: var(--lh-zone-title);
    background-image: linear-gradient(180deg, #000 0%, #883700 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(50,44,30,0.4));
  }

  /* 3-column grid — Figma cards-3-header pattern */
  .f20b__cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
  }
  .f20b__col {
    display: flex; flex-direction: column;
    border: 2px solid #1d4d3e;        /* PROMOTED — verbatim from upstream :208 (.card-title-1 -webkit-text-stroke) */
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    min-height: 0;
  }

  /* header bar (top of each card, dark green per Figma) */
  .f20b__header {
    background: linear-gradient(180deg, rgb(15, 50, 30) 0%, rgb(60, 52, 34) 100%);   /* PROMOTED — verbatim end-stops from upstream :54 (0%) and :64 (100%); 11-stop horizontal banner adapted to 2-stop vertical card header */
    color: #fff;
    font-weight: 700;
    font-size: var(--font-sub-title);
    line-height: 1.15;
    padding: 6px 10px;
    text-align: center;
    flex-shrink: 0;
    letter-spacing: -0.04em;
  }

  /* body — bullet list (CSS check marker, F14 pattern) */
  .f20b__body {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 6px 10px 8px;
    color: #1a1a1a;
    min-height: 0;
    display: flex; flex-direction: column;
    gap: 3px;
  }
  .f20b__body .text-line {
    color: inherit;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    position: relative;
    padding-left: 14px;
  }
  .f20b__body .text-line--bullet::before {
    content: "\2713";          /* ✓ check mark — green theme */
    position: absolute;
    left: 0; top: 0;
    color: #1d4d3e;            /* PROMOTED — verbatim from upstream :208 (.card-title-1 -webkit-text-stroke) */
    font-weight: 700;
  }

  /* IMP-36 (Gitea #65 u6) P2 body fit — line-height clamp scales with the
     per-column bullet count via the inline `--max-body-lines` Jinja style on
     each `.f20b__body`. 60cqh ≈ 3-col card body share of `.f20b` root height
     (zone-title ~15cqh + card header ~10cqh + remaining ~75cqh, split 60cqh
     for text lines + reserve for padding/gap). font-size unchanged
     (guardrail #6 — Stage 2 spec). Fallback 3 = file-header default
     "body 3-5 bullets per column". */
  .f20b__body .text-line {
    line-height: clamp(1.15em, calc(60cqh / var(--max-body-lines, 3)), 1.6em);
  }

  /* IMP-36 (Gitea #65 u6) P1 rotation rule — when the surrounding zone is
     narrow (aspect-ratio < 1.5), collapse the 3-column grid to a single
     column. The threshold matches the IMP-36 Stage 2 canonical (vertical-2 /
     세로형). Card header / body / bullet styles remain unchanged. */
  @container f20b-root (aspect-ratio < 1.5) {
    .f20b__cols { grid-template-columns: 1fr; }
  }
</style>

<!-- IMP-49 #78 u2 — namespace scope note :
     `.f20b__*` is an AUTHORING-ORDINAL namespace (ordinal "20b" in this catalog's
     authoring sequence), NOT the Figma frame_id 1171281198. The structural link
     to the source frame is the `data-frame-id="1171281198"` attribute on the
     root <div> below. Cross-frame `.fNb__` class reuse is forbidden — class names
     MUST stay within their owning partial (see [[feedback_partial_figma_audit]]).
     Selector names and catalog references (frame_contracts.yaml :492,:497,:502)
     are intentionally unchanged in this unit. -->

<div class="f20b" data-frame-id="1171281198" data-template-id="dx_sw_necessity_three_perspectives">
  <div class="f20b__title">{{ slot_payload.title }}</div>
  <div class="f20b__cols">
    {# 3 columns — quadrant_flat_slots produces perspective_N_label / perspective_N_body for N=1..3 #}
    <div class="f20b__col">
      <div class="f20b__header">{{ slot_payload.perspective_1_label | safe }}</div>
      {# IMP-36 (Gitea #65 u6) P2 — inline `--max-body-lines` per column; code composes (Phase Z guardrail #7), defensive fallback to 3 matches the CSS default. #}
      <div class="f20b__body" style="--max-body-lines: {{ (slot_payload.perspective_1_body | length) if slot_payload.perspective_1_body else 3 }};">
        {% if slot_payload.perspective_1_body %}
        {% for line in slot_payload.perspective_1_body %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
        {% endif %}
      </div>
    </div>
    <div class="f20b__col">
      <div class="f20b__header">{{ slot_payload.perspective_2_label | safe }}</div>
      <div class="f20b__body" style="--max-body-lines: {{ (slot_payload.perspective_2_body | length) if slot_payload.perspective_2_body else 3 }};">
        {% if slot_payload.perspective_2_body %}
        {% for line in slot_payload.perspective_2_body %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
        {% endif %}
      </div>
    </div>
    <div class="f20b__col">
      <div class="f20b__header">{{ slot_payload.perspective_3_label | safe }}</div>
      <div class="f20b__body" style="--max-body-lines: {{ (slot_payload.perspective_3_body | length) if slot_payload.perspective_3_body else 3 }};">
        {% if slot_payload.perspective_3_body %}
        {% for line in slot_payload.perspective_3_body %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
        {% endif %}
      </div>
    </div>
  </div>
</div>