/* Korea Route: trip setup. Visual language: a subway line with stations as the progress bar. */
:root {
  --ink:#15202b; --ink2:#46535f; --ink3:#77838f; --line:#dfe3e7; --bg:#f5f6f4; --card:#ffffff; --soft:#eef2f6;
  --accent:#1f5fa8; --accent-ink:#ffffff; --accent-soft:#e6eef8; --ok:#1f5fa8; --warn:#9a6a00;
  --near:#e3ecf8; --near-ink:#1f4f8a; --mid:#f1e6c4; --mid-ink:#6a5414; --far:#f2d9d6; --far-ink:#7a302a;
  --sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink:#edf1f5; --ink2:#b5bfc9; --ink3:#828e9a; --line:#29313b; --bg:#0c0f13; --card:#151a20; --soft:#1c222a; --accent:#4d8ef7; --accent-ink:#ffffff; --accent-soft:#132339; --ok:#7fb0ee; --warn:#e2b04a; --near:#13233a; --near-ink:#9cc3f5; --mid:#3a2f12; --mid-ink:#e8c66a; --far:#3a1d1b; --far-ink:#f0a49c; color-scheme:dark; }
}
:root[data-theme="dark"] { --ink:#edf1f5; --ink2:#b5bfc9; --ink3:#828e9a; --line:#29313b; --bg:#0c0f13; --card:#151a20; --soft:#1c222a; --accent:#4d8ef7; --accent-ink:#ffffff; --accent-soft:#132339; --ok:#7fb0ee; --warn:#e2b04a; --near:#13233a; --near-ink:#9cc3f5; --mid:#3a2f12; --mid-ink:#e8c66a; --far:#3a1d1b; --far-ink:#f0a49c; color-scheme:dark; }
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15.5px; line-height:1.5; -webkit-font-smoothing:antialiased; }
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:var(--accent); }
[hidden] { display:none !important; }

