/* Magnifier cards: local distributions, zero-based comparisons, and accessible HTML labels.
   All colors inherit the short version's light/dark design tokens.
   Compact for phones (2026-10-29): one line for the title and value, the definition folded under ⓘ, a low chart,
   and the key once per magnifier. Then (same day) each indicator became one row, words left and picture right, with fixed
   sizes in px so phones and wide screens look the same. Cards are rows divided by a hairline, not boxes inside the box. */
.lens {
  position: relative; container: lens-scope / inline-size;
  margin: var(--para-gap) 0 var(--para-gap) calc(3.4rem + 12px);
  border: 1px solid var(--line); border-radius: var(--r-6);
  background: var(--panel); color: var(--ink); padding: 12px 16px 8px;
  font-family: var(--font); min-width: 0;
}
/* PC (2026-11-09, the user): folded, a magnifier keeps the story column's width; opened, it widens up to 1024px as far as
   the window allows, centred on the column (the page's side padding and a scrollbar's width kept free). --lens-room is the
   width the column is centred in: the window. Not in the side-by-side
   views (.split), whose lanes are narrow.
   2026-11-10 (the user): it widens by the same amount on both sides, so the opened card keeps the folded card's centre, which
   sits half the time column right of the column's centre. Where that would push it past the free width (--lens-avail), it moves
   only as far as there is room and keeps its width. */
