C.E.L_Slide_test2/templates/blocks/new/cycle-3way-intersect.html

<!-- 3원 교차 다이어그램: CSS circles/gradient + 이미지(arc, texture) -->
<!--
  📋 cycle-3way-intersect
  ─────────────────
  용도: 3가지 목표/가치가 서로 교차하는 벤 다이어그램
  슬롯:
    bg_texture_img — 하단 배경 텍스처 (이미지, 실사)
    arc_img — 연결 아크 (이미지, 곡선 CSS 불가)
    circles[3]:
      label (HTML), text_shadow
      outer_gradient, ring_gradient — CSS gradient (gradient_math.py 계산값)
    accents[6]:
      char (한자 1글자)
      outer_gradient, inner_gradient — CSS gradient
    side_labels[6]:
      title, title_color, desc (HTML)
  Figma 원본: Frame 1171281211 (node 66:310, 2062×957)
  수학적 계산:
    scale = 1280 / 2062 = 0.620694
    gradient_math.py self-test 검증 완료:
      safety outer: 145.28deg, prod outer: 218.84deg, trust outer: 145.90deg
    main circle: 17% width, 역삼각형 배치
    ring: 14.1% width, border 4px white, box-shadow 0 0 10px
    accent outer: 6.35% opacity 0.3, inner: 4.0% border 2px white
    blend: mix-blend-mode: multiply (R10: plus-darker→multiply)
  CSS 요소: 모든 원/gradient/shadow/blend (순수 CSS, bim-goals-3circles.html에서 검증 완료)
  이미지 요소: bg_texture(실사), arc(곡선 3개)
-->
<div class="block-c3i">
  {% if bg_texture_img %}
  <div class="c3i-bg"><img src="{{ bg_texture_img | default('svg/bg_texture.png') }}" alt=""></div>
  {% endif %}

  {% if arc_img %}
  <div class="c3i-arc c3i-arc--top"><img src="{{ arc_img | default('svg/arc_top.png') }}" alt=""></div>
  <div class="c3i-arc c3i-arc--left"><img src="{{ arc_img | default('svg/arc_side.png') }}" alt=""></div>
  <div class="c3i-arc c3i-arc--right"><img src="{{ arc_img | default('svg/arc_side.png') }}" alt=""></div>
  {% endif %}

  {% for c in circles %}
  <div class="c3i-main c3i-main--{{ loop.index }}" style="background: {{ c.outer_gradient }};"></div>
  <div class="c3i-ring c3i-ring--{{ loop.index }}" style="background: {{ c.ring_gradient }};"></div>
  <div class="c3i-label c3i-label--{{ loop.index }}"
       {% if c.text_shadow %}style="text-shadow: 0 0 5px {{ c.text_shadow }};"{% endif %}>
    {{ c.label|safe }}
  </div>
  {% endfor %}

  {% for a in accents %}
  <div class="c3i-acc-outer c3i-acc-outer--{{ loop.index }}" style="background: {{ a.outer_gradient }};"></div>
  <div class="c3i-acc-inner c3i-acc-inner--{{ loop.index }}" style="background: {{ a.inner_gradient }};"></div>
  <div class="c3i-acc-char c3i-acc-char--{{ loop.index }}">{{ a.char }}</div>
  {% endfor %}

  {% for s in side_labels %}
  <div class="c3i-side c3i-side--{{ loop.index }}">
    <div class="c3i-side-title" style="color: {{ s.title_color|default('#cc5200') }};">{{ s.title }}</div>
    {% if s.desc %}<div class="c3i-side-desc">{{ s.desc|safe }}</div>{% endif %}
  </div>
  {% endfor %}
</div>

<style>
.block-c3i {
  position: relative; width: 100%;
  aspect-ratio: 2.154 / 1; overflow: hidden; word-break: keep-all;
}

.c3i-bg {
  position: absolute; left: 7%; bottom: 0; width: 86%; height: 29%;
  mix-blend-mode: multiply; pointer-events: none;
}
.c3i-bg img { width: 100%; height: 100%; object-fit: cover; }

/* arc: 이미지 유지 (곡선 CSS 불가) */
.c3i-arc { position: absolute; z-index: 2; }
.c3i-arc img { display: block; }
.c3i-arc--top { left: 44.9%; top: 14%; width: 10.1%; height: 10.3%; }
.c3i-arc--top img { width: 100%; height: 100%; transform: rotate(180deg); }
.c3i-arc--left { left: 30.4%; top: 57.4%; width: 4.8%; height: 21.8%; }
.c3i-arc--left img { width: 218%; height: 47.4%; transform: rotate(90deg); transform-origin: center; }
.c3i-arc--right { left: 64.5%; top: 57.4%; width: 4.8%; height: 21.8%; }
.c3i-arc--right img { width: 218%; height: 47.4%; transform: rotate(-90deg); transform-origin: center; }

