:root {
    --ink:#1a1714; --paper:#e8e0d0; --paper-dark:#d4c8b0;
    --battle:#c44536; --political:#3a8261; --righteous:#8367a8;
    --uprising:#d4a04a; --massacre:#7a1f1f; --policy:#5a6b8c; --plot:#b5762a;
    --gold:#b89860;
  }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html, body { height:100%; margin:0; overflow:hidden; }
  body { font-family:-apple-system,'Apple SD Gothic Neo',sans-serif; background:var(--ink); color:var(--paper);
    position:relative; width:100%; height:100dvh; overflow:hidden; touch-action:manipulation; }

  #map { position:absolute; inset:0; width:100%; height:100%; background:#222b30; z-index:1; }

  .occupation-vignette {
    position:absolute; inset:0; z-index:400; pointer-events:none;
    box-shadow: inset 0 0 0 6px rgba(139,30,30,0.55), inset 0 0 90px 20px rgba(139,30,30,0.35);
    transition: opacity 0.6s ease;
  }
  .occupation-tag {
    display:inline-block; margin-top:8px; pointer-events:none;
    font-size:10px; color:rgba(196,69,54,0.85); letter-spacing:3px;
    border:1px solid rgba(196,69,54,0.4); border-radius:3px;
    padding:2px 7px;
    transition: opacity 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  }
  .occupation-tag.liberated { color:rgba(184,152,96,0.95); border-color:rgba(184,152,96,0.5); }

  .header { position:absolute; top:0; left:0; right:0; z-index:600; padding:14px 18px 26px;
    background:linear-gradient(180deg,rgba(20,17,12,0.9),rgba(20,17,12,0.35) 75%,transparent); pointer-events:none; }
  .title { font-size:19px; font-weight:800; letter-spacing:3px; }
  .subtitle { font-size:10px; color:var(--gold); letter-spacing:2px; margin-top:3px; }

  .year-display { position:absolute; top:62px; left:18px; z-index:600; pointer-events:none; }
  .year-number { font-size:50px; font-weight:800; line-height:1; text-shadow:0 2px 16px rgba(0,0,0,0.95); }
  .year-label { font-size:11px; color:var(--gold); letter-spacing:3px; margin-top:6px; padding-left:3px; }

  /* ── 우측 상단 스택: 검색 / 범례 / 레이어 ── */
  /* 데스크톱: 한 flex 컨테이너 안에 세로로 쌓아, 검색이 펼쳐져 높이가
     늘어나도 그 아래 범례·레이어가 자동으로 밀려나며 겹치지 않는다.
     모바일(@media max-width:480px 아래쪽 블록 참고): 이 스택을 해제하고
     검색은 상단 전체폭 고정, 범례·레이어는 각자 원래 자리로 되돌린다 —
     지시서가 모바일에 한해 기존(전체폭) 구조 유지를 명시적으로 허용했다. */
  .right-stack {
    position:absolute; top:12px; right:12px; z-index:700;
    display:flex; flex-direction:column; align-items:flex-end; gap:10px;
    max-width:calc(100vw - 24px);
  }

  /* ── 검색 위젯: 기본 접힘, 클릭 시 펼침 ── */
  .search-widget { /* 데스크톱에서는 .right-stack의 flex item, 위치는 부모가 결정 */ }
  .search-toggle-btn {
    background:rgba(20,17,12,0.85); border:1px solid rgba(184,152,96,0.4);
    color:var(--gold); font-size:12px; letter-spacing:1px; cursor:pointer;
    padding:9px 16px; border-radius:20px; backdrop-filter:blur(6px);
    font-family:inherit; white-space:nowrap;
  }
  .search-toggle-btn:hover, .search-toggle-btn:active { background:rgba(40,34,24,0.92); }
  /* 펼쳐진 입력창: 기본은 폭 0·투명으로 숨겨두고, .open일 때만 보인다.
     transition으로 150~200ms 열림 / 150ms 닫힘 애니메이션을 준다. */
  .search-expand {
    width:0; opacity:0; overflow:hidden; pointer-events:none;
    background:rgba(20,17,12,0.9); border:1px solid rgba(184,152,96,0.4);
    border-radius:14px; backdrop-filter:blur(6px);
    transition:width 180ms ease, opacity 150ms ease;
  }
  .search-widget.open .search-toggle-btn { display:none; }
  .search-widget.open .search-expand {
    width:320px; opacity:1; pointer-events:auto; /* 권장 280~360px 안의 값 */
  }
  .search-input-row { display:flex; align-items:center; gap:4px; padding:7px 8px 7px 14px; }
  .search-input {
    flex:1; min-width:0; background:transparent; border:none; outline:none;
    color:var(--paper); font-size:12px; font-family:inherit; padding:3px 0;
  }
  .search-input::placeholder { color:rgba(232,224,208,0.45); }
  .search-icon-btn {
    background:none; border:none; color:var(--gold); font-size:13px; cursor:pointer;
    padding:5px 6px; flex-shrink:0; line-height:1; font-family:inherit;
  }
  .search-x-btn {
    background:none; border:none; color:rgba(232,224,208,0.7); font-size:17px; cursor:pointer;
    padding:2px 6px; flex-shrink:0; line-height:1; font-family:inherit;
  }
  .search-x-btn:hover, .search-x-btn:active { color:#fff; }
  /* 검색 상태(결과 N개 / 결과 없음) — 입력창 바로 아래 작은 한 줄. 내용이
     없으면(빈 문자열) padding이 0이 되어 자리도 차지하지 않는다. */
  .search-status {
    font-size:11px; color:rgba(232,224,208,0.65); padding:0 14px;
    max-height:0; overflow:hidden; transition:max-height 150ms ease;
  }
  .search-status:not(:empty) { padding:0 14px 9px 14px; max-height:20px; }
  .search-status.no-result { color:#e8a0a0; }

  .legend {
    background:rgba(20,17,12,0.82); border:1px solid rgba(184,152,96,0.3);
    border-radius:6px; padding:9px 11px; backdrop-filter:blur(6px); max-width:140px;
  }
  .legend-title { font-size:9px; color:var(--gold); letter-spacing:2px; margin-bottom:6px; }
  .legend-item { display:flex; align-items:center; gap:6px; margin:3px 0; font-size:10px; }
  .legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .legend-area { width:10px; height:8px; border-radius:2px; flex-shrink:0; opacity:0.7; }

  /* 줌 컨트롤 위치는 이제 map.js에서 L.control.zoom({position:'bottomleft'})로
     지정한다 — 여기서는 시각적 테마(색상·블러)와 하단 타임라인 바에
     가리지 않도록 여백만 맞춘다. */
  .leaflet-control-zoom { margin-bottom:96px !important; margin-left:12px !important; }
  .leaflet-control-zoom a { background:rgba(20,17,12,0.82) !important; color:var(--paper) !important; border-color:rgba(184,152,96,0.3) !important; backdrop-filter:blur(6px); }
  .leaflet-control-zoom a:hover { background:rgba(40,34,24,0.92) !important; }

  /* ── 모바일: 검색은 전체폭 상단 고정, 범례·레이어는 원래 자리로 분리 ── */
  @media (max-width:480px) {
    .header { top:46px; }       /* 상단 검색바 공간 확보 */
    .year-display { top:108px; }
    .era-card { top:256px; }

    .right-stack { display:contents; } /* 데스크톱용 세로 스택 해제 */

    .search-widget { position:absolute; top:8px; left:12px; right:12px; z-index:700; }
    .search-toggle-btn { display:none; } /* 모바일은 항상 펼쳐진 상태 */
    .search-expand {
      width:auto !important; opacity:1 !important; pointer-events:auto !important;
    }
    .search-input { font-size:13px; } /* 모바일은 입력 가독성을 위해 살짝 키움 */

    .legend { position:absolute; top:106px; right:12px; z-index:600; }
    .layer-toggle { position:absolute; bottom:110px; right:12px; z-index:600; }
  }

  .timeline { position:absolute; bottom:0; left:0; right:0; z-index:600; padding:16px 20px 22px; touch-action:none;
    background:linear-gradient(0deg,rgba(20,17,12,0.95),rgba(20,17,12,0.6) 70%,transparent); }
  .slider-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--paper-dark); opacity:0.55; margin-bottom:7px; }
  input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:3px; touch-action:pan-x; background:var(--paper-dark); border-radius:2px; outline:none; opacity:0.8; }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--gold); border:3px solid var(--ink); cursor:pointer; }
  .hint { text-align:center; font-size:10px; color:var(--paper-dark); opacity:0.5; margin-top:9px; }

  .leaflet-popup-content-wrapper { background:var(--paper); color:var(--ink); border-radius:6px; max-width:300px; }
  .dokdo-tooltip { background:rgba(20,17,12,0.92); color:var(--gold); border:1px solid rgba(184,152,96,0.4); border-radius:4px; font-size:11px; padding:3px 8px; }
  .dokdo-tooltip::before { border-top-color:rgba(184,152,96,0.4); }
  .leaflet-popup-tip { background:var(--paper); }
  .leaflet-popup-content { margin:14px 16px; line-height:1.55; width:270px !important; }
  .pop-type { display:inline-block; font-size:10px; letter-spacing:1px; padding:2px 8px; border-radius:3px; color:#fff; margin-bottom:7px; }
  .pop-title { font-size:16px; font-weight:800; margin-bottom:2px; }
  .pop-date { font-size:11px; color:#8a7a5a; margin-bottom:6px; }
  .pop-duration { display:inline-block; font-size:10px; color:#7a6a45; background:rgba(184,152,96,0.15);
    border:1px solid rgba(184,152,96,0.35); border-radius:3px; padding:1px 7px; margin-bottom:7px; letter-spacing:0.5px; }
  .pop-people { font-size:11px; color:#6a5d44; margin-bottom:8px; }
  .pop-people b { color:#4a4030; }
  .pop-summary { font-size:13px; color:#36302a; }
  .pop-video { margin-top:10px; }
  .pop-video a { display:block; position:relative; border-radius:6px; overflow:hidden; text-decoration:none; }
  .pop-video img { width:100%; display:block; }
  .pop-video .play-badge {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,0.65);
    display:flex; align-items:center; justify-content:center;
  }
  .pop-video .play-badge::after {
    content:''; border-style:solid; border-width:8px 0 8px 13px;
    border-color:transparent transparent transparent #fff; margin-left:2px;
  }
  .pop-video .cap { font-size:11px; color:#8a7a5a; margin-top:5px; text-align:center; }


  /* 시대 부제 */
  .era-subtitle { margin-top:10px; pointer-events:none; }
  .era-text { font-size:13px; font-weight:600; color:rgba(232,224,208,0.85); letter-spacing:1px; line-height:1.3; max-width:220px; }
  .era-info-btn {
    display:inline-block; margin-top:5px; width:18px; height:18px; line-height:18px;
    text-align:center; border-radius:50%; border:1px solid rgba(184,152,96,0.5);
    font-size:10px; color:rgba(184,152,96,0.8); cursor:pointer; pointer-events:all;
    transition:all 0.2s;
  }
  .era-info-btn:hover { background:rgba(184,152,96,0.15); }
  .era-card {
    display:none; position:absolute; top:210px; left:18px; z-index:601;
    background:rgba(20,17,12,0.92); border:1px solid rgba(184,152,96,0.3);
    border-radius:6px; padding:10px 13px; max-width:240px; backdrop-filter:blur(8px);
  }
  .era-card.open { display:block; }
  .era-card p { font-size:12px; color:rgba(232,224,208,0.85); line-height:1.6; }

  /* 레이어 토글 — 데스크톱에서는 .right-stack의 flex item (위치는 부모가
     결정). 모바일에서는 위쪽 미디어쿼리가 position:absolute로 되돌린다. */
  .layer-toggle {
    background:rgba(20,17,12,0.82); border:1px solid rgba(184,152,96,0.3);
    border-radius:6px; padding:8px 10px; backdrop-filter:blur(6px);
  }
  .toggle-title { font-size:9px; color:var(--gold); letter-spacing:2px; margin-bottom:6px; }
  .toggle-item { display:flex; align-items:center; gap:7px; margin:4px 0; font-size:10px; cursor:pointer; user-select:none; }
  .toggle-item input[type=checkbox] { accent-color:var(--gold); width:12px; height:12px; cursor:pointer; }

  @keyframes ring-pulse { 0%{transform:scale(1);opacity:0.55;} 70%{transform:scale(2.2);opacity:0;} 100%{opacity:0;} }
  .pulse-ring { animation:ring-pulse 2.6s ease-out infinite; transform-origin:center; }

  /* ── historicalLabels.js 전용 스타일 [실험적, 기본 비활성] ── */
  .hist-label { white-space:nowrap; transform:translate(-50%,-50%); pointer-events:none; }
  .hist-label-sea { font-size:13px; letter-spacing:3px; color:rgba(180,200,220,0.9); text-shadow:0 0 5px rgba(10,20,30,0.9); }
  .hist-label-city { font-size:11px; letter-spacing:1px; color:rgba(232,224,208,0.92); text-shadow:0 0 4px rgba(10,20,30,0.9); font-weight:500; }
  .hist-label-pin { display:flex; align-items:center; gap:4px; }
  .hist-pin-dot { width:5px; height:5px; border-radius:50%; background:#e8e0d0; border:1px solid rgba(0,0,0,0.4); box-shadow:0 0 3px rgba(232,224,208,0.7); flex-shrink:0; }