/* =========================================
   카탈로그/갤러리 통합 스타일 (Swiper 슬라이더 전용)
========================================= */

/* 전체 영역 가로 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; }

/* Swiper 컨테이너 튜닝 (그림자 잘림 방지) */
.wiz-swiper-container { width: 100%; overflow: hidden; padding: 15px 0 !important; }
.wiz-swiper-container .swiper-wrapper { display: flex; align-items: stretch; } /* 슬라이드 높이 균일하게 */
.wiz-swiper-container .swiper-slide { height: auto; }

/* 🌟 개별 카드 스타일 */
.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: 100%; 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%; padding: 25px 20px !important; box-sizing: border-box;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; text-align: center !important; flex-grow: 1;
}

.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; word-break: keep-all; text-align: center !important; }
.item-divider { width: 50px; height: 2px; background-color: #eeeeee; margin: 0 auto 15px auto !important; }

/* 🌟 VIEW MORE 버튼 영역 */
.item-btn-wrap { display: flex !important; justify-content: center !important; width: 100%; margin-top: auto; }
.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; }

/* =========================================
   🌟 모바일 반응형 (16:9 높이 축소 및 여백 압축) 🌟
========================================= */
@media screen and (max-width: 767px) {
    /* 모바일 플로트 에러 강제 방어 */
    .wiz-catalog-item, .item-link { float: none !important; margin-bottom: 0 !important; }

    /* 🌟 모바일 이미지 높이 대폭 축소 (16:9 와이드 비율) */
    .item-image-wrap { aspect-ratio: 16 / 9 !important; }

    /* 🌟 모바일 뷰모어 여백 추가 압축 */
    .item-info { 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; }
}