/* CBT — minimal flat. home_A_minimal_flat.html 비주얼 언어 계승, 데스크탑 레이아웃 */
:root{
  --bg:#EEF0F6; --card:#FFFFFF; --hair:#EAECF3; --hair2:#E2E5EF;
  --text:#15171F; --sub:#6B6F80; --red:#E5484D;
  --fill:#F5F6FB;            /* 옵션/응답완료 옅은 채움 */
  --fill2:#EBEEF7;
  --ink:#15171F;            /* 중립 잉크(텍스트/선택/토스트) */
  --accent:#3047C0;         /* 포인트 컬러(인디고) — 선택/활성/진행/기본버튼 */
  --accent-soft:#E7EAFA;    /* 선택 행 옅은 인디고 채움 */
  --flag:#C2871A;           /* 검토 플래그 표식(절제된 앰버) */
  --ok:#1F9E6A;             /* 리뷰에서 정답 표시(초록) */
  --ok-soft:rgba(31,158,106,.10);   /* 정답 행 옅은 채움 */
  --red-soft:rgba(229,72,77,.09);   /* 오답 행/위험 옅은 채움 */
  --shadow-lift:0 8px 22px rgba(35,46,110,.12);
  --radius:14px; --radius-sm:10px;
  --maxw:820px;
  --shadow:0 1px 2px rgba(28,34,64,.05), 0 1px 3px rgba(28,34,64,.04);
}
[data-theme="dark"]{
  --bg:#0F1117; --card:#171A22; --hair:#262A36; --hair2:#2E323F;
  --text:#E8EAF2; --sub:#9094A6; --red:#FF6166;
  --fill:#1E222C; --fill2:#252A36; --ink:#E8EAF2;
  --accent:#8FA0FF; --accent-soft:rgba(143,160,255,.16);
  --flag:#E0B354; --ok:#54C08A;
  --ok-soft:rgba(84,192,138,.16); --red-soft:rgba(255,97,102,.16);
  --shadow:0 1px 2px rgba(0,0,0,.35); --shadow-lift:0 8px 24px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,
    "Malgun Gothic","맑은 고딕",system-ui,"Apple SD Gothic Neo",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}
button{font-family:inherit; cursor:pointer}
::selection{background:var(--ink); color:var(--bg)}

/* ---------- 레이아웃 ---------- */
.app{display:flex; min-height:100vh}
.sidebar{
  width:236px; flex:0 0 236px; border-right:1px solid var(--hair);
  background:var(--card); padding:22px 16px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:4px;
}
.brand{display:flex; align-items:center; gap:9px; padding:6px 10px 18px}
.brand b{font-size:19px;font-weight:800;letter-spacing:-.04em}
.navsec{font-size:11px;color:var(--sub);font-weight:600;letter-spacing:.04em;
  padding:14px 10px 6px;text-transform:uppercase}
.navitem{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-sm);
  color:var(--text);font-size:14px;font-weight:500;border:none;background:none;width:100%;text-align:left;
  transition:background .12s}
.navitem:hover{background:var(--hair2)}
.navitem.active{background:var(--fill2);font-weight:600;box-shadow:inset 3px 0 var(--accent)}
.navitem.active .ic{color:var(--accent);opacity:1}
.navitem .ic{width:18px;text-align:center;opacity:.85}
.navitem .badge{margin-left:auto;font-size:11px;color:var(--sub);background:var(--bg);
  border-radius:20px;padding:1px 8px;font-weight:600}
.navitem.danger .badge{color:var(--red)}
.sidebar .spacer{flex:1}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{width:100%;max-width:var(--maxw);margin:0 auto;padding:34px 28px 80px}
.page-head{margin-bottom:24px}
.page-head h1{font-size:25px;font-weight:700;margin:0 0 4px;letter-spacing:-.03em}
.page-head p{margin:0;color:var(--sub);font-size:14px}

/* ---------- 카드/요소 ---------- */
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.card.pad{padding:20px}
.grid{display:grid;gap:14px}
.grid.cols2{grid-template-columns:1fr 1fr}
.grid.cols3{grid-template-columns:repeat(3,1fr)}
.muted{color:var(--sub)}
.red{color:var(--red)}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
hr.hair{border:none;border-top:1px solid var(--hair);margin:16px 0}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:11px;border:1px solid var(--hair2);background:var(--card);
  color:var(--text);font-size:14px;font-weight:600;transition:.12s;white-space:nowrap}
