:root {
  color-scheme: light;
  --ink: #141617;
  --muted: #65717a;
  --line: #e5e8eb;
  --paper: #ffffff;
  --canvas: #edf1f7;
  --teal: #385f9b;
  --teal-dark: #24457a;
  --mint: #ebf1fa;
  --green: #315a96;
  --green-dark: #24457a;
  --green-tint: #edf3fc;
  --blue: #315da8;
  --danger: #8b3a2a;
  --shadow: 0 12px 32px rgba(19, 45, 50, .14);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); background: var(--canvas); font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; line-height: 1.45; }
button, input, select { font: inherit; }
button, select, input, a { -webkit-tap-highlight-color: transparent; }
/* Focus ring adapted from StudyMap's own `:focus-visible` rule (double
   box-shadow ring: background-color ring + outer --ring color, so the ring
   never touches the element's own border) -- StudyMap-main.zip
   `src/app/globals.css` lines 245-250 -- kept in this project's own
   `--paper`/`--green-dark` tokens, not StudyMap's amber. See
   THIRD_PARTY_NOTICES.md. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--green-dark);
}
/* Selection tint, adapted from StudyMap `::selection` (globals.css 196-199),
   recolored to this project's teal. */
::selection { background-color: rgba(49, 90, 150, .25); color: inherit; }
/* Thin scrollbars, adapted from StudyMap's own scrollbar rules (globals.css
   206-218), recolored to this project's teal/line tokens. */
.results-list::-webkit-scrollbar, .filter-dialog__body::-webkit-scrollbar, .place-candidates::-webkit-scrollbar { width: 6px; }
.results-list::-webkit-scrollbar-track, .filter-dialog__body::-webkit-scrollbar-track, .place-candidates::-webkit-scrollbar-track { background: var(--mint); }
.results-list::-webkit-scrollbar-thumb, .filter-dialog__body::-webkit-scrollbar-thumb, .place-candidates::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.results-list::-webkit-scrollbar-thumb:hover, .filter-dialog__body::-webkit-scrollbar-thumb:hover, .place-candidates::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.explorer { position: fixed; inset: 0; width: 100dvw; height: 100dvh; overflow: hidden; }

/* Desktop: one continuous full-height white column on the left (search on
   top, results below it, divided by a thin line) over the full-bleed map --
   the Naver/Kakao Maps information-architecture pattern, not a floating
   cream card. */
.sidebar {
  position: absolute; z-index: 8; inset: 0 auto 0 0;
  width: 390px; height: 100%;
  display: flex; flex-direction: column;
  background: var(--paper);
  border-right: 1px solid var(--line);
}
.search-dock { position: static; flex: none; width: auto; padding: 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
/* The heading/eyebrow/h1 stay in the DOM for accessibility and the SSR
   <title>/noindex contract, but the compact JS screen's dock budget (search
   44px + gap + 3 chips 44px, ORDER section B) has no room for a visible
   title row -- visually hidden (not display:none, so screen readers still
   reach it) only once JS has actually taken over (body[data-js="true"]).
   A no-JS page keeps the normal visible heading. */
.sr-only, body[data-js="true"] .sr-only-js {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.eyebrow { margin: 0 0 3px; color: var(--teal-dark); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.eyebrow:empty { display: none; }
.search-dock h1 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.location-button, .icon-button, .secondary-button, .map-gps-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--teal-dark);
  background: white;
  font-weight: 800;
  cursor: pointer;
}
.location-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-color: var(--green); color: white; background: var(--green); transition: background-color .15s ease; }
/* Hover/active darken formula adapted from StudyMap's own
   `.leaflet-popup-content a.popup-cta` rule (globals.css 374-384:
   `color-mix(in oklab, var(--primary) 88%, black)` on hover, `78%` on
   active) -- same two-step color-mix darken, applied to `--green` instead
   of StudyMap's amber `--primary`. See THIRD_PARTY_NOTICES.md. */
