/* =====================================================
   금동산 Design System v0.2 — Map Theme Override
   map.css 뒤에 로드해서 색·라디우스·그림자만 토큰화.
   기존 셀렉터·레이아웃은 보존 (React 모듈 호환성 유지).
   ===================================================== */

/* ── 상단 우측 도구 버튼들 (login/draw/bookmark/info/location/live + zoom) ──
   지도(흰색) 위에서 보이도록 테두리·강한 그림자로 대비 확보. */
#loginLogoutButton,
#drawButton,
#bookmarkedButton,
#infoButton,
#currentLocationButton,
#liveTrackingButton,
#zoomInButton,
#zoomOutButton,
#drawOptions button,
#infoOptions button {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--sh-2);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

#loginLogoutButton:hover,
#drawButton:hover,
#bookmarkedButton:hover,
#infoButton:hover,
#currentLocationButton:hover,
#liveTrackingButton:hover,
#zoomInButton:hover,
#zoomOutButton:hover,
#drawOptions button:hover,
#infoOptions button:hover {
  background: var(--primary-soft) !important;
  box-shadow: var(--sh-2);
}

/* 줌 +/− 두 버튼을 시각적으로 한 묶음으로 */
.zoom-control-group {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
#zoomInButton,
#zoomOutButton {
  width: 40px;
  height: 40px;
  background: var(--surface);
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 활성 상태 — 그린 → 앰버 + 검정 텍스트 (카카오 패턴) */
#drawButton.active,
#bookmarkedButton.active,
#infoButton.active,
#liveTrackingButton.active,
#drawOptions button.active,
#infoOptions button.active,
#bookmarkedButton.active,
#lineButton.active {
  background-color: var(--primary) !important;
  color: var(--ink) !important;
}

/* ── 저장 버튼 (좌상단 플로팅) — 자동저장(setInterval) 있어서 숨김 ── */
#reactSaveButtonContainer { display: none !important; }

/* ── 검색 패널 ─────────────────────────── */
.search-panel {
  background-color: var(--surface) !important;
  box-shadow: var(--sh-2);
  border-right: 1px solid var(--border);
}

#toggleSearch {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-1);
  color: var(--text);
}
#toggleSearch:hover { background: var(--primary-soft) !important; }

#searchInput {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-alt);
  font-family: var(--font-sans);
  color: var(--ink);
  transition: border-color var(--dur-fast);
}
#searchInput::placeholder { color: var(--text-tertiary); }
#searchInput:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--primary) !important;
}

#searchButton .fa-search { color: var(--text-secondary); }

#deleteButton {
  background-color: var(--error) !important;
  color: #FFFFFF !important;
  border-radius: var(--r-sm) !important;
  font-weight: var(--fw-semibold);
}
#deleteButton:hover { background: #D9333F !important; }

/* ── 공용 팝업 ────────────────────────── */
.popup {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-3);
  color: var(--ink);
}

.popup-content button {
  background-color: var(--primary) !important;
  color: var(--ink) !important;
  border-radius: var(--r-md) !important;
  font-weight: var(--fw-semibold);
  font-family: var(--font-sans);
}
.popup-content button:hover {
  background-color: var(--primary-hover) !important;
}

.popup-content input {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-family: var(--font-sans);
}

/* ── 즐겨찾기 / 북마크 팝업 ─────────────── */
#favoritePopup,
#bookmarkedPopup {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-3);
  color: var(--ink);
}

.route-item {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  color: var(--text);
  background: var(--surface);
}

.route-actions button {
  border-radius: var(--r-sm) !important;
  font-weight: var(--fw-semibold);
  font-family: var(--font-sans);
}

.delete-btn {
  background-color: var(--error) !important;
  color: #FFFFFF !important;
}

.load-btn {
  background-color: var(--primary) !important;
  color: var(--ink) !important;
}

#bookmarkedList li {
  border-bottom: 1px solid var(--border);
}
#bookmarkedList li:last-child { border-bottom: none; }

#bookmarkedList li:hover {
  background-color: var(--primary-soft) !important;
}

#bookmarkedList li button {
  background-color: var(--error) !important;
}
#bookmarkedList li button:hover {
  background-color: #D9333F !important;
}

/* ── 메모 ─────────────────────────────── */
.memo-marker {
  background-color: var(--primary) !important;
  border: 2px solid var(--primary-deep) !important;
}

