126 lines
4.9 KiB
HTML
126 lines
4.9 KiB
HTML
<!-- 그라디언트 상세 2열 비교: 비대칭 라운드 헤더 + 행 공유 + As-Is/To-Be -->
|
||
<!--
|
||
📋 compare-detail-gradient
|
||
─────────────────
|
||
용도: 두 카테고리의 상세 비교 (각각 N개 하위 섹션, 행 공유 정렬)
|
||
슬롯: left_header, right_header, sections[] (각 row에 left + right)
|
||
Figma 원본: Frame 4 (과정의 혁신 vs 결과의 혁신)
|
||
디자인:
|
||
- 좌측 헤더: 우측 라운드 + 텍스트 우정렬 (warm 그라디언트)
|
||
- 우측 헤더: 좌측 라운드 + 텍스트 좌정렬 (teal 그라디언트)
|
||
- CSS Grid 2열×N행: 좌/우 섹션 제목이 같은 Y선에 정렬
|
||
- 첫 섹션에 As-Is → 화살표 → To-Be 수평 배치 가능
|
||
수학적 계산:
|
||
좌/우 섹션 Y좌표 — Row1: 1166/1166(정렬), Row2: 1529/1467(62px차→Grid해결), Row3: 1845/1845(정렬)
|
||
-->
|
||
<div class="block-cdg">
|
||
<!-- Row 0: Headers -->
|
||
<div class="cdg-header cdg-header-warm">
|
||
<span class="cdg-header-text">{{ left_header }}</span>
|
||
</div>
|
||
<div class="cdg-header cdg-header-teal">
|
||
<span class="cdg-header-text">{{ right_header }}</span>
|
||
</div>
|
||
|
||
<!-- Rows: sections (행 공유로 좌/우 Y선 자동 정렬) -->
|
||
{% for row in sections %}
|
||
<div class="cdg-cell cdg-cell-warm">
|
||
<div class="cdg-sec-title cdg-title-warm">{{ row.left.title }}</div>
|
||
{% if row.left.asis is defined %}
|
||
<div class="cdg-asis-tobe">
|
||
<div class="cdg-asis">
|
||
{% for b in row.left.asis %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||
</div>
|
||
<img src="{{ arrow_image | default('svg/arrow_asis_tobe.png') }}" class="cdg-arrow" alt="→">
|
||
<div class="cdg-tobe">
|
||
{% for b in row.left.tobe %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||
</div>
|
||
</div>
|
||
{% elif row.left.bullets is defined %}
|
||
<div class="cdg-sec-body">
|
||
{% for b in row.left.bullets %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="cdg-sec-body">{{ row.left.body }}</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="cdg-cell cdg-cell-teal">
|
||
<div class="cdg-sec-title cdg-title-teal">{{ row.right.title }}</div>
|
||
{% if row.right.bullets is defined %}
|
||
<div class="cdg-sec-body">
|
||
{% for b in row.right.bullets %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="cdg-sec-body">{{ row.right.body }}</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<style>
|
||
/*
|
||
CSS Grid: 2열 × (1+N)행
|
||
행 공유 → 좌/우 섹션 제목이 같은 Y선에 자동 정렬
|
||
Figma Row2 차이: 좌 y=1529, 우 y=1467 (62px) → Grid가 해결
|
||
*/
|
||
/*
|
||
B안: Grid 배경에 좌/우 절반씩 연속 그라디언트
|
||
→ 셀 경계가 안 보이고 Figma처럼 자연스러운 배경
|
||
→ Grid 행 공유로 Y선 정렬도 유지
|
||
*/
|
||
.block-cdg {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
background: linear-gradient(90deg,
|
||
rgba(255,255,255,0.4) 0%,
|
||
rgba(57,50,30,0.12) 50%,
|
||
rgba(41,107,85,0.06) 50%,
|
||
rgba(255,255,255,0.4) 100%
|
||
);
|
||
}
|
||
|
||
/* ── Headers (비대칭 라운드 — 자체 배경 유지) ── */
|
||
.cdg-header { padding: 12px 28px; display: flex; min-height: 52px; align-items: center; }
|
||
.cdg-header-text { font-size: var(--cdg-heading-font, 26px); font-weight: var(--weight-black, 900); color: #000; line-height: 1.3; }
|
||
.cdg-header-warm {
|
||
background: linear-gradient(90deg, rgba(165,161,150,0.15), rgba(57,50,30,0.85));
|
||
border-radius: 0 28px 28px 0; justify-content: flex-end; text-align: right; margin-right: 4px;
|
||
}
|
||
.cdg-header-teal {
|
||
background: linear-gradient(90deg, rgba(3,33,24,0.85), rgba(41,107,85,0.15));
|
||
border-radius: 28px 0 0 28px; justify-content: flex-start; text-align: left; margin-left: 4px;
|
||
}
|
||
|
||
/* ── Grid Cells (배경 제거 → Grid 배경이 투과) ── */
|
||
.cdg-cell {
|
||
padding: 14px 20px;
|
||
display: flex; flex-direction: column; gap: 6px;
|
||
align-self: start;
|
||
background: none;
|
||
}
|
||
.cdg-cell-warm { background: none; }
|
||
.cdg-cell-teal { background: none; }
|
||
|
||
/* ── Section Title & Body ── */
|
||
.cdg-sec-title { font-size: var(--cdg-body-font, 18px); font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 4px; }
|
||
.cdg-title-warm { color: var(--color-warm-brown, #5C3714); }
|
||
.cdg-title-teal { color: var(--color-dark-teal, #084C56); }
|
||
.cdg-sec-body { padding-left: 8px; }
|
||
|
||
/* ── Bullets ── */
|
||
.cdg-bullet {
|
||
position: relative; padding-left: 14px;
|
||
font-size: var(--cdg-body-font, 14px); font-weight: var(--weight-bold, 700); color: #1a1a1a;
|
||
line-height: 1.7; word-break: keep-all;
|
||
}
|
||
.cdg-bullet::before { content: '•'; position: absolute; left: 0; color: #666; }
|
||
|
||
/* ── As-Is → To-Be 수평 레이아웃 ── */
|
||
.cdg-asis-tobe { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
|
||
.cdg-asis, .cdg-tobe { flex: 1; padding-left: 8px; }
|
||
.cdg-arrow { width: 60px; height: auto; flex-shrink: 0; opacity: 0.7; }
|
||
</style>
|