C.E.L_Slide_test2/templates/phase_z2/families/three_parallel_requirements.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/1171281190/index.html
─────────────────────────────────────────────────────────────────────────────
PROMOTED (Figma 1:1 변환물 → 그대로 사용):
  - tech bar gradient    : line 71  → linear-gradient(180deg, #0D78D0 0%, #023056 100%)
  - people bar gradient  : line 72  → linear-gradient(180deg, #FF9A23 0%, #CC5200 100%)
  - nature bar gradient  : line 73  → linear-gradient(180deg, #39BE49 21%, #23742C 100%)
  - tech heading text    : line 123 → linear-gradient(180deg, #0D78D0, #134D7F)
  - people heading text  : line 124 → linear-gradient(180deg, #FE900C, #D18B37)
  - nature heading text  : line 125 → linear-gradient(180deg, #3CA649, #23742C)
  - title gradient       : line 40  → linear-gradient(180deg, #000, #883700)
  - desc color           : line 118 → #3E3523
  - col 외곽 border       : line 57  → 2px solid #000 (top + bottom)
  - col-section divider  : line 103 → 2px dashed #000

NOT PROMOTED (Figma 데코지만 MDX 에 없으므로 주입 X):
  - 한자 (技/術 / 人/材 / 天/地) ← MDX 에 없는 content. Figma frame 의 visual 데코일 뿐.

ADAPTED:
  - Figma px / native size 무시, flex layout
  - Figma 70/50/45/35px fonts → token-fixed (zone-title 13 / sub-title 12 / body 11 / caption 10)
  - desc <br>-joined → nested <ul><li> (구조 보존)
─────────────────────────────────────────────────────────────────────────────
slots: title, pillars[].{label, color_class, sections[].{heading, bullets[]}}
#}

<style>
  .f13b {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    gap: 4px;
    font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
    word-break: keep-all;
    /* IMP-36 (Gitea #65 u4) P1 — partial-side container query root.
       container-type: size 로 aspect-ratio 측정 가능 (cqh / cqi / cqw 도
       동일 root 기준). container-name: f13b-root 는 frame_contracts.yaml
       rotation_eligible: true 와 짝. */
    container-type: size;
    container-name: f13b-root;
  }
  .f13b__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;
  }
  .f13b__cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    flex: 1;
    min-height: 0;
  }
  .f13b__col {
    display: flex;
    border-top: 2px solid #000;          /* PROMOTED line 57 */
    border-bottom: 2px solid #000;
    overflow: hidden;
    min-width: 0;
    background: rgba(255,255,255,0.5);
  }
  .f13b__bar {
    flex: 0 0 50px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 6px 2px;
    gap: 3px;
  }
  .f13b__col--tech   .f13b__bar { background: linear-gradient(180deg, #0D78D0 0%, #023056 100%); }
  .f13b__col--people .f13b__bar { background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
  .f13b__col--nature .f13b__bar { background: linear-gradient(180deg, #39BE49 21%, #23742C 100%); }
  /* PROMOTED Figma frame 13 line 92-93 — main + parenthetical stacked vertically */
  .f13b__bar-main {
    font-size: var(--font-sub-title);    /* 12px — main word "기술/사람/자연" */
    font-weight: 700;
    line-height: 1.2;
    display: block;
  }
  .f13b__bar-paren {
    font-size: var(--font-caption);      /* 10px — "(디지털/역량/여건)" */
    font-weight: 500;
    line-height: 1.2;
    display: block;
    opacity: 0.95;
  }

  .f13b__body {
    flex: 1;
    display: flex; flex-direction: column;
    padding: 8px 12px;                   /* breathing (was 6px 10px) */
    min-width: 0;
    overflow: hidden;
  }
  .f13b__section {
    flex: 1;
    padding: 6px 0;                       /* breathing (was 4px) */
    overflow: hidden;
    min-height: 0;
  }
  .f13b__section + .f13b__section {
    border-top: 2px dashed #000;        /* PROMOTED line 103 */
    margin-top: 6px;                      /* visible section gap (was 4px) */
    padding-top: 8px;                     /* breathing (was 6px) */
  }
  /* heading — 부소목차 (사용자 5-layer 직설 2026-05-07): Digital 기술과... 같은 깊이 1 굵은 bullet */
  .f13b__heading {
    font-size: var(--font-sub-title);    /* 12px — 부소목차 위계 */
    font-weight: 700;
    line-height: var(--lh-sub-title);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    margin-bottom: 6px;                   /* visible heading-body gap (was 4px) */
  }
  .f13b__col--tech   .f13b__heading { background-image: linear-gradient(180deg, #0D78D0 0%, #134D7F 100%); }
  .f13b__col--people .f13b__heading { background-image: linear-gradient(180deg, #FE900C 0%, #D18B37 100%); }
  .f13b__col--nature .f13b__heading { background-image: linear-gradient(180deg, #3CA649 21%, #23742C 100%); }

  /* desc — frame-family text layout contract (.text-line 공통 클래스 사용)
     feedback (mvp1.5b_test5): browser-native ul/li 폐기. */
  .f13b__desc {
    color: #3E3523;                      /* PROMOTED line 118 */
    overflow: hidden;
  }
  /* desc 안 .text-line 색 override */
  .f13b__desc .text-line { color: #3E3523; }

  /* IMP-36 (Gitea #65 u4) P2 — body fit via cqh + clamp + --max-body-lines.
     section 의 text_lines 개수가 늘면 line-height 가 비례로 축소. font-size
     미변경 (사용자 룰). --max-body-lines fallback = 4 (section 평균 줄 수).
     20cqh = 한 section 이 차지하는 .f13b 컨테이너 비율 근사치 (3 section /
     col, body 영역 ≈ 80cqh → 25cqh/section 중 line 영역 ≈ 20cqh). */
  .f13b__desc {
    line-height: clamp(1.2em, calc(20cqh / var(--max-body-lines, 4)), 1.6em);
  }

  /* IMP-36 (Gitea #65 u4) P1 — aspect-ratio < 1.5 rotation rule. zone 의
     가로:세로 비가 1.5 미만으로 좁아지면 (vertical-2 narrow / 또는 임의
     세로형 geometry) 3-col grid 가 1-col stack 으로 회전. */
  @container f13b-root (aspect-ratio < 1.5) {
    .f13b__cols { grid-template-columns: 1fr; }
  }
</style>

<div class="f13b" data-frame-id="1171281190" data-template-id="three_parallel_requirements">
  <div class="f13b__title">{{ slot_payload.title }}</div>
  <div class="f13b__cols">
    {% for pillar in slot_payload.pillars %}
    <div class="f13b__col f13b__col--{{ pillar.color_class }}">
      <div class="f13b__bar">
        <span class="f13b__bar-main">{{ pillar.label_main | safe }}</span>
        {% if pillar.label_paren %}
        <span class="f13b__bar-paren">{{ pillar.label_paren | safe }}</span>
        {% endif %}
      </div>
      <div class="f13b__body">
        {% for section in pillar.sections %}
        <div class="f13b__section">
          <div class="f13b__heading">{{ section.heading | safe }}</div>
          {% if section.text_lines %}
          <div class="f13b__desc" style="--max-body-lines: {{ section.text_lines | length }};">
            {% for line in section.text_lines %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
          </div>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>