/* ==========================================================================
   인포테마 - 배너 설정 스타일
   ========================================================================== */

.info-banner-wrap {
    width: 100%;
    margin: 20px 0;
    box-sizing: border-box;
}

.info-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 10px;
    /* 배너 간격 */
    box-sizing: border-box;
}

.info-banner-item {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    border: 3px solid #f6f7f8;
    /* 환하면서 찐한 보라색 테두리 부여 */
    box-sizing: border-box;
    /* 테두리가 삐져나가지 않게 관리 */
}

/* 이미지 반응형 설정 */
.info-banner-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    /* 비율 유지 */
    transition: transform 0.3s ease;
}

/* 마우스 호버시 시각적 효과 부여 */
.info-banner-item:hover img {
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   기존 타입 (하위 호환 유지)
   -------------------------------------------------------------------------- */
.info-banner-wrap.type-1 .info-banner-inner {
    grid-template-columns: repeat(2, 1fr);
}

.info-banner-wrap.type-2 .info-banner-inner {
    grid-template-columns: repeat(4, 1fr);
}

/* --------------------------------------------------------------------------
   신규: 동적 배너 영역 열(단) 수 설정
   -------------------------------------------------------------------------- */
.info-banner-wrap.info-banner-cols-1 .info-banner-inner {
    grid-template-columns: repeat(1, 1fr);
}

.info-banner-wrap.info-banner-cols-2 .info-banner-inner {
    grid-template-columns: repeat(2, 1fr);
}

.info-banner-wrap.info-banner-cols-3 .info-banner-inner {
    grid-template-columns: repeat(3, 1fr);
}

.info-banner-wrap.info-banner-cols-4 .info-banner-inner {
    grid-template-columns: repeat(4, 1fr);
}

/* --------------------------------------------------------------------------
   반응형 모바일 및 태블릿 대응
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .info-banner-inner {
        padding: 0 10px;
        gap: 8px;
    }

    /* 3단, 4단은 태블릿에서 2단으로 축소 */
    .info-banner-wrap.info-banner-cols-3 .info-banner-inner,
    .info-banner-wrap.info-banner-cols-4 .info-banner-inner,
    .info-banner-wrap.type-2 .info-banner-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    /* 1단, 2단 배너는 모바일에서 세로 1단 */
    .info-banner-wrap.info-banner-cols-1 .info-banner-inner,
    .info-banner-wrap.info-banner-cols-2 .info-banner-inner,
    .info-banner-wrap.type-1 .info-banner-inner {
        grid-template-columns: 1fr;
    }

    /* 3단, 4단 배너는 모바일에서 2열 유지 */
    .info-banner-wrap.info-banner-cols-3 .info-banner-inner,
    .info-banner-wrap.info-banner-cols-4 .info-banner-inner,
    .info-banner-wrap.type-2 .info-banner-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   사이드바 배너 전용 스타일
   - .info-banner-sidebar 래퍼 안의 배너에만 적용됩니다.
   - 메인 배너 스타일과 완전히 독립적으로 수정 가능합니다.
   ========================================================================== */

/* 사이드바 배너 래퍼 */
.info-banner-sidebar .info-banner-wrap {
    margin: 0 0 16px 0; /* 사이드바 여백: 위 0, 아래 16px */
    padding-left: 15px; /* 사이드바 콘텐츠 좌측 기준 정렬 */
    box-sizing: border-box;
}

/* 사이드바 inner: max-width 해제, 패딩 제거 */
.info-banner-sidebar .info-banner-inner {
    max-width: 100%;
    padding: 0;
    gap: 6px; /* 사이드바 배너 간격 */
}

/* 사이드바 배너 아이템: 테두리 제거 */
.info-banner-sidebar .info-banner-item {
    border: none;
    overflow: hidden;
}

/* 사이드바 배너 이미지 */
.info-banner-sidebar .info-banner-item img {
    object-fit: cover; /* 사이드바는 커버로 꽉 채움 */
}

/* 사이드바에서는 항상 1단 (세로 스택) */
.info-banner-sidebar .info-banner-wrap .info-banner-inner {
    grid-template-columns: 1fr;
}