/* ONE FLOW 관측소 */
:root{
  --ground:#EDF1F0; --surface:#FFFFFF; --sunk:#E3E9E7; --line:#D3DCD9; --line-2:#BFCBC8;
  --ink:#10201F; --ink-2:#34484A; --muted:#56696C;
  --sea:#0E5E66; --sea-2:#157F89; --sea-soft:#DAECEC; --on-sea:#FFFFFF;
  --buoy:#D9541A; --buoy-soft:#FBE7DC; --on-buoy:#FFFFFF;
  --src-field:#0E5E66; --src-data:#3F5FB0; --src-news:#9A7420; --src-else:#8A4F9E;
  --plate:transparent;
  --shadow:0 1px 2px rgba(16,32,31,.06),0 8px 24px rgba(16,32,31,.07);
  --sheet-shadow:0 -8px 40px rgba(8,20,20,.18);
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --display:var(--sans);
  --mono:var(--sans);
  --rail:236px;
  --tabbar-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0B1414; --surface:#122020; --sunk:#0E1919; --line:#223432; --line-2:#2F4543;
    --ink:#E3ECEB; --ink-2:#B6C6C4; --muted:#98AAAB;
    --sea:#5EC0C4; --sea-2:#44A9AE; --sea-soft:#15393B; --on-sea:#06201F;
    --buoy:#FF8A4C; --buoy-soft:#3B2218; --on-buoy:#2A1106;
    --src-field:#5EC0C4; --src-data:#8EA8F2; --src-news:#DDB764; --src-else:#CC98DE;
    --plate:#F4F6F5;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
    --sheet-shadow:0 -8px 40px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;letter-spacing:-.005em;word-break:keep-all;overflow-wrap:break-word;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ico,.nav svg,.tabbar svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── 버튼 · 입력 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;padding:9px 16px;min-height:40px;border:1px solid transparent;font-weight:600;font-size:13.5px;white-space:nowrap;text-align:center}
.btn:disabled{opacity:.5;cursor:default}
.btn-sea{background:var(--sea);color:var(--on-sea)}
.btn-sea:hover:not(:disabled){background:var(--sea-2)}
.btn-buoy{background:var(--buoy);color:var(--on-buoy)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--line-2)}
.btn-danger{background:transparent;border-color:var(--line);color:var(--buoy)}
.btn-sm{padding:6px 12px;min-height:34px;font-size:12.5px}
.btn-lg{min-height:50px;font-size:15px}
.btn-block{width:100%}
.linkbtn{border:0;background:none;padding:4px 0;color:var(--sea);font-weight:600;font-size:12.5px}
.icon-btn{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label,.field .lab{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field .help{font-weight:400;color:var(--muted)}
.field input,.field textarea,.field select,.input{border:1px solid var(--line);background:var(--ground);border-radius:9px;padding:10px 12px;outline:none;width:100%;min-height:44px}
.field input:focus,.field textarea:focus,.field select:focus,.input:focus{border-color:var(--sea);background:var(--surface)}
.field textarea{min-height:92px;resize:vertical;line-height:1.6}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 13px;min-height:36px;font-size:13px;color:var(--ink-2);display:inline-flex;gap:6px;align-items:center}
.seg button.on{border-color:var(--ink);background:var(--ink);color:var(--ground)}
.nums{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;width:fit-content}
.nums button{border:0;border-right:1px solid var(--line);background:var(--surface);min-width:40px;min-height:38px;font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.nums button:last-child{border-right:0}
.nums button.on{background:var(--ink);color:var(--ground)}

/* 체크박스 (자동 로그인 등) */
.check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:6px 0;user-select:none}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check-box{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-2);background:var(--surface);display:grid;place-items:center;transition:background .15s,border-color .15s;margin-top:1px}
.check-box svg{width:16px;height:16px;fill:none;stroke:var(--on-sea);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .2s ease}
.check input:checked + .check-box{background:var(--sea);border-color:var(--sea)}
.check input:checked + .check-box svg{stroke-dashoffset:0}
.check input:focus-visible + .check-box{outline:2px solid var(--sea);outline-offset:2px}
.check-text{display:flex;flex-direction:column;font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.check-text small{font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}

/* ── 로그인 ── */
.auth-body{min-height:100vh;min-height:100dvh;display:flex}
.auth{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:calc(32px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px))}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px 28px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px}
.auth-logo{display:flex;justify-content:center}
.auth-logo img{width:158px;height:auto;background:var(--plate);border-radius:12px;padding:0}
@media (prefers-color-scheme:dark){.auth-logo img{padding:12px 16px}}
.auth-sub{text-align:center;font-family:var(--display);font-size:16px;font-weight:500;line-height:1.55;color:var(--ink-2)}
.auth-error{background:var(--buoy-soft);color:var(--buoy);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:500}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form .field input{font-size:16px;min-height:50px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:64px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-size:12.5px;font-weight:600;padding:8px 10px;border-radius:8px}
.pw-toggle:hover{color:var(--ink)}