#memoPopup {
  background-color: var(--primary-soft) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink);
}

.memo-buttons button {
  background-color: var(--surface-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
}
.memo-buttons button:hover {
  background-color: var(--border) !important;
}

#memoButton {
  background-color: var(--primary) !important;
  color: var(--ink) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
}
#memoButton:hover {
  background-color: var(--primary-hover) !important;
}
#memoButton.active {
  background-color: var(--primary-deep) !important;
  color: #FFFFFF !important;
}

.memo-window {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-2);
  font-family: var(--font-sans);
  color: var(--ink);
}

.memo-textarea {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  color: var(--ink);
}
.memo-textarea:focus {
  outline: none;
  border-color: var(--primary) !important;
}

.memo-header button { color: var(--text-secondary) !important; }
.memo-header button:hover { color: var(--ink) !important; }

/* ── 메모 에디터 팝업 (clean card) ─────── */
.memo-popup-card {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-3);
  font-family: var(--font-sans);
}

.memo-popup-title {
  color: var(--ink) !important;
  font-weight: var(--fw-bold);
  letter-spacing: -0.3px;
}

.memo-popup-close {
  color: var(--text-tertiary) !important;
  border-radius: var(--r-sm) !important;
}
.memo-popup-close:hover:not(:disabled) {
  background: var(--surface-alt) !important;
  color: var(--ink) !important;
}

.memo-popup-textarea {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-alt) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans);
}
.memo-popup-textarea::placeholder { color: var(--text-tertiary) !important; }
.memo-popup-textarea:focus {
  border-color: var(--primary) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.15) !important;
}

.memo-popup-meta { color: var(--text-tertiary) !important; }
.memo-popup-dirty {
  color: var(--primary-deep) !important;
  font-weight: var(--fw-semibold);
}

/* primary btn — 앰버 + 검정 (카카오 패턴) */
.memo-popup-btn-primary {
  background: var(--primary) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans);
  border-radius: var(--r-md) !important;
  font-weight: var(--fw-semibold);
}
.memo-popup-btn-primary:hover:not(:disabled) {
  background: var(--primary-hover) !important;
}

.memo-popup-btn-secondary {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
}
.memo-popup-btn-secondary:hover:not(:disabled) {
  background: var(--surface-alt) !important;
  border-color: var(--border-strong) !important;
}

.memo-popup-btn-danger {
  color: var(--error) !important;
  border-color: var(--error-soft) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
}
.memo-popup-btn-danger:hover:not(:disabled) {
  background: var(--error-soft) !important;
}

.memo-popup-backdrop {
  background: rgba(25, 31, 40, 0.42) !important;
}

/* ── 지도 마커 (custom-marker) — v0.2 시안(02-map-preview) 마커 ──
   흰 라벨 카드(단지명 + 동·평형) → 앰버 핀 → 앰버 가격 칩 */
.custom-marker {
  position: relative;
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--ink);
  cursor: pointer;
}
.custom-marker .label {
  background: var(--surface);
  border: none;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  padding: 5px 9px;
  line-height: 1.25;
  max-width: 110px;
  box-sizing: border-box;
}
.custom-marker .label .name {
  font-weight: var(--fw-bold);
  font-size: 11px;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-marker .label .addr {
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-marker .arrow {
  position: static;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--primary) !important;
  border-top-color: var(--primary) !important;
}
.custom-marker .price {
  position: static;
  width: auto;
  height: auto;
  margin: -1px auto 0;
  display: inline-block;
  background-color: var(--primary) !important;
  color: var(--ink) !important;
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
  white-space: nowrap;
}

/* ── Bootstrap 모달 (로그인) v0.2 화 ─── */
.modal-content {
  border-radius: var(--r-xl) !important;
  border: none !important;
  box-shadow: var(--sh-3);
  font-family: var(--font-sans);
}
.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: var(--sp-5) var(--sp-6) !important;
}
.modal-title {
  font-weight: var(--fw-bold) !important;
  color: var(--ink) !important;
  letter-spacing: -0.3px;
}
.modal-body {
  padding: var(--sp-6) !important;
}

/* ── 기본 폰트 패밀리 통일 (body 토큰 적용) ── */
body, html {
  font-family: var(--font-sans) !important;
  color: var(--text);
  background: var(--canvas);
}

