/* ==========================================================================
   산책로·간식·사료 섹션 전용 — /walks/*, /treats/*에서만 싣는다(page.styles).
   클래스 접두 od-. 색·모서리는 ui.css의 --ui-* 토큰과 섹션 색(body[data-section="walks|treats"])을 쓴다.
   docs/plan/20260928-160500-walks-and-treats/03-design.md
   ========================================================================== */

/* ---------- 데모 띠·대가성 문구 ---------- */
.od-demo {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-4); padding: var(--sp-2-5) var(--sp-4);
  background: #FFF6D9; border: 1px dashed #D9B44A; border-radius: var(--ui-card-radius);
  font-family: var(--font-util); font-size: var(--fs-sm); line-height: 1.6; color: #5C4708;
}
.od-demo svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #8A6A0C; }
.od-disclosure {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3-5);
  background: var(--ui-surface); border: 1px solid var(--ui-accent-line); border-radius: var(--ui-card-radius);
  font-family: var(--font-util); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2);
}
.od-disclosure svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--ui-accent-ink); }
.od-disclosure.is-compact { background: transparent; border: 0; padding: 0; margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--ui-muted); }

/* ---------- 배너 카드: 홈 산책·간식 배너와 같은 2열(문구 48% · 그림 52%) ---------- */
.od-banner {
  display: grid; grid-template-columns: 48fr 52fr; align-items: stretch;
  margin: 0 0 var(--sp-6); overflow: hidden;
  border-radius: var(--ui-panel-radius); background: var(--ui-mint);
}
.od-banner.is-treat { background: var(--ui-peach); }
/* 링크 배너 hover — 메인 바로가기처럼 선·면 색만 바꾼다(들어 올리는 효과·그림자 없음, 디자인 가이드 §6) */
.od-banner.is-link { text-decoration: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.15s ease; }
.od-banner.is-link:hover { box-shadow: inset 0 0 0 1px var(--ui-accent-line); }
.od-banner.is-link:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.content .od-banner-cta { margin-top: var(--sp-2); font-family: var(--font-util); font-size: var(--fs-sm); font-weight: 750; color: var(--teal-deep); }
.od-banner-text { padding: var(--sp-6) var(--sp-6); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1-5); }
.content .od-banner-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-util); font-size: var(--fs-sm); font-weight: 750; color: var(--teal-deep); }
.content .od-banner-eyebrow svg { width: 15px; height: 15px; flex: none; }
.od-banner.is-treat .od-banner-eyebrow { color: #8A4F1F; }
.content .od-banner-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 780; letter-spacing: -0.05em; line-height: 1.25; color: var(--ink); }
.content .od-banner-desc { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }
.od-banner-art { display: block; width: 100%; height: 100%; min-height: 180px; object-fit: cover; }

/* ---------- 칩 ---------- */
.od-chips { display: flex; flex-wrap: wrap; gap: 4px var(--sp-1); }
.od-chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--sp-2);
  border-radius: var(--ui-pill); background: var(--ui-accent-soft); color: var(--ui-accent-ink);
  font-family: var(--font-util); font-size: var(--fs-xs); font-weight: 650; white-space: nowrap;
}
.od-chip.od-level-hard { background: #FCE4DA; color: #8C3A12; }
.od-chip.od-level-normal { background: #FBF1D6; color: #6E5410; }

/* ---------- 지역 칩·필터(알약 버튼) ---------- */
.od-region-chips, .od-filter-opts { display: flex; flex-wrap: wrap; gap: var(--sp-1-5); align-items: center; }
.od-region-chips { margin: var(--sp-3) 0; }
.od-region-chips button, .od-filter-opts button, .od-filter-opts select {
  min-height: 40px; padding: 0 var(--sp-3-5);
  border: 1px solid var(--ui-hover-line); border-radius: var(--ui-pill); background: var(--ui-surface);
  font-family: var(--font-util); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.od-filter-opts select { padding-right: var(--sp-6); }
.od-region-chips button:hover, .od-filter-opts button:hover { border-color: var(--ui-accent); color: var(--ui-accent-ink); }
.od-region-chips button[aria-pressed="true"], .od-filter-opts button[aria-pressed="true"] {
  background: var(--ui-accent-ink); border-color: var(--ui-accent-ink); color: #fff;
}
.od-filter-opts .od-filter-reset { border-style: dashed; color: var(--ui-muted); }
.od-filters {
  display: grid; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: var(--ui-surface-soft); border-radius: var(--ui-panel-radius);
}
.od-filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: var(--sp-2); }
.od-filters legend { float: left; padding: 0; font-family: var(--font-util); font-size: var(--fs-sm); font-weight: 750; color: var(--ui-accent-ink); }
.od-filters legend label { cursor: pointer; }
.od-filter-count { margin: 0; font-family: var(--font-util); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
html:not(.js) .od-filters, html:not(.js) .od-region-chips { display: none; }
.od-empty { margin: var(--sp-3) 0; padding: var(--sp-4); text-align: center; border-radius: var(--ui-card-radius); background: var(--ui-surface-soft); color: var(--ink-2); }
.od-empty[hidden] { display: none; }

/* ---------- 지도 ---------- */
.od-map {
  position: relative; height: 22rem; margin: var(--sp-3) 0 var(--sp-2);
  border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius); overflow: hidden;
  background: var(--ui-accent-soft);
}
.od-map-fallback { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--sp-5); text-align: center; font-size: var(--fs-sm); color: var(--ink-2); }
.od-map.leaflet-container .od-map-fallback { display: none; }
.od-map-note { margin: 0 0 var(--sp-3); font-family: var(--font-util); font-size: var(--fs-xs); color: var(--ui-muted); }
.od-map .leaflet-popup-content { font-family: var(--font-util); font-size: var(--fs-sm); line-height: 1.55; }
.od-map .od-pop-meta { color: var(--ui-muted); font-size: var(--fs-xs); }
.od-map .od-pop-go { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--teal-deep); }

