/* 루테이 공통 디자인(막카 서브도메인 theme.css에서 가져옴, 2026-11-10). 모든 나라가 같이 쓴다. shadcn/ui 계열의 밝은 카드형 화면 + 다크모드. 라이브러리 없이 CSS 변수만.
   글자 크기는 짝수만(12·14·16·18·20·24·28), 자간 -0.03em(12~14px 표·버튼은 -0.02em), 문단 1.5, 한 줄짜리는 normal.
   색 대비(WCAG AA 4.5 이상, 라이트·다크 카드 위): 본문 19.90·16.97 / 보조 7.73·6.91 / 링크 6.70·9.82 / 버튼 흰 글자 6.70·5.17
   — 색을 바꾸면 node scripts/contrast.ts로 다시 확인(4.5 미만이면 실패).
   --brand는 사이트마다 바꾼다(:root[data-site] 또는 layout에서 style로). */
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --card: #ffffff;
  --muted-bg: #f1f3f5;
  --line: #e4e4e7;
  --text: #09090b;
  --muted: #52525b;
  --brand: #0f766e;
  --brand-text: #0f766e;
  --brand-soft: #e8f6f3;
  --on-brand: #ffffff;
  --good: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 1px 3px rgba(9, 9, 11, 0.06);
  --radius: 14px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090b;
  --card: #18181b;
  --muted-bg: #1f1f23;
  --line: #2a2a30;
  --text: #fafafa;
  --muted: #a1a1aa;
  --brand: #0f766e;
  --brand-text: #5eead4;
  --brand-soft: #0f2624;
  --on-brand: #ffffff;
  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --shadow: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", "Pretendard JP Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.03em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-text); text-underline-offset: 3px; }
ul, ol { padding-left: 20px; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* 헤더 */
.hdr { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.hdr .wrap { display: flex; align-items: center; gap: 12px; height: 56px; }
.hdr-brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; line-height: normal; color: var(--text); text-decoration: none; white-space: nowrap; }
.theme-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 18px; cursor: pointer; flex: none; }

/* 본문 */
main { padding: 12px 0 48px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; line-height: normal; color: var(--muted); margin: 12px 0 8px; }
.crumbs a { color: var(--muted); text-decoration: none; }
h1 { font-size: 22px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; margin: 4px 0 12px; word-break: keep-all; }
@media (min-width: 768px) { h1 { font-size: 26px; } }
h2 { font-size: 20px; font-weight: 800; line-height: normal; margin: 0 0 12px; word-break: keep-all; }
h3 { font-size: 16px; font-weight: 700; line-height: normal; margin: 0 0 8px; }
* + h3 { margin-top: 24px; } /* 11-04 관광지 목록: 칩 바로 밑에 붙은 소제목 띄우기 */
.lead { font-size: 16px; color: var(--text); margin-bottom: 4px; }
.lead span { display: block; }
.lead span + span { margin-top: 4px; }
.asof { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: normal; color: var(--muted); margin-top: 8px; }
.asof::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.note { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 6px; }

/* 구역: 카드 없이 여백과 가는 선으로만 나눈다(카드 안 카드 금지) */
.section { padding: 28px 0 0; margin: 28px 0 0; border-top: 1px solid var(--line); }
.section > p { margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 14px; font-weight: 600; line-height: normal; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
.chips a:hover { border-color: var(--brand); color: var(--brand-text); }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--muted-bg); font-size: 12px; font-weight: 700; line-height: normal; letter-spacing: -0.02em; color: var(--muted); }
.badge.brand { background: var(--brand-soft); color: var(--brand-text); }
.badge.good { color: var(--good); }

/* 표: 640px 이하는 줄 단위(가로 스크롤 금지, 막카 11-03 점검 규칙) */
table { width: 100%; border-collapse: collapse; font-size: 14px; letter-spacing: -0.02em; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); line-height: 1.5; vertical-align: top; }
th { font-size: 12px; font-weight: 700; color: var(--muted); }
td small { font-size: 12px; }
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.stack td { display: block; padding: 0; border: 0; }
  table.stack td:first-child { font-weight: 700; }
  table.stack td[data-label]::before { content: attr(data-label) " "; color: var(--muted); }
}

/* FAQ: 펼치지 않아도 글이 HTML에 있다(검색봇 기준) */
.faq { display: grid; gap: 12px; }
.faq div { padding: 12px 0; border-top: 1px solid var(--line); }
.faq div:first-child { border-top: 0; padding-top: 0; }
.faq dt { font-weight: 700; line-height: 1.5; }
.faq dd { margin-top: 4px; color: var(--muted); }

