/* Layout: dark side menu + working pane for staff; full-bleed focus screen for students taking a test. */
:root{
  --bg:#F7F8FA; --surface:#FFFFFF; --line:#E9EAEF; --line2:#C7CAD5;
  --fg:#1C1C1E; --muted:#555A6A; --soft:#F2F3F6;
  --nav:#FFFFFF; --nav2:#F2F3F6; --navfg:#1C1C1E;
  --accent:#5B76FE; --accent-ink:#FFFFFF; --accent-soft:#E7EBFF; --accent-fg:#2A41B6;
  --warm:#00B473; --warm-soft:#DFF6EC; --warm-fg:#187D56;
  --ok-soft:#DFF6EC; --ok-fg:#187D56;
  --font:'IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --ec0:#FFC6C6; --ec1:#C3FAF5; --ec2:#FFE6CD; --ec3:#FDE0F0; --ec4:#E7EBFF; --ec5:#D6F5E3; --ecfg:#1C1C1E;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --shadow-sm:0 0 0 1px rgba(224,226,232,1); --shadow-md:0 0 0 1px rgba(224,226,232,1),0 8px 24px rgba(28,28,30,.06);
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-inout:cubic-bezier(0.77,0,0.175,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#17181C; --surface:#1F2127; --line:#2C2F38; --line2:#3B3F4B;
  --fg:#EDEEF2; --muted:#9AA0B0; --soft:#252832;
  --nav:#1F2127; --nav2:#252832; --navfg:#EDEEF2;
  --accent:#7C92FF; --accent-ink:#13131A; --accent-soft:#2A3050; --accent-fg:#B9C4FF;
  --warm:#2FD693; --warm-soft:#163A2C; --warm-fg:#8FE8C3;
  --ec0:#4A2C2C; --ec1:#1F3F3B; --ec2:#4A3722; --ec3:#3F2A3A; --ec4:#2A3050; --ec5:#1D3A2B; --ecfg:#EDEEF2;
  --ok-soft:#163A2C; --ok-fg:#8FE8C3;
  --shadow-sm:0 0 0 1px rgba(60,64,78,1); --shadow-md:0 0 0 1px rgba(60,64,78,1),0 16px 40px rgba(0,0,0,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#17181C; --surface:#1F2127; --line:#2C2F38; --line2:#3B3F4B;
  --fg:#EDEEF2; --muted:#9AA0B0; --soft:#252832;
  --nav:#1F2127; --nav2:#252832; --navfg:#EDEEF2;
  --accent:#7C92FF; --accent-ink:#13131A; --accent-soft:#2A3050; --accent-fg:#B9C4FF;
  --warm:#2FD693; --warm-soft:#163A2C; --warm-fg:#8FE8C3;
  --ec0:#4A2C2C; --ec1:#1F3F3B; --ec2:#4A3722; --ec3:#3F2A3A; --ec4:#2A3050; --ec5:#1D3A2B; --ecfg:#EDEEF2;
  --ok-soft:#163A2C; --ok-fg:#8FE8C3;
  --shadow-sm:0 0 0 1px rgba(60,64,78,1); --shadow-md:0 0 0 1px rgba(60,64,78,1),0 16px 40px rgba(0,0,0,.45); color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-0.01em}
h1{font-size:25px;font-weight:700}
h2{font-size:17px;font-weight:700}
h3{font-size:15px;font-weight:700}
a{color:var(--accent)}
button,input,select,textarea{font-family:inherit;font-size:15px;color:var(--fg)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tn{font-variant-numeric:tabular-nums}

.app{display:flex;flex-wrap:nowrap;min-height:100dvh;position:relative}
.nav{flex:1 1 220px;min-width:180px;max-width:280px;background:var(--nav);color:var(--navfg);padding:20px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto;transition:margin-left .18s var(--ease-out),opacity .18s var(--ease-out)}
.navtoggle{all:unset;cursor:pointer;position:fixed;top:12px;left:12px;z-index:40;width:36px;height:36px;display:none;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-md);font-size:16px}
.navtoggle:hover{background:var(--nav2,var(--surface))}
.app.navCollapsed .navtoggle{display:flex}
.app.navCollapsed .nav{margin-left:-280px;opacity:0;pointer-events:none;position:fixed}
.nav .brandrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px}
.nav .navclose{all:unset;cursor:pointer;color:var(--navfg);opacity:.7;font-size:15px;padding:4px}
.nav .navclose:hover{opacity:1}
.nav .brand{font-size:18px;font-weight:700;color:#FBF8F4;padding:0 10px}
.nav .mode{font-size:12px;color:#8F8575;padding:2px 10px 14px}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border-radius:var(--r-sm);color:var(--navfg);transition:background .15s var(--ease-out),color .15s var(--ease-out)}
.nav button:hover{background:var(--nav2)}
.nav button:active{transform:scale(.98)}
.nav button[aria-current="page"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.nav button:focus-visible{outline:3px solid var(--accent)}
.nav .sep{height:1px;background:#332D25;margin:10px 4px}
.nav .who{margin-top:auto;padding:12px 10px 0;font-size:13px;color:#8F8575;line-height:1.6}
.nav .count{background:var(--warm);color:#1C1A17;border-radius:var(--r-pill);font-size:12px;font-weight:700;padding:0 8px}
.main{flex:999 1 560px;min-width:0;padding-block:28px;padding-inline:max(16px,3vw);display:flex;flex-direction:column;gap:18px}
.head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.sub{font-size:14px;color:var(--muted)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:720px){.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2{grid-template-columns:minmax(0,1fr)}
.app{flex-direction:column;flex-wrap:wrap}
.nav{position:static;max-width:100%;max-height:none;overflow-y:visible;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px}
.nav .who{margin-top:0}
}
.split{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.split>*{flex:1 1 320px;min-width:0}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.lbl{font-size:13px;color:var(--muted)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],input[type=datetime-local],input[type=search],select,textarea{
  height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);width:100%;min-width:0;transition:border-color .15s var(--ease-out)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{height:auto;min-height:120px;padding:10px 12px;font-family:var(--mono);font-size:13px;line-height:1.6}
input[type=range]{width:100%;accent-color:var(--accent);height:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--surface);cursor:pointer;white-space:nowrap;transition:transform .12s var(--ease-out),border-color .15s var(--ease-out),background .15s var(--ease-out)}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn.dark{background:var(--fg);border-color:var(--fg);color:var(--bg);font-weight:700}
.btn.warn{color:var(--warm-fg);border-color:var(--warm)}
.btn.sm{height:36px;padding:0 10px;font-size:14px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--surface);cursor:pointer;transition:border-color .15s var(--ease-out),background .15s var(--ease-out)}
.chip:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.day{width:48px;height:48px;border-radius:var(--r-pill);border:2px solid var(--line2);background:var(--surface);font-weight:600;cursor:pointer;transition:transform .12s var(--ease-out),background .15s var(--ease-out)}
.day:active{transform:scale(.95)}
.day[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:13px;font-weight:600;white-space:nowrap}
.p-blue{background:var(--accent-soft);color:var(--accent-fg)}
.p-warm{background:var(--warm-soft);color:var(--warm-fg)}
.p-gray{background:var(--soft);color:var(--muted)}
.p-ok{background:var(--ok-soft);color:var(--ok-fg)}
.tabs{display:inline-flex;background:var(--soft);border-radius:var(--r-sm);padding:4px;gap:2px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;height:40px;padding:0 16px;border-radius:6px;cursor:pointer;color:var(--muted);transition:background .15s var(--ease-out),color .15s var(--ease-out)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:var(--shadow-sm)}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:13px;font-weight:500;color:var(--muted);padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 8px;border-bottom:1px solid var(--soft);vertical-align:middle}
tr.sel td{background:var(--accent-soft)}
.empty{padding:28px 12px;text-align:center;color:var(--muted)}
.stat .k{font-size:13px;color:var(--muted)}
.stat .v{font-size:29px;font-weight:700;margin-top:4px;letter-spacing:-0.01em}
.stat .v small{font-size:15px;font-weight:500;color:var(--muted)}
.note{font-size:13px;color:var(--muted);line-height:1.6}
.banner{border-radius:var(--r-sm);padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.banner.blue{background:var(--accent-soft);color:var(--accent-fg)}
.banner.warm{background:var(--warm-soft);color:var(--warm-fg)}
.box-warm{border:1px solid var(--warm);background:var(--warm-soft);border-radius:var(--r-sm);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.list{list-style:none;margin:0;padding:0}
.list li{padding:12px 0;border-bottom:1px solid var(--soft);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.toolbar{background:var(--fg);color:var(--bg);border-radius:var(--r-md);padding:10px 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.toolbar select{width:auto}
.toolbar .btn{background:transparent;color:var(--bg);border-color:#6B7583}

/* charts */
.bars{display:flex;align-items:flex-end;gap:10px;height:200px;border-bottom:1px solid var(--line2);padding:0 6px;position:relative}
.bars .col{flex:1 1 0;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;min-width:0;position:relative}
.bars .b{width:42%;border-radius:4px 4px 0 0;min-height:2px;transition:height .4s var(--ease-inout)}
.bars .b.a{background:var(--accent)} .bars .b.w{background:var(--warm)}
.bars .val{position:absolute;bottom:calc(var(--h) + 4px);font-size:12px;font-weight:600}
.blabels{display:flex;gap:10px;padding:6px 6px 0}
.blabels div{flex:1 1 0;text-align:center;font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cutline{position:absolute;left:0;right:0;border-top:2px dashed var(--warm-fg)}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{font-size:12px;color:var(--muted);text-align:center}
.cal .c{min-height:64px;border-radius:var(--r-sm);padding:6px;background:var(--soft);display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:1.3;min-width:0;overflow:hidden}
.cal .c b{font-size:13px}
.cal .c.ex{background:var(--accent-soft);color:var(--accent-fg)}
.cal .c.ho{background:var(--warm-soft);color:var(--warm-fg)}
.cal .c.br{background:var(--line)}
.cal .c.blank{background:transparent}
.cal .c.today{outline:2px solid var(--fg)}

/* login & test */
.center{min-height:100dvh;display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:center;padding-block:40px;padding-inline:16px;background:var(--nav)}
.panel{flex:0 1 420px;background:var(--surface);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-md)}
.test{min-height:100dvh;display:flex;flex-direction:column;background:var(--surface)}
.test header,.test footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px max(16px,3vw)}
.test header{border-bottom:1px solid var(--line)}
.test footer{border-top:1px solid var(--line)}
.timer{font-size:28px;font-weight:700;background:var(--soft);border-radius:var(--r-sm);padding:4px 16px}
.tbar{height:6px;background:var(--soft)} .tbar div{height:6px;background:var(--warm);transition:width .25s linear}
.test main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:40px 16px}
.word{font-size:clamp(40px,8vw,64px);font-weight:700;text-align:center;overflow-wrap:anywhere;letter-spacing:-0.01em}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:720px}
@media (max-width:560px){.opts{grid-template-columns:minmax(0,1fr)}}
.opt{min-height:68px;border-radius:var(--r-md);border:2px solid var(--line2);background:var(--surface);font-size:19px;text-align:left;padding:0 18px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .15s var(--ease-out),transform .12s var(--ease-out)}
.opt .n{width:30px;height:30px;border-radius:var(--r-pill);background:var(--soft);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex:none}
.opt:hover{border-color:var(--accent)}
.opt:active{transform:scale(.98)}
.spell{max-width:520px;width:100%;height:64px!important;font-size:26px!important;text-align:center}
.toast{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:min(420px,calc(100% - 32px));background:var(--fg);color:var(--bg);padding:14px 16px;border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:20;display:flex;gap:12px;align-items:flex-start;transition:transform .2s var(--ease-out),opacity .2s var(--ease-out)}
.modal-bg{position:fixed;inset:0;background:rgba(23,20,15,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:30}
.modal{background:var(--surface);border-radius:var(--r-lg);padding:24px;max-width:520px;width:100%;display:flex;flex-direction:column;gap:14px;max-height:90vh;overflow:auto;box-shadow:var(--shadow-md)}
.clockbar{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pggrid{display:flex;flex-wrap:wrap;gap:8px}
.pgcell-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}
.pgcell-wrap small{color:var(--muted);font-size:11px}
.pgcell{width:38px;height:42px;text-align:center;font-size:18px;font-weight:600;border-radius:var(--r-sm);border:1px solid var(--border);padding:0}
.pgcell:focus{outline:2px solid var(--accent);outline-offset:1px}
.mono{font-family:var(--mono);font-size:13px}
.dropbtn{width:100%;min-height:44px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;text-align:left;cursor:pointer}
.dropbtn span{min-width:0;overflow-wrap:anywhere}
.dropbtn svg{flex:none;transition:transform .15s var(--ease-out)}
.dropbtn[aria-expanded="true"]{border-color:var(--accent)}
.dropbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.droplist{border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);max-height:240px;overflow:auto;padding:4px;margin-top:4px;box-shadow:var(--shadow-sm)}
.dropitem{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 10px;border-radius:6px;cursor:pointer}
.dropitem:hover{background:var(--soft)}
.folders{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 16px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--surface);position:relative}
.fchip>button.pick{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:600;min-height:44px}
.fchip>button.pick:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}
.fchip .dot{width:10px;height:10px;border-radius:3px;background:var(--accent);flex:none}
.fchip .n{font-size:13px;font-weight:600;background:var(--soft);color:var(--muted);border-radius:var(--r-pill);padding:1px 9px}
.fchip .more{all:unset;cursor:pointer;width:32px;height:32px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.fchip .more:hover{background:var(--soft)}
.fchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fchip.on .n{background:rgba(255,255,255,.25);color:var(--accent-ink)}
.fchip.on .dot{background:var(--accent-ink)}
.fchip.nomore{padding-right:16px}
.fsep{width:1px;height:28px;background:var(--line2);margin:0 4px}
.fnew{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:0;background:var(--warm-soft);color:var(--warm-fg);font-weight:600;cursor:pointer}
.fmenu{position:absolute;top:calc(100% + 4px);right:0;z-index:5;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:4px;min-width:140px;display:flex;flex-direction:column;color:var(--fg)}
.fmenu button{all:unset;cursor:pointer;padding:10px 12px;border-radius:6px;font-size:14px}
.fmenu button:hover{background:var(--soft)}
.wk{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}
.wk th{background:var(--soft);color:var(--fg);font-weight:600;text-align:center;border:1px solid var(--line2);padding:8px 6px}
.wk td{border:1px solid var(--line);padding:6px 8px;text-align:center}
.wk td.cls{font-weight:600;background:var(--surface);border-bottom:2px solid var(--line2)}
.wk tr.last td{border-bottom:2px solid var(--line2)}
.wk td.ec{font-size:14px;font-weight:600;color:var(--ecfg)}
.wk td.nm{font-weight:600;color:var(--ecfg)}
.wk td.sc{font-variant-numeric:tabular-nums;white-space:nowrap}
.wk td.sc.bad{color:var(--warm-fg);font-weight:700}
.wk td.sc.none{color:var(--line2)}
.wk td.sc.miss{color:var(--muted);font-size:13px}
.wk small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.ec0{background:var(--ec0)}.ec1{background:var(--ec1)}.ec2{background:var(--ec2)}.ec3{background:var(--ec3)}.ec4{background:var(--ec4)}.ec5{background:var(--ec5)}
.dropitem input{width:18px;height:18px;accent-color:var(--accent)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}