/* ── 앱 뼈대 ── */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.rail{border-right:1px solid var(--line);background:var(--surface);padding:22px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;height:100dvh;overflow:auto}
.brand{display:block;padding:4px 8px}
.brand img{width:120px;height:auto;display:block;background:var(--plate);border-radius:10px}
@media (prefers-color-scheme:dark){.brand img{padding:8px 10px}}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ink-2);font-weight:500}
.nav a:hover{background:var(--sunk)}
.nav a.on{background:var(--sea-soft);color:var(--sea);font-weight:600}
.nav .cnt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.rail-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.rail-foot form{margin:0}
.rail-link{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--muted)}
.rail-link:hover{background:var(--sunk);color:var(--ink)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:10px;padding:14px 28px;border-bottom:1px solid var(--line);background:var(--ground);position:sticky;top:0;z-index:15}
.m-brand{display:none;align-items:center;gap:10px;font-weight:700;font-size:16px;min-width:0}
.m-brand img{border-radius:8px;flex:none}
.m-brand .m-word{border-radius:0;width:115px;height:auto}
@media (prefers-color-scheme:dark){.m-brand .m-word{filter:brightness(0) invert(1);opacity:.92}}
.search{flex:1;max-width:440px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:0 12px;min-height:40px;color:var(--muted)}
.search input{border:0;background:none;outline:none;flex:1;min-width:0;color:var(--ink);padding:8px 0}
.spacer{flex:1}
.m-only{display:none}

.screen{padding:28px;max-width:1200px;width:100%;outline:none}
.loading{padding:60px 0;text-align:center;color:var(--muted)}
.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--muted)}
.h-display{font-family:var(--display);font-weight:700;font-size:clamp(23px,3vw,32px);line-height:1.3;letter-spacing:-.02em}
.h-sec{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.h-sec .mono{font-weight:400;color:var(--muted);font-size:12px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.pad{padding:18px}
.stack{display:flex;flex-direction:column;gap:14px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 8px;border-radius:99px;background:var(--sunk);color:var(--ink-2);font-weight:500;white-space:nowrap}
.chip-buoy{background:var(--buoy-soft);color:var(--buoy)}
.chip-sea{background:var(--sea-soft);color:var(--sea)}
.muted{color:var(--muted)}
.small{font-size:12.5px}

.screen-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:10px}
.screen-head .left{display:flex;flex-direction:column;gap:6px;min-width:0}
.intent{margin-bottom:22px;font-size:13px;color:var(--ink-2);max-width:760px}
.phead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px 12px;flex-wrap:wrap}
.empty{padding:26px 18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7}
.empty .btn{margin-top:12px}
.empty-box{border:1.5px dashed var(--line-2);border-radius:12px}

/* 출처 */
.src{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;white-space:nowrap}
.src::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor}
.src-field{color:var(--src-field)} .src-data{color:var(--src-data)} .src-news{color:var(--src-news)} .src-else{color:var(--src-else)}
.legend{display:flex;gap:12px;flex-wrap:wrap}
.evbar{display:flex;height:8px;border-radius:3px;overflow:hidden;gap:2px;background:var(--sunk)}
.evbar i{display:block;height:100%}
.evbar .f{background:var(--src-field)} .evbar .d{background:var(--src-data)} .evbar .n{background:var(--src-news)} .evbar .e{background:var(--src-else)}
.evbar .x{background:repeating-linear-gradient(135deg,var(--buoy) 0 3px,transparent 3px 6px)}
.strength{display:inline-flex;gap:2px;vertical-align:middle}
.strength i{width:10px;height:10px;border-radius:2px;background:var(--line)}
.strength i.on{background:var(--ink-2)}
.counter{font-size:12px;font-family:var(--mono);color:var(--buoy);border:1px solid var(--buoy);border-radius:4px;padding:0 5px;white-space:nowrap}

