/* ============================================================
   리드인 데이터 뷰어 - 디자인 시스템
   락(lock) 3종: 테마 1개 / 액센트 1색 / 모서리 1체계
   간격은 --gap(10px) 하나로 통일한다.
   ============================================================ */

:root {
  /* 기본 색(10/11 사용자 지정): 서울대 입학 페이지의 짙은 남색 #22317e + 흰색. 쨍한 노랑 #ffcc00 은 로고·선택 표시·강조 숫자에만 곁들인다.
     색 바꾸기 기능은 10/12 없앴다(모두 같은 색) */
  --accent:        #22317e;
  --accent-hover:  #1a2663;
  --accent-weak:   #e9edf9;
  --accent-text:   #22317e;   /* 흰 배경 위 텍스트용. AA 통과 */
  --mark: #ffcc00; --mark-nav: #ffcc00;   /* 노랑 포인트: 카드 제목 앞 작은 네모 · 선택된 메뉴 옆 네모 */
  --hl: #ffcc00; --hl-on: #22317e;        /* 레벨 칸·프로필 알약: 노랑 바탕에 남색 글자 */

  --bg:            #ffffff;   /* 바탕은 흰색(예시). 카드는 남색 테두리로 구분 */
  --surface:       #ffffff;
  --surface-2:     #fafafa;
  --surface-3:     #f4f4f5;

  --text:          #18181b;
  --text-2:        #52525b;
  --text-3:        #71717a;

  --line:          #d4d4d8;   /* 테이블/컨테이너 공통 선. 헤더와 본문이 같은 값을 쓴다 */
  --line-soft:     #e4e4e7;

  --danger:        #b91c1c;
  --danger-weak:   #fef2f2;
  --ok:            #15803d;
  --ok-weak:       #f0fdf4;
  --warn:          #b45309;   /* 점수 '보통'. 사용자 색과 상관없이 고정 */
  --warn-weak:     #fffbeb;

  /* 모서리 체계: 면 10px, 입력 8px, 칩만 pill */
  --r-surface: 10px;
  --r-control: 8px;
  --r-pill:    999px;

  --gap: 10px;                /* 요소 간 거리는 어디서든 이 값 */
  --row-h: 40px;
  --head-h: 40px;   /* 본문 줄(--row-h)과 같은 높이 */

  --shadow-1: 0 1px 2px rgb(24 24 27 / .06);
  --shadow-2: 0 4px 16px rgb(24 24 27 / .10);
  --shadow-3: 0 16px 48px rgb(24 24 27 / .18);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  180ms;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: var(--font);   /* 숫자도 본문 글꼴로 통일(숫자 폭만 고정: tabular-nums). 한글 옆 숫자가 따로 놀지 않게 */
  /* 차트 계열 색 (validate_palette 통과: 밝은 화면) */
  --chart-1: #22317e; --chart-2: #2b8fb3; --chart-3: #7c8aa5;   /* 나 남색 · 레벨 평균 하늘 · 학년 평균 회청 */
}

:root[data-theme="dark"] {
  --chart-1: #8aa4e6; --chart-2: #82ccdd; --chart-3: #a8b3c7;
  --accent:        #8aa4e6;   /* 어두운 화면: 남색을 밝힌 값(메뉴 바탕은 남색 그대로) */
  --accent-hover:  #a9bdf0;
  --accent-weak:   #141c33;
  --accent-text:   #a9bdf0;

  --bg:            #101012;
  --surface:       #18181b;
  --surface-2:     #1c1c1f;
  --surface-3:     #232327;

  --text:          #f4f4f5;
  --text-2:        #a1a1aa;
  --text-3:        #8b8b93;

  --line:          #3f3f46;
  --line-soft:     #2e2e33;

  --danger:        #f87171;
  --danger-weak:   #2a1414;
  --ok:            #4ade80;
  --warn:          #fbbf24;
  --warn-weak:     #2a2008;
  --ok-weak:       #10231a;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-2: 0 4px 16px rgb(0 0 0 / .55);
  --shadow-3: 0 16px 48px rgb(0 0 0 / .65);
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow: hidden;              /* 페이지 스크롤 없음. 스크롤은 각 영역이 담당 */
}
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* hidden 속성이 display 선언에 덮이지 않게 한다 */
[hidden] { display: none !important; }