/* ---------- 카드 그리드 ---------- */
.content .od-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-2); padding: 0; list-style: none;
}
.content .od-grid.is-treats { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.content .od-grid > li { margin: 0; padding: 0; }
.content .od-grid > li::before, .content .od-grid > li::marker { content: none; }
.od-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.od-card[hidden] { display: none; }
.od-card:hover { border-color: var(--ui-hover-line); box-shadow: 0 10px 24px -18px rgba(20, 60, 50, 0.5); }
.od-card.is-focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.content a.od-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.od-card-art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ui-accent-soft); }
.od-card-art.is-square { aspect-ratio: 1 / 1; }
.od-card-body { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-3-5) var(--sp-3-5); }
.content .od-card-title { margin: 0; font-size: var(--fs-md); font-weight: 750; letter-spacing: -0.03em; line-height: 1.4; color: var(--ink); }
.content a.od-card-link:hover .od-card-title { color: var(--ui-accent-ink); text-decoration: underline; }
.od-card-sub { font-family: var(--font-util); font-size: var(--fs-xs); color: var(--ui-muted); }
.od-card-pet { font-family: var(--font-util); font-size: var(--fs-xs); font-weight: 650; color: var(--teal-deep); }
.od-card-pet.is-demo, .od-pet.is-demo { color: #6E5410; }

/* ---------- 상세 요약 카드 ---------- */
.od-summary {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5); align-items: start;
  margin: 0 0 var(--sp-6); padding: var(--sp-4);
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-panel-radius);
  color: var(--ink); text-decoration: none;
}
a.od-summary:hover { border-color: var(--ui-accent); text-decoration: none; }
a.od-summary::after { content: "판매처에서 보기 ↗"; display: inline-block; grid-column: 1 / -1; font-family: var(--font-util); font-size: var(--fs-xs); font-weight: 700; color: var(--ui-accent-ink); }
.od-summary.is-treat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.od-summary-art { display: block; width: 100%; height: auto; border-radius: var(--ui-card-radius); }
.od-summary-art.is-square { aspect-ratio: 1 / 1; object-fit: cover; }
.od-photo { margin: 0; }
.od-photo figcaption { margin-top: var(--sp-1); font-family: var(--font-util); font-size: var(--fs-xs); color: var(--ui-muted); text-align: center; }
.content .od-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; }
.content .od-facts > div { padding: var(--sp-2) var(--sp-3); background: var(--ui-surface-soft); border-radius: var(--radius); }
.content .od-facts .od-facts-wide, .content .od-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.content .od-facts.od-facts-row { grid-column: 1 / -1; }
.content .od-facts.od-facts-row > div:last-child:nth-child(odd) { grid-column: auto; }
.od-summary { align-items: center; }
.od-summary .od-facts-row { align-self: stretch; }
.content .od-facts dt { font-family: var(--font-util); font-size: var(--fs-xs); font-weight: 700; color: var(--ui-accent-ink); }
.content .od-facts dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.5; }
.od-gallery { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.od-gallery img { width: 120px; height: 120px; border-radius: var(--ui-card-radius); object-fit: cover; }
.od-caption { caption-side: top; text-align: left; padding: 0 0 var(--sp-1); font-family: var(--font-util); font-size: var(--fs-xs); color: var(--ui-muted); }

/* ---------- 외부 지도 링크·쿠팡 버튼 ---------- */
.content .od-extlinks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); padding: 0; list-style: none; }
.content .od-extlinks > li { margin: 0; padding: 0; }
.content .od-extlinks > li::before { content: none; }
.content a.od-extlink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--ui-hover-line); border-radius: var(--ui-pill); background: var(--ui-surface);
  font-family: var(--font-util); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); text-decoration: none;
}
.content a.od-extlink::before { content: ""; width: 10px; height: 10px; margin-right: var(--sp-1-5); border-radius: 50%; background: currentColor; }
.content a.od-extlink.is-kakao::before { background: #FEE500; box-shadow: inset 0 0 0 1px #C9B400; }
.content a.od-extlink.is-naver::before { background: #03C75A; }
.content a.od-extlink.is-google::before { background: #4285F4; }
.content a.od-extlink:hover { border-color: var(--ui-accent); color: var(--ui-accent-ink); }
.od-newtab { font-weight: 500; color: var(--ui-muted); font-size: 0.92em; }
.od-note { font-family: var(--font-util); font-size: var(--fs-xs); color: var(--ui-muted); margin-top: var(--sp-2); }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 720px) {
  .od-banner { grid-template-columns: 1fr; border-radius: var(--ui-card-radius); }
  .od-banner-text { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
  .od-banner-art { min-height: 0; height: auto; aspect-ratio: 300 / 180; }
  .od-summary, .od-summary.is-treat { grid-template-columns: 1fr; padding: var(--sp-3); border-radius: var(--ui-card-radius); }
  .od-summary.is-treat .od-photo { max-width: 240px; margin: 0 auto; }
  .od-filters { padding: var(--sp-3); border-radius: var(--ui-card-radius); }
  .od-filters fieldset { grid-template-columns: 1fr; gap: var(--sp-1); }
  /* 필터 칩은 한 줄 가로 스크롤 */
  .od-filter-opts { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .od-filter-opts::-webkit-scrollbar { display: none; }
  .od-filter-opts > * { flex: none; }
  .od-region-chips button, .od-filter-opts button, .od-filter-opts select { min-height: 44px; }
  .od-map { height: 20rem; }
  .content .od-grid, .content .od-grid.is-treats { grid-template-columns: 1fr; }
  .content .od-grid.is-treats .od-card-link { flex-direction: row; }
  .content .od-grid.is-treats .od-card-art { width: 112px; flex: none; }
  .content .od-facts { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .od-card { transition: none; }
}

/* Nationwide walks map; geometry and place lists are loaded only for the selected region. */
.walks-national-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }
.walks-national-actions button, [data-walk-sido-unmapped], [data-walk-legacy-back] {
  min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--ui-hover-line);
  border-radius: var(--ui-pill); background: var(--ui-surface); color: var(--ink-2);
  font: 600 var(--fs-sm)/1.35 var(--font-util); cursor: pointer;
}
.walks-national-map-wrap { overflow: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius); background: var(--ui-surface-soft); }
.walks-national-map { display: block; width: min(100%, 48rem); max-height: 38rem; min-height: 18rem; margin: auto; }
.walks-national-map a:focus-visible { outline: none; }
.walks-national-shape, .walks-subdistrict-shape { fill: var(--ui-accent-soft); stroke: var(--ui-accent-line); stroke-width: 1.15; vector-effect: non-scaling-stroke; transition: fill .15s ease; }
.walks-national-map a:hover .walks-national-shape, .walks-national-map a[aria-current="true"] .walks-national-shape,
.walks-national-map a:hover .walks-subdistrict-shape, .walks-national-map a[aria-current="true"] .walks-subdistrict-shape { fill: var(--ui-accent); }
.walks-national-map a:focus-visible .walks-national-shape, .walks-national-map a:focus-visible .walks-subdistrict-shape { stroke: var(--teal-deep); stroke-width: 2.6; }
.walks-national-label, .walks-national-count, .walks-subdistrict-label, .walks-subdistrict-count, .walks-map-inset-caption {
  fill: var(--ink-2); font-family: var(--font-util); pointer-events: none; text-anchor: middle;
}
.walks-national-label { font-size: 4.3px; font-weight: 650; }
.walks-national-count, .walks-subdistrict-count { font-size: 3.2px; font-weight: 700; }
.walks-subdistrict-label { font-size: 4px; font-weight: 650; }
.walks-map-inset { fill: none; stroke: var(--ui-line); stroke-width: .65; vector-effect: non-scaling-stroke; }
.walks-map-inset-caption { fill: var(--ui-muted); font-size: 3px; }
.walks-sido-view, .walks-unmapped-view { margin-top: var(--sp-3); }
.walks-national-osm { width: 100%; height: min(54vh, 34rem); min-height: 18rem; border-radius: var(--ui-card-radius); background: var(--ui-surface-soft); }
.walks-national-place-list { max-height: 35vh; overflow: auto; margin-top: var(--sp-3); }
.walks-national-place-list-items { display: grid; gap: var(--sp-3); padding: 0; list-style: none; }
.walks-national-place-list-items > li { padding: var(--sp-3); border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius); background: var(--ui-surface); }
.walks-national-place-list-items h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); }
.walk-place-map { margin: var(--sp-3) 0 var(--sp-5); }
.walk-place-map .walk-place-dot { fill: var(--teal); stroke: var(--paper); stroke-width: 1.2; }
.walk-place-card {
  min-width: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); column-gap: 0; align-items: start;
}
.walk-place-card > .biz-name,
.walk-place-card > .biz-addr,
.walk-place-card > .biz-meta {
  grid-column: 1 / -1; grid-row: auto; width: 100%; max-width: 100%;
  min-width: 0; text-align: left; overflow-wrap: anywhere;
}
.walk-place-search { min-width: 0; margin: var(--sp-4) 0 var(--sp-5); }
.walk-place-search > .walk-place-search-form { min-width: 0; margin: 0; }
.walk-place-search > .search-status,
.walk-place-search > .search-results { min-width: 0; max-width: 100%; }
.walk-place-search > .search-status { margin: var(--sp-2) 0; }
.walks-national .region-card,
.walk-place-browser .region-card {
  flex-wrap: nowrap; align-items: center; gap: var(--sp-2);
}
.walks-national .region-name, .walks-national .region-count,
.walk-place-browser .region-name, .walk-place-browser .region-count { white-space: nowrap; }
.walk-place-card[tabindex="0"] { cursor: pointer; }
.walk-place-card[tabindex="0"]:focus-visible { outline: 3px solid var(--ui-accent-ink); outline-offset: 2px; }
.walk-place-card .biz-name { min-width: 0; margin: 0; font-size: var(--fs-md); line-height: 1.4; overflow-wrap: anywhere; }
.walk-place-card .biz-name a { color: inherit; }
.walk-place-card .biz-addr, .walk-place-card .biz-meta { min-width: 0; overflow-wrap: anywhere; }
.walk-place-evidence summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.walk-place-map-note, .walk-place-navigation { overflow-wrap: anywhere; }
.walk-place-filter { min-width: 0; }
.walk-place-results [data-walk-place-filter-status] { color: var(--muted); font-size: var(--fs-sm); }
.walk-place-map-status { color: var(--muted); font-size: var(--fs-sm); margin: calc(var(--sp-4) * -1) 0 var(--sp-4); }
.walk-place-coordinate-status { font-weight: 600; }
.walk-place-results [data-walk-place-filter-empty] { margin: var(--sp-3) 0; }
.walks-verified-place-index { min-width: 0; overflow-wrap: anywhere; }
.walks-verified-place-index ul, .walks-verified-place-index li { min-width: 0; max-width: 100%; }
.walks-national-place-list-items p { margin: var(--sp-1) 0; }
.walks-national-source-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.walks-national-source-links a { min-height: 44px; display: inline-flex; align-items: center; }
.walks-region-picker { display: none; }
.walks-national [data-walk-sido-unmapped-list] { margin: var(--sp-3) 0; }
@media (max-width: 720px) {
  .walks-national-map { width: 100%; min-width: 19rem; min-height: 17rem; }
  .walks-national-actions { align-items: stretch; flex-direction: column; }
  .walks-national-actions button { width: 100%; }
  .walks-region-picker { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); max-width: 32rem; }
  .walks-region-picker label { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); }
  .walks-region-picker select { width: 100%; min-height: 48px; padding: 0 var(--sp-3); border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius); background: var(--ui-surface); color: var(--ink); font: inherit; }
  .walks-national-osm { height: 48vh; min-height: 16rem; }
  .walks-national-place-list { max-height: 33vh; }
}

