/*
  디자인 B 모양 + 색 시안 C · 연초록 + 연분홍 (2026-10-29 사용자 결정 — 네이비에서 바꿨다).
  주 색(버튼·선택·링크)은 세이지 초록 --accent, 상단 띠·리포트 머리·PC 메뉴는 연분홍 --hero-*, 등급 배지는 --point-*.
  파스텔은 채도를 낮춘 톤만 쓰고, 흰 글씨가 얹히는 곳은 한 단계 진한 색이다 (쨍한 파스텔은 "유아용" 으로 보였다).
  색은 전부 아래 변수로만 쓴다.
  카테고리 색(숙제·시험·출결·진도·기타)은 채도를 낮춘 한 벌이다. 쨍한 파스텔은 "유아용" 으로 보였다.
*/
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  --bg: #F7F8F4;
  --surface: #FFFFFF;
  --border: #E9ECF1;
  --hover: #F1F3F7;
  --text: #1F2433;
  --text-dim: #5B6275;
  --accent: #3D7558;
  --accent-strong: #2F5E46;
  --accent-soft: #E3EFE7;
  --accent-line: #C6DCCD;
  /* 상단 띠·리포트 머리·PC 메뉴 — 연분홍 위에 진한 장미색 글씨 */
  --hero-bg: #F4DFE6;
  --hero-fg: #5A2638;
  /* 등급 배지 같은 포인트 */
  --point: #F4DFE6;
  --point-fg: #8A3A55;
  --danger: #C8343A;
  --danger-soft: #FCEBEC;
  --hw-bg: #F5EEE6;  --hw-fg: #8A5626;
  --ex-bg: #EEEDF6;  --ex-fg: #4A4790;
  --at-bg: #E8F1EC;  --at-fg: #2F6A50;
  --pr-bg: #E8EEF6;  --pr-fg: #2D5687;
  --pk-bg: #F4ECEF;  --pk-fg: #8A3D5A;
  --radius: 22px;
  --muted: var(--text-dim);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Malgun Gothic", sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* 링크에 밑줄을 긋지 않는다 — 학생 이름·"리포트 →" 까지 밑줄이라 오래된 웹페이지처럼 보였다. 글 속 링크는 대 보면 긋는다. */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.container { max-width: 960px; margin: 0 auto; padding: 24px 16px; }

/* 테두리 없는 흰 카드. 회색 바탕 위에 떠 보이게 아주 옅은 그림자만 둔다 */
.card {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: 0 1px 2px rgba(31, 36, 51, 0.04);
}
.card + .card { margin-top: 14px; }

/* 카드 제목. 화면의 첫 카드 제목만 화면 제목으로 크게 — 전에는 화면 제목과 카드 제목이 같은 크기라 볼 곳이 없었다 */
h1 { font-size: 18px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.02em; }
.container > .card:first-child h1 { font-size: 24px; }
.muted { color: var(--text-dim); font-size: 14px; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.badge.readonly { background: var(--hw-bg); color: var(--hw-fg); }
/* 틀린 상태가 아니라 '확인해 달라'는 신호. warn(빨강)보다 약하게 둔다. */
.badge.attention { background: var(--hw-bg); color: var(--hw-fg); }
td.overdue { color: var(--hw-fg); font-weight: 600; }

/* --- 대시보드 --- */
.struck { text-decoration: line-through; color: var(--text-dim); }

/* --- 학생 앱: 선생님 선택 --- */
/*
  카드형 버튼. 기본 button / .btn 은 파란 배경 + 흰 글씨인데, 그 위에 회색 .muted
  글씨를 올리면 읽을 수 없다 — 실제로 그렇게 만들어 놓고 가독성 지적을 받았다.
  보조 정보가 여러 줄 들어가는 버튼이므로 바닥을 흰색으로 돌리고 글자색을 본문색으로 쓴다.
*/
.btn.teacher-pick {
  display: block;
  width: 100%;
  margin-top: 0;
  text-align: left;
  padding: 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 400;
  /* .btn 의 nowrap 때문에 반 목록이 한 줄로 삐져나간다 */
  white-space: normal;
  line-height: 1.55;
}
.btn.teacher-pick:hover { background: var(--hover); border-color: #d2d2d7; filter: none; }
.btn.teacher-pick.on { border-color: var(--accent); background: var(--accent-soft); }

.teacher-pick-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  margin-right: 6px;
}
/* 과목 — 이름 다음으로 중요한 구분 정보라 흐리게 두지 않는다 */
.teacher-pick-subject { font-size: 14px; color: var(--accent); font-weight: 600; }
/* 학원명·반 목록은 보조 정보. 흰 바닥이라 --text-dim 으로도 충분히 읽힌다 */
/* 학부모 선택 화면: 자녀 이름 머리글 */
.child-head {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
li:first-child > .child-head { margin-top: 0; }

/* 공개 코멘트 */
.comment-list { list-style: none; margin: 8px 0 0; padding: 0; }
.comment-list li { padding: 10px 0; border-top: 1px solid var(--border); }
.comment-list li:first-child { border-top: 0; }
.comment-meta { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.comment-body { margin: 4px 0 0; white-space: pre-wrap; }

/* /app 홈 상단: 지금 보고 있는 선생님. 가장 중요한 맥락이라 흐리게 두지 않는다 */
.current-teacher { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.current-teacher a { font-size: 13px; }

.btn.teacher-pick .teacher-pick-sub {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* --- 로그인 --- */
.login-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.login-card { width: 100%; max-width: 360px; }

label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 4px; }
input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="search"] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field + .field { margin-top: 12px; }

/* 버튼은 둥근 알약 모양 (시안 B). 진한 버튼은 화면의 주된 동작에만 — 나머지는 .secondary·.btn.ghost 로 낮춘다 */
button {
  width: 100%;
  margin-top: 18px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
button:hover { background: var(--accent-strong); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }

.alert { padding: 12px 14px; border-radius: 14px; font-size: 14px; margin-bottom: 14px; }
.alert.error { background: var(--danger-soft); color: var(--danger); }
.alert.info  { background: var(--accent-soft); color: var(--accent); }
.alert.warn  { background: var(--hw-bg); color: var(--hw-fg); }

.logout-form { width: auto; margin: 0; }
.logout-form button {
  width: auto;
  margin: 0;
  padding: 7px 14px;
  background: var(--hover);
  color: var(--text-dim);
  border: 0;
  font-weight: 600;
  font-size: 13px;
}
.logout-form button:hover { background: var(--border); }

/* --- 목록 / 폼 --- */
.row-between { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-strong); text-decoration: none; }
/* 보조 버튼은 옅은 남색 바탕 — 테두리 버튼보다 눌러 볼 것처럼 보인다 */
.btn.ghost { background: var(--accent-soft); color: var(--accent); border: 0; }
.btn.ghost:hover { background: var(--accent-line); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.filters a {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
}
.filters a.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-dim); font-weight: 600; font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }

.kv { display: grid; grid-template-columns: 90px 1fr; gap: 8px 16px; margin: 18px 0 0; font-size: 14px; }
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; }

.form-card { max-width: 560px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.field-row + .field, .field + .field-row { margin-top: 12px; }

select, input[type="number"], input[type="date"], input[type="time"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--text);
}

.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  margin: 0;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.check input { margin: 0; }

.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: auto;
  margin-top: 14px;
  flex-wrap: wrap;
}
.inline-form label { margin: 0; }
.inline-form input { width: auto; }
.inline-form button { width: auto; margin: 0; padding: 10px 14px; }
.inline-form button.danger { background: var(--danger); }

