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>
120 lines
4.5 KiB
HTML
120 lines
4.5 KiB
HTML
<!-- 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>
|