/* 시대 지도 셸 레이아웃 */
body.map-page { overflow: hidden; }

#philo-map {
  position: fixed; inset: 0;
  background: var(--sea);
  z-index: 1;
  transition: background .35s ease;
}
.leaflet-container { background: var(--sea) !important; font: inherit; }

/* 상단 헤더 */
.map-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.map-header .brand { display: flex; align-items: baseline; gap: 10px; }
.map-header .brand .logo { font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.map-header .brand .era-name { font-size: 14px; color: var(--ink-soft); }
.map-header .brand .logo .accent { color: var(--accent); }

/* 좌측 시대개요 패널 = 지역별 목차 + 순간이동 */
.era-panel {
  position: fixed; top: 64px; left: 12px; bottom: 96px;
  width: 300px; z-index: 900;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .25s ease;
}
.era-panel.collapsed { transform: translateX(-316px); }
.era-panel .era-thumb {
  height: 88px; overflow: hidden; position: relative; flex: none;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.era-panel .era-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-theme="night"] .era-panel .era-thumb img { filter: brightness(.8) saturate(.9); }
.era-panel .era-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--surface) 100%);
}
.era-panel h2 { font-size: 15px; margin: 0; padding: 10px 16px 8px; }
.era-panel .era-sub { font-size: 12.5px; color: var(--ink-soft); padding: 0 16px 10px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.era-panel .concurrent {
  font-size: 12px; padding: 10px 16px; color: var(--accent-warm);
  border-bottom: 1px solid var(--line); line-height: 1.5; min-height: 20px;
}
.era-panel .region-list { overflow-y: auto; padding: 8px 10px 14px; flex: 1; }
.region-block { margin-bottom: 10px; }
.region-block .region-name {
  font-size: 13px; font-weight: 700; padding: 6px 8px; cursor: pointer;
  border-radius: 8px;
}
.region-block .region-name:hover { background: var(--surface-2); color: var(--accent); }
.region-block .person-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 5px 8px 5px 16px; cursor: pointer; border-radius: 8px;
  color: var(--ink-soft); opacity: .55; transition: opacity .2s ease;
}
.region-block .person-item.on { opacity: 1; color: var(--ink); font-weight: 700; }
.region-block .person-item.on .person-dot { box-shadow: 0 0 0 3px rgba(46,111,191,.18); }
.region-block .person-item:hover { background: var(--surface-2); color: var(--ink); opacity: 1; }
.region-block .person-item .yr { margin-left: auto; font-size: 10.5px; color: var(--ink-soft); font-weight: 400;
  white-space: nowrap; flex: none; }  /* 'BC 470–399' 가 중간에서 끊기지 않도록 */
.person-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.panel-empty { font-size: 13px; color: var(--ink-soft); padding: 16px; line-height: 1.6; }

.panel-tab {
  position: fixed; top: 76px; left: 12px; z-index: 899;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; cursor: pointer; box-shadow: var(--shadow);
  font-size: 13px;
}

