<!-- Phase Z-2 MVP-1.5b frame-derived adapted block.
     §17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt. -->
{#
─────────────────────────────────────────────────────────────────────────────
Visual Provenance — figma_to_html_agent/blocks/1171281189/ (frame 12)
─────────────────────────────────────────────────────────────────────────────
Frame 12 = "건설산업의 목표 (BIM 의 목적)" (cycle-3way-intersection, 2195×1195
px, scale 0.58312). Figma 원본 = 3 메인 원 (안전·품질 / 생산성·향상 / 소통·
신뢰) + 6 액센트 한자 원 (安/質/速/利/通/信) + 6 사이드 라벨 (안전성 제고 등)
+ 3 장식 rect + 3 arc + bg texture.

본 partial = Track A frame 2 (Codex round 30/33/35 합의, V4 strongest UAI tier).
`index.html` (510 lines) base + Phase Z 규약 adapt + **compact MDX-mapped focus**
(MDX 콘텐츠와 직접 매핑되는 5 slots 만 유지. Figma 의 frame-side decoration
는 NOT PROMOTED — zone 사이즈에서 cluttered 회피).

PROMOTED — CSS (Figma 색/디자인 의도 → CSS 으로 충분) :
  - circle 1 (safety) gradient : index.html L142-145 (outer) + L149-154 (inner)
    outer = linear-gradient(145.28deg, #FDC69E, #E0782C) multiply blend
    inner = linear-gradient(145.28deg, #BC652B, #A24200) + white border + shadow
  - circle 2 (productivity) : index.html L158-172
    outer = linear-gradient(218.84deg, #D5AA89, #737373) multiply
    inner = linear-gradient(153.95deg, #897445, #3E3523) + white border
  - circle 3 (trust) : index.html L175-189
    outer = linear-gradient(145.90deg, #FFFFFF, #253E1F) multiply
    inner = linear-gradient(153.95deg, #296B55, #123328) + white border
  - title gradient : #000 → #883700 (index.html L42-46) — F13/F14 zone-title 와 동일 family
  - main label typography : 700 weight, white, text-shadow (index.html L192-204)

NOT PROMOTED — Phase Z compact zone fit (자체 결정, P1 case-by-case) :
  - 6 액센트 한자 원 (安/質/速/利/通/信) — Figma 외 deco, MDX 무관, zone 사이즈에서 cluttered
  - 6 사이드 라벨 (안전성 제고 / 품질 향상 / 신속·정확성 증진 / 비용저감 / 소통·이해 / 신뢰·투명성)
    — Figma source 의 정해진 문구. MDX content 와 무관 deco text
  - 3 장식 rect (gradient 곡선 wrap) + 3 arc 이미지 — Figma 의 시각 풍부함이지만 zone-size 에서 visible 효과 약함
  - bg-texture multiply image (index.html L375) — zone 사이즈에서 effect 미미

ADAPTED :
  - Figma 70/50/40px → token-fixed (zone-title 13 / sub-title 12 / caption / body 11)
  - 3 메인 원 absolute positioning + zoom 0.58312 → Phase Z flex/grid (3-circle row)
  - 350×350 원 사이즈 → compact 70-90 px circle (zone fit)
  - Figma 의 3 원 *겹침 layout* (안전-품질 위 / 생산성 좌 / 소통 우) → flex row (분리, *cycle 의 의미*는 intersection text 가 표현)
─────────────────────────────────────────────────────────────────────────────
min_height_px derivation (Codex round 13 §2.2 — derive + confirm) :
  Figma frame 1195 px @ scale 0.58312 → 697 px adapted (full frame, 6 deco 포함).
  Phase Z compact (3 메인 원 + title + intersection) :
    title 30 + 3 circle row 80 + label area 60 + intersection 30 + padding 40 = 240 px
  + safety buffer (가벼운 텍스트 overflow 보호) 80 = **320** (F14 350 보다 가벼움).
  Confirm via smoke harness `--render-to` artifact.
─────────────────────────────────────────────────────────────────────────────
slots :
  - title                          : section.title (Jinja 변수)
  - circle_1_label / 2_label / 3_label : 3 메인 원 label (cycle_intersect_3 builder 산출)
  - intersection                   : 중앙 교차 텍스트 (optional)
─────────────────────────────────────────────────────────────────────────────
4-class failure taxonomy (matrix §4.1 Fix 7) :
  - class 1 adapter readiness 보호 : new builder cycle_intersect_3 가 PAYLOAD_BUILDERS
    에 등록되어야 contract 가 valid. 안 등록 시 → builder None → 본 frame runtime fail
  - class 2 content-fit : MDX 의 3 bullets 가 너무 길면 (label > ~20 chars) overflow.
    label 짧게 (compact) 권장
─────────────────────────────────────────────────────────────────────────────
#}

<style>
  .f12b {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    gap: 6px;
    font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
    word-break: keep-all;
  }
  .f12b__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 circle row — compact flex layout (Figma 의 겹침 cycle layout 단순화) */
  .f12b__circles {
    display: flex; align-items: center; justify-content: center;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 0;
  }
  .f12b__circle {
    flex: 0 0 auto;
    width: 110px; height: 110px;
    border-radius: 50%;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
  }
  /* outer ring (Figma multiply blend 의도) — CSS gradient approximation */
  .f12b__circle::before {
    content: "";
    position: absolute; inset: -8px;
    border-radius: 50%;
    z-index: -1;
    mix-blend-mode: multiply;
  }
  /* per-circle gradient (PROMOTED from index.html L141-189) */
  .f12b__circle--safety {
    background: linear-gradient(145.28deg, #BC652B 16.04%, #A24200 55.20%);
    border: 3px solid #fff;
  }
  .f12b__circle--safety::before {
    background: linear-gradient(145.28deg, #FDC69E 16.04%, #E0782C 55.20%);
  }
  .f12b__circle--productivity {
    background: linear-gradient(153.95deg, #897445 15.27%, #3E3523 61.74%);
    border: 3px solid #fff;
  }
  .f12b__circle--productivity::before {
    background: linear-gradient(218.84deg, #D5AA89 14.08%, #737373 92.67%);
  }
  .f12b__circle--trust {
    background: linear-gradient(153.95deg, #296B55 15.27%, #123328 61.74%);
    border: 3px solid #fff;
  }
  .f12b__circle--trust::before {
    background: linear-gradient(145.90deg, #FFFFFF 8.47%, #253E1F 87.56%);
  }

  /* circle 안 label (white text + shadow, index.html L192-204) */
  .f12b__circle-label {
    color: #fff;
    font-size: var(--font-caption);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    padding: 4px;
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
    word-break: keep-all;
  }

  /* intersection — 중앙 교차 텍스트 (optional, MDX 의 emphasis content) */
  .f12b__intersection {
    flex-shrink: 0;
    text-align: center;
    padding: 6px 12px;
    font-size: var(--font-sub-title);
    font-weight: 700;
    color: #883700;                    /* PROMOTED — title gradient 의 end color */
    background: linear-gradient(180deg, rgba(255,250,240,0.6) 0%, rgba(255,250,240,0) 100%);
    border-top: 1px dashed #883700;
    line-height: 1.3;
    min-height: 0;
  }
  .f12b__intersection:empty {
    display: none;                     /* slot 빈 경우 자동 hide */
  }
</style>

<div class="f12b" data-frame-id="1171281189" data-template-id="construction_goals_three_circle_intersection">
  <div class="f12b__title">{{ slot_payload.title }}</div>
  <div class="f12b__circles">
    <div class="f12b__circle f12b__circle--safety">
      <div class="f12b__circle-label">{{ slot_payload.circle_1_label | safe }}</div>
    </div>
    <div class="f12b__circle f12b__circle--productivity">
      <div class="f12b__circle-label">{{ slot_payload.circle_2_label | safe }}</div>
    </div>
    <div class="f12b__circle f12b__circle--trust">
      <div class="f12b__circle-label">{{ slot_payload.circle_3_label | safe }}</div>
    </div>
  </div>
  <div class="f12b__intersection">{{ slot_payload.intersection | safe }}</div>
</div>