C.E.L_Slide_test2/templates/blocks/cards/compare-detail-gradient.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: 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: 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: 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>