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).
3 컬럼 카드 : 발주자 / 시공자 / 설계자 각 persona 별 *목표* + bullet 7 개 안팎.
본 partial 은 `figma_to_html_agent/blocks/1171281191/index.html` (184 lines) 을
base 로 Phase Z 규약 (Jinja slot + token CSS + slide-base wrap + pure CSS) adapt.

PROMOTED (Figma 색 / 디자인 의도 → CSS 로 보존) :
  - 발주자 accent color  : Figma TEXT #285b4a (dark green)  — index.html L80
  - 시공자 accent color  : Figma TEXT #445a2f (olive)        — index.html L81
  - 설계자 accent color  : Figma TEXT #743002 (red-brown)    — index.html L82
  - 발주자 overlay tint  : #d6e7c4 (opacity-80)              — index.html L45
  - 시공자 overlay tint  : #e1efe1                            — index.html L46
  - 설계자 overlay tint  : #d0c0ad                            — index.html L47
  - title gradient       : #000 → #883700 (F13 zone-title 와 동일 family)
  - badge 원형 의도       : index.html L60-69 (396×397 round badges) → CSS round
  - bullet check 의도     : index.html L94 (32×32 check icon) → CSS ::before unicode
  - section divider line : 카드 별 색 border 위계 (F13 pillar bar 답습)

NOT PROMOTED (Figma 데코지만 MDX 무관 — memory rule `feedback_blocks_must_be_css.md`
+ 기존 F13/F29/F16 partials 의 strict CSS-only convention) :
  - col_bg_texture.png (3 컬럼 BG 텍스처)              — index.html L113-115
  - col-overlay raster (실제 데이터 = solid 색)         — index.html L44-47 → CSS 단색
  - 하단 사진 (photo--left/mid/right) 3 개              — index.html L122-123, 177-178
  - 원형 뱃지 outer / inner image (badge-outer/inner)  — index.html L62-69 → CSS round
  - 체크 아이콘 image (bullet-icon img)                  — index.html L94-99 → CSS unicode

ADAPTED :
  - Figma 65/50/40px → token-fixed (zone-title 13 / sub-title 12 / body 11)
  - 396×397 absolute-positioned round badge → flex card-header 안 CSS round
  - Figma `zoom: 0.49213` + absolute positioning → Phase Z flex/grid (zone fit)
  - 7 bullets vertical absolute layout → flex column 안 자동 spacing
  - Figma `line-height: 85/50px` → token-fixed `--lh-body`
─────────────────────────────────────────────────────────────────────────────
min_height_px derivation (Codex round 13 §2.2 — derive + confirm) :
  Figma frame total height = 1927 px @ scale 0.49213 → 948 px adapted
  But Phase Z slide-body height ≤ 585 px → adaptive content fit
  Content density : 3 col × 7 bullets + badge → similar to F29 (345) class
  Initial derived value = 290 (between F13=230 and F29=345)
  → confirm via smoke + sample run before bulk activation (Track A calibration)
─────────────────────────────────────────────────────────────────────────────
slots : title, personas[].{label, body, color_class}
  - color_class ∈ {client, constructor, designer} (role_order 따라)
  - body = list[{text:str, indent:int}] (parse_quadrant_item 출력)
  - persona suffix "목표" = frame 의 visual 언어 (slot 미사용, partial 내부 노출)
#}

<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;
    filter: drop-shadow(0 0 3px rgba(50,44,30,0.4));  /* index.html L41-44 의 title 처리 답습 */
  }
  .f14b__cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
  }
  .f14b__col {
    position: relative;
    display: flex; flex-direction: column;
    border: 2px solid;
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
  }
  /* per-persona color theme : Figma TEXT 색 + overlay tint promote */
  .f14b__col--client {
    border-color: #285b4a;                                  /* PROMOTED */
    background: linear-gradient(180deg, rgba(214,231,196,0.5) 0%, rgba(214,231,196,0.15) 100%);  /* PROMOTED L45 */
  }
  .f14b__col--constructor {
    border-color: #445a2f;                                  /* PROMOTED */
    background: linear-gradient(180deg, rgba(225,239,225,0.5) 0%, rgba(225,239,225,0.15) 100%);  /* PROMOTED L46 */
  }
  .f14b__col--designer {
    border-color: #743002;                                  /* PROMOTED */
    background: linear-gradient(180deg, rgba(208,192,173,0.5) 0%, rgba(208,192,173,0.15) 100%);  /* PROMOTED L47 */
  }

  /* badge — index.html L60-82 의 round badge (396×397 px outer + 302×303 inner + 65/50px text)
     adapt : flex header 안 CSS round shape + persona name + "목표" sub */
  .f14b__badge {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 8px 10px;
    border-bottom: 2px solid currentColor;
    flex-shrink: 0;
    text-align: center;
    background: rgba(255,255,255,0.6);
  }
  .f14b__col--client      .f14b__badge { color: #285b4a; }
  .f14b__col--constructor .f14b__badge { color: #445a2f; }
  .f14b__col--designer    .f14b__badge { color: #743002; }
  .f14b__badge-name {
    font-size: var(--font-sub-title);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .f14b__badge-suffix {
    font-size: var(--font-caption);
    font-weight: 500;
    line-height: 1.2;
    margin-top: 2px;
    opacity: 0.85;
  }

  /* body — index.html L102-104 의 bullet-list (7 bullets per persona) adapt :
     flex column + check-style ::before. raster icon NOT PROMOTED. */
  .f14b__body {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 8px 10px 10px;
    color: #1a1a1a;
    min-height: 0;
    display: flex; flex-direction: column;
    gap: 3px;
  }
  .f14b__body .text-line {
    color: inherit;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    position: relative;
    padding-left: 14px;
  }
  /* CSS check marker — index.html L94-99 (bullet_check.png) 의 의도 보존 */
  .f14b__body .text-line--bullet::before {
    content: "\2713";  /* ✓ U+2713 — check mark */
    position: absolute;
    left: 0; top: 0;
    font-weight: 700;
  }
  .f14b__col--client      .f14b__body .text-line--bullet::before { color: #285b4a; }
  .f14b__col--constructor .f14b__body .text-line--bullet::before { color: #445a2f; }
  .f14b__col--designer    .f14b__body .text-line--bullet::before { color: #743002; }
</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>