:root{
  --deep:#10301f; --pine:#1B4332; --moss:#2D6A4F; --leaf:#40916C; --mint:#74C69D;
  --pale:#D8F3DC; --bg:#F4F7F2; --card:#FFFFFF; --ink:#1d2b22; --sub:#6b7f72;
  --amber:#F4A261; --danger:#E63946; --safe:#2D6A4F; --sky:#457B9D;
  --shadow:0 6px 18px rgba(16,48,31,.10);
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"Apple SD Gothic Neo","Pretendard",-apple-system,"Noto Sans KR",sans-serif;
  background:#dfe7df; color:var(--ink);
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
button{font-family:inherit; border:none; cursor:pointer; background:none}
#phone{
  width:100%; max-width:430px; height:100vh; max-height:932px;
  background:var(--bg); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
@media(min-width:560px){
  #phone{height:880px; border-radius:44px; box-shadow:0 30px 80px rgba(0,0,0,.35); border:10px solid #0e1f15}
}
.screen{display:none; flex:1; overflow-y:auto; padding:18px 18px 96px; scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen.active{display:block}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:14px}
h2.sec{font-size:16px; font-weight:800; margin:18px 2px 10px; display:flex; align-items:center; gap:6px}
h2.sec small{font-weight:600; color:var(--sub); font-size:11px; margin-left:auto; text-align:right}
.chip{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:99px; background:var(--pale); color:var(--pine)}
.src{font-size:10px; color:#92a399; margin-top:8px; line-height:1.5}
/* header */
header{padding:14px 18px 6px; display:flex; align-items:center; gap:8px}
.logo{display:flex; align-items:center; gap:8px; font-weight:900; font-size:19px; color:var(--pine)}
.logo .mark{width:34px;height:34px;border-radius:11px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.logo .mark img{width:100%;height:100%}
#cloudDot{display:none;align-items:center;gap:3px;margin-left:4px;font-size:9px;font-weight:800;letter-spacing:.5px;color:#1B7A4B;background:#D8F3E3;border-radius:6px;padding:2px 5px}
#cloudDot::before{content:"";width:5px;height:5px;border-radius:50%;background:#1B7A4B;animation:cloudPulse 1.6s infinite}
@keyframes cloudPulse{0%,100%{opacity:1}50%{opacity:.25}}
.loc{margin-left:auto; font-size:12px; color:var(--sub); font-weight:700; appearance:none; -webkit-appearance:none; border:none; background:transparent; text-align:right; cursor:pointer}
.sido-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:8px 0 4px}
.sido-chip{padding:10px 4px; border-radius:11px; background:#F2F7F1; border:1.5px solid #E3EDE4; font-size:12.5px; font-weight:700; color:var(--pine); cursor:pointer}
.sido-chip:active{background:#D6E8D9}
.bell{width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:15px;position:relative}
.bell i{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--danger)}
/* home index */
.index-card{background:linear-gradient(150deg,#1B4332,#2D6A4F 70%,#40916C); color:#fff; border-radius:22px; padding:18px; display:flex; gap:16px; align-items:center; box-shadow:0 10px 26px rgba(27,67,50,.35)}
.ring{position:relative; width:104px;height:104px; flex:none}
.ring svg{transform:rotate(-90deg)}
.ring circle.val-arc{transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.ring .val{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring .val b{font-size:30px; line-height:1}
.ring .val span{font-size:11px; opacity:.85; margin-top:3px}
.idx-right{flex:1}
.idx-right h3{font-size:15px; margin-bottom:9px; font-weight:800}
.idx-place{display:block; margin-top:4px; font-size:11px; font-weight:700; color:#fff}
.idx-place a{color:#fff; background:#10301f; border-radius:99px; padding:1px 7px; margin-left:4px; cursor:pointer; white-space:nowrap}
.idx-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.idx-item{background:#10301f; border-radius:11px; padding:7px 9px; font-size:11px; line-height:1.45; color:#fff; text-align:left; position:relative; min-height:58px; width:100%}
button.idx-item{display:block; cursor:pointer; transition:background .16s, transform .16s}
button.idx-item:active{background:rgba(255,255,255,.22); transform:translateY(1px)}
.idx-item b{display:block; font-size:12px}
.idx-item .ok{color:#B7E4C7}.idx-item .mid{color:#FFD8A8}.idx-item .bad2{color:#FFB3B8}
.idx-more{display:inline-flex; align-items:center; margin-top:4px; padding:1px 6px; border-radius:99px; background:#0b2417; color:#fff; font-size:9.5px; font-weight:800}
/* reco */
.reco{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none}
.reco::-webkit-scrollbar{display:none}
.reco .r{flex:0 0 218px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; text-align:left}
.r .thumb{height:86px; position:relative; display:flex; align-items:flex-end; padding:8px; overflow:hidden}
.r .thumb .thumb-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.r .thumb .match{position:relative; z-index:1; background:rgba(255,255,255,.94); color:var(--pine); font-weight:900; font-size:12px; border-radius:9px; padding:4px 8px}
.r .body{padding:11px 12px 13px}
.r .body b{font-size:14px}
.r .meta{display:flex; gap:7px; margin-top:7px; font-size:10.5px; color:var(--sub); font-weight:600; flex-wrap:wrap}
.t1{background:linear-gradient(160deg,#74C69D,#2D6A4F)}
.t2{background:linear-gradient(160deg,#a3c4f3,#457B9D)}
.t3{background:linear-gradient(160deg,#F4A261,#BC6C25)}
.banner{display:flex; gap:10px; align-items:flex-start; background:#FFF4E8; border:1px solid #F8D8B5; border-radius:14px; padding:12px 13px; font-size:12px; line-height:1.55}
.banner b{color:#B35309}
/* trail */
.trail-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.trail-head .tt b{font-size:17px; display:block}
.trail-head .tt span{font-size:11.5px; color:var(--sub); font-weight:600}
.live{margin-left:auto; display:flex; align-items:center; gap:5px; background:#E7F5EC; color:var(--safe); font-size:11px; font-weight:800; padding:5px 10px; border-radius:99px; flex:none}
.live i{width:7px;height:7px;border-radius:50%;background:var(--safe); animation:pulse 1.6s infinite}
.live.idle{background:#EEF1EE; color:var(--sub)}
.live.idle i{background:#9fb0a4; animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(45,106,79,.5)}70%{box-shadow:0 0 0 7px rgba(45,106,79,0)}100%{box-shadow:0 0 0 0 rgba(45,106,79,0)}}
.mapwrap{border-radius:20px; overflow:hidden; box-shadow:var(--shadow); position:relative; background:#EAF3E6}
#hikeMap{width:100%; height:240px; z-index:0}
#mapHost .map-fallback{height:240px; display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--sub); text-align:center; padding:20px}
.gridtag{position:absolute; top:10px; left:10px; background:rgba(16,48,31,.82); color:#fff; font-size:10.5px; padding:6px 10px; border-radius:9px; line-height:1.5; z-index:2}
.gridtag b{font-size:12px; letter-spacing:.5px}
.offline{position:absolute; top:10px; right:10px; background:rgba(255,255,255,.93); color:var(--pine); font-size:10px; font-weight:800; padding:5px 9px; border-radius:99px; z-index:2}
.stats4{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0}
.st{background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:10px 6px; text-align:center}
.st b{font-size:15px; display:block}
.st b small{font-size:10px}
.st span{font-size:9.5px; color:var(--sub); font-weight:700}
.alert-card{display:flex; gap:11px; background:#FDECEC; border:1px solid #F5C2C7; border-radius:15px; padding:13px; margin-bottom:13px}
.alert-card .ico{width:38px;height:38px; border-radius:11px; background:var(--danger); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; flex:none}
.alert-card .tx b{font-size:13px; color:#A4161A; display:block; margin-bottom:3px}
.alert-card .tx span{font-size:11.5px; color:#7c4a4f; line-height:1.5}
.hike-ctrl{display:flex; gap:9px; margin-bottom:13px}
.btn{flex:1; padding:13px; border-radius:14px; font-size:14px; font-weight:800; box-shadow:var(--shadow)}
.btn.primary{background:var(--pine); color:#fff}
.btn.warn{background:#FFF4E8; color:#B35309; border:1px solid #F8D8B5}
.btn.ghost{background:#fff; color:var(--pine); border:1px solid #DCE6DE}
.btn.defer{box-shadow:none; color:#64766B; background:#F8FBF8; border-color:#E4ECE5}
.btn.danger{background:var(--danger); color:#fff}
.btn:disabled{opacity:.45; cursor:default}
.watch-card{background:#fff;border:1px solid #DCE6DE;border-radius:14px;box-shadow:var(--shadow);padding:14px;margin:0 0 12px}
.watch-main{display:flex;align-items:center;gap:12px}
.watch-copy{min-width:0;flex:1}
.watch-copy b{display:block;font-size:13px;color:var(--pine);margin-bottom:4px}
.watch-copy span{display:block;font-size:11px;font-weight:700;color:var(--sub);line-height:1.35}
.watch-btn{flex:none;min-width:66px;height:36px;border-radius:11px;background:#EAF4EC;color:var(--pine);font-size:12px;font-weight:900;border:1px solid #CFE6D4}
.watch-btn:disabled{opacity:.55}
.watch-card.on{border-color:#B7E4C7;background:#F4FBF6}
.watch-card.on .watch-btn{background:var(--pine);color:#fff;border-color:var(--pine)}
.watch-code{margin-top:10px;border-radius:12px;background:#10301f;color:#fff;text-align:center;padding:11px;font-weight:900;font-size:24px;letter-spacing:5px}
#btnDemo{margin:12px 0!important;min-height:44px;padding:11px 13px;line-height:1.35;white-space:normal}
.toggles{display:flex; gap:10px; margin-top:0}
.tg{flex:1; background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:12px 13px; display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; min-height:44px}
.sw{margin-left:auto; width:38px; height:22px; border-radius:99px; background:var(--leaf); position:relative; flex:none; transition:background .2s; cursor:pointer}
.sw::after{content:""; position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:all .2s}
.sw.off{background:#C9D5CC}
.sw.off::after{right:19px}
/* chat */
.chat{display:flex; flex-direction:column; gap:11px}
.msg{max-width:82%; padding:11px 13px; border-radius:16px; font-size:13px; line-height:1.6; word-break:break-word}
.msg.user{align-self:flex-end; background:var(--moss); color:#fff; border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start; background:#fff; box-shadow:var(--shadow); border-bottom-left-radius:5px}
.msg .who{font-size:10.5px; font-weight:800; color:var(--leaf); margin-bottom:4px; display:flex; align-items:center; gap:4px}
.typing{align-self:flex-start; background:#fff; box-shadow:var(--shadow); border-radius:16px; border-bottom-left-radius:5px; padding:13px 16px; display:flex; gap:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:#A9C3B2;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.photo{align-self:flex-end; width:170px; border-radius:16px; border-bottom-right-radius:5px; overflow:hidden; box-shadow:var(--shadow)}
.photo .ph-img{height:110px}
.photo .ph-cap{background:#fff;padding:7px 10px;font-size:10.5px;color:var(--sub)}
.danger-flag{background:#FDECEC; border:1.5px solid var(--danger); border-radius:13px; padding:10px 11px; margin-top:8px}
.danger-flag.safe2{background:#EAF6EE; border-color:var(--leaf)}
.danger-flag b{color:#A4161A; font-size:12.5px; display:flex; gap:5px; align-items:center}
.danger-flag.safe2 b{color:var(--pine)}
.danger-flag p{font-size:11.5px; color:#7c4a4f; margin-top:4px; line-height:1.5}
.danger-flag.safe2 p{color:#41604d}
.conf{height:7px; background:#F1D2D5; border-radius:99px; margin-top:7px; overflow:hidden}
.conf i{display:block; height:100%; background:var(--danger); border-radius:99px}
.danger-flag.safe2 .conf{background:#CFE5D6}
.danger-flag.safe2 .conf i{background:var(--leaf)}
.quick{display:flex; gap:7px; overflow-x:auto; padding:4px 2px; margin-top:8px; scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.qc{flex:none; font-size:11.5px; font-weight:700; background:#fff; box-shadow:var(--shadow); padding:8px 12px; border-radius:99px; color:var(--pine)}
.qc.on{background:var(--pine); color:#fff}
.inputbar{display:flex; gap:8px; margin-top:12px; align-items:center}
.inputbar input{flex:1; background:#fff; box-shadow:var(--shadow); border-radius:99px; padding:12px 16px; font-size:13px; border:none; outline:none; color:var(--ink); min-width:0}
.inputbar input::placeholder{color:#9aa8a0}
.rbtn{width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.rbtn.mic{background:var(--moss); color:#fff}
/* sos */
.guard{display:flex; gap:10px}
.guard .g{flex:1; background:#fff; border-radius:15px; box-shadow:var(--shadow); padding:12px; font-size:11px; line-height:1.5}
.guard .g b{display:flex; align-items:center; gap:5px; font-size:12px; margin-bottom:4px; color:var(--pine)}
.dot-ok{width:8px;height:8px;border-radius:50%;background:#2D6A4F; animation:pulse 1.6s infinite; flex:none}
.dot-off{width:8px;height:8px;border-radius:50%;background:#C9D5CC; flex:none}
.sos-zone{text-align:center; padding:18px 0 8px; position:relative}
.sos-btn{width:168px; height:168px; border-radius:50%; margin:0 auto; background:radial-gradient(circle at 35% 30%, #E02F3B, #B31324 60%, #81151E); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; box-shadow:0 16px 38px rgba(230,57,70,.42), 0 0 0 12px rgba(230,57,70,.10), 0 0 0 26px rgba(230,57,70,.05); user-select:none; position:relative; transition:transform .15s}
.sos-btn b{font-size:38px; letter-spacing:2px}
.sos-btn span{font-size:11px; opacity:.92}
.sos-btn svg{position:absolute; inset:-9px; transform:rotate(-90deg)}
.sos-btn svg circle{fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; opacity:.95}
.sos-hint{font-size:11px; color:var(--sub); margin-top:14px}
.loc-card{background:#10301f; color:#fff; border-radius:18px; padding:15px}
.loc-card .row{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.09); font-size:12px}
.loc-card .row:last-child{border:none}
.loc-card .row span{opacity:.65; flex:none}
.loc-card .row b{font-weight:800; text-align:right}
.timeline{margin-top:4px}
.tl{display:flex; gap:10px; padding:9px 0; font-size:11.5px; border-bottom:1px dashed #e3eae4}
.tl:last-child{border:none}
.tl time{flex:none; color:var(--sub); font-weight:700; width:42px}
/* my */
.prof{display:flex; align-items:center; gap:13px}
.ava{width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,#2D6A4F,#10301f);display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff}
.prof .pi b{font-size:16px; display:block}
.prof .pi span{font-size:11.5px; color:var(--sub); font-weight:600}
.lv{margin-left:auto; background:var(--pale); color:var(--pine); font-weight:900; font-size:11px; padding:6px 10px; border-radius:99px; flex:none}
.edit-prof{font-size:10.5px; color:var(--sub); font-weight:700; text-decoration:underline; margin-left:6px}
.account-card{display:flex; align-items:center; gap:12px; justify-content:space-between}
.account-card b{display:block; font-size:13.5px; color:var(--pine)}
.account-card span{display:block; margin-top:3px; font-size:11.5px; color:var(--sub); font-weight:600}
.account-card button{flex:none; border-radius:11px; background:var(--pine); color:#fff; padding:9px 12px; font-size:12px; font-weight:900}
.m4{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:13px}
.m4 .mm{background:#F2F7F1; border-radius:13px; padding:10px 4px; text-align:center}
.m4 .mm b{display:block; font-size:14px; color:var(--pine)}
.m4 .mm span{font-size:9px; color:var(--sub); font-weight:700}
.bars{display:flex; align-items:flex-end; gap:9px; height:84px; margin-top:8px; padding:0 4px}
.bars .b{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end}
.bars .b i{display:block; width:100%; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,#74C69D,#40916C); transition:height .6s}
.bars .b.cur i{background:linear-gradient(180deg,#FFD166,#F4A261)}
.bars .b span{font-size:9px; color:var(--sub); font-weight:700}
.badges{display:flex; gap:9px; overflow-x:auto; padding:2px; scrollbar-width:none}
.badges::-webkit-scrollbar{display:none}
.bd{flex:none; width:74px; text-align:center; cursor:pointer}
.bd .ic{width:54px;height:54px;margin:0 auto 5px;border-radius:18px;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:24px}
.bd.lock .ic{filter:grayscale(1); opacity:.45}
.bd.lock span{opacity:.55}
.bd span{font-size:9.5px; color:var(--sub); font-weight:700; line-height:1.3; display:block}
.ins{background:linear-gradient(135deg,#264653,#2A9D8F); color:#fff; border-radius:18px; padding:16px; display:flex; align-items:center; gap:12px}
.ins .tx{flex:1}
.ins .tx b{font-size:14px; display:block; margin-bottom:3px}
.ins .tx span{font-size:11px; opacity:.85; line-height:1.5}
.ins .cta{background:#fff; color:#264653; font-weight:900; font-size:12px; padding:9px 13px; border-radius:11px; flex:none}
.ins .cta.joined{background:#B7E4C7; color:#10301f}
/* nav */
nav{position:absolute; bottom:0; left:0; right:0; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); border-top:1px solid #e6ece6; display:flex; padding:8px 6px calc(12px + env(safe-area-inset-bottom)); z-index:50}
nav a{flex:1; text-align:center; font-size:9.5px; font-weight:700; color:#9fb0a4; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:3px}
nav a .nic{font-size:20px; line-height:1}
nav a.on{color:var(--pine)}
nav a.sosnav .nic{width:46px;height:46px;margin-top:-26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E02F3B,#A90F1F);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;letter-spacing:.5px;box-shadow:0 8px 18px rgba(230,57,70,.45); border:4px solid #fff}
nav a.sosnav{color:var(--danger)}
.statusbar{height:14px}
/* modal & sheet */
.overlay{position:absolute; inset:0; background:rgba(14,31,21,.55); backdrop-filter:blur(3px); z-index:90; display:none; align-items:flex-end}
.overlay.show{display:flex}
#onboard{background:#06130d; backdrop-filter:none; align-items:stretch}
.sheet{background:#fff; width:100%; border-radius:24px 24px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom)); max-height:86%; overflow-y:auto; animation:up .28s cubic-bezier(.2,.9,.3,1)}
#extSheet:has(>.condition-panel){padding:0; background:transparent; overflow-y:auto; -webkit-overflow-scrolling:touch}
@keyframes up{from{transform:translateY(40px); opacity:0}to{transform:none; opacity:1}}
.sheet h3{font-size:17px; font-weight:900; margin-bottom:4px}
.sheet .sub{font-size:12px; color:var(--sub); margin-bottom:14px; line-height:1.5}
.grab{width:42px; height:5px; border-radius:99px; background:#E2E9E3; margin:0 auto 14px}
.seg{display:flex; gap:8px; margin:8px 0 14px}
.seg button{flex:1; padding:11px 0; border-radius:12px; background:#F2F7F1; font-weight:800; font-size:13px; color:var(--sub); border:1.5px solid transparent}
.seg button.on{background:var(--pale); color:var(--pine); border-color:var(--leaf)}
.fld{margin-bottom:12px}
.fld label{display:block; font-size:11.5px; font-weight:800; color:var(--sub); margin-bottom:6px}
.fld input[type=text]{width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid #DCE6DE; font-size:14px; outline:none}
.ftue-screen{height:100%; max-height:none; border-radius:0; padding:0; position:relative; overflow:hidden; background:#07140f; animation:none}
.ftue-screen::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(214,248,220,.18) 0%,transparent 32%,rgba(0,0,0,.32) 100%); opacity:.9; pointer-events:none}
.ftue-screen::after{content:""; position:absolute; left:26px; right:26px; top:178px; height:1px; background:linear-gradient(90deg,transparent,rgba(226,255,234,.42),transparent); opacity:0; transition:opacity .7s ease; pointer-events:none}
.ftue-atmosphere{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.ftue-glow{position:absolute; left:0; right:0; top:0; height:320px; background:linear-gradient(180deg,rgba(176,236,190,.28),rgba(76,151,101,.12) 42%,transparent); filter:blur(10px); transform:translateY(0); animation:ftueGlow 3.8s ease-in-out infinite alternate}
.ftue-ridge{position:absolute; left:-12%; right:-12%; height:190px; bottom:0; opacity:.72; background:linear-gradient(160deg,transparent 0 38%,rgba(101,178,129,.28) 39% 40%,rgba(10,38,25,.80) 41% 100%); clip-path:polygon(0 74%,14% 49%,27% 66%,43% 32%,59% 63%,74% 38%,100% 67%,100% 100%,0 100%)}
.ftue-ridge.ridge-b{bottom:52px; opacity:.28; filter:blur(.5px); transform:scaleX(1.08); background:linear-gradient(160deg,transparent 0 36%,rgba(234,255,239,.32) 37% 38%,rgba(61,127,86,.62) 39% 100%)}
.ftue-trail{position:absolute; left:50%; bottom:0; width:2px; height:48%; transform:translateX(-50%) perspective(180px) rotateX(58deg); transform-origin:bottom; background:linear-gradient(180deg,transparent,rgba(235,255,240,.48),rgba(255,255,255,.05)); box-shadow:0 0 28px rgba(190,246,204,.24)}
.ftue-splash{position:absolute; left:0; right:0; top:50%; height:154px; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#fff; font-size:29px; font-weight:900; letter-spacing:0; text-shadow:0 16px 42px rgba(0,0,0,.44); opacity:1; transform:translateY(-50%); transition:top 1s cubic-bezier(.18,.86,.22,1), transform 1s cubic-bezier(.18,.86,.22,1), gap 1s cubic-bezier(.18,.86,.22,1), font-size 1s cubic-bezier(.18,.86,.22,1); pointer-events:none}
.ftue-brandmark{width:96px; height:96px; padding:0; background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; animation:ftueMarkIn 1.1s cubic-bezier(.18,.86,.22,1) both; transition:width 1s cubic-bezier(.18,.86,.22,1), height 1s cubic-bezier(.18,.86,.22,1)}
.ftue-brandmark img{width:100%; height:100%; border-radius:0; box-shadow:none; object-fit:contain}
.ftue-content{position:relative; z-index:3; height:100%; padding:210px 26px calc(20px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; justify-content:flex-end; gap:16px; opacity:0; transform:translateY(34px); transition:opacity .72s ease .2s, transform .88s cubic-bezier(.18,.86,.22,1) .2s}
.ftue-start{position:relative; padding:20px 0 0; border-top:1px solid rgba(255,255,255,.24); border-radius:0; background:transparent; border-right:0; border-bottom:0; border-left:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; overflow:visible}
.ftue-start::before{content:none}
.ftue-start>*{position:relative}
.ftue-screen h3{font-size:28px; line-height:1.16; letter-spacing:0; margin-bottom:9px; color:#fff}
.ftue-screen .sub{font-size:13.5px; line-height:1.52; color:rgba(237,249,241,.78); margin-bottom:18px}
.ftue-screen input,.auth-form input{width:100%; padding:13px 0; border-radius:0; border:0; border-bottom:1px solid rgba(255,255,255,.28); background:transparent; color:#fff; font-size:14px; outline:none; margin-bottom:9px; box-shadow:none}
.ftue-screen input:focus,.auth-form input:focus{border-color:rgba(183,228,199,.82); background:transparent}
.ftue-screen input::placeholder,.auth-form input::placeholder{color:rgba(255,255,255,.58)}
.auth-form{margin-top:2px}
.auth-divider{display:flex; align-items:center; gap:10px; margin:15px 0 9px; color:rgba(237,249,241,.62); font-size:11px; font-weight:900}
.auth-divider::before,.auth-divider::after{content:""; flex:1; height:1px; background:rgba(255,255,255,.20)}
.ftue-skip{width:100%; min-height:42px; color:rgba(255,255,255,.72); background:transparent; border-top:1px solid rgba(255,255,255,.14); font-size:13px; font-weight:900; backdrop-filter:none; -webkit-backdrop-filter:none}
#onboard.ready .ftue-screen::after{opacity:.5}
#onboard.ready .ftue-splash{top:46px; transform:translateY(0); gap:5px; font-size:20px}
#onboard.ready .ftue-brandmark{width:58px; height:58px; box-shadow:none}
#onboard.ready .ftue-content{opacity:1; transform:translateY(0)}
.auth-box{margin:14px 0 16px; padding:15px; border-radius:16px; background:#fff; border:1.5px solid #CFE6D4; box-shadow:0 12px 28px rgba(27,67,50,.12)}
.auth-box-primary{background:linear-gradient(180deg,#FFFFFF 0%,#F4FAF5 100%)}
.auth-box b{display:block; font-size:14px; color:var(--pine); margin-bottom:4px}
.auth-box p{font-size:12px; color:var(--sub); line-height:1.5; margin-bottom:10px}
.auth-perks{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 12px}
.auth-perks span{display:inline-flex; align-items:center; min-height:24px; padding:5px 8px; border-radius:999px; background:#EAF4EC; color:#2D6A4F; font-size:10.5px; font-weight:900}
.auth-box input{width:100%; padding:12px 13px; border-radius:12px; border:1.5px solid #DCE6DE; background:#fff; font-size:13px; outline:none; margin-bottom:8px}
.auth-actions,.social-row{display:flex; gap:7px; margin-top:1px}
.auth-actions button,.social-row button{flex:1; min-width:0; min-height:42px; padding:10px 6px; border-radius:999px; font-size:12px; font-weight:900; background:#fff; color:#10301f; border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; gap:6px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.auth-actions button:first-child{background:rgba(255,255,255,.92); color:var(--pine); border:0}
.social-row{margin-top:8px}
.social-row.social-row-stack{flex-direction:column; gap:9px; margin-top:0}
.social-row.social-row-stack button{width:100%; justify-content:center; min-height:46px; font-size:14px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius:999px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.social-row button[data-provider=google]{color:#2455C3}
.social-row button[data-provider=kakao]{background:#FEE500; border-color:#F2D800; color:#191600}
.social-row button[data-provider=naver]{background:#03C75A; border-color:#03C75A; color:#062e18}
.ftue-screen .social-row button[data-provider=google],
.ftue-screen .social-row button[data-provider=kakao],
.ftue-screen .social-row button[data-provider=naver],
.account-glass-panel .social-row button[data-provider=google],
.account-glass-panel .social-row button[data-provider=kakao],
.account-glass-panel .social-row button[data-provider=naver]{background:#fff; border-color:rgba(255,255,255,.18); color:#10301f}
.ftue-screen .social-row.social-row-stack{gap:0; border-top:1px solid rgba(255,255,255,.16)}
.ftue-screen .social-row.social-row-stack button{justify-content:center; text-align:center; min-height:48px; padding:13px 0; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.16); border-radius:0; color:#fff; backdrop-filter:none; -webkit-backdrop-filter:none}
.ftue-screen .social-row button[data-provider=google],
.ftue-screen .social-row button[data-provider=kakao],
.ftue-screen .social-row button[data-provider=naver]{background:#fff; border-color:rgba(255,255,255,.16); color:#10301f}
.provider-logo{width:19px; height:19px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:12px; font-weight:1000; line-height:1}
.provider-logo svg{width:18px; height:18px; display:block}
.google-logo{background:#fff; border:1px solid #E4E9F0}
.kakao-logo{background:#191600; color:#FEE500}
.naver-logo{background:#fff; color:#006C31}
.kakao-logo::before{content:"K"}
.naver-logo::before{content:"N"}
.auth-msg{display:block; min-height:15px; margin-top:8px; font-size:11px; color:var(--sub); font-weight:700}
.auth-msg.err{color:#FFB7BF}
.auth-msg.ok{color:#B7E4C7}
.account-glass-panel{margin:-22px -20px calc(-22px - env(safe-area-inset-bottom)); padding:24px 20px calc(22px + env(safe-area-inset-bottom)); color:#fff; background:linear-gradient(155deg,rgba(8,28,18,.96),rgba(22,73,48,.90) 58%,rgba(7,19,14,.98)); border-radius:24px 24px 0 0; position:relative; overflow:hidden}
.account-glass-panel::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(183,228,199,.24),transparent 38%),linear-gradient(120deg,rgba(255,255,255,.18),transparent 36%); pointer-events:none}
.account-glass-panel>*{position:relative}
.account-glass-panel h3{color:#fff; font-size:24px; line-height:1.18; margin:4px 0 7px}
.account-glass-panel .sub{color:rgba(237,249,241,.76); margin-bottom:18px}
.account-glass-panel .btnrow{margin-top:12px}
.account-glass-panel .btn.ghost{background:#10301f; color:#fff; border:1px solid rgba(255,255,255,.16); box-shadow:none}
.profile-after-account{margin:6px 0 12px; padding-top:2px}
.profile-after-account b{display:block; font-size:12px; color:var(--pine); font-weight:900}
.profile-after-account p{font-size:11.5px; color:var(--sub); line-height:1.45; margin-top:3px}
.defer-row{margin-top:10px}
@keyframes ftueGlow{from{opacity:.68; transform:translateY(-8px)}to{opacity:1; transform:translateY(0)}}
@keyframes ftueMarkIn{from{opacity:0; transform:translateY(18px) scale(.9); filter:blur(8px)}to{opacity:1; transform:none; filter:blur(0)}}
@media(prefers-reduced-motion:reduce){
  .ftue-glow,.ftue-brandmark{animation:none}
  .ftue-splash,.ftue-content{transition:none}
  .ftue-splash{top:46px; transform:translateY(0)}
  .ftue-brandmark{width:58px; height:58px}
  .ftue-content{opacity:1; transform:none}
}

/* 전국 산 검색 */
.mnt-search{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; margin-top:14px; padding:13px 16px; border-radius:14px; border:1.5px solid #DCE6DE; background:#fff; font-size:14px; font-weight:800; color:var(--ink,#1B4332); text-align:left; cursor:pointer}
.mnt-search span{font-size:11px; font-weight:600; color:var(--sub)}
#mntQ{width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid #DCE6DE; font-size:14px; outline:none; margin-bottom:10px}
.mnt-results{max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:7px}
.mnt-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; border-radius:12px; background:#F2F7F1; border:1px solid #E3EDE4; cursor:pointer; transition:background .12s}
.mnt-row:active{background:#E3EDE4}
.mnt-row b{font-size:14px; font-weight:800}
.mnt-row .loc{font-size:11px; color:var(--sub); margin-top:2px}
.mnt-row .h{font-size:13px; font-weight:800; color:#40916C; white-space:nowrap}
.mnt-row .top{font-size:10px; font-weight:800; color:#B35309; background:#FFF4E8; border-radius:99px; padding:2px 7px; margin-left:6px}
.mnt-empty{font-size:12.5px; color:var(--sub); text-align:center; padding:18px 0}
.rep-extra{display:flex; justify-content:space-around; gap:6px; margin:10px 0 4px; padding:9px 0; background:#F2F7F1; border-radius:11px; font-size:11.5px; color:var(--sub)}
.rep-extra b{color:var(--pine); font-weight:900; font-size:13px}

/* 산행 캘린더 */
.cal-head{font-size:13px; font-weight:800; text-align:center; margin-bottom:8px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-h{font-size:10px; color:var(--sub); text-align:center; font-weight:700; padding:2px 0}
.cal-d{position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:11.5px; color:var(--ink,#1B4332); border-radius:8px}
.cal-d.today{background:#1B4332; color:#fff; font-weight:800}
.cal-dots{position:absolute; bottom:3px; display:flex; gap:2px}
.cal-dots i, .cal-legend i{width:5px; height:5px; border-radius:50%; display:inline-block}
.dot-hk{background:#2D6A4F} .dot-pl{background:#F4A261}
.cal-legend{display:flex; gap:14px; justify-content:center; margin-top:9px; font-size:10.5px; color:var(--sub)}
.cal-legend span{display:flex; align-items:center; gap:4px}

/* 산행 기록 로그 */
.log-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; margin-bottom:7px; background:#fff; border:1px solid #E8EFE9; border-radius:12px; box-shadow:var(--shadow)}
.log-row b{font-size:13.5px; font-weight:800}
.log-row span{display:block; font-size:11px; color:var(--sub); margin-top:2px}
.log-stat{font-size:12.5px; font-weight:800; color:#40916C; white-space:nowrap}
/* 배지 진행바 */
.bd-bar{height:9px; background:#E8EFE9; border-radius:99px; overflow:hidden; margin-top:12px}
.bd-bar i{display:block; height:100%; background:linear-gradient(90deg,#52B788,#2D6A4F); border-radius:99px}

/* 산행 중 GPS 동기화 표시 */
.gps-tag{margin-top:10px; padding:9px 12px; border-radius:11px; font-size:11.5px; font-weight:700; background:#FFF7EC; color:#B35309; border:1px solid #F4D9B5}
.gps-tag.on{background:#EAF4EC; color:#2D6A4F; border-color:#CFE6D4}

/* 산행 탭 — 가는 길(시작 전) */
.way-card{background:#EAF4EC; border:1px solid #CFE6D4; border-radius:14px; padding:13px 15px; margin-bottom:12px}
.way-card b{font-size:13px} .way-card p{font-size:12px; color:var(--sub); margin:4px 0 10px}
.way-tip{font-size:11px; color:var(--sub); margin-top:8px; line-height:1.5}

/* 지도 · 길찾기 (req5) */
.detail-map{width:100%; height:170px; border-radius:13px; margin:8px 0 10px; z-index:0}
.dir-row{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px}
.dir-btn{flex:1; min-width:96px; text-align:center; padding:10px 8px; border-radius:11px; font-size:12px; font-weight:800; text-decoration:none; background:#F2F7F1; color:var(--pine); border:1.5px solid #DCE6DE; cursor:pointer}
.dir-btn:disabled{opacity:.62; cursor:progress}
.dir-btn.kakao{background:#FEE500; color:#3A2929; border-color:#FEE500}
.dir-btn.home{background:#EAF4EC}
/* 산행 일정 계획 (req6) */
.plan-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 13px; margin-bottom:8px; border-radius:12px; background:#fff; border:1px solid #E8EFE9; cursor:pointer; box-shadow:var(--shadow)}
.plan-row b{font-size:14px; font-weight:800}
.plan-row span{display:block; font-size:11px; color:var(--sub)}
.plan-wx{font-size:11.5px; color:var(--sub); text-align:center; flex:1}
.plan-score{font-size:18px; font-weight:900; text-align:right}
.plan-score small{display:block; font-size:9.5px; font-weight:700}
.plan-row.good .plan-score{color:#2D6A4F} .plan-row.mid .plan-score{color:#B35309} .plan-row.bad .plan-score{color:#C9304E}
.plan-row.good{border-left:4px solid #52B788} .plan-row.mid{border-left:4px solid #F4A261} .plan-row.bad{border-left:4px solid #E5697F}

/* 산 상세 — 사진·시설 */
.mtn-hero{width:100%; height:150px; object-fit:cover; border-radius:14px; margin-bottom:12px; background:#E3EDE4; display:block}
.mtn-score{margin:10px 0; padding:10px 12px; background:#F0F7F1; border-radius:11px; font-size:12.5px; color:var(--sub)}
.mtn-score b{color:var(--pine); font-size:16px; font-weight:900}
.facs{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px}
.fac{font-size:11px; font-weight:700; color:#2D6A4F; background:#EAF4EC; border:1px solid #D6E8D9; border-radius:99px; padding:4px 9px}

/* 숲나들e 연동 모달 */
.news-item{display:flex; align-items:center; gap:8px; font-size:12.5px; padding:12px; margin-bottom:7px; background:#F2F7F1; border:1px solid #E3EDE4; border-radius:11px; cursor:pointer}
.news-item .ni-tx{flex:1}
.news-item b{font-weight:700}
.news-item small{display:block; font-size:10.5px; color:var(--sub); margin-top:3px; margin-left:18px}
.news-item>span{color:var(--leaf); font-weight:900}
.news-item:active{background:#E3EDE4}
.notif-item{display:flex; gap:11px; align-items:flex-start; padding:12px; margin-bottom:7px; background:#F2F7F1; border:1px solid #E3EDE4; border-radius:11px}
.notif-item .ni-ic{font-size:20px; line-height:1.2}
.notif-item b{display:block; font-size:13px; font-weight:800}
.notif-item span{display:block; font-size:11.5px; color:var(--sub); margin-top:3px; line-height:1.5}
.ext-row{font-size:12.5px; padding:9px 0; border-bottom:1px solid #EEF3EE; line-height:1.5}
.ext-row b{display:inline-block; min-width:42px; color:var(--sub); font-weight:800; margin-right:6px}
.sheet .btnrow a.btn{display:flex; align-items:center; justify-content:center; text-decoration:none}
.condition-panel{margin:0; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); color:#EAF4FF; background:linear-gradient(180deg,#11375f 0%,#12345a 46%,#162f4d 100%); border-radius:24px 24px 0 0; position:relative; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.20)}
.condition-panel::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 36%,rgba(0,0,0,.12)); pointer-events:none}
.condition-panel>*{position:relative}
.condition-close{position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%; background:#0b223a; color:#fff; font-size:24px; line-height:1; border:1px solid rgba(255,255,255,.20)}
.condition-topline{display:flex; gap:8px; align-items:center; color:rgba(234,244,255,.72); font-size:10px; font-weight:900; letter-spacing:.4px; padding-right:42px}
.condition-topline span{padding:4px 8px; border-radius:99px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10)}
.condition-hero{display:grid; grid-template-columns:1fr 76px; gap:12px; align-items:center; margin:14px 0 12px}
.condition-kicker{font-size:14px; font-weight:900; color:#fff; margin-bottom:5px}
.condition-value{font-size:34px; line-height:1.08; font-weight:900; color:#fff; letter-spacing:0}
.condition-hero p{font-size:12px; line-height:1.5; color:rgba(234,244,255,.78); margin-top:6px}
.condition-gauge{width:76px; height:76px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:conic-gradient(var(--condition-accent) 0 72%,rgba(255,255,255,.16) 72% 100%); box-shadow:inset 0 0 0 9px rgba(18,52,90,.92),0 8px 24px rgba(0,0,0,.18)}
.condition-gauge span{font-size:22px; font-weight:900; color:#fff}
.condition-gauge small{font-size:9px; color:rgba(234,244,255,.72); font-weight:800}
.condition-feed{display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none}
.condition-feed::-webkit-scrollbar{display:none}
.feed-chip{flex:0 0 132px; min-height:66px; padding:9px 10px; border-radius:14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.feed-chip span{display:inline-flex; font-size:9px; font-weight:900; color:#102c4d; background:var(--condition-accent); border-radius:99px; padding:2px 6px}
.feed-chip b{display:block; margin-top:6px; font-size:12px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.feed-chip small{display:block; margin-top:2px; font-size:10px; line-height:1.25; color:rgba(234,244,255,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.condition-chart{border-radius:18px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.13); padding:12px 12px 8px; overflow:hidden}
.chart-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:5px}
.chart-head b{font-size:12px; color:#fff}
.chart-head span{font-size:9.5px; color:rgba(234,244,255,.62); text-align:right; line-height:1.35}
.radar-wrap{display:grid; gap:6px}
.radar-graph{width:100%; height:auto; display:block; margin-top:-2px}
.radar-grid{fill:none; stroke:rgba(255,255,255,.16); stroke-width:1}
.radar-spoke{stroke:rgba(255,255,255,.10); stroke-width:1}
.radar-fill{fill:url(#radarFill); stroke:var(--condition-accent); stroke-width:2.5}
.radar-line{stroke:var(--condition-accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.radar-dots circle{fill:#fff; stroke:var(--condition-accent); stroke-width:2}
.radar-labels text{fill:rgba(234,244,255,.72); font-size:10px; font-weight:900}
.radar-axis-list{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:0}
.radar-axis{min-width:0; border-radius:12px; padding:7px 8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.09)}
.radar-axis span{display:block; font-size:9.5px; font-weight:900; color:rgba(234,244,255,.66); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.radar-axis b{display:inline-block; margin-top:3px; font-size:16px; line-height:1; color:#fff}
.radar-axis small{display:block; margin-top:3px; font-size:9.5px; line-height:1.25; color:rgba(234,244,255,.63); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.condition-map{border-radius:18px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.13); padding:12px; margin-top:9px; overflow:hidden}
.zone-map-wrap{display:grid; gap:8px}
.map-legend{display:flex; gap:7px; align-items:center; justify-content:flex-end; margin-top:-2px}
.map-legend-item{display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:900; color:rgba(234,244,255,.72)}
.map-legend-item i{width:9px; height:9px; border-radius:50%; display:block}
.map-legend-item.low i{background:#58d68d}.map-legend-item.mid i{background:#ffd166}.map-legend-item.high i{background:#ff6b6b}
.condition-leaflet-map{width:100%; height:214px; border-radius:18px; overflow:hidden; background:#DCEAF0; border:1px solid rgba(255,255,255,.28); position:relative; isolation:isolate}
.condition-leaflet-map .leaflet-control-container{display:none}
.condition-map-label{background:rgba(255,255,255,.92); border:0; border-radius:999px; color:#18354f; font-size:10.5px; font-weight:950; padding:3px 7px; box-shadow:0 4px 12px rgba(24,50,70,.18)}
.condition-map-label::before{display:none}
.zone-list{display:grid; grid-template-columns:repeat(2,1fr); gap:6px}
.zone-row{min-width:0; border-radius:12px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.10); padding:8px}
.zone-row.low{background:rgba(88,214,141,.15)}.zone-row.mid{background:rgba(255,209,102,.16)}.zone-row.high{background:rgba(255,107,107,.17)}
.zone-row span{display:block; color:rgba(234,244,255,.66); font-size:9.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zone-row b{display:block; color:#fff; font-size:14px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zone-row small{display:block; color:rgba(234,244,255,.68); font-size:9.5px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.condition-location{border-radius:16px; background:rgba(5,20,38,.22); border:1px solid rgba(255,255,255,.11); padding:11px 12px; margin-top:9px}
.location-stack{display:grid; gap:7px}
.location-layer{display:grid; grid-template-columns:68px 1fr; column-gap:10px; row-gap:2px; align-items:baseline; padding:8px 0; border-top:1px solid rgba(255,255,255,.09)}
.location-layer:first-child{border-top:none; padding-top:0}
.location-layer span{font-size:10px; font-weight:900; color:rgba(234,244,255,.62)}
.location-layer b{font-size:12px; line-height:1.25; color:#fff; min-width:0; overflow:hidden; text-overflow:ellipsis}
.location-layer small{grid-column:2; font-size:10px; line-height:1.25; color:rgba(234,244,255,.66)}
.condition-card-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:9px}
.signal-card{min-height:84px; border-radius:15px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); padding:11px; overflow:hidden}
.signal-card span{display:block; font-size:10px; color:rgba(234,244,255,.64); font-weight:900}
.signal-card b{display:block; margin-top:5px; font-size:21px; line-height:1.08; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.signal-card small{display:block; margin-top:6px; font-size:10.5px; color:rgba(234,244,255,.72); line-height:1.35}
.signal-card.safe{background:rgba(82,183,136,.20)} .signal-card.warn{background:rgba(244,162,97,.20)}
.condition-panel .condition-guide{background:rgba(5,20,38,.28); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:12px 13px; margin-top:10px}
.condition-panel .condition-guide>b{display:block; color:#fff; font-size:12.5px; margin-bottom:7px}
.condition-panel .condition-step{font-size:12px; color:rgba(234,244,255,.82); line-height:1.55; padding:7px 0; border-top:1px solid rgba(255,255,255,.10)}
.condition-panel .condition-step:first-of-type{border-top:none; padding-top:0}
.condition-source{font-size:10px; color:rgba(234,244,255,.58); margin-top:10px; line-height:1.45}
.checks{display:flex; gap:8px; flex-wrap:wrap}
.ckc{padding:9px 13px; border-radius:99px; background:#F2F7F1; font-size:12px; font-weight:700; color:var(--sub); border:1.5px solid transparent}
.ckc.on{background:#FFF4E8; color:#B35309; border-color:#F4A261}
.elev{margin:10px 0 4px}
.haz{display:flex; gap:9px; background:#FFF7F0; border:1px solid #F8DFC8; border-radius:12px; padding:10px 11px; margin-top:8px; font-size:11.5px; line-height:1.5}
.haz b{color:#B35309; display:block; font-size:12px}
.meta-row{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px}
.kv{flex:1 1 28%; background:#F2F7F1; border-radius:12px; padding:9px 6px; text-align:center; min-width:90px}
.kv b{display:block; font-size:14px; color:var(--pine)}
.kv span{font-size:9.5px; color:var(--sub); font-weight:700}
.sheet .btnrow{display:flex; gap:9px; margin-top:16px}
/* toast */
#toast{position:absolute; top:16px; left:14px; right:14px; z-index:120; transform:translateY(-130%); transition:transform .35s cubic-bezier(.2,.9,.3,1); pointer-events:none}
#toast.show{transform:none}
#toast .t-in{background:rgba(16,48,31,.96); color:#fff; border-radius:16px; padding:13px 15px; display:flex; gap:10px; align-items:flex-start; box-shadow:0 14px 34px rgba(0,0,0,.35); font-size:12.5px; line-height:1.5}
#toast .t-in .ti{font-size:18px; flex:none}
#toast .t-in b{display:block; font-size:13px; margin-bottom:1px}
#toast.alert .t-in{background:rgba(164,22,26,.97)}
/* photo grid */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px}
.pg{border-radius:14px; overflow:hidden; box-shadow:var(--shadow); text-align:center; background:#fff}
.pg .pgi{height:74px}
.pg span{display:block; font-size:11px; font-weight:700; color:var(--ink); padding:7px 4px}
/* sos modal states */
.sos-pay{background:#F6F8F6; border-radius:14px; padding:4px 14px; margin:10px 0}
.sos-pay .row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed #E2E9E3; font-size:12px}
.sos-pay .row:last-child{border:none}
.sos-pay .row span{color:var(--sub)}
.sos-pay .row b{text-align:right}
.steps{margin:12px 0 2px}
.stp{display:flex; gap:11px; padding:9px 0; align-items:flex-start; opacity:.35; transition:opacity .3s}
.stp.done{opacity:1}
.stp .si{width:26px; height:26px; border-radius:50%; background:#E8EFEA; color:var(--pine); font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center; flex:none}
.stp.done .si{background:var(--pine); color:#fff}
.stp b{font-size:13px; display:block}
.stp span{font-size:11px; color:var(--sub)}