/* 구역노트 — 지도 우선 화면. RouteNote의 조작 방식을 플렉스노트 토큰으로 옮긴다. */
/* 목록·시트·버튼은 다른 탭처럼 앱 테마(라이트/다크)를 그대로 따른다. 지도 위 핀·경계선처럼
   지도 자체에 속한 요소만 route-note-map.css에서 밝은 배경 전용으로 따로 다룬다. */
.view-routes { background:var(--bg); color:var(--text); }
[data-route-notes-fullscreen="true"] {
  position:fixed;
  z-index:30;
  inset:0;
  width:100%;
  max-width:none;
  height:100dvh;
  overflow:auto;
  background:var(--bg);
}
body:has([data-route-notes-fullscreen="true"]) { overflow:hidden; }
body:has([data-route-notes-fullscreen="true"]) .bottom-nav,
body:has([data-route-notes-fullscreen="true"]) .fixture-nav { display:none !important; }
[data-route-notes-fullscreen="true"] .route-notes-workspace { height:var(--route-note-viewport-h,100dvh); }
.route-notes-workspace[data-map-only="true"] .route-notes-fabs { bottom:max(16px,env(safe-area-inset-bottom)); }
.route-notes-workspace .route-notes-fullscreen-exit {
  position:absolute;
  top:max(12px,env(safe-area-inset-top));
  right:12px;
  z-index:6;
  background:var(--panel);
  border-color:var(--line);
  box-shadow:var(--shadow-card);
}
.route-notes-header,.route-notes-detail-head,.route-notes-section-head,.route-notes-detail-actions,.route-notes-map-actions,.route-notes-form-actions,.route-notes-tip-actions {
  display:flex;
  align-items:center;
  gap:8px;
}
.route-notes-header {
  gap:4px;
  padding:14px 14px 10px;
}
.route-notes-section-head {
  justify-content:space-between;
}
.route-notes-header h2,.route-notes-detail-copy h3,.route-notes-section-head h3,.route-notes-tip h4 {
  margin:0;
  color:var(--text);
  font-weight:700;
  letter-spacing:-.022em;
}
.route-notes-header h2 {
  font-size:var(--fs-title-l);
}
.route-notes-kicker,.route-notes-tip-type {
  margin:0 0 2px;
  color:var(--muted);
  font-size:var(--fs-caption);
  font-weight:500;
  letter-spacing:.08em;
}

