.header-icon img {
            width: 120px;
            height: auto;
            max-width: 100%;
        }
/* 세로가 가로보다 길면(모바일 강제) 모바일 레이아웃 적용 */
body.force-mobile #mainContainer {
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    padding-top: 44px !important; /* 탑바 높이만큼 여백 */
    box-sizing: border-box !important;
}
body.force-mobile #leftColumn {
    flex-basis: 100% !important;
}
body.force-mobile #rightPanel {
    position: fixed !important;
    z-index: 1002;
    background-color: #1e2a38e0;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
body.force-mobile #controls-wrapper {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-top: 0 !important;
    border-bottom: 2px solid #00aaff;
    z-index: 1000 !important;
    background-color: #1e2a38e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 0 0 12px 12px;
    display: block !important;
    transform: none !important;
    animation: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}
body.force-mobile #controls-wrapper.visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.force-mobile #controls-wrapper:not(.visible) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
@keyframes slideDownMenu {
    /* 플로팅 애니메이션 사용 안함 */
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
/* 🚩 [수정] 모바일에서 top-bar를 PC와 동일하게 상단에 유지 */
body.force-mobile #top-bar-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 10px !important;
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1100 !important;
    background-color: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
body.force-mobile #top-left-icons {
    display: none !important;
}
body.force-mobile #main-title {
    display: none !important;
}
body.force-mobile #top-right-auth {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}
/* 모바일 탑바: 사관모집·랭킹 버튼 숨기기 (햄버거 메뉴로 대체) */
body.force-mobile #newsletterLink,
body.force-mobile #rankingBtn {
    display: none !important;
}
/* 모바일 탑바: 고지도 버튼 컴팩트하게 */
body.force-mobile #topbar-ancient-maps-btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
    margin-left: 0 !important;
}
body.force-mobile #topbar-ancient-maps-dropdown-menu {
    min-width: 160px !important;
    font-size: 11px !important;
    right: 0 !important;
    left: auto !important;
}
/* 모바일 탑바: 사용자명 표시 */
body.force-mobile #usernameDisplay {
    display: block !important;
    white-space: nowrap !important;
    font-weight: bold !important;
    font-size: 12px !important;
}
body.force-mobile #pcTopPanelToggleBtn {
    display: none !important;
}
body.force-mobile #accountLink {
    display: inline-block !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
}
body.force-mobile #adminLink {
    padding: 4px 8px !important;
    font-size: 11px !important;
}
body.force-mobile #logoutBtnHeader {
    padding: 4px 8px !important;
    font-size: 11px !important;
}
/* 모바일 전용 지도 위 컨트롤 완전 숨기기 */
body.force-mobile #mobile-tile-layer-control {
    display: none !important;
}
body.force-mobile #mobile-left-controls {
    display: none !important;
}
body.force-mobile #time-controls-map {
    display: none !important;
}
/* 사관 랭킹 패널 스크롤바 숨김 */
#rankingDisplay,
#rankingDisplay-body {
    overflow: hidden !important;
    scrollbar-width: none !important;
}
#rankingDisplay::-webkit-scrollbar,
#rankingDisplay-body::-webkit-scrollbar {
    display: none !important;
}
/* 모바일에서 랭킹 패널: 슬라이더 바로 위 */
body.force-mobile #rankingDisplay {
    bottom: 60px !important;
}
body.force-mobile #rightPanel {
    top: 0;
    right: 0;
    width: 85vw;
    max-width: 400px;
    height: 100vh;
    border-left: 2px solid #00aaff;
    border-top: none;
    display: none !important;
    transform: translateX(100%) !important;
}
body.force-mobile #rightPanel.visible {
    display: flex !important;
    transform: none !important;
}
body.force-mobile #rightPanelToggleBtn {
    top: auto;
    bottom: 15px;
    left: auto;
    right: 15px;
    z-index: 1003;
    writing-mode: horizontal-tb;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 40px;
    padding: 0;
    display: block !important;
}
/* 🚩 [수정] 모바일에서 필터/검색 행을 한 줄로 컴팩트하게 표시 */
body.force-mobile .right-controls {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 2px !important;
}
body.force-mobile #country-filter-container {
    order: 1 !important;
    flex-basis: auto !important;
    height: 24px !important;
}
body.force-mobile #country-filter-container label {
    font-size: 9px !important;
}
body.force-mobile #countryFilterSelect {
    font-size: 9px !important;
    padding: 1px 2px !important;
    height: 100% !important;
    min-width: 60px !important;
    width: 60px !important;
}
body.force-mobile #dynastyTimelineFilterPanel {
    order: 2 !important;
    flex-basis: auto !important;
    height: 24px !important;
}
body.force-mobile #ethnicityFilterContainer {
    font-size: 9px !important;
    height: 100% !important;
}
body.force-mobile #ethnicityFilterContainer label {
    font-size: 9px !important;
}
body.force-mobile #ethnicityFilterContainer select {
    font-size: 9px !important;
    padding: 1px 2px !important;
    height: 100% !important;
    min-width: 65px !important;
    width: 65px !important;
}
body.force-mobile .right-controls > div:last-child {
    order: 3 !important;
    flex: 0 0 auto !important;
    min-width: unset !important;
    width: auto !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
}
body.force-mobile #searchInput {
    font-size: 9px !important;
    padding: 1px 3px !important;
    height: 100% !important;
    flex: 0 0 80px !important;
    min-width: 80px !important;
}
body.force-mobile #searchBtn {
    font-size: 9px !important;
    padding: 1px 4px !important;
    height: 100% !important;
    flex: 0 0 56px !important;
}

/* 🚩 [제거됨 - 하단의 통합 CSS로 대체] */

/* 🚩 [제거됨 - 하단의 통합 CSS로 대체] */

body.force-mobile #time-controls-map .time-control-btn {
    min-height: 24px !important;
    font-size: 9px !important;
    padding: 2px 3px !important;
    min-width: 24px !important;
    flex: 0 0 auto !important;
    order: 10 !important;
}

/* 🚩 [추가] 모바일에서 재생/정지 버튼 및 컨테이너 강제 숨기기 */
body.force-mobile .playback-button-container,
body.force-mobile #playBtn,
body.force-mobile #pauseBtn,
body.force-mobile #time-controls-map .playback-button-container,
body.force-mobile #time-controls-map #playBtn,
body.force-mobile #time-controls-map #pauseBtn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 🚩 PC에서 모바일 전용 요소 숨기기 */
#mobile-left-controls,
#mobile-right-controls {
    display: none !important;
}

/* (모바일 전용 컨트롤은 이제 햄버거 메뉴로 대체 - 아래 force-mobile 섹션에서 모두 숨김 처리됨) */