.btn:hover{background:var(--fill)}
.btn.primary{background:var(--accent);color:var(--card);border-color:var(--accent)}
.btn.primary:hover{opacity:.9}
.btn.danger{color:var(--red);border-color:var(--red)}
.btn.danger:hover{background:var(--red-soft)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn.lg{padding:14px 24px;font-size:15px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--hair2)}

/* 과목 카드 그리드 (홈) */
.subject-card{padding:18px;cursor:pointer;transition:.14s;display:flex;flex-direction:column;gap:12px}
.subject-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.subject-card .t{font-size:16px;font-weight:700}
.subject-card .meta{font-size:13px;color:var(--sub)}
.subject-card.empty{opacity:.6;cursor:default}
.subject-card.empty:hover{transform:none;box-shadow:var(--shadow)}
.progress{height:6px;background:var(--fill2);border-radius:20px;overflow:hidden}
.progress > i{display:block;height:100%;background:var(--accent);border-radius:20px}

.stat{display:flex;flex-direction:column;gap:2px}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-.02em}
.stat .v.red{color:var(--red)}
.stat .l{font-size:12px;color:var(--sub);font-weight:600}

/* 칩/토글 (설정) */
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;
  border:1px solid var(--hair2);background:var(--card);font-size:13.5px;font-weight:600;cursor:pointer}
.chip.on{border-color:var(--accent);background:var(--accent-soft)}
.chip input{display:none}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field > label{font-size:13px;font-weight:700;color:var(--text)}
.field .hint{font-size:12px;color:var(--sub)}
input[type=text],input[type=number],input[type=password],textarea,select{
  font-family:inherit;font-size:14px;color:var(--text);background:var(--card);
  border:1px solid var(--hair2);border-radius:10px;padding:10px 12px;width:100%;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:64px}
.seg{display:inline-flex;border:1px solid var(--hair2);border-radius:10px;overflow:hidden}
.seg button{padding:8px 16px;border:none;background:var(--card);font-size:13.5px;font-weight:600;color:var(--sub)}
.seg button.on{background:var(--fill2);color:var(--text)}
.modlist{display:flex;flex-direction:column;gap:8px}
.modrow{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--hair);
  border-radius:11px;cursor:pointer;transition:.1s}
.modrow:hover{background:var(--fill)}
.modrow.on{border-color:var(--accent);background:var(--accent-soft)}
.modrow .ck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--sub);flex:0 0 auto;
  display:grid;place-items:center;font-size:12px;color:var(--card)}
.modrow.on .ck{background:var(--accent);border-color:var(--accent)}
.modrow .mt{font-weight:600;font-size:14px}
.modrow .mc{margin-left:auto;font-size:12px;color:var(--sub)}

/* ---------- 응시 ---------- */
.exam-screen{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.exam-wrap{display:grid;grid-template-columns:1fr 232px;gap:22px;align-items:stretch;
  max-width:1040px;margin:0 auto;padding:18px 28px;width:100%;flex:1 1 auto;min-height:0}
.exam-top{flex:0 0 auto;z-index:5;background:var(--bg);
  padding:14px 28px;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:18px}
.exam-top .pbar{flex:1;height:6px;background:var(--fill2);border-radius:20px;overflow:hidden}
.exam-top .pbar > i{display:block;height:100%;background:var(--accent)}
.exam-top .ptext{font-size:13px;font-weight:600;color:var(--sub);white-space:nowrap}
.timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;padding:5px 12px;
  border-radius:9px;background:var(--card);border:1px solid var(--hair2)}
.timer.warn{color:var(--red);border-color:var(--red)}

.q-card{padding:26px 28px}
.q-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--sub);font-weight:600;margin-bottom:14px}
.q-tag{padding:2px 9px;border-radius:20px;background:var(--fill2);color:var(--text)}
.q-flagbtn{margin-left:auto}
.q-flagbtn.on{color:var(--flag);border-color:var(--flag)}
.q-text{font-size:17px;line-height:1.65;font-weight:600;margin-bottom:6px;white-space:pre-wrap;word-break:keep-all}
.q-img{margin:14px 0;max-width:100%;border-radius:10px;border:1px solid var(--hair)}
.q-hint{font-size:12.5px;color:var(--sub);margin:10px 0 2px;font-weight:600}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.opt{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border:1px solid var(--hair2);
  border-radius:12px;cursor:pointer;transition:.1s;background:var(--card)}
