/* 사이트 기능 "고속버스 시간표 - 고속버스 시간 찾기"(/site/express-bus, 2026-11-09) 전용 스타일. 이 페이지에서만 싣는다
   (site_features/_express_bus 파셜이 head 에 dynamic 추적 스타일시트로 건다 - 운세·파크 골프장과 같은 방식).

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

   디자인 말: 찾기 막대는 **고속도로 방향 표지판**의 초록 판(흰 글자 - 짜임은 KTX 찾기 막대와 같다, 2026-11-09), 시간표는 **터미널 출발 전광판**(검은 판·호박색 글자)이다.
   둘 다 테마와 무관하게 같은 색이다(표지판·전광판은 원래 밤낮이 없다). 운행 중 버스·안내 글은 사이트 테마를 따른다.
   글자 색은 바탕과 4.5:1 이 넘게 둔다. 글자 크기는 em 으로 적고 뿌리에서 큰글씨 모드의 배율(--silver-scale)을 한 번 곱한다. */

.express-bus {
  --eb-sky: #cfe6fb;
  --eb-sky-deep: #7fb2e5;
  --eb-hill: #6aa857;
  --eb-road: #3d434c;
  --eb-sign: #0b6b4c;
  --eb-sign-deep: #08573e;
  --eb-board: #0c1015;
  --eb-board-line: #1f2a33;
  --eb-led: #ffb627;
  --eb-led-dim: #a8936a;
  --eb-led-green: #6ee7a8;
  --eb-premium: #e0b23c;
  --eb-deluxe: #5b9cf5;
  --eb-standard: #b9c0ca;
  --eb-other: #c4a7f5;
  font-size: calc(1rem * var(--silver-scale, 1));
}

/* ── 무대 카드 ── */
.express-bus-card {
  border-radius: 1.25rem;
  background: var(--eb-sign-deep);
  box-shadow: 0 0 0 1px rgb(8 87 62 / 0.4), 0 18px 40px -18px rgb(15 23 42 / 0.5);
}

/* 무대 높이는 폭에 맞춘 최소 높이다(받침 ::before). 장면은 캔버스가 absolute 로 덮는다. 포스터(배경 그림)가 먼저 보이고, 3D 가 준비되면
   그 위로 떠오른다. WebGL 이 없거나(data-gl=none) 받지 못하면 포스터만 남는다. 포스터가 없을 때의 바탕은 하늘·언덕·도로 띠다. */
