:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #18212f;
  --muted: #617085;
  --line: #d7dfeb;
  --accent: #1d5fd0;
  --accent-weak: #eef4ff;
  --danger: #d14343;
  --shadow: 0 10px 24px rgba(24, 33, 47, 0.08);
  --radius: 18px;
  --topbar-offset: 0px;
  --layout-top-gap: 1.25rem;
  --surface: #ffffff;
  --surface-soft: #fbfcff;
  --surface-strong: #f4f7fb;
  --topbar-bg: rgba(245, 247, 251, 0.94);
  --topbar-sticky-bg: rgba(245,247,251,.98);
  --topbar-line: rgba(215, 223, 235, 0.8);
  --panel-bg: rgba(255,255,255,.98);
  --btn-secondary-bg: #ffffff;
  --danger-bg: #fff3f3;
  --danger-line: #f2caca;
  --alert-bg: #fff5f5;
  --alert-line: #f3cccc;
  --success-bg: #eef8ee;
  --success-text: #1f5f2c;
  --success-line: #cfe7d1;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0f1726;
  --card: #111b2d;
  --text: #e6edf7;
  --muted: #99a8bf;
  --line: #2a3952;
  --accent: #6ea8ff;
  --accent-weak: rgba(110,168,255,.14);
  --danger: #ff8f8f;
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
  --surface: #142035;
  --surface-soft: #162338;
  --surface-strong: #1b2a42;
  --topbar-bg: rgba(15, 23, 38, 0.94);
  --topbar-sticky-bg: rgba(15,23,38,.98);
  --topbar-line: rgba(42, 57, 82, 0.9);
  --panel-bg: rgba(20, 32, 53, 0.98);
  --btn-secondary-bg: #18253a;
  --danger-bg: rgba(209,67,67,.14);
  --danger-line: rgba(255,143,143,.28);
  --alert-bg: rgba(209,67,67,.14);
  --alert-line: rgba(255,143,143,.28);
  --success-bg: rgba(31,95,44,.20);
  --success-text: #b6edc0;
  --success-line: rgba(182,237,192,.22);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; }
