/* NK 보조지표
   색은 자료의 성격을 뜻합니다. 화면 어디서든 같은 의미입니다.
     거울통계 #2F6F6A · 공식추정 #5C5B8A · 원격탐사 #A8642B · 미디어 #8A3A4A
   대시보드(index)는 파일 끝의 "관제실 테마"가 다크 토큰으로 덮습니다(2026-09-22).
   위 값들은 시설 페이지(dams)의 바탕이자 다크 테마의 밝은 짝입니다. */

/* 폰트도 lib/에 내려받아 둔다(CDN 금지 규칙). 가변 웨이트 하나로 전 굵기 커버.
   미설치 환경에서 맑은 고딕으로 떨어지던 것을 이 파일이 막는다. */
@font-face {
  font-family: "Pretendard";
  src: url("lib/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  /* block: 글꼴이 올 때까지 잠깐 비워 둔다. swap은 대체 글꼴(맑은 고딕)로
     먼저 그렸다가 바꾸는데, 두 글꼴의 폭·높이가 달라 헤더 이름이 커졌다
     작아지는 것처럼 보였다(2026-08-24). 2MB 가변 글꼴이라 첫 방문에만 체감. */
  font-display: block;
}

:root {
  --paper: #E9EBE7;
  --paper-2: #DEE1DC;
  --ink: #1C2420;
  --ink-2: #5A645C;
  --rule: #B7BEB8;
  --card: #F4F5F3;
  --c-mirror: #2F6F6A;
  --c-official: #5C5B8A;
  --c-remote: #A8642B;
  --c-media: #8A3A4A;
  --ok: #1D9E75;
  --bad: #C9502E;
  --warn: #B07B12;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.55 "Pretendard", "Malgun Gothic", system-ui, sans-serif;
}

h1, h2 { margin: 0; letter-spacing: -0.01em; }
.mono { font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
button { font: inherit; padding: 7px 16px; border: 1px solid var(--rule);
         background: var(--card); border-radius: 7px; cursor: pointer; }
button:hover { background: var(--paper-2); }
input[type=range] { accent-color: var(--c-remote); }
:focus-visible { outline: 2px solid var(--c-mirror); outline-offset: 2px; }

/* ── 머리와 신선도 레일 ─────────────────────────────── */
header { padding: 16px 22px 0; border-bottom: 1px solid var(--rule); }
h1 { font-size: 19px; font-weight: 800; }
.sub { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); max-width: 72ch; }

/* ── 헤더 브랜드 (2026-08-23 교체) ─────────────────────
   제공 디자인(header.html)을 옮긴 것. 원본은 IBM Plex를 CDN에서 불러왔지만
   이 저장소는 CDN 금지라 동봉 폰트(Pretendard)를 그대로 씁니다. 색도 원본의
   자체 변수 대신 여기 토큰에 매핑했습니다 — 팔레트가 두 벌이 되면 어긋납니다. */
.hdr { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 22px; background: var(--card);
  border-bottom: 1px solid var(--rule); }
.hdr__brand { display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit; }
.hdr__brand:focus-visible { outline: 2px solid var(--c-remote);
  outline-offset: 4px; border-radius: 3px; }
.hdr__mark { flex: none; width: 44px; height: 38px; display: block; }
.hdr__text { line-height: 1.25; }
.hdr__name { display: block; font-size: 23px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink); }
.hdr__sub { display: block; margin-top: 4px; font-size: 13.5px;
  font-weight: 400; color: var(--ink-2); }
.hdr__nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
/* 축척 사다리(광역 › 시설 › 변화 분석)와 읽을거리(이야기 · 소개)를 구분선으로 나눈다.
   세 번째 칸 「변화 분석」은 changes.html (2026-09-24, week9 map_v4 이식). */
.hdr__ladder { display: flex; align-items: center; gap: 10px; }
.hdr__step { color: var(--ink-2); opacity: .55; font-size: 15px; line-height: 1; padding-bottom: 3px; }
.hdr__group { display: flex; align-items: center; gap: 22px;
  padding-left: 16px; border-left: 1px solid var(--rule); }
.hdr__tab { color: var(--ink-2); text-decoration: none; padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease; }
.hdr__tab:hover { color: var(--c-remote); }
.hdr__tab.is-active { color: #5D3C1C; font-weight: 700;
  border-bottom-color: var(--c-remote); }
.hdr__tab:focus-visible { outline: 2px solid var(--c-remote);
  outline-offset: 3px; border-radius: 2px; }
/* 관측 기준월 — app.js가 프레임 색인(frames/index.json)에서 채웁니다.
   손으로 적으면 낡습니다: 화면이 낡은 달을 자신 있게 말하는 것이 최악입니다. */
.hdr__stamp { padding-left: 16px; border-left: 1px solid var(--rule);
  font-family: ui-monospace, monospace; font-size: 12.5px;
  color: var(--ink-2); opacity: .85; white-space: nowrap; }
/* 헤더 아래 한 줄 — 이 화면이 무엇을 하지 않는지. 브랜드 부제와 역할이 달라
   (부제=정체성, 이 줄=경고) 합치지 않습니다. */
.hdr-note { margin: 0; padding: 9px 22px; font-size: 12.5px;
  color: var(--ink-2); border-bottom: 1px solid var(--rule);
  background: var(--paper); }
@media (max-width: 760px) {
  .hdr { padding: 11px 16px; gap: 12px; }
  .hdr__name { font-size: 19px; }
  .hdr__sub { display: none; }
  .hdr__stamp { display: none; }
  .hdr__nav { gap: 14px; font-size: 14px; }
  .hdr__mark { width: 34px; height: 30px; }
}

/* 긴 설명용: 폭 제한 없이 가로로 쭉 — 줄 수가 줄어 헤더가 낮아진다. */
.sub.sub-cols { max-width: none; }

/* 세계의 시선: '오늘' 층 — 지난 신선도 레일의 칩 문법을 계승.
 * 색은 미디어층(--c-media) 하나. 좋음/나쁨 색 금지 — 관심도는 판정이 아님.
 * 극단(.ex)은 색이 아니라 굵기·크기로만 강조. */
.briefing { margin: 14px 22px 0; padding: 10px 14px 8px;
            background: var(--card); border-radius: 9px;
            border-left: 3px solid var(--c-media); }
.bf-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bf-head h2 { font-size: 13.5px; font-weight: 700; }
.bf-caveat { font-size: 10.5px; color: var(--ink-2); margin-left: auto;
             max-width: 46ch; text-align: right; }
.bf-caveat b { font-weight: 600; color: var(--ink); }

/* 이달 살펴볼 곳 — '세계의 시선'과 같은 카드 문법. 왼쪽 띠는 원격탐사색
   (바탕이 위성 관측이라). 줄 앞 꼬리표는 종류이지 등급이 아니다 —
   색을 나누지 않는 이유(좋다/나쁘다로 읽히면 안 됨). */
.guide { border-left-color: var(--c-remote); }
/* 접기: 제목 줄 전체가 손잡이. 기본은 펼침(입구 역할). 정상성 표와 같은 문법. */
.guidefold summary { cursor: pointer; list-style: none; }
.guidefold summary::-webkit-details-marker { display: none; }
.guidefold summary h2::before { content: "▾ "; color: var(--ink-2); font-weight: 400; }
.guidefold:not([open]) summary h2::before { content: "▸ "; }
.guidefold:not([open]) .bf-caveat { display: none; }
.guide-list { margin: 8px 0 2px; padding: 0; list-style: none; }
.guide-list li { display: flex; gap: 10px; align-items: baseline;
  padding: 5px 0; border-top: 1px solid var(--rule); font-size: 12.5px;
  line-height: 1.5; }
.guide-list li:first-child { border-top: none; }
.g-kind { flex: 0 0 38px; font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-2); opacity: .8; padding-top: 2px; }
.g-text { flex: 1 1 auto; color: var(--ink); }
.g-link { flex: 0 0 auto; font-size: 11px; color: var(--ink-2);
  text-decoration: none; border-bottom: 1px dotted var(--rule); white-space: nowrap; }
.g-link:hover { color: var(--ink); border-color: var(--ink-2); }
.g-more .g-text, .g-single .g-text { color: var(--ink-2); }
/* 지속 구간만 굵게 — 공표 대기는 한참 뒤 일이라 일반 크기(2026-09-23). */
.guide-list .g-confirmed .g-text { font-weight: 700; }
/* 두 칸 비교(규칙 / 다듬음). 왼쪽은 원문이라 흐리게, 오른쪽이 읽는 쪽. */
.guide-list.two-col li { display: grid; grid-template-columns: 38px 1fr 1fr auto;
  gap: 10px; align-items: start; }
