/*! 일등수학학원 관리 웹앱 | © 2026 일등수학학원. All rights reserved.
 *  무단 복제·배포·2차적 저작물 작성을 금합니다. */
/* app.css — 공통 스타일 / 컴포넌트 규격 (DESIGN.md 3장 기준)
   - 모바일 우선(최대폭 ~500px), 플랫, 얇은 테두리 + 여백으로 구분
   - 색은 tokens.css 변수만 사용. 폰트 굵기 400/500만. */

/* ── 리셋 / 베이스 ───────────────────────────── */
*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  background:var(--surface-0);
  color:var(--text-primary);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-weight:var(--fw-normal);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; }

/* 앱 셸: 모바일 폭으로 가운데 정렬 */
.app{
  max-width:500px;
  margin:0 auto;
  min-height:100vh;
  background:var(--surface-0);
  display:flex;
  flex-direction:column;
}
.app-body{ display:flex; flex-direction:column; flex:1; min-width:0; }

/* 사이드바: 모바일에선 숨김 (넓은 화면에서만 표시) */
.sidebar{ display:none; }

/* ── 넓은 화면(PC): 왼쪽 사이드바 + 넓은 본문 ── */
@media (min-width:900px){
  .app{
    max-width:none;      /* 전체 폭 항상 사용 */
    flex-direction:row;
    align-items:stretch;
  }
  .sidebar{
    display:flex;
    flex-direction:column;
    width:220px;
    flex:none;
    position:sticky;
    top:0;
    height:100vh;
    background:var(--surface-1);
    border-right:1px solid var(--border);
    padding:8px 0;
  }
  .app-body{ min-height:100vh; }
  /* 여백 줄여 표를 최대한 넓게 */
  .app-main{ padding:16px 18px; }
  /* PC에선 홈 안의 중복 메뉴 숨김(사이드바가 대신) */
  .home-menu{ display:none; }
}

/* ── 사이드바 내용 ── */
.sidebar-brand{
  font-size:16px;
  font-weight:var(--fw-medium);
  padding:14px 18px 16px;
}
.side-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 18px;
  color:var(--text-secondary);
  cursor:pointer;
  font-size:14px;
  border:none;
  background:transparent;
  width:100%;
  text-align:left;
}
.side-item:hover{ background:var(--state-bg); }
.side-item.active{ background:var(--state-bg); color:var(--text-primary); }
.side-item .ti{ font-size:18px; flex:none; }
.side-spacer{ flex:1; }
.side-foot{ padding:8px 0; border-top:1px solid var(--border); }

/* ── 헤더 ────────────────────────────────────── */
.app-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:8px;
  height:52px;
  padding:0 var(--pad);
  background:var(--surface-1);
  border-bottom:1px solid var(--border);
}
.app-header .title{
  font-size:16px;
  font-weight:var(--fw-medium);
}
.app-header .spacer{ flex:1; }

/* 헤더 아이콘 버튼(로그아웃/뒤로 등) */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:none; background:transparent;
  color:var(--text-secondary);
  border-radius:var(--radius);
  font-size:18px;
}
.icon-btn:hover{ background:var(--state-bg); }

/* 직원 화면 미리보기 배너 */
.preview-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; font-size:13px;
  background:var(--text-primary); color:var(--surface-1);
}
.preview-banner .ti{ vertical-align:middle; margin-right:2px; }
.preview-exit{
  background:var(--surface-1); color:var(--text-primary);
  border:none; border-radius:6px; padding:6px 14px; font-size:13px; font-weight:500;
  cursor:pointer; font-family:inherit; flex:none;
}
body.previewing .app-body{ padding-bottom:52px; }

/* ── 오늘 보강 상단 고정 배너 (모든 페이지) ── */
.makeup-banner{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; font-size:13px; cursor:pointer;
  background:var(--mk); color:#fff;
}
.makeup-banner .mb-ic{ font-size:16px; flex:none; }
.makeup-banner .mb-lbl{ font-weight:var(--fw-medium); flex:none; }
.makeup-banner .mb-list{ flex:1; min-width:0; font-size:12.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.95; }
.makeup-banner .mb-x{
  flex:none; background:transparent; border:none; color:#fff; opacity:.85;
  font-size:15px; cursor:pointer; padding:2px 4px; line-height:1;
}
.makeup-banner .mb-x:hover{ opacity:1; }
/* 배너가 있으면 앱 전체를 그만큼 아래로 밀어 헤더가 안 가려지게 */
body.has-makeup-banner .app{ padding-top:38px; }

/* 메인 영역 */
.app-main{
  flex:1;
  padding:var(--pad);
}

/* 저작권 표시 — 모든 화면 하단에 한 줄 */
.app-foot{
  text-align:center;
  font-size:11px;
  color:var(--text-muted);
  padding:14px 16px 22px;
  line-height:1.6;
}
/* 미리보기 배너·보강 배너가 떠 있을 때 가리지 않게 */
body.previewing .app-foot{ padding-bottom:60px; }

/* ── 리스트 행 (01) ──────────────────────────── */
.list{ background:var(--surface-1); border-radius:var(--radius); overflow:hidden; }
.list-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid var(--border);
}
.list-row:last-child{ border-bottom:none; }
.list-row .icon{ font-size:18px; color:var(--text-secondary); flex:none; }
.list-row .label{ font-size:14px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-row .meta{ font-size:12px; color:var(--text-muted); flex:none; }
.list-row .chevron{ font-size:16px; color:var(--text-muted); flex:none; }

/* 안읽음 점 */
.dot-unread{
  width:7px; height:7px; border-radius:50%;
  background:var(--text-secondary); flex:none;
}

/* ── 확인증 미리보기: A4 원본을 화면 폭에 맞게 축소 ── */
/* zoom 은 transform 과 달리 레이아웃 박스까지 줄여 빈 공간이 안 생긴다. */
.cert-preview-holder{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
}
.cert-preview-holder .cert{ zoom:0.44; margin:0 auto; }
@media (min-width:520px){ .cert-preview-holder .cert{ zoom:0.62; } }

/* ── 오늘 보강 로그인 팝업 행 ─────────────── */
.mk-alert-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border); }
.mk-alert-row:last-child{ border-bottom:none; }
.mk-alert-t{ flex:none; width:66px; font-size:12.5px; font-weight:var(--fw-medium); color:var(--mk); font-variant-numeric:tabular-nums; }
.mk-alert-nm{ flex:1; min-width:0; font-size:13.5px; }

/* ── 홈: 보강 예정 카드 ───────────────────── */
.mk-home-day{ font-size:11px; color:var(--text-muted); padding:8px 14px 3px; }
.mk-home-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; cursor:pointer;
  border-left:4px solid transparent;
}
.mk-home-row.today{ border-left-color:var(--mk); background:var(--mk-bg); }
.mk-home-row .mk-home-t{
  flex:none; width:66px; font-size:12.5px; font-weight:var(--fw-medium);
  color:var(--text-secondary); font-variant-numeric:tabular-nums;
}
.mk-home-row.today .mk-home-t{ color:var(--mk); }
.mk-home-row .mk-home-nm{ flex:1; min-width:0; font-size:13.5px; }

/* ── 여름특강 출석부 (출석부 탭) ───────────── */
.summer-grp-head{
  padding:11px 14px; font-size:14px; font-weight:var(--fw-medium);
  border-bottom:1px solid var(--border);
}

/* ── 써머특강 반배정 ───────────────────────── */
.badge.on-assign{ background:var(--mk-bg); color:var(--mk); }
.summer-assign{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-bottom:1px solid var(--border);
}
.summer-assign:last-child{ border-bottom:none; }
.summer-assign .sa-nm{ flex:1; min-width:0; font-size:13px; }
.summer-assign .sa-days{
  font-size:10.5px; color:var(--mk); background:var(--mk-bg);
  padding:1px 7px; border-radius:999px; flex:none;
}

/* ── 담당 학생 변동 알림 팝업 ──────────────── */
.alert-row{
  padding:10px 12px; border-bottom:1px solid var(--border);
}
.alert-row:last-child{ border-bottom:none; }
.alert-nm{ font-size:14px; }
.alert-sub{ font-size:12.5px; color:var(--text-secondary); margin-top:3px; }
.alert-when{ font-size:11px; margin-top:3px; }

