/**
 * v7/css/advertisement.css
 * v7 광고 배너 전용 CSS
 *
 * 상단 탑 배너(3:1), 날개 배너(1:1), 사각 배너(1:1), 작은 배너(이미지+텍스트)
 * 스타일을 정의한다.
 *
 * @see .claude/skills/v7-skill/references/web/v7-advertisement-web.md
 */

/* ===== 상단 탑 배너 (데스크톱 헤더 내) ===== */
.v7-top-banner a {
    display: block;
}

.v7-top-banner img {
    width: 100%;
    max-height: 84px;
    object-fit: fill;
    border-radius: 4px;
    display: block;
}

/* 탑 배너 로테이션: 숨겨진 배너 */
.v7-top-banner .adv-hidden {
    display: none;
}

/* ===== 날개 배너 (데스크톱 좌/우) ===== */
.v7-wing .wing-item a {
    display: block;
}

.v7-wing .wing-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: fill;
    display: block;
    border-radius: 4px;
}

/* ===== 모바일 상단 배너 ===== */
.v7-mobile-banners {
    display: flex;
    gap: 4px;
    padding: 0 8px;
}

.v7-mobile-banners a {
    flex: 1;
    display: block;
}

.v7-mobile-banners img {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: fill;
    border-radius: 4px;
    display: block;
}

/* 모바일 탑 배너 로테이션 */
.v7-mobile-banners .adv-hidden {
    display: none;
}

/* ===== 모바일 날개 배너 (사각형 그리드) ===== */
.v7-mobile-wing-banners {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 0 8px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.v7-mobile-wing-banners a {
    display: block;
}

.v7-mobile-wing-banners img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: fill;
    border-radius: 4px;
    display: block;
}

/* ===== 사각 배너 (게시판 상단) ===== */
.v7-square-banners {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
}

/* 데스크톱: 5열 */
@media (min-width: 992px) {
    .v7-square-banners {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* 모바일: 배너 개수에 따라 4열 또는 3열 */
@media (max-width: 991.98px) {
    .v7-square-banners {
        grid-template-columns: repeat(4, 1fr);
        padding: 0 4px;
    }
    .v7-square-banners.sq-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.v7-square-banners a {
    display: block;
}

.v7-square-banners img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: fill;
    border-radius: 4px;
    display: block;
}

/* ===== 작은 배너 (게시판 상단, 사각 배너 아래) ===== */
.v7-small-banners {
    margin-bottom: 16px;
}

.v7-small-banners a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    text-decoration: none;
    color: var(--wa-color-text, inherit);
}

.v7-small-banners a:hover {
    opacity: 0.85;
}

.v7-small-banners img {
    width: 92px;
    height: 46px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.v7-small-banners .small-banner-text {
    overflow: hidden;
    min-width: 0;
}

.v7-small-banners .small-banner-primary {
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v7-small-banners .small-banner-secondary {
    font-size: 0.75em;
    color: var(--wa-color-text-quiet, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 모바일에서 small 배너 패딩 */
@media (max-width: 991.98px) {
    .v7-small-banners {
        padding: 0 8px;
    }
}