/*
 * steno.css — 학생 화면
 *
 * 기획안 5: 학생 입력 화면은 최대한 단순하게 구성한다.
 * 치는 동안 눈에 들어오는 것은 원문을 듣는 귀와 입력칸뿐이어야 한다.
 * 그래서 색과 장식을 최대한 줄이고, 입력칸을 가장 크게 둔다.
 */

:root {
  --steno-ink: #0f172a;
  --steno-dim: #64748b;
  --steno-line: rgba(148, 163, 184, 0.32);
  --steno-accent: #6d5efc;
  --steno-bg: #f8fafc;
}

* { box-sizing: border-box; }

/*
 * [숨김이 풀리던 문제]
 * 브라우저 기본 규칙은 [hidden] { display: none } 인데, 아래에서 버튼에
 * display: inline-flex 를 주면 그 기본 규칙을 덮어쓴다. 둘 다 같은 세기라
 * 나중에 적힌 이쪽이 이긴다. 그래서 hidden 을 붙여 감춘 '학생 분석' 링크가
 * 학생 화면에 그대로 보였다. 감추라고 한 것은 반드시 감춘다.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--steno-bg);
  color: var(--steno-ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- 로그인 ---------- */

.steno-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.steno-gate-box {
  width: 100%;
  max-width: 380px;
  padding: 32px 28px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--steno-line);
}
.steno-gate-title { margin: 0 0 8px; font-size: 22px; }
.steno-gate-note { margin: 0 0 20px; font-size: 13px; color: var(--steno-dim); }
.steno-field { display: grid; gap: 6px; margin-bottom: 14px; }
.steno-field > span { font-size: 13px; font-weight: 700; color: #475569; }
.steno-field input {
  padding: 11px 13px;
  border: 1px solid var(--steno-line);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
}
.steno-field input:focus { outline: 2px solid var(--steno-accent); border-color: transparent; }

/* ---------- 공통 ---------- */

.steno-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--steno-line);
}
.steno-brand { font-weight: 800; color: var(--steno-ink); text-decoration: none; font-size: 16px; }
.steno-topbar-right { display: flex; align-items: center; gap: 10px; }
.steno-who { font-size: 13px; color: var(--steno-dim); }

.steno-main { max-width: 900px; margin: 0 auto; padding: 24px 20px 64px; }
.steno-page-title { margin: 0 0 6px; font-size: 24px; }
.steno-page-note { margin: 0 0 20px; font-size: 13.5px; color: var(--steno-dim); }
.steno-section-title { margin: 32px 0 12px; font-size: 17px; }

.steno-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--steno-line);
  border-radius: 10px;
  background: #fff;
  color: var(--steno-ink);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.steno-btn:disabled { opacity: 0.5; cursor: default; }
.steno-btn-primary { background: var(--steno-accent); border-color: transparent; color: #fff; }
.steno-btn-ghost { background: transparent; font-weight: 600; color: var(--steno-dim); }

.steno-message {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.14);
  font-size: 13.5px;
}
.steno-message[data-tone="error"] { background: rgba(239, 68, 68, 0.12); color: #991b1b; }

.steno-empty {
  margin: 0;
  padding: 22px;
  border-radius: 14px;
  background: rgba(148, 163, 184, 0.10);
  color: var(--steno-dim);
  font-size: 13.5px;
  text-align: center;
}

/* ---------- 콘텐츠 고르기 ---------- */

.steno-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.steno-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--steno-line);
  text-decoration: none;
  color: var(--steno-ink);
}
.steno-card:hover { border-color: var(--steno-accent); }
.steno-card.is-disabled { opacity: 0.55; cursor: default; }
.steno-card.is-disabled:hover { border-color: var(--steno-line); }
.steno-card-title { font-size: 16px; font-weight: 700; }
.steno-card-meta { font-size: 12.5px; color: var(--steno-dim); }
.steno-card-go { font-size: 13px; font-weight: 700; color: var(--steno-accent); }
.steno-card-note { font-size: 12.5px; color: var(--steno-dim); }

.steno-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.steno-recent a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--steno-line);
  text-decoration: none;
  color: var(--steno-ink);
}
.steno-recent-date { font-weight: 700; color: var(--steno-dim); min-width: 46px; font-size: 13px; }
.steno-recent-title { flex: 1; }
.steno-recent-score { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 듣고치기 ---------- */

.steno-practice-main { max-width: 1000px; }
.steno-practice-head { margin-bottom: 16px; }
.steno-practice-title { margin: 0 0 4px; font-size: 22px; }
.steno-practice-meta { margin: 0; font-size: 13.5px; color: var(--steno-dim); }

.steno-practice-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--steno-line);
  margin-bottom: 14px;
}
.steno-practice-audio { flex: 1 1 320px; min-width: 260px; }
.steno-practice-times { display: flex; gap: 18px; }
.steno-time { display: grid; gap: 2px; text-align: right; }
.steno-time-label { font-size: 11.5px; color: var(--steno-dim); }
.steno-time strong { font-size: 18px; font-variant-numeric: tabular-nums; }