.opt:hover{background:var(--fill)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt .key{flex:0 0 auto;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--hair2);
  display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--sub)}
.opt.sel .key{background:var(--accent);color:var(--card);border-color:var(--accent)}
.opt .ot{flex:1;font-size:14.5px;line-height:1.55;word-break:keep-all}
.opt.multi .key{border-radius:7px}
/* 정답 보기(응시 중 단일 문항 정답 공개) */
.opt.correct{border-color:var(--ok);background:var(--ok-soft)}
.opt.correct .key{background:var(--ok);color:var(--card);border-color:var(--ok)}
.ans-mark{flex:0 0 auto;align-self:center;font-size:11px;font-weight:700;color:var(--ok)}
.match-correct{font-size:12.5px;font-weight:600;color:var(--ok);white-space:nowrap}

/* 매칭 */
.match-grid{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.match-row{display:grid;grid-template-columns:1fr 200px;gap:12px;align-items:center}
.match-prompt{padding:12px 14px;border:1px solid var(--hair2);border-radius:11px;background:var(--fill);
  font-size:14px;word-break:keep-all}
.match-row select{height:42px}
.match-disabled{opacity:.5;font-size:12px;color:var(--sub);align-self:center}

/* 네비게이터 레일 */
.rail{display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto}
.rail .card{padding:16px}
.rail h4{margin:0 0 12px;font-size:13px;font-weight:700}
.navgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.navcell{aspect-ratio:1;border-radius:8px;border:1px solid var(--hair2);background:var(--card);
  font-size:12px;font-weight:700;color:var(--sub);display:grid;place-items:center;cursor:pointer;position:relative}
.navcell:hover{border-color:var(--sub)}
.navcell.answered{background:var(--fill2);color:var(--text);border-color:var(--fill2)}
.navcell.current{background:var(--accent);color:var(--card);border-color:var(--accent)}
.navcell.flagged::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;
  border-radius:50%;background:var(--flag)}
.legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px;font-size:11px;color:var(--sub)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.exam-main{display:flex;flex-direction:column;min-height:0}
.exam-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px}
.exam-actions{flex:0 0 auto;display:flex;gap:10px;margin-top:14px;
  background:var(--bg);border-top:1px solid var(--hair);padding:14px 0 0}

