:root{
  --bg:#0a1518; --bg2:#0e2026; --panel:#102a31; --panel2:#15333b;
  --ink:#e7f0ee; --ink-dim:#8aa7a4; --line:#1d3d45;
  --amber:#e8b04b; --good:#54d6a0; --mid:#e8b04b; --bad:#e8694b; --teal:#3fb6c4;
  --tabh:64px;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* keyboard focus visibility (mouse clicks stay clean) */
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:8px; }
/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}
html,body{background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans KR',sans-serif; -webkit-font-smoothing:antialiased;}
body{min-height:100dvh;
  padding:env(safe-area-inset-top) 16px calc(var(--tabh) + env(safe-area-inset-bottom) + 16px);
  background:
    radial-gradient(120% 80% at 50% -10%, #143038 0%, transparent 55%),
    radial-gradient(90% 60% at 90% 110%, #0c252b 0%, transparent 60%), var(--bg);
  background-attachment:fixed;}
.wrap{max-width:560px; margin:0 auto; position:relative;}
a{color:var(--teal);}

/* ── header ── */
header{padding:24px 4px 12px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px;}
.brand .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--teal); opacity:.85;}
.brand h1{font-family:'Fraunces',serif; font-weight:900; font-size:27px; line-height:1.02; letter-spacing:-.01em; margin-top:4px;}
.brand h1 em{font-style:italic; color:var(--amber);}
.actions{flex:none; display:flex; gap:8px;}
.gear{flex:none; width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  background:var(--panel); color:var(--ink-dim); font-size:17px; cursor:pointer; display:grid; place-items:center; transition:.2s;}
.gear:active{transform:scale(.92);}

.statusbar{display:flex; align-items:center; gap:10px; padding:0 4px 12px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim);}
.statusbar .dot{width:7px; height:7px; border-radius:50%; background:var(--ink-dim); flex:none;}
.statusbar .dot.live{background:var(--good); box-shadow:0 0 8px var(--good);}
.statusbar .dot.err{background:var(--bad);}
.refresh{margin-left:auto; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:999px; padding:6px 13px; font-size:12px; font-family:'IBM Plex Mono',monospace; cursor:pointer;}
.refresh:active{transform:scale(.95);}
.refresh.spin{opacity:.5;}

/* ── install banner ── */
.installbar{display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:9px 12px; border-radius:12px;
  background:rgba(63,182,196,.10); border:1px solid rgba(63,182,196,.3); font-size:12.5px; color:var(--ink);}
.installbar .ibtns{margin-left:auto; display:flex; gap:6px; flex:none;}
.installbar button{border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:999px; padding:6px 12px; font-size:12px; font-family:inherit; cursor:pointer;}
.installbar #installBtn{background:var(--teal); color:#04181a; border-color:var(--teal); font-weight:600;}

/* ── disclaimer ── */
.disclaimer{font-size:11px; line-height:1.55; color:var(--ink-dim); margin:2px 0 12px;
  background:rgba(232,176,75,.08); border:1px solid rgba(232,176,75,.22); border-radius:12px; padding:8px 12px;}
.disclaimer b{color:var(--amber); font-weight:600;}
.disc-toggle{background:none; border:none; color:var(--amber); font-family:'IBM Plex Mono',monospace;
  font-size:11px; cursor:pointer; padding:0 0 0 2px; text-decoration:underline;}
.disc-full{margin-top:7px; padding-top:7px; border-top:1px solid rgba(232,176,75,.18);}

/* ── context banner (today's best) ── */
.bestnote{font-size:12.5px; line-height:1.5; border-radius:12px; padding:10px 13px; margin:0 0 12px;
  background:rgba(232,105,75,.10); border:1px solid rgba(232,105,75,.28); color:#f0b6a6;}
.bestnote b{color:var(--ink);}
.bestnote.ok{background:rgba(232,176,75,.10); border-color:rgba(232,176,75,.28); color:#f0d29a;}
.bestnote.good{background:rgba(84,214,160,.10); border-color:rgba(84,214,160,.28); color:#a6ead0;}

/* ── skeleton loading ── */
.skel{background:linear-gradient(165deg,var(--panel),var(--bg2)); border:1px solid var(--line);
  border-radius:20px; height:118px; margin-bottom:13px; position:relative; overflow:hidden;}
.skel::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent); animation:shimmer 1.3s infinite;}
@keyframes shimmer{100%{transform:translateX(100%);}}

/* ── filter chips ── */
.barlabel{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-dim); margin:8px 4px 7px;}
.chips{display:flex; flex-wrap:wrap; gap:6px; padding:0 4px 12px;}
.chip{flex:none; border:1px solid var(--line); background:var(--panel); color:var(--ink-dim);
  border-radius:999px; padding:6px 11px; font-size:12px; cursor:pointer; white-space:nowrap; transition:.15s;}
