:root {
    color-scheme: light;
    --ink: #17211b;
    --muted: #68756d;
    --line: #e2e8e3;
    --paper: #ffffff;
    --wash: #f3f7f3;
    --accent: #2e7657;
    --accent-soft: #e1f0e7;
    --shadow: 0 18px 50px rgba(27, 55, 39, 0.12);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
    background: var(--wash);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif;
    overflow: hidden;
}

a { color: inherit; text-decoration: none; }

.topbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 22px;
    height: 68px;
    padding: 0 28px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;
}

.brand { color: var(--accent); flex: 0 0 auto; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.04em; }
.topbar-context { align-items: center; display: flex; gap: 10px; min-width: 0; }
.topbar-context-mode { background: var(--wash); border-radius: 999px; color: var(--muted); flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; padding: 6px 10px; transition: background 180ms ease, color 180ms ease; }
.topbar-context[data-context-mode="plan"] .topbar-context-mode { background: var(--accent-soft); color: var(--accent); }
.topbar-context-divider { background: var(--line); height: 18px; width: 1px; }
.topbar-context-title { font-size: 0.84rem; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-context-meta { color: var(--muted); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { align-items: center; display: flex; height: 100%; justify-content: flex-end; position: absolute; right: 0; top: 0; }
.topbar-links { display: flex; gap: 16px; margin-left: auto; color: var(--muted); font-size: 0.82rem; }
.topbar-links a:hover { color: var(--accent); }

.eyebrow { color: var(--accent); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; margin: 0 0 12px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.65rem, 3vw, 2.15rem); letter-spacing: -0.06em; line-height: 1.16; margin-bottom: 14px; }
.panel-copy { color: var(--muted); font-size: 0.9rem; line-height: 1.65; }
.search-row { display: flex; gap: 8px; }
input[type="search"] { border: 1px solid #ccd7ce; border-radius: 10px; font: inherit; min-width: 0; padding: 11px 12px; width: 100%; }
input[type="search"]:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); }
button { background: var(--accent); border: 0; border-radius: 10px; color: white; cursor: pointer; font: inherit; font-weight: 700; padding: 0 15px; }
button:hover { background: #245f46; }
.map-legend { background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); border-radius: 9px; display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 42px 8px 11px; position: relative; width: max-content; z-index: 500; }
.map-legend span { align-items: center; color: var(--muted); display: inline-flex; font-size: 0.7rem; gap: 5px; }
.legend-dot { border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.legend-dot.places { background: #2e7657; }
.legend-dot.plan { background: #d88b28; }
.legend-dot.history { background: #4b78b8; }
.legend-dot.memory { background: #b45c91; }

/* Map-first workspace overlays */
.map-workspace { --sidebar-handle-width: 50px; --sidebar-depth-offset: var(--sidebar-handle-width); --sidebar-panel-width: min(380px, 34vw); display: block; height: calc(100vh - 68px); margin-top: 68px; position: relative; }
[data-mode-depth-container] { --mode-depth-dim-filter: none; }
[data-mode-depth-container][data-mode-stack-depth="detail"] { --mode-depth-dim-filter: brightness(0.86) saturate(0.92); }
[data-mode-depth-container][data-mode-stack-depth="schedule"] { --mode-depth-dim-filter: brightness(0.74) saturate(0.86); }
[data-mode-depth-container][data-mode-stack-depth="packing-categories"] { --mode-depth-dim-filter: brightness(0.86) saturate(0.92); }
[data-mode-depth-container].is-depth-stack-closing { --mode-depth-dim-filter: none; }
.desktop-map-layout { align-items: stretch; display: flex; flex: 1 1 auto; min-width: 0; order: 1; pointer-events: none; position: relative; }
.map-center-region { flex: 1 1 auto; min-width: 0; order: 2; pointer-events: none; position: relative; }
.map-center-region > .map-canvas { pointer-events: auto; }
.map-center-region > .map-controls { pointer-events: auto; }
.mobile-map-layout { display: none; }
.map-area { align-items: stretch; display: flex; height: 100%; inset: 0; position: absolute; }
.map-canvas { height: 100%; inset: 0; min-height: 0; position: absolute; width: 100%; }
.map-center-overlay { display: flex; flex: 1 1 auto; min-width: 0; pointer-events: none; position: relative; z-index: 500; }
.map-center-region > .map-center-overlay { height: 100%; width: 100%; }
.map-overlay-column { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 0; padding: 18px; pointer-events: none; }
.map-overlay-column > * { pointer-events: auto; }
.map-overlay-column-left { align-items: stretch; }
.map-overlay-column-left .map-legend { margin-top: auto; }
.map-overlay-column-center { align-items: center; justify-content: center; }
.map-overlay-column-right { align-items: flex-end; justify-content: flex-start; }
.topbar-actions > .notification-mini-popup { flex: 0 0 auto; }
.notification-mini-popup:not(.is-collapsed) { bottom: 18px; border-radius: 16px 16px 12px 12px; left: 50%; position: fixed; transform: translateX(-50%); width: min(420px, calc(100vw - 36px)); z-index: 1100; }
.demo-place-marker { background: transparent; border: 0; }
.demo-place-marker span { background: var(--accent); border: 3px solid rgba(255, 255, 255, 0.95); border-radius: 50%; box-shadow: 0 3px 10px rgba(27, 55, 39, 0.35); display: block; height: 24px; width: 24px; }
.demo-place-marker:hover span { background: #b87434; transform: scale(1.2); }
.country-flag-marker { align-items: center; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 5px 18px rgba(27, 55, 39, 0.18); display: flex; gap: 5px; justify-content: center; padding: 5px 9px; width: max-content !important; }
.map-layer-fade-out { pointer-events: none; }
.map-layer-fade-out-path { pointer-events: none; transform-box: fill-box; transform-origin: center; }
.map-info-popup .maplibregl-popup-content { opacity: 1; }
.country-flag-marker:hover, .country-flag-marker:focus { box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 22px rgba(27, 55, 39, 0.22); transform: scale(1.08); }
.country-flag-marker-flag { font-size: 1.45rem; line-height: 1; }
.country-flag-marker strong { color: var(--ink); font-size: 0.75rem; white-space: nowrap; }
.demo-place-marker.is-wishlist span { background: #c68135; box-shadow: 0 0 0 4px rgba(198, 129, 53, 0.22), 0 3px 10px rgba(27, 55, 39, 0.35); }
.demo-place-popup .maplibregl-popup-content { margin: 15px 17px; }
.demo-place-popup-content { min-width: 220px; }
.demo-place-popup-content .panel-kicker { margin: 0 0 5px; }
.demo-place-popup-content h3 { font-size: 1.05rem; letter-spacing: -0.04em; margin: 0 0 3px; }
.demo-place-popup-region { color: var(--muted); font-size: 0.7rem; margin: 0; }
.demo-place-popup-description { font-size: 0.76rem; line-height: 1.5; margin: 12px 0 9px; }
.demo-place-popup-tip { background: var(--wash); border-radius: 7px; color: var(--accent); font-size: 0.7rem; line-height: 1.4; margin: 0; padding: 7px 8px; }
.demo-place-popup-content > small { color: var(--muted); display: block; font-size: 0.61rem; margin-top: 9px; }
.map-region-callout { align-items: center; background: transparent; cursor: pointer; display: flex; justify-content: center; pointer-events: auto; }
.map-region-callout span { background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 2px 8px rgba(27, 55, 39, 0.12); color: var(--ink); font-size: 0.72rem; font-weight: 800; line-height: 1; max-width: 150px; overflow: hidden; padding: 6px 9px; text-overflow: ellipsis; white-space: nowrap; }
.map-region-label::before { display: none; }
.map-region-label-country { font-size: 0.82rem; }
.map-region-label-district { background: rgba(255, 255, 255, 0.88); color: #925f28; font-size: 0.66rem; }
.region-popup-content { min-width: 180px; }
.region-popup-content .panel-kicker { margin: 0 0 5px; }
.region-popup-content h3 { font-size: 1rem; letter-spacing: -0.04em; margin: 0 0 7px; }
.region-popup-content p { font-size: 0.76rem; line-height: 1.5; margin: 0 0 8px; }
.region-popup-content small { color: var(--muted); font-size: 0.65rem; }
.country-level-popup { min-width: 190px; }
.country-level-popup h3 { font-size: 1.05rem; letter-spacing: -0.04em; margin: 0 0 8px; }
.country-level-popup p { font-size: 0.76rem; line-height: 1.5; margin: 0 0 8px; }
.country-level-popup small { color: var(--muted); font-size: 0.65rem; }
.map-mini-popup-stack { align-items: flex-end; display: flex; flex-direction: column; gap: 8px; pointer-events: none !important; width: min(320px, 100%); }
.map-mini-popup-stack > * { pointer-events: auto; }
.map-mini-popup { background: rgba(255, 255, 255, 0.97); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 560px; overflow: hidden; width: 320px; }
.map-mini-popup.is-collapsed { border-radius: 12px; max-height: 46px; width: 46px; }
.map-mini-popup-toggle { align-items: center; background: transparent; border-radius: 0; color: var(--ink); display: flex; gap: 9px; height: 46px; padding: 0 12px; position: relative; text-align: left; width: 100%; }
.map-mini-popup-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.map-mini-popup-icon { align-items: center; display: inline-flex; flex: 0 0 20px; font-size: 1.35rem; justify-content: center; }
.map-mini-popup-label { flex: 1 1 auto; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.map-mini-popup-state { color: var(--muted); font-size: 1rem; }
.map-mini-popup.is-collapsed .map-mini-popup-label,
.map-mini-popup.is-collapsed .map-mini-popup-state { display: none; }
.map-mini-popup-content { max-height: 514px; overflow-y: auto; padding: 15px; }
.map-mini-popup-content[hidden] { display: none; }
.map-mini-popup-content .panel-kicker { margin-bottom: 5px; }
.map-mini-popup-content h2 { font-size: 0.95rem; letter-spacing: -0.04em; margin: 0 0 8px; }
.map-mini-popup-content .secondary-button { width: 100%; }
.current-location-mini-popup .info-panel { padding: 4px 2px 8px; }
.current-location-mini-popup .current-location-country { margin-bottom: 10px; }
.notification-popup-icon { background: var(--accent-soft); border-radius: 50%; color: var(--accent); font-size: 0.8rem; font-weight: 900; height: 20px; }
.notification-popup-indicator { background: #d95b4f; border: 2px solid var(--paper); border-radius: 50%; height: 9px; position: absolute; right: 7px; top: 7px; width: 9px; }
.notification-popup-indicator[hidden] { display: none; }
.notification-mini-popup.is-notifying { animation: notification-pulse 500ms ease 2; }
.notification-current { background: var(--wash); border-radius: 8px; color: var(--ink); font-size: 0.75rem; line-height: 1.45; margin: 0 0 12px; padding: 9px 10px; }
.notification-history-list { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; line-height: 1.45; margin: 0; max-height: 180px; overflow-y: auto; padding: 10px 0 0 20px; }
.notification-history-list:empty { display: none; }
.notification-history-list li + li { margin-top: 7px; }
@keyframes notification-pulse {
  50% { box-shadow: 0 0 0 5px rgba(46, 118, 87, 0.16), var(--shadow); }
}

.left-overlay, .right-overlay { background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); box-shadow: var(--shadow); z-index: 700; }
.left-overlay { border-radius: 0; height: 100%; overflow-y: auto; padding: 22px; position: relative; width: var(--sidebar-panel-width); }
.right-overlay { bottom: 0; position: absolute; right: 0; top: 0; }
.right-overlay { border-radius: 0; bottom: 0; height: 100%; max-height: none; overflow-y: auto; padding: 22px; right: 0; top: 0; width: var(--sidebar-panel-width); }
.sidebar-region-left { align-items: stretch; align-self: stretch; display: flex; flex: 0 0 auto; flex-direction: row; order: 1; position: relative; width: max-content; z-index: 700; }
.sidebar-region-left, .sidebar-region-right { pointer-events: auto; }
.sidebar-region-left > .sidebar-panel { flex: 0 0 var(--sidebar-panel-width); height: 100%; order: 1; position: relative; right: auto; top: auto; }
.sidebar-region-left > .sidebar-panel { transform: none; transition: flex-basis 240ms ease, max-width 240ms ease, width 240ms ease; will-change: flex-basis, max-width, width; }
.sidebar-panel-motion { display: contents; }
.sidebar-region-left [hidden] { display: none; }
.left-sidebar-launcher { border-left: 1px solid var(--line); border-right: 0; order: 2; }
.sidebar-region-right { align-items: stretch; align-self: stretch; display: flex; flex: 0 0 auto; flex-direction: row; order: 3; overflow: hidden; position: relative; width: max-content; z-index: 700; }
.sidebar-region-right .right-overlay { flex: 0 0 var(--sidebar-panel-width); height: 100%; position: relative; right: auto; top: auto; transform: none; transition: flex-basis 240ms ease, max-width 240ms ease; }
.sidebar-region-right [data-sidebar-panel="nearby"] { order: 2; }
.sidebar-region-right [data-sidebar-panel="places"] { order: 3; }
.sidebar-region-right [hidden] { display: none; }
.context-sidebar-region[hidden], .context-sidebar[hidden] { display: none; }
.context-sidebar-region { overflow: hidden; }
.context-sidebar-rail { align-items: center; background: rgba(255, 255, 255, 0.96); border-left: 1px solid var(--line); display: flex; flex: 0 0 var(--sidebar-handle-width); flex-direction: column; gap: 8px; height: 100%; order: 1; padding-top: 18px; width: var(--sidebar-handle-width); }
.context-sidebar-close { flex: 0 0 32px; margin: 0 0 4px; }
.context-sidebar-tools { display: grid; gap: 8px; }
.context-sidebar-tool { align-items: center; background: transparent; border-radius: 9px; color: var(--muted); display: flex; font-size: 1.15rem; height: 36px; justify-content: center; padding: 0; transition: background 180ms ease, color 180ms ease; width: 36px; }
.context-sidebar-tool:hover, .context-sidebar-tool.is-active { background: var(--accent-soft); color: var(--accent); }
.context-sidebar-header .sidebar-heading { align-items: center; width: 100%; }
.context-sidebar-actions { align-items: center; display: flex; gap: 5px; margin-left: auto; }
.context-sidebar-actions .context-sidebar-manage-button { margin-left: 0; }
.context-sidebar-manage-button { background: var(--wash); color: var(--muted); font-size: 0.68rem; margin-left: auto; padding: 7px 9px; }
.context-sidebar-manage-button:hover { background: var(--accent-soft); color: var(--accent); }
.context-sidebar-close-button { background: var(--wash); color: var(--muted); font-size: 0.68rem; padding: 7px 9px; }
.context-sidebar-close-button:hover { background: var(--accent-soft); color: var(--accent); }
.context-sidebar-region > .context-depth-panel { bottom: 0; flex: none; left: auto; max-width: var(--sidebar-panel-width); overflow: hidden; padding: 0; position: absolute; right: 0; top: 0; transform: translateX(100%); transition: filter 160ms ease, right 240ms cubic-bezier(0.22, 0.8, 0.3, 1); will-change: right, transform; width: var(--sidebar-panel-width); z-index: 1; }
.context-sidebar-region > .context-depth-panel.is-open { max-width: var(--sidebar-panel-width); transform: translateX(0); }
.context-sidebar-region > .context-depth-panel.is-context-switching-out { pointer-events: none; }
.context-sidebar-region > .context-depth-panel.is-depth-entering { z-index: 2; }
.context-sidebar-region > .context-depth-panel.is-context-switching-out { z-index: 1; }
.context-sidebar-region > [data-context-depth-panel="packing-categories"].is-context-switching-out { animation: context-sidebar-panel-slide-out-right 240ms cubic-bezier(0.4, 0, 1, 1) forwards; z-index: 3; }
.context-sidebar-region > .context-depth-panel.is-obscured { filter: var(--mode-depth-dim-filter); }
.context-sidebar-region > .context-depth-panel.is-depth-entering { animation: context-sidebar-panel-slide-in-right 240ms cubic-bezier(0.22, 0.8, 0.3, 1); }
.context-sidebar-region.is-context-closing { pointer-events: none; }
.context-sidebar-region.is-context-closing > .context-depth-panel.is-context-closing { animation: context-sidebar-panel-slide-out-right 240ms cubic-bezier(0.4, 0, 1, 1) forwards; }
.context-sidebar-region.is-context-removing { pointer-events: none; }
.context-sidebar-region.is-context-removing .context-sidebar-rail,
.context-sidebar-region.is-context-removing > .context-depth-panel { animation: context-sidebar-panel-slide-out-right 240ms cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes context-sidebar-panel-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes context-sidebar-panel-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
.context-tool-placeholder { background: var(--wash); border-radius: 10px; padding: 14px; }
.context-tool-placeholder h3 { font-size: 1rem; margin: 2px 0 8px; }
.context-tool-placeholder p { color: var(--muted); font-size: 0.76rem; line-height: 1.55; margin: 0; }
.context-sidebar-menu { display: grid; gap: 8px; }
.context-sidebar-copy { color: var(--muted); font-size: 0.78rem; line-height: 1.55; margin: 0 0 14px; }
.context-sidebar-menu-item { align-items: center; background: var(--wash); border-radius: 10px; color: var(--ink); display: flex; gap: 10px; padding: 12px; text-align: left; width: 100%; }
.context-sidebar-menu-item:hover { background: var(--accent-soft); color: var(--ink); }
.context-sidebar-menu-icon { align-items: center; background: var(--paper); border-radius: 8px; color: var(--accent); display: inline-flex; flex: 0 0 30px; font-size: 1rem; height: 30px; justify-content: center; }
.context-sidebar-menu-text { display: grid; gap: 3px; min-width: 0; }
.context-sidebar-menu-text strong { font-size: 0.78rem; }
.context-sidebar-menu-text small { color: var(--muted); font-size: 0.68rem; line-height: 1.4; }
.context-sidebar-menu-arrow { color: var(--muted); font-size: 1.25rem; margin-left: auto; }
.sidebar-launcher { align-items: center; background: rgba(255, 255, 255, 0.96); border-right: 1px solid var(--line); cursor: ew-resize; display: flex; flex: 0 0 var(--sidebar-handle-width); flex-direction: column; gap: 8px; height: 100%; order: 1; padding-top: 18px; position: relative; width: var(--sidebar-handle-width); }
.sidebar-launcher-button { align-items: center; background: transparent; border-radius: 9px; color: var(--muted); display: flex; font-size: 1.25rem; height: 36px; justify-content: center; padding: 0; transition: background 180ms ease, color 180ms ease; width: 36px; }
.sidebar-launcher-button:hover, .sidebar-launcher-button.is-active { background: var(--accent-soft); color: var(--accent); }
.sidebar-launcher-button:disabled { cursor: default; opacity: 0.55; }
.mobile-sidebar-dock { display: none; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }
.sidebar-toggle { align-items: center; background: var(--wash); border-radius: 50%; color: var(--ink); display: flex; font-size: 1.2rem; height: 32px; justify-content: center; line-height: 1; padding: 0; width: 32px; }
.right-overlay.is-collapsed { padding: 0; width: var(--sidebar-handle-width); }
.sidebar-shell.is-collapsed > :not(.sidebar-header) { display: none; }
.sidebar-shell.is-collapsed .sidebar-title { display: none; }
.right-overlay.is-collapsed .sidebar-heading { align-items: center; display: flex; inset: 0; justify-content: center; position: absolute; }
.right-overlay.is-collapsed .sidebar-close { margin: 0; }
.sidebar-heading { align-items: flex-start; display: flex; position: relative; }
.sidebar-title h2 { font-size: 1.3rem; letter-spacing: -0.05em; margin: 0; }
.sidebar-heading .eyebrow { margin-bottom: 8px; }
.sidebar-close { background: var(--wash); border-radius: 50%; color: var(--ink); font-size: 1.2rem; height: 32px; line-height: 1; margin-left: auto; padding: 0; width: 32px; }
.mobile-panel-handle { display: none; }
.mobile-panel-content { display: contents; }
.sidebar-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 18px; margin: 4px -22px 0; padding: 0 22px; }
.sidebar-tab { background: transparent; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); padding: 13px 2px 11px; }
.sidebar-tab:hover, .sidebar-tab.is-active { background: transparent; color: var(--accent); }
.sidebar-tab.is-active { border-bottom-color: var(--accent); }
.info-panel { padding: 26px 2px 18px; }
.info-panel[hidden] { display: none; }
.place-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 12px; margin: 4px -22px 0; overflow-x: auto; padding: 0 22px; }
.place-tab { background: transparent; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); font-size: 0.76rem; padding: 12px 2px 10px; white-space: nowrap; }
.place-tab:hover, .place-tab.is-active { background: transparent; color: var(--accent); }
.place-tab.is-active { border-bottom-color: var(--accent); }
.place-list { display: grid; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.place-list:empty::before { color: var(--muted); content: '아직 추가한 장소가 없습니다.'; font-size: 0.76rem; }
.place-list-item { background: var(--wash); border-radius: 9px; color: var(--ink); display: block; font-size: 0.78rem; padding: 10px; text-align: left; width: 100%; }
.place-list-item:hover { background: var(--accent-soft); color: var(--ink); }
.place-list-item strong, .place-list-item small { display: block; }
.place-list-item small { color: var(--muted); font-size: 0.68rem; margin-top: 4px; }
.place-list-item .place-focus-button { background: transparent; border: 0; color: inherit; cursor: pointer; display: block; padding: 0; text-align: left; width: 100%; }
.place-list-item .place-add-plan-button, .place-list-item .place-remove-button { border: 0; border-radius: 6px; cursor: pointer; font-size: 0.7rem; margin-top: 8px; padding: 5px 8px; }
.place-list-item .place-add-plan-button { background: var(--accent); color: #fff; }
.place-list-item .place-remove-button { background: transparent; color: var(--muted); margin-left: 4px; }
.place-list-item .place-remove-button:hover { background: #f8eded; color: #9b4b4b; }
.place-clear-button { margin-top: 8px; }
.place-focus-button { background: transparent; color: inherit; display: block; padding: 0; text-align: left; width: 100%; }
.place-focus-button:hover { background: transparent; color: inherit; }
.demo-place-list-item { align-items: center; background: var(--wash); border: 1px solid transparent; border-radius: 9px; color: var(--ink); display: grid; gap: 2px 8px; grid-template-columns: minmax(0, 1fr) auto; padding: 10px; text-align: left; width: 100%; }
.demo-place-list-item + .demo-place-list-item { margin-top: 6px; }
.demo-place-list-item strong, .demo-place-list-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-place-list-item strong { font-size: 0.78rem; }
.demo-place-list-item small { color: var(--muted); font-size: 0.67rem; }
.demo-place-list-item > span { color: var(--muted); grid-column: 2; grid-row: 1 / span 2; }
.demo-place-list-item:hover, .demo-place-list-item.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.demo-place-list-item.is-active small { color: var(--accent); }
.explore-place-panel { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 17px; }
.place-add-plan-button { background: var(--accent); font-size: 0.68rem; margin-top: 8px; padding: 6px 8px; }
.plan-list { display: grid; gap: 8px; margin-top: 16px; }
.plan-list-item { background: var(--wash); border-radius: 9px; color: var(--ink); display: block; padding: 10px; text-align: left; width: 100%; }
.plan-list-item:hover, .plan-list-item.is-active { background: var(--accent-soft); color: var(--ink); }
.plan-list-item strong, .plan-list-item small { display: block; }
.plan-list-item small { color: var(--muted); font-size: 0.68rem; margin-top: 4px; }
.plan-empty[hidden] { display: none; }
.plan-detail[hidden], [data-plan-list-view][hidden] { display: none; }
.plan-detail { margin-top: 2px; }
.sidebar-shell[data-left-sidebar="plan"] .mobile-panel-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
@keyframes sidebar-depth-panel-slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes sidebar-depth-panel-slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.plan-root-header, .sidebar-detail-header { background: var(--paper); }
.sidebar-detail-header .sidebar-heading { align-items: flex-start; }
.sidebar-detail-header .sidebar-title { flex: 1 1 auto; min-width: 0; }
.sidebar-detail-content { padding: 26px 2px 18px; }
.sidebar-detail-header .panel-kicker { margin-bottom: 8px; }
.sidebar-detail-header h3 { font-size: 1.35rem; letter-spacing: -0.05em; margin: 0 0 18px; }
.sidebar-detail-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.plan-title-form { display: flex; gap: 7px; margin: 0; }
.plan-detail-title-input { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.05em; min-width: 0; padding: 3px 0 7px; width: 100%; }
.plan-detail-title-input:focus { border-bottom-color: var(--accent); outline: none; }
.plan-title-form button { font-size: 0.7rem; padding: 7px 10px; white-space: nowrap; }
.plan-category-field, .plan-section-label { color: var(--muted); display: block; font-size: 0.72rem; font-weight: 700; margin-bottom: 6px; }
.plan-category-field + select { background: var(--paper); border: 1px solid #ccd7ce; border-radius: 8px; color: var(--ink); font: inherit; font-size: 0.78rem; padding: 8px 10px; width: 100%; }
.plan-tags-section { margin-top: 16px; }
.plan-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.plan-tag-badge { align-items: center; background: var(--accent-soft); border-radius: 999px; color: var(--accent); display: inline-flex; font-size: 0.7rem; gap: 5px; padding: 5px 8px; }
.plan-tag-remove { align-items: center; background: transparent; border-radius: 50%; color: var(--accent); display: inline-flex; font-size: 0.85rem; height: 16px; justify-content: center; padding: 0; width: 16px; }
.plan-tag-remove:hover { background: rgba(46, 118, 87, 0.14); color: var(--accent); }
.plan-add-tag { align-items: center; background: var(--wash); border: 1px dashed #aabbb0; border-radius: 999px; color: var(--accent); display: inline-flex; font-size: 1rem; height: 26px; justify-content: center; margin-left: 4px; padding: 0; vertical-align: middle; width: 26px; }
.plan-add-tag:hover { background: var(--accent-soft); }
.plan-tag-form { align-items: center; display: flex; gap: 6px; margin-top: 9px; }
.plan-tag-form[hidden] { display: none; }
.plan-tag-form input { border: 1px solid #ccd7ce; border-radius: 8px; font: inherit; font-size: 0.75rem; min-width: 0; padding: 7px 9px; width: 100%; }
.plan-tag-form button { font-size: 0.72rem; padding: 8px 10px; white-space: nowrap; }
.plan-lifecycle { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-top: 18px; }
.plan-status { background: var(--accent-soft); border-radius: 999px; color: var(--accent); font-size: 0.68rem; font-weight: 800; padding: 5px 9px; }
.plan-status.is-confirmed { background: #edf0f5; color: #526179; }
.plan-confirm { font-size: 0.72rem; padding: 8px 10px; }
.plan-confirm[hidden] { display: none; }
.plan-overlay-panel { background: var(--wash); border-radius: 10px; margin-top: 16px; padding: 12px; }
.plan-overlay-panel[hidden] { display: none; }
.plan-overlay-panel .plan-section-heading { margin-bottom: 8px; }
.plan-overlay-panel .panel-kicker { margin: 0; }
.plan-overlay-form { display: grid; gap: 5px; }
.plan-overlay-form label { color: var(--muted); font-size: 0.7rem; font-weight: 700; margin-top: 6px; }
.plan-overlay-form select, .plan-overlay-form textarea { border: 1px solid #ccd7ce; border-radius: 8px; font: inherit; font-size: 0.76rem; padding: 8px 9px; width: 100%; }
.plan-overlay-form textarea { min-height: 68px; resize: vertical; }
.plan-overlay-form button { font-size: 0.72rem; margin-top: 5px; padding: 9px 11px; }
.plan-execution-panel, .plan-history-panel, .plan-memory-panel { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.plan-execution-panel[hidden], .plan-history-panel[hidden], .plan-memory-panel[hidden] { display: none; }
.plan-start-execution, .plan-complete-execution, .execution-event-form button, .memory-form button, .plan-history-item button { font-size: 0.72rem; padding: 9px 11px; }
.plan-complete-execution { background: var(--wash); color: var(--accent); margin-left: 5px; }
.plan-complete-execution:hover { background: var(--accent-soft); }
.execution-event-form { display: grid; gap: 5px; margin-top: 10px; }
.execution-event-form[hidden] { display: none; }
.execution-event-form label { color: var(--muted); font-size: 0.7rem; font-weight: 700; }
.execution-event-form select, .execution-event-form textarea, .memory-form input, .memory-form textarea { border: 1px solid #ccd7ce; border-radius: 8px; font: inherit; font-size: 0.76rem; padding: 8px 9px; width: 100%; }
.plan-history-list { display: grid; gap: 7px; }
.plan-history-item { background: var(--wash); border-radius: 8px; font-size: 0.72rem; padding: 9px 10px; }
.plan-history-item strong, .plan-history-item small { display: block; }
.plan-history-item small { color: var(--muted); margin-top: 3px; }
.plan-history-item button { margin-top: 7px; padding: 6px 8px; }
.memory-form { display: grid; gap: 7px; }
.memory-form input { font-weight: 700; }
.memory-items { display: grid; gap: 6px; margin-top: 9px; }
.memory-item { align-items: center; background: var(--wash); border-radius: 8px; display: flex; font-size: 0.72rem; gap: 8px; justify-content: space-between; padding: 8px 9px; }
.memory-item small { color: var(--muted); }
.memory-item button { background: transparent; color: var(--muted); font-size: 0.9rem; padding: 2px 5px; }
.memory-item button:hover { background: var(--accent-soft); color: var(--accent); }
.sidebar-shell.is-read-only .plan-detail-title-input { border-bottom-color: transparent; }
.sidebar-shell.is-read-only .plan-day { cursor: pointer; }
.plan-schedule-section, .plan-packing-section { padding-top: 18px; }
.plan-section-heading { align-items: center; display: flex; justify-content: space-between; }
.plan-schedule-section h4, .plan-packing-section h4, .schedule-detail h4 { font-size: 0.9rem; margin: 0 0 12px; }
.plan-add-day, .plan-add-packing, .plan-manage-packing { background: var(--wash); color: var(--accent); font-size: 0.7rem; padding: 7px 9px; }
.plan-add-day:hover, .plan-add-packing:hover, .plan-manage-packing:hover { background: var(--accent-soft); }
.packing-heading-actions { display: flex; gap: 5px; }
.plan-day-form { background: var(--wash); border-radius: 10px; margin: 10px 0 12px; padding: 11px; }
.plan-day-form[hidden] { display: none; }
.plan-day-form label, .schedule-detail-form label { color: var(--muted); display: block; font-size: 0.7rem; font-weight: 700; margin: 7px 0 4px; }
.plan-day-form input, .schedule-detail-form input { border: 1px solid #ccd7ce; border-radius: 8px; font: inherit; font-size: 0.78rem; padding: 8px 9px; width: 100%; }
.plan-day-form .dialog-actions { margin-top: 10px; }
.schedule-detail[hidden] { display: none; }
.schedule-detail { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.schedule-detail .panel-kicker { margin-bottom: 8px; }
.schedule-detail-form { display: grid; gap: 2px; }
.schedule-detail-form button { font-size: 0.72rem; margin-top: 10px; padding: 9px 11px; }
.schedule-detail-stops { display: grid; gap: 9px; margin-top: 8px; }
.schedule-stop-form { background: var(--wash); border-radius: 9px; display: grid; gap: 7px; padding: 11px; }
.schedule-stop-form > strong { font-size: 0.8rem; }
.schedule-stop-form label { color: var(--muted); display: grid; font-size: 0.68rem; font-weight: 700; gap: 4px; }
.schedule-stop-form input, .schedule-stop-form textarea { border: 1px solid #ccd7ce; border-radius: 8px; font: inherit; font-size: 0.75rem; padding: 7px 8px; width: 100%; }
.schedule-stop-form textarea { resize: vertical; }
.schedule-stop-form button { font-size: 0.7rem; justify-self: end; padding: 7px 9px; }
.schedule-stop-time-row { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }
.packing-item-form { background: var(--wash); border-radius: 10px; display: grid; gap: 5px; margin-bottom: 10px; padding: 11px; }
.packing-item-form[hidden] { display: none; }
.packing-item-form label { color: var(--muted); font-size: 0.7rem; font-weight: 700; margin-top: 4px; }
.packing-item-form input, .packing-item-form select, .packing-item-form textarea { border: 1px solid #ccd7ce; border-radius: 8px; font: inherit; font-size: 0.76rem; padding: 8px 9px; width: 100%; }
.packing-item-form textarea { resize: vertical; }
.packing-form-row { display: grid; gap: 7px; grid-template-columns: 2fr 1fr; }
.packing-form-row label { display: grid; gap: 4px; }
.packing-items { display: grid; gap: 8px; }
.packing-item { background: var(--wash); border-radius: 9px; display: grid; gap: 4px; padding: 10px 11px; }
.packing-item.is-packed strong { color: var(--muted); text-decoration: line-through; }
.packing-item-summary { align-items: center; display: flex; gap: 7px; min-width: 0; }
.packing-item-packed-toggle { align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 50%; color: var(--muted); display: inline-flex; flex: 0 0 25px; font-size: 0.78rem; height: 25px; justify-content: center; padding: 0; width: 25px; }
.packing-item-packed-toggle:hover, .packing-item-packed-toggle.is-packed { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.packing-item-summary-button { align-items: baseline; background: transparent; color: var(--ink); display: flex; flex: 1 1 auto; gap: 7px; min-width: 0; overflow: hidden; padding: 2px 0; text-align: left; }
.packing-item-summary-button:hover { background: transparent; color: var(--accent); }
.packing-item-summary-button strong { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.packing-item-summary-button span, .packing-item-summary-button small { color: var(--muted); font-size: 0.68rem; white-space: nowrap; }
.packing-item-summary-button small { overflow: hidden; text-overflow: ellipsis; }
.packing-item-edit-button { background: transparent; color: var(--muted); flex: 0 0 26px; font-size: 1rem; height: 26px; padding: 0; width: 26px; }
.packing-item-edit-button:hover { background: var(--accent-soft); color: var(--accent); }
.packing-item-details[hidden] { display: none; }
.packing-item p { font-size: 0.7rem; margin: 2px 0; }
.packing-item-edit-form { display: grid; gap: 5px; margin-top: 5px; }
.packing-item-edit-form label { color: var(--muted); display: grid; font-size: 0.68rem; font-weight: 700; gap: 4px; }
.packing-item-edit-form input, .packing-item-edit-form select, .packing-item-edit-form textarea { border: 1px solid #ccd7ce; border-radius: 8px; font: inherit; font-size: 0.72rem; padding: 7px 8px; width: 100%; }
.packing-item-edit-form textarea { resize: vertical; }
.packing-item-edit-form button { font-size: 0.7rem; justify-self: end; padding: 7px 10px; }
.packing-status-select { border: 1px solid #ccd7ce; border-radius: 8px; font: inherit; font-size: 0.7rem; justify-self: end; padding: 6px 7px; }
.packing-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.packing-filter-button { background: var(--wash); border: 1px solid transparent; border-radius: 999px; color: var(--muted); font-size: 0.68rem; padding: 6px 9px; }
.packing-filter-button:hover, .packing-filter-button.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.packing-option-manager { background: #f5f8f6; border: 1px solid var(--line); border-radius: 10px; margin-top: 12px; padding: 11px; }
.packing-option-manager[hidden] { display: none; }
.packing-option-manager .plan-section-heading > strong { font-size: 0.8rem; }
.packing-option-create-form { display: grid; gap: 6px; grid-template-columns: 1fr 1.5fr 38px auto; margin: 10px 0 12px; }
.packing-option-create-form select, .packing-option-create-form input { border: 1px solid #ccd7ce; border-radius: 7px; font: inherit; font-size: 0.68rem; min-width: 0; padding: 6px; }
.packing-option-create-form input[type="color"] { height: 31px; padding: 3px; }
.packing-option-create-form button { font-size: 0.68rem; padding: 6px 8px; }
.packing-option-groups { display: grid; gap: 12px; }
.packing-option-group { display: grid; gap: 5px; }
.packing-option-group > strong { color: var(--muted); font-size: 0.68rem; }
.packing-option-row { align-items: center; display: grid; gap: 5px; grid-template-columns: 32px minmax(0, 1fr) auto auto; }
.packing-option-row input { border: 1px solid #ccd7ce; border-radius: 7px; font: inherit; font-size: 0.7rem; min-width: 0; padding: 6px; }
.packing-option-row input[type="color"] { height: 29px; padding: 3px; }
.packing-option-row button { font-size: 0.64rem; padding: 6px 7px; }
.packing-option-row input:disabled { background: #edf0ed; color: var(--muted); }
.packing-option-delete { background: transparent; color: #9b4b4b; }
.packing-option-delete:hover { background: #f8eded; }
@media (max-width: 420px) {
  .packing-option-create-form { grid-template-columns: 1fr 1fr 38px; }
  .packing-option-create-form button { grid-column: 1 / -1; }
}
.plan-breadcrumb { align-items: center; display: flex; font-size: 0.72rem; gap: 6px; letter-spacing: 0; line-height: 1.3; margin-top: 6px; max-width: 100%; }
.plan-breadcrumb button { background: transparent; color: var(--muted); font-size: inherit; font-weight: 600; overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: nowrap; }
.plan-breadcrumb button:hover { background: transparent; color: var(--accent); }
.plan-breadcrumb strong { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-breadcrumb[aria-label] span[hidden], .plan-breadcrumb[aria-label] button[hidden] { display: none; }
.plan-detail .panel-kicker { margin-top: 22px; }
.plan-detail h3 { margin-bottom: 14px; }
.plan-days { display: grid; gap: 12px; }
.plan-day { background: var(--wash); border-radius: 10px; padding: 11px 12px; }
.plan-day { cursor: grab; }
.plan-day:active, .plan-day.is-dragging { cursor: grabbing; opacity: 0.55; }
.plan-day-heading { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; }
.plan-day-heading strong { font-size: 0.8rem; }
.plan-day-heading small { color: var(--muted); font-size: 0.68rem; }
.plan-stops { display: grid; gap: 7px; list-style: none; margin: 10px 0 0; padding: 0; }
.plan-stop { border-top: 1px solid var(--line); padding-top: 7px; }
.plan-stop strong, .plan-stop small { display: block; }
.plan-stop strong { font-size: 0.76rem; }
.plan-stop small { color: var(--muted); font-size: 0.68rem; margin-top: 3px; }
.primary-action { height: 40px; margin-top: 8px; width: 100%; }
.panel-kicker { color: var(--accent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; margin-bottom: 8px; }
.info-panel h3 { font-size: 1.15rem; letter-spacing: -0.04em; margin-bottom: 10px; }
.empty-copy { color: var(--muted); font-size: 0.84rem; line-height: 1.65; }
.current-location-country { align-items: flex-start; display: flex; gap: 10px; margin-bottom: 16px; }
.current-location-flag { align-items: center; background: var(--accent-soft); border-radius: 10px; display: inline-flex; flex: 0 0 42px; font-size: 1.7rem; height: 42px; justify-content: center; }
.current-location-country h3 { margin: 0 0 4px; }
.current-location-country p { color: var(--muted); font-size: 0.74rem; line-height: 1.5; margin: 0; }
.current-location-list { border-top: 1px solid var(--line); display: grid; gap: 6px; padding-top: 12px; }
.current-location-list:empty::before { color: var(--muted); content: '현재 위치를 확인하면 인근 정보가 표시됩니다.'; font-size: 0.74rem; }
.current-location-item { align-items: center; background: var(--wash); border-radius: 8px; color: var(--ink); display: grid; gap: 2px 8px; grid-template-columns: minmax(0, 1fr) auto; padding: 9px 10px; text-align: left; width: 100%; }
.current-location-item:hover { background: var(--accent-soft); color: var(--accent); }
.current-location-item strong, .current-location-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-location-item strong { font-size: 0.76rem; }
.current-location-item small { color: var(--muted); font-size: 0.66rem; margin-top: 3px; }
.current-location-item > span { color: var(--muted); grid-column: 2; grid-row: 1 / span 2; }
.nearby-context { align-items: center; background: var(--wash); border-radius: 9px; color: var(--muted); display: flex; font-size: 0.72rem; gap: 8px; margin: 14px 0; padding: 10px; }
.nearby-context[hidden] { display: none; }
.nearby-filters { display: flex; gap: 6px; margin-top: 13px; }
.nearby-filter { background: var(--wash); border: 1px solid transparent; border-radius: 999px; color: var(--muted); font-size: 0.69rem; padding: 6px 10px; }
.nearby-filter:hover, .nearby-filter.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.nearby-list { display: grid; gap: 6px; margin-top: 10px; }
.nearby-list:empty::before { color: var(--muted); content: '현재 보이는 영역에 장소가 없습니다.'; font-size: 0.74rem; }
.nearby-group { display: grid; gap: 7px; }
.nearby-group + .nearby-group { border-top: 1px solid var(--line); padding-top: 10px; }
.nearby-group-heading { border-bottom: 1px solid var(--line); padding: 2px 2px 8px; }
.nearby-group h4 { color: var(--ink); font-size: 1rem; letter-spacing: -0.04em; margin: 0; }
.nearby-group-heading p { color: var(--muted); font-size: 0.69rem; line-height: 1.45; margin: 4px 0 0; }
.nearby-group-list { border-left: 2px solid var(--accent-soft); display: grid; gap: 6px; padding-left: 9px; }
.nearby-place-item { align-items: center; background: var(--wash); border: 1px solid transparent; border-radius: 9px; display: grid; gap: 8px; grid-template-columns: 52px minmax(0, 1fr) 28px; padding: 5px; }
.nearby-place-photo { align-items: center; background: #dbe5dc; border-radius: 6px; color: var(--accent); display: flex; font-size: 1.3rem; height: 52px; justify-content: center; overflow: hidden; width: 52px; }
.nearby-place-photo img { height: 100%; object-fit: cover; width: 100%; }
.nearby-place-photo.is-placeholder { background: var(--accent-soft); }
.nearby-place-focus { background: transparent; color: var(--ink); min-width: 0; padding: 4px 0; text-align: left; }
.nearby-place-focus:hover { background: transparent; color: var(--accent); }
.nearby-place-focus strong, .nearby-place-focus small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-place-focus strong { font-size: 0.76rem; }
.nearby-place-focus small { color: var(--muted); font-size: 0.66rem; margin-top: 4px; }
.nearby-place-item.is-region-country { min-height: 82px; }
.nearby-place-item.is-region-country .nearby-place-focus strong { font-size: 0.95rem; }
.nearby-place-description { color: var(--muted); display: block; font-size: 0.68rem; line-height: 1.4; margin-top: 5px; }
.nearby-wishlist-button { background: transparent; border-radius: 50%; color: #a7b2a8; font-size: 1.2rem; padding: 3px; }
.nearby-wishlist-button:hover, .nearby-wishlist-button.is-active { background: transparent; color: #c68135; }
.nearby-place-item:has(.nearby-wishlist-button.is-active), .nearby-place-item:hover { background: var(--accent-soft); border-color: var(--accent); }
.context-dot { background: var(--accent); border: 3px solid var(--accent-soft); border-radius: 50%; display: inline-block; height: 10px; width: 10px; }
.secondary-button { background: var(--wash); color: var(--muted); font-size: 0.78rem; margin-top: 8px; padding: 10px 12px; }
.secondary-button:disabled { cursor: not-allowed; opacity: 0.8; }
.sidebar-hint { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.7rem; line-height: 1.5; margin: 0; padding-top: 15px; }
.map-search-overlay { background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); margin: 0; padding: 12px; width: 100%; z-index: 500; }
.map-search-overlay label { display: block; font-size: 0.75rem; font-weight: 700; margin-bottom: 7px; }
.map-search-overlay .form-hint { color: var(--muted); font-size: 0.7rem; line-height: 1.4; margin-bottom: 0; }
.map-search-overlay .search-row button { flex: 0 0 auto; white-space: nowrap; }
.map-context-menu { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 5px; position: absolute; z-index: 900; }
.map-context-menu[hidden] { display: none; }
.map-context-menu button { background: transparent; color: var(--ink); font-size: 0.78rem; padding: 9px 11px; white-space: nowrap; }
.map-context-menu button:hover { background: var(--wash); color: var(--accent); }
.place-dialog { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); color: var(--ink); max-width: min(420px, calc(100vw - 32px)); padding: 24px; width: 100%; }
.place-dialog::backdrop { background: rgba(23, 33, 27, 0.28); }
.place-dialog h2 { font-size: 1.25rem; margin: 0 0 18px; }
.place-dialog label { display: block; font-size: 0.78rem; font-weight: 700; margin: 13px 0 6px; }
.place-dialog input, .place-dialog textarea { border: 1px solid #ccd7ce; border-radius: 9px; font: inherit; padding: 10px; resize: vertical; width: 100%; }
.place-dialog input:focus, .place-dialog textarea:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); }
.dialog-coordinates { color: var(--muted); font-size: 0.72rem; margin: -10px 0 8px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.dialog-cancel { background: var(--wash); color: var(--muted); }
.plan-date-fields { align-items: center; display: flex; gap: 8px; }
.plan-date-fields input { min-width: 0; width: 100%; }
.plan-date-fields > span { color: var(--muted); font-size: .8rem; }
.map-legend-list { display: grid; gap: 8px; }
.map-legend-item { align-items: center; color: var(--muted); display: flex; font-size: 0.72rem; gap: 7px; white-space: nowrap; }
.map-legend-item input { accent-color: var(--accent); margin: 0; }
.map-legend-toggle { align-items: center; background: transparent; color: var(--muted); display: flex; font-size: 1rem; height: 24px; justify-content: center; padding: 0; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; }
.map-legend-toggle:hover { background: var(--wash); color: var(--accent); }
.map-legend.is-collapsed { align-items: center; display: flex; height: 40px; justify-content: center; padding: 0; width: 40px; }
.map-legend.is-collapsed .map-legend-toggle { height: 40px; inset: 0; transform: none; width: 40px; }
.map-legend.is-collapsed .map-legend-toggle span { font-size: 1.25rem; }
.map-legend.is-collapsed .map-legend-list { display: none; }
.map-controls { bottom: 20px; position: absolute; right: 18px; z-index: 800; }
.map-level-indicator { background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 20px rgba(27, 55, 39, 0.14); display: grid; gap: 2px; margin-bottom: 7px; padding: 8px 11px; text-align: right; }
.map-level-kicker { color: var(--muted); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; }
.map-level-indicator strong { color: var(--accent); font-size: 0.78rem; }
.map-level-indicator small { color: var(--muted); font-size: 0.62rem; }
.map-control-group { background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 20px rgba(27, 55, 39, 0.14); display: grid; overflow: hidden; padding: 3px; }
.map-control-button { align-items: center; background: transparent; border-radius: 7px; color: var(--ink); display: flex; font-size: 1.05rem; height: 32px; justify-content: center; padding: 0; width: 32px; }
.map-control-button + .map-control-button { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.map-control-button:hover { background: var(--accent-soft); color: var(--accent); }
.location-control { font-size: 1.15rem; }
.location-control:disabled { cursor: wait; opacity: 0.65; }

@media (min-width: 761px) {
    .context-sidebar-region { --context-sidebar-region-width: var(--sidebar-handle-width); flex: 0 0 var(--context-sidebar-region-width); min-width: var(--context-sidebar-region-width); transition: flex-basis 240ms cubic-bezier(0.22, 0.8, 0.3, 1), min-width 240ms cubic-bezier(0.22, 0.8, 0.3, 1), width 240ms cubic-bezier(0.22, 0.8, 0.3, 1); width: var(--context-sidebar-region-width); }
    .context-sidebar-region:has(> .context-depth-panel.is-open):not([data-mode-stack-depth="packing-categories"]) { --context-sidebar-region-width: calc(var(--sidebar-handle-width) + var(--sidebar-panel-width)); }
    .context-sidebar-region[data-mode-stack-depth="packing-categories"] { --context-sidebar-region-width: calc(var(--sidebar-handle-width) + var(--sidebar-panel-width) + var(--sidebar-depth-offset)); }
    .context-sidebar-region > .context-depth-panel { left: auto; right: 0; transition: filter 160ms ease, right 240ms cubic-bezier(0.22, 0.8, 0.3, 1); }
    .context-sidebar-region[data-mode-stack-depth="packing-categories"] > [data-context-depth-panel="packing"] { right: var(--sidebar-depth-offset); }
    .context-sidebar-region.is-context-removing { --context-sidebar-region-width: 0px; }
    .context-sidebar-region .context-sidebar-rail { bottom: 0; left: auto; position: absolute; right: var(--sidebar-panel-width); top: 0; transition: filter 160ms ease, right 240ms cubic-bezier(0.22, 0.8, 0.3, 1); z-index: 704; }
    .context-sidebar-region[data-mode-stack-depth="packing-categories"] .context-sidebar-rail { filter: var(--mode-depth-dim-filter); right: calc(var(--sidebar-panel-width) + var(--sidebar-depth-offset)); }
    .context-sidebar-region > .context-depth-panel .sidebar-panel-motion { display: flex; flex-direction: column; height: 100%; min-width: var(--sidebar-panel-width); overflow: hidden; padding: 0; transform: translateZ(0); width: var(--sidebar-panel-width); }
    .context-sidebar-region > .context-depth-panel .sidebar-header { flex: 0 0 auto; margin: 0; padding: 22px; width: var(--sidebar-panel-width); }
    .context-sidebar-region > .context-depth-panel .mobile-panel-content { display: block; margin: 0; overflow-y: auto; padding: 0 22px 22px; width: var(--sidebar-panel-width); }
    .sidebar-region-left {
        --left-sidebar-region-width: var(--sidebar-handle-width);
        flex: 0 0 var(--left-sidebar-region-width);
        flex-basis: var(--left-sidebar-region-width);
        flex-shrink: 0;
        min-width: var(--left-sidebar-region-width);
        overflow: hidden;
        transition: flex-basis 240ms cubic-bezier(0.22, 0.8, 0.3, 1), min-width 240ms cubic-bezier(0.22, 0.8, 0.3, 1), width 240ms cubic-bezier(0.22, 0.8, 0.3, 1);
        width: var(--left-sidebar-region-width);
    }
    .sidebar-region-left:has(> [data-left-sidebar="plan"].is-open) { --left-sidebar-region-width: calc(var(--sidebar-handle-width) + var(--sidebar-panel-width)); }
    .sidebar-region-left[data-mode-stack-depth="detail"]:has(> [data-left-sidebar].is-open) { --left-sidebar-region-width: calc(var(--sidebar-handle-width) + var(--sidebar-panel-width) + var(--sidebar-depth-offset)); }
    .sidebar-region-left[data-mode-stack-depth="schedule"]:has(> [data-left-sidebar].is-open) { --left-sidebar-region-width: calc(var(--sidebar-handle-width) + var(--sidebar-panel-width) + var(--sidebar-depth-offset) + var(--sidebar-depth-offset)); }
    .sidebar-region-left > .sidebar-panel,
    .sidebar-region-right .right-overlay { flex-basis: 0; max-width: 0; overflow: hidden; }
    .sidebar-region-left > .sidebar-panel.is-open,
    .sidebar-region-right .right-overlay.is-open { flex-basis: var(--sidebar-panel-width); max-width: var(--sidebar-panel-width); }
    .sidebar-region-left .sidebar-panel-motion,
    .sidebar-region-right .sidebar-panel-motion { min-width: var(--sidebar-panel-width); width: var(--sidebar-panel-width); }
    .sidebar-region-left .left-overlay { overflow: hidden; padding: 0; }
    .sidebar-region-left .sidebar-panel-motion { display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding: 22px; }
    .sidebar-region-right .right-overlay { overflow: hidden; padding: 0; }
    .sidebar-region-right .sidebar-panel-motion { display: block; height: 100%; overflow-y: auto; padding: 22px; }
    .sidebar-region-left .sidebar-header { flex: 0 0 auto; order: 1; }
    .sidebar-region-left .mobile-panel-content { display: block; order: 2; }
    .sidebar-region-left > [data-mode-depth-panel] { bottom: 0; flex: none; left: 0; margin: 0; max-width: var(--sidebar-panel-width); overflow: hidden; padding: 0; position: absolute; top: 0; transition: filter 160ms ease, left 240ms cubic-bezier(0.22, 0.8, 0.3, 1); width: var(--sidebar-panel-width); }
    .sidebar-region-left > [data-mode-depth-panel][hidden] { display: none; }
    .sidebar-region-left > [data-mode-depth-panel].is-open { max-width: var(--sidebar-panel-width); }
    .sidebar-region-left > [data-mode-depth-panel="list"] { z-index: 700; }
    .sidebar-region-left > [data-mode-depth-panel="detail"] { z-index: 701; }
    .sidebar-region-left > [data-mode-depth-panel="schedule"] { z-index: 702; }
    .sidebar-region-left > [data-mode-depth-panel].is-obscured { filter: var(--mode-depth-dim-filter); }
    .sidebar-region-left[data-mode-stack-depth="detail"] > [data-mode-depth-panel="list"] { left: var(--sidebar-depth-offset); }
    .sidebar-region-left[data-mode-stack-depth="schedule"] > [data-mode-depth-panel="list"] { left: calc(var(--sidebar-depth-offset) + var(--sidebar-depth-offset)); }
    .sidebar-region-left[data-mode-stack-depth="schedule"] > [data-mode-depth-panel="detail"] { left: var(--sidebar-depth-offset); }
    .sidebar-region-left > [data-mode-depth-panel] .sidebar-panel-motion { display: flex; flex-direction: column; height: 100%; min-width: var(--sidebar-panel-width); overflow: hidden; padding: 0; position: relative; width: var(--sidebar-panel-width); }
    .sidebar-region-left > [data-mode-depth-panel="list"] .sidebar-header { margin: 0; padding: 22px 22px 0; width: var(--sidebar-panel-width); }
    .sidebar-region-left > [data-mode-depth-panel="list"] .mobile-panel-content { margin: 0; overflow-y: auto; padding: 0 22px 22px; width: var(--sidebar-panel-width); }
    .sidebar-region-left > [data-mode-depth-panel]:not([data-mode-depth-panel="list"]) .sidebar-detail-header { display: block; flex: 0 0 auto; margin: 0; order: 1; padding: 22px; width: 100%; }
    .sidebar-region-left > [data-mode-depth-panel]:not([data-mode-depth-panel="list"]) .sidebar-detail-content { flex: 1 1 auto; min-height: 0; order: 2; overflow-y: auto; padding: 22px; }
    .sidebar-region-left > .left-sidebar-launcher {
        bottom: 0;
        flex: 0 0 var(--sidebar-handle-width);
        order: 2;
        position: absolute;
        right: 0;
        top: 0;
        transition: filter 160ms ease;
        z-index: 704;
    }
    .sidebar-region-left:not([data-mode-stack-depth="list"]) > .left-sidebar-launcher { filter: var(--mode-depth-dim-filter); }
    .sidebar-region-left > [data-mode-depth-panel].is-depth-entering {
        animation: sidebar-depth-panel-slide-in 240ms cubic-bezier(0.22, 0.8, 0.3, 1);
    }
    .sidebar-region-left > [data-mode-depth-panel].is-depth-closing {
        animation: sidebar-depth-panel-slide-out 240ms cubic-bezier(0.4, 0, 1, 1) forwards;
        pointer-events: none;
        z-index: 703;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-mode-depth-container] > [data-mode-depth-panel] { animation: none !important; transition: none !important; }
}

@media (max-width: 760px) {
    .topbar { height: 56px; padding: 0 16px; position: relative; }
    .topbar { gap: 12px; }
    .topbar-context { gap: 7px; overflow: hidden; }
    .topbar-context-mode { font-size: 0.66rem; padding: 5px 8px; }
    .topbar-context-divider, .topbar-context-meta { display: none; }
    .topbar-context-title { font-size: 0.76rem; max-width: none; }
    .desktop-map-layout { display: contents; }
    .desktop-map-layout > .sidebar-region { display: none; }
    .map-center-region { inset: 0; position: absolute; }
    .mobile-map-layout { display: block; inset: 0; pointer-events: none; position: absolute; z-index: 800; }
    .mobile-sidebar-panels { bottom: 48px; inset-inline: 0; pointer-events: none; position: absolute; top: 0; }
    .map-workspace { height: calc(100dvh - 56px); margin-top: 0; min-height: 0; }
    .map-area { display: block; height: 100%; position: relative; }
    .sidebar-region-left { bottom: 48px; height: auto; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; }
    .sidebar-region-left .left-overlay, .sidebar-region-right .right-overlay, .mobile-sidebar-panels .sidebar-shell { --mobile-drag-height: 320px; border-radius: 16px 16px 0 0; bottom: 0; display: flex; flex-direction: column; height: 320px; left: 0; max-height: 320px; min-height: 320px; overflow: hidden; padding: 0 18px 18px; pointer-events: auto; position: absolute; right: 0; top: auto; transition: height 180ms ease; width: 100%; }
    .sidebar-region-left .left-overlay:not(.is-mobile-active) { display: none; }
    .sidebar-region-left .plan-detail-panel.is-open,
    .sidebar-region-left .plan-schedule-panel.is-open { display: flex; }
    .sidebar-region-left > .sidebar-panel { flex: 0 0 100%; max-width: none; transform: none; transition: none; width: 100%; }
    .sidebar-region-left .sidebar-panel-motion { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; width: auto; }
    [data-mobile-sidebar-panels] > [data-mode-depth-panel] { background: var(--paper); transition: filter 160ms ease, left 240ms cubic-bezier(0.22, 0.8, 0.3, 1); }
    [data-mobile-sidebar-panels] > [data-mode-depth-panel="list"] { left: 0; width: 100%; z-index: 700; }
    [data-mobile-sidebar-panels] > [data-mode-depth-panel="detail"] { left: 0; width: 100%; z-index: 701; }
    [data-mobile-sidebar-panels] > [data-mode-depth-panel="schedule"] { left: 0; width: 100%; z-index: 702; }
    [data-mobile-sidebar-panels] > [data-mode-depth-panel].is-obscured { filter: var(--mode-depth-dim-filter); }
    [data-mobile-sidebar-panels][data-mode-stack-depth="detail"] > [data-mode-depth-panel="list"] { left: var(--sidebar-depth-offset); }
    [data-mobile-sidebar-panels][data-mode-stack-depth="schedule"] > [data-mode-depth-panel="list"] { left: calc(var(--sidebar-depth-offset) + var(--sidebar-depth-offset)); }
    [data-mobile-sidebar-panels][data-mode-stack-depth="schedule"] > [data-mode-depth-panel="detail"] { left: var(--sidebar-depth-offset); }
    [data-mobile-sidebar-panels] > [data-mode-depth-panel] .sidebar-panel-motion { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; padding: 0; width: 100%; }
    [data-mobile-sidebar-panels] > [data-mode-depth-panel="list"] .sidebar-header { box-sizing: border-box; flex: 0 0 76px; margin: 0; min-height: 76px; padding: 0 18px; width: 100%; }
    [data-mobile-sidebar-panels] > [data-mode-depth-panel]:not([data-mode-depth-panel="list"]) .sidebar-detail-header { display: flex; flex: 0 0 auto; order: 1; position: relative; }
    [data-mobile-sidebar-panels] > [data-mode-depth-panel]:not([data-mode-depth-panel="list"]) .sidebar-detail-content { flex: 1 1 auto; min-height: 0; order: 2; overflow-y: auto; padding: 18px; }
    .sidebar-region-left > .sidebar-launcher, .sidebar-region-right > .sidebar-launcher { display: none; }
    .right-overlay.is-collapsed { height: 48px; max-height: 48px; min-height: 48px; padding: 0 18px; width: 100%; }
    .sidebar-header { background: var(--wash); display: flex; flex: 0 0 76px; flex-direction: column; margin: 0 -18px; padding: 0 18px; }
    .sidebar-heading { align-items: center; flex: 1 1 auto; min-height: 0; }
    .sidebar-heading .eyebrow { margin-bottom: 3px; }
    .mobile-panel-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; }
    .sidebar-tabs { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
    .place-tabs { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
    .map-center-overlay { align-items: stretch; display: flex; flex-direction: column; gap: 8px; inset: 0; padding: 12px; position: absolute; }
    .map-mini-popup-stack { display: none; }
    .map-overlay-column { display: contents; padding: 0; }
    .map-search-overlay { flex: 0 0 auto; left: auto; position: relative; right: auto; top: auto; width: 100%; }
    .map-legend { align-self: flex-start; bottom: auto; left: auto; margin-top: 0; padding: 6px; position: relative; top: auto; transform: none; }
    .map-legend-list { display: flex; gap: 4px; }
    .map-legend-item { font-size: 0; gap: 0; height: 28px; justify-content: center; position: relative; width: 28px; }
    .map-legend-item span { display: none; }
    .map-legend-item input { appearance: none; background: transparent; height: 28px; margin: 0; position: absolute; width: 28px; z-index: 1; }
    .map-legend-item input:checked + .legend-dot { box-shadow: 0 0 0 3px var(--accent-soft); }
    .legend-dot { height: 10px; width: 10px; }
    .map-legend-toggle { display: none; }
    .notification-mini-popup:not(.is-collapsed) { bottom: 60px; left: 50%; width: min(420px, calc(100vw - 24px)); }
    .map-controls { bottom: 64px; right: 18px; z-index: 900; }
    .map-workspace.has-active-mobile-panel:not(.has-expanded-mobile-panel) .map-controls { bottom: min(384px, calc(100% - 160px)); }
    .sidebar-region-right { bottom: 48px; display: block; height: auto; overflow: visible; pointer-events: none; position: absolute; top: 0; width: 100%; }
    .sidebar-region-right .right-overlay { bottom: 0; flex: 0 0 100%; max-width: none; pointer-events: auto; position: absolute; right: 0; top: auto; transform: none; transition: none; width: 100%; }
    .sidebar-region-right .right-overlay[data-sidebar-panel="nearby"] { height: min(560px, calc(100% - 24px)); max-height: min(560px, calc(100% - 24px)); min-height: min(560px, calc(100% - 24px)); }
    .sidebar-region-right .sidebar-panel-motion { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; overflow-y: auto; padding: 0; width: auto; }
    .sidebar-region-right .right-overlay:not(.is-mobile-active) { display: none; }
    .context-sidebar-region { bottom: 48px; display: block; height: auto; left: 0; overflow: visible; pointer-events: none; position: absolute; right: 0; top: 0; width: 100%; }
    .context-sidebar-region .context-sidebar-rail { bottom: 0; height: 320px; left: 0; pointer-events: auto; position: absolute; top: auto; width: 56px; z-index: 3; }
    .context-sidebar-region > .context-depth-panel { bottom: 0; display: none; height: 320px; left: 56px; max-width: none; pointer-events: auto; position: absolute; right: 0; top: auto; width: calc(100% - 56px); }
    .context-sidebar-region > .context-depth-panel.is-open.is-mobile-active { display: flex; flex: none; max-width: none; width: calc(100% - 56px); }
    .context-sidebar-region > .context-depth-panel.is-obscured { display: none; }
    .context-sidebar-region > .context-depth-panel .sidebar-panel-motion { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; overflow: hidden; padding: 0; width: 100%; }
    .context-sidebar-region > .context-depth-panel .sidebar-header { flex: 0 0 76px; }
    .context-sidebar-region > .context-depth-panel .mobile-panel-content { display: flex; padding: 18px; }
    .mobile-sidebar-panels .sidebar-shell:not(.is-mobile-active) { display: none; }
    .mobile-sidebar-dock { align-items: center; background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); bottom: 0; display: flex; gap: 8px; height: 48px; justify-content: center; left: 0; padding: 0 10px; pointer-events: auto; position: absolute; right: 0; z-index: 800; }
    .mobile-panel-handle { align-items: center; background: transparent; display: flex; height: 36px; justify-content: center; margin: 0 auto; padding: 0; position: relative; touch-action: none; width: 72px; z-index: 1; }
    .mobile-panel-handle span { background: var(--muted); border-radius: 999px; display: block; height: 4px; opacity: 0.6; width: 42px; }
    .mobile-panel-handle:hover { background: transparent; }
    .sidebar-shell.is-mobile-expanded { bottom: 0 !important; height: 100% !important; max-height: none !important; min-height: 0 !important; top: 0 !important; }
    .sidebar-shell.is-mobile-dragging { bottom: 0 !important; height: var(--mobile-drag-height) !important; max-height: var(--mobile-drag-height) !important; min-height: var(--mobile-drag-height) !important; top: auto !important; transition: none; }
    .sidebar-shell.is-mobile-settling { bottom: 0 !important; height: var(--mobile-drag-height) !important; max-height: var(--mobile-drag-height) !important; min-height: var(--mobile-drag-height) !important; top: auto !important; transition: height 180ms ease; }
.map-workspace.has-expanded-mobile-panel .map-controls { visibility: hidden; }
}

/* Temporarily keep the complete map workspace free of motion effects. */
.map-workspace *,
.map-workspace *::before,
.map-workspace *::after {
    animation: none !important;
    transition: none !important;
}