/* ── 학생 종합 기록 카드 ───────────────────── */
.rec-hd{ padding:14px; border-left:4px solid var(--border-strong); }
.rec-hd.rec-ok{ border-left-color:var(--ok); }
.rec-hd.rec-wait{ border-left-color:var(--bar-blank); }
.rec-hd.rec-out{ border-left-color:var(--out); }
.rec-nm{ font-size:19px; font-weight:var(--fw-medium); }
.rec-sub{ font-size:12.5px; color:var(--text-secondary); margin-top:3px; }
.badge.on-ok{ color:var(--ok); }

/* 요약 타일에 보조 문구 한 줄 */
.metric-card .m-sub{ font-size:10px; margin-top:1px; }

/* 성적 차트 */
.chart-title{ font-size:11px; margin:2px 2px 2px; }
.chart-cap{ font-size:11px; padding:4px 2px 0; }
.rec-chart{ padding:2px 0; }
.rec-chart svg{ display:block; width:100%; height:auto; }
.rec-chart .axis{ fill:var(--text-muted); font-size:9px; font-family:inherit; }
.rec-chart .gl{ stroke:var(--border); stroke-width:1; }
.rec-chart .ln{ fill:none; stroke:var(--osu-week-fill); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rec-chart .pt{ fill:var(--osu-week-fill); stroke:var(--surface-1); stroke-width:2; }
.rec-chart .pt-open{ fill:var(--surface-1); stroke:var(--osu-week-fill); stroke-width:2; }
.rec-chart .vlab{ fill:var(--text-primary); font-size:10.5px; font-weight:var(--fw-medium);
  font-family:inherit; font-variant-numeric:tabular-nums; }

/* 출결 요약 — 색이 유일한 단서가 되지 않게 숫자·글자를 주 정보로 */
.att-sum{ display:flex; gap:8px; }
.att-sum-c{ flex:1; border:1px solid var(--border); border-radius:var(--radius); padding:8px; text-align:center; }
.att-sum-l{ font-size:11px; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; gap:4px; }
.att-sum-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.att-sum-v{ font-size:17px; font-weight:var(--fw-medium); margin-top:2px; font-variant-numeric:tabular-nums; }

/* 오수완 브리핑 문구 */
.osu-txt{ white-space:pre-wrap; font-size:12px; line-height:1.6;
  background:var(--surface-0); border:1px solid var(--border); border-radius:6px;
  padding:10px; margin-top:8px; color:var(--text-secondary); }

/* 성적 입력 폼 (접기) */
.entry{ border-top:1px solid var(--border); margin-top:12px; }
.entry-sum{ padding:11px 2px 3px; font-size:13px; font-weight:var(--fw-medium);
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; }
.entry-sum::-webkit-details-marker{ display:none; }
.entry-sum .arw{ font-size:16px; color:var(--text-muted); transition:transform .15s; flex:none; }
.entry[open] > .entry-sum .arw{ transform:rotate(90deg); }
.entry-sum .cnt{ font-size:11.5px; color:var(--text-muted); font-weight:400; }
.entry-body{ padding:2px 0 4px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* 접기 섹션 (인적사항 · 수업시간/담임) */
.rec-sum{
  padding:12px 14px; font-size:13.5px; cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:8px;
}
.rec-sum::-webkit-details-marker{ display:none; }
.rec-sum .arw{ font-size:16px; color:var(--text-muted); transition:transform .15s; flex:none; }
details[open] > .rec-sum .arw{ transform:rotate(90deg); }
.rec-body{ padding:0 14px 14px; }

/* 타임라인 */
.tl{ position:relative; padding-left:18px; }
.tl::before{
  content:""; position:absolute; left:4px; top:5px; bottom:5px;
  width:1px; background:var(--border);
}
.tl .ev{ position:relative; padding-bottom:14px; }
.tl .ev:last-child{ padding-bottom:0; }
.tl .ev::before{
  content:""; position:absolute; left:-17px; top:5px;
  width:7px; height:7px; border-radius:50%;
  background:var(--text-muted);
  border:2px solid var(--surface-1);
  box-shadow:0 0 0 1px var(--border);
}
.tl .ev.is-talk::before{ background:var(--osu-week-fill); }
.tl .ev.is-set::before{ background:var(--new); }
.tl .ev.is-ab::before{ background:var(--ab); }
.tl .ev.is-mk::before{ background:var(--mk); }
.tl .when{
  font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:6px;
}
/* 타임라인 상담 수정·삭제 버튼 — 평소엔 흐리게 */
.tl-edit, .tl-del{
  border:none; background:transparent; padding:0 2px; cursor:pointer;
  color:var(--text-muted); font-size:13px; line-height:1; opacity:.5;
}
.tl-edit:hover{ color:var(--text-primary); opacity:1; }
.tl-del:hover{ color:var(--danger); opacity:1; }
.tl-edit:focus-visible{ outline:2px solid var(--text-secondary); outline-offset:2px; }
.tl-del:focus-visible{ outline:2px solid var(--danger); outline-offset:2px; }
.tl .what{ font-size:13px; margin-top:1px; }
.tl .who{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.tl .tag{
  display:inline-block; font-size:10px; padding:1px 6px; border-radius:999px;
  background:var(--state-bg); color:var(--text-secondary); margin-right:5px;
}
.tl .ev.is-talk .tag{ color:var(--osu-week-fill); }

/* ── 출석부 ─────────────────────────────────── */
.att-list{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
/* 전체 보기 — 요일 섹션 헤더 */
.att-day-group{ margin-bottom:14px; }
.att-day-head{
  font-size:13px; font-weight:var(--fw-medium);
  color:var(--text-secondary);
  padding:6px 4px 8px;
}
/* 좌측 4px 상태바 + 옅은 배경 (신규=파랑, 시작예정=연보라) */
.att-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  border-left:4px solid transparent;
}
.att-row:last-child{ border-bottom:none; }
.att-row.is-new{ border-left-color:var(--new); background:var(--new-bg); }
.att-row.is-soon{ border-left-color:var(--bar-blank); }
.att-time{
  flex:none; width:50px;
  font-size:13px; color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
}
.att-name{ flex:1; min-width:0; cursor:pointer; font-size:14px; }
.att-sub{
  font-size:12px; color:var(--text-muted); margin-top:2px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
/* 출석부 행에 얹는 오수완브리핑 진행 바 (초·중등만) */
.att-osu{ margin-top:0; }
.att-badge{
  display:inline-block; margin-left:6px;
  font-size:10px; padding:1px 6px; border-radius:999px;
  background:var(--state-bg); color:var(--text-secondary);
}
.att-badge.is-new{ background:var(--new-bg); color:var(--new); }
.att-badge.is-soon{ background:var(--state-bg); color:var(--text-secondary); }

.att-actions{ display:flex; gap:6px; flex:none; }
.att-btn{
  min-width:46px; padding:7px 10px;
  border:1px solid var(--border-strong); border-radius:var(--radius);
  background:transparent; color:var(--text-secondary);
  font-size:12px; cursor:pointer;
}
.att-btn:hover{ background:var(--state-bg); }
.att-btn.on-ok{ background:var(--ok-bg); border-color:var(--ok); color:var(--ok); font-weight:var(--fw-medium); }
.att-btn.on-ab{ background:var(--ab-bg); border-color:var(--ab); color:var(--ab); font-weight:var(--fw-medium); }
.att-btn.on-mk{ background:var(--mk-bg); border-color:var(--mk); color:var(--mk); font-weight:var(--fw-medium); }

/* 출석부 시트 — 셀에 시간+상태색 */
.att-sheet td .att-cell{ cursor:pointer; font-variant-numeric:tabular-nums; }
.att-sheet td .att-cell.s-ok{ background:var(--ok-bg); color:var(--ok); }
.att-sheet td .att-cell.s-ab{ background:var(--ab-bg); color:var(--ab); }
.att-sheet td .att-cell.s-mk{ background:var(--mk-bg); color:var(--mk); }
.att-sheet .att-sheet-name{ cursor:pointer; }

/* ── 오수완브리핑 명단: 이름 밑 1~4주차 진행 바 ── */
/* 이름 줄은 한 줄 말줄임 유지, 그 아래 바를 세로로 쌓는다 */
.list-row .label.osu-label{ white-space:normal; }
.osu-name-line{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.osu-wk-bars{ display:flex; gap:4px; margin-top:6px; }
.osu-wk-bar{
  width:18px; height:3px; border-radius:2px;
  background:var(--osu-week-empty);
  flex:none;
}
.osu-wk-bar.on{ background:var(--osu-week-fill); }

/* ── 모달(팝업) ─────────────────────────────── */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.4);
  display:flex; align-items:flex-end; justify-content:center;
}
.modal{
  background:var(--surface-1);
  width:100%; max-width:560px; max-height:88vh; overflow:auto;
  border-radius:14px 14px 0 0;
}
.modal-head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; gap:8px;
  padding:14px 16px; background:var(--surface-1);
  border-bottom:1px solid var(--border);
}
.modal-title{ font-size:16px; font-weight:var(--fw-medium); }
.modal-body{ padding:12px 16px 28px; }
@media (min-width:640px){
  .modal-overlay{ align-items:center; padding:20px; }
  .modal{ border-radius:12px; }
}

/* 시험지 수거 현황 표 */
.collect-block{ margin-bottom:18px; }
table.collect-table{ border-collapse:collapse; font-size:13px; width:100%; }
table.collect-table th, table.collect-table td{
  border:1px solid var(--border);
  padding:5px 6px; vertical-align:top; text-align:left;
  min-width:58px;
}
table.collect-table thead th{
  background:var(--surface-0); color:var(--text-secondary);
  font-weight:var(--fw-normal); font-size:12px;
  position:sticky; top:0; z-index:2; white-space:nowrap;
}
table.collect-table th.corner{
  position:sticky; left:0; top:0; z-index:4;
  background:var(--surface-0); font-weight:var(--fw-medium); color:var(--text-primary);
  min-width:84px;
}
table.collect-table th.rowhead{
  position:sticky; left:0; z-index:1;
  background:var(--surface-1); font-weight:var(--fw-medium);
  min-width:84px; font-size:12px; line-height:1.3; white-space:normal;
}
.cc-marks{ font-size:12px; font-weight:500; color:var(--text-primary); line-height:1.5; }

/* 등급컷 관리 */
.cut-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px 10px; margin-bottom:12px; }
.cut-grid .field-label{ margin:0 0 3px; }
.cut-saved{ display:flex; align-items:center; gap:8px; padding:11px 0; border-bottom:1px solid var(--border); }
.cut-saved:last-child{ border-bottom:none; }
.cut-saved .cs-title{ font-size:15px; font-weight:var(--fw-medium); }
.cut-saved .cs-sum{ font-size:15px; color:var(--text-primary); margin-top:3px; letter-spacing:.02em; }

/* 등급컷 조회 카드 */
.cut-card{ border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; background:var(--surface-1); }
.cut-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.cut-card-head .cc-title{ flex:1; font-size:15px; font-weight:var(--fw-medium); }
.cut-view-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.cut-view-cell{ text-align:center; padding:8px 4px; background:var(--surface-0); border-radius:6px; }
.cut-view-cell .cv-lv{ font-size:12px; color:var(--text-secondary); }
.cut-view-cell .cv-score{ font-size:20px; font-weight:var(--fw-medium); margin-top:2px; }

/* 점수 관리 상단 집계 카드 */
.score-metrics{ grid-template-columns:repeat(5,1fr); gap:6px; }
.score-metrics .metric-card{ padding:10px 6px; text-align:center; }
.score-metrics .m-label{ font-size:11px; }
.score-metrics .m-value{ font-size:19px; margin-top:1px; }

/* 시험 점수 목록 행 (가독성 강화) */
.score-row{ align-items:flex-start; padding:14px 16px; }
.score-row .score-name{ font-size:16px; line-height:1.35; margin-bottom:3px; }
.score-row .score-sub{ font-size:14px; }

/* 공지 목록/상세 */
.notice-title{ font-size:14px; }
.notice-sub{ font-size:12px; }
.notice-content{ white-space:pre-wrap; line-height:1.6; margin-bottom:10px; }
.notice-meta{ font-size:12px; margin-top:6px; }

/* ── 표 행 (05) ──────────────────────────────── */
.table{ background:var(--surface-1); border-radius:var(--radius); overflow:hidden; }
.table-head{
  display:flex;
  gap:8px;
  padding:8px 16px;
  font-size:11px;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.table-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  font-size:13px;
  border-bottom:1px solid var(--border);
}
.table-row:last-child{ border-bottom:none; }
.table-row .col-name{ flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-row .col-date{ width:70px; flex:none; color:var(--text-secondary); }
.table-row .col-action{ width:44px; flex:none; text-align:right; color:var(--text-secondary); }
/* 펼쳐서 선택한 학생 행 강조 */
.table-row.selected{ background:var(--state-bg); box-shadow:inset 3px 0 0 var(--border-strong); }
.table-row.selected .col-name{ font-weight:var(--fw-medium); color:var(--text-primary); }

/* 입학 성공: 입학Test → 입학원서까지 이어진 학생 — 줄 전체 옅은 초록 + 좌측 바 */
.table-row.row-enrolled{ background:var(--ok-bg); box-shadow:inset 4px 0 0 var(--ok); }
.table-row.row-enrolled.selected{ background:var(--ok-bg); box-shadow:inset 4px 0 0 var(--ok); }

/* 학생기록카드: 관별 배정 인원 (관리자) */
.gwan-row{ display:flex; gap:10px; }
.gwan-box{ flex:1; min-width:0; border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; }
.gwan-head{ display:flex; align-items:baseline; gap:8px; }
.gwan-t{ font-size:13px; font-weight:var(--fw-medium); }
.gwan-n{ margin-left:auto; font-size:18px; font-weight:var(--fw-medium); }
.gwan-list{ font-size:11.5px; margin-top:5px; line-height:1.6; }

/* 고등 선행 배지 — 중등이 고등 과정을 나가는 학생 */
.badge.badge-adv{ color:var(--new); background:var(--new-bg); }

/* 공지: 확인 / 미확인 명단 (접기) */
.read-block{ border:1px solid var(--border); border-radius:var(--radius); margin-top:8px; background:var(--surface-1); }
.read-sum{ padding:9px 11px; font-size:12.5px; cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:7px; }
.read-sum::-webkit-details-marker{ display:none; }
.read-sum .arw{ font-size:15px; color:var(--text-muted); transition:transform .15s; flex:none; }
details[open] > .read-sum .arw{ transform:rotate(90deg); }
.read-names{ padding:0 11px 10px; font-size:12.5px; color:var(--text-secondary); line-height:1.7; }

/* 공지 댓글 — 펼친 공지 아래에 붙는 짧은 답 */
.cmt-wrap{ margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
.cmt-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.cmt-row{ padding:8px 10px; background:var(--state-bg); border-radius:var(--radius); }
.cmt-head{ display:flex; align-items:center; gap:6px; }
.cmt-name{ font-size:12.5px; font-weight:var(--fw-medium); }
.cmt-at{ font-size:11px; }
.cmt-head .icon-btn{ width:26px; height:26px; font-size:14px; flex:none; }
.cmt-body{ font-size:13px; line-height:1.65; margin-top:3px; white-space:pre-wrap; word-break:break-word; }
.cmt-form{ display:flex; gap:6px; align-items:flex-start; }
.cmt-form textarea{ min-height:38px; }

/* 재원생 보강: 목록에서 바로 누르는 완료 버튼 */
.mk-done{ padding:5px 10px; border:1px solid var(--border-strong); border-radius:14px;
  background:var(--surface-1); color:var(--text-secondary); font:inherit; font-size:12px; cursor:pointer; }
.mk-done:hover{ background:var(--state-bg); }
.mk-done.on{ background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }
.mk-done:disabled{ opacity:.5; cursor:default; }

/* 행정업무 수납: 목록에서 바로 누르는 상태 버튼 */
.pay-btn{ padding:4px 9px; border:1px solid var(--border-strong); border-radius:14px;
  background:var(--surface-1); color:var(--text-secondary); font:inherit; font-size:11.5px; cursor:pointer; }
.pay-btn:hover{ background:var(--state-bg); }
.pay-btn.on{ background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }
.pay-btn.bad{ background:var(--ab-bg); border-color:var(--ab); color:var(--ab); }
.pay-btn.ex{ background:var(--out-bg); border-color:var(--border-strong); color:var(--text-muted); }
.pay-btn:disabled{ opacity:.5; cursor:default; }
/* 청구액과 실제 수납액이 다른 건 — 사유가 붙어 있다 */
.pay-diff{ color:var(--mk); }

/* ── 출석부 시간표 보기 ── */
/* 티칭=파랑, 코칭=핑크. 정원(6명)이 차면 배경이 진해진다. */
.tt-wrap{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.tt-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-bottom:9px; border-bottom:2px solid var(--text-primary); margin-bottom:10px; }
.tt-t{ font-size:18px; font-weight:var(--fw-medium); }
.tt-room{ font-size:12px; color:var(--surface-1); background:var(--text-primary); padding:2px 8px; border-radius:11px; }
.tt-lg{ font-size:11.5px; color:var(--text-secondary); display:flex; align-items:center; gap:4px; }
.tt-lg::before{ content:""; width:10px; height:10px; border-radius:3px; display:inline-block; }
.tt-lg.t::before{ background:var(--new-bg); border:1px solid var(--new); }
.tt-lg.c::before{ background:var(--mk-bg); border:1px solid var(--mk); }

/* 표는 제 크기로 그린 뒤 화면 폭에 맞게 축소한다.
   단 너무 작아지면 읽을 수 없으므로 하한(ttFit 의 MIN_SCALE)까지만 줄이고 그 아래는 가로 스크롤. */
.tt-scroll{ overflow-x:auto; overflow-y:hidden; }
.tt-grid{ display:grid; border:1px solid var(--border-strong); border-radius:6px;
  overflow:hidden; transform-origin:top left; }
/* 시간축·요일 머리글은 스크롤해도 제자리(위치 보정은 ttStick 이 한다) */
.tt-h{ background:var(--surface-0); font-size:14.5px; font-weight:var(--fw-medium); text-align:center;
  padding:8px 4px; border-bottom:1px solid var(--border-strong); border-right:1px solid var(--border);
  position:relative; z-index:5; }
.tt-h:first-child{ z-index:6; }
.tt-h:last-child{ border-right:none; }
.tt-h-c{ font-size:12px; font-weight:400; margin-left:4px; }
.tt-axis{ position:relative; z-index:4; background:var(--surface-1);
  border-right:1px solid var(--border-strong); }
.tt-tick{ position:absolute; left:0; right:0; font-size:12.5px; color:var(--text-secondary);
  padding-right:6px; text-align:right; transform:translateY(-7px); }
.tt-col{ position:relative; border-right:1px solid var(--border); }
.tt-col:last-child{ border-right:none; }
.tt-ln{ position:absolute; left:0; right:0; border-top:1px solid var(--border); }
.tt-ln.hr{ border-top-color:var(--border-strong); }

.tt-blk{ position:absolute; border-radius:5px; padding:3px 5px; border:1px solid transparent; overflow:hidden; }
.tt-blk.t{ background:var(--new-bg); border-color:var(--new); }
.tt-blk.t.full{ background:#b3cdf5; }
.tt-blk.c{ background:var(--mk-bg); border-color:var(--mk); }
.tt-blk.c.full{ background:#f0c78a; }
.tt-blk-h{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.tt-n{ flex:none; font-size:12px; font-weight:var(--fw-medium); padding:0 6px; border-radius:9px;
  background:var(--surface-1); border:1px solid currentColor; }
.tt-blk.t .tt-n{ color:var(--new); }
.tt-blk.c .tt-n{ color:var(--mk); }
.tt-blk.full .tt-n{ background:var(--text-primary); color:var(--surface-1); border-color:var(--text-primary); }
.tt-k{ flex:none; font-size:11.5px; font-weight:var(--fw-medium); }
.tt-blk.t .tt-k{ color:var(--new); }
.tt-blk.c .tt-k{ color:var(--mk); }
/* 정원 초과 구간 — 겹친 30분도 그 구간만 정확히 덮는다 */
.tt-over{ position:absolute; left:0; right:0; z-index:3; pointer-events:none;
  background:var(--over-tint); border-top:1px dashed var(--ab); border-bottom:1px dashed var(--ab); }
.tt-over-n{ position:absolute; top:2px; right:4px; font-size:12px; font-weight:var(--fw-medium);
  color:var(--surface-1); background:var(--ab); padding:1px 7px; border-radius:9px; }

/* 이름이 주인공 — 블록 안에서 가장 크게 */
.tt-names{ margin-top:3px; font-size:17px; line-height:1.35; font-weight:var(--fw-medium); }
.tt-names div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-g{ font-size:11px; margin-left:2px; font-weight:400; }

/* 출석부: 명단 위 일괄 출석 바 */
.att-bulk-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0 2px 9px; }

/* 학생기록카드: 입력한 성적 목록 (누르면 수정 폼) */
.score-list{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.score-row{ display:flex; align-items:center; gap:8px; padding:9px 10px; font-size:13px;
  border-bottom:1px solid var(--border); cursor:pointer; }
.score-list > *:last-child .score-row, .score-list > .score-row:last-child{ border-bottom:none; }
.score-row:hover{ background:var(--state-bg); }
.score-row.on{ background:var(--state-bg); }
.score-nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.score-v{ flex:none; font-weight:var(--fw-medium); }
.score-g{ flex:none; font-size:12px; }
.score-edit{ padding:10px; border-bottom:1px solid var(--border); background:var(--surface-0); }

/* 목록 건수 — 표 바로 위 한 줄 */
.count-bar{ display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text-secondary); padding:0 2px 7px; }

/* 월별 입학 성공률 */
.rate-card{ padding:12px 16px 14px; }
.rate-head{ display:flex; align-items:center; }
.rate-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.rate-cell{ flex:1 1 58px; min-width:58px; text-align:center;
  border:1px solid var(--border); border-radius:var(--radius); padding:7px 4px; }
.rate-m{ font-size:11px; }
.rate-p{ font-size:15px; font-weight:var(--fw-medium); margin:1px 0; }
.rate-n{ font-size:11px; }

/* 상태 바: 좌측 4px 세로 바 (입학원서) */
.table-row.bar-blank{ border-left:4px solid var(--bar-blank); }
.table-row.bar-today{ border-left:4px solid var(--bar-today); }

/* 펼침 상세 영역 */
.row-detail{
  padding:12px 16px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  font-size:13px;
}
/* 선택(펼친) 학생: 요약 줄 + 상세 정보 전체를 같은 강조색으로 구분 (입학Test·입학원서) */
.table .row-detail{ background:var(--state-bg); box-shadow:inset 3px 0 0 var(--border-strong); }
/* 리스트에서 항목을 눌러 펼친 상세 패널 — 리스트와 색으로 구분 (출석부·써머·오수완 등) */
.row-detail.rd-tint{ background:var(--state-bg); box-shadow:inset 3px 0 0 var(--border-strong); }
/* 펼쳐진 리스트 행 자체도 살짝 강조 */
.list-row.row-open{ background:var(--state-bg); box-shadow:inset 3px 0 0 var(--border-strong); }
.detail-section-label{
  font-size:11px; color:var(--text-muted);
  margin:6px 0 8px;
}
.detail-section-label:first-child{ margin-top:0; }

/* 상세 키-값 줄 */
.kv{ display:flex; gap:10px; padding:3px 0; font-size:13px; }
.kv .k{ width:84px; flex:none; font-size:12px; }
.kv .v{ flex:1; min-width:0; word-break:break-all; }

/* O/X 토글 격자 */
.toggle-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 12px;
  margin-bottom:12px;
}
.toggle-item{
  display:flex; align-items:center; gap:8px;
  font-size:13px;
}
.toggle-item input{ width:16px; height:16px; }

/* 상세 영역 입력 라벨 */
.field-label{
  display:block;
  font-size:11px; color:var(--text-muted);
  margin:4px 0 4px;
}

/* 상세 하단 버튼 줄 */
.detail-actions{
  display:flex; gap:8px; margin-top:12px;
}
.btn-danger{ color:var(--danger); border-color:var(--danger); }
.btn-danger:hover{ background:var(--state-bg); }

/* ── 지표 카드 (04) ──────────────────────────── */
.metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:var(--pad);
}
.metric-card{
  background:var(--surface-1);
  border-radius:var(--radius);
  padding:12px;
}
.metric-card .m-label{ font-size:11px; color:var(--text-muted); }
.metric-card .m-value{ font-size:23px; font-weight:var(--fw-medium); margin-top:2px; }

/* ── 배지 ────────────────────────────────────── */
.badge{
  display:inline-block;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--state-bg);
  color:var(--text-secondary);
}
/* 완료 배지(회색 농도로 구분) */
.badge-done{ color:var(--text-muted); }

/* 선택 일괄 처리 바 */
.bulk-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; margin-bottom:12px;
  background:var(--state-bg);
  border-radius:var(--radius);
  font-size:13px;
}

/* ── 버튼 ────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  padding:8px 14px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:transparent;
  color:var(--text-primary);
}
.btn:hover{ background:var(--state-bg); }
.btn .icon{ font-size:16px; }
/* 주요 동작 1개만 강조(테두리 진하게) */
.btn-primary{ border-color:var(--text-primary); }

/* ── 상태 표시: 좌측 4px 세로 바 + 옅은 배경 ──── */
.state{
  border-left:4px solid var(--state-bar);
  border-radius:0;
  background:var(--state-bg);
}
.state-done{ color:var(--done-text); }

/* ── 필터 칩 ─────────────────────────────────── */
.chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chip{
  font-size:12px;
  padding:5px 12px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  background:transparent;
  color:var(--text-secondary);
}
.chip[aria-selected="true"]{
  border-color:var(--text-primary);
  color:var(--text-primary);
}

/* ── 툴바 / 카드 폼 ──────────────────────────── */
.toolbar-row{ display:flex; gap:8px; align-items:center; }
.card-pad{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
}
.form-title{ font-size:14px; font-weight:var(--fw-medium); margin-bottom:12px; }
textarea.field{ resize:vertical; font-family:inherit; }
/* autoGrow(ui.js)가 높이를 잡는 칸 — 내용만큼 늘어나므로 최소 높이만 지킨다 */
textarea.field[style*="height"]{ min-height:52px; }

/* ── 보기 전환 세그먼트 (간략 | 시트) ────────── */
.seg-group{ display:flex; gap:4px; background:var(--state-bg); border-radius:var(--radius); padding:3px; }
.seg{
  flex:1; font-size:13px; padding:7px 10px;
  border:none; background:transparent; color:var(--text-secondary);
  border-radius:6px;
}
.seg.on{ background:var(--surface-1); color:var(--text-primary); }

/* ── 시트 보기 (구글 시트 풍, 좌우 스크롤) ────── */
.sheet-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-1);
  -webkit-overflow-scrolling:touch;
}
table.sheet{ border-collapse:collapse; font-size:13px; white-space:nowrap; }
table.sheet th, table.sheet td{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:0;
  text-align:left;
}
table.sheet th{
  background:var(--surface-0);
  color:var(--text-muted);
  font-size:11px; font-weight:var(--fw-normal);
  padding:0 10px;
  height:34px;              /* 고정 높이(첫 행 고정 위치 기준) */
  position:sticky; top:0; z-index:5;
}
/* 헤더 클릭 정렬 */
.sheet-th{ cursor:pointer; user-select:none; white-space:nowrap; }
.sheet-th:hover{ background:var(--state-bg); }
.sheet-th.sorted{ color:var(--text-primary); }
.sheet-th .sort-arrow{ font-size:13px; vertical-align:middle; margin-left:2px; }

