/* ===== 디자인 토큰 ===== */
:root {
  --bg: #f5f6f4;
  --surface: #ffffff;
  --surface-2: #f0f2ef;
  /* 반투명 흐림(backdrop-filter)은 큰 고해상도 화면에서 지도·카드가 그려지지 않는 문제를 일으켜 쓰지 않는다 */
  --sheet-bg: #f3f5f2;
  --glass: rgb(255 255 255 / 96%);
  --text: #15201a;
  --muted: #64706a;
  --border: #e3e7e3;
  --accent: #0f9d58;
  --accent-strong: #0b7a44;
  --accent-soft: #e3f6ec;
  --on-accent: #ffffff;
  --danger: #d93025;
  --notice-bg: #fff7e0;
  --notice-text: #6b4a00;
  --stamped: #0f9d58;
  --hero-from: #0b3d2e;
  --hero-via: #0f6b4f;
  --hero-to: #127a8a;
  --hero-text: #ffffff;
  --hero-glass: rgb(255 255 255 / 12%);
  --hero-glass-border: rgb(255 255 255 / 18%);
  --shadow: 0 1px 2px rgb(16 24 20 / 5%), 0 4px 14px rgb(16 24 20 / 5%);
  --shadow-lg: 0 16px 48px rgb(16 24 20 / 22%), 0 2px 8px rgb(16 24 20 / 10%);
  /* 지도 위에 떠 있는 카드: 진한 테두리로 지도와 구분한다.
     넓게 번지는 그림자는 지도를 움직일 때마다 다시 그려야 해서 짧게만 준다 */
  --shadow-float: 0 0 0 1.5px var(--sheet-border), 0 4px 12px rgb(16 24 20 / 18%);
  --radius: 18px;
  --radius-sm: 12px;
  --map-bg: #e8ecef;
  /* 밝은 화면에서는 OSM 지도 색을 그대로 쓴다 (필터는 그리기 부담이 커서 다크 모드에만 쓴다) */
  --map-filter: none;
  --route-casing: #ffffff;
  --sheet-border: rgb(16 24 20 / 22%);
  --four-rivers: #1d4ed8;
  --four-rivers-soft: #e0eaff;

  /* 주변 시설 카테고리 색 */
  --poi-restaurant: #e8590c;
  --poi-cafe: #8d5524;
  --poi-convenience: #1971c2;
  --poi-lodging: #7048e8;
  --poi-bicycle: #2b8a3e;
  --poi-toilets: #0c8599;
  --poi-sights: #c2255c;
  --on-poi: #ffffff;
  --locate: #1a73e8;
  --sheet-width: clamp(360px, 32vw, 440px);
  --float-gap: 16px;
  --header-h: 60px;
  --tabbar-h: 64px;

  /* 노선 구분색 (src/data/index.js가 순서대로 읽어 쓴다) */
  --route-1: #2563eb;
  --route-2: #e11d48;
  --route-3: #16a34a;
  --route-4: #f59e0b;
  --route-5: #7c3aed;
  --route-6: #0891b2;
  --route-7: #db2777;
  --route-8: #65a30d;
  --route-9: #ea580c;
  --route-10: #be123c;
  --route-11: #0d9488;
  --route-12: #a16207;
  --route-13: #9333ea;
  --route-14: #475569;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c110e;
    --surface: #161d19;
    --surface-2: #1f2823;
    --sheet-bg: rgb(12 17 14 / 97%);
    --glass: rgb(20 27 23 / 96%);
    --text: #e8eee9;
    --muted: #98a59d;
    --border: #2a352f;
    --accent: #34d399;
    --accent-strong: #6ee7b7;
    --accent-soft: #10392a;
    --on-accent: #052e1c;
    --danger: #f87171;
    --notice-bg: #33290d;
    --notice-text: #fcd98a;
    --stamped: #34d399;
    --hero-from: #06241b;
    --hero-via: #0b4232;
    --hero-to: #0b4a55;
    --shadow: 0 0 0 1px var(--border);
    --shadow-lg: 0 10px 40px rgb(0 0 0 / 55%), 0 0 0 1px var(--border);
    --shadow-float: 0 0 0 1.5px var(--sheet-border), 0 4px 12px rgb(0 0 0 / 50%);
    --sheet-bg: #111713;
    --map-bg: #1b2125;
    --map-filter: invert(1) hue-rotate(180deg) saturate(0.55) brightness(0.92) contrast(0.88);
    --route-casing: #0c110e;
    --sheet-border: rgb(255 255 255 / 18%);
    --four-rivers: #93b4ff;
    --four-rivers-soft: #17284d;
  }
}

/* ===== 기본 ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation; /* 더블탭 확대 막기 (지도 안 조작은 지도가 따로 처리한다) */
}

