/* 노선별 역 순서 페이지 (/line) */

.line-page { max-width: 860px; padding-bottom: var(--s9); }

/* style.css의 전역 section { padding: 96px 0 } 을 이 페이지에서는 쓰지 않는다 */
.line-page section, section.line-index { padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 브레드크럼 ────────────────────────────── */
.line-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s5) 0 var(--s4);
  font-size: var(--fs-small); color: var(--ink-3);
}
.line-crumb a { color: var(--ink-2); font-weight: 600; }
.line-crumb a:hover { color: var(--navy); }
.line-crumb strong { color: var(--navy); font-weight: 700; }

/* ── 헤더 ──────────────────────────────────── */
.line-head { display: flex; gap: var(--s4); align-items: flex-start; }
.line-head h1 { font-size: var(--fs-h2); line-height: 1.25; margin-bottom: var(--s3); }
.line-lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.65; }

.line-badge {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 52px; padding: 0 var(--s3);
  border-radius: var(--r-pill);
  background: var(--line-c, var(--navy)); color: #fff;
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  box-shadow: var(--sh-1);
}
.line-badge--sm { min-width: 38px; height: 38px; font-size: 14px; }

/* ── 요약 지표 ─────────────────────────────── */
.line-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3);
  margin: var(--s6) 0 var(--s5);
}
.line-facts > div {
  background: var(--surface); border-radius: var(--r-m);
  padding: var(--s4); box-shadow: var(--sh-1); text-align: center;
}
.line-facts dt {
  font-size: var(--fs-tiny); color: var(--ink-3);
  font-weight: 600; margin-bottom: var(--s2);
}
.line-facts dd {
  font-size: 18px; font-weight: 800; color: var(--navy);
  overflow-wrap: anywhere;
}

.line-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s7); }

/* ── 역 목록 ───────────────────────────────── */
.line-stations h2,
.line-siblings h2,
.line-cities h2 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.line-stations-sub { color: var(--ink-2); font-size: var(--fs-small); margin-bottom: var(--s5); }

.station-list {
  list-style: none; margin: 0 0 var(--s8); padding: var(--s2) 0;
  background: var(--surface); border-radius: var(--r-m); box-shadow: var(--sh-1);
  counter-reset: station;
}
.station-list li {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.station-list li:last-child { border-bottom: 0; }

/* 역과 역을 잇는 노선 색 레일 */
.station-list li::before {
  content: ''; position: absolute; left: calc(var(--s5) + 13px); top: 0; bottom: 0;
  width: 4px; background: var(--line-c, var(--navy)); opacity: .28;
}
.station-list li:first-child::before { top: 50%; }
.station-list li:last-child::before { bottom: 50%; }

.st-no {
  flex: none; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-3);
  box-shadow: inset 0 0 0 3px var(--line-c, var(--navy));
  font-size: var(--fs-tiny); font-weight: 700;
}
.st-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.st-name b { font-size: var(--fs-body); font-weight: 700; color: var(--navy); }
.st-name small { font-size: var(--fs-tiny); color: var(--ink-3); }

.st-transfer { flex: none; display: flex; flex-wrap: wrap; gap: var(--s1); }
.st-line-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--chip-c, var(--navy)); color: #fff;
  font-size: 11.5px; font-weight: 800;
}
.st-line-chip:hover { filter: brightness(1.12); }
.station-list li.is-transfer .st-no { box-shadow: inset 0 0 0 3px var(--navy); color: var(--navy); }

/* ── 같은 도시의 다른 노선 ─────────────────── */
.line-siblings { margin-bottom: var(--s8); }
.line-sibling-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s3); margin-top: var(--s4);
}
.line-sibling {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface); border-radius: var(--r-m); box-shadow: var(--sh-1);
  transition: transform .16s ease, box-shadow .16s ease;
}
.line-sibling:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.line-sibling b { display: block; font-size: 15px; color: var(--navy); }
.line-sibling small { font-size: var(--fs-tiny); color: var(--ink-3); }

/* ── 다른 도시 ─────────────────────────────── */
.line-cities { margin-bottom: var(--s8); }
.line-city-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.line-city-links a {
  padding: var(--s2) var(--s4); border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--sh-1);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-2);
}
.line-city-links a:hover { color: var(--navy); box-shadow: var(--sh-2); }

/* ── 앱 CTA ────────────────────────────────── */
.line-app-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s5); padding: var(--s6);
  background: var(--navy); color: #fff; border-radius: var(--r-l);
}
.line-app-cta h2 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.line-app-cta p { color: rgba(255,255,255,.76); font-size: var(--fs-small); line-height: 1.6; max-width: 46ch; }
.line-app-links { display: flex; flex-wrap: wrap; gap: var(--s3); }
.line-app-cta .btn--primary { background: #fff; color: var(--navy); }
.line-app-cta .btn--primary:hover { background: #EDEFF5; }
.line-app-cta .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.line-app-cta .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }

/* ── /map · /game 하단 노선 인덱스 ──────────── */
.line-index { margin: var(--s7) 0 var(--s5); }
.line-index h2 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.line-index > p { color: var(--ink-2); font-size: var(--fs-small); margin-bottom: var(--s4); }
.line-index-links { display: flex; flex-wrap: wrap; gap: var(--s2); }
.line-index-links a {
  padding: var(--s2) var(--s4); border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--sh-1);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-2);
}
.line-index-links a:hover { color: var(--navy); box-shadow: var(--sh-2); }


@media (max-width: 640px) {
  .line-facts { grid-template-columns: repeat(2, 1fr); }
  .line-head { gap: var(--s3); }
  .line-badge { min-width: 42px; height: 42px; font-size: 15px; }
  .station-list li { padding: var(--s3) var(--s4); }
  .station-list li::before { left: calc(var(--s4) + 13px); }
  .line-app-cta { padding: var(--s5); }
}