/*
 * places.css — Places in Korea page.
 * Mobile-first compact layout; desktop (>860px) splits into a 40% list /
 * 60% sticky map. Uses the clean-premium tokens from main.css. Never
 * animates transforms on .wg-main (overlay stacking gotcha).
 */

.wg-places { max-width: 1200px; margin: 0 auto; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.wg-places-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wg-places-title { display: flex; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 800; margin: 0.25em 0 0.1em; }
.wg-places-title-ico { width: 24px; height: 24px; color: var(--wg-color); }
.wg-places-sub { color: var(--wg-muted); font-size: 0.9rem; margin: 0 0 10px; }

/* ── The sitewide pill (same recipe as the community tabs / .wg-ctab):
      white rounded pill, soft border, weight 600; active = solid green. ── */
.wgp-pill, .wg-places-locbar .wg-chip, .wgp-radius .wg-chip, .wgp-sort .wg-chip,
.wg-places-viewswitch .wg-chip, .wgp-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border: 1px solid var(--wg-border); border-radius: 999px;
  background: #fff; color: var(--wg-muted); font-size: 0.84rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: transform .14s var(--wg-ease-spring, ease), background .16s ease,
              border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
/* Touch screens get taller targets; mouse screens stay compact. */
@media (pointer: coarse) {
  .wgp-pill, .wg-places-locbar .wg-chip, .wgp-radius .wg-chip, .wgp-sort .wg-chip,
  .wg-places-viewswitch .wg-chip, .wgp-chip { padding: 9px 15px; }
}
.wgp-pill:hover, .wg-places-locbar .wg-chip:hover, .wgp-radius .wg-chip:hover,
.wgp-sort .wg-chip:hover, .wg-places-viewswitch .wg-chip:hover, .wgp-chip:hover {
  border-color: var(--wg-color); color: var(--wg-text); transform: translateY(-1px);
}
.wgp-pill:active, .wg-places-locbar .wg-chip:active, .wgp-radius .wg-chip:active,
.wgp-sort .wg-chip:active, .wg-places-viewswitch .wg-chip:active, .wgp-chip:active {
  transform: scale(0.93);
}
.wgp-pill.is-on, .wg-places-locbar .wg-chip.is-on, .wgp-radius .wg-chip.is-on,
.wgp-sort .wg-chip.is-on, .wg-places-viewswitch .wg-chip.is-on, .wgp-chip.is-on {
  background: var(--wg-color); color: #fff; border-color: var(--wg-color);
  box-shadow: 0 2px 9px rgba(14, 175, 76, 0.30);
}
@media (prefers-reduced-motion: reduce) {
  .wgp-pill, .wg-places-locbar .wg-chip, .wgp-radius .wg-chip, .wgp-sort .wg-chip,
  .wg-places-viewswitch .wg-chip, .wgp-chip { transition: none; }
  .wgp-pill:hover, .wgp-pill:active, .wg-places-locbar .wg-chip:hover,
  .wg-places-locbar .wg-chip:active, .wgp-chip:hover, .wgp-chip:active { transform: none; }
}

.wg-places-savedlink {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--wg-border-soft); border-radius: 999px;
  padding: 5px 12px; font-size: 0.82rem; cursor: pointer; color: var(--wg-text);
  transition: background 0.15s var(--wg-ease-out);
}
.wg-places-savedlink:hover { background: var(--wg-tint); }
.wg-places-savedlink .wg-ico { width: 15px; height: 15px; }

.wg-places-searchrow { display: flex; margin-bottom: 8px; }
/* Google/Naver-style bar: one fully rounded pill, icon left, green Search
   button INSIDE on the right. */