body {
  font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  background: var(--map-bg);
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent-strong);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h3 {
  margin: 14px 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

p + p {
  margin-top: 8px;
}

ul,
ol {
  padding-left: 20px;
}

.icon {
  flex-shrink: 0;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.85rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.plain-list {
  padding: 0;
  list-style: none;
}

.plain-list li {
  position: relative;
  padding: 5px 0 5px 16px;
}

.plain-list li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--route-color, var(--accent));
}

/* ===== 화면 뼈대: 지도 + 떠 있는 카드 ===== */
.app-map {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--map-bg);
}

.map-error {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.header {
  position: fixed;
  top: var(--float-gap);
  right: var(--float-gap);
  left: var(--float-gap);
  z-index: 1000;
  pointer-events: none; /* 머리글 카드 바깥(빈 곳)은 지도를 조작할 수 있게 한다 */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  padding: 0 10px 0 12px;
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--shadow-float);
  pointer-events: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--on-accent);
}

.top-nav {
  display: flex;
  gap: 2px;
}

.top-nav a,
.top-nav .nav-help {
  padding: 8px 14px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* 사용법 버튼: 검은 바탕에 흰 글씨 (사용자 요청) */
.top-nav .nav-help {
  margin-left: 6px;
  background: #111;
  color: #fff;
  border: 0;
}

.top-nav .nav-help:hover {
  background: #333;
  color: #fff;
}

.top-nav a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.top-nav a.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.tab-bar {
  display: none;
}

/* 내용 카드(시트): 넓은 화면에서는 왼쪽에 떠 있는 카드 */
/* 카드는 오른쪽, 시설 버튼 줄 바로 아래 (사용자 요청: 버튼과 카드 사이 마우스 이동을 줄인다).
   --poi-space는 시설 버튼 줄 높이 (main.js가 잰다, 버튼 줄이 숨으면 0) */
.sheet {
  position: fixed;
  top: calc(var(--float-gap) * 2 + var(--header-h) + var(--poi-space, 0px));
  bottom: var(--float-gap);
  right: var(--float-gap);
  z-index: 900;
  display: flex;
  flex-direction: column;
  width: var(--sheet-width);
  border-radius: 24px;
  background: var(--sheet-bg);
  box-shadow: var(--shadow-float);
  transition: transform 0.3s ease, height 0.3s ease;
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  border-radius: inherit;
}

/* 카드 안 스크롤바: 얇은 알약 모양, 둥근 모서리에 걸리지 않게 위아래를 비운다 (사용자 요청) */
.sheet-body::-webkit-scrollbar {
  width: 12px;
}

.sheet-body::-webkit-scrollbar-track {
  margin: 18px 0;
  background: transparent;
}

.sheet-body::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent) padding-box;
}

.sheet-body::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--muted) 60%, transparent);
}

.sheet-body::-webkit-scrollbar-button {
  display: none;
}

@supports not selector(::-webkit-scrollbar) {
  .sheet-body {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent;
  }
}

.sheet-body > section > * + *,
.sheet-body > div > * + * {
  margin-top: 14px;
}

/* 카드 바깥 왼쪽 위에 세로로 쌓은 버튼: 지도 크게 보기, 인증센터 이름, 코스 전체 보기 (사용자 요청) */
.sheet-tools {
  position: absolute;
  top: 0;
  right: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

body.sheet-collapsed .sheet-tools {
  right: calc(100% + var(--float-gap) * 2);
}

.sheet-toggle,
.sign-toggle,
.fit-toggle {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--glass);
  color: var(--text);
  font-size: 0.85rem;
  white-space: nowrap;
  box-shadow: var(--shadow-float);
}

.sheet-handle {
  display: none;
}

body.sheet-collapsed .sheet {
  transform: translateX(calc(100% + var(--float-gap) * 2));
}

.sign-toggle[aria-pressed="true"] {
  background: var(--accent-strong);
  color: var(--on-accent);
}

.page-head p {
  margin-top: 4px;
}

/* ===== 공통 요소 ===== */
.card {
  display: block;
  padding: 18px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-head h2 {
  margin-bottom: 0;
}

.two-col {
  display: grid;
  gap: 12px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-head h2 {
  margin-bottom: 0;
}

.section-head a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 0.9rem;
}

.notice {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--notice-bg);
  color: var(--notice-text);
  font-size: 0.92rem;
}

.bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.bar.thin {
  height: 5px;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--route-color, var(--accent));
  transition: width 0.4s ease;
}

.big {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.big small {
  margin-left: 2px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

button,
input,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  cursor: pointer;
}

button:hover,
.button:hover {
  text-decoration: none;
  filter: brightness(1.05);
}

button.secondary {
  padding: 8px 14px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--border);
}

button.danger {
  background: transparent;
  color: var(--danger);
  box-shadow: inset 0 0 0 1.5px var(--danger);
}

.icon-button {
  padding: 4px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 400;
}

