/**
 * mapcn theme — https://github.com/AnmolSaini16/mapcn
 * Ports the mapcn / shadcn-ui map design language onto the Leaflet city pages.
 * Load AFTER dokidoki-theme.css: dokidoki keeps its layout/UX behaviors,
 * this file replaces every visual with mapcn's neutral, theme-aware system.
 *
 * Basemap pairing (see city-runtime.js): CARTO Positron (light) / Dark Matter (dark),
 * the same defaults mapcn ships with.
 */

/* mapcn typeface: Geist (Korean text falls back to Noto Sans KR) */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400..900&display=swap');

/* ─────────────────────────────────────────
   Tokens — mapcn neutral palette (light)
───────────────────────────────────────── */
:root {
  --font: 'Geist','Noto Sans KR','Inter',-apple-system,'Malgun Gothic',sans-serif;

  --bg:       #fafafa;   /* surface */
  --panel:    #ffffff;   /* background / card / popover */
  --raised:   #f5f5f5;   /* muted / accent */
  --overlay:  #ebebeb;

  --border:   #e5e5e5;
  --border2:  #d9d9d9;
  --border3:  #c9c9c9;

  --text:     #0a0a0a;   /* foreground */
  --text2:    #525252;
  --text3:    #737373;   /* muted-foreground */

  /* mapcn signature blue (default marker / route color) */
  --accent:        #3b82f6;
  --accent-strong: #2563eb;
  --accent-soft:   #eff6ff;

  /* shadcn radius scale (--radius: 0.625rem) */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* tailwind shadows */
  --sh-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --sh-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --sh-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  /* shadcn primary (near-black button) */
  --mc-primary:    #171717;
  --mc-primary-fg: #fafafa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #0a0a0a;
    --panel:    #171717;
    --raised:   #262626;
    --overlay:  #303030;

    --border:   rgba(255,255,255,.10);
    --border2:  rgba(255,255,255,.15);
    --border3:  rgba(255,255,255,.24);

    --text:     #fafafa;
    --text2:    #d4d4d4;
    --text3:    #a3a3a3;

    --accent-soft: rgba(59,130,246,.14);

    --sh-sm: 0 1px 2px 0 rgb(0 0 0 / .4);
    --sh-md: 0 4px 6px -1px rgb(0 0 0 / .5), 0 2px 4px -2px rgb(0 0 0 / .5);
    --sh-lg: 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);

    --mc-primary:    #e5e5e5;
    --mc-primary-fg: #171717;
  }
}

html, body { background: var(--bg); color: var(--text); font-family: var(--font) }
.leaflet-container { font-family: var(--font) }

/* ─────────────────────────────────────────
   Header — neutral shadcn chrome
───────────────────────────────────────── */
header {
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  color: var(--text);
}

/* replace dokidoki's pink heart with a neutral map glyph */
header::before {
  content: '▲';
  background: var(--mc-primary);
  color: var(--mc-primary-fg);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  font-size: 15px;
}

.h-back {
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text2);
  box-shadow: var(--sh-sm);
}
.h-back:hover { background: var(--raised); color: var(--text) }
.h-logo { background: var(--raised); border-radius: var(--r-md) }
.h-title { color: var(--text) }
.h-sub, .h-hint { color: var(--text3) }
.h-divider { background: var(--border) }

.toggle-group {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.tg-btn { color: var(--text3); border-radius: calc(var(--r-md) - 2px) }
.tg-btn:hover { color: var(--text); background: var(--raised) }
.tg-btn.active { background: var(--mc-primary); color: var(--mc-primary-fg) }

.planner-btn {
  background: var(--mc-primary);
  border: 1px solid var(--mc-primary);
  border-radius: var(--r-md);
  color: var(--mc-primary-fg);
  box-shadow: var(--sh-sm);
}
.planner-btn:hover { background: color-mix(in srgb, var(--mc-primary) 88%, var(--mc-primary-fg)); transform: none }

/* ─────────────────────────────────────────
   City tabs / sidebar / sections
───────────────────────────────────────── */
@media (min-width: 769px) {
  .dd-city-tabs { background: var(--panel); border-bottom: 1px solid var(--border) }
  .dd-city-tab {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text2);
    font-weight: 600;
  }
  .dd-city-tab:hover { background: var(--raised) }
  .dd-city-tab.active {
    background: var(--mc-primary);
    border-color: var(--mc-primary);
    color: var(--mc-primary-fg);
  }
}

.main { background: var(--bg) }

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  box-shadow: none;
}
.sb-toggle {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text3);
  box-shadow: var(--sh-sm);
}
.sb-toggle:hover { background: var(--raised); color: var(--text) }

