/* 디자인 시스템 토큰 (stitch_design/DESIGN.md 기준) — 교사 콘솔과 학생 화면이 공유한다 */
:root {
  --navy: #12304f;
  --navy-2: #1b3f66;
  --canvas: #f2f5f8;
  --blue: #3b7dd8;
  --blue-strong: #2f68b3;
  --ink: #181c1e;
  --ink-2: #43474e;
  --ink-3: #74777e;
  --line: #e2e8f0;
  --card: #ffffff;

  /* 툴민 논증 의미 색 */
  --claim: #3b7dd8;
  --evidence: #22c1a3;
  --warrant: #8b5cf6;

  /* 평가 상태 색 */
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;

  --grad: linear-gradient(135deg, #22c1a3, #4f8ef7);
  --font: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); }
button, input, select, textarea { font-family: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Material Symbols — 폰트가 로드되기 전에는 글자(ligature 이름)가 보이지 않도록 숨긴다 */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal;
  display: inline-block; font-size: 20px; vertical-align: middle; user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  opacity: 0;
}
html.icons-ready .ms { opacity: 1; }
.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* 논증 판정 칩 — 교사 표, 학생 채팅, 논증 지도가 모두 같은 색을 쓴다 */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 18px; border: 1px solid transparent; white-space: nowrap;
}
.chip-claim     { background: rgba(59,125,216,.10);  color: #2f68b3; border-color: rgba(59,125,216,.30); }
.chip-evidence  { background: rgba(34,193,163,.10);  color: #0e8c76; border-color: rgba(34,193,163,.35); }
.chip-warrant   { background: rgba(139,92,246,.10);  color: #6d3fe0; border-color: rgba(139,92,246,.30); }
.chip-rebuttal  { background: rgba(239,68,68,.10);   color: #c53030; border-color: rgba(239,68,68,.30); }
.chip-qualifier { background: rgba(99,102,241,.12);  color: #4338ca; border-color: rgba(99,102,241,.32); }
.chip-evade     { background: rgba(245,158,11,.14);  color: #b45309; border-color: rgba(245,158,11,.40); }
.chip-offtopic  { background: rgba(244,63,94,.10);   color: #be123c; border-color: rgba(244,63,94,.30); }
.chip-question  { background: rgba(100,116,139,.12); color: #475569; border-color: rgba(100,116,139,.28); }
.chip-hold      { background: rgba(148,163,184,.16); color: #64748b; border-color: rgba(148,163,184,.35); }

/* 캐릭터 아바타 (표정은 data-state로 바뀐다: asking / thinking / praising) */
.avatar { position: relative; border-radius: 50%; overflow: hidden; aspect-ratio: 1 / 1; background: linear-gradient(160deg, #dff5ef, #d7e6fb); }
.avatar svg { display: block; width: 100%; height: 100%; }
.avatar .m-ask, .avatar .m-think, .avatar .m-happy { display: none; }
.avatar[data-state="asking"] .m-ask,
.avatar[data-state="thinking"] .m-think,
.avatar[data-state="praising"] .m-happy { display: inline; }

/* 푸터 크레딧 + 제작자 안내 모달 — 교사 콘솔·학생 화면이 함께 쓴다 (js/credit-footer.js).
   색은 기본으로 위 토큰을 따르고, 학생 화면은 --credit-* 로 다크 테마 색을 덮어쓴다. */
.credit-footer { padding: 20px 16px 24px; text-align: center; font-size: 12px; line-height: 18px; color: var(--credit-ink-3, var(--ink-3)); }
.credit-footer p { margin: 0; }
.credit-link {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0 1px; border: 0; background: none; font: inherit; font-weight: 600; color: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.credit-link:hover { color: var(--blue); }
.credit-link:focus-visible, .credit-close:focus-visible, .credit-card a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.credit-back { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; padding: 16px; background: rgba(18, 48, 79, .55); }
.credit-back.on { display: grid; }
.credit-modal {
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: 14px; padding: 18px;
  border-radius: 20px; background: var(--credit-card, var(--card)); color: var(--credit-ink, var(--ink)); box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.credit-close {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--credit-ink-3, var(--ink-3)); cursor: pointer;
}
.credit-close:hover { color: var(--blue); background: var(--credit-soft, var(--canvas)); }
.credit-card { padding: 18px 20px; border: 1px solid var(--credit-line, var(--line)); border-radius: 16px; background: var(--credit-soft, var(--canvas)); }
.credit-card h2 { margin: 0 0 14px; padding-right: 40px; font-size: 18px; line-height: 26px; font-weight: 700; }
.credit-card h3 { margin: 0 0 10px; font-size: 16px; line-height: 24px; font-weight: 700; }
.credit-card ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; line-height: 23px; color: var(--credit-ink-2, var(--ink-2)); }
.credit-card a { color: var(--credit-link, var(--blue-strong)); text-decoration: none; }
.credit-card a:hover { text-decoration: underline; }
.credit-card .credit-note { margin: 12px 0 0; font-size: 13px; line-height: 20px; font-style: italic; color: var(--credit-ink-3, var(--ink-3)); }