/* 토큰 — mobile-ui-standard: Pretendard · 굵기 700/500/400 · 라운드 8/16 · 높이 48(54 학생) · 여백 4배수
   메인 컬러 = youpress 파랑 계열. youpress 의 #3b82f6 은 흰 글자 대비 3.7:1 이라 한 단계 진한 #2563EB(5.2:1) */
:root {
  --pri: #2563EB;
  --pri-dark: #1E40AF;
  --pri-light: #BFDBFE;
  --pri-tint: #EFF6FF;
  --t1: #111111; --t2: #505050; --t3: #767676; --t4: #999999;
  --line: #E5E5EC; --line-w: #F1F1F5;
  --bg: #F7F7FB; --bg-band: #F1F1F5;
  --neg: #D32F2F; --pos: #00C853; --warn: #FFD60A;
  --white: #FFFFFF;
  --line-strong: #C9CBD4;        /* 점선 "새로 만들기" 카드 — --line 은 배경 위에서 안 보인다 */
  --warn-tint: #FFF8E1; --warn-line: #FCE7A8; --warn-text: #92400E;   /* 승인 기다림 띠 */
  --pos-text: #166534; --neg-tint: #FDECEC;
  --bs-primary: #2563EB;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: #1E40AF;
  --bs-link-hover-color: #2563EB;
  --bs-border-radius: 8px;
  --bs-body-font-family: Pretendard, "Pretendard Variable", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --bs-body-color: #111111;
}
html { letter-spacing: -0.025em; }
body { background: var(--bg); color: var(--t1); font-size: 14px; line-height: 1.45; }
body.narrow { font-size: 15px; }
b, strong, th { font-weight: 700; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; letter-spacing: 0; }
.container-sm { max-width: 560px; }
.container-mid { max-width: 880px; }
.container-split { max-width: 1120px; }   /* 왼쪽 주 업무 + 오른쪽 360 관리 패널 화면 */
.main { padding: 20px 20px 48px; }
.card { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: none; }
.sec-body { padding: 20px; }
.form-control, .form-select { border-radius: 8px; border-color: var(--line); min-height: 48px; font-size: 15px; padding: 10px 14px; color: var(--t1); }
.form-control-sm, .form-select-sm { min-height: 36px; font-size: 13px; padding: 6px 10px; }
.form-control:focus, .form-select:focus { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.form-label { font-size: 14px; font-weight: 500; color: var(--t2); margin-bottom: 6px; }
.btn { border-radius: 8px; font-weight: 500; min-height: 48px; padding: 10px 20px; font-size: 15px; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.btn-primary { --bs-btn-bg: var(--pri); --bs-btn-border-color: var(--pri); --bs-btn-hover-bg: #1D4ED8; --bs-btn-hover-border-color: #1D4ED8; --bs-btn-active-bg: #1E40AF; font-weight: 700; }
.btn-outline-primary { --bs-btn-color: var(--pri-dark); --bs-btn-border-color: var(--pri-dark); --bs-btn-hover-bg: var(--pri-dark); --bs-btn-hover-border-color: var(--pri-dark); }
.btn-outline-secondary { --bs-btn-color: var(--t2); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--bg-band); --bs-btn-hover-color: var(--t1); --bs-btn-hover-border-color: var(--line); }
body.narrow .btn:not(.btn-sm) { min-height: 54px; font-size: 16px; }
body.narrow .form-control:not(.form-control-sm) { min-height: 54px; font-size: 16px; }
.alert { border-radius: 12px; font-size: 14px; }
.hint { font-size: 13px; color: var(--t2); margin: 12px 0 0; line-height: 1.5; }
.empty { text-align: center; color: var(--t2); padding: 40px 20px; background: #fff; border: 1px dashed var(--line); border-radius: 16px; }

/* ---- 상단 내비 (56) — youpress 처럼 흰 바탕 · 아래 선 · 옅은 그림자 · 위에 붙음 ---- */
.topnav { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 2px rgba(17,17,17,.04); position: sticky; top: 0; z-index: 1020; }
.topnav-in { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
.topnav .brand { color: var(--pri); font-weight: 700; font-size: 18px; text-decoration: none; white-space: nowrap; }
.topnav .links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topnav .nav-link { color: var(--t2); padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.topnav .nav-link:hover { color: var(--t1); background: var(--bg-band); }
.topnav .nav-link.active { color: var(--pri); background: var(--pri-tint); }
.topnav .me-btn { background: #fff; border: 1px solid var(--line); color: var(--t1); font-size: 14px; padding: 6px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.topnav .me-btn:hover { background: var(--bg-band); }
.topnav .caret { width: 7px; height: 7px; border-right: 2px solid var(--t3); border-bottom: 2px solid var(--t3); transform: rotate(45deg); margin-top: -3px; }
.dropdown-menu { border-radius: 12px; border-color: var(--line); font-size: 14px; padding: 6px; }
.dropdown-item { border-radius: 8px; padding: 8px 12px; }
body.narrow .topnav .brand { font-size: 16px; }

/* ---- 페이지 머리 ---- */
.page-head { margin: 4px 0 16px; }
.page-head-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-title { font-size: 20px; font-weight: 700; margin: 0; line-height: 1.4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.wide .page-title { font-size: 24px; }
.page-sub { font-size: 13px; color: var(--t2); margin: 4px 0 0; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--t2); text-decoration: none; margin-bottom: 8px; min-height: 36px; }
.back::before { content: ''; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 2px; }
.back:hover { color: var(--pri-dark); }

/* ---- 로그인·가입 — youpress 처럼 그림자 큰 둥근 카드 · 넉넉한 안쪽 여백 · 큰 입력칸 ---- */
.auth-wrap { max-width: 440px; margin: 40px auto 0; }
.auth-card { border: 0; border-radius: 16px; box-shadow: 0 12px 32px rgba(17,17,17,.08); padding: 40px 32px; }
.auth-title { font-size: 24px; font-weight: 700; text-align: center; margin: 0; line-height: 1.4; }
.auth-sub { text-align: center; color: var(--t2); font-size: 14px; margin: 4px 0 24px; }
.auth-alt { text-align: center; font-size: 14px; color: var(--t2); margin: 20px 0 0; }
.auth-alt a { font-weight: 700; text-decoration: none; }
.lbl-sub { font-weight: 400; font-size: 12px; color: var(--t3); margin-left: 4px; }
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 52px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: var(--t3); display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.pw-eye:hover { color: var(--t1); }
@media (max-width: 600px) { .auth-wrap { margin-top: 16px; } .auth-card { padding: 32px 20px; } }

/* ---- 회차 카드 (홈) ---- */
.rcard { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 20px; margin-bottom: 12px; text-decoration: none; color: var(--t1); transition: border-color .15s; }
a.rcard:hover { border-color: var(--pri); }
.rcard-body { flex: 1; min-width: 0; }
.rcard-top { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.rcard-name { font-size: 18px; font-weight: 700; line-height: 1.4; }
.rcard-period { font-size: 15px; color: var(--t1); margin-top: 4px; }
.rcard-meta { font-size: 13px; color: var(--t2); margin-top: 4px; }
.rcard.st-upcoming { background: var(--bg-band); color: var(--t2); }
.rcard.st-upcoming .rcard-name { color: var(--t2); }
.notice-card { border-left: 4px solid var(--pri); }
.chev { width: 10px; height: 10px; border-right: 2px solid var(--t4); border-top: 2px solid var(--t4); transform: rotate(45deg); flex: none; }

/* ---- 태그 ---- */
.tag { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; line-height: 1.6; white-space: nowrap; }
.tag-open { background: #dcfce7; color: #166534; }
.tag-late { background: #fef3c7; color: #92400e; }
.tag-locked { background: #eef0f2; color: #555; }
.tag-upcoming { background: #e5e5ec; color: #505050; }
.tag-done { background: var(--pri-tint); color: var(--pri-dark); }
.tag-notice { background: var(--pri); color: #fff; }
.tag-peek { display: inline-flex; align-items: center; gap: 4px; background: #eef0f2; color: var(--t2); }

/* ---- 섹션 ---- */
.sec { margin-bottom: 24px; }
.sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; padding: 0 4px; }
.sec-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.sec-note { font-size: 12px; color: var(--t2); }
.chk-list { display: flex; flex-wrap: wrap; gap: 4px 16px; }   /* 회차 모달 채점위원 체크 */
.chk-list .form-check { margin: 0; font-size: 14px; }
.sec-head .tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.save-state { align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--t2); }   /* 채점표 자동 저장 상태 */
.save-state.ok { color: var(--pri-dark); }
.save-state.err { color: var(--neg); }
.lead-msg { font-size: 16px; font-weight: 500; margin: 0 0 12px; color: var(--pri-dark); }
.peek-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.sec-task .card:not(.editing) .peek-tools, .sec-task .card:not(.editing) .empty-line, .sec-task .card:not(.editing) #bodyForm { display: none; }
.task-video + .peek-tools, .empty-line + .peek-tools, .task-body + .peek-tools, #bodyForm + .peek-tools { margin-top: 16px; }
.task-body { white-space: pre-wrap; line-height: 1.6; font-size: 15px; margin-top: 16px; }
.task-video + .btn, .task-body + .btn, .empty-line + .btn, .peek-tools + .btn { margin-top: 16px; }
.task-video { width: 100%; border-radius: 8px; background: #000; display: block; max-height: 60vh; }
.task-video ~ .btn, .task-video ~ .peek-tools { margin-top: 16px; }   /* 영상 뒤에 HLS 재생 스크립트가 끼어 + 선택자가 안 맞는다 (_video.php) */
body.wide .sec-task { max-width: 520px; margin-left: auto; margin-right: auto; }   /* 학생 화면(container-sm)과 같은 카드 폭·가운데 */
body.wide .task-video { max-width: 720px; }
.file-line { font-size: 12px; color: var(--t2); margin-top: 6px; }
.staff-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-w); }
.prompt-ta { font-size: 12px; min-height: 0; }
.notice-body { white-space: pre-wrap; line-height: 1.6; margin-top: 12px; font-size: 15px; }
.done-line { font-size: 15px; margin-bottom: 8px; color: #166534; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-w); font-size: 14px; }
.kv:last-of-type { border-bottom: none; }
.kv span { color: var(--t2); flex: none; } .kv b { text-align: right; word-break: break-all; font-weight: 500; }

/* ---- 편집 가능한 블록 (안내·과제 안내): 제목 줄 오른쪽에 항상 보이는 연필 버튼 ---- */
.blk + .blk { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-w); }
.blk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.blk-head h3 { font-size: 15px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.edit-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--pri-dark); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; }
.edit-btn:hover { border-color: var(--pri); background: var(--pri-tint); }
.edit-btn.disabled { opacity: .6; pointer-events: none; }
.empty-line { border: 1px dashed var(--line); border-radius: 12px; padding: 16px; color: var(--t2); font-size: 13px; text-align: center; background: var(--bg); }
.rstats { display: flex; gap: 24px; flex: none; margin-right: 8px; }
.rstat { display: flex; flex-direction: column; align-items: flex-end; }
.rstat span { font-size: 12px; color: var(--t2); }
.rstat b { font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--t1); }
.rstat b small { font-size: 12px; font-weight: 400; color: var(--t2); margin-left: 3px; }
@media (max-width: 600px) { .rcard { flex-wrap: wrap; } .rstats { width: 100%; justify-content: flex-start; margin: 4px 0 0; } .rstat { align-items: flex-start; } }
.rcard-wrap { position: relative; }
.rcard-wrap.manage .rcard-edit { position: absolute; right: 20px; top: 20px; }
.rcard-wrap.manage .rcard { padding-right: 140px; }
.rcard-wrap.manage .chev { display: none; }

/* ---- 파일 선택 ---- */
.fgroup { margin-bottom: 20px; }
.flabel { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.flabel span { font-weight: 400; font-size: 12px; color: var(--t2); margin-left: 6px; }
.filebox { display: block; border: 2px dashed var(--line); border-radius: 12px; padding: 20px 16px; text-align: center; color: var(--t2); background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s; }
.filebox strong { display: block; color: var(--t1); margin-bottom: 4px; font-size: 15px; }
.filebox .fsub { font-size: 12px; }
.filebox.drag { border-color: var(--pri); background: var(--pri-tint); }
.filebox.has { border-style: solid; border-color: var(--pri); background: #fff; text-align: left; }
.filebox.bad { border-color: var(--neg); background: #fff5f5; }
.filebox input[type=file] { display: none; }
.flist { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--t1); text-align: left; }
.flist:empty { display: none; }
.flist li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line-w); }
.flist li { align-items: center; }
.flist li span:first-child { flex: 1; min-width: 0; word-break: break-all; }
.flist li span:nth-child(2) { color: var(--t2); flex: none; }
.flist .frm { flex: none; width: 36px; height: 36px; margin: -4px -8px -4px 0; border: 0; background: none; color: var(--t2); display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }   /* 답안 파일 빼기 — 터치 36 */
.flist .frm:hover { background: var(--bg-band); color: var(--neg); }
.filebox .fsub.err { color: var(--neg); }
.pg { margin-top: 8px; }
.progress { height: 12px; border-radius: 999px; }
.progress-bar { background: var(--pri); }
.pg-txt { display: flex; justify-content: space-between; font-size: 12px; color: var(--t2); margin-top: 4px; }

/* ---- 부 탭 ---- */
.gtabs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.gtabs a { padding: 0 16px; min-height: 36px; line-height: 36px; font-size: 13px; font-weight: 500; color: var(--t2); text-decoration: none; }
.gtabs a + a { border-left: 1px solid var(--line); }
.gtabs a.active { background: var(--pri); color: #fff; }
.gtabs a small { font-size: 12px; opacity: .75; margin-left: 2px; }
.search { width: 220px; min-height: 36px; }

/* ---- 채점 표 ---- */
.stat { font-size: 13px; color: var(--t2); display: flex; gap: 14px; flex-wrap: wrap; }
.stat b { color: var(--pri-dark); }
table.g { font-size: 13px; background: #fff; }
table.g th { background: var(--pri-dark); color: #fff; font-weight: 500; white-space: nowrap; text-align: center; padding: 8px; position: sticky; top: 0; z-index: 2; cursor: pointer; font-size: 12px; user-select: none; }
table.g th.sorted::after { content: ' ▼'; opacity: .7; }
table.g th.sorted.asc::after { content: ' ▲'; }
table.g td { padding: 8px 12px; text-align: center; white-space: nowrap; vertical-align: middle; }
table.g td.l { text-align: left; }
table.g td.muted { color: var(--t4); }
table.g td.pending { color: var(--neg); }
table.g tr.r:hover td { background: #f7fafc; cursor: pointer; }
table.g tr.r.open td { background: var(--pri-tint); }
table.g tr.none td { color: var(--t4); background: #fafbfc; }
table.g tr.fail td { background: #fff5f5; }
.table-responsive.card { border-radius: 12px; overflow: auto; }   /* hidden 이면 Bootstrap 의 overflow-x:auto 가 죽어 폰에서 표가 안 밀린다 (2026-09-11) */
table.g.tl th, table.g.tl td { text-align: left; padding-left: 16px; padding-right: 16px; }
table.g.tl td { height: 56px; }
.role-sel { width: 110px; min-height: 36px; padding: 4px 28px 4px 10px; font-size: 13px; }
.sin { width: 56px; height: 36px; border: 1px solid var(--line); border-radius: 6px; padding: 4px; text-align: center; font-size: 14px; background: #fff; }
.sin.saved { font-weight: 700; }
.sin.err, .cin.err { border-color: var(--neg); background: #fff5f5; }
.sin:focus, .cin:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.cin { display: block; width: 100%; min-width: 320px; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font-size: 13px; line-height: 1.45; background: #fff; resize: none; overflow: hidden; font-family: inherit; }
table.g td.td-comment { white-space: normal; text-align: left; width: 100%; }
table.g td.td-act { text-align: right; }
table.g tr.none td { color: var(--t4); background: #fafbfc; }
.sin { border-color: var(--line); }
.sin:placeholder-shown, .sin[value=""] { border-color: var(--line-w); }
table.g th.th-comment { text-align: center; }
.ai-fail { color: var(--neg); font-weight: 500; }
table.g td.ro { font-weight: 700; }
table.g td.ro-comment { font-size: 13px; color: var(--t2); }
.aisc { font-weight: 700; color: var(--pri-dark); }
.sum { font-weight: 700; }
.badge { font-weight: 500; border-radius: 999px; padding: 3px 8px; }
.badge.st-queued { background: #eef0f2; color: #555; }
.badge.st-held { background: var(--warn-tint); color: var(--warn-text); }
.badge.st-running { background: #dbeafe; color: #1e40af; }
.badge.st-done { background: #dcfce7; color: #166534; }
.badge.st-failed { background: #fee2e2; color: #991b1b; }
.badge.st-notask { background: #fef3c7; color: #92400e; }
.badge.st-late { background: #fef3c7; color: #92400e; }
tr.detail td { background: var(--pri-tint); padding: 14px 16px; text-align: left; white-space: normal; border-bottom: 2px solid var(--pri-light); }
/* 상세는 표를 옆으로 밀어도 제자리 — td 는 행 전체 폭이라 sticky 로 못 움직이고, 안쪽 박스를 붙인다 (폭은 grading.js 가 보이는 폭으로 맞춘다) */
tr.detail .dgrid { position: sticky; left: 16px; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .dgrid { grid-template-columns: 1fr; } }
.dbox { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.dbox h6 { font-weight: 700; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.dbox h6 .spacer { flex: 1; }
.dbox h6 .meta { font-size: 12px; font-weight: 400; color: var(--t3); white-space: nowrap; }
.dbox video { width: 100%; max-height: 360px; background: #000; border-radius: 8px; }
.dbox iframe { width: 100%; height: 480px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.dbox .pdf-open { display: none; }   /* 폰에서만 (아래 600px 블록) */
/* 답안 틀: A4 세로 한 장이 화면에 통째로 들어가는 가장 큰 크기 (100vh 에서 이름 줄·넘김 버튼·여백 140 을 뺀 높이 ÷ 1.414 = 폭, 너무 작아지지 않게 420 바닥).
   사진·PDF 가 같은 틀에 들어가 넘겨도 크기가 안 튀고 밑의 ◀ ▶ 가 제자리에 있다. 사진은 폭에 맞추고 넘치면 틀 안에서 스크롤 (PDF 와 같은 방식) */
.ans-frame { width: min(100%, max(420px, calc((100vh - 140px) / 1.414))); margin: 0 auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ans-item[hidden] { display: none; }
.ans-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 4px 4px 4px 12px; background: #fff; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--t2); word-break: break-all; }   /* 파일 이름 + [원본 보기] — 사진·PDF 같은 자리 */
.ans-body { aspect-ratio: 1 / 1.414; overflow-y: auto; }
.ans-body img { display: block; width: 100%; height: auto; }
.dbox .ans-body iframe { display: block; height: 100%; border: 0; border-radius: 0; }
.ans-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }   /* 답안 넘겨 보기 ◀ 3 / 10 ▶ — 틀 바로 밑 */
.ans-nav .pos { min-width: 64px; text-align: center; font-size: 13px; color: var(--t2); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ans-nav .edit-btn { padding: 6px 10px; }
.ans-nav .edit-btn:disabled { color: var(--t4); cursor: default; background: #fff; border-color: var(--line); }
.stt { font-size: 13px; line-height: 1.7; max-height: 220px; overflow: auto; background: #fafbfc; padding: 10px; border-radius: 8px; border: 1px solid var(--line); white-space: pre-wrap; }
.fb { font-size: 13px; line-height: 1.6; }
.fb b { color: var(--pri-dark); }
.hist { font-size: 12px; color: var(--t2); margin-top: 8px; }
.fmt-box { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px; }
.fmt-box table { background: #fff; font-size: 12px; }

/* ---- 좁은 화면에서 채점표가 넘칠 때: 이름 열을 왼쪽에 고정해 점수칸까지 밀어도 누구 줄인지 보인다 ---- */
@media (max-width: 1100px) {
  #gtable th:nth-child(3), #gtable td:nth-child(3) { position: sticky; left: 0; border-right: 1px solid var(--line); }
  #gtable th:nth-child(3) { z-index: 3; }
  #gtable td:nth-child(3) { z-index: 1; background: #fff; }
  /* 고정칸은 배경이 있어야 밑으로 지나가는 글자가 안 비친다 — 행 상태색을 그대로 따라간다 (id 선택자라 기존 규칙이 못 이김) */
  #gtable tr.none td:nth-child(3) { background: #fafbfc; }
  #gtable tr.fail td:nth-child(3) { background: #fff5f5; }
  #gtable tr.r:hover td:nth-child(3) { background: #f7fafc; }
  #gtable tr.r.open td:nth-child(3) { background: var(--pri-tint); }   /* hover 보다 뒤 — 열린 행은 hover 해도 하늘색 (기존 규칙과 같은 순서) */
}

@media (max-width: 600px) {
  .main { padding: 16px 16px 40px; }
  .sec-body { padding: 16px; }
  .rcard { padding: 14px 16px; }
  .topnav-in { padding-top: 6px; padding-bottom: 6px; }
  .topnav .nav-link, .topnav .me-btn { min-height: 36px; display: inline-flex; align-items: center; }   /* 터치 최소 36 */
  .sin, .cin, .form-control-sm, .form-select-sm, .search, .role-sel { font-size: 16px; }   /* iOS 는 16 미만 인풋에 포커스하면 화면을 확대한다 */
  .dbox iframe, .dbox .orig-pdf { display: none; }                  /* 폰 브라우저는 iframe PDF 를 못 그린다 → 아래 큰 버튼 하나로 (머리의 원본 보기는 중복이라 숨김) */
  .dbox .pdf-open { display: flex; align-items: center; justify-content: center; min-height: 54px; }
  /* 폰은 틀 크기를 고정하지 않는다 — 사진은 폭에 맞춰 그대로, PDF 는 버튼 하나라 고정하면 빈 상자가 생긴다 */
  .ans-frame { width: 100%; border: 0; background: none; border-radius: 0; overflow: visible; }
  .ans-cap { padding: 0 0 4px; border: 0; background: none; }
  .ans-body { aspect-ratio: auto; overflow: visible; }
  .ans-body img { border: 1px solid var(--line); border-radius: 8px; }
}

/* ---- PlusUp: 역할 태그 · 과목 코드 · 한 줄 추가 폼 · 사용 기록 ---- */
.tag-role-super, .tag-role-admin { background: var(--pri-dark); color: #fff; }
.tag-role-prof { background: var(--pri); color: #fff; }
.tag-role-ta { background: var(--pri-tint); color: var(--pri-dark); }
.tag-role-student { background: #eef0f2; color: var(--t2); }
.tag-role-wait { background: #fef3c7; color: #92400e; }
.card.code-box { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }   /* .card 는 Bootstrap 에서 세로 flex — 가로로 되돌린다 */
.code-big { font-size: 28px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--pri-dark); line-height: 1.3; }
.code-input { font-size: 24px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.add-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.add-row .form-control { flex: 1; min-width: 180px; }
.add-row .form-select { width: auto; }
.log-box { max-height: 400px; overflow-y: auto; }
.log-detail { display: block; font-size: 12px; color: var(--t2); margin-top: 2px; }

/* ---- 데모 계정 버튼 (로그인 화면 아래 — 교수님 프로토타입의 원클릭 로그인) ---- */
.demo-card { border: 1px dashed var(--line); border-radius: 16px; background: #fff; padding: 20px; margin-top: 16px; }
.demo-title { font-size: 16px; font-weight: 700; margin: 0; text-align: center; }
.demo-sub { font-size: 12px; color: var(--t2); text-align: center; margin: 4px 0 16px; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-grid form { margin: 0; }
.demo-btn { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px; }
.demo-btn span { font-size: 12px; color: var(--t2); }
.demo-btn b { font-size: 13px; font-weight: 500; color: var(--t1); }
.demo-btn:hover { border-color: var(--pri); background: var(--pri-tint); }
@media (max-width: 380px) { .demo-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- 화면 덩어리: 왼쪽 넓게 = 주 업무(과제방·회차·과목) / 오른쪽 = 관리(학생 받기·구성원·안내) — 2026-10-09 유저 피드백 ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
@media (max-width: 991px) { .split { grid-template-columns: 1fr; gap: 0; } }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.panel-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; line-height: 1.4; }
.panel-label { font-size: 12px; color: var(--t2); margin-bottom: 4px; }
.panel-hint { font-size: 13px; color: var(--t2); line-height: 1.45; margin: 12px 0 0; }
.panel-empty { font-size: 13px; color: var(--t2); text-align: center; padding: 20px 0 8px; margin: 0; }
.code-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.text-btn { border: 0; background: none; padding: 8px 0; font-size: 13px; color: var(--t2); display: inline-flex; align-items: center; gap: 4px; }
.text-btn:hover { color: var(--pri); }
.icon-btn { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--t2); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--bg-band); color: var(--t1); }
.txt-open { color: var(--pos-text); font-weight: 500; }
.modal-guide { font-size: 14px; color: var(--t2); line-height: 1.45; background: var(--bg); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }

/* 탭 (36) — 구성원: 학생 / 교수·조교 */
.seg { display: flex; gap: 4px; background: var(--bg-band); border-radius: 8px; padding: 4px; margin-bottom: 8px; }
.seg button { flex: 1; height: 36px; border: 0; border-radius: 8px; background: none; font-size: 14px; font-weight: 500; color: var(--t2); display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.seg button.active { background: var(--white); color: var(--t1); box-shadow: 0 1px 2px rgba(17,17,17,.08); }
.dot-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: var(--neg); color: var(--white); font-size: 12px; font-weight: 700; }

/* 사람 한 줄 (56) */
.prow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line-w); }
.tab-pane > .prow:first-child, .pending-head + .prow, .panel-title + .prow { border-top: 0; }
.pav { width: 36px; height: 36px; flex: none; border-radius: 999px; background: var(--pri-tint); color: var(--pri-dark); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pname { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pname b { font-size: 14px; font-weight: 500; color: var(--t1); }
.pname > span { font-size: 12px; color: var(--t3); }   /* 아이디 줄만 — 역할 태그(span.tag)에 번지지 않게 */
.pline { display: flex; align-items: center; gap: 6px; }
.pact { display: flex; gap: 8px; flex: none; }
.pact form { margin: 0; }
.dropdown-item.text-danger:hover { background: var(--neg-tint); }

/* 승인 기다림 — 학생 탭 맨 위 노란 띠 */
.pending-box { background: var(--warn-tint); border: 1px solid var(--warn-line); border-radius: 12px; padding: 4px 12px; margin-bottom: 8px; }
.pending-box .prow { border-top-color: var(--warn-line); }
.pending-box .pav { background: var(--white); }
.pending-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 4px; font-size: 13px; color: var(--warn-text); }
.pending-head form { margin: 0; }
.pending-head .text-btn { color: var(--warn-text); font-weight: 700; padding: 4px 0; }

/* 목록 끝 "＋ 새로 만들기" 점선 카드 (48 이상) */
.add-card { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 72px; border: 1px dashed var(--line-strong); border-radius: 16px; background: transparent; color: var(--pri); font-size: 15px; font-weight: 500; margin-bottom: 12px; }
.add-card:hover { background: var(--white); border-color: var(--pri); }
.add-line { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 48px; margin-top: 8px; border: 1px dashed var(--line-strong); border-radius: 8px; background: transparent; color: var(--pri); font-size: 14px; font-weight: 500; }
.add-line:hover { background: var(--pri-tint); border-color: var(--pri); }

.panel .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 좁은 패널의 "안내 자료 열기 · 긴파일이름.pdf" — 줄바꿈 대신 말줄임 */

/* 원장 화면 과목 카드의 진행 현황 줄 */
.rcard-progress { font-size: 13px; color: var(--t2); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rcard-progress b { color: var(--t1); font-weight: 500; }
.txt-warn { color: var(--warn-text); font-weight: 500; }

/* 사람 고르기 (교수·조교·학생 추가, 과목 개설) — 열자마자 목록, 위 칸으로 좁히기 */
.upick-list { margin-top: 8px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.urow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px; margin: 0; border-top: 1px solid var(--line-w); background: var(--white); font-size: 15px; color: var(--t1); }
.urow:first-child { border-top: 0; }
label.urow { cursor: pointer; }
label.urow:hover { background: var(--pri-tint); }
.urow .form-check-input { margin: 0; flex-shrink: 0; width: 20px; height: 20px; }
.urow-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.urow-who b { font-weight: 500; }
.urow-who span { font-size: 13px; color: var(--t2); }
.urow .tag { margin-left: auto; }
.urow .tag + .btn { margin-left: 0; }
.urow .btn { margin-left: auto; flex-shrink: 0; }
.usearch-empty { font-size: 13px; color: var(--t2); margin: 0; padding: 16px; line-height: 1.45; text-align: center; }
.upick-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.upick-sel:empty { display: none; }
.upick-sel-head { width: 100%; font-size: 13px; font-weight: 500; color: var(--pri-dark); }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--pri-tint); color: var(--pri-dark); font-size: 13px; }
.chip button { border: 0; background: none; color: inherit; width: 24px; height: 24px; padding: 0; font-size: 16px; line-height: 1; }
/* 과목 개설 창 안의 소제목 (담당 교수 · 학생) */
.modal-sec { font-size: 15px; font-weight: 700; margin: 32px 0 8px; }
.modal-sec span { font-size: 13px; font-weight: 400; color: var(--t2); margin-left: 8px; }
.modal-sec + .urow { border-top: 0; }

/* 과목 위 탭 (과제방 · 종합평가 · 접속기록 · 접속분석) — 조교 이상 */
.ctabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 24px; overflow-x: auto; scrollbar-width: none; }
.ctabs a { display: flex; align-items: center; height: 48px; padding: 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--t2); font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.ctabs a:hover { color: var(--t1); }
.ctabs a.active { color: var(--t1); font-weight: 700; border-bottom-color: var(--pri); }
.sum-note { font-size: 12px; color: var(--t2); }
.txt-ok { color: #166534; }
.txt-bad { color: #991b1b; font-weight: 500; }
table.g td.wrap { white-space: normal; }
.link-btn { border: 0; background: none; padding: 0; color: var(--pri); text-decoration: underline; text-underline-offset: 2px; }
.who-cell { display: inline-flex; align-items: center; gap: 4px; margin: 2px 8px 2px 0; white-space: nowrap; }
/* [GO] 대리 로그인 — admin 에게만 */
.go-form { display: inline; margin: 0; }
.go-btn { border: 0; border-radius: 4px; background: #8bc34a; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; line-height: 1.3; vertical-align: middle; }
.go-btn:hover { background: #7cb342; }
.imp-back { position: fixed; right: 16px; bottom: 16px; z-index: 1050; display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 16px; box-shadow: 0 4px 16px rgba(0,0,0,.12); font-size: 13px; color: var(--t2); }
/* 종합평가 과제방 고르기 (과제방이 둘 이상일 때) */
.rchips { display: flex; gap: 8px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.rchips a { display: flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--t2); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.rchips a:hover { color: var(--t1); border-color: var(--line-strong); }
.rchips a.active { background: var(--pri); border-color: var(--pri); color: #fff; }
/* 스크롤 모달 안을 <form> 이 감쌀 때 — 부트스트랩은 .modal-content 바로 아래 .modal-body 만 스크롤시킨다. form 을 같은 세로 줄로 만들어
   본문만 스크롤되고 [넣기]·[만들기] 줄은 늘 창 아래에 보이게 (2026-10-10 교수님: "pc에서 버튼이 화면에 안보여요") */
.modal-dialog-scrollable .modal-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.modal-dialog-scrollable .modal-form .modal-body { overflow-y: auto; min-height: 0; }
/* 목록에 없으면 바로 만들기 (교수·조교 추가 창) */
.quick-create { margin-top: 16px; padding: 16px; border-radius: 8px; background: var(--bg); }
.qc-head { font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 8px; }
.qc-row { display: flex; gap: 8px; }
.qc-row .form-control { min-width: 0; background: var(--white); }
.qc-row .btn { flex-shrink: 0; min-height: 48px; }
.qc-note { font-size: 13px; color: var(--t2); line-height: 1.45; margin: 8px 0 0; }
@media (max-width: 575px) { .qc-row { flex-wrap: wrap; } .qc-row .form-control { flex: 1 1 100%; } .qc-row .btn { width: 100%; } }
.tag-role-vice { background: var(--pri-dark); color: #fff; opacity: .85; }
/* 왼쪽 위 "기관명 ChoBig" — 기관명은 진한 글자, 좁은 화면에선 말줄임 */
.topnav .brand { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.topnav .brand-org { color: var(--t1); overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
@media (max-width: 575px) { .topnav .brand-org { max-width: 32vw; font-size: 15px; } }
.add-btns { display: flex; gap: 8px; }
.panel-more { display: flex; align-items: center; gap: 4px; margin: 16px -4px 0; padding: 16px 4px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--t1); text-decoration: none; }
.panel-more .muted { font-weight: 400; color: var(--t3); }
.panel-more svg { margin-left: auto; color: var(--t3); }
.panel-more:hover { color: var(--pri); }
.add-btns .add-line { flex: 1 1 0; min-width: 0; }
/* 페이지 나누기 */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; font-size: 13px; color: var(--t2); }
.pager-per, .pager-pages { display: inline-flex; align-items: center; gap: 4px; }
.pager-per a, .pager-pages a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 8px; color: var(--t2); text-decoration: none; }
.pager-per a:hover, .pager-pages a:hover { background: var(--white); color: var(--t1); }
.pager-per a.active, .pager-pages a.active { background: var(--pri); color: #fff; font-weight: 700; }
.pager-pages { margin-left: auto; }
/* 회원 추가 창 — 자리 고르기(라디오를 버튼처럼) · 붙여넣기 칸 */
.seg-pick label { flex: 1 1 0; margin: 0; }
.seg-pick input { position: absolute; opacity: 0; pointer-events: none; }
.seg-pick span { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--t2); cursor: pointer; }
.seg-pick input:checked + span { background: var(--white); color: var(--t1); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg-pick input:focus-visible + span { outline: 2px solid var(--pri); }
.mono-area { font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 1.6; }
table.g td.td-act { white-space: nowrap; }
table.g td.td-act .dropdown { display: inline-block; vertical-align: middle; }
table.g td.td-act .go-form { margin-right: 4px; }
/* 회원 추가 창: 권한·기관·과목 — 왼쪽 이름, 오른쪽 고르기 */
.bulk-grid { display: grid; grid-template-columns: 56px 1fr; gap: 8px 12px; align-items: center; }
.bulk-grid .form-label { margin: 0; }
.bulk-grid [hidden] { display: none !important; }
/* 목록 카드 = 위 찾기 줄 + 표 ([회원]·[기관]). 찾기 줄은 한 줄, 좁으면 접힌다 */
.list-card { overflow: hidden; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--white); }
.toolbar .form-control, .toolbar .form-select { height: 42px; min-height: 42px; font-size: 14px; }
.toolbar .form-select { width: auto; flex: 0 0 auto; min-width: 128px; max-width: 200px; padding-right: 36px; background-position: right 12px center; }
.toolbar .btn { height: 42px; min-height: 42px; padding: 0 20px; font-size: 14px; }
.tb-search { position: relative; flex: 1 1 200px; min-width: 160px; }
.tb-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--t3); pointer-events: none; }
.tb-search .form-control { padding-left: 36px; }
.tb-date { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--t2); }
.tb-date .form-control { width: 140px; padding: 0 8px; }
.tb-date > span { white-space: nowrap; }
.tb-reset { font-size: 14px; color: var(--t2); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.list-empty { padding: 40px 16px; text-align: center; color: var(--t2); }
.list-card .table { border-radius: 0; }
table.g th .th-sort { color: inherit; text-decoration: none; display: inline-block; }
table.g th .th-sort:hover { text-decoration: underline; }
@media (max-width: 767px) { .toolbar .form-select { flex: 1 1 calc(50% - 4px); max-width: none; } .tb-date { flex: 1 1 100%; } .tb-date .form-control { flex: 1 1 0; width: auto; } .toolbar .btn { flex: 1 1 auto; } }
table.g th .th-sort { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
table.g th .th-sort svg { opacity: .5; }
table.g th .th-sort.on svg, table.g th .th-sort:hover svg { opacity: 1; }

/* 폰에서 표가 옆으로 밀려도 ⋯ 메뉴(비밀번호 초기화 등)는 오른쪽 끝에 보이게 (2026-10-11) */
@media (max-width: 767.98px) {
  .table-responsive table.g td.td-act { position: sticky; right: 0; background: var(--white); box-shadow: -8px 0 8px -8px rgba(17, 17, 17, .16); }
}

/* 권한 없음·없는 화면 안내 (views/error.php) */
.err-card { padding: 32px 24px; text-align: center; margin-top: 40px; }
.err-title { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.025em; color: var(--t1); margin: 0 0 8px; }
.err-sub { font-size: 14px; line-height: 1.45; color: var(--t3); margin: 0 0 24px; }
.err-btns { display: flex; gap: 8px; justify-content: center; }
.err-btns .btn { min-width: 120px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* 화면 아래 회사소개·약관·방침 (layout.php). 내용이 짧아도 화면 바닥에 붙게 */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > .main { flex: 1 0 auto; width: 100%; }
.site-foot { background: #fff; border-top: 1px solid var(--line); padding: 24px 0 32px; font-size: 12px; line-height: 1.45; letter-spacing: -0.025em; color: var(--t2); }
.site-foot.slim { background: transparent; padding: 16px 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-links a { font-size: 13px; color: var(--t2); text-decoration: none; }
.foot-links a:hover { color: var(--t1); text-decoration: underline; }
.foot-links a.b { font-weight: 700; color: var(--t1); }
.foot-info { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0 0; }
.foot-copy { margin: 8px 0 0; color: var(--t3); }
@media (max-width: 600px) { .foot-info { flex-direction: column; gap: 0; } }

/* 가입 화면 약관 동의 */
.agree { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--t2); }
.agree .form-check-input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; border-radius: 4px; border-color: var(--line-strong); }
.agree a { color: var(--t1); font-weight: 500; }

/* 회사소개·이용약관·개인정보처리방침 (views/legal.php) */
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.legal-tabs a { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; color: var(--t2); text-decoration: none; }
.legal-tabs a.on { background: var(--t1); border-color: var(--t1); color: #fff; }
.legal { padding: 32px; letter-spacing: -0.025em; }
.legal h1 { font-size: 24px; font-weight: 700; line-height: 1.4; margin: 0; }
.legal-sub { font-size: 13px; color: var(--t3); margin: 4px 0 24px; }
.legal h2 { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 32px 0 8px; }
.legal p, .legal li, .legal dd { font-size: 14px; line-height: 1.45; color: var(--t1); }
.legal p { margin: 0 0 8px; }
.legal ul { margin: 0 0 8px; padding-left: 20px; }
.legal li + li { margin-top: 4px; }
.legal-dl { display: grid; grid-template-columns: 128px 1fr; gap: 8px 16px; margin: 0 0 8px; padding: 16px; background: var(--bg); border-radius: 8px; }
.legal-dl dt { font-size: 14px; font-weight: 500; color: var(--t2); }
.legal-dl dd { margin: 0; }
@media (max-width: 600px) { .legal { padding: 24px 20px; } .legal-dl { grid-template-columns: 1fr; gap: 4px; } .legal-dl dd + dt { margin-top: 8px; } }
/* AI 사용량 — 촉 (org.php·course.php 오른쪽 카드, org_usage.php) */
.chog-now { display: flex; align-items: baseline; gap: 4px; font-size: 15px; color: var(--t1); }
.chog-now b { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; }
.chog-now span { margin-left: 8px; font-size: 13px; color: var(--t2); }
.chog-kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 32px; }
.chog-kpis > div { padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; }
.chog-kpis > div + div { border-left: 1px solid var(--line-w); }
.chog-kpis span { font-size: 13px; color: var(--t2); }
.chog-kpis b { font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.025em; color: var(--t1); }
@media (max-width: 600px) { .chog-kpis { grid-template-columns: repeat(2, 1fr); } .chog-kpis > div:nth-child(3) { border-left: 0; } .chog-kpis > div:nth-child(n+3) { border-top: 1px solid var(--line-w); } .chog-kpis > div { padding: 16px; } .chog-kpis b { font-size: 20px; } }

/* 붙임 파일 목록 (회차 과제·채점 상세) — 누르면 내려받기 */
.att-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.att-list li { display: flex; align-items: center; gap: 8px; }
.att-list a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--t1); font-size: 14px; text-decoration: none; }
.att-list a:hover { border-color: var(--line-strong); }
.att-list a svg { flex-shrink: 0; color: var(--t3); }
.att-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { font-size: 13px; color: var(--t3); flex-shrink: 0; }
/* 교직원 파일 목록 (views/_staff_files.php) — 선교육 붙임 파일 모양: 제목 → 점선 [+ 추가하기] → 파일 줄과 [지우기] (2026-10-14 교수님 "sunup 처럼") */
.fm { margin-top: 24px; }
.blk .fm { margin-top: 0; }
.fm-title { font-size: 15px; font-weight: 700; line-height: 1.4; margin: 0 0 8px; }
.fm-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; margin: 0; padding: 8px 16px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--white); color: var(--pri); font-size: 14px; font-weight: 500; text-align: center; cursor: pointer; }
.fm-add-label { display: inline-flex; align-items: center; gap: 4px; }
.fm-add-hint { font-size: 12px; font-weight: 400; color: var(--t2); }
.fm-add:hover, .fm-add.drag { border-color: var(--pri); background: var(--pri-tint); }
.fm-add.busy { pointer-events: none; opacity: .6; }
.fm .att-list, .fm .empty-line { margin-top: 8px; }
.fm-del { margin: 0; flex-shrink: 0; }
.fm-del .btn { height: 36px; }
/* 회차 과제 카드: 편집할 때만 추가·지우기·빈 목록·문제 목록, 편집할 때는 문제 미리보기 대신 목록 */
.sec-task .card:not(.editing) .fm-add, .sec-task .card:not(.editing) .fm-del, .sec-task .card:not(.editing) .fm-none, .sec-task .card:not(.editing) .fm-prob { display: none; }
.sec-task .card.editing .prob-view { display: none; }
.prob-view { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
/* 실시간 AI 채점 켜기·끄기 (round.php 채점표 위 · room.php 회차 창) */
.ai-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.ai-bar.off { background: var(--warn-tint); border-color: var(--warn-line); }
.ai-switch { display: flex; align-items: flex-start; gap: 8px; padding-left: 0; min-height: 0; }
.ai-switch .form-check-input { float: none; flex-shrink: 0; margin: 2px 0 0; width: 36px; height: 20px; cursor: pointer; }
.ai-switch label { font-size: 14px; font-weight: 500; color: var(--t1); cursor: pointer; line-height: 1.45; }
.ai-switch label span { display: block; font-size: 13px; font-weight: 400; color: var(--t2); }
/* 학생 피드백 (2026-10-15): 채점표 상세 아래 칸 · 학생 화면 "과제 피드백" */
.fbbox { grid-column: 1 / -1; }
.fbbox .fb-ta { min-height: 120px; font-size: 14px; line-height: 1.45; }
.fbbox .fb { white-space: pre-wrap; }
.fb-msg { font-size: 13px; }
.badge.fb-badge { font-size: 11px; }
.fb-body { font-size: 15px; line-height: 1.45; color: var(--t1); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }   /* 한국어는 낱말 단위로 줄바꿈 */
.fb-note { font-size: 13px; color: var(--t2); margin: 0 0 8px; }
.fb-wait { font-size: 14px; color: var(--t2); }
table.g td.ai-held { color: var(--warn-text); }
.prob-img img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.dbox .att-list { margin: 8px 0 0; }
.chog-now.out b, .chog-kpis b.txt-neg, .txt-neg { color: var(--neg); }   /* 촉이 떨어짐 */