C.E.L_Slide_test2/templates/blocks/new/compare-vs-rows.html

<!-- VS 비교 행: CSS gradient pills + 좌/우 텍스트 비교 -->
<!--
  📋 compare-vs-rows
  ─────────────────
  용도: A vs B를 카테고리별로 좌/우 비교. CSS gradient pill, 하단 결론 박스.
  슬롯:
    header (icon, title) — 선택
    main_labels (left, center, right)
    rows[] (category, left_text, right_text)
    conclusion (arrow_img, text — HTML with <em>)
  Figma 원본: Frame 1171281195 (node 45:20, 1868×1908)
  수학적 계산:
    scale = 1280 / 1868 = 0.685225
    main pill: 1803×75, radius=50px, grid 748|242|813
    cat pill: 242px, radius=10px
    left: #5c3714 Bold, right: #285b4a Bold (MCP 확인)
    conclusion: SVG 분석 bg=#FAEDCB mix-blend-mode:multiply
  CSS 요소: main pill gradient, cat pill gradient, conclusion bg, header gradient text
  이미지 요소: header icon, conclusion arrow
-->
<div class="block-cvr">
  {% if header %}
  <div class="cvr-header">
    {% if header.icon %}<div class="cvr-header-icon"><img src="{{ header.icon | default('svg/icon_header.png') }}" alt=""></div>{% endif %}
    <div class="cvr-header-title">{{ header.title }}</div>
  </div>
  {% endif %}

  {% if main_labels %}
  <div class="cvr-main-pill">
    <div>{{ main_labels.left }}</div>
    <div>{{ main_labels.center|default('vs.') }}</div>
    <div>{{ main_labels.right }}</div>
  </div>
  {% endif %}

  <div class="cvr-rows">
    {% for row in rows %}
    <div class="cvr-row">
      <div class="cvr-left">{{ row.left_text|safe }}</div>
      <div class="cvr-cat">{{ row.category }}</div>
      <div class="cvr-right">{{ row.right_text|safe }}</div>
    </div>
    {% endfor %}
  </div>

  {% if conclusion %}
  <div class="cvr-conclusion">
    {% if conclusion.arrow_img %}<img src="{{ conclusion.arrow_img | default('svg/arrow_conclusion.svg') }}" class="cvr-conclusion-arrow" alt="">{% endif %}
    <div class="cvr-conclusion-bg"></div>
    <div class="cvr-conclusion-text">{{ conclusion.text|safe }}</div>
  </div>
  {% endif %}
</div>

<style>
.block-cvr {
  display: flex; flex-direction: column;
  width: 100%; word-break: keep-all;
}

.cvr-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cvr-header-icon { width: 24px; height: 24px; flex: none; }
.cvr-header-icon img { width: 100%; height: 100%; object-fit: contain; }
.cvr-header-title {
  font-weight: 700; font-size: 28px;
  background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 4px #322c1e;
}

/* main pill: CSS gradient (MCP 확인) */
.cvr-main-pill {
  display: grid; grid-template-columns: 40fr 13fr 47fr;
  align-items: center; height: 36px; border-radius: 24px;
  background: linear-gradient(270deg, #285b4a 0%, rgba(40,91,74,0.8) 30%, rgba(74,64,38,0.8) 70%, #4a4026 100%);
  margin-bottom: 4px;
}
.cvr-main-pill > div { font-weight: 700; font-size: 22px; color: #fff; text-align: center; white-space: nowrap; }

.cvr-rows { display: flex; flex-direction: column; flex: 1; }
.cvr-row {
  display: grid; grid-template-columns: 40fr 13fr 47fr;
  align-items: center; min-height: 36px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cvr-left {
  font-weight: 700; font-size: 16px; color: #5c3714;
  text-align: right; padding: 6px 12px; line-height: 1.3;
}
.cvr-right {
  font-weight: 700; font-size: 16px; color: #285b4a;
  text-align: left; padding: 6px 12px; line-height: 1.3;
}
.cvr-left .sub, .cvr-right .sub { font-size: 14px; }

/* cat pill: CSS gradient */
.cvr-cat {
  font-weight: 700; font-size: 16px; color: #fff;
  text-align: center; white-space: nowrap; padding: 6px 8px; border-radius: 6px;
  background: linear-gradient(270deg, rgba(40,91,74,0.8) 0%, rgba(40,91,74,0.64) 30%, rgba(74,64,38,0.64) 70%, rgba(74,64,38,0.8) 100%);
}

/* conclusion: CSS bg (SVG 분석 #FAEDCB + multiply) */
.cvr-conclusion {
  position: relative; display: flex; align-items: center;
  gap: 12px; margin-top: 8px; padding: 8px 16px; min-height: 60px;
}
.cvr-conclusion-arrow {
  flex: none; width: 80px; height: 60px;
  object-fit: contain; transform: rotate(180deg);
}
.cvr-conclusion-bg {
  position: absolute; inset: 0;
  background: #FAEDCB; mix-blend-mode: multiply; z-index: 0;
}
.cvr-conclusion-text {
  position: relative; z-index: 1;
  font-weight: 700; font-size: 18px; color: #000; line-height: 1.5;
}
.cvr-conclusion-text em { font-style: normal; color: #ae3607; font-size: 20px; }
</style>