/* 버튼 */
.btns { display: grid; gap: 8px; margin-top: 16px; }
.btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-size: 16px; font-weight: 700; line-height: normal; text-decoration: none; }
.btn.ghost { background: var(--card); color: var(--text); border: 1px solid var(--line); }

/* 광고 자리(막카와 같은 자리·높이) */
.ad-unit { margin: 16px 0; text-align: center; }
.ad-unit-label { display: block; font-size: 12px; line-height: normal; color: var(--muted); margin-bottom: 4px; }
.ad-unit ins.adsbygoogle[data-ad-status="unfilled"], .ad-unit ins.adsbygoogle[data-ad-status="unfilled"] * { visibility: hidden !important; } /* 안 채워진 광고의 흰 상자만 숨기고 자리는 남긴다(상단 접지 않음 규칙). 구글 iframe이 visible을 따로 잡아 자식까지 !important로 덮는다(11-05 반려생활 방 확인) */

/* 푸터 */
.ftr { border-top: 1px solid var(--line); padding: 24px 0 32px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.ftr a { color: var(--muted); }
.ftr p + p { margin-top: 6px; }

/* 숫자 강조 */
.hl { color: var(--brand-text); font-weight: 800; }
/* 휴대폰: 칩을 2칸에 같은 폭으로 꽉 채우고 크게(11-05 사용자: "어중간하게 걸친다", "한 라인에 3개 못 나오는데 차라리 확대"). 화살표는 오른쪽 끝.
   하나 남은 마지막 칩은 grid라 왼쪽 칸에 선다. 긴 글은 두 줄로 넘기되 글자는 16px 그대로 */
@media (max-width: 640px) {
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chips li { min-width: 0; }
  .chips a { display: flex; justify-content: space-between; width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px; font-size: 16px; line-height: 1.5; word-break: keep-all; }
}
/* 길찾기 버튼: 앱 색 점 */
.pa .pa-go > :nth-child(2)::before, .pa .pa-go > :nth-child(3)::before, .pa .pa-go > :nth-child(4)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; flex: none; }
.pa .pa-go > :nth-child(2)::before { background: #fee500; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.pa .pa-go > :nth-child(3)::before { background: #03c75a; }
.pa .pa-go > :nth-child(4)::before { background: #ef4444; }
.pa-tel { white-space: nowrap; }

/* 본문 문단(Para): 문장마다 줄, 긴 문장은 쉼표에서 한 번 더 */
.para .sen { display: block; }
.para .sen + .sen { margin-top: 6px; }
.para .clause { display: block; }
.para .clause.more { padding-left: 12px; position: relative; }
.para .clause.more::before { content: ""; position: absolute; left: 2px; top: 0.75em; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.section > .para, .section > div > .para { margin-bottom: 10px; }

/* 내 위치 찾기·이름 검색 */
.finder { display: grid; gap: 12px; }
.nearme .btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.nearme-list { margin-top: 12px; }
.chips + .chips { margin-top: 12px; }
/* 표 숫자 칸·요금 조각은 중간에서 줄을 바꾸지 않는다("1,200" 다음 줄 "원" 방지) */
.nowrap, td.num { white-space: nowrap; }
/* 한 줄 찾기(검색칸 + 짧은 내 위치 버튼): 결과·안내는 아래 전체 폭으로 */
.finder-compact { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.finder-compact .nearme { display: contents; }
.finder-compact .nearme .btn { grid-row: 1; grid-column: 2; align-self: start; width: auto; padding: 0 14px; white-space: nowrap; }
.finder-compact .nearme > :not(.btn) { grid-column: 1 / -1; }
.qsearch input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 16px; letter-spacing: -0.02em; }
.qsearch input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.qsearch-list { margin-top: 10px; }
.qsearch-kind { margin-left: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }

/* 목록 거르기 칩 */
.rowfilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rowfilter button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: -0.02em; cursor: pointer; }
.rowfilter button span { font-size: 12px; color: var(--muted); font-weight: 600; }
.rowfilter button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.rowfilter button.on span { color: var(--on-brand); }
[data-tags][hidden] { display: none !important; }

/* ☰ 전체 메뉴: 화면 높이 전체 옆 서랍(막카 Header 드로어와 같은 모양, 휴대폰·PC 공통) */
.hdr-menu-btn { flex: none; }
.hdr-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(9, 9, 11, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.hdr-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(320px, 88vw); display: flex; flex-direction: column; overflow-y: auto; background: var(--card); border-left: 1px solid var(--line); transform: translateX(100%); visibility: hidden; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s; }
.hdr-menu-toggle:checked ~ .hdr-overlay { opacity: 1; pointer-events: auto; }
.hdr-menu-toggle:checked ~ .hdr-drawer { transform: translateX(0); visibility: visible; }
body:has(.hdr-menu-toggle:checked) { overflow: hidden; }
.hdr-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); flex: none; }
.hdr-drawer-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--muted-bg); color: var(--text); font-size: 18px; line-height: normal; cursor: pointer; }
.hdr-drawer-search { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.hdr-drawer > nav { display: flex; flex-direction: column; }
.hdr-drawer > nav a { display: flex; align-items: center; min-height: 52px; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 16px; font-weight: 700; line-height: normal; text-decoration: none; }
.hdr-drawer > nav a:hover { background: var(--muted-bg); }
.hdr-drawer > nav a.sub { min-height: 44px; border-bottom: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.hdr .wrap { position: relative; }
@media (max-width: 720px) { .theme-btn { margin-left: 0; } .hdr-brand { margin-right: auto; } }

/* 루테이 공통 스타일(모든 나라): 메트로식 노선도 + 역명판. theme.css(토큰·기본 요소) 위에 얹는다.
   글자 크기 짝수·최소 12px, 자간 -0.03em(일본어·중국어 0), 문단 1.5·한 줄짜리 normal.
   주인공은 정류장의 시·분 격자와 노선의 세로 노선도. 첫차·막차는 요약 한 줄(.strip)의 한 칸. */
/* 팔레트 A(2026-11-10 사용자 확정): 뼈대는 무채색 먹색, 색은 두 가지 뜻만 — 노선 색(칩·노선도·링크)과 막차 빨강(--last).
   대비(카드 위): 보조 6.7·7.0 / 막차 5.9·7.0 / 정류장 링크 6.7·10.8 / 시 칸 글자 18.9·13.5 — 모두 AA 이상. */
:root {
  --bg: #f5f5f4;
  --card: #ffffff;
  --muted-bg: #f0f0ee;
  --line: #e5e5e3;
  --text: #111111;
  --muted: #5c5c5c;
  --brand: #111111;
  --brand-text: #111111;
  --brand-soft: #f0f0ee;
  --on-brand: #ffffff;
  --link: #1f5f99;       /* 정류장 이름 링크 */
  --last: #b4232d;       /* 막차·운행 끝 같은 급한 정보에만(2026-11-12 포인트 빨강 확정, 흰 바탕 6.5:1) */
  --sign: #111111;       /* 역명판 테두리 */
  --hour-bg: #111111;    /* 시각표 '시' 칸 */
  --hour-fg: #ffffff;
  --wrap: 800px;
}
:root[data-theme="dark"] {
  --bg: #0e0e0f;
  --card: #18181a;
  --muted-bg: #141416;
  --line: #3a3a3e;
  --text: #f2f2f0;
  --muted: #a3a3a0;
  --brand: #f2f2f0;
  --brand-text: #f2f2f0;
  --brand-soft: #141416;
  --on-brand: #111111;
  --link: #9acfff;
  --last: #ff7a6b;
  --sign: #a3a3a0;
  --hour-bg: #26262a;
  --hour-fg: #f2f2f0;
}
:lang(ja) body, body:lang(ja) {
  font-family: "Pretendard Variable", "Pretendard JP Variable", Pretendard, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  line-break: strict;
}
/* keep-all은 한국어용. 띄어쓰기 없는 중국어·일본어 문장에 걸리면 줄이 안 바뀌어 화면 밖으로 넘친다 */
html:lang(ja) *, html:lang(zh) *, html:lang(zh-Hans) * { word-break: normal; }
/* 중국어 쪽은 일본식 한자 모양이 섞이지 않게 Pretendard JP를 빼고 시스템 중국어 글꼴로 */
html:lang(zh-Hans) body { font-family: "Pretendard Variable", Pretendard, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; letter-spacing: 0; line-break: strict; }
::selection { background: var(--brand); color: var(--on-brand); }
:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: var(--wrap); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── 머리말: 작은 언어 버튼 + 테마 + ☰ ── */
.hdr-brand { letter-spacing: 0.02em; margin-right: auto; }
.hdr .wrap { gap: 8px; }
.hdr-menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hdr-menu-toggle:focus-visible ~ .hdr .hdr-menu-btn { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.lang { position: relative; flex: none; }
.lang summary { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: 0; cursor: pointer; list-style: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang[open] summary { background: var(--muted-bg); }
.lang-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 148px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 8px 24px rgba(9, 9, 11, 0.14), 0 2px 6px rgba(9, 9, 11, 0.08); }
.lang-pop a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--text); font-size: 16px; font-weight: 600; line-height: normal; text-decoration: none; }
.lang-pop a:hover { background: var(--muted-bg); }
.theme-btn .i-sun, [data-theme="dark"] .theme-btn .i-moon { display: none; }
[data-theme="dark"] .theme-btn .i-sun { display: block; }
.hdr-drawer .drawer-group p { padding: 16px 20px 4px; font-size: 12px; font-weight: 700; line-height: normal; color: var(--muted); }
.hdr-drawer > nav > .drawer-group a.sub, .hdr-drawer > nav span.sub { display: flex; align-items: center; min-height: 44px; padding: 0 20px; border-bottom: 0; font-size: 16px; color: var(--text); }
.hdr-drawer > nav span.sub.on { font-weight: 800; color: var(--brand-text); }

/* ── 쪽 머리: 제목·첫 문장 ── */
.crumbs { font-size: 14px; }
h1 { font-size: 22px; line-height: 1.35; margin: 16px 0 8px; }
@media (min-width: 768px) { h1 { font-size: 26px; } }
.lead { font-size: 16px; margin: 0 0 4px; }
.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; text-decoration: none; }
a.pill:hover { text-decoration: underline; text-underline-offset: 3px; }
.pill.lg { min-height: 32px; font-size: 16px; padding: 4px 16px; border-radius: 16px; margin: 4px 0 12px; }