/* 숫자는 등폭 + 자릿수 정렬 */
.num, td.num, .stat-value { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- 앱 셸 ---------- */
.app {
  display: grid;
  grid-template-columns: 208px 1fr;
  height: 100dvh;
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  overflow-y: auto;
}
.brand {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap); border-radius: var(--r-surface);
  background: var(--surface-3);
}
.brand-mark {
  width: 26px; height: 26px; border-radius: var(--r-control);
  background: var(--accent); color: var(--accent-on, #fff);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; letter-spacing: -.02em;
  flex: none;
}
.brand-name { font-weight: 700; font-size: 13px; letter-spacing: -.01em; }
.brand-sub { font-size: 11px; color: var(--text-3); }

.nav { display: flex; flex-direction: column; gap: var(--gap); }
.nav-item {
  display: flex; align-items: center; gap: var(--gap);
  height: 34px; padding: 0 var(--gap);
  border-radius: var(--r-control);
  color: var(--text-2); font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item[aria-current="page"] { background: var(--accent-weak); color: var(--accent-text); font-weight: 600; }
:root[data-theme="dark"] .nav-item[aria-current="page"] { color: var(--accent); }
.nav-item svg { width: 15px; height: 15px; flex: none; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--gap); }

.main {
  display: flex; flex-direction: column;
  min-width: 0; height: 100dvh; overflow: hidden;
}
.topbar {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}
.topbar h1 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.topbar-spacer { flex: 1; }
.content {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: var(--gap);
  padding: var(--gap);
  overflow: auto;                 /* 내부 영역이 각자 스크롤. 창이 너무 낮으면 여기서 스크롤 */
  position: relative;
}

/* ---------- 카드 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  padding: var(--gap);
  display: flex; flex-direction: column; gap: var(--gap);
  min-width: 0;
}
.card-head { display: flex; align-items: center; gap: var(--gap); }
.card-title { font-size: 13px; font-weight: 700; }
.card-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.stat-label { font-size: 11px; color: var(--text-3); font-weight: 500; }
.stat-value { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.stat-foot { font-size: 11px; color: var(--text-3); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text); font-size: 12px; font-weight: 600;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-3); border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
:root[data-theme="dark"] .btn-primary { color: var(--accent-on, #1a0f07); }
.btn-danger { color: var(--danger); border-color: var(--line); }
.btn-danger:hover { background: var(--danger-weak); border-color: var(--danger); }
.btn-icon { width: 32px; padding: 0; flex: none; }
.btn-sm { height: 26px; padding: 0 8px; font-size: 11px; }
.btn svg { width: 14px; height: 14px; }

/* ---------- 입력 ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 11px; font-weight: 600; color: var(--text-2); }
.field-help { font-size: 11px; color: var(--text-3); }
.field-error { font-size: 11px; color: var(--danger); font-weight: 500; }
.input {
  height: 32px; padding: 0 10px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); color: var(--text); font-size: 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input.num { text-align: right; font-family: var(--mono); }
/* 수량/금액 칸에 스피너 금지 */
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input[type="number"] { -moz-appearance: textfield; }
textarea.input { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; line-height: 1.55; }

/* ---------- 칩 (글자 세로 정중앙) ---------- */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3); border: 1px solid var(--line-soft);
  font-size: 11px; font-weight: 600; line-height: 1;   /* line-height 1 + center = 정중앙 */
  color: var(--text-2); white-space: nowrap;
}
.chip-accent { background: var(--accent-weak); border-color: transparent; color: var(--accent-text); }
:root[data-theme="dark"] .chip-accent { color: var(--accent); }
.chip-ok { background: var(--ok-weak); border-color: transparent; color: var(--ok); }
.chip-danger { background: var(--danger-weak); border-color: transparent; color: var(--danger); }
.chip-warn { background: var(--warn-weak); border-color: transparent; color: var(--warn); }
/* 원문자: 정사각 + 정중앙 */
.circle-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--text-2); flex: none;
}
.circle-num-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
:root[data-theme="dark"] .circle-num-accent { color: var(--accent-on, #1a0f07); }
/* 문제 추가·수정 모달 - 선택지 앞 정답 지정 버튼 */
.q-mark {
  width: 28px; height: 28px; font-size: 12px; cursor: pointer;
  transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out, transform .15s ease-out;
}
.q-mark:hover { border-color: var(--accent); }
.q-mark:active { transform: scale(.92); }
.q-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   테이블
   - border-collapse: separate 를 쓴다. collapse 는 sticky 헤더에서
     테두리가 스크롤에 딸려 사라진다.
   - 모든 선은 셀의 border-right / border-bottom 으로만 그린다.
     헤더와 본문이 같은 --line 을 쓰므로 굵기/색이 어긋나지 않는다.
   - 마지막 행도 border-bottom 을 그대로 가지므로 선이 생략되지 않는다.
   ============================================================ */
.table-wrap {
  /* 행이 적으면 내용만큼만, 많으면 남은 높이까지 줄어든다.
     flex:1 로 늘리면 4행짜리 표 아래에 빈 상자가 생기고, 창이 낮을 때는
     반 잘린 행 하나만 남는다. 그래서 늘리지 않고 줄어들게만 둔다. */
  flex: 0 1 auto; min-height: 200px;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface);
  overflow: auto;                    /* 페이지가 아니라 이 영역이 스크롤 */
  /* 가로만 가둔다. 세로까지 가두면 표가 세로로 안 넘치는 화면(대시보드)에서 표 위의 휠이 본문으로 안 넘어가 스크롤이 멈춘 것처럼 보인다 */
  overscroll-behavior: contain auto;
  scroll-snap-type: y proximity;     /* 스크롤이 행 경계에 맞춰 멈춘다 */
  scroll-padding-top: var(--head-h); /* 고정 헤더에 가리지 않게 */
}
table.dt tbody tr { scroll-snap-align: start; }
table.dt {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  /* 고정 레이아웃. 열이 선언한 너비를 지키고 남는 폭만 나눠 갖는다.
     auto 로 두면 긴 책제목 하나가 열을 밀어내 표 전체에 가로스크롤이 생긴다. */
  table-layout: fixed;
}
table.dt th, table.dt td {
  border-right: 1px solid var(--line);      /* 세로줄 */
  border-bottom: 1px solid var(--line);     /* 가로줄 */
  padding: 0 10px;
  text-align: center;                        /* 헤더·본문·버튼·체크박스 전부 중앙 */
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;                          /* 넘치면 자르고 ... 로 알린다. 전체 값은 툴팁 */
  text-overflow: ellipsis;
}
/* 셀 안의 버튼·링크도 같이 줄어들어야 열을 밀지 않는다 */
table.dt td > button, table.dt td > a {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.dt th:last-child, table.dt td:last-child { border-right: 0; }

table.dt thead th {
  position: sticky; top: 0; z-index: 3;
  height: var(--head-h);
  background: var(--surface-3);              /* 불투명. 본문이 비쳐 보이지 않는다 */
  color: var(--text-2);
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
/* sticky 셀은 border-bottom 이 스크롤 시 밀리므로 그림자로 한 겹 더 고정 */
table.dt thead th::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--line);
}
table.dt tbody td {
  height: var(--row-h);
  color: var(--text);
  background: var(--surface);
}
table.dt tbody tr:nth-child(even) td { background: var(--surface-2); }
table.dt tbody tr:hover td { background: var(--accent-weak); }
:root[data-theme="dark"] table.dt tbody tr:hover td { background: var(--surface-3); }
table.dt tbody tr[data-selected="true"] td { background: var(--accent-weak); }

/* 왼쪽 고정 열(체크박스/번호)도 같은 선 규칙을 그대로 쓴다 */
table.dt .sticky-l { position: sticky; z-index: 2; }
table.dt thead .sticky-l { z-index: 4; }
table.dt .col-check { left: 0; min-width: 48px; }
/* 번호 열은 기본이 맨 왼쪽. 체크박스 열이 실제로 있을 때만 그만큼 밀린다.
   무조건 48px 를 주면 선택 없는 표(응시 기록)에서 왼쪽에 빈 칸이 생긴다. */
table.dt .col-no    { left: 0; min-width: 56px; }
table.dt .col-check ~ .col-no { left: 48px; }
.th-stack { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
table.dt tbody .sticky-l { background: var(--surface); }
table.dt tbody tr:nth-child(even) .sticky-l { background: var(--surface-2); }
table.dt tbody tr:hover .sticky-l { background: var(--accent-weak); }
:root[data-theme="dark"] table.dt tbody tr:hover .sticky-l { background: var(--surface-3); }
table.dt thead .sticky-l { background: var(--surface-3); }

/* 긴 텍스트 열만 줄바꿈 허용 */
table.dt td.wrap, table.dt th.wrap {
  white-space: normal; text-align: center;   /* 표 안 모든 요소는 가운데 — 긴 글도 예외 없음 */
  text-overflow: clip; overflow-wrap: anywhere;
}
table.dt td.wrap { padding: 8px 10px; line-height: 1.5; }
table.dt td.left, table.dt th.left { text-align: center; }   /* 예전 왼쪽 정렬 열도 가운데로 통일 */

.th-sort {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; height: 100%; color: inherit; font: inherit;
}
.th-sort:hover { color: var(--accent-text); }
:root[data-theme="dark"] .th-sort:hover { color: var(--accent); }
.th-sort svg { width: 11px; height: 11px; opacity: .35; }
.th-sort[data-dir] svg { opacity: 1; color: var(--accent); }

.row-actions { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
table.dt td:has(> .row-actions) { text-overflow: clip; }

/* 체크박스: 네이티브 대신 그린 것. 중앙 정렬 유지 */
.check {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: none;
  border: 1px solid var(--text-3); border-radius: 4px;
  background: var(--surface);
  display: inline-grid; place-content: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  vertical-align: middle;
}
.check::after {
  content: ""; width: 8px; height: 8px;
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 20%, 85% 8%, 38% 72%);
  background: var(--accent-on, #fff); transform: scale(0);
  transition: transform var(--dur) var(--ease);
}
:root[data-theme="dark"] .check::after { background: var(--accent-on, #1a0f07); }
.check:checked, .check:indeterminate { background: var(--accent); border-color: var(--accent); }
.check:checked::after { transform: scale(1); }
.check:indeterminate::after { clip-path: none; width: 8px; height: 2px; border-radius: 1px; transform: scale(1); }

/* ---------- 툴바 / 페이지네이션 ---------- */
.toolbar { display: flex; align-items: flex-end; gap: var(--gap); flex-wrap: wrap; }
.toolbar > * { min-width: 0; }
.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--gap);
  flex: none; flex-wrap: wrap;
}
.pager-info { font-size: 11px; color: var(--text-3); font-family: var(--mono); }
.pager-btn {
  min-width: 30px; height: 28px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); font-size: 11px; font-weight: 600;
  font-family: var(--mono);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pager-btn:hover:not(:disabled) { background: var(--surface-3); }
.pager-btn[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
:root[data-theme="dark"] .pager-btn[aria-current="true"] { color: var(--accent-on, #1a0f07); }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-gap { color: var(--text-3); font-size: 11px; padding: 0 2px; }

/* ---------- 커스텀 드롭다운 ---------- */
.dd { position: relative; min-width: 0; }
.dd-btn {
  display: flex; align-items: center; gap: 6px;
  height: 32px; width: 100%; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); font-size: 12px; text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dd-btn:hover { border-color: var(--text-3); }
.dd[data-open="true"] .dd-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.dd-btn-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn-text[data-empty="true"] { color: var(--text-3); }
.dd-caret { width: 13px; height: 13px; flex: none; color: var(--text-3); transition: transform var(--dur) var(--ease); }
.dd[data-open="true"] .dd-caret { transform: rotate(180deg); }

.dd-pop {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0;
  min-width: 100%; width: max-content; max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-surface);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: top center;
  animation: pop-in 160ms var(--ease);
}
.dd-search { padding: var(--gap); border-bottom: 1px solid var(--line-soft); }
.dd-list { max-height: 240px; overflow-y: auto; padding: 4px; overscroll-behavior: contain; }
.dd-opt {
  display: flex; align-items: center; gap: var(--gap);
  height: 30px; padding: 0 8px; width: 100%;
  border-radius: 6px; font-size: 12px; text-align: left;
  transition: background var(--dur) var(--ease);
}
.dd-opt:hover { background: var(--surface-3); }
.dd-opt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-opt-count { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.dd-empty { padding: 14px var(--gap); text-align: center; font-size: 11px; color: var(--text-3); }
.dd-foot {
  display: flex; gap: var(--gap); padding: var(--gap);
  border-top: 1px solid var(--line-soft); background: var(--surface-2);
}
.dd-foot .btn { flex: 1; }

/* ---------- 커스텀 달력 ---------- */
.dp { position: relative; }
.dp-input-row { display: flex; align-items: center; gap: 6px; }
.dp-pop {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0;
  width: 252px; padding: var(--gap);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-surface); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: var(--gap);
  transform-origin: top left;
  animation: pop-in 160ms var(--ease);
}
.dp-head { display: flex; align-items: center; gap: 6px; }
.dp-head-label { flex: 1; text-align: center; font-weight: 700; font-size: 12px; font-family: var(--mono); }
.dp-nav {
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  display: grid; place-items: center; color: var(--text-2);
  transition: background var(--dur) var(--ease);
}
.dp-nav:hover { background: var(--surface-3); color: var(--text); }
.dp-nav svg { width: 13px; height: 13px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow {
  height: 22px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--text-3);
}
.dp-dow[data-sun="true"] { color: var(--danger); }
.dp-day {
  height: 28px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 11px; font-family: var(--mono);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dp-day:hover { background: var(--surface-3); }
.dp-day[data-out="true"] { color: var(--text-3); opacity: .5; }
.dp-day[data-today="true"] { box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; }
.dp-day[data-selected="true"] { background: var(--accent); color: var(--accent-on, #fff); font-weight: 700; }
:root[data-theme="dark"] .dp-day[data-selected="true"] { color: var(--accent-on, #1a0f07); }
.dp-foot { display: flex; gap: var(--gap); }
.dp-foot .btn { flex: 1; }

/* ---------- 모달 ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(24 24 27 / .45);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  padding: 24px;
  animation: fade-in 160ms var(--ease);
}
.scrim[data-closing="true"] { animation: fade-out 140ms var(--ease) forwards; }
.modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  width: min(960px, 100%); max-height: min(680px, 100%);
  overflow: hidden;
  animation: modal-in 220ms var(--ease);
}
.scrim[data-closing="true"] .modal { animation: modal-out 140ms var(--ease) forwards; }
.modal-sm { width: min(460px, 100%); }
.modal-head {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap); border-bottom: 1px solid var(--line);
  flex: none;
}
.modal-title { font-size: 14px; font-weight: 700; flex: 1; }
.modal-body { padding: var(--gap); overflow-y: auto; display: flex; flex-direction: column; gap: var(--gap); }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--gap);
  padding: var(--gap); border-top: 1px solid var(--line); flex: none;
}

/* ---------- 가이드 모달 ---------- */
.guide { width: min(1060px, 100%); height: min(680px, 100%); }
.guide-body { display: grid; grid-template-columns: 232px 1fr; min-height: 0; flex: 1; }
.guide-side {
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--gap);
  padding: var(--gap); min-height: 0; background: var(--surface-2);
}
.guide-side-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.guide-side-group { font-size: 10px; font-weight: 700; color: var(--text-3); padding: 8px 8px 2px; }
.guide-side-item {
  display: flex; align-items: center; gap: var(--gap);
  padding: 7px 8px; border-radius: 6px;
  font-size: 12px; color: var(--text-2); text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.guide-side-item:hover { background: var(--surface-3); color: var(--text); }
.guide-side-item[aria-current="true"] { background: var(--accent-weak); color: var(--accent-text); font-weight: 600; }
:root[data-theme="dark"] .guide-side-item[aria-current="true"] { color: var(--accent); }
.guide-main { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* 세로 flex 안에서 내용이 눌려 잘리지 않게 한다 */
.guide-main > * { flex: none; }
.guide-h { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.guide-lead { color: var(--text-2); line-height: 1.6; }
.guide-step {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--gap);
  padding: var(--gap); border: 1px solid var(--line-soft);
  border-radius: var(--r-surface); background: var(--surface-2);
  align-items: start;
}
.guide-step-title { font-weight: 600; }
.guide-step-desc { color: var(--text-2); line-height: 1.6; margin-top: 3px; }
.guide-note {
  padding: var(--gap); border-radius: var(--r-surface);
  background: var(--accent-weak); color: var(--accent-text);
  line-height: 1.6; border: 1px solid transparent;
}
:root[data-theme="dark"] .guide-note { color: var(--accent); }

/* 가이드 안 미니 데모 */
.demo {
  border: 1px solid var(--line); border-radius: var(--r-surface);
  background: var(--surface-2); padding: var(--gap);
  display: flex; flex-direction: column; gap: var(--gap);
  position: relative; overflow: hidden;
}
.demo-stage { position: relative; min-height: 128px; }
.demo-cursor {
  position: absolute; width: 16px; height: 16px; z-index: 5;
  color: var(--text); filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35));
  transition: transform 620ms var(--ease);
  pointer-events: none;
}
.demo-ring {
  position: absolute; z-index: 4; border-radius: var(--r-control);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-weak);
  transition: all 620ms var(--ease);
  pointer-events: none; opacity: 0;
}
.demo-ring[data-on="true"] { opacity: 1; }
.demo-cap {
  font-size: 11px; color: var(--text-2); min-height: 32px;
  display: flex; align-items: center; gap: var(--gap);
}
.demo-bar { display: flex; align-items: center; gap: var(--gap); }
.demo-dots { display: flex; gap: 4px; flex: 1; }
.demo-dot { width: 14px; height: 3px; border-radius: 2px; background: var(--line); transition: background var(--dur) var(--ease); }
.demo-dot[data-on="true"] { background: var(--accent); }

/* ---------- 로딩 ---------- */
/* 실제 로딩이 일어나는 영역에만 덮는다. 사이드바는 덮지 않는다. */
.load-layer {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center; gap: var(--gap);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(1px);
  animation: fade-in 120ms var(--ease);
}
.load-inner { display: flex; flex-direction: column; align-items: center; gap: var(--gap); }
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 720ms linear infinite;
}
.load-logo {
  width: 34px; height: 34px; border-radius: var(--r-control);
  background: var(--accent); color: var(--accent-on, #fff);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  animation: pulse 1.4s var(--ease) infinite;
}
.load-text { font-size: 11px; color: var(--text-3); font-weight: 500; }

.skel { background: var(--surface-3); border-radius: 4px; position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.3s infinite;
}
:root[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .06), transparent); }

/* 빈 상태 / 오류 */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--gap); padding: 48px var(--gap); text-align: center; color: var(--text-3);
}
.empty-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.empty svg { width: 26px; height: 26px; opacity: .5; }

/* ---------- 토스트 ---------- */
.toasts {
  position: fixed; z-index: 200; right: var(--gap); bottom: var(--gap);
  display: flex; flex-direction: column; gap: var(--gap);
}
.toast {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap) 12px; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-surface); box-shadow: var(--shadow-2);
  font-size: 12px; font-weight: 500;
  animation: toast-in 220ms var(--ease);
}
.toast[data-closing="true"] { animation: toast-out 160ms var(--ease) forwards; }
.toast[data-kind="ok"] { border-left: 3px solid var(--ok); }
.toast[data-kind="error"] { border-left: 3px solid var(--danger); }

/* ---------- 도서 카드 그리드 ---------- */
.book-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  overflow-y: auto; min-height: 0; padding: 1px;
}
.book-card {
  display: flex; flex-direction: column; gap: var(--gap);
  padding: var(--gap);
  border: 1px solid var(--line); border-radius: var(--r-surface);
  background: var(--surface); text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.book-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.book-cover {
  aspect-ratio: 3 / 4; width: 100%; object-fit: cover;
  border-radius: var(--r-control); background: var(--surface-3);
  display: block;
}
.book-title {
  font-size: 12px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.book-meta { font-size: 10px; color: var(--text-3); }

/* 분포 막대 */
.bars { display: flex; flex-direction: column; gap: var(--gap); }
.bar-row { display: grid; grid-template-columns: 54px 1fr 54px; gap: var(--gap); align-items: center; }
.bar-label { font-size: 11px; color: var(--text-2); text-align: right; }
.bar-track { height: 16px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 4px; background: var(--accent);
  transform-origin: left center; transform: scaleX(0);
  animation: bar-grow 620ms var(--ease) forwards;
}
.bar-value { font-family: var(--mono); font-size: 11px; color: var(--text-2); text-align: left; }

/* ============================================================
   문제 풀이
   ============================================================ */
.q-head { flex: none; gap: var(--gap); }
.q-head-top { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.q-book { display: flex; align-items: center; gap: var(--gap); min-width: 0; flex: 1; }
.q-book-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-head-right { display: flex; align-items: center; gap: var(--gap); color: var(--text-2); font-size: 12px; }
.q-timer { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.q-progress-text { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.q-progress { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.q-progress-fill {
  height: 100%; width: 0; border-radius: 3px; background: var(--accent);
  transition: width 320ms var(--ease);
}

.q-stage {
  flex: 1; min-height: 0; overflow-y: auto;
  gap: var(--gap);
}
.q-meta-row { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.q-text { font-size: 16px; font-weight: 600; line-height: 1.6; letter-spacing: -.01em; }
.q-desc {
  color: var(--text-2); line-height: 1.7; padding: var(--gap);
  background: var(--surface-2); border-radius: var(--r-control);
  border-left: 3px solid var(--line);
}
.q-choices { display: flex; flex-direction: column; gap: var(--gap); }
.q-choice {
  display: flex; align-items: flex-start; gap: var(--gap);
  padding: 12px var(--gap); width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-surface);
  background: var(--surface); font-size: 13px; line-height: 1.55;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.q-choice:hover { border-color: var(--accent); background: var(--surface-2); }
.q-choice:active { transform: translateY(1px); }
.q-choice[data-on="true"] { border-color: var(--accent); background: var(--accent-weak); }
.q-choice[data-on="true"] .circle-num { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
:root[data-theme="dark"] .q-choice[data-on="true"] .circle-num { color: var(--accent-on, #1a0f07); }
.q-choice-text { flex: 1; }

.q-foot { flex: none; flex-direction: row; align-items: center; gap: var(--gap); }
.q-dots-wrap { flex: 1; min-width: 0; overflow-x: auto; }
.q-dots { display: flex; gap: 6px; justify-content: center; }
.q-dot {
  width: 26px; height: 26px; flex: none; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-3);
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.q-dot:hover { border-color: var(--accent); color: var(--text); }
.q-dot[data-done="true"] { background: var(--accent-weak); color: var(--accent-text); border-color: transparent; }
:root[data-theme="dark"] .q-dot[data-done="true"] { color: var(--accent); }
.q-dot[aria-current="true"] { border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 2px var(--accent-weak); }
:root[data-theme="dark"] .q-dot[aria-current="true"] { color: var(--accent); }

/* ---------- 결과 ---------- */
.r-score-value { display: flex; align-items: baseline; gap: 4px; }
.r-score-unit { font-size: 13px; color: var(--text-3); font-weight: 600; }
.r-score .stat-value { font-size: 34px; color: var(--accent-text); }
:root[data-theme="dark"] .r-score .stat-value { color: var(--accent); }

.r-list { display: flex; flex-direction: column; gap: var(--gap); overflow-y: auto; min-height: 0; }
.r-item {
  border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: var(--gap); display: flex; flex-direction: column; gap: var(--gap);
  background: var(--surface);
  border-left: 3px solid var(--danger);
}
.r-item[data-ok="true"] { border-left-color: var(--ok); }
.r-item-head { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.r-item-q { font-weight: 600; flex: 1; min-width: 200px; line-height: 1.5; }
.r-choices { display: flex; flex-direction: column; gap: var(--gap); }
.r-choice {
  display: flex; align-items: center; gap: var(--gap);
  padding: 7px var(--gap); border-radius: var(--r-control);
  background: var(--surface-2); line-height: 1.5;
}
.r-choice[data-answer="true"] { background: var(--ok-weak); }
.r-choice[data-mine="true"]:not([data-answer="true"]) { background: var(--danger-weak); }

.r-recent { display: flex; flex-direction: column; gap: var(--gap); overflow-y: auto; min-height: 0; }
.r-recent-item {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap); border: 1px solid var(--line); border-radius: var(--r-surface);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.r-recent-item:hover { border-color: var(--accent); transform: translateX(2px); }
.r-recent-score {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-control);
  background: var(--accent-weak); color: var(--accent-text);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 15px;
}
:root[data-theme="dark"] .r-recent-score { color: var(--accent); }

/* ---------- 정답 입력 ---------- */
.a-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--gap); flex: 1; min-height: 0; }
.a-picker { min-height: 0; }
.a-booklist { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; }
.a-bookitem {
  display: flex; align-items: center; gap: var(--gap);
  padding: 6px; border-radius: var(--r-control); border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.a-bookitem:hover { background: var(--surface-3); }
.a-bookitem[aria-current="true"] { background: var(--accent-weak); border-color: var(--accent); }
.a-bookthumb { width: 28px; height: 38px; flex: none; border-radius: 4px; object-fit: cover; background: var(--surface-3); }
.a-booktitle {
  font-size: 12px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.a-stage { flex: 1; min-height: 0; overflow-y: auto; border: 0; padding: 0; }

/* 카드 전체가 링크인 경우 */
a.card-link { transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
a.card-link:hover { border-color: var(--accent); transform: translateY(-2px); }

@media (max-width: 980px) {
  .a-layout { grid-template-columns: 1fr; }
  .a-picker { max-height: 240px; }
}

/* ============================================================
   입장 화면 (학생 / 관리자 고르기)
   ============================================================ */
.enter {
  /* 문서 스크롤을 막아 둔 앱이라(body overflow:hidden) 입구·로그인 화면은 이 칸이 스스로 스크롤한다.
     min-height 만 두면 휴대폰에서 아래 카드가 잘려 내려가지 않았다(10/9) */
  height: 100dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
  background: var(--bg);
}
.enter-top {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap); border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.enter-body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 28px; padding: var(--gap);
}
.enter-head { text-align: center; display: flex; flex-direction: column; gap: var(--gap); }
.enter-h { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.enter-lead { color: var(--text-2); font-size: 14px; }

.enter-cards {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0, 250px));
  width: 100%; max-width: 780px; justify-content: center;
}
.enter-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--gap);
  padding: 28px var(--gap);
  border: 1px solid var(--line); border-radius: var(--r-surface);
  background: var(--surface); text-align: center;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  animation: row-in 320ms var(--ease) backwards;
}
.enter-card { animation-delay: calc(var(--i, 0) * 50ms); }
.enter-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-2); }
.enter-card:active { transform: translateY(0); }
.enter-icon {
  width: 48px; height: 48px; border-radius: var(--r-surface);
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.enter-card-primary .enter-icon { background: var(--accent); color: var(--accent-on, #fff); }
:root[data-theme="dark"] .enter-card-primary .enter-icon { color: var(--accent-on, #1a0f07); }
.enter-card:hover .enter-icon { background: var(--accent); color: var(--accent-on, #fff); }
:root[data-theme="dark"] .enter-card:hover .enter-icon { color: var(--accent-on, #1a0f07); }
.enter-title { font-size: 17px; font-weight: 700; }
.enter-desc { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.enter-foot { font-size: 11px; color: var(--text-3); min-height: 16px; }
.enter-foot-warn { color: var(--danger); }
.enter-go {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--accent-text);
  margin-top: 2px;
}
:root[data-theme="dark"] .enter-go { color: var(--accent); }

.enter-switch {
  margin-top: 2px; padding: 4px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 11px; color: var(--text-2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.enter-switch:hover { border-color: var(--accent); color: var(--text); }

.enter-panel { width: 100%; max-width: 380px; }
.enter-form {
  display: flex; flex-direction: column; gap: var(--gap);
  padding: var(--gap); border: 1px solid var(--line);
  border-radius: var(--r-surface); background: var(--surface);
  box-shadow: var(--shadow-1);
  animation: modal-in 220ms var(--ease);
}
.enter-form-head { display: flex; align-items: center; gap: var(--gap); text-align: left; }
.enter-form-head .enter-icon { width: 38px; height: 38px; flex: none; background: var(--accent); color: var(--accent-on, #fff); }
:root[data-theme="dark"] .enter-form-head .enter-icon { color: var(--accent-on, #1a0f07); }
.enter-form-head .enter-title { font-size: 15px; }
.enter-form-foot { display: flex; gap: var(--gap); }
.enter-form-foot .btn { flex: 1; }

/* 사이드바의 학생 표시 */
.who {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap); border-radius: var(--r-surface);
  background: var(--surface-3);
}
.who-avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--accent); color: var(--accent-on, #fff);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
:root[data-theme="dark"] .who-avatar { color: var(--accent-on, #1a0f07); }
.who-name { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-grade { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--text-3); }   /* 이름 옆 학년 */
.who-sub { font-size: 10px; color: var(--text-3); }

@media (max-width: 980px) {
  .enter-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; }
}
@media (max-width: 560px) {
  .enter-cards { grid-template-columns: 1fr; max-width: 320px; }
}

/* ---------- 원장·선생님 로그인 ---------- */
.login-card { width: min(340px, 100%); }

/* ---------- 학생 상세 - 탭 ---------- */
.tabbar { display: flex; gap: var(--gap); flex-wrap: wrap; }
.tab-btn {
  height: 36px; padding: 0 18px; border-radius: 8px;
  border: 1px solid transparent;
  background: var(--accent-weak); color: var(--accent-text);
  font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
:root[data-theme="dark"] .tab-btn { color: var(--accent); }
.tab-btn:hover { transform: translateY(-1px); }
.tab-btn:active { transform: translateY(0) scale(.98); }
.tab-btn[aria-selected="true"] { background: var(--accent); color: var(--accent-on, #fff); }
:root[data-theme="dark"] .tab-btn[aria-selected="true"] { color: var(--accent-on, #1a0f07); }
.tab-panel { animation: row-in 220ms var(--ease) backwards; }

.student-head { display: flex; flex-wrap: wrap; gap: calc(var(--gap) * 2); align-items: center; }
.student-head .k { font-size: 12px; color: var(--text-3); }
.student-head .v { font-size: 15px; font-weight: 700; }

/* 표 안의 이름 링크 */
.link-name { color: var(--accent-text); font-weight: 600; text-decoration: none; }
:root[data-theme="dark"] .link-name { color: var(--accent); }
.link-name:hover { text-decoration: underline; }

/* 독서노트 목록 */
.note-item {
  border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: var(--gap); display: flex; flex-direction: column; gap: 6px;
  animation: row-in 240ms var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 16) * 40ms);
}
.note-meta { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.note-content { white-space: pre-wrap; line-height: 1.6; font-size: 13px; }

/* 테라피 추천 도서 */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--gap); }
.book-cell {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: 8px; background: var(--surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  animation: row-in 240ms var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 16) * 30ms);
}
.book-cell:hover { transform: translateY(-2px); border-color: var(--accent); }
.book-cell img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: var(--surface-3); }
.book-cell .t {
  font-size: 12px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 애니메이션 ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes modal-out { to { opacity: 0; transform: translateY(4px) scale(.99); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .75; } }
@keyframes bar-grow { to { transform: scaleX(1); } }
@keyframes row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 행 스태거. transform/opacity 만 건드린다 */
tbody[data-animate="true"] tr {
  animation: row-in 260ms var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 16) * 12ms);
}

/* 새로고침 잔상 방지: JS 준비 전에는 본문을 감춘다 */
.app[data-ready="false"] .content > *:not(.load-layer) { visibility: hidden; }
/* 데이터를 기다리는 동안에도 보이는 줄(내 책장 탭 줄 — shelf-ui.js shelfTabs). 로딩 덮개(z 20) 위에 둔다 */
.app[data-ready="false"] .content > .stay { visibility: visible; }
.content > .stay { position: relative; z-index: 21; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .bar-fill { transform: scaleX(1); }
  .demo-cursor, .demo-ring { transition: none; }
}

/* ============================================================
   모바일
   ============================================================ */
.menu-btn { display: none; }
.nav-scrim { display: none; }
.guide-listbtn { display: none; }
.guide-title-row { display: flex; align-items: center; gap: var(--gap); }

/* 손가락으로 누르는 기기에서는 조작부를 키운다 */
@media (pointer: coarse) {
  .btn { height: 38px; padding: 0 14px; }
  .btn-icon { width: 38px; }
  .btn-sm { height: 32px; padding: 0 10px; }
  .input { height: 38px; font-size: 16px; }   /* 16px 미만이면 iOS 가 초점 시 확대한다 */
  .dd-btn { height: 38px; }
  .dd-opt { height: 38px; }
  .check { width: 20px; height: 20px; }
  .check::after { width: 11px; height: 11px; }
  .dp-day { height: 34px; }
  .pager-btn { min-width: 36px; height: 36px; }
  .q-dot { width: 34px; height: 34px; }
  .nav-item { height: 42px; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 90; width: 232px;
    padding-top: max(var(--gap), env(safe-area-inset-top));
    padding-bottom: max(var(--gap), env(safe-area-inset-bottom));
    transform: translateX(-100%); transition: transform var(--dur) var(--ease);
  }
  .sidebar[data-open="true"] { transform: none; box-shadow: var(--shadow-3); }
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 80;
    background: rgb(24 24 27 / .45); animation: fade-in 160ms var(--ease);
  }
  .menu-btn { display: inline-flex; }

  .topbar { padding-top: max(var(--gap), env(safe-area-inset-top)); }
  .topbar h1 { font-size: 14px; }
  .content { padding-bottom: max(var(--gap), env(safe-area-inset-bottom)); }

  /* 태블릿: 필터 칸은 이어서 놓고 모자라면 줄바꿈(한 줄에 하나씩 세우지 않는다) */
  .toolbar > .field { flex: 1 1 160px !important; }
  .dt-tools > .dd, .tb-row > .dd, .toolbar > .dd { flex: 1 1 140px; }   /* 바로 아래만: .field(세로) 안 .dd 에 걸리면 140px 가 높이가 된다(10/13 구술 녹음 빈 칸) */
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  /* 표는 가로 스크롤을 유지하되 여백을 줄인다 */
  .table-wrap { min-height: 160px; }
  table.dt th, table.dt td { padding: 0 8px; }

  /* 모달은 화면을 거의 채운다 */
  .scrim { padding: 0; }
  .modal, .modal-sm, .guide {
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: 0;
  }
  .modal-head { padding-top: max(var(--gap), env(safe-area-inset-top)); }
  .modal-foot { padding-bottom: max(var(--gap), env(safe-area-inset-bottom)); }

  /* 가이드: 목록은 버튼으로 여닫는다 */
  .guide-body { grid-template-columns: 1fr; }
  .guide-side {
    display: none; position: absolute; inset: 0; z-index: 5;
    background: var(--surface); border-right: 0;
  }
  .guide-side[data-open="true"] { display: flex; }
  .guide-body { position: relative; }
  .guide-listbtn { display: inline-flex; }

  /* 문제 풀이 */
  .q-text { font-size: 15px; }
  .q-choice { padding: 14px var(--gap); }
  .q-foot { flex-wrap: wrap; }
  .q-dots-wrap { order: 3; width: 100%; }
  .q-dots { justify-content: flex-start; padding-bottom: 2px; }
  .q-foot > .btn, .q-foot > div:last-child { flex: 1; }
  .q-foot > div:last-child .btn { width: 100%; }

  /* 결과 */
  .r-item-q { min-width: 0; }
  .r-score .stat-value { font-size: 28px; }

  /* 정답 입력: 위아래로 쌓는다 */
  .a-layout { grid-template-columns: 1fr; }
  .a-picker { max-height: 220px; }

  .book-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .enter-body { padding: var(--gap) var(--gap) 32px; }
  .enter-h { font-size: 21px; }
}

/* ---------- 진행률 막대 ---------- */
.prog { display: none; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 0; }
.prog[data-on="true"] { display: flex; }
.prog-label { font-size: 11px; font-weight: 600; color: var(--text-2); }
.prog-track {
  height: 6px; border-radius: var(--r-pill);
  background: var(--surface-3); overflow: hidden;
}
.prog-bar {
  height: 100%; width: 0; border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 200ms var(--ease);
}
/* 남은 시간을 알 수 없는 구간은 좌우로 흐르게 둔다 */
.prog-bar[data-indet="true"] { width: 38%; animation: prog-slide 1.1s var(--ease) infinite; }
@keyframes prog-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
  .prog-bar[data-indet="true"] { width: 100%; }
}

/* ---------- 도서 원문 뷰어 / 관리 모달 ---------- */
.img-mgr-modal { width: min(1180px, 100%); max-height: min(800px, 94vh); }
/* 왼쪽 원문 슬라이드 · 오른쪽 쪽글. 두 칸이 각자 스크롤한다 */
.img-mgr-body {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gap); padding: var(--gap); min-height: 0; overflow: hidden;
}
.img-mgr-col {
  display: flex; flex-direction: column; gap: var(--gap);
  min-height: 0; min-width: 0; overflow: hidden;   /* 세로 스크롤 없이 한 화면에 다 보이게 */
}
.img-mgr-col-text { overflow-y: auto; }
.img-mgr-col-text { border-left: 1px solid var(--line-soft); padding-left: var(--gap); }
.img-text-head { display: flex; align-items: center; gap: var(--gap); flex: none; }
.img-text-area {
  flex: 1; min-height: 220px; resize: none; line-height: 1.7;
  font-size: 13px; padding: 10px 12px;
}
.img-text-empty { color: var(--text-3); font-size: 12px; text-align: center; padding: 24px 8px; }
@media (max-width: 900px) {
  .img-mgr-body { grid-template-columns: 1fr; overflow-y: auto; }
  .img-mgr-col { overflow: visible; }
  .img-mgr-col-text { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: var(--gap); }
}
.img-stage {
  /* 고정 높이를 주면 아래 스트립이 밀려 칸에 세로 스크롤이 생긴다. 남는 높이를 무대가 먹는다 */
  position: relative; width: 100%; flex: 1 1 auto; min-height: 180px;
  background: var(--surface-3);
  border-radius: var(--r-surface);
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; user-select: none;
}
.img-stage-content {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: var(--r-control);
  animation: img-in 200ms var(--ease) both;    /* 장을 넘길 때 툭 바뀌지 않게 */
}
@keyframes img-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .img-stage-content { animation: none; } }
.img-stage-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  display: grid; place-items: center;
  color: var(--text); z-index: 5; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.img-stage-nav:hover:not(:disabled) {
  background: var(--surface); transform: translateY(-50%) scale(1.08);
}
.img-stage-nav:disabled { opacity: .25; cursor: default; }
.img-stage-nav.prev { left: 12px; }
.img-stage-nav.next { right: 12px; }

.img-stage-overlay {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(4px);
  padding: 4px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
  font-size: 11px; font-weight: 700; font-family: var(--mono);
  color: var(--text-2); display: flex; align-items: center; gap: 6px;
  z-index: 5; box-shadow: var(--shadow-1);
}
.img-stage-overlay-cover {
  background: var(--accent); color: var(--accent-on, #fff); font-size: 10px; padding: 1px 6px;
  border-radius: var(--r-pill); font-weight: 700;
}
:root[data-theme="dark"] .img-stage-overlay-cover { color: var(--accent-on, #1a0f07); }

.img-stage-top-actions {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; align-items: center; gap: 6px;
}

.img-stage-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--gap); color: var(--text-3); padding: 24px; text-align: center;
}

.img-thumb-strip {
  display: flex; align-items: flex-start; gap: var(--gap);
  flex: none;                                  /* 줄어들지 않는다. 카드가 잘리면 안 된다 */
  overflow-x: auto; overflow-y: hidden;        /* 가로로만 넘긴다 */
  padding: 4px 2px 2px;
  scroll-behavior: smooth;

}
/* 카드 + 번호표를 한 덩어리로 묶는다. 번호는 그림을 가리지 않게 아래에 붙는다 */
.img-thumb-slot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: none;
}
.img-thumb-tag {
  font-size: 10px; font-weight: 700; line-height: 1.4;
  color: var(--text-3); font-family: var(--mono);
}
.img-thumb-slot .chip.img-thumb-tag {
  font-family: inherit; font-size: 9px; padding: 0 6px; height: 15px; line-height: 15px;
}
/* 대표는 본문 쪽 번호에 들어가지 않는다. 사이를 눈에 보이게 끊는다 */
.img-thumb-split {
  flex: none; align-self: stretch; width: 1px; margin: 2px 4px;
  background: var(--line); border-radius: 1px;
}
.img-thumb-card {
  position: relative; flex: none; width: 62px; height: 82px;
  border-radius: var(--r-control); border: 1px solid var(--line);
  background: var(--surface-2); cursor: pointer; overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.img-thumb-card:hover { border-color: var(--text-3); transform: translateY(-2px); }
.img-thumb-card[data-active="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-weak);
}
.img-thumb-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.img-thumb-del {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line); color: var(--danger);
  display: grid; place-items: center; font-size: 11px;
  opacity: 0; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.img-thumb-card:hover .img-thumb-del { opacity: 1; }
.img-thumb-del:hover { background: var(--danger-weak); }

.img-dropzone {
  border: 2px dashed var(--line); border-radius: var(--r-surface);
  background: var(--surface-2); padding: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.img-dropzone:hover, .img-dropzone[data-drag="true"] {
  border-color: var(--accent); background: var(--accent-weak);
}

@media (max-width: 420px) {
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .book-title { font-size: 11px; }
  .stat-value { font-size: 19px; }
  .q-choice { font-size: 14px; }
  .img-stage { height: 260px; }
}

/* ---------- 단어·문장 목록 (뉴브릿지 수집분) ----------
   표 컴포넌트를 쓰지 않는다. 모달 안 짧은 목록이라 그리드 한 줄이면 충분하다.
   등장은 표 본문과 같은 row-in 을 재사용해 리듬을 맞춘다. */
.nb-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) 26px;
  gap: var(--gap); align-items: center;
  padding: 5px 6px; border-radius: var(--r-control);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur) var(--ease);
  animation: row-in 260ms var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 16) * 12ms);
}
.nb-row:last-child { border-bottom: 0; }
.nb-row:hover { background: var(--surface-2); }

.nb-eng { text-wrap: pretty; overflow-wrap: anywhere; }
.nb-kor { text-wrap: pretty; overflow-wrap: anywhere; color: var(--text-2); }

/* 버튼이 26px 이라 손가락에는 좁다. 보이는 크기는 두고 누를 수 있는 범위만 40px 로 넓힌다 */
.nb-play { position: relative; width: 26px; padding: 0; }
.nb-play::after { content: ''; position: absolute; inset: -7px; }
/* ▶ 는 무게중심이 왼쪽이라 기하 중앙에 두면 왼쪽으로 쏠려 보인다 */
.nb-play > span { display: block; transform: translateX(1px); }

/* ---------- 계정·권한 모달 ---------- */
.member-row {
  display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap;
  animation: member-in .22s ease-out both;
  animation-delay: calc(min(var(--i, 0), 16) * 40ms);
}
@keyframes member-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.perm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  transition: background-color .18s ease-out;
}
.perm-row:hover { background: var(--surface-3); }
.perm-row:has(.check:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .member-row { animation: none; } }

/* 문제 추가·수정 - 진단문제 부가 정보(접힘) */
.q-extra { border: 1px solid var(--line-soft); border-radius: 10px; padding: var(--gap); }
.q-extra > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2);
  transition: color .18s ease-out;
}
.q-extra > summary:hover { color: var(--text); }
.q-extra[open] > summary { margin-bottom: 10px; }
.q-extra[open] > *:not(summary) { animation: member-in .2s ease-out both; }

/* 관리자 로그인 - 데모 계정 바로 들어가기 */
.demo-login { margin-top: var(--gap); }
.demo-login-list { display: flex; flex-direction: column; gap: var(--gap); }
.demo-login-list .btn {
  justify-content: space-between;
  animation: member-in .22s ease-out both; animation-delay: calc(min(var(--i, 0), 16) * 50ms);
}
.demo-login-id { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .demo-login-list .btn { animation: none; } }

/* 카카오 주소 검색 - 모달 안에 끼워 넣는다 */
.postcode-host { height: min(470px, 70vh); border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }

/* 표는 어느 화면에서나 최소 폭을 지키고, 모자라면 표 영역 안에서만 가로 스크롤 (페이지는 스크롤하지 않는다) */
table.dt { min-width: 100%; }   /* 폭은 fitCols() 가 정한다 */

/* ---------- 문항 사용 · 문항 고르기 (문제 카드) ---------- */
/* 검색 막대는 고정, 문제 목록만 스크롤한다. 막대를 sticky 로 두면 모달 여백 사이로 카드가 비친다 */
.modal-body:has(> .pq-wrap) { overflow: hidden; padding: 0; flex: 1; min-height: 0; }
.pq-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pq-bar {
  flex: none; display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap;
  padding: var(--gap); border-bottom: 1px solid var(--line); background: var(--surface);
}
.pq-bar .input { flex: 1 1 200px; min-width: 0; }
.pq-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--gap); display: flex; flex-direction: column; gap: var(--gap); }
.pq {
  display: flex; flex-direction: column; gap: var(--gap);
  padding: var(--gap); border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface);
  transition: opacity .2s ease-out, border-color .2s ease-out, background-color .2s ease-out;
  animation: member-in .24s ease-out both; animation-delay: calc(min(var(--i, 0), 16) * 30ms);
}
.pq:hover { border-color: var(--line); }
.pq[data-off="true"] { opacity: .5; background: var(--surface-2); }
.pq-head { display: flex; align-items: flex-start; gap: var(--gap); cursor: pointer; }
.pq-head .check { margin-top: 3px; }
.pq-head .circle-num { width: 22px; height: 22px; font-size: 11px; margin-top: 1px; }
.pq-q { flex: 1; font-weight: 600; line-height: 1.5; color: var(--text); }
.pq-tags { display: flex; gap: var(--gap); flex: none; }
.pq-descr {
  margin-left: 64px; padding: var(--gap); border-radius: 8px;
  background: var(--surface-2); color: var(--text-2); font-size: 13px; line-height: 1.6; white-space: pre-wrap;
}
.pq-choices { list-style: none; margin: 0 0 0 64px; padding: 0; display: grid; gap: var(--gap); }
.pq-choice {
  display: flex; align-items: center; gap: var(--gap);
  padding: 6px 10px; border-radius: 8px; border: 1px solid transparent;
  color: var(--text-2); font-size: 13px; line-height: 1.45;
}
.pq-choice-text { flex: 1; }
.pq-choice.is-answer { background: var(--accent-weak); border-color: var(--accent); color: var(--text); font-weight: 600; }
.pq-note { margin-left: 64px; font-size: 12px; color: var(--text-3); line-height: 1.55; }
.pq-note b { color: var(--text-2); }
.pq-note.is-warn { color: var(--danger, #dc2626); }
@media (max-width: 640px) {
  .pq-descr, .pq-choices, .pq-note { margin-left: 0; }
  .pq-head { flex-wrap: wrap; }
  .pq-tags { width: 100%; padding-left: 64px; }
}
@media (prefers-reduced-motion: reduce) { .pq { animation: none; } }

/* ---------- 스위치 (문항 사용 켜고 끄기) ---------- */
.switch-wrap { display: inline-flex; align-items: center; gap: var(--gap); }
.switch {
  position: relative; width: 38px; height: 22px; flex: none; padding: 0; cursor: pointer;
  border-radius: 99px; border: 1px solid var(--line); background: var(--surface-3);
  transition: background-color .2s ease-out, border-color .2s ease-out;
}
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .2s ease-out;
}
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.switch-text { font-size: 12px; font-weight: 600; color: var(--text-2); }
.switch[aria-checked="false"] + .switch-text { color: var(--danger, #dc2626); }
/* 알림 안의 되돌리기 버튼 */
.toast { display: flex; align-items: center; gap: var(--gap); }
.toast-action {
  border: 0; background: transparent; color: inherit; font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; padding: 0; transition: opacity .15s ease-out;
}
.toast-action:hover { opacity: .75; }
@media (prefers-reduced-motion: reduce) { .switch, .switch-knob { transition: none; } }

/* 로고: 이름과 역할을 한 줄로 (세로 공간 절약) */
.brand > div:has(> .brand-name) { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.brand-sub { overflow: hidden; text-overflow: ellipsis; }

/* 엑셀 업로드 미리보기 요약 */
.import-summary { display: flex; gap: var(--gap); flex-wrap: wrap; min-height: 22px; }

/* 담당 학생 배정 목록 */
.assign-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-surface); padding: 6px; }
.assign-row { display: flex; align-items: center; gap: var(--gap); padding: 6px 8px; border-radius: var(--r-control); cursor: pointer; transition: background var(--dur) ease-out; }
.assign-row:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: no-preference) {
  .assign-row { animation: row-in .25s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 30ms); }
}
/* 선생님 화면 대신 보기 중 알림 띠 */
.imp-bar { display: flex; align-items: center; justify-content: center; gap: var(--gap); padding: 8px 16px;
  background: var(--accent-weak); color: var(--accent-text); font-size: 13px; font-weight: 600; }

/* ---------- 1단계: 학생 관리 ---------- */
.modal-lg { width: min(900px, 100%); }
/* 상태 탭(세그먼트) */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-3); border-radius: var(--r-control); }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 6px; white-space: nowrap; flex: none;
  background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background var(--dur) ease-out, color var(--dur) ease-out, transform var(--dur) ease-out; }
.seg-btn:hover { color: var(--text); }
.seg-btn:active { transform: scale(.97); }
.seg-btn[aria-selected="true"] { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-1); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg-count { font-size: 11px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.seg-btn[aria-selected="true"] .seg-count { color: var(--accent-text); }
/* 여러 학생 한 번에 */
.bulk-bar { display: flex; align-items: center; gap: var(--gap); font-size: 12.5px; font-weight: 600; color: var(--accent-text); }
.bulk-bar[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .bulk-bar:not([hidden]) { animation: pop-in .2s var(--ease) both; } }
/* 입력 창 묶음 */
.form-stack { display: flex; flex-direction: column; gap: var(--gap); }
.form-sec { border: 1px solid var(--line-soft); border-radius: var(--r-surface); padding: var(--gap); display: flex; flex-direction: column; gap: var(--gap); }
.form-sec-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); align-items: start; }
.form-grid .dd, .form-grid .dp { width: 100% !important; }
/* 변경 이력 */
.hist-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.hist-row { display: flex; align-items: center; gap: var(--gap); font-size: 12.5px; }
.hist-row .field-help { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) { .hist-row { animation: row-in .25s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 30ms); } }

/* 버튼으로 된 이름 링크 */
button.link-name { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
/* 수강료: 연도 + 12개월 */
.year-nav { display: inline-flex; align-items: center; gap: var(--gap); height: 32px; }
.month-row { display: flex; flex-wrap: wrap; gap: 4px; }
.month-btn { height: 32px; min-width: 48px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background var(--dur) ease-out, color var(--dur) ease-out, border-color var(--dur) ease-out, transform var(--dur) ease-out; }
.month-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.month-btn:active { transform: scale(.97); }
.month-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
.month-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 운영 설정 목록 */
.set-list { display: flex; flex-direction: column; }
.set-row { display: grid; grid-template-columns: 1fr auto; gap: var(--gap); align-items: center; padding: 12px var(--gap); border-top: 1px solid var(--line-soft); }
.set-row:first-child { border-top: 0; }
.set-label { font-weight: 700; font-size: 13.5px; }
@media (prefers-reduced-motion: no-preference) { .set-row { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 40ms); } }
@media (max-width: 640px) { .set-row { grid-template-columns: 1fr; } }

/* ---------- 2단계: 책 페이지 ---------- */
.bk-head { display: grid; grid-template-columns: 120px 1fr; gap: var(--gap); align-items: start; }
.bk-cover { width: 120px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-control); background: var(--surface-3); box-shadow: var(--shadow-2); }
.bk-info { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.bk-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.bk-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-actions { display: flex; gap: var(--gap); flex-wrap: wrap; margin-top: 4px; }
.bk-progress { display: flex; align-items: center; gap: var(--gap); font-size: 12.5px; color: var(--text-2); }
.bk-progress-bar { flex: 1; max-width: 320px; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bk-progress-fill { height: 100%; background: var(--accent); transform-origin: left; transition: transform .6s var(--ease); }
.bk-body { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; overflow: auto; }
.bk-sec h3 { margin: 0 0 6px; font-size: 14px; }
.bk-sec p { margin: 0 0 var(--gap); color: var(--text-2); line-height: 1.7; white-space: pre-line; }
.tm-wrap { display: flex; flex-direction: column; gap: var(--gap); }
.tm-card { display: flex; flex-direction: column; align-items: center; gap: var(--gap); padding: 22px var(--gap);
  border-radius: var(--r-surface); background: linear-gradient(160deg, var(--accent-weak), var(--surface)); border: 1px solid var(--line-soft); }
.tm-method { display: flex; gap: var(--gap); align-items: center; }
.tm-clock { font-family: var(--mono); font-size: clamp(44px, 9vw, 72px); font-weight: 800; letter-spacing: .02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.tm-state { font-size: 13px; color: var(--text-2); }
.tm-inputs { display: flex; align-items: center; gap: var(--gap); }
.tm-inputs .input { width: 110px; text-align: center; }
.tm-actions { display: flex; gap: var(--gap); }
.tm-go { min-width: 120px; }
.tm-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.tm-summary > div { border: 1px solid var(--line-soft); border-radius: var(--r-surface); padding: var(--gap); }
table.dt-plain { table-layout: auto; }
table.dt-plain tbody tr { animation: row-in .25s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 25ms); }
@media (prefers-reduced-motion: reduce) { table.dt-plain tbody tr { animation: none; } }
@media (max-width: 640px) { .bk-head { grid-template-columns: 84px 1fr; } .bk-cover { width: 84px; } .tm-summary { grid-template-columns: 1fr; } }
/* 책 고르기 위쪽: 읽는 책·추천 */
.shelf { display: flex; gap: var(--gap); overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.shelf-item { flex: 0 0 120px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
  transition: transform var(--dur) var(--ease); }
.shelf-item:hover { transform: translateY(-3px); }
.shelf-item img, .shelf-item .ph { width: 120px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-control); background: var(--surface-3); box-shadow: var(--shadow-1); }
.shelf-title { font-size: 12.5px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shelf-sub { font-size: 11px; color: var(--text-3); }
@media (prefers-reduced-motion: no-preference) { .shelf-item { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 40ms); } }

/* ---------- 3단계: 차트 ---------- */
.chart-radar { width: 100%; max-width: 320px; display: block; margin: 0 auto; overflow: visible; }
.chart-radar .grid, .chart-vbars .grid { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.chart-radar .axis, .chart-vbars .axis { fill: var(--text-2); font-size: 12px; font-weight: 700; font-family: var(--font); }
.chart-radar .pt { cursor: pointer; transition: r var(--dur) ease-out; }
.chart-radar .pt:hover, .chart-radar .pt:focus { r: 6; outline: none; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; font-size: 12px; color: var(--text-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-tip { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; padding: 6px 10px; border-radius: var(--r-control);
  background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; box-shadow: var(--shadow-2); white-space: nowrap; }
.chart-hbars { display: flex; flex-direction: column; gap: var(--gap); }
.chart-hrow { display: grid; grid-template-columns: 76px 1fr 72px; align-items: center; gap: var(--gap); font-size: 12.5px; cursor: default; }
.chart-hlabel { color: var(--text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-hbar-wrap { height: 10px; }
.chart-hbar { display: block; height: 10px; width: 100%; border-radius: 0 4px 4px 0; background: var(--chart-1); transform-origin: left; transform: scaleX(var(--w)); }
.chart-hval { font-family: var(--mono); font-size: 12px; color: var(--text); text-align: right; }
.chart-vbars { width: 100%; height: auto; max-height: 200px; display: block; }
.chart-vbars .bar { fill: var(--chart-1); cursor: pointer; transform-box: fill-box; transform-origin: bottom; }
.chart-vbars .bar:hover, .chart-vbars .bar:focus { fill: var(--accent-hover); outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .chart-hbar { animation: bar-grow-x .6s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 50ms); }
  .chart-vbars .bar { animation: bar-grow-y .6s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 40ms); }
}
@keyframes bar-grow-x { from { transform: scaleX(0); } }
@keyframes bar-grow-y { from { transform: scaleY(0); } }

/* ---------- 3단계: 학생 종합 분석 탭 ---------- */
.pf { display: flex; flex-direction: column; gap: var(--gap); }
.pf-stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pf-stat { gap: 2px; }
.pf-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.pf-table, .pf-heat { width: 100%; table-layout: auto; }
.pf-table th, .pf-table td, .pf-heat th, .pf-heat td { padding: 6px 8px; text-align: center; font-size: 12px; }
.pf-heat td.num { color: var(--text); font-weight: 600; }
.pf-actions { display: flex; gap: var(--gap); justify-content: flex-end; }

/* ---------- 3단계: 학원 대시보드 ---------- */
.dash { display: flex; flex-direction: column; gap: var(--gap); }
.dash-tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dash-tile { gap: 2px; text-decoration: none; color: inherit; transition: transform var(--dur) ease-out, border-color var(--dur) ease-out, box-shadow var(--dur) ease-out; }
a.dash-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-1); transform: translateY(-1px); }
a.dash-tile:active { transform: translateY(0) scale(.99); }
a.dash-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-tile[data-tone="warn"] .stat-value { color: var(--danger); }
.dash-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: var(--gap); }
.act-list { display: flex; flex-direction: column; }
.act-row { display: grid; grid-template-columns: 44px 72px minmax(0, 1fr) auto auto 112px; align-items: center; gap: var(--gap); padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.act-row:first-child { border-top: 0; }
.act-row .chip[data-kind="diag"] { background: var(--accent-weak); color: var(--accent-text); border-color: transparent; }
.act-name { font-weight: 700; color: var(--text); text-decoration: none; }
.act-name:hover { color: var(--accent-text); text-decoration: underline; }
.act-title { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-v { font-weight: 700; }
.act-at { color: var(--text-3); font-size: 11.5px; text-align: right; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dash-tiles { grid-template-columns: 1fr 1fr; } .dash-tile .stat-foot { font-size: 10.5px; } }
@media (max-width: 560px) {
  .act-row { grid-template-columns: 40px 1fr auto; }
  .act-title, .act-at { grid-column: 2 / -1; }
  .act-row > .chip-danger { display: none; }
}

/* ---------- 3단계: 진도·기한 현황 ---------- */
.pg-head { flex-wrap: wrap; }
.pg-dual { display: flex; flex-direction: column; gap: 3px; }
.pg-line { display: grid; grid-template-columns: 28px 1fr 38px; align-items: center; gap: 6px; font-size: 11px; }
.pg-k { color: var(--text-3); }
.pg-track { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.pg-bar { display: block; height: 100%; width: 100%; border-radius: 3px; transform-origin: left; transform: scaleX(var(--w)); }
.pg-bar.read { background: var(--chart-1); }
.pg-bar.time { background: var(--text-3); }
.pg-v { text-align: right; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) { .pg-bar { animation: bar-grow-x .5s var(--ease) both; } }

/* ---------- 3단계: 보고서 만들기 ---------- */
.rp-dates { display: flex; align-items: center; gap: 6px; }
.rp-pick { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); max-height: 220px; overflow: auto; padding: 2px; }
.rp-stu { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer;
  transition: border-color var(--dur) ease-out, background var(--dur) ease-out; }
.rp-stu:hover { border-color: var(--accent); }
.rp-stu:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); }
.rp-stu .field-help { margin-left: auto; }
.rp-msg { width: 100%; min-height: 120px; resize: vertical; padding: 10px; line-height: 1.6; height: auto; }
.rp-msg:disabled { opacity: .7; }
.rp-acts { display: flex; gap: 6px; }
.rp-foot { flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) { .rp-stu { animation: row-in .25s var(--ease) both; animation-delay: calc(min(var(--i, 0), 20) * 30ms); } }

/* ---------- 3단계: 학부모용 보고서(로그인 없음) ---------- */
body.rpt-body { overflow: auto; height: auto; background: var(--bg); }
.rpt { max-width: 720px; margin: 0 auto; padding: 28px 16px 40px; display: flex; flex-direction: column; gap: var(--gap); }
.rpt > * { min-width: 0; }
.rpt-head { padding: 8px 2px 10px; display: flex; flex-direction: column; gap: 6px; }
.rpt-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-2); font-size: 13px; }
.rpt-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--accent-on, #fff); display: grid; place-items: center; font-weight: 800; }
.rpt-head h1 { font-size: clamp(22px, 5vw, 30px); letter-spacing: -.02em; line-height: 1.2; }
.rpt-sub { color: var(--text-3); font-size: 13px; }
.rpt-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface); padding: 18px; display: flex; flex-direction: column; gap: var(--gap); }
.rpt-card h2 { font-size: 15px; }
.rpt-help { color: var(--text-3); font-size: 12px; }
.rpt-msg p { font-size: 14px; line-height: 1.75; }
.rpt-tag { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-text); font-size: 12px; }
.rpt-stat .stat-foot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-notice { text-align: center; padding: 48px 18px; margin-top: 10vh; }
.rpt-notice h1 { font-size: 20px; }
.rpt-notice p { color: var(--text-2); }
.rpt-stats { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rpt-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface); padding: 14px; min-width: 0; }
.rpt-stat .stat-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-table th { text-align: left; color: var(--text-3); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.rpt-table td { padding: 8px; border-bottom: 1px solid var(--line-soft); }
.rpt-table td.num, .rpt-table th { white-space: nowrap; }
.rpt-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); color: var(--text-3); font-size: 12px; padding-top: 6px; flex-wrap: wrap; }
@media (max-width: 480px) { .rpt-stats { grid-template-columns: 1fr 1fr; } .rpt-stats > :first-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: no-preference) { .rpt > * { animation: row-in .4s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 60ms); } }

