/* ==========================================================================
   bf.hero — 메인 비주얼 슬라이더

   이 위젯만의 스타일이다. 위젯 폴더 하나로 굴러가야 하므로 전역 CSS 에
   기대지 않는다. widget.php 가 add_stylesheet() 로 직접 싣는다.

   ※ .sec-visual 은 여기 없다
     그건 이 위젯을 담는 자리(rb.layout/basic)의 것이라 레이아웃 쪽으로
     보냈다. 위젯을 다른 자리에 옮겨도 이 파일만 따라가면 된다.

   ※ 숫자 글꼴
     전역 base.css 가 영문·숫자 글꼴을 한 줄에 몰아 지정하는데, 거기서
     .promo-label · .slider-num 을 빼 이리로 가져왔다. 이 위젯을 떼어 내도
     남은 곳이 영향받지 않게 하기 위해서다.
   ========================================================================== */

.promo-label,
.slider-num { font-family: var(--font-en); }

.visual-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
}

/* 슬라이더 — 슬라이드 1장 = 완성 배너 이미지 1장.
   타사 홍보 배너 소재를 그대로 얹을 수 있도록 카피를 마크업에 두지 않는다.
   소재 규격 : PC 1400x600 (7:3) / 모바일 720x600 (6:5) */
.visual-slider {
  position: relative;
  aspect-ratio: 7 / 3;
  /* min-height:100% 를 주면 그리드 아이템의 높이가 확정되면서
     aspect-ratio 가 '폭'을 역산해 배너가 줄어든다. 넣지 말 것. */
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--sky-100);   /* 소재 로딩 전 플레이스홀더 */
}
.slides { position: relative; width: 100%; height: 100%; }
.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.slide.on { opacity: 1; visibility: visible; }

.slide-link,
.slide picture { display: block; width: 100%; height: 100%; }
.slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* 다크 — 배너 사진은 그대로 두되 아주 살짝만 눌러 준다(목업 theme.css 2절) */
:root[data-theme="dark"] .slide img { filter: brightness(.92); }

