#event-overlay {
        position: absolute;
        top: 50%;
        left: 50%; /* 🚩 [수정] leftColumn 내부에서 중앙 정렬 */
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 1);
        color: #e5ff00;
        padding: 20px 40px;
        border-radius: 12px; /* 🚩 [수정] z-index를 매우 높게 설정하여 모든 요소 위에 오도록 함 */
        z-index: 9999;
        font-size: 2.5em;
        /* 🚩 [수정] 텍스트와 이미지를 함께 표시하기 위해 flexbox 사용 */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;

        font-weight: bold;
        text-shadow: 2px 2px 5px #000;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        pointer-events: none; /* 오버레이가 지도 클릭을 막지 않도록 설정 */
        white-space: nowrap;
        border: 0px solid rgba(255, 255, 255, 0.5);
    }
    #event-overlay.visible { opacity: 1; }
    /* 🚩 [추가] 이벤트 오버레이 내 이미지 스타일 */
    #event-overlay-image {
        max-width: 40vw;
        max-height: 25vh;
        border-radius: 8px;
        object-fit: contain;
    }
    /* 🚩 [추가] PC 버전 상단 패널 토글 버튼 스타일 */
    #pcTopPanelToggleBtn {
        display: none; /* 🚩 [수정] 기본적으로 숨기고, 모바일에서만 표시 */
        /* 🚩 [제거] 개별 마진 제거, gap으로 통일 */
        padding: 6px 10px;
        background-color: transparent; /* 배경 투명 */
        font-size: 22px; /* 🚩 [수정] 아이콘 크기 키움 */
        border: none; /* 🚩 [수정] 테두리 제거 */
        color: #dbdbdb; /* 🚩 [추가] 기본 아이콘 색상 */
        color: #00aaff; /* 🚩 [수정] 호버 및 활성 상태 색상 (아이콘 색상 변경) */
    }

    /* 🚩 [추가] 상단 패널 숨김 클래스 */
    /* 🚩 [추가] 오른쪽 패널 숨김 클래스 */
    body.right-panel-hidden #rightPanel {
        flex-basis: 0 !important; /* Force to 0 */
        overflow: hidden;
        padding: 0;
        border: none;
    }
    body.right-panel-hidden #resizer {
        display: none;
    }

    /* 🚩 [수정] 오른쪽 패널 토글 버튼 PC/태블릿/모바일 모두 보이도록 */
    @media (min-width: 901px) {
        #rightPanelToggleBtn {
            writing-mode: vertical-rl;
            top: 10px;
            left: -28px;
            right: auto;
            bottom: auto;
            width: auto;
            height: auto;
            border-radius: 5px 0 0 5px;
            font-size: 12px;
            line-height: 1;
            padding: 10px 5px;
            display: block !important;
        }
    }
    @media (max-width: 900px) {
        #rightPanelToggleBtn {
            display: block !important;
        }
    }
    @media (max-width: 967px) {
        #pcTopPanelToggleBtn { display: block; }

        /* 🚩 모바일: 사관랭킹 패널 숨김 */
        #rankingDisplay { display: none !important; }

        /* 🚩 모바일: tile toggle — fixed 사용 안 함.
           #map 안에 position:absolute;top:0;right:0 그대로 유지.
           #map이 탑바 바로 아래에서 시작하므로 자동으로 픽셀퍼펙트 정렬됨.
           fixed 전환 시 --topbar-h 측정 오차로 gap이 생기기 때문. */

        /* 🚩 모바일: 재생 버튼만 tile toggle 옆에 fixed로 붙임 */
        #timeline-play-controls {
            position: fixed !important;
            top: var(--topbar-h, 46px) !important;
            z-index: 1100 !important;
        }

        /* 모바일용 timeline-sidebar 스타일 */
        /* 모바일 — timeline-sidebar 폭 넓게, 높이 축소 */
        #timeline-sidebar {
            width: min(98vw, 98%) !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
            max-height: 44vh !important;
            bottom: 50px !important;
        }
    }

    /* 📱 모바일 상단 도구막대: 상단바 바로 아래 지도 조작 버튼 한 줄 */
    @media (max-width: 967px) {
        #top-bar-container {
            min-height: 54px !important;
            padding: 6px 8px !important;
            gap: 8px !important;
            overflow: hidden !important;
        }
        #topbar-left-group {
            gap: 6px !important;
            flex: 0 0 auto !important;
        }
        #top-bar-container > img {
            display: none !important;
        }
        #top-right-auth {
            display: flex !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            justify-content: flex-end !important;
            gap: 5px !important;
            overflow: hidden !important;
        }
        #top-right-auth #usernameDisplay {
            display: block !important;
            min-width: 0 !important;
            max-width: 92px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            padding: 0 3px !important;
            font-size: 11px !important;
        }
        #top-right-auth #bgm-mini-title {
            display: none !important;
        }
        #top-right-auth #bgm-mini-bar {
            flex: 0 0 auto !important;
            padding: 0 !important;
        }
        #top-right-auth #topbar-ancient-maps-btn,
        #top-right-auth #topbar-ancient-maps-dropdown-container,
        #top-right-auth #pcTopPanelToggleBtn,
        #top-right-auth #newsletterLink,
        #top-right-auth #rankingBtn {
            display: none !important;
        }
        #top-right-auth #topbar-login-btn,
        #top-right-auth #topbar-logout-btn {
            flex: 0 0 auto !important;
            width: 34px !important;
            height: 34px !important;
            padding: 0 !important;
            justify-content: center !important;
            border-radius: 8px !important;
        }
        #top-right-auth .topbar-auth-label {
            display: none !important;
        }
        #timeline-play-controls,
        #map-tile-toggle-group {
            position: fixed !important;
            top: 54px !important;
            height: 34px !important;
            box-sizing: border-box !important;
            border-radius: 0 !important;
            border: 0 !important;
            border-bottom: 1px solid rgba(255,255,255,.08) !important;
            background: rgba(20,20,20,.88) !important;
            overflow: hidden !important;
            z-index: 1100 !important;
        }
        #timeline-play-controls {
            left: 0 !important;
            right: auto !important;
            width: 25% !important;
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            grid-template-rows: 1fr !important;
        }
        #map-tile-toggle-group {
            left: 25% !important;
            right: 0 !important;
            width: 75% !important;
            display: grid !important;
            grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
            grid-template-rows: 1fr !important;
        }
        #timeline-play-controls .play-ctrl-btn,
        #map-tile-toggle-group .map-tile-btn {
            width: 100% !important;
            min-width: 0 !important;
            min-height: 0 !important;
            height: 34px !important;
            padding: 0 2px !important;
            box-sizing: border-box !important;
            border-radius: 0 !important;
            border-right: 1px solid rgba(255,255,255,.06) !important;
            border-bottom: 1px solid rgba(255,255,255,.06) !important;
            font-size: 10px !important;
        }
        /* 터치/태블릿 폭에서는 마우스용 좌표 추적 말풍선을 노출하지 않는다. */
        #mapCoordTooltip,
        #_cx_lt,
        #_cx_lb,
        #_cx_ll,
        #_cx_lr {
            display: none !important;
        }
    }

    body.force-mobile #top-bar-container {
        min-height: 54px !important;
        padding: 6px 8px !important;
        gap: 8px !important;
        overflow: hidden !important;
    }
    body.force-mobile #topbar-left-group { gap: 6px !important; }
    body.force-mobile #top-bar-container > img {
        display: none !important;
    }
    body.force-mobile #top-right-auth {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        overflow: hidden !important;
    }
    body.force-mobile #top-right-auth #usernameDisplay {
        display: block !important;
        min-width: 0 !important;
        max-width: 92px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        padding: 0 3px !important;
        font-size: 11px !important;
    }
    body.force-mobile #top-right-auth #topbar-ancient-maps-btn,
    body.force-mobile #top-right-auth #topbar-ancient-maps-dropdown-container,
    body.force-mobile #top-right-auth #pcTopPanelToggleBtn,
    body.force-mobile #top-right-auth #newsletterLink,
    body.force-mobile #top-right-auth #rankingBtn {
        display: none !important;
    }
    body.force-mobile #top-right-auth #topbar-login-btn,
    body.force-mobile #top-right-auth #topbar-logout-btn {
        flex: 0 0 auto !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }
    body.force-mobile #top-right-auth .topbar-auth-label {
        display: none !important;
    }
    body.force-mobile #timeline-play-controls,
    body.force-mobile #map-tile-toggle-group {
        position: fixed !important;
        top: 54px !important;
        height: 34px !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        background: rgba(20,20,20,.88) !important;
        overflow: hidden !important;
        z-index: 1100 !important;
    }
    body.force-mobile #timeline-play-controls {
        left: 0 !important;
        right: auto !important;
        width: 25% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: 1fr !important;
    }
    body.force-mobile #map-tile-toggle-group {
        left: 25% !important;
        right: 0 !important;
        width: 75% !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-template-rows: 1fr !important;
    }
    body.force-mobile #timeline-play-controls .play-ctrl-btn,
    body.force-mobile #map-tile-toggle-group .map-tile-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 34px !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border-right: 1px solid rgba(255,255,255,.06) !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
        font-size: 10px !important;
    }