.wg-places-searchbox {
  position: relative; flex: 1; display: flex; align-items: center;
  background: var(--wg-surface, #fff); border: 1.5px solid var(--wg-border);
  border-radius: 999px; padding: 4px 4px 4px 18px; min-height: 52px;
  transition: border-color 0.15s var(--wg-ease-out), box-shadow 0.15s var(--wg-ease-out);
}
.wg-places-searchbox:hover { box-shadow: 0 2px 10px rgba(16, 24, 40, 0.10); }
.wg-places-searchbox:focus-within {
  border-color: var(--wg-color);
  box-shadow: 0 2px 12px rgba(14, 175, 76, 0.16);
}
.wg-places-search-ico { width: 18px; height: 18px; color: var(--wg-muted); flex: none; }
/* The global input[type="search"] rule paints its own white box + border +
   focus glow — inside the pill that read as TWO nested selected elements.
   These selectors outrank it so the inner input is invisible chrome: the
   pill container is the only thing that focuses. */
.wg-places-searchbox input.wg-places-input,
.wg-places-searchbox input.wg-places-input:focus {
  flex: 1; border: 0; outline: none; background: none; box-shadow: none;
  border-radius: 0; padding: 10px 8px; font-size: 1rem; min-width: 0;
}
.wg-places-qclear {
  border: 0; background: none; font-size: 1.2rem; color: var(--wg-muted);
  cursor: pointer; padding: 6px 8px; line-height: 1; border-radius: 8px; flex: none;
}
.wg-places-qclear:hover { color: var(--wg-text); }
.wg-places-go {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; height: 42px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--wg-color); color: #fff; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: background .15s ease, transform .14s var(--wg-ease-spring, ease);
}
.wg-places-go:hover { background: var(--wg-color-dark); }
.wg-places-go:active { transform: scale(0.95); }
.wgp-go-ico { width: 16px; height: 16px; }
@media (max-width: 480px) {
  .wg-places-go { width: 42px; padding: 0; }
  .wg-places-go span { display: none; }   /* icon-only; aria-label carries the name */
}
@media (prefers-reduced-motion: reduce) { .wg-places-go { transition: none; } .wg-places-go:active { transform: none; } }

/* ── Location bar + filters ─────────────────────────────────────────────── */
.wg-places-locbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 8px; }
.wg-places-locbar .wgp-locmode { min-height: 34px; font-size: 0.86rem; }
@media (pointer: coarse) { .wg-places-locbar .wgp-locmode { min-height: 40px; } }
.wgp-loc-ico { width: 15px; height: 15px; flex: none; }
.wg-places-curloc {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.85rem; color: var(--wg-muted); padding: 2px 6px;
}
.wgp-curloc-ico { width: 14px; height: 14px; }

.wg-places-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 8px; }
/* The toggle wrapper must not stack the two groups — one line when it fits. */
.wgp-filter-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; }
.wgp-radius, .wgp-sort { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
/* Radius and sort share the line — a hairline divider keeps the two groups
   from reading as one long chip row. */
.wgp-sort { position: relative; padding-left: 16px; }
.wgp-sort::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 1px; background: var(--wg-border);
}
.wgp-radius .wg-chip, .wgp-sort .wg-chip { font-size: 0.8rem; padding: 5px 12px; min-height: 30px; }
@media (pointer: coarse) { .wgp-radius .wg-chip, .wgp-sort .wg-chip { min-height: 36px; padding: 7px 13px; } }

/* ── Quick categories ───────────────────────────────────────────────────── */
.wg-places-cats { margin-bottom: 8px; }
.wgp-cat-groups {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 4px;
}
.wgp-cat-groups::-webkit-scrollbar { display: none; }

/* Desktop (mouse) can't swipe — give the horizontal rails a slim scrollbar.
   (Scoped under .wg-places-cats to outrank the later base rules that hide it.) */
