/* ============================================================
   GB Academy - Mobile Fix (Clean Version)
   2026-05-21 final
   ============================================================ */

/* === 1. 가로 오버플로우 차단 === */
html, body {
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

img, iframe, video {
    max-width: 100%;
    height: auto;
}

/* === 2. 카카오 roughmap 고정폭 차단 === */
.contact-map-full {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.contact-map-full .root_daum_roughmap {
    width: 100% !important;
    max-width: 100% !important;
}
.contact-map-full .root_daum_roughmap .wrap_map {
    width: 100% !important;
}

/* === 3. iOS Safari 백그라운드 fixed 모바일 비활성화 === */
@media (max-width: 1024px) {
    .features-bg,
    .cta-bg {
        background-attachment: scroll !important;
    }
}

/* === 4. 모바일 메뉴 - 닫혔을 때 가로 폭 영향 제거 === */
.mobile-menu {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mobile-menu.open {
    transform: translateX(0);
}

/* === 5. About 모바일 정리 === */
@media (max-width: 767px) {
    .about-image-accent { display: none; }
    .about-visual { max-width: 100%; overflow: hidden; }
    .about-badge { right: 16px !important; left: auto !important; }
}

/* === 6. notice/schedule flex item 우측 잘림 방지 === */
.notice-list li a {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.notice-title { min-width: 0; }

/* hover padding 시프트 → transform으로 (모바일은 비활성) */
.notice-list li a:hover {
    padding-left: 0 !important;
    transform: translateX(8px);
}
@media (hover: none), (max-width: 767px) {
    .notice-list li a:hover {
        transform: none !important;
        padding-left: 0 !important;
    }
}

/* === 7. 모바일 박스 좌우 균형 (핵심) === */
@media (max-width: 767px) {
    /* notice 섹션 자체는 패딩 없이 */
    .notice {
        padding: 60px 0 !important;
    }
    /* container가 좌우 16px 패딩으로 박스 위치 결정 */
    .notice > .container {
        padding: 0 16px !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .notice-grid {
        margin: 0 !important;
        width: 100% !important;
    }
    .notice-box {
        margin: 0 !important;
        padding: 24px 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* === 8. 플로팅 버튼 정렬 === */
.inquiry-form {
    right: 16px !important;
    bottom: 16px !important;
}
.back-to-top {
    right: 16px !important;
    bottom: 80px !important;
}
.inquiry-phone-btn {
    right: 16px !important;
    bottom: 136px !important;
}
@media (min-width: 768px) {
    .inquiry-form { right: 24px !important; bottom: 24px !important; }
    .back-to-top { right: 24px !important; bottom: 90px !important; }
    .inquiry-phone-btn { right: 24px !important; bottom: 156px !important; }
}

/* === 9. 갤러리/시설 이미지 안전망 === */
.gallery-grid, .facility-grid {
    max-width: 100%;
    width: 100%;
}
.gallery-item, .facility-item, .instructor-image, .course-image {
    max-width: 100%;
    overflow: hidden;
}

/* === 10. 모바일 inquiry-panel === */
@media (max-width: 767px) {
    .inquiry-panel {
        width: calc(100vw - 32px);
        right: 0;
        max-width: 360px;
    }
}