/* 🚩 [수정] 최상단 바 (로그인 정보 등) 스타일 */
    #top-bar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 3px 16px;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 1200;
        background: #1a1a1a;
    }

    /* 햄버거 + 검색창 왼쪽 그룹 */
    #topbar-left-group {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        z-index: 1102; /* 타이틀(z-index:0)보다 위 */
    }
    
    /* 🍔 햄버거 메뉴 스타일 */
    #hamburger-menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 34px;
        background: rgba(30, 42, 56, 0.95);
        border: 1px solid #5d7185;
        border-radius: 7px;
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0;
        gap: 4px;
        z-index: 1101;
    }
    
    #hamburger-menu-btn:hover {
        background: rgba(50, 62, 76, 0.95);
        border-color: #00aaff;
    }
    
    #hamburger-menu-btn span {
        display: block;
        width: 22px;
        height: 2px;
        background: #ecf0f1;
        transition: all 0.3s ease;
        border-radius: 2px;
    }
    
    #hamburger-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }
    
    #hamburger-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }
    
    #hamburger-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* 🔍 탑바 검색창 */
    #topbar-search-box {
        position: relative;
        display: flex;
        align-items: center;
        height: 36px;
        background: #0e1a26;
        border: 1px solid #2a3a4a;
        border-radius: 8px;
        overflow: visible; /* 🚩 [수정] hidden → visible: 검색 드롭다운 클리핑 방지 */
        box-shadow: 0 2px 12px rgba(0,0,0,0.4);
        margin-left: 6px;
        flex-shrink: 0;
        z-index: 1102;
    }

    #topbarSearchInput {
        height: 36px;
        width: 170px;
        padding: 0 12px;
        font-size: 12px;
        font-family: 'Noto Serif KR', serif;
        background: transparent;
        border: none;
        color: #c0d4e8;
        outline: none;
        transition: width 0.3s;
        box-sizing: border-box;
        border-radius: 8px 0 0 8px; /* 🚩 [추가] overflow:visible 이후 모서리 유지 */
    }

    #topbarSearchInput::placeholder {
        color: #3a5068;
        font-size: 11px;
    }

    #topbarSearchInput:focus {
        width: 210px;
    }

    #topbarSearchBtn {
        height: 36px;
        width: 36px;
        background: transparent;
        border: none;
        border-left: 1px solid #2a3a4a;
        color: #5a7a9a;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
        border-radius: 0 8px 8px 0; /* 🚩 [추가] overflow:visible 이후 모서리 유지 */
    }

    #topbarSearchBtn:hover {
        background: rgba(0, 170, 255, 0.1);
        color: #00aaff;
    }

    #topbarSearchResults {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 300px;
        max-height: 360px;
        overflow-y: auto;
        background: rgba(30, 42, 56, 0.98);
        backdrop-filter: blur(10px);
        border: 1px solid #5d7185;
        border-radius: 8px;
        z-index: 2147483640;
        display: none;
        font-size: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        padding-bottom: 4px;
    }

    /* 상세·역사 패널의 동적 레이어보다 검색 결과가 항상 위에 보이도록 한다. */
    @media (min-width: 968px) {
        body:not(.force-mobile) #top-bar-container {
            overflow: visible !important;
            z-index: 2147483600 !important;
        }
    }

    #topbarSearchResults .topbar-result-item {
        padding: 7px 12px;
        color: #ecf0f1;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        transition: background 0.15s;
    }

    #topbarSearchResults .topbar-result-item:last-child {
        border-bottom: none;
    }

    #topbarSearchResults .topbar-result-item:hover {
        background: rgba(0, 170, 255, 0.2);
    }

    /* 모바일에서는 탑바 검색창 숨김 (햄버거 메뉴 내부에 있음) */
    body.force-mobile #topbar-search-box {
        display: none;
    }
    body.force-mobile #topbar-left-group {
        gap: 9px;
        align-items: center;
    }

    /* 📱 모바일 검색 아이콘 버튼 (탑바 우측) */
    #mobile-search-icon-btn {
        display: none;
    }

    /* ── 모바일 탑바 버튼 공통 규격화 ──
       순서: [햄버거] - [돋보기] - [위치핀] - [역사기록]
       기준 사이즈: 터치하기 편한 42×42px, 둥근 사각형 */
    body.force-mobile #hamburger-menu-btn,
    body.force-mobile #mobile-search-icon-btn,
    body.force-mobile #coordGotoBtn,
    body.force-mobile #history-record-topbar-btn,
    body.force-mobile #king-list-topbar-btn,
    body.force-mobile #ranking-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        background: #1a1a1a !important;
        border: 1px solid #5d7185 !important;
        border-radius: 8px !important;
        color: #ecf0f1 !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        transition: background 0.2s, border-color 0.2s !important;
    }
    body.force-mobile #hamburger-menu-btn:hover,
    body.force-mobile #mobile-search-icon-btn:hover,
    body.force-mobile #coordGotoBtn:hover,
    body.force-mobile #history-record-topbar-btn:hover,
    body.force-mobile #king-list-topbar-btn:hover,
    body.force-mobile #ranking-topbar-btn:hover {
        background: rgba(0, 170, 255, 0.15) !important;
        border-color: #00aaff !important;
    }

    /* 모바일에서 검색/역사기록 버튼 노출 */
    body.force-mobile #mobile-search-icon-btn,
    body.force-mobile #history-record-topbar-btn,
    body.force-mobile #king-list-topbar-btn,
    body.force-mobile #ranking-topbar-btn {
        display: flex !important;
    }

    /* coord-goto-wrap: 모바일에서 패딩/갭 제거 */
    body.force-mobile #coord-goto-wrap {
        gap: 0 !important;
    }

    /* 📱 모바일 검색 오버레이 */
    #mobile-search-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 12000;
        background: #1a1a1a;
        padding: 10px 12px 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.7);
        flex-direction: column;
        gap: 0;
    }
    #mobile-search-overlay.open {
        display: flex;
    }
    #mobile-search-top-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    #mobileSearchInput {
        flex: 1;
        height: 42px;
        padding: 0 12px;
        font-size: 14px;
        font-family: 'Noto Serif KR', serif;
        background: rgba(40, 55, 70, 0.98);
        border: 1px solid #5d7185;
        border-radius: 8px;
        color: #ecf0f1;
        outline: none;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        color: #7f8c8d;
    }
    #mobileSearchInput:focus {
        border-color: #00aaff;
    }
    #mobileSearchCancelBtn {
        flex-shrink: 0;
        height: 42px;
        padding: 0 14px;
        background: rgba(60, 30, 30, 0.9);
        border: 1px solid rgba(220, 100, 100, 0.4);
        border-radius: 8px;
        color: #e8a0a0;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }
    #mobileSearchResults {
        max-height: 55vh;
        overflow-y: auto;
        margin-top: 6px;
        border-radius: 8px;
        background: rgba(25, 38, 52, 0.98);
        border: 1px solid rgba(93, 113, 133, 0.5);
        display: none;
        -webkit-overflow-scrolling: touch;
    }
    #mobileSearchResults .topbar-result-item {
        padding: 10px 14px;
        color: #ecf0f1;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        font-size: 13px;
        -webkit-tap-highlight-color: transparent;
    }
    #mobileSearchResults .topbar-result-item:last-child {
        border-bottom: none;
    }
    #mobileSearchResults .topbar-result-item:active {
        background: rgba(0, 170, 255, 0.25);
    }
    #mobileSearchResults .mobile-result-section-title {
        padding: 7px 14px 3px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        opacity: 0.85;
    }
    
    /* 🍔 슬라이딩 메뉴 패널 */
    #hamburger-menu-panel {
        position: fixed;
        top: 0;
        left: -350px;
        width: 350px;
        height: 100vh;
        background: #1a1a1a;
        backdrop-filter: none;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
        transition: left 0.3s ease;
        z-index: 10000;
        overflow-y: auto;
        padding: 20px;
        box-sizing: border-box;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.08) transparent;
    }
    #hamburger-menu-panel::-webkit-scrollbar {
        width: 3px;
    }
    #hamburger-menu-panel::-webkit-scrollbar-track {
        background: transparent;
    }
    #hamburger-menu-panel::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.10);
        border-radius: 2px;
    }
    #hamburger-menu-panel::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.22);
    }
    
    #hamburger-menu-panel.active {
        left: 0;
    }
    
    #hamburger-menu-panel h3 {
        color: #f5e9d2;
        font-size: 16px;
        margin: 20px 0 10px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    
    #hamburger-menu-panel .menu-section {
        margin-bottom: 20px;
    }
    
    #hamburger-menu-panel label {
        display: block;
        color: #ddd;
        font-size: 13px;
        margin-bottom: 5px;
    }
    
    #hamburger-menu-panel input[type="text"],
    #hamburger-menu-panel input[type="number"],
    #hamburger-menu-panel select {
        width: 100%;
        padding: 8px;
        font-size: 13px;
        border: 1px solid #5d7185;
        border-radius: 4px;
        background: rgba(50, 62, 76, 0.5);
        color: #ecf0f1;
        box-sizing: border-box;
    }
    
    #hamburger-menu-panel button {
        width: 100%;
        padding: 10px;
        margin: 5px 0;
        font-size: 13px;
        border: 1px solid #5d7185;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease;
        background: rgba(50, 62, 76, 0.8);
        color: #ecf0f1;
    }
    
    #hamburger-menu-panel button:hover {
        background: rgba(70, 82, 96, 0.9);
        border-color: #00aaff;
    }

    #hamburger-menu-panel {
        width: min(372px, calc(100vw - 18px));
        max-width: 100vw;
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        padding: 14px;
        background:
            linear-gradient(180deg, rgba(23, 26, 29, 0.98), rgba(13, 16, 19, 0.98)),
            #151719;
        border-right: 1px solid rgba(212, 168, 67, 0.16);
        box-shadow: 12px 0 36px rgba(0,0,0,0.58);
    }
    #hamburger-menu-panel.active {
        transform: translateX(0);
    }
    .hm-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 4px 14px;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(212,168,67,0.16);
    }
    .hm-logo {
        height: 31px;
        width: auto;
        opacity: 0.95;
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
    }
    .hm-subtitle {
        color: #8b9aaa;
        font-size: 11px;
        white-space: nowrap;
    }
    #hamburger-menu-panel .hm-close-btn {
        display: none;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.16);
        border-radius: 10px;
        background: rgba(255,255,255,0.06);
        color: #eef3f7;
        font-size: 24px;
        font-weight: 400;
        line-height: 1;
        flex: 0 0 auto;
        -webkit-tap-highlight-color: transparent;
    }
    body.force-mobile #hamburger-menu-panel .hm-close-btn {
        display: flex;
    }
    @media (max-width: 768px) {
        #hamburger-menu-panel .hm-close-btn {
            display: flex;
        }
    }
    #hamburger-menu-panel h3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 9px;
        padding: 0;
        border: 0;
        color: #ead8ae;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0;
    }
    #hamburger-menu-panel .menu-section {
        margin: 0 0 12px;
        padding: 12px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 8px;
        background: rgba(255,255,255,0.035);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
    }
    .hm-font-size-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 46px 54px;
        align-items: center;
        gap: 9px;
    }
    #hamburger-menu-panel .hm-font-size-row > label {
        margin: 0;
        color: #d9c58e;
        font-size: 12px;
        font-weight: 700;
    }
    #menu-font-size-slider {
        width: 100%;
        accent-color: #d4a843;
        cursor: pointer;
    }
    #menu-font-size-value {
        color: #f5d98b;
        font-size: 11px;
        text-align: right;
    }
    #hamburger-menu-panel #menu-font-size-reset {
        min-height: 30px;
        margin: 0;
        padding: 4px 7px;
        font-size: 10px;
    }
    .hm-font-size-preview {
        margin-top: 8px;
        color: #9eacb9;
        font-size: 11px;
        line-height: 1.5;
    }
    .hm-field-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }
    .hm-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }
    #hamburger-menu-panel .hm-field label,
    #hamburger-menu-panel .hm-field-label {
        margin: 0;
        color: #8fa1b2;
        font-size: 11px;
    }
    #hamburger-menu-panel input[type="text"],
    #hamburger-menu-panel input[type="number"],
    #hamburger-menu-panel select {
        min-height: 34px;
        padding: 7px 9px;
        border-radius: 6px;
        border-color: rgba(120, 142, 164, 0.38);
        background: rgba(8, 13, 18, 0.58);
        color: #e7edf2;
    }
    .hm-layer-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    #hamburger-menu-panel .hm-layer-grid label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 32px;
        margin: 0;
        padding: 6px 8px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 7px;
        background: rgba(12,18,24,0.58);
        color: #d7dde3;
        font-size: 12px;
        line-height: 1.2;
        cursor: pointer;
        box-sizing: border-box;
    }
    #hamburger-menu-panel .hm-layer-grid label:hover {
        border-color: rgba(212,168,67,0.34);
        background: rgba(212,168,67,0.08);
    }
    #hamburger-menu-panel .hm-layer-grid input[type="checkbox"] {
        order: 2;
        accent-color: #d4a843;
        flex: 0 0 auto;
    }
    #hamburger-menu-panel .hm-layer-grid label.hm-unreleased {
        cursor: default;
        opacity: 0.52;
        color: #87919b;
        border-style: dashed;
    }
    #hamburger-menu-panel .hm-layer-grid label.hm-unreleased:hover {
        background: rgba(12,18,24,0.58);
        border-color: rgba(255,255,255,0.08);
    }
    .hm-badge {
        margin-left: auto;
        padding: 1px 5px;
        border-radius: 999px;
        background: rgba(120, 132, 145, 0.18);
        color: #9ca8b3;
        font-size: 9px;
        font-weight: 700;
        white-space: nowrap;
    }
    .hm-action-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }
    .hm-action-grid .hm-wide {
        grid-column: 1 / -1;
    }
    #hamburger-menu-panel button {
        min-height: 36px;
        margin: 0;
        padding: 8px 10px;
        border-radius: 7px;
        border-color: rgba(120,142,164,0.38);
        background: rgba(27, 38, 49, 0.72);
        color: #e8edf2;
        font-weight: 600;
    }
    #hamburger-menu-panel button.primary,
    #hamburger-menu-panel .hm-primary {
        background: rgba(212,168,67,0.15);
        border-color: rgba(212,168,67,0.44);
        color: #f2d68a;
    }
    .hm-divider {
        height: 1px;
        margin: 10px 0;
        background: rgba(255,255,255,0.08);
        border: 0;
    }
    
    /* 🍔 메뉴 오버레이 (배경 어둡게) */
    #hamburger-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1099;
        display: none;
        transition: opacity 0.3s ease;
    }
    
    #hamburger-menu-overlay.active {
        display: block;
    }

    /* 모바일 지도 이탈 확인 */
    #mobile-map-exit-dialog {
        position: fixed;
        inset: 0;
        z-index: 20000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 22px;
        box-sizing: border-box;
        background: rgba(0,0,0,0.68);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
    #mobile-map-exit-dialog.active {
        display: flex;
    }
    #mobile-map-exit-dialog .map-exit-card {
        width: min(340px, 100%);
        padding: 22px 18px 16px;
        box-sizing: border-box;
        border: 1px solid rgba(212,168,67,0.35);
        border-radius: 14px;
        background: #171b1f;
        box-shadow: 0 18px 55px rgba(0,0,0,0.65);
        color: #edf2f5;
        text-align: center;
    }
    #mobile-map-exit-dialog .map-exit-title {
        margin: 0 0 8px;
        color: #f1d58c;
        font-size: 17px;
    }
    #mobile-map-exit-dialog .map-exit-message {
        margin: 0 0 20px;
        color: #adb8c1;
        font-size: 13px;
        line-height: 1.55;
    }
    #mobile-map-exit-dialog .map-exit-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }
    #mobile-map-exit-dialog button {
        min-height: 46px;
        border-radius: 9px;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(255,255,255,0.07);
        color: #e8edf1;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #mobile-map-exit-dialog #mobile-map-exit-confirm {
        border-color: rgba(212,168,67,0.48);
        background: rgba(212,168,67,0.16);
        color: #f3d98e;
    }

    #territory-geom-edit-bar {
        position: fixed;
        left: 50%;
        bottom: 82px;
        transform: translateX(-50%);
        z-index: 3200;
        display: none;
        width: min(720px, calc(100vw - 24px));
        padding: 10px 12px;
        background: rgba(13, 24, 38, 0.96);
        border: 1px solid rgba(212, 168, 67, 0.55);
        border-radius: 7px;
        box-shadow: 0 10px 28px rgba(0,0,0,0.45);
        color: #e8edf2;
        font-size: 12px;
    }

    #territory-geom-edit-bar.open {
        display: block;
    }

    #territory-geom-edit-title {
        color: #f5d98b;
        font-weight: 700;
        margin-bottom: 5px;
        font-size: 13px;
    }

    #territory-geom-edit-msg {
        color: #b7c6d6;
        min-height: 16px;
        line-height: 1.35;
    }

    #territory-geom-edit-msg.ok { color: #6fcf97; }
    #territory-geom-edit-msg.err { color: #f87171; }
    #territory-geom-edit-msg.dirty { color: #f2c94c; }

    #territory-geom-edit-actions {
        display: flex;
        gap: 8px;
        margin-top: 8px;
        justify-content: flex-end;
    }

    #territory-geom-edit-actions button,
    #territory-geom-layer-picker button,
    #territory-geom-layer-picker select,
    .territory-popup-edit-btn {
        border: 1px solid #5d7185;
        border-radius: 4px;
        cursor: pointer;
        background: rgba(50, 62, 76, 0.9);
        color: #ecf0f1;
        transition: all .18s ease;
    }

    #territory-geom-edit-actions button {
        padding: 6px 10px;
        font-size: 12px;
    }

    #territory-geom-layer-multi .tg-group-row {
        display: grid;
        grid-template-columns: 58px 70px minmax(220px, 1fr);
        gap: 8px;
        align-items: center;
        padding: 5px 7px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    #territory-geom-edit-actions button.primary {
        background: rgba(212, 168, 67, 0.16);
        border-color: #d4a843;
        color: #f5d98b;
    }

    #territory-geom-edit-actions button.danger {
        background: rgba(231, 76, 60, 0.13);
        border-color: #e74c3c;
        color: #ffaaa2;
    }

    #territory-geom-eraser-btn.active,
    #territory-geom-add-vertex-btn.active,
    #territory-geom-snap-btn.active,
    #territory-geom-pair-btn.active,
    #territory-geom-coast-btn.active,
    #territory-geom-boundary-select-btn.active {
        background: rgba(231, 76, 60, 0.34);
        border-color: #ff776b;
        color: #ffd2ce;
        box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.14);
    }

    #territory-geom-edit-actions button:hover,
    .territory-popup-edit-btn:hover {
        border-color: #00aaff;
        background: rgba(70, 82, 96, 0.95);
    }

    .territory-popup-edit-btn {
        margin-top: 7px;
        width: 100%;
        padding: 5px 8px;
        font-size: 11px;
    }

    @media (max-width: 967px) {
        #territory-geom-edit-bar {
            bottom: 106px;
            width: calc(100vw - 18px);
            padding: 9px 10px;
        }
    }
    /* 🚩 [수정] 제목 컨테이너 스타일 */
    #title-container {
        text-align: center;
        padding: 0 20px 10px; /* 제목 아래에만 패딩 적용 */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* 🚩 [추가] 지도 타일 컴팩트 토글 그룹 */
    #map-tile-toggle-group {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1001;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        background: rgba(10, 18, 30, 0.70);
        border: 1px solid rgba(255,255,255,0.10);
        border-top: none;
        border-right: none;
        border-radius: 0 0 0 5px;
        overflow: hidden;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    /* 🚩 [추가] 재생/일시정지 버튼 그룹 — 타일 토글 좌측 */
    #timeline-play-controls {
        position: absolute;
        top: 0;
        right: 0; /* JS로 타일토글 너비만큼 offset 조정 */
        z-index: 1001;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        background: rgba(10, 18, 30, 0.70);
        border: 1px solid rgba(255,255,255,0.10);
        border-top: none;
        border-right: none;
        border-radius: 0 0 0 5px;
        overflow: hidden;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        /* 타일 토글 바로 왼쪽에 위치하도록 transform 사용 — JS로 right 설정 */
    }
    .play-ctrl-btn {
        all: unset;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 26px;
        padding: 0 8px;
        font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
        font-size: 11px;
        font-weight: 400;
        color: rgba(200,200,200,0.80);
        cursor: pointer;
        white-space: nowrap;
        border-right: 1px solid rgba(255,255,255,0.08);
        transition: background 0.15s, color 0.15s;
        line-height: 1;
        box-sizing: border-box;
    }
    .play-ctrl-btn:last-child { border-right: none; }
    .play-ctrl-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }
    .play-ctrl-btn.active { background: rgba(255,255,255,0.16); color: #fff; }
    .map-tile-btn {
        all: unset;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 26px;
        padding: 0 8px;
        font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
        font-size: 10px;
        font-weight: 400;
        color: rgba(180,180,180,0.75);
        cursor: pointer;
        white-space: nowrap;
        border-right: 1px solid rgba(255,255,255,0.08);
        transition: background 0.15s, color 0.15s;
        box-sizing: border-box;
    }
    .map-tile-btn:last-child {
        border-right: none;
    }
    .map-tile-btn:hover {
        background: rgba(255,255,255,0.08);
        color: #ddd;
    }
    .map-tile-btn.active {
        background: rgba(255,255,255,0.14);
        color: #fff;
        font-weight: 500;
    }

    #top-right-auth {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    #top-right-auth #bgm-mini-bar {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        flex: 0 1 auto;
        max-width: 220px;
        height: 32px !important;
        padding: 0 4px !important;
        gap: 5px !important;
    }
    #top-right-auth #bgm-mini-title {
        max-width: 105px !important;
    }

    /* 🚩 [추가] 고지도 드롭다운 아이템 고딕 폰트 */
    #topbar-ancient-maps-dropdown-menu button,
    #topbar-ancient-maps-dropdown-menu a,
    #topbar-ancient-maps-dropdown-menu div {
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
        font-weight: 400 !important;
    }
    /* 🚩 [추가] 햄버거 메뉴 고딕 폰트 */
    #hamburger-menu-panel {
        font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    }
    #hamburger-menu-panel button, #hamburger-menu-panel label, #hamburger-menu-panel h3 {
        font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    }

    /* 🚩 [추가] 탑바 전용 버튼 공통 스타일 */
    .topbar-btn {
        all: unset;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 3px 8px;
        font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
        font-size: 11px;
        font-weight: 400;
        color: #c8bfa8;
        background: transparent;
        border: none;
        border-radius: 0;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none;
        letter-spacing: 0;
        transition: color 0.15s;
        text-shadow: none;
        position: relative;
    }
    .topbar-btn:hover {
        background: transparent;
        border: none;
        color: #f0e8d0;
    }
    /* 구분선 대신 버튼 사이 세로선 */
    .topbar-btn + .topbar-btn::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background: rgba(180,160,100,0.25);
    }
    .topbar-btn.topbar-btn-login {
        color: #d4b86a;
    }
    .topbar-btn.topbar-btn-login:hover {
        color: #f5d070;
    }
    .topbar-btn.topbar-btn-logout {
        color: #c88888;
    }
    .topbar-btn.topbar-btn-logout:hover {
        color: #f0a0a0;
    }
    #top-left-icons {
        display: flex; /* 아이콘들을 가로로 나열 */
        gap: 5px;     /* 아이콘 사이의 간격 */
        flex-shrink: 0;
        align-items: center;
    }
    /* 🚩 [수정] 제목 스타일 조정 */
    #title-container h1 {
        margin: 0; /* 기본 마진 제거 */
        display: inline-block;
    }

    /* 🚩 [수정] 컨트롤 패널 전체 글꼴 통일 */
    #controls-wrapper {
        font-family: Arial, sans-serif;
        font-weight: 700;
    }

    /* 🚩 [추가] 한자 제목을 위한 붓글씨 폰트 스타일 */
    .hanja-title {
        font-family: 'Yeon Sung', cursive;
        font-weight: 400;
        font-size: 0.9em; /* 한글과의 조화를 위해 크기 미세 조정 */
    }