/* ============================================================
   renewal 노선 · 환승 검색 — app.css  (/renewal/line)

   참고 사이트(125.136.150.185:8200 「환승 조회 시스템」)의 디자인이다. 토큰(색 · 모서리 ·
   글꼴)은 그쪽 static/css/common.css 의 값을, 레이아웃(헤더 58px · 사이드바 240px ·
   리사이저 5px · 목록 항목)은 static/css/app.css 의 값을 «옮겨 적었다». 파일을 그대로
   복사하지 않은 이유 — 환승 결과 전용 규칙 수십 개를 끌고 올 이유가 없고, 그쪽에는
   모바일 분기가 하나도 없어(@media 0건) 여기서 따로 써야 했다.

   omobile2 의 notice.css 를 싣지 않는다 — 글꼴(Pretendard) · 토큰이 전부 다르다.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── 핵심 색 ── */
  --c-navy:        #164E63;   /* 헤더 · 주요 버튼 */
  --c-navy-hover:  #0F3A4A;
  --c-blue:        #0E7490;   /* 링크 · 포커스 · 현재 항목 띠 */
  --c-blue-light:  #D7EEF2;   /* 현재 항목 배경 · 포커스 링 */
  --c-gold:        #B8860B;   /* 헤더 포인트 */
  /* ── 바탕 ── */
  --c-bg:          #EEF1F7;
  --c-surface:     #FFFFFF;
  --c-surface-2:   #F4F6FB;   /* 섹션 헤더 */
  --c-surface-3:   #E8ECF4;
  /* ── 선 ── */
  --c-border:      #C8CDD8;
  --c-border-dark: #A8ADB9;
  --c-divider:     #D8DCE6;
  /* ── 글자 ── */
  --c-ink:         #12202F;
  --c-body:        #2D3A4C;
  --c-muted:       #5A6478;
  /* ── 상태 ── */
  --c-danger:      #B91C1C;
  --c-danger-bg:   #FEE2E2;
  --c-success:     #116832;
  --c-success-bg:  #DCFCE7;
  --c-warn:        #92400E;
  --c-warn-bg:     #FEF3C7;
  /* ── 모서리 ── */
  --r-sm: 3px;
  --r-md: 4px;

  --hdr-h: 58px;
  --sb-w: 240px;
}

html, body { height: 100%; }
body.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--c-bg);
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-body);
  word-break: keep-all;
}
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   헤더 — 네이비 바탕, 아래 금색 3px
   ============================================================ */
.hdr {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: var(--hdr-h);
  padding: 0 20px 0 24px;
  background: var(--c-navy);
  color: #fff;
  border-bottom: 3px solid var(--c-gold);
}
.hdr__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
/* 브랜드 앞의 금색 세로 막대 */
.hdr__brand::before {
  content: "";
  display: block;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: var(--c-gold);
  flex-shrink: 0;
}
.hdr__emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}
.hdr__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
  color: #fff;
}
.hdr__spacer { flex: 1; }

/* 탭 — 현재 탭은 흰 밑줄 + 옅은 흰 배경 */
.tabs {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 0 12px;
}
.tab {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  margin-bottom: -3px;              /* 헤더 밑선(3px) 위에 겹친다 */
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.tab:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.07); }
.tab.is-active { color: #fff; border-bottom-color: #fff; background: rgba(255, 255, 255, 0.10); }
.tab:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* 모바일 전용 — 「노선 선택」 바. PC 에서는 사이드바가 늘 보이므로 숨긴다(아래 모바일 블록에서 켠다) */
.mPick { display: none; }

/* ============================================================
   본문 — 사이드바 + 리사이저 + 지도
   ============================================================ */
.layout {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.sb {
  display: flex;
  flex-direction: column;
  width: var(--sb-w);
  min-width: 160px;
  max-width: 600px;
  flex-shrink: 0;
  background: var(--c-surface);
  border-right: 1.5px solid var(--c-border-dark);
  overflow: hidden;
}
.sb__mobileHead { display: none; }

.panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 섹션 헤더 — 연회색 바탕, 작은 대문자 제목 + 「N개」 */
.sb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 9px 14px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
.sb__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-navy);
}
.sb__count { font-size: 11px; font-weight: 600; color: var(--c-muted); }

/* 검색 */
.sb__search {
  position: relative;
  flex-shrink: 0;
  padding: 8px 10px 4px;
}
.sb__input {
  width: 100%;
  height: 34px;
  padding: 5px 28px 5px 10px;
  border: 1.5px solid var(--c-border-dark);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-body);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.sb__input:focus { border-color: var(--c-blue); }