.location-button:hover { background: color-mix(in oklab, var(--green) 88%, black); }
.location-button:active { background: color-mix(in oklab, var(--green) 78%, black); }
.location-button:disabled { cursor: wait; opacity: .7; }
.location-dot { width: 13px; height: 13px; border: 3px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.icon-button, .secondary-button { padding: 0 12px; }
.location-status { min-height: 0; margin: 0; color: var(--muted); font-size: 11px; }
.location-status:not(:empty) { min-height: 18px; margin: 7px 0 0; }
.location-status[data-kind="error"] { color: var(--danger); }
.location-status[data-kind="active"] { color: var(--blue); font-weight: 750; }
.area-note { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
/* Dock height budget (ORDER section B, 112-130px on mobile): the keyword
   input is the only visible search row (44px) directly followed by the
   3-chip row (44px) -- the field's own label text is accessible-only. */
.keyword-field { margin-top: 0; display: grid; gap: 0; }
/* Search field chrome adapted from StudyMap's own search input (StudyMap-
   main.zip `src/components/map/map-panel.tsx` lines 117-127: a `relative`
   wrapper with an absolutely-positioned leading `Search` icon + `h-9 pl-8`
   rounded input) -- same leading-icon/rounded-field shape, recolored to
   this project's tokens, icon drawn as a CSS-only decorative circle+stroke
   (no new icon asset/dependency). See THIRD_PARTY_NOTICES.md. */
.place-search { position: relative; }
.place-search::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 13px; height: 13px;
  margin-top: -8px; border: 1.6px solid var(--muted); border-radius: 50%; pointer-events: none;
}
.place-search::after {
  content: ""; position: absolute; left: 21px; top: 50%; width: 6px; height: 1.6px;
  margin-top: 5px; background: var(--muted); transform: rotate(45deg); transform-origin: left center; pointer-events: none;
}
/* Adapted from the supplied BootLeaf template's own autocomplete dropdown
   (template/app.css ".tt-dropdown-menu"/".tt-suggestion", the real
   counterpart of this place-search list): same flat 4px corner radius,
   alpha-based border/shadow and row separators, kept in this project's own
   palette rather than the template's literal colors -- see
   THIRD_PARTY_NOTICES.md. */
.place-candidates { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--paper); border: 1px solid rgba(20, 22, 23, .2); border-radius: 4px; box-shadow: 0 5px 10px rgba(20, 22, 23, .2); max-height: 300px; overflow-y: auto; }
.place-candidates li[role="option"] { padding: 3px 10px; font-size: 14px; line-height: 20px; cursor: pointer; }
.place-candidates li[role="option"] + li[role="option"] { border-top: 1px solid var(--line); }
.place-candidates li[role="option"]:hover, .place-candidates li[role="option"]:focus { background: var(--green); color: white; outline: none; }

