블록 템플릿 업데이트: 수정 3개 + 신규 17개 + catalog.yaml 재정비
수정: - 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>
This commit is contained in:
117
templates/blocks/new/cards-3col-persona.html
Normal file
117
templates/blocks/new/cards-3col-persona.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<!-- 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>
|
||||
122
templates/blocks/new/compare-vs-rows.html
Normal file
122
templates/blocks/new/compare-vs-rows.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!-- VS 비교 행: CSS gradient pills + 좌/우 텍스트 비교 -->
|
||||
<!--
|
||||
📋 compare-vs-rows
|
||||
─────────────────
|
||||
용도: A vs B를 카테고리별로 좌/우 비교. CSS gradient pill, 하단 결론 박스.
|
||||
슬롯:
|
||||
header (icon, title) — 선택
|
||||
main_labels (left, center, right)
|
||||
rows[] (category, left_text, right_text)
|
||||
conclusion (arrow_img, text — HTML with <em>)
|
||||
Figma 원본: Frame 1171281195 (node 45:20, 1868×1908)
|
||||
수학적 계산:
|
||||
scale = 1280 / 1868 = 0.685225
|
||||
main pill: 1803×75, radius=50px, grid 748|242|813
|
||||
cat pill: 242px, radius=10px
|
||||
left: #5c3714 Bold, right: #285b4a Bold (MCP 확인)
|
||||
conclusion: SVG 분석 bg=#FAEDCB mix-blend-mode:multiply
|
||||
CSS 요소: main pill gradient, cat pill gradient, conclusion bg, header gradient text
|
||||
이미지 요소: header icon, conclusion arrow
|
||||
-->
|
||||
<div class="block-cvr">
|
||||
{% if header %}
|
||||
<div class="cvr-header">
|
||||
{% if header.icon %}<div class="cvr-header-icon"><img src="{{ header.icon | default('svg/icon_header.png') }}" alt=""></div>{% endif %}
|
||||
<div class="cvr-header-title">{{ header.title }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if main_labels %}
|
||||
<div class="cvr-main-pill">
|
||||
<div>{{ main_labels.left }}</div>
|
||||
<div>{{ main_labels.center|default('vs.') }}</div>
|
||||
<div>{{ main_labels.right }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="cvr-rows">
|
||||
{% for row in rows %}
|
||||
<div class="cvr-row">
|
||||
<div class="cvr-left">{{ row.left_text|safe }}</div>
|
||||
<div class="cvr-cat">{{ row.category }}</div>
|
||||
<div class="cvr-right">{{ row.right_text|safe }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if conclusion %}
|
||||
<div class="cvr-conclusion">
|
||||
{% if conclusion.arrow_img %}<img src="{{ conclusion.arrow_img | default('svg/arrow_conclusion.svg') }}" class="cvr-conclusion-arrow" alt="">{% endif %}
|
||||
<div class="cvr-conclusion-bg"></div>
|
||||
<div class="cvr-conclusion-text">{{ conclusion.text|safe }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-cvr {
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%; word-break: keep-all;
|
||||
}
|
||||
|
||||
.cvr-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
|
||||
.cvr-header-icon { width: 24px; height: 24px; flex: none; }
|
||||
.cvr-header-icon img { width: 100%; height: 100%; object-fit: contain; }
|
||||
.cvr-header-title {
|
||||
font-weight: 700; font-size: 28px;
|
||||
background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
text-shadow: 0 0 4px #322c1e;
|
||||
}
|
||||
|
||||
/* main pill: CSS gradient (MCP 확인) */
|
||||
.cvr-main-pill {
|
||||
display: grid; grid-template-columns: 40fr 13fr 47fr;
|
||||
align-items: center; height: 36px; border-radius: 24px;
|
||||
background: linear-gradient(270deg, #285b4a 0%, rgba(40,91,74,0.8) 30%, rgba(74,64,38,0.8) 70%, #4a4026 100%);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.cvr-main-pill > div { font-weight: 700; font-size: 22px; color: #fff; text-align: center; white-space: nowrap; }
|
||||
|
||||
.cvr-rows { display: flex; flex-direction: column; flex: 1; }
|
||||
.cvr-row {
|
||||
display: grid; grid-template-columns: 40fr 13fr 47fr;
|
||||
align-items: center; min-height: 36px;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
.cvr-left {
|
||||
font-weight: 700; font-size: 16px; color: #5c3714;
|
||||
text-align: right; padding: 6px 12px; line-height: 1.3;
|
||||
}
|
||||
.cvr-right {
|
||||
font-weight: 700; font-size: 16px; color: #285b4a;
|
||||
text-align: left; padding: 6px 12px; line-height: 1.3;
|
||||
}
|
||||
.cvr-left .sub, .cvr-right .sub { font-size: 14px; }
|
||||
|
||||
/* cat pill: CSS gradient */
|
||||
.cvr-cat {
|
||||
font-weight: 700; font-size: 16px; color: #fff;
|
||||
text-align: center; white-space: nowrap; padding: 6px 8px; border-radius: 6px;
|
||||
background: linear-gradient(270deg, rgba(40,91,74,0.8) 0%, rgba(40,91,74,0.64) 30%, rgba(74,64,38,0.64) 70%, rgba(74,64,38,0.8) 100%);
|
||||
}
|
||||
|
||||
/* conclusion: CSS bg (SVG 분석 #FAEDCB + multiply) */
|
||||
.cvr-conclusion {
|
||||
position: relative; display: flex; align-items: center;
|
||||
gap: 12px; margin-top: 8px; padding: 8px 16px; min-height: 60px;
|
||||
}
|
||||
.cvr-conclusion-arrow {
|
||||
flex: none; width: 80px; height: 60px;
|
||||
object-fit: contain; transform: rotate(180deg);
|
||||
}
|
||||
.cvr-conclusion-bg {
|
||||
position: absolute; inset: 0;
|
||||
background: #FAEDCB; mix-blend-mode: multiply; z-index: 0;
|
||||
}
|
||||
.cvr-conclusion-text {
|
||||
position: relative; z-index: 1;
|
||||
font-weight: 700; font-size: 18px; color: #000; line-height: 1.5;
|
||||
}
|
||||
.cvr-conclusion-text em { font-style: normal; color: #ae3607; font-size: 20px; }
|
||||
</style>
|
||||
162
templates/blocks/new/cycle-3way-intersect.html
Normal file
162
templates/blocks/new/cycle-3way-intersect.html
Normal file
@@ -0,0 +1,162 @@
|
||||
<!-- 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>
|
||||
135
templates/blocks/new/issues-paired-rows.html
Normal file
135
templates/blocks/new/issues-paired-rows.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!-- 이슈 쌍 행: 좌/우 pill(두루마리 이미지) + 2열 텍스트 박스 -->
|
||||
<!--
|
||||
📋 issues-paired-rows
|
||||
─────────────────
|
||||
용도: 좌/우 대비되는 이슈를 쌍으로 나열. pill(두루마리)이 박스 위/아래로 걸침.
|
||||
슬롯:
|
||||
header (icon, title) — 선택
|
||||
pill_bg — 두루마리 배경 이미지 (R16 프레임 배치, crop 대상이므로 이미지 유지)
|
||||
rows[] (left {label, text}, right {label, text}, pills_bottom: bool)
|
||||
Figma 원본: Frame 1171281194 (node 45:19, 1857×1326)
|
||||
수학적 계산:
|
||||
scale = 1280 / 1857 = 0.68933
|
||||
pill: 458×95.6, width=24.7% of row
|
||||
pill R16 이미지 프레임: left:-45.3% width:145.3% (좌), left:0 width:151.25% (우)
|
||||
bottom pill: rotate(180deg) + 이미지 반전
|
||||
text: 36px → 25px, lh 65px → 45px
|
||||
pill label: 40px → 28px
|
||||
box: border 3px #60a451, radius 30px, bg rgba(250,237,203,0.15) (MCP 확인)
|
||||
divider: 1px dashed rgba(96,164,81,0.4)
|
||||
CSS 요소: box border/bg/radius, divider, header gradient text
|
||||
이미지 요소: pill_bg (두루마리, R16 crop), header icon
|
||||
-->
|
||||
<div class="block-ipr">
|
||||
{% if header %}
|
||||
<div class="ipr-header">
|
||||
{% if header.icon %}<div class="ipr-header-icon"><img src="{{ header.icon | default('svg/icon_header.png') }}" alt=""></div>{% endif %}
|
||||
<div class="ipr-header-title">{{ header.title }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="ipr-rows">
|
||||
{% for row in rows %}
|
||||
<div class="ipr-row">
|
||||
{% if not row.pills_bottom %}
|
||||
<div class="ipr-pills ipr-pills--top">
|
||||
<div class="ipr-pill ipr-pill--left">
|
||||
{% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
|
||||
<span class="ipr-pill-label">{{ row.left.label }}</span>
|
||||
</div>
|
||||
<div class="ipr-pill ipr-pill--right">
|
||||
{% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
|
||||
<span class="ipr-pill-label">{{ row.right.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="ipr-text-row">
|
||||
<div class="ipr-text">{{ row.left.text|safe }}</div>
|
||||
<div class="ipr-divider"></div>
|
||||
<div class="ipr-text ipr-text--right">{{ row.right.text|safe }}</div>
|
||||
</div>
|
||||
|
||||
{% if row.pills_bottom %}
|
||||
<div class="ipr-pills ipr-pills--bottom">
|
||||
<div class="ipr-pill ipr-pill--left">
|
||||
{% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
|
||||
<span class="ipr-pill-label">{{ row.left.label }}</span>
|
||||
</div>
|
||||
<div class="ipr-pill ipr-pill--right">
|
||||
{% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
|
||||
<span class="ipr-pill-label">{{ row.right.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-ipr {
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%; word-break: keep-all; padding: 12px 16px;
|
||||
}
|
||||
|
||||
/* header: MCP 확인 gradient(#cc5200→#883700) */
|
||||
.ipr-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
|
||||
.ipr-header-icon { width: 28px; height: 28px; flex: none; }
|
||||
.ipr-header-icon img { width: 100%; height: 100%; object-fit: contain; }
|
||||
.ipr-header-title {
|
||||
font-weight: 700; font-size: 32px;
|
||||
background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
text-shadow: 0 0 4px rgba(50,44,30,0.4);
|
||||
}
|
||||
|
||||
.ipr-rows { display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
/* box: MCP 확인 border=#60a451, radius=30px, bg=rgba(250,237,203,0.15) */
|
||||
.ipr-row {
|
||||
border: 2px solid #60a451; border-radius: 16px;
|
||||
background: rgba(250,237,203,0.15);
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* pill 배치: 두루마리 이미지(R16 crop) */
|
||||
.ipr-pills { display: flex; justify-content: space-between; }
|
||||
.ipr-pills--top { margin-top: -1.8rem; }
|
||||
.ipr-pills--bottom { margin-bottom: -1.8rem; }
|
||||
|
||||
.ipr-pill {
|
||||
position: relative; width: 25%; height: 3.8rem;
|
||||
overflow: hidden; flex: none;
|
||||
}
|
||||
/* R16: 좌pill 우측 곡선만 보임, 우pill 좌측 곡선만 보임 */
|
||||
.ipr-pill--left img {
|
||||
position: absolute; top: 0; height: 100%;
|
||||
left: -45.3%; width: 145.3%;
|
||||
}
|
||||
.ipr-pill--right img {
|
||||
position: absolute; top: 0; height: 100%;
|
||||
left: 0; width: 151.25%;
|
||||
}
|
||||
/* bottom: rotate(180) + 이미지 반전 */
|
||||
.ipr-pills--bottom .ipr-pill { transform: rotate(180deg); }
|
||||
.ipr-pills--bottom .ipr-pill--left img { left: 0; width: 151.25%; }
|
||||
.ipr-pills--bottom .ipr-pill--right img { left: -45.3%; width: 145.3%; }
|
||||
|
||||
.ipr-pill-label {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; font-size: 20px; color: #fff;
|
||||
white-space: nowrap; z-index: 2;
|
||||
}
|
||||
.ipr-pills--bottom .ipr-pill-label { transform: rotate(180deg); }
|
||||
|
||||
/* 텍스트: 2열 grid */
|
||||
.ipr-text-row { display: grid; grid-template-columns: 1fr 1px 1fr; padding: 8px 12px; }
|
||||
.ipr-divider { border-left: 1px dashed rgba(96,164,81,0.4); margin: 4px 0; }
|
||||
.ipr-text {
|
||||
font-weight: 500; font-size: 18px; line-height: 1.8;
|
||||
color: #0c271e; padding: 4px 10px;
|
||||
}
|
||||
.ipr-text--right { text-align: right; }
|
||||
</style>
|
||||
119
templates/blocks/new/quadrant-2x2-issues.html
Normal file
119
templates/blocks/new/quadrant-2x2-issues.html
Normal file
@@ -0,0 +1,119 @@
|
||||
<!-- 2×2 사분면 이슈: CSS gradient ribbon + CSS card-bg + 중앙 인용구(이미지) -->
|
||||
<!--
|
||||
📋 quadrant-2x2-issues
|
||||
─────────────────
|
||||
용도: 4개 카테고리 이슈를 2×2 사분면으로 배치, 중앙에 인용구 원형 배지
|
||||
슬롯:
|
||||
quadrants[4] (ribbon_title, sections[{headline, bullets[]}])
|
||||
center_quote (bg_img — 원형 일러스트 이미지 유지, text — HTML)
|
||||
Figma 원본: Frame 1171281193 (node 45:18, 2226×1766)
|
||||
수학적 계산:
|
||||
scale = 1280 / 2226 = 0.575022
|
||||
ribbon: 1080×119, radius=50px (SVG path r=50)
|
||||
SVG gradient_math.py:
|
||||
TL/BL: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%)
|
||||
TR/BR: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%)
|
||||
card-bg: 픽셀 분석 gradient(180deg, #f2f2f2→#ffffff)
|
||||
headline: #ff0000 Bold, body: #000 Regular (MCP 확인)
|
||||
CSS 요소: ribbon gradient, card-bg gradient, headline/body text
|
||||
이미지 요소: center_quote bg (원형 일러스트, 복잡한 radial gradient)
|
||||
-->
|
||||
<div class="block-q2i">
|
||||
<div class="q2i-grid">
|
||||
{% for q in quadrants %}
|
||||
<div class="q2i-quad q2i-quad--{{ loop.index }}">
|
||||
<div class="q2i-card-bg {{ 'q2i-card-bg--bottom' if loop.index > 2 }}"></div>
|
||||
|
||||
<div class="q2i-ribbon {{ 'q2i-ribbon--warm' if loop.index in [1,3] else 'q2i-ribbon--teal' }} {{ 'q2i-ribbon--bottom' if loop.index > 2 }}">
|
||||
<div class="q2i-ribbon-text">{{ q.ribbon_title }}</div>
|
||||
</div>
|
||||
|
||||
<div class="q2i-content">
|
||||
{% for sec in q.sections %}
|
||||
<div class="q2i-section">
|
||||
{% if sec.headline %}<div class="q2i-headline">{{ sec.headline }}</div>{% endif %}
|
||||
{% if sec.bullets %}
|
||||
<ul class="q2i-bullets">
|
||||
{% for b in sec.bullets %}<li>{{ b }}</li>{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if center_quote %}
|
||||
<div class="q2i-center">
|
||||
{% if center_quote.bg_img %}<img src="{{ center_quote.bg_img | default('svg/circle_quote.png') }}" class="q2i-center-bg" alt="">{% endif %}
|
||||
<div class="q2i-center-text">{{ center_quote.text|safe }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-q2i { position: relative; width: 100%; word-break: keep-all; }
|
||||
|
||||
.q2i-grid { display: grid; grid-template-columns: 1fr 1fr; }
|
||||
|
||||
.q2i-quad {
|
||||
position: relative; display: flex; flex-direction: column;
|
||||
padding: 4px 8px; min-height: 200px;
|
||||
}
|
||||
|
||||
/* 우측 사분면: 우정렬 */
|
||||
.q2i-quad--2 .q2i-headline, .q2i-quad--4 .q2i-headline { text-align: right; }
|
||||
.q2i-quad--2 .q2i-bullets, .q2i-quad--4 .q2i-bullets { text-align: right; list-style-position: inside; padding-left: 0; }
|
||||
|
||||
/* card-bg: CSS gradient (픽셀 분석) */
|
||||
.q2i-card-bg {
|
||||
width: 100%; height: 80px;
|
||||
border-radius: 18px 18px 0 0;
|
||||
background: linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%);
|
||||
}
|
||||
.q2i-card-bg--bottom {
|
||||
border-radius: 0 0 18px 18px; order: 10;
|
||||
background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
/* ribbon: CSS gradient (SVG gradient_math.py 계산) */
|
||||
.q2i-ribbon {
|
||||
width: 100%; height: 44px; border-radius: 18px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.q2i-ribbon--bottom { order: 10; }
|
||||
.q2i-ribbon--warm { background: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%); }
|
||||
.q2i-ribbon--teal { background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%); }
|
||||
|
||||
.q2i-ribbon-text {
|
||||
font-weight: 900; font-size: 22px; color: #fff;
|
||||
text-shadow: 0 0 4px #322c1e; white-space: nowrap;
|
||||
}
|
||||
|
||||
.q2i-content { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 6px 4px; }
|
||||
|
||||
/* headline: MCP 확인 #ff0000 Bold */
|
||||
.q2i-headline { font-weight: 700; font-size: 18px; color: #ff0000; line-height: 1.3; }
|
||||
|
||||
/* body: MCP 확인 #000 Regular */
|
||||
.q2i-bullets {
|
||||
list-style: disc; margin: 0; padding-left: 28px;
|
||||
font-weight: 400; font-size: 15px; color: #000; line-height: 1.5;
|
||||
}
|
||||
.q2i-bullets li { word-break: keep-all; }
|
||||
|
||||
/* center quote: 이미지 유지 (원형 일러스트) */
|
||||
.q2i-center {
|
||||
position: absolute; top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px; height: 180px;
|
||||
display: flex; align-items: center; justify-content: center; z-index: 5;
|
||||
}
|
||||
.q2i-center-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
|
||||
.q2i-center-text {
|
||||
position: relative; z-index: 1;
|
||||
font-weight: 700; font-size: 20px; color: #fff;
|
||||
text-align: center; line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
172
templates/blocks/new/split-panel-numbered.html
Normal file
172
templates/blocks/new/split-panel-numbered.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!-- 분할 패널: 좌측 카테고리 + 우측 번호 설명 -->
|
||||
<!--
|
||||
📋 split-panel-numbered
|
||||
─────────────────
|
||||
용도: 좌측 카테고리별 항목 + 우측 번호 설명 2단 배치
|
||||
슬롯:
|
||||
title_icon — 아이콘 이미지
|
||||
title (HTML — <span class="model">, <span class="sub">)
|
||||
left_bg_color — 좌측 셰브론 배경 CSS gradient (기본값 제공)
|
||||
categories[] (name, color, items[])
|
||||
mid_arrow_img — 중간 화살표 이미지
|
||||
right_items[] (number, text, badge_img)
|
||||
arrow_img — 우측 화살표 이미지
|
||||
Figma 원본: Frame 1171281202 (node 45:27, 1863×834)
|
||||
수학적 계산:
|
||||
scale = 1280 / 1863 = 0.68706
|
||||
title: Model=70px gradient(#cc5200→#883700), sub=50px gradient(#296b55→#000) (MCP 확인)
|
||||
cat bar: 단색 #417d38, #008e52, #008970 (픽셀 분석, MCP=이미지)
|
||||
right bar: #e8ede3 단색 (픽셀 분석)
|
||||
left-bg: 셰브론 형태 + alpha gradient (픽셀 분석)
|
||||
CSS 요소: title gradient text, cat bars, right bars, left-bg, mid-deco
|
||||
이미지 요소: title icon, 3D badge(일러스트), arrow(아이콘), mid arrow
|
||||
-->
|
||||
<div class="block-spn">
|
||||
{% if title_icon or title %}
|
||||
<div class="spn-header">
|
||||
{% if title_icon %}<div class="spn-title-icon"><img src="{{ title_icon | default('svg/icon_title.png') }}" alt=""></div>{% endif %}
|
||||
{% if title %}<div class="spn-title">{{ title|safe }}</div>{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="spn-body">
|
||||
<!-- 좌측 패널 -->
|
||||
<div class="spn-left">
|
||||
<div class="spn-left-bg"></div>
|
||||
<div class="spn-categories">
|
||||
{% for cat in categories %}
|
||||
<div class="spn-cat">
|
||||
<div class="spn-cat-bar" style="background: {{ cat.color|default('#417d38') }};"></div>
|
||||
<div class="spn-cat-title">{{ cat.name }}</div>
|
||||
<div class="spn-cat-items">
|
||||
{% for item in cat.items %}
|
||||
<div class="spn-cat-item">· {{ item }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 중간 장식 -->
|
||||
<div class="spn-mid">
|
||||
<div class="spn-mid-deco"></div>
|
||||
{% if mid_arrow_img %}<img src="{{ mid_arrow_img | default('svg/arrow_mid.png') }}" class="spn-mid-arrow" alt="">{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 우측 패널 -->
|
||||
<div class="spn-right">
|
||||
{% for item in right_items %}
|
||||
<div class="spn-row">
|
||||
{% if item.badge_img %}<div class="spn-badge"><img src="{{ item.badge_img }}" alt=""></div>
|
||||
{% elif loop.index <= 5 %}<div class="spn-badge"><img src="svg/badge_num_0{{ loop.index }}.png" alt=""></div>{% endif %}
|
||||
<div class="spn-row-bar">
|
||||
<div class="spn-row-text">{{ item.text }}</div>
|
||||
{% if arrow_img %}<img src="{{ arrow_img | default('svg/arrow_right.png') }}" class="spn-row-arrow" alt="">{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-spn {
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%; height: 100%;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.spn-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.spn-title-icon { flex: none; width: 26px; height: 27px; }
|
||||
.spn-title-icon img { width: 100%; height: 100%; object-fit: contain; }
|
||||
|
||||
/* title: MCP 확인 gradient text */
|
||||
.spn-title { font-weight: 900; line-height: 1.1; white-space: nowrap; }
|
||||
.spn-title .model {
|
||||
font-size: 34px;
|
||||
background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
.spn-title .sub {
|
||||
font-size: 24px;
|
||||
background-image: linear-gradient(180deg, #296b55 0%, #000 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
|
||||
.spn-body { display: flex; flex: 1; }
|
||||
|
||||
/* 좌측: 셰브론 배경 (CSS clip-path + gradient) */
|
||||
.spn-left { position: relative; flex: 52; overflow: hidden; }
|
||||
.spn-left-bg {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(192,213,208,0.19) 0%, rgba(195,214,209,0.66) 50%, rgba(211,227,226,1) 95%);
|
||||
clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.spn-categories {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; flex-direction: column;
|
||||
justify-content: space-between; flex: 1;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.spn-cat { display: flex; flex-direction: column; }
|
||||
|
||||
/* cat bar: CSS 단색 (픽셀 분석, Figma=이미지) */
|
||||
.spn-cat-bar {
|
||||
height: 34px; border-radius: 5px;
|
||||
background: linear-gradient(90deg, currentColor 0%, currentColor 85%, transparent 100%);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.spn-cat-title {
|
||||
position: relative; z-index: 1; margin-top: -30px;
|
||||
font-size: 20px; font-weight: 700; color: #fff;
|
||||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||||
padding-left: 12px; line-height: 34px;
|
||||
}
|
||||
.spn-cat-items { padding: 4px 12px; }
|
||||
.spn-cat-item {
|
||||
font-size: 16px; font-weight: 500; color: #000;
|
||||
line-height: 1.6; text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* 중간 장식: CSS radial-gradient */
|
||||
.spn-mid {
|
||||
position: relative; flex: none; width: 8%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.spn-mid-deco {
|
||||
position: absolute; inset: 10% 0;
|
||||
background: radial-gradient(ellipse 60% 50% at 100% 50%,
|
||||
rgba(217,217,217,0.8) 0%, rgba(217,217,217,0.13) 60%, transparent 100%);
|
||||
}
|
||||
.spn-mid-arrow { position: relative; z-index: 1; width: 50px; height: 108px; object-fit: contain; }
|
||||
|
||||
/* 우측: 번호 + 설명 */
|
||||
.spn-right {
|
||||
flex: 40; display: flex; flex-direction: column;
|
||||
justify-content: space-between; padding: 4px 0;
|
||||
}
|
||||
.spn-row { display: flex; align-items: center; gap: 4px; }
|
||||
|
||||
/* badge: 3D 큐브 일러스트 → 이미지 유지 */
|
||||
.spn-badge { flex: none; width: 42px; height: 44px; z-index: 2; }
|
||||
.spn-badge img { width: 100%; height: 100%; object-fit: contain; }
|
||||
|
||||
/* right bar: CSS #e8ede3 (픽셀 분석) */
|
||||
.spn-row-bar {
|
||||
flex: 1; display: flex; align-items: center;
|
||||
min-height: 48px; padding: 8px 16px;
|
||||
background: #e8ede3; border-radius: 10px;
|
||||
}
|
||||
.spn-row-text {
|
||||
flex: 1; font-size: 18px; font-weight: 500;
|
||||
color: #11231d; line-height: 1.4;
|
||||
}
|
||||
.spn-row-arrow {
|
||||
flex: none; width: 22px; height: 21px;
|
||||
transform: rotate(180deg); object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
133
templates/blocks/new/stacked-arrow-list.html
Normal file
133
templates/blocks/new/stacked-arrow-list.html
Normal file
@@ -0,0 +1,133 @@
|
||||
<!-- 적층 화살표 리스트: CSS title bar + 좌측 아크(이미지) + 다이아몬드형 행 -->
|
||||
<!--
|
||||
📋 stacked-arrow-list
|
||||
─────────────────
|
||||
용도: 핵심 항목 N개를 다이아몬드(원호) 형태로 적층 표시
|
||||
슬롯:
|
||||
title (HTML — <em>으로 강조)
|
||||
left_label (HTML — <br>로 줄바꿈)
|
||||
left_arc_img — 좌측 곡선 장식 (이미지, CSS 곡선 불가)
|
||||
arrow_img — 화살표 아이콘 (이미지)
|
||||
items[] (text, border_color)
|
||||
Figma 원본: Frame 1171281180 (node 45:5, 1153×592)
|
||||
수학적 계산:
|
||||
scale = 1280 / 1153 = 1.11014 (확대)
|
||||
title bar: Figma bg=#fbd5b9, radius=5px, shadow=0 4px 4px rgba(0,0,0,0.25) (MCP 확인)
|
||||
title: 43px Bold #144838, highlight: 50px gradient(#cc5200) (MCP 확인)
|
||||
row: bg=rgba(255,255,255,0.5), radius=30px, shadow=2px 4px 5px rgba(0,0,0,0.5) (MCP 확인)
|
||||
border 색상: #fb5915, #e79000, #e9a804, #919f00, #0d6361 (MCP 확인)
|
||||
행 다이아몬드 indent: [0%, 6%, 9%, 6%, 0%]
|
||||
CSS 요소: title bar, row bg/border/shadow
|
||||
이미지 요소: arc(곡선), arrow(아이콘)
|
||||
-->
|
||||
<div class="block-sal">
|
||||
{% if title %}
|
||||
<div class="sal-header">
|
||||
<div class="sal-title-bar"></div>
|
||||
<div class="sal-title">{{ title|safe }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sal-body">
|
||||
{% if left_arc_img or left_label %}
|
||||
<div class="sal-deco">
|
||||
{% if left_arc_img %}<img src="{{ left_arc_img | default('svg/arc_left.svg') }}" class="sal-arc" alt="">{% endif %}
|
||||
{% if left_label %}<div class="sal-label">{{ left_label|safe }}</div>{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sal-rows">
|
||||
{% for item in items %}
|
||||
<div class="sal-row" style="--bc: {{ item.border_color|default('#fb5915') }};">
|
||||
{% if arrow_img %}
|
||||
<div class="sal-arrow"><img src="{{ arrow_img | default('svg/arrow_down.svg') }}" alt=""></div>
|
||||
{% endif %}
|
||||
<div class="sal-text">{{ item.text }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-sal {
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
/* ── 헤더 ── */
|
||||
.sal-header { position: relative; margin-bottom: 12px; }
|
||||
|
||||
/* title bar: MCP 확인 bg=#fbd5b9, radius=5px, shadow */
|
||||
.sal-title-bar {
|
||||
position: absolute;
|
||||
left: 1%; top: 50%;
|
||||
width: 98%; height: 32px;
|
||||
background: #fbd5b9;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
transform: translateY(-30%);
|
||||
}
|
||||
|
||||
/* title: MCP 확인 #144838, highlight gradient(#cc5200) */
|
||||
.sal-title {
|
||||
position: relative; z-index: 1;
|
||||
font-size: 26px; font-weight: 700;
|
||||
color: #144838;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.sal-title em {
|
||||
font-style: normal; font-weight: 900; font-size: 30px;
|
||||
background-image: linear-gradient(90deg, #cc5200 0%, #cc5200 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
|
||||
.sal-body { display: flex; align-items: stretch; flex: 1; }
|
||||
|
||||
/* 좌측: arc 이미지 + 세로 라벨 */
|
||||
.sal-deco {
|
||||
position: relative; flex: none; width: 14%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.sal-arc {
|
||||
position: absolute; right: 0; top: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: contain; object-position: right center;
|
||||
}
|
||||
.sal-label {
|
||||
position: relative; z-index: 1;
|
||||
font-size: 26px; font-weight: 700; color: #144838;
|
||||
text-align: center; line-height: 1.5;
|
||||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
/* 행: MCP 확인 bg, radius, shadow, border-bottom */
|
||||
.sal-rows {
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
justify-content: space-between; gap: 8px; padding: 8px 0;
|
||||
}
|
||||
.sal-row {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 12px 20px;
|
||||
background: rgba(255,255,255,0.5);
|
||||
border-radius: 30px;
|
||||
box-shadow: 2px 4px 5px rgba(0,0,0,0.5);
|
||||
border-bottom: 3px solid var(--bc, #fb5915);
|
||||
}
|
||||
.sal-row:nth-child(1) { margin-left: 0; }
|
||||
.sal-row:nth-child(2) { margin-left: 6%; }
|
||||
.sal-row:nth-child(3) { margin-left: 9%; }
|
||||
.sal-row:nth-child(4) { margin-left: 6%; }
|
||||
.sal-row:nth-child(5) { margin-left: 0; }
|
||||
|
||||
.sal-arrow { flex: none; width: 19px; height: 25px; transform: rotate(-90deg); }
|
||||
.sal-arrow img { width: 100%; height: 100%; }
|
||||
|
||||
.sal-text {
|
||||
flex: 1; font-size: 22px; font-weight: 500;
|
||||
color: #000; line-height: 1.5; letter-spacing: -0.03em;
|
||||
}
|
||||
</style>
|
||||
61
templates/blocks/new/statement-pill-highlight.html
Normal file
61
templates/blocks/new/statement-pill-highlight.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!-- 선언문 pill 강조: CSS gradient 캡슐 배경 + 센터 텍스트 + 하이라이트 -->
|
||||
<!--
|
||||
📋 statement-pill-highlight
|
||||
─────────────────
|
||||
용도: 핵심 선언/결론 메시지를 캡슐형 배경 위에 한 줄로 강조
|
||||
슬롯: text (HTML — <em>으로 하이라이트)
|
||||
Figma 원본: Frame 1171281207 (node 51:170, 3547×163)
|
||||
수학적 계산:
|
||||
scale = 1280 / 3547 = 0.36087
|
||||
pill height: 163 × S ≈ 59px → padding 기반 (텍스트 양 대응)
|
||||
font: 80px × S ≈ 29px, line-height: 90/80 = 1.125
|
||||
border-radius: 97px (Figma) → capsule (999px)
|
||||
색상 (CSS — AI 조정 가능):
|
||||
배경 gradient: 픽셀 분석 #3b3523(5%)→#263a2a(50%)→#113f31(95%)
|
||||
텍스트: #ffffff, Bold 700
|
||||
하이라이트(<em>): #ffee33
|
||||
text-shadow: 0 0 4px rgba(0,0,0,0.5)
|
||||
이미지 의존: 없음 (순수 CSS)
|
||||
-->
|
||||
<div class="block-sph">
|
||||
<div class="sph-pill">
|
||||
<div class="sph-text">{{ text|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-sph {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
캡슐: Figma 3547×163, border-radius 97 → 999px
|
||||
배경: 픽셀 분석 기반 CSS gradient (원본에 미세 네트워크 텍스처 있었으나 생략)
|
||||
*/
|
||||
.sph-pill {
|
||||
width: 100%;
|
||||
min-height: 59px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 14px 48px;
|
||||
}
|
||||
|
||||
/* 텍스트: Figma 80px/90px Bold white → scaled 29px */
|
||||
.sph-text {
|
||||
font-size: 29px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 1.125;
|
||||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
/* <em> 하이라이트: Figma #ffee33 */
|
||||
.sph-text em {
|
||||
color: #ffee33;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user