@font-face {
  font-family: 'Gowun Dodum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('gowun-dodum-400.woff2') format('woff2');
}
/* the feed app shell (/styles.css) locks html/body to viewport height; the map scrolls. */
html:has(body.motion-page),
body.motion-page { height: auto; min-height: 100vh; max-height: none; overflow: auto; }
:root{
  --primary:#ff52e5; --primary-dark:#ca27b2; --secondary:#f6d242; --secondary-dark:#eeb608;
  --violet:#7c4dd6; --ink:#1a1a1a; --grey:#7a7a7a; --grey-light:#b5b5b5;
  --bg:#fafafa; --sea:#e4eef0; --paper:#f0e8dd; --grey-lighter:#dbdbdb; --shine-tint:#fff8d9; --doom-tint:#ffe9f7;
  --disp:"Bagel Fat One",system-ui,sans-serif; --body:"Gowun Dodum",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body)}
.wrap{max-width:1220px;margin:0 auto;padding:14px 24px 34px}
.head{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;margin-bottom:8px}
h1{font-family:var(--disp);font-weight:400;font-size:clamp(28px,4.4vw,48px);margin:0;letter-spacing:.01em}
h1 .m{color:var(--primary)}
.dek{font-size:14.5px;color:var(--grey);margin:0}
.spoke-foot{border-top:1px solid var(--grey-lighter);background:transparent;padding:15px 4px 2px;margin-top:18px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:var(--grey)}
.spoke-foot .hf-brand{font-family:"Bagel Fat One",cursive;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:none}
.spoke-foot .hf-brand:hover{color:var(--primary-dark)}
.spoke-foot .hf-brand .hb-dot{color:var(--primary)}
.spoke-foot a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--grey-lighter)}
.spoke-foot a:hover{color:var(--ink);border-bottom-color:var(--grey)}
.stage{position:relative;margin-top:6px;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#eef5f6,#dfeaec);border:1px solid #d7e3e5}
svg.map{display:block;width:100%;height:auto;max-height:86vh;margin:0 auto;padding:6px 0}
.reg{stroke:#fff;stroke-width:1.2;stroke-linejoin:round;cursor:pointer;transition:fill .4s,stroke .15s,opacity .15s}
.reg:hover{stroke:var(--ink);stroke-width:1.7}
.reg.sel{stroke:var(--ink);stroke-width:2.4}
.reg.dim{opacity:.4}
.rlab{font-family:var(--body);font-size:11px;fill:rgba(26,26,26,.66);pointer-events:none;text-anchor:middle;paint-order:stroke;stroke:rgba(255,255,255,.55);stroke-width:2.4px}
.pin{cursor:pointer}
.pin .pc{fill:var(--ink);stroke:#fff;stroke-width:1.6}
.pin .ph{fill:none;stroke:var(--ink);stroke-width:1;opacity:.32}
.pin text{font-family:var(--body);font-size:11px;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px}
.fish{cursor:pointer;font-size:19px;opacity:.5;transition:opacity .2s,transform .2s;transform-box:fill-box;transform-origin:center}
.fish:hover{opacity:1}
.fishg{animation:bob 6s ease-in-out infinite}
.fishg:hover{animation-play-state:paused}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* floating chrome */
.lensbar{position:absolute;top:14px;left:14px;display:flex;gap:6px;flex-wrap:wrap}
.lens{font-family:var(--body);font-size:12px;border:1.5px solid #d8dfe0;background:rgba(255,255,255,.92);color:var(--grey);
  border-radius:999px;padding:6px 13px;cursor:pointer;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.lens:hover{color:var(--ink)}
.lens.on{background:var(--secondary);border-color:var(--secondary-dark);color:var(--ink);font-weight:600}
.hint{position:absolute;left:14px;bottom:14px;font-size:12px;color:#88959a;max-width:230px;line-height:1.4}
.key{position:absolute;right:14px;bottom:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  border:1px solid #e7e7e7;border-radius:11px;padding:10px 13px;font-size:12px}
.key .row{display:flex;align-items:center;gap:7px;padding:2px 0;cursor:pointer}
.key .row.off{opacity:.4}
.key .sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.scale{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--grey)}
.scale .bar{width:118px;height:9px;border-radius:5px}
/* drawer */
.drawer{position:absolute;top:14px;right:14px;width:350px;max-width:calc(100% - 28px);
  background:#fff;border:1px solid #ececec;border-radius:15px;box-shadow:0 12px 38px rgba(0,0,0,.12);
  padding:19px 20px 17px;transform:translateX(calc(100% + 24px));transition:transform .32s cubic-bezier(.2,.8,.2,1);max-height:calc(86vh - 28px);overflow:auto}
.drawer.open{transform:none}
.drawer .x{position:absolute;top:11px;right:14px;border:0;background:none;font-size:19px;color:var(--grey-light);cursor:pointer;line-height:1}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.pill .dot{width:9px;height:9px;border-radius:50%}
.dn{font-family:var(--disp);font-size:29px;line-height:1.05;margin:0 0 1px} .dn .ko{font-family:var(--body);font-size:15px;color:var(--grey-light);margin-left:6px}
.why{font-size:15px;color:var(--ink);line-height:1.55;margin:10px 0 14px;padding-bottom:13px;border-bottom:1px solid #f0f0f0}
.f{display:grid;grid-template-columns:96px 1fr;gap:4px 13px;padding:8px 0;border-top:1px solid #f6f6f6;align-items:baseline}
.f:first-of-type{border-top:0}
.fk{font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:#5e5e5e;line-height:1.35}
.fv{font-size:14.5px;color:var(--ink);line-height:1.45}
.fv .yr{color:var(--grey);font-size:12px}
.fv a.s{font-size:11px;color:var(--grey);text-decoration:none;border-bottom:1px dotted var(--grey-light);margin-left:5px;white-space:nowrap}
.fv a.s:hover{color:var(--primary-dark);border-color:var(--primary-dark)}
.hz{display:inline-flex;gap:6px;align-items:center;margin-top:12px;font-size:13px;color:var(--grey)}
.hz b{color:var(--ink)}
.ind{background:var(--shine-tint);border-radius:9px;padding:10px 12px;margin-top:12px;font-size:14px;line-height:1.5}
.ind .il{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary-dark);display:block;margin-bottom:3px}
.note{font-size:11px;color:var(--grey-light);margin-top:13px;line-height:1.5}
/* sea panel (easter egg) */
.sea{position:absolute;left:50%;bottom:16px;transform:translate(-50%,calc(100% + 30px));width:min(560px,calc(100% - 32px));
  background:#0f2b32;color:#dff0ef;border-radius:15px;box-shadow:0 16px 44px rgba(0,0,0,.28);padding:18px 20px 16px;transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.sea.open{transform:translate(-50%,0)}
.sea .x{position:absolute;top:11px;right:15px;border:0;background:none;color:#7fa6a3;font-size:19px;cursor:pointer}
.sea h3{font-family:var(--disp);font-weight:400;font-size:22px;margin:0 0 3px;color:#fff}
.sea h3 .e{font-family:var(--body)}
.sea .lead{font-size:14px;color:#c8dedb;line-height:1.55;margin:0 0 13px;max-width:62ch}
.sea .sr{display:grid;grid-template-columns:128px 1fr;gap:4px 13px;padding:6px 0;border-top:1px solid rgba(255,255,255,.08);align-items:baseline}
.sea .sr:first-of-type{border-top:0}
.sea .sk{font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:#8fb6b3}
.sea .sv{font-size:14px;color:#e9f5f4;line-height:1.45}
.sea .ssrc{font-size:10.5px;color:#6f9794;margin-top:11px}
.sea .ssrc a{color:#9fc4c0}
.foot{font-size:11.5px;color:var(--grey-light);margin-top:14px;line-height:1.55;max-width:90ch}
.foot a{color:var(--grey);text-decoration:none;border-bottom:1px solid #e4e4e4}
.foot .st{cursor:pointer;color:var(--grey);border-bottom:1px dotted var(--grey-light)}
.srcs{margin-top:9px;columns:2;column-gap:24px;font-size:10px;display:none}
.srcs.show{display:block}
.scrim,.grab{display:none}
@media(max-width:780px){
  .wrap{padding:12px 13px 28px}
  /* On a narrow viewport the map fills the card edge-to-edge, so the floating
     chrome would cover the populous north. Lift it into normal flow around the
     map: lenses above, legend + hint below, panels as bottom sheets. */
  .lensbar{position:static;justify-content:center;margin:11px 6px 10px}
  .key{position:static;top:auto;right:auto;bottom:auto;left:auto;width:fit-content;max-width:calc(100% - 24px);margin:12px auto 0}
  .hint{position:static;left:auto;bottom:auto;max-width:none;margin:9px auto 6px;text-align:center}
  .drawer{position:fixed;left:10px;right:10px;top:auto;bottom:10px;width:auto;max-width:none;max-height:54vh;padding:14px 16px 13px;transform:translateY(calc(100% + 20px))}
  .sea{position:fixed;left:10px;right:10px;bottom:10px;width:auto;max-width:none;max-height:58vh;overflow:auto;padding:15px 16px 13px;transform:translateY(calc(100% + 24px))}
  .sea.open{transform:translateY(0)}
  /* Drag (or tap) the grab handle to dismiss; the dimmed map is also a
     close target. Three forgiving ways out so you never hunt for the ×. */
  .scrim{display:block;position:fixed;inset:0;z-index:40;background:rgba(20,16,12,.34);opacity:0;pointer-events:none;transition:opacity .26s}
  .scrim.on{opacity:1;pointer-events:auto}
  .drawer,.sea{z-index:50}
  .grab{display:block;height:26px;margin:-6px -16px 4px;touch-action:none;cursor:grab;position:relative}
  .grab::before{content:'';position:absolute;left:50%;top:8px;transform:translateX(-50%);width:44px;height:5px;border-radius:3px;background:rgba(0,0,0,.22)}
  .sea .grab::before{background:rgba(255,255,255,.32)}
  .dn{font-size:23px}
  .why{margin:8px 0 11px;padding-bottom:11px}
  .f{padding:6px 0}
  .ind{margin-top:10px}
  /* finger-sized close target (was a ~19px glyph) */
  .drawer .x,.sea .x{font-size:30px;top:2px;right:4px;padding:9px 14px;line-height:1}
  .drawer .x{color:var(--grey)}
  .srcs{columns:1}
}