button, input, textarea, select { font: inherit; }
textarea, input, select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.9rem; background: var(--surface); color: var(--text); }
textarea { resize: vertical; min-height: 3rem; }
label { display: grid; gap: 0.45rem; color: var(--muted); font-size: 0.95rem; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--text); }
::-moz-selection { background: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--text); }
button, .btn, .day-tab, .highlight-toggle-btn, summary { -webkit-tap-highlight-color: transparent; }
.day-tab, .highlight-toggle-btn, .btn, .map-focus-btn, .show-place-btn, .remove-btn, .pin-on-map-btn, .use-map-center-btn, .pin-search-btn { user-select: none; -webkit-user-select: none; }
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1400; display: grid; gap: 1rem;
  padding: 1rem 1.25rem; background: var(--topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--topbar-line);
  overflow: hidden; max-height: 100vh;
  transition: transform .24s ease, opacity .24s ease, box-shadow .24s ease, max-height .24s ease, padding .24s ease, border-bottom-width .24s ease;
}
.topbar-main { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topbar-brand { display:grid; gap:.1rem; }
.topbar-menu { display:flex; flex-wrap:wrap; }
.mobile-only { display:none !important; }
.desktop-only { display:inline-flex !important; }
.topbar-mobile-actions { display:none; gap:.55rem; align-items:center; }
.topbar-icon-btn { padding: .7rem .9rem; min-width: 78px; }
.reopen-topbar-btn {
  position: fixed; top: 12px; right: 12px; z-index: 32; display:none !important;
  box-shadow: 0 10px 24px rgba(24,33,47,.16);
}
body.topbar-hidden .topbar,
body.topbar-manual-hidden .topbar {
  transform: translateY(calc(-100% - 12px));
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  min-height: 0;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}
body.topbar-hidden .topbar > *,
body.topbar-manual-hidden .topbar > * {
  display: none !important;
}

body.topbar-manual-hidden .reopen-topbar-btn { display:inline-flex !important; }

.topbar-menu-grid { display:grid; gap:.9rem; }
.topbar-actions-row { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
.topbar-panels { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.85rem; }
.menu-panel { border:1px solid var(--line); border-radius: 16px; padding: .9rem 1rem; background: var(--panel-bg); min-width:0; }
.compact-panel h2 { font-size: 1rem; }
.menu-inline-actions { display:flex; align-items:flex-end; }
.menu-inline-actions .btn { width:100%; }
.topbar-menu label, .menu-panel label { font-size: .92rem; }
.topbar-menu .nearby-panel { max-height: 280px; overflow:auto; }
.topbar-menu .nearby-item { background: var(--surface); }
#map, .leaflet-container { z-index: 1; }
.map-shell, .dominant-map-card, .map-card { isolation: isolate; }
.eyebrow { color: var(--accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.35rem; }
.subtext, .help-text { color: var(--muted); line-height: 1.55; }
.compact-text { font-size: 0.9rem; }
.toolbar, .row, .section-actions, .mini-actions { display: flex; gap: 0.6rem; align-items: center; }
.row-between { justify-content: space-between; }
.user-pill { display: inline-flex; align-items: center; border-radius: 999px; background: var(--surface); padding: 0.55rem 0.85rem; border: 1px solid var(--line); font-weight: 600; }
.btn {
  border: 0; border-radius: 12px; padding: 0.78rem 1rem; cursor: pointer; transition: 0.18s ease;
  box-shadow: 0 6px 14px rgba(24, 33, 47, 0.08); display: inline-flex; align-items: center; justify-content: center;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.secondary { background: var(--btn-secondary-bg); color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); }
.btn.tiny { padding: 0.55rem 0.8rem; font-size: 0.88rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1.25rem; padding: calc(var(--topbar-offset) + 1.25rem) 1.25rem 1.25rem; align-items: start; transition: padding-top .24s ease; }
body.topbar-hidden .layout,
body.topbar-manual-hidden .layout { padding-top: 1.25rem; }
.card, .editor-card, .day-card {
  background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 88%, transparent); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card { padding: 1.15rem; }
.sidebar { position: sticky; top: 1.25rem; display: grid; gap: 1.1rem; }
.stack { display: grid; gap: 0.9rem; }
.grid2, .grid3, .grid4 { display: grid; gap: 0.9rem; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.section-head.compact { align-items: flex-end; }
.wrap-on-mobile { flex-wrap: wrap; }
.statusbar { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.map-card { display: grid; gap: 0.9rem; }
.map-view { height: 450px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; color: var(--muted); font-size: 0.9rem; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 999px; margin-right: 0.38rem; }
.dot.airport { background: #dc4f64; }
.dot.station { background: #1d5fd0; }
.dot.hotel { background: #8b5cf6; }
.dot.local { background: #0f9d7f; }
.dot.selected { background: #111827; }
.day-tabs { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.3rem; margin-bottom: 1rem; }
.day-tab {
  min-width: 180px; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 0.85rem 1rem; text-align: left; cursor: pointer;
  display: grid; gap: 0.28rem; box-shadow: 0 4px 12px rgba(24,33,47,0.05);
}
.day-tab.active { border-color: var(--accent); background: var(--accent-weak); }
.day-tab-date { color: var(--muted); font-size: 0.85rem; }
.active-day-panel { display: grid; gap: 1rem; }
.day-card { padding: 1rem; }
.day-header-block { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 0.9rem; }
.day-heading { display: grid; gap: 0.25rem; }
.day-meta { color: var(--muted); line-height: 1.5; }
.day-settings { border: 1px solid var(--line); border-radius: 14px; padding: 0.2rem 0.9rem 0.9rem; background: var(--surface-soft); }
.day-settings > summary { cursor: pointer; padding: 0.8rem 0; font-weight: 600; }
.day-body { padding-top: 0.5rem; }
.highlight-card { padding: 1rem; }
.highlight-card.selected { border: 2px solid var(--accent); background: #fbfdff; }
.highlight-card { scroll-margin-top: 108px; }
.highlight-card.selection-flash { animation: cardSelectionFlash 1.2s ease; }
@keyframes cardSelectionFlash {
  0% { box-shadow: 0 0 0 0 rgba(29,95,208,.26), var(--shadow); }
  35% { box-shadow: 0 0 0 10px rgba(29,95,208,.10), 0 14px 28px rgba(29,95,208,.16); }
  100% { box-shadow: var(--shadow); }
}
.day-tab { scroll-margin-inline: 16px; }

.editor-card { padding: 1rem; }
.note-card { align-items: flex-start; }
.rich-note-block { display:grid; gap:.6rem; }
.rich-note-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.rich-note-actions { display:flex; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; }
.rich-note-label { font-size:.95rem; color:var(--muted); font-weight:600; }
.rich-note-editor { display:grid; gap:.6rem; }
.note-card { display:block; }
.note-card-main { display:grid; gap:.6rem; min-width:0; }
.editor-actions { justify-content:flex-start; }

.rich-note-preview { padding: .8rem .9rem; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--text); line-height: 1.6; word-break: break-word; }
.rich-note-preview.is-empty { color: var(--muted); }
.rich-note-preview p { margin: 0; white-space: pre-wrap; }
.rich-note-preview a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.rich-note-preview a:hover { opacity: .9; }
.route-summary {
  border-radius: 16px; padding: 1rem; line-height: 1.6; border: 1px solid var(--line); background: var(--surface-soft);
}
.route-summary.empty { color: var(--muted); }
.route-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-bottom: 0.35rem; }
.route-badge { display: inline-flex; padding: 0.35rem 0.65rem; border-radius: 999px; font-size: 0.84rem; font-weight: 700; }
.route-path { font-weight: 700; margin-bottom: 0.1rem; }
.route-meta { color: var(--muted); margin-bottom: 0.35rem; }
.mode-walk .route-badge { background: #eef2f7; color: #334155; }
.mode-subway .route-badge { background: #e7fff7; color: #0f766e; }
.mode-tram .route-badge { background: #fff5e6; color: #b45309; }
.mode-bus .route-badge { background: #f2ecff; color: #6d28d9; }
.mode-jr .route-badge { background: #eef4ff; color: #1d4ed8; }
.mode-air .route-badge { background: #ffe8ee; color: #be123c; }
.tips { margin: 0; padding-left: 1.05rem; display: grid; gap: 0.45rem; color: var(--muted); }
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-card { width: min(100%, 460px); }
.alert { color: var(--danger); background: var(--alert-bg); border: 1px solid var(--alert-line); border-radius: 12px; padding: 0.75rem 0.9rem; }
.checkbox-row { display: flex; align-items: center; gap: 0.6rem; }
.checkbox-row input { width: auto; }
.locked input, .locked textarea, .locked select { background: #f4f6fa; }
html[data-theme="dark"] .locked input, html[data-theme="dark"] .locked textarea, html[data-theme="dark"] .locked select { background: var(--surface-strong); }
@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}
@media (max-width: 860px) {
  .desktop-only { display:none !important; }
  .day-header-block, .section-head, .route-head { flex-direction: column; align-items: stretch; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .map-view { height: 360px; }
  .day-tab { min-width: 150px; }
  .mobile-only { display:inline-flex !important; }
  .topbar { padding: .85rem 1rem; gap: .75rem; }
  .topbar-main { align-items:flex-start; }
  .topbar-brand h1 { font-size: 1.1rem; }
  .topbar-brand .subtext { font-size: .88rem; }
  .topbar-mobile-actions { display:flex; }
  .topbar-menu {
    display:none; grid-template-columns: 1fr; gap: .65rem;
    padding-top: .25rem; border-top: 1px solid rgba(215, 223, 235, 0.9);
  }
  body.mobile-menu-open .topbar-menu { display:grid; }
  .topbar-actions-row { display:grid; grid-template-columns: 1fr; }
  .topbar-panels { grid-template-columns: 1fr; }
  .topbar-menu .btn, .topbar-menu .user-pill { width: 100%; justify-content: center; }
}
@media print {
  .toolbar, .btn, .map-legend, .day-tabs, .reopen-topbar-btn, .topbar-mobile-actions { display: none !important; }
  .layout { display: block; padding: 0; }
  .card, .editor-card, .day-card { box-shadow: none; border-color: #bbb; }
  .topbar { position: static; background: var(--surface); border-bottom: 0; }
}


.nearby-panel {
  display: grid;
  gap: 0.8rem;
}
.nearby-panel.empty {
  color: var(--muted);
}
.nearby-item {
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}
.nearby-item p {
  margin-top: 0.2rem;
  color: var(--muted);
  line-height: 1.45;
}
.mini-actions.vertical {
  flex-direction: column;
  align-items: stretch;
}
.route-steps {
  margin: 0.45rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}
.dot.nearby { background: #111827; }

.provider-hint-block { display:flex; align-items:flex-end; color: var(--muted); font-size: 0.92rem; }



.single-column { grid-template-columns: 1fr; }
.success { padding: .8rem 1rem; border-radius: 12px; background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-line); }
.table-wrap { overflow-x: auto; }
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 0.85rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; }
.simple-table th { font-size: .92rem; color: var(--muted); }


.map-first { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.main-content { display: grid; gap: 1rem; }
.dominant-map-card { padding: 1rem; }
.map-shell { position: relative; }
.map-main-view { height: min(74vh, 860px); min-height: 520px; }
.floating-overlay {
  position: static; width: 100%; max-height: none;
  overflow: auto; background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(10px); z-index: 600; box-shadow: 0 18px 40px rgba(15,23,42,.12);
}
.desktop-map-focus-slot, .mobile-map-focus-slot { display: grid; gap: .8rem; }
.mobile-map-focus-slot { display: none; margin-top: .8rem; }
.desktop-map-focus-slot:empty, .mobile-map-focus-slot:empty { display: none; }
.map-focus-mobile-shell { display:grid; gap:.6rem; }
.map-focus-mobile-shell > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; border:1px solid var(--line); border-radius:16px; background:#fff; font-weight:700; }
.map-focus-mobile-shell > summary::-webkit-details-marker { display:none; }
.map-focus-mobile-shell > summary::after { content:'열기'; color:var(--muted); font-size:.88rem; font-weight:600; }
.map-focus-mobile-shell[open] > summary::after { content:'닫기'; }
.floating-overlay.collapsed { max-height: 86px; overflow: hidden; }
.overlay-head { position: sticky; top: 0; background: color-mix(in srgb, var(--surface) 96%, transparent); padding-bottom: .2rem; }
.overlay-place-summary { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); padding: .9rem 1rem; line-height: 1.55; }
.overlay-place-summary.empty { color: var(--muted); }
.overlay-section { margin-top: .9rem; display: grid; gap: .6rem; }
.timeline-overlay { display: grid; gap: .55rem; }
.timeline-overlay.empty { color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; padding: 1rem; }
.timeline-item {
  width: 100%; display: grid; grid-template-columns: 62px 18px minmax(0,1fr) 56px; gap: .7rem; align-items: center; text-align: left;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: .78rem .85rem; cursor: pointer;
}
.timeline-item.selected { border-color: var(--accent); background: var(--accent-weak); }
.timeline-time, .timeline-end { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.timeline-rail { position: relative; display: flex; justify-content: center; }
.timeline-rail::before { content: ''; position: absolute; width: 2px; height: 42px; background: #d7dfeb; top: -21px; left: 50%; transform: translateX(-50%); }
.timeline-item:first-child .timeline-rail::before { top: 50%; height: 24px; }
.timeline-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(29,95,208,.12); position: relative; z-index: 1; }
.timeline-dot.type-airport { background: #dc4f64; }
.timeline-dot.type-station { background: #1d5fd0; }
.timeline-dot.type-hotel { background: #8b5cf6; }
.timeline-dot.type-food { background: #ef6c3d; }
.timeline-dot.type-park, .timeline-dot.type-local, .timeline-dot.type-view { background: #0f9d7f; }
.timeline-dot.type-market, .timeline-dot.type-onsen, .timeline-dot.type-shopping { background: #c17d10; }
.timeline-main { display: grid; gap: .2rem; }
.timeline-main small { color: var(--muted); line-height: 1.4; }
.item-time-meta { display:block; margin: .25rem 0 .5rem; }
.day-card .highlight-list { gap: .8rem; }
.split-focus-card { display: grid; gap: .7rem; }
.cardless-section { display: grid; gap: .7rem; }
@media (max-width: 1180px) { .map-first { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .map-main-view { height: 58vh; min-height: 420px; }
  .timeline-item { grid-template-columns: 54px 16px minmax(0,1fr) 48px; gap: .45rem; }
}


.compact-highlight-card label + label { margin-top: .15rem; }
.sheet-handle {
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: #cfd8e6;
  margin: .2rem auto .8rem;
}
.overlay-actions { align-items: center; }
.hidden-sheet { display: none !important; }

@media (max-width: 860px) {
  .map-shell { position: relative; }
  .map-main-view { height: calc(100vh - 210px); min-height: 460px; border-radius: 20px; }
  .desktop-map-focus-slot { display:none !important; }
  .mobile-map-focus-slot { display:grid; }
  .floating-overlay {
    border-radius: 22px;
    padding-top: .35rem;
    background: color-mix(in srgb, var(--surface) 98.5%, transparent);
    box-shadow: 0 8px 24px rgba(15,23,42,.12);
  }
  .floating-overlay.collapsed {
    max-height: 88px;
    overflow: hidden;
  }
  .overlay-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: .1rem;
  }
  .timeline-overlay {
    padding-bottom: .35rem;
  }
}

@media (max-width: 1180px) { .topbar-panels { grid-template-columns: 1fr; } }

.compact-stack { gap: .45rem; }
.pin-row { display:flex; gap:.55rem; flex-wrap:wrap; }
.pin-row .btn { flex:1 1 180px; }
.pin-coords { min-height: 1.2rem; }
body.pin-placement-mode #map { cursor: crosshair; }



.pin-config-row { align-items:end; }
.pin-config-row select { min-height: 44px; }
.pin-config-row .help-text { align-self:center; }
.pin-search-row { display:grid; grid-template-columns: minmax(0,1fr) auto; gap:.55rem; }
.pin-search-results { display:grid; gap:.45rem; }
.geocode-result-btn { width:100%; text-align:left; display:grid; gap:.18rem; border:1px solid var(--line); border-radius:12px; background:#fff; padding:.7rem .8rem; box-shadow:0 4px 10px rgba(24,33,47,.05); }
.geocode-result-btn span { color: var(--muted); font-size: .88rem; line-height: 1.45; }


@media (min-width: 861px) {
  .desktop-map-focus-slot { display:grid; }
  .mobile-map-focus-slot { display:none !important; }
}

@media (max-width: 860px) {
  .topbar { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .topbar-main { position: sticky; top: 0; z-index: 2; padding-bottom: .4rem; background: var(--topbar-sticky-bg); }
  .topbar-menu { padding-bottom: 1rem; }
}


.highlight-card-head { align-items:flex-start; gap:.75rem; }
.highlight-toggle-btn {
  flex:1 1 auto; display:flex; align-items:flex-start; gap:.7rem; text-align:left;
  border:0; background:transparent; padding:0; cursor:pointer; min-width:0; color:var(--text);
}
.highlight-toggle-copy { display:grid; gap:.2rem; min-width:0; }
.highlight-toggle-copy .item-index { display:block; }
.highlight-toggle-chevron {
  width: 12px; height: 12px; margin-top:.3rem; border-right:2px solid #64748b; border-bottom:2px solid #64748b;
  transform: rotate(45deg); transition: transform .18s ease; flex:0 0 auto;
}
.highlight-card.collapsed .highlight-toggle-chevron { transform: rotate(-45deg); margin-top:.45rem; }
.highlight-body { margin-top:.85rem; }
.highlight-card.collapsed .highlight-body { display:none; }

.pin-color-picker { display:grid; gap:.45rem; }
.pin-color-label-title { font-size:.92rem; font-weight:600; }
.pin-color-dropdown { position:relative; }
.pin-color-dropdown > summary {
  list-style:none; cursor:pointer; border:1px solid var(--line); border-radius:12px; background:#fff; padding:.7rem .8rem;
  display:flex; align-items:center; justify-content:space-between; min-height:44px;
}
.pin-color-dropdown > summary::-webkit-details-marker { display:none; }
.pin-color-dropdown > summary::after { content:'▾'; color:var(--muted); font-size:.95rem; }
.pin-color-dropdown[open] > summary::after { content:'▴'; }
.pin-color-options {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 16px 30px rgba(15,23,42,.14); padding:.35rem; display:grid; gap:.25rem;
}
.pin-color-option {
  border:0; background:transparent; text-align:left; width:100%; padding:.55rem .6rem; border-radius:10px; cursor:pointer;
}
.pin-color-option:hover, .pin-color-option.active { background:#f4f7fb; }
.pin-choice-visual { display:inline-flex; align-items:center; gap:.65rem; }
.pin-choice-text { color:var(--text); }
.pin-swatch {
  --pin-color:#1d5fd0; width:16px; height:16px; border-radius:999px 999px 999px 0; transform:rotate(-45deg); background:var(--pin-color);
  display:inline-block; position:relative; box-shadow:0 1px 4px rgba(15,23,42,.22); flex:0 0 auto;
}
.pin-swatch::after {
  content:''; position:absolute; width:6px; height:6px; border-radius:999px; background:#fff; top:5px; left:5px;
}
.pin-swatch.default { --pin-color:#64748b; }

@media (max-width: 860px) {
  .highlight-card-head { flex-direction:column; }
  .highlight-card-head .mini-actions { width:100%; }
  .highlight-card-head .mini-actions .btn { flex:1 1 0; }
  .pin-color-options { position:static; box-shadow:none; margin-top:.4rem; }
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .leaflet-control-zoom a, html[data-theme="dark"] .leaflet-control-layers-toggle, html[data-theme="dark"] .leaflet-bar a { background: var(--surface); color: var(--text); border-bottom-color: var(--line); }
html[data-theme="dark"] .leaflet-bar, html[data-theme="dark"] .leaflet-control-layers { border-color: var(--line); }