.link-button {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

.link-button:hover {
  color: var(--accent-strong);
}

input,
select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--accent);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.field select,
.field input {
  color: var(--text);
  font-weight: 500;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.check input {
  width: 20px;
  height: 20px;
  padding: 0;
  accent-color: var(--accent);
}

.badges,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.badge.accent {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.badge.four-rivers {
  background: var(--four-rivers-soft);
  color: var(--four-rivers);
}

.chip {
  padding: 8px 14px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--border);
}

.chip.active {
  background: var(--text);
  color: var(--surface);
  box-shadow: none;
}

.route-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--route-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--route-color) 20%, transparent);
}

/* ===== 홈 ===== */
.hero {
  padding: 26px 22px 22px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 10%, var(--hero-to) 0, transparent 50%),
    radial-gradient(circle at 0 100%, var(--hero-via) 0, transparent 60%),
    var(--hero-from);
  color: var(--hero-text);
}

.hero h1 {
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 22px;
}

.stats div {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--hero-glass);
  box-shadow: inset 0 0 0 1px var(--hero-glass-border);
}

.stats dt {
  font-size: 0.75rem;
  opacity: 0.75;
}

.stats dd {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.stats small {
  margin-left: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.8;
}

.progress-summary {
  display: flex;
  align-items: center;
  gap: 16px;
}

.progress-summary:hover {
  text-decoration: none;
}

.progress-summary > div {
  flex: 1;
}

.progress-summary .label {
  font-size: 0.85rem;
  color: var(--muted);
}

.progress-summary .value {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.journey {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.journey li {
  counter-increment: step;
}

.journey a {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
}

.journey a:hover {
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}

.journey a::before {
  content: "0" counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--route-color) 16%, transparent);
  color: var(--route-color);
  font-size: 0.85rem;
  font-weight: 800;
}

.journey span {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ===== 코스 ===== */
.route-grid {
  display: grid;
  gap: 10px;
}

.route-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
}

.route-card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}

.route-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  margin-bottom: 4px;
}

.route-card-top .route-dot {
  margin-right: 4px;
}

.route-name {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

.route-section {
  font-size: 0.88rem;
  color: var(--muted);
}

.route-card-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 10px 0 8px;
}

.distance {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.distance small {
  margin-left: 2px;
  font-size: 0.85rem;
  color: var(--muted);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
}

.route-hero {
  padding: 20px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--route-color) 30%, transparent) 0, transparent 65%),
    var(--surface);
  box-shadow: var(--shadow);
}

.route-hero h1 {
  margin-top: 10px;
}

.route-hero .route-section {
  margin-top: 2px;
  font-size: 0.98rem;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 16px 0 6px;
}

.facts dt {
  font-size: 0.78rem;
  color: var(--muted);
}

.facts dd {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.timeline {
  position: relative;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 9px;
  width: 2px;
  background: color-mix(in srgb, var(--route-color) 35%, transparent);
}

.timeline li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
}

.timeline-dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 12px;
  height: 12px;
  margin: 5px 4px 0;
  border: 3px solid var(--route-color);
  border-radius: 50%;
  background: var(--surface);
}

.timeline .address {
  display: block;
}

.timeline .badge.staffed {
  margin-left: 6px;
  vertical-align: 1px;
}

.badge.staffed {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.staffed-hours,
.center-notice {
  display: block;
}

.staffed-hours {
  color: var(--accent-strong);
}

.center-notice,
.popup-notice {
  color: var(--notice-text);
}

.popup-staffed {
  color: var(--accent-strong);
  font-weight: 600;
}

/* 인증 범위 제한(예: 제주도 창구는 제주 인증만) — 반드시 눈에 띄게 (사용자 요청) */
.limit-warning[hidden] {
  display: none;
}

.limit-warning {
  display: block;
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--notice-bg);
  color: var(--notice-text);
  font-size: 0.85rem;
  font-weight: 700;
}

.limit-warning::before {
  content: "⚠ ";
}

.staffed-list {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.staffed-list li {
  display: grid;
  padding-left: 12px;
  border-left: 3px solid var(--route-color);
}

/* ===== 지도 표시 ===== */
.leaflet-container {
  font-family: inherit;
  background: var(--map-bg) !important;
}

.map-tiles {
  filter: var(--map-filter);
}

/* ===== 주변 시설 버튼 줄 (지도 위) ===== */
.poi-bar {
  position: fixed;
  top: calc(var(--float-gap) * 2 + var(--header-h));
  right: var(--float-gap);
  left: var(--float-gap);
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none; /* 버튼 사이 빈 곳은 지도를 조작할 수 있게 한다 */
}

.poi-bar[hidden] {
  display: none;
}

/* 넓은 화면: 잠깐 뜨는 상태 글은 카드·버튼과 겹치지 않게 지도 영역 아래쪽 가운데에 띄운다 */
@media (min-width: 721px) {
  .poi-bar .poi-status {
    position: fixed;
    bottom: calc(var(--float-gap) * 2);
    left: calc((100vw - var(--sheet-width) - var(--float-gap)) / 2);
    transform: translateX(-50%);
    white-space: nowrap;
  }
}

.poi-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* 꺼짐: 흰 바탕 + 속이 빈 색 동그라미 / 켜짐: 색으로 꽉 찬 바탕 + 흰 체크 + 바깥 색 테두리 + 개수 */
.poi-chip {
  gap: 6px;
  padding: 7px 12px 7px 9px;
  background: var(--glass);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-float);
  pointer-events: auto;
}

.poi-chip:hover {
  color: var(--text);
}

.poi-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.poi-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px var(--poi-color);
}

.poi-check {
  display: none;
}

.poi-count:empty {
  display: none;
}

.poi-count {
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--on-poi);
  color: var(--poi-color);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.poi-chip[aria-pressed="true"] {
  background: var(--poi-color);
  color: var(--on-poi);
  font-weight: 800;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--poi-color), 0 4px 12px rgb(16 24 20 / 25%);
}

.poi-chip[aria-pressed="true"] .poi-dot {
  display: none;
}

.poi-chip[aria-pressed="true"] .poi-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--on-poi);
  color: var(--poi-color);
}

.popup-notice {
  color: var(--notice-text);
}

.poi-status {
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: var(--shadow-float);
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: middle;
}


.line-sample {
  display: inline-block;
  width: 18px;
  height: 4px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--muted);
  opacity: 0.55;
  vertical-align: middle;
}

.legend-list {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.leaflet-popup-content-wrapper {
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-float);
}

.leaflet-popup-tip {
  background: var(--surface);
}

.leaflet-popup-content {
  margin: 14px 18px;
}

.popup {
  display: grid;
  gap: 2px;
  font-size: 0.85rem;
}

.popup strong {
  font-size: 1rem;
}

/* 말풍선 안 항목 사이 가로선 (사용자 요청): 노선·이름 머리 아래부터 한 줄씩 나눈다 */
.popup > strong ~ * {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.popup-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--muted);
}

.popup-route {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
}

.popup-route::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--route-color);
}

/* 말풍선 닫기 버튼: 글꼴 문자(×) 대신 선 아이콘을 동그란 버튼 정가운데에 (사용자 지적: 삐뚤어 보임) */
.leaflet-container a.leaflet-popup-close-button {
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 0;
}

.leaflet-container a.leaflet-popup-close-button::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.leaflet-bar {
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: var(--shadow-float) !important;
}

.leaflet-bar a {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.leaflet-bottom.leaflet-right {
  margin: 0 var(--float-gap) var(--float-gap) 0;
}

.leaflet-control-attribution {
  border-radius: 8px;
  background: var(--glass) !important;
  color: var(--muted);
}

/* ===== 인증 현황 ===== */
.summary {
  display: grid;
  gap: 10px;
}

.ring-card {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ring-card h2 {
  margin-bottom: 2px;
}

.ring .ring-track {
  stroke: var(--surface-2);
}

.ring .ring-value {
  stroke: var(--accent);
  transition: stroke-dashoffset 0.6s ease;
}

.ring text {
  fill: var(--text);
  font-size: 1.1rem;
  font-weight: 800;
}

.passport-routes {
  display: grid;
  gap: 8px;
}

.passport-route {
  padding: 14px 18px;
}

.passport-route summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.passport-route summary::-webkit-details-marker {
  display: none;
}

.passport-route summary strong {
  flex: 1;
}

.passport-route[open] summary {
  margin-bottom: 12px;
}

.center-checks {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

/* ===== 일정 ===== */
.planner-form {
  display: grid;
  gap: 12px;
}

/* 접을 수 있는 카드 (일정 조건, 날짜별 카드) */
.fold > summary {
  cursor: pointer;
  list-style: none;
}

.fold > summary::-webkit-details-marker {
  display: none;
}

.fold-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 3px auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
}

.fold[open] > summary .fold-chevron {
  margin-bottom: 4px;
  transform: rotate(45deg);
}

.fold[open] > summary .fold-summary {
  display: none;
}

.plan-options > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.plan-options > summary .fold-summary {
  flex-basis: 100%;
  order: 3;
}

.plan-options[open] > summary {
  margin-bottom: 14px;
}

.plan-arrive + .fold-chevron {
  margin-left: 10px;
}

.plan-leg .fold-summary {
  margin-left: 8px;
  font-weight: 600;
}

.planner-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.planner-form label[hidden] {
  display: none;
}

/* 출발·도착 인증센터는 한 줄에 나란히 */
.plan-stops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 안동댐 버스 이용 안내: 선택 상자 바로 아래 (사용자 요청) */
.plan-detour-notice {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--notice-bg);
  color: var(--notice-text);
  font-weight: 600;
  line-height: 1.5;
  word-break: keep-all;
}

.plan-detour-notice[hidden] {
  display: none;
}

.plan-transit {
  color: var(--notice-text);
  font-weight: 700;
}

.planner-form input,
.planner-form select {
  color: var(--text);
  font-weight: 500;
}

.plan-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.plan-days {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.plan-day[hidden] {
  display: none;
}

.plan-day {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.plan-day-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.day-no {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 800;
}

/* 날짜 카드 안의 묶음(거리·고도 / 날씨 / 노선 / 숙소) 사이에 구분선 (사용자 요청) */
.plan-day .plan-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.plan-lodging-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.plan-count {
  color: var(--muted);
  font-weight: 700;
}

.plan-count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.plan-fold-all {
  display: flex;
  gap: 4px;
}

.text-button {
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.text-button:hover {
  background: var(--surface-2);
  color: var(--text);
  filter: none;
}

.day-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.day-stats dt {
  font-size: 0.72rem;
  color: var(--muted);
}

.day-stats dd {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.day-stats dd small {
  margin-left: 1px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.profile {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
}

.profile-area {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
}

.profile-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.profile-line {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 1.5;
}

.profile-day {
  stroke: var(--poi-lodging);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.profile-label,
.profile-axis {
  fill: var(--muted);
  font-size: 9px;
}

.plan-weather {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
}

/* 날씨 항목은 칩으로 나눠 한눈에 구분되게 한다 (안내 문장일 때는 그냥 글로 보인다) */
.plan-weather {
  flex-direction: column;
  align-items: stretch;
}

/* 지나는 곳마다 한 줄: 이름 · 날씨·기온 · 강수 · 바람 (사용자 요청: 길 중간중간 날씨) */
.wx-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  padding: 6px 0;
  font-size: 0.8rem;
}

.wx-row + .wx-row {
  border-top: 1px dashed var(--border);
}

/* 지점 이름은 윗줄에 다 보이게 (사용자 지적: 잘리면 어디 날씨인지 모른다), 날씨는 아랫줄 */
.wx-place {
  grid-column: 1 / -1;
  color: var(--text);
  word-break: keep-all;
}

.wx-row .wx-wind {
  justify-self: end;
}

.wx-main {
  color: var(--text);
  font-weight: 700;
}

.wx-wind {
  font-weight: 700;
}

.wind-arrow {
  display: inline-block;
  font-style: normal;
}

.plan-notice {
  margin-top: 12px;
}

.plan-leg {
  margin-top: 8px;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.plan-lodging {
  flex: 1 1 160px;
  color: var(--muted);
  word-break: keep-all;
}

.plan-day .show-lodging {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.plan-arrive {
  margin-left: auto;
  color: var(--accent-strong);
  font-size: 0.85rem;
  font-weight: 800;
}

/* 내 위치 버튼: 넓은 화면은 확대·축소 버튼 위, 휴대폰은 시설 버튼 줄 아래 오른쪽 */
/* 넓은 화면: 내 위치는 지도 왼쪽 위 (사용자 요청) */
.locate-btn {
  position: fixed;
  left: var(--float-gap);
  top: calc(var(--float-gap) * 2 + var(--header-h));
  z-index: 800;
  gap: 6px;
  padding: 9px 14px;
  background: var(--glass);
  color: var(--text);
  font-size: 0.85rem;
  box-shadow: var(--shadow-float);
}

.locate-btn[aria-pressed="true"] {
  background: var(--locate);
  color: var(--on-poi);
}

.locate-btn.finding .icon {
  animation: locate-pulse 1s ease-in-out infinite;
}

@keyframes locate-pulse {
  50% { opacity: 0.3; }
}

.locate-message {
  position: fixed;
  left: calc(var(--float-gap) + 120px);
  top: calc(var(--float-gap) * 2 + var(--header-h));
  z-index: 800;
  max-width: 300px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--notice-bg);
  color: var(--notice-text);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: var(--shadow-float);
}

/* 인증센터 푯말 (사용자 요청: 주변 시설 점과 구분). 아이콘 크기 0인 자리에서 기둥 끝이 지점에 오게 세운다 */
.center-sign {
  overflow: visible;
}

.center-sign .sign {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  cursor: pointer;
}

.sign-board {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px;
  border: 2px solid var(--route-color);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 2px 6px rgb(0 0 0 / 28%);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* "인증" 표시: 노선 색 바탕 */
.sign-mark {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--route-color);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

/* 한글 글꼴이 줄 상자 아래쪽으로 치우쳐 상자와 높이가 어긋나 보여 살짝 올린다 */
.sign-label,
.sign-name {
  position: relative;
  top: -1px;
}

.sign-name {
  display: none;
}

.show-sign-names .sign-name {
  display: inline;
  padding-right: 4px;
}

.sign-pole {
  width: 3px;
  height: 9px;
  border-radius: 0 0 2px 2px;
  background: var(--route-color);
  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

.center-sign-lg .sign-board {
  font-size: 12px;
}

/* 고른 것 강조 (사용자 요청): 지도 전체를 덮는 어두운 막. 지도를 따라 움직이는 층이라 넉넉히 크게 깐다 */
.map-dim {
  position: absolute;
  top: -100000px;
  left: -100000px;
  width: 200000px;
  height: 200000px;
  background: rgb(10 15 12 / 45%);
  opacity: 0;
  transition: opacity 0.15s;
}

.map-focus .map-dim {
  opacity: 1;
}

/* 휴대폰만: 말풍선이 열려 막이 덮인 동안에는 지도 위에 떠 있는 버튼들을 숨긴다 (사용자 지적: 말풍선을 가린다) */
@media (max-width: 720px) {
  body.map-focused .poi-bar,
  body.map-focused .sign-toggle,
  body.map-focused .fit-toggle,
  body.map-focused .locate-btn,
  body.map-focused .locate-message {
    visibility: hidden;
  }
}

/* 막이 덮인 동안 +/− 버튼도 막는다 */
.map-focus .leaflet-control-zoom {
  opacity: 0.4;
  pointer-events: none;
}

/* 말풍선이 열린 것 말고 다른 인증센터 푯말은 흐리게 */
.map-focus .center-sign {
  opacity: 0.3;
  transition: opacity 0.15s;
}

.map-focus .center-sign.focused {
  z-index: 3000 !important;
  opacity: 1;
}

.center-sign-lg .sign-pole {
  height: 11px;
}

/* 지도 위 숙박 지점 번호 */
/* 일정의 숙박 지점: 숫자만 있으면 뭔지 몰라 "1일차 숙박"으로 적는다 (사용자 지적) */
.plan-stop-icon {
  background: none;
  border: 0;
}

.plan-stop {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--poi-lodging);
  color: var(--on-poi);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--surface), 0 2px 6px rgb(0 0 0 / 30%);
}

.plan-stop-icon .plan-stop {
  transform: translate(-50%, -50%);
}

.plan-legend .plan-stop {
  margin-right: 4px;
  box-shadow: none;
}

/* ===== 준비 가이드 ===== */
.info-list dt {
  margin-top: 12px;
  font-weight: 700;
}

.info-list dd {
  color: var(--muted);
  font-size: 0.92rem;
}

.check-group ul {
  padding: 0;
  list-style: none;
}

.check-group li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.check-group li:last-child {
  border-bottom: 0;
}

.check-group li.done span {
  color: var(--muted);
  text-decoration: line-through;
}

.inline-form {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.inline-form input {
  flex: 1;
  min-width: 0;
}

.source-list li {
  padding: 3px 0;
  font-size: 0.9rem;
}

/* 전체 화면에서는 떠 있는 카드를 모두 숨기고 지도만 보여준다 */
:fullscreen .header,
:fullscreen .sheet,
:fullscreen .tab-bar {
  display: none;
}

/* ===== 휴대폰: 위에 머리글, 아래에 시트와 탭 메뉴 ===== */
@media (max-width: 720px) {
  /* 아이폰은 16px보다 작은 입력칸을 누르면 화면을 확대한다 */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  :root {
    --attr-space: 20px; /* 화면 위 지도 출처 한 줄 높이 */
    --m-top: calc(var(--float-gap) * 3 + var(--header-h) + var(--attr-space)); /* 지도 위 버튼들이 시작하는 높이 */
    /* 휴대폰에서는 머리글을 숨긴다 (사용자 요청). 머리글 자리는 노치 영역만큼만 남긴다 */
    --header-h: calc(env(safe-area-inset-top, 0px) - var(--float-gap));
  }

  .header {
    display: none;
  }

  :root {
    --float-gap: 10px;
  }

  .top-nav {
    display: none;
  }

  .tab-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: grid;
    grid-auto-columns: 1fr; /* 메뉴 수에 맞춰 칸을 똑같이 나눈다 (지금은 코스·일정·출처·사용법 4개) */
    grid-auto-flow: column;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 6px 4px env(safe-area-inset-bottom);
    background: var(--glass);
    border-top: 1px solid var(--border);
  }

  .tab-bar a,
  .tab-bar .nav-help {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
  }

  .tab-bar .nav-help {
    justify-content: center;
    margin: 0 8px;
    background: #111;
    color: #fff;
    border-radius: 14px;
    box-shadow: none;
  }

  .tab-bar a:hover {
    text-decoration: none;
  }

  .tab-bar a.active {
    color: var(--accent-strong);
  }

  /* 아래에서 올라오는 시트 */
  /* 휴대폰: 목록(코스·일정)은 화면 전체를 덮고, 접으면 손잡이만 남아 지도를 전체로 본다 (사용자 요청: 동시에 볼 일이 없다) */
  .sheet {
    top: auto;
    transform: none;
    right: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    left: 0;
    width: auto;
    height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom));
    padding-top: env(safe-area-inset-top);
    border-radius: 0;
  }

  body.sheet-collapsed .sheet {
    padding-top: 0;
    border-radius: 24px 24px 0 0;
  }

  /* 목록이 화면을 덮고 있는 동안에는 지도 위 버튼을 숨긴다 */
  body:not(.sheet-collapsed) .poi-bar,
  body:not(.sheet-collapsed) .sign-toggle,
  body:not(.sheet-collapsed) .fit-toggle,
  body:not(.sheet-collapsed) .locate-btn,
  body:not(.sheet-collapsed) .locate-message {
    visibility: hidden;
  }

  body.sheet-collapsed .sheet {
    height: 60px;
    transform: none;
  }

  .sheet-tools,
  body.sheet-collapsed .sheet-tools {
    position: static;
    display: block;
  }

  /* 휴대폰: 왼쪽 열 = 인증센터 이름, 코스 전체 보기, 그 아래 시설 버튼(세로). 오른쪽 열 = 내 위치 (사용자 요청) */
  .sign-toggle,
  .fit-toggle {
    position: fixed;
    top: var(--m-top);
    left: var(--float-gap);
    z-index: 800;
    padding: 8px 13px;
  }

  .fit-toggle {
    top: calc(var(--m-top) + 44px);
  }

  .sheet-toggle,
  body.sheet-collapsed .sheet-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 8px 0 4px;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: 0.75rem;
  }

  .sheet-handle {
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--border);
  }

  .sheet-body {
    padding: 4px 16px 20px;
  }

  body.sheet-collapsed .sheet-body {
    display: none;
  }

  /* 확대 버튼은 손가락으로 대신하고, 출처 표기는 머리글 아래로 옮겨 시트에 가리지 않게 한다 */
  .leaflet-control-zoom {
    display: none;
  }

  /* 지도 출처 표기는 머리글 바로 아래 오른쪽 한 줄 (버튼과 겹치지 않게, 사용자 지적). 그 아래 것들은 --attr-space만큼 내린다 */
  .leaflet-bottom.leaflet-left {
    top: calc(var(--float-gap) * 2 + var(--header-h) - 6px);
    right: var(--float-gap);
    bottom: auto;
    left: auto;
  }

  .leaflet-bottom.leaflet-left .leaflet-control-attribution {
    margin: 0;
    border-radius: 6px;
    font-size: 10px;
  }

  /* 시설 버튼은 '코스 전체 보기' 아래로 세로로 (사용자 요청). 목록 시트보다 위에 둬서 가리지 않게 한다 */
  .poi-bar {
    top: calc(var(--m-top) + 88px);
    right: auto;
    left: var(--float-gap);
    z-index: 950;
    align-items: flex-start;
  }

  .poi-chips {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 5px;
  }

  .poi-chip {
    flex-shrink: 0;
    padding: 5px 11px;
    font-size: 0.78rem;
  }

  /* 상태 안내("지도를 조금 더 확대하면…")는 아래쪽 가운데, 접힌 목록 손잡이 바로 위 (사용자 요청) */
  .poi-bar .poi-status {
    position: fixed;
    top: auto;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 60px + 12px);
    left: 50%;
    max-width: calc(100vw - var(--float-gap) * 4);
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .locate-btn {
    top: var(--m-top);
    right: var(--float-gap);
    bottom: auto;
    left: auto;
  }

  .locate-message {
    top: calc(var(--m-top) + 44px);
    right: var(--float-gap);
    bottom: auto;
    left: auto;
    max-width: 60vw;
  }

}


/* ===== 출처 레이어 팝업 (사용자 요청): 화면 가운데, 뒤는 어둡게 ===== */
.layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: var(--float-gap);
  background: rgb(0 0 0 / 45%);
  animation: layer-fade 0.15s ease-out;
}

.layer[hidden] {
  display: none;
}

@keyframes layer-fade {
  from { opacity: 0; }
}

.layer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(84dvh, 900px);
  border-radius: 24px;
  background: var(--sheet-bg);
  box-shadow: var(--shadow-lg);
}

.layer-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border-radius: inherit;
}

.layer-body > section > * + * {
  margin-top: 14px;
}

.layer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.layer-close svg {
  display: block;
}

.layer-body::-webkit-scrollbar {
  width: 12px;
}

.layer-body::-webkit-scrollbar-track {
  margin: 18px 0;
  background: transparent;
}

.layer-body::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent) padding-box;
}

/* 주변 시설 안내 팝업 (시설 버튼을 처음 누를 때 한 번) */
.notice-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: var(--float-gap);
  background: rgb(0 0 0 / 45%);
  animation: layer-fade 0.15s ease-out;
}

.notice-modal-card {
  width: min(440px, 100%);
  padding: 24px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.notice-modal-card h2 {
  font-size: 1.1rem;
}

.notice-modal-text {
  margin-top: 10px;
  color: var(--text);
  line-height: 1.6;
  word-break: keep-all;
}

.notice-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.notice-modal-actions button {
  padding: 8px 14px;
  font-size: 0.88rem;
}

/* 직접 만든 선택 상자 (src/components/select.js, 사용자 요청: 기본 선택 상자 모양 대신) */
.select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.select {
  position: relative;
}

.select-button {
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  text-align: left;
}

.select-button:hover {
  filter: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.select-button:focus-visible,
.select.open .select-button {
  border-color: var(--accent);
  outline: none;
}

.select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-chevron {
  flex: none;
  color: var(--muted);
  transition: transform 0.15s;
}

.select.open .select-chevron {
  transform: rotate(180deg);
}

.select-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 300px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
  list-style: none;
}

.select-list[hidden] {
  display: none;
}

.select-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
}

