/* Gangwon-do's hand-authored region map (region.njk). Static pictogram overlay on a cropped
   copy of korea-regions.svg's province polygon — same hand-positioned-pin approach as the
   home-page map infographic (ARCHITECTURE.md), not a projection-computed layer, so a
   province shape edit means re-checking every pin by eye, not re-running a formula. */
.region-detail-map {
  margin-bottom: var(--space-4);
}

/* The map's ~13 hand-placed pin labels are sized to stay legible around 360–640px; below that,
   shrinking the whole SVG with the viewport (as korea-map.js's picker does) would blur them past
   reading. Scrolling a fixed-size map (like a wide data table) beats shrinking text that small.
   The 360px floor (down from an earlier 480px) is only reachable because the viewBox itself
   (gangwon-detail-map.svg) was trimmed of the empty margin the Seoul/Gyeonggi-do orientation
   labels used to need — same label pixel size, narrower canvas to stretch it across, so this
   isn't a legibility trade. .page's padding leaves ~380px of content width on a Pixel 9
   (412px viewport); 360px keeps a real margin instead of landing right on that edge. */
.region-detail-map__scroll {
  overflow-x: auto;
}

.region-detail-map__svg {
  display: block;
  width: 100%;
  /* min(360px, 100%) instead of a bare 360px: at exactly a 360px viewport, .page's 16px side
     padding leaves only 328px of content width, so a bare 360px floor forced a ~32px horizontal
     scroll for a map that was otherwise fully visible. Capping at 100% lets it shrink to fit that
     one narrow case while leaving the 360px floor (and the legibility reasoning above) untouched
     for every viewport that actually has ≥360px of content width to give it. */
  min-width: min(360px, 100%);
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  /* font-size lives in SVG user-unit space, so it scales with each map's own viewBox width —
     same declared px renders bigger on a narrower viewBox. Cancel that out: set
     --region-map-zoom inline on a map's <svg> root as (its viewBox width / 432, Gangwon's
     reference width). Gangwon needs no override (1 is already correct). */
  --region-map-zoom: 1;
}

/* Chungcheong-do's 5 cities (Daejeon/Sejong/Cheongju/Gongju/Taean) sit closer together in real
   distance than any other region's city set, so the shared 640px cap reads more cramped here than
   elsewhere even at the same zoom formula — raising the cap (~10%, same aspect, height follows
   via height:auto) gives every pin/label more absolute pixel room without re-deriving their
   positions. Chungcheong-do only; not a general pattern for the other five maps. */
#chungcheong-detail-map {
  max-width: 704px;
}

.region-detail-map__shape {
  fill: var(--color-primary-tint);
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-opacity: 0.7;
}

/* Line-icon pin glyphs (design reference 5b) — city in ink, nature types (mountain / surf / ski)
   in green. Replaces the emoji <text> pins the SVG used to carry. */
.map-pin__glyph {
  color: var(--color-text);
  overflow: visible;
}

.map-pin__glyph--nature {
  color: var(--color-primary);
}

/* Invisible tap-target padding for the ski/surf pins (DESIGN.md § Accessibility: "Phone tap
   targets ≥44px for controls" — gain the height with padding, the visible glyph stays as
   designed), same technique as korea-map.css's .region__hit-target for Jeju. Without this the
   only hit-testable area was the glyph's thin icon stroke, a couple of px wide.
   Radius is per-pin (set on the <circle> in gangwon-detail-map.svg, not here), capped short of
   44px for the densest pins — documented exception, DESIGN.md § Accessibility / layout musts,
   don't "fix" it by enlarging past that cap. */
.map-pin__hit-target {
  fill: transparent;
  pointer-events: all;
}