/* 보호자 번호를 바꿀 때 고르는 두 선택지. 번호 입력 바로 옆에 둬야 무엇에 대한
   질문인지 보인다 — 폼 아래로 내리면 저장을 먼저 누르고 오류를 본다. */
/* 캘린더 수업일의 출결 입구. 완료·휴강 버튼과 달리 조교도 쓰므로 따로 둔다. */
.cal-attend {
  display: inline-block;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-soft, #eef);
  text-decoration: none;
}

.phone-change { display: flex; flex-direction: column; gap: 2px; }
.phone-change > label:first-child { font-size: 13px; color: var(--muted); }
.phone-change .radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}
.phone-change .radio input { margin: 0; }

@media (max-width: 520px) {
  .field-row { flex-direction: column; gap: 0; }
  .field-row .field + .field { margin-top: 12px; }
  /* 폰에서도 제목 옆 작은 버튼(수정 등)은 오른쪽 위에 둔다 — 아래로 떨어지면 크게 늘어나 보였다. 안 들어가면 줄을 바꾼다 */
  .row-between { flex-wrap: wrap; align-items: center; }
  .row-between > :first-child { flex: 1 1 auto; min-width: 0; }
}

/* --- 수업 캘린더 --- */
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.cal-nav button {
  width: auto; margin: 0; padding: 6px 12px;
  background: transparent; color: var(--text); border: 1px solid var(--border);
  font-size: 15px; font-weight: 400;
}
.cal-nav strong { font-size: 16px; min-width: 120px; text-align: center; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.cal-head {
  background: var(--surface); padding: 7px 4px;
  text-align: center; font-size: 12px; color: var(--text-dim);
}
.cal-cell { background: var(--surface); min-height: 76px; padding: 4px; font-size: 12px; }
.cal-cell.dim { background: var(--hover); }
.cal-cell.dim .cal-date { color: #c3c3c8; }

.cal-date { font-size: 12px; color: var(--text-dim); margin-bottom: 3px; }
.cal-date.today {
  display: inline-block; background: var(--accent); color: #fff;
  border-radius: 999px; min-width: 18px; padding: 0 5px; text-align: center;
}

.cal-session { background: var(--accent-soft); border-radius: 5px; padding: 3px 4px; margin-bottom: 3px; line-height: 1.35; }
.cal-session.cancelled { background: var(--hover); color: var(--text-dim); text-decoration: line-through; }
.cal-session.done { background: var(--at-bg); }
.cal-time { font-weight: 600; }
.cal-tag { font-size: 10px; opacity: 0.75; margin-left: 2px; }
.cal-memo { font-size: 10px; color: var(--text-dim); text-decoration: none; margin-top: 2px; }

.cal-actions { display: flex; gap: 3px; margin-top: 3px; }
.cal-actions form { width: auto; margin: 0; }
.cal-actions button {
  width: auto; margin: 0; padding: 1px 5px;
  background: transparent; color: var(--accent); border: 1px solid var(--accent-line);
  font-size: 10px; font-weight: 400; border-radius: 4px;
}

@media (max-width: 640px) {
  .cal-cell { min-height: 56px; padding: 2px; }
  .cal-actions { flex-direction: column; }
  .cal-session { font-size: 11px; }
}

/* --- 학생 --- */
hr.sep { border: 0; border-top: 1px solid var(--border); margin: 20px 0 14px; }
.section-label { font-weight: 600; font-size: 14px; margin: 0 0 4px; }


/* --- 미완숙제 인증 --- */
/* 사진은 가로로 늘어놓고 좁은 화면에서는 줄바꿈한다. 모바일에서도 쓰는 화면이다. */
.photo-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.photo-row img {
  width: 96px; height: 96px; object-fit: cover;
  border: 1px solid var(--border); border-radius: 6px; display: block;
}
.makeup-item .inline-form { margin-top: 8px; }
/* 사진 아래 삭제 버튼. 사진과 묶여 보이도록 세로로 쌓는다. */
.photo-edit-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.link-button {
  background: none; border: 0; padding: 0; font-size: 12px;
  color: var(--danger); cursor: pointer; text-decoration: underline;
}
ul.plain { list-style: none; padding: 0; margin: 8px 0 0; }
ul.plain li { padding: 2px 0; }

/* 화면에는 숨기고 스크린리더에는 읽히는 라벨. display:none 이면 읽히지 않는다. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.muted.small { font-size: 13px; margin-top: 0; }
.badge.warn { background: var(--danger-soft); color: var(--danger); }

/* --- 표 안의 액션 버튼 --- */
.row-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-start; }
.row-actions form { width: auto; margin: 0; }
.row-actions button {
  width: auto; margin: 0; padding: 3px 9px;
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 6px;
  font-size: 12px; font-weight: 400;
}
.row-actions button:hover { background: var(--accent-soft); filter: none; }
.row-actions button.danger-text { color: var(--danger); border-color: #F2C7C9; }
.row-actions button.danger-text:hover { background: var(--danger-soft); }

/* --- 숙제 --- */
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  font: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--text);
  resize: vertical;
}
.hw-items { margin: 14px 0 0; padding-left: 22px; }
.hw-items li { margin-bottom: 6px; }
input.narrow { width: 72px; }

