/* 디자인 시스템 토큰은 src/styles/tokens.css 에 있다 (index.html 에서 먼저 로드).
   아래는 기존 화면이 쓰고 있는 구형 토큰이다. 디자인 시스템으로 옮기기 전까지만 유지한다.
   새 코드에서는 쓰지 말고 tokens.css 의 --navy-*, --ink-*, --space-* 를 쓸 것. */
:root {
  /* 구형 토큰 → 교재 토큰 별칭.
     화면 코드가 아직 구형 이름을 쓰고 있어 남겨둔다.
     값은 tokens.css 한 곳에만 있고 여기는 가리키기만 한다.
     마이그레이션이 끝나면 이 블록째로 지운다. */
  --ink:         var(--ink-primary);     /* #14181f  → #1A3B68  진한 글자·강한 테두리 */
  --ink-2:       var(--ink-body);        /* #3d4654  → #4A5568  본문 */
  --ink-3:       var(--ink-muted);       /* #6b7688  → #6B7280  보조 */
  --line:        var(--line-hairline);   /* #e2e6ec  → #D5D8E0 */
  --line-2:      var(--surface-subtle);  /* #eef1f5  → #F5F6F9  옅은 면 */
  --bg:          var(--surface-page);    /* #f6f7f9  → #F7F8FA */
  --brand:       var(--navy-700);        /* #1f4b8e  → #1A3B68 */
  --brand-ink:   var(--navy-900);        /* #163a70  → #12294A */
  --brand-soft:  var(--navy-100);        /* #eaf0fa  → #D8DAE7 */
  --accent:      var(--navy-700);        /* #a8460f  → #1A3B68  주황 제거, 강조색은 네이비 하나 */
  --ok:          var(--state-success);   /* #1d7a4c  → #1E7A5A */
  --ok-soft:     var(--surface-subtle);  /* #e6f4ec  → #F5F6F9  (대응 토큰 없음) */
  --warn:        var(--state-warning);   /* #b4740a  → #8A6100 */
  --warn-soft:   var(--surface-subtle);  /* #fdf3e0  → #F5F6F9  (대응 토큰 없음) */
  --danger:      var(--state-danger);    /* #b3271e  → #B23A2E */
  --danger-soft: var(--state-danger-bg); /* #fceceb  → #FFF5F4 */

  /* 색이 아니라 미뤄뒀던 넷. 이제 교재 토큰을 가리킨다. */
  --radius: var(--radius-surface);   /* 10px  → 0      직각을 유지한다 */
  --shadow: var(--shadow-none);      /* 2겹   → none   떠 있는 요소만 그림자를 쓴다 */
  --sans:   var(--font-body);        /* 동일한 Pretendard 스택 */
  --serif:  var(--font-label);       /* Noto Serif KR(로드 안 됨) → Gowun Batang */
}


* { box-sizing: border-box; }
/* display 를 지정한 요소도 hidden 이면 확실히 숨긴다 (.row 의 display:flex 등) */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink-body);
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; word-break: keep-all;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
::selection { background: var(--navy-100); }

/* ── 로그인 ── */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--surface-page);
}
.login-card {
  width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-surface); padding: 38px 34px; box-shadow: var(--shadow);
}
.login-brand {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  margin-bottom: 26px;
}
.login-brand .mark {
  width: 46px; height: 46px; border-radius: var(--radius-surface); flex: none;
  background-color: var(--brand); color: var(--surface); display: grid; place-items: center;
  font-family: var(--serif); font-size: 22px; font-weight: 700;
}
.login-brand .brand-title { font-size: 19px; }
.login-hint {
  margin-top: 20px; padding: 12px 14px; background: var(--bg);
  border: 1px dashed var(--line); border-radius: var(--radius-surface);
  font-size: 12px; color: var(--ink-3); line-height: 1.8;
}
.login-hint b { color: var(--ink-2); font-weight: 600; }

/* ── 폼 ── */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field .help { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
input[type=text], input[type=password], input[type=number], input[type=search],
input[type=date], input[type=tel], select, textarea {
  width: 100%; padding: 9px 11px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-control); outline: none; transition: .12s;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea { resize: vertical; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }

/* ── 버튼 ─────────────────────────────────────────────────────────────
   디자인 시스템 적용 완료. 모든 값은 src/styles/tokens.css 의 토큰을 참조한다.
   초점 표시는 tokens.css 의 전역 :focus-visible 이 담당하므로 여기서 덮지 않는다.
   ------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--row-height-compact);
  padding: var(--space-2) var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-body);

  font-family: var(--font-body);
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-ui-tracking);
  line-height: var(--type-ui-leading);

  cursor: pointer;
  white-space: nowrap;
  /* 사용자 동작에 대한 응답이므로 허용된다. 레이아웃은 움직이지 않는다. */
  transition: background-color var(--duration-fast) var(--easing),
              border-color     var(--duration-fast) var(--easing),
              color            var(--duration-fast) var(--easing);
}

.btn:hover:not(:disabled) {
  background: var(--surface-subtle);
  border-color: var(--line-strong);
  color: var(--ink-primary);
}
.btn:active:not(:disabled) { background: var(--navy-100); }

/* 주 동작 */
.btn-primary {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--surface);
}
.btn-primary:hover:not(:disabled),
.btn-primary:active:not(:disabled) {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--surface);
}

/* 파괴적 동작. 호버에서 채워 넣어 되돌릴 수 없는 동작임을 알린다. */
.btn-danger {
  background: var(--state-danger-bg);
  border-color: var(--state-danger);
  color: var(--state-danger);
}
.btn-danger:hover:not(:disabled),
.btn-danger:active:not(:disabled) {
  background: var(--state-danger);
  border-color: var(--state-danger);
  color: var(--surface);
}

/* 보조 동작 */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
}
.btn-ghost:hover:not(:disabled),
.btn-ghost:active:not(:disabled) {
  background: var(--surface-subtle);
  border-color: transparent;
  color: var(--ink-primary);
}

/* 크기. 글자 크기는 --type-ui-size 로 고정하고 여백만 줄인다.
   소형 UI 전용 타입 토큰이 없어 임의로 만들지 않았다. */
.btn-sm {
  min-height: auto;
  padding: var(--space-1) var(--space-3);
}
.btn-block { width: 100%; }

/* 비활성. 모든 변형에 동일하게 적용되므로 변형 규칙 뒤에 둔다.
   --ink-disabled 는 대비 3.06 이라 본문에는 쓸 수 없고 비활성 표시 전용이다. */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-subtle);
  border-color: var(--line-hairline);
  color: var(--ink-disabled);
  cursor: not-allowed;
}
.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
  background: transparent;
  border-color: transparent;
}

/* ── 레이아웃 ── */
.shell { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
/* 교사 사이드바. 학생 쪽(.st-side)과 같은 어휘로 맞춘다 —
   흰 면, 헤어라인 경계, 현재 항목만 네이비로 채움. 어두운 톤은 쓰지 않는다. */
.sidebar {
  background: var(--surface);
  border-right: var(--border-hairline);
  color: var(--ink-body);
  padding: var(--space-6) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-4);
}
.sidebar .brand .mark {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-surface);
  background-color: var(--navy-700); color: var(--surface);
  display: grid; place-items: center;
  font-family: var(--font-label); font-weight: 700;
}
.sidebar .brand .brand-title {
  color: var(--ink-primary);
  /* 사이드바가 좁으므로 이름이 길면 두 줄로 접는다 */
  font-size: var(--type-caption-size); white-space: normal;
  line-height: var(--type-caption-leading);
}

