/**
 * @파일명 css/_main_slider.css
 * @제작사 ZZAN Studio
 * @설명 메인 비주얼 슬라이더 영역 스타일
 */

/* [1] 슬라이더 메인 컨테이너 및 기본 구조 */
.main-slider-container.full-width {
    position: relative;
    padding: 0;
    max-width: none;
    margin: 0;
    z-index: 5;
    background: #fff;
}

.main-slider {
    width: 100%;
    height: 600px;
    border-radius: 0;
    overflow: hidden;
}

.slide-content-wrapper {
    max-width: var(--container-width);
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}

.slide-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.slide-content {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: #fff;
    max-width: 750px;
    transition: padding-bottom 0.3s;
    position: relative;
    z-index: 20;
}

.slide-content .content-inner {
    position: relative;
    z-index: 25;
}

.btn-area {
    position: relative;
    z-index: 30;
}

.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.2) 60%, rgba(0,0,0,0.4) 100%);
    z-index: 5;
    pointer-events: none;
}

/* [2] 슬라이드 내 포인트 그래픽(우측 이미지) 영역 */
.point-img-area {
    position: absolute;
    top: 0;
    right: 0;
    width: 58%; /* 기존 50%에서 확대 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    pointer-events: none;
}

.point-img {
    max-width: 95%; /* 기존 85%에서 확대 */
    max-height: 95%; /* 기존 85%에서 확대 */
    object-fit: contain;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateX(150px);
    will-change: transform, opacity;
}

.swiper-slide-active .point-img {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

/* [3] 슬라이드 내 텍스트 콘텐츠 스타일 (배지, 타이틀, 설명, 버튼) */
.main-slider-container.has-tabs .slide-content {
    padding-bottom: 80px;
}

/* [4] 슬라이드 배경 처리 (이미지 없을 시 Canvas 애니메이션 활용) */
.slide-item.no-img {
    background: #f8f9fa;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.slide-item.no-img .slide-content {
    color: var(--text-black);
}

.slide-item.no-img .slide-overlay {
    display: none;
}

.slide-content .badge {
    display: inline-block;
    padding: 5px 15px;
    background: var(--primary-red);
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.slide-content .title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
    letter-spacing: -2px;
    text-shadow: 0 2px 15px rgba(0,0,0,0.2);
}

.slide-item.no-img .title {
    text-shadow: none;
}

.slide-content .desc {
    font-size: 19px;
    line-height: 1.65;
    margin-bottom: 45px;
    opacity: 0.95;
}

.btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 45px;
    background: var(--primary-red);
    color: #fff !important;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(var(--primary-red-rgb), 0.3);
    background: #b11a00;
}

/* [5] 데스크탑용 슬라이드 이동 탭 메뉴 */
.slider-tabs-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(0,0,0,0.05);
}

.slider-tabs-wrapper {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

.slider-tabs {
    flex: 1;
    overflow: hidden;
}

.tabs-inner {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    transition: transform 0.3s ease;
}

.tab-item {
    flex: 1;
    min-width: 0;
    height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 25px;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s;
    position: relative;
    border-right: 1px solid rgba(0,0,0,0.05);
}

.tab-item:last-child {
    border-right: none;
}

.tab-item:hover, .tab-item.active {
    color: var(--text-black);
    background: #fff;
}

.tab-item .tab-cat {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #999;
    text-transform: uppercase;
}

.tab-item.active .tab-cat {
    color: var(--primary-red);
}

.tab-item .tab-name {
    font-size: 14px;
    font-weight: 700;
}

.tab-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.05);
}

.tab-progress .bar {
    width: 100%;
    height: 100%;
    background: var(--primary-red);
    transition: none;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* [5-1] 탭 메뉴 내비게이션 화살표 */
.btn-tab-prev, .btn-tab-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    background: rgba(255,255,255,0.8);
    border: none;
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    transition: all 0.3s;
}

.btn-tab-prev:hover, .btn-tab-next:hover {
    color: var(--primary-red);
    background: #fff;
}

.btn-tab-prev { left: 0; border-right: 1px solid rgba(0,0,0,0.05); }
.btn-tab-next { right: 0; border-left: 1px solid rgba(0,0,0,0.05); }

/* 화살표가 있을 때 탭 패딩 조절 */
.slider-tabs-wrapper:has(.btn-tab-prev) .slider-tabs {
    padding: 0 40px;
}

/* [4-1] 배경 Canvas 애니메이션 컨테이너 */
.bg-blobs {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    opacity: 0.6;
    overflow: hidden;
}

.slider-bg-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* [6] 반응형 스타일 (모바일 - 768px 이하) */
@media screen and (max-width: 768px) {
    .footer-bottom-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        border-bottom: none; /* 모바일에서 중복 보더 제거 */
        padding-bottom: 0;
        margin-bottom: 25px;
    }
    .fnb ul { gap: 20px; flex-wrap: wrap; }
    .main-slider { height: 500px; }
    .main-slider-container.has-tabs .slide-content { padding-bottom: 40px; }
    .slide-content { padding: 0 25px; }
    .slide-content .title { font-size: 32px; margin-bottom: 15px; }
    .slide-content .desc { font-size: 15px; margin-bottom: 30px; }
    .btn-more { padding: 12px 30px; font-size: 14px; }
    
    /* 탭 숨기기 */
    .slider-tabs-container { display: none; }
    
    /* 모바일 컨트롤 (페이지네이션 + 타임바) */
    .mobile-slider-controls {
        position: absolute;
        bottom: 30px;
        left: 25px;
        right: 25px;
        z-index: 30;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .mobile-pagination {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        text-align: left !important;
    }

    .mobile-pagination .swiper-pagination-bullet {
        display: inline-block !important;
        width: 10px !important;
        height: 10px !important;
        background: #ccc !important;
        opacity: 1 !important;
        margin: 0 5px !important;
        border-radius: 50% !important;
        transition: all 0.3s !important;
    }

    .mobile-pagination .swiper-pagination-bullet-active {
        background: var(--primary-red) !important;
        transform: scale(1.2);
    }

    .mobile-time-bar {
        display: none !important;
    }

    /* 포인트 이미지 모바일 최적화: 우측 하단 배치 및 사이즈 확대 */
    .point-img-area {
        align-items: flex-end;
        justify-content: flex-end;
        width: 70%; /* 컨텐츠와 살짝 겹치더라도 크게 보이도록 영역 확대 */
        height: 100%;
        padding-bottom: 10px;
        padding-right: 0;
    }

    .point-img {
        max-width: 95%; /* 기존 85%에서 확대 */
        max-height: 80%; /* 하단 배치이므로 높이 확보 */
        transform: translateX(100px); /* 등장 애니메이션 시작점 살짝 조정 */
    }
}