/* 인쇄: 메뉴·버튼을 빼고 내용만 */
@media print {
  body, body.rpt-body { overflow: visible !important; height: auto !important; background: #fff; }
  .sidebar, .topbar, .tabbar, .pf-actions, .rpt-foot .btn, .nav-scrim, .imp-bar { display: none !important; }
  .app, .main, .content { display: block !important; height: auto !important; overflow: visible !important; }
  .card, .rpt-card, .rpt-stat { break-inside: avoid; box-shadow: none; }
  .rpt { padding: 0; }
}

/* ---------- 4단계: 독서노트 공통 ---------- */
.sticker { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
  background: var(--accent-weak); color: var(--accent-text); border: 1px dashed var(--accent); }
.sticker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
:root[data-theme="dark"] .sticker { color: var(--accent); }
.nb { display: flex; flex-direction: column; gap: var(--gap); }
.nb-photos { display: flex; flex-wrap: wrap; gap: var(--gap); }
.nb-photo { display: block; border-radius: var(--r-control); overflow: hidden; border: 1px solid var(--line); transition: transform var(--dur) ease-out, box-shadow var(--dur) ease-out; }
.nb-photo:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.nb-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nb-photo img { display: block; width: 160px; height: 213px; object-fit: cover; background: var(--surface-3); }
.nb-field { display: flex; flex-direction: column; gap: 2px; }
.nb-label { font-size: 11px; font-weight: 700; color: var(--text-3); }
.nb-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: 13px; }

/* 내 노트 (학생) */
.nt-photos { display: flex; flex-wrap: wrap; gap: var(--gap); }
.nt-thumb { position: relative; width: 96px; height: 128px; border-radius: var(--r-control); overflow: hidden; border: 1px solid var(--line); background: var(--surface-3); display: grid; place-items: center; font-size: 11px; color: var(--text-3); }
.nt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nt-thumb.is-loading { animation: pulse 1.2s ease-in-out infinite; }
.nt-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; font-size: 15px; line-height: 1;
  transition: transform var(--dur) ease-out, background var(--dur) ease-out; }
.nt-del:hover { background: var(--danger); transform: scale(1.08); }
.nt-add { width: 96px; height: 128px; border-radius: var(--r-control); border: 1px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-2); font-size: 12px; transition: border-color var(--dur) ease-out, color var(--dur) ease-out, transform var(--dur) ease-out; }
.nt-add b { font-size: 24px; font-weight: 400; line-height: 1; }
.nt-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
.nt-add:active:not(:disabled) { transform: scale(.98); }
.nt-add:disabled { opacity: .5; cursor: not-allowed; }
.nt-write { display: flex; flex-direction: column; gap: var(--gap); }
.nt-area { width: 100%; height: auto; min-height: 64px; padding: 8px 10px; line-height: 1.6; resize: vertical; }
.nt-foot { flex-wrap: wrap; }
.nt-edit, .nt-hold { padding: 8px 12px; border-radius: var(--r-control); background: var(--danger-weak); color: var(--danger); font-size: 12.5px; display: flex; gap: var(--gap); flex-wrap: wrap; }
.nt-comment { padding: var(--gap); border-radius: var(--r-control); background: var(--accent-weak); font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.nt-comment b { font-size: 11px; color: var(--accent-text); }
:root[data-theme="dark"] .nt-comment b { color: var(--accent); }
.nt-guest { color: var(--text-2); }
.nt-list { display: flex; flex-direction: column; gap: var(--gap); }
.nt-item { border: 1px solid var(--line); border-radius: var(--r-surface); padding: var(--gap); display: flex; flex-direction: column; gap: var(--gap); }
.nt-item[data-status="held"] { border-color: var(--danger); }
.nt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.nt-meta > b { font-size: 13.5px; }
.nt-date { font-size: 11px; color: var(--text-3); }
.nt-acts { display: flex; gap: 6px; justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) { .nt-item, .nt-write .field { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 40ms); } }

/* 노트 첨삭 */
.rv-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); overflow: auto; }
.rv-card { border: 1px solid var(--line); border-radius: var(--r-surface); overflow: hidden; display: flex; flex-direction: column; background: var(--surface);
  transition: transform var(--dur) ease-out, box-shadow var(--dur) ease-out, border-color var(--dur) ease-out; }
.rv-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--accent); }
.rv-thumb { width: 100%; height: 150px; object-fit: cover; background: var(--surface-3); display: block; }
.rv-text { padding: var(--gap); font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.rv-body { padding: var(--gap); display: flex; flex-direction: column; gap: 6px; }
.rv-title { display: flex; align-items: baseline; gap: 6px; }
.rv-title span { font-size: 11px; color: var(--text-3); }
.rv-book { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rv-modal { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap); }
.rv-note { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.rv-form { display: flex; flex-direction: column; gap: var(--gap); }
.rv-form textarea { width: 100%; height: auto; padding: 8px 10px; line-height: 1.6; resize: vertical; }
.rv-stickers { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-st { height: 28px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text-2);
  transition: border-color var(--dur) ease-out, background var(--dur) ease-out, color var(--dur) ease-out, transform var(--dur) ease-out; }
.rv-st:hover { border-color: var(--accent); }
.rv-st:active { transform: scale(.97); }
.rv-st[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
.rv-st:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) { .rv-modal { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .rv-card, .gl-card { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 40ms); } }

/* 노트 갤러리 */
.gl-bar { flex-wrap: wrap; align-items: center; }
.gl-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.gl-card { border: 1px solid var(--line); border-radius: var(--r-surface); overflow: hidden; background: var(--surface); display: flex; flex-direction: column;
  transition: transform var(--dur) ease-out, box-shadow var(--dur) ease-out; }
.gl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.gl-open-btn { display: block; width: 100%; }
.gl-open-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gl-img { display: block; width: 100%; height: 190px; object-fit: cover; background: var(--surface-3); }
.gl-text { padding: var(--gap); text-align: left; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow: hidden; color: var(--text); }
.gl-body { padding: var(--gap); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.gl-title { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.gl-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); width: 100%; }
.gl-like { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: var(--r-pill); color: var(--text-2); font-size: 12px;
  transition: color var(--dur) ease-out, background var(--dur) ease-out, transform var(--dur) ease-out; }
.gl-like svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur) ease-out; }
.gl-like:hover { background: var(--surface-3); }
.gl-like:active svg { transform: scale(.85); }
.gl-like[aria-pressed="true"] { color: var(--danger); }
.gl-like[aria-pressed="true"] svg { fill: currentColor; }
.gl-like:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gl-open { display: flex; flex-direction: column; gap: var(--gap); }

/* 공지·자료실 */
.bd-list { display: flex; flex-direction: column; overflow: auto; }
.bd-row { width: 100%; display: flex; align-items: center; gap: var(--gap); padding: 11px 6px; border-top: 1px solid var(--line-soft); text-align: left; min-width: 0;
  transition: background var(--dur) ease-out; }
.bd-list li:first-child .bd-row { border-top: 0; }
.bd-row:hover { background: var(--surface-2); }
.bd-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bd-title { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.bd-view { display: flex; flex-direction: column; gap: var(--gap); }
.bd-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.bd-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; font-size: 13.5px; }
.bd-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-control); overflow: hidden; background: #000; }
.bd-video iframe, .bd-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bd-file { align-self: flex-start; gap: var(--gap); }
.bd-answer { padding: var(--gap); border-radius: var(--r-control); background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.bd-answer textarea, .bd-form textarea { width: 100%; height: auto; padding: 8px 10px; line-height: 1.6; resize: vertical; }
.bd-form { display: flex; flex-direction: column; gap: var(--gap); }
.bd-checks { display: flex; gap: var(--gap); flex-wrap: wrap; font-size: 12.5px; }
.bd-checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
@media (max-width: 560px) { .bd-row { flex-wrap: wrap; } .bd-title { flex-basis: 100%; order: -1; white-space: normal; } }
@media (prefers-reduced-motion: no-preference) { .bd-list li { animation: row-in .25s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 30ms); } }

/* 진로 흥미검사 */
.cr { display: flex; flex-direction: column; gap: var(--gap); max-width: 760px; }
.cr-intro h2 { font-size: 20px; letter-spacing: -.01em; }
.cr-intro p { color: var(--text-2); line-height: 1.7; }
.cr-acts { display: flex; gap: var(--gap); align-items: center; }
.cr-progress { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.cr-progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--w)); transition: transform .4s var(--ease); }
.cr-item { border: 0; padding: 12px 0; margin: 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.cr-item legend { font-size: 14px; font-weight: 600; line-height: 1.5; padding: 0; float: left; width: 100%; }
.cr-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); clear: both; }
.cr-choice { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer;
  font-size: 13px; font-weight: 600; transition: border-color var(--dur) ease-out, background var(--dur) ease-out, transform var(--dur) ease-out; }
.cr-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cr-choice:hover { border-color: var(--accent); }
.cr-choice:active { transform: scale(.98); }
.cr-choice:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
.cr-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cr-top { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cr-card p { color: var(--text-2); line-height: 1.6; }
.cr-name { font-size: 22px; font-weight: 800; color: var(--accent-text); letter-spacing: -.01em; }
:root[data-theme="dark"] .cr-name { color: var(--accent); }
.cr-majors { display: flex; flex-wrap: wrap; gap: 6px; }
@media (prefers-reduced-motion: no-preference) { .cr-item, .cr-card { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 50ms); } }

/* 코스 승급 안내 (대시보드) */
.promo { border-color: var(--accent); }
.promo-list { display: flex; flex-direction: column; }
.promo-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap); padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.promo-row:first-child { border-top: 0; }
.promo-move { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .promo-row { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 40ms); } }
.pf-career { flex-direction: row; align-items: center; flex-wrap: wrap; }
.pf-career .chip { margin-left: 4px; }

