/* layout: clean app shell — white canvas, soft grey cards, pill segments, fixed bottom bar.
   Route numbers carry a series color (100s green, 200s orange, 300s teal, 400s brown, loops red, university purple). */
:root{
  --bg:#ffffff; --canvas:#f5f6f8; --card:#ffffff; --fg:#111827; --sub:#6b7280; --faint:#9ca3af; --line:#e8eaee;
  --accent:#3b5bfd; --accent-ink:#ffffff; --accent-soft:#eef1ff;
  --warn-bg:#fff6e6; --warn-fg:#9a5b00; --live:#10a36b; --live-soft:#e8f7f0;
  --r-100:#12a150; --r-200:#ef8a12; --r-300:#0b9da8; --r-400:#8d6e63; --r-loop:#e5484d; --r-univ:#7c4dff; --r-etc:#6b7280;
  --shadow:0 1px 2px rgba(17,24,39,.04),0 6px 20px rgba(17,24,39,.06);
  --font:"Pretendard","Noto Sans KR","Noto Sans Khmer","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --scale:1;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1116; --canvas:#161a21; --card:#1b2029; --fg:#eef1f5; --sub:#a1a9b6; --faint:#6f7886; --line:#2a303b;
  --accent:#7d93ff; --accent-ink:#0e1116; --accent-soft:#1f2640;
  --warn-bg:#2c2312; --warn-fg:#f3c37a; --live:#4fd39c; --live-soft:#13291f;
  --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1116; --canvas:#161a21; --card:#1b2029; --fg:#eef1f5; --sub:#a1a9b6; --faint:#6f7886; --line:#2a303b;
  --accent:#7d93ff; --accent-ink:#0e1116; --accent-soft:#1f2640;
  --warn-bg:#2c2312; --warn-fg:#f3c37a; --live:#4fd39c; --live-soft:#13291f;
  --shadow:none; color-scheme:dark}
html[data-size="2"]{--scale:1.18}
html[data-size="3"]{--scale:1.36}
html.easy{--sub:var(--fg)}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:calc(15px*var(--scale));line-height:1.55;word-break:keep-all;overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
svg{display:block}
.app{max-width:520px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px calc(96px + env(safe-area-inset-bottom,0px))}

/* top bar */
.bar{display:flex;align-items:center;gap:10px;min-height:52px}
.bar h1{font-size:1.25em;margin:0;font-weight:800;letter-spacing:-.01em;flex:1}
.bar .sub{font-size:.8em;color:var(--sub);font-weight:500}
.iconbtn{width:40px;height:40px;border-radius:12px;border:0;background:transparent;display:grid;place-items:center;color:var(--fg);flex:0 0 auto}
.iconbtn:hover{background:var(--canvas)}
.trnote{font-size:.78em;color:var(--warn-fg);background:var(--warn-bg);border-radius:8px;padding:4px 10px;display:inline-block;margin:0 0 8px}

/* search */
.search{display:flex;align-items:center;gap:8px;background:var(--canvas);border-radius:14px;padding:0 14px;height:48px;margin:6px 0 18px}
.search input{border:0;background:transparent;outline:none;flex:1;min-width:0;font-size:1em}
.search input::placeholder{color:var(--faint)}
.search:focus-within{box-shadow:0 0 0 2px var(--accent)}

h2.sec{font-size:1.02em;margin:20px 0 10px;font-weight:800}
.hubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hub{border:0;background:var(--canvas);border-radius:18px;padding:14px 12px;text-align:left;display:flex;flex-direction:column;gap:10px;min-height:120px}
.hub .ic{width:36px;height:36px;border-radius:12px;background:var(--card);display:grid;place-items:center;color:var(--accent);box-shadow:var(--shadow)}
.hub b{font-size:.95em;line-height:1.3}
.hub small{font-size:.72em;color:var(--accent);font-weight:700;margin-top:auto}
@media (max-width:360px){.hubs{grid-template-columns:1fr 1fr}}