/* ---------- 결과/리뷰 ---------- */
.result-hero{text-align:center;padding:34px 24px}
.result-hero .score{font-size:54px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--accent)}
.result-hero .score.red{color:var(--red)}
.result-hero .score small{font-size:24px;color:var(--sub);font-weight:700}
.result-hero .sub{color:var(--sub);margin-top:8px;font-size:14px}
.bars{display:flex;flex-direction:column;gap:12px}
.barrow{display:grid;grid-template-columns:140px 1fr 48px;gap:12px;align-items:center;font-size:13px}
.barrow .bt{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barrow .bar{height:8px;background:var(--fill2);border-radius:20px;overflow:hidden}
.barrow .bar > i{display:block;height:100%;background:var(--accent)}
.barrow .bar > i.low{background:var(--red)}
.barrow .bv{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

.review-q{padding:20px 22px;margin-bottom:14px}
.review-q.wrong{border-color:var(--red)}
.rq-head{display:flex;gap:10px;font-size:12px;color:var(--sub);font-weight:600;margin-bottom:10px}
.rq-verdict{margin-left:auto;font-weight:700}
.rq-verdict.ok{color:var(--ok)}
.rq-verdict.no{color:var(--red)}
.rq-verdict.ok::before{content:"✓ "}
.rq-verdict.no::before{content:"✗ "}
.rq-text{font-size:15px;font-weight:600;line-height:1.6;margin-bottom:14px;word-break:keep-all}
.ans-line{display:flex;gap:9px;padding:9px 13px;border-radius:9px;font-size:13.5px;margin-bottom:7px;align-items:flex-start}
.ans-line .lab{flex:0 0 64px;color:var(--sub);font-weight:600;font-size:12px}
.ans-line.correct{background:var(--ok-soft)}
.ans-line.mine-wrong{background:var(--red-soft)}
.ans-line.correct .lab::after{content:" ✓";color:var(--ok);font-weight:700}
.ans-line.mine-wrong .lab::after{content:" ✗";color:var(--red);font-weight:700}
.expl{margin-top:12px;padding:12px 14px;background:var(--fill);border-radius:10px;font-size:13.5px;color:var(--text)}
.expl .el{font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.note-line{margin-top:8px;font-size:12.5px;color:var(--sub)}
.match-review{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.match-review .mr{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  font-size:13px;padding:7px 11px;border-radius:8px;background:var(--fill)}
.match-review .mr .mk{font-weight:700}
.match-review .mr.no .mk{color:var(--red)}
.match-review .mr.ok .mk{color:var(--ok)}

/* 빈 상태 */
.empty-state{text-align:center;padding:60px 24px;color:var(--sub)}
.empty-state .big{font-size:40px;margin-bottom:12px;opacity:.5}

/* 토스트/모달 */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);
  color:var(--card);padding:12px 16px 14px 20px;border-radius:11px;font-size:13.5px;font-weight:600;z-index:100;
  box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;transition:opacity .2s,transform .2s;
  display:flex;align-items:center;gap:14px;overflow:hidden}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.toast-msg{flex:1}
.toast-x{background:none;border:none;color:inherit;opacity:.6;cursor:pointer;font-size:13px;line-height:1;padding:2px}
.toast-x:hover{opacity:1}
.toast-bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:currentColor;opacity:.4;
  transform-origin:left;transform:scaleX(1)}
.modal-back{position:fixed;inset:0;background:rgba(20,20,23,.34);display:grid;place-items:center;z-index:90;padding:20px}
.modal{background:var(--card);border-radius:16px;max-width:460px;width:100%;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal h3{margin:0 0 8px;font-size:18px}
.modal p{margin:0 0 20px;color:var(--sub);font-size:14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* 히스토리 */
.hist-row{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--hair);font-size:14px}
.hist-row:last-child{border-bottom:none}
.hist-row .hs{font-weight:700;font-variant-numeric:tabular-nums}
.spark{display:flex;align-items:flex-end;gap:4px;height:56px}
.spark .sb{flex:1;background:var(--fill2);border-radius:4px 4px 0 0;min-height:3px;position:relative}
.spark .sb.lowv{background:var(--red)}

/* 편집기 옵션행 */
.edit-opt{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.edit-opt input[type=text]{flex:1}
.edit-opt .pick{width:34px;height:34px;flex:0 0 auto;border-radius:8px;border:1.5px solid var(--hair2);
  background:var(--card);display:grid;place-items:center;font-size:13px;color:var(--sub);font-weight:700}
.edit-opt .pick.on{background:var(--ok);border-color:var(--ok);color:#fff}
.dropzone{border:1.6px dashed var(--hair2);border-radius:12px;padding:22px;text-align:center;color:var(--sub);
  font-size:13.5px;cursor:pointer}
.dropzone.over{border-color:var(--ink);background:var(--fill)}
.dropzone img{max-height:120px;border-radius:8px;margin-top:10px}

/* 과목 잠금 / 토큰 동기화 / 모바일 내비 */
.subject-card.locked{cursor:pointer}
.subject-card.locked:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.subject-card.locked .t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lockbadge{font-size:11px;font-weight:700;color:var(--sub);background:var(--fill2);border-radius:20px;padding:2px 9px}
.lockbadge.frozen{color:#fff;background:#BA7517}
.subject-card.frozen{cursor:default}
.subject-card.frozen:hover{transform:none;box-shadow:var(--shadow)}
.subject-card.frozen .t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.subject-card .lockcta{color:var(--text);font-weight:600}
.err-line{color:var(--red);font-size:13px;font-weight:600;margin-top:8px;min-height:18px}
.modal input[type=password]{margin-top:4px}
.token-box{display:flex;align-items:center;gap:10px;background:var(--fill);border:1px solid var(--hair2);
  border-radius:10px;padding:10px 12px;margin-top:4px}
.token-box code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
  word-break:break-all;color:var(--text)}
[hidden]{display:none !important}

/* 입장 게이트(토큰) */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative}
.gate-card{background:var(--card);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow);
  width:100%;max-width:360px;padding:30px 26px;text-align:center}
.gate-logo{font-weight:800;font-size:33px;letter-spacing:-.04em;color:var(--text);
  line-height:1;margin:0 auto 14px}
.gate-card h1{font-size:20px;font-weight:700;margin:0 0 4px;letter-spacing:-.02em}
.gate-card > p{color:var(--sub);font-size:14px;margin:0 0 16px}
.gate-admin-toggle{margin-top:18px;background:none;border:none;color:var(--sub);font-size:12.5px;
  font-weight:600;text-decoration:underline;cursor:pointer}
.gate-admin{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);text-align:left}
.gate-foot{position:absolute;top:18px;right:18px}

/* 관리자 대시보드(/admin) */
.admin-wrap{max-width:980px;margin:0 auto;padding:24px 20px 80px}
.admin-warn{background:var(--fill2);color:var(--sub);border:1px solid var(--hair2);border-radius:10px;
  padding:8px 14px;margin-bottom:14px;font-size:12.5px;font-weight:600}
.admin-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.admin-top b{font-size:17px;font-weight:700}
.admin-top .seg{margin-left:auto}
.atable{width:100%;border-collapse:collapse;font-size:13px}
.atable th{text-align:left;color:var(--sub);font-weight:600;font-size:11.5px;padding:8px 10px;border-bottom:1px solid var(--hair);white-space:nowrap}
.atable td{padding:9px 10px;border-bottom:1px solid var(--hair);vertical-align:middle}
.atable tr:last-child td{border-bottom:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.lbl{cursor:pointer;border-bottom:1px dashed var(--hair2)}
.warn-ip{color:var(--flag);font-weight:700}
.evt{font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px;background:var(--fill2);color:var(--sub)}
.evt-ok{color:var(--ok)}
.evt-bad{color:var(--red)}
.btn.xs{padding:3px 9px;font-size:11.5px;border-radius:7px}
.hint-inline{font-size:10.5px;font-weight:700;color:var(--sub);background:var(--fill2);border-radius:6px;padding:1px 6px;margin-left:2px}

/* 토큰 카드(이름·토큰·발급·폐기 / 마지막·해제·응시·IP) */
.tok-card{padding:11px 14px;border-bottom:1px solid var(--hair)}
.tok-card:last-child{border-bottom:none}
.tok-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tok-head .lbl{font-weight:700;font-size:14px}
.tok-cell{display:inline-flex;align-items:center;gap:6px;min-width:0}
.tok-val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--fill);border:1px solid var(--hair2);border-radius:7px;padding:3px 8px;
  max-width:340px;overflow-x:auto;white-space:nowrap}