/* --- 오류 페이지 --- */
.error-card { text-align: center; padding: 36px 24px; }
.error-status { font-size: 42px; font-weight: 700; color: var(--border); margin: 0 0 4px; line-height: 1; }
.error-card h1 { font-size: 18px; margin: 0 0 10px; }

/* --- 코멘트 --- */
.comment-list { list-style: none; margin: 16px 0 0; padding: 0; }
.comment-list > li { padding: 12px 0; border-top: 1px solid var(--border); }
.comment-list > li:first-child { border-top: 0; padding-top: 0; }
.comment-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.comment-body { margin: 8px 0 0; white-space: pre-wrap; }
.comment-list .row-actions { margin-top: 8px; }
.row-actions form[method="get"] button { color: var(--text-dim); border-color: var(--border); }

/* --- 학습목표 --- */
.goal-details { list-style: none; margin: 14px 0 0; padding: 0; }
.goal-details > li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px;
}
.goal-details > li:first-child { border-top: 0; }
details.dropped { margin-top: 12px; font-size: 13px; }
details.dropped summary { color: var(--text-dim); cursor: pointer; }

/* --- 클래스 상세 요약 --- */
.summary-goal { padding: 12px 0; border-top: 1px solid var(--border); }
.summary-goal:first-of-type { border-top: 0; }
.summary-list { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.summary-list li { margin-bottom: 3px; }

.progress-bar {
  height: 8px; margin: 14px 0 4px;
  background: var(--border); border-radius: 999px; overflow: hidden;
}
.progress-bar > span { display: block; height: 100%; background: var(--accent); }

/* 추이 그래프 (/app 홈). SVG 는 서버가 좌표를 계산해 내려준다 — LineChartView */
.chart-grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .chart-grid-2 { grid-template-columns: 1fr 1fr; } }

