/* ==========================================================================
   방콕 3D 동선 — explore layer, drawer, rail, filter bar, course badge (v5-refined)
   Loads after tokens.css and components.css, before theme.css.
   Ported from the OpenDesign v5-refined base.css. Prototype-only parts are gone:
   the MapLibre stand-ins, the map picture (.bmap*), the map-style switch and the
   chip-row course badge. Explore markers (.xm, .xc) are placed by MapLibre markers
   (anchor center), so they carry no absolute position of their own.
   theme.css (:root[data-look="original"]) sets every token value used here.
   ========================================================================== */

:root {
  /* Defaults = v3 values; theme files override every one of them */
  --font-head: var(--font-ko);
  --font-date: var(--font-num);
  --font-mk: var(--font-ko);
  --font-mk-num: var(--font-num);
  --fw-body: 400;
  --fw-head: 700;
  --ls-head: 0;
  --fs-title: 20px;
  --fs-price: 26px;
  --fs-stat: 24px;
  --fs-mk-label: 13px;
  --fs-mk-num: 14px;
  --tap-desk: 40px;
  --pad-x: 16px;
  --row-min: 76px;
  --thumb: 56px;
  --pv-thumb: 84px;
  --card-pad: 14px;
  --chip-h: var(--tap);
  --r-btn: var(--r-pill);
  --r-chip: var(--r-pill);
  --r-card: var(--r-lg);
  --panel-border: 1px solid var(--border);
  --panel-blur: none;
  --panel-glow: 0 0 #0000;
  --sel-ring: 0 0 #0000;
  --rule-head: 0 solid transparent;
  --icon-sw: 1.9;
  --icon-fill: none;
  --map-bg: #f2ebdd;
  --mk-size: 30px;
  --mk-size-phone: 32px;
  --mk-tail: var(--mk-stop);
  --panel-bg: var(--surface);
  --thumb-desk: 60px;
  --mk-ring-w: 2px;
  --mk-landmark-ring: var(--mk-landmark);
  --mk-label-bd: 0 solid transparent;
  --mk-label-r: var(--r-sm);
  --mk-sel-glow: 0 0 #0000;
  --mk-lead-c: var(--mk-stop);
  --mk-lead-style: dotted;
  --mk-lead-w: 2px;
  --mk-ground-glow: none;
  --x-food: oklch(0.560 0.165 38);
  --x-cafe: oklch(0.500 0.085 60);
  --x-see:  oklch(0.500 0.130 255);
  --x-rest: oklch(0.520 0.140 330);
  --x-mich: oklch(0.540 0.200 25);
  --x-mich-on: oklch(1 0 0);
  --x-me:   oklch(0.560 0.170 255);
  --xm-tile: oklch(1 0 0);
  --xm-on: oklch(1 0 0);
  --xm-r: 10px;
  --xm-ring-w: 2px;
  --c-food: var(--x-food); --c-cafe: var(--x-cafe); --c-see: var(--x-see); --c-rest: var(--x-rest);
  --c-grand: var(--gold); --c-on: oklch(1 0 0);
  --inverse-hover: oklch(0.340 0.014 175);
  --mich-soft: oklch(0.955 0.030 25);
  --mich-text: oklch(0.480 0.190 25);
  --rail-h: 190px;
  --drawer-w: 420px;
  --sheet-mini: calc(76px + var(--safe-bottom));
}

body { font-weight: var(--fw-body); }
/* Every sprite icon (<svg><use href="#i-…"/></svg>) is a stroke pictogram; pastel adds a soft duotone fill */
svg:has(> use) { fill: var(--icon-fill); stroke: currentColor; stroke-width: var(--icon-sw); stroke-linecap: round; stroke-linejoin: round; }

/* The next-stop box only fills on a trip day that is today (shell.js renderNextUp) */
.next-up:empty { display: none; }

/* ---------- Titles: one heading face per look, with the look's rule under sheet titles ---------- */
.brand h1, .drawer-head h2, .fwin-head h2, .cmp-head h2, .plan-head h2, .modal-box h3, .pv-name, .lb-cap h2, .dt-sec > h3, .cmp-common h3 {
  font-family: var(--font-head); font-weight: var(--fw-head); letter-spacing: var(--ls-head);
}
.day-title .big, .mini-date, .ms-p dd, .cmp-stat b { font-family: var(--font-date); }
.drawer-head, .fwin-head, .plan-head, .cmp-head { border-bottom: var(--rule-head); }

/* ---------- v1 components: sizes that were fixed in px now follow the look's scale ---------- */
.icon-btn { inline-size: var(--tap); block-size: var(--tap); }
.plan-chip { min-block-size: var(--tap); border-radius: var(--r-chip); }
.plan-chip-tag { border-radius: var(--r-chip); }
.plan-chip-name { font-size: var(--fs-md); }
.plan-chip-sub { font-size: var(--fs-xs); }
.topbar .icon-btn, .plan-chip, .ctl, .xsum, .rail-count { backdrop-filter: var(--panel-blur); }
#panel, .plan-sheet, .modal-box, .fwin, .drawer, .cmp, .layers-pop { box-shadow: var(--shadow-3), var(--panel-glow); }
.days { padding-inline: calc(var(--pad-x) - 8px); }
.day-tab { min-block-size: calc(var(--tap) + 12px); border-radius: var(--r-btn); }
.day-tab[aria-selected="true"] { box-shadow: var(--sel-ring); }
.day-tab .d { font-size: var(--fs-lg); }
.day-tab .w, .day-tab .k { font-size: var(--fs-2xs); }
.day-head, .block, .next-up, .issues-block { padding-inline: var(--pad-x); }
.seg { margin-inline: var(--pad-x); border-radius: calc(var(--r-btn) + 3px); }
.seg-tab { min-block-size: var(--tap); border-radius: var(--r-btn); font-size: var(--fs-md); }
.seg-tab[aria-selected="true"] { box-shadow: var(--shadow-1), var(--sel-ring); }
.day-title .big { font-size: var(--fs-3xl); }
.day-title .dow { font-size: var(--fs-lg); }
.day-title .kind { font-size: var(--fs-xs); }
.stats, .hint { font-size: var(--fs-md); }
.stats b { font-size: var(--fs-lg); }
.sec-head h2, .sec-head h3 { font-size: var(--fs-sm); }
.issue { font-size: var(--fs-md); }
.issue .ic, .issue.ok .ic { font-size: var(--fs-2xs); }
.issue.ok { font-size: var(--fs-sm); }
.nu-pin, .nu-pin.lodging, .nu-pin.air { font-size: var(--fs-2xs); }
.tl-row { grid-template-columns: calc(var(--fs-md) * 3.2) 26px minmax(0, 1fr); }
.tl-time { font-size: var(--fs-md); }
.tl-num { font-family: var(--font-mk-num); font-size: var(--fs-xs); }
.tl-node { inline-size: 26px; block-size: 26px; margin-top: 7px; }
/* Landmark stops mirror the map pin: the look's pin fill with a gold ring (not white on gold) */
.tl-node.landmark, .nu-pin.landmark { background: var(--fg); color: var(--surface); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold); }
.tl-node::after { font-size: var(--fs-2xs); }
/* Lodging and airport nodes in panels take a mode-aware tile colour (v1 used the fixed map teal) */
.tl-node.lodging, .tl-node.air, .nu-pin.lodging, .nu-pin.air { background: var(--c-see); color: var(--c-on); }
.tl-row.is-next .tl-time::after { font-size: var(--fs-2xs); }
.tl-name { font-size: var(--fs-lg); }
.tl-sub, .tl-sub .th { font-size: var(--fs-sm); }
.tl-note, .tl-leg .tl-note { font-size: var(--fs-md); }
.tl-gap .tl-body { font-size: var(--fs-md); }
.leg-line { font-size: var(--fs-sm); }
.leg-line .mono { font-size: var(--fs-md); }
.mode-tag { font-size: var(--fs-2xs); }
.slot-label { font-size: var(--fs-sm); }
.slot-label .t { font-size: var(--fs-xs); }
.blk, .cand, .chip, .lodging-detail, .nu, .blk-empty { border-radius: var(--r-card); }
.blk-title, .cand .ct { font-size: var(--fs-lg); }
.blk-sum, .cand .cs, .lodging-detail, .blk-empty { font-size: var(--fs-md); }
.blk-actions [data-toggle-slot] { border-radius: var(--r-btn); }
.text-btn { font-size: var(--fs-md); min-block-size: var(--tap); }
.pill { font-size: var(--fs-2xs); }
.chip { font-size: var(--fs-md); }
.chip .rank { font-size: var(--fs-xs); }
.panel-foot { font-size: var(--fs-2xs); }
.ctl { min-block-size: var(--tap); min-inline-size: var(--tap); font-size: var(--fs-sm); border-radius: var(--r-chip); }
.toggle { min-block-size: var(--tap); font-size: var(--fs-md); }
.layers-pop { border-radius: var(--r-card); }
.layers-pop h3 { font-size: var(--fs-sm); }
.map-key { font-size: var(--fs-xs); }
.legend { font-size: var(--fs-xs); }
.toast { font-size: var(--fs-md); border-radius: var(--r-card); }
.modal-box p, .modal-box li { font-size: var(--fs-md); }
.modal-box h3 { font-size: var(--fs-xl); }
.modal-box textarea { font-size: var(--fs-sm); }