.sb__input::placeholder { color: var(--c-muted); }
.sb__clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--c-muted);
  font-size: 16px;
  line-height: 1;
}
.sb__clear:hover { color: var(--c-ink); }

/* 스크롤 목록 */
.sb__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.sb__empty {
  padding: 28px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--c-muted);
}

/* 목록의 묶음 이름(광주 · 타 시군 광역) — 스크롤해도 위에 붙는다 */
.sb__group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 12px;
  background: var(--c-surface-3);
  border-bottom: 1px solid var(--c-divider);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--c-muted);
}

/* 노선 항목 — 이름 13px 굵게 + 아래 11px 회색 부제. 현재 항목은 연파랑 + 왼쪽 3px 띠 */
.rli {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--c-divider);
  cursor: pointer;
  transition: background 0.1s;
}
.rli:last-child { border-bottom: none; }
.rli:hover { background: var(--c-surface-2); }
.rli.is-active { background: var(--c-blue-light); box-shadow: inset 3px 0 0 var(--c-blue); }
.rli:focus-visible { outline: 2px solid var(--c-blue); outline-offset: -2px; }
.rli__main { flex: 1; min-width: 0; }
.rli__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rli__dir {
  margin-top: 2px;
  font-size: 11px;
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 경유 정류소 패널 — 사이드바 하단, 최대 절반 */
.rs {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  max-height: 50%;
  overflow: hidden;
  border-top: 1.5px solid var(--c-border-dark);
}
.rs__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.rsi {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--c-divider);
  cursor: pointer;
  font-size: 12px;
}
.rsi:last-child { border-bottom: none; }
.rsi:hover { background: var(--c-surface-2); }
.rsi.is-active { background: var(--c-blue-light); box-shadow: inset 3px 0 0 var(--c-blue); }
.rsi__seq {
  flex-shrink: 0;
  width: 26px;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-muted);
  text-align: right;
}
.rsi__name {
  flex: 1;
  min-width: 0;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 정류소 번호 — 항상 ARS_ID */
.rsi__no { flex-shrink: 0; font-size: 10px; color: var(--c-muted); }
/* 기점 · 회차 · 종점 배지 */
.rsBadge {
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.rsBadge--start { background: var(--c-success-bg); color: var(--c-success); }
.rsBadge--turn  { background: var(--c-warn-bg);    color: var(--c-warn); }
.rsBadge--end   { background: var(--c-danger-bg);  color: var(--c-danger); }

/* 리사이저 */
.resizer {
  width: 5px;
  flex-shrink: 0;
  background: var(--c-border);
  cursor: col-resize;
  transition: background 0.15s;
}
.resizer:hover, .resizer.is-dragging { background: var(--c-blue); }

/* 지도 */
.mapWrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  overflow: hidden;
}
.map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--c-bg); }

/* 지도 위 안내 — 참고 사이트의 .tf-route-badge(네이비 알약) */
.mapMsg {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 50;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 120px);     /* 오른쪽 위 지도유형 컨트롤과 안 겹치게 */
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  pointer-events: none;
}

/* 마커 말풍선 — 네이비 머리띠 + 흰 몸통 (mapDraw.js 가 만든다) */
.iw {
  width: 230px;
  overflow: hidden;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(10, 20, 50, 0.22);
  font-family: inherit;
}
.iw__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--c-navy);
  color: #fff;
}
.iw__name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iw__no { font-size: 10px; font-weight: normal; color: rgba(255, 255, 255, 0.55); }
.iw__close {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1;
}
.iw__body { padding: 8px 10px; font-size: 11px; color: var(--c-body); }
.iw__body .rsBadge { margin-right: 4px; }
/* 환승 검색 탭의 말풍선(transferMap.js) — 방향 한 줄 */
.iw__dir { margin-top: 2px; color: var(--c-muted); }

/* 말풍선의 래퍼(mapDraw.js openPopup) — 아래 여백이 «마커 위로 띄우는 높이»다(고정 px, yAnchor 1).
   경유 노선 칩이 붙어 키가 변해도 마커에서 멀어지지 않는다. 여백은 클릭을 흘려보낸다(마커가 눌린다).
     원 마커  좌표 한가운데 16px → 위로 8px + 틈 6px
     핀       좌표 위로 38px     → + 틈 4px  (기점 · 종점) */