@media (hover: hover) and (pointer: fine) {
  .wg-places-cats .wgp-cat-groups, .wg-places-cats .wgp-cat-chips {
    scrollbar-width: thin; scrollbar-color: #d3dad6 transparent;
    padding-bottom: 8px;
  }
  .wg-places-cats .wgp-cat-groups::-webkit-scrollbar,
  .wg-places-cats .wgp-cat-chips::-webkit-scrollbar {
    display: block; height: 6px;
  }
  .wg-places-cats .wgp-cat-groups::-webkit-scrollbar-thumb,
  .wg-places-cats .wgp-cat-chips::-webkit-scrollbar-thumb {
    background: #d3dad6; border-radius: 999px;
  }
  .wg-places-cats .wgp-cat-groups::-webkit-scrollbar-track,
  .wg-places-cats .wgp-cat-chips::-webkit-scrollbar-track {
    background: transparent;
  }
}
.wgp-cat-group {
  flex: none; border: 0; background: none; padding: 8px 12px; font-size: 0.84rem;
  min-height: 36px; font-weight: 600;
  color: var(--wg-muted); border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.wgp-cat-group.is-on { background: var(--wg-tint); color: var(--wg-color-dark); }
.wgp-cat-chips {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 2px 0 6px;
}
.wgp-cat-chips::-webkit-scrollbar { display: none; }
/* Intent chips inherit the shared pill recipe above; just size them
   (disambiguation / suggestion pills still use this). */
.wgp-chip { min-height: 38px; }

/* Quick-intent cards: your language on top, the Korean term underneath. */
.wgp-intent-card {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: 8px 14px; min-height: 48px; min-width: 100px;
  background: #fff; border: 1px solid var(--wg-border); border-radius: 13px;
  cursor: pointer; text-align: left;
  transition: transform .14s var(--wg-ease-spring, ease), border-color .16s ease,
              background .16s ease, box-shadow .16s ease;
}
@media (pointer: coarse) { .wgp-intent-card { padding: 10px 15px; min-height: 54px; } }
.wgp-intent-card:hover { border-color: var(--wg-color); transform: translateY(-1px); box-shadow: var(--wg-shadow-hover); }
.wgp-intent-card:active { transform: scale(0.96); }
.wgp-intent-card.is-on { border-color: var(--wg-color); background: var(--wg-tint); box-shadow: 0 2px 9px rgba(14, 175, 76, 0.18); }
.wgp-ic-label { font-size: 0.86rem; font-weight: 700; color: var(--wg-text); white-space: nowrap; }
.wgp-ic-ko { font-size: 0.78rem; color: var(--wg-muted); white-space: nowrap; }
.wgp-intent-card.is-on .wgp-ic-ko { color: #076b33; font-weight: 600; }
.wgp-intent-card:focus-visible { outline: none; box-shadow: var(--wg-focus-ring); }
@media (prefers-reduced-motion: reduce) {
  .wgp-intent-card { transition: none; }
  .wgp-intent-card:hover, .wgp-intent-card:active { transform: none; }
}
.wgp-cats-fold {
  border: 0; background: none; color: var(--wg-muted); font-size: 0.78rem;
  cursor: pointer; padding: 8px 4px; min-height: 32px;
}
.wgp-cats-fold:hover { color: var(--wg-text); }

/* Keyboard focus: the site resets outlines globally, so every interactive
   control here paints the shared focus ring itself (audit finding #3). */
.wgp-chip:focus-visible, .wgp-cat-group:focus-visible, .wgp-act:focus-visible,
.wg-places-locbar .wg-chip:focus-visible, .wgp-radius .wg-chip:focus-visible,
.wgp-sort .wg-chip:focus-visible, .wg-places-viewswitch .wg-chip:focus-visible,
.wgp-cats-fold:focus-visible, .wgp-copy-term:focus-visible,
.wg-places-qclear:focus-visible, .wg-places-go:focus-visible,
.wg-places-savedlink:focus-visible, .wgp-area-item:focus-visible,
.wgp-loadmore:focus-visible {
  outline: none; box-shadow: var(--wg-focus-ring);
}

/* ── Search-state line ──────────────────────────────────────────────────── */
.wg-places-state {
  display: flex; align-items: center; gap: 8px;
  background: var(--wg-tint); border-radius: 12px; padding: 6px 12px;
  font-size: 0.86rem; margin-bottom: 6px; color: var(--wg-muted);
}
.wgp-state-main { color: var(--wg-text); font-weight: 700; margin-left: 4px; }
.wgp-state-ko { color: #076b33; font-weight: 700; margin-left: 3px; }
.wgp-state-count { color: var(--wg-muted); margin-left: 4px; }
.wgp-copy-term {
  border: 0; background: none; cursor: pointer; color: var(--wg-muted);
  width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; flex: none;
}
.wgp-copy-term .wg-ico { width: 16px; height: 16px; }
.wgp-copy-term:hover { color: var(--wg-color); background: rgba(14, 175, 76, 0.08); }
.wg-places-helper {
  font-size: 0.8rem; color: var(--wg-muted);
  border-left: 3px solid var(--wg-accent-yellow); padding: 4px 10px; margin: 0 0 8px;
}

/* ── View switch (mobile) ───────────────────────────────────────────────── */
.wg-places-viewswitch { display: none; gap: 6px; margin-bottom: 8px; position: sticky; top: 68px; z-index: 5; }
.wg-places-viewswitch .wg-chip { min-height: 38px; padding: 8px 18px; font-size: 0.87rem; }
@media (max-width: 860px) {
  .wg-places-viewswitch { display: flex; }
}

/* ── Body: list + map. The grid exists only once results carry a map
      (.has-map) — before that the page stays a single centered column, so
      there is never an empty map box beside the intro state. ────────────── */
.wg-places-body { display: block; }
.wg-places-results { display: flex; flex-direction: column; gap: 8px; }
.wg-places-body:not(.has-map) .wg-places-results { max-width: 760px; }
.wg-places-mapwrap { margin-top: 10px; position: relative; }
.wg-places-map {
  width: 100%; height: 55vh; min-height: 300px;
  border-radius: var(--wg-radius-card); border: 1px solid var(--wg-border-soft);
}

/* "Search as I move the map" toggle — floats over the map, top-left. */
.wgp-map-follow {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--wg-border); border-radius: 999px;
  padding: 6px 13px; font-size: 0.8rem; font-weight: 600; color: var(--wg-text);
  box-shadow: var(--wg-shadow-card); cursor: pointer; user-select: none;
}
.wgp-map-follow input { accent-color: var(--wg-color); margin: 0; }

/* Selected-marker popup — bottom center of the map pane. */
.wgp-map-pop {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 4;
  max-width: 420px; margin: 0 auto;
  background: #fff; border: 1px solid var(--wg-border-soft);
  border-radius: 14px; box-shadow: var(--wg-shadow-pop, 0 8px 28px rgba(16,24,40,.18));
  padding: 12px 40px 12px 14px;
}
.wgp-map-pop-x {
  position: absolute; top: 6px; right: 8px; border: 0; background: none;
  font-size: 1.25rem; line-height: 1; color: var(--wg-muted); cursor: pointer; padding: 4px;
}
.wgp-mp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wgp-mp-head b { font-size: 0.95rem; }
.wgp-mp-cat { font-size: 0.76rem; color: #076b33; margin-top: 1px; }
.wgp-mp-actions { display: flex; gap: 6px; margin-top: 9px; }
.wgp-mp-actions .wg-btn { width: auto; }

@media (min-width: 861px) {
  .wg-places-body.has-map { display: grid; grid-template-columns: 40% 60%; gap: 14px; align-items: start; }
  .wg-places-body.has-map .wg-places-results { max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 4px; max-width: none; }
  .wg-places-body.has-map .wg-places-mapwrap { position: sticky; top: 70px; margin-top: 0; }
  .wg-places-body.has-map .wg-places-map { height: calc(100vh - 140px); }
}
@media (max-width: 860px) {
  .wg-places-body.is-mapview .wg-places-results { display: none; }
  .wg-places-body.is-mapview .wg-places-mapwrap { display: block; margin-top: 0; }
}

/* ── Result cards ───────────────────────────────────────────────────────── */
.wgp-card {
  display: flex; gap: 11px;
  background: var(--wg-surface, #fff); border: 1px solid var(--wg-border-soft);
  border-radius: var(--wg-radius-card); box-shadow: var(--wg-shadow-card);
  padding: 11px 13px; cursor: pointer;
  transition: box-shadow 0.15s var(--wg-ease-out), border-color 0.15s var(--wg-ease-out);
}
/* Kakao supplies no place photos — a tinted pin avatar anchors the card
   where the thumbnail would sit. */
.wgp-card-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 12px;
  background: var(--wg-tint); color: var(--wg-color);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;   /* clip the static map to the rounded box */
}
.wgp-card-avatar .wgp-act-ico, .wgp-card-avatar .wg-ico { width: 22px; height: 22px; }
/* When a Kakao Static Map hydrates, its <a><img></a> fills the box. Keep the
   image, but make the thumb non-interactive so a tap opens the CARD, not
   Kakao's map link. Kakao wraps the map in an anchor — never display:none it,
   that hides the map itself. overflow:hidden clips the tiny logo. */
.wgp-card-thumb { width: 60px; height: 60px; pointer-events: none; }
.wgp-card-thumb.is-mapped { background: #e9edeb; }
.wgp-card-thumb > div, .wgp-card-thumb > a, .wgp-card-thumb img {
  width: 100% !important; height: 100% !important; max-width: none;
}
.wgp-card-thumb img { object-fit: cover; }
@media (max-width: 480px) { .wgp-card-thumb { width: 52px; height: 52px; } }
.wgp-card-main { flex: 1; min-width: 0; }
.wgp-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.wgp-badge {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  background: #f4f5f4; color: var(--wg-muted);
}
.wgp-badge-ko { background: var(--wg-tint); color: #076b33; }
.wgp-card:hover { box-shadow: var(--wg-shadow-hover); }
.wgp-card:focus-visible { outline: none; box-shadow: var(--wg-focus-ring); }
.wgp-card.is-selected { border-color: var(--wg-color); box-shadow: 0 0 0 2px var(--wg-color), var(--wg-shadow-card); }
.wgp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wgp-card-name { margin: 0; font-size: 1rem; word-break: keep-all; }
.wgp-card-dist { flex: none; font-size: 0.8rem; color: #076b33; font-weight: 700; }
/* #076b33: --wg-color-dark (#0b8f3e) is only ~3.9:1 on white — too light for
   12px text (audit finding #6). This darker step passes AA. */
.wgp-card-cat { font-size: 0.8rem; color: #076b33; margin-top: 2px; font-weight: 500; }
.wgp-card-addr, .wgp-card-phone { font-size: 0.84rem; color: var(--wg-muted); margin-top: 2px; word-break: keep-all; }
.wgp-card-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.wgp-act {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--wg-border-soft); border-radius: 999px; background: none;
  padding: 5px 11px; font-size: 0.78rem; min-height: 30px; cursor: pointer;
  color: var(--wg-text); text-decoration: none;
  transition: background 0.15s var(--wg-ease-out), border-color 0.15s var(--wg-ease-out);
}
@media (pointer: coarse) { .wgp-act { min-height: 36px; padding: 7px 12px; } }
.wgp-act:hover { background: var(--wg-tint); border-color: var(--wg-color); }
.wgp-act .wgp-act-ico { width: 15px; height: 15px; flex: none; }
.wgp-act-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }
.wgp-act-save.is-on { background: var(--wg-accent-yellow); border-color: var(--wg-accent-yellow); color: #4a3a00; }
.wgp-card-src { font-size: 0.72rem; color: var(--wg-muted); margin-top: 7px; }

/* ── Skeletons + states ─────────────────────────────────────────────────── */
.wgp-skel {
  height: 108px; border-radius: var(--wg-radius-card);
  background: linear-gradient(100deg, #f0f0f0 40%, #fafafa 50%, #f0f0f0 60%);
  background-size: 200% 100%;
  animation: wgp-shimmer 1.2s linear infinite;
}
@keyframes wgp-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .wgp-skel { animation: none; background: #f0f0f0; }
  .wgp-chip, .wgp-card { transition: none; }
  .wgp-chip:hover { transform: none; }
}

.wgp-intro, .wgp-empty, .wgp-unsupported, .wgp-disamb {
  background: var(--wg-surface, #fff); border: 1px dashed var(--wg-border);
  border-radius: var(--wg-radius-card); padding: 20px 16px; text-align: center;
  color: var(--wg-muted); font-size: 0.9rem;
}
.wgp-empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wgp-disamb-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.wgp-didyoumean { margin: 12px 0 0; font-weight: 600; }
.wgp-manual-ko { margin-top: 14px; text-align: left; }
.wgp-manual-ko label { display: block; font-size: 0.8rem; margin-bottom: 4px; }
.wgp-manual-row { display: flex; gap: 6px; }
.wgp-manual-row input {
  flex: 1; border: 1px solid var(--wg-border-soft); border-radius: 10px;
  padding: 8px 10px; font-size: 0.9rem; min-width: 0;
}
.wgp-ai-btn { margin-top: 12px; }
#wgp-ai-preview { margin-top: 8px; }

.wgp-fallback {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--wg-border-soft);
  font-size: 0.85rem; color: var(--wg-muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}

.wgp-loadmore {
  width: 100%; margin: 4px 0; padding: 11px 16px;
  background: #fff; border: 1px solid var(--wg-border); border-radius: 12px;
  font-size: 0.88rem; font-weight: 600; color: var(--wg-text); cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.wgp-loadmore:hover { background: var(--wg-tint); border-color: var(--wg-color); }

/* ── Area modal ─────────────────────────────────────────────────────────── */
.wgp-area-card { max-width: 460px; }
.wgp-area-row { display: flex; gap: 6px; margin-bottom: 10px; }
.wgp-area-row .wg-places-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--wg-border); border-radius: 999px; padding: 10px 16px;
  font-size: 0.92rem;
}
.wgp-area-row .wg-places-input:focus { border-color: var(--wg-color); }
/* main.css makes buttons inside .wg-modal-card full-width (stacked modal
   forms) — that squeezed this input to nothing. Keep this one compact. */
.wgp-area-row .wg-btn { width: auto; flex: none; border-radius: 999px; }
.wgp-area-results { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.wgp-area-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 0; background: none; text-align: left; width: 100%;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.wgp-area-item:hover, .wgp-area-item:focus-visible { background: var(--wg-tint); outline: none; }
.wgp-area-item small { color: var(--wg-muted); font-size: 0.76rem; }
.wgp-area-loading, .wgp-area-empty { color: var(--wg-muted); font-size: 0.85rem; padding: 10px; text-align: center; }

/* ── Detail sheet ───────────────────────────────────────────────────────── */
.wgp-sheet-card { max-width: 480px; }
/* Roadview / map media at the top of the detail sheet. */
.wgp-sheet-media {
  width: 100%; height: 170px; border-radius: 12px; overflow: hidden;
  margin: 0 0 10px; background: #e9edeb;
  border: 1px solid var(--wg-border-soft);
}
.wgp-sheet-media > div { width: 100% !important; height: 100% !important; }
.wgp-sheet-name { margin: 0 0 2px; font-size: 1.15rem; }
.wgp-sheet-cat { font-size: 0.78rem; color: var(--wg-color-dark); margin-bottom: 8px; }
.wgp-sheet-row {
  font-size: 0.88rem; margin: 5px 0; word-break: keep-all;
  display: flex; align-items: flex-start; gap: 7px;
}
.wgp-sheet-row .wgp-act-ico { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--wg-muted); }
.wgp-sheet-btn { display: inline-flex; align-items: center; gap: 6px; }
.wgp-sheet-btn .wgp-act-ico { width: 15px; height: 15px; }
.wgp-sheet-jibun { color: var(--wg-muted); font-size: 0.8rem; }
.wgp-sheet-unverified {
  font-size: 0.76rem; color: var(--wg-muted);
  border-left: 3px solid var(--wg-accent-yellow); padding: 4px 10px; margin: 10px 0;
}
/* Sheet actions: two tidy rows. Row 1 = the two real-world CTAs, equal
   width; row 2 = compact icon tiles (copy ×3 + share). */
.wgp-sheet-primary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin: 12px 0 8px;
}
.wgp-sheet-cta {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 11px 10px; font-size: 0.88rem;
}
.wgp-sheet-cta .wgp-act-ico { width: 16px; height: 16px; }
.wgp-sheet-cta-alt {
  background: #fff; color: var(--wg-text); border: 1px solid var(--wg-border);
  box-shadow: none;
}
.wgp-sheet-cta-alt:hover { background: var(--wg-tint); border-color: var(--wg-color); }
.wgp-sheet-secondary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px; margin-bottom: 4px;
}
.wgp-sheet-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 5px; padding: 10px 4px 8px; min-height: 62px;
  background: none; border: 1px solid var(--wg-border-soft); border-radius: 12px;
  cursor: pointer; font-size: 0.68rem; line-height: 1.25; color: var(--wg-muted);
  text-align: center; word-break: keep-all;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.wgp-sheet-tile .wgp-act-ico { width: 17px; height: 17px; color: var(--wg-color); }
.wgp-sheet-tile:hover { background: var(--wg-tint); border-color: var(--wg-color); color: var(--wg-text); }
.wgp-sheet-tile:focus-visible { outline: none; box-shadow: var(--wg-focus-ring); }

/* Mobile: the sheet slides from the bottom like an app sheet. */
@media (max-width: 640px) {
  .wgp-sheet .wg-modal-card {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-width: none; border-radius: 18px 18px 0 0; margin: 0;
    max-height: 82vh; overflow-y: auto;
    animation: wgp-sheet-up 0.25s var(--wg-ease-out);
  }
  @keyframes wgp-sheet-up { from { transform: translateY(30%); opacity: 0.4; } }
  @media (prefers-reduced-motion: reduce) {
    .wgp-sheet .wg-modal-card { animation: none; }
  }
}

/* ── Saved places modal ─────────────────────────────────────────────────── */
.wgp-saved-card { max-width: 520px; }
#wgp-saved-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.wgp-saved-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--wg-border-soft); border-radius: 12px; padding: 8px 12px;
}
.wgp-saved-main { min-width: 0; display: flex; flex-direction: column; }
.wgp-saved-main b { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wgp-saved-main small { color: var(--wg-muted); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wgp-saved-acts { display: flex; gap: 4px; flex: none; }

/* ── Filters pill: mobile collapses radius/sort behind it ───────────────── */
.wgp-filters-toggle { display: none; }
@media (max-width: 640px) {
  .wgp-filters-toggle { display: inline-flex; }
  .wgp-filter-groups { display: none; width: 100%; }
  .wg-places-filters.is-open .wgp-filter-groups {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px;
  }
  /* Stacked groups in the expanded panel — no divider between lines. */
  .wgp-sort { padding-left: 0; }
  .wgp-sort::before { display: none; }
}

/* ── Why-Waegook strip (bottom of the page) ─────────────────────────────── */
.wg-places-feats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px; margin: 20px 0 6px;
}
.wgp-feat {
  display: flex; align-items: center; gap: 11px;
  background: var(--wg-tint); border-radius: 14px; padding: 13px 15px;
  color: inherit; text-decoration: none;
}
.wgp-feat-ico {
  flex: none; width: 38px; height: 38px; border-radius: 999px;
  background: #fff; color: var(--wg-color);
  display: flex; align-items: center; justify-content: center;
}
.wgp-feat-ico .wg-ico { width: 18px; height: 18px; }
.wgp-feat b { display: block; font-size: 0.86rem; }
.wgp-feat small { display: block; font-size: 0.76rem; color: var(--wg-muted); margin-top: 1px; }
.wgp-feat-link:hover { background: #e3f4e9; }
.wgp-feat-link:focus-visible { outline: none; box-shadow: var(--wg-focus-ring); }

/* Small screens: tighter horizontal padding but NEVER shorter touch targets
   — the location chips are the page's primary controls. */
@media (max-width: 480px) {
  .wg-places-locbar { gap: 6px; }
  .wg-places-locbar .wgp-locmode { padding: 8px 12px; font-size: 0.84rem; }
  .wg-places-go { padding: 0 16px; }
  /* Mockup mobile: card actions become icon-only circles (labels stay in the
     DOM for screen readers). */
  .wgp-card-actions .wgp-act span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wgp-card-actions .wgp-act { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .wgp-card-avatar { width: 42px; height: 42px; }
  /* Map thumbnails get a touch more room on mobile so the map is legible
     (compound selector beats the plain .wgp-card-avatar rule above). */
  .wgp-card-avatar.wgp-card-thumb { width: 54px; height: 54px; }
}