.chip.on{background:var(--amber); color:#1a1205; border-color:var(--amber); font-weight:600;}
.chip:active{transform:scale(.95);}
.daybar .chip.on{background:rgba(63,182,196,.16); color:var(--teal); border-color:var(--teal);}

/* ── filter dropdowns ── */
.filterrow{display:flex; flex-wrap:wrap; gap:10px; padding:0 4px 10px;}
.ff{flex:1 1 30%; min-width:96px; display:flex; flex-direction:column;}
.ff.wide{flex:1 1 100%;}
.ff > label{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-dim); margin:0 2px 6px;}
.seldrop{width:100%; padding:11px 32px 11px 13px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-family:'IBM Plex Sans KR',sans-serif; font-size:14px;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238aa7a4' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;}
.seldrop:focus{outline:none; border-color:var(--teal);}
.seldrop.day{border-color:rgba(63,182,196,.5); color:var(--teal);}
.txtin{width:100%; padding:11px 13px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-family:'IBM Plex Sans KR',sans-serif; font-size:14px;}
.txtin:focus{outline:none; border-color:var(--teal);}
.txtin.mono{font-family:'IBM Plex Mono',monospace;}

.sechead{font-family:'Fraunces',serif; font-weight:600; font-size:18px; letter-spacing:-.01em; margin:6px 4px 4px;}
.seccap{font-size:11px; color:var(--ink-dim); margin:2px 4px 12px; line-height:1.5;}

/* ── sort toggle ── */
.sortrow{display:flex; align-items:center; gap:7px; padding:0 4px 12px;}
.sortrow .sl{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-dim); margin-right:2px;}
.sortrow button{border:1px solid var(--line); background:var(--panel); color:var(--ink-dim);
  border-radius:999px; padding:5px 12px; font-size:12px; font-family:inherit; cursor:pointer; transition:.15s;}
.sortrow button.on{background:rgba(63,182,196,.16); color:var(--teal); border-color:var(--teal); font-weight:600;}
.sortrow button:active{transform:scale(.95);}

/* ── pull-to-refresh ── */
#ptr{position:fixed; top:0; left:50%; transform:translate(-50%,-44px); z-index:25;
  width:34px; height:34px; border-radius:50%; background:var(--panel); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--teal); font-size:16px; transition:opacity .15s;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.7); opacity:0; pointer-events:none;}
#ptr.spin span{display:inline-block; animation:ptrspin .7s linear infinite;}
@keyframes ptrspin{100%{transform:rotate(360deg);}}

/* ── recommendation cards ── */
#cards{margin-top:8px;}
.card{background:linear-gradient(165deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:20px; padding:16px 16px 14px; margin-bottom:13px;
  position:relative; overflow:hidden; box-shadow:0 16px 36px -24px rgba(0,0,0,.8); cursor:pointer;
  animation:rise .45s cubic-bezier(.2,.7,.2,1) both;}
@keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.card:active{transform:scale(.99);}
.card .glow{position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent); opacity:.5;}
.card.top{border-color:rgba(232,176,75,.5);}
.topbadge{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.14em;
  font-weight:600; color:#1a1205; background:var(--amber); border-radius:0 0 8px 0;
  padding:3px 9px 4px; position:absolute; top:0; left:0;}
.card.top .card-top{margin-top:14px;}
.card .more{display:flex; align-items:center; justify-content:flex-end; gap:3px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--teal); margin-top:9px;}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.card-main{flex:1; min-width:0;}
.c-spot{font-family:'Fraunces',serif; font-weight:600; font-size:18px; letter-spacing:-.01em;}
.c-meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-dim); margin-top:3px;}
.c-meth{display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:13px;}
.c-meth .ic{font-size:15px;}
.c-when{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--teal); margin-left:8px;}
.badge{flex:none; text-align:right;}
.badge .score{font-family:'Fraunces',serif; font-weight:900; font-size:33px; line-height:1;}
.badge .verdict{font-size:11px; font-weight:600; margin-top:1px;}
.score.g{color:var(--good);} .score.m{color:var(--mid);} .score.b{color:var(--bad);}
.verdict.g{color:var(--good);} .verdict.m{color:var(--mid);} .verdict.b{color:var(--bad);}
.c-why{margin-top:10px; display:flex; flex-wrap:wrap; gap:6px;}
.tag{font-size:10px; font-family:'IBM Plex Mono',monospace; padding:3px 8px; border-radius:999px;
  background:rgba(84,214,160,.12); color:var(--good); border:1px solid rgba(84,214,160,.25);}
