:root{
  --bg:#f4f8fb; --card:#ffffff; --ink:#0f2b40; --muted:#5f7c92;
  --line:#e3edf4; --brand:#0ea5b7; --brand2:#0b7fa8; --accent:#38bdf8;
  --deep:#06304a; --shadow:0 6px 20px rgba(11,60,90,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Gowun Dodum',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--ink);
  padding-bottom:76px; max-width:560px; margin:0 auto; position:relative;
}
h1,h2,h3{margin:0}
h1{font-family:'Poppins',sans-serif}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; color:#fff;
  background:linear-gradient(135deg,var(--brand2),var(--deep));
  box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:10px}
.logo{font-size:26px}
.brand h1{font-size:20px; letter-spacing:.5px}
.brand p{margin:2px 0 0; font-size:11px; opacity:.85}
.profile-chip{
  display:flex; align-items:center; gap:6px; border:none; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff; padding:7px 12px;
  border-radius:999px; font-size:13px; font-family:inherit;
}
.profile-chip span:first-child{font-size:16px}

/* Tabs */
main{padding:14px}
.tab{display:none; animation:fade .25s ease}
.tab.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin:12px 0; box-shadow:var(--shadow);
}
.panel.tight{padding:14px 16px; margin-bottom:8px}
.panel h3{font-size:15px; margin-bottom:10px}
.hint{font-size:12.5px; color:var(--muted); line-height:1.5; margin:4px 0 12px}
.hint b{color:var(--brand2)}
.opt{color:var(--muted); font-weight:normal; font-size:11px}

/* Map */
.map{height:340px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)}
.map.small{height:220px; margin-bottom:10px}

/* Filters */
.filters{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px}
.seg{display:inline-flex; background:#e8f1f6; border-radius:999px; padding:3px}
.seg button{
  border:none; background:transparent; padding:7px 14px; border-radius:999px;
  font-family:inherit; font-size:12.5px; color:var(--muted); cursor:pointer;
}
.seg button.on{background:#fff; color:var(--brand2); font-weight:bold; box-shadow:0 2px 6px rgba(0,0,0,.06)}
.chk{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px}

/* Stat cards */
.stat-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.stat-cards .sc{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 10px; text-align:center; box-shadow:var(--shadow);
}
.sc .v{font-size:22px; font-weight:bold; color:var(--brand2); font-family:'Poppins'}
.sc .k{font-size:11px; color:var(--muted); margin-top:4px}

/* Bars */
.bars .bar-row{margin:9px 0}
.bar-row .lab{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:4px}
.bar-row .track{background:#eef4f8; border-radius:8px; height:10px; overflow:hidden}
.bar-row .fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--brand2)); border-radius:8px}
.tag-photo{color:var(--brand); font-size:11px}

.hourbars{display:flex; align-items:flex-end; gap:3px; height:90px; padding-top:6px}
.hourbars .hb{flex:1; background:linear-gradient(180deg,var(--accent),var(--brand2)); border-radius:3px 3px 0 0; min-height:2px; position:relative}
.hourbars .hb span{position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font-size:8px; color:var(--muted)}

/* Form */
form label{display:block; font-size:13px; margin:12px 0 0; color:var(--ink)}
form input,form textarea{
  width:100%; margin-top:6px; padding:11px 12px; border:1px solid var(--line);
  border-radius:12px; font-family:inherit; font-size:14px; background:#fbfdfe;
}
form input:focus,form textarea:focus{outline:none; border-color:var(--accent)}
button.primary{
  width:100%; margin-top:18px; padding:14px; border:none; border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff;
  font-family:inherit; font-size:15px; font-weight:bold; cursor:pointer;
}
button.ghost{
  width:100%; margin:8px 0 2px; padding:11px; border:1px dashed var(--brand);
  background:#f0fbfd; color:var(--brand2); border-radius:12px; font-family:inherit;
  font-size:13px; cursor:pointer;
}
#intensitySeg{display:flex; width:100%; margin-top:6px}
#intensitySeg button{flex:1}

