/* css/map.css — 지도 페이지(maps/era3 등) 공통 스타일.
   css/style.css의 토큰을 이어받아 지도 화면만 담당한다.

   레이아웃: 상단바(52px) / 좌측 지도 + 우측 패널 / 지도 위에 겹치는 시간축.
   시간축을 푸터가 아니라 지도 위 오버레이로 둔 것은 ATLAS 지도들과
   같은 방식이다 — 지도 면적을 최대한 확보하기 위해서다. */

/* ── 본문 ──
   지도가 화면 전체를 쓴다. 시간축과 정보 카드는 지도 위에 겹친다.
   ATLAS 지도들과 같은 방식이며, 이렇게 해야 지도가 가장 커진다. */
main{height:calc(100% - 52px)}
#mapwrap{position:relative; height:100%; overflow:hidden}
svg#map{width:100%; height:calc(100% - 138px); display:block;
  touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none}
svg#map.dragging{cursor:grabbing}
path.sgg{
  fill:var(--p-none); stroke:#0E1218; stroke-width:.6; cursor:pointer;
  vector-effect:non-scaling-stroke;   /* 확대해도 경계선 굵기 유지 */
  transition:fill .18s ease;
}
path.sgg:hover{stroke:var(--paper); stroke-width:1.4}
path.sgg.sel{stroke:var(--paper); stroke-width:2.2}
path.sgg.sibling{stroke:#B9B2A4; stroke-width:1.2}
.sido-line{fill:none; stroke:#0B0E13; stroke-width:1.1; pointer-events:none; opacity:.9}

#tip{
  position:absolute; pointer-events:none; opacity:0; transition:opacity .12s;
  background:#0C1017; border:1px solid var(--line-strong); padding:5px 9px;
  font-size:12px; white-space:nowrap; transform:translate(-50%,-140%);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
#tip .t2{font-family:var(--mono); font-size:10.5px; color:var(--paper-dim)}

/* ── 사이드 패널 ── */
/* ── 정보 카드 (오른쪽 오버레이) ──
   상시 표시되는 컬럼이 아니라, 지역을 눌렀을 때만 밀려 나온다.
   닫는 방법은 세 가지 — × 버튼, Esc, 그리고 지도의 빈 바다를 누르기. */
.info-card{
  position:absolute; top:14px; right:14px; bottom:150px; width:352px; max-width:calc(100% - 28px);
  z-index:650; display:flex; flex-direction:column; overflow:hidden;
  background:rgba(30,27,22,.96); border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  transform:translateX(14px); opacity:0; pointer-events:none;
  transition:transform .22s cubic-bezier(.22,.8,.3,1), opacity .18s ease;
}
.info-card.open{transform:translateX(0); opacity:1; pointer-events:auto}
.info-card[hidden]{display:none}
.info-close{
  position:absolute; top:9px; right:10px; z-index:2;
  width:26px; height:26px; padding:0; line-height:1; font-size:17px; cursor:pointer;
  background:none; border:1px solid transparent; border-radius:4px; color:var(--paper-dim);
  transition:background .15s, color .15s;
}
.info-close:hover{background:rgba(184,152,96,.2); color:var(--paper)}

/* 지도 위 안내 문구 */
.map-hint{
  position:absolute; left:20px; bottom:150px; z-index:600; pointer-events:none;
  font-size:11.5px; color:var(--paper-dim); opacity:.7;
  transition:opacity .2s;
}
.map-hint.gone{opacity:0}

.pnl-head{padding:16px 18px 13px; border-bottom:1px solid var(--line)}
.pnl-when{font-family:var(--mono); font-size:11px; color:var(--gold); letter-spacing:.06em}
.pnl-where{font-family:var(--serif); font-weight:700; font-size:21px; margin-top:3px; letter-spacing:-.02em}
.pnl-gov{font-size:11.5px; color:var(--paper-dim); margin-top:5px}
.pnl-body{flex:1; overflow-y:auto; padding:4px 18px 22px; overscroll-behavior:contain}

.sec{margin-top:18px}
.sec-h{
  display:flex; align-items:baseline; gap:8px; padding-bottom:7px;
  border-bottom:1px solid var(--line); margin-bottom:10px;
}
.sec-h h3{font-size:11px; font-weight:600; color:var(--paper-dim); letter-spacing:.14em}
.sec-h em{font-family:var(--mono); font-size:10px; color:var(--paper-dim); font-style:normal}

.card{
  border:1px solid var(--line); border-left-width:3px; background:var(--ink-panel);
  padding:10px 12px; margin-bottom:7px; cursor:pointer; text-align:left; width:100%;
  color:inherit; font:inherit; transition:border-color .15s, background .15s;
}
.card:hover{background:rgba(184,152,96,.12); border-color:var(--line-strong)}
.card .r1{display:flex; align-items:baseline; gap:8px}
.card .nm{font-family:var(--serif); font-weight:700; font-size:15.5px}
.card .pt{font-size:11.5px; color:var(--paper-dim)}
.card .r2{font-family:var(--mono); font-size:10.5px; color:var(--paper-dim); margin-top:3px; letter-spacing:.02em}
.badge{
  font-family:var(--mono); font-size:9.5px; padding:1px 5px; border:1px solid currentColor;
  letter-spacing:.05em; flex-shrink:0;
}
.b-appt{color:#8E99A6}
.b-elec{color:#7FA88C}

.empty-legacy{
  border:1px dashed var(--line-strong); padding:14px; font-size:12px; color:var(--paper-dim);
  line-height:1.7;
}
.empty b{display:block; color:var(--paper-dim); font-weight:500; margin-bottom:5px; font-size:12.5px}
.empty code{font-family:var(--mono); font-size:10.5px; color:#7E8894}

.note{font-size:11px; color:var(--paper-dim); line-height:1.65; margin-top:12px; padding-top:11px; border-top:1px solid var(--line)}

/* ── 줌 컨트롤 ── */
.zoom-ctl{position:absolute; top:16px; right:14px; z-index:600; display:flex; flex-direction:column; gap:5px}
.zoom-ctl button{
  width:30px; height:30px; padding:0; cursor:pointer; border-radius:5px;
  background:rgba(20,26,34,.85); border:1px solid rgba(184,152,96,.35);
  color:var(--gold); font:inherit; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.zoom-ctl button:hover{background:rgba(184,152,96,.25)}
.zoom-ctl button:disabled{opacity:.35; cursor:default}
.zoom-ctl .zlv{
  font-family:var(--mono); font-size:9px; color:var(--paper-dim); text-align:center;
  background:none; border:0; height:auto; cursor:default; pointer-events:none;
}

/* ── 연도 표시 (ATLAS year-display) ── */
.year-display{position:absolute; top:16px; left:20px; z-index:600; pointer-events:none}
.year-number{font-family:var(--serif); font-size:50px; font-weight:700; line-height:1;
  text-shadow:0 2px 16px rgba(0,0,0,.95); letter-spacing:-.02em}
.year-label{font-size:11px; color:var(--gold); letter-spacing:3px; margin-top:6px; padding-left:3px}

/* ── 하단 시간축 (ATLAS 바 형태: 중세2 챕터 띠 + 근대 연도 슬라이더) ── */
.timeline{
  position:absolute; bottom:0; left:0; right:0; z-index:600; padding:14px 18px 14px;
  background:linear-gradient(0deg,rgba(13,17,23,.97),rgba(13,17,23,.72) 70%,transparent);
  touch-action:pan-x;
}
.slider-labels{position:relative; height:13px; font-family:var(--mono); font-size:10px;
  color:var(--paper-dim); opacity:.65; margin-bottom:7px}
.slider-labels span{position:absolute; top:0; white-space:nowrap; transform:translateX(-50%)}

/* ── 슬라이더와 정부 띠가 공유하는 하나의 시간축 ──
   썸(24px)의 중심 이동 범위는 [12px, W-12px]. 정부 띠도 좌우 12px을
   비워 같은 구간을 쓰므로, 썸 위치와 정부 블록 경계가 정확히 일치한다. */
.sync-area{position:relative}
.slider-wrap{position:relative; height:24px; display:flex; align-items:center}
.elec-marks{position:absolute; left:12px; right:12px; top:0; height:8px; pointer-events:none}
.elec-marks button{
  position:absolute; top:0; width:2px; height:8px; transform:translateX(-50%);
  border:0; padding:0; cursor:pointer; pointer-events:auto;
}
.elec-marks button::after{content:''; position:absolute; inset:-6px -4px}
.e-na{background:#5f86b3} .e-pr{background:#c25a4d} .e-lo{background:#6f9c7f}

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; touch-action:pan-x;
  background:var(--paper-dim); border-radius:2px; outline:none; opacity:.8; margin:0;
}
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;
}
input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--gold);
  border:3px solid var(--ink); cursor:pointer;
}

/* 재생헤드 — 썸에서 정부 띠까지 내려가는 세로선. 싱크를 눈으로 증명한다. */
.playhead{
  position:absolute; top:22px; bottom:0; width:1px; pointer-events:none; z-index:3;
  background:linear-gradient(180deg,rgba(184,152,96,.9),rgba(184,152,96,.25));
}

/* ── 정부 챕터 띠 (중세2 reign-band 형태 · 집권기간 완전 비례, 스크롤 없음) ── */
.gov-band{
  position:relative; display:flex; margin:9px 12px 0; height:52px;
  box-shadow:inset 0 0 0 1px rgba(184,152,96,.22); border-radius:6px; overflow:hidden;
}
.gov-chapter-btn{
  flex:0 0 auto; position:relative; min-width:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:0; cursor:pointer; color:inherit; font:inherit;
  background:rgba(184,152,96,.10); border:0;
  box-shadow:inset -1px 0 0 rgba(184,152,96,.22);
  transition:background .15s ease;
}
.gov-chapter-btn:last-child{box-shadow:none}
.gov-chapter-btn:hover{background:rgba(184,152,96,.24)}
.gov-chapter-btn.active{background:var(--gold-on)}
.gov-chapter-name{font-family:var(--serif); font-size:11.5px; font-weight:500; color:var(--paper);
  text-align:center; line-height:1.2; word-break:keep-all; white-space:nowrap; padding:0 3px}
.gov-chapter-years{font-family:var(--mono); font-size:9px; color:var(--paper); opacity:.55; white-space:nowrap}
.gov-chapter-btn.active .gov-chapter-name,
.gov-chapter-btn.active .gov-chapter-years{color:#1a1610; opacity:1}

/* 폭에 따라 라벨 표현을 바꾼다 — JS가 실측해서 클래스를 붙인다 */
.gov-chapter-btn.lbl-name .gov-chapter-years{display:none}
.gov-chapter-btn.lbl-name .gov-chapter-name{font-size:10.5px}
.gov-chapter-btn.lbl-vert .gov-chapter-years{display:none}
.gov-chapter-btn.lbl-vert .gov-chapter-name{
  writing-mode:vertical-rl; font-size:10px; letter-spacing:-.02em; line-height:1;
}
.gov-chapter-btn.lbl-tick .gov-chapter-name,
.gov-chapter-btn.lbl-tick .gov-chapter-years{display:none}
.gov-chapter-btn.lbl-tick{background:repeating-linear-gradient(135deg,
  rgba(184,152,96,.06) 0 3px, rgba(184,152,96,.20) 3px 6px)}
.gov-chapter-btn.lbl-tick.active{background:var(--gold-on)}
.gov-chapter-btn.lbl-tick{overflow:visible; z-index:2}
.gov-chapter-btn.lbl-tick::after{content:''; position:absolute; inset:-2px -5px}
/* 과도·권한대행 / 임시정부 구간 상단 표시 — 폭에 영향 없는 inset shadow로 그린다 */
.gov-chapter-btn.acting{box-shadow:inset -1px 0 0 rgba(184,152,96,.22), inset 0 2px 0 rgba(196,90,77,.65)}
.gov-chapter-btn.prov{box-shadow:inset -1px 0 0 rgba(184,152,96,.22), inset 0 2px 0 rgba(184,152,96,.7)}

/* ── 힌트줄 + 선거 이동 ── */
.hint{display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:10px; color:var(--paper-dim); opacity:.75; margin-top:7px}
.elec-step{
  background:none; border:1px solid rgba(184,152,96,.35); color:var(--gold);
  font:inherit; font-size:9.5px; padding:2px 7px; border-radius:3px; cursor:pointer;
  flex-shrink:0; transition:background .15s
}
.elec-step:hover{background:rgba(184,152,96,.2)}

/* ── 주간 지도 ──
   타일이 아니라 색으로만 그리므로 배경·경계선·주기 색만 바꾸면 된다. */
body.theme-day{background:#e9e3d4}
body.theme-day .site-head{background:#f2ece0; border-bottom-color:rgba(120,100,64,.28)}
body.theme-day .site-brand{color:#241f16}
body.theme-day .site-era,
body.theme-day .site-link{color:#6b6252}
body.theme-day .site-link{border-color:rgba(120,100,64,.3)}
body.theme-day path.sgg{stroke:#b9b099}
body.theme-day path.sgg:hover{stroke:#241f16}
body.theme-day path.sgg.sel{stroke:#241f16}
body.theme-day path.sgg.sibling{stroke:#6b6252}
body.theme-day .anno-sea{fill:#7c8a95}
body.theme-day .anno-island text{fill:#4a4436}
body.theme-day .anno-island circle{fill:#241f16}
body.theme-day .year-number{color:#241f16; text-shadow:0 2px 14px rgba(255,255,255,.9)}
body.theme-day .year-label{color:#8a6f36}
body.theme-day .timeline{
  background:linear-gradient(0deg,rgba(233,227,212,.97),rgba(233,227,212,.72) 70%,transparent);
}
body.theme-day .slider-labels,
body.theme-day .hint{color:#6b6252}
body.theme-day .gov-chapter-name{color:#241f16}
body.theme-day .gov-chapter-years{color:#4a4436}
body.theme-day .gov-chapter-btn{background:rgba(160,130,70,.14)}
body.theme-day .gov-chapter-btn:hover{background:rgba(160,130,70,.26)}
body.theme-day .gov-chapter-btn.active{background:rgba(184,152,96,.85)}
body.theme-day input[type=range]{background:#9d947f}
body.theme-day input[type=range]::-webkit-slider-thumb{border-color:#e9e3d4}
body.theme-day input[type=range]::-moz-range-thumb{border-color:#e9e3d4}
body.theme-day .info-card{
  background:rgba(246,241,232,.97); border-color:rgba(120,100,64,.3);
  box-shadow:0 18px 48px rgba(90,75,45,.22);
}
body.theme-day .pnl-where{color:#241f16}
body.theme-day .pnl-when{color:#8a6f36}
body.theme-day .pnl-gov,
body.theme-day .map-hint,
body.theme-day .info-close{color:#6b6252}
body.theme-day .card{background:rgba(160,130,70,.09); border-color:rgba(120,100,64,.22)}
body.theme-day .card .nm{color:#241f16}
body.theme-day .empty-block{border-color:rgba(120,100,64,.4); color:#6b6252}
body.theme-day .empty-block b{color:#241f16}
body.theme-day .zoom-ctl button{background:rgba(246,241,232,.9); border-color:rgba(120,100,64,.35); color:#8a6f36}
body.theme-day #tip{background:#f6f1e8; border-color:rgba(120,100,64,.35); color:#241f16}

/* ── 지도 주기 (동해·독도 등) ── */
.anno-sea{
  fill:#7f8f9c; font-family:var(--serif); font-weight:500;
  text-anchor:middle; dominant-baseline:middle;
  pointer-events:none; user-select:none; opacity:.85;
}
.anno-island text{
  fill:var(--paper); font-family:var(--sans); font-weight:500;
  dominant-baseline:middle; pointer-events:none; user-select:none;
}
.anno-island circle{fill:var(--paper); pointer-events:none}

@media (max-width:860px){
  /* 모바일에서는 정보 카드를 아래에서 올라오는 시트로 바꾼다.
     좁은 화면에서 옆으로 밀려 나오면 지도를 거의 다 가린다. */
  #mapwrap{height:100%}
  svg#map{height:calc(100% - 132px)}
  .site-era{display:none}
  .year-number{font-size:34px}
  .year-label{font-size:10px; letter-spacing:2px}
  .timeline{padding:10px 12px 10px}
  .gov-band{height:56px; margin:8px 12px 0}
  .hint{gap:8px; font-size:9.5px}
  .map-hint{display:none}
  .info-card{
    top:auto; right:0; left:0; bottom:0; width:100%; max-width:none;
    max-height:62%; border-radius:12px 12px 0 0; border-left:0; border-right:0; border-bottom:0;
    transform:translateY(16px);
  }
  .info-card.open{transform:translateY(0)}
  .pnl-where{font-size:19px}
}