C.E.L_Slide_test2/templates/blocks/redesign/process-product-2col.html

<!-- Process/Product 2단 비교: 좌측 과정의 혁신 + 우측 결과의 혁신 -->
<!--
  📋 process-product-2col
  ─────────────────
  용도: Process 혁신과 Product 변화를 좌우 2단으로 비교 (redesign: 슬라이드 적용 크기)
  원본: BEPs/process-product-2col.html (Figma 크기)
  슬라이드 적용: header 13px, mid_title 12px, body 11px (참고: mdx03_final 기준)
  슬롯:
    left_title, right_title: 좌/우 제목
    left_sections[], right_sections[]: 섹션 목록 (title + bullets[])
    left_compare: As-is → To-be 비교 (선택, title + left_items[] + right_items[])
  Figma 원본: Frame 1171276073 (3848x1487 → 1280x495)
  색상 (Figma에서 추출):
    좌 배경: linear-gradient(180deg, #ffffff 46%, #39311e 100%)
    우 배경: linear-gradient(0deg, #296b55 0%, #ffffff 56%)
    좌 제목바: linear-gradient(270deg, #a4a096, #39311e)
    우 제목바: linear-gradient(0deg, #296b55, #022017)
    좌 제목텍스트: gradient(#296b55→#123328) + solid #3e3523
    우 제목텍스트: gradient(#296b55→#123328) + solid #225e4a
    좌 중제목: #5c3614, 16.6px/900
    우 중제목: #084c56, 16.6px/900
    본문: #000000, 13.3px/700, lineH=23.3px
-->
<div class="block-pp2">
  <!-- 좌/우 배경 gradient (absolute) -->
  <div class="pp2-bg pp2-bg--left"></div>
  <div class="pp2-bg pp2-bg--right"></div>

  <!-- 헤더 행 -->
  <div class="pp2-header-bar pp2-header-bar--left">
    <span class="pp2-header-text pp2-header-text--left">{{ left_title }}</span>
  </div>
  <div class="pp2-header-bar pp2-header-bar--right">
    <span class="pp2-header-text pp2-header-text--right">{{ right_title }}</span>
  </div>

  <!-- compare 행 (좌측에만) -->
  {% if left_compare %}
  <div class="pp2-cell pp2-cell--left">
    <div class="pp2-mid-title pp2-mid-title--left">{{ left_compare.title }}</div>
    <div class="pp2-compare">
      <div class="pp2-compare-col">
        {% for item in left_compare.left_items %}
        <div class="pp2-body-text">• {{ item }}</div>
        {% endfor %}
      </div>
      <div class="pp2-compare-arrow">
        {% if arrow_image %}<img src="{{ arrow_image }}" alt="→" class="pp2-arrow-img">
        {% else %}<span class="pp2-arrow-text">➠</span>{% endif %}
      </div>
      <div class="pp2-compare-col">
        {% for item in left_compare.right_items %}
        <div class="pp2-body-text">• {{ item }}</div>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="pp2-cell pp2-cell--right">
    {% if paired_rows and paired_rows|length > 0 %}
    <div class="pp2-mid-title pp2-mid-title--right">{{ paired_rows[0].right.title }}</div>
    {% for bullet in paired_rows[0].right.bullets %}
    <div class="pp2-body-text">• {{ bullet }}</div>
    {% endfor %}
    {% endif %}
  </div>
  {% endif %}

  <!-- 나머지 행들 (좌/우 행 정렬) -->
  {% for row in paired_rows %}
  {% if loop.index0 > 0 or not left_compare %}
  <div class="pp2-cell pp2-cell--left">
    {% if row.left %}
    <div class="pp2-mid-title pp2-mid-title--left">{{ row.left.title }}</div>
    {% for bullet in row.left.bullets %}
    <div class="pp2-body-text">• {{ bullet }}</div>
    {% endfor %}
    {% endif %}
  </div>
  <div class="pp2-cell pp2-cell--right">
    {% if row.right %}
    <div class="pp2-mid-title pp2-mid-title--right">{{ row.right.title }}</div>
    {% for bullet in row.right.bullets %}
    <div class="pp2-body-text">• {{ bullet }}</div>
    {% endfor %}
    {% endif %}
  </div>
  {% endif %}
  {% endfor %}
</div>

<style>
.block-pp2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

/* 좌/우 배경 (absolute로 깔기) */
.pp2-bg {
  position: absolute;
  top: 0; height: 100%;
  z-index: 0;
}
.pp2-bg--left {
  left: 0; width: 50%;
  background: linear-gradient(180deg, #ffffff 46%, #39311e 100%);
}
.pp2-bg--right {
  left: 50%; width: 50%;
  background: linear-gradient(0deg, #296b55 0%, #ffffff 56%);
}

/* grid cell 공통 */
.pp2-cell {
  position: relative;
  z-index: 1;
  padding: 2px 12px;
}
.pp2-cell--left { grid-column: 1; }
.pp2-cell--right { grid-column: 2; }

/* 제목 바: redesign 축소 */
.pp2-header-bar {
  height: 30px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* 좌 제목바: 우측 둥글게, 그라데이션 우→좌 */
.pp2-header-bar--left {
  grid-column: 1;
  background: linear-gradient(270deg, #a4a096 0%, #39311e 100%);
  border-radius: 0 24px 24px 0;
  justify-content: center;
}

/* 우 제목바: 좌측 둥글게, 그라데이션 좌→우 */
.pp2-header-bar--right {
  grid-column: 2;
  background: linear-gradient(90deg, #296b55 0%, #022017 100%);
  border-radius: 24px 0 0 24px;
  padding-left: 24px;
}

/* 제목 텍스트: redesign 13px */
.pp2-header-text {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* 좌 제목: Figma solid fill #3e3523 */
.pp2-header-text--left {
  color: #3e3523;
}

/* 우 제목: 흰색 (gradient 배경 위 가독성) */
.pp2-header-text--right {
  color: #ffffff;
}

/* 본문 영역 (flex 방식 호환) */
.pp2-body {
  padding: 4px 12px;
  overflow: hidden;
}

/* 중제목: redesign 12px */
.pp2-mid-title {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
  margin-top: 6px;
}
.pp2-mid-title:first-child {
  margin-top: 0;
}
.pp2-mid-title--left {
  color: #5c3614;
}
.pp2-mid-title--right {
  color: #084c56;
}

/* 본문: redesign 11px + 소제목 대비 들여쓰기 + hanging indent */
.pp2-body-text {
  font-size: 11px;
  font-weight: 700;
  color: #000000;
  line-height: 1.6;
  padding-left: 14px;
  text-indent: -14px;
}

/* As-is → To-be 비교 */
.pp2-compare {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}
.pp2-compare-col {
  flex: 1;
}
.pp2-compare-arrow {
  flex-shrink: 0;
  width: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp2-arrow-img {
  width: 84px;
  height: 30px;
  object-fit: contain;
}
.pp2-arrow-text {
  font-size: 24px;
  color: #5c3614;
}
</style>