/* ── 역명판 ── */
.sign { margin: 8px 0 4px; border: 3px solid var(--sign); border-radius: 12px; background: var(--card); overflow: hidden; }
.sign-body { padding: 14px 16px 12px; text-align: center; }
.sign-read { font-size: 14px; line-height: normal; color: var(--muted); }
.sign-name { margin-top: 2px; font-size: 28px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.sign-band { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.sign-band a { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
.sign-band a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.sign-next { text-align: right; margin-left: auto; }
.sign-band svg { flex: none; }

/* ── 요약 한 줄: 같은 크기 칸 ── */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 4px; border-block: 1px solid var(--line); }
.strip > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px; padding: 12px 4px; text-align: center; }
.strip > div + div { border-left: 1px solid var(--line); }
.strip dt { font-size: 12px; line-height: 1.5; color: var(--muted); }
.strip dd { font-size: 18px; font-weight: 800; line-height: 1.5; font-variant-numeric: tabular-nums; word-break: keep-all; }
@media (max-width: 400px) { .strip dd { font-size: 16px; } }
.asof { margin-top: 12px; flex-wrap: wrap; row-gap: 2px; } /* 유효기간까지 붙으면 "データ基準日"이 글자 단위로 꺾여서 줄을 넘긴다 */

/* ── 요일: 구역 머리 + 바로가기 ── */
.daynav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
/* 바로가기·요일 버튼은 머리말(56px) 아래에 붙어 따라온다(막카 역 쪽 앵커 탭처럼). 한 줄, 넘치면 옆으로 밀기 */
.jump, .daynav { position: sticky; top: 56px; z-index: 10; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 0; background: var(--bg); }
.jump::-webkit-scrollbar, .daynav::-webkit-scrollbar { display: none; }
.jump a, .daynav a { flex: none; }
section[id], .dir[id], .daysec[id] { scroll-margin-top: 120px; }
.daynav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 14px; font-weight: 700; line-height: normal; text-decoration: none; }
.daynav a:hover { border-color: var(--text); }
.dayhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.daysec + .daysec { margin-top: 28px; }
.daytag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--hour-bg); color: var(--hour-fg); font-size: 14px; font-weight: 700; line-height: normal; }

