/* ── Google Fonts: Pretendard fallback ── */
    @import url('https://cdn.jsdelivr.net/npm/pretendard@latest/dist/web/variable/pretendardvariable.css');

    /* ── Top Bar Container ── */
    #top-bar-container {
        padding: 5px 14px !important;
        background: rgba(26,26,26,0.90) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        box-shadow: 0 2px 14px rgba(0,0,0,0.55) !important;
    }

    /* ── Left icon buttons: Hamburger ── */
    #hamburger-menu-btn {
        width: 36px !important;
        height: 36px !important;
        background: rgba(26,26,26,0.85) !important;
        border: 1px solid rgba(255,255,255,0.11) !important;
        border-radius: 8px !important;
        gap: 5px !important;
        transition: background 0.2s, border-color 0.2s !important;
    }
    #hamburger-menu-btn:hover {
        background: rgba(255,255,255,0.07) !important;
        border-color: rgba(255,255,255,0.22) !important;
    }
    #hamburger-menu-btn span {
        width: 17px !important;
        height: 1.5px !important;
        background: #b0bcc8 !important;
    }

    /* ── Coord / Pin button ── */
    #coordGotoBtn {
        background: rgba(26,26,26,0.85) !important;
        border: 1px solid rgba(255,255,255,0.11) !important;
        border-radius: 8px !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #b0bcc8 !important;
        padding: 0 !important;
        font-size: 16px !important;
        transition: background 0.2s, border-color 0.2s !important;
        cursor: pointer !important;
    }
    #coordGotoBtn:hover {
        background: rgba(255,255,255,0.07) !important;
        border-color: rgba(255,255,255,0.22) !important;
    }

    /* ── Topbar search box (wrapper) ── */
    #topbar-search-box {
        background: rgba(26,26,26,0.85) !important;
        border-color: rgba(255,255,255,0.11) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
    }

    /* ── Topbar search input/button ── */
    #topbarSearchInput {
        background: transparent !important;
        border-color: rgba(255,255,255,0.11) !important;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif !important;
        color: #c8d4dc !important;
    }
    #topbarSearchBtn {
        background: transparent !important;
        border-color: rgba(255,255,255,0.11) !important;
        color: #8899a8 !important;
    }
    #topbarSearchBtn:hover {
        background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.22) !important;
        color: #c0d0dc !important;
    }

    /* ── Right auth group ── */
    #top-right-auth {
        gap: 3px !important;
    }
    #usernameDisplay {
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #8a9aaa !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
        padding: 0 6px !important;
    }
    /* 구분선(|): 아주 옅은 회색으로 통일 */
    .topbar-btn + .topbar-btn::before {
        background: rgba(255,255,255,0.09) !important;
    }
    /* 탑바 버튼 공통 — Pretendard 고딕, 정갈하게 */
    .topbar-btn {
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #8a9aaa !important;
        letter-spacing: 0.02em !important;
        padding: 4px 10px !important;
        transition: color 0.15s !important;
    }
    .topbar-btn:hover {
        color: #c8d8e4 !important;
        background: transparent !important;
    }
    /* 고지도 ▼ — 화살표 앞 공백 살짝 넓게 */
    #topbar-ancient-maps-btn {
        letter-spacing: 0.05em !important;
    }
    /* 탑바에서 펼쳐지는 고지도 목록은 지도 우측 상세 패널보다 항상 위에 표시한다. */
    #topbar-ancient-maps-dropdown-menu,
    body.mode-3d #topbar-ancient-maps-dropdown-menu {
        z-index: 160050 !important;
    }
    #rankingBtn {
        color: #ffd75e !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        text-shadow: 0 0 7px rgba(255,196,40,0.5) !important;
    }
    #rankingBtn:hover {
        color: #fff2a8 !important;
        text-shadow: 0 0 10px rgba(255,210,70,0.8) !important;
    }
    /* 로그인 버튼 — 작은 pill 형태 */
    #topbar-login-btn {
        background: rgba(50,75,105,0.45) !important;
        border: 1px solid rgba(100,145,190,0.28) !important;
        border-radius: 6px !important;
        color: #90b4d4 !important;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        padding: 4px 11px !important;
        /* display는 JS로 제어 (display:none / inline-flex 토글) — 여기서 !important로 고정하면 안 됨 */
        align-items: center !important;
        gap: 5px !important;
        transition: background 0.2s, color 0.2s !important;
    }
    #topbar-login-btn:hover {
        background: rgba(70,100,140,0.55) !important;
        color: #bdd4ea !important;
        border-color: rgba(130,175,220,0.4) !important;
    }
    #topbar-login-btn svg { flex-shrink: 0; }
    /* 로그아웃 버튼 */
    #topbar-logout-btn {
        background: rgba(55,28,28,0.4) !important;
        border: 1px solid rgba(170,75,75,0.22) !important;
        border-radius: 6px !important;
        color: #b88080 !important;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        padding: 4px 11px !important;
        transition: background 0.2s, color 0.2s !important;
    }
    #topbar-logout-btn:hover {
        background: rgba(80,40,40,0.55) !important;
        color: #e8a8a8 !important;
    }

    /* ── Map Tile Toggle group ── */
    #map-tile-toggle-group {
        background: rgba(26,26,26,0.82) !important;
        border-color: rgba(255,255,255,0.07) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    .map-tile-btn {
        min-height: 30px !important;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        color: rgba(148,162,174,0.85) !important;
        letter-spacing: 0.03em !important;
        padding: 0 11px !important;
        border-right-color: rgba(255,255,255,0.06) !important;
        transition: background 0.15s, color 0.15s !important;
    }
    .map-tile-btn:hover {
        background: rgba(255,255,255,0.06) !important;
        color: #c4d2dc !important;
    }
    .map-tile-btn.active {
        background: rgba(255,255,255,0.11) !important;
        color: #dce8f0 !important;
        font-weight: 600 !important;
        /* 파란색 대신 밝은 흰색 밑줄로 선택 상태 표시 */
        box-shadow: inset 0 -2px 0 rgba(180,210,240,0.45) !important;
    }

    /* ── Play / Pause buttons ── */
    #timeline-play-controls {
        background: rgba(26,26,26,0.82) !important;
        border-color: rgba(255,255,255,0.07) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    .play-ctrl-btn {
        min-height: 30px !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        color: rgba(148,162,174,0.85) !important;
        padding: 0 11px !important;
        border-right-color: rgba(255,255,255,0.06) !important;
        transition: background 0.15s, color 0.15s !important;
    }
    .play-ctrl-btn:hover {
        background: rgba(255,255,255,0.06) !important;
        color: #c4d2dc !important;
    }
    .play-ctrl-btn.active {
        background: rgba(255,255,255,0.11) !important;
        color: #dce8f0 !important;
        font-weight: 600 !important;
    }

    /* ── SVG icon buttons in left group (search, pin, history) ── */
    #mobile-search-icon-btn svg,
    #coordGotoBtn svg,
    #history-record-topbar-btn svg,
    #king-list-topbar-btn svg,
    #ranking-topbar-btn svg {
        display: block;
        width: 17px;
        height: 17px;
        stroke: #b0bcc8;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    #mobile-search-icon-btn:hover svg,
    #coordGotoBtn:hover svg,
    #history-record-topbar-btn:hover svg,
    #king-list-topbar-btn:hover svg,
    #ranking-topbar-btn:hover svg {
        stroke: #dce8f0;
    }
    #history-record-topbar-btn.active,
    #king-list-topbar-btn.active {
        background: rgba(146,105,35,.32) !important;
        border-color: rgba(224,180,83,.75) !important;
    }
    #history-record-topbar-btn.active svg,
    #king-list-topbar-btn.active svg { stroke:#f0cd78 !important; }

    /* 주요 상세·목록 패널의 닫기 버튼을 하나의 규격으로 통일 */
    .app-panel-close-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(232,193,105,.68) !important;
        border-radius: 8px !important;
        background: rgba(8,11,16,.9) !important;
        color: #fff3cf !important;
        font-family: Arial, sans-serif !important;
        font-size: 22px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        text-align: center !important;
        text-shadow: none !important;
        text-indent: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 500 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.04) !important;
        backdrop-filter: blur(7px) !important;
        -webkit-backdrop-filter: blur(7px) !important;
    }
    .app-panel-close-btn:hover,
    .app-panel-close-btn:focus-visible {
        border-color: #ffd675 !important;
        background: rgba(151,104,24,.92) !important;
        color: #fff !important;
        outline: none !important;
    }

    @media (max-width: 967px) {
        #top-bar-container { overflow: visible !important; z-index: 160300 !important; }
        #topbar-left-group,
        #coord-goto-wrap { overflow: visible !important; }
        #coordGotoBox {
            position: fixed !important;
            top: 92px !important;
            right: 8px !important;
            left: 8px !important;
            width: auto !important;
            max-width: none !important;
            white-space: normal !important;
            z-index: 160200 !important;
            box-sizing: border-box !important;
        }
        #mobile-search-overlay {
            top: 92px !important;
            right: 8px !important;
            left: 8px !important;
            width: auto !important;
            max-height: calc(100dvh - 100px) !important;
            border: 1px solid rgba(100,160,220,.3) !important;
            border-radius: 8px !important;
            z-index: 160200 !important;
            box-sizing: border-box !important;
        }
        #coordGotoBox > div:nth-child(2) { width: 100% !important; }
        #coordGotoInput { width: auto !important; min-width: 0 !important; flex: 1 1 auto !important; }
        #newsletter-popup-overlay {
            top: 88px !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            height: calc(100dvh - 88px) !important;
            z-index: 160200 !important;
        }
        #newsletter-popup-iframe {
            width: 100vw !important;
            max-width: 100vw !important;
            height: calc(100dvh - 88px) !important;
            border-radius: 0 !important;
        }
        #newsletter-popup-close {
            position: fixed !important;
            top: 96px !important;
            right: 10px !important;
            z-index: 160201 !important;
        }
        .app-panel-close-btn {
            flex-basis: 36px !important;
            width: 36px !important;
            min-width: 36px !important;
            height: 36px !important;
            min-height: 36px !important;
        }
    }
    body.force-mobile #top-bar-container { overflow: visible !important; z-index: 160300 !important; }
    body.force-mobile #topbar-left-group,
    body.force-mobile #coord-goto-wrap { overflow: visible !important; }
    body.force-mobile #coordGotoBox {
        position: fixed !important;
        top: 92px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
        white-space: normal !important;
        z-index: 160200 !important;
        box-sizing: border-box !important;
    }
    body.force-mobile #mobile-search-overlay {
        top: 92px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-height: calc(100dvh - 100px) !important;
        border: 1px solid rgba(100,160,220,.3) !important;
        border-radius: 8px !important;
        z-index: 160200 !important;
        box-sizing: border-box !important;
    }
    body.force-mobile #coordGotoBox > div:nth-child(2) { width: 100% !important; }
    body.force-mobile #coordGotoInput { width: auto !important; min-width: 0 !important; flex: 1 1 auto !important; }
    body.force-mobile #newsletter-popup-overlay {
        top: 88px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: calc(100dvh - 88px) !important;
        z-index: 160200 !important;
    }
    body.force-mobile #newsletter-popup-iframe {
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100dvh - 88px) !important;
        border-radius: 0 !important;
    }
    body.force-mobile #newsletter-popup-close {
        position: fixed !important;
        top: 96px !important;
        right: 10px !important;
        z-index: 160201 !important;
    }