.nav-label {
  padding: var(--space-3) var(--space-3) var(--space-2);
  font-size: var(--type-micro-size);
  font-weight: var(--type-micro-weight);
  letter-spacing: var(--type-micro-tracking);
  line-height: var(--type-micro-leading);
  color: var(--ink-muted);
}
.nav-item {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--row-height-compact);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-ui-tracking);
  line-height: var(--type-ui-leading);
  color: var(--ink-body);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing),
              border-color     var(--duration-fast) var(--easing),
              color            var(--duration-fast) var(--easing);
}
.nav-item:hover:not(.active) { background: var(--surface-subtle); color: var(--ink-primary); }
.nav-item.active {
  background: var(--navy-700); border-color: var(--navy-700); color: var(--surface);
}
.nav-item .ico { display: inline-flex; flex: none; }
/* 승인 대기 건수. 강조색은 네이비 하나이므로 주황을 쓰지 않는다. */
.nav-item .badge {
  margin-left: auto;
  padding: 1px var(--space-2);
  border-radius: var(--radius-control);
  background: var(--navy-100); color: var(--navy-700);
  font-size: var(--type-micro-size); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nav-item.active .badge { background: var(--surface); color: var(--navy-700); }
.sidebar .foot {
  margin-top: auto;
  border-top: var(--border-hairline);
  padding-top: var(--space-3);
}
.sidebar .who { padding: var(--space-2) var(--space-3) var(--space-3); }
.sidebar .who strong {
  display: block; color: var(--ink-primary); font-size: var(--type-caption-size);
}
.sidebar .who span { font-size: var(--type-micro-size); color: var(--ink-muted); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 0 26px; height: 58px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h2 { font-size: 16px; }
.topbar .sub { color: var(--ink-3); font-size: 12.5px; }
.topbar .spacer { flex: 1; }
.view { padding: 24px 26px 60px; max-width: 1180px; width: 100%; }
.view.wide { max-width: none; }

/* ── 카드 ── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-surface); padding: 18px; box-shadow: var(--shadow);
}
.card + .card { margin-top: 14px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head h3 { font-size: 14.5px; }
.card-head .spacer { flex: 1; }
.grid { display: grid; gap: 14px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); padding: 16px 18px; }
.stat .k { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.stat .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.stat .v small { font-size: 13px; color: var(--ink-3); font-weight: 600; margin-left: 2px; }

/* ── 뱃지 ── */
.badge-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: var(--radius-control); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.b-none  { background: var(--line-2);   color: var(--ink-3); }
.b-draft { background: var(--warn-soft); color: var(--warn); }
.b-sub   { background: var(--brand-soft); color: var(--brand); }
.b-grade { background: var(--ok-soft);   color: var(--ok); }
.b-late  { background: var(--danger-soft); color: var(--danger); }
.b-hide  { background: var(--line-2); color: var(--ink-3); }

/* ── 테이블 ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
th { font-size: 11.5px; color: var(--ink-3); font-weight: 700; letter-spacing: .02em; background: var(--surface-subtle); }
tbody tr:hover { background: var(--surface-subtle); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-surface); background: var(--surface); }

/* ── 강의/문항 카드 ── */
.course-card { cursor: pointer; transition: .14s; }
.course-card:hover { border-color: var(--line-strong); }
.course-card .target { font-size: 11.5px; color: var(--brand); font-weight: 700; }
.course-card h3 { font-size: 15.5px; margin: 5px 0 7px; }
.course-card p { margin: 0 0 14px; color: var(--ink-3); font-size: 12.5px; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meter { height: 6px; background: var(--line-2); border-radius: var(--radius-surface); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-surface); transition: width .3s; }
.meter-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-bottom: 5px; }

.problem-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--line-2); cursor: pointer; transition: .1s;
}
.problem-row:last-child { border-bottom: none; }
.problem-row:hover { background: var(--surface-subtle); }
.problem-row .body { flex: 1; min-width: 0; }
.problem-row .tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.problem-row .tags .u { color: var(--accent); font-weight: 700; }
.problem-row h4 { font-size: 14.5px; margin: 4px 0 5px; }
.problem-row .prompt { font-size: 12.5px; color: var(--ink-3); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.problem-row .side { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; }

/* ── 답안 작성 ── */
.editor-shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 0;
  height: calc(100vh - 58px); min-height: 460px; }
.editor-shell.collapsed { grid-template-columns: 0 1fr; }
.pane { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane-passages { background: var(--surface-subtle); border-right: 1px solid var(--line); }
.pane-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); background: var(--surface); flex: none; min-height: 46px;
}
.pane-head .spacer { flex: 1; }
.tabs { display: flex; gap: 4px; overflow-x: auto; }
.tab {
  padding: 5px 12px; border-radius: var(--radius-control); font-size: 12.5px; font-weight: 600;
  color: var(--ink-3); cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.tab:hover { background: var(--line-2); }
.tab.active { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--navy-100); }
.passage-body {
  flex: 1; overflow-y: auto; padding: 26px 30px 60px;
  font-family: var(--serif); font-size: 15px; line-height: 2.0; color: var(--ink-body);
}
.passage-body h4 { font-family: var(--sans); font-size: 12px; color: var(--ink-3); letter-spacing: .04em; margin-bottom: 12px; }
.passage-body .label { font-size: 17px; font-weight: 700; color: var(--brand-ink); margin-bottom: 10px; }
.passage-body p { margin: 0 0 1.1em; white-space: pre-wrap; }
.prompt-box {
  background: var(--brand-soft); border: 1px solid var(--navy-100); border-radius: var(--radius-surface);
  padding: 14px 16px; margin: 0 0 4px;
}
.prompt-box .k { font-size: 11px; font-weight: 700; color: var(--brand); letter-spacing: .06em; margin-bottom: 6px; }
.prompt-box .t { font-family: var(--serif); font-size: 14.5px; line-height: 1.85; color: var(--ink); }
.guide-box {
  background: var(--warn-soft); border: 1px solid var(--state-warning); border-radius: var(--radius-surface);
  padding: 12px 14px; font-size: 12.5px; color: var(--state-warning); line-height: 1.85; margin-top: 10px;
}

.answer-area {
  flex: 1; width: 100%; border: none; outline: none; resize: none; padding: 26px 32px 40px;
  font-family: var(--serif); font-size: 15.5px; line-height: 2.15; letter-spacing: .01em;
  background: repeating-linear-gradient(transparent, transparent 33.4px, var(--line-hairline) 33.4px, var(--line-hairline) 34px);
  background-attachment: local;
}
.answer-area:focus { box-shadow: none; }
.answer-area[readonly] { background: var(--surface-subtle); color: var(--ink-2); }
.statusbar {
  flex: none; border-top: 1px solid var(--line); background: var(--surface);
  padding: 9px 16px; display: flex; align-items: center; gap: 10px 14px;
  flex-wrap: wrap; font-size: 12.5px;
}
.statusbar .spacer { min-width: 8px; }
.statusbar .spacer { flex: 1; }
.counter { display: flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
.counter .big { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.counter .lim { color: var(--ink-3); font-size: 12px; }
.counter.under .big { color: var(--warn); }
.counter.ok    .big { color: var(--ok); }
.counter.over  .big { color: var(--danger); }
.gauge { width: 130px; height: 6px; background: var(--line-2); border-radius: var(--radius-surface); overflow: hidden; }
.gauge i { display: block; height: 100%; background: var(--warn); transition: width .2s, background .2s; }
.gauge.ok i   { background: var(--ok); }
.gauge.over i { background: var(--danger); }
.save-state { color: var(--ink-3); font-size: 12px; }
.save-state.saving { color: var(--warn); }
.save-state.saved  { color: var(--ok); }

/* ── 첨삭 ── */
.fb-card { border-left: 3px solid var(--ok); background: var(--ok-soft); border-radius: var(--radius-surface); padding: 14px 16px; }
.fb-score { font-size: 30px; font-weight: 700; color: var(--ok); letter-spacing: -.02em; line-height: 1.1; }
.fb-comment { font-family: var(--serif); font-size: 14px; line-height: 1.95; white-space: pre-wrap; margin-top: 10px; }
.rubric-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line-hairline); font-size: 12.5px; }
.rubric-row:last-child { border-bottom: none; }
.rubric-row .it { font-weight: 600; width: 88px; flex: none; }
.rubric-row .sc { font-variant-numeric: tabular-nums; font-weight: 700; width: 62px; flex: none; text-align: right; }
.rubric-row .nt { color: var(--ink-3); flex: 1; }

/* ── 모달 ── */
.modal-back {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--navy-900) 45%, transparent); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 24px; z-index: 100;
}
.modal {
  background: var(--surface); border-radius: var(--radius-surface); width: min(680px, 100%);
  max-height: 88vh; overflow: auto; box-shadow: var(--shadow-overlay);
}
.modal.lg { width: min(920px, 100%); }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; background: var(--surface); z-index: 2; }
.modal-head h3 { font-size: 15.5px; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end;
  position: sticky; bottom: 0; background: var(--surface); }

/* ── Google 로그인 · 승인 게이트 ── */
.gsi-slot { display: flex; justify-content: center; min-height: 44px; margin: 4px 0 2px; }
.setup-steps { margin: 14px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.9; }
.setup-steps li { margin-bottom: 9px; }
.copy-box {
  display: block; margin-top: 5px; padding: 7px 10px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-surface); font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
  word-break: break-all; user-select: all;
}
.gate { text-align: center; padding: 26px 8px 20px; }
.gate-ico { margin-bottom: var(--space-3); }
.gate h2 { font-size: 16px; margin-bottom: 10px; }
.gate p { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.9; white-space: pre-line; }
.gate-who {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-surface);
}
.gate-who strong { display: block; font-size: 13.5px; }
.gate-who span { font-size: 12px; color: var(--ink-3); }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; background: var(--line-2); }
.avatar.lg { width: 52px; height: 52px; }
.gate-who .avatar { width: 38px; height: 38px; }
.sidebar .who { display: flex; align-items: center; gap: 9px; }
.sidebar .who strong, .sidebar .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* ── 기본 프로필 입력 ── */
.login-card.wide { width: min(580px, 100%); }
.profile-form .field { margin-bottom: 13px; }
.profile-form .row { gap: 12px; }
.req { color: var(--danger); font-weight: 700; margin-left: 2px; }
.profile-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }

.choice-group { display: flex; gap: 7px; flex-wrap: wrap; }
.choice {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-surface); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: .12s; white-space: nowrap; min-width: 72px;
}
.choice:hover { background: var(--line-2); }
.choice input { width: auto; margin: 0; accent-color: var(--brand); flex: none; }
.choice:has(input:checked) {
  border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink);
}
.choice input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 잘못 입력했을 때 — 테두리를 붉게 하고 바로 아래에 이유를 적는다 */
input.invalid, select.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.field-error { color: var(--danger); font-size: 12px; font-weight: 600; margin-top: 5px; }

input[type=date] { min-height: 38px; }
/* 날짜 입력의 달력 아이콘을 오른쪽 끝으로 밀어 칸을 꽉 채운 것처럼 보이게 한다 */
input[type=date]::-webkit-calendar-picker-indicator { margin-left: auto; cursor: pointer; }

table.kv { width: 100%; font-size: 12.5px; }
table.kv th {
  width: 88px; text-align: left; color: var(--ink-3); font-weight: 600;
  background: transparent; padding: 5px 0; border: none; font-size: 12.5px; letter-spacing: 0;
}
table.kv td { padding: 5px 0; border: none; color: var(--ink); font-weight: 600; }

/* ── 영상 등록 미리보기 ── */
.yt-preview {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-surface); min-height: 64px;
}
.yt-preview img { width: 104px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-surface); flex: none; }
.yt-preview b { font-size: 12px; }

/* ── 강의 영상 ── */
.grid-video { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.video-card { padding: 0; overflow: hidden; cursor: pointer; transition: .14s; }
.video-card:hover { border-color: var(--line-strong); }
.video-card .thumb {
  position: relative; aspect-ratio: 16 / 9; background: var(--navy-900); overflow: hidden;
  display: grid; place-items: center;
}
.video-card .thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.video-card:hover .thumb img { opacity: 1; }
.video-card .play {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy-900); color: var(--surface); display: grid; place-items: center;
  font-size: 15px; padding-left: 3px; backdrop-filter: blur(2px); transition: .14s;
}
.video-card:hover .play { background: var(--brand); transform: scale(1.06); }
.video-card .dur {
  position: absolute; right: 8px; bottom: 8px; background: var(--navy-900); color: var(--surface);
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-surface);
}
.video-card .seen { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); }
.video-body { padding: 13px 15px 15px; }
.video-body .tags { font-size: 11.5px; color: var(--brand); font-weight: 700; }
.video-body h4 {
  font-size: 14px; margin: 5px 0 10px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.watch-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; padding: 20px 26px 50px; }
.player-box { position: relative; aspect-ratio: 16 / 9; background: var(--navy-900); border-radius: var(--radius-surface); overflow: hidden; }
.player-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.watch-side { min-width: 0; }

/* ══════════════ 브랜드 (이름 두 줄 + 로고) ══════════════

   아래 줄을 윗줄과 같은 폭으로 늘린다.
   inline-flex 라 블록 폭이 가장 긴 자식(= 줄바꿈 없는 윗줄)에 맞춰지고,
   아랫줄은 그 폭 안에서 text-align-last: justify 로 양끝 정렬된다. */

.brand-text {
  display: inline-flex; flex-direction: column; align-items: stretch;
  min-width: 0; line-height: 1.25;
}
.brand-title {
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.brand-text.lg .brand-title { font-size: 18px; }

.mark.lg { width: 46px; height: 46px; border-radius: var(--radius-surface); font-size: 22px; }

/* ══════════════ 학생 셸 — 상단 브랜드·프로필 / 좌측 사이드바 / 본문 / 진척도 ══════════════ */

.st-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }

.st-top {
  display: flex; align-items: center; gap: 16px; padding: 0 22px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; height: 62px; flex: none;
}
.st-top-spacer { flex: 1; }
.st-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.st-brand .mark {
  width: 34px; height: 34px; border-radius: var(--radius-surface); background-color: var(--brand); color: var(--surface);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700; flex: none;
}


/* 프로필 — 상단 바 오른쪽 끝. 이름 왼쪽, 구글 프로필 사진 오른쪽 */
.account-chip {
  display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); cursor: pointer;
  transition: .12s; white-space: nowrap; flex: none;
}
.account-chip:hover { background: var(--line-2); border-color: var(--line-strong); }
.account-chip .ac-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.account-chip .avatar { width: 32px; height: 32px; }
.account-chip .avatar.ph {
  display: grid; place-items: center; background: var(--brand); color: var(--surface);
  font-size: 13px; font-weight: 700;
}

/* 좌측 사이드바 — 접히지 않고 항상 펼쳐져 있다 */
.st-body { flex: 1; display: grid; grid-template-columns: 228px minmax(0, 1fr); align-items: start; }
.st-side {
  /* 화면 높이에 딱 맞춰야 sticky 가 붙을 여백이 생긴다.
     align-self: stretch 로 행 높이만큼 늘리면 붙을 곳이 없어 같이 밀려 올라간다. */
  position: sticky; top: 62px; align-self: start;
  height: calc(100vh - 62px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-6) var(--space-3); display: flex; flex-direction: column; gap: var(--space-6);
  background: var(--surface); border-right: var(--border-hairline);
  scrollbar-width: thin;
}
.side-group { display: flex; flex-direction: column; gap: var(--space-1); }

/* 라벨이 구조를 만든다. 국문이므로 세리프(--font-label)를 쓰지 않는다. */
.side-label {
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--type-micro-size);
  font-weight: var(--type-micro-weight);
  letter-spacing: var(--type-micro-tracking);
  line-height: var(--type-micro-leading);
  color: var(--ink-muted);
}

.side-item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; text-align: left;
  min-height: var(--row-height-compact);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-ui-tracking);
  line-height: var(--type-ui-leading);
  color: var(--ink-body);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing),
              border-color     var(--duration-fast) var(--easing),
              color            var(--duration-fast) var(--easing);
}
.side-item:hover:not(.active):not(.locked) {
  background: var(--surface-subtle);
  color: var(--ink-primary);
}
.side-item .si-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-item .si-lock {
  width: var(--icon-sm); height: var(--icon-sm); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
}

/* 현재 보고 있는 항목. 단계 칩의 "완료"와 같은 어휘 — 네이비로 채운다. */
.side-item.active {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--surface);
}
/* 수강 중이 아닌 과정. opacity 대신 전용 색으로 낮춘다. */
.side-item.locked { color: var(--ink-disabled); cursor: not-allowed; }
.side-item.program { line-height: var(--type-ui-leading); }

.st-main { padding: 26px; min-width: 0; }

/* ── 회차 목록 + 진척도 ── *//* ── 회차 목록 + 진척도 ── */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.round-list { display: flex; flex-direction: column; gap: 14px; }

/* 윤곽선은 살린다 — Callout 과 같은 --border-strong 어휘다.
   호버의 검정 바(box-shadow)와 들림(transform)은 뺐다.
   그림자는 금지고, 카드가 움직이면 목록 전체가 들썩인다. */
.round-card {
  position: relative;
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  padding: var(--space-4) var(--space-4) var(--space-3);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing);
}
.round-card:hover { background: var(--surface-subtle); }
.round-card.is-locked {
  border: var(--border-hairline);
  background: var(--surface-subtle);
  cursor: not-allowed;
  opacity: .6;
}
.round-card.is-locked:hover { background: var(--surface-subtle); }

.round-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.round-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.round-no { font-size: 12.5px; font-weight: 700; color: var(--brand); flex: none; }
.round-title strong { font-size: 15.5px; letter-spacing: -.01em; }
.round-meta { font-size: 12px; color: var(--ink-3); }
.round-right { display: flex; align-items: center; gap: 10px; flex: none; }
.round-pct {
  font-size: var(--type-caption-size); font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-caption-tracking);
  color: var(--progress-fill); font-variant-numeric: tabular-nums;
}

/* ── 단계 칩 (StepChip) ─────────────────────────────────────────────────
   네 상태를 색이 아니라 형태로 구분한다.
   완료·잠김은 테두리를 없애 버튼처럼 보이지 않게 하고,
   현재 단계만 2px 테두리로 강조해 다음 할 일을 지시한다.
   -------------------------------------------------------------------- */
.pipeline { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }

.stage {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: var(--type-caption-size);
  font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-caption-tracking);
  line-height: var(--type-caption-leading);
  color: var(--ink-muted);
  cursor: default;
  transition: background-color var(--duration-fast) var(--easing),
              border-color     var(--duration-fast) var(--easing),
              color            var(--duration-fast) var(--easing);
}

/* 표식. 숫자는 자릿수가 흔들리지 않게 고정폭으로 둔다. */
.stage-num {
  font-size: var(--type-micro-size);
  font-weight: var(--type-micro-weight);
  letter-spacing: var(--type-micro-tracking);
  font-variant-numeric: tabular-nums;
}
.stage-ico {
  width: var(--icon-sm); height: var(--icon-sm); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
}
/* 칩 사이 구분 기호도 문자가 아니라 SVG 다. */
.stage-sep {
  width: var(--icon-sm); height: var(--icon-sm); flex: none;
  fill: none; stroke: var(--line-hairline); stroke-width: var(--icon-stroke);
}

