/* ==========================================================================
   bf.wide — 하단 가입 유도 배너

   전역 main.css '12. 하단 와이드 배너' 에서 옮겨 왔다. 이 위젯은 자리
   구분(.sec-wide)까지 스스로 내므로 레이아웃에 남길 것이 없다.
   ========================================================================== */

.sec-wide {
  position: relative;
  padding: 58px 0;
  background: linear-gradient(115deg, #1F669E 0%, #2B82C4 45%, #4FA8DC 100%);
  overflow: hidden;
}
.wide-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.wide-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 다크 — 배너 사진은 그대로 두되 아주 살짝만 눌러 준다(목업 theme.css 2절) */
:root[data-theme="dark"] .wide-bg img { filter: brightness(.92); }
.sec-wide::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(9,42,72,.95) 0%, rgba(26,100,158,.88) 50%, rgba(48,152,200,.72) 100%);
}
.sec-wide::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 22px 22px;
}
.sec-wide .bf-inner {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  flex-wrap: wrap;
}
.wide-label {
  display: inline-block; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 2.2px;
  color: rgba(255,255,255,.75);
}
.wide-txt h2 {
  font-size: 32px; font-weight: 800; line-height: 1.34; letter-spacing: -1.1px;
  color: #fff;
}
.wide-txt p { margin-top: 11px; font-size: 15.5px; color: rgba(255,255,255,.82); }
.wide-btns { display: flex; gap: 10px; flex: none; }
.wide-btns .bf-btn { height: 52px; padding: 0 30px; font-size: 16px; }
.wide-btns .bf-btn-solid { background: #fff; color: var(--sky-t3); }
.wide-btns .bf-btn-solid:hover { background: var(--sky-50); }
/* 다크 — 배너 위 흰 버튼은 계속 흰색이어야 한다. --sky-t3 은 다크에서 연하늘로
   뒤집혀 흰 바탕에 묻히므로 글자색을 라이트 값으로 고정한다(목업 theme.css 4절).
   목업은 hover 바탕(--sky-50)을 그대로 둬 다크 hover 에서 버튼이 어두워지고 글자가
   묻힌다. hover 도 라이트 값으로 고정한다 */
:root[data-theme="dark"] .wide-btns .bf-btn-solid { color: #1F669E; }
:root[data-theme="dark"] .wide-btns .bf-btn-solid:hover { background: #F5FAFE; }


/* ---------------------------------------------------------- 반응형 */

@media (max-width: 900px) {
  .sec-wide { padding: 38px 0; }
  .sec-wide .bf-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .wide-txt h2 { font-size: 24px; }
  .wide-txt p { font-size: 14px; }
  .wide-btns { width: 100%; }
  .wide-btns .bf-btn { flex: 1 1 0; height: 48px; padding: 0; font-size: 15px; }
}

@media print {
  .sec-wide { display: none !important; }
}
/* 숫자·영문 글꼴. 전역 base.css 가 한 줄에 몰아 지정하던 것을 이리로
   가져왔다 — 이 위젯을 떼어 내도 남은 곳이 영향받지 않게. */
.wide-label { font-family: var(--font-en); }