/* 반응형 디자인 - CSS만으로 구현 */

/* ==================================
공통 반응형 스타일
================================== */
* { box-sizing: border-box; }
body { overflow-x: hidden; }
.section{
    width: 100%;
    overflow: hidden;
}
/* FullPage.js 반응형 오버라이드 */
@media (max-width: 768px) {
    #fullpage { height: auto !important; }
    .section { height: auto !important; min-height: 100vh; }
    .fp-section { height: auto !important; min-height: 100vh; }
}

/* ==================================
중간 대형 화면 (max-width: 1400px)
================================== */
@media (max-width: 1520px) {
    .app-slider .slider_control{width:50%}
    .slide__overlay{width: 50%;height: 92%;}
    .logo img{
        height: 40px;
    }
.nav-container{
    max-width: 100%;
}
    .nav-menu{gap: 10px;}
    /* 공통 컨테이너 너비 축소 */
    .section-content__inner,
    .card__area,
    .footer-content,
    .faq-section {
        width: 90%;
        max-width: 1400px;
        margin: 0 auto;
    }

    .app_title_area{margin:0}
    .slide__area{width: 50%;}

    /* 인트로 헤더 좌우 여백 완화 */
    /* .intro-header { padding: 0 8rem; } */

    /* 슬라이드 네비 영역 위치 보정 */
    .slide__navigation { width: auto; }

    .intro_left__area{}
    .intro_right__area{width:50%;right: 0;bottom: 10%;}

    .fp-section { height: 100vh !important; min-height: 100vh; }
    .accordion{width: 100%;}
}

/* ==================================
태블릿 (768px ~ 1024px)
================================== */
@media (max-width: 1024px) {
    
    .slide__overlay{width: 50%;height: 89%;}

    .app-section{
        padding: 0;
    }

    .fp-section{
        height: auto !important;
        min-height: auto !important;
        
        .fp-overflow{
            width: 100%;
            overflow: hidden;
            .section-content{
                width: 100%;
                padding: 140px 3%;
                gap: 60px;
            }
        }
        &#s01.full{
            height: 100vh !important;
            padding: 0;
        }
    }


    /* 네비게이션 */
    .navigation { width: 100%;padding: 0;}
    .nav-container {width: 100%;padding: 0; max-width: 100%;}
    .nav-menu { gap: 10px; flex-wrap: wrap; justify-content: center; }
    .nav-item a { font-size: 12px; padding: 6px 12px; }
    .mobile-nav-header{width: 100%;padding: 20px 3%;}
    .nav-container .pc-nav{display: none;}
    .mobile-nav{width: 100%;}

    .intro-header{
        .logo{
            img{
                height: 40px;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                &.white{
                    opacity: 1;
                    visibility: visible;
                    pointer-events: visible;
                }
            }
        }
    }

    .intro_left__area{position: relative;margin-top: 0;}
    .intro_right__area{position: relative;width: 60%;bottom: 0;}

    /* 인트로 섹션 */
    .intro-header { width: 100%; padding: 20px 3%; top: 0; }
    .intro-main { margin:0;padding: 0 3rem; flex-direction: column; align-items: center; text-align: center; gap: 5rem;    justify-content: center; }
    .intro-main h1 { font-size: 7rem; line-height: 1.2; }
    .intro-main p { font-size: 2.2rem; }
    .download-buttons { flex-direction: row; gap: 1.5rem; margin-top: 1.5rem;justify-content: center; }

    /* 서비스 소개 섹션 */
    .service-intro-section .section-content { padding: 5rem 2rem; }
    .service-intro-section h3 { font-size: 32px; line-height: 1.4; }

    /* 카드 영역 */
    .card__area { width: 100%; }
    .card__area ul { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .card__area .card_item a { height: 300px; padding: 30px; }

    /* 앱 섹션들 */
    /* .section-content__inner { flex-direction: column; gap: 30px; padding: 5rem 2rem; } */
    .app01-section .title_area, .app02-section .title_area, .app03-section .title_area, .community-section .title_area { margin-top: 0; text-align: center; }
    .app_title_area h2 { font-size: 36px; line-height: 1.3; }
    .app_title_area p { font-size: 16px; line-height: 1.5; }


    /* 슬라이드 영역 */
    /* .slide__area { width: 100%; margin-bottom: 30px; } */
    .slide__object_area .silde_object { width: 250px; height: 500px; }

    /* FAQ 섹션 */
    .faq-section { padding: 140px 2rem; }
    .accordion { width: 100%; }
    .accordionTitle { height: 60px; padding: 1.5rem 2rem; font-size: 16px; }

    /* 마지막 섹션 */
    .last-section .title_area h2 { font-size: 36px; line-height: 50px; }
    .last-section .download-buttons { gap: 20px; margin-top: 40px;justify-content: center;}

    /* 푸터 */
    .footer-content { width: 90%; padding: 30px 0; }
    .footer-top { flex-direction: column; gap: 20px; align-items: center; text-align: center; }
    .footer-top ul { gap: 25px; }
    .footer-top select { width: 130px; padding: 8px; font-size: 14px; }

    /* 서비스 소개 섹션 */
    .about_slide__area { margin-top: 50px; }

    /* 인트로 피처 섹션 */
    .intro-feature-section .section-content { 
        flex-direction: column;
        padding: 0 !important;
        gap: 0 !important;
    }
    .intro-feature-section .section-content .img01,
    .intro-feature-section .section-content .img02{
        width: 100%;
        height: 50vh;
    }
    .intro-feature-section img { width: 100%; }

    /* 인트로 베네핏 섹션 */
    .intro-benefit-section .title_area h2 { font-size: 48px; line-height: 60px; }
}

