/* 예상 경로 범례 (features/route-legend · 2026-09-27) — 규칙·이유는 route-legend.js 머리말이 정본이다.
   층: 지도 컨트롤(1000) 높이 · 오늘의 팁(1500)·로그인·알림 창보다 아래.
   넓은 화면 = 지도 위쪽 가운데 · 폰(≤760px) = 왼쪽 위(레이어 단추 앞까지 — max-width는 JS가 잰다). */
.rpl {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 1000;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 5px 6px 5px 12px; box-sizing: border-box;
  background: var(--bg-surface-float, #fff); color: var(--text-primary, #0f172a);
  border: 1px solid var(--border-medium, #cbd5e1); border-radius: 999px;
  box-shadow: var(--shadow-md, 0 3px 10px rgba(0,0,0,.14));
  font-size: var(--fs-sm, 12px); line-height: 1.4; white-space: nowrap;
}
.rpl[hidden] { display: none; }
.rpl-i { display: inline-flex; align-items: center; gap: 5px; cursor: help; }
.rpl-s { flex: none; display: block; }
.rpl-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: -4px; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--text-secondary, #64748b); font-size: 15px; line-height: 1; cursor: pointer;
}
.rpl-x:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-primary, #0f172a); }
@media (max-width: 760px) {
  .rpl { left: 10px; transform: none; gap: 3px 9px; padding-left: 10px; font-size: 11.5px; white-space: normal; }
}