/* Ranking */
.ranklist{list-style:none; margin:0; padding:0}
.ranklist li{
  display:flex; align-items:center; gap:12px; padding:11px 6px; border-bottom:1px solid var(--line);
}
.ranklist li:last-child{border-bottom:none}
.rk-num{width:26px; text-align:center; font-family:'Poppins'; font-weight:bold; color:var(--muted)}
.rk-num.top{color:var(--brand)}
.rk-badge{font-size:22px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#f0f7fb}
.rk-main{flex:1}
.rk-name{font-size:14px; font-weight:bold}
.rk-sub{font-size:11px; color:var(--muted); margin-top:2px}
.rk-score{font-family:'Poppins'; font-weight:bold; color:var(--brand2)}

.grade-guide{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.gg{display:flex; align-items:center; gap:8px; padding:9px; border-radius:11px; background:#f7fbfd; border:1px solid var(--line)}
.gg .ic{font-size:20px}
.gg .gn{font-size:12.5px; font-weight:bold}
.gg .gm{font-size:10.5px; color:var(--muted)}

/* Predict */
.legend{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:12px 0}
.legend .lg{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted)}
.legend .dot{width:12px; height:12px; border-radius:50%}
.predict-list{margin-top:6px}
.pr{
  display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; margin:9px 0; box-shadow:var(--shadow);
}
.pr .gauge{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:'Poppins'; font-weight:bold; font-size:13px; color:#fff; flex-shrink:0}
.pr-body{flex:1}
.pr-name{font-size:14px; font-weight:bold}
.pr-meta{font-size:11px; color:var(--muted); margin-top:2px}
.pr-factors{display:flex; gap:5px; margin-top:6px; flex-wrap:wrap}
.pr-factors .f{font-size:10px; background:#eef5f9; color:var(--brand2); padding:2px 7px; border-radius:6px}
.pr-lv{font-size:11px; font-weight:bold; padding:3px 9px; border-radius:999px}
.src{font-size:10.5px; color:var(--muted); text-align:center; margin:14px 6px; line-height:1.5}
.databanner{font-size:12px; line-height:1.5; border-radius:12px; padding:11px 13px; margin:10px 0}
.databanner.warn{background:#fff8f0; border:1px solid #fde3c4; color:#8a5a1e}
.databanner.ok{background:#eefaf2; border:1px solid #c4ecd6; color:#1e7a4a}
.disclaimer{font-size:11.5px; line-height:1.55; color:#7c6a3a; background:#fffdf5;
  border:1px dashed #e6d8a8; border-radius:11px; padding:10px 12px; margin:10px 0}
.disclaimer b{color:#8a6d1e}
.conf-badge{font-size:9.5px; background:#fef0e0; color:#b4701e; padding:1px 6px; border-radius:6px; margin-left:4px; vertical-align:middle}
.pr-factors .f.off{background:#f1f5f9; color:#94a3b8}

/* Tabbar */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:560px;
  display:flex; background:#fff; border-top:1px solid var(--line); z-index:500;
  box-shadow:0 -4px 16px rgba(11,60,90,.06);
}
.tabbar button{
  flex:1; border:none; background:none; padding:9px 0 12px; font-family:inherit;
  font-size:11px; color:var(--muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px;
}
.tabbar button span{font-size:20px}
.tabbar button.on{color:var(--brand2); font-weight:bold}

/* Toast */
.toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--deep); color:#fff; padding:11px 20px; border-radius:999px; font-size:13px;
  opacity:0; pointer-events:none; transition:.3s; z-index:900; white-space:nowrap;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* Top actions / help */
.top-actions{display:flex; align-items:center; gap:8px}
.help-chip{width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff; font-size:15px; font-weight:bold}

/* Guide tab */
.guide-hero{text-align:center; padding:22px 16px 8px; border-radius:var(--radius);
  background:linear-gradient(160deg,#0b7fa8,#06304a); color:#fff; box-shadow:var(--shadow); margin-bottom:12px}
.gh-emoji{font-size:40px}
.guide-hero h2{font-size:19px; margin:8px 0 4px}
.guide-hero p{font-size:12.5px; opacity:.85; margin:0}
.cond-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0}
.cond{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:3px}
.cond .ci{font-size:24px}
.cond b{font-size:14px}
.cond small{font-size:11px; color:var(--muted); line-height:1.45}
.tips{margin:0; padding-left:18px}
.tips li{font-size:12.5px; color:var(--ink); line-height:1.7}
.tips b{color:var(--brand2)}
.panel.warn{background:#fff8f0; border-color:#fde3c4; font-size:12.5px; color:#8a5a1e; line-height:1.6}

/* Onboarding modal */
.modal-overlay{position:fixed; inset:0; z-index:1000; background:rgba(6,48,74,.5);
  display:flex; align-items:center; justify-content:center; padding:18px; backdrop-filter:blur(2px)}
.modal-overlay[hidden]{display:none}
.modal{background:#fff; border-radius:22px; width:100%; max-width:420px; max-height:88vh; overflow:auto;
  padding:24px 22px; position:relative; box-shadow:0 20px 60px rgba(6,48,74,.35); animation:pop .25s ease}
@keyframes pop{from{opacity:0; transform:scale(.94) translateY(10px)}to{opacity:1; transform:none}}
.modal-x{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; font-size:14px}
.modal h2{font-size:20px; padding-right:30px}
.modal-sub{font-size:12.5px; color:var(--muted); margin:6px 0 16px}
.ob-item{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line);
  border-radius:14px; padding:13px 14px; margin-bottom:10px}
.ob-item .obi{font-size:22px; line-height:1.2}
.ob-item b{font-size:14.5px; display:block; margin-bottom:2px}
.ob-item small{font-size:12px; color:var(--muted); line-height:1.45}
.ob-item.hi{background:#eefaff; border-color:#c7ecfb; flex-wrap:wrap}
.ob-cta{width:100%; margin-top:10px; padding:12px; border:none; border-radius:11px;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; font-family:inherit;
  font-size:14px; font-weight:bold; cursor:pointer}
.modal-actions{display:flex; gap:10px; margin-top:6px}
.modal-actions .ghost,.modal-actions .primary{width:50%; margin:0}
.primary.sm{margin-top:0; padding:13px}

/* Auth / account modal */
.social-btns{display:flex; flex-direction:column; gap:9px; margin:4px 0 6px}
.social-btn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:12px; border-radius:11px; font-family:inherit; font-size:14px; font-weight:bold;
  cursor:pointer; border:1px solid transparent}
.social-btn .badge{width:20px; height:20px; border-radius:5px; display:grid; place-items:center;
  font-size:12px; font-weight:900; background:rgba(0,0,0,.06)}
.divider{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--muted); font-size:11px}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--line)}
.auth-seg{width:100%; margin-bottom:6px}
.auth-seg button{flex:1}
.auth-err{color:#e11d48; font-size:12px; min-height:16px; margin:6px 0 0}
.modal-sub.center{text-align:center; margin-top:14px}
.acc-head{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.acc-avatar{width:56px; height:56px; border-radius:50%; background:#eefaff; display:grid; place-items:center;
  font-size:28px; overflow:hidden}
.acc-avatar img{width:100%; height:100%; object-fit:cover}
.acc-name{font-size:18px; font-weight:bold}
.acc-email{font-size:12px; color:var(--muted); margin-top:2px}
.acc-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px}
.acc-stats .as{background:#f7fbfd; border:1px solid var(--line); border-radius:12px; padding:12px 6px; text-align:center}
.acc-stats .as .v{font-family:'Poppins'; font-weight:bold; font-size:18px; color:var(--brand2)}
.acc-stats .as .k{font-size:10.5px; color:var(--muted); margin-top:3px}

.leaflet-popup-content{font-family:'Gowun Dodum',sans-serif; font-size:12.5px; margin:10px 12px}
.leaflet-popup-content b{color:var(--brand2)}
.pop-photo{width:100%; border-radius:8px; margin-top:6px}