/* IDK TRIP · Field Notes. Layout and design tokens, separate from feature styles. */
:root {
  --font: 'DM Sans','Noto Sans KR',system-ui,sans-serif;
  --bg:#f6f5f0; --surface:#fffefa; --surface-2:#eeeee6; --surface-3:#e6e8dd;
  --surface-warm:#f1eee5; --surface-input:#fffefa; --border:#dcded3;
  --ink:#243a31; --ink-2:#3f5147; --ink-3:#59665c; --ink-muted:#626c62;
  --coral:#b94d32; --coral-text:#a43e26; --sea:#365d48; --sea-text:#365d48;
  --sun:#dfae68; --rose:#b33e3e; --paper:var(--surface); --deep:var(--ink);
  --shadow-soft:0 4px 18px #243a3105; --shadow-card:0 10px 28px #243a3109;
  --r-card:18px; --r-lg:24px; color-scheme:light;
}
html[data-theme="dark"] {
  --bg:#18211d; --surface:#222e27; --surface-2:#2b372f; --surface-3:#344236;
  --surface-warm:#2e352c; --surface-input:#222e27; --border:#425044;
  --ink:#f2f1e8; --ink-2:#dbdfd2; --ink-3:#bdc7b9; --ink-muted:#b1bcae;
  --coral:#bd583c; --coral-text:#f0aa8e; --sea:#476d54; --sea-text:#b4d4ac;
  --shadow-soft:0 4px 18px #0001; --shadow-card:0 10px 28px #0002; color-scheme:dark;
}
body {font-family:var(--font);padding:0 40px;line-height:1.65;letter-spacing:-.025em;}
button,input,select,textarea {font-family:var(--font)!important;}
h1,h2,h3,h4,.title,.step,.tp-label,.wheel-label,.legend,.group-title,.sec-head,.card h2,
.result .place,.result .themes,.result .rdesc,.result .rwhen,.result .tag,.rspots,
.d-city,.grp-title,.tc-city,.mission-card,.mission-card .m-act,.mission-card .m-head,
.intensity-fold,.int-cap,.int-hint {font-family:var(--font);}
button,a,input,summary {touch-action:manipulation;}
button {font-weight:600;}
button:not(:disabled),a,summary {transition:background .16s,color .16s,transform .16s;}
button:disabled {cursor:not-allowed;}
:focus-visible {outline:3px solid var(--coral-text);outline-offset:4px;}
.skip-link {position:fixed;top:-80px;left:20px;z-index:10000;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:10px;}
.skip-link:focus {top:12px;}
.site-header {width:100%;max-width:1160px;min-height:104px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--border);}
.brand {display:flex;gap:11px;align-items:center;color:var(--ink);text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-1px;white-space:nowrap;line-height:1.2;}
.brand-light {font-weight:500;margin-left:4px;}
.brand small {display:block;font-size:7px;letter-spacing:1.7px;margin-top:7px;font-weight:600;}
.brand-mark {width:42px;height:42px;border-radius:13px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:32px;line-height:1;}
.tabbar {position:static;inset:auto;transform:none;display:flex;align-items:center;gap:4px;max-width:none;width:auto;padding:0;margin:0 auto;background:none;border:none;box-shadow:none;border-radius:0;z-index:1;}
.tabbtn {font-family:var(--font);border-radius:9px;font-size:13px;padding:11px 14px;background:none;color:var(--ink-3);white-space:nowrap;min-height:44px;flex:none;box-shadow:none;}
.tabbtn.on {background:var(--surface-3);color:var(--ink);}
.tabbtn:hover {background:var(--surface-2);}
.tab-badge {background:var(--surface);color:var(--ink);font-size:10px;padding:1px 5px;margin-left:3px;border:1px solid var(--border);}
.header-tools {display:flex;gap:6px;}
.header-tools button {background:transparent;color:var(--ink);border:1px solid var(--border);border-radius:50%;height:40px;min-width:40px;padding:7px;font-size:11px;}
.tab {width:100%;max-width:1160px;}
.stepper {width:100%;justify-content:flex-start;gap:10px;margin:29px 0 24px;}
.step {font-size:11px;font-weight:600;padding:5px 11px;border:1px solid transparent;background:transparent;color:var(--ink-muted);border-radius:6px;min-height:32px;}
.step.on {background:var(--surface-3);color:var(--ink);border-color:var(--border);}
.step.done {background:transparent;color:var(--sea-text);}
.step:disabled {opacity:.6;}
.screen {max-width:none;}
#screen0.active {display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);column-gap:64px;align-items:start;}
.journey-intro {grid-column:1;grid-row:1;margin:5px 0 24px;}
.eyebrow {display:flex;align-items:center;gap:8px;font-size:9px;font-weight:700;letter-spacing:1.7px;margin-bottom:22px;color:var(--ink-muted);}
.eyebrow>span {width:7px;height:7px;background:var(--coral);border-radius:50%;}
.journey-intro h1 {font-size:clamp(32px,3.8vw,49px);font-weight:700;line-height:1.35;letter-spacing:-2.3px;word-break:keep-all;}
.hero-description {font-size:13px;line-height:1.9;color:var(--ink-3);margin-top:19px;word-break:keep-all;}
.journey-intro h1,.hero-description {white-space:pre-line;}
#scopeSeg {grid-column:1;grid-row:2;justify-self:start;margin:0 0 20px;background:var(--surface-2);border:1px solid var(--border);box-shadow:none;border-radius:10px;padding:4px;}
.scope-btn {font-size:12px;min-height:36px;padding:7px 19px;border-radius:7px;}
.scope-btn.on {background:var(--surface);color:var(--ink);box-shadow:0 2px 4px #00000008;}
.stage {grid-column:2;grid-row:1 / 7;margin:0;gap:0;align-self:stretch;min-height:530px;background:var(--surface-2);border:1px solid var(--border);border-radius:28px;padding:25px 25px 23px;position:relative;overflow:hidden;background-image:radial-gradient(var(--border) .8px,transparent .8px);background-size:18px 18px;}
.wheel-caption {display:flex;justify-content:space-between;width:100%;font-size:9px;font-weight:700;letter-spacing:1.8px;color:var(--ink-muted);margin-bottom:21px;}
.wheel-caption span:last-child {font-size:22px;line-height:1;}
.wheel-block {gap:14px;width:100%;}
.wheel-label {font-size:12px;background:var(--surface);box-shadow:none;border:1px solid var(--border);padding:5px 16px;margin-bottom:10px;}
.big .wheel {width:clamp(260px,28vw,350px);height:clamp(260px,28vw,350px);box-shadow:0 0 0 7px var(--surface),0 0 0 8px var(--border),0 18px 30px #243a3114;}
.pointer {border-top-color:var(--ink);border-left-width:11px;border-right-width:11px;border-top-width:23px;top:-13px;filter:none;}
.hub {width:54px;height:54px;border:6px solid var(--surface);background:var(--ink);box-shadow:0 0 0 1px var(--border);font-size:22px;color:var(--bg);}
.legend {font-size:11px;gap:18px;margin-top:12px;}
.legend .sw {width:8px;height:8px;border-radius:50%;}
.origin-sel {font-size:11px;min-height:30px;padding:4px 8px;}
.theme-pick {grid-column:1;grid-row:3;text-align:left;margin:0 0 14px;max-width:470px;}
.tp-label {font-size:12px;font-weight:700;margin-bottom:10px;}
.tp-label small {font-size:10px;font-weight:400;margin-left:3px;}
.tp-chips {justify-content:flex-start;gap:7px;}
.tp-chip {font-size:12px;padding:8px 13px;border-radius:8px;border:1px solid var(--border);background:transparent;min-height:37px;color:var(--ink-2);}
.tp-chip.on,#themeRandomChip.on {background:var(--ink);color:var(--bg);border-color:var(--ink);}
.intensity-fold {grid-column:1;grid-row:4;text-align:left;margin:0 0 22px;}
.intensity-fold>summary {font-size:11px;}
.int-cap {font-size:11px;}
.intensity-fold .int-seg {margin-top:7px;}
#screen0>.btn-row:not(#decideRow) {grid-column:1;grid-row:5;justify-content:flex-start;gap:11px;margin:0;flex-direction:column;align-items:flex-start;}
.btn {border-radius:10px;letter-spacing:0;box-shadow:none;}
.btn-spin {background:var(--coral);color:#fff;font-size:17px;padding:16px 32px;font-weight:700;min-width:220px;box-shadow:none;}
.btn-spin:hover {background:var(--coral-text);filter:none;transform:translateY(-1px);}
.btn-go {font-size:14px;padding:13px 24px;box-shadow:none;}
.btn-sec,.btn-back {font-size:13px;padding:11px 19px;box-shadow:none;}
#manualToggle {background:transparent;border:0;font-size:11px;padding:5px 0;color:var(--ink-3);box-shadow:none;}
.manual-pick {grid-column:1;grid-row:6;margin-top:12px;text-align:left;}
#manualBox {grid-column:1 / -1;margin-top:24px;width:100%;max-width:none;}
#result {grid-column:1 / -1;max-width:none;width:100%;margin:30px 0 0;text-align:left;padding:26px 30px;border-left:4px solid var(--coral);}
#result:not(.show) {display:none;}
.result .place {font-weight:700;font-size:32px;line-height:1.4;}
.result .rdesc {margin-left:0;max-width:none;font-size:13px;}
.result .themes {font-size:16px;margin:8px 0;}
#decideRow {grid-column:1 / -1;justify-content:flex-start;margin-top:14px;}
#arrivalBox {grid-column:1 / -1;max-width:none;text-align:left;border-top:1px solid var(--border);padding-top:26px;margin-top:32px;}
#arrivalBox .arrival-types {justify-content:flex-start;}
.arrival-q {font-family:var(--font);font-size:14px;}
.arrival-type {font-size:12px;border:1px solid var(--border);border-radius:9px;box-shadow:none;color:var(--ink-2);background:var(--surface);}
.foot-note {max-width:none;text-align:left;font-size:10px;line-height:1.9;color:var(--ink-muted);margin:35px 0 0;border-top:1px solid var(--border);padding-top:17px;}
.site-footer {width:100%;max-width:1160px;display:flex;gap:20px;align-items:center;margin:40px 0 24px;padding-top:20px;border-top:1px solid var(--border);font-size:10px;color:var(--ink-muted);}
.site-footer>span:first-child {font-weight:800;letter-spacing:1px;color:var(--ink);}
.site-footer>span:last-child {margin-left:auto;font-size:8px;letter-spacing:1.4px;}
#placesTab,#randomTab,#tripsTab {max-width:880px;margin-top:26px;}
.card {border:1px solid var(--border);padding:28px;box-shadow:none;}
.card h2 {font-size:24px;font-weight:700;letter-spacing:-1px;}
.card .lead {font-size:13px;line-height:1.9;}
.group-title {font-size:13px;font-weight:700;border-bottom:1px solid var(--border);padding-bottom:10px;margin-top:26px;}
.pc-input {font-family:var(--font);font-size:14px;border-radius:10px;min-height:44px;}
.pc-card {border:1px solid var(--border);border-radius:16px;box-shadow:none;padding:22px;}
.pc-title {font-family:var(--font);font-size:17px;font-weight:700;}
.pc-foot {border-top:1px solid var(--border);padding-top:12px;margin-top:16px;}
.pc-vote button {min-width:44px;min-height:40px;border-radius:8px;}
.pc-vote button:disabled {opacity:.5;}
.cat-btn {border-radius:12px;box-shadow:none;font-size:12px;}
.link-btn {box-shadow:none;border:1px solid var(--border);border-radius:12px;}
.trips-empty {border:1px dashed var(--border);border-radius:20px;padding:60px 24px;background:var(--surface);color:var(--ink-3);}
.trip-card {box-shadow:none;border:1px solid var(--border);}
.trips-toolbar {gap:12px;flex-wrap:wrap;}
.detail-overlay {z-index:9500;}
.detail-sheet {border:1px solid var(--border);box-shadow:0 25px 80px #0003;padding:26px;}
.toast {position:fixed;bottom:95px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);border-radius:12px;padding:14px 20px;max-width:calc(100% - 32px);width:max-content;font-size:13px;z-index:99999;box-shadow:var(--shadow-card);}
@media(min-width:1300px){.stage{min-height:566px;}.wheel-caption{margin-bottom:22px;}.big .wheel{width:370px;height:370px;}}
@media(max-width:1000px){body{padding:0 24px;}.site-header{gap:14px;}.brand small{display:none;}.tabbtn{padding:10px;font-size:12px;}#screen0.active{column-gap:30px;}.journey-intro h1{font-size:37px;}.stage{padding:20px 16px;min-height:516px;}.big .wheel{width:290px;height:290px;}.hero-description br{display:none;}}
@media(max-width:760px){
  body{padding:0 20px 82px;}.site-header{min-height:82px;justify-content:space-between;}.brand{font-size:22px;}.brand-mark{width:34px;height:34px;font-size:27px;}.header-tools{margin-left:auto;}
  .tabbar{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;z-index:9000;background:var(--surface);border-top:1px solid var(--border);padding:10px 8px calc(10px + env(safe-area-inset-bottom));justify-content:space-around;border-radius:0;gap:0;flex-wrap:nowrap;}
  .tabbtn{flex:1;min-width:0;font-size:11px;padding:10px 6px;}.stepper{margin:20px 0;gap:5px;}.step{font-size:10px;}
  #screen0.active{display:flex;align-items:stretch;gap:0;}.journey-intro{order:0;margin:0 0 24px;}.eyebrow{font-size:8px;margin-bottom:14px;letter-spacing:1.3px;}.journey-intro h1{font-size:36px;letter-spacing:-1.8px;}.hero-description{font-size:12px;margin-top:15px;}
  #scopeSeg{order:1;align-self:flex-start;margin-bottom:16px;}.scope-btn{font-size:11px;padding:7px 16px;}
  .theme-pick{order:2;max-width:none;margin-bottom:13px;}.tp-chip{font-size:11px;padding:8px 11px;}.tp-label{font-size:12px;}.tp-label small{font-size:9px;}
  .intensity-fold{order:3;margin-bottom:18px;}.stage{order:4;min-height:0;padding:19px 18px 22px;border-radius:20px;margin-bottom:20px;}.wheel-caption{margin-bottom:16px;font-size:8px;}.wheel-label{font-size:11px;margin-bottom:8px;}.wheel-block{gap:11px;}.big .wheel{width:min(66vw,310px);height:min(66vw,310px);}.legend{margin-top:8px;}
  #screen0>.btn-row:not(#decideRow){order:4;align-items:center;}.btn-spin{width:100%;font-size:16px;}#manualToggle{padding:8px;}.manual-pick{order:5;text-align:center;margin:5px 0 18px;}.stage{order:6;}#manualBox{order:6;}
  #result{order:7;padding:22px;margin-top:24px;}.result .place{font-size:26px;}#decideRow{order:8;}#arrivalBox{order:9;}.foot-note{font-size:9px;margin-top:28px;}.site-footer{margin-top:28px;gap:9px;}.site-footer>span:last-child{display:none;}
  .card{padding:20px;border-radius:18px;}.card h2{font-size:22px;}.cat-grid{gap:8px;}.cat-btn{padding:12px 5px;}.pc-card{padding:18px;}.pc-title{font-size:16px;}.detail-sheet{padding:20px 16px;}.basket-bar{bottom:85px;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation:none!important;transition:none!important;}}
@media(max-width:360px){.tabbtn{font-size:10px;padding:10px 3px;}.tab-badge{font-size:9px;padding:0 3px;}.journey-intro h1{font-size:31px;letter-spacing:-1.5px;}}
html[data-theme="dark"] .btn-spin:hover{background:var(--coral);filter:brightness(1.08);}