.sec { border-bottom: 1px solid var(--border); background: var(--panel) }
.sec-title, .pn-sec-label { color: var(--text); font-weight: 600 }
.sec-toggle-btn { color: var(--text3) }
.sec-toggle-btn:hover { color: var(--text) }
.area-count { background: var(--raised); border-color: var(--border); color: var(--text3) }

/* selection buttons — shadcn outline → selected state */
.type-btn, .comp-btn, .ovl-btn, .ts-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text2);
  box-shadow: var(--sh-sm);
}
.type-btn:hover, .comp-btn:hover, .ovl-btn:hover, .ts-btn:hover {
  background: var(--raised);
  border-color: var(--border2);
  color: var(--text);
}
.type-btn.active, .comp-btn.active, .ovl-btn.active, .ts-btn.active {
  border-color: var(--text);
  background: var(--raised);
  color: var(--text);
}
.type-btn.active .t-range { color: var(--text3) }
.comp-btn.active .comp-label, .ts-btn.active .ts-name { color: var(--text) }
.t-picto { background: var(--raised); border-radius: var(--r-sm) }
.type-btn.active .t-picto { background: var(--overlay) }
.ovl-btn.active .ovl-pip { background: var(--text) }

.notes, .leg-labels, .t-range, .sl-org, .types-hint { color: var(--text3) }
.notes li::before { color: var(--text3) }
.leg-row, .sl-name { color: var(--text2) }
.sl-item { border-bottom-color: var(--border) }

::-webkit-scrollbar-thumb { background: var(--border2) }

/* ─────────────────────────────────────────
   Map canvas + Leaflet controls (mapcn MapControls)
───────────────────────────────────────── */
#map { background: var(--raised) }

.leaflet-bar,
.leaflet-control-zoom {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden;
  box-shadow: var(--sh-sm) !important;
}
.leaflet-control-zoom a {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 16px;
  font-weight: 400;
  transition: background 140ms;
}
.leaflet-control-zoom a:last-child { border-bottom: none !important }
.leaflet-control-zoom a:hover { background: var(--raised) !important; color: var(--text) !important }
.leaflet-control-zoom a.leaflet-disabled { opacity: .5; pointer-events: none }

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--panel) 80%, transparent) !important;
  color: var(--text3) !important;
  font-size: 10px;
  border-radius: var(--r-sm) 0 0 0;
}
.leaflet-control-attribution a { color: var(--text2) !important }

/* ─────────────────────────────────────────
   Popups — mapcn MarkerPopup (bg-popover rounded-md border p-3 shadow-md)
───────────────────────────────────────── */
@keyframes mapcn-pop-in {
  from { opacity: 0; transform: scale(.95) }
  to   { opacity: 1; transform: scale(1) }
}
.leaflet-popup { animation: mapcn-pop-in 200ms ease-out }
.leaflet-popup-content-wrapper {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-md) !important;
  color: var(--text);
}
.leaflet-popup-content { margin: 0 !important; padding: 12px !important }
.leaflet-popup-tip { background: var(--panel) !important; border: 1px solid var(--border) }
.leaflet-popup-tip-container { display: none }
.leaflet-container a.leaflet-popup-close-button {
  color: var(--text3) !important;
  border-radius: var(--r-sm);
  transition: background 140ms, color 140ms;
}
.leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--text) !important;
  background: var(--raised);
}

/* popup content */
.pu-name, .pu-val { color: var(--text) }
.pu-sub, .pu-label, .pu-na, .pu-night { color: var(--text3) }
.pu-picto { border-radius: var(--r-md) }
.pu-badge {
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--border);
}
.pu-tag, .pu-char-tag {
  background: var(--raised);
  color: var(--text2);
  border-radius: var(--r-sm);
}
.pu-table { border: 1px solid var(--border); border-radius: var(--r-md) }
.pu-row { border-bottom: 1px solid var(--border) }
.pu-row.pu-active { background: var(--raised) }
.pu-img { border-radius: var(--r-md); background: var(--raised) }
.pu-access { border-top: 1px solid var(--border) }
.pu-access-hd { color: var(--text3) }
.pu-access-ap { color: var(--text2) }
.pu-access-time { color: var(--text) }
.pu-access-line { color: var(--text3) }
.pu-btn { border-radius: var(--r-md); box-shadow: var(--sh-sm) }
.pu-btn:hover { filter: none; transform: none; opacity: .9 }