/* ═══════════════════════════════════════════════════
   임장 동선 (map-tour-module.js) — 북마크 기반 동선 생성
   ═══════════════════════════════════════════════════ */

/* 런처 버튼 (좌하단) */
.tour-launcher {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill, 999px);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.tour-launcher:hover { background: var(--primary-soft); }
.tour-launcher.is-on {
  background: var(--primary);
  color: var(--ink);
  border-color: var(--primary-deep);
}

/* 임장동선 모드일 때 지도 마커가 '담기 가능'함을 커서로 힌트 */
body.tour-mode .custom-marker { cursor: copy; }

/* 패널 (런처 위) */
.tour-panel {
  position: fixed;
  left: 16px;
  bottom: 72px;
  z-index: 96;
  width: 300px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 16px;
  font-family: var(--font-sans);
  color: var(--text);
}
.tour-panel[hidden] { display: none; }

.tour-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tour-title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: -0.2px;
}
.tour-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.tour-close:hover { color: var(--ink); background: var(--surface-alt); }

.tour-hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.tour-hint b { color: var(--primary-deep); }

.tour-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
.tour-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.tour-item:last-child { border-bottom: none; }
.tour-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex: 0 0 auto;
}
.tour-nm {
  flex: 1 1 auto;
  color: var(--ink);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tour-pr {
  color: var(--text-secondary);
  font-family: var(--font-num, inherit);
  font-size: 12px;
  flex: 0 0 auto;
}
.tour-rm {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex: 0 0 auto;
}
.tour-rm:hover { color: var(--error); }

.tour-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  cursor: pointer;
}
.tour-opt input { accent-color: var(--primary); }

.tour-summary {
  background: var(--primary-soft);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 10px;
  text-align: center;
}
.tour-summary[hidden] { display: none; }
.tour-sum-strong { font-weight: var(--fw-bold); color: var(--primary-deep); }

.tour-actions { display: flex; gap: 6px; }
.tour-btn {
  flex: 1 1 auto;
  height: 38px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.tour-btn:hover:not(:disabled) { background: var(--primary-hover); }
.tour-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tour-btn.is-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  flex: 0 0 auto;
  padding: 0 12px;
}
.tour-btn.is-ghost:hover:not(:disabled) { background: var(--surface-alt); }
.tour-btn[hidden] { display: none; }

/* 지도 위 순번 배지 */
.tour-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--ink);
  border: 2px solid #fff;
  box-shadow: var(--sh-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num, var(--font-sans));
  font-weight: var(--fw-bold);
  font-size: 13px;
  line-height: 1;
}
.tour-num--start {
  background: var(--primary-deep);
  color: #fff;
  font-size: 10px;
  letter-spacing: -0.3px;
}

/* 토스트 (하단 중앙 — 패널과 겹치지 않도록) */
.tour-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 210;
  max-width: 80vw;
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: var(--r-pill, 999px);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-family: var(--font-sans);
  box-shadow: var(--sh-3);
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.tour-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================
   도구 클러스터 카드 — v0.2 폴리시
   개별 플로팅 사각형 → 네이버/카카오맵식 그룹 캡슐 카드
   ===================================================== */

.top-right-controls { gap: 10px; }

.map-tool-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

/* 레일 버튼: 개별 테두리·그림자 제거하고 카드에 녹아들게 */
.map-tool-group #drawButton,
.map-tool-group #bookmarkedButton,
.map-tool-group #infoButton,
.map-tool-group #currentLocationButton,
.map-tool-group #liveTrackingButton {
  width: 52px !important;
  min-width: 0;
  height: 44px;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent;
  font-size: 11px;
}

/* 카드 첫/마지막 항목만 모서리 라운딩 */
.map-tool-group > :first-child > button:first-of-type,
.map-tool-group > button:first-child {
  border-top-left-radius: calc(var(--r-lg) - 1px) !important;
  border-top-right-radius: calc(var(--r-lg) - 1px) !important;
}
.map-tool-group > :last-child > button:first-of-type,
.map-tool-group > button:last-child {
  border-bottom-left-radius: calc(var(--r-lg) - 1px) !important;
  border-bottom-right-radius: calc(var(--r-lg) - 1px) !important;
}