/* Layers popover: the map key made it taller, so it scrolls and, on phones, rises above the
   chip row while open instead of sliding under it */
.layers-pop { max-block-size: calc(56cqh - var(--safe-top) - 76px); overflow-y: auto; overscroll-behavior: contain; }
#app:has(#layers-pop:not([hidden])) .map-controls { z-index: calc(var(--z-topbar) + 1); }
.map-key-item:has(.mich) { grid-column: 1 / -1; flex-wrap: wrap; row-gap: 4px; }
@container app (min-width: 861px) { .layers-pop { max-block-size: calc(100cqh - 120px); } }

/* 내 근처: the centre point is a MapLibre marker (anchor center); the 1.2 km ring is a map layer */
.near-me { inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--x-me); box-shadow: 0 0 0 3px var(--xm-tile), 0 0 0 10px color-mix(in srgb, var(--x-me) 22%, transparent); pointer-events: none; }

/* ---------- Route pins (v1 .mk) restyled per look; the colours never change with light/dark ---------- */
.mk { font-family: var(--font-mk); }
.mk-label {
  max-inline-size: 180px; padding: 3px 9px;
  border: var(--mk-label-bd); border-radius: var(--mk-label-r);
  background: var(--mk-label-bg); color: var(--mk-label-fg);
  font-size: var(--fs-mk-label); font-weight: var(--fw-bold); line-height: 1.35;
  backdrop-filter: var(--panel-blur);
}
.mk-pin {
  inline-size: var(--mk-size); block-size: var(--mk-size);
  background: var(--mk, var(--mk-stop)); color: var(--mk-on);
  font-family: var(--font-mk-num); font-size: var(--fs-mk-num);
  box-shadow: 0 0 0 var(--mk-ring-w) var(--mk-ring), 0 0 0 calc(var(--mk-ring-w) + 1px) var(--mk-edge), var(--mk-shadow);
  transition: scale var(--dur-fast) var(--ease-standard);
}
.mk-pin::after { border-top-color: var(--mk-tail); }
.mk-lodging .mk-pin, .mk-air .mk-pin { color: var(--mk-on); }
.mk.landmark .mk-pin { background: var(--mk-landmark); box-shadow: 0 0 0 var(--mk-ring-w) var(--mk-landmark-ring), 0 0 0 calc(var(--mk-ring-w) + 3px) var(--mk-landmark-halo), 0 0 0 calc(var(--mk-ring-w) + 4px) var(--mk-edge), var(--mk-shadow); }
.mk[aria-current="true"] .mk-pin { scale: 1.1; box-shadow: 0 0 0 var(--mk-ring-w) var(--mk-ring), 0 0 0 calc(var(--mk-ring-w) + 2.5px) var(--mk-focus), var(--mk-sel-glow), var(--mk-shadow); }
.mk[aria-current="true"] .mk-label { background: var(--mk-label-fg); color: var(--mk-label-bg); border-color: var(--mk-label-fg); }
.mk:hover .mk-label, .mk:focus-visible .mk-label { box-shadow: 0 0 0 2px var(--mk-focus), var(--mk-shadow); }
/* Floating pin: the head sits at the model's height, a thin leader runs to the ground point */
.mk.is-lift .mk-pin { margin-bottom: 0; }
.mk.is-lift .mk-pin::after { display: none; }
.mk-lead {
  position: relative; inline-size: 0; block-size: var(--lift, 0px); margin-top: -4px;
  border-left: var(--mk-lead-w) var(--mk-lead-style) var(--mk-lead-c);
  filter: drop-shadow(0 0 1px var(--mk-ring));
}
.mk-lead::after {
  content: ''; position: absolute; left: calc(var(--mk-lead-w) / -2); bottom: -4px; translate: -50% 0;
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--mk-lead-c); box-shadow: 0 0 0 1.5px var(--mk-ring);
}
.mk.landmark .mk-lead::before {
  content: ''; position: absolute; left: calc(var(--mk-lead-w) / -2); bottom: -14px; translate: -50% 0;
  inline-size: 56px; block-size: 26px; border-radius: 50%;
  background: var(--mk-ground-glow); pointer-events: none;
}
.map-key .mk-pin { scale: 0.8; }

