/* ──────────────────────────────────────────────────────────────────
   월말평가 성적표 — 시트 스타일 + 인쇄(PDF) 규칙
   ClassIn 토큰(--ci-*) 위에 얹는 성적표 전용 레이어.
   ────────────────────────────────────────────────────────────────── */

/* ── 관리자: 업로드 드롭존 ─────────────────────────────────────── */
.rc-drop {
  border: 2px dashed var(--ci-line);
  border-radius: var(--ci-r);
  background: var(--ci-paper);
  padding: 34px 24px;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.rc-drop.over { border-color: var(--ci-navy); background: #fff; }
.rc-drop .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--ci-navy); color: var(--ci-yellow);
  display: inline-flex; align-items: center; justify-content: center; }
.rc-drop h4 { margin: 14px 0 4px; font-weight: 800; font-size: 16px; color: var(--ci-navy); letter-spacing: -.02em; }
.rc-drop p { margin: 0; font-size: 12.5px; color: var(--ci-muted); }

.rc-filechip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  background: var(--ci-bg-2); font-size: 12px; font-weight: 700; color: var(--ci-navy); }
.rc-filechip .lv { color: var(--ci-muted); font-family: var(--font-en); }

/* 학생 리스트 행 */
.rc-rosterrow { display: grid; grid-template-columns: 1fr 92px 96px auto; gap: 12px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--ci-line); font-size: 13.5px; cursor: pointer; }
.rc-rosterrow:hover { background: var(--ci-bg); }
.rc-rosterrow.sel { background: #fff; box-shadow: inset 3px 0 0 var(--ci-navy); }

/* ── 성적표 시트 ───────────────────────────────────────────────── */
.rc-sheet {
  width: 100%; max-width: 820px;
  margin: 0 auto;
  background: #fff;
  color: var(--ci-navy);
  border: 1px solid var(--ci-line);
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--font-kr);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rc-sheet * { box-sizing: border-box; }

.rc-sheet-head {
  background: var(--ci-navy); color: #fff;
  padding: 18px 30px 15px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.rc-brand { display: flex; align-items: center; gap: 12px; }
.rc-brand-logo {
  display: block; height: 44px; width: auto;
  /* logo-full.png 은 노란 단색 위 'Re:newgen Academy'. 인쇄 시에도 또렷이 나오게 */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rc-brand-tx { display: flex; flex-direction: column; gap: 2px; }
.rc-brand .mark { width: 40px; height: 40px; border-radius: 9px; background: var(--ci-yellow); color: var(--ci-navy);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; }
.rc-brand .nm { font-family: var(--font-kr-serif); font-weight: 600; font-size: 19px; line-height: 1.15; white-space: nowrap; }
.rc-brand .en { font-family: var(--font-en); font-style: italic; font-weight: 300; font-size: 11px; opacity: .7; letter-spacing: .02em; white-space: nowrap; }
.rc-head-meta { text-align: right; flex-shrink: 0; }
.rc-head-meta .t { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--ci-yellow); white-space: nowrap; }
.rc-head-meta .d { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 3px; white-space: nowrap; }

/* 학생 식별 바 */
.rc-idbar { padding: 22px 34px; border-bottom: 1px solid var(--ci-line);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rc-idbar .av { width: 56px; height: 56px; border-radius: 50%; background: var(--ci-bg-2); color: var(--ci-navy);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-kr-serif); font-weight: 600; font-size: 22px; }
.rc-name { font-family: var(--font-kr-serif); font-weight: 600; font-size: 30px; letter-spacing: -.03em; line-height: 1; }
.rc-tags { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.rc-tag { font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--ci-bg-2); color: var(--ci-navy); }
.rc-tag.navy { background: var(--ci-navy); color: #fff; }
.rc-tag.solo { background: var(--ci-bg-2); color: var(--ci-muted); }

/* 신원 정보 표 (공동체명·이름·학년반·발급일) */
.rc-id { padding: 13px 30px; border-bottom: 1px solid var(--ci-line); }
.rc-id-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rc-id-tbl th { background: var(--ci-bg-2); color: var(--ci-muted); font-weight: 800; font-size: 11px;
  letter-spacing: .02em; text-align: center; padding: 9px 10px; border: 1px solid var(--ci-line); white-space: nowrap; }
.rc-id-tbl td { text-align: center; padding: 9px 14px; border: 1px solid var(--ci-line); font-weight: 600; color: var(--ci-navy); }
.rc-id-tbl td.nm { font-family: var(--font-kr-serif); font-weight: 600; font-size: 16px; letter-spacing: -.02em; }

/* 요약 (평균 · 성장) */
.rc-summary { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--ci-line); }
.rc-summary .rc-kpi { padding: 13px 24px; border-right: 1px solid var(--ci-line); }
.rc-summary .rc-kpi:last-child { border-right: 0; }

/* KPI 4칸 */
.rc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--ci-line); }
.rc-kpi { padding: 18px 22px; border-right: 1px solid var(--ci-line); }
.rc-kpi:last-child { border-right: 0; }
.rc-kpi .k { font-size: 11.5px; font-weight: 800; color: var(--ci-muted); letter-spacing: .01em; }
.rc-kpi .v { font-family: var(--font-en); font-weight: 800; font-size: 30px; letter-spacing: -.03em; color: var(--ci-navy); margin-top: 5px; line-height: 1; }
.rc-kpi .v small { font-size: 13px; font-weight: 700; color: var(--ci-muted); margin-left: 2px; }
.rc-kpi .sub { font-size: 11.5px; color: var(--ci-muted); margin-top: 5px; }
.rc-delta { font-weight: 800; font-size: 12px; }
.rc-delta.up { color: var(--ci-ok); } .rc-delta.down { color: var(--ci-bad); } .rc-delta.flat { color: var(--ci-muted); }