.list{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;padding:12px 14px;text-align:left;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row:hover{background:var(--canvas)}
.row .ic{width:38px;height:38px;border-radius:12px;background:var(--canvas);display:grid;place-items:center;color:var(--sub);flex:0 0 auto}
.row .txt{flex:1;min-width:0}
.row .txt b{display:block;font-size:.98em}
.row .txt .ko{font-size:.78em;color:var(--sub)}
.row .chev{color:var(--faint)}
.mini{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.empty{color:var(--sub);text-align:center;padding:22px 12px;background:var(--canvas);border-radius:16px;font-size:.92em}

/* route badges */
.rb{display:inline-flex;align-items:center;justify-content:center;min-width:2.6em;height:1.75em;padding:0 .5em;border-radius:7px;color:#fff;font-weight:800;font-size:.78em;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rb.big{font-size:1.05em;height:2em;min-width:3.2em;border-radius:9px}
.s-100{background:var(--r-100)}.s-200{background:var(--r-200)}.s-300{background:var(--r-300)}.s-400{background:var(--r-400)}
.s-loop{background:var(--r-loop)}.s-univ{background:var(--r-univ)}.s-etc{background:var(--r-etc)}

/* stop screen */
.hero{background:var(--canvas);border-radius:22px;padding:18px}
.hero .lbl{font-size:.76em;color:var(--accent);font-weight:800;letter-spacing:.02em}
.hero h2{font-size:1.55em;line-height:1.25;margin:4px 0 2px;font-weight:800;text-wrap:balance}
.hero .ko{color:var(--sub);font-size:.88em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{background:var(--card);border-radius:999px;padding:4px 11px;font-size:.84em;box-shadow:var(--shadow)}
.chip i{font-style:normal;color:var(--faint);font-size:.88em;margin-left:5px}
.photo{margin-top:12px;border-radius:14px;max-width:100%;display:block}

.seg{display:flex;background:var(--canvas);border-radius:14px;padding:4px;margin:16px 0 4px}
.seg button{flex:1;border:0;background:transparent;border-radius:10px;padding:9px 6px;font-size:.88em;color:var(--sub);font-weight:600}
.seg button[aria-selected="true"]{background:var(--card);color:var(--fg);font-weight:800;box-shadow:var(--shadow)}

.dests{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.dests::-webkit-scrollbar{display:none}
.dests button{flex:0 0 auto;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:10px 16px;font-weight:700;font-size:.95em}
.dests button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}

.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin-top:12px}
.card h3{font-size:.95em;margin:0 0 10px;font-weight:800}
.line{display:flex;align-items:center;gap:8px;font-size:.82em;color:var(--sub);margin:4px 2px 0}
.line .dot{width:10px;height:10px;border-radius:50%;border:2.5px solid var(--accent);background:var(--bg);flex:0 0 auto}
.line .dot.end{background:var(--accent)}
.line .bar2{flex:1;height:3px;border-radius:2px;background:var(--accent);opacity:.5}
.line span{max-width:42%}

.live{background:var(--live-soft);border-color:transparent}
.live h3{color:var(--live);display:flex;align-items:center;gap:7px}
.live h3 i{width:8px;height:8px;border-radius:50%;background:var(--live)}
@media (prefers-reduced-motion:no-preference){.live h3 i{animation:pulse 1.6s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.25}}
.arr{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid rgba(127,127,127,.15)}
.arr:first-of-type{border-top:0}
.arr .min{font-weight:800;font-size:1.05em}
.arr .st{color:var(--sub);font-size:.84em;margin-left:auto}

.route{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;padding:12px 0;border-top:1px solid var(--line)}
.route:first-of-type{border-top:0;padding-top:2px}
.route .rb{grid-row:span 5;align-self:start}
.route .off{font-weight:700}
.route .off .k{display:inline-block;min-width:4.2em;font-weight:500;color:var(--sub);font-size:.84em}
.route .off+.off{font-weight:600}
.more{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--accent);font:inherit;font-weight:700;cursor:pointer}
.sides{margin:6px 0 0;padding-left:1.1em;color:var(--sub);font-size:.9em;line-height:1.7}
.route .meta{color:var(--sub);font-size:.84em}
.warn{grid-column:2;background:var(--warn-bg);color:var(--warn-fg);border-radius:10px;padding:6px 10px;font-size:.84em;font-weight:600;margin-top:4px}
.weekend{background:var(--warn-bg);border:0}
.weekend h3{color:var(--warn-fg)}
.example{display:inline-block;margin-top:10px;font-size:.76em;color:var(--warn-fg);background:var(--warn-bg);border-radius:6px;padding:2px 8px}
.note{font-size:.84em;color:var(--sub);margin:4px 0 0}

.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;text-decoration:none;border-radius:14px;padding:13px 14px;font-weight:800;border:0;background:var(--canvas);color:var(--fg)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn[aria-disabled="true"]{opacity:.55}
.tell{margin-top:18px;background:var(--accent-soft);border-radius:20px;padding:16px;display:grid;gap:10px}
.tell p{margin:0;font-size:.9em}

.steps{list-style:none;margin:8px 0 0;padding:0}
.steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;padding-bottom:16px;position:relative}
.steps li::before{content:attr(data-n);width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:.85em}
.steps li:not(:last-child)::after{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:2px;background:var(--line)}
.steps b{display:block}
.steps span{color:var(--sub);font-size:.88em}
.place{padding:12px 0;border-top:1px solid var(--line)}
.place:first-child{border-top:0;padding-top:0}
.place small{color:var(--sub)}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:8px max(16px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 70%,transparent)}
.nav .in{max-width:520px;margin:0 auto;display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:6px;box-shadow:var(--shadow)}
.nav button{flex:1;border:0;background:transparent;border-radius:16px;padding:7px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.72em;color:var(--sub);font-weight:600}
.nav button[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:800}