/* header */
header { background:var(--card); border-bottom:1px solid var(--line); }
.bar { max-width:1080px; margin:auto; padding:12px 16px; display:flex; align-items:center; gap:12px; }
.brand { font-weight:800; font-size:19px; letter-spacing:-0.03em; color:var(--ink); text-decoration:none; }
.sp { flex:1; }
.lang { display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.lang button { border:0; background:var(--card); padding:5px 10px; font-size:13px; }
.lang button.on { background:var(--ink); color:var(--bg); }

/* progress as a subway line */
.line { list-style:none; margin:0 auto; padding:18px 16px 8px; max-width:760px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.line li { position:relative; text-align:center; font-size:12.5px; color:var(--ink3); padding-top:24px; }
.line li::before { content:""; position:absolute; top:8px; left:-50%; width:100%; height:5px; background:var(--line); }
.line li:first-child::before { display:none; }
.line li.done::before, .line li.cur::before { background:var(--accent); }
.line li i { position:absolute; top:2px; left:50%; transform:translateX(-50%); width:17px; height:17px; border-radius:50%; background:var(--card); border:4px solid var(--line); z-index:1; }
.line li.done i { border-color:var(--accent); }
.line li.cur i { border-color:var(--accent); width:21px; height:21px; top:0; box-shadow:0 0 0 4px var(--accent-soft); }
.line li.cur { color:var(--ink); font-weight:700; }
.line li button { all:unset; cursor:pointer; }
.line li:not(.done):not(.cur) button { cursor:default; }
@media (max-width:620px) { .line li span { display:none; } .line li.cur span { display:inline; position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; } }

/* step body */
.wrap { max-width:720px; margin:auto; }
main { padding:18px 16px 140px; min-width:0; }
.pv { display:none; }
@media (min-width:1060px) {
  .wrap { max-width:1120px; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; padding:0 16px; }
  main { padding:18px 0 140px; }
  .pv { display:block; position:sticky; top:16px; align-self:start; margin-top:18px; max-height:calc(100vh - 120px); overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
  .pvbtn { display:none; }
  .actions .in { max-width:1120px; padding-right:calc(16px + 368px); }
}
/* preview */
.pv-empty { color:var(--ink3); font-size:14px; text-align:center; padding:24px 8px; }
.pv-title { font-weight:800; font-size:16px; letter-spacing:-0.02em; }
.pv-sub { color:var(--ink2); font-size:13.5px; margin-top:2px; }
.pv-season { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.pv-season span { font-size:12px; font-weight:600; background:var(--accent-soft); color:var(--accent); padding:2px 8px; border-radius:99px; }
.pv-days { list-style:none; margin:12px 0 0; padding:0; }
.pv-days li { display:grid; grid-template-columns:54px 1fr; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.pv-d b { display:block; font-size:15px; line-height:1.1; }
.pv-d span { font-size:11.5px; color:var(--ink3); }
.pv-b { border-left:3px solid var(--c); padding-left:10px; min-width:0; }
.pv-city { font-size:12px; font-weight:700; color:var(--c); }
.pv-i { font-size:13.5px; margin-top:2px; }
.pv-i.fest, .pv-i.must { font-weight:600; }
.pv-i.move, .pv-i.arr, .pv-i.dep { color:var(--ink2); }
.pv-slots { display:flex; align-items:center; gap:4px; margin-top:5px; }
.pv-slots i { width:22px; height:7px; border-radius:4px; background:var(--soft); border:1px solid var(--line); }
.pv-slots em { font-style:normal; font-size:11.5px; color:var(--ink3); margin-left:4px; }
.pv-note { font-size:12.5px; color:var(--ink3); margin:12px 0 0; text-align:center; }
.pvbtn { border:1px solid var(--line); background:var(--card); border-radius:9px; padding:9px 12px; font-size:14px; font-weight:600; }
.sheet { position:fixed; inset:0; background:rgba(10,16,22,.45); z-index:40; display:flex; align-items:flex-end; }
.sheet-in { position:relative; background:var(--card); width:100%; max-height:86vh; overflow:auto; border-radius:16px 16px 0 0; padding:18px 16px calc(24px + env(safe-area-inset-bottom)); }
.sheet-x { position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:26px; color:var(--ink3); width:40px; height:40px; }
.step { animation:in .18s ease-out; }
@keyframes in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.step > h1 { text-align:center; font-size:clamp(26px, 4.4vw, 34px); line-height:1.15; letter-spacing:-0.035em; margin:10px 0 8px; font-weight:800; text-wrap:balance; }
.step > .lead { text-align:center; color:var(--ink2); margin:0 auto 26px; max-width:52ch; text-wrap:balance; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.panel + .panel { margin-top:12px; }
.panel h2 { font-size:15px; margin:0 0 10px; letter-spacing:-0.01em; }
.row { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
label.f { display:grid; gap:5px; font-size:13px; color:var(--ink2); font-weight:600; }
input[type=date], input[type=time], input[type=text], select { width:100%; border:1px solid var(--line); background:var(--card); border-radius:9px; padding:10px 11px; font-size:15px; font-weight:500; }
input:focus, select:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.note { font-size:13.5px; color:var(--ink3); margin-top:10px; }
.note.c { text-align:center; }
.note b { color:var(--ink); }
.warn { margin-top:12px; padding:10px 12px; border-radius:9px; background:#fbf3dc; color:#5c4300; font-size:14px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .warn { background:#33290f; color:#f0d48a; } }

/* stays */
.seg { display:flex; justify-content:center; gap:0; margin:0 auto 18px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--card); }
.seg button { border:0; background:transparent; padding:11px 18px; font-size:15px; font-weight:700; color:var(--ink2); }
.seg button + button { border-left:1px solid var(--line); }
.seg button[aria-checked="true"] { background:var(--ink); color:var(--bg); }
@media (max-width:420px) { .seg button { padding:10px 12px; font-size:14px; } }
.stay.nb { grid-template-columns:1.4fr 1fr auto; }
.stay .hotel { grid-column:1 / -1; }
.stay { display:grid; grid-template-columns:1.2fr .8fr 1.4fr auto; gap:10px; align-items:end; padding:12px 0; border-top:1px solid var(--line); }
.stay:first-of-type { border-top:0; padding-top:0; }
.stepper { display:flex; align-items:center; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--card); }
.stepper button { border:0; background:transparent; width:38px; height:42px; font-size:18px; }
.stepper output { flex:1; text-align:center; font-weight:700; }
.x { border:0; background:transparent; color:var(--ink3); width:36px; height:42px; font-size:20px; }
@media (max-width:620px) { .stay { grid-template-columns:1fr 1fr; } .stay .area { grid-column:1 / -1; } .stay .x { grid-column:2; justify-self:end; } }
.addrow { display:flex; justify-content:center; margin-top:12px; }
.ghost { border:1px dashed var(--line); background:transparent; border-radius:9px; padding:9px 14px; font-size:14px; color:var(--ink2); }
.count { text-align:center; margin-top:14px; font-size:14px; color:var(--ink2); }
.count b.ok { color:var(--ok); } .count b.bad { color:#b42318; }
.jeju { margin-top:12px; padding:12px 14px; border-radius:10px; background:var(--accent-soft); font-size:14px; }

/* themes */
.chips { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.chip { border:1px solid var(--line); background:var(--card); border-radius:99px; padding:9px 15px; font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:background .12s, border-color .12s; }
.chip svg { width:0; height:14px; opacity:0; margin-left:-8px; transition:opacity .12s, width .12s, margin .12s; flex:0 0 auto; }
.chip[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.chip[aria-pressed="true"] svg { opacity:1; width:14px; margin-left:-2px; }

/* pace */
.paces { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
@media (max-width:620px) { .paces { grid-template-columns:1fr; } }
.pace { text-align:left; border:1px solid var(--line); background:var(--card); border-radius:14px; padding:16px; display:grid; gap:8px; }
.pace[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.pace b { font-size:16.5px; }
.pace span { color:var(--ink2); font-size:14px; }
.daybar { display:flex; align-items:center; height:26px; position:relative; margin:4px 0 2px; }
.daybar::before { content:""; position:absolute; left:4px; right:4px; top:50%; height:3px; background:var(--line); transform:translateY(-50%); }
.daybar i { position:relative; width:12px; height:12px; border-radius:50%; background:var(--card); border:3px solid var(--accent); flex:0 0 auto; }
.daybar i + i { margin-left:auto; }
.daybar em { position:relative; font-style:normal; font-size:11.5px; color:var(--ink3); background:var(--card); padding:0 4px; margin-left:auto; }

/* extras: seasons, festivals, pop-ups */
.toggle { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:22px 18px; }
.toggle p { margin:0; color:var(--ink2); max-width:46ch; }
.btn { border:1px solid var(--line); background:var(--card); border-radius:9px; padding:10px 16px; font-size:15px; font-weight:600; }
.btn.pri { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.big { padding:13px 22px; font-size:16px; }
.sec-h { display:flex; align-items:baseline; gap:10px; margin:24px 0 10px; }
.sec-h h2 { margin:0; font-size:18px; letter-spacing:-0.02em; }
.sec-h span { color:var(--ink3); font-size:13.5px; }
.filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.filters button { border:1px solid var(--line); background:var(--card); border-radius:99px; padding:4px 11px; font-size:13px; }
.filters button.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.ev:first-child { border-top:0; }
.ev { display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }
.ev.noimg { grid-template-columns:1fr auto; }
.ev img { width:72px; height:72px; object-fit:cover; border-radius:9px; background:var(--soft); }
.ev .t { font-weight:700; line-height:1.3; }
.ev .k { color:var(--ink3); font-size:12.5px; }
.ev .m { font-size:13.5px; color:var(--ink2); margin-top:3px; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.ev .d { color:var(--accent); font-weight:700; }
.band { font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:99px; }
.band.near { background:var(--near); color:var(--near-ink); } .band.mid { background:var(--mid); color:var(--mid-ink); } .band.far { background:var(--far); color:var(--far-ink); }
.pick { border:1px solid var(--line); background:var(--card); border-radius:9px; padding:7px 12px; font-size:13.5px; font-weight:700; white-space:nowrap; }
.pick[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.season:first-child, .panel > .warn + .season { border-top:0; }
.season { padding:12px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.season .t { font-weight:700; }
.season .w { font-size:13.5px; color:var(--ink2); }
.season .tip { font-size:13px; color:var(--ink3); }
.more { display:flex; justify-content:center; margin-top:10px; }
.skeleton { height:72px; border-radius:9px; background:linear-gradient(90deg, var(--soft), var(--card), var(--soft)); background-size:200% 100%; animation:sh 1.2s infinite; margin-top:10px; }
@keyframes sh { to { background-position:-200% 0; } }

/* must-see */
.search { position:relative; }
.sugg { position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:10; max-height:300px; overflow:auto; }
.sugg button { display:flex; width:100%; text-align:left; border:0; background:transparent; padding:9px 12px; gap:10px; align-items:baseline; }
.sugg button:hover, .sugg button.on { background:var(--soft); }
.sugg small { color:var(--ink3); }
.picked { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.picked span { display:inline-flex; align-items:center; gap:6px; background:var(--soft); border-radius:99px; padding:6px 6px 6px 12px; font-size:14px; font-weight:600; }
.picked button { border:0; background:transparent; width:22px; height:22px; border-radius:50%; color:var(--ink3); }
.ideas { margin-top:16px; }
.ideas h3 { font-size:13.5px; color:var(--ink3); margin:0 0 8px; font-weight:600; text-align:center; }

/* profile */
.opts { display:flex; flex-wrap:wrap; gap:8px; }
.opts button { border:1px solid var(--line); background:var(--card); border-radius:9px; padding:8px 12px; font-size:14px; }
.opts button[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.q + .q { margin-top:16px; }
.q > div:first-child { font-weight:700; font-size:14.5px; margin-bottom:8px; }

/* review */
.summary { text-align:center; }
.summary dl { display:grid; grid-template-columns:max-content 1fr; gap:10px 18px; text-align:left; margin:0 auto; max-width:520px; }
.summary dt { color:var(--ink3); font-size:13.5px; }
.summary dd { margin:0; font-weight:600; }
/* the review step's plan cards: tap one (same look as the start page) */
.pickh { margin:26px 0 0; font-size:20px; letter-spacing:-0.02em; text-align:center; }
.tiers { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:22px; }
@media (max-width:760px) { .tiers { grid-template-columns:1fr; } }
.tier { position:relative; font:inherit; color:var(--ink); text-align:left; cursor:pointer; display:block; width:100%; border:1px solid var(--line); border-radius:16px; padding:22px 18px 18px; background:var(--card); transition:border-color .15s, box-shadow .15s, transform .15s; }
.tier:hover { border-color:var(--accent); transform:translateY(-1px); }
.tier:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tier.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset, 0 12px 30px rgba(30,78,140,.14); }
.tier .radio { position:absolute; right:16px; top:20px; width:20px; height:20px; border-radius:50%; border:2px solid var(--line); }
.tier.on .radio { border-color:var(--accent); background:radial-gradient(circle, var(--accent) 0 5px, transparent 6px); }
.tier .tag { position:absolute; left:16px; top:-11px; font-size:11.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; background:var(--accent); color:#fff; padding:3px 9px; border-radius:99px; }
.tier h3 { margin:0; font-size:16px; padding-right:28px; }
.tier .price { font-size:32px; font-weight:800; letter-spacing:-0.03em; margin:6px 0 2px; line-height:1.1; } .tier .price small { font-size:13px; font-weight:600; color:var(--ink3); letter-spacing:0; }
.tier .p { color:var(--ink3); font-size:13.5px; margin-bottom:10px; }
.tier ul { margin:0; padding:12px 0 0; list-style:none; border-top:1px solid var(--line); color:var(--ink2); font-size:14px; display:grid; gap:7px; }
.tier li { position:relative; padding-left:22px; line-height:1.4; }
.tier li::before { content:""; position:absolute; left:2px; top:5px; width:10px; height:6px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
.gobtns.one { display:grid; justify-items:center; gap:10px; }
.gobtns.one .btn.big { min-width:min(100%, 360px); }
.lnk { font:inherit; font-size:14.5px; font-weight:700; color:var(--accent); background:none; border:0; padding:4px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.signin { display:grid; justify-items:center; gap:10px; margin-top:18px; text-align:center; }
.err { color:#b42318; font-size:14px; text-align:center; }

/* bottom action bar */
.actions { position:fixed; left:0; right:0; bottom:0; background:color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter:blur(8px); border-top:1px solid var(--line); z-index:20; }
.actions .in { max-width:720px; margin:auto; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:12px; }
.actions .back { border:0; background:transparent; color:var(--ink2); font-weight:600; padding:10px 6px; }
.actions .msg { flex:1; text-align:center; font-size:13.5px; color:var(--ink3); }
@media (max-width:1059px) { .actions .msg:empty { display:none; } .actions .msg:empty + .pvbtn { margin:0 auto; } }
.actions .next { min-width:140px; }
.actions .next:disabled { opacity:.45; cursor:not-allowed; }
.jejubox { margin-top:18px; }
.jt { display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.jt input { width:20px; height:20px; margin-top:2px; accent-color:var(--accent); flex:0 0 auto; }
.jt b { display:block; font-size:16px; }
.jt small { display:block; color:var(--ink2); font-size:13.5px; margin-top:2px; }
.jejubox .q { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.chips.l { justify-content:flex-start; }
.hotel > span { font-size:13px; color:var(--ink2); font-weight:600; }
.hotel { display:grid; gap:5px; }
.hotel .hn { color:var(--ink3); font-size:12.5px; }
.hpick { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:var(--soft); }
.hpick > div { flex:1; min-width:0; }
.hpick small { color:var(--ink3); }
.hpick .ha { font-size:13px; color:var(--ink2); }
.sugg .hres { display:grid; gap:1px; text-align:left; padding:10px 12px; border-top:1px solid var(--line); }
.sugg .hres:first-child { border-top:0; }
.sugg .hres span { font-size:13.5px; color:var(--ink2); }
.sugg .hres small { font-size:12px; color:var(--ink3); }
.hpick .hk { font-size:12px; color:var(--ink3); }
.hpick .hc { font-size:12.5px; color:var(--warn); margin-top:4px; }
.ph2 { text-align:center; font-weight:800; font-size:15px; margin:0 0 10px; }
.budgets { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
@media (max-width:760px) { .budgets { grid-template-columns:1fr 1fr; } }
.bud { text-align:left; border:1px solid var(--line); background:var(--card); border-radius:14px; padding:14px; display:grid; gap:2px; align-content:start; }
.bud[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.bud b { font-size:15.5px; }
.bud .amt { font-size:17px; font-weight:800; letter-spacing:-0.02em; margin-top:4px; }
.bud .usd { font-size:12.5px; color:var(--ink3); }
.bud .bd { font-size:13px; color:var(--ink2); margin-top:6px; }
.budgets + .note + .panel { margin-top:16px; }
.mix { margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
.mix .mh { text-align:center; display:grid; gap:2px; margin-bottom:10px; }
.mix .mh span { font-size:13px; color:var(--ink2); }
.mdays { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.mday { border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:6px 9px; display:grid; gap:1px; min-width:74px; text-align:center; }
.mday span { font-size:11.5px; color:var(--ink3); }
.mday b { font-size:12.5px; }
.mday.own { background:var(--ink); border-color:var(--ink); }
.mday.own span, .mday.own b { color:var(--bg); }
.mix .note { margin-bottom:0; }
.ev .ab { font-size:13.5px; color:var(--ink2); margin-top:3px; line-height:1.4; }
.ev .m a { font-size:12.5px; color:var(--ink3); }
.gobtns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* dark mode depth: cards sit a step above the page, with a faint top light */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) header { box-shadow:inset 0 1px 0 rgba(255,255,255,.035); } }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] header { box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }

/* coupon on the last step */
.cpn { margin:0 0 12px; text-align:center; }
.cpn summary { display:inline-block; cursor:pointer; font-size:14px; color:var(--accent); font-weight:700; list-style:none; }
.cpn summary::-webkit-details-marker { display:none; }
.cpn form { display:flex; gap:8px; justify-content:center; margin-top:8px; }
.cpn input { width:190px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; text-transform:uppercase; letter-spacing:.04em; background:var(--card, #fff); color:var(--ink); }
.cpmsg { margin:6px 0 0; font-size:13.5px; }
.cpmsg.ok { color:#1d7a3a; } .cpmsg.bad { color:#b3261e; }

/* K-drama spots outside the trip's cities: day trip or one night */
.farbox { margin-top:14px; display:grid; gap:8px; }
.farbox h3 { margin:0; font-size:15px; }
.farrow { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card); }
.farrow .fr-h { margin:0; font-size:14.5px; }
.farrow .fr-h span { color:var(--ink3); font-size:13px; margin-left:4px; }
.farrow .fr-a { margin:4px 0 8px; font-size:13.5px; color:var(--ink2); }
.farrow .opts { display:flex; flex-wrap:wrap; gap:6px; }
.farrow .fr-ok { margin:8px 0 0; font-size:13px; color:#1d7a3a; }
.farrow .fr-no { margin:8px 0 0; font-size:13px; color:#b3261e; }

/* no blinking text cursor outside the fields you type in (Chrome shows one on tapped text and buttons) */
html { caret-color:transparent; }
input, textarea, select, [contenteditable="true"] { caret-color:auto; }
button, .btn, nav a { -webkit-user-select:none; user-select:none; }

@media (max-width:760px) {
  .pickh { font-size:18px; margin-top:20px; }
  .tiers { gap:8px; margin-top:16px; }
  .tier { padding:14px 14px 12px; border-radius:14px; }
  .tier .tag { top:-9px; left:14px; font-size:10.5px; }
  .tier .radio { top:14px; right:12px; }
  .tier h3 { font-size:15px; }
  .tier .price { font-size:24px; margin:2px 0 0; display:inline-block; }
  .tier .price small { font-size:12px; }
  .tier .p { display:inline; margin:0 0 0 8px; font-size:13px; }
  .tier ul { display:none; }
  .tier.on ul { display:grid; margin-top:10px; gap:6px; font-size:13.5px; }
  .tier li { padding-left:20px; }
}