/* ============================================================
   CJTNTV 배너 - 프론트엔드 (v7.2 / 2026-09-01)
   기본 200×60px(10:3 비율), 폭이 좁으면 비율 유지한 채 축소되어
   모바일에서도 여러 개가 한 줄에 들어가도록 flex로 유동 조정
   ============================================================ */

.cjtntv-banner-sidebar,
.cjtntv-banner-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.cjtntv-banner-item {
    /* 기본 200px를 최대치로, 폭이 모자라면 줄어들며 한 줄에 여러 개 유지 */
    flex: 1 1 150px;
    max-width: 200px;
    min-width: 110px;
    aspect-ratio: 10 / 3;   /* 200×60 비율 유지 → 폭에 맞춰 높이 자동 */
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(112,115,124,0.10);
    display: block;
    line-height: 0;
    transition: transform .15s, box-shadow .15s;
}
.cjtntv-banner-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(23,23,23,0.10);
}
.cjtntv-banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 래퍼: 콘텐츠 흐름 그대로 */
.cjtntv-below-slider-wrap,
.cjtntv-below-content-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
}
.cjtntv-below-slider-wrap:empty,
.cjtntv-below-content-wrap:empty { display: none; }

/* 좁은 화면: 기준 폭을 낮춰 2개 이상이 한 줄에 들어가도록(비율은 그대로 유지) */
@media (max-width: 480px) {
    .cjtntv-banner-item { flex-basis: 120px; min-width: 96px; }
}