/* ===== 0. CSS =====
   화면 UI 전용 스타일. 성적표(미리보기·인쇄) 스타일은 아래 0b 에 따로 있다.
   색: 강조 파랑 #3b6fd6, 표 헤더 연보라 #eceaf6, 경고 주황 #d97706.
   P5 에서 더한 것: 키보드 포커스 표시(:focus-visible), 시작 안내 배너·빈 상태 안내,
   1024px 반응형(탭1·탭3 가로 스크롤 없이 — 성적표 미리보기만 A4 고정폭 유지).
*/
:root{
  --line:#d7d7de; --head:#eceaf6; --blue:#3b6fd6; --wine:#8b1e3f;
  --warn:#d97706; --bad:#c62828; --ok:#1b7a3e; --muted:#6b6b76;
  --auto:#fff6c9; --miss:#ffd9d9;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Malgun Gothic","맑은 고딕",sans-serif;font-size:13px;color:#222;background:#f4f4f7}
button{font-family:inherit;font-size:13px;padding:5px 10px;border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer}
button:hover{background:#f0f0f5}
button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
button.primary:hover{filter:brightness(1.08)}
button.danger{color:var(--bad);border-color:#e6b8b8}
button:disabled,button:disabled:hover{background:#f4f4f7;color:#a6a6b0;border-color:#e4e4ea;cursor:default}
input,select,textarea{font-family:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--line);border-radius:3px;background:#fff;color:#222}
input:focus,select:focus,textarea:focus{outline:2px solid #b9cdf5;outline-offset:-1px}

/* 상단 바 */
#topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 14px;height:46px}
#brand{font-weight:700;font-size:15px;color:var(--wine);border-left:4px solid var(--wine);padding-left:8px}
/* 창이 좁아도 탭 글자가 세로로 쪼개지면 안 된다(§4 공통). 탭바만 가로로 스크롤한다. */
#brand{flex:0 0 auto;white-space:nowrap}
#tabbar{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
#tabbar::-webkit-scrollbar{height:5px}
#tabbar::-webkit-scrollbar-thumb{background:#c9c9d4;border-radius:3px}
.tab{padding:6px 14px;border:1px solid transparent;border-radius:4px 4px 0 0;background:none;color:#555;white-space:nowrap;flex:0 0 auto}
.tab.on{background:#eef3fd;border-color:#cfdcf6;color:var(--blue);font-weight:700}
#savedAt{color:var(--muted);font-size:12px;min-width:96px;text-align:right;flex:0 0 auto;white-space:nowrap}
#settingsWrap{position:relative;flex:0 0 auto}
#topbar button{white-space:nowrap}
#settingsPanel{position:absolute;right:0;top:34px;width:250px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.13);padding:12px;display:none;z-index:30}
#settingsPanel.open{display:block}
#settingsPanel h4{margin:0 0 8px;font-size:13px;color:var(--wine)}
#settingsPanel .row{margin-bottom:8px}
#settingsPanel button{width:100%;margin-bottom:5px}

/* 레이아웃 */
#view{padding:14px;max-width:1500px;margin:0 auto}
.split{display:flex;gap:14px;align-items:flex-start}
.pane{background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px}
.pane.left{width:290px;flex:0 0 290px}
.pane.right{flex:1;min-width:0}
h3.sec{margin:0 0 10px;font-size:13px;color:var(--wine);border-left:3px solid var(--wine);padding-left:7px}
.muted{color:var(--muted)}
.empty{padding:36px 12px;text-align:center;color:var(--muted);line-height:1.7}

/* 시험 목록 */
.list{list-style:none;margin:0;padding:0}
.list li{border:1px solid var(--line);border-radius:5px;padding:7px 9px;margin-bottom:6px;cursor:pointer}
.list li:hover{background:#f6f8fd}
.list li.on{background:#eef3fd;border-color:#a9c2f0}
.list li .t{font-weight:700;word-break:break-all}
.list li .m{color:var(--muted);font-size:11.5px;margin-top:2px}

/* 드롭존 */
#drop,#omrDrop{border:2px dashed #b9c4d8;border-radius:6px;padding:16px 10px;text-align:center;color:var(--muted);margin-bottom:10px;line-height:1.7}
#drop.hot,#omrDrop.hot{background:#eef3fd;border-color:var(--blue);color:var(--blue)}

/* 폼 */
.form{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.field{display:flex;flex-direction:column;gap:3px}
.field label{font-size:11.5px;color:var(--muted)}
.field.wide{flex:1;min-width:240px}
.field input{width:100%}

/* 문항표 */
table.q{border-collapse:collapse;width:100%}
table.q th,table.q td{border:1px solid var(--line);padding:3px 5px;text-align:center}
table.q th{background:var(--head);font-weight:700;font-size:12px}
table.q td.left{text-align:left}
table.q input,table.q select{width:100%;border:1px solid transparent;background:transparent}
table.q input:hover,table.q select:hover{border-color:var(--line)}
table.q td.auto input,table.q td.auto{background:var(--auto)}
table.q td.miss input,table.q td.miss{background:var(--miss)}
/* 영역을 규칙으로 가리지 못해 앞 문항 값을 물려받은 문항 표시(설계 §3.4-d · H13) */
table.q td.left{position:relative}
table.q td.left .qmark{position:absolute;right:3px;top:2px;font-weight:700;color:var(--warn);cursor:help}
.ch{display:flex;gap:2px;justify-content:center}
.ch b{display:inline-block;width:21px;height:21px;line-height:19px;border:1px solid var(--line);border-radius:50%;cursor:pointer;font-weight:400;background:#fff}
.ch b:hover{background:#eef3fd}
.ch b.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.sumbar{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.sumbar .sum{font-weight:700}
.sumbar .sum.bad{color:var(--warn)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
.note{font-size:11.5px;color:var(--muted);margin-top:4px}
.banner{padding:8px 10px;border-radius:5px;margin-bottom:10px;line-height:1.6}
.banner.info{background:#eef3fd;border:1px solid #cfdcf6}
.banner.warn{background:#fff7e6;border:1px solid #f0d9a8}
.banner.err{background:#ffecec;border:1px solid #f0bcbc;color:#8a1c1c}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#333;color:#fff;padding:9px 16px;border-radius:20px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:60;
       max-width:min(660px,92vw);white-space:pre-line;line-height:1.6;text-align:center}
#toast.on{opacity:.94}
#toast.err{background:#8a1c1c}

/* 키보드 포커스 표시 (§4 접근성). 마우스 클릭에는 테두리가 생기지 않도록 :focus-visible 만 쓴다. */
button:focus-visible,a:focus-visible,summary:focus-visible,
.list li:focus-visible,label:focus-visible,.ch b:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
#tabbar .tab:focus-visible{outline-offset:-2px}

/* 시작 안내 배너(첫 방문) · 빈 상태의 "다음에 할 일" 안내 */
.guide{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.guide .gtext{flex:1 1 320px;min-width:0;line-height:1.7}
.guide .gtext b{color:var(--wine)}
.guide .gbtns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.guide .gclose{background:none;border:1px solid transparent;color:var(--muted);padding:2px 8px}
.guide .gclose:hover{background:#fff;border-color:var(--line)}
.flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:0 0 10px;color:var(--muted);font-size:12px}
.flow .st{padding:2px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;white-space:nowrap}
.flow .st.on{background:#eef3fd;border-color:#a9c2f0;color:var(--blue);font-weight:700}
.flow .st.done{color:var(--ok);border-color:#bfe3cd}
.flow .ar{color:#b9b9c4}
.empty .next{margin-top:10px;font-weight:700;color:#333}
.empty .acts{margin-top:12px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* 반응형 — 데스크톱 우선, 태블릿(1024px)에서 깨지지 않게(§4 P5).
   탭1·탭3 은 좌우 2단이 좁아지면 세로로 쌓고, 좌측 목록을 전폭으로 편다.
   성적표 미리보기(.rc-sheet)는 A4 고정폭이므로 여기서 건드리지 않는다 — 작은 화면에서는 가로 스크롤을 허용한다. */
@media (max-width:1180px){
  .pane.left{width:250px;flex:0 0 250px}
  #scanSide{width:360px;flex:0 0 360px}
  table.q th,table.q td{padding:3px 3px}
  .ch b{width:19px;height:19px;line-height:17px}
}
@media (max-width:900px){
  .split{flex-wrap:wrap}
  .pane.left{width:100%;flex:1 1 100%}
  .pane.right{flex:1 1 100%}
  #scanWrap{flex-wrap:wrap}
  #scanSide{width:100%;flex:1 1 100%;max-height:none}
}

/* 학생표 (탭2) — 셀에 바로 타이핑하는 인라인 편집 */
table.st{border-collapse:collapse;width:100%}
table.st th,table.st td{border:1px solid var(--line);padding:3px 5px}
table.st th{background:var(--head);font-weight:700;font-size:12px}
table.st input{width:100%;border:1px solid transparent;background:transparent}
table.st input:hover{border-color:var(--line)}
table.st td.num{text-align:center;color:var(--muted);width:34px}
table.st td.del{width:34px;text-align:center}
table.st button.x{padding:1px 6px;color:var(--bad);border-color:#e6b8b8;line-height:1.4}

/* OMR (탭3) */
#omrGrid{outline:none}
#omrGrid:focus{box-shadow:0 0 0 2px #b9cdf5 inset;border-radius:4px}
table.omr{border-collapse:collapse;width:100%}
table.omr th,table.omr td{border:1px solid var(--line);padding:2px 5px;text-align:center}
table.omr th{background:var(--head);font-weight:700;font-size:12px}
table.omr tr.cur td{background:#eef3fd}
table.omr td.no{width:44px;font-weight:700}
table.omr td.key{width:70px;color:var(--muted);font-size:11.5px}
table.omr td.res{width:44px;font-weight:700;font-size:15px}
table.omr td.res.ok{color:var(--ok)}
table.omr td.res.no{color:var(--bad)}
table.omr input.sa{width:96px;text-align:center;border:1px solid var(--line);background:#fff}
.cursor{color:var(--blue);font-weight:700}
.keyhelp{font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:6px}
.scorebar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.scorebar .big{font-size:16px;font-weight:700}
/* 좌측 학생 목록의 진행 표시 */
.list li .p{float:right;font-size:11.5px;padding:0 5px;border-radius:9px;background:#eee;color:#555}
.list li .p.done{background:#e2f4e8;color:var(--ok)}
.list li .p.part{background:#fdf1dd;color:var(--warn)}
.list li .p.none{background:#eee;color:var(--muted)}

/* 스캔 OMR 검토 화면 (§9.5) — 좌: 스캔 이미지 + 오버레이, 우: 이름·매칭·OMR 표 */
#scanWrap{display:flex;gap:14px;align-items:flex-start}
#scanImgBox{flex:1 1 auto;min-width:0;position:relative}
#scanImgBox img{display:block;width:100%;border:1px solid var(--line);border-radius:4px;background:#fff}
#scanImgBox .ov{position:absolute;border:2px solid var(--ok);border-radius:50%;pointer-events:none;box-sizing:border-box}
#scanImgBox .ov.warn{border-color:var(--warn);border-width:3px}
#scanImgBox .fid{position:absolute;border:2px solid var(--blue);box-sizing:border-box;pointer-events:none}
#scanSide{width:420px;flex:0 0 420px;max-height:78vh;overflow:auto}
.scanstat{display:inline-block;padding:1px 9px;border-radius:9px;font-size:11.5px;white-space:nowrap}
.scanstat.ok{background:#e2f4e8;color:var(--ok)}
.scanstat.warn{background:#fdf1dd;color:var(--warn)}
.scanstat.bad{background:#ffecec;color:var(--bad)}
.scanstat.skip{background:#eee;color:var(--muted)}
#scanPages{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
#scanPages button{padding:2px 9px;font-size:11.5px;min-width:30px}
#scanPages button.on{background:var(--blue);border-color:var(--blue);color:#fff}
#scanPages button.bad{color:var(--bad);border-color:#e6b8b8}
#scanPages button.warn{color:var(--warn);border-color:#f0d9a8}
#scanPages button.skip{color:#a6a6b0;text-decoration:line-through}
.scanbar{height:8px;background:#e9e9ef;border-radius:5px;overflow:hidden;margin:10px 0}
.scanbar > i{display:block;height:100%;background:var(--blue);transition:width .2s}
.scanflags{font-size:11.5px;color:var(--warn);line-height:1.6;margin:4px 0}

/* 탭4 성적표 조작 영역 (인쇄에서는 .no-print 로 사라진다) */
#reportPickList{display:flex;flex-wrap:wrap;gap:4px 14px;max-height:170px;overflow:auto;padding:4px 2px}
#reportPickList label{display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;padding:1px 3px;border-radius:3px}
#reportPickList label:hover{background:#f2f5fc}
#reportPickList label.off{color:#a6a6b0;cursor:default}
#reportPickList label.off:hover{background:none}
#reportNotice{width:100%;min-height:52px;resize:vertical;line-height:1.5}

/* ===== 0b. 성적표 — 새 양식 (설계.md §5.4 · 승인 목업 `테스트/mock/성적표_새디자인.html`) =====
   **미리보기와 인쇄가 같은 규칙을 쓴다.** 화면 카드(.rc-sheet)만 A4 종이처럼 보이게 감싸고,
   실제 내용(.rc-page)은 A4 인쇄 영역과 같은 **186×273mm 고정** — 그래서 화면에서 한 장에 들어가면 인쇄도 한 장이다.
   클래스 이름·치수·색은 목업 그대로이고, 사이트·도구 CSS 와 부딪히지 않도록 전부 `.rc-page` 안으로 넣었다.
   (오퍼레이터가 임시로 만들었던 report-card.css 는 이 절에 흡수하고 파일은 지웠다.)
   색: 자주 #9b2f42 · 먹 #1a1d23 · 회청 #8a94a6(응시생 평균) · 선 #e3e0da · 바탕 #faf9f7 · ○ #2f7d4f · ✕ #c2372c.
   글꼴은 Pretendard(성적표.html·/app/·/my/ 에 link 있음), 숫자는 `tnum` 으로 폭을 고정한다.
   **반응형 규칙(위 0. CSS)의 예외**: 여기 폭은 종이 크기라서 화면 폭에 따라 줄이지 않는다.
   응시 인원은 어디에도 표시하지 않는다(§5.4).
*/
#reportOut{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:14px}
.rc-sheet{width:210mm;height:297mm;padding:12mm;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.14);
  overflow:hidden;flex:0 0 auto}
.rc-page{
  --rc-pt:#9b2f42;--rc-ink:#1a1d23;--rc-mut:#6b6f76;--rc-mut2:#9a9ea5;--rc-line:#e3e0da;
  --rc-bg:#faf9f7;--rc-avg:#8a94a6;--rc-ok:#2f7d4f;--rc-ng:#c2372c;
  --rc-qh:25px;                 /* 채점표 행 높이 — 문항 수에 따라 renderPage1 이 바꾼다(§5.4) */
  width:186mm;height:273mm;font-size:12px;line-height:1.35;color:var(--rc-ink);
  font-family:"Pretendard Variable",Pretendard,"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.rc-page *{box-sizing:border-box}
/* 세로 flex 안에서 조각이 줄어들면 넘침이 눈에 안 띄게 뭉개진다 — 크기는 내용 그대로 두고
   바닥(.ft)만 margin-top:auto 로 아래에 붙인다. */
.rc-page > *{flex:0 0 auto}

/* 머리글 — kicker + 시험 제목 + 반 / 오른쪽 브랜드·시험일, 아래 먹색 2px 선 */
.rc-page .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  padding-bottom:8px;border-bottom:2px solid var(--rc-ink)}
.rc-page .hd .kick{font-size:9.5px;letter-spacing:1.6px;color:var(--rc-pt);font-weight:700;margin-bottom:3px}
.rc-page .hd .ttl{font-size:20px;font-weight:800;letter-spacing:-.4px;line-height:1.15}
.rc-page .hd .ttl small{font-size:12px;font-weight:600;color:var(--rc-mut);margin-left:6px;letter-spacing:0}
.rc-page .hd .brand{text-align:right;color:var(--rc-mut);font-size:10px;line-height:1.5;white-space:nowrap}
.rc-page .hd .brand b{display:block;color:var(--rc-ink);font-size:12px;font-weight:700}
/* 여러 반 합산 통계(§16.3 H20) — **시험일 옆** 작은 글. 줄을 새로 만들지 않아 머리글 높이가 그대로다. */
.rc-page .hd .brand .pool{color:var(--rc-pt);font-weight:700;font-size:9.5px;letter-spacing:.2px;margin-left:6px}

/* 학생 줄 */
.rc-page .stu{display:flex;align-items:baseline;gap:14px;padding:12px 0 10px;border-bottom:1px solid var(--rc-line)}
.rc-page .stu .nm{font-size:25px;font-weight:800;letter-spacing:-.5px}
.rc-page .stu .meta{display:flex;gap:14px;color:var(--rc-mut);font-size:11px}
.rc-page .stu .meta b{color:var(--rc-ink);font-weight:600;margin-left:4px}
.rc-page .stu .date{margin-left:auto;color:var(--rc-mut);font-size:11px;white-space:nowrap}

/* 점수 카드 5개 — 첫 칸(내 점수)만 자주 바탕 */
.rc-page .cards{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;gap:8px;margin-top:12px}
.rc-page .card{background:var(--rc-bg);border:1px solid var(--rc-line);border-radius:7px;padding:11px 13px 10px;min-height:66px}
.rc-page .card .lb{font-size:10.5px;color:var(--rc-mut);font-weight:600;letter-spacing:.2px}
.rc-page .card .v{font-size:23px;font-weight:800;letter-spacing:-.5px;margin-top:2px;font-feature-settings:"tnum" 1}
.rc-page .card .v small{font-size:10.5px;font-weight:600;color:var(--rc-mut);margin-left:2px;letter-spacing:0}
.rc-page .card.me{background:var(--rc-pt);border-color:var(--rc-pt);color:#fff}
.rc-page .card.me .lb{color:rgba(255,255,255,.75)}
.rc-page .card.me .v{font-size:34px;line-height:1.05}
.rc-page .card.me .v small{color:rgba(255,255,255,.75)}
.rc-page .card .sub{font-size:10px;color:var(--rc-mut);margin-top:1px}

/* 공지 — 내용이 없으면 상자를 아예 만들지 않는다(§5.4) */
.rc-page .notice{margin-top:12px;display:flex;gap:8px;align-items:flex-start;background:var(--rc-bg);
  border-left:3px solid var(--rc-pt);padding:6px 9px;border-radius:0 4px 4px 0;min-height:40px}
.rc-page .notice .lb{flex:0 0 auto;font-size:9.5px;font-weight:700;color:var(--rc-pt);letter-spacing:.3px;padding-top:1px}
.rc-page .notice .tx{color:#3a3e45;white-space:pre-wrap;font-size:11.5px;word-break:break-word;overflow:hidden}

/* 섹션 제목 + 오른쪽 범례 */
.rc-page .sec{display:flex;align-items:baseline;gap:8px;margin:18px 0 8px}
.rc-page .sec h3{margin:0;font-size:14px;font-weight:800;letter-spacing:-.2px}
.rc-page .sec > span{font-size:9.5px;color:var(--rc-mut2)}
.rc-page .sec .lg{margin-left:auto;display:flex;gap:10px;font-size:9px;color:var(--rc-mut);white-space:nowrap}
.rc-page .sec .lg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}

/* 영역별 성취도 — 2열 가로 막대 목록 */
.rc-page .areas{display:grid;grid-template-columns:1fr 1fr;column-gap:10mm;row-gap:8px}
.rc-page .ar{display:grid;grid-template-columns:104px 1fr 40px;column-gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid #f0eee9}
.rc-page .ar .n{font-size:11.5px;font-weight:700;line-height:1.2;overflow:hidden}
.rc-page .ar .n small{display:block;font-weight:500;color:var(--rc-mut2);font-size:9.5px;margin-top:1px}
.rc-page .ar .bars{display:flex;flex-direction:column;gap:3px}
.rc-page .ar .b{height:8px;border-radius:3px;background:#efede8;position:relative}
.rc-page .ar .b i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.rc-page .ar .b.me i{background:var(--rc-pt)}
.rc-page .ar .b.av i{background:var(--rc-avg)}
.rc-page .ar .p{text-align:right;font-feature-settings:"tnum" 1;line-height:1.1}
.rc-page .ar .p b{display:block;font-size:14px;color:var(--rc-pt)}
.rc-page .ar .p small{color:var(--rc-mut);font-size:9.5px}

/* 문항 채점표 — 2단, 세로선 없음, 짝수 행 줄무늬 */
.rc-page .qs{display:grid;grid-template-columns:1fr 1fr;column-gap:8mm}
.rc-page table.q{width:100%;border-collapse:collapse;table-layout:fixed;font-size:10.5px;font-feature-settings:"tnum" 1}
.rc-page table.q th{font-size:9.5px;color:var(--rc-mut);font-weight:600;text-align:center;padding:5px 2px;
  border-bottom:1px solid #c9c5bd;background:none}
.rc-page table.q td{padding:2px 2px;height:var(--rc-qh);text-align:center;border-bottom:1px solid #efede8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-page table.q tr:nth-child(even) td{background:#fbfaf8}
.rc-page table.q td.no{color:var(--rc-mut2)}
.rc-page table.q td.at{text-align:left;font-size:9px;color:#5a5e66;letter-spacing:-.2px}
.rc-page table.q td.ok{color:var(--rc-ok);font-weight:800}
.rc-page table.q td.ng{color:var(--rc-ng);font-weight:800}
.rc-page table.q td.ng small{font-weight:600;font-size:8px;margin-left:1px}
.rc-page table.q td.wr{text-align:left;padding-left:4px}
.rc-page table.q td.wr .bar{display:inline-block;vertical-align:middle;height:6px;width:30px;background:#efede8;
  border-radius:2px;margin-right:4px;position:relative;top:-1px}
.rc-page table.q td.wr .bar i{display:block;height:100%;background:#d3a6a6;border-radius:2px}
.rc-page table.q td.wr span.n{font-size:9.5px;color:var(--rc-mut)}

/* 추이 그래프 틀 (1쪽 미니 · 2쪽 큰 것) */
.rc-page .trend{border:1px solid var(--rc-line);border-radius:7px;padding:12px 8px 6px;background:#fff}
.rc-page .trend.mini{padding:10px 8px 4px}
.rc-page .trend svg{display:block;width:100%;height:auto}

/* 바닥 — margin-top:auto 로 종이 아래에 붙는다 */
.rc-page .ft{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding-top:7px;border-top:1px solid var(--rc-line);font-size:9px;color:var(--rc-mut2)}
.rc-page .ft b{color:var(--rc-mut);font-weight:600}
/* 브랜드 · 안내 문구 사이를 넉넉히(대표 2026-09-06) */
.rc-page .ft .ftl{display:flex;align-items:center;gap:22px;min-width:0}
.rc-page .ft .ftm{white-space:nowrap}

/* 2쪽 — 작은 머리글 · 요약 칩 · 회차별 기록 표 */
.rc-page .hd.sm{padding-bottom:6px;border-bottom-width:1px;border-color:var(--rc-line)}
.rc-page .chips{display:flex;gap:6px;margin-top:10px}
.rc-page .chip{flex:1;background:var(--rc-bg);border:1px solid var(--rc-line);border-radius:7px;padding:11px 13px}
.rc-page .chip .lb{font-size:10.5px;color:var(--rc-mut);font-weight:600;white-space:nowrap}
.rc-page .chip .v{font-size:21px;font-weight:800;letter-spacing:-.4px;font-feature-settings:"tnum" 1}
.rc-page .chip .v small{font-size:10px;color:var(--rc-mut);font-weight:600}
.rc-page .chip .v.up{color:var(--rc-ok)}        /* + 는 녹색 */
.rc-page .chip .v.dn{color:var(--rc-ng)}        /* − 는 빨강 */
.rc-page .chip .v.ze{color:var(--rc-mut)}       /* 0 은 회색 */
.rc-page table.h{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11.5px;font-feature-settings:"tnum" 1}
.rc-page table.h th{font-size:10px;color:var(--rc-mut);font-weight:600;padding:7px 4px;
  border-bottom:1px solid #c9c5bd;text-align:center}
.rc-page table.h td{padding:0 4px;height:30px;text-align:center;border-bottom:1px solid #efede8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-page table.h tr:nth-child(even) td{background:#fbfaf8}
.rc-page table.h td.l{text-align:left}
.rc-page table.h td.rd{color:var(--rc-mut2)}
.rc-page table.h td .rn{display:inline-block;min-width:16px;height:16px;line-height:16px;border-radius:8px;
  background:#f0eee9;color:var(--rc-mut);font-size:9px;font-weight:700}
.rc-page table.h tr.cur td{background:#fbf3f4}
.rc-page table.h tr.cur td .rn{background:var(--rc-pt);color:#fff}
.rc-page table.h td b.me{color:var(--rc-pt)}
.rc-page table.h td span.pc{color:var(--rc-mut2)}

/* 점수만 기록 회차(§15.3) · 이력 없음 — 점선 안내 한 줄 */
.rc-page .rc-scoreonly,.rc-page .rc-nohist{margin-top:14px;padding:14px;text-align:center;
  border:1px dashed #d9d5ce;border-radius:6px;background:var(--rc-bg);color:var(--rc-mut)}

/* 40문항(§9 통일 양식)처럼 빽빽한 1쪽 — 여백만 줄인다. 글자 크기는 그대로 둔다. */
.rc-page.dense .sec{margin:11px 0 6px}
.rc-page.dense .cards{margin-top:9px}
.rc-page.dense .card{min-height:58px;padding:8px 12px 7px}
.rc-page.dense .card.me .v{font-size:30px}
.rc-page.dense .notice{margin-top:9px;min-height:0}
.rc-page.dense .stu{padding:9px 0 8px}
.rc-page.dense .ar{padding:5px 0}
.rc-page.dense .trend.mini{padding:6px 8px 2px}

/* 도구 툴바의 체크박스 라벨 (탭3 "점수만 기록" 등) — 성적표가 아니라 화면 UI 규칙이다. */
label.chk{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;cursor:pointer}
label.chk input{margin:0}

/* 인쇄: 앱 UI 는 모두 숨기고 성적표만. 학생 한 명 = 두 장(1·2페이지, §4 탭4). */
@media print{
  /* 여백 0 — 브라우저가 여백에 찍는 머리글(주소)·바닥글(쪽수)이 애초에 나오지 않게 한다(대표 2026-09-06).
     종이 여백 12mm 는 .rc-sheet 의 padding 으로 대신 준다. */
  @page{size:A4;margin:0}
  body{background:#fff}
  #topbar,#toast,.no-print,.mdl-back{display:none !important}
  #view{padding:0;max-width:none;margin:0}
  #reportOut{display:block;margin:0;gap:0}
  /* 카드가 곧 종이 한 장: 210×296.5mm(0.5mm 는 반올림으로 빈 장이 생기지 않게 접어 둔 것), 안쪽 여백 12mm */
  .rc-sheet{width:210mm;height:296.5mm;box-sizing:border-box;padding:12mm;margin:0;box-shadow:none;overflow:hidden;
    page-break-after:always;break-after:page}
  .rc-sheet:last-child{page-break-after:auto;break-after:auto}
  /* 273mm 를 픽셀로 옮길 때 소수점이 올라가면 빈 장이 하나 더 생긴다 — 0.5mm 만 접어 둔다. */
  .rc-page{height:272.5mm;page-break-inside:avoid;break-inside:avoid}
}

/* ===== 0c. H4 — 학생 관리 확장 · 연결 코드 · 홈페이지 발행 =====
   설계.md §4 탭2 확장 / §12.9.1. 위 규칙은 한 줄도 고치지 않고 여기에만 더한다. */

/* 반 카드 요약 — "동산고 · 2학년 · 27명 · 대수" */
.clssum{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  padding:7px 10px;margin:0 0 10px;border:1px solid var(--line);border-radius:5px;background:#fafaff}
.clssum b{font-size:14px}
.clssum span{color:var(--muted)}

/* 학생표가 넓어졌다(H5 에서 생일 열이 붙어 10열). 학교·학년·메모 세 열은 좁은 화면에서 접고, .opt-on 이면 편다. */
table.st td.code{white-space:nowrap;text-align:center}
table.st td.code code{font-family:Consolas,"Courier New",monospace;font-size:13px;font-weight:700;
  letter-spacing:1px;margin-right:6px}
table.st button.tiny{padding:1px 6px;font-size:11.5px;line-height:1.5}
table.st select{width:100%;padding:3px 4px}
@media (max-width:1280px){
  table.st th.opt,table.st td.opt{display:none}
  table.st.opt-on th.opt,table.st.opt-on td.opt{display:table-cell}
}

/* --- H5 생일·동명이인 (설계.md §4 탭2 확장 2 · §9.2 · §9.5) ------------------- */

/* 생일 칸. 범위 밖(월 1~12 · 일 1~31)이면 저장하지 않고 .bad 로 빨갛게 둔다. */
table.st td.bir{white-space:nowrap}
input.bir{text-align:center;font-variant-numeric:tabular-nums}
input.bir.bad{background:var(--miss);border-color:var(--bad)}

/* 이름 칸 안에 배지를 함께 놓는다(입력칸은 남는 너비를 쓰고 배지는 줄지 않는다). */
table.st td .cellflex{display:flex;gap:4px;align-items:center}
table.st td .cellflex input{flex:1;min-width:0}
.dupbadge{flex:none;padding:0 5px;border-radius:9px;font-size:10.5px;font-weight:700;
  white-space:nowrap;cursor:help;background:#eceaf6;color:#4a3f8f;border:1px solid #d5cfee}
.dupbadge.warn{background:#fdf1dd;color:var(--warn);border-color:#f0d9a8}

/* 열이 늘어난 학생표는 좁은 창에서 눌리는 대신 가로로 스크롤한다(연락처가 세로로 쪼개지지 않게).
   H6 에서 `수강 반` 열이 하나 더 붙어 min-width 를 키웠다. 수강 반 팝오버가 표 밖으로 나가야 하므로
   overflow-y 는 visible 그대로 둔다(가로만 잘린다). */
.st-scroll{overflow-x:auto;overflow-y:visible}
table.st{min-width:1052px}          /* H16 에서 표기 칸에 [성적] 버튼이 붙어 52px 늘었다 */
table.st.opt-on{min-width:1412px}
table.st th,table.st td{white-space:nowrap}

/* --- H6 학생 중심 모델 (설계.md §14.2 · §14.4) -------------------------------- */

/* 탭2 위쪽 보기 토글 — [반 보기] / [전체 학생] */
.vtabs{display:flex;gap:6px;align-items:center;margin:0 0 10px}
.vtabs .vtab{padding:5px 14px;border-radius:999px;font-weight:700}
.vtabs .vtab.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.vtabs .note{margin-left:6px}

/* (H11 의 .vtabs.subj 과목 서브탭은 H18 시험 트리로 대체되어 삭제) */

/* 수강 반 칩 — 누르면 체크박스 팝오버가 열린다 */
table.st td.chips{position:relative;white-space:normal}
button.chipbtn{display:flex;flex-wrap:wrap;gap:3px;width:100%;text-align:left;
  padding:3px 5px;background:transparent;border:1px solid transparent}
button.chipbtn:hover{border-color:var(--line);background:#fff}
.chip{display:inline-block;padding:0 6px;border-radius:9px;font-size:11px;line-height:17px;
  background:#eef2fb;color:#2c4a86;border:1px solid #d3ddf1;white-space:nowrap}
.chip.off{background:#f3f3f5;color:var(--muted);border-color:var(--line)}
.chips-pop{position:absolute;z-index:40;top:100%;right:0;min-width:230px;max-height:280px;overflow:auto;
  padding:8px 10px;background:#fff;border:1px solid #bcbcc8;border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.14)}
.chips-pop.up{top:auto;bottom:100%}
.chips-pop .ttl{font-weight:700;margin-bottom:6px}
.chips-pop label{display:flex;gap:6px;align-items:center;padding:3px 0;white-space:nowrap}
.chips-pop label .m{color:var(--muted);font-size:11.5px}

/* [학생 추가] 의 검색 결과 목록 */
ul.findlist{list-style:none;margin:4px 0 0;padding:0;max-height:220px;overflow:auto}
ul.findlist li{display:flex;gap:8px;align-items:center;padding:4px 2px;border-top:1px solid var(--line)}
ul.findlist li .t{font-weight:700}
ul.findlist li .m{color:var(--muted);font-size:12px;flex:1}
ul.findlist li .m.done{color:var(--ok);flex:none}

/* 이행 안내 배너의 줄들 */
#migBanner .mig-sum{margin-top:4px}

/* 반 카드·반 정보의 "동명이인 1쌍 · 생일 미입력 2명" */
.list li .m.dup,.clssum span.dup{color:var(--warn)}

/* 검토 화면에서 자동 매칭이 잘 된 경우의 안내는 초록으로(경고와 구분) */
.scanflags.good{color:var(--ok)}

/* 성적표 탭 — 홈페이지 발행됨 배지 */
.pubbadge{margin-left:6px;padding:0 5px;border-radius:8px;font-size:11px;
  background:#e6f2ea;color:var(--ok);border:1px solid #bfdcc9}

/* 연결 코드표 — 도구 화면과 섞이지 않는 별도 인쇄 영역(§12.9.1 학부모 배부용) */
#codeSheet{display:none}
body.codes-open #codeSheet{display:block;padding:14px;max-width:900px;margin:0 auto}
body.codes-open #view{display:none}
.cs-sheet{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 20px}
.cs-ttl{font-size:19px;font-weight:800;margin-bottom:2px}
.cs-sub{color:var(--muted);margin-bottom:14px}
.cs-tbl{border-collapse:collapse;width:100%;max-width:520px}
.cs-tbl th,.cs-tbl td{border:1px solid var(--line);padding:6px 9px;font-size:14px}
.cs-tbl th{background:var(--head);font-weight:700}
.cs-tbl td.n{text-align:center;color:var(--muted);width:44px}
.cs-tbl td.cd{font-family:Consolas,"Courier New",monospace;font-weight:800;font-size:16px;letter-spacing:2px}
.cs-help{margin-top:16px;padding:11px 13px;border:1px dashed var(--line);border-radius:5px;
  background:#fafaff;line-height:1.9}
.cs-help b{display:block;margin-bottom:3px}

@media print{
  /* 코드표를 열어 둔 채로 인쇄하면 코드표만 나간다. 성적표 인쇄 규칙(위 @media print)은 그대로다. */
  body.codes-open #codeSheet{display:block;padding:0;max-width:none}
  body.codes-open #reportOut{display:none}
  .cs-sheet{border:0;padding:0}
}

/* ===== 0d. H16 — 학생 상세(지난 성적) · 시험 상세(응시 결과) =====
   설계.md §4 탭2 확장 3. 위 규칙은 한 줄도 고치지 않고 여기에만 더한다.
   학생 상세는 학생표 **아래**에 열리는 카드다(표를 가리지 않는다).
   좁은 화면(≤768px)에서는 지난 성적 표 대신 같은 내용의 카드(.sd-cards)를 띄운다. */

/* 학생표 표기 칸의 [성적] 버튼 — 열려 있는 학생의 행은 연파랑으로 표시한다 */
table.st button.sd-btn{flex:none}
table.st button.sd-btn.on{background:var(--blue);border-color:var(--blue);color:#fff}
table.st tr.sd-on > td{background:#eef3fd}

/* 상세 카드 */
.sdetail{margin-top:12px;border:1px solid #a9c2f0;border-radius:6px;background:#fbfcff;padding:10px 12px}
.sd-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
.sd-head b{font-size:15px}
.sd-sec{margin:14px 0 6px;font-size:13px;font-weight:700}
.sd-sec::before{content:"";display:inline-block;width:3px;height:12px;background:var(--wine);
  margin-right:6px;vertical-align:-1px}

/* 학생 정보 — 읽기 전용 격자 */
.sd-info{display:flex;flex-wrap:wrap;gap:6px 18px}
.sd-f{min-width:110px}
.sd-f.wide{flex:1 1 100%;min-width:0}
.sd-f label{display:block;font-size:11.5px;color:var(--muted)}
.sd-f .v{padding:2px 0;word-break:break-all}
.sd-f .chips-ro{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}

/* 반(과목) 묶음 */
.sd-grp{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.sd-grp:first-of-type{border-top:0;padding-top:0}
.sd-gttl{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.sd-gttl b{font-size:13.5px;color:var(--blue)}
.sd-trend{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 6px;
  padding:4px 8px;border:1px solid var(--line);border-radius:5px;background:#fff}
.sd-trend .lb{font-size:11.5px;color:var(--muted)}
.sd-trend .fl{font-weight:700;letter-spacing:.3px;font-variant-numeric:tabular-nums}

/* 지난 성적 표 */
table.sd-tbl{border-collapse:collapse;width:100%;background:#fff}
table.sd-tbl th,table.sd-tbl td{border:1px solid var(--line);padding:3px 6px}
table.sd-tbl th{background:var(--head);font-weight:700;font-size:12px;white-space:nowrap}
table.sd-tbl td.n{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
table.sd-tbl td.dt{text-align:center;white-space:nowrap;color:var(--muted)}
table.sd-tbl td.l{word-break:break-all}
table.sd-tbl button.tiny{padding:1px 6px;font-size:11.5px;line-height:1.5;white-space:nowrap}
.sd-only{margin-left:5px;padding:0 5px;border-radius:8px;font-size:10.5px;white-space:nowrap;
  background:#f0eff8;color:#4a3f8f;border:1px solid #d5cfee}

/* 좁은 화면용 카드 — 넓은 화면에서는 숨는다 */
.sd-cards{display:none}
.sd-card{border:1px solid var(--line);border-radius:5px;background:#fff;padding:7px 9px;margin-bottom:6px}
.sd-card .t{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;word-break:break-all}
.sd-card .m{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:3px;color:var(--muted);font-size:12px}
.sd-card .b{display:flex;align-items:center;gap:6px;margin-top:5px}

@media (max-width:768px){
  table.sd-tbl{display:none}
  .sd-cards{display:block}
}

/* 시험 상세 — 편집 폼 아래 "응시 결과" */
.exres{margin-top:16px;padding-top:10px;border-top:2px solid var(--line)}
.exres-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.exres-head .sec{margin:0}
.exres-ses{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:12px 0 5px;
  padding:5px 9px;border:1px solid var(--line);border-radius:5px;background:#fafaff}
.exres-ses b{font-size:13.5px}
.exres-ses span{color:var(--muted);font-size:12px}
.exres-scroll{overflow-x:auto}
table.exres-t{border-collapse:collapse;width:100%;min-width:560px;background:#fff}
table.exres-t th,table.exres-t td{border:1px solid var(--line);padding:3px 6px}
table.exres-t th{background:var(--head);font-weight:700;font-size:12px;white-space:nowrap}
table.exres-t td.n{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
table.exres-t tr.off td{background:#f6f6f8;color:var(--muted)}
table.exres-t button.tiny{padding:1px 6px;font-size:11.5px;line-height:1.5;white-space:nowrap}

/* 이름은 눌러서 학생 상세로 가는 자리다 — 버튼이지만 글자처럼 보이게 둔다 */
button.linkish{padding:1px 2px;border:1px solid transparent;background:none;color:var(--blue);
  font-weight:700;text-align:left;max-width:100%;word-break:break-all;white-space:normal}
button.linkish:hover{background:#eef3fd;border-color:#cfdcf6;text-decoration:underline}
table.exres-t tr.off button.linkish{color:var(--muted);font-weight:400}

/* ===== 0e. H18 — 탭1 시험 트리 (과목 ▸ 구분 ▸ 시험) =====
   대표 2026-09-06 "왼쪽에서 오른쪽 느낌으로" — 옛 프로그램(윈도우 탐색기)식 트리다.
   왼쪽 칸은 트리 전용이라 300px 로 고정한다(§4 탭1). .pane.left 의 반응형 규칙(1180px 250px)보다
   선택자가 하나 더 구체적이라 그대로 300px 를 지키고, 900px 아래에서만 아래 규칙으로 전폭이 된다. */
.pane.left.tree{width:300px;flex:0 0 300px}

/* PDF 드롭존 — 트리와 같은 폭, 높이 최소 110px, 안내 14px (§4 탭1 "PDF 드롭존을 키운다") */
.pane.left.tree #drop{min-height:110px;display:flex;flex-direction:column;justify-content:center;
  gap:8px;padding:14px 10px;margin-bottom:8px}
.pane.left.tree #drop .big{font-size:14px;line-height:1.5}
.pane.left.tree #drop .sub{font-size:11.5px;color:#9a9a9a}
.pane.left.tree #drop.hot .sub{color:inherit}
.pane.left.tree .toolbar.mkempty{margin-bottom:10px}
.pane.left.tree .toolbar.mkempty button{width:100%}

/* --- 트리 본체 -------------------------------------------------------------
   행 높이 24px · 글자 13px · 단계마다 18px 들여쓰기 + 점선 안내선(§4 탭1 모양 ②·④). */
ul.etree{list-style:none;margin:4px 0 0;padding:0;font-size:13px;line-height:1.4;color:#222}
ul.etree ul{list-style:none;margin:0;padding:0}
/* 아래 단계: 왼쪽에 세로 점선 안내선을 세우고 9px + 9px = 18px 만큼 들어간다 */
ul.etree ul.kids{margin-left:9px;padding-left:9px;border-left:1px dotted #b9b6b0}
ul.etree li{position:relative}
/* 각 항목 앞의 짧은 가로 점선 — 세로 안내선에서 아이콘 쪽으로 이어진다 */
ul.etree ul.kids > li > .row::before{content:"";position:absolute;left:-9px;top:12px;
  width:6px;border-top:1px dotted #b9b6b0}
/* 마지막 항목 아래로는 세로선이 내려가지 않게 흰색으로 덮는다(탐색기와 같은 모양) */
ul.etree ul.kids > li:last-child > .row::after{content:"";position:absolute;left:-10px;top:13px;
  bottom:-2px;width:2px;background:#fff}

ul.etree .row{position:relative;display:flex;align-items:center;gap:3px;height:24px;border-radius:2px}
ul.etree .row:hover{background:#eceff3}
ul.etree .row.on,ul.etree .row.on:hover{background:#cfe0ff;color:#1b1b1b}

/* ⊞ / ⊟ 확장 표시 — 11px 네모에 회색 테두리, 안에 + / − */
ul.etree .tw{flex:0 0 11px;width:11px;height:11px;padding:0;box-sizing:border-box;
  border:1px solid #9b9b9b;background:#fff;border-radius:0;cursor:pointer}
ul.etree .tw .sgn{display:block;font:700 10px/9px Consolas,"Courier New",monospace;color:#444}
ul.etree .tw:hover{border-color:#5a7fbd}
ul.etree .tw.sp{border:0;background:none;cursor:default}

/* 폴더·문서 아이콘 (인라인 SVG — 이모지 금지) */
ul.etree .ic{flex:0 0 16px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}
ul.etree .ic svg{display:block}

/* 이름 칸 — 한 줄로 자르고 넘치면 … (전체는 title 툴팁에) */
ul.etree .lb{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:4px;height:24px;
  padding:0 4px 0 2px;border:1px solid transparent;background:none;border-radius:2px;
  text-align:left;font-size:13px;color:inherit;cursor:pointer}
ul.etree .lb .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.etree .nd > .row .nm{font-weight:700}
ul.etree .tc{flex:0 0 auto;color:#7a7a7a;font-size:12px}
/* 날짜 · 문항수 — 제목 뒤 같은 줄. 폭이 모자라면 **제목보다 먼저** 줄어들고(shrink 60),
   자리가 없으면 아예 사라진다 — 전체 내용은 행의 title 툴팁에 그대로 있다(§4 탭1 모양 ④). */
ul.etree .m{flex:0 60 auto;min-width:0;color:#8a8a8a;font-size:11.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
ul.etree .row.on .tc,ul.etree .row.on .m{color:#3e5480}
/* 배점 합이 100 이 아니거나 난도로 추정한 배점이면 주황 점(§4 탭1 · §3.4-c) */
ul.etree .dot{flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--warn)}
/* 미분류 시험을 폼 없이 바로 옮기는 작은 드롭다운 */
ul.etree .etq{flex:0 0 auto;margin-right:3px;font-size:11px;height:19px;padding:0 1px;max-width:60px}

/* 배점·영역을 자동으로 채운 시험의 안내 한 줄(§3.4-c · §3.4-d) */
.banner.est{background:#fff7e6;border:1px solid #f0d9a8;color:var(--warn)}

@media (max-width:900px){
  /* 좁은 화면에서는 트리가 위, 편집 폼이 아래로 쌓인다(§4 탭1) */
  .pane.left.tree{width:100%;flex:1 1 100%}
}

/* ===== 0f. H20 — 선택 상자(모달) · 통계 범위 · 회차 라벨 =====
   설계.md §16(같은 시험지 다시 쓰기) · §9.7(추가 스캔).
   `prompt()` 금지(§4 공통)라서 "셋 중 하나" 를 고르는 자리는 이 모달이 맡는다. */

/* 바탕 — 인쇄에는 절대 나가지 않는다(성적표만 인쇄한다, §4 탭4) */
.mdl-back{position:fixed;inset:0;background:rgba(24,26,32,.42);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 14px 14px;overflow:auto}
.mdl{background:#fff;border:1px solid #cdcdd6;border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.22);
  width:min(620px,100%);padding:16px 18px 14px}
.mdl-ttl{margin:0 0 6px;font-size:16px;font-weight:800;letter-spacing:-.2px}
.mdl-lead{font-size:12.5px;color:#4a4f57;line-height:1.65;white-space:pre-wrap;margin-bottom:10px}
.mdl-body{font-size:12.5px;line-height:1.6;max-height:52vh;overflow:auto;margin-bottom:12px}
.mdl-btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:10px}
.mdl-btns button{min-height:30px}
/* 모달 안의 고른 항목 상자 — 각 선택지의 설명을 담는다 */
.mdl-opt{border:1px solid var(--line);border-radius:6px;padding:9px 11px;margin-bottom:8px;background:#fafbfd}
.mdl-opt b{display:block;font-size:13px;margin-bottom:2px}
.mdl-opt .note{margin:0}
.mdl-opt.on{border-color:#a9c2f0;background:#f3f7ff}
/* 중복 학생 체크 목록(§9.7) · 정답·배점 차이 목록(§16.2) */
.mdl-list{border:1px solid var(--line);border-radius:6px;max-height:200px;overflow:auto;background:#fff}
.mdl-list label{display:flex;align-items:center;gap:7px;padding:4px 9px;border-bottom:1px solid #f0f0f4;cursor:pointer}
.mdl-list label:last-child{border-bottom:0}
.mdl-list label:hover{background:#f4f6fb}
.mdl-list .pg{margin-left:auto;color:var(--muted);font-size:11.5px}
.mdl-tbl{width:100%;border-collapse:collapse;font-size:12px}
.mdl-tbl th,.mdl-tbl td{border-bottom:1px solid #ececed;padding:3px 6px;text-align:left}
.mdl-tbl th{background:#f5f6fa;font-weight:700}
.mdl-tbl td.n{text-align:right;font-variant-numeric:tabular-nums}
.mdl-tbl td.was{color:#9a9aa2}
.mdl-tbl td.now{color:#1c6b3a;font-weight:700}
.mdl-field{display:flex;align-items:center;gap:8px;margin:6px 0}
.mdl-field label{font-size:12px;color:#55585f;min-width:64px}

/* --- 탭3 세션 머리 (통계 범위 토글 · 합산 제외 · 스캔 상태 한 줄, §16.3 · §9.7) --- */
.ses-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;margin-bottom:8px;
  background:#f7f8fc;border:1px solid var(--line);border-radius:6px}
.ses-head .who{font-weight:700}
.ses-head .lb{font-size:11.5px;color:#666a72}
/* 두 칸 토글 — 고른 쪽만 진해진다 */
.poolsw{display:inline-flex;border:1px solid #b9bcc6;border-radius:5px;overflow:hidden}
.poolsw button{border:0;background:#fff;padding:4px 10px;font-size:12px;cursor:pointer;color:#3d4048}
.poolsw button + button{border-left:1px solid #d7d9e0}
.poolsw button.on{background:#2f4d8a;color:#fff;font-weight:700}
.poolsw button[disabled]{color:#a6a8b0;cursor:not-allowed}
.ses-head .scanline{flex:1 1 100%;font-size:11.5px;color:#5c606a;margin-top:2px}
.ses-head .warnline{flex:1 1 100%;font-size:11.5px;color:var(--warn);margin-top:2px}
/* 회차 라벨 배지 — 세션을 고르는 자리마다 붙는다(§9.7) */
.seslabel{display:inline-block;background:#eef2ff;border:1px solid #c9d3f0;color:#2f4d8a;
  border-radius:9px;padding:0 6px;font-size:11px;font-weight:700;margin-left:5px;vertical-align:1px}
/* 통계 범위 표시(탭1 응시 결과 카드) */
.poolbadge{display:inline-block;background:#f3ecff;border:1px solid #d8c9f0;color:#5c3b86;
  border-radius:9px;padding:0 6px;font-size:11px;font-weight:700;margin-left:5px;vertical-align:1px}

/* OMR 스캔 드롭존(§9.1) — 탭1 드롭존과 같은 모양, 한 줄 높이 */
#omrDrop{display:flex;flex-direction:column;justify-content:center;min-height:96px;margin:0 0 12px;border-radius:12px}
#omrDrop .big{font-size:14px;line-height:1.5}
#omrDrop .sub{font-size:11.5px;color:#9a9a9a}
#omrDrop.hot .sub{color:inherit}

/* ===== 0e. H12 수업 영상 탭 (설계.md §12.14.3) =====
   대표만 보는 탭이다. 표·카드 모양은 이 파일의 기존 규칙(.st · .card · .pane)을 그대로 따르고,
   여기서는 이 탭에만 필요한 것만 더한다. */
table.st.vid{min-width:760px}
table.st.vid td.vt{max-width:280px;font-weight:600}
table.st.vid td.vn{max-width:220px;color:#5c606a;font-size:11.5px}
table.st td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:#5c606a}
table.st tr.off td{color:#9a9ca3}
.rowbtns{display:flex;flex-wrap:wrap;gap:3px}
.rowbtns button{font-size:11px;padding:2px 6px}
.vidform{margin:10px 0 14px}
.vidform .field{margin-bottom:8px}
.vidform .note.bad{color:var(--bad)}
.vidthumb{display:block;width:200px;max-width:100%;margin-top:6px;border-radius:6px;border:1px solid var(--line)}
.vidstats{margin-top:14px}
.vidstats .note{margin-bottom:6px}
.vidchips{display:flex;flex-wrap:wrap;gap:6px 14px;padding:2px 0}
.vidchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}
.vidchip input{width:auto;flex:0 0 auto;margin:0}
.vidform input[type="text"],.vidform input[type="date"],.vidform input[type="number"]{width:100%;max-width:520px}
.vidform input[type="number"]{width:90px}