kyeongmin
360cd8e44c
수정: - compare-2col-badge, compare-detail-gradient, hero-icon-cards 개선 신규 블록: - cards: category-strip-table, system-2col-center, hero-icon-cards_1 - emphasis: checklist-dark - visuals: cycle-orbit - new/: cards-3col-persona, compare-vs-rows, cycle-3way-intersect 등 8개 - redesign/: card_hero-icon-cards_1 - svg/: arc_left, arrow_conclusion, arrow_down, line_divider - BEPs: process-product-2col SVG + 테스트 catalog.yaml 전면 재정비 (슬롯 스키마, height_cost, 카테고리 정리) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
163 lines
6.7 KiB
HTML
163 lines
6.7 KiB
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>
|