/* No focus outline, deliberately — these <g tabindex="0"> pins aren't a native interactive
   element, so :focus-visible's "suppress on pointer interaction" heuristic doesn't reliably apply
   the way it does for a real <button>/<a>; a tap can trigger the browser's own default
   rectangular outline (confirmed in a mobile-emulation screenshot, 2026-09-11). The label reveal
   below (:hover/:focus/:focus-within/.map-pin--revealed) is itself the visible focus indicator —
   a keyboard user tabbing here sees the name appear, same signal a box around the pin would give,
   without the boxy artifact. Unlike korea-map.css's .region links (real <a> elements navigating
   to another page, where an outline is the only focus cue available), don't reintroduce one here.
   Separately, mobile WebKit/Blink also paint their own translucent tap-highlight rectangle on any
   tappable element on touchstart, fading out on release — a different mechanism from :focus (it
   flashes and disappears rather than persisting), confirmed still showing after the outline fix
   above. -webkit-tap-highlight-color: transparent kills that too, same reasoning: the label
   reveal is the feedback, not a rectangle flash. */
.map-pin--ski,
.map-pin--surf,
.map-pin--beach {
  -webkit-tap-highlight-color: transparent;
}

.map-pin--ski:focus,
.map-pin--surf:focus,
.map-pin--beach:focus {
  outline: none;
}

