.leaflet-popup-content-wrapper {
        background: rgba(20, 30, 44, 0.93);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #d8cfc4;
        border: 1px solid rgba(180, 140, 80, 0.35);
        border-radius: 6px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.04);
        z-index: 10000 !important;
        transition: transform 0.1s ease-out;
    }
    /* 산지/서식지 팝업 편집 버튼 — 편집 모드일 때만 표시 */
    .resource-edit-btn { display: none !important; }
    body.edit-mode .resource-edit-btn { display: inline-block !important; }

    /* [playback] 재생 중 자주 갱신되는 영역 — opacity 전환으로 깜빡임 완화 */
    #timeLabelDisplay,
    .leaflet-popup-content,
    #map-history-records {
        transition: opacity 0.12s ease-out;
    }
    /* [playback] 재생 중 hover 툴팁 숨김 */
    body.playback-mode .leaflet-tooltip {
        display: none !important;
    }
    /* [playback] 재생 중 모든 Leaflet 팝업 숨김 (openPopup 훅 보조) */
    body.playback-mode .leaflet-popup {
        display: none !important;
    }

    /* === [playback flicker fix] 재생 중 마커 이미지 단계별 숨김 === */

    /* 재생 중 모든 마커 트랜지션·애니메이션 정지 (깜빡임 원인 제거) */
    body.playback-mode .leaflet-marker-icon,
    body.playback-mode .leaflet-marker-icon * {
        transition: none !important;
        animation-play-state: paused !important;
    }

    /* Mode 1 (월): 이미지만 살짝 페이드, 텍스트 유지 */
    body.playback-mode[data-playback-mode="1"] .leaflet-marker-icon img {
        opacity: 0.4;
    }

    /* Mode 2 (년) / Mode 3 (10년): 이미지·SVG 완전 숨김 */
    body.playback-mode[data-playback-mode="2"] .leaflet-marker-icon img,
    body.playback-mode[data-playback-mode="3"] .leaflet-marker-icon img,
    body.playback-mode[data-playback-mode="2"] .leaflet-marker-icon svg,
    body.playback-mode[data-playback-mode="3"] .leaflet-marker-icon svg {
        visibility: hidden;
    }

    /* capital-marker 배경이미지 숨김 (빠른 속도) */
    body.playback-mode[data-playback-mode="2"] .capital-marker .city-name,
    body.playback-mode[data-playback-mode="3"] .capital-marker .city-name {
        background-image: none !important;
        background-color: rgba(0,0,0,0.2);
    }

    /* 전투/군사 마커: 이미지만 숨기고 마커 자체는 70% 불투명 유지 */
    body.playback-mode[data-playback-mode="2"] .battle-marker,
    body.playback-mode[data-playback-mode="3"] .battle-marker,
    body.playback-mode[data-playback-mode="2"] .custom-flag-marker,
    body.playback-mode[data-playback-mode="3"] .custom-flag-marker {
        opacity: 0.7;
    }

    /* 정지 후 부드러운 복원 */
    body:not(.playback-mode) .leaflet-marker-icon img {
        transition: opacity 0.2s ease-in-out;
    }
    .leaflet-popup-tip {
        background: rgba(20, 30, 44, 0.93) !important;
        border: none !important;
        box-shadow: none !important;
    }
    .leaflet-popup-content {
        font-family: 'Noto Serif KR', serif;
        margin: 10px 14px;
        line-height: 1.6;
        white-space: pre-wrap;
        word-wrap: break-word;
        text-align: left;
        max-height: 300px;
        overflow-y: auto;
        color: #d8cfc4;
        font-size: 12px;
    }
    /* 팝업 내부 b 태그 */
    .leaflet-popup-content b {
        color: #f0e2c0;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.02em;
    }
    /* 팝업 내부 small */
    .leaflet-popup-content small {
        color: #9aabbd !important;
        font-weight: 400 !important;
        font-size: 11px !important;
    }
    /* 팝업 닫기 버튼 */
    .leaflet-popup-close-button {
        color: #b8a87a !important;
        font-size: 16px !important;
        padding: 2px 4px !important;
    }
    .leaflet-popup-close-button:hover {
        color: #f0e2c0 !important;
    }
    /* 팝업 최대 높이 */
    .leaflet-popup-content-wrapper {
        max-height: 380px;
    }
    .leaflet-popup {
        z-index: 10000 !important;
    }
    /* 스크롤바 다크 테마 */
    .leaflet-popup-content::-webkit-scrollbar {
        width: 4px;
    }
    .leaflet-popup-content::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.05);
        border-radius: 2px;
    }
    .leaflet-popup-content::-webkit-scrollbar-thumb {
        background: rgba(180,140,80,0.4);
        border-radius: 2px;
    }

    /* 콤팩트 팝업 (자연 지형용) — 패딩만 조정, 배경은 전역 스타일 사용 */
    .compact-popup .leaflet-popup-content-wrapper {
        padding: 2px 6px !important;
    }
    /* 3D 지도 MapLibre 팝업 스타일 */
    .ml3d-popup .maplibregl-popup-content {
        background: rgba(12,10,22,0.93) !important;
        border: 1px solid rgba(255,200,80,0.3) !important;
        border-radius: 8px !important;
        color: #e8d9b8 !important;
        padding: 10px 14px !important;
        font-size: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.7) !important;
        backdrop-filter: blur(10px);
    }
    .ml3d-popup .maplibregl-popup-tip { border-top-color: rgba(12,10,22,0.93) !important; }
    .ml3d-popup .maplibregl-popup-close-button {
        color: #ccc !important;
        font-size: 18px !important;
        line-height: 1 !important;
        padding: 4px 8px !important;
        top: 2px !important;
        right: 2px !important;
    }
    .ml3d-popup .maplibregl-popup-close-button:hover { color: #fff !important; }
    /* 팝업은 항상 마커·레이블 위 최상위 */
    .maplibregl-popup { z-index: 99999 !important; }

    /* 줌에 따라 마커 크기 변화 — 지도에 고정된 느낌 */
    .ml3d-scale-marker {
        transform-origin: bottom center;
        transform: scale(var(--ml3d-zoom-scale, 1.0));
        will-change: transform;
    }

    /* ══════════════════════════════════════════════
       body.mode-3d : 3D 모드 진입 시 2D UI 전체 올리기
       mlOverlay z-index=2500 위에 모든 UI를 표시
    ══════════════════════════════════════════════ */
    body.mode-3d #top-bar-container {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important;
        z-index: 2610 !important;
    }
    body.mode-3d #map-tile-toggle-group {
        position: fixed !important;
        z-index: 2610 !important;
        /* --topbar-h는 :root에서 46px 고정 선언 — 모든 모드 공통 */
        top: var(--topbar-h, 46px) !important;
        right: 0 !important;
    }
    body.mode-3d #timeline-play-controls {
        position: fixed !important;
        z-index: 2610 !important;
        top: var(--topbar-h, 46px) !important;
    }
    body.mode-3d #map3d-ctrl           { z-index: 2610 !important; }
    body.mode-3d #bgm-mini-bar         { z-index: 2610 !important; }
    body.mode-3d #koreamanri-logo      { z-index: 2610 !important; }
    body.mode-3d #rightPanel           { z-index: 2630 !important; }
    body.mode-3d #topbar-ancient-maps-dropdown-container { z-index: 2650 !important; }
    body.mode-3d #topbar-ancient-maps-dropdown-menu      { z-index: 2650 !important; }
    /* 3D 모드에서 MapLibre 내장 컨트롤 숨김 — 커스텀 버튼 사용 */
    body.mode-3d #mlOverlay .maplibregl-ctrl-bottom-left {
        display: none !important;
    }
    body.mode-3d #mlOverlay .maplibregl-ctrl-top-right {
        display: none !important;
    }
    body.mode-3d #hamburger-menu-panel { z-index: 2620 !important; }
    body.mode-3d #hamburger-menu-overlay { z-index: 2615 !important; }
    body.mode-3d #timeline-control     { z-index: 2600 !important; }
    body.mode-3d #timeline-container   { z-index: 2600 !important; }
    /* 3D 조작 패널의 연도 입력과 중복되는 하단 날짜 문구는 숨긴다. */
    body.mode-3d #current-year-display { display: none !important; }
    body.mode-3d #rankingDisplay       { z-index: 2600 !important; }
    body.mode-3d #bottom-vignette      { z-index: 2600 !important; }
    /* 3D 모드 성 마커 순서: 위→아래 = 제목 → 깃발 → 성아이콘 */
    body.mode-3d .cm-wrap { flex-direction: column !important; }
    body.mode-3d .cm-name { order: 1 !important; }
    body.mode-3d .cm-flag { order: 2 !important; }
    body.mode-3d .cm-icon { order: 3 !important; }
    body.mode-3d #event-sidebar        { z-index: 2600 !important; }
    body.mode-3d #object-detail-panel  { z-index: 2620 !important; }
    body.mode-3d #country-detail-panel { z-index: 2620 !important; }
    body.mode-3d #map-king-panel       { z-index: 2600 !important; }
    body.mode-3d #map-history-panel    { z-index: 2600 !important; }
    body.mode-3d #history-caption-panel{ z-index: 2600 !important; }
    body.mode-3d #activity-feed-panel,
    body.mode-3d #activity-notice-ticker { z-index: 2600 !important; }
    body.mode-3d #heroIllustWrap       { z-index: 149900 !important; }
    body.mode-3d #heroSidebar          { z-index: 150000 !important; }
    body.mode-3d #mobile-tile-layer-control { z-index: 2600 !important; }
    .compact-popup .leaflet-popup-content {
        margin: 6px 10px !important;
        font-size: 12px !important;
    }
    .compact-popup .leaflet-popup-tip-container {
        margin-top: -1px !important;
    }
    .compact-popup .leaflet-popup-content img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 4px !important;
        margin-top: 5px !important;
        border: 1px solid rgba(180,140,80,0.3);
    }

    /* 🚩 [유지] 영토 폴리곤 부드러운 전환 효과 */
    .leaflet-interactive {
        transition: fill-opacity 0.5s ease, opacity 0.5s ease, fill 0.5s ease;
    }

    /* 🚩 [추가] 역사적 사건 마커 스타일 */
    .historical-event-marker {
        position: relative;
    }

    .historical-event-marker::before {
        content: '';
        position: absolute;
        top: -16px; /* 슬라이더 바로 위에 겹치지 않게 위쪽으로 이동 */
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 6px solid rgba(30, 42, 56, 0.95);
        z-index: 11;

    }

    /* 🚩 [추가] 역사적 사건 툴팁 스타일 */
    .historical-event-tooltip {
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }