/* 사이트 기능 "마을버스 - 마을버스 찾기"(/site/village-bus, 2026-11-11) 전용 스타일. 이 페이지에서만 싣는다(site_features/_village_bus 파셜이 head 에
   dynamic 추적 스타일시트로 건다 - 지하철·버스 노선·고속버스와 같은 방식).

   **Tailwind 를 거치지 않는 순수 CSS 다**(Propshaft 가 그대로 내보낸다). dark: 변형을 쓸 수 없어 테마는 조상 셀렉터(.dark)로 가른다.

   무대(하늘 바탕의 섬 디오라마)와 찾기 막대(짙은 숲 초록 판, 위 가장자리에 연두·흰 줄 - 마을버스 색)는 테마와 무관하다. 결과 칸은 사이트 테마를
   따르는 종이 카드다(초록 번호 배지·정류장 띠). 글자 크기는 em 으로 적고 뿌리에서 큰글씨 배율(--silver-scale)을 한 번 곱한다. 막대 위 흰 글자는
   바탕과 4.5:1 이 넘게 짙은 초록에 둔다. */

.vb {
  --vb-forest: #1f5132;
  --vb-forest-deep: #133621;
  --vb-green: #2f8a4c;
  --vb-green-deep: #1d6b37;
  --vb-leaf: #8bd16a;
  --vb-leaf-soft: #e6f4dc;
  --vb-ink: #102a1b;
  --vb-paper: #ffffff;
  --vb-paper-2: #f6faf2;
  --vb-rule: #dfe9d8;
  --vb-muted: #4b5a50;
  --vb-warn: #b45309;
  font-size: calc(1rem * var(--silver-scale, 1));
}
.dark .vb {
  --vb-ink: #e8f3ea;
  --vb-paper: #0f1a14;
  --vb-paper-2: #13221a;
  --vb-rule: #23392b;
  --vb-muted: #a9bdb0;
  --vb-leaf-soft: #1c3324;
  --vb-warn: #fbbf24;
}