/* ==================================
모바일 (768px 이하)
================================== */
@media (max-width: 768px) {
    .app_title_area{display: block;}
    /* .slide__overlay{display: none;} */


    /* .app-slider .edu-wrapper .edu{width:260px !important} */
    
    .slick-slide.slick-center img{position: relative;} 
    .slide__overlay {
        position: absolute;
        z-index: 50;
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-image: url(../img/slide/slide_item__area.png);
        background-size: cover;
    }
    /* .slide__overlay img{width: 58%%;height: 90%;object-fit: cover;} */
    
    /* 인트로 섹션 */
    /* .intro-header { padding: 0 1.5rem; top: 15px; } */
    .logo img { height: 35px; }
    .top_btn { padding: 3px 10px; font-size: 12px; }
    .intro-main {width:100%;height: 90vh;padding: 0 1.5rem; margin-top: 3rem; gap: 10rem;}
    .intro-main h1 { font-size: 5rem; line-height: 1.2; }
    .intro-main p { font-size: 2rem; margin-bottom: 15px; }
    .download-buttons {justify-content: center;gap: 12px; margin-top: 20px; }

    /* 인트로 상하반전 */
    .intro_left__area{position: absolute;bottom: 0;height: 35%;width: 100%;}
    .intro_right__area{position: absolute;top: 0;height: 65%;width: 100%;}

    /* 동전 애니메이션 */
    .intro_right__area{bottom: 0;}
    .intro_right__area > img{width: 100%;height: 100%;object-fit: cover;}
    .intro_right__area .dynamic img { width: 35px; height: 35px; }

    /* 서비스 소개 섹션 */
    .service-intro-section .title{font-size: 24px; line-height: 1.4; }
    .service-intro-section .sub_title{font-size: 16px; line-height: 1.4; }
    .service-intro-section .section-content { padding: 3rem 1rem; }
    .service-intro-section h3 { font-size: 24px; line-height: 1.4; }
    .about_slide__inner{width: 100%;animation: none;flex-direction: column; align-items: center;gap: 1rem;}
    .about_slide__inner .slide_item:nth-child(odd){margin: 0;}
    .about_slide__inner .slide_item { width: 65%; padding: 15px; gap: 2rem; }
    .about_slide__inner .slide_item div{width: 70%;}
    .about_slide__inner .slide_item img { width: 50px; height: 50px; }
    .about_slide__inner .slide_item span { font-size: 16px; }
    .about_slide__inner .slide_item p { font-size: 18px; line-height: 26px; }

    .intro-feature-section .blurBg .title_area h2{font-size: 4rem;line-height: 160%;}

    /* 카드 영역 */
    .card__area ul { grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 40px; }
    .card__area .card_item a { height: 220px; padding: 25px; }
    .card__area .card_item a .object_box img{width: 40%;}
    .card__area .card_item a .object_box p { font-size: 15px; line-height: 1.4; }
    .card__area .card_item span{display: none;}

    /* 앱 섹션들 */
    .section-content__inner {flex-direction: column;position: relative; gap: 30px; padding: 5rem 1rem; }
    .content-left, .content-right { width: 100%; }
    .content-left { justify-content: center; text-align: center; }
    .t_align_left { text-align: center; }
    .t_align_right { text-align: center; }
    .app01-section .title_area, .app02-section .title_area, .app03-section .title_area, .community-section .title_area { margin-top: 0; text-align: center; }
    /* .app-section .section-content::before {content: "";} */
    /* .app01-section .section-content::before { top: 0;left: 0;}
    .app02-section .section-content::before { bottom: 0;right: 0;}
    .app03-section .section-content::before {bottom: -80px;left: 0;}
    .community-section .section-content::before { bottom: 0;right: -50px;} */

    .content-left.right { justify-content: center; }
    .app_title_area.right { align-items: center !important; }
    .app_title_area { justify-content: center !important; margin: 0; }
    .app_title_area h2 { font-size: 28px; line-height: 1.3;text-align: center; }
    .app_title_area p { font-size: 15px; line-height: 1.5; }

    /* 슬라이드 영역 */
    .slide__object_area { width: 100%; justify-content: center; flex-wrap: wrap; }
    .slide__object_area .silde_object { flex: 1; border-radius: 30px;height: 300px; }
    .slide__navigation { width: 100%; justify-content: center; margin-top: 15px; }
    .slide__object_area .silde_object.active{border-radius: 30px;}
    .slide__object_area .silde_object.active::after { width: 100%; height: 100%; }
    .slide__prev, .slide__next { padding: 8px; }
    .slide__prev img, .slide__next img { width: 18px; height: 18px; }
    .slide__counter { font-size: 14px;}
        
    .app-slider .edu-wrapper .edu img{width:fit-content;height: 50vh;border-radius: 40px;}
    .app-slider{
        margin-bottom: 80px;
    }
    .app-slider .slider_control{
        width: 100%; margin-top: 0; position: relative; z-index: 60;
        position: absolute;
        top: calc(100% + 40px);
        left: 50%;
        transform: translateX(-50%);
    }

    /* app 상하 조정 */
    /* .section-content__inner{height: 80vh;} */
    /* .content-left{position: absolute;top: 0;} */
    /* .slide__area{position: absolute;bottom: 0;} */

    /* 인트로 베네핏 섹션 */
    .intro-benefit-section .title_area h2 { font-size: 32px; line-height: 45px; }

    /* FAQ 섹션 */
    .faq-section { width: 95%; padding: 9rem 1rem; }
    .faq_title_area { margin-bottom: 40px; }
    .faq_title_area h2 { font-size: 36px; }
    .faq_title_area h3 { font-size: 18px; }
    .accordion { width: 100%; }
    .accordionTitle { height: 55px; padding: 1.2rem 1.5rem; font-size: 15px; }
    .accordionTitle:before, .accordionTitle:after { height: 1px; }

    /* 마지막 섹션 */
    .last-section .title_area h2 { font-size: 28px; line-height: 40px; }
    .last-section .download-buttons { flex-direction: column; gap: 12px; margin-top: 40px; }

    /* 푸터 */
    .footer-content { width: 95%; padding: 9rem 0; }
    .footer-top { flex-direction: column; gap: 15px; text-align: center; }
    .footer-top div{flex-direction: column;}
    .footer-top ul li.line{display: none;}
    .footer-top ul { flex-direction: column; gap: 10px; }
    .footer-top select { width: 120px; padding: 6px; font-size: 13px; }
    .footer-info{text-align: center;}
    .footer-info ul { list-style: none; padding: 0; }
    .footer-info ul li { font-size: 14px; margin-bottom: 8px; line-height: 1.4; }
    .copyright { font-size: 12px; margin-top: 15px; }
}