/* ─────────────────────────────────────────
   Tooltips — mapcn MarkerTooltip (bg-foreground text-background text-xs)
───────────────────────────────────────── */
.leaflet-tooltip.subway-tip,
.subway-tip {
  background: var(--text) !important;
  background-color: var(--text) !important;
  border: none !important;
  border-radius: var(--r-md);
  color: var(--panel) !important;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  box-shadow: var(--sh-md) !important;
  text-shadow: none;
}
.leaflet-tooltip.subway-tip *,
.subway-tip *, .subway-tip b, .subway-tip span {
  color: var(--panel) !important;
  background: transparent !important;
  text-shadow: none;
}

/* ─────────────────────────────────────────
   Markers & labels
───────────────────────────────────────── */
/* area name chips — mapcn card style (inline colors removed in city pages) */
.area-label {
  background: var(--panel) !important;
  background-color: var(--panel) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text) !important;
  padding: 6px 10px;
  box-shadow: var(--sh-md);
  backdrop-filter: none;
}
.area-label:hover { transform: scale(1.02); box-shadow: var(--sh-lg) }
.al-name {
  color: var(--text) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-shadow: none;
}
.area-label .al-icons { display: none }
.area-label .al-tagline {
  display: block;
  color: var(--text3);
  font-size: 9.5px;
  margin-top: 2px;
}

/* attraction dots — neutral surface chip with border, like mapcn custom markers */
.attr-dot {
  width: 28px; height: 28px;
  background: var(--panel) !important;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
  text-shadow: none;
  font-size: 14px;
}
.attr-dot:hover { transform: scale(1.15) }
.attr-landmark, .attr-food, .attr-shopping, .attr-activity, .attr-local {
  background: var(--panel) !important;
}

/* airport chips — shadcn badge */
.ap-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--sh-sm);
  backdrop-filter: none;
}

/* ─────────────────────────────────────────
   Route overlays — cards on mapcn tokens
───────────────────────────────────────── */
.rb-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  backdrop-filter: none;
}
.rb-text { color: var(--text); text-shadow: none }

.route-day-badge {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--route-color, var(--accent));
  border-radius: var(--r-md);
  color: var(--text);
  box-shadow: var(--sh-lg);
  padding: 8px 12px;
}
.route-day-kicker { border-radius: var(--r-sm); font-size: .85rem; padding: 6px 9px }
.route-day-name { color: var(--text); font-size: 1rem; text-shadow: none }

.route-stop-dot {
  width: 16px; height: 16px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border), var(--sh-md);
}
.route-arrow {
  font-size: 14px;
  text-shadow: none;
  opacity: .95;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25));
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
}

.route-focus-map .leaflet-tile-pane { opacity: .6 }

/* stay recommendation banner */
.stay-rec-banner {
  min-width: 300px;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  color: var(--text);
  box-shadow: var(--sh-lg);
}
.stay-rec-icon { border-radius: var(--r-md); background: var(--accent) }
.stay-rec-kicker { color: var(--accent) }
.stay-rec-name {
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 700;
  text-shadow: none;
}
.stay-rec-reason { color: var(--text2); font-weight: 500 }
.stay-rec-reason::before { color: var(--accent) }
.stay-hotel-pin {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 2px solid #fff;
  font-size: 20px;
  box-shadow: 0 0 0 1px var(--border), var(--sh-lg);
}
.stay-rec-arrow, .stay-rec-arrow-head {
  font-size: 20px;
  text-shadow: none;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25));
}

/* ─────────────────────────────────────────
   Planner panel — shadcn sheet / card
───────────────────────────────────────── */
.planner-panel {
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: var(--sh-lg);
}
.pn-head { border-bottom: 1px solid var(--border) }
.pn-head-title, .ns-val, .day-title, .step-name, .rec-name, .pn-result-hd { color: var(--text) }
.pn-close {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text2);
}
.pn-close:hover { background: var(--raised); color: var(--text) }
.pn-sec-label::after { background: var(--border) }

.nights-stepper, .budget-input {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  box-shadow: var(--sh-sm);
}
.ns-btn { color: var(--text2) }
.ns-btn:hover { background: var(--raised); color: var(--text) }
.ns-val { border-color: var(--border) }
.budget-input:focus { border-color: var(--text3) }
.budget-suffix, .nights-suffix { color: var(--text3) }

.pn-gen-btn {
  background: var(--mc-primary);
  border-radius: var(--r-md);
  color: var(--mc-primary-fg);
  box-shadow: var(--sh-sm);
}
.pn-gen-btn:hover {
  background: color-mix(in srgb, var(--mc-primary) 88%, var(--mc-primary-fg));
  filter: none;
  transform: none;
}
.pn-gen-btn.route-clear-mode { background: #dc2626; color: #fff }

.rec-card {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.rec-label { color: var(--text3) }
.rec-price { color: var(--text2) }

.day-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md) }
.day-hd { background: var(--raised); border-bottom: 1px solid var(--border) }
.day-zone { background: var(--panel); border-color: var(--border); color: var(--text3) }
.step-row { border-bottom-color: var(--border) }
.step-desc, .day-zone, .rec-why { color: var(--text3) }