/* 완료 — 채우고 테두리 없음.
   규격의 "조작 불가"와 달리 다시 눌러 들어갈 수 있다.
   해설 강의 다시 보기, 첨삭 다시 읽기가 필요하기 때문이다.
   테두리는 그대로 없애 되 호버로 조작 가능함을 알린다. */
.stage.done {
  background: var(--navy-700);
  border-color: transparent;
  color: var(--surface);
  cursor: pointer;
}
.stage.done:hover { background: var(--navy-900); }

/* 현재 — 유일하게 2px 테두리. 테두리가 1px 늘어난 만큼 안쪽 여백을 줄여
   칩 크기가 상태에 따라 흔들리지 않게 한다. */
.stage.doing {
  background: var(--surface);
  border: 2px solid var(--navy-700);
  padding: calc(var(--space-1) - 1px) calc(var(--space-3) - 1px);
  color: var(--ink-primary);
  cursor: pointer;
}

/* 예정 — 1px 헤어라인. 조작 가능. */
.stage.open {
  background: var(--surface);
  border: var(--border-hairline);
  color: var(--ink-muted);
  cursor: pointer;
}
.stage.open:hover { border-color: var(--line-strong); color: var(--ink-primary); }
.stage.doing:hover { background: var(--surface-subtle); }

/* 잠김 — 테두리 없음, 옅은 면. 조작 불가. */
/* 잠김·대기·건너뜀은 누를 수 없으므로 호버 반응을 주지 않는다.
   반응하지 않는 요소를 버튼처럼 보이게 만들면 안 된다. */
.stage.locked {
  background: var(--navy-100);
  border-color: transparent;
  color: var(--ink-muted);
  cursor: not-allowed;
}

/* 아래 둘은 design-system.md StepChip 표에 없는 상태다.
   조작할 것이 없다는 점에서 잠김과 같은 형태를 쓰되 표식으로 구분한다.
   (대기 = 시계, 건너뜀 = 건너뛰기 화살표, 잠김 = 자물쇠) */
/* 첨삭 대기는 밝게, 건너뜀은 뒤로 물린다. 회차 화면과 같은 처리. */
.stage.waiting {
  background: var(--surface);
  border: var(--border-hairline);
  color: var(--ink-muted);
  cursor: default;
}
.stage.skipped {
  background: var(--surface-subtle);
  border-color: transparent;
  color: var(--ink-muted);
  cursor: default;
}

/* 회차별 진도. 진척도 표현은 모두 같은 두 색만 쓴다. */
.round-bar {
  height: 3px; overflow: hidden; margin-top: var(--space-3);
  background: var(--progress-track);
  border-radius: var(--radius-surface);
}
.round-bar i {
  display: block; height: 100%;
  background: var(--progress-fill);
  transition: width var(--duration-base) var(--easing);
}

/* ── 우측 패널 ── */
.side-panel { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.panel {
  background: var(--surface); border: var(--border-hairline); border-radius: var(--radius-surface);
  padding: var(--space-4); text-align: center;
}
.panel h3 { font-size: 13px; margin-bottom: 14px; letter-spacing: -.01em; }
.panel-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.panel-empty { margin: 0; font-size: 12.5px; color: var(--ink-3); padding: 8px 0; }

/* 종합 진척도 도넛.
   가운데 글자는 SVG <text> 가 아니라 HTML 오버레이다.
   .t-hero 의 44px 를 viewBox 단위가 아닌 실제 px 로 쓰고,
   .ratio__separator 의 margin-inline / color 를 살리려면 HTML 이어야 한다. */
/* 예전에는 <svg class="donut"> 이라 inline 이었고 부모의 text-align 으로 가운데 왔다.
   지금은 <div> 라서 폭이 고정된 블록이다. text-align 에 기대지 않고 스스로 가운데 선다. */
.donut { position: relative; width: 150px; height: 150px; margin-inline: auto; }
.donut-ring { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 선 두께 12 = 지름 100 의 12%. 끝 모양은 둥글게 처리하지 않는다. */
.donut-track { fill: none; stroke: var(--progress-track); stroke-width: 12; }
.donut-value {
  fill: none; stroke: var(--progress-fill); stroke-width: 12;
  stroke-linecap: butt;
  transition: stroke-dasharray var(--duration-base) var(--easing);
}

/* 퍼센트 숫자를 박스 정중앙에 놓는다.
   "/100%" 는 흐름에서 빼내 절대배치한다. 같이 쌓으면 두 줄이 한 덩어리로
   가운데 정렬되면서 숫자가 중심보다 위로 밀린다. */
.donut-center { position: absolute; inset: 0; display: grid; place-items: center; }

/* 크기가 다른 텍스트를 한 줄에 둘 때 baseline 대신 center 를 쓴다. */
.donut-reading { display: flex; align-items: center; line-height: 1; }

/* .t-hero 가 크기·굵기·자간(-0.03em)·행간을 담당하므로 여기서는 색만 정한다. */
.donut-num { color: var(--progress-fill); }
.donut-unit {
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
  color: var(--progress-fill);
}
.donut-sub {
  position: absolute; left: 0; right: 0;
  top: calc(50% + var(--space-6));
  text-align: center;
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  letter-spacing: var(--type-caption-tracking);
  line-height: var(--type-caption-leading);
  color: var(--ink-muted);
}

.recent { text-align: left; border: 1px solid var(--line); border-radius: var(--radius-surface); padding: 12px; }
.recent-title { font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.recent-bar {
  height: 5px; overflow: hidden;
  background: var(--progress-track);
  border-radius: var(--radius-surface);
}
.recent-bar i {
  display: block; height: 100%;
  background: var(--progress-fill);
  transition: width var(--duration-base) var(--easing);
}
.recent-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.recent-foot b { color: var(--progress-fill); }

.panel.exam { display: flex; align-items: center; gap: 12px; text-align: left; flex-wrap: wrap; }
.panel.exam h3 { margin: 0 0 4px; }
.exam-main { flex: 1; min-width: 0; }
.exam-note {
  flex-basis: 100%; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 11.5px; line-height: 1.7; color: var(--ink-3);
}
.exam-date { margin: 0; font-size: 13px; font-weight: 700; }
.d-day {
  margin-left: auto; flex: none; padding: var(--space-2) var(--space-3);
  border: var(--border-strong); border-radius: var(--radius-surface);
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.d-day.near { border-color: var(--danger); color: var(--danger); }

/* ══════════════ 회차 진행 화면 (5단계) ══════════════ */

.rd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.rd-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.rd-no { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.rd-title strong { font-size: 17px; letter-spacing: -.01em; }
.rd-sub { font-size: 12.5px; color: var(--ink-3); }
.rd-count { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 회차 화면의 단계 버튼. 랜딩의 .stage 와 같은 StepChip 어휘를 쓴다.
   표식(.stage-num / .stage-ico)도 같은 클래스를 공유한다. */
.rd-steps { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); flex-wrap: wrap; }

.rd-step {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--row-height-compact);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-caption-tracking);
  line-height: var(--type-caption-leading);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing),
              border-color     var(--duration-fast) var(--easing),
              color            var(--duration-fast) var(--easing);
}

/* 완료 — 채우고 테두리 없음 */
.rd-step.done { background: var(--navy-700); border-color: transparent; color: var(--surface); }
.rd-step.done:hover:not(:disabled) { background: var(--navy-900); }

/* 현재 — 2px 테두리. 늘어난 1px 만큼 안쪽 여백을 줄여 높이를 고정한다. */
.rd-step.doing {
  background: var(--surface);
  border: 2px solid var(--navy-700);
  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
  color: var(--ink-primary);
}

.rd-step.doing:hover:not(:disabled) { background: var(--surface-subtle); }

/* 예정 — 1px 헤어라인 */
.rd-step.open { border: var(--border-hairline); color: var(--ink-muted); }
.rd-step.open:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink-primary); }

/* 잠김 — 유일하게 누를 수 없다. 그래서 호버 반응도 주지 않는다. */
.rd-step.locked { background: var(--navy-100); border-color: transparent; color: var(--ink-muted); }

/* 규격에 없는 두 상태. 표식(시계 / 건너뛰기)으로 구분한다.
   회차 화면에서는 눌러서 들어갈 수 있으므로 호버가 있어야 한다.
   면을 --navy-100 으로 바꾸면 잠김과 똑같아지므로 테두리로 반응한다. */

/* 첨삭 대기 — 학생은 할 일을 마쳤고 선생님을 기다린다.
   막힌 것이 아니라 아직 비어 있는 것이므로 밝게 둔다. */
.rd-step.waiting {
  background: var(--surface);
  border: var(--border-hairline);
  color: var(--ink-muted);
}
.rd-step.waiting:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--ink-primary);
}

/* 건너뜀 — 지나간 단계라 뒤로 물린다. */
.rd-step.skipped { background: var(--surface-subtle); border-color: transparent; color: var(--ink-muted); }
.rd-step.skipped:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--ink-primary);
}

.rd-step:disabled { cursor: not-allowed; }

/* 지금 보고 있는 단계. 상태 표시를 덮어쓰고 2px 테두리로 어디에 있는지 알린다.
   표식은 그대로라 완료를 보고 있으면 흰 칩에 네이비 체크가 남는다. */
