/* ==========================================================================
   생기부 점검 허브 — 점검기 화면 공용 스타일 (subject.html / career.html)
   design-system.css 이후에 로드된다. subject.html/career.html은 이 CSS로만
   스타일링한다 — 클래스명을 추가로 쓰고 싶으면 이 파일을 먼저 확장할 것.
   ========================================================================== */

/* ---- 형광펜 색 유틸(7색) ---------------------------------------------------
   mark든 span이든 이 클래스를 붙이면 배경/글자색 짝이 적용된다.
   예: <mark class="m-red" title="위반: ...">문구</mark>
       <span class="issue-tag m-brown">확인 필요</span>
   ------------------------------------------------------------------------- */
.m-amber  { background: var(--hl-amber-bg);  color: var(--hl-amber-ink); }
.m-rose   { background: var(--hl-rose-bg);   color: var(--hl-rose-ink); }
.m-teal   { background: var(--hl-teal-bg);   color: var(--hl-teal-ink); }
.m-violet { background: var(--hl-violet-bg); color: var(--hl-violet-ink); }
.m-slate  { background: var(--hl-slate-bg);  color: var(--hl-slate-ink); }
.m-red    { background: var(--hl-red-bg);    color: var(--hl-red-ink); }
.m-brown  { background: var(--hl-brown-bg);  color: var(--hl-brown-ink); }

/* ---- 액션 바 ---------------------------------------------------------------
   sticky 다운로드 바. 예상 마크업:
   <div class="action-bar"><div class="container action-bar__row">
     <span class="action-bar__label">...</span>
     <div class="action-bar__buttons">
       <button class="btn btn-primary">전체 요약 xlsx</button>
       <button class="btn btn-ghost">과목별 모두 받기(zip)</button>
       <button class="btn btn-ghost">이슈만 복사</button>
     </div>
   </div></div>
   ------------------------------------------------------------------------- */
.action-bar {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-actionbar);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
  padding-block: 12px;
}
.action-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.action-bar__label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.action-bar__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-label-short { display: none; }
@media (max-width: 640px) {
  /* 모바일은 버튼 3개가 줄바꿈 없이 한 줄에 들어가도록 축약 라벨로 전환 */
  .action-bar__buttons { flex-wrap: nowrap; gap: 6px; }
  .action-bar__buttons .btn { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: 13px; gap: 0; }
  .btn-label-full { display: none; }
  .btn-label-short { display: inline; }
}

/* ---- 결과 헤드라인(§P0 — 점검 실행 후 스크롤 앵커) --------------------------- */
.results-headline {
  padding-block: 28px 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ---- 결과 요약 스탯 영역(보너스 래퍼) --------------------------------------- */
.results-summary {
  padding-block: 28px 8px;
}
.stat-label { white-space: nowrap; }

/* ---- 학생자료 접이식 헤더(§P1) ----------------------------------------------- */
.section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 2px;
}
.section-toggle__caret { color: var(--ink-soft); transition: transform 0.15s ease; flex-shrink: 0; }
.section-toggle[aria-expanded="false"] .section-toggle__caret { transform: rotate(-90deg); }

/* ---- 결과 컨트롤 토글(확정 위반만·이슈 있는 학생만) --------------------------- */
.results-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.check-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.check-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

/* ---- 범례 접이식(§P3 — 결과가 있을 때만 표시) --------------------------------- */
.legend-details { margin: 0 0 18px; }
.legend-details[hidden] { display: none; }
.legend-details__summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-deep);
  padding: 4px 2px;
  list-style: none;
}
.legend-details__summary::-webkit-details-marker { display: none; }
.legend-details__summary::marker { content: ''; }
.legend-details .legend { margin: 8px 0 0; }

/* ---- 이슈 그룹핑(§P1 — 동일 규칙 다수 발생 1행 접기) --------------------------- */
.issue-group__toggle {
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.issue-group__caret { margin-left: auto; color: var(--ink-soft); transition: transform 0.15s ease; flex-shrink: 0; }
.issue-group__toggle[aria-expanded="true"] .issue-group__caret { transform: rotate(180deg); }
.issue-group__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}
.issue-group__body[hidden] { display: none; }

/* ---- 과목/유형 섹션 --------------------------------------------------------- */
.subject-section { padding-block: 28px; border-bottom: 1px solid var(--line); }
.subject-section:last-child { border-bottom: none; }
.subject-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--brand-soft);
}
.subject-section-header h2,
.subject-section-header h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.subject-section-header .badge { margin-left: 8px; }
.subject-section-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.subject-section-students {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- 학생 카드 -------------------------------------------------------------- */
.student-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
}
.student-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.student-card__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.student-card__no { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-left: 6px; }
.student-card__gauge-wrap { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.student-card__gauge-wrap .gauge { flex-grow: 1; }
.student-card__gauge-label { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- 게이지 채움 애니메이션(§P3 — width 대신 transform:scaleX) ----------------
   design-system.css .gauge-fill의 값을 checker.css(로드 순서상 이후)에서 재정의.
   같은 클래스 선택자라 후행 규칙이 이겨 width:100%+scaleX 방식으로 동작한다.
   JS(checker-core.js renderGauge)는 fill.style.transform만 매 렌더 갱신한다. */
.gauge-fill {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease, background 0.15s ease;
}

/* ---- 본문 하이라이트 -------------------------------------------------------- */
.annotated {
  max-width: 80ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.annotated mark {
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 600;
  cursor: help;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- 이슈 목록 -------------------------------------------------------------- */
.issue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.issue-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
.issue-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.issue-item__note { color: var(--ink-soft); }

/* ---- 빈 상태 대체 아트(§7, .empty-state 안에서 사용) ------------------------- */
.illus-empty .illus-fallback-icon { color: var(--brand); }

/* ---- 반응형 ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .student-card { padding: 16px 18px; }
  .subject-section-header { align-items: flex-start; }
}