/* 🚩 [완전 재설계] 모바일 상단 UI 완벽 정렬 */

/* 연도 표시 박스 */
body.force-mobile #timeLabelDisplay {
    font-size: 10px !important;
    font-family: 'Courier New', monospace !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    background: rgba(30, 42, 56, 0.9) !important;
    padding: 6px 8px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(93, 113, 133, 0.5) !important;
}

/* 화살표 버튼 */
body.force-mobile #mobile-year-controls button {
    padding: 0 10px !important;
    font-size: 12px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    background: rgba(30, 42, 56, 0.95) !important;
    border: 1px solid #5d7185 !important;
    border-radius: 4px !important;
    line-height: 26px !important;
    display: inline-block !important;
    text-align: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    color: #ecf0f1 !important;
    vertical-align: top !important;
    margin: 0 !important;
}

/* 🚩 [수정] 모바일에서 기존 레이어 토글 버튼 숨김 - 이미 상위 CSS에서 처리됨 */

/* 🚩 [추가] 모바일에서 표시 버튼 표시 - mobile-right-controls로 처리됨 */

/* 모바일 우측 컨트롤 내부 버튼들 통일 스타일 */
body.force-mobile #mobile-right-controls button {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    background: rgba(30, 42, 56, 0.95) !important;
    border: 1px solid #5d7185 !important;
    color: #ecf0f1 !important;
    cursor: pointer !important;
}

/* 모바일 왕 목록: 탑바 아래를 모두 사용하는 독립 화면 */
body.force-mobile #map-king-panel {
    position: fixed !important;
    top: 54px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 54px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(18, 23, 31, .98) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.68) !important;
    overflow: hidden !important;
    z-index: 160000 !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
}

body.force-mobile #map-king-panel-header {
    flex: 0 0 auto !important;
    min-height: 48px !important;
    padding: 8px 14px !important;
    cursor: default !important;
    background: linear-gradient(90deg, rgba(172,119,33,.22), rgba(255,255,255,.015)) !important;
}

body.force-mobile #map-king-panel h3 {
    font-size: 14px !important;
    margin: 0 !important;
}

body.force-mobile #map-king-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 10px 14px 24px !important;
    overflow-y: auto !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
}

body.force-mobile #king-panel-resize-handle {
    display: none !important;
}

/* 왕 목록을 보면서도 시점을 바꿀 수 있도록 상·하단 시간 컨트롤을 전면에 유지 */
body.force-mobile.king-panel-open #map-king-panel,
body.force-mobile.history-panel-open #map-history-panel.expanded {
    top: 88px !important;
    height: calc(100dvh - 88px) !important;
}
body.force-mobile.king-panel-open #map-king-list,
body.force-mobile.history-panel-open #map-history-records {
    padding-bottom: 76px !important;
}
body.force-mobile.king-panel-open #timeline-play-controls,
body.force-mobile.king-panel-open #map-tile-toggle-group,
body.force-mobile.king-panel-open #timeline-control,
body.force-mobile.king-panel-open #timeline-container,
body.force-mobile.history-panel-open #timeline-play-controls,
body.force-mobile.history-panel-open #map-tile-toggle-group,
body.force-mobile.history-panel-open #timeline-control,
body.force-mobile.history-panel-open #timeline-container {
    z-index: 160020 !important;
}
body.force-mobile.king-panel-open #timeline-control,
body.force-mobile.history-panel-open #timeline-control {
    background: rgba(9,14,21,.96) !important;
    border-top: 1px solid rgba(218,174,77,.28) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.5) !important;
}
body.force-mobile.king-panel-open #mobile-year-label,
body.force-mobile.history-panel-open #mobile-year-label {
    display: flex !important;
    color: #f0d080 !important;
}

/* 햄버거 메뉴도 시간 탐색 컨트롤을 남긴 모바일 전체 화면으로 사용 */
body.force-mobile.hamburger-menu-open #hamburger-menu-panel.active {
    top: 88px !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 88px) !important;
    max-width: none !important;
    padding: 14px 14px 82px !important;
    border: 0 !important;
    transform: translateX(0) !important;
    z-index: 160000 !important;
}
body.force-mobile.hamburger-menu-open #timeline-play-controls,
body.force-mobile.hamburger-menu-open #map-tile-toggle-group,
body.force-mobile.hamburger-menu-open #timeline-control,
body.force-mobile.hamburger-menu-open #timeline-container {
    z-index: 160020 !important;
}
body.force-mobile.hamburger-menu-open #timeline-control {
    background: rgba(9,14,21,.96) !important;
    border-top: 1px solid rgba(218,174,77,.28) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.5) !important;
}
body.force-mobile.hamburger-menu-open #mobile-year-label {
    display: flex !important;
    color: #f0d080 !important;
}

/* 국가별 연대표도 상·하단 시간 컨트롤을 유지하는 모바일 전체 화면 */
body.force-mobile.timeline-panel-open #timeline-sidebar {
    position: fixed !important;
    top: 88px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    height: calc(100dvh - 88px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: 160000 !important;
}
body.force-mobile.timeline-panel-open #timeline-sidebar-header {
    min-height: 48px !important;
    padding: 7px 10px !important;
    cursor: default !important;
    touch-action: auto !important;
}
body.force-mobile.timeline-panel-open #tl-body {
    padding-bottom: 68px !important;
    box-sizing: border-box !important;
}
body.force-mobile.timeline-panel-open #timeline-resize-handle {
    display: none !important;
}
body.force-mobile.timeline-panel-open #timeline-play-controls,
body.force-mobile.timeline-panel-open #map-tile-toggle-group,
body.force-mobile.timeline-panel-open #timeline-control,
body.force-mobile.timeline-panel-open #timeline-container {
    z-index: 160020 !important;
}
body.force-mobile.timeline-panel-open #timeline-control {
    display: block !important;
    background: rgba(9,14,21,.96) !important;
    border-top: 1px solid rgba(218,174,77,.28) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.5) !important;
}
body.force-mobile.timeline-panel-open #mobile-year-label {
    display: flex !important;
    color: #f0d080 !important;
}

/* 인물 상세도 상단바 아래 전체 화면 + 하단 시간 탐색 유지 */
body.force-mobile #heroIllustWrap {
    display: none !important;
}
body.force-mobile.hero-panel-open #heroSidebar {
    top: 88px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 88px) !important;
    max-height: none !important;
    border: 0 !important;
    z-index: 160000 !important;
}
body.force-mobile.hero-panel-open #heroSidebar .hero-sidebar-header {
    min-height: 48px !important;
    padding: 7px 54px 7px 10px !important;
    box-sizing: border-box !important;
}
body.force-mobile.hero-panel-open #heroSidebar .hero-detail-panel {
    padding-bottom: 82px !important;
}
body.force-mobile.hero-panel-open #timeline-play-controls,
body.force-mobile.hero-panel-open #map-tile-toggle-group,
body.force-mobile.hero-panel-open #timeline-control,
body.force-mobile.hero-panel-open #timeline-container {
    z-index: 160020 !important;
}
body.force-mobile.hero-panel-open #timeline-control {
    display: block !important;
    background: rgba(9,14,21,.96) !important;
    border-top: 1px solid rgba(218,174,77,.28) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.5) !important;
}
body.force-mobile.hero-panel-open #mobile-year-label {
    display: flex !important;
    color: #f0d080 !important;
}

