:root {
  --bg: #f6f7f3;
  --surface: #ffffff;
  --ink: #171d1a;
  --muted: #68716c;
  --line: #d9ddd9;
  --line-strong: #aeb6b1;
  --accent: #d9ff57;
  --accent-strong: #b9e626;
  --blue: #2764ed;
  --orange: #e46428;
  --red: #d63f3f;
  --green: #157a4d;
  --radius: 18px;
  --shadow: 0 12px 34px rgba(23, 29, 26, .08);
  font-family: Pretendard, "Noto Sans KR", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
body.route-active { overflow: hidden; }
body.route-active .route-bar { display: none; }
body.focus-active .search-panel, body.focus-active .date-section, body.focus-active .purpose-section { display: none; }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.app-header {
  position: sticky; top: 0; z-index: 1000; height: 66px; padding: env(safe-area-inset-top) 16px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line); background: rgba(246, 247, 243, .94); backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: var(--ink); background: var(--accent); font: 900 23px/1 monospace; transform: rotate(-3deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; letter-spacing: -.02em; }
.brand small { margin-top: 1px; color: var(--muted); font: 700 13px/1.1 monospace; letter-spacing: .04em; }
.header-actions { display: flex; align-items: center; gap: 7px; }
.install-btn, .plan-counter { min-height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 750; cursor: pointer; }
.install-btn { color: var(--blue); }
.plan-counter span { color: var(--green); }

.app-shell { width: min(100%, 1120px); min-height: calc(100vh - 150px); margin: 0 auto; padding: 12px 12px 100px; }
.search-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.search-field { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.search-field > span { color: var(--muted); font-size: 28px; line-height: 1; transform: translateY(-2px); }
.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 18px; }
.search-field input::placeholder { color: #8b938e; }
.filter-drawer { position: relative; }
.filter-drawer summary { min-width: 82px; min-height: 48px; padding: 0 13px; display: flex; align-items: center; justify-content: center; gap: 6px; list-style: none; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 16px; font-weight: 750; cursor: pointer; }
.filter-drawer summary::-webkit-details-marker { display: none; }
.filter-drawer summary span { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--accent); font-size: 13px; }
.filter-grid { position: absolute; top: 55px; right: 0; z-index: 500; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.filter-grid label { display: block; margin-bottom: 12px; }
.filter-grid label > span { display: block; margin: 0 0 6px; color: var(--muted); font-size: 15px; font-weight: 700; }
.filter-grid select { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fafbf8; font-size: 17px; }
.filter-grid button { width: 100%; min-height: 43px; border: 0; border-radius: 10px; background: #eef0ec; font-size: 16px; font-weight: 750; cursor: pointer; }

.date-section { margin: 10px -12px 0; padding: 0 12px 10px; }
.date-rail { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; padding: 1px 0 4px; }
.date-rail::-webkit-scrollbar { display: none; }
.date-tab { min-width: 0; min-height: 54px; padding: 6px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--surface); text-align: center; cursor: pointer; }
.date-tab strong, .date-tab span { display: block; }
.date-tab strong { color: var(--ink); font-size: 15px; white-space: nowrap; }
.date-tab span { margin-top: 4px; font-size: 13px; }
.date-tab.active { border-color: var(--ink); color: var(--ink); background: var(--accent); box-shadow: 3px 3px 0 var(--ink); }
.date-tab.all { min-width: 0; }
.purpose-section { margin: 3px 0 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.purpose-section > strong { display: block; margin-bottom: 8px; font-size: 16px; }
.purpose-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.purpose-chip { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: #4f5954; background: #f5f6f3; font-size: 15px; font-weight: 750; cursor: pointer; }
.purpose-chip.active { border-color: var(--ink); color: var(--ink); background: var(--accent); }

.view { display: none; }
.view.active { display: block; }
.section-header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 2px 10px; }
.section-header p { display: none; }
.section-header h1 { margin: 0; font-size: clamp(22px, 6vw, 32px); line-height: 1.1; letter-spacing: -.04em; }
.section-header > strong { color: var(--ink); font-size: 17px; white-space: nowrap; }
.text-button { min-height: 42px; padding: 0 10px; border: 0; background: transparent; font-size: 16px; font-weight: 750; cursor: pointer; }
.text-button:disabled { opacity: .58; cursor: default; }
.text-button.danger { color: var(--red); }
.calendar-hint { margin: -3px 2px 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }

.agenda { overflow: hidden; border: 1px solid var(--line-strong); border-top: 2px solid var(--ink); border-radius: 12px; background: var(--surface); }
.agenda-head { position: sticky; top: 137px; z-index: 55; display: grid; grid-template-columns: 72px minmax(0,1fr) 48px; min-height: 34px; align-items: center; padding: 0 5px; color: var(--muted); border-bottom: 1px solid var(--line-strong); background: rgba(246,247,243,.97); font-size: 14px; font-weight: 800; }
.agenda-head span:last-child { text-align: center; }
.day-group + .day-group { margin-top: 12px; }
.day-divider { position: sticky; top: 171px; z-index: 50; display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 10px; border-bottom: 1px solid var(--line-strong); background: rgba(246,247,243,.97); backdrop-filter: blur(8px); }
.day-divider strong { font-size: 18px; }
.day-divider span { color: var(--muted); font-size: 15px; }
.agenda-row { display: grid; grid-template-columns: 72px minmax(0,1fr) 48px; min-height: 106px; border-bottom: 1px solid var(--line); border-left: 5px solid var(--event-color); background: var(--surface); }
.agenda-row:last-child { border-bottom: 0; }
.agenda-row:nth-child(even) { background: #fafbf8; }
.agenda-row.selected { background: #f3ffd0; }
.agenda-time { padding: 14px 7px 10px; border-right: 1px solid var(--line); }
.agenda-time strong, .agenda-time span { display: block; }
.agenda-time strong { font: 900 19px/1 monospace; letter-spacing: -.03em; }
.agenda-time span { margin-top: 7px; color: var(--muted); font: 700 15px/1 monospace; }
.agenda-main { min-width: 0; padding: 12px 10px; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.agenda-main > strong, .agenda-main > span { display: block; }
.agenda-main > strong { font-size: 19px; line-height: 1.32; letter-spacing: -.02em; }
.agenda-place { margin-top: 7px; overflow: hidden; color: #535e58; font-size: 16px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.agenda-status { margin-top: 5px; color: var(--green); font-size: 15px; font-weight: 750; }
.agenda-select { align-self: center; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: var(--surface); font-size: 25px; line-height: 1; cursor: pointer; }
.agenda-row.selected .agenda-select { border-color: var(--ink); background: var(--accent); }
.select-button { position: absolute; top: 13px; right: 12px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--ink); background: #f8f9f6; font-size: 25px; line-height: 1; cursor: pointer; }
.pill { display: inline-flex; align-items: center; min-height: 25px; padding: 2px 8px; border-radius: 999px; color: #4f5954; background: #eef0ec; font-size: 14px; }
.calendar-scroll { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.calendar-shell { display: grid; grid-template-columns: 58px max-content; min-width: 100%; height: var(--calendar-h); }
.calendar-axis { position: sticky; left: 0; z-index: 20; width: 58px; height: var(--calendar-h); border-right: 1px solid var(--line-strong); background: rgba(246,247,243,.98); }
.calendar-axis span { position: absolute; right: 8px; transform: translateY(-7px); color: #4f5853; font: 800 14px/1 monospace; }
.calendar-events { position: relative; width: max(calc(min(100vw, 1120px) - 84px), calc(var(--lanes) * 196px)); max-width: none; height: var(--calendar-h); background-color: var(--surface); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 37px, #edf0ec 38px, transparent 39px, transparent 75px, #cfd5d1 76px); }
.calendar-event { position: absolute; top: var(--top); left: calc(var(--lane) * (100% / var(--lanes)) + 4px); width: calc(100% / var(--lanes) - 8px); height: var(--height); min-height: 52px; overflow: hidden; padding: 9px 38px 8px 10px; border: 1px solid color-mix(in srgb,var(--event-color),#777 40%); border-left: 5px solid var(--event-color); border-radius: 10px; background: color-mix(in srgb,var(--event-color),white 90%); box-shadow: 0 2px 5px rgba(23,29,26,.08); }
.calendar-event.selected { border-color: var(--ink); background: #f0ffbc; box-shadow: 2px 2px 0 var(--ink); }
.calendar-event time, .calendar-event > strong, .calendar-event > span { position: relative; z-index: 2; display: block; pointer-events: none; }
.calendar-event time { margin-bottom: 4px; color: var(--event-color); font-size: 14px; font-weight: 850; }
.calendar-event > strong { display: -webkit-box; overflow: hidden; font-size: 17px; line-height: 1.25; letter-spacing: -.02em; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.calendar-event > span { margin-top: 5px; overflow: hidden; color: #56615b; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-detail { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; }
.calendar-add { position: absolute; top: 7px; right: 6px; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: white; font-size: 20px; font-weight: 800; cursor: pointer; }
.calendar-event.selected .calendar-add { border-color: var(--ink); background: var(--accent); }
.week-chooser { padding: 12px; }
.week-chooser > p { margin: 2px 0 12px; color: var(--muted); font-size: 16px; }
.week-chooser button { width: 100%; min-height: 68px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.week-chooser button strong, .week-chooser button span { display: block; }
.week-chooser button strong { font-size: 18px; }
.week-chooser button span { grid-column: 1; margin-top: 5px; color: var(--muted); font-size: 15px; }
.week-chooser button b { grid-column: 2; grid-row: 1/3; color: var(--green); font-size: 15px; }
.timeline-day-group + .timeline-day-group { margin-top: 18px; }
.timeline-day { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 12px; border-bottom: 1px solid var(--line-strong); background: #f0f2ed; }
.timeline-day strong { font-size: 18px; }
.timeline-day span { color: var(--muted); font-size: 15px; }
.timeline-slot { display: grid; grid-template-columns: 64px minmax(0,1fr); border-bottom: 1px solid var(--line); }
.timeline-slot:last-child { border-bottom: 0; }
.timeline-time { position: relative; padding: 15px 6px 0 8px; border-right: 1px solid var(--line-strong); background: #fafbf8; }
.timeline-time::after { content: ""; position: absolute; top: 20px; right: -5px; width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; background: var(--accent); }
.timeline-time strong, .timeline-time span { display: block; }
.timeline-time strong { font: 900 17px/1 monospace; }
.timeline-time span { margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.3; }
.decision-stack { min-width: 0; padding: 8px 8px 8px 12px; }
.decision-card { position: relative; padding: 12px; border: 1px solid var(--line); border-left: 5px solid var(--event-color); border-radius: 12px; background: var(--surface); }
.decision-card + .decision-card { margin-top: 8px; }
.decision-card.selected { border-color: var(--ink); background: #f5ffd6; box-shadow: 2px 2px 0 var(--ink); }
.decision-card.main-event { border-left-color: var(--ink); background: linear-gradient(135deg,#f5ffd6 0,#fff 58%); }
.decision-card header { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.decision-card header span { min-height: 24px; display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; color: #4e5953; background: #eef0ec; font-size: 13px; font-weight: 750; }
.decision-card header .main-badge, .inline-main-badge { color: var(--ink); background: var(--accent); font-weight: 900; }
.inline-main-badge { display: inline-flex; margin-right: 6px; padding: 2px 6px; border-radius: 6px; font-size: 13px; vertical-align: 2px; }
.list-row.main-event { background: linear-gradient(135deg,#f5ffd6 0,#fff 66%); }
.decision-main { width: 100%; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.decision-main strong, .decision-main span { display: block; }
.decision-main strong { font-size: 19px; line-height: 1.32; letter-spacing: -.02em; }
.decision-summary { display: -webkit-box !important; margin-top: 6px; overflow: hidden; color: #46504b; font-size: 15px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.decision-benefit { margin: 9px 0 0; padding: 8px 9px; border-radius: 8px; color: #344039; background: #eff5e0; font-size: 15px; line-height: 1.45; }
.decision-benefit b { color: var(--green); }
.decision-registration { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.status-badge { min-height: 25px; display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; color: #334039; background: #edf0ec; font-size: 13px; font-weight: 800; }
.status-badge.people { color: #174d37; background: #dff3e8; }
.status-badge.spots { color: #234b7d; background: #e4efff; }
.status-badge.low { color: #68460d; background: #fff0c3; }
.status-badge.urgent, .status-badge.soldout { color: white; background: var(--red); }
.status-badge.waitlist { color: #503478; background: #eee4ff; }
.status-badge.unknown { color: #5d6661; background: #eef0ee; }
.decision-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 9px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.decision-meta .geo-ok { color: var(--green); font-weight: 750; }
.decision-meta .geo-missing { color: var(--red); font-weight: 750; }
.decision-meta .geo-online { color: var(--blue); font-weight: 750; }
.decision-add { width: 100%; min-height: 40px; margin-top: 10px; border: 1px solid var(--ink); border-radius: 9px; color: var(--ink); background: var(--surface); font-size: 16px; font-weight: 850; cursor: pointer; }
.decision-card.selected .decision-add { background: var(--accent); }
.empty-state { padding: 76px 24px; color: var(--muted); text-align: center; }
.empty-state > span { width: 46px; height: 46px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--accent); font-size: 30px; }
.empty-state h2 { margin: 14px 0 6px; color: var(--ink); font-size: 22px; }
.empty-state p { max-width: 340px; margin: 0 auto; font-size: 16px; line-height: 1.6; }

.event-list { border-top: 2px solid var(--ink); }
.list-date { position: sticky; top: 139px; z-index: 50; padding: 11px 4px 8px; border-bottom: 1px solid var(--line-strong); background: rgba(246,247,243,.97); font-size: 17px; font-weight: 800; }
.list-row { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr) 38px; gap: 10px; align-items: center; min-height: 92px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-row time { align-self: start; padding-top: 3px; font: 800 16px/1.3 monospace; }
.list-row h2 { margin: 0; font-size: 18px; line-height: 1.35; }
.list-row p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.list-attendance { display: block; margin-top: 6px; color: var(--green); font-size: 14px; font-weight: 800; line-height: 1.4; }
.list-row .row-detail { position: absolute; inset: 0 50px 0 0; z-index: 1; border: 0; background: transparent; cursor: pointer; }
.list-row .select-button { position: static; }

.map-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.map-route-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-bottom: 8px; overflow: hidden; border: 1px solid var(--ink); border-radius: 13px; color: var(--ink); background: var(--ink); }
.map-route-summary > div:not(.map-summary-empty) { min-height: 69px; padding: 10px; background: var(--accent); }
.map-route-summary span, .map-route-summary strong { display: block; }
.map-route-summary span { font-size: 13px; font-weight: 750; }
.map-route-summary strong { margin-top: 5px; font-size: 21px; letter-spacing: -.04em; }
.map-route-summary > p { grid-column: 1/-1; margin: 0; padding: 8px 10px; color: white; background: var(--ink); font-size: 14px; }
.map-summary-empty { grid-column: 1/-1; min-height: 66px; padding: 11px 13px; background: var(--surface); }
.map-summary-empty strong { font-size: 18px; }
.map-summary-empty span { margin-top: 5px; color: var(--muted); font-size: 15px; }
.map-header-actions { display: flex; align-items: center; gap: 4px; }
.map-route-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 8px; }
.map-route-controls label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.map-route-controls label span { flex: 0 0 auto; color: var(--muted); font-size: 14px; font-weight: 750; }
.map-route-controls select { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 16px; font-weight: 750; }
.map-route-controls select:disabled { color: #8a928e; }
.map-legend { display: none; }
#map { width: 100%; height: min(58vh, 570px); min-height: 430px; background: #e5e9e3; }
.map-status { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 15px; }
.map-status span { color: var(--muted); }
.map-status button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; color: var(--ink); background: var(--accent); font-size: 15px; font-weight: 800; cursor: pointer; }
.compact-list { margin-top: 12px; }
.compact-event { display: grid; grid-template-columns: 54px minmax(0,1fr) 34px; gap: 9px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.compact-event time { font: 800 15px monospace; }
.compact-event strong { font-size: 16px; line-height: 1.35; }
.compact-event small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; }
.compact-event button { width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); font-size: 23px; cursor: pointer; }
.compact-event button.active { background: var(--accent); border-color: var(--ink); }
.map-legs { margin-top: 16px; }
.map-legs > h2 { margin: 0 0 9px; font-size: 22px; }
.map-leg { position: relative; padding: 13px 13px 13px 50px; border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 13px; background: var(--surface); }
.map-leg + .map-leg { margin-top: 8px; }
.map-leg > b { position: absolute; top: 13px; left: 10px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--ink); background: var(--accent); font-size: 13px; }
.map-leg div strong { display: block; overflow: hidden; font-size: 16px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.map-leg div > span { display: block; height: 15px; color: var(--muted); font-size: 14px; }
.map-leg p { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 9px 0 0; color: var(--muted); font-size: 15px; }
.map-leg mark { padding: 3px 7px; border-radius: 999px; color: white; background: var(--green); font-size: 14px; font-weight: 850; }
.map-leg.tight { border-left-color: #e59a2a; }
.map-leg.tight mark { color: var(--ink); background: #ffbd59; }
.map-leg.bad { border-left-color: var(--red); }
.map-leg.bad mark { background: var(--red); }
.map-leg.unknown { border-left-color: #7c8580; }
.map-leg em { display: block; margin-top: 8px; color: var(--red); font-size: 15px; font-style: normal; }
.map-leg a { display: inline-block; margin-top: 9px; color: var(--blue); font-size: 15px; font-weight: 800; text-decoration: none; }

.route-sheet { display: none; }
body.route-active #routeView.active { position: fixed; inset: 66px 0 calc(66px + env(safe-area-inset-bottom)); z-index: 900; width: auto; margin: 0; padding: 0; overflow: hidden; background: #e5e9e3; }
body.route-active #routeView .section-header { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 600; min-height: 48px; padding: 5px 6px 5px 12px; border: 1px solid rgba(23,29,26,.18); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 7px 24px rgba(23,29,26,.14); backdrop-filter: blur(12px); }
body.route-active #routeView .section-header h1 { font-size: 20px; }
body.route-active #routeView .section-header .text-button { min-height: 38px; padding-inline: 9px; border-radius: 9px; background: #eef0ec; font-size: 14px; }
body.route-active #routeView .map-route-summary { position: absolute; top: 66px; left: 10px; right: 10px; z-index: 590; margin: 0; border: 0; border-radius: 12px; box-shadow: 0 7px 24px rgba(23,29,26,.14); }
body.route-active #routeView .map-route-summary > div:not(.map-summary-empty) { min-height: 48px; padding: 7px 10px; }
body.route-active #routeView .map-route-summary strong { margin-top: 2px; font-size: 18px; }
body.route-active #routeView .map-route-summary > p { display: none; }
body.route-active #routeView .map-summary-empty { min-height: 48px; padding: 7px 11px; }
body.route-active #routeView .map-summary-empty strong { font-size: 16px; }
body.route-active #routeView .map-summary-empty span { margin-top: 2px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
body.route-active #routeView .map-route-controls { position: absolute; top: 122px; left: 10px; right: 10px; z-index: 580; gap: 6px; margin: 0; }
body.route-active #routeView .map-route-controls label { min-height: 52px; flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; padding: 5px 8px; border-color: rgba(23,29,26,.18); background: rgba(255,255,255,.94); box-shadow: 0 5px 18px rgba(23,29,26,.1); backdrop-filter: blur(12px); }
body.route-active #routeView .map-route-controls select { font-size: 15px; }
body.route-active #routeView .map-legend { position: absolute; top: 182px; left: 10px; z-index: 575; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(23,29,26,.14); border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(23,29,26,.09); backdrop-filter: blur(10px); }
.map-legend b { color: #46504b; font-size: 13px; font-weight: 750; }
.legend-venue, .legend-selected { width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: var(--green); box-shadow: 0 0 0 1px var(--green); font: 900 12px/1 monospace; }
.legend-selected { margin-left: 5px; background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
body.route-active #routeView .map-card { position: absolute; inset: 0; display: block; border: 0; border-radius: 0; box-shadow: none; }
body.route-active #routeView #map { height: 100%; min-height: 0; }
body.route-active #routeView .map-status { display: none; }
.route-sheet { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 650; display: block; max-height: 66px; overflow: hidden; border: 1px solid rgba(23,29,26,.22); border-radius: 17px; background: rgba(255,255,255,.97); box-shadow: 0 -8px 30px rgba(23,29,26,.18); transition: max-height .22s ease; backdrop-filter: blur(15px); }
.route-sheet.open { max-height: min(55vh,560px); }
.route-sheet-toggle { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.route-sheet-toggle span, .route-sheet-toggle strong, .route-sheet-toggle small { min-width: 0; display: block; }
.route-sheet-toggle strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.route-sheet-toggle small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.route-sheet-toggle b { flex: 0 0 auto; min-width: 54px; min-height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--accent); font-size: 14px; }
.route-sheet-body { max-height: calc(min(55vh,560px) - 64px); overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 12px; border-top: 1px solid var(--line); }
.route-sheet:not(.open) .route-sheet-body { display: none; }
.route-sheet .map-legs { margin-top: 10px; }
.route-sheet .map-legs > h2 { font-size: 17px; }
.route-sheet-empty { padding: 17px 5px 8px; color: var(--muted); font-size: 15px; line-height: 1.5; text-align: center; }

.route-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.route-controls label { display: block; }
.route-controls label span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 14px; font-weight: 700; }
.route-controls select { width: 100%; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fafbf8; font-size: 17px; }
.route-controls > button { grid-column: 1/-1; min-height: 44px; border: 1px solid var(--ink); border-radius: 10px; background: var(--accent); font-size: 17px; font-weight: 800; cursor: pointer; }
.estimate-note { margin: 10px 2px 18px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.route-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-bottom: 10px; overflow: hidden; border: 1px solid var(--ink); border-radius: 14px; background: var(--ink); }
.summary-stat { min-height: 76px; padding: 11px 9px; background: var(--accent); }
.summary-stat span, .summary-stat strong { display: block; }
.summary-stat span { font-size: 14px; font-weight: 700; }
.summary-stat strong { margin-top: 7px; font-size: 22px; letter-spacing: -.04em; }
.route-summary > p { grid-column: 1/-1; margin: 0; padding: 9px 11px; color: white; background: var(--ink); font-size: 14px; line-height: 1.45; }
.summary-empty { grid-column: 1/-1; min-height: 72px; display: flex; flex-direction: column; justify-content: center; padding: 12px 14px; background: var(--surface); }
.summary-empty strong { font-size: 20px; }
.summary-empty span { margin-top: 4px; color: var(--muted); font-size: 15px; }
.itinerary { list-style: none; margin: 0; padding: 0; }
.itinerary-item { position: relative; padding-left: 38px; }
.itinerary-item::before { content: attr(data-order); position: absolute; top: 14px; left: 0; width: 27px; height: 27px; z-index: 2; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--accent); font: 800 13px monospace; }
.itinerary-item:not(:last-child)::after { content: ""; position: absolute; top: 42px; bottom: -4px; left: 13px; border-left: 2px dashed var(--line-strong); }
.itinerary-card { position: relative; padding: 14px 44px 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.itinerary-card time { color: var(--green); font-size: 15px; font-weight: 800; }
.itinerary-card h2 { margin: 5px 0; font-size: 19px; line-height: 1.35; }
.itinerary-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.itinerary-attendance { display: block; margin-top: 8px; color: var(--green); font-size: 14px; font-weight: 800; line-height: 1.4; }
.remove-event { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; color: var(--muted); background: transparent; font-size: 24px; cursor: pointer; }
.leg { margin: 8px 0 8px 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: #ecefea; font-size: 15px; line-height: 1.45; }
.leg strong { display: block; margin: 0 74px 4px 0; font-size: 16px; }
.leg a { color: var(--blue); font-weight: 750; text-decoration: none; }
.feasibility { float: right; min-width: 58px; padding: 4px 7px; border-radius: 999px; text-align: center; font-size: 14px; font-weight: 850; }
.feasibility.good { color: #fff; background: var(--green); }
.feasibility.tight { color: #241408; background: #ffb95d; }
.feasibility.bad { color: #fff; background: var(--red); }
.feasibility.unknown { color: #fff; background: #66716b; }

.bottom-nav { position: fixed; inset: auto 0 0; z-index: 1100; min-height: calc(66px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,1fr); padding: 6px 8px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(18px); }
.nav-item { position: relative; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; font-size: 14px; font-weight: 750; cursor: pointer; }
.nav-item > span { font-size: 24px; line-height: 1; }
.nav-item.active { color: var(--ink); background: var(--accent); }
.nav-item i { position: absolute; top: 4px; right: calc(50% - 25px); min-width: 19px; height: 19px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; color: white; background: var(--red); font-size: 12px; font-style: normal; }
.route-bar { position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 1090; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 13px; border: 2px solid var(--ink); border-radius: 15px; color: var(--ink); background: var(--accent); box-shadow: 0 8px 24px rgba(23,29,26,.2); text-align: left; cursor: pointer; }
.route-bar[hidden] { display: none; }
.route-bar span, .route-bar strong, .route-bar small { display: block; }
.route-bar strong { font-size: 18px; }
.route-bar small { margin-top: 3px; font-size: 14px; }
.route-bar b { font-size: 16px; white-space: nowrap; }

.event-dialog { width: 100%; max-width: 620px; max-height: 88vh; margin: auto 0 0; padding: 0; color: var(--ink); border: 0; border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: 0 -20px 80px rgba(0,0,0,.22); }
.event-dialog::backdrop { background: rgba(16,22,19,.55); backdrop-filter: blur(3px); }
.x-share-dialog { max-height: 92dvh; }
.x-share-body { padding: 24px 20px max(24px,env(safe-area-inset-bottom)); }
.x-share-body h2 { margin: 0 48px 16px 0; font-size: 26px; }
.x-share-body p { font-size: 16px; line-height: 1.6; }
.x-share-body label { display: block; font-size: 18px; font-weight: 700; margin: 16px 0 8px; }
.x-share-body textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; font-size: 18px; line-height: 1.5; color: var(--ink); background: var(--surface); resize: vertical; }
.x-share-body small { display: block; font-size: 16px; margin-top: 6px; }
.x-share-body details { margin: 16px 0; }
.x-share-body summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-size: 18px; }
.x-share-body img { width: 100%; max-width: 340px; height: auto; display: block; margin: auto; border-radius: 12px; }
.x-share-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.x-share-tools button,.x-share-tools a,#xNativeShareBtn { min-height: 48px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.x-share-tools button { background: var(--surface); color: var(--ink); }
.x-share-tools button:disabled,.x-share-tools a[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
#xNativeShareBtn { width: 100%; }
#xShareStatus { border-left: 3px solid #619500; padding-left: 12px; }
.sheet-handle { width: 42px; height: 5px; margin: 9px auto 0; border-radius: 99px; background: var(--line-strong); }
.dialog-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); font-size: 27px; cursor: pointer; }
.dialog-body { padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); }
.dialog-body .dialog-time { margin: 0 48px 6px 0; color: var(--green); font-size: 16px; font-weight: 850; }
.dialog-body h2 { margin: 0 45px 8px 0; font-size: 27px; line-height: 1.22; letter-spacing: -.035em; }
.dialog-body > p { margin: 0; color: var(--muted); font-size: 16px; }
.dialog-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }
.dialog-body dl { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 11px; margin: 0; padding: 15px 0; border-block: 1px solid var(--line); font-size: 16px; line-height: 1.45; }
.dialog-body dt { color: var(--muted); }
.dialog-body dd { margin: 0; overflow-wrap: anywhere; }
.dialog-insight { margin: 15px 0 0; padding: 13px; border-radius: 12px; background: #eff5e0; }
.dialog-insight strong, .dialog-insight b { display: block; color: var(--green); font-size: 15px; }
.dialog-insight b { margin-top: 10px; }
.dialog-insight p { margin: 4px 0 0; color: #344039; font-size: 16px; line-height: 1.55; }
.registration-panel { margin: 13px 0; overflow: hidden; border: 1px solid var(--ink); border-radius: 13px; background: #f6f8f4; }
.registration-panel > header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; color: white; background: var(--ink); }
.registration-panel header span, .registration-panel header h3 { display: block; margin: 0; }
.registration-panel header span { color: var(--accent); font: 800 12px/1.2 monospace; letter-spacing: .05em; }
.registration-panel header h3 { margin-top: 2px; font-size: 19px; }
.registration-state { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--ink); background: var(--accent); font-size: 13px; }
.registration-state.low { color: #4f3408; background: #ffc966; }
.registration-state.closed { color: white; background: var(--red); }
.registration-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.registration-stats > div { min-height: 60px; padding: 9px 10px; background: var(--surface); }
.registration-stats span, .registration-stats strong { display: block; }
.registration-stats span { color: var(--muted); font-size: 13px; }
.registration-stats strong { margin-top: 4px; font-size: 17px; }
.capacity-meter { height: 8px; overflow: hidden; background: #dfe4df; }
.capacity-meter i { height: 100%; display: block; background: var(--green); }
.registration-extra { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 10px 3px; }
.registration-extra span { padding: 4px 7px; border-radius: 999px; color: #344039; background: #e6ebe7; font-size: 13px; font-weight: 800; }
.registration-panel > p { margin: 0; padding: 6px 10px 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.original-description { margin-top: 13px; border: 1px solid var(--line); border-radius: 10px; }
.original-description summary { padding: 11px; font-size: 16px; font-weight: 750; cursor: pointer; }
.original-description p { margin: 0; padding: 0 11px 12px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.dialog-actions a, .dialog-actions button { min-height: 48px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--surface); font-size: 16px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.dialog-actions .primary { grid-column: 1/-1; background: var(--accent); }
.source-stamp { margin: 13px 0 0 !important; padding: 9px 11px; border-radius: 9px; color: #46504b !important; background: #f0f2ee; font-size: 14px !important; }

.recommend-header { align-items: center; }
.data-freshness { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 13px; font-weight: 750; white-space: nowrap; }
.data-health { margin: 0 0 10px; overflow: hidden; border: 1px solid #b9d9c6; border-radius: 13px; background: #f2fbf5; }
.data-health summary { min-height: 58px; display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 11px; cursor: pointer; list-style: none; }
.data-health summary::-webkit-details-marker { display: none; }
.data-health summary span, .data-health summary strong, .data-health summary small { display: block; }
.data-health summary strong { font-size: 16px; }
.data-health summary small { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.data-health summary > b { color: var(--green); font-size: 14px; }
.data-health-dot { width: 10px; height: 10px; border-radius: 50%; background: #18a466; box-shadow: 0 0 0 4px rgba(24,164,102,.13); }
.data-health.partial { border-color: #e2c36b; background: #fff9e8; }
.data-health.partial .data-health-dot { background: #d89516; box-shadow: 0 0 0 4px rgba(216,149,22,.14); }
.data-health.warning { border-color: #e2a29d; background: #fff1ef; }
.data-health.warning .data-health-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(190,64,64,.14); }
.data-health-body { padding: 0 11px 11px 33px; }
.data-health-body dl { margin: 0; border-top: 1px solid rgba(23,29,26,.12); }
.data-health-body dl > div { display: grid; grid-template-columns: 106px minmax(0,1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(23,29,26,.1); font-size: 14px; line-height: 1.4; }
.data-health-body dt { color: var(--muted); }
.data-health-body dd { margin: 0; font-weight: 750; text-align: right; }
.data-health-body p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.recommend-lead { margin: -4px 0 13px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.recommend-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.recommend-form > label { min-width: 0; }
.recommend-form > label > span, .recommend-location > span { display: block; margin: 0 0 5px 2px; color: var(--muted); font-size: 13px; font-weight: 800; }
.recommend-form select, .recommend-form input { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fafbf8; font-size: 16px; }
.recommend-location { grid-column: 1/-1; }
.recommend-location button { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 11px; background: #f6f8f4; text-align: left; cursor: pointer; }
.recommend-location button > b { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--blue); }
.recommend-location button span, .recommend-location button strong, .recommend-location button small { display: block; }
.recommend-location button strong { font-size: 16px; }
.recommend-location button small { margin-top: 2px; color: var(--muted); font-size: 13px; }
.recommend-location button.active { border-color: var(--blue); background: #edf3ff; }
.recommend-submit { grid-column: 1/-1; min-height: 49px; border: 2px solid var(--ink); border-radius: 11px; background: var(--accent); font-size: 17px; font-weight: 900; cursor: pointer; }
.recommend-results { margin-top: 17px; }
.recommend-result-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.recommend-result-head p, .recommend-result-head h2 { margin: 0; }
.recommend-result-head p { color: var(--green); font: 800 13px/1.2 monospace; letter-spacing: .06em; }
.recommend-result-head h2 { margin-top: 4px; font-size: 21px; }
.recommend-result-head > span { color: var(--muted); font-size: 13px; text-align: right; }
.recommend-empty { padding: 22px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; }
.recommend-empty p { margin: 7px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.route-option { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--ink); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
.route-option > header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; color: white; background: var(--ink); }
.route-option header span { color: var(--accent); font-size: 13px; font-weight: 850; }
.route-option header h3 { margin: 2px 0 0; font-size: 21px; }
.route-option header > strong { color: var(--accent); font-size: 16px; }
.conditional-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #4a3510; background: #fff1c7; border-bottom: 1px solid #ead499; font-size: 13px; line-height: 1.35; }
.conditional-banner b { flex: 0 0 auto; padding: 3px 6px; border-radius: 999px; color: white; background: #9a6713; font-size: 12px; }
.route-option-stats { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); background: #f1f3ef; }
.route-option-stats span { min-width: 0; padding: 9px 7px; color: var(--muted); border-right: 1px solid var(--line); font-size: 12px; text-align: center; }
.route-option-stats span:last-child { border-right: 0; }
.route-option-stats b { display: block; overflow: hidden; margin-bottom: 2px; color: var(--ink); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.route-option ol { list-style: none; margin: 0; padding: 5px 13px; }
.route-option li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.route-option li:last-child { border-bottom: 0; }
.route-option li i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--accent); font: 900 13px/1 monospace; }
.route-option li time, .route-option li strong, .route-option li small { display: block; }
.route-option li time { color: var(--green); font-size: 13px; font-weight: 850; }
.route-option li time em { display: inline-block; margin-left: 4px; padding: 2px 5px; border-radius: 999px; color: #704b0e; background: #fff1c7; font-size: 11px; font-style: normal; }
.route-option li strong { margin-top: 2px; font-size: 16px; line-height: 1.35; }
.route-option li small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.route-option li .route-attendance { color: var(--green); font-weight: 800; }
.route-option-note { margin: 0; padding: 8px 13px; color: var(--muted); background: #f6f8f4; font-size: 13px; line-height: 1.4; }
.route-option-actions { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 7px; padding: 10px; }
.route-option-actions button { min-height: 43px; border: 1px solid var(--ink); border-radius: 10px; background: white; font-size: 14px; font-weight: 850; cursor: pointer; }
.route-option-actions .primary { background: var(--accent); }
.route-option-actions .share-x,
.share-actions .share-x { background: var(--ink); color: white; }
.share-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 8px 0 0; }
.visit-editor { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.visit-editor summary { cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1.6; }
.visit-editor p { font-size: 16px; line-height: 1.5; }
.visit-editor form { display: grid; gap: 10px; }
.visit-editor label { display: grid; gap: 5px; font-size: 16px; }
.visit-editor input { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px; font-size: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.visit-editor button { min-height: 44px; border: 1px solid var(--ink); border-radius: 8px; background: var(--accent); font-size: 16px; font-weight: 700; cursor: pointer; }
.visit-editor [role="alert"] { margin: 0; color: #a32222; }
.share-actions button { min-height: 45px; border: 1px solid var(--ink); border-radius: 11px; background: var(--surface); font-size: 16px; font-weight: 800; cursor: pointer; }
.route-identity { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 9px 0; padding: 13px 14px; border: 1px solid var(--ink); border-radius: 14px; color: white; background: var(--ink); }
.route-identity div > span, .shared-route-banner div > span { display: block; color: var(--accent); font: 850 12px/1.2 monospace; letter-spacing: .08em; }
.route-identity strong, .route-identity small { display: block; }
.route-identity strong { margin-top: 3px; font-size: 19px; }
.route-identity small { margin-top: 4px; color: #cbd2cd; font-size: 13px; }
.route-identity p { flex: 0 0 116px; margin: 0; color: var(--accent); font-size: 14px; font-weight: 850; line-height: 1.35; text-align: right; }
.shared-route-banner { margin-bottom: 10px; padding: 14px; border: 2px solid var(--green); border-radius: 15px; background: #eff8e7; }
.shared-route-banner strong, .shared-route-banner small { display: block; }
.shared-route-banner strong { margin-top: 4px; font-size: 19px; }
.shared-route-banner small { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.shared-route-banner > div:last-child { display: grid; grid-template-columns: 1.2fr 1fr; gap: 7px; margin-top: 11px; }
.shared-route-banner button { min-height: 42px; border: 1px solid var(--ink); border-radius: 10px; background: white; font-size: 14px; font-weight: 850; }
.shared-route-banner button:first-child { background: var(--accent); }
@media (max-width: 390px) { .route-identity { align-items: flex-start; flex-direction: column; } .route-identity p { flex: none; text-align: left; } }
.data-notice { margin-bottom: 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); text-align: left; }
.data-notice summary { color: var(--ink); font-weight: 800; cursor: pointer; }
.data-notice p { margin-top: 8px; }

.toast { position: fixed; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 2000; max-width: calc(100% - 32px); transform: translate(-50%, 12px); padding: 11px 15px; border-radius: 999px; color: white; background: rgba(23,29,26,.94); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .2s; font-size: 16px; white-space: nowrap; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
footer { width: min(100%,1120px); margin: 0 auto; padding: 0 14px 94px; color: var(--muted); font-size: 14px; line-height: 1.5; }
footer p { margin: 4px 0; }
footer a { font-weight: 700; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { color: var(--ink); background: var(--surface); }
.leaflet-popup-content { margin: 13px; }
.map-popup time { color: var(--green); font-size: 14px; font-weight: 800; }
.map-popup h3 { margin: 5px 0; font-size: 17px; line-height: 1.3; }
.map-popup p { margin: 0 0 9px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.map-popup button { width: 100%; min-height: 36px; border: 0; border-radius: 8px; background: var(--accent); font-size: 15px; font-weight: 800; cursor: pointer; }
.venue-popup header { padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.venue-popup header strong, .venue-popup header small { display: block; }
.venue-popup header strong { font-size: 17px; line-height: 1.35; }
.venue-popup header small { margin-top: 3px; color: var(--muted); font-size: 14px; }
.venue-events { max-height: 238px; overflow-y: auto; overscroll-behavior: contain; }
.venue-events article { display: grid; grid-template-columns: minmax(0,1fr) 36px; gap: 7px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.venue-events article:last-child { border-bottom: 0; }
.venue-popup .venue-event-main { min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.venue-event-main time, .venue-event-main strong, .venue-event-main small { display: block; }
.venue-event-main strong { margin-top: 3px; overflow: hidden; color: var(--ink); font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.venue-event-main small { margin-top: 3px; overflow: hidden; color: var(--green); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.venue-popup .venue-event-add { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid var(--line-strong); background: var(--surface); font-size: 20px; }
.venue-popup .venue-event-add.active { border-color: var(--ink); background: var(--accent); }
.event-marker { border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 2px var(--marker), 0 3px 10px rgba(0,0,0,.25); background: var(--marker); }
.event-marker.numbered { display: grid; place-items: center; color: white; font: 900 15px/1 monospace; }
.venue-marker { display: grid; place-items: center; border: 3px solid white; border-radius: 50%; color: white; background: var(--marker); box-shadow: 0 0 0 2px var(--marker), 0 4px 12px rgba(0,0,0,.27); font: 900 13px/1 monospace; transition: transform .15s ease; }
.venue-marker:hover { transform: scale(1.12); }
.venue-marker.selected { color: var(--ink); background: var(--accent); box-shadow: 0 0 0 3px var(--ink), 0 5px 16px rgba(0,0,0,.3); font-size: 12px; }
.route-tooltip { padding: 4px 7px; color: white; border: 0; border-radius: 7px; background: rgba(23,29,26,.9); box-shadow: none; font-size: 13px; font-weight: 800; }
.route-tooltip::before { display: none; }

@media (min-width: 760px) {
  .app-header { padding-inline: 24px; }
  .app-shell { padding: 18px 22px 110px; }
  .date-section { margin-inline: -4px; padding-inline: 4px; }
  .date-rail { grid-template-columns: repeat(9,minmax(0,1fr)); }
  .search-panel { grid-template-columns: minmax(0, 1fr) 100px; }
  .agenda, .event-list { border: 1px solid var(--line-strong); border-top: 2px solid var(--ink); border-radius: 12px; background: var(--surface); }
  .timeline-slot { grid-template-columns: 86px minmax(0,1fr); }
  .decision-stack { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .decision-card + .decision-card { margin-top: 0; }
  .agenda-head, .agenda-row { grid-template-columns: 92px minmax(0,1fr) 58px; }
  .agenda-time { padding-left: 14px; }
  .agenda-main { padding-inline: 16px; }
  .map-card { display: grid; grid-template-columns: minmax(0,1fr) 230px; }
  .map-status { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 20px; }
  .map-status button { min-height: 42px; }
  .route-controls { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .route-controls > button { grid-column: auto; min-width: 120px; }
  .recommend-form { grid-template-columns: 1.3fr 1.3fr .8fr .8fr 1fr .8fr; }
  .recommend-location { grid-column: 1/4; }
  .recommend-submit { grid-column: 4/-1; align-self: end; }
  .recommend-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .recommend-result-head { grid-column: 1/-1; }
  .route-option { margin-bottom: 0; }
  .event-dialog { margin: auto; border-radius: 24px; }
  .bottom-nav { left: 50%; right: auto; bottom: 14px; width: 430px; min-height: 64px; padding: 5px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
  .route-bar { left: 50%; right: auto; bottom: 86px; width: 430px; transform: translateX(-50%); }
  footer { padding-bottom: 105px; text-align: center; }
}

@media (min-width: 1020px) {
  .agenda-row { min-height: 100px; }
  .compact-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}
/* Editorial examples remain readable without nested scrolling. */
.route-cases{margin:24px 0 32px}.route-cases h2{font-size:26px}.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.case-choice{display:flex;flex-direction:column;gap:10px;text-align:left;padding:20px;border:1px solid #c4d4c9;border-radius:16px;background:#fff;color:#193d2d;min-width:0}.case-choice strong{font-size:22px}.case-choice small{line-height:1.6;font-size:16px}.case-choice[aria-pressed=true]{background:#eaf7dd;border:2px solid #278354}.route-cases summary{cursor:pointer;padding:12px 0}.case-notice{background:#fff5d9;padding:16px;border-radius:12px;line-height:1.7}#routeCaseDetail{margin-top:20px;padding:24px;border:1px solid #becfc3;border-radius:18px;background:#fff;overflow-wrap:anywhere}#routeCaseDetail p{line-height:1.7}.case-stops{list-style:none;padding:0}.case-stops li{padding:20px 0;border-top:1px solid #dce5de}.case-stops li b{font-size:20px}.case-stops small{color:#53655c}.case-leg{color:#25754e;font-weight:700}.case-reward{background:#eef7e8;padding:12px;border-radius:8px}.case-actions{display:flex;gap:10px;margin:16px 0}.case-actions button{padding:14px;border:1px solid #244d36;border-radius:12px;background:#d7ff55;color:#17271e;font-weight:700}.case-actions button:disabled{opacity:.45}.case-actions+small{display:block;line-height:1.7}@media(max-width:600px){.case-grid{grid-template-columns:1fr}.case-choice{padding:16px}#routeCaseDetail{padding:16px}.case-actions{flex-direction:column}}
/* Instant desktop map previews; touch continues to use the full popup. */
.venue-hover-tooltip{white-space:normal;width:310px;max-width:calc(100vw - 48px);padding:14px;border:1px solid #bccfc3;border-radius:12px;box-shadow:0 6px 24px #162a2530;color:#193528;background:#fff}.venue-hover>strong{display:block;font-size:16px;line-height:1.4;color:#52665b}.venue-hover-event{padding:9px 0;border-bottom:1px solid #e5ece7}.venue-hover-event span{display:block;font-size:15px;color:#347752;margin-bottom:4px}.venue-hover-event b{display:block;font-size:18px;line-height:1.4;overflow-wrap:anywhere}.venue-hover small{display:block;margin-top:9px;color:#627569;font-size:14px}
.map-browser{display:none}.preview-host{font-weight:750;color:#217449!important;font-size:16px!important}.preview-description{font-size:16px;line-height:1.6;margin:8px 0;color:#263e32}.preview-terms{font-size:15px!important;color:#52665b!important}.venue-hover-tooltip{width:360px}.venue-hover-event b{margin-bottom:6px}
@media(min-width:1000px){
 body.route-active #routeView.active{background:#fff;--sidebar:410px}
 body.route-active #routeView .section-header{left:0;right:auto;top:0;width:var(--sidebar);border:0;border-radius:0;box-shadow:none;padding:16px;min-height:68px}
 body.route-active #routeView .section-header h1{font-size:23px}
 body.route-active #routeView .map-route-summary{left:16px;right:auto;top:74px;width:378px;box-shadow:none;border:1px solid #dce5df;background:#eaf3ed}
 body.route-active #routeView .map-route-summary>div{background:#eaf3ed}
 body.route-active #routeView .map-route-controls{left:16px;right:auto;top:140px;width:378px;grid-template-columns:repeat(3,minmax(0,1fr))}
 body.route-active #routeView .map-route-controls label{box-shadow:none;background:#fff}
 body.route-active #routeView .map-card{left:var(--sidebar);border-left:1px solid #d2ddd6}
 body.route-active #routeView .map-legend{top:16px;left:430px}
 body.route-active #routeView .route-sheet{left:426px;right:16px;bottom:16px}
 .map-browser{display:block;position:absolute;z-index:600;left:0;top:208px;bottom:0;width:var(--sidebar);overflow-y:auto;overscroll-behavior:contain;background:#fff;padding:0 16px 20px}
 .map-search{display:block;position:sticky;top:0;z-index:1;background:#fff;padding:8px 0 12px;font-size:16px;font-weight:700}
 .map-search input{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid #bccdc2;border-radius:9px;font-size:17px}
 .map-list-count{font-size:16px;color:#52665b;margin:4px 0 12px}.map-list-event{padding:18px 0;border-top:1px solid #dce5df}.map-list-event time{font-size:16px;color:#278155;font-weight:700}.map-list-event h2{font-size:21px;line-height:1.4;margin:8px 0}.map-list-event small{display:block;margin:10px 0;color:#66766d;line-height:1.4}.map-list-actions{display:flex;gap:6px}.map-list-actions button{padding:9px 12px;border:1px solid #bdcfc3;border-radius:8px;background:#f2f7f3;font-size:16px;cursor:pointer}.map-list-actions button:last-child{background:#d7ff55}.map-list-actions button:disabled{opacity:.55;cursor:default}
}
.parking-panel{margin:20px 0;padding:18px;border:1px solid #bdd3c8;border-radius:14px;background:#f3f8f5;line-height:1.65}
.parking-panel h3{margin:0 0 8px;font-size:20px}.parking-panel p{font-size:18px}
.parking-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.parking-actions a,.parking-actions button{display:flex;align-items:center;justify-content:center;padding:10px;min-height:44px;border:1px solid #a9c6b7;border-radius:8px;background:white;color:#173f30;font:inherit;font-size:16px;text-align:center;text-decoration:none}
.parking-actions :focus-visible{outline:3px solid #286be6;outline-offset:2px}.parking-location{overflow-wrap:anywhere;user-select:text}.parking-panel .parking-note{font-size:16px;color:#53675b}
@media(max-width:380px){.parking-actions{grid-template-columns:1fr}}
.language-control{display:flex;align-items:center;gap:6px;font-size:16px}.language-control select{padding:8px;border:1px solid #b7c8bf;border-radius:8px;background:white;color:#173f30;max-width:135px}
@media(max-width:600px){.language-control{font-size:0}.language-control select{font-size:16px;max-width:108px}.header-actions{gap:5px}.brand small{display:none}}
.preferences-body{padding:24px;line-height:1.6}.preferences-body>label{display:block;padding:14px 0;border-bottom:1px solid #ddd;font-size:20px}.preferences-body input{width:20px;height:20px;vertical-align:middle;accent-color:#17844e}.preferences-body small{display:block;font-size:16px;color:#526459;margin-left:28px}.preferences-body button,#preferencesOpen{padding:10px;border:1px solid #b6c7bd;background:white;border-radius:9px;color:#173f30;min-height:44px}.preferences-body>div{display:flex;gap:12px}.preferences-body p{font-size:16px}
.large-text .preview-description,.large-text .decision-summary,.large-text .dialog-body p,.large-text .list-row p,.large-text .preview-host,.large-text .preview-terms{font-size:20px!important;line-height:1.7!important}.large-text .map-list-event h2,.large-text .decision-main strong,.large-text .list-row h2{font-size:23px!important;line-height:1.5!important}.large-text .map-list-event time,.large-text .map-list-event small{font-size:18px!important}
@media(max-width:600px){.app-header .brand{min-width:0}.app-header .brand>span:last-child{display:none}#preferencesOpen{font-size:15px;padding:7px}.header-actions{gap:4px!important}.app-header{gap:6px!important}.language-control select{max-width:103px!important}.app-header .install-btn{display:none!important}}
.parking-candidate{padding:16px 0;border-top:1px solid #bfd3c7}.parking-candidate h4{font-size:20px;margin:0}.parking-candidate dl{font-size:16px}.parking-candidate>p{margin:6px 0}.parking-candidate> a{display:inline-block;margin-top:10px;font-size:15px}
.parking-panel>summary{cursor:pointer;padding:2px 0;font-size:18px;min-height:44px;align-content:center}.parking-panel>summary span{display:block;font-size:15px;color:#52675c;margin:3px 0 0 20px}.parking-panel[open]>summary span{display:none}.parking-panel>summary:focus-visible{outline:3px solid #2764ed;outline-offset:5px;border-radius:4px}.parking-panel-body{padding-top:8px}.parking-retry{padding:10px 18px;border:1px solid #abc3b6;border-radius:8px;background:white;min-height:44px}