/* 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}

/* 시도 라벨 — 전체 보기에서 큰 틀을 잡아준다. 확대할수록(시군구 라벨이
   늘어날수록) drawAnnotations()가 opacity를 낮춰 자연히 옅어진다. */
.anno-sido{
  fill:var(--gold); font-family:var(--serif); font-weight:600;
  text-anchor:middle; dominant-baseline:middle;
  pointer-events:none; user-select:none; letter-spacing:.02em;
}

/* 시군구 라벨 — 동해·독도와 같은 방식(우리가 직접 그리는 지명)이다.
   본문 텍스트와 겹치지 않도록 얇고 옅게, 폴리곤 색 위에서도 읽히도록
   옅은 외곽선을 그림자로 흉내낸다(진짜 stroke는 SVG 텍스트에서
   두꺼워 보이는 부작용이 있어 text-shadow 쪽을 쓴다). */
.anno-region{
  fill:var(--paper); font-family:var(--sans); font-weight:400;
  text-anchor:middle; dominant-baseline:middle;
  pointer-events:none; user-select:none; opacity:.82;
  paint-order:stroke; stroke:rgba(10,9,6,.55); stroke-width:2px; stroke-linejoin:round;
}
body.theme-day .anno-sido{fill:#8a6f36}
body.theme-day .anno-region{
  fill:#241f16; stroke:rgba(255,255,255,.55);
}

@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}
}

/* ── 상단 표시 — 지금 시점과 지도 색의 출처 ────────────────────
   시간축은 매달 움직이지만 선거는 4년마다다. 지도에 칠해진 색이
   어느 선거의 결과인지 밝히지 않으면 읽는 사람이 헷갈린다. */
