<!-- 비교 박스: 이중 테두리 둥근 박스 2개 + VS -->
<!--
  📋 compare-pill-pair
  ─────────────────
  용도: 2개 개념 시각적 대비 (비교 테이블 위 헤더)
  슬롯: left_label, left_sub, right_label, right_sub
  Figma 원본: 이중 테두리 (바깥 얇은 선 + 안쪽 둥근 박스)
-->
<div class="block-compare-pill">
  <div class="cp-item">
    <div class="cp-outer">
      <div class="cp-inner">
        <div class="cp-label">{{ left_label }}</div>
        {% if left_sub %}<div class="cp-sub">{{ left_sub }}</div>{% endif %}
      </div>
    </div>
  </div>
  <div class="cp-vs">VS</div>
  <div class="cp-item">
    <div class="cp-outer">
      <div class="cp-inner">
        <div class="cp-label">{{ right_label }}</div>
        {% if right_sub %}<div class="cp-sub">{{ right_sub }}</div>{% endif %}
      </div>
    </div>
  </div>
</div>

<style>
.block-compare-pill {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
.cp-item {
  width: 350px;
}
.cp-outer {
  border: 2px solid #a8d8f0;
  border-radius: 60px;
  padding: 6px;
  background: transparent;
}
.cp-inner {
  border: 2px solid #7ec8f0;
  border-radius: 55px;
  background: linear-gradient(135deg, #e8f4fd 0%, #d6edfa 100%);
  padding: 18px 30px;
  text-align: center;
}
.cp-label {
  font-size: 18px;
  font-weight: 800;
  color: #0088cc;
  line-height: 1.4;
  white-space: pre-line;
}
.cp-sub {
  font-size: 12px;
  color: #0088cc;
  margin-top: 4px;
  line-height: 1.5;
  white-space: pre-line;
  font-weight: 500;
}
.cp-vs {
  font-size: 24px;
  font-weight: 800;
  color: #333;
  flex-shrink: 0;
}
</style>
