/* 자동 생성. 고치지 마세요 — scripts/build_assets.py 가 만듭니다. */

/* ───── styles/tokens.css ───── */
/* 디자인 토큰 — 정의만. 규칙 금지 (CSS 소유권 규칙).
   1세대 design-tokens.css 에서 가져오되 보라 그라디언트는 버렸다. */
:root {
  /* 바탕 */
  --g-paper:  #FEFFF2;
  --g-panel:  #FEFFFA;
  --g-sunk:   #F7F6E9;

  /* 글자 */
  --g-text:   #16161A;
  --g-muted:  #55555F;
  --g-faint:  #8B8B96;

  /* 선 */
  --g-border: #E4E4DF;
  --g-border-strong: #D2D2CB;

  /* 진영 — 색은 여기에만 쓴다.
     반대편을 빨강으로 하지 않는다. 빨강은 «오류» 로 읽힌다. */
  --g-side-a: #0E7C86;   /* 찬성 */
  --g-side-b: #B4531F;   /* 반대 */
  --g-side-a-bg: #E4F1F2;
  --g-side-b-bg: #FBEDE4;

  /* 동작 */
  --g-action:    #1B3A8C;
  --g-action-bg: #F0F9FF;
  --g-action-line: #C9D5EE;

  /* 히어로와 「지금 진행 중」 — 2026-09-09 천강 시안.
     대비 실측: 잉크 11.0:1 · 흐린 잉크 6.3:1 · 흰 글자/주황 5.2:1 (전부 AA 이상) */
  --g-hero:     #4C2D00;
  --g-hero-ink: #F6EFE6;
  --g-hero-dim: #C9B49B;
  --g-live:     #B85702;
  --g-live-bg:  #FDF0E3;
  /* 시안 원색. 글자를 얹지 않는 자리(막대·아이콘)에만 쓴다 —
     흰 글자를 얹으면 3.94:1 로 AA 미달이다. */
  --g-live-bright: #CE6102;

  /* 상태 */
  --g-ok:   #2C6E49;
  --g-warn: #8A6A00;
  --g-bad:  #A3232B;

  /* 본문 최대 폭. 셸과 화면이 **같은 값**을 봐야 한다 —
     따로 적으면 전폭 띠의 안쪽 정렬이 언젠가 어긋난다. */
  --g-content-max: 1200px;

  /* 간격 */
  --g-s1: 4px;  --g-s2: 8px;  --g-s3: 12px;
  --g-s4: 16px; --g-s5: 24px; --g-s6: 32px;

  /* 모서리 */
  --g-r-sm: 8px; --g-r-md: 10px; --g-r-lg: 14px;

  /* 글자 크기 */
  --g-fs-sm: 13px; --g-fs-md: 15px; --g-fs-lg: 18px; --g-fs-xl: 24px;
}

/* ───── styles/base.css ───── */
/* 문서 기본. 화면별 셀렉터 금지 (CSS 소유권 규칙). */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--g-paper);
  color: var(--g-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Pretendard",
    "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: var(--g-fs-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }

/* 키보드 초점은 항상 보여야 한다 (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--g-action);
  outline-offset: 2px;
}

/* 움직임을 줄이도록 설정한 사용자에게는 애니메이션을 쓰지 않는다 (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ───── styles/layout.css ───── */
/* 셸 — 상단 바 + 세그먼트 3개 + 본문. 셸 접두어만 쓴다 (CSS 소유권 규칙). */

.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* 본문은 1200px 에서 멈추지만 **띠는 창 끝까지** 가야 한다.
     100vw 는 세로 스크롤바 폭만큼 넘치므로 그 넘침을 여기서 삼킨다.
     hidden 이 아니라 clip 이다 — hidden 은 스크롤 컨테이너를 만들어
     sticky 와 초점 이동 스크롤을 망친다. */
  overflow-x: clip;
}

/* 1세대의 보라 그라디언트 띠를 걷어냈다. 색은 진영에만 쓴다.
   그리고 대비 3.77:1 회귀도 여기서 났었다 — 이제 색을 쓰지 않으니 없다. */
.app-topbar {
  display: flex;
  align-items: center;
  gap: var(--g-s3);
  padding: var(--g-s3) var(--g-s5);
  border-bottom: 1px solid var(--g-border);
  background: var(--g-panel);
}

/* 브랜드는 버튼이다 — 수업 흐름에서 탭이 사라져도 홈으로 갈 길이 된다.
   버튼 기본 모양(테두리·바탕·글꼴)을 지우고 글자만 남긴다. */
.app-brand {
  font-weight: 700; letter-spacing: -0.01em;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: inherit; font-family: inherit; color: inherit;
}
.app-brand:hover { color: var(--g-action); }
/* --g-faint 는 흰 바탕에서 3.37:1 이라 AA 미달이다. 시각 게이트가 잡았다.
   같은 실수를 .seg-item 에서도 했다 — --g-faint 를 본문 글자에 쓰지 않는다. */
.app-school { color: var(--g-muted); font-size: var(--g-fs-sm); }
.app-spacer { flex: 1; }

.app-signout {
  border: 1px solid var(--g-border-strong);
  background: transparent; color: var(--g-muted);
  padding: 5px 12px; border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm); cursor: pointer;
}
.app-signout:hover { border-color: var(--g-action); color: var(--g-action); }

/* 환경설정 — 탭이 아니라 우측 상단 아이콘.
   아이콘만 있는 버튼은 눌리는 넓이가 좁아지기 쉽다. 44px 을 지킨다. */
.app-corner {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: transparent; color: var(--g-muted); cursor: pointer;
}
.app-corner:hover { border-color: var(--g-action); color: var(--g-action); }
.app-corner[aria-current="page"] {
  border-color: var(--g-action); color: var(--g-action); background: var(--g-sunk);
}

.app-todo { color: var(--g-muted); }

.app-role {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 5px;
  background: var(--g-sunk); color: var(--g-muted);
}

.app-who {
  display: inline-flex; align-items: center; gap: var(--g-s2);
  color: var(--g-muted); font-size: var(--g-fs-sm);
}

/* 위 줄 전체. 메인 메뉴가 첫 줄, 흐름 화면이면 단계 막대가 둘째 줄.
   2026-09-13 천강 검수: 단계 막대가 메인 메뉴를 «대신» 차지해
   「오늘·토론 열기·평가 및 기록」 에 들어가면 갈 곳이 사라졌다.
   단계를 보여 주려고 이동을 없애지 않는다 — 쌓는다. */
.app-bars { display: flex; flex-direction: column; }

/* 세그먼트 — 사이드바를 대신한다 */
.seg-bar {
  display: inline-flex;
  gap: 2px;
  margin: var(--g-s4) var(--g-s5) 0;
  padding: 3px;
  background: var(--g-sunk);
  border-radius: var(--g-r-md);
}

.seg-item {
  border: 0;
  background: transparent;
  /* --g-faint(#8B8B96) 를 --g-sunk(#F4F4F1) 위에 얹었더니 3.06:1 이었다.
     AA 4.5 미달. 시각 게이트가 첫 실행에서 잡았다 — 육안으로는 안 보인다.
     1세대에서 같은 부류(3.77:1)가 이틀을 먹었다. --g-muted 로 올린다. */
  color: var(--g-muted);
  padding: 7px 22px;
  border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.seg-item:hover { color: var(--g-text); }

/* 지금 있는 곳은 **한눈에** 보여야 한다.
   2026-08-24 사용자 지적: 「내가 현재 있는 메뉴가 눈에 띄게 색상을 부여하면
   가독성이 좋을 것 같다」. 흰 칩에 검은 글씨는 옆 칸과 무게가 비슷했다. */
.seg-item[aria-current="page"] {
  background: var(--g-action);
  color: var(--g-panel);
  font-weight: 700;
  box-shadow: 0 1px 3px rgb(27 58 140 / 28%);
}
.seg-item[aria-current="page"]:hover { color: var(--g-panel); }

.app-main {
  flex: 1;
  padding: var(--g-s5);
  max-width: var(--g-content-max);
  width: 100%;
}

/* 화면을 바꿀 때 스크린리더 안내를 위해 여기로 초점을 옮긴다.
   그런데 초점 링까지 그리면 본문 전체에 큰 파란 상자가 남는다 —
   2026-08-24 첫 스크린샷에서 실제로 그렇게 보였다.
   버튼·링크의 초점 링은 base.css 에 그대로 있다. */
.app-main:focus, .app-main:focus-visible { outline: none; }

/* 알림 한 줄. 화면이 아무 말도 하지 않으면 «고장» 으로 읽힌다. */
.app-notice {
  margin: 0 var(--g-s5);
  padding: var(--g-s3) var(--g-s4);
  border-radius: var(--g-r-md);
  background: var(--g-action-bg);
  color: var(--g-action);
  font-size: var(--g-fs-sm);
}
.app-notice[hidden] { display: none; }
.app-notice.is-error { background: #FBEAEA; color: var(--g-bad); }

/* 비밀번호 바꾸기 — 나가기 옆. 자주 쓰는 것이 아니므로 조용히. */
.app-pw {
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: transparent; color: var(--g-muted); cursor: pointer;
  padding: 5px 11px; font-size: var(--g-fs-sm);
}
.app-pw:hover { background: var(--g-sunk); color: var(--g-text); }

/* ───── styles/ui.css ───── */
/* 공용 조각. u- 접두어만 (CSS 소유권 규칙의 SHARED_PREFIXES). */

.u-title {
  font-size: var(--g-fs-xl); font-weight: 700;
  letter-spacing: -0.025em; margin: 0 0 var(--g-s4);
}

/* 섹션 제목 — 굵기만으로 가르지 않는다.
   2026-08-24 사용자 지적: 「제목 부분만 볼드체여서 구별이 잘 안 된다」
   → 「제목 라인에 배경색을 넣어서 구분하면 어때?」
   글꼴만 바꾸면 스크롤 중에 어디서 새 덩어리가 시작하는지 안 보인다.
   띠를 깔면 눈이 «여기서 새로 시작» 을 즉시 잡는다.

   색은 진영(찬성/반대)에 쓰므로 여기서는 무채색 띠만 쓴다 —
   섹션 제목이 색을 가지면 진영 색과 싸운다. */
.u-h2 {
  display: flex;
  align-items: center;
  gap: var(--g-s3);
  margin: var(--g-s5) 0 var(--g-s3);
  padding: 9px var(--g-s4);
  border-radius: var(--g-r-sm);
  background: var(--g-sunk);
  border-left: 3px solid var(--g-border-strong);
  font-size: var(--g-fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--g-text);
}

/* 화면 첫 섹션은 위 여백을 줄인다 — 제목 바로 아래에 띠가 붙어야 한 덩어리로 읽힌다. */
.u-title + .u-h2,
.u-note + .u-h2 { margin-top: var(--g-s4); }

/* 색은 **뜻이 있을 때만** 쓴다. 섹션마다 다른 색을 돌려 쓰면 무지개가 되고,
   그러면 색이 아무 말도 하지 않는다. 뜻은 셋뿐이다.
     지금 할 일·내가 움직일 것   → 파랑 (동작)
     살펴볼 곳·아직 안 된 것     → 노랑 (주의)
     쌓인 것·잘된 것             → 초록 (완료)
   나머지는 무채색으로 둔다. 찬성/반대 색과는 겹치지 않는다. */
.u-h2.is-action {
  background: var(--g-action-bg);
  border-left-color: var(--g-action);
  color: var(--g-action);
}
.u-h2.is-warn {
  background: #FBF6E7;
  border-left-color: var(--g-warn);
  color: #6E5500;              /* --g-warn 을 그대로 쓰면 4.5:1 에 못 미친다 */
}
.u-h2.is-ok {
  background: #E7F0EA;
  border-left-color: var(--g-ok);
  color: #1F5236;              /* 같은 이유로 한 단계 어둡게 */
}

/* 「등급이 아니다」 류의 안내. 눈에 띄되 겁주지 않는 무게. */
.u-note {
  margin: 0 0 var(--g-s4);
  font-size: 12.5px; color: var(--g-muted);
  border-left: 2px solid var(--g-border-strong);
  padding-left: var(--g-s3);
}

.u-empty { color: var(--g-muted); font-size: var(--g-fs-sm); margin: 0; }

.u-list {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--g-border); border: 1px solid var(--g-border);
  border-radius: var(--g-r-md); overflow: hidden;
  margin-bottom: var(--g-s5);
}

.u-row {
  display: flex; align-items: baseline; gap: var(--g-s3);
  padding: var(--g-s3) var(--g-s4);
  background: var(--g-panel); border: 0; width: 100%;
  text-align: left; font: inherit; color: inherit;
}
button.u-row { cursor: pointer; }
button.u-row:hover { background: var(--g-action-bg); }

.u-row-main { font-weight: 620; flex: 1; }
.u-row-meta { color: var(--g-muted); font-size: var(--g-fs-sm); white-space: nowrap; }

.u-card {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4) var(--g-s5) var(--g-s5);
  margin-bottom: var(--g-s4);
}

.u-back {
  border: 1px solid var(--g-border-strong); background: transparent;
  color: var(--g-muted); padding: 6px 12px; border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm); cursor: pointer; margin-bottom: var(--g-s4);
}
.u-back:hover { border-color: var(--g-action); color: var(--g-action); }

/* AI 응답 앞머리의 6종 라벨. 모델이 `**질문:**` 로 보내면 별표가 그대로 보인다.
   떼어 내서 칩으로 그린다 — 라벨이 무엇인지가 본문보다 먼저 읽혀야 한다. */
.u-label {
  font-weight: 700;
  color: var(--g-action);
  margin-right: 6px;
  white-space: nowrap;
}

/* 마이크 버튼. 받아쓴 글은 입력칸에 들어갈 뿐, 바로 제출되지 않는다. */
.mic { display: flex; align-items: center; gap: var(--g-s2); flex-wrap: wrap; }

.mic-btn {
  border: 1px solid var(--g-border-strong); background: var(--g-panel);
  color: var(--g-text); border-radius: var(--g-r-md);
  padding: 6px 12px; font-size: var(--g-fs-sm); cursor: pointer;
}
.mic-btn:hover:not(:disabled) { border-color: var(--g-action); color: var(--g-action); }
.mic-btn:disabled { color: var(--g-muted); cursor: default; }
.mic-btn.is-on { background: var(--g-action); border-color: var(--g-action); color: var(--g-panel); }

.mic-hint { font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 마이크가 죽은 장치로 잡혔을 때. 「크게 말하세요」 와 구분되어야 한다. */
.mic-hint-bad { color: var(--g-bad); }

/* 「왜 안 되나요?」 — 말로 적기가 막혔을 때만 나타난다 (천강 검수 2026-09-13). */
.mic-why {
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: var(--g-panel); color: var(--g-muted); cursor: pointer;
  font: inherit; font-size: 12.5px; padding: 3px 10px;
}
.mic-why:hover { border-color: var(--g-action); color: var(--g-action); }
.mic-diagbox { flex: 1 0 100%; }
.mic-diag {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-sunk); padding: var(--g-s3); margin-top: var(--g-s2);
}
.mic-diag-h { margin: 0 0 var(--g-s2); font-size: var(--g-fs-md); }
.mic-diag-rows { display: flex; flex-direction: column; gap: 6px; }
.mic-diag-row {
  display: grid; grid-template-columns: 1.4em 6.5em 1fr; gap: 4px var(--g-s2);
  align-items: baseline; font-size: var(--g-fs-sm);
}
.mic-diag-mark { font-weight: 700; text-align: center; }
.mic-diag-row.is-ok .mic-diag-mark { color: var(--g-ok); }
.mic-diag-row.is-bad .mic-diag-mark { color: var(--g-bad); }
.mic-diag-row.is-wait .mic-diag-mark { color: var(--g-warn); }
.mic-diag-name { color: var(--g-muted); }
.mic-diag-fix {
  grid-column: 3; color: var(--g-text); font-size: 12.5px; line-height: 1.55;
}
.mic-diag-done { margin: var(--g-s2) 0 0; font-size: var(--g-fs-sm); }
.mic-diag-it { margin-top: var(--g-s2); font-size: 12.5px; }
.mic-diag-it summary { cursor: pointer; color: var(--g-muted); }
.mic-diag-itlist { margin: var(--g-s2) 0 0; padding-left: 1.2em; line-height: 1.6; }

/* 2026-10-21 4차 요청 — 토론 룰북. shared/rulebook.js 가 쓴다. 화면
   여럿(aipanel·panel-practice)이 같이 쓰므로 screens/*.css 가 아니라
   여기(여러 화면 공용)에 둔다. */
.rulebook-open {
  border: 1px solid var(--g-border); border-radius: 8px; background: var(--g-surface, #fff);
  padding: 6px 10px; font-size: var(--g-fs-sm); cursor: pointer;
}
.rulebook-dialog {
  max-width: 560px; width: min(92vw, 560px); border: 1px solid var(--g-border);
  border-radius: 12px; padding: var(--g-s4); color: var(--g-text);
}
.rulebook-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.rulebook-head { display: flex; justify-content: space-between; align-items: center; gap: var(--g-s2); }
.rulebook-title { margin: 0; font-size: var(--g-fs-lg); }
.rulebook-close {
  border: 1px solid var(--g-border); border-radius: 8px; background: none;
  padding: 4px 10px; cursor: pointer;
}
.rulebook-intro { color: var(--g-muted); margin: var(--g-s2) 0 var(--g-s4); }
.rulebook-section { margin-bottom: var(--g-s4); }
.rulebook-heading { margin: 0 0 4px; font-size: var(--g-fs-md); }
.rulebook-body { margin: 0 0 var(--g-s2); line-height: 1.6; }
.rulebook-items { margin: 0; padding-left: 1.1em; line-height: 1.7; }
.rulebook-tag { color: var(--g-action); }

/* ───── screens/access.css ───── */
/* 관리자 접속 화면. .access-* 만 쓴다. */

.access-nums {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: var(--g-s3);
}
.access-num {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
  display: flex; flex-direction: column;
}
.access-num-n {
  font-size: var(--g-fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.access-num-k { font-size: var(--g-fs-sm); color: var(--g-muted); }

.access-byrole {
  margin: 0 0 var(--g-s4); color: var(--g-muted);
  font-size: var(--g-fs-sm);
}

/* 최근 로그인 그래프 */
.access-sparkbox {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s4);
  margin-bottom: var(--g-s4);
}
.access-spark { display: block; width: 100%; height: auto; }
.access-spark-area { fill: var(--g-action-bg); }
.access-spark-line {
  fill: none; stroke: var(--g-action);
  stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.access-spark-dot { fill: var(--g-action); }
.access-spark-empty {
  margin: 0; color: var(--g-faint); font-size: var(--g-fs-sm);
}

/* IP 가 실제로 남고 있는가 */
.access-health {
  display: flex; align-items: flex-start; gap: var(--g-s3);
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-sunk); padding: var(--g-s3) var(--g-s4);
  margin-bottom: var(--g-s3);
}
.access-health strong { display: block; font-weight: 650; }
.access-health-num {
  font-size: var(--g-fs-sm); color: var(--g-muted);
  font-variant-numeric: tabular-nums;
}
.access-health-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  margin-top: 7px; background: var(--g-border-strong);
}
.access-health.is-ok    .access-health-dot { background: var(--g-ok); }
.access-health.is-bad   .access-health-dot { background: var(--g-bad); }
.access-health.is-proxy .access-health-dot { background: var(--g-warn); }
.access-health.is-bad   { border-color: var(--g-bad); }
.access-health.is-proxy { border-color: var(--g-warn); }

/* 남기는 것 */
.access-collected {
  margin: 0 0 var(--g-s3); padding-left: 1.2em;
  color: var(--g-text); font-size: var(--g-fs-md);
}
.access-collected li { margin-bottom: var(--g-s1); }

/* ───── screens/admin.css ───── */
/* 관리자. .admin-* 만 쓴다. */


.admin-provs {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: var(--g-s4);
}

.admin-prov {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  padding: var(--g-s3) var(--g-s4); background: var(--g-panel);
  display: flex; flex-direction: column; gap: 3px;
}
.admin-prov-ok   { border-left: 3px solid var(--g-ok); }
.admin-prov-bad  { border-left: 3px solid var(--g-bad); }
.admin-prov-idle { border-left: 3px solid var(--g-border-strong); }
.admin-prov-off  { border-left: 3px solid var(--g-border); opacity: 0.6; }

.admin-prov-name { font-weight: 680; }
.admin-prov-state { font-size: var(--g-fs-sm); color: var(--g-muted); }
.admin-prov-when { font-size: 11.5px; color: var(--g-faint); }

.admin-counts {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  margin-bottom: var(--g-s4);
}
.admin-count {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
  display: flex; flex-direction: column;
}
.admin-count-n {
  font-size: var(--g-fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.admin-count-k { font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 학교·교사 — 선생님 계정과 학급을 여기서 만든다 (2026-09-10).
   지우기 버튼은 없다. 잠그기만 있고, 그 이유를 화면이 말한다. */
.admin-box {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
  margin-bottom: var(--g-s4);
}
.admin-hint { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }
.admin-say { margin: 6px 0 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

.admin-row {
  display: flex; align-items: center; gap: var(--g-s3); flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--g-border);
}
.admin-row:last-child { border-bottom: 0; }
.admin-row-main { font-size: var(--g-fs-sm); font-weight: 650; color: var(--g-text); }
.admin-row-meta { font-size: var(--g-fs-sm); color: var(--g-muted); }

.admin-in, .admin-level {
  padding: 7px 9px; font: inherit; font-size: var(--g-fs-sm); color: var(--g-text);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-paper); min-width: 0;
}
.admin-in.is-num { width: 62px; }
.admin-level { margin-left: auto; }
.admin-in:focus, .admin-level:focus { outline: 2px solid var(--g-action); outline-offset: 1px; }

.admin-btn {
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: var(--g-panel); color: var(--g-text); cursor: pointer;
  padding: 7px 13px; font-size: var(--g-fs-sm); font-weight: 650;
}
.admin-btn:hover { background: var(--g-sunk); }
.admin-btn.is-main {
  border-color: var(--g-action); background: var(--g-action); color: #FFFFFF;
}
.admin-btn.is-warn { border-color: var(--g-warn); color: var(--g-warn); }
.admin-btn:disabled { opacity: 0.6; cursor: default; }

.admin-new { margin: var(--g-s2) 0 var(--g-s4); }
.admin-new > summary {
  cursor: pointer; font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-action);
}
.admin-formrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: var(--g-s2) 0;
}
.admin-formrow .admin-in { flex: 1 1 140px; }

.admin-tlist, .admin-clist {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: 0 var(--g-s4);
}
.admin-tone { border-bottom: 1px solid var(--g-border); }
.admin-tone:last-child { border-bottom: 0; }
.admin-tname {
  display: flex; align-items: center; gap: var(--g-s3); flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; padding: 10px 0;
}
.admin-tname:hover .admin-row-main { text-decoration: underline; }
.admin-tstate {
  margin-left: auto; font-size: var(--g-fs-sm); font-weight: 650;
  border: 1px solid var(--g-border-strong); border-radius: 999px; padding: 1px 10px;
  color: var(--g-muted);
}
.admin-tstate.is-active { border-color: var(--g-ok); color: var(--g-ok); }
.admin-tedit { padding: 0 0 var(--g-s3); }

/* 첫 비밀번호 — 여기서 한 번만 보인다. 그래서 눈에 띄게 둔다. */
.admin-secrets { display: flex; flex-direction: column; gap: var(--g-s2); }
.admin-secret {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-s3);
  border: 1px solid var(--g-live); border-left-width: 3px;
  border-radius: var(--g-r-sm); background: var(--g-live-bg);
  padding: var(--g-s2) var(--g-s3); margin-bottom: var(--g-s3);
}
.admin-secret-who { font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-text); }
.admin-secret-pw {
  font-size: var(--g-fs-lg); font-weight: 700; color: var(--g-live);
  letter-spacing: 0.04em;
}
.admin-secret-note { font-size: var(--g-fs-sm); color: var(--g-muted); }