/* ─────────────────────────────────────────
   Mobile chrome
───────────────────────────────────────── */
@media (max-width: 768px) {
  body { background: var(--bg) }

  .sidebar {
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    box-shadow: var(--sh-md);
  }

  .sidebar .mobile-map-legend {
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border: 1px solid var(--border);
    box-shadow: var(--sh-md);
  }
  .sidebar .mobile-map-legend::before,
  .sidebar .mobile-map-legend::after { color: var(--text2) }

  .type-btn { border-radius: var(--r-md) }
  .t-picto { background: transparent }

  .pn-head::before { background: var(--border2) }

  .planner-overlay.open.sheet-expanded { background: rgba(0,0,0,.4) }

  .dd-bottom-nav { background: var(--panel); border-top: 1px solid var(--border) }
  .dd-bottom-item { color: var(--text3) }
  .dd-bottom-item.active { color: var(--text) }
  .dd-bottom-item.center .dd-bottom-icon {
    background: var(--mc-primary);
    color: var(--mc-primary-fg);
    border: 2px solid var(--panel);
    box-shadow: var(--sh-md);
  }

  .planner-btn { box-shadow: var(--sh-lg) }

  .stay-rec-banner { box-shadow: var(--sh-lg) }

  .leaflet-popup-content-wrapper { max-width: calc(100vw - 34px) }
}

/* ─────────────────────────────────────────
   Typography scale-up — the original UI used
   9–11px text; raise everything to a readable
   shadcn-like scale.
───────────────────────────────────────── */

/* header */
.h-title  { font-size: 1.08rem }
.h-sub    { font-size: .72rem }
.h-hint   { font-size: .74rem }
.h-back   { font-size: .8rem }
.tg-btn   { font-size: .8rem }
.planner-btn { font-size: .82rem }

/* sidebar */
.sec-title, .pn-sec-label { font-size: .85rem }
.sec-toggle-btn { font-size: .74rem }
.area-count { font-size: .7rem }
.t-name  { font-size: .8rem }
.t-range { font-size: .68rem }
.leg-labels { font-size: .7rem }
.leg-row    { font-size: .78rem }
.notes      { font-size: .78rem }
.sl-name    { font-size: .78rem }
.sl-org     { font-size: .68rem }
.comp-btn .comp-label { font-size: .72rem }
.ovl-btn { font-size: .75rem }

/* popups */
.pu-name  { font-size: 1.05rem }
.pu-sub   { font-size: .72rem }
.pu-badge { font-size: .66rem }
.pu-tag, .pu-char-tag { font-size: .72rem }
.pu-row   { font-size: .85rem }
.pu-night { font-size: .7rem }
.pu-na    { font-size: .78rem }
.pu-btn   { font-size: .8rem }
.pu-access-hd   { font-size: .68rem }
.pu-access-row  { font-size: .78rem }
.pu-access-line { font-size: .68rem }

/* map labels & tooltips */
.al-name    { font-size: 15px }
.area-label .al-tagline { font-size: 11px }
.leaflet-tooltip.subway-tip, .subway-tip { font-size: 13px }
.ap-chip { font-size: .74rem }

/* route overlays */
.rb-text { font-size: .95rem }
.rb-num  { font-size: .85rem }
.route-day-kicker { font-size: .95rem }
.route-day-name   { font-size: 1.12rem }
.stay-rec-kicker  { font-size: .85rem }
.stay-rec-name    { font-size: 1.45rem }
.stay-rec-reason  { font-size: .88rem }

/* planner panel */
.pn-head-title { font-size: 1rem }
.pn-gen-btn    { font-size: .92rem }
.budget-input  { font-size: .95rem }
.budget-suffix { font-size: .8rem }
.nights-suffix { font-size: .82rem }
.ns-val        { font-size: 1.02rem }
.ts-btn .ts-name { font-size: .7rem }
.types-hint    { font-size: .72rem }
.pn-result-hd  { font-size: .85rem }
.rec-label { font-size: .68rem }
.rec-name  { font-size: 1.08rem }
.rec-why   { font-size: .72rem }
.rec-price { font-size: .78rem }
.day-title { font-size: .85rem }
.day-zone  { font-size: .68rem }
.step-name { font-size: .82rem }
.step-desc { font-size: .7rem }
.step-num  { font-size: .7rem }