.guide-list.two-col .g-rule { color: var(--ink-2); }
.guide-list.two-col .g-llm { color: var(--ink); }
.guide-list .g-head { border-top: none; padding-bottom: 2px; }
.guide-list .g-head .g-text { font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-2); opacity: .8; }
@media (max-width: 980px) {
  .guide-list.two-col li { grid-template-columns: 38px 1fr auto; }
  .guide-list.two-col .g-rule { display: none; }   /* 좁으면 다듬은 쪽만 */
  .guide-list .g-head { display: none; }
}
@media (max-width: 760px) { .guide-list li { flex-wrap: wrap; } }
.bf-row { display: flex; overflow-x: auto; margin: 8px -14px 0;
          border-top: 1px solid var(--rule); }
.bfcell { flex: 1 0 auto; min-width: 118px; padding: 7px 12px 8px;
          border-right: 1px solid var(--rule); }
.bfcell:last-child { border-right: none; }
.bfname { display: block; font-size: 11px; color: var(--ink-2); }
.bflabel { display: block; font-size: 13px; font-weight: 600; margin: 1px 0 2px; }
.bflabel.ex { font-size: 14.5px; font-weight: 800; }
.bfcell svg { display: block; width: 76px; height: 20px; }
.bfcell svg path { fill: none; stroke: var(--c-media); stroke-width: 1.2;
                   opacity: 0.7; }
/* 재생 커서 — 스택 차트의 세로 점선과 같은 문법 */
.bfcell svg .bfcur { stroke: #5A645C; stroke-width: 1;
                     stroke-dasharray: 2 3; opacity: 0.55; }
.bfdetail { display: block; font-size: 9.5px; color: var(--ink-2);
            opacity: 0.75; margin-top: 1px; }

/* ── 재생 막대 ──────────────────────────────────────── */
/* 사건 타임라인 바로 아래·지도 바로 위. 위쪽 여백이 음수인 것은 사건 카드와
   맞붙여 한 덩어리로 보이게 하려는 것입니다(둘이 같은 시간축을 씁니다). */
.playbar { display: flex; align-items: center; gap: 12px;
           margin: -6px 22px 14px; padding: 10px 14px;
           background: var(--card); border-radius: 9px; }
/* 사건 카드가 안 뜬 경우(events.json 로드 전·실패)엔 맞붙일 상대가 없으므로
   음수 여백을 되돌립니다. 안 그러면 재생 막대만 위로 딸려 올라갑니다. */
.evline[hidden] + .playbar { margin-top: 14px; }
.playbar button { min-width: 92px; }
.playbar input { flex: 1; }
#datelabel { min-width: 72px; text-align: right; font-size: 14.5px; }
#regimebadge { font-size: 11px; color: var(--ink-2); }

/* ── 사건 타임라인: 판정 없는 참조점 ─────────────────── */
.evline { margin: 14px 22px 0; padding: 7px 14px 8px;
          background: var(--card); border-radius: 9px; }
.evtrack { position: relative; height: 38px;
           border-bottom: 1px solid var(--rule); }
.evyear { position: absolute; top: 0; transform: translateX(-50%);
          font-size: 9.5px; color: var(--ink-2); opacity: 0.65;
          font-family: ui-monospace, Consolas, monospace; }
.evtick { position: absolute; width: 5px; height: 10px;
          transform: translateX(-50%); border-radius: 1px;
          cursor: pointer; opacity: 0.85; }
.evtick:hover { opacity: 1; outline: 1px solid var(--ink); }
.evcursor { position: absolute; top: 13px; bottom: 0; width: 0;
            border-left: 1px dashed #5A645C; opacity: 0.55;
            pointer-events: none; }
.evnow { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-2);
         min-height: 1.2em; }
.evnow .evlabel { font-weight: 600; color: var(--ink); margin-right: 4px; }

/* ── 본문: 지도 + 계열 ──────────────────────────────── */
main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
       gap: 18px; padding: 0 22px; align-items: start; }

/* 지도 위 안내를 얹으려면 자리를 잡아 줄 기준이 필요합니다. 시설 페이지의
   .map-wrap 은 sticky 라 이미 기준이 되고, 그쪽 규칙이 이 아래에 있어 덮습니다. */
.map-wrap { position: relative; }

/* 타일·오버레이는 #map의 자식 판(pane)이라 border-radius만으로는 모서리를
   넘어 그려집니다 — overflow:hidden 이 있어야 실제로 둥글게 잘립니다.
   반지름 9px은 다른 카드(.briefing·.playbar·.card)와 같은 값입니다. */
#map { height: 520px; background: #C8CEC8; border-radius: 9px;
       overflow: hidden; }
.leaflet-container { font-family: ui-monospace, monospace; }

/* 프레임 없는 달 안내 — 지도 우상단(줌 버튼은 좌상단이라 안 겹침).
   경고색을 쓰지 않습니다: 원본이 아직 안 나온 것은 관측 대상의 이상이
   아니라 자료원의 시계입니다(.rail-fail 과 같은 판단). */
.mapnote { position: absolute; top: 10px; right: 10px; z-index: 500;
  max-width: 268px; margin: 0; padding: 6px 9px;
  font-size: 11px; line-height: 1.45; color: var(--ink-2);
  background: rgba(255,255,255,0.94); border: 1px solid var(--rule);
  border-radius: 7px; box-shadow: 0 1px 6px rgba(0,0,0,0.15); }
.mapnote b { display: block; color: var(--ink); font-weight: 600; }

/* 배경 밝게/어둡게 — 지도 가운데 위. 배경 타일만 바꾸는 스위치라 데이터 색을
   쓰지 않습니다. 상태는 주소 해시(#bg=bright)에만 있고 저장소에 기억하지
   않습니다(새로고침·직접 진입은 늘 기본값). */
.mapbg { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 500;
  padding: 5px 13px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  color: var(--ink); background: rgba(255,255,255,0.94); border: 1px solid var(--rule);
  border-radius: 999px; box-shadow: 0 1px 6px rgba(0,0,0,0.15); cursor: pointer; }
.mapbg:hover { background: #fff; }

.legend { display: flex; align-items: center; gap: 7px;
          font-size: 11px; color: var(--ink-2); margin-top: 6px; }

/* 화소 지도의 범위 안내 — 지도 바로 아래, 늘 보입니다. 경고색을 쓰지 않습니다:
   국경 밖 화소는 결함이 아니라 대조군이라 붉게 칠하면 뜻이 뒤집힙니다. */
.extent-note { margin: 8px 0 0; font-size: 11px; line-height: 1.55;
               color: var(--ink-2); border-left: 2px solid var(--rule);
               padding-left: 8px; }
.extent-note b { color: var(--ink); font-weight: 600; }
.extent-note > b:first-child { display: block; }
.extent-note code { font-size: 10.5px; }
.extent-note .en-sep { display: block; margin-top: 4px; }

.legend .bar { flex: 0 0 130px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(216,90,48,.85),
              rgba(128,128,128,.18), rgba(29,158,117,.85)); }