.iwWrap { padding-bottom: 14px; pointer-events: none; }
.iwWrap--term { padding-bottom: 42px; }
.iwWrap .iw { pointer-events: auto; }

/* 경유 노선 — 이 정류소를 지나는 노선의 칩(mapDraw.js linesBox · 묶는 규칙은 routeMap.js).
   노선 지도 탭은 누르는 칩(<button> — 누르면 그 노선으로), 지금 보는 노선은 경로 선과 같은 파랑(<span>).
   정류소 검색 탭(모바일)은 보여 주기만 하는 칩(.iw__line--static).
   칩이 많은 정류소가 있다(광주종합버스터미널 46칸) — 상자 안에서 세로로 스크롤한다. */
.iw__linesWrap { padding: 7px 10px 9px; border-top: 1px solid var(--c-divider); }
.iw__linesHead { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--c-muted); }
.iw__lines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 104px;
  margin-top: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.iw__line {
  flex-shrink: 0;
  padding: 2px 7px;
  border: 1px solid var(--c-border-dark);
  border-radius: 4px;
  background: var(--c-surface-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
  white-space: nowrap;
  cursor: default;      /* 지도의 손 모양 커서가 내려오지 않게. 누르는 칩만 아래에서 pointer */
}
button.iw__line { font-family: inherit; cursor: pointer; }
button.iw__line:hover { border-color: var(--c-blue); color: var(--c-blue); }
button.iw__line:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.iw__line.is-current { border-color: #1a73e8; background: #1a73e8; color: #fff; }   /* mapDraw.js COLOR_ROUTE */
.iw__lineCnt { margin-left: 2px; font-size: 10px; font-weight: 600; opacity: 0.7; }

/* ---- 정류소 이름표 — 많이 확대했을 때만 (mapDraw.js LABEL_MAX_LEVEL, 2026-10-12) ----
   정류소마다 미리 붙여 두고 지도 상자의 is-labels 로만 보이게 한다 — /renewal/line2 와 같은 방식이다.
   래퍼의 아래 여백이 «마커 위로 띄우는 높이»다(mapDraw.js 가 yAnchor 1 로 놓는다).
     원 마커  좌표 한가운데 16px → 위로 8px + 틈 3px
     핀       좌표 위로 38px     → + 틈 3px
   누르는 것은 받지 않는다 — 이름표가 마커를 덮어도 마커가 눌린다. */
.mapLbl { padding-bottom: 11px; visibility: hidden; pointer-events: none; }
.mapLbl--pin { padding-bottom: 41px; }
.map.is-labels .mapLbl { visibility: visible; }
.mapLbl__chip {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 180px;
  padding: 2px 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: 0 1px 4px rgba(10, 20, 50, 0.18);
  white-space: nowrap;
}
.mapLbl__name { font-size: 11px; font-weight: 700; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; }
/* 번호는 ARS_ID 다 */
.mapLbl__no { flex-shrink: 0; font-size: 10px; color: var(--c-muted); }

/* 모바일 카드 — PC 에서는 안 보인다 */
.mCard { display: none; }

/* ============================================================
   환승 검색 탭 (transfer.js) — 출발 · 도착 입력 + 자동완성 + 결과 카드
   참고 사이트의 .tf-* 를 복사하지 않고 이 화면의 토큰으로 새로 썼다.
   ============================================================ */
.tfForm {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--c-border);
}
.tfField { position: relative; display: flex; align-items: center; gap: 6px; }
.tfField__tag {
  flex-shrink: 0;
  width: 34px;
  padding: 2px 0;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.tfField__tag--from { background: var(--c-success-bg); color: var(--c-success); }
.tfField__tag--to   { background: var(--c-danger-bg);  color: var(--c-danger); }
.tfField__input { flex: 1; min-width: 0; }
/* 목록에서 고른 값 — 글자를 고치면 다시 풀린다 */
.tfField__input.is-picked { border-color: var(--c-blue); background: var(--c-blue-light); color: var(--c-ink); font-weight: 600; }
.tfField__clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--c-muted);
  font-size: 16px;
  line-height: 1;
}
.tfField__clear:hover { color: var(--c-ink); }