/* 항목 사이 헤어라인 구분선 */
.map-tool-group > .map-tool-wrap + .map-tool-wrap > button:first-of-type,
.map-tool-group > .map-tool-wrap + button,
.map-tool-group > button + .map-tool-wrap > button:first-of-type,
.map-tool-group > button + button {
  border-top: 1px solid var(--border) !important;
}

/* 인증 버튼: 독립 알약형 */
#loginLogoutButton {
  width: auto !important;
  min-width: 0;
  height: 40px;
  padding: 0 16px !important;
  border-radius: var(--r-pill) !important;
  font-size: 12px;
}

/* 줌: 하나의 캡슐로 */
.zoom-control-group {
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
#zoomInButton,
#zoomOutButton {
  width: 52px;
  height: 44px;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#zoomOutButton { border-top: 1px solid var(--border) !important; }

/* 플라이아웃: 해당 버튼 행 왼쪽에 수직 중앙 정렬된 알약 캡슐 */
#drawOptions,
#infoOptions {
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  padding: 4px;
  gap: 2px;
}
#drawOptions button,
#infoOptions button {
  width: 48px !important;
  height: 34px;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--r-pill) !important;
  font-size: 11px;
}

/* 위치/실시간 카드 내부 틈 제거 (map.css의 gap 규칙 상쇄) */
#locationLiveControls { gap: 0; }

/* =====================================================
   v0.2 폴리시 2차 — 아이콘+라벨 레일, 검색 패널, 플로팅 정리
   ===================================================== */

/* ── 레일 버튼: 아이콘 위 + 10px 라벨 ── */
.map-tool-group #drawButton,
.map-tool-group #bookmarkedButton,
.map-tool-group #infoButton,
.map-tool-group #currentLocationButton,
.map-tool-group #liveTrackingButton {
  width: 58px !important;
  height: 54px;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.map-tool-group button .btn-ico { color: var(--text); }
.map-tool-group button:hover,
.map-tool-group button:hover .btn-ico { color: var(--ink); }
.map-tool-group button.active,
.map-tool-group button.active .btn-ico { color: var(--ink) !important; }

/* 줌 캡슐 폭을 레일과 맞춤 */
#zoomInButton,
#zoomOutButton { width: 58px; }

/* ── 검색 패널 ── */
.search-panel {
  width: 340px !important;
  padding: 18px 18px 12px;
  box-sizing: border-box;
}
.search-panel__brand {
  font-size: var(--fs-18);
  font-weight: var(--fw-extrabold);
  color: var(--ink);
  letter-spacing: -0.3px;
  margin-bottom: 14px;
}
.search-panel__brand em { color: var(--primary-deep); font-style: normal; }

.search-container { position: relative; }
#searchInput {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 16px;
  box-sizing: border-box;
  font-size: var(--fs-15);
  border-color: transparent !important;
}
#searchInput:focus { border-color: var(--primary) !important; }
#searchButton {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#searchButton:hover { background: var(--primary-soft); color: var(--ink); }

.search-info {
  font-size: var(--fs-13);
  color: var(--text-tertiary);
  margin-top: 10px;
}

.search-result-title span {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.search-result-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--surface);
  margin-top: 10px;
}
.search-result-item-title span {
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.search-result-item-content {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  margin-top: 4px;
}

/* 패널 토글: 오른쪽에 붙은 둥근 핸들 */
#toggleSearch {
  right: -32px !important;
  width: 32px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border) !important;
  border-left: none !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
  box-shadow: var(--sh-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
}
#toggleSearch:hover { color: var(--ink); }

/* ── 목표설정: 우중앙 → 좌하단, 임장동선과 같은 알약으로 ── */
#plannerLauncherButton {
  top: auto !important;
  right: auto !important;
  transform: none !important;
  left: 16px;
  bottom: 68px;
  z-index: 95 !important; /* 검색 패널(1000) 아래 — 임장동선과 동일 층 */
  width: auto !important;
  min-height: 0;
  height: 44px;
  padding: 0 16px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important;
  background: var(--surface) !important;
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  font-family: var(--font-sans);
  box-shadow: var(--sh-2);
}
#plannerLauncherButton:hover { background: var(--primary-soft) !important; }

/* 좌하단 런처 두 개: 아이콘 정렬·간격 통일 */
#plannerLauncherButton { gap: 6px; }
#plannerLauncherButton svg,
.tour-launcher svg { flex-shrink: 0; }