.chart-title { font-size: 15px; margin: 0 0 6px; }
/* 높이는 viewBox 비율(320:150)이 정한다 — 고정하면 글자가 가로로 늘어난다 */
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis { fill: var(--text-dim); font-size: 9px; }
.chart-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-line.mine { stroke: var(--accent); }
.chart-line.avg { stroke: #b0b0b6; stroke-dasharray: 4 3; }
.chart-dot { vector-effect: non-scaling-stroke; }
.chart-dot.mine { fill: var(--accent); }
.chart-dot.avg { fill: #b0b0b6; }

.chart-legend { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; }
.chart-key {
  display: inline-block;
  width: 12px;
  height: 3px;
  margin: 0 4px 0 12px;
  vertical-align: middle;
}
.chart-legend .chart-key:first-child { margin-left: 0; }
.chart-key.mine { background: var(--accent); }
.chart-key.avg { background: #b0b0b6; }

/* ---------- 데일리 리포트 (샘플 레이아웃) ---------- */

/* 헤더 띠. 보라 그라데이션 위에 흰 글씨 */
.report-hero {
  background: var(--hero-bg);  /* 2026-10-29 보라 그라데이션 → 남색 → 연분홍(시안 C) */
  color: var(--hero-fg);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
/* 머리 (2026-10-29, 디자인 B) — 위에 선생님·회차, 크게 "OOO 학생", 날짜, 그 아래 동그란 등급 + 한 줄 */
.hero-eyebrow { margin: 0; font-size: 11px; letter-spacing: .16em; font-weight: 700; opacity: .75; }
.report-hero .hero-sub { margin: 4px 0 0; font-size: 14px; opacity: .9; }
.hero-name { margin: 14px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.report-hero .hero-date { margin: 2px 0 0; font-size: 14px; opacity: .85; }

.hero-grade { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.grade-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; color: var(--point-fg);
}
.grade-letter { font-size: 26px; font-weight: 800; line-height: 1; }
.grade-caption { font-size: 9px; font-weight: 700; margin-top: 3px; color: var(--text-dim); }
.grade-note { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; }

.hero-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
@media (min-width: 640px) { .hero-tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { background: rgba(255, 255, 255, .55); border-radius: 10px; padding: 10px 12px; }
.tile-label { margin: 0; font-size: 11px; opacity: .85; }
.tile-value { margin: 2px 0 0; font-size: 18px; font-weight: 700; }

/* 성장 포인트 */
.growth { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.growth-delta { margin: 0; font-size: 26px; font-weight: 700; }
.growth-delta.up { color: var(--at-fg); }
.growth-delta.down { color: var(--danger); }
.growth-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  background: var(--accent-soft); color: var(--accent); border-radius: 999px;
  padding: 3px 10px; font-size: 13px; font-weight: 600;
}
.chip.now { background: var(--at-fg); color: #fff; }

/* 점수 카드 */
.score-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .score-cards { grid-template-columns: repeat(4, 1fr); } }
.score-card { border: 0; background: var(--bg); border-radius: 18px; padding: 14px; }
.score-label { margin: 0; font-size: 12px; color: var(--text-dim); }
.score-value { margin: 4px 0; font-size: 24px; font-weight: 700; }
.score-value small { font-size: 13px; font-weight: 500; margin-left: 2px; }
.score-foot { margin: 0; font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.up { color: var(--at-fg); font-weight: 600; }
.down { color: var(--danger); font-weight: 600; }

/* 막대 비교 — 막대는 내 점수, 점선은 반평균 */
.bar-row { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; }
.bar-label { margin: 0; width: 110px; flex: none; font-size: 13px; }
/*
  overflow 를 자르지 않는다. 반평균 표시가 막대 **위로** 올라와야 보인다 —
  막대 안에 가두면 회색 점선이 보라 막대에 묻혀 사실상 안 보인다 (실제로 그랬다).
  모서리는 각 요소가 제 radius 로 처리한다.
*/
.bar-track {
  position: relative; flex: 1; height: 26px;
  background: #f1f1f4; border-radius: 999px;
}
.bar-fill {
  height: 100%; border-radius: 999px;
  background: var(--accent);
}
.bar-fill.warn { background: #C98A3A; }
/* 반평균 — 막대 위아래로 삐져나오게 그어 어느 배경에서도 보이게 한다 */
.bar-avg {
  position: absolute; top: -7px; bottom: -7px; width: 0;
  border-left: 2px dashed #1f2937;
}
.bar-avg-label {
  position: absolute; top: -22px; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: #374151; white-space: nowrap;
}
.bar-value {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 700; color: var(--text);
}
.bar-diff { margin: 0; width: 72px; flex: none; font-size: 12px; text-align: right; }
.bar-diff.warn { color: var(--hw-fg); }

/* 체크포인트 카드 격자 */
.checkpoint-summary { margin: 0; display: flex; gap: 6px; }
.checkpoint-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
@media (min-width: 720px) { .checkpoint-grid { grid-template-columns: repeat(4, 1fr); } }
.checkpoint {
  border: 0; border-radius: 18px; padding: 14px; background: var(--bg);
  border-bottom: 3px solid var(--at-fg);
}
.checkpoint.focus { border-bottom-color: var(--hw-fg); background: var(--hw-bg); }
/* 뱃지 색을 상태로 가른다 — 전에는 집중관리도 통과와 같은 남색이라 한눈에 안 갈렸다 */
.checkpoint.focus .badge { background: #fff; color: var(--hw-fg); }
.checkpoint.incomplete .badge { background: var(--hover); color: var(--text-dim); }
.checkpoint.incomplete { border-bottom-color: var(--border); }
.checkpoint-no { font-size: 11px; color: var(--text-dim); font-weight: 700; }
.checkpoint-title { margin: 6px 0 2px; font-weight: 600; }

/* Management loop */
.loop { border: 0; background: var(--bg); border-radius: 18px; padding: 14px; margin-top: 10px; }
.loop-title { margin: 0 0 8px; font-weight: 700; }
.loop-cols { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .loop-cols { grid-template-columns: repeat(3, 1fr); } }
.loop-head { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--accent); }
.closing { background: var(--accent-soft); }

/* AI 자리표시자 — 선생님 미리보기에만 나온다 (가족 화면에는 그리지 않는다) */
/* SWOT 분석 (V32) — 폰 1열, 넓으면 2×2. 칸 색은 카테고리 변수를 빌린다 (새 색을 만들지 않는다) */
.swot-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 720px) { .swot-grid { grid-template-columns: repeat(2, 1fr); } }
.swot-cell { border-radius: 16px; padding: 14px 16px; }
.swot-cell ul { margin: 6px 0 0; padding-left: 18px; }
.swot-cell li { margin: 2px 0; line-height: 1.5; }
.swot-label { margin: 0; font-weight: 700; font-size: 14px; }
.swot-strength { background: var(--at-bg); } .swot-strength .swot-label { color: var(--at-fg); }
.swot-weakness { background: var(--hw-bg); } .swot-weakness .swot-label { color: var(--hw-fg); }
.swot-opportunity { background: var(--pr-bg); } .swot-opportunity .swot-label { color: var(--pr-fg); }
.swot-threat { background: var(--pk-bg); } .swot-threat .swot-label { color: var(--pk-fg); }
.ai-slot { color: var(--text-dim); border: 1px dashed var(--border); background: #fcfcfd; }
.ai-slot p { margin: 4px 0; }
.grade-note.ai-slot {
  background: rgba(255, 255, 255, .55); border-color: rgba(90, 38, 56, .25);
  color: var(--hero-fg); opacity: .85; font-size: 13px; font-weight: 500;
  border-radius: 8px; padding: 6px 10px;
}

/* 탭 (학생 목록의 반별 탭, 2026-10-28). 링크로 나눈다 — JS 없이, 새로고침해도 고른 탭이 남는다 */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.tabs a {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}
.tabs a:hover { background: var(--hover); }
.tabs a.on { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }
.tabs a .count { margin-left: 4px; color: var(--text-dim); font-weight: 500; }
.tabs a.on .count { color: rgba(255, 255, 255, 0.8); }


/* --- 처리 중 화면 (2026-10-28) — AI 문장 생성·발행처럼 오래 걸리는 버튼을 누르면 덮는다 (fragments/layout) --- */
.busy-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(20, 22, 30, 0.45);
  align-items: center; justify-content: center; padding: 16px; }
body.busy .busy-overlay { display: flex; }
.busy-box { background: #fff; border-radius: 12px; padding: 28px 32px; max-width: 360px; width: 100%;
  text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.busy-box p { margin: 10px 0 0; }
.spinner { width: 40px; height: 40px; margin: 0 auto; border: 4px solid var(--accent-soft); border-top-color: var(--accent);
  border-radius: 50%; animation: busy-spin 0.9s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.5s; } }


/* --- 폰에서 표를 카드로 (2026-10-29) ---
  표는 폰에서 오른쪽이 잘리고, 옆으로 밀 수 있다는 표시가 없어 **잘린 칸이 있는 줄 모른다** (학생 목록의 반 칸,
  학생 상세 리포트의 상태·공유 링크 칸). 목록 표에 class="stack" 을 붙이면 한 줄이 한 장의 카드가 된다 —
  첫 칸(이름·제목)이 머리가 되고 나머지 칸은 td 의 data-label 을 앞에 붙여 줄마다 보인다.
  입력 칸이 줄지어 있는 표(출결·채점)는 이 방식이 아니라 화면마다 따로 카드로 만든다. */
@media (max-width: 560px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  table.stack tbody:last-child tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 2px 0; white-space: normal; }
  table.stack td:first-child { font-size: 16px; font-weight: 600; padding-bottom: 4px; }
  table.stack td[data-label] { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; font-weight: 400; }
  table.stack td[data-label]::before {
    content: attr(data-label); flex: none; width: 64px; color: var(--text-dim); font-size: 13px;
  }
  table.stack .row-actions { flex-wrap: wrap; margin-top: 6px; }
  table.stack .row-actions button { padding: 7px 12px; font-size: 13px; }
}

/* 글자처럼 보이는 버튼. 드물게 쓰고 되돌리기 어려운 스위치(AI 문장 쓰지 않음)를 파란 주요 버튼으로 두지 않는다. */
button.link-btn {
  width: auto; margin: 0; padding: 6px 10px;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-weight: 400;
}
button.link-btn:hover { background: var(--hover); filter: none; }

/* 폰에서 손가락으로 누르기 쉬운 크기. 줄 안의 작은 링크(이름 옆 "리포트" 등)를 넓힌다. */
@media (max-width: 560px) {
  .tap { display: inline-block; padding: 6px 4px; }
  .btn { padding: 11px 16px; }
}

/* 폰에서는 한 줄 폼(보호자 수정·반 추가 등록 등)의 입력 칸을 한 줄씩 꽉 채운다. 좁은 칸에 이름·번호가 잘리고
   라디오와 저장 버튼이 붙어 잘못 누르기 쉬웠다. */
@media (max-width: 560px) {
  /* !important — 보호자 비고 칸이 style="flex:1" 로 저장 버튼과 한 줄을 나눠 쓴다 */
  .inline-form > div { flex: 1 1 100% !important; }
  .inline-form input:not([type="radio"]):not([type="checkbox"]), .inline-form select { width: 100%; }
  .inline-form > button { flex: 1 1 auto; }
  .phone-change .radio { padding: 6px 0; font-size: 14px; }
}

/* 접어 두는 작업 (수강의 반 이동처럼 가끔 쓰고 입력이 여럿인 것). 펼치기 전에는 버튼 하나 크기다. */
details.fold > summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: 3px 9px; border: 1px solid var(--accent-line); border-radius: 6px;
  color: var(--accent); font-size: 12px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold[open] > summary { background: var(--accent-soft); }
details.fold > form { margin-top: 8px; }
@media (max-width: 560px) { details.fold > summary { padding: 7px 12px; font-size: 13px; } }

/* 숙제·시험 목록처럼 줄이 많은 표는 칸을 한 줄에 이어 붙인다 — 한 묶음이 여섯 줄이면 41묶음이 화면 수십 장이 된다. */
@media (max-width: 560px) {
  table.stack.compact td[data-label] { display: inline-flex; width: auto; margin-right: 14px; gap: 5px; }
  table.stack.compact td[data-label]::before { width: auto; }
}

/* --- 출결 입력 (2026-10-29) — 학생마다 한 장, 상태는 탭 한 번 --- */
.att-list { margin-top: 8px; }
.att-row { padding: 12px 0; border-top: 1px solid var(--border); }
.att-row:first-child { border-top: 0; }
.att-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.att-name { font-size: 16px; font-weight: 600; }
.small-link { font-size: 13px; }
.att-extra { display: flex; gap: 8px; margin-top: 8px; }
.att-extra label { margin: 0; }
.att-late { flex: 0 0 96px; }
.att-memo { flex: 1; }
.att-extra input { padding: 8px 10px; font-size: 14px; }
/* 리포트 작성 화면의 출결 줄 — 상태 + 지각 분(선택) */
.att-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.att-inline select { width: auto; min-width: 110px; }
.att-inline input { width: 130px; }
.att-submit { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.att-submit button { flex: 1 1 200px; margin: 0; }
button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }

/* 라디오를 버튼처럼 (출결 상태·숙제 항목 체크). JS 없이 :checked 로 칠한다. */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; margin: 0; color: var(--text); font-size: 14px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: block; min-width: 56px; padding: 8px 12px; text-align: center; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 999px; background: #fff; user-select: none; font-weight: 600;
}
.seg input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.seg input[value="LATE"]:checked + span, .seg input[value="PARTIAL"]:checked + span { background: #D9A057; border-color: #D9A057; color: var(--text); }
.seg input[value="ABSENT"]:checked + span, .seg input[value="MISSED"]:checked + span,
.seg input[value="MISSING"]:checked + span { background: var(--danger); border-color: var(--danger); }
.seg input[value="EXCUSED"]:checked + span, .seg input[value="EXEMPT"]:checked + span { background: var(--text-dim); border-color: var(--text-dim); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg input:disabled + span { opacity: .55; cursor: default; }
@media (max-width: 560px) { .seg label { flex: 1 1 0; } .seg span { min-width: 0; padding: 10px 4px; } }

/* --- 숙제 묶음 채점 (2026-10-29) — 학생마다 한 장 --- */
.grade-row { padding: 14px 0; border-top: 1px solid var(--border); }
.grade-row:first-child { border-top: 0; }
.grade-head { margin-bottom: 8px; }
.grade-items { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.grade-item { display: flex; align-items: center; gap: 8px; }
.gi-text { font-size: 13px; color: var(--text-dim); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-sm span { min-width: 38px; padding: 6px 8px; }
@media (max-width: 560px) {
  .grade-items { flex-direction: column; gap: 6px; }
  .grade-item { justify-content: space-between; }
  .gi-text { max-width: none; flex: 1; }
  .seg-sm { flex: none; }
  .seg-sm label { flex: none; }
  .seg-sm span { min-width: 42px; padding: 9px 6px; }
}

/* 시험 점수 일괄 입력 — 폰에서는 학생 이름 한 줄, 점수·오답·결시 한 줄, 피드백 한 줄 (2026-10-29) */
@media (max-width: 560px) {
  table.score-table thead { display: none; }
  table.score-table, table.score-table tbody { display: block; }
  table.score-table tr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
  table.score-table td { border: 0; padding: 0; }
  table.score-table td:first-child { flex: 1 1 100%; font-size: 16px; font-weight: 600; }
  table.score-table td input.narrow { width: 110px; }
  table.score-table td.fb { flex: 1 1 100%; }
}

/* 리포트 작성 / 미리보기 탭 (2026-10-29) */
.view-tabs { display: flex; gap: 6px; margin: 16px 0; }
.view-tabs a {
  flex: 1; text-align: center; padding: 11px 8px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  text-decoration: none; font-weight: 600;
}
.view-tabs a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.view-tabs a.on .muted { color: rgba(255, 255, 255, .8); }
.view-tabs + .card, .view-tabs + form > .card:first-child { margin-top: 0; }
/* 표를 카드로 바꾼 체크포인트 — 입력 칸은 줄을 꽉 채운다 */
@media (max-width: 560px) {
  table.stack td[data-label] > select, table.stack td[data-label] > input { flex: 1; }
}
.card + form, form + .card { margin-top: 16px; display: block; }

/* 캘린더 — 폰에서는 날짜 목록 (2026-10-29). 격자와 목록을 함께 그리고 폭으로 하나만 보인다. */
.cal-list { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 560px) {
  .cal-grid { display: none; }
  .cal-list { display: block; }
}
.cal-item { padding: 12px 0; border-top: 1px solid var(--border); }
.cal-item:first-child { border-top: 0; }
.cal-item.today { background: var(--accent-soft); margin: 0 -12px; padding: 12px; border-radius: 8px; }
.cal-item.cancelled .cal-item-head strong, .cal-item.cancelled .cal-item-head > span:nth-child(2) { color: var(--text-dim); text-decoration: line-through; }
.cal-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cal-item-memo { margin: 4px 0 0; }
.cal-item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cal-item-actions form { margin: 0; width: auto; }
.cal-item-actions .btn, .cal-item-actions button { margin: 0; width: auto; padding: 9px 16px; font-size: 14px; }
/* 휴강은 되돌릴 수 있지만 잘못 누르면 그날 출결·리포트가 막힌다 — 완료와 색을 가른다 */
button.danger-outline { color: var(--danger); border-color: #F2C7C9; }

/* 대시보드 — 접어 둔 나머지 (2026-10-29) */
details.more { margin: 4px 0 8px; font-size: 14px; }
details.more > summary { cursor: pointer; color: var(--accent); padding: 6px 0; }
@media (max-width: 560px) {
  .summary-list { padding-left: 0; list-style: none; }
  .summary-list li { padding: 6px 0; border-top: 1px solid var(--hover); }
  .summary-list li:first-child { border-top: 0; }
}

/* --- 메뉴 (2026-10-29, 디자인 B) — PC 는 왼쪽 남색 메뉴, 폰은 위쪽 얇은 바 + 아래 탭 바 --- */
/* 메뉴 아이콘만 — 리포트 그래프(LineChartView)의 svg 는 건드리지 않는다 */
.sidenav svg, .tabbar svg, .bell svg, .menu-ico svg, .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; background: var(--bg);
}
.topbar .brand { font-weight: 800; font-size: 17px; color: var(--text); text-decoration: none; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--text-dim); font-size: 14px; }
.bell {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600;
}
.bell:hover { text-decoration: none; background: var(--hover); }
.bell .badge { padding: 1px 7px; }

.sidenav { display: none; }
.tabbar { display: none; }

@media (min-width: 900px) {
  .sidenav {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: 12px; bottom: 12px; left: 12px; width: 220px; padding: 22px 12px;
    border-radius: 26px; background: var(--hero-bg); color: var(--hero-fg); overflow-y: auto;
  }
  .sidenav-brand { padding: 0 12px 20px; font-size: 18px; font-weight: 800; color: var(--hero-fg); }
  .sidenav-brand:hover { text-decoration: none; }
  .sidenav-links { display: flex; flex-direction: column; gap: 2px; }
  .sidenav-links a {
    display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px;
    border-radius: 999px; color: var(--hero-fg); font-size: 15px; font-weight: 600;
  }
  .sidenav-links a:hover { background: rgba(255, 255, 255, 0.5); text-decoration: none; }
  .sidenav-links a.on { background: #fff; color: var(--accent); }
  .sidenav ~ .topbar, .sidenav ~ .container { margin-left: 244px; }
  .sidenav ~ .topbar .brand { display: none; }
  .topbar { padding: 18px 32px 0; }
}

@media (max-width: 899px) {
  .topbar .who { display: none; }
  .topbar .logout-form { display: none; }
  .bell { padding: 0; width: 40px; justify-content: center; position: relative; }
  .bell .bell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bell .badge { position: absolute; top: -2px; right: -4px; font-size: 11px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 6px 6px calc(10px + env(safe-area-inset-bottom)); background: var(--surface);
    box-shadow: 0 -4px 16px rgba(31, 36, 51, 0.06);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
    color: var(--text-dim); font-size: 11px; font-weight: 700;
  }
  .tabbar a:hover { text-decoration: none; }
  .tab-ico { display: flex; align-items: center; justify-content: center; width: 50px; height: 30px; border-radius: 999px; }
  .tab-ico svg { width: 22px; height: 22px; }
  .tabbar a.on { color: var(--accent); }
  .tabbar a.on .tab-ico { background: var(--accent-soft); }
  /* 탭 바에 가려지지 않게 */
  body:has(.tabbar) .container { padding-bottom: 96px; }
}

/* 더보기 목록 */
.menu-list { padding: 8px; }
.menu-list a {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 12px;
  border-radius: 16px; color: var(--text); font-weight: 700;
}
.menu-list a:hover { background: var(--hover); text-decoration: none; }
.menu-ico { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; }
.menu-text { flex: 1; display: flex; flex-direction: column; }
.menu-text small { font-size: 13px; font-weight: 500; color: var(--text-dim); }

/* --- 대시보드 (2026-10-29, 디자인 B) --- */
.hero {
  background: var(--hero-bg); color: var(--hero-fg); border-radius: 26px; padding: 24px 22px 64px;
}
.hero h1 { color: var(--hero-fg); font-size: 24px; margin: 2px 0 4px; }
.hero-date { margin: 0; font-size: 14px; opacity: 0.85; }
.hero-sub { margin: 0; font-size: 14px; opacity: 0.9; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hero + .card { margin-top: -48px; position: relative; box-shadow: 0 8px 24px rgba(31, 36, 51, 0.08); }
.hero + .todo-tiles { margin-top: -40px; position: relative; }
.today-row + .today-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.today-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.today-text { flex: 1; display: flex; flex-direction: column; min-width: 140px; }
.today-time { font-size: 13px; font-weight: 700; color: var(--accent); }
.today-class { font-size: 18px; font-weight: 800; color: var(--text); }
.today-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.today-actions .btn { text-align: center; padding: 12px; }
.ico { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; }
.ico-soft { background: var(--accent-soft); color: var(--accent); }

.todo-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
@media (min-width: 900px) { .todo-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.todo-tile { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 22px; color: var(--text); }
.todo-tile:hover { text-decoration: none; filter: brightness(0.98); }
.todo-tile .ico { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.todo-label { font-size: 14px; font-weight: 700; color: var(--text-dim); }
.todo-num { font-size: 28px; font-weight: 800; line-height: 1.1; }
.tile-hw { background: var(--hw-bg); } .tile-hw .ico, .tile-hw .todo-num { color: var(--hw-fg); }
.tile-ex { background: var(--ex-bg); } .tile-ex .ico, .tile-ex .todo-num { color: var(--ex-fg); }
.tile-at { background: var(--at-bg); } .tile-at .ico, .tile-at .todo-num { color: var(--at-fg); }
.tile-pr { background: var(--pr-bg); } .tile-pr .ico, .tile-pr .todo-num { color: var(--pr-fg); }
.todo-tiles + .card { margin-top: 0; }

/* 대시보드 목록 — PC 도 점(•) 없는 줄 목록 (폰과 같은 모양) */
.summary-list { padding-left: 0; list-style: none; }
.summary-list li { padding: 7px 0; border-top: 1px solid var(--hover); }
.summary-list li:first-child { border-top: 0; }

/* 학생 이니셜 동그라미 (2026-10-29, 디자인 B). 색은 학생 번호로 다섯 가지 중 하나 — 같은 학생은 늘 같은 색이다 */
.avatar {
  display: inline-flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 14px; font-weight: 800; vertical-align: middle;
}
.avatar.lg { width: 56px; height: 56px; font-size: 22px; }
.av0 { background: var(--hw-bg); color: var(--hw-fg); }
.av1 { background: var(--ex-bg); color: var(--ex-fg); }
.av2 { background: var(--at-bg); color: var(--at-fg); }
.av3 { background: var(--pr-bg); color: var(--pr-fg); }
.av4 { background: var(--pk-bg); color: var(--pk-fg); }
.name-cell { display: inline-flex; align-items: center; gap: 10px; }
.profile-head { display: flex; align-items: center; gap: 14px; }

/* --- 학생 상세 (2026-10-29, 디자인 B) --- */
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-text { flex: 1; min-width: 0; }
.profile-text h1 { margin: 0; }
.profile-text .muted { margin: 2px 0 0; }
.btn.small-btn { padding: 7px 14px; font-size: 13px; align-self: flex-start; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip-soft { padding: 5px 12px; border-radius: 999px; background: var(--hover); font-size: 13px; font-weight: 600; color: var(--text); }

/* 줄 목록 — 줄 전체가 링크다 */
.row-list { display: flex; flex-direction: column; margin: 6px -8px 8px; }
.row-link {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px;
  border-radius: 16px; color: var(--text);
}
.row-link:hover { background: var(--hover); text-decoration: none; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-size: 15px; font-weight: 700; }
.row-sub { font-size: 13px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.row-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.date-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 14px; background: var(--hover); color: var(--text); line-height: 1.1;
}
.date-block small { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.date-block strong { font-size: 18px; font-weight: 800; }
.date-block.draft { background: var(--hw-bg); color: var(--hw-fg); }
.date-block.draft small { color: var(--hw-fg); }
.ai-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border);
}
.ai-row form { width: auto; margin: 0; }

/* 드물게 쓰고 되돌리기 번거로운 동작(종강·폐강 등)은 테두리 버튼으로 낮춘다 — 화면에서 가장 눈에 띄는 버튼이면 안 된다 */
.inline-form button.secondary, button.secondary { background: #fff; color: var(--accent); border: 1.5px solid var(--accent-line); }
.inline-form button.secondary:hover, button.secondary:hover { background: var(--accent-soft); }
.inline-form button.danger-outline, button.danger-outline { background: #fff; color: var(--danger); border: 1.5px solid #F2C7C9; }
.inline-form button.danger-outline:hover, button.danger-outline:hover { background: var(--danger-soft); }

/* 체크 칩 (숙제 표준 항목·출제 대상 학생) — 고르면 남색이 된다 */
.check { border-radius: 999px; border-width: 1.5px; padding: 8px 14px; font-weight: 600; }
.check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.check input { accent-color: var(--accent); }
.row-between > .btn.ghost { padding: 7px 14px; font-size: 13px; }

/* 로그인 실패 도움말 (2026-10-29) */
.login-help { margin: 10px 0 14px; }
.login-help ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; }
.login-help li + li { margin-top: 4px; }