:root{
  --ink:#18223F; --ink2:#2B3863; --ink-soft:#E6EAF3;
  --mist:#EDF0F5; --paper:#FFFFFF; --rule:#E4E8EF; --rule2:#D2D8E2;
  --graphite:#5B6477; --faint:#9AA2B1;
  --hl:#FFE071; --hl-soft:#FFF6D1;
  --pen:#D2453F;
  --serif:"Gowun Batang","Nanum Myeongjo",serif;
  --navy:#18223F; --line2:#D2D8E2; --sub:#5B6477; --red:#D2453F;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Pretendard","Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:var(--ink);background:var(--mist);font-size:13px;
  -webkit-font-smoothing:antialiased;-webkit-print-color-adjust:exact;print-color-adjust:exact}
button,input,select{font-family:inherit;font-size:13px;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink2);outline-offset:2px}

/* ===== 상단 ===== */
.top{height:60px;background:var(--paper);border-bottom:1px solid var(--rule);display:flex;align-items:center;padding:0 24px;gap:36px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{flex:none}
.brand b{font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:-.5px}
.brand small{font-size:11px;color:var(--faint);font-weight:500;margin-left:2px}
.tabs{display:flex;gap:2px;background:var(--mist);padding:3px;border-radius:10px}
.tab{background:none;border:none;color:var(--graphite);padding:0 16px;height:32px;border-radius:8px;font-weight:600;font-size:13.5px}
.tab.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(24,34,63,.08),0 0 0 1px var(--rule)}
.tab:disabled{color:#B5BBC7;cursor:default}
.tab .soon{font-size:10.5px;font-weight:500;margin-left:5px;color:#C0C6D1}
.me{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--graphite)}
.av{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

/* ===== 레이아웃 ===== */
.view{display:none;height:calc(100vh - 60px);padding:18px;gap:14px}
.view.on{display:grid}
#v-exam{grid-template-columns:292px 52px minmax(360px,1fr) 352px;min-width:1150px}
.panel{background:var(--paper);border:1px solid var(--rule);border-radius:16px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ph{display:flex;align-items:center;gap:10px;padding:15px 18px 11px}
.ph h2{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:-.4px}
.ph .aside{margin-left:auto}
.step{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.pb{padding:0 18px 18px;display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}

/* 검색 */
.search{position:relative}
.search svg{position:absolute;left:11px;top:10px;color:var(--faint)}
.search input{width:100%;height:36px;border:1px solid var(--rule);border-radius:9px;padding:0 32px 0 33px;background:var(--mist)}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;border-color:var(--ink2);background:#fff}
.search .x{position:absolute;right:7px;top:7px;width:22px;height:22px;border:none;border-radius:6px;background:var(--rule);color:var(--graphite);font-size:12px;display:none}

/* 분류 */
.cats{display:flex;flex-wrap:wrap;gap:6px}
.cat{border:1px solid var(--rule2);background:#fff;border-radius:999px;height:30px;padding:0 11px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;color:var(--ink)}
.cat em{font-style:normal;font-size:11px;color:var(--faint);font-weight:600}
.cat:hover{border-color:var(--ink2)}
.cat.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cat.on em{color:var(--hl)}
.cat.empty{color:#AEB5C2;border-color:var(--rule)}

select.book{appearance:none;-webkit-appearance:none;width:100%;height:38px;border:1px solid var(--rule2);border-radius:9px;padding:0 34px 0 12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%235B6477' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;font-weight:700;font-size:13.5px}
select.book:disabled{color:var(--faint);background-color:var(--mist)}

/* 목록 */
.list{border:1px solid var(--rule);border-radius:12px;display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
.lh,.li{display:grid;align-items:center;padding:0 14px}
.lh{height:32px;border-bottom:1px solid var(--rule);font-size:11.5px;font-weight:600;color:var(--faint)}
.lb{overflow-y:auto;flex:1;user-select:none}
.li{min-height:40px;border-bottom:1px solid #F1F3F7;font-size:13.5px;cursor:default;transition:background .12s}
.li:hover{background:#F8F9FC}
.li.sel{background:var(--hl-soft)}
.hlt{background:linear-gradient(transparent 58%,transparent 58%);padding:0 2px;margin:0 -2px;transition:background .15s}
.li.sel .hlt{background:linear-gradient(transparent 52%,var(--hl) 52%,var(--hl) 92%,transparent 92%)}
.li .n{text-align:right;color:var(--graphite);font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px}
.li .bk{color:var(--faint);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.li .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .mt{font-size:11px;color:#3E8E6A;margin-left:7px;font-weight:600}
.u-cols{grid-template-columns:1fr 50px}
.r-cols{grid-template-columns:26px 1fr 56px}
.r-cols .idx{color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.r-cols.li{min-height:50px}
.emptymsg{padding:44px 18px;text-align:center;color:var(--faint);font-size:13px;line-height:1.75}
.emptymsg b{color:var(--ink);font-weight:700}
.tip{font-size:11px;color:var(--faint);text-align:center}
.tip kbd{font-family:inherit;font-size:10.5px;font-weight:600;color:var(--graphite);border:1px solid var(--rule2);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:#fff}

/* 가운데 화살표 */
.mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--rule2);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .12s,background .12s}
.arrow.add{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 6px 16px -6px rgba(24,34,63,.5)}
.arrow:hover{transform:scale(1.05)}
.arrow:active{transform:scale(.97)}
.mid small{font-size:11px;color:var(--faint);font-weight:600;margin-top:-6px}

/* 출제범위 하단 */
.rfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:2px}
.sum{display:flex;gap:22px}
.stat{display:flex;align-items:baseline;gap:5px}
.stat b{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-size:12.5px;color:var(--graphite);font-weight:600}
.btns{display:flex;gap:6px}
.btn{height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--rule2);background:#fff;font-weight:600;font-size:12.5px;white-space:nowrap;color:var(--ink);transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--ink2)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.pri:hover{background:var(--ink2)}
.btn.ghost{border-color:transparent;color:var(--graphite);background:none}
.btn.ghost:hover{color:var(--ink);background:var(--mist)}
.note{font-size:11.5px;color:var(--faint);line-height:1.55}

/* 스위치 */
.sw{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;cursor:pointer;user-select:none;min-height:26px}
.sw .t small{display:block;font-size:11px;color:var(--faint);font-weight:500;margin-top:1px}
.sw input{appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:10px;background:#CDD3DD;position:relative;flex:none;cursor:pointer;transition:background .15s}
.sw input::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sw input:checked{background:var(--ink)}
.sw input:checked::after{transform:translateX(14px)}
.sw.dis{opacity:.4;cursor:default}
.sw.dis input{cursor:default}
.sw.inline{justify-content:flex-start;font-size:12.5px;color:var(--graphite)}

/* 오른쪽 */
.right{display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;padding-bottom:2px}
.right .panel{overflow:visible;flex:none}
.right .pb{gap:11px}
.sentence{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--graphite)}
.big-in{width:78px;height:44px;border:1px solid var(--rule2);border-radius:10px;text-align:center;font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.big-in[readonly]{border-color:transparent;background:var(--mist);width:64px}
.big-in:focus{outline:none;border-color:var(--ink2);box-shadow:0 0 0 3px var(--ink-soft)}
input[type=number]::-webkit-inner-spin-button{opacity:.4}

/* 비율 막대 (시그니처) */
.ratio{display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:12px;background:var(--mist)}
.ratio-top{display:flex;justify-content:space-between;align-items:center}
.ratio-side{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700}
.ratio-side .dot{width:9px;height:9px;border-radius:2px}
.ratio-side input{width:52px;height:30px;border:1px solid var(--rule2);border-radius:8px;text-align:center;font-weight:700;font-size:14px;background:#fff;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.ratio-side input:focus{outline:none;border-color:var(--ink2)}
.bar{position:relative;height:14px}
.bar input[type=range]{position:absolute;inset:0;width:100%;height:14px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;z-index:2}
.bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 2px 6px rgba(24,34,63,.25)}
.bar input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.bar .track{position:absolute;inset:3px 0;border-radius:4px;overflow:hidden;display:flex;background:var(--hl)}
.bar .fill{background:var(--ink);height:100%}
.quick{display:flex;justify-content:center;gap:4px}
.quick button{border:none;background:none;font-size:11.5px;font-weight:600;color:var(--graphite);padding:3px 8px;border-radius:6px}
.quick button:hover{background:#fff;color:var(--ink)}

.seg{display:flex;background:var(--mist);border-radius:10px;padding:3px;height:38px}
.seg button{flex:1;border:none;background:none;font-weight:600;font-size:12.5px;color:var(--graphite);border-radius:8px}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(24,34,63,.1),0 0 0 1px var(--rule)}
.row2{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:10px 12px}
.row2 > label{font-weight:600;font-size:12.5px;color:var(--graphite)}
.txt-in{height:36px;border:1px solid var(--rule2);border-radius:9px;padding:0 11px;width:100%;background:#fff;font-weight:500}
.txt-in:focus{outline:none;border-color:var(--ink2);box-shadow:0 0 0 3px var(--ink-soft)}
.copies{display:flex;align-items:center;gap:8px}
.copies input{width:64px;text-align:center;font-weight:700}
.copies span{color:var(--graphite);font-size:12.5px}
.divider{height:1px;background:var(--rule);margin:2px -18px}
.warn{font-size:12px;color:var(--pen);font-weight:600;min-height:0}
.warn:empty{display:none}
.stu-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--graphite);font-weight:600}
.stu-head button{border:none;background:none;color:var(--ink2);font-weight:600;font-size:12px;text-decoration:underline;text-underline-offset:2px}
.stu{border:1px solid var(--rule);border-radius:10px;max-height:150px;overflow-y:auto;padding:4px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.stu label{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer}
.stu label:hover{background:var(--mist)}
.stu input{width:15px;height:15px;accent-color:var(--ink)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.duo span{display:block;font-weight:600;font-size:12px;color:var(--graphite);margin-bottom:5px}
.printbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.printbtns .main{grid-column:1/-1;height:48px;border-radius:12px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 20px -10px rgba(24,34,63,.6)}
.printbtns .btn:not(.main){height:38px}

/* ===== 내 설정 ===== */
#v-set{grid-template-columns:420px 1fr;align-items:start;min-width:1150px}
.form{display:flex;flex-direction:column;gap:14px}
.field label.t{display:block;font-weight:600;font-size:12.5px;margin-bottom:6px;color:var(--graphite)}
.field label.t small{color:var(--faint);font-weight:500}
.logo-box{display:flex;align-items:center;gap:10px}
.logo-prev{width:56px;height:56px;border:1px dashed var(--rule2);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--faint);font-size:11px;background:var(--mist)}
.logo-prev img{max-width:100%;max-height:100%}
.set-prev{background:var(--mist);border-radius:12px;padding:22px;overflow:auto}
.set-prev .page{box-shadow:0 10px 30px -12px rgba(24,34,63,.3)}

/* ===== 모달 ===== */
.modal{position:fixed;inset:0;background:rgba(18,25,46,.5);backdrop-filter:blur(2px);display:none;z-index:50}
.modal.on{display:flex}
.dlg{background:#fff;border-radius:16px;margin:auto;width:440px;max-width:92vw;padding:22px;display:flex;flex-direction:column;gap:14px;max-height:80vh;box-shadow:0 30px 60px -20px rgba(18,25,46,.5)}
.dlg h3{font-family:var(--serif);font-size:18px;font-weight:700}
.dlg .acts{display:flex;justify-content:flex-end;gap:6px}
.fav-li{display:flex;align-items:center;gap:8px;padding:11px 4px;border-bottom:1px solid var(--rule)}
.fav-li .nm{flex:1;font-weight:700}
.fav-li .ds{font-size:11.5px;color:var(--faint);display:block;font-weight:500;margin-top:2px}

#preview{flex-direction:column;background:#2A3149;backdrop-filter:none}
.pv-bar{height:60px;background:var(--paper);display:flex;align-items:center;gap:12px;padding:0 22px;flex:none}
.pv-bar h3{font-family:var(--serif);font-size:17px;font-weight:700}
.pv-bar .info{font-size:12.5px;color:var(--graphite);font-weight:500}
.pv-bar .sp{flex:1}
.pv-bar select{height:34px;border:1px solid var(--rule2);border-radius:9px;padding:0 8px;background:#fff;font-weight:600}
.pv-body{flex:1;overflow:auto;padding:28px 0 40px}
.pv-body .pages{display:flex;flex-direction:column;align-items:center;gap:22px}
.pv-body .page{box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
.pv-tag{font-size:12px;color:#C9CFDC;font-weight:600;width:210mm;margin-bottom:-14px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;transition:.2s;z-index:80;pointer-events:none;box-shadow:0 12px 30px -10px rgba(18,25,46,.6)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== 시험지 (A4) ===== */
.page{width:210mm;height:297mm;background:#fff;padding:13mm 13mm 10mm;display:flex;flex-direction:column;position:relative;overflow:hidden;color:#1B2340;font-family:"Pretendard","Malgun Gothic",sans-serif}
.sh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8mm;padding-bottom:3.2mm;border-bottom:.35mm solid #1B2340;min-height:16mm}
.sh-title{min-width:0}
.sh-title h1{font-family:"Gowun Batang","Nanum Myeongjo",serif;font-size:24pt;font-weight:700;letter-spacing:.6mm;line-height:1;white-space:nowrap;color:#1B2340}
.sh-range{font-size:8.8pt;color:#6A7386;margin-top:2mm;font-weight:500;max-width:125mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-brand{display:flex;align-items:center;gap:2.5mm;min-width:0;flex:none}
.sh-logo{width:10.5mm;height:10.5mm;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sh-logo img{max-width:100%;max-height:100%}
.sh-academy{font-size:11pt;font-weight:700;letter-spacing:-.2px;white-space:nowrap;text-align:right;color:#1B2340}
.sh-academy small{display:block;font-size:7.3pt;font-weight:500;color:#8A93A5;margin-top:.4mm}
.sh-info{display:grid;grid-template-columns:1.15fr 1fr 1.5fr 1fr;gap:2mm;margin-top:3.2mm}
.sh-info div{display:flex;align-items:center;justify-content:space-between;height:9mm;border:.25mm solid #D9DEE6;border-radius:2.2mm;padding:0 3mm;min-width:0;background:#fff}
.sh-info span{font-size:7.8pt;font-weight:600;color:#8A93A5;flex:none}
.sh-info em{font-style:normal;font-size:9.5pt;font-weight:600;color:#1B2340;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:2mm}
.sh-info em.nm{font-size:10.5pt}
.sh-info div.score{background:#F6F7FA;border-color:#E3E7EE}
.sh-info em.key{color:#D2453F;font-weight:700;border:.3mm solid #D2453F;border-radius:1.5mm;padding:.3mm 2mm;font-size:8.5pt;letter-spacing:.4mm}
.sh-meta{display:flex;justify-content:space-between;align-items:center;font-size:7.8pt;color:#6A7386;margin:2.6mm .5mm 1.6mm}
.sh-meta b{color:#1B2340;font-weight:700}
.sh-meta .cnt{display:flex;gap:1.5mm}
.sh-meta .cnt i{font-style:normal;background:#F1F3F7;border-radius:5mm;padding:.5mm 2.2mm;color:#4A5366;font-weight:600}
.sh-body{flex:1;display:grid;grid-template-columns:1fr 1fr;column-gap:5.5mm;align-content:start;align-items:start}
.sh-col{display:flex;flex-direction:column}
.sh-sec{height:6mm;margin:0 0 1.5mm;display:flex;align-items:center;gap:2mm;font-size:9.3pt;font-weight:700;color:#1B2340;padding:0 .5mm}
.sh-sec .rn{width:5mm;height:5mm;border-radius:50%;background:#1B2340;color:#fff;font-family:"Gowun Batang",serif;font-size:7.5pt;display:flex;align-items:center;justify-content:center}
.sh-sec small{margin-left:auto;font-size:7.5pt;font-weight:500;color:#8A93A5}
.sh-col .sh-sec:not(:first-child){margin-top:1.5mm}
.tw{border:.25mm solid #D3D9E2;border-radius:2.6mm;overflow:hidden}
.tbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.tbl th,.tbl td{border:none;font-size:10pt;font-weight:600;letter-spacing:-.1px;padding:0 2.4mm;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl td{border-top:.2mm solid #E7EAF0}
.tbl td+td,.tbl th+th{border-left:.2mm solid #E7EAF0}
.tbl thead th{background:#F5F6F9;color:#8A93A5;font-size:7.6pt;font-weight:600;height:6mm;text-align:left}
.tbl thead th.n{text-align:center}
.tbl th.n{padding:0}
.tbl tbody tr{height:var(--rowh,8.4mm)}
.tbl td.num{padding:0;text-align:center;color:#9AA3B3;font-size:8.3pt;font-weight:600;font-variant-numeric:tabular-nums}
.tbl col.c1{width:8.5mm}.tbl col.c2{width:37mm}
.tbl td.q{color:#1B2340}
.tbl td.a{position:relative}
.tbl .hint{color:#B3BAC6;font-family:"Gowun Batang",serif;font-weight:700;font-size:10.5pt}
.tbl .ans{color:#D2453F;font-weight:600}
.tbl .unit{position:absolute;right:1.2mm;top:.7mm;font-size:5.8pt;font-weight:700;color:#1B2340;background:#FFE071;padding:0 1.4mm;border-radius:1mm;line-height:1.55}
.sh-foot{display:flex;justify-content:space-between;align-items:center;margin-top:3mm;font-size:7.3pt;color:#9AA3B3}
.sh-foot .pg{font-variant-numeric:tabular-nums;color:#6A7386;font-weight:600}

#printRoot{display:none}
@page{size:A4;margin:0}
@media print{
  body{background:#fff}
  body>*:not(#printRoot){display:none!important}
  #printRoot{display:block}
  #printRoot .page{break-after:page;box-shadow:none}
  #printRoot .page:last-child{break-after:auto}
}

/* ===== 로그인 · 승인 ===== */
.auth{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--mist);z-index:40;overflow:auto;padding:30px}
.auth-card{width:420px;max-width:100%;background:#fff;border:1px solid var(--rule);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:0 30px 60px -30px rgba(24,34,63,.35)}
.auth-brand{display:flex;align-items:center;gap:12px}
.auth-brand h1{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:-.6px}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form label span{display:block;font-size:12.5px;font-weight:600;color:var(--graphite);margin-bottom:5px}
.auth-form label small{color:var(--faint);font-weight:500;margin-left:3px}
.auth-form .txt-in{height:42px;font-size:14px}
.auth-go{height:46px;font-size:15px;font-weight:700;border-radius:11px;margin-top:4px}
.auth-err{font-size:12.5px;color:var(--pen);font-weight:600;min-height:0}
.auth-err:empty{display:none}
.auth .note{text-align:center}
.gate{text-align:center;align-items:center}
.gate h1{font-family:var(--serif);font-size:22px;font-weight:700}
.gate p{color:var(--graphite);line-height:1.7;font-size:13.5px}
.gate-ico{width:64px;height:64px;border-radius:50%;background:var(--hl-soft);display:flex;align-items:center;justify-content:center;font-size:28px}
.banner{background:var(--hl-soft);border-bottom:1px solid #F3E2A0;color:#6B5A12;font-size:12.5px;font-weight:600;text-align:center;padding:8px 20px}
.banner.notice{background:var(--ink);color:#fff;border:none;display:flex;justify-content:center;align-items:center;gap:12px}
.banner.notice button{background:none;border:none;color:rgba(255,255,255,.6);font-size:14px}
.me .btn.ghost{height:30px;padding:0 10px;font-size:12px}
#app .view{height:calc(100vh - 60px - var(--bannerH,0px))}

/* ===== 반 · 학생 ===== */
#v-cls{grid-template-columns:260px minmax(320px,1fr) minmax(380px,1.2fr);min-width:1150px}
#v-log{grid-template-columns:1fr;min-width:1150px}
.c-cols{grid-template-columns:1fr 44px}
.s2-cols{grid-template-columns:26px 1fr 50px}
.h-cols{grid-template-columns:26px 1fr 46px 92px}
.l-cols{grid-template-columns:130px 180px 1fr 56px 300px}
.lh input,.li input[type=checkbox]{width:15px;height:15px;accent-color:var(--ink)}
.li .sub{font-size:11.5px;color:var(--faint);font-weight:500}
.li .act{display:flex;gap:5px;justify-content:flex-end}
.li .act .btn{height:28px;padding:0 9px;font-size:11.5px}
.li.cls-none .nm{color:var(--graphite);font-weight:600}
.add-stu{display:flex;gap:8px;align-items:flex-start}
.add-stu textarea{flex:1;height:auto;min-height:36px;max-height:140px;padding:8px 11px;resize:vertical;line-height:1.45;font-family:inherit}
.add-stu .btn{height:36px}
.edit-in{height:28px;border:1px solid var(--ink2);border-radius:6px;padding:0 8px;width:100%;font-weight:700;font-size:13px}
.li .when{font-size:12px;color:var(--graphite);text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--mist);color:var(--graphite);margin-left:6px;vertical-align:1px}
.pill.key{background:#FBE7E6;color:var(--pen)}
.pill.cls{background:var(--ink-soft);color:var(--ink2)}
.ask-list{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow:auto}
.ask-list label{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--rule);border-radius:9px;cursor:pointer;font-weight:600}
.ask-list input{accent-color:var(--ink)}
.loading{padding:40px;text-align:center;color:var(--faint)}
.cls-act{grid-column:1/-1;justify-content:flex-start!important;padding:0 0 10px}
.li.c-cols{padding-top:0}

.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--rule);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.demo-hint{margin-top:6px;padding:12px;border-radius:12px;background:var(--hl-soft);font-size:12px;color:#6B5A12;line-height:1.5}
.demo-hint div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.demo-hint button{border:1px solid #EBD88F;background:#fff;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink)}
.demo-hint button:hover{border-color:var(--ink)}
.banner{display:flex;justify-content:center;align-items:center;gap:12px}
.banner-btn{border:1px solid #EBD88F;background:#fff;border-radius:7px;padding:2px 9px;font-size:11.5px;font-weight:600;color:#6B5A12}
a.tab{display:inline-flex;align-items:center;text-decoration:none}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pen);color:#fff;font-size:10.5px;font-weight:700;margin-left:6px}
.badge:empty{display:none}