/* 슝 skin: yellow brand, round and soft UI.
   Linked from <body> so it comes after every <style> the runtime adds to <head> (same specificity → this wins).
   색 · 글자 · 간격 · 둥글기 · 그림자 · 움직임 · 포커스 값은 디자인 토큰(web/tokens/tokens.css — 바로 앞에서 부른다)의 var(--…) 로 쓴다.
   토큰은 원본 web/tokens/tokens.json 을 고치고 node tools/tokens/make.mjs 로 만든다. 한 곳에서만 쓰는 값은 그대로 숫자로 둔다 */

::selection{background:var(--syung);color:var(--syung-ink)}
:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset);border-radius:var(--radius-12)}

/* ---- header: the yellow bar ---- */
.mast{background:var(--syung);color:var(--syung-ink);border-bottom:0;box-shadow:0 2px 0 rgba(20,20,20,.12);position:relative;z-index:10}
.brand-icon{width:42px;height:42px;border-radius:var(--radius-12);box-shadow:0 2px 0 rgba(20,20,20,.18);transition:transform var(--duration-250) cubic-bezier(.3,1.6,.5,1)}
.identity:hover .brand-icon{transform:translateX(3px) rotate(-6deg)}
.identity h1{font-family:var(--round);font-weight:var(--weight-regular);font-size:28px;letter-spacing:.02em;line-height:1}
.identity p{color:#5b4c00;font-size:var(--text-12-5);font-weight:var(--weight-semibold);margin-top:var(--space-1)}
.source-state{background:rgba(255,255,255,.55);color:var(--syung-ink);font-weight:var(--weight-semibold);padding:6px var(--space-3) 6px 10px;border-radius:var(--radius-pill)}
.source-state i{box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.source-state[data-state=ok] i{animation:syung-pulse 2s ease-in-out infinite}
@keyframes syung-pulse{50%{transform:scale(1.35)}}
/* settings (gear); the live status line stays in the DOM, hidden, for the runtime to write to */
.source-state[hidden]{display:none!important}
.settings-button{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-10);background:transparent;color:inherit;cursor:pointer}
.settings-button svg{width:24px;height:24px;transition:transform .3s}
.refresh-button{margin-left:auto}
.zoom-badge{margin-left:auto;font:600 12px/1 ui-monospace,Menlo,monospace;padding:6px var(--space-2);border-radius:var(--radius-pill);background:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}   /* current map zoom, for checking views */
html[data-theme=dark] .zoom-badge{background:rgba(255,212,0,.1)}
.zoom-badge+.refresh-button{margin-left:-12px}
.refresh-button+.settings-button{margin-left:-16px}   /* the pair sits together: 4px between the 40px targets, not the header's 20px */
.refresh-button.spin svg{transform:rotate(360deg);transition:transform var(--duration-600)}
.settings-button:hover{background:rgba(20,20,20,.08)}
html[data-theme=dark] .settings-button:hover{background:rgba(255,212,0,.12)}
/* 설정 서랍: 오른쪽에서 밀려 나온다. hidden 이면 닫힘(버스 층도 hidden 으로 닫는다), .open 이 붙으면 다 나온 자리.
   body 바로 아래라 지도 위 층(map-status 800 · error 1000)보다 위에 뜬다 */
.settings-panel{position:fixed;z-index:1100;top:0;right:0;bottom:0;width:min(340px,86vw);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);box-shadow:-6px 0 24px rgba(20,20,20,.18);border-radius:var(--radius-18) 0 0 var(--radius-18);transform:translateX(100%);transition:transform var(--duration-260) var(--ease-standard);padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px)}
.settings-panel.open{transform:none}
.settings-panel[hidden]{display:none}
.menu-scrim{position:fixed;z-index:1099;inset:0;background:rgba(20,20,20,.32);opacity:0;pointer-events:none;transition:opacity var(--duration-260)}
.settings-panel.open+.menu-scrim{opacity:1;pointer-events:auto}
.settings-panel[hidden]+.menu-scrim{display:none}
.menu-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:56px;padding:var(--space-2) var(--space-2) var(--space-1) 18px}
.settings-panel h2{margin:0;font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-20);color:var(--ink)}
.menu-close{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-10);background:transparent;color:var(--secondary);cursor:pointer}
.menu-close svg{width:22px;height:22px}
.menu-close:hover{background:var(--control)}
.menu-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;padding:0 var(--space-2) calc(var(--space-4) + env(safe-area-inset-bottom,0px))}
/* 두 단계: 첫 단계 목록(.menu-item) → 그 쪽(.menu-page). 들어가면 오른쪽에서, 돌아오면 왼쪽에서 살짝 밀려 온다 */
.menu-back{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;margin-left:-10px;border:0;border-radius:var(--radius-10);background:transparent;color:var(--ink);cursor:pointer}
.menu-back[hidden]{display:none}
.menu-back svg{width:24px;height:24px}
.menu-back:hover{background:var(--control)}
.menu-head h2{flex:1;min-width:0}
.menu-list,.menu-page{padding:var(--space-1) 0}
.menu-nav{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--rule)}   /* 첫 화면: 위는 테마, 선 아래는 들어가는 목록 */
/* 테마: 하늘 그림 띠(늘) → 넓은 세그먼트(자동 · 라이트 · 다크, 아이콘 + 글, 고른 쪽 노랑 + ✓) → 지금 상태 한 줄. 안 고른 글씨도 진하게 */
.menu-label{margin:var(--space-1) 10px var(--space-2);font-size:var(--text-12);line-height:1.5;font-weight:var(--weight-bold);color:var(--secondary)}
.theme-seg{display:flex;margin:0 var(--space-1);padding:var(--space-1);border-radius:var(--radius-pill);background:var(--control)}
.theme-seg button{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink);font:inherit;font-size:var(--text-15);font-weight:var(--weight-bold);white-space:nowrap;cursor:pointer;transition:background var(--duration-150)}
.theme-seg svg{flex:none;width:18px;height:18px}
.theme-seg button:hover{background:var(--selected)}
.theme-seg button[aria-pressed=true]{background:var(--syung);color:var(--syung-ink);box-shadow:var(--shadow-knob)}
.theme-seg button[aria-pressed=true]:after{content:"✓";font-size:var(--text-13)}
@media(prefers-reduced-motion:reduce){.theme-seg button{transition:none}}
.sun-path{position:relative;height:110px;margin:0 var(--space-1) 10px;border-radius:var(--radius-14);overflow:hidden}   /* 하늘 그림 띠: 테마 위, 늘 보임 */
.sun-path svg{position:absolute;inset:0;width:100%;height:100%}
.sun-times{position:absolute;left:12px;right:12px;bottom:5px;display:flex;justify-content:space-between;font-size:var(--text-12);font-weight:var(--weight-bold);color:#4a3d00;font-variant-numeric:tabular-nums}
.sun-path.is-night .sun-times{color:#e6edf5}
.theme-note{margin:10px 10px 2px;font-size:var(--text-13);line-height:1.5;color:var(--secondary)}
.theme-note b{color:var(--ink)}
.menu-list[hidden],.menu-page[hidden]{display:none}
/* 데이터 출처 쪽: 무엇 · 어디서 · 링크를 줄마다 */
.source-list{margin:0;padding:0 10px;list-style:none}
.source-list li{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) 0;border-bottom:1px solid var(--rule);font-size:var(--text-14);line-height:1.5;color:var(--secondary)}
.source-list li:last-child{border-bottom:0}
.source-list b{font-size:var(--text-15);color:var(--ink)}
.source-list a{color:var(--ink);text-underline-offset:2px}
.menu-item{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:0 10px;border:0;border-radius:var(--radius-12);background:transparent;color:inherit;font:inherit;font-size:var(--text-16);font-weight:var(--weight-semibold);text-align:left;cursor:pointer}
.menu-item:hover{background:var(--control)}
.menu-item:active{background:var(--selected)}
.menu-chev{flex:none;width:20px;height:20px;color:var(--muted)}
.menu-in{animation:menu-in var(--duration-220) var(--ease-standard)}
.menu-out{animation:menu-out var(--duration-220) var(--ease-standard)}
@keyframes menu-in{from{transform:translateX(28px);opacity:0}}
@keyframes menu-out{from{transform:translateX(-28px);opacity:0}}
@media(prefers-reduced-motion:reduce){.settings-panel,.menu-scrim{transition:none}.menu-in,.menu-out{animation:none}}
.setting-switch{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 10px;border:0;border-radius:var(--radius-12);background:transparent;color:inherit;font:inherit;font-size:var(--text-14);font-weight:var(--weight-semibold);text-align:left;cursor:pointer}
.setting-switch:hover{background:var(--control)}
.setting-icon{display:grid;place-items:center;width:20px;height:20px;color:var(--secondary)}
.setting-icon svg{width:18px;height:18px}
.setting-name{flex:1;min-width:0}
.switch{position:relative;flex:none;width:44px;height:26px;border-radius:var(--radius-pill);background:var(--rule);transition:background var(--duration-200)}
.switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-circle);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--duration-200)}
.setting-switch[aria-pressed=true] .switch{background:var(--syung)}
.setting-switch[aria-pressed=true] .switch:after{transform:translateX(18px)}
html[data-theme=dark] .switch{background:#3a3c40}
.setting-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 10px;font-size:var(--text-14);font-weight:var(--weight-semibold)}
.setting-row[hidden]{display:none}   /* 열차 속도: only while 롤러코스터 is on (display:flex above beat the hidden attribute) */
.setting-name small{display:block;white-space:pre-line;margin-top:1px;font-size:var(--text-11);font-weight:var(--weight-medium);color:var(--muted)}
/* bus: the existing switch, map notice and shared detail sheet use the same theme. */
.bus-notice{position:absolute;z-index:5;left:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 84px);margin:0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-12);background:var(--paper);color:var(--secondary);box-shadow:var(--shadow);font-size:var(--text-12);line-height:1.5;pointer-events:none}
.bus-notice[hidden]{display:none}
.bus-detail{padding:0 0 var(--space-1);font-variant-numeric:tabular-nums}
.bus-detail h3{padding-right:32px;overflow-wrap:anywhere}
.bus-type{color:var(--bus-color);font:600 14px/1.5 "Noto Sans KR","Apple SD Gothic Neo",sans-serif;vertical-align:middle}
.bus-detail-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-4);margin:var(--space-3) 0;font-size:var(--text-14);line-height:1.5}
.bus-detail-grid dt{color:var(--secondary)}
.bus-detail-grid dd{margin:0;font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.bus-detail-grid small{display:block;font-size:var(--text-12);font-weight:var(--weight-regular);color:var(--secondary)}
.bus-detail-note{margin:var(--space-2) 0 0;font-size:var(--text-12);line-height:1.6;color:var(--secondary)}
/* 정류장 시트 맨 위: 고른 번호의 상태 칸(2026-10-17 덕배 · Codex) — 따라가는 중은 먹색 칸 위 노랑 점, 그 밖은 연한 칸. 버튼 44 px */
.bus-follow{margin:var(--space-2) 0 0;padding:var(--space-2) 10px 10px;border-radius:var(--radius-14);background:var(--syung-ink);color:#fffdf6}
.bus-follow-state{display:flex;align-items:center;gap:var(--space-2);margin:0;font-size:var(--text-14);line-height:1.35}
.bus-follow-state .bus-num{flex:none;height:26px}
.bus-follow-text{display:flex;flex-direction:column;min-width:0}
.bus-follow-text b{font-weight:var(--weight-bold)}
.bus-follow-text span{font-size:var(--text-12);opacity:.78}
.bus-follow-dot{flex:none;width:10px;height:10px;border-radius:var(--radius-circle);background:var(--syung);animation:syung-pulse var(--duration-1400) ease-in-out infinite}
.bus-follow-actions{display:flex;gap:6px;margin-top:var(--space-2)}
.bus-follow-actions button{flex:1;min-width:0;min-height:44px;padding:0 var(--space-2);border:0;border-radius:var(--radius-12);background:var(--syung);color:var(--syung-ink);font:inherit;font-size:var(--text-14);font-weight:var(--weight-bold);cursor:pointer}
.bus-follow-actions button[data-bus-stop-view=stop]{background:rgba(255,253,246,.14);color:#fffdf6}
.bus-follow.is-off{background:var(--control);color:var(--ink)}
.bus-follow.is-off .bus-follow-actions button{background:var(--syung-ink);color:#fffdf6}
.bus-follow.is-off .bus-follow-actions button[data-bus-stop-view=stop]{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
html[data-theme=dark] .bus-follow{background:#2b2d30}
html[data-theme=dark] .bus-follow.is-off .bus-follow-actions button:not([data-bus-stop-view=stop]){background:var(--syung);color:var(--syung-ink)}
.bus-stop.is-following .bus-follow{margin-top:0}
/* 버스 따라가기 · 따라가기 집중(2026-10-20 덕배가 고른 Codex 2차 시안 02, 노란 머리 띠는 그대로): 시트 · 검색창 · 지도 버튼을 내리고 아래 한 칸만 */
.sheet.open.tucked{transform:translateY(calc(105% + var(--kb,0px)))!important;pointer-events:none}
body.bus-following .route-cta,body.bus-following .map-search,body.bus-following .maplibregl-ctrl-top-right{display:none}
.bus-follow-ui{position:absolute;inset:0;z-index:7;pointer-events:none}
.bfu-panel{position:absolute;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:480px;margin:0 auto;box-sizing:border-box;padding:11px var(--space-3) var(--space-3);border-radius:var(--radius-18);background:var(--paper);color:var(--ink);box-shadow:var(--shadow);pointer-events:auto}
.bfu-line{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.bfu-line .bus-num{flex:none;height:30px;min-width:48px;padding:0 var(--space-2);font-size:var(--text-19);border-radius:var(--radius-8)}
.bfu-stop{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-15);font-weight:var(--weight-bold)}
.bfu-to{flex:none;font-size:var(--text-12-5);color:var(--secondary)}
.bfu-note{color:var(--ink);font-weight:var(--weight-bold)}
.bfu-eta-s{font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-15);color:var(--ink)}
.bfu-eta{flex:none;font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-22);line-height:1;white-space:nowrap}
.bfu-more{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-width:44px;min-height:44px;margin-block:-8px;padding:0 10px;border:0;border-radius:var(--radius-12);background:var(--control);color:var(--ink);font:inherit;font-size:var(--text-12);font-weight:var(--weight-bold);cursor:pointer}
.bfu-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duration-200)}
.bfu-more[aria-expanded=true] svg{transform:rotate(180deg)}
.bfu-line2{display:flex;align-items:center;gap:var(--space-2);min-height:44px;margin-top:2px;font-size:var(--text-12);color:var(--secondary)}
.bfu-lead{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bfu-lead b{color:var(--ink)}
.bfu-state,.bfu-sub{margin-left:auto;white-space:nowrap}
.bfu-state{display:inline-flex;align-items:center;gap:6px;font-weight:var(--weight-bold);color:var(--ink)}
.bfu-state i{width:9px;height:9px;box-sizing:border-box;border-radius:var(--radius-circle);background:var(--syung);border:2px solid var(--syung-ink);animation:syung-pulse var(--duration-1400) ease-in-out infinite}
.bfu-state.off i{background:none;border-color:var(--secondary);animation:none}
.bfu-details{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);font-size:var(--text-12-5);line-height:1.75;color:var(--secondary)}
.bfu-details p{margin:0}.bfu-details b{color:var(--ink);font-weight:var(--weight-bold)}
.bfu-controls{display:flex;gap:7px;margin-top:6px}
.bfu-controls button{flex:1;min-width:0;min-height:44px;padding:0 var(--space-2);border:0;border-radius:var(--radius-12);background:var(--control);color:var(--ink);font:inherit;font-size:var(--text-14);font-weight:var(--weight-bold);cursor:pointer}
.bfu-controls button.primary{background:var(--syung);color:var(--syung-ink)}
.bfu-controls button.outline{background:none;box-shadow:inset 0 0 0 1px var(--rule)}
/* 노선 전체 칸: 배경 없는 화살표만, 카드 오른쪽 위 모서리에(누르는 자리는 44 px 그대로, 행님 2026-10-20) */
.bfu-more.icon{position:absolute;top:2px;right:2px;width:44px;padding:0;margin:0;background:none;color:var(--secondary)}
.bfu-more.icon:hover{color:var(--ink)}
.bfu-more.icon svg{width:20px;height:20px}
.bfu-line:has(>.bfu-more.icon){padding-right:30px}
.bfu-panel button:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
@media (prefers-reduced-motion:reduce){.bfu-state i{animation:none}.bfu-more svg{transition:none}}
.bus-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.bus-follow-dot{animation:none}}
.bus-route-list{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:var(--space-3) 0;font-size:var(--text-13);line-height:1.6}
.bus-route-list button{min-height:44px;min-width:64px;padding:var(--space-2) var(--space-3);border:1px solid var(--rule);border-radius:var(--radius-12);background:var(--paper);color:var(--bus-color);font:inherit;cursor:pointer}
.bus-route-list button:hover{background:var(--control)}
.bus-route-list button[aria-pressed=true]{background:var(--selected);border-color:var(--bus-color)}
.bus-route-list button:active{background:var(--control)}
.bus-route-list button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* 버스 정류장 팝업(2026-10-07 행님 시안): 번호 배지 · 이름 · 새로고침 / 곧 도착 카드 / 한 줄 목록 / 운행 종료 */
.bus-stop{--hero:#141414;--hero-line:#4a4a44;--hero-dim:#2c2b27;--hero-text:#d9d4c3;--hero-muted:#a9a497}
html[data-theme=dark] .bus-stop{--hero:#26282c;--hero-line:#5a5b57;--hero-dim:#3a3b3d}
.bus-stop-head{display:flex;align-items:flex-end;gap:var(--space-3)}
.bus-stop-title{flex:1;min-width:0}
.bus-stop-no{display:inline-flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1);padding:2px 9px 2px 7px;border:1px solid var(--rule);border-radius:var(--radius-pill);font-size:var(--text-12);font-weight:var(--weight-extrabold);font-variant-numeric:tabular-nums;color:var(--secondary)}
.bus-stop-no svg{width:13px;height:13px}
.sheet .bus-stop h3{margin:0;font-size:var(--text-26);line-height:1.2;padding-right:0}
.bus-refresh{flex:none;display:flex;align-items:center;gap:5px;height:32px;margin:0 -6px -6px 0;padding:0 6px;border:0;background:none;color:var(--secondary);font:inherit;font-size:var(--text-11);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;cursor:pointer}
.bus-refresh svg{width:16px;height:16px}
.bus-refresh.is-loading svg{animation:bus-spin .8s linear infinite}
@keyframes bus-spin{to{transform:rotate(360deg)}}
.bus-refresh:focus-visible{outline:var(--focus-width-thin) solid var(--focus);outline-offset:var(--focus-offset);border-radius:var(--radius-8)}
.bus-num{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:24px;padding:0 var(--space-2);border-radius:var(--radius-7);background:var(--c);color:#fff;font-family:var(--round);font-size:var(--text-16);line-height:1;white-space:nowrap}
.bus-num-more{background:none;border:1px solid #6b6a62;color:#fffdf6}
.bus-num.bus-num-long{padding:0 var(--space-1);font-size:var(--text-12);letter-spacing:-.02em}
.bus-hero-head .bus-num.bus-num-long{font-size:var(--text-14)}
.bus-hero{display:block;width:100%;box-sizing:border-box;margin-top:10px;padding:var(--space-4);border:0;border-radius:20px;background:var(--hero);color:#fffdf6;font:inherit;text-align:left}
button.bus-hero{cursor:pointer}
button.bus-hero:focus-visible{outline:3px solid var(--syung);outline-offset:var(--focus-offset)}
.bus-hero-head{display:flex;align-items:center;gap:5px var(--space-2);overflow:hidden}
.bus-hero-head .bus-num{flex:none;height:26px;font-size:var(--text-18);padding:0 10px}
.bus-hero-head.is-many{gap:5px}
.bus-hero-head.is-many .bus-num{height:24px;font-size:var(--text-16);padding:0 var(--space-2)}   /* 여러 대: 시안처럼 작게, 들어가는 만큼만(bus_layer 의 폭 계산과 맞춤) */
.bus-hero-head.is-many .bus-num.bus-num-long{font-size:var(--text-13);padding:0 6px}
.bus-hero-dir{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-13);font-weight:var(--weight-bold);color:var(--hero-text)}
.bus-hero-on{flex:none;margin-left:auto;font-size:var(--text-12);font-weight:var(--weight-bold);color:var(--syung)}
.bus-hero-now{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.bus-hero-soon{font-family:var(--round);font-size:var(--text-36);line-height:1;color:var(--syung)}
.bus-hero-next{margin-left:auto;font-size:var(--text-12);color:var(--hero-muted)}
/* 정거장 점 3개: 이전(왼쪽 끝) · 이 정류장(가운데) · 다음(오른쪽 끝), 버스는 이전과 이 정류장 사이 */
.bus-track{position:relative;display:block;height:22px;margin-top:18px}
.bus-track::before,.bus-track::after{content:"";position:absolute;top:10px;height:2px}
.bus-track::before{left:4px;right:50%;background:var(--hero-line)}
.bus-track::after{left:50%;right:4px;background:var(--hero-dim)}
.bus-track-from,.bus-track-to{position:absolute;top:7px;width:8px;height:8px;border-radius:var(--radius-circle);z-index:1}
.bus-track-from{left:0;background:#6b6a62}
.bus-track-to{right:0;background:var(--hero-line)}
.bus-track-here{position:absolute;z-index:1;left:50%;top:2px;width:18px;height:18px;margin-left:-9px;box-sizing:border-box;border-radius:var(--radius-circle);background:var(--syung);border:3px solid #fffdf6}
.bus-track-bus{position:absolute;z-index:2;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:22px;margin-left:-15px;border-radius:var(--radius-7);background:#3567C8;color:#fff;transition:left 1s linear}
.bus-track-bus svg{width:16px;height:16px}
@media(prefers-reduced-motion:reduce){.bus-track-bus{transition:none}.bus-refresh.is-loading svg{animation:none}}
.bus-track-names{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:6px;margin-top:var(--space-2);font-size:var(--text-11);line-height:1.3}
.bus-track-names>*{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bus-track-names span:first-child{text-align:left;color:var(--hero-muted)}
.bus-track-names b{text-align:center;font-size:var(--text-12);color:var(--syung)}
.bus-track-names span:last-child{text-align:right;color:#8a8676}
/* 한 줄 목록: 번호 · 방면(막차 꼬리표) · N번째 전 · 흐르는 남은 시간 */
.sheet-body:has(.bus-rows){margin:0 -12px;padding:0 var(--space-3)}   /* 눌림 배경이 좌우 8px 밖으로 나가도 잘리지 않게(.journey 와 같은 방법) */
.bus-rows{margin-top:6px}
.bus-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:10px;width:calc(100% + 16px);box-sizing:border-box;min-height:48px;margin:0 -8px;padding:6px var(--space-2);border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;color:var(--ink);font:inherit;text-align:left}
.bus-row .bus-num{height:28px}
button.bus-row{cursor:pointer;-webkit-tap-highlight-color:transparent}
button.bus-row:hover{background:var(--control)}
button.bus-row[aria-pressed=true]{background:var(--selected);border-radius:var(--radius-12);border-bottom-color:transparent}
button.bus-row:focus-visible{outline:var(--focus-width-thin) solid var(--focus);outline-offset:-2px;border-radius:var(--radius-12)}
.bus-row-dir{min-width:0;display:flex;align-items:center;gap:6px;white-space:nowrap}
.bus-row-dir>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--text-14);font-weight:var(--weight-bold)}
.bus-tag{flex:none;padding:0 5px;border:1px solid var(--rule);border-radius:var(--radius-5);font-size:var(--text-11);font-weight:var(--weight-bold);color:var(--secondary)}
.bus-row-time{display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.bus-away{font-size:var(--text-12);color:var(--secondary)}
.bus-eta{min-width:76px;text-align:right;font-size:var(--text-16);font-weight:var(--weight-extrabold);font-variant-numeric:tabular-nums}
.bus-soon{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--radius-pill);background:var(--syung);color:var(--syung-ink);font-family:var(--round);font-size:var(--text-15);line-height:1}
.bus-wait{display:block;width:64px;height:14px;border-radius:var(--radius-6);background:var(--control)}
.bus-ended{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--space-2);padding-top:var(--space-3);font-size:var(--text-13);color:var(--secondary)}
.bus-ended>span:first-child{font-weight:var(--weight-bold)}
.bus-ended button,.bus-ended>span+span{min-height:32px;padding:0 9px;border:1px solid var(--rule);border-radius:var(--radius-8);background:none;color:var(--secondary);font:inherit;font-weight:var(--weight-bold);cursor:pointer}
.bus-ended>span+span{display:inline-flex;align-items:center;cursor:default}
.bus-ended button[aria-pressed=true]{background:var(--selected);color:var(--ink)}
.setting-value{min-width:34px;padding:3px 10px;border-radius:var(--radius-pill);background:var(--control);font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-14);text-align:center;font-variant-numeric:tabular-nums}
.segmented{flex:none;display:flex;padding:3px;border-radius:var(--radius-pill);background:var(--control)}
.segmented button{white-space:nowrap;padding:5px 9px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--secondary);font:inherit;font-size:var(--text-12);font-weight:var(--weight-bold);cursor:pointer}
.segmented button[aria-pressed=true]{background:var(--syung);color:var(--syung-ink)}
/* city-design: one optional city mode at a time, using the existing switch vocabulary. */
.setting-modes .setting-switch{min-height:56px;padding-block:var(--space-2)}
.setting-modes .setting-switch[aria-pressed=true]{background:var(--selected)}
.setting-modes .setting-switch:hover{background:var(--control)}
.setting-modes .setting-switch[aria-pressed=true]:hover{background:var(--selected)}
.setting-modes .setting-switch:active{transform:scale(.99)}
.setting-modes .setting-switch:disabled{opacity:.55;cursor:wait}
.setting-modes .setting-icon{flex:none}
.setting-modes .setting-name small,.setting-modes #speedNote{color:var(--secondary);font-size:var(--text-12);line-height:1.5}
.setting-help{margin:var(--space-2) 10px var(--space-1);font-size:var(--text-12);line-height:1.6;color:var(--secondary)}
@media(prefers-reduced-motion:reduce){.setting-modes .setting-switch:active{transform:none}}
/* my location: bottom right */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group{margin:0 10px 18px 0}
html[data-theme=dark] .mast{background:#1b1c1f;color:var(--syung);box-shadow:0 2px 0 rgba(255,212,0,.35)}
html[data-theme=dark] .identity p{color:#c9c2a0}
html[data-theme=dark] .source-state{background:rgba(255,212,0,.1);color:#f1efe6}
html[data-theme=dark] .source-state i{box-shadow:0 0 0 3px rgba(255,212,0,.15)}

/* ---- full-width map; the line filter panel is gone, search floats on the map ---- */
.layout{grid-template-columns:minmax(0,1fr)!important}
.map-search{position:absolute;z-index:6;top:14px;left:14px;width:min(340px,calc(100% - 84px))}
.map-search input{box-shadow:var(--shadow);border-color:transparent!important;background:var(--paper)!important}
.map-search input:focus{border-color:var(--syung-deep)!important}
/* 지도 출처: 늘 펼친 한 줄(© OpenMapTiles © OpenStreetMap) — 열차 · 버스 자료 출처는 메뉴 '데이터 출처' 쪽 */
.maplibregl-ctrl.maplibregl-ctrl-attrib{border-radius:var(--radius-pill);background:var(--paper);color:var(--secondary);box-shadow:var(--shadow);margin:0 0 14px var(--space-3)!important;padding:1px 9px;font-size:var(--text-11);line-height:18px;white-space:nowrap}
/* 좁은 화면(780px 이하): 출처를 작게(글자 9px · 높이 13px) 화면 맨 아래(safe-area 위 3px)에 붙여 '어디로 갈까요?' 버튼 아래에 둔다.
   버튼 · 길찾기 막대는 출처 높이만큼만 올린다 — 아래 .jbar 뒤의 같은 폭 규칙 */
@media(max-width:780px){.maplibregl-ctrl.maplibregl-ctrl-attrib{margin:0 0 calc(3px + env(safe-area-inset-bottom,0px)) var(--space-2)!important;padding:0 6px;font-size:9px;line-height:13px}}
.maplibregl-ctrl-attrib a{color:inherit}
html[data-theme=dark] .maplibregl-ctrl-attrib-button{filter:invert(1)}

/* ---- search ---- */
.rail{background:var(--paper);border-right:0;box-shadow:2px 0 0 var(--rule)}
.search-wrap{border-bottom:0;padding-bottom:6px}
.search input{height:44px;border:2px solid var(--rule);border-radius:var(--radius-pill);background:var(--control);padding-left:42px;transition:border-color var(--duration-150),box-shadow var(--duration-150)}
.search input:focus{outline:0;border-color:var(--syung-deep);box-shadow:0 0 0 4px rgba(255,212,0,.35);background:var(--paper)}
.search svg{left:15px;top:13px;color:var(--muted)}
.filter-head strong{font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-15)}
.text-btn{text-decoration:none;background:var(--control);color:var(--secondary);padding:5px 11px;border-radius:var(--radius-pill);font-weight:var(--weight-semibold)}
.text-btn:hover{background:var(--syung);color:var(--syung-ink)}
.line-list{padding:6px 10px 10px;scrollbar-color:var(--rule) transparent}
.line-btn{grid-template-columns:18px 1fr auto;gap:10px;border-radius:var(--radius-14);min-height:40px;transition:background var(--duration-150),transform var(--duration-150)}
.line-btn:hover{background:var(--control)}
.line-btn:active{transform:scale(.97)}
.line-btn[aria-pressed=true]{background:var(--selected);font-weight:var(--weight-bold)}
.swatch{width:14px;height:14px;box-shadow:0 0 0 2.5px var(--paper),0 0 0 4px var(--line)}
.count{background:var(--control);border-radius:var(--radius-pill);padding:1px var(--space-2);font-size:var(--text-11);font-weight:var(--weight-semibold)}
.line-btn[aria-pressed=true] .count{background:rgba(255,255,255,.7)}
html[data-theme=dark] .line-btn[aria-pressed=true] .count{background:rgba(0,0,0,.3)}
.provenance{border-top:2px dashed var(--rule);font-size:var(--text-11-5)}
.provenance strong{font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-13)}
html[data-theme=dark] .search input{border-color:var(--rule);background:var(--control)}
html[data-theme=dark] .search input:focus{border-color:var(--syung);box-shadow:0 0 0 4px rgba(255,212,0,.2)}

/* ---- map controls: soft rounded pills ---- */
.maplibregl-ctrl-group{border-radius:var(--radius-16)!important;box-shadow:var(--shadow)!important;overflow:hidden;background:var(--paper)!important}
.maplibregl-ctrl-group button{width:34px!important;height:34px!important;transition:background var(--duration-150)}
.maplibregl-ctrl-group button:hover{background:var(--syung-soft)!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--rule)!important}
.maplibregl-ctrl-group .map-toggle,.maplibregl-ctrl-group .train-toggle{width:34px!important;height:34px!important}
.maplibregl-ctrl-group .map-toggle+.map-toggle,.maplibregl-ctrl-group .map-toggle+.train-toggle,.maplibregl-ctrl-group .train-toggle+.map-toggle{border-top:1px solid var(--rule)!important}
.maplibregl-ctrl-group .map-toggle[aria-pressed=true],.maplibregl-ctrl-group .train-toggle[aria-pressed=true]{color:var(--syung-ink)!important}
.maplibregl-ctrl-top-right .maplibregl-ctrl{margin:10px 10px 0 0}
html[data-theme=dark] .maplibregl-ctrl-group button:hover{background:rgba(255,212,0,.14)!important}
html[data-theme=dark] .maplibregl-ctrl-group .map-toggle[aria-pressed=true],html[data-theme=dark] .maplibregl-ctrl-group .train-toggle[aria-pressed=true]{color:var(--syung)!important}
.webgl-zoom{border:0!important;border-radius:var(--radius-pill)!important;background:var(--paper)!important;color:var(--ink)!important;box-shadow:var(--shadow);padding:6px 11px!important;font-family:var(--round);font-weight:var(--weight-regular)!important;font-size:var(--text-13)!important}
.live-notice{border-radius:var(--radius-pill)!important;border:0!important;background:var(--syung)!important;color:var(--syung-ink)!important;box-shadow:var(--shadow)!important;padding:var(--space-2) var(--space-4)!important}
/* 모드 바꾸는 중 게이지: 먹색 알약 + 노랑 막대(흰 바탕 위 노랑 금지라 바탕을 먹색으로) */
.mode-busy{position:fixed;z-index:30;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 10px;min-width:190px;padding:9px var(--space-4) 11px;border-radius:var(--radius-16);background:var(--syung-ink);color:#fff;box-shadow:var(--shadow);font-size:var(--text-12);pointer-events:none;animation:js-in var(--duration-180) ease-out}
.mode-busy[hidden]{display:none}
.mode-busy b{font:400 15px/1.2 var(--round)}
.mode-busy span{color:rgba(255,255,255,.72);text-align:right;font-variant-numeric:tabular-nums}
.mode-busy i{grid-column:1/-1;position:relative;height:4px;margin-top:6px;border-radius:var(--radius-2);background:rgba(255,255,255,.16);overflow:hidden}
.mode-busy em{position:absolute;inset:0 auto 0 0;border-radius:var(--radius-2);background:var(--syung);transition:width var(--duration-250) ease-out}
.mode-busy--wait em{width:40px;animation:jsk-run var(--duration-1100) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.mode-busy,.mode-busy--wait em{animation:none}.mode-busy--wait em{width:100%;opacity:.5}}
html[data-theme=dark] .live-notice{background:#2a2612!important;color:var(--syung)!important}
.live-notice{top:66px!important;max-width:calc(100% - 28px)!important;text-align:center}   /* under the search bar, not over it */

/* ---- popups (station, train) ---- */
.maplibregl-popup-content{border-radius:var(--radius-18)!important;padding:14px var(--space-4) var(--space-3)!important;box-shadow:var(--shadow)!important;background:var(--paper);color:var(--ink)}
.maplibregl-popup-tip{border-top-color:var(--paper)!important;border-bottom-color:var(--paper)!important}
.maplibregl-popup-close-button{width:26px;height:26px;border-radius:var(--radius-circle);margin:6px;font-size:var(--text-18);line-height:1;color:var(--muted)}
.maplibregl-popup-close-button:hover{background:var(--control)}
.maplibregl-popup-content h3,.maplibregl-popup-content strong:first-child{font-family:var(--round);font-weight:var(--weight-regular)}
.station-pop .exit{border-radius:var(--radius-8)!important;box-shadow:var(--shadow-edge-chip)}

/* ---- train tags: chunkier pills ---- */
.train-tag{border-radius:var(--radius-pill)!important;border-width:2px!important;box-shadow:var(--shadow-edge)!important}

/* ---- phone ---- */
@media(max-width:720px){
  body{overflow:hidden!important}
  .app{height:100%!important;grid-template-rows:62px minmax(0,1fr)!important}
  .layout{grid-template-rows:minmax(0,1fr)!important}
  .map-search{top:10px;left:10px;width:calc(100% - 20px)}
  .maplibregl-ctrl-top-right{top:54px}   /* +/− under the full-width search bar */
  .identity h1{font-size:var(--text-24)}
  .brand-icon{width:36px;height:36px;border-radius:var(--radius-10)}
  .line-btn{grid-template-columns:16px auto auto;min-height:34px;border:2px solid var(--rule);border-radius:var(--radius-pill);padding:3px 11px 3px var(--space-2)}
  .line-btn[aria-pressed=true]{border-color:var(--syung-deep)}
}

/* live-state dot */
.source-state[data-state=idle] i{background:#b3ad96}
.source-state[data-state=loading] i{background:#ff9f1a}
.source-state[data-state=ok] i{background:#1fbf6a}
.source-state[data-state=error] i{background:#ff5a4a}
html[data-theme=dark] .maplibregl-popup-content{background:var(--paper)}
html[data-theme=dark] .maplibregl-popup-tip{border-top-color:var(--paper);border-bottom-color:var(--paper)}

/* train popup: destination is the headline */
.train-inspect .tp-dest{font-family:var(--round);font-weight:var(--weight-regular)!important;font-size:var(--text-22)!important}
html[data-theme=dark] .train-inspect .tp-now,html[data-theme=dark] .train-inspect th{color:var(--secondary)}
html[data-theme=dark] .train-inspect .sec{color:var(--ink);border-bottom-color:var(--rule)}

/* my location is drawn as map layers under the trains (me-* in the runtime); hide the control's DOM dot */
.maplibregl-user-location-dot,.maplibregl-user-location-accuracy-circle{display:none!important}
.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{filter:none}

/* ---- bottom sheet (station / train details): edge to edge, slides up from the bottom of the map ---- */
.sheet{position:absolute;z-index:20;left:0;right:0;bottom:0;max-height:62%;display:flex;flex-direction:column;
  transform:translateY(calc(105% + var(--kb,0px)));transition:transform .32s var(--ease-sheet);   /* past the keyboard too, when it is up */
  background:var(--paper);color:var(--ink);border-radius:var(--radius-22) var(--radius-22) 0 0;box-shadow:0 -10px 30px rgba(40,35,0,.18);
  padding:10px max(var(--space-5),calc((100% - 760px)/2)) calc(18px + env(safe-area-inset-bottom,0px))}
.sheet.open{transform:none}
.sheet[hidden]{display:none}
.sheet-grab{position:relative;display:block;width:calc(100% + 40px);height:26px;margin:-10px -20px 2px;padding:0;border:0;background:none;cursor:grab;touch-action:none}   /* the whole top strip is the handle */
.sheet-grab::before{content:"";position:absolute;left:50%;top:10px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--rule);transition:background var(--duration-150),width var(--duration-150)}
.sheet-grab:hover::before,.sheet-grab:active::before{background:var(--muted)}
.sheet-grab:active{cursor:grabbing}
.sheet-grab:focus-visible{outline:none}.sheet-grab:focus-visible::before{background:var(--focus);width:56px;margin-left:-28px}
.sheet-close{position:absolute;z-index:2;top:12px;right:14px;width:32px;height:32px;border:0;border-radius:var(--radius-circle);background:var(--control);color:var(--secondary);font-size:var(--text-14);cursor:pointer}
.sheet-close:hover{background:var(--syung);color:var(--syung-ink)}
.sheet-body{min-height:0;flex:0 1 auto;overflow:auto;overscroll-behavior:contain}   /* the body scrolls, not the sheet: a scrolling sheet over the WebGL canvas blanked the map above it in Chromium */
.sheet-grab,.sheet-follow{flex:none}
.sheet h3{font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-24);margin:2px 0 6px}
.sheet-follow{margin-top:var(--space-3);width:100%;height:42px;border:0;border-radius:var(--radius-pill);background:var(--syung);color:var(--syung-ink);font-family:var(--round);font-size:var(--text-16);cursor:pointer;box-shadow:var(--shadow-edge)}
.sheet .train-inspect .tp-dest{font-size:var(--text-26)!important}
.sheet .train-inspect .tp-now{font-size:var(--text-14)}
.sheet .train-inspect .sec{margin-top:14px;padding:0 0 var(--space-1);font-size:var(--text-12);font-weight:var(--weight-bold);color:var(--secondary);border-bottom:1px solid var(--rule)}
.sheet .kv{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:6px var(--space-3);margin:var(--space-2) 0 0;font-size:var(--text-13);align-items:baseline}
.sheet .kv dt{color:var(--muted);font-weight:var(--weight-semibold);white-space:nowrap}
.sheet .kv dd{margin:0;font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.sheet .kv .muted{color:var(--muted);font-weight:var(--weight-medium)}
.sheet .sec .muted{color:var(--muted);font-weight:var(--weight-medium)}
/* 롤코 1인칭: 자리 고르기(칸마다 위가 진행 방향) · 타는 동안 위의 띠 */
.ride-pick{display:flex;flex-wrap:wrap;gap:var(--space-2) 6px;margin:10px 0 2px}
.ride-car{display:flex;flex-direction:column;align-items:center;gap:3px}
.ride-car .n{font-size:var(--text-10-5);font-weight:var(--weight-bold);color:var(--muted)}
.ride-car .seats{display:grid;grid-template-columns:repeat(2,20px);gap:var(--space-1);padding:6px 5px 5px;border-radius:var(--radius-9) var(--radius-9) var(--radius-5) var(--radius-5);background:var(--rule)}
.ride-car.lead .seats{border-radius:var(--radius-18) var(--radius-18) var(--radius-5) var(--radius-5);padding-top:var(--space-3)}
.ride-pick .seat{width:20px;height:20px;padding:0;border:0;border-radius:var(--radius-5);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--muted);cursor:pointer}
.ride-pick .seat.on{background:var(--c);box-shadow:inset 0 0 0 2px var(--ink)}
.ride-pick .seat:focus-visible{outline:2px solid var(--ink);outline-offset:var(--focus-offset)}
.ride-go{margin-top:10px;width:100%;height:42px;border:0;border-radius:var(--radius-pill);background:var(--syung);color:var(--syung-ink);font-family:var(--round);font-size:var(--text-16);cursor:pointer;box-shadow:var(--shadow-edge)}
.ride-bar{position:absolute;z-index:21;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);transform:translateX(-50%);display:flex;align-items:center;gap:var(--space-2);max-width:calc(100% - 24px);padding:5px 5px 5px var(--space-3);border-radius:var(--radius-pill);background:rgba(20,20,20,.86);color:#fff;font-size:var(--text-13);font-weight:var(--weight-semibold);box-shadow:var(--shadow)}
.ride-bar[hidden]{display:none}
body.riding .map{background-image:none!important;background-color:var(--ride-ground,#D3D6CC)!important} /* 타는 동안: 타일이 끝난 먼 땅에 바탕 격자 대신 땅빛 */
body.riding .map-search,body.riding .route-cta{display:none} /* 타는 동안: 화면은 앞 풍경, 위에는 탄 자리 띠만 */
.ride-bar .dot{flex:none;width:9px;height:9px;border-radius:var(--radius-circle);background:var(--c)}
.ride-bar .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ride-bar .ride-off{flex:none;height:32px;padding:0 14px;border:0;border-radius:var(--radius-pill);background:var(--syung);color:var(--syung-ink);font-family:var(--round);font-size:var(--text-14);cursor:pointer}
.sheet .station-pop table{font-size:var(--text-13)}
html[data-theme=dark] .sheet{box-shadow:0 -10px 30px rgba(0,0,0,.5)}
@media(prefers-reduced-motion:reduce){.sheet{transition:none}}
.sheet .station-sheet .tp-line{flex-wrap:wrap;gap:6px}
.sheet .station-sheet .chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-12-5);font-weight:var(--weight-bold);color:var(--c)}
.sheet .station-sheet .chip .dot{width:9px;height:9px;border-radius:var(--radius-circle);background:var(--c)}
.sheet .station-sheet .chip+.chip{margin-left:var(--space-1)}
.sheet .arrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-2) 18px;margin-top:var(--space-2)}
.sheet .arr{display:grid;gap:3px;padding:var(--space-2) 0;border-bottom:1px dashed var(--rule)}
.sheet .arr-h{display:flex;align-items:center;gap:6px;font-size:var(--text-13);font-weight:var(--weight-bold);color:var(--c)}
.sheet .arr-h .dot{width:8px;height:8px;border-radius:var(--radius-circle);background:var(--c)}
.sheet .arr-h .muted{color:var(--muted);font-weight:var(--weight-medium)}
.sheet .arr-t{display:flex;gap:var(--space-2);align-items:baseline;font-size:var(--text-14);padding-left:14px}
.sheet .arr-t b{min-width:4.5em;font-variant-numeric:tabular-nums}
.sheet .arr-t .muted{color:var(--muted);font-size:var(--text-13)}
.sheet .station-sheet .empty{margin-top:var(--space-2);color:var(--muted);font-size:var(--text-13)}
.sheet .station-sheet .exits{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--space-2)}
.sheet .station-sheet .exit{min-width:24px;height:24px;padding:0 7px;border-radius:var(--radius-8);background:#ffd200;color:#1d1d1d;font-size:var(--text-12);font-weight:var(--weight-extrabold);display:inline-flex;align-items:center;justify-content:center;gap:2px;box-shadow:var(--shadow-edge-chip)}
.sheet .station-sheet .exit i{font-style:normal;font-size:var(--text-11)}


/* ---- 길찾기 (lib/journey-ui.mjs) ---- */
.map-search{display:flex;align-items:center}
/* the one call to action: bottom middle of the map, between the credits and my location */
.route-cta{position:absolute;z-index:8;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);width:min(360px,calc(100% - 132px));height:52px;padding:0 var(--space-5);
  border:0;border-radius:var(--radius-pill);background:var(--syung);color:var(--syung-ink);font-family:var(--round);font-size:var(--text-18);white-space:nowrap;
  box-shadow:0 3px 0 rgba(20,20,20,.18),0 10px 24px rgba(60,50,0,.22);cursor:pointer;transition:transform var(--duration-150)}
.route-cta svg{position:static!important;width:22px;height:22px;flex:none}
.route-cta:active{transform:translateX(-50%) scale(.97)}
.route-cta:hover{filter:brightness(.97)}
.map-area:has(.sheet.open) .route-cta,body:has(.jbar:not([hidden])) .route-cta{display:none}
html[data-theme=dark] .route-cta{box-shadow:0 3px 0 rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.45)}
/* station search: matches under the field */
.search-list{position:absolute;z-index:7;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;border-radius:var(--radius-18);background:var(--paper);color:var(--ink);box-shadow:var(--shadow);max-height:min(360px,55vh);overflow:auto;overscroll-behavior:contain}
.search-list[hidden]{display:none}
.search-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:6px var(--space-3);border-radius:var(--radius-12);cursor:pointer}
.search-list li:hover,.search-list li[aria-selected=true]{background:var(--control)}
.search-list b{font-size:var(--text-16);font-weight:var(--weight-bold);white-space:nowrap}
.search-list span{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-1)}
.search-list i{font-style:normal;font-size:var(--text-11);font-weight:var(--weight-bold);padding:2px var(--space-2);border-radius:var(--radius-pill);background:var(--c);color:#fff;white-space:nowrap}
.search-list .search-empty{color:var(--muted);font-size:var(--text-14);cursor:default}
/* station sheet: start or end a trip here */
.st-journey{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin:14px 0 var(--space-1)}
.st-journey button{height:46px;border:0;border-radius:var(--radius-pill);background:var(--control);color:var(--ink);font-family:var(--round);font-size:var(--text-16);cursor:pointer}
.st-journey button[data-end=to]{background:var(--syung);color:var(--syung-ink)}
.journey{display:flex;flex-direction:column;gap:10px}
.journey h3{margin:0;padding:0 2px;font-size:var(--text-17)!important}
/* 출발/도착: one card, two rows, a dot for each end, swap on the right */
.jcard{position:relative;border-radius:var(--radius-16);background:var(--control);padding:2px var(--space-12) 2px 0}
.jf{position:relative}
.jrow{display:flex;align-items:center;gap:10px;padding-left:14px}
.jrow+.jrow{border-top:1px solid var(--rule)}
.jdot{flex:none;width:10px;height:10px;border-radius:var(--radius-circle);background:var(--syung);box-shadow:0 0 0 2px var(--syung-ink)}
.jdot.to{background:var(--syung-ink);box-shadow:0 0 0 2px var(--syung)}
html[data-theme=dark] .jdot.from{box-shadow:0 0 0 2px #000}
.jrow input{flex:1;min-width:0;height:48px;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--text-16)}   /* 16px: iOS zooms the page into smaller fields */
.jrow input:focus{outline:none}
.jrow:focus-within .jdot{transform:scale(1.25)}
.jrow input::placeholder{color:var(--muted)}
.jf-here{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-right:2px;padding:0;border:0;border-radius:var(--radius-circle);background:transparent;color:var(--secondary);cursor:pointer}
.jf-here svg{width:20px;height:20px}
.jf-here:hover{background:var(--paper);color:var(--ink)}
.jswap{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:var(--radius-circle);background:var(--paper);color:var(--ink);box-shadow:var(--shadow);cursor:pointer}
.jswap svg{width:18px;height:18px}
/* 출발 시각: a small row under the card */
.jopts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.jf-list{position:absolute;z-index:5;left:0;right:0;top:100%;margin:var(--space-1) 0 0;padding:var(--space-1);list-style:none;border-radius:var(--radius-12);background:var(--paper);box-shadow:var(--shadow);max-height:240px;overflow:auto}
.jf-list button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:var(--space-2) 10px;border:0;border-radius:var(--radius-9);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.jf-list button:hover{background:var(--control)}
.jf-list b{font-size:var(--text-14)}.jf-list small,.jf-empty{font-size:var(--text-12);color:var(--muted)}.jf-empty{padding:var(--space-2) 10px}
.sheet-body:has(.journey){margin:0 -12px;padding:0 var(--space-3)}

/* 길찾기 sheet: taller, so the routes have room under the form */
.sheet:has(.journey){max-height:72%}
/* no double-tap page zoom on the controls; the map keeps its own gestures */
.mast,.map-search,.route-cta,.sheet,.jbar,.settings-panel{touch-action:manipulation}
@media(max-width:720px){
  .app{grid-template-rows:52px minmax(0,1fr)!important}
  .brand-icon{width:32px;height:32px}
  .identity h1{font-size:var(--text-22)}
}
/* phones: pinch to zoom; the +/− buttons only take room */
@media(pointer:coarse){.maplibregl-ctrl-top-right .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in){display:none}}

/* ==== 길찾기 results (lib/journey-ui.mjs) ==== */
.jf-status{font-size:var(--text-13);color:var(--secondary);min-height:18px}
.journey.done .jf-status:empty,.jf-status:empty{display:none}
.journey.done h3,.journey.done .jcard,.journey.done .jopts{display:none}
/* 출발/도착 card: a dotted rail joins the two ends */
.jcard::before{content:"";position:absolute;left:18px;top:30px;bottom:30px;border-left:2px dotted var(--muted);opacity:.6}

/* the trip, folded: one card — from over to on a dotted rail, the time and a small 수정 on the right;
   the sheet's ✕ sits beside it, centred on it */
.jsum{position:relative;display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:64px;margin:0;padding:10px var(--space-3) 10px 14px;border:0;border-radius:var(--radius-16);background:var(--control);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background var(--duration-150)}
.jsum[hidden]{display:none}
.jsum:hover{background:color-mix(in srgb,var(--control) 80%,var(--ink) 6%)}
.jsum-trip{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.jsum-trip::before{content:"";position:absolute;left:3px;top:13px;bottom:13px;border-left:2px dotted var(--muted);opacity:.7}
.jsum-end{display:flex;align-items:center;gap:10px;min-width:0;font-size:var(--text-15);line-height:20px}
.jsum-end b{font-weight:var(--weight-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jsum-end .jdot{width:8px;height:8px}
.jsum-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.jsum-when{font-size:var(--text-12);font-weight:var(--weight-bold);color:var(--secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.jsum-edit{display:inline-flex;align-items:center;gap:var(--space-1);height:26px;padding:0 10px 0 var(--space-2);border-radius:var(--radius-pill);background:var(--paper);color:var(--ink);font-size:var(--text-12-5);font-weight:var(--weight-bold);box-shadow:0 1px 0 rgba(20,20,20,.08)}
.jsum-edit svg{width:13px;height:13px}
.jsum:hover .jsum-edit{background:var(--syung);color:var(--syung-ink)}
.sheet .sheet-close{display:none}   /* every sheet: the handle closes it (drag down or tap), and Esc */

/* kind filter: the same segmented control as the time and the theme */
.jkinds{align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none}
.jkinds::-webkit-scrollbar{display:none}
.jkinds button{padding:6px var(--space-3);font-size:var(--text-13)}
.jkinds button b{margin-left:var(--space-1);font-weight:var(--weight-bold);opacity:.55;font-variant-numeric:tabular-nums}
.jkinds button[aria-pressed=true] b{opacity:.8}

/* one row per route */
.jplans{display:flex;flex-direction:column;margin-top:var(--space-1)}
.jp{position:relative;display:flex;flex-direction:column;gap:7px;padding:13px var(--space-3) var(--space-3);margin:0 -12px;border-radius:var(--radius-16);cursor:pointer;transition:background var(--duration-180)}
.jp+.jp::before{content:"";position:absolute;left:12px;right:12px;top:0;border-top:1px solid var(--rule)}
.jp.on::before,.jp.on+.jp::before{display:none}
.jp[hidden]{display:none}
.jp:hover{background:color-mix(in srgb,var(--control) 55%,transparent)}
.jp.on{background:var(--control)}
.jp:focus-visible{outline:var(--focus-width-thin) solid var(--focus);outline-offset:-2px}
.jp-top{display:flex;align-items:baseline;gap:var(--space-2);min-width:0}
.jp-min{font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-26);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.jp-min small{font-size:var(--text-15);margin-left:1px}
.jp-arr{font-size:var(--text-14);font-weight:var(--weight-bold);color:var(--secondary);font-variant-numeric:tabular-nums}
.jp-tag{margin-left:auto;align-self:center;flex:none;font-size:var(--text-11-5);font-weight:var(--weight-bold);padding:3px 9px;border-radius:var(--radius-pill);background:var(--syung-soft);color:#5b4c00}
html[data-theme=dark] .jp-tag{background:rgba(255,212,0,.14);color:var(--syung)}
.jp-meta{margin:0;display:flex;align-items:center;gap:6px;font-size:var(--text-12-5);color:var(--secondary);font-variant-numeric:tabular-nums}
.jp-more{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:var(--weight-bold);color:inherit;text-decoration:underline;cursor:pointer}   /* 탈 수 있는 버스 '외 N대' */
.jp-live{display:inline-flex;align-items:center;gap:var(--space-1);margin-left:auto;font-size:var(--text-11-5);font-weight:var(--weight-bold);color:#1f8f55}
.jp-live::before{content:"";width:6px;height:6px;border-radius:var(--radius-circle);background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
html[data-theme=dark] .jp-live{color:#3ddc84}

/* the bar: walk, wait and every ride at their share of the trip */
.jtrack{display:flex;align-items:center;gap:2px;height:24px}
.jseg{display:flex;align-items:center;justify-content:center;gap:3px;min-width:5px;height:100%;border-radius:var(--radius-7);overflow:hidden;white-space:nowrap;font-style:normal;font-size:var(--text-11-5);font-weight:var(--weight-extrabold);letter-spacing:-.01em}
.jseg svg{flex:none;width:12px;height:12px}
.jseg.ride{min-width:10px;background:var(--c);color:var(--t);box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.jseg.walk{min-width:6px;height:4px;border-radius:0;background:radial-gradient(circle,var(--muted) 1.6px,transparent 2px) 0 50%/6px 4px repeat-x;opacity:.9}
.jseg.wait{min-width:3px;height:4px;border-radius:var(--radius-pill);background:var(--rule)}

/* steps of the chosen route: times, a rail in the line colour, places */
.jsteps{display:none;margin:6px 0 2px;padding:0;list-style:none}
.jp.on .jsteps{display:block;animation:js-in var(--duration-220) var(--ease-sheet)}
@keyframes js-in{from{opacity:0;transform:translateY(-4px)}}
.js{display:grid;grid-template-columns:40px 16px minmax(0,1fr);column-gap:10px;align-items:start}
.js-t{font-size:var(--text-12-5);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;color:var(--secondary);padding-top:1px;text-align:right}
.js-b{min-width:0;padding:0 0 2px}
.js-b b{display:block;font-size:var(--text-14-5);font-weight:var(--weight-bold);line-height:1.35}
.js-b small{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:var(--text-12);color:var(--secondary);line-height:1.45}
.js-b small svg{width:13px;height:13px;flex:none}
.js-b p{margin:0 0 2px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--text-13-5);font-weight:var(--weight-semibold)}
.js-dot{justify-self:center;width:14px;height:14px;margin-top:2px;border-radius:var(--radius-circle);background:var(--paper);box-shadow:inset 0 0 0 3.5px var(--c)}
.jp.on .js-dot,.rt-steps .js-dot,.tk-steps .js-dot{background:var(--control)}
.js.node.start .js-dot{background:var(--syung);box-shadow:inset 0 0 0 2px var(--syung-ink)}
.js.node.end .js-dot{background:var(--syung-ink);box-shadow:inset 0 0 0 3px var(--syung)}
.js.node.change .js-dot{width:16px;height:16px;margin-top:1px;box-shadow:inset 0 0 0 4px var(--c)}
.js.node .js-b{padding-bottom:10px}
/* 세로선 잇기(2026-10-29): 동그라미 행이 자기 아래로 선을 이어 긋고(다음이 걷기면 점선 · 탈것이면 실선) 구간 행의 선은 행 높이를 그대로 따라가 다음 동그라미 위 가장자리까지 닿는다 — 높이 고정값 없음 */
.jsteps{--rx:58px}.jsteps.notime{--rx:8px}
.js.node{position:relative}
.js-dot{position:relative;z-index:1}
.js-rail{justify-self:center;align-self:stretch;width:5px;margin:0 0 -2px;border-radius:0;background:var(--c)}
.js.walk .js-rail{width:0;border-left:3px dotted var(--muted);border-radius:0;background:none;opacity:.8}
.js.node:has(+ .js.ride)::after,.js.node:has(+ .js.walk)::after{content:"";position:absolute;left:calc(var(--rx) - 2.5px);top:12px;bottom:0;width:5px;border-radius:0;background:var(--c)}
.js.node:has(+ .js.walk)::after{left:calc(var(--rx) - 1.5px);width:0;border-left:3px dotted var(--muted);border-radius:0;background:none;opacity:.8}
/* 환승(하차 → 승차)처럼 동그라미 바로 다음이 동그라미면 걷기와 같은 회색 점선으로 잇는다(2026-10-30) */
.js.node:has(+ .js.node)::after{content:"";position:absolute;left:calc(var(--rx) - 1.5px);top:12px;bottom:-2px;width:0;border-left:3px dotted var(--muted);opacity:.8}
.js.ride .js-b,.js.walk .js-b{padding:1px 0 var(--space-3)}
.js-chip{display:inline-flex;align-items:center;gap:3px;padding:2px var(--space-2);border-radius:var(--radius-7);background:var(--c);color:var(--t);font-size:var(--text-12);font-weight:var(--weight-extrabold)}
.js-chip svg{width:12px;height:12px}
.jsteps.shown{display:block}
.jsteps.notime .js{grid-template-columns:16px minmax(0,1fr)}
.js-chips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px}
button.js-chip{border:0;font-family:inherit;cursor:pointer}
.js-chip small{margin-left:3px;padding:0 5px;border-radius:var(--radius-pill);background:rgba(255,255,255,.28);font-size:var(--text-10-5);font-weight:var(--weight-bold);color:inherit}
.js-chip[aria-expanded=true]{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--c)}
.js-toward{font-weight:var(--weight-semibold)}
.js-d{margin-left:2px;font-variant-numeric:tabular-nums}
.js-side{display:block;margin-top:2px;font-size:var(--text-12);color:var(--secondary)}
.js-alt{display:inline-flex;align-items:center;gap:var(--space-1);margin-right:6px}
.rt-item{position:relative}.rt-card{position:relative}   /* ▾ 는 요약 카드 기준 — 펼쳐도 요약 오른쪽 아래에 있다 */
.rt-card .rt-plan{padding-right:var(--space-12)}   /* ▾ 자리 */
.rt-open{position:absolute;right:6px;top:50%;margin-top:-18px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:var(--radius-12);background:none;color:#5c5220;cursor:pointer}
.rt-open svg{transition:transform var(--duration-200)}.rt-open[aria-expanded=true] svg{transform:rotate(180deg)}
.rt-open:focus-visible{outline:var(--focus-width-thin) solid var(--focus)}
.rt-steps .jp-meta{margin:0 0 var(--space-2)}.rt-steps{margin:var(--space-1) 0 2px;padding:var(--space-3) var(--space-3) 6px;border-radius:var(--radius-16);background:var(--control)}
.js-live{color:#1f8f55;font-weight:var(--weight-bold)}
html[data-theme=dark] .js-live{color:#3ddc84}
html[data-theme=dark] .js.node.start .js-dot{box-shadow:inset 0 0 0 2px #000}
.jp-note{margin:10px 0 0;font-size:var(--text-11-5);line-height:1.5;color:var(--muted)}

/* loading: the rows that will come, 슝 running along the first bar */
.jload{display:flex;flex-direction:column;margin-top:2px}
.jsk{display:flex;flex-direction:column;gap:9px;padding:14px 0 13px}
.jsk+.jsk{border-top:1px solid var(--rule)}
.jsk-min,.jsk-meta{display:block;height:18px;width:38%;border-radius:var(--radius-7);background:var(--control)}
.jsk-meta{height:11px;width:56%}
.jsk-track{position:relative;height:24px;border-radius:var(--radius-7);background:var(--control);overflow:hidden}
.jsk:nth-child(2) .jsk-min{width:30%}.jsk:nth-child(3) .jsk-min{width:34%}
.jsk:nth-child(2){opacity:.7}.jsk:nth-child(3){opacity:.45}
.jsk-run{position:absolute;top:50%;left:0;width:34px;height:18px;margin-top:-9px;animation:jsk-run 1.6s cubic-bezier(.65,0,.35,1) infinite}
.jsk-run i{position:absolute;inset:0;border-radius:var(--radius-6);background:var(--syung);box-shadow:0 1px 0 rgba(20,20,20,.25)}
.jsk-run i::after{content:"";position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:var(--radius-circle);background:var(--syung-ink)}
.jsk-run::before{content:"";position:absolute;right:100%;top:4px;width:26px;height:10px;margin-right:3px;
  background:linear-gradient(var(--syung),var(--syung)) 100% 0/60% 2px no-repeat,linear-gradient(var(--syung),var(--syung)) 100% 4px/100% 2px no-repeat,linear-gradient(var(--syung),var(--syung)) 100% 8px/45% 2px no-repeat;opacity:.8}
@keyframes jsk-run{0%{left:-40px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% + 4px);opacity:0}}
.jf-status:not(:empty):has(+ #jResult .jload),.account-msg:has(+ .jload){font-family:var(--round);font-size:var(--text-15);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.jsk-run{animation:none;left:calc(50% - 17px)}.jp.on .jsteps{animation:none}}

/* nothing found */
.jerr{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:var(--space-4);border-radius:var(--radius-16);background:var(--control)}
.jerr b{font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-18)}
.jerr p{margin:0;font-size:var(--text-13);color:var(--secondary)}
.jerr-retry{margin-top:6px;height:40px;padding:0 18px;border:0;border-radius:var(--radius-pill);background:var(--syung);color:var(--syung-ink);font-family:var(--round);font-size:var(--text-15);cursor:pointer}

/* chosen route while the sheet is closed: the whole bar opens the results; a small ✕ top right clears it */
.jbar{position:absolute;z-index:15;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 20px));display:block;background:var(--paper);color:var(--ink);border-radius:var(--radius-18);box-shadow:var(--shadow)}
.jbar[hidden]{display:none}
/* 좁은 화면: 맨 아래 출처(위 끝 safe-area + 16px) 위로 6px 띄워 버튼 · 길찾기 막대를 아래 16px → 22px — 크기 · 모양은 그대로 */
@media(max-width:780px){.route-cta,.jbar{bottom:calc(22px + env(safe-area-inset-bottom,0px))}}
.jbar-open{display:flex;flex-direction:column;gap:9px;width:100%;padding:var(--space-3) 14px 13px;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.jbar-open:active{background:color-mix(in srgb,var(--control) 60%,transparent)}
.jbar-top{display:flex;align-items:baseline;gap:var(--space-2);padding-right:34px}
.jbar-top b{font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-21);line-height:1}
.jbar-top b small{font-size:var(--text-13)}
.jbar-top span{font-size:var(--text-13);font-weight:var(--weight-bold);color:var(--secondary)}
.jbar .jtrack{height:18px}
.jbar .jseg{font-size:var(--text-10-5);border-radius:var(--radius-5)}
.jbar-x{position:absolute;top:7px;right:7px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--radius-circle);background:var(--control);color:var(--secondary);cursor:pointer}
.jbar-x svg{width:14px;height:14px}
.jbar-x:hover{color:var(--ink)}
.jbar-x::after{content:"";position:absolute;inset:-7px}   /* a 44px target around the small circle */

/* my location: under +/−, in the 슝 palette (the control's own icon is a blue sprite) */
.maplibregl-ctrl-top-right .maplibregl-ctrl-group+.maplibregl-ctrl-group{margin-top:var(--space-2)}
.maplibregl-ctrl-geolocate{color:var(--ink)}
.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:none!important;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='black' stroke='none'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='black' stroke='none'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E") center/20px 20px no-repeat}
.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate-active{background:var(--syung)!important;color:var(--syung-ink)}
.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate-background{color:var(--syung-deep)}
html[data-theme=dark] .maplibregl-ctrl-group button.maplibregl-ctrl-geolocate-background{color:var(--syung)}
html[data-theme=dark] .maplibregl-ctrl-group button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{filter:none}   /* the runtime inverts the sprite icons in dark */
.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon{animation:me-wait var(--duration-1100) ease-in-out infinite}
@keyframes me-wait{50%{opacity:.35}}
.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate-active-error,.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate-background-error{color:#d8452f}
@media(pointer:coarse){.maplibregl-ctrl-geolocate{width:42px!important;height:42px!important}}
@media(prefers-reduced-motion:reduce){.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon{animation:none}}

/* the preview's title box and legend, hidden here (the runtime hid them only once it had loaded,
   so a reload showed "655개 역 노드 전체 보기" and the KTDB legend for a second or two) */
.map-status,.legend{display:none!important}
/* dark ground under the map from the first paint (the light preview grid showed until the map loaded) */
html[data-theme=dark] .map{background-color:#10181c!important;background-image:none!important}
/* the dark theme's logo from the first paint too (the runtime swaps the <img> src once loaded) */
html[data-theme=dark] .brand-icon{content:url(./brand/syung-light.svg)}

/* phone keyboard up: the sheet sits on it (--kb from the runtime), the header and map stay put */
.sheet{bottom:var(--kb,0px)}   /* no transition on bottom: the keyboard itself is the motion */
.sheet.kb{max-height:calc(100% - var(--kb,0px) - 8px);border-radius:var(--radius-22) var(--radius-22) 0 0;padding-bottom:10px}
@media(prefers-reduced-motion:reduce){.sheet{transition:none}}
/* typing a place: the matches open right under the card, in the flow (a popover the scrolling body would clip);
   the time row and the swap step aside until one is picked */
.journey .jf-list{position:static;margin:-4px 0 0;max-height:none;padding:var(--space-1);box-shadow:none;background:var(--control);border-radius:var(--radius-14)}
.journey .jf-list[hidden]{display:none}
.jf-list button{min-height:48px}
.journey:has(.jf-list:not([hidden])) .jopts,.journey:has(.jf-list:not([hidden])) .jswap{display:none}

/* ㅅ슈슝~ | 어디쯤이슝? — the tagline sits on the name's line, after a thin rule */
.identity .brand-line{display:flex;align-items:center;gap:10px;min-width:0}
.identity .brand-line h1{margin:0;white-space:nowrap}
.identity .brand-line p{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--text-14);white-space:nowrap}
.identity .brand-line p::before{content:"";width:1.5px;height:14px;border-radius:1px;background:currentColor;opacity:.45}
@media(max-width:720px){.identity .brand-line p{display:none}}   /* phones: the name only */

/* 출발 시각: one quiet line under the card; tapped, it opens in place — 오늘/내일, a big clock, −/+ 10분 */
.jwhen{display:block}
.jw-row{display:flex;align-items:center;gap:var(--space-2);width:100%;height:44px;padding:0 var(--space-3) 0 14px;border:0;border-radius:var(--radius-14);background:var(--control);color:var(--ink);font:inherit;font-size:var(--text-14-5);font-weight:var(--weight-bold);text-align:left;cursor:pointer}
.jw-row svg{width:17px;height:17px;flex:none;color:var(--secondary)}
.jw-row span{flex:1;min-width:0}
.jw-row .jw-chev{width:16px;height:16px;transition:transform var(--duration-200) var(--ease-sheet)}
.jw-row[aria-expanded=true]{border-radius:var(--radius-14) var(--radius-14) 0 0}
.jw-row[aria-expanded=true] .jw-chev{transform:rotate(90deg)}
.jw-row.set svg:first-child{color:var(--syung-deep)}
html[data-theme=dark] .jw-row.set svg:first-child{color:var(--syung)}
.jw-panel{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3);padding:var(--space-1) 14px 14px;border-radius:0 0 var(--radius-14) var(--radius-14);background:var(--control);animation:jw-in var(--duration-200) var(--ease-sheet)}
.jw-panel[hidden]{display:none}
@keyframes jw-in{from{opacity:0;transform:translateY(-4px)}}
.jw-head{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);padding-top:var(--space-3)}
.jw-head b{font-size:var(--text-13);color:var(--secondary)}
.jw-now{height:30px;padding:0 var(--space-3);border:0;border-radius:var(--radius-pill);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--text-12-5);font-weight:var(--weight-bold);cursor:pointer}
.jw-day{align-self:center;background:var(--paper)}
.jw-day button{padding:7px 18px;font-size:var(--text-13-5)}
.jw-clock{display:flex;align-items:center;justify-content:center;gap:6px}
.jw-col{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}
.jw-col output{min-width:2.2ch;font-family:var(--round);font-size:42px;line-height:1.05;text-align:center;font-variant-numeric:tabular-nums}
.jw-colon{font-family:var(--round);font-size:var(--text-36);line-height:1;color:var(--muted);padding:0 6px}
.jw-step{display:grid;place-items:center;width:64px;height:38px;padding:0;border:0;border-radius:var(--radius-12);background:var(--paper);color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background var(--duration-150)}
.jw-step svg{width:20px;height:20px}
.jw-step:hover{background:var(--syung-soft)}
html[data-theme=dark] .jw-step:hover{background:rgba(255,212,0,.14)}
.jw-step:active{transform:scale(.95)}
.jw-step:disabled{opacity:.3;cursor:default;background:var(--paper)}
.jw-go{height:46px;border:0;border-radius:var(--radius-pill);background:var(--syung);color:var(--syung-ink);font-family:var(--round);font-size:var(--text-16);cursor:pointer;box-shadow:var(--shadow-edge)}
@media(prefers-reduced-motion:reduce){.jw-panel{animation:none}.jw-row .jw-chev{transition:none}}
/* holding − / + (or the numbers) must not start iOS text selection or its copy callout */
.jw-panel,.jw-clock,.jw-clock *,.jw-step{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.jw-step{-webkit-tap-highlight-color:transparent}
/* station sheet: the line chips carry their own dot (the base .chip:before drew an empty one, a gap before it) */
.sheet .station-sheet .chip::before{display:none}
.sheet .station-sheet .chip{padding:3px 10px 3px var(--space-2)}
/* arrivals on their way (past 0.7 s): rows shaped like the ones coming */
.st-sk .arr{gap:7px}
.st-sk i{display:block;height:12px;width:46%;border-radius:var(--radius-6);background:var(--control)}
.st-sk i+i{height:15px;width:62%;margin-left:14px}
.st-sk i+i+i{width:52%}

/* 회원(web/user/account.mjs): 메뉴 테마 아래 [로그인] · 이름 → 내 정보 · 승차권 → 승차권 목록 · 로그인 팝업(서랍 밖 화면 위) · 내 정보(프로필 · 로그아웃 · 탈퇴) · 발권 화면.
   로그인 방법이 설정되지 않으면 맨 위 칸 자체가 hidden. 승차권 모양은 2026-10-27 사용자와 정한 '슝 승차권'(옛 노란 보통권 + 슝 로고) */
.menu-account{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--rule)}   /* 테마 아래 · 목록(.menu-nav 위 선) 위 */
.menu-account[hidden],.menu-account [hidden],.login-sheet[hidden],.account-page [hidden],.tickets-page [hidden],.ticket-page [hidden]{display:none}
/* 메뉴 아바타 칸의 내 위치 캐릭터 얼굴(새싹 볼빵 후디 — 만드는 법 tools/avatar_face/make.sh).
   배경 그림이라 서랍을 열어 칸이 보일 때만 받는다(첫 화면 요청에 끼지 않는다) */
.account-avatar.face{background:var(--control) url(brand/sprout-face-56.png) center/28px 28px no-repeat;background-image:image-set(url(brand/sprout-face-28.png) 1x,url(brand/sprout-face-56.png) 2x,url(brand/sprout-face-84.png) 3x)}
/* 로그인 전: 누르는 버튼으로 보이게 — 테마 고르기(.theme-seg)와 같은 회색 알약 칸 + 오른쪽 노란 → 칩(사용자 결정 2026-10-27 시안 C) */
.login-open{display:flex;align-items:center;gap:10px;width:calc(100% - 8px);margin:0 var(--space-1);min-height:52px;padding:var(--space-1) var(--space-1) var(--space-1) var(--space-2);border:0;border-radius:var(--radius-pill);background:var(--control);color:var(--ink);font:inherit;font-size:var(--text-16);font-weight:var(--weight-bold);text-align:left;cursor:pointer}
.login-open .account-avatar.face{width:38px;height:38px;border-radius:var(--radius-pill);background-color:var(--paper)}
.login-open-name{flex:1}
.login-open-go{flex:none;width:64px;height:44px;padding:var(--space-3) 22px;border-radius:var(--radius-pill);background:var(--syung);color:var(--syung-ink);box-sizing:border-box;box-shadow:var(--shadow-knob);transition:background var(--duration-150)}
.login-open:hover .login-open-go{background:var(--syung-deep)}
@media(prefers-reduced-motion:reduce){.login-open-go{transition:none}}
.account-avatar{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--syung);color:#141414;font-family:var(--round);font-size:var(--text-16)}
.account-avatar.big{width:44px;height:44px;border-radius:var(--radius-15);font-size:var(--text-21)}
/* 로그인 팝업: 서랍 밖 화면 전체 위(서랍 1100 · 가림막 1099 보다 위). 좁은 화면은 아래 시트, 넓은 화면은 가운데 카드 */
.login-sheet{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.login-scrim{position:absolute;inset:0;background:rgba(18,18,18,.4);opacity:0;transition:opacity var(--duration-220)}
.login-card{position:relative;padding:var(--space-3) var(--space-6) calc(var(--space-7) + env(safe-area-inset-bottom,0px));border-radius:var(--radius-27) var(--radius-27) 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -10px 30px rgba(23,30,24,.13);transform:translateY(100%);transition:transform var(--duration-260) var(--ease-standard);display:flex;flex-direction:column;align-items:center}
.login-sheet.open .login-scrim{opacity:1}.login-sheet.open .login-card{transform:none}
@media(min-width:721px){.login-sheet{justify-content:center;align-items:center;padding:var(--space-6)}.login-card{width:min(360px,100%);padding:30px var(--space-7) var(--space-7);border-radius:var(--radius-27);box-shadow:0 18px 50px rgba(23,30,24,.22);transform:translateY(18px) scale(.97);opacity:0;transition:transform var(--duration-220) var(--ease-standard),opacity var(--duration-180)}.login-sheet.open .login-card{opacity:1}.login-grab{display:none}}
@media(prefers-reduced-motion:reduce){.login-scrim,.login-card{transition:none}}
.login-grab{width:32px;height:4px;border-radius:var(--radius-5);background:var(--rule);margin:0 0 23px}
.login-brand{width:47px;height:47px;border-radius:var(--radius-15);box-shadow:0 4px 0 #e9e5cd;margin:0 0 14px}
/* 로고 움직임(Lottie) 캔버스: 로고 칸 위쪽 넓은 영역, 누르기는 아래로 통과. 바람 · 먼지는 테마 색 */
.login-motion{position:absolute;width:800px;height:170px;pointer-events:none;z-index:1}
.login-motion .lm-wind path{stroke:var(--muted)}.login-motion .lm-dust path{fill:var(--muted)}
.login-card h2{margin:0 0 23px;font-family:var(--round);font-weight:var(--weight-regular);font-size:25px}
.login-list{display:flex;flex-direction:column;gap:9px;width:100%}
.social{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;border-radius:var(--radius-12);font-size:var(--text-13);font-weight:var(--weight-semibold);text-decoration:none}
.social svg{width:18px;height:18px;flex:none}
.social.kakao{background:#fee500;color:#191919}
.social.google{background:#fff;color:#1f1f1f;box-shadow:inset 0 0 0 1px #747775}
.social.apple{background:#000;color:#fff}
html[data-theme=dark] .social.apple{box-shadow:inset 0 0 0 1px #5a5a5a}
.login-privacy{margin-top:14px;font-size:var(--text-11);color:var(--muted);text-underline-offset:2px}
.login-msg{margin:10px 0 0;min-height:1.4em;font-size:var(--text-12);color:var(--secondary);text-align:center}
.login-msg .acct-toast{margin-top:var(--space-1);text-align:left;box-shadow:none;cursor:default}   /* 팝업 안 안내 — 토스트와 같은 모양, 누를 것 없음 */
@media (prefers-reduced-motion:reduce){.login-card,.login-scrim{transition:none}}
/* 내 정보 */
.account-page,.ticket-page{padding:var(--space-1) 10px}
.account-prof{display:flex;align-items:center;gap:14px;margin:var(--space-1) 0 14px}
.account-prof b{display:block;font-size:var(--text-17)}.account-prof small{font-size:var(--text-12);color:var(--muted)}
/* 프로필 사진 · 캐릭터(2026-10-27): 기본은 새싹 얼굴(.face — 위 image-set), 다른 캐릭터는 account.mjs 가 faces/<이름>-*.png 를
   background-image 로 넣고, 올린 사진(.photo)은 칸을 꽉 채운다. 그림은 칸이 보일 때만 받는다 */
.account-avatar.photo{background:var(--control) center/cover no-repeat}
.account-prof .account-avatar.big{position:relative;width:84px;height:84px;padding:0;border:0;border-radius:28px;background-size:72px 72px;cursor:pointer}
.account-prof .account-avatar.big.photo{background-size:cover}
.account-prof .account-avatar.big:focus-visible{outline:var(--focus-width-thin) solid var(--focus);outline-offset:var(--focus-offset)}
.pf-badge{position:absolute;right:-4px;bottom:-4px;width:28px;height:28px;padding:6px;box-sizing:border-box;border-radius:var(--radius-circle);background:var(--syung);color:var(--syung-ink);box-shadow:0 0 0 3px var(--paper)}
.pf-who{flex:1;min-width:0}
.pf-name{display:flex;align-items:center;gap:6px}.pf-name b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-form{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 14px}
.pf-row{display:flex;gap:var(--space-2)}
.pf-row button{flex:1;min-height:44px;border:0;border-radius:var(--radius-12);background:var(--control);color:var(--ink);font:inherit;font-weight:var(--weight-bold);cursor:pointer}
.pf-row .pf-ok{background:var(--syung);color:var(--syung-ink)}
.pf-row button[disabled]{opacity:.5;cursor:default}
html[data-theme=dark] .pf-in{border-color:var(--rule);background:var(--control)}
html[data-theme=dark] .pf-in input{color:var(--ink)}html[data-theme=dark] .pf-in small{color:var(--muted)}
.pf-pick{margin:0 0 14px;padding:var(--space-3);border-radius:var(--radius-18);background:var(--control)}
.pf-l{margin:0 0 var(--space-2);font-size:var(--text-12);font-weight:var(--weight-bold);color:var(--muted)}
.pf-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.pf-choice{position:relative;aspect-ratio:1;min-height:56px;padding:0;border:0;border-radius:var(--radius-16);background:var(--paper) center/78% no-repeat;color:var(--ink);font:inherit;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--rule)}
.pf-choice[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--syung-deep)}
.pf-choice:focus-visible{outline:var(--focus-width-thin) solid var(--focus);outline-offset:var(--focus-offset)}
.pf-choice[disabled]{opacity:.5;cursor:default}
.pf-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--text-11);font-weight:var(--weight-bold)}
.pf-photo svg{width:24px;height:24px}
.pf-photo.photo{background-size:cover;color:transparent}.pf-photo.photo svg{opacity:0}
.pf-in small.over{color:#c2410c;font-weight:var(--weight-bold)}
.pf-note{margin:var(--space-2) 2px 0;font-size:var(--text-11);line-height:1.45;color:var(--muted)}
.ticket-list{display:flex;flex-direction:column;gap:var(--space-3)}
.ticket-new{margin-top:var(--space-3);width:100%;min-height:46px;border:0;border-radius:var(--radius-14);background:var(--control);color:var(--ink);font:inherit;font-size:var(--text-14);font-weight:var(--weight-bold);cursor:pointer}
.account-foot{display:flex;justify-content:center;gap:14px;margin-top:18px;font-size:var(--text-12)}
.account-foot a,.account-foot button{border:0;background:none;padding:var(--space-1) 0;color:var(--muted);font:inherit;cursor:pointer;text-underline-offset:2px}
.account-foot .account-delete{color:#c2410c}
.account-confirm{margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius-14);background:var(--control)}
.account-confirm p{margin:0 0 var(--space-2);font-size:var(--text-14);font-weight:var(--weight-bold)}
.account-confirm div{display:flex;gap:var(--space-2)}
.account-confirm button{flex:1;min-height:42px;border:0;border-radius:var(--radius-10);font:inherit;font-weight:var(--weight-bold);cursor:pointer;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.account-confirm .danger{background:#c2410c;color:#fff;box-shadow:none}
/* 내 정보: 내 통계 · 계정 칸(user/account.mjs 가 내 정보를 열 때 채운다) */
.acct-sec{margin:0 0 14px;padding:var(--space-3);border-radius:var(--radius-18);background:var(--control)}
h4.pf-l{line-height:1.3}
.st-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}
.st-cell{padding:10px var(--space-3);border-radius:var(--radius-14);background:var(--paper)}
.st-cell b{display:block;font-size:var(--text-18);line-height:1.2}.st-cell small{font-size:var(--text-11-5);color:var(--muted)}
.st-bars{display:flex;align-items:flex-end;gap:2px;height:44px;margin:10px 2px 0;border-bottom:1px solid var(--rule)}
.st-bars i{flex:1;min-width:2px;border-radius:var(--radius-2) var(--radius-2) 0 0;background:var(--syung-deep)}
.st-note{margin:var(--space-2) 2px 0;font-size:var(--text-11);line-height:1.45;color:var(--muted)}
.st-fare{margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius-14);background:var(--paper)}
.st-fare-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);font-size:var(--text-13);font-weight:var(--weight-bold)}
.st-fare-top b{font-size:var(--text-20)}
.st-fare-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:var(--text-13)}
.st-fare-list li{display:flex;align-items:baseline;gap:var(--space-2)}.st-fare-list li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-fare-list small{color:var(--muted)}
.st-skip{margin:var(--space-2) 2px 0;font-size:var(--text-12);font-weight:var(--weight-bold);color:var(--secondary)}
.acct-sub{margin:0 0 var(--space-2);font-size:var(--text-13);font-weight:var(--weight-bold)}
.dv-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.dv-list li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px var(--space-2);padding:10px var(--space-3);border-radius:var(--radius-14);background:var(--paper)}
.dv-name{font-size:var(--text-14);font-weight:var(--weight-bold)}.dv-name em{margin-left:6px;padding:1px 7px;border-radius:var(--radius-pill);background:var(--selected);font-size:var(--text-11);font-style:normal}
.dv-list small{grid-column:1;font-size:var(--text-11-5);color:var(--muted)}
.dv-out{grid-column:2;grid-row:1/3;min-height:36px;padding:0 var(--space-3);border:0;border-radius:var(--radius-10);background:var(--control);color:var(--ink);font:inherit;font-size:var(--text-12);font-weight:var(--weight-bold);cursor:pointer}
.dv-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:10px}
.dv-actions button{flex:1 1 140px;min-height:42px;border:0;border-radius:var(--radius-12);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--text-13);font-weight:var(--weight-bold);cursor:pointer;box-shadow:inset 0 0 0 1px var(--rule)}
.dv-out[disabled],.dv-actions button[disabled]{opacity:.5;cursor:default}
.account-msg{margin:var(--space-3) 0 0;min-height:1.4em;font-size:var(--text-13);color:var(--secondary)}
/* 승차권: 앞면 = 이름 · 출발 시각 · 점선 슝 로고 줄 · '○○권' 띠 · 일련번호 · 오늘, 누르면 뒤집혀 뒷면 = 갈아타는 곳 이어 쓰기 · 출발 시각 · 마그네틱 띠 · 타는 날 */
.ticket{position:relative;flex:none;height:158px;perspective:900px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ticket-in{position:relative;height:100%;transition:transform var(--duration-600) cubic-bezier(.3,.7,.2,1.1);transform-style:preserve-3d}
.ticket.flipped .ticket-in{transform:rotateY(180deg)}
.tk-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius-18);background:#ffe14d;color:#655b24;box-shadow:var(--shadow-edge-brand),0 7px 14px rgba(170,140,0,.09)}
.tk-face:after{content:"";position:absolute;inset:6px;border:1px dashed rgba(111,100,32,.27);border-radius:13px;pointer-events:none}
.tk-logos{position:absolute;inset:7px;border-radius:var(--radius-12);overflow:hidden;pointer-events:none}
.tk-logo-row{position:absolute;left:0;right:0;top:17px;display:flex;justify-content:center;gap:14px}
.tk-logo-row svg{flex:none;width:124px;height:74px;transform:rotate(-20deg);color:#8a7a25;opacity:.7}
.tk-top{position:absolute;left:18px;right:18px;top:14px;display:flex;justify-content:space-between;align-items:baseline}
.tk-top b{font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-24);line-height:30px;color:#5d5418;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-top b+b{flex:none;font-size:29px;letter-spacing:-.5px;margin-left:10px}
.tk-strip{position:absolute;left:7px;right:7px;top:94px;height:27px;display:flex;align-items:center;justify-content:center;gap:18px;overflow:hidden;white-space:nowrap;background:rgba(255,242,168,.79);border-top:1px solid rgba(135,121,39,.13);border-bottom:1px solid rgba(135,121,39,.13)}
.tk-strip span{flex:none;display:inline-flex;align-items:center;gap:5px;font-family:var(--round);font-size:var(--text-12);color:#48546b}
.tk-strip img{width:13px;height:13px;border-radius:4px}
.tk-serial{position:absolute;left:18px;bottom:14px;font:500 10px/16px ui-monospace,Menlo,monospace;letter-spacing:1px;color:#766923}
.tk-today{position:absolute;right:48px;bottom:12px;padding:2px 9px;border-radius:var(--radius-pill);background:#fffdf5;color:#b64b2e;font-family:var(--round);font-size:var(--text-12);line-height:18px;transform:rotate(-7deg);box-shadow:0 2px 0 rgba(0,0,0,.05)}
.tk-flip{position:absolute;right:17px;bottom:12px;width:23px;height:23px;padding:0;border:0;border-radius:var(--radius-circle);background:rgba(111,100,32,.1);color:#655b24;font:900 14px/23px sans-serif;cursor:pointer}
.tk-back{transform:rotateY(180deg);background:#ffe88a}
.tk-chain{position:absolute;left:17px;right:17px;top:12px;margin:0;font-family:var(--round);font-size:var(--text-13);line-height:1.4;color:#3a3413;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-chain span{white-space:nowrap}
.tk-chain em{font-style:normal;color:#9a8b33;margin:0 var(--space-1)}
.tk-chain small{margin-left:6px;font:700 10px/14px "Noto Sans KR",sans-serif;color:#9a8b33;white-space:nowrap}
.tk-chain.wait{color:#9a8b33}
.tk-alts{position:absolute;right:17px;bottom:82px;z-index:1;display:flex}
.tk-steps-btn{display:inline-flex;align-items:center;gap:3px;border:0;padding:3px var(--space-1);background:none;color:#786a2b;font-family:var(--round);font-size:var(--text-11);line-height:17px;cursor:pointer}   /* 뒷면 '경로 자세히 ▾'(2026-10-29) */
/* 굵은 전역 포커스 테두리 대신: 누르면 눌리는 효과, 키보드 포커스일 때만 얇은 표시(2026-10-30) */
.tk-steps-btn{border-radius:var(--radius-8);transition:transform var(--duration-120),background-color var(--duration-120);-webkit-tap-highlight-color:transparent}
.tk-steps-btn:focus-visible{outline:2px solid #786a2b;outline-offset:1px;border-radius:var(--radius-8)}
.tk-steps-btn:active{transform:scale(.94);background:rgba(101,91,36,.14)}
.tk-steps-btn svg{transition:transform var(--duration-200)}.tk-steps-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.tk-steps{margin:-4px 0 var(--space-1);padding:var(--space-3) 14px 6px;border-radius:var(--radius-16);background:var(--control)}   /* 펼친 단계 목록: 카드 아래 */
.tk-time{position:absolute;left:17px;right:17px;bottom:84px;display:flex;align-items:baseline;gap:7px;margin:0}
.tk-time span{font-family:var(--round);font-size:var(--text-11);color:#786a2b}
.tk-time b{font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-16);color:#51491f}
.tk-mag{position:absolute;left:7px;right:7px;bottom:52px;height:24px;background:#665347;box-shadow:inset 0 2px 0 rgba(255,255,255,.07)}
.tk-foot{position:absolute;left:17px;right:17px;bottom:14px;display:flex;justify-content:space-between;align-items:center;font-family:var(--round);font-size:var(--text-11);color:#786a2b}
.tk-edit{border:0;padding:3px 10px;border-radius:var(--radius-pill);background:#655b24;color:#fff3b1;font-family:var(--round);font-size:var(--text-11);line-height:17px;cursor:pointer}
.tk-edit,.tk-map{transition:transform var(--duration-120),background-color var(--duration-120);-webkit-tap-highlight-color:transparent}
.tk-edit:focus-visible,.tk-map:focus-visible{outline:2px solid #786a2b;outline-offset:var(--focus-offset)}   /* 키보드 Tab 일 때만 얇게(2026-10-30) */
.tk-edit:active{transform:scale(.94);background:#51491f}
.tk-acts{display:flex;gap:6px}
/* 뒷면 '지도에서 보기'(2026-10-29): 고치기 옆, 같은 크기의 테두리 단추 */
.tk-map{border:1.5px solid #655b24;padding:1.5px 9px;border-radius:var(--radius-pill);background:transparent;color:#655b24;font-family:var(--round);font-size:var(--text-11);line-height:17px;cursor:pointer}
.tk-map:active{transform:scale(.94);background:rgba(101,91,36,.14)}
.tk-map[aria-disabled=true]{opacity:.6;cursor:default}
.tk-map[aria-disabled=true]:active{transform:none;background:transparent}
@media (prefers-reduced-motion:reduce){.ticket-in{transition:none}}
/* 발권 화면(2026-10-27 사용자와 정한 시안 A: 어디서 → 어디로 → 언제 → 경로 → 타는 날 → 이름). 누르는 곳은 44px 이상.
   출발 ↔ 도착 바꾸기는 뺐다(바꾸면 경로를 다시 골라야 해서 — 사용자 2026-10-27) */
.ticket-form{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}
.tf-l{margin:var(--space-1) 0 0;font-family:var(--round);font-size:var(--text-14);color:#6f6326}
.tf-dot{flex:none;width:10px;height:10px;border-radius:var(--radius-circle);border:3px solid #4b4316}.tf-dot.to{background:#4b4316}
.tf-route{display:flex;align-items:center;border:2px solid #f3d64a;border-radius:var(--radius-16);background:#fff7cc}
.tf-pls{flex:1;min-width:0}
/* 장소 칸(2026-10-29 한 화면): 칸 하나 = 글자 칸(.tf-pl 라벨) + 오른쪽 단추(📍 내 위치 · 경유지 ✕), 바로 아래에 찾은 곳 목록(.tf-list) */
.tf-fld+.tf-fld{border-top:1.5px dashed #e8d27a}
.tf-row{display:flex;align-items:center}
.tf-pl{display:flex;align-items:center;gap:var(--space-3);flex:1;min-width:0;min-height:56px;padding:0 6px 0 14px;color:#3a3410;font:inherit;text-align:left;cursor:text}
.tf-pl span{flex:1;min-width:0}.tf-pl small{display:block;font-size:var(--text-12);font-weight:var(--weight-bold);color:#6f6326}
/* 한글이 위아래 · 왼쪽에서 잘리지 않게 줄 높이를 넉넉히 + 안쪽 여백을 주고 같은 만큼 바깥 여백으로 되돌린다 */
.tf-pl input{display:block;box-sizing:border-box;width:calc(100% + 6px);min-width:0;height:28px;margin:-2px -3px;padding:2px 3px;border:0;background:none;color:inherit;font:inherit;font-size:var(--text-16);font-weight:var(--weight-bold);line-height:24px;text-overflow:ellipsis;outline:0}
.tf-pl input::placeholder{color:#8a7a2e;font-weight:var(--weight-semibold)}
.tf-here{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:var(--space-1);padding:0;border:0;border-radius:var(--radius-12);background:none;color:#4b4316;cursor:pointer}
.tf-here:hover{background:rgba(255,225,77,.45)}.tf-here:focus-visible{outline:var(--focus-width-thin) solid var(--focus)}
/* 검색 목록: 입력 칸(노랑)과 구분되게 하얀 둥근 상자 + 옅은 그림자. 줄 48px · 글자는 칸보다 작게. 흐름 안에서 아래 칸을 밀어내며 펼쳐지고,
   높이 상한은 딱 다섯 줄 — 줄 중간에서 잘려 다음 칸에 가린 것처럼 보이지 않게, 넘치면 목록 안에서 스크롤 */
.tf-list{max-height:calc(5*48px + 8px);margin:2px var(--space-2) var(--space-2);padding:var(--space-1);overflow-y:auto;overscroll-behavior:contain;scroll-padding:4px 0;background:#fff;border:1px solid #eadf9a;border-radius:var(--radius-12);box-shadow:0 2px 8px rgba(58,52,16,.14)}
/* 카드는 테마와 상관없이 크림색이고 목록은 하얀 면이라 글자도 고정 색(다크에서 --ink 가 밝아 묻힌다) */
.pp-list.tf-list button{min-height:0;height:48px;padding:0 10px;justify-content:center;gap:0;border-bottom:1px solid #f1ecd2;border-radius:0;color:#3a3410}
.pp-list.tf-list li:last-child button{border-bottom:0}
.pp-list.tf-list b{font-size:var(--text-14);line-height:1.35;color:#3a3410}.pp-list.tf-list small,.pp-list.tf-list .empty{color:#6f6326}
.pp-list.tf-list small{font-size:var(--text-11);line-height:1.35}.pp-list.tf-list .empty{padding:var(--space-3) 10px;font-size:var(--text-13)}
.pp-list.tf-list button:hover,.pp-list.tf-list button:focus-visible{background:#fbf6d6;border-radius:var(--radius-8)}
.tf-rt{display:flex;flex-direction:column;gap:var(--space-2)}
.tf-time{position:relative;display:flex;align-items:center;gap:10px;min-height:60px;padding:0 var(--space-4);border-radius:var(--radius-16);background:#ffe14d;box-shadow:var(--shadow-edge-brand);color:#3a3410;cursor:pointer}
.tf-time span{flex:1;font-size:var(--text-13);font-weight:var(--weight-bold)}.tf-time b{font-family:var(--round);font-weight:var(--weight-regular);font-size:30px;font-variant-numeric:tabular-nums}
.tf-time em{font-style:normal;font-size:var(--text-15);margin-right:3px}
.tf-time{width:100%;border:0;font:inherit;text-align:left}.tf-time:focus-visible{outline:var(--focus-width-thin) solid var(--focus);outline-offset:var(--focus-offset)}
.tf-time .tf-chev{flex:none;opacity:.6;transition:transform var(--duration-200)}.tf-time[aria-expanded=true]{border-radius:var(--radius-16) var(--radius-16) 0 0;box-shadow:none}.tf-time[aria-expanded=true] .tf-chev{transform:rotate(180deg)}
/* 출발 시각 휠(사용자와 정한 시안 B): 오전/오후 · 시 · 분(5분 단위)을 위아래로 돌려 가운데 노란 띠에 맞춘다 */
.tf-wheel{margin-top:-8px;padding:var(--space-3) 14px 14px;border:2px solid #ffe14d;border-top:0;border-radius:0 0 var(--radius-16) var(--radius-16);background:#fff7cc;color:#3a3410;animation:jw-in var(--duration-200) var(--ease-sheet)}
.tf-wheel[hidden]{display:none}
.tw-cols{position:relative;display:flex;justify-content:center;align-items:center;gap:6px;height:200px}
.tw-band{position:absolute;left:0;right:0;top:80px;height:40px;border-radius:var(--radius-12);background:#ffe14d;box-shadow:var(--shadow-edge-brand);pointer-events:none}
.tw-col{position:relative;width:68px;height:200px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;outline:0;
  -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.tw-col::-webkit-scrollbar{display:none}
.tw-col:focus-visible{border-radius:var(--radius-14);outline:2px dashed #c9a800;outline-offset:-2px}   /* 키보드로 고를 때만: 노란 계열 점선(진한 선은 휠 위에서 딱딱해 보인다) */
.tw-col::before,.tw-col::after{content:"";display:block;height:80px}
.tw-col button{display:grid;place-items:center;width:100%;height:40px;padding:0;border:0;background:none;color:#b3a35a;font-family:var(--round);font-size:var(--text-19);scroll-snap-align:center;cursor:pointer;transition:color var(--duration-120),font-size var(--duration-120)}
.tw-col button.near{color:#7d6f2c;font-size:var(--text-21)}.tw-col button.on{color:#3a3410;font-size:27px}
.tw-colon{position:relative;font-family:var(--round);font-size:var(--text-26)}
.tw-foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-2)}.tw-foot span{font-size:var(--text-12);color:#6f6326}
.tw-ok{min-height:44px;padding:0 22px;border:0;border-radius:var(--radius-14);background:#ffe14d;box-shadow:var(--shadow-edge-brand);color:#3a3410;font-family:var(--round);font-size:var(--text-16);cursor:pointer}
@media(prefers-reduced-motion:reduce){.tf-wheel{animation:none}.tw-col{scroll-behavior:auto}}
.tf-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--space-2);min-height:56px;padding:10px 14px;border:2px solid #f3d64a;border-radius:var(--radius-16);background:#fff7cc;color:#3a3410;font:inherit;text-align:left;cursor:pointer}
.tf-pick .jtrack{flex:1 1 100%;height:22px}.tf-pick .pk{font-size:var(--text-14)}.tf-pick .pk b{font-family:var(--round);font-weight:var(--weight-regular);font-size:var(--text-18)}
.tf-pick u{margin-left:auto;font-size:var(--text-13);color:#6f6326}
.tf-pick.empty{justify-content:space-between;border-style:dashed}.tf-pick.empty .pk{font-weight:var(--weight-bold);color:#6f6326}.tf-chev{width:18px;height:18px}
.tf-dh{display:flex;align-items:center;justify-content:space-between}.tf-dh .tf-l{margin:0}
.tf-quick{display:flex}.tf-quick button{min-height:44px;padding:0 2px;border:0;background:none;font:inherit;cursor:pointer}
.tf-quick i{display:block;font-style:normal;padding:var(--space-1) 10px;border-radius:var(--radius-pill);border:1.5px solid #e3d48c;color:#5c5220;font-size:var(--text-13);font-weight:var(--weight-bold)}
.tf-quick [aria-pressed=true] i{background:#3a3410;border-color:#3a3410;color:#fff7cc}
.tf-days{display:flex;gap:var(--space-1)}
.tf-days button{flex:1;min-width:0;height:44px;border:1.5px solid #e3d48c;border-radius:var(--radius-12);background:#fffdf6;color:#5c5220;font-family:var(--round);font-size:var(--text-16);cursor:pointer}
.tf-days button[aria-pressed=true]{background:#ffe14d;border-color:#e6c62f;color:#3a3410;box-shadow:var(--shadow-edge-brand)}
.tf-in{display:flex;align-items:center;gap:var(--space-2);min-height:48px;padding:0 14px;border:2px solid #f3d64a;border-radius:var(--radius-14);background:#fff7cc}
.tf-in input{flex:1;min-width:0;border:0;background:none;color:#3a3410;font:inherit;font-size:var(--text-16);font-weight:var(--weight-bold)}.tf-in input::placeholder{color:#8a7a2e;font-weight:var(--weight-semibold)}
.tf-in input:focus{outline:0}.tf-in:focus-within,.tf-pick:focus-visible{outline:var(--focus-width-thin) solid var(--focus);outline-offset:1px}
.tf-pl:focus-within{border-radius:var(--radius-14);outline:var(--focus-width-thin) solid var(--focus);outline-offset:-2px}
.tf-in small{font-size:var(--text-12);color:#6f6326}
.tf-save{margin-top:6px;min-height:50px;border:0;border-radius:var(--radius-16);background:#ffe14d;color:#4b4316;font-family:var(--round);font-size:var(--text-17);letter-spacing:1px;box-shadow:0 4px 0 #e6c62f;cursor:pointer}
.tf-save[disabled]{opacity:.45;box-shadow:none;cursor:default}
.tf-del{min-height:44px;margin-top:var(--space-1);border:1.5px solid #f2c7b3;border-radius:var(--radius-14);background:transparent;color:#c2410c;font:inherit;font-size:var(--text-14);font-weight:var(--weight-bold);cursor:pointer}
/* 장소 찾기 목록 · 경로 목록(발권 화면 안) */
.pp-list{margin:var(--space-1) 0 0;padding:0;list-style:none}
.pp-list button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:44px;padding:10px var(--space-2);border:0;border-bottom:1px solid var(--rule);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.pp-list button:hover,.pp-list button:focus-visible{background:var(--control);border-radius:var(--radius-12)}
.pp-list b{font-size:var(--text-16)}.pp-list small{font-size:var(--text-12);color:var(--muted)}.pp-list .empty{padding:var(--space-3) var(--space-2);font-size:var(--text-14);color:var(--muted)}
/* 경로 선택 머리말: 왼쪽 달력 날짜 | 구분선 | 오른쪽 '출발지에서 → 도착지(형광 밑줄)까지 → 시각 출발'. 긴 이름은 줄바꿈 */
.rt-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:17px;margin:0 0 var(--space-3)}
.rt-cal{display:flex;flex-direction:column;align-items:flex-start;min-width:50px;padding-right:14px;border-right:1px solid var(--rule)}
.rt-month{font-size:var(--text-11);color:var(--secondary)}
.rt-day{font:400 43px/1.05 var(--round);margin:2px 0}
.rt-wd{width:25px;height:25px;border-radius:var(--radius-circle);background:var(--syung);color:#1d1f21;text-align:center;font:400 15px/25px var(--round)}
.rt-trip{min-width:0;overflow-wrap:anywhere;word-break:keep-all}
.rt-trip p{margin:0}
.rt-origin{font-size:var(--text-13);line-height:1.6;color:var(--secondary);margin-bottom:9px!important}
.rt-origin b{font-weight:var(--weight-semibold);color:var(--ink)}
.rt-dest b{font:400 29px/1.2 var(--round);letter-spacing:-.025em;box-shadow:inset 0 -7px var(--syung)}
.rt-to-sfx{font:400 20px var(--round);margin-left:5px}
.rt-time{margin-top:14px!important;line-height:1.8;font-size:var(--text-12);color:var(--secondary)}
.rt-time b{display:block;font-size:var(--text-14);color:var(--ink)}
.rt-time span{display:block}
.route-page [hidden]{display:none}
.rt-list{display:flex;flex-direction:column;gap:var(--space-2)}
.rt-filters{display:flex;flex-wrap:wrap;gap:6px var(--space-2);margin:0 0 10px}
.rt-empty{display:flex;flex-direction:column;gap:var(--space-1);padding:14px var(--space-4);border-radius:var(--radius-16);background:var(--control)}.rt-empty b{font-size:var(--text-15)}.rt-empty p{margin:0;font-size:var(--text-13);color:var(--secondary)}
.rt-plan{display:flex;gap:10px;align-items:flex-start;width:100%;padding:var(--space-3);border:2px solid var(--rule);border-radius:var(--radius-16);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.rt-plan[aria-checked=true]{border-color:#e6c62f;background:#fff7cc;color:#3a3410;box-shadow:var(--shadow-edge-brand)}
.rt-radio{flex:none;width:20px;height:20px;margin-top:3px;border-radius:var(--radius-circle);border:2px solid #c9bb78;background:#fff}
.rt-plan[aria-checked=true] .rt-radio{border:6px solid #3a3410}
.rt-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}.rt-plan .jp-min{font-size:var(--text-24)}
.rt-plan[aria-checked=true] .jp-arr,.rt-plan[aria-checked=true] .jp-meta{color:#5c5220}
.rt-foot{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom,0px));margin:var(--space-1) -8px calc(-16px - env(safe-area-inset-bottom,0px));padding:var(--space-2) var(--space-2) calc(var(--space-3) + env(safe-area-inset-bottom,0px));background:var(--paper);box-shadow:0 -8px 12px -10px rgba(20,20,20,.25)}
#routePick{width:100%}
/* 경로 고르기는 지도와 함께(.with-map — user/account.mts 가 경로 쪽에 있는 동안 붙인다): 가림막 없이 지도를 보고 움직인다.
   휴대폰(780px 이하)은 서랍이 아래 절반 시트로 줄고 위 절반에 지도(고정 절반 — 아래 시트 손잡이는 끌어 닫기뿐이라 높이 단계가 없다) */
.settings-panel.open.with-map+.menu-scrim{opacity:0;pointer-events:none}
@media(max-width:780px){
  .settings-panel.with-map{top:50%;left:0;width:auto;border-radius:var(--radius-18) var(--radius-18) 0 0;box-shadow:0 -6px 24px rgba(20,20,20,.18);padding-top:0;padding-left:env(safe-area-inset-left,0px)}
  .settings-panel.with-map .menu-head{min-height:48px;padding-top:var(--space-1)}
}
/* 알림(결과 · 연결 오류 · 입력 확인): 서랍 아래에 잠깐 떴다 사라진다 */
/* 사용자와 정한 시안 C(로고 없이): 흰 카드 + 노란 테두리(경고는 빨강), 앞의 속도선이 슝~ 들어와 멈춘다. 누르면 닫힌다 */
/* 알림 상자는 늘 문서에 있고(비어 있으면 안 보임) 카드를 그 안에 넣는다 — 숨긴 상자에 글을 넣으면 화면 낭독기가 놓친다(리뷰 2026-10-27) */
.acct-live{position:absolute;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:3;pointer-events:none}.acct-live .acct-toast{pointer-events:auto}
.acct-toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:2px solid #f3d64a;border-radius:var(--radius-16);background:var(--paper);color:#3a3410;font-size:var(--text-14-5);font-weight:var(--weight-bold);line-height:1.4;box-shadow:0 10px 24px rgba(80,60,0,.14);overflow:hidden;cursor:pointer;opacity:0;transform:translateY(14px) scale(.96);transition:opacity var(--duration-160),transform var(--duration-160)}
.acct-toast.show{opacity:1;transform:none;animation:toast-pop .42s cubic-bezier(.2,.9,.3,1.2) both}
.acct-toast .tt-speed{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.acct-toast .tt-speed i{display:block;height:3px;border-radius:var(--radius-2);background:#f3d64a}.acct-toast .tt-speed i:first-child{width:16px}.acct-toast .tt-speed i:last-child{width:9px}
.acct-toast.show .tt-speed{animation:toast-zoom .55s cubic-bezier(.2,.9,.3,1) both}
.acct-toast.is-error{border-color:#fca5a5;color:var(--ink)}.acct-toast.is-error .tt-speed i{background:#f87171}   /* 경고: 테두리 · 속도선만 빨강, 글씨는 본문색(사용자 2026-10-27) */
html[data-theme=dark] .acct-toast{color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.4)}
@keyframes toast-pop{0%{opacity:0;transform:translateY(14px) scale(.96)}60%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes toast-zoom{0%{transform:translateX(-140%)}70%{transform:translateX(8%)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.acct-toast,.acct-toast.show,.acct-toast.show .tt-speed{transition:none;animation:none}}

/* 프로필 수정 팝업(#profileSheet — 로그인 팝업 .login-sheet 모양 그대로 + 안쪽만) */
.profile-sheet .login-card{align-items:stretch;max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain}
.profile-body .pf-form{margin:0}
.profile-x{position:absolute;top:10px;right:10px;width:40px;height:40px;padding:9px;box-sizing:border-box;border:0;border-radius:var(--radius-circle);background:var(--control);color:var(--ink);cursor:pointer}
.profile-x:focus-visible{outline:var(--focus-width-thin) solid var(--focus);outline-offset:var(--focus-offset)}
.profile-x svg{display:block;width:22px;height:22px}
.profile-body{padding-top:30px}
@media(min-width:721px){.profile-sheet .login-card{width:min(400px,100%)}}