/* 우측 인물 카드 패널 */
.info-panel {
  position: fixed; top: 64px; right: 12px; bottom: 96px;
  width: 360px; z-index: 950;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow-y: auto;
  transform: translateX(390px);
  transition: transform .25s ease;
}
.info-panel.open { transform: translateX(0); }
.info-panel .close-btn {
  position: sticky; top: 8px; float: right; margin: 8px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer;
}
.info-panel .card { padding: 18px; }
.card .disc-chip { display: inline-block; font-size: 11px; color: #fff; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.card h3 { margin: 0 0 2px; font-size: 21px; }
.card .life { font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }
.card .tagline { font-size: 14px; color: var(--accent-warm); margin-bottom: 14px; }
.card h4 { font-size: 13px; margin: 18px 0 6px; color: var(--accent); letter-spacing: .04em; }
.card .era-context, .card .story { font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.quote-block { background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 12px 14px; margin: 8px 0; }
.quote-block .src { font-size: 13.5px; line-height: 1.65; font-style: italic; }
.quote-block .explain { font-size: 13px; line-height: 1.65; margin-top: 8px; color: var(--ink-soft); }
.quote-block .explain::before { content: "쉽게 말하면 — "; font-weight: 700; color: var(--accent-warm); }
html[data-lang="en"] .quote-block .explain::before { content: "In plain words — "; }
.q-list { padding-left: 18px; margin: 6px 0; font-size: 13.5px; line-height: 1.8; }
.final-q {
  margin-top: 18px; padding: 14px; border-radius: 12px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px dashed var(--accent);
  font-size: 14px; line-height: 1.65; font-weight: 600;
}
.final-q::before { content: "❓ 마지막 질문"; display: block; font-size: 11px; color: var(--accent); margin-bottom: 6px; letter-spacing: .06em; }
html[data-lang="en"] .final-q::before { content: "❓ One last question"; }
.demo-badge { display: inline-block; font-size: 10px; background: var(--accent-warm); color: #fff; border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }

/* 하단 타임 슬라이더 */
.time-dock {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 1000; width: min(720px, calc(100% - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px 20px 10px;
}
.time-dock .year-label { text-align: center; font-size: 15px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.time-dock input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.time-dock .tick-row { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }

/* 범례 */
.legend {
  position: fixed; right: 12px; bottom: 96px; z-index: 900;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 10px 14px; font-size: 12px;
}
/* 인물 카드가 열리면 범례를 숨기지 않고 카드 왼쪽으로 비켜 준다.
   카드는 대개 지도 링크(?p=)로 바로 열리므로, 숨기면 그 경로로 들어온 사람은
   분과 색이 무슨 뜻인지 끝내 알 수 없게 된다. (카드 폭 360px + 여백) */
.info-panel.open ~ .legend { right: 384px; }
@media (max-width: 1100px) {
  /* 지도 폭이 좁으면 비켜 줄 자리가 없다 — 이때만 접는다 */
  .info-panel.open ~ .legend { display: none; }
}
.legend { transition: right .28s ease; }
.legend .row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.legend .row.absent { opacity: .28; }
.legend .row .sw { width: 10px; height: 10px; border-radius: 50%; }
.legend .cap { font-size: 10.5px; color: var(--ink-soft); margin-top: 6px; max-width: 170px; line-height: 1.45; }

/* 마커 — 그 시대 인물은 항상 지도에 있고, 슬라이더 시점에 활동 중이면 진해진다 */
.philo-marker {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 6px rgba(0,0,0,.35);
  transition: opacity .25s ease;
}
html[data-theme="night"] .philo-marker { border-color: rgba(233,226,210,.85); }
.philo-marker.is-dim { opacity: .3; border-width: 1.5px; box-shadow: none; }
.philo-marker.is-active {
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 2px 10px rgba(0,0,0,.4);
  animation: philoPulse 2.4s ease-in-out infinite;
}
html[data-theme="night"] .philo-marker.is-active { box-shadow: 0 0 0 4px rgba(232,169,76,.28), 0 2px 12px rgba(0,0,0,.6); }
@keyframes philoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .philo-marker.is-active { animation: none; } }
.philo-marker-label {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 2px 8px; font-size: 11.5px; white-space: nowrap;
  box-shadow: var(--shadow);
}

.card .go-route { display: inline-block; margin: 12px 0 0; font-size: 13px; padding: 9px 15px;
  border-radius: 999px; text-decoration: none; border: 1px solid var(--accent);
  color: var(--accent); background: var(--surface); }
.card .go-route:hover { background: var(--accent); color: var(--bg); }

/* .fam-inpanel — 지도 좌측 패널의 형제 사이트 블록은 걷어냈다.
   목록을 끝까지 내렸을 때 나오는 것이 인물이 아니라 외부 링크라 흐름이 끊겼다.
   형제 사이트로 가는 길은 포털 하단에 있다. */

/* 데스크톱 전용 요소 — 모바일에서 다시 켠다 */
.sheet-grip { display: none; }
.legend-tab { display: none; }
.panel-scrim { display: none; }

@media (max-width: 1024px) and (min-width: 861px) {
  .era-panel { width: 260px; }
  .info-panel { width: 340px; }
}

/* ============================================================
   모바일 (≤860px)
   - 정보 카드: 우측 패널 → 하단 시트 (미리보기 / 절반 / 전체 3단)
   - 시대 패널: 좌측 드로어 + 스크림, 기본 접힘
   - 범례: 숨김이 아니라 토글 버튼으로 접근
   - 슬라이더는 항상 살아 있다 (시트가 그 위에서 멈춘다)
   ============================================================ */
@media (max-width: 860px) {
  :root { --dock-h: 74px; }

  /* --- 헤더 살짝 압축 --- */
  .map-header { padding: 8px 12px; }
  .map-header .brand { flex-direction: column; gap: 0; align-items: flex-start; }
  .map-header .brand .logo { font-size: 15px; }
  .map-header .brand .era-name { font-size: 11.5px; }
  .toggles .tgl { padding: 5px 9px; font-size: 12px; }

  /* --- 시대 패널: 드로어 --- */
  .era-panel {
    top: 56px; left: 0; bottom: calc(var(--dock-h) + 8px);
    width: min(300px, 84vw);
    border-radius: 0 16px 16px 0;
    border-left: none;
    z-index: 1100;
  }
  .era-panel.collapsed { transform: translateX(-101%); }
  .panel-scrim {
    display: block; position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,.34); opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .panel-scrim.on { opacity: 1; pointer-events: auto; }
  .panel-tab { top: 64px; left: 10px; padding: 9px 12px; font-size: 15px; }
  .era-panel .era-thumb { height: 64px; }

  /* --- 정보 카드 = 하단 시트 --- */
  .info-panel {
    top: auto; right: 0; left: 0; bottom: var(--dock-h);
    width: 100%;
    height: 38vh;
    max-height: calc(100% - 56px - var(--dock-h));
    border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    box-shadow: 0 -8px 28px rgba(0,0,0,.22);
    transform: translateY(calc(100% + var(--dock-h)));
    transition: transform .28s cubic-bezier(.32,.72,0,1), height .28s cubic-bezier(.32,.72,0,1);
    overscroll-behavior: contain;
  }
  html[data-theme="night"] .info-panel { box-shadow: 0 -8px 28px rgba(0,0,0,.55); }
  .info-panel.open { transform: translateY(0); }
  .info-panel.dragging { transition: none; }
  .info-panel[data-sheet="peek"] { height: 38vh; }
  .info-panel[data-sheet="half"] { height: 62vh; }
  .info-panel[data-sheet="full"] { height: calc(100% - 56px - var(--dock-h)); }

  /* 어느 단계에서든 카드 내용은 스크롤된다. 미리보기에서 내용을 밀어 올리면
     시트가 스스로 절반 단계로 올라간다(아래 mapShell.js). */
  .info-panel { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }

  .sheet-grip {
    display: block; position: sticky; top: 0; z-index: 5;
    padding: 14px 0 10px; min-height: 34px; cursor: grab; touch-action: none;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
  }
  .sheet-grip .bar {
    display: block; width: 44px; height: 5px; margin: 0 auto;
    border-radius: 99px; background: var(--line);
  }
  .sheet-grip:active .bar { background: var(--accent); }
  /* 스크롤되는 시트 안이므로 sticky + float 로 우상단에 붙여둔다 */
  .info-panel .close-btn {
    position: sticky; top: 8px; float: right;
    margin: -34px 10px 0 0; z-index: 6; width: 32px; height: 32px;
  }
  .info-panel .card { padding: 4px 16px 24px; }
  .card h3 { font-size: 19px; }

  /* --- 범례: 토글 --- */
  .legend-tab {
    display: block; position: fixed; right: 10px; top: 64px; z-index: 1150;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink);
    border-radius: 999px; padding: 7px 13px; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    box-shadow: var(--shadow); line-height: 1;
  }
  .legend-tab.on { border-color: var(--accent); color: var(--accent); }
  .legend {
    display: block; top: 104px; right: 10px; bottom: auto;
    max-width: 74vw; z-index: 1140;
    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .legend.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
  /* 데스크톱 규칙 무효화 — 모바일에서는 카드가 하단 시트라 비켜 줄 필요가 없다.
     right 도 되돌린다(안 그러면 384px 이 남아 화면 밖으로 밀린다) */
  .info-panel.open ~ .legend { display: block; right: 10px; }
  .legend .cap { max-width: none; }

  /* --- 슬라이더: 항상 접근 가능하게 압축 --- */
  .time-dock {
    bottom: 0; left: 0; transform: none; width: 100%;
    border-radius: 14px 14px 0 0; border-bottom: none;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
  }
  .time-dock .year-label { font-size: 14px; margin-bottom: 4px; }
  .time-dock input[type="range"] { height: 28px; }
  .time-dock .tick-row { font-size: 9.5px; }

  /* 줌 버튼은 시트·슬라이더와 겹친다. 터치에서는 핀치로 충분하므로 숨긴다 */
  .leaflet-control-zoom { display: none; }
}

@media (max-width: 560px) {
  .info-panel[data-sheet="peek"] { height: 42vh; }
  .legend { font-size: 11.5px; padding: 9px 12px; }
}

/* 가로 화면(낮은 높이)에서는 미리보기를 더 낮게 */
@media (max-width: 860px) and (max-height: 520px) {
  .info-panel[data-sheet="peek"] { height: 52vh; }
  .info-panel[data-sheet="half"] { height: 72vh; }
}

/* 범례 하단 안내 */
.legend .cap.marker-hint { border-top: 1px solid var(--line); padding-top: 6px; }

/* 시대 구분에 관한 각주 — 지도의 뼈대가 특정 학자의 가설일 때 그 사실을 밝힌다.
   확정된 사실과 해석을 구분해 온 편집 원칙을 지도 자체에도 적용한 것이다. */
.era-note {
  margin: 0; padding: 13px 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 11.5px; line-height: 1.7; color: var(--ink-soft);
}
.era-note b {
  display: block; font-size: 10px; letter-spacing: .1em;
  color: var(--ink-soft); opacity: .8; margin-bottom: 5px; font-weight: 700;
}