/* ---------- Explore markers: rounded tiles, never numbered, no tail ---------- */
.xm { --xm-c: var(--x-food); display: grid; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-mk); }
.xm-body {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-inline-size: 34px; block-size: 34px; padding: 0 6px;
  border-radius: var(--xm-r); background: var(--xm-tile); color: var(--xm-c);
  box-shadow: inset 0 0 0 var(--xm-ring-w) var(--xm-c), var(--mk-shadow);
  transition: scale var(--dur-fast) var(--ease-standard);
}
.xm-body svg { inline-size: 20px; block-size: 20px; stroke-width: 2.1; }
.xm.is-grand .xm-body { background: var(--mk-landmark); color: var(--mk-on); box-shadow: 0 0 0 2px var(--mk-landmark-ring), 0 0 0 5px var(--mk-landmark-halo), 0 0 0 6px var(--mk-edge), var(--mk-shadow); }
.xm.is-price .xm-body { border-radius: var(--r-pill); padding: 0 10px 0 7px; }
.xm.is-price .xm-body svg { inline-size: 17px; block-size: 17px; }
.xm-price { font-family: var(--font-mk-num); font-size: var(--fs-mk-label); font-weight: var(--fw-bold); line-height: 1; color: var(--mk-label-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.xm-price small { font-family: var(--font-mk); font-size: var(--fs-2xs); font-weight: var(--fw-semi); margin-right: 3px; }
.xm-label {
  position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0;
  display: none; max-inline-size: 200px; padding: 4px 9px;
  border: var(--mk-label-bd); border-radius: var(--mk-label-r); background: var(--mk-label-fg); color: var(--mk-label-bg);
  font-size: var(--fs-mk-label); font-weight: var(--fw-bold); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--mk-shadow);
}
.xm:hover .xm-body, .xm.is-hot .xm-body { scale: 1.12; }
.xm.is-hot .xm-body { box-shadow: 0 0 0 3px var(--mk-focus), var(--mk-sel-glow), var(--mk-shadow); }
.xm:hover .xm-label, .xm:focus-visible .xm-label, .xm.is-hot .xm-label, .xm[aria-current="true"] .xm-label { display: block; }
.xm:focus-visible { outline: none; }
.xm:focus-visible .xm-body { outline: 2px solid var(--mk-focus); outline-offset: 3px; }
.xm[aria-current="true"] { z-index: 2; }
.xm[aria-current="true"] .xm-body { scale: 1.22; background: var(--xm-c); color: var(--xm-on); box-shadow: 0 0 0 2.5px var(--mk-ring), 0 0 0 4.5px var(--mk-focus), var(--mk-sel-glow), var(--mk-shadow); }
.xm[aria-current="true"].is-grand .xm-body { background: var(--mk-landmark); color: var(--mk-on); box-shadow: 0 0 0 2.5px var(--mk-landmark-ring), 0 0 0 5px var(--mk-focus), var(--mk-sel-glow), var(--mk-shadow); }
.xm[aria-current="true"] .xm-price { color: var(--xm-on); }
.xm.is-key { position: static; translate: none; pointer-events: none; }
.xm.is-key .xm-body { scale: 0.86; }

.mich {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 20px; block-size: 20px; border-radius: 50%;
  background: var(--x-mich); color: var(--x-mich-on);
  font-family: var(--font-mk-num); font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 1;
}
.xm .mich, .ptile .mich { position: absolute; top: -8px; right: -8px; box-shadow: 0 0 0 1.5px var(--xm-tile); }
/* In panels the badge follows the panel colours so it stays AA in dark mode */
.pill .mich, .fchip .mich, .lr .mich, .pv .mich, .map-key .mich, .dt-head .mich { background: var(--mich-text); color: var(--surface); }

/* Cluster: a stacked pill with a count — clearly not a numbered route pin */
.xc {
  display: inline-flex; align-items: center; gap: 6px;
  block-size: 36px; padding: 0 12px 0 8px;
  border: 0; border-radius: var(--r-pill);
  background: var(--xm-tile); color: var(--mk-label-fg);
  box-shadow: 0 0 0 1px var(--mk-edge), 3px 3px 0 -1px var(--xm-tile), 3px 3px 0 0 var(--mk-edge), var(--mk-shadow);
  font-family: var(--font-mk-num); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1;
  cursor: pointer;
}
.xc:hover { filter: brightness(0.97); }
.xc:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 3px; }
.xc-dots { display: inline-flex; }
.xc-dots i { inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--xm-tile); }
.xc-dots i + i { margin-left: -4px; }
.xc.is-key { position: static; translate: none; block-size: 28px; padding: 0 9px; font-size: var(--fs-xs); }

/* ---------- Filter bar (v2-c): chips act at once; the badge counts picked options ---------- */
.fbar { position: absolute; z-index: var(--z-topbar); left: 0; right: 0; top: calc(var(--safe-top) + var(--tap) + 16px); pointer-events: none; transition: opacity var(--dur-base); }
.fbar > * { pointer-events: auto; }
.fbar-row { display: flex; align-items: center; gap: 8px; padding: 2px var(--edge) 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.fbar-row::-webkit-scrollbar { display: none; }
.fchip {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  block-size: var(--chip-h); padding: 0 15px 0 12px;
  border-radius: var(--r-chip); border: 1px solid var(--border);
  background: var(--surface); color: var(--fg);
  font-size: var(--fs-md); font-weight: var(--fw-semi); white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast) var(--ease-standard);
}
.fchip svg { inline-size: 19px; block-size: 19px; }
.fchip .mich { inline-size: 20px; block-size: 20px; }
.fchip:hover { background: var(--surface-3); }
.fchip[aria-pressed="true"], .fchip-all[aria-expanded="true"] { background: var(--inverse-bg); border-color: var(--inverse-bg); color: var(--inverse-fg); box-shadow: var(--shadow-1), var(--sel-ring); }
.fchip[aria-pressed="true"]:hover, .fchip-all[aria-expanded="true"]:hover { background: var(--inverse-hover); border-color: var(--inverse-hover); }
.fchip-n {
  min-inline-size: 22px; padding: 2px 6px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-num); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.2; text-align: center;
  font-variant-numeric: tabular-nums;
}
.fbar-sep { flex: none; inline-size: 1px; block-size: 24px; background: var(--border-strong); }

