/* 채점in 앱 셸 + 화면별 레이아웃/CSS. 색·치수·모션 값은 tokens.css(--cj-*)만 참조한다.
   mockup/*.html 각 화면의 <style> 블록을 포팅해 하나로 모았다. */

/* ---- 화면 컨테이너 공용 ---- */
.cj-screen{display:flex;flex-direction:column}
.cj-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--cj-s-4);display:flex;flex-direction:column;gap:var(--cj-s-4)}
.cj-body.pad-bottom-tabbar{padding-bottom:calc(var(--cj-tabbar) + env(safe-area-inset-bottom) + var(--cj-s-4))}
.scr-bottom{flex:0 0 auto;padding:var(--cj-s-4);border-top:1px solid var(--cj-line);background:var(--cj-surface);display:flex;flex-direction:column;gap:8px}
.scr-bottom .cap{text-align:center;color:var(--cj-faint);font-size:11px;margin:0}

/* 탭바 버튼(원래 <a>였던 걸 delegated nav 버튼으로) */
.cj-tab{background:transparent;border:0;font:inherit;-webkit-tap-highlight-color:transparent}

/* ---- 스플래시(부팅) ---- */
#splash{position:fixed;inset:0;z-index:9999;background:#0B0D12;display:flex;align-items:center;justify-content:center;transition:opacity 320ms ease-out}
#splash.hide{opacity:0;pointer-events:none}
.cj-splash-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.cj-splash-art{width:180px;height:180px;display:flex;align-items:center;justify-content:center}
.cj-splash-art img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 420ms ease-out}
.cj-splash-art img.loaded{opacity:1;animation:cj-splash-pulse 1.6s ease-in-out infinite}
@keyframes cj-splash-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@media (prefers-reduced-motion: reduce){.cj-splash-art img.loaded{animation:none}}
.cj-splash-word{font-size:28px;font-weight:800;color:#F4F5F7;letter-spacing:-0.02em}
.cj-splash-word .x{color:#F0574E}
.cj-splash-tag{font-size:13px;color:#9AA2B0;font-weight:700}

/* ---- 온보딩(학원 만들기) ---- */
.ob-wordmark{text-align:center;margin-bottom:var(--cj-s-8)}
.ob-wordmark .mark{font-size:34px;font-weight:800;letter-spacing:-0.02em}
.ob-wordmark .mark .x{color:var(--cj-x)}
.ob-wordmark .tagline{margin-top:6px;color:var(--cj-dim);font-size:var(--cj-t-body)}
.ob-form .found-title{font-weight:800;font-size:var(--cj-t-h2);margin-bottom:var(--cj-s-4)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--cj-s-3)}
.field label{font-size:var(--cj-t-sub);color:var(--cj-dim);font-weight:700}
.ob-err{color:var(--cj-x);font-size:var(--cj-t-sub);font-weight:700;margin:4px 0 0}

/* ---- 홈 ---- */
.hero-art{position:relative;height:150px;border-radius:var(--cj-r-lg);background-size:cover;background-position:center;overflow:hidden;flex:0 0 auto;background-color:#11151d}
.hero-art-cap{position:absolute;left:var(--cj-s-4);bottom:var(--cj-s-3);display:flex;flex-direction:column;gap:2px}
.hero-art-t{color:#fff;font-weight:800;font-size:var(--cj-t-h2);text-shadow:0 1px 6px rgba(0,0,0,.55)}
.hero-art-s{color:rgba(255,255,255,.88);font-weight:700;font-size:var(--cj-t-sub);text-shadow:0 1px 6px rgba(0,0,0,.55)}
.greet p{margin:0}
.greet .day{margin-bottom:2px}
.queue-card{display:flex;flex-direction:column;gap:var(--cj-s-3)}
.queue-card .head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.send-card{display:flex;flex-direction:column;gap:var(--cj-s-2)}
.send-card .row1{display:flex;align-items:baseline;justify-content:space-between}
.week-row .day{width:44px;flex:0 0 auto;text-align:center;color:var(--cj-dim);font-weight:800;font-size:var(--cj-t-sub);line-height:1.3}
.week-row .name{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-title{font-weight:800;font-size:var(--cj-t-h2);margin:var(--cj-s-2) 0 0}

/* ---- 시험 등록 위저드 ---- */
.cj-stepsbar{flex:0 0 auto;padding:var(--cj-s-2) var(--cj-s-4) var(--cj-s-4);display:flex;flex-direction:column;gap:var(--cj-s-2);border-bottom:1px solid var(--cj-line)}
.cj-wizbody{position:relative;flex:1;min-height:0}
.cj-wizstep{position:absolute;inset:0;display:none;flex-direction:column}
.cj-wizstep.on{display:flex}
.cj-scrollpad{flex:1;min-height:0;overflow-y:auto;padding:var(--cj-s-4)}
.cj-wizfooter{flex:0 0 auto;display:flex;gap:var(--cj-s-3);padding:var(--cj-s-4);border-top:1px solid var(--cj-line);background:var(--cj-surface)}
.cj-wizfooter .cj-btn.ghost{flex:0 0 96px}
.cj-wizfooter .cj-btn.primary{flex:1}
.cj-drop{border:1.5px dashed var(--cj-line-2);border-radius:var(--cj-r-lg);padding:var(--cj-s-8) var(--cj-s-4);display:flex;flex-direction:column;align-items:center;gap:var(--cj-s-2);text-align:center;cursor:pointer;transition:border-color var(--cj-dur-micro) var(--cj-ease-out),background var(--cj-dur-micro) var(--cj-ease-out),transform var(--cj-dur-micro) var(--cj-ease-out);position:relative;background:var(--cj-surface)}
.cj-drop:active{transform:scale(.99)}
.cj-drop.picked{border-color:var(--cj-ok);border-style:solid;background:var(--cj-ok-soft)}
.cj-drop-ic{width:44px;height:44px;border-radius:50%;background:var(--cj-surface-2);display:flex;align-items:center;justify-content:center;color:var(--cj-dim)}
.cj-drop-ic svg{width:22px;height:22px}
.cj-pickednote{display:none;align-items:center;gap:var(--cj-s-2);margin-top:var(--cj-s-3);padding:var(--cj-s-3);border-radius:var(--cj-r-md);background:var(--cj-ok-soft);color:var(--cj-ok);font-weight:700;font-size:var(--cj-t-sub)}
.cj-pickednote svg{width:18px;height:18px;flex:0 0 auto}
.cj-itemshead{display:flex;align-items:center;justify-content:space-between;gap:var(--cj-s-2);margin-bottom:var(--cj-s-3)}
.cj-tblhead,.cj-tblrow{display:flex;align-items:center;gap:var(--cj-s-2);padding:var(--cj-s-2) 0;border-bottom:1px solid var(--cj-line)}
.cj-tblhead{color:var(--cj-dim);font-size:var(--cj-t-cap);font-weight:800;letter-spacing:var(--cj-track-cap)}
.c-num{width:22px;text-align:center;flex:0 0 auto;color:var(--cj-dim);font-size:var(--cj-t-sub)}
.c-score{width:44px;flex:0 0 auto}
.c-unit{flex:1;min-width:0}
.c-type{width:64px;flex:0 0 auto}
.cj-cellinput{border:1px solid transparent;background:transparent;font:inherit;font-size:var(--cj-t-sub);color:var(--cj-ink);padding:6px 4px;border-radius:var(--cj-r-sm);width:100%;text-align:center}
.cj-cellinput.c-unit,.cj-cellinput.c-ans{text-align:left}
/* ⚠ .cj-cellinput{width:100%} 가 뒤에 와서 열 너비(.c-score 44px 등)를 덮어쓰던 버그.
   같은 특이도면 나중 규칙이 이기므로, 입력칸에는 열 너비를 다시 명시한다. */
.cj-cellinput.c-score{width:44px;flex:0 0 auto}
.cj-cellinput.c-type{width:64px;flex:0 0 auto}
.cj-cellinput.c-unit{width:auto;flex:1 1 0;min-width:0}
.cj-cellinput.c-ans{width:auto;flex:1 1 0;min-width:0}
.cj-cellinput:focus{background:var(--cj-surface-2);outline:2px solid var(--cj-focus);outline-offset:-1px}
.cj-tblrow.skel{border-bottom:0;padding:var(--cj-s-2) 0}
.cj-ansitem{display:flex;align-items:center;gap:var(--cj-s-3);padding:var(--cj-s-2) 0;border-bottom:1px solid var(--cj-line)}
.cj-ansitem .c-num{width:28px;color:var(--cj-dim);font-size:var(--cj-t-sub);text-align:left}
.cj-ansitem .c-ans{flex:1;text-align:left}

/* ---- 답안 촬영(캡처 표면) ---- */
.demo-badge-row{flex:0 0 auto;padding:var(--cj-s-2) var(--cj-s-4) 0;display:flex;justify-content:center}
.cj-vf{flex:1;min-height:180px;margin:0 var(--cj-s-4)}
.cj-flash{position:absolute;inset:0;background:var(--cj-ink);opacity:0;pointer-events:none;transition:opacity 120ms linear;border-radius:inherit}
.cj-flash.on{opacity:.85}
.cj-pillrow{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--cj-s-2);padding:var(--cj-s-3) var(--cj-s-4) 0}
.cj-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--cj-r-pill);background:var(--cj-surface-2);color:var(--cj-ink-2);font-size:var(--cj-t-sub);font-weight:800;border:1px solid var(--cj-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cj-pill.ok{background:var(--cj-ok-soft);color:var(--cj-ok);border-color:transparent;flex:0 0 auto}
.cj-pill-select{flex:1;min-width:0;height:32px;padding:0 10px;border-radius:var(--cj-r-pill);background:var(--cj-surface-2);color:var(--cj-ink);border:1px solid var(--cj-line);font:inherit;font-size:var(--cj-t-sub);font-weight:800}
.cj-stepswrap{flex:0 0 auto;padding-top:var(--cj-s-3)}
.cj-thumbstrip{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:var(--cj-s-3) var(--cj-s-4);-webkit-overflow-scrolling:touch}
.cj-thumb{position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:var(--cj-r-sm);overflow:hidden;background:var(--cj-surface-2);border:1px solid var(--cj-line)}
.cj-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cj-thumb-mark{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px}
.cj-thumb-mark img{width:18px;height:18px}
.cj-thumb-name{position:absolute;left:0;right:0;bottom:0;font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);text-align:center;padding:1px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cj-thumb-retake{position:absolute;inset:0;background:rgba(240,87,78,.88);color:#fff;border:0;font-size:9px;font-weight:800;cursor:pointer}
.cj-thumb-spin{position:absolute;right:2px;bottom:2px;width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:cj-spin .8s linear infinite}
.cj-capturebar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:var(--cj-s-3) var(--cj-s-6) calc(var(--cj-s-8) + var(--cj-s-3))}
.cj-remain{flex:0 0 auto;width:88px;text-align:right;color:var(--cj-dim);font-size:var(--cj-t-cap);font-weight:700;line-height:1.35}
.cj-ctawrap{flex:0 0 auto;overflow:hidden;max-height:0;opacity:0;transform:translateY(16px);transition:max-height var(--cj-dur-step) var(--cj-ease-spring),opacity var(--cj-dur-step) var(--cj-ease-out),transform var(--cj-dur-step) var(--cj-ease-spring),padding var(--cj-dur-step) var(--cj-ease-spring);padding:0 var(--cj-s-6)}
.cj-shutter[disabled]{opacity:.4;pointer-events:none}
.cj-ctawrap.show{max-height:110px;opacity:1;transform:none;padding:var(--cj-s-3) var(--cj-s-6) var(--cj-s-6)}

/* ---- 채점 진행 ---- */
.cj-gbody{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--cj-s-6);text-align:center;gap:var(--cj-s-2)}
.cj-ringwrap{position:relative;width:160px;height:160px;margin:0 auto var(--cj-s-2)}
.cj-ringtext{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cj-principle{color:var(--cj-dim);font-size:var(--cj-t-sub);max-width:260px;line-height:var(--cj-lh-body);margin-bottom:var(--cj-s-5)}
.cj-glines{display:flex;flex-direction:column;gap:var(--cj-s-3);width:100%;max-width:280px}
.cj-gline{display:flex;align-items:center;gap:var(--cj-s-2);justify-content:center;font-size:var(--cj-t-body-lg);color:var(--cj-ink-2)}
.cj-gline b{color:var(--cj-ink);font-weight:800}
.cj-gfooter{flex:0 0 auto;padding:0 var(--cj-s-6) var(--cj-s-6);opacity:0;transform:translateY(16px);transition:opacity var(--cj-dur-step) var(--cj-ease-out),transform var(--cj-dur-step) var(--cj-ease-spring);pointer-events:none}
.cj-gfooter.show{opacity:1;transform:none;pointer-events:auto}

/* ---- 확인 큐(카드 스택) ---- */
.cj-reviewbody{flex:1;min-height:0;overflow-y:auto;padding:var(--cj-s-4);display:flex;flex-direction:column;justify-content:center}
.cj-crop{position:relative;height:280px;border-radius:var(--cj-r-md);overflow:hidden;background:var(--cj-surface-2);margin-bottom:var(--cj-s-4)}
.cj-crop-img{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.cj-crop .hw{position:absolute;left:16%;height:9px;border-radius:5px;background:var(--cj-line-2);opacity:.9}
.cj-crop .hw1{top:38%;width:60%;transform:rotate(-2deg)}
.cj-crop .hw2{top:58%;width:44%;transform:rotate(1.5deg)}
.cj-cropnum{position:absolute;top:10px;right:10px;background:var(--cj-surface);color:var(--cj-ink);padding:2px 10px;border-radius:var(--cj-r-pill);font-size:var(--cj-t-cap);font-weight:800;border:1px solid var(--cj-line);z-index:1}
.cj-cardhead{margin-bottom:var(--cj-s-3)}
.cj-answers{margin-top:var(--cj-s-4);display:flex;flex-direction:column;gap:var(--cj-s-3)}
.cj-ansrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--cj-s-2);padding:var(--cj-s-3);border-radius:var(--cj-r-md);background:var(--cj-surface-2)}
.cj-ansrow .cj-h1{font-weight:800}
.cj-dimtext{color:var(--cj-dim)}
.cj-verdictbar{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--cj-s-3);padding:0 var(--cj-s-4) var(--cj-s-4)}
.cj-badge-ic{display:inline-block;vertical-align:middle;flex:0 0 auto}

/* ---- 시험 결과(반) ---- */
.stat-row{display:flex;justify-content:space-between;gap:var(--cj-s-2)}
.stat{flex:1;text-align:center;background:var(--cj-surface);border:1px solid var(--cj-line);border-radius:var(--cj-r-lg);padding:var(--cj-s-3) var(--cj-s-2)}
.stat .v{font-size:var(--cj-t-h1);font-weight:800}
.stat .l{font-size:var(--cj-t-cap);color:var(--cj-dim);font-weight:700;margin-top:2px}
.qbar-list{display:flex;flex-direction:column;gap:7px}
.qbar{display:flex;align-items:center;gap:var(--cj-s-3)}
.qbar .qn{width:22px;flex:0 0 auto;text-align:right;font-size:var(--cj-t-cap);color:var(--cj-dim);font-weight:700}
.qbar .track{flex:1;height:8px;border-radius:var(--cj-r-pill);background:var(--cj-surface-2);overflow:hidden}
.qbar .fill{display:block;height:100%;border-radius:var(--cj-r-pill);background:var(--cj-ink)}
.qbar.low .fill{background:var(--cj-x)}
.qbar .pct{width:36px;flex:0 0 auto;text-align:right;font-size:var(--cj-t-cap);font-weight:800}
.qbar.low .pct{color:var(--cj-x)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.list-head{display:flex;align-items:center;justify-content:space-between}
.seg-sort{display:flex;gap:6px}
.stu-list{display:flex;flex-direction:column}
.stu-row{display:flex;align-items:center;gap:var(--cj-s-3);min-height:56px;padding:8px 4px;border-bottom:1px solid var(--cj-line)}
.stu-row:last-child{border-bottom:0}
.stu-row .nm{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stu-row .sc{width:40px;text-align:right;font-weight:800}
.stu-row .xn{width:56px;text-align:right;color:var(--cj-dim);font-size:var(--cj-t-sub)}

/* ---- 리포트 승인·발송 ---- */
.notice{display:flex;gap:var(--cj-s-2);align-items:flex-start;background:var(--cj-info-soft);color:var(--cj-info);border-radius:var(--cj-r-md);padding:var(--cj-s-3);font-size:var(--cj-t-sub);font-weight:700}
.rp-item{background:var(--cj-surface);border:1px solid var(--cj-line);border-radius:var(--cj-r-lg)}
.rp-row{display:flex;align-items:flex-start;gap:var(--cj-s-3);padding:var(--cj-s-3);cursor:pointer}
.rp-info{flex:1;min-width:0}
.rp-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rp-top .nm{font-weight:800}
.rp-top .sc{font-weight:800;color:var(--cj-dim)}
.rp-comment{margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-chip{flex:0 0 auto}
.rp-sent{flex:0 0 auto}
.rp-edit{display:none;padding:0 var(--cj-s-3) var(--cj-s-3);flex-direction:column;gap:var(--cj-s-2)}
.rp-item.open .rp-edit{display:flex}
.rp-edit-actions{display:flex;justify-content:flex-end;gap:8px}
.rp-share-row{display:flex;gap:8px;padding:0 var(--cj-s-3) var(--cj-s-3)}

/* ---- 학부모 리포트(종이 표면) ---- */
.top-cap{text-align:center;color:var(--cj-dim);font-size:var(--cj-t-cap);font-weight:700;margin:0}
.pr-name{text-align:center;font-weight:800;font-size:var(--cj-t-h1);margin:0}
.pr-score{display:flex;align-items:baseline;justify-content:center;gap:6px}
.pr-score .big{font-size:56px;font-weight:800;line-height:1}
.pr-score .of{color:var(--cj-dim);font-size:var(--cj-t-body-lg);font-weight:700}
.pr-section-title{font-weight:800;font-size:var(--cj-t-sub);color:var(--cj-dim);margin:0 0 6px}
.quote-card{background:var(--cj-surface-2);border-radius:var(--cj-r-lg);padding:var(--cj-s-4);display:flex;flex-direction:column;gap:8px}
.quote-card p{margin:0;font-size:var(--cj-t-body-lg);font-weight:700;line-height:1.5}
.quote-card .cap{color:var(--cj-faint);font-size:11px;font-weight:700}
.easy-row{display:flex;align-items:center;justify-content:center;gap:var(--cj-s-3)}
.easy-row .lbl{font-weight:700}
.pr-foot{text-align:center;margin-top:auto;padding-top:var(--cj-s-6)}
.pr-foot .mark{font-weight:800;color:var(--cj-faint);font-size:var(--cj-t-sub)}
.pr-foot .mark .x{color:var(--cj-x)}

/* ---- 학생·반·보호자 관리 ---- */
.filters{display:flex;flex-direction:column;gap:8px}
.search-wrap{position:relative}
.search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--cj-faint);pointer-events:none}
.search-wrap input{padding-left:40px}
.stu-list2{display:flex;flex-direction:column}
.stu-row2{display:flex;align-items:center;gap:var(--cj-s-3);min-height:56px;padding:8px 4px;border-bottom:1px solid var(--cj-line)}
.stu-row2:last-child{border-bottom:0}
.stu-row2 .meta{flex:1;min-width:0}
.stu-row2 .nm{font-weight:700}
.stu-row2 .cl{color:var(--cj-dim);font-size:var(--cj-t-sub)}

/* ---- 설정·요금·서류함 ---- */
.price-card{display:flex;flex-direction:column;gap:6px}
.price-card .amt{font-size:var(--cj-t-display);font-weight:800}
.price-card .sub{color:var(--cj-dim);font-size:var(--cj-t-sub);margin:0}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--cj-s-3);min-height:56px;padding:0 4px;border-bottom:1px solid var(--cj-line)}
.settings-row:last-child{border-bottom:0}
.settings-row .lbl{font-weight:700}
.doc-row{display:flex;align-items:center;gap:var(--cj-s-3);min-height:56px;padding:0 4px;border-bottom:1px solid var(--cj-line)}
.doc-row:last-child{border-bottom:0}
.doc-row .nm{flex:1;min-width:0;font-weight:700}
.doc-row a.cj-btn{text-decoration:none}

/* ---- 시험 등록: 여러 면(앞·뒤) 목록 ---- */
.cj-drop.over{border-color:var(--cj-ok);background:var(--cj-ok-soft)}
.cj-drop.busy{opacity:.6;pointer-events:none}
.cj-pagesum{margin:var(--cj-s-3) 0 var(--cj-s-2);font-size:var(--cj-t-sub);color:var(--cj-dim);font-weight:700}
.cj-pagesum b{color:var(--cj-ink);font-size:var(--cj-t-body)}
.cj-pagelist{display:flex;flex-direction:column;gap:var(--cj-s-2)}
.cj-pagerow{display:flex;align-items:center;gap:var(--cj-s-2);padding:var(--cj-s-2);background:var(--cj-surface);border:1px solid var(--cj-line);border-radius:var(--cj-r-md)}
.cj-pagenum{width:20px;text-align:center;font-weight:800;color:var(--cj-dim);font-size:var(--cj-t-sub);flex:0 0 auto}
.cj-pagethumb{width:40px;height:52px;border-radius:8px;overflow:hidden;background:var(--cj-surface-2);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.cj-pagethumb img{width:100%;height:100%;object-fit:cover;display:block}
.cj-pagedoc{font-size:10px;font-weight:800;color:var(--cj-dim);letter-spacing:.02em}
.cj-pagemeta{flex:1;min-width:0}
.cj-pagename{font-size:var(--cj-t-sub);font-weight:700;color:var(--cj-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cj-pagerow .cj-iconbtn{width:36px;height:36px;flex:0 0 auto}
.cj-pagerow .cj-iconbtn svg{width:18px;height:18px}
.cj-pagerow .cj-iconbtn[disabled]{opacity:.3;pointer-events:none}
.cj-tagprog{margin-bottom:var(--cj-s-4);display:flex;flex-direction:column;gap:var(--cj-s-2)}
.cj-tagprog b{color:var(--cj-ink)}

/* ---- 답안 촬영: 학생당 여러 면 ---- */
.cj-thumb-page{position:absolute;top:4px;left:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(11,13,18,.82);color:var(--cj-ink);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.cj-remain-sub{font-size:11px;color:var(--cj-dim);font-weight:700}
.cj-remain-ok{color:var(--cj-ok)}

/* ---- 온보딩: 학원 만들기 ↔ 합류하기 전환 / 합류 코드 표시 ---- */
.ob-switch{display:block;text-align:center;margin-top:var(--cj-s-4);font-weight:700}
.ob-code-input{text-transform:uppercase;letter-spacing:.12em;font-weight:800;text-align:center}
.ob-code-box{display:flex;align-items:center;justify-content:space-between;gap:var(--cj-s-3);background:var(--cj-surface-2);border-radius:var(--cj-r-lg);padding:var(--cj-s-4) var(--cj-s-5)}
.ob-code-box .code{font-size:28px;font-weight:800;letter-spacing:.14em}

/* ---- 설정: 서버 연결(합류 코드·기기 목록) ---- */
.conn-code-wrap{display:flex;align-items:center;gap:6px}
.conn-code{font-size:var(--cj-t-body-lg);font-weight:800;letter-spacing:.1em}
.dev-row{align-items:center}
.dev-meta{flex:1;min-width:0}
.dev-meta .lbl{display:flex;align-items:center;gap:6px}

/* ---- 홈: 동기화 상태(눈에 띄지 않게) ---- */
.sync-status{margin:-8px 0 -8px;text-align:right;font-size:11px;font-weight:700;color:var(--cj-faint)}

/* ── 홈 "오늘 채점" 시작 버튼 2개 · 최근 결과 (2026-08-25 승인 흐름 /r/267 ①) ───────────── */
.cj-start{display:grid;grid-template-columns:1fr 1fr;gap:var(--cj-s-3)}
.cj-start button{all:unset;cursor:pointer;height:148px;border-radius:var(--cj-r-lg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:var(--cj-t-body-lg);
  transition:transform var(--cj-dur-micro) var(--cj-ease-out),box-shadow var(--cj-dur-micro) var(--cj-ease-out)}
.cj-start button:active{transform:scale(.97)}
.cj-start .cam{background:var(--cj-ink);color:var(--cj-on-primary);box-shadow:0 12px 26px -14px rgba(20,24,32,.8)}
.cj-start .gal{background:var(--cj-surface);color:var(--cj-ink);border:1.5px solid var(--cj-line-2)}
.cj-start .hint{font-size:var(--cj-t-cap);font-weight:700;opacity:.62}

.recent .rrow{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:10px;
  padding:11px var(--cj-s-4);border-top:1px solid var(--cj-line)}
.recent .rrow:first-child{border-top:0}
.recent .rrow:active{background:var(--cj-surface-2)}
.recent .rrow.empty{cursor:default}
.recent .rrow .who{flex:1;min-width:0;font-weight:700;font-size:var(--cj-t-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent .rrow .score{font-weight:800;font-size:var(--cj-t-body-lg)}

/* ── #/auto 자동 분류 화면 (승인 흐름 ②) ────────────────────────────────────── */
/* 채점 결과 — 학생 고르기 + 저장 (2026-09-16) */
.auto-save{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.auto-save .cj-select{flex:1 1 150px;min-height:40px;padding:0 10px;border-radius:10px;
  border:1px solid var(--cj-line);background:var(--cj-surface);color:var(--cj-ink);font:inherit}
.auto-save .cj-btn{flex:0 0 auto}
.auto-msg{min-height:18px}
/* 채점 결과 문항 줄 — O / X / 선생님 확인 (2026-09-16, 공용 채점 흐름 배선) */
.auto-qs{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.auto-q{min-width:30px;height:30px;padding:0 6px;border-radius:8px;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;
  border:1.5px solid var(--cj-line);color:var(--cj-faint);background:var(--cj-surface)}
.auto-q.o{border-color:var(--cj-ok);color:var(--cj-ok)}
.auto-q.x{background:var(--cj-bad,#C0392B);border-color:var(--cj-bad,#C0392B);color:#fff}
.auto-q.m{border-style:dashed}
.auto-steps{display:flex;flex-direction:column;gap:var(--cj-s-3)}
.auto-steps .step{display:flex;align-items:center;gap:11px}
.auto-steps .dot{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:12px;font-weight:800}
.auto-steps .step.done .dot{background:var(--cj-ok);color:#fff}
.auto-steps .step.now .dot{background:var(--cj-ink);color:#fff}
.auto-steps .step.wait .dot{background:var(--cj-surface-2);color:var(--cj-faint)}
.auto-steps .lbl{font-weight:700;font-size:var(--cj-t-body)}
.auto-steps .step.wait .lbl{color:var(--cj-faint)}
.auto-steps .val{margin-left:auto;font-size:var(--cj-t-sub);font-weight:800;color:var(--cj-dim)}
.auto-grp{display:flex;align-items:center;gap:10px;padding:11px var(--cj-s-4)}
.auto-grp .name{flex:1;min-width:0;font-size:var(--cj-t-body)}
.ask-card{padding:var(--cj-s-4);margin-top:var(--cj-s-2)}
.ask-card .chip-row{gap:6px;flex-wrap:wrap}
/* 빈 줄은 안내 문장이라 한 줄로 자르면 말이 잘린다 — 이 줄만 줄바꿈을 허용한다. */
.recent .rrow.empty .who{white-space:normal;overflow:visible;text-overflow:clip;font-weight:600}

/* 학생 일괄 추가 — 서면 동의 확인란(2026-08-25) */
.consent-confirm{display:flex;align-items:flex-start;gap:9px;font-size:var(--cj-t-sub);color:var(--cj-ink-2);
  padding:2px 2px 0;cursor:pointer;line-height:1.4}
.consent-confirm input{margin-top:2px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--cj-ok)}