/* settings sheet */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:30}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--bg);border-radius:24px 24px 0 0;padding:10px max(18px,env(safe-area-inset-left,0px)) calc(18px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow-y:auto}
.sheet .in{max-width:520px;margin:0 auto}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 12px}
.sheet h2{font-size:1.15em;margin:0 0 14px}
.sheet h3{font-size:.85em;color:var(--sub);margin:16px 0 8px;font-weight:700}
.opts{display:grid;gap:6px}
.opts.three{grid-template-columns:repeat(3,1fr)}
.opt{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:11px 12px;text-align:left;font-weight:600}
.opts.three .opt{text-align:center}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:800}
.switch{display:flex;align-items:center;gap:12px;width:100%;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:12px 14px;text-align:left}
.switch .t{flex:1}
.switch .t b{display:block}
.switch .t span{font-size:.84em;color:var(--sub)}
.switch .k{width:46px;height:28px;border-radius:999px;background:var(--line);position:relative;flex:0 0 auto;transition:background .2s}
.switch .k::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch[aria-checked="true"] .k{background:var(--accent)}
.switch[aria-checked="true"] .k::after{transform:translateX(18px)}

/* simple view: fewer details, bigger targets, stronger contrast */
html.easy .chip i,html.easy .route .meta,html.easy .row .mini,html.easy .seg,html.easy .line,html.easy .row .ko{display:none}
html.easy .dests button{padding:14px 20px;font-size:1.05em}
html.easy .rb.big{font-size:1.25em}
html.easy .hub{min-height:140px}
html.easy .card{border-width:2px}

button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.search input:focus-visible{outline:none}