.map-pin__label {
  font-family: var(--font-family-base);
  font-size: calc(10px * var(--region-map-zoom));
  /* Light by default — city is the one bold exception (below). Puts Seoraksan and Yangyang
     beaches' always-on labels at the same weight/density as the ski pins' reveal-on-hover ones,
     so all the "nature feature" labels read as one consistent, softer register next to the bold
     city names. */
  font-weight: 400;
  fill: var(--color-text);
  /* Halo in the map's own fill colour (Green tint #EAF4EF), not white — blends with the pale fill
     while still separating the label from the terrain hatching / boundary stroke it sits over.
     Applied unconditionally to every label in this class, not just the ones that currently cross
     hatching, so a future pin placement doesn't need a case-by-case legibility check.
     text-anchor deliberately NOT set here — every <text class="map-pin__label"> in the SVG sets
     its own text-anchor attribute (middle/start/end per pin), and a CSS declaration here would
     override that per-instance choice (a stylesheet rule beats an SVG presentation attribute
     regardless of specificity). Confirmed the hard way 2026-09-03: a hardcoded value here was
     silently forcing every label to render as if text-anchor="middle" regardless of what its own
     attribute said, which is how the Yangyang beaches pin's text-anchor="end" fix visibly did
     nothing — don't reintroduce this. */
  paint-order: stroke;
  stroke: var(--color-primary-tint);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.map-pin--city .map-pin__label {
  font-size: calc(11px * var(--region-map-zoom));
  font-weight: 600;
}

.map-pin__note {
  font-weight: 400;
  font-size: calc(9px * var(--region-map-zoom));
  fill: var(--color-text-muted);
}

/* Ski-resort labels stay hidden until hovered/focused/tapped — 8 resort pins is too dense to keep
   every label on-screen at once without them running into each other or the city labels. Tap
   reveal (.map-pin--revealed, toggled by region-detail-map.js) is the phone equivalent of hover —
   it feeds the same opacity rule below rather than a second show/hide path. */
.map-pin--ski {
  cursor: pointer;
}

.map-pin--ski .map-pin__label {
  opacity: 0;
  pointer-events: none;
  /* font-weight: 400 already comes from the base .map-pin__label rule above — a resort name
     revealed on hover reads as a soft annotation, matching the Yangyang beach-detail line, not a
     permanent map label. */
  transition: opacity 0.15s ease;
}

/* :hover scoped to real-hover devices only (CSS Media Queries 4). Touch browsers apply :hover on
   tap and don't clear it until a different element is tapped — there's no mouse to "leave" the
   element — which would keep a label visible forever regardless of the JS auto-dismiss timer
   (region-detail-map.js) clearing .map-pin--revealed on schedule. On a touch-only device the tap
   class is the sole driver; :focus/:focus-within still cover keyboard use everywhere. */
@media (hover: hover) {
  .map-pin--ski:hover .map-pin__label {
    opacity: 1;
  }
}

.map-pin--ski:focus .map-pin__label,
.map-pin--ski:focus-within .map-pin__label,
.map-pin--ski.map-pin--revealed .map-pin__label {
  opacity: 1;
}

/* Named-beach pins (Jeju-do): unlike Yangyang's one clustered surf pin below, each Jeju beach is
   its own pin, and the KTO listing names ("Jungmun Saekdal Beach", "Woljeongri Beach") are long
   enough on the island's own small footprint to collide with neighbouring labels if left always
   on. Same hide-until-hover/focus/tap mechanism as the ski pins above, not a second one. */
.map-pin--beach {
  cursor: pointer;
}

/* Halo on the glyph itself, not just its label — a plain beach pin (Chungcheong's Mongsanpo/
   Daecheon) has no always-on text to anchor it, so on a jagged coastline the umbrella's thin
   strokes blend into the boundary hatching until hovered. Same halo colour as .map-pin__label's
   paint-order stroke above, but a path glyph has no fill+stroke pairing paint-order can reorder,
   so it's built as a stack of blurred drop-shadows instead — three copies (rather than one) to
   read as a solid ring instead of a soft glow. */
.map-pin--beach .map-pin__glyph {
  filter:
    drop-shadow(0 0 1.5px var(--color-primary-tint))
    drop-shadow(0 0 1.5px var(--color-primary-tint))
    drop-shadow(0 0 1.5px var(--color-primary-tint));
}

.map-pin--beach .map-pin__label {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .map-pin--beach:hover .map-pin__label {
    opacity: 1;
  }
}

.map-pin--beach:focus .map-pin__label,
.map-pin--beach:focus-within .map-pin__label,
.map-pin--beach.map-pin--revealed .map-pin__label {
  opacity: 1;
}

/* Yangyang surf pin: the "Yangyang beaches" label itself stays always-on (there's only one pin
   here, unlike the 8-deep ski cluster above), but a second line naming the individual beaches
   (Jukdo/Surfyy/Gisamun/Ingu) stays hidden until hover/focus/tap — same reveal mechanism as the
   ski-resort labels, just layered under an always-visible label instead of replacing it. */
.map-pin--surf {
  cursor: pointer;
}

.map-pin__detail {
  font-family: var(--font-family-base);
  font-size: calc(9px * var(--region-map-zoom));
  fill: var(--color-text-muted);
  /* Same Green-tint halo as .map-pin__label above, same reasoning — this line is one of the
     "labels" the halo instruction covers too, not just the class literally named __label. Without
     it, "Ingu" (the end of "Surfyy · Gisamun · Jukdo · Ingu") sat right over the boundary
     stroke/hatching and was noticeably harder to read than the resort labels next to it, which
     already had the halo.
     text-anchor NOT set here either — see the comment on .map-pin__label above; same bug, same
     reason. */
  paint-order: stroke;
  stroke: var(--color-primary-tint);
  stroke-width: 2px;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Same hover-capable-devices-only scoping as the ski labels above, same reason. */
@media (hover: hover) {
  .map-pin--surf:hover .map-pin__detail {
    opacity: 1;
  }
}

.map-pin--surf:focus .map-pin__detail,
.map-pin--surf:focus-within .map-pin__detail,
.map-pin--surf.map-pin--revealed .map-pin__detail {
  opacity: 1;
}

/* Orientation-only labels for neighbouring regions, placed outside the province outline. */
.region-detail-map__neighbor {
  font-family: var(--font-family-base);
  font-size: calc(11px * var(--region-map-zoom));
  font-style: italic;
  fill: var(--color-text-muted);
  opacity: 0.75;
}

.region-detail-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: center;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.region-detail-map__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.region-detail-map__legend svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

.region-detail-map__legend span:first-child svg {
  color: var(--color-text);
}