/* KoreaMate · style.css
   Shared components first, then two layouts:
   .ui-web  → desktop website (top nav, side panel, right-side drawer)
   .ui-app  → mobile app (full-screen map, bottom tabs, bottom sheets) */
:root{
  --bg:#f4f6fa; --card:#fff; --text:#16202e; --dim:#617083; --line:#e3e8ef;
  --blue:#0f3d7a; --accent:#1d5fd1; --red:#d7263d; --green:#16a34a; --amber:#d97706;
  --radius:14px; --shadow:0 6px 24px rgba(15,35,70,.12);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.45;overflow:hidden}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--accent)}
[hidden]{display:none!important}
.ko{font-family:'Apple SD Gothic Neo','Noto Sans KR',sans-serif}
.muted{color:var(--dim)} .small{font-size:12.5px} .center{text-align:center} .pad{padding:14px}
h2{font-size:24px;letter-spacing:-.4px} h3{font-size:17px;letter-spacing:-.2px}

/* ---------- basic controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:#fff;border-radius:10px;padding:10px 16px;font-weight:650;text-decoration:none;font-size:14px;transition:.15s}
.btn:hover{filter:brightness(1.08)} .btn:disabled{opacity:.55}
.btn.ghost{background:#eef3fb;color:var(--accent)} .btn.red{background:var(--red)} .btn.full{width:100%}
.btn.danger,.chip.danger{color:var(--red)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:6px 11px;border-radius:999px;background:#eef2f8;font-size:13px;font-weight:600;color:#28405f;text-decoration:none;white-space:nowrap;border:1px solid transparent}
.chip.on{background:var(--accent);color:#fff}
.icon-btn{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#eef2f8;font-size:15px;flex-shrink:0}
.field{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;outline:none}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,95,209,.15)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .btn-row.center{justify-content:center}
.row-form{display:flex;gap:8px} .row-form .field{flex:1}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:14px}
.notice{background:#fff7e6;border:1px solid #fde1a6;border-radius:10px;padding:10px;font-size:13px;margin:8px 0}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.switch input{display:none}
.switch span{width:36px;height:21px;border-radius:999px;background:#cfd7e3;position:relative;transition:.2s;flex-shrink:0}
.switch span::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--accent)} .switch input:checked+span::after{left:17px}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:#1a2638;color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:999;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- brand / top bar ---------- */
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:36px;height:36px;border-radius:10px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:19px}
.brand b{font-size:19px;letter-spacing:-.3px;color:var(--blue)} .brand b span{color:var(--red)}
.brand small{display:block;font-size:10.5px;color:var(--dim);font-weight:600;letter-spacing:.3px}
.brand.big .mark{width:52px;height:52px;font-size:28px;border-radius:14px} .brand.big b{font-size:26px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px;padding-top:calc(10px + var(--safe-t));z-index:30;position:relative}
.webnav{display:flex;gap:4px}
.webnav button{padding:9px 16px;border-radius:10px;font-weight:650;color:var(--dim)}
.webnav button.active{background:#eaf1fd;color:var(--accent)}
.top-right{display:flex;align-items:center;gap:10px}
.sync-pill{font-size:12px;padding:5px 10px;border-radius:999px;background:#eef5ee;color:#24613a;font-weight:600}
.acct-btn{padding:7px 12px;border-radius:10px;background:#f1f4f9;font-weight:600;font-size:14px}
.acct-btn.active{background:#eaf1fd;color:var(--accent)}

/* ---------- screens ---------- */
main{position:relative;overflow:hidden}
.screen{display:none;height:100%;overflow:auto}
.screen.active{display:block}
#screen-map{overflow:hidden}

/* ---------- map ---------- */
.map-layout{display:flex;height:100%}
.map-col{flex:1;display:flex;flex-direction:column;min-width:0}
.map-wrap{position:relative;flex:1;min-height:0}
#map{position:absolute;inset:0;background:#e6ebf2;isolation:isolate}   /* own stacking context: the SDKs' logo/scale/zoom (huge z-index) stay under our sheets and drawers */
.map-error{position:absolute;inset:auto 16px 50% 16px;transform:translateY(50%);background:#fff;padding:18px;border-radius:12px;box-shadow:var(--shadow);z-index:10;text-align:center;font-size:14px}
.map-tools{position:absolute;z-index:6;display:flex;gap:8px}
.tool{background:#fff;box-shadow:var(--shadow);border-radius:12px;height:42px;min-width:42px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:650}
.tool span{font-size:13.5px}
.tool.on{background:var(--blue);color:#fff}
#btnEmg.on{background:var(--red)}
.plan-cta{position:absolute;z-index:6;background:linear-gradient(135deg,#1d5fd1,#7c3aed);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;box-shadow:var(--shadow)}
body.has-plan .plan-cta{display:none}

/* user dot + pins (Kakao CustomOverlay content) */
.user-dot{width:18px;height:18px;border-radius:50%;background:#1d5fd1;border:3px solid #fff;box-shadow:0 0 0 2px rgba(29,95,209,.35);position:relative}
.user-dot i{position:absolute;inset:-12px;border-radius:50%;background:rgba(29,95,209,.22);animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.4);opacity:0}}
.pin{display:flex;flex-direction:column;align-items:center;cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.pin-ico{width:32px;height:32px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:#fff;border:2px solid var(--c,#1d5fd1);display:flex;align-items:center;justify-content:center;font-size:16px}
.pin-ico>*,.pin-ico{line-height:1}
.pin .pin-ico{transform:none;border-radius:50%}
.pin-label{margin-top:3px;background:#fff;border-radius:6px;padding:1px 6px;font-size:11.5px;font-weight:700;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.pin.emg-police{--c:#2563eb} .pin.emg-hospital{--c:#16a34a} .pin.emg-fire{--c:#dc2626}
.pin.emg .pin-ico{background:var(--c);color:#fff;border-color:#fff}
.pin.small .pin-ico{width:26px;height:26px;font-size:13px}
.pin.stop .pin-ico{background:var(--c);color:#fff;border-color:#fff;font-weight:800;font-size:14px}
.pin.stop .pin-label{border-left:3px solid var(--c)}
.pin.food .pin-ico{width:28px;height:28px;font-size:14px;--c:#d97706}
.pin.food.v-good .pin-ico{--c:#16a34a} .pin.food.v-bad .pin-ico{--c:#9ca3af;opacity:.8}

/* nearest-help card */
.emg-card{position:absolute;z-index:6;background:rgba(255,255,255,.97);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;width:340px}
.emg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.emg-head small{display:block;color:var(--dim);font-size:11.5px}
.emg-card.collapsed #emgList,.emg-card.collapsed .emg-calls{display:none}
.emg-card.collapsed #emgCollapse{transform:rotate(180deg)}
.emg-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:10px;cursor:pointer}
.emg-row:hover{background:#f3f6fb}
.emg-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.emg-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.emg-txt b{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
.emg-txt span{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emg-txt small{color:var(--dim);font-size:12px}
.emg-act{display:flex;gap:4px} .emg-act .chip{padding:6px 8px}
.emg-calls{display:flex;gap:6px;margin-top:8px}
.call{flex:1;text-align:center;font-size:11.5px;font-weight:700;padding:8px 4px;border-radius:9px;text-decoration:none;color:#fff}
.call.police{background:#2563eb} .call.fire{background:#dc2626} .call.info{background:#475569}

/* ---------- plan bar (under the map) ---------- */
.plan-bar{background:#fff;border-top:1px solid var(--line);padding:10px 14px;display:none}
body.has-plan .plan-bar{display:block}
.plan-bar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px}
.plan-bar-head span{display:flex;gap:6px}
.day-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.day-chip{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:12px;border:2px solid var(--line);background:#fff;text-align:left}
.day-chip .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--c);background:#fff}
.day-chip.on .dot{background:var(--c)}
.day-chip.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,#fff)}
.day-chip.focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
.day-chip b{font-size:13.5px} .day-chip small{color:var(--dim);font-size:12px}

/* ---------- day panel ---------- */
.day-panel{background:#fff;overflow:auto;display:none}
body.has-plan .day-panel{display:block}
.panel-head{padding:16px;border-bottom:1px solid var(--line);border-top:4px solid var(--c);display:flex;justify-content:space-between;gap:10px;position:sticky;top:0;background:#fff;z-index:2}
.panel-head small{color:var(--c);font-weight:700;font-size:12.5px}
.panel-tools{display:flex;flex-direction:column;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line)}
.stops{list-style:none;padding:8px 10px 30px}
.stop-row{display:flex;gap:10px;align-items:flex-start;padding:10px 6px;border-radius:12px;cursor:pointer}
.stop-row:hover{background:#f5f7fb}
.stop-num{width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.stop-main{flex:1;min-width:0}
.stop-main small{display:block;color:var(--dim);font-size:12px}
.stop-main b{font-size:15px}
.stop-main .ko{font-size:13px}
.warn{display:block;color:var(--amber);font-size:12px;font-style:normal}
.badge{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px}
.res-required{background:#fde8eb;color:#b4152b} .res-recommended{background:#fff3dc;color:#9a5b00}
.emg-toggle{opacity:.45} .emg-toggle.on{opacity:1;background:#fde8eb}
.leg{display:flex;gap:10px;padding:0 6px}
.leg-line{width:28px;display:flex;justify-content:center;flex-shrink:0}
.leg-line::before{content:'';width:3px;background:repeating-linear-gradient(var(--c) 0 6px,transparent 6px 10px);border-radius:2px}
.leg-body{flex:1;padding:4px 0 12px;min-width:0}
.modes{display:flex;gap:5px;flex-wrap:wrap}
.mode{padding:5px 8px;border-radius:9px;background:#f1f4f9;font-size:12.5px;display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;border:1.5px solid transparent}
.mode small{font-size:10.5px;color:var(--dim)}
.mode.sel{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff)}
.leg-meta{font-size:11.5px;color:var(--dim);margin-top:5px}
.leg-steps{font-size:12px;background:#f7f9fc;border-radius:8px;padding:6px 8px;margin-top:5px;line-height:1.6}
.leg-actions{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap} .leg-actions .chip{font-size:12px;padding:5px 9px}

/* ---------- drawer ---------- */
.drawer{position:fixed;z-index:40;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .3s ease}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px}
.drawer-body{overflow:auto;padding:14px 16px 24px;flex:1}
.drawer-body p{margin-bottom:8px}
.drawer-body .big{font-size:18px;font-weight:700}
.desc{font-size:15px;line-height:1.55}
.tip{background:#eef5ff;border-radius:10px;padding:10px;font-size:14px}
.res-box{border-radius:12px;padding:12px;margin:10px 0}
.res-box p{font-size:13.5px;margin:6px 0 0}
.emg-mini{background:#f7f9fc;border-radius:10px;padding:10px;margin-top:10px;font-size:13.5px;line-height:1.9}
.food-h{margin:14px 0 6px;font-size:14px} .food-h small{color:var(--dim);font-weight:500}
.food-h.v-good{color:var(--green)} .food-h.v-bad{color:#8b95a3}
.food-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer}
.food-item:hover,.food-item.hl{background:#f3f6fb}
.food-item.v-bad{opacity:.7}
.food-rank{width:24px;text-align:center;font-weight:800;color:var(--dim)}
.food-main{flex:1;min-width:0;display:flex;flex-direction:column}
.food-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.food-main small{color:var(--dim);font-size:12px}
.stars{font-size:13px;color:#d97706;font-weight:700} .stars em{color:var(--dim);font-weight:500;font-style:normal;font-size:12px}
.stars.none{color:#9aa5b4;font-weight:500;font-size:12px}

/* ---------- planner chat ---------- */
.plan-wrap,.learn-wrap,.account-wrap{max-width:820px;margin:0 auto;padding:24px 18px 40px}
.plan-wrap{display:flex;flex-direction:column;height:100%}
.plan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.setup h3{margin-bottom:14px}
.days-pick{display:flex;align-items:center;gap:16px}
.days-pick input{flex:1;accent-color:var(--accent);height:30px}
.days-pick b{font-size:22px;color:var(--accent);min-width:90px;text-align:right}
.range-labels{display:flex;justify-content:space-between;color:var(--dim);font-size:12px;margin-bottom:16px}
#planExisting{margin-top:12px}
.chat{flex:1;display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;min-height:0;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.q-progress{height:4px;background:#eef2f8} .q-progress div{height:100%;background:linear-gradient(90deg,#1d5fd1,#7c3aed);transition:width .4s}
.chat-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{display:flex;gap:8px;max-width:85%}
.msg.me{align-self:flex-end}
.avatar{width:30px;height:30px;border-radius:50%;background:#eaf1fd;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bubble{background:#f1f4f9;padding:10px 13px;border-radius:14px 14px 14px 4px;font-size:14.5px}
.bubble small{display:block;font-size:11px;font-weight:700;color:var(--accent);margin-bottom:2px}
.msg.me .bubble{background:var(--accent);color:#fff;border-radius:14px 14px 4px 14px}
.typing{display:flex;gap:4px;padding:0 20px 8px}
.typing span{width:7px;height:7px;border-radius:50%;background:#9fb0c6;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.quick .chip{background:#eaf1fd;color:var(--accent);border-color:#cfe0fb}
.chat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.chat-form .field{flex:1}
.plan-done{padding:12px}

/* ---------- learn ---------- */
.learn-wrap h2{margin-bottom:14px}
.big-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.big-tabs button{background:#fff;border-radius:12px;padding:14px 8px;font-weight:700;border:2px solid transparent;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.big-tabs button span{font-size:20px;display:block}
.big-tabs button.active{border-color:var(--accent);color:var(--accent)}
.sub-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:16px;padding-bottom:4px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.info-card{background:#fff;border-radius:var(--radius);padding:16px;border-top:4px solid var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.info-card small{color:var(--red);font-weight:700;font-size:12px}
.info-card h4{margin:4px 0 6px;font-size:16px}
.info-card p{font-size:14px;color:#334155}
.deck-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.deck-head h3{display:inline}
.deck-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mastery{height:7px;background:#e7ecf3;border-radius:99px;overflow:hidden;margin:6px 0 3px;min-width:180px}
.mastery div{height:100%;background:linear-gradient(90deg,#16a34a,#22c55e);transition:width .4s}
.flash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:12px}
.flash{perspective:900px;height:170px;position:relative;cursor:pointer}
.flash-inner{position:absolute;inset:0;transition:transform .45s;transform-style:preserve-3d}
.flash.flipped .flash-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);background:#fff;box-shadow:0 2px 8px rgba(15,35,70,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;gap:4px}
.face.back{transform:rotateY(180deg);background:#f4f8ff}
.face .ko{font-size:21px} .face .en{font-size:16px}
.rom{color:var(--dim);font-size:13px;font-style:italic}
.face small{color:var(--dim);font-size:12px}
.lvl{position:absolute;bottom:8px;font-size:9px;letter-spacing:2px;color:#22c55e}
.flash-btns{display:flex;gap:6px;margin-top:8px}
.flash-btns button{padding:5px 10px;border-radius:8px;font-size:12.5px;font-weight:700;background:#fde8eb;color:#b4152b}
.flash-btns button+button{background:#e5f6ea;color:#15803d}
.say{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:#eef2f8;z-index:3}
.say.inline{position:static;margin-left:8px}
.interest-box{background:#fff;border-radius:var(--radius);padding:18px;margin-bottom:14px}
.interest-box p{margin:6px 0 12px;font-size:14px}
.interest-box .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:13px;color:var(--dim)}
.deck-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.deck-tile{background:#fff;border-radius:12px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:2px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.deck-tile small{color:var(--dim)}
.test{background:#fff;border-radius:var(--radius);padding:18px;max-width:560px;margin:0 auto}
.test-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--dim);font-weight:600}
.test-q{text-align:center;padding:26px 10px;display:flex;flex-direction:column;align-items:center;gap:4px}
.test-q .big{font-size:28px}
.test-q small{color:var(--dim);margin-top:8px}
.test-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{padding:14px 10px;border-radius:12px;background:#f1f4f9;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid transparent;min-height:62px;justify-content:center}
.opt small{color:var(--dim);font-weight:500;font-size:12px}
.opt.right{background:#e5f6ea;border-color:#22c55e} .opt.wrong{background:#fde8eb;border-color:#ef4444} .opt.dim{opacity:.5}
.test-next{text-align:center;margin-top:14px}
.test-done{background:#fff;border-radius:var(--radius);padding:24px;max-width:560px;margin:0 auto;text-align:center}
.score-ring{--p:0;width:120px;height:120px;border-radius:50%;margin:0 auto 12px;background:conic-gradient(#22c55e calc(var(--p)*1%),#e7ecf3 0);display:flex;align-items:center;justify-content:center}
.score-ring b{background:#fff;width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}
.review{text-align:left;background:#f7f9fc;border-radius:10px;padding:10px 14px;line-height:2;margin:8px 0 6px}

/* ---------- account / auth ---------- */
.account-wrap h2{margin-bottom:14px}
.field-label{display:block;font-size:13px;font-weight:650;color:var(--dim);margin:12px 0 6px}
.stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.stats li{background:#f4f7fb;border-radius:10px;padding:12px;text-align:center;font-size:12.5px;color:var(--dim)}
.stats b{display:block;font-size:20px;color:var(--text)}
.auth{position:fixed;inset:0;z-index:100;background:linear-gradient(160deg,#0f3d7a,#1d5fd1 55%,#d7263d);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
.auth-card{background:#fff;border-radius:20px;padding:28px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.auth-card .brand{justify-content:center;margin-bottom:20px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#eef2f8;border-radius:10px;padding:3px;margin-bottom:16px}
.seg button{padding:9px;border-radius:8px;font-weight:650;color:var(--dim)}
.seg button.active{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1)}
#authForm label,#authServerRow label{display:block;margin-bottom:11px}
#authForm label span,#authServerRow label span{display:block;font-size:12.5px;font-weight:650;color:var(--dim);margin-bottom:4px}
.err{color:var(--red);font-size:13px;min-height:18px;margin-bottom:6px}
.link{color:var(--dim);font-size:13px;margin:10px 0 4px;text-decoration:underline}
.or{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12px;margin:14px 0}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-card .small{margin-top:8px}

/* =====================================================================
   WEB LAYOUT (desktop website)
===================================================================== */
.ui-web body,body.ui-web{display:flex;flex-direction:column}
body.ui-web main{flex:1;min-height:0}
body.ui-web .tabbar{display:none}
body.ui-web .day-panel{width:380px;flex-shrink:0;border-right:1px solid var(--line)}
body.ui-web .panel-close{display:none}
body.ui-web .map-tools{top:14px;left:14px}
body.ui-web .emg-card{top:68px;left:14px}
body.ui-web .plan-cta{bottom:20px;left:50%;transform:translateX(-50%)}
body.ui-web .drawer{top:62px;right:0;bottom:0;width:420px;transform:translateX(105%);border-left:1px solid var(--line)}
body.ui-web .drawer.wide{width:520px}
body.ui-web .drawer.open{transform:none}
body.ui-web .toast{bottom:30px}

/* =====================================================================
   APP LAYOUT (mobile app / phone browser)
===================================================================== */
body.ui-app{display:flex;flex-direction:column}
body.ui-app main{flex:1;min-height:0}
body.ui-app .webnav,body.ui-app .top-right .sync-pill{display:none}
body.ui-app .topbar{padding:8px 14px;padding-top:calc(8px + var(--safe-t))}
body.ui-app .brand .mark{width:30px;height:30px;font-size:16px} body.ui-app .brand b{font-size:17px}
body.ui-app .acct-btn{display:none}
body.ui-app .tabbar{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--line);padding-bottom:var(--safe-b);z-index:35}
.tabbar button{padding:7px 0 8px;font-size:11px;font-weight:650;color:var(--dim);display:flex;flex-direction:column;align-items:center;gap:1px}
.tabbar button span{font-size:20px;filter:grayscale(1);opacity:.6}
.tabbar button.active{color:var(--accent)} .tabbar button.active span{filter:none;opacity:1}
body.ui-app .map-tools{top:10px;right:10px;flex-direction:column;align-items:flex-end}
body.ui-app .tool span{display:none}
body.ui-app .emg-card{top:10px;left:10px;width:calc(100% - 80px);max-width:360px;padding:10px}
body.ui-app .emg-row{padding:5px 2px}
body.ui-app .plan-cta{bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap}
/* the day panel becomes a bottom sheet over the map */
body.ui-app .day-panel{position:fixed;left:0;right:0;bottom:0;height:72vh;z-index:38;border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.18);transform:translateY(105%);transition:transform .3s;padding-bottom:var(--safe-b)}
body.ui-app.has-plan .day-panel{display:block}
body.ui-app .day-panel.open{transform:none}
body.ui-app .panel-head{border-radius:18px 18px 0 0}
body.ui-app .panel-head::before{content:'';position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#d3dae4}
body.ui-app .plan-bar{padding:8px 10px}
body.ui-app .drawer{left:0;right:0;bottom:0;max-height:78vh;border-radius:18px 18px 0 0;transform:translateY(105%);padding-bottom:var(--safe-b);z-index:45}
body.ui-app .drawer.open{transform:none}
body.ui-app .plan-wrap,body.ui-app .learn-wrap,body.ui-app .account-wrap{padding:16px 12px 30px}
body.ui-app h2{font-size:21px}
body.ui-app .big-tabs button{padding:10px 4px;font-size:13px}
body.ui-app .flash-grid{grid-template-columns:repeat(2,1fr);gap:8px}
body.ui-app .flash{height:150px}
body.ui-app .face .ko{font-size:18px}
body.ui-app .msg{max-width:92%}
body.ui-app .toast{bottom:calc(80px + var(--safe-b))}
@media (max-width:380px){ body.ui-app .flash-grid{grid-template-columns:1fr} }

/* ---------- onboarding wizard ---------- */
.setup h3{margin:6px 0 16px;font-size:20px}
.wiz-steps{display:flex;gap:5px;margin-bottom:10px}
.wiz-steps span{flex:1;height:5px;border-radius:3px;background:#e3e8ef}
.wiz-steps span.done{background:var(--accent)} .wiz-steps span.cur{background:linear-gradient(90deg,var(--accent),#7c3aed)}
.opt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.opt-card{padding:14px 12px;border-radius:12px;border:2px solid var(--line);background:#fff;font-weight:650;text-align:left;transition:.15s}
.opt-card:hover{border-color:#b9cdf1}
.opt-card.sel{border-color:var(--accent);background:#eef4ff;color:var(--accent)}
.wiz-sub{margin:18px 0 8px;font-size:14px}
.wiz-nav{justify-content:flex-end;margin-top:18px}
.chip-wrap{display:flex;flex-wrap:wrap;gap:6px}
/* ---------- diet ---------- */
.diet-bar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:8px 0;padding:8px;background:#f7f9fc;border-radius:10px}
.diet-bar .chip{font-size:11.5px;padding:4px 8px}
.chip.order{background:#16a34a;color:#fff}
.diet-bad{background:#fde8eb;color:#b4152b} .diet-good{background:#e5f6ea;color:#15803d}
/* ---------- SOS ---------- */
.tool.sos{background:#d7263d;color:#fff}
.sos-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.sos-opt{padding:12px 8px;border-radius:12px;background:#fff1f2;border:1.5px solid #fecdd3;font-weight:650;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13.5px}
.sos-opt span{font-size:24px}
.show-card{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;padding:calc(14px + var(--safe-t)) 18px calc(14px + var(--safe-b));color:#fff;background:#b3122a}
.show-card.diet{background:#0f5132}
.sc-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;opacity:.9}
.sc-top .icon-btn{background:rgba(255,255,255,.2);color:#fff;width:44px;height:44px;font-size:20px}
.sc-body{flex:1;overflow:auto;display:flex;flex-direction:column;justify-content:center;gap:14px;max-width:900px;margin:0 auto;width:100%}
.sc-body h1{font-size:clamp(40px,10vw,84px);line-height:1.1;letter-spacing:-1px}
.sc-line b{display:block;font-size:clamp(24px,5.5vw,46px);line-height:1.3;font-weight:800}
.sc-line small{display:block;font-size:14px;opacity:.75;margin-top:2px}
.sc-place{background:#fff;color:#111;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.sc-place b{font-size:clamp(22px,5vw,36px)} .sc-place span{font-size:18px} .sc-place small{color:#555}
.sc-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-top:10px}
.sc-actions .btn{padding:13px 18px;font-size:15px}
.show-card .btn.ghost{background:rgba(255,255,255,.18);color:#fff}
.show-card .btn.red{background:#fff;color:#b3122a}
/* ---------- in-app directions ---------- */
.nav-modes{margin:6px 0 12px}
.nav-modes .mode{padding:8px 12px;font-size:14px}
.nav-steps{padding-left:22px;line-height:1.55;font-size:14px;margin:6px 0}
.nav-steps li{margin-bottom:6px} .nav-steps small{color:var(--dim)}
.pin.dest .pin-ico{background:#111;border-color:#fff}
/* ---------- transit timeline (directions) ---------- */
.back-btn{margin-bottom:8px}
.alts{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.alt{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;border:1.5px solid var(--line);background:#fff;text-align:left;flex-wrap:wrap}
.alt.sel{border-color:var(--accent);background:#eef4ff}
.alt b{font-size:15px;min-width:58px} .alt span{flex:1;display:flex;flex-wrap:wrap;gap:3px;align-items:center} .alt em{color:var(--dim);font-style:normal}
.alt small{color:var(--dim);font-size:12px;width:100%;padding-left:68px}
.line-chip{display:inline-block;font-style:normal;font-weight:800;font-size:12px;padding:2px 7px;border-radius:6px;white-space:nowrap}
.tl-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 0 8px;font-size:15px}
.timeline{list-style:none;position:relative;margin:0 0 8px}
.tl{display:flex;gap:12px;position:relative;padding-bottom:14px;cursor:pointer}
.tl::before{content:'';position:absolute;left:14px;top:30px;bottom:0;width:3px;background:repeating-linear-gradient(#94a3b8 0 5px,transparent 5px 9px)}
.tl.ride::before{background:var(--lc)} .tl.end::before{display:none}
.tl-dot{width:31px;height:31px;border-radius:50%;background:#eef2f8;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;z-index:1;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.tl>div{flex:1;min-width:0;padding-top:4px;font-size:14px}
.tl small{color:var(--dim)}
.tl-board{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.tl-stop{margin:2px 0} .tl-stop.off{color:#b45309}
.tl-time{font-weight:700;color:var(--text);margin-left:4px}
.tl-meta{color:var(--dim);font-size:12.5px;margin:3px 0 4px;padding-left:2px}
.tl-ins{color:var(--dim);font-size:12.5px;margin-top:3px;line-height:1.5}
.countdown{display:inline-block;margin-left:6px;font-size:12px;font-weight:700;padding:1px 7px;border-radius:99px;background:#e5f6ea;color:#15803d}
.countdown.soon{background:#fde8eb;color:#b4152b}
.pin.board .pin-ico{background:var(--c,#16a34a);color:#fff;border-color:#fff}
.pin.alight .pin-ico{background:#fff7e6;border-color:#d97706}
.pin.board .pin-label,.pin.alight .pin-label{max-width:200px}
.food-btns{display:flex;flex-direction:column;gap:4px} .chip.go{background:var(--accent);color:#fff}
.lang-pick{border:1px solid var(--line);border-radius:10px;padding:6px 8px;font:inherit;font-size:13px;background:#fff;max-width:140px}
body.ui-app .top-right .lang-pick{display:block;max-width:110px}
body.ui-app .top-right{display:flex}
/* ---------- collapsible plan (web) ---------- */
body.ui-web .day-panel{transition:margin .3s ease}
body.ui-web.plan-collapsed .day-panel{margin-left:-380px}
.panel-hide{display:none} body.ui-web .panel-hide{display:inline-flex}
body.bar-folded .day-chips{display:none}
body.bar-folded .plan-bar-head{margin-bottom:0}
body.bar-folded #planFold{transform:rotate(180deg)}
/* ---------- trips & stop editing ---------- */
.trip-switch{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:#eef2f8;font-size:14px;max-width:60%;overflow:hidden;white-space:nowrap}
.trip-switch b{overflow:hidden;text-overflow:ellipsis}
.trip-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.trip-item{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:12px;padding:6px}
.trip-item.cur{border-color:var(--accent);background:#f4f8ff}
.trip-main{flex:1;text-align:left;display:flex;flex-direction:column;gap:2px;padding:6px}
.trip-main small{color:var(--dim)}
.add-row{list-style:none;padding:0 6px 0 44px}
.add-stop{font-size:12px;font-weight:650;color:var(--dim);padding:3px 10px;border-radius:99px;border:1px dashed #c7d0dc;opacity:.6;transition:.15s}
.add-stop:hover{opacity:1;color:var(--accent);border-color:var(--accent)}
.del-stop{width:26px;height:26px;font-size:12px;opacity:.35} .del-stop:hover{opacity:1;background:#fde8eb;color:var(--red)}
.add-time{display:flex;align-items:center;gap:8px;margin:10px 0;font-weight:650;font-size:14px}
.add-time .field{width:auto}
.add-cats{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:8px}
.add-item{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line)}
.add-item>div{flex:1;min-width:0;display:flex;flex-direction:column}
.add-item small{color:var(--dim);font-size:12px}
.stop-time-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.time-in{width:auto;padding:6px 8px}
/* ---------- app layout shown on a computer: phone frame ---------- */
html:has(body.framed){background:linear-gradient(160deg,#dfe6ef,#c5cfdc)}
/* No border-radius clip and no 3D transform on the body: Safari rasterises every map tile through a rounded, transformed
   clip on each zoom frame and grinds to a halt. `contain:paint` keeps fixed panels (drawer, sheets) inside the frame instead,
   and the rounded look comes from dark corner masks drawn on top. */
body.framed{width:400px;height:min(860px,calc(100vh - 32px));margin:16px auto;overflow:hidden;contain:paint;position:relative}
body.framed::after{content:'';position:fixed;inset:0;border-radius:38px;box-shadow:0 0 0 60px #111827;pointer-events:none;z-index:1000}   /* dark corner masks */
html:has(body.framed)::after{content:'';position:fixed;left:50%;top:6px;width:420px;height:calc(min(860px,100vh - 32px) + 20px);transform:translateX(-50%);
  border-radius:48px;background:#111827;box-shadow:0 30px 70px rgba(15,35,70,.35);z-index:-1}   /* the rounded bezel, behind the body */
html:has(body.framed){overflow:hidden;height:100%}   /* otherwise body's overflow is applied to the page, not the frame */
/* ---------- map search + place card ---------- */
.map-search{position:absolute;z-index:8;display:flex;align-items:center;gap:6px;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:0 6px 0 12px;height:44px}
.map-search input{flex:1;border:none;outline:none;font:inherit;font-size:15px;min-width:0;background:transparent}
.map-search button{width:28px;height:28px;border-radius:50%;color:var(--dim)}
.map-results{position:absolute;z-index:9;background:#fff;border-radius:12px;box-shadow:var(--shadow);max-height:55vh;overflow:auto;padding:4px}
.res-item{display:grid;grid-template-columns:1fr auto;gap:1px 8px;width:100%;text-align:left;padding:9px 10px;border-radius:9px}
.res-item:hover{background:#f3f6fb}
.res-item b{grid-column:1} .res-item small{grid-column:1;color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-item em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:12px;color:var(--dim)}
.place-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:12px 0}
.pa{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border-radius:12px;background:#f1f5fb;font-size:12.5px;font-weight:650;color:var(--text);text-decoration:none}
.pa span{font-size:20px}
.pa:hover{background:#e6eefb}
.add-pick{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;background:#f7f9fc;border-radius:12px;padding:10px}
.add-pick label{display:flex;flex-direction:column;font-size:12px;font-weight:650;color:var(--dim);gap:3px}
.add-pick .field{width:auto;padding:7px 9px}
.here-h{margin:14px 0 4px;font-size:14px}
.pin.picked .pin-ico{background:#d7263d;color:#fff;border-color:#fff}
/* web: search top-left, tools beside it, help card below */
body.ui-web .map-search{top:14px;left:14px;width:340px}
body.ui-web .map-results{top:62px;left:14px;width:340px}
body.ui-web .map-tools{left:366px}
body.ui-web .emg-card{top:68px}
/* app: search across the top, tools down the right, help card below the search */
body.ui-app .map-search{top:10px;left:10px;right:62px}
body.ui-app .map-results{top:58px;left:10px;right:10px}
body.ui-app .emg-card{top:62px}
.route-pref{margin:4px 0 10px}
.route-pref button small{font-weight:500;color:var(--dim);font-size:11px;margin-left:3px}
/* ---------- profile dropdown ---------- */
.acct-wrap{position:relative}
.acct-btn .caret{font-size:10px;color:var(--dim);margin-left:2px}
.acct-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(15,35,70,.18);border:1px solid var(--line);padding:6px;z-index:60}
.acct-menu .am-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column}
.acct-menu .am-head small{color:var(--dim);font-size:12px}
.acct-menu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;font-size:14px;font-weight:550}
.acct-menu button:hover{background:#f1f5fb}
.acct-menu button.danger{color:var(--red)}
.acct-menu hr{border:none;border-top:1px solid var(--line);margin:4px 0}

/* "Set my location" pick mode */
#map.picking, #map.picking *{cursor:crosshair!important}
#emgWhere .link{background:none;border:0;padding:0;margin:0;color:var(--blue);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.pa-desc{margin:6px 0 10px;line-height:1.45;font-size:14.5px}

/* =====================================================================
   AD PLACEMENTS (KoreaMate Money) — see js/ads.js
===================================================================== */
.ad-slot{display:flex;justify-content:center;margin:10px 0;min-width:0;width:100%}
.ad{position:relative;width:100%;max-width:var(--w,320px);height:var(--h,100px);border-radius:12px;border:1.5px dashed #c4b5fd;background:linear-gradient(135deg,#f7f3ff,#eef4ff);display:flex;flex-direction:column;justify-content:center;padding:8px 12px;cursor:pointer;overflow:hidden;color:var(--text);text-align:left;transition:.15s}
.ad:hover{border-style:solid;box-shadow:0 4px 14px rgba(124,58,237,.15)}
.ad-tag{position:absolute;top:6px;left:8px;font-size:9.5px;font-weight:800;letter-spacing:.6px;padding:1px 5px;border-radius:4px;background:#111827;color:#fff;line-height:1.4}
.ad-body{display:flex;align-items:center;gap:10px;min-width:0;padding-left:28px}
.ad-body>div{min-width:0}
.ad-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--ac,#7c3aed);color:#fff;flex-shrink:0}
.ad-body b{display:block;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-body small{display:block;color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-cta{margin-left:auto;background:var(--ac,#7c3aed);color:#fff;font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.ad-note{position:absolute;right:8px;bottom:3px;font-size:9.5px;color:#8b7bb0;white-space:nowrap}
/* 320×50 strip */
.ad.thin{padding:4px 8px}
.ad.thin .ad-body{padding-left:26px;gap:8px} .ad.thin .ad-ico{width:28px;height:28px;font-size:15px;border-radius:8px}
.ad.thin .ad-body b{font-size:12.5px} .ad.thin .ad-body small{display:none} .ad.thin .ad-note{display:none}
.ad.thin .ad-tag{top:50%;transform:translateY(-50%);left:6px;font-size:8px} .ad.thin .ad-cta{padding:4px 8px;font-size:11px}
/* 300×250 rectangle */
.ad.tall{padding:18px 14px 20px}
.ad.tall .ad-body{flex-direction:column;text-align:center;gap:10px;padding-left:0}
.ad.tall .ad-ico{width:72px;height:72px;font-size:38px;border-radius:18px}
.ad.tall .ad-body b{font-size:18px;white-space:normal} .ad.tall .ad-body small{font-size:13px;white-space:normal}
.ad.tall .ad-cta{margin:4px 0 0;padding:9px 18px;font-size:13.5px}
/* native in-feed card: stacked like the rectangle, but compact enough for a 200 px tile */
.ad.native{height:100%;min-height:120px;max-width:none;padding:12px 10px 16px}
.ad.native .ad-body{flex-direction:column;text-align:center;gap:6px;padding-left:0}
.ad.native .ad-ico{width:48px;height:48px;font-size:26px;border-radius:14px}
.ad.native .ad-body b{font-size:15px;white-space:normal} .ad.native .ad-body small{white-space:normal}
.ad.native .ad-cta{margin:2px 0 0;padding:7px 14px}
/* bottom banner under the map (web: under the plan bar · app: just above the tab bar) */
.ad-bar{background:#fff;border-top:1px solid var(--line);padding:6px 10px;display:flex;justify-content:center;flex-shrink:0}
.ad-bar .ad-slot{margin:0}
body.drawer-open #screen-map .ad-bar{display:none}       /* a place card is open → its own ad shows instead */
body.ui-app .ad-bar{padding:4px 8px}
/* planner / learn / account */
.ad-slot.wide{margin:0 0 14px}
.ad-card{display:flex;align-items:center;justify-content:center;border-top-color:#7c3aed!important;padding:10px!important}
.ad-card .ad-slot{margin:0;width:100%}
.ad-tile{min-height:170px;display:flex;border-radius:var(--radius);overflow:hidden} .ad-tile .ad-slot{margin:0;width:100%} .ad-tile .ad{border-radius:var(--radius)}
body.ui-app .ad-tile{min-height:165px}
.day-panel .ad-slot{padding:0 16px;margin:10px 0 2px}
/* stats table (Account) */
.ad-stats{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.ad-stats th,.ad-stats td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)} .ad-stats th{color:var(--dim);font-weight:650;font-size:12px}
.ad-stats td:not(:first-child),.ad-stats th:not(:first-child){text-align:right}
/* premium / hidden */
body.no-ads .ad-slot,body.no-ads .ad-bar,body.no-ads .ad-card,body.no-ads .ad-tile{display:none!important}

/* ---------- offline mode & sharing (KoreaMate Money) ---------- */
.offline-bar{background:#1a2638;color:#fff;font-size:13px;font-weight:600;text-align:center;padding:7px 12px;z-index:29;position:relative}
body.offline .sync-pill{background:#fde8eb;color:#b4152b}
.off-nav{display:flex;align-items:baseline;gap:10px;background:#f7f9fc;border-radius:12px;padding:12px 14px;margin:10px 0}
.off-nav>b{font-size:28px;color:var(--accent)} .off-nav span{color:var(--dim);font-size:14px}
.share-link{display:flex;gap:8px;margin:12px 0 4px} .share-link .field{flex:1;font-size:13px}
.share-text{width:100%;min-height:220px;font-family:'SF Mono',Menlo,monospace;font-size:12.5px;line-height:1.5;resize:vertical;white-space:pre}

/* ---------- phone layout: compact help card, foldable tool column, zoom buttons out of the way ---------- */
.emg-sum{display:none;gap:10px;font-size:12px;font-weight:600;color:var(--text);margin-top:2px;white-space:nowrap}
.emg-card.collapsed .emg-sum{display:flex}
.emg-card.collapsed #emgWhere{display:none}
.tool.toggle{display:none}
body.ui-app .tool.toggle{display:inline-flex}
body.ui-app .tool{height:36px;min-width:36px;width:36px;padding:0;font-size:15px;border-radius:10px;justify-content:center;line-height:1}
body.ui-app .map-tools{gap:6px;top:10px;right:8px}
body.ui-app.tools-collapsed .map-tools .tool:not(.toggle):not(#btnLocate):not(.sos){display:none}
body.ui-app .map-search{right:52px;height:40px}
body.ui-app .map-results{right:52px}
body.ui-app .emg-card{top:58px;left:8px;width:calc(100% - 60px);max-width:360px;padding:8px 10px;border-radius:12px}
body.ui-app .emg-head{margin-bottom:2px} body.ui-app .emg-head b{font-size:14px}
body.ui-app .emg-head .icon-btn{width:28px;height:28px;font-size:13px}
body.ui-app .emg-row{padding:4px 2px;gap:8px}
body.ui-app .emg-ico{width:28px;height:28px;font-size:14px;border-radius:8px}
body.ui-app .emg-txt b{font-size:10px} body.ui-app .emg-txt span{font-size:13.5px} body.ui-app .emg-txt small{font-size:11px}
body.ui-app .emg-act .chip{padding:4px 6px;font-size:13px}
body.ui-app .emg-calls{margin-top:6px;gap:4px} body.ui-app .call{padding:6px 2px;font-size:10.5px;border-radius:8px}
body.ui-app .emg-card:not(.collapsed) #emgList{max-height:38vh;overflow:auto}
body.ui-app .plan-cta{bottom:14px;padding:10px 16px;font-size:14px}


/* =====================================================================
   NIKE DESIGN SYSTEM THEME (KoreaMate Nike) — built from ~/DESIGN.md (Nike-design-analysis)
   Black / white / one soft grey (#f5f5f5) carry ~95% of the chrome · ink (#111) is the only "colour": every primary CTA,
   active chip, swatch and headline · pill geometry for every control (30px CTAs, 24px search, circular icon buttons) ·
   ZERO radius and ZERO shadow on every container (cards, sheets, nav, menus) — the only depth cues are 1px hairlines and
   the inset bottom hairline under sticky bars · towering uppercase condensed display headlines · 8px grid, 48px sections ·
   semantic colour only where it signals: sale red (#d30005), success green (#007d48), info blue (#1151ff) ·
   press state = Nike's "tap collapse" (shrink + fade), no hover tints.
   Safety colours (police / hospital / fire pins, 112 / 119, SOS) are semantic, not chrome, and are kept.
   Loaded last, so it wins.
===================================================================== */
:root{
  --ink:#111111; --charcoal:#39393b; --ash:#4b4b4d; --mute:#707072; --stone:#9e9ea0;
  --hairline:#cacacb; --hairline-soft:#e5e5e5; --canvas:#ffffff; --soft:#f5f5f5;
  --sale:#d30005; --sale-deep:#780700; --success:#007d48; --info:#1151ff;
  /* map the app's old tokens onto the system */
  --bg:var(--canvas); --card:var(--canvas); --text:var(--ink); --dim:var(--mute); --line:var(--hairline);
  --blue:var(--ink); --accent:var(--ink); --red:var(--sale); --green:var(--success); --amber:#8a5a00;
  --radius:0; --shadow:none;
  --r-none:0; --r-sm:18px; --r-md:24px; --r-lg:30px; --pill:9999px;
  --font-ui:'Helvetica Now Text','Helvetica Neue',Helvetica,Inter,Arial,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --font-display:'Nike Futura ND','Helvetica Neue',Helvetica,Inter,Arial,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}
body{font-family:var(--font-ui);font-size:15px;line-height:1.5;letter-spacing:0;color:var(--ink);background:var(--canvas)}
body.ui-web{font-size:16px}
html:has(body.framed){background:var(--soft)}
h1,h2,h3,h4{color:var(--ink);letter-spacing:0;font-family:var(--font-ui)}
h2{font-family:var(--font-display);font-stretch:condensed;font-weight:900;text-transform:uppercase;font-size:34px;line-height:.95;letter-spacing:-.5px}   /* campaign display tier */
body.ui-app h2{font-size:28px}
h3{font-size:24px;font-weight:500;line-height:1.2} h4{font-size:16px;font-weight:500;line-height:1.75}
.muted{color:var(--mute)} .small{font-size:12px;font-weight:500;line-height:1.5}
a{color:var(--ink);text-decoration:underline;font-weight:500} a.btn,a.chip,a.call,a.tool,a.pa{text-decoration:none}
::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:8px}
.desc,.drawer-body p,.info-card p,.bubble{font-size:15px;line-height:1.5;color:var(--charcoal)}
body.ui-web .desc,body.ui-web .drawer-body p,body.ui-web .info-card p{font-size:16px}
/* the one press state in the system: tap collapse */
.btn:active,.chip:active,.tool:active,.plan-cta:active,.call:active,.pa:active,.sos-opt:active,.day-chip:active,.flash-btns button:active{transform:scale(.94);opacity:.6;transition:transform .08s,opacity .08s}

/* ---- buttons: black pill (primary) · soft-cloud pill (secondary) · white pill on imagery ---- */
.btn{background:var(--ink);color:#fff;border-radius:var(--pill);padding:12px 32px;min-height:48px;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:0;box-shadow:none;border:0;transition:none}
body.ui-app .btn{padding:10px 24px;min-height:44px;font-size:15px}
.btn:hover{filter:none;background:var(--ink)} .btn:disabled{opacity:1;background:var(--hairline);color:var(--mute);cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn.ghost{background:var(--soft);color:var(--ink);box-shadow:none} .btn.ghost:hover{background:var(--soft)}
.btn.red{background:var(--sale)} .btn.red:hover{background:var(--sale-deep)}
.btn.danger,.chip.danger{color:var(--sale)}
.chip{background:var(--canvas);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--pill);padding:8px 16px;font-size:14px;font-weight:500;line-height:1.3;letter-spacing:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:none}
.chip:hover{border-color:var(--ink)}
.chip.on,.chip.go{background:var(--ink);color:#fff;border-color:var(--ink)}                       /* filter-chip-active: fully inverted, no middle state */
.chip.order{background:var(--soft);color:var(--ink);border-color:var(--soft)}
.icon-btn{background:var(--soft);color:var(--ink);border:0;box-shadow:none;width:36px;height:36px}
.field{border-radius:8px;background:var(--canvas);border:1px solid var(--hairline);box-shadow:none;font-size:16px;padding:14px 16px;min-height:52px;color:var(--ink)}
body.ui-app .field{min-height:48px;padding:12px 14px;font-size:15px}
.field::placeholder{color:var(--mute)}
.field:focus{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.switch span{background:var(--hairline)} .switch input:checked+span{background:var(--ink)}
.seg{background:var(--soft);border-radius:var(--pill);padding:4px} .seg button{border-radius:var(--pill);font-weight:500;color:var(--ink)} .seg button.active{background:var(--ink);color:#fff;box-shadow:none}
.notice{background:var(--soft);border:0;border-radius:0;color:var(--charcoal)} .tip{background:var(--soft);border-radius:0;color:var(--charcoal)}
.toast{background:var(--ink);border-radius:var(--pill);font-size:14px;font-weight:500;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.link{color:var(--ink);text-decoration:underline;font-weight:500}

/* ---- primary nav: white, 56px, inset bottom hairline; wordmark left; underline on the active link; soft-cloud pills right ---- */
.topbar{background:var(--canvas);color:var(--ink);border:0;box-shadow:inset 0 -1px 0 var(--hairline-soft);backdrop-filter:none;-webkit-backdrop-filter:none;min-height:60px;padding:0 24px;padding-top:var(--safe-t);z-index:50;gap:24px}
body.ui-app .topbar{min-height:56px;padding:0 16px;padding-top:var(--safe-t)}
.brand{gap:10px} .brand .mark{width:32px;height:32px;border-radius:0;background:var(--ink);color:#fff;font-size:17px;box-shadow:none} body.ui-app .brand .mark{width:30px;height:30px;font-size:16px}
.brand b{color:var(--ink);font-family:var(--font-display);font-stretch:condensed;font-weight:900;font-style:italic;text-transform:uppercase;font-size:22px;letter-spacing:-.4px;line-height:1} .brand b span{color:var(--ink)} body.ui-app .brand b{font-size:20px}
.brand small{color:var(--mute);font-size:11px;letter-spacing:0;font-weight:500;margin-top:1px}
.webnav{gap:4px;align-self:stretch}
.webnav button{color:var(--ink);font-size:16px;font-weight:500;line-height:1.5;letter-spacing:0;padding:0 12px;border-radius:0;background:transparent;position:relative;align-self:stretch;min-height:60px}
.webnav button.active{background:transparent;color:var(--ink)}
.webnav button.active::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--ink);border-radius:0}
.top-right{gap:8px}
.sync-pill{background:var(--soft);color:var(--mute);border:0;border-radius:var(--pill);font-size:12px;font-weight:500;padding:6px 12px;box-shadow:none} .topbar .sync-pill{padding:10px 16px;font-size:14px;color:var(--ink)}
.acct-btn{background:var(--soft);color:var(--ink);border:0;border-radius:var(--pill);font-size:14px;font-weight:500;padding:10px 16px;min-height:40px;box-shadow:none} .acct-btn:hover,.acct-btn.active{background:var(--hairline-soft);color:var(--ink)} .acct-btn .caret{color:var(--mute)}
.lang-pick{background:var(--soft);color:var(--ink);border:0;border-radius:var(--pill);font-size:14px;font-weight:500;padding:10px 14px;min-height:40px;box-shadow:none;max-width:140px}
.acct-menu{background:var(--canvas);border:1px solid var(--hairline);border-radius:0;box-shadow:none;padding:8px 0;backdrop-filter:none;-webkit-backdrop-filter:none}
.acct-menu .am-head{border-bottom:1px solid var(--hairline-soft);padding-left:16px;padding-right:16px} .acct-menu button{border-radius:0;font-weight:500;padding-left:16px;padding-right:16px} .acct-menu button:hover{background:var(--soft)}
.offline-bar{background:var(--ink);color:#fff;font-weight:500;backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---- map screen: on-image grammar — crisp white pills over the photography (the map), zero shadow ---- */
.map-search{background:var(--canvas);border:0;border-radius:var(--r-md);height:40px;padding:0 6px 0 16px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:8px;transition:box-shadow .12s}
.map-search:focus-within{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 8px rgba(245,245,245,.85)}   /* search-pill-focused: 2px ink + soft halo */
.map-search input{font-size:15px;font-weight:400;color:var(--ink)} .map-search input::placeholder{color:var(--mute)}
.map-search>span{color:var(--ink);font-size:14px;filter:grayscale(1) contrast(1.4)}
.map-search button,.map-search .icon-btn{background:transparent;width:32px;height:32px}
body.ui-app .map-search{height:40px;padding:0 4px 0 14px}
.map-results{background:var(--canvas);border:1px solid var(--hairline);border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.res-item{border-radius:0;border-bottom:1px solid var(--hairline-soft)} .res-item:last-child{border-bottom:0} .res-item:hover{background:var(--soft)}
.map-tools{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;gap:8px;border-radius:0}
.tool{background:var(--canvas);color:var(--ink);border:0;box-shadow:none;border-radius:var(--pill);height:40px;min-width:40px;padding:0 16px;font-weight:500;font-size:15px;transition:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.tool span{font-size:14px;font-weight:500} .tool:hover{background:var(--soft)}
.tool.on{background:var(--ink);color:#fff} #btnEmg.on{background:var(--sale)} .tool.sos{background:var(--sale);color:#fff}
body.ui-app .tool{width:36px;height:36px;min-width:36px;font-size:15px;border-radius:50%;padding:0} body.ui-app .map-tools{gap:6px;right:8px;top:10px;padding:0;border-radius:0}
body.ui-app .map-search,body.ui-app .map-results{right:52px}
.emg-card{background:var(--canvas);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:16px}
body.ui-app .emg-card{padding:10px 12px;width:calc(100% - 60px);top:58px;border-radius:0}
.emg-head b{font-size:16px;font-weight:500} .emg-head small,.emg-txt small{color:var(--mute);font-size:12px;font-weight:500}
.emg-sum{font-weight:500;font-size:14px;color:var(--charcoal)}
.emg-row{border-radius:0;border-bottom:1px solid var(--hairline-soft)} .emg-row:last-child{border-bottom:0} .emg-row:hover{background:var(--soft)}
.emg-ico{border-radius:50%;box-shadow:none} .emg-txt b{color:var(--mute);font-weight:500;font-size:12px;letter-spacing:0;text-transform:uppercase} .emg-txt span{font-weight:500;font-size:15px}
.emg-act .chip{padding:6px 9px;border-radius:50%}
.emg-calls{gap:8px} .call{border-radius:var(--pill);box-shadow:none;border:0;font-weight:500;font-size:13px;padding:10px 6px;letter-spacing:0}
.call.police{background:var(--ink)} .call.fire{background:var(--sale)} .call.info{background:var(--soft);color:var(--ink)}
.plan-cta{background:var(--ink);border:0;border-radius:var(--pill);padding:14px 32px;min-height:48px;font-weight:500;font-size:16px;letter-spacing:0;box-shadow:none;transition:none} .plan-cta:hover{background:var(--ink)}
body.ui-app .plan-cta{font-size:15px;padding:12px 24px;min-height:44px}
/* sticky bars: white with an inset hairline (the system's only "shadow") */
.plan-bar,.ad-bar,body.ui-app .tabbar{background:var(--canvas);-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:inset 0 1px 0 var(--hairline-soft);border-radius:0;margin:0;padding-left:16px;padding-right:16px}
body.ui-app .ad-bar{padding:6px 10px}
.plan-bar-head{font-size:14px;font-weight:500} .trip-switch{background:var(--soft);border:0;border-radius:var(--pill);font-weight:500}
.day-chip{border-radius:var(--pill);background:var(--canvas);border:1px solid var(--hairline);box-shadow:none;padding:8px 16px}
.day-chip.on{border-color:var(--ink);background:var(--ink);color:#fff} .day-chip.on small{color:var(--stone)} .day-chip.on .dot{border-color:#fff;background:var(--c)} .day-chip.focus{box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--ink)}
.day-chip b{font-weight:500;font-size:14px} .day-chip small{font-size:12px;font-weight:500}
.pin-ico{background:var(--canvas);border:2px solid var(--c,var(--ink));box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} .pin-label{background:var(--canvas);border:0;border-radius:0;padding:2px 8px;font-weight:500;font-size:12px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.user-dot{background:var(--ink);box-shadow:0 0 0 2px rgba(17,17,17,.25)} .user-dot i{background:rgba(17,17,17,.15)}
.map-error{background:var(--canvas);border:1px solid var(--hairline);border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---- panels, sheets, lists: square, flat, hairline-separated ---- */
.drawer{background:var(--canvas);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0}
body.ui-web .drawer{border-left:1px solid var(--hairline)} body.ui-app .drawer{border-radius:0;border:0;box-shadow:inset 0 1px 0 var(--hairline)}
.drawer-head{border-bottom:1px solid var(--hairline-soft);font-size:16px;font-weight:500;line-height:1.75}
.day-panel{background:var(--canvas);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0} body.ui-web .day-panel{border-right:1px solid var(--hairline)}
body.ui-app .day-panel,body.ui-app .panel-head{border-radius:0}
.panel-head{background:var(--canvas);border-top:0;border-bottom:1px solid var(--hairline-soft);backdrop-filter:none;-webkit-backdrop-filter:none} .panel-head small{color:var(--c);font-weight:500}
.panel-tools{border-bottom:1px solid var(--hairline-soft)}
.stop-row{border-radius:0;border-bottom:1px solid var(--hairline-soft)} .stop-row:hover{background:var(--soft)} .stop-main b{font-weight:500;font-size:16px}
.mode{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--pill)} .mode.sel{border-color:var(--ink);background:var(--ink);color:#fff}
.leg-steps,.emg-mini,.diet-bar,.add-pick,.review,.stats li,.interest-box .chips,.off-nav{background:var(--soft);border-radius:0}
.res-box{background:var(--soft);border:0;border-radius:0}
.food-item,.add-item,.shop-item,.trip-item{border-radius:0} .food-item:hover,.food-item.hl{background:var(--soft)}
.food-item,.add-item,.shop-item{border-bottom:1px solid var(--hairline-soft)}
.food-h.v-good{color:var(--success)} .stars{color:var(--ink)}
.pa{background:var(--soft);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-weight:500;font-size:13px;letter-spacing:0;color:var(--ink)}   /* category-icon-card on soft-cloud */
.pa:hover{background:var(--hairline-soft)}
.alt{border:1px solid var(--hairline);border-radius:0;background:var(--canvas)} .alt.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--canvas)}
.tl-dot{background:var(--soft);box-shadow:none;border-color:#fff}
.trip-item{background:var(--canvas);border:1px solid var(--hairline)} .trip-item.cur{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.badge{font-weight:500;font-size:12px;line-height:1.5;border-radius:var(--pill);padding:3px 12px;background:var(--canvas);border:1px solid var(--hairline);color:var(--ink)}   /* badge-promo */
.res-required{background:var(--canvas);color:var(--sale);border-color:var(--sale)} .res-recommended{background:var(--canvas);color:var(--ink)}
.sos-opt{background:var(--soft);border:0;border-radius:var(--pill);font-weight:500}
.share-link .field{background:var(--soft);border-color:var(--soft)}
.countdown{background:var(--soft);color:var(--success)}

/* ---- planner / learn / account: no card chrome — white sections split by hairlines, soft-cloud tiles for content ---- */
.card,.info-card,.deck-tile,.interest-box,.test,.test-done,.chat,.setup,.auth-card{background:var(--canvas);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.card{padding:24px 0;border-bottom:1px solid var(--hairline);margin-bottom:0} .card:last-child{border-bottom:0}
.card::before,.emg-card::before,.map-search::before,.drawer::before,.auth-card::before,.info-card::before,.deck-tile::before,.face::before,.chat::before,.test::before,.test-done::before,.interest-box::before,.map-tools::before,.acct-menu::before,.info-card::after,.big-tabs button.active::after{content:none}
body.ui-app .card{padding:20px 0}
.info-card,.deck-tile,.interest-box,.test,.test-done,.chat{background:var(--soft);padding:24px}           /* content tiles sit on soft-cloud, like product imagery */
body.ui-app .info-card,body.ui-app .deck-tile,body.ui-app .interest-box{padding:16px}
.plan-head p,.interest-box p{font-size:15px;line-height:1.5;color:var(--mute)}
.chat{border-radius:0} .bubble{background:var(--canvas);color:var(--ink);font-size:15px;border-radius:var(--r-sm)} .msg.me .bubble{background:var(--ink);color:#fff}
.avatar{background:var(--canvas)} .chat-form{border-top:1px solid var(--hairline-soft)} .q-progress{background:var(--hairline-soft)} .q-progress div{background:var(--ink)}
.quick .chip{background:var(--canvas);color:var(--ink);border-color:var(--hairline)}
.opt-card{background:var(--canvas);border:1px solid var(--hairline);border-radius:0;font-weight:500;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} .opt-card.sel{border-color:var(--ink);background:var(--ink);color:#fff}
.wiz-steps span{background:var(--hairline-soft)} .wiz-steps span.done{background:var(--stone)} .wiz-steps span.cur{background:var(--ink)}
.days-pick input{accent-color:var(--ink)} .days-pick b{color:var(--ink);font-weight:500}
/* tab strip: labels on a hairline, 2px ink underline on the active one */
.big-tabs{gap:0;margin-bottom:16px} .big-tabs button{background:transparent;border:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--hairline);font-weight:500;font-size:15px;color:var(--mute);padding:12px 8px;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}
.big-tabs button span{filter:grayscale(1);opacity:.7} .big-tabs button.active{border:0;box-shadow:inset 0 -2px 0 var(--ink);color:var(--ink);background:transparent;font-weight:500} .big-tabs button.active span{opacity:1}
.learn-wrap .sub-tabs .chip.on{background:var(--ink);color:#fff}
.info-card{border-top:0;overflow:visible} .info-card small{color:var(--mute);font-weight:500;font-size:12px;letter-spacing:0;text-transform:none} .info-card h4{font-size:24px;font-weight:500;line-height:1.2;margin:6px 0 8px}
.deck-head h3{font-size:24px;font-weight:500}
.mastery{background:var(--hairline-soft)} .mastery div{background:var(--ink)}
.face{background:var(--soft);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} .face.back{background:var(--ink);color:#fff}   /* member-benefit card: black tile, white type */
.face.back .muted,.face.back small,.face.back .lvl{color:var(--stone)} .face.back .ko,.face.back b,.face.back p{color:#fff}
.face .ko{font-weight:500} .lvl{color:var(--mute)}
.flash-btns button{border-radius:var(--pill);font-weight:500;background:var(--soft);color:var(--ink);box-shadow:none} .flash-btns button+button{background:var(--ink);color:#fff}
.say{background:var(--canvas)}
.deck-tile{border-radius:0} .deck-tile:hover{background:var(--hairline-soft)}
.opt{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--pill);font-weight:500} .opt.right{background:var(--canvas);border-color:var(--success);box-shadow:inset 0 0 0 1px var(--success);color:var(--success)} .opt.wrong{background:var(--canvas);border-color:var(--sale);box-shadow:inset 0 0 0 1px var(--sale);color:var(--sale)}
.score-ring{background:conic-gradient(var(--ink) calc(var(--p)*1%),var(--hairline-soft) 0)} .score-ring b{background:var(--canvas)}
.stats b{font-weight:500} .field-label{color:var(--mute);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none}
.auth{background:var(--canvas)} .auth-card{border-radius:0;padding:24px;box-shadow:none;border:0;max-width:420px}
.auth-card .brand .mark{background:var(--ink);color:#fff} .auth-card .brand b{color:var(--ink)} .auth-card .brand b span{color:var(--ink)} .auth-card .brand small{color:var(--mute)}
#authForm label span,#authServerRow label span{color:var(--mute);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none}
.or{color:var(--mute)} .or::before,.or::after{background:var(--hairline)}
.ad-stats th{color:var(--mute);font-weight:500;text-transform:none;font-size:12px;letter-spacing:0} .ad-stats td{border-color:var(--hairline-soft)}

/* ---- tab bar (app): white, inset hairline, monochrome icons; the active item is ink ---- */
body.ui-app .tabbar{padding:6px 0 var(--safe-b);border-radius:0}
.tabbar button{font-size:11px;font-weight:500;letter-spacing:0;color:var(--mute);border-radius:0;padding:6px 0 6px;position:relative} .tabbar button span{font-size:22px;filter:grayscale(1);opacity:.45}
.tabbar button.active{color:var(--ink);font-weight:500} .tabbar button.active span{filter:grayscale(1);opacity:1} .tabbar button.active::before{content:none}

/* ---- ads: square white units on a hairline, black AD pill, black pill CTA ---- */
.ad{background:var(--canvas);border:1px solid var(--hairline);border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
.ad:hover{border-color:var(--ink);box-shadow:none} .ad-tag{background:var(--ink);border-radius:var(--pill);padding:2px 7px;font-size:9px;letter-spacing:.3px;font-weight:500}
.ad-ico{border-radius:0;box-shadow:none} .ad-cta{background:var(--ink);font-weight:500;border-radius:var(--pill)} .ad-note{color:var(--mute)} .ad-body small{color:var(--mute)}
.ad-card{border-top:1px solid var(--hairline)!important;background:var(--canvas)}
.info-card.ad-card small,.info-card.ad-card .ad-note{text-transform:none;letter-spacing:0;font-weight:500}

/* ---- phone frame on a computer: flat ---- */
body.framed{box-shadow:none}

/* =====================================================================
   V2 — chat-first layout (Chat · Map · Me), cards, composer. Built on the Nike theme; nothing decorative.
===================================================================== */
.brand small{display:none} .topbar .sync-pill{display:none}
.topbar{min-height:0;padding-top:var(--safe-t);padding-bottom:0} body.ui-web .topbar{min-height:56px} body.ui-app .topbar{min-height:52px}
.webnav button{min-height:56px}
.sos-btn{background:var(--sale);color:#fff;border-radius:var(--pill);padding:8px 14px;font-weight:500;font-size:14px;min-height:36px;display:inline-flex;align-items:center;gap:4px}
body.ui-app .sos-btn{padding:8px 11px} body.ui-app .sos-btn span{display:none}
body.ui-app .top-right{display:flex;gap:8px}
/* ---- chat screen ---- */
#screen-chat{display:none;height:100%} #screen-chat.active{display:flex}
.chat-list{width:260px;flex-shrink:0;border-right:1px solid var(--hairline-soft);display:flex;flex-direction:column;background:var(--canvas)}
.cl-head{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 10px;font-size:16px}
.cl-items{flex:1;overflow:auto;padding:0 8px}
.cl-item{display:flex;align-items:center;gap:4px;padding:8px 6px 8px 10px;cursor:pointer;border-bottom:1px solid var(--hairline-soft)}
.cl-item.cur{background:var(--soft)} .cl-item:hover{background:var(--soft)}
.cl-main{flex:1;min-width:0;display:flex;flex-direction:column} .cl-main b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px} .cl-main small{color:var(--mute);font-size:12px}
.cl-item .icon-btn{width:28px;height:28px;font-size:12px;background:transparent;opacity:.5} .cl-item:hover .icon-btn,.cl-item.cur .icon-btn{opacity:1}
.cl-note{padding:8px 14px 12px}
.chat-col{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-top{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--hairline-soft);min-height:48px}
.chat-top b{flex:1;text-align:center;font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ui-web .chat-top #chatListToggle{display:none}
.msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
body.ui-web .msgs{padding:24px max(16px,calc((100% - 760px)/2))}
.msg{display:flex;flex-direction:column;gap:8px;max-width:88%;align-self:flex-start}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.in{animation:msgin .18s ease-out} @keyframes msgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bubble{background:var(--soft);color:var(--ink);padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.5;max-width:100%;word-wrap:break-word}
.msg.me .bubble{background:var(--ink);color:#fff}
.bubble .att{display:block;font-size:12px;opacity:.75;margin-bottom:2px}
.bubble a{color:inherit}
.typing{display:flex;gap:4px;padding:12px 14px} .typing span{width:7px;height:7px;border-radius:50%;background:var(--stone);animation:blink 1.2s infinite} .typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
.welcome{margin:auto 0 8px;padding:24px 8px;max-width:520px}
.w-mark{width:48px;height:48px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.welcome h2{font-size:30px;margin-bottom:8px} body.ui-app .welcome h2{font-size:26px}
.chips-row{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 8px} body.ui-web .chips-row{padding:0 max(16px,calc((100% - 760px)/2)) 8px}
.chips-row:empty{display:none}
.composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + var(--safe-b));border-top:1px solid var(--hairline-soft);background:var(--canvas)}
body.ui-web .composer{padding:12px max(16px,calc((100% - 760px)/2)) 16px}
.composer .icon-btn{width:40px;height:40px;background:var(--soft);font-size:18px;flex-shrink:0} .composer .icon-btn.on{background:var(--sale);color:#fff}
.composer-field{flex:1;min-width:0;background:var(--soft);border-radius:var(--r-md);padding:4px 4px 4px 14px;display:flex;flex-direction:column}
.composer textarea{width:100%;border:0;background:transparent;font:inherit;font-size:15px;line-height:1.4;padding:9px 0;resize:none;outline:none;max-height:140px;color:var(--ink)}
.composer-field:focus-within{box-shadow:inset 0 0 0 2px var(--ink);background:var(--canvas)}
.send{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-size:20px;font-weight:500;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center} .send:disabled{background:var(--hairline)}
.img-preview{position:relative;display:inline-block;margin:6px 0 2px} .img-preview img{height:72px;border-radius:8px;display:block} .img-preview .icon-btn{position:absolute;top:-8px;right:-8px;width:24px;height:24px;font-size:11px;background:var(--ink);color:#fff}
/* ---- cards ---- */
.card-wrap{width:min(100%,520px)} .msg .card{margin:0;padding:0;border:1px solid var(--hairline);background:var(--canvas);width:100%}
.card-h{padding:12px 14px;border-bottom:1px solid var(--hairline-soft);display:flex;flex-direction:column;gap:1px} .card-h b{font-weight:500;font-size:15px} .card-h small{color:var(--mute);font-size:12px}
.card-f{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px} .card-f .btn{min-height:40px;padding:8px 18px;font-size:14px}
.pl-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--hairline-soft)} .pl-row:last-of-type{border-bottom:0}
.pl-main{flex:1;min-width:0;display:flex;flex-direction:column} .pl-main b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pl-main small{color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-btns{display:flex;gap:6px;flex-shrink:0} .pl-btns .chip{padding:6px 12px;font-size:13px}
.pl-row.em .emg-ico{width:32px;height:32px;font-size:16px;color:#fff}
.card .emg-calls{padding:4px 14px 0}
.card .modes{padding:12px 14px 0;gap:8px} .card .mode{min-width:92px}
.card .leg-steps{margin:10px 14px 0}
.pd{border-bottom:1px solid var(--hairline-soft)} .pd summary{padding:10px 14px;cursor:pointer;font-size:14px;list-style:none;display:flex;gap:8px;align-items:center} .pd summary::before{content:'▸';color:var(--mute);font-size:12px} .pd[open] summary::before{content:'▾'}
.pd-stops{list-style:none;padding:0 14px 10px 14px}
.pd-stops li{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--hairline-soft)} .pd-stops .t{width:44px;flex-shrink:0;font-weight:500;font-size:13px;color:var(--mute)} .pd-stops b{font-weight:500;font-size:14px} .pd-stops small{display:block;color:var(--mute);font-size:12px;line-height:1.4}
.mn-list{max-height:380px;overflow:auto}
.mn-row{display:flex;gap:10px;padding:9px 14px;border-bottom:1px solid var(--hairline-soft);cursor:pointer} .mn-row:hover{background:var(--soft)}
.mn-main{flex:1;min-width:0;display:flex;flex-direction:column} .mn-main b{font-weight:500} .mn-main span{font-size:14px} .mn-main small{color:var(--mute);font-size:12px}
.mn-side{text-align:right;flex-shrink:0;display:flex;flex-direction:column} .mn-side b{font-weight:500;font-size:14px} .mn-side small{font-size:13px}
.mn-steps{padding:10px 14px 0 32px;font-size:14px;line-height:1.6}
.card .tip{margin:10px 14px 0}
.mn-order{padding:12px 14px 0;display:flex;flex-direction:column} .mn-order small{color:var(--mute);font-size:12px} .mn-order b{font-size:18px;font-weight:500}
.bk-lines{padding:6px 14px 0} .bk-lines p{margin:6px 0;display:flex;flex-direction:column} .bk-lines b{font-size:17px;font-weight:500} .bk-lines small{color:var(--mute);font-size:12.5px}
.bk-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 14px 10px}
.card.booking>.small{padding:0 14px 12px}
.phr{padding:14px;display:flex;flex-direction:column;gap:2px} .phr b{font-size:24px;font-weight:500;line-height:1.3} .phr .rom{color:var(--mute);font-style:italic;font-size:14px}
.phr-more{padding:0 14px 6px;font-size:13.5px;line-height:1.7;border-top:1px solid var(--hairline-soft);padding-top:8px} .phr-more b{font-weight:500}
.phr-list{display:flex;flex-direction:column} .phr-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--hairline-soft)} .phr-item>div{flex:1;display:flex;flex-direction:column} .phr-item b{font-weight:500} .phr-item small{color:var(--mute)}
.card .warn{color:var(--amber);font-style:normal;font-size:12px}
.ad-msg{align-self:center;max-width:100%} .ad-msg .ad-slot{margin:0}
.map-hint{position:absolute;z-index:7;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--pill);font-size:13px;white-space:nowrap}
.pin.cc .pin-ico{background:var(--ink);border-color:#fff}
/* ---- map chrome in v2 ---- */
.plan-cta{display:none!important}
#emgCard[hidden]{display:none!important}
.tool span{display:none} .tool{padding:0;width:40px;min-width:40px;justify-content:center}
body.ui-web .map-tools{flex-direction:column;align-items:flex-end;top:14px;right:14px;left:auto}
body.ui-web .emg-card{top:68px;left:14px;width:320px}
body.ui-app .map-tools .tool{display:inline-flex}
.pin .pin-label{display:none} .pin.dest .pin-label,.pin.picked .pin-label,.pin.board .pin-label,.pin.alight .pin-label,.pin.cc .pin-label,.pin.stop .pin-label{display:inline-block}
.drawer .desc,.drawer .pa-desc{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ad-note,.ad-body small{display:none}
/* ---- split view (web ≥ 1100px): chat left, map right ---- */
body.split main{display:flex}
body.split #screen-chat.active{width:min(520px,44%);flex-shrink:0;border-right:1px solid var(--hairline-soft)}
body.split #screen-chat.active .chat-list{display:none} body.split .chat-top #chatListToggle{display:inline-flex}
body.split #screen-map.active{flex:1;min-width:0}
body.split #screen-me.active{flex:1}
body.split .msgs,body.split .composer,body.split .chips-row{padding-left:16px;padding-right:16px}
body.split .chat-list{position:absolute;left:0;top:0;bottom:0;z-index:12;width:260px;transform:translateX(-105%);transition:transform .2s;box-shadow:none}
body.split .chat-list.open{transform:none} body.split #screen-chat{position:relative}
body.split .drawer{top:56px}
/* ---- app layout ---- */
body.ui-app .chat-list{position:fixed;left:0;top:0;bottom:0;width:280px;z-index:46;transform:translateX(-105%);transition:transform .25s;border-right:1px solid var(--hairline);box-shadow:none;padding-top:var(--safe-t)}
body.ui-app .chat-list.open{transform:none}
body.ui-app .tabbar button{font-size:10px;font-weight:500} body.ui-app .tabbar{grid-template-columns:repeat(3,1fr)}
body.ui-app .account-wrap{padding:16px 12px 30px}
body.ui-app .msgs{padding:12px}
/* ---- me ---- */
.account-wrap{max-width:720px;margin:0 auto;padding:24px 18px 40px} .account-wrap h2{margin-bottom:8px}
.trip-list .trip-item{width:100%;text-align:left} .trip-item .badge{margin:0}

/* ---- memories: photo pins, memory card, journal ---- */
.pin.photo .pin-ico{width:44px;height:44px;border-radius:50%;background:#fff center/cover no-repeat;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.mem-row{display:flex;gap:12px;padding:12px 14px;align-items:center} .mem-row img{width:84px;height:84px;object-fit:cover;flex-shrink:0;background:var(--soft)} .mem-missing{width:84px;height:84px;display:flex;align-items:center;justify-content:center;background:var(--soft);font-size:28px}
.mem-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .mem-txt b{font-weight:500} .mem-txt small{color:var(--mute);font-size:12.5px}
.mem-big{width:100%;max-height:60vh;object-fit:contain;background:var(--soft);display:block;margin-bottom:10px}
.mem-meta{font-size:14px;line-height:1.5}
.mem-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px} .mem-strip img{width:72px;height:72px;object-fit:cover;flex-shrink:0;cursor:pointer;background:var(--soft)}
.jd{margin:14px 0 6px} .jd h3{font-size:20px;font-weight:500;margin-bottom:2px}
.jd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.jd-ph{margin:0;cursor:pointer;background:var(--soft)} .jd-ph img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.jd-ph figcaption{padding:6px 8px 8px;font-size:12.5px;line-height:1.35} .jd-ph figcaption b{font-weight:500} .jd-ph figcaption small{display:block;color:var(--mute);margin-top:2px}
@media print{ body.print-journal *{visibility:hidden} body.print-journal #drawer,body.print-journal #drawer *{visibility:visible} body.print-journal #drawer{position:static;width:auto;height:auto;transform:none;box-shadow:none;border:0} body.print-journal .drawer-body{overflow:visible} body.print-journal .btn-row,body.print-journal .drawer-head .icon-btn,body.print-journal .ad-slot{display:none} }

/* ---- phone polish ---- */
body.ui-app .composer textarea,body.ui-app .field,body.ui-app .map-search input,body.ui-app .lang-pick{font-size:16px}   /* 16px stops iOS zooming into inputs */
.t-hint{display:block;color:var(--mute);font-size:12px;padding:0 4px} .t-hint:empty{display:none}
.chip.sug{background:var(--canvas);border-color:var(--ink);max-width:100%;white-space:normal;text-align:left}
.chips-row{padding-top:4px}
body.ui-app .msg{max-width:92%}
body.ui-app .card-f .btn{flex:1 1 auto;justify-content:center}
.msgs{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.ui-app .chat-top{min-height:44px;padding:4px 8px}
body.ui-app .welcome{margin-top:auto}

/* ---- photos on the route ---- */
.pin.tripphoto .pin-ico{width:38px;height:38px;border-radius:4px;background:#fff center/cover no-repeat;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transform:rotate(calc(-6deg + var(--k,0) * 8deg))}
.pin.tripphoto{filter:none}
.stop-photos{display:flex;gap:4px;margin-top:5px} .stop-photos img{width:40px;height:40px;object-fit:cover;border-radius:3px;background:var(--soft)}
.stop-gallery{display:flex;gap:6px;overflow-x:auto;margin:4px 0 10px} .stop-gallery img{width:110px;height:110px;object-fit:cover;flex-shrink:0;cursor:pointer;background:var(--soft)}
.card.tripask .ta-q{padding:14px 14px 4px;font-size:15px;line-height:1.5} .ta-done{padding:6px 14px 0;font-size:14px;font-weight:500}

/* ---- no top bar: the screens start at the safe area ---- */
body.ui-app main{padding-top:var(--safe-t)}
.chat-top{border-bottom:1px solid var(--hairline-soft)}
body.ui-app .map-search{top:10px} body.ui-app .map-tools{top:10px}
.tool.sos{background:var(--sale);color:#fff}
.sub-h{font-size:16px;font-weight:500;margin:18px 0 6px}
.account-wrap h2{margin-top:4px}
body.ui-app .map-tools #btnSetPos,body.ui-app .map-tools #btnEmg{display:none}
body.ui-app.tools-collapsed .map-tools #btnPhotos{display:inline-flex}
body.ui-app.tools-collapsed .map-tools .tool#btnPhotos{display:inline-flex!important}

/* ---- icons (js/icons.js): one monoline set everywhere ---- */
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:8;vertical-align:-.2em;flex-shrink:0;overflow:visible}
.btn .ic,.chip .ic,.pa .ic{width:1.2em;height:1.2em} .chip .ic{margin-right:2px}
.icon-btn .ic,.tool .ic,.send .ic{width:20px;height:20px} .send .ic{stroke-width:2.4}
.composer .icon-btn{font-size:0} .composer .icon-btn .ic{width:21px;height:21px}
.tabbar button span{filter:none!important;opacity:1!important;display:flex;height:26px;align-items:center} .tabbar button .ic{width:24px;height:24px}
.tabbar button{color:var(--stone)} .tabbar button.active{color:var(--ink)} .tabbar button.active .ic{stroke-width:2.4}
.mark .ic{width:62%;height:62%;stroke:#fff} .w-mark .ic{width:28px;height:28px;stroke:#fff}
.pin-ico .ic{width:60%;height:60%} .pin.emg .pin-ico .ic,.pin.board .pin-ico .ic,.pin.picked .pin-ico .ic,.pin.dest .pin-ico .ic{stroke:#fff} .pin.dest .pin-ico .ic{stroke-width:2.4}
.emg-ico .ic{width:18px;height:18px;stroke:#fff}
.pa span .ic{width:22px;height:22px}
.card-h b .ic{margin-right:4px}
.drawer-head .ic{margin-right:6px}
.sos-opt span .ic{width:28px;height:28px}
.ad-ico .ic{width:55%;height:55%;stroke:#fff}
.call .ic{display:none}
.mn-flags{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end;margin-top:3px}
.flag-tag{font-style:normal;font-size:10.5px;font-weight:500;line-height:1;padding:3px 6px;border:1px solid var(--hairline);border-radius:var(--pill);color:var(--charcoal)}
.flag-tag.ok{border-color:var(--success);color:var(--success)}
.toast .ic{margin-right:4px}
.tip .ic{margin-right:4px}

/* ---- first run (onboard.js) ---- */
.onboard{position:fixed;inset:0;z-index:150;background:var(--canvas);display:flex;flex-direction:column;padding:calc(12px + var(--safe-t)) 20px calc(16px + var(--safe-b))}
.ob-top{min-height:44px;display:flex;align-items:center}
.ob-mark{width:40px;height:40px;background:var(--ink);display:inline-flex;align-items:center;justify-content:center} .ob-mark .ic{width:24px;height:24px;stroke:#fff}
.ob-mark.big{width:56px;height:56px;margin-bottom:20px} .ob-mark.big .ic{width:32px;height:32px}
.ob-back{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;padding:8px 12px 8px 4px}
.ob-body{flex:1;overflow:auto;padding:16px 0 12px}
.ob-h{font-family:var(--font-display);font-stretch:condensed;font-weight:900;text-transform:uppercase;font-size:34px;line-height:.98;letter-spacing:-.5px;margin-bottom:10px}
.ob-sub{color:var(--mute);font-size:14px;margin-bottom:18px}
.ob-langs{display:flex;flex-direction:column;border-top:1px solid var(--hairline-soft)}
.ob-lang{display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border-bottom:1px solid var(--hairline-soft);font-size:17px;text-align:left}
.ob-lang .ic{width:20px;height:20px;opacity:0;stroke-width:2.4} .ob-lang.on{font-weight:600} .ob-lang.on .ic{opacity:1}
.ob-points{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:22px}
.ob-points li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--charcoal)} .ob-points .ic{width:24px;height:24px;margin-top:1px;color:var(--ink)}
.ob-foot{display:flex;flex-direction:column;gap:10px;padding-top:10px}
.ob-foot .btn{min-height:52px;font-size:16px}
.ob-guest{align-self:center;font-size:15px;font-weight:500;color:var(--ink);padding:8px;margin:0;text-decoration:underline}
.auth-card{position:relative} .auth-close{position:absolute;top:12px;right:12px}
body.framed .onboard{position:absolute}

/* ---- trip bar under the map: the name gets the room, actions are compact icon buttons ---- */
.plan-bar-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.trip-switch{flex:1;min-width:0;max-width:none;display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:14px;text-align:left}
.trip-switch b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.trip-switch .ic{width:18px;height:18px;flex-shrink:0} .trip-switch .ic.sm{width:14px;height:14px;color:var(--mute)}
.pb-acts{display:flex;gap:6px;flex-shrink:0}
.pb-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--hairline);background:var(--canvas);display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.pb-btn .ic{width:18px;height:18px} .pb-btn:active{background:var(--soft)}
body.bar-folded #planFold .ic{transform:rotate(180deg)} body.bar-folded #planFold{transform:none}
.day-chips{padding:4px 4px 6px;margin:0 -4px} .day-chip.focus{box-shadow:none} .day-chip.on.focus{box-shadow:0 0 0 2px var(--canvas),0 0 0 3.5px var(--ink)}

/* =====================================================================
   MOTION — one vocabulary, used everywhere:
   · press   : things you tap sink to 96% fast (90 ms) and settle back with a slight overshoot (spring)
   · enter   : new content rises 8 px and fades in (240 ms, ease-out-quint); lists stagger by 40 ms
   · sheets  : drawers and panels move on the iOS sheet curve
   · confirm : a short "pop" when something becomes selected / done
   Everything is disabled under "Reduce motion".
===================================================================== */
:root{
  --spring:cubic-bezier(.34,1.56,.64,1);      /* settle with a little overshoot */
  --out:cubic-bezier(.22,1,.36,1);            /* ease-out-quint: fast start, soft landing */
  --sheet:cubic-bezier(.32,.72,0,1);          /* iOS sheet */
}
@keyframes km-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes km-fade{from{opacity:0}to{opacity:1}}
@keyframes km-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes km-tab{0%{transform:translateY(0)}35%{transform:translateY(-3px) scale(1.08)}100%{transform:none}}
@keyframes km-bubble-me{from{opacity:0;transform:translateY(6px) scale(.96);transform-origin:100% 100%}to{opacity:1;transform:none}}
@keyframes km-bubble-bot{from{opacity:0;transform:translateY(6px) scale(.98);transform-origin:0 100%}to{opacity:1;transform:none}}
@keyframes km-dot{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}
@keyframes km-ring{0%{box-shadow:0 0 0 0 rgba(211,0,5,.45)}100%{box-shadow:0 0 0 12px rgba(211,0,5,0)}}
@keyframes km-pin{0%{transform:translateY(-14px) scale(.7);opacity:0}60%{transform:translateY(2px) scale(1.04);opacity:1}100%{transform:none}}
@keyframes km-flash{0%{background:var(--soft)}100%{background:transparent}}

/* ---- press: sink fast, spring back ---- */
.btn,.chip,.tool,.pa,.icon-btn,.send,.pb-btn,.tabbar button,.ob-lang,.sos-opt,.mode,.day-chip,.trip-switch,.cl-item,.mn-row,.res-item,.trip-item,.ob-back,.sos-btn,.call,.alt,.opt-card,.ob-guest,.link,.jd-ph,.mem-strip img,.stop-gallery img,.stop-photos img,.ad{
  transition:transform .32s var(--spring),background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,opacity .18s ease}
.btn:active,.chip:active,.tool:active,.pa:active,.icon-btn:active,.send:active,.pb-btn:active,.tabbar button:active,.ob-lang:active,.sos-opt:active,.mode:active,
.day-chip:active,.trip-switch:active,.cl-item:active,.mn-row:active,.res-item:active,.trip-item:active,.ob-back:active,.sos-btn:active,.call:active,.alt:active,
.opt-card:active,.ob-guest:active,.link:active,.jd-ph:active,.mem-strip img:active,.stop-gallery img:active,.stop-photos img:active,.ad:active{
  transform:scale(.96);opacity:1;transition:transform .09s ease-out,background-color .09s,opacity .09s}
.btn.full:active,.ob-foot .btn:active,.card-f .btn:active{transform:scale(.98)}          /* wide buttons sink less */
.cl-item:active,.mn-row:active,.res-item:active,.ob-lang:active{transform:none;background:var(--soft)}   /* rows tint instead */
.tabbar button:active .ic{transform:scale(.88);transition:transform .09s}
.tabbar button .ic{transition:transform .3s var(--spring),stroke-width .2s}

/* ---- tabs: the new tab's icon hops once ---- */
.tabbar button.active .ic{animation:km-tab .42s var(--out)}

/* ---- screens: crossfade, content rises ---- */
.screen.active{animation:km-fade .2s ease-out}
#screen-me.entering .account-wrap>*{animation:km-rise .36s var(--out) backwards}
#screen-me.entering #accountBody>*:nth-child(1){animation:km-rise .36s var(--out) .03s backwards}
#screen-me.entering #accountBody>*:nth-child(2){animation:km-rise .36s var(--out) .07s backwards}
#screen-me.entering #accountBody>*:nth-child(3){animation:km-rise .36s var(--out) .11s backwards}
#screen-me.entering #accountBody>*:nth-child(4){animation:km-rise .36s var(--out) .15s backwards}
#screen-me.entering #accountBody>*:nth-child(n+5){animation:km-rise .36s var(--out) .19s backwards}

/* ---- chat: bubbles grow from their corner, cards follow, suggestions stagger ---- */
.msg.in{animation:none}
.msg.me.in .bubble{animation:km-bubble-me .28s var(--out) backwards}
.msg.bot.in .bubble{animation:km-bubble-bot .28s var(--out) backwards}
.msg.in .card-wrap{animation:km-rise .38s var(--out) backwards}
.msg.in .card-wrap:nth-of-type(1){animation-delay:.08s} .msg.in .card-wrap:nth-of-type(2){animation-delay:.14s} .msg.in .card-wrap:nth-of-type(3){animation-delay:.2s}
.msg.in .pl-row,.msg.in .mn-row,.msg.in .pd{animation:km-rise .34s var(--out) backwards}
.msg.in .pl-row:nth-child(2),.msg.in .mn-row:nth-child(1){animation-delay:.12s} .msg.in .pl-row:nth-child(3),.msg.in .mn-row:nth-child(2){animation-delay:.16s}
.msg.in .pl-row:nth-child(4),.msg.in .mn-row:nth-child(3){animation-delay:.2s} .msg.in .pl-row:nth-child(5),.msg.in .mn-row:nth-child(4){animation-delay:.24s}
.msg.in .pl-row:nth-child(n+6),.msg.in .mn-row:nth-child(n+5){animation-delay:.28s}
.chips-row .chip{animation:km-rise .34s var(--out) backwards}
.chips-row .chip:nth-child(2){animation-delay:.05s} .chips-row .chip:nth-child(3){animation-delay:.1s} .chips-row .chip:nth-child(4){animation-delay:.15s} .chips-row .chip:nth-child(5){animation-delay:.2s}
.welcome>*{animation:km-rise .5s var(--out) backwards} .welcome>*:nth-child(2){animation-delay:.06s} .welcome>*:nth-child(3){animation-delay:.12s}
.typing span{animation:km-dot 1.1s ease-in-out infinite} .typing span:nth-child(2){animation-delay:.14s} .typing span:nth-child(3){animation-delay:.28s}
.t-hint:not(:empty){animation:km-fade .3s ease-out}
.ta-done{animation:km-rise .3s var(--out)}

/* ---- composer: send wakes up when there's something to send; mic pulses while listening ---- */
.composer .send{transition:transform .32s var(--spring),background-color .2s}
.composer:not(.ready) .send{background:var(--hairline);transform:scale(.9)}
.composer.ready .send{animation:km-pop .32s var(--out)}
.composer .icon-btn.on{animation:km-ring 1.1s ease-out infinite}
.img-preview:not([hidden]){animation:km-pop .3s var(--out)}

/* ---- sheets, panels, toasts ---- */
.drawer{transition:transform .42s var(--sheet)!important}
body.ui-app .day-panel{transition:transform .42s var(--sheet)}
.chat-list{transition:transform .34s var(--sheet)!important}
.drawer.open .drawer-body>*{animation:km-rise .32s var(--out) backwards} .drawer.open .drawer-body>*:nth-child(2){animation-delay:.04s} .drawer.open .drawer-body>*:nth-child(3){animation-delay:.08s} .drawer.open .drawer-body>*:nth-child(n+4){animation-delay:.12s}
.toast{transition:opacity .2s ease,transform .38s var(--spring)!important}
.show-card:not([hidden]){animation:km-fade .2s ease-out} .show-card:not([hidden]) .sc-body>*{animation:km-rise .4s var(--out) backwards}
.map-hint:not([hidden]){animation:km-rise .3s var(--out)}
#emgCollapse{transition:transform .3s var(--out)}

/* ---- selection feedback ---- */
.ob-lang .ic{transition:opacity .15s,transform .3s var(--spring);transform:scale(.6)} .ob-lang.on .ic{transform:scale(1)}
.switch span,.switch span::after{transition:.25s var(--spring)}

/* ---- onboarding: each step slides in ---- */
.onboard:not([hidden]) .ob-body>*,.onboard:not([hidden]) .ob-foot>*{animation:km-rise .45s var(--out) backwards}
.onboard .ob-body>*:nth-child(2){animation-delay:.05s} .onboard .ob-body>*:nth-child(3){animation-delay:.1s} .onboard .ob-body>*:nth-child(4){animation-delay:.15s}
.onboard .ob-foot>*:nth-child(1){animation-delay:.12s} .onboard .ob-foot>*:nth-child(2){animation-delay:.16s} .onboard .ob-foot>*:nth-child(3){animation-delay:.2s} .onboard .ob-foot>*:nth-child(4){animation-delay:.24s}
.ob-points li{animation:km-rise .45s var(--out) backwards} .ob-points li:nth-child(2){animation-delay:.08s} .ob-points li:nth-child(3){animation-delay:.16s}
.auth:not([hidden]) .auth-card{animation:km-rise .38s var(--out)}

/* ---- map: pins drop in, photo polaroids pop ---- */
.pin .pin-ico{animation:km-pin .42s var(--out) backwards}
.pin.tripphoto .pin-ico,.pin.photo .pin-ico{animation:km-pop .4s var(--out) backwards}
.user-dot{animation:km-pop .4s var(--out)}

/* ---- Reduce motion: keep state changes, drop the movement ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
}

/* ---- bottom sheet: handle, drag, peek (ui.js Drawer.drag) ---- */
.drawer-grab{display:none}
body.ui-app .drawer-grab{display:block;flex:none;height:18px;position:relative;touch-action:none;cursor:grab}
body.ui-app .drawer-grab::after{content:"";position:absolute;left:50%;top:7px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--hairline)}
body.ui-app .drawer-head{touch-action:none;padding-top:4px}
body.ui-app .drawer.open.peek{transform:translateY(calc(100% - var(--peek, 76px) - var(--safe-b, 0px)))}
body.ui-app .drawer.peek #drawerTitle{cursor:pointer}
body.ui-app .drawer.dragging{transition:none!important}
body.ui-app .drawer.peek .drawer-body>*{animation:none}

/* ---- Naver reviews / CatchTable on place rows ---- */
.pl-extra{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 0;font-size:13px}
.pl-extra .link{font-size:13px;padding:2px 0;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pl-note{margin:6px 0 0}
.rv-list{padding-left:20px;display:flex;flex-direction:column;gap:12px;margin:10px 0 16px}
.rv-list a{color:var(--ink);font-weight:500;line-height:1.4;display:block} .rv-list small{display:block;margin-top:2px}

/* ---- chat edits a saved trip ---- */
.te-line{padding:4px 14px 2px;font-size:15px;line-height:1.45} .tripedit .card-f{padding-top:8px}