:root {
  --bg:#f4f5f7;--surface:#fff;--card:#fff;--card2:#f8f9fb;
  --border:#e4e7ec;--border2:#cfd4dc;--text:#101828;--sub:#667085;
  --muted:#98a2b3;--blue:#175cd3;--blue-dim:#eff4ff;
  --green:#067647;--green-dim:#ecfdf3;--red:#b42318;--red-dim:#fef3f2;
  --amber:#b54708;--display:'Syne','Noto Sans KR',sans-serif;
  --sans:'Noto Sans KR',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;
  --radius:12px;--radius-sm:9px;
}
*{scrollbar-color:#cfd4dc transparent}
body{background:var(--bg);color:var(--text);line-height:1.5}
.bg-noise,.bg-grid,.bg-orb1,.bg-orb2,.stat-glow{display:none}
.page{max-width:1440px;padding:0 48px 80px}
header{padding:28px 0 34px;border-bottom:1px solid var(--border);margin-bottom:32px}
.brand-icon{width:42px;height:42px;border-radius:10px;background:#101828;box-shadow:none;font-size:18px}
.brand-text{font-size:21px;letter-spacing:-.4px}.brand-text em{color:var(--blue)}
.brand-sub{color:var(--sub);letter-spacing:.8px}.header-right{gap:6px}
.live-badge{background:var(--green-dim);border-color:#abefc6;color:var(--green)}
.updated-text{color:var(--sub)}
.btn{min-height:40px;padding:9px 15px;border-radius:9px;font-size:13px}
.btn:focus-visible,.filter-tab:focus-visible,.form-input:focus-visible,.form-select:focus-visible,
.type-card:focus-visible,.teacher-chip:focus-visible,.reason-tag:focus-visible,.modal-btn:focus-visible,
.log-action-btn:focus-visible{outline:3px solid rgba(23,92,211,.22);outline-offset:2px}
.btn-primary{background:var(--blue);border-color:var(--blue);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.btn-ghost{background:#fff;color:#344054;border-color:var(--border2)}
.btn-green{background:var(--green-dim);color:var(--green);border-color:#abefc6}
.btn:disabled,.modal-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.status-bar{background:#fff;border-color:var(--border);color:var(--sub);padding:11px 14px;margin-bottom:20px}
.stat-grid{gap:12px;margin-bottom:32px}
.stat-card{border-color:var(--border);box-shadow:0 1px 2px rgba(16,24,40,.035);padding:20px;overflow:visible}
.stat-card::after{display:none}.stat-card:hover{transform:none;border-color:var(--border2);box-shadow:0 2px 8px rgba(16,24,40,.06)}
.stat-icon{font-size:17px;margin-bottom:16px}.stat-label{color:var(--sub);letter-spacing:.3px;text-transform:none;font-size:12px}
.stat-val{font-size:32px;color:var(--text)!important}.stat-unit{color:var(--sub)}
.section-hd{margin-bottom:12px}.section-title{font-family:var(--sans);font-size:16px}
.section-pill,.log-count-badge{background:#fff;color:var(--sub);border-color:var(--border)}
.rank-grid{gap:16px;margin-bottom:36px}.rank-panel,.log-panel,.add-form{border-color:var(--border);box-shadow:0 1px 2px rgba(16,24,40,.035)}
.rank-panel-header{border-color:var(--border)}.rank-item{border-color:#f0f1f3}.rank-item:hover{background:#f9fafb}.rank-item.top1{background:#fffcf5}
.rank-num{color:var(--sub)}.rank-cls,.log-reason,.log-teacher{color:var(--sub)}
.rank-bar-bg{background:#eaecf0}.badge-red{border-color:#fecdca}.badge-green{border-color:#abefc6}
.add-form{padding:24px;background:#fff}.form-title{font-family:var(--sans)}
.form-input,.form-select,.score-stepper,.type-card,.teacher-chip{background:#fff;border-color:var(--border2);color:var(--text)}
.form-label{color:#475467;text-transform:none}.type-card:hover,.teacher-chip:hover{border-color:#98a2b3;color:var(--text)}
.teacher-chip.selected{border-color:#84adff;background:var(--blue-dim);color:var(--blue)}
.preview-box{background:var(--blue-dim);border-color:#b2ccff}
.filter-tab{background:#fff;border-color:var(--border);color:var(--sub);min-height:38px}
.filter-tab.active{color:var(--blue);border-color:#84adff;background:var(--blue-dim)}
.search-input{background:#fff;border-color:var(--border2);color:var(--text);min-height:42px}
.log-item{border-color:#f0f1f3}.log-item:hover{background:#f9fafb}.chip-cls{background:#f2f4f7;color:#475467;border-color:#eaecf0}
.modal-overlay{background:rgba(16,24,40,.58)}.modal{background:#fff;border-color:var(--border);box-shadow:0 24px 48px rgba(16,24,40,.18)}
.modal-title{font-family:var(--sans)}.modal-sub{color:var(--sub)}.modal-pw{background:#fff;border-color:var(--border2);color:var(--text)}
.modal-btn.cancel{background:#fff;color:#344054;border-color:var(--border2)}
.state-text,footer{color:var(--sub)}footer{border-color:var(--border)}
.toast{position:fixed;right:24px;bottom:24px;z-index:2000;max-width:min(420px,calc(100vw - 32px));padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);box-shadow:0 12px 28px rgba(16,24,40,.16);font-size:13px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:none}.toast.error{border-color:#fda29b;color:var(--red)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only:focus{position:fixed;top:12px;left:12px;z-index:3000;width:auto;height:auto;padding:10px 14px;margin:0;overflow:visible;clip:auto;white-space:normal;border:1px solid var(--border2);border-radius:8px;background:#fff;color:var(--text)}
@media(max-width:900px){.page{padding:0 24px 64px}.stat-grid{grid-template-columns:repeat(2,1fr)}.rank-grid{grid-template-columns:1fr}}
@media(max-width:640px){.page{padding:0 16px 48px}header{align-items:flex-start;padding:20px 0 24px}.header-right{width:100%;align-items:flex-start}.header-actions{width:100%}.header-actions .btn{flex:1;justify-content:center}.stat-grid{grid-template-columns:1fr 1fr}.stat-card{padding:16px}.stat-val{font-size:27px}.log-item{display:grid;grid-template-columns:4px 1fr auto;gap:10px;padding:14px}.log-avatar{display:none}.log-type-bar{grid-row:1/3}.log-body{min-width:0}.log-right{grid-column:3}.log-actions{grid-column:2/4;flex-direction:row;margin:0}.rank-item{padding:11px 14px}.modal{padding:22px}.status-bar>span{width:100%;margin-left:0!important}}
@media(max-width:390px){.stat-grid{grid-template-columns:1fr}.brand-sub{display:none}.filter-tabs{width:100%}.filter-tab{flex:1}.rank-score{font-size:14px;min-width:38px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}