/* 독서노트 양식지 (인쇄용 A4) */
.sh { max-width: 820px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: var(--gap); }
.sh-bar { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.sh-paper { background: #fff; color: #18181b; border: 1px solid var(--line); border-radius: var(--r-surface); padding: 36px 40px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow-1); }
.sh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid #18181b; padding-bottom: 12px; }
.sh-kind { font-size: 12px; font-weight: 700; color: var(--accent-text); letter-spacing: .02em; }
.sh-head h1 { font-size: 22px; line-height: 1.3; margin-top: 2px; }
.sh-sub { font-size: 12px; color: #52525b; }
.sh-code { text-align: right; flex-shrink: 0; border: 1.5px solid #18181b; border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; }
.sh-code span { font-size: 10px; color: #52525b; }
.sh-code b { font-family: var(--mono); font-size: 16px; letter-spacing: .03em; }
.sh-who { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 16px; }
.sh-who div { display: flex; align-items: flex-end; gap: 8px; font-size: 12px; color: #52525b; }
.sh-who i { flex: 1; border-bottom: 1px solid #a1a1aa; height: 20px; }
.sh-field h2 { font-size: 13.5px; margin-bottom: 4px; }
.sh-lines { height: calc(var(--rows) * 30px); background-image: repeating-linear-gradient(to bottom, transparent 0 29px, #d4d4d8 29px 30px); }
.sh-foot { font-size: 11px; color: #71717a; border-top: 1px dashed #d4d4d8; padding-top: 8px; }
/* 교과 양식지 칸 (10/12): 객관식 ①~⑤ · O/X · 번호 단답 · 개념 표 · 빈 네모 */
.sh-mc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 16px; }
.sh-mc div { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #e4e4e7; }
.sh-mc b { width: 26px; font-variant-numeric: tabular-nums; }
.sh-mc span { font-size: 15px; color: #3f3f46; }
.sh-ox { grid-template-columns: repeat(5, 1fr); }
.sh-ox span { width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1px solid #a1a1aa; border-radius: 50%; font-size: 12px; }
.sh-short { display: flex; flex-direction: column; }
.sh-short div { display: flex; align-items: flex-end; gap: 8px; height: 30px; font-size: 13px; }
.sh-short b { width: 26px; font-variant-numeric: tabular-nums; }
.sh-short i { flex: 1; border-bottom: 1px solid #a1a1aa; height: 22px; }
.sh-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.sh-table th { background: #f4f4f5; font-weight: 600; padding: 6px; border: 1px solid #a1a1aa; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sh-table th:first-child { width: 26%; }
.sh-table td { height: 34px; border: 1px solid #a1a1aa; }
.sh-box { height: calc(var(--rows) * 30px); border: 1px solid #a1a1aa; border-radius: 6px; }
@media (max-width: 560px) { .sh-mc { grid-template-columns: repeat(2, 1fr); } .sh-ox { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sh-paper { padding: 20px 16px; } .sh-head { flex-direction: column; } .sh-code { text-align: left; } }
@media print {
  @page { size: A4; margin: 14mm; }
  .sh-bar { display: none !important; }
  .sh { padding: 0; max-width: none; }
  .sh-paper { border: 0; box-shadow: none; padding: 0; }
  .sh-lines { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 페이지 이동: 같은 사이트 안에서는 이전 화면을 잠깐 붙잡고 부드럽게 넘긴다(빈 화면·검은 화면이 번쩍이지 않게) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- 학원 전환(오른쪽 위) · 월 달력 · 학원 고르기 ---------- */
.acad-switch { width: auto; min-width: 150px; max-width: 220px; height: 32px; font-weight: 600; cursor: pointer; background-color: var(--surface); color: var(--text); }
.acad-switch:hover:not(:disabled) { border-color: var(--accent); }
.acad-switch:disabled { opacity: 1; cursor: default; }
.mp .dp-input-row { gap: 4px; }
.mp-btn { width: 150px; }
.mp-btn > span:first-child { display: inline-flex; color: var(--text-3); }
.mp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mp-month { height: 36px; }
.acad-choose { align-items: center; text-align: center; padding: 32px var(--gap); }
.acad-choose-list { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; }
@media (prefers-reduced-motion: no-preference) { .acad-choose-list .btn { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 40ms); } }
.acad-table th, .acad-table td { padding: 8px 10px; text-align: center; white-space: nowrap; }
.acad-table td:first-child { text-align: left; }
.rp-form, .nt-form { display: flex; flex-direction: column; gap: var(--gap); }
.rp-dates .dp { width: 170px; }
@media (max-width: 560px) { .acad-switch { min-width: 0; max-width: 130px; } .rp-dates { flex-wrap: wrap; } }


/* ---------- 5단계: 발송함 · 정산 · 구술 ---------- */
.msg-notice { font-size: 12.5px; color: var(--text-2); line-height: 1.6; padding: var(--gap); border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line-soft); }
.card.msg-notice { padding: var(--gap); }
.snd-list { display: flex; flex-direction: column; max-height: 260px; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--r-control); }
.snd-row { display: flex; align-items: center; gap: var(--gap); padding: 8px 10px; border-top: 1px solid var(--line-soft); font-size: 12.5px; flex-wrap: wrap; }
.snd-row:first-child { border-top: 0; }
.snd-row .btn { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) { .snd-row { animation: row-in .25s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 30ms); } }
.bill-sum { display: flex; gap: 6px; flex-wrap: wrap; align-self: flex-end; }
.sp-card { gap: var(--gap); }
.sp-stage { display: flex; flex-direction: column; align-items: center; gap: var(--gap); padding: 18px 0 6px; }
.sp-rec { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on, #fff); font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform var(--dur) ease-out, background var(--dur) ease-out, box-shadow var(--dur) ease-out; }
.sp-rec:hover:not(:disabled) { transform: translateY(-1px); }
.sp-rec:active:not(:disabled) { transform: scale(.97); }
.sp-rec:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sp-rec:disabled { opacity: .5; cursor: not-allowed; }
.sp-rec[data-on="true"] { background: var(--danger); box-shadow: 0 6px 18px color-mix(in srgb, var(--danger) 35%, transparent); }
.sp-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.sp-rec[data-on="true"] .sp-dot { border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { .sp-rec[data-on="true"] .sp-dot { animation: pulse 1s ease-in-out infinite; } }
.sp-clock { font-size: 28px; font-weight: 800; letter-spacing: .02em; }
.sp-preview { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; padding: 10px; border-radius: var(--r-control); background: var(--surface-2); }
.nt-item audio, .sp-preview audio { width: min(100%, 420px); height: 36px; }
.or-form { display: flex; align-items: flex-end; gap: var(--gap); flex-wrap: wrap; }
.rpt-table tfoot th { padding: 8px; border-top: 2px solid var(--line); text-align: left; }

/* 보고서 학생 칸: 반 이름이 길어도 학생 이름은 한 줄 */
.rp-stu > span:nth-of-type(1) { white-space: nowrap; font-weight: 600; }
.rp-stu .field-help { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= v22: 출결·과제·마라톤·오답·레벨 테스트·학부모 화면 ================= */
.att-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.att-clock { font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.att-tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.att-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 96px; padding: var(--gap); border-radius: var(--r-surface);
  border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer;
  transition: transform var(--dur) ease-out, border-color var(--dur) ease-out, background-color var(--dur) ease-out; }
.att-tile b { font-size: 20px; letter-spacing: -.01em; }
.att-tile span { font-size: 12.5px; color: var(--text-3); }
.att-tile:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.att-tile:active:not(:disabled) { transform: scale(.97); }
.att-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.att-tile:disabled { cursor: default; }
.att-tile[data-state="in"] { background: var(--ok-weak); border-color: var(--ok); }
.att-tile[data-state="in"] span { color: var(--ok); }
.att-tile[data-state="out"] { opacity: .55; }
body.att-tablet .att-tile b { font-size: 22px; }

.st-info { gap: 6px; }
.st-info-row { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; font-size: 12.5px; }
.st-info-k { width: 84px; flex: none; color: var(--text-3); font-weight: 600; }
.st-link { color: var(--accent-text); font-weight: 600; }

.pr-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pr-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.pr-list li:first-child { border-top: 0; }
.pr-list li span { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.pr-note { flex-wrap: wrap; }
.pr-note p { flex-basis: 100%; margin: 4px 0 0; color: var(--text-2); line-height: 1.6; }
.pr-att { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.pr-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line-soft); font-size: 11px; }
.pr-day b { font-size: 15px; }
.pr-day small { color: var(--text-3); font-size: 10px; }
.pr-day[data-s="ok"] { background: var(--ok-weak); color: var(--ok); }
.pr-day[data-s="late"] { background: var(--accent-weak); color: var(--accent-text); }
.pr-day[data-s="no"] { background: var(--danger-weak); color: var(--danger); }

.mr-road { position: relative; height: 18px; margin: 18px 13px 6px; border-radius: 9px; background: var(--surface-3); }
.mr-fill { position: absolute; inset: 0; border-radius: 9px; background: var(--accent); transform-origin: left; transform: scaleX(var(--w)); }
.mr-runner { position: absolute; top: 50%; left: calc(var(--w) * 100%); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: var(--surface); border: 4px solid var(--accent); box-shadow: var(--shadow-1); }
.mr-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-3); }
.mr-badges { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mr-badge { display: flex; flex-direction: column; gap: 2px; padding: var(--gap); border-radius: var(--r-surface); border: 1px solid var(--line); background: var(--surface); }
.mr-badge b { font-size: 13.5px; }
.mr-badge span { font-size: 11.5px; color: var(--text-3); }
.mr-medal { width: 26px; height: 26px; margin-bottom: 4px; border-radius: 50%; background: var(--surface-3); }
.mr-badge[data-got="true"] { border-color: var(--accent); background: var(--accent-weak); }
.mr-badge[data-got="true"] .mr-medal { background: radial-gradient(circle at 35% 35%, #fde68a, var(--accent)); }
.mr-badge[data-got="false"] { opacity: .6; }
.mr-rank { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mr-rank li { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--gap); padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.mr-rank li:first-child { border-top: 0; }
.mr-rank li[data-me="true"] { color: var(--accent-text); font-weight: 700; }

.wr-body { display: flex; flex-direction: column; gap: var(--gap); }
.wr-card { gap: var(--gap); transition: opacity .4s ease-out; }
.wr-card.is-done { opacity: .45; }
.wr-q { font-size: 14px; font-weight: 600; line-height: 1.6; }
.wr-choices, .pl-choices { display: flex; flex-direction: column; gap: var(--gap); }
.wr-choice { padding: 9px 12px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: border-color var(--dur) ease-out, background-color var(--dur) ease-out, transform var(--dur) ease-out; }
.wr-choice:hover:not(:disabled) { border-color: var(--accent); }
.wr-choice:active:not(:disabled) { transform: scale(.99); }
.wr-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wr-choice[data-state="ok"] { background: var(--ok-weak); border-color: var(--ok); color: var(--ok); font-weight: 700; }
.wr-choice[data-state="no"] { background: var(--danger-weak); border-color: var(--danger); color: var(--danger); }
.wr-result { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.wr-result:empty { display: none; }   /* 채점 전에는 빈 칸이다. 그대로 두면 카드 아래에 간격이 한 번 더 붙는다 */
.wr-result span { color: var(--text-2); }
.wr-vocab { display: flex; flex-direction: column; }
.wr-word { display: grid; grid-template-columns: minmax(80px, auto) 1fr auto auto; align-items: center; gap: var(--gap); padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.wr-word:first-child { border-top: 0; }
.pl-choice { justify-content: flex-start; height: auto; min-height: 40px; padding: 8px 12px; text-align: left; font-weight: 500; white-space: normal; }

.home-banner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--gap); border-color: var(--accent); background: var(--accent-weak); }
.privacy-link { display: block; padding: 4px 0; text-align: center; font-size: 11px; color: var(--text-3); transition: color var(--dur) ease-out; }
.privacy-link:hover { color: var(--text-2); text-decoration: underline; }
.privacy .rpt-card p { margin: 0; line-height: 1.75; color: var(--text-2); }
.imp-preview { display: flex; flex-direction: column; gap: var(--gap); }

@media (max-width: 560px) {
  .wr-word { grid-template-columns: 1fr auto; }
  .wr-word > span { grid-column: 1 / -1; }
  .att-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .att-tile, .mr-badge, .wr-card, .wr-word { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 35ms); }
  .mr-fill { animation: bar-grow-x .9s var(--ease) both; }
  .mr-runner { animation: mr-pop .3s .8s var(--ease) both; }
}
@keyframes mr-pop { from { opacity: 0; transform: scale(.4); } }

/* ---------- 표 위 검색·필터 (createTable tools) ---------- */
.dt-box { display: flex; flex-direction: column; gap: var(--gap); flex: 0 1 auto; min-height: 0; min-width: 0; }
.dt-tools { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.dt-search { width: 220px; }
.dt-count { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
@media (max-width: 720px) {
  .dt-search { width: 100%; }
  .dt-tools > .dd { flex: 1 1 140px; }
}

/* ---------- 버튼·칩 글자 세로 중앙 ----------
   Pretendard 는 한글을 줄 상자 가운데보다 0.5~1.5px 위에 그린다(10/1 화면 픽셀로 실측).
   위쪽 1px 여백으로 한글 잉크 중심을 버튼 중심에 맞춘다(실측 결과 ±0.3px 안). 아이콘만 있는 버튼은 이미 정중앙이라 뺀다 */
.btn:not(.btn-icon), .chip, .seg-btn { padding-top: 1px; }
.btn-sm:not(.btn-icon), .seg-btn, .tab-btn { padding-top: 2px; }   /* 작은 글자·낮은 버튼은 더 뜬다(실측 -0.6~-0.9px) */

/* 펼침 창을 body 로 꺼내 띄운다(components.js floatPop). 모달(100) 위, 알림(200) 아래 */
.dd-pop.pop-float, .dp-pop.pop-float { position: fixed; z-index: 150; top: 0; left: 0; }
.pop-float[data-up="true"] { transform-origin: bottom center; }

/* 입장 화면 묶음 이름 */
.enter-group { width: 100%; max-width: 780px; font-size: 12px; font-weight: 700; color: var(--text-3); margin-bottom: -18px; }

/* 카드 머리 줄: 자리가 모자라면 다음 줄로 넘긴다(휴대폰에서 제목이 '학/생/명/부'처럼 세로로 꺾이거나 버튼이 화면 밖으로 밀리지 않게) */
.card-head { flex-wrap: wrap; row-gap: var(--gap); }
.card-title { white-space: nowrap; }
.card-head > .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.card-head > .seg::-webkit-scrollbar { display: none; }
.pr-att > .field-help { grid-column: 1 / -1; }

/* ---------- v23: 회차 제외쌍 · 업로드 양식 점검 ---------- */
.q-pair-cell { max-width: 100%; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--accent-weak); color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.q-pair-cell[data-empty="true"] { background: transparent; color: var(--text-3); font-weight: 500; }
.q-pair-cell:hover { border-color: var(--accent); }
.q-pair-cell:active { transform: scale(.97); }
.q-pair-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.import-files { display: flex; flex-direction: column; gap: 6px; }
.import-files:empty { display: none; }
.import-file { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); }
.import-file-head { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; font-size: 13px; }
.import-file-head b { overflow-wrap: anywhere; }

.pair-list { display: flex; flex-direction: column; gap: 6px; overflow: auto; min-height: 120px; max-height: 46vh; padding-right: 2px; }
.pair-row { display: flex; flex-direction: column; gap: 6px; padding: var(--gap); border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); transition: border-color .18s var(--ease); }
.pair-row:hover { border-color: var(--text-3); }
.pair-items { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.pair-q { font-size: 13px; line-height: 1.45; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pair-x { color: var(--accent-text); font-weight: 700; }
.pair-meta { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.pair-why { flex: 1 1 200px; min-width: 0; color: var(--text-2); font-size: 12.5px; }
.pair-add { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: flex-end; padding-top: var(--gap); border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .pair-items { grid-template-columns: 1fr; gap: 4px; }
  .pair-x { transform: rotate(90deg); justify-self: start; }
  .pair-add .dd { width: 100% !important; }
  .pair-add .field { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .pair-row, .import-file { animation: row-in .25s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
}

/* ---------- v24: 대량 업로드 진행 · 판 이력 ---------- */
.import-progress { height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.import-progress-bar { height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .3s var(--ease); }
.import-files { max-height: 30vh; overflow: auto; flex: none; }
.import-summary, .import-progress { flex: none; }
.import-skipped summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); padding: 2px 0; }
.bank-list { display: flex; flex-direction: column; gap: var(--gap); overflow: auto; max-height: 58vh; }
.bank-row { border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--gap); background: var(--surface); }
.bank-row[data-live="true"] { border-color: var(--ok); }
.bank-head { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.bank-items { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); max-height: 40vh; overflow: auto; }
.bank-item { display: grid; grid-template-columns: 44px auto minmax(0, 1fr) auto; gap: var(--gap); align-items: center; font-size: 12.5px; padding: 3px 0; }
.bank-no { color: var(--text-2); font-variant-numeric: tabular-nums; }
.bank-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-ans { color: var(--text-3); white-space: nowrap; }
@media (max-width: 640px) {
  .bank-item { grid-template-columns: 40px minmax(0, 1fr); }
  .bank-item .chip, .bank-ans { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .bank-row { animation: row-in .25s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
}
@media (prefers-reduced-motion: reduce) { .import-progress-bar { transition: none; } }

/* ---------- v25: 글쓰기 시간 ---------- */
.rpt-stats:has(> :nth-child(4)) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 480px) { .rpt-stats:has(> :nth-child(4)) > :first-child { grid-column: auto; } }
.wr-list, .wr-board { display: flex; flex-direction: column; gap: var(--gap); }
.wr-board { max-height: 360px; overflow: auto; }
.wr-row { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; padding: var(--gap); border: 1px solid var(--line);
  border-radius: var(--r-control); background: var(--surface); transition: border-color .18s var(--ease); }
.wr-row[data-status="writing"] { border-color: var(--accent); background: var(--accent-weak); }
.wr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.wr-row[data-status="writing"] .wr-dot { background: var(--accent); }
.wr-row[data-status="done"] .wr-dot { background: var(--ok); }
.wr-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.wr-info b, .wr-info a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-clock { font-size: 20px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-row[data-status="writing"] .wr-clock { color: var(--accent-text); }
.wr-time { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.wr-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.wr-new { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: flex-end; }
.wr-list:not([hidden]) + .wr-new { padding-top: var(--gap); border-top: 1px solid var(--line); }
.wr-done { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wr-done:empty { display: none; }
@media (max-width: 640px) {
  .wr-acts { width: 100%; }
  .wr-acts .btn { flex: 1 1 0; }
  .wr-time { align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .wr-row { animation: row-in .25s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .wr-row[data-status="writing"] .wr-dot { animation: wr-pulse 1.6s ease-in-out infinite; }
}
@keyframes wr-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* ---------- v26: 출제 설정 ---------- */
.qr-lines { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--gap); margin: 0; font-size: 13px; }
.qr-lines dt { color: var(--text-2); font-weight: 600; }
.qr-lines dd { margin: 0; }
.qr-card .qr-lines { margin-top: 4px; }
.qr-form { display: flex; flex-direction: column; gap: var(--gap); }
.qr-form .input.num { width: 80px; }
.qr-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.qr-level { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.qr-level .input.num { width: 100%; }
.qr-switch { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.qr-switch .switch:disabled { opacity: .45; }
@media (max-width: 480px) {
  .qr-lines { grid-template-columns: 1fr; gap: 2px; }
  .qr-lines dd { margin-bottom: 8px; }
  .qr-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .qr-lines dt, .qr-lines dd { animation: row-in .25s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
}

/* ---------- 글쓰기 큰 시계 (교실 뒤 3~4m 에서도 보이게) ---------- */
.wr-hero { display: flex; flex-direction: column; align-items: center; gap: var(--gap); padding: 20px clamp(14px, 3vw, 32px) 24px;
  border: 2px solid var(--accent); border-radius: var(--r-surface); background: var(--accent-weak); text-align: center; }
.wr-hero-top { display: flex; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; text-align: left; }
.wr-hero-live { display: inline-flex; align-items: center; gap: var(--gap); padding: 4px 12px; border-radius: 999px;
  background: var(--accent); color: var(--accent-on, #fff); font-size: 14px; font-weight: 700; }
.wr-hero-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.wr-hero-title { font-size: clamp(16px, 2vw, 22px); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-hero-clock { font-size: clamp(64px, 13vw, 200px); font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--accent-text); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; padding: 6px 0; }
.wr-hero-sub { color: var(--text-2); font-size: 14px; }
.wr-hero-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.btn-lg { height: 48px; padding: 0 26px; font-size: 16px; font-weight: 700; min-width: 180px; }
.wr-hero-full { flex: none; }
.wr-hero:fullscreen { justify-content: center; gap: 4vh; padding: 5vh 5vw; border: 0; border-radius: 0; background: var(--bg, var(--surface)); }
.wr-hero:fullscreen .wr-hero-clock { font-size: min(24vw, 360px); }
.wr-hero:fullscreen .wr-hero-title { font-size: clamp(22px, 3vw, 40px); }
.wr-hero:fullscreen .wr-hero-sub { font-size: 18px; }
@media (max-width: 640px) {
  .wr-hero-acts .btn-lg { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .wr-hero:not([hidden]) { animation: wr-hero-in .3s var(--ease) both; }
  .wr-hero-live::before { animation: wr-pulse 1.6s ease-in-out infinite; }
}
@keyframes wr-hero-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

/* 표 안의 글자 링크 버튼(올린 책 목록의 책제목 등) */
.link-btn { max-width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; transition: color .18s var(--ease), text-decoration-color .18s var(--ease); }
.link-btn:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- v27: 구간 독서 기록 창 · 진단 푸는 중 ---------- */
.tm-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .tm-summary { grid-template-columns: 1fr 1fr; } }
.tm-record { display: flex; flex-direction: column; align-items: center; gap: var(--gap); text-align: center; padding: 6px 0; }
.tm-record-time { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; color: var(--text-2); }
.tm-record-time b { font-size: 34px; color: var(--text); font-variant-numeric: tabular-nums; }
.tm-sum-clock { font-size: clamp(48px, 12vw, 72px); color: var(--accent-text); }
.wr-row[data-status="diag"] { border-color: var(--ok); background: var(--ok-weak); }
.wr-row[data-status="diag"] .wr-dot { background: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .tm-record > * { animation: row-in .25s var(--ease) both; }
  .wr-row[data-status="diag"] .wr-dot { animation: wr-pulse 1.6s ease-in-out infinite; }
}

/* ---------- 어휘 놀이 (카드 맞추기 · OX) ---------- */
.vg { display: flex; flex-direction: column; gap: var(--gap); }
.vg-stage { min-height: 260px; }
.vg-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.vg-col { display: flex; flex-direction: column; gap: var(--gap); }
.vg-card { min-height: 52px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease), opacity .3s var(--ease); }
.vg-word { font-weight: 700; font-size: 16px; text-align: center; }
.vg-card:hover { border-color: var(--accent); }
.vg-card:active { transform: scale(.97); }
.vg-card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-weak); }
.vg-card[data-done] { border-color: var(--ok); background: var(--ok-weak); opacity: .55; cursor: default; }
.vg-card[data-wrong] { border-color: var(--danger); animation: vg-shake .4s var(--ease); }
@keyframes vg-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.vg-ox { display: flex; flex-direction: column; align-items: center; gap: var(--gap); text-align: center; }
.vg-progress { font-size: 12px; color: var(--text-3); }
.vg-q { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 15px; }
.vg-q b { font-size: 26px; }
.vg-qm { font-size: 17px; font-weight: 600; line-height: 1.45; }
.vg-oxbtns { display: flex; gap: var(--gap); }
.vg-o, .vg-x { width: 96px; height: 96px; border-radius: 50%; border: 3px solid currentColor; background: var(--surface);
  font: inherit; font-size: 44px; font-weight: 800; cursor: pointer; transition: transform .18s var(--ease), background-color .18s var(--ease); }
.vg-o { color: var(--ok); } .vg-x { color: var(--danger); }
.vg-o:hover:not(:disabled), .vg-x:hover:not(:disabled) { transform: scale(1.05); }
.vg-o:active, .vg-x:active { transform: scale(.95); }
.vg-o:disabled, .vg-x:disabled { opacity: .45; cursor: default; }
.vg-fb { min-height: 22px; font-weight: 700; }
.vg-fb[data-good="true"] { color: var(--ok); } .vg-fb[data-good="false"] { color: var(--danger); }
.vg-done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap); min-height: 240px; text-align: center; }
.vg-done-title { font-size: 20px; font-weight: 800; }
.vg-done-acts { display: flex; gap: var(--gap); flex-wrap: wrap; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .vg-card { animation: row-in .25s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .vg-q, .vg-done { animation: wr-hero-in .3s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) { .vg-card[data-wrong] { animation: none; } }

/* ---------- v28: 책장 ---------- */
.sf-wrap { display: flex; flex-direction: column; gap: var(--gap); }
.sf-track { display: flex; flex-direction: column; gap: var(--gap); }
.sf-lap { display: grid; grid-template-columns: 52px repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.sf-lap-name { font-size: 12px; font-weight: 700; color: var(--text-2); }
.sf-step { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 4px 6px; border-radius: var(--r-control);
  border: 1px solid var(--line); background: var(--surface); font-size: 12px; text-align: center; color: var(--text-3);
  transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.sf-step[data-state="done"] { background: var(--ok-weak); border-color: transparent; color: var(--ok); font-weight: 600; }
.sf-step[data-state="now"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); font-weight: 700; }
.sf-note { padding: var(--gap); border-radius: var(--r-control); background: var(--surface-2); font-size: 14px; line-height: 1.5; }
.sf-shelf { margin-top: 4px; }
.sf-meter { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.sf-meter > span { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform .5s var(--ease); }
.sf-groups { display: flex; flex-direction: column; gap: var(--gap); }
.sf-group h3 { margin: 0 0 var(--gap); font-size: 14px; }
.sf-editor { display: flex; flex-direction: column; gap: var(--gap); }
.sf-sec { display: flex; flex-direction: column; gap: var(--gap); padding-bottom: var(--gap); border-bottom: 1px solid var(--line); }
.sf-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.sf-sec-head { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.sf-row { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; }
.sf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.sf-list li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; gap: var(--gap); align-items: center; font-size: 13px; }
.sf-list li a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-chip { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.sf-chip:hover { border-color: var(--accent); }
.sf-chip:active { transform: scale(.96); }
.sf-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
.sf-alert { border-color: var(--danger); }
.sf-bell { width: 18px; height: 18px; border-radius: 50%; background: var(--danger); flex: none;
  -webkit-mask: radial-gradient(circle at 50% 40%, #000 45%, transparent 47%); mask: radial-gradient(circle at 50% 40%, #000 45%, transparent 47%); }
@media (max-width: 640px) { .sf-lap { grid-template-columns: 40px repeat(3, minmax(0, 1fr)); } .sf-step { font-size: 10.5px; } .sf-list li { grid-template-columns: 60px minmax(0, 1fr) auto; } .sf-list li .field-help { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .sf-step { animation: row-in .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
  .sf-step[data-state="now"] { animation: row-in .3s var(--ease) both, sf-pulse 2s ease-in-out .6s infinite; }
  .sf-alert .sf-bell { animation: sf-ring 1.8s ease-in-out infinite; }
  .sf-list li { animation: row-in .25s var(--ease) both; animation-delay: calc(min(var(--i, 0), 12) * 30ms); }
}
@keyframes sf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }
@keyframes sf-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 85% { transform: rotate(-12deg); } 92% { transform: rotate(6deg); } }

/* ---------- v29: 교실 사진 격자 · 우리 아이들 ---------- */
.kd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kd-tile { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--r-surface); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.kd-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2, var(--shadow-1)); }
.kd-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kd-tile[data-now="writing"] { border-color: var(--accent); }
.kd-tile[data-now="diag"] { border-color: var(--ok); }
.kd-tile[data-now="idle"] { opacity: .78; }
.kd-face { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-control); overflow: hidden; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; }
.kd-face img { width: 100%; height: 100%; object-fit: cover; }
.kd-initial { font-size: 30px; font-weight: 800; color: var(--text-2); }
.kd-tile[data-now="writing"] .kd-face::after, .kd-tile[data-now="diag"] .kd-face::after { content: ''; position: absolute; top: 8px; right: 8px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.kd-tile[data-now="diag"] .kd-face::after { background: var(--ok); }
.kd-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.kd-name b { font-size: 14px; white-space: nowrap; }
.kd-name span { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-status { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-tile[data-now="writing"] .kd-status { color: var(--accent-text); font-weight: 700; }
.kd-tile[data-now="diag"] .kd-status { color: var(--ok); font-weight: 700; }
.kd-bar { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; }
.kd-lv { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kd-trend { display: inline-flex; align-items: center; gap: var(--gap); padding: 2px 4px; border: 0; border-radius: var(--r-control); background: none; cursor: pointer;
  transition: background-color .18s var(--ease); }
.kd-trend:hover { background: var(--surface-2); }
.kd-spark { width: 84px; height: 26px; }
.kd-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kd-spark circle { fill: var(--accent); }
@media (max-width: 640px) { .kd-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } .kd-initial { font-size: 24px; } }
@media (prefers-reduced-motion: no-preference) {
  .kd-tile { animation: row-in .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
  .kd-tile[data-now="writing"] .kd-face::after, .kd-tile[data-now="diag"] .kd-face::after { animation: wr-pulse 1.6s ease-in-out infinite; }
}

/* ---------- v30: 선생님 ↔ 학생 대화 ---------- */
.ch-card { display: flex; min-height: 0; flex: 1 1 auto; height: auto;   /* 10/20: 화면 높이를 박지 않고 본문 남은 높이를 채운다(아래 빈칸) */ padding: 0; overflow: hidden; }
.ch-panel { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.ch-head { display: flex; align-items: baseline; gap: 10px; padding: var(--gap); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ch-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--gap); display: flex; flex-direction: column; gap: var(--gap); background: var(--surface-2); }
.ch-day { align-self: center; font-size: 11px; color: var(--text-3); background: var(--surface); padding: 2px 10px; border-radius: 999px; margin: 6px 0; }
.ch-msg { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: end; gap: 2px 6px; max-width: 78%; }
.ch-msg[data-mine="true"] { align-self: flex-end; justify-content: end; }
.ch-msg[data-mine="true"] .ch-bubble { order: 2; background: var(--accent); color: var(--accent-on, #fff); border-color: var(--accent); border-bottom-right-radius: 4px; }
.ch-msg[data-mine="true"] .ch-time { order: 1; text-align: right; }
.ch-msg[data-mine="false"] .ch-bubble { border-bottom-left-radius: 4px; }
.ch-who { grid-column: 1 / -1; font-size: 11px; color: var(--text-2); font-weight: 600; }
.ch-bubble { padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 6px; }
.ch-bubble img { display: block; max-width: min(260px, 60vw); max-height: 300px; border-radius: 10px; object-fit: cover; }
.ch-time { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.ch-msg[data-seen="true"] .ch-time::before { content: '읽음 '; color: var(--accent-text); font-weight: 600; }
.ch-compose { display: flex; gap: var(--gap); align-items: flex-end; padding: var(--gap); border-top: 1px solid var(--line); background: var(--surface); }
.ch-input { flex: 1; resize: none; height: 40px; min-height: 40px; max-height: 140px; line-height: 1.45; }
.ch-staff { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.ch-side { display: flex; flex-direction: column; gap: var(--gap); padding: 10px; border-right: 1px solid var(--line); min-height: 0; }
.ch-rooms { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ch-room { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border: 0; border-radius: var(--r-control);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .18s var(--ease); }
.ch-room:hover { background: var(--surface-2); }
.ch-room[aria-current="true"] { background: var(--accent-weak); }
.ch-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-2); }
.ch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ch-room-text { display: flex; flex-direction: column; min-width: 0; }
.ch-room-text span { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ch-room-time { font-size: 11px; color: var(--text-3); }
.ch-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ch-stage > .empty { margin: auto; }
.ch-back { display: none; margin: var(--gap); align-self: flex-start; }
@media (max-width: 760px) {
  .ch-staff { grid-template-columns: 1fr; }
  .ch-staff[data-open="true"] .ch-side { display: none; }
  .ch-staff:not([data-open="true"]) .ch-stage { display: none; }
  .ch-back { display: inline-flex; }
  .ch-side { border-right: 0; }
  .ch-msg { max-width: 88%; }
}
@media (prefers-reduced-motion: no-preference) {
  .ch-msg { animation: row-in .22s var(--ease) both; }
  .ch-room { animation: row-in .25s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
}

.ch-compose textarea.ch-input { height: 40px; min-height: 40px; padding-top: 9px; padding-bottom: 9px; }

/* v31 학생 상세 출결: 기간 요약 + 달력 */
.att-panel { display: flex; flex-direction: column; gap: var(--gap, 14px); }
.att-panel:not([hidden]) { display: flex; }
.att-range-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); padding: 0 var(--gap) var(--gap); }
.att-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--gap); padding: 0 var(--gap) var(--gap); }
.att-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--gap); border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line-soft);
  animation: att-in .24s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
.att-stat span { font-size: 12px; color: var(--text-2); }
.att-stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.att-stat[data-s="ok"] b { color: var(--ok); }
.att-stat[data-s="late"] b { color: var(--accent-text); }
.att-stat[data-s="no"] b { color: var(--danger); }
.att-stat[data-s="mk"] b { color: var(--info, var(--ok)); }
.att-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 var(--gap) var(--gap); }
.att-wd { text-align: center; font-size: 11px; color: var(--text-3); padding: 2px 0; }
.att-cell { min-height: 58px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border-radius: var(--r-control);
  background: var(--surface-2); border: 1px solid var(--line-soft); font-size: 11px; transition: background-color .2s ease-out; }
.att-cell b { font-size: 12px; font-variant-numeric: tabular-nums; }
.att-cell small { font-size: 10px; opacity: .85; font-variant-numeric: tabular-nums; }
.att-cell[data-today="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.att-cell[data-s="ok"] { background: var(--ok-weak); color: var(--ok); }
.att-cell[data-s="late"] { background: var(--accent-weak); color: var(--accent-text); }
.att-cell[data-s="no"] { background: var(--danger-weak); color: var(--danger); }
.att-cell[data-s="mk"] { background: var(--ok-weak); color: var(--ok); border-style: dashed; border-color: var(--ok); }
.att-cell[data-s="ex"] { color: var(--text-2); border-style: dashed; }
.pr-day[data-s="mk"] { background: var(--ok-weak); color: var(--ok); border-style: dashed; }
@keyframes att-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .att-cell { min-height: 46px; } .att-cell small { display: none; } }
@media (prefers-reduced-motion: reduce) { .att-stat { animation: none; } .att-cell { transition: none; } }

/* v31 날짜 칸: 달력 버튼을 입력 칸 안 오른쪽에 붙여 한 덩어리로 */
.dp:not(.mp) > .dp-input-row { position: relative; gap: 0; }
.dp:not(.mp) > .dp-input-row > .input { width: 100%; min-width: 128px; padding-right: 36px; }
.dp:not(.mp) > .dp-input-row > .btn-icon { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 28px; height: calc(100% - 6px); min-height: 0;
  border: 0; background: transparent; box-shadow: none; color: var(--text-3); transition: color .15s ease-out, background-color .15s ease-out; }
.dp:not(.mp) > .dp-input-row > .btn-icon:hover { color: var(--accent); background: var(--surface-2); }
.dp:not(.mp) > .dp-input-row > .btn-icon:active { transform: translateY(-50%) scale(.94); }

/* v31 학생 상세: 학부모 동의·학부모 화면·레벨 테스트를 머리 카드 안 한 줄로, 탭 줄은 스크롤해도 위에 붙는다 */
.card > .st-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px var(--gap); padding-top: 10px; border-top: 1px solid var(--line-soft); }
.card > .st-info .st-info-k { width: auto; margin-right: 2px; }
.st-tabbar { position: sticky; top: calc(-1 * var(--gap)); z-index: 5; margin: 0 calc(-1 * var(--gap)); padding: 8px var(--gap);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); }

/* v31 필터 줄: 이름표를 위에 따로 두지 않는다(검색칸·고르기 칸은 안에 '레벨 전체'처럼 이름이 보인다). 화면 읽기 프로그램용으로만 남긴다 */
.content .toolbar > .field:has(> input[type="search"], > .dd, > .dp) > .field-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.toolbar > .field { position: relative; }
.tb-check { display: inline-flex; align-items: center; gap: 6px; height: 32px; font-size: 12px; cursor: pointer; white-space: nowrap; }
/* 문제 풀기: 책 고르기는 남는 높이를 쓰되, 위에 과제·추천 카드가 있으면 제 높이를 가진다 */
.pick-card { flex: 1; min-height: 0; }
.pick-card.is-stacked { flex: 1 0 auto; min-height: min(640px, 85dvh); }
/* 책장 카드: 아랫줄은 한 줄로(줄바꿈 없이) */
.shelf-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap); flex: none; }
.home-pair > .card { min-width: 0; }
.toolbar.tb-inline { align-items: center; gap: var(--gap); }
.toolbar.tb-inline > .field-help { flex: 1 1 280px; margin: 0; }
.tb-label { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }

.toolbar .dp:not(.mp) .dp-input-row > .input { min-width: 0; width: 138px; }
/* 학생 상세 탭 내용: 화면 높이에 맞춰 줄이지 않는다(카드가 여러 개면 서로 눌려 겹쳤다). 페이지가 스크롤되고 탭 줄은 위에 붙는다 */
.st-tabbar ~ .tab-panel, .st-tabbar ~ .tab-panel > .card { flex: none; min-height: auto !important; }
.st-tabbar ~ .tab-panel .table-wrap { max-height: min(560px, 62dvh); }   /* 긴 표는 표 안에서 스크롤(머리줄은 붙어 있다) */
.ch-compose .btn { height: 40px; }   /* 입력 칸(40px)과 같은 높이 */

/* 테두리 두께는 1px 하나로. 지금 하는 일(글쓰기·진단)은 색과 바깥 선으로 강조해 칸 크기가 바뀌지 않게 */
.kd-tile[data-now="writing"] { box-shadow: 0 0 0 1px var(--accent); }
.kd-tile[data-now="diag"] { box-shadow: 0 0 0 1px var(--ok); }
/* 교실: 한 줄 가로 슬라이드 */
.kd-grid { grid-auto-flow: column; grid-auto-columns: 150px; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: 6px; }
.kd-grid > * { scroll-snap-align: start; }
/* 우리 아이들: 기간 줄을 표 도구 줄 안에 */
.dt-tools > .kd-bar { display: contents; }

/* 표: 꽉 찬 표는 마지막 줄 선이 바깥 테두리와 겹쳐 2px 진한 선이 됐다. 선을 그림자로 바꿔 꽉 차면 테두리에 가려지고, 빈 칸이 남으면 보인다 */
/* 마지막 줄도 보통 밑선. 표가 틀을 꽉 채우면 그 선이 틀 테두리(.table-frame::after, 내용 위에 그림)와 같은 자리에 겹쳐 한 줄로 보인다 */
/* 우리 아이들 이해도: 점수 칩 자리 너비를 고정해 추이 선이 줄마다 같은 곳에서 시작 */
.kd-score { display: inline-flex; justify-content: center; min-width: 72px; }
/* 교실 칸: 사진 아래 글 묶음. 안쪽 여백 8px · 사진과 글 8px · 두 줄 사이 2px 로 통일 */
.kd-tile { gap: var(--gap); padding: 8px; }
.kd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kd-name { line-height: 18px; align-items: center; }
.kd-status { line-height: 16px; }
/* 이해도 칸: [빈칸 | 점수 | 추이] 3칸 격자 — 점수 칩은 늘 칸 정가운데, 추이 선은 그 오른쪽 */
.kd-trend { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; width: 100%; padding: 2px 0; }
.kd-trend > .kd-spark { justify-self: start; width: 64px; }
.kd-score { min-width: 0; }

/* 스크롤바: 기본 회색 막대 대신 얇고 둥근 막대(밝기 따라 선 색) */
/* Chrome 은 scrollbar-width 가 있으면 아래 ::-webkit 모양을 무시하고 화살표 달린 기본 막대를 그린다 → 표준 속성은 Firefox 에만 */
@supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-3) 45%, transparent) transparent; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-3) 40%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text-3) 70%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 필터를 카드 머리·표 검색 줄 한 줄에 모은 곳 */
.card-head.tb-row { flex-wrap: wrap; gap: var(--gap); }
.card-head.tb-row > .input { min-width: 150px; }
.dt-tools > .att-counts { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.dt-tools > .dp, .dt-tools > .dd { flex: none; }
.toolbar.tb-one { align-items: center; gap: var(--gap); }
.toolbar.tb-one > .field { gap: 0; }
.toolbar.tb-one > .field > .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 접는 메뉴(관리 ▾) */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 160px; padding: 4px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,.12));
  transform-origin: top right; animation: menu-in .16s ease-out; }
.menu-item { display: flex; align-items: center; gap: var(--gap); height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--text);
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; white-space: nowrap; transition: background-color .15s ease-out; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); outline: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-pop { animation: none; } }
table.dt td.text-l { text-align: left; }   /* 문장처럼 긴 글 열만 왼쪽 정렬 */
/* 입력 칸·버튼은 세로 공간이 모자라도 납작해지지 않는다(정답 입력 책 검색·학생 대화 검색이 26px 로 눌렸다) */
input.input, select.input, .btn { min-height: 32px; }
.btn.btn-sm { min-height: 0; }
.card > .input, .card > input, .ch-side > .input { flex-shrink: 0; }
/* 입구: 홈페이지 시안 6개는 한 줄(넓은 화면). 좁아지면 3개씩 → 2개씩 → 1개 */
.enter-cards.enter-cards-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1320px; }
.enter-cards-6 .enter-card { padding: 22px 10px; }
.enter-cards-6 .enter-desc { font-size: 12px; text-wrap: balance; }
@media (max-width: 1240px) { .enter-cards.enter-cards-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 780px; } }
@media (max-width: 560px) { .enter-cards.enter-cards-6 { grid-template-columns: 1fr; max-width: 320px; } }
/* 이름표는 바로 아래 카드 줄과 같은 폭(왼쪽 끝을 맞춘다), '들어가기'는 카드 맨 아래에 붙여 줄마다 같은 높이 */
.enter-group.enter-group-6 { max-width: 1320px; }
@media (max-width: 1240px) { .enter-group.enter-group-6 { max-width: 780px; } }
@media (max-width: 560px) { .enter-group, .enter-group.enter-group-6 { max-width: 320px; } }
.enter-card > .enter-go { margin-top: auto; }
.enter-desc, .enter-foot { word-break: keep-all; }   /* 한글이 단어 중간(위/젯)에서 끊기지 않게 */

/* 결과 보기(내 기록): 위 차트 2개, 아래 응시 카드 3열 */
.r-charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); flex: none; }
.r-chart { border: 1px solid var(--line); border-radius: var(--r-surface); padding: var(--gap); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.r-chart-head { display: flex; align-items: baseline; gap: var(--gap); flex-wrap: wrap; }
.r-chart-head b { font-size: 13px; }
.r-chart .chart-vbars { max-height: 190px; }
.chart-vbars .avg { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-vbars .avg-label { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
.r-chart .chart-hbars { justify-content: center; flex: 1; }
.r-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-content: start; }
.r-card { display: flex; flex-direction: column; gap: 10px; padding: var(--gap); border: 1px solid var(--line); border-radius: var(--r-surface); background: var(--surface);
  color: inherit; text-decoration: none; transition: transform .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out;
  animation: row-in 260ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.r-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-1); }
.r-card:active { transform: translateY(0); }
.r-card-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.r-cover { width: 44px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: var(--surface-3); }
.r-card-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.r-card-title { font-weight: 700; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r-card-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.r-card-date { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.r-card-score { display: flex; align-items: baseline; gap: 1px; padding: 4px 8px; border-radius: var(--r-control); }
.r-card-score b { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.r-card-score span { font-size: 11px; }
.r-card-score[data-tone="ok"] { background: var(--ok-weak); color: var(--ok); }
.r-card-score[data-tone="mid"] { background: var(--warn-weak); color: var(--warn); }
.r-card-score[data-tone="low"] { background: var(--danger-weak); color: var(--danger); }
.r-card-meta { display: flex; gap: var(--gap); font-size: 12px; color: var(--text-2); }
.r-card-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.r-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--gap); padding-top: 10px; border-top: 1px solid var(--line-soft); }
.r-area { display: grid; grid-template-columns: 28px minmax(0, 1fr) 30px; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.r-area b { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.r-area[data-empty="true"] { opacity: .5; }
.r-area-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.r-area-bar i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--chart-1); border-radius: inherit; }
@media (max-width: 1100px) { .r-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r-charts { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .r-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .r-card { animation: none; transition: none; } }

/* 결과 카드 한 줄 배치(10/9): 4영역을 가운데 빈 곳으로 */
.r-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: var(--gap); padding: var(--gap); }
.r-card .r-cover { width: 40px; }
.r-card .r-card-info { gap: 3px; }
.r-card .r-card-chips { align-items: center; }
.r-card .r-card-date { margin-left: 2px; }
.r-card .r-card-meta { gap: 10px; font-size: 11.5px; }
.r-card .r-areas { grid-template-columns: 1fr; gap: 3px; padding: 0 0 0 var(--gap); border-top: 0; border-left: 1px solid var(--line-soft); }
.r-card .r-area { grid-template-columns: 26px minmax(0, 1fr) 30px; }
.r-card .r-card-score { align-self: start; }

/* 결과 보기 위쪽: 같은 크기 3칸 [꺾은선 | 도넛 4개 | 요약·문제 풀러 가기] */
.r-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-line { width: 100%; height: auto; display: block; overflow: visible; }
.r-line .grid { stroke: var(--line-soft); stroke-width: 1; }
.r-line .tick { fill: var(--text-3); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.r-line .avg { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.r-line .avg-label { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
.r-line .area { fill: var(--chart-1); opacity: .08; }
.r-line .path { fill: none; stroke: var(--chart-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: r-draw .9s ease-out forwards; }
.r-line .dot { fill: var(--surface); stroke: var(--chart-1); stroke-width: 2.5; transition: r .15s ease-out, fill .15s ease-out; }
.r-line .hit { fill: transparent; cursor: pointer; }
.r-line .pt:hover .dot { r: 6; fill: var(--chart-1); }
.r-line .val { fill: var(--text); font-size: 11px; font-weight: 700; font-family: var(--font); font-variant-numeric: tabular-nums; }
.r-line .pt { opacity: 0; animation: r-pt .3s ease-out forwards; animation-delay: calc(.2s + var(--i) * 50ms); }
@keyframes r-draw { to { stroke-dashoffset: 0; } }
@keyframes r-pt { to { opacity: 1; } }
.r-donuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); flex: 1; align-content: center; }
.r-donut-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.r-donut-item > span { font-size: 12px; font-weight: 700; margin-top: 4px; }
.r-donut-item > small { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-donut-wrap { position: relative; width: 100%; max-width: 84px; aspect-ratio: 1; }
.r-donut-wrap > b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.r-donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.r-donut circle { fill: none; stroke-width: 8; }
.r-donut .track { stroke: var(--surface-3); }
.r-donut .fill { stroke: var(--chart-1); stroke-linecap: round; animation: r-ring .8s ease-out backwards; animation-delay: calc(var(--i) * 80ms); }
.r-donut-item[data-weak="true"] .fill { stroke: var(--danger); }
.r-donut-item[data-weak="true"] .r-donut-wrap > b { color: var(--danger); }
@keyframes r-ring { from { stroke-dasharray: 0 var(--len); } }
.r-sum { display: grid; grid-template-rows: 1fr 2fr; gap: 0; padding: 0; overflow: hidden; }
.r-sum-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.r-sum-stats > div { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--gap); }
.r-sum-stats > div + div { border-left: 1px solid var(--line-soft); }
.r-sum-stats span { font-size: 11px; color: var(--text-3); }
.r-sum-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }
.r-sum-go { display: flex; flex-direction: column; justify-content: center; gap: var(--gap); padding: var(--gap); }
.r-sum-name { font-size: 14px; font-weight: 700; }
.r-sum-btn { height: 44px; font-size: 14px; justify-content: center; }
@media (max-width: 1100px) { .r-charts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .r-line .path, .r-line .pt, .r-donut .fill { animation: none; stroke-dashoffset: 0; opacity: 1; } }
/* 문제 풀기: 과제·읽는 책·추천 도서를 한 줄 3등분, 각 카드 안에서 옆으로 넘긴다 */
.home-pair { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.home-pair > .card { display: flex; flex-direction: column; }
.home-pair .card-head .field-help { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-pair .shelf { scroll-behavior: smooth; overscroll-behavior-x: contain; }
@media (max-width: 900px) { .home-pair { grid-template-columns: 1fr; } }
/* 결과 카드: 점수 칸 너비 고정 → 영역 경계선이 카드마다 같은 자리 */
.r-card { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 62px; }
.r-card .r-card-score { justify-content: center; }
/* 스크롤 칸 안에서 마우스를 올리면 떠오르는 카드(-3px)·그림자가 칸 가장자리에서 잘리지 않게 안쪽 여유 */
.book-grid { padding: 4px 4px 6px; }
.shelf { padding: 4px 2px 8px; margin: -4px -2px 0; }
.kd-grid { padding: 4px 2px 8px; margin-top: -4px; }
/* 책장 카드: 그림↔제목 간격과 제목↔아랫줄 간격을 같게(아랫줄 줄 높이 여유를 없앤다) */
.shelf-sub { line-height: 1; padding-bottom: 1px; margin-top: -1px; }
/* 책장 표지 = 책 고르기 표지 크기(106×142)로 통일 */
.shelf-item { flex-basis: 106px; }
.shelf-item img, .shelf-item .ph { width: 106px; }
/* 결과 카드 점수: 배경을 카드 높이만큼 세로로, 숫자는 한가운데 */
.r-card { align-items: stretch; }
.r-card > .r-cover, .r-card > .r-card-info, .r-card > .r-areas { align-self: center; }
.r-card .r-card-score { align-self: stretch; align-items: center; justify-content: center; padding: 0 6px; }
.r-card .r-card-score b { line-height: 1; }
/* 숫자와 단위(점)는 글자 바닥선에 맞추고, 그 한 줄을 칸 세로 가운데에 */
.r-card .r-card-score { align-items: baseline; align-content: center; flex-wrap: wrap; }
/* 결과 카드: 4영역 칸은 좁게(140px), 표지는 크게(56px) */
.r-card { grid-template-columns: 56px minmax(0, 1fr) 140px 62px; }
.r-card .r-cover { width: 56px; }
/* 영역별 정답률: 2×2, 원 옆에 맞은 수 */
.r-donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.r-donut-item { flex-direction: row; justify-content: center; gap: var(--gap); text-align: left; }
.r-donut-wrap { width: 68px; flex: none; }
.r-donut-text { display: flex; flex-direction: column; gap: 1px; min-width: 64px; }
.r-donut-text > span { font-size: 12px; font-weight: 700; color: var(--text-2); }
.r-donut-text > b { font-size: 16px; font-variant-numeric: tabular-nums; }
.r-donut-text > small { font-size: 11px; color: var(--text-3); }
.r-donut-item[data-weak="true"] .r-donut-text > b { color: var(--danger); }
/* 요약 칸: 숫자 가운데 정렬, 최근 참여 */
.r-sum-stats > div { align-items: center; text-align: center; }
.r-sum-last { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.r-sum-last > span { font-size: 11px; color: var(--text-3); }
.r-sum-last > b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-sum-last > small { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.r-sum-go { align-items: stretch; text-align: center; }
/* 책 고르기 카드 = 추천 도서(책장) 카드와 같은 글자·간격: 그림↔제목↔아랫줄 6px, 제목 12.5px/1.35, 아랫줄 11px 줄 높이 여유 없음 */
.book-card { gap: 6px; }
.book-card .book-title { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.book-card .book-meta { font-size: 11px; line-height: 1; padding-bottom: 1px; margin-top: -1px; }
.book-card > .chip { margin-top: 2px; }
/* 책 제목은 한 줄로(잘리면 … , 마우스를 올리면 툴팁) */
.book-card .book-title, .shelf-title { display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-tip { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; max-width: 280px; padding: 7px 10px; border-radius: var(--r-control);
  background: var(--text); color: var(--surface); font-size: 12px; font-weight: 600; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0; transition: opacity .15s ease-out; word-break: keep-all; }
.ui-tip[data-show="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ui-tip { transition: none; } }
/* 책장 카드 = 책 고르기 카드 모양(테두리·안쪽 10px·가운데 정렬·마우스 올리면 주황 테두리) */
.shelf-item { flex: 0 0 128px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-surface); background: var(--surface);
  text-align: center; align-items: stretch; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.shelf-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.shelf-item img, .shelf-item .ph { width: 100%; box-shadow: none; }
.shelf-title { font-size: 12.5px; }
/* 책장 카드: 긴 제목(한 줄)이 카드 폭을 밀어내지 않게 폭 고정 */
.shelf-item { width: 128px; min-width: 0; }
/* 원형 차트 크게(여백 줄이기) */
.r-donut-wrap { width: 96px; max-width: none; }
.r-donut-wrap > b { font-size: 17px; }
.r-donut-text > b { font-size: 18px; }
.r-donuts { gap: var(--gap); }

/* 점수 흐름 점 툴팁(카드형) */
.r-tip { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; width: 280px; padding: var(--gap); display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface); box-shadow: 0 12px 32px rgba(0,0,0,.16);
  opacity: 0; transition: opacity .15s ease-out; }
.r-tip[data-show="true"] { opacity: 1; }
.r-tip-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.r-tip-top img, .r-tip-ph { width: 44px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: var(--surface-3); }
.r-tip-top > div:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r-tip-top b { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r-tip-top span { font-size: 11px; color: var(--text-3); }
.r-tip-score { display: flex; align-items: baseline; gap: 1px; padding: 6px 8px; border-radius: var(--r-control); }
.r-tip-score b { font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.r-tip-score span { font-size: 11px; color: inherit; }
.r-tip-score[data-tone="ok"] { background: var(--ok-weak); color: var(--ok); }
.r-tip-score[data-tone="mid"] { background: var(--warn-weak); color: var(--warn); }
.r-tip-score[data-tone="low"] { background: var(--danger-weak); color: var(--danger); }
.r-tip-meta { display: flex; gap: var(--gap); font-size: 12px; color: var(--text-2); }
.r-tip-meta b, .r-tip-areas b { color: var(--text); font-variant-numeric: tabular-nums; }
.r-tip-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--text-3); text-align: center; }
.r-tip-areas span[data-empty="true"] { opacity: .5; }
.r-line .pt { cursor: pointer; outline: none; }
.r-line .pt:focus-visible .dot { r: 6; fill: var(--chart-1); }
@media (prefers-reduced-motion: reduce) { .r-tip { transition: none; } }

/* 문제 풀기: 왼쪽 세로 3카드(각자 옆으로 넘김) + 오른쪽 책 고르기 */
.study-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); flex: 1; min-height: 0; }
.study-layout.has-side { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); }
.study-side { display: none; flex-direction: column; gap: var(--gap); min-height: 0; overflow-y: auto; }
.study-layout.has-side .study-side { display: flex; }
.study-side > .card { flex: none; }
.study-layout > .pick-card { min-height: 0; }
@media (max-width: 900px) { .study-layout.has-side { grid-template-columns: 1fr; } .study-layout { flex: none; } .study-layout > .pick-card { min-height: 70dvh; } }

/* 결과 보기: 기록 검색·필터 줄(차트와 카드 사이 구분) */
.r-list-bar { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; flex: none; padding-top: var(--gap); border-top: 1px solid var(--line-soft); }
.r-list-bar > b { font-size: 13px; }
.r-list-bar > input.input { flex: 0 1 220px; min-width: 150px; }
.r-list-bar > select.input { width: auto; min-width: 110px; }

/* 왼쪽 세 카드: 높이를 똑같이 나누고 표지는 그 높이에 맞춘다(--cover-h, 세로 스크롤 없음) */
.study-side { overflow: hidden; display: none; }
.study-layout.has-side .study-side { display: grid; grid-auto-rows: minmax(0, 1fr); }
.study-side > .card { min-height: 0; overflow: hidden; }
.study-side .shelf-item { width: auto; flex: none; }
.study-side .shelf-item img, .study-side .shelf-item .ph { height: var(--cover-h, 141px); width: calc(var(--cover-h, 141px) * 3 / 4); }
.study-side .shelf-item .shelf-title, .study-side .shelf-item .shelf-sub { max-width: calc(var(--cover-h, 141px) * 3 / 4); }
/* 결과 보기: 차트·필터 줄은 고정, 그 아래 기록 카드만 스크롤 */
.card:has(> .r-cards) { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; flex: 1; }
.card > .r-cards { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px 6px; margin: -4px -2px 0; }
@media (max-width: 900px) { .card > .r-cards { overflow: visible; flex: none; } }
.side-skel .shelf { overflow: hidden; }
.side-skel .shelf-item { pointer-events: none; }
.side-skel .shelf-item:hover { transform: none; box-shadow: none; border-color: var(--line); }
/* 오른쪽 책 고르기 카드 = 왼쪽 책장 카드와 같은 크기(표지 --cover-h, 폭 = 표지폭 + 안쪽 여백 20 + 테두리 2) */
.study-layout.has-side .book-grid { grid-template-columns: repeat(auto-fill, calc(var(--cover-h, 141px) * 3 / 4 + 22px)); justify-content: start; }
.study-layout.has-side .book-card .book-cover { height: var(--cover-h, 141px); width: 100%; aspect-ratio: auto; }
/* 책 고르기 카드 아랫줄: 레벨·영역·문항 수 칩을 한 줄로 */
.book-chips { display: flex; justify-content: center; gap: 3px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.book-chips .chip { flex: none; padding: 0 6px; font-size: 10.5px; }
.book-chips .chip:nth-child(2) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 카드 폭은 칩(레벨·영역·문항)이 다 들어가게 최소 118px, 표지는 가운데 */
.study-layout.has-side .book-grid { grid-template-columns: repeat(auto-fill, max(118px, calc(var(--cover-h, 141px) * 3 / 4 + 22px))); }
.study-layout.has-side .book-card .book-cover { width: calc(var(--cover-h, 141px) * 3 / 4); margin: 0 auto; }
.study-side .shelf-item { width: max(118px, calc(var(--cover-h, 141px) * 3 / 4 + 22px)); }
.study-side .shelf-item img, .study-side .shelf-item .ph { margin: 0 auto; }
.study-side .shelf-item .shelf-title, .study-side .shelf-item .shelf-sub { max-width: 100%; }
/* 페이지 넘김 줄은 내용이 적어도 카드 맨 아래에 고정(위로 따라 올라오지 않게) */
.content > .card:has(> .pager), .study-layout > .card:has(> .pager) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.card > .pager { margin-top: auto; }
/* 카드 제목 줄: 칩 때문에 줄 상자(20px)가 글자(13px)보다 커서 위아래로 3px 씩 더 떠 보였다.
   입력 칸이 없는 글자 제목 줄만 그만큼 당겨, 보이는 간격을 다른 줄(필터 ↔ 표 10px)과 같게 */
.card > .card-head:first-child:not(.tb-row):not(:has(.input, .btn:not(.btn-sm), .dd, .seg)) { margin-top: -3px; margin-bottom: -3px; }
/* 반응형: 문제 풀기 왼쪽 칸은 화면 폭에 비례(28%, 250~400px) — 좁은 화면에서 오른쪽이 찌그러지지 않게 */
.study-layout.has-side { grid-template-columns: clamp(250px, 28%, 400px) minmax(0, 1fr); }
.pick-card > .card-head.tb-row > .input { flex: 1 1 160px; }

/* 반응형: 861~1180px 은 왼쪽 메뉴를 아이콘 줄(64px)로 — 본문이 찌그러지지 않게. 메뉴 이름은 마우스를 올리면(title) */
@media (min-width: 861px) and (max-width: 1180px) {
  .app { grid-template-columns: 64px minmax(0, 1fr); }
  .sidebar { padding-left: 8px; padding-right: 8px; overflow-x: hidden; }
  .brand { justify-content: center; }
  .brand > :not(.brand-mark) { display: none !important; }
  .nav-item { font-size: 0; justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  .nav-item > span { display: inline-flex; }
    .who { justify-content: center; padding-left: 0; padding-right: 0; }
  .who > :not(.who-avatar) { display: none; }
  .sidebar .btn { font-size: 10.5px; padding: 0 2px; min-width: 0; }
  .sidebar a[href="/privacy"] { display: none; }
}
.study-side .card-head .field-help { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }
.study-side .card-head { flex-wrap: nowrap; }
/* 반응형: 결과 보기 위 3칸은 760px 까지 한 줄 유지, 기록 카드는 화면 폭 따라 3→2→1열 */
@media (max-width: 1100px) { .r-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .r-charts { grid-template-columns: 1fr; } }
.r-line { max-height: 240px; }
.r-cards { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
@media (max-width: 1100px) { .r-donut-wrap { width: 72px; } .r-donuts { gap: 10px 6px; } .r-donut-text > b { font-size: 15px; } .r-sum-stats b { font-size: 17px; } }
/* 반응형(휴대폰·작은 태블릿 ≤900px): 문제 풀기는 한 줄씩 — 위에 과제·읽는 책·추천, 아래 책 고르기. 페이지 전체가 스크롤 */
@media (max-width: 900px) {
  .study-layout.has-side { grid-template-columns: minmax(0, 1fr); flex: none; }
  .study-layout.has-side .study-side { display: flex; flex-direction: column; overflow: visible; }
  .study-side > .card { overflow: visible; }
  .study-layout { --cover-h: 120px !important; }
  .study-layout > .pick-card { min-height: 0; }
  .study-layout > .pick-card .book-grid { overflow: visible; }
  .pick-card > .card-head.tb-row > .input { flex: 1 1 100%; }
}
@media (max-width: 900px) { .study-layout .book-grid { justify-content: center; } }

/* 휴대폰(≤560px)에서만 필터를 한 줄에 하나씩 */
@media (max-width: 560px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar > .field { width: 100% !important; flex: none !important; }
  .dd { width: 100% !important; }
}
/* 좁은 화면: 기간 묶음(이번 달… + 날짜 ~ 날짜)은 한 덩어리로 같은 줄에 */
@media (max-width: 1100px) {
  .dt-tools > .kd-bar { display: flex; align-items: center; gap: var(--gap); flex: 1 1 100%; flex-wrap: wrap; }
  .kd-bar > .dp { flex: 1 1 130px; }
  .kd-bar > .dp .dp-input-row > .input { min-width: 0; }
}
/* 출결 기간: 좁은 화면에서도 날짜 두 칸 + ~ 를 한 줄에 */
.att-range-bar > .dp { flex: 1 1 120px; min-width: 0; }
.att-range-bar > .dp .dp-input-row > .input { min-width: 0; }
@media (max-width: 560px) { .att-range-bar > .seg { flex: 1 1 100%; } }
/* 막대 위 값(점수) */
.chart-vbars .val { fill: var(--text); font-size: 12px; font-weight: 700; font-family: var(--font); font-variant-numeric: tabular-nums;
  opacity: 0; animation: r-pt .3s ease-out forwards; animation-delay: calc(.25s + var(--i, 0) * 40ms); }
.chart-vbars .val.empty { fill: var(--text-3); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .chart-vbars .val { animation: none; opacity: 1; } }
.pg-line { grid-template-columns: 28px 1fr 46px; }   /* '12/30일' 이 들어가게 */
.att-mcount { display: inline-flex; gap: 3px; } .att-mcount .chip { padding: 0 5px; font-size: 10.5px; }

/* 레벨 × 영역 분석표(읽은 책 이해도 · 독서노트 등록 현황) — 색으로 한눈에 */
.lg-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--gap); }
.lg-box { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.lg-head { display: flex; align-items: baseline; gap: var(--gap); flex-wrap: wrap; }
.lg-head b { font-size: 13px; }
.lg-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-surface); }
.lg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; text-align: center; table-layout: fixed; }
.lg-table th, .lg-table td { height: 34px; padding: 0 4px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
.lg-table tr > :last-child { border-right: 0; }
.lg-table thead th { background: var(--surface-3); color: var(--text-2); font-weight: 700; font-size: 11.5px; }
.lg-table tbody th { background: var(--c-lv-weak, var(--accent-weak)); color: var(--c-lv-text, var(--accent-text)); font-weight: 700; width: 70px; font-size: 11.5px; }
.lg-table tfoot th, .lg-table tfoot td { background: var(--surface-2); font-weight: 700; border-bottom: 0; color: var(--text-2); }
.lg-table td b { font-size: 13px; font-variant-numeric: tabular-nums; }
.lg-table td small { display: block; font-size: 10px; line-height: 1.1; opacity: .85; font-variant-numeric: tabular-nums; }
.lg-table td[data-tone="ok"] { background: color-mix(in srgb, var(--c-ok, var(--ok)) 22%, var(--surface)); color: var(--c-ok-text, var(--ok)); }
.lg-table td[data-tone="mid"] { background: color-mix(in srgb, var(--c-mid, var(--warn)) 18%, var(--surface)); color: var(--c-mid-text, var(--warn)); }
.lg-table td[data-tone="low"] { background: color-mix(in srgb, var(--c-low, var(--danger)) 18%, var(--surface)); color: var(--c-low-text, var(--danger)); }
.lg-table td.lg-note[data-has="true"] { background: color-mix(in srgb, var(--c-note, var(--chart-1)) calc(var(--a) * 100%), var(--surface)); color: var(--text); }
.lg-table td.lg-note[data-dark="true"] { color: var(--accent-on, #fff); }
.lg-table td.lg-end { background: var(--surface-2); }
.lg-table td.lg-end[data-tone="ok"] { color: var(--c-ok-text, var(--ok)); } .lg-table td.lg-end[data-tone="mid"] { color: var(--c-mid-text, var(--warn)); } .lg-table td.lg-end[data-tone="low"] { color: var(--c-low-text, var(--danger)); }
.lg-table td { transition: filter .15s ease-out; }
.lg-table td[title]:hover { filter: brightness(.95); }
/* 영역별 이해도 막대 */
.lg-gbars { display: flex; flex-direction: column; gap: var(--gap); }
.lg-gbar { display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px 34px; align-items: center; gap: var(--gap); font-size: 12px; animation: row-in 240ms var(--ease) backwards; animation-delay: calc(var(--i) * 40ms); }
.lg-gbar > span:first-child { font-weight: 700; color: var(--text-2); }
.lg-gtrack { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.lg-gtrack i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--chart-1); }
.lg-gbar[data-tone="ok"] .lg-gtrack i { background: var(--ok); } .lg-gbar[data-tone="low"] .lg-gtrack i { background: var(--danger); }
.lg-gbar b { text-align: right; font-variant-numeric: tabular-nums; }
.lg-gbar small { color: var(--text-3); font-variant-numeric: tabular-nums; }
/* 이해도 추이 창: 위 두 칸(달마다 · 영역별), 아래 분석표 */
.tm-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); align-items: start; }
.tm-detail { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .lg-gbar { animation: none; } }

/* 대시보드: 오늘 출결 · 학원 공지·메모 */
.dash-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--gap); flex: none; }
.td-body { display: flex; flex-direction: column; gap: 10px; }
.td-group { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.td-label { display: flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 700; padding-top: 4px; }
.td-label b { font-size: 15px; font-variant-numeric: tabular-nums; }
.td-group[data-tone="ok"] .td-label b { color: var(--ok); }
.td-group[data-tone="mk"] .td-label b { color: var(--accent-text); }
.td-group[data-tone="no"] .td-label b { color: var(--danger); }
.td-group[data-tone="none"] .td-label b { color: var(--text-3); }
.td-kids { display: flex; flex-wrap: wrap; gap: 4px; }
.td-kid { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 12px; color: var(--text); text-decoration: none; transition: border-color .15s ease-out, background-color .15s ease-out; }
.td-kid:hover { border-color: var(--accent); background: var(--accent-weak); }
.td-time { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.td-kid[data-s="late"] .td-time { color: var(--accent-text); }
.td-kid[data-s="absent"] { background: var(--danger-weak); border-color: transparent; }
.memo-card { display: flex; flex-direction: column; }
.memo-area { flex: 1; min-height: 220px; height: auto; resize: vertical; padding: 12px; font-size: 13.5px; line-height: 1.65; background: color-mix(in srgb, #fde68a 18%, var(--surface)); }
.dash-tiles { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }   /* 숫자 칸 7개가 한 줄에 */

/* 학생 상세 · 추천/선택 테라피 */
.th-panel { display: flex; flex-direction: column; gap: var(--gap); }
.th-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.th-filters[hidden] { display: none; }
.th-info { border: 1px solid var(--line); border-radius: var(--r-surface); padding: var(--gap); display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.6; background: var(--surface-2); }
.th-areas { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.th-area { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-variant-numeric: tabular-nums; }
.th-area[data-weak="true"] { border-color: var(--danger); background: var(--danger-weak); color: var(--danger); }
.th-body { display: flex; flex-direction: column; gap: var(--gap); }
.th-group { display: flex; flex-direction: column; gap: 10px; padding-bottom: var(--gap); border-bottom: 1px solid var(--line-soft); }
.th-group:last-child { border-bottom: 0; }
.th-group-head { display: flex; gap: 6px; }
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--gap); }
.th-book { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--gap); padding: 10px; border: 1px solid var(--line); border-radius: var(--r-surface); background: var(--surface);
  transition: border-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out; animation: row-in 260ms var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 12) * 35ms); }
.th-book:hover { border-color: var(--accent); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.th-cover { width: 76px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: var(--surface-3); }
.th-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.th-title { font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.th-sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-act { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.th-more { align-self: center; min-width: 120px; }
.th-more[hidden] { display: none; }
.th-rec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 6px; }
.th-rec { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: var(--gap); padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-control);
  animation: row-in 220ms var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 12) * 30ms); }
.th-rec img, .th-rec-ph { width: 32px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; background: var(--surface-3); display: block; }
.th-rec-t { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .th-book, .th-rec { animation: none; transition: none; } }

/* 학생 대시보드(/me): 보기 좋게. 카드가 차례로 떠오르고, 단계·막대는 채워지며 나타난다 */
.me-wrap { display: flex; flex-direction: column; gap: var(--gap); }
.me-wrap > * { animation: me-in 420ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes me-in { from { opacity: 0; transform: translateY(8px); } }
.me-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr); gap: var(--gap); }
.me-card { display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); border-radius: 18px; min-width: 0; }
.me-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.me-title h2 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.me-info-body { display: flex; gap: var(--gap); align-items: center; }
.me-face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; background: color-mix(in srgb, var(--c-face, var(--accent)) 14%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-face, var(--accent)) 18%, transparent); }
.me-face-ph { display: grid; place-items: center; font-size: 26px; font-weight: 800; color: var(--c-face-text, var(--accent-text)); }
.me-info-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.me-name b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.me-name span { margin-left: 4px; font-size: 13px; color: var(--text-3); }
.me-hello { font-size: 13px; color: var(--text-2); }
.me-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 12.5px; margin-top: 4px; }
.me-dl dt { color: var(--text-3); }
.me-dl dd { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-count-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1; }
.me-count { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: var(--gap); border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft);
  transition: transform .2s ease-out, box-shadow .2s ease-out; }
.me-count:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.me-count[data-tone="main"] { background: var(--hl, var(--accent)); border-color: transparent; color: var(--hl-on, var(--accent-on, #fff)); }
.me-count-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; }
.me-count-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); }
.me-count-n { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
/* 숫자를 크게: 카드 가운데 빈 공간을 숫자가 채운다 */
.me-count-n { gap: 5px; }
.me-count-n b { font-size: clamp(38px, 4.2vw, 58px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: .9; }
.me-count-n span { font-size: 14px; font-weight: 600; opacity: .85; }
.me-shelf-body { display: flex; gap: var(--gap); align-items: center; }
/* 줄은 상자 정가운데(align-content), 숫자와 Lv 는 바닥선 맞춤(baseline) */
.me-lv { flex: none; width: 92px; height: 92px; border-radius: 18px; display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: center; padding: 0; gap: 2px;
  background: var(--hl, var(--accent)); color: var(--hl-on, var(--accent-on, #fff)); box-shadow: 0 8px 20px -10px var(--hl, var(--accent)); }
.me-lv b { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.me-lv span { font-size: 14px; font-weight: 700; opacity: .85; }
.me-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; min-width: 0; position: relative; }
.me-steps::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 37px; height: 3px; border-radius: 3px; background: var(--surface-3); }
.me-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.me-step-sub { font-size: 11px; color: var(--text-3); min-height: 26px; display: flex; align-items: flex-end; line-height: 1.2; }
.me-step i { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--surface-3); position: relative; z-index: 1;
  animation: me-pop 360ms var(--ease) backwards; animation-delay: calc(300ms + var(--i) * 90ms); }
.me-step b { font-size: 12px; }
.me-step[data-state="done"] i { background: var(--accent); border-color: var(--accent); }
.me-step[data-state="done"] .me-step-sub { color: var(--accent-text); }
.me-step[data-state="now"] i { border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.me-step[data-state="now"] .me-step-sub, .me-step[data-state="now"] b { color: var(--accent-text); font-weight: 800; }
@keyframes me-pop { from { transform: scale(.4); opacity: 0; } }
.me-shelf-note { font-size: 12.5px; color: var(--text-2); margin: 0; }
/* 나의 이해도: 세 칸(레이더 | 평균·영역 막대 | 월별), 칸 사이 세로선, 위쪽 맞춤 */
.me-under-body { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; }
.me-under-body[data-cols="2"] { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.2fr); }
.me-pane { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; padding: 4px var(--gap); animation: row-in 260ms var(--ease) backwards; }
.me-pane:first-child { padding-left: 0; }
.me-pane:last-child { padding-right: 0; }
.me-pane + .me-pane { border-left: 1px solid var(--line-soft); animation-delay: 60ms; }
.me-pane + .me-pane + .me-pane { animation-delay: 120ms; }
.me-pane-t { font-size: 12px; font-weight: 700; color: var(--text-3); margin: 0; }
.me-radar { align-items: center; gap: var(--gap); }
.me-radar .me-pane-t { align-self: flex-start; }
.me-under-side { justify-content: flex-start; }
.me-under-side .me-areas { gap: var(--gap); }
.me-month .chart-vbars { width: 100%; height: auto; max-height: none; }
@media (max-width: 1100px) {
  .me-under-body, .me-under-body[data-cols="2"] { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.2fr); row-gap: var(--gap); }
  .me-month { grid-column: 1 / -1; border-left: 0 !important; padding: var(--gap) 0 0; border-top: 1px solid var(--line-soft); }
  .me-month .chart-vbars { max-width: 520px; }
}
@media (max-width: 760px) {
  .me-under-body, .me-under-body[data-cols="2"] { grid-template-columns: 1fr; }
  .me-pane { padding: 0; }
  .me-pane + .me-pane { border-left: 0; border-top: 1px solid var(--line-soft); padding-top: var(--gap); }
}
@media (prefers-reduced-motion: reduce) { .me-pane { animation: none; } }
.me-avg { display: flex; align-items: baseline; gap: 10px; }
.me-avg span { font-size: 13px; color: var(--text-2); }
.me-avg b { font-size: 30px; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.me-areas { display: flex; flex-direction: column; gap: var(--gap); }
.me-area { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13px; }
.me-area b { text-align: right; font-variant-numeric: tabular-nums; }
.me-bar { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.me-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--chart-1); transform-origin: left; transform: scaleX(var(--w));
  animation: me-grow 700ms var(--ease) backwards; animation-delay: calc(250ms + var(--i) * 80ms); }
@keyframes me-grow { from { transform: scaleX(0); } }
.me-books { display: grid; grid-auto-flow: column; grid-auto-columns: 136px; justify-content: start; gap: var(--gap); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.me-book { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; scroll-snap-align: start; min-width: 0;
  animation: me-in 360ms var(--ease) backwards; animation-delay: calc(min(var(--i), 10) * 45ms); }
.me-book img, .me-book-ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--surface-3); display: block;
  transition: transform .2s ease-out, box-shadow .2s ease-out; }
.me-book:hover img, .me-book:focus-visible img { transform: translateY(-3px); box-shadow: var(--shadow-2, var(--shadow-1)); }
.me-book:active img { transform: translateY(0) scale(.98); }
.me-book b { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1280px) { .me-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .me-top > .me-shelf { grid-column: 1 / -1; } }
@media (max-width: 760px) { .me-top { grid-template-columns: 1fr; } .me-under-body { grid-template-columns: 1fr; } .me-info-body { gap: var(--gap); } .me-face { width: 76px; height: 76px; } .me-lv { width: 72px; height: 72px; } .me-lv b { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { .me-wrap > *, .me-step i, .me-bar i, .me-book { animation: none; } .me-count, .me-book img { transition: none; } }

/* 내 책장 · 책 찾기: 가로 띠 대신 줄바꿈 격자 + 더보기 */
.sf-finder { display: flex; flex-direction: column; gap: var(--gap); }
.sf-finder[hidden] { display: none; }
.sf-find { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); overflow: visible; scroll-snap-type: none; gap: var(--gap);
  padding: 0; margin: 0; }   /* 가로로 넘기는 책장(.shelf)의 안쪽 여유는 격자에서는 필요 없다 — 카드 아래 여백이 다른 카드와 같아진다 */
.sf-find .shelf-item { width: auto; }
.sf-more { align-self: center; min-width: 120px; }
.sf-more[hidden] { display: none; }
.sf-find .shelf-item img, .sf-find .shelf-item .ph { width: 100%; }
/* 진로 책장(10/20 원장님 카톡, 리드인 진로 코스처럼): 진로영역 머리 줄 「인문 4권」 — 격자 한 줄을 다 쓰고 밑줄로 영역을 가른다 */
.sf-find .sf-area { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--gap); padding-bottom: var(--gap); border-bottom: 1px solid var(--line); }
.sf-find .sf-area-none { grid-column: 1 / -1; }
@media (prefers-reduced-motion: no-preference) { .sf-find .sf-area { animation: row-in .3s var(--ease) both; } }

/* 표 안 세로 스크롤 막대 자리: 비워 두면 줄선·줄무늬가 테두리 앞에서 끊겨 보인다 → 세로선 한 줄로 막대 칸을 마감한다 */
.table-wrap::-webkit-scrollbar-track:vertical { background: var(--surface-2); border-left: 1px solid var(--line); }
.table-wrap::-webkit-scrollbar-corner { background: var(--surface-2); }
/* 표 틀 선: border 는 안쪽 내용(줄선·줄무늬·스크롤 막대) 아래에 깔려, 줄선이 틀 끝에 걸리면 2px 로 보이고 둥근 모서리는 막대에 덮였다.
   outline 은 내용 위에 그려지므로 안쪽으로 1px 들여 그리면 어느 스크롤 위치에서든 한 줄이고 모서리도 끊기지 않는다 */
.table-wrap { border: 0; outline: 1px solid var(--line); outline-offset: -1px; border-radius: 6px; }
/* createTable 표 틀: 스크롤 상자를 감싼 틀이 테두리를 맨 위에 그린다(고정 열·머리줄·스크롤 막대에 가려지지 않게) */
.table-frame { position: relative; display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; min-height: 0; }
.table-frame > .table-wrap { min-height: min(200px, 100%); }
.table-frame > .table-wrap { outline: 0; border-radius: 6px; }
.table-frame::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 6px; pointer-events: none; z-index: 6; }

/* 문제집 숙제 칸(학생 '선생님이 내준 과제'): 표지 자리에 '문제집'과 범위 */
.wk-item { gap: 6px; }
.shelf-item .wk-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-text); }
.wk-cover b { font-size: 15px; font-weight: 800; }
.wk-cover span { font-size: 11.5px; line-height: 1.3; }
.wk-done { align-self: stretch; justify-content: center; }
.wk-row { flex-wrap: wrap; }

/* 대시보드(10/9): '지금 글쓰기·진단 중' 칸을 뺀 만큼 학원 공지·메모를 크게(레벨업 명단·독법 수정 명단·공지 등) */
.memo-card .memo-area { min-height: 440px; }
/* 최근 진단: 이름 · 책(누르면 결과) · 점수 · 시각 */
.act-wrap .act-row { grid-template-columns: 72px minmax(0, 1fr) auto 92px; }
.act-wrap .act-title { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-wrap .act-title:hover { color: var(--accent-text); text-decoration: underline; }
.act-wrap .act-v[data-tone="ok"] { color: var(--ok); }
.act-wrap .act-v[data-tone="mid"] { color: var(--warn); }
.act-wrap .act-v[data-tone="low"] { color: var(--danger); }

/* 학생 상세(10/9): 위 정보 칸과 탭 줄은 고정, 아래 탭 내용만 스크롤. 좁은 화면은 그대로 페이지째 스크롤 */
@media (min-width: 761px) {
  .content:has(> .st-tabbar) { overflow: hidden; display: flex; flex-direction: column; }
  .content:has(> .st-tabbar) > .card:first-child, .content:has(> .st-tabbar) > .st-tabbar { flex: none; }
  .content:has(> .st-tabbar) > .st-tabbar { position: static; margin: 0; padding: 0; }
  .content:has(> .st-tabbar) > .tab-panel:not([hidden]) { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--gap); }
}
/* 본사가 학원에 접속했을 때 제목줄의 표시 */
.hq-top { display: inline-flex; align-items: center; gap: var(--gap); min-width: 0; padding: 3px 4px 3px 12px; border-radius: 999px;
  background: var(--accent-weak); color: var(--accent-text); font-size: 12.5px; }
.hq-top-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-top .btn { height: 26px; }
@media (max-width: 760px) { .hq-top-text { display: none; } .hq-top { padding: 2px; } }
.dash-pair { align-items: stretch; }   /* 공지·메모는 오늘 출결 칸 높이를 따른다(10/20) */
.wr-word { grid-template-columns: minmax(80px, auto) 1fr auto auto auto; }   /* 낱말 · 뜻 · 책 · 사전 · 지우기 */
/* 반 수업 요일 고르기(월~일 눌러서 켜고 끄기) */
.wd-pick { display: flex; gap: 4px; flex-wrap: wrap; }
.wd-btn { min-width: 36px; justify-content: center; }
.wd-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
.td-off { padding-left: 96px; }
@media (max-width: 760px) { .td-off { padding-left: 0; } }

/* 단어장 · 표준국어대사전 뜻 고르기 */
.dict-box { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-surface); padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
.dict-box[hidden] { display: none; }
.dict-head { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.dict-item { display: flex; align-items: baseline; gap: var(--gap); flex-wrap: wrap; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s ease-out, background-color .15s ease-out;
  animation: row-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
.dict-item:hover, .dict-item:focus-visible { border-color: var(--accent); background: var(--accent-weak); }
.dict-word { font-weight: 800; }
.dict-def { flex: 1 1 100%; font-size: 13px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .dict-item { animation: none; transition: none; } }

.me-donuts { flex: 0 0 auto; gap: var(--gap); padding-top: 4px; }

/* ---------- 기본 디자인(10/11 사용자 예시): 남색 테두리 · 흰 바탕 · 노랑 포인트 ----------
   남색 = 카드 테두리·선택된 메뉴·그래프·숫자, 노랑 = 프로필 알약·레벨 칸·작은 네모, 연한 남색 = 누적표 숫자 칸 */
/* 카드 테두리(10/20 요청): 남색 선이 무거워 연한 선 + 옅은 그림자로 살짝 띄운다 */
.card { border-color: var(--line-soft); box-shadow: 0 1px 2px rgb(24 24 27 / .04), 0 4px 14px -6px rgb(24 24 27 / .08); }
:root[data-theme="dark"] .card { border-color: var(--line); box-shadow: none; }
/* 남색 줄은 화면 맨 위 전체 폭(왼쪽 메뉴 위까지 이어지게). 로고 칸은 상자 없이 */
.app { border-top: 4px solid var(--accent); box-sizing: border-box; }
.app > .main { height: 100%; }
.sidebar .brand { background: transparent; padding-left: 4px; }
.card-title::before, .me-title h2::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--mark); margin-right: 8px; vertical-align: 1px; }
.nav-item[aria-current="page"] { background: var(--accent); color: var(--accent-on, #fff); }
:root[data-theme="dark"] .nav-item[aria-current="page"] { color: var(--accent-on, #1a0f07); }
.nav-item[aria-current="page"]::after { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--mark-nav); margin-left: auto; flex: none; }
/* 프로필 알약(위쪽 줄): 이름 · 레벨 */
.me-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--hl); color: var(--hl-on);
  font-weight: 700; font-size: 12.5px; white-space: nowrap; animation: row-in 260ms var(--ease) backwards; }
/* 이름 동그라미: 흰 바탕 + 남색 테두리 */
.me-face { background: var(--surface); box-shadow: 0 0 0 1.5px var(--c-face, var(--accent)); }
/* 독서 활동: 칸을 채우지 않고 남색 큰 숫자만 */
.me-count, .me-count[data-tone="main"] { background: transparent; border-color: transparent; color: inherit; padding: 6px 4px; }
.me-count:hover { transform: none; box-shadow: none; }
.me-count-n b { color: var(--accent-text); }
/* 누적표: 숫자 칸은 연한 남색, 숫자는 남색. 점수 뜻(좋음·보통·낮음)은 아래 작은 점수 글자 색으로 */
.lg-table tbody th { background: var(--c-lv-weak, var(--surface-2)); }
.lg-table td[data-tone="ok"] { background: var(--c-ok-weak, var(--accent-weak)); }
.lg-table td[data-tone="mid"] { background: var(--c-mid-weak, var(--accent-weak)); }
.lg-table td[data-tone="low"] { background: var(--c-low-weak, var(--accent-weak)); }
.lg-table td[data-tone] b { color: var(--accent-text); }
.lg-table td.lg-end[data-tone] { background: var(--surface-2); }
.lg-table td.lg-note[data-has="true"], .lg-table td.lg-note[data-dark="true"] { background: var(--c-note-weak, var(--accent-weak)); color: var(--c-note-text, var(--accent-text)); }
/* 달마다 평균 점수: 지난 달은 연하게, 이번(마지막) 달만 진하게 */
.me-month .chart-vbars .bar:not(:last-of-type) { fill: color-mix(in srgb, var(--chart-1) 38%, var(--surface)); }
@media (prefers-reduced-motion: reduce) { .me-pill { animation: none; } }

/* 숫자 칸이 버튼일 때(설계 책장 옮길 학생: 누르면 명단) */
button.dash-tile { font: inherit; color: inherit; text-align: left; cursor: pointer; }

/* 우리 아이들 · 이해도(추이): 점수 칩과 추이 선을 한 묶음으로 칸 가운데에, 선은 크게. 선 색 = 방향(10/12 요청) */
.kd-trend { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 2px 0; }
.kd-score { min-width: 70px; }
.kd-trend > .kd-spark { width: 110px; height: 34px; flex: none; justify-self: auto; }
.kd-spark polyline { stroke-width: 2.4; stroke: var(--text-3); }
.kd-spark circle { fill: var(--text-3); }
.kd-spark[data-dir="up"] polyline { stroke: #2563eb; } .kd-spark[data-dir="up"] circle { fill: #2563eb; }
.kd-spark[data-dir="down"] polyline { stroke: var(--danger); } .kd-spark[data-dir="down"] circle { fill: var(--danger); }
:root[data-theme="dark"] .kd-spark[data-dir="up"] polyline { stroke: #60a5fa; } :root[data-theme="dark"] .kd-spark[data-dir="up"] circle { fill: #60a5fa; }
.kd-dir { flex: none; width: 34px; text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.kd-dir[data-dir="up"] { color: #2563eb; } .kd-dir[data-dir="down"] { color: var(--danger); }
:root[data-theme="dark"] .kd-dir[data-dir="up"] { color: #60a5fa; }
/* 오늘 출결 줄 제목: 인원이 세 자리여도(아직 안 옴 135명) 줄이 바뀌지 않게 */
.td-group { grid-template-columns: 112px minmax(0, 1fr); }
.td-label { white-space: nowrap; }

/* 과목·월 수업료 창(수강료 수납) */
.sj-list { display: flex; flex-direction: column; gap: var(--gap); }
.sj-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 44px auto auto; gap: var(--gap); align-items: center; animation: row-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
@media (max-width: 560px) { .sj-row { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .sj-row { animation: none; } }

/* 선생님이 보낸 메시지 팝업(학생 화면) */
.tm-list { display: flex; flex-direction: column; gap: 10px; }
.tm-msg { display: flex; flex-direction: column; gap: 4px; padding: var(--gap); border: 1px solid var(--accent); border-radius: 14px; background: var(--accent-weak);
  animation: row-in 260ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.tm-meta { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.tm-body { font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.tm-photo { max-width: 100%; max-height: 320px; border-radius: 10px; object-fit: contain; align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .tm-msg { animation: none; } }

/* ---------- 학생 모니터링 창 · 오늘의 P.T 노트(10/11) ---------- */
.mn-wrap { display: flex; flex-direction: column; gap: var(--gap); }
.mn-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--gap); padding: var(--gap); border-radius: 16px; background: var(--accent); color: var(--accent-on, #fff); }
.mn-hero h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.mn-hero-text { display: flex; flex-direction: column; gap: var(--gap); align-items: flex-start; justify-content: center; min-width: 0; }
.mn-hero-sub { font-size: 12.5px; opacity: .8; }
.mn-pt { background: var(--mark); border-color: transparent; color: #1b1b1b; font-weight: 700; border-radius: 999px; padding: 0 14px; height: 32px; }
.mn-pt:hover { background: var(--mark); filter: brightness(1.06); border-color: transparent; }
.mn-hero-chart { background: var(--surface); color: var(--text); border-radius: 12px; padding: var(--gap); min-width: 0; }
.mn-chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); font-size: 12px; margin-bottom: 2px; }
.mn-hero-chart .chart-vbars { max-height: 150px; }
.mn-pane { display: flex; flex-direction: column; gap: var(--gap); }
.mn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.mn-stat { border: 1px solid var(--line-soft); border-radius: 12px; padding: var(--gap); background: var(--surface-2); min-width: 0;
  animation: row-in 240ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.mn-stat .stat-value { font-size: 19px; color: var(--accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-sec { font-size: 12.5px; font-weight: 700; color: var(--text-2); padding-top: 2px; }
.mn-books { display: flex; flex-direction: column; gap: var(--gap); }
.mn-book { display: flex; flex-direction: column; gap: 6px; padding: var(--gap); border: 1px solid var(--line-soft); border-radius: 12px;
  animation: row-in 240ms var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 12) * 35ms); }
.mn-book-top { display: flex; align-items: center; gap: var(--gap); min-width: 0; }
.mn-book-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mn-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.mn-story-box { border: 1px solid var(--line-soft); border-left: 4px solid var(--accent); border-radius: 10px; padding: var(--gap); font-size: 12.5px; line-height: 1.6; }
.mn-story-box[data-tone="ok"] { border-left-color: var(--ok); }
.mn-story-box[data-tone="warn"] { border-left-color: var(--warn); }
.mn-story-box b { display: block; margin-bottom: 4px; font-size: 13px; }
.mn-story-box p { margin: 0; }
.mn-story-box ul { margin: 0; padding-left: 16px; }
.mn-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.mn-area { display: flex; flex-direction: column; gap: 2px; padding: var(--gap); border-radius: 12px; background: var(--accent-weak);
  animation: row-in 240ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.mn-area span { font-size: 12px; font-weight: 700; color: var(--text-2); }
.mn-area b { font-size: 20px; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.mn-area small { font-size: 11px; color: var(--text-3); }
.pt-wrap { display: flex; flex-direction: column; gap: var(--gap); }
.pt-bar { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.pt-body { display: flex; flex-direction: column; gap: var(--gap); }
.pt-head { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.pt-book { display: flex; flex-direction: column; gap: 10px; padding: var(--gap); border: 1px solid var(--accent); border-radius: 12px;
  animation: row-in 260ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.pt-title { margin: 0; font-size: 14.5px; font-weight: 800; }
.pt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pt-cell { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--accent-weak); min-width: 0; }
.pt-cell span { font-size: 11px; color: var(--text-3); font-weight: 600; }
.pt-cell b { font-size: 15px; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pt-cell small { font-size: 11px; color: var(--text-3); }
.pt-sets { display: flex; flex-direction: column; gap: 4px; }
.pt-sets-head { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.pt-set { display: flex; align-items: center; gap: var(--gap); padding: 6px 8px; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; }
@media (max-width: 760px) {
  .mn-hero, .mn-story { grid-template-columns: 1fr; }
  .mn-stats, .mn-areas, .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .mn-stat, .mn-book, .mn-area, .pt-book { animation: none; } }
/* 모니터링 창 머리 칸의 글자 선명도 맞춤(10/11): 남색 바탕의 흰 제목에만 윈도우 색 보정(빨강·파랑 번짐)이 끼고,
   아랫줄은 투명도 때문에 회색조로 그려져 한 칸 안에서 선명도가 달라 보였다 → 투명도 대신 색을 섞고, 칸 전체를 같은 방식으로 그리게 한다 */
.mn-hero-text { will-change: opacity; }
.mn-hero h3 { font-weight: 700; }
.mn-hero-sub { opacity: 1; color: color-mix(in srgb, var(--accent-on, #fff) 78%, var(--accent)); }

/* ---------- 수업 모드 · 과제 모드(10/11) ---------- */
.ss-box { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ss-band { display: inline-flex; align-items: center; gap: var(--gap); height: 30px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--accent); color: var(--accent-on, #fff);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; min-width: 0; animation: row-in 240ms var(--ease) backwards; }
.ss-band[data-mode="home"] { background: var(--accent-weak); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.ss-band .btn { height: 24px; border-radius: 999px; background: var(--surface); color: var(--text); border-color: transparent; }
.ss-text { overflow: hidden; text-overflow: ellipsis; }
.ss-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mark); flex: none; animation: ss-pulse 1.6s ease-in-out infinite; }
@keyframes ss-pulse { 50% { opacity: .35; } }
.ss-pick { display: flex; flex-direction: column; gap: var(--gap); }
.ss-pick .btn { height: 40px; font-size: 14px; animation: row-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@media (max-width: 760px) { .ss-text { max-width: 96px; } .ss-band { padding-left: 8px; gap: 6px; } }
/* 대화방 학습 소식 카드: 말풍선과 달리 가운데에 납작한 칸으로 */
.ch-sys { align-self: center; display: flex; align-items: center; gap: var(--gap); max-width: 92%; padding: 6px 12px; border-radius: 10px; border: 1px dashed var(--line);
  background: var(--surface-2); font-size: 12px; color: var(--text-2); animation: row-in 220ms var(--ease) backwards; }
.ch-sys::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--mark); flex: none; }
.ch-sys[data-kind="diag"] { border-style: solid; border-color: var(--accent); background: var(--accent-weak); color: var(--accent-text); }
.ch-sys-text { min-width: 0; overflow-wrap: anywhere; }
/* 대시보드: 수업·과제 모드인 아이 */
.kd-sess { font-size: 12px; font-weight: 700; color: var(--accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
.kd-tile[data-sess] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kd-namecell { display: inline-flex; align-items: center; gap: 6px; }
.kd-live[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
.kd-live { transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ss-band, .ss-dot, .ss-pick .btn, .ch-sys { animation: none; } .kd-live { transition: none; } }

/* 보고서 확장(10/11): 월간 칩 줄 · 보완할 점 · 부록 사진 */
.rpt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rpt-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.7; }
.rpt-photo-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rpt-photo-grid img { width: 100%; display: block; border-radius: var(--r-control); border: 1px solid var(--line); }
@media print { .rpt-photos { break-before: page; break-inside: auto; } .rpt-photo-grid img { break-inside: avoid; } }

/* ---------- 레벨 테스트 보강(10/11): 답안지 · 문항 격자 · 보고서 · 종이 시험지 ---------- */
.lt-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lt-link { padding: var(--gap); border: 1px dashed var(--line); border-radius: var(--r-control); background: var(--surface-3); font-family: var(--mono); font-size: 12.5px; word-break: break-all; user-select: all; }
.lt-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 16px; }
.lt-row { display: grid; grid-template-columns: 28px repeat(5, minmax(0, 1fr)); gap: 4px; align-items: center; min-width: 0; }
.lt-no { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text-2); text-align: right; padding-right: 4px; }
.lt-row .cr-choice { height: 34px; }
.lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.lt-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border: 1px solid var(--line); border-radius: var(--r-control); font-size: 11px; color: var(--text-3); }
.lt-cell-mark { font-size: 16px; font-weight: 700; line-height: 1; }
.lt-cell.is-ok { background: var(--ok-weak); border-color: transparent; }
.lt-cell.is-ok .lt-cell-mark { color: var(--ok); }
.lt-cell.is-no { background: var(--danger-weak); border-color: transparent; }
.lt-cell.is-no .lt-cell-mark { color: var(--danger); }
.lt-wrong { border-top: 1px solid var(--line-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; break-inside: avoid; }
.lt-wrong-q { font-size: 14px; font-weight: 600; line-height: 1.5; }
/* 레벨 테스트 문항의 보기 글(예문 · 빈칸 문장) */
.lt-desc { clear: both; margin: 6px 0; white-space: pre-wrap; font-size: 13px; }
.lt-wrong-c { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.6; }
.lt-wrong-c li.is-ans { font-weight: 700; }
.lt-wrong-c .chip { margin-left: 6px; }
.lt-pick { display: flex; flex-direction: column; max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-control); }
.lt-pick-row { display: flex; align-items: center; gap: var(--gap); padding: 8px 10px; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background var(--dur) ease-out; }
.lt-pick-row:hover { background: var(--surface-3); }
.lt-pick-name { font-weight: 600; font-size: 13px; }
.lt-enter { border: 1px solid var(--line-soft); border-radius: var(--r-surface); padding: var(--gap); }
.lt-enter summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.lt-enter > * + * { margin-top: 10px; }
.lt-op { height: auto; min-height: 110px; padding: 10px; line-height: 1.6; resize: vertical; }
.ltr, .ltr-page { display: flex; flex-direction: column; gap: var(--gap); }
.lt-paper { gap: 14px; }
.lt-paper-head h1 { font-size: 18px; }
.lt-paper-head div { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.lt-q { break-inside: avoid; }
.lt-q-t { font-weight: 600; font-size: 14px; line-height: 1.5; }
.lt-q-c { margin: 4px 0 0; padding-left: 22px; font-size: 13px; line-height: 1.7; }
.lt-ans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; }
.lt-ans-row { display: grid; grid-template-columns: 28px repeat(5, 1fr); align-items: center; font-size: 18px; }
.lt-ans-row b { font-size: 13px; }
@media (max-width: 560px) { .lt-ans { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .lt-row, .lt-cell, .lt-pick-row { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 30ms); } }
@media print {
  .ltr-page { break-after: page; }
  .ltr-page:last-child { break-after: auto; }
  .ltr .chart-hbar, .lt-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lt-paper { border: 0; padding: 0; }
  .lt-paper-sheet { break-before: page; }
  .rpt-foot { display: none !important; }
}

/* ---------- 구술 오답(틀린 문항 말로 설명 → 선생님 승인) ---------- */
.dash-tile[hidden] { display: none; }
.ow-card, .ow-notice { gap: var(--gap); border-left: 4px solid var(--mark); }
.ow-card[data-state="done"] { border-left-color: var(--ok); }
.ow-msg { font-weight: 700; color: var(--accent-text); line-height: 1.5; }
.ow-fb { padding: var(--gap); border-radius: 10px; background: var(--accent-weak); }
.ow-fb p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ow-approve { display: flex; gap: var(--gap); align-items: flex-end; flex: 1 1 100%; }
.ow-approve .input { flex: 1 1 auto; min-height: 38px; resize: vertical; }
.ow-approve .btn { flex: none; transition: transform var(--dur) ease-out, background-color var(--dur) ease-out; }
.ow-approve .btn:active { transform: scale(.97); }
.ow-list .promo-row { padding: 10px 0; }
.ow-book { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ch-sys[data-kind="oral_wait"] { border-style: solid; border-color: var(--danger); background: var(--danger-weak); color: var(--danger); }
.ch-sys[data-kind="oral_ok"] { border-style: solid; border-color: var(--ok); background: var(--ok-weak); color: var(--ok); }
@media (prefers-reduced-motion: no-preference) { .ow-card, .ow-notice { animation: row-in .28s var(--ease) both; } }
@media (prefers-reduced-motion: reduce) { .ow-approve .btn { transition: none; } }

/* ---------- 정기평가(모의고사)(10/11): 결과 패널 · 회차 등록 · 학생 답안지 ---------- */
.mk-result, .mk-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mk-sec { border: 1px solid var(--line-soft); border-radius: var(--r-surface); padding: var(--gap); }
.mk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.mk-nos { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-pick { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.mk-result .chart-hrow[data-tone="ok"] .chart-hbar { background: var(--ok); }
.mk-result .chart-hrow[data-tone="danger"] .chart-hbar { background: var(--danger); }
.mk-result .chart-hrow[data-tone="nat"] .chart-hbar { background: var(--line); }
.mk-result .chart-hrow[data-tone="nat"] .chart-hlabel, .mk-result .chart-hrow[data-tone="nat"] .chart-hval { color: var(--text-3); font-weight: 400; }
.mk-basics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gap); }
.mk-basics > .field:first-child:nth-last-child(5) { grid-column: span 2; }
.mk-key { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-control); }
.mk-items thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.mk-items td { padding: 4px 6px; }
.mk-in { height: 30px; min-width: 0; width: 100%; padding: 0 8px; }
.mk-paste { height: auto; padding: 10px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; resize: vertical; }
.mk-cuts { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.mk-cut { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-2); min-width: 0; }
.mk-cut .input { min-width: 0; padding: 0 6px; }
.field-help[data-bad="true"] { color: var(--danger); }
.lt-pick-row[data-off="true"] { cursor: not-allowed; color: var(--text-3); }
.mk-student { max-width: 860px; }
.mk-past { display: flex; flex-direction: column; }
.mk-past-row { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line-soft); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur) ease-out, transform var(--dur) ease-out; }
.mk-past-row:last-child { border-bottom: 0; }
.mk-past-row:hover { background: var(--surface-3); }
.mk-past-row:active { transform: scale(.995); }
.mk-past-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-past-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .mk-two { grid-template-columns: 1fr; } .mk-cuts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-basics > .field:first-child:nth-last-child(5) { grid-column: auto; } }
@media (prefers-reduced-motion: no-preference) { .mk-past-row, .mk-nos .chip, .mk-sec { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 40ms); } }
@media (prefers-reduced-motion: reduce) { .mk-past-row { transition: none; } }
@media print { .mk-print .chart-hbar, .mk-print .chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .mk-sec { break-inside: avoid; } }

/* ---------- 묶음 7(v41): 포인트 · 문의 사진 · 사용법 도우미 · 공동브랜드 · 블로그 글 도우미 ---------- */
.nav-item[hidden] { display: none; }
.pt-box { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.pt-form { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.pt-use { display: flex; flex-direction: column; gap: 10px; }
.pt-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-2); }
.pt-line b { color: var(--text); }
.pt-due { padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.pt-due b { color: var(--accent-text); font-size: 16px; }
.bd-photo, .br-photo { display: block; border-radius: var(--r-control); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); align-self: flex-start; max-width: 100%;
  transition: transform var(--dur) ease-out, box-shadow var(--dur) ease-out; }
.bd-photo:hover, .br-photo:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.bd-photo:focus-visible, .br-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bd-photo img { display: block; max-width: 100%; max-height: 360px; object-fit: contain; }
.bd-attach { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.bd-attach img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-control); border: 1px solid var(--line); }
.hp-btn { gap: 6px; }
.hp { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.hp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hp-chip { cursor: pointer; transition: background var(--dur) ease-out, transform var(--dur) ease-out; }
.hp-chip:hover { background: var(--accent-weak); color: var(--accent-text); }
.hp-chip:active { transform: scale(.97); }
.hp-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp-out { display: flex; flex-direction: column; gap: var(--gap); min-height: 40px; }
.hp-hit { padding: var(--gap); border: 1px solid var(--line); border-radius: var(--r-control); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hp-hit-title { font-weight: 700; font-size: 13.5px; }
.hp-hit-desc { font-size: 12.5px; line-height: 1.65; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hp-hit-acts, .hp-more { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.hp-more { justify-content: flex-end; padding-top: 4px; }
.br-card { gap: var(--gap); }
.br-form, .br-view { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.br-reason { padding: var(--gap); border-radius: var(--r-control); background: var(--danger-weak); color: var(--danger); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.br-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 320px)); gap: var(--gap); margin: 0; }
.br-photos figure { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.br-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.br-slot { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.br-empty { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--gap); text-align: center; border: 1px dashed var(--line); border-radius: var(--r-control); background: var(--surface-2); color: var(--text-3); font-size: 12px; }
.br-slot-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); font-size: 12.5px; }
.br-checks { flex-direction: column; gap: 10px; }
.br-foot { display: flex; justify-content: flex-end; }
.br-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.br-line { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-3); min-width: 0; }
.br-line b { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.bl-body { height: auto; padding: 10px 12px; line-height: 1.75; resize: vertical; }
.bl-thumbs { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: flex-end; }
.bl-thumb { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.bl-thumb img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: var(--r-control); border: 1px solid var(--line); }
@media (max-width: 640px) { .hp-btn > span { display: none; } .hp-btn { padding: 0 9px; } }
@media (prefers-reduced-motion: no-preference) {
  .hp-hit, .hp-chip, .bl-thumb, .br-card > * { animation: row-in .25s var(--ease) both; animation-delay: calc(min(var(--i, 0), 16) * 40ms); }
}
@media (prefers-reduced-motion: reduce) { .bd-photo, .br-photo, .hp-chip { transition: none; } }

/* ============================================================
   v43 — 책장 설정 창의 책 고르기(표지 + 추천하기) · 문제 풀이 글자 크기와 줄바꿈 · 다음 버튼을 문제 바로 아래로
   ============================================================ */
.sf-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: var(--gap); }
.sf-pick { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--gap); padding: 10px; border: 1px solid var(--line); border-radius: var(--r-surface);
  background: var(--surface); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.sf-pick[data-on="true"] { border-color: var(--accent); background: var(--accent-weak); }
.sf-pick img, .sf-pick .ph { width: 84px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-control); background: var(--surface-3); }
.sf-pick-info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.sf-pick-info > b { font-size: 14px; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-pick-by { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
.sf-pick-info > .btn { margin-top: auto; align-self: stretch; justify-content: center; }
.sf-pick-tools { flex-wrap: nowrap; }
.sf-pick-tools .sf-chip { flex: none; padding: 0 12px; }
.sf-pick-sep { width: 1px; height: 20px; background: var(--line); flex: none; }
.sf-editor .sf-more { align-self: center; }
@media (max-width: 760px) { .sf-pick-tools { flex-wrap: wrap; } }
@media (prefers-reduced-motion: no-preference) { .sf-pick { animation: row-in .25s var(--ease) both; animation-delay: calc(min(var(--i, 0), 12) * 30ms); } }

/* 문제 풀이: 보기 글의 줄바꿈을 그대로, 글자는 크게. 문제 칸은 내용만큼만 차지해 다음 버튼이 바로 아래에 온다.
   문제들을 한 칸에 겹쳐 두고(.q-pane) 지금 문제만 보인다 → 칸 높이 = 이 시험에서 가장 긴 문제. 문제마다 길이가 달라도
   넘길 때 아래 버튼 줄이 오르내리지 않는다(10/12). 가장 긴 문제가 화면보다 길면 짧은 문제에도 빈 스크롤이 조금 남는다 */
.q-stage { flex: 0 1 auto; display: grid; }
.q-pane { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); visibility: hidden; }
.q-pane[data-cur="true"] { visibility: visible; }
.q-text { font-size: 19px; white-space: pre-line; }
.q-desc:not(.lt-desc) { font-size: 16px; line-height: 1.8; white-space: pre-line; color: var(--text); }
.q-choice { font-size: 16px; padding: 14px var(--gap); }
.q-choice-text { white-space: pre-line; }
/* 글자를 키운 만큼 번호 동그라미도 맞춘다(동그라미가 작아 글자 첫 줄보다 떠 보였다). 간격·안쪽 여백은 다른 화면과 같은 --gap */
.q-stage .circle-num { width: 22px; height: 22px; font-size: 11px; margin-top: 1px; }
@media (max-width: 760px) { .q-text { font-size: 17px; } .q-desc, .q-choice { font-size: 15px; } }
@media (prefers-reduced-motion: no-preference) { .q-pane[data-enter] { animation: fade-in 160ms ease-out; } }
.r-area-bars { max-width: 640px; }

/* 교과연계 책장 시리즈 (10/12 · shelf-ui.js seriesShelf) */
.ss-slot-btn { font: inherit; text-align: center; cursor: pointer; }
.ss-slot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-empty .ph { display: grid; place-items: center; border: 1.5px dashed var(--line-2, var(--line)); background: transparent; color: var(--text-3); font-size: 24px;
  transition: border-color var(--dur) ease-out, color var(--dur) ease-out; }
.ss-empty:hover .ph { border-color: var(--accent); color: var(--accent); }
.ss-empty .shelf-title { color: var(--text-2); }
.ss-off { opacity: .55; cursor: default; }
.ss-off:hover { transform: none; }
.ss-slot { display: flex; flex-direction: column; gap: var(--gap); }
.ss-slot-head { display: flex; gap: var(--gap); align-items: flex-start; }
.ss-slot-head img, .ss-slot-head .ph { width: 72px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-control); background: var(--surface-3); flex: none; }
.ss-slot-head > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ss-form { display: grid; grid-template-columns: 2fr 1fr 1fr 110px; gap: var(--gap); }
@media (max-width: 640px) { .ss-form { grid-template-columns: 1fr 1fr; } .ss-form .field:first-child { grid-column: 1 / -1; } }

/* 발송함 미리보기·문구 설정 (10/12) — 학부모 휴대폰 말풍선 모양 */
.card.msg-notice { display: flex; flex-direction: row; align-items: center; gap: var(--gap); flex-wrap: wrap; }   /* .card 는 세로 쌓기라 가로로 돌려 둔다(안 그러면 아래 flex-basis 320px 가 높이가 된다) */
.card.msg-notice > span:first-child { flex: 1 1 320px; }   /* 안내 글이 남는 폭을 다 쓰고 문구 설정 단추는 오른쪽 끝에 */
.msg-preview, .msg-tpls { display: flex; flex-direction: column; gap: var(--gap); }
.msg-phone { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-surface); padding: var(--gap); }
.msg-bubble { max-width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 10px 12px;
  font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; box-shadow: var(--shadow-1); }
@media (prefers-reduced-motion: no-preference) { .msg-tpls .sf-sec { animation: row-in .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); } }

/* 책 페이지 · 교과 책 양식지 고르기 창 (10/12) */
.bk-sheets { display: flex; flex-direction: column; gap: var(--gap); }
.bk-sheets .btn { height: auto; padding: 10px 12px; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
@media (prefers-reduced-motion: no-preference) { .bk-sheets .btn { animation: row-in .25s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); } }

/* 알라딘에서 찾기·채우기 (10/12) */
.ss-al-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.ss-al-list:empty { display: none; }
.ss-al-item, .ss-fill-row { display: flex; align-items: center; gap: var(--gap); padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur) ease-out, background-color var(--dur) ease-out; }
.ss-al-item:hover, .ss-fill-row:hover { border-color: var(--accent); }
.ss-al-item img, .ss-al-item .ph, .ss-fill-row img, .ss-fill-row .ph { width: 40px; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; background: var(--surface-3); flex: none; }
.ss-al-item > span, .ss-fill-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-fill { display: flex; flex-direction: column; gap: 4px; }
.ss-fill-row[data-off="true"] { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: no-preference) { .ss-al-item, .ss-fill-row { animation: row-in .25s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); } }

/* 문제 글의 줄바꿈 살리기(10/13): 엑셀에서 둘째 줄에 둔 '( )의 뜻: …' 이 한 줄로 붙지 않게. 문제·보기·선택지·결과·오답 노트 공통 */
.q-text, .q-desc, .q-choice, .r-item-q, .r-choice, .wr-q, .wr-choice, .pl-choice { white-space: pre-line; }

/* 책 페이지에서 온 글쓰기: 책 검색 칸 대신 책 이름 (10/13) */
.wr-fixed { display: block; font-size: 15px; line-height: 36px; }

/* 큰 카테고리의 하위 탭 줄 (10/13 · shell.js subNav) — 제목 줄 바로 아래, 리드인처럼 칸 단추 */
.subnav { display: flex; gap: var(--gap); padding: var(--gap) var(--gap) 0; overflow-x: auto; flex: none; scrollbar-width: none; }
.subnav-item { flex: none; padding: 9px 18px; border-radius: var(--r-control); background: var(--accent-weak, var(--surface-2)); color: var(--text-2);
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out; }
.subnav-item:hover { color: var(--text); }
.subnav-item:active { transform: scale(.97); }
.subnav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.subnav-item[aria-current="page"] { background: var(--accent); color: #fff; }
@media print { .subnav { display: none !important; } }

/* 결과 보기 · 내가 쓴 글 (10/13) */
.rn-item { display: flex; flex-direction: column; gap: var(--gap); padding-top: var(--gap); border-top: 1px solid var(--line-soft); }
.rn-head { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) { .rn-item { animation: row-in .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); } }

/* 우리 아이들 접기 (10/13) */

/* 학원 공지·메모: 처음엔 작게, 쓰는 만큼 길어진다 (10/13) — dash.js memoCard fit() */
.memo-card .memo-area { flex: none; min-height: 84px; resize: none; overflow: hidden; field-sizing: content; }

/* 우리 아이들 이해도(추이) 칸 (10/13): 좁은 화면에서 가운데 정렬로 왼쪽 점수가 잘리던 것 — 왼쪽부터 채우고 꺾은선이 줄어든다 */
.kd-trend { justify-content: safe center; min-width: 0; } /* 10/20: 가운데로, 넘치면 왼쪽부터(safe) */
.kd-trend > .kd-score, .kd-trend > .kd-dir { flex: none; }
.kd-trend > .kd-spark { flex: 1 1 64px; min-width: 32px; max-width: 84px; }

/* 제목 줄: 좁은 화면에서 "학원 대 / 시보드"처럼 단어 중간에서 끊기던 것(10/13) — 한 줄로 두고 넘치면 말줄임, 학원 고르기 칸이 먼저 줄어든다 */
.topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; word-break: keep-all; }
@media (max-width: 560px) { .acad-switch { max-width: 112px; } }

/* 보고서 첫 줄 숫자 칸이 5개(독후활동 더함, 10/13)면 한 줄에 — 4개 + 1개로 떨어지던 것. 좁은 화면은 아래 480px 규칙대로 두 칸씩 */
@media (min-width: 481px) { .rpt-stats:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .rpt-stats:has(> :nth-child(5)) .stat-value { font-size: 20px; } }
@media (min-width: 481px) { .rpt-stats:has(> :nth-child(5)) .stat-foot { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; line-height: 1.4; } }

/* 패치노트(느낌표 버튼, 10/13) */
.pn-btn { position: relative; }
.pn-btn[data-new]::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); animation: pulse 1.6s ease-in-out infinite; }
.pn { display: flex; flex-direction: column; gap: var(--gap); }
.pn-item { border: 1px solid var(--line); border-radius: 8px; padding: var(--gap) calc(var(--gap) * 1.2); display: flex; flex-direction: column; gap: 4px; animation: row-in .24s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); transition: border-color .18s ease-out; }
.pn-item:hover { border-color: var(--accent); }
.pn-where { font-size: 12px; color: var(--text-3); }
.pn-title { font-weight: 700; }
.pn-desc { font-size: 13px; line-height: 1.55; word-break: keep-all; }
.pn-acts { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: 4px; }
.pn-acts:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .pn-item, .pn-btn[data-new]::after { animation: none; } }
.pn-side { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.pn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex: none; }
.pn-count { font-size: 12px; color: var(--text-3); }
.guide-main .pn { margin-top: var(--gap); }

/* 진단 집중 화면(10/16 요청): 진단을 시작하면 왼쪽 메뉴·제목 줄을 감추고 문제만 가운데에.
   문제 칸은 지금 문제 높이만큼, 이전·번호·다음 줄은 보기 바로 아래에 붙는다 */
body.quiz-focus .app { grid-template-columns: minmax(0, 1fr); }
body.quiz-focus .sidebar, body.quiz-focus .topbar, body.quiz-focus .subnav, body.quiz-focus .nav-scrim { display: none !important; }
body.quiz-focus .content { width: 100%; max-width: 880px; margin: 0 auto; overflow: hidden; }
body.quiz-focus .q-stage { flex: 1 1 0; min-height: 0; overflow-y: auto; display: block; }
body.quiz-focus .q-pane:not([data-cur="true"]) { display: none; }
body.quiz-focus .q-foot { padding: var(--gap); }   /* 보기 바로 아래(10/16 — 맨 아래 고정은 멀어서 바꿈). 문제가 길어 칸이 넘치면 문제 칸만 스크롤 */
body.quiz-focus .q-foot .btn { height: 44px; padding: 0 calc(var(--gap) * 2); font-size: 15px; }

/* 문제 카드: 문제 위·보기 아래(10/16). 카드 크기는 화면에 맞춰 고정 — 문제마다 커졌다 작아지지 않고, 길면 카드 안에서 스크롤 */
.q-ask { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* 이전·다음: 카드 아래 한 줄에 반반 */
.q-nav { display: flex; gap: var(--gap); flex: none; }
.q-nav[hidden] { display: none; }
.q-nav > .q-nav-btn, .q-nav-r { flex: 1 1 0; min-width: 0; }
.q-nav-r { display: flex; gap: var(--gap); }
.q-nav-r > .q-nav-btn { flex: 1 1 0; }
.q-nav-btn { height: 52px; gap: 4px; font-size: 16px; font-weight: 600; white-space: nowrap; border-radius: var(--r-surface); }
.q-nav-btn svg { width: 18px; height: 18px; flex: none; }
.q-nav-btn:disabled { opacity: .35; cursor: not-allowed; }   /* 누를 수 없는 이전·다음은 흐리게 */
/* 이전: 연한 회색(10/16 요청). 다음은 진한 남색 */
:root { --q-prev-bg: #f1f2f4; --q-prev-bg-hover: #e4e6ea; --q-prev-line: #d4d7dd; --q-prev-text: #4b5563; }
:root[data-theme="dark"] { --q-prev-bg: #2a2d33; --q-prev-bg-hover: #353941; --q-prev-line: #454a53; --q-prev-text: #d1d5db; }
.q-nav-prev { background: var(--q-prev-bg); color: var(--q-prev-text); border-color: var(--q-prev-line); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.q-nav-prev:not(:disabled):hover { background: var(--q-prev-bg-hover); border-color: var(--q-prev-text); }
.q-nav-btn:not(:disabled):active { transform: translateY(1px); }
/* 진단 시간: 크게(10/16 요청) */
body.quiz-focus .q-head-right { font-size: 15px; color: var(--text); }
body.quiz-focus .q-timer { font-size: 22px; font-weight: 700; letter-spacing: .02em; }
body.quiz-focus .q-head-right svg { width: 18px; height: 18px; }

/* 진단 모달(10/16 요청): 책 페이지 위에 띄우고 뒤는 흐리게·누를 수 없게(.app 에 inert) */
.quiz-scrim { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--gap);
  background: rgb(24 24 27 / .38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade-in 180ms var(--ease); }
.quiz-scrim[data-closing="true"] { animation: fade-out 160ms var(--ease) forwards; }
.quiz-box { width: min(960px, 100%); height: min(880px, 100%); border-radius: var(--r-surface); overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow-3); animation: modal-in 220ms var(--ease); }
.quiz-scrim[data-closing="true"] .quiz-box { animation: modal-out 160ms var(--ease) forwards; }
.quiz-frame { display: block; width: 100%; height: 100%; border: 0; }
/* 모달 안의 진단 화면: 위 굵은 줄 없이 꽉 차게 */
body.quiz-embed .app { border-top: 0; }
body.quiz-embed .content { max-width: none; }
.quiz-box { height: min(760px, 100%); }

/* 진행 칸: 문제마다 한 칸, 푼 문제는 남색으로 찬다. 지금 문제는 테두리(10/16) */
.q-cells { display: flex; gap: 4px; }
.q-cell { flex: 1 1 0; height: 10px; border-radius: 3px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--dur) var(--ease); }
.q-cell[data-done] { background: var(--accent); box-shadow: none; }
.q-cell[data-cur] { box-shadow: 0 0 0 2px var(--accent-weak), inset 0 0 0 1px var(--accent); }
/* 문제와 지문 사이를 조금 더 */
.q-ask > .q-desc { margin-top: var(--gap); }
/* 어휘 문항의 「( )의 뜻: …」: 한 줄 띄우고 형광펜 */
.q-hint { display: block; margin-top: 1.2em; }
.q-hl { background: var(--q-pen); color: inherit; padding: 1px 4px; border-radius: 3px; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root { --q-pen: #fde68a; }
:root[data-theme="dark"] { --q-pen: rgb(250 204 21 / .35); }

/* ---------- 어휘 활동(10/16, word-activity.js): 만나보기 → 문제풀기 → 단어장 ---------- */
.wa { display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); }
.wa-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); }
.wa-steps { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.wa-step { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); color: var(--text); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.wa-step small { grid-column: 2; color: var(--text-3); font-size: 11.5px; }
.wa-step[data-on="true"] { border-color: var(--ok); }
a.wa-step:hover { border-color: var(--accent); transform: translateY(-1px); }
.wa-step-n { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.wa-step[data-on="true"] .wa-step-n { background: var(--ok); }
.wa-arrow { color: var(--text-3); }
.wa-acts { display: flex; gap: var(--gap); flex-wrap: wrap; }
.wa-legend { display: flex; gap: var(--gap); font-size: 12px; color: var(--text-2); }
.wa-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; background: var(--k); }
[data-st="met"] { --k: var(--accent); } [data-st="ok"] { --k: var(--ok); } [data-st="no"] { --k: var(--danger); }
[data-st="unk"] { --k: var(--warn, #d97706); }
.wa-ask { display: flex; flex-direction: column; align-items: center; gap: var(--gap); padding: 12px; border-radius: var(--r-control); background: var(--surface-2); font-weight: 600; }
.wa-ask-fb { animation: fade-in 200ms var(--ease); }
.wa-ask-fb[data-k="1"] { color: var(--ok); } .wa-ask-fb[data-k="0"] { color: var(--warn, #d97706); }
.wa-mean:not([hidden]) { animation: fade-in 220ms var(--ease); }
.wa-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); }
.wa-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; text-align: left; border: 1px solid var(--line-soft); border-left: 3px solid var(--k, var(--line));
  border-radius: var(--r-control); background: var(--surface); color: var(--text); cursor: pointer;
  animation: pop-in 260ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.wa-item:hover { background: var(--surface-3); transform: translateY(-1px); }
.wa-item span { font-size: 12.5px; color: var(--text-2); }
.wa-bar { display: flex; align-items: center; gap: var(--gap); }
.wa-card { display: flex; flex-direction: column; gap: var(--gap); padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-1); animation: modal-in 240ms var(--ease); max-width: 640px; width: 100%; margin: 0 auto; }
.wa-card-top { display: flex; align-items: center; gap: 6px; }
.wa-count { margin-right: auto; color: var(--text-3); font-size: 12px; }
.wa-word { font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.wa-mean { font-size: 16px; line-height: 1.6; }
.wa-ex { margin: 0; padding: 10px 14px; border-left: 3px solid var(--hl); background: var(--surface-2); border-radius: 6px; line-height: 1.7; color: var(--text-2); }
.wa-ex mark { background: color-mix(in srgb, var(--hl) 55%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }
.wa-nav { display: flex; justify-content: center; gap: var(--gap); }
.wa-prog { display: flex; gap: 4px; max-width: 640px; width: 100%; margin: 0 auto; }
.wa-prog span { flex: 1; height: 6px; border-radius: 3px; background: var(--k, var(--surface-3)); transition: background var(--dur) var(--ease); }
.wa-prog span[data-st="cur"] { --k: var(--accent); opacity: .45; }
.wa-q-stem { font-size: 16px; line-height: 1.7; }
.wa-q-stem small { display: block; color: var(--text-3); margin-bottom: 4px; }
.wa-blank { display: inline-block; min-width: 4em; border-bottom: 2px solid var(--accent); color: transparent; }
.wa-opts { display: flex; flex-direction: column; gap: var(--gap); }
.wa-opt { display: flex; gap: var(--gap); align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface);
  color: var(--text); text-align: left; cursor: pointer; animation: pop-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.wa-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.wa-opt:disabled { cursor: default; }
.wa-opt[data-state="ok"] { border-color: var(--ok); background: var(--ok-weak); }
.wa-opt[data-state="no"] { border-color: var(--danger); background: var(--danger-weak); }
.wa-opt-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 12px; font-weight: 700; }
.wa-fb:empty { display: none; }
.wa-fb { padding: 8px 12px; border-radius: var(--r-control); animation: fade-in 200ms var(--ease); }
.wa-fb[data-ok="true"] { background: var(--ok-weak); color: var(--ok); }
.wa-fb[data-ok="false"] { background: var(--danger-weak); color: var(--danger); }
.wa-done { display: flex; flex-direction: column; align-items: center; gap: var(--gap); padding: 24px; animation: modal-in 240ms var(--ease); }
.wa-score { font-size: 36px; font-weight: 800; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .wa-item, .wa-card, .wa-opt, .wa-done, .wa-fb { animation: none; } .wa-item:hover, .wa-opt:hover, a.wa-step:hover { transform: none; } }

/* ---------- 오늘의 응원(10/16, 내 대시보드 맨 위) ---------- */
.me-today { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap); }
@media (max-width: 860px) { .me-today { grid-template-columns: 1fr; } }
.td-left, .td-right { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.td-label { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.td-cheer { font-size: 19px; font-weight: 800; line-height: 1.45; color: var(--text); }
.td-msg { display: block; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: var(--accent-weak); color: var(--text);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); animation: pop-in 260ms var(--ease) backwards; }
.td-msg:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.td-msg[data-new="true"] { box-shadow: inset 3px 0 0 var(--hl); }
.td-msg-who { font-size: 11.5px; color: var(--text-3); margin-bottom: 2px; }
.td-msg-body { line-height: 1.55; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.td-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.td-item { display: flex; align-items: center; gap: var(--gap); padding: 6px 8px 6px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-control);
  animation: pop-in 240ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); transition: background var(--dur) var(--ease); }
.td-item:hover { background: var(--surface-2); }
.td-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); }
.td-item[data-kind="diag"] .td-dot { background: var(--danger); }
.td-item[data-kind="word"] .td-dot { background: var(--hl); }
.td-item[data-kind="read"] .td-dot { background: var(--ok); }
.td-item[data-late="true"] .td-text { color: var(--danger); }
.td-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-empty { color: var(--ok); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .td-msg, .td-item { animation: none; } .td-msg:hover { transform: none; } }

/* ---------- 승급·주의 알림(10/16, 학원 대시보드) ---------- */
.al-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); padding: var(--gap); }
@media (max-width: 860px) { .al-body { grid-template-columns: 1fr; } }
.al-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.al-h { font-weight: 700; flex: none; }
.al-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--gap); min-height: 28px; }   /* 제목 옆에 칩(10/20) */
.al-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.al-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: var(--r-control);
  animation: pop-in 240ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.al-why { display: flex; flex-wrap: wrap; gap: 4px; }
.al-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.al-tag[data-k="up"] { background: var(--ok-weak); color: var(--ok); }
.al-tag[data-k="stop"], .al-tag[data-k="low"], .al-tag[data-k="down"] { background: var(--danger-weak); color: var(--danger); }
.al-tag[data-k="short"] { background: var(--warn-weak); color: var(--warn); }
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.al-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 12px; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.al-chip:hover { border-color: var(--accent); }
.al-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) { .al-row { animation: none; } }

/* ---------- 독서 기록장 · 도서별 활동(10/16, records-ui.js) ---------- */
.rc { display: flex; flex-direction: column; gap: var(--gap); }
.rc-top { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: var(--gap); }
@media (max-width: 760px) { .rc-top { grid-template-columns: 1fr; } }
.rc-cal, .rc-sum, .rc-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: var(--gap); }
.rc-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rc-w { text-align: center; font-size: 11px; color: var(--text-3); }
.rc-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; min-height: 38px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--text-3); font-size: 12px; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.rc-day[data-has="true"] { color: var(--text); background: var(--surface-2); cursor: pointer; }
.rc-day[data-has="true"]:hover { border-color: var(--accent); }
.rc-day[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-weak); }
.rc-day[data-today="true"] b { color: var(--accent); text-decoration: underline; }
.rc-dots { display: flex; gap: 2px; }
.rc-dots i, .rc-legend i, .rc-acts i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--k); }
.rc i[data-k="read"], .rc-detail i[data-k="read"] { --k: var(--ok); }
.rc i[data-k="diag"], .rc-detail i[data-k="diag"] { --k: var(--accent); }
.rc i[data-k="note"], .rc-detail i[data-k="note"] { --k: #c2410c; }
.rc i[data-k="word"], .rc-detail i[data-k="word"] { --k: #ca8a04; }
.rc-legend { display: flex; gap: var(--gap); margin-top: 6px; font-size: 11.5px; color: var(--text-2); }
.rc-legend i { margin-right: 3px; }
.rc-sum { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); align-content: center; }
.rc-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.rc-stat b { font-size: 26px; color: var(--accent); }
.rc-stat span { font-size: 12px; color: var(--text-2); }
.rc-bar { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.rc-sec-h { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--gap); }
.rc-sec-h span { font-size: 12px; color: var(--text-3); }
.rc-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.rc-book { display: flex; gap: var(--gap); padding: 8px; text-align: left; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer;
  animation: pop-in 240ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.rc-book:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.rc-book img, .rc-ph { width: 56px; height: 76px; object-fit: cover; border-radius: 4px; flex: none; background: var(--surface-3); }
.rc-book-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-book-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-book-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.rc-acts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--text-3); }
.rc-acts span { display: inline-flex; align-items: center; gap: 4px; }
.rc-acts span:not([data-on]) i { opacity: .3; }
.rc-acts span[data-on] { color: var(--text-2); }
.rc-acts span[data-warn="true"] { color: var(--danger); }
.rc-detail { display: flex; flex-direction: column; gap: var(--gap); }
.rc-d-sum { display: flex; gap: var(--gap); align-items: center; }
.rc-d-sum img { width: 64px; height: 88px; object-fit: cover; border-radius: 4px; }
.rc-d-sec h3 { margin: 0 0 6px; font-size: 14px; }
.rc-round { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--gap); }
.rc-round-h { display: flex; align-items: center; gap: 6px; }
.rc-logs td[data-warn="true"] { color: var(--danger); font-weight: 700; }
.rc-edit { display: inline-flex; align-items: center; gap: 4px; }
.rc-pg { width: 64px; height: 28px; }
.rc-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.rc-words { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-words span { padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--surface-3); border-left: 3px solid var(--k, transparent); }
@media (prefers-reduced-motion: reduce) { .rc-book { animation: none; } .rc-book:hover { transform: none; } }
/* 추천 태그(10/16, 책장 설정) */
.sf-tag-grp { width: 44px; flex: none; font-size: 12px; font-weight: 700; color: var(--text-3); align-self: center; }
/* 양식지 QR(10/16): 노트코드 칸 위에. 선생님이 노트를 한꺼번에 올릴 때 학생·책·양식을 자동으로 맞춘다 */
.sh-qr { width: 64px; height: 64px; margin: 0 0 4px auto; }
.sh-qr svg { width: 100%; height: 100%; display: block; }

/* ---------- 독서노트 한꺼번에 올리기(10/16, bulk-notes.js) ---------- */
.bn { display: flex; flex-direction: column; gap: var(--gap); }
.bn-help { font-size: 12.5px; color: var(--text-2); }
.bn-bar { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.bn-sum { font-size: 12.5px; color: var(--text-2); }
.bn-list { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow: auto; }
.bn-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 150px auto; gap: var(--gap); align-items: center; padding: 6px; border: 1px solid var(--line-soft); border-radius: var(--r-control);
  animation: pop-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); transition: opacity var(--dur) var(--ease); }
.bn-row[data-done="true"] { opacity: .55; }
.bn-thumb { width: 56px; height: 72px; object-fit: cover; border-radius: 4px; background: var(--surface-3); }
.bn-fields { display: grid; grid-template-columns: 140px minmax(0, 1fr) 64px; gap: 6px; }
.bn-state { font-size: 12px; color: var(--text-3); }
.bn-state[data-k="ok"] { color: var(--ok); font-weight: 600; }
.bn-state[data-k="warn"] { color: var(--danger); }
@media (max-width: 760px) { .bn-row { grid-template-columns: 56px minmax(0, 1fr); } .bn-fields { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bn-row { animation: none; } }

/* 권한 확인 전 메뉴 숨김 · 권한 없는 화면 안내 · 로그인돼 있음 안내(10/16) */
.nav[data-pending="true"], .subnav[data-pending="true"] { visibility: hidden; }
.app[data-blocked="true"] .content > :not(.perm-block) { display: none !important; }
.perm-block .empty { padding: 40px 16px; }
.login-already { display: flex; flex-direction: column; gap: var(--gap); align-items: stretch; animation: pop-in 220ms var(--ease); }
.login-already b { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .login-already { animation: none; } }

/* ---------- 오답 노트 책별·회차별(10/19) ---------- */
.wr-group { display: flex; flex-direction: column; gap: var(--gap); animation: pop-in 240ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.wr-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line-soft); }
.wr-tries { display: inline-flex; gap: 4px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .wr-group { animation: none; } }

/* ---------- 독서 여정 · 정독 테라피(10/19, 책 화면) ---------- */
.bk-journey { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.bk-journey li { position: relative; animation: pop-in 240ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.bk-journey li + li::before { content: ''; position: absolute; left: calc(var(--gap) * -1); top: 50%; width: var(--gap); height: 2px; background: var(--line); }
.bk-journey li[data-st="done"] + li::before { background: var(--ok); }
.bk-jstep { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 8px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.bk-jstep:hover { border-color: var(--accent); transform: translateY(-1px); }
.bk-jstep small { grid-column: 2; color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-jn { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 700; }
li[data-st="doing"] .bk-jstep { border-color: var(--accent); }
li[data-st="doing"] .bk-jn { background: var(--accent); color: #fff; }
li[data-st="done"] .bk-jn { background: var(--ok); color: #fff; }
li[data-st="skip"] .bk-jstep { opacity: .6; }
@media (max-width: 560px) { .bk-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-journey li + li::before { display: none; } }
.th-card { display: flex; flex-direction: column; gap: var(--gap); padding: 14px 16px; border: 1px solid var(--danger); border-radius: 12px; background: var(--danger-weak); animation: pop-in 240ms var(--ease); }
.th-card[data-seen="true"] > :not(.th-head) { display: none; }
.th-card[data-seen="true"] { background: var(--surface); border-color: var(--line); }
.th-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.th-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.th-list li { line-height: 1.6; animation: pop-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.th-list li .chip { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .bk-journey li, .th-card, .th-list li { animation: none; } .bk-jstep:hover { transform: none; } }

/* ---------- 책 듣기(오디오북, 10/19) ---------- */
.ab { display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); }
.ab-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.ab-img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--surface-2); }
.ab-text { font-size: 17px; line-height: 1.9; white-space: pre-wrap; padding: 4px 8px; }
.ab-bar { display: flex; align-items: center; justify-content: center; gap: var(--gap); flex-wrap: wrap; }
.ab-pos { color: var(--text-3); font-size: 13px; min-width: 56px; text-align: center; }
@media (max-width: 720px) { .ab-page { grid-template-columns: 1fr; } }

/* ---------- 요약 노트(10/19) ---------- */
.sn { display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); }
.sn-write { display: flex; flex-direction: column; gap: var(--gap); padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.sn-stage { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sn-row { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: flex-start; }
.sn-acts { display: flex; justify-content: flex-end; gap: var(--gap); }
.sn-card { display: flex; flex-direction: column; gap: var(--gap); padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface);
  animation: pop-in 240ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.sn-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sn-cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
@media (max-width: 720px) { .sn-cmp { grid-template-columns: 1fr; } }
.sn-col { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-control); background: var(--surface-2); }
.sn-col p { margin: 0; line-height: 1.7; white-space: pre-wrap; }
.sn-col-final { background: var(--accent-weak, var(--surface-2)); }
.sn-col-t { font-size: 12px; font-weight: 700; color: var(--text-3); }
.sn-fb { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 6px; font-size: 13.5px; line-height: 1.6; animation: fade-in 220ms var(--ease); }
.sn-fb b { font-size: 12px; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sn-card, .sn-fb { animation: none; } }

.rc-proc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rc-proc .input:not(.rc-pg) { flex: 1 1 200px; }
.rc-sum-note { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--r-control); background: var(--surface-2); margin-bottom: 6px; line-height: 1.6; }

/* ---------- 오늘의 응원: 배지 · 활동 이어가기(10/19) ---------- */
.td-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.td-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--warn-weak); color: var(--warn); font-size: 12.5px; font-weight: 700;
  animation: pop-in 260ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.td-journey { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-control); color: var(--text); text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); animation: pop-in 240ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.td-journey:hover { border-color: var(--accent); transform: translateY(-1px); }
.td-journey b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.td-steps li { text-align: center; padding: 3px 4px; border-radius: 6px; font-size: 12px; background: var(--surface-3); color: var(--text-2); }
.td-steps li[data-st="doing"] { background: var(--accent-weak); color: var(--accent); font-weight: 700; }
.td-steps li[data-st="done"] { background: var(--ok-weak); color: var(--ok); font-weight: 700; }
.td-steps li[data-st="skip"] { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .td-badge, .td-journey { animation: none; } .td-journey:hover { transform: none; } }

/* ---------- 어휘 놀이: 메모리 게임 · 십자말풀이(10/19) ---------- */
.modal-md { width: min(640px, 100%); }
.vg-mem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .vg-mem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vg-mem { position: relative; min-height: 76px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--accent); color: #fff; cursor: pointer;
  animation: pop-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); transition: transform 200ms var(--ease), background 200ms var(--ease); }
.vg-mem:hover:not([data-open]):not([data-done]) { transform: translateY(-2px); }
.vg-mem-back { font-size: 22px; font-weight: 800; }
.vg-mem-face { display: none; font-size: 13px; line-height: 1.4; }
.vg-mem-face[data-kind="w"] { font-size: 16px; font-weight: 800; }
.vg-mem[data-open], .vg-mem[data-done] { background: var(--surface); color: var(--text); }
.vg-mem[data-open] .vg-mem-back, .vg-mem[data-done] .vg-mem-back { display: none; }
.vg-mem[data-open] .vg-mem-face, .vg-mem[data-done] .vg-mem-face { display: block; animation: fade-in 180ms var(--ease); }
.vg-mem[data-done] { border-color: var(--ok); background: var(--ok-weak); }
.vg-crosswrap { display: flex; flex-direction: column; gap: var(--gap); align-items: stretch; }
.vg-cross { --cs: 38px; display: grid; gap: 2px; justify-content: center; }
.vg-cell { position: relative; width: var(--cs); height: var(--cs); }
.vg-cell[data-on] { border: 1.5px solid var(--text-2); border-radius: 4px; background: var(--surface); display: grid; place-items: center; font-weight: 800; font-size: 17px;
  transition: background 200ms var(--ease), border-color 200ms var(--ease); }
.vg-cell small { position: absolute; top: 1px; left: 3px; font-size: 9.5px; font-weight: 700; color: var(--text-3); }
.vg-cell[data-good="true"] { background: var(--ok-weak); border-color: var(--ok); }
.vg-cell[data-good="false"] { background: var(--danger-weak); border-color: var(--danger); }
.vg-clues { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
@media (max-width: 560px) { .vg-clues { grid-template-columns: 1fr; } }
.vg-clues ol { margin: 4px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.vg-clues li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 4px; font-size: 13px; line-height: 1.5; }
.vg-clues li .input { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .vg-mem { animation: none; transition: none; } .vg-mem-face { animation: none !important; } }

/* ---------- 수업 준비 · 오늘의 수업(10/19) ---------- */
.pp-body { display: flex; flex-direction: column; gap: var(--gap); }
.pp-table tbody tr { animation: pop-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.pp-table td[data-old] { color: var(--danger); font-weight: 700; }
.pp-todo { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-chip { padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--surface-3); color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.pp-chip:hover { transform: translateY(-1px); background: var(--accent-weak); color: var(--accent); }
.pp-chip[data-tone="danger"] { background: var(--danger-weak); color: var(--danger); }
.pp-chip[data-tone="accent"] { background: var(--accent-weak); color: var(--accent); }
.pp-chip[data-tone="warn"] { background: var(--warn-weak); color: var(--warn); }
.pp-log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pp-log li { display: grid; grid-template-columns: 52px 48px 90px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line-soft);
  animation: pop-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.pp-log li[data-warn] .pp-desc { color: var(--danger); }
.pp-time { color: var(--text-3); font-size: 12.5px; }
.pp-kind { font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 6px; text-align: center; background: var(--surface-3); }
.pp-log li[data-k="diag"] .pp-kind { background: var(--accent-weak); color: var(--accent); }
.pp-log li[data-k="read"] .pp-kind { background: var(--ok-weak); color: var(--ok); }
.pp-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-desc { font-size: 13px; color: var(--text-2); }
@media (max-width: 720px) { .pp-log li { grid-template-columns: 44px 44px minmax(0, 1fr) auto; } .pp-title, .pp-desc { grid-column: 3 / -1; } }
@media (prefers-reduced-motion: reduce) { .pp-table tbody tr, .pp-log li { animation: none; } .pp-chip:hover { transform: none; } }

.bn-attend { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); animation: pop-in 220ms var(--ease); }
.bn-attend-h { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.bn-attend-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .bn-attend { animation: none; } }

.rp-later { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--line); }

/* ---------- 이용권(10/19) ---------- */
.ps-body { display: flex; flex-direction: column; gap: var(--gap); }
.ps-stats .card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ps-table tbody tr { animation: pop-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.ps-table td[data-old] { color: var(--danger); font-weight: 700; }
.ps-orders { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
.ps-ledger { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ps-ledger li { display: grid; grid-template-columns: 100px 70px 60px minmax(0, 1fr); gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.ps-ledger b[data-k="plus"] { color: var(--ok); } .ps-ledger b[data-k="minus"] { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ps-table tbody tr { animation: none; } }

/* ---------- 교사 추천 도서(10/19) ---------- */
.pk-list { display: flex; flex-direction: column; gap: 8px; }
.pk-item { display: grid; grid-template-columns: 32px 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-control);
  animation: pop-in 220ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.pk-item img, .pk-ph { width: 44px; height: 60px; object-fit: cover; border-radius: 4px; background: var(--surface-3); }
.pk-rank { font-size: 18px; font-weight: 800; color: var(--accent); text-align: center; }
.pk-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-comment { font-size: 13px; color: var(--text-2); }
.pk-heart { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 700; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pk-heart[aria-pressed="true"] { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
.pk-heart:active:not(:disabled) { transform: scale(.94); }
.me-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--gap); }
@media (prefers-reduced-motion: reduce) { .pk-item { animation: none; } }

/* ---------- 성장 리포트(10/19) ---------- */
.rpt-growth { display: flex; flex-direction: column; gap: 10px; }
.rpt-gtype { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--accent-weak); }
.rpt-gtype b { font-size: 20px; color: var(--accent); }
.rpt-gtags { display: flex; flex-wrap: wrap; gap: 6px; }
.rpt-gblock h3 { margin: 0 0 4px; font-size: 14px; }
.gr-card .rpt-gtype b { font-size: 17px; }
.gr-card { display: flex; flex-direction: column; gap: 10px; }
.gr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 860px) { .gr-cols { grid-template-columns: 1fr; } }
.gr-crit { display: flex; flex-wrap: wrap; gap: 6px; }
/* 진단 창(책 화면 모달 안 iframe)에서는 알림을 위 가운데에 — 아래쪽은 모달 밖이라 안 보였다(10/19 확인) */
body.quiz-embed .toasts { top: 12px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); align-items: center; }

/* 글쓰기 노트(10/19, writing-note.js): 발문연구소 책별 과제를 칸으로 — 종이 양식과 같은 차례 */
.wn { display: flex; flex-direction: column; gap: var(--gap); }
.wn-pickers { display: flex; flex-wrap: wrap; gap: var(--gap); }
.wn-head { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-surface); background: var(--surface-2); }
.wn-kind { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.wn-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); text-wrap: balance; }
.wn-intro { margin: 0; color: var(--text); line-height: 1.6; }
.wn-caution { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.wn-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-surface); background: var(--surface); }
.wn-card-head { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.wn-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.wn-q { color: var(--text); line-height: 1.55; }
.wn-link { align-self: center; color: var(--accent-text); font-size: 13px; font-weight: 600; }
.wn-help { padding: 10px 12px; border-radius: var(--r-control); background: var(--accent-weak); color: var(--text); font-size: 13px; line-height: 1.55; }
.wn-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.wn-pick .input { flex: 1 1 220px; }
.wn-opt { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text); text-align: left; line-height: 1.4;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.wn-opt:hover { border-color: var(--accent); }
.wn-opt:active { transform: scale(.98); }
.wn-opt[aria-checked="true"] { border-color: var(--accent); background: var(--accent-weak); color: var(--accent-text); font-weight: 600; }
.wn-outline { display: flex; flex-direction: column; gap: 6px; }
.wn-orow { display: grid; grid-template-columns: 72px 1fr; gap: var(--gap); align-items: start; }
.wn-orow b { padding-top: 8px; font-size: 13px; }
.wn-checks { display: flex; flex-direction: column; gap: 6px; }
.wn-check { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; cursor: pointer; }
.wn-check input { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) { .wn-card { animation: row-in .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 8) * 40ms); } }

/* 내 책장 위 카드: 추천 책장 바퀴 · 읽을 차례(크게) + 읽은 책 영역별 권수 표 (10/20) */
.sf-status { display: flex; flex-direction: column; gap: var(--gap); padding-top: var(--gap); animation: sfStatusIn .3s var(--ease) both; }
.sf-turn { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--gap); padding: var(--gap); border-radius: var(--r-control);
  background: var(--accent-weak); border-left: 4px solid var(--accent); }