/* v4: 출발·도착 */
.fromcard{display:flex;align-items:center;gap:12px;background:var(--accent-soft);border-radius:18px;padding:12px 14px;margin:4px 0 6px}
.fromcard .ic{width:38px;height:38px;border-radius:12px;background:var(--card);display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
.fromcard .txt{flex:1;min-width:0}
.fromcard small{display:block;font-size:.76em;color:var(--accent);font-weight:800}
.fromcard b{display:block;font-size:1.02em}
.fromcard.empty b{color:var(--sub);font-weight:600}
.link{border:0;background:var(--card);color:var(--accent);font-weight:800;border-radius:999px;padding:8px 14px;font-size:.88em;flex:0 0 auto}
h2.sec.big{font-size:1.3em;margin:22px 0 10px}
h3.sub{font-size:.88em;color:var(--sub);font-weight:700;margin:18px 2px 8px}
.row .hint{display:block;font-size:.8em;color:var(--accent);font-weight:700;margin-top:2px}
.row .dist{font-size:.8em;color:var(--sub);flex:0 0 auto}
.nearest{display:grid;gap:6px}
.nearest small{color:var(--accent);font-weight:800;font-size:.8em}
.nearest b{font-size:1.2em}
.trip{position:relative;background:var(--canvas);border-radius:22px;padding:14px 16px}
.leg{display:flex;align-items:flex-start;gap:12px;padding:6px 0}
.leg>div{flex:1;min-width:0}
.leg small{display:block;font-size:.76em;color:var(--accent);font-weight:800}
.leg b{display:block;font-size:1.25em;line-height:1.3}
.leg .ko{display:block;font-size:.84em;color:var(--sub)}
.leg .dot{width:12px;height:12px;border-radius:50%;border:3px solid var(--accent);background:var(--bg);margin-top:20px;flex:0 0 auto}
.leg .dot.end{background:var(--accent)}
.leg+.swap+.leg{border-top:1px solid var(--line)}
.swap{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--sub);display:grid;place-items:center;box-shadow:var(--shadow)}
.trip .link{margin-top:14px}
.trip .leg:first-child .link{margin-right:44px}
.trip .leg:last-of-type .link{margin-right:44px}
.tf{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:6px}
.tf:first-of-type{border-top:0}
.tfleg{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.tfleg span[lang]{font-size:.84em;color:var(--sub);margin-left:4px}
.tfvia{display:flex;align-items:center;gap:6px;font-size:.84em;font-weight:700;color:var(--warn-fg)}
html.easy .row .hint{font-size:.9em}

/* v5: 설정 → 안내 */
.info{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.inf{border-top:1px solid var(--line)}
.inf:first-child{border-top:0}
.inf summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.inf summary::-webkit-details-marker{display:none}
.inf summary b{flex:1;font-size:.92em}
.inf summary svg:first-child{color:var(--accent)}
.inf summary svg:last-child{color:var(--faint);transition:transform .2s}
.inf[open] summary svg:last-child{transform:rotate(90deg)}
.inf p{margin:0;padding:0 14px 14px 42px;font-size:.86em;color:var(--sub)}

/* v6: 실시간 목록 */
.arr .am{display:flex;flex-direction:column;min-width:0}
.arr .as{font-size:.78em;color:var(--sub);line-height:1.35}
.arr .st{flex:0 0 auto}

/* v7: 알려주기 */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:12px;text-align:left;min-height:84px}
.cat svg{color:var(--accent)}
.cat b{font-size:.9em;line-height:1.3}
.cat[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.cats .cat:last-child:nth-child(odd){grid-column:span 2;min-height:0;flex-direction:row;align-items:center}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:9px 14px;font-size:.88em;font-weight:600}
.pill[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:800}
.field{width:100%;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:12px;padding:12px;font:inherit;font-size:.95em}
textarea.field{resize:vertical;min-height:96px;line-height:1.5}
.field:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.err{margin:10px 2px 0;color:var(--warn-fg);background:var(--warn-bg);border-radius:10px;padding:8px 12px;font-size:.86em;font-weight:600}
.done{text-align:center;padding:18px 6px 20px;color:var(--accent)}
.done h2{color:var(--fg);margin:10px 0 6px}
.done p{color:var(--sub);margin:0 0 6px;font-size:.92em}
.done svg{margin:0 auto}
.btn[disabled]{opacity:.6}

/* v8: 실시간 새로고침, 전송 알림 */
.lh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lh h3{margin:0;flex:1}
.lh .upd{font-size:.76em;color:var(--sub)}
.refresh{width:36px;height:36px;border-radius:50%;border:0;background:var(--card);color:var(--live);display:grid;place-items:center;flex:0 0 auto}
.refresh.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:12px;font-weight:700;font-size:.92em;box-shadow:0 6px 20px rgba(0,0,0,.2);transition:opacity .4s;max-width:calc(100% - 32px)}
.toast.out{opacity:0}

/* v9: 불러오는 중 점 3개 (차례로 밝아짐) */
.refresh .dots{display:flex;gap:3px}
.refresh .dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.25;animation:dot 1.1s ease-in-out infinite}
.refresh .dots i:nth-child(2){animation-delay:.18s}
.refresh .dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.refresh .dots i{animation-duration:2.4s;transform:none!important}}

/* 로고 */
.bar h1.brand{font-size:1.45em;font-weight:800;letter-spacing:-.03em;color:var(--accent);display:flex;align-items:baseline;gap:8px}
.bar h1.brand small{font-size:.5em;font-weight:600;letter-spacing:0;color:var(--sub)}

