:root {
  --bg: #ffffff;
  --bg-soft: #f6f8f7;
  --surface: #ffffff;
  --text: #27302b;
  --text-2: #505a54;
  --text-3: #66706a;
  --line: #e3e8e5;
  --accent: #1b4f28;
  --accent-bg: #eaf2ec;
  --est: #8a5a14;
  --est-bg: #fbf1e1;
  --halo: rgba(255, 255, 255, .95);
  --pin: #ffffff;
  --pin-line: #27302b;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: light;
}
/* 어두운 화면(보는 사람이 고름: theme.js) */
:root[data-theme="dark"] {
    --bg: #121614;
    --bg-soft: #161a18;
    --surface: #1a1f1c;
    --text: #e9eeeb;
    --text-2: #bac3be;
    --text-3: #939d97;
    --line: #2c3430;
    --accent: #8fcf9f;
    --accent-bg: #1c3324;
    --est: #e5b56a;
    --est-bg: #2d2617;
    --halo: rgba(18, 22, 20, .92);
    --pin: #121614;
    --pin-line: #e9eeeb;
    color-scheme: dark;
  }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 15px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word;
}
a { color: var(--accent); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

header.site {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; text-decoration: none; color: var(--text); letter-spacing: -0.01em; }
.brand::before { content: ""; width: 22px; height: 22px; border-radius: 5px; background: #1b4f28 url("favicon.svg") center / cover no-repeat; flex: none; }
.tool { color: var(--text-3); font-size: 14px; text-decoration: none; }
.tool::before { content: "·"; margin-right: 8px; }
.theme-toggle { margin-left: auto; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 첫 화면: 지도 목록 ---------- */
.home { max-width: 860px; margin: 0 auto; padding: 36px 16px 56px; }
.home h1 { font-size: clamp(26px, 4.4vw, 34px); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 8px; line-height: 1.3; }
.home .lead { color: var(--text-2); margin: 0 0 28px; }
.maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.mapcard {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  border: 1px solid var(--accent); border-radius: 14px; overflow: hidden; background: var(--surface);
}
.mapcard .thumb { aspect-ratio: 16 / 9; background: var(--bg-soft) center / cover no-repeat; border-bottom: 1px solid var(--line); }
.mapcard .body { padding: 14px 16px 16px; }
.mapcard h2 { font-size: 17px; margin: 0 0 2px; }
.mapcard .r { color: var(--accent); font-size: 13.5px; font-weight: 600; }
.mapcard p { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }
.mapcard.soon { border-color: var(--line); opacity: .75; pointer-events: none; }
.mapcard .state { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; border-radius: 4px; padding: 1px 7px; background: var(--accent-bg); color: var(--accent); }
.mapcard.soon .state { background: var(--bg-soft); color: var(--text-3); }
.home .how { margin-top: 32px; font-size: 14px; color: var(--text-2); }
.home .how h2 { font-size: 15px; color: var(--text); margin: 0 0 6px; }
.home .how ul { padding-left: 18px; margin: 0; }

/* ---------- 지도 화면 ---------- */
.layout { display: flex; flex-direction: column; }
.mapbox { position: relative; height: 58svh; min-height: 330px; border-bottom: 1px solid var(--line); }
#map { position: absolute; inset: 0; background: #2d6a9c; }
body[data-base="plain"] #map { background: var(--bg); }
.panel { padding: 18px 16px 40px; }
@media (min-width: 900px) {
  .layout { flex-direction: row-reverse; height: calc(100svh - 52px); }
  .mapbox { flex: 1; height: auto; border-bottom: 0; border-left: 1px solid var(--line); }
  .panel { width: 410px; flex: none; overflow-y: auto; padding: 22px 22px 40px; }
}

.basebar {
  position: absolute; top: 10px; left: 10px; z-index: 2; display: flex;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px;
  box-shadow: 0 1px 5px rgba(0,0,0,.18);
}
.basebar button { border: 0; background: none; border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.basebar button[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
.north {
  position: absolute; left: 12px; bottom: 44px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 4px rgba(0,0,0,.15);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--text-2);
}
.north span::before { content: "▲"; display: block; font-size: 8px; line-height: 1; text-align: center; color: var(--text); }
.north span { line-height: 1; margin-top: -2px; }

.intro h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.35; }
.intro .ref { margin: 2px 0 12px; color: var(--accent); font-weight: 600; font-size: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chips button {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--text-2);
}
.chips button[aria-pressed="true"] { border-color: var(--text); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.sw { width: 14px; height: 4px; border-radius: 2px; background: var(--jc, var(--accent)); display: inline-block; flex: none; }

.stepnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.stepnav button {
  background: var(--accent-bg); color: var(--accent); border: 0; border-radius: 8px;
  padding: 8px 14px; font-weight: 600; cursor: pointer; min-width: 84px;
}
.stepnav button:disabled { opacity: .35; cursor: default; }
#count { color: var(--text-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }

.card { border: 1px solid var(--jc, var(--accent)); border-top-width: 4px; border-radius: 14px; padding: 14px 16px 16px; background: var(--surface); }
.card.overview { border-color: var(--line); border-top-width: 1px; padding: 6px 6px 8px; }
.card .lead { font-size: 13.5px; color: var(--text-2); margin: 6px 10px 6px; }
.jrow { display: grid; grid-template-columns: 18px 1fr; gap: 0 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 10px; cursor: pointer; }
.jrow:hover { background: var(--bg-soft); }
.jrow .sw { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; grid-row: span 3; }
.jrow b { font-size: 15.5px; }
.jrow .r { color: var(--text-3); font-size: 13px; }
.jrow .sum { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.card .jt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-bottom: 4px; }
.card .k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.card .k b { font-size: 19px; letter-spacing: -0.01em; }
.card .k .tag { color: var(--text-3); font-size: 13.5px; }
.card .k .vref { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 13.5px; }
.card h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; color: var(--text-2); }
.card p { margin: 0 0 8px; }
.card .terms { font-size: 13px; color: var(--text-3); }
.card .flag { display: inline-block; font-size: 12px; color: var(--text-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; margin: 0 4px 6px 0; }
.card .note { font-size: 13.5px; color: var(--text-2); background: var(--bg-soft); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; }

.today { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.today .label { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.today .where { margin: 2px 0 6px; font-weight: 600; }
.today .about { color: var(--text-2); margin: 0 0 8px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 4px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.badge.sure { background: var(--accent-bg); color: var(--accent); }
.badge.estimate { background: var(--est-bg); color: var(--est); }
.today .links { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13.5px; }
.today .links button { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.today .visits { font-size: 13px; color: var(--text-3); margin: 0 0 8px; }

h2 { font-size: 15px; font-weight: 700; margin: 26px 0 8px; }
.legend ul { list-style: none; padding: 0; margin: 0 0 10px; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 8px; margin: 4px 0; flex-wrap: wrap; }
.lg-journeys label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.lg-journeys .sw { width: 22px; height: 4px; }
.lg-journeys .r { color: var(--text-3); font-size: 12.5px; }
.lg-journeys input:disabled + .sw { opacity: 1; }
.legend p { font-size: 13.5px; color: var(--text-2); margin: 0 0 8px; }
.legend .prov-note { color: var(--text-3); font-size: 13px; }
.lg-line { stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.lg-core { stroke: var(--bg); stroke-width: 1.8; }
.lg-line.dash { stroke-dasharray: 5 5; stroke-linecap: butt; }
.lg-line.faint { stroke-width: 3; opacity: .7; }
.lg-dot { border-radius: 50%; display: inline-block; flex: none; background: var(--pin); border: 2px solid var(--pin-line); }
.lg-dot.big { width: 15px; height: 15px; border-width: 3px; }
.lg-dot.small { width: 9px; height: 9px; background: var(--pin-line); border-color: var(--pin); box-shadow: 0 0 0 1px var(--pin-line); margin-left: 8px; }
.lg-dot.estimate { width: 13px; height: 13px; border-style: dashed; border-color: var(--est); margin-left: 8px; }

.steps ol { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { counter-increment: s; }
.steps li button {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: baseline; width: 100%;
  text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 8px 4px; cursor: pointer; font-size: 14.5px;
}
.steps li button::before { content: counter(s); color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.steps li button .r { color: var(--text-3); font-size: 12.5px; }
.steps li button .b { color: var(--text-3); font-size: 12px; margin-left: 4px; }
.steps li button[aria-current="step"] { background: var(--accent-bg); border-radius: 6px; }
.steps li button[aria-current="step"]::before, .steps li button[aria-current="step"] .r { color: var(--accent); }
.steps li button:hover { background: var(--bg-soft); }

.credits { margin-top: 28px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
.credits p { margin: 0 0 6px; }
.credits a { color: var(--text-2); }

/* ---------- 지도 위 장소 ---------- */
.pin {
  display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 3px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 700; color: #1d2420; line-height: 1.2;
  --lh: rgba(255,255,255,.95);
}
body[data-base="plain"] .pin, body[data-base="modern"] .pin { color: var(--text); --lh: var(--halo); }
.pin .dot { width: 15px; height: 15px; border-radius: 50%; flex: none; background: #fff; border: 3px solid #1d2420; transition: transform .15s; }
.pin.r2 .dot { width: 9px; height: 9px; border: 1.5px solid #fff; background: #1d2420; }
.pin.r2 { font-size: 12px; font-weight: 600; }
.pin.estimate .dot { border-style: dashed; border-color: #8a5a14; }
.pin.r2.estimate .dot { background: #fff; border: 1.5px dashed #8a5a14; }
/* 어두운 화면(보는 사람이 고름: theme.js) */
:root[data-theme="dark"] body[data-base="plain"] .pin .dot, :root[data-theme="dark"] body[data-base="modern"] .pin .dot { background: var(--pin); border-color: var(--pin-line); }
:root[data-theme="dark"] body[data-base="plain"] .pin.r2 .dot, :root[data-theme="dark"] body[data-base="modern"] .pin.r2 .dot { background: var(--pin-line); border-color: var(--pin); }
.pin .lbl { white-space: nowrap; text-shadow: 0 0 3px var(--lh), 0 0 3px var(--lh), 0 0 6px var(--lh), 0 0 2px var(--lh); }
.pin.left { flex-direction: row-reverse; }
.pin.top { flex-direction: column-reverse; gap: 1px; }
.pin.bottom { flex-direction: column; gap: 1px; }
.pin.region .lbl, .pin.sea .lbl { font-weight: 600; font-style: normal; letter-spacing: .08em; font-size: 12px; opacity: .85; }
.pin.sea .lbl { color: #0d3459; }
.pin.active .dot { transform: scale(1.4); }
.pin.active .lbl { font-size: 14px; }
.pin.off, .pin.quiet { display: none; }
/* 확대 단계: 멀리서는 주요 도시만, 가까이 가면 들른 곳 모두 */
#map.z-far .pin.r2:not(.active) { display: none; }
#map.z-far .pin.region:not(.active), #map.z-far .pin.sea:not(.active) { display: none; }
#map.z-mid .pin.r2:not(.active) .lbl { display: none; }
#map.z-vfar .pin:not(.active) .lbl { font-size: 12px; }
#map.z-vfar .pin .dot { width: 11px; height: 11px; border-width: 2.5px; }
/* 번호 핀: 한 여행을 고르면 본문 순서 번호가 붙는다. 번호가 붙은 곳은 멀리서도 감추지 않는다 */
.pin .num { display: none; }
.pin.numbered .num { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--jc, #1b4f28); color: var(--bg); font-size: 11px; font-weight: 800; letter-spacing: 0; line-height: 1; box-shadow: 0 0 0 1.5px var(--bg); font-variant-numeric: tabular-nums; }
.pin.numbered.active .num { transform: scale(1.12); }
#map.z-far .pin.numbered, #map.z-vfar .pin.numbered { display: flex !important; }
#map.z-vfar .seaname:not(.main) { display: none; }
#map.z-vfar .prov { font-size: 13px; letter-spacing: .06em; }

.prov {
  font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: .12em; color: rgba(255,255,255,.95);
  text-shadow: 0 0 3px rgba(0,0,0,.65), 0 0 7px rgba(0,0,0,.4); pointer-events: none; white-space: nowrap;
}
.prov:not(.bible) { font-weight: 500; opacity: .75; }
.seaname { font-family: var(--sans); font-size: 18px; letter-spacing: .6em; color: rgba(200,225,250,.85); pointer-events: none; white-space: nowrap; font-weight: 600; }
body[data-base="plain"] .prov { color: var(--text-3); text-shadow: 0 0 3px var(--halo), 0 0 6px var(--halo); }
body[data-base="plain"] .seaname { color: var(--text-3); opacity: .7; }
body[data-base="modern"] .prov, body[data-base="modern"] .seaname { display: none; }
#map.z-far .prov:not(.bible) { display: none; }
#map.z-near .seaname { display: none; }

.maplibregl-ctrl-attrib { font-family: var(--sans); font-size: 11px; }
/* 어두운 화면(보는 사람이 고름: theme.js) */
:root[data-theme="dark"] .maplibregl-ctrl-group { background: var(--surface); }
:root[data-theme="dark"] .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib { background: rgba(18,22,20,.8); color: var(--text-3); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib a { color: var(--text-2); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }
:root[data-theme="dark"] .maplibregl-ctrl-scale { background: rgba(18,22,20,.75); color: var(--text-2); border-color: var(--text-2); }
.intro .summary { margin: 0 0 14px; color: var(--text-2); font-size: 14.5px; }
.legend .notes { list-style: disc; padding-left: 18px; font-size: 13.5px; color: var(--text-2); }
.legend .notes li { display: list-item; margin: 0 0 6px; }

/* ---------- 열두 지파 ---------- */
.tribes .chips button { padding: 4px 10px; font-size: 13px; }
.dotsw { width: 11px; height: 11px; border-radius: 50%; }
.lg-tribes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 2px 8px; }
.lg-tribes .dotsw { margin-right: 2px; }
.towns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.towns .town { border: 1px solid var(--line); background: var(--bg-soft); border-radius: 999px; padding: 2px 10px; font-size: 13.5px; cursor: pointer; }
.towns .town.estimate { border-style: dashed; color: var(--text-2); }
.towns .town:hover { border-color: var(--jc, var(--accent)); }
.placecard { margin-top: 10px; border-top-width: 1px; }
body .pin.tpin .dot, body .pin.tpin.r2 .dot { background: var(--tc); border: 2px solid #fff; width: 12px; height: 12px; }
body .pin.tpin.r1 .dot { width: 15px; height: 15px; border-width: 3px; }
body .pin.tpin.estimate .dot { background: #fff; border: 3px solid var(--tc); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.tpin.refuge .dot { box-shadow: 0 0 0 2px var(--tc), 0 0 0 4px #fff; }
.tpin.levi:not(.refuge) .dot { border-radius: 3px; transform: rotate(45deg); }
.tpin.later .dot { opacity: .6; }
.tpin.dim { opacity: .28; }
.tpin.dim .lbl { display: none; }
/* 확대 단계별로 덜어 내기. 고른 지파(.picked)와 고른 성읍(.active)은 늘 보인다 */
#map.t-vfar .tpin.r2:not(.picked):not(.active) { display: none; }
#map.t-vfar .tpin.r1:not(.picked):not(.active) .lbl { font-size: 11px; font-weight: 600; }
#map.t-vfar .tpin.r1:not(.picked):not(.active) .dot { width: 9px; height: 9px; border-width: 2px; }
#map.t-vfar .tpin.dim { display: none; }
#map.t-far .tpin.r2:not(.picked):not(.active) .dot { width: 7px; height: 7px; border-width: 1.5px; }
#map.t-far .tpin.r2:not(.picked):not(.active) .lbl { display: none; }
#map.t-far .tpin.r1:not(.active) .lbl { font-size: 11.5px; }
#map.t-mid .tpin.r2:not(.picked):not(.active) .lbl { display: none; }
#map.t-far .tpin.dim.r2 { display: none; }
.tpin.active .dot { transform: scale(1.35); }
.tpin.levi.active .dot { transform: rotate(45deg) scale(1.35); }
.tribe-label {
  background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: .1em;
  color: #fff; text-shadow: 0 0 2px var(--tc), 0 0 4px var(--tc), 0 0 8px rgba(0,0,0,.55);
}
#map:not(.t-far) .tribe-label { font-size: 13px; opacity: .85; }
#map.t-vfar .tribe-label { font-size: 16px; }
.lg-ref { width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 2px var(--text-3), 0 0 0 4px var(--bg); margin: 0 4px 0 6px; display: inline-block; }
.lg-levi { width: 10px; height: 10px; background: var(--text-3); transform: rotate(45deg); display: inline-block; margin: 0 4px 0 14px; border-radius: 2px; }
.lg-dot.hollow { width: 13px; height: 13px; background: #fff; border: 3px solid var(--text-2); margin-left: 8px; }

/* ---------- 그 시대의 주변 정보(배경): 작은 회색 도시와 나라·지방 이름 ---------- */
.ctx-city { display: flex; align-items: center; gap: 3px; pointer-events: none; font-family: var(--sans); font-size: 11px; font-weight: 500; color: #4a4a40; white-space: nowrap; }
.ctx-city .d { width: 6px; height: 6px; border-radius: 50%; background: #fff; border: 1.5px solid #6a6a5c; }
.ctx-city .n { text-shadow: 0 0 3px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9); }
/* 어두운 화면(보는 사람이 고름: theme.js) */
:root[data-theme="dark"] .ctx-city { color: #d3d8d4; }
:root[data-theme="dark"] .ctx-city .d { background: #2a302c; border-color: #b9c2bc; }
:root[data-theme="dark"] .ctx-city .n { text-shadow: 0 0 3px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.85); }
#map.z-vfar .ctx-city .n, #map.t-vfar .ctx-city .n { display: none; }
body[data-base="modern"] .ctx-city, body[data-base="modern"] .ctx-label { display: none; }
.lg-ctx { list-style: none; padding: 0; margin: 10px 0 4px; font-size: 13px; color: var(--text-2); }
.lg-ctx li { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start; gap: 8px; margin: 4px 0; }
.lg-ctx .t { flex: 1; min-width: 0; }
.lg-ctx .sw { margin-top: 4px; }
.lg-ctx .sw { width: 16px; height: 11px; border-radius: 3px; flex: none; opacity: .8; }

/* ---------- 첫 화면: 찾기 칸과 성경 순서 묶음(접고 펴기) ---------- */
.finder { margin: 0 0 18px; }
.finder input { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); }
.finder input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.mapgroup { border-top: 1px solid var(--line); padding: 4px 0 14px; }
.mapgroup summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; padding: 12px 2px; }
.mapgroup summary::-webkit-details-marker { display: none; }
.mapgroup summary::before { content: '▸'; color: var(--accent); transition: transform .15s; display: inline-block; }
.mapgroup[open] summary::before { transform: rotate(90deg); }
.mapgroup .g { font-size: 19px; font-weight: 700; }
.mapgroup .gr { color: var(--text-3); font-size: 13.5px; }
.mapgroup .n { margin-left: auto; color: var(--text-3); font-size: 13px; }
.nomatch { color: var(--text-2); }
.lg-area { display: inline-block; width: 22px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 22%, transparent); border: 2px solid var(--accent); vertical-align: -1px; margin-right: 4px; }