/* ═══════════════════════════════════════════════════
   모바일 반응형 보완 (responsive.css)
   - 이 파일 + responsive.js 제거 → 원상복구
   - PC에는 영향 없음 (전부 @media 안에 있음)
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ─── 메뉴/결과 버튼: 아이콘만 보이는 원형 FAB ─── */
    #menu-btn,
    #result-btn {
        display: flex !important;
        position: fixed !important;
        bottom: 16px !important;
        top: auto !important;
        z-index: 2200 !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        font-size: 0 !important;          /* 텍스트 숨김 */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
        overflow: hidden !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 아이콘(첫 글자)만 보이게 */
    #menu-btn::before {
        content: '☰';
        font-size: 22px;
    }

    #result-btn::before {
        content: '📋';
        font-size: 20px;
    }

    #menu-btn {
        left: 16px !important;
    }

    #result-btn {
        right: 16px !important;
        left: auto !important;
    }

    /* ─── 사이드바: 85% 폭 + 모서리 둥글게 ─── */
    .sidebar {
        width: 85vw !important;
        max-width: 320px !important;
    }

    #sidebar-left {
        left: -85vw !important;
        border-radius: 0 16px 16px 0 !important;
    }

    #sidebar-left.open {
        left: 0 !important;
    }

    #sidebar-right {
        right: -85vw !important;
        width: 85vw !important;
        border-radius: 16px 0 0 16px !important;
    }

    #sidebar-right.open {
        right: 0 !important;
    }

    /* ─── 사이드바: 닫기 버튼 크게 ─── */
    .close-sidebar-btn {
        font-size: 24px !important;
        padding: 12px !important;
    }

    /* ─── 사이드바 열릴 때 배경 어둡게 (탭으로 닫기) ─── */
    body.sidebar-left-open::after,
    body.sidebar-right-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
        pointer-events: auto;
    }

    /* ─── 온보딩/안내 팝업: 모바일에서 숨김 ─── */
    .onboarding-overlay,
    .onboarding-tooltip {
        display: none !important;
    }

    /* ─── 상태 메시지(빨간 말풍선): 작고 위로 ─── */
    #area-status-msg {
        top: 48px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
        z-index: 1500 !important;
        border-radius: 8px !important;
    }

    /* ─── 체인지로그 모달: 모바일 맞춤 ─── */
    .changelog-overlay,
    .changelog-modal {
        width: calc(100vw - 32px) !important;
        max-width: 100% !important;
        max-height: 70vh !important;
        margin: 15vh 16px !important;
        font-size: 14px !important;
    }

    /* ─── 상단 바: 콤팩트 ─── */
    .top-bar,
    #top-bar {
        font-size: 11px !important;
        padding: 4px 6px !important;
        gap: 4px !important;
    }

    .top-bar .user-info,
    #top-bar .user-info {
        max-width: 100px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ─── 공지 링크: 모바일에서 숨김 (사이드바 메뉴 안에서 접근) ─── */
    #notice-link {
        display: none !important;
    }

    /* ─── 체험모드 바: 버튼과 안 겹치게 ─── */
    #guest-mode-bar {
        bottom: 72px !important;
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    /* ─── Leaflet 줌 컨트롤: 검색바 아래 ─── */
    .leaflet-control-zoom {
        margin-top: 52px !important;
    }

    /* ─── Leaflet 출처 표시: 버튼과 안 겹치게 ─── */
    .leaflet-control-attribution {
        font-size: 9px !important;
        max-width: 50vw !important;
        margin-bottom: 4px !important;
    }
}