.rd-step.on,
.rd-step.on:hover {
  background: var(--surface);
  border: 2px solid var(--navy-700);
  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
  color: var(--ink-primary);
}

.rd-body { max-width: 860px; }
/* 답안 제출 — 입력창과 원고지를 나란히 두려면 넓어야 한다. 너무 넓으면 입력창 한 줄이 길어져 읽기 어렵다. */
.rd-body.is-wide { max-width: 1600px; }
.rd-card {
  --rd-card-pad-x: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface);
  padding: 26px var(--rd-card-pad-x); box-shadow: var(--shadow);
}
.rd-card.center { text-align: center; }
.rd-card h3 { font-size: 17px; margin-bottom: 10px; }
.rd-kicker {
  margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--brand);
}
.rd-hint { margin: 0; font-size: 13px; line-height: 1.85; color: var(--ink-3); white-space: pre-line; }
.rd-warn {
  margin: 16px 0 0; padding: 11px 14px; border-radius: var(--radius-surface);
  background: var(--warn-soft); border: 1px solid var(--state-warning); color: var(--state-warning);
  font-size: 12.5px; line-height: 1.7;
}
.rd-prep {
  margin: 14px 0; padding: 16px 18px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-surface); font-family: var(--sans); font-size: 13.5px; line-height: 1.95;
  color: var(--ink-2); white-space: pre-wrap;
}
.rd-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rd-fact {
  flex: 1 1 140px; padding: 11px 14px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-surface); text-align: left;
}
.rd-fact span { display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 3px; }
.rd-fact strong { font-size: 14px; }
.rd-big-ico { margin-bottom: var(--space-2); }
.rd-done-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ok); font-weight: 600; }

.rd-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.rd-foot .spacer { flex: 1; }

/* 타이머 */
.rd-clock {
  font-size: 62px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  margin: 18px 0 4px; color: var(--ink);
}
.rd-clock.warn { color: var(--warn); }
.rd-clock.over { color: var(--danger); animation: rd-pulse 1.6s ease-in-out infinite; }
@keyframes rd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .rd-clock.over { animation: none; } }

.rd-alarm {
  margin: 14px auto 0; max-width: 520px; padding: 13px 16px; border-radius: var(--radius-surface);
  background: var(--danger-soft); border: 1px solid var(--state-danger); color: var(--danger);
  font-size: 13px; line-height: 1.75; text-align: center;
}
.rd-alarm b { font-size: 13.5px; }
.rd-clock-note { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-3); }

/* 복기 */
.rd-checklist { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.rd-check {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-control); cursor: pointer; transition: .12s;
  font-size: 13.5px; line-height: 1.6;
}
.rd-check:hover { background: var(--line-2); }
.rd-check input { width: auto; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.rd-check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.rd-check.locked { cursor: default; opacity: .85; }
.rd-check.locked:hover { background: transparent; }
.rd-check.locked:has(input:checked) { background: var(--ok-soft); border-color: var(--state-success); }
.rd-star:disabled { cursor: default; }
.rd-stars { display: flex; align-items: center; gap: 3px; }
.rd-star {
  border: none; background: none; cursor: pointer; font-size: 26px; line-height: 1;
  color: var(--line); padding: 0 1px; transition: .1s;
}
.rd-star:hover, .rd-star.on { color: var(--navy-700); }
.rd-star-note { margin-left: 10px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }

/* 답안 */
.rd-tabs { display: flex; gap: 5px; margin: 16px 0 12px; flex-wrap: wrap; }

/* 답안 제출의 막대 — 문항 바꾸기 · 칸수 · 제출하기 (2026-09-17).
   페이지를 내려도 상단 바 바로 아래에 붙어 있다. 카드 여백을 넘어 카드 양옆 끝까지 닿게 해서,
   붙었을 때 옆으로 원고지가 비쳐 보이지 않게 한다. 위 선은 상단 바의 선과 겹치므로 아래 선만 둔다. */
.rd-dock {
  --rd-dock-top: 62px;                 /* 상단 바(.st-top) 높이 */
  position: sticky; top: var(--rd-dock-top); z-index: 10;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-4) calc(-1 * var(--rd-card-pad-x)) var(--space-3);
  padding: var(--space-2) var(--rd-card-pad-x);
  min-height: calc(var(--row-height-compact) + var(--space-4));
  background: var(--surface);
  border-bottom: var(--border-hairline);
}
.rd-dock .spacer { flex: 1; }
.rd-dock .rd-tabs { margin: 0; }
/* 좁아서 제출하기가 다음 줄로 접혀도 넓은 화면처럼 오른쪽에 둔다 */
.rd-dock > .btn { margin-left: auto; }
.rd-dock-count:empty { display: none; }
/* 문항 바꾸기와 분량 사이에 가는 세로선 — 둘이 붙어 한 덩어리로 읽히지 않게 */
.rd-dock .rd-tabs + .rd-dock-count:not(:empty) {
  padding-left: var(--space-3);
  border-left: var(--border-hairline);
}
.rd-tab {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer;
}
.rd-tab.on { background: var(--brand-soft); border-color: var(--navy-100); color: var(--brand-ink); }
.rd-prompt {
  margin: 16px 0 8px; padding: 13px 15px; background: var(--brand-soft);
  border: 1px solid var(--navy-100); border-radius: var(--radius-surface);
  font-family: var(--serif); font-size: 14px; line-height: 1.85;
}
/* 문항 안내 한 줄 — 지금은 사진 답안 문항에만 쓴다. 글 답안의 분량 안내는 2026-09-16 에 뺐다. */
.rd-limit {
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-tracking);
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}
.rd-answer {
  width: 100%; min-height: 340px; padding: 20px 22px; border: 1px solid var(--line);
  border-radius: var(--radius-control); resize: vertical;
  font-family: var(--serif); font-size: 15.5px; line-height: 2.1;
  background: repeating-linear-gradient(transparent, transparent 32.6px, var(--line-hairline) 32.6px, var(--line-hairline) 33px);
  background-attachment: local;
}
.rd-answer[readonly] { background: var(--surface-subtle); color: var(--ink-2); }
.rd-answer-foot { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.rd-answer-foot .spacer { flex: 1; }
.rd-saved { font-size: 12px; color: var(--ink-3); }

/* 해설 강의 */
.rd-player { position: relative; aspect-ratio: 16/9; background: var(--navy-900); border-radius: var(--radius-surface);
  overflow: hidden; margin-top: 16px; }
.rd-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 어느 계정으로 보는 강의인지 · 계정을 맞추는 방법 (2026-09-17)
   유튜브 비공개 영상은 공유받은 계정으로 유튜브에 로그인해 있어야 재생된다. 틀 안은 이쪽에서 알 수 없으니 늘 곁에 둔다. */
.rd-yt-account {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-3);
}
.rd-yt-who {
  flex: 1 1 auto; min-width: 0; margin: 0;
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--ink-body);
}
.rd-yt-who strong { color: var(--ink-primary); overflow-wrap: anywhere; }
.rd-yt-help {
  margin-top: var(--space-3);
  border: var(--border-hairline); border-radius: var(--radius-surface);
  padding: var(--space-3) var(--space-4);
}
.rd-yt-help summary { cursor: pointer; color: var(--ink-body); }
.rd-yt-help ol { margin: var(--space-3) 0 0; padding-left: var(--space-6); color: var(--ink-body); }
.rd-yt-help li + li { margin-top: var(--space-1); }
.rd-yt-help strong { color: var(--ink-primary); overflow-wrap: anywhere; }
.rd-yt-help .t-caption { margin: var(--space-3) 0 0; }

/* 교사 — 비공개 공유용 수강생 이메일 */
.yt-share-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.yt-share-warn { display: flex; align-items: center; gap: var(--space-2); }

/* 첨삭 */
.rd-feedback {
  margin-top: 16px; padding: 20px 22px; background: var(--ok-soft);
  border-left: 3px solid var(--ok); border-radius: var(--radius-surface);
}
.rd-fb-text { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 2; white-space: pre-wrap; }
.rd-fb-by { margin: 14px 0 0; font-size: 12px; color: var(--ink-3); }

@media (max-width: 700px) {
  .rd-card { --rd-card-pad-x: 16px; padding: 20px var(--rd-card-pad-x); }
  .rd-clock { font-size: 46px; }
  .rd-step { padding: 7px 11px; font-size: 12.5px; }
  .rd-answer { min-height: 280px; padding: 16px; }
}

/* ── 몰아보기 ── */
.collect-head-bar { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.collect-head-bar h2 { font-size: 17px; }
.collect-head-bar .sub { font-size: 12.5px; color: var(--ink-3); }
.collect { display: flex; flex-direction: column; gap: 12px; }
.collect-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-surface); padding: 16px 18px; }
.collect-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.collect-head .tag { font-size: 11.5px; font-weight: 700; color: var(--brand); }
.collect-head strong { font-size: 14px; }
.collect-head .spacer { flex: 1; }
.collect-body {
  margin: 0; font-size: 13px; line-height: 1.9; color: var(--ink-2); white-space: pre-wrap;
  max-height: 130px; overflow: hidden; position: relative;
}
.collect-body.serif { font-family: var(--serif); font-size: 13.5px; }