/* Filter window: phone bottom sheet (map stays ≥35% visible above it), desktop popover */
.fwin {
  position: absolute; z-index: var(--z-plan); left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  max-block-size: calc(65% - var(--safe-top) - 2 * var(--tap) - 28px);
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  animation: sheet-in var(--dur-slow) var(--ease-sheet);
}
.fwin-scrim { position: absolute; inset: 0; z-index: var(--z-scrim); background: transparent; }
#app:has(#fwin:not([hidden])) .fbar { z-index: calc(var(--z-plan) + 1); }
/* The filter window covers the legend's place; its last row showed under the window's foot (QA V-15) */
#app:has(#fwin:not([hidden])) .legend { visibility: hidden; }
.fwin-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px var(--pad-x) 8px; }
.fwin-head h2 { margin: 0; font-size: var(--fs-xl); }
.fwin-n { font-size: var(--fs-md); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.fwin-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--pad-x) 12px; display: grid; gap: 18px; align-content: start; }
.wsec h3 { margin: 0 0 10px; font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.02em; color: var(--fg-2); }
.wsec h4 { margin: 14px 0 8px; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg-2); }
.wchips { display: flex; flex-wrap: wrap; gap: 8px; }
.wchip {
  display: inline-flex; align-items: center; gap: 7px;
  min-block-size: var(--tap); padding: 0 13px 0 8px;
  border-radius: var(--r-btn); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--fg);
  font-size: var(--fs-md); font-weight: var(--fw-semi); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard);
}
.wchip:not(:has(.ptile, svg, .mich)) { padding-left: 13px; }
.wchip > svg { inline-size: 19px; block-size: 19px; color: var(--fg-2); }
.wchip:hover { background: var(--surface-2); }
.wchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wchip[aria-pressed="true"]:hover { background: var(--accent-soft-hover); }
.wchip .ptile { inline-size: 28px; block-size: 28px; border-radius: 8px; }
.wchip .ptile svg { inline-size: 17px; block-size: 17px; }
.wchip-n { font-family: var(--font-num); font-weight: var(--fw-medium); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.fwin-foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px var(--pad-x) calc(12px + var(--safe-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.fwin-foot .btn { min-inline-size: 96px; }

.research {
  position: absolute; z-index: var(--z-topbar);
  left: 50%; translate: -50% 0; top: calc(var(--safe-top) + 2 * var(--tap) + 26px);
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: var(--tap); padding: 0 18px 0 14px;
  border-radius: var(--r-chip); border: 1px solid var(--border);
  background: var(--surface); color: var(--accent-text);
  font-size: var(--fs-md); font-weight: var(--fw-semi); white-space: nowrap;
  box-shadow: var(--shadow-2);
  animation: pop-in var(--dur-base) var(--ease-standard);
}
.research svg { inline-size: 18px; block-size: 18px; }
.research:hover { background: var(--accent-soft); }

.xsum {
  display: inline-flex; align-items: center; gap: 10px; min-inline-size: 0;
  min-block-size: var(--tap); padding: 0 5px 0 14px;
  border-radius: var(--r-chip); border: 1px solid var(--border);
  background: var(--surface-glass); color: var(--fg);
  font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap;
  box-shadow: var(--shadow-1);
}
.xsum b { font-family: var(--font-num); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.xsum-go { display: inline-flex; align-items: center; gap: 4px; block-size: calc(var(--tap) - 8px); padding: 0 12px 0 9px; border-radius: var(--r-btn); background: var(--inverse-bg); color: var(--inverse-fg); font-size: var(--fs-md); font-weight: var(--fw-semi); }
.xsum-go svg { inline-size: 16px; block-size: 16px; }
.xsum:hover .xsum-go { background: var(--inverse-hover); }

/* ---------- Itinerary sheet: "mini" state for explore ---------- */
#panel { transition: block-size var(--dur-slow) var(--ease-sheet), translate var(--dur-slow) var(--ease-sheet); }
.mini { display: none; }
.mini-date { font-weight: var(--fw-bold); font-size: var(--fs-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.mini-date small { display: block; margin-top: 3px; font-family: var(--font-ko); font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--fg-2); text-align: center; }
.mini-main { display: grid; min-width: 0; line-height: 1.35; }
.mini-title { font-weight: var(--fw-semi); font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-sub { font-size: var(--fs-sm); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-go { display: inline-flex; align-items: center; gap: 2px; min-block-size: var(--tap); padding: 0 10px 0 14px; border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-md); font-weight: var(--fw-semi); }
.mini-go svg { inline-size: 16px; block-size: 16px; rotate: 180deg; }
.mini:hover .mini-go { background: var(--surface-3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-block-size: var(--tap); padding: 0 16px;
  border-radius: var(--r-btn); border: 1px solid transparent;
  font-size: var(--fs-md); font-weight: var(--fw-semi); white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.btn svg { inline-size: 18px; block-size: 18px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--sel-ring); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--surface-2); border-color: var(--border); color: var(--fg); }
.btn-ghost:hover { background: var(--surface-3); }
.btn.is-done { background: var(--ok-soft); color: var(--ok); box-shadow: none; }

/* ---------- Preview rail (phones): three lines per card, the whole card opens the detail ---------- */
.rail { position: absolute; z-index: var(--z-card); left: 0; right: 0; bottom: calc(var(--safe-bottom) + 6px); display: grid; animation: sheet-in var(--dur-slow) var(--ease-sheet); }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 var(--edge) 6px; }
.rail-count { display: inline-flex; align-items: center; min-block-size: 34px; padding: 0 12px; border-radius: var(--r-chip); background: var(--surface-glass); box-shadow: var(--shadow-1); font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--fg); font-variant-numeric: tabular-nums; }
.rail-count b { font-family: var(--font-num); }
.rail-close { position: relative; display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-1); }
.rail-close svg { inline-size: 20px; block-size: 20px; }
.rail-close:hover { background: var(--surface-3); }
.rail-track { position: relative; display: flex; gap: 10px; padding: 2px var(--edge) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--edge); scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; }
.rail-track::-webkit-scrollbar { display: none; }
.rail.is-lift .rail-track { transition: translate var(--dur-base) var(--ease-standard); }
.pv {
  position: relative; flex: 0 0 calc(100% - 26px); scroll-snap-align: start;
  display: grid; grid-template-columns: var(--pv-thumb) minmax(0, 1fr); align-items: center;
  gap: 14px; padding: calc(var(--card-pad) + 4px) 12px var(--card-pad) var(--card-pad);
  border-radius: var(--r-card); border: var(--panel-border);
  background: var(--surface); box-shadow: var(--shadow-2), var(--panel-glow);
}
.pv::before { content: ''; position: absolute; top: 6px; left: 50%; translate: -50% 0; inline-size: 32px; block-size: 4px; border-radius: 2px; background: var(--border-strong); }
.pv-hit { position: absolute; inset: 0; z-index: 0; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.pv-hit:focus-visible { outline-offset: -3px; }
.pv > :not(.pv-hit) { position: relative; z-index: 1; pointer-events: none; }
.pv-thumb { align-self: start; inline-size: var(--pv-thumb); block-size: var(--pv-thumb); border-radius: calc(var(--r-card) - 4px); overflow: hidden; background: var(--surface-2); }
.pv-thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.pv-thumb .ptile { inline-size: 100%; block-size: 100%; border-radius: 0; }
.pv-thumb .ptile svg { inline-size: 40px; block-size: 40px; stroke-width: 1.6; }
.pv-main { display: grid; align-content: center; gap: 4px; min-width: 0; }
.pv-name { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xl); line-height: 1.3; }
.pv-name > span:first-child { min-width: 0; }
.pv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--fs-md); line-height: 1.45; color: var(--fg-2); }
.pv-line b { color: var(--fg); font-weight: var(--fw-semi); }
.pv-line .dot { color: var(--muted); }
/* The chevron ends the name row, so the two text rows below get the card's full width */
.pv-go { flex: none; inline-size: 18px; block-size: 18px; margin-inline-start: auto; color: var(--muted); }

/* Shared bits: panel tiles use the mode-aware category colours (--pc set inline) */
.ptile { position: relative; display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: calc(var(--r-card) - 2px); background: var(--pc, var(--c-food)); color: var(--c-on); }
.ptile svg { inline-size: 23px; block-size: 23px; }
.ptile.is-grand { background: var(--c-grand); }
.st { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semi); white-space: nowrap; }
.st::before { content: ''; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.st.open { color: var(--ok); }
.st.soon { color: var(--warn); }
.st.closed { color: var(--err); }
.walk-line { display: inline-flex; align-items: center; gap: 3px; }
.walk-line svg { inline-size: 16px; block-size: 16px; flex: none; }
.soft { color: var(--fg-2); font-weight: var(--fw-regular); }

/* ---------- Drawer: list + detail ---------- */
.drawer {
  position: absolute; z-index: var(--z-card); left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  animation: sheet-in var(--dur-slow) var(--ease-sheet);
}
.drawer-grab { flex: none; position: relative; block-size: 22px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.drawer-grab::before { content: ''; position: absolute; top: 8px; left: 50%; translate: -50% 0; inline-size: 40px; block-size: 5px; border-radius: 3px; background: var(--border-strong); }
.drawer-grab::after { content: ''; position: absolute; inset: 0 0 -22px; }
.drawer-head { flex: none; display: flex; align-items: center; gap: 4px; margin: 0 var(--pad-x) 0 calc(var(--pad-x) - 6px); padding: 0 0 8px 6px; }
.drawer-head h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-title); line-height: var(--lh-tight); text-wrap: balance; }
/* Above the grab's tap area, which reaches 22px down over the head (QA3A-02: the top of × went back) */
.drawer-head .icon-btn { position: relative; z-index: 1; background: var(--surface-2); border-color: transparent; }
.drawer-head .icon-btn:hover { background: var(--surface-3); }
.drawer-back { margin-left: -6px; }
.drawer[data-view="list"] .drawer-back { display: none; }
.drawer[data-view="place"] .drawer-head { padding-left: 0; }
.drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 10px var(--pad-x) 24px; }
.drawer-actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px var(--pad-x) calc(12px + var(--safe-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.drawer-actions:empty { display: none; }
.drawer-actions .btn { flex: 1 1 auto; min-block-size: calc(var(--tap) + 4px); padding: 0 14px; }
.drawer-actions .btn-primary { flex-grow: 1.4; }
/* Three buttons: the primary takes the first row, the two map links share the second */
.drawer-actions[data-n="3"] .btn:first-child { flex-basis: 100%; }

.lr-list { list-style: none; margin: 0; padding: 0; }
.lr-list li + li { border-top: 1px solid var(--border); }
.lr {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  inline-size: 100%; min-block-size: var(--row-min); padding: 12px 8px;
  border: 0; border-radius: var(--r-card); background: none; color: var(--fg); text-align: left;
  transition: background var(--dur-fast) var(--ease-standard);
}
.lr:hover, .lr.is-hot { background: var(--surface-2); box-shadow: var(--sel-ring); }
.lr-main { display: grid; gap: 3px; min-width: 0; }
.lr-name { display: flex; align-items: center; gap: 6px; font-size: var(--fs-lg); font-weight: var(--fw-semi); line-height: 1.3; }
.lr-name > span:first-child { min-width: 0; }
.lr-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--fs-md); line-height: 1.4; color: var(--fg-2); }
.lr-go { color: var(--muted); inline-size: 18px; block-size: 18px; }
.lr-empty { margin: 16px 0; font-size: var(--fs-md); color: var(--fg-2); }

