/* =========================================================================
   [MAIN] Slider Style (Battlica Style)
   ========================================================================= */
.main-slider-container {
    position: relative;
    padding: 0 20px;
    max-width: var(--container-width);
    margin: 30px auto 100px; /* 하단 100px 여백 추가하여 회색 배경과 분리 */
    z-index: 5;
}

.main-slider {
    width: 100%;
    height: 400px; /* 높이 400px로 조정 */
    border-radius: 30px; /* 강한 라운드 처리 */
    overflow: hidden;
}

.slide-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 80px; /* 내부 패딩 복구 */
}

/* 이미지가 없을 때의 화려한 배경 스타일 */
.slide-item.no-img {
    background: #0f0c29;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    overflow: hidden;
}

/* 인덱스별 랜덤 색상 테마 (CSS 변수 활용) */
.slide-item.no-img[data-index="1"], .slide-item.default-sample { --blob-color-1: #ff00cc; --blob-color-2: #3333ff; --blob-color-3: #00d4ff; }
.slide-item.no-img[data-index="2"] { --blob-color-1: #f093fb; --blob-color-2: #f5576c; --blob-color-3: #ff0844; }
.slide-item.no-img[data-index="3"] { --blob-color-1: #84fab0; --blob-color-2: #8fd3f4; --blob-color-3: #2af598; }
.slide-item.no-img[data-index="4"] { --blob-color-1: #fa709a; --blob-color-2: #fee140; --blob-color-3: #ffb199; }
.slide-item.no-img[data-index="5"] { --blob-color-1: #4facfe; --blob-color-2: #00f2fe; --blob-color-3: #7367f0; }
.slide-item.no-img[data-index="6"] { --blob-color-1: #6a11cb; --blob-color-2: #2575fc; --blob-color-3: #b122e5; }
.slide-item.no-img[data-index="7"] { --blob-color-1: #f9d423; --blob-color-2: #ff4e50; --blob-color-3: #f06292; }
.slide-item.no-img[data-index="8"] { --blob-color-1: #00c6fb; --blob-color-2: #005bea; --blob-color-3: #667eea; }
.slide-item.no-img[data-index="9"] { --blob-color-1: #5ee7df; --blob-color-2: #b490ca; --blob-color-3: #43e97b; }
.slide-item.no-img[data-index="10"] { --blob-color-1: #f6d365; --blob-color-2: #fda085; --blob-color-3: #fccb90; }

/* 배경 Blobs 애니메이션 */
.bg-blobs {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    filter: blur(80px);
}

.blob {
    position: absolute;
    width: 400px; /* 슬라이더 높이에 맞춰 blob 크기 재조정 */
    height: 400px;
    border-radius: 50%;
    opacity: 0.6;
    mix-blend-mode: screen;
    animation: blob-move 20s infinite alternate ease-in-out;
}

.blob:nth-child(1) { background: var(--blob-color-1); top: -100px; left: -100px; }
.blob:nth-child(2) { background: var(--blob-color-2); bottom: -100px; right: -100px; animation-delay: -5s; }
.blob:nth-child(3) { background: var(--blob-color-3); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: blob-rotate 25s infinite linear; }

@keyframes blob-move {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(100px, 50px) scale(1.2); }
    66% { transform: translate(-50px, 150px) scale(0.8); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes blob-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    to { transform: translate(-50%, -50%) rotate(360deg) scale(1.5); }
}

.slide-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    z-index: 5;
}

.slide-item.no-img .slide-overlay {
    background: radial-gradient(circle at 20% 50%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%);
}

.slide-content {
    position: relative;
    z-index: 10;
    color: var(--white);
    max-width: 600px;
}

.slide-content .badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--point-color);
    color: var(--white);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.slide-content .title {
    font-size: 42px; /* 제목 크기 재조정 */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 15px; /* 여백 재조정 */
    letter-spacing: -1.5px;
}

.slide-content .desc {
    font-size: 18px; /* 설명 크기 재조정 */
    line-height: 1.6;
    margin-bottom: 30px; /* 여백 재조정 */
    opacity: 0.9;
}

.btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 35px; /* 버튼 크기 재조정 */
    background: var(--white);
    color: var(--black);
    border-radius: 50px; /* 버튼 라운드 */
    font-size: 16px; /* 폰트 크기 재조정 */
    font-weight: 700;
    transition: var(--transition);
}

.btn-more:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    background: var(--point-color);
    color: var(--white);
}

/* Swiper Controls */
.main-slider .swiper-pagination {
    z-index: 15;
}

.main-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--white);
    opacity: 0.5;
}

.main-slider .swiper-pagination-bullet-active {
    opacity: 1;
    width: 30px;
    border-radius: 10px;
}

.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
    color: var(--white);
    background: rgba(255,255,255,0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    backdrop-filter: blur(10px);
    z-index: 15;
}

.main-slider .swiper-button-next:after,
.main-slider .swiper-button-prev:after {
    font-size: 20px;
    font-weight: 800;
}

@media screen and (max-width: 1024px) {
    .main-slider-container {
        padding: 0 20px;
        margin-top: 20px; /* 모바일 여백 재조정 */
        margin-bottom: 40px; /* 하단 여백 축소 */
    }
    .main-slider {
        height: 320px; /* 모바일 높이 재조정 */
        border-radius: 30px; /* 라운드 수치 통일 */
    }
    .slide-item {
        padding: 0 30px;
    }
    .slide-content .badge {
        font-size: 11px;
        padding: 4px 12px;
        margin-bottom: 12px;
    }
    .slide-content .title {
        font-size: 24px;
        margin-bottom: 8px;
    }
    .slide-content .desc {
        font-size: 14px;
        margin-bottom: 20px;
    }
    .btn-more {
        padding: 8px 20px;
        font-size: 13px;
    }
    .blob {
        width: 200px;
        height: 200px;
    }
}