/*
 * steno-records.css — 학습 기록 목록 화면
 *
 * 표가 주인공인 화면이다. 숫자 칸은 자릿수가 흔들리면 눈으로 견주기가
 * 어려워지므로 tabular-nums 로 폭을 고정한다.
 */

.steno-records-main {
  max-width: 1400px;
}

.steno-records-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.steno-records-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------
 * 거르기 줄
 * ------------------------------------------------------------------ */

.steno-record-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin: 18px 0 14px;
  padding: 14px 16px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  background: #fbfcfe;
}

.steno-record-filters .steno-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.steno-record-filters .steno-toolbar-field-wide {
  min-width: 220px;
  flex: 1 1 220px;
}

.steno-record-filters .steno-toolbar-field > span {
  font-size: 12px;
  color: #5b6472;
}

.steno-record-filters .steno-select {
  padding: 7px 10px;
  border: 1px solid #d5dae2;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #1f2430;
  width: 100%;
}

.steno-record-filters .steno-select:focus {
  outline: 2px solid #3b6fd4;
  outline-offset: 1px;
}

/* ------------------------------------------------------------------
 * 위쪽 숫자 넉 장
 * ------------------------------------------------------------------ */

.steno-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.steno-kpi {
  padding: 16px 18px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  background: #fff;
}

.steno-kpi-label {
  margin: 0 0 6px;
  font-size: 13px;
  color: #5b6472;
}

.steno-kpi-value {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: #1f2430;
  font-variant-numeric: tabular-nums;
}

.steno-kpi-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7484;
}

/* 아직 안 한 일. 다른 장과 색을 달리해 눈에 걸리게 한다.
 * 다만 '나쁘다'는 색이 아니라 '할 일이 남았다'는 색이다. */
.steno-kpi-todo {
  border-color: #f0d7c4;
  background: #fffaf5;
}

.steno-kpi-todo .steno-kpi-value {
  color: #b1560f;
}

/* ------------------------------------------------------------------
 * 표
 * ------------------------------------------------------------------ */

.steno-record-count {
  margin: 0 0 8px;
  font-size: 13px;
  color: #5b6472;
}

.steno-record-table {
  width: 100%;
  min-width: 1080px;
}

.steno-record-table td {
  vertical-align: middle;
}

.steno-record-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.steno-record-name {
  display: block;
  font-weight: 600;
  color: #1f2430;
}

.steno-record-sub {
  display: block;
  font-size: 12px;
  color: #8a92a0;
}

.steno-btn-small {
  padding: 4px 12px;
  font-size: 13px;
}

/* ------------------------------------------------------------------
 * 주요 이슈 태그
 *
 * 색을 셋만 쓴다. 태그마다 색이 다르면 색 자체가 등급표가 되어,
 * 선생님이 근거를 열어 보지 않고 색으로 판단하게 된다.
 * ------------------------------------------------------------------ */

.steno-issue {
  display: inline-block;
  margin: 1px 2px 1px 0;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  font-family: inherit;
}

.steno-issue.is-warn {
  border-color: #f0cfcf;
  background: #fdf3f3;
  color: #a33a3a;
}

.steno-issue.is-note {
  border-color: #e6ddc0;
  background: #fdfaf0;
  color: #8a6d1f;
}

.steno-issue.is-quiet {
  border-color: #e0e4ea;
  background: #f6f8fa;
  color: #6b7484;
}

.steno-issue:hover,
.steno-issue:focus-visible {
  border-color: #3b6fd4;
  outline: none;
}

/* ------------------------------------------------------------------
 * 피드백 상태
 * ------------------------------------------------------------------ */

.steno-feedback-state {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.steno-feedback-state.is-published {
  background: #eef6ee;
  color: #2f6b36;
}

.steno-feedback-state.is-draft {
  background: #fdfaf0;
  color: #8a6d1f;
}

.steno-feedback-state.is-none {
  background: #fdf3f3;
  color: #a33a3a;
}

/* ------------------------------------------------------------------
 * 쪽 넘김
 * ------------------------------------------------------------------ */

.steno-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 14px;
  color: #5b6472;
  font-variant-numeric: tabular-nums;
}

.steno-note-quiet {
  color: #6b7484;
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .steno-record-filters .steno-toolbar-field,
  .steno-record-filters .steno-toolbar-field-wide {
    min-width: 100%;
    flex-basis: 100%;
  }
}

/* ==================================================================
 * 대시보드 · 수업 준비에서 함께 쓰는 조각
 * ================================================================== */

/* 오류가 잦았던 영역. 색으로 순위를 매기지 않는다 —
 * 색이 다르면 첫 번째가 '가장 나쁜 것'으로 읽힌다. 모두 같은 색이다. */
.steno-kpi-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.steno-area {
  padding: 3px 10px;
  border: 1px solid #e0e4ea;
  border-radius: 999px;
  background: #f6f8fa;
  font-size: 12px;
  color: #4a5262;
}

.steno-area b {
  font-variant-numeric: tabular-nums;
}