/* ───── screens/ai-practice.css ───── */
/* AI토론 연습 — 서브탭 전환 스위치. .ai-practice-* 만 쓴다 (CSS 소유권 규칙). */

.ai-practice-subtabs {
  display: flex; gap: var(--g-s2);
  margin-bottom: var(--g-s4);
  border-bottom: 1px solid var(--g-border);
}

.ai-practice-subtab {
  padding: 8px 4px; margin-bottom: -1px;
  border: none; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer;
  font-size: var(--g-fs-sm); font-weight: 650; color: var(--g-muted);
}
.ai-practice-subtab.is-active { color: var(--g-text); border-bottom-color: var(--g-action); }

.ai-practice-subbody { margin-top: var(--g-s2); }

/* ───── screens/aicompare.css ───── */
/* AI 비교. .aicompare-* 만 쓴다 (CSS 소유권 규칙). */

.aicompare-back {
  border: 0; background: none; color: var(--g-muted); cursor: pointer;
  font-size: var(--g-fs-sm); padding: 0; margin-bottom: var(--g-s3);
}
.aicompare-back:hover { color: var(--g-action); }

.aicompare-form { display: flex; flex-direction: column; gap: var(--g-s3); }
.aicompare-input {
  padding: 9px 12px; border: 1px solid var(--g-border-strong);
  border-radius: var(--g-r-sm); background: var(--g-panel); font-size: var(--g-fs-sm);
  font-family: inherit; resize: vertical;
}
.aicompare-start {
  align-self: flex-start; border: 0; cursor: pointer; padding: 9px 20px;
  border-radius: var(--g-r-md); background: var(--g-action); color: var(--g-panel);
  font-size: var(--g-fs-sm); font-weight: 650;
}
.aicompare-start:disabled { background: var(--g-sunk); color: var(--g-faint); }
.aicompare-formresult { font-size: var(--g-fs-sm); color: var(--g-muted); min-height: 1.4em; }

.aicompare-list { display: flex; flex-direction: column; gap: var(--g-s2); margin-bottom: var(--g-s5); }
.aicompare-row {
  text-align: left; border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4); cursor: pointer; font: inherit;
}
.aicompare-row:hover { border-color: var(--g-action-line); }
.aicompare-row-topic { font-weight: 600; }

.aicompare-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--g-s3);
}
.aicompare-result {
  border: 1px solid var(--g-border); border-top-width: 4px; border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.aicompare-result.is-claude { border-top-color: #5B3FA8; }
.aicompare-result.is-codex  { border-top-color: #B4531F; }
.aicompare-result.is-gemini { border-top-color: #157A56; }
.aicompare-result.is-grok   { border-top-color: #8A6A00; }
.aicompare-result.is-fail   { border-top-color: var(--g-bad); background: var(--g-sunk); }

.aicompare-result-head {
  display: flex; align-items: baseline; gap: var(--g-s2); margin-bottom: 6px;
}
.aicompare-result-who { font-weight: 700; font-size: var(--g-fs-sm); }
.aicompare-result-ms { margin-left: auto; font-size: 11.5px; color: var(--g-faint); }
.aicompare-result-body { margin: 0; font-size: var(--g-fs-sm); line-height: 1.6; white-space: pre-wrap; }
.aicompare-result.is-fail .aicompare-result-body { color: var(--g-bad); }

/* ───── screens/aipanel.css ───── */
/* AI 토론실. .aipanel-* 만 쓴다 (CSS 소유권 규칙). */

.aipanel-back {
  border: 0; background: none; color: var(--g-muted); cursor: pointer;
  font-size: var(--g-fs-sm); padding: 0; margin-bottom: var(--g-s3);
}
.aipanel-back:hover { color: var(--g-action); }

/* 2026-10-21 4차 요청 — 룰북 버튼을 제목 옆에 둔다. */
.aipanel-headbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--g-s2); flex-wrap: wrap;
}

.aipanel-form {
  display: flex; flex-direction: column; gap: var(--g-s3);
}
.aipanel-input {
  padding: 9px 12px; border: 1px solid var(--g-border-strong);
  border-radius: var(--g-r-sm); background: var(--g-panel); font-size: var(--g-fs-sm);
  font-family: inherit; resize: vertical;
}
.aipanel-start {
  align-self: flex-start; border: 0; cursor: pointer; padding: 9px 20px;
  border-radius: var(--g-r-md); background: var(--g-action); color: var(--g-panel);
  font-size: var(--g-fs-sm); font-weight: 650;
}
.aipanel-start:disabled { background: var(--g-sunk); color: var(--g-faint); }
.aipanel-formresult { font-size: var(--g-fs-sm); color: var(--g-muted); min-height: 1.4em; }

.aipanel-list { display: flex; flex-direction: column; gap: var(--g-s2); margin-bottom: var(--g-s5); }
.aipanel-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--g-s3);
  text-align: left; border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4); cursor: pointer; font: inherit;
}
.aipanel-row:hover { border-color: var(--g-action-line); }
.aipanel-row-topic { font-weight: 600; }
.aipanel-row-status { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.aipanel-row-status.is-live { background: var(--g-action-bg); color: var(--g-action); }
.aipanel-row-status.is-done { background: var(--g-sunk); color: var(--g-muted); }

/* 참가자 칩 — 세로 칸(lane) 머리말에 쓴다. 발언 카드의 색과 같은 계열이다. */
.aipanel-pchip {
  font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  border: 1px solid transparent;
}
.aipanel-pchip.is-claude { background: #EFEAFB; color: #5B3FA8; }
.aipanel-pchip.is-codex  { background: #FBEDE4; color: #B4531F; }
.aipanel-pchip.is-gemini { background: #E4F1EC; color: #157A56; }
.aipanel-pchip.is-grok   { background: #FDF3DC; color: #8A6A00; }

.aipanel-status { font-size: var(--g-fs-sm); color: var(--g-muted); margin: var(--g-s2) 0; }

.aipanel-controls {
  display: flex; align-items: center; gap: var(--g-s4); flex-wrap: wrap;
  margin-bottom: var(--g-s4);
}
.aipanel-step {
  border: 0; cursor: pointer; padding: 10px 20px; border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel); font-size: var(--g-fs-sm); font-weight: 650;
}
.aipanel-step:disabled { background: var(--g-sunk); color: var(--g-faint); }
.aipanel-autolabel {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--g-fs-sm); color: var(--g-muted);
}

.aipanel-turns { display: flex; flex-direction: column; gap: var(--g-s3); }
.aipanel-turn {
  border: 1px solid var(--g-border); border-left-width: 4px; border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.aipanel-turn.is-claude { border-left-color: #5B3FA8; }
.aipanel-turn.is-codex  { border-left-color: #B4531F; }
.aipanel-turn.is-gemini { border-left-color: #157A56; }
.aipanel-turn.is-grok   { border-left-color: #8A6A00; }
/* 사람이 넣은 것도 AI 가 만든 것도 아니다 — 코드가 「건너뛰었다」 고 적은 자리다.
   참가자 색과 헷갈리지 않게 무채색으로 둔다. */
.aipanel-turn.is-system {
  border-left-color: var(--g-border-strong); background: var(--g-sunk);
}
.aipanel-turn.is-system .aipanel-turn-body { color: var(--g-muted); font-style: italic; }

.aipanel-turn-head {
  display: flex; align-items: center; gap: var(--g-s2); margin-bottom: 6px; flex-wrap: wrap;
}
.aipanel-turn-who { font-weight: 700; font-size: var(--g-fs-sm); }
.aipanel-turn-n { margin-left: auto; font-size: 11.5px; color: var(--g-faint); }
.aipanel-turn-body { margin: 0; font-size: var(--g-fs-sm); line-height: 1.6; }

/* 발언 유형 태그 — 보고서 SVG 배지와 같은 색 언어 */
.aipanel-tag {
  font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
.aipanel-tag.is-open  { background: var(--g-action-bg); color: var(--g-action); }
.aipanel-tag.is-agree { background: #E4F1EC; color: #157A56; }
.aipanel-tag.is-rebut { background: #FBEAE7; color: var(--g-bad); }
.aipanel-tag.is-ask   { background: var(--g-action-bg); color: var(--g-action); }
.aipanel-tag.is-build { background: #FDF3DC; color: var(--g-warn); }
.aipanel-tag.is-skip  { background: var(--g-border); color: var(--g-muted); }

.aipanel-closing {
  margin-top: var(--g-s5); border: 1px dashed var(--g-border-strong); border-radius: var(--g-r-lg);
  padding: var(--g-s4) var(--g-s5);
}
.aipanel-closing-title { margin: 0 0 4px; font-size: var(--g-fs-lg); }
.aipanel-closing-counts { color: var(--g-muted); font-size: var(--g-fs-sm); margin: 0 0 var(--g-s4); }
.aipanel-closing-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--g-s5);
}
.aipanel-closing-cols h4 { margin: 0 0 var(--g-s2); font-size: var(--g-fs-sm); }
.aipanel-closing-cols ul { margin: 0; padding-left: 18px; font-size: var(--g-fs-sm); }
.aipanel-closing-cols li { margin-bottom: 6px; }
.aipanel-closing-empty { color: var(--g-faint); font-size: var(--g-fs-sm); margin: 0; }

/* 2026-10-21 4차 요청 — 「triad 처럼 세로 4칸」. 가로로 한 줄씩 쌓던 발언을
   참가자마다 세로 칸으로 나눈다. 칸 안에서만 위아래로 가늘게 스크롤되고,
   머리말은 그 칸 위에 붙박인다(스크롤해도 누구 칸인지 안 잃는다). */
.aipanel-lanes {
  display: grid; grid-template-columns: repeat(var(--lane-count, 2), minmax(0, 1fr));
  gap: var(--g-s3); align-items: start;
}
.aipanel-lane {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--g-border); border-radius: var(--g-r-md); background: var(--g-sunk);
  max-height: 72vh; overflow: hidden;
}
.aipanel-lane-head {
  position: sticky; top: 0; z-index: 1; padding: var(--g-s3) var(--g-s3) var(--g-s2);
  background: var(--g-sunk);
}
.aipanel-lane-body {
  display: flex; flex-direction: column; gap: var(--g-s2);
  padding: 0 var(--g-s3) var(--g-s3); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--g-border-strong) transparent;
}
.aipanel-lane-body::-webkit-scrollbar { width: 6px; }
.aipanel-lane-body::-webkit-scrollbar-thumb { background: var(--g-border-strong); border-radius: 999px; }
.aipanel-lane .aipanel-turn { background: var(--g-panel); }

.aipanel-turn-replyto {
  margin: 0 0 4px; font-size: 11.5px; color: var(--g-muted);
}

.aipanel-laneswrap { display: flex; flex-direction: column; }
.aipanel-strays { display: flex; flex-direction: column; gap: var(--g-s2); margin-top: var(--g-s3); }

/* 칸을 1열로 찌그러뜨리면 「세로 4칸」 요청 자체가 사라진다 — 좁은 화면은
   칸 폭을 줄이고 가로로 넘기게 둔다(화면 안에서 세로 스크롤은 칸별로만). */
@media (max-width: 720px) {
  .aipanel-lanes {
    overflow-x: auto; padding-bottom: 4px;
    grid-template-columns: repeat(var(--lane-count, 2), minmax(240px, 1fr));
  }
  .aipanel-lane { min-width: 240px; max-height: 60vh; }
}

/* ───── screens/aiset.css ───── */
/* AI 설정. .aiset-* 만 쓴다 (CSS 소유권 규칙). */

/* 2026-10-21 4차 요청 — 학급관리·비밀번호를 환경설정 서브탭으로 합쳤다. */
.aiset-subtabs {
  display: flex; gap: var(--g-s2);
  margin-bottom: var(--g-s4);
  border-bottom: 1px solid var(--g-border);
}

.aiset-subtab {
  padding: 8px 4px; margin-bottom: -1px;
  border: none; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer;
  font-size: var(--g-fs-sm); font-weight: 650; color: var(--g-muted);
}
.aiset-subtab.is-active { color: var(--g-text); border-bottom-color: var(--g-action); }

.aiset-subbody { margin-top: var(--g-s2); }

.aiset-head {
  display: flex; align-items: center; gap: var(--g-s3);
  margin-bottom: var(--g-s4);
}

.aiset-toggle {
  display: inline-flex; align-items: center; gap: var(--g-s2);
  font-size: var(--g-fs-lg); font-weight: 680; cursor: pointer;
}

.aiset-chip {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 9px; border-radius: 999px;
}
.aiset-chip-ok   { background: #E7F0EA; color: var(--g-ok); }
.aiset-chip-bad  { background: #FBEAEA; color: var(--g-bad); }
.aiset-chip-idle { background: var(--g-sunk); color: var(--g-muted); }

.aiset-path {
  margin-left: auto; font-size: 12px; color: var(--g-faint);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.aiset-grid {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.aiset-field { display: flex; flex-direction: column; gap: 5px; }
.aiset-field > span { font-size: var(--g-fs-sm); color: var(--g-muted); font-weight: 600; }
.aiset-wide { grid-column: 1 / -1; }

.aiset-input {
  padding: 8px 11px;
  border: 1px solid var(--g-border-strong);
  border-radius: var(--g-r-sm);
  background: var(--g-panel);
  font-size: var(--g-fs-sm);
}
.aiset-num { max-width: 120px; }

.aiset-row {
  display: flex; align-items: center; gap: var(--g-s3);
  margin-top: var(--g-s4); flex-wrap: wrap;
}

.aiset-save, .aiset-test {
  border: 0; cursor: pointer; padding: 9px 18px;
  border-radius: var(--g-r-md);
  font-size: var(--g-fs-sm); font-weight: 650;
}
.aiset-save { background: var(--g-action); color: var(--g-panel); }
.aiset-save:hover { background: #16307a; }
.aiset-test {
  background: transparent; color: var(--g-muted);
  border: 1px solid var(--g-border-strong);
}
.aiset-test:hover { border-color: var(--g-action); color: var(--g-action); }
.aiset-save:disabled, .aiset-test:disabled { background: var(--g-sunk); color: var(--g-faint); }

.aiset-result { font-size: var(--g-fs-sm); color: var(--g-muted); }
.aiset-ok  { color: var(--g-ok); }
.aiset-bad { color: var(--g-bad); }

.aiset-foot { font-size: var(--g-fs-sm); color: var(--g-muted); margin: 0; }

/* 코드에서 꺼 둔 공급자 — 손댈 수 없다는 것이 한눈에 보여야 한다. */
.aiset-head.is-off { opacity: 0.55; }
.aiset-blocked {
  border: 1px solid var(--g-border-strong); border-radius: 999px;
  padding: 1px 9px; font-size: var(--g-fs-sm); color: var(--g-muted);
}
.aiset-blockwhy {
  margin: var(--g-s2) 0 0; font-size: var(--g-fs-sm); color: var(--g-muted);
}

/* 지금 어느 역할에 어느 모델이 붙어 있나 */
.aiset-roles { margin-bottom: var(--g-s4); }
.aiset-rolegrid {
  display: grid; gap: var(--g-s2);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.aiset-role {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s2) var(--g-s3);
  display: flex; flex-direction: column;
}
.aiset-role-k { font-weight: 650; }
.aiset-role-m { font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 모델 고르기 — 이름을 직접 적거나, 공급자에게 물어서 목록에서 고른다. */
.aiset-modelbox { display: flex; gap: var(--g-s2); align-items: center; flex-wrap: wrap; }
.aiset-modelbox > .aiset-input { flex: 1 1 220px; min-width: 0; }

.aiset-mini {
  border: 1px solid var(--g-border-strong); background: transparent;
  color: var(--g-muted); cursor: pointer;
  padding: 7px 12px; border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm); font-weight: 600; white-space: nowrap;
}
.aiset-mini:hover { border-color: var(--g-action); color: var(--g-action); }
.aiset-mini:disabled { background: var(--g-sunk); color: var(--g-faint); cursor: default; }

.aiset-hint { font-size: var(--g-fs-sm); color: var(--g-muted); }

.aiset-warn {
  margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted);
  border-left: 3px solid var(--g-border-strong); padding-left: var(--g-s2);
}

/* 실제 호출 순서. 「무슨 모델」 만으로는 무엇이 먼저 불리는지 알 수 없다. */
.aiset-role-c {
  margin-top: 3px; font-size: 11.5px; color: var(--g-faint);
  overflow-wrap: anywhere;
}

/* ───── screens/classroom.css ───── */
/* 교사 우리 반·기록. .classroom-* 만 쓴다.
   파일 이름이 classroom.css 이므로 접두어도 classroom- 이어야 하는데,
   짧게 쓰려고 room- 을 쓰면 소유권 검사가 잡는다. 규칙을 지킨다. */

.classroom-rec-head {
  display: flex; align-items: baseline; gap: var(--g-s3);
  margin-bottom: var(--g-s2);
}
.classroom-rec-who { font-weight: 680; }
.classroom-rec-when { margin-left: auto; font-size: 12px; color: var(--g-faint); }

.classroom-rec-topic {
  font-size: var(--g-fs-sm); color: var(--g-action);
  margin-bottom: var(--g-s2);
}

.classroom-rec-body { margin: 0 0 var(--g-s2); font-size: var(--g-fs-sm); }

.classroom-rec-obs {
  margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted);
  border-left: 2px solid var(--g-border-strong); padding-left: var(--g-s3);
}

/* ── 학생 명단 올리기 ─────────────────────────────────────────────────── */
.classroom-import {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
  margin-bottom: var(--g-s4);
}
.classroom-import summary {
  font-weight: 650; cursor: pointer; font-size: var(--g-fs-sm);
}
.classroom-hint { margin: var(--g-s3) 0 var(--g-s2); font-size: 12.5px; color: var(--g-muted); }

.classroom-paste {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-md);
  background: var(--g-panel); color: var(--g-text);
  padding: 9px 12px; font-size: var(--g-fs-sm); font-family: inherit;
}

.classroom-btns { display: flex; align-items: center; gap: var(--g-s3); margin-top: var(--g-s2); }
.classroom-btn {
  border: 1px solid var(--g-border-strong); background: transparent;
  color: var(--g-text); border-radius: var(--g-r-md);
  padding: 7px 16px; font-size: var(--g-fs-sm); cursor: pointer;
}
.classroom-btn.is-main {
  background: var(--g-action); border-color: var(--g-action); color: var(--g-panel);
  font-weight: 650;
}
.classroom-btn:disabled { background: var(--g-muted); border-color: var(--g-muted); cursor: default; }
.classroom-status { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

.classroom-out { margin-top: var(--g-s3); }
.classroom-preview {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--g-border); border: 1px solid var(--g-border);
  border-radius: var(--g-r-md); overflow: hidden;
  max-height: 300px; overflow-y: auto; margin-bottom: var(--g-s3);
}
.classroom-prow {
  display: flex; gap: var(--g-s3); align-items: baseline;
  background: var(--g-panel); padding: 5px var(--g-s4); font-size: var(--g-fs-sm);
}
.classroom-prow.is-warn { background: #FBF6E7; }
.classroom-prow-no { min-width: 2em; color: var(--g-muted); font-variant-numeric: tabular-nums; }
.classroom-prow-name { min-width: 6em; font-weight: 620; }
.classroom-prow-id { color: var(--g-muted); font-family: ui-monospace, monospace; font-size: 12.5px; }
.classroom-prow-warn { margin-left: auto; color: var(--g-warn); font-size: 12px; }

/* 첫 비밀번호 — 한 번만 보이는 종이. */
.classroom-pw {
  border: 2px solid var(--g-warn); border-radius: var(--g-r-md);
  background: #FBF6E7; padding: var(--g-s3) var(--g-s4);
}
.classroom-pw-head { display: flex; align-items: center; gap: var(--g-s3); }
.classroom-pw-head strong { color: var(--g-warn); font-size: var(--g-fs-sm); }
.classroom-pw-head .classroom-btn { margin-left: auto; }
.classroom-pw-note { margin: 4px 0 var(--g-s3); font-size: 12.5px; color: var(--g-muted); }
.classroom-pw-rows { display: flex; flex-direction: column; gap: 4px; }
.classroom-pw-row {
  display: flex; gap: var(--g-s4); align-items: baseline; font-size: var(--g-fs-sm);
}
.classroom-pw-row span { min-width: 6em; }
.classroom-pw-row code { font-family: ui-monospace, monospace; }
.classroom-pw-code { font-size: var(--g-fs-md); font-weight: 700; letter-spacing: 0.04em; }

/* 비밀번호만 인쇄. 조상을 숨기지 않는다 — 숨기면 자식도 죽는다
   (2026-08-25 활동지 백지 사고와 같은 함정). */
@media print {
  body.is-printing-pw * { visibility: hidden; }
  body.is-printing-pw .classroom-pw,
  body.is-printing-pw .classroom-pw * { visibility: visible; }
  body.is-printing-pw .classroom-pw {
    position: absolute; inset: 0 auto auto 0; width: 100%;
    border: 0; background: #fff; padding: 0;
  }
  body.is-printing-pw .classroom-pw .classroom-btn { display: none; }
}

/* 담임 반이 아닌 반 */
.classroom-others { margin-top: var(--g-s4); }
.classroom-others > summary {
  cursor: pointer; color: var(--g-muted); font-size: var(--g-fs-sm);
  padding: var(--g-s2) 0;
}

/* 기록 — 학생 한 명이 묶음 하나 */
.classroom-recscope { margin: 0 0 var(--g-s3); color: var(--g-muted); font-size: var(--g-fs-sm); }
.classroom-recgroup {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); margin-bottom: var(--g-s3); padding: var(--g-s3);
}
.classroom-recgroup-head {
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: var(--g-s3);
}
.classroom-recgroup-who { font-weight: 650; }
.classroom-recgroup-n {
  color: var(--g-muted); font-size: var(--g-fs-sm);
  font-variant-numeric: tabular-nums;
}
.classroom-recgroup-more {
  margin: var(--g-s2) 0 0; color: var(--g-faint); font-size: var(--g-fs-sm);
}

/* 토론별 결과 — 시안 p.5b 로 들어가는 문 (천강 요청). */
.classroom-debates { display: flex; flex-direction: column; gap: var(--g-s2); }
.classroom-debate {
  display: grid; gap: 3px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.classroom-debate:hover { border-color: var(--g-action); }
.classroom-debate-title { font-size: var(--g-fs-md); font-weight: 600; }
.classroom-debate-where { font-size: var(--g-fs-sm); color: var(--g-muted); }
.classroom-empty { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 학급 등록 — 이 화면에서 바로 (천강 요청 PDF p.1 · PPT 9). */
.classroom-new { margin: 12px 0 16px; }
.classroom-new > summary {
  cursor: pointer; font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-action);
}
.classroom-new-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px;
}
.classroom-new-grade { width: 62px; }
.classroom-new-name { flex: 1 1 140px; min-width: 0; }
.classroom-new-grade, .classroom-new-name, .classroom-new-kind {
  padding: 7px 9px; font: inherit; font-size: var(--g-fs-sm); color: var(--g-text);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm); background: var(--g-panel);
}
.classroom-new-save {
  border: 0; border-radius: var(--g-r-sm); cursor: pointer;
  background: var(--g-action); color: #FFFFFF;
  padding: 7px 14px; font-size: var(--g-fs-sm); font-weight: 700;
}
.classroom-new-save:hover { filter: brightness(1.1); }
.classroom-new-say { margin: 6px 0 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 학생 한 줄 + 비밀번호 발급 (천강 검수 2026-09-13).
   「비번 생성 방법이 확인 불가」 — API 는 있었는데 누를 곳이 없었다. */
.classroom-people {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel);
}
.classroom-personrow {
  display: flex; align-items: center; gap: var(--g-s2);
  padding: 0 var(--g-s4); border-bottom: 1px solid var(--g-border);
}
.classroom-personrow:last-child { border-bottom: 0; }
.classroom-person {
  display: flex; align-items: center; gap: var(--g-s3); flex-wrap: wrap;
  flex: 1 1 auto; text-align: left; cursor: pointer;
  border: 0; background: transparent; padding: 11px 0; font: inherit;
  font-size: var(--g-fs-sm); color: var(--g-text);
}
.classroom-person:hover .u-row-main { text-decoration: underline; }
.classroom-pwbtn {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: var(--g-fs-sm);
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: var(--g-panel); color: var(--g-muted); padding: 4px 11px;
}
.classroom-pwbtn:hover { background: var(--g-sunk); color: var(--g-text); }
.classroom-pwbtn:disabled { opacity: 0.6; cursor: default; }

/* 발급된 비밀번호 — 여기서 한 번만 보인다. */
.classroom-secrets { display: flex; flex-direction: column; gap: var(--g-s2); }
.classroom-secret {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-s3);
  border: 1px solid var(--g-live); border-left-width: 3px;
  border-radius: var(--g-r-sm); background: var(--g-live-bg);
  padding: var(--g-s2) var(--g-s3); margin-bottom: var(--g-s2);
}
.classroom-secret-who { font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-text); }
.classroom-secret-pw {
  font-size: var(--g-fs-lg); font-weight: 700; color: var(--g-live);
  letter-spacing: 0.04em;
}
.classroom-secret-note { font-size: var(--g-fs-sm); color: var(--g-muted); }

/* ───── screens/closing.css ───── */
/* 종례 30초 출구. .closing-* 만 쓴다 (CSS 소유권 규칙). */

.closing-last {
  display: flex; align-items: baseline; gap: var(--g-s3);
  background: var(--g-action-bg); border: 1px solid var(--g-action-line);
  border-radius: var(--g-r-md); padding: var(--g-s3) var(--g-s4);
  margin-bottom: var(--g-s4);
}
.closing-last-head { font-size: 12.5px; font-weight: 650; color: var(--g-action); }
.closing-last-names { font-size: var(--g-fs-sm); }

.closing-cols {
  display: grid; gap: var(--g-s4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.closing-col {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4) var(--g-s5) var(--g-s5);
}

.closing-chips { display: flex; flex-wrap: wrap; gap: var(--g-s2); }

/* 손가락으로 누른다. 45분 뒤 교사의 손은 정확하지 않다 —
   작은 체크박스 대신 넉넉한 칩으로 둔다. */
.closing-chip {
  border: 1px solid var(--g-border-strong); background: var(--g-panel);
  color: var(--g-text); border-radius: 999px;
  padding: 7px 15px; font-size: var(--g-fs-sm); cursor: pointer;
}
.closing-chip:hover { border-color: var(--g-action); }
.closing-chip.is-on {
  background: var(--g-action); border-color: var(--g-action);
  color: var(--g-panel); font-weight: 620;
}

.closing-hint { margin: var(--g-s3) 0 0; font-size: 12px; color: var(--g-muted); }

.closing-foot {
  display: flex; align-items: center; gap: var(--g-s3);
  margin-top: var(--g-s5);
}

.closing-save {
  border: 0; border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel);
  padding: 11px 26px; font-size: var(--g-fs-md); font-weight: 650; cursor: pointer;
}
.closing-save:disabled { background: var(--g-muted); cursor: default; }

.closing-status { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 「언제 닫는지」 — 2026-09-13 천강 검수 「종례에서 언제 끊었는지 설명 가능」. */
.closing-when {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3); margin-top: var(--g-s3);
  display: flex; flex-direction: column; gap: var(--g-s2);
}
.closing-when-line {
  margin: 0; font-size: var(--g-fs-md); font-variant-numeric: tabular-nums;
}
.closing-when-h { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }
.closing-explain {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-s2);
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-md);
  background: var(--g-sunk); padding: var(--g-s3); margin-top: var(--g-s3);
}
.closing-explain-head {
  flex: 1 0 100%; font-size: 12.5px; color: var(--g-muted);
}
.closing-explain-line {
  flex: 1 1 20em; font-family: inherit; font-size: var(--g-fs-sm);
  line-height: 1.6;
}
.closing-copy {
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: var(--g-panel); color: var(--g-text); cursor: pointer;
  font: inherit; font-size: 12.5px; padding: 4px 11px;
}

/* ───── screens/credits.css ───── */
/* 선생님 크레딧 화면. .credits-* 만 쓴다. */

.credits-nums {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: var(--g-s3);
}
.credits-num {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
  display: flex; flex-direction: column;
}
.credits-num-n {
  font-size: var(--g-fs-lg); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.credits-num-k { font-size: var(--g-fs-sm); color: var(--g-muted); }

.credits-bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--g-sunk); border: 1px solid var(--g-border);
  margin-bottom: var(--g-s4);
}
.credits-bar-fill { height: 100%; background: var(--g-action); }

.credits-form {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: var(--g-s3);
}
.credits-field { display: flex; flex-direction: column; gap: var(--g-s1); }
.credits-field-label { font-weight: 650; }
.credits-field-hint { font-size: var(--g-fs-sm); color: var(--g-muted); }
.credits-input {
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  padding: var(--g-s2) var(--g-s3); font-size: var(--g-fs-md);
  font-variant-numeric: tabular-nums; background: var(--g-panel);
  color: var(--g-text);
}

.credits-save {
  border: 1px solid var(--g-action); border-radius: var(--g-r-sm);
  background: var(--g-action); color: #FFFFFF;
  padding: var(--g-s2) var(--g-s5); font-size: var(--g-fs-md);
  font-weight: 650; cursor: pointer;
}
.credits-save:disabled { opacity: 0.55; cursor: default; }
.credits-status { margin: 0; color: var(--g-muted); font-size: var(--g-fs-sm); }

.credits-warn {
  border-left: 4px solid var(--g-warn); background: var(--g-sunk);
  border-radius: 0 var(--g-r-sm) var(--g-r-sm) 0;
  padding: var(--g-s3) var(--g-s4); margin: 0 0 var(--g-s4);
  color: var(--g-text);
}

/* ───── screens/district.css ───── */
/* 교육청 「학교 만들기」 (사용자 지시 2026-09-13).
   학교를 만들면 첫 관리자까지 같이 생긴다 — 비밀번호는 한 번만 보인다. */
.district-new { margin: var(--g-s3) 0 var(--g-s4); }
.district-new > summary {
  cursor: pointer; font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-action);
}
.district-formrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: var(--g-s2) 0;
}
.district-in {
  flex: 1 1 150px; min-width: 0; padding: 7px 9px; font: inherit;
  font-size: var(--g-fs-sm); color: var(--g-text);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-paper);
}
.district-in:focus { outline: 2px solid var(--g-action); outline-offset: 1px; }
.district-btn {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: var(--g-fs-sm);
  font-weight: 650; padding: 7px 14px;
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: var(--g-panel); color: var(--g-text);
}
.district-btn:hover { background: var(--g-sunk); }
.district-btn.is-main {
  border-color: var(--g-action); background: var(--g-action); color: #FFFFFF;
}
.district-btn.is-warn { border-color: var(--g-warn); color: var(--g-warn); }
.district-btn:disabled { opacity: 0.6; cursor: default; }
.district-hint { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }
.district-say { margin: 6px 0 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

.district-list {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: 0 var(--g-s4);
}
.district-one { border-bottom: 1px solid var(--g-border); }
.district-one:last-child { border-bottom: 0; }
.district-name {
  display: flex; align-items: center; gap: var(--g-s3); flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; padding: 11px 0; font: inherit;
}
.district-name:hover .district-row-main { text-decoration: underline; }
.district-row-main { font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-text); }
.district-row-meta { font-size: var(--g-fs-sm); color: var(--g-muted); }
.district-state {
  margin-left: auto; white-space: nowrap;
  font-size: var(--g-fs-sm); font-weight: 650; color: var(--g-muted);
  border: 1px solid var(--g-border-strong); border-radius: 999px; padding: 1px 10px;
}
.district-state.is-active { border-color: var(--g-ok); color: var(--g-ok); }
.district-edit { padding: 0 0 var(--g-s3); }

/* 첫 관리자 계정 — 여기서 한 번만 보인다. */
.district-secrets { display: flex; flex-direction: column; gap: var(--g-s2); }
.district-secret {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--g-live); border-left-width: 3px;
  border-radius: var(--g-r-sm); background: var(--g-live-bg);
  padding: var(--g-s3) var(--g-s4); margin-bottom: var(--g-s3);
}
.district-secret-school { font-size: var(--g-fs-md); font-weight: 700; color: var(--g-text); }
.district-secret-who { font-size: var(--g-fs-sm); color: var(--g-text); }
.district-secret-pw {
  font-size: var(--g-fs-xl); font-weight: 700; color: var(--g-live);
  letter-spacing: 0.04em;
}
.district-secret-note { font-size: var(--g-fs-sm); color: var(--g-muted); }