/* 국가·마커 상세도 상단바 아래 전체 화면 + 하단 시간 탐색 유지 */
body.force-mobile.map-detail-panel-open #country-detail-panel.active,
body.force-mobile.map-detail-panel-open #object-detail-panel.active {
    position: fixed !important;
    top: 88px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 88px) !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    z-index: 160000 !important;
}
body.force-mobile.map-detail-panel-open #country-detail-panel .cdp-tab-content {
    padding-bottom: 148px !important;
}
body.force-mobile.map-detail-panel-open #object-detail-panel .odp-body {
    padding-bottom: 148px !important;
}
body.force-mobile.map-detail-panel-open #object-detail-panel .odp-edit-bar {
    bottom: 62px !important;
}
body.force-mobile.map-detail-panel-open #timeline-play-controls,
body.force-mobile.map-detail-panel-open #map-tile-toggle-group,
body.force-mobile.map-detail-panel-open #timeline-control,
body.force-mobile.map-detail-panel-open #timeline-container {
    z-index: 160020 !important;
}
body.force-mobile.map-detail-panel-open #timeline-play-controls {
    display: grid !important;
}
body.force-mobile.map-detail-panel-open #timeline-control {
    display: block !important;
    background: rgba(9,14,21,.96) !important;
    border-top: 1px solid rgba(218,174,77,.28) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.5) !important;
}
body.force-mobile.map-detail-panel-open #mobile-year-label {
    display: flex !important;
    color: #f0d080 !important;
}

/* 🚩 우하단 리사이즈 핸들 공통 스타일 */
.panel-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    z-index: 10;
    border-radius: 0 0 8px 0;
    /* 우하단 삼각형 그리드 점 패턴 */
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.5) 1.5px, transparent 1.5px);
    background-size: 6px 6px;
    background-position: 6px 6px, 12px 6px, 6px 12px, 12px 12px, 12px 0px, 0px 12px;
    background-repeat: no-repeat;
}
/* 왼하단 핸들 (right 고정 패널용) */
.panel-resize-handle-left {
    right: auto;
    left: 0;
    cursor: nesw-resize;
    border-radius: 0 0 0 8px;
}
.panel-resize-handle:hover {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.9) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.9) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.9) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.9) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.9) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,0.9) 1.5px, transparent 1.5px);
    background-size: 6px 6px;
    background-position: 6px 6px, 12px 6px, 6px 12px, 12px 12px, 12px 0px, 0px 12px;
    background-repeat: no-repeat;
}

/* 🚩 역사기록 패널 — 사관랭킹 동일 스타일 */
#map-history-panel.expanded {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
    color: white;
    font-size: 12px;
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    transition: background 0.25s ease, box-shadow 0.25s ease !important;
}
#map-history-panel.expanded:hover {
    background: rgba(26, 26, 26, 0.80) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
/* 인물·지명 상세에서 연결 기록을 연 경우 상세 패널보다 위에 표시 */
#map-history-panel.history-linked-focus {
    z-index: 160100 !important;
    background: rgba(18,27,38,.97) !important;
    border: 1px solid rgba(218,174,77,.42) !important;
    box-shadow: 0 14px 42px rgba(0,0,0,.72), 0 0 0 1px rgba(218,174,77,.10) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
#map-history-panel.history-linked-focus:hover {
    background: rgba(18,27,38,.99) !important;
}
/* 🚩 왕목록 패널 — 사관랭킹 동일 스타일, 하단 배치 */
#map-king-panel {
    transition: background 0.25s ease, box-shadow 0.25s ease;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 12px;
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    width: 468px !important;
    /* top은 JS positionKingPanelBelowRanking()이 설정 */
}
#map-king-panel:hover {
    background: rgba(26, 26, 26, 0.80) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
#map-king-list::-webkit-scrollbar { display: none; }
/* 🚩 사관랭킹 패널 — 롤오버 배경 */
#rankingDisplay {
    font-size: 12px;
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    right: 0 !important;
    top: calc(var(--topbar-h, 46px) + 40px) !important;
}
#rankingDisplay:hover {
    background: rgba(26, 26, 26, 0.80) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#rankingDisplay-close:hover {
    color: #fff !important;
}

/* 🚩 [추가] PC에서 역사기록 패널 접기/펼치기 기능 */
#map-history-panel {
    transition: padding 0.3s ease !important;
}

#map-history-panel:not(.expanded) {
    width: 32px !important;
    padding: 4px 2px !important;
    overflow: hidden !important;
}

/* 감춘 상태에서 숨길 요소들 - ID와 자식 선택자로 정확히 지정 */
#map-history-panel:not(.expanded) #map-history-resizer,
#map-history-panel:not(.expanded) > div:nth-child(2) > span,
#map-history-panel:not(.expanded) > div:nth-child(3),
#map-history-panel:not(.expanded) > div:nth-child(4),
#map-history-panel:not(.expanded) #map-prev-history-btn,
#map-history-panel:not(.expanded) #map-next-history-btn,
#map-history-panel:not(.expanded) #map-open-history-form-btn {
    display: none !important;
}

/* 🚩 [수정] 축소 시 패널 자체를 투명하고 작게, 좌측에 유지 */
#map-history-panel:not(.expanded) {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    top: 108px !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 토글 버튼만 유지 - 배경 있게 */
#map-history-panel:not(.expanded) #map-history-toggle-btn {
    display: inline-block !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    min-width: 40px !important;
    font-size: 11px !important;
    background: rgba(30, 42, 56, 0.95) !important;
    border: 1px solid #5d7185 !important;
    border-radius: 4px !important;
}

/* 감춘 상태에서 버튼 컨테이너는 중앙 정렬 */
#map-history-panel:not(.expanded) > div:nth-child(2) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    background: transparent !important;
}

#map-history-panel.expanded {
    width: 280px;
    min-width: 200px;
    min-height: 120px;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column;
    /* height는 인라인 style로 관리 (calc(100vh - 400px) 초기값, 드래그 후 px 고정) */
}

#map-history-panel.expanded #map-history-resizer {
    display: block !important;
}