.select-list li.active {
  background: var(--surface-2);
}

.select-list li.selected {
  color: var(--accent-strong);
  font-weight: 700;
}

.select-check {
  flex: none;
}

.select-list::-webkit-scrollbar {
  width: 12px;
}

.select-list::-webkit-scrollbar-track {
  margin: 8px 0;
  background: transparent;
}

.select-list::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent) padding-box;
}

.wx-wind.wind-head {
  color: var(--danger);
}

.wx-wind.wind-tail {
  color: var(--accent-strong);
}

/* ===== 사용법 안내(튜토리얼) ===== */
.tutorial {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

/* 비출 곳: 둘레 그림자로 나머지 화면을 어둡게 한다 */
.tutorial-spot {
  position: fixed;
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 58%);
  transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
  pointer-events: none;
}

.tutorial-card {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  padding: 20px 20px 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transition: left 0.2s, top 0.2s;
}

.tutorial[data-busy] .tutorial-card {
  opacity: 0.6;
}

.tutorial-skip {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.tutorial-step {
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
}

.tutorial-title {
  margin-top: 4px;
  font-size: 1.1rem;
}

.tutorial-em {
  color: var(--accent-strong);
  font-weight: 700;
}

.tutorial-text {
  margin-top: 8px;
  line-height: 1.6;
  word-break: keep-all;
}

.tutorial-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.tutorial-nav button {
  padding: 8px 16px;
}

.tutorial-nav button[hidden] {
  display: none;
}

.tutorial-hide {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* 겹친 시설 점 묶음 (개수 원, 누르면 확대) */
.poi-cluster-icon {
  background: none;
  border: 0;
}

.poi-cluster {
  display: grid;
  place-items: center;
  border: 2.5px solid var(--surface);
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgb(0 0 0 / 28%);
  cursor: pointer;
}

/* PC: 켠 시설 목록 (지도 왼쪽, 내 위치 아래). 시설 종류별로 나누고 종류마다 접는다. 휴대폰에서는 보이지 않는다 */
.poi-list {
  position: fixed;
  top: calc(var(--float-gap) * 2 + var(--header-h) + 52px);
  left: var(--float-gap);
  /* 항목 수만큼만 길어지고, 아래 지도 출처 한 줄은 비운다 */
  max-height: calc(100dvh - var(--float-gap) * 3 - var(--header-h) - 52px - 22px);
  z-index: 800;
  display: flex;
  flex-direction: column;
  width: 250px;
  border-radius: 18px;
  background: var(--sheet-bg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.poi-list[hidden] {
  display: none;
}

.poi-list > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 10px 16px;
  border-bottom: 1px solid var(--border);
}

.poi-list > header strong {
  font-size: 0.92rem;
}

.poi-list-count {
  margin-left: 4px;
  color: var(--accent-strong);
}

.poi-list-body {
  flex: 1;
  padding: 4px 6px 8px;
  overflow-y: auto;
}

.poi-list.folded .poi-list-body {
  display: none;
}

/* 목록 스크롤바: 목록 카드와 같은 얇은 알약 모양 (사용자 요청: 기본 스크롤바가 촌스럽다) */
.poi-list-body::-webkit-scrollbar {
  width: 10px;
}

.poi-list-body::-webkit-scrollbar-track {
  margin: 8px 0;
  background: transparent;
}

.poi-list-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent) padding-box;
}

.poi-list-body::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--muted) 60%, transparent);
}

