:root{--ink:#14202e;--muted:#5d6b7b;--line:#d9e1ea;--bg:#f3f6f9;--card:#fff;--blue:#1d5fb4;--green:#1d6b35;--green-bg:#e3f5e8;--amber:#934900;--amber-bg:#fff1e6;--train:#a84916;--valid:#1d6292;--w:#6b3fa0}
*{box-sizing:border-box}
html{scroll-behavior:auto}
.top{background:#10263f;color:#fff;position:sticky;top:0;z-index:30}
.top-inner{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.brand{color:#fff;text-decoration:none;font-weight:800;font-size:22px}.brand span{color:#f2b33d}
.brand-sub{font-size:13px;color:#c7d3e1}
.top nav{display:flex;flex-wrap:wrap;gap:2px 12px;width:100%}
.top nav a{color:#dfe8f2;text-decoration:none;font-size:13px;padding:2px 0}.top nav a:hover{color:#fff;text-decoration:underline}
/* The old sidebar is gone: one centred column at every width. */
main{margin:0 auto!important;max-width:1180px!important;padding:16px 16px 96px!important}
#now,#jobs,#insights,#results,#plan,#machine{margin:0 0 28px}
#now h1{font-size:24px;margin:6px 0 12px}#jobs h2,#insights h2,#results h2,#plan h2,#machine h2{font-size:20px;margin:0 0 10px}
#now h3{font-size:15px;margin:0 0 4px}#now h3 small{font-weight:400;color:var(--muted);font-size:12px}
.muted{color:var(--muted);font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 12px}
.kpis>div,.machine>div{background:var(--card);border:1px solid var(--line);padding:10px 12px;min-width:0}
.kpis span,.machine span{display:block;font-size:12px;color:var(--muted)}
.kpis strong,.machine strong{display:block;font-size:19px;line-height:1.3;margin:2px 0}
.kpis small,.machine small{display:block;font-size:12px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);padding:16px}
.now{border:2px solid var(--blue)}
.now-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
.state{display:inline-block;padding:3px 10px;font-weight:700;background:#eef2f7}
.state[data-state="running"]{background:var(--green-bg);color:var(--green)}.state[data-state="check"]{background:var(--amber-bg);color:var(--amber)}
.delivery{color:var(--muted)}.delivery[data-level="live"]{color:var(--green)}.delivery[data-level="delayed"],.delivery[data-level="stopped"],.delivery[data-level="unreachable"]{color:var(--amber)}
.now h2{font-size:21px;margin:10px 0 2px}
.now-stage{margin:0 0 6px;font-size:15px}
.now-eta{margin:6px 0;font-size:14px;font-weight:600;color:var(--blue);overflow-wrap:anywhere}
.now-eta[hidden]{display:none}
progress{width:100%;height:12px;accent-color:var(--green)}
.now-charts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.now-charts[hidden]{display:none}
.chart svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin:2px 0}
.key::before{content:"";display:inline-block;width:18px;height:3px;margin-right:5px;vertical-align:middle}
.key.train::before{background:var(--train)}.key.valid::before{background:repeating-linear-gradient(90deg,var(--valid) 0 6px,transparent 6px 9px)}
.selection{margin:10px 0 0;padding:8px 10px;background:#f2ecfa;border-left:4px solid var(--w);font-size:14px}.selection:empty{display:none}
.jobs,.insights,.ranking,.experiments,.plan{list-style:none;margin:0;padding:0}
.jobs li,.ranking li,.experiments li,.plan li,.insights li{background:var(--card);border:1px solid var(--line);padding:10px 12px;margin:0 0 8px}
.jobs li strong,.plan li strong{display:block}
.badge{display:inline-block;font-size:12px;padding:1px 8px;margin:2px 6px 2px 0;background:#eaf1fc;color:var(--blue)}
.badge.failed,.badge.stale{background:var(--amber-bg);color:var(--amber)}.badge.running{background:var(--green-bg);color:var(--green);font-weight:700}
.jobs small,.plan small,.ranking small,.experiments small{display:block;color:var(--muted);font-size:12px}
.jobs progress{height:8px;margin-top:4px}
.insights li strong{display:block;font-size:15px}.insights li p{margin:4px 0}.insights li small{color:var(--muted);font-size:12px}
.ranking li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 10px;align-items:baseline}
.ranking .rank{font-size:22px;font-weight:800;color:var(--blue)}
.ranking .w{font-size:17px;font-weight:700;text-align:right;white-space:nowrap}
.ranking .w small{font-weight:400;text-align:right}
.ranking li.best{background:#edf4ff;border-color:#9dbbe6}
.ranking li.recent .name::after{content:" 신규";font-size:11px;color:var(--green);font-weight:700}
.experiments li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
.experiments .verdict{font-size:12px;font-weight:700;white-space:nowrap}
.experiments .verdict.better{color:var(--green)}.experiments .verdict.worse{color:var(--amber)}
.machine{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
meter{width:100%;height:10px}
.foot{border-top:1px solid var(--line);padding-top:12px}
.update-banner{position:sticky;top:0;z-index:40;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:#fff6d6;border-bottom:1px solid #e3c25c;font-size:14px}
.update-banner[hidden]{display:none}.update-banner button{font:inherit;padding:4px 12px;border:1px solid #b58f1d;background:#fff;cursor:pointer}
.fab{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:50;display:flex;flex-direction:column;gap:8px}
.fab button{width:46px;height:46px;border-radius:50%;border:1px solid #9aa6b5;background:rgba(255,255,255,.96);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(15,35,60,.18)}
.fab button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.toast{position:fixed;right:70px;bottom:max(16px,env(safe-area-inset-bottom));z-index:50;margin:0;padding:8px 12px;background:#14324f;color:#fff;font-size:13px}.toast[hidden]{display:none}
@media(max-width:860px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis>div:last-child{grid-column:1/-1}.now-charts{grid-template-columns:minmax(0,1fr)}.machine{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){main{padding:12px 12px 96px}.ranking li{grid-template-columns:36px minmax(0,1fr)}.ranking .w{grid-column:2;text-align:left}.ranking .w small{text-align:left}.experiments li{grid-template-columns:minmax(0,1fr)}}
/* Phones: the header scrolls away (floating controls navigate); desktop keeps it sticky with an anchor offset. */
@media(max-width:860px){.top{position:static}}
@media(min-width:861px){main [id]{scroll-margin-top:70px}}