.tag.warn{background:rgba(232,105,75,.12); color:#f0a48f; border-color:rgba(232,105,75,.3);}
.tag.conf{background:rgba(63,182,196,.1); color:var(--teal); border-color:rgba(63,182,196,.22);}
.conf-low{color:var(--bad);} .conf-medium{color:var(--mid);} .conf-high{color:var(--good);}

/* ── this-week ranking rows ── */
.wrow{display:flex; align-items:center; gap:12px; padding:11px 4px; border-top:1px solid var(--line); cursor:pointer; transition:background .15s;}
.wrow:first-child{border-top:none;}
.wrow:active{background:rgba(255,255,255,.04);}
.wrow .wd{flex:none; width:52px; text-align:center;}
.wrow .wd .wdow{display:block; font-family:'Fraunces',serif; font-weight:600; font-size:15px;}
.wrow .wd .wdate{display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-dim);}
.wrow .wm{flex:1; min-width:0;}
.wrow .wm .wsp{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wrow .wm .wsub{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-dim); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wrow .wsc{flex:none; font-family:'Fraunces',serif; font-weight:900; font-size:22px; min-width:32px; text-align:right;}
.wrow .wsc.g{color:var(--good);} .wrow .wsc.m{color:var(--mid);} .wrow .wsc.b{color:var(--bad);}
.wrow.empty{cursor:default;}
.wrow.empty .wm .wsp{color:var(--ink-dim);}

.empty{text-align:center; padding:30px 16px; color:var(--ink-dim);}
.empty .em{font-size:30px; display:block; margin-bottom:10px;}
.errcard{background:rgba(232,105,75,.1); border:1px solid rgba(232,105,75,.3); border-radius:14px;
  padding:14px; font-size:13px; color:#f0b6a6; margin-bottom:14px;}

/* ── bottom tab bar ── */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:30;
  height:calc(var(--tabh) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:rgba(10,21,24,.92); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  display:flex; max-width:560px; margin:0 auto;}
.tabbar button{flex:1; background:none; border:none; color:var(--ink-dim); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-family:inherit;}
.tabbar button .ti{font-size:20px; line-height:1;}
.tabbar button .tl{font-size:10px; letter-spacing:.02em;}
.tabbar button.on{color:var(--amber);}
.tabbar button.on .ti{transform:translateY(-1px);}

.screen{display:none;}
.screen.on{display:block; animation:fade .3s ease both;}
@keyframes fade{from{opacity:0;} to{opacity:1;}}

/* ── sheets ── */
.sheet-bg{position:fixed; inset:0; background:rgba(4,12,14,.7); backdrop-filter:blur(6px);
  display:none; z-index:50; align-items:flex-end;}
.sheet-bg.show{display:flex;}
.sheet{width:100%; max-width:560px; margin:0 auto; background:var(--bg2);
  border:1px solid var(--line); border-bottom:none; border-radius:24px 24px 0 0;
  padding:22px 20px calc(env(safe-area-inset-bottom) + 26px);
  animation:up .3s cubic-bezier(.2,.7,.2,1); max-height:92vh; overflow-y:auto;}
@keyframes up{from{transform:translateY(100%);} to{transform:none;}}
.sheet h2{font-family:'Fraunces',serif; font-size:21px; margin-bottom:4px;}
.sheet h3{font-family:'Fraunces',serif; font-size:15px; margin:18px 0 8px; color:var(--ink);}
.sheet p{font-size:13px; color:var(--ink-dim); line-height:1.6; margin-bottom:12px;}
.sheet label{font-size:12px; color:var(--ink-dim); display:block; margin:12px 0 6px;}
.sheet input,.sheet select{width:100%; padding:12px 13px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-family:'IBM Plex Sans KR',sans-serif; font-size:14px;}
.sheet input[type=date],.sheet input[type=number]{font-family:'IBM Plex Mono',monospace;}
.sheet .btns{display:flex; gap:10px; margin-top:18px;}
.sheet button.act{flex:1; padding:13px; border-radius:12px; border:none; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;}
.btn-save{background:var(--amber); color:#1a1205;}
.btn-close{background:var(--panel); color:var(--ink); border:1px solid var(--line)!important;}
.sheetdiv{border:none; border-top:1px solid var(--line); margin:20px 0 4px;}

/* detail sub-score bars */
.subrow{display:flex; align-items:center; gap:9px; font-size:13px; margin:10px 0;}
.subrow .sn{flex:0 0 92px; color:var(--ink);}
.subrow .sbar{flex:1; height:7px; background:var(--bg); border-radius:999px; overflow:hidden; border:1px solid var(--line);}
.subrow .sbar i{display:block; height:100%; border-radius:999px;}
.subrow .sv{flex:0 0 30px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim);}
.gearbox{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11px 13px; font-size:13px; margin-top:6px;}
.gearbox b{color:var(--amber);}
.altcard{background:rgba(63,182,196,.07); border:1px solid rgba(63,182,196,.25); border-radius:12px; padding:11px 13px; margin-top:8px; cursor:pointer;}
.altcard .as{font-family:'IBM Plex Mono',monospace; color:var(--teal); font-size:12px;}

/* ── rules screen ── */
.ruleline{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:14px;}
.ruleline:first-of-type{border-top:none;}
.ruleline .rk{color:var(--ink-dim);}
.ruleline .rv{font-family:'IBM Plex Mono',monospace; text-align:right;}
.verify{font-size:11px; color:var(--amber); margin-top:10px; display:flex; align-items:center; gap:6px;}
.lastck{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-dim); margin-top:4px;}

/* ── logbook ── */
.logsum{display:flex; gap:8px; margin:4px 0 6px;}
.logsum .s{flex:1; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 4px;}
.logsum .s b{display:block; font-family:'Fraunces',serif; font-weight:900; font-size:21px; color:var(--amber); line-height:1.1;}
.logsum .s span{font-size:10px; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace;}
.outbtns{display:flex; gap:8px; margin:6px 0;}
.outbtns button{flex:1; padding:13px; border-radius:12px; border:1px solid var(--line); background:var(--panel);
  color:var(--ink); font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;}
.outbtns button.on{background:var(--good); color:#06231a; border-color:var(--good);}
.outbtns button.no.on{background:var(--ink-dim); color:#0a1518;}
.loglist{margin-top:14px;}
.logrow{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line);}
.logrow:first-child{border-top:none;}
.logrow .ld{flex:none; width:46px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim);}
.logrow .lm{flex:1; min-width:0;}
.logrow .lm .lsp{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.logrow .lm .lex{font-size:11px; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.logrow .lc{flex:none; font-family:'Fraunces',serif; font-weight:900; font-size:18px; color:var(--good);}
.logrow .lc.zero{color:var(--ink-dim);}
.logrow .ldel{flex:none; background:none; border:none; color:var(--ink-dim); font-size:15px; cursor:pointer; padding:6px;}
.logempty{font-size:12px; color:var(--ink-dim); text-align:center; padding:16px 8px;}
.patterns{background:rgba(63,182,196,.07); border:1px solid rgba(63,182,196,.22); border-radius:12px; padding:12px 14px; margin:12px 0; font-size:13px; line-height:1.6;}
.patterns b{color:var(--teal);}
.locked{opacity:.6; font-size:12px; text-align:center; padding:10px;}

/* ── map ── */
#map{height:54vh; min-height:340px; border-radius:18px; border:1px solid var(--line); overflow:hidden; margin-top:8px;}
.leaflet-popup-content-wrapper{background:var(--bg2); color:var(--ink); border:1px solid var(--line);}
.leaflet-popup-tip{background:var(--bg2);}
.mapinfo{font-size:12px; color:var(--ink-dim); margin:10px 4px; line-height:1.5;}
.spotpanel{margin-top:10px;}
.pill{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; padding:2px 8px;
  border-radius:999px; border:1px solid var(--line); color:var(--ink-dim); margin:0 4px 4px 0;}
.pill.risk-low{color:var(--good); border-color:rgba(84,214,160,.3);}
.pill.risk-medium{color:var(--mid); border-color:rgba(232,176,75,.3);}
.pill.risk-high{color:var(--bad); border-color:rgba(232,105,75,.3);}

footer{text-align:center; font-family:'IBM Plex Mono',monospace; font-size:10px;
  color:var(--ink-dim); opacity:.6; margin-top:14px; line-height:1.7;}
footer .credit{display:inline-block; margin-top:6px; color:var(--teal); letter-spacing:.12em; text-transform:uppercase;}

/* ── outdoor high-contrast ── */
body.hc{
  --bg:#eef2f1; --bg2:#ffffff; --panel:#ffffff; --panel2:#e6edeb;
  --ink:#07140f; --ink-dim:#36524c; --line:#9bb0aa;
  --amber:#8a5600; --good:#0a7a4d; --mid:#8a5600; --bad:#b32d14; --teal:#0a6b73;
  background:#eef2f1;}
body.hc .tabbar{background:rgba(255,255,255,.95);}