/* Layout/control patterns adapted from Korea Route ui.css and index.html.
   Neutral tokens override the original rounded, blue-accent treatment. */
:root { --bg:#fff; --surface:#f4f4f3; --ink:#191b1e; --muted:#595e65; --line:#d0d2d4; --control:#777c82; --accent:#191b1e; --on-accent:#fff; --danger:#a12628; --focus:#285a94; --accent-pastel:#dde7f5; --accent-pastel-strong:#bccde6; --accent-ink:#17324f; --accent-muted:#3e5069; --safe-b:env(safe-area-inset-bottom,0px); --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Hiragino Sans","Yu Gothic",Meiryo,"Segoe UI",sans-serif; color-scheme:light; }
:root[data-theme=dark] { --bg:#17191c; --surface:#222529; --ink:#f0f1f2; --muted:#b4b8bf; --line:#484e56; --control:#8b929b; --accent:#f0f1f2; --on-accent:#17191c; --danger:#ffabaa; --focus:#9fcaff; --accent-pastel:#26364c; --accent-pastel-strong:#3c506e; --accent-ink:#e4edf8; --accent-muted:#b6c4d8; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
a { color:inherit; text-underline-offset:3px; }
button,select { cursor:pointer; }
a,button,input,select,summary { touch-action:manipulation; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
[tabindex="-1"]:focus { outline:none; }
header { border-bottom:1px solid var(--line); }
.bar { max-width:1120px; margin:auto; padding:16px 24px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.brand { font-size:20px; font-weight:750; letter-spacing:-.035em; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.tools { display:flex; align-items:center; gap:8px; }
.tools button,.tools select { background:var(--bg); color:var(--ink); border:1px solid var(--control); border-radius:3px; min-height:44px; padding:6px 10px; font-size:14px; }
main { max-width:1120px; margin:auto; padding:24px 24px calc(64px + var(--safe-b)); min-height:70vh; }
footer { max-width:1072px; margin:auto; border-top:1px solid var(--line); padding:20px 0 calc(32px + var(--safe-b)); color:var(--muted); font-size:14px; }
.progress { display:flex; padding:0 0 18px; margin:0 0 32px; list-style:none; gap:32px; border-bottom:1px solid var(--line); font-size:14px; color:var(--muted); }
.progress li[aria-current] { color:var(--accent-ink); font-weight:750; }
.progress li span { margin-left:6px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(28px,3.5vw,36px); line-height:1.25; font-weight:750; letter-spacing:-.035em; margin:6px 0 12px; }
h2 { font-size:25px; line-height:1.35; font-weight:700; }
h3 { font-size:21px; line-height:1.4; }
p + p { margin-top:12px; }
.muted,.local-name { color:var(--muted); }
.local-name { font-size:max(.75em,13px); font-weight:400; margin-left:8px; }
.eyebrow { color:var(--muted); font-size:14px; }
.page-heading { margin:24px 0 28px; }
.lead { font-size:17px; }
.city-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:36px; align-items:start; }
.city-description { padding:16px 0; }
.city-description h2 { margin:6px 0 16px; font-size:30px; }
.city-description .primary { margin-top:24px; }
figure { margin:0; }
figure img,.photo-fallback { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:50% 35%; height:auto; background:var(--surface); }
.photo-fallback { display:grid; place-items:center; font-size:44px; color:var(--muted); }
figcaption { font-size:14px; color:var(--muted); line-height:1.6; padding-top:8px; overflow-wrap:anywhere; }
.primary { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); border-radius:3px; min-height:48px; padding:10px 20px; font-weight:650; }
.notice { color:var(--muted); font-size:15px; margin-top:20px; max-width:60ch; }
.upcoming { margin-top:36px; max-width:640px; border-top:1px solid var(--line); }
.upcoming h2 { padding:20px 0 8px; font-size:18px; }
.upcoming > div { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.back { font-size:14px; display:inline-flex; align-items:center; min-height:44px; padding:6px 0; }
form { max-width:640px; }
.date-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.date-fields label { display:grid; gap:8px; font-weight:600; }
input[type=date] { display:block; width:100%; min-width:0; border:1px solid var(--control); border-radius:3px; padding:10px 12px; background:var(--bg); color:var(--ink); min-height:48px; }
fieldset { border:0; padding:0; margin:24px 0; min-width:0; }
legend { margin-bottom:10px; font-weight:600; }
.pace-options { display:flex; flex-wrap:wrap; gap:10px 24px; }
.pace-options label { min-height:44px; display:flex; align-items:center; gap:8px; cursor:pointer; }
input[type=radio] { accent-color:var(--ink); width:18px; height:18px; margin:0; }
form .primary { margin-top:24px; }
.error { color:var(--danger); margin-top:16px; }
.trip-layout { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:36px; }
.trip-layout > * { min-width:0; }
.photo-note { font-size:14px; margin-top:10px; }
.date-tabs { display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line); gap:6px; padding-bottom:16px; }
.date-tabs button { background:var(--bg); color:var(--ink); border:1px solid var(--control); border-radius:2px; padding:8px 14px; min-height:48px; font-size:14px; }
.date-tabs button[aria-current=date] { background:var(--accent-pastel); color:var(--accent-ink); border-color:var(--accent-pastel-strong); font-weight:700; }
.date-tabs button:hover { border-color:var(--accent-pastel-strong); }
.date-tabs small { display:block; font-size:14px; font-variant-numeric:tabular-nums; }
.day { padding:20px; background:var(--accent-pastel); border:1px solid var(--accent-pastel-strong); border-radius:4px; }
.day h2 { margin:5px 0 12px; color:var(--accent-ink); }
.day h3 { margin-bottom:12px; color:var(--accent-ink); }
.day .eyebrow,.day .muted { color:var(--accent-muted); }
details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; }
summary { cursor:pointer; min-height:44px; align-content:center; }
details p { padding:8px 0 12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.skip { position:fixed; top:8px; left:8px; transform:translateY(-200%); background:var(--bg); padding:12px; z-index:5; }
.skip:focus { transform:none; }
.hub-return { display:flex; align-items:center; min-height:44px; width:fit-content; margin:0 0 16px; color:var(--muted); font-size:14px; text-underline-offset:4px; }
figcaption a { display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:700px) {
 .bar { padding:12px 16px; gap:8px; }
 .brand { font-size:18px; }
 .tools { gap:6px; }
 .tools button,.tools select { padding:6px 8px; }
 main { padding:20px 16px calc(40px + var(--safe-b)); }
 footer { margin:0 16px; padding:18px 0 calc(28px + var(--safe-b)); }
 .progress { gap:24px; margin-bottom:24px; padding-bottom:16px; }
 .page-heading { margin:20px 0 24px; }
 .city-layout,.trip-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
 .city-description { padding:0; }
 .city-description h2 { font-size:26px; }
 .primary { width:100%; }
 .date-fields { grid-template-columns:minmax(0,1fr); gap:16px; }
 .date-tabs { gap:6px; }
 .date-tabs button { flex:0 0 auto; padding:8px 12px; }
 .trip-layout aside img,.trip-layout aside .photo-fallback { max-height:220px; }
}