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

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

   무대와 찾기 막대는 **테마와 무관하게** 노선도(하늘·받침 판)와 짙은 남색 막대다(막대 위 가장자리에 노선 색 띠). 막대의 칩·세그먼트·바꾸기
   버튼·주 버튼은 KTX·고속버스 막대와 같은 짜임이다(2026-11-09 사용자 정돈 - 테 없는 칩, 고른 칸만 흰 세그먼트). 시간표 결과는 역 전광판처럼 **늘
   어둡다**(호박색 시각). 안내 글 칸만 사이트 테마를 따른다.

   글자 크기는 em 으로 적고 뿌리에서 큰글씨 배율(--silver-scale)을 한 번 곱한다. 글자를 얹는 자리의 색은 흰 글자·호박색 글자와 4.5:1 이 넘게 짙게 둔다. */

.transit {
  --tr-navy: #13233f;
  --tr-navy-deep: #0b172c;
  --tr-mint: #34d3a6;
  --tr-mint-deep: #0f8f6b;
  --tr-board: #0b1220;
  --tr-board-line: #1d2a44;
  --tr-led: #ffc845;
  --tr-led-dim: #c9d4e8;
  font-size: calc(1rem * var(--silver-scale, 1));
}

/* ── 탭 ── 두 기능이 다 켜졌을 때만 선다. */
.transit-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 0.2em;
  padding: 0.25em;
  border-radius: 999px;
  background: #e8edf5;
}
.dark .transit-tabs { background: #1f2937; }
.transit-tab {
  min-height: 2.4em;
  padding: 0.35em 1.2em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #334155;
  font-size: 0.95em;
  font-weight: 800;
  cursor: pointer;
}
.dark .transit-tab { color: #cbd5e1; }
.transit-tab[aria-selected="true"] { background: var(--tr-navy); color: #fff; box-shadow: 0 2px 6px -2px rgb(15 23 42 / 0.5); }
.transit-tab:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 2px; }

/* ── 무대 카드 ── */
/* 카드는 넘침을 자르지 않는다 - 역 후보 목록이 카드 아래로 떠야 한다(잘려 뒷 후보가 안 보였다 - 검수 11-10). 둥근 모서리는 무대(위)와 막대(아래)가
   제각각 둔다. */
.transit-card {
  border-radius: 1.25rem;
  background: var(--tr-navy);
  box-shadow: 0 0 0 1px rgb(19 35 63 / 0.35), 0 18px 40px -18px rgb(15 23 42 / 0.5);
}
.transit-card[hidden] { display: none; }
.transit-stage {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem 1.25rem 0 0;
  min-height: 16rem;
  background-color: #cfe9fb;
  background-image: linear-gradient(180deg, #cfe9fb 0%, #e6f1f8 55%, #eef1e4 100%);
  background-size: cover;
  background-position: center 55%;
  isolation: isolate;
  touch-action: none;
}
.transit-stage::before {
  content: "";
  display: block;
  padding-top: 64%;
}
@media (min-width: 1024px) {
  .transit-stage::before { padding-top: min(64%, calc(50vh - 4rem)); }
  .transit-stage { min-height: 18rem; }
}
@media (max-width: 639px) {
  .transit-stage::before { padding-top: 92%; }
}
@media (any-pointer: coarse) {
  .transit-stage { touch-action: pan-y; }
}
.transit-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.transit-stage[data-gl="gpu"] canvas,
.transit-stage[data-gl="software"] canvas { opacity: 1; }
.transit-labels {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.transit-station-label {
  pointer-events: none;
  padding: 0.1em 0.45em;
  border-radius: 0.45em;
  background: rgb(255 255 255 / 0.88);
  color: var(--tr-navy-deep);
  font-size: 0.64em;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 3px 8px -4px rgb(15 23 42 / 0.55);
}
.transit-pin-label {
  pointer-events: none;
  padding: 0.22em 0.65em;
  border-radius: 999px;
  background: #1f5fbf;
  color: #fff;
  font-size: 0.74em;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgb(15 23 42 / 0.7);
}
.transit-pin-label[data-end="to"] { background: #c0392b; }
.transit-pin-label[data-end="transfer"] { background: #475569; font-size: 0.66em; }
.transit-stage-head {
  position: absolute;
  top: 0.9em;
  left: 0.9em;
  right: 0.9em;
  z-index: 2;
  pointer-events: none;
}
.transit-eyebrow {
  display: inline-block;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.88);
  color: var(--tr-navy);
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.transit-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.86);
  color: var(--tr-navy-deep);
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.2;
  word-break: keep-all;
}
@media (max-width: 639px) {
  .transit-title { font-size: 1.15em; }
}
.transit-stage-caption {
  position: absolute;
  right: 0.9em;
  bottom: 0.8em;
  z-index: 2;
  max-width: 70%;
  padding: 0.35em 0.75em;
  border-radius: 0.8em;
  background: rgb(11 23 44 / 0.86);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  pointer-events: none;
  word-break: keep-all;
}
/* [전체 노선도] 단추가 있는 무대는 설명을 단추 줄 위로 올린다 - 좁은 화면에서 긴 설명(영어 두 역 사이)이 단추 밑으로 들어갔다(검수 11-10, 390px 실측).
   단추 위끝 = 바닥 0.8em + 높이 3em × 단추 글자 0.92em + 흰 테 = 무대 글자 약 3.7em, 설명 글자는 0.75em 이라 5.2em(2026-11-11 단추를 키우며 고침). */
.transit-stage:has(.transit-map-open) .transit-stage-caption { bottom: 5.2em; max-width: calc(100% - 2.4em); }
/* 좁은 무대 - 설명은 두 줄까지(제목과 단추 사이가 좁다). 큰글씨 3단(1.5배)에서는 제목·단추만으로 무대 세로가 차서 설명이 제목을 덮었다 - 설명은
   결과 칸이 같은 내용을 보이는 장식(aria-hidden)이라 숨긴다(검수 11-11, 320px 실측). */
@media (max-width: 639px) {
  .transit-stage-caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .transit-stage-caption[hidden] { display: none; }
  html.silver[data-silver-scale="3"] .transit-stage-caption { display: none; }
}

/* ── 찾기 막대 ── 짙은 남색 판, 위 가장자리에 노선 색 띠(지하철 노선도 색 - 장식). */
.transit-bar {
  position: relative;
  border-radius: 0 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.25em 1em 1.1em;
  background: linear-gradient(180deg, var(--tr-navy) 0%, var(--tr-navy-deep) 100%);
  color: #fff;
}
.transit-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #0052a4 0 11%, #00a84d 11% 22%, #ef7c1c 22% 33%, #00a5de 33% 44%, #996cac 44% 55%,
    #cd7c2f 55% 66%, #747f00 66% 77%, #e6186c 77% 88%, #bdb092 88% 100%);
}
.transit-tagline {
  font-size: 0.85em;
  line-height: 1.5;
  color: #e3ecfb;
  word-break: keep-all;
}
/* 안내 줄 + [노선도에서 역 고르기](지하철 막대) - 넓으면 한 줄 오른쪽 끝, 들지 않으면 안내 아래 왼쪽. 테 두른 보조 단추다(주 버튼은 민트 하나). */
.transit-bar-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em 1em; }
.transit-bar-top > .transit-tagline { flex: 1 1 18em; min-width: 0; }
.transit-map-pick {
  flex: 0 1 auto;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75em;
  padding: 0.35em 0.95em 0.35em 0.8em;
  border: 1.5px solid rgb(255 255 255 / 0.55);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  font-size: 0.82em;
  font-weight: 800;
  line-height: 1.2;
  word-break: keep-all;
  cursor: pointer;
}
.transit-map-pick svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.transit-map-pick:hover { background: rgb(255 255 255 / 0.16); border-color: #fff; }
.transit-map-pick:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 2px; }
.transit-form {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  container-type: inline-size;
}
.transit-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.transit-form [hidden] { display: none !important; }
.transit-label {
  display: block;
  margin-bottom: 0.3em;
  font-size: 0.75em;
  font-weight: 700;
  color: #dbe6fb;
}
.transit-label-from::before,
.transit-label-to::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.4em;
  border-radius: 50%;
  vertical-align: 0.02em;
}
.transit-label-from::before { background: #6b9cf0; }
.transit-label-to::before { background: #f07a6e; }

/* 세그먼트(권역·요일·지금/시각) - 옅은 판 안에서 고른 칸만 흰색(KTX 날짜 묶음과 같다). 좁으면 줄을 바꾼다. */
.transit-segment {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 0.15em;
  padding: 0.2em;
  border-radius: 0.8em;
  background: rgb(255 255 255 / 0.1);
}
.transit-seg { position: relative; display: inline-flex; min-width: 0; }
.transit-seg input,
.transit-mode input,
.transit-line-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.transit-seg span {
  display: inline-flex;
  align-items: center;
  min-height: 2.3em;
  padding: 0.3em 0.85em;
  border-radius: 0.6em;
  color: #dbe6fb;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.transit-seg span:hover { color: #fff; background: rgb(255 255 255 / 0.1); }
.transit-seg input:checked + span { background: #fff; color: var(--tr-navy-deep); font-weight: 800; }
.transit-seg input:focus-visible + span,
.transit-mode input:focus-visible + span,
.transit-line-chip input:focus-visible + span { outline: 3px solid var(--tr-mint); outline-offset: 2px; }

/* 모드(역 시간표 / 두 역 사이, 노선 번호 / 정류장 이름) - 권역과 같은 세그먼트(옅은 판, 고른 칸만 흰색). 민트로 채우면 같은 색의 주 버튼과
   무게가 같아 "누를 것" 이 둘로 보였다(2026-11-11 사용자 검토). 넓은 막대는 머리 줄 오른쪽에 글 폭만큼, 좁은 막대는 두 칸이 폭을 나눈다. */
.transit-modes {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.15em;
  padding: 0.2em;
  border-radius: 0.8em;
  background: rgb(255 255 255 / 0.1);
}
.transit-mode { position: relative; display: flex; min-width: 0; }
.transit-mode span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3em;
  padding: 0.3em 1em;
  border-radius: 0.6em;
  color: #dbe6fb;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.transit-mode span:hover { color: #fff; background: rgb(255 255 255 / 0.1); }
.transit-mode input:checked + span { background: #fff; color: var(--tr-navy-deep); font-weight: 800; }

/* 머리 줄(권역·지역 + 찾는 방법) - 넓은 막대는 한 줄(찾는 방법은 오른쪽 끝), 들지 않으면 다음 줄 왼쪽으로. 아래끝을 맞춘다(찾는 방법은 이름표가
   없다). */
.transit-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.7em 1em; }
.transit-head-row > * { flex: 0 1 auto; }
.transit-head-row .transit-city-field { flex: 0 1 16em; }
@container (max-width: 32em) {
  .transit-head-row .transit-modes { flex: 1 1 100%; display: grid; }
  /* 좁은 막대의 긴 언어·큰글씨 - 두 칸이 폭을 나누므로 칸 안 여백을 줄인다(es 320px 1.5배에서 글이 칸을 넘었다 - 검수 11-11). */
  .transit-mode span { padding-inline: 0.5em; }
  .transit-head-row .transit-city-field { flex: 1 1 100%; }
}

/* 실행 줄(요일·출발 시각·찾는 말 + 주 버튼) - 넓은 막대는 한 줄에 두고 남는 폭을 버튼이 갖는다(KTX·고속버스 막대와 같은 짜임). 들지 않으면(좁은
   막대·긴 언어·시각 정하기 칸이 열림) 버튼이 다음 줄 전체 폭이다. 세그먼트는 버튼과 같은 높이로 맞춘다. */
.transit-action-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7em 0.75em; }
.transit-action-row > fieldset { flex: 0 1 auto; }
.transit-action-row .transit-seg span { min-height: 2.55em; }
.transit-action-row .transit-select-sm { min-height: 2.9em; }
.transit-action-row .transit-submit { flex: 1 1 10em; align-self: flex-end; min-width: 0; min-height: 2.75em; font-size: 0.95em; }
.transit-query-row > .transit-field { flex: 999 1 15em; }

.transit-mode-fields { display: flex; flex-direction: column; gap: 0.8em; }
.transit-field { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; }
.transit-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;
}
.transit-select::placeholder { color: #6b7280; font-weight: 600; }
.transit-select-sm { width: auto; min-height: 2.4em; font-size: 0.88em; }
.transit-select:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 2px; }
/* 고르기 칸 - 브라우저 기본 화살표 대신 굵은 화살표(KTX·고속버스 고르기 칸과 같다). 강제 색 모드는 기본 모양으로 둔다(아래). */
select.transit-select-arrow {
  padding-right: 2.2em;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23142a52' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  background-size: 0.95em;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* 역 고르기 목록 - 칸 아래로 떠오른다. */
.transit-picker-box { position: relative; }
.transit-picker-input {
  padding-left: 2.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%2313233f' stroke-width='2.2'/%3E%3Cpath d='M13 13l4 4' stroke='%2313233f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.65em center;
  background-size: 1em;
}
.transit-picker-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.3em);
  left: 0;
  right: 0;
  max-height: 16em;
  overflow-y: auto;
  margin: 0;
  padding: 0.3em;
  list-style: none;
  border-radius: 0.8em;
  background: #fff;
  color: #111827;
  box-shadow: 0 16px 34px -12px rgb(15 23 42 / 0.55), 0 0 0 1px rgb(15 23 42 / 0.08);
}
.dark .transit-picker-list { background: #111827; color: #f3f4f6; box-shadow: 0 16px 34px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.1); }
.transit-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.4em;
  padding: 0.35em 0.6em;
  border-radius: 0.55em;
  font-size: 0.92em;
  font-weight: 700;
  cursor: pointer;
}
.transit-option:hover,
.transit-option[aria-selected="true"] { background: #e8f1ff; }
.dark .transit-option:hover,
.dark .transit-option[aria-selected="true"] { background: #1e293b; }
.transit-option-dots { display: inline-flex; gap: 0.15em; flex: 0 0 auto; }
.transit-option-dots i { display: block; width: 0.6em; height: 0.6em; border-radius: 50%; }
.transit-option-name { min-width: 0; overflow-wrap: anywhere; }
.transit-option-ko { margin-left: auto; color: #6b7280; font-size: 0.82em; font-weight: 600; }
.transit-option-empty { padding: 0.6em; color: #6b7280; font-size: 0.85em; }
.dark .transit-option-ko,
.dark .transit-option-empty { color: #a3acb9; }

/* 노선 칩(고른 역에 서는 노선) - 노선 색 점과 이름, 고른 칩은 노선 색 테. */
.transit-line-chips { display: flex; flex-wrap: wrap; gap: 0.35em; }
.transit-line-chip { position: relative; display: inline-flex; }
.transit-line-chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.2em;
  padding: 0.25em 0.8em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: #e3ecfb;
  font-size: 0.8em;
  font-weight: 700;
  cursor: pointer;
}
.transit-line-chip span::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--line, #94a3b8);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6);
}
.transit-line-chip input:checked + span { background: #fff; color: var(--tr-navy-deep); box-shadow: inset 0 0 0 2px var(--line, #94a3b8); }

.transit-ends { display: flex; align-items: flex-end; gap: 0.5em; }
.transit-swap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.25s ease;
}
.transit-swap svg { width: 1.3em; height: 1.3em; }
.transit-swap:hover { background: rgb(255 255 255 / 0.24); }
.transit-swap:active { transform: rotate(180deg); }
.transit-swap:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 2px; }
@container (max-width: 32em) {
  .transit-ends { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5em; row-gap: 0.6em; align-items: end; }
  .transit-ends > .transit-field:first-child { grid-column: 1; grid-row: 1; }
  .transit-ends > .transit-field:last-child { grid-column: 1; grid-row: 2; }
  .transit-ends > .transit-swap { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .transit-ends > .transit-swap svg { transform: rotate(90deg); }
}
.transit-when-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
.transit-when-at { display: inline-flex; flex-wrap: wrap; gap: 0.4em; }

.transit-submit {
  align-self: stretch;
  min-height: 2.9em;
  padding: 0.5em 1.3em;
  border: 0;
  border-radius: 0.75em;
  background: var(--tr-mint);
  color: var(--tr-navy-deep);
  font-size: 1em;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--tr-mint-deep);
  cursor: pointer;
}
.transit-submit:hover { background: #5be0ba; }
.transit-submit:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tr-mint-deep); }
.transit-submit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.transit-popular { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.35em; }
.transit-popular[hidden], .transit-popular-list[hidden] { display: none; }
/* 이름표는 첫 줄 칩과 같은 높이(칩 2.2em × 0.78 = 1.716em, 이름표 글자 0.72em) - 칩이 두 줄이 되어도 첫 줄에 붙는다. */
.transit-popular-label { margin-right: 0.2em; font-size: 0.72em; font-weight: 700; line-height: 2.383; color: #c7d6f2; }
/* 칩 목록은 이름표 옆 남은 폭에서 줄을 바꾼다 - 목록째 다음 줄로 넘어가 이름표만 한 줄을 차지했다(2026-11-11, 592px 막대). */
.transit-popular-list { display: flex; flex: 1 1 14em; min-width: 0; flex-wrap: wrap; gap: 0.35em; margin: 0; padding: 0; list-style: none; }
.transit-chip {
  min-height: 2.2em;
  padding: 0.3em 0.8em;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: #e3ecfb;
  font-size: 0.78em;
  font-weight: 700;
  cursor: pointer;
}
.transit-chip:hover { background: rgb(255 255 255 / 0.2); color: #fff; }
.transit-chip:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 2px; }
/* 자주 찾는 역 칩 - 노선 색 점 + 역 이름 + 옅은 노선 이름(노선 칩과 같은 점). 글 흐름 그대로 둔다 - flex 로 두면 이름과 노선이 따로 떨어진
   덩어리가 되어 칩 글이 "강남(줄바꿈)2호선" 으로 읽혔다. */
.transit-chip-station::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.4em;
  vertical-align: 0.02em;
  border-radius: 50%;
  background: var(--line, #94a3b8);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6);
}
.transit-chip-sub { color: #aebfe0; font-weight: 600; }
.transit-chip:hover .transit-chip-sub { color: #dbe6fb; }

/* ── 상태 줄·결과 칸 ── 상태 줄은 비어 있어도 숨기지 않는다(처음 생긴 안내가 읽히게). */
.transit-status { font-size: 0.85em; color: #374151; word-break: keep-all; scroll-margin-top: 5.5rem; }
.transit-status[data-tone="error"] { color: #b42318; font-weight: 600; }
.dark .transit-status { color: #d1d5db; }
.dark .transit-status[data-tone="error"] { color: #fca5a5; }
.transit-result-ad { scroll-margin-top: 5.5rem; }
.transit turbo-frame[hidden] { display: none; }
.transit-note { font-size: 0.85em; line-height: 1.55; color: #4b5563; word-break: keep-all; }
.dark .transit-note { color: #cbd5e1; }
.transit-dim { color: #6b7280; font-weight: 500; }
.dark .transit-dim { color: #9ca3af; }
.transit-source,
.transit-source-line { font-size: 0.72em; line-height: 1.5; color: #6b7280; word-break: keep-all; }
.dark .transit-source,
.dark .transit-source-line { color: #9ca3af; }

/* ── 시간표 전광판 ── 늘 어두운 판, 노선 색 머리 띠. */
.transit-board,
.transit-journey {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding: 1.1em 1em 1em;
  border-radius: 1rem;
  background: var(--tr-board);
  color: var(--tr-led-dim);
  box-shadow: inset 0 4px 0 var(--line, var(--tr-mint));
}
.transit-board .transit-note,
.transit-journey .transit-note { color: #dbe4f3; }
.transit-board .transit-dim,
.transit-journey .transit-dim { color: #9fb0cc; }
.transit-board .transit-source,
.transit-journey .transit-source { color: #8ea0bd; }
.transit-board-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.4em 1em; }
.transit-line-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  font-size: 0.78em;
  font-weight: 800;
}
.transit-line-dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--line, #94a3b8);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.55);
}
.transit-board-title { margin-top: 0.3em; color: #fff; font-size: 1.25em; font-weight: 800; line-height: 1.25; word-break: keep-all; }
.transit-ko { color: #b8c6de; font-size: 0.72em; font-weight: 700; }
.transit-board-meta { margin-top: 0.2em; color: #b8c6de; font-size: 0.82em; font-weight: 600; }
.transit-board-fetched { color: #8ea0bd; font-size: 0.72em; font-weight: 600; white-space: nowrap; }
.transit-dirs { display: grid; gap: 0.8em; }
@media (min-width: 640px) {
  .transit-dirs { grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); }
}
.transit-dir {
  min-width: 0;
  padding: 0.8em 0.85em;
  border-radius: 0.8em;
  background: #111b2e;
  box-shadow: inset 0 0 0 1px var(--tr-board-line);
}
.transit-dir-head { color: #fff; font-size: 0.95em; font-weight: 800; word-break: keep-all; }
.transit-dir-ends { display: flex; flex-wrap: wrap; gap: 0.3em 1em; margin-top: 0.45em; font-size: 0.8em; }
.transit-dir-ends div { display: flex; gap: 0.35em; }
.transit-dir-ends dt { color: #9fb0cc; font-weight: 600; }
.transit-dir-ends dd { color: var(--tr-led); font-weight: 800; font-variant-numeric: tabular-nums; }
.transit-next { display: flex; flex-direction: column; gap: 0.3em; margin: 0.7em 0 0; padding: 0; list-style: none; }
.transit-next-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6em;
  padding: 0.35em 0.55em;
  border-radius: 0.55em;
  background: #0b1424;
}
.transit-next-row[data-first="true"] { box-shadow: inset 3px 0 0 var(--line, var(--tr-mint)); }
.transit-next-row[data-departed="true"] { opacity: 0.45; }
.transit-next-time { color: var(--tr-led); font-size: 1.15em; font-weight: 800; font-variant-numeric: tabular-nums; }
.transit-next-in { color: #7ee2c0; font-size: 0.82em; font-weight: 800; white-space: nowrap; }
.transit-next-end { min-width: 0; color: #c9d4e8; font-size: 0.8em; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.transit-hours { margin-top: 0.7em; }
.transit-hours summary { cursor: pointer; color: #dbe4f3; font-size: 0.82em; font-weight: 700; }
.transit-hours summary:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 2px; border-radius: 0.3em; }
.transit-hour-table { width: 100%; margin-top: 0.5em; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.transit-hour-table th {
  width: 2.6em;
  padding: 0.25em 0.4em;
  vertical-align: top;
  color: #fff;
  font-size: 0.85em;
  font-weight: 800;
  text-align: left;
  border-top: 1px solid var(--tr-board-line);
}
.transit-hour-table td { padding: 0.25em 0.2em; border-top: 1px solid var(--tr-board-line); }
.transit-minute { display: inline-block; margin: 0 0.45em 0.1em 0; color: var(--tr-led); font-size: 0.85em; font-weight: 700; }
.transit-minute sub { margin-left: 0.15em; color: #9fb0cc; font-size: 0.72em; font-weight: 600; vertical-align: baseline; }
.transit-minute[data-past="true"] { opacity: 0.4; }

/* 서울 실시간 "곧 도착" */
.transit-live-frame { display: block; }
.transit-live {
  padding: 0.7em 0.85em;
  border-radius: 0.8em;
  background: #0f2233;
  box-shadow: inset 0 0 0 1px #1d3a52;
}
.transit-live-title { display: flex; align-items: center; gap: 0.45em; color: #fff; font-size: 0.9em; font-weight: 800; }
.transit-live-dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: #34d3a6; box-shadow: 0 0 0 0 rgb(52 211 166 / 0.6); animation: transit-pulse 1.8s ease-out 4; }
@keyframes transit-pulse { to { box-shadow: 0 0 0 0.6em rgb(52 211 166 / 0); } }
.transit-live-rows { display: grid; gap: 0.3em; margin: 0.5em 0 0.3em; padding: 0; list-style: none; }
.transit-live-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25em 0.55em; font-size: 0.82em; }
.transit-live-heading { color: #dbe4f3; font-weight: 700; }
.transit-live-msg { color: var(--tr-led); font-weight: 800; }
.transit-last { padding: 0.05em 0.45em; border-radius: 999px; background: #b42318; color: #fff; font-size: 0.78em; font-weight: 800; }
.transit-live .transit-dim { font-size: 0.75em; }
.transit-live-refresh {
  margin-top: 0.4em;
  min-height: 2.2em;
  padding: 0.25em 0.9em;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  cursor: pointer;
}
.transit-live-refresh:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 2px; }

/* ── 두 역 사이 ── */
.transit-journey-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 1em; }
.transit-journey-times { color: var(--tr-led); font-size: 1.5em; font-weight: 800; font-variant-numeric: tabular-nums; }
.transit-journey-facts { display: flex; flex-wrap: wrap; gap: 0.3em 0.8em; margin: 0; padding: 0; list-style: none; color: #dbe4f3; font-size: 0.85em; font-weight: 700; }
.transit-steps { display: flex; flex-direction: column; gap: 0.45em; margin: 0; padding: 0; list-style: none; }
.transit-step {
  padding: 0.65em 0.8em 0.65em 1em;
  border-radius: 0.8em;
  background: #111b2e;
  box-shadow: inset 4px 0 0 var(--line, #94a3b8), inset 0 0 0 1px var(--tr-board-line);
}
.transit-step-row { margin-top: 0.35em; color: #fff; font-size: 0.92em; font-weight: 700; word-break: keep-all; }
.transit-step-row time { margin-right: 0.45em; color: var(--tr-led); font-weight: 800; font-variant-numeric: tabular-nums; }
.transit-step-meta { margin: 0.25em 0 0 0.2em; padding-left: 0.7em; border-left: 2px dashed var(--line, #94a3b8); color: #9fb0cc; font-size: 0.78em; font-weight: 600; }
.transit-express { margin-left: 0.3em; padding: 0 0.4em; border-radius: 999px; background: #b42318; color: #fff; font-size: 0.85em; }
.transit-transfer { padding: 0.2em 0.9em; color: #9fb0cc; font-size: 0.78em; font-weight: 700; }
.transit-transfer::before { content: "⇅ "; }
.transit-kakao { font-size: 0.82em; }
.transit-kakao a { color: #7ec8ff; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.transit-kakao a:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 2px; }

/* ── 버스 결과 ── 지하철 결과와 같은 어두운 판. 노선 번호 배지는 유형 색(서울 간선 파랑·지선 초록·순환 노랑·광역 빨강 - 흔한 표기, 장식). */
.transit-bus {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: 1.1em 1em 1em;
  border-radius: 1rem;
  background: var(--tr-board);
  color: var(--tr-led-dim);
}
.transit-bus .transit-note { color: #dbe4f3; }
.transit-bus .transit-dim { color: #9fb0cc; }
.transit-bus .transit-source { color: #8ea0bd; }
.transit-note-bar { color: #c7d6f2; }
.transit-bus-title { display: flex; align-items: center; gap: 0.4em; color: #fff; font-size: 1.05em; font-weight: 800; word-break: keep-all; }
.transit-bus-list { display: grid; gap: 0.4em; margin: 0; padding: 0; list-style: none; }
.transit-bus-candidate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.2em 0.7em;
  width: 100%;
  padding: 0.6em 0.75em;
  border: 0;
  border-radius: 0.75em;
  background: #111b2e;
  box-shadow: inset 0 0 0 1px var(--tr-board-line);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.transit-bus-candidate:hover { background: #16233b; }
.transit-bus-candidate:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 2px; }
.transit-bus-candidate .transit-bus-sub,
.transit-bus-candidate .transit-bus-times { grid-column: 2; }
.transit-bus-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2em;
  padding: 0.15em 0.55em;
  border-radius: 0.5em;
  background: #64748b;
  color: #fff;
  font-size: 0.9em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.transit-bus-no[data-type="trunk"] { background: #2463d6; }
.transit-bus-no[data-type="branch"],
.transit-bus-no[data-type="village"] { background: #27752f; }
.transit-bus-no[data-type="circular"] { background: #9a5b00; }
.transit-bus-no[data-type="express"] { background: #c81e2a; }
.transit-bus-no[data-type="airport"] { background: #0f7fb5; }
.transit-bus-no[data-type="night"] { background: #24324f; box-shadow: inset 0 0 0 1px #6b7fa8; }
.transit-bus-no-lg { font-size: 1.15em; min-width: 3.6em; }
.transit-bus-stop-icon {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 0.2em;
  background: #1f5fbf;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.5);
}
.transit-bus-stop-name { font-weight: 800; }
.transit-bus-sub { min-width: 0; color: #c9d4e8; font-size: 0.82em; font-weight: 600; overflow-wrap: anywhere; }
.transit-bus-times { color: var(--tr-led); font-size: 0.78em; font-weight: 700; }
.transit-bus-facts { display: flex; flex-wrap: wrap; gap: 0.25em 0.9em; margin-top: 0.35em; color: #dbe4f3; font-size: 0.82em; font-weight: 700; }
.transit-stops { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0 0 0 0.2em; list-style: none; max-height: 28em; overflow-y: auto; }
.transit-stop { position: relative; }
.transit-stop::before { content: ""; position: absolute; left: 0.62em; top: 0; bottom: 0; width: 3px; background: #33415a; }
.transit-stop:first-child::before { top: 50%; }
.transit-stop:last-child::before { bottom: 50%; }
.transit-stop-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: 100%;
  min-height: 2.3em;
  padding: 0.25em 0.4em;
  border: 0;
  border-radius: 0.5em;
  background: transparent;
  color: #e3ecfb;
  font-size: 0.86em;
  text-align: left;
  cursor: pointer;
}
.transit-stop-btn:hover { background: rgb(255 255 255 / 0.06); }
/* 도착을 부를 수 없는 가상 정류장(서울 정류장 번호 "0") - 누를 수 없는 줄. */
.transit-stop-static { cursor: default; opacity: 0.75; }
.transit-stop-static:hover { background: none; }
.transit-stop-btn:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: -2px; }
.transit-stop-dot { position: relative; z-index: 1; flex: 0 0 auto; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--tr-board); box-shadow: 0 0 0 2.5px #8ea0bd; }
.transit-stop-name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.transit-stop-bus { margin-left: auto; padding: 0.05em 0.5em; border-radius: 999px; background: var(--tr-mint); color: var(--tr-navy-deep); font-size: 0.78em; font-weight: 800; }
.transit-stop[data-bus="true"] .transit-stop-dot { background: var(--tr-mint); box-shadow: 0 0 0 2.5px var(--tr-mint); }
.transit-arrivals { display: grid; gap: 0.35em; margin: 0; padding: 0; list-style: none; }
.transit-arrival { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.7em; padding: 0.45em 0.6em; border-radius: 0.6em; background: #111b2e; }
.transit-arrival-msg { color: var(--tr-led); font-size: 0.88em; font-weight: 800; }

/* ── 확인·조회 창 ── 연 직후 400ms 는 창 안이 누르기를 받지 않는다(data-settling). */
.transit dialog[data-settling] > * { pointer-events: none; }
.transit-dialog[data-phase="confirm"] [data-phase-show="loading"],
.transit-dialog[data-phase="loading"] [data-phase-show="confirm"] { display: none; }
.transit-dialog[data-kind="subway"] [data-kind-show="bus"],
.transit-dialog[data-kind="bus"] [data-kind-show="subway"] { display: none; }
.transit-dialog-facts { display: grid; gap: 0.35em; }
.transit-dialog-facts div { display: flex; gap: 0.6em; }
.transit-dialog-facts dt { flex: 0 0 auto; min-width: 4.5em; color: #6b7280; font-weight: 600; }
.transit-dialog-facts dd { min-width: 0; color: #111827; font-weight: 800; overflow-wrap: anywhere; }
.dark .transit-dialog-facts dt { color: #9ca3af; }
.dark .transit-dialog-facts dd { color: #f9fafb; }
.transit-loading { margin: 0.9em 1.25em 0; }
.transit-loading-scene {
  position: relative;
  height: 8.5em;
  overflow: hidden;
  border-radius: 0.9em;
  background: linear-gradient(180deg, #8fc8f2 0%, #cfe9fb 62%, #d9dde3 62%, #c3c9d2 100%);
}
.dark .transit-loading-scene { background: linear-gradient(180deg, #16204a 0%, #34406f 62%, #3a4152 62%, #2b3140 100%); }
.transit-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 .transit-loading-sun { background: #f2f4ff; box-shadow: 0 0 1em #c9d2ff; }
.transit-loading-city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 38%;
  height: 2.6em;
  background:
    linear-gradient(#9fb3cc, #9fb3cc) 4% 100% / 9% 70% no-repeat,
    linear-gradient(#b4c4d8, #b4c4d8) 16% 100% / 7% 100% no-repeat,
    linear-gradient(#a8b9cf, #a8b9cf) 28% 100% / 10% 55% no-repeat,
    linear-gradient(#bccadb, #bccadb) 42% 100% / 6% 85% no-repeat,
    linear-gradient(#9fb3cc, #9fb3cc) 55% 100% / 11% 65% no-repeat,
    linear-gradient(#b4c4d8, #b4c4d8) 70% 100% / 7% 95% no-repeat,
    linear-gradient(#a8b9cf, #a8b9cf) 84% 100% / 10% 60% no-repeat;
  background-repeat: repeat-x;
  animation: transit-city 9s linear infinite;
}
.transit-loading-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  height: 0.5em;
  background: repeating-linear-gradient(90deg, #5b6474 0 1.4em, #7a8394 1.4em 1.6em);
  animation: transit-track 0.6s linear infinite;
}
.transit-loading-wind {
  position: absolute;
  inset: 20% 0 50% 0;
  background: repeating-linear-gradient(90deg, transparent 0 3.2em, rgb(255 255 255 / 0.55) 3.2em 4.6em);
  background-size: 9em 2px;
  background-repeat: repeat-x;
  background-position: 0 40%;
  opacity: 0.7;
  animation: transit-wind 1.2s linear infinite;
}
.transit-loading-vehicle {
  position: absolute;
  left: 50%;
  bottom: 27%;
  width: min(72%, 20em);
  height: auto;
  transform: translateX(-50%);
  animation: transit-roll-in 1s ease-out both, transit-bob 0.5s ease-in-out 1s infinite alternate;
}
.transit-loading-bus { width: min(64%, 16em); bottom: 18%; }
@keyframes transit-city { to { background-position-x: -100%; } }
@keyframes transit-track { to { background-position-x: -1.6em; } }
@keyframes transit-wind { to { background-position-x: -9em; } }
@keyframes transit-roll-in { from { transform: translateX(-130%); } to { transform: translateX(-50%); } }
@keyframes transit-bob { to { transform: translateX(-50%) translateY(-2px); } }
.transit-loading-sub { margin-top: 0.6em; color: #4b5563; font-size: 0.82em; text-align: center; }
.dark .transit-loading-sub { color: #cbd5e1; }
.transit-loading-status { padding: 0.4em 1.25em 1.1em; color: #374151; font-size: 0.85em; text-align: center; }
.dark .transit-loading-status { color: #d1d5db; }
.transit-loading-status:empty { padding: 0; }

/* 3D 를 쓸 수 없으면(포스터만) 무대 말풍선을 숨긴다. */
.transit[data-stage="none"] .transit-stage-caption { display: none; }

@media (prefers-reduced-motion: reduce) {
  .transit-loading-city,
  .transit-loading-track,
  .transit-loading-wind,
  .transit-loading-vehicle,
  .transit-live-dot { animation: none; }
  .transit-loading-vehicle { transform: translateX(-50%); }
  .transit-swap { transition: none; }
}

/* 강제 색 모드 - 테 없는 칩·세그먼트·버튼에 테를 돌려준다. */
@media (forced-colors: active) {
  .transit-seg span,
  .transit-mode span,
  .transit-line-chip span,
  .transit-chip,
  .transit-swap,
  .transit-submit,
  .transit-tab { border: 1px solid ButtonText; }
  .transit-seg input:checked + span,
  .transit-mode input:checked + span,
  .transit-line-chip input:checked + span,
  .transit-tab[aria-selected="true"] { outline: 2px solid Highlight; }
  .transit-picker-input { background-image: none; padding-left: 0.7em; }
  select.transit-select-arrow { appearance: auto; -webkit-appearance: auto; background-image: none; padding-right: 0.7em; }
  .transit-chip-station::before { display: none; }
  .transit-picker-list { border: 1px solid CanvasText; }
  /* 상자 그림자로만 경계를 그리던 단추는 강제 색 모드에서 맨 글자가 됐다(검수 11-10). */
  .transit-bus-candidate, .transit-stop-btn:not(.transit-stop-static), .transit-live-refresh, .transit-hours summary { border: 1px solid ButtonText; }
  .transit-option[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ── 전체 노선도(2026-11-10) ── 무대 왼쪽 아래 [전체 노선도] 단추와 전체 화면 창(lib/transit/route_map - 2D SVG). 노선도 바탕은 종이색(다크 모드는
   짙은 남색)이고, 노선 굵기·역 표시·이름표 글자는 확대해도 화면 크기가 그대로다(non-scaling-stroke, 글자는 --rm-u 로 되곱한다). 이름표는
   확대 단계(data-level)마다 미리 고른 것(data-l)만 보이고, 고른 역·경로 역(.rm-show)은 늘 보인다. */
/* 남색 채움 + 흰 테 - 낮(밝은 땅)에는 남색 덩어리로, 밤(짙은 하늘)에는 흰 테로 보인다. 흰 알약이던 때는 무대의 배지·역 이름표와 같은 모양이라
   단추로 읽히지 않았고 낮 땅과 1.5:1 이었다(2026-11-11 사용자 검토). 높이는 손가락 권장 44px(글자 0.92em × 3em). 민트는 주 버튼 몫이라 쓰지 않는다. */
.transit-map-open {
  position: absolute;
  left: 0.9em;
  bottom: 0.8em;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 3em;
  max-width: calc(100% - 1.8em);
  padding: 0.4em 1.1em 0.4em 0.9em;
  border: 0;
  border-radius: 999px;
  background: var(--tr-navy);
  color: #fff;
  font-size: 0.92em;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  word-break: keep-all;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.92), 0 10px 22px -10px rgb(15 23 42 / 0.75);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.transit-map-open svg { flex: 0 0 auto; width: 1.2em; height: 1.2em; }
.transit-map-open:hover { background: #1f3560; transform: translateY(-1px); }
.transit-map-open:active { transform: translateY(1px); }
/* 초점 고리 - 남색 띠 + 바깥 흰 띠(낮 땅에는 남색이, 밤 하늘에는 흰색이 보인다). 민트 고리는 낮 땅과 1.7:1 이었다(검수 11-11). */
.transit-map-open:focus-visible {
  outline: 3px solid var(--tr-navy-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.92), 0 0 0 7px #fff, 0 10px 22px -10px rgb(15 23 42 / 0.75);
}
/* 움직임 줄이기 - 기본 규칙 뒤에 둔다(앞 블록에 두면 같은 우선순위의 기본 규칙이 덮었다 - 검수 11-11). */
@media (prefers-reduced-motion: reduce) {
  .transit-map-open { transition: none; }
  .transit-map-open:hover,
  .transit-map-open:active { transform: none; }
}

.transit-map-dialog {
  --rm-paper: #f7f5ef;
  --rm-chip: #ffffff;
  --rm-ink: #0f172a;
  --rm-muted: #4b5563;
  --rm-rule: #e2e0d8;
  --rm-river: #c7e3f3;
  --rm-halo: #f7f5ef;
  --rm-dot: #ffffff;
  --rm-dot-stroke: #1f2937;
  width: min(100vw - 2rem, 1180px);
  height: min(100dvh - 2rem, 880px);
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  background: transparent;
  overflow: hidden;
}
.transit-map-dialog::backdrop { background: rgb(15 23 42 / 0.72); backdrop-filter: blur(4px); }
.dark .transit-map-dialog {
  --rm-paper: #0f172a;
  --rm-chip: #111c33;
  --rm-ink: #e5e7eb;
  --rm-muted: #a3acb9;
  --rm-rule: #24324f;
  --rm-river: #1d3a5c;
  --rm-halo: #0f172a;
  --rm-dot: #0f172a;
  --rm-dot-stroke: #e5e7eb;
}
@media (max-width: 639px) {
  .transit-map-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
}
.rm-shell { display: flex; flex-direction: column; height: 100%; background: var(--rm-paper); color: var(--rm-ink); }
.rm-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(--tr-navy) 0%, var(--tr-navy-deep) 100%);
  color: #fff;
}
.rm-head-train { width: auto; height: 1.5em; flex: none; }
.rm-title { margin: 0 auto 0 0; font-size: 1.05em; font-weight: 800; word-break: keep-all; }
.rm-regions { display: flex; flex-wrap: wrap; gap: 0.2em; margin: 0; padding: 0.2em; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.1); }
.rm-region { position: relative; }
.rm-region input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rm-region span { display: block; padding: 0.3em 0.85em; border-radius: 999px; color: #dbe4f3; font-size: 0.82em; font-weight: 700; }
.rm-region input:checked + span { background: #fff; color: var(--tr-navy-deep); }
.rm-region input:focus-visible + span { outline: 3px solid var(--tr-mint); outline-offset: 1px; }
.rm-close { display: inline-flex; padding: 0.3em; border: 0; border-radius: 0.6em; background: transparent; color: #fff; cursor: pointer; }
.rm-close svg { width: 1.4em; height: 1.4em; }
.rm-close:hover { background: rgb(255 255 255 / 0.12); }
.rm-close:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 1px; }
.rm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.7em; padding: 0.6em 1em; border-bottom: 1px solid var(--rm-rule); background: var(--rm-chip); }
.rm-search { position: relative; flex: 0 1 15em; min-width: 11em; }
.rm-search-input {
  width: 100%;
  min-height: 2.4em;
  padding: 0.35em 0.8em;
  border: 1px solid var(--rm-rule);
  border-radius: 0.7em;
  background: var(--rm-paper);
  color: var(--rm-ink);
  font-size: 0.9em;
}
.rm-search-input:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 1px; }
.rm-legend { display: flex; flex: 1 1 0; gap: 0.35em; min-width: 0; padding-bottom: 0.15em; overflow-x: auto; scrollbar-width: thin; }
.rm-legend-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--rm-rule);
  border-radius: 999px;
  background: var(--rm-paper);
  color: var(--rm-ink);
  font-size: 0.78em;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.rm-legend-btn::before { content: ""; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--line); }
.rm-legend-btn[aria-pressed="true"] { border-color: var(--line); background: var(--line); color: var(--line-ink, #fff); }
.rm-legend-btn[aria-pressed="true"]::before { background: var(--line-ink, #fff); }
.rm-legend-btn:focus-visible, .rm-clear:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 1px; }
.rm-clear { padding: 0.3em 0.8em; border: 1px solid var(--rm-rule); border-radius: 999px; background: var(--rm-paper); color: var(--rm-ink); font-size: 0.78em; font-weight: 700; cursor: pointer; }
.rm-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.rm-viewport { position: absolute; inset: 0; overflow: hidden; background: var(--rm-paper); cursor: grab; touch-action: none; }
.rm-viewport:active { cursor: grabbing; }
.rm-viewport:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: -3px; }
.rm { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.rm-river { fill: none; stroke: var(--rm-river); stroke-linecap: round; stroke-linejoin: round; }
.rm-line { fill: none; stroke-width: 4.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s; }
.rm-line.rm-dim { opacity: 0.14; }
/* 짙은 노선(1호선·경강선·부산 동해선·대구 대경선)의 밝은 테 - 다크 바탕에서 선이 2:1 안팎이라 묻혔다(검수 11-10). 테 #94a3b8 은 바탕과 6.9:1. */
.rm-case { display: none; fill: none; stroke: #94a3b8; stroke-width: 7px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s; }
.dark .rm-case { display: inline; }
.rm-case.rm-dim { opacity: 0.14; }
.rm-glow-path { fill: none; stroke-width: 15px; stroke-opacity: 0.32; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.rm-dot { fill: var(--rm-dot); stroke: var(--rm-dot-stroke); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.rm-dot.rm-transfer { stroke-width: 2.3px; }
.rm-dot.rm-dim { opacity: 0.25; }
.rm-dot.rm-selected { fill: var(--tr-mint); stroke: var(--tr-navy-deep); stroke-width: 3px; }
.rm-hit { fill: transparent; cursor: pointer; }
.rm-label {
  font-size: calc(12.5px * var(--rm-u, 1));
  font-weight: 700;
  fill: var(--rm-ink);
  paint-order: stroke;
  stroke: var(--rm-halo);
  stroke-width: calc(3.2px * var(--rm-u, 1));
  stroke-linejoin: round;
  pointer-events: none;
}
.rm-label.rm-dim { opacity: 0.3; }
.rm-label.rm-show { font-weight: 800; }
.rm[data-level="0"] .rm-label:not(.rm-show):not([data-l="0"]),
.rm[data-level="1"] .rm-label:not(.rm-show):not([data-l="0"]):not([data-l="1"]),
.rm[data-level="2"] .rm-label:not(.rm-show)[data-l="3"],
.rm[data-level="2"] .rm-label:not(.rm-show)[data-l="9"],
.rm[data-level="3"] .rm-label:not(.rm-show)[data-l="9"] { display: none; }
.rm-zoom { position: absolute; right: 0.8em; bottom: 0.8em; display: flex; flex-direction: column; gap: 0.35em; }
.rm-zoom button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border: 1px solid var(--rm-rule);
  border-radius: 0.75em;
  background: var(--rm-chip);
  color: var(--rm-ink);
  font-size: 1.05em;
  font-weight: 800;
  box-shadow: 0 6px 14px -8px rgb(15 23 42 / 0.5);
  cursor: pointer;
}
.rm-zoom button svg { width: 1.1em; height: 1.1em; }
.rm-zoom button:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 1px; }
.rm-card { min-height: 3.4em; padding: 0.7em 1em; border-top: 1px solid var(--rm-rule); background: var(--rm-chip); }
.rm-card-hint { margin: 0; color: var(--rm-muted); font-size: 0.88em; word-break: keep-all; }
.rm-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; }
.rm-card-name { margin: 0; font-size: 1.05em; font-weight: 800; }
.rm-card-ko { color: var(--rm-muted); font-size: 0.85em; }
.rm-card-lines { display: flex; flex-wrap: wrap; gap: 0.3em; margin: 0.45em 0 0.55em; padding: 0; list-style: none; }
.rm-card-lines li { padding: 0.15em 0.6em; border-radius: 999px; background: var(--line); color: var(--line-ink, #fff); font-size: 0.75em; font-weight: 700; }
.rm-card-actions { display: flex; flex-wrap: wrap; gap: 0.4em; }
.rm-card-btn {
  min-height: 2.3em;
  padding: 0.35em 0.95em;
  border: 1px solid var(--rm-rule);
  border-radius: 0.75em;
  background: var(--rm-paper);
  color: var(--rm-ink);
  font-size: 0.88em;
  font-weight: 700;
  cursor: pointer;
}
.rm-card-btn.rm-card-main { border-color: var(--tr-mint-deep); background: var(--tr-mint); color: var(--tr-navy-deep); }
.rm-card-btn:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 1px; }
.rm-note { margin: 0; padding: 0.3em 1em 0.6em; background: var(--rm-chip); color: var(--rm-muted); font-size: 0.72em; word-break: keep-all; }
@media (forced-colors: active) {
  .rm { forced-color-adjust: none; }
  .transit-map-open, .rm-legend-btn, .rm-card-btn, .rm-zoom button, .rm-clear { border: 1px solid ButtonText; }
  /* 고른 권역·눌린 범례는 색이 지워져 구분되지 않았다(검수 11-10) - 테두리로 가른다. */
  .rm-region input:checked + span, .rm-legend-btn[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 1px; }
}

/* ── 버스 노선 지도 창(2026-11-10) ── 전체 노선도 창(.transit-map-dialog·.rm-*)의 틀을 같이 쓰고 지도 칸만 카카오 지도다. 노선 상세 머리의
   [지도에서 보기] 단추, 정류장 고르기 칸, 범례, 지도 위 겹침(정류장 점·기점/종점 이름표·운행 중 버스 - bus_map.js 가 만든다). 겹침은 카카오
   지도 안이라 글자 크기를 px 로 둔다(큰글씨 em 이 지도 축척과 따로 놀지 않게). */
.transit-bus-headside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45em; }
.transit-bus-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(--tr-mint);
  color: var(--tr-navy-deep);
  font-size: 0.82em;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--tr-mint-deep);
  cursor: pointer;
}
.transit-bus-mapbtn svg { width: 1.15em; height: 1.15em; }
.transit-bus-mapbtn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--tr-mint-deep); }
.transit-bus-mapbtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bm-head-bus { height: 1.7em; }
/* 좁은 화면 - 닫기 단추를 첫 줄에 두고 운행 대수는 다음 줄로(대수가 길어 닫기가 둘째 줄로 밀렸다 - 390px 실측 11-10). */
@media (max-width: 639px) {
  .transit-busmap .rm-close { order: 3; }
  .transit-busmap .bm-count { order: 4; }
  .transit-busmap .bm-head-bus { height: 1.4em; }
}
.bm-count { margin: 0; padding: 0.2em 0.7em; border-radius: 999px; background: rgb(255 255 255 / 0.12); color: #dbe4f3; font-size: 0.78em; font-weight: 700; white-space: nowrap; }
.bm-stops { display: flex; flex: 1 1 16em; align-items: center; gap: 0.5em; min-width: 0; }
.bm-stops-label { flex: none; color: var(--rm-muted); font-size: 0.82em; font-weight: 700; }
.bm-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 24em;
  min-height: 2.4em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--rm-rule);
  border-radius: 0.7em;
  background: var(--rm-paper);
  color: var(--rm-ink);
  font-size: 0.9em;
}
.bm-select:focus-visible { outline: 3px solid var(--tr-mint); outline-offset: 1px; }
.bm-legend { display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; margin: 0; padding: 0; list-style: none; color: var(--rm-muted); font-size: 0.78em; font-weight: 700; }
.bm-legend li { display: inline-flex; align-items: center; gap: 0.35em; }
.bm-key { display: inline-block; flex: none; }
.bm-key-end { width: 1.6em; height: 0.9em; border-radius: 999px; background: linear-gradient(90deg, var(--tr-mint) 0 45%, var(--tr-navy-deep) 45%); }
.dark .bm-key-end { box-shadow: 0 0 0 1px #a3acb9; }
.bm-key-stop { width: 0.8em; height: 0.8em; border: 2px solid #2463d6; border-radius: 50%; background: #fff; }
.bm-key-bus { width: 1em; height: 1em; border: 2px solid #fff; border-radius: 50%; background: #2463d6; box-shadow: 0 0 0 1px #2463d6; }
.bm-map { position: absolute; inset: 0; background: #e8eef3; }
.bm-loading { position: absolute; inset: 0; z-index: 1; background: var(--rm-paper); display: flex; align-items: center; justify-content: center; margin: 0; padding: 1em; color: var(--rm-muted); font-size: 0.9em; font-weight: 700; text-align: center; word-break: keep-all; }
.transit-busmap[data-state="error"] .bm-loading { color: #b42318; }
.dark .transit-busmap[data-state="error"] .bm-loading { color: #fca5a5; }
.bm-card-actions { margin-top: 0.4em; }

/* 지도 위 겹침 - 정류장은 누를 자리를 넉넉히(22px) 두고 점은 가운데 작게. */
.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, #2463d6);
  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(--tr-navy-deep); background: var(--tr-mint); }
.bm-stop:focus-visible { outline: 3px solid var(--tr-mint); 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(--tr-navy-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(--tr-mint); color: var(--tr-navy-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, #2463d6);
  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) {
  .bm-stop:hover::before { transform: none; }
}
@media (forced-colors: active) {
  .transit-bus-mapbtn, .bm-select { border: 1px solid ButtonText; }
  .bm-stop::before, .bm-end, .bm-bus, .bm-key { forced-color-adjust: none; }
}