@media (max-width: 1080px) {
  .home-grid { grid-template-columns: 1fr; }
  .side-panel { position: static; }
}

/* ── 기타 ── */
.empty { text-align: center; padding: 54px 20px; color: var(--ink-3); }
.empty .ico { margin-bottom: var(--space-2); }
.empty p { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.empty span { font-size: 12.5px; }
.toast-wrap { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 300; }
.toast {
  background: var(--navy-900); color: var(--surface); padding: 11px 16px; border-radius: var(--radius-surface); font-size: 13px;
  box-shadow: var(--shadow-overlay); animation: pop .18s ease-out; max-width: 380px;
}
.toast.err { background: var(--danger); }
.toast.ok  { background: var(--ok); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.err-text { color: var(--danger); font-size: 12.5px; margin-top: 10px; min-height: 18px; }
.passage-edit { border: 1px solid var(--line); border-radius: var(--radius-surface); padding: 12px; margin-bottom: 10px; background: var(--surface-subtle); }
.mono-sm { font-size: 12px; color: var(--ink-3); }
.divider { height: 1px; background: var(--line-2); margin: 16px 0; }
.inline-note { font-size: 12px; color: var(--ink-3); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--line-2); border-radius: var(--radius-control); padding: 3px 10px; font-size: 11.5px; color: var(--ink-2); }

@media (max-width: 900px) {
  /* 학생 셸 — 좁은 화면에서는 사이드바를 가로줄로 눕히되 계속 보이게 둔다 */
  .st-top { padding: 0 14px; height: 56px; }
  .st-brand span { display: none; }
  .st-body { grid-template-columns: 1fr; }
  .st-side {
    position: sticky; top: 56px; height: auto; z-index: 20;
    flex-direction: row; align-items: center; gap: 14px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    padding: 9px 14px; border-right: none; border-bottom: 1px solid var(--line);
  }
  .st-side::-webkit-scrollbar { display: none; }
  .side-group { flex-direction: row; align-items: center; gap: 4px; flex: none; }
  .side-label { padding: 0 4px 0 0; white-space: nowrap; }
  .side-item { width: auto; flex: none; white-space: nowrap; padding: 7px 11px; }
  .st-main { padding: 18px 14px 50px; }
  .rd-dock { --rd-dock-top: 115px; }   /* 상단 바 56px + 가로로 누운 사이드바 59px */
  .account-chip .ac-name { display: none; }
  .account-chip { padding: 4px; }

  /* 행을 auto/1fr로 고정하지 않으면 min-height:100vh의 남는 높이를 상단 바가 나눠 갖는다 */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar {
    position: sticky; top: 0; z-index: 30; height: auto; padding: 10px 12px;
    flex-direction: row; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar .brand { padding: 0 10px 0 0; flex: none; }
  .sidebar .brand span { display: none; }
  .sidebar .brand strong { font-size: 13px; white-space: nowrap; }
  .nav-label, .sidebar .who { display: none; }
  .nav-item { flex: none; padding: 7px 11px; font-size: 13px; white-space: nowrap; }
  .sidebar .foot { display: flex; gap: 4px; margin: 0 0 0 auto; border: none; padding: 0 0 0 8px; }
  .topbar { height: auto; min-height: 52px; padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
  .topbar h2 { font-size: 15px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px 14px; }
  .stat .v { font-size: 22px; }
  .editor-shell, .editor-shell[style] { grid-template-columns: 1fr !important; height: auto !important; }
  .pane-passages { border-right: none; border-bottom: 1px solid var(--line); max-height: 46vh; }
  .answer-area { min-height: 58vh; padding: 20px 18px; }
  .statusbar { position: sticky; bottom: 0; }
  .view { padding: 16px 14px 50px; }
  .problem-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .problem-row .side { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .modal-body { padding: 16px; }
  .row { flex-wrap: wrap; }
  .row > * { flex: 1 1 140px; }
  .watch-shell { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .grid-video { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .login-card { padding: 28px 20px; }
}

/* ── 로고 ──────────────────────────────────────────────────────
   받은 로고가 흰색이라 브랜드 색 위에 올린다. 파일의 투명 여백이 커서
   (1025px 중 내용이 455px = 44%) background-size 로 키워 크기를 맞춘다.
   화면별 .mark 규칙보다 뒤에 두어 덮이지 않게 한다. */
.mark.img {
  background-repeat: no-repeat !important;
  background-position: center !important;
  /* 파일 자체 여백이 커서 키워 쓰되(150%), 박스 대비 조금 작게 120% 로 둔다 */
  background-size: 120% !important;
}

/* ══════════════════════════════════════════════════════════════════════
   교재에서 온 컴포넌트
   Team Jangwon 교재 조판에서 가져온 형태다. 임의로 변형하지 말 것.
   규격: .claude/rules/design-system.md, docs/DESIGN.md 4절
   ══════════════════════════════════════════════════════════════════════ */

/* ── SectionRule (h2) ──────────────────────────────────────────────────
   세리프 영문 제목 아래 1px 가로선, 선 오른쪽 끝에 굵은 세로 막대.
   교재의 STATS / SOLUTION 에서 온 형태다. */
.section-rule { margin: 0 0 var(--space-6); }
.section-rule__title {
  display: block;
  font-family: var(--font-label);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-tracking);
  line-height: var(--type-h2-leading);
  color: var(--navy-700);
}
.section-rule__line {
  display: block;              /* span 은 inline 이라 높이·폭이 먹지 않는다 */
  position: relative;
  width: 100%;
  height: 1px;
  margin-top: var(--space-3);
  background: var(--line-hairline);
}
/* 종단 막대 6×24px. 선에 바닥을 붙이고 위로 세워 제목과 묶이게 한다. */
.section-rule__line::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 6px; height: 24px;
  background: var(--navy-700);
}

/* ── PhaseHeader (h3) ──────────────────────────────────────────────────
   네이비 사각 칩과 연한 청회색 밴드가 끊김 없이 이어진다. */
.phase-header {
  display: flex; align-items: stretch;
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-surface);
  overflow: hidden;
}
.phase-header__chip {
  display: flex; align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--navy-700);
  color: var(--surface);
  font-family: var(--font-label);
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-ui-tracking);
  white-space: nowrap;
}
.phase-header__band {
  display: flex; align-items: center;
  flex: 1; min-width: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--navy-100);
  color: var(--navy-700);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
  line-height: var(--type-h3-leading);
}

/* ── Tip 박스 ──────────────────────────────────────────────────────────
   교재 Callout 에서 왔지만 변형을 두지 않는다.
   교재는 다양한 독자를 상정해 내용이 방대해도 되지만 첨삭은 압축적이어야 한다.
   라벨 글자와 좌우 장식을 걷어내고 전구 하나만 테두리에 걸쳐 둔다 —
   이 표시가 "이건 알아 두라는 말"이라고 알리는 유일한 장치다. */
.tip {
  position: relative;
  margin: var(--space-4) 0 var(--space-6);
  border: var(--border-strong);
  border-radius: var(--radius-surface);
  background: none;
  padding: var(--space-6) var(--space-4) var(--space-4);
  color: var(--ink-body);
}
.tip__mark {
  position: absolute;
  top: 0; left: var(--space-4);
  transform: translateY(-50%);
  display: inline-flex; align-items: center;
  padding-inline: var(--space-2);
  background: var(--surface);      /* 테두리 선을 끊는다 */
  color: var(--navy-700);
}
.tip__icon {
  width: var(--icon-lg); height: var(--icon-lg);
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
}
.tip__body > :first-child { margin-top: 0; }
.tip__body > :last-child { margin-bottom: 0; }
.tip__body p {
  margin: 0;
  font-size: var(--type-body-sm-size);
  letter-spacing: var(--type-body-sm-tracking);
  line-height: var(--type-body-sm-leading);
}

/* 표시용 아이콘 — 빈 상태, 단계 결과, 승인 대기 화면의 큰 표식. */
.display-ico {
  width: var(--icon-display); height: var(--icon-display);
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
  color: var(--ink-muted);
}
/* 사이드바 메뉴 아이콘 */
.nav-ico {
  width: var(--icon-md); height: var(--icon-md); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
}

/* 버튼 라벨 옆 아이콘. 문자 화살표(→ ←)를 대신한다.
   폰트마다 세로 위치가 달라 중앙에 오지 않기 때문에 SVG 로 그린다. */
.btn-ico {
  width: var(--icon-sm); height: var(--icon-sm); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
}
/* 복기 난이도 별점 */
.rd-star-ico {
  width: var(--icon-lg); height: var(--icon-lg);
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
}
.rd-star.on .rd-star-ico { fill: currentColor; }

/* ══════════════════════════════════════════════════════════════════════
   교사 화면 — 과정·회차 관리
   ══════════════════════════════════════════════════════════════════════ */

/* 표 안의 보조 줄 (부제·학교 등) */
.row-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-tracking);
  color: var(--ink-muted);
}
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .btn + .btn { margin-left: var(--space-1); }