.dt-head { display: grid; gap: 6px; margin-bottom: 12px; }
.dt-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-badges .pill { font-size: var(--fs-sm); padding: 2px 10px; }
.dt-badges .pill { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; } /* long labels (a meal slot area) never widen the drawer */
.pill.kind { gap: 5px; color: var(--fg); }
.pill.kind svg { inline-size: 15px; block-size: 15px; }
.pill.mich-pill { gap: 6px; padding-left: 4px; background: var(--mich-soft); border-color: transparent; color: var(--mich-text); font-weight: var(--fw-semi); }
.pill.mich-pill .mich { inline-size: 20px; block-size: 20px; }
.dt-alt { font-size: var(--fs-sm); line-height: 1.45; color: var(--fg-2); }
.dt-alt .th { font-size: var(--fs-sm); }
.dt-desc { margin: 0 0 12px; font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--fg); text-wrap: pretty; }
.dt-facts { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; font-size: var(--fs-md); line-height: 1.45; }
.dt-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.dt-facts li > svg { inline-size: 20px; block-size: 20px; color: var(--fg-2); margin-top: 1px; }
.dt-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.dt-sec.is-first { margin-top: 4px; }
.dt-sec > h3 { margin: 0 0 8px; font-size: var(--fs-lg); }
.dt-links { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: var(--fs-md); }
.dt-links a { display: inline-flex; align-items: center; gap: 4px; min-block-size: var(--tap); color: var(--accent-text); font-weight: var(--fw-semi); text-decoration: none; }
.dt-links a:hover { text-decoration: underline; }
.dt-links svg { inline-size: 15px; block-size: 15px; }
.dt-memo { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-card); background: var(--surface-2); font-size: var(--fs-md); line-height: var(--lh-snug); }
.dt-memo b { margin-right: 6px; font-weight: var(--fw-semi); }

/* Photos: full frame, credit sits small and translucent in the corner (no caption line) */
.dt-photo { position: relative; inline-size: fit-content; max-inline-size: 100%; margin: 0 auto 14px; }
.dt-photo img { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: 240px; border-radius: var(--r-card); }
.ph-credit {
  position: absolute; left: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px 2px 4px; border-radius: 5px;
  background: oklch(0 0 0 / 0.55); color: oklch(1 0 0);
  font-family: var(--font-ko); font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: 1.4; text-decoration: none; white-space: nowrap;
}
.ph-credit svg { inline-size: 12px; block-size: 12px; stroke-width: 2; }
a.ph-credit:hover { background: oklch(0 0 0 / 0.7); }

/* Menu: v2-a rows with a photo thumbnail — photo | Korean name + short line, TH · EN under it | price */
.menu { list-style: none; margin: 0; padding: 0; }
.mrow { display: grid; grid-template-columns: var(--thumb) minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; }
.mrow-ph {
  position: relative; display: grid; place-items: center;
  inline-size: var(--thumb); block-size: var(--thumb); padding: 0;
  border: 0; border-radius: calc(var(--r-card) - 2px);
  background: color-mix(in oklch, var(--pc, var(--c-food)) 16%, var(--surface-2)); color: var(--pc, var(--c-food));
  cursor: zoom-in;
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.mrow-ph > svg { inline-size: 26px; block-size: 26px; stroke-width: 1.7; }
button.mrow-ph:hover { box-shadow: inset 0 0 0 2px var(--pc, var(--c-food)); }
.mrow-ph.is-none { background: var(--surface-2); color: var(--muted); cursor: default; }
/* Small camera mark: this tile opens a photo */
.mrow-cam { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; inline-size: 18px; block-size: 18px; border-radius: 50%; background: oklch(0 0 0 / 0.55); color: oklch(1 0 0); }
.mrow-cam svg { inline-size: 11px; block-size: 11px; stroke-width: 2.2; fill: none; }
.mrow + .mrow { border-top: 1px solid var(--border); }
.mrow-t { min-width: 0; }
.mrow-main { margin: 0; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.mrow-main b { margin-right: 4px; font-weight: var(--fw-bold); color: var(--fg); }
.mrow-sub { margin: 2px 0 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.mrow-sub .th { font-size: var(--fs-sm); }
.mrow-price { font-family: var(--font-num); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ms-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ms-p { display: grid; gap: 2px; padding: 12px; border-radius: var(--r-card); background: var(--surface-2); }
.ms-p dt { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--fg-2); }
.ms-p dd { margin: 0; font-size: var(--fs-price); font-weight: var(--fw-bold); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ms-p.na dd { font-family: var(--font-ko); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--fg-2); line-height: 1.8; }
.strength { display: inline-flex; align-items: center; gap: 10px; }
.strength-bar { display: grid; grid-template-columns: repeat(3, 38px); gap: 4px; }
.strength-bar i { display: grid; place-items: center; block-size: 28px; border-radius: 6px; background: var(--surface-3); font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg-2); }
.strength-bar i.on { background: var(--inverse-bg); color: var(--inverse-fg); }

.grand { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semi); color: var(--gold-text); }
.grand-dots { display: inline-flex; gap: 3px; }
.grand-dots i { inline-size: 8px; block-size: 8px; rotate: 45deg; border-radius: 2px; background: var(--surface-3); }
.grand-dots i.on { background: var(--gold); }
.see3 { display: grid; gap: 10px; margin: 0 0 14px; }
.see3 > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.see3 dt { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg-2); padding-top: 3px; }
.see3 dd { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); text-wrap: pretty; }

/* Add-to-plan picker (inside #modal) */
.slot-pick { display: grid; gap: 8px; margin-top: 12px; }
.slot-pick button {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-block-size: 60px; padding: 8px 12px; border-radius: var(--r-card); border: 1px solid var(--border);
  background: var(--surface); color: var(--fg); text-align: left;
}
.slot-pick button:hover { background: var(--surface-2); border-color: var(--border-strong); }
.slot-pick .sp-slot { font-weight: var(--fw-semi); font-size: var(--fs-md); }
.slot-pick .sp-slot small { display: block; font-family: var(--font-num); font-size: var(--fs-xs); color: var(--fg-2); }
.slot-pick .sp-blk { font-size: var(--fs-md); line-height: var(--lh-snug); }
.slot-pick .sp-blk b { font-weight: var(--fw-semi); }
.slot-pick .sp-go { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--accent-text); }

