C.E.L_Slide_test2/templates/blocks/new/cards-3col-persona.html

<!-- 3열 페르소나 카드: CSS overlay + 이미지(bg, badge, icon, photo) -->
<!--
  📋 cards-3col-persona
  ─────────────────
  용도: 3개 역할/관점별 목표를 나란히 비교. 뱃지+불릿+사진 3단 구성.
  슬롯:
    personas[3]:
      bg_img — 컬럼 배경 텍스처 (이미지, 실사)
      overlay_color — 오버레이 색상 (CSS, 기본값 제공)
      badge_outer_img, badge_inner_img — 원형 뱃지 (이미지, 일러스트)
      label_line1, label_line2, label_color
      bullet_icon — 체크 아이콘 (이미지)
      bullets[] (text, compact: bool)
      photo_img — 하단 사진 (이미지, 실사)
  Figma 원본: Frame 1171281191 (node 45:16, 2601×1927)
  수학적 계산:
    scale = 1280 / 2601 = 0.49213
    badge: 396×397 → 195×195, inner offset (12%,14%), size 76%
    overlay: 단색 opacity 0.8, radius ~30px (MCP opacity-80 확인)
      left=#d6e7c4, mid=#e1efe1, right=#d0c0ad (픽셀 분석)
    label: 65px/50px Bold (MCP 확인)
    bullet icon: 32.4×32.5 → 16×16 (이미지, 아이콘)
    bullet text: 40px/85px Medium #000 (MCP 확인)
    photo: radius=50px→25px, opacity=0.7 (MCP opacity-70 확인)
  CSS 요소: overlay 단색+opacity+radius
  이미지 요소: bg(텍스처), badge(일러스트), icon(아이콘), photo(실사)
  인사이트: I-2(컬럼 동일 top/bottom, space-between), R13(marker+text flex pair)
-->
<div class="block-c3p">
  {% for p in personas %}
  <div class="c3p-col">
    {% if p.bg_img %}<img src="{{ p.bg_img }}" class="c3p-bg" alt="">{% endif %}
    <div class="c3p-overlay" style="background: {{ p.overlay_color|default('#d6e7c4') }};"></div>

    <div class="c3p-badge">
      {% if p.badge_outer_img %}<img src="{{ p.badge_outer_img }}" class="c3p-badge-outer" alt="">{% endif %}
      {% if p.badge_inner_img %}<img src="{{ p.badge_inner_img }}" class="c3p-badge-inner" alt="">{% endif %}
      <div class="c3p-badge-label" style="color: {{ p.label_color|default('#285b4a') }};">
        {% if p.label_line1 %}<span class="c3p-ln1">{{ p.label_line1 }}</span>{% endif %}
        {% if p.label_line2 %}<span class="c3p-ln2">{{ p.label_line2 }}</span>{% endif %}
      </div>
    </div>

    <div class="c3p-bullets">
      {% for b in p.bullets %}
      <div class="c3p-bullet {{ 'c3p-bullet--compact' if b.compact }}">
        {% if p.bullet_icon %}<span class="c3p-bullet-icon"><img src="{{ p.bullet_icon }}" alt=""></span>{% endif %}
        <span class="c3p-bullet-text">{{ b.text|safe }}</span>
      </div>
      {% endfor %}
    </div>

    {% if p.photo_img %}
    <div class="c3p-photo"><img src="{{ p.photo_img }}" alt=""></div>
    {% endif %}
  </div>
  {% endfor %}
</div>

<style>
.block-c3p {
  display: flex; gap: 4px;
  width: 100%; height: 100%; word-break: keep-all;
}

.c3p-col {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}

.c3p-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: 0;
}

/* overlay: CSS 단색 (MCP opacity-80, 픽셀 분석 색상) */
.c3p-overlay {
  position: absolute; top: 10%; left: 5%;
  width: 90%; height: 70%;
  opacity: 0.8; border-radius: 30px; z-index: 1;
}

.c3p-badge {
  position: relative; z-index: 2;
  width: 120px; height: 120px; flex: none; margin-bottom: 8px;
}
.c3p-badge-outer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.c3p-badge-inner { position: absolute; left: 12%; top: 14%; width: 76%; height: 76%; object-fit: contain; }
.c3p-badge-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; text-align: center; letter-spacing: -0.02em; z-index: 3;
}
.c3p-ln1 { font-size: 20px; line-height: 1.1; }
.c3p-ln2 { font-size: 16px; line-height: 1.2; }

/* bullets: I-2 space-between, R13 flex pair */
.c3p-bullets {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column;
  justify-content: space-between; width: 90%; padding: 4px 0;
}
.c3p-bullet { display: flex; align-items: flex-start; }
.c3p-bullet--compact .c3p-bullet-text { line-height: 1.3; }
.c3p-bullet-icon { flex: none; width: 16px; height: 16px; margin-top: 0.35em; margin-right: 6px; }
.c3p-bullet-icon img { width: 100%; height: 100%; object-fit: contain; }
.c3p-bullet-text { flex: 1; font-size: 15px; font-weight: 500; color: #000; line-height: 1.6; }

/* photo: MCP opacity-70, radius=50px→25px */
.c3p-photo {
  position: relative; z-index: 2;
  width: 95%; border-radius: 16px;
  overflow: hidden; opacity: 0.7; margin-top: auto;
}
.c3p-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
</style>