.poi-list-body::-webkit-scrollbar-button {
  display: none;
}

@supports not selector(::-webkit-scrollbar) {
  .poi-list-body {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent;
  }
}

.poi-group + .poi-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* 종류 머리: 누르면 접고 편다 */
.poi-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--sheet-bg);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

.poi-group-head:hover {
  background: var(--surface-2);
}

.poi-group-count {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.poi-group-chevron {
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s;
}

.poi-group.folded .poi-group-chevron {
  transform: rotate(-90deg);
}

.poi-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.poi-list-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 10px 7px 28px;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  text-align: left;
  box-shadow: none;
}

.poi-list-item:hover {
  background: var(--surface-2);
}

.poi-list-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}

.poi-list-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poi-list-more {
  padding: 8px 10px 8px 28px;
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 720px) {

  .poi-list {
    display: none !important;
  }
}

/* 팝업 위 작은 안내: ESC나 오른쪽 클릭으로도 닫힌다 (사용자 요청). 마우스·키보드가 있는 기기에서만 */
@media (hover: hover) and (pointer: fine) {
  .leaflet-popup::before,
  .layer-card::before {
    content: 'ESC나 오른쪽 클릭으로도 닫혀요';
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 1;
    padding: 4px 10px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    transform: translate(-50%, -8px);
    pointer-events: none;
  }
}