/* Plan sheet entry to the comparison */
.cmp-open {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  inline-size: 100%; min-block-size: 58px; margin-top: 12px; padding: 8px 12px;
  border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface-2); color: var(--fg); text-align: left;
}
.cmp-open:hover { background: var(--surface-3); }
.cmp-open > svg:first-child { inline-size: 22px; block-size: 22px; justify-self: center; color: var(--fg-2); }
.cmp-open b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semi); }
.cmp-open span span { font-size: var(--fs-sm); color: var(--fg-2); }
.cmp-open-go { inline-size: 18px; block-size: 18px; color: var(--muted); }

/* ---------- Menu photo viewer (lightbox): dark in every look, like any photo viewer ---------- */
.lb {
  position: absolute; inset: 0; z-index: calc(var(--z-modal) + 2);
  /* Top bar pinned; photo and its caption centred together below it */
  display: flex; flex-direction: column;
  padding: var(--safe-top) 0 calc(var(--safe-bottom) + 16px);
  background: oklch(0.14 0.008 250 / 0.95); color: oklch(0.97 0 0);
  animation: fade-in var(--dur-base) var(--ease-standard);
}
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px 16px; }
.lb-count { font-family: var(--font-num); font-size: var(--fs-md); font-weight: var(--fw-semi); color: oklch(0.88 0 0); font-variant-numeric: tabular-nums; }
.lb-btn {
  display: grid; place-items: center; flex: none;
  inline-size: var(--tap); block-size: var(--tap); padding: 0;
  border: 0; border-radius: 50%;
  background: oklch(1 0 0 / 0.14); color: oklch(1 0 0);
  transition: background var(--dur-fast) var(--ease-standard);
}
.lb-btn svg { inline-size: 22px; block-size: 22px; fill: none; }
.lb-btn:hover { background: oklch(1 0 0 / 0.26); }
.lb-btn:focus-visible { outline: 2px solid oklch(1 0 0); outline-offset: 2px; }
.lb-btn[hidden] { display: grid !important; visibility: hidden; }
/* Phone: the photo takes the full width and the arrows sit on its edges; desktop moves them beside it */
.lb-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; margin-top: auto; padding: 0 16px; min-height: 0; }
.lb-prev, .lb-next { position: absolute; z-index: 1; top: 50%; translate: 0 -50%; background: oklch(0 0 0 / 0.5); }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-prev:hover, .lb-next:hover { background: oklch(0 0 0 / 0.7); }
.lb-fig { margin: 0; display: grid; place-items: center; min-width: 0; min-height: 0; touch-action: pan-y; }
.lb-ph {
  position: relative; display: grid; place-items: center; align-content: center; gap: 12px;
  inline-size: 100%; max-inline-size: 760px; aspect-ratio: 4 / 3; max-block-size: 100%;
  border-radius: var(--r-card);
  background: color-mix(in oklch, var(--pc, var(--c-food)) 30%, oklch(0.26 0.01 250)); color: oklch(0.96 0 0);
}
.lb-ph > svg { inline-size: 64px; block-size: 64px; stroke-width: 1.4; fill: none; }
.lb-ph > span:not(.ph-credit) { font-size: var(--fs-xl); font-weight: var(--fw-semi); }
.lb-ph .ph-credit { font-size: var(--fs-xs); left: 8px; bottom: 8px; }
.lb-cap { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: auto; padding: 14px 20px 0; text-align: center; }
.lb-cap h2 { margin: 0; font-size: var(--fs-xl); line-height: 1.35; }
.lb-price { font-family: var(--font-num); font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* ---------- Compare view (v2-b) ---------- */
.cmp { position: absolute; inset: 0; z-index: calc(var(--z-modal) - 1); display: flex; flex-direction: column; padding-top: var(--safe-top); background: var(--surface); animation: sheet-in var(--dur-slow) var(--ease-sheet); }
.cmp-head { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 12px 10px 12px var(--pad-x); }
.cmp-head > div { flex: 1; min-width: 0; }
.cmp-head h2 { margin: 0; font-size: var(--fs-title); line-height: var(--lh-tight); }
.cmp-sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--fg-2); }
.cmp-head .icon-btn { background: var(--surface-2); border-color: transparent; }
.cmp-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 14px var(--pad-x) calc(28px + var(--safe-bottom)); }
.cmp-focus { display: flex; align-items: center; gap: 10px; }
.cmp-focus > span { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg-2); }
.cmp-focus-btns { display: inline-flex; gap: 4px; padding: 3px; border-radius: calc(var(--r-btn) + 3px); background: var(--surface-2); border: 1px solid var(--border); }
.cmp-focus-btns button { inline-size: var(--tap); block-size: var(--tap); border: 0; border-radius: var(--r-btn); background: none; color: var(--fg-2); font-family: var(--font-num); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.cmp-focus-btns button:hover { background: var(--surface-3); color: var(--fg); }
.cmp-focus-btns button[aria-pressed="true"] { background: var(--inverse-bg); color: var(--inverse-fg); box-shadow: var(--sel-ring); }
.cmp-focus-name { font-size: var(--fs-md); font-weight: var(--fw-semi); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.cmp-stat { display: grid; gap: 2px; align-content: start; min-block-size: var(--tap); padding: 10px 12px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); color: var(--fg); text-align: left; }
.cmp-stat:hover { background: var(--surface-2); }
.cmp-stat[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cmp-stat b { font-size: var(--fs-stat); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cmp-stat span { font-size: var(--fs-sm); line-height: 1.35; color: var(--fg-2); }
.cmp-common { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-card); background: var(--surface-2); }
.cmp-common h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.cmp-common p { margin: 0; font-size: var(--fs-md); line-height: var(--lh-body); color: var(--fg-2); }
.cmp-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.cmp-table thead th { position: sticky; top: -14px; z-index: 1; padding: 8px 0; background: var(--surface); border-bottom: 1px solid var(--border-strong); }
.cmp-table th.pl { text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg-2); }
.cmp-table th.c { inline-size: 44px; }
.cmp-col { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 8px; background: var(--surface-2); font-family: var(--font-num); font-size: var(--fs-md); font-weight: var(--fw-bold); }
th.is-focus .cmp-col { background: var(--inverse-bg); color: var(--inverse-fg); }
.cmp-table tbody th { padding: 18px 0 6px; text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg-2); }
.cmp-table tbody th span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-table tbody th svg { inline-size: 16px; block-size: 16px; }
.cmp-table td { padding: 8px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cmp-table td.pl { padding-right: 8px; }
.cmp-table td.pl b { font-weight: var(--fw-semi); }
.cmp-table td.pl .pill { margin-left: 6px; vertical-align: 1px; font-size: var(--fs-xs); }
.cmp-table td.c { text-align: center; }
.cmp-table .is-focus { background: var(--accent-soft); }
.cmp-dot { display: inline-grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--fg); color: var(--surface); font-family: var(--font-num); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; }
.cmp-none { color: var(--muted); }
.tag-only { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.tag-miss { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.cmp-empty { padding: 20px 0; color: var(--fg-2); }

/* ---------- Floating panels share the look's frame (border, glass, inner glow) ---------- */
#panel, .drawer, .fwin, .cmp, .plan-sheet, .layers-pop { background: var(--panel-bg); }
#panel, .drawer, .fwin, .cmp, .plan-sheet, .layers-pop { backdrop-filter: var(--panel-blur); }
.fchip, .research, .xsum, .rail-close, .ctl, .plan-chip, .topbar .icon-btn { border: var(--panel-border); }
#panel, .drawer, .fwin, .cmp, .plan-sheet, .modal-box, .layers-pop { border: var(--panel-border); }

/* ==========================================================================
   Phone sheet heights (on #app itself, so not inside a container query)
   ========================================================================== */
#app[data-device="phone"] { --sheet-half: 44%; }
#app[data-device="phone"][data-sheet="mini"] { --sheet-h: var(--sheet-mini); }
#app[data-device="phone"][data-pane="rail"] { --sheet-h: calc(var(--rail-h) + var(--safe-bottom) + 6px); }
#app[data-device="phone"][data-pane="list"] { --sheet-h: 45%; }
#app[data-device="phone"][data-pane="detail"] { --sheet-h: 100%; }

/* ==========================================================================
   Phones
   ========================================================================== */
@container app (max-width: 860px) {
  .mk-pin { inline-size: var(--mk-size-phone); block-size: var(--mk-size-phone); }
  #panel, .drawer, .fwin, .plan-sheet, .modal-box { border-bottom: 0; border-inline: 0; }

  #app[data-sheet="mini"] .panel-scroll { display: none; }
  #app[data-sheet="mini"] .sheet-handle { block-size: 16px; }
  #app[data-sheet="mini"] .sheet-handle::before { top: 6px; }
  #app[data-sheet="mini"] .mini { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 56px; padding: 0 var(--pad-x); border: 0; background: none; color: var(--fg); text-align: left; }
  #app:not([data-pane="none"]) #panel { translate: 0 calc(100% + 24px); visibility: hidden; }
  #app[data-pane="list"] .drawer { block-size: 45%; }
  #app[data-pane="detail"] .drawer { top: calc(var(--safe-top) + 8px); }
  #app[data-pane="detail"] :is(.topbar, .fbar, .research, .map-controls) { opacity: 0; visibility: hidden; }
  #app[data-pane="detail"] .toast { bottom: calc(var(--safe-bottom) + 132px); }
  #app[data-pane="rail"] .map-controls .xsum,
  #app[data-pane="list"] .map-controls { opacity: 0; visibility: hidden; }
  #app[data-sheet="full"][data-pane="none"] :is(.fbar, .research) { opacity: 0; visibility: hidden; }
  #app:has(#fwin:not([hidden])) :is(.research, .map-controls) { opacity: 0; visibility: hidden; }
  .drawer[data-view="list"] .drawer-grab { cursor: default; }
  .cmp-table th.c { inline-size: 40px; }
}

/* ==========================================================================
   Desktop — #app wider than 860px
   ========================================================================== */
@container app (min-width: 861px) {
  .xsum, .mini, .rail { display: none !important; }
  .icon-btn { inline-size: 36px; block-size: 36px; border-radius: var(--r-btn); }
  .text-btn { min-block-size: 32px; }
  .seg-tab { min-block-size: 36px; }
  .day-tab { min-block-size: 54px; }
  .ctl { min-block-size: var(--tap-desk); }
  .toggle { min-block-size: 38px; font-size: var(--fs-sm); }
  .plan-chip { border-radius: var(--r-card); }
  .fbar { top: var(--edge); left: calc(2 * var(--edge) + var(--panel-w)); right: var(--edge); }
  .fbar-row { overflow-x: auto; padding: 2px 2px 8px; margin: -2px -2px 0; }
  .fchip { block-size: var(--tap-desk); font-size: var(--fs-sm); }
  .fchip-list { margin-left: auto; }
  .fwin {
    top: calc(var(--edge) + var(--tap-desk) + 14px); left: calc(2 * var(--edge) + var(--panel-w)); right: auto; bottom: auto;
    inline-size: 540px; max-block-size: calc(100% - 90px);
    border-radius: var(--r-card); box-shadow: var(--shadow-2), var(--panel-glow);
    animation: pop-in var(--dur-base) var(--ease-standard);
  }
  .fwin-foot { padding-bottom: 12px; border-radius: 0 0 var(--r-card) var(--r-card); }
  .wchip { min-block-size: var(--tap-desk); }
  .research { top: calc(var(--edge) + var(--tap-desk) + 16px); left: calc(50% + var(--panel-w) / 2 + var(--edge) / 2); }
  .maplibregl-ctrl-top-right { top: calc(var(--tap-desk) + 20px); }

  #panel, .topbar, .plan-sheet { border-radius: var(--r-card); box-shadow: var(--shadow-2), var(--panel-glow); }
  .topbar { border: var(--panel-border); }
  .drawer {
    top: var(--edge); right: var(--edge); bottom: var(--edge); left: auto;
    inline-size: var(--drawer-w);
    border-radius: var(--r-card); box-shadow: var(--shadow-2), var(--panel-glow);
    animation: pop-in var(--dur-base) var(--ease-standard);
  }
  .drawer-grab { display: none; }
  .drawer-head { padding: 14px 0 10px 4px; }
  .drawer-scroll { padding: 10px var(--pad-x) 20px; }
  .drawer-actions { padding: 12px var(--pad-x); border-radius: 0 0 var(--r-card) var(--r-card); }
  .icon-btn.drawer-back, .drawer-head .icon-btn { inline-size: 36px; block-size: 36px; }
  .btn, .drawer-actions .btn { min-block-size: var(--tap-desk); }
  .mrow { --thumb: var(--thumb-desk); }
  .lb { padding: 12px 0 28px; }
  .lb-stage { grid-template-columns: var(--tap) minmax(0, 820px) var(--tap); justify-content: center; gap: 20px; }
  .lb-prev, .lb-next { position: static; translate: none; background: oklch(1 0 0 / 0.14); }
  .lb-prev:hover, .lb-next:hover { background: oklch(1 0 0 / 0.26); }
  .lb-top { padding: 4px 16px 8px 24px; }
  .lr { min-block-size: calc(var(--row-min) - 8px); }

  #app:not([data-pane="none"]) .fbar { right: calc(2 * var(--edge) + var(--drawer-w)); }
  #app:not([data-pane="none"]) .research { left: calc(50% + (var(--panel-w) - var(--drawer-w)) / 2); }
  #app:not([data-pane="none"]) .map-controls { right: calc(2 * var(--edge) + var(--drawer-w)); }
  #app:not([data-pane="none"]) .maplibregl-ctrl-top-right { right: calc(var(--drawer-w) + var(--edge)); }
  #app:not([data-pane="none"]) .maplibregl-ctrl-bottom-right { right: calc(var(--drawer-w) + 2 * var(--edge)); }
  /* With the drawer open the map is narrow: the legend moves above the control bar (v1's narrow-desktop rule) */
  #app:not([data-pane="none"]) .legend { left: auto; right: calc(2 * var(--edge) + var(--drawer-w)); bottom: 84px; max-inline-size: min(440px, calc(100% - var(--panel-w) - var(--drawer-w) - 4 * var(--edge))); }

  .cmp {
    top: var(--edge); bottom: var(--edge); left: calc(2 * var(--edge) + var(--panel-w)); right: var(--edge);
    padding-top: 0; border-radius: var(--r-card); box-shadow: var(--shadow-3), var(--panel-glow);
    animation: pop-in var(--dur-base) var(--ease-standard);
  }
  .cmp-head { padding: 16px 14px 14px 22px; }
  .cmp-scroll { padding: 16px 22px 28px; }
  .cmp-inner { max-inline-size: 780px; }
  .cmp-stats { max-inline-size: 580px; }
  .cmp-table th.c { inline-size: 64px; }
  .cmp-table thead th { top: -16px; }
  .cmp-focus-btns button { block-size: 38px; }
}

/* ---------- v5: the course as a small badge (phones) and a one-line selector (PC) ---------- */
/* Badge: 44px touch target around a 34px circle with the course letter, styled like v1's .plan-chip-tag */
.course-badge {
  flex: none; display: grid; place-items: center;
  inline-size: var(--tap); block-size: var(--tap); padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--inverse-fg); cursor: pointer;
}
.course-badge-dot {
  display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%;
  background: var(--inverse-bg); color: var(--inverse-fg);
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-1);
  font-family: var(--font-num); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1;
}
.course-badge-dot.is-mixed { font-family: var(--font-ko); font-size: var(--fs-2xs); font-weight: var(--fw-semi); }
.course-badge:hover .course-badge-dot { background: var(--inverse-hover); }
.course-badge[aria-expanded="true"] .course-badge-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
/* Name bubble after a course change (1.5 s), next to the badge */
.course-pop {
  position: absolute; z-index: var(--z-toast); max-inline-size: calc(100% - 16px);
  padding: 6px 12px; border-radius: var(--r-md);
  background: var(--inverse-bg); color: var(--inverse-fg);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: var(--lh-snug); white-space: nowrap;
  box-shadow: var(--shadow-2); animation: pop-in var(--dur-base) var(--ease-standard);
}
/* Date-tab variant: the badge sits in the sticky tab row; the tablist keeps only tabs */
.days-row { display: contents; }
.days-row:has(.course-badge) { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; padding-left: 4px; background: var(--surface); border-bottom: 1px solid var(--border); }
.days-row:has(.course-badge) .days { position: static; flex: 1; min-width: 0; border-bottom: 0; padding-left: 2px; }
.course-slot:empty { display: none; }
.course-slot { flex: none; display: grid; place-items: center; padding-bottom: 8px; }
.plan-help { background: var(--surface-2); border-color: transparent; }
/* The PC selector reads "코스 A · 이름"; the prefix and separator show on PC only */
.plan-chip-pre, .plan-chip-sep { display: none; }

