/* 사이트 기능 "KTX 열차 시간표 - KTX 열차 시간 찾기"(/site/ktx, 2026-11-08) 전용 스타일. 이 페이지에서만 싣는다
   (site_features/_ktx 파셜이 head 에 dynamic 추적 스타일시트로 건다 - 파크 골프장·운세와 같은 방식).

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

   무대와 찾기 막대는 **테마와 무관하게** 노선도(하늘·바다·남한 판)와 짙은 남색 막대다. 노선도의 하늘은 사이트 테마가 아니라 **서울 시각**을
   따른다(2026-11-09 - 밤이면 어둡고 선로·역·도시가 빛난다, lib/ktx/stage). 포스터는 낮 그림이다. 시간표는 역의 출발 안내 전광판처럼 **늘 어둡다**
   (호박색 시각 글자) - 사이트 테마를 따르지 않는다. 안내 글 칸만 사이트 테마를 따른다.

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

.ktx {
  --kx-sky: #cfe9fb;
  --kx-sea: #7cc6ea;
  --kx-navy: #142a52;
  --kx-navy-deep: #0d1d3d;
  --kx-blue: #2f6fde;
  --kx-red: #e5483b;
  --kx-yellow: #ffd23f;
  --kx-board: #0b1220;
  --kx-board-line: #1d2a44;
  --kx-led: #ffc845;
  --kx-led-dim: #c9d4e8;
  font-size: calc(1rem * var(--silver-scale, 1));
}

/* ── 무대 카드 ── */
.ktx-card {
  border-radius: 1.25rem;
  background: var(--kx-navy);
  box-shadow: 0 0 0 1px rgb(20 42 82 / 0.35), 0 18px 40px -18px rgb(15 23 42 / 0.5);
}

/* 무대 높이는 폭에 맞춘 최소 높이다(받침 ::before). 장면은 캔버스가 absolute 로 덮는다. 포스터(배경 그림)가 먼저 보이고 3D 가 준비되면 그 위로
   떠오른다. WebGL 이 없거나(data-gl=none) 받지 못하면 포스터만 남는다. 포스터가 없을 때의 바탕은 하늘에서 바다로 가는 띠다. */
