/* 도쿄 여행 v4 — Claude Design 핸드오프(2026-10-16) 토큰과 구성 요소 */
:root {
  --c-ink: #141414; --c-ink-2: #38383b; --c-ink-3: #5a5a5f;
  --c-line: #e4e4e1; --c-line-2: #c9c9c5; --c-bg: #ffffff; --c-bg-2: #f3f3f1;
  --c-now: oklch(0.5 0.16 255); --c-now-bg: oklch(0.955 0.025 255);
  --c-warn: oklch(0.52 0.2 27); --c-warn-bg: oklch(0.96 0.025 27);
  --c-ok: oklch(0.5 0.12 150); --c-ok-bg: oklch(0.96 0.03 150); --c-star: oklch(0.68 0.15 70);
  --fs-xs: 13px; --fs-s: 15px; --fs-m: 17px; --fs-l: 20px; --fs-xl: 26px; --fs-xxl: 40px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-pill: 999px; --hit: 44px;
  --font-ko: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ja: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  --tabbar: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--font-ko); font-size: var(--fs-s); line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; text-align: inherit; }
button:disabled { opacity: .45; cursor: default; }
a { color: var(--c-ink); }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(var(--tabbar) + var(--safe-b) + 24px); }
.ja { font-family: var(--font-ja); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--c-ink-2); }
.faint { color: var(--c-ink-3); }
.small { font-size: var(--fs-xs); }
.boot { padding: 40vh 20px 0; text-align: center; color: var(--c-ink-2); }
.pad { padding: 0 20px; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 0 16px; border-radius: var(--r-m); border: 1px solid var(--c-line-2); background: #fff; font-size: var(--fs-m); font-weight: 700; text-decoration: none; text-align: center; line-height: 1.2; }
.btn.primary { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.btn.warn { background: var(--c-warn); color: #fff; border-color: var(--c-warn); font-weight: 800; }
.btn.sm { min-height: var(--hit); font-size: var(--fs-s); padding: 0 12px; }
.btn.block { width: 100%; }
.btn svg { width: 18px; height: 18px; }
.gbtn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit); padding: 0 12px; border-radius: var(--r-m); background: var(--c-bg-2); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--c-ink); }
.pill { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border-radius: var(--r-pill); background: var(--c-bg-2); font-size: 14px; font-weight: 700; white-space: nowrap; }
.pill.on { background: var(--c-ink); color: #fff; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.row { display: flex; gap: 6px; }
.row > * { flex: 1; }
.wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: var(--c-bg-2); color: var(--c-ink-2); white-space: nowrap; flex: none; }
.tag.ink { background: var(--c-ink); color: #fff; }
.tag.now { background: var(--c-now); color: #fff; }
.tag.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.tag.ok { background: var(--c-ok-bg); color: var(--c-ok); }
.star { color: var(--c-star); }
.daygrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.daygrid button { min-height: var(--hit); border-radius: var(--r-m); border: 1px solid var(--c-line-2); background: #fff; font-size: 14px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.daygrid button small { font-size: 11px; font-weight: 600; }
.daygrid button.on { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.sep { border-top: 8px solid var(--c-bg-2); }

/* 탭 머리 */
.th { position: sticky; top: 0; z-index: 6; background: var(--c-bg); border-bottom: 1px solid var(--c-line); padding: 8px 16px 10px; }
.th-t { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 8px; }
.th-t b { font-size: var(--fs-l); font-weight: 800; }
.th-t span { font-size: 14px; color: var(--c-ink-2); }
.th-t .r { margin-left: auto; font-weight: 700; }
.backbar { position: sticky; top: 0; z-index: 6; background: var(--c-bg); border-bottom: 1px solid var(--c-line); display: flex; align-items: center; gap: 6px; padding: 6px 12px; }
.backbar .back { min-height: var(--hit); padding: 0 10px; font-size: 16px; font-weight: 700; }
.backbar b { font-size: 16px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backbar .r { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--c-ink-2); padding-right: 8px; }

/* 홈: 상단 막대 */
.topbar { position: sticky; top: 0; z-index: 7; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.topbar .in { display: flex; align-items: center; gap: 8px; padding: 6px 16px; }
.daybtn { min-height: var(--hit); padding: 0 16px; border-radius: var(--r-pill); background: var(--c-bg-2); display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.daybtn i { font-style: normal; font-size: 11px; color: var(--c-ink-3); }
.homebtn { margin-left: auto; min-height: var(--hit); padding: 0 16px; border-radius: var(--r-pill); background: var(--c-ink); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.homebtn svg { width: 16px; height: 16px; }
.topbar .daygrid { padding: 0 16px 10px; }

/* 지도 */
.map { position: relative; height: 120px; background: #ecece8; border-bottom: 1px solid var(--c-line); overflow: hidden; transition: height .2s; }
.map.moving { height: 104px; }
.map.big { height: 380px; }
.map iframe, .map #lmap { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map #lmap { display: none; z-index: 1; }
.map.leaf #lmap { display: block; }
.map.leaf iframe { visibility: hidden; }
.map .shield { position: absolute; inset: 0; z-index: 2; }
.map.big .shield { display: none; }
.map .seg { position: absolute; left: 12px; bottom: 10px; z-index: 3; display: flex; padding: 3px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.map .seg button { min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; }
.map .seg button.on { background: var(--c-ink); color: #fff; }
.map .mapr { position: absolute; right: 12px; bottom: 10px; z-index: 3; display: flex; gap: 6px; }
.map .mapr > * { min-height: var(--hit); padding: 0 14px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--c-ink); }
.map .mapr svg { width: 16px; height: 16px; }
.map:not(.big) .leaflet-control-zoom { display: none; }
.lpin { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--c-ink); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.25); white-space: nowrap; padding: 0 4px; min-width: 28px; width: auto; }
.lpin.on { background: var(--c-now); border-color: var(--c-now); color: #fff; }
.lpin.done { background: var(--c-bg-2); border-color: var(--c-line-2); color: var(--c-ink-3); }

/* 홈: 지금 */
.nowh { padding: 14px 20px 0; }
.eyebrow { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; color: var(--c-ink-2); }
.eyebrow .cnt { color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.eyebrow .moving { color: var(--c-now); }
.nowt { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; margin-top: 2px; }
.nowt b { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.nowt.m b { font-size: 24px; }
.nowt .ja { font-size: 18px; font-weight: 500; color: var(--c-ink-2); }
.nows { font-size: var(--fs-s); color: var(--c-ink-2); }
.stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; border-radius: var(--r-l); background: var(--c-now-bg); padding: 10px 0; font-variant-numeric: tabular-nums; }
.stat3 > div { padding: 0 14px; }
.stat3 > div + div { border-left: 1px solid #fff; }
.stat3 small { display: block; font-size: 13px; color: var(--c-ink-2); font-weight: 600; }
.stat3 b { font-size: 22px; font-weight: 800; }
.stat3 .now small, .stat3 .now b { color: var(--c-now); }
.count { margin: 12px 20px 0; padding: 12px 16px 14px; border-radius: var(--r-l); background: var(--c-now-bg); display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 10px; font-variant-numeric: tabular-nums; }
.count .l small { display: block; font-size: 14px; font-weight: 700; color: var(--c-now); }
.count .l b { font-size: var(--fs-xxl); font-weight: 800; color: var(--c-now); line-height: 1; }
.count .l b span { font-size: 20px; }
.count .r { text-align: right; }
.count .r small { display: block; font-size: 14px; font-weight: 600; color: var(--c-ink-2); }
.count .r b { font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; }
.count .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #fff; overflow: hidden; }
.count .bar i { display: block; height: 100%; background: var(--c-now); }
.count.plain { background: var(--c-bg-2); }
.count.plain .l small, .count.plain .l b { color: var(--c-ink); }
.phases { display: flex; flex-direction: column; gap: 4px; margin: 10px 20px 0; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--c-line); font-size: 14px; }
.phases div { display: flex; gap: 10px; }
.phases .t { font-weight: 800; font-variant-numeric: tabular-nums; flex: none; width: 92px; }
.phases .on { color: var(--c-now); font-weight: 700; }
.late { margin: 12px 20px 0; padding: 14px 14px 12px; border-radius: var(--r-l); background: var(--c-warn-bg); border: 1.5px solid var(--c-warn); }
.late b { display: block; font-size: 18px; font-weight: 800; color: var(--c-warn); }
.late p { margin: 2px 0 0; font-size: var(--fs-s); color: var(--c-ink-2); }
.late .grid3 { margin-top: 10px; }
.late .btn { min-height: 48px; font-size: 15px; padding: 0 6px; }
.calm { margin: 12px 20px 0; padding: 12px 14px; border-radius: var(--r-l); background: var(--c-now-bg); font-size: var(--fs-s); }
.calm .grid2 { margin-top: 10px; }
.calm .btn { min-height: 44px; font-size: 15px; }
.nextb { padding: 16px 20px 0; }
.nextb .h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.nextb .h b { font-weight: 700; }
.nextb .n { font-size: var(--fs-l); font-weight: 800; letter-spacing: -0.01em; margin-top: 2px; line-height: 1.3; }
.nextb .j { font-size: 14px; color: var(--c-ink-2); }
.legcard { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; border: 1px solid var(--c-line-2); border-radius: var(--r-l); background: #fff; padding: 10px 14px 12px; text-align: left; }
.rstrip { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--c-ink-2); flex-wrap: wrap; }
.rstrip .c { padding: 4px 8px; border-radius: 6px; background: var(--c-bg-2); }
.rstrip .c.line { background: var(--lc); color: var(--lfg, #141414); }
.legdir { display: flex; align-items: center; gap: 12px; width: 100%; }
.legdir .d { flex: 1; min-width: 0; }
.legdir .d b { display: block; font-family: var(--font-ja); font-size: 24px; font-weight: 900; line-height: 1.1; }
.legdir .d span { font-size: 14px; color: var(--c-ink-2); }
.legdir .go { font-size: 22px; color: var(--c-ink-3); }
.legtxt { font-size: var(--fs-s); color: var(--c-ink-2); line-height: 1.5; }
.stale { font-size: 14px; color: var(--c-warn); font-weight: 700; }
.acts { padding: 12px 20px 0; }
.acts .grid3 { margin-top: 8px; }
.memo { margin: 20px 20px 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--c-bg-2); font-size: var(--fs-s); line-height: 1.5; color: var(--c-ink-2); }
.memo b { color: var(--c-ink); }
.acc { display: flex; align-items: center; gap: 8px; width: calc(100% - 40px); margin: 8px 20px 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: var(--r-m); background: #fff; font-size: var(--fs-s); text-align: left; }
.acc b { font-weight: 700; flex: none; }
.acc span { color: var(--c-ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc i { margin-left: auto; font-style: normal; color: var(--c-ink-3); flex: none; }
.acc-b { margin: 0 20px; padding: 10px 14px 12px; font-size: var(--fs-s); line-height: 1.55; color: var(--c-ink-2); }
.facts { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.facts > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--c-line); }
.facts dt, .facts .k { font-size: 14px; font-weight: 700; color: var(--c-ink-2); }
.facts .v { font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.facts .v small { display: block; font-size: 14px; color: var(--c-ink-2); }
.homefacts { margin: 14px 20px 0; }
.must { display: flex; flex-wrap: wrap; gap: 6px; }
.must span { padding: 6px 10px; border-radius: var(--r-s); background: var(--c-bg-2); font-size: 14px; }
.must b { font-family: var(--font-ja); margin-right: 4px; }

/* 예약 상태 띠 (식당 대안) */
.bookstrip { margin: 12px 20px 0; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--c-line-2); font-size: 14px; }
.bookstrip.hard { border-color: var(--c-warn); background: var(--c-warn-bg); }
.bookstrip.ok { border-color: var(--c-ok); background: var(--c-ok-bg); }
.bookstrip .h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; }
.bookstrip p { margin: 4px 0 0; color: var(--c-ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bookstrip .alt { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: var(--r-s); background: #fff; }
.bookstrip .alt .nm { flex: 1; min-width: 0; }
.bookstrip .alt .nm b { display: block; font-size: 15px; }
.bookstrip .alt .nm span { font-size: 13px; color: var(--c-ink-2); }
.bookstrip .alt .btn { min-height: 40px; font-size: 14px; padding: 0 12px; flex: none; }
.bookstrip .grid2 { margin-top: 8px; }
.bookstrip .grid2 .btn { min-height: 44px; font-size: 14px; }

/* 이동 단계 목록 */
.steps { padding: 14px 20px 0; display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding-bottom: 10px; }
.step .rail { display: flex; flex-direction: column; align-items: center; }
.step .rail i { flex: 1; width: 2px; background: var(--c-line-2); margin-top: 4px; }
.step .dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--c-ink); margin-top: 3px; flex: none; }
.step .sq { width: 24px; height: 24px; border-radius: 6px; background: var(--c-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; }
.step .wk { width: 24px; height: 24px; border-radius: 50%; background: var(--c-bg-2); display: flex; align-items: center; justify-content: center; flex: none; }
.step .wk svg { width: 15px; height: 15px; }
.step b { display: block; font-size: 16px; font-weight: 800; }
.step span { font-size: 14px; color: var(--c-ink-2); line-height: 1.45; }
.ridebox { width: 100%; text-align: left; border: 2px solid var(--c-ink); border-radius: var(--r-l); background: #fff; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ridebox .top { display: flex; align-items: center; gap: 10px; }
.ridebox .top b { font-size: 16px; font-weight: 800; }
.ridebox .top .ja { font-weight: 500; color: var(--c-ink-2); }
.ridebox .top em { margin-left: auto; font-style: normal; font-size: 14px; color: var(--c-ink-2); font-weight: 600; flex: none; }
.ridebox .dir { font-family: var(--font-ja); font-size: 30px; font-weight: 900; letter-spacing: 0.02em; line-height: 1.1; }
.ridebox .dk { font-size: 15px; font-weight: 700; }
.ridebox .ft { font-size: 14px; color: var(--c-ink-2); }
.ridebox .ft b { color: var(--c-ink); }
.step .rail .lc { flex: 1; width: 4px; border-radius: 2px; margin-top: 8px; background: var(--lc); }
.step .nowdot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-now); box-shadow: 0 0 0 5px var(--c-now-bg); margin-top: 16px; flex: none; }

/* 노선 표지 */
.ls { --sz: 44px; width: var(--sz); height: var(--sz); border-radius: 50%; border: 5px solid var(--lc, #888); background: #fff; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; flex: none; color: var(--c-ink); }
.ls b { font-size: 13px; font-weight: 900; }
.ls small { font-size: 11px; font-weight: 800; }
.ls.s { --sz: 28px; border-width: 4px; }
.ls.s b { font-size: 11px; }
.ls.xs { --sz: 32px; border-width: 4px; }
.ls.xs b, .ls.xs small { font-size: 9px; }
.ls.l { --sz: 64px; border-width: 7px; }
.ls.l b { font-size: 20px; }
.ls.l small { font-size: 16px; }

/* 하루 일정 */
.tl { margin-top: 28px; padding: 20px 20px 32px; }
.tl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tl-h b { font-size: var(--fs-l); font-weight: 800; flex: none; }
.tl-h span { font-size: 14px; color: var(--c-ink-2); text-align: right; }
.tl-tools { display: flex; gap: 6px; margin-top: 10px; }
.tl-tools .gbtn { flex: 1; }
.past { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; min-height: 48px; padding: 0 14px; border-radius: var(--r-m); background: var(--c-bg-2); font-size: var(--fs-s); text-align: left; }
.past b { font-weight: 700; flex: none; }
.past span { color: var(--c-ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.past i { font-style: normal; color: var(--c-ink-3); flex: none; }
.tlist { display: flex; flex-direction: column; margin-top: 14px; }
.trow { display: grid; grid-template-columns: 46px 28px minmax(0, 1fr) 30px 32px; column-gap: 6px; }
.trow .t { font-size: var(--fs-s); font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 6px; }
.trow .rail { display: flex; flex-direction: column; align-items: center; }
.trow .node { width: 26px; height: 26px; border-radius: 50%; margin-top: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: #fff; border: 2px solid var(--c-ink); flex: none; }
.trow .rail i { flex: 1; width: 2px; background: var(--c-line-2); min-height: 8px; }
.trow.last .rail i { background: transparent; }
.trow .c { padding: 4px 0 12px; min-width: 0; }
.trow .c > .tb { display: block; width: 100%; text-align: left; }
.trow .nm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trow .nm b { font-size: var(--fs-m); font-weight: 700; }
.trow .meta { font-size: 14px; color: var(--c-ink-2); }
.trow .more { width: 32px; height: 36px; margin-top: 1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c-ink-2); font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.trow.done .t, .trow.done .nm b, .trow.done .meta { color: var(--c-ink-3); }
.trow.done .nm b { text-decoration: line-through; }
.trow.done .node { background: var(--c-bg-2); border-color: var(--c-bg-2); color: var(--c-ink-3); }
.trow.cur .node { background: var(--c-now); border-color: var(--c-now); color: #fff; }
.trow.sel .c { background: linear-gradient(var(--c-bg-2), var(--c-bg-2)) no-repeat 0 0 / 100% calc(100% - 8px); border-radius: 8px; padding-left: 8px; margin-left: -8px; }
.trow.fixedi .t::after { content: ' 고정'; display: block; font-size: 10px; font-weight: 800; color: var(--c-ink-2); }
.walkline { margin-top: 8px; font-size: 14px; color: var(--c-ink-2); display: flex; align-items: center; gap: 6px; }
.walkline::before { content: ''; width: 14px; border-top: 2px dotted var(--c-ink-3); flex: none; }
.walkline.warn { color: var(--c-warn); font-weight: 700; }
.ridecard { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--c-line-2); border-radius: var(--r-m); display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: #fff; }
.ridecard .x { min-width: 0; }
.ridecard .x b { display: block; font-size: var(--fs-s); font-weight: 800; }
.ridecard .x span { display: block; font-size: 14px; color: var(--c-ink-2); line-height: 1.45; }
.ridecard .x small { display: block; font-size: 13px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.gaptag { font-size: 12px; font-weight: 800; margin-left: 4px; }
.gaptag.warn { color: var(--c-warn); }

/* 지하철 구간 화면 */
.rv-bar { height: 10px; background: var(--lc); }
.rv { padding: 18px 20px 0; }
.rv-from { display: flex; align-items: center; gap: 14px; }
.rv-from small { display: block; font-size: 14px; font-weight: 700; color: var(--c-ink-2); }
.rv-from b { display: block; font-family: var(--font-ja); font-size: 30px; font-weight: 900; line-height: 1.15; }
.rv-from span { font-size: var(--fs-s); color: var(--c-ink-2); }
.rv-dir { margin-top: 18px; padding: 16px; border-radius: var(--r-l); background: var(--c-ink); color: #fff; }
.rv-dir small { display: block; font-size: 14px; font-weight: 700; opacity: .85; }
.rv-dir b { display: block; font-family: var(--font-ja); font-size: 44px; font-weight: 900; line-height: 1.1; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.rv-dir b.long { font-size: 30px; }
.rv-dir .k { font-size: var(--fs-l); font-weight: 800; margin-top: 2px; }
.rv-dir .plat { display: inline-flex; margin-top: 10px; padding: 6px 10px; border-radius: 8px; background: var(--lc); color: var(--lfg, #141414); font-size: var(--fs-s); font-weight: 800; line-height: 1.3; }
.rv-dir .train { font-size: 14px; margin-top: 8px; opacity: .9; }
.rv-rows { display: flex; flex-direction: column; margin-top: 8px; }
.rv-row { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.rv-row > .k { font-size: 14px; font-weight: 700; color: var(--c-ink-2); padding-top: 4px; }
.rv-row .st { display: flex; gap: 10px; align-items: flex-start; }
.rv-row .st b { display: block; font-size: 18px; font-weight: 800; }
.rv-row .st b.big { font-size: 22px; font-weight: 900; }
.rv-row .st span { font-size: 14px; color: var(--c-ink-2); }
.rv-row .st span.ok { color: var(--c-ok); font-weight: 700; }
.rv-row .tx { font-size: var(--fs-s); color: var(--c-ink-2); line-height: 1.5; }
.exitchip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; background: #f2c200; color: #141414; font-size: 20px; font-weight: 900; }
.rv-xfer { margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--c-bg-2); font-size: var(--fs-s); line-height: 1.5; }
.rv-xfer b { display: block; font-size: 16px; }
.bigst { text-align: left; }

/* 식당 */
.slots { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 32px; }
.slot { border: 1px solid var(--c-line-2); border-radius: var(--r-l); overflow: hidden; scroll-margin-top: 150px; }
.slot-h { width: 100%; min-height: 52px; padding: 10px 14px; background: #fff; display: flex; align-items: center; gap: 8px; text-align: left; }
.slot-h b { font-size: var(--fs-m); font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.slot-h .ar { font-size: 14px; color: var(--c-ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-h .cnt { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--c-ink-2); flex: none; }
/* 비교 표: 가게 칸은 고정, 나머지는 옆으로 민다 (메뉴 → 내 위치 → 다음 장소 → 점수 → 예산 → 예약) */
.geobar { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--c-ink-2); }
.geobar span { flex: 1; min-width: 0; }
.slot-nx { display: flex; align-items: center; gap: 6px; padding: 0 14px 8px; background: #fff; font-size: 13px; color: var(--c-ink-2); }
.slot-nx b { color: var(--c-ink); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.slot-nx span { flex: none; }
.slot-nx .sw { margin-left: auto; font-size: 12px; color: var(--c-ink-3); }
.ctw { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.ctw::-webkit-scrollbar { display: none; }
.ctt { min-width: 652px; }
.ct-h, .crow { display: grid; grid-template-columns: 152px 92px 76px 76px 74px 64px 52px; gap: 6px; padding: 6px 14px 6px 0; }
.ct-h > :first-child, .crow > .g { position: sticky; left: 0; z-index: 1; padding-left: 14px; padding-right: 6px; background: inherit; box-shadow: 1px 0 0 var(--c-line); }
.ct-h { background: var(--c-bg-2); font-size: 12px; font-weight: 700; color: var(--c-ink-2); align-items: center; }
.ct-h button { font: inherit; color: inherit; text-align: left; padding: 0; min-height: 28px; text-decoration: underline dotted; text-underline-offset: 3px; }
.ct-h button.on { color: var(--c-now); text-decoration: none; }
.crow .mn, .crow .ds { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.crow .mn b, .crow .ds b { font-size: 13px; font-weight: 700; }
.crow .mn small, .crow .ds small { font-size: 11px; color: var(--c-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.f2d { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.f2d > div { padding: 8px 10px; border-radius: var(--r-m); background: var(--c-bg-2); min-width: 0; }
.f2d small { display: block; font-size: 12px; color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f2d .v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.f2d .v span { font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.f2d .lnk { padding: 0; min-height: 28px; font-size: 14px; font-weight: 800; color: var(--c-now); text-decoration: underline; }
.ctabs.many { grid-auto-flow: column; grid-auto-columns: 31%; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.ctabs.many::-webkit-scrollbar { display: none; }
.ctabs.many button { scroll-snap-align: start; }
.crow { width: 100%; align-items: center; min-height: 56px; padding: 8px 14px 8px 0; border-top: 1px solid var(--c-line); background: #fff; text-align: left; font-variant-numeric: tabular-nums; }
.crow .g { min-width: 0; display: flex; flex-direction: column; }
.crow .g .l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crow .g .l1 { align-items: flex-start; }
.crow .g .l1 b { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; }
.crow.plan .g .l1 b { font-weight: 800; }
.crow .g .ja { font-size: 12px; color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .g .cl { font-size: 12px; font-weight: 800; color: var(--c-warn); }
.crow .sc { font-size: var(--fs-s); font-weight: 800; }
.crow .pr { font-size: 13px; font-weight: 600; line-height: 1.25; }
.crow .rs { font-size: 13px; font-weight: 700; line-height: 1.25; }
.rs.ok, .v.ok { color: var(--c-ok); }
.rs.warn, .v.warn { color: var(--c-warn); }
.rs.mid, .v.mid { color: var(--c-ink); }
.slot .bookstrip { margin: 0; border: none; border-top: 1px solid var(--c-line); border-radius: 0; }
.ctabs { display: grid; gap: 6px; padding: 0 4px; }
.ctabs button { min-height: 60px; padding: 6px 8px; border-radius: var(--r-m); border: 1px solid var(--c-line-2); background: #fff; text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; }
.ctabs button.on { border: 2px solid var(--c-ink); }
.ctabs .tg { font-size: 11px; font-weight: 800; color: var(--c-ink-2); }
.ctabs .tg.p { color: var(--c-ink); }
.ctabs .nm { font-size: 13px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ctabs .sc { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cd { padding: 16px 20px 32px; }
.cd .nm { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; line-height: 1.25; }
.cd .jn { font-family: var(--font-ja); font-size: 16px; color: var(--c-ink-2); }
.cd .ar { font-size: 14px; color: var(--c-ink-2); }
.f4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; border: 1px solid var(--c-line-2); border-radius: var(--r-m); font-variant-numeric: tabular-nums; }
.f4 > div { padding: 10px; min-width: 0; }
.f4 > div + div { border-left: 1px solid var(--c-line); }
.f4 small { display: block; font-size: 12px; font-weight: 700; color: var(--c-ink-2); }
.f4 .v { font-size: var(--fs-s); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.f4 .v.big { font-size: 18px; }
.cmp { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--c-bg-2); font-size: var(--fs-s); line-height: 1.55; }
.pcl { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pcl div { display: flex; gap: 8px; font-size: var(--fs-s); line-height: 1.45; }
.pcl i { font-style: normal; font-weight: 900; width: 12px; flex: none; }
.pcl .p i { color: var(--c-ok); }
.pcl .m { color: var(--c-ink-2); }
.kv2 { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid var(--c-line); }
.kv2 > div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-s); }
.kv2 .k { font-weight: 700; color: var(--c-ink-2); }
.kv2 .v { min-width: 0; overflow-wrap: anywhere; }
.links3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.links3 a { min-height: var(--hit); border: 1px solid var(--c-line-2); border-radius: var(--r-m); background: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.inplan { margin-top: 10px; min-height: 52px; border-radius: var(--r-m); background: var(--c-bg-2); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--c-ink-2); }
.nvt { font-size: 13px; color: var(--c-ink-2); margin-top: 6px; }

/* 일본어 */
.cats { display: flex; flex-wrap: wrap; gap: 6px; }
.phrs { padding: 6px 20px 32px; }
.phrs .g { font-size: 13px; font-weight: 700; color: var(--c-ink-2); padding: 14px 0 2px; }
.phr { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--c-line); }
.phr > button:first-child { flex: 1; min-width: 0; padding: 12px 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.phr .jp { font-family: var(--font-ja); font-size: 20px; font-weight: 700; line-height: 1.35; }
.phr .rd { font-size: 14px; color: var(--c-ink-2); }
.phr .ko { font-size: var(--fs-s); font-weight: 600; }
.spk { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--c-bg-2); display: flex; align-items: center; justify-content: center; }
.spk svg { width: 22px; height: 22px; }
.bigv { position: fixed; inset: 0; z-index: 40; background: #fff; display: flex; flex-direction: column; padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + var(--safe-b)); }
.bigv .pos { font-size: 14px; font-weight: 700; color: var(--c-ink-2); }
.bigv .mid { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; min-height: 0; overflow: auto; }
.bigv .jp { font-family: var(--font-ja); font-size: 52px; font-weight: 900; line-height: 1.25; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.bigv .jp.long { font-size: 38px; }
.bigv .kr { padding-top: 16px; border-top: 2px solid var(--c-ink); }
.bigv .kr b { display: block; font-size: 22px; font-weight: 700; }
.bigv .kr span { display: block; font-size: var(--fs-m); color: var(--c-ink-2); margin-top: 4px; }
.bigv .ctl { display: grid; grid-template-columns: 56px 56px 1fr 56px; gap: 8px; }
.bigv .ctl button { height: 60px; border-radius: var(--r-m); border: 1px solid var(--c-line-2); background: #fff; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bigv .ctl .close { border: none; background: var(--c-ink); color: #fff; font-size: 19px; font-weight: 800; }
.bigv .ctl .spkb { border: none; background: var(--c-bg-2); }
.bigv .ctl svg { width: 24px; height: 24px; }

/* 정보 */
.seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; border-radius: var(--r-m); background: var(--c-bg-2); }
.seg3 button { min-height: 40px; border-radius: 10px; font-size: var(--fs-s); font-weight: 700; color: var(--c-ink-2); }
.seg3 button.on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); color: var(--c-ink); }
.ipage { padding: 16px 20px 32px; }
.ipage .cat { font-size: 14px; font-weight: 700; color: var(--c-ink-2); }
.ipage .tt { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; }
.ipage .tt b { font-size: 28px; font-weight: 800; line-height: 1.25; }
.ipage .tt .ja { font-size: 18px; color: var(--c-ink-2); }
.ipage .sum { margin-top: 10px; font-size: var(--fs-s); line-height: 1.6; color: var(--c-ink-2); }
.ipage .facts { margin-top: 12px; }
.ipage .acts3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 6px; margin-top: 14px; }
.ipage .acts3 .btn { min-height: 48px; font-size: 15px; padding: 0 6px; }
.ipage h3 { font-size: 16px; font-weight: 800; margin: 22px 0 8px; }
.tipl { display: flex; flex-direction: column; gap: 8px; }
.tipl div { padding: 12px 14px; border-radius: var(--r-m); background: var(--c-bg-2); font-size: var(--fs-s); line-height: 1.5; }
.lacc { width: 100%; margin-top: 14px; min-height: 48px; display: flex; align-items: center; border-top: 1px solid var(--c-line); font-size: 16px; font-weight: 800; text-align: left; }
.lacc i { margin-left: auto; font-style: normal; font-size: 14px; color: var(--c-ink-2); font-weight: 700; }
.prose { font-size: var(--fs-s); line-height: 1.65; color: var(--c-ink-2); }
.src { font-size: 13px; color: var(--c-ink-3); margin-top: 14px; line-height: 1.5; }
.src a { color: var(--c-ink-3); }
.secs { display: flex; flex-direction: column; padding: 8px 16px 32px; }
.sech { min-height: 56px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--c-line); padding: 0 4px; text-align: left; width: 100%; }
.sech b { font-size: var(--fs-m); font-weight: 800; flex: none; }
.sech span { font-size: 14px; color: var(--c-ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sech i { margin-left: auto; font-style: normal; color: var(--c-ink-3); flex: none; }
.secb { padding: 12px 4px 4px; }
.ts { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.ts .rail { display: flex; flex-direction: column; align-items: center; }
.ts .rail i { flex: 1; width: 2px; background: var(--c-line-2); }
.ts .cd2 { width: 30px; height: 30px; border-radius: 50%; border: 4px solid var(--lc, #8a8a8a); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; background: #fff; flex: none; }
.ts .x { padding-bottom: 14px; min-width: 0; }
.ts .x b { display: block; font-size: 16px; font-weight: 800; }
.ts .x span { display: block; font-size: var(--fs-s); color: var(--c-ink-2); line-height: 1.5; }
.ts .x small { display: block; font-size: 13px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.todo { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.todo .w { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.todo .x { font-size: var(--fs-s); line-height: 1.45; min-width: 0; }
.todo .x span { color: var(--c-ink-2); }
.todo .btn { min-height: 40px; font-size: 13px; padding: 0 10px; }
.cardx { padding: 12px 14px; border: 1px solid var(--c-line-2); border-radius: var(--r-m); font-size: 14px; line-height: 1.55; }
.search { width: 100%; min-height: 48px; border-radius: var(--r-m); background: var(--c-bg-2); border: none; padding: 0 14px; font-size: 16px; }
.plist { display: flex; flex-direction: column; margin-top: 8px; }
.prow { min-height: 64px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--c-line); padding: 8px 0; text-align: left; width: 100%; }
.prow .x { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prow .x .l1 { display: flex; align-items: center; gap: 6px; }
.prow .x .l1 b { font-size: 16px; font-weight: 700; }
.prow .x .ja { font-size: 13px; color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .x small { font-size: 13px; color: var(--c-ink-2); }
.prow > i { color: var(--c-ink-3); font-size: 18px; font-style: normal; }

/* 수정 */
.who { display: flex; padding: 3px; border-radius: var(--r-pill); background: var(--c-bg-2); margin-left: auto; }
.who button { min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; }
.who button.on { background: var(--c-ink); color: #fff; }
.esec { padding: 16px 20px 0; }
.esec + .esec, .esec.sep { margin-top: 20px; border-top: 8px solid var(--c-bg-2); }
.esec .h { display: flex; align-items: center; gap: 8px; }
.esec .h b { font-size: var(--fs-m); font-weight: 800; }
.esec .h span { font-size: 13px; color: var(--c-ink-2); margin-left: auto; }
.esec .h .btn { margin-left: auto; }
.esec .note { font-size: 14px; color: var(--c-ink-2); margin-top: 6px; }
.field { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--c-line-2); background: #fff; font-size: 16px; }
textarea.field { min-height: 72px; resize: vertical; line-height: 1.45; }
select.field { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a5a5f' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; font-weight: 700; }
.lbl { display: block; font-size: 13px; font-weight: 700; color: var(--c-ink-2); margin-bottom: 6px; }
.fgrp { margin-top: 14px; }
.nlres { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--c-line-2); }
.nlres ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.nlres li.err { color: var(--c-warn); }
.erow { min-height: 56px; width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--c-line); text-align: left; }
.erow .t { font-size: var(--fs-m); font-weight: 800; font-variant-numeric: tabular-nums; }
.erow .n { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erow .s { font-size: 13px; font-weight: 700; color: var(--c-ink-2); }
.erow.done .t, .erow.done .n { color: var(--c-ink-3); }
.erow.cur .s { color: var(--c-now); }
.hist { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-s); }
.hist span { color: var(--c-ink-2); }
.hist .btn { min-height: 40px; font-size: 14px; border-radius: var(--r-pill); padding: 0 12px; }
.ef { padding: 16px 20px 24px; }
.timebox { width: 100%; height: 60px; padding: 0 14px; border-radius: var(--r-m); border: 2px solid var(--c-ink); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; background: #fff; }
.stepper { height: 60px; border-radius: var(--r-m); border: 1px solid var(--c-line-2); display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.stepper button { height: 58px; font-size: 22px; font-weight: 700; text-align: center; }
.stepper span { text-align: center; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tgl { width: 100%; margin-top: 12px; min-height: 52px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--c-line-2); border-radius: var(--r-m); background: #fff; padding: 8px 14px; text-align: left; }
.tgl .tr { width: 44px; height: 26px; border-radius: 13px; background: var(--c-line-2); position: relative; flex: none; }
.tgl .tr::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.tgl.on .tr { background: var(--c-ink); }
.tgl.on .tr::after { left: 21px; }
.tgl b { display: block; font-size: var(--fs-s); }
.tgl small { font-size: 13px; color: var(--c-ink-2); }
.ordbox { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-m); background: var(--c-bg-2); }
.ordbox .k { font-size: 13px; font-weight: 700; color: var(--c-ink-2); margin-bottom: 8px; }
.ordbox .btn { min-height: 44px; font-size: 14px; padding: 0 6px; }
.ordbox .grid4 + .grid4, .ordbox .grid2 + .k, .ordbox .grid4 + .k, .ordbox .grid3 + .k { margin-top: 10px; }
.savebar { position: sticky; bottom: calc(var(--tabbar) + var(--safe-b)); background: #fff; border-top: 1px solid var(--c-line); padding: 10px 20px; display: grid; grid-template-columns: 2fr 1fr; gap: 8px; z-index: 5; }

/* 시트·토스트·탭 */
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.42); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 480px; max-height: 88vh; overflow: auto; background: #fff; border-radius: 24px 24px 0 0; padding: 20px 20px calc(24px + var(--safe-b)); }
.sheet h3 { margin: 0; font-size: var(--fs-l); font-weight: 800; line-height: 1.3; }
.sheet .sub { font-size: var(--fs-s); color: var(--c-ink-2); margin-top: 4px; }
.sheet .k { font-size: 13px; font-weight: 700; color: var(--c-ink-2); margin: 16px 0 8px; }
.sheet .grid5 .btn, .sheet .grid4 .btn, .sheet .grid3 .btn, .sheet .grid2 .btn { min-height: 48px; font-size: 15px; padding: 0 4px; }
.sheet .close { margin-top: 16px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar) + var(--safe-b) + 16px); z-index: 50; width: calc(100% - 40px); max-width: 440px; padding: 14px 16px; border-radius: var(--r-m); background: var(--c-ink); color: #fff; font-size: var(--fs-s); font-weight: 600; text-align: center; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tabbar) + var(--safe-b)); padding-bottom: var(--safe-b); border-top: 1px solid var(--c-line); background: rgba(255,255,255,.97); display: grid; grid-template-columns: repeat(5, 1fr); }
.tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--c-ink-3); font-size: 11px; font-weight: 700; }
.tabbar button.on { color: var(--c-ink); }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }

/* 접속 */
.gate { padding: 22vh 24px 0; max-width: 420px; margin: 0 auto; }
.gate h1 { font-size: var(--fs-xl); margin: 0 0 6px; }
.gate p { color: var(--c-ink-2); margin: 0 0 18px; }
.gate .field { margin-bottom: 10px; }
.empty { padding: 40px 20px; text-align: center; color: var(--c-ink-2); }

/* 2026-10-16 캡처 확인 뒤 손본 것 */
.bigst { display: block; }
.rv-from span, .rv-row .st span { display: block; }
.seg3 button, .who button, .stepper button { text-align: center; }
.stepper span { font-size: 17px; white-space: nowrap; }
.legdir .d b.long { font-size: 18px; }
.ridebox .dir.long { font-size: 22px; }
.todo .x span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.todo .x span.rs { display: inline; }

/* ---------- 홈 v10: 지금·다음 섹션, 네이버 지도식 경로 (2026-10-16) ---------- */
.jx { font-family: var(--font-ja); font-weight: 500; color: var(--c-ink-3); }
.hs { padding: 24px 20px 26px; }
.hs + .hs { border-top: 8px solid var(--c-bg-2); }
.hs.more { padding-top: 16px; padding-bottom: 18px; }
.hs.more .acc { width: 100%; margin: 0; }
.hs.more .acc + .acc { margin-top: 8px; }
.hs.more .homefacts { margin: 12px 0 4px; }
.sh { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.sh b { font-size: 17px; font-weight: 800; color: var(--c-ink); flex: none; }
.sh .st { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh .st .mv { color: var(--c-now); font-weight: 700; }
.sh .cnt { margin-left: auto; flex: none; color: var(--c-ink-3); }
.ht { margin-top: 8px; font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; word-break: keep-all; }
.ht.s { font-size: 21px; margin-top: 6px; }
.hj { margin-top: 3px; font-size: 14px; line-height: 1.35; }
.hm { margin-top: 4px; font-size: 14px; color: var(--c-ink-2); }
.tline { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--c-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tline b { font-size: 17px; font-weight: 700; color: var(--c-ink); }
.tline .tb2 { flex: 1; height: 4px; border-radius: 2px; background: var(--c-line); overflow: hidden; }
.tline .tb2 i { display: block; height: 100%; background: var(--c-now); }
.hs .late, .hs .calm, .hs .phases, .hs .bookstrip { margin: 14px 0 0; }
.hs .memo { margin: 16px 0 0; }
.hb { margin-top: 16px; }
.hb2 { margin-top: 8px; }
.hs + .tl.sep { margin-top: 0; }
.trow .c .meta, .crow .g .ja, .ipage .tt .ja { color: var(--c-ink-3); }

/* 경로 카드 */
.nv { display: block; width: 100%; margin-top: 16px; padding: 14px 16px 14px; border: 1px solid var(--c-line-2); border-radius: var(--r-l); background: #fff; text-align: left; }
.nv-h { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.nv-h .tot { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.nv-h .tot small { font-size: 16px; font-weight: 700; margin-left: 1px; }
.nv-h .rng { font-size: 15px; color: var(--c-ink-2); }
.nv-h .rng i { font-style: normal; color: var(--c-line-2); margin: 0 2px; }
.nv-h .go { margin-left: auto; font-size: 20px; color: var(--c-ink-3); }
.nvbar { display: flex; gap: 2px; margin-top: 14px; height: 26px; border-radius: 13px; background: var(--c-bg-2); }
.nvbar .sg { display: flex; align-items: center; justify-content: center; position: relative; min-width: 44px; height: 26px; border-radius: 13px; font-size: 12px; font-weight: 700; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.nvbar .sg.r { background: var(--lc); color: var(--lfg); min-width: 64px; padding-left: 22px; }
.nvbar .sg .ic { position: absolute; left: -1px; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 900; color: var(--c-ink); background: #fff; border: 3px solid var(--lc); }
.nvbar .sg.w { padding-left: 18px; }
.nvbar .sg.w .ic { left: 4px; top: 4px; width: 18px; height: 18px; border: none; background: transparent; }
.nvbar .sg.w .ic svg { width: 15px; height: 15px; }
.nvbar .sg em { font-style: normal; }
.nvlab { display: flex; gap: 2px; margin-top: 6px; font-size: 13px; font-weight: 800; }
.nvlab span { min-width: 44px; white-space: nowrap; overflow: visible; }
.nvlab span.r { min-width: 64px; }
.nv-k { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 14px; color: var(--c-ink-2); line-height: 1.45; }
.nv-k b { font-weight: 800; }
.nv-k.warn { color: var(--c-warn); border-top: none; padding-top: 0; }

/* 경로 시트 */
.sheet.route { padding: 0; display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; }
.rs-hd { position: relative; flex: none; padding: 10px 20px 14px; border-bottom: 8px solid var(--c-bg-2); }
.rs-hd .hdl { width: 40px; height: 5px; border-radius: 3px; background: var(--c-line-2); margin: 0 auto 14px; }
.rs-hd .x { position: absolute; right: 14px; top: 16px; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--c-bg-2); font-size: 14px; font-weight: 700; }
.rs-sub { margin-top: 10px; font-size: 14px; color: var(--c-ink-2); }
.rs-list { flex: 1; overflow: auto; padding: 4px 20px 16px; -webkit-overflow-scrolling: touch; }
.rr { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; }
.rr .rl { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 16px; }
.rr .ri { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--c-line-2); color: var(--c-ink-2); }
.rr .ri svg { width: 18px; height: 18px; }
.rr .ri.tr { border-color: var(--lc); color: var(--lc); border-width: 3px; }
.rr .ri.tx { font-size: 11px; font-weight: 800; color: #fff; border: none; }
.rr .ri.st { background: var(--c-ok); }
.rr .ri.en { background: var(--c-ink); }
.rr .rt { position: relative; z-index: 1; margin-top: 4px; padding: 1px 6px; border: 1px solid var(--c-line-2); border-radius: 6px; background: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rr .rln { position: absolute; z-index: 0; top: 33px; bottom: -33px; left: 50%; transform: translateX(-50%); }
.rr .rln.dot { border-left: 4px dotted var(--c-line-2); }
.rr .rln.solid { border-left: 6px solid var(--lc); }
.rr .rc { min-width: 0; padding: 20px 0 18px; border-bottom: 1px solid var(--c-line); }
.rr:last-child .rc { border-bottom: none; }
.rc .t1 { font-size: 18px; font-weight: 800; line-height: 1.3; word-break: keep-all; }
.rc .b { margin-top: 6px; font-size: 15px; color: var(--c-ink-2); }
.rc .b b { color: var(--c-ink); font-weight: 800; }
.rc .b2 { margin-top: 2px; font-size: 14px; color: var(--c-ink-2); }
.rc .mx { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--c-ink-3); }
.rc .mx.warn { color: var(--c-warn); font-weight: 700; }
.rc .dep { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--c-line-2); border-radius: var(--r-m); font-variant-numeric: tabular-nums; }
.rc .dep b { font-size: 17px; font-weight: 800; }
.rc .dep em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--c-warn); }
.rc .stops { margin-top: 12px; font-size: 15px; color: var(--c-ink-2); }
.rc .stops b { color: var(--c-ink); font-weight: 800; }
.exb { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; margin: 0 2px; border-radius: 12px; background: #f6c843; color: #141414; font-size: 13px; font-weight: 800; }
.rs-alt { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--c-bg-2); font-size: 14px; color: var(--c-ink-2); }
.rs-alt summary { font-weight: 800; color: var(--c-ink); cursor: pointer; }
.rs-alt p { margin: 8px 0 0; line-height: 1.5; }
.rs-ft { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 20px calc(12px + var(--safe-b)); border-top: 1px solid var(--c-line); background: #fff; }
.rs-ft .sum { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rs-ft .sum b { font-size: 20px; font-weight: 800; color: var(--c-now); }
.rs-ft .sum span { font-size: 14px; font-weight: 600; color: var(--c-now); }
.rs-ft .btn { min-height: 48px; padding: 0 18px; font-size: 16px; }
.nvbar .sg.bf { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--c-line) 4px 6px); color: var(--c-ink-3); min-width: 58px; }
.rc .mx.cl::after { content: ''; }
.hs.more .hb2 { margin-top: 8px; }
/* 상세 화면: 역 표지판 원은 위 span·b 규칙에서 뺀다 */
.rv-from .ls, .rv-row .st .ls { display: inline-flex; }
.rv-row .st .ls b, .rv-row .st .ls small { display: inline; font-size: 9px; font-weight: 900; color: var(--c-ink); }

/* 줄글 → 불릿 (2026-10-16) */
.bl { margin: 4px 0 0; padding-left: 18px; }
.bl li { margin-top: 4px; line-height: 1.5; }
.bl li:first-child { margin-top: 0; }
.bl li::marker { color: var(--c-ink-3); }
.memo .bl, .cmp .bl { margin-top: 6px; }
.bookstrip .bsx { margin-top: 4px; color: var(--c-ink-2); line-height: 1.45; }
.bookstrip .bsx .bl li { display: list-item; }
.rc .mx.cl .bl li:nth-child(n+2) { display: none; }
.rc .mx.cl::after { content: '더 보기 ›'; display: block; margin-top: 2px; font-weight: 700; color: var(--c-now); }
.rc .mx.cl1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.rv-row .tx .bl, .facts .bl, .kv2 .bl { margin-top: 2px; }
.rv-from span .bl, .rv-row .st span .bl { display: block; }

/* 한글 아래 일본어 (낱말마다 위아래로 맞춤) */
.rbs { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 6px; row-gap: 4px; }
.rbs > span:not(.rb) { line-height: 1.3; }
.rb { display: inline-flex; flex-direction: column; line-height: 1.3; }
.rb small { font-size: 12px; font-weight: 500; line-height: 1.3; margin-top: 1px; }
.rc .t1.rbs .rb small { font-size: 13px; }
.nv-k .rbs { row-gap: 6px; }

/* 일정 이모지: 제목 오른쪽, 타임라인 ⋯ 왼쪽 */
.ht { display: flex; align-items: flex-start; gap: 10px; }
.ht > span { flex: 1; min-width: 0; }
.ht .em { flex: none; font-style: normal; font-size: 30px; line-height: 1.1; }
.ht.s .em { font-size: 26px; }
.trow .em { font-size: 22px; line-height: 1; padding-top: 6px; text-align: center; }
.trow.done .em { opacity: .45; }

/* 타베로그/구글 평점 한 칸 */
.scb { display: inline-flex; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums; }
.scb i { font-style: normal; font-size: 10px; font-weight: 800; color: var(--c-ink-3); margin-right: 3px; }
.scb .t { font-size: 14px; font-weight: 800; }
.scb .g { font-size: 13px; font-weight: 700; color: var(--c-ink-2); }
.scb.big { flex-direction: column; gap: 0; }
.scb.big .t { font-size: 18px; }
.scb.big .g { font-size: 15px; }
/* 일정 제목 아래 설명 한 줄 */
.hsub { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--c-ink-2); }
.tsub { margin-top: 1px; font-size: 14px; font-weight: 600; color: var(--c-ink-2); }
.scb > span { white-space: nowrap; }
/* 평점 칸이 옆 칸으로 넘치지 않게 폭을 고정한다 */
.crow .sc { width: 74px; overflow: hidden; }
.f4 > div { min-width: 0; overflow: hidden; }
.f4 small { white-space: nowrap; }
.ctabs .sc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }

/* 평점 칸: 넓힌 폭 안에서 한 줄씩 */
.scb .t, .scb .g { display: block; white-space: nowrap; }
/* 주문 팁 · 이렇게 주문해요 */
.ordr { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-l); background: var(--c-ok-bg); }
.ordr .oh, .olines .oh { font-size: 15px; font-weight: 800; color: var(--c-ink); }
.otip { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--c-ink); }
.omenu { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.omenu > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font-size: 15px; }
.omenu b { font-weight: 800; }
.omenu .pr { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.olines { margin-top: 12px; }
.olines .phr { margin-top: 8px; }
.hs .ordr { margin-top: 16px; }
/* 사진 아이콘 · 사진 모달 */
.phob { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 8px; padding: 3px 8px; min-height: 28px; border-radius: var(--r-pill); background: var(--c-bg-2); font-size: 13px; font-weight: 800; color: var(--c-ink-2); letter-spacing: 0; }
.phob svg { width: 16px; height: 16px; }
.overlay.pm { align-items: center; background: rgba(0,0,0,.82); }
.pmod { width: calc(100% - 24px); max-width: 480px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 20px; padding: 14px 14px 16px; }
.pmod .pt { display: flex; align-items: center; gap: 8px; }
.pmod .pt b { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmod .pt span { font-size: 13px; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.pmod .pt .x { min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--c-bg-2); font-size: 14px; font-weight: 700; }
.pmod img { display: block; width: 100%; max-height: 62vh; object-fit: contain; margin-top: 10px; border-radius: 12px; background: var(--c-bg-2); }
.pmod .pc { margin-top: 10px; font-size: 15px; font-weight: 600; }
.pmod .pc small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--c-ink-3); }
.pmod .grid2 { margin-top: 12px; }
.pmod .btn { min-height: 46px; font-size: 15px; }

/* 정보 탭 · 예약 */
.seg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg4 button { font-size: 14px; padding: 0 2px; }
.bklist { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 8px; }
.bkg { font-size: 15px; font-weight: 800; color: var(--c-ink-2); margin-top: 6px; }
.bk { display: block; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--c-line-2); border-radius: var(--r-l); background: #fff; }
.bk.off { opacity: .55; }
.bk.ghost { border-style: dashed; }
.bkh { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 800; }
.bkt { margin-top: 4px; font-size: 19px; font-weight: 800; line-height: 1.3; }
.bkt small { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--c-ink-3); }
.bkr { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; margin-top: 8px; font-size: 14px; }
.bkr .k { color: var(--c-ink-2); font-weight: 700; }
.bkr .v { min-width: 0; word-break: break-all; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bkr .v .bl { width: 100%; }
.pill.sm { min-height: 28px; padding: 0 10px; font-size: 12px; }
.qrm img { background: #fff; max-height: 70vh; image-rendering: pixelated; }

/* 기록 탭 */
.jwho { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--c-ink-2); }
.jwho .who { margin-left: auto; }
.jlist { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 6px; }
.jent { padding: 14px 16px; border-radius: var(--r-l); background: var(--c-bg-2); }
.jh { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-ink-2); font-weight: 600; }
.jh .t { font-variant-numeric: tabular-nums; }
.jedit { margin-left: auto; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); background: #fff; font-size: 13px; font-weight: 700; }
.jb { margin-top: 8px; font-size: 16px; line-height: 1.6; word-break: break-word; }
.jb p { margin: 0 0 8px; }
.jb p:last-child { margin-bottom: 0; }
.jb ul, .jb ol { margin: 0 0 8px; padding-left: 22px; }
.jb li { margin-top: 2px; }
.jc { margin: 12px 16px 24px; }
.jc.ed { margin: 0; padding: 12px; border: 2px solid var(--c-ink); border-radius: var(--r-l); }
.jc textarea { width: 100%; min-height: 140px; padding: 12px 14px; font-size: 16px; line-height: 1.6; resize: none; border-radius: var(--r-m); }
.jc.ed textarea { margin-top: 8px; }
.jbar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.jbar .jst { flex: 1; min-width: 0; font-size: 13px; color: var(--c-ink-3); }
.jhelp { margin-top: 6px; font-size: 12px; color: var(--c-ink-3); }
.tag.now { background: var(--c-now-bg); color: var(--c-now); }