.era-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: center;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(14,18,24,.82); border: 1px solid rgba(212,181,120,.22);
  backdrop-filter: blur(6px);
  font-size: 12px; color: #cfc7b6; pointer-events: none;
  max-width: calc(100% - 24px);
}
.era-banner .eb-when {
  font-family: var(--mono, monospace); color: #d4b578; letter-spacing: .04em;
}
.era-banner .eb-gov { color: #e8e2d5; font-weight: 500; }
.era-banner .eb-vote {
  color: #f0d9a0; font-weight: 500;
  border: 1px solid rgba(212,181,120,.4); border-radius: 999px;
  padding: 1px 9px; font-size: 11px;
}
.era-banner .eb-src {
  color: #948c7c; font-size: 11px;
  padding-left: 10px; border-left: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 720px) {
  .era-banner { font-size: 11px; gap: 7px; padding: 6px 12px; top: 8px; }
  .era-banner .eb-src { padding-left: 0; border-left: 0; width: 100%; text-align: center; }
}
.era-banner .eb-vote.eb-na {
  color: #a8c4e0; border-color: rgba(120,160,200,.42);
}

/* ── 범례 ──────────────────────────────────────────────
   색이 무슨 뜻인지 알 방법이 지도 안에 있어야 한다.
   특히 '칠해지지 않은 곳'이 무엇인지가 제일 헷갈린다 —
   선거가 없던 해인지, 그때 선거구가 없던 곳인지, 자료가 없는지. */
.map-legend {
  /* 오른쪽 위 확대 버튼(top:16px, 높이 4칸 ≈ 140px) 아래에 붙인다.
     하단 시간축과는 세로로 완전히 떨어져 있어 겹치지 않는다.
     왼쪽 아래는 시간축 라벨·안내문과 자리를 다투므로 피했다. */
  position: absolute; top: 168px; right: 14px; z-index: 600;
  background: rgba(14,18,24,.86); border: 1px solid rgba(212,181,120,.22);
  border-radius: 10px; padding: 8px 10px; backdrop-filter: blur(6px);
  font-size: 11.5px; color: #cfc7b6; width: 172px;
  max-height: calc(100% - 320px); overflow-y: auto;
}
.lg-toggle {
  background: none; border: 0; color: #d4b578; cursor: pointer;
  font-family: var(--mono, monospace); font-size: 10.5px;
  letter-spacing: .14em; padding: 0 0 6px; display: block;
}
.lg-toggle::after { content: ' ▾'; }
.map-legend.folded .lg-toggle::after { content: ' ▸'; }
.map-legend.folded .lg-body { display: none; }
.lg-row { display: flex; align-items: center; gap: 7px; padding: 2.5px 0; }
.lg-row i {
  width: 13px; height: 13px; border-radius: 3px; flex: none;
  display: inline-block;
}
.lg-row i.edge { border: 1px solid rgba(212,181,120,.4); }
.lg-sep { height: 1px; background: rgba(255,255,255,.12); margin: 6px 0 5px; }
.lg-note {
  color: #948c7c; font-size: 10.5px; line-height: 1.55;
  margin-top: 5px; word-break: keep-all;
}
/* 정보 카드가 열리면 범례를 비운다 — 카드가 우측을 덮어 어차피 가려지고,
   가려진 채 남아 있으면 카드 뒤에서 비쳐 지저분해진다. */
.map-legend.hidden { opacity: 0; pointer-events: none; }
.map-legend { transition: opacity .18s ease; }

body.theme-day .map-legend {
  background: rgba(251,248,241,.92); border-color: rgba(90,74,42,.22); color: #3a342a;
}
body.theme-day .lg-toggle { color: #6f5828; }
body.theme-day .lg-note { color: #7a7263; }
body.theme-day .lg-sep { background: rgba(0,0,0,.12); }
@media (max-width: 720px) {
  /* 좁은 화면에서는 지도를 가리지 않도록 더 작게, 확대 버튼 바로 아래로. */
  .map-legend {
    top: 156px; right: 8px; width: 138px; font-size: 10.5px; padding: 7px 8px;
    max-height: calc(100% - 300px);
  }
  .lg-row i { width: 11px; height: 11px; }
}


/* ══ 정책 연대기 (2026-08 개편) ══
   시간축에서 해를 고르면 그 해의 정책·제도 기록이 리스트로,
   좌표가 있는 기록만 지도에 점으로. 지도는 배경, 리스트가 본문이다. */

/* 배경 지도 — 지역 클릭이 없으므로 손이 닿지 않게 한다.
   확대·이동은 svg 수준 핸들러라 그대로 동작한다. */
body.policy-era .sgg { pointer-events: none; }
body.policy-era #map .sgg { fill: var(--p-none); }

/* 분야 필터 칩 */
.fchips { display:flex; flex-wrap:wrap; gap:6px; padding:14px 0 12px;
  position:sticky; top:0; background:inherit; z-index:2 }
.fchip { font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  padding:5px 10px; border:1px solid var(--line); border-radius:999px;
  background:none; color:inherit; opacity:.82; cursor:pointer }
.fchip.on { opacity:1; border-color:var(--gold); color:var(--gold);
  background:var(--gold-soft, rgba(184,146,72,.12)) }

/* 기록 한 줄 */
.pitem { display:block; width:100%; text-align:left; background:none;
  color:inherit; border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:8px; padding:10px 12px; margin-bottom:8px; cursor:pointer }
.pitem:hover { border-color:var(--gold) }
.pitem.open { background:rgba(255,255,255,.03) }
body.theme-day .pitem.open { background:rgba(90,74,42,.05) }
.pi-r1 { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.pi-when { font-family:var(--mono); font-size:11px; opacity:.9 }
.pi-field { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em }
.pi-place { font-size:10.5px; opacity:.78; margin-left:auto }
.pi-title { font-family:var(--serif); font-weight:700; font-size:14.5px;
  margin-top:4px; letter-spacing:-.01em }
.pi-body { font-size:13px; line-height:1.7; margin-top:-4px; margin-bottom:8px;
  padding:0 12px 10px; border:1px solid var(--line); border-top:0;
  border-left:3px solid var(--gold); border-radius:0 0 8px 8px }
.pitem.open { border-bottom:0; border-radius:8px 8px 0 0; margin-bottom:0 }
/* 해석 — 사실(위 본문)과 다른 줄, 다른 결로. 기록 원칙 1번을 화면에서 지킨다 (2026-09-19) */
.pi-note { margin-top:8px; padding:7px 10px; border-left:2px solid var(--gold);
  background:rgba(128,128,128,.08); border-radius:0 6px 6px 0; font-family:var(--serif);
  font-size:12.5px; line-height:1.7 }
.pi-note b { font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.12em;
  color:var(--gold); margin-right:8px }
.pi-src { font-family:var(--mono); font-size:10.5px; opacity:.75; margin-top:8px;
  padding-top:8px; border-top:1px solid var(--line); line-height:1.7 }
/* 출처를 원문 있는 곳까지 — 링크임이 보이도록 밑줄을 남긴다 */
.src-go { color:var(--gold); text-decoration:underline; text-underline-offset:2px;
  white-space:nowrap }
.src-go:hover { text-decoration:none }

/* 빈 해 건너뛰기 */
.empty-jump { display:flex; flex-direction:column; gap:6px; margin-top:10px }
.ejump { font-size:12px; text-align:left; padding:7px 10px;
  border:1px solid var(--line); border-radius:7px; background:none;
  color:inherit; cursor:pointer }
.ejump:hover { border-color:var(--gold); color:var(--gold) }

/* 지도 점 — 분야색은 패널이 말해주므로 점은 한 색으로 조용히 */
body.policy-era .news-pin .pin-dot { fill:var(--gold, #b8924a) }
body.policy-era .news-pin .pin-halo { fill:var(--gold, #b8924a); opacity:.16 }
body.policy-era .news-pin.active .pin-dot { fill:#fff0d0 }
body.policy-era .pin-leader { stroke:var(--gold, #b8924a); opacity:.5 }
body.policy-era .pin-anchor { fill:var(--gold, #b8924a); opacity:.7 }

/* 접힌 패널 다시 여는 단추 (모바일) */
.panel-open { position:absolute; right:14px; bottom:118px; z-index:5;
  font-family:var(--mono); font-size:12px; padding:9px 14px;
  border-radius:999px; border:1px solid var(--line);
  background:var(--paper-card, #1d1a14); color:inherit; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25) }

/* ══ 시대개요 패널 (왼쪽) ══
   오른쪽 기록 패널과 짝을 이룬다 — 그 해가 어떤 해였나.
   첫 화면에서 바로 보이고, 상단 제목줄로 접을 수 있다. */
.era-note {
  position:absolute; top:58px; left:14px; z-index:640;
  width:302px; max-width:calc(100% - 28px);
  max-height:calc(100% - 236px);
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(30,27,22,.94); border:1px solid var(--line-strong);
  border-radius:8px; box-shadow:0 14px 40px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
}
body.theme-day .era-note { background:rgba(246,241,231,.95); }

.en-fold {
  flex:none; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--gold); padding:11px 15px 9px; border-bottom:1px solid var(--line);
}
.en-fold::after { content:' ▾'; opacity:.7 }
.era-note.folded .en-fold::after { content:' ▸' }
.era-note.folded .en-body { display:none }
.era-note.folded { max-height:none }

.en-body { overflow-y:auto; padding:12px 15px 16px; overscroll-behavior:contain }

.en-year {
  font-family:var(--serif); font-weight:700; font-size:26px;
  letter-spacing:-.02em; line-height:1;
}
.en-year small {
  display:inline-block; margin-left:8px; font-family:var(--sans);
  font-weight:400; font-size:11.5px; color:var(--ink-dim); letter-spacing:0;
}
.en-elec {
  margin-top:9px; font-size:11.5px; line-height:1.6; color:var(--gold);
  padding:6px 9px; border:1px solid var(--line); border-radius:6px;
  background:var(--gold-soft);
}
.en-elec em { font-style:normal; opacity:.75; font-size:10.5px }
.en-agenda {
  font-family:var(--serif); font-weight:700; font-size:15.5px;
  margin-top:13px; letter-spacing:-.01em;
}
.en-agenda.en-tbd { color:var(--ink-dim); font-size:13px; font-weight:500 }
.en-text { font-size:12.5px; line-height:1.75; margin-top:7px; word-break:keep-all }
.en-gov { margin-top:12px; border-top:1px solid var(--line); padding-top:10px }
.en-gov summary {
  cursor:pointer; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; color:var(--ink-dim); list-style:none;
}
.en-gov summary::before { content:'▸ '; color:var(--gold) }
.en-gov[open] summary::before { content:'▾ ' }
.en-gov p { font-size:12px; line-height:1.7; margin-top:8px; color:var(--ink-dim); word-break:keep-all }

/* 좁은 화면 — 지도 상단을 덮는 카드로. 접으면 제목줄만 남는다 */
@media (max-width:860px){
  .era-note {
    top:52px; left:10px; right:10px; width:auto; max-height:34vh;
  }
  .en-year { font-size:22px }
}

/* ══ 정책 연대기 상단 정돈 (2026-08-07) ══
   연도·정부를 year-display, era-banner, era-note 셋이 각각 말하며
   좁은 화면에서 서로 겹쳤다. 개요 패널 하나로 합치고 나머지는 내린다.
   접었을 때는 제목줄이 그 정보를 대신 말한다. */
body.policy-era .year-display,
body.policy-era .era-banner { display: none; }

body.policy-era .era-note { top: 14px; }

/* 제목줄 — 접어도 지금 보는 해가 보인다 */
.en-fold {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.en-fold b {
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  letter-spacing: -.01em;
}
.en-fold span { font-family: var(--sans); font-size: 12px; color: var(--ink-dim); }
.en-fold em {
  margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--ink-dim);
}

/* 개요 → 기록으로 건너가는 버튼 */
.en-torecord {
  display: block; width: 100%; margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--gold); border-radius: 8px;
  background: var(--gold-soft); color: var(--gold);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  cursor: pointer; text-align: center;
}
.en-torecord:hover { background: var(--gold); color: #fff; }

/* '기록 보기' 단추 — 시간축(z-index 600) 위로 올린다.
   이전에는 z-index 5여서 시간축에 묻혀 눌리지 않았다. */
.panel-open {
  z-index: 620; bottom: 152px;
  background: rgba(30,27,22,.96); border-color: var(--gold); color: var(--gold);
}
body.theme-day .panel-open { background: rgba(246,241,231,.97); }
.panel-open:hover { background: var(--gold); color: #fff; }

@media (max-width: 860px) {
  body.policy-era .era-note { top: 10px; left: 10px; right: 10px; max-height: 42vh; }
  .panel-open { bottom: 146px; right: 10px; }
  .en-fold em { display: none; }
}