/* 역사기록 패널 창 모드 */
#map-history-panel .history-window-control { font-size:13px !important; }
#map-history-panel.history-window-minimized {
    width: 286px !important;
    height: 43px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
#map-history-panel.history-window-minimized #map-history-records,
#map-history-panel.history-window-minimized #history-panel-resize-handle { display:none !important; }
#map-history-panel.history-window-minimized #map-open-history-form-btn,
#map-history-panel.history-window-minimized #map-prev-history-btn,
#map-history-panel.history-window-minimized #map-next-history-btn,
#map-history-panel.history-window-minimized #map-history-sidebar-btn,
#map-history-panel.history-window-minimized #map-history-fullscreen-btn { display:none !important; }
#map-history-panel.history-window-minimized #map-history-panel-header { height:43px !important; border-bottom:0 !important; }
#map-history-panel.history-window-sidebar,
#map-history-panel.history-window-fullscreen { border-radius:0 !important; }
#map-history-panel.history-window-sidebar #history-panel-resize-handle,
#map-history-panel.history-window-fullscreen #history-panel-resize-handle { display:none !important; }
#map-history-panel .history-window-control[aria-pressed="true"] {
    border-color:#e0b75e !important;
    color:#ffe5a5 !important;
    background:rgba(178,123,35,.34) !important;
}
body.force-mobile #map-history-panel .history-window-control { display:none !important; }
@media (max-width:967px) {
    #map-history-panel .history-window-control { display:none !important; }
}