.sf-turn b { font-size: 18px; color: var(--accent-text); }
.sf-turn span { font-size: 16px; font-weight: 700; color: var(--text); }
.sf-read { overflow-x: auto; }
.sf-read table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.sf-read th, .sf-read td { padding: 6px 8px; border: 1px solid var(--line); white-space: nowrap; }
.sf-read thead th { background: var(--surface-2); color: var(--text-2); font-weight: 700; }
.sf-read tbody th { color: var(--text-2); font-weight: 700; }
.sf-read td { font-weight: 700; color: var(--text); }
.sf-read .on { background: var(--accent-weak); color: var(--accent-text); }
@keyframes sfStatusIn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .sf-status { animation: none; } }

/* 문해력 책장 단계 막대(10/20): 레벨 상자 + 추천 1·2·3바퀴 → 설계 → 진로 */
.sf-path { display: flex; align-items: center; gap: var(--gap); padding: var(--gap); border: 1px solid var(--line); border-radius: var(--r-surface); overflow-x: auto; }
.sf-path-lv { flex: none; width: 64px; height: 64px; border-radius: var(--r-control); background: var(--accent); color: #fff;
  display: flex; align-items: baseline; justify-content: center; padding-top: 10px; }
.sf-path-lv b { font-size: 30px; line-height: 1; }
.sf-path-lv span { font-size: 11px; font-weight: 700; opacity: .8; margin-left: 2px; }
.sf-path-steps { flex: 1; min-width: 420px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sf-path-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; text-align: center;
  animation: sfStatusIn .3s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.sf-path-top { min-height: 1.4em; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.sf-path-dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); transition: background .2s var(--ease), border-color .2s var(--ease); }