/* ── 시·분 시간표(정류장 쪽 주인공) ── */
.tt { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.tt-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); border-top: 1px solid var(--line); }
.tt-row:first-child { border-top: 0; }
.tt-h { display: grid; place-items: center; background: var(--hour-bg); color: var(--hour-fg); font-size: 20px; font-weight: 800; line-height: normal; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tt-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 8px 14px; }
.tt-m .m { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 800; line-height: 1.5; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.m .rdot { margin-top: 6px; }

/* ── 노선 이름표 목록(이 정류장을 지나는 노선) ── */
.lines { list-style: none; padding: 0; }
.lines li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.lines li:first-child { border-top: 0; padding-top: 0; }
.lines .to { font-size: 14px; color: var(--muted); }

/* ── 노선도: 굵은 노선 색 세로 선 위에 정류장 전부(노선 쪽 주인공) ── */
.seq { list-style: none; padding: 0; margin: 0; }
/* 노선도 치수는 막카 LineRouteDiagram(운영 중 검증)과 같게: 선 6px, 점 16px·테두리 4px, 종점 22px, 줄 52px. 모두 border-box, 가운데 x=11px */
.seq > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 52px; padding: 6px 0 6px 36px; line-height: normal; }
.seq > li::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 6px; background: var(--route, var(--brand)); }
.seq > li:first-child::before { top: 50%; }
.seq > li:last-child::before { bottom: 50%; }
.seq > li:only-child::before { display: none; }
.seq > li::after { content: ""; box-sizing: border-box; position: absolute; left: 3px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--card); border: 4px solid var(--route, var(--brand)); }
.seq > li.end::after { left: 0; width: 22px; height: 22px; margin-top: -11px; border-width: 4px; background: var(--route, var(--brand)); box-shadow: inset 0 0 0 4px var(--card); }
.seq a { font-size: 16px; font-weight: 600; color: var(--link); text-decoration: none; overflow-wrap: anywhere; }
.seq a:hover { text-decoration: underline; text-underline-offset: 3px; }
.seq .times { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.seq .drop { font-size: 14px; color: var(--muted); }
.route-map { margin: 4px 0 8px; padding: 12px; border-radius: 12px; background: var(--muted-bg); }
.route-map svg { display: block; width: 100%; max-height: 320px; }

/* ── 노선망(시·첫 화면): 노선마다 세로 선을 나란히 ── */
.net { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px 12px; }
.net-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; }
.net-col .pill { justify-content: center; text-align: center; }
.net-end { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.net-end:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.net-bar { position: relative; display: block; width: 8px; height: 96px; margin: 6px 0; background: var(--route, var(--brand)); }
.net-bar::before, .net-bar::after { content: ""; position: absolute; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--card); border: 5px solid var(--route, var(--brand)); }
.net-bar::before { top: -10px; }
.net-bar::after { bottom: -10px; }