/* 역사패널 스크롤바 — 얇고 반투명하게 */
#map-history-records::-webkit-scrollbar {
    width: 4px;
}
#map-history-records::-webkit-scrollbar-track {
    background: transparent;
}
#map-history-records::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}
#map-history-records::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
/* Firefox */
#map-history-records {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* ── 역사기록: 전략게임 연대기 HUD ── */
#map-history-panel.expanded {
    width: 360px !important;
    padding: 0 !important;
    background:
        linear-gradient(145deg, rgba(31,27,20,.97), rgba(13,17,22,.97)) !important;
    border: 1px solid rgba(204,164,82,.42) !important;
    border-left: 3px solid #bd8b2f !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.48), inset 0 1px rgba(255,235,183,.07) !important;
    text-shadow: none !important;
}
#map-history-panel.expanded:hover {
    background: linear-gradient(145deg, rgba(36,31,22,.98), rgba(14,18,23,.98)) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.54), inset 0 1px rgba(255,235,183,.08) !important;
}
#map-history-panel-header {
    min-height: 42px;
    padding: 7px 10px !important;
    background: linear-gradient(90deg, rgba(172,119,33,.22), rgba(255,255,255,.015));
    border-bottom: 1px solid rgba(210,171,91,.28) !important;
}
#map-history-year-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #f0d28f !important;
    font-family: 'Nanum Myeongjo','Noto Serif KR',serif;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
}
#map-history-year-title::before {
    content: '📜';
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(226,186,98,.35);
    border-radius: 50%;
    background: rgba(0,0,0,.22);
    font-size: 13px;
}
#map-history-panel .panel-icon-btn {
    width: 27px;
    height: 27px;
    padding: 0 !important;
    border: 1px solid rgba(199,161,84,.28) !important;
    border-radius: 5px !important;
    background: rgba(10,13,17,.52) !important;
    color: #d9c9a6 !important;
}
#map-history-panel .panel-icon-btn:hover {
    border-color: #d0a64d !important;
    color: #ffe6aa !important;
    background: rgba(178,123,35,.22) !important;
}
#map-history-records { padding: 10px !important; }
.history-hud-summary {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin-bottom: 11px;
}
.history-hud-stat {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 7px;
    background: rgba(255,255,255,.035);
    color: #98a6b3;
    font-size: 10px;
}
.history-hud-stat strong { color:#f0d28f; font-size:14px; line-height:1; }
.history-section { margin-bottom: 13px; }
.history-section-heading {
    display:flex;
    align-items:center;
    gap:7px;
    margin: 0 1px 7px;
    color:#c6b58e;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.history-section-heading::after { content:''; flex:1; height:1px; background:rgba(207,171,93,.2); }
.history-record-card {
    position:relative;
    margin-bottom:8px;
    padding:10px 10px 9px 12px;
    border:1px solid rgba(210,174,98,.18);
    border-left:3px solid #a9782c;
    border-radius:7px;
    background:linear-gradient(110deg,rgba(116,79,25,.13),rgba(255,255,255,.025));
}
.history-record-head { display:flex; align-items:flex-start; gap:7px; margin-bottom:6px; }
.history-record-title { flex:1; color:#f2e4c8; font:700 13px/1.4 'Nanum Myeongjo','Noto Serif KR',serif; }
.history-edit-action {
    flex-shrink:0; padding:3px 7px; border:1px solid rgba(93,159,210,.42); border-radius:4px;
    background:rgba(48,113,164,.15); color:#8fc7ed; font-size:10px; cursor:pointer;
}
.history-edit-action:hover { background:rgba(48,113,164,.3); color:#d9efff; }
.history-record-block { margin-top:6px; color:#c2c8cc; font-size:11px; line-height:1.65; word-break:break-word; white-space:pre-wrap; }
.history-record-block.is-original { padding-left:8px; border-left:2px solid rgba(89,177,204,.55); color:#bed2c3; font-family:'Noto Serif SC',serif; }
.history-record-block.is-research { padding-left:8px; border-left:2px solid rgba(103,190,111,.6); color:#a9d9ad; }
.history-comments { margin-top:9px; padding-top:7px; border-top:1px solid rgba(91,164,184,.18); }
.history-comments-toggle { padding:3px 7px; border:1px solid rgba(91,174,198,.38); border-radius:4px; background:rgba(40,112,137,.16); color:#9dd8e8; font-size:10px; cursor:pointer; }
.history-comments-toggle:hover { border-color:#71c7dc; color:#d9f7ff; background:rgba(40,132,158,.28); }
.history-comments-global-bar { display:flex; justify-content:flex-end; margin:0 0 8px; }
.history-comments-global-toggle { padding:5px 9px; border:1px solid rgba(91,174,198,.38); border-radius:5px; background:rgba(40,112,137,.16); color:#9dd8e8; font-size:10px; cursor:pointer; }
.history-comments-global-toggle:hover { border-color:#71c7dc; color:#d9f7ff; background:rgba(40,132,158,.28); }
.history-comments-global-toggle[aria-pressed="true"] { border-color:#72cde2; background:rgba(36,132,159,.36); color:#dcf8ff; }
.history-comments-global-toggle:disabled { opacity:.55; cursor:wait; }
.history-comments-panel { margin-top:7px; padding:7px 8px 8px; border:1px solid rgba(83,164,188,.28); border-left:3px solid #3f9fba; border-radius:6px; background:linear-gradient(120deg,rgba(25,75,94,.28),rgba(18,36,50,.42)); box-shadow:inset 0 1px rgba(175,232,246,.04); }
.history-comment-item { margin-bottom:5px; padding:7px 8px; border:1px solid rgba(105,179,199,.13); border-radius:5px; background:rgba(43,91,108,.17); }
.history-comment-item:last-of-type { margin-bottom:0; }
.history-comment-meta { display:flex; align-items:center; gap:5px; color:#7799a5; font-size:9.5px; }
.history-comment-author { color:#75cce0; font-weight:700; }
.history-comment-text { margin-top:3px; color:#c6e1e8; font-size:10.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.history-comment-delete { margin-left:auto; padding:0; border:0; background:none; color:#b86d67; font-size:9px; cursor:pointer; }
.history-comment-form { display:flex; gap:5px; margin-top:7px; }
.history-comment-form textarea { flex:1; min-width:0; height:42px; resize:vertical; padding:6px 7px; border:1px solid rgba(91,163,184,.38); border-radius:5px; background:rgba(5,20,27,.62); color:#d8edf2; font:10.5px/1.4 inherit; }
.history-comment-form textarea:focus { outline:none; border-color:#5fb8d0; box-shadow:0 0 0 2px rgba(64,157,184,.13); }
.history-comment-form button { align-self:stretch; padding:0 9px; border:1px solid rgba(83,174,199,.48); border-radius:5px; background:rgba(33,119,144,.28); color:#a9e0ed; font-size:10px; cursor:pointer; }
.history-comment-notice { padding:6px 1px 1px; color:#82a5af; font-size:10px; }
.history-source-tag { display:inline-block; margin-right:5px; padding:1px 5px; border-radius:3px; background:rgba(201,160,75,.12); color:#dfbd72; font-size:10px; }
.history-source-group {
    margin-bottom:7px; border:1px solid rgba(255,255,255,.075); border-radius:7px;
    background:rgba(255,255,255,.025); overflow:hidden;
}
.history-source-group > summary { list-style:none; cursor:pointer; padding:8px 10px; font-size:11px; font-weight:700; }
.history-source-group > summary::-webkit-details-marker { display:none; }
.history-source-group > summary::after { content:'＋'; float:right; color:#788896; }
.history-source-group[open] > summary::after { content:'−'; }
.history-source-items { padding:0 9px 7px; }
.history-source-item { padding:7px 2px; border-top:1px solid rgba(255,255,255,.055); }
.history-record-card.history-search-target,
.history-source-item.history-search-target {
    position: relative;
    border-color: #f4c75e !important;
    border-radius: 7px;
    background: linear-gradient(110deg, rgba(210,148,38,.34), rgba(255,231,161,.08)) !important;
    box-shadow: 0 0 0 2px rgba(244,199,94,.22), 0 0 22px rgba(224,159,39,.34);
    animation: history-search-target-pulse 1s ease-in-out 2;
}
.history-record-card.history-search-target::after,
.history-source-item.history-search-target::after {
    content: '현재 선택한 기록';
    display: inline-block;
    margin-top: 7px;
    padding: 2px 7px;
    border: 1px solid rgba(255,216,112,.55);
    border-radius: 10px;
    background: rgba(155,102,20,.42);
    color: #ffe4a0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
}
@keyframes history-search-target-pulse {
    50% { box-shadow:0 0 0 3px rgba(255,216,112,.5), 0 0 30px rgba(230,167,43,.55); }
}
.history-source-item-head { display:flex; align-items:flex-start; gap:7px; }
.history-source-item-head .history-source-title { flex:1; min-width:0; }
.history-source-title { color:#d9dde0; font-size:11px; line-height:1.5; }
.history-source-content { margin-top:3px; color:#9fa9b1; font-size:10.5px; line-height:1.6; word-break:break-word; white-space:pre-wrap; }
.history-source-content.is-original { padding-left:7px; border-left:2px solid rgba(92,180,203,.4); color:#b8cfbd; font-family:'Noto Serif SC',serif; }
.history-record-block pre, .history-source-content pre { margin:6px 0; padding:8px 10px; overflow:auto; border:1px solid rgba(116,164,188,.22); border-radius:5px; background:rgba(0,0,0,.3); color:inherit; font:inherit; line-height:1.7; white-space:pre-wrap; tab-size:4; }
.history-html-toolbar { display:flex;gap:4px;flex-wrap:wrap;margin:3px 0 5px; }
.history-html-toolbar button { min-width:28px;padding:3px 7px;border:1px solid rgba(125,151,170,.35);border-radius:4px;background:rgba(32,49,62,.75);color:#c9d6df;font-size:11px;cursor:pointer; }
.history-html-toolbar button:hover { border-color:#b99244;color:#f1d795;background:rgba(126,91,31,.25); }
.history-place-link {
    display:inline;
    padding:0 2px;
    border:0;
    border-bottom:1px dotted rgba(100,190,224,.72);
    background:rgba(59,139,180,.10);
    color:#85cbe8;
    font:inherit;
    cursor:pointer;
    border-radius:2px;
    text-decoration:none;
}
.history-place-link::before { content:'⌖'; margin-right:2px; color:#d6ad55; font-size:.85em; }
.history-place-link:hover,
.history-place-link:focus-visible { color:#dff6ff; background:rgba(66,157,199,.25); outline:none; border-bottom-style:solid; }
.history-historian-link {
    display:inline; padding:0 3px; border:0; border-bottom:1px dotted rgba(119,205,155,.8);
    border-radius:2px; background:rgba(61,145,96,.14); color:#8ee0af;
    font:inherit; font-weight:700; cursor:pointer; text-decoration:none;
}
.history-historian-link::before { content:'@'; margin-right:1px; color:#d8b85e; }
.history-historian-link:hover,.history-historian-link:focus-visible { color:#dffff0; background:rgba(61,145,96,.3); outline:none; }
.history-external-link { color:#7dcdf0;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;overflow-wrap:anywhere; }
.history-external-link:hover,.history-external-link:focus-visible { color:#c5efff;text-decoration-style:solid;outline:none; }
.history-person-link {
    display:inline;
    padding:0 2px;
    border:0;
    border-bottom:1px dotted rgba(224,178,83,.78);
    background:rgba(190,132,33,.11);
    color:#f0c66d;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    border-radius:2px;
    text-decoration:none;
}
.history-person-link::before { content:'♟'; margin-right:2px; color:#f4d797; font-size:.82em; }
.history-country-link { display:inline;padding:0 2px;border:0;border-bottom:1px dotted rgba(151,196,108,.78);background:rgba(80,142,55,.12);color:#a9d77f;font:inherit;font-weight:700;cursor:pointer;border-radius:2px;text-decoration:none; }
.history-country-link::before { content:'⚑'; margin-right:2px; color:#c9e79c; font-size:.82em; }
.history-country-link:hover,.history-country-link:focus-visible { color:#e6ffd0;background:rgba(94,163,62,.28);outline:none;border-bottom-style:solid; }
.history-person-link:hover,
.history-person-link:focus-visible { color:#fff0bf; background:rgba(199,143,43,.25); outline:none; border-bottom-style:solid; }
.history-empty-state { display:grid; place-items:center; min-height:120px; color:#778591; text-align:center; }
.history-empty-state span { display:block; margin-bottom:7px; font-size:28px; opacity:.65; }

/* 사서 기록 편집기 */
#historyForm { width:min(680px,calc(100vw - 28px)); }
.history-editor-section { margin:0 0 10px; padding:12px; border:1px solid rgba(191,151,75,.22); border-radius:8px; background:rgba(13,20,27,.48); }
.history-editor-section.is-primary { border-color:rgba(214,169,76,.42); background:linear-gradient(135deg,rgba(151,103,29,.13),rgba(15,22,29,.55)); }
.history-editor-section-title,.history-editor-tools > summary { color:#edcf8c; font-size:13px; font-weight:800; letter-spacing:.02em; }
.history-editor-section-title { margin-bottom:10px; }
.history-editor-section-title small,.history-editor-tools > summary small { margin-left:6px; color:#81909b; font-size:10px; font-weight:500; }
.history-editor-tools > summary { cursor:pointer; list-style:none; }
.history-editor-tools > summary::-webkit-details-marker { display:none; }
.history-editor-tools > summary::after { content:'＋'; float:right; color:#8295a4; }
.history-editor-tools[open] > summary::after { content:'−'; }
.history-editor-tools[open] > summary { margin-bottom:10px; }
.history-editor-source-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.history-editor-source-card { display:grid; gap:6px; padding:9px; border:1px solid rgba(255,255,255,.075); border-radius:6px; background:rgba(255,255,255,.025); }
.history-editor-source-card strong { color:#b9c7cf; font-size:11px; }
.history-editor-source-card.is-wide { grid-column:1/-1; }
.history-link-help { margin-bottom:8px; color:#91a2ad; font-size:11px; line-height:1.5; }
.history-link-builder { display:grid; grid-template-columns:105px 1fr; gap:7px; }
.history-link-results { display:grid; gap:5px; max-height:150px; margin-top:7px; overflow:auto; }
.history-link-result { display:flex; justify-content:space-between; gap:8px; padding:7px 9px; border:1px solid rgba(255,255,255,.09); border-radius:5px; background:rgba(255,255,255,.035); color:#cbd5da; font-size:11px; cursor:pointer; }
.history-link-result:hover { border-color:#c79b42; color:#f1d99c; }
@media(max-width:620px) { .history-editor-source-grid { grid-template-columns:1fr; } .history-editor-source-card.is-wide { grid-column:auto; } }

/* 모바일 원전 사료 바로 수정: 화면 밖으로 버튼이 밀려나지 않도록 전체 화면형으로 표시 */
@media (max-width:967px), (orientation:portrait) {
    #source-record-direct-editor {
        box-sizing:border-box !important;
        height:100dvh !important;
        padding:0 !important;
        place-items:stretch !important;
    }
    #source-record-direct-form {
        width:100vw !important;
        max-width:none !important;
        height:100dvh !important;
        max-height:100dvh !important;
        margin:0 !important;
        padding:10px !important;
        padding-bottom:max(10px,env(safe-area-inset-bottom)) !important;
        border-radius:0 !important;
        overflow-y:auto !important;
        overscroll-behavior:contain;
    }
    #source-record-direct-form .source-record-direct-header {
        position:sticky;
        top:-10px;
        z-index:4;
        padding:10px 2px 9px !important;
        background:#1d2831;
    }
    #source-record-direct-form .source-record-direct-actions {
        position:sticky;
        bottom:calc(-1 * max(10px,env(safe-area-inset-bottom)));
        z-index:4;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        padding:10px 0 max(10px,env(safe-area-inset-bottom));
        background:linear-gradient(to top,#121a21 75%,rgba(18,26,33,.92));
    }
    #source-record-direct-form .source-record-direct-actions button {
        box-sizing:border-box;
        min-width:0;
        min-height:42px;
        margin:0 !important;
    }
    #source-record-direct-form .source-record-direct-actions [type="submit"] {
        grid-column:1/-1;
        grid-row:1;
    }
}

/* 왕목록 패널 스크롤바 — 얇고 반투명하게 */
#map-king-list::-webkit-scrollbar {
    width: 4px;
}
#map-king-list::-webkit-scrollbar-track {
    background: transparent;
}
#map-king-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}
#map-king-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
/* Firefox */
#map-king-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    font-weight: normal !important;
}
#map-king-list b,
#map-king-list strong,
#map-king-list .king-name,
#map-king-list .country-name-link {
    font-weight: normal !important;
    font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════
   모바일 역사기록 패널 & 연대표 — 심플 UI
   ═══════════════════════════════════════════════════ */

/* ── 역사기록 패널: 축소 상태 ── */
body.force-mobile #map-history-panel {
    /* 우측 상단 플로팅 버튼처럼 */
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    right: 10px !important;
    top: 66px !important;
    border-radius: 20px !important;
    background: rgba(30, 42, 56, 0.92) !important;
    border: 1px solid rgba(180,140,80,0.5) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    overflow: hidden !important;
    min-width: unset !important;
    min-height: unset !important;
}

/* 축소 상태 — 내용 전부 숨기고 토글 버튼만 */
body.force-mobile #map-history-panel:not(.expanded) > * {
    display: none !important;
}
body.force-mobile #map-history-panel:not(.expanded) #map-history-panel-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
}
body.force-mobile #map-history-panel:not(.expanded) #map-history-panel-header > span {
    display: none !important;
}
body.force-mobile #map-history-panel:not(.expanded) #map-history-panel-header > div {
    display: flex !important;
    gap: 0 !important;
}
/* 닫힌 상태 — 헤더를 40×40 원형 버튼처럼 → 📜 emoji로 표시 */
body.force-mobile #map-history-panel:not(.expanded) #map-history-close-btn,
body.force-mobile #map-history-panel:not(.expanded) #map-open-history-form-btn,
body.force-mobile #map-history-panel:not(.expanded) #map-prev-history-btn,
body.force-mobile #map-history-panel:not(.expanded) #map-next-history-btn {
    display: none !important;
}
/* 헤더의 버튼 div도 숨김 */
body.force-mobile #map-history-panel:not(.expanded) #map-history-panel-header > div {
    display: none !important;
}
/* 헤더 span 대신 📜 아이콘으로 교체 */
body.force-mobile #map-history-panel:not(.expanded) #map-history-panel-header > span::before {
    content: '📜';
    font-size: 20px;
}
body.force-mobile #map-history-panel:not(.expanded) #map-history-panel-header > span {
    overflow: hidden;
    font-size: 0 !important; /* 원래 텍스트 숨김, ::before만 표시 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
}
body.force-mobile #map-history-panel:not(.expanded) #map-history-panel-header {
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── 역사기록 패널: 열린(expanded) 상태 — 오른쪽에서 슬라이드인 풀스크린 ── */
body.force-mobile #map-history-panel.expanded {
    width: 100vw !important;
    height: calc(100dvh - 54px) !important;
    max-width: none !important;
    max-height: none !important;
    top: 54px !important;
    right: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    padding: 14px 14px 24px !important;
    background: rgba(20, 30, 44, 0.97) !important;
    border: none !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
}
/* 열린 상태 — 헤더 크게 */
body.force-mobile #map-history-panel.expanded #map-history-panel-header {
    display: flex !important;
    margin-bottom: 12px !important;
}
body.force-mobile #map-history-panel.expanded #map-history-panel-header > span {
    font-size: 16px !important;
    display: inline !important;
}
/* 열린 상태 — 버튼 크기 키우기 */
body.force-mobile #map-history-panel.expanded #map-history-close-btn {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    align-items: center !important;
    justify-content: center !important;
}
body.force-mobile #map-history-panel.expanded #map-prev-history-btn,
body.force-mobile #map-history-panel.expanded #map-next-history-btn {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    align-items: center !important;
    justify-content: center !important;
}
body.force-mobile #map-history-panel.expanded #map-open-history-form-btn:not([hidden]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
}
#map-open-history-form-btn[hidden],
.history-edit-action[hidden] { display:none !important; }
/* 열린 상태 — 연도 제목 크게 */
body.force-mobile #map-history-panel.expanded h3 {
    font-size: 15px !important;
    margin: 0 !important;
    display: block !important;
}
/* 열린 상태 — 기록 내용 */
body.force-mobile #map-history-panel.expanded #map-history-records {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    height: auto !important;
    max-height: none !important;
    color: #ddd !important;
}
/* 리사이즈 핸들 모바일에서 숨김 */
body.force-mobile #map-history-panel .panel-resize-handle,
body.force-mobile #map-history-panel #map-history-resizer {
    display: none !important;
}

/* 실제 모바일 폭에서도 force-mobile 클래스 유무와 관계없이 탑바 역사 버튼과 패널을 사용한다. */
@media (max-width: 967px) {
    :root {
        --topbar-h: 52px;
    }

    #top-bar-container,
    body.force-mobile #top-bar-container {
        min-height: var(--topbar-h) !important;
        padding: 5px 8px !important;
    }

    #topbar-left-group,
    body.force-mobile #topbar-left-group {
        gap: 7px !important;
    }

    #mobile-search-icon-btn,
    #history-record-topbar-btn,
    #king-list-topbar-btn,
    #ranking-topbar-btn {
        display: flex !important;
    }
    #hamburger-menu-btn,
    #mobile-search-icon-btn,
    #coordGotoBtn,
    #history-record-topbar-btn,
    #king-list-topbar-btn,
    #ranking-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 20px !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid #5d7185 !important;
        border-radius: 8px !important;
        background: #1a1a1a !important;
        color: #ecf0f1 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    #hamburger-menu-btn span {
        width: 20px !important;
        height: 2px !important;
    }
    #map-history-panel:not(.expanded) {
        display: none !important;
    }
    #map-history-panel.expanded {
        display: flex !important;
        position: fixed !important;
        top: 54px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: calc(100dvh - 54px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        padding: 10px 12px 18px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(20,30,44,.98) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,.65) !important;
        overflow: hidden !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }
    #map-history-panel.expanded #map-history-panel-header { display:flex !important; flex:0 0 auto !important; }
    #map-history-panel.expanded #map-history-records { display:block !important; flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; }
    #map-history-panel .panel-resize-handle,
    #map-history-panel #map-history-resizer { display:none !important; }
}

/* ── 연대표: 모바일 심플 버전 ── */
/* 슬라이더 컨트롤 — 하단 고정, 충분한 공간 */
body.force-mobile #timeline-control {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 6px 8px 8px !important;
    background: rgba(10, 16, 26, 0.88) !important;
    backdrop-filter: blur(4px) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    box-sizing: border-box !important;
}
/* 한국사 마커바 숨김 — 모바일에선 겹쳐서 보기 어려움 */
body.force-mobile #slider-korea-bar {
    display: none !important;
}
/* 눈금바 숨김 */
body.force-mobile #slider-ticks-bar {
    display: none !important;
}
/* 이전/다음 버튼 크게 */
body.force-mobile #sliderStepBack,
body.force-mobile #sliderStepFwd {
    width: 32px !important;
    height: 48px !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* 슬라이더 wrap — 세로 중앙 */
body.force-mobile #timeline-step-row {
    align-items: center !important;
    gap: 4px !important;
}
/* 슬라이더 높이 키우기 (터치 편의) */
body.force-mobile #combinedSlider {
    height: 40px !important;
    cursor: pointer !important;
}
body.force-mobile #combinedSlider::-webkit-slider-thumb {
    width: 28px !important;
    height: 28px !important;
}
/* 연대표 바 (왕조 색상 바) — 모바일에서도 표시하되 높이 축소 */
body.force-mobile #timeline-container {
    bottom: 74px !important;
    height: 14px !important;
    max-height: 14px !important;
    overflow: hidden !important;
}
/* 연도 표시 팝업 — 슬라이더 조작 시 크게 */
body.force-mobile #slider-year-tooltip {
    font-size: 20px !important;
    padding: 6px 16px !important;
    bottom: 52px !important;
}
/* 📱 모바일 연도 상시 표시 레이블 */
body.force-mobile #mobile-year-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ═══════════════════════════════════════════════════
   📱 MOBILE UI OVERHAUL — 탑바 + 슬라이더 통합 개편
   ═══════════════════════════════════════════════════ */

/* ── 탑바: 좌측 그룹에 검색·핀 아이콘 노출 ── */
body.force-mobile #topbar-search-box {
    display: none !important; /* 인라인 검색창은 계속 숨김 — 모바일 오버레이 사용 */
}
body.force-mobile #mobile-search-icon-btn {
    display: inline-flex !important;
    order: 0 !important;
    margin: 0 !important;
}
body.force-mobile #coord-goto-wrap {
    display: inline-flex !important;
}

/* ── 탑바: 역사기록 버튼 노출 (모바일에서도 탑바에) ── */
body.force-mobile #historyRecordBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}
/* 모바일 탑바 역사기록 버튼: 규격화 CSS는 미디어쿼리 블록에서 통합 적용 */
body.force-mobile #history-record-topbar-btn,
body.force-mobile #king-list-topbar-btn,
body.force-mobile #ranking-topbar-btn {
    display: inline-flex !important;
}

/* ── 모바일에서 플로팅 역사기록 패널(축소 상태 동그라미) 숨김 → 탑바 버튼으로 대체 ── */
body.force-mobile #map-history-panel:not(.expanded) {
    display: none !important;
}

/* ── current-year-display: 모바일에서 슬라이더 바로 위 중앙 크게 표시 ── */
body.force-mobile #current-year-display {
    bottom: 52px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.72) !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    letter-spacing: 0.04em !important;
    text-shadow: none !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 10001 !important;
}