.rc-body { padding: 15px 30px 6px; }
.rc-body-tight { padding-top: 5px; }
.rc-seclabel { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ci-muted);
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; white-space: nowrap; }
.rc-seclabel::after { content: ""; flex: 1; height: 1px; background: var(--ci-line); }

/* 과목 점수 표 */
.rc-tbl { width: 100%; border-collapse: collapse; }
.rc-tbl th { text-align: left; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ci-muted);
  font-weight: 800; padding: 8px 10px; border-bottom: 1.5px solid var(--ci-navy); }
.rc-tbl th.r, .rc-tbl td.r { text-align: right; }
.rc-tbl th.c, .rc-tbl td.c { text-align: center; }
.rc-tbl td { padding: 11px 10px; border-bottom: 1px solid var(--ci-line); font-size: 14px; }
.rc-tbl tr.absent td { color: var(--ci-muted); }
.rc-subdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.rc-subname { font-weight: 700; }
.rc-score-big { font-family: var(--font-en); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.rc-score-big small { font-size: 11px; color: var(--ci-muted); font-weight: 600; }
.rc-mini { width: 96px; height: 8px; border-radius: 4px; background: var(--ci-bg-2); overflow: hidden; display: inline-block; vertical-align: middle; }
.rc-mini > i { display: block; height: 100%; background: var(--ci-navy); }
.rc-rankpill { font-family: var(--font-en); font-weight: 800; font-size: 12px; }
.rc-vs { font-family: var(--font-en); font-weight: 800; font-size: 12.5px; }
.rc-vs.pos { color: var(--ci-ok); } .rc-vs.neg { color: var(--ci-bad); } .rc-vs.zero { color: var(--ci-muted); }

/* 회차별 과목 점수 표 (구분 × 과목) */
.rc-grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.rc-grid th, .rc-grid td { border: 1px solid var(--ci-line); padding: 10px 8px; text-align: center; }
.rc-grid thead th { background: var(--ci-navy); color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: -.01em; }
.rc-grid thead th .rc-subdot { margin-right: 5px; }
.rc-grid thead th.corner { background: #0a2647; }
.rc-grid .rowhead { background: var(--ci-bg-2); font-weight: 800; font-size: 12.5px; color: var(--ci-navy); white-space: nowrap; }
.rc-grid tbody td { font-family: var(--font-en); font-weight: 700; font-size: 15px; color: var(--ci-navy); }
.rc-grid .avgcol { background: rgba(0,29,61,0.05); font-weight: 800; }
.rc-grid thead th.avgcol { background: #0a2647; color: var(--ci-yellow); }
.rc-grid tr.cur .rowhead { background: #FFF3C4; }
.rc-grid tr.cur td { background: #FFFAE6; }
.rc-grid tr.cur td.avgcol { background: #FFEFA8; }

/* 성적 추이 막대그래프 */
.rc-bars { border: 1px solid var(--ci-line); border-radius: 12px; padding: 14px 14px 10px; background: var(--ci-paper); }
.rc-bars-wrap { width: 100%; }
.rc-bars-wrap svg { height: 196px; max-width: 620px; margin: 0 auto; }
.rc-bars-empty { text-align: center; color: var(--ci-muted); font-size: 13px; padding: 36px 0; }
.rc-bar-legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 12px; font-size: 12px; color: var(--ci-navy); font-weight: 600; }
.rc-bar-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rc-bar-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }

/* 코멘트 */
.rc-comment { margin: 12px 30px 18px; border: 1px solid var(--ci-line); border-radius: 12px; background: var(--ci-bg);
  padding: 13px 16px; }
.rc-comment .lab { font-size: 11.5px; font-weight: 800; color: var(--ci-muted); letter-spacing: .03em; margin-bottom: 8px;
  display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.rc-comment textarea { width: 100%; border: 0; background: transparent; resize: vertical; min-height: 56px;
  font-family: var(--font-kr); font-size: 14px; line-height: 1.6; color: var(--ci-navy); outline: none; }
.rc-comment .printed { font-size: 14px; line-height: 1.65; color: var(--ci-navy); white-space: pre-wrap; }

.rc-foot { padding: 10px 30px 16px; display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--ci-line); font-size: 11px; color: var(--ci-muted); }
.rc-foot .en { font-family: var(--font-en); letter-spacing: .12em; text-transform: uppercase; }

/* ── 인쇄 영역 (off-screen until print) ───────────────────────────── */
.rc-print-portal { display: none; }
.rc-print-area { position: fixed; left: -10000px; top: 0; width: 820px; }

@media print {
  @page { size: A4 portrait; margin: 11mm 10mm; }
  html, body { background: #fff !important; }
  #root { display: none !important; }
  .rc-print-portal { display: block !important; }
  .rc-print-area { position: static !important; left: 0 !important; width: 100% !important; }
  .rc-print-area .rc-sheet { width: 100%; border: none; border-radius: 0; box-shadow: none;
    page-break-after: always; break-after: page; break-inside: avoid; }
  .rc-print-area .rc-sheet:last-child { page-break-after: auto; break-after: auto; }
  .no-print { display: none !important; }
}

@media (max-width: 900px) {
  .rc-rosterrow { grid-template-columns: 1fr 76px auto; }
  .rc-rosterrow .hide-sm { display: none; }
}