@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./assets/fonts/noto-sans-kr.woff2') format('woff2'); }
:root {
  font-family: 'Noto Sans KR', sans-serif; font-size: 14px; line-height: 1.5;
  color: #202d3c; background: #f5f7fa;
  --title: 18px; --heading: 16px; --body: 14px; --label: 14px; --small: 13px; --badge: 13px;
  --control: 36px; --close: 36px; --accent: #2c4e90; --accent-soft: #edf2fc;
  --ink: #202d3c; --muted: #546477; --line: #dce2ea; --radius: 10px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; word-break: break-all; overflow-wrap: anywhere; font-size: var(--body); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; color: #677487; background: #f1f3f6; border-color: #d9dfe7; }
a { color: var(--accent); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid #be6300; outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1200; padding: 8px 12px; background: #fff; border: 2px solid var(--accent); }
.skip-link:focus { top: 8px; }
.app-shell { height: 100dvh; min-height: 320px; display: flex; flex-direction: column; }
.topbar { flex: none; min-height: 62px; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; border-radius: 4px; }
.brand:hover { text-decoration: none; }
.brand img { width: 36px; height: auto; object-fit: contain; flex: none; }
.brand-owner { margin: 0; font-size: var(--small); font-weight: 700; color: var(--accent); line-height: 1.3; }
.brand h1 { margin: 2px 0 0; font-size: var(--title); font-weight: 500; line-height: 1.3; letter-spacing: -.03em; }
button, .primary-btn, .secondary-btn { min-height: var(--control); }
.subtle-btn, .secondary-btn, .city-btn { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 500; padding: 6px 12px; text-decoration: none; }
.subtle-btn { background: #f4f6f9; white-space: nowrap; font-size: var(--small); }
.subtle-btn:hover, .secondary-btn:hover, .city-btn:hover { background: var(--accent-soft); }
.primary-btn { border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: #fff; font-weight: 600; padding: 6px 12px; text-decoration: none; }
.primary-btn:hover { background: #223d73; text-decoration: none; }
.primary-btn:disabled:hover { background: #f1f3f6; }
.primary-btn, .secondary-btn { display: inline-flex; align-items: center; justify-content: center; font-size: var(--label); }
.layout { display: grid; grid-template-columns: 448px minmax(0,1fr); min-height: 0; flex: 1; }
.sidebar { display: flex; flex-direction: column; min-height: 0; background: #fff; border-right: 1px solid var(--line); }
.controls { flex: none; padding: 12px; border-bottom: 1px solid var(--line); }
.search-row { display: flex; gap: 8px; }
.city-btn { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex: none; font-size: var(--label); padding: 6px 10px; }
.search-wrap { min-width: 0; height: var(--control); flex: 1; display: flex; align-items: center; gap: 6px; border: 1px solid #c8d1dd; border-radius: var(--radius); padding: 0 10px; background: #f8fafc; }
.search-wrap:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-wrap span { color: var(--muted); }
.search-wrap input { height: 100%; min-width: 0; width: 100%; border: 0; outline: 0; background: none; color: var(--ink); font-size: var(--label); }
.search-wrap input::placeholder { color: var(--muted); opacity: 1; }
.filter-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.group-chips, .option-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; border: 1px solid #d7dee7; border-radius: var(--radius); padding: 4px 9px; font-size: var(--badge); color: #394d63; background: #fff; font-weight: 400; }
.chip:hover { background: #f4f6fa; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: #203f7b; font-weight: 600; }
.chip:disabled { color: #677487; background: #f1f3f6; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #216fc0; flex: none; }
.dot.school, .facility-badge.school, .marker-badge.school { background: #17715f; }
.dot.disability, .facility-badge.disability, .marker-badge.disability { background: #7352a5; }
.filter-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: var(--radius); padding: 6px 2px; font-size: var(--small); color: var(--muted); background: transparent; white-space: nowrap; }
.filter-btn:hover { color: var(--accent); }
.filter-btn.is-active { color: var(--accent); font-weight: 600; }
.active-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.results { overflow-y: auto; min-height: 0; flex: 1; padding: 0 8px; --content-inset: 8px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.list-sheet { display: flex; flex-direction: column; min-height: 0; flex: 1; background: #fff; }
.sheet-heading { display: none; }
.facility-card { width: 100%; text-align: left; display: flex; align-items: flex-start; gap: 8px; border: 0; border-bottom: 1px solid #e8ecf2; background: #fff; padding: 12px 4px; color: inherit; }
.facility-card:hover, .facility-card:focus-visible, .facility-card.is-selected { background: #f1f5fc; }
.facility-badge { display: grid; place-items: center; width: 30px; min-width: 30px; height: 30px; margin-top: 1px; border-radius: 8px; background: #216fc0; color: #fff; font-size: var(--badge); font-weight: 600; }
.facility-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.facility-tags { margin-top: 1px; }
.facility-name { font-size: var(--heading); font-weight: 600; line-height: 1.45; word-break: break-all; }
.facility-address { font-size: var(--body); color: var(--muted); line-height: 1.5; word-break: break-all; }
.card-arrow { align-self: center; color: var(--muted); font-size: var(--body); }
.tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: var(--badge); background: #edf3fb; color: #365a87; border-radius: 4px; padding: 0 4px; font-weight: 400; }
.tag.muted { background: #f0f3f6; color: #526276; }
.empty-results { padding: 20px 8px; color: var(--muted); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.empty-results strong { color: var(--ink); font-weight: 500; }
.list-sentinel { height: 1px; }
.map-workspace { position: relative; display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0,1fr); }
.map-panel { position: relative; min-width: 0; min-height: 0; background: #edf1f4; }
.map { position: absolute; inset: 0; }
.map-toolbar { position: absolute; z-index: 400; top: 12px; left: 12px; display: flex; align-items: center; gap: 4px; }
#near-me { font-size: 14px; }
.material-btn { min-height: var(--control); display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ffffffdb; border-radius: var(--radius); background: #fffffff2; color: #263d5b; box-shadow: 0 2px 10px #21314e1f; padding: 6px 12px; font-size: var(--label); font-weight: 500; }
@supports (backdrop-filter: blur(12px)) { .material-btn { background: #ffffffdc; backdrop-filter: blur(12px); } }
.material-btn:hover { background: #fff; }
.map-fallback, .map-status { position: absolute; z-index: 500; left: 12px; bottom: 32px; max-width: calc(100% - 24px); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: #fff; color: var(--muted); box-shadow: 0 2px 12px #21314e1a; font-size: var(--body); }
.map-fallback p { margin: 0 0 8px; }
.leaflet-container { font-family: 'Noto Sans KR', sans-serif; font-size: var(--body); }
.leaflet-container { font-family: 'Noto Sans KR', sans-serif; font-size: var(--body); }
.leaflet-tooltip { width: max-content; white-space: normal; word-break: break-all; max-width: min(240px,calc(100vw - 32px)); }
.leaflet-tooltip.facility-tooltip { border: 1px solid #d4dce5; border-radius: 7px; padding: 4px 7px; font-size: var(--small); font-weight: 600; line-height: 1.35; max-width: min(188px,calc(100vw - 32px)); box-shadow: 0 2px 8px #23364b22; color: #263443; background: #fffffff5; text-align: center; pointer-events: none; }
.leaflet-tooltip.facility-tooltip::before { border-top-color: #fffffff5; }
.leaflet-tooltip.facility-tooltip.is-permanent { z-index: 1; }
.municipality-label { background: transparent; border: 0; pointer-events: none; }
.municipality-label span { display: block; width: max-content; transform: translate(-50%,-50%); border-radius: 5px; padding: 2px 5px; background: #ffffffc9; color: #315878; font-size: var(--small); font-weight: 600; text-shadow: 0 1px 1px #fff; white-space: nowrap; }
.leaflet-control-attribution { font-size: var(--small) !important; color: #586575; background: #ffffffdf !important; padding: 1px 5px !important; margin: 0 !important; }
.leaflet-control-attribution a { color: #586575; }
.facility-marker { display: grid; place-items: center; }
.facility-cluster { display: grid; place-items: center; background: transparent; }
.facility-cluster span { display: grid; place-items: center; width: 38px; height: 38px; border: 3px solid #fff; border-radius: 50%; background: #17715f; color: #fff; font-size: var(--body); font-weight: 600; box-shadow: 0 2px 7px #0003; }
.facility-cluster:focus-visible { outline: 3px solid #216fc0; outline-offset: 2px; border-radius: 50%; }
.marker-badge { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid #fff; border-radius: 50%; background: #216fc0; color: #fff; font-weight: 600; font-size: var(--badge); box-shadow: 0 2px 6px #0004; }
.facility-marker.is-selected .marker-badge { background: #f18424; box-shadow: 0 0 0 4px #ffb34d, 0 3px 10px #7f421a66; }
.user-location-icon { background: none; border: 0; }
.user-dot { display: block; position: absolute; left: 8px; top: 8px; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: #ce352e; box-shadow: 0 1px 6px #54130f66; }
.user-direction { position: absolute; inset: 0; transform-origin: 17px 17px; }
.user-direction::before { content: ''; display: block; position: absolute; left: 11px; top: -4px; border: 6px solid transparent; border-bottom: 10px solid #ce352e; border-top: 0; }
.user-location-icon .user-dot { transition: box-shadow 160ms ease; }
dialog { color: var(--ink); font-size: var(--body); }
.modal { border: 1px solid #d7dfe9; border-radius: 16px; box-shadow: 0 16px 48px #10244033; padding: 0; background: #fff; max-height: min(85dvh, 680px); width: min(440px, calc(100% - 32px)); overflow: hidden; }
.modal[open] { display: flex; flex-direction: column; }
.modal::backdrop { background: #18284366; }
.modal[open]::backdrop { animation: backdrop-enter 200ms ease-out; }
.modal.is-closing::backdrop { animation: backdrop-exit 180ms ease-in forwards; }
@keyframes backdrop-enter { from { background: #18284300; } to { background: #18284366; } }
@keyframes backdrop-exit { from { background: #18284366; } to { background: #18284300; } }
.dialog-head { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); background: #fff; flex: none; }
.dialog-head h2 { font-size: var(--heading); font-weight: 600; line-height: 1.45; margin: 0; min-width: 0; }
.close-btn { width: var(--close); height: var(--close); min-width: var(--close); min-height: var(--close); flex: none; border: 0; border-radius: var(--radius); background: #f1f4f8; color: #35465b; font-size: 0; position: relative; }
.close-btn::before, .close-btn::after { content: ''; width: 13px; height: 1.5px; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%,-50%) rotate(45deg); }
.close-btn::after { transform: translate(-50%,-50%) rotate(-45deg); }
.close-btn:hover { background: #e6ecf6; }
.dialog-body { padding: 12px; --content-inset: 12px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.dialog-body, .results {
  scrollbar-width: thin;
  padding-left: max(var(--content-inset), var(--scroll-gutter, 0px));
  padding-right: max(0px, calc(var(--content-inset) - var(--scroll-gutter, 0px)));
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); flex: none; background: #fff; }
.dialog-actions button { min-width: 88px; }
.location-actions button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.filter-body, .info-body { display: flex; flex-direction: column; gap: 16px; }
.filter-body h3, .info-body h3 { font-size: var(--label); margin: 0 0 8px; font-weight: 600; }
.field-help, .date-note, .source-file { font-size: var(--body); color: var(--muted); }
.copyright { font-size: var(--small); color: var(--muted); }
.field-help, .source-file, .copyright { margin: 8px 0 0; }
.city-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.city-option { min-height: var(--control); border: 1px solid #d0d9e6; border-radius: var(--radius); color: #394d63; background: #fff; padding: 6px 2px; }
.city-option[aria-pressed="true"] { background: var(--accent-soft); color: #203f7b; border-color: var(--accent); font-weight: 600; }
.info-body section + section { border-top: 1px solid var(--line); padding-top: 16px; }
.info-body p { margin: 8px 0 0; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 8px; }
.section-heading h3 { margin: 0; }
.source-badge { padding: 2px 6px; }
.date-list { margin: 0; display: grid; gap: 8px; }
.date-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.date-row dt, .date-row dd { margin: 0; }
.date-row dd { color: var(--muted); }
.plain-list { margin: 0; padding-left: 16px; display: grid; gap: 6px; }
.law-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.law-links a { min-width: 0; min-height: var(--control); padding: 6px 4px; border-radius: var(--radius); background: #f4f6fa; display: flex; justify-content: center; gap: 3px; align-items: center; text-decoration: none; white-space: nowrap; font-size: var(--body); }
.law-links a:hover { background: var(--accent-soft); }
.detail-panel { inset: auto; position: absolute; z-index: 600; top: 32px; right: 12px; border: 1px solid #d7dfe9; border-radius: 16px; box-shadow: 0 6px 24px #21314e26; padding: 0; margin: 0; width: 320px; max-width: calc(100% - 24px); max-height: calc(100% - 44px); height: auto; background: #fff; min-width: 0; overflow: hidden; }
.detail-panel[open] { display: flex; flex-direction: column; }
.map-workspace.has-detail { grid-template-columns: minmax(0,1fr); }
.detail-panel .dialog-head { align-items: center; }
.detail-content { flex: 1; }
.detail-list { margin: 12px 0; }
.detail-row { padding: 10px 0; border-bottom: 1px solid #e6ebf2; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 8px; }
.detail-row dt { color: var(--muted); font-weight: 400; }
.detail-row dd { margin: 0; }
.detail-row:has(.phone-value) { align-items: center; }
.phone-value { display: flex; align-items: center; min-width: 0; }
.phone-number { min-width: 0; min-height: var(--control); display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.detail-row:has(a.phone-number) { padding-top: 0; padding-bottom: 0; }
.notice { padding: 8px 10px; margin: 12px 0; background: #fff7ea; border-radius: 8px; color: #735023; font-size: var(--body); }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.detail-actions .wide { grid-column: 1 / -1; }
.route-state { grid-column: 1 / -1; justify-self: start; }
.route-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.route-buttons > * { padding: 6px 4px; white-space: nowrap; }
.location-copy { margin: 0; }
.location-body { display: flex; flex-direction: column; gap: 12px; }
.notice-copy { margin: 0; line-height: 1.7; }
.notice-actions { justify-content: space-between; align-items: center; }
.notice-choice { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control); cursor: pointer; font-size: var(--small); color: var(--muted); }
.notice-choice input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.route-launch-page { min-height: 100dvh; display: grid; place-items: center; background: #fff; }
.route-launch-content { padding: 16px; text-align: center; }
.chip, .city-option, .facility-card, .close-btn, .primary-btn, .secondary-btn, .subtle-btn, .material-btn { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
@media (max-width: 1199px) {
  :root { --title: 16px; --heading: 15px; --body: 13px; --label: 13px; --small: 11px; --badge: 12px; --control: 36px; --close: 36px; }
  .layout { display: flex; flex-direction: column; }
  .sidebar { flex: none; border: 0; }
  .controls { padding: 8px 12px; }
  .filter-row { margin-top: 4px; gap: 4px 8px; }
  .map-workspace { flex: 1; }
  .map-workspace .list-sheet { position: absolute; z-index: 590; left: 0; right: 0; bottom: 0; height: 42%; max-height: 340px; min-height: 116px; border: 0; border-top: 1px solid #d7dfe9; border-radius: 14px 14px 0 0; box-shadow: 0 -3px 14px #21314e14; overflow: hidden; }
  .sheet-heading { display: block; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: var(--label); font-weight: 600; flex: none; }
  .list-sheet[inert] { visibility: hidden; pointer-events: none; }
  .detail-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: min(60%,calc(100% - 64px)); border: 0; border-top: 1px solid #d7dfe9; border-radius: 14px 14px 0 0; box-shadow: 0 -3px 14px #21314e14; }
  .map-workspace .list-sheet .results { padding-bottom: max(8px,env(safe-area-inset-bottom)); }
  .detail-content { padding-bottom: max(12px,env(safe-area-inset-bottom)); }
  .map-status, .map-fallback { top: 64px; bottom: auto; }
  .dialog-head { padding: 8px 12px; gap: 8px; }
  .dialog-body { padding-block: 12px; }
  .dialog-actions { padding: 8px 12px; gap: 6px; }
  .dialog-actions button { min-width: 76px; }
  .subtle-btn, .secondary-btn, .primary-btn, .city-btn { padding-inline: 8px; }
  .route-buttons > * { padding-inline: 4px; }
  .detail-row { padding: 7px 0; grid-template-columns: 56px minmax(0,1fr); gap: 6px; }
  .detail-list { margin: 8px 0; }
  .detail-actions { margin-top: 8px; gap: 6px; }
  .facility-card { padding: 8px 4px; }
  .facility-body { gap: 3px; }
  .info-body, .filter-body { gap: 12px; }
  .info-body section + section { padding-top: 12px; }
  .city-options { gap: 6px; }
  .filter-btn { min-height: 36px; }
  .topbar { min-height: 58px; }
  .brand img { width: 32px; }
  #near-me { font-size: 12px; padding-inline: 8px; }
}
@media (max-width: 767px) {
  :root { --title: 15px; --heading: 14px; --body: 12px; --label: 13px; --small: 10px; --badge: 12px; }
  .topbar { min-height: 56px; padding: 6px 12px; gap: 8px; }
  .brand { gap: 8px; }
  .brand img { width: 30px; }
  .brand-owner { font-size: 11px; }
  .subtle-btn { font-size: 12px; padding: 6px 8px; }
  .filter-row { gap: 4px; margin-top: 4px; }
  .filter-btn { font-size: 12px; }
  .chip { padding: 4px 8px; }
  .map-toolbar { top: 8px; left: 8px; }
  #near-me { font-size: 11px; padding-inline: 8px; }
  .modal { width: calc(100% - 24px); max-width: 440px; max-height: 88dvh; }
  .city-options { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .detail-panel { max-height: min(60%,calc(100% - 64px)); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: max-content; align-content: start; gap: 0 12px; }
  .list-sentinel, .empty-results { grid-column: 1 / -1; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .material-btn { backdrop-filter: none; background: #fff; border-color: #aeb8c7; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }