/* ==========================================================================
   bf.ad — 사이드 광고 배너

   전역 main.css '11-5. 광고' 에서 옮겨 왔다. 배너별 클래스(ad-1 · ad-2)는
   widget.php 의 소재 목록이 붙인다.
   ========================================================================== */

.widget-ad { padding: 0; border: 0; background: none; box-shadow: none; display: grid; gap: 14px; }
.ad-box {
  position: relative;
  display: block; padding: 22px 20px;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.ad-box:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.ad-1 { background: #1F669E; color: #fff; --ov1: rgba(10,44,76,.9); --ov2: rgba(34,116,176,.72); }
.ad-2 { background: #2B7FB8; color: #fff; --ov1: rgba(14,60,94,.88); --ov2: rgba(58,152,200,.68); }

.ad-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.ad-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ad-box:hover .ad-bg img { transform: scale(1.06); }
.ad-box::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, var(--ov1), var(--ov2));
}
.ad-box::after {
  content: ''; position: absolute; right: -30px; bottom: -40px; z-index: 1;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.ad-label {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 7px;
  border-radius: var(--r-xs);
  border: 1px solid currentColor;
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  opacity: .7;
}
.ad-box strong {
  position: relative; z-index: 2;
  display: block; margin-top: 10px;
  font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.5px;
}
.ad-box em {
  position: relative; z-index: 2;
  display: block; margin-top: 7px;
  font-size: 12.5px; opacity: .8;
}


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

@media (max-width: 1080px) {
  .widget-ad { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .widget-ad { grid-column: auto; }
  .widget-ad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .widget-ad { grid-template-columns: minmax(0, 1fr); }
}

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