/* ───── screens/home.css ───── */
/* 학생 홈. .home-* 만 쓴다. */

/* 지금 할 일 하나. 화면에서 가장 무겁게 둔다 — 이게 이 화면의 전부다. */
.home-next {
  border: 1px solid var(--g-action-line);
  background: var(--g-action-bg);
  border-radius: var(--g-r-lg);
  padding: var(--g-s5);
  margin-bottom: var(--g-s5);
}
.home-next-title {
  font-size: var(--g-fs-lg); font-weight: 680;
  color: var(--g-action); letter-spacing: -0.01em;
}
.home-next-detail {
  margin-top: 4px; color: var(--g-muted); font-size: var(--g-fs-sm);
}
.home-cta {
  margin-top: var(--g-s4);
  border: 0; cursor: pointer;
  padding: 11px 24px; border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel);
  font-size: var(--g-fs-md); font-weight: 650;
}
.home-cta:hover { background: #16307a; }


.home-counts {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.home-count {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
  display: flex; flex-direction: column;
}
.home-count-n {
  font-size: var(--g-fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.home-count-k { font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 진행 중 토론 — 목록 한 줄이 아니라 카드. 「지금 저기서 일이 벌어진다」 */
.home-lives {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: var(--g-s4);
}
.home-live {
  text-align: left; cursor: pointer;
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4);
  display: flex; flex-direction: column; gap: var(--g-s2);
  color: var(--g-text); font: inherit;
}
.home-live:hover { border-color: var(--g-action); }
.home-live.is-waiting { border-left: 4px solid var(--g-warn); }
.home-live-top { display: flex; justify-content: space-between; gap: var(--g-s2); }
.home-live-side {
  font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-action);
  background: var(--g-action-bg); border-radius: 999px; padding: 1px 10px;
}
.home-live-said { font-size: var(--g-fs-sm); color: var(--g-muted); }
.home-live-title { font-size: var(--g-fs-lg); font-weight: 650; line-height: 1.4; }
.home-live-go { font-size: var(--g-fs-sm); color: var(--g-action); font-weight: 600; }

/* 최근 발언 흐름 */
.home-sparkbox {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s4); margin-bottom: var(--g-s4);
}
.home-spark { display: block; width: 100%; height: auto; }
.home-spark-area { fill: var(--g-action-bg); }
.home-spark-line {
  fill: none; stroke: var(--g-action); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.home-spark-dot { fill: var(--g-action); }
.home-spark-empty { margin: 0; color: var(--g-muted); font-size: var(--g-fs-sm); }

/* 이 토론에서 친구들에게 보이는 이름 */
.home-alias {
  margin: calc(var(--g-s3) * -1) 0 var(--g-s4);
  display: flex; align-items: center; gap: var(--g-s2); flex-wrap: wrap;
}
.home-alias-tag {
  background: var(--g-sunk); border: 1px solid var(--g-border);
  border-radius: 999px; padding: 2px 12px;
  font-weight: 700; font-size: var(--g-fs-sm);
}
.home-alias-note { color: var(--g-muted); font-size: var(--g-fs-sm); }

/* 지난 토론 기록 및 나의 성장 — 돌아보기에서 첫 화면으로 (천강 요청 PPT 13·15). */
.home-past { display: flex; flex-direction: column; gap: var(--g-s2); }
.home-past-card {
  display: grid; gap: 3px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.home-past-card:hover { border-color: var(--g-action); }
.home-past-title { font-size: var(--g-fs-md); font-weight: 700; }
.home-past-when, .home-past-facts { font-size: var(--g-fs-sm); color: var(--g-muted); }
.home-past-praise { font-size: var(--g-fs-sm); color: var(--g-ok); line-height: 1.5; }
.home-past-cta {
  justify-self: start; margin-top: var(--g-s1);
  font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-action);
}

/* 선생님이 남긴 말 (천강 요청 PPT 10).
   성적표가 아니라 편지에 가깝게 — 카드 대신 왼쪽에 선 하나. */
.home-feedback { display: flex; flex-direction: column; gap: var(--g-s2); }
.home-feedback-one {
  border-left: 3px solid var(--g-live); background: var(--g-panel);
  border-radius: var(--g-r-sm); padding: var(--g-s2) var(--g-s3);
}
.home-feedback-when { font-size: var(--g-fs-sm); color: var(--g-muted); }
.home-feedback-body {
  margin: 4px 0 0; font-size: var(--g-fs-md); color: var(--g-text);
  white-space: pre-wrap; line-height: 1.6;
}

/* 지난 토론에서 «한 것» (천강 검수 2026-09-13).
   숫자만 보이면 성적표로 읽힌다. 그래서 «무엇을» 했는지를 앞에 둔다. */
.home-past-did {
  display: block; margin-top: 4px;
  font-size: var(--g-fs-sm); color: var(--g-ok); font-weight: 650;
}

/* ───── screens/live-reflect.css ───── */
/* 성찰 쓰기 (천강 검수 2026-09-13).
   「내가 쓴 성찰」 바로 위. 쓰는 자리가 읽는 자리와 붙어 있어야
   «어디서 쓰나» 를 묻지 않는다. */
.live-reflect-box {
  border: 1px solid var(--g-border); border-left: 3px solid var(--g-ok);
  border-radius: var(--g-r-md); background: var(--g-panel);
  padding: var(--g-s3) var(--g-s4); margin-bottom: var(--g-s3);
}
.live-reflect-hint {
  margin: 0 0 var(--g-s2); font-size: var(--g-fs-sm); color: var(--g-muted);
}
.live-reflect-row { display: flex; gap: 6px; align-items: center; }
.live-reflect-pick {
  flex: 1 1 auto; min-width: 0; padding: 7px 9px; font: inherit;
  font-size: var(--g-fs-sm); color: var(--g-text);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-paper);
}
.live-reflect-save {
  flex: 0 0 auto; border: 0; border-radius: var(--g-r-sm); cursor: pointer;
  background: var(--g-ok); color: #FFFFFF;
  padding: 8px 18px; font-size: var(--g-fs-sm); font-weight: 700;
}
.live-reflect-save:hover { filter: brightness(1.08); }
.live-reflect-save:disabled { opacity: 0.6; cursor: default; }
.live-reflect-in {
  width: 100%; box-sizing: border-box; margin-top: var(--g-s2);
  padding: 9px 11px; font: inherit; font-size: var(--g-fs-md); color: var(--g-text);
  line-height: 1.7; border: 1px solid var(--g-border);
  border-radius: var(--g-r-sm); background: var(--g-paper); resize: vertical;
}
.live-reflect-in:focus { outline: 2px solid var(--g-action); outline-offset: 1px; }
.live-reflect-say, .live-reflect-none {
  margin: 6px 0 0; font-size: var(--g-fs-sm); color: var(--g-muted);
}

/* ───── screens/live.css ───── */
/* 학생 토론·돌아보기. .live-* 만 쓴다. */

.live-motion { color: var(--g-muted); margin: calc(var(--g-s4) * -1) 0 var(--g-s5); }


/* 편별 2열. 「무엇이 무엇에 답했나」 를 보이게 하는 첫 걸음이다. */
.live-board {
  display: grid; gap: var(--g-s4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.live-side {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4);
}
/* 내 자리는 테두리로만 표시한다. 색을 더 쓰면 진영 색과 싸운다. */
.live-side.is-mine { border-color: var(--g-action); }

.live-side-head {
  display: flex; align-items: center; gap: var(--g-s2);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--g-muted); text-transform: uppercase;
  margin-bottom: var(--g-s3);
}
.live-side-tag {
  font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: var(--g-action-bg); color: var(--g-action);
  letter-spacing: 0;
}
.live-side-n { margin-left: auto; }

.live-msg {
  border-left: 3px solid var(--g-border-strong);
  padding: 2px 0 2px var(--g-s3);
  margin-bottom: var(--g-s3);
}
.live-msg.is-mine { border-left-color: var(--g-action); }
.live-msg-who { font-size: 12px; color: var(--g-muted); }
.live-msg-body { margin: 2px 0 0; font-size: var(--g-fs-sm); white-space: pre-wrap; }

.live-todo {
  margin-top: var(--g-s5); font-size: var(--g-fs-sm); color: var(--g-muted);
}

.live-shift-head {
  display: flex; align-items: baseline; gap: var(--g-s3);
  margin-bottom: var(--g-s2);
}
.live-shift-mark {
  font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: #E7F0EA; color: var(--g-ok);
}
.live-shift-when {
  margin-left: auto; font-size: 12px;
  /* --g-faint 는 12px 로 카드 위에 얹으면 3.37:1 이라 AA 미달이다.
     시각이 «있으나 마나 한 정보» 가 아니므로 읽히는 색으로 둔다. */
  color: var(--g-muted);
}
.live-shift-quote { margin: 0; font-size: var(--g-fs-sm); }
.live-shift-topic {
  margin-top: var(--g-s2); font-size: 12px; color: var(--g-action);
}
.live-shift-empty {
  color: var(--g-muted); font-size: var(--g-fs-sm);
  background: var(--g-sunk); border-radius: var(--g-r-md);
  padding: var(--g-s4); margin: 0;
}

/* ── Flow Board — 논점 하나가 한 줄, 편이 열 ── */
.live-lines { display: flex; flex-direction: column; gap: var(--g-s4); }

.live-line {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4) var(--g-s4);
}
.live-line-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--g-muted); text-transform: uppercase; margin-bottom: var(--g-s3);
}
.live-line-cells {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.live-cell {
  border-left: 3px solid var(--g-border-strong);
  padding-left: var(--g-s3);
}
/* 빈칸이 이 화면의 전부다 — 「여기를 쳐라」 라고 말한다. */
.live-cell.is-open {
  border-left-color: var(--g-side-b);
  background: #FFF9F5; border-radius: 0 var(--g-r-md) var(--g-r-md) 0;
  padding: var(--g-s3);
}
.live-cell-side { font-size: 11.5px; font-weight: 700; color: var(--g-muted); }
.live-cell-msg { margin: 4px 0 0; font-size: var(--g-fs-sm); }
.live-cell-who { color: var(--g-muted); font-size: 12px; }
.live-cell-open {
  margin: 4px 0 0; font-size: var(--g-fs-sm);
  color: var(--g-side-b); font-weight: 620;
}

.live-loose { margin: var(--g-s4) 0; }
.live-loose summary {
  cursor: pointer; font-size: var(--g-fs-sm); color: var(--g-muted);
}

/* ── 내 발언 + 논증 지도 ── */
.live-mine {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
  margin-bottom: var(--g-s3);
}

.live-mapbtn {
  margin-top: var(--g-s2);
  border: 1px dashed var(--g-border-strong); background: transparent;
  color: var(--g-muted); padding: 6px 14px; border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm); cursor: pointer;
}
.live-mapbtn:hover { border-color: var(--g-action); color: var(--g-action); }
.live-mapbtn:disabled { color: var(--g-faint); cursor: default; }