.legend .neg { color: #712B13; }
.legend .pos { color: #085041; }
.legend .hint { margin-left: 8px; color: var(--ink-2); opacity: 0.8; }

/* 계열 스택: 도별로 좁힐 수 있는 관측(위) · 도로 나눌 수 없는 것(아래) */
.series { padding: 6px 0 7px; border-top: 1px solid var(--rule); }
.series:first-child { border-top: none; padding-top: 0; }
/* 묶음 머리말 — 계열 이름보다 작고 흐리게. 이건 자료가 아니라 분류라
   눈에 먼저 들어오면 안 됩니다(호버하면 왜 그 묶음인지 나옵니다). */
.sgroup { margin: 0 0 4px; font-size: 10px; letter-spacing: 0.06em;
          color: var(--ink-2); opacity: 0.75; cursor: help; }
.series + .sgroup { margin-top: 12px; padding-top: 10px;
                    border-top: 1px solid var(--rule); }
.sgroup + .series { border-top: none; padding-top: 0; }
.series .head { display: flex; justify-content: space-between; align-items: baseline; }
.series .name { font-size: 12px; }
/* 센서 표기(자외선·가시광)와 평소 변동 폭 — 이름보다 작고 흐리게.
   계열의 성질이지 관측값이 아니므로 눈에 먼저 들어오면 안 됩니다. */
.series .sensor { font-size: 9px; color: var(--ink-2); opacity: 0.55;
  cursor: help; white-space: nowrap; font-weight: 400; }
.series .sensor:hover { opacity: 0.9; }
.series.hero .name { font-size: 13px; font-weight: 600; }
.series .val { font-size: 11px; color: var(--ink-2); }
.series svg { display: block; width: 100%; height: 44px; overflow: visible; }
.series.hero svg { height: 58px; }
.series .gap { fill: var(--rule); opacity: 0.28; }
.series .pending { fill: #A8642B; opacity: 0.13; }   /* 공표 대기 — 곧 채워짐 */
.series .ended { fill: var(--rule); opacity: 0.15; } /* 관측 범위 밖 — 자료원 종료 */
/* 신고 중단 — 종료도 지연도 아닌 셋째 꼬리(Comtrade 중국 신고, 2025-01~).
   공표 대기(주황)와 구분되는 차가운 색: '곧 온다'는 뜻이 아니어야 합니다. */
.series .stalled { fill: #5C5B8A; opacity: 0.13; }
/* 연간 점선 계단 — 연 단위 값 하나를 그 해 열두 달에 같은 높이로. 월별
   실선(주인공)보다 흐리게. 스케일은 월별과 따로 잡으므로 높이는 실선과 무관 —
   모양(추이)만 비교하는 선입니다. */
.series .annual { stroke-width: 1.3; stroke-dasharray: 3 3; opacity: 0.6;
                  vector-effect: non-scaling-stroke; }
/* 체제 경계 — 보정 변경으로 좌우가 다른 자. 이중 실선(벽) + 이유 한 줄.
 * 해칭(결측)·점선(재생 헤드)과 구분되는 제3의 표기. */
.series .regime { stroke: var(--ink-2, #8a8f88); stroke-width: 1; opacity: 0.8;
                  vector-effect: non-scaling-stroke; }
.series .regime-hit { fill: transparent; } /* 1px 이중선의 호버 히트 영역 */

/* 경계 라벨 — SVG 밖에 둔 이유: 차트는 preserveAspectRatio="none" 이라 창을
   넓히면 가로로 늘어납니다. 안에 글자를 두면 글자도 같이 늘어나 뭉개졌습니다
   (2026-08-23 수정). HTML로 빼서 위치만 백분율로 따라가게 했습니다. */
.series .chart { position: relative; }
.rtags { position: absolute; inset: 0; pointer-events: none; }
.rtag { position: absolute; top: 1px; white-space: nowrap; cursor: help;
        pointer-events: auto; font-size: 9.5px; line-height: 1.45;
        letter-spacing: -0.01em; color: var(--ink-2);
        background: color-mix(in srgb, var(--card) 88%, transparent);
        border-radius: 3px; padding: 0 3px; }
/* 경계 표시는 연월 하나. 이유는 호버로 (title=REGIME_WHY). */
.rtag.bottom { top: auto; bottom: 0; transform: translateX(-50%); }
.rtag:hover { color: var(--ink); background: var(--card); }

/* 커서가 짚은 달 — 차트 위쪽에 칩 하나. 마우스를 안 받게 해서
   경계 라벨 호버를 가로채지 않습니다. */
.hovm { position: absolute; top: -1px; transform: translateX(-50%);
        pointer-events: none; white-space: nowrap; font-size: 9.5px;
        font-family: ui-monospace, monospace; color: var(--ink);
        background: var(--card); border: 1px solid var(--rule);
        border-radius: 3px; padding: 0 3px; }

/* ── 가설 패널 ──────────────────────────────────────── */
.hyp, .normalcy { margin: 18px 22px; padding: 14px 16px;
       background: var(--card); border: 1px solid var(--rule); border-radius: 11px; }
.hyp-head { display: flex; justify-content: space-between;
            align-items: baseline; flex-wrap: wrap; gap: 8px; }
.hyp-head h2 { font-size: 15.5px; font-weight: 600; }
.meta { font-size: 10.5px; color: var(--ink-2); }
.hyp-note { font-size: 12px; color: var(--ink-2); margin: 4px 0 10px; }

.threshold { display: flex; align-items: center; gap: 10px;
             background: var(--paper-2); border-radius: 8px; padding: 8px 12px; }
.threshold span:first-child { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.threshold input { flex: 1; }
#thv { min-width: 44px; font-size: 12.5px; }
.th-note { font-size: 10.5px; color: var(--ink-2); margin: 6px 0 4px; }

.hrow { display: flex; gap: 12px; padding: 8px 2px;
        border-top: 1px solid var(--rule); align-items: flex-start; }
.hrow .badge-col { min-width: 104px; }
.badge { display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 6px; }
.badge.v0 { background: rgba(29,158,117,.16); color: #085041; }
.badge.v1 { background: rgba(176,123,18,.16); color: #6a4a06; }
.badge.v2 { background: var(--paper-2); color: var(--ink-2); }
.badge.v3 { background: rgba(201,80,46,.14); color: #712B13; }
.evidence { font-size: 10px; color: var(--ink-2); margin-top: 4px;
            font-family: ui-monospace, monospace; }
.evidence .fragile { color: var(--warn); }
.hname { font-size: 13px; }
.hfals { font-size: 10px; color: var(--ink-2); margin-left: 7px; }
.hq { font-size: 10.5px; color: var(--ink-2); margin-left: 6px; } /* 가설 질문형 병기 */
.checks { font-size: 10.5px; color: var(--ink-2); margin-top: 3px;
          font-family: ui-monospace, monospace; line-height: 1.7; }
.checks .miss { color: var(--bad); }
.checks .band { opacity: 0.65; }
.checks .oob { opacity: 0.55; font-style: normal; }
.hnote { font-size: 10.5px; color: var(--ink-2); margin-top: 2px; }
.hyp-caveat { font-size: 11px; color: var(--ink-2);
              border-top: 1px solid var(--rule); padding-top: 9px;
              margin: 10px 0 0; line-height: 1.6; }
.hyp-caveat b { font-weight: 600; }

/* ── 정상성 표 ──────────────────────────────────────── */
.normalcy h2 { font-size: 15px; font-weight: 600; display: inline; }
/* 접기 — 표가 길어 기본은 접힘. 제목 줄 전체가 여닫는 손잡이입니다. */
/* ⚠ 직계 자식(>)만 — 안쪽 트리(details.ng)의 summary는 grid 행이라 여기
   flex·마커가 내려가면 열이 무너집니다(2026-09-22 실제로 그랬음). */
.normfold > summary { cursor: pointer; list-style: none; display: flex;
  align-items: baseline; gap: 8px; }
.normfold > summary::-webkit-details-marker { display: none; }
.normfold > summary::before { content: "▸"; color: var(--ink-2);
  font-size: 11px; transition: transform .12s; }
.normfold[open] > summary::before { content: "▾"; }
.normfold .foldhint { font-size: 11px; color: var(--ink-2); opacity: .75; }
.normfold[open] .foldhint { content: none; visibility: hidden; }
.normfold > summary:hover .foldhint { opacity: 1; }
/* 접이식 트리 — 계열(전국) ▸ 도 ▸ 시설. 표와 같은 다섯 열을 grid로 맞춥니다.
   접기 단계마다 이름 열만 들여쓰기(2026-09-22). */
.normalcy .nrow { display: grid; font-size: 12px; align-items: baseline;
  grid-template-columns: minmax(160px, 1.5fr) 80px minmax(140px, 1fr);
  padding: 5px 8px; border-top: 1px solid var(--rule); column-gap: 8px; }
.normalcy .nhead { font-weight: 600; font-size: 11px; color: var(--ink-2); border-top: none; }
.normalcy .nc.month { opacity: .7; }
.normalcy .nc.pos .n { opacity: .6; margin-left: 4px; }
.normalcy .nc.why { color: var(--ink-2); }
.normalcy .nc.name a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-2); }
.normalcy .nc.name a:hover { color: var(--accent, inherit); }
.normalcy .ncount { font-size: 10px; color: var(--ink-2); text-align: right; white-space: nowrap; }
.normalcy .lv1 > .nrow, .normalcy .nrow.lv1 { font-weight: 600; }
.normalcy .lv2 > .nrow .nc.name, .normalcy .nrow.lv2 .nc.name { padding-left: 18px; font-weight: 400; }
.normalcy .nrow.lv3 .nc.name { padding-left: 36px; font-size: 11.5px; }
.normalcy .nrow.lv3 { color: var(--ink-2); }
.normalcy .nrow.lv3 .nc.name a { color: var(--ink); }
.normalcy details.ng > summary { cursor: pointer; list-style: none; }
.normalcy details.ng > summary::-webkit-details-marker { display: none; }
.normalcy details.ng > summary .nc.name::before { content: "▸ "; color: var(--ink-2); font-size: 10px; }
.normalcy details.ng[open] > summary .nc.name::before { content: "▾ "; }
.normalcy details.ng > summary:hover { background: color-mix(in srgb, var(--rule) 35%, transparent); }
/* 시설 이름 뒤의 좌표 토큰 — 같은 이름 상자가 여럿이라 남기되 작게. */
.site-coord { font-size: 9.5px; opacity: .55; margin-left: 3px; }
.normalcy .ndropped { margin: 10px 8px 0; font-size: 11px; color: var(--ink-2); line-height: 1.5; }

footer { padding: 18px 22px 26px; color: var(--ink-2); font-size: 11.5px;
         border-top: 1px solid var(--rule); margin-top: 6px; }

/* ── 댐·저수지 페이지 (dams.html) ───────────────────────
 * 점 하나 = S1 패스 하나. 색 = 궤도(자). 빈 점 = 결빙 가능(11~3월). */
.pagenav { font-size: 12px; font-weight: 400; margin-left: 10px;
           color: var(--ink-2); text-decoration: none;
           border-bottom: 1px solid var(--rule); }
.pagenav:hover { color: var(--ink); border-color: var(--ink-2); }

.tselbar { flex-wrap: wrap; }
.tsel-label { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.tsel button { padding: 4px 10px; font-size: 12px; }
.tsel button.on { background: var(--ink); color: var(--paper);
                  border-color: var(--ink); }

.dam-main { display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 18px; padding: 0 22px; align-items: start;
            /* index는 재생 막대가 아래 여백(14px)을 갖지만 시설 페이지엔 그 사이가
               비어 카드가 지도에 붙는다 — 같은 간격을 여기서 준다. */
            margin-top: 14px; }
/* 지도 = 창의 왼쪽 절반에 꽉 차게. 그래프를 스크롤해도 지도는 화면에
 * 남도록 sticky — 상자 클릭→그래프 이동 후에도 위치 감각이 유지된다. */
.dam-main .map-wrap { position: sticky; top: 12px; }
#dammap { height: calc(100vh - 150px); min-height: 480px;
          background: #C8CEC8; border-radius: 9px; }

/* ── 레이어 토글 (OpenInfraMap식) — 지도 우상단 오버레이 ────────── */
/* 접이식: 기본은 '레이어' 칩만 — 지도를 안 덮는다. 펼치면 목록. */
.layertoggle { position: absolute; top: 10px; right: 10px; z-index: 500;
  background: rgba(255,255,255,0.94); border: 1px solid var(--rule);
  border-radius: 7px; padding: 5px 9px; font-size: 11px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15); }
.layertoggle[open] { width: 176px; padding: 7px 9px;
  max-height: calc(100% - 30px); overflow-y: auto; }
.layertoggle summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.layertoggle[open] summary { margin-bottom: 5px; }
.layertoggle .lt-head { font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.layertoggle .lt-master { display: flex; align-items: center; gap: 6px;
  cursor: pointer; }
.layertoggle .lt-head2 { margin-top: 9px; padding-top: 7px;
  border-top: 1px solid var(--rule); }
.lt-row { display: flex; align-items: center; gap: 6px; padding: 2px 0;
  cursor: pointer; }
.lt-row.lt-empty { opacity: 0.4; cursor: default; }
.lt-row input { margin: 0; cursor: inherit; }
.lt-sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,0.25); }
/* 저수지 상자 스와치 — 지도의 점선 사각형과 같은 모양(채움 아님). */
.lt-sw.lt-boxsw { background: transparent; border: 1.6px dashed #4FA8E8;
  border-radius: 2px; }
/* FIRMS 지속 열원 스와치 — 지도의 원 마커와 같은 모양. */
.lt-sw.lt-firmssw { background: rgba(168,100,43,0.4);
  border: 1.6px solid #A8642B; border-radius: 50%; }
.lt-name { flex: 1 1 auto; color: var(--ink); }
.lt-count { color: var(--ink-2); font-size: 10px; }
/* teardrop 핀은 divIcon(SVG) — 배경/테두리 없이 SVG만 보이게 */
.fac-pin { background: none; border: none; }
.fac-pin svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
/* 팝업 내부 */
.leaflet-popup-content .pop-src { color: var(--ink-2); font-size: 10px; }
.leaflet-popup-content .pop-badge { background: #6B6B66; color: #fff;
  font-size: 9px; padding: 1px 5px; border-radius: 3px; vertical-align: middle; }
.leaflet-popup-content .pop-reads { margin-top: 5px; font-size: 11px; }
.leaflet-popup-content .pop-reads ul { margin: 3px 0 0; padding-left: 16px; }
.leaflet-popup-content .pop-reads li { margin: 2px 0; }

.damcard { padding: 8px 0 10px; border-top: 1px solid var(--rule); }
.damcard:first-child { border-top: none; padding-top: 0; }
.damcard .head { display: flex; justify-content: space-between;
                 align-items: baseline; gap: 8px; flex-wrap: wrap; }
.damcard .name { font-size: 13px; font-weight: 600; }
.damcard .val { font-size: 11px; color: var(--ink-2); }
.damcard .desc { margin: 1px 0 3px; font-size: 11px; color: var(--ink-2); }
.damcard svg { display: block; width: 100%; height: 140px; }
.damcard .yeartick { stroke: var(--rule); stroke-width: 0.6; opacity: 0.6; }
.damcard .yearlabel { font-size: 8.5px; fill: var(--ink-2); opacity: 0.75;
                      font-family: ui-monospace, Consolas, monospace; }
.damcard .jrcline { stroke: #9AA29B; stroke-width: 1; opacity: 0.75; }
.damcard .pt { cursor: pointer; }
.damcard .pt.sel { stroke: var(--ink); stroke-width: 1.2px; opacity: 1; }
.pointinfo { margin: 2px 0 0; font-size: 11px; color: var(--ink-2);
             min-height: 1.3em; }
.chiprow { margin-top: 2px; line-height: 1.9; }
.orbitchip { display: inline-flex; align-items: center; gap: 5px;
             font-size: 10.5px; color: var(--ink-2); margin-right: 12px; }
.orbitchip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.orbitchip .jrcdot { background: none; border-top: 2px solid #9AA29B;
                     height: 0; border-radius: 0; width: 12px; }
.dam-caveats ul { margin: 8px 0 0; padding-left: 18px; }
.dam-caveats li { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.dam-caveats li b { color: var(--ink); font-weight: 600; }

@media (max-width: 980px) {
  .dam-main { grid-template-columns: 1fr; }
  .dam-main .map-wrap { position: static; }   /* 한 열에선 고정이 방해 */
  #dammap { height: 40vh; }
}

.empty { padding: 14px; border: 1px dashed var(--rule);
         border-radius: 8px; color: var(--ink-2); font-size: 12.5px; }

/* 문턱값 접기 — 저수지 카드 구획 맨 위의 작은 상자. 없애지 않고 접는다
 * (기본값·현재값은 접혀도 보임). summary에 flex 금지 — 펼침 삼각형(::marker)이
 * 사라지고 span들이 꼬인다. span은 인라인이라 자연 흐름으로 충분. */
.tsel-fold { background: var(--card); border: 1px solid var(--rule);
  border-radius: 9px; padding: 8px 12px; margin-bottom: 10px;
  font-size: 12.5px; }
.tsel-fold summary { cursor: pointer; }
.tsel-fold summary .tsel-label { margin-right: 6px; }
.tsel-fold summary #tsel-cur { margin-right: 6px; }
.tsel-fold[open] summary { margin-bottom: 8px; }
.tsel-fold .tsel-body { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; }

/* 외부의 시선 (dams) — 세계의 시선 문법 계승, 단 색은 중립(--rule):
 * GDELT(미디어층)가 아니라 판독층이라 미디어 색을 안 씀. 판정·순위 없음. */
.ext-gaze { margin: 14px 22px 0; border-left-color: var(--rule); }
/* 머리 2줄: 1줄 = 제목·수집기준, 2줄 = 설명이 전폭으로 가로로 쭉.
 * 제목 옆 남는 폭에 설명을 끼우면 좁게 3줄로 접혀서 따로 내린다. */
.ext-gaze .bf-caveat { flex: 1 1 100%; min-width: 0; margin-top: 2px;
  max-width: none; text-align: left; margin-left: 0; } /* index의 46ch·우측정렬 해제 */
.eg-row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
/* 카드 3장 — 기관별 경계가 눈에 보이는 박스 속 박스 */
.eg-card { flex: 1 1 240px; min-width: 220px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 8px; padding: 8px 11px 9px; }
.eg-org { font-size: 10.5px; color: var(--ink-2); letter-spacing: 0.02em; }
.eg-title { display: block; margin-top: 2px; font-size: 12.5px;
  font-weight: 600; color: var(--ink); text-decoration: none; }
.eg-title:hover { text-decoration: underline; }
.eg-sum { margin-top: 3px; font-size: 11px; color: var(--ink-2);
  line-height: 1.5; }
.eg-scope { margin-top: 3px; font-size: 10px; color: var(--ink-2); }
.eg-fresh { color: var(--ink); } /* 신착 대기 — 강조색 아닌 잉크로만 */
/* 카드 안의 두 층 — 위는 아직 안 훑은 발행(검증 전), 아래는 사람이 확인한
   판독. 점선으로 가르는 것은 층이 다르기 때문이지 중요도 차이가 아니다. */
.eg-new { margin-top: 4px; }
.eg-done { margin-top: 4px; }
.eg-split { margin-top: 7px; padding-top: 6px;
  border-top: 1px dashed var(--rule); }
.eg-tag { font-size: 10px; color: var(--ink-2); letter-spacing: 0.02em; }

/* ── 선택 스택 (dams 우측 상단) — 목록이 아니라 선택 응답 ──── */
#selstack { margin-bottom: 12px; }
.sel-hint { padding: 9px 12px; border: 1px dashed var(--rule);
  border-radius: 8px; color: var(--ink-2); font-size: 11.5px; }
.sel-collapsed { display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; margin-top: 6px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--card); cursor: pointer;
  font-size: 12.5px; color: var(--ink-2); }
.sel-collapsed .sel-title { flex: 1 1 auto; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.sel-x { border: none; background: none; color: var(--ink-2);
  cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
.sel-x:hover { color: var(--ink); }
.selcard { border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 12px; background: var(--card); }
.selcard svg { height: 66px; }
.selcard .selrow { display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.selcard .selname { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.selcard .selnote, .selnote { font-size: 10px; color: var(--ink-2); }
.selcard .selbar { fill: #A8642B; opacity: 0.75; }
.selcard .selline { stroke: #A8642B; stroke-width: 1.4; }
.sel-missing { margin-top: 8px; padding: 5px 8px; border: 1px dashed
  var(--rule); border-radius: 6px; font-size: 11px; color: var(--ink-2); }
.sel-readhead { margin-top: 10px; font-size: 11px; color: var(--ink); }
.sel-readhead b { color: var(--ink-2); font-weight: 600; }
.sel-reads { margin: 4px 0 0 16px; font-size: 11.5px; line-height: 1.55; }
.facility-page .sel-reads { margin: 8px 0 0; padding: 0; list-style: none; }
.facility-page .sel-reads li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facility-page .analysis-title { display: block; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.facility-page .analysis-summary { margin: 6px 0 8px; color: var(--ink); font-size: 12.5px; line-height: 1.75; }
.facility-page .analysis-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--ink-2); font-size: 11px; }
.facility-page .analysis-source, .facility-page .analysis-source:visited { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.facility-page .analysis-source:hover { color: var(--ink); }
.facility-page .analysis-source:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; }
/* 해시(#m=)로 지목된 달 — 야간조도 상자 색과 같은 노랑. 체제 경계(회색
 * 이중선)·재생 헤드(점선)와 다른 제3의 표기: 판정이 아니라 손가락. */
.selcard .focusline { stroke: #C9A227; stroke-width: 1.6; stroke-dasharray: 5 3; }

/* ── 어디부터 볼까 (플래그 목록) — 순위가 아니라 날짜순 사실 목록.
 * ▲▼는 방향 사실이라 잉크색 그대로 — 좋음/나쁨 색을 쓰지 않는다. */
.flagrow { display: flex; align-items: baseline; gap: 10px;
  padding: 5px 2px; border-top: 1px solid var(--rule);
  font-size: 11.5px; color: var(--ink); text-decoration: none; }
div.flagrow { cursor: pointer; }
.flagrow:hover { background: rgba(0, 0, 0, 0.035); }
/* dams 행은 링크 둘(시설 이동 + 전국 역링크)이라 본문을 a.fr-main으로 감싼다 */
.flagrow .fr-main { display: flex; align-items: baseline; gap: 10px;
  flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.fr-date { color: var(--ink-2); white-space: nowrap; }
.fr-name { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fr-val { white-space: nowrap; }
.fr-peak-label { display: block; color: var(--ink-2); font-size: 10px; }
.fr-band { color: var(--ink-2); font-size: 10px; }
.fr-badge { font-size: 10px; color: var(--ink-2); white-space: nowrap; }
.fr-badge.un { border: 1px dashed var(--rule); padding: 0 4px;
  border-radius: 4px; }
.fr-go { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.flagfold summary { font-size: 11px; color: var(--ink-2); cursor: pointer;
  padding: 5px 2px; }
.flags-sites-head { margin-top: 14px; border-top: 1px solid var(--rule);
  padding-top: 10px; }

/* ── 반응형: 좁은 화면에서는 줄이는 게 아니라 뺍니다 ──── */
@media (max-width: 980px) {
  main { grid-template-columns: 1fr; }
  #map { height: 46vh; }
  .legend .hint { display: none; }
  /* 좁은 화면: 단서는 숨기지 않는다(관측자 관측 표시는 필수) — 줄바꿈만 */
  .bf-caveat { margin-left: 0; text-align: left; max-width: none; }
}
@media (max-width: 620px) {
  .playbar input { min-height: 28px; }   /* 손가락은 마우스보다 굵습니다 */
  .hrow .badge-col { min-width: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Overview reading order: changes, observations, context, explanations. */
.overview-page .section-intro { margin: 24px 22px 0; }
.overview-page .section-intro h2 { font-size: 18px; }
.overview-page .section-intro p { margin: 5px 0 0; color: var(--ink-2); }
.overview-page .hyp-context { flex-basis: 100%; margin: 0; font-size: 13px; }
.overview-page .extent-note p { margin: 0 0 8px; }
.overview-page .extent-note details > summary { cursor: pointer; color: var(--ink); }
.overview-page .extent-note details[open] > summary { margin-bottom: 8px; }
.overview-page .flags h2 { display: inline; font-size: 15px; }
.overview-page .flags .hyp-head { margin-top: 10px; }
.overview-page .normalcy .nrow { grid-template-columns: minmax(160px, 1.5fr) 80px minmax(140px, 1fr); }
.overview-page .normalcy .nc.pos .n { display: block; margin-left: 0; }
.overview-page #normbody { overflow-x: auto; }
.overview-page #normbody > .nrow, .overview-page #normbody > details { min-width: 420px; }
@media (max-width: 760px) {
  .overview-page .section-intro { margin: 20px 16px 0; }
  .overview-page .hdr { flex-wrap: wrap; }
  .overview-page .hdr__nav { flex-wrap: wrap; gap: 12px; }
  .overview-page .playbar { flex-wrap: wrap; }
  .overview-page .playbar input { min-width: 100px; }
}
.overview-page .hrow .badge-col { flex: 0 0 150px; min-width: 0; }
.overview-page .hrow .badge { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .overview-page .hrow { flex-direction: column; }
  .overview-page .hrow .badge-col { flex-basis: auto; width: 100%; }
  .overview-page .threshold { flex-wrap: wrap; }
  .overview-page .threshold input { min-width: 80px; }
}

/* Facility exploration: find a place, inspect observations, then read context. */
.facility-intro, .facility-finder { margin: 18px 22px; }
.facility-intro nav { color: var(--ink-2); font-size: 12px; margin-bottom: 8px; }
.facility-intro h1 { font-size: 23px; }
.facility-intro p { margin: 6px 0; }
.facility-intro a { color: var(--c-mirror); }
.facility-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.facility-heading h1 { margin: 0; }
.facility-heading .meta { font-size: 13px; font-weight: 400; white-space: nowrap; }
.facility-finder { padding: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 9px; }
.finder-controls { display: flex; gap: 14px; flex-wrap: wrap; }
.finder-controls label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; font-size: 12px; }
.finder-controls label:first-child { flex: 2; }
.finder-controls input, .finder-controls select { font: inherit; padding: 9px; border: 1px solid var(--rule); border-radius: 5px; background: var(--card); min-width: 0; }
.facility-finder summary { margin-top: 12px; cursor: pointer; }
.finder-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-height: 240px; overflow-y: auto; padding: 8px 0; }
.finder-results button { text-align: left; overflow-wrap: anywhere; }
.finder-results .finder-coord { font-size: 10px; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.finder-results span { display: block; color: var(--ink-2); font-size: 11px; margin-top: 3px; }
.facility-page .right-col { min-width: 0; }
.facility-page #selstack { scroll-margin-top: 16px; }
.facility-page .facility-subhead { font-size: 14px; margin: 18px 0 6px; }
.facility-page .sel-hint h2 { font-size: 18px; }
.facility-page .sel-collapsed { cursor: pointer; }
.facility-page .dam-caveats summary { cursor: pointer; font-weight: 600; }
.facility-page .selrow { flex-wrap: wrap; }
.facility-page .damcard [hidden] { display: none; }
@media (max-width: 980px) {
  .facility-page #dammap { height: 38vh; min-height: 240px; max-height: 380px; }
  .finder-results { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .facility-page .hdr { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .facility-intro, .facility-finder { margin: 14px 16px; }
  .finder-results { grid-template-columns: 1fr; }
  .facility-page .hdr__nav { gap: 12px; flex-wrap: wrap; }
  .facility-page .dam-main { padding: 0 16px; }
}

.facility-page .recent-facility { border: 0; background: transparent; text-align: left; flex: 1; padding: 5px 0; }
.facility-page .recent-facility span { font-size: 11px; color: var(--ink-2); }

.facility-page .finder-note { color: var(--ink-2); font-size: 11px; margin: 8px 0 0; }
.facility-page #recent-facilities { margin-top: 16px; }
@media (max-width: 980px) {
  .facility-page .dam-main .map-wrap { position: relative; }
}

.point-shortcuts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.point-shortcuts span { font-size: 12px; color: var(--ink-2); }
.point-status { font-size: 11px; color: var(--c-mirror); }
.point-summary { margin: 12px 0; padding: 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); }
.point-summary p { font-size: 12px; margin: 6px 0; }
.point-summary dl { display: grid; grid-template-columns: minmax(90px,auto) 1fr; gap: 5px 12px; font-size: 12px; }
.point-summary dt { color: var(--ink-2); }
.point-summary dd { margin: 0; overflow-wrap: anywhere; }
.point-summary .point-method { color: var(--ink-2); font-size: 11px; }
@media (max-width: 600px) { .point-summary dl { grid-template-columns: 1fr; } }

.point-audit-note { margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.point-audit-note summary, .point-candidates summary { cursor: pointer; }
.point-candidates { margin: 10px 0; font-size: 12px; }
.point-candidates ul { padding-left: 18px; }
.point-candidates li { margin: 8px 0; }
.point-candidates button { padding: 3px 5px; text-align: left; font-size: 12px; }
.point-candidates li span { display: block; color: var(--ink-2); margin-top: 3px; }

.nearby-observation { border-top: 1px solid var(--rule); padding: 10px 0; }
.nearby-observation button { text-align: left; font-size: 12px; overflow-wrap: anywhere; }
.nearby-observation summary { cursor: pointer; font-size: 12px; margin: 6px 0; }

.selected-point-label { width: max-content; max-width: 240px; white-space: normal; word-break: keep-all; overflow-wrap: break-word; line-height: 1.45; font-weight: 600; }
.facility-page #dammap { scroll-margin-top: 14px; }
@media (max-width: 600px) { .selected-point-label { max-width: 180px; } }

.auto-article { margin: 8px 0; padding: 7px 0; border-top: 1px solid var(--rule); }
.auto-article p { margin: 4px 0; }
.auto-decisions, .point-auto-readings { margin-top: 12px; font-size: 12px; }
.auto-decisions summary, .point-auto-readings summary, .eg-new summary { cursor: pointer; }
.point-auto-readings h4 { margin: 10px 0 4px; font-size: 12px; }

.selected-articles { margin-top: 10px; font-size: 12px; }
.selected-articles > summary { cursor: pointer; color: var(--ink-2); }
.selected-articles ul { list-style: none; padding: 0; margin: 8px 0 0; }
.selected-articles li { padding: 8px 0; border-top: 1px solid var(--rule); }

/* ══ 관제실 테마 — 대시보드(index)만 (2026-09-22 채택) ═══════════════════════
   콘셉트 "밤의 한반도": 바탕은 거의 검정, 글자는 뼈색, 강조색은 야간조도의
   호박색(--glow) 하나. 지도가 화면을 꽉 채우고 계열 스택은 지도 위에 뜬 유리
   패널. 낮 위성사진 타일은 CSS 필터로 어둡게 눌러 전년比 컬러맵이 불빛처럼
   떠오르게 한다(정식으로는 어두운 베이스맵 타일로 바꾸는 편이 깨끗함 — TODO).
   범위: 색·부품 규칙은 body.night(index·dams 둘 다), 지도 풀블리드·유리 패널
   같은 배치 규칙만 .overview-page(index)로 한정. dams는 그 아래 .night.facility-page. 데이터·색 의미 체계(거울통계/
   공식추정/원격탐사/미디어)와 문구는 손대지 않았다. 위 밝은 규칙들은 시설
   페이지의 바탕이라 지우지 않는다.
   (같은 날 시도한 A안 — 종이색·세리프·괘선의 편집 디자인 — 은 사용자가 반려.
    되살리지 말 것.) */
body.night {
  --paper: #0B0F0E;
  --paper-2: #131917;
  --card: rgba(19, 25, 23, 0.72);
  --ink: #EDE9E0;
  --ink-2: #9AA39C;
  --rule: rgba(237, 233, 224, 0.12);
  --glow: #F2A93B;                 /* 불빛 */
  --glow-2: rgba(242, 169, 59, 0.35);
  --c-remote: #F2A93B;             /* 야간조도(원격탐사) = 강조색과 동일 */
  --c-mirror: #5FD3C4;
  --c-official: #9C97E8;
  --c-media: #F07A7A;
}
body.night { background:
  radial-gradient(1200px 600px at 70% -10%, rgba(242,169,59,0.10), transparent 60%),
  var(--paper); color: var(--ink); font-size: 14.5px; }
.night ::selection { background: var(--glow-2); }

/* ── 헤더: 얇고 넓게, 이름은 크게 ── */
.night .hdr { background: transparent; border-bottom: 1px solid var(--rule);
       padding: 18px 32px 16px; }
.night .hdr__mark { filter: invert(1) sepia(1) saturate(4) hue-rotate(-10deg) brightness(1.1); }
.night .hdr__name { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.night .hdr__sub { color: var(--ink-2); font-size: 12.5px; }
.night .hdr__nav { font-size: 14px; gap: 26px; }
.night .hdr__tab { color: var(--ink-2); }
.night .hdr__tab:hover { color: var(--glow); }
.night .hdr__tab.is-active { color: var(--ink); border-bottom-color: var(--glow); }
.night .hdr__stamp { border-left-color: var(--rule); color: var(--glow); opacity: 1;
              font-size: 13px; letter-spacing: .04em; }
.night .hdr-note { background: transparent; border-bottom: none; color: var(--ink-2);
            padding: 10px 32px 0; font-size: 12.5px; }

/* ── 카드 공통: 유리 ── */
.night .briefing, .night .hyp, .night .normalcy, .night .evline, .night .playbar, .night .flags {
  background: var(--card); border: 1px solid var(--rule); border-radius: 16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35); margin-left: 32px; margin-right: 32px; }
.night .briefing { border-left: 1px solid var(--rule); padding: 16px 22px 14px; margin-top: 18px; }
.night .guide { position: relative; overflow: hidden; }
.night .guide::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
                 background: linear-gradient(var(--glow), transparent); }
.night .bf-head h2, .night .hyp-head h2, .night .normalcy h2, .night .section-intro h2 {
  font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.night .meta { color: var(--glow); letter-spacing: .06em; }
.night .bf-caveat, .night .hyp-note, .night .th-note, .night .hyp-caveat, .night .section-intro p { color: var(--ink-2); }

/* 이달의 주요 변화 — 지속 줄만 굵게, 나머지는 같은 크기 */
.night .guide-list li { border-top: 1px solid var(--rule); padding: 10px 0; }
.night .guide-list .g-confirmed .g-text { font-weight: 700; color: var(--ink); }
.night .g-kind { color: var(--glow); font-weight: 700; letter-spacing: .12em; }
.night .g-text { color: #D5D0C6; }
.night .g-link { color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.night .g-link:hover { color: var(--glow); border-color: var(--glow); }
.night .site-coord { opacity: .45; }

/* 다른 시기 보기 (접힘) */
.night .flags { padding: 10px 22px; margin-top: 12px; }
.night .normfold summary h2 { font-size: 14px; font-weight: 700; }
.night .foldhint { color: var(--ink-2); }

/* 구획 표제 */
.night .section-intro { margin: 34px 32px 6px; }
.night .section-intro h2 { font-size: 26px; }
.night .section-intro p { font-size: 13.5px; }

/* ── 사건 타임라인 + 재생: 한 장의 검은 띠 ── */
.night .evline { padding: 10px 22px 10px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
          border-bottom: none; }
.night .evtrack { border-bottom: 1px solid var(--rule); }
.night .evyear { color: var(--ink-2); opacity: .9; }
.night .evcursor { border-left-color: var(--glow); opacity: .9; }
.night .evnow { color: var(--ink-2); }
.night .evnow .evlabel { color: var(--glow); }
.night .playbar { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
           padding: 12px 22px 14px; }
.night .evline[hidden] + .playbar { margin-top: 12px; border-radius: 16px; }
.night button, .night .playbar button { background: var(--glow); color: #14100A; border: none;
  border-radius: 999px; font-weight: 700; padding: 9px 18px; letter-spacing: .01em;
  box-shadow: 0 0 0 0 var(--glow-2); transition: box-shadow .25s; }
.night button:hover, .night .playbar button:hover { background: #FFC15E; box-shadow: 0 0 0 6px var(--glow-2); }
.night input[type=range] { accent-color: var(--glow); }
.night #datelabel { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
             min-width: 120px; }
.night #regimebadge { color: var(--glow); }

/* ── 본문: 지도 풀블리드 + 스택 유리 패널 ── */
.overview-page main { display: block; padding: 0; margin: 16px 0 0; position: relative; }
.overview-page .map-wrap { position: relative; }
.overview-page #map { height: 82vh; min-height: 640px; border-radius: 0; background: #0B0F0E;
       box-shadow: inset 0 0 120px 40px rgba(11,15,14,.9); }

/* 가장자리 비네트 — 지도가 화면에 녹아들게 */
.overview-page .map-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 450;
  background: linear-gradient(90deg, rgba(11,15,14,.55), transparent 22%, transparent 55%, rgba(11,15,14,.85) 78%),
              linear-gradient(180deg, rgba(11,15,14,.55), transparent 18%, transparent 80%, rgba(11,15,14,.9)); }
.night .leaflet-control-zoom a { background: var(--card) !important; color: var(--ink) !important;
  border-color: var(--rule) !important; backdrop-filter: blur(8px); }
.night .leaflet-control-attribution { background: rgba(11,15,14,.6) !important; color: var(--ink-2) !important; }
.night .leaflet-control-attribution a { color: var(--ink-2) !important; }
.night .mapnote { background: var(--card); color: var(--ink); border: 1px solid var(--rule);
           backdrop-filter: blur(10px); border-radius: 10px; }

/* 범례·범위 안내: 지도 왼쪽 아래 위에 떠 있게 */
.overview-page .legend { position: absolute; left: 32px; bottom: 28px; z-index: 460; max-width: 380px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 10px 14px; backdrop-filter: blur(12px); flex-wrap: wrap; font-size: 11.5px;
  color: var(--ink-2); }
.overview-page .legend .neg { color: #FF9C7A; }
.overview-page .legend .pos { color: #7FE0C4; }
.overview-page .legend .hint { flex-basis: 100%; margin: 6px 0 0; line-height: 1.5; }
.overview-page .extent-note { position: absolute; left: 32px; bottom: 8px; z-index: 460; margin: 0;
  color: var(--ink-2); font-size: 10.5px; max-width: 380px; opacity: .8; }
.overview-page .extent-note > p { display: none; }
.overview-page .extent-note summary { cursor: pointer; }

/* 스택 = 지도 오른쪽 위에 뜬 유리 패널 */
.overview-page .stack { position: absolute; top: 24px; right: 32px; bottom: 24px; width: min(460px, 38vw);
  z-index: 470; overflow-y: auto; padding: 18px 20px 14px;
  background: rgba(13, 18, 16, 0.78); border: 1px solid var(--rule); border-radius: 18px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5); scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.night .sgroup { color: var(--glow); letter-spacing: .12em; font-weight: 700; }
.night .series { border-top: 1px solid var(--rule); }
.night .series .name { color: var(--ink); font-size: 12.5px; }
.night .series.hero .name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.night .series .val { color: var(--ink-2); }
.night .series.hero .val { color: var(--glow); font-weight: 700; font-size: 13px; }
.night .series .sensor { color: var(--ink-2); opacity: .8; }
.night .series svg path[stroke] { filter: brightness(1.45) saturate(1.1); }
.night .series.hero svg path[stroke] { stroke: var(--glow) !important; stroke-width: 2 !important;
  filter: drop-shadow(0 0 4px var(--glow-2)); }
.night .series .gap { fill: var(--ink); opacity: .08; }
.night .series .pending { fill: var(--glow); opacity: .10; }
.night .series .ended { fill: var(--ink); opacity: .08; }
.night .series .stalled { fill: #9C97E8; opacity: .14; }
.night .series .regime { stroke: var(--ink-2); }
.night .rtag { background: rgba(13,18,16,.85); color: var(--ink-2); border-radius: 4px; }
.night .hovm { background: rgba(13,18,16,.95); color: var(--ink); border-color: var(--rule); }

/* ── 함께 살펴볼 보도 ── */
.night .briefing#briefing { margin-top: 22px; }
.night .bfcell { border-right: 1px solid var(--rule); }
.night .bfname { color: var(--ink-2); letter-spacing: .06em; }
.night .bflabel { font-size: 15px; color: var(--ink); }
.night .bflabel.ex { color: var(--glow); font-size: 16px; }
.night .bfcell svg path { stroke: var(--c-media); }
.night .bfcell svg .bfcur { stroke: var(--glow); }
.night .bfdetail { color: var(--ink-2); }

/* ── 가설 패널 ── */
.night .hyp { padding: 20px 24px; }
.night .hyp-context { color: var(--ink); font-size: 15px; }
.night .threshold { background: rgba(255,255,255,.04); border: 1px solid var(--rule); border-radius: 12px; }
.night .threshold span:first-child { color: var(--ink-2); }
.night #thv { color: var(--glow); font-weight: 700; }
.night .hrow { border-top: 1px solid var(--rule); padding: 12px 2px; }
.night .hname { color: var(--ink); font-size: 14.5px; font-weight: 700; }
.night .hq, .night .hfals, .night .hnote, .night .checks, .night .evidence { color: var(--ink-2); }
.night .checks .miss { color: #FF9C7A; }
.night .badge { border-radius: 999px; font-weight: 700; letter-spacing: .02em; padding: 4px 11px; }
.night .badge.v0 { background: rgba(127,224,196,.16); color: #7FE0C4; box-shadow: 0 0 0 1px rgba(127,224,196,.35) inset; }
.night .badge.v1 { background: rgba(242,169,59,.16); color: var(--glow); box-shadow: 0 0 0 1px var(--glow-2) inset; }
.night .badge.v2 { background: rgba(255,255,255,.06); color: var(--ink-2); box-shadow: 0 0 0 1px var(--rule) inset; }
.night .badge.v3 { background: rgba(255,156,122,.16); color: #FF9C7A; box-shadow: 0 0 0 1px rgba(255,156,122,.35) inset; }
.night .hyp-caveat { border-top: 1px solid var(--rule); }

/* ── 지표별 최신 관측 ── */
.night .normalcy { padding: 16px 24px; }
.night .normalcy .nrow { border-top-color: var(--rule); }
.night .normalcy .nhead { color: var(--ink-2); }
.night .normalcy .nc.name a { color: var(--ink); border-bottom-color: var(--rule); }
.night .normalcy .nc.name a:hover { color: var(--glow); }
.night .normalcy .nrow.lv3 { color: var(--ink-2); }
.night .normalcy details.ng > summary:hover { background: rgba(255,255,255,.04); }
.night .normalcy .ncount, .night .normalcy .ndropped { color: var(--ink-2); }
.night footer { border-top: 1px solid var(--rule); color: var(--ink-2); padding: 20px 32px 34px; }

/* 지도 타일(낮 위성사진)을 밤처럼 — 프레임 오버레이(overlayPane)는 그대로라
   전년비 컬러맵만 위에서 떠오른다. 도 경계선은 뼈색으로. */
.night .leaflet-tile-pane { filter: brightness(.5) saturate(.45) contrast(1.15); }
.night .leaflet-overlay-pane img { filter: saturate(1.15) contrast(1.05); }
.night .leaflet-overlay-pane path { stroke: rgba(237,233,224,.7) !important; }

/* 배경 밝게: 관제실 필터·비네트·안쪽 그림자를 전부 걷어 원본 위성사진 그대로.
   프레임 오버레이·경계·핀은 손대지 않는다 — 바뀌는 것은 배경뿐. */
.night .mapbg { background: var(--card); color: var(--ink); border: 1px solid var(--rule);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.night .mapbg:hover { background: var(--card); color: var(--glow); border-color: var(--glow-2); box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.night .mapbg[aria-pressed="true"] { color: var(--glow); border-color: var(--glow); }
.night .map-wrap.bg-bright .leaflet-tile-pane { filter: none; }
.overview-page .map-wrap.bg-bright::after { display: none; }
.overview-page .map-wrap.bg-bright #map { box-shadow: none; }

/* ── 시설 페이지(dams) 다크 보정 — 밝은 값이 하드코딩돼 있던 곳들 ── */
.night.facility-page #dammap { background: #0B0F0E; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45); }

.night .layertoggle { background: rgba(13,18,16,.85); border-color: var(--rule);
  color: var(--ink); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }

.night .lt-sw { border-color: rgba(255,255,255,.25); }

.night .leaflet-popup-content-wrapper, .night .leaflet-popup-tip {
  background: rgba(13,18,16,.94); color: var(--ink); box-shadow: 0 8px 30px rgba(0,0,0,.5); }

.night .leaflet-popup-content a { color: var(--glow); }

.night .leaflet-popup-close-button { color: var(--ink-2) !important; }

.night .leaflet-popup-content .pop-badge { background: var(--glow); color: #14100A; }

.night .damcard .jrcline { stroke: var(--ink-2); }

.night .damcard .pt.sel { stroke: var(--glow); }

.night .facility-finder, .night .point-summary, .night .tsel-fold {
  background: var(--card); border-color: var(--rule); border-radius: 14px;
  backdrop-filter: blur(12px); }

.night .finder-controls input, .night .finder-controls select {
  background: rgba(255,255,255,.05); color: var(--ink); border-color: var(--rule); }

.night .finder-controls select option { background: #131917; }

.night .finder-results button, .night .point-candidates button,
.night .nearby-observation button, .night .recent-facility {
  background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: none; }

.night .finder-results button:hover, .night .point-candidates button:hover,
.night .nearby-observation button:hover { background: rgba(242,169,59,.14); color: var(--ink); }

.night .facility-intro a, .night .point-status { color: var(--glow); }

.night .facility-intro h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }

.night .tsel button.on { background: var(--glow); color: #14100A; }

.night .eg-card { background: rgba(255,255,255,.04); border: 1px solid var(--rule); border-radius: 12px; }

.night .eg-title { color: var(--ink); }

.night .eg-title:hover { color: var(--glow); }

.night .selected-point-label { color: var(--ink); background: rgba(13,18,16,.85);
  border: 1px solid var(--rule); border-radius: 6px; padding: 2px 6px; }

.night .damcard svg .yeartick { stroke: var(--rule); }

.night .damcard svg .yearlabel { fill: var(--ink-2); }
.night .leaflet-tooltip { background: rgba(13,18,16,.92); color: var(--ink);
  border-color: var(--rule); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.night .leaflet-tooltip-top::before { border-top-color: rgba(13,18,16,.92); }
.night .leaflet-tooltip-bottom::before { border-bottom-color: rgba(13,18,16,.92); }
.night .leaflet-tooltip-left::before { border-left-color: rgba(13,18,16,.92); }
.night .leaflet-tooltip-right::before { border-right-color: rgba(13,18,16,.92); }

/* 요약에서 근거로 이어지는 월간 안내 */
.guide-summary { display: grid; gap: 14px; margin: 16px 0; }
.guide-summary[hidden], .guide-availability[hidden] { display: none; }
.guide-card h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.5; }
.guide-card p { margin: 0 0 6px; line-height: 1.8; overflow-wrap: anywhere; }
.guide-details > summary:focus-visible {
  outline: 2px solid var(--ink-2); outline-offset: 4px; }
.guide-availability { border-top: 1px solid var(--rule); padding: 8px 0;
  color: var(--ink-2); font-size: 12px; line-height: 1.7; }
.guide-details { border-top: 1px solid var(--rule); padding-top: 12px; }
.guide-details > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }

.normalcy .norm-regions > summary, .normalcy .norm-ended > summary {
  cursor: pointer; padding: 10px 8px; color: var(--ink-2); font-size: 12px;
  border-top: 1px solid var(--rule);
}
.normalcy .norm-evidence { margin-top: 4px; font-size: 11px; color: var(--ink-2); }
.normalcy .norm-evidence > summary { cursor: pointer; }
.normalcy .norm-evidence p { margin: 6px 0; line-height: 1.7; white-space: normal; }
.normalcy .norm-ended { margin-top: 16px; color: var(--ink-2); }
.normalcy .norm-ended li { font-size: 12px; line-height: 1.8; }
.normalcy .nc { min-width: 0; overflow-wrap: anywhere; }
.normalcy summary:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }

.norm-region-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.normalcy .norm-region, .night .normalcy .norm-region {
  background: transparent; color: var(--ink-2); border: 1px solid var(--rule);
  border-radius: 5px; padding: 6px 10px; font-size: 12px; font-weight: 400; box-shadow: none;
}
.normalcy .norm-region:hover, .night .normalcy .norm-region:hover {
  color: var(--ink); background: color-mix(in srgb, var(--ink-2) 10%, transparent); box-shadow: none;
}
.normalcy .norm-region[aria-pressed="true"], .night .normalcy .norm-region[aria-pressed="true"] {
  color: var(--ink); border-color: var(--ink-2); background: color-mix(in srgb, var(--ink-2) 18%, transparent); font-weight: 600;
}
.normalcy .norm-region:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.norm-scope-bar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
.norm-scope-bar h3 { font-size: 16px; margin: 0; }
.norm-scope-bar span { font-size: 12px; color: var(--ink-2); }
.norm-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.norm-table th, .norm-table td { padding: 11px 8px; text-align: left; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.norm-table thead th { color: var(--ink-2); font-size: 11px; font-weight: 400; }
.norm-table th:first-child { width: 40%; }
.norm-table th:nth-child(2) { width: 22%; }
.norm-table tbody th { font-weight: 500; }
.norm-level { display: inline-block; padding: 3px 7px; border-radius: 4px; }
.norm-level.low { background: color-mix(in srgb, var(--ink-2) 9%, transparent); }
.norm-level.mid { background: color-mix(in srgb, var(--ink-2) 15%, transparent); }
.norm-level.high { background: color-mix(in srgb, var(--ink-2) 24%, transparent); }
.norm-level.unknown { color: var(--ink-2); }

/* 변화 목록: 범위 선택과 고정 열 */
.flags-switch { display: flex; gap: 6px; margin: 16px 0 10px; }
.flags-switch button, .night .flags-switch button {
  border: 1px solid var(--rule); border-radius: 5px; background: transparent;
  color: var(--ink-2); padding: 7px 12px; font-weight: 400; font-size: 12px; box-shadow: none;
}
.flags-switch button:hover, .night .flags-switch button:hover { background: var(--paper-2); box-shadow: none; }
.flags-switch button[aria-pressed="true"], .night .flags-switch button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ink-2) 16%, transparent); border-color: var(--ink-2); color: var(--ink); font-weight: 600;
}
.flags .flags-columns, .flags .flagrow, .night .flags .flagrow {
  display: grid; grid-template-columns: 170px minmax(150px, 1fr) minmax(175px, .8fr) 175px 65px;
  gap: 14px; align-items: center; width: 100%; box-sizing: border-box; text-align: left;
}
.flags .flags-columns { padding: 10px 8px; font-size: 11px; color: var(--ink-2); }
.flags .flagrow, .night .flags .flagrow { padding: 13px 8px; border: 0; border-top: 1px solid var(--rule);
  border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; font-weight: 400; font-size: 12px; }
.flags .flagrow:hover, .night .flags .flagrow:hover { background: color-mix(in srgb, var(--ink-2) 8%, transparent); box-shadow: none; }
.flags .fr-name { white-space: normal; overflow-wrap: anywhere; }
.flags .fr-val { font-size: 15px; white-space: normal; }
.flags .fr-band { display: block; margin-top: 3px; font-size: 10px; }
.flags .fr-peak-label { display: none; }
.flags .fr-badge { justify-self: start; white-space: normal; font-size: 11px; padding: 4px 7px;
  border-radius: 4px; background: color-mix(in srgb, var(--ink-2) 10%, transparent); }
.flags .fr-go { color: var(--ink-2); font-size: 11px; text-align: right; }
.flags-method { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 12px; }
.flags-method > summary, .flags .flagfold > summary { cursor: pointer; font-size: 12px; color: var(--ink-2); }
.flags button:focus-visible, .flags a:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
@media (max-width: 1000px) {
  .flags .flags-columns { display: none; }
  .flags .flagrow, .night .flags .flagrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
  .flags .fr-name { grid-column: 1 / -1; grid-row: 1; font-size: 14px; }
  .flags .fr-date { grid-column: 1; grid-row: 2; white-space: normal; }
  .flags .fr-val { grid-column: 2; grid-row: 2 / 4; }
  .flags .fr-peak-label { display: block; }
  .flags .fr-go { grid-column: 2; }
}

.article-translation { display: block; margin-top: 5px; font-size: 11px; line-height: 1.6; color: var(--ink-2); }
.article-date { display: block; margin-top: 6px; }
.selected-articles .selected-scroll { --article-row-height: 8rem; max-height: calc(3 * var(--article-row-height));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; margin: 8px 0 0; padding: 0; list-style: none; }
.selected-articles .selected-scroll > li { box-sizing: border-box; height: var(--article-row-height);
  padding: 10px 8px; border-bottom: 1px solid var(--rule); margin: 0; }
.selected-scroll .eg-title, .selected-scroll .article-translation { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5; }
.selected-scroll:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }