C.E.L_Slide_test2/templates/phase_z2/families/three_persona_benefits.html

<!-- Phase Z-2 MVP-1.5b frame-derived adapted block.
     §17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt. -->
{#
─────────────────────────────────────────────────────────────────────────────
Visual Provenance — figma_to_html_agent/blocks/1171281191/ (frame 14)
─────────────────────────────────────────────────────────────────────────────
Frame 14 = "주체별 기대효과" (cards-3col-persona, 2601×1927 px, scale 0.49213).
Figma 원본 = 3 컬럼 카드, 각 카드 = 배경 텍스처 + 컬러 오버레이 + 원형 뱃지
(persona 이름 + "목표") + 7 bullets + 하단 사진. token-fixed Phase Z partial.

PROMOTED (Figma 색 → CSS gradient / accent 보존) :
  - 발주자 accent      : Figma TEXT #285b4a (dark green)
  - 시공자 accent      : Figma TEXT #445a2f (olive)
  - 설계자 accent      : Figma TEXT #743002 (red-brown)
  - title gradient     : Figma #000 → #883700 (frame 13 과 동일 family 의 zone title)
  - card 외곽 border   : 2px solid (frame 13 의 pillar bar 룰 따라)

NOT PROMOTED (Figma 데코지만 MDX 에 없으므로 주입 X — memory rule
`feedback_blocks_must_be_css.md` : Figma SVG/PNG image slot 금지) :
  - col_bg_texture / overlay / 하단 사진 등 image asset
  - 원형 뱃지 inner/outer image — CSS round shape 으로 대체

ADAPTED :
  - Figma 65/50/40px → token-fixed (zone-title 13 / sub-title 12 / body 11)
  - badge 원형 → CSS circle (radial-gradient 의 accent border)
  - bullet check icon image → ::before 의 unicode check (∙ → ✓ approximate)
─────────────────────────────────────────────────────────────────────────────
slots : title, personas[].{label, body, color_class}
  - color_class ∈ {client, constructor, designer} (role_order 따라)
  - body = list[{text:str, indent:int}] (parse_quadrant_item 출력)
#}

<style>
  .f14b {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    gap: 6px;
    font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
    word-break: keep-all;
  }
  .f14b__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;
  }
  .f14b__cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
  }
  .f14b__col {
    display: flex; flex-direction: column;
    border: 2px solid #000;
    border-radius: 4px;
    overflow: hidden;
    min-height: 0;
    background: #fff;
  }
  .f14b__col--client      { border-color: #285b4a; }   /* PROMOTED */
  .f14b__col--constructor { border-color: #445a2f; }   /* PROMOTED */
  .f14b__col--designer    { border-color: #743002; }   /* PROMOTED */

  /* badge — persona 라벨 + "목표" sub. Figma 원형 뱃지를 CSS pill 로 대체. */
  .f14b__badge {
    display: flex; align-items: baseline; justify-content: center;
    gap: 6px;
    padding: 6px 8px 4px;
    border-bottom: 2px solid currentColor;
    color: inherit;
    flex-shrink: 0;
  }
  .f14b__badge-name {
    font-size: var(--font-sub-title);
    font-weight: 700;
    line-height: var(--lh-sub-title);
  }
  .f14b__badge-suffix {
    font-size: var(--font-caption);
    font-weight: 500;
    opacity: 0.75;
  }
  .f14b__col--client      .f14b__badge { color: #285b4a; }
  .f14b__col--constructor .f14b__badge { color: #445a2f; }
  .f14b__col--designer    .f14b__badge { color: #743002; }

  /* body — check-style bullet list. Figma image bullet → ::before unicode. */
  .f14b__body {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 8px 10px;
    color: #1a1a1a;
    min-height: 0;
  }
  .f14b__body .text-line { color: inherit; }

  /* Persona badge suffix label = static "목표" (Figma source) — slot 미사용,
     partial 안에서 직접 노출. content_object 와 무관한 frame 시각 언어. */
</style>

<div class="f14b" data-frame-id="1171281191" data-template-id="three_persona_benefits">
  <div class="f14b__title">{{ slot_payload.title }}</div>
  <div class="f14b__cols">
    {% for persona in slot_payload.personas %}
    <div class="f14b__col f14b__col--{{ persona.color_class }}">
      <div class="f14b__badge">
        <span class="f14b__badge-name">{{ persona.label | safe }}</span>
        <span class="f14b__badge-suffix">목표</span>
      </div>
      <div class="f14b__body">
        {% if persona.body %}
        {% for line in persona.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>
    {% endfor %}
  </div>
</div>