/* ============================================================
   뷰 소형 배너
   파일 위치: /theme/bootstrap5-basic/inc/view_small_banner.css
   ============================================================ */

#view-small-banner-wrap {
    width: 100%;
    background: #0a0a0a;
    padding: 8px 0;
    border-top: 1px solid #1a1a1a;
}

/* 각 줄 — 가운데 정렬 */
.vsb-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 16px;
}

/* 배너 링크 */
.vsb-banner {
    display: block;
    line-height: 0;
    border-radius: 4px;
    overflow: hidden;
    transition: opacity 0.2s;
    max-width: 100%;
}
.vsb-banner:hover {
    opacity: 0.88;
}

/* 이미지 */
.vsb-banner img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 이미지 없을 때 */
.vsb-no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 50px;
    background: #161616;
    border: 1px dashed #2a2a2a;
    border-radius: 4px;
    color: #2a2a2a;
    font-size: 20px;
}

/* 빈 슬롯 — 관리자만 표시 */
.vsb-empty {
    font-size: 11px;
    color: #3d2a0a;
    padding: 8px 0;
}

/* 반응형 */
@media (max-width: 479.98px) {
    .vsb-row { padding: 4px 12px; }
}