/* ========================================
   맘맵 모바일 — 민트 프레시
   전체 사이트 완전 리뉴얼
   2026-02-27
======================================== */

html, body { background-color: #FFFFFF !important; width: 100% !important; overflow-x: hidden !important; margin: 0; padding: 0; }

/* ── 1. 모바일 레이아웃 (768px) ── */
@media screen and (max-width: 768px) {
    .sidebar, .ads-sidebar, aside.sidebar, .ads-container.ads-sidebar { display: none !important; width: 0 !important; height: 0 !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; }
    .content-wrapper { display: block !important; width: 100% !important; }
    .content, .main-container, main.main-container { width: 100% !important; max-width: 100% !important; padding: 8px !important; margin: 0 !important; box-sizing: border-box !important; }
    .main-container { padding: 10px !important; }
    .content { padding: 0 !important; }
    .header, .footer { width: 100% !important; }
    .ads-container { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}
@media screen and (max-width: 480px) { .main-container { padding: 5px !important; } }

/* ── 2. 네비게이션 ── */
@media (max-width: 768px) {
    .nav-container { padding: 8px 14px; height: 50px; }
    .logo .logo-text { font-size: 15px; }
    .logo-mark { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
    .tagline { display: none; }
    .nav-toggle { display: flex !important; }
    .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; flex-wrap: wrap; flex-direction: row; gap: 0; padding: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); border-top: 1px solid var(--mm-border); }
    .nav-menu.active { display: flex !important; }
    .nav-menu li { width: 50%; }
    .nav-menu a { display: block; padding: 11px 12px; font-size: 13px; text-align: center; border-radius: 10px; margin: 2px; }
    .nav-menu a:active { background: var(--mm-primary-light); color: var(--mm-primary); }
}

/* ── 3. 푸터 ── */
@media (max-width: 768px) {
    .footer { padding: 32px 14px 16px; margin-top: 40px; }
    .footer-content { grid-template-columns: 1fr; gap: 24px; }
    .footer-section { text-align: center; }
    .footer-logo { justify-content: center; }
    .footer-bottom { font-size: 11px; }
}

/* ── 4. 홈 ── */
@media (max-width: 1200px) { .services-grid { grid-template-columns: repeat(3, 1fr); } .region-calc-grid { grid-template-columns: 1fr; } }
@media (max-width: 1024px) {
    .home-content-wrapper { grid-template-columns: 1fr; }
    .home-sidebar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .guide-grid, .guide-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .home-content-wrapper { padding: 12px 8px; }
    .home-sidebar { grid-template-columns: 1fr; }
    .hero-section { padding: 28px 16px; margin-bottom: 24px; }
    .hero-content h1 { font-size: 20px; }
    .hero-description { font-size: 13px; }
    .search-form .form-row, .filter-form .form-row { flex-direction: column; }
    .form-select, .region-select, .form-select-large { min-width: 100% !important; width: 100%; }
    .btn-search, .btn-filter { width: 100%; }
    .services-grid { grid-template-columns: 1fr; gap: 8px; }
    .service-card { flex-direction: row; align-items: center; padding: 14px; }
    .service-card::before { width: 3px; height: 100%; top: 0; left: 0; right: auto; bottom: auto; }
    .service-icon { font-size: 20px; margin-bottom: 0; margin-right: 12px; flex-shrink: 0; }
    .service-arrow { display: none; }
    .region-calc-grid { gap: 12px; }
    .popular-regions-box, .pregnancy-calc-box { padding: 18px 14px; }
    .region-grid, #dailyRegions { grid-template-columns: repeat(2, 1fr); }
    .guide-grid, .guide-cards { grid-template-columns: repeat(2, 1fr); }
    .home-page .section-header h2 { font-size: 16px; }
    .week-number { font-size: 28px; }
}
@media (max-width: 480px) { .guide-grid, .guide-cards { grid-template-columns: 1fr; } .region-grid { gap: 6px; } }

/* ── 5. 예방접종 목록 ── */
@media (max-width: 1024px) { .vc-layout { grid-template-columns: 1fr; } .vc-layout__map { position: relative; top: auto; height: 320px; } .vc-layout__list { max-height: none; overflow-y: visible; } }
@media (max-width: 768px) { .vc-hero { padding: 24px 16px; } .vc-hero__title { font-size: 20px; } .vc-search__row { flex-direction: column; } .vc-search__btn { width: 100%; } .vc-layout__map { height: 260px; } .vc-summary__title { font-size: 15px; } }
@media (max-width: 480px) { .vc-hero { padding: 18px 12px; } .vc-hero__title { font-size: 18px; } .vc-layout__map { height: 220px; } .vc-card__actions { flex-direction: column; } .vc-guide__features { flex-direction: column; gap: 12px; } }

/* ── 6. 예방접종 상세 ── */
@media (max-width: 1024px) { .vcd-content { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .vcd-header { padding: 18px 14px; } .vcd-header__main h1 { font-size: 18px; } .vcd-card { padding: 16px; } .vcd-map { height: 220px; } .vcd-map-btns { flex-direction: column; } }

/* ── 7. 산부인과 ── */
@media (max-width: 1024px) { .obstetrics-layout { grid-template-columns: 1fr; } .obstetrics-map { position: relative; top: auto; height: 320px; } .obstetrics-list { max-height: none; overflow-y: visible; } .detail-content { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .obstetrics-map, .detail-map, .map-card #detailMap, .map-card #map { height: 240px; } .map-actions, .map-buttons { flex-direction: column; } .page-header h1 { font-size: 20px; } }

/* ── 8. 어린이집 ── */
@media (max-width: 768px) {
    .childcare-map, #childcareMap { height: 280px; }
    .childcare-page .select-group { flex-direction: column; }
    .childcare-page .select-wrapper { width: 100%; }
    .childcare-page .select-wrapper select { width: 100%; }
    .childcare-page .btn-search { width: 100%; }
    .childcare-detail-page .detail-content { grid-template-columns: 1fr; }
}

/* ── 9. 유치원 ── */
@media (max-width: 768px) { .kindergarten-map, #kindergartenMap { height: 280px; } .kindergarten-page .form-row { flex-direction: column; } .kindergarten-page .form-group { width: 100%; } .kindergarten-page .form-select-large { width: 100% !important; min-width: 100% !important; } .kindergarten-page .btn-large { width: 100%; } }

/* ── 10. 출산지원금 ── */
@media (max-width: 768px) { .support-hero { padding: 28px 16px; } .support-hero h1 { font-size: 20px; } .sido-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .card-grid { grid-template-columns: 1fr; } .card-amounts { grid-template-columns: repeat(2, 1fr); } .info-cards { grid-template-columns: 1fr; } .support-modal .modal-content { margin: 20px; } .detail-amount-row { flex-direction: column; gap: 4px; } }
@media (max-width: 480px) { .sido-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── 11. 지도 페이지 ── */
@media (max-width: 768px) { .map-page .map-container, .map-container { height: 300px; } .map-legend { gap: 10px; } .facility-list { grid-template-columns: 1fr; } .quick-links { flex-direction: column; } .guide-features { flex-direction: column; gap: 10px; } }

/* ── 12. 정보/가이드 ── */
@media (max-width: 768px) { .category-filter { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; } .category-btn { white-space: nowrap; flex-shrink: 0; } .article-title { font-size: 14px; } .link-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── 13. 임신/육아 ── */
@media (max-width: 768px) { .week-cards-grid { grid-template-columns: 1fr; } .week-card { padding: 14px; } .vaccine-detail-page .info-grid { grid-template-columns: 1fr; } }

/* ── 14. 광고 ── */
@media (max-width: 768px) { .ad-desktop-horizontal, .ad-desktop-only { display: none !important; } .ad-mobile-horizontal { display: block !important; } .ads-container.ads-bottom { margin: 20px 0; padding: 14px 8px; } .ads-container.ads-in-article { margin: 16px -8px; padding: 12px 8px; border-radius: 0; } .ads-mobile-section { display: block !important; } }
@media (max-width: 480px) { .ads-container.ads-bottom { padding: 10px 4px; } .ads-mobile-section { margin: 12px -4px; padding: 10px 4px; border-radius: 0; } }

/* ── 15. 브레드크럼/SEO ── */
@media (max-width: 768px) { .breadcrumb { font-size: 12px; overflow-x: auto; white-space: nowrap; } }

/* ── 16. About ── */
@media (max-width: 768px) { .about-page .hero-section { padding: 40px 16px; } .about-page .hero-content h1 { font-size: 22px; } .cta-buttons { flex-direction: column; } }

/* ── 17. 유틸리티 ── */
@media (max-width: 768px) { .desktop-only { display: none !important; } }
@media (min-width: 769px) { .mobile-only { display: none !important; } }

/* ── 모바일 오버라이드 패치 ── */
@media (max-width: 768px) {
    /* 셀렉트 전폭 */
    select, .form-select, .region-select, .form-select-large {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* 어린이집 모바일 */
    .childcare-page .select-group {
        flex-direction: column !important;
    }
    .childcare-page .select-wrapper {
        width: 100% !important;
        min-width: 100% !important;
    }
    .childcare-page .btn-search {
        width: 100% !important;
    }
    .childcare-page .childcare-map,
    .childcare-page #childcareMap {
        height: 280px !important;
    }
    .childcare-page .guide-features {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* 유치원 모바일 */
    .kindergarten-page .form-row {
        flex-direction: column !important;
    }
    .kindergarten-page .form-group {
        width: 100% !important;
        min-width: 100% !important;
    }
    .kindergarten-page .btn-large,
    .kindergarten-page button[type="submit"] {
        width: 100% !important;
    }
    .kindergarten-page #kindergartenMap {
        height: 280px !important;
    }

    /* 산부인과 모바일 */
    .obstetrics-page .obstetrics-layout {
        grid-template-columns: 1fr !important;
    }
    .obstetrics-page .obstetrics-map {
        height: 280px !important;
        position: relative !important;
        top: auto !important;
    }
    .obstetrics-page .obstetrics-list {
        max-height: none !important;
        overflow-y: visible !important;
    }
    .obstetrics-page .select-group {
        flex-direction: column !important;
    }
}

/* ── 페이지별 모바일 패치 v3 ── */
@media (max-width: 768px) {
    /* 예방접종 캘린더 */
    .vaccine-calendar-page .filter-section {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .vaccine-calendar-page .modal-content {
        width: 95% !important;
        padding: 20px !important;
        max-height: 85vh !important;
    }
    .vaccine-card .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* 월별 육아정보 */
    .month-info-page .month-navigation {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .month-info-page .nav-prev,
    .month-info-page .nav-next {
        width: 100% !important;
        text-align: center !important;
    }
    .month-info-page .link-cards {
        grid-template-columns: 1fr !important;
    }

    /* 임신 상세 */
    .pregnancy-detail-page .week-navigation {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .pregnancy-detail-page .nav-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .pregnancy-detail-page .info-items {
        grid-template-columns: 1fr !important;
    }

    /* 맘스가이드 상세 */
    .info-detail-page .article-header h1 {
        font-size: 20px !important;
    }
    .info-detail-page .article-navigation {
        grid-template-columns: 1fr !important;
    }
    .info-detail-page .service-grid {
        grid-template-columns: 1fr !important;
    }

    /* vaccine_detail */
    .vaccine-detail-page .info-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── FIX 모바일 패치 ── */
@media (max-width: 1024px) {
    /* 산부인과 1컬럼 */
    .obstetrics-page .obstetrics-layout {
        grid-template-columns: 1fr !important;
    }
    .obstetrics-page .obstetrics-map {
        position: relative !important;
        top: auto !important;
        height: 320px !important;
    }
    .obstetrics-page .obstetrics-list {
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* 유치원 1컬럼 */
    .kindergarten-page .result-container,
    .kindergarten-page .map-list-container {
        grid-template-columns: 1fr !important;
    }
    .kindergarten-page .map-section {
        position: relative !important;
        top: auto !important;
    }
    .kindergarten-page #kindergartenMap,
    .kindergarten-page .kindergarten-map {
        height: 320px !important;
    }
    .kindergarten-page .list-section {
        max-height: none !important;
        overflow-y: visible !important;
    }
}

@media (max-width: 768px) {
    .obstetrics-page .obstetrics-map {
        height: 260px !important;
    }
    .kindergarten-page #kindergartenMap,
    .kindergarten-page .kindergarten-map {
        height: 260px !important;
    }

    /* 예방접종 셀렉트 모바일 */
    .vc-search__row {
        flex-direction: column !important;
    }
    .vc-search__field {
        width: 100% !important;
    }
    .vc-search__btn {
        width: 100% !important;
    }
}

/* ── 유치원 레이아웃 모바일 최종 ── */
@media (max-width: 1024px) {
    .kindergarten-layout,
    .content-wrapper.kindergarten-layout {
        display: block !important;
        grid-template-columns: unset !important;
    }
    .kindergarten-layout > .map-section {
        position: relative !important;
        top: auto !important;
        margin-bottom: 16px !important;
    }
    .kindergarten-layout > .map-section #map,
    .kindergarten-layout > .map-section .kindergarten-map {
        height: 320px !important;
    }
    .kindergarten-layout > .list-section {
        max-height: none !important;
        overflow-y: visible !important;
    }
}
@media (max-width: 768px) {
    .kindergarten-layout > .map-section #map,
    .kindergarten-layout > .map-section .kindergarten-map {
        height: 260px !important;
    }
}

/* ── 히어로 모바일 패치 ── */
@media (max-width: 768px) {
    .obs-hero, .cc-hero, .kg-hero {
        padding: 24px 16px !important;
    }
    .obs-hero__title, .cc-hero__title, .kg-hero__title {
        font-size: 20px !important;
    }
    .obs-search__row, .cc-search__row, .kg-search__row {
        flex-direction: column !important;
    }
    .obs-search__btn, .cc-search__btn, .kg-search__btn {
        width: 100% !important;
    }
}

/* ── 커스텀 셀렉트 모바일 ── */
@media (max-width: 768px) {
    .cs-dropdown {
        left: -12px !important;
        right: -12px !important;
        border-radius: 12px !important;
    }
    .cs-option {
        padding: 12px !important;
        font-size: 15px !important;
    }
    .cs-search__input {
        padding: 11px 12px !important;
        font-size: 15px !important;
    }
    .cs-options {
        max-height: 200px !important;
    }
}
/* ══════════════════════════════════════
   패치 FINAL — mobile-style.css 맨 끝에 추가
   ══════════════════════════════════════ */

/* ── 모바일 initial-guide 한줄 ── */
@media (max-width: 768px) {
    .obstetrics-page .initial-guide,
    .childcare-page .initial-guide,
    .kindergarten-page .initial-guide,
    .map-page .initial-guide {
        padding: 16px !important; background: #f0fdf8 !important;
        border: 1px dashed #a7e8d0 !important; border-radius: 10px !important;
    }
    .obstetrics-page .initial-guide .guide-icon,
    .childcare-page .initial-guide .guide-icon,
    .kindergarten-page .initial-guide .guide-icon,
    .map-page .initial-guide .guide-icon { display: none !important; }
    .obstetrics-page .initial-guide h3,
    .childcare-page .initial-guide h3,
    .kindergarten-page .initial-guide h3,
    .map-page .initial-guide h3 {
        font-size: 14px !important; font-weight: 600 !important; color: #12B886 !important; margin: 0 !important;
    }
    .obstetrics-page .initial-guide p, .childcare-page .initial-guide p,
    .kindergarten-page .initial-guide p, .map-page .initial-guide p,
    .obstetrics-page .initial-guide .guide-features, .childcare-page .initial-guide .guide-features,
    .kindergarten-page .initial-guide .guide-features, .map-page .initial-guide .guide-features { display: none !important; }

    .vc-page .vc-guide {
        padding: 16px !important; background: #f0fdf8 !important;
        border: 1px dashed #a7e8d0 !important; border-radius: 10px !important;
    }
    .vc-page .vc-guide .vc-guide__icon { display: none !important; }
    .vc-page .vc-guide h3 { font-size: 14px !important; font-weight: 600 !important; color: #12B886 !important; margin: 0 !important; }
    .vc-page .vc-guide p, .vc-page .vc-guide .vc-guide__features { display: none !important; }
}

/* ── 모바일 홈 히어로 ── */
@media (max-width: 768px) {
    .home-page .hero-section {
        background: linear-gradient(135deg, #e6fff6 0%, #f0f9ff 50%, #fef3f2 100%) !important;
        border: none !important; border-radius: 16px !important;
        padding: 32px 20px 28px !important; position: relative !important; overflow: visible !important;
    }
    .home-page .hero-section::before {
        content: '' !important; position: absolute !important; top: -30px !important; right: -30px !important;
        width: 120px !important; height: 120px !important;
        background: rgba(18,184,134,0.08) !important; border-radius: 50% !important; pointer-events: none !important;
    }
    .home-page .hero-section::after {
        content: '' !important; position: absolute !important; bottom: -20px !important; left: -20px !important;
        width: 80px !important; height: 80px !important;
        background: rgba(59,130,246,0.06) !important; border-radius: 50% !important; pointer-events: none !important;
    }
    .home-page .hero-content h1 { font-size: 22px !important; color: #1a1a2e !important; position: relative !important; }
    .home-page .hero-description { font-size: 13px !important; color: #6b7280 !important; position: relative !important; }

    /* ★ 홈 모바일 세로 배치 */
    .home-page .search-form .form-row {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        background: white !important; border-radius: 16px !important; padding: 16px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(18,184,134,0.1) !important;
        gap: 10px !important;
    }
    .home-page .search-form .cs-wrapper {
        width: 100% !important;
        flex: none !important;
        min-width: 100% !important;
    }
    .home-page .search-form .cs-trigger {
        background: #f8fafb !important; border: 1.5px solid #e5e7eb !important;
        border-radius: 12px !important; padding: 14px !important; min-height: 48px !important;
    }
    .home-page .search-form .cs-wrapper.cs-open .cs-trigger {
        border-color: #12B886 !important;
    }
    .home-page .search-form .cs-dropdown {
        z-index: 99999 !important;
    }
    .home-page .search-form .btn-primary,
    .home-page .search-form #searchBtn {
        width: 100% !important;
        background: linear-gradient(135deg, #12B886 0%, #0ca678 100%) !important;
        color: white !important; border: none !important; border-radius: 12px !important;
        padding: 14px !important; font-size: 16px !important; font-weight: 700 !important;
        min-height: 50px !important; box-shadow: 0 4px 12px rgba(18,184,134,0.3) !important;
    }
}
/* ══════════════════════════════════════
   패치 MAP — mobile-style.css 맨 끝에 추가
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    .map-page .page-header {
        padding: 24px 16px 8px !important;
        border-radius: 16px 16px 0 0 !important;
    }
    .map-page .page-header h1 {
        font-size: 20px !important;
    }
    .map-page .filter-section {
        padding: 8px 16px 24px !important;
        border-radius: 0 0 16px 16px !important;
    }
    .map-page .filter-form .form-row {
        flex-direction: column !important;
        padding: 14px !important;
        gap: 10px !important;
    }
    .map-page .filter-form .cs-wrapper {
        width: 100% !important;
        flex: none !important;
    }
    .map-page .filter-form .cs-trigger {
        min-height: 48px !important;
        padding: 14px !important;
    }
    .map-page .filter-form .btn-primary {
        width: 100% !important;
        min-height: 48px !important;
    }
    .map-page .quick-links {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .map-page .quick-links .btn {
        width: 100% !important;
        text-align: center !important;
    }
}
/* ═══════════════════════════════════════════════
   mobile-style.css 맨 아래에 아래 내용 전부 추가
   ═══════════════════════════════════════════════ */

/* ── 수정2: 지도 터치 시 페이지 스크롤 방지 ── */
@media (max-width: 768px) {
    /* 모든 지도 컨테이너에 터치 격리 적용 */
    #map,
    #childcareMap,
    #kindergartenMap,
    #detailMap,
    #detail-map,
    .childcare-map,
    .kindergarten-map,
    .obstetrics-map,
    .detail-map,
    .map-container {
        touch-action: none !important;
        -webkit-overflow-scrolling: auto !important;
    }
}

/* ── 수정4: 어린이집 상세 모바일 오른쪽 짤림 ── */
@media (max-width: 768px) {
    .childcare-detail-page {
        padding: 15px 12px !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .childcare-detail-page .detail-header h1 {
        font-size: 20px !important;
        word-break: keep-all !important;
    }

    .childcare-detail-page .detail-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .childcare-detail-page .info-section {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .childcare-detail-page .info-table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .childcare-detail-page .info-table th {
        width: 80px !important;
        min-width: 80px !important;
        font-size: 12px !important;
        padding: 8px 6px !important;
        word-break: keep-all !important;
    }

    .childcare-detail-page .info-table td {
        font-size: 13px !important;
        padding: 8px 6px !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }

    .childcare-detail-page .capacity-info {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .childcare-detail-page .capacity-item {
        flex: 1 1 calc(33% - 8px) !important;
        min-width: 80px !important;
        padding: 10px 8px !important;
    }

    .childcare-detail-page .capacity-value {
        font-size: 18px !important;
    }

    .childcare-detail-page .detail-badges {
        flex-wrap: wrap !important;
    }

    .childcare-detail-page .badge {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }

    .childcare-detail-page .detail-map {
        height: 250px !important;
    }

    .childcare-detail-page .map-actions {
        flex-direction: column !important;
    }

    .childcare-detail-page .map-actions .btn {
        width: 100% !important;
        text-align: center !important;
    }

    .childcare-detail-page .detail-actions {
        flex-direction: column !important;
    }

    .childcare-detail-page .detail-actions .btn {
        width: 100% !important;
        text-align: center !important;
    }

    .childcare-detail-page .breadcrumb {
        font-size: 12px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    /* phone-link 길 때 줄바꿈 */
    .childcare-detail-page .phone-link {
        word-break: break-all !important;
    }

    /* SEO 설명 영역 */
    .childcare-detail-page .seo-description {
        padding: 12px !important;
    }

    .childcare-detail-page .seo-description .description-text {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
}