.sf-path-steps li:not(:last-child)::after { content: ''; position: absolute; top: calc(1.4em + 6px + 10px); left: 50%; width: 100%; height: 3px; background: var(--line); }
.sf-path-steps li b { color: var(--text-2); white-space: nowrap; }
.sf-path-steps li[data-on='done'] .sf-path-dot { background: var(--accent); border-color: var(--accent); opacity: .55; }
.sf-path-steps li[data-on='done']::after { background: var(--accent); opacity: .55; }
.sf-path-steps li[data-on='now'] .sf-path-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-weak); }
.sf-path-steps li[data-on='now'] b, .sf-path-steps li[data-on='now'] .sf-path-top { color: var(--accent-text); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .sf-path-steps li { animation: none; } }

/* 오답 노트 책별: 책 표지 카드(10/20, 리드인처럼) — 누르면 그 책의 오답 */
.wr-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); }
.wr-book { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--gap); padding: var(--gap); text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface); cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  animation: sfStatusIn .3s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.wr-book:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 18px rgb(0 0 0 / .08); }
.wr-book:active { transform: translateY(0) scale(.99); }
.wr-book:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wr-book img, .wr-book .ph { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-control); background: var(--surface-3); border: 1px solid var(--line); }
.wr-book-info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; font-size: 13px; color: var(--text-2); }
.wr-book-info strong { max-width: 100%; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-book-info b { color: var(--text); margin-right: 2px; }
.wr-book-info .chip { margin-top: auto; }
@media (max-width: 480px) { .wr-books { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wr-book { animation: none; transition: none; } }

/* 교과연계 책 담기(선생님 책장 설정 창, 10/20): 담은 책은 테두리·체크로 */
.ss-pick { position: relative; font: inherit; text-align: left; cursor: pointer; border: 2px solid transparent; border-radius: var(--r-surface);
  transition: transform .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease); }
.ss-pick:hover { transform: translateY(-2px); }
.ss-pick:active { transform: scale(.98); }
.ss-pick[aria-pressed='false'] img, .ss-pick[aria-pressed='false'] .ph { opacity: .6; }
.ss-pick[aria-pressed='true'] { border-color: var(--accent); }
.ss-pick[aria-pressed='true'] .shelf-sub { color: var(--accent-text); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ss-pick { transition: none; } }

/* 학원 공지·메모 (10/20 요청): 늘 오늘 출결 칸과 같은 높이. contain:size 라 메모 글이 줄 높이를 키우지 않고, 넘치면 칸 안에서 스크롤 */
.dash-pair > .memo-card { contain: size; min-height: 200px; }
.memo-card .memo-area { flex: 1 1 0; min-height: 0; height: auto; overflow: auto; field-sizing: fixed; }

/* 대시보드 탭(10/20): 오늘 출결·메모 / 승급·주의 알림. 알림 목록은 칸 안 세로 스크롤 없이 다 펼친다 */
.dash-tabs { display: flex; flex-direction: column; gap: var(--gap); flex: none; }
.dash-tabs > .seg { align-self: flex-start; }
.dash-tab-panel:not([hidden]) { animation: dash-tab-in .2s ease-out; }
@keyframes dash-tab-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .dash-tab-panel:not([hidden]) { animation: none; } }
/* 오늘 출결 · 메모 탭(10/20): 승급·주의 알림이 출결·메모 아래 남은 높이를 채워 페이지 스크롤이 안 생긴다. 알림이 많으면 목록 안에서 스크롤.
   좁거나 낮은 화면은 예전처럼 페이지가 길어진다 */