.tok-date{font-size:12px;margin-left:auto}
.tok-head .danger{flex:0 0 auto}
.tok-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin-top:7px}
.tok-meta .warn-ip{font-style:normal}

/* 사이트 운영 탭 */
.site-server{display:flex;align-items:center;gap:20px;font-size:13px}
.site-server b{font-size:16px;font-weight:700}
.site-row{padding:12px 14px;border-bottom:1px solid var(--hair)}
.site-row:last-child{border-bottom:none}
.site-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.site-main{flex:1;min-width:160px}
.site-main b{font-size:14.5px;font-weight:700}
.site-main .muted{font-size:12px}
.site-pw{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.site-ctl{margin-top:8px;padding-top:8px;border-top:1px dashed var(--hair)}
.grp-lbl{font-size:11px;font-weight:700;color:var(--sub);margin-right:1px}
.btn.xs.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
/* 접근 상태 세그먼트(해제·잠금·동결·숨김 단일선택) — 사이트/토큰 공용 */
.seg-row{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.seg-lbl{font-size:12px;font-weight:600;color:var(--sub);width:74px;flex:0 0 auto}
.seg-ctl{display:inline-flex;border:1px solid var(--hair2);border-radius:9px;overflow:hidden}
.seg-ctl .seg{padding:6px 13px;border:none;border-right:1px solid var(--hair);background:var(--card);font-size:12.5px;font-weight:600;color:var(--sub);cursor:pointer;transition:.1s}
.seg-ctl .seg:last-child{border-right:none}
.seg-ctl .seg:hover{background:var(--fill)}
.seg-ctl .seg.on{color:#fff}
.seg-ctl .seg.s-grant.on{background:#1F9E6A}
.seg-ctl .seg.s-lock.on{background:#3047C0}
.seg-ctl .seg.s-freeze.on{background:#BA7517}
.seg-ctl .seg.s-hide.on{background:#A32D2D}
.seg-ctl .seg.s-default.on{background:var(--ink);color:var(--card)}
.tok-acc-row{display:flex;align-items:center;gap:10px;padding:4px 0}
.tok-acc-name{font-size:12.5px;font-weight:600;width:96px;flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-row{display:flex;gap:12px;align-items:center;padding:3px 2px;font-size:12.5px}
/* 접속자 탭 — 토큰별 펼침 행 */
.vis-row{cursor:pointer}
.vis-row:hover{background:var(--fill)}
.vis-caret{display:inline-block;width:1.1em;color:var(--sub);transition:transform .15s}
.vis-row.open .vis-caret{transform:rotate(90deg)}
.vis-detail > td{padding:0;background:var(--fill)}
.vis-ips{display:flex;flex-direction:column;gap:3px;padding:8px 14px 10px 30px}
.vis-tok{margin-right:6px}
/* 과목 비밀번호 인라인 편집 */
.pw-edit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 2px;padding:10px 12px;background:var(--fill);border-radius:10px}
.pw-input{height:34px;padding:0 10px;font-size:13px;flex:1;min-width:160px;border:1px solid var(--hair2);border-radius:8px;background:var(--card);color:var(--text)}
.pw-reset{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--sub);font-weight:600;white-space:nowrap}
.pw-edit-act{display:inline-flex;gap:8px;margin-left:auto}

/* 토글 스위치 + 설정 행 */
.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--hair)}
.cfg-row:last-child{border-bottom:none}
.cfg-row .muted{font-size:12px;font-weight:400}
.sw{position:relative;width:42px;height:24px;border-radius:14px;border:none;background:var(--hair2);cursor:pointer;flex:0 0 auto;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw.on{background:var(--accent)}
.sw.on::after{left:21px}

/* 토큰 그룹 헤더 + 비활성 카드 + 토큰별 과목권한 */
.tok-group{font-size:12px;font-weight:700;color:var(--sub);padding:12px 14px 6px;letter-spacing:.02em}
.tok-card.inactive{opacity:.55}
.tok-grants{padding:8px 2px 2px}
.tok-grants .grp-lbl{display:block;margin-bottom:6px}

/* 게이트 '또는' 구분선 */
.gate-or{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:12px;margin:16px 0 10px}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--hair)}

.topbar{display:none;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid var(--hair);background:var(--card);position:sticky;top:0;z-index:10}
.topbar .brand{padding:0}
.iconbtn{background:var(--card);border:1px solid var(--hair2);border-radius:9px;width:38px;height:38px;
  font-size:16px;color:var(--text);display:grid;place-items:center}
.bottomnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--card);
  border-top:1px solid var(--hair);padding-bottom:env(safe-area-inset-bottom)}
.tabitem{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;
  color:var(--sub);font-size:11px;font-weight:600;padding:8px 0 7px;position:relative}
.tabitem.active{color:var(--accent)}
.tabitem .ic{font-size:18px;line-height:1}
.tbadge{position:absolute;top:4px;left:calc(50% + 6px);background:var(--red);color:#fff;font-size:9px;
  font-weight:700;border-radius:10px;padding:0 5px;line-height:1.5}

@media (max-width:880px){
  .exam-screen{height:auto;overflow:visible}
  .exam-wrap{grid-template-columns:1fr;padding:18px 16px 80px;overflow:visible;min-height:0}
  .exam-scroll{overflow:visible;min-height:0}
  .rail{overflow:visible;min-height:0}
  .exam-main{min-height:0}
  .exam-top{position:sticky;top:0;padding:12px 16px;gap:10px}
  .grid.cols3{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .sidebar{display:none}
  .topbar{display:flex}
  .bottomnav{display:flex}
  .content{padding:24px 16px 92px}
  .grid.cols2,.grid.cols3{grid-template-columns:1fr}
  .exam-top{flex-wrap:wrap}
}