/* theme.css v2 — 시각 테마 오버레이 (2026-07-21)
 *
 * 원칙(SPEC §6.5): 발문·문구·DOM 구조·JS 동작 불변 — 색·글꼴·질감·정렬만.
 * base.html 에서 {% block head %}(템플릿 개별 <style>) 뒤에 로드되어 동률 선택자를 이긴다.
 *
 * v2 (같은 날): 화면 간 규격 통일(폼 높이·라벨·제목 크기 토큰화) + 탈(脫)-AI 다듬기 —
 * 유리효과(blur)·알약(pill) 네비·과한 라운딩/그림자 제거, 중성 베이스 + 주황 단일 악센트,
 * 상태 배지는 의미 있는 것만. (참고: anti-slop 가이드 — 장식 요소 최소화)
 */

:root {
  --bg: #fafafa;
  --bg-soft: #f2f2f4;
  --card: #ffffff;
  --ink: #1a1a1e;
  --ink-soft: #3a3a3e;
  --muted: #77777d;
  --border: #e3e3e8;
  --border-2: #d4d4db;
  --accent: #e8710a;          /* 주황 — 채도 한 단계 낮춰 도구 느낌 */
  --accent-soft: rgba(232, 113, 10, 0.10);
  --accent-ink: #9a4b06;
  --ok-ink: #1a7f37;
  --ok-soft: rgba(26, 127, 55, 0.10);
  --red: #d1242f;
  --red-soft: rgba(209, 36, 47, 0.08);
  --red-ink: #a40e26;
  --link: #0b57d0;
  --r: 6px;                   /* 단일 라운딩 토큰 — 카드·버튼·입력 공통 */
  --sh: 0 1px 2px rgba(20,20,30,0.05);
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
  /* 규격 토큰 — 화면 간 통일 (요청 3) */
  --fz-body: 15.5px;
  --fz-label: 0.92rem;
  --fz-meta: 0.85rem;
  --fz-h1: 1.45rem;
  --fz-h2: 1.15rem;
  --input-pad: 0.6rem 0.75rem;
}

/* ── 공통 바탕 ── */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fz-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--accent);
}
h1 { font-size: var(--fz-h1); letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: var(--fz-h2); letter-spacing: -0.015em; font-weight: 700; color: var(--ink); }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ── 폼 요소 규격 통일 ── */
input[type=text], input[type=password], input[type=number], textarea, select {
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--card);
  padding: var(--input-pad);
  font-size: 1rem;
  transition: border-color 0.12s;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
}
label { font-size: var(--fz-label); font-weight: 600; color: var(--ink-soft); }
.hint, .meta, .optional { color: var(--muted); }

/* 학생 화면 공통 폭·정렬 (로그인·세션목록·측정 화면 동일 축) */
.student-screen { max-width: 640px; margin: 0 auto; }
.student-screen h1 { font-size: var(--fz-h1); margin: 0.8rem 0 0.4rem; }
.student-screen input[type=text], .student-screen input[type=password] {
  display: block; width: 100%; margin: 0.15rem 0 0.7rem;
}
.student-screen form label { display: block; margin-top: 0.4rem; }

/* ── 버튼 ── */
button.primary, .primary {
  background: var(--accent);
  border: none;
  border-radius: var(--r);
  color: #fff;
  font-weight: 600;
  transition: filter 0.12s;
}
button.primary:hover:not(:disabled), .primary:hover:not(:disabled) { filter: brightness(0.94); }
button.primary:disabled { background: var(--border-2); color: var(--muted); }
.primary.big, button.primary.big { width: 100%; padding: 0.75rem 1rem; font-size: 1.05rem; }

/* ── 학생 측정 화면 (구조 불변 — 표면만) ── */
.read-sentence {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh);
  /* 연(stanza) 단위 지문의 행 구분 보존 (2026-07-21 실전5 연 단위 등록부터).
     기존 문장·행 단위 텍스트는 개행이 없어 표시 불변. */
  white-space: pre-line;
}
.read-response { border: 1px solid var(--border-2); border-radius: var(--r); }
.read-response:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.self-report label {
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--card);
  font-weight: 500;
  transition: border-color 0.12s, background 0.12s;
}
.self-report label.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.self-report label:focus-within { outline: 2px solid var(--accent); }
.char-counter.ok { color: var(--ok-ink); }
.progress { background: var(--bg-soft); border-radius: 3px; overflow: hidden; }
.progress-bar { background: var(--accent); border-radius: 3px; }
#audio-btn { border: 1px solid var(--border-2); border-radius: var(--r); background: var(--card); }
#audio-btn.recording { background: var(--red); border-color: var(--red); color: #fff; }
#audio-btn.done { background: var(--ok-ink); border-color: var(--ok-ink); color: #fff; }
.nav-note { color: var(--muted); }
.nav-note.flash-note { color: var(--red-ink); }
.q-choicegroup label { border: 1px solid var(--border-2); border-radius: var(--r); background: var(--card); }
.q-choicegroup label.selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── 알림·배지 (의미 있는 상태만, 절제된 표기) ── */
.flash { border-radius: var(--r); border: 1px solid var(--border); }
.flash-error { background: var(--red-soft); border-color: rgba(209,36,47,0.25); color: var(--red-ink); }
.flash-success { background: var(--ok-soft); border-color: rgba(26,127,55,0.3); color: var(--ok-ink); }
.badge-test {
  display: inline-block; margin-left: 0.45rem; padding: 0.05rem 0.5rem;
  border-radius: 4px; font-size: 0.78rem; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-ink);
  vertical-align: middle;
}

/* ── 로그인·세션 목록 카드 ── */
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 1.4rem 1.5rem 1.6rem;
  margin-top: 1.2rem;
}
.session-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.session-card .badge { border-radius: 4px; font-weight: 600; }
.session-card .badge.open { background: var(--ok-soft); color: var(--ok-ink); }
.session-card .badge.closed { background: var(--bg-soft); color: var(--muted); }
.session-card .badge.done { background: var(--accent-soft); color: var(--accent-ink); }
.session-card button.primary { padding: 0.5rem 1.1rem; }

/* ── 교사(admin)·보고서 ── */
.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.6rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-2);
}
.admin-header h1 { font-size: var(--fz-h1); margin: 0.3rem 0; }
.admin-nav a, .admin-nav button {
  display: inline-block; padding: 0.42rem 0.85rem; margin: 0 0.35rem 0.4rem 0;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--card); color: var(--ink); font-weight: 500; font-size: 0.92rem;
  text-decoration: none;
}
.admin-nav a:hover, .admin-nav button:hover { border-color: var(--accent); color: var(--accent-ink); }
.admin-nav button.link.danger, button.link.danger { color: var(--red-ink); }
table.students th, table th {
  background: var(--bg-soft); color: var(--ink-soft);
  font-size: var(--fz-meta); font-weight: 600;
  border-bottom: 1px solid var(--border-2);
}
table.students td, table td { border-bottom: 1px solid var(--border); }
ul.passages li, ul.sessions li {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 0.55rem 0.9rem; margin: 0.4rem 0;
}
ul.passages li .meta, ul.sessions li .meta { font-size: var(--fz-meta); }
pre.cmd { border-radius: var(--r); }