@container app (max-width: 860px) {
  /* The floating course card and "?" leave the map: only the chip row stays on top */
  .topbar .plan-chip, .topbar #btn-help { display: none; }
  .fbar { top: calc(var(--safe-top) + 8px); }
  .research { top: calc(var(--safe-top) + var(--tap) + 22px); }
  .maplibregl-ctrl-top-right { top: calc(var(--safe-top) + var(--tap) + 20px); }
}
@container app (min-width: 861px) {
  /* PC: the course card becomes one line ("코스 A · 첫 방콕 정석 ▾"), 36px high */
  .plan-chip { min-block-size: 36px; block-size: 36px; padding: 0 8px 0 12px; gap: 6px; }
  .plan-chip-tag { inline-size: auto; block-size: auto; background: none; color: var(--fg); font-family: var(--font-ko); font-size: var(--fs-md); font-weight: var(--fw-semi); }
  .plan-chip-text { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .plan-chip-pre { display: inline; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--fg); margin-right: -2px; }
  .plan-chip-sep { display: inline; color: var(--fg-2); }
  .plan-chip-sub { display: none; }
  .plan-chip-tag.is-mixed { font-size: var(--fs-md); }
  .plan-help { display: none; }
}

/* ==========================================================================
   App additions (not in the v5 prototype)
   ========================================================================== */