/* ── timeline-control: 슬라이더 바 여백 최소화 ── */
body.force-mobile #timeline-control {
    bottom: 0 !important;
    padding: 0 !important;
}
body.force-mobile #slider-korea-bar {
    height: 8px !important;
    margin-bottom: 0 !important;
}
body.force-mobile #timeline-control > div:last-child {
    padding: 2px 0 !important;
    border-radius: 0 !important;
}
body.force-mobile #timeline-step-row {
    gap: 0 !important;
}
body.force-mobile #slider-ticks-bar {
    height: 12px !important;
}

/* ── 슬라이더 트랙: 얇고 세련된 그레이 ── */
body.force-mobile #combinedSlider {
    height: 4px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: rgba(160,160,160,0.35) !important;
    border-radius: 2px !important;
    outline: none !important;
    cursor: pointer !important;
}
body.force-mobile #combinedSlider::-webkit-slider-runnable-track {
    height: 4px !important;
    background: rgba(160,160,160,0.35) !important;
    border-radius: 2px !important;
}
body.force-mobile #combinedSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 3px solid rgba(0,170,255,0.85) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.58) !important;
    margin-top: -14px !important;
    cursor: pointer !important;
}
body.force-mobile #combinedSlider::-moz-range-thumb {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 3px solid rgba(0,170,255,0.85) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.58) !important;
    cursor: pointer !important;
}

