:root{--navy:#071426;--navy2:#0a1b30;--panel:#0f243d;--panel2:#122b47;--line:#263e59;--text:#eff6ff;--muted:#8fa5bf;--cyan:#35d4e4;--blue:#4f83ff;--green:#32ce89;--yellow:#f3bc4f;--red:#ff6d78;--white:#fff;--ink:#132438;--soft:#edf3f8;--shadow:0 14px 34px rgba(1,8,20,.25)}
*{box-sizing:border-box}html{background:var(--navy)}body{margin:0;background:linear-gradient(135deg,#071426 0%,#0a1830 55%,#071426 100%);color:var(--text);font-family:Pretendard,"Noto Sans KR",Inter,system-ui,sans-serif;font-size:14px;min-height:100vh}button,select,input{font:inherit}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;padding:25px 18px;background:#07182b;border-right:1px solid #203750;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:0 7px 27px}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,var(--cyan),var(--blue));font-size:22px;font-weight:900;color:white}.brand strong{display:block;font-size:13px;letter-spacing:1px}.brand small{display:block;color:#7890ac;font-size:9px;letter-spacing:.6px;margin-top:4px}.sidebar nav{display:grid;gap:6px}.nav-btn{border:0;background:transparent;color:#9db0c7;border-radius:9px;padding:12px 13px;text-align:left;font-weight:680;cursor:pointer;display:flex;gap:11px;align-items:center}.nav-btn .num{font-size:10px;color:#607a98;width:18px}.nav-btn:hover,.nav-btn.active{background:#16314f;color:#fff}.nav-btn.active{box-shadow:inset 3px 0 var(--cyan)}.nav-btn.active .num{color:var(--cyan)}.storage-state{margin-top:auto;border:1px solid var(--line);background:#0d2238;padding:12px;border-radius:10px;display:flex;align-items:center;gap:10px}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(50,206,137,.12)}.storage-state b{display:block;font-size:10px}.storage-state small{display:block;color:var(--muted);font-size:9px;margin-top:3px}main{margin-left:250px;padding:25px 30px 48px;max-width:1920px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.eyebrow,.section-label{margin:0;color:var(--cyan);font-size:10px;font-weight:850;letter-spacing:1.5px}.topbar h1{font-size:26px;margin:4px 0 3px;letter-spacing:-.7px}.subtitle{margin:0;color:var(--muted);font-size:12px}.top-actions{display:flex;align-items:center;gap:12px}.updated{font-size:11px;color:var(--muted)}button{cursor:pointer}.secondary,.primary,.reset,.tab-btn,.quick-btn,.period-btn{border-radius:8px;border:1px solid var(--line);padding:9px 13px;font-weight:750}.secondary,.reset,.tab-btn,.quick-btn,.period-btn{background:#122941;color:#dbe8f7}.primary{border:0;background:linear-gradient(135deg,#2f75ee,#34cedd);color:white}.filterbar{display:grid;grid-template-columns:minmax(120px,1fr) 18px minmax(110px,1fr) 18px minmax(110px,1fr) 18px minmax(110px,1fr) 18px minmax(120px,1fr) auto;gap:7px;align-items:center;padding:12px 14px;background:#0b1f35;border:1px solid var(--line);border-radius:11px;margin-bottom:14px}.filterbar label{font-size:10px;color:var(--muted)}.filterbar select{display:block;width:100%;color:white;background:transparent;border:0;outline:0;font-weight:700;padding:4px 0 0}.filterbar option{background:#10253d}.filter-arrow{color:#48627f;text-align:center}.reset{align-self:stretch}.page{display:grid;gap:12px}.notice{display:flex;align-items:center;gap:12px;border:1px solid #1d5962;background:#0d2c36;border-radius:9px;padding:11px 14px}.notice strong{display:block}.notice small{color:#86aeb7}.notice-icon{color:var(--green);font-size:18px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.kpi{position:relative;overflow:hidden;min-height:116px;padding:15px 16px;background:linear-gradient(145deg,#102740,#0c1d32);border:1px solid var(--line);border-radius:10px}.kpi:after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;right:-18px;top:-28px;background:var(--accent,var(--blue));opacity:.1}.kpi .kpi-title{display:flex;justify-content:space-between;color:#a5b6ca;font-size:11px}.kpi .kpi-icon{color:var(--accent,var(--blue));font-size:17px}.kpi strong{display:block;font-size:23px;margin:10px 0 6px;letter-spacing:-.5px}.kpi small{color:var(--muted)}.delta.up,.text-red{color:var(--red)}.delta.down,.text-green{color:var(--green)}.delta.flat{color:var(--yellow)}.grid{display:grid;gap:10px}.grid.two{grid-template-columns:2fr 1fr}.grid.three{grid-template-columns:1.25fr 1fr 1fr}.grid.equal{grid-template-columns:repeat(2,1fr)}.card{background:linear-gradient(150deg,#0f243c,#0b1c30);border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:var(--shadow);min-width:0}.card.white{background:#f9fbfd;border-color:#d5e1ea;color:var(--ink);box-shadow:none}.card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.card-head h2{font-size:16px;margin:3px 0}.card-head small{color:var(--muted)}.card.white .section-label{color:#1674b4}.legend{display:flex;gap:12px;color:var(--muted);font-size:10px}.legend span:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:5px}.legend .l-blue{color:var(--blue)}.legend .l-cyan{color:var(--cyan)}.chart{height:205px;display:flex;align-items:flex-end;gap:8px;padding-top:12px}.bar-group{height:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;position:relative;padding-bottom:25px}.bar{width:min(18px,28%);min-height:2px;border-radius:4px 4px 0 0;background:linear-gradient(#78a2ff,#4775e9)}.bar.cyan{background:linear-gradient(#54e2e9,#18a8b5)}.bar.red{background:linear-gradient(#ff8790,#dd5261)}.bar-group label{position:absolute;bottom:0;color:var(--muted);font-size:9px}.hbars{display:grid;gap:11px}.hrow{display:grid;grid-template-columns:72px 1fr 82px;align-items:center;gap:9px;font-size:11px}.track{height:8px;background:#1b344d;border-radius:10px;overflow:hidden}.white .track{background:#dfe8ef}.fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--blue),var(--cyan))}.hrow b{text-align:right}.key-list,.focus-list{display:grid;gap:9px}.key-item{display:grid;grid-template-columns:28px 1fr;gap:9px;padding:9px;border:1px solid #25415b;background:#102842;border-radius:8px}.key-item i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#263b51;color:var(--yellow);font-style:normal}.key-item b,.key-item small{display:block}.key-item small{color:var(--muted);margin-top:3px}.donut-wrap{display:flex;align-items:center;justify-content:center;gap:25px;min-height:205px}.donut{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;position:relative}.donut:after{content:"";position:absolute;width:87px;height:87px;border-radius:50%;background:#0c1f34}.donut-center{z-index:1;text-align:center}.donut-center b,.donut-center small{display:block}.donut-center small{color:var(--muted)}.donut-legend{display:grid;gap:9px}.donut-legend div{display:grid;grid-template-columns:10px 1fr;gap:5px 9px}.donut-legend i{width:8px;height:8px;border-radius:50%;margin-top:4px}.donut-legend small{grid-column:2;color:var(--muted)}.waterfall{height:210px;display:flex;align-items:flex-end;gap:8px;padding:15px 0 25px}.wf-col{flex:1;height:100%;position:relative;display:flex;justify-content:center;align-items:flex-end}.wf-col span{position:absolute;bottom:-22px;color:var(--muted);font-size:9px}.wf-col b{position:absolute;font-size:9px;white-space:nowrap}.wf-bar{width:60%;border-radius:4px 4px 0 0;background:var(--blue)}.wf-bar.positive{background:var(--red)}.wf-bar.negative{background:var(--green)}.score-table,.data-table{width:100%;border-collapse:collapse;font-size:11px}.score-table th,.data-table th{text-align:left;color:#8fa5bc;background:#091a2d;padding:10px;position:sticky;top:0}.score-table td,.data-table td{padding:10px;border-top:1px solid #213950;color:#cedae7;white-space:nowrap}.score-table tr:hover td,.data-table tr:hover td{background:#102a44}.table-scroll{overflow:auto;max-height:460px}.status{display:inline-flex;padding:3px 7px;border-radius:6px;font-size:10px;font-weight:800}.status.good,.severity.low{color:#60e2a8;background:#123d32}.status.warn,.severity.medium{color:#ffd67e;background:#44371e}.status.bad,.severity.high{color:#ff9ba3;background:#49232d}.tabs,.quick-filters,.periods{display:flex;gap:7px;flex-wrap:wrap}.tab-btn.active,.quick-btn.active,.period-btn.active{background:#20466d;color:white;border-color:#37658e}.metric-list{display:grid;gap:10px}.metric-row{display:grid;grid-template-columns:100px 1fr 90px;gap:9px;align-items:center;font-size:11px}.metric-row b{text-align:right}.insight{border-left:3px solid var(--cyan);padding:9px 11px;background:#102842;margin-bottom:8px}.insight b,.insight small{display:block}.insight small{margin-top:4px;color:var(--muted)}.search-row{display:flex;gap:8px}.search-row input{min-width:240px;background:#0b1e33;border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:white}.matrix{position:relative;height:390px;background:linear-gradient(90deg,rgba(50,206,137,.08) 0 50%,rgba(243,188,79,.08) 50%),linear-gradient(0deg,rgba(50,206,137,.06) 0 50%,rgba(255,109,120,.08) 50%);border:1px solid var(--line);overflow:hidden}.matrix:before,.matrix:after{content:"";position:absolute;background:#49637e}.matrix:before{left:50%;top:0;bottom:0;width:1px}.matrix:after{top:50%;left:0;right:0;height:1px}.quadrant{position:absolute;color:#8fa5bf;font-size:10px;font-weight:800}.q1{right:10px;bottom:8px}.q2{right:10px;top:8px}.q3{left:10px;bottom:8px}.q4{left:10px;top:8px}.bubble{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--cyan);border:2px solid white;transform:translate(-50%,50%);box-shadow:0 2px 8px #0008}.bubble.focus{background:var(--red);width:16px;height:16px}.axis-x,.axis-y{position:absolute;color:var(--muted);font-size:9px}.axis-x{bottom:5px;left:50%;transform:translateX(-50%)}.axis-y{left:4px;top:50%;transform:rotate(-90deg) translateY(-50%);transform-origin:left top}.anomaly-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.anomaly-card{border:1px solid var(--line);background:#0e2238;border-radius:9px;padding:13px}.anomaly-card .row{display:flex;justify-content:space-between}.anomaly-card p{color:var(--muted);font-size:11px;margin:9px 0 0}.dropzone{border:1px dashed #476681;background:#0d2137;border-radius:12px;padding:34px;text-align:center;transition:.2s}.dropzone.drag{border-color:var(--cyan);background:#103441}.dropzone strong{display:block;font-size:17px;margin:9px}.dropzone p{color:var(--muted)}.upload-flow{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:12px}.flow-step{font-size:10px;text-align:center;background:#102842;border:1px solid var(--line);border-radius:8px;padding:10px 5px;position:relative}.flow-step:not(:last-child):after{content:"›";position:absolute;right:-7px;color:var(--cyan)}.upload-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.upload-summary .kpi{min-height:88px}.upload-summary .kpi strong{font-size:21px}.file-actions{display:flex;gap:7px}.report-sheet{background:white;color:#142335;max-width:1160px;margin:auto;padding:25px;border-radius:4px}.report-head{display:flex;justify-content:space-between;border-bottom:3px solid #0f6fa8;padding-bottom:12px;margin-bottom:15px}.report-head h2{margin:0}.report-head span{color:#5b6f82}.report-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.report-kpi{border:1px solid #cfdbe5;padding:11px}.report-kpi small,.report-kpi b{display:block}.report-kpi small{color:#64798d}.report-kpi b{font-size:19px;margin-top:5px}.report-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:12px}.report-box{border:1px solid #d5e0e8;padding:12px}.report-box h3{margin:0 0 8px;font-size:13px;color:#0d659c}.report-list{padding-left:18px;margin:0}.report-list li{margin:6px 0}.empty{padding:28px;text-align:center;color:var(--muted)}
@media(max-width:1200px){.sidebar{width:78px}.brand div,.nav-btn span:not(.num),.storage-state div{display:none}.brand{padding-left:0}.nav-btn{justify-content:center}.nav-btn .num{width:auto}.storage-state{justify-content:center}main{margin-left:78px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:1fr 1fr}.anomaly-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.sidebar{position:static;width:100%;height:auto;padding:10px;display:block}.brand{display:none}.sidebar nav{display:flex;overflow:auto}.nav-btn{min-width:max-content}.storage-state{display:none}main{margin:0;padding:16px}.topbar{align-items:flex-start}.top-actions .updated{display:none}.filterbar{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-arrow{display:none}.grid.two,.grid.three,.grid.equal,.anomaly-grid,.report-grid{grid-template-columns:1fr}.kpi-grid,.report-kpis,.upload-summary{grid-template-columns:repeat(2,1fr)}.upload-flow{grid-template-columns:1fr}.donut-wrap{justify-content:flex-start}.search-row{display:grid}.search-row input{min-width:0}.topbar h1{font-size:21px}}
@media print{.sidebar,.topbar,.filterbar,.top-actions,.report-actions{display:none!important}main{margin:0;padding:0;background:white}.page>*:not(.report-sheet){display:none}.report-sheet{max-width:none}.report-sheet *{color:#111!important}.report-sheet{box-shadow:none}}
.clickable{cursor:pointer}.clickable:hover{border-color:#3b6a91;transform:translateY(-1px)}.clickable:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.section-tools{display:flex;align-items:center;gap:7px}.compare-select{background:#0b1e33;color:#e7f2ff;border:1px solid var(--line);border-radius:7px;padding:7px}.drawer-backdrop{position:fixed;inset:0;background:#02091388;z-index:40}.drawer{position:fixed;z-index:41;top:0;right:0;width:min(520px,94vw);height:100vh;background:#0b1d32;border-left:1px solid #34516e;box-shadow:-20px 0 55px #0009;transform:translateX(105%);transition:transform .22s ease;display:flex;flex-direction:column}.drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--line)}.drawer-head h2{margin:4px 0 0}.drawer-head button{border:0;background:transparent;color:#b7c8d9;font-size:26px}.breadcrumb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:11px 20px;border-bottom:1px solid var(--line);font-size:11px}.breadcrumb button{border:0;background:transparent;color:#91b6d7;padding:0}.breadcrumb button:hover{color:var(--cyan)}.breadcrumb span{color:#56718d}.drawer-tabs{display:flex;padding:10px 14px 0;gap:4px;overflow:auto}.drawer-tabs button{border:0;background:transparent;color:var(--muted);padding:9px;border-bottom:2px solid transparent;white-space:nowrap}.drawer-tabs button.active{color:white;border-color:var(--cyan)}.drawer-body{padding:17px 20px 30px;overflow:auto}.drawer-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}.drawer-kpi{background:#102842;border:1px solid var(--line);padding:11px;border-radius:8px}.drawer-kpi small,.drawer-kpi b{display:block}.drawer-kpi small{color:var(--muted)}.drawer-kpi b{font-size:17px;margin-top:5px}.detail-list{display:grid;gap:7px}.detail-row{display:flex;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px solid #203950}.detail-row small{color:var(--muted)}.raw-card{border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:8px;background:#10243c}.raw-card b,.raw-card small{display:block}.raw-card small{color:var(--muted);margin-top:4px}.loading{position:fixed;inset:0;z-index:60;background:#061220d9;display:grid;place-content:center;justify-items:center;gap:12px}.loading[hidden]{display:none}.loading span{width:34px;height:34px;border:3px solid #31506c;border-top-color:var(--cyan);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}