/* =====================================================
   mobile.css — 모바일(≤768px) 반응형 스타일
   ===================================================== */

@media (max-width: 768px) {
    /* ── 헤더 ── */
    #header h1 { font-size: 12px; }
    #header .badge { display: none; }
    #terrain-status { display: none; }
    #mobile-menu-btn {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; flex-shrink: 0;
        background: #0a84ff22; border: 1px solid #0a84ff55;
        color: #4fc3f7; border-radius: 8px; cursor: pointer; font-size: 22px;
    }
    /* 헤더 업로드 버튼 글자 짧게 */
    .header-upload-btn { font-size: 10px; padding: 3px 6px; }

    /* ── 리사이즈 핸들 숨김 ── */
    .resize-h, .resize-v { display: none !important; }

    /* ── 사이드바: 슬라이드인 ── */
    #sidebar {
        position: absolute !important; left: -105vw !important;
        top: 0 !important; bottom: 52px !important;
        width: 88vw !important; max-width: 340px !important; min-width: unset !important;
        z-index: 300; transition: left .28s cubic-bezier(.4,0,.2,1);
        box-shadow: 4px 0 32px #00000099;
    }
    #sidebar.mobile-open { left: 0 !important; }
    #sidebar-close-btn {
        display: flex !important; align-items: center; justify-content: center;
        width: 32px; height: 32px; border: none; background: #ffffff11;
        color: #ccc; border-radius: 50%; cursor: pointer; font-size: 16px;
        margin-left: auto; flex-shrink: 0;
    }
    /* 사이드바 내 글자 크기 */
    .trail-group-header { font-size: 14px !important; }
    .trail-item { font-size: 12px !important; }
    .sidebar-tab { font-size: 12px; }

    /* ── 우측 패널: 바텀시트 (조감도 숨김, 단면도만) ── */
    #right-panel {
        position: absolute !important; left: 0 !important; right: 0 !important;
        bottom: -55vmax !important; height: 50vmax !important;
        min-height: 220px !important; max-height: 55vh !important;
        width: 100% !important; max-width: unset !important; min-width: unset !important;
        border-top: 2px solid #0a84ff88 !important; border-left: none !important;
        border-radius: 20px 20px 0 0; z-index: 250;
        transition: bottom .3s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 -8px 32px #00000099;
        /* 드래그 핸들 힌트 */
        background: #16213e !important;
    }
    #right-panel.mobile-open { bottom: 52px !important; }
    /* 패널 핸들 바 */
    #right-panel::before {
        content: ''; display: block; width: 40px; height: 4px;
        background: #0a84ff66; border-radius: 2px;
        margin: 8px auto 4px; flex-shrink: 0;
    }
    /* 모바일에서 조감도 숨김 */
    #minimap-section { display: none !important; }
    /* 단면도가 전체 공간 차지 */
    #elev-section {
        height: 100% !important; max-height: unset !important;
        flex: 1 !important; border-bottom: none !important;
    }
    #elev-section h3 { font-size: 12px !important; }

    /* ── 지도 영역 ── */
    #map-center { position: relative; }
    .map-btn { width: 44px; height: 44px; font-size: 17px; }
    #map-controls { top: 8px; right: 8px; gap: 8px; }
    #coord-display { bottom: 62px; font-size: 10px; }
    #disaster-legend { bottom: 62px; right: 8px; font-size: 10px; }

    /* ── 토스트/알림 ── */
    .trail-actions { opacity: 1 !important; }
    #toast { bottom: 62px; right: 10px; font-size: 12px; }

    /* ── 모바일 오버레이 ── */
    #mobile-overlay { display: block; }

    /* ── 하단 내비게이션 ── */
    #mobile-bottom-nav {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0;
        height: 52px; background: #16213e; border-top: 1px solid #0a84ff44;
        z-index: 400; justify-content: space-around; align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -4px 16px #000000aa;
    }
    .mob-nav-btn {
        flex: 1; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 2px;
        background: none; border: none; color: #666;
        cursor: pointer; transition: color .15s; padding: 0; min-width: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .mob-nav-btn .mob-icon { font-size: 22px; line-height: 1; }
    .mob-nav-btn .mob-label { font-size: 10px; }
    .mob-nav-btn.active { color: #4fc3f7; }
    .mob-nav-btn.active .mob-icon { text-shadow: 0 0 10px #4fc3f7; }

    /* ── 스타일 탭 숨김 ── */
    /* GPS 탐방로 추적 버튼은 모바일에서 내위치 버튼으로 대체 */
    .trail-track-btn { display: none !important; }

    /* 스타일 탭 숨김 */
    #mobnav-style { display: none !important; }

    /* ── 컨텍스트 메뉴 ── */
    .ctx-item { padding: 14px 20px; font-size: 15px; }

    /* ── 경고 배너 ── */
    #trail-warn-banner { font-size: 13px !important; }
}

/* =====================================================
   모바일 추가 최적화 (2026-09) — 헤더 정리·카드 배치
   ===================================================== */
@media (max-width: 768px) {
    /* 헤더: PC 전용 버튼 숨김 (관제센터는 PC에서만) */
    #btn-control, .header-help-btn { display: none !important; }
    /* 가로 스크롤 방지 — 창 비율 깨짐 방지 */
    html, body { overflow-x: hidden; max-width: 100vw; }
    #header { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    #header::-webkit-scrollbar { display: none; }

    /* 산행 상태 카드 → 좌상단 (기상 카드와 세로 분리, 지도 컨트롤과 좌우 분리) */
    #mw-card {
        top: 8px;
        left: 8px;
        right: auto;
        bottom: auto;
        min-width: 138px;
        max-width: 44vw;
        padding: 5px 8px;
    }
    .mwc-head { font-size: 11px; margin-bottom: 4px; }
    .mwc-rows { font-size: 10px; gap: 2px; }

    /* 내비 배너: 상태 카드 아래로 (겹침 방지) */
    #nav-banner { top: 158px; }

    /* 기상 카드: 좌표 표시와 겹치지 않게 */
    #weather-card { bottom: 92px; }
}

/* 데스크톱: 지도 컨트롤의 도움말 아이콘은 기본 표시 */
#btn-help { font-size: 13px; }