.express-bus-stage {
  position: relative;
  overflow: hidden;
  min-height: 15rem;
  background-color: var(--eb-sky);
  background-image: linear-gradient(180deg, var(--eb-sky) 0%, var(--eb-sky-deep) 48%, var(--eb-hill) 49%, var(--eb-hill) 70%,
    var(--eb-road) 71%, var(--eb-road) 100%);
  background-size: cover;
  background-position: center 55%;
  isolation: isolate;
  touch-action: none;
}
.express-bus-stage::before {
  content: "";
  display: block;
  padding-top: 58%;
}
@media (min-width: 1024px) {
  .express-bus-stage::before { padding-top: min(58%, calc(44vh - 4rem)); }
  .express-bus-stage { min-height: 17rem; }
}
/* 손가락 화면에서는 한 손가락 끌기를 페이지 스크롤로 넘긴다(touch-action 은 조상과 교집합 - 파크 골프장과 같은 함정). */
@media (any-pointer: coarse) {
  .express-bus-stage { touch-action: pan-y pinch-zoom; }
}
.express-bus-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.express-bus-stage[data-gl="gpu"] canvas,
.express-bus-stage[data-gl="software"] canvas { opacity: 1; }
.express-bus-labels {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* 무대 위 터미널 이름표 - 작은 고속도로 표지판. */
.express-bus-sign-label {
  pointer-events: none;
  max-width: 11em;
  padding: 0.25em 0.6em;
  border: 2px solid #fff;
  border-radius: 0.4em;
  background: var(--eb-sign);
  color: #fff;
  font-size: 0.78em;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 16px -8px rgb(15 23 42 / 0.7);
}
.express-bus-sign-label[data-end="to"] { background: #134a8e; }

.express-bus-stage-head {
  position: absolute;
  top: 0.9em;
  left: 0.9em;
  right: 0.9em;
  z-index: 2;
  pointer-events: none;
}
.express-bus-eyebrow {
  display: inline-block;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.9);
  color: var(--eb-sign-deep);
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* 제목은 반투명 흰 판 위에 둔다 - 하늘이 밤·노을로 바뀌어도 대비가 남는다(검수 11-09 - 글자 그림자만으로는 밤 하늘에서 1.1:1 이었다). */
.express-bus-title {
  display: inline-block;
  margin-top: 0.35em;
  padding: 0.12em 0.45em;
  border-radius: 0.45em;
  background: rgb(255 255 255 / 0.86);
  color: #0b2238;
  font-size: 1.35em;
  font-weight: 900;
  line-height: 1.2;
}
.express-bus-stage-route {
  position: absolute;
  left: 0.9em;
  bottom: 0.8em;
  z-index: 2;
  max-width: calc(100% - 1.8em);
  padding: 0.3em 0.7em;
  border-radius: 0.5em;
  background: rgb(12 16 21 / 0.82);
  color: var(--eb-led);
  font-size: 0.8em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ── 찾기 막대 ── KTX 열차 시간표의 찾기 막대와 같은 짜임이다(2026-11-09 사용자 요청 "KTX 와 같이") - 카드 아래를 채우는 무늬·테 없는 판, 테 두른
   칸을 줄이고(날짜는 한 묶음, 노선 칩은 테 없이) 강조색은 주 버튼(노랑) 하나. 색만 이 사이트의 고속도로 표지판 초록이다(KTX 는 남색).
   예전의 흰 표지판 테(3px → 1.5px)는 뺐다. */
.express-bus-bar {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.1em 1em;
  background: linear-gradient(180deg, var(--eb-sign) 0%, var(--eb-sign-deep) 100%);
  color: #fff;
}
.express-bus-tagline {
  font-size: 0.85em;
  line-height: 1.5;
  color: #e3f3ea;
  word-break: keep-all;
}
/* 폼이 컨테이너다 - 좁은 막대(폰·좁은 왼쪽 칸)에서 출발·도착 칸을 위아래로 쌓는다(아래 @container). 화면 폭이 아니라 막대 폭으로 가른다. */
.express-bus-form {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  container-type: inline-size;
}
.express-bus-ends {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 0.5em;
}
.express-bus-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.3em;
}
.express-bus-label {
  font-size: 0.75em;
  font-weight: 700;
  color: #d8eee2;
}
/* 출발·도착 표시 점 - 무대의 터미널 표지판 색(출발 초록·도착 파랑)을 밝게 따른다(테 없이 작게 - KTX 와 같다). */
.express-bus-label-from::before,
.express-bus-label-to::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.4em;
  border-radius: 50%;
  vertical-align: 0.02em;
}
.express-bus-label-from::before { background: #6ee7a8; }
.express-bus-label-to::before { background: #7fb2f0; }
/* 고르기 칸 - 브라우저 기본 화살표 대신 굵은 화살표를 그린다(둥근 칩·버튼과 어울리게, 2026-11-09 찾기 막대 정돈). 강제 색 모드는 기본 모양으로 둔다. */
.express-bus-select {
  width: 100%;
  min-width: 0;
  min-height: 2.75em;
  padding: 0.45em 2.2em 0.45em 0.7em;
  border: 0;
  border-radius: 0.7em;
  appearance: none;
  -webkit-appearance: none;
  background: #fff 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='%2308573e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.7em center / 0.95em;
  color: #10261c;
  font-size: 0.95em;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
}
.express-bus-select:disabled {
  background-color: #dfeae4;
  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='%237a8c82' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color: #4b5d53;
  cursor: not-allowed;
}
.express-bus-select:focus-visible,
.express-bus-swap:focus-visible,
.express-bus-submit:focus-visible,
.express-bus-popular-chip:focus-visible,
.express-bus-day input:focus-visible + span {
  outline: 3px solid #ffd447;
  outline-offset: 2px;
}
.express-bus-swap {
  display: inline-flex;
  min-width: 2.75em;
  min-height: 2.75em;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  font-size: 1.05em;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.15s ease;
}
.express-bus-swap svg { width: 1.3em; height: 1.3em; }
.express-bus-swap:hover { background: rgb(255 255 255 / 0.24); }
.express-bus-days {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
/* 날짜 칩 셋은 한 묶음(세그먼트) - 옅은 판 안에서 고른 칸만 흰색이다(KTX 와 같다). */
.express-bus-day-row {
  display: inline-flex;
  gap: 0.15em;
  margin-top: 0.3em;
  padding: 0.2em;
  border-radius: 0.8em;
  background: rgb(255 255 255 / 0.1);
}
.express-bus-day { position: relative; display: inline-flex; }
.express-bus-day input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
/* 날짜 칩 - 위 줄 이름(오늘·내일·모레), 아래 줄 날짜(스크립트가 채운다). 날짜가 아직 없으면(스크립트 전) 이름만 선다. */
.express-bus-day span {
  display: inline-flex;
  min-width: 5.2em;
  min-height: 2.75em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.85em;
  border-radius: 0.6em;
  color: #f0f9f4;
  font-size: 0.85em;
  line-height: 1.2;
  cursor: pointer;
}
.express-bus-day-name { font-weight: 700; }
.express-bus-day-date { font-size: 0.78em; font-weight: 600; opacity: 0.9; }
.express-bus-day-date:empty { display: none; }
/* 가리킬 때 바탕은 옅게(6%)·날짜 줄은 불투명 - 10% 바탕에 0.9 날짜는 띠의 밝은 쪽에서 4.1:1 로 모자랐다(검수 11-09). */
.express-bus-day:hover span { color: #fff; background: rgb(255 255 255 / 0.06); }
.express-bus-day:hover .express-bus-day-date { opacity: 1; }
.express-bus-day input:checked + span { background: #fff; color: var(--eb-sign-deep); }
.express-bus-day input:checked + span .express-bus-day-name { font-weight: 800; }
/* 날짜 칩과 [시간표 보기]를 한 줄에 - 좁으면 버튼이 다음 줄 전체 폭이 된다. */
.express-bus-go {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75em 1em;
}
.express-bus-go .express-bus-days { flex: 0 1 auto; }
.express-bus-submit {
  flex: 1 1 11em;
  min-height: 2.75em;
  padding: 0.5em 1.3em;
  border: 0;
  border-radius: 0.7em;
  background: #ffd447;
  color: #1d2a12;
  font-size: 0.95em;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 #c99e12;
}
.express-bus-submit:hover { background: #ffde6e; }
.express-bus-submit:active { transform: translateY(2px); box-shadow: 0 1px 0 #c99e12; }
/* 자주 찾는 노선 - 이름표와 칩을 한 줄로 흘린다(KTX 와 같다). 칩은 테 없이 옅은 바탕. */
.express-bus-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35em 0.6em;
}
/* 이름표는 첫 줄 칩과 높이를 맞춘다 - 칩 높이 2.2em(0.78em 글자) = 이 글자(0.72em)의 2.38줄. */
.express-bus-popular-label {
  font-size: 0.72em;
  font-weight: 700;
  line-height: 2.38;
  color: #c4e3d2;
}
.express-bus-popular-list {
  display: flex;
  flex: 1 1 12em;
  flex-wrap: wrap;
  gap: 0.35em;
}
.express-bus-popular-chip {
  min-height: 2.2em;
  padding: 0.3em 0.8em;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  color: #f3fbf6;
  font-size: 0.78em;
  font-weight: 700;
  cursor: pointer;
}
.express-bus-popular-chip:hover { background: rgb(255 255 255 / 0.22); color: #fff; }
/* 좁은 막대 - 출발·도착 칸을 위아래로 쌓고 바꾸기 버튼은 두 칸 사이 오른쪽에 세로 화살표로 둔다(나란히 두면 "출발지를 고르세요" 가 잘렸다). */
@container (max-width: 32em) {
  .express-bus-ends { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.6em; }
  .express-bus-ends > .express-bus-field:first-child { grid-column: 1; grid-row: 1; }
  .express-bus-ends > .express-bus-field:last-child { grid-column: 1; grid-row: 2; }
  .express-bus-swap { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .express-bus-swap svg { transform: rotate(90deg); }
  /* 날짜 묶음은 막대 폭을 채우고 세 칸을 똑같이 나눈다 - 큰글씨 최대 배율의 390px 에서 묶음이 막대 끝을 넘었다(검수 11-09). */
  .express-bus-go .express-bus-days { flex: 1 1 100%; }
  .express-bus-day-row { display: flex; }
  .express-bus-day { flex: 1 1 0; min-width: 0; }
  .express-bus-day span { width: 100%; min-width: 0; padding-inline: 0.3em; }
}

/* ── 상태 줄 ── */
.express-bus-status {
  min-height: 1.4em;
  font-size: 0.875em;
  color: #374151;
}
.express-bus-status:empty { min-height: 0; }
.express-bus-status[data-tone="error"] { color: #b42318; font-weight: 700; }
.dark .express-bus-status { color: #d1d5db; }
.dark .express-bus-status[data-tone="error"] { color: #fca5a5; }

.express-bus-note {
  font-size: 0.875em;
  line-height: 1.6;
  color: #4b5563;
}
.dark .express-bus-note { color: #cbd5e1; }

/* ── 전광판 ── */
.express-bus-board {
  overflow: hidden;
  border-radius: 1rem;
  background: var(--eb-board);
  color: var(--eb-led);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 2px var(--eb-board-line), 0 18px 40px -20px rgb(15 23 42 / 0.6);
}
.express-bus-board .express-bus-note { padding: 1em 1.1em; color: #e5e7eb; }
.express-bus-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4em 1em;
  padding: 0.9em 1.1em 0.7em;
  border-bottom: 2px solid var(--eb-board-line);
  background: linear-gradient(180deg, #121922, var(--eb-board));
}
.express-bus-board-route {
  color: #fff;
  font-size: 1.1em;
  font-weight: 900;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.express-bus-board-date,
.express-bus-board-fetched {
  color: #c7ccd3;
  font-size: 0.78em;
}
.express-bus-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.4em;
  padding: 0.7em 1.1em;
  border-bottom: 1px solid var(--eb-board-line);
  font-size: 0.82em;
}
.express-bus-summary div { display: flex; gap: 0.4em; align-items: baseline; }
.express-bus-summary dt { color: #c7ccd3; }
.express-bus-summary dd { color: var(--eb-led); font-weight: 800; font-variant-numeric: tabular-nums; }
.express-bus-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em;
  padding: 0.7em 1.1em 0.2em;
}
.express-bus-filters:empty { display: none; }
.express-bus-chip {
  display: inline-flex;
  min-height: 2.2em;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.75em;
  border: 1px solid #3a4652;
  border-radius: 999px;
  background: transparent;
  color: #e5e7eb;
  font-size: 0.78em;
  font-weight: 700;
  cursor: pointer;
}
.express-bus-chip[aria-pressed="true"] { border-color: var(--eb-led); background: var(--eb-led); color: #1a1205; }
.express-bus-chip:focus-visible,
.express-bus-play:focus-visible,
.express-bus-toggle input:focus-visible { outline: 3px solid #ffd447; outline-offset: 2px; }
.express-bus-toggle {
  display: inline-flex;
  min-height: 2.2em;
  align-items: center;
  gap: 0.4em;
  margin-left: auto;
  color: #e5e7eb;
  font-size: 0.78em;
  cursor: pointer;
}
.express-bus-table-wrap {
  overflow-x: auto;
  padding: 0.3em 0.4em 0.6em;
}
.express-bus-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.express-bus-table th {
  padding: 0.5em 0.6em;
  color: #c7ccd3;
  font-size: 0.72em;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.express-bus-table th.text-right { text-align: right; }
.express-bus-table td {
  padding: 0.55em 0.6em;
  border-top: 1px solid var(--eb-board-line);
  font-size: 0.88em;
  white-space: nowrap;
  vertical-align: middle;
}
.express-bus-time {
  color: var(--eb-led);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05em !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 0 6px rgb(255 182 39 / 0.45);
}
.express-bus-time-arr { color: #ffd88a; text-shadow: none; }
.express-bus-col-duration { color: #e5e7eb; }
.express-bus-fare { text-align: right; color: #fff; font-weight: 700; }
.express-bus-state { text-align: right; }
.express-bus-row[data-departed="true"] td,
.express-bus-row[data-departed="true"] .express-bus-time { color: var(--eb-led-dim); text-shadow: none; }
.express-bus-row[data-next="true"] { background: rgb(255 182 39 / 0.1); }
.express-bus-row[aria-current="true"] { box-shadow: inset 4px 0 0 var(--eb-led-green); }
.express-bus-departed { color: var(--eb-led-dim); font-size: 0.85em; font-weight: 700; margin-right: 0.4em; }
.express-bus-next {
  margin-right: 0.4em;
  color: var(--eb-led-green);
  font-size: 0.85em;
  font-weight: 800;
}
/* 다음 차 깜박임은 몇 번만 - 끝없이 깜박이면 멈출 길이 없다(WCAG 2.2.2, 검수 11-09). */
@media (prefers-reduced-motion: no-preference) {
  .express-bus-row[data-next="true"] .express-bus-time { animation: express-bus-blink 1.6s ease-in-out 4; }
}
@keyframes express-bus-blink {
  50% { opacity: 0.55; }
}
.express-bus-play {
  display: inline-flex;
  width: 2.2em;
  height: 2.2em;
  align-items: center;
  justify-content: center;
  border: 1px solid #3a4652;
  border-radius: 999px;
  background: transparent;
  color: var(--eb-led-green);
  font-size: 0.75em;
  cursor: pointer;
}
.express-bus-play:hover { background: #18222c; }
/* 3D 무대를 쓸 수 없으면(WebGL 없음·데이터 절약·받지 못함) [▶]를 숨긴다(express_bus_finder 의 #noStage). */
.express-bus[data-stage="none"] .express-bus-play,
.express-bus[data-stage="none"] .express-bus-live-note { display: none; }
/* 등급 띠 - 전광판과 운행 중 칸이 함께 쓴다. 심야는 왼쪽에 남색 테를 더한다. */
.express-bus-grade {
  display: inline-flex;
  align-items: center;
  padding: 0.12em 0.55em;
  border-radius: 0.35em;
  background: var(--eb-standard);
  color: #111827;
  font-size: 0.8em;
  font-weight: 800;
}
.express-bus-grade[data-grade="premium"] { background: var(--eb-premium); }
.express-bus-grade[data-grade="deluxe"] { background: var(--eb-deluxe); color: #0b1530; }
.express-bus-grade[data-grade="other"] { background: var(--eb-other); }
.express-bus-grade[data-night="true"] { box-shadow: inset 4px 0 0 #312e81; padding-left: 0.75em; }
.express-bus-grade-dot {
  width: 0.65em;
  height: 0.65em;
  border-radius: 999px;
  background: var(--eb-standard);
}
.express-bus-grade-dot[data-grade="premium"] { background: var(--eb-premium); }
.express-bus-grade-dot[data-grade="deluxe"] { background: var(--eb-deluxe); }
.express-bus-grade-dot[data-grade="other"] { background: var(--eb-other); }
.express-bus-inline-state { display: none; }
/* 좁은 화면 - 소요 열을 숨기고(요약 줄의 "보통 몇 시간" 이 대신한다) 칸 여백을 줄여 표가 판 안에 들게 한다. 상태(출발함·N분 뒤)는 마지막
   열 대신 출발 시각 아래에 둔다. */
@media (max-width: 559px) {
  .express-bus-col-duration { display: none; }
  .express-bus-state .express-bus-departed,
  .express-bus-state .express-bus-next { display: none; }
  .express-bus-inline-state {
    display: block;
    margin: 0.1em 0 0;
    font-family: inherit;
    font-size: 0.8em;
    letter-spacing: 0;
    text-shadow: none;
    white-space: nowrap;
  }
  .express-bus-table th,
  .express-bus-table td { padding-left: 0.4em; padding-right: 0.4em; }
  .express-bus-table-wrap { padding-left: 0.2em; padding-right: 0.2em; }
}
.express-bus-booking {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin: 0.4em 1.1em 0;
  padding: 0.8em 0.9em;
  border: 1px dashed #3a4652;
  border-radius: 0.7em;
  color: #e5e7eb;
  font-size: 0.8em;
  line-height: 1.55;
}
.express-bus-booking-title { color: #fff; font-weight: 800; }
.express-bus-booking-link {
  align-self: flex-start;
  display: inline-flex;
  min-height: 2.4em;
  align-items: center;
  padding: 0.25em 0.9em;
  border-radius: 0.5em;
  background: var(--eb-led);
  color: #1a1205;
  font-weight: 900;
  text-decoration: none;
}
.express-bus-booking-link:hover { background: #ffc85a; }
.express-bus-booking-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.express-bus-source {
  padding: 0.8em 1.1em 1em;
  color: #aeb5bf;
  font-size: 0.72em;
  line-height: 1.55;
}

/* ── 지금 달리는 버스(사이트 테마를 따른다) ── */
.express-bus-live {
  padding: 1em 1.1em;
  border: 1px solid #d1e7dd;
  border-radius: 1rem;
  background: #f4fbf7;
}
.dark .express-bus-live { border-color: #1f3b30; background: #0f1d17; }
.express-bus-live-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: #0b3d2c;
  font-size: 0.95em;
  font-weight: 900;
}
.dark .express-bus-live-title { color: #d1fae5; }
.express-bus-live-dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 0.25em rgb(22 163 74 / 0.2);
}
@media (prefers-reduced-motion: no-preference) {
  .express-bus-live-dot { animation: express-bus-pulse 1.8s ease-out 6; }
}
@keyframes express-bus-pulse {
  0% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0.45); }
  100% { box-shadow: 0 0 0 0.6em rgb(22 163 74 / 0); }
}
.express-bus-live-meta { color: #4b5563; font-size: 0.72em; }
.dark .express-bus-live-meta { color: #9ca3af; }
.express-bus-live-list { margin-top: 0.7em; display: flex; flex-direction: column; gap: 0.5em; }
.express-bus-live-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.7em;
  padding: 0.55em 0.7em;
  border-radius: 0.6em;
  background: #fff;
  box-shadow: 0 0 0 1px #e5efe9;
  font-size: 0.85em;
}
.dark .express-bus-live-row { background: #13241c; box-shadow: 0 0 0 1px #1f3b30; color: #e5e7eb; }
/* 도착한 줄은 흐리게 하지 않고 바탕만 바꾼다 - 투명도를 낮추면 글자 대비가 4.5:1 아래로 떨어졌다(검수 11-09). */
.express-bus-live-row[data-arrived="true"] { background: #f3f4f6; }
.dark .express-bus-live-row[data-arrived="true"] { background: #1a2620; }
.express-bus-live-main { display: inline-flex; gap: 0.5em; align-items: baseline; }
.express-bus-live-corp { color: #4b5563; font-size: 0.9em; }
.dark .express-bus-live-corp { color: #9ca3af; }
.express-bus-live-where { display: inline-flex; flex-wrap: wrap; gap: 0.2em 0.7em; margin-left: auto; color: #1f2937; }
.dark .express-bus-live-where { color: #e5e7eb; }
.express-bus-live-eta { font-weight: 800; color: #0b6b4c; }
.dark .express-bus-live-eta { color: #6ee7a8; }
.express-bus-live-arrived { font-weight: 800; color: #4b5563; }
.dark .express-bus-live-arrived { color: #9ca3af; }
.express-bus-live-note { margin-top: 0.6em; color: #4b5563; font-size: 0.72em; }
.dark .express-bus-live-note { color: #9ca3af; }

/* ── 창 둘(2026-11-09 사용자 요청) ── 시간표 보기 확인·조회 창과 통합예매 안내 창. 창의 모양은 Tailwind 클래스(파크 골프장·KTX 창과 같은 꼴)이고
   여기는 단계 전환(data-phase - 확인/조회 중), 확인 창의 노선·날짜 칸, 조회 중 장면, 연 직후 누르기 막기만 둔다. */
/* 조회가 끝나 결과로 내려갈 때 결과 머리(상태 줄, 결과 위 광고가 서 있으면 그 광고)가 사이트 머리 막대(붙박이, 약 4rem) 밑에 숨지 않게 띄운다. */
.express-bus-status, .express-bus-result-ad { scroll-margin-top: 5.5rem; }
.express-bus dialog[data-settling] > * { pointer-events: none; }
.express-bus-dialog[data-phase="confirm"] [data-phase-show="loading"],
.express-bus-dialog[data-phase="loading"] [data-phase-show="confirm"] { display: none; }
.express-bus-dialog-facts {
  display: grid;
  gap: 0.35em;
  margin: 0;
  padding: 0.75em 0.9em;
  border-radius: 0.75em;
  background: #f1f7f3;
}
.dark .express-bus-dialog-facts { background: #13241c; }
.express-bus-dialog-facts div { display: flex; gap: 0.75em; align-items: baseline; }
.express-bus-dialog-facts dt { flex: none; min-width: 3em; color: #4b5563; font-size: 0.875em; }
.dark .express-bus-dialog-facts dt { color: #9ca3af; }
.express-bus-dialog-facts dd { margin: 0; font-weight: 700; color: #08573e; word-break: keep-all; overflow-wrap: anywhere; }
.dark .express-bus-dialog-facts dd { color: #6ee7a8; }

/* 조회 중 장면 - 하늘·해(밤 화면은 달)·산·도로 위의 옆모습 버스(힉스필드 그림 express_bus/bus_side.webp). 버스는 제자리에서 들썩이고 달리는
   느낌은 배경이 만든다(도로 점선이 흐르고 산이 천천히 지나가고 바람 줄이 스친다). 움직임 줄이기면 멈춘 그림이다. 장식이라 aria-hidden. */
.express-bus-loading { padding: 0.9rem 1.25rem 0; }
.express-bus-loading-scene {
  position: relative;
  height: 9rem;
  overflow: hidden;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #bfe1fb 0%, #e7f4fe 62%);
}
.dark .express-bus-loading-scene { background: linear-gradient(180deg, #0c1a33 0%, #1d3157 70%); }
.express-bus-loading-sun {
  position: absolute;
  top: 0.9rem;
  right: 1.4rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #ffd66b;
  box-shadow: 0 0 0 0.45rem rgba(255, 214, 107, 0.25);
}
.dark .express-bus-loading-sun { background: #e8ecf5; box-shadow: 0 0 0 0.45rem rgba(232, 236, 245, 0.12); }
.express-bus-loading-hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.6rem;
  height: 3.2rem;
  background:
    radial-gradient(ellipse 5rem 2.6rem at 2rem 100%, #7fbf6b 98%, transparent 100%),
    radial-gradient(ellipse 6rem 3.1rem at 9rem 100%, #6aa857 98%, transparent 100%),
    radial-gradient(ellipse 4.5rem 2.2rem at 15rem 100%, #7fbf6b 98%, transparent 100%);
  background-size: 18rem 100%;
  background-repeat: repeat-x;
}
.dark .express-bus-loading-hills { filter: brightness(0.55) saturate(0.8); }
.express-bus-loading-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.75rem;
  border-top: 0.25rem solid #9aa3ad;
  background: var(--eb-road);
}
.express-bus-loading-road::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.22rem;
  margin-top: -0.11rem;
  background: repeating-linear-gradient(90deg, #ffd447 0 1.6rem, transparent 1.6rem 3.2rem);
}
.express-bus-loading-wind {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.6rem;
  height: 2.2rem;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) 0 0.3rem / 3rem 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) 1.5rem 1.2rem / 4rem 2px no-repeat;
}
.express-bus-loading-bus {
  position: absolute;
  left: 50%;
  bottom: 1.05rem;
  width: min(14rem, 70%);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0.35rem 0.25rem rgba(0, 0, 0, 0.28));
}
.express-bus-loading-sub { margin-top: 0.55rem; text-align: center; font-size: 0.8em; color: #4b5563; }
.dark .express-bus-loading-sub { color: #9ca3af; }
.express-bus-loading-status { padding: 0.35rem 1.25rem 1.25rem; text-align: center; font-size: 0.9375em; font-weight: 700; color: #08573e; }
.express-bus-loading-status:empty { padding: 0; }
.dark .express-bus-loading-status { color: #6ee7a8; }
@media (prefers-reduced-motion: no-preference) {
  .express-bus-dialog[data-phase="loading"] .express-bus-loading-road::after { animation: express-bus-road 0.32s linear infinite; }
  .express-bus-dialog[data-phase="loading"] .express-bus-loading-hills { animation: express-bus-hills 6s linear infinite; }
  .express-bus-dialog[data-phase="loading"] .express-bus-loading-wind { animation: express-bus-wind 0.9s linear infinite; }
  .express-bus-dialog[data-phase="loading"] .express-bus-loading-bus {
    animation: express-bus-enter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both, express-bus-bob 0.36s ease-in-out 0.6s infinite alternate;
  }
}
@keyframes express-bus-road { to { background-position-x: -3.2rem; } }
@keyframes express-bus-hills { to { background-position-x: -18rem; } }
@keyframes express-bus-enter { from { transform: translateX(-170%); } to { transform: translateX(-50%); } }
@keyframes express-bus-bob { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-0.12rem); } }
@keyframes express-bus-wind {
  0% { opacity: 0; background-position: 110% 0.3rem, 125% 1.2rem; }
  30% { opacity: 1; }
  100% { opacity: 0; background-position: -20% 0.3rem, -35% 1.2rem; }
}

/* 강제 색 모드 - 고른 날짜 칩·눌린 등급 칩이 바탕색으로만 구분되지 않게 테를 두른다. */
@media (forced-colors: active) {
  /* 잠긴 칸 규칙(:disabled)이 그린 화살표를 다시 깔지 않게 함께 적는다 - 기본 화살표와 두 개가 겹쳤다(검수 11-09). */
  .express-bus-select,
  .express-bus-select:disabled { appearance: auto; -webkit-appearance: auto; background-image: none; padding-right: 0.6em; border: 1px solid ButtonText; }
  /* 테 없는 칩·날짜 칸·버튼은 바탕이 사라지면 글자만 남는다 - 테를 돌려준다(KTX 와 같다). */
  .express-bus-day span,
  .express-bus-popular-chip,
  .express-bus-swap,
  .express-bus-submit { border: 1px solid ButtonText; }
  .express-bus-day input:checked + span,
  .express-bus-chip[aria-pressed="true"] { outline: 3px solid CanvasText; outline-offset: 1px; }
  .express-bus-row[aria-current="true"] td:first-child { outline: 3px solid Highlight; outline-offset: -3px; }
}