/* ── 스텝 버튼: 양쪽 엣지 고정 ── */
body.force-mobile #sliderStepBack,
body.force-mobile #sliderStepFwd {
    width: 44px !important;
    height: 44px !important;
    background: rgba(15, 10, 4, 0.75) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    font-size: 16px !important;
}
/* timeline-slider-wrapper가 있으면 숨김 (이미 timeline-control로 대체) */
body.force-mobile #timeline-slider-wrapper {
    display: none !important;
}

/* 🚩 [추가] 모바일에서 연대표 페이드 요소 완전 제거 */
body.force-mobile #timeline-fade-left,
body.force-mobile #timeline-fade-right {
    display: none !important;
}

/* 🚩 [제거됨] edit-controls는 이제 time-controls-map 내부에 mobile-right-controls로 통합 */

/* 🚩 [추가] 모바일에서 스케일 숨기기 (확대/축소 버튼은 PC에서도 제거) */
body.force-mobile .leaflet-control-scale {
    display: none !important;
}

/* 🚩 [추가] 스케일 컨트롤 → 타일 토글 바로 하단 우측 정렬 */
.leaflet-top.leaflet-right .leaflet-control-scale {
    margin-top: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 0 0 5px !important;
    overflow: hidden;
    z-index: 1100 !important;
    position: relative !important;
}
.leaflet-control-scale-line {
    background: rgba(26, 26, 26, 0.90) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    border-top: none !important;
    border-right: none !important;
    color: #e0e0e0 !important;
    font-size: 10px !important;
    text-shadow: none !important;
    padding: 2px 7px !important;
    white-space: nowrap;
    box-shadow: none !important;
    min-width: 60px !important;
    text-align: center;
    box-sizing: border-box;
}