/* 노선별 한 줄 목록 */
.line-rows { list-style: none; padding: 0; }
.line-rows li { border-top: 1px solid var(--line); }
.line-rows li:first-child { border-top: 0; }
.line-rows a { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; color: var(--text); text-decoration: none; }
.line-rows .bar { align-self: stretch; border-radius: 4px; background: var(--route, var(--brand)); }
.line-rows strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.line-rows .sub { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.line-rows .cnt { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.line-rows a:hover strong { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
/* 현·시정촌 목록(첫 쪽·현 쪽): 이름 + 숫자 한 줄. 넓은 화면은 두 칸 */
.area-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 24px; }
.area-list li { border-top: 1px solid var(--line); min-width: 0; }
.area-list a { display: block; min-height: 56px; padding: 10px 0; color: var(--text); text-decoration: none; }
.area-list strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.area-list .sub { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.area-list a:hover strong { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.hdr-drawer .drawer-prefs { display: grid; grid-template-columns: 1fr 1fr; }

/* 여러 노선이 만나는 정류장 */
.shared { list-style: none; padding: 0; }
.shared li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.shared li:first-child { border-top: 0; padding-top: 0; }
.shared a { font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.shared a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.shared .dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: 0 1 auto; max-width: 50%; } /* 노선 20개 정류장도 한 줄에서 넘치지 않게 감는다 */
.shared .more { font-size: 12px; line-height: normal; color: var(--muted); white-space: nowrap; }

/* 정류장 목록(노선별 묶음) */
.stop-group + .stop-group { margin-top: 20px; }
.stop-group h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0 0 8px; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.chips li { min-width: 0; }
.chips a { width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 10px; font-size: 14px; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }

/* 나라 첫 쪽: 도시마다 노선망 */
.city-block + .city-block { margin-top: 28px; }
.city-block h3 { margin: 0 0 4px; font-size: 18px; }
.city-block h3 a { color: var(--text); text-decoration: none; }
.city-block h3 a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.city-block .meta { font-size: 14px; color: var(--muted); margin-bottom: 16px; }

/* ── 공통 꼬리 ── */
.faq dd { margin-top: 4px; }
.asof time { white-space: nowrap; }
.src { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 12px; }
.ext-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; }
.ad-slot { min-height: 100px; margin: 16px 0; border-radius: 12px; border: 1px dashed var(--line); display: grid; place-items: center; font-size: 12px; color: var(--muted); }

/* ── 노선 쪽(B안): 바로가기 · 방면별 시간표 · 요금 ── */
.strip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip.four > div { flex-direction: column; align-items: center; gap: 2px; }
.strip .is-last { color: var(--last); }
.jump { display: flex; gap: 8px; margin: 16px 0 8px; }
.jump a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1.5px solid var(--text); color: var(--text); font-size: 14px; font-weight: 700; line-height: normal; text-align: center; text-decoration: none; }
.jump a.primary { background: var(--text); color: var(--bg); }
.jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dir + .dir { margin-top: 28px; }
.dir h3 { margin: 0 0 4px; font-size: 18px; }
.dir-meta { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.tt .m.is-last { color: var(--last); }
.tt .m .tag { font-size: 12px; font-weight: 700; margin-left: 2px; }
.tt .m.is-past { opacity: 0.55; }
.tt .m.is-next { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.next-bus { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: normal; }
.fare-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-block: 1px solid var(--line); }
.fare-row dt { font-size: 14px; color: var(--muted); }
.fare-row dd { font-size: 24px; font-weight: 800; line-height: normal; font-variant-numeric: tabular-nums; }

/* 줄바꿈(전역 규칙 28): 구절 단위. 일본어는 낱말 중간(終バ/ス)에서 안 끊기게 auto-phrase(크롬 119+, 나머지는 무시). */
.ph { display: inline-block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
p, dd { text-wrap: pretty; }
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3, html:lang(ja) .lead { word-break: auto-phrase; }

/* 슬로건(푸터 맨 위): 영어는 자간을 넓힌 대문자, 12px·굵게 */
.ftr .slogan { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; line-height: normal; color: var(--text); margin-bottom: 12px; }
:lang(ko) .ftr .slogan { letter-spacing: 0; }

/* ── 접근성(11-12 사용성 검토): 건너뛰기 링크, 핵심 터치 대상 44px ── */
.skip { position: absolute; left: 8px; top: -100px; z-index: 60; padding: 12px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 16px; font-weight: 700; line-height: normal; text-decoration: none; }
.skip:focus { top: 8px; }
main:focus { outline: none; }
.theme-btn, .hdr-drawer-close { width: 44px; height: 44px; }
.lang summary { height: 44px; }
.jump a, .daynav a { min-height: 44px; }
/* 노선 알약은 보이는 크기(28px)는 두고 누르는 자리만 위아래 8px 넓힌다 */
a.pill { position: relative; }
a.pill::after { content: ""; position: absolute; inset: -8px 0; }

/* ── 큰 정류장 「다음 3편」(모든 노선 합침, 계획 시각) ── */
.next3 { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.next3-title { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--muted); margin: 0 0 4px; }
.next3 ol { list-style: none; padding: 0; margin: 0; }
.next3 li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; border-top: 1px solid var(--line); }
.next3 li:first-child { border-top: 0; }
.next3 strong { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.next3 a { font-size: 16px; font-weight: 700; color: var(--link); }
.next3 .to { font-size: 14px; color: var(--muted); }

/* 문의 폼: 라벨·입력칸·버튼을 세로로 쌓는다. 입력 글자 16px(iOS 확대 방지), 버튼 높이 48px. */
.contact-form { display: grid; gap: 8px; margin-top: 8px; }
.contact-form label { font-size: 14px; font-weight: 700; line-height: normal; }
.contact-form textarea { width: 100%; min-height: 160px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; font-size: 16px; line-height: 1.5; letter-spacing: inherit; resize: vertical; box-sizing: border-box; }
.contact-form textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.contact-form .btn { width: 100%; margin-top: 8px; border: 0; cursor: pointer; font-family: inherit; }
.contact-form .btn:disabled { opacity: 0.6; cursor: default; }