.ktx-stage {
  position: relative;
  overflow: hidden;
  min-height: 16rem;
  background-color: var(--kx-sky);
  background-image: linear-gradient(180deg, var(--kx-sky) 0%, #a9dbf3 40%, var(--kx-sea) 100%);
  background-size: cover;
  background-position: center 55%;
  isolation: isolate;
  touch-action: none;
}
.ktx-stage::before {
  content: "";
  display: block;
  padding-top: 72%;
}
@media (min-width: 1024px) {
  .ktx-stage::before { padding-top: min(72%, calc(52vh - 4rem)); }
  .ktx-stage { min-height: 18rem; }
}
/* 좁은 화면(폰)은 무대를 세로로 길게 둔다 - 남한이 세로로 긴 모양이라 가로로 납작한 무대에서는 판이 작아지고 북쪽 끝(서울의 출발 핀)이
   제목 밑에 깔렸다(390px 실측). 제목도 한 단계 줄인다. */
@media (max-width: 639px) {
  .ktx-stage::before { padding-top: 112%; }
  .ktx-title { font-size: 1.15em; }
}
/* 손가락 화면에서는 한 손가락 끌기를 페이지 스크롤로 넘긴다(두 손가락은 돌리기) - 조상이 none 이면 캔버스의 pan-y 가 먹지 않는다
   (touch-action 은 조상과 교집합이다 - 오피스·파크 골프장과 같은 함정). */
@media (any-pointer: coarse) {
  .ktx-stage { touch-action: pan-y; }
}
.ktx-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.ktx-stage[data-gl="gpu"] canvas,
.ktx-stage[data-gl="software"] canvas { opacity: 1; }
.ktx-labels {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ktx-station-label {
  pointer-events: none;
  padding: 0.12em 0.45em;
  border-radius: 0.45em;
  background: rgb(255 255 255 / 0.9);
  color: var(--kx-navy-deep);
  font-size: 0.66em;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 3px 8px -4px rgb(15 23 42 / 0.55);
}
.ktx-station-label-major { font-size: 0.72em; font-weight: 800; }
.ktx-station-label-hover { background: var(--kx-navy); color: #fff; }
.ktx-pin-label {
  pointer-events: none;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  color: #fff;
  font-size: 0.74em;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgb(15 23 42 / 0.7);
}
.ktx-pin-label-dep { background: #1f5fbf; }
.ktx-pin-label-arr { background: #c0392b; }

.ktx-stage-head {
  position: absolute;
  top: 0.9em;
  left: 0.9em;
  right: 0.9em;
  z-index: 2;
  pointer-events: none;
}
.ktx-eyebrow {
  display: inline-block;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.88);
  color: var(--kx-navy);
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.14em;
}
/* 제목은 반투명 흰 판 위에 둔다 - 무대가 밤·노을로 바뀌어도 대비가 남는다(2026-11-09 밤 화면 - 고속버스 시간표 검수에서 글자 그림자만으로는 밤
   하늘에서 1.1:1 이었다). */
.ktx-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(--kx-navy-deep);
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.2;
  word-break: keep-all;
}
.ktx-legend {
  position: absolute;
  left: 0.9em;
  bottom: 0.8em;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.ktx-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.55em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.88);
  color: var(--kx-navy-deep);
  font-size: 0.68em;
  font-weight: 700;
}
.ktx-legend-dep,
.ktx-legend-arr {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.ktx-legend-dep { background: var(--kx-blue); }
.ktx-legend-arr { background: var(--kx-red); }
.ktx-bubble {
  position: absolute;
  right: 0.9em;
  bottom: 0.8em;
  z-index: 2;
  max-width: 60%;
  padding: 0.35em 0.75em;
  border-radius: 0.8em;
  background: rgb(13 29 61 / 0.86);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  pointer-events: none;
}
/* 좁은 무대(폰)에서는 무대 위 말풍선을 쓰지 않는다 - 범례와 겹친다. 같은 글은 상태 줄이 보이고 읽어 준다. */
@media (max-width: 479px) {
  .ktx-bubble { display: none !important; }
}

/* ── 찾기 막대 ── 무늬 없는 남색 판이다. 막대 전체의 침목 세로 줄무늬, 그다음의 위 가장자리 선로 띠 모두 복잡해 보였다(2026-11-09 사용자 검토) -
   테 두른 칸을 줄이고(날짜는 한 묶음, 구간 칩은 테 없이) 강조색은 주 버튼(노랑) 하나로 둔다. */
.ktx-bar {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.1em 1em 1.1em;
  background: linear-gradient(180deg, var(--kx-navy) 0%, var(--kx-navy-deep) 100%);
  color: #fff;
}
.ktx-tagline {
  font-size: 0.85em;
  line-height: 1.5;
  color: #e3ecfb;
  word-break: keep-all;
}
/* 폼이 컨테이너다 - 좁은 막대에서 역 칸을 위아래로 쌓고(나란히 두면 "출발지를 고르세요" 가 잘렸다 - 390px), 넓으면 날짜와 [시간 찾기]를 한 줄에
   둔다(아래 @container). 화면 폭이 아니라 막대 폭으로 가른다 - 넓은 화면의 좁은 왼쪽 칸도 같다. */
.ktx-form {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  container-type: inline-size;
}
.ktx-stations {
  display: flex;
  align-items: flex-end;
  gap: 0.5em;
}
.ktx-field {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.3em;
}
.ktx-label {
  font-size: 0.75em;
  font-weight: 700;
  color: #dbe6fb;
}
/* 출발·도착 표시 점 - 노선도의 출발(파랑)·도착(빨강) 핀과 같은 색(테 없이 작게). */
.ktx-label-dep::before,
.ktx-label-arr::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.4em;
  border-radius: 50%;
  vertical-align: 0.02em;
}
.ktx-label-dep::before { background: #6b9cf0; }
.ktx-label-arr::before { background: #f07a6e; }
.ktx-weekday { margin-left: 0.45em; color: #aebfe0; font-weight: 600; }
.ktx-weekday:empty { display: none; }
.ktx-select,
.ktx-date {
  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;
}
/* 고르기 칸 - 브라우저 기본 화살표 대신 굵은 화살표(2026-11-09 찾기 막대 정돈). 강제 색 모드는 기본 모양으로 둔다. */
.ktx-select {
  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;
}
.ktx-swap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.25s ease;
}
.ktx-swap svg { width: 1.3em; height: 1.3em; }
.ktx-swap:hover { background: rgb(255 255 255 / 0.24); }
.ktx-swap:active { transform: rotate(180deg); }
.ktx-when {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
/* 넓은 막대 - 날짜(칩 + 달력 칸)와 [시간 찾기]를 한 줄에. 달력 칸은 날짜가 들어갈 만큼만 두고 남는 폭은 주 버튼이 갖는다(달력 칸이 가장 넓고 버튼이
   작았다 - 2026-11-09 사용자 검토). */
@container (min-width: 33em) {
  .ktx-when { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.6em 0.75em; }
  .ktx-when .ktx-field-date { flex: 0 1 auto; }
  .ktx-when .ktx-days { flex-wrap: nowrap; }
  .ktx-when .ktx-days .ktx-date { flex: 0 0 10.5em; }
  /* 한 줄에 들지 않으면(긴 언어의 칩) 버튼이 다음 줄 전체 폭이 된다 - 고속버스 막대와 같은 짜임. */
  .ktx-when .ktx-search { flex: 1 1 8em; }
}
/* 좁은 막대 - 역 칸을 위아래로 쌓고 바꾸기 버튼은 두 칸 사이 오른쪽에 세로 화살표로. */
@container (max-width: 32em) {
  .ktx-stations { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5em; row-gap: 0.6em; align-items: end; }
  .ktx-stations > .ktx-field:first-child { grid-column: 1; grid-row: 1; }
  .ktx-stations > .ktx-field:last-child { grid-column: 1; grid-row: 2; }
  .ktx-stations > .ktx-swap { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .ktx-stations > .ktx-swap svg { transform: rotate(90deg); }
  .ktx-day { padding-inline: 0.6em; }
}
.ktx-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
/* 날짜 칩 셋은 한 묶음(세그먼트) - 옅은 판 안에서 고른 칸만 흰색이다. 칩마다 테를 두르면 막대가 복잡해 보였다(2026-11-09 사용자 검토). 판은 달력
   칸과 같은 높이로 늘어난다(.ktx-days 의 stretch). */
/* 좁은 막대에서는 막대 폭까지만 - 줄어들지 못하면 긴 언어·큰글씨에서 묶음이 카드 밖으로 잘렸다(검수 11-09: es 390px 큰글씨 59px). 버튼은
   줄어들며 글자가 두 줄이 된다("Pasado / mañana"). */
.ktx-seg {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  gap: 0.15em;
  padding: 0.2em;
  border-radius: 0.8em;
  background: rgb(255 255 255 / 0.1);
}
.ktx-day {
  min-width: 0;
  min-height: 2.4em;
  padding: 0.35em 0.9em;
  line-height: 1.2;
  border: 0;
  border-radius: 0.6em;
  background: transparent;
  color: #dbe6fb;
  font-size: 0.85em;
  font-weight: 700;
  cursor: pointer;
}
.ktx-day:hover { color: #fff; background: rgb(255 255 255 / 0.1); }
.ktx-day[aria-pressed="true"] { background: #fff; color: var(--kx-navy-deep); font-weight: 800; }
.ktx-days .ktx-date { flex: 1 1 9em; width: auto; }
.ktx-search {
  flex: 0 0 auto;
  min-height: 2.75em;
  padding: 0.5em 1.3em;
  border-radius: 0.7em;
  background: var(--kx-yellow);
  color: var(--kx-navy-deep);
  font-size: 0.95em;
  font-weight: 800;
  box-shadow: 0 3px 0 #c99a00;
  cursor: pointer;
  white-space: nowrap;
}
.ktx-search:hover { background: #ffdc66; }
.ktx-search:active { transform: translateY(2px); box-shadow: 0 1px 0 #c99a00; }
.ktx-search[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.ktx-select:focus-visible,
.ktx-date:focus-visible,
.ktx-swap:focus-visible,
.ktx-day:focus-visible,
.ktx-search:focus-visible,
.ktx-chip:focus-visible { outline: 3px solid var(--kx-yellow); outline-offset: 2px; }
.ktx-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
}
.ktx-popular-label {
  margin-right: 0.2em;
  font-size: 0.72em;
  font-weight: 700;
  color: #c7d6f2;
}
/* 구간 칩 - 테 없이 옅은 바탕(일곱 개가 모두 테를 두르면 막대에서 가장 시끄러웠다 - 2026-11-09 사용자 검토). */
.ktx-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;
}
.ktx-chip:hover { background: rgb(255 255 255 / 0.2); color: #fff; }
.ktx-note {
  font-size: 0.72em;
  line-height: 1.5;
  color: #dbe6fb;
}

/* 예매 안내 창을 연 직후 잠깐은 창 안이 누르기를 받지 않는다(ktx_finder #openDialog 가 data-settling 을 400ms 단다 - 파크 골프장과 같다). */
.ktx dialog[data-settling] > * { pointer-events: none; }

/* ── 상태 줄 ── 비어 있어도 숨기지 않는다(처음 생긴 안내가 읽히게 - 파크 골프장 검수). */
.ktx-status {
  font-size: 0.85em;
  color: #374151;
  word-break: keep-all;
}
.ktx-status[data-tone="error"] { color: #b42318; font-weight: 600; }
.dark .ktx-status { color: #d1d5db; }
.dark .ktx-status[data-tone="error"] { color: #fca5a5; }

/* ── 시간표 전광판 ── 늘 어둡다. 시각은 호박색 고정폭 숫자. 줄 배치는 화면 폭이 아니라 전광판 폭으로 나눈다(container) - 1024px 화면은
   패널이 절반이라 전광판이 460px 남짓인데 화면 폭 기준 넓은 배치가 서서 [예매]가 잘렸다(2026-11-08 검수). 큰글씨도 em 이라 함께 따라간다. */
.ktx-board {
  container: ktx-board / inline-size;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--kx-board);
  color: #e5ecf8;
  box-shadow: 0 0 0 1px var(--kx-board-line), 0 18px 36px -22px rgb(2 6 23 / 0.8);
}
.ktx-board-head {
  padding: 0.9em 1em 0.6em;
  border-bottom: 1px solid var(--kx-board-line);
}
.ktx-board-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.6em;
  color: var(--kx-led);
  font-size: 1em;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.ktx-board-route {
  color: #fff;
  font-size: 0.9em;
  font-weight: 700;
}
.ktx-board-summary {
  margin-top: 0.3em;
  color: var(--kx-led-dim);
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
}
.ktx-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em 1em;
  padding: 0.6em 1em;
  border-bottom: 1px solid var(--kx-board-line);
}
.ktx-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
}
.ktx-slot {
  padding: 0.25em 0.7em;
  border-radius: 999px;
  border: 1px solid #33425f;
  color: #c9d4e8;
  font-size: 0.75em;
  font-weight: 700;
  cursor: pointer;
}
.ktx-slot[aria-pressed="true"] { border-color: var(--kx-led); background: var(--kx-led); color: #1a1406; }
.ktx-slot[hidden] { display: none; }
.ktx-slot:focus-visible,
.ktx-more:focus-visible,
.ktx-book:focus-visible,
.ktx-others input:focus-visible { outline: 3px solid var(--kx-yellow); outline-offset: 2px; }
.ktx-others {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #c9d4e8;
  font-size: 0.75em;
  font-weight: 600;
  cursor: pointer;
}
.ktx-others input { width: 1.05em; height: 1.05em; accent-color: var(--kx-led); }

/* 한 줄 - 넓으면 여섯 칸(출발·도착·걸리는 시간·열차·운임·예매), 좁으면 두 줄(시각 둘 + 걸리는 시간 / 열차·운임·예매). 운임 칸은 2026-11-09 아침에
   뺐다가(공공데이터 운임이 9월 인하 전 금액) 같은 날 저녁 TAGO 가 인하 운임으로 고친 것을 세 구간에서 확인하고 되살렸다. */
.ktx-row {
  display: grid;
  grid-template-columns: 4.2em 4.2em minmax(5.5em, 1fr) minmax(7em, 1.4fr) 6.6em 3.6em;
  align-items: center;
  gap: 0.35em 0.6em;
  padding: 0.55em 1em;
  border-bottom: 1px solid var(--kx-board-line);
  font-size: 0.9em;
}
/* 머리 줄은 글자만 줄인다 - 줄(그리드) 자체를 줄이면 em 으로 잰 열 폭·틈이 함께 줄어 칸이 값과 어긋났다(2026-11-08 검수). */
.ktx-row-head {
  padding-top: 0.45em;
  padding-bottom: 0.45em;
  color: #8fa0bd;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ktx-row-head > * { font-size: 0.78em; }
.ktx-rows { margin: 0; padding: 0; list-style: none; }
.ktx-rows .ktx-row:last-child { border-bottom: 0; }
.ktx-row[data-next] { background: rgb(255 200 69 / 0.08); box-shadow: inset 3px 0 0 var(--kx-led); }
.ktx-row[data-other] .ktx-time { color: #e7edf7; }
.ktx-time {
  color: var(--kx-led);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.12em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.ktx-time-arr { color: #ffe08a; }
.ktx-duration { color: var(--kx-led-dim); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.ktx-train {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em 0.45em;
  min-width: 0;
}
.ktx-grade {
  padding: 0.12em 0.5em;
  border-radius: 0.4em;
  background: #1f5fbf;
  color: #fff;
  font-size: 0.78em;
  font-weight: 800;
  white-space: nowrap;
}
.ktx-grade[data-kind="sancheon"] { background: #0f766e; }
.ktx-grade[data-kind="eum"] { background: #0369a1; }
.ktx-grade[data-kind="cheongryong"] { background: #4338ca; }
.ktx-grade[data-kind="other"] { background: #4b5563; }
.ktx-train-no { color: #dbe4f3; font-size: 0.85em; font-variant-numeric: tabular-nums; }
.ktx-next {
  padding: 0.08em 0.45em;
  border-radius: 999px;
  background: var(--kx-led);
  color: #1a1406;
  font-size: 0.7em;
  font-weight: 800;
}
.ktx-next[hidden] { display: none; }
.ktx-fare { color: #f1f5fb; font-size: 0.88em; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ktx-row-head .ktx-col-fare { text-align: right; }
.ktx-book {
  justify-self: end;
  padding: 0.25em 0.65em;
  border-radius: 0.5em;
  border: 1px solid #4b5d80;
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.ktx-book:hover { border-color: var(--kx-led); color: var(--kx-led); }
/* 넓은 배치의 한 줄은 열 31.1em + 틈 3em + 여백 2em(줄 글자 0.9em) - 전광판 글자로 약 32.5em 이다. 그보다 좁으면 두 줄로. */
@container ktx-board (max-width: 34em) {
  .ktx-row {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "dep arr time time" "train train fare book";
  }
  .ktx-row > [data-dep] { grid-area: dep; }
  .ktx-row > [data-arr] { grid-area: arr; }
  .ktx-row > .ktx-duration { grid-area: time; text-align: right; }
  .ktx-row > .ktx-train { grid-area: train; }
  .ktx-row > .ktx-fare { grid-area: fare; }
  .ktx-row > .ktx-book { grid-area: book; }
  .ktx-row-head { display: none; }
}
/* 컨테이너 질의가 없는 옛 브라우저(iOS 15 등)는 예전처럼 화면 폭으로 나눈다. */
@supports not (container-type: inline-size) {
  @media (max-width: 639px) {
    .ktx-row {
      grid-template-columns: auto auto 1fr auto;
      grid-template-areas: "dep arr time time" "train train fare book";
    }
    .ktx-row > [data-dep] { grid-area: dep; }
    .ktx-row > [data-arr] { grid-area: arr; }
    .ktx-row > .ktx-duration { grid-area: time; text-align: right; }
    .ktx-row > .ktx-train { grid-area: train; }
    .ktx-row > .ktx-fare { grid-area: fare; }
    .ktx-row > .ktx-book { grid-area: book; }
    .ktx-row-head { display: none; }
  }
}
.ktx-board-foot { padding: 0.7em 1em 0.9em; border-top: 1px solid var(--kx-board-line); }
.ktx-more {
  width: 100%;
  margin-bottom: 0.6em;
  padding: 0.45em 0.8em;
  border-radius: 0.6em;
  border: 1px solid #33425f;
  color: #e5ecf8;
  font-size: 0.78em;
  font-weight: 700;
  cursor: pointer;
}
.ktx-more:hover { border-color: var(--kx-led); }
.ktx-more[hidden] { display: none; }
.ktx-source {
  margin-top: 0.3em;
  color: #9fb0cc;
  font-size: 0.7em;
  line-height: 1.55;
  word-break: keep-all;
}

/* ── 이 구간 안내 글 ── 사이트 테마를 따른다. */
.ktx-articles {
  padding: 0.9em 1em;
  border-radius: 1rem;
  border: 1px solid rgb(20 42 82 / 0.18);
  background: #f8fafe;
}
.dark .ktx-articles {
  border-color: rgb(147 197 253 / 0.14);
  background: rgb(17 24 39 / 0.9);
}
.ktx-article-link {
  color: #1f4fa3;
  font-size: 0.875em;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dark .ktx-article-link { color: #93c5fd; }

/* ── 도착역 잠금·결과로 내려가기(2026-11-09) ── 도착역 칸은 출발역을 고르기 전에 잠긴다(흐린 바탕). 조회가 끝나 결과로 내려갈 때 상태 줄이 사이트
   머리 막대(붙박이, 약 4rem) 밑에 숨지 않게 띄운다. */
.ktx-select:disabled { background-color: #e3e9f4; color: #4b5563; cursor: not-allowed; }
/* 결과 위 광고가 서 있으면 결과 머리는 광고다(ktx_finder #revealResults). */
.ktx-status, .ktx-result-ad { scroll-margin-top: 5.5rem; }

/* ── 시간 찾기 확인·조회 창(2026-11-09 사용자 요청) ── 창의 모양은 Tailwind 클래스(예매 안내 창과 같은 꼴)이고 여기는 단계 전환(data-phase - 확인/조회 중),
   구간·날짜 칸, 조회 중 장면만 둔다(고속버스 시간표 창과 같은 짜임). */
.ktx-dialog[data-phase="confirm"] [data-phase-show="loading"],
.ktx-dialog[data-phase="loading"] [data-phase-show="confirm"] { display: none; }
.ktx-dialog-facts {
  display: grid;
  gap: 0.35em;
  margin: 0;
  padding: 0.75em 0.9em;
  border-radius: 0.75em;
  background: #eef3fc;
}
.dark .ktx-dialog-facts { background: #14213b; }
.ktx-dialog-facts div { display: flex; gap: 0.75em; align-items: baseline; }
.ktx-dialog-facts dt { flex: none; min-width: 3em; color: #4b5563; font-size: 0.875em; }
.dark .ktx-dialog-facts dt { color: #9ca3af; }
.ktx-dialog-facts dd { margin: 0; font-weight: 700; color: var(--kx-navy); word-break: keep-all; overflow-wrap: anywhere; }
.dark .ktx-dialog-facts dd { color: #93c5fd; }

/* 조회 중 장면 - 하늘·해(밤 화면은 달)·산·철길 위의 옆모습 고속열차 두 량(힉스필드 그림 ktx/train_side.webp). 열차는 들어와서 가볍게 떨리고, 달리는
   느낌은 배경이 만든다(산이 지나가고 침목이 흐르고 바람 줄이 스친다). 움직임 줄이기면 멈춘 그림이다. 장식이라 aria-hidden. */
.ktx-loading { padding: 0.9rem 1.25rem 0; }
.ktx-loading-scene {
  position: relative;
  height: 9rem;
  overflow: hidden;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #bfe1fb 0%, #e9f5fe 62%);
}
.dark .ktx-loading-scene { background: linear-gradient(180deg, #0c1a33 0%, #1d3157 70%); }
.ktx-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 .ktx-loading-sun { background: #e8ecf5; box-shadow: 0 0 0 0.45rem rgba(232, 236, 245, 0.12); }
.ktx-loading-hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.2rem;
  height: 3.4rem;
  background:
    radial-gradient(ellipse 5rem 2.6rem at 2rem 100%, #86c26f 98%, transparent 100%),
    radial-gradient(ellipse 6rem 3.2rem at 9rem 100%, #6aa857 98%, transparent 100%),
    radial-gradient(ellipse 4.5rem 2.3rem at 15rem 100%, #86c26f 98%, transparent 100%);
  background-size: 18rem 100%;
  background-repeat: repeat-x;
}
.dark .ktx-loading-hills { filter: brightness(0.55) saturate(0.8); }
/* 철길 - 자갈 바닥 위 레일 한 줄(옆에서 본 모습)과 그 아래로 보이는 침목 끝. */
.ktx-loading-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.3rem;
  background: linear-gradient(180deg, #9aa1ab 0%, #7b828d 100%);
}
.ktx-loading-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.2rem;
  height: 0.45rem;
  background: repeating-linear-gradient(90deg, #5b4636 0 0.9rem, transparent 0.9rem 1.8rem);
}
.ktx-loading-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.22rem;
  background: linear-gradient(180deg, #e5e9ee, #aab2bd);
}
.ktx-loading-wind {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.4rem;
  height: 2.2rem;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) 0 0.3rem / 3.5rem 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) 1.5rem 1.3rem / 4.5rem 2px no-repeat;
}
.ktx-loading-train {
  position: absolute;
  left: 50%;
  bottom: 2.05rem;
  width: min(19rem, 88%);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0.3rem 0.2rem rgba(0, 0, 0, 0.25));
}
.ktx-loading-sub { margin-top: 0.55rem; text-align: center; font-size: 0.8em; color: #4b5563; }
.dark .ktx-loading-sub { color: #9ca3af; }
.ktx-loading-status { padding: 0.35rem 1.25rem 1.25rem; text-align: center; font-size: 0.9375em; font-weight: 700; color: var(--kx-navy); }
.ktx-loading-status:empty { padding: 0; }
.dark .ktx-loading-status { color: #93c5fd; }
@media (prefers-reduced-motion: no-preference) {
  .ktx-dialog[data-phase="loading"] .ktx-loading-track::before { animation: ktx-sleepers 0.22s linear infinite; }
  .ktx-dialog[data-phase="loading"] .ktx-loading-hills { animation: ktx-hills 4s linear infinite; }
  .ktx-dialog[data-phase="loading"] .ktx-loading-wind { animation: ktx-wind 0.7s linear infinite; }
  .ktx-dialog[data-phase="loading"] .ktx-loading-train {
    animation: ktx-enter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, ktx-sway 0.16s ease-in-out 0.7s infinite alternate;
  }
}
@keyframes ktx-sleepers { to { background-position-x: -1.8rem; } }
@keyframes ktx-hills { to { background-position-x: -18rem; } }
@keyframes ktx-enter { from { transform: translateX(-160%); } to { transform: translateX(-50%); } }
@keyframes ktx-sway { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-0.06rem); } }
@keyframes ktx-wind {
  0% { opacity: 0; background-position: 110% 0.3rem, 125% 1.3rem; }
  30% { opacity: 1; }
  100% { opacity: 0; background-position: -20% 0.3rem, -35% 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ktx-stage canvas { transition: none; }
  .ktx-swap { transition: none; }
  .ktx-swap:active { transform: none; }
}

/* 큰글씨 3단에서는 무대 머리 글자가 장면을 덮지 않게 줄인다. */
html.silver[data-silver-scale="3"] .ktx-title { font-size: 1.15em; }

/* 강제 색 모드 - 고르기 칸은 기본 모양(그린 화살표가 바탕색에 묻히지 않게), 눌린 날짜 칩은 테로 구분한다. */
@media (forced-colors: active) {
  .ktx-select { appearance: auto; -webkit-appearance: auto; background-image: none; padding-right: 0.7em; }
  .ktx-day[aria-pressed="true"] { outline: 3px solid CanvasText; outline-offset: 1px; }
  /* 테 없는 칸·칩·버튼은 강제 색 모드에서 바탕이 사라지면 글자만 남는다 - 테를 돌려준다. */
  .ktx-select,
  .ktx-date,
  .ktx-swap,
  .ktx-search,
  .ktx-day,
  .ktx-chip { border: 1px solid ButtonText; }
}