.top-actions { display: flex; gap: var(--space-2); align-items: center; }
.row-end { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; }

/* 체크박스 한 줄 */
.check-line {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--type-ui-size);
  letter-spacing: var(--type-ui-tracking);
  color: var(--ink-body);
  cursor: pointer;
}
.check-line input { width: auto; }

/* 단계 탭 위에 붙는 한 줄 설명. 학생이 이 단계에서 무엇을 보는지 알려 준다. */
.stage-hint {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline);
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
  line-height: var(--type-caption-leading);
  color: var(--ink-muted);
}

/* 주문서 입력 — 줄 단위로 읽으므로 고정폭이어야 자리가 맞는다. */
.spec-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-caption-size);
  line-height: 1.7;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.spec-plan { margin-top: var(--space-4); }
.spec-plan .table-wrap { margin: 0; }
.spec-fields code {
  display: inline-block;
  margin: 1px var(--space-1) 1px 0;
  padding: 1px var(--space-2);
  border-radius: var(--radius-control);
  background: var(--navy-100);
  color: var(--navy-700);
  font-family: var(--font-body);
  font-size: var(--type-micro-size);
}
/* 못 알아들은 줄을 그대로 보여 준다. 고칠 곳을 찾을 수 있어야 한다. */
.spec-warn {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--state-warning);
  border-radius: var(--radius-surface);
  background: var(--surface-subtle);
}
.spec-warn p {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--state-warning);
}
.spec-warn p:last-child { margin-bottom: 0; }
.spec-warn .btn-ico { margin-top: 2px; }

/* ── 파일 올리기·내려받기 ─────────────────────────────────────────────── */

.file-box {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--row-height-compact);
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.file-box .spacer { flex: 1; }
.file-name {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
  color: var(--navy-700);
}
.file-empty {
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
  color: var(--ink-muted);
}
/* 학생 화면의 내려받기 단추 */
.file-get {
  display: inline-flex; margin: var(--space-4) auto 0;
  max-width: 100%;
}

/* 이미지 답안 */
.img-answer { margin-top: var(--space-3); }
.img-answer-preview {
  display: block;
  border: var(--border-hairline);
  border-radius: var(--radius-surface);
  background: var(--surface-subtle);
  overflow: hidden;
}
.img-answer-preview img {
  display: block; width: 100%; max-height: 520px;
  object-fit: contain;
}
.img-answer-foot {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
}
.img-answer-foot .spacer { flex: 1; }
.img-answer-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  border: 1px dashed var(--line-hairline);
  border-radius: var(--radius-surface);
  background: var(--surface-subtle);
  text-align: center;
}
.img-answer-empty p {
  margin: 0;
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
  color: var(--ink-muted);
}

/* ── 수강생 등록 ─────────────────────────────────────────────────────── */

.roster-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.roster-col h4 {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline);
  font-size: var(--type-ui-size);
  letter-spacing: var(--type-ui-tracking);
  color: var(--ink-primary);
}
.roster-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-hairline);
}
.roster-row:last-child { border-bottom: none; }
.roster-who { flex: 1; min-width: 0; }
.roster-who strong {
  display: block;
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
  color: var(--ink-primary);
}
.roster-who span {
  display: block;
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-tracking);
  color: var(--ink-muted);
}
@media (max-width: 720px) {
  .roster-cols { grid-template-columns: 1fr; }
}

/* ── 교사가 읽는 학생 답안 ─────────────────────────────────────────────── */

.ans-prompt {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline);
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
  line-height: var(--type-caption-leading);
  color: var(--ink-muted);
}
/* 답안은 학생이 쓴 그대로 — 줄바꿈을 살리고 읽기 폭을 제한한다. */
.ans-text {
  white-space: pre-wrap;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
  line-height: var(--type-body-leading);
  color: var(--ink-body);
}
.ans-count {
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--ink-primary);
}
/* 학생 화면의 원고지 칸 색과 같은 말을 쓴다 — 적정이면 파랑, 넘치면 빨강. */
.ans-count.is-in   { color: var(--navy-500); }
.ans-count.is-over { color: var(--state-danger); }


.ans-checks { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.ans-checks li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-hairline);
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
  color: var(--ink-muted);
}
.ans-checks li:last-child { border-bottom: none; }
/* 학생이 체크한 항목만 진하게. 체크 안 한 항목이 무엇인지가 더 중요하다. */
.ans-checks li.on { color: var(--ink-primary); }
.ans-checks .btn-ico { margin-top: 3px; }

/* 지각 표시 */
.row-sub.late { color: var(--state-warning); }

/* ══════════════════════════════════════════════════════════════════════
   첨삭 표시
   색 = 평가 방향(파랑 잘함 / 빨강 아쉬움), 선 모양 = 지적의 종류.
   색을 못 보는 학생도 선 모양만으로 무슨 지적인지 알 수 있어야 한다.
   ══════════════════════════════════════════════════════════════════════ */

.mk {
  text-decoration-thickness: var(--mark-thickness);
  text-underline-offset: var(--mark-offset);
  /* 받침에서 선을 끊지 않는다 — 끊으면 너덜거려 보인다. */
  text-decoration-skip-ink: none;
  cursor: pointer;
}
/* 색 — 이 둘뿐이다 */
.mk-good { text-decoration-color: var(--mark-good); }
.mk-work { text-decoration-color: var(--mark-work); }

/* 선 모양 — 무엇에 대한 지적인가 */
.mk-core  { text-decoration-line: underline; text-decoration-style: solid; }
.mk-logic { text-decoration-line: underline; text-decoration-style: wavy; }
/* 다듬기 — 표현을 고치는 것과 맞춤법을 고치는 것은 역할이 같아 한 표시로 묶는다. */
.mk-fix   { text-decoration-line: underline; text-decoration-style: dotted; }
.mk-cut   { text-decoration-line: line-through; text-decoration-style: solid; color: var(--ink-muted); }

/* 지금 읽고 있는 지적 */
.mk.on { background: var(--mark-good-bg); }
.mk-work.on { background: var(--mark-work-bg); }

/* ── 첨삭 코멘트 ─────────────────────────────────────────────────────── */

.fb-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--mark-work);
  border-radius: var(--radius-surface);
  background: var(--mark-work-bg);
}
.fb-note.good { border-left-color: var(--mark-good); background: var(--mark-good-bg); }
.fb-note-head {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--type-micro-size);
  font-weight: var(--type-micro-weight);
  letter-spacing: var(--type-micro-tracking);
  color: var(--mark-work);
}
.fb-note.good .fb-note-head { color: var(--mark-good); }
.fb-note-head .n {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--radius-control);
  background: var(--mark-work); color: var(--surface);
  font-variant-numeric: tabular-nums;
}
.fb-note.good .fb-note-head .n { background: var(--mark-good); }
.fb-note p {
  margin: 0;
  font-size: var(--type-body-sm-size);
  letter-spacing: var(--type-body-sm-tracking);
  line-height: var(--type-body-sm-leading);
  color: var(--ink-body);
}

/* ── 표현 다듬기 — 고친 문장이 붙는다 ──────────────────────────────────── */

.fb-fix { margin-top: var(--space-3); }
.fb-fix-row {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
}
.fb-fix-row .k {
  flex: none; min-width: 42px;
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-tracking);
  color: var(--ink-muted);
  padding-top: 3px;
}
.fb-fix-row.was .v { color: var(--ink-muted); text-decoration: line-through;
  text-decoration-color: var(--mark-work); text-decoration-thickness: 1px; }
.fb-fix-row.now .v { color: var(--ink-primary); font-weight: 600; }
.fb-fix-row + .fb-fix-row { border-top: var(--border-hairline); }

/* ══════════════════════════════════════════════════════════════════════
   원고지
   배치는 wongoji.js 가 계산한다. 여기는 그리기만 한다.
   근거: 「원고지 프로세서 구현 지시서」 10.2
   ══════════════════════════════════════════════════════════════════════ */

/* 편집기 — 넓으면 입력창 왼쪽 · 원고지 오른쪽을 한 블록에, 좁으면 위아래.
   화면 폭이 아니라 편집기 자신의 폭으로 판단한다. 사이드바가 있든 없든 맞게 갈린다. */
.wg-wrap { container: wg / inline-size; }
.wg-split { display: flex; flex-direction: column; gap: var(--space-3); }
.wg-pane { min-width: 0; }
.wg-pane-input { position: relative; }
.wg-pane-sheet { display: flex; flex-direction: column; gap: var(--space-2); }

/* 한 블록으로 놓는 최소 폭 = 입력창 340 + 원고지 660.
   원고지 660 은 25칸 × 최소 22px 에 눈금 자리 48px, 좌우 여백까지 더한 값이다. */
