/* ==========================================================================
   jbanner — 고정/랜덤 출력 공용
   (futer_banner.skin.php, random_banner.skin.php)

   규격: 대배너 PC 1524x100 / 모바일 750x100
         중배너 750x100
         소배너 375x100

   브레이크포인트
     767px 이하 → 대배너 모바일 이미지로 전환
     600px 이하 → 중배너 1열, 소배너 2열
   ========================================================================== */

.jbanner-container {
    --jbanner-gap: 4px;

    width: 100%;
    max-width: 1524px;
    margin: 0 auto;
    box-sizing: border-box;
}

.jbanner-container * {
    box-sizing: border-box;
}

/* 섹션 공통 */
.jbanner-large-section,
.jbanner-medium-section,
.jbanner-normal-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--jbanner-gap);
    margin: 0;
    padding: 0;
}

/* 섹션 사이 여백 */
.jbanner-large-section  + .jbanner-medium-section,
.jbanner-large-section  + .jbanner-normal-section,
.jbanner-medium-section + .jbanner-normal-section {
    margin-top: var(--jbanner-gap);
}

/* --------------------------------------------------------------------------
   기본 레이아웃 (601px 이상)
   대배너 1열 / 중배너 2열 / 소배너 4열
   -------------------------------------------------------------------------- */

.jbanner-large-item {
    flex: 0 0 100%;
    width: 100%;
    max-width: 1524px;
    aspect-ratio: 1524 / 100;
    position: relative;
}

.jbanner-medium-item {
    flex: 0 0 auto;
    width: calc((100% - var(--jbanner-gap)) / 2);
    max-width: 750px;
    aspect-ratio: 750 / 100;
    position: relative;
}

.jbanner-normal-item {
    flex: 0 0 auto;
    width: calc((100% - var(--jbanner-gap) * 3) / 4);
    max-width: 375px;
    aspect-ratio: 375 / 100;
    position: relative;
}

/* 미디어 공통 */
.jbanner-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: transparent;
}

/* 테두리 */
.jbanner-border {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* 링크 */
.jbanner-large-item > a,
.jbanner-medium-item > a,
.jbanner-normal-item > a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* 대배너 PC/모바일 이미지 전환 래퍼 */
.jbanner-pc-only,
.jbanner-mo-only {
    display: block;
    width: 100%;
    height: 100%;
}

.jbanner-mo-only {
    display: none;
}

/* --------------------------------------------------------------------------
   [1] 767px 이하 — 대배너만 모바일 이미지(750x100)로 전환
       중/소배너 열 수는 그대로 (2열 / 4열)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .jbanner-large-item {
        max-width: none;
        aspect-ratio: 750 / 100;
    }

    .jbanner-pc-only { display: none; }
    .jbanner-mo-only { display: block; }
}

/* --------------------------------------------------------------------------
   [2] 600px 이하 — 중배너 1열 / 소배너 2열
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .jbanner-container {
        --jbanner-gap: 2px;
    }

    .jbanner-medium-item {
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
    }

    .jbanner-normal-item {
        flex: 0 0 auto;
        width: calc((100% - var(--jbanner-gap)) / 2);
        max-width: none;
    }
}