/* ── 오늘 ── */
.home-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:start}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
.pt-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 76px auto;gap:6px 14px;align-items:center;padding:12px 18px;border-top:1px solid var(--line)}
.pt-row .w{min-width:0}
.pt-row .w b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-row .w > span{display:block;font-size:12px;color:var(--muted)}
.pt-row .wk{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right}
.spark{display:block;width:120px;max-width:100%;height:26px}
.spark .sl{fill:none;stroke:var(--sea);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.spark .sd{fill:var(--sea)}
.lens-card{padding:20px;background:var(--ink);color:var(--ground);border-radius:12px;display:flex;flex-direction:column;gap:12px}
.lens-card .eyebrow{color:var(--ground);opacity:.7}
.lens-card .lname{font-family:var(--display);font-size:30px;font-weight:700;line-height:1}
.lens-card .lq{font-family:var(--display);font-size:17px;font-weight:500;line-height:1.5}
.lens-card .dots{display:flex;gap:5px}
.lens-card .dots i{width:22px;height:4px;border-radius:2px;background:var(--ground);opacity:.25}
.lens-card .dots i.on{opacity:1}
.lens-card .btn{background:var(--ground);color:var(--ink);width:fit-content}
.shift-row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:6px 16px;padding:14px 18px;border-top:1px solid var(--line);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0}
.shift-row:hover{background:var(--sunk)}
.shift-row .t{font-weight:600;font-size:14px;line-height:1.45}
.shift-row .m{font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.shift-row .evwrap{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:6px;justify-content:center}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.stat-row a{padding:14px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.stat-row a:last-child{border-right:0}
.stat-row .n{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.1}
.stat-row .l{font-size:12px;color:var(--muted)}
.review{padding:16px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.review .dd{font-family:var(--mono);color:var(--buoy);font-weight:500}
.signals{list-style:none;margin:0;padding:0}
.signals li{border-top:1px solid var(--line)}
.sig{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:4px 14px;padding:12px 18px;align-items:start;width:100%;text-align:left;background:none;border:0}
.sig:hover{background:var(--sunk)}
.sig .when{font-family:var(--mono);font-size:12px;color:var(--muted);padding-top:2px}
.sig .txt{font-size:13.5px;min-width:0;overflow-wrap:anywhere}
.sig .txt small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.sig .right{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--sunk);flex:none}

/* ── 관측 지점 ── */
.st-grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px;align-items:start}
.st-list{display:flex;flex-direction:column;gap:8px}
.st-item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 12px;padding:14px;border-radius:11px;border:1px solid var(--line);background:var(--surface);text-align:left;width:100%}
.st-item:hover{border-color:var(--line-2)}
.st-item.on{border-color:var(--sea);box-shadow:inset 0 0 0 1px var(--sea)}
.st-item .no{grid-row:span 3;width:30px;height:30px;border-radius:8px;background:var(--sea-soft);color:var(--sea);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:500}
.st-item.on .no{background:var(--sea);color:var(--on-sea)}
.st-item .nm{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-item .mt{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-item .sc{font-size:12px;color:var(--muted);font-family:var(--mono)}
.st-add{border:1.5px dashed var(--line-2);background:none;border-radius:11px;padding:14px;color:var(--sea);font-weight:600;font-size:13.5px;text-align:center;width:100%;min-height:48px}
.st-add:hover{border-color:var(--sea);background:var(--sea-soft)}
.st-detail{display:flex;flex-direction:column;gap:20px;min-width:0}
.measure{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.mfield{display:flex;flex-direction:column;gap:6px;min-width:0}
.mfield label{font-size:12px;font-weight:600;color:var(--ink-2)}
.mfield input{border:1px solid var(--line);background:var(--ground);border-radius:9px;padding:10px 12px;font-family:var(--mono);font-size:18px;outline:none;width:100%;min-height:50px}
.mfield input:focus{border-color:var(--sea);background:var(--surface)}
.measure-meta{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px}
.slotpick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.slotpick button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 4px;min-height:56px;color:var(--ink-2)}
.slotpick b{font-size:14px;font-weight:600}
.slotpick span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.slotpick button.on{border-color:var(--sea);background:var(--sea);color:var(--on-sea)}
.slotpick button.on span{color:var(--on-sea);opacity:.85}
.slot-filter{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.slot-filter::-webkit-scrollbar{display:none}
.slot-filter button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px;min-height:34px;font-size:12.5px;color:var(--ink-2)}
.slot-filter button span{color:var(--muted);margin-left:2px;font-variant-numeric:tabular-nums}
.slot-filter button.on{border-color:var(--ink);background:var(--ink);color:var(--ground)}
.slot-filter button.on span{color:var(--ground);opacity:.75}
.slot-filter button.none{opacity:.55}
.slotbars{display:flex;flex-direction:column;gap:2px}
.sb{display:grid;grid-template-columns:100px minmax(0,1fr) 96px;gap:12px;align-items:center;border:0;background:none;padding:8px;border-radius:9px;text-align:left;width:100%;color:var(--ink)}
.sb:hover{background:var(--sunk)}
.sb.on{background:var(--sea-soft)}
.sb-name{display:flex;flex-direction:column;line-height:1.3}
.sb-name b{font-size:14px;font-weight:600}
.sb-name small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.sb-bar{height:12px;border-radius:4px;background:var(--sunk);overflow:hidden}
.sb-bar i{display:block;height:100%;background:var(--sea);border-radius:4px}
.sb.best .sb-bar i{background:var(--buoy)}
.sb.none .sb-name b{color:var(--muted)}
.sb-val{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;line-height:1.3}
.sb-val small{font-size:12px;font-weight:400;color:var(--muted)}
.slot-filter button.we{color:var(--buoy)}
.slot-filter button.we.on{color:var(--ground)}
.sb.we .sb-name small{color:var(--buoy)}
.day-tag{display:inline-block;margin-left:6px;padding:0 7px;border-radius:99px;background:var(--sea-soft);color:var(--sea);font-size:12px;font-weight:600}
.wkcmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden}
.wkcmp div{padding:10px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.wkcmp div:last-child{border-right:0}
.wkcmp .l{font-size:12px;color:var(--muted)}
.wkcmp .v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.wkcmp .v.we{color:var(--buoy)}
.chart .pt.we{stroke:var(--buoy)}
.chart .end.we{fill:var(--buoy)}
.chart-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--sea);margin-left:6px}
.chart-legend i:first-child{margin-left:0}
.chart-legend .lg-we{border-color:var(--buoy)}
.trend-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.period{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.period button{border:0;background:none;padding:7px 16px;min-height:36px;font-size:13px;font-weight:600;color:var(--muted);border-right:1px solid var(--line)}
.period button:last-child{border-right:0}
.period button.on{background:var(--ink);color:var(--ground)}
.metric-tabs{display:flex;gap:6px;flex-wrap:wrap}
.metric-tabs button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px;min-height:34px;font-size:12.5px;color:var(--ink-2)}
.metric-tabs button.on{border-color:var(--sea);background:var(--sea-soft);color:var(--sea);font-weight:600}
.chart-box{width:100%;min-width:0}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .band{fill:var(--sunk)}
.chart text,.scatter text{font-variant-numeric:tabular-nums}
.chart .axis-t{fill:var(--muted);font-family:var(--mono);font-size:12px}
.chart .area{fill:var(--sea);opacity:.12}
.chart .ln{fill:none;stroke:var(--sea);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--surface);stroke:var(--sea);stroke-width:1.6}
.chart .end{fill:var(--sea)}
.chart .end-t{fill:var(--ink);font-family:var(--mono);font-size:12px;font-weight:500}
.chart .avg{stroke:var(--buoy);stroke-width:1.2;stroke-dasharray:4 4}
.chart .avg-t{fill:var(--buoy);font-family:var(--mono);font-size:12px}
.chart-empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px;border:1.5px dashed var(--line-2);border-radius:10px}
.sum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sum div{padding:12px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.sum div:last-child{border-right:0}
.sum .l{font-size:12px;color:var(--muted)}
.sum .v{font-family:var(--mono);font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum .v.up{color:var(--buoy)} .sum .v.down{color:var(--src-data)}
.mlist{list-style:none;margin:0;padding:0}
.mlist li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.mlist li:first-child{border-top:0}
.mlist .t{font-family:var(--mono);font-size:12px;color:var(--muted)}
.mlist .vals{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono)}
.mlist .memo{display:block;font-family:var(--sans);font-size:12px;color:var(--muted)}
.x-btn{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;width:34px;height:34px;display:grid;place-items:center}
.x-btn:hover{color:var(--buoy);border-color:var(--buoy)}

/* ── 변화와 렌즈 ── */
.sh-grid{display:grid;grid-template-columns:310px minmax(0,1fr);gap:20px;align-items:start}
.sh-list{display:flex;flex-direction:column;gap:8px}
.sh-item{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:11px;border:1px solid var(--line);background:var(--surface);text-align:left;width:100%}
.sh-item.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sh-item .t{font-weight:600;font-size:13.5px;line-height:1.45}
.sh-item .m{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.thesis{padding:22px;display:flex;flex-direction:column;gap:14px}
.thesis .big{font-family:var(--display);font-size:clamp(19px,2.4vw,25px);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.ev-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ev-list li{padding:10px 12px;border-radius:8px;background:var(--ground);font-size:13px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.lens-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lens{padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.lens.promoted{border-color:var(--sea);background:var(--sea-soft)}
.lens-top b{font-family:var(--display);font-size:20px;font-weight:700}
.lens .q{font-size:12.5px;color:var(--muted);line-height:1.5}
.lens .idea{font-size:14px;font-weight:600;line-height:1.5;padding-top:10px;border-top:1px dashed var(--line-2);overflow-wrap:anywhere}
.lens .idea.none{font-weight:400;color:var(--muted)}
.lens .foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;flex-wrap:wrap}

/* ── 아이템 ── */
.it-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.scatter{width:100%;height:auto;display:block}
.scatter .grid{stroke:var(--line);stroke-width:1}
.scatter .axis-t{fill:var(--muted);font-family:var(--mono);font-size:12px}
.scatter .axis-l{fill:var(--ink-2);font-family:var(--sans);font-size:12px;font-weight:600}
.scatter .zone{fill:var(--sea);opacity:.08}
.scatter .zone-t{fill:var(--sea);font-family:var(--sans);font-size:12px;font-weight:700}
.scatter .b{fill:var(--sea);opacity:.92;cursor:pointer}
.scatter .b.hold,.scatter .b.drop{fill:var(--line-2);opacity:1}
.scatter .b.test{fill:var(--buoy);opacity:1}
.scatter .bt{fill:var(--on-sea);font-family:var(--mono);font-size:12px;font-weight:500;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.scatter .bt.hold,.scatter .bt.drop{fill:var(--ink)}
.scatter .bt.test{fill:var(--on-buoy)}
.tbl-wrap{overflow-x:auto}
.tbl{border-collapse:collapse;width:100%;font-size:13px}
.tbl th{font-size:12px;font-weight:600;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--sunk)}
.st-pill{font-size:12px;font-weight:600;border-radius:99px;padding:2px 8px;white-space:nowrap}
.st-cand{background:var(--sea-soft);color:var(--sea)}
.st-test{background:var(--buoy-soft);color:var(--buoy)}
.st-hold,.st-drop{background:var(--sunk);color:var(--muted)}
.dots5{display:inline-flex;gap:2px}
.dots5 i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dots5 i.on{background:var(--ink-2)}

/* ── 월간 노트 ── */
.nt-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.month-nav{display:flex;align-items:center;gap:8px}
.month-nav b{font-family:var(--mono);font-size:14px;min-width:84px;text-align:center}
.paper{padding:28px 30px;display:flex;flex-direction:column;gap:14px}
.paper .title-in{border:0;border-bottom:1px solid var(--line);background:none;font-family:var(--display);font-size:clamp(20px,2.4vw,26px);font-weight:700;padding:6px 0 10px;outline:none;width:100%}
.paper .title-in:focus{border-color:var(--sea)}
.paper textarea{border:1px solid var(--line);background:var(--ground);border-radius:10px;padding:14px;min-height:420px;font-size:15px;line-height:1.85;resize:vertical;outline:none;width:100%}
.paper textarea:focus{border-color:var(--sea);background:var(--surface)}
.months{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.months button{aspect-ratio:1;max-width:100%;border-radius:8px;border:1.5px dashed var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;line-height:1.25;background:none;padding:2px}
.months button.draft{border-style:solid;border-color:var(--line-2);color:var(--ink-2);background:var(--sunk)}
.months button.pub{border-style:solid;border-color:var(--sea);background:var(--sea-soft);color:var(--sea)}
.months button.cur{box-shadow:0 0 0 2px var(--buoy)}

/* ── 시트 (다이얼로그) ── */
.sheet{border:0;padding:0;background:var(--surface);color:var(--ink);width:min(560px,calc(100% - 32px));max-height:min(88vh,860px);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:auto;overscroll-behavior:contain}
.sheet::backdrop{background:rgba(8,20,20,.45)}
.sheet-grab{display:none}
.dlg{padding:22px;display:flex;flex-direction:column;gap:16px}
.dlg h2{font-family:var(--display);font-size:21px;font-weight:600}
.dlg-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dlg-foot .grow{flex:1}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) 96px 44px;gap:8px}
.photo-pick{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.photo-pick img{width:72px;height:72px;border-radius:10px;object-fit:cover}
.photo-full{width:100%;border-radius:12px;max-height:60vh;object-fit:contain;background:var(--sunk)}
.menu-list{display:flex;flex-direction:column}
.menu-list a,.menu-list button{display:flex;align-items:center;gap:12px;padding:14px 4px;border:0;border-top:1px solid var(--line);background:none;font-size:15px;text-align:left;width:100%;min-height:52px}
.menu-list > :first-child{border-top:0}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--ground);padding:11px 18px;border-radius:10px;font-size:13.5px;opacity:0;pointer-events:none;transition:.25s;z-index:80;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.tabbar{display:none}

/* ── 반응형 ── */
@media (max-width:1080px){
  .home-grid,.it-grid,.nt-grid{grid-template-columns:minmax(0,1fr)}
  .st-grid,.sh-grid{grid-template-columns:minmax(0,1fr)}
  .st-list,.sh-list{flex-direction:row;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .st-item{min-width:230px;max-width:260px;scroll-snap-align:start}
  .st-add{min-width:150px;width:auto}
  .sh-item{min-width:250px;max-width:280px;scroll-snap-align:start}
  .lens-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:15px}
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .topbar{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px}
  .m-brand{display:flex;flex:1}
  .search{display:none}
  .search.open{display:flex;position:absolute;left:12px;right:12px;top:calc(8px + env(safe-area-inset-top,0px));max-width:none;min-height:46px;z-index:2;box-shadow:var(--shadow)}
  .search input{font-size:16px}
  .spacer,.d-only{display:none}
  .m-only{display:grid}
  .screen{padding:18px 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom,0px))}
  .screen-head .left .eyebrow{display:none}
  .intent{font-size:12.5px;margin-bottom:16px}
  .panel,.lens,.lens-card{border-radius:14px}
  .pt-row{grid-template-columns:minmax(0,1fr) auto;padding:14px 16px}
  .pt-row .spark{grid-column:1}
  .pt-row .wk{text-align:right;grid-column:2;grid-row:2}
  .pt-row .btn{grid-column:2;grid-row:1}
  .shift-row{grid-template-columns:minmax(0,1fr);padding:14px 16px}
  .shift-row .evwrap{grid-column:1;grid-row:auto}
  .sig{grid-template-columns:minmax(0,1fr) auto;padding:13px 16px}
  .sig .when{grid-column:1 / -1;padding:0}
  .phead{padding:14px 16px 10px}
  .lens-grid{grid-template-columns:minmax(0,1fr)}
  .measure-meta{grid-template-columns:minmax(0,1fr)}
  .slotpick{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sb{grid-template-columns:78px minmax(0,1fr) 76px;gap:10px;padding:8px 6px}
  .sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sum div{border-bottom:1px solid var(--line)}
  .sum div:nth-child(2n){border-right:0}
  .sum div:last-child{grid-column:1 / -1;border-bottom:0}
  .mlist li{grid-template-columns:minmax(0,1fr) auto}
  .mlist .t{grid-column:1 / -1}
  .row2{grid-template-columns:minmax(0,1fr)}
  .paper{padding:20px 16px}
  .paper textarea{min-height:360px;font-size:16px}
  .field input,.field textarea,.field select,.input{font-size:16px}
  .btn{min-height:44px}
  .btn-sm{min-height:38px}
  .tbl .hide-m{display:none}

  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));z-index:20}
  .tabbar a,.tabbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;color:var(--muted);padding:4px 0;min-height:50px}
  .tabbar a.on{color:var(--sea);font-weight:600}
  .tabbar svg{width:22px;height:22px}
  .tabbar .plus span{width:44px;height:36px;border-radius:12px;background:var(--sea);display:grid;place-items:center}
  .tabbar .plus svg{stroke:var(--on-sea)}
  .tabbar .plus{color:var(--sea);font-weight:600}

  .sheet{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0;max-height:92vh;max-height:92dvh;box-shadow:var(--sheet-shadow)}
  .sheet[open]{animation:sheet-up .22s ease-out}
  .sheet-grab{display:block;width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:10px auto 0}
  .dlg{padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .dlg-foot{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom,0px));background:var(--surface);padding:12px 0 calc(4px + env(safe-area-inset-bottom,0px));margin-bottom:calc(-4px - env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
  .dlg-foot .btn{flex:1}
  .dlg-foot .grow{display:none}
  .toast{bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom,0px))}
}
@keyframes sheet-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
[tabindex="-1"]:focus{outline:none}