/* Meal slot on the map (map3d.js renders .mk.mk-meal): an unnumbered white disc with the food icon.
   The leader line of a floating meal pin (on a 3D model) takes the food colour. */
.mk-meal { --mk-lead-c: var(--x-food); }
.mk-meal .mk-pin { inline-size: 24px; block-size: 24px; background: var(--xm-tile); color: var(--x-food); box-shadow: inset 0 0 0 2px var(--x-food), 0 0 0 1px var(--mk-edge), var(--mk-shadow); }
.mk-meal .mk-pin svg { inline-size: 15px; block-size: 15px; stroke-width: 2.2; }
.mk-meal[aria-current="true"] .mk-pin { background: var(--x-food); color: var(--xm-on); }

/* Meal slot in the timeline: same unnumbered node, example places listed under the title */
.tl-node.meal { background: var(--surface); color: var(--c-food); box-shadow: 0 0 0 3px var(--surface), inset 0 0 0 2px var(--c-food); }
.tl-node.meal svg, .nu-pin.meal svg { inline-size: 14px; block-size: 14px; stroke-width: 2.2; }
.nu-pin.meal { background: var(--surface); color: var(--c-food); box-shadow: inset 0 0 0 1.5px var(--c-food); }
.tl-ex { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--fg-2); }
.tl-ex li { padding-left: 10px; text-indent: -10px; }
.tl-ex li::before { content: '· '; color: var(--muted); }
.tl-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: 2px; }
@container app (max-width: 860px) { .tl-ex { font-size: 15px; } } /* phone body floor 15px (QA3A-04) */

/* Preview cards keep three rows whatever the text: one line each, the last item ellipsised, the name
   in at most two lines (every card in the rail has the height of the tallest one). The photo covers the
   kind tile, which shows while it loads or when it fails. */
.pv-thumb img { position: absolute; inset: 0; }
.pv-line { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
/* The Google score, the minutes and the price never shrink (QA P07b: they were the parts cut off).
   Only the first item (open state, distance) gives way if a line is ever too long. */
.pv-line > * { flex: none; }
.pv-line > :first-child:not(:last-child) { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* Screens under 380px (360px Android phones, a Notion embed): the text column is too narrow for a
   line, so its items wrap onto a second row whole instead of being clipped */
@container app (max-width: 380px) {
  .pv-line { flex-wrap: wrap; row-gap: 0; }
  .pv-line > :first-child:not(:last-child) { flex: none; }
}
.pv-name > span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Massage without a 60-minute price (decision D4): a round marker, no price text */
.xm.is-noprice .xm-body { inline-size: 34px; min-inline-size: 0; padding: 0; border-radius: 50%; }

/* Michelin cards only: the Google score beside the badge (the one rating the app shows) */
.g-score { font-family: var(--font-num); font-weight: var(--fw-semi); color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* "추정" after a Grab time and "약" before a price that is not from the shop's menu: small and quiet */
.est { margin-left: 3px; font-size: var(--fs-2xs); font-weight: var(--fw-regular); color: var(--muted); }
.p-est { font-family: var(--font-ko); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); }
.lb-price .p-est { color: inherit; opacity: 0.75; }

/* Real photos: menu thumbnails (tap for the viewer) and the viewer itself. Photos load from their
   original address; a photo that fails falls back to the icon tile (cards.js photoFallback). */
button.mrow-ph:has(img) { overflow: hidden; }
.mrow-ph img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.lb-img { position: relative; inline-size: fit-content; max-inline-size: min(760px, 100%); margin: 0 auto; }
.lb-img img { display: block; max-inline-size: 100%; max-block-size: calc(100cqh - 220px); object-fit: contain; border-radius: var(--r-card); background: oklch(0.2 0.01 175); }
.lb-img .ph-credit { left: 8px; bottom: 8px; font-size: var(--fs-xs); }

/* Add-to-plan pickers (inside #modal): the current pick and "back to the plan" state */
.slot-pick .sp-blk small { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--fg-2); }
.slot-pick button[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.slot-pick .sp-note { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--fg-2); }