@charset "utf-8";

/* ==========================================================================
   [ 메인 페이지 모바일 반응형 공통 스타일 (style_m.css) ]
   기준: 1024px 이하 화면 (태블릿 & 스마트폰)
   ========================================================================== */
@media (max-width: 1024px) {

    /* ----------------------------------------------------
       1. 헤더 (Header) 및 전체메뉴 (All Menu) 최적화
       ---------------------------------------------------- */
    header { padding: 15px 20px; }
    header.scrolled { padding: 10px 20px; }
    
    /* 로고 크기 축소 */
    .logo img { height: 45px; }

    /* 🔥 상단 메뉴바: 오른쪽 전체메뉴 버튼만 남기고 나머지 숨김 */
    .gnb-wrap,
    .member-menu {
        display: none !important;
    }

    /* 전체메뉴 오버레이 모바일 최적화 */
    .all-menu-inner {
        width: 95%; 
        max-height: 90vh; 
        padding: 20px 10px;
    }
    .all-menu-list {
        flex-direction: column; /* 메뉴를 가로에서 세로로 변경 */
        gap: 15px;
    }
    .all-menu-content li { width: 100%; }
    .all-menu-list > li > a { font-size: 1.2rem; }


    /* ----------------------------------------------------
       2. 우측 퀵 메뉴 (Bottom Bar 하단 고정) 최적화
       ---------------------------------------------------- */
    .quick-menu {
        position: fixed; /* 절대위치에서 화면 고정으로 변경 */
        top: auto;       /* 위쪽 기준 무효화 */
        bottom: 0;       /* 바닥에 착 붙임 */
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        z-index: 9999;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.15); /* 위쪽으로 쏘는 그림자 */
        border-radius: 0; /* 모서리 둥글기 제거 */
    }

    .quick-list {
        display: flex;
        width: 100%; /* 100% 꽉 채워서 가로로 나열 */
    }

    .quick-list li {
        flex: 1; /* 아이콘 개수만큼 화면을 균등 분할 */
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.2); /* 메뉴 사이 희미한 세로선 */
    }
    .quick-list li:last-child { border-right: none; }

    .quick-list a {
        width: 100%;
        height: 60px; /* 폰에서 터치하기 편한 높이 */
        flex-direction: row; /* 아이콘과 글자를 가로로 나란히 배치 */
        gap: 6px;
        font-size: 13px;
    }

    .quick-list a img {
        margin-bottom: 0;
        max-width: 20px; /* 모바일에 맞춰 아이콘 살짝 축소 */
    }

    /* 🔥 TOP 버튼과 전화번호 박스는 모바일 하단바에서 숨김 */
    .btn-top,
    .quick-phone {
        display: none !important;
    }


    /* ----------------------------------------------------
       3. 메인 비주얼 영역 최적화
       ---------------------------------------------------- */
    .main-visual {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center; /* 모바일에서는 텍스트 중앙 정렬이 안정적입니다 */
        justify-content: center;
    }
    .main-visual h2 { font-size: 2.8rem; }
    .main-visual .main-desc { font-size: 18px; margin-top: 30px; }


    /* ----------------------------------------------------
       4. 시그니처 Swiper 영역 최적화
       ---------------------------------------------------- */
    .signature-section {
        padding: 60px 20px; /* 여백 대폭 축소 */
    }
    .signature-header {
        flex-direction: column; /* 타이틀과 화살표를 위아래로 분리 */
        align-items: flex-start;
        padding-right: 0;
        gap: 20px;
        margin-bottom: 30px;
    }
    .title-area .sub-title { font-size: 24px; }
    .title-area .main-title { font-size: 40px; }
    
    .signature-slide { height: 350px; } /* 슬라이드 이미지 높이 축소 */
    .slide-content { padding: 30px 15px; }
    .slide-content h3 { font-size: 32px; }
    .slide-content p { font-size: 18px; }


    /* ----------------------------------------------------
       5. 성형 / 쁘띠 (Clinic) 영역 최적화
       ---------------------------------------------------- */
    .clinic-section { padding: 60px 20px; }
    .clinic-inner {
        flex-direction: column; /* 좌우 배치를 상하 배치로 변경 */
        align-items: stretch;
        gap: 30px;
    }
    .clinic-title-area {
        width: 100%;
        text-align: center;
    }
    .clinic-title-area .sub-title { font-size: 24px; }
    .clinic-title-area .main-title { font-size: 40px; margin-bottom: 20px; }
    
    .clinic-swiper { width: 100%; }
    .clinic-swiper .swiper-slide { width: 85%; } /* 모바일에서 슬라이드 하나가 화면을 거의 다 채우도록 */
    .clinic-item { height: 350px; }
    .clinic-item .tit { font-size: 35px; }
    .clinic-item .desc { font-size: 18px; }


    /* ----------------------------------------------------
       6. 병원 소개 (Intro) 영역 최적화
       ---------------------------------------------------- */
    .intro-section {
        height: auto; /* 고정 높이 810px 해제 -> 내용물만큼 늘어나게 */
        padding: 80px 20px;
    }
    .intro-inner {
        flex-direction: column; /* 좌우 배치를 상하 배치로 변경 */
        gap: 40px;
        text-align: center;
    }
    .intro-images { width: 100%; max-width: 500px; margin: 0 auto; }
    
    .intro-text .main-title { font-size: 40px; margin-bottom: 20px; }
    .intro-text .sub-title { font-size: 24px; }
    .intro-text .divider { margin: 0 auto 30px auto; } /* 중앙 정렬 */
    .intro-text .desc { font-size: 16px; }


    /* ----------------------------------------------------
       7. 병원 둘러보기 (Preview) 영역 최적화
       ---------------------------------------------------- */
    .preview-container {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    .preview-image { height: 250px; }
    
    .preview-list {
        flex-direction: row; /* 메뉴를 가로로 나열 */
        flex-wrap: wrap;
        justify-content: center;
        border-left: none;
        border-top: 1px solid var(--color-bg-light);
        padding-top: 10px;
    }
    .preview-list li {
        padding: 10px 15px;
        font-size: 15px;
    }
    /* 가로 메뉴에 맞춰 활성화 포인트 바(bar) 위치를 바닥으로 이동 */
    .preview-list li.active::before {
        width: 100%; height: 3px; top: auto; bottom: 0; left: 0;
    }


    /* ----------------------------------------------------
       8. 하단 푸터 (Footer) 영역 최적화
       ---------------------------------------------------- */
    #footer {
        height: auto; 
        /* 하단 퀵메뉴(60px)에 가려지지 않게 bottom 패딩을 120px 넉넉히 확보 */
        padding: 60px 20px 120px; 
    }
    
    .footer-top {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 40px;
    }
    .footer-top h2 { font-size: 26px; margin-bottom: 15px; margin-right: 0; }
    
    .time-list .day { font-size: 16px; width: 80px; }
    .time-list .time { font-size: 18px; }
    .time-list .holiday { font-size: 16px; }
    
    .cs-info .phone-num { font-size: 35px; }

    .footer-map {
        width: 100%;
        height: 250px; /* 폰에서 스크롤을 방해하지 않게 높이 대폭 축소 */
        margin-bottom: 30px;
    }
    /* 카카오맵 100% 강제 적용 */
    .root_daum_roughmap { width: 100% !important; }

    .policy-menu {
        flex-wrap: wrap; /* 약관 메뉴 화면 넘어가면 줄바꿈 */
        gap: 15px 20px;
    }
    .policy-menu li:not(:last-child) a::after { display: none; } /* 약관 사이 | 선 숨김 */

    .company-info { font-size: 13px; }
    .company-info .bar { display: none; } /* | 대신 줄바꿈 되도록 처리 */
}