.live-4d {
  display: grid; gap: var(--g-s2); margin-top: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.live-4d-cell {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  padding: var(--g-s3); background: var(--g-paper);
}
.live-4d-cell.is-empty { border-style: dashed; }
/* 숨은 전제 — 학생이 말하지 않은 것. 여기가 이 기능의 핵심이다. */
.live-4d-cell.is-warrant { border-color: var(--g-side-b); background: #FFF9F5; }
.live-4d-cell.is-rebuttal { border-color: var(--g-warn); background: #FBF6E7; }
.live-4d-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--g-muted); text-transform: uppercase; margin-bottom: 4px;
}
.live-4d-cell.is-warrant .live-4d-label { color: var(--g-side-b); }
.live-4d-cell.is-rebuttal .live-4d-label { color: var(--g-warn); }
.live-4d-text { margin: 0; font-size: var(--g-fs-sm); }
.live-4d-cell.is-empty .live-4d-text { color: var(--g-faint); }

/* ── 발언 입력 ── */
.live-form {
  display: flex; flex-direction: column; gap: var(--g-s3);
  border-top: 1px solid var(--g-border); padding-top: var(--g-s4);
}
.live-input {
  width: 100%; resize: vertical; padding: var(--g-s3) var(--g-s4);
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-md);
}
.live-formrow {
  display: flex; align-items: center; gap: var(--g-s3); flex-wrap: wrap;
}
.live-point, .live-newpoint {
  padding: 8px 11px; border: 1px solid var(--g-border-strong);
  border-radius: var(--g-r-sm); font-size: var(--g-fs-sm);
  background: var(--g-panel);
}
.live-newpoint[hidden] { display: none; }
.live-send {
  border: 0; cursor: pointer; padding: 9px 20px;
  border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel);
  font-size: var(--g-fs-sm); font-weight: 650;
}
.live-send:disabled { background: var(--g-faint); cursor: default; }
.live-status { font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 5축 — 학생 화면. 막대·별·등급을 쓰지 않는다.
   모양이 순위처럼 보이는 순간 「몇 등이야?」 가 시작된다. */
.live-axes {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: var(--g-s5);
}

.live-axis {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.live-axis-head { display: flex; align-items: baseline; gap: var(--g-s2); }
.live-axis-name { font-weight: 650; }
.live-axis-count {
  margin-left: auto; font-weight: 700; color: var(--g-action);
  font-variant-numeric: tabular-nums;
}
.live-axis-signal { margin: 2px 0 0; font-size: 12.5px; color: var(--g-muted); }
.live-axis-next {
  margin: var(--g-s2) 0 0; font-size: var(--g-fs-sm);
  border-left: 2px solid var(--g-action-line); padding-left: var(--g-s3);
}

/* 관찰자 학생의 평가칸. 참관인 화면과 같은 일을 하되 학생 말투로. */
.live-vote-hint { margin: 0 0 var(--g-s3); font-size: var(--g-fs-sm); color: var(--g-muted); }

.live-vote-sides { display: flex; gap: var(--g-s2); flex-wrap: wrap; margin-bottom: var(--g-s3); }
.live-vote-side {
  border: 1px solid var(--g-border-strong); background: var(--g-panel);
  color: var(--g-text); border-radius: 999px;
  padding: 8px 20px; font-size: var(--g-fs-sm); cursor: pointer;
}
.live-vote-side:hover { border-color: var(--g-action); }
.live-vote-side.is-on {
  background: var(--g-action); border-color: var(--g-action);
  color: var(--g-panel); font-weight: 650;
}

.live-vote-why {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-md);
  background: var(--g-panel); color: var(--g-text);
  padding: 9px 12px; font-size: var(--g-fs-sm); font-family: inherit;
}

.live-vote-row { display: flex; align-items: center; gap: var(--g-s3); margin-top: var(--g-s3); }
.live-vote-send {
  border: 0; border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel);
  padding: 9px 22px; font-size: var(--g-fs-sm); font-weight: 650; cursor: pointer;
}
.live-vote-send:disabled { background: var(--g-muted); cursor: default; }
.live-vote-status { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

.live-tally {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--g-border); border: 1px solid var(--g-border);
  border-radius: var(--g-r-md); overflow: hidden;
}
.live-tally-row {
  display: flex; justify-content: space-between;
  background: var(--g-panel); padding: 8px var(--g-s4); font-size: var(--g-fs-sm);
}
.live-tally-row b { font-variant-numeric: tabular-nums; }

/* 이 토론의 방식과 규칙 한 줄. 학생이 계속 보게 둔다. */
.live-rule {
  display: flex; align-items: baseline; gap: var(--g-s3); flex-wrap: wrap;
  background: var(--g-action-bg); border-left: 4px solid var(--g-action);
  border-radius: 0 var(--g-r-md) var(--g-r-md) 0;
  padding: var(--g-s3) var(--g-s4); margin-bottom: var(--g-s4);
}
.live-rule-name {
  font-size: 12px; font-weight: 700; color: var(--g-action); white-space: nowrap;
}
.live-rule-text { font-size: var(--g-fs-sm); font-weight: 600; }

/* 이탈학생 유도 — 2026-09-29 3차 요청서 ⑥. 등수·점수 없이 한 줄로만 독려한다. */
.live-nudge {
  margin: 0 0 var(--g-s3); padding: var(--g-s3) var(--g-s4);
  border-radius: var(--g-r-md); font-size: var(--g-fs-sm); font-weight: 600;
  background: var(--g-warn-bg, var(--g-action-bg));
  border-left: 4px solid var(--g-warn, var(--g-action));
}
.live-nudge.is-quiet {
  background: var(--g-action-bg); border-left-color: var(--g-action);
}

/* 이 토론에서 친구들에게 보이는 이름 */
.live-alias {
  margin: calc(var(--g-s3) * -1) 0 var(--g-s4);
  color: var(--g-muted); font-size: var(--g-fs-sm);
}

/* 오간 말 — 연습방과 같은 모양. 학생이 이미 아는 모양이어야 한다. */
.live-chat {
  display: flex; flex-direction: column; gap: var(--g-s3);
  max-height: 420px; overflow-y: auto;
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s4);
  margin-bottom: var(--g-s4);
}
.live-chat-row { max-width: 78%; align-self: flex-start; }
.live-chat-row.is-mine { align-self: flex-end; }

.live-chat-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--g-muted); margin-bottom: 3px;
}
.live-chat-row.is-mine .live-chat-meta { justify-content: flex-end; }
.live-chat-who { font-weight: 650; color: var(--g-text); }
.live-chat-side {
  background: var(--g-side-b-bg); color: var(--g-side-b);
  border-radius: 999px; padding: 0 7px; font-weight: 600;
}
.live-chat-side.is-mine-side {
  background: var(--g-side-a-bg); color: var(--g-side-a);
}
.live-chat-when { font-variant-numeric: tabular-nums; color: var(--g-faint); }

.live-chat-text {
  margin: 0; padding: var(--g-s3) var(--g-s4);
  border: 1px solid var(--g-border); border-radius: 14px 14px 14px 4px;
  background: var(--g-sunk); white-space: pre-wrap; line-height: 1.65;
}
.live-chat-row.is-mine .live-chat-text {
  border-radius: 14px 14px 4px 14px;
  background: var(--g-action-bg); border-color: var(--g-action-line);
}
/* AI 개입 — 2026-09-29 3차 요청서 ⑦. 학생·교사 말풍선과 확실히 갈린다. */
.live-chat-ai {
  max-width: 88%; align-self: center;
}
.live-chat-ai .live-chat-text {
  border-radius: var(--g-r-md); background: var(--g-warn-bg, #fff7e0);
  border: 1px dashed var(--g-border-strong); font-style: italic;
}
.live-chat-aibadge {
  background: var(--g-action); color: #fff; border-radius: 999px;
  padding: 0 6px; font-size: 10px; font-weight: 700;
}

.live-chat-empty {
  margin: 0 0 var(--g-s4); padding: var(--g-s5);
  border: 1px dashed var(--g-border-strong); border-radius: var(--g-r-md);
  text-align: center; color: var(--g-muted);
}

/* 칭찬 스티커 — 2026-09-29 3차 요청서 ⑥. 내 발언에는 못 붙여 회색 표시만 된다. */
.live-chat-reacts {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.live-react {
  font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--g-border); background: var(--g-panel);
  color: var(--g-muted); cursor: pointer;
}
.live-react:hover { border-color: var(--g-border-strong); color: var(--g-text); }
.live-react.is-on {
  background: var(--g-action-bg); border-color: var(--g-action-line); color: var(--g-text);
}
.live-react.is-readonly {
  cursor: default; background: transparent;
}

/* 편 고르기 — 지원 선택으로 연 토론에서만 (2026-09-09 천강 시안 p.4). */
.live-pick {
  border: 1px solid var(--g-action-line); border-radius: var(--g-r-lg);
  background: var(--g-action-bg); padding: var(--g-s5);
  margin-bottom: var(--g-s5);
}
.live-pick-title {
  margin: 0 0 var(--g-s2); font-size: var(--g-fs-lg);
  font-weight: 700; color: var(--g-action);
}
.live-pick-why { margin: 0 0 var(--g-s4); font-size: var(--g-fs-sm); color: var(--g-muted); }
.live-pick-row { display: flex; gap: var(--g-s3); flex-wrap: wrap; }
.live-pick-btn {
  border: 1px solid var(--g-action); border-radius: var(--g-r-md);
  background: var(--g-panel); color: var(--g-action); cursor: pointer;
  padding: 12px 26px; font-size: var(--g-fs-md); font-weight: 700;
}
.live-pick-btn:hover { background: var(--g-action); color: #FFFFFF; }
.live-pick-btn:disabled { opacity: 0.55; cursor: default; }

/* ───── screens/login.css ───── */
/* 로그인. .login-* 만 쓴다 (CSS 소유권 규칙). */

.login-wrap {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--g-s5);
  overflow: hidden;
  /* 종이 바탕 위에 아주 옅은 두 색. 위가 밝고 아래로 갈수록 색이 든다 —
     가지가 «아래에서» 자라 올라오는 방향과 맞춘다. */
  background:
    radial-gradient(120% 80% at 50% 100%,
      color-mix(in srgb, var(--g-side-a) 7%, transparent) 0%,
      transparent 62%),
    radial-gradient(90% 70% at 82% 100%,
      color-mix(in srgb, var(--g-side-b) 6%, transparent) 0%,
      transparent 58%),
    var(--g-paper);
}

/* 마디 격자. 논점이 놓이는 자리처럼 아주 옅게 깐다. */
.login-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(var(--g-border-strong) 0.8px, transparent 0.8px);
  background-size: 26px 26px;
  opacity: 0.28;
  mask-image: linear-gradient(to top, #000 0%, transparent 78%);
}

/* 자라는 가지 */
.login-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.login-branch {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* 길이를 몰라도 되게 넉넉히 잡고 아래에서 위로 그려 나간다. */
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: login-grow 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.16s);
}
.login-branch.is-a { stroke: color-mix(in srgb, var(--g-side-a) 34%, transparent); }
.login-branch.is-b { stroke: color-mix(in srgb, var(--g-side-b) 30%, transparent); }

.login-node {
  opacity: 0;
  animation: login-appear 0.8s ease-out forwards;
  animation-delay: 1.5s;
}
.login-node.is-a { fill: color-mix(in srgb, var(--g-side-a) 46%, transparent); }
.login-node.is-b { fill: color-mix(in srgb, var(--g-side-b) 42%, transparent); }

@keyframes login-grow { to { stroke-dashoffset: 0; } }
@keyframes login-appear { to { opacity: 1; } }

/* 움직임을 원치 않는 사람에게는 «다 자란 모습» 을 그대로 보여 준다. */
@media (prefers-reduced-motion: reduce) {
  .login-branch { animation: none; stroke-dashoffset: 0; }
  .login-node { animation: none; opacity: 1; }
}

.login-form {
  width: 100%;
  max-width: 380px;
  background: var(--g-panel);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: var(--g-s6);
  /* 배경 위에 떠 보여야 한다. 배경이 카드보다 눈에 띄면 안 된다. */
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 12px 32px -12px rgb(0 0 0 / 14%);
  display: flex;
  flex-direction: column;
  gap: var(--g-s4);
}

.login-title {
  margin: 0;
  font-size: var(--g-fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-sub {
  margin: calc(var(--g-s4) * -1) 0 0;
  color: var(--g-muted);
  font-size: var(--g-fs-sm);
}

.login-field { display: flex; flex-direction: column; gap: 6px; }

.login-label {
  font-size: var(--g-fs-sm);
  font-weight: 600;
  color: var(--g-muted);
}

.login-input {
  padding: 11px 13px;
  border: 1px solid var(--g-border-strong);
  border-radius: var(--g-r-md);
  background: var(--g-panel);
  font-size: var(--g-fs-md);
}

.login-input:focus {
  outline: 2px solid var(--g-action);
  outline-offset: 1px;
  border-color: var(--g-action);
}

.login-submit {
  margin-top: var(--g-s2);
  padding: 12px;
  border: 0;
  border-radius: var(--g-r-md);
  background: var(--g-action);
  color: var(--g-panel);
  font-size: var(--g-fs-md);
  font-weight: 650;
  cursor: pointer;
}
.login-submit:hover { background: #16307a; }
.login-submit:disabled { background: var(--g-faint); cursor: default; }

.login-error {
  margin: 0;
  padding: 10px 13px;
  border-radius: var(--g-r-md);
  background: #FBEAEA;
  color: var(--g-bad);
  font-size: var(--g-fs-sm);
}
.login-error[hidden] { display: none; }

/* ───── screens/make.css ───── */
/* 토론 열기. .make-* 만 쓴다 (CSS 소유권 규칙). */

.make-flow { display: flex; flex-direction: column; gap: var(--g-s4); }

.make-box {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4) var(--g-s5) var(--g-s5);
}

.make-step { display: flex; align-items: center; gap: var(--g-s3); margin-bottom: var(--g-s3); }
.make-step-n {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--g-border); color: var(--g-muted);
  font-size: 13px; font-weight: 700;
}
.make-step.is-done .make-step-n { background: var(--g-ok); color: var(--g-panel); }
.make-step-label { font-size: var(--g-fs-lg); font-weight: 680; }

.make-search, .make-own, .make-select {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-md);
  background: var(--g-panel); color: var(--g-text);
  padding: 9px 12px; font-size: var(--g-fs-sm);
}
.make-own { margin-top: var(--g-s3); }
.make-select { max-width: 380px; }

.make-cards {
  display: grid; gap: var(--g-s2); margin-top: var(--g-s3);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.make-card {
  display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left;
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: 9px 12px;
}
.make-card:hover { border-color: var(--g-action); }
.make-card.is-on {
  border-color: var(--g-action); background: var(--g-action-bg); border-width: 2px;
}
.make-card-title { font-size: var(--g-fs-sm); font-weight: 620; line-height: 1.35; }
.make-card-tags { font-size: 11.5px; color: var(--g-muted); }

.make-chosen {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--g-s3);
  background: var(--g-action-bg); border-left: 3px solid var(--g-action);
  border-radius: 0 var(--g-r-sm) var(--g-r-sm) 0; padding: var(--g-s2) var(--g-s3);
}
.make-chosen-title { font-weight: 650; }
.make-chosen-why { font-size: 12.5px; color: var(--g-muted); }