/* ── 무대 카드 ── */
.vb-card {
  border-radius: 1.25rem;
  background: var(--vb-forest);
  box-shadow: 0 0 0 1px rgb(31 81 50 / 0.35), 0 18px 40px -18px rgb(15 42 25 / 0.55);
}
.vb-stage {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem 1.25rem 0 0;
  min-height: 16rem;
  background-color: #cfe7f8;
  background-image: linear-gradient(180deg, #a9d4f3 0%, #dff0fb 100%);
  background-size: cover;
  background-position: center 55%;
  isolation: isolate;
  touch-action: none;
}
.vb-stage::before { content: ""; display: block; padding-top: 62%; }
@media (min-width: 1024px) {
  .vb-stage::before { padding-top: min(62%, calc(50vh - 4rem)); }
  .vb-stage { min-height: 18rem; }
}
@media (max-width: 639px) {
  .vb-stage::before { padding-top: 92%; }
}
@media (any-pointer: coarse) {
  .vb-stage { touch-action: pan-y; }
}
.vb-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.vb-stage[data-gl="gpu"] canvas,
.vb-stage[data-gl="software"] canvas { opacity: 1; }
.vb-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vb-stage-label {
  pointer-events: none;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  background: var(--vb-forest-deep);
  color: #fff;
  font-size: 0.7em;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgb(15 23 42 / 0.7);
}
.vb-stage-label-turn { background: #7c5a12; }
.vb-stage-label-from { background: #1f5fbf; font-size: 0.76em; }
.vb-stage-label-to { background: #c0392b; font-size: 0.76em; }
.vb-stage-head { position: absolute; top: 0.9em; left: 0.9em; right: 0.9em; z-index: 2; pointer-events: none; }
.vb-eyebrow {
  display: inline-block;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.9);
  color: var(--vb-forest);
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.vb-title {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.35em;
  padding: 0.12em 0.45em;
  border-radius: 0.45em;
  background: rgb(255 255 255 / 0.88);
  color: var(--vb-forest-deep);
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.2;
  word-break: keep-all;
}
@media (max-width: 639px) {
  .vb-title { font-size: 1.15em; }
}
.vb-stage-caption {
  position: absolute;
  right: 0.9em;
  bottom: 0.8em;
  z-index: 2;
  max-width: 70%;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  background: rgb(19 54 33 / 0.88);
  color: #fff;
  font-size: 0.78em;
  font-weight: 800;
  pointer-events: none;
  word-break: keep-all;
}
.vb[data-stage="none"] .vb-stage-caption,
.vb-stage[data-gl="none"] .vb-stage-caption { display: none; }

/* ── 찾기 막대 ── */
.vb-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.25em 1em 1.1em;
  border-radius: 0 0 1.25rem 1.25rem;
  background: linear-gradient(180deg, var(--vb-forest) 0%, var(--vb-forest-deep) 100%);
  color: #fff;
}
.vb-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--vb-leaf) 0 2.2em, #ffffff 2.2em 2.6em);
}
.vb-tagline { font-size: 0.85em; line-height: 1.55; color: #e4f2e7; word-break: keep-all; }
.vb-bar .vb-note { color: #e4f2e7; }
.vb-form { display: flex; flex-direction: column; gap: 0.8em; container-type: inline-size; }
.vb-form-search { padding-top: 0.9em; border-top: 1px solid rgb(255 255 255 / 0.12); }
.vb-form-row { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: flex-end; }
.vb-field { display: flex; min-width: 0; flex: 1 1 12em; flex-direction: column; }
.vb-field-grow { flex: 1 1 14em; }
.vb-label { display: block; margin-bottom: 0.3em; font-size: 0.75em; font-weight: 700; color: #d9ecdf; }
.vb-select {
  min-width: 0;
  width: 100%;
  min-height: 2.75em;
  padding: 0.45em 0.7em;
  border: 0;
  border-radius: 0.7em;
  background-color: #fff;
  color: #111827;
  font-size: 0.95em;
  font-weight: 700;
}
.vb-select::placeholder { color: #6b7280; font-weight: 600; }
.vb-select:focus-visible { outline: 3px solid var(--vb-leaf); outline-offset: 2px; }
.vb-select:disabled { background-color: #e5e7eb; color: #4b5563; cursor: not-allowed; }
.vb-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3em;
  padding: 0.25em;
  border-radius: 0.9em;
  background: rgb(0 0 0 / 0.22);
}
.vb-mode { position: relative; display: flex; }
.vb-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vb-mode span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5em;
  padding: 0.3em 0.6em;
  border-radius: 0.7em;
  color: #cfe5d6;
  font-size: 0.9em;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.vb-mode input:checked + span { background: var(--vb-leaf); color: var(--vb-forest-deep); }
.vb-mode input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.vb-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9em;
  padding: 0.5em 1.4em;
  border: 0;
  border-radius: 0.85em;
  background: var(--vb-leaf);
  color: var(--vb-forest-deep);
  font-size: 1em;
  font-weight: 900;
  box-shadow: 0 3px 0 #5ea845;
  cursor: pointer;
}
.vb-submit:active { transform: translateY(1px); box-shadow: 0 2px 0 #5ea845; }
.vb-submit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* 지도 창 카드는 밝은 바탕이라 흰 테가 보이지 않는다(검수 11-11). */
.vbm-card .vb-submit:focus-visible { outline-color: var(--vb-green-deep); }
.dark .vbm-card .vb-submit:focus-visible { outline-color: #fff; }
.vb-submit-inline { flex: none; min-width: 6em; }
.vb-submit-sm { min-height: 2.4em; padding: 0.35em 1em; font-size: 0.9em; }

/* ── 자주 찾는 노선·최근 본 노선 칩(2026-11-12) ── 지하철·버스 노선의 자주 찾는 칩과 같은 꼴(이름표 옆 남은 폭에서 줄을 바꾼다). 초록 막대 위라
   흰 글자, 다른 지역의 최근 노선은 옅은 지역 이름을 붙인다. */
.vb-quick { display: grid; gap: 0.45em; padding-top: 0.75em; border-top: 1px solid rgb(255 255 255 / 0.12); }
.vb-quick:not(:has(.vb-chips:not([hidden]))) { display: none; }
.vb-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.35em; }
.vb-chips[hidden] { display: none; }
/* 이름표는 첫 줄 칩과 같은 높이(칩 2.2em × 0.78 = 1.716em, 이름표 글자 0.72em). */
.vb-chips-label { margin: 0 0.2em 0 0; font-size: 0.72em; font-weight: 800; line-height: 2.383; color: #cfe7d6; white-space: nowrap; }
.vb-chips-list { display: flex; flex: 1 1 14em; min-width: 0; flex-wrap: wrap; gap: 0.35em; margin: 0; padding: 0; list-style: none; }
.vb-chip {
  min-height: 2.2em;
  padding: 0.3em 0.8em;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  color: #eef8f0;
  font-size: 0.78em;
  font-weight: 800;
  cursor: pointer;
}
.vb-chip:hover { background: rgb(255 255 255 / 0.22); color: #fff; }
.vb-chip:focus-visible, .vb-chips-clear:focus-visible { outline: 3px solid var(--vb-leaf); outline-offset: 2px; }
.vb-chip-sub { margin-left: 0.35em; color: #b8d6c2; font-weight: 600; }
.vb-chips-clear {
  min-height: 2.2em;
  padding: 0.3em 0.6em;
  border: 0;
  background: transparent;
  color: #cfe7d6;
  font-size: 0.72em;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ── 상태 줄·안내 ── */
.vb-status { min-height: 1.4em; color: var(--vb-muted); font-size: 0.88em; font-weight: 700; word-break: keep-all; scroll-margin-top: 5.5rem; }
.vb-status[data-tone="error"] { color: #b42318; }
.dark .vb-status[data-tone="error"] { color: #fca5a5; }
.vb-status:empty { min-height: 0; }
.vb-note { margin: 0.4em 0; color: var(--vb-muted); font-size: 0.88em; line-height: 1.55; word-break: keep-all; }
.vb-note-sm { font-size: 0.78em; }
.vb-note-info { padding: 0.45em 0.7em; border-radius: 0.6em; background: var(--vb-leaf-soft); color: var(--vb-ink); }
.vb-dim { color: var(--vb-muted); font-size: 0.8em; }
.vb-warn { color: var(--vb-warn); font-size: 0.82em; font-weight: 800; }
.vb-source { margin-top: 0.8em; color: var(--vb-muted); font-size: 0.72em; word-break: keep-all; }
.vb-source-line { color: #6b7280; font-size: 0.72em; word-break: keep-all; }
.dark .vb-source-line { color: #9ca3af; }

/* ── 결과 카드 ── */
.vb turbo-frame[hidden] { display: none; }
.vb-result {
  padding: 1em 1em 0.9em;
  border-radius: 1.1rem;
  background: var(--vb-paper);
  color: var(--vb-ink);
  box-shadow: 0 0 0 1px var(--vb-rule), 0 14px 30px -22px rgb(15 42 25 / 0.5);
}
.vb-result-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3em 0.8em; margin-bottom: 0.7em; }
.vb-result-title { display: inline-flex; align-items: center; gap: 0.4em; margin: 0; font-size: 1.08em; font-weight: 900; word-break: keep-all; }
.vb-result-meta { margin: 0; color: var(--vb-muted); font-size: 0.78em; font-weight: 700; }
.vb-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6em;
  padding: 0.18em 0.6em;
  border-radius: 0.55em;
  background: var(--vb-green-deep);
  color: #fff;
  font-size: 0.86em;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 #124a26;
}
.vb-no-lg { min-width: 4.4em; padding: 0.3em 0.75em; font-size: 1.1em; }
.vb-no-other { background: #64748b; box-shadow: inset 0 -3px 0 #475569; }
.vb-routes, .vb-stops-found { display: grid; gap: 0.4em; margin: 0; padding: 0; list-style: none; }
.vb-route-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 0.7em;
  border: 0;
  border-radius: 0.8em;
  background: var(--vb-paper-2);
  color: inherit;
  text-align: left;
  box-shadow: 0 0 0 1px var(--vb-rule);
  cursor: pointer;
}
.vb-route-row:hover { box-shadow: 0 0 0 2px var(--vb-green); }
.vb-route-row:focus-visible { outline: 3px solid var(--vb-green); outline-offset: 2px; }
.vb-route-main { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.15em; }
.vb-ends { font-size: 0.92em; font-weight: 800; overflow-wrap: anywhere; }
.vb-route-facts { display: flex; flex-wrap: wrap; gap: 0.1em 0.8em; color: var(--vb-muted); font-size: 0.78em; font-weight: 700; }
.vb-route-go { flex: none; width: 1.1em; height: 1.1em; color: var(--vb-green); }
.vb-stop-icon {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--vb-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2'%3E%3Crect x='5' y='4' width='14' height='13' rx='3'/%3E%3Cpath d='M5 11h14M8 20v-3m8 3v-3'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ── 노선 상세 ── */
.vb-route-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6em 0.8em; margin-bottom: 0.8em; }
.vb-route-head > .min-w-0 { flex: 1 1 10em; }
.vb-route-title { margin: 0; font-size: 1.05em; font-weight: 900; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.vb-route-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45em; margin-left: auto; }
/* 좁은 칸(390px·큰글씨) - 오른쪽 칸(조회 시각·[지도에서 보기])을 다음 줄로. 한 줄에 두면 띄어쓰기 없는 긴 정류장 이름이 단추 위로 겹쳤다(검수 11-11). */
@container (max-width: 30em) {
  .vb-route-side { flex: 1 0 100%; flex-direction: row; align-items: center; justify-content: space-between; margin-left: 0; }
}
.vb-mapbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.3em;
  padding: 0.3em 0.85em;
  border: 0;
  border-radius: 999px;
  background: var(--vb-green-deep);
  color: #fff;
  font-size: 0.82em;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 0 #124a26;
  cursor: pointer;
}
.vb-mapbtn svg { width: 1.15em; height: 1.15em; }
.vb-mapbtn:focus-visible { outline: 3px solid var(--vb-leaf); outline-offset: 2px; }
.vb-timetable-wrap { overflow-x: auto; margin: 0 -0.2em; padding: 0 0.2em; }
.vb-timetable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86em; }
.vb-timetable-cap { caption-side: top; margin-bottom: 0.35em; color: var(--vb-muted); font-size: 0.9em; font-weight: 800; text-align: left; }
.vb-timetable th, .vb-timetable td { padding: 0.45em 0.6em; border-bottom: 1px solid var(--vb-rule); text-align: left; white-space: nowrap; }
.vb-timetable thead th { color: var(--vb-muted); font-size: 0.86em; font-weight: 800; }
.vb-timetable tbody th { font-weight: 800; }
.vb-timetable td { font-variant-numeric: tabular-nums; font-weight: 700; }
.vb-timetable tr.is-today th, .vb-timetable tr.is-today td { background: var(--vb-leaf-soft); }
.vb-today-chip { margin-left: 0.3em; padding: 0.05em 0.45em; border-radius: 999px; background: var(--vb-green-deep); color: #fff; font-size: 0.78em; }

/* 두 정류장 */
.vb-trip-form {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin: 1em 0 0.6em;
  padding: 0.85em;
  border-radius: 0.9em;
  background: linear-gradient(180deg, var(--vb-forest) 0%, var(--vb-forest-deep) 100%);
  color: #fff;
}
.vb-trip-title { margin: 0; font-size: 0.95em; font-weight: 900; }
.vb-trip-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5em; }
.vb-trip-arrow { flex: none; padding-bottom: 0.6em; color: var(--vb-leaf); font-size: 1.2em; font-weight: 900; }
@container (max-width: 30em) {
  .vb-trip-arrow { display: none; }
}
.vb-trip-form .vb-submit { align-self: flex-start; }
.vb-trip-frame:empty { display: none; }
/* 고르는 칸과 결과를 한 카드로(2026-11-12) - 초록 머리(고르기) 아래에 결과가 이어 붙는다. 단추는 칸 아래 넓게(눈에 띄게, 엄지로 누르기 쉽게). */
.vb-trip-card { margin: 1em 0 0.6em; border-radius: 0.9em; overflow: hidden; background: var(--vb-paper); box-shadow: 0 0 0 1px var(--vb-rule), 0 8px 18px -14px rgb(19 54 33 / 0.6); }
.vb-trip-card .vb-trip-form { margin: 0; border-radius: 0; }
.vb-trip-form .vb-trip-go { align-self: stretch; min-height: 2.6em; font-size: 0.95em; }
.vb-trip-card .vb-trip-frame > .vb-note { margin: 0; border-radius: 0; }
.vb-trip { padding: 0.95em 0.95em 0.85em; background: var(--vb-paper); }
.vb-trip-ride { margin: 0; padding: 0.1em 0.6em; border-radius: 999px; background: var(--vb-green-deep); color: #fff; font-size: 0.9em; font-weight: 900; white-space: nowrap; }
/* 여정 띠 - 세 칸(탈 곳·가운데·내릴 곳) × 세 줄(큰 시각·선·이름). 이름이 길면 그 칸 안에서 줄을 바꾼다(가운데는 내용 폭). */
.vb-trip-journey { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.25em 0.6em; }
.vb-trip-journey > p { margin: 0; }
.vb-trip-clock { display: flex; flex-direction: column; min-width: 0; }
.vb-trip-clock-to { align-items: flex-end; text-align: right; }
.vb-trip-clock-label { color: var(--vb-muted); font-size: 0.74em; font-weight: 800; }
.vb-trip-clock-time { color: var(--vb-forest-deep); font-size: 1.75em; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dark .vb-trip-clock-time { color: var(--vb-leaf); }
.vb-trip-journey:not(.has-clock) .vb-trip-clock { display: none; }
.vb-trip-journey .vb-trip-ride { grid-column: 2; align-self: center; justify-self: center; }
.vb-trip-journey:not(.has-clock) .vb-trip-ride { justify-self: start; grid-column: 1 / -1; }
.vb-trip-rail { grid-column: 1 / -1; display: flex; align-items: center; margin: 0.35em 0 0.1em; }
.vb-trip-dot { flex: none; width: 0.95em; height: 0.95em; border-radius: 50%; background: var(--vb-paper); box-shadow: 0 0 0 3px var(--vb-green-deep); }
.vb-trip-dot:last-child { background: var(--vb-green-deep); }
.vb-trip-line { flex: 1; height: 4px; margin: 0 0.2em; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--vb-green) 0 0.9em, var(--vb-leaf) 0.9em 1.3em); }
.vb-trip-place { font-weight: 900; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.vb-trip-place-to { text-align: right; }
.vb-trip-facts { display: flex; flex-direction: column; align-items: center; color: var(--vb-muted); font-size: 0.74em; font-weight: 700; white-space: nowrap; text-align: center; }
.vb-trip-buses { display: grid; gap: 0.35em; margin: 0.6em 0 0.2em; padding: 0; list-style: none; }
.vb-trip-bus { display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; padding: 0.5em 0.7em; border-radius: 0.7em; background: var(--vb-paper); box-shadow: 0 0 0 1px var(--vb-rule); }
.vb-trip-wait { font-weight: 900; color: var(--vb-green-deep); }
.dark .vb-trip-wait { color: var(--vb-leaf); }
.vb-trip-times { font-variant-numeric: tabular-nums; font-weight: 800; }
.vb-trip-basis { margin: 0.6em 0 0.2em; font-weight: 800; word-break: keep-all; }
.vb-trip-sched { margin: 0.35em 0 0; color: var(--vb-muted); font-size: 0.82em; font-weight: 700; }

/* 운행 중 */
.vb-live { margin: 0.6em 0; padding: 0.6em 0.8em; border-radius: 0.8em; background: var(--vb-paper-2); box-shadow: inset 0 0 0 1px var(--vb-rule); }
.vb-live-title { display: flex; align-items: center; gap: 0.45em; margin: 0 0 0.2em; font-size: 0.9em; font-weight: 900; }
.vb-live-dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgb(34 197 94 / 0.25); animation: vb-pulse 1.6s ease-in-out infinite; }
@keyframes vb-pulse { 50% { box-shadow: 0 0 0 6px rgb(34 197 94 / 0.05); } }
.vb-live-refresh {
  margin-top: 0.4em;
  padding: 0.3em 0.9em;
  border: 0;
  border-radius: 999px;
  background: var(--vb-green-deep);
  color: #fff;
  font-size: 0.82em;
  font-weight: 800;
  cursor: pointer;
}
.vb-live-refresh:focus-visible { outline: 3px solid var(--vb-leaf); outline-offset: 2px; }

/* 정류장 띠 - 세로 줄 위에 점(지금 버스가 있는 정류장은 연두 점). */
.vb-stops { position: relative; display: grid; margin: 0.6em 0 0; padding: 0; list-style: none; }
.vb-stops::before { content: ""; position: absolute; top: 0.9em; bottom: 0.9em; left: 1.07em; width: 3px; border-radius: 3px; background: var(--vb-green); opacity: 0.55; }
.vb-stops-leg { position: relative; margin: 0.4em 0 0.2em 2.1em; color: var(--vb-green-deep); font-size: 0.78em; font-weight: 900; }
.dark .vb-stops-leg { color: var(--vb-leaf); }
.vb-stop-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.7em;
  padding: 0.45em 0.6em 0.45em 0.7em;
  border: 0;
  border-radius: 0.6em;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.vb-stop-btn:hover { background: var(--vb-paper-2); }
.vb-stop-btn:focus-visible { outline: 3px solid var(--vb-green); outline-offset: -2px; }
.vb-stop-static { cursor: default; }
.vb-stop-static:hover { background: none; }
.vb-stop-dot { position: relative; z-index: 1; flex: 0 0 auto; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--vb-paper); box-shadow: 0 0 0 3px var(--vb-green); }
.vb-stop.is-turn .vb-stop-dot { background: #f59e0b; box-shadow: 0 0 0 3px #b45309; }
.vb-stop[data-bus="true"] .vb-stop-dot { background: var(--vb-leaf); box-shadow: 0 0 0 3px var(--vb-green-deep), 0 0 0 6px rgb(139 209 106 / 0.4); }
.vb-stop-main { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; align-items: center; gap: 0.3em 0.5em; }
.vb-stop-name { font-weight: 800; overflow-wrap: anywhere; }
.vb-turn-chip { padding: 0.02em 0.45em; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 0.72em; font-weight: 900; }
.vb-stop-bus { padding: 0.02em 0.5em; border-radius: 999px; background: var(--vb-leaf); color: var(--vb-forest-deep); font-size: 0.74em; font-weight: 900; }
.vb-stop-times { flex: none; color: var(--vb-muted); font-size: 0.74em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 좁은 칸(폰)에서는 첫차·막차를 이름 아래 줄로 내린다 - 숨기면 폰에서 정류장 시각을 볼 길이 없었다(검수 11-11). 점 너비 + 간격만큼 들여 이름과
   줄을 맞춘다. */
@container (max-width: 26em) {
  .vb-stop-btn { flex-wrap: wrap; row-gap: 0.1em; }
  .vb-stop-times { flex-basis: 100%; padding-left: 2.03em; white-space: normal; } /* (점 0.8em + 간격 0.7em) ÷ 글자 0.74 */
}
.vb-route { container-type: inline-size; }
/* 두 정류장 구간 표시(2026-11-12) - 결과가 오면 스크립트가 탈 곳~내릴 곳 줄에 is-trip 을 달고(순환으로 기점을 넘으면 두 토막) 나머지를 흐리게 한다.
   줄마다 제 몫의 굵은 선을 그려(탈 곳은 점 아래부터, 내릴 곳은 점 위까지) 띠의 세로선 위에 구간만 진하게 겹친다. 탈 곳·내릴 곳에는 이름표를 단다. */
.vb-stop, .vb-stops-leg { position: relative; }
.vb-stops.has-trip > li:not(.is-trip) { opacity: 0.55; }
.vb-stops > li.is-trip::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.07em; width: 4px; margin-left: -0.5px; border-radius: 3px; background: var(--vb-green-deep); }
.vb-stops > li.is-trip-from::before { top: 50%; }
.vb-stops > li.is-trip-to::before { bottom: 50%; }
.vb-stops > li.is-trip-from.is-trip-to::before { display: none; }
/* "○○ 방면 돌아오는 길" 구분 줄은 글자 0.78em·왼쪽 들여쓰기 2.1em 이라 같은 left 가 글자 위로 비켜 그려졌다(검수 11-12) - 띠 세로선 자리로 되돌리고
   (1.07em ÷ 0.78 - 2.1em = -0.728em) 위아래 바깥 여백까지 덮어 선이 끊기지 않게 한다. */
.vb-stops > li.vb-stops-leg.is-trip::before { left: -0.728em; top: -0.4em; bottom: -0.2em; }
.vb-stop.is-trip .vb-stop-dot { background: var(--vb-leaf); box-shadow: 0 0 0 3px var(--vb-green-deep); }
.vb-stop.is-trip-from .vb-stop-dot, .vb-stop.is-trip-to .vb-stop-dot { width: 1em; height: 1em; margin-left: -0.1em; background: var(--vb-green-deep); box-shadow: 0 0 0 3px var(--vb-leaf); }
.vb-trip-tag { padding: 0.02em 0.5em; border-radius: 999px; background: var(--vb-green-deep); color: #fff; font-size: 0.72em; font-weight: 900; }

/* 정류장 도착 */
.vb-arrivals { display: grid; gap: 0.4em; margin: 0; padding: 0; list-style: none; }
.vb-arrival { display: flex; align-items: flex-start; gap: 0.7em; padding: 0.55em 0.7em; border-radius: 0.75em; background: var(--vb-paper-2); box-shadow: 0 0 0 1px var(--vb-rule); }
.vb-arrival.is-focus { box-shadow: 0 0 0 2px var(--vb-green); }
/* 다른 버스는 회색 번호표와 흐린 글자색으로만 가른다 - opacity 는 작은 글자의 대비를 4.5:1 아래로 떨어뜨렸다(검수 11-11). */
.vb-arrival.is-other .vb-arrival-main { color: var(--vb-muted); }
.vb-arrival-main { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.15em; }
.vb-arrival-bus { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── 결과 위 광고 ── */
.vb-result-ad { margin: 0; scroll-margin-top: 5.5rem; }

/* ── 확인·조회 창 ── 연 직후 400ms 는 창 안이 누르기를 받지 않는다(data-settling). */
.vb dialog[data-settling] > * { pointer-events: none; }
.vb-dialog[data-phase="confirm"] [data-phase-show="loading"],
.vb-dialog[data-phase="loading"] [data-phase-show="confirm"] { display: none; }
.vb-dialog-facts { display: grid; gap: 0.35em; }
.vb-dialog-facts div { display: flex; gap: 0.6em; }
.vb-dialog-facts dt { flex: 0 0 auto; min-width: 4.5em; color: #6b7280; font-weight: 600; }
.vb-dialog-facts dd { min-width: 0; color: #111827; font-weight: 800; overflow-wrap: anywhere; }
.dark .vb-dialog-facts dt { color: #9ca3af; }
.dark .vb-dialog-facts dd { color: #f9fafb; }
.vb-loading { margin: 0.9em 1.25em 0; }
/* 조회 중 - 하늘·언덕 위 집들·비탈길 위로 옆모습 마을버스가 들어와 언덕을 오른다(살짝 기울여 들썩인다). */
.vb-loading-scene {
  position: relative;
  height: 9em;
  overflow: hidden;
  border-radius: 0.9em;
  background: linear-gradient(180deg, #8fc8f2 0%, #d7eefb 70%);
}
.dark .vb-loading-scene { background: linear-gradient(180deg, #16204a 0%, #34406f 70%); }
.vb-loading-sun { position: absolute; top: 0.9em; right: 1.4em; width: 1.6em; height: 1.6em; border-radius: 50%; background: #ffd56a; box-shadow: 0 0 1.2em #ffe08f; }
.dark .vb-loading-sun { background: #f2f4ff; box-shadow: 0 0 1em #c9d2ff; }
.vb-loading-houses {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34%;
  height: 3.2em;
  background:
    linear-gradient(#e9f1df, #e9f1df) 3% 100% / 8% 55% no-repeat,
    linear-gradient(#f6e7d8, #f6e7d8) 13% 100% / 7% 75% no-repeat,
    linear-gradient(#e3ecf2, #e3ecf2) 23% 100% / 9% 60% no-repeat,
    linear-gradient(#f3efe4, #f3efe4) 35% 100% / 7% 90% no-repeat,
    linear-gradient(#f2e3e6, #f2e3e6) 46% 100% / 8% 65% no-repeat,
    linear-gradient(#e9f1df, #e9f1df) 58% 100% / 9% 80% no-repeat,
    linear-gradient(#f6e7d8, #f6e7d8) 70% 100% / 7% 58% no-repeat,
    linear-gradient(#e3ecf2, #e3ecf2) 81% 100% / 9% 72% no-repeat,
    linear-gradient(#93c47d, #93c47d) 0 0 / 100% 0.25em repeat-x;
  background-repeat: repeat-x;
  filter: drop-shadow(0 -2px 0 #93c47d);
  animation: vb-houses 10s linear infinite;
}
.dark .vb-loading-houses { opacity: 0.55; }
.vb-loading-hill {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -40%;
  height: 80%;
  border-radius: 50% 50% 0 0;
  background: #a9d18e;
  transform: rotate(-4deg);
}
.dark .vb-loading-hill { background: #3d5a45; }
.vb-loading-road {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 14%;
  height: 0.55em;
  background: repeating-linear-gradient(90deg, #b9a58e 0 1.6em, #fbf8f0 1.6em 2em);
  transform: rotate(-4deg);
  animation: vb-road 0.7s linear infinite;
}
.vb-loading-bus {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: min(58%, 15em);
  height: auto;
  transform: translateX(-50%) rotate(-4deg);
  animation: vb-climb-in 1s ease-out both, vb-bob 0.45s ease-in-out 1s infinite alternate;
}
@keyframes vb-houses { to { background-position-x: -100%; } }
@keyframes vb-road { to { background-position-x: -2em; } }
@keyframes vb-climb-in { from { transform: translateX(-140%) translateY(0.6em) rotate(-4deg); } to { transform: translateX(-50%) rotate(-4deg); } }
@keyframes vb-bob { to { transform: translateX(-50%) translateY(-2px) rotate(-4.5deg); } }
.vb-loading-sub { margin-top: 0.6em; color: #4b5563; font-size: 0.82em; text-align: center; }
.dark .vb-loading-sub { color: #cbd5e1; }
.vb-loading-status { padding: 0.4em 1.25em 1.1em; color: #374151; font-size: 0.85em; text-align: center; }
.dark .vb-loading-status { color: #d1d5db; }
.vb-loading-status:empty { padding: 0; }

/* ── 노선 지도 창(카카오) ── 겹침(정류장 점·기점/회차지 이름표·운행 중 버스)은 lib/transit/bus_map 이 만든다(.bm-* - 카카오 지도 안이라 px). */
.vb-map-dialog {
  --vbm-paper: #f7f5ef;
  --vbm-chip: #ffffff;
  --vbm-ink: #0f172a;
  --vbm-muted: #4b5563;
  --vbm-rule: #e2e0d8;
  width: min(100vw - 2rem, 1100px);
  height: min(100dvh - 2rem, 860px);
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  background: transparent;
  overflow: hidden;
}
.vb-map-dialog::backdrop { background: rgb(15 23 42 / 0.72); backdrop-filter: blur(4px); }
.dark .vb-map-dialog { --vbm-paper: #0f1a14; --vbm-chip: #13221a; --vbm-ink: #e5e7eb; --vbm-muted: #a9bdb0; --vbm-rule: #23392b; }
@media (max-width: 639px) {
  .vb-map-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
}
.vbm-shell { display: flex; flex-direction: column; height: 100%; background: var(--vbm-paper); color: var(--vbm-ink); }
.vbm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.8em;
  padding: 0.7em 0.8em 0.7em 1em;
  background: linear-gradient(180deg, var(--vb-forest) 0%, var(--vb-forest-deep) 100%);
  color: #fff;
}
.vbm-head-bus { width: auto; height: 1.7em; flex: none; }
.vbm-title { margin: 0 auto 0 0; font-size: 1.05em; font-weight: 800; word-break: keep-all; }
.vbm-count { margin: 0; padding: 0.2em 0.7em; border-radius: 999px; background: rgb(255 255 255 / 0.14); color: #e4f2e7; font-size: 0.78em; font-weight: 700; white-space: nowrap; }
.vbm-close { display: inline-flex; padding: 0.3em; border: 0; border-radius: 0.6em; background: transparent; color: #fff; cursor: pointer; }
.vbm-close svg { width: 1.4em; height: 1.4em; }
.vbm-close:hover { background: rgb(255 255 255 / 0.12); }
.vbm-close:focus-visible { outline: 3px solid var(--vb-leaf); outline-offset: 1px; }
@media (max-width: 639px) {
  .vbm-close { order: 3; }
  .vbm-count { order: 4; }
  .vbm-head-bus { height: 1.4em; }
}
.vbm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; padding: 0.6em 1em; border-bottom: 1px solid var(--vbm-rule); background: var(--vbm-chip); }
.vbm-stops-label { flex: none; color: var(--vbm-muted); font-size: 0.82em; font-weight: 700; }
.vbm-select { flex: 1 1 14em; width: auto; box-shadow: 0 0 0 1px var(--vbm-rule); }
.vbm-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.vbm-map { position: absolute; inset: 0; background: #e8eef3; }
.vbm-loading { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 1em; background: var(--vbm-paper); color: var(--vbm-muted); font-size: 0.9em; font-weight: 700; text-align: center; word-break: keep-all; }
.vb-map-dialog[data-state="error"] .vbm-loading { color: #b42318; }
.vbm-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.8em; min-height: 3.4em; padding: 0.7em 1em; border-top: 1px solid var(--vbm-rule); background: var(--vbm-chip); }
.vbm-card-name { margin: 0; font-size: 1.05em; font-weight: 800; }
.vbm-hint { margin: 0; color: var(--vbm-muted); font-size: 0.88em; word-break: keep-all; }
.vbm-note { margin: 0; padding: 0.3em 1em 0.6em; background: var(--vbm-chip); color: var(--vbm-muted); font-size: 0.72em; word-break: keep-all; }
.bm-stop { display: block; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.bm-stop::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 6px;
  border: 2.5px solid var(--route, #3fa34d);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.35);
}
.bm-stop-plain::before { width: 8px; height: 8px; margin: 7px; border-color: #94a3b8; }
.bm-stop:hover::before { transform: scale(1.3); }
.bm-stop.bm-selected::before { width: 16px; height: 16px; margin: 3px; border: 3px solid var(--vb-forest-deep); background: var(--vb-leaf); }
.bm-stop:focus-visible { outline: 3px solid var(--vb-leaf); outline-offset: 0; border-radius: 50%; }
.bm-end {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 3px;
  border-radius: 999px;
  background: var(--vb-forest-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgb(15 23 42 / 0.6);
  pointer-events: none;
}
.bm-end-tag { padding: 1px 7px; border-radius: 999px; background: var(--vb-leaf); color: var(--vb-forest-deep); font-size: 11px; }
.bm-end-end .bm-end-tag { background: #fbbf24; }
.bm-bus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--route, #3fa34d);
  box-sizing: border-box;
  box-shadow: 0 3px 8px -2px rgb(15 23 42 / 0.65);
  pointer-events: none;
}
.bm-bus svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .vb-loading-houses,
  .vb-loading-road,
  .vb-loading-bus,
  .vb-live-dot { animation: none; }
  .vb-loading-bus { transform: translateX(-50%) rotate(-4deg); }
  .bm-stop:hover::before { transform: none; }
}

/* 강제 색 모드 - 테 없는 칩·버튼·카드에 테를 돌려준다. */
@media (forced-colors: active) {
  .vb-mode span, .vb-submit, .vb-route-row, .vb-stop-btn:not(.vb-stop-static), .vb-live-refresh, .vb-mapbtn, .vb-select { border: 1px solid ButtonText; }
  .vb-mode input:checked + span { outline: 2px solid Highlight; }
  .vb-no, .vb-stop-dot, .bm-stop::before, .bm-end, .bm-bus { forced-color-adjust: none; }
  .vb-timetable tr.is-today th, .vb-timetable tr.is-today td { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* 좁은 화면 줄 바꿈(검수 11-11) - keep-all 은 띄어쓰기 없는 일본어 문장과 띄어쓰기 없는 긴 한글(찾는 말)에서 줄을 바꿀 자리를 없애 390px 에서
   가로로 넘쳤다. 넘칠 때만 아무 데서나 끊고, 일본어 문장은 보통 줄 바꿈으로 둔다(노선·정류장 이름은 lang="ko" 라 그대로). */
:is(.vb-title, .vb-stage-caption, .vb-tagline, .vb-status, .vb-note, .vb-source, .vb-source-line, .vb-result-title, .vb-trip-place, .vb-trip-basis,
    .vbm-title, .vbm-loading, .vbm-hint, .vbm-note) { overflow-wrap: anywhere; }
:is(.vb-tagline, .vb-status, .vb-note, .vb-source, .vb-source-line, .vb-trip-basis, .vbm-loading, .vbm-hint, .vbm-note):lang(ja) { word-break: normal; }