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

<!-- Process/Product 2단 비교: 좌측 과정의 혁신 + 우측 결과의 혁신 -->
<!--
  📋 process-product-2col
  ─────────────────
  용도: Process 혁신과 Product 변화를 좌우 2단으로 비교
  슬롯:
    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">
  <div class="pp2-col pp2-left">
    <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-body">
      {% if left_compare %}
      <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">
          <img src="{{ arrow_image | default('') }}" alt="→" class="pp2-arrow-img">
        </div>
        <div class="pp2-compare-col">
          {% for item in left_compare.right_items %}
          <div class="pp2-body-text">• {{ item }}</div>
          {% endfor %}
        </div>
      </div>
      {% endif %}
      {% for section in left_sections %}
      <div class="pp2-mid-title pp2-mid-title--left">{{ section.title }}</div>
      {% for bullet in section.bullets %}
      <div class="pp2-body-text">• {{ bullet }}</div>
      {% endfor %}
      {% endfor %}
    </div>
  </div>
  <div class="pp2-col pp2-right">
    <div class="pp2-header-bar pp2-header-bar--right">
      <span class="pp2-header-text pp2-header-text--right">{{ right_title }}</span>
    </div>
    <div class="pp2-body">
      {% for section in right_sections %}
      <div class="pp2-mid-title pp2-mid-title--right">{{ section.title }}</div>
      {% for bullet in section.bullets %}
      <div class="pp2-body-text">• {{ bullet }}</div>
      {% endfor %}
      {% endfor %}
    </div>
  </div>
</div>

<style>
.block-pp2 {
  display: flex;
  gap: 0;
  width: 100%;
  height: 100%;
}

.pp2-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 495px;
}

/* 좌측 배경: Figma gradient 180deg #fff 46% → #39311e 100% */
.pp2-left {
  background: linear-gradient(180deg, #ffffff 46%, #39311e 100%);
}

/* 우측 배경: Figma gradient 0deg #296b55 0% → #fff 56% */
.pp2-right {
  background: linear-gradient(0deg, #296b55 0%, #ffffff 56%);
}

/* 제목 바: height=47.2px, top=20.6px → padding-top으로 처리 */
.pp2-header-bar {
  height: 47px;
  margin-top: 21px;
  display: flex;
  align-items: center;
}

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

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

/* 제목 텍스트: 23.3px/900, letterSpacing=1.2px */
.pp2-header-text {
  font-size: 23.3px;
  font-weight: 900;
  letter-spacing: 1.2px;
  line-height: 33.7px;
}

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

/* 우 제목: Figma solid fill #225e4a */
.pp2-header-text--right {
  color: #225e4a;
}

/* 본문 영역 */
.pp2-body {
  padding: 10px 27px;
  flex: 1;
}

/* 중제목: 16.6px/900, lineH=31.6px */
.pp2-mid-title {
  font-size: 16.6px;
  font-weight: 900;
  line-height: 31.6px;
  margin-top: 8px;
}
.pp2-mid-title:first-child {
  margin-top: 0;
}
.pp2-mid-title--left {
  color: #5c3614;
}
.pp2-mid-title--right {
  color: #084c56;
}

/* 본문: 13.3px/700, lineH=23.3px */
.pp2-body-text {
  font-size: 13.3px;
  font-weight: 700;
  color: #000000;
  line-height: 23.3px;
}

/* 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;
}
</style>