.dash-today { display: flex; flex-direction: column; gap: var(--gap); }
.dash-today > .dash-pair { flex: none; }
@media (min-width: 861px) and (min-height: 640px) {
  .dash:has(> .dash-tabs > .dash-tab-panel[data-k="today"]:not([hidden])) { flex: 1 1 auto; min-height: 0; }
  .dash:has(> .dash-tabs > .dash-tab-panel[data-k="today"]:not([hidden])) > .dash-tabs,
  .dash-tab-panel[data-k="today"]:not([hidden]),
  .dash-today { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .dash-today > .al-card { flex: 1 1 auto; min-height: 220px; display: flex; flex-direction: column; }
  .dash-today .al-body { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .dash-today .al-col { min-height: 0; }
  .dash-today .al-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
}

/* 하위 탭(10/20 요청): 제목 줄 안, 제목 옆에 .seg 탭 모양으로. 위 .subnav 큰 알약 모양을 덮는다 */
.topbar .subnav { padding: 3px; gap: 2px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar .subnav-item { padding: 0 10px; text-decoration: none; background: transparent; }
.topbar .subnav-item[aria-current="page"] { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-1); }
/* 우리 아이들 표 '수업에서 챙길 것' 칩 가운데(10/20) */
.pp-todo { justify-content: center; }

/* 아이들 살피기 탭(10/20): 왼쪽 최근 진단·지금 글쓰기, 오른쪽 우리 아이들 표를 1:3 으로. 좁은 화면은 위아래로 */
.dash-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--gap); align-items: start; }
.dash-split > * { min-width: 0; }
@media (max-width: 1100px) { .dash-split { grid-template-columns: minmax(0, 1fr); } }

