@charset "utf-8";
/* ════════════════════════════════════════════════
   정복걸 메인 배너 그리드
   - 큰배너  (300x200): PC 3개/줄, 모바일 2개/줄
   - 중간배너 (300x100): PC 4개/줄, 모바일 2개/줄
   - 사각형 (border-radius 없음)
   ════════════════════════════════════════════════ */

#main-banner {
    padding: 0 !important;
}

/* 큰배너/중간배너 외부 wrapper의 좌우 padding 제거 */
#main-banner .bstyle,
#main-banner .mstyle {
    padding: 0 !important;
    margin-bottom: 8px !important;
}

/* 그누보드 grid 시스템 무력화 + CSS Grid 적용 */
#main-banner .grid {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#main-banner [class*="grid-"] {
    width: auto !important;
    max-width: none !important;
    flex: unset !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* PC: 큰배너 4개/줄 */
#main-banner .bstyle .grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* PC: 중간배너 4개/줄 */
#main-banner .mstyle .grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* 모바일 (767px↓): 큰배너/중간배너 모두 2개/줄 */
@media (max-width: 767px) {
    #main-banner .bstyle .grid,
    #main-banner .mstyle .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
}

/* 큰배너 이미지 - 3:2 비율 (300x200) - 사각형 */
#main-banner .bstyle img.full {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    transition: opacity 0.2s ease;
}

/* 중간배너 이미지 - 3:1 비율 (300x100) - 사각형 */
#main-banner .mstyle img.full {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    transition: opacity 0.2s ease;
}

/* 호버 효과 */
#main-banner img.full:hover {
    opacity: 0.85;
}