/* 컨트롤 */
/* 소재를 최대한 가리지 않도록 조작 UI 를 우측 하단 한 곳에 모은다 */
.slider-nav {
  position: absolute; right: 22px; bottom: 22px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
}
.slider-ctrl {
  display: flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 6px;
  border-radius: var(--r-full);
  background: rgba(7,32,56,.46);
  border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.slider-ctrl button {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff; transition: background .2s;
}
.slider-ctrl button:hover { background: rgba(255,255,255,.25); }
.slider-ctrl .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.slider-num {
  padding: 0 8px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75);
  letter-spacing: .5px;
}
.slider-num .cur { color: #fff; font-weight: 700; }
.slider-play { position: relative; }
.slider-play::before,
.slider-play::after {
  content: ''; position: absolute; top: 50%; margin-top: -5px;
  width: 3px; height: 10px; border-radius: 1px; background: #fff;
}
.slider-play::before { left: 10px; }
.slider-play::after { right: 10px; }
.slider-play:not(.is-playing)::before {
  left: 10px; width: 0; height: 0; margin-top: -5px;
  border-radius: 0; background: none;
  border-left: 9px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.slider-play:not(.is-playing)::after { display: none; }

/* 어떤 소재가 와도 읽히도록 반투명 펠릿 */
.slider-dots {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border-radius: var(--r-full);
  background: rgba(7,32,56,.46);
  border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.slider-dots button {
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: rgba(255,255,255,.45);
  transition: all .25s;
}
.slider-dots button.on { width: 26px; background: #fff; }

/* 사이드 프로모 */
.visual-promo { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
/* 히어로가 어두우므로 프로모는 '선명한 블루 + 화이트' 조합으로 명암 리듬을 만든다 */
.promo-card {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  /* 2장 + 간격이 배너 높이를 넘지 않도록 잡은 값. 키우면 배너 아래 빈틈이 생긴다. */
  padding: 20px 22px;
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.promo-card:hover { transform: translateY(-4px); }

.promo-1 {
  background: linear-gradient(132deg, var(--sky-400) 0%, var(--sky-600) 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(62,159,222,.3);
}
.promo-1:hover { box-shadow: 0 14px 34px rgba(62,159,222,.4); }
.promo-2 {
  background: var(--surface);
  border: 1px solid var(--sky-b1);
  color: var(--ink-900);
  box-shadow: var(--sh-sm);
}
.promo-2:hover { border-color: var(--sky-b3); box-shadow: var(--sh-lg); }

/* 우상단 광택 */
.promo-card::after {
  content: ''; position: absolute; right: -54px; top: -62px; z-index: 1;
  width: 160px; height: 160px; border-radius: 50%;
}
.promo-1::after { background: rgba(255,255,255,.14); }
.promo-2::after { background: var(--sky-50); }

.promo-txt { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; }

.promo-thumb {
  position: relative; z-index: 2; flex: none;
  width: 84px; height: 84px;
  border-radius: 20px; overflow: hidden;
  background: var(--surface);
  transform: rotate(-5deg);
  transition: transform .3s ease;
}
.promo-1 .promo-thumb { box-shadow: 0 8px 20px rgba(8,44,76,.28); }
.promo-2 .promo-thumb { box-shadow: 0 8px 20px rgba(31,102,158,.18); }
.promo-card:hover .promo-thumb { transform: rotate(0deg) scale(1.05); }
.promo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root[data-theme="dark"] .promo-thumb img { filter: brightness(.92); }

.promo-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
}
.promo-1 .promo-label { color: rgba(255,255,255,.88); }
.promo-2 .promo-label { color: var(--sky-t1); }

.promo-card strong {
  display: block; margin-top: 9px;
  font-size: 22px; font-weight: 700; line-height: 1.34; letter-spacing: -.8px;
}
/* 강조 단어 */
.promo-1 strong b { color: #FFDA6B; font-weight: 800; }
.promo-2 strong b { color: var(--sky-t2); font-weight: 800; }

.promo-more {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px;
  font-size: 13.5px; font-weight: 600;
}
.promo-1 .promo-more { color: rgba(255,255,255,.95); }
.promo-2 .promo-more { color: var(--sky-t2); }
.promo-more .ico { width: 14px; height: 14px; stroke-width: 2.4; transition: transform .2s; }
.promo-card:hover .promo-more .ico { transform: translateX(3px); }


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

@media (max-width: 1280px) {
  .visual-wrap { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 1180px) {
  .visual-wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .visual-promo {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 grid-template-rows: none;
 gap: 14px;
 }
}

@media (max-width: 900px) {
  .visual-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* 모바일은 세로로 긴 전용 소재를 쓴다 (<picture> 로 분기) */
 .visual-slider { aspect-ratio: 6 / 5; border-radius: var(--r-lg); }
  /* 좁은 화면에서는 이전/다음 버튼 대신 스와이프 + 인디케이터만 */
 .slider-ctrl { display: none; }
  .slider-nav { right: 50%; bottom: 14px; transform: translateX(50%); }
  .slider-dots { height: 34px; padding: 0 12px; }
  .visual-promo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; gap: 12px; }
  .promo-card { padding: 16px 16px; gap: 12px; border-radius: var(--r-lg); }
  .promo-card strong { font-size: 17px; margin-top: 7px; }
  .promo-more { margin-top: 10px; font-size: 12.5px; }
  .promo-thumb { width: 62px; height: 62px; border-radius: 16px; }
}

@media (max-width: 600px) {
  /* 배너 높이는 aspect-ratio(6:5) 가 잡으므로 height 를 주지 않는다 */
 .visual-promo { grid-template-columns: minmax(0, 1fr); }
  .promo-card { padding: 16px 18px; }
  .promo-card strong { font-size: 16px; }
  .promo-thumb { width: 68px; height: 68px; }
}