.make-hint { margin: 0 0 var(--g-s3); font-size: var(--g-fs-sm); color: var(--g-muted); }
.make-none { margin: var(--g-s3) 0 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

.make-autos { display: flex; gap: var(--g-s2); margin-bottom: var(--g-s3); }
.make-auto {
  border: 1px solid var(--g-border-strong); background: transparent;
  color: var(--g-muted); border-radius: var(--g-r-md);
  padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.make-auto:hover { border-color: var(--g-action); color: var(--g-action); }

.make-tally { display: flex; gap: var(--g-s4); margin-bottom: var(--g-s3); }
.make-tally-item { font-size: var(--g-fs-sm); font-weight: 650; }
.make-tally-item.is-mute { color: var(--g-muted); font-weight: 400; }

.make-rows {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--g-border); border: 1px solid var(--g-border);
  border-radius: var(--g-r-md); overflow: hidden;
  max-height: 420px; overflow-y: auto;
}
.make-row {
  display: flex; align-items: center; gap: var(--g-s2);
  background: var(--g-panel); padding: 6px var(--g-s4);
}
.make-row-name { flex: 1; font-size: var(--g-fs-sm); }

/* 편 고르기 단추. 색만으로 구분하지 않는다 — 글자가 곧 상태다. */
.make-side {
  border: 1px solid var(--g-border-strong); background: transparent;
  color: var(--g-muted); border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.make-side:hover { border-color: var(--g-action); }
.make-side.is-on {
  background: var(--g-action); border-color: var(--g-action);
  color: var(--g-panel); font-weight: 650;
}
.make-side.is-audience.is-on {
  background: var(--g-muted); border-color: var(--g-muted);
}

.make-foot { display: flex; align-items: center; gap: var(--g-s3); margin-top: var(--g-s4); }
.make-open {
  border: 0; border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel);
  padding: 10px 24px; font-size: var(--g-fs-md); font-weight: 650; cursor: pointer;
}
.make-open:disabled { background: var(--g-muted); cursor: default; }
.make-later {
  border: 1px solid var(--g-border-strong); background: transparent;
  color: var(--g-text); border-radius: var(--g-r-md);
  padding: 10px 18px; font-size: var(--g-fs-sm); cursor: pointer;
}
.make-status { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* ── 토론 방식 고르기. 접어 둔다 — 기본은 하나면 된다. ────────────────── */
.make-fmtbox summary {
  display: flex; align-items: baseline; gap: var(--g-s3);
  cursor: pointer; font-size: var(--g-fs-md); font-weight: 650;
}
.make-fmt-current { flex: 1; }
.make-fmt-open { font-size: 12.5px; font-weight: 400; color: var(--g-action); }

.make-fmts {
  display: grid; gap: var(--g-s2); margin-bottom: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.make-fmt {
  display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left;
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: 9px 12px;
}
.make-fmt:hover { border-color: var(--g-action); }
.make-fmt.is-on {
  border-color: var(--g-action); border-width: 2px; background: var(--g-action-bg);
}
.make-fmt-name { font-size: var(--g-fs-sm); font-weight: 650; }
.make-fmt-when { font-size: 11.5px; color: var(--g-muted); }
.make-fmt-time { font-size: 11.5px; color: var(--g-action); font-weight: 620; }

.make-fmt-detail {
  border-top: 1px dashed var(--g-border-strong); padding-top: var(--g-s3);
}
.make-fmt-one { margin: 0; font-size: var(--g-fs-sm); }
/* 진행 가이드 — 요청서 문안 그대로 (천강 요청 PPT 5·6). */
.make-fmt-guide {
  margin: 6px 0 0; font-size: var(--g-fs-sm); color: var(--g-text); line-height: 1.6;
}
.make-fmt-rule {
  margin: var(--g-s2) 0 0; font-size: var(--g-fs-sm); font-weight: 650;
  color: var(--g-action);
}
.make-fmt-steps {
  margin: var(--g-s3) 0 0; padding-left: 1.3em;
  font-size: 12.5px; color: var(--g-muted);
}
.make-fmt-steps li { margin-bottom: 2px; }
.make-fmt-tip {
  margin: var(--g-s3) 0 0; font-size: 12.5px; color: var(--g-warn);
}

/* 접혀 있을 때도 보이는 규칙 한 줄. 방식마다 배울 것이 이 한 줄이다. */
.make-fmt-summaryrule {
  display: block; width: 100%;
  margin-top: 2px; color: var(--g-muted); font-size: var(--g-fs-sm);
  font-weight: 400;
}


/* ── 2026-09-09 천강 시안 p.4 — 두 칸 구성 ──────────────────────────── */
.make-grid {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--g-s5); align-items: start;
}
@media (max-width: 900px) { .make-grid { grid-template-columns: 1fr; } }
.make-left, .make-right {
  display: flex; flex-direction: column; gap: var(--g-s4); min-width: 0;
}

.make-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--g-s3); margin: 0 0 var(--g-s3);
  font-size: var(--g-fs-md); font-weight: 700;
}
.make-count { font-size: var(--g-fs-sm); font-weight: 400; color: var(--g-muted); }
.make-empty { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 자료 승인 — 승인 전에는 학생에게 안 보인다. 그 말을 화면에도 적는다. */
.make-mats { display: flex; flex-direction: column; gap: var(--g-s2); }
.make-mat {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--g-s3);
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  padding: var(--g-s3);
}
.make-mat-text { display: grid; gap: 2px; min-width: 0; }
.make-mat-title { font-size: var(--g-fs-sm); font-weight: 600; }
.make-mat-from {
  font-size: 12px; color: var(--g-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.make-mat-act { display: flex; gap: var(--g-s2); flex: 0 0 auto; }

.make-approve, .make-reject {
  border-radius: var(--g-r-sm); cursor: pointer;
  padding: 6px 12px; font-size: var(--g-fs-sm); font-weight: 600;
}
.make-approve {
  border: 1px solid var(--g-ok); background: transparent; color: var(--g-ok);
}
.make-approve.is-done {
  background: var(--g-ok); color: #FFFFFF; cursor: default;
}
.make-reject {
  border: 1px solid var(--g-side-b-bg); background: transparent; color: #A94D1B;
}
.make-approve:disabled, .make-reject:disabled { opacity: 0.55; cursor: default; }

/* 논제 목록은 스스로 스크롤한다. 60장이 세로로 다 늘어나면
   오른쪽 준비 칸이 화면 밖으로 밀려난다. */
.make-left .make-cards {
  max-height: 58vh; overflow-y: auto;
  padding-right: var(--g-s2);
}

/* 배정 방식 — 무작위 배정 · 지원 선택 · 직접 지정 (천강 시안 p.4). */
.make-modes {
  display: inline-flex; gap: 2px; margin-bottom: var(--g-s2);
  padding: 3px; border-radius: 999px; background: var(--g-sunk);
}
.make-mode {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 16px; border-radius: 999px;
  font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-muted);
}
.make-mode:hover { color: var(--g-text); }
.make-mode.is-on { background: var(--g-live); color: #FFFFFF; }

/* 미리 저장한 토론 불러오기 (천강 요청 PPT 4).
   접어 둔다 — 없는 날이 더 많고, 있으면 개수가 보인다. */
.make-saved { margin-bottom: var(--g-s3); }
.make-saved > summary {
  cursor: pointer; font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-action);
}
.make-saved-list { display: flex; flex-direction: column; gap: 4px; margin-top: var(--g-s2); }
.make-saved-one {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-panel); padding: 8px 12px;
}
.make-saved-one:hover { background: var(--g-sunk); }
.make-saved-title { font-size: var(--g-fs-sm); font-weight: 650; color: var(--g-text); }
.make-saved-where { font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 「무엇을 토론할까요?」 — 이 화면이 묻는 것 하나 (천강 요청 PPT 4). */
.make-ask {
  margin: 0 0 var(--g-s3); font-size: var(--g-fs-lg); font-weight: 700;
  color: var(--g-text);
}

/* 「미참여」 — 이 차시에 빠지는 학생 (천강 검수 2026-09-13).
   역할이 아니라 «명단에서 빠짐» 이라 다른 색을 쓴다. 편 색과 섞지 않는다. */
.make-side.is-out { color: var(--g-faint); }
.make-side.is-out.is-on {
  background: var(--g-sunk); border-color: var(--g-border-strong);
  color: var(--g-text); font-weight: 700;
}
/* 빠진 학생 줄은 한 톤 내린다 — 훑을 때 걸리지 않게. */
.make-row.is-away .make-row-name { color: var(--g-faint); text-decoration: line-through; }

/* ───── screens/panel-practice.css ───── */
/* 학생 패널 토론. .panel-practice-* 만 쓴다 (CSS 소유권 규칙). */

.panel-practice-back {
  border: 0; background: none; color: var(--g-muted); cursor: pointer;
  font-size: var(--g-fs-sm); padding: 0; margin-bottom: var(--g-s3);
}
.panel-practice-back:hover { color: var(--g-action); }

/* 2026-10-21 4차 요청 — 룰북 버튼을 제목 옆에 둔다. */
.panel-practice-headbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--g-s2); flex-wrap: wrap;
}

.panel-practice-form { display: flex; flex-direction: column; gap: var(--g-s3); margin-top: var(--g-s4); }
.panel-practice-formrow { display: flex; gap: var(--g-s3); flex-wrap: wrap; align-items: center; }
/* 2026-10-21 4차 요청 — AI와 나 / AI끼리 선택. */
.panel-practice-modepick { display: flex; flex-direction: column; gap: var(--g-s2); }
.panel-practice-modepick label {
  display: flex; align-items: center; gap: var(--g-s2);
  font-size: var(--g-fs-sm); color: var(--g-text);
}
.panel-practice-input {
  padding: 9px 12px; border: 1px solid var(--g-border-strong);
  border-radius: var(--g-r-sm); background: var(--g-panel); font-size: var(--g-fs-sm);
  font-family: inherit; resize: vertical;
}
.panel-practice-start {
  border: 0; cursor: pointer; padding: 9px 20px; border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel); font-size: var(--g-fs-sm); font-weight: 650;
}
.panel-practice-start:disabled { background: var(--g-sunk); color: var(--g-faint); }
.panel-practice-formresult { font-size: var(--g-fs-sm); color: var(--g-muted); min-height: 1.4em; margin: 0; }

.panel-practice-status { font-size: var(--g-fs-sm); color: var(--g-muted); margin: var(--g-s2) 0 var(--g-s4); }

.panel-practice-turns { display: flex; flex-direction: column; gap: var(--g-s3); margin-bottom: var(--g-s4); }
.panel-practice-turn {
  border: 1px solid var(--g-border); border-left-width: 4px; border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.panel-practice-turn.is-me { border-left-color: var(--g-action); background: var(--g-action-bg); }
.panel-practice-turn.is-ai { border-left-color: var(--g-border-strong); }
.panel-practice-turn-head { display: flex; align-items: center; gap: var(--g-s2); margin-bottom: 6px; }
.panel-practice-turn-who { font-weight: 700; font-size: var(--g-fs-sm); }
.panel-practice-turn-body { margin: 0; font-size: var(--g-fs-sm); line-height: 1.6; }

.panel-practice-tag { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.panel-practice-tag.is-open  { background: var(--g-action-bg); color: var(--g-action); }
.panel-practice-tag.is-agree { background: #E4F1EC; color: #157A56; }
.panel-practice-tag.is-rebut { background: #FBEAE7; color: var(--g-bad); }
.panel-practice-tag.is-ask   { background: var(--g-action-bg); color: var(--g-action); }
.panel-practice-tag.is-build { background: #FDF3DC; color: var(--g-warn); }

/* 내 차례 — 태그를 버튼으로 고르고, 글을 적는다 */
.panel-practice-speakbox {
  border: 1px solid var(--g-action-line); border-radius: var(--g-r-lg);
  background: var(--g-action-bg); padding: var(--g-s4);
}
.panel-practice-speaklabel { margin: 0 0 var(--g-s3); font-weight: 650; font-size: var(--g-fs-sm); }
.panel-practice-tagpicks { display: flex; gap: var(--g-s2); flex-wrap: wrap; margin-bottom: var(--g-s3); }
.panel-practice-tagpick {
  border: 1px solid var(--g-border-strong); background: var(--g-panel); cursor: pointer;
  padding: 7px 16px; border-radius: 999px; font-size: var(--g-fs-sm); font-weight: 600;
}
.panel-practice-tagpick.is-picked { background: var(--g-action); color: var(--g-panel); border-color: var(--g-action); }
.panel-practice-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--g-border-strong);
  border-radius: var(--g-r-sm); background: var(--g-panel); font-size: var(--g-fs-sm);
  font-family: inherit; resize: vertical;
}
.panel-practice-speakrow { display: flex; align-items: center; gap: var(--g-s3); margin-top: var(--g-s3); }
.panel-practice-send {
  border: 0; cursor: pointer; padding: 9px 20px; border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel); font-size: var(--g-fs-sm); font-weight: 650;
}
.panel-practice-send:disabled { background: var(--g-sunk); color: var(--g-faint); }

/* AI 차례 — 기다리는 자리 */
.panel-practice-controls { display: flex; align-items: center; gap: var(--g-s4); flex-wrap: wrap; }
.panel-practice-step {
  border: 1px solid var(--g-action-line); cursor: pointer; padding: 10px 20px;
  border-radius: var(--g-r-md); background: var(--g-panel); color: var(--g-action);
  font-size: var(--g-fs-sm); font-weight: 650;
}
.panel-practice-step:disabled { background: var(--g-sunk); color: var(--g-faint); border-color: var(--g-border); }
.panel-practice-autolabel { display: inline-flex; align-items: center; gap: 6px; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 마무리 — 판정 없음 */
.panel-practice-closing {
  margin-top: var(--g-s4); border: 1px dashed var(--g-border-strong); border-radius: var(--g-r-lg);
  padding: var(--g-s4) var(--g-s5);
}
.panel-practice-closing-title { margin: 0 0 4px; font-size: var(--g-fs-lg); }
.panel-practice-closing-note { color: var(--g-muted); font-size: var(--g-fs-sm); margin: 0 0 var(--g-s4); }
.panel-practice-position {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--g-s5);
}
.panel-practice-position h4 { margin: 0 0 var(--g-s2); font-size: var(--g-fs-sm); }
.panel-practice-quote {
  margin: 0; font-size: var(--g-fs-sm); line-height: 1.6; font-style: italic;
  border-left: 3px solid var(--g-action-line); padding-left: var(--g-s3);
}
.panel-practice-closing-empty { color: var(--g-faint); font-size: var(--g-fs-sm); margin: 0; }

/* 2026-10-21 4차 요청 — 「선생님용처럼 학생용도 세로 칸」. aipanel.css 의
   lane 구조와 같은 모양이다(화면마다 CSS 소유권이 달라 따로 적는다). */
.panel-practice-lanes {
  display: grid; grid-template-columns: repeat(var(--lane-count, 2), minmax(0, 1fr));
  gap: var(--g-s3); align-items: start; margin-bottom: var(--g-s4);
}
.panel-practice-lane {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--g-border); border-radius: var(--g-r-md); background: var(--g-sunk);
  max-height: 72vh; overflow: hidden;
}
.panel-practice-lane-head {
  position: sticky; top: 0; z-index: 1; padding: var(--g-s3) var(--g-s3) var(--g-s2);
  background: var(--g-sunk);
}
.panel-practice-lane-body {
  display: flex; flex-direction: column; gap: var(--g-s2);
  padding: 0 var(--g-s3) var(--g-s3); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--g-border-strong) transparent;
}
.panel-practice-lane-body::-webkit-scrollbar { width: 6px; }
.panel-practice-lane-body::-webkit-scrollbar-thumb { background: var(--g-border-strong); border-radius: 999px; }
.panel-practice-lane .panel-practice-turn { background: var(--g-panel); }

.panel-practice-pchip {
  font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  border: 1px solid transparent;
}
.panel-practice-pchip.is-me { background: var(--g-action-bg); color: var(--g-action); }
.panel-practice-pchip.is-ai { background: var(--g-sunk); color: var(--g-text); border-color: var(--g-border-strong); }

.panel-practice-turn-replyto { margin: 0 0 4px; font-size: 11.5px; color: var(--g-muted); }
.panel-practice-laneswrap { display: flex; flex-direction: column; }
.panel-practice-strays { display: flex; flex-direction: column; gap: var(--g-s2); margin-top: var(--g-s3); }

@media (max-width: 720px) {
  .panel-practice-lanes {
    overflow-x: auto; padding-bottom: 4px;
    grid-template-columns: repeat(var(--lane-count, 2), minmax(240px, 1fr));
  }
  .panel-practice-lane { min-width: 240px; max-height: 60vh; }
}

/* ───── screens/password.css ───── */
/* 비밀번호 바꾸기 (2026-09-10).
   첫 비밀번호는 교실에서 소리 내어 불러 준 것이라, 바꾸기 전에는
   그 반 전체가 서로의 비밀번호를 안다. 그래서 첫 화면으로 막아 세운다. */
.password-box {
  max-width: 420px; margin: 48px auto;
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s5);
}
.password-title {
  margin: 0 0 var(--g-s2); font-size: var(--g-fs-xl); font-weight: 700;
  color: var(--g-text);
}
.password-lead {
  margin: 0 0 var(--g-s4); font-size: var(--g-fs-sm); color: var(--g-muted);
  line-height: 1.6;
}
.password-form { display: flex; flex-direction: column; gap: var(--g-s3); }
.password-field { display: flex; flex-direction: column; gap: 4px; }
.password-label { font-size: var(--g-fs-sm); font-weight: 650; color: var(--g-text); }
.password-hint { font-size: var(--g-fs-sm); color: var(--g-muted); }
.password-in {
  padding: 9px 11px; font: inherit; font-size: var(--g-fs-md); color: var(--g-text);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-paper);
}
.password-in:focus { outline: 2px solid var(--g-action); outline-offset: 1px; }
.password-row { display: flex; gap: var(--g-s2); align-items: center; }
.password-save {
  border: 0; border-radius: var(--g-r-md); cursor: pointer;
  background: var(--g-action); color: #FFFFFF;
  padding: 10px 22px; font-size: var(--g-fs-md); font-weight: 700;
}
.password-save:hover { filter: brightness(1.1); }
.password-save:disabled { opacity: 0.6; cursor: default; }
.password-cancel {
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-md);
  background: var(--g-panel); color: var(--g-muted); cursor: pointer;
  padding: 10px 16px; font-size: var(--g-fs-sm);
}
.password-cancel:hover { background: var(--g-sunk); }
.password-say { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* ───── screens/practice.css ───── */
/* 연습방. .practice-* 만 쓴다 (CSS 소유권 규칙). */

.practice-head {
  display: flex; align-items: center; gap: var(--g-s3);
  padding-bottom: var(--g-s4);
  border-bottom: 1px solid var(--g-border);
}

.practice-back {
  border: 1px solid var(--g-border-strong);
  background: transparent; color: var(--g-muted);
  padding: 6px 12px; border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm); cursor: pointer;
}
.practice-back:hover { border-color: var(--g-action); color: var(--g-action); }

.practice-avatar {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--g-sunk); font-size: 19px;
}

.practice-title {
  display: flex; align-items: center; gap: var(--g-s2);
  font-size: var(--g-fs-lg); font-weight: 680; letter-spacing: -0.01em;
}

/* 인공지능기본법 §31① 사전 고지. 대화 내내 화면에 남는다. */
.practice-notice { color: var(--g-muted); font-size: var(--g-fs-sm); }

.practice-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 5px;
  background: var(--g-muted); color: var(--g-panel);
}

.practice-roundbar { margin-left: auto; }
.practice-rounds { display: flex; align-items: center; gap: 6px; }

.practice-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--g-border-strong);
}
.practice-dot.is-done { background: var(--g-side-b); }

.practice-roundtext {
  margin-left: var(--g-s2);
  color: var(--g-muted); font-size: var(--g-fs-sm); font-weight: 600;
}

.practice-topic {
  margin: var(--g-s4) 0;
  font-size: var(--g-fs-md); font-weight: 650;
}

.practice-log {
  display: flex; flex-direction: column; gap: var(--g-s4);
  min-height: 220px; max-height: 46vh; overflow-y: auto;
  padding: var(--g-s4) 0;
}

.practice-turn { max-width: 74ch; }
.practice-turn-me { align-self: flex-end; text-align: right; }

.practice-meta {
  display: flex; align-items: center; gap: var(--g-s2);
  margin-bottom: 5px;
  font-size: 12px; color: var(--g-muted);
}
.practice-turn-me .practice-meta { justify-content: flex-end; }

.practice-name { font-weight: 650; color: var(--g-side-b); }
.practice-gen { color: var(--g-faint); }
.practice-took { color: var(--g-faint); }

.practice-text {
  margin: 0; padding: var(--g-s3) var(--g-s4);
  border-radius: var(--g-r-lg);
  background: var(--g-panel);
  border: 1px solid var(--g-border);
  white-space: pre-wrap;
}
.practice-turn-me .practice-text {
  background: var(--g-action-bg);
  border-color: var(--g-action-line);
}
.practice-turn-ai .practice-text {
  background: #FDF6F2; border-color: #EBD5C6;
}
.practice-turn-sys .practice-text {
  background: var(--g-sunk); color: var(--g-muted);
}

.practice-empty { color: var(--g-muted); margin: 0; }

.practice-form {
  display: flex; flex-direction: column; gap: var(--g-s3);
  border-top: 1px solid var(--g-border);
  padding-top: var(--g-s4);
}

.practice-input {
  width: 100%; resize: vertical;
  padding: var(--g-s3) var(--g-s4);
  border: 1px solid var(--g-border-strong);
  border-radius: var(--g-r-md);
}
.practice-input:disabled { background: var(--g-sunk); }

.practice-row { display: flex; align-items: center; gap: var(--g-s4); }

.practice-send {
  border: 0; cursor: pointer;
  padding: 10px 22px; border-radius: var(--g-r-md);
  background: var(--g-side-b); color: var(--g-panel);
  font-size: var(--g-fs-sm); font-weight: 650;
}
.practice-send:hover { background: #96441a; }
.practice-send:disabled { background: var(--g-faint); cursor: default; }

.practice-status { margin: 0; color: var(--g-warn); font-size: var(--g-fs-sm); }
.practice-status.is-error { color: var(--g-bad); }
.practice-status[hidden] { display: none; }

.practice-loading { color: var(--g-muted); }

/* ───── screens/prep.css ───── */
/* 준비 화면. .prep-* 만 쓴다 (CSS 소유권 규칙). */

.prep-title {
  font-size: var(--g-fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--g-s1);
}

/* 인공지능기본법 §31① 사전 고지. 눈에 띄되 겁주지 않는 무게. */
.prep-notice {
  margin: 0 0 var(--g-s5);
  color: var(--g-muted);
  font-size: var(--g-fs-sm);
}

.prep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--g-s4);
}

.prep-card {
  background: var(--g-panel);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: var(--g-s5);
  display: flex;
  flex-direction: column;
  gap: var(--g-s3);
}

/* 실전 직전에 가장 필요한 것 하나만 테두리로 권한다.
   셋 다 강조하면 아무것도 강조하지 않은 것과 같다. */
.prep-card-featured { border-color: var(--g-side-b); border-width: 1.5px; }

.prep-head { display: flex; align-items: center; gap: var(--g-s3); }

.prep-avatar {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--g-sunk);
  font-size: 20px;
}

.prep-name {
  display: flex; align-items: center; gap: var(--g-s2);
  font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-muted);
}

.prep-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 5px;
  background: var(--g-muted); color: var(--g-panel);
}

.prep-lead { color: var(--g-muted); font-size: var(--g-fs-sm); }
.prep-body { margin: 0; color: var(--g-muted); }

.prep-actions {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--g-s3);
}

.prep-cta {
  border: 0; cursor: pointer;
  padding: 10px 18px;
  border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel);
  font-size: var(--g-fs-sm); font-weight: 650;
  transition: background 140ms ease;
}
.prep-cta:hover { background: #16307a; }

.prep-card-featured .prep-cta { background: var(--g-side-b); }
.prep-card-featured .prep-cta:hover { background: #96441a; }

.prep-rounds {
  font-size: var(--g-fs-sm); font-weight: 600;
  /* --g-side-b 를 --g-side-b-bg 위에 그대로 얹으면 4.37:1 로 AA 에 0.13 모자란다.
     같은 색조를 한 단 낮춰 4.9:1 로 맞춘다. */
  color: #A94D1B;
  background: var(--g-side-b-bg);
  padding: 5px 11px; border-radius: 999px;
}

.prep-loading { color: var(--g-muted); }

/* ── 자료 ── */
.prep-materials { margin-top: var(--g-s6); }

.prep-subtitle {
  font-size: var(--g-fs-lg); font-weight: 680;
  letter-spacing: -0.015em; margin: 0 0 var(--g-s1);
}

/* AI 가 웹을 뒤지지 않는다는 약속을 화면에 남긴다.
   교사·학부모가 가장 먼저 묻는 것이 이것이다. */
.prep-note {
  margin: 0 0 var(--g-s4);
  color: var(--g-muted); font-size: var(--g-fs-sm);
  border-left: 2px solid var(--g-border-strong);
  padding-left: var(--g-s3);
}

.prep-pool { margin-bottom: var(--g-s5); }

.prep-grouplabel {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--g-faint); margin: 0 0 var(--g-s2);
  text-transform: uppercase;
}

.prep-list {
  list-style: none; margin: 0 0 var(--g-s3); padding: 0;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--g-border); border: 1px solid var(--g-border);
  border-radius: var(--g-r-md); overflow: hidden;
}