@container wg (min-width: 1024px) {
  .wg-wrap:not(.is-readonly) .wg-frame {
    border: var(--border-hairline);
    background: var(--surface);
  }
  /* 블록 안에 스크롤은 없다 — 2026-09-17 선생님 지시. 블록은 내용만큼 길어지고
     페이지 스크롤 하나로 끝까지 내려가면 바로 '제출하기'다. 비어 있어도 입력창이 너무 납작하지 않게 최소 높이만 둔다. */
  .wg-wrap:not(.is-readonly) .wg-split {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(660px, 920px);
    gap: 0;
    min-height: 480px;
  }
  .wg-wrap:not(.is-readonly) .wg-pane-input { border-right: var(--border-hairline); }
  .wg-wrap:not(.is-readonly) .wg-input { border: 0; border-radius: var(--radius-surface); }
  /* 입력창은 왼쪽 칸을 가득 채운다 — 원고지 높이만큼 늘어나고, 빈 아래쪽을 눌러도 이어 쓸 수 있다.
     글이 칸보다 길어지면 manuscript.js 의 fit 이 칸을 늘리므로 안에서 스크롤되지 않는다. */
  .wg-wrap:not(.is-readonly) .wg-input:not(.wg-probe) {
    position: absolute; inset: 0;
    height: 100%; min-height: 0;
    resize: none; overflow: hidden;
  }
  /* 블록 테두리와 겹치지 않게 초점 선을 안쪽으로 그린다 (선 두께만큼) */
  .wg-wrap:not(.is-readonly) .wg-input:focus-visible { outline-offset: -2px; }
  .wg-wrap:not(.is-readonly) .wg-pane-sheet { gap: 0; padding: var(--space-4); }
  /* 칸수를 편집기 안에 둔 채 쓰는 곳에서는 원고지 위에 붙인다.
     답안 제출 화면은 칸수를 바깥 막대(.rd-dock)로 옮겨 달므로 여기에 해당하지 않는다. */
  .wg-wrap:not(.is-readonly) .wg-pane-sheet > .wg-note {
    position: sticky; top: 62px; z-index: 1;
    margin-top: calc(-1 * var(--space-4));
    padding-block: var(--space-3) var(--space-2);
    background: var(--surface);
  }
}

/* 학생이 실제로 치는 곳. 높이는 글 길이를 따라 manuscript.js 가 맞춘다 — 안에서 스크롤되지 않는다. */
.wg-input {
  width: 100%; min-height: 160px; resize: none; overflow: hidden;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--ink-body);
}
/* 입력창 글 높이를 재는 숨은 복제본. 보이지도 않고 자리도 차지하지 않는다. */
.wg-probe {
  position: absolute; top: 0; left: 0;
  height: 0; min-height: 0; overflow: hidden; resize: none;
  visibility: hidden; pointer-events: none;
}

.wg { overflow-x: auto; }
.wg-grid {
  --wg-min-cell: 22px;      /* 이보다 작아지면 글자가 뭉갠다 */
  /* 오른쪽 100칸 눈금이 설 자리. 네 자리 숫자(1000~1600)가 들어가야 한다 —
     32px 였을 때 1000칸을 넘기면 7px 삐져나와 가로 스크롤바가 생겼다. */
  --wg-tick-gutter: var(--space-12);
  container-type: inline-size;
  width: max-content; min-width: 100%;
  padding-right: var(--wg-tick-gutter);
}

/* 행을 붙여 실제 원고지처럼 둔다. 지시서 10.2 의 행간(칸 높이의 50%)은
   지워진 띄어쓰기 표시를 얹을 자리였는데, 그 표시를 쓰지 않기로 해서 함께 걷어냈다. */
.wg-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--wg-cols), minmax(var(--wg-min-cell), 1fr));
  border-left: var(--border-hairline);
}

/* 100칸 눈금 — 25칸이면 네 줄마다 한 번, 1600칸까지.
   학생이 "지금 몇 자쯤 썼나"를 세지 않고 바로 읽게 하는 것이 목적이다. */
.wg-tick {
  position: absolute; left: 100%; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding-left: var(--space-2);
  font-family: var(--font-numeric);
  font-size: var(--type-micro-size);
  font-weight: var(--type-micro-weight);
  letter-spacing: var(--type-micro-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.wg-row:first-child { border-top: var(--border-hairline); }

.wg-cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  border-right: var(--border-hairline);
  border-bottom: var(--border-hairline);
  background: var(--surface);
  font-family: var(--font-body);
  /* 칸이 좁아지면 글자도 따라 줄어들되 읽을 수 없을 만큼은 아니다. */
  font-size: clamp(11px, 3.1cqw, var(--type-body-size));
  /* 칸 안에서는 자간을 0으로 고정한다 — 자간이 들어가면 칸과 어긋난다. */
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink-body);
}

/* 부호가 칸 안에서 서는 자리 (지시서 5.4)
   칸 선에 딱 붙이면 부호가 선과 뭉쳐 보인다. 모서리에서 조금 떼어 놓는다.
   글자 크기를 기준으로 삼아, 칸이 좁아져도 떼어 놓은 비율이 유지되게 한다. */
.wg-cell { --wg-inset: 0.2em; }

.a-c  { place-items: center; }
.a-bl { place-items: end start;    padding: 0 0 var(--wg-inset) var(--wg-inset); }
.a-tl { place-items: start start;  padding: var(--wg-inset) 0 0 var(--wg-inset); }
.a-tr { place-items: start end;    padding: var(--wg-inset) var(--wg-inset) 0 0; }
.a-l  { place-items: center start; padding-left: var(--wg-inset); }
.a-r  { place-items: center end;   padding-right: var(--wg-inset); }

/* 한 칸에 두 자가 들어가면 자간을 좁혀 칸 안에 맞춘다.
   가운데로 세우므로 위의 모서리 여백은 도로 거둔다. */
.wg-cell.is-wide {
  font-size: clamp(8px, 2.2cqw, 12px);
  letter-spacing: -0.04em;
  place-items: center;
  padding: 0;
}

/* 행 끝에 부호를 이어 붙인 칸 — 글자는 왼쪽, 부호는 오른쪽 아래 작게 */
.wg-cell.is-over { place-items: center start; padding: 0 0 0 var(--wg-inset); }
.wg-cell.is-over b { font-weight: 400; }
.wg-cell.is-over i {
  position: absolute; right: var(--wg-inset); bottom: var(--wg-inset);
  font-style: normal;
  font-size: clamp(7px, 1.9cqw, 10px);
  color: var(--ink-muted);
}

/* 줄표는 두 칸에 걸쳐 하나의 선으로 긋는다 (원고지 규범).
   왼쪽 반쪽이 칸 사이의 세로줄을 건너 이어 붙어 한 줄로 보인다. */
.wg-cell.is-dash::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  height: 0;
  border-top: var(--border-hairline);
  border-top-color: currentColor;
}
.wg-cell.is-dash-l::after { right: -1px; }

/* 적정 분량 구간 — 기준선 띠를 대신한다.
   하한에 닿으면 칸이 파래지고, 상한을 넘으면 붉어진다. 모자란 쪽은 표시하지 않는다.
   토큰의 두 색에서 같은 비율로 뽑아 써 양쪽 무게를 맞춘다. 다크 모드도 따라온다. */
.wg-cell.zone-in   { background: color-mix(in srgb, var(--navy-500) 14%, var(--surface)); }
.wg-cell.zone-over { background: color-mix(in srgb, var(--state-danger) 14%, var(--surface)); }

/* 답안 분량 — "답안 분량 [ 749자 ]" (2026-09-17)
   라벨은 옅게, 바뀌는 값은 상자에 담는다. 상자가 "쓰는 대로 움직이는 숫자"임을 알린다.
   상자 폭은 숫자에 맞춘다. 네 자리만큼 미리 잡았더니 세 자리일 때 왼쪽이 비어 어색했다.
   자릿수는 10·100·1,000 에서만 바뀌고 상자 오른쪽은 빈 공간이라 폭이 바뀌어도 밀리는 것이 없다.
   적정 구간에 들면 숫자와 테두리가 파래지고, 넘으면 붉어진다 — 원고지 칸 색과 같은 말이다. */
.wg-note {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0;
}
.wg-count-label {
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-ui-tracking);
  line-height: var(--type-ui-leading);
  color: var(--ink-muted);
  white-space: nowrap;
}
.wg-count {
  display: inline-flex; align-items: baseline;
  padding: var(--space-1) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  background: var(--surface-subtle);
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-ui-tracking);
  line-height: var(--type-ui-leading);
  color: var(--ink-body);
  white-space: nowrap;
}
.wg-count b {
  font-family: var(--font-numeric);
  font-size: var(--type-body-size);
  font-weight: 700;
  letter-spacing: var(--type-body-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--ink-primary);
}
.wg-count.is-in   { border-color: var(--navy-500); }
.wg-count.is-in b { color: var(--navy-500); }
.wg-count.is-over   { border-color: var(--state-danger); }
.wg-count.is-over b { color: var(--state-danger); }

/* 읽기 전용 원고지는 바탕을 죽이되, 구간 색은 그대로 보여 준다 */
.wg-wrap.is-readonly .wg-cell:not(.zone-in):not(.zone-over) { background: var(--surface-subtle); }

/* 교사 답안 읽기 — 원고지 보기 / 줄글 보기 */
.ans-modes { margin-bottom: var(--space-4); }
.ans-slot .ms { margin-top: var(--space-2); }