/* v10: 앱 설치 */
.install{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:10px 10px 10px 12px;margin:8px 0 0}
.appic{width:40px;height:40px;border-radius:11px;background:#3b5bfd;color:#fff;font-weight:900;font-size:11px;letter-spacing:-.3px;display:grid;place-items:center;flex:0 0 auto}
.appic.sm{width:34px;height:34px;font-size:9.5px;border-radius:9px}
.install .txt{flex:1;min-width:0}
.install b{display:block;font-size:.92em}
.install small{display:block;font-size:.78em;color:var(--sub)}
.link.solid{background:var(--accent);color:var(--accent-ink)}
.install .x{border:0;background:transparent;color:var(--faint);font-size:1.3em;width:30px;height:30px;border-radius:50%;flex:0 0 auto}
.switch svg:last-child{color:var(--faint);flex:0 0 auto}
.isteps{margin:6px 0 0;padding-left:1.3em;line-height:1.7}
.isteps li{margin:4px 0}
html.app-mode .install{display:none}

/* v10: 넓은 화면 (태블릿 세로 이상) */
h3.sub.first,h2.sec.first{margin-top:4px}
@media (min-width:720px){
  .app{max-width:720px}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(540px,92vw);border-radius:24px;max-height:86vh;box-shadow:0 20px 60px rgba(0,0,0,.25)}
  .sheet .grab{display:none}
  .nav .in{max-width:720px}
}
/* PC·태블릿 가로: 왼쪽 메뉴 + 두 칸 */
@media (min-width:1000px){
  body{font-size:calc(15.5px*var(--scale))}
  .app{max-width:1180px;padding-left:max(132px,calc(env(safe-area-inset-left,0px) + 132px));padding-right:32px;padding-bottom:40px}
  .nav{top:20px;bottom:auto;right:auto;left:20px;width:auto;padding:0;background:transparent}
  .nav .in{flex-direction:column;gap:4px;width:84px;padding:8px;border-radius:22px;margin:0}
  .nav button{flex:0 0 auto;padding:12px 4px;font-size:.74em}
  .cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start}
  .colA{position:sticky;top:12px}
  .colB>:first-child{margin-top:0}
  .colB .card:first-child{margin-top:0}
  .colB .tell:first-child{margin-top:0}
  .hubs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .toast{bottom:32px}
  .bar{min-height:60px}
}
@media (min-width:1400px){ .app{max-width:1280px} }

/* v11: 인터넷 끊김 */
:root{--bad:#e5484d;--bad-bg:#fdecec}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bad:#ff6b6f;--bad-bg:#3a1a1c}}
:root[data-theme="dark"]{--bad:#ff6b6f;--bad-bg:#3a1a1c}
.offbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:8px;background:var(--bad-bg);color:var(--bad);font-weight:800;font-size:.9em;border-radius:12px;padding:10px 14px;margin:6px 0 2px}
.offbar svg{flex:0 0 auto}
.live:has(.offline-live){background:var(--bad-bg)}
.live:has(.offline-live) h3{color:var(--bad)}
.live:has(.offline-live) h3 i{background:var(--bad);animation:none}
.offline-live{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 6px 6px;color:var(--bad)}
.offline-live b{color:var(--fg);font-size:1.02em}
.offline-live span{color:var(--sub);font-size:.86em}
.err.off{display:flex;align-items:center;gap:8px;color:var(--bad);background:var(--bad-bg)}
.err.off svg{flex:0 0 auto}

/* v12: 위치 권한 없음 */
.locerr{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:12px;background:var(--bad-bg);color:var(--bad);border-radius:18px;padding:16px 14px}
.locerr.soft{background:var(--warn-bg);color:var(--warn-fg)}
.locerr b{color:var(--fg);font-size:1.02em}
.locerr>span{color:var(--sub);font-size:.86em}
.locerr .btn{margin-top:6px;background:var(--card)}
.how{width:100%;text-align:left;background:var(--card);border-radius:12px;margin-top:6px;color:var(--fg)}
.how summary{padding:10px 12px;font-weight:700;font-size:.88em;cursor:pointer;color:var(--accent)}
.how ol{margin:0;padding:0 14px 12px 32px;font-size:.86em;line-height:1.6;color:var(--sub)}
.how li{margin:3px 0}

/* v13: 운행 상태 */
.none-live{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px 6px 4px;color:var(--live)}
.none-live b{color:var(--fg);font-size:1.02em}
.none-live span{color:var(--sub);font-size:.86em}
.route .tag{grid-column:2;justify-self:start;font-size:.74em;font-weight:800;border-radius:6px;padding:2px 8px;background:var(--canvas);color:var(--sub)}
.route .tag.soft{background:var(--accent-soft);color:var(--accent)}
.route.done{opacity:.55}