/**
 * widgets/ad/mobile-banners — 좁은 화면 전용 배너 줄
 *
 * 🔴 넓은 화면에서는 그리지 않는다 — 그 폭에서는 헤더·날개가 같은 광고를 이미 보여 준다.
 *    헤더에 배너 칸이 없는 사이트만 class 옵션에 'is-always' 를 넘겨 넓은 화면에도 그린다.
 *    기준 폭 991.98px 는 5칼럼이 1칼럼으로 쌓이는 폭(five-column.css)과 같다.
 */
.w-mobile-banners {
    --w-mobile-banners-gap:    4px;
    --w-mobile-banners-margin: 0 0 12px;
    --w-mobile-banners-cols:   2;

    display: none;
}

@media (max-width: 991.98px) {
    .w-mobile-banners {
        display: grid;
        grid-template-columns: repeat(var(--w-mobile-banners-cols), minmax(0, 1fr));
        gap: var(--w-mobile-banners-gap);
        margin: var(--w-mobile-banners-margin);
    }
}

/* 헤더에 탑 배너 칸이 없는 사이트(OwnPH) — 넓은 화면에도 본문 위에 둔다. 칸은 필고 탑 배너 폭(252px)까지만 넓어진다. */
@media (min-width: 992px) {
    .w-mobile-banners.is-always {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 252px));
        gap: var(--w-mobile-banners-gap);
        margin: var(--w-mobile-banners-margin);
    }
}

/* 🔴 칸 비율을 배너 규격에 맞춘다(v7/css/advertisement.css:44-90). 고정 높이에 cover 로 넣으면
      광고 문구·전화번호가 잘린다. 모집 칸도 같은 크기다. */
.w-mobile-banners .w-ad-slot {
    --w-ad-slot-radius: 4px;

    height: auto;
}

.w-mobile-banners .w-ad-slot.is-filled img { object-fit: fill; }

/* 상단 배너 — 3:1 */
.w-mobile-banners--rotate .w-ad-slot { aspect-ratio: 3; }

/* 날개 배너 — 4칸 정사각형 */
.w-mobile-banners--grid { --w-mobile-banners-cols: 4; }
.w-mobile-banners--grid .w-ad-slot { aspect-ratio: 1; }