.condition-chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Compact condition controls retain the template's clear selected state. */
.condition-chip {
  min-height: 44px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  color: var(--ink); font-size: 15px; line-height: 1.3; font-weight: 650; cursor: pointer;
  max-width: 100%; overflow-wrap: anywhere; text-align: center;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.condition-chip:hover { background: var(--mint); box-shadow: inset 0 0 0 1px var(--teal); }
.condition-chip--toggle[aria-pressed="true"] { color: #fff; border-color: var(--teal-dark); background: var(--teal-dark); }
.condition-chip--toggle[aria-pressed="true"]::before { content: '✓'; margin-right: 6px; }
body:not([data-js="true"]) .condition-chip--toggle { display: none; }

/* ORDER section C: the outer <dialog> box is a column flex container with
   overflow:hidden -- the header/footer are fixed-size flex children (never
   part of any scroll area), and only .filter-dialog__body (flex:1,
   min-height:0) actually scrolls. */
.filter-dialog {
  border: 0; border-radius: 12px; padding: 0; width: min(480px, calc(100vw - 32px)); max-height: min(640px, 84dvh);
  box-shadow: var(--shadow);
}
/* The flex/overflow:hidden layout only ever applies while the native
   <dialog> is actually open -- an unscoped rule would override the UA
   display:none a closed dialog relies on (ORDER section C: "외곽grid/
   flex/overflowhidden" scoped to dialog[open], not always-on). */
.filter-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.filter-dialog::backdrop { background: rgba(20, 22, 23, .45); }
.filter-dialog__header { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper); z-index: 1; }
.filter-dialog__header h2 { margin: 0; font-size: 16px; }
.filter-dialog__body { flex: 1; min-height: 0; padding: 8px 16px; overflow-y: auto; }
.filter-section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.filter-section:last-child { border-bottom: 0; }
.filter-section h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.filter-section select, .filter-section input[type="date"], .filter-section input[type="time"] { padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.visit-mode-group { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.visit-at-fields { display: flex; gap: 10px; }
.field-error { color: var(--danger); font-size: 12px; min-height: 1em; }
.filter-dialog__footer { flex: none; display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--paper); }

/* Desktop keeps the adjacent detail column always open/closed by its own
   boolean -- the drag-handle affordance is mobile-only sheet UI (ORDER
   section E: "desktophandle숨김"). */
/* Drag-handle bar adapted from StudyMap's own `MapSheet` drawer handle
   (StudyMap-main.zip `src/components/map/map-sheet.tsx` line 59:
   `<Drawer.Handle className="my-3 shrink-0 bg-border" />`, vaul's default
   handle is a short thick rounded bar with generous vertical margin) --
   thicker/shorter than the previous thin bar, recolored to this project's
   `--line` token. See THIRD_PARTY_NOTICES.md. */
.sheet-handle { display: none; width: 100%; padding: 12px 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.sheet-handle span { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--line); }

/* The raw region/specialty/radius/visit <select>/<input> fields only ever
   exist for the no-JS fallback form (ORDER section B: "구select를JS화면에서
   제거") -- the three chips + shared dialog are the only JS-mode condition
   UI, regardless of area/file mode. */
.filters { margin-top: 10px; display: none; grid-template-columns: 1fr 1fr; gap: 9px; }
body:not([data-js="true"]) .filters { display: grid; }
.filters label:not(.check-field) { min-width: 0; display: grid; gap: 4px; }
.filters label > span:first-child { color: var(--muted); font-size: 11px; font-weight: 750; }
.visit-fallback { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; border: 0; padding: 6px 0 0; margin: 0; }
.visit-fallback legend { width: 100%; padding: 0; color: var(--muted); font-size: 11px; font-weight: 750; }
.visit-fallback label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
select, input[type="search"] { min-width: 0; width: 100%; height: 42px; padding: 0 10px; border: 1px solid #c3cdd1; border-radius: 4px; color: var(--ink); background: white; }
select:hover, input[type="search"]:hover { border-color: var(--green); }
/* Rounded field + left icon padding, matching the leading-icon shape ported
   above from StudyMap's own search input (map-panel.tsx:117-127). */
#keyword { height: 40px; padding-left: 32px; border: 1px solid var(--line); border-radius: 10px; }
#keyword:hover { border-color: var(--teal); }
.check-field { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check-field input { width: 19px; height: 19px; accent-color: var(--teal); }
.check-field span { font-size: 14px; font-weight: 700; }
.secondary-button { align-self: center; background: var(--mint); }

.results-panel { position: static; flex: 1; min-height: 0; width: auto; display: flex; flex-direction: column; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.panel-heading { min-height: 56px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); }
.panel-heading > div:first-child { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.panel-heading h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.panel-heading__actions { flex: none; display: flex; align-items: center; gap: 5px; }
/* Icon-button hover adapted from StudyMap's `ResultsList` row action icons
   (StudyMap-main.zip `src/components/map/results-list.tsx` lines 155-156 /
   166: `rounded-md p-2 text-muted-foreground transition-colors
   hover:bg-background hover:text-foreground`) -- same rounded hover-fill
   pattern, recolored to this project's tokens. See
   THIRD_PARTY_NOTICES.md. */
.panel-close { width: 40px; height: 40px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 24px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.panel-close:hover { background: var(--mint); color: var(--ink); }
/* Plain muted stat line adapted from StudyMap's own result-count readout
   (StudyMap-main.zip `src/components/map/map-panel.tsx` lines 212-214:
   `<p className="text-xs font-semibold text-foreground">`, a plain text
   line, not a filled pill/badge) -- in place of the previous solid mint
   badge. See THIRD_PARTY_NOTICES.md. */
.result-count { padding: 0; color: var(--ink); background: transparent; font-size: 12px; font-weight: 800; white-space: nowrap; }
.results-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
/* Card chrome + hover lift adapted from StudyMap's own `.map-card`
   (globals.css 313-324: bordered rounded-lg card, border-color -> --ring +
   box-shadow lift on hover, both transitioned) -- recolored to this
   project's teal/green instead of StudyMap's amber. Each row is now a
   separated bordered card (gap above), not a hairline-divided flat list.
   See THIRD_PARTY_NOTICES.md. */
.result-card {
  width: 100%; min-height: 88px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px;
  text-align: left; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--paper);
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.result-card:hover { border-color: var(--teal); box-shadow: 0 6px 16px -8px rgba(19, 45, 50, .28); }
.result-card[data-selected="true"] { background: var(--green-tint); border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
/* Leading colour dot adapted from StudyMap's own per-row category marker
   (StudyMap-main.zip `results-list.tsx` line 125-129: a `size-3 ... rounded-
   full` dot colored from the same palette as the map pin) -- here it marks
   real vs demo data instead of a place category, in this project's own
   teal/green tokens. See THIRD_PARTY_NOTICES.md. */
.result-card__dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--teal); }
.result-card__dot[data-demo="true"] { background: #c67c24; }
.result-card__body { min-width: 0; flex: 1; display: grid; gap: 4px; }
.result-card__title-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.result-card__eyebrow { color: var(--muted); font-size: 12px; font-weight: 650; }
.result-card strong { max-width: 100%; overflow-wrap: anywhere; color: var(--blue); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.result-card__meta { display: flex; flex-wrap: wrap; gap: 5px; }
/* Pill-with-ring style adapted from StudyMap's `CategoryChips` active chip
   (StudyMap-main.zip `src/components/map/category-chips.tsx` lines 53-60:
   `color-mix(in oklab, ${color} 16%, transparent)` fill + `inset 0 0 0 1px
   ${color}` ring) -- same color-mix/inset-ring formula, recolored to this
   project's `--teal` instead of the per-category marker hex StudyMap uses.
   See THIRD_PARTY_NOTICES.md. */
.chip { padding: 3px 7px; border-radius: 4px; color: var(--teal-dark); background: color-mix(in oklab, var(--teal) 14%, white); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--teal) 35%, transparent); font-size: 12px; font-weight: 700; }
.chip--muted { color: #65717a; background: #edf0f4; box-shadow: none; }
.distance-label { color: var(--blue); font-size: 11px; font-weight: 800; }
.external-search { min-height: 44px; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; color: var(--teal-dark); border-top: 1px solid var(--line); font-size: 12px; font-weight: 750; text-decoration: none; }
/* Infinite-scroll footer (ORDER 2026-11-03): the 1px sentinel is never
   visible itself; #load-more only ever shows real text/a button, adapted
   from BootLeaf's own bottom #loading indicator idiom (plain CSS here, no
   Bootstrap/striped-progress markup) -- see THIRD_PARTY_NOTICES.md. */
#load-more-sentinel { height: 1px; }
#load-more { min-height: 40px; padding: 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#load-more-status { color: var(--muted); font-size: 11px; }
#load-more-status:empty { display: none; }
#load-more-button[hidden] { display: none; }
/* Results-panel scope control (ORDER 2026-11-03: "검색결과에 내거리순이나
   지역정하기"), positioned beside the panel title the same way BootLeaf
   docks its own #sort-btn pull-right next to the POI list heading -- see
   THIRD_PARTY_NOTICES.md. */
.scope-field select { min-height: 36px; height: 36px; padding: 0 8px; border-radius: 4px; font-size: 13px; font-weight: 650; color: var(--teal-dark); background: var(--mint); border-color: transparent; }
.empty-state { margin: 10px; padding: 24px 14px; border: 1px dashed #b2bdcd; text-align: center; }
.empty-state p { color: var(--muted); font-size: 12px; }
.text-button { min-height: 44px; padding: 0 14px; border: 1px solid var(--green); border-radius: 3px; color: var(--green-dark); background: white; cursor: pointer; }

/* Adapted from the supplied template's own map/sidebar separation --
   template/app.css "#map { box-shadow: 0 0 10px rgba(0,0,0,0.5); }" gives
   the map a shadow seam against its fixed sidebar column; here the same
   seam is drawn as an inset shadow bleeding in from the sidebar edge,
   scaled down to this project's lighter palette. See
   THIRD_PARTY_NOTICES.md. */
.map-stage { position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: hidden; background: #e8edf5; box-shadow: inset 8px 0 16px -12px rgba(19, 45, 50, .45); }
.map { position: relative; z-index: 0; width: 100%; height: 100%; }
.map-status { position: absolute; z-index: 2; top: 50%; left: 50%; width: min(360px, calc(100% - 36px)); transform: translate(-50%, -50%); padding: 26px 22px; white-space: pre-line; text-align: center; border: 1px solid #b1bed1; background: rgba(255,255,255,.97); box-shadow: var(--shadow); color: var(--teal-dark); font-size: 14px; font-weight: 750; }
.map-status[data-kind="error"] { color: var(--danger); border-color: #d6a69d; }
.demo-ribbon { position: absolute; z-index: 2; right: 16px; top: 16px; max-width: calc(100% - 420px); padding: 7px 10px; border-left: 3px solid #c67c24; color: #614a2e; background: rgba(255,248,233,.94); box-shadow: 0 4px 14px rgba(19,45,50,.08); font-size: 10px; }
.demo-ribbon strong { margin-right: 6px; letter-spacing: .08em; }
/* The single on-map GPS button (ORDER section B): one control for both the
   first location request and every later explicit recenter/refresh tap --
   never two separate location buttons/rows. */
.map-gps-button { position: absolute; z-index: 5; right: 16px; top: 16px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; border-color: var(--green); color: white; background: var(--green); box-shadow: var(--shadow); transition: background-color .15s ease; }
.map-gps-button:hover { background: color-mix(in oklab, var(--green) 88%, black); }
.map-gps-button:active { background: color-mix(in oklab, var(--green) 78%, black); }
.map-gps-button:disabled { cursor: wait; opacity: .7; }
/* A second, small, clearly separate control (ORDER followup item 2) for
   turning off this site's own stored "use my location" choice -- it never
   touches the browser's own permission, only the app-level choice recorded
   in localStorage, so the on-map GPS button stays the single way back in. */
.map-gps-off-button { position: absolute; z-index: 5; right: 16px; top: 54px; font-size: .78rem; padding: 0 10px; min-height: 28px; background: white; color: #555; box-shadow: var(--shadow); }
/* A small, always-reachable bottom affordance to reopen a closed results
   sheet/column (ORDER section B) -- lives on the map, not back in the
   dock's compact top row. */
.results-toggle-floating {
  position: absolute; z-index: 5; left: 50%; bottom: 16px; transform: translateX(-50%);
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--teal-dark); background: white; font-weight: 800; box-shadow: var(--shadow); cursor: pointer;
}
body[data-results-open="true"] .results-toggle-floating { display: none; }
.results-toggle-floating span { margin-left: 3px; color: var(--teal-dark); }
.detail-sheet-handle { display: none; width: auto; flex: none; padding: 10px; }
.detail-sheet-handle span { width: 32px; }
/* Desktop: a second white column docked directly beside the left list
   (Naver/Kakao information architecture), not a floating bottom-right card
   over the map. A non-scrolling header keeps the close button genuinely
   sticky -- only .detail-body scrolls, so close can never be scrolled
   off-screen the way an absolutely-positioned button inside a scrolling
   panel could be. */
.detail-panel {
  position: absolute; z-index: 6; left: 390px; top: 56px; bottom: 56px;
  width: min(340px, calc(100% - 390px - 280px)); max-width: calc(100% - 390px);
  display: flex; flex-direction: column; overflow: hidden;
  border-right: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow);
}
.detail-header { flex: none; display: flex; align-items: center; justify-content: flex-end; padding: 4px 4px 0; }
.detail-close { flex: none; width: 44px; height: 44px; border: 0; color: var(--muted); background: transparent; font-size: 28px; cursor: pointer; }
.detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 20px; }
.detail-panel h2 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
.detail-address { margin: 5px 0 12px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.detail-specialty { margin: 0 0 8px; color: var(--ink); font-size: 15px; font-weight: 800; }
.detail-panel h3 { margin: 0 0 8px; font-size: 12px; }
.count-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 6px; }
.count-list div { min-height: 40px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f1f4f9; font-size: 11px; }
.count-list dd { margin: 0; color: var(--teal-dark); font-weight: 800; }
.count-list dd[data-unknown="true"] { color: var(--muted); }
.department-detail { margin-top: 10px; }
.department-detail summary { padding: 8px 0; color: var(--teal-dark); font-size: 12px; font-weight: 750; cursor: pointer; }
.department-detail .count-list { margin-top: 8px; }
.detail-footer { margin: 14px 0 2px; color: var(--muted); font-size: 11px; }
.detail-source { display: block; margin-bottom: 10px; color: var(--teal-dark); font-size: 11px; text-decoration: none; }
.detail-distance { margin: 0 0 12px; color: var(--blue); font-size: 12px; font-weight: 800; }
.naver-marker { display: block; width: 24px; height: 24px; border: 4px solid white; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--teal); box-shadow: 0 3px 8px rgba(19,45,50,.35); }
.naver-marker--selected { width: 30px; height: 30px; background: #f08a37; box-shadow: 0 0 0 4px rgba(240,138,55,.24), 0 4px 10px rgba(19,45,50,.35); }
/* A place-search hospital candidate's temporary pin (ORDER section D):
   visually distinct from the main result markers, never pooled into them. */
.naver-marker--temp { background: var(--blue); }
.naver-user-marker { display: block; width: 22px; height: 22px; border: 4px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 7px rgba(20,119,212,.2), 0 3px 8px rgba(19,45,50,.3); }

/* Mobile: compact floating top search + bottom results sheet, map stays
   full-bleed underneath (the left full-height sidebar is a desktop-only
   pattern -- there is no room for it under 720px). */
@media (max-width: 720px) {
  .sidebar { position: static; display: contents; }
  /* No fixed left sidebar column to seam against once it floats on top of
     the map instead (ORDER section B mobile layout) -- the map/sidebar
     separation shadow above is a desktop-only cue. */
  .map-stage { box-shadow: none; }
  .search-dock { position: absolute; z-index: 8; left: 8px; right: 8px; top: 8px; width: auto; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
  .search-dock h1 { font-size: 18px; }
  .location-status { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filters { margin-top: 8px; }
  /* Sheet corner radius + shadow adapted from StudyMap's own `MapSheet`
     drawer content (map-sheet.tsx line 57: `rounded-t-2xl ... shadow-[0_
     -8px_32px_-12px_rgba(0,0,0,0.45)]`) -- top-rounded bottom-sheet shape in
     place of the previous uniform 8px corners, recolored/scaled to this
     project's lighter palette. See THIRD_PARTY_NOTICES.md. */
  .results-panel { position: absolute; z-index: 7; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; height: 262px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 -8px 28px -12px rgba(19, 45, 50, .45); }
  .sheet-handle { display: block; }
  .panel-heading { min-height: 54px; padding: 8px 11px; }
  .panel-heading h2 { font-size: 16px; }
  .results-list { flex-direction: row; gap: 7px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 6px; }
  .result-card { flex: 0 0 min(260px, calc(100vw - 46px)); min-height: 145px; scroll-snap-align: start; border-radius: 10px; }
  /* Only the in-panel "search by typed keyword" link is mobile-hidden here;
     the per-hospital detail-panel Naver link shares this class and must
     stay visible/tappable even on mobile. */
  .results-panel .external-search { display: none; }
  .demo-ribbon { top: auto; right: 8px; bottom: 240px; max-width: calc(100% - 16px); padding: 5px 7px; }
  body[data-results-open="false"] .demo-ribbon { bottom: 8px; }
  .map-gps-button { top: 164px; right: 8px; min-height: 40px; }
  .map-gps-off-button { top: 210px; right: 8px; }
  /* Collapsed/expanded detail sheet (ORDER section E), mirroring the
     results sheet: a peek height by default, the handle expands it to a
     taller reading height without ever changing map/list state. */
  .detail-panel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-width: none; max-height: 34%; border-radius: 8px; }
  body[data-detail-expanded="true"] .detail-panel { max-height: 72%; }
  .detail-header { justify-content: space-between; }
  .detail-sheet-handle { display: flex; align-items: center; justify-content: center; }
  body[data-detail-open="true"] .results-panel { display: none; }
  .count-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* File mode uses one comparison column while the map keeps its full viewport. */
.result-card__address { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.result-card__hours { display: block; color: var(--teal-dark); font-size: 13px; font-weight: 700; }
.result-card__hours-line { display: block; }
.result-card__hours-cue, .result-card__hours-more { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.result-card__hours[data-hours-status="unavailable"],
.result-card__hours[data-hours-status="needsReview"],
.result-card__hours[data-hours-status="loadFailed"] { color: var(--muted); font-weight: 400; }
.hours-summary { margin: 0 0 8px; color: var(--teal-dark); font-size: 13px; font-weight: 700; }
.hours-summary__line { display: block; }
.hours-summary__cue { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.hours-notice { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--teal); background: #f3f6fa; font-size: 11px; color: var(--muted); }
.hours-detail summary { padding: 6px 0; color: var(--teal-dark); font-size: 12px; font-weight: 750; cursor: pointer; }
.hours-week { margin: 8px 0 12px; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 6px; }
.hours-week div { min-height: 36px; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f1f4f9; font-size: 13px; }
.hours-week dd { margin: 0; color: var(--teal-dark); font-weight: 700; text-align: right; }
.viewport-search { position: absolute; z-index: 4; left: calc(390px + (100% - 390px) / 2); top: 24px; transform: translateX(-50%); box-shadow: var(--shadow); }
body[data-mode="file"] .result-card { min-height: 112px; }
body[data-mode="file"] .result-card:has(.result-card__hours) { min-height: 126px; }
body[data-mode="file"] .demo-ribbon { top: auto; bottom: 16px; right: 16px; max-width: min(460px, calc(100vw - 440px)); line-height: 1.5; }
body[data-mode="file"] .results-list { scroll-padding: 8px; }
#expand-results { display: none; }
#server-pagination { display: flex; justify-content: space-between; }
body[data-mode="file"]:not([data-js="true"]) .filters { display: grid; }

@media (max-width: 720px) {
  .viewport-search { left: 50%; top: 74px; }
  body[data-mode="file"] .search-dock { width: auto; }
  body[data-mode="file"] .search-dock h1 { font-size: 16px; }
  body[data-mode="file"] .location-status { white-space: normal; overflow: visible; font-size: 10px; }
  body[data-mode="file"] .results-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: max(40px,env(safe-area-inset-bottom)); height: min(40dvh,340px); }
  body[data-mode="file"] .results-list { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  body[data-mode="file"] .result-card { flex: 1 1 auto; min-height: 126px; }
  body[data-mode="file"] .result-card:has(.result-card__hours) { min-height: 140px; }
  body[data-mode="file"] .panel-heading { padding: 6px 10px; min-height: 58px; }
  body[data-mode="file"] .panel-heading h2 { font-size: 14px; }
  body[data-mode="file"] .panel-heading .eyebrow { display: none; }
  body[data-mode="file"] .result-count { font-size: 12px; }
  body[data-mode="file"] #expand-results { display: inline-block; min-height: 36px; padding: 0 7px; font-size: 12px; }
  body[data-mode="file"] .demo-ribbon { bottom: calc(min(40dvh,340px) + 48px); right: 48px; max-width: calc(100% - 56px); font-size: 9px; }
  body[data-mode="file"][data-results-open="false"] .demo-ribbon { bottom: max(32px,env(safe-area-inset-bottom)); }
  body[data-mode="file"][data-sheet-expanded="true"] .results-panel { height: min(68dvh,calc(100dvh - var(--results-top, 230px))); }
  body[data-mode="file"][data-sheet-expanded="true"] .demo-ribbon { display: none; }
  body[data-mode="file"] .viewport-search { left: 50%; top: var(--results-top,245px); }
  body[data-mode="file"] .detail-panel { z-index: 9; bottom: max(40px,env(safe-area-inset-bottom)); max-height: min(65dvh,calc(100dvh - 64px)); }
  body[data-mode="file"][data-detail-open="true"] .search-dock form > :not(.search-dock__heading) { display: none; }
  body[data-mode="file"][data-detail-open="true"] .viewport-search { display: none; }
  /* Detail sheet is bottom-anchored (bottom:40px, max-height:65dvh) so the
     top of the screen stays free once the search-dock form fields collapse
     to just the heading; move the single global credit there instead of
     hiding it, clear of both the collapsed heading and the detail panel. */
  body[data-mode="file"][data-detail-open="true"] .demo-ribbon { position: fixed; z-index: 10; top: var(--results-top,58px); bottom: auto; left: 8px; right: 8px; max-width: none; }
  body[data-mode="file"] .map-gps-button { top: var(--results-top,245px); right: 8px; }
  body[data-mode="file"] .map-gps-off-button { top: calc(var(--results-top,245px) + 46px); right: 8px; }
  body[data-mode="file"] .results-toggle-floating { bottom: max(48px,calc(env(safe-area-inset-bottom) + 8px)); }
}

@media (max-height: 580px) and (max-width: 720px) {
  body[data-mode="file"] .search-dock { max-height: 45dvh; overflow-y: auto; }
  body[data-mode="file"] .results-panel { height: 44dvh; }
  body[data-mode="file"] .demo-ribbon { display: none; }
}

@media (max-width: 400px) {
  body[data-mode="file"] .panel-heading { flex-wrap: wrap; }
  body[data-mode="file"] .panel-heading > div:first-child { flex-basis: 100%; }
  body[data-mode="file"] .panel-heading__actions { flex: 1 1 100%; min-width: 0; }
  body[data-mode="file"] .scope-field { flex: 1 1 90px; min-width: 0; }
  body[data-mode="file"] .scope-field select { min-width: 0; }
  body[data-mode="file"] #expand-results { white-space: nowrap; }
  body[data-mode="file"] .panel-close { width: 36px; }
  body[data-mode="file"] .viewport-search { top: calc(var(--results-top, 245px) + 54px); }
}