.prep-item {
  display: flex; align-items: center; gap: var(--g-s3);
  padding: var(--g-s3) var(--g-s4);
  background: var(--g-panel);
}

.prep-item-body { flex: 1; font-size: var(--g-fs-sm); }
.prep-item-src { color: var(--g-action); font-size: var(--g-fs-sm); }
.prep-item-nosrc { color: var(--g-warn); font-size: var(--g-fs-sm); }

.prep-empty { color: var(--g-muted); font-size: var(--g-fs-sm); margin: 0 0 var(--g-s3); }

.prep-add {
  border: 1px dashed var(--g-border-strong);
  background: transparent; color: var(--g-muted);
  padding: 9px 16px; border-radius: var(--g-r-md);
  font-size: var(--g-fs-sm); cursor: pointer;
}
.prep-add:hover { border-color: var(--g-action); color: var(--g-action); }

.prep-failed { color: var(--g-bad); }

/* 주제 고르기 — 연습을 시작하기 전에 «무엇을 놓고» 를 정한다. */
.prep-pick {
  background: var(--g-panel); border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg); padding: var(--g-s5);
}
.prep-back {
  border: 0; background: none; color: var(--g-muted);
  font-size: var(--g-fs-sm); cursor: pointer; padding: 0 0 var(--g-s3);
}
.prep-back:hover { color: var(--g-action); }

.prep-chips {
  display: flex; flex-wrap: wrap; gap: var(--g-s2);
  margin-bottom: var(--g-s4);
}
.prep-chip {
  border: 1px solid var(--g-border-strong); border-radius: 999px;
  background: var(--g-panel); color: var(--g-text);
  padding: var(--g-s2) var(--g-s4); font-size: var(--g-fs-md);
  cursor: pointer; text-align: left;
}
.prep-chip:hover { border-color: var(--g-action); color: var(--g-action); }
.prep-chip-go {
  border-color: var(--g-action); background: var(--g-action); color: #FFFFFF;
  flex: none;
}

.prep-typedrow { display: flex; gap: var(--g-s2); flex-wrap: wrap; }
.prep-typed {
  flex: 1 1 260px; min-width: 0;
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  padding: var(--g-s2) var(--g-s3); font-size: var(--g-fs-md);
  background: var(--g-panel); color: var(--g-text);
}

/* 자료 — 눌러서 펼치기 */
.prep-item-open > summary { cursor: pointer; list-style: none; }
.prep-item-open > summary::-webkit-details-marker { display: none; }
.prep-item-head { display: flex; justify-content: space-between; gap: var(--g-s3); }
.prep-item-head::after {
  content: '▾'; color: var(--g-faint); font-size: var(--g-fs-sm); flex: none;
}
.prep-item-open[open] .prep-item-head::after { content: '▴'; }
.prep-item-full {
  margin: var(--g-s2) 0 0; padding-left: var(--g-s3);
  border-left: 2px solid var(--g-border);
  color: var(--g-muted); font-size: var(--g-fs-md); line-height: 1.7;
  white-space: pre-wrap;
}

/* 올린 파일 */
.prep-files { list-style: none; margin: var(--g-s3) 0 0; padding: 0; }
.prep-file {
  display: flex; align-items: center; gap: var(--g-s3);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  padding: var(--g-s2) var(--g-s3); margin-bottom: var(--g-s2);
  background: var(--g-panel); font-size: var(--g-fs-sm);
}
.prep-file-kind {
  flex: none; background: var(--g-sunk); border-radius: 999px;
  padding: 1px 9px; color: var(--g-muted);
}
.prep-file-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.prep-file-size { flex: none; color: var(--g-faint); font-variant-numeric: tabular-nums; }
.prep-file-open {
  flex: none; cursor: pointer; color: var(--g-action);
  border: 1px solid var(--g-action-line); border-radius: var(--g-r-sm);
  background: var(--g-action-bg); padding: 3px 12px;
  font: inherit; font-size: var(--g-fs-sm); font-weight: 650;
}
.prep-file-open:hover { filter: brightness(0.97); }
.prep-file-open:disabled { opacity: 0.6; cursor: default; }
.prep-file-del {
  flex: none; border: 0; background: none; cursor: pointer;
  color: var(--g-muted); font: inherit;
}
.prep-file-del:hover { color: var(--g-bad); }

/* 자료 넣기 */
.prep-add {
  margin-top: var(--g-s4); padding: var(--g-s4);
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel);
  display: flex; flex-direction: column; gap: var(--g-s2);
}
.prep-add-title { margin: 0; font-size: var(--g-fs-md); }
.prep-add-text, .prep-add-url {
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  padding: var(--g-s2) var(--g-s3); font: inherit;
  background: var(--g-panel); color: var(--g-text); width: 100%;
}
.prep-add-save {
  border: 1px solid var(--g-action); border-radius: var(--g-r-sm);
  background: var(--g-action); color: #FFFFFF; cursor: pointer;
  padding: var(--g-s2) var(--g-s5); font-weight: 650;
}
.prep-add-save:disabled { opacity: 0.55; cursor: default; }
.prep-add-status { margin: 0; color: var(--g-muted); font-size: var(--g-fs-sm); }
/* --g-faint(#8B8B96) 는 흰 바탕에서도 3.37:1 이라 본문 크기 글자에 쓸 수 없다.
   업로드 제한은 «읽으라고» 쓴 문장이므로 --g-muted 로 둔다. */
.prep-add-limits { margin: 0; color: var(--g-muted); font-size: var(--g-fs-sm); }

.prep-drop {
  border: 2px dashed var(--g-border-strong); border-radius: var(--g-r-md);
  background: var(--g-sunk); cursor: pointer; font: inherit; color: var(--g-text);
  padding: var(--g-s5); text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.prep-drop:hover, .prep-drop.is-over {
  border-color: var(--g-action); background: var(--g-action-bg);
}
.prep-drop-big { font-weight: 650; }
.prep-drop-small, .prep-drop-kinds {
  font-size: var(--g-fs-sm); color: var(--g-muted);
}

/* 나의 연습방 — 홈에서 옮겨 왔다 (천강 요청 PPT 14). */
.prep-rooms { display: flex; flex-direction: column; gap: var(--g-s2); }
.prep-room {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--g-s3);
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.prep-room-topic {
  font-size: var(--g-fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prep-room-side, .prep-room-turns {
  font-size: 11.5px; color: var(--g-muted);
  background: var(--g-sunk); border-radius: 999px; padding: 3px 10px;
}
.prep-empty { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 카드 제목 — 「무슨 역할인가」 가 이름보다 먼저다 (천강 요청 PPT 14). */
.prep-role {
  font-size: var(--g-fs-md); font-weight: 700; color: var(--g-text);
  line-height: 1.3;
}

/* ───── screens/report-practice.css ───── */
/* 「혼자 연습한 것」 — 학생의 말과 AI의 말을 눈으로 갈라 놓는다.
   섞이면 선생님이 AI 반응을 또래 반응으로 읽는다. */

.report-practice-list { display: flex; flex-direction: column; gap: var(--g-s2); }
.report-practice-hint,
.report-practice-none {
  margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); line-height: 1.6;
}
.report-practice-one {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); overflow: hidden;
}
.report-practice-row {
  display: flex; align-items: baseline; gap: var(--g-s3); width: 100%;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--g-fs-sm); text-align: left; padding: 10px var(--g-s3);
}
.report-practice-row:hover .u-row-main { text-decoration: underline; }
.report-practice-turns {
  display: flex; flex-direction: column; gap: var(--g-s3);
  border-top: 1px solid var(--g-border); background: var(--g-sunk);
  padding: var(--g-s3);
}
.report-practice-turn { display: flex; flex-direction: column; gap: 6px; }
.report-practice-me,
.report-practice-ai {
  border-radius: var(--g-r-sm); padding: 8px var(--g-s3);
}
.report-practice-me { background: var(--g-panel); border: 1px solid var(--g-border); }
.report-practice-ai {
  background: transparent; border: 1px dashed var(--g-border-strong);
  margin-left: var(--g-s4);
}
.report-practice-who {
  display: block; font-size: 12px; color: var(--g-muted); margin-bottom: 3px;
}
.report-practice-body {
  margin: 0; font-size: var(--g-fs-sm); line-height: 1.65; white-space: pre-wrap;
}
.report-practice-say { margin: 0; font-size: 12.5px; color: var(--g-muted); }

/* ───── screens/report.css ───── */
/* 학생 평가 결과보고서 · 학생에게 보낼 피드백
   (천강 요청 PDF p.1 「점수 항목 구분」 · PPT 10 「피드백 상세 메뉴」).

   항목을 «따로» 세운다. 카드 하나가 항목 하나다 — 붙여 놓으면
   「그래서 몇 점」 만 남는다. 수준에는 색으로 서열을 매기지 않는다.
   낮다고 빨강이면 그건 성적표다. */

.report-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: var(--g-s3); margin-bottom: var(--g-s3);
}
.report-title {
  margin: 0; font-size: var(--g-fs-xl); font-weight: 700; color: var(--g-text);
}
.report-sub { margin: 4px 0 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 기준 고르기 — 전체 기간인가, 그 차시인가. */
.report-scope {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: var(--g-s3) 0;
}
.report-scope-label { font-size: var(--g-fs-sm); color: var(--g-muted); }
.report-chip {
  border: 1px solid var(--g-border-strong); border-radius: 999px;
  background: var(--g-panel); color: var(--g-text);
  padding: 4px 12px; font-size: var(--g-fs-sm); cursor: pointer;
}
.report-chip:hover { background: var(--g-sunk); }
.report-chip.is-on {
  background: var(--g-action); border-color: var(--g-action); color: #FFFFFF;
}

/* 합계 — 이름을 정확히 붙인다. 「점수」 가 아니라 「수준 합계」 다. */
.report-total {
  display: flex; align-items: baseline; gap: var(--g-s3); flex-wrap: wrap;
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-sunk); padding: var(--g-s3) var(--g-s4);
}
.report-total-k { font-size: var(--g-fs-sm); color: var(--g-muted); }
.report-total-n {
  font-size: var(--g-fs-xl); font-weight: 700; color: var(--g-text);
  font-variant-numeric: tabular-nums;
}
.report-total-why { margin-left: auto; font-size: var(--g-fs-sm); color: var(--g-muted); }

.report-axes { display: flex; flex-direction: column; gap: var(--g-s3); }
.report-axis {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.report-axis-head {
  display: flex; align-items: baseline; gap: var(--g-s3); flex-wrap: wrap;
}
.report-axis-name {
  margin: 0; font-size: var(--g-fs-md); font-weight: 700; color: var(--g-text);
}
.report-axis-level {
  margin-left: auto; white-space: nowrap;
  font-size: var(--g-fs-sm); font-weight: 650; color: var(--g-muted);
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.report-axis-level.is-l4 {
  border-color: var(--g-action-line); color: var(--g-action);
  background: var(--g-action-bg);
}
.report-axis-trend {
  display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 650;
}
.report-axis-trend.is-up { color: var(--g-live); }
.report-axis-trend.is-down { color: var(--g-bad); }
.report-axis-trend.is-same,
.report-axis-trend.is-first { color: var(--g-faint); }
.report-axis-why, .report-axis-step {
  margin: 6px 0 0; font-size: var(--g-fs-sm); color: var(--g-muted);
  font-variant-numeric: tabular-nums;
}
.report-axis-step { color: var(--g-text); }

/* 채점 기준 — 문장 아래 접어 둔다 (2026-09-29) */
.report-axis-detail { margin-top: 6px; }
.report-axis-detail summary {
  cursor: pointer; font-size: var(--g-fs-sm); color: var(--g-action); font-weight: 600;
}
.report-axis-signal { margin: 6px 0; font-size: var(--g-fs-sm); color: var(--g-muted); }
.report-axis-ladder {
  margin: 0; padding-left: 18px; font-size: var(--g-fs-sm); color: var(--g-muted);
  display: flex; flex-direction: column; gap: 3px; font-variant-numeric: tabular-nums;
}
.report-axis-rung.is-now { color: var(--g-action); font-weight: 700; }

.report-hint { margin: 0 0 var(--g-s2); font-size: var(--g-fs-sm); color: var(--g-muted); }
.report-write {
  width: 100%; box-sizing: border-box; margin-top: var(--g-s2);
  padding: 8px 10px; font: inherit; font-size: var(--g-fs-sm); color: var(--g-text);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-paper); resize: vertical;
}
.report-write:focus { outline: 2px solid var(--g-action); outline-offset: 1px; }

/* 보내기 — 이 화면에서 되돌릴 수 없는 단 하나의 버튼. 그래서 하나만 크다. */
.report-send {
  margin-top: var(--g-s3); border: 0; border-radius: var(--g-r-md); cursor: pointer;
  background: var(--g-live); color: #FFFFFF;
  padding: 10px 20px; font-size: var(--g-fs-md); font-weight: 700;
}
.report-send:hover { filter: brightness(1.08); }
.report-send:disabled { opacity: 0.6; cursor: default; }
.report-say { margin: 8px 0 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

.report-sent { display: flex; flex-direction: column; gap: var(--g-s2); }
.report-sent-one {
  border: 1px solid var(--g-border); border-left: 3px solid var(--g-live);
  border-radius: var(--g-r-sm); background: var(--g-panel);
  padding: var(--g-s2) var(--g-s3);
}
.report-sent-when {
  display: flex; align-items: center; gap: var(--g-s2);
  font-size: var(--g-fs-sm); color: var(--g-muted);
}
.report-drop {
  margin-left: auto; cursor: pointer; font-size: var(--g-fs-sm);
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: var(--g-panel); color: var(--g-muted); padding: 2px 10px;
}
.report-drop:hover { color: var(--g-bad); border-color: var(--g-bad); }
.report-drop:disabled { opacity: 0.5; cursor: default; }
.report-sent-body {
  margin: 4px 0 0; font-size: var(--g-fs-sm); color: var(--g-text);
  white-space: pre-wrap;
}

/* 인쇄 — topics.css 의 활동지 인쇄와 같은 방식. */
.report-print {
  margin-left: auto; border: 1px solid var(--g-border-strong); cursor: pointer;
  border-radius: var(--g-r-sm); background: var(--g-panel); color: var(--g-text);
  padding: 5px 12px; font-size: var(--g-fs-sm);
}
.report-print:hover { border-color: var(--g-action); color: var(--g-action); }

@media print {
  body.is-printing * { visibility: hidden; }
  body.is-printing .report-paper,
  body.is-printing .report-paper * { visibility: visible; }
  body.is-printing .report-paper {
    position: absolute; inset: 0 auto auto 0; width: 100%;
    border: 0; padding: 0; margin: 0; background: #fff; color: #000;
  }
  body.is-printing .report-print { display: none; }
}

/* ───── screens/result.css ───── */
/* 평가·결과 — 2026-09-09 천강 시안 p.5b. `.result-*` 만 소유한다. */

.result-head {
  display: flex; align-items: center; gap: var(--g-s3);
  margin-bottom: var(--g-s3);
}
.result-back {
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: transparent; color: var(--g-muted); cursor: pointer;
  padding: 6px 12px; font-size: var(--g-fs-sm);
}
.result-title { margin: 0; font-size: var(--g-fs-lg); font-weight: 700; }
.result-loading, .result-empty { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 탭 — 밑줄로 지금 자리를 말한다 */
.result-tabs {
  display: flex; gap: var(--g-s4); flex-wrap: wrap;
  border-bottom: 1px solid var(--g-border); margin-bottom: var(--g-s5);
}
.result-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 2px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: var(--g-fs-md); color: var(--g-muted);
}
.result-tab:hover { color: var(--g-text); }
.result-tab.is-on {
  color: var(--g-live); font-weight: 700; border-bottom-color: var(--g-live);
}

.result-pane { display: flex; flex-direction: column; gap: var(--g-s5); }

/* 큰 숫자 넷 */
.result-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-s3);
}
@media (max-width: 760px) { .result-stats { grid-template-columns: repeat(2, 1fr); } }
.result-stat {
  display: grid; gap: var(--g-s1); justify-items: center; text-align: center;
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s5) var(--g-s3);
}
.result-stat-n {
  font-size: 30px; font-weight: 700; color: var(--g-live);
  font-variant-numeric: tabular-nums;
}
.result-stat-k { font-size: var(--g-fs-sm); color: var(--g-muted); }

.result-two {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-s4);
}
@media (max-width: 900px) { .result-two { grid-template-columns: 1fr; } }
.result-box {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4); min-width: 0;
}
.result-h { margin: 0 0 var(--g-s3); font-size: var(--g-fs-md); font-weight: 700; }
.result-sub { margin: 0 0 var(--g-s3); font-size: var(--g-fs-sm); color: var(--g-muted); }
.result-note {
  margin: var(--g-s3) 0 0; font-size: 12px; color: var(--g-muted); line-height: 1.6;
}

/* 막대 */
.result-bars { display: flex; flex-direction: column; gap: var(--g-s2); }
.result-bar-row {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) 44px;
  align-items: center; gap: var(--g-s2);
}
.result-bar-name {
  font-size: var(--g-fs-sm); color: var(--g-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.result-bar { height: 10px; border-radius: 999px; background: var(--g-sunk); overflow: hidden; }
.result-bar-fill {
  display: block; height: 100%; border-radius: 999px; background: var(--g-live-bright);
}
.result-bar-num {
  font-size: var(--g-fs-sm); color: var(--g-muted);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* 이름 칩 */
.result-chips { display: flex; gap: var(--g-s2); flex-wrap: wrap; }
.result-chip {
  font-size: var(--g-fs-sm); font-weight: 600;
  background: var(--g-action-bg); color: var(--g-action);
  border: 1px solid var(--g-action-line); border-radius: 999px;
  padding: 5px 13px;
}

/* 연결이 빠진 발언 */
.result-gaps { display: flex; flex-direction: column; gap: var(--g-s2); }
.result-gap {
  display: grid; gap: 2px;
  border-left: 3px solid var(--g-warn); border-radius: var(--g-r-sm);
  background: var(--g-sunk); padding: var(--g-s2) var(--g-s3);
}
.result-gap-who { font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-warn); }
.result-gap-body { font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 실제 오간 말 — 3차 요청 미처리 ①. <details> 로 접어 둔다. */
.result-transcript-box > summary { cursor: pointer; }
.result-transcript {
  display: flex; flex-direction: column; gap: var(--g-s2);
  margin-top: var(--g-s3); max-height: 420px; overflow-y: auto;
}
.result-transcript-row {
  border-radius: var(--g-r-sm); background: var(--g-sunk);
  padding: var(--g-s2) var(--g-s3);
}
.result-transcript-meta { display: flex; gap: var(--g-s2); align-items: baseline; }
.result-transcript-who { font-size: var(--g-fs-sm); font-weight: 700; }
.result-transcript-side { font-size: 11.5px; color: var(--g-muted); }
.result-transcript-body { font-size: var(--g-fs-sm); color: var(--g-text); margin-top: 2px; }

/* 루브릭 — 문장이 먼저, 숫자 근거는 접어서 (2026-09-29) */
.result-axes { display: flex; flex-direction: column; gap: var(--g-s3); }
.result-axis {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.result-axishead { display: flex; align-items: center; gap: var(--g-s3); flex-wrap: wrap; }
.result-axisname { font-weight: 700; font-size: var(--g-fs-sm); }
.result-axislv {
  font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  background: var(--g-sunk); color: var(--g-muted);
}
.result-axislv.is-l3, .result-axislv.is-l4 { background: var(--g-action-bg); color: var(--g-action); }
.result-axissentence { margin: var(--g-s2) 0 0; font-size: var(--g-fs-sm); line-height: 1.6; }

.result-axisdetail { margin-top: var(--g-s2); }
.result-axisdetail summary {
  cursor: pointer; font-size: var(--g-fs-sm); color: var(--g-action); font-weight: 600;
}
.result-axissignal {
  margin: var(--g-s2) 0 var(--g-s2); font-size: var(--g-fs-sm); color: var(--g-muted);
}
.result-axisladder {
  margin: 0; padding-left: 18px; font-size: var(--g-fs-sm); color: var(--g-muted);
  display: flex; flex-direction: column; gap: 3px;
}
.result-rung.is-now { color: var(--g-action); font-weight: 700; }

/* ───── screens/schedule.css ───── */
/* 스케줄 — 캘린더에서 날짜를 고르고 할 일을 적는다 (천강 요청 PPT 2).
   달력은 사이드바 폭 안에서 7칸이 고르게 나뉘어야 한다. */
.schedule-head { display: flex; align-items: center; gap: 8px; }
.schedule-title { flex: 1 1 auto; margin: 0; text-align: center;
  font-size: var(--g-fs-md); font-weight: 700; color: var(--g-text); }
.schedule-arrow {
  border: 1px solid var(--g-border); background: var(--g-panel); cursor: pointer;
  border-radius: var(--g-r-sm); width: 28px; height: 28px; line-height: 1;
  font-size: var(--g-fs-md); color: var(--g-text);
}
.schedule-arrow:hover { background: var(--g-sunk); }

.schedule-week, .schedule-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.schedule-week { margin-top: 8px; }
.schedule-wd {
  text-align: center; font-size: var(--g-fs-sm); color: var(--g-muted);
  padding-bottom: 2px;
}
.schedule-day {
  position: relative; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--g-r-sm); padding: 5px 0; font-size: var(--g-fs-sm);
  color: var(--g-text); min-height: 30px;
}
.schedule-day.is-blank { cursor: default; }
.schedule-day:hover:not(.is-blank) { background: var(--g-sunk); }
.schedule-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--g-border-strong); }
.schedule-day.is-on { background: var(--g-live); color: #FFFFFF; }
.schedule-day.is-on:hover { background: var(--g-live); }
.schedule-day-n2 {
  display: inline-block; margin-left: 3px; font-size: var(--g-fs-sm);
  font-weight: 700; color: var(--g-live);
}
.schedule-day.is-on .schedule-day-n2 { color: #FFFFFF; }

.schedule-picked {
  margin: 12px 0 6px; font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-text);
}
.schedule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.schedule-item {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--g-fs-sm); color: var(--g-text);
}
.schedule-item.is-done .schedule-body { text-decoration: line-through; color: var(--g-muted); }
.schedule-body { flex: 1 1 auto; word-break: break-word; }
.schedule-when { color: var(--g-muted); font-size: var(--g-fs-sm); flex: 0 0 auto; }
.schedule-tick, .schedule-drop {
  flex: 0 0 auto; width: 20px; height: 20px; cursor: pointer;
  border: 1px solid var(--g-border); background: var(--g-panel);
  border-radius: var(--g-r-sm); font-size: var(--g-fs-sm); line-height: 1;
  color: var(--g-text);
}
.schedule-tick.is-done { background: var(--g-ok); border-color: var(--g-ok); color: #FFFFFF; }
.schedule-drop { border-color: transparent; color: var(--g-muted); }
.schedule-drop:hover { color: var(--g-bad); }

.schedule-form { display: flex; gap: 6px; margin-top: 8px; }
.schedule-input {
  flex: 1 1 auto; min-width: 0; padding: 7px 9px; font: inherit;
  font-size: var(--g-fs-sm); color: var(--g-text);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-panel);
}
.schedule-save, .schedule-open {
  border: 0; border-radius: var(--g-r-sm); cursor: pointer;
  background: var(--g-live); color: #FFFFFF;
  padding: 7px 13px; font-size: var(--g-fs-sm); font-weight: 700;
}
.schedule-open { width: 100%; margin-top: 10px; }
.schedule-save:hover, .schedule-open:hover { filter: brightness(1.08); }
.schedule-empty, .schedule-say {
  margin: 6px 0 0; font-size: var(--g-fs-sm); color: var(--g-muted);
}

/* ───── screens/stage.css ───── */
/* 수업 흐름 진행 표시 — `.stage-*` 만 소유한다 (결정 0002 · CSS 소유권). */

.stage-bar {
  /* 메인 메뉴 아래 한 줄로 들어간다 (layout.css 의 .app-bars). */
  margin-top: var(--g-s3);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--g-s4); flex-wrap: wrap;
  padding: var(--g-s3) var(--g-s5);
  border-bottom: 1px solid var(--g-border);
  background: var(--g-panel);
}