/* 자동완성 — 입력 아래에 끼워 펼친다(겹쳐 띄우지 않는다) */
.tfSuggest {
  margin-left: 40px;
  border: 1px solid var(--c-border-dark);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  overflow: hidden;
}
.tfSuggest__list { max-height: 216px; overflow-y: auto; }
.tfSuggest__msg { padding: 10px; font-size: 12px; color: var(--c-muted); text-align: center; }
.tfPick {
  padding: 7px 10px;
  border-bottom: 1px solid var(--c-divider);
  cursor: pointer;
}
.tfPick:last-child { border-bottom: none; }
.tfPick:hover, .tfPick.is-active { background: var(--c-blue-light); }
.tfPick__name { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.tfPick__sub { display: block; font-size: 11px; color: var(--c-muted); }

.tfActions { display: flex; gap: 6px; }
.tfBtn {
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--c-border-dark);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-body);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.tfBtn:hover { background: var(--c-surface-2); }
.tfBtn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.tfBtn--primary { flex: 1; border-color: var(--c-navy); background: var(--c-navy); color: #fff; }
.tfBtn--primary:hover { background: var(--c-navy-hover); }
.tfBtn:disabled { opacity: 0.6; cursor: default; }
.tfMsg { font-size: 12px; color: var(--c-muted); }
.tfMsg.is-error { color: var(--c-danger); }

.tfSort {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--c-divider);
}
.tfSort__btn {
  flex: 1;
  height: 26px;
  padding: 0 4px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.tfSort__btn.is-active { border-color: var(--c-navy); background: var(--c-navy); color: #fff; }

/* 결과 카드 */
.tfList { padding: 8px; background: var(--c-surface-2); }
.tfList .sb__empty { background: none; }
.tfCard {
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
}
.tfCard:last-child { margin-bottom: 0; }
.tfCard:hover { border-color: var(--c-border-dark); }
.tfCard.is-active { border-color: var(--c-blue); box-shadow: inset 3px 0 0 var(--c-blue); background: #F7FCFD; }
.tfCard:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.tfCard__head { display: flex; align-items: baseline; gap: 6px; }
.tfCard__no { font-size: 15px; font-weight: 900; }
.tfCard__time { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.tfCard__best {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--c-warn-bg);
  color: var(--c-warn);
  font-size: 10px;
  font-weight: 700;
}
.tfCard__sum { margin-top: 1px; font-size: 11px; color: var(--c-muted); }
.tfLegs { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-divider); }
.tfLeg { display: flex; gap: 8px; padding: 3px 0; }
.tfLeg__bar { flex-shrink: 0; width: 4px; border-radius: 2px; background: var(--c-border-dark); }
/* 도보 — 점선 막대 */
.tfLeg--walk .tfLeg__bar {
  background: repeating-linear-gradient(to bottom, var(--c-border-dark) 0 3px, transparent 3px 6px);
}
.tfLeg__body { flex: 1; min-width: 0; }
.tfLeg__line { font-size: 13px; font-weight: 700; color: var(--c-ink); }
.tfLeg--walk .tfLeg__line { font-size: 12px; font-weight: 600; color: var(--c-muted); }
.tfLeg__od { font-size: 11px; color: var(--c-body); overflow-wrap: anywhere; }
/* 대체 노선 — 같은 구간을 타도 되는 노선. 보여 주기만 한다(transfer.js appendAlts) */
.tfAlt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 3px 0 4px; }
.tfAlt__label { font-size: 11px; color: var(--c-muted); margin-right: 2px; }
.tfAlt__chip {
  font-size: 11px; font-weight: 600; line-height: 18px; color: var(--c-body);
  padding: 0 5px; border: 1px solid var(--c-border-dark); border-radius: 3px; background: #fff;
}
.tfAlt__chip.is-on { color: #fff; font-weight: 700; }   /* 배경 · 테두리는 구간색(transfer.js) */
/* 경유 정류소 — 버스 구간마다 접었다 편다. 점의 색은 transfer.js 가 구간색으로 넣는다 */
.tfStops__btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--c-blue);
  font-size: 11px;
  font-weight: 700;
}
.tfStops__btn:hover { text-decoration: underline; }
.tfStops__btn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }
/* 화살표는 글자(▾)가 아니라 테두리 삼각형이다 — 글꼴마다 그 글자의 크기가 달라 line2 에서 점처럼 보였다 */
.tfStops__chev { display: inline-block; width: 0; height: 0; margin-left: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.12s; }
.tfStops__btn[aria-expanded="true"] .tfStops__chev { transform: rotate(180deg); }
.tfStops { margin: 4px 0 2px; padding: 4px 0; border-top: 1px dashed var(--c-divider); cursor: default; }
.tfStops__row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; color: var(--c-body); }
.tfStops__dot { flex-shrink: 0; width: 8px; height: 8px; border: 2px solid var(--c-border-dark); border-radius: 50%; background: #fff; }
.tfStops__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tfStops__row.is-edge .tfStops__name { font-weight: 700; color: var(--c-ink); }
.tfStops__no { flex-shrink: 0; font-size: 10px; color: var(--c-muted); }

/* ============================================================
   모바일 (<768px) — 참고 사이트에는 없다. 여기서 정한 것:
     · 사이드바는 평소 숨기고, 헤더의 「노선 목록」 버튼으로 전체화면 패널을 연다.
       패널 안에 검색 «입력»이 있어 하단 시트가 아니라 position:fixed; inset:0 이다
       (00_화면목록.md 「입력에 자동 포커스가 가는 모바일 레이어는 전체화면」).
     · 고른 노선은 지도 아래 카드(이름 · 정류소 수 · 정류소 버튼)로 보인다.
   ============================================================ */
@media (max-width: 767px) {
  /* 390px 헤더에는 브랜드(≈150) + 탭 둘(≈150)만 둔다. 목록을 여는 버튼은 헤더가 아니라
     아래 .mPick 바다 — 헤더에 넣으려면 아이콘만 남겨야 했고 그것이 뜻을 못 전했다. */
  .hdr { padding: 0 10px 0 14px; }
  .hdr__brand { gap: 8px; padding-right: 10px; min-width: 0; flex-shrink: 1; }
  .hdr__emblem { display: none; }
  /* 제목이 길면 말줄임 대신 두 줄로 꺾는다(2026-10-14). keep-all 이라 낱말 중간이 아니라 띄어쓰기에서 꺾인다 */
  .hdr__title { font-size: 13px; line-height: 1.25; white-space: normal; word-break: keep-all; }
  .tabs { padding: 0 4px; flex-shrink: 0; }
  .tab { padding: 0 10px; font-size: 12px; }

  .layout { flex-direction: column; }

  /* 「노선 선택」 바 — 헤더와 지도 사이의 한 줄. 검색창처럼 보이게 */
  .mPick {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 44px;
    margin: 8px 12px;
    padding: 0 12px;
    border: 1.5px solid var(--c-border-dark);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-muted);
    text-align: left;
  }
  .mPick:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }
  .mPick__icon, .mPick__chev { flex-shrink: 0; }
  .mPick__label {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mPick__label.is-placeholder { font-weight: 400; color: var(--c-muted); }
  .resizer { display: none; }

  /* 사이드바 → 전체화면 패널. 보일 때만 그린다 */
  .sb {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    width: auto !important;     /* PC 에서 리사이저로 끈 폭(style.width)이 남아 패널을 가두지 않게 — line2.css 와 같다 */
    max-width: none;
    border-right: none;
  }
  .sb.is-open { display: flex; }
  .sb__mobileHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 48px;
    padding: 0 8px 0 14px;
    padding-top: env(safe-area-inset-top);
    background: var(--c-navy);
    color: #fff;
  }
  .sb__mobileTitle { font-size: 14px; font-weight: 700; }
  .sb__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #fff;
  }
  .sb__input { font-size: 16px; }      /* 16px 미만이면 iOS 가 입력 시 화면을 확대한다 */
  .rs { max-height: 45%; }

  /* 환승 검색 — 손가락 크기로 */
  .tfField__input { height: 44px; }
  .tfField__clear { right: 2px; width: 40px; height: 40px; font-size: 20px; }
  .tfBtn { height: 44px; padding: 0 14px; font-size: 14px; }
  .tfSort__btn { height: 34px; font-size: 12px; }
  .tfPick { padding: 10px 12px; }
  .tfPick__name { font-size: 15px; }
  .tfPick__sub { font-size: 12px; }
  .tfSuggest__list { max-height: 40vh; }
  .tfStops__btn { min-height: 32px; font-size: 12px; }
  .tfStops__row { padding: 4px 0; font-size: 12px; }

  .mapWrap { min-width: 0; }
  .mapMsg { max-width: calc(100% - 32px); font-size: 11px; white-space: normal; text-align: center; }

  .mCard {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    box-shadow: 0 4px 16px rgba(10, 20, 50, 0.18);
    cursor: pointer;   /* 카드 전체가 누르는 영역이다 — routeMap.js */
  }
  .mCard__text { flex: 1; min-width: 0; }
  .mCard__name { display: block; font-size: 14px; font-weight: 700; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mCard__sub { display: block; font-size: 11px; color: var(--c-muted); }
  .mCard__btn {
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--c-navy);
    border-radius: var(--r-sm);
    background: var(--c-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }
}