<!-- 비교 박스: 둥근 테두리 박스 2개 + VS 라벨 -->
<!--
  📋 compare-box
  ─────────────────
  용도: 2개 개념을 시각적으로 대비 (비교 테이블 위 헤더로 사용)
  슬롯: left_label, left_sub, right_label, right_sub
  Figma 원본: 2-1_02 > 하늘색 둥근 박스 2개 + 시안 텍스트
-->
<div class="block-compare-box">
  <div class="cb-item">
    <div class="cb-text">
      <div class="cb-label">{{ left_label }}</div>
      {% if left_sub %}<div class="cb-sub">{{ left_sub }}</div>{% endif %}
    </div>
  </div>
  <div class="cb-vs">VS</div>
  <div class="cb-item">
    <div class="cb-text">
      <div class="cb-label">{{ right_label }}</div>
      {% if right_sub %}<div class="cb-sub">{{ right_sub }}</div>{% endif %}
    </div>
  </div>
</div>

<style>
.block-compare-box {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}
.cb-item {
  width: 340px;
  height: 110px;
  border-radius: 55px;
  border: 3px solid #7ec8f0;
  background: linear-gradient(135deg, #e8f4fd 0%, #d4ecfa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 140, 220, 0.1);
}
.cb-text {
  text-align: center;
}
.cb-label {
  font-size: 19px;
  font-weight: 800;
  color: #0090d0;
  line-height: 1.4;
}
.cb-sub {
  font-size: 13px;
  color: #0090d0;
  margin-top: 3px;
  line-height: 1.5;
  white-space: pre-line;
  font-weight: 500;
}
.cb-vs {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  flex-shrink: 0;
}
</style>