/* 승급·주의 알림(10/20 요청): 두 칸 사이 세로 경계선, 제목 줄 이름 검색 */
.al-body > .al-col + .al-col { border-left: 1px solid var(--line); padding-left: var(--gap); }
@media (max-width: 860px) { .al-body > .al-col + .al-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--gap); } }
.al-search { width: 180px; height: 30px; flex: none; }
/* 아이들 살피기 왼쪽(10/20 요청): 최근 진단·지금 글쓰기가 오른쪽 표 높이를 반씩 나눠 채운다 */
@media (min-width: 1101px) {
  .dash-split { align-items: stretch; }
  .dash-split > .dash > .card { flex: 1 1 0; min-height: 0; }
}
/* 아이들 살피기 탭(10/20 요청): 화면 높이에 맞춰 페이지 스크롤 없이, 우리 아이들 표는 표 안에서 스크롤 */
@media (min-width: 1101px) and (min-height: 640px) {
  .dash:has(> .dash-tabs > .dash-tab-panel[data-k="kids"]:not([hidden])) { flex: 1 1 auto; min-height: 0; }
  .dash:has(> .dash-tabs > .dash-tab-panel[data-k="kids"]:not([hidden])) > .dash-tabs,
  .dash-tab-panel[data-k="kids"]:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .dash-tab-panel[data-k="kids"] > .dash-split { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .dash-split > .kd-card { min-height: 0; }
  .dash-split > .kd-card > .dt-box { flex: 1 1 auto; min-height: 0; }
}
/* 아이들 살피기 우리 아이들 도구 줄(10/20 요청): 두 줄 말고 한 줄 — 칸 너비를 줄이고 검색 칸이 남는 폭을 먹는다 */
@media (min-width: 1101px) {
  .dash-split .kd-card .dt-tools { flex-wrap: nowrap; gap: 6px; }
  .dash-split .kd-card .dt-search { flex: 1 1 120px; min-width: 90px; width: auto; }
  .dash-split .kd-card .dt-tools .dd { width: 104px !important; flex: none; }
  .dash-split .kd-card .dt-tools .dp { width: 138px; flex: none; }
  .dash-split .kd-card .dt-tools .seg { flex: none; }
  .dash-split .kd-card .dt-tools .seg-btn { padding: 0 8px; }
  .dash-split .kd-card .dt-count { flex: none; }
}
/* 학생 관리 학년별·레벨별 재원생(10/20): 높이를 정해 두어 막대 수가 달라도 아래 표가 밀리지 않는다. 넘치면 칸 안에서 스크롤 */
.st-stats { flex: none; }
.st-stats > .card { height: 200px; }
.st-stats .chart-hbars { flex: 1 1 auto; min-height: 0; overflow: auto; }
.st-stats:empty { display: none; }

/* 표가 화면을 꽉 채운다(10/20 요청): 본문에 바로 놓인 표 카드는 남은 높이까지 늘고, 줄이 적어도 표 틀이 아래까지 간다. 넘치면 표 안에서 스크롤 */
/* 표 카드가 본문 맨 아래 칸일 때만 늘린다(10/20: 아래에 다른 칸이 있는데 늘리면 표 밑이 크게 빈다) */
.content > .card:last-child:has(> .dt-box, > .table-frame) { flex: 1 1 auto; min-height: 0; }
.card > .dt-box, .card > .table-frame, .dt-box > .table-frame { flex: 1 1 auto; }
.table-frame > .table-wrap { flex: 1 1 auto; }
/* 표 안 관리 버튼 묶음(10/20 요청): 왼쪽 정렬 → 칸 가운데 */
table.dt td .row-actions, table.dt td .rp-acts, table.dt td .lt-acts { justify-content: center; }
/* 수업 준비 우리 아이들 열 너비(10/20 요청): 짧은 값은 좁게, 책 제목·진단 책은 넓게 */
.pp-table th:nth-child(1) { width: 130px; }   /* 학생 */
.pp-table th:nth-child(2) { width: 110px; }   /* 레벨·코스 */
.pp-table th:nth-child(3) { width: 96px; }    /* 독법 */
.pp-table th:nth-child(4) { width: auto; }    /* 읽는 책 */
.pp-table th:nth-child(5) { width: 26%; }     /* 최근 진단 */
.pp-table th:nth-child(6) { width: 230px; }   /* 수업에서 챙길 것 */
.pp-table th:nth-child(7) { width: 96px; }    /* 마지막 활동 */
.pp-table td { white-space: normal; }
.pp-table td .field-help, .pp-table td > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 이용권(10/20 요청): 페이지 스크롤 대신 표 스크롤 — 아이별 이용권(2)과 이용권 기록(1)을 나란히 두고 남은 높이를 채운다. 본사 구매 신청 칸이 있을 때는 예전처럼 */
@media (min-width: 1101px) {
  .ps-body:has(> .ps-stats:first-child) { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ps-body:has(> .ps-stats:first-child) > .ps-stats { grid-column: 1 / -1; }
  .ps-body:has(> .ps-stats:first-child) > .card { min-height: 0; }
  .ps-body:has(> .ps-stats:first-child) > .card > .table-frame { flex: 1 1 auto; }
  .ps-body:has(> .ps-stats:first-child) .ps-ledger { flex: 1 1 auto; min-height: 0; overflow: auto; }
}

/* ---------- 탭·필터 모양 통일(10/20 요청) ----------
   탭 = 회색 바탕 안의 흰 선택 탭(.seg), 필터 칩 = 같은 높이 알약(고르면 남색), 고르기 상자 = 드롭다운(.dd)과 같은 모양, 켜고 끄는 버튼 = 켜지면 연한 남색 */
/* 학생 상세 탭(.tab-btn): 파란 큰 버튼 → .seg 탭 */
.st-tabbar { align-self: flex-start; margin: 0; padding: 3px; gap: 2px; border-radius: var(--r-control); background: var(--surface-3); backdrop-filter: none; }
.tab-btn { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 600;
  transition: background var(--dur) ease-out, color var(--dur) ease-out, transform var(--dur) ease-out; }
.tab-btn:hover { transform: none; color: var(--text); }
.tab-btn:active { transform: scale(.97); }
.tab-btn[aria-selected="true"] { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-1); }
:root[data-theme="dark"] .tab-btn { color: var(--text-2); }
:root[data-theme="dark"] .tab-btn[aria-selected="true"] { color: var(--accent); }
/* 필터 칩: 승급·주의 알림(.al-chip)과 책장·보고서 칩(.sf-chip)을 한 모양으로 */
.al-chip, .sf-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) ease-out, color var(--dur) ease-out, border-color var(--dur) ease-out, transform var(--dur) ease-out; }
.al-chip:hover, .sf-chip:hover { border-color: var(--accent); color: var(--text); }
.al-chip:active, .sf-chip:active { transform: scale(.97); }
.al-chip[aria-pressed="true"], .sf-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on, #fff); }
.al-chip:focus-visible, .sf-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 기본 고르기 상자(select): 드롭다운 단추와 같은 테두리·높이·화살표 */
select.input { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 13px; }
select.input:hover { border-color: var(--text-3); }
/* 켜고 끄는 버튼(챙길 것 있는 아이만 등) */
.btn[aria-pressed="true"]:not(.wd-btn) { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-text); }
.pp-filters { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.pp-filters[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tab-btn, .al-chip, .sf-chip { transition: none; } }

/* 독서노트 카드 통일(10/20 요청): 노트 첨삭(.rv-card)과 노트 갤러리(.gl-card)를 같은 너비·미리보기 높이·글자·테두리·움직임으로 */
.rv-grid, .gl-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-content: start; }
.rv-card, .gl-card { border: 1px solid var(--line-soft); border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--shadow-1);
  transition: transform var(--dur) ease-out, box-shadow var(--dur) ease-out, border-color var(--dur) ease-out; }
.rv-card:hover, .gl-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -8px rgb(24 24 27 / .18); border-color: var(--line); }
.rv-thumb, .gl-img { height: 170px; }
.rv-text, .gl-text { padding: var(--gap); text-align: left; font-size: 12.5px; line-height: 1.65; color: var(--text-2); white-space: pre-wrap; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.rv-body, .gl-body { padding: var(--gap); gap: 6px; flex: 1 1 auto; }
.rv-title b, .gl-title { font-weight: 700; font-size: 13px; }
.rv-title span, .gl-meta { font-size: 11.5px; color: var(--text-3); }
.rv-foot { margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .rv-card, .gl-card { transition: none; } .rv-card:hover, .gl-card:hover { transform: none; } }

/* ---------- 모션 보강(10/20 요청): 빠져 있던 곳만. transform·opacity 만, 줄임 설정이면 끈다 ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 화면이 보일 때 본문 칸이 위에서부터 차례로(40ms 간격) 떠오른다 */
  .app[data-ready="true"] .content > :not(.load-layer):not(.stay) { animation: row-in 280ms var(--ease) backwards; }
  .app[data-ready="true"] .content > :nth-child(2) { animation-delay: 40ms; }
  .app[data-ready="true"] .content > :nth-child(3) { animation-delay: 80ms; }
  .app[data-ready="true"] .content > :nth-child(4) { animation-delay: 120ms; }
  .app[data-ready="true"] .content > :nth-child(n+5) { animation-delay: 160ms; }
  /* 대시보드 숫자 칸·카드 묶음도 차례로 */
  .dash-tiles > * { animation: row-in 260ms var(--ease) backwards; }
  .dash-tiles > :nth-child(2) { animation-delay: 30ms; } .dash-tiles > :nth-child(3) { animation-delay: 60ms; }
  .dash-tiles > :nth-child(4) { animation-delay: 90ms; } .dash-tiles > :nth-child(5) { animation-delay: 120ms; } .dash-tiles > :nth-child(n+6) { animation-delay: 150ms; }
  .dash-pair > *, .dash-split > *, .dash-today > *, .card-grid > * { animation: row-in 280ms var(--ease) backwards; }
  .dash-pair > :nth-child(2), .dash-split > :nth-child(2), .dash-today > :nth-child(2), .card-grid > :nth-child(2) { animation-delay: 50ms; }
  .card-grid > :nth-child(3) { animation-delay: 100ms; } .card-grid > :nth-child(n+4) { animation-delay: 150ms; }
  /* 비어 있음 안내·도움말 풍선·하위 탭 */
  .empty { animation: fade-in 240ms ease-out backwards; }
  .chart-tip { animation: fade-in 120ms ease-out; }
  .seg-btn[aria-selected="true"], .tab-btn[aria-selected="true"], .subnav-item[aria-current="page"] { animation: seg-in 200ms ease-out; }
  /* 알림 줄·필터 칩 누름 */
  .al-row { transition: border-color var(--dur) ease-out, background var(--dur) ease-out, transform var(--dur) ease-out; }
  .al-row:hover { border-color: var(--line); background: var(--surface-2); transform: translateX(2px); }
  /* 숫자 칸·카드 링크 누름 */
  a.dash-tile:active, .rv-card:active, .gl-card:active { transform: scale(.985); }
}
@keyframes seg-in { from { opacity: .6; transform: scale(.96); } to { opacity: 1; transform: none; } }
/* 학생 관리 학년별·레벨별 세로 막대(10/20): 칸 높이 안에 맞춰 줄어든다(스크롤 없음) */
.st-stats .chart-vbars { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; }
/* 노트 카드 찌그러짐(10/20): 카드가 많아 칸 높이가 모자라면 격자가 줄 높이를 최소로 줄여 미리보기가 잘렸다 → 줄 높이는 늘 내용만큼, 미리보기는 줄지 않게 */
.rv-grid, .gl-grid { grid-auto-rows: max-content; }
.rv-thumb, .gl-img, .gl-open-btn { flex: none; }
@media (max-height: 520px) { .ch-card { min-height: 420px; } }
/* 이용권 표 열(10/20 요청): 체크 칸은 체크만큼, 거두기 단추 칸은 '관리'로 좁게 */
.ps-table th:nth-child(1) { width: 48px; }
.ps-table th:nth-child(4) { width: 130px; }
.ps-table th:nth-child(5) { width: 100px; }
.ps-table td:first-child input[type="checkbox"] { width: 16px; height: 16px; vertical-align: middle; accent-color: var(--accent); cursor: pointer; }
/* 빈 표 안내(10/20 요청): 표 틀이 화면을 채울 때 안내 문구가 위쪽에 붙지 않고 표 한가운데 */
.table-wrap:has(td > .empty) { position: relative; }
table.dt td:has(> .empty) { height: 0 !important; padding: 0; border-bottom: 0; }
table.dt td > .empty { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; }

/* ---------- 도구 줄 통일(10/20 요청): 검색칸·고르기·날짜 칸 너비와 간격을 화면마다 같게 ----------
   도구 줄 = .dt-tools(공용 표) · .card-head.tb-row · .card-head.pg-head · .toolbar. 창 안 양식은 그대로 둔다 */
:is(.dt-tools, .card-head.tb-row, .card-head.pg-head, .toolbar) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap); }
:is(.dt-tools, .card-head.tb-row, .card-head.pg-head, .toolbar) input.input[type="search"] { width: 220px !important; flex: none; }
:is(.dt-tools, .card-head.tb-row, .card-head.pg-head, .toolbar) > .dd,
:is(.dt-tools, .card-head.tb-row, .card-head.pg-head, .toolbar) > .pp-filters > .dd,
:is(.dt-tools, .card-head.tb-row, .card-head.pg-head, .toolbar) > .field > .dd { width: 140px !important; flex: none; }
:is(.dt-tools, .card-head.tb-row, .card-head.pg-head, .toolbar) select.input { width: 140px !important; flex: none; }
:is(.dt-tools, .card-head.tb-row, .card-head.pg-head, .toolbar) input.input[type="date"] { width: 150px !important; flex: none; }
:is(.dt-tools, .card-head.tb-row, .card-head.pg-head, .toolbar) .btn { flex: none; }
/* 모션 속도(10/20 요청 "느리다"): 화면이 뜰 때 움직임은 0.2초 안에 끝난다. 간격 25ms, 가장 늦은 칸도 50ms 뒤 시작 */
@media (prefers-reduced-motion: no-preference) {
  .app[data-ready="true"] .content > :not(.load-layer):not(.stay),
  .dash-tiles > *, .dash-pair > *, .dash-split > *, .dash-today > *, .card-grid > * { animation-duration: 180ms; }
  .app[data-ready="true"] .content > :nth-child(2), .dash-tiles > :nth-child(2), .dash-pair > :nth-child(2), .dash-split > :nth-child(2), .dash-today > :nth-child(2), .card-grid > :nth-child(2) { animation-delay: 25ms; }
  .app[data-ready="true"] .content > :nth-child(n+3), .dash-tiles > :nth-child(n+3), .card-grid > :nth-child(n+3) { animation-delay: 50ms; }
  table.dt tbody tr, tbody[data-animate="true"] tr, .rv-card, .gl-card, .al-row, .pp-table tbody tr, .ps-table tbody tr { animation-duration: 180ms !important; animation-delay: calc(min(var(--i, 0), 8) * 15ms) !important; }
}

/* 레벨·책장 변경 창(10/20, 리드인 레벨 변경 창처럼) */
.sf-change { display: flex; flex-direction: column; gap: var(--gap); }
.sf-change p { margin: 0; line-height: 1.6; }
/* 책장 보기 탭(10/20, 리드인 추천/선택 테라피 탭처럼): 누른 탭만 보인다 */
.sf-tabs { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.sf-pane { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; animation: sfStatusIn .2s var(--ease) both; }

/* 독서 활동 등 하위 메뉴(10/20 원장님 요청, 리드인 위쪽 단추처럼): 네모가 하나씩 떨어져 크게, 지금 화면은 남색으로 채운다 */
.topbar .subnav.seg { background: transparent; padding: 0; gap: var(--gap); }
.topbar .subnav-item { min-height: 38px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: var(--r-control);
  background: var(--accent-weak); color: var(--accent-text); font-size: 14px; font-weight: 600; box-shadow: none;
  transition: background-color 180ms ease-out, color 180ms ease-out, transform 120ms ease-out; }
.topbar .subnav-item:hover { background: color-mix(in srgb, var(--accent) 16%, var(--accent-weak)); color: var(--accent-text); }
.topbar .subnav-item[aria-current="page"] { background: var(--accent); color: var(--accent-on, #fff); box-shadow: none; }
:root[data-theme="dark"] .topbar .subnav-item[aria-current="page"] { color: var(--accent-on, #1a0f07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar .subnav-item[aria-current="page"] { color: var(--accent-on, #1a0f07); } }