@media (min-width: 768px) {
  .lens { --lens-avail: calc(var(--lens-room, 100vw) - 2 * var(--side-pad) - 16px);
    --lens-open: max(calc(100% - 3.4rem - 12px), min(1024px, var(--lens-avail)));
    width: calc(100% - 3.4rem - 12px); transition: width .5s ease, margin-left .5s ease; }
  .lens:not(.folded):not(.split .lens) { width: var(--lens-open);
    margin-left: calc((100% - var(--lens-open)) / 2 + max(0px, min((3.4rem + 12px) / 2, (var(--lens-avail) - var(--lens-open)) / 2))); }
  .split .lens { width: auto; transition: none; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) { .lens { transition: none; } }
/* the metro bars (2026-11-06, the user): sage darker than the icons', since it was lost among the grey bars; on the dark page the lighter sage is the one that shows */
.lens { --sage: #5C7A4F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lens { --sage: #A8B69A; } }
:root[data-theme="dark"] .lens { --sage: #A8B69A; }
.lens-title { color: var(--accent-text); font-size: 13px; line-height: 1.5; font-weight: 700; padding-right: 5rem; }
/* folded at first: the title and question only, the glass circling, a '펼쳐 보기' button; a click anywhere slides the rest down.
   Open, the same button reads '접기', another closes the bottom, and a click on the title or question folds it (2026-10-30) */
.lens-glass { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lens.folded { cursor: pointer; }
.lens.folded:hover, .lens.folded:focus-visible { border-color: var(--accent-text); }
.lens.folded .lens-q { margin-bottom: 2px; }
.lens-toggle { display: inline-flex; align-items: center; min-height: var(--btn-xs); margin: 6px 0 6px; padding: 0 16px; border: 0;
  border-radius: var(--r-4); background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.lens-fold-end { display: flex; margin: 8px auto 4px; }
.lens:not(.folded) .lens-title, .lens:not(.folded) .lens-q { cursor: pointer; }
.lens.folded .lens-glass { animation: lens-orbit 2.4s linear infinite; }
@keyframes lens-orbit { from { transform: rotate(0deg) translateX(2.5px) rotate(0deg); } to { transform: rotate(360deg) translateX(2.5px) rotate(-360deg); } }
.lens-body { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .5s ease, opacity .5s ease; }
.lens.folded .lens-body { grid-template-rows: 0fr; opacity: 0; }
.lens-inner { min-height: 0; overflow: hidden; }
.lens.opened .lens-inner { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .lens.folded .lens-glass { animation: none; } .lens-body { transition: none; } }
.lens-q { margin: 0 0 6px; font-size: 20px; font-weight: var(--fw-h3); line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.lens-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.lens .lc { min-width: 0; border-top: 1px solid var(--line); padding: 9px 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
/* one indicator: words on the left, the picture on the right; the definition and long notes run under both */
.lens .lrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; align-items: start; }
.lens .lc-def { grid-column: 1 / -1; }
/* a row with a drawing (lens.ts row icon): the square first, then the words and the picture as before */
.lens .lrow.has-icon { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); }
/* the drawings are sage green on white since 2026-11-05 (the user; mint before), the files themselves recoloured */
.lens .lc-icon { display: block; width: 56px; height: 56px; border-radius: 8px; background: #fff; }
.lens .lc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.lens .lc-head-text { min-width: 0; flex: 1; }
@media (max-width: 767px) { .lens .lrow.has-icon { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; } .lens .lc-icon { width: 40px; height: 40px; }
  .lens .lc-head { gap: 10px; } }
.lens .lt { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4; word-break: keep-all; }
.lens .lt .info { font-size: max(13px, .8em); top: -.08em; }
.lens .lc-def { color: var(--muted); margin: 4px 0 0; word-break: keep-all; }
.lens .lv { font-size: 20px; font-weight: 700; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lens .lv .lu { font-size: 13px; font-weight: 600; margin-left: 2px; letter-spacing: 0; }
/* the park: '(축구장 약 N개)' after the area, onto a line of its own where the column is narrow */
.lens .lv-park { white-space: normal; }
.lens .lv .lpitch { display: inline-block; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.lens .worse, .lens .hi { color: var(--worse); }
.lens .better { color: var(--better); }
.lens .ln2 { margin-top: 2px; color: var(--muted); font-size: var(--fs-source); line-height: 1.45; word-break: keep-all; }
.lc-graph { padding-top: 4px; }
/* the sorted bars draw their base line with this (the national line went on 2026-11-10, the user) */
.dist-axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* the editors' two sentences on the charts (2026-11-10), body text over the key, on a phone only */
.dist-hint { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--ink); word-break: keep-all; }
@media (min-width: 768px) { .dist-hint { display: none; } }
.dist-key { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 6px; color: var(--muted); font-size: var(--fs-source); line-height: 1.5; }
.dist-key span { display: inline-flex; align-items: center; gap: 5px; }
/* this region as in the chart (2026-11-10): the red bar under the thin red dashed line */
.dist-key-local::before { content: ''; width: 4px; height: 14px; background: linear-gradient(var(--bad), var(--bad)) bottom / 4px 7px no-repeat,
  repeating-linear-gradient(to bottom, var(--bad) 0 3px, transparent 3px 5px) center / 1px 100% no-repeat; }
.dist-key-metro::before { content: ''; width: 9px; height: 10px; background: var(--sage); }
/* the sorted bars (2026-11-02), the only chart since 2026-11-10 (the user removed the histogram and the switch between the two):
   every region as one bar, sorted so the better end is on the right */
.dist-key-rank::before { content: ''; width: 12px; height: 10px; background: linear-gradient(to top, var(--muted) 0 3px, transparent 3px) 0 0 / 2px 100% no-repeat,
  linear-gradient(to top, var(--muted) 0 5px, transparent 5px) 2px 0 / 2px 100% no-repeat, linear-gradient(to top, var(--muted) 0 6px, transparent 6px) 4px 0 / 2px 100% no-repeat,
  linear-gradient(to top, var(--muted) 0 8px, transparent 8px) 6px 0 / 2px 100% no-repeat, linear-gradient(to top, var(--muted) 0 10px, transparent 10px) 8px 0 / 2px 100% no-repeat; opacity: .55; }
/* the user's sketch (2026-11-10): a margin of words on each side of the bars, the worse end's value, province and district at
   the foot on the left and the better end's on the right, each joined by a black dot to its bar. This region's bar is red,
   with a thin red dashed line down the chart and its rank beside the line at the top. A chart narrower than its column (the
   parks, 154 districts) sits at the right (justify-content: end). */
.rk { --rk-red: var(--bad); --rk-ml: 70px; --rk-mr: 70px; --rk-h: 112px; position: relative; display: grid;
  grid-template-columns: var(--rk-ml) minmax(0, var(--rk-w, 1fr)) var(--rk-mr); justify-content: end; column-gap: 10px; padding: 16px 0 12px;
  font-size: var(--fs-source); line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); }
.rk-plot { grid-column: 2; grid-row: 1; position: relative; height: var(--rk-h); }
.rk-m { grid-row: 1; position: relative; min-width: 0; }
.rk-ml { grid-column: 1; }
.rk-mr { grid-column: 3; }
.rk-end { position: absolute; bottom: calc(5.5px - .6em); display: flex; flex-direction: column; word-break: keep-all; }
.rk-end.rk-l { right: 0; align-items: flex-end; text-align: right; }
.rk-end.rk-r { left: 0; align-items: flex-start; }
.rk-foot { position: absolute; bottom: 6px; width: 7px; height: 7px; margin: 0 0 -3.5px -3.5px; border-radius: 50%; background: var(--ink); }
.rk-foot.rk-l { left: 0; }
.rk-foot.rk-r { left: 100%; }
.rk-tie { position: absolute; bottom: 5.5px; width: 8px; border-top: 1px solid var(--ink); }
.rk-tie.rk-l { left: -8px; }
.rk-tie.rk-r { right: -8px; }
/* the rank at the top, 3px from this region's line, on the side of the lower bars (lens.ts); the page colour behind it where a
   bar runs under it */
.rk-label { position: absolute; top: 0; display: flex; flex-direction: column; white-space: nowrap; padding: 0 2px;
  background: color-mix(in srgb, var(--panel) 85%, transparent); }
.rk-label.rk-l { right: calc(100% - var(--sx) + 3px); align-items: flex-end; text-align: right; }
.rk-label.rk-r { left: calc(var(--sx) + 3px); align-items: flex-start; }
.rk-label b { font-size: var(--fs-source); }
.rk-nodata { right: 0; background: none; color: var(--muted); }
.rk-self { position: absolute; left: var(--sx); top: 0; bottom: 0; width: 0; margin-left: -.5px; border-left: 1px dashed var(--rk-red); pointer-events: none; }
.rk-selbar { fill: var(--rk-red); }
.rk-open { display: none; }
.rk-rank.worse { color: var(--worse); }
.rk-rank.better { color: var(--better); }
.rk-rank.neutral { color: var(--accent-text); }
/* PC (2026-11-10, the user): the words go under the drawing in a column of their own, 128px and no wider, and the chart takes
   the rest of the row, 3px a district where there is room (--rk-w, lens.ts); where the row is wider still, the space is left at
   the far right rather than between the words and the chart */
.rk-gap { display: none; }
.rk.gapped .rk-gap { display: inline; }
.rk.gapped .rk-solid { display: none; }
/* with a gap beside every bar the grey reads lighter, so the gapped bars are a darker grey (2026-11-10, the user) */
.rk.gapped .rk-bar:not(.rk-metro) { fill-opacity: .65; }
@media (min-width: 768px) {
  .lens .lrow:has(.rk) { grid-template-columns: 128px minmax(0, 1fr); }
  .lens .lrow:has(.rk) > .lc-icon { grid-column: 1; grid-row: 1; }
  .lens .lrow:has(.rk) > .lc-text { grid-column: 1; grid-row: 1; }
  .lens .lrow.has-icon:has(.rk) > .lc-text { grid-row: 2; margin-top: 6px; }
  .lens .lrow:has(.rk) > .lc-graph { grid-column: 2; grid-row: 1 / span 2; }
}
/* a phone (the user, 2026-11-10): first only the bars and this region as a bold red line, no words; a tap (the button laid over
   it) opens the chart under the words, the row's whole width. Opened, there are no margins: the bars use the full width, the two
   ends' words go under them (one line each, value then names, left and right), the black dots on the base line at the ends,
   and the rank keeps off the edges (.rk-near-*). While the bars move (lens.ts toggle) the words are hidden, then fade in. */
@media (max-width: 767px) {
  .rk:not(.open) { --rk-ml: 0px; --rk-mr: 0px; --rk-h: 40px; column-gap: 0; padding: 0; }
  .rk:not(.open) :is(.rk-m, .rk-label, .rk-foot, .rk-tie) { display: none; }
  .rk:not(.open) .rk-self { top: 0; bottom: 0; margin-left: -1.5px; border-left: 3px solid var(--rk-red); }
  .rk:not(.open) .rk-open { display: block; position: absolute; inset: -4px 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
  .rk.open { --rk-ml: 0px; --rk-mr: 0px; --rk-h: 96px; column-gap: 0; padding: 16px 0 calc(2.4em + 10px); }
  .rk.open .rk-end { bottom: auto; top: calc(100% + 6px); flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 4px;
    width: max-content; max-width: 150px; }
  .rk.open .rk-end.rk-l { left: 0; right: auto; justify-content: flex-start; text-align: left; }
  .rk.open .rk-end.rk-r { right: 0; left: auto; justify-content: flex-end; text-align: right; }
  .rk.open .rk-ev { font-weight: 700; }
  .rk.open .rk-tie { display: none; }
  .rk.open .rk-foot { bottom: 0; margin-bottom: -3.5px; }
  .rk.open .rk-nodata { left: 0; right: auto; top: 0; }
  .rk.open .rk-label.rk-near-r { left: auto; right: calc(100% - var(--sx) + 3px); align-items: flex-end; text-align: right; }
  .rk.open .rk-label.rk-near-l { right: auto; left: calc(var(--sx) + 3px); align-items: flex-start; text-align: left; }
  .rk.open :is(.rk-m, .rk-label, .rk-foot) { transition: opacity .18s ease; }
  .rk.open.rk-moving :is(.rk-m, .rk-label, .rk-foot) { opacity: 0; transition: none; }
  .lens .lrow:has(.rk.open) .lc-graph { grid-column: 1 / -1; }
}
/* the phone's hints (lens.ts tapHint, rankedChart's demo). Over the first chart, while it is bare and no chart of this magnifier
   has been opened: a pill where a glass with a plus and '눌러서 크게' take turns. On an opened chart: a finger's press (a ring
   that pulses) with '터치', then a slide with '옆으로 밀기'. Neither takes a press: the chart's own button and plot do. */
.rk-hint, .rk-touch { display: none; }
@media (max-width: 767px) {
  .lens:not(.rk-tried) .rk:not(.open) .rk-hint { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; min-width: 84px; height: 26px; padding: 0 8px; border: 1px solid var(--accent-text); border-radius: 13px;
    background: var(--panel); color: var(--accent-text); font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none;
    box-shadow: 0 1px 6px rgb(0 0 0 / .15); }
  .rk-hint.rk-hint-r { right: 0; }
  .rk-hint.rk-hint-l { left: 0; }
  .rk:not(.open) .rk-self { z-index: 3; }
  .rk-hint > * { grid-area: 1 / 1; display: flex; align-items: center; animation: rk-hint-turn 2.6s ease-in-out infinite; }
  .rk-hint > .rk-hint-b { animation-delay: -1.3s; }
  .rk-hint-glass { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .rk.open .rk-touch { position: absolute; z-index: 3; top: 36%; display: flex; flex-direction: column; align-items: center; gap: 4px;
    transform: translateX(-50%); pointer-events: none; }
  .rk-touch.rk-touch-slide { transition: left .56s ease-in-out; }
  .rk-touch-dot { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 30%, transparent);
    border: 2px solid var(--ink); animation: rk-touch-press .8s ease-out infinite; }
  .rk-touch-word { padding: 1px 7px; border-radius: 10px; background: var(--ink); color: var(--bg, #fff); font-size: 12px; font-weight: 700; white-space: nowrap; }
}
@keyframes rk-hint-turn { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rk-touch-press { 0% { transform: scale(1.35); opacity: .3; } 35% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rk-hint > * { animation: none; } .rk-hint > .rk-hint-a { opacity: 0; } .rk-touch-dot { animation: none; } .rk-touch.rk-touch-slide { transition: none; } }
.rk-svg { display: block; width: 100%; height: 100%; overflow: visible; shape-rendering: crispEdges; }
.rk-bar { fill: var(--muted); fill-opacity: .42; }
.rk-bar.rk-metro { fill: var(--sage); fill-opacity: 1; } /* gold until 2026-11-05 (the user: the icons' sage green) */
/* a district with none at all (no obstetrics clinic): full height, in the worse colour, at the worse end */
/* pointing at a graph (lens.ts probe): the bar under the pointer, and the shared tooltip */
.probe { touch-action: pan-y; cursor: crosshair; }
.rk-hl { position: absolute; bottom: 0; transform: translateX(-50%); background: var(--ink); opacity: .85; pointer-events: none; }
.graph-guide { position: absolute; top: 0; width: 0; border-left: 1px dashed var(--ink); opacity: .7; pointer-events: none; }
.graph-guide[hidden], .rk-hl[hidden] { display: none; }
.graph-tip { position: fixed; z-index: 50; max-width: min(320px, calc(100vw - 16px)); padding: 4px 8px; border-radius: 6px;
  background: var(--ink); color: var(--bg, #fff); font-size: var(--fs-source); line-height: 1.4; font-variant-numeric: tabular-nums;
  white-space: pre; overflow: hidden; text-overflow: ellipsis; pointer-events: none; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.graph-tip[hidden] { display: none; }
.rk-bar.rk-none { fill: none; } /* a district with none at all: left empty (2026-11-06, the user: it was a block of red); the '없음 27곳' label says what the gap is */
.lens .lv .lp { margin: 0 3px 0 0; }
.dist-empty { padding: 8px 10px; background: var(--hl0); color: var(--muted); font-size: var(--fs-source); border-radius: var(--r-4); }
.lens details { margin: 0; padding-top: 7px; border-top: 1px solid var(--line); font-size: var(--fs-source); line-height: var(--lh-source); }
.lens summary { cursor: pointer; color: var(--muted); }
.lens ul { padding-left: 1.1rem; margin: 8px 0 0; overflow-wrap: anywhere; }
.lens li + li { margin-top: 6px; }
/* zero-based bars (comparisonBars: the national 20·30대 card; the Leqembi card's, beside its words, went on 2026-11-10) */
.lens-compare { display: grid; gap: 6px; margin: 8px 0 0; font-variant-numeric: tabular-nums; font-size: var(--fs-source); line-height: 1.4; }
.compare-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(32px, 1fr) minmax(3.5em, max-content); align-items: center; gap: 8px; }
.compare-label { color: var(--muted); word-break: keep-all; }
.compare-track { display: block; height: 6px; background: var(--hl0); border-radius: 2px; }
.compare-bar { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.hi .compare-bar { background: var(--worse); }
.compare-value { text-align: right; white-space: nowrap; color: var(--ink); }
.hi .compare-value { color: var(--worse); font-weight: 700; }
/* death rates by age: one line per band, the province's bar over the country's */
.mortality-list { margin-top: 6px; font-size: var(--fs-source); font-variant-numeric: tabular-nums; }
.mortality-key, .mortality-row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 3.6em; align-items: center; gap: 8px; }
.mortality-key { color: var(--muted); margin-bottom: 2px; }
.mortality-key > :first-child { grid-column: 1 / 3; display: flex; gap: 12px; }
.mortality-key .k-local, .mortality-key .k-nat { display: inline-flex; align-items: center; gap: 4px; }
.mortality-key > span { white-space: nowrap; }
.mortality-key > :last-child { text-align: right; }
.mortality-key .k-local::before, .mortality-key .k-nat::before { content: ''; width: 10px; height: 6px; border-radius: 2px; background: var(--accent); }
.mortality-key .k-nat::before { background: var(--muted); opacity: .5; }
.mortality-row { padding: 3px 0; }
.mortality-age { color: var(--muted); white-space: nowrap; }
.mortality-bars { display: grid; gap: 2px; }
.mortality-bars i { display: block; height: 6px; border-radius: 2px; }
.mortality-bars .b-local { background: var(--accent); }
.mortality-bars .b-nat { background: var(--muted); opacity: .5; }
.mortality-row.hi .b-local { background: var(--worse); }
.mortality-ratio { text-align: right; color: var(--ink); }
.mortality-row.hi .mortality-ratio { color: var(--worse); font-weight: 700; }
/* the country's young adults: four groups by three measures */
/* the 20s and 30s of the country: three small bar charts, side by side on a PC, one under another on a phone (2026-11-02) */
.youth-bars { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 768px) { .youth-bars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.youth-bar .lens-compare { margin-top: 4px; }
.youth-bar .compare-row { grid-template-columns: 6.6em minmax(24px, 1fr) 3.2em; gap: 6px; }
@media (max-width: 767px) {
  .lens { margin-left: 0; padding: 12px 12px 6px; }
}
.split .lens { margin-left: 0; }
/* No motion: distributions are visible immediately, including with reduced-motion enabled. */