/* 서울 공원 구 경계 지도 */
.walks-seoul-map-panel { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0; }
.walks-all-data {
  min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--ui-hover-line);
  border-radius: var(--ui-pill); background: var(--ui-surface); color: var(--ink-2);
  font: 600 var(--fs-sm)/1.3 var(--font-util); cursor: pointer;
}
.walks-all-data:focus-visible, .walks-seoul-map a:focus-visible, .walks-map-back:focus-visible, .walks-place-dialog-close:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 2px; }
.walks-map-status, .walks-map-note, .walks-map-attribution { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.walks-map-attribution { font-size: var(--fs-xs); color: var(--ui-muted); }
.walks-seoul-map-wrap { position: relative; overflow: hidden; border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius); background: var(--ui-surface-soft); }
.walks-seoul-map { display: block; width: 100%; max-height: 34rem; margin: auto; }
.walks-district-shape { fill: var(--ui-accent-soft); stroke: var(--ui-accent-line); stroke-width: 1.15; vector-effect: non-scaling-stroke; transition: fill .15s ease; }
.walks-seoul-map a:hover .walks-district-shape, .walks-seoul-map a[aria-current="true"] .walks-district-shape { fill: var(--ui-accent); }
.walks-district-label { fill: var(--ink-2); font: 600 5px var(--font-util); pointer-events: none; }
.walks-place-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: min(80vh, 38rem); margin: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-panel-radius); padding: var(--sp-5); color: var(--ink); }
.walks-osm-dialog { width: min(62rem, calc(100vw - 2rem)); max-height: min(90vh, 48rem); }
.walks-place-dialog::backdrop { background: rgb(16 34 30 / .55); }
.walks-place-dialog-close { float: right; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--ui-line); border-radius: var(--ui-pill); background: var(--ui-surface); color: var(--ink); cursor: pointer; }
.walks-map-back { display: inline-block; min-height: 44px; margin-right: var(--sp-2); padding: 0 var(--sp-2); border: 0; background: transparent; color: var(--ui-accent-ink); font: 600 var(--fs-sm)/1.4 var(--font-util); text-decoration: underline; cursor: pointer; }
.walks-osm-dialog h2 { clear: both; margin: var(--sp-2) 0; }
.walks-map-dialog-status { min-height: 1.5em; margin: 0 0 var(--sp-2); color: var(--ink-2); }
.walks-osm-map { width: 100%; height: min(58vh, 36rem); min-height: 20rem; border-radius: var(--ui-card-radius); background: var(--ui-surface-soft); }
.walks-osm-map .map-popup-links { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (max-width: 720px) {
  .walks-district-label { font-size: 4.5px; }
  .walks-seoul-map { min-height: 17rem; }
  .walks-osm-dialog { max-height: min(94vh, 48rem); padding: var(--sp-3); }
  .walks-osm-map { height: 52vh; min-height: 18rem; }
}
.walks-map-empty { margin: 0; padding: var(--sp-3); border-radius: var(--ui-card-radius); background: var(--ui-surface-soft); color: var(--ink-2); }
.walks-map-empty[hidden] { display: none; }

@media (max-width: 720px) {
  .walks-national-label, .walks-subdistrict-label { paint-order: stroke fill; stroke: var(--ui-surface-soft); stroke-width: 2px; stroke-linejoin: round; }
  .walks-national-label { font-size: 8px; }
  .walks-subdistrict-label { font-size: 7px; }
  .walks-subdistrict-label--overlap { display: none; }
  .walks-national-count, .walks-subdistrict-count { display: none; }
  .walks-osm-dialog { width: calc(100vw - 1rem); max-width: none; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3); }
  .walks-national-dialog-actions { position: sticky; top: calc(-1 * var(--sp-3)); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) 0; background: var(--ui-surface); }
  .walks-national-dialog-actions > button { min-height: 44px; margin: 0; }
  .walks-national-dialog-actions [data-walk-return-submap] { order: -1; }
  .walks-national-dialog-actions [data-walk-national-close] { order: 1; }
  .walks-national-osm { height: min(36vh, 22rem); height: min(36svh, 22rem); min-height: 14rem; }
  .walks-national-place-list { max-height: none; overflow: visible; }
  .walks-osm-dialog .map-popup-links { flex-wrap: wrap; gap: var(--sp-2); }
  .walks-osm-dialog .map-popup-links .map-link { box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; padding: 11px; }
  .walks-osm-dialog .map-popup-links .map-link svg { width: 22px; height: 22px; }
  .walk-place-map .map-popup-links { flex-wrap: wrap; gap: var(--sp-2); }
  .walk-place-map .map-popup-links .map-link { box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; padding: 11px; }
  .walk-place-map .map-popup-links .map-link svg { width: 22px; height: 22px; }
}