.steno-empty-inline {
  font-size: 12px;
  color: #8a92a0;
}

/* ------------------------------------------------------------------
 * 피드백 대기 줄
 * ------------------------------------------------------------------ */

.steno-todo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.steno-todo:hover {
  border-color: #2f6bd8;
}

.steno-todo-name {
  font-weight: 600;
}

.steno-todo-meta {
  grid-column: 1;
  font-size: 12px;
  color: #6b7484;
}

.steno-todo .steno-feedback-state {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
}

/* ------------------------------------------------------------------
 * 메모
 * ------------------------------------------------------------------ */

.steno-note-item {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 3px solid #e0e4ea;
  background: #fafbfc;
  border-radius: 0 8px 8px 0;
}

.steno-note-head {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #4a5262;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.steno-note-head span {
  font-weight: 400;
  color: #8a92a0;
  font-variant-numeric: tabular-nums;
}

.steno-note-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #2c3340;
  white-space: pre-wrap;
}

/* ------------------------------------------------------------------
 * 바로가기
 * ------------------------------------------------------------------ */

.steno-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.steno-shortcut {
  padding: 14px 12px;
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  background: #fbfcfe;
  text-align: center;
  font-size: 13px;
  color: #2c3340;
  text-decoration: none;
}

.steno-shortcut:hover {
  border-color: #2f6bd8;
  color: #2f6bd8;
}

/* ------------------------------------------------------------------
 * 수업 준비 카드
 * ------------------------------------------------------------------ */

.steno-prepare-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  background: #fff;
}

.steno-prepare-bar .steno-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.steno-prepare-bar .steno-toolbar-field-wide {
  flex: 1 1 240px;
}

.steno-prepare-bar .steno-toolbar-field > span {
  font-size: 12px;
  color: #5b6472;
}

.steno-prepare-bar .steno-select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d5dae2;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

.steno-prep-card {
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  background: #fff;
}

.steno-prep-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.steno-prep-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 12px;
  margin: 0 0 8px;
}

.steno-prep-figures div {
  min-width: 0;
}

.steno-prep-figures dt {
  font-size: 11px;
  color: #8a92a0;
  margin-bottom: 2px;
}

.steno-prep-figures dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1f2430;
  font-variant-numeric: tabular-nums;
}

.steno-prep-issues {
  margin: 0 0 8px;
}

.steno-prep-note {
  padding: 9px 12px;
  border-left: 3px solid #d7deea;
  background: #fafbfc;
  border-radius: 0 8px 8px 0;
}

.steno-prep-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.steno-prep-note-label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  color: #8a92a0;
}

.steno-prep-note.is-empty {
  margin: 0;
  font-size: 12px;
  color: #8a92a0;
  border-left-color: #eceff3;
}

/* 인쇄할 때는 메뉴와 단추를 뺀다. 종이에 찍힌 메뉴는 잉크 낭비다. */
@media print {
  .steno-side,
  .steno-shell-actions,
  .steno-prepare-bar,
  .steno-btn { display: none !important; }
  .steno-shell { grid-template-columns: 1fr; }
  .steno-panel, .steno-prep-card { break-inside: avoid; }
}

/* ==================================================================
 * 공지사항 · 설정
 * ================================================================== */

.steno-notice {
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  background: #fff;
}

/* 공개 전 글. 빗금이 아니라 점선으로 두른다 —
 * 빗금은 '잘못된 것'으로 읽히지만, 공개 전은 잘못이 아니라 아직인 것이다. */
.steno-notice.is-draft {
  border-style: dashed;
  background: #fbfcfe;
}

.steno-notice-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 6px;
}

.steno-notice-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2430;
}

.steno-notice-date {
  margin-left: auto;
  font-size: 12px;
  color: #8a92a0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.steno-notice-flag {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}

.steno-notice-flag.is-pin { background: #eaf1fd; color: #2a4a80; }
.steno-notice-flag.is-draft { background: #f2f4f8; color: #6b7484; }
.steno-notice-flag.is-staff { background: #fdfaf0; color: #8a6d1f; }

.steno-notice-body {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.8;
  color: #2c3340;
  white-space: pre-wrap;
}

.steno-notice-controls,
.steno-notice-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.steno-notice-controls .steno-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.steno-notice-controls .steno-toolbar-field > span {
  font-size: 12px;
  color: #5b6472;
}

.steno-notice-controls .steno-select {
  padding: 7px 10px;
  border: 1px solid #d5dae2;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

#noticeTitle,
#noticeBody {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #d5dae2;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
}

#noticeBody { resize: vertical; }

.steno-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.steno-settings-grid input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d5dae2;
  border-radius: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.steno-settings-grid input:disabled {
  background: #f6f8fa;
  color: #8a92a0;
}

/*
 * 수업 때 친 회차에만 표시를 붙인다.
 * 자습이 기본이라 그쪽에는 아무것도 붙이지 않는다 — 모든 줄에 표시가
 * 있으면 표시가 아니라 잡음이 된다.
 */
.steno-record-mode {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(109, 94, 252, .12);
  color: #4c3fd6;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}