.stage-steps { display: flex; align-items: center; gap: var(--g-s2); min-width: 0; }

.stage-step {
  display: inline-flex; align-items: center; gap: var(--g-s2);
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 10px; border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm); color: var(--g-muted);
}
.stage-step:disabled { cursor: default; }
.stage-step:not(:disabled):hover { background: var(--g-sunk); }

.stage-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; font-weight: 700;
  background: var(--g-sunk); color: var(--g-muted);
  border: 1px solid var(--g-border-strong);
}
.stage-label { font-weight: 600; }

/* 지나온 걸음 — 초록. 「끝났다」 는 뜻이다. */
.stage-step.is-done { color: var(--g-ok); }
.stage-step.is-done .stage-no {
  background: var(--g-ok); color: #FFFFFF; border-color: var(--g-ok);
}

/* 지금 걸음 — 주황. 화면에서 여기가 어디인지 한눈에. */
.stage-step.is-now { color: var(--g-live); }
.stage-step.is-now .stage-no {
  background: var(--g-live); color: #FFFFFF; border-color: var(--g-live);
}

/* 아직 안 간 걸음 — 흐리게. 다만 --g-faint 는 본문 크기에서 AA 미달이라
   쓰지 않는다 (2026-09-01 에 시각 게이트가 잡았다). */
.stage-step.is-todo { color: var(--g-muted); opacity: 0.65; }

.stage-line {
  width: 40px; height: 1px; flex: 0 0 auto;
  background: var(--g-border-strong);
}

.stage-right {
  display: flex; align-items: center; gap: var(--g-s3); min-width: 0;
}
.stage-topic {
  font-size: var(--g-fs-sm); color: var(--g-muted);
  border: 1px solid var(--g-border); border-radius: 999px;
  padding: 6px 14px; max-width: 46ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stage-status {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px;
  background: var(--g-sunk); color: var(--g-muted);
}
.stage-status.is-live { background: var(--g-live-bg); color: var(--g-live); }
.stage-status.is-done { background: #E7F0EA; color: var(--g-ok); }

@media (max-width: 720px) {
  .stage-line { width: 16px; }
  .stage-label { display: none; }
  .stage-topic { max-width: 22ch; }
}

/* ───── screens/thome.css ───── */
/* 교사 첫 화면 — 2026-09-09 천강 시안.
   이 파일은 `.thome-*` 만 소유한다 (결정 0002 · CSS 소유권). */

/* ── 히어로 ─────────────────────────────────────────────────────────── */
.thome-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--g-s5); flex-wrap: wrap;
  /* 본문(max-width 1200px)을 넘어 **창 폭을 따라간다**.
     본문이 왼쪽 정렬이므로 왼쪽 여백만 상쇄하면 0 에서 시작한다. */
  margin: calc(-1 * var(--g-s5)) calc(-1 * var(--g-s5)) var(--g-s5);
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  /* 바탕은 창 끝까지, 글자는 본문과 같은 선에서 끝난다.
     오른쪽 여백으로 본문 밖 공간을 메운다 — 창이 좁으면 그냥 기본 여백. */
  padding: var(--g-s6) var(--g-s5);
  padding-right: max(var(--g-s5),
    calc(100vw - var(--g-content-max) + var(--g-s5)));
  background: var(--g-hero); color: var(--g-hero-ink);
}
.thome-hero-text { min-width: 0; }
.thome-hero-day {
  margin: 0 0 var(--g-s2); font-size: var(--g-fs-sm);
  color: var(--g-hero-dim); letter-spacing: 0.02em;
}
.thome-hero-hello {
  margin: 0 0 var(--g-s3); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; text-wrap: balance;
}
.thome-hero-line {
  margin: 0 0 var(--g-s1); font-size: var(--g-fs-md); color: var(--g-hero-dim);
}
.thome-hero-act { flex: 0 0 auto; }
.thome-hero-cta {
  border: 0; border-radius: var(--g-r-md); cursor: pointer;
  background: var(--g-live); color: #FFFFFF;
  padding: 13px 22px; font-size: var(--g-fs-md); font-weight: 700;
}
.thome-hero-cta:hover { filter: brightness(1.08); }

/* ── 두 칸 ──────────────────────────────────────────────────────────── */
.thome-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--g-s5);
  align-items: start;
}
@media (max-width: 900px) { .thome-grid { grid-template-columns: 1fr; } }
.thome-main { display: flex; flex-direction: column; gap: var(--g-s4); min-width: 0; }
.thome-side { display: flex; flex-direction: column; gap: var(--g-s4); }

/* ── 지금 진행 중 — 화면에서 가장 눈에 띄는 하나 ────────────────────── */
.thome-live {
  display: grid; gap: var(--g-s2); width: 100%; text-align: left; cursor: pointer;
  border: 0; border-radius: var(--g-r-lg); padding: var(--g-s4) var(--g-s5);
  background: var(--g-live); color: #FFFFFF;
}
.thome-live:hover { filter: brightness(1.06); }
.thome-live-kicker { font-size: var(--g-fs-sm); }
.thome-live-title { font-size: var(--g-fs-lg); font-weight: 700; }
.thome-live-sub { font-size: var(--g-fs-sm); }
.thome-live-cta {
  justify-self: start; margin-top: var(--g-s2);
  background: rgba(255, 255, 255, 0.18); border-radius: 999px;
  padding: 6px 14px; font-size: var(--g-fs-sm); font-weight: 700;
}

/* ── 온보딩 — 처음 온 교사에게만 ────────────────────────────────────── */
.thome-onboard {
  position: relative; border: 1px solid var(--g-action-line);
  border-radius: var(--g-r-lg); background: var(--g-action-bg);
  padding: var(--g-s5);
}
.thome-onboard-x {
  position: absolute; top: var(--g-s3); right: var(--g-s3);
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--g-action); color: #FFFFFF; cursor: pointer; font-size: 13px;
}
.thome-onboard-title {
  margin: 0 0 var(--g-s2); font-size: var(--g-fs-lg);
  font-weight: 700; color: var(--g-action);
}
.thome-onboard-lead {
  margin: 0 0 var(--g-s4); font-size: var(--g-fs-sm); color: var(--g-muted);
}
.thome-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--g-s3); margin: 0 0 var(--g-s4); padding: 0; list-style: none;
}
@media (max-width: 700px) { .thome-steps { grid-template-columns: 1fr; } }
.thome-step {
  display: grid; gap: var(--g-s2); align-content: start;
  border: 1px solid var(--g-action-line); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s4);
}
.thome-step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--g-action); color: #FFFFFF; font-size: 12px; font-weight: 700;
}
.thome-step-title { font-size: var(--g-fs-md); }
.thome-step-body { font-size: var(--g-fs-sm); color: var(--g-muted); line-height: 1.55; }
.thome-onboard-cta {
  border: 0; border-radius: var(--g-r-md); cursor: pointer;
  background: var(--g-action); color: #FFFFFF;
  padding: 11px 18px; font-size: var(--g-fs-sm); font-weight: 700;
}

/* ── 최근 토론 ──────────────────────────────────────────────────────── */
.thome-recents { display: flex; flex-direction: column; gap: var(--g-s2); }
.thome-recent {
  display: flex; align-items: center; gap: var(--g-s3); width: 100%;
  text-align: left; cursor: pointer;
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.thome-recent:hover { border-color: var(--g-action); }
.thome-recent-main { display: grid; gap: 3px; flex: 1; min-width: 0; }
.thome-recent-title {
  font-size: var(--g-fs-md); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thome-recent-facts { font-size: var(--g-fs-sm); color: var(--g-muted); }

.thome-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--g-border-strong);
}
.thome-dot.is-live { background: var(--g-live); }
.thome-dot.is-paused { background: var(--g-warn); }
.thome-dot.is-completed, .thome-dot.is-closed { background: var(--g-ok); }

