/*
 * steno-student.css — 학생 화면
 *
 * 선생님 화면과 색을 같이 쓰되, 값에 색을 입히지 않는다.
 * 92.8% 를 초록으로, 80.3% 를 빨강으로 칠하는 순간 그 색이 곧 판정이 된다.
 * 숫자는 모두 같은 색이고, 색은 '할 일'과 '온 것'에만 쓴다.
 */

.steno-student-feedback {
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid #e3e6ec;
  border-left: 3px solid #2f6bd8;
  border-radius: 0 10px 10px 0;
  background: #fbfcfe;
}

.steno-feedback-part {
  margin: 0 0 7px;
  font-size: 14px;
  line-height: 1.75;
  color: #2c3340;
  white-space: pre-wrap;
}

.steno-feedback-part:last-of-type {
  margin-bottom: 10px;
}

.steno-feedback-label {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eaf1fd;
  color: #2a4a80;
  font-size: 12px;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
 * 콘텐츠 카드
 * ------------------------------------------------------------------ */

.steno-shell-main .steno-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.steno-shell-main .steno-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.steno-shell-main .steno-card:hover {
  border-color: #2f6bd8;
}

.steno-shell-main .steno-card.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.steno-shell-main .steno-card-title {
  font-weight: 600;
  font-size: 15px;
}

.steno-shell-main .steno-card-meta,
.steno-shell-main .steno-card-note {
  font-size: 12px;
  color: #6b7484;
}

.steno-shell-main .steno-card-go {
  margin-top: 4px;
  font-size: 13px;
  color: #2f6bd8;
}

/* ------------------------------------------------------------------
 * 최근 기록 줄
 * ------------------------------------------------------------------ */

.steno-shell-main .steno-recent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.steno-shell-main .steno-recent:hover {
  border-color: #2f6bd8;
}

.steno-shell-main .steno-recent-date {
  font-size: 12px;
  color: #8a92a0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.steno-shell-main .steno-recent-title {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 값에 색을 입히지 않는다. 초록/빨강으로 칠하면 그 색이 곧 판정이 된다. */
.steno-shell-main .steno-recent-score {
  font-size: 14px;
  font-weight: 600;
  color: #1f2430;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media print {
  .steno-side,
  .steno-shell-actions,
  .steno-record-filters,
  .steno-btn { display: none !important; }
  .steno-shell { grid-template-columns: 1fr; }
  .steno-panel, .steno-student-feedback { break-inside: avoid; }
}

/* ------------------------------------------------------------------
 * 사용 가이드
 * ------------------------------------------------------------------ */

.steno-guide-steps {
  margin: 0;
  padding-left: 20px;
}

.steno-guide-steps li {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: #2c3340;
}

.steno-guide-steps strong {
  display: block;
  margin-bottom: 2px;
}

.steno-guide-terms {
  margin: 0;
}

.steno-guide-terms dt {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #1f2430;
}

.steno-guide-terms dt:first-child {
  margin-top: 0;
}

.steno-guide-terms dd {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: #4a5262;
}

.steno-guide-nots {
  margin: 0 0 10px;
  padding-left: 20px;
}

.steno-guide-nots li {
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.8;
  color: #2c3340;
}