/* main 3원: CSS gradient + blend multiply (R10) */
.c3i-main {
  position: absolute; width: 17%; aspect-ratio: 1;
  border-radius: 50%; mix-blend-mode: multiply; z-index: 3;
}
.c3i-main--1 { left: 41.4%; top: 21.5%; }
.c3i-main--2 { left: 33.7%; top: 50.2%; }
.c3i-main--3 { left: 48.9%; top: 50.2%; }

/* ring: CSS gradient + white border + shadow */
.c3i-ring {
  position: absolute; width: 14.1%; aspect-ratio: 1;
  border-radius: 50%; border: 4px solid #fff;
  box-shadow: 0 0 10px 0 rgba(0,0,0,1); z-index: 4;
}
.c3i-ring--1 { left: 42.8%; top: 24.5%; }
.c3i-ring--2 { left: 35.3%; top: 53.7%; }
.c3i-ring--3 { left: 50.6%; top: 53.7%; }

.c3i-label {
  position: absolute; width: 12.8%;
  font-weight: 700; font-size: 24px; color: #fff;
  text-align: center; line-height: 1; letter-spacing: -0.05em;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 5;
}
.c3i-label--1 { left: 43.5%; top: 34.5%; }
.c3i-label--2 { left: 35.8%; top: 63.2%; }
.c3i-label--3 { left: 51.1%; top: 62.4%; }

/* accent 6원 */
.c3i-acc-outer {
  position: absolute; width: 6.35%; aspect-ratio: 1;
  border-radius: 50%; opacity: 0.3; mix-blend-mode: multiply; z-index: 6;
}
.c3i-acc-inner {
  position: absolute; width: 4.0%; aspect-ratio: 1;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 10px 0 rgba(0,0,0,1); z-index: 7;
}
.c3i-acc-outer--1 { left: 41.7%; top: 2.3%; }
.c3i-acc-outer--2 { left: 51.9%; top: 2.3%; }
.c3i-acc-outer--3 { left: 26.9%; top: 50.5%; }
.c3i-acc-outer--4 { left: 26.9%; top: 72.0%; }
.c3i-acc-outer--5 { left: 66.5%; top: 50.5%; }
.c3i-acc-outer--6 { left: 66.5%; top: 72.0%; }
.c3i-acc-inner--1 { left: 42.8%; top: 4.7%; }
.c3i-acc-inner--2 { left: 53.0%; top: 4.7%; }
.c3i-acc-inner--3 { left: 28.1%; top: 52.9%; }
.c3i-acc-inner--4 { left: 28.1%; top: 74.4%; }
.c3i-acc-inner--5 { left: 67.7%; top: 52.9%; }
.c3i-acc-inner--6 { left: 67.7%; top: 74.4%; }

.c3i-acc-char {
  position: absolute; width: 4.8%;
  font-weight: 700; font-size: 22px; color: #fff;
  text-align: center; letter-spacing: -0.05em;
  text-shadow: 0 0 5px #cc5200;
  display: flex; align-items: center; justify-content: center; z-index: 8;
}
.c3i-acc-char--1 { left: 42.4%; top: 6.6%; }
.c3i-acc-char--2 { left: 52.7%; top: 6.6%; }
.c3i-acc-char--3 { left: 27.7%; top: 54.8%; }
.c3i-acc-char--4 { left: 27.7%; top: 76.3%; }
.c3i-acc-char--5 { left: 67.3%; top: 54.8%; }
.c3i-acc-char--6 { left: 67.3%; top: 76.3%; }

/* side labels */
.c3i-side { position: absolute; z-index: 5; }
.c3i-side-title { font-weight: 700; font-size: 20px; line-height: 1.8; white-space: nowrap; }
.c3i-side-desc { font-weight: 500; font-size: 15px; color: #525151; line-height: 1.3; }
.c3i-side--1 { right: 60%; top: 0; text-align: right; }
.c3i-side--2 { left: 60%; top: 0; }
.c3i-side--3 { right: 74%; top: 47.6%; text-align: right; }
.c3i-side--4 { right: 74%; top: 69.1%; text-align: right; }
.c3i-side--5 { left: 73.6%; top: 47.6%; }
.c3i-side--6 { left: 73.6%; top: 69.4%; }
</style>