/* ==================================
소형 모바일 (480px 이하)
================================== */
@media (max-width: 480px) {

    .fp-section{
        .fp-overflow{
            .section-content{
                padding: 100px 3%;
                gap: 40px;
            }
        }
    }

    .download-buttons a{
        width: 140px;
        height: 35px;
    }


    /* 네비게이션 */
    .nav-menu { gap: 8px; }
    .nav-item a { font-size: 11px; padding: 5px 10px; }

    /* 인트로 섹션 */
    /* .intro-header { padding: 0 1rem; } */
    .intro-main { padding: 0 1rem;}
    .intro-main h1 { font-size: 2.2rem; }
    .intro-main p { font-size: 1.3rem; }
    .intro-main{
        flex-direction: column-reverse;
        gap: 0;
    }

    .intro-header{
        .logo{
            img{
                height: 30px;
            }
        }
    }
    .mobile-logo img{
        height: 30px;
    }

    .mobile-nav-header{padding: 15px 3%;}

    .intro_right__area > img{
        object-fit: contain;
    }
    .intro_right__area{
        position: relative;
        height: unset;
        margin-bottom: -30px;
    }
    .intro_left__area{
        position: unset;
        height: unset;
    }
    /* 상하 반전 */
    /* .intro_left__area{position: absolute;bottom: 0;} */
    /* .intro_right__area{position: absolute;top: 0;} */

    /* 서비스 소개 */
    .service-intro-section h3 { font-size: 20px; }
    .about_slide__inner .slide_item { width: 100%; padding: 12px; gap: 1.5rem; border-radius: 10px; }
    .about_slide__inner .slide_item span { font-size: 14px; }
    .about_slide__inner .slide_item p { font-size: 16px; line-height: 22px; }

    /* 카드 영역 */
    .card__area .card_item a { height: 200px; padding: 20px; }
    .card__area .card_item a .object_box p { font-size: 14px; }

    /* 앱 섹션들 */
    .app_title_area h2 { font-size: 24px; }
    .app_title_area p { font-size: 14px; }

    /* 슬라이드 */
    .slide__object_area .silde_object { width: 180px; height: 380px; }

    /* 마지막 섹션 */
    .last-section .title_area h2 { font-size: 24px; line-height: 35px; }

    /* FAQ */
    .faq_title_area h2 { font-size: 28px; }
    .faq_title_area h3 { font-size: 16px; }
    .accordionTitle { height: 50px; padding: 1rem; font-size: 13px; }




    .app-slider{
        margin-bottom: 50px;
    }

    .app-slider .slider_control{
        top: calc(100% + 20px);
        .slide__counter{
            font-size: 16px;
        }
        .prev,.next{
            padding: 8px;
            img{
                width: 20px;
                height: 20px;
            }
        }
    }
}

/* ==================================
가로 모드 (모바일)
================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .intro-main h1 { font-size: 2rem; }
    .intro-main p { font-size: 1.2rem; }
    .about_slide__area { margin-top: 20px; }
    .app01-section .title_area, .app02-section .title_area, .app03-section .title_area, .community-section .title_area { margin-top: -8rem; }
    .faq-section { padding: 3rem 0; }
    .last-section .title_area h2 { font-size: 24px; line-height: 30px; }
}