/* =========================================
   카탈로그/갤러리 통합 스타일 (3열 배치 및 여백 압축)
========================================= */

/* 1. 전체 영역 가로 1400px 제한 */
.wiz-catalog-wrapper {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 20px;
    box-sizing: border-box;
}

.wiz-catalog-header { text-align: center; margin-bottom: 40px; }
.main-title { font-size: 36px; font-weight: 700; color: #222; margin: 0 0 10px 0; }
.sub-title { font-size: 18px; color: #666; margin: 0; }

/* 🌟 PC화면 3개씩 나오게 하는 리스트 컨테이너 (Grid 적용) */
/* (기존 감싸는 태그에 이 클래스를 주거나, swiper를 안 쓸 경우 자동 3열 배치) */
.wiz-swiper-container { 
    display: grid !important; /* 강제 그리드 적용 */
    grid-template-columns: repeat(3, 1fr) !important; /* 무조건 3칸으로 나눔 */
    gap: 30px !important; /* 카드 사이 간격 */
    width: 100%; 
    padding: 15px 0; 
}

/* 2. 개별 카드 스타일 및 중앙 정렬 */
.wiz-catalog-item {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 20px;
    overflow: hidden; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto; 
    display: flex;
    flex-direction: column;
}

.wiz-catalog-item:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); }

/* 강제 세로 배치 및 100% 너비 */
.item-link {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* 🌟 이미지 영역 (PC: 기본 포스터 비율 3:4) */
.item-image-wrap {
    width: 100% !important;
    position: relative;
    overflow: hidden;
    background-color: #f8f8f8;
    aspect-ratio: 3 / 4; /* 포스터 비율 유지 */
}

/* 🌟 이미지 태그: 찌그러짐 없이 꽉 채움 */
.thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 영역을 가득 채움 */
    display: block;
    transition: transform 0.4s ease;
}

.wiz-catalog-item:hover .thumb-img { transform: scale(1.05); }

.no-image {
    display: flex; align-items: center; justify-content: center;
    background: #f5f5f5; color: #aaa; font-size: 14px; width: 100%; height: 100%;
}

/* 🌟 하단 텍스트 영역 (위아래 여백 대폭 압축) */
.item-info {
    width: 100%;
    /* 기존 40px -> 25px로 위아래 패딩(여백)을 확 줄임 */
    padding: 25px 20px !important; 
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 모든 내부 요소를 가운데로 */
    text-align: center !important;
}

.item-category-wrap { width: 100%; display: flex; justify-content: center; margin-bottom: 15px; }
.item-category {
    display: inline-block; background-color: #12284c; color: #ffffff;
    font-size: 14px; font-weight: 500; padding: 6px 20px; border-radius: 30px;
    transition: background-color 0.3s ease;
}
.wiz-catalog-item:hover .item-category { background-color: #ea5b0c; }

/* 🌟 제목 아래 여백 축소 */
.item-title {
    width: 100%; font-size: 24px; font-weight: 600; color: #222222;
    line-height: 1.4; 
    margin: 0 0 15px 0 !important; /* 기존 30px -> 15px 축소 */
    word-break: keep-all; text-align: center !important;
}

/* 🌟 중앙선 위아래 여백 축소 */
.item-divider { 
    width: 50px; height: 2px; background-color: #eeeeee; 
    margin: 0 auto 15px auto !important; /* 기존 30px -> 15px 축소 */
}

/* VIEW MORE 버튼 영역 */
.item-btn-wrap { display: flex !important; justify-content: center !important; width: 100%; }
.item-btn {
    display: inline-flex; align-items: center; padding: 10px 25px;
    border: 1px solid #dddddd; border-radius: 30px; color: #666666; font-size: 14px;
    font-weight: 500; transition: all 0.3s;
}
.wiz-catalog-item:hover .item-btn { border-color: #ea5b0c; color: #ea5b0c; }

.plus-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: 1px solid #dddddd; border-radius: 50%;
    margin-left: 10px; font-size: 14px; line-height: 1; transition: all 0.3s;
}
.wiz-catalog-item:hover .plus-icon { border-color: #ea5b0c; }


/* =========================================
   🌟 8. 모바일 반응형 종합 🌟
========================================= */
@media (max-width: 992px) {
    /* 태블릿: 2개씩 노출 */
    .wiz-swiper-container { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}

@media screen and (max-width: 767px) {
    /* 🌟 모바일 에러 완벽 방어 및 1개씩 노출 */
    .wiz-swiper-container { grid-template-columns: 1fr !important; display: grid !important; gap: 20px !important; }
    
    .wiz-catalog-item, .item-link {
        display: flex !important; flex-direction: column !important;
        width: 100% !important; height: auto !important;
        margin-bottom: 20px !important; float: none !important; 
    }

    /* 🌟 모바일 이미지 높이 대폭 축소 (16:9 와이드 비율) */
    .item-image-wrap {
        width: 100% !important; max-width: 100% !important; float: none !important; 
        aspect-ratio: 16 / 9 !important; /* 높이가 확 줄어들고 가로로 꽉 참 */
    }

    /* 🌟 모바일 뷰모어 여백 추가 압축 */
    .item-info {
        width: 100% !important; float: none !important;
        padding: 20px 15px 25px 15px !important; /* 위아래 빈 공간 최소화 */
    }

    .main-title { font-size: 28px !important; }
    .sub-title { font-size: 15px !important; }
    .item-title { font-size: 19px !important; line-height: 1.3 !important; }
}