/* ── 공통 버튼 ─────────────────────────────────────────────── */
.route-notes-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:48px;
  padding:0 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-full);
  background:var(--button-secondary);
  color:var(--button-secondary-text);
  font:600 var(--fs-label) var(--font-ui);
  cursor:pointer;
}
.route-notes-button:active,.route-notes-icon-button:active {
  opacity:.72;
}
.route-notes-button:disabled,.route-notes-icon-button:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.route-notes-button.primary {
  border-color:transparent;
  background:var(--gold);
  color:var(--gold-ink);
}
.route-notes-button.danger {
  color:var(--red);
}
.route-notes-icon-button {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.route-notes-icon-button[hidden] { display:none; }
.route-notes-workspace [hidden] { display:none !important; }
.route-notes-icon-button:hover {
  background:var(--panel2);
  color:var(--text);
}
.route-notes-icon-button[aria-pressed="true"] {
  color:var(--gold);
}
.route-notes-icon {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.route-notes-star[aria-pressed="true"] .route-notes-icon {
  fill:color-mix(in srgb,var(--gold) 26%,transparent);
}
.route-notes-button:focus-visible,.route-notes-icon-button:focus-visible,.route-notes-searchbar:focus-within,
.route-notes-zone-main:focus-visible,.route-notes-suggest-row:focus-visible,
.route-notes-field input:focus-visible,.route-notes-field textarea:focus-visible,.route-notes-field select:focus-visible {
  outline:3px solid color-mix(in srgb,var(--gold) 36%,transparent);
  outline-offset:2px;
}

/* ── 지도 작업 공간 ─────────────────────────────────────────── */
.route-notes-workspace {
  --route-note-peek:144px;
  --route-note-glass:color-mix(in srgb,var(--panel) 90%,transparent);
  --route-note-panel-w:min(390px,38vw);
  position:relative;
  isolation:isolate;
  height:calc(var(--route-note-viewport-h, 100dvh) - var(--nav-h) - var(--safe-b));
  min-height:0;
  overflow:hidden;
  background:var(--panel2);
}
.route-notes-workspace .route-notes-overview-map {
  position:absolute !important;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden !important;
  background:var(--panel2);
}
.route-notes-workspace .route-notes-overview-map > * { max-width:100%; }
/* ── 지도 위 검색·필터 ──────────────────────────────────────── */
.route-notes-topbar {
  position:absolute;
  z-index:5;
  top:max(12px, env(safe-area-inset-top));
  right:12px;
  left:12px;
  display:grid;
  gap:8px;
  pointer-events:none;
}
.route-notes-topbar > * { pointer-events:auto; }
.route-notes-searchbar {
  display:flex;
  align-items:center;
  gap:10px;
  height:52px;
  padding:0 6px 0 14px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--route-note-glass);
  color:var(--muted);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.route-notes-searchbar > .route-notes-icon { flex:0 0 auto; }
.route-notes-search {
  flex:1;
  min-width:0;
  height:100%;
  border:0;
  background:transparent;
  color:var(--text);
  font:500 var(--fs-body-l) var(--font-ui);
}
.route-notes-search::placeholder { color:var(--muted); opacity:1; }
.route-notes-search:focus { outline:none; }
.route-notes-search::-webkit-search-cancel-button,.route-notes-search::-webkit-search-decoration { display:none; }
.route-notes-search-clear { width:48px; height:48px; border-radius:var(--r-full); }
.route-notes-searchbar:not([data-filled="true"]) .route-notes-search-clear { display:none; }
.route-notes-suggest {
  max-height:min(46dvh,340px);
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--route-note-glass);
  box-shadow:var(--shadow-raise);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.route-notes-suggest-row {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:56px;
  padding:10px 14px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.route-notes-suggest-row:last-child { border-bottom:0; }
.route-notes-suggest-row:active { background:var(--panel2); }
.route-notes-suggest-glyph {
  display:grid;
  flex:0 0 auto;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:var(--r-full);
  background:var(--panel2);
  color:var(--muted);
}
.route-notes-suggest-copy { display:grid; gap:3px; min-width:0; }
.route-notes-suggest-title-row { display:flex; align-items:center; gap:7px; min-width:0; }
.route-notes-badge {
  flex:0 0 auto;
  padding:2px 6px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-xs);
  color:var(--muted);
  font-size:var(--fs-caption);
  font-style:normal;
  font-weight:700;
  line-height:1.3;
}
.route-notes-suggest-title-row strong {
  overflow:hidden;
  color:var(--text);
  font-size:var(--fs-body-l);
  font-weight:700;
  letter-spacing:-.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.route-notes-suggest-copy small {
  overflow:hidden;
  color:var(--muted);
  font-size:var(--fs-label);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.route-notes-suggest-empty { margin:0; padding:18px; color:var(--muted); font-size:var(--fs-body); text-align:center; }
.route-notes-tabs {
  display:flex;
  gap:3px;
  width:max-content;
  max-width:100%;
  overflow:auto;
  padding:3px;
  border-radius:var(--r-full);
  background:var(--route-note-glass);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  scrollbar-width:none;
}
.route-notes-tabs::-webkit-scrollbar { display:none; }
.route-notes-tabs .route-notes-button {
  flex:0 0 auto;
  min-height:48px;
  border:0;
  background:transparent;
  color:var(--muted);
  white-space:nowrap;
}
.route-notes-tabs .route-notes-button.active {
  background:var(--panel);
  color:var(--text);
  font-weight:700;
  box-shadow:var(--shadow-card);
}

/* ── 지도 모서리 버튼 ───────────────────────────────────────── */
.route-notes-fabs {
  position:absolute;
  z-index:3;
  right:12px;
  bottom:calc(var(--route-note-sheet-h, var(--route-note-peek)) + 12px);
  display:grid;
  gap:8px;
  transition:bottom 180ms cubic-bezier(.2,.8,.3,1);
}
.route-notes-fab {
  min-width:48px;
  height:48px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--route-note-glass);
  color:var(--text);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.route-notes-fab:hover { background:var(--panel); color:var(--text); }
.route-notes-fab.primary {
  border-color:transparent;
  background:var(--gold);
  color:var(--gold-ink);
}

/* ── 바텀시트 ──────────────────────────────────────────────── */
.route-notes-sheet {
  position:absolute;
  z-index:4;
  right:0;
  bottom:0;
  left:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  height:var(--route-note-sheet-h, var(--route-note-peek));
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:var(--panel);
  box-shadow:var(--shadow-raise);
  transition:height 180ms cubic-bezier(.2,.8,.3,1);
}
.route-notes-workspace[data-dragging] .route-notes-sheet,
.route-notes-workspace[data-dragging] .route-notes-fabs { transition:none; }
.route-notes-sheet-grip {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:48px;
  padding:0;
  border:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:transparent;
  cursor:grab;
  touch-action:none;
}
.route-notes-workspace[data-dragging] .route-notes-sheet-grip { cursor:grabbing; }
.route-notes-grip-bar {
  width:44px;
  height:4px;
  border-radius:var(--r-full);
  background:var(--line-strong);
}
/* 손잡이는 시트 전체 너비라서 초점 표시는 막대에만 둔다. */
.route-notes-sheet-grip:focus-visible { outline:none; }
.route-notes-sheet-grip:focus-visible .route-notes-grip-bar {
  outline:3px solid color-mix(in srgb,var(--gold) 36%,transparent);
  outline-offset:5px;
}
.route-notes-sheet-head {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:50px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.route-notes-sheet-heading { display:grid; grid-column:1/-1; grid-row:1; min-width:0; gap:4px; text-align:left; }
.route-notes-sheet-back { grid-column:2; grid-row:2; }
.route-notes-sheet-toggle { grid-column:1; grid-row:2; background:var(--button-secondary); color:var(--button-secondary-text); border-color:var(--button-secondary-border); }
.route-notes-sheet:not([data-snap="peek"]) { grid-template-rows:auto auto minmax(0,1fr); }
.route-notes-sheet:not([data-snap="peek"]) .route-notes-sheet-head { padding-top:0; }
.route-notes-workspace[data-selected="false"] .route-notes-sheet {
  top:132px;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  grid-template-rows:auto minmax(0,1fr);
}
.route-notes-workspace[data-selected="false"] .route-notes-sheet-body { display:block; }
.route-notes-workspace[data-selected="false"] .route-notes-sheet-head { padding:12px 16px; }
.route-notes-create-zone { width:100%; margin-bottom:12px; }
.route-notes-workspace[data-editing="true"] .route-notes-sheet { grid-template-rows:auto minmax(0,1fr); }
.route-notes-workspace[data-editing="true"] .route-notes-sheet-head { padding-top:14px; }
.route-notes-workspace[data-editing="true"] .route-notes-sheet-body { scroll-padding-block:12px 72px; }
.route-notes-sheet-title {
  overflow:hidden;
  color:var(--text);
  font-size:var(--fs-title);
  font-weight:700;
  letter-spacing:-.022em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 구역코드는 자릿수가 고정된 문자열이라 모노로 둔다. */
.route-notes-sheet-title[data-code="true"] { font-family:var(--font-code); letter-spacing:.01em; }
.route-notes-sheet-subtitle {
  overflow:hidden;
  color:var(--muted);
  font-size:var(--fs-caption);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.route-notes-sheet-body {
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:12px 14px calc(18px + env(safe-area-inset-bottom));
}
.route-notes-sheet[data-snap="peek"] .route-notes-sheet-body { display:none; }

/* ── 구역 목록 ─────────────────────────────────────────────── */
.route-notes-list,.route-notes-tips { display:grid; gap:8px; }
.route-notes-zone-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  padding-right:6px;
  border-radius:var(--r-lg);
  background:var(--panel2);
}
.route-notes-zone-main {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
  min-height:64px;
  padding:12px 4px 12px 16px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.route-notes-zone-main > .route-notes-icon { flex:0 0 auto; color:var(--muted); }
.route-notes-zone-copy { display:grid; flex:1; gap:4px; min-width:0; }
.route-notes-zone-copy strong {
  font-family:var(--font-code);
  font-size:var(--fs-body-l);
  font-weight:700;
  letter-spacing:.01em;
}
.route-notes-zone-copy small {
  overflow:hidden;
  color:var(--muted);
  font-size:var(--fs-label);
  font-weight:500;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.route-notes-empty,.route-notes-loading {
  margin:0;
  padding:22px 16px;
  color:var(--muted);
  font-size:var(--fs-body);
  line-height:1.55;
  text-align:center;
}
.route-notes-state {
  display:grid;
  justify-items:center;
  gap:12px;
  padding:40px 20px;
  color:var(--muted);
  text-align:center;
}
.route-notes-state.error,.route-notes-map-error { color:var(--red); }

/* ── 구역 상세 ─────────────────────────────────────────────── */
.route-notes-detail-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:6px;
  margin-bottom:12px;
}
.route-notes-detail-copy { min-width:0; padding-top:6px; }
.route-notes-detail-copy p {
  max-width:62ch;
  margin:0;
  color:var(--muted);
  font-size:var(--fs-body);
  line-height:1.55;
}
.route-notes-detail-copy .route-notes-no-polygon { color:var(--warn); }
.route-notes-detail-actions { align-self:start; flex-wrap:wrap; justify-content:flex-end; }
.route-notes-section-head { margin-top:18px; margin-bottom:8px; }
.route-notes-section-head h3 { font-size:var(--fs-body-l); }
.route-notes-zone-photos { margin:18px 0 14px; }
.route-notes-zone-photos summary { min-height:48px; align-content:center; color:var(--text); font-size:var(--fs-body); cursor:pointer; }
.route-notes-zone-photos h3 { margin:0; color:var(--text); font-size:var(--fs-body); }
.route-notes-zone-photo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); gap:8px; margin-top:10px; }
.route-notes-zone-photo { display:block; min-height:44px; border-radius:var(--r-md); outline-offset:3px; }
.route-notes-zone-photo:focus-visible { outline:3px solid color-mix(in srgb,var(--gold) 36%,transparent); }
.route-notes-zone-photo img { display:block; width:100%; aspect-ratio:4/3; border-radius:var(--r-md); background:var(--panel2); object-fit:cover; }

/* ── 현장 팁 카드 ──────────────────────────────────────────── */
.route-notes-tip {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  padding:14px;
  border-radius:var(--r-lg);
  background:var(--panel2);
}
.route-notes-tip-glyph {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:var(--r-full);
  background:var(--panel);
  color:var(--muted);
}
.route-notes-tip-glyph[data-alert="true"] { background:var(--red-bg); color:var(--red); }
.route-notes-tip-copy { min-width:0; overflow-wrap:anywhere; }
.route-notes-tip h4 { font-size:var(--fs-body-l); }
.route-notes-tip p:not(.route-notes-tip-type) {
  margin:6px 0 0;
  color:var(--muted);
  font-size:var(--fs-label);
  line-height:1.55;
  white-space:pre-wrap;
}
.route-notes-tip .route-notes-author { color:var(--soft); font-size:var(--fs-caption); }
.route-notes-tip-actions { align-self:start; flex-wrap:wrap; justify-content:flex-end; }
.route-notes-tip > .route-notes-photos { grid-column:1/-1; }
.route-notes-photos {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:8px;
  margin-top:10px;
}
.route-notes-photos img {
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--r-md);
  background:var(--panel2);
  object-fit:cover;
}
.route-notes-photo { display:grid; gap:6px; margin:0; }
.route-notes-photo .photo-delete { min-height:48px; padding-inline:10px; font-size:var(--fs-caption); }
.route-notes-existing-photos > p { margin:0; color:var(--muted); font-size:var(--fs-label); font-weight:500; }

/* ── 입력 폼 ───────────────────────────────────────────────── */
.route-notes-form {
  display:grid;
  gap:14px;
  margin:0 14px 26px;
  padding:18px;
  border-radius:var(--r-lg);
  background:var(--panel);
  box-shadow:var(--shadow-card);
}
.route-notes-sheet-body .route-notes-form { margin:0; padding:14px 0 18px; box-shadow:none; }
.route-notes-field {
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:var(--fs-label);
  font-weight:500;
}
.route-notes-field input,.route-notes-field textarea,.route-notes-field select {
  box-sizing:border-box;
  width:100%;
  min-height:48px;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  background:var(--panel2);
  color:var(--text);
  font:500 var(--fs-body) var(--font-ui);
  resize:vertical;
}
.route-notes-coordinate-help { margin:0; color:var(--muted); font-size:var(--fs-label); line-height:1.5; }
.route-notes-coordinate-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.route-notes-form-actions { flex-wrap:wrap; justify-content:flex-end; padding-top:4px; }
.route-notes-sheet-body .route-notes-form-actions { position:sticky; bottom:0; padding:10px 0; background:var(--panel); }
.route-notes-form-actions .route-notes-button { min-width:106px; }
.route-notes-map-card {
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--panel2);
}
.route-notes-map-card .route-notes-coordinate-help { padding:0 10px 10px; }
.route-notes-map-actions { flex-wrap:wrap; justify-content:flex-end; padding:10px; }
.route-notes-map { position:relative; min-height:280px; background:var(--panel2); }
.route-notes-map-status,.route-notes-map-error {
  display:grid;
  min-height:280px;
  place-items:center;
  margin:0;
  padding:18px;
  color:var(--muted);
  font-size:var(--fs-label);
  text-align:center;
}
.route-notes-workspace .route-notes-map-error,
.route-notes-workspace .route-notes-map-status { min-height:100%; }

/* ── 화면 크기 ─────────────────────────────────────────────── */
@media (max-width:430px) {
  .route-notes-coordinate-grid { grid-template-columns:1fr; }
  .route-notes-form-actions .route-notes-button { flex:1; }
  .route-notes-map { min-height:240px; }
}
@media (max-height:520px) and (orientation:landscape) {
  .route-notes-searchbar { height:48px; }
  .route-notes-sheet-subtitle { display:none; }
}
@media (min-width:768px) and (orientation:landscape), (min-width:1100px) {
  .route-notes-workspace { height:var(--route-note-viewport-h, 100dvh); min-height:0; }
  .route-notes-topbar { top:16px; right:auto; left:16px; width:min(380px,42vw); }
  .route-notes-sheet {
    right:16px;
    bottom:16px;
    left:auto;
    width:var(--route-note-panel-w);
    height:auto;
    max-height:calc(100% - 32px);
    border-bottom:1px solid var(--line);
    border-radius:var(--r-xl);
  }
  .route-notes-sheet[data-snap="peek"] { height:var(--route-note-peek); }
  .route-notes-sheet:not([data-snap="peek"]) { grid-template-rows:auto minmax(0,1fr); }
  .route-notes-sheet:not([data-snap="peek"]) .route-notes-sheet-head { padding-top:14px; }
  .route-notes-workspace[data-selected="false"] .route-notes-sheet { inset:136px auto 16px 16px; width:min(520px,calc(100% - 32px)); border-radius:var(--r-xl); }
  .route-notes-sheet-grip { display:none; }
  .route-notes-fabs { right:calc(var(--route-note-panel-w) + 32px); bottom:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .route-notes-sheet,.route-notes-fabs { transition:none; }
}
.route-notes-zone-editor-host { min-height:0; overflow:auto; overscroll-behavior:contain; }
.route-notes-location-menu { display:grid; gap:10px; padding:4px 0; }
.route-notes-location-menu .route-notes-button { justify-content:center; min-height:48px; }
.route-notes-marker-field { min-width:0; padding:0; margin:0; border:0; }
.route-notes-marker-field legend { font-weight:600; margin-bottom:8px; }
.route-notes-marker-picker summary { display:flex; align-items:center; gap:10px; list-style:none; min-height:48px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:var(--r-md); cursor:pointer; }
.route-notes-marker-picker summary::-webkit-details-marker { display:none; }
.route-notes-marker-picker summary span { flex:1; }
.route-notes-marker-picker[open] .route-notes-marker-grid { margin-top:8px; }
.route-notes-marker-picker summary:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.route-notes-marker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.route-notes-marker-grid .route-notes-button { display:flex; flex-direction:column; min-height:64px; padding:8px 3px; text-align:center; font-size:12px; }
.route-notes-marker-grid [aria-pressed="true"] { border-color:var(--gold); color:var(--gold); background:var(--primary-bg); }
.route-notes-tip-location { display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:var(--r-md); }
.route-notes-tip-location p { margin:0; }

/* ── 지도 중심 구역노트 개편 ───────────────────────────────── */
.route-notes-selected-bar {
  /* The zone name shrinks so the 3–5 visible icon buttons always stay on one row. */
  display:flex;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  align-items:center;
  min-height:46px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:var(--r-full);
  background:var(--route-note-glass);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.route-notes-zone-change {
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  overflow:hidden;
  min-width:0;
  min-height:40px;
  padding:0 12px;
  border:0;
  border-radius:var(--r-full);
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.route-notes-zone-code {
  display:block;
  max-width:100%;
  overflow:hidden;
  font-family:var(--font-code);
  font-size:var(--fs-body-l);
  font-weight:700;
  letter-spacing:.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.route-notes-zone-name {
  display:block;
  max-width:100%;
  overflow:hidden;
  color:var(--muted);
  font-size:var(--fs-caption);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.route-notes-selected-bar .route-notes-icon-button { flex:0 0 40px; width:40px; height:40px; border-radius:var(--r-full); }
.route-notes-workspace[data-selected="true"] .route-notes-searchbar { height:46px; border-radius:var(--r-full); }
.route-notes-workspace[data-map-only="true"] .route-notes-fabs { bottom:calc(38px + max(10px,env(safe-area-inset-bottom))); }
.route-notes-fabs { align-items:end; justify-items:end; }
.route-notes-write { width:auto; min-width:106px; padding-inline:16px; border-radius:var(--r-full); font-weight:750; }
.route-notes-status-line {
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  min-height:38px;
  margin:0;
  padding:9px 16px max(8px,env(safe-area-inset-bottom));
  background:linear-gradient(0deg,color-mix(in srgb,var(--panel) 96%,transparent) 54%,transparent);
  color:var(--muted);
  font-size:var(--fs-caption);
  font-weight:650;
  text-align:center;
  pointer-events:none;
}
.route-notes-crosshair {
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  width:38px;
  height:38px;
  border:2px solid var(--gold);
  border-radius:50%;
  background:color-mix(in srgb,var(--panel) 26%,transparent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--panel) 62%,transparent);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.route-notes-crosshair::before,.route-notes-crosshair::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:var(--gold);
  transform:translate(-50%,-50%);
}
.route-notes-crosshair::before { width:54px; height:2px; }
.route-notes-crosshair::after { width:2px; height:54px; }
.route-notes-crosshair span { position:absolute; z-index:1; inset:14px; border-radius:50%; background:var(--gold); }
.route-notes-workspace[data-detail="true"] .route-notes-sheet {
  right:12px;
  bottom:calc(10px + env(safe-area-inset-bottom));
  left:12px;
  height:auto;
  max-height:min(58%,420px);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
}
.route-notes-workspace[data-detail="true"][data-tip-details="false"] .route-notes-sheet { max-height:250px; }
.route-notes-workspace[data-detail="true"] .route-notes-sheet-grip,
.route-notes-workspace[data-detail="true"] .route-notes-sheet-head { display:none; }
.route-notes-workspace[data-detail="true"] .route-notes-sheet-body { padding:0; }
.route-notes-pin-popup {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:14px;
}
.route-notes-pin-popup-copy { min-width:0; }
.route-notes-pin-popup-meta { display:flex; align-items:center; gap:6px; margin:0 0 5px; color:var(--muted); font-size:var(--fs-caption); font-weight:700; }
.route-notes-pin-popup-meta em { padding:2px 6px; border-radius:var(--r-full); background:var(--primary-bg); color:var(--gold); font-style:normal; }
.route-notes-pin-popup h3 { margin:0; overflow:hidden; font-size:var(--fs-body-l); text-overflow:ellipsis; white-space:nowrap; }
.route-notes-pin-popup-body { display:-webkit-box; overflow:hidden; margin:5px 0 0; color:var(--muted); font-size:var(--fs-label); line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.route-notes-pin-popup-photo { width:72px; height:72px; border-radius:var(--r-md); object-fit:cover; }
.route-notes-pin-popup-footer { display:flex; grid-column:1/-1; align-items:center; justify-content:space-between; gap:10px; padding-top:8px; border-top:1px solid var(--line); }
.route-notes-pin-popup-footer small { color:var(--muted); font-size:var(--fs-caption); }
.route-notes-pin-popup-actions { display:flex; gap:6px; }
.route-notes-pin-popup-actions .route-notes-button { min-height:38px; padding-inline:11px; }
.route-notes-workspace[data-placing="true"] .route-notes-sheet {
  right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  left:12px;
  height:auto;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
}
.route-notes-workspace[data-placing="true"] .route-notes-sheet-grip { display:none; }
.route-notes-workspace[data-placing="true"] .route-notes-sheet-head { padding:13px 14px 8px; border:0; }
.route-notes-workspace[data-placing="true"] .route-notes-sheet-heading { grid-column:1/-1; }
.route-notes-workspace[data-placing="true"] .route-notes-sheet-back,
.route-notes-workspace[data-placing="true"] .route-notes-sheet-toggle { display:none; }
.route-notes-workspace[data-placing="true"] .route-notes-sheet-body { padding:4px 14px 14px; }
.route-notes-location-menu { grid-template-columns:1fr auto; align-items:center; }
.route-notes-location-menu .route-notes-placement-help { grid-column:1/-1; margin:0; color:var(--muted); font-size:var(--fs-label); }
.route-notes-location-menu .route-notes-button.primary { order:2; }
.route-notes-workspace[data-editing="true"] .route-notes-sheet { max-height:calc(100% - 10px); }
.route-notes-tip-optional { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.route-notes-tip-optional summary { min-height:48px; align-content:center; color:var(--text-sub); font-size:var(--fs-label); font-weight:700; cursor:pointer; }
.route-notes-tip-optional > :not(summary) { margin-block:10px; }
.route-notes-share-toggle,.route-note-zone-privacy { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 12px; min-height:52px; }
.route-notes-share-toggle strong,.route-note-zone-privacy strong { color:var(--text); font-size:var(--fs-label); font-weight:600; }
.route-notes-share-toggle small,.route-note-zone-privacy small { grid-column:1/-1; color:var(--muted); font-size:var(--fs-caption); font-weight:500; line-height:1.5; }
.route-notes-share-toggle input[role="switch"],.route-note-zone-privacy input[role="switch"] {
  appearance:none; position:relative; flex-shrink:0; width:42px; height:24px; margin:0; padding:0;
  border:1px solid var(--line-strong); border-radius:var(--r-full); background:var(--panel3); cursor:pointer;
  transition:background-color 150ms ease,border-color 150ms ease;
}
.route-notes-share-toggle input[role="switch"]::after,.route-note-zone-privacy input[role="switch"]::after {
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:transform 150ms ease;
}
.route-notes-share-toggle input[role="switch"]:checked,.route-note-zone-privacy input[role="switch"]:checked { border-color:var(--gold); background:var(--gold); }
.route-notes-share-toggle input[role="switch"]:checked::after,.route-note-zone-privacy input[role="switch"]:checked::after { background:var(--gold-ink); transform:translateX(18px); }
.route-notes-share-toggle input[role="switch"]:disabled,.route-note-zone-privacy input[role="switch"]:disabled { opacity:.65; cursor:not-allowed; }
.route-notes-share-toggle input[role="switch"]:focus-visible,.route-note-zone-privacy input[role="switch"]:focus-visible { outline:3px solid color-mix(in srgb,var(--gold) 40%,transparent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  .route-notes-share-toggle input[role="switch"],.route-note-zone-privacy input[role="switch"],
  .route-notes-share-toggle input[role="switch"]::after,.route-note-zone-privacy input[role="switch"]::after { transition:none; }
}
body:has(.route-notes-workspace[data-placing="true"]) .bottom-nav { display:none !important; }

@media (min-width:768px) and (orientation:landscape), (min-width:1100px) {
  .route-notes-workspace[data-detail="true"] .route-notes-sheet,
  .route-notes-workspace[data-placing="true"] .route-notes-sheet {
    right:16px;
    bottom:16px;
    left:auto;
    width:var(--route-note-panel-w);
  }
  .route-notes-workspace[data-detail="true"] .route-notes-sheet { max-height:min(70%,520px); }
}

/* ── 노트 공간 · 팀 · 변경 기록 ─────────────────────────────── */
.route-notes-spaces {
  display:flex;
  gap:6px;
  margin-bottom:10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.route-notes-spaces::-webkit-scrollbar { display:none; }
.route-notes-spaces .route-notes-button { flex:0 0 auto; min-height:44px; white-space:nowrap; }
.route-notes-spaces .route-notes-button.active { background:var(--text); border-color:var(--text); color:var(--bg); font-weight:700; }
.route-notes-spaces .route-notes-team-button { margin-left:auto; }
.route-notes-team,.route-notes-team-create,.route-notes-team-join { display:grid; gap:10px; margin-bottom:16px; }
.route-notes-members { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.route-notes-member {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-height:52px;
  padding:8px 12px;
  border-radius:var(--r-lg);
  background:var(--panel2);
  color:var(--text);
  font-size:var(--fs-body);
}
.route-notes-member > span { flex:1; min-width:0; font-weight:600; }
.route-notes-member em { color:var(--gold); font-size:var(--fs-label); font-style:normal; font-weight:700; }
.route-notes-member .route-notes-button { min-height:40px; }
.route-notes-invite-link {
  margin:0;
  padding:10px 12px;
  border-radius:var(--r-md);
  background:var(--panel2);
  color:var(--text);
  font-family:var(--font-code);
  font-size:var(--fs-label);
  overflow-wrap:anywhere;
  user-select:all;
}
.route-notes-form-hint { margin:0; color:var(--muted); font-size:var(--fs-label); line-height:1.5; }
.route-notes-history { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.route-notes-history-row {
  display:grid;
  gap:4px;
  padding:12px 14px;
  border-radius:var(--r-lg);
  background:var(--panel2);
  color:var(--text);
}
.route-notes-history-row small { color:var(--muted); font-size:var(--fs-caption); }
.route-notes-history-row p { margin:0; color:var(--soft); font-size:var(--fs-body); line-height:1.45; overflow-wrap:anywhere; }
.route-notes-history-row .route-notes-button { justify-self:start; margin-top:4px; }
.route-notes-trash-list { display:grid; gap:8px; margin:12px 0; padding:0; list-style:none; }
.route-notes-panel-filters { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.route-notes-panel-filters .route-notes-button { min-height:48px; }
.route-notes-panel-filters .route-notes-button.active { background:var(--text); border-color:var(--text); color:var(--bg); font-weight:700; }
.route-notes-panel-title { min-width:0; overflow-wrap:anywhere; }
.route-notes-panel-error { margin:10px 0; color:var(--red); line-height:1.5; overflow-wrap:anywhere; }
.route-notes-page-status { margin:10px 0; color:var(--muted); font-size:var(--fs-label); line-height:1.5; }
.route-notes-trash-more,.route-notes-history-more { min-height:48px; margin-top:12px; max-width:100%; white-space:normal; }
.route-notes-trash-list .route-notes-button,.route-notes-history-row .route-notes-button,.route-notes-trash-button { min-height:48px; }