/* 색 = '먹과 한지'(2026-10-12 사용자가 세 안 중에서 고름)
   따뜻한 종이빛 바탕 + 먹색 글자 + 청자색 강조. 하루 종일 보는 화면이라 순백보다 눈이 덜 피로하다.
   등급 · 출결 색은 **또렷이 구분되어야** 하므로 역할은 그대로 두고 채도만 낮췄다.
   되돌리려면 이 여섯 줄만 옛 값으로: --bg #f6f7f9 · --line #e3e6eb · --text #1d2330 · --muted #6b7382 · --blue #2f6fed · --blue-bg #e8f0fe · A #1f9d55 · B #2f6fed · C #d98a00 · D #d64545 */
:root {
  --bg: #faf8f4; --card: #fff; --line: #e6e1d8; --text: #1f1d1a; --muted: #6f6a60;
  --blue: #3a6b63; --blue-bg: #e7efec;
  --A: #4a7f52; --B: #41667f; --C: #a8761f; --D: #a8514a;
}
* { box-sizing: border-box; }
[v-cloak] { display: none; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 12px; }
button:hover { border-color: #c3c8d1; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
button.small { padding: 3px 9px; font-size: 13px; }
button.link { border: 0; background: none; padding: 0 4px; color: var(--blue); }
button.danger { color: var(--D); }
input, select, textarea { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; background: #fff; }
textarea { width: 100%; resize: vertical; }
.muted { color: var(--muted); } .small { font-size: 13px; } .nowrap { white-space: nowrap; }
.err { color: var(--D); }
.err.bar { background: #fdecec; padding: 8px 16px; position: sticky; top: 50px; z-index: 4; }   /* 머리줄 아래에 고정: 아래쪽에서 고치다 실패해도 보이게 */
.empty { color: var(--muted); padding: 24px 0; text-align: center; }

.top { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.logo { font-size: 17px; }
.tabs { display: flex; gap: 4px; }
.tabs button { border: 0; background: none; padding: 6px 12px; color: var(--muted); }
.tabs button.on { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.status { margin-left: auto; display: flex; gap: 12px; font-size: 13px; align-items: center; }
.demo { background: #fff4d6; padding: 2px 8px; border-radius: 6px; }

.pick { display: flex; gap: 12px; padding: 12px 16px 0; flex-wrap: wrap; align-items: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chips button { border-radius: 999px; }
.chips button.on { background: var(--text); border-color: var(--text); color: #fff; }
.date { display: flex; gap: 4px; align-items: center; margin-left: auto; }

main { padding: 4px 16px 60px; max-width: 1200px; margin: 0 auto; }
/* 넓은 화면에서는 본문도 넓게 — 진도 카드가 한 장 700px을 넘겨 2단으로 나뉜다(2026-10-12 사용자) */
@media (min-width: 1500px) { main { max-width: 1480px; } }
h2 { font-size: 16px; margin: 22px 0 8px; display: flex; gap: 8px; align-items: center; }
h3 { font-size: 15px; margin: 0 0 10px; }
.sub { margin: 4px 0 0; font-weight: 600; }
.tag { display: inline-block; font-size: 12px; background: #efebe4; border-radius: 6px; padding: 1px 7px; margin-left: 6px; font-weight: 400; }
.tag.밀림 { background: #fdecec; color: var(--D); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.card-h { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.card-h button { margin-left: auto; }
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
/* ① 출석 체크 */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.att-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.att-card.absent { background: #fafafa; }
.att-top { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.att-card .memo { min-width: 0; font-size: 13px; padding: 4px 8px; }
/* ③ 진도 | 다음 과제 */
.bar-sep { color: var(--line); font-weight: 400; margin: 0 2px; }
/* 진도표 관리 · 과제만 항목 */
tr.hwonly td, .preview-table tr.hwonly td { background: #fffdf5; }
.gubun-in { width: 58px; font-size: 13px; }
.paste-box { margin-top: 12px; border: 1px dashed var(--line); border-radius: 10px; padding: 10px; background: #fcfcfd; }
.paste-box textarea { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.preview { margin-top: 8px; }
.preview .range-hint div { margin: 2px 0; }
.ok-text { color: var(--A); }
.pcard.hwonly { border-left-style: dashed; background: #fffdf5; }
.pcard.hwonly::after { content: ' 과제'; font-size: 11px; color: var(--C); }

/* 쪽 방식 입력 */
/* 범위 칸 | 오른쪽 단추(추천 · 방법) 두 칸 격자 — 아래 줄(방법 칸 · 안내)은 왼쪽 칸 너비에 맞춘다(2026-10-13 사용자) */
.page-form, .hw-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; }
.page-form > *, .hw-field > * { grid-column: 1; min-width: 0; }
.pf-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* 분량 고르기 — 셋 가운데 하나만 켜진다(드롭다운이면 열어 보기 전엔 '전체'가 있는 줄 모른다) */
.pf-kind { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pf-kind > button.kind { padding: 3px 9px; font-size: 13px; white-space: nowrap; color: var(--muted); }
.pf-kind > button.kind.on { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); font-weight: 600; }
.pf-main > .page-in { flex: 1; min-width: 0; }
.pf-side { grid-column: 2 !important; display: flex; align-items: center; gap: 8px; }
/* 방법 칸 오른쪽의 닫기(×) — 칸과 같은 줄, 오른쪽 칸에 서는 네모 단추 */
.pf-x { grid-column: 2 !important; border: 0; background: #efece6; color: var(--muted);
  font-size: 12px; line-height: 1; border-radius: 6px; padding: 5px 9px; justify-self: start; }
.pf-x:hover { background: #f3dedb; color: #a8514a; }
/* 방법 칸은 위 범위 칸과 같은 크기(카드 · 학생 보기 · 프린트 모두) */
.page-form .hw-note, .hw-field .hw-note { margin-top: 0; font-size: 15px; padding: 6px 9px; }   /* 칸 머리(진도)가 이미 나누므로 점선 · 위 여백을 두지 않는다 — 오른쪽 과제 칸과 높이를 맞춤(2026-10-13 사용자) */
.page-form .page-in { flex: 1; font-size: 15px; }
.page-form .page-in.plan { color: var(--muted); border-color: var(--blue); }
.plan-tag { font-size: 12px; background: var(--blue-bg); color: var(--blue); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.page-form .page-extra { flex: 1; min-width: 0; }
.learned input { width: 100%; font-weight: 600; }
.sugg { background: #f8f6f1; border-radius: 8px; padding: 6px 8px; }
.sugg.first { background: #fafafa; }
.sugg-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 2px 0; font-size: 13px; cursor: pointer; }
.sugg-row.dim { color: var(--muted); }
.sugg-row .tag { margin-left: auto; }

/* 계획표: 행 = 날짜, 열 = 교재 */
.plan-bar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 6px; }
.plan-bar-btns { display: flex; gap: 8px; align-items: center; }
.plan-msg { margin: 0 0 6px; font-size: 13px; color: var(--blue); }
.plan-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.board { border: 0; border-radius: 0; border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.board th, .board td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 4px 6px; }
.board thead th { position: sticky; top: 0; z-index: 3; background: #fafbfc; }
.board thead tr:nth-child(2) th { top: 29px; }
.board th.grp { text-align: center; color: var(--blue); border-bottom: 2px solid var(--blue); }
.board th.book { min-width: 170px; font-weight: 600; color: var(--text); }
.board .date-col { position: sticky; left: 0; z-index: 2; background: #fafbfc; white-space: nowrap; font-size: 13px; width: 78px; }
.board thead .date-col { z-index: 4; }
.board tr.today .date-col { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.board tr.past td.cell { background: #fcfcfd; }
.today-tag { display: block; font-size: 11px; }
.board tr.unplanned td { background: #fffbea; }
.board tr.unplanned .date-col { background: #fff4d6; color: var(--C); }
.board td.cell { vertical-align: top; min-width: 170px; height: 34px; }
.board td.cell.off { background: repeating-linear-gradient(135deg, #f1f2f4 0 6px, #f7f8f9 6px 12px); }
.board td.cell.target:not(.off) { background: #f3f8ff; }
.board td.cell.over { background: #dbe8ff !important; outline: 2px dashed var(--blue); outline-offset: -3px; }
.pcard { background: #fff; border: 1px solid #cfd6e2; border-left: 3px solid var(--blue); border-radius: 6px; padding: 2px 6px; margin: 2px 0;
  font-size: 13px; cursor: grab; user-select: none; }
.pcard:hover { border-color: var(--blue); }
.pcard .no { color: var(--muted); font-size: 12px; margin-right: 4px; }
.pcard.late { border-left-color: var(--D); }
.pcard.locked { cursor: default; background: #f3f5f8; color: var(--muted); border-left-color: var(--A); }
.pcard.sel { box-shadow: 0 0 0 2px var(--blue); }
.done-mark { color: var(--A); font-size: 12px; margin-left: 4px; }
.plan-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
.plan-tools h3.mt { margin-top: 14px; }
.plan-tools .auto select { max-width: 220px; }
.detail-grid { display: grid; gap: 6px; margin: 6px 0; }
.detail-grid label { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 6px; }

/* 교재 카드: 왼쪽 진도 | 오른쪽 다음 과제 */
/* auto-fill — 교재가 하나뿐인 그룹(진도 B)도 **반 폭**으로 남아 다른 그룹과 같은 2단으로 보인다(2026-10-12 사용자) */
/* 한 장에 700px은 있어야 2단으로 나눈다 — 1,400px이 넘는 넓은 화면에서만 두 장씩(2026-10-12 사용자: 좁으면 쓰기 불편) */
.tracks.wide { grid-template-columns: repeat(auto-fill, minmax(700px, 1fr)); }
@media (max-width: 640px) { .tracks.wide { grid-template-columns: 1fr; } }
.card-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; }
@media (max-width: 640px) { .card-body { grid-template-columns: 1fr; } }
/* 과제 칸의 왼쪽 띠도 **그 그룹 색**(2026-10-12 사용자) — 카드에 붙은 .gcN이 --g를 준다 */
.next-hw { background: #f8f6f1; border-left: 4px solid var(--g, var(--blue)); border-radius: 0 8px 8px 0; padding: 6px 10px; align-self: stretch; }
.card-body > .prog { padding: 6px 0; }   /* 오른쪽 과제 칸과 위아래 시작점을 맞춘다 */
.next-h { font-size: 12px; font-weight: 600; color: var(--blue); margin-bottom: 4px; }
.nh-item { padding: 4px 0; }
.nh-item + .nh-item { border-top: 1px dashed var(--line); }
.nh-item b { font-size: 14px; }
.nh-edit { width: 100%; margin-top: 4px; }
.nh-add { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.nh-add select { max-width: 100%; flex: 1 1 100%; font-size: 13px; }
.nh-add input { flex: 1 1 100px; min-width: 0; }
.hw-memo { width: 110px; margin-left: 6px; font-size: 12px; padding: 3px 6px; }
.hw-memo:disabled { background: #fafafa; }
input.bad { border-color: var(--D); background: #fff6f6; }
.range-hint { width: 100%; margin: 2px 0 0; font-size: 12px; color: var(--D); }
.range-hint.ok { color: var(--muted); }
.plan-note { color: var(--blue); margin: 4px 0; }
.range-help { margin-top: 10px; font-size: 13px; }
.range-help summary { cursor: pointer; color: var(--blue); }
.range-help table { margin: 6px 0; font-size: 13px; }
.range-help td:nth-child(odd) { font-family: ui-monospace, Consolas, monospace; }
.card.offday { opacity: .6; }
.hw.late { background: #fff6f6; border-radius: 6px; padding-left: 4px; }
.hw.exempt .hw-name { text-decoration: line-through; color: var(--muted); }
.late-tag { color: var(--D); font-weight: 600; margin-left: 6px; }
.grades .fin { width: auto; padding: 3px 8px; margin-left: 6px; font-weight: 500; }
.grades .fin.done:not(:disabled) { color: var(--A); border-color: var(--A); }
.grades .fin.undone { color: #fff; background: var(--D); border-color: var(--D); }
.grades .fin:disabled { color: #c3c8d1; cursor: default; }
.grades .ex { width: auto; padding: 3px 8px; font-weight: 500; color: var(--muted); }
.grades .ex.on { background: #6b7382; border-color: #6b7382; color: #fff; }
.hw-rec { font-size: 13px; }
input.offday { border-color: var(--D); }
p .short { width: 90px; }
.direct-plan { margin-top: 10px; }
.group { margin-bottom: 14px; }
/* 그룹 머리 줄의 띠도 **그 그룹 색**으로(2026-10-12 사용자) — 아래 교재 카드 · 과제 검사 띠와 같은 색 */
.group-h { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; padding-left: 10px; border-left: 4px solid var(--g, var(--blue)); flex-wrap: wrap; }
.group-h button { margin-left: auto; }
.gtag { display: inline-block; font-size: 11px; font-weight: 500; background: var(--blue-bg); color: var(--blue); border-radius: 5px; padding: 0 6px; margin: 2px 3px 0 0; }
.gtag.none { background: #fdecec; color: var(--D); }
small.book { font-size: 11px; background: #efebe4; color: var(--muted); border-radius: 4px; padding: 0 5px; margin: 0 2px 0 0 !important; }
small.book.prt { background: #f3e8ff; color: #7c3aed; }   /* 프린트 · 유인물 — 교재와 눈에 띄게 구분(2026-10-13 사용자) */
.warn { color: var(--C); }
.flex1 { flex: 1; }
.sub-h { margin: 6px 0 4px; }
.item { display: flex; gap: 8px; align-items: center; padding: 5px 4px; border-radius: 6px; cursor: pointer; }
.item:hover { background: #f3f5f8; }
.item.done { background: var(--blue-bg); }
.item input { width: 18px; height: 18px; margin: 0; }
.item .no { color: var(--muted); width: 22px; text-align: right; font-size: 13px; }
.item .name { flex: 1; }
.badge { font-size: 12px; color: var(--muted); white-space: nowrap; }
.badge.오늘 { color: var(--blue); font-weight: 600; }
.badge.밀림 { color: var(--D); font-weight: 600; }

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #fafbfc; font-size: 13px; color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.students .nm { font-weight: 600; white-space: nowrap; }
.students tr.absent { background: #fafafa; color: var(--muted); }
.att { white-space: nowrap; }
.att button, .grades button { padding: 3px 8px; font-size: 13px; margin-right: 2px; }
.att button.on.a-출석 { background: var(--A); border-color: var(--A); color: #fff; }
.att button.on.a-지각 { background: var(--C); border-color: var(--C); color: #fff; }
.att button.on.a-조퇴 { background: var(--B); border-color: var(--B); color: #fff; }
.att button.on.a-결석 { background: var(--D); border-color: var(--D); color: #fff; }
.hw { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 2px 0; }
.hw + .hw { border-top: 1px dashed var(--line); }
.hw-name small, .item .name small { margin-left: 6px; }
.grades { white-space: nowrap; }
.grades button { width: 30px; padding: 3px 0; font-weight: 600; }
.grades button.on.g-A { background: var(--A); border-color: var(--A); color: #fff; }
.grades button.on.g-B { background: var(--B); border-color: var(--B); color: #fff; }
.grades button.on.g-C { background: var(--C); border-color: var(--C); color: #fff; }
.grades button.on.g-D { background: var(--D); border-color: var(--D); color: #fff; }
b.g-A { color: var(--A); } b.g-B { color: var(--B); } b.g-C { color: var(--C); } b.g-D { color: var(--D); }
.memo { width: 100%; min-width: 120px; }
.pill { font-size: 12px; padding: 1px 8px; border-radius: 999px; color: #fff; }
.pill.a-출석 { background: var(--A); } .pill.a-지각 { background: var(--C); } .pill.a-조퇴 { background: var(--B); } .pill.a-결석 { background: var(--D); }
.hw-rec { display: inline-block; margin-right: 10px; font-size: 13px; }

.auto { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.num { width: 64px; }
.plan tr.done { color: var(--muted); }
.plan tr.late td:nth-child(4) input { border-color: var(--D); }
.plan td input:not([type=number]):not([type=date]) { width: 100%; }

.summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; }
.summary div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; text-align: center; min-width: 72px; }
.summary b { display: block; font-size: 20px; }
.summary span { font-size: 12px; color: var(--muted); }

.row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; flex-wrap: wrap; }
.row > input:first-child, .row > form > input:first-child { flex: 1; min-width: 120px; }
.row .short { width: 90px; }
.row.off { opacity: .5; }
form textarea { margin-bottom: 6px; }

.login { max-width: 320px; margin: 15vh auto; display: flex; flex-direction: column; gap: 10px; background: #fff; padding: 28px; border-radius: 14px; border: 1px solid var(--line); }
.login h1 { margin: 0 0 8px; font-size: 22px; }

@media (max-width: 640px) {
  .date { margin-left: 0; }
  .tracks { grid-template-columns: 1fr; }
  .hw { flex-direction: column; align-items: flex-start; }
}

/* ---------- 차시 편집 · 관리 진도표: 표 (차시 | 단원 | 항목 | 과제) ---------- */
.chasi .card { margin-bottom: 12px; }
.chasi .mt { margin-top: 8px; }
.tag.ver { background: #fff4e0; color: var(--C); }
.save-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff8e6; border: 1px solid #f3dca5; border-radius: 8px; padding: 6px 10px; margin: 8px 0; position: sticky; top: 0; z-index: 2; }
.chasi-list { border-top: 1px solid var(--line); }
.chasi-list.ro { max-height: 560px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
.c-head { display: grid; grid-template-columns: 110px 190px minmax(0, 1fr) minmax(200px, 30%); gap: 12px; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 4px; border-bottom: 1px solid var(--line); background: #f7f8fa; }
.chasi-list.ro .c-head { position: sticky; top: 0; z-index: 1; }
.c-block { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(200px, 30%); gap: 12px; padding: 4px 0; align-items: stretch; }
.c-cha { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 4px 6px; }
.c-cha b { color: var(--blue); font-size: 15px; }
.c-badge { display: inline-block; font-size: 11px; background: #eef0ff; color: #4b4fb8; border: 1px solid #d6d9f5; border-radius: 6px; padding: 0 6px; cursor: default; white-space: nowrap; }
.c-mid, .c-items { min-width: 0; }
.c-seg { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; }
/* 단원 칸: 색 구분 없이 차분하게, 대단원은 바뀔 때만 굵게 */
.c-unit { background: #f5f6f8; border-left: 2px solid #d5d9e0; border-radius: 4px; padding: 5px 8px; font-size: 12px; line-height: 1.5; color: #444; }
.c-unit .u-big { color: #1d2330; font-weight: 700; font-size: 13px; }
.c-switch { position: relative; height: 18px; margin: 2px 0; }
.c-switch::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dotted #9aa3b0; }
.c-switch span { position: absolute; left: 50px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #4b4fb8; background: #eef0ff; border-radius: 8px; padding: 0 8px; }
.c-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 5px 6px; }
.c-row.off { opacity: .45; }
.c-row.off .c-name { text-decoration: line-through; }
.c-row.hwonly .c-name { color: #555; }
.c-name { min-width: 0; overflow-wrap: anywhere; }
.c-hw { align-self: start; font-size: 12px; color: #444; background: var(--blue-bg); border-radius: 6px; padding: 5px 8px; margin: 3px 0; overflow-wrap: anywhere; }
.c-sep { border-top: 1px dashed #b8bfca; margin: 2px 6px; }
.c-legend { margin-top: 10px; }
/* 항목 사이에 마우스 → [차시 나누기], 차시 사이 점선에 마우스 → [합치기] */
.c-gap { position: relative; height: 10px; cursor: pointer; }
.c-gap::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 2px solid transparent; }
.c-gap:hover::before { border-top-color: var(--blue); }
.c-gap.boundary { height: 18px; }
.c-gap.boundary::before { border-top: 1px dashed #b8bfca; }
.c-gap.boundary:hover::before { border-top: 2px dashed var(--C); }
.c-act { display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: #fff; background: var(--blue); padding: 1px 9px; border-radius: 10px; z-index: 1; }
.c-gap.boundary .c-act { background: var(--C); }
.c-gap:hover .c-act { display: inline; }
.c-gap.fixed { pointer-events: none; }
/* 불러오는 동안 수업 화면 입력을 막는 틀 (모양 없음) */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain:disabled { opacity: .7; }

/* ---------- 관리: 왼쪽 목록 + 오른쪽 상세 + 학생 배정 창 ---------- */
.admin2 { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.anav { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; position: sticky; top: 64px; display: grid; gap: 2px; max-height: calc(100vh - 80px); overflow-y: auto; }
.anav > button { display: flex; justify-content: space-between; gap: 6px; width: 100%; border: 0; background: none; padding: 5px 8px; border-radius: 6px; text-align: left; }
.anav > button:hover { background: #f3f5f8; }
.anav .n-ban { font-weight: 600; margin-top: 4px; }
.anav .n-ban.cur { color: var(--blue); }
.anav .n-sub { padding-left: 20px; font-size: 14px; }
.anav .n-sub.on { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.anav .n-add { color: var(--blue); margin-top: 8px; }
.anav .cnt { color: var(--muted); font-size: 12px; font-weight: 400; }
.anav .cnt.bad { color: var(--C); font-weight: 700; }
.anav .a-add input { width: 100%; margin-bottom: 6px; }
.apane { min-width: 0; }
.apane .card { margin-bottom: 12px; }
.a-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.a-head button.on { border-color: var(--blue); color: var(--blue); }
.title-in { font-size: 18px; font-weight: 700; border: 1px solid transparent; background: transparent; padding: 2px 6px; min-width: 0; width: 280px; max-width: 100%; }
b.title-in { width: auto; padding-right: 0; }   /* 고치는 칸이 아닌 제목은 글자만큼만 — [?]가 바로 옆에 붙게(2026-10-13 사용자) */
.title-in:hover { border-color: var(--line); }
.title-in:focus { border-color: var(--blue); background: #fff; outline: 0; }
.a-sub { color: var(--muted); font-size: 13px; margin: 4px 0 8px 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.a-sub .short { width: 90px; }
.a-lab { font-size: 12px; font-weight: 600; color: var(--muted); margin: 16px 0 6px; }
.a-add { border: 1px dashed #c3c8d1; border-radius: 10px; padding: 10px; margin: 8px 0; background: #fcfcfd; }
.a-note { background: #eef8f1; color: #1b6b3d; border-radius: 8px; padding: 6px 10px; font-size: 13px; margin: 0 0 10px; }
.mt6 { margin-top: 6px; }
.warn-dot { display: inline-block; color: #fff; background: var(--D); border-radius: 50%; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 11px; margin-left: 4px; cursor: help; }
/* '···' 메뉴 */
.more { position: relative; }
.more > summary { list-style: none; cursor: pointer; padding: 2px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 700; color: var(--muted); user-select: none; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary { border-color: #c3c8d1; }
.more-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 24, 33, .12); padding: 6px; width: 260px; z-index: 6; }
.more-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 6px; }
.more-menu button:hover:not(:disabled) { background: #fdecec; }
.more-menu button:disabled { color: #b0b6c0; cursor: default; }
.more-menu .why { font-size: 12px; color: var(--muted); padding: 0 8px 4px; }
/* ① 반: 그룹 요약 · 학생 목록 */
.g-sum { display: grid; grid-template-columns: 140px minmax(0, 1fr) 48px; gap: 8px; padding: 7px 6px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: start; }
.g-sum:hover, .s-row:hover { background: #f8f6f1; }
.g-sum .tr-mini { font-size: 13px; }
.g-sum > span { text-align: right; }
.s-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; padding: 6px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: center; }
.s-row.off { color: var(--muted); }
/* ② 그룹: 학생 칩 · 교재 카드 */
.chips-s { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-s { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 2px 2px 10px; font-size: 13px; background: #fff; }
.chip-s button { border: 0; background: none; padding: 0 7px; color: var(--muted); border-radius: 999px; }
.chip-s button:hover { color: var(--D); background: #fdecec; }
.chip-s.dim { color: var(--muted); border-style: dashed; }
.add-sel { font-size: 13px; padding: 2px 8px; border-style: dashed; border-radius: 999px; color: var(--blue); }
.tcard { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.tcard.open { border-color: var(--blue); }
.tcard-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; cursor: pointer; }
.tcard-h:hover { background: #f8f6f1; border-radius: 10px; }
.tcard-b { border-top: 1px solid var(--line); padding: 10px; }
.kv { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px 10px; align-items: center; font-size: 14px; margin: 4px 0 10px; }
.kv .short { width: 90px; }
/* ③ 학생: 그룹 넣고 빼기 */
.gchip { border-radius: 999px; padding: 2px 12px; font-size: 13px; margin: 0 4px 4px 0; }
.gchip.on { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); font-weight: 600; }
/* ④ 학생 배정 창 */
.modal-bg { position: fixed; inset: 0; background: rgba(20, 24, 33, .45); z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; overflow-y: auto; }
.modal-bg:has(.note-modal) { padding: 3vh 12px; }   /* 보낼 글 창은 위아래 여백을 줄여 더 넓게 쓴다 */
.modal { background: #fff; border-radius: 14px; padding: 16px 18px; width: min(760px, 100%); }
.m-title { font-size: 17px; }
.asg { margin-top: 10px; }
.modal .scroll { max-height: calc(84vh - 170px); overflow: auto; margin-top: 10px; }
.modal table.asg { overflow: visible; margin-top: 0; }
.asg thead th { position: sticky; top: 0; background: #fafbfc; z-index: 1; }
.asg th, .asg td { text-align: center; vertical-align: middle; padding: 0; }
.asg th { padding: 8px 10px; }
.asg th:first-child, .asg td:first-child { text-align: left; padding: 6px 10px; white-space: nowrap; }
.asg td.chg { background: #fff4d6; box-shadow: inset 0 0 0 2px #f0c65a; }
.cell-l { display: block; padding: 8px 10px; cursor: pointer; }
.cell-l input { width: 18px; height: 18px; margin: 0; cursor: pointer; }

/* 쪽 입력: 이 쪽의 내용 · 낼 과제 상세 */
.learned-list { border-left: 2px solid var(--line); margin-left: 2px; padding-left: 8px; }
.ll-row { font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; color: var(--muted); padding: 1px 6px; border-radius: 4px; }
.ll-row.on { color: #1d4ed8; background: #eaf1ff; font-weight: 600; }
.sugg-one + .sugg-one { margin-top: 2px; }
.sugg-one.dim { color: var(--muted); }
.hw-detail { font-size: 13px; padding-left: 22px; }

/* ---------- 계획표(보기 전용) · 쉬는 날 ---------- */
.board .pcard { cursor: default; }
.pcard.plan { border-left-color: var(--blue); background: #f5f8ff; }
.pcard .pp { font-size: 11px; color: var(--muted); }
.board tr.rest .date-col { background: #fdecec; color: var(--D); }
.rest-tag { display: block; font-size: 11px; color: var(--D); }
/* ---------- 진도표 관리: 교재구성 표 ---------- */
/* 표 안 스크롤 없이 페이지 스크롤로 — 머리글은 위쪽 머리(56px) 아래에 붙어 따라온다 */
.comp-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: visible; }
table.comp { border: 0; border-radius: 0; overflow: visible; }
table.comp th { position: sticky; top: 56px; z-index: 1; }
table.comp td { padding: 5px 8px; vertical-align: middle; }
table.comp tr.unit-row td { background: #f5f6f8; font-size: 13px; }
table.comp select { padding: 2px 4px; font-size: 13px; }
input.lv { width: 60px; padding: 2px 6px; font-size: 13px; }
input.lv::placeholder { color: #a5abb6; }
.hw-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; background: var(--blue-bg); border-radius: 6px; padding: 2px 4px 2px 8px; margin: 2px 4px 2px 0; }
.hw-chip input.lv { width: 58px; background: #fff; }
/* 교재구성 편집 · 줄 넣기 · 오늘 기록 이름 */
table.comp tr.off td { color: var(--muted); text-decoration: line-through; }
table.comp tr.editing td { background: #f5f8ff; }
table.comp tr.edit-row td { background: #f5f8ff; border-bottom: 2px solid var(--blue); }
.hw-edit { margin-bottom: 4px; }
.hw-edit select { max-width: 180px; }
.mid-in { width: 260px; max-width: 100%; }
.add-line { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.add-line select { max-width: 200px; }
input.rec-name { border: 1px solid transparent; background: transparent; font-weight: 600; padding: 1px 4px; min-width: 0; width: 220px; }
input.rec-name:hover { border-color: var(--line); }
input.rec-name:focus { border-color: var(--blue); background: #fff; outline: 0; }
table.comp tr.edit-row td input:not([type=number]) { width: auto; }
table.comp tr.edit-row td input.short { width: 110px; }
table.comp tr.edit-row td input.mid-in { width: 320px; }
table.comp tr.edit-row td input.gubun-in { width: 70px; }
table.comp tr.edit-row .kv { margin: 4px 0 8px; }
/* 오늘 수업 카드: 왼쪽 진도 | 오른쪽 과제 */
.card-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.col-h { font-size: 12px; font-weight: 700; color: var(--blue); margin-bottom: 6px; letter-spacing: .02em;
  display: flex; align-items: center; gap: 8px; line-height: 22px; height: 26px; }   /* 좌우 칸 머리 높이를 같게(2026-10-13 사용자) */
.col-h label, .col-h button { font-weight: 400; color: var(--text); }
.col-h input[type=date] { padding: 0 4px; font-size: 12px; height: 22px; }
.col-h button.small { padding: 1px 7px; }
.save-row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 4px; }
.next-hw .sugg { background: #fff; }
.hw-line { margin: 2px 0 4px 26px; font-size: 13px; }
.hw-range { font-weight: 600; }
.hw-what { font-size: 12px; color: var(--muted); margin-top: 1px; }
.hw-what::before, .learned > .small.muted::before { content: '└ '; color: #b8bfca; }   /* 진도 쪽에도 같은 꺾쇠(2026-10-13 사용자) */
.learned > .small.muted { font-size: 12px; margin-top: 1px; }
.extra-hw { margin: 8px 0 10px; }
.extra-hw input { width: 100%; font-size: 13px; }
.next-hw .next-h { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #c9d6f3; }
/* 과제 입력칸 */
.hw-field { margin-bottom: 10px; }
.hw-field .row { margin-bottom: 2px; }
.hw-field input.page-in { flex: 1; font-size: 15px; }
.hw-add { margin: 4px 0 10px; }
.hw-add select { max-width: 170px; font-size: 13px; }
.card-foot { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.undo-btn { padding: 2px 8px; font-size: 16px; line-height: 1.2; min-width: 32px; }
.saved-mark { color: #15803d; font-weight: 600; }
.rule-box { margin: 6px 0 10px; padding: 10px 12px; background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.rule-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rule-h { font-weight: 700; margin-bottom: 4px; }
.rule-h.ok { color: #15803d; } .rule-h.no { color: #b91c1c; }
.rule-i { margin: 2px 0; }
.rule-list { margin: 8px 0 6px; padding-left: 18px; color: var(--text); }
.rule-list li { margin: 2px 0; }
.done-tag { color: #15803d; font-size: 11px; }
/* 체크 줄: 글이 길면 체크박스 뒤에서 이어 줄바꿈(체크박스만 한 줄에 남지 않게) — 둘째 줄은 글 머리에 맞춤 */
label.ll-row { cursor: pointer; display: block; padding-left: 22px; text-indent: -16px; }
label.ll-row > * { text-indent: 0; }
label.ll-row > span + span { margin-left: 6px; }
label.ll-row input[type=checkbox] { margin: 0 3px 0 0; width: 13px; height: 13px; vertical-align: -2px; }
.hw-pick { margin-top: 6px; }
.hw-note { width: 100%; margin-top: 4px; font-size: 12px; padding: 3px 8px; }
.hw-note-t { font-size: 12px; color: #92400e; background: #fef3c7; border-radius: 4px; padding: 0 5px; }

/* 출결 사유 · 학부모 인지 — 지각 · 조퇴 · 결석일 때만 나오고, 줄이 좁으면 둘째 줄로 내려간다 */
.att-why { flex-basis: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-left: 54px; }
.att-why select { width: 116px; font-size: 12px; padding: 3px 6px; }
.att-why .why-k { font-size: 12px; color: var(--muted); }
.att-why input.why-in { flex: 1; min-width: 90px; font-size: 12px; padding: 3px 8px; }
.knows { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.knows input { margin: 0; }

/* 시험: 시험지를 골라 넣고 대상 · 점수를 적는다 */
.quiz-add { padding: 8px 10px; background: #f8f6f1; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
.quiz-add .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.quiz-add input { width: 190px; }
.quiz-one { border: 1px solid var(--line); border-radius: 8px; background: var(--card); margin-bottom: 8px; overflow: hidden; }
.quiz-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; background: #f8f6f1; border-bottom: 1px solid var(--line); }
.quiz-head button { margin-left: auto; }
.quiz-who button.on { background: var(--A); border-color: var(--A); color: #fff; }
.quiz-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 10px; padding: 8px 10px; }
.quiz-row { display: flex; align-items: center; gap: 6px; }
.quiz-row.off { color: var(--muted); }
input.score { width: 64px; text-align: center; }
.device-new { padding: 6px 10px; margin-bottom: 6px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; flex-wrap: wrap; }
.device-new button { margin-left: auto; }
/* 결석으로 적었는데 등원이 찍힌 학생 — 노란 줄보다 눈에 띄게. 학생마다 단추가 붙으므로 오른쪽으로 밀지 않는다 */
.device-new.warn-row { background: #fef2f2; border-color: #fecaca; gap: 4px 12px; }
.device-new.warn-row button { margin-left: 4px; }

/* 오늘 수업 시작 안내 */
.start-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; }
.start-bar > div { flex: 1; min-width: 200px; }
.start-bar p { margin: 2px 0 0; }
fieldset.plain:disabled { opacity: .55; }

/* 그날 학생에 대한 종합의견 */
.opinion { width: 100%; margin-top: 6px; font-size: 13px; padding: 4px 8px; }
.opinion-rec { margin-top: 4px; font-size: 13px; padding: 3px 8px; background: #f8f6f1; border-left: 2px solid var(--line); border-radius: 4px; }
.att-cell { white-space: nowrap; }
.att-cell .block { display: block; white-space: normal; }
.open-set { display: flex; gap: 10px; flex-wrap: wrap; }
.open-set label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.open-set input { margin: 0; }

/* 알림장: 학생마다 한 장 (알림톡으로 한 사람씩 보낼 단위) */
.note-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 6px; }   /* 학생 카드는 한 열 — 긴 의견을 쓰기 편하고 학생을 헷갈리지 않게 */
.note-one { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.note-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #f8f6f1; border-bottom: 1px solid var(--line); }
.note-head button { margin-left: 0; }
.note-head .sent-tag { margin-left: auto; }
.sent-tag { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; padding: 1px 6px; border-radius: 10px;
  color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; white-space: nowrap; }
.sent-tag.stale { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.sent-tag .undo-btn { padding: 0 2px; }
.note-pre { margin: 0; padding: 8px 10px; font: 13px/1.6 inherit; white-space: pre-wrap; word-break: break-word; }
.ll-row.again { color: #92400e; font-style: italic; }
.undone-cnt { margin-top: 4px; font-size: 11px; padding: 1px 6px; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; cursor: pointer; }
.undone-row td { padding-top: 0; }
.undone-item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; padding: 3px 8px; background: #fef2f2; border-radius: 6px; margin: 2px 0; }
.undone-item.done { background: #f0fdf4; color: var(--muted); }
.undone-cnt.done { color: var(--muted); background: #f8f6f1; border-color: var(--line); }
.att-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 4px 12px; }
.att-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; flex-wrap: wrap; }
.att-row.absent { background: #fafafa; }
.att-row .att-nm { min-width: 48px; }
/* 출결기로 찍힌 시각 — 줄 오른쪽 끝 */
.att-time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.att-row .memo { flex: 1; min-width: 60px; font-size: 12px; padding: 3px 8px; }
.att button.on.기본.a-출석 { opacity: .45; }
.cal { display: inline-block; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; background: var(--card); }
.cal-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
.cal-w { text-align: center; font-size: 11px; color: var(--muted); }
.cal-d { height: 28px; padding: 0; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.cal-d.수업 { color: var(--text); font-weight: 700; }
.cal-d.오늘 { border-color: var(--line); }
.cal-d.선택 { background: #fee2e2; border-color: #f87171; color: #b91c1c; }
.cal-d.쉼 { color: #9ca3af; text-decoration: line-through; background: #f3f4f6; cursor: default; }
.cal-d.빈 { visibility: hidden; }
.rest-off { text-decoration: line-through; color: var(--muted); }
.rest-why { margin-bottom: 6px; }
.rest-picked { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.pick-chip { font-size: 12px; background: #fee2e2; color: #991b1b; border-radius: 12px; padding: 1px 4px 1px 8px; }
.pick-chip button { padding: 0 4px; color: #991b1b; }
.chip-why { cursor: pointer; }
.chip-why:hover { text-decoration: underline; }
.pick-chip select, .pick-chip input { font-size: 12px; padding: 0 4px; height: 22px; }
.pick-chip input { width: 110px; }
.modal-bg:has(.confirm-box) { z-index: 40; align-items: center; }
.confirm-box { width: min(440px, 100%); }
.confirm-text { white-space: pre-line; margin: 0 0 14px; line-height: 1.5; }
.confirm-btns { justify-content: flex-end; }
.cal-d.보강 { background: #dcfce7; border-color: #4ade80; color: #15803d; }
.extra-tag { display: block; font-size: 11px; color: #15803d; }
.rest-word { color: #b91c1c; font-weight: 600; } .extra-word { color: #15803d; font-weight: 600; }
.chip-btn { font-size: 12px; padding: 2px 10px; border-radius: 12px; }
.chip-btn.on { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; font-weight: 600; }
.import-rest { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.check-clash { background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; }
.check-clash .row { justify-content: space-between; margin-bottom: 4px; }
/* 달력: 색만으로 구분하지 않게 작은 글자 표시(휴 = 쉬는 날, 보 = 보강일) */
.cal-d { position: relative; }
.cal-d.선택::after, .cal-d.보강::after { position: absolute; right: 2px; top: 1px; font-size: 8px; line-height: 1; font-weight: 700; }
.cal-d.선택::after { content: '휴'; }
.cal-d.보강::after { content: '보'; }

/* ---------- 출결기 (학원 태블릿) ---------- */
.kiosk { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.k-box { width: min(440px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; text-align: center; }
.k-title { font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.k-num { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.k-num span { width: 48px; height: 60px; border-bottom: 3px solid var(--line); font-size: 34px; font-weight: 600; line-height: 60px; }
.k-num span.on { border-color: var(--blue); }
.k-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.k-pad button { height: 72px; font-size: 30px; font-weight: 600; border-radius: 14px; }
.k-pad button.fn { font-size: 18px; color: var(--muted); }
.k-name { font-size: 34px; font-weight: 700; margin: 6px 0; }
.k-cls { color: var(--muted); margin-bottom: 14px; }
.k-big { display: block; width: 100%; height: 76px; font-size: 26px; font-weight: 600; border-radius: 14px; margin: 10px 0; }
.k-big.main { background: var(--blue); color: #fff; border-color: var(--blue); }
.k-sub { margin-top: 10px; font-size: 16px; padding: 10px 16px; }
.k-row { display: flex; gap: 10px; justify-content: center; }
.k-ok { font-size: 48px; color: #15803d; }
.k-time { font-size: 44px; font-weight: 700; color: #15803d; font-variant-numeric: tabular-nums; }
.k-hint { color: var(--muted); margin: 8px 0; }
.k-err { color: #b91c1c; margin-top: 14px; font-weight: 600; }
input.num5 { width: 90px; font-variant-numeric: tabular-nums; letter-spacing: 2px; }

/* 알림장 학생 카드: 오늘 종합의견 칸 → 알림장 미리보기 */
.note-op { background: #f5f8ff; border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.note-op-h { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.note-op textarea { width: 100%; font-size: 14px; resize: vertical; }
.note-pre-h { margin: 4px 0 2px; }

/* 알림장: 공통 안내 → 그룹별 수업 내용(접힘) → 학생별 종합의견(한 열, 미리보기는 펼침) */
.send-lock { margin: 2px 0 6px; }   /* 보내기 잠김 안내는 머리에 한 번만(줄마다 되풀이하지 않는다) */
.note-sec-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
.att-tag { font-size: 12px; color: #15803d; }
.att-tag.bad { color: #b91c1c; font-weight: 600; }
textarea.note-op-in { display: block; width: calc(100% - 20px); margin: 8px 10px 0; font-size: 14px; resize: vertical; field-sizing: content; min-height: 3.4em; }
.note-foot { display: flex; align-items: center; gap: 6px; padding: 6px 10px 8px; }
.note-foot .muted { flex: 1; }
.note-one > .note-pre { border-top: 1px solid var(--line); background: #fafbfc; }

/* ③ 진행 없는 교재: 한 줄로 접힘 */
.card-fold { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; background: #fafbfc; font-size: 14px; margin-bottom: 8px; }
/* 오늘 수업 바로가기: 위에 붙어 따라온다 */
.jump { position: sticky; top: 56px; z-index: 4; display: flex; gap: 14px; padding: 6px 2px; background: var(--bg, #f6f7f9); border-bottom: 1px solid var(--line); }
section h2[id] { scroll-margin-top: 100px; }   /* 위쪽 머리(56px) + 바로가기 줄 */
.jump { align-items: center; gap: 6px; }
.jump-sep { color: var(--muted); }
.jump button.todo { color: #c2410c; font-weight: 600; }

/* 선생님 · 권한 */
.who { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.who select { font-size: 12px; padding: 1px 4px; }
.view-only { font-size: 11px; color: var(--muted); }
.view-bar { padding: 8px 12px; margin: 0 0 10px; background: #f1f5f9; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.n-tch { display: flex; justify-content: space-between; width: 100%; text-align: left; font-weight: 700; padding: 8px 10px; margin-top: 6px; border-radius: 8px; background: transparent; border: 0; }
.n-tch.cur { background: #e8f0fe; }
.n-label { font-size: 12px; color: var(--muted); margin: 10px 0 2px 10px; }
.n-ban.in-t { padding-left: 22px; }

/* 진도표 관리: 작업별 탭 · 차시 접기 */
.work-tabs { display: flex; gap: 4px; margin: 4px 0 10px; border-bottom: 1px solid var(--line); }
.work-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; padding: 8px 14px; font-weight: 600; color: var(--muted); }
.work-tabs button.on { color: var(--blue); border-bottom-color: var(--blue); }
.work-tabs .dot { color: #c2410c; font-size: 10px; margin-left: 4px; vertical-align: super; }
details.how { margin: 0 0 8px; }
details.how summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.cb-tools { gap: 12px; margin-bottom: 6px; }
.cb { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: #fff; }
.cb.out { background: #fafbfc; border-style: dashed; }
.cb-h { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 12px; font-size: 14px; }
.cb.open .cb-h { border-bottom: 1px solid var(--line); }
.cb-tog { width: 12px; color: var(--muted); }
.cb-pg { color: var(--muted); font-size: 13px; white-space: nowrap; }
.cb-unit { font-size: 13px; }
.cb-body { padding: 6px 12px 10px 34px; }
.cb-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.cb-row.off { color: var(--muted); text-decoration: line-through; }
.cb-row.off button { text-decoration: none; }
.cb-cut { border-top: 1px dashed #c9d6f3; margin: 2px 0; padding-top: 1px; text-align: center; }
.cb-cut button { font-size: 12px; }
.cb-hw { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.cb-foot { margin-top: 8px; text-align: right; }
.sticky-save { position: sticky; top: auto; bottom: 0; z-index: 3; }

/* 계획표: 그룹 줄 · 머리 이름 누르기 */
.grp-edit-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.th-btn { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; font-weight: inherit; cursor: pointer; text-decoration: underline dotted #9aa6b8; text-underline-offset: 3px; }
.th-btn:hover { color: var(--blue); }

/* 관리 탭 폴더 구조 · 끌어 옮기기 */
.tr-row { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.tr-row:hover { background: #f3f5f8; }
.tr-row .tw { border: 0; background: none; width: 18px; padding: 4px 0; color: var(--muted); font-size: 11px; flex: none; }
.tr-row .tn { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 5px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-row .cnt { flex: none; padding-right: 6px; }
.tr-row .ico { margin-right: 4px; }
.tr-t { margin-top: 6px; } .tr-t .tn { font-weight: 700; }
.tr-t.cur, .tr-b.cur { background: #e8f0fe; } .tr-b.cur .tn { color: var(--blue); }
.tr-b .tn { font-weight: 600; }
.tr-b.in-t { padding-left: 14px; }
.tr-in { padding-left: 34px; } .tr-in.in-t { padding-left: 48px; }
.tr-g .tn, .tr-s .tn { font-size: 14px; padding: 3px 4px; }
.tr-g.cur, .tr-s.cur { background: var(--blue-bg); } .tr-g.cur .tn, .tr-s.cur .tn { color: var(--blue); font-weight: 600; }
.tr-s { cursor: grab; } .tr-s .cnt { font-size: 11px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-s.dragging { opacity: .4; }
.tr-row.drop { background: #dbeafe; outline: 2px dashed var(--blue); }
.tr-empty { padding: 2px 6px; } .tr-hint { margin: 8px 4px 0; }
span.help-box { display: block; margin-top: 6px; }

/* 관리 탭 아래 메뉴 · 반 칩의 담임 이름 */
.admin-tabs { margin: 12px 0 0; align-items: center; }
.admin-tabs a { margin-right: 6px; }
.admin2.full { grid-template-columns: minmax(0, 1fr); }
.chip-t { font-size: 12px; opacity: .75; font-weight: 400; }

/* 상담 */
.click-row { cursor: pointer; } .click-row:hover td { background: #f5f8ff; }
.counsel-new { display: grid; gap: 6px; padding: 10px; background: #f5f8ff; border-radius: 8px; margin: 8px 0 12px; }
.counsel-new textarea, .counsel-item textarea { width: 100%; }
.counsel-item { border-top: 1px solid var(--line); padding: 10px 2px; display: grid; gap: 4px; }
.counsel-text { white-space: pre-wrap; font-size: 14px; }
.counsel-follow { color: #92400e; } .counsel-follow.done { color: var(--muted); text-decoration: line-through; }
/* 환경설정 */
.settings h4 { margin: 18px 0 8px; font-size: 14px; }
/* 바로가기 줄: 머리 줄(95px) · 하위 메뉴(바닥 94px) 아래에 붙어 따라온다.
   칸으로 뛸 때 이 줄에 가리지 않게 하는 일은 app.js 설정바로가기()가 높이를 재서 한다(줄이 한 줄일 때도 빈 자리가 남지 않게) */
/* 환경설정: 왼쪽 칸 목록 · 오른쪽에 그 칸만(2026-10-13 사용자) */
.set-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
.set-list { display: grid; align-content: start; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 4px; }
.set-list button { text-align: left; border: 0; background: none; border-radius: 6px; padding: 7px 10px; color: var(--ink); font-size: 14px; }
.set-list button:hover { background: #f1efeb; }
.set-list button.on { background: var(--blue); color: #fff; font-weight: 600; }
.set-pane { min-width: 0; }
.set-pane h4:first-child { margin-top: 0; }
@media (max-width: 900px) { .set-body { grid-template-columns: 1fr; } }
  margin: -4px -4px 6px; padding: 6px 4px; background: #fff; border-bottom: 1px solid var(--line); }
.settings textarea { width: 100%; }
.wide-in { width: 100%; max-width: 520px; }
.set-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.set-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.time-in { width: 110px; }

/* 보강 */
.makeup h4 { margin: 16px 0 6px; font-size: 14px; }
.mk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: #fff; font-size: 14px; }
.mk-row.need { border-color: #fde68a; background: #fffbeb; }
.mk-row.late { border-color: #fecaca; background: #fef2f2; }
.mk-row.done { color: var(--muted); }

/* 보강 알림 */
.mk-alerts { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; }
.mk-chip { font-size: 12px; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.mk-chip.sent { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.mk-chip.due { color: #9a3412; background: #fff7ed; border-color: #fed7aa; font-weight: 600; }
.mk-chip.on { outline: 2px solid var(--blue); }
.mk-alert-body { flex-basis: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fafbfc; }
.set-alert { gap: 6px; margin-bottom: 4px; }
.set-msg { margin-top: 8px; }
.mk-row.done { flex-wrap: wrap; } .mk-alert-body textarea { width: 100%; }
.mk-text { white-space: pre-line; }

/* 상담 기한 알림 */
.counsel-alert { padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; display: grid; gap: 6px; }
.counsel-alert.over { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.counsel-alert.soon { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.anav .cnt.soon { color: #c2410c; font-weight: 700; }
.counsel-sum td:nth-child(-n+3), .counsel-sum th { white-space: nowrap; }
.counsel-alert button.newc { border-color: #93c5fd; }

/* 진도표 관리: 왼쪽 학년 폴더 */
.chasi2 { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
.chasi2 .cpane { min-width: 0; }
.tr-book .tn { padding-left: 22px; }
.tr-book .tn:disabled { opacity: 1; }
.tr-row .more { flex: none; } .tr-row form.tn { display: flex; gap: 4px; } .tr-row form.tn input { flex: 1; min-width: 0; }

/* 진도표 관리: 탐색기처럼 — 왼쪽 폴더 · 오른쪽 교재 목록 · 아래 진도계획 */
.tr-f { padding-left: 18px; }
.tr-f.cur, .tr-t.cur { background: #e8f0fe; } .tr-f.cur .tn { color: var(--blue); font-weight: 600; }
.book-list table { margin-top: 6px; }
.book-list tr.sel td { background: #e8f0fe; } .book-list tr.sel td b { color: var(--blue); }
.book-list tr.dragging { opacity: .4; }
.book-list tr[draggable="true"] { cursor: grab; }

/* 우클릭 메뉴 */
.ctx-menu { position: fixed; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 4px; display: grid; min-width: 150px; }
.ctx-menu button { border: 0; background: none; text-align: left; padding: 6px 10px; border-radius: 6px; font-size: 14px; }
.ctx-menu button:hover:not(:disabled) { background: #f3f5f8; }

/* 진도표 관리 폴더 나무: 윈도우 탐색기 모양 */
.xtree { padding: 6px 4px; gap: 0; font-size: 14px; }
.xrow { display: flex; align-items: center; height: 32px; border-radius: 4px; border: 1px solid transparent; padding-left: calc(var(--lv, 0) * 18px); }   /* 탐색기처럼: 한 단계 = 꺾쇠 폭(18px) → 아래 줄의 꺾쇠가 위 줄의 아이콘 밑에 온다 */   /* 단계마다 18px — 탐색기처럼 꺾쇠 자리만큼 들어감 */
.xrow:hover { background: #e5f3ff; }
.xrow.cur { background: #cce8ff; border-color: #99d1ff; }
.xrow.drop { background: #cce8ff; outline: 1px dashed #3b82f6; }
.xchev { flex: none; width: 18px; height: 30px; border: 0; background: none; padding: 0; position: relative; cursor: pointer; }
.xchev::before { content: ''; position: absolute; left: 6px; top: 12px; width: 5px; height: 5px; border-right: 1px solid #7a7a7a; border-bottom: 1px solid #7a7a7a; transform: rotate(-45deg); transition: transform .1s; }   /* 탐색기처럼 가는 회색 꺾쇠 */
.xchev.open::before { transform: rotate(45deg); left: 6px; top: 10px; }
.xchev.none::before { display: none; }
.xchev.none { width: 18px; }   /* 하위가 없는 줄도 꺾쇠 자리는 비워 둔다(탐색기와 같음) */
.xchev.leaf { width: 0; } .xchev.leaf::before { display: none; }   /* 끝 줄(그룹 · 학생 · 교재)은 꺾쇠 자리 없이 → 아이콘이 위 폴더 아이콘 바로 밑(폴더 → 하위 폴더 간격과 같음) */
.xname { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0 4px 0 0; height: 28px; text-align: left; font: inherit; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.xname input { height: 24px; }
.xcnt { flex: none; color: #8a8f98; font-size: 12px; padding: 0 8px; }
svg.xf { width: 20px; height: 16px; flex: none; }
.xhead { display: inline-flex; align-items: center; gap: 8px; }
.ctx-menu button { display: flex; align-items: center; gap: 8px; }
.xtree small.muted { font-size: 11px; margin-left: 2px; }
.xcnt.xsub { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.xrow.dragging { opacity: .4; }
.xrow[draggable="true"] { cursor: grab; }
.xempty { padding: 2px 0 2px calc(var(--lv, 0) * 18px); }
.anav .xtree { padding: 0; }

/* 진도표 관리 교재 목록: 2단 */
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;   /* 한 줄에 하나(사용자: 2단은 안 함) */ margin-top: 8px; }
.book-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; }
.book-item:hover { background: #e5f3ff; }
.book-item.sel { background: #cce8ff; border-color: #99d1ff; }
.book-item.dragging { opacity: .4; }
.book-item svg.xf { margin-top: 2px; }
.bi-text { min-width: 0; }
.bi-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-folder { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 6px; }
.bi-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 관리 › 학생 관리: 묶어 보는 학생 목록 + 고른 학생은 오른쪽 */
.apane.stu-open { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 14px; align-items: start; }
.apane.stu-open > .a-note { grid-column: 1 / -1; }
.apane.stu-open > .card:not(.stu-list) { position: sticky; top: 64px; }
.stu-tools { margin: 6px 0 8px; gap: 8px; }
.stu-tools .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.stu-tools .seg button { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #fff; padding: 4px 10px; font-size: 13px; }
.stu-tools .seg button:last-child { border-right: 0; }
.stu-tools .seg button.on { background: #e8f0fe; color: var(--blue); font-weight: 600; }
.stu-table td, .stu-table th { white-space: nowrap; }
.stu-table td.addr { white-space: normal; min-width: 150px; }
.stu-title { font-size: 17px; }
.stu-table tr.stu-grp td { background: #f6f8fb; cursor: pointer; padding-top: 6px; padding-bottom: 6px; }
.stu-table tr.stu-grp .xchev { display: inline-block; height: 14px; vertical-align: -1px; cursor: pointer; }
.stu-table tr.stu-grp .xchev::before { top: 3px; }
.stu-table tr.stu-grp .xchev.open::before { top: 1px; }
.stu-table tr.sel td { background: #e8f0fe; }
.stu-table tr.gone td { color: #9aa0a6; }

/* 학생 화면 주소 · 학부모 전화 */
.addr-box { display: grid; gap: 4px; }
.addr-box .row { gap: 4px; flex-wrap: nowrap; }
.addr-box .wide-in { flex: 1; min-width: 0; }
.addr-box input[readonly] { background: #f6f8fb; cursor: pointer; }
.zip-in { width: 72px; flex: none; }
.addr-modal { width: min(520px, 94vw); }
.addr-frame { height: 470px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 6px 0; }
.kv .ph-in { width: 140px; }
.addr-box .zip-in { width: 72px; flex: none; }
.apane .kv { grid-template-columns: 96px minmax(0, 1fr); }
.addr-box .row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; align-items: center; }
.addr-box .row input { width: 100%; min-width: 0; }
.stu-list { overflow-x: auto; }
.addr-box .row { grid-template-columns: 76px auto auto minmax(0, 1fr); justify-items: start; }
.addr-box .row .wide-in { grid-column: 1 / -1; order: 9; }

.seg-n { display: inline-block; margin-left: 4px; min-width: 15px; height: 15px; line-height: 15px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 10px; text-align: center; }
.stu-table tr.stu-grp.lv1 td { background: #fafbfd; }
.stu-table tr.stu-grp.lv2 td { background: #fff; }
.bi-rename { width: 100%; height: 26px; font-size: 14px; }
.ctx-menu .why { font-size: 11px; color: #8a8f98; padding: 4px 10px; max-width: 220px; }

/* 학생 관리 걸러 보기 */
.stu-filter { margin-top: -2px; }
.flt { position: relative; }
.flt > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; font-size: 13px; background: #fff; }
.flt > summary::-webkit-details-marker { display: none; }
.flt.on > summary { background: #e8f0fe; border-color: #99c1f5; color: var(--blue); }
.flt-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 6px; display: grid; gap: 2px; min-width: 170px; max-height: 320px; overflow-y: auto; }
.flt-menu label { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 5px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.flt-menu label:hover { background: #f3f5f8; }
.flt-menu label .muted { margin-left: auto; padding-left: 10px; font-size: 11px; }

/* 국가 공휴일 불러오기 */
.holi-box { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; background: #fafbfd; }
.holi-box .row { gap: 8px; }
.holi-table { margin-top: 6px; background: #fff; }
.holi-table td { padding-top: 3px; padding-bottom: 3px; }
.holi-table tr.done td { color: #9aa0a6; }
.holi-table tr.past td:nth-child(2) { color: #9aa0a6; }

/* 상담 음성 파일 */
.counsel-files { gap: 6px; margin: 4px 0; }
.file-btn { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; background: #fff; cursor: pointer; }
.file-btn:hover { background: #f3f5f8; }
.file-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: #eef4ff; border-radius: 12px; padding: 2px 4px 2px 10px; }
.file-chip.saved { background: #f1f3f5; }
.file-chip .link { padding: 0 4px; }
.counsel-audio { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.counsel-audio audio { height: 32px; width: 300px; max-width: 60%; }
/* 공휴일 표 */
.holi-table tr.holi-year td { background: #f1f4f9; padding-top: 4px; padding-bottom: 4px; }
.holi-table tr.pick td { background: #eef6ff; }

/* 수납 */
.pay .card { margin-top: 14px; }
.pay-head { gap: 8px; }
.pay-month { font-size: 18px; min-width: 120px; text-align: center; }
.pay-sum { display: flex; flex-wrap: wrap; gap: 22px; margin: 10px 0; padding: 10px 14px; background: #f6f8fb; border-radius: 8px; font-size: 14px; }
.pay-sum b { font-size: 17px; margin-left: 4px; }
.pay-sum .ok { color: #15803d; } .pay-sum .late, .pay-table .late { color: #c2410c; }
.pay-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 8px 0; background: #fafbfd; }
.pay-box .row { gap: 8px; }
.pay-tools { gap: 10px; margin: 8px 0; }
.money-in { width: 96px; text-align: right; }
.num-c { text-align: right; white-space: nowrap; }
.pay-table td { vertical-align: middle; }
.pay-st { font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.st-ok { background: #dcfce7; color: #166534; } .st-part { background: #fef3c7; color: #92400e; } .st-due { background: #fee2e2; color: #b91c1c; } .st-none { background: #f1f3f5; color: #6b7280; }
.pay-btns { text-align: right; white-space: nowrap; }
.pay-detail > td { background: #fbfcfe; padding: 10px 12px; }
.pay-get { gap: 8px; padding: 8px; margin-bottom: 8px; background: #eef6ff; border-radius: 6px; }
.pay-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pay-line { gap: 6px; margin: 3px 0; }
.pay-msg { white-space: pre-wrap; font: 12px/1.5 inherit; background: #fff; border: 1px dashed var(--line); border-radius: 6px; padding: 8px; margin: 8px 0 0; color: #444; }
/* 영수증 · 납입 증명서 */
.paper-modal { width: min(620px, 96vw); max-height: 92vh; overflow-y: auto; }
.paper-modal > .row { gap: 8px; margin-bottom: 8px; }
.paper { border: 1px solid #ccc; padding: 28px 34px; background: #fff; color: #111; }
.paper h2 { text-align: center; letter-spacing: 4px; margin: 0 0 18px; }
.paper-kv { display: grid; grid-template-columns: 70px 1fr 70px 1fr; gap: 6px; margin-bottom: 12px; font-size: 14px; }
.paper-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.paper-t th, .paper-t td { border: 1px solid #999; padding: 6px 8px; }
.paper-t td:nth-child(n+2), .paper-t th:nth-child(n+2) { text-align: right; }
.paper-t tfoot th { background: #f3f3f3; }
.paper-small { font-size: 12px; margin-top: 6px; color: #333; }
.paper-c { text-align: center; margin: 22px 0; }
.paper-from { text-align: right; font-size: 13px; line-height: 1.7; }
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; left: 0; top: 0; width: 100%; border: 0; }
  .no-print { display: none; }
}
/* 상담 받아 적은 글 */
.stt { margin: 2px 0 8px; }
.stt textarea { width: 100%; font-size: 13px; }
.stt .row { gap: 10px; }
/* .plan td input { width: 100% } 를 수납 화면에서는 풀어 준다 */
.pay .plan td input.money-in, .pay-line input.money-in { width: 96px; display: inline-block; }
.pay .plan td input.mid-in { width: 220px; }
.pay .plan td input[type=checkbox] { width: auto; }

/* 알림톡 */
.sent-tag.fail { background: #fee2e2; color: #b91c1c; }
.tpl-grid { display: grid; grid-template-columns: 130px minmax(0, 320px); gap: 4px 8px; align-items: center; }
.tpl-grid .tpl-help { grid-column: 1 / -1; }
.kv label + .muted.small, .kv label + .small.muted { margin-left: 8px; }

/* 채팅 공통 말풍선 */
.msg { display: flex; flex-direction: column; margin: 6px 0; }
.msg.mine { align-items: flex-end; } .msg.theirs { align-items: flex-start; }
.msg-who { font-size: 11px; color: #6b7280; margin: 0 4px 2px; }
.msg-row { display: flex; align-items: flex-end; gap: 4px; max-width: 86%; }
.msg.mine .msg-row { flex-direction: row-reverse; }
.msg-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg.mine .msg-stack { align-items: flex-end; }
.bubble { white-space: pre-wrap; word-break: break-word; padding: 7px 11px; border-radius: 14px; font-size: 14px; line-height: 1.45; background: #fff; border: 1px solid #e5e7eb; }
.msg.mine .bubble { background: #fee500; border-color: #f2da00; }
.bubble.auto { background: #eef6ff; border-color: #cfe2ff; }
.msg-time { font-size: 10px; color: #9ca3af; white-space: nowrap; }
.msg-day { text-align: center; font-size: 11px; color: #6b7280; margin: 10px 0 4px; }
.msg-card { width: 250px; max-width: 100%; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; font-size: 13px; }
.mc-h { background: #fee500; padding: 7px 11px; font-weight: 600; }
.mc-b { white-space: pre-wrap; padding: 8px 11px; line-height: 1.5; }
.mc-more { width: 100%; border: 0; border-top: 1px solid #eee; background: #fafafa; padding: 6px; font-size: 12px; color: #374151; border-radius: 0; }
.msg-img img { max-width: 200px; max-height: 200px; border-radius: 10px; display: block; border: 1px solid #e5e7eb; }
.msg-file { display: inline-flex; gap: 6px; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 7px 11px; font-size: 13px; }
.msg-file span { color: #9ca3af; font-size: 11px; }
.pa-files { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.tab-badge { display: inline-block; margin-left: 4px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px; background: #ef4444; color: #fff; font-size: 10px; text-align: center; vertical-align: 1px; }
/* 학부모 화면(휴대폰) */
.pa { min-height: 100vh; background: #e9edf2; display: flex; justify-content: center; }
.pa-phone { width: 100%; max-width: 440px; height: 100vh; display: flex; flex-direction: column; background: #b2c7d9; }
.pa-demo { background: #fff8db; font-size: 12px; padding: 6px 10px; display: flex; gap: 6px; align-items: center; }
.pa-demo select { flex: 1; }
.pa-empty { padding: 30px 16px; text-align: center; color: #374151; }
.pa-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #a9bdce; font-size: 16px; }
.pa-kids { display: flex; gap: 4px; } .pa-kids button { border-radius: 14px; padding: 3px 10px; font-size: 13px; background: #fff; border: 1px solid #94a3b8; }
.pa-kids button.on { background: #1f2937; color: #fff; border-color: #1f2937; }
.pa-kid { font-size: 13px; color: #1f2937; }
.pa-msgs { flex: 1; overflow-y: auto; padding: 8px 10px; }
.pa-hint { text-align: center; font-size: 12px; color: #334155; background: rgba(255,255,255,.6); border-radius: 10px; padding: 8px; }
.pa-quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; background: #fff; border-top: 1px solid #e5e7eb; }
.pa-quick button { flex: none; border-radius: 16px; padding: 6px 12px; font-size: 13px; background: #f3f4f6; border: 1px solid #e5e7eb; }
.pa-input { display: flex; gap: 6px; align-items: flex-end; padding: 8px 10px; background: #fff; }
.pa-att { font-size: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; }
.pa-in-box { flex: 1; } .pa-in-box textarea { width: 100%; resize: none; border-radius: 16px; padding: 8px 12px; }
.pa-closed { background: #fff; padding: 8px 12px 14px; font-size: 12px; color: #6b7280; text-align: center; }
/* 선생님 채팅 탭 */
.chat { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; margin-top: 14px; height: calc(100vh - 110px); }
.ch-list { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; overflow-y: auto; }
.ch-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "l s"; text-align: left; border: 0; background: none; border-radius: 8px; padding: 8px; gap: 2px 8px; }
.ch-item:hover { background: #f3f5f8; } .ch-item.cur { background: #e8f0fe; }
.ch-name { grid-area: n; } .ch-last { grid-area: l; font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-side { grid-area: s; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ch-badge { background: #ef4444; color: #fff; font-size: 11px; border-radius: 9px; min-width: 18px; text-align: center; padding: 0 5px; }
.ch-pane { display: flex; flex-direction: column; background: #b2c7d9; border-radius: 10px; overflow: hidden; min-height: 0; }
.ch-head { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; background: #a9bdce; }
.ch-msgs { flex: 1; overflow-y: auto; padding: 8px 14px; min-height: 0; }
.ch-pane .empty { margin: auto; }
.ch-input { display: flex; gap: 8px; align-items: flex-end; padding: 8px 10px; background: #fff; }
.ch-in-box { flex: 1; } .ch-in-box textarea { width: 100%; resize: vertical; }

/* 학부모 빠른 질문: 단추 하나 + 아래에서 올라오는 목록 */
.pa-phone { position: relative; }
.pa-bar { position: relative; z-index: 6; background: #fff; border-top: 1px solid #e5e7eb; padding: 8px 10px; }
.pa-qbtn { width: 100%; border-radius: 18px; padding: 9px; font-size: 15px; background: #fee500; border: 1px solid #f2da00; color: #1f2937; font-weight: 600; }
.pa-qbtn.on { background: #f3f4f6; border-color: #e5e7eb; }
.pa-sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .25); z-index: 5; }
.pa-sheet { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 6; background: #fff; border-radius: 16px 16px 0 0; padding: 10px 12px 6px; display: grid; gap: 6px; }
.pa-sheet-h { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; }
.pa-q { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; background: #fff; }
.pa-q:hover { background: #fffbe0; }
.pa-q span { font-size: 12px; color: #6b7280; }

/* 학생 앱 */
.st .pa-phone { background: #c9d9e6; }
.st-top { background: #bfd0de; }
.st-login { background: #fff; margin: auto 16px; padding: 22px 18px; border-radius: 16px; display: grid; gap: 10px; }
.st-login h2 { margin: 0; text-align: center; }
.st-login form { display: grid; gap: 8px; }
.st-login input { height: 42px; font-size: 16px; text-align: center; letter-spacing: 2px; }
.st-hw { cursor: default; }
.st-hw-btns { display: flex; gap: 6px; margin-top: 6px; align-self: stretch; justify-content: flex-end; }
.st-hw-btns .file-btn { font-size: 13px; }
.file-btn.dis { opacity: .5; pointer-events: none; }
/* 평가할 과제: 학생이 다 했다고 알림 */
.hw-done { display: inline-flex; align-items: center; gap: 4px; background: #dcfce7; color: #166534; border-radius: 8px; padding: 1px 6px; }
.done-photo img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; display: block; }
.pa-sheet { max-height: 70vh; overflow-y: auto; }

/* 결제선생 · 내역 올리기 */
.ps-tag { display: inline-block; margin-left: 4px; font-size: 11px; padding: 1px 7px; border-radius: 9px; background: #e0e7ff; color: #3730a3; white-space: nowrap; }
.ps-tag.ps-완료 { background: #dcfce7; color: #166534; } .ps-tag.ps-취소, .ps-tag.ps-실패 { background: #f1f3f5; color: #6b7280; }
.ps-line { gap: 8px; padding: 4px 0; }
.im-paste { display: flex; gap: 8px; align-items: flex-end; margin: 6px 0; } .im-paste textarea { flex: 1; }
.im-cols { gap: 10px; margin: 6px 0; } .im-cols label { display: inline-flex; gap: 4px; align-items: center; }
.pay .plan td select { width: 100%; max-width: 260px; }
.ok-note { background: #dcfce7; color: #166534; padding: 6px 10px; border-radius: 6px; }

/* 마케팅 */
.mk .card { margin-top: 10px; }
.mk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 14px; align-items: start; }
.mk-detail { position: sticky; top: 64px; }
.chip-f { border-radius: 14px; padding: 3px 10px; font-size: 12px; background: #fff; border: 1px solid var(--line); }
.chip-f.on { background: #1f2937; color: #fff; border-color: #1f2937; } .chip-f.late:not(.on) { border-color: #f97316; color: #c2410c; }
.mk-new { display: grid; gap: 6px; } .mk-new .row { gap: 6px; }
.mk-st { font-size: 11px; padding: 2px 8px; border-radius: 9px; background: #e0e7ff; color: #3730a3; white-space: nowrap; }
.mk-st.mk-등록 { background: #dcfce7; color: #166534; } .mk-st.mk-보류 { background: #f1f3f5; color: #6b7280; } .mk-st.mk-상담, .mk-st.mk-레벨테스트, .mk-st.mk-체험.수업 { background: #fef3c7; color: #92400e; }
.mk-table td.late { color: #c2410c; font-weight: 600; }
.mk-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; } .mk-steps button.on { background: #1f2937; color: #fff; }
.mk-log { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; display: grid; gap: 4px; }
.mk-sent { border-bottom: 1px solid var(--line); padding: 6px 0; } .mk-sent .row { gap: 10px; }
.mk-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 170px; margin: 12px 0 4px; }
.mk-col { display: flex; flex-direction: column; } .mk-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; justify-content: center; border-bottom: 1px solid var(--line); }
.mk-bars i { width: 9px; border-radius: 3px 3px 0 0; min-height: 1px; }
.b-q { background: #93c5fd; } .b-in { background: #22c55e; } .b-out { background: #f97316; }
.mk-lab { text-align: center; font-size: 11px; }
.mk-legend { gap: 6px; align-items: center; margin-bottom: 8px; } .mk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.mk-detail .short, .mk-new .short { width: 130px; }

/* 수업 관리 ↔ 관리자 모드 */
.mode-sw { display: inline-flex; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 0 6px; flex: none; }
.mode-sw button { border: 0; border-radius: 0; background: #fff; padding: 4px 11px; font-size: 12px; color: var(--muted); }
.mode-sw button.on { background: var(--blue); color: #fff; font-weight: 600; }
header.top.admin-mode { background: #2f3a38; }
header.top.admin-mode .logo, header.top.admin-mode .status, header.top.admin-mode .status .muted { color: #e8e4dc; }
header.top.admin-mode .tabs button { color: #cfc9bf; }
header.top.admin-mode .tabs button.on { background: #46524f; color: #fff; }
header.top.admin-mode .mode-sw { border-color: #5a635f; }
header.top.admin-mode .mode-sw button:not(.on) { background: #2f3a38; color: #cfc9bf; }
header.top.admin-mode .mode-sw button.on { background: #d9a227; color: #2f3a38; }
header.top.admin-mode .demo { color: #1f2937; }
header.top.admin-mode .who select { background: #334155; color: #fff; border-color: #475569; }

/* 일일관리 대시보드 */
.dash { margin-top: 14px; display: grid; gap: 14px; }
.dash-h { gap: 10px; align-items: baseline; } .dash-h b { font-size: 18px; }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dash-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; }
.dash-card:hover { border-color: #93c5fd; background: #f8fbff; }
.dash-card.warn { border-color: #fdba74; background: #fffaf3; }
.dc-t { font-size: 13px; color: var(--muted); }
.dc-n { font-size: 28px; line-height: 1.2; } .dc-n small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.dc-s { font-size: 12px; color: #4b5563; } .dash .late { color: #c2410c; font-weight: 600; } .dash .ok { color: #15803d; font-weight: 600; }
.dash-table { margin-top: 6px; }

/* 추가 수강 */
.gtag.add-tag { background: #fef3c7; color: #92400e; }
.add-line { font-size: 11px; color: #92400e; }
.su-box { display: grid; gap: 4px; }
.su-row { gap: 8px; } .su-row.gone { opacity: .55; }

/* 일일관리 위쪽 메뉴 묶음 칸막이 */
.tabs { align-items: center; flex-wrap: wrap; }
.tab-sep { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px 0 8px; padding-left: 10px; border-left: 1px solid #475569; font-size: 10px; color: #94a3b8; letter-spacing: .5px; }
.tab-sep:empty { padding-left: 6px; margin-left: 6px; }
header.top.admin-mode .tabs button { padding: 6px 9px; }

/* 환불 · 정산 */
.refund-box { margin: 6px 0; display: grid; gap: 6px; }
.refund-nums { gap: 12px; align-items: center; }
.gtag.refund { background: #fee2e2; color: #b91c1c; }

/* 일일관리 하위 메뉴 */
.sub-tabs { display: flex; align-items: center; gap: 4px; padding: 6px 20px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 50px; z-index: 4; }
.sub-tabs button { border: 0; background: none; padding: 5px 12px; border-radius: 6px; color: var(--muted); font-size: 14px; }
.sub-tabs button.on { background: #eef2ff; color: #3730a3; font-weight: 600; }

/* 오류 · 알림: 오른쪽 아래에 떠서 [닫기]를 누를 때까지 남는다(점검 2026-10-10) */
.toast-box { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; max-width: min(560px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); font-size: 14px; line-height: 1.45; }
.toast.err { background: #fdecec; border: 1px solid #f5b5b5; color: #8a1c1c; }
.toast.info { background: #eef4ff; border: 1px solid #bcd0f7; color: #1e3a8a; }
.toast > span { flex: 1; white-space: pre-line; }
.toast > b { white-space: nowrap; }
@media print { .toast-box { display: none; } }
/* 화면을 그리다 오류가 났을 때(하얀 화면 대신) */
#화면오류 { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); z-index: 100; background: #fff; border: 2px solid #dc2626; border-radius: 12px; padding: 18px 22px; max-width: 560px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); font-size: 15px; line-height: 1.5; }
#화면오류 button { margin-top: 8px; }

/* 프린트 · 추가 과제 (③ 진도 아래) — 교재 카드에 없는 유인물을 고른 학생에게만 낸다 */
.print-hw { margin: 10px 0 4px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; display: grid; gap: 6px; }
.print-list { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.8fr) minmax(90px, .9fr) auto;
  align-items: stretch; column-gap: 10px; font-size: 14px; }
.print-row { display: contents; }
/* 칸마다 높이를 끝까지 늘려야 위 선이 한 줄로 이어진다 — 빈 칸만 짧아 선이 어긋나던 것(2026-10-13 사용자) */
.print-list > .print-row > * { padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; display: flex; align-items: center; }
.print-row .pc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.print-row .pc-lesson, .print-row .pc-hw { display: flex; align-items: center; gap: 4px; }
.print-row .pc-lesson .hw-note-t, .print-row .pc-hw .hw-note-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.print-row .pc-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.print-row .pc-btn { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 760px) { .print-list { grid-template-columns: 1fr auto; }
  .print-row .pc-lesson, .print-row .pc-hw, .print-row .pc-who { grid-column: 1; border-top: 0; padding-top: 0; } }
.print-row .pr-range { font-weight: 600; }
.print-row .pr-name { min-width: 150px; }
.print-row .pr-half { display: inline-flex; align-items: center; gap: 4px; }
.print-form .plan-note.warn { color: #92400e; }
.pr-recent { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; display: grid; gap: 2px; background: #faf8f4; }
/* 지난 일주일 프린트: 칸을 맞춰 세로로 읽히게(2026-10-13 사용자) */
.pr-recent-row { display: grid; grid-template-columns: 74px minmax(120px, 1.4fr) minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(90px, 1fr);
  align-items: center; gap: 8px; text-align: left; border: 0; background: none; padding: 5px 6px; border-radius: 6px; width: 100%; }
.pr-recent-row:hover { background: #f1efe9; }
/* 지난 목록 · 오늘 목록은 '읽는 줄'이라 색을 눅인다 — 수업/과제 딱지만 옅은 바탕, 메모는 글씨로 */
.pr-recent-row .sv-tag, .print-row .sv-tag { color: #6f6a60; background: #ece9e2; }
.pr-recent-row .pr-tag-hw, .print-row .pr-tag-hw { color: #6f6a60; background: #ece9e2; }
.pr-recent-row .hw-note-t, .print-row .hw-note-t { color: var(--text); background: none; padding: 0; }
.pr-recent-row .hw-note-t::before, .print-row .hw-note-t::before { content: '('; }
.pr-recent-row .hw-note-t::after, .print-row .hw-note-t::after { content: ')'; }
.pr-recent-row .pr-range, .print-row .pr-range { font-weight: 600; color: var(--text); }
.pr-recent-row + .pr-recent-row { border-top: 1px solid #efece6; }
.pr-recent-row .pc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-recent-row .pc-lesson, .pr-recent-row .pc-hw { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pr-recent-row .pc-lesson .hw-note-t, .pr-recent-row .pc-hw .hw-note-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-recent-row .pc-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.pr-recent-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }   /* 키보드로 옮겨 다닐 때 줄 전체가 드러나게 */
@media (max-width: 760px) { .pr-recent-row { grid-template-columns: 70px 1fr; row-gap: 2px; }
  .pr-recent-row .pc-lesson, .pr-recent-row .pc-hw, .pr-recent-row .pc-who { grid-column: 2; text-align: left; } }
.print-form .card-body { margin: 4px 0; }
.print-form .col-h label { display: inline-flex; align-items: center; gap: 4px; }
.pr-tag-hw { font-size: 11px; color: #92400e; background: #fef3c7; border-radius: 4px; padding: 1px 5px; }   /* 프린트 줄: 수업(보라) · 과제(노랑) */
.print-form { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.print-form label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.pr-students { align-items: center; gap: 4px 6px; }
.pr-absent { margin-left: 3px; color: #b91c1c; }
.gchip.on .pr-absent { color: #fee2e2; }

/* ③ 진도 — 보기 전환(카드 ↔ 학생) */
.view-sw-row { align-items: center; gap: 8px; margin: 2px 0 8px; }
.view-sw { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.view-sw button { border: 0; background: #fff; color: var(--muted); padding: 4px 12px; font-size: 13px; }
.view-sw button.on { background: #eef2ff; color: #3730a3; font-weight: 600; }

/* 학생 보기 표 — 학생마다 한 묶음, 같은 그룹은 같은 배경색 */
table.stu-view { width: 100%; border-collapse: collapse; font-size: 14px; }
table.stu-view th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.stu-view td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.stu-view tr.absent .sv-nm b { color: var(--muted); text-decoration: line-through; }
.sv-nm { white-space: nowrap; border-right: 1px solid var(--line); }
.sv-own { border-left: 1px solid var(--line); background: #fcfcfd; }
.sv-own-item + .sv-own-item { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.sv-page { font-weight: 600; }
.sv-hw + .sv-hw { margin-top: 6px; }
.sv-tag { font-size: 11px; color: #7c3aed; background: #f3e8ff; border-radius: 4px; padding: 1px 5px; }
/* 같은 그룹 = 같은 배경색 (학생이 달라도) */
/* 차례를 색상환에서 멀리 떨어지게 섞었다(2026-10-12 사용자: 붙어 있는 그룹끼리 대비가 있어야 한다)
   — 0 청자 · 1 적토 · 2 남청 · 3 황토 · 4 보라 · 5 올리브녹 */
.gc0 { --g: #3f7d72; } .gc1 { --g: #a8524a; } .gc2 { --g: #3b6f9e; }
.gc3 { --g: #b5801f; } .gc4 { --g: #6a5fa0; } .gc5 { --g: #5f8a3a; }
/* 띠를 테두리가 아니라 덧그림으로 둔다 — **학생이 바뀌는 줄에서 끊어** 다른 학생의 같은 색 띠와 이어져 보이지 않게 */
table.stu-view td.sv-band { position: relative; }
table.stu-view td.sv-band::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--g, var(--line)); }
table.stu-view tr.sv-first td.sv-band::before { top: 6px; }
table.stu-view tr.sv-first > td { border-top: 2px solid var(--line); }
/* 아직 저장하지 않은 추천(파란 글씨) — 카드의 [추천] 표와 같은 뜻 */
.stu-view .plan { color: var(--blue); }
/* 학생 보기의 칸은 카드와 같은 입력이지만 좁게 — 표 안에서 줄이 길어지지 않게 */
table.stu-view .page-in { min-width: 120px; }
table.stu-view .hw-field + .hw-field { margin-top: 8px; }
table.stu-view .sv-bk { margin-bottom: 4px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
table.stu-view .sv-state { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }   /* 저장 상태를 교재 이름 줄로(2026-10-13 사용자) */
/* 학생 보기에서 '적는 줄이 아닌' 칸 — 입력칸 자리에 결과만 */
table.stu-view .sv-ro { font-weight: 600; padding: 4px 0; }
/* ① 출결 | 과제 검사 — 한 표에 가로로(2026-10-11). 출결 칸은 단추 줄 + 사유 줄이 세로로 쌓인다 */
table.att-hw td.nm, table.att-hw th:first-child { width: 1%; }
table.att-hw td.att-cell, table.att-hw th:nth-child(2) { width: 1%; white-space: nowrap; vertical-align: top; }
table.att-hw td.att-cell .att-time { margin-top: 4px; }
/* 사유 줄은 **한 줄**로 — 좁은 칸에서 종류 · 사유 · [학부모 앎]이 세로로 쌓이던 것(2026-10-12 사용자) */
table.att-hw td.att-cell .att-why { margin-top: 6px; padding-left: 0; }
.att-why .why-one { display: inline-flex; align-items: center; gap: 6px; }
.att-why .why-one, .att-why .knows { flex: none; white-space: nowrap; }
table.att-hw td.nm .gtag { margin: 2px 2px 0 0; }
/* 상세(목록에서 고르기)는 기본으로 접는다 — 펼치는 단추 (2026-10-12) */
.상세 { display: inline-block; margin: 2px 0 4px; }
.jump-fold.on { font-weight: 600; color: var(--blue); }
/* '남은 것만 보기'에서 이미 보낸 알림장 카드는 의견 칸만 접어 둔다 */
.note-one.folded .note-op-in, .note-one.folded .note-foot { display: none; }
/* 학생 줄의 [모두 A] — 아직 안 매긴 과제가 둘 이상일 때만 보인다 (2026-10-12) */
.all-a { margin-top: 4px; }
/* 시험: 학생 × 시험 한 표 (2026-10-12) */
.quiz-grid tfoot td { border-top: 2px solid var(--line); background: #faf8f4; padding: 6px 8px; }
.quiz-foot { display: table-cell; text-align: center; }
.quiz-foot b { margin-right: 2px; }
.quiz-foot .small { display: block; }
table.quiz-grid { border-collapse: collapse; margin-top: 6px; width: max-content; max-width: 100%; }   /* 내용만큼만 — 이름과 점수 칸 사이가 휑하지 않게. 시험이 많아지면 가로로 늘어나고 넘치면 스크롤(2026-10-13 사용자) */
table.quiz-grid th.nm, table.quiz-grid td.nm { width: 1%; }
.quiz-grid .score-max { margin-left: 2px; }
.quiz-who { border: 1px solid #cfe0ff; background: #f4f8ff; border-radius: 10px; padding: 8px 10px; margin: 8px 0; display: grid; gap: 6px; }
.quiz-who .qw-h { align-items: center; }
.quiz-who .qw-list label { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.quiz-who .qw-f { border-top: 1px dashed #cfe0ff; padding-top: 6px; align-items: center; }
table.quiz-grid th, table.quiz-grid td { border: 1px solid var(--line); padding: 4px 8px; text-align: center; vertical-align: middle; }
table.quiz-grid th { background: var(--bg2, #f7f8fa); font-weight: 500; }
table.quiz-grid th.nm, table.quiz-grid td.nm { text-align: left; white-space: nowrap; font-weight: 600; }
table.quiz-grid .score { width: 70px; text-align: center; }
table.quiz-grid .score.ex { color: var(--muted); font-style: italic; }
/* 점수 칸 옆의 [결] — 안 본 학생을 글자로 적지 않고 누른다(2026-10-12 사용자) */
.score-cell { display: inline-flex; align-items: center; gap: 3px; }
.skip-btn { padding: 2px 6px; font-size: 11px; line-height: 1.2; color: var(--muted); background: #fff; }
.skip-btn:hover { color: var(--text); }
.skip-btn.on { background: var(--muted); border-color: var(--muted); color: #fff; }

/* 학생 보기 — 아래 줄에서 공통 진도를 고칠 때 붙는 안내 줄 */
.stu-view .sv-share { margin: 2px 0 4px; }
.stu-view .sv-share .warn { background: #fff7e6; border: 1px solid #ffd591; border-radius: 4px; padding: 1px 6px; }

/* ④ 종합의견 — 학생 │ 오늘 요약 │ 종합의견 (2026-10-12 목업) */
table.note-grid { width: 100%; border-collapse: collapse; margin-top: 6px; background: #fff; }
table.note-grid th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); background: #f8f6f1; border-bottom: 1px solid var(--line); padding: 6px 10px; }
table.note-grid td { border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
table.note-grid td.nm { width: 1%; white-space: nowrap; }
table.note-grid td.sum { width: 44%; }
/* 보낼 글 전체 보기 창 — 넓게 · 글자도 읽기 좋게(2026-10-12 사용자) */
/* 시험지 고르기 창 — 관리 › 시험지와 같은 모양(고르기만) */
.qp-pick { width: min(920px, 96vw); }
.qp-pick .qp-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 10px; }
.qp-pick .qp-list { max-height: 60vh; overflow: auto; }
.pick-tbl tbody tr { cursor: pointer; }
.pick-tbl tbody tr:hover { background: #eef4ff; }
/* 보낼 글 전체 보기: 창을 넓게 · 글자는 작고 촘촘하게(2026-10-13 사용자) */
.note-modal { width: min(1180px, 97vw); display: flex; flex-direction: column; gap: 10px; }
.note-modal .note-modal-h { align-items: center; gap: 8px; flex-wrap: wrap; }
.note-modal .note-pre.big { font-size: 13px; line-height: 1.65; background: #faf8f4; border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 18px; max-height: 76vh; overflow: auto; }
.note-modal .note-modal-f { align-items: center; gap: 8px; }
/* 오늘 요약: 이름 | 값 (그룹이 있는 값은 앞에 그 그룹 색 띠) */
table.note-grid .sum-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.6; }
table.note-grid .sum-row .k { flex: none; width: 64px; color: var(--muted); font-size: 12px; }
table.note-grid .sum-row .v { display: flex; flex-wrap: wrap; column-gap: 6px; row-gap: 0; min-width: 0; }
table.note-grid .sum-row .vline { display: block; width: 100%; }
table.note-grid .pg-chip { background: var(--blue-bg); color: var(--blue); border-radius: 0 5px 5px 0; padding: 0 6px; }
table.note-grid .has-g { display: block; width: 100%; border-left: 3px solid var(--g, var(--line)); padding: 1px 0 1px 6px; border-radius: 0; }
/* 줄 앞의 그룹 색 띠 — ① 과제 검사 · ② 진도 · ③ 학생 보기와 같은 색(2026-10-12 사용자) */
table.note-grid td.op { padding: 6px 10px 8px; }
table.note-grid .note-head { background: none; border: 0; padding: 0 0 2px; }
table.note-grid textarea.note-op-in { width: 100%; margin: 0; }
table.note-grid .note-foot { padding: 4px 0 0; }
table.note-grid tr.folded textarea.note-op-in, table.note-grid tr.folded .note-foot { display: none; }

/* 과제 평가 키보드: 등급 칸 전체가 키를 받는다 — 지금 매기는 줄이 또렷이 보이게 (2026-10-12) */
.grades:focus { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; background: var(--blue-bg); }
.grades:focus-visible { outline: 2px solid var(--blue); }
.hw-bulk { margin-top: 4px; }

/* ① 과제 검사도 **진도 그룹별로** 묶는다(2026-10-12 사용자) — 그룹마다 연한 띠 + 이름 */
.hw-grp { border-left: 4px solid var(--g, var(--line)); padding: 2px 6px 4px; margin-bottom: 6px; }
.hw-grp + .hw-grp { margin-top: 2px; }
.hw-grp-h { font-size: 11px; font-weight: 600; color: var(--muted); padding: 1px 0 2px; }

/* 그룹 색 — 칩과 과제 검사 띠가 같은 색을 쓴다(2026-10-12 사용자: 색깔로만 묶어 보이게) */
.gtag.gc0 { background: #e3ede9; color: #2f6056; } .gtag.gc1 { background: #f4e7e3; color: #8a3f38; }
.gtag.gc2 { background: #e2ecf2; color: #2d567b; } .gtag.gc3 { background: #f6ecdd; color: #8a6113; }
.gtag.gc4 { background: #ebe8f1; color: #524780; } .gtag.gc5 { background: #ecf1e0; color: #4a6b2c; }

/* 과제 검사 머리: [안 매긴 N건 모두 A] · [키보드로 매기기] — 글이 줄바꿈되지 않게 */
table.att-hw th.hw-th { white-space: nowrap; }
table.att-hw th.hw-th button { white-space: nowrap; margin-left: 8px; }

/* 완료 · 미완료 단추 폭을 고정 — 줄마다 A 단추 자리가 어긋나지 않게(2026-10-12) */
.grades .fin { min-width: 54px; }
/* 과제 검사 머리의 [모두A] · [키보드 입력]을 **A 단추 왼쪽 선에** 맞춘다(사용자).
   등급 칸(.grades) 폭만큼 자리를 잡고 .hw-grp 안쪽 여백(6px)만큼 밀어 준다 */
table.att-hw th.att-th, table.att-hw th.hw-th { white-space: nowrap; }
/* 열 머리의 단추는 작게 — 머리 줄이 키 커지지 않게(2026-10-12 사용자: 줄 간격이 이상함) */
table.att-hw th { padding-top: 3px; padding-bottom: 3px; }
table.att-hw th .th-in { display: inline-flex; align-items: center; gap: 8px; }   /* 글자와 단추를 같은 높이에 */
table.att-hw th .th-in button { margin: 0; padding: 1px 8px; font-size: 11px; line-height: 1.6; }
table.att-hw th.hw-th .th-in { padding-left: 9px; }   /* 그룹 띠(테두리 3px + 여백 6px)만큼 밀어 아래 과제 줄과 같은 선에 */

/* 미완료 목록의 평가 칸 — 모양은 위 검사 줄과 같고, 등급 · 보류는 보여 주기만 한다(2026-10-12) */
.undone-item .grades.ro button:disabled { opacity: 1; cursor: default; }
.undone-item .grades { margin-left: auto; margin-right: -2px;   /* 위 검사 줄의 A~D · [보류]와 같은 선에 (undone-item 안쪽 여백 8px - hw-grp 6px 차이 보정) */ }
/* 고칠 수 없는 칸은 **회색**으로 — 매긴 등급만 연한 회색 바탕으로 보여 준다(2026-10-12 사용자).
   바꿀 수 있는 [완료]/[미완료]만 색이 남아 눈에 띈다 */
.undone-item .grades.ro button:disabled { background: #fff; color: #94a3b8; border-color: #e5e7eb; }
.undone-item .grades.ro button:disabled.on { background: #e5e7eb; color: #475569; border-color: #cbd5e1; font-weight: 600; }
/* 시험지 관리: 왼쪽 폴더 나무 + 오른쪽 목록 (2026-10-12 사용자 — 진도표 관리와 같은 모양) */
/* 진도표 관리의 찾기 줄은 왼쪽 나무 · 오른쪽 칸 위에 걸친다(grid 두 칸을 다 쓴다) */
.chasi2 .chasi-find { margin-bottom: 10px; }   /* 찾기 칸은 오른쪽(교재 목록) 위에 있다 */
/* 학부모 · 학생 앱의 '알림 받기' 줄 */
.push-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 10px; background: #f3f6f5; border-bottom: 1px solid var(--line); }
.push-bar .muted { line-height: 1.5; }
/* 시험지 찾기 줄: 위에 한 줄 · 아래에 자동 완성 목록 */
.qp-find { position: relative; display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.qp-find .find-in { position: relative; flex: 1; display: block; }
.qp-find .find-in input { width: 100%; padding-right: 30px; }
.qp-find .mag { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); opacity: .7; pointer-events: none; }
.qp-auto { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid var(--line);
  border-radius: 0 0 8px 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 320px; overflow: auto; }
.qp-auto-row { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 12px; border-radius: 0; }
button.qp-auto-row:hover { background: var(--blue-bg); }
.qp-card .qp-body { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; }
.qp-tree { border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; background: #fff; }
.lpane { display: grid; gap: 10px; align-content: start; min-width: 0; }
.addbox { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 8px; display: grid; gap: 8px; }
/* 교재 · 시험지 · 반 추가: 넓찍한 제대로 된 단추(2026-10-12 사용자) */
.add-btn { display: block; width: 100%; padding: 10px 12px; font-size: 14px; font-weight: 600;
  color: var(--blue); background: #f2f7ff; border: 1px solid #cfe0ff; border-radius: 10px; }
.add-btn:hover { background: #e7f0ff; }
.add-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.anav .add-btn { margin-top: 10px; }
/* 폴더를 안 정한 것: 맨 아래 · 흐린 글씨 · 점선으로 떼어 둔다 */
.xrow.unfiled { border-top: 1px dashed var(--line); margin-top: 4px; }
.xrow.unfiled .xname, .xrow.unfiled .xcnt { color: var(--muted); }
.xrow.unfiled .xf { filter: grayscale(1); opacity: .55; }
/* 골라도 파랗게 하지 않는다 — 흐린 회색으로만(2026-10-13 사용자) */
.xrow.unfiled:hover { background: #f1efeb; }
.xrow.unfiled.cur { background: #eceae5; border-color: #d8d4cc; }
.addbox .a-add { display: grid; gap: 6px; padding: 0; }
.qp-list { min-width: 0; }
.qp-list .short { width: 120px; }
/* 교재 목록 표(시험지와 같은 모양) — 줄을 누르면 그 교재가 아래에 열린다 */
.book-tbl tbody tr { cursor: pointer; }
.book-tbl tbody tr.sel { background: #eef4ff; }
.book-tbl tbody tr.dragging { opacity: .4; }
.book-tbl .bi-rename { width: 100%; }
@media (max-width: 900px) { .qp-card .qp-body { grid-template-columns: 1fr; } }
/* 학생 기록 아래의 상담 기록 (2026-10-12 사용자) */
.counsel-in-rec { margin-top: 14px; }
.counsel-in-rec .counsel-new { margin-bottom: 8px; }
/* 오늘 요약 칸의 '수업을 확정하세요' 알림 (2026-10-12) */
table.note-grid .sum-todo { margin-top: 6px; background: #fff7e6; border: 1px solid #ffd591; border-radius: 4px; padding: 2px 6px; display: inline-block; }

/* 머리말의 [?] — 누르면 아래에 설명 상자 (2026-10-12 사용자) */
.help-btn { width: 18px; height: 18px; padding: 0; margin-left: 6px; border-radius: 50%; border: 1.5px solid var(--muted);
  background: #fff; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1; vertical-align: middle; }
.help-btn:hover { border-color: var(--blue); color: var(--blue); }
.help-btn.on { border-color: var(--blue); background: var(--blue); color: #fff; }
.help-box { background: #f8f6f1; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 0 6px 6px 0;
  padding: 6px 10px; margin: 4px 0 8px; color: #475569; line-height: 1.7; }
/* 칸을 비워 저장한 카드 = 오늘 안 나감 (아직 안 적은 빈 칸과 구분, 2026-10-12 사용자) */
.not-done { color: #8a5f17; background: #f6ecdd; border-radius: 5px; padding: 1px 7px; }
/* 오늘 수업의 제목 줄 — 번호를 색 딱지로, 위에 굵은 줄을 그어 구역이 바로 보이게 (2026-10-12 사용자: 제목줄 구분이 힘들다) */
h2.sec { font-size: 17px; font-weight: 700; letter-spacing: -.2px; flex-wrap: wrap;
  margin: 30px 0 10px; padding-top: 13px; border-top: 2px solid var(--line); }
.sec-no { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 23px; height: 23px; border-radius: 7px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; }
h2.sec .bar-sep { font-size: 15px; font-weight: 400; }
/* 제목 옆 요약(출석 0 · 지각 0 …) — 제목과 섞이지 않게 선으로 끊는다 */
.sec-sum { font-size: 12px; font-weight: 400; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); }
/* 시험이 없는 날의 한 줄 (제목 칸을 차지하지 않게, 2026-10-12 사용자) */
.sec-fold { display: flex; align-items: center; gap: 8px; margin: 30px 0 6px; padding-top: 13px; border-top: 2px solid var(--line); }
.sec-fold b { font-size: 15px; }
.sec-fold .sec-no { width: 20px; height: 20px; border-radius: 6px; font-size: 12px; background: var(--muted); }
/* 날짜 이동 단추에 갈 날짜를 적는다(2026-10-12 사용자) — 반마다 수업요일이 달라 눌러 보지 않고도 알 수 있게 */
.date .daynav { font-size: 13px; padding: 5px 10px; color: var(--muted); }
.date .daynav:hover { color: var(--text); }