@charset "utf-8";
/* ==========================================================================
   bf.banner — 배너가 비었을 때의 배치 · '이 자리에 광고하기' 안내
   모양 자체는 각 위젯의 style.css(bf.hero · bf.ad · bf.strip · bf.wide).
   ========================================================================== */

/* 프로모 카드가 없으면 슬라이드가 한 줄을 다 쓴다 · 슬라이드가 없으면 카드가 가로로 */
.visual-wrap.no-promo { grid-template-columns: minmax(0, 1fr); }
.visual-wrap.no-slide { grid-template-columns: minmax(0, 1fr); }
.visual-wrap.no-slide .visual-promo { grid-template-rows: none; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.widget-ad .ad-cta {
  display: block; padding: 8px 0 0;
  font-size: 12.5px; color: var(--ink-500); text-align: right; text-decoration: none;
}
.widget-ad .ad-cta:hover { color: var(--sky-t3); text-decoration: underline; }

/* ==========================================================================
   배너 넘기기 · 무작위 고르기 (banner.slider.js)
   스크립트가 없어도 첫 장은 보인다. 무작위일 때는 섞기 전 순서가 잠깐 비치지 않게
   숨겨 두되, 스크립트가 끝내 안 뜨면 1.2초 뒤 그대로 보인다(bfbShow).
   ========================================================================== */
/* 폭은 늘 자리 전체 — 모듈 상자가 flex 라서 내용 폭(장마다 100%)만으로는 0 으로 줄어든다 */
.bfb-slider, .bfb-pick { position: relative; width: 100%; flex: 1 1 100%; min-width: 0; }
.widget-ad .bfb-slider { grid-column: 1 / -1; }
.bfb-view { position: relative; overflow: hidden; border-radius: var(--r-lg); touch-action: pan-y; }
.bfb-track { display: flex; align-items: stretch; transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.bfb-slide { flex: 0 0 100%; min-width: 0; display: flex; }
.bfb-slide > * { flex: 1 1 auto; min-width: 0; }
.bfb-slide > .ad-box:hover, .bfb-slide > .strip-banner:hover { transform: none; }   /* 넘기는 칸 안에서는 들뜨지 않게 */
.bfb-slider.is-drag .bfb-view { cursor: grabbing; }
.bfb-slider.is-drag a { pointer-events: none; }

/* 페이드 — 모든 장을 한 칸에 겹친다(높이는 가장 큰 장) */
.bfb-slider[data-effect="fade"] .bfb-track { display: grid; transform: none !important; }
.bfb-slider[data-effect="fade"] .bfb-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.bfb-slider[data-effect="fade"] .bfb-slide.on,
.bfb-slider[data-effect="fade"]:not(.is-ready) .bfb-slide:first-child { opacity: 1; visibility: visible; transition: opacity .6s ease; }

/* 스크립트 전 — 밀기는 첫 장만 보이면 되고(넘치는 칸은 잘림), 무작위는 섞을 때까지 잠깐 숨긴다 */
.bfb-slider[data-random="1"]:not(.is-ready) .bfb-view,
[data-bfb-pick]:not(.is-ready) { animation: bfbShow 0s 1.2s both; }
@keyframes bfbShow { from { visibility: hidden; } to { visibility: visible; } }

/* 점 · 이전/다음 · 멈춤 */
.bfb-nav { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.bfb-dots { display: inline-flex; gap: 6px; align-items: center; }
.bfb-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: var(--ink-200, #cfdbe5); cursor: pointer; transition: width .25s, background .25s; }
.bfb-dots button.on { width: 20px; background: var(--sky-500, #3E9FDE); }
.bfb-nav .bfb-prev, .bfb-nav .bfb-next, .bfb-nav .bfb-play {
  display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--line, #e4edf4); border-radius: 50%; background: var(--card, #fff); color: var(--ink-500, #5b6f80); cursor: pointer;
}
.bfb-nav .ico { width: 12px; height: 12px; }
.bfb-nav button:hover { border-color: var(--sky-500, #3E9FDE); color: var(--sky-500, #3E9FDE); }
.bfb-nav button:focus-visible { outline: 2px solid var(--sky-500, #3E9FDE); outline-offset: 2px; }
.bfb-play::before { content: ''; width: 8px; height: 8px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.bfb-play:not(.is-playing)::before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }

/* 와이드 배너 — 화면 전체 폭이라 점을 사진 위 아래쪽에 얹는다 */
.bfb-slider.is-wide .bfb-view { border-radius: 0; }
.bfb-slider.is-wide .bfb-nav { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; z-index: 3; }
/* 점 줄 자리 — 배너 속 단추와 겹치지 않게 아래 여백을 늘린다(와이드 기본 58px · 휴대폰 38px) */
.bfb-slider.is-wide.is-ready .sec-wide { padding-bottom: 88px; }
@media (max-width: 900px) { .bfb-slider.is-wide.is-ready .sec-wide { padding-bottom: 72px; } }
.bfb-slider.is-wide .bfb-dots button { background: rgba(255,255,255,.45); }
.bfb-slider.is-wide .bfb-dots button.on { background: #fff; }
.bfb-slider.is-wide .bfb-nav .bfb-prev, .bfb-slider.is-wide .bfb-nav .bfb-next, .bfb-slider.is-wide .bfb-nav .bfb-play {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .bfb-track, .bfb-slider[data-effect="fade"] .bfb-slide { transition: none !important; }
}