* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --navy: #1A2F50; --navy-light: #243d66; --navy-dim: rgba(26,47,80,0.06);
  --teal: #00A9A3; --teal-light: #00c4be; --teal-dim: rgba(0,169,163,0.12);
  --bg: #F2F4F8; --surface: #FFFFFF;
  --text-primary: #1A2F50; --text-secondary: #5a6a85; --text-hint: #9aaaba;
  --border: rgba(26,47,80,0.10); --border-md: rgba(26,47,80,0.18);
  --error: #e84545;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --tab-h: 68px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif; background: var(--bg); color: var(--text-primary); overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
#app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* ── VIEWS ── */
.view { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.view.active { display: flex; }

/* ══════════════════════════════════
   REGISTRATION VIEW
══════════════════════════════════ */
#reg-view { overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); }
.reg-hero { background: var(--navy); padding: calc(var(--safe-top) + 48px) 22px 32px; position: relative; overflow: hidden; flex-shrink: 0; }
.reg-hero::before { content:''; position:absolute; top:-60px; right:-40px; width:190px; height:190px; border-radius:50%; background:rgba(0,169,163,.13); pointer-events:none; }
.reg-hero::after { content:''; position:absolute; bottom:-36px; left:8px; width:120px; height:120px; border-radius:50%; background:rgba(0,169,163,.07); pointer-events:none; }
.lang-toggle { position:absolute; top:calc(var(--safe-top) + 14px); right:16px; display:flex; background:rgba(255,255,255,.1); border-radius:20px; padding:3px; gap:2px; z-index:2; }
.lang-btn { background:none; border:none; color:rgba(255,255,255,.5); font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:16px; cursor:pointer; transition:all .2s; font-family:inherit; }
.lang-btn.active { background:var(--teal); color:#fff; }
.logo-mark { display:flex; align-items:center; gap:9px; margin-bottom:14px; position:relative; z-index:1; }
.logo-icon { width:40px; height:40px; background:var(--teal); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; }
.logo-word { font-size:20px; font-weight:700; color:#fff; letter-spacing:-.3px; }
.logo-word span { color:var(--teal); }
.hero-title { font-size:24px; font-weight:700; color:#fff; line-height:1.3; margin-bottom:6px; letter-spacing:-.4px; position:relative; z-index:1; }
.hero-sub { font-size:12.5px; color:rgba(255,255,255,.5); position:relative; z-index:1; }
.reg-body { padding:18px 16px 40px; display:flex; flex-direction:column; gap:11px; }
.card { background:var(--surface); border-radius:var(--r-lg); padding:16px 14px; border:1px solid var(--border); }
.sec-lbl { font-size:10px; font-weight:700; color:var(--text-hint); letter-spacing:.09em; text-transform:uppercase; margin-bottom:12px; }
.fgrp { display:flex; flex-direction:column; gap:9px; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.field { display:flex; flex-direction:column; gap:4px; }
.field label { font-size:11px; font-weight:600; color:var(--text-secondary); }
.field input, .field select {
  height:44px; border:1.5px solid var(--border); border-radius:var(--r-sm);
  padding:0 12px; font-size:15px; color:var(--text-primary); background:var(--bg);
  outline:none; transition:border-color .2s; -webkit-appearance:none; appearance:none;
  width:100%; font-family:inherit;
}
.field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%239aaaba' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.field input:focus, .field select:focus { border-color:var(--teal); background:#fff; }
.field input.error, .field select.error { border-color:var(--error); }
.ferr { font-size:11px; color:var(--error); display:none; margin-top:1px; }
.ferr.show { display:block; }
.affil-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.affil-btn { height:44px; border:1.5px solid var(--border); border-radius:var(--r-sm); background:var(--bg); color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; transition:all .18s; display:flex; align-items:center; justify-content:center; gap:6px; font-family:inherit; }
.affil-btn.active { border-color:var(--teal); background:var(--teal-dim); color:var(--teal); }
.sub-panel { overflow:hidden; max-height:0; opacity:0; transition:max-height .28s ease, opacity .2s ease, margin .28s ease; }
.sub-panel.open { max-height:120px; opacity:1; margin-top:9px; }
.sub-row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sub-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
.rank-panel { overflow:hidden; max-height:0; opacity:0; transition:max-height .28s ease, opacity .2s ease, margin .28s ease; }
.rank-panel.open { max-height:72px; opacity:1; margin-top:9px; }
.terms-row { display:flex; align-items:flex-start; gap:11px; }
.chk { width:20px; height:20px; min-width:20px; border:1.5px solid var(--border); border-radius:6px; background:var(--bg); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .18s; margin-top:1px; }
.chk.on { background:var(--teal); border-color:var(--teal); }
.chk.on::after { content:''; width:5px; height:9px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg) translateY(-1px); display:block; }
.terms-txt { font-size:13px; color:var(--text-secondary); line-height:1.5; flex:1; }
.tlink { color:var(--teal); text-decoration:underline; cursor:pointer; font-weight:600; }
.submit-btn { width:100%; height:50px; background:var(--navy); color:#fff; border:none; border-radius:var(--r-md); font-size:15px; font-weight:700; cursor:pointer; transition:background .15s, transform .1s; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:8px; }
.submit-btn:active { transform:scale(.98); background:var(--navy-light); }
.btn-arr { width:18px; height:18px; background:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ══════════════════════════════════
   APP SHELL
══════════════════════════════════ */
#shell { flex:1; display:none; flex-direction:column; overflow:hidden; }
#shell.active { display:flex; }
.tab-wrap { flex:1; overflow:hidden; position:relative; }
.tab-pane { position:absolute; inset:0; display:none; flex-direction:column; overflow:hidden; }
.tab-pane.active { display:flex; }

/* Bottom Nav */
.bnav { background:var(--surface); border-top:1px solid var(--border); display:flex; flex-shrink:0; padding-bottom:var(--safe-bottom); }
.bni { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; border:none; background:none; font-family:inherit; color:var(--text-hint); padding:10px 0 8px; position:relative; transition:color .15s; }
.bni.active { color:var(--teal); }
.bni svg { width:22px; height:22px; stroke-width:1.8; }
.bni-lbl { font-size:9.5px; font-weight:600; letter-spacing:.01em; }
.bni-dot { position:absolute; top:8px; right:calc(50% - 16px); width:6px; height:6px; background:var(--error); border-radius:50%; display:none; }
.bni-dot.on { display:block; }

/* ══════════════════════════════════
   APP HEADER (shared)
══════════════════════════════════ */
.app-hdr { background:var(--navy); padding:calc(var(--safe-top) + 44px) 16px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.hdr-left { flex:1; }
.hdr-sub { font-size:11px; color:rgba(255,255,255,.4); margin-bottom:2px; }
.hdr-title { font-size:17px; font-weight:700; color:#fff; }
.hdr-title .hl { color:var(--teal); }
.hdr-right { display:flex; gap:8px; align-items:center; }
.avatar { width:38px; height:38px; border-radius:50%; background:var(--teal-dim); border:2px solid var(--teal); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--teal); cursor:pointer; flex-shrink:0; }
.icon-btn { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; }

/* Stats Strip */
.stats-strip { background:var(--navy); display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.stat-cell { padding:10px 0; display:flex; flex-direction:column; align-items:center; gap:2px; border-right:1px solid rgba(255,255,255,.06); }
.stat-cell:last-child { border-right:none; }
.stat-v { font-size:17px; font-weight:800; color:#fff; letter-spacing:-.5px; line-height:1; }
.stat-v em { font-size:11px; font-weight:600; color:var(--teal); font-style:normal; }
.stat-l { font-size:10px; color:rgba(255,255,255,.38); font-weight:500; }

/* ══════════════════════════════════
   HOME TAB
══════════════════════════════════ */
.home-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.home-inner { padding:16px 14px 28px; display:flex; flex-direction:column; gap:16px; }
.sec-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sec-ttl { font-size:13.5px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:6px; }
.sec-more { font-size:12px; font-weight:600; color:var(--teal); cursor:pointer; border:none; background:none; font-family:inherit; }

/* Find Card */
.find-card { background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--border); overflow:hidden; }

/* Map Mock */
.map-mock { height:178px; background:#dde4ee; position:relative; overflow:hidden; flex-shrink:0; }
.mm-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(26,47,80,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(26,47,80,.07) 1px,transparent 1px); background-size:30px 30px; }
.mm-road-h { position:absolute; top:50%; left:0; right:0; height:10px; background:rgba(255,255,255,.65); margin-top:-5px; }
.mm-road-v { position:absolute; left:36%; top:0; bottom:0; width:8px; background:rgba(255,255,255,.45); }
.mm-dot { position:absolute; border-radius:50%; border:2.5px solid #fff; }
.mm-pulse { position:absolute; width:38px; height:38px; border-radius:50%; background:rgba(0,169,163,.15); top:50%; left:42%; transform:translate(-50%,-50%); animation:mm-pulse 2s ease-in-out infinite; }
@keyframes mm-pulse { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6} 50%{transform:translate(-50%,-50%) scale(1.3);opacity:.2} }
.mm-me { position:absolute; top:50%; left:42%; transform:translate(-50%,-50%); width:13px; height:13px; background:var(--teal); border-radius:50%; border:2.5px solid #fff; box-shadow:0 2px 8px rgba(0,169,163,.5); }
.mm-badge { position:absolute; bottom:9px; right:9px; background:rgba(26,47,80,.82); color:#fff; font-size:11px; font-weight:600; padding:5px 10px; border-radius:20px; display:flex; align-items:center; gap:4px; }
.mm-gps { position:absolute; bottom:9px; left:9px; width:32px; height:32px; background:#fff; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.1); }

/* Dest input */
.dest-area { padding:12px 12px 0; }
.dest-wrap { position:relative; }
.dest-ico { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--teal); display:flex; pointer-events:none; }
.dest-inp { width:100%; height:46px; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-md); padding:0 12px 0 38px; font-size:14px; color:var(--text-primary); outline:none; font-family:inherit; cursor:pointer; transition:border-color .2s; }
.dest-inp::placeholder { color:var(--text-hint); }
.dest-inp:focus { border-color:var(--teal); }

/* Favorites */
.fav-row { display:flex; gap:8px; padding:10px 12px; overflow-x:auto; scrollbar-width:none; }
.fav-row::-webkit-scrollbar { display:none; }
.fav-chip { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; flex-shrink:0; }
.fav-ico { width:42px; height:42px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all .15s; }
.fav-chip:active .fav-ico { background:var(--teal-dim); border-color:var(--teal); color:var(--teal); }
.fav-lbl { font-size:9.5px; font-weight:600; color:var(--text-secondary); max-width:48px; text-align:center; line-height:1.2; }
.fav-add .fav-ico { border-style:dashed; color:var(--text-hint); }
.fav-add .fav-lbl { color:var(--text-hint); }

/* Search Btn */
.srch-wrap { padding:0 12px 12px; }
.srch-btn { width:100%; height:46px; background:var(--teal); color:#fff; border:none; border-radius:var(--r-md); font-size:14.5px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .15s, transform .1s; }
.srch-btn:active { background:var(--teal-light); transform:scale(.98); }
.srch-pulse { width:7px; height:7px; background:rgba(255,255,255,.65); border-radius:50%; animation:pulse 1.6s ease-in-out infinite; flex-shrink:0; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.65} 50%{transform:scale(1.5);opacity:1} }

/* Ride Cards */
.rides-list { display:flex; flex-direction:column; gap:9px; }
.ride-card { background:var(--surface); border-radius:var(--r-md); border:1px solid var(--border); padding:13px 13px 11px; cursor:pointer; transition:border-color .15s; }
.ride-card:active { border-color:var(--teal); }
.rc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:9px; }
.rc-dest-lbl { font-size:9.5px; color:var(--text-hint); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:2px; }
.rc-dest { font-size:14.5px; font-weight:700; color:var(--text-primary); line-height:1.25; }
.rc-badges { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.pill { font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.pill-live { background:rgba(232,69,69,.12); color:var(--error); }
.pill-sched { background:var(--navy-dim); color:var(--navy); }
.pill-teal { background:var(--teal-dim); color:var(--teal); }
.rc-bot { display:flex; align-items:center; justify-content:space-between; }
.rc-members { display:flex; align-items:center; gap:6px; }
.mavs { display:flex; }
.mav { width:23px; height:23px; border-radius:50%; border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:8.5px; font-weight:700; color:#fff; margin-left:-5px; }
.mav:first-child { margin-left:0; }
.mav-n { background:var(--navy); } .mav-t { background:var(--teal); } .mav-g { background:#8899aa; }
.rc-slots { font-size:11.5px; color:var(--text-secondary); font-weight:500; }
.rc-right { display:flex; align-items:center; gap:8px; }
.rc-time { display:flex; align-items:center; gap:3px; font-size:11.5px; color:var(--text-secondary); }
.join-btn { height:28px; padding:0 13px; background:var(--teal); color:#fff; border:none; border-radius:20px; font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.join-btn:active { background:var(--teal-light); }

/* ══════════════════════════════════
   STUB VIEWS
══════════════════════════════════ */
.stub { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:40px 24px; }
.stub-ico { opacity:.3; color:var(--text-hint); }
.stub-ttl { font-size:15px; font-weight:700; color:var(--text-secondary); }
.stub-sub { font-size:13px; color:var(--text-hint); text-align:center; line-height:1.6; max-width:230px; }
.stub-chip { margin-top:4px; background:var(--teal-dim); color:var(--teal); font-size:12px; font-weight:700; padding:6px 18px; border-radius:20px; cursor:pointer; border:none; font-family:inherit; }

/* ══════════════════════════════════
   PROFILE TAB
══════════════════════════════════ */
.prof-hdr { background:var(--navy); padding:calc(var(--safe-top) + 44px) 16px 22px; display:flex; flex-direction:column; align-items:center; gap:12px; flex-shrink:0; }
.prof-av { width:68px; height:68px; border-radius:50%; background:var(--teal-dim); border:3px solid var(--teal); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:var(--teal); }
.prof-name { font-size:18px; font-weight:700; color:#fff; }
.prof-badge { background:rgba(0,169,163,.2); color:var(--teal); font-size:11.5px; font-weight:700; padding:4px 14px; border-radius:20px; }
.prof-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 14px 24px; display:flex; flex-direction:column; gap:11px; }
.icard { background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--border); padding:16px 14px; }
.icard-ttl { font-size:10px; font-weight:700; color:var(--text-hint); letter-spacing:.09em; text-transform:uppercase; margin-bottom:12px; }
.irow { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); }
.irow:last-child { border-bottom:none; }
.ikey { font-size:13px; color:var(--text-secondary); }
.ival { font-size:13px; font-weight:600; color:var(--text-primary); text-align:right; max-width:62%; word-break:break-all; }
.ival-uuid { font-size:10px; font-family:'Courier New',monospace; color:var(--teal); }
.lang-btns { display:flex; background:var(--bg); border-radius:20px; padding:3px; gap:2px; }
.lang-pbtn { background:none; border:none; border-radius:16px; font-size:11.5px; font-weight:700; padding:4px 14px; cursor:pointer; font-family:inherit; transition:all .2s; color:var(--text-hint); }
.lang-pbtn.active { background:var(--teal); color:#fff; }
.reset-btn { width:100%; height:44px; background:none; border:1.5px solid var(--error); color:var(--error); border-radius:var(--r-md); font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s; }
.reset-btn:active { background:rgba(232,69,69,.06); }

/* ══════════════════════════════════
   TOAST + MODALS
══════════════════════════════════ */
.toast { position:fixed; bottom:calc(var(--tab-h) + var(--safe-bottom) + 10px); left:50%; transform:translateX(-50%) translateY(12px); background:rgba(26,47,80,.95); color:#fff; padding:10px 18px; border-radius:100px; font-size:13px; font-weight:600; opacity:0; transition:all .28s; pointer-events:none; white-space:nowrap; z-index:999; }
.toast.on { opacity:1; transform:translateX(-50%) translateY(0); }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.42); display:none; align-items:flex-end; z-index:200; }
.overlay.open { display:flex; }
.sheet { background:#fff; border-radius:22px 22px 0 0; width:100%; max-height:80vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px calc(20px + var(--safe-bottom)); }
.sheet-handle { width:32px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 14px; }
.sheet-title { font-size:15.5px; font-weight:700; color:var(--text-primary); margin-bottom:12px; }
.sheet-body { font-size:12.5px; color:var(--text-secondary); line-height:1.7; }
.sheet-close { width:100%; height:44px; background:var(--navy); color:#fff; border:none; border-radius:var(--r-md); font-size:14px; font-weight:600; cursor:pointer; margin-top:16px; font-family:inherit; }

/* Dest Sheet */
.ds-inp-wrap { position:relative; margin-bottom:12px; }
.ds-ico { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--teal); display:flex; pointer-events:none; }
.ds-inp { width:100%; height:44px; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-md); padding:0 12px 0 37px; font-size:14px; color:var(--text-primary); outline:none; font-family:inherit; transition:border-color .2s; }
.ds-inp:focus { border-color:var(--teal); }
.ds-item { display:flex; align-items:center; gap:11px; padding:11px 2px; border-bottom:1px solid var(--border); cursor:pointer; }
.ds-item:last-child { border-bottom:none; }
.ds-item-ico { width:34px; height:34px; border-radius:9px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); flex-shrink:0; }
.ds-item-name { font-size:13.5px; font-weight:600; color:var(--text-primary); }
.ds-item-addr { font-size:11.5px; color:var(--text-hint); margin-top:1px; }