/* 왼쪽 고정 열(신청일·이름) — 좌우 스크롤해도 보임. left는 JS가 실제 너비로 지정 */
table.sheet td.frozen{
  position:sticky; z-index:2;
  background:var(--surface-1);
  box-shadow:1px 0 0 var(--border);
}
table.sheet thead th.frozen{ z-index:7; }

/* 첫 데이터 행 고정 — 제목 바로 아래에 붙어 아래 행과 비교 */
table.sheet tbody tr.pinned-row td{
  position:sticky; top:34px; z-index:3;
  background:var(--surface-1);
  box-shadow:0 1px 0 var(--border);
}
table.sheet tbody tr.pinned-row td.frozen{ z-index:4; }

/* 좌우 이동 버튼 줄 */
.sheet-controls{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.sheet-scroll-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:30px;
  border:1px solid var(--border-strong); background:transparent;
  border-radius:var(--radius); color:var(--text-secondary); font-size:16px;
}
.sheet-scroll-btn:hover{ background:var(--state-bg); }

/* 시트 편집 모드 — 연노랑 배경으로 구분 */
.sheet-block.editing table.sheet td{ background:#fffdf0; }
.sheet-block.editing table.sheet td.frozen{ background:#fff6cf; }
.sheet-block.editing table.sheet tr.pinned-row td{ background:#fff6cf; }
.sheet-block.editing table.sheet thead th{ background:#fdf3c4; }
.sheet-block.editing .sheet-wrap{ box-shadow:0 0 0 2px #f5d76e inset; }
table.sheet td .sheet-cell,
table.sheet td .sheet-bool{
  display:block;
  padding:9px 10px;
  min-height:34px;
  cursor:text;
}
/* 긴 글(진도) 한 줄 말줄임 → 탭하면 전체 펼침 */
table.sheet td .sheet-cell.ellipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.sheet td .sheet-cell.ellipsis.expanded{ white-space:normal; overflow:visible; word-break:break-word; }
/* 왼쪽 행번호(#) */
table.sheet td .sheet-index{
  display:block; text-align:center; padding:9px 4px; min-height:34px;
  color:var(--text-muted); font-size:12px;
}
/* 행 삭제 버튼(편집 모드) */
table.sheet td .sheet-del{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:34px; padding:6px;
  background:transparent; border:none; cursor:pointer;
  color:var(--text-muted); font-size:16px;
}
table.sheet td .sheet-del:hover{ color:var(--danger); background:var(--state-bg); }

/* 문자 작성 모달 */
.sms-modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:1000; }
.sms-card{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); width:100%; max-width:420px; max-height:88vh; overflow:auto; padding:20px; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.sms-title{ font-size:16px; font-weight:var(--fw-medium); margin-bottom:8px; }
.sms-student{ font-size:13px; color:var(--text-secondary); margin-bottom:12px; }
.sms-tel{ font-size:14px; background:var(--surface-0); border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:6px; }
.sms-tel.warn{ color:var(--danger); }
.sms-lbl{ display:block; font-size:12px; color:var(--text-secondary); margin:10px 0 4px; }
.sms-range, .sms-body{ width:100%; box-sizing:border-box; font:inherit; font-size:14px; border:1px solid var(--border-strong); border-radius:8px; padding:10px; resize:vertical; background:var(--surface-1); color:var(--text-primary); }
.sms-body{ line-height:1.6; }
.sms-actions{ display:flex; gap:8px; margin-top:12px; }
.sms-actions .btn{ flex:1; }
.sms-hint{ font-size:12px; margin-top:10px; line-height:1.5; }
.sms-close{ display:block; width:100%; margin-top:12px; padding:10px; background:transparent; border:1px solid var(--border-strong); border-radius:8px; color:var(--text-secondary); cursor:pointer; font:inherit; }
.sms-close:hover{ background:var(--state-bg); }
/* 입학원서 안내: 요일·시간 선택 버튼 */
.enroll-day-row{ display:flex; gap:6px; flex-wrap:wrap; }
.enroll-day-btn{ width:38px; height:38px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface-1); color:var(--text-secondary); font:inherit; cursor:pointer; }
.enroll-day-btn.on{ background:var(--text-primary); color:#fff; border-color:var(--text-primary); }
.enroll-day-label{ font-size:12px; color:var(--text-secondary); margin:10px 0 4px; }
.enroll-time-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:2px; }
.enroll-time-btn{ padding:8px 10px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface-1); color:var(--text-secondary); font:inherit; font-size:13px; cursor:pointer; }
.enroll-time-btn.on{ background:var(--text-primary); color:#fff; border-color:var(--text-primary); }
/* 요일별 한 칸 — 화·수·금을 함께 골라도 요일끼리 섞여 보이지 않게 상자로 묶는다 */
.enroll-day-box{ border:1px solid var(--border-strong); border-radius:var(--radius); margin-top:14px; background:var(--surface-1); overflow:hidden; }
.enroll-day-box:first-child{ margin-top:10px; }
/* 요일 이름은 상자 맨 위 띠에 — 어디서 어디까지가 한 요일인지 한눈에 */
.enroll-day-title{ font-size:13px; color:var(--text-primary); font-weight:500;
  padding:8px 10px; background:var(--surface-0); border-bottom:1px solid var(--border-strong); }
.enroll-day-body{ padding:10px; }
.enroll-sub-label{ font-size:11px; color:var(--text-muted); margin:0 0 5px; }
.enroll-day-body .enroll-time-row + .enroll-sub-label{ margin-top:10px; padding-top:9px; border-top:1px solid var(--border); }
/* 수업 길이(시작~끝 자동 계산) */
.enroll-dur-row{ align-items:center; }
.enroll-dur-btn{ padding:6px 9px; font-size:12px; border-radius:14px; }
.enroll-dur-preview{ font-size:12px; color:var(--text-secondary); margin-top:9px; padding-top:8px; border-top:1px solid var(--border); }
/* 자주 쓰는 교재 버튼 — 이름이 길어 줄바꿈되므로 좌측 정렬로 흐르게 둔다 */
.enroll-book-row{ margin-bottom:0; }
.enroll-book-btn{ padding:7px 10px; font-size:12px; text-align:left; }
table.sheet td .sheet-bool{ text-align:center; cursor:pointer; color:var(--text-muted); }
table.sheet td .sheet-bool.on{ color:var(--text-primary); }
table.sheet td .sheet-cell:hover,
table.sheet td .sheet-bool:hover{ background:var(--state-bg); }
.sheet-input{
  width:100%; box-sizing:border-box;
  font:inherit; font-size:13px;
  padding:8px 9px; border:none;
  background:var(--surface-2); color:var(--text-primary);
  outline:2px solid var(--border-strong); outline-offset:-2px;
}

/* ── 공통 유틸 ───────────────────────────────── */
.muted{ color:var(--text-muted); }
.secondary{ color:var(--text-secondary); }
.section-gap{ margin-bottom:var(--pad); }

/* ── 입력 필드 ───────────────────────────────── */
.field{
  width:100%;
  font-size:14px;
  padding:11px 12px;
  margin-bottom:10px;
  background:var(--surface-1);
  color:var(--text-primary);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
}
.field:focus{ outline:none; border-color:var(--text-secondary); }

/* 블록 버튼 / 폼 오류 */
.btn-block{ width:100%; justify-content:center; padding:11px 14px; }
.form-error{ font-size:12px; color:var(--text-secondary); margin:2px 0 10px; }

/* ── 로그인 화면 ─────────────────────────────── */
.login-screen{
  min-height:calc(100vh - 52px);
  display:flex; align-items:center; justify-content:center;
  padding:24px 0;
}
.login-card{
  width:100%;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 20px;
}
.login-sub{ font-size:13px; color:var(--text-muted); margin-bottom:18px; text-align:center; }
.link-inline{ background:none; border:none; color:var(--text-secondary); font-size:13px; text-decoration:underline; cursor:pointer; padding:4px; font-family:inherit; }
.link-inline:hover{ color:var(--text-primary); }

/* ── 홈 인사말 ───────────────────────────────── */
.greeting{ padding:4px 2px 16px; }
.greeting .g-name{ font-size:18px; font-weight:var(--fw-medium); }
.greeting .g-role{ font-size:13px; margin-top:2px; }

/* 지표 카드 클릭 가능 */
.metric-card.clickable{ cursor:pointer; }
.metric-card.clickable:hover{ background:var(--state-bg); }

/* ── 홈 미확인 카드 ──────────────────────────── */
.card{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.card-section-title{
  font-size:12px;
  padding:12px 16px 8px;
}
.card-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px;
  border-top:1px solid var(--border);
  cursor:pointer;
}
.card-row:hover{ background:var(--state-bg); }
.card-row .cr-name{ flex:1; font-size:14px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-row .cr-meta{ font-size:12px; flex:none; }
.card-foot{ font-size:12px; padding:10px 16px; border-top:1px solid var(--border); }

/* 메뉴 섹션 라벨 */
.menu-label{ font-size:12px; padding:4px 2px 8px; }

/* ── 자리표시(준비 중 / 안내) ────────────────── */
.placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center;
  padding:64px 24px; color:var(--text-muted);
}
.placeholder .ph-icon{ font-size:32px; }
.placeholder .ph-text{ font-size:14px; }

/* ── 로딩 / 토스트 ───────────────────────────── */
.loading{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:var(--surface-0);
}
.loading.show{ display:flex; }
.loading .spinner{
  width:24px; height:24px;
  border:2px solid var(--border-strong);
  border-top-color:var(--text-secondary);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.toast{
  position:fixed;
  left:50%; bottom:24px;
  transform:translateX(-50%);
  max-width:90%;
  padding:10px 16px;
  font-size:13px;
  background:var(--surface-1);
  color:var(--text-primary);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:50;
}
.toast.show{ opacity:1; }

/* ── 오수완브리핑: 미리보기 / 자동 인용 안내 ── */
.osu-preview{
  white-space:pre-wrap; word-break:break-word;
  background:var(--state-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px;
  font-size:13px; line-height:1.65; color:var(--text-primary);
  font-family:inherit; margin:0 0 12px;
}
.osu-auto{
  display:flex; gap:6px; align-items:flex-start;
  font-size:12px; color:var(--text-secondary);
  background:var(--state-bg); border-left:3px solid var(--border-strong);
  border-radius:4px; padding:8px 10px; margin-bottom:10px;
}
.osu-auto .icon{ font-size:15px; flex:none; margin-top:1px; }

/* ── 회계 시스템 진입구 (직원 관리 화면 하단, 원장에게만) ── */
/* 라벨 없이 흐리게 둔다. 눈에 띄면 '비밀'이 아니다. */
.acct-gate{ display:flex; justify-content:center; padding:30px 0 12px; }
.acct-gate-btn{
  width:34px; height:34px; border-radius:50%;
  border:1px solid transparent; background:none;
  color:var(--text-muted); opacity:.32;
  display:grid; place-items:center; font-size:16px; cursor:pointer;
  transition:opacity .15s, border-color .15s;
}
.acct-gate-btn:hover, .acct-gate-btn:focus-visible{
  opacity:1; border-color:var(--border-strong); outline:none;
}

/* ── 회계 잠금 화면 ── */
.acct-lock-modal{ max-width:380px; }
.acct-lock-form{ display:flex; flex-direction:column; gap:10px; padding:14px 4px 4px; }
.acct-lock-mark{
  width:44px; height:44px; margin:0 auto 4px; border-radius:50%;
  border:1px solid var(--border-strong); color:var(--text-secondary);
  display:grid; place-items:center; font-size:20px;
}
.acct-lock-title{ text-align:center; font-size:17px; font-weight:var(--fw-medium); }
.acct-lock-desc{ text-align:center; font-size:12.5px; line-height:1.6; margin-bottom:6px; }
.acct-lock-foot{ text-align:center; font-size:11px; line-height:1.6; margin-top:14px; }

/* 준비 중인 회계 하위 화면 */
.list-row.is-soon{ opacity:.55; cursor:default; }

/* 급여 계산 표 — 담임 매출 열은 좁은 화면에서 숨긴다(펼치면 계산 근거에 나온다) */
@media (max-width:720px){
  .pr-rev{ display:none; }
}

/* ── 새 직원 계정 만들기 (screens/staff.js) ── */
/* 임시 비밀번호는 이 화면에서만 보인다 — 눈에 띄게 두고, 옮겨 적었는지 확인을 받는다 */
.staff-new-done{
  margin-top:10px; padding:14px 16px; border-radius:var(--radius);
  border:1px solid var(--border-strong); background:var(--surface-1);
}
.staff-new-pw{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius); background:var(--state-bg);
}
.staff-new-pw code{
  font-size:17px; letter-spacing:.06em; font-weight:var(--fw-medium);
  color:var(--text-primary); user-select:all;
}

/* ── 오수완 학부모 공개 상태 줄 (screens/osubriefing.js) ── */
.osu-pub{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:10px; padding:9px 12px; border-radius:var(--radius);
  background:var(--state-bg); font-size:12.5px; color:var(--text-secondary);
}

/* ── 학생 기록 카드 · 진도 (screens/record.js) ── */
/* 담임은 오른쪽 쪽수 칸 하나만 만진다. 왼쪽 줄은 계산 결과라 읽기 전용이다. */
.prog-row{ padding:11px 0; border-top:1px solid var(--border); }
.prog-row:first-child{ border-top:none; padding-top:2px; }
.prog-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.prog-title{ flex:1; min-width:0; }
.prog-row.fin .prog-title > div:first-child{ color:var(--text-muted); font-weight:400; }
/* 진행 바는 오수완 주차 바와 같은 색을 쓴다 — 앱 안에서 '진행'의 색이 하나가 되게 */
.bar-track{ height:5px; margin-top:9px; border-radius:99px; background:var(--osu-week-empty); overflow:hidden; }
.bar-track i{ display:block; height:100%; border-radius:99px; background:var(--osu-week-fill); }
.prog-row.fin .bar-track i{ background:var(--text-muted); }

/* ── 교재 관리 (screens/textbook.js) ── */
/* 단원 한 줄 = 이름 + 시작쪽 + 끝쪽 + 삭제. 쪽수 칸은 숫자만 들어가므로 좁게 고정한다. */
.tb-unit-head{
  display:grid; grid-template-columns:1fr 66px 66px 34px; gap:6px;
  font-size:11px; color:var(--text-muted); padding:0 2px 4px;
}
.tb-unit-head span:nth-child(2),
.tb-unit-head span:nth-child(3){ text-align:center; }
.tb-units{ display:flex; flex-direction:column; gap:6px; }
.tb-unit{ display:grid; grid-template-columns:1fr 66px 66px 34px; gap:6px; align-items:center; }
.tb-unit .field{ margin:0; padding:8px 10px; }
.tb-unit .field:nth-child(2),
.tb-unit .field:nth-child(3){ text-align:center; }
.tb-unit .icon-btn{ width:34px; height:34px; }

/* 저장 실패 사유 — 어디가 틀렸는지 단원 번호까지 찍어 준다 */
.tb-errs{
  margin-top:14px; padding:12px 14px; border-radius:var(--radius);
  border:1px solid var(--danger); background:var(--state-bg);
}
.tb-errs-head{ font-size:13px; font-weight:var(--fw-medium); color:var(--danger); margin-bottom:6px; }
.tb-errs ul{ margin:0; padding-left:18px; }
.tb-errs li{ font-size:12.5px; line-height:1.7; color:var(--text-secondary); }


/* ── 학사일정 ────────────────────────────────── */
/* 학교색 묶음 — s1~s8 을 달고 그 안에서 --c/--cb 로 쓴다 */
.s1{ --c:var(--sch-1); --cb:var(--sch-1-bg); }
.s2{ --c:var(--sch-2); --cb:var(--sch-2-bg); }
.s3{ --c:var(--sch-3); --cb:var(--sch-3-bg); }
.s4{ --c:var(--sch-4); --cb:var(--sch-4-bg); }
.s5{ --c:var(--sch-5); --cb:var(--sch-5-bg); }
.s6{ --c:var(--sch-6); --cb:var(--sch-6-bg); }
.s7{ --c:var(--sch-7); --cb:var(--sch-7-bg); }
.s8{ --c:var(--sch-8); --cb:var(--sch-8-bg); }

.sch-mbar{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.sch-mtitle{ font-weight:var(--fw-medium); font-size:16px; padding:0 2px; }

/* 학교 칩 */
.schiprow{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.schip{ display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12px;
  padding:5px 9px; border-radius:14px; cursor:pointer; white-space:nowrap; flex:none;
  border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text-secondary); }
.schip b{ font-weight:var(--fw-normal); color:var(--text-muted); font-size:10.5px; }
.schip[aria-selected="true"]{ background:var(--cb); border-color:var(--c); color:var(--c); }
.schip[aria-selected="true"] b{ color:var(--c); }
.schip.all[aria-selected="true"]{ background:var(--text-primary); border-color:var(--text-primary); color:var(--surface-1); }
.sdot{ width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; display:inline-block; }

/* 달력 */
.sch-head{ display:grid; grid-template-columns:repeat(7,1fr); }
.sch-wd{ text-align:center; font-size:11.5px; color:var(--text-muted); padding:2px 0 6px; }
.sch-wd.sun{ color:var(--ab); } .sch-wd.sat{ color:var(--new); }
.sch-body{ border-top:1px solid var(--border); border-left:1px solid var(--border); }
.sch-row{ display:grid; grid-template-columns:repeat(7,1fr); }
.sch-cell{ border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; min-height:64px; padding:4px 0 5px;
  background:var(--surface-1); cursor:pointer; }
.sch-cell.empty{ background:var(--surface-0); cursor:default; }
.sch-cell.isoff{ background:var(--state-bg); }
.sch-cell.today .sch-dnum{ background:var(--text-primary); color:var(--surface-1);
  border-radius:9px; padding:0 5px; }
.sch-cell.sel{ box-shadow:inset 0 0 0 2px var(--text-primary); }
.sch-top{ display:flex; align-items:center; gap:4px; padding:0 5px; }
.sch-dnum{ font-size:12.5px; }
.sch-dnum.sun{ color:var(--ab); } .sch-dnum.sat{ color:var(--new); }
.sch-dnum.off{ color:var(--ab); font-weight:var(--fw-medium); }
.sch-offt{ font-size:10px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sch-evdot{ width:5px; height:5px; border-radius:50%; background:var(--text-muted); flex:none; }
.sch-ev{ display:none; align-items:center; gap:2px; font-size:10.5px; color:var(--text-secondary);
  padding:0 5px; margin-top:2px; white-space:nowrap; overflow:hidden; }
.sch-ev i{ font-size:9px; }

/* 레일 — 얇은 선(시험기간) + 굵은 칸(시험 보는 날).
   한 주 안에서 학교 순서가 고정이라 칸을 넘어도 같은 높이로 이어진다. */
.sch-rails{ margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:4px; }
.sch-lane{ height:6px; display:flex; align-items:center; }
.sch-rule{ height:2px; width:100%; background:var(--c); opacity:.55; }
.sch-rule.st{ border-radius:1px 0 0 1px; } .sch-rule.en{ border-radius:0 1px 1px 0; }
.sch-pill{ height:6px; width:100%; background:var(--c); border-radius:1px;
  display:flex; align-items:center; overflow:hidden; }
.sch-pill-t{ display:none; }

/* 범례 */
.sch-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:11.5px; color:var(--text-secondary); }
.sch-legend > span{ display:inline-flex; align-items:center; gap:5px; }
.lg-rule{ width:14px; height:3px; border-radius:2px; background:var(--sch-1); opacity:.55; }
.lg-pill{ width:14px; height:11px; border-radius:2px; background:var(--sch-1); }
.lg-off{ width:12px; height:12px; border-radius:3px; background:var(--state-bg); border:1px solid var(--border-strong); }

/* 그날 상세 */
.sch-daypanel{ margin-top:10px; border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 12px; background:var(--surface-1); }
.sch-dp-h{ display:flex; align-items:center; gap:8px; font-size:13px;
  font-weight:var(--fw-medium); margin-bottom:8px; }
.sch-dp-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; padding:4px 0; }
.sch-dp-b{ flex:1; min-width:0; }
.sch-tag{ font-size:10px; padding:2px 6px; border-radius:9px; flex:none;
  background:var(--cb); color:var(--c); }
.sch-tag.off, .sch-tag.ev{ background:var(--state-bg); color:var(--text-secondary); }

/* 학교별 시험기간 — 표(넓은 화면) / 목록(좁은 화면) */
.sch-xtitle{ display:flex; align-items:center; gap:6px; font-size:12px;
  color:var(--text-secondary); margin:18px 0 6px; }
.xg{ display:none; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.xg-row{ display:flex; border-bottom:1px solid var(--border); }
.xg-row:last-child{ border-bottom:none; }
.xg-row.head{ background:var(--surface-2); }
.xg-nm{ width:124px; flex:none; display:flex; align-items:center; gap:6px; font-size:12px;
  padding:6px 9px; border-right:1px solid var(--border); }
.xg-nm .muted{ font-size:10.5px; margin-left:auto; }
.xg-cells{ flex:1; display:grid; }
.xg-h{ text-align:center; padding:4px 0; font-size:10px; color:var(--text-muted); line-height:1.35; }
.xg-h b{ display:block; font-size:12px; font-weight:var(--fw-medium); color:var(--text-primary); }
.xg-h.sun b{ color:var(--ab); } .xg-h.sat b{ color:var(--new); }
.xg-c{ height:30px; border-right:1px solid var(--surface-0);
  display:flex; align-items:center; justify-content:center; }
.xg-c.inx{ background:var(--cb); }
.xg-c.math{ background:var(--c); }
.xg-c.math span{ color:#fff; font-size:9.5px; font-weight:var(--fw-medium); white-space:nowrap; }

.xl-card{ border:1px solid var(--border); border-radius:var(--radius); padding:9px 11px;
  margin-bottom:8px; background:var(--surface-1); }
.xl-h{ display:flex; align-items:center; gap:6px; font-size:12.5px; margin-bottom:5px; }
.xl-h .muted{ font-size:10.5px; }
.xl-p{ font-size:11px; color:var(--text-secondary); }
.xl-s{ display:flex; align-items:center; gap:8px; font-size:12px; padding:3px 0 3px 14px; }
.xl-sub{ font-size:10.5px; padding:1px 7px; border-radius:9px; background:var(--c); color:#fff; }

/* 입력 폼 */
.sch-tworow{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.sch-tworow .field{ flex:1; }
.sch-tilde{ color:var(--text-muted); }
.sch-subrow{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.sch-subrow .field:first-child{ flex:1; }

/* 넓은 화면 — 칸에 글자를 넣고, 시험기간은 표로 */
@media (min-width:760px){
  .sch-cell{ min-height:112px; }
  .sch-ev{ display:flex; }
  .sch-evdot{ display:none; }
  .sch-rails{ gap:2px; }
  .sch-lane{ height:15px; }
  .sch-rule{ height:3px; }
  .sch-pill{ height:100%; border-radius:0; padding:0 5px; }
  .sch-pill.st{ border-radius:3px 0 0 3px; } .sch-pill.en{ border-radius:0 3px 3px 0; }
  .sch-pill-t{ display:block; font-size:9.5px; font-weight:var(--fw-medium); color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .xg{ display:block; }
  .xl{ display:none; }
}
/* 홈 '오늘 주요일정' 카드에서 과목명을 조금 진하게 */
.cr-strong{ font-weight:var(--fw-medium); }
/* 중·초등 시험 과목은 '수학' 하나라 입력칸 대신 고정 표시 */
.sch-fixsub{ flex:1; font-size:12.5px; padding:9px 11px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--state-bg); color:var(--text-secondary); }
/* 학사일정: 입학TEST·첫등원 표시 — 학교 색과 섞이지 않게 색 없이 아이콘 + 글자로만 */
.sch-ev.sch-mark{ color:var(--text-primary); }
.sch-ev.sch-mark i{ font-size:11px; color:var(--text-muted); }
.schip.mark{ gap:4px; }
.schip.mark i{ font-size:13px; }
.schip.mark[aria-selected="true"]{ background:var(--state-bg); border-color:var(--border-strong);
  color:var(--text-primary); }
.sch-tag.mark{ background:var(--state-bg); color:var(--text-secondary); }
/* 학사일정: 날짜 옆 배지 — 입학TEST(노랑) · 첫등원(연두) */
.sch-mk{ font-size:10px; line-height:1.6; padding:0 6px; border-radius:9px; white-space:nowrap; flex:none; }
.sch-mk.test{ background:var(--mark-test-bg); color:var(--mark-test); }
.sch-mk.first{ background:var(--mark-first-bg); color:var(--mark-first); }
.sch-top{ flex-wrap:wrap; row-gap:2px; }
/* 상세·칩·범례도 같은 색으로 */
.sch-tag.mk-test{ background:var(--mark-test-bg); color:var(--mark-test); }
.sch-tag.mk-first{ background:var(--mark-first-bg); color:var(--mark-first); }
.schip.mk-test i, .schip.mk-first i{ font-size:13px; }
.schip.mk-test[aria-selected="true"]{ background:var(--mark-test-bg); border-color:var(--mark-test); color:var(--mark-test); }
.schip.mk-first[aria-selected="true"]{ background:var(--mark-first-bg); border-color:var(--mark-first); color:var(--mark-first); }
.lg-mk{ width:14px; height:11px; border-radius:2px; }
.lg-mk.test{ background:var(--mark-test-bg); box-shadow:inset 0 0 0 1px var(--mark-test); }
.lg-mk.first{ background:var(--mark-first-bg); box-shadow:inset 0 0 0 1px var(--mark-first); }

/* 학생기록카드 진도: 완료/되돌리기 버튼 — 아이콘만 두면 눈에 안 띈다 */
.prog-done{ padding:6px 10px; font-size:12px; flex:none; }
.prog-done.on{ color:var(--text-muted); }

/* ── 근무평가 ───────────────────────────────── */
.wr{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.wr-row{ display:flex; align-items:stretch; border-bottom:1px solid var(--border); }
.wr-row:last-child{ border-bottom:none; }
.wr-row.head{ background:var(--surface-2); font-size:11.5px; color:var(--text-muted); }
.wr-row.open{ background:var(--state-bg); }
.wr-nm{ width:150px; flex:none; display:flex; align-items:center; gap:6px;
  padding:9px 10px; font-size:12.5px; border-right:1px solid var(--border); }
.wr-nm .muted{ font-size:10.5px; }
.wr-c{ flex:1; padding:8px 10px; border-right:1px solid var(--border); min-width:0; }
.wr-c:last-child{ border-right:none; }
.wr-row.head .wr-c{ padding:6px 10px; }
.wr-v{ font-size:13px; font-variant-numeric:tabular-nums; }
.wr-v b{ font-weight:var(--fw-medium); }
.wr-v.bad{ color:var(--mk); }
.wr-v.out{ color:var(--ab); }
.wr-sub{ font-size:10.5px; color:var(--text-muted); margin-top:3px; }
.bar-t{ height:4px; background:var(--state-bg); border-radius:2px; margin-top:5px; overflow:hidden; }
.bar-t i{ display:block; height:100%; background:var(--text-primary); }
.bar-t i.bad{ background:var(--mk); }
.bar-t i.out{ background:var(--ab); }

/* 등급 딱지 */
.gr{ font-size:10.5px; padding:2px 8px; border-radius:9px; flex:none; }
.gr.a{ background:var(--ok-bg); color:var(--ok); }
.gr.b{ background:var(--state-bg); color:var(--text-secondary); }
.gr.c{ background:var(--mk-bg); color:var(--mk); }
.gr.d{ background:var(--ab-bg); color:var(--ab); }

/* 브리핑 주차 점 — 발송/작성만/미작성/아직 안 온 주차 */
.wk4{ display:flex; gap:3px; margin-top:4px; }
.wk4 i{ width:100%; height:6px; border-radius:2px; background:var(--state-bg); }
.wk4 i.on{ background:var(--text-primary); }
.wk4 i.draft{ background:var(--mk); }
.wk4 i.miss{ background:var(--ab); }
.wk4 i.future{ background:var(--border); }

/* 펼침 상세 */
.wr .detail, .detail{ padding:10px 12px; background:var(--state-bg); border-bottom:1px solid var(--border); }
.d-line{ display:flex; align-items:flex-start; gap:8px; font-size:12px; padding:3px 0; }
.d-tag{ font-size:10px; padding:2px 6px; border-radius:9px; background:var(--surface-1);
  color:var(--text-secondary); flex:none; }
.d-tag.late{ background:var(--mk-bg); color:var(--mk); }
.d-tag.miss{ background:var(--ab-bg); color:var(--ab); }
.d-tag.ok{ background:var(--ok-bg); color:var(--ok); }

/* 좁은 화면 — 표를 카드처럼 세로로 편다 */
@media (max-width:760px){
  .wr-row{ flex-wrap:wrap; }
  .wr-row.head{ display:none; }
  .wr-nm{ width:100%; border-right:none; border-bottom:1px solid var(--border); }
  .wr-c{ flex:1 1 50%; border-bottom:1px solid var(--border); }
  .wr-c:nth-child(2)::before{ content:"공지 업무"; }
  .wr-c:nth-child(3)::before{ content:"브리핑"; }
  .wr-c:nth-child(4)::before{ content:"진도"; }
  .wr-c:nth-child(5)::before{ content:"성적"; }
  .wr-c::before{ display:block; font-size:10.5px; color:var(--text-muted); margin-bottom:2px; }
}

/* 공지 — 마감 있는 업무 */
.task-row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.task-box{ margin:10px 0 4px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius); }
.task-line{ display:flex; align-items:center; gap:8px; font-size:12.5px; padding:4px 0; }
.task-t{ flex:1; min-width:0; }
.task-tag{ font-size:10px; padding:2px 7px; border-radius:9px; flex:none; width:38px; text-align:center;
  background:var(--state-bg); color:var(--text-secondary); }
.task-tag.ok{ background:var(--ok-bg); color:var(--ok); }
.task-tag.late{ background:var(--mk-bg); color:var(--mk); }