/* 🚩 [삭제됨] 모바일에서 고대 지도 버튼 컨테이너 위치 조정 (탑바로 이동됨) */
/* body.force-mobile #ancient-map-button-container {
    bottom: 120px !important; 
    left: 5px !important;
    right: auto !important;
    flex-direction: column !important; 
    max-width: 150px !important;
    padding: 8px !important;
} */

body.force-mobile #map-search-filter {
    display: none !important;
}

body.force-mobile #drawingForm {
    display: none !important; /* 보이지 않을 때 */
    position: fixed !important;
    bottom: 10px !important;
    left: 10px !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    max-width: 95% !important;
    width: auto !important;
    padding: 8px !important;
}

body.force-mobile #drawingForm[style*="display: block"],
body.force-mobile #drawingForm[style*="display:block"] {
    display: flex !important; /* 보일 때 */
}

body.force-mobile #drawingForm button {
    min-height: 36px !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
}

body.force-mobile #drawingForm input,
body.force-mobile #drawingForm select {
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 4px 6px !important;
}

body.force-mobile #drawingForm label {
    font-size: 11px !important;
}

/* 🚩 [추가] 모바일에서 모든 편집 폼 크기 조정 */
body.force-mobile #castleForm,
body.force-mobile #historyForm,
body.force-mobile #countryForm,
body.force-mobile #kingForm,
body.force-mobile #eventForm,
body.force-mobile #contributionForm {
    width: 100vw !important;
    left: -100vw !important;
    top: 0 !important;
    transform: none !important;
    max-width: none !important;
    max-height: none !important;
    height: 100vh !important;
}

body.force-mobile #castleForm.active,
body.force-mobile #historyForm.active,
body.force-mobile #countryForm.active,
body.force-mobile #kingForm.active,
body.force-mobile #eventForm.active,
body.force-mobile #contributionForm.active {
    left: 0 !important;
}

body.force-mobile #castleForm h3,
body.force-mobile #historyForm h3,
body.force-mobile #countryForm h3,
body.force-mobile #kingForm h3,
body.force-mobile #eventForm h3,
body.force-mobile #contributionForm h3 {
    font-size: 16px !important;
    margin: 0 0 10px 0 !important;
}

body.force-mobile .form-row {
    margin-bottom: 8px !important;
}

body.force-mobile .form-row label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
}

body.force-mobile .form-row input,
body.force-mobile .form-row select,
body.force-mobile .form-row textarea {
    font-size: 14px !important;
    padding: 8px !important;
    min-height: 40px !important;
}

body.force-mobile .form-row textarea {
    min-height: 80px !important;
}

body.force-mobile .form-actions button {
    font-size: 14px !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
    margin: 4px !important;
}

body.force-mobile .marker-type-selector button {
    font-size: 13px !important;
    padding: 8px 12px !important;
    min-height: 40px !important;
}