/*
 * 입력칸이 화면에서 가장 크다. 치는 동안 눈이 여기만 머물러야 한다.
 * 맞춤법 밑줄(빨간 줄)은 HTML 에서 spellcheck="false" 로 끈다.
 * 틀렸다는 표시가 뜨면 그것이 곧 "오류 여부를 알려주는 것"이 되어,
 * 기획안 5가 막은 것과 같아진다.
 */
.steno-practice-input {
  width: 100%;
  min-height: 46vh;
  padding: 20px;
  border: 1px solid var(--steno-line);
  border-radius: 16px;
  background: #fff;
  font-family: inherit;
  font-size: 17px;
  line-height: 2;
  resize: vertical;
}
.steno-practice-input:focus { outline: 2px solid var(--steno-accent); border-color: transparent; }
.steno-practice-input:disabled { background: rgba(148, 163, 184, 0.08); }

.steno-practice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- 결과 ---------- */

.steno-scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.steno-score {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--steno-line);
  text-align: center;
}
.steno-score-label { font-size: 12.5px; color: var(--steno-dim); }
.steno-score-value { font-size: 22px; }

.steno-feedback-block {
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--steno-line);
  margin-bottom: 10px;
}
.steno-feedback-label { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--steno-accent); }
.steno-feedback-text { margin: 0; white-space: pre-wrap; }

@media (max-width: 640px) {
  .steno-practice-input { min-height: 38vh; font-size: 16px; }
  .steno-practice-times { width: 100%; justify-content: space-between; }
}

/* ---------- 관리자: 콘텐츠 등록 · 음원 정렬 ---------- */

.steno-admin-main { max-width: 1080px; }

.steno-admin-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.steno-field-wide { grid-column: span 2; }
.steno-field-full { grid-column: 1 / -1; }
.steno-field select,
.steno-field textarea {
  padding: 11px 13px;
  border: 1px solid var(--steno-line);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
}
.steno-field textarea { min-height: 140px; line-height: 1.9; resize: vertical; }
.steno-field select:focus,
.steno-field textarea:focus { outline: 2px solid var(--steno-accent); border-color: transparent; }

.steno-note-line { margin: 10px 0 0; font-size: 12.5px; color: var(--steno-dim); }

.steno-admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--steno-line);
}
.steno-admin-bar .steno-field { margin-bottom: 0; min-width: 240px; }
.steno-admin-audio { flex: 1 1 320px; min-width: 260px; }

.steno-admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--steno-line);
}
.steno-admin-head h3 { margin: 0 0 4px; font-size: 18px; }
.steno-admin-head-meta { margin: 0; font-size: 13px; color: var(--steno-dim); }
.steno-admin-head-state { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--steno-dim); }
.steno-admin-head-state .is-on { color: #047857; font-weight: 700; }
.steno-admin-head-state .is-off { color: #b45309; font-weight: 700; }

/*
 * 들으면서 찍는 칸.
 * 음원을 들으며 눈은 '지금 들려야 할 표현'에, 손은 [지금] 에 있어야 한다.
 * 그래서 다음 표현을 크게 쓰고 버튼도 크게 둔다.
 */
.steno-mark-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(109, 94, 252, 0.07);
  border: 1px solid rgba(109, 94, 252, 0.24);
}
.steno-mark-label { margin: 0 0 4px; font-size: 12.5px; color: var(--steno-dim); }
.steno-mark-next { margin: 0; font-size: 24px; font-weight: 700; }
.steno-mark-actions { display: flex; gap: 10px; align-items: center; }
.steno-btn-big { padding: 16px 34px; font-size: 17px; }
.steno-mark-help { width: 100%; margin: 0; font-size: 12.5px; color: var(--steno-dim); }

.steno-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  font-size: 13.5px;
  color: #475569;
}

.steno-table-wrap {
  max-height: 520px;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--steno-line);
  background: #fff;
}
.steno-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.steno-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.steno-table tbody td {
  padding: 8px 12px;
  border-top: 1px solid var(--steno-line);
}
/* 아직 저장하지 않은 줄. 저장을 잊고 나가는 일을 줄인다. */
.steno-table tbody tr.is-dirty { background: rgba(251, 191, 36, 0.12); }
.steno-table .empty-row { text-align: center; color: var(--steno-dim); padding: 24px 12px; }
.steno-align-text { min-width: 140px; }
.steno-align-input {
  width: 110px;
  padding: 6px 8px;
  border: 1px solid var(--steno-line);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
}
.steno-btn-sm { padding: 5px 12px; font-size: 12.5px; }

.steno-tag {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.steno-tag.is-verified { background: rgba(16, 185, 129, 0.14); color: #047857; }
.steno-tag.is-auto { background: rgba(217, 119, 6, 0.14); color: #b45309; }

/* ------------------------------------------------------------------
 * 자동 정렬 정확도 상자 (기획안 61)
 * 숫자만 보여 주는 자리다. "정확하다/부정확하다" 같은 판정 문구는
 * 여기 넣지 않는다. 판단은 선생님이 한다.
 * ------------------------------------------------------------------ */
.steno-align-score {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--steno-line);
  border-radius: 12px;
  background: var(--steno-bg);
}
.steno-align-score h3 { margin: 0 0 8px; font-size: 15px; }
.steno-align-score h4 { margin: 18px 0 6px; font-size: 13.5px; }
.steno-note { margin: 0 0 6px; font-size: 13px; line-height: 1.65; }
.steno-note-quiet { color: var(--steno-dim); font-size: 12.5px; }
.steno-table-compact { font-size: 12.5px; margin-top: 6px; }
.steno-table-compact thead th,
.steno-table-compact tbody td { padding: 6px 8px; }
/* 숫자는 자릿수가 흔들리면 견주기 어렵다. 폭을 고정한다. */
.steno-table .numeric,
.steno-table-compact .numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------
 * 담당 선생님 배정
 * ------------------------------------------------------------------ */
.steno-assign-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .steno-assign-grid { grid-template-columns: minmax(0, 1fr); }
}
.steno-assign-head { margin: 0 0 8px; font-size: 14px; }
.steno-assign-others { font-size: 12.5px; color: var(--steno-dim); }

/* ------------------------------------------------------------------
 * 학생 듣고치기 — 도면대로
 *
 * 치는 동안 눈에 들어와도 되는 것은 "얼마나 왔나"뿐이다.
 * 정확도·오류·지연은 여기 없다(기획안 5).
 * ------------------------------------------------------------------ */
.steno-practice-card {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(6rem, auto)) minmax(9rem, 1fr);
  gap: 18px 26px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--steno-line);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 16px;
}
@media (max-width: 820px) {
  .steno-practice-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .steno-practice-ident { grid-column: 1 / -1; }
  .steno-practice-stat.is-wide { grid-column: 1 / -1; }
}
.steno-practice-kicker {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--steno-dim);
}
.steno-practice-card .steno-practice-title { margin: 0; font-size: 22px; font-weight: 700; }
.steno-practice-card .steno-practice-meta { margin: 3px 0 0; font-size: 13px; color: var(--steno-dim); }
.steno-practice-stat { display: flex; flex-direction: column; gap: 3px; }
.steno-stat-label { font-size: 12px; color: var(--steno-dim); }
.steno-stat-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.steno-stat-value.is-live { color: var(--steno-accent); }

.steno-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .3);
  overflow: hidden;
  margin-top: 6px;
}
.steno-progress.is-slim { height: 6px; margin: 8px 0 16px; }
.steno-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--steno-accent);
  transition: width .25s linear;
}
@media (prefers-reduced-motion: reduce) { .steno-progress-fill { transition: none; } }

.steno-guide {
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(109, 94, 252, .07);
  margin-bottom: 16px;
}
.steno-guide-head { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--steno-accent); }
.steno-guide-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }

.steno-practice-status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.steno-status-label { color: var(--steno-dim); margin-right: 8px; font-size: 12.5px; }
.steno-practice-status strong { font-variant-numeric: tabular-nums; }

.steno-practice-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.steno-practice-spacer { flex: 1 1 auto; }
.steno-saved { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.steno-saved-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(16, 185, 129, .16); color: #047857; font-size: 12px; font-weight: 700;
}
.steno-saved-time { color: var(--steno-dim); font-variant-numeric: tabular-nums; }
.steno-practice-footnote {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--steno-bg);
  font-size: 12.5px;
  color: var(--steno-dim);
}

/* =========================================================
 * 수업 모드
 *
 * 학생 화면에 더해지는 것은 두 가지뿐이다 — 번호를 넣는 칸과,
 * 지금 무엇을 기다리는 중인지 알려 주는 한 줄.
 * 치는 동안 눈에 들어오는 것을 늘리지 않는다(기획안 5).
 * ========================================================= */

.steno-join-card { display: block; }
.steno-join-form { display: flex; gap: 10px; align-items: center; margin: 18px 0 0; flex-wrap: wrap; }
.steno-join-input {
  flex: 0 0 auto;
  width: 210px;
  padding: 14px 16px;
  border: 1px solid var(--steno-line);
  border-radius: 10px;
  background: #fff;
  font: 700 30px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.22em;
  text-align: center;
  color: var(--steno-ink);
}
.steno-join-input:focus { outline: 2px solid var(--steno-accent); outline-offset: 2px; }
.steno-join-note { margin: 14px 0 0; font-size: 12.5px; color: var(--steno-dim); }

.steno-live-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--steno-line);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
}
.steno-live-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(109, 94, 252, .12);
  color: var(--steno-accent);
  font-size: 12px;
  font-weight: 700;
}
.steno-live-code strong { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.steno-live-state { color: var(--steno-ink); }
.steno-live-sync { margin-left: auto; font-size: 12px; color: var(--steno-dim); }
/*
 * 시계가 아직 안 맞았을 때만 눈에 띄게 한다.
 * 맞은 상태는 당연한 것이라 조용해야 한다.
 */
.steno-live-sync[data-state="waiting"] { color: #b45309; font-weight: 600; }

/* 관리 화면의 체크 한 줄 */
.steno-check-line { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.steno-check-line input { width: 16px; height: 16px; }
.steno-check-inline { margin-right: 8px; }
.steno-field-check span:first-child { display: block; margin-bottom: 6px; }