<!-- 그라데이션 배너 바: 전체 너비 파란 그라데이션 + 중앙 텍스트 -->
<!--
  📋 banner-gradient
  ─────────────────
  용도: 섹션 구분, 핵심 선언, 강조 문구를 전체 너비 배너로
  슬롯: text (필수), sub_text (선택)
  Figma 원본: 2-2_01 하단, 2-2_03 분류 바
-->
<div class="block-banner-grad">
  <div class="bg-text">{{ text }}</div>
  {% if sub_text %}<div class="bg-sub">{{ sub_text }}</div>{% endif %}
</div>

<style>
.block-banner-grad {
  background: linear-gradient(135deg, #006aff 0%, #00aaff 100%);
  border-radius: 8px;
  padding: 16px 30px;
  text-align: center;
  color: #ffffff;
}
.bg-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.bg-sub {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 4px;
}
</style>