.thome-badge {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--g-sunk); color: var(--g-muted);
}
.thome-badge.is-live { background: var(--g-live-bg); color: var(--g-live); }
.thome-badge.is-paused { background: #FBF3DC; color: var(--g-warn); }
.thome-badge.is-completed, .thome-badge.is-closed { background: #E7F0EA; color: var(--g-ok); }

/* ── 우측 카드 ──────────────────────────────────────────────────────── */
.thome-card {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4);
}
.thome-card-title { margin: 0 0 var(--g-s3); font-size: var(--g-fs-md); font-weight: 700; }
.thome-card-sub {
  margin: var(--g-s4) 0 var(--g-s2); font-size: var(--g-fs-sm);
  font-weight: 700; color: var(--g-muted);
}
.thome-side-empty { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

.thome-week { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-s2); }
.thome-week-cell {
  display: grid; gap: 2px; justify-items: center; text-align: center;
  border-radius: var(--g-r-md); background: var(--g-sunk); padding: var(--g-s3);
}
.thome-week-cell b {
  font-size: var(--g-fs-xl); color: var(--g-live); font-variant-numeric: tabular-nums;
}
.thome-week-cell span { font-size: var(--g-fs-sm); color: var(--g-muted); }

.thome-rates { display: flex; flex-direction: column; gap: var(--g-s2); }
.thome-rate {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px;
  align-items: center; gap: var(--g-s2);
  border: 0; background: transparent; padding: 2px 0; cursor: pointer; text-align: left;
}
.thome-rate-name {
  font-size: var(--g-fs-sm); color: var(--g-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thome-bar { height: 8px; border-radius: 999px; background: var(--g-sunk); overflow: hidden; }
.thome-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--g-live-bright); }
.thome-rate-num {
  font-size: var(--g-fs-sm); color: var(--g-muted);
  text-align: right; font-variant-numeric: tabular-nums;
}

.thome-todos { display: flex; flex-direction: column; gap: var(--g-s3); }
.thome-todo {
  display: flex; gap: var(--g-s3); width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; padding: 0;
}
.thome-todo-icon {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background: var(--g-sunk); border: 2px solid var(--g-border-strong);
}
.thome-todo-icon.is-call { border-color: var(--g-action); }
.thome-todo-icon.is-group { border-color: var(--g-live); }
.thome-todo-icon.is-record { border-color: var(--g-ok); }
.thome-todo-main { display: grid; gap: 2px; min-width: 0; }
.thome-todo-main b { font-size: var(--g-fs-sm); }
.thome-todo-body { font-size: var(--g-fs-sm); color: var(--g-action); }
.thome-todo-why { font-size: 12px; color: var(--g-muted); }

.thome-classes { display: flex; flex-direction: column; gap: var(--g-s2); }
.thome-class {
  display: flex; align-items: center; gap: var(--g-s2); width: 100%;
  border: 0; background: transparent; padding: 3px 0; cursor: pointer; text-align: left;
}
.thome-class-name { flex: 1; font-size: var(--g-fs-sm); }
.thome-class-tail { font-size: var(--g-fs-sm); color: var(--g-muted); }

.thome-notice { margin: 0; font-size: 12px; color: var(--g-muted); line-height: 1.6; }

/* 신호등 — 진행 중인 토론이 지금 어떤 상태인가 (천강 요청 PPT 2).
   색만으로 가르지 않는다. aria-label 과 title 이 같은 말을 글로 준다. */
.thome-light {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, 0.14);
}
.thome-light.is-red { background: var(--g-bad); box-shadow: 0 0 0 3px #F7E3E4; }
.thome-light.is-yellow { background: var(--g-warn); box-shadow: 0 0 0 3px #FBF3DC; }
.thome-light.is-green { background: var(--g-ok); box-shadow: 0 0 0 3px #E7F0EA; }
.thome-light.is-off { background: var(--g-border-strong); }

/* 「자세히 보러가기 →」 (천강 요청 PPT 3).
   제목 줄 오른쪽 끝. 버튼처럼 보이면 새 토론 CTA 와 경쟁한다 — 글자만 둔다. */
.thome-secthead { display: flex; align-items: baseline; gap: var(--g-s3); }
.thome-secthead .u-h2 { flex: 1 1 auto; }
.thome-more {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-size: var(--g-fs-sm); font-weight: 650; color: var(--g-action);
}
.thome-more:hover { text-decoration: underline; }

/* 끝난 토론의 「누가 몇 번」 (천강 검수 2026-09-13).
   총합 아래 한 줄. 이름이 길어도 줄을 넘기지 않고 접는다. */
.thome-recent-who {
  display: block; margin-top: 2px;
  font-size: var(--g-fs-sm); color: var(--g-action);
  font-variant-numeric: tabular-nums;
}

/* ───── screens/today.css ───── */
/* 교사 「오늘」. .today-* 만 쓴다 (CSS 소유권 규칙). */

.today-title {
  font-size: var(--g-fs-xl); font-weight: 700;
  letter-spacing: -0.02em; margin: 0;
}

.today-head {
  display: flex; align-items: center; gap: var(--g-s3);
  margin-bottom: var(--g-s5);
}
.today-head .today-title { font-size: var(--g-fs-lg); }

.today-back {
  border: 1px solid var(--g-border-strong); background: transparent;
  color: var(--g-muted); padding: 6px 12px; border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm); cursor: pointer;
}
.today-back:hover { border-color: var(--g-action); color: var(--g-action); }

.today-stage { margin-left: auto; color: var(--g-muted); font-size: var(--g-fs-sm); }

.today-list {
  display: flex; flex-direction: column; gap: 1px;
  margin-top: var(--g-s4);
  background: var(--g-border); border: 1px solid var(--g-border);
  border-radius: var(--g-r-md); overflow: hidden;
}

.today-pick {
  display: flex; align-items: baseline; gap: var(--g-s3);
  padding: var(--g-s3) var(--g-s4);
  background: var(--g-panel); border: 0; cursor: pointer;
  text-align: left; width: 100%;
}
.today-pick:hover { background: var(--g-action-bg); }
.today-pick-title { font-weight: 620; }
.today-pick-meta { margin-left: auto; color: var(--g-muted); font-size: var(--g-fs-sm); }

.today-grid {
  display: grid; gap: var(--g-s5);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.today-col {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4) var(--g-s5) var(--g-s5);
}


/* 등급이 아니라 볼 곳이라는 것을 화면이 말한다.
   이 문장을 빼면 같은 목록이 점수표로 읽힌다. */
.today-notice {
  margin: 0 0 var(--g-s4); font-size: 12.5px; color: var(--g-muted);
  border-left: 2px solid var(--g-border-strong); padding-left: var(--g-s3);
}

.today-look {
  border-radius: var(--g-r-md); padding: var(--g-s3) var(--g-s4);
  margin-bottom: var(--g-s3);
}
.today-look-warn { background: #FBF6E7; }
.today-look-info { background: var(--g-action-bg); }
.today-look-ok   { background: #E7F0EA; }

.today-look-head {
  display: flex; align-items: baseline; gap: var(--g-s2);
  font-size: var(--g-fs-sm); font-weight: 650;
}
.today-look-warn .today-look-head { color: var(--g-warn); }
.today-look-info .today-look-head { color: var(--g-action); }
.today-look-ok   .today-look-head { color: var(--g-ok); }

.today-look-count { margin-left: auto; }
.today-look-names { margin-top: 4px; font-size: var(--g-fs-sm); color: var(--g-muted); }

.today-side { margin-bottom: var(--g-s4); }
.today-side-name {
  display: flex; gap: var(--g-s2);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--g-muted); text-transform: uppercase;
  margin-bottom: var(--g-s2);
}
.today-side-count { margin-left: auto; }

.today-msg {
  border-left: 3px solid var(--g-border-strong);
  padding: 2px 0 2px var(--g-s3);
  margin-bottom: var(--g-s2);
}
.today-msg-who { font-size: 12px; color: var(--g-muted); }
.today-msg-body {
  margin: 2px 0 0; font-size: var(--g-fs-sm);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.today-action {
  background: var(--g-action-bg); border: 1px solid var(--g-action-line);
  border-radius: var(--g-r-md); padding: var(--g-s4);
}
.today-action-title { font-weight: 680; color: var(--g-action); }
.today-action-why { margin-top: 4px; font-size: var(--g-fs-sm); color: var(--g-muted); }
.today-action-cta {
  margin-top: var(--g-s3); width: 100%;
  border: 0; border-radius: var(--g-r-md); padding: 10px;
  background: var(--g-action); color: var(--g-panel);
  font-size: var(--g-fs-sm); font-weight: 650; cursor: pointer;
}
.today-action-cta:disabled { background: var(--g-faint); cursor: default; }

.today-empty, .today-loading {
  color: var(--g-muted); font-size: var(--g-fs-sm); margin: 0;
}

/* 모둠 — 「지금 어디로 가야 하나」 가 3초 안에 보여야 한다.
   색 하나에 기대지 않는다: 순서 · 테두리 모양 · 글로 쓴 이유를 함께 쓴다.
   색약인 선생님에게도 같은 정보가 닿아야 한다. */
.today-teams { margin-bottom: var(--g-s5); }

.today-teamgrid {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.today-team {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.today-team.is-stalled {
  border: 2px solid var(--g-warn); background: #FBF6E7;
}
.today-team.is-slow { border-style: dashed; border-color: var(--g-border-strong); }

.today-team-head { display: flex; align-items: baseline; gap: var(--g-s2); }
.today-team-name { font-weight: 680; }
.today-team-count {
  margin-left: auto; font-size: 12.5px; color: var(--g-muted);
  font-variant-numeric: tabular-nums;
}

.today-team-why { margin-top: 2px; font-size: var(--g-fs-sm); color: var(--g-muted); }
.today-team.is-stalled .today-team-why { color: var(--g-warn); font-weight: 600; }

.today-team-quiet { margin-top: 4px; font-size: 12.5px; color: var(--g-warn); }
.today-team-silent { margin-top: 4px; font-size: 12px; color: var(--g-muted); }

/* 종례로 가는 버튼. 상세 머리 오른쪽 끝. */
.today-closing {
  border: 1px solid var(--g-action); background: transparent;
  color: var(--g-action); border-radius: var(--g-r-md);
  padding: 6px 14px; font-size: var(--g-fs-sm); font-weight: 620; cursor: pointer;
}
.today-closing:hover { background: var(--g-action); color: var(--g-panel); }

.today-audience {
  margin: var(--g-s3) 0 0; color: var(--g-muted);
  font-size: var(--g-fs-sm);
}

/* 실명 옆 별칭 — 학생 화면에는 이 이름으로 보인다 */
.today-msg-alias {
  margin-left: var(--g-s2);
  background: var(--g-sunk); border: 1px solid var(--g-border);
  border-radius: 999px; padding: 0 8px;
  font-size: var(--g-fs-sm); font-weight: 500; color: var(--g-muted);
}

/* ── 수업 중 화면 — 2026-09-09 천강 시안 p.5a ─────────────────────────── */
.today-live {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px;
  gap: var(--g-s4); align-items: start;
}
@media (max-width: 1100px) { .today-live { grid-template-columns: 1fr; } }
.today-left, .today-right {
  display: flex; flex-direction: column; gap: var(--g-s3);
}
.today-mid, .today-panel {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4); min-width: 0;
}
.today-h { margin: 0 0 var(--g-s3); font-size: var(--g-fs-md); font-weight: 700; }

/* AI 개입 — 2026-09-29 3차 요청서 ⑦. */
.today-ai-row { display: flex; flex-wrap: wrap; gap: var(--g-s2); align-items: center; }
.today-ai-level { padding: 4px 8px; border-radius: var(--g-r-sm); border: 1px solid var(--g-border); }
.today-ai-btn {
  padding: 4px 10px; border-radius: var(--g-r-sm); border: 1px solid var(--g-action-line);
  background: var(--g-action-bg); color: var(--g-action); font-weight: 600; cursor: pointer;
}
.today-ai-btn:disabled { opacity: .5; cursor: default; }
.today-ai-status { display: block; font-size: 12px; color: var(--g-muted); min-height: 1.2em; }
.today-ai-notes { display: flex; flex-direction: column; gap: var(--g-s2); margin-top: var(--g-s2); }
.today-ai-note {
  border: 1px dashed var(--g-border-strong); border-radius: var(--g-r-sm);
  padding: var(--g-s2) var(--g-s3);
}
.today-ai-note.is-auto { border-color: var(--g-action-line); }
.today-ai-note-kind {
  font-size: 11px; font-weight: 700; color: var(--g-action);
}
.today-ai-note-body { margin: 2px 0; }
.today-ai-note-when { font-size: 11px; color: var(--g-faint); }
.today-h-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--g-s3);
}
.today-h-row .today-h { margin-bottom: var(--g-s3); }
.today-avg {
  font-size: var(--g-fs-sm); font-weight: 700;
  background: var(--g-live-bg); color: var(--g-live);
  padding: 4px 12px; border-radius: 999px;
}

/* 경과 시간 — 수업 중에 흘깃 보는 값. 크게. */
.today-timer {
  display: grid; gap: var(--g-s1); justify-items: center;
  border-radius: var(--g-r-lg); padding: var(--g-s4);
  background: var(--g-hero); color: var(--g-hero-ink);
}
.today-timer-label { font-size: var(--g-fs-sm); color: var(--g-hero-dim); }
.today-timer-value {
  font-size: 34px; font-weight: 700; color: var(--g-live);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.today-timer-off { font-size: 12px; color: var(--g-hero-dim); }

/* 지금 갈 곳 — 화면에서 가장 눈에 띄는 하나 */
.today-move {
  display: grid; gap: var(--g-s2); width: 100%; text-align: left;
  border: 0; cursor: pointer; font: inherit;
  border-radius: var(--g-r-lg); padding: var(--g-s4);
  background: var(--g-live); color: #FFFFFF;
}
.today-move:hover { filter: brightness(1.06); }
.today-move:focus-visible { outline: 3px solid var(--g-action); outline-offset: 2px; }
/* 「눌러서 그 자리로」 — 이 줄이 없으면 카드가 눌리는 줄 모른다. */
.today-move-go { font-size: var(--g-fs-sm); font-weight: 700; opacity: 0.9; }
.today-move-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--g-s2);
}
.today-move-title { font-size: var(--g-fs-md); font-weight: 700; }
.today-move-when {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700;
  background: rgba(255, 255, 255, 0.2); padding: 3px 10px; border-radius: 999px;
}
.today-move-why { font-size: var(--g-fs-sm); }

/* 막대 — 모둠과 학생이 같은 모양을 쓴다 */
.today-bars { display: flex; flex-direction: column; gap: var(--g-s2); }
.today-bar-row, .today-person {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) 44px;
  align-items: center; gap: var(--g-s2);
}
.today-person {
  grid-template-columns: 76px 58px minmax(0, 1fr) 44px auto;
  padding: 3px 0;
}
.today-bar { height: 9px; border-radius: 999px; background: var(--g-sunk); overflow: hidden; }
.today-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--g-live-bright); }
.today-bar-row.is-stalled .today-bar-fill { background: var(--g-bad); }
.today-bar-row.is-slow .today-bar-fill { background: var(--g-warn); }
.today-bar-name, .today-person-name {
  font-size: var(--g-fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.today-bar-num {
  font-size: var(--g-fs-sm); color: var(--g-muted);
  text-align: right; font-variant-numeric: tabular-nums;
}
.today-person-team {
  font-size: 11.5px; color: var(--g-muted);
  background: var(--g-sunk); border-radius: 999px;
  padding: 2px 8px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.today-person.is-low .today-bar-fill { background: var(--g-warn); }
.today-low {
  font-size: 11px; font-weight: 700; color: var(--g-warn);
  background: #FBF3DC; border-radius: 999px; padding: 2px 8px;
}
.today-people { display: flex; flex-direction: column; gap: var(--g-s1); }

/* 지금 흐름 */
.today-flow { display: flex; flex-direction: column; gap: var(--g-s2); }
.today-flow-card {
  display: grid; gap: 3px;
  border-left: 3px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: var(--g-sunk); padding: var(--g-s2) var(--g-s3);
}
.today-flow-who { font-size: 11.5px; font-weight: 700; color: var(--g-action); }
.today-flow-body { margin: 0; font-size: var(--g-fs-sm); line-height: 1.5; }
.today-flow-when { font-size: 11px; color: var(--g-muted); }
.today-next { margin: 0; font-size: var(--g-fs-sm); }

/* 토론 종료 — 되돌리기 어려운 일이라 색을 따로 쓴다 */
.today-end {
  border: 1px solid var(--g-bad); border-radius: var(--g-r-md);
  background: transparent; color: var(--g-bad); cursor: pointer;
  padding: 11px 16px; font-size: var(--g-fs-sm); font-weight: 700;
}
.today-end:hover { background: var(--g-bad); color: #FFFFFF; }

/* 모둠 줄 — 색 말고도 구분한다 (테두리 두께 + 글로 쓴 이유).
   check-team-board.mjs 가 이 둘을 실제로 잰다. */
.today-team {
  display: grid; gap: var(--g-s1);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  padding: var(--g-s2) var(--g-s3);
}
.today-team.is-slow { border-width: 2px; border-color: var(--g-warn); }
.today-team.is-stalled { border-width: 3px; border-color: var(--g-bad); }
.today-team.is-stalled .today-bar-fill { background: var(--g-bad); }
.today-team.is-slow .today-bar-fill { background: var(--g-warn); }
.today-team-why { font-size: 11.5px; color: var(--g-muted); }

/* 학생 추가 — 수업 중에 쓴다. 누르는 횟수를 최소로. */
.today-add-names { display: flex; gap: var(--g-s2); flex-wrap: wrap; margin-bottom: var(--g-s3); }
.today-add-name {
  border: 1px solid var(--g-border-strong); border-radius: 999px;
  background: transparent; cursor: pointer;
  padding: 5px 12px; font-size: var(--g-fs-sm);
}
.today-add-name:hover { border-color: var(--g-action); }
.today-add-name.is-on {
  background: var(--g-action); color: #FFFFFF; border-color: var(--g-action);
}
.today-add-sides { display: flex; gap: var(--g-s2); flex-wrap: wrap; }
.today-add-side {
  border: 1px solid var(--g-live); border-radius: var(--g-r-sm);
  background: transparent; color: var(--g-live); cursor: pointer;
  padding: 7px 14px; font-size: var(--g-fs-sm); font-weight: 700;
}
.today-add-side:hover { background: var(--g-live); color: #FFFFFF; }
.today-add-side.is-watch { border-color: var(--g-border-strong); color: var(--g-muted); }
.today-add-side.is-watch:hover { background: var(--g-muted); color: #FFFFFF; }

/* 수업에 끼어들기 — 멈추고, 말한다 (천강 요청 요청서 p.1).
   되돌릴 수 없는 것은 「토론 종료」 하나뿐이라, 이 두 개는 조용한 색으로. */
.today-step {
  width: 100%; cursor: pointer; margin-bottom: var(--g-s2);
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: var(--g-panel); color: var(--g-text);
  padding: 9px 14px; font-size: var(--g-fs-sm); font-weight: 700;
}
.today-step:hover { background: var(--g-sunk); }
.today-step.is-on {
  background: var(--g-warn); border-color: var(--g-warn); color: #FFFFFF;
}
.today-step:disabled { opacity: 0.6; cursor: default; }

.today-sayrow { display: flex; gap: 6px; flex-wrap: wrap; }
.today-saywho {
  flex: 0 0 auto; padding: 8px 10px; font: inherit; font-size: var(--g-fs-sm);
  color: var(--g-text); border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-paper);
}
.today-saybox {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; font: inherit;
  font-size: var(--g-fs-sm); color: var(--g-text);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-paper);
}
.today-saybox:focus { outline: 2px solid var(--g-action); outline-offset: 1px; }
.today-saybtn {
  flex: 0 0 auto; border: 0; border-radius: var(--g-r-sm); cursor: pointer;
  background: var(--g-action); color: #FFFFFF;
  padding: 8px 14px; font-size: var(--g-fs-sm); font-weight: 700;
}
.today-saybtn:hover { filter: brightness(1.1); }
.today-saybtn:disabled { opacity: 0.6; cursor: default; }
.today-saybtn.is-quiet { background: var(--g-panel); color: var(--g-action); border: 1px solid var(--g-action-line); }

/* 「가보세요」 를 눌렀을 때 데려간 자리. 잠깐만 표시하고 지운다. */
.today-team.is-found, .today-person.is-found {
  outline: 3px solid var(--g-live); outline-offset: 2px;
  border-radius: var(--g-r-sm); background: var(--g-live-bg);
}

/* ───── screens/topics.css ───── */
/* 교사 「주제」. .topics-* 만 쓴다 (CSS 소유권 규칙). */

.topics-count { color: var(--g-muted); font-size: var(--g-fs-sm); margin: 0 0 var(--g-s3); }

.topics-filters {
  display: flex; flex-wrap: wrap; gap: var(--g-s2); margin-bottom: var(--g-s4);
}
/* 검색창 — 60장이 넘어가면 이게 먼저다 (천강 요청 PPT 8). */
.topics-search {
  flex: 1 1 240px; min-width: 0; padding: 8px 12px; font: inherit;
  font-size: var(--g-fs-sm); color: var(--g-text);
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-panel);
}
.topics-search:focus { outline: 2px solid var(--g-action); outline-offset: 1px; }
.topics-filter {
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-sm);
  background: var(--g-panel); color: var(--g-text);
  padding: 6px 10px; font-size: var(--g-fs-sm);
}

.topics-grid {
  display: grid; gap: var(--g-s3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.topics-card {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
  text-align: left; cursor: pointer;
}
.topics-card:hover { border-color: var(--g-action); }
.topics-card-title { font-weight: 650; line-height: 1.35; }
.topics-card-badge {
  font-size: 11px; font-weight: 650; color: var(--g-action);
  margin-top: 2px;
}
.topics-card-why { font-size: 12.5px; color: var(--g-muted); }
.topics-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

/* 난이도는 서열이 아니라 준비 정도다. 빨강·초록으로 좋고 나쁨을 만들지 않는다. */
.topics-diff, .topics-tag {
  font-size: 11.5px; border-radius: var(--g-r-sm); padding: 1px 7px;
  border: 1px solid var(--g-border-strong); color: var(--g-muted);
  white-space: nowrap;
}
.topics-diff.is-d1 { border-style: dotted; }
.topics-diff.is-d2 { border-style: solid; }
.topics-diff.is-d3 { border-style: double; }

.topics-head { display: flex; align-items: center; gap: var(--g-s3); }
.topics-print {
  margin-left: auto;
  border: 1px solid var(--g-border-strong); background: var(--g-panel);
  color: var(--g-text); border-radius: var(--g-r-md);
  padding: 6px 12px; font-size: var(--g-fs-sm); cursor: pointer;
}
.topics-print:hover { border-color: var(--g-action); color: var(--g-action); }

/* 활동지. 화면에서는 카드로, 종이에서는 이것만 나간다. */
.topics-paper {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4) var(--g-s5);
  margin-bottom: var(--g-s5);
}

.topics-paper-head {
  border-bottom: 2px solid var(--g-text);
  padding-bottom: var(--g-s3); margin-bottom: var(--g-s4);
}
.topics-paper-title {
  margin: 0 0 var(--g-s3); font-size: var(--g-fs-xl);
  letter-spacing: -0.02em; line-height: 1.3;
}
.topics-paper-who { display: flex; gap: var(--g-s4); flex-wrap: wrap; }

.topics-writeline { display: flex; align-items: baseline; gap: 6px; flex: 1 1 130px; }
.topics-writeline-label { font-size: 12.5px; color: var(--g-muted); white-space: nowrap; }
.topics-writeline-rule {
  flex: 1; border-bottom: 1px solid var(--g-border-strong); height: 1.1em;
}

/* 학생이 쓰는 칸. 줄이 없으면 활동지가 아니라 안내문이다. */
.topics-write { margin-top: var(--g-s4); }
.topics-write-label { font-size: var(--g-fs-sm); font-weight: 650; margin-bottom: 6px; }
.topics-write-rule {
  border-bottom: 1px solid var(--g-border-strong);
  height: 1.9em;
}

.topics-seednote {
  margin: var(--g-s3) 0 0; font-size: 12px; color: var(--g-muted);
}
.topics-why { margin: 0 0 var(--g-s3); color: var(--g-muted); }
.topics-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--g-s4); }

.topics-seeds {
  display: grid; gap: var(--g-s4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.topics-seed-head {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--g-muted); margin-bottom: 4px;
}
.topics-seed-list { margin: 0; padding-left: 1.1em; font-size: var(--g-fs-sm); }
.topics-seed-list li { margin-bottom: 3px; }

.topics-standard {
  margin: var(--g-s4) 0 0; font-size: 12.5px; color: var(--g-muted);
  border-top: 1px dashed var(--g-border-strong); padding-top: var(--g-s3);
}

.topics-mats { display: flex; flex-direction: column; gap: var(--g-s3); }

.topics-mat {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
/* 승인 전 자료는 한눈에 달라 보여야 한다 — 「올렸으니 됐겠지」 를 막는다. */
.topics-mat.is-waiting { border-style: dashed; border-color: var(--g-warn); }

.topics-mat-head { display: flex; align-items: baseline; gap: var(--g-s2); }
.topics-mat-title { font-weight: 620; }
.topics-mat-state { margin-left: auto; font-size: 12px; color: var(--g-muted); }
.topics-mat.is-waiting .topics-mat-state { color: var(--g-warn); }
.topics-mat-body { margin: 4px 0 0; font-size: var(--g-fs-sm); }
.topics-mat-src { margin-top: 4px; font-size: 12px; color: var(--g-muted); word-break: break-all; }

.topics-approve {
  margin-top: var(--g-s3);
  border: 1px solid var(--g-action); background: var(--g-action);
  color: var(--g-panel); border-radius: var(--g-r-md);
  padding: 6px 14px; font-size: var(--g-fs-sm); font-weight: 650; cursor: pointer;
}
.topics-approve.is-on {
  background: transparent; color: var(--g-muted);
  border-color: var(--g-border-strong);
}

/* 활동지 인쇄.
   2026-08-25: 예전에는 `.app-shell { display: none }` 으로 메뉴를 지웠는데
   **활동지가 그 안에 들어 있어서 종이가 백지로 나왔다.** 조상을 숨기면
   자식도 같이 죽는다. 그래서 조상은 남기고 «보이지 않게» 만 한다 —
   visibility 는 자식이 도로 켤 수 있다. */
@media print {
  body.is-printing * { visibility: hidden; }
  body.is-printing .topics-paper,
  body.is-printing .topics-paper * { visibility: visible; }

  body.is-printing .topics-paper {
    position: absolute; inset: 0 auto auto 0; width: 100%;
    border: 0; border-radius: 0; padding: 0; margin: 0;
    background: #fff; color: #000;
  }
  /* 종이에서는 잉크를 아낀다 */
  body.is-printing .topics-paper .topics-diff,
  body.is-printing .topics-paper .topics-tag { border-color: #999; color: #333; }
  body.is-printing .topics-write { break-inside: avoid; }
}

/* ── 주제 만들기·고치기 ───────────────────────────────────────────────── */
.topics-new {
  margin-left: auto;
  border: 0; border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel);
  padding: 8px 16px; font-size: var(--g-fs-sm); font-weight: 650; cursor: pointer;
}
.topics-new:hover { opacity: 0.9; }

.topics-edit {
  border: 1px solid var(--g-border-strong); background: var(--g-panel);
  color: var(--g-text); border-radius: var(--g-r-md);
  padding: 6px 14px; font-size: var(--g-fs-sm); cursor: pointer;
}
.topics-edit:hover { border-color: var(--g-action); color: var(--g-action); }

.topics-author { margin: 0 0 var(--g-s3); font-size: 12.5px; color: var(--g-muted); }
.topics-source { margin: 0 0 var(--g-s3); font-size: 12.5px; color: var(--g-muted); }

.topics-form {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4) var(--g-s5) var(--g-s5);
  max-width: 640px;
}
.topics-formhint { margin: 0 0 var(--g-s4); font-size: var(--g-fs-sm); color: var(--g-muted); }

.topics-field { display: block; margin-bottom: var(--g-s3); }
.topics-field-label {
  display: block; font-size: 12.5px; font-weight: 620;
  color: var(--g-muted); margin-bottom: 4px;
}
.topics-in {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--g-border-strong); border-radius: var(--g-r-md);
  background: var(--g-panel); color: var(--g-text);
  padding: 9px 12px; font-size: var(--g-fs-sm); font-family: inherit;
}

.topics-formrow { display: flex; align-items: center; gap: var(--g-s3); margin-top: var(--g-s4); }
.topics-save {
  border: 0; border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel);
  padding: 9px 22px; font-size: var(--g-fs-sm); font-weight: 650; cursor: pointer;
}
.topics-save:disabled { background: var(--g-muted); cursor: default; }
.topics-cancel {
  border: 1px solid var(--g-border-strong); background: transparent;
  color: var(--g-text); border-radius: var(--g-r-md);
  padding: 9px 16px; font-size: var(--g-fs-sm); cursor: pointer;
}
.topics-formstatus { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

/* 선생님이 만든 카드는 목록에서 살짝 구분된다 */
.topics-card.is-mine { border-left: 3px solid var(--g-action); }

/* 이 주제로 토론 열기 — 고른 자리에서 바로 (천강 요청 PPT 8). */
.topics-open {
  border: 0; border-radius: var(--g-r-md); cursor: pointer;
  background: var(--g-live); color: #FFFFFF;
  padding: 9px 16px; font-size: var(--g-fs-sm); font-weight: 700;
}
.topics-open:hover { filter: brightness(1.08); }

/* ───── screens/watch.css ───── */
/* 참관인 중계·평가. .watch-* 만 쓴다. */

.watch-motion { color: var(--g-muted); margin: calc(var(--g-s4) * -1) 0 var(--g-s5); }

.watch-grid {
  display: grid; gap: var(--g-s5);
  grid-template-columns: minmax(320px, 1.4fr) minmax(280px, 1fr);
}
@media (max-width: 860px) { .watch-grid { grid-template-columns: 1fr; } }

.watch-log {
  max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--g-s3);
}

.watch-msg {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  background: var(--g-panel); padding: var(--g-s3) var(--g-s4);
}
.watch-msg-who {
  display: flex; gap: var(--g-s2); align-items: center;
  font-size: 12px; color: var(--g-muted); margin-bottom: 4px;
}
.watch-side {
  font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--g-sunk); color: var(--g-muted);
}
.watch-msg-body { margin: 0; font-size: var(--g-fs-sm); white-space: pre-wrap; }

.watch-vote {
  border: 1px solid var(--g-border); border-radius: var(--g-r-lg);
  background: var(--g-panel); padding: var(--g-s4) var(--g-s5) var(--g-s5);
  margin-bottom: var(--g-s5);
}


.watch-picks { display: flex; gap: var(--g-s2); flex-wrap: wrap; margin-bottom: var(--g-s3); }

.watch-pick {
  border: 1px solid var(--g-border-strong); background: transparent;
  color: var(--g-muted); padding: 9px 20px; border-radius: var(--g-r-md);
  font-size: var(--g-fs-sm); font-weight: 620; cursor: pointer;
}
.watch-pick:hover { border-color: var(--g-action); color: var(--g-action); }
.watch-pick.is-on {
  background: var(--g-action); border-color: var(--g-action); color: var(--g-panel);
}

.watch-comment {
  width: 100%; resize: vertical;
  padding: var(--g-s3); border-radius: var(--g-r-md);
  border: 1px solid var(--g-border-strong);
}

.watch-row {
  display: flex; align-items: center; gap: var(--g-s3);
  margin-top: var(--g-s3);
}

.watch-send {
  border: 0; cursor: pointer; padding: 9px 20px;
  border-radius: var(--g-r-md);
  background: var(--g-action); color: var(--g-panel);
  font-size: var(--g-fs-sm); font-weight: 650;
}
.watch-send:disabled { background: var(--g-faint); cursor: default; }

.watch-status { margin: 0; font-size: var(--g-fs-sm); color: var(--g-muted); }

.watch-tally {
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  overflow: hidden;
}
.watch-tally-row {
  display: flex; justify-content: space-between;
  padding: var(--g-s3) var(--g-s4);
  background: var(--g-panel);
  border-bottom: 1px solid var(--g-border);
  font-size: var(--g-fs-sm);
}
.watch-tally-row:last-child { border-bottom: 0; }
.watch-tally-n { font-weight: 650; color: var(--g-action); }