/* ============================================================
   대배너 스타일
   파일 위치: /theme/bootstrap5-basic/inc/big_banner.css
   ============================================================ */

#big-banner-wrap {
    padding: 8px 16px 10px;
    background: #0a0704;
    border-bottom: 1px solid #1a1206;
}

/* 2열 그리드 */
.bb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* 배너 슬롯 공통 */
.bb-slot {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 1;
    background: #111008;
    border: 1px solid #2a1e08;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: opacity 0.2s, border-color 0.2s;
}
.bb-slot:hover {
    opacity: 0.88;
    border-color: #5a3e10;
}

/* 이미지 */
.bb-slot img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* 이미지 없을 때 */
.bb-slot-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a1e08;
    font-size: 20px;
}

/* 빈 슬롯 — 관리자에게만 표시 */
.bb-empty {
    border-style: dashed;
    border-color: #1e1508;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.bb-empty-label {
    font-size: 10px;
    color: #3d2a0a;
}

/* 완전 빈 슬롯 — 일반 사용자 숨김 (높이 0) */
.bb-slot-hidden {
    display: none;
}

/* 빈 슬롯이 숨겨지면 그리드 재배치 */
.bb-grid:has(.bb-slot-hidden) {
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 3px), 1fr));
}

/* 반응형 */
@media (max-width: 767.98px) {
    .bb-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .bb-slot {
        aspect-ratio: 6 / 1;
    }
}

@media (max-width: 479.98px) {
    #big-banner-wrap {
        padding: 2px 2px 3px;
    }
    .bb-slot {
        aspect-ratio: 6 / 1;
    }
}