@import url("../common/theme.css");

/* ============================================================================
 * teacher.css — 교사용 앱에서 새로 생긴 화면만.
 *
 * 색·버튼·카드 기본형은 style.css(=app_multi 원본)를 그대로 쓴다. 여기서는
 * ①메인 탭 ②그룹번호 배정 ③프로젝트 목록·QR ④설정 화면만 정의한다.
 * 원본과 이름이 겹치지 않게 카드는 `.card2`, 탭은 `.mtabs`/`.mpane` 로 갈랐다.
 * 외부 폰트·CDN 없음(오프라인 동작).
 * ========================================================================= */

/* ── 상단 메인 탭 ─────────────────────────────────────────────────────── */
/* 좁아지면 줄을 바꾸지 않고 옆으로 민다 — 머리줄은 한 줄로 지킨다 */
.mtabs { display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0;
         overflow-x: auto; scrollbar-width: none; }
.mtabs::-webkit-scrollbar { display: none; }
.mtabs button { flex: 0 0 auto; white-space: nowrap; }
.mtabs button {
  background: transparent; color: var(--dim); border: 1px solid transparent;
  border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: var(--fs-tx);
}
.mtabs button:hover:not(.on) { background: var(--panel2); color: var(--tx); }
.mtabs button.on {
  background: var(--panel2); color: var(--tx); border-color: var(--line);
  border-bottom-color: var(--panel2); font-weight: 700;
}
.mtabs button b { font-weight: 400; font-size: var(--fs-mini); color: var(--dim); margin-left: 4px; }
.mtabs button.on b { color: var(--accent); }

header strong { font-size: var(--fs-h2); }
.hdrinfo { font-size: var(--fs-tx); color: var(--dim);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdrinfo.warn { color: var(--dim); }
/* 자리가 모자라면 학교·학년·반 표시부터 접는다 — 줄을 바꾸느니 감춘다 */
@media (max-width: 1439px) { .hdrinfo { display: none; } }

/* ★탭 본문은 좌우로 같은 만큼 떨어진다 (2026-08-20 대표 지정) — 벽에 붙어 있으면
 *   글이 화면 밖으로 이어지는 듯 보여, 어디까지가 한 화면인지 눈이 못 잡는다.
 *   안쪽에서 따로 주던 16px 들은 걷어냈다. 두 번 주면 탭마다 들쭉날쭉해진다. */
.mpane { display: none; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.mpane.on { display: block; }
/* 학교급 카드가 탭에 바짝 붙어 있었다 — 위아래로도 여백을 준다 (2026-08-20 대표 지정) */
.mpane[data-mpane="projects"] { padding-top: var(--pad-x); padding-bottom: 24px; }

.subbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 0;
}

/* ── 두 칸 배치 ───────────────────────────────────────────────────────── */
.tcols {
  display: grid; grid-template-columns: minmax(340px, 460px) 1fr;
  gap: 14px; padding: 14px 0 24px; align-items: start;
}
@media (max-width: 1080px) { .tcols { grid-template-columns: 1fr; } }
.tcol-l, .tcol-r { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.card2 { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.card2 > h2 {
  margin: 0; padding: 10px 13px; font-size: var(--fs-tx); background: var(--panel2);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
}
.card2 > h2 button { padding: 4px 10px; font-size: var(--fs-tx); }
.card2 .body { padding: 13px; }

.steps { margin: 0; padding-left: 20px; font-size: var(--fs-tx); line-height: 1.9; color: var(--tx); }
.steps code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: var(--fs-tx); }

/* ── 그룹번호 배정 ──────────────────────────────────────────────────────
   ★2026-08-20 — 어두운 판을 걷어냈다. 본문에서 유일하게 검은 상자라 화면이
     둘로 갈려 보였다. 옅은 회색 면 + 얇은 회색 선이면 충분히 「머리줄」로 읽힌다. */
.bigstep {
  background: var(--subtle); color: var(--tx);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 14px; margin-bottom: 12px; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 10px 16px; min-height: 56px;
}
.bigstep .stepno { font-size: var(--fs-h2); font-weight: 700; }
.bigstep .stepgroup { font-size: var(--fs-tx); color: var(--dim); }
.bigstep .stepgroup b { font-family: var(--font-ui); font-size: var(--fs-h1); color: var(--acc); }
.bigstep .stepwhat { font-size: var(--fs-tx); color: var(--dim); width: 100%; }
.bigstep .okbig { color: var(--ok); font-size: var(--fs-h2); }

button.big { padding: 12px 22px; font-size: var(--fs-h2); }

.prog { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; margin: 12px 0 6px; }
.prog > span { display: block; height: 100%; width: 0; background: var(--ok); transition: width .25s; }

.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.team { border: 1px solid var(--line); border-radius: 8px; padding: 9px; background: var(--panel); }
.team.now { border-color: transparent; background: var(--accent-soft); }
.team.full { background: var(--ok-soft); border-color: transparent; }
.team-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.team-h b { font-size: var(--fs-tx); }
.team-n { margin-left: auto; font-family: var(--font-ui); font-size: var(--fs-tx); color: var(--dim); }
.team-row { display: flex; gap: 6px; flex-wrap: wrap; }
.cubecell {
  flex: 1 1 46px; min-width: 46px; border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 4px; text-align: center; background: var(--subtle);
}
.cubecell b { display: block; font-family: var(--font-ui); font-size: var(--fs-h2); color: var(--dim); }
.cubecell span { display: block; font-size: var(--fs-mini); color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 끝난 칸 = 초록 「완료」 */
.cubecell.ok { border-style: solid; border-color: transparent; background: var(--ok-soft); }
.cubecell.ok b { color: var(--ok); }
.cubecell.ok span { color: var(--ok); font-weight: 700; }

/* ★지금 차례 = **선명한 파란 버튼** (2026-08-10 사용자: 노랑은 눈에 안 띈다).
 * ⚠️연한 색 **채움**으로는 안 된다 — 대기 칸(var(--subtle))·완료 칸(var(--ok-soft))이 모두 옅은 색이라
 *   같이 묻힌다. 그래서 **진한 파랑으로 꽉 채우고 글자를 흰색**으로 뒤집었다.
 *   격자에서 유일하게 어두운 칸이 되므로 멀리서도 바로 짚인다. */
.cubecell.now {
  border-style: solid; border-color: transparent; background: var(--acc);
  cursor: pointer; box-shadow: none;
}
.cubecell.now b { color: #ffffff; }
.cubecell.now span { color: #ffffff; font-weight: 700; }
.cubecell.now:hover { background: var(--acc); border-color: var(--acc-ink); }
.cubecell.now:active { transform: translateY(1px); }
/* 연결 절차가 도는 동안 — 두 번 눌러 창이 겹치는 것을 막는다(onclick 도 함께 뗀다) */
.cubecell.now.busy { cursor: progress; opacity: .75; box-shadow: none; }

.loglite {
  height: 190px; overflow-y: auto; background: var(--subtle); color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-family: var(--font-ui); font-size: var(--fs-tx);
}
.loglite div { padding: 1px 0; border-bottom: 1px solid var(--line); white-space: pre-wrap; word-break: break-all; }
.loglite .ok { color: var(--ok); }
.loglite .er { color: var(--tx); font-weight: 600; }
.loglite .wr { color: var(--dim); }

/* ── 프로젝트 목록 ────────────────────────────────────────────────────── */
.plist { display: flex; flex-direction: column; gap: 6px; max-height: 68vh; overflow-y: auto; padding-right: 4px; }
.pitem {
  display: block; width: 100%; text-align: left; background: var(--panel);
  color: var(--tx); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
}
.pitem:hover:not(:disabled) { background: var(--panel2); }
.pitem.on { border-color: transparent; background: var(--acc-soft); box-shadow: none; }
.pitem-t { display: flex; gap: 8px; align-items: baseline; }
.pitem-s { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: var(--fs-mini); color: var(--dim); }
.pno { font-family: var(--font-ui); font-size: var(--fs-tx); color: var(--accent); flex: 0 0 auto; }
.pno.big { font-size: var(--fs-tx); }
.ptitle { font-size: var(--fs-tx); font-weight: 600; line-height: 1.4; }
.cubes {
  flex: 0 0 auto; border-radius: 999px; padding: 1px 8px; font-size: var(--fs-mini);
  border: 1px solid var(--line); color: var(--dim);
}
.cubes.c1 { color: var(--acc); border-color: var(--acc); }
.cubes.c2 { color: var(--dim); border-color: var(--warn); }
.cubes.c3 { color: var(--ok); border-color: var(--ok); }

.pdetail > h2 { line-height: 1.5; }
.meta { display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px; font-size: var(--fs-tx); margin-bottom: 14px; }
.meta .k { color: var(--dim); font-size: var(--fs-tx); }
.meta .v { line-height: 1.6; }

/* ── QR ───────────────────────────────────────────────────────────────── */
.qrwrap {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.qrwrap canvas { border: 1px solid var(--line); border-radius: 6px; flex: 0 0 auto; }
.qrside { flex: 1; min-width: 240px; }
.qrurl {
  font-family: var(--font-ui); font-size: var(--fs-mini); color: var(--dim);
  background: var(--panel2); border-radius: 6px; padding: 8px 10px; margin: 0 0 10px;
  word-break: break-all; line-height: 1.5;
}
.modal-box.qrbox { max-width: 92vw; }
.qrbig { padding: 16px; text-align: center; }
.qrbig canvas { border: 1px solid var(--line); border-radius: 6px; }
.qrbig .qrurl { display: inline-block; margin-top: 12px; text-align: left; max-width: 640px; }

/* ════════════════════════════════════════════════════════════════════════
 * 2026-08 색·글꼴 개편 — 학생 앱과 톤을 맞춘다
 *
 * 학생 앱(common/home.css · common/inquiry.css)과 같은 규약이다 —
 * 흰 바탕 · 인디고(var(--acc)) + 민트(var(--ok)) · 시스템 글꼴 · 인라인 SVG 아이콘.
 *
 * ★style.css 는 app_multi 원본이라 건드리지 않는다(원본이 바뀌면 덮어쓰는 파일이다).
 *   토큰과 마무리는 전부 여기 — teacher.css 는 style.css 뒤에 실린다.
 * ★**어두운 계기 구역은 그대로 둔다.** 그래프·게이지·로그·매트릭스가 어두운 것은
 *   취향이 아니라 2026-08-07 에 정한 실용적 결정이다(밝은 선 3가닥이 검은 바탕에서
 *   가장 잘 갈라진다). 여기서 바꾸는 것은 **문서 구역**뿐이다.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ★색·글꼴 토큰은 전부 common/theme.css 에 있다 (2026-08-20).
 *   여기서 색을 새로 만들지 않는다 — 만들면 두 곳이 어긋난다.
 *   여기 남는 것은 이 화면에만 있는 치수뿐이다. */
:root {
  /* 단추는 큐브랩과 같이 **진한 보라**다. 검정에 가까운 남색을 쓰면 팔레트 밖의
     여섯 번째 색이 하나 더 생긴다(2026-08-20). 물러나야 할 단추는 .ghost 로. */
  --btn: var(--acc);
  --btn-hover: var(--acc-ink);
  --btn-tx: #ffffff;
  --r: 14px;
}

body {
  font-family: var(--font-ui); font-size: var(--fs-tx);
  letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
}

/* ★글자 크기는 세 단계뿐이다 — 브라우저 기본값(h3 1.17em · small 0.83em)이
 *   그 사이에 네 번째·다섯 번째 크기를 몰래 만든다. 여기서 못 박아 둔다. */
h1, h2, h3, h4, h5, h6 { font-size: var(--fs-h2); font-weight: 700; }
small { font-size: var(--fs-mini); }
code, kbd, samp, pre { font-family: var(--font-num); font-size: var(--fs-tx); }

/* ★글꼴은 하나다 — 큐브랩과 같다 (2026-08-20 대표 지정). 숫자만 **폭을 고정**해
 *   자릿수가 바뀔 때 값이 들썩이지 않게 한다. 고정폭 글꼴을 따로 쓰지 않는다. */
.pno, .team-n, .cubecell b, .livetbl td.grp, .livetbl td.n, .kpi b,
.livehead .bigcode, .qrbig-code, .qrbig-type .tcode, .qrbig-type .taddr,
.lq-code b, .lq-url, .shorturl b, .startline .said b, .bigstep .stepgroup b,
.prepnav a b, .prephead .no, .qrurl, .qrbig-url, .mtabs button b, .qrbig-type .tno {
  font-variant-numeric: tabular-nums;
}

/* ── 컨트롤 ──────────────────────────────────────────────────────────── */
button {
  border-radius: 12px; font-weight: 600;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
button.primary { box-shadow: 0 2px 8px -2px rgba(79, 70, 229, .5); }
button.ghost, .card2 > h2 button { background: #fff; color: var(--tx);
  border: 1px solid var(--line); font-weight: 500; }
button.ghost:hover:not(:disabled), .card2 > h2 button:hover:not(:disabled) {
  background: var(--panel2); border-color: var(--line-strong); }
input[type=text], input[type=number], input[type=search], input[type=email], input[type=url], select, textarea {
  border-radius: 12px; background: var(--panel2); border: 1px solid var(--line);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none; background: #fff;
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, .16);
}
.lbl { color: var(--dim); font-weight: 600; }
.badge { border-radius: 999px; border-color: var(--line); font-weight: 600; }
.hint { font-size: var(--fs-tx); line-height: 1.65; }

/* ── 상단 바 ─────────────────────────────────────────────────────────── */
header {
  background: rgba(255, 255, 255, .9); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line); box-shadow: none; padding: 11px 20px;
}
header .mark {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--accent) 0%, var(--acc) 45%, var(--ok) 100%);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 12px -4px rgba(79, 70, 229, .55);
}
header .mark svg { width: 19px; height: 19px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
header strong { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.025em; }
header .tag {
  font-size: var(--fs-tx); font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 0; border-radius: 999px; padding: 3px 10px;
}
.hdrinfo { font-size: var(--fs-tx); }

/* ── 메인 탭 — 서류철 모양을 걷어내고 알약으로 ────────────────────────── */
.mtabs { gap: 2px; }
.mtabs button {
  border-radius: 10px; padding: 8px 14px; font-size: var(--fs-tx); font-weight: 500;
  border: 1px solid transparent; background: transparent; color: var(--dim);
}
.mtabs button:hover:not(.on) { background: var(--panel2); color: var(--tx); }
.mtabs button.on {
  background: var(--accent-soft); color: var(--accent); border-color: transparent;
  font-weight: 700;
}
.mtabs button b {
  font-family: var(--font-ui); font-size: var(--fs-mini); font-weight: 700;
  color: var(--dim); margin-left: 5px;
}
.mtabs button.on b { color: var(--accent); }

/* ── 카드 ────────────────────────────────────────────────────────────── */
.card, .card2 {
  border-radius: var(--r); border-color: var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card > h2, .card2 > h2 {
  background: #fff; border-bottom: 1px solid var(--line);
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; padding: 13px 15px;
}
.card .body, .card2 .body { padding: 15px; }
.steps code { background: var(--accent-soft); color: var(--accent); font-family: var(--font-ui); }

/* ── 프로젝트 목록 ───────────────────────────────────────────────────── */
.plist { gap: 8px; }
.pitem {
  border-radius: 12px; border-color: var(--line); padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.pitem:hover:not(.on) { background: #fff; border-color: var(--acc-line);
  box-shadow: 0 4px 14px -6px rgba(79, 70, 229, .3); }
.pitem.on {
  border-color: transparent; background: var(--accent-soft); box-shadow: none;
}
.pno {
  font: 700 var(--fs-tx)/1 var(--font-ui); color: var(--accent);
  background: var(--accent-soft); border-radius: 7px; padding: 5px 8px;
}
.pitem.on .pno { background: #fff; }
.pno.big { font-size: var(--fs-tx); padding: 6px 10px; }
.ptitle { font-size: var(--fs-h2); letter-spacing: -0.02em; }
.pitem-s { gap: 7px; font-size: var(--fs-tx); margin-top: 7px; }
/* 큐브 수·학년은 고르는 기준이 아니라 참고 정보라 색을 쓰지 않는다(학생 앱과 같은 결정) */
.cubes, .pgrade {
  flex: 0 0 auto; border-radius: 999px; padding: 2px 9px; font-size: var(--fs-mini); font-weight: 600;
  border: 1px solid var(--line-strong); color: var(--dim); background: #fff;
}
.cubes.c1, .cubes.c2, .cubes.c3 { color: var(--dim); border-color: var(--line-strong); }
.punit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── 프로젝트 상세 · QR ──────────────────────────────────────────────── */
.pdetail > h2 { gap: 10px; }
.meta { grid-template-columns: 96px 1fr; gap: 8px 14px; font-size: var(--fs-tx); }
.meta .k { color: var(--dim); font-weight: 600; }
/* ⓪ 수업 준비 탭 (2026-08-13 · 2026-08-14 세 토막으로 넓힘) */
.prepsteps { margin: 10px 0 0; padding-left: 20px; color: var(--dim); font-size: var(--fs-tx); line-height: 1.75; }
.prepsteps li { margin: 5px 0; }
.prepsteps b { color: var(--tx); }
button.linkish {
  background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--accent);
  text-decoration: underline; cursor: pointer; width: auto; min-width: 0;
}
#prepBadge { color: var(--dim); }

/* ══════════════════════════════════════════════════════════════════════════
   「수업 준비」 = 1 큐브 세팅 · 2 태블릿 인증 · 3 수업 순서 (2026-08-14)

   ★탭이 아니라 **한 페이지 세로 스크롤**이다 (사용자 지정). 준비는 순서대로 하는
     일이라 끊으면 안 된다 — 1 을 끝내고 2 로 내려가는 것이 곧 실제 작업 순서다.
   ★1·2·4·5 는 문서를 iframe 으로 끼운다(2026-08-18 에 「기본 사용법」이 1 로 들어와
     옛 1~4 가 2~5 로 밀렸다). 문서 경계가 곧 CSS 격리라, 안내문서.css 가
     여기 이름들과 겹쳐도(.card·.tabs·.note …) 서로 침범하지 않는다.
   ══════════════════════════════════════════════════════════════════════ */
.prepnav {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 0 13px; position: sticky; top: 0; z-index: 5;
  /* ⚠️투명하면 밑으로 지나가는 문서 글자가 비쳐 겹쳐 보인다 — 반드시 칠한다 */
  background: var(--bg);
}
.prepnav .sp { flex: 1; }
.prepnav .arw { color: var(--dim); font-size: var(--fs-mini); flex: 0 0 auto; }
.prepnav a {
  display: flex; align-items: baseline; gap: 7px; text-decoration: none;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--tx); font-size: var(--fs-tx); font-weight: 600;
}
.prepnav a:hover { border-color: var(--acc-line); background: var(--acc-soft); color: var(--accent); }
.prepnav a b {
  /* ★번호 배지는 연한 Gray 다 (2026-08-20 대표 지정) — 번호는 「몇 번째인가」를
     말할 뿐이라 색까지 쓸 일이 아니다. 값은 --faint 하나로 통일. */
  font-family: var(--font-ui); font-size: var(--fs-tx); color: #fff; background: var(--faint);
  border-radius: 999px; padding: 1px 8px; font-weight: 700;
}
.prepnav a small { color: var(--dim); font-weight: 400; font-size: var(--fs-mini); }

/* 한 토막 — 머리(번호·제목·새 창) + 본문. 스크롤로 내려와도 머리가 탭줄에 가리지
   않게 scroll-margin 을 준다(길잡이가 sticky 로 위를 덮고 있다). */
.prepstep { margin: 0 0 30px; scroll-margin-top: 62px; }
.prephead {
  display: flex; align-items: flex-start; gap: 13px; padding: 4px 2px 12px;
}
.prephead .sp { flex: 1; }
/* ★바깥(=이 앱)의 준비 단계 번호. 안쪽 문서의 단계 번호(0·1·2 …)와 **반드시** 달라
 *   보여야 한다 — 2026-08-14 이전에는 둘 다 보라색 네모라 「3 아래에 또 3」으로 읽혔다.
 *   여기는 **꽉 찬 보라 네모 + 옅은 테두리 고리**(무겁다 = 상위),
 *   문서 안쪽은 **속 빈 민트 동그라미**(가볍다 = 하위). 색·모양·채움이 모두 갈린다.
 *   (안쪽 규칙은 common/안내문서.css 의 `h2 .step` 에 있다.) */
.prephead .no {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
  /* ★토막 번호만 보라다 (2026-08-20 대표 지정) — 「1 S큐브 기본 사용법」은 이 탭에서
     가장 큰 마디라 다른 번호와 갈려야 한다. 길잡이 알약·문서 안쪽 번호는 회색. */
  background: var(--acc); color: #fff; font-family: var(--font-ui);
  font-size: var(--fs-h2); font-weight: 700; display: flex; align-items: center;
  justify-content: center; box-shadow: none;
}
.prephead h2 { margin: 0; font-size: var(--fs-h1); letter-spacing: -0.02em; }
.prephead p { margin: 3px 0 0; color: var(--dim); font-size: var(--fs-tx); line-height: 1.65; }

/* 끼운 문서 — 높이는 teacher.js 가 속 내용에 맞춰 늘린다(data-fit).
   자바스크립트가 막히거나 늦으면 이 min-height 가 버틴다. */
.docframe {
  /* ★테두리를 두지 않는다 (2026-08-20 대표 지정) — 문서가 「따로 떠 있는 창」처럼
     보였다. 앞의 번호·제목이 이미 토막을 가르므로 상자가 한 겹 더 필요 없다. */
  width: 100%; min-height: 520px; border: 0;
  background: #fff; display: block;
}
.prepgo { margin: 11px 2px 0; color: var(--dim); font-size: var(--fs-tx); }

.qrwrap { gap: 18px; padding-top: 16px; }
.qrwrap canvas { border-radius: 10px; border-color: var(--line); }
.qrurl { font-family: var(--font-ui); border-radius: 10px; background: var(--panel2);
  border: 1px solid var(--line); font-size: var(--fs-mini); }
.qrbig canvas { border-radius: 10px; }

/* ── 그룹번호 배정 ───────────────────────────────────────────────────── */
.team { border-radius: 12px; border-color: var(--line); }
.team.now { border-color: transparent; background: var(--accent-soft); box-shadow: none; }
.team.full { background: var(--ok-soft); border-color: transparent; }
.team-n { font-family: var(--font-ui); }
.cubecell { border-radius: 9px; background: var(--panel2); border-color: var(--line); }
.cubecell b { font-family: var(--font-ui); }
.cubecell.ok { border-color: transparent; background: var(--ok-soft); }
.cubecell.ok b, .cubecell.ok span { color: var(--ok); }
/* ★지금 차례 = 진하게 꽉 채운 칸. 대기(var(--subtle))·완료(var(--ok-soft)) 가 모두 옅어서,
 *   격자에서 유일하게 어두운 칸이 되어야 멀리서도 짚인다(2026-08-10 결정 유지). */
.cubecell.now {
  border-color: transparent; background: var(--accent);
  box-shadow: none;
}
.cubecell.now:hover { background: var(--acc-ink); border-color: var(--acc-ink); }
.bigstep { border-radius: 12px; }
.bigstep .stepgroup b { font-family: var(--font-ui); }
.prog { border-radius: 999px; }
.prog > span { border-radius: 999px; }
.loglite { border-radius: 12px; font-family: var(--font-num); }

/* ── 모달 ────────────────────────────────────────────────────────────── */
.modal { backdrop-filter: blur(3px); }
.modal-box {
  border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .3);
}
.modal-box > h2 { background: #fff; border-bottom: 1px solid var(--line); letter-spacing: -0.02em; }

/* ══════════════════════════════════════════════════════════════════════════
   ⑦ 진행 현황 (2026-08-12)

   ★이 화면의 색은 **신호등 하나**로 수렴한다. 나머지는 전부 조용해야
     한다 — 교실에서 선생님이 지나가며 흘깃 볼 때 눈에 걸려야 하는 것은
     「멈춘 모둠」 하나뿐이기 때문이다.
   ══════════════════════════════════════════════════════════════════════ */
.livehead .bigcode {
  font-family: var(--font-ui); font-size: var(--fs-h1); letter-spacing: .16em;
  color: var(--accent); background: var(--accent-soft);
  padding: 2px 14px; border-radius: 10px; line-height: 1.4;
}
.livehead h2 .badge { background: var(--panel2); color: var(--dim); }
.warnrow {
  background: var(--subtle); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; gap: 8px; flex-wrap: wrap;
}

/* 요약 숫자 */
.kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.kpi {
  flex: 1 1 120px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px;
}
.kpi b { display: block; font-size: var(--fs-h1); line-height: 1.2; color: var(--accent);
  font-family: var(--font-ui); }
.kpi span { font-size: var(--fs-mini); color: var(--dim); }
/* 멈춘 모둠이 있을 때만 붉어진다. 0 이면 조용하다 */
.kpi.bad { border-color: var(--line); background: var(--subtle); }
.kpi.bad b { color: var(--tx); }

/* 모둠 표 */
.livetbl { width: 100%; border-collapse: collapse; font-size: var(--fs-tx); }
.livetbl th {
  text-align: left; font-size: var(--fs-mini); color: var(--dim); font-weight: 700;
  padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.livetbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.livetbl tr.done td { background: var(--subtle); }
.livetbl td.grp { font-family: var(--font-ui); font-size: var(--fs-h2); font-weight: 700; }
.livetbl td.n { text-align: right; font-family: var(--font-ui); white-space: nowrap; }
.livetbl td.dim { color: var(--dim); font-size: var(--fs-tx); white-space: nowrap; }
.livetbl td.act { text-align: right; white-space: nowrap; }
.livetbl td.act button { padding: 4px 10px; font-size: var(--fs-tx); }

/* 신호등 — 이 파일에서 색을 쓰는 유일한 자리 */
.sg { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: middle; margin-right: 2px; }
.sg-idle  { background: var(--line-strong); }
.sg-work  { background: var(--accent); }
.sg-done  { background: var(--ok); }
.sg-rec   { background: var(--bad); animation: sgpulse 1.1s ease-in-out infinite; }
.sg-stuck { background: var(--tx); box-shadow: none; }
@keyframes sgpulse { 50% { opacity: .35; } }

.lbar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden;
  min-width: 54px; margin-top: 3px; }
.lbar > i { display: block; height: 100%; background: var(--accent); }

/* 문항별 채점 */
.graderow {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid var(--line);
}
.graderow .grp { font-family: var(--font-ui); flex: 0 0 74px; }
.graderow .lv { display: flex; gap: 4px; flex: 0 0 auto; }
.graderow .lv button { width: 40px; padding: 5px 0; }
.graderow input[type=text] { flex: 1; min-width: 140px; }
.grade-foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--line); background: var(--panel2);
}
.grade-foot .sp { flex: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   ① 수업 안내 탭 (2026-08-13)
   안내서 정본(scube_app/수업안내.html)을 iframe 으로 그대로 보여 준다 — 사본을
   만들지 않는다. 두 벌이 되면 반드시 어긋난다.
   ══════════════════════════════════════════════════════════════════════ */
.mpane[data-mpane="guide"] { position: relative; padding-top: 12px; padding-bottom: 14px; }
/* 안내서 머리줄 오른쪽에 얹는다 — 자리는 안내서 머리줄 높이(61px)의 한가운데다 */
.guideacts {
  position: absolute; top: 23px; right: 14px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
}
.guideframe {
  width: 100%; height: calc(100vh - 88px); min-height: 460px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   프로젝트 탭 (2026-08-13)

   ① 학교급 고르기 — **한 줄에 셋**, 그 아래 랩. 화면을 좌우로 가득 쓴다.
      안내문도, 오른쪽 빈 칸도 두지 않는다 — 카드 넷이 곧 안내다.
   ② 고른 뒤 — 프레임이 좌우를 가득 쓴다. 오른쪽 상세는 **프로젝트를 고른 뒤에야**
      나타난다(빈 칸이 자리를 차지하면 목록이 그만큼 좁아진다).
   ══════════════════════════════════════════════════════════════════════ */

/* ① 학교급 카드 — 한 줄에 셋 */
.lvpick { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lvp {
  text-align: left; font: inherit; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 21px 18px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
/* ⚠️`.lvp` 는 <button> 이라 style.css 의 `button:hover { background: var(--btn-hover) }`
 *   (계기판용 남색 var(--tx))가 그대로 걸린다 — 카드가 통째로 시커멓게 변했다.
 *   ⟹ 상태마다 배경·글자색을 **직접 못박는다.** 카드는 눌리는 판이지 버튼이 아니다. */
.lvp:hover:not(:disabled), .lvp:focus-visible, .lvp:active {
  background: var(--panel); color: var(--tx);
  border-color: var(--acc-line); box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .22);
  transform: translateY(-2px);
}
.lvp:hover .sym { background: var(--accent); color: #fff; }
.lvp:active { transform: translateY(0); box-shadow: 0 4px 12px -8px rgba(15, 23, 42, .3); }
.lvp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lvp .sym {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.lvp .sym .i, .labp .sym .i { width: 25px; height: 25px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lvp b { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.028em; color: var(--tx); }
.lvp b .g { font-size: var(--fs-tx); font-weight: 600; color: var(--dim);
  font-family: var(--font-ui); margin-left: 5px; }
.lvp .d { font-size: var(--fs-tx); color: var(--dim); line-height: 1.62; }
.lvp .n {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: var(--fs-tx); font-weight: 600; color: var(--dim);
}

/* ① S큐브 랩 — 학교급 셋과 성격이 다르므로 아래에 눕히고 민트로 가른다 */
.labp {
  width: 100%; margin-top: 14px; text-align: left; font: inherit; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 17px 21px;
  display: flex; align-items: center; gap: 17px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.labp:hover:not(:disabled), .labp:focus-visible, .labp:active {
  background: var(--panel); color: var(--tx);          /* ↑ 같은 이유 — 버튼 기본 배경을 막는다 */
  border-color: var(--line-strong);
  box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .22); transform: translateY(-2px);
}
.labp:hover .sym { background: var(--ok); color: #fff; }
.labp:active { transform: translateY(0); box-shadow: 0 4px 12px -8px rgba(15, 23, 42, .3); }
.labp:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.labp .sym {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid;
  place-items: center; background: var(--ok-soft); color: var(--ok);
}
.labtx { flex: 1; min-width: 0; }
.labtx b { display: block; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.028em; }
.labtx b .tag {
  font-size: var(--fs-mini); font-weight: 700; color: var(--ok); background: var(--ok-soft);
  border-radius: 999px; padding: 2px 9px; margin-left: 7px; vertical-align: 2px;
}
.labtx .d { display: block; margin-top: 3px; font-size: var(--fs-tx); color: var(--dim); line-height: 1.6; }
.labp .go { flex: 0 0 auto; font-size: var(--fs-tx); font-weight: 700; color: var(--ok);
  display: inline-flex; align-items: center; gap: 5px; }
.labp .go .i { width: 13px; height: 13px; stroke: currentColor; fill: currentColor; }

/* ② 목록 프레임 */
.stubox {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); overflow: hidden;
}
.stuhd {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--panel2);
  border-bottom: 1px solid var(--line); font-size: var(--fs-tx);
}
.stuhd .sp { flex: 1; }
.stuhd button { padding: 4px 11px; font-size: var(--fs-tx); }
.stufr {
  width: 100%; border: 0; display: block; background: #fff;
  height: calc(100vh - 140px); min-height: 480px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ③ 프로젝트 하나 — 목록을 덮는 전체 폭 화면 (2026-08-14 사용자 지정)

   ★옛 배치(목록 옆 400px 상세)를 버렸다. 프로젝트를 고른 뒤에 볼 것은 그 하나뿐인데
     화면의 3분의 2를 이미 볼 일 없는 목록이 차지하고 있었다.
   ★덮는 화면에는 **돌아가는 길이 항상 눈에 있어야** 한다 — 빵 부스러기와 ✕, Esc.
   ══════════════════════════════════════════════════════════════════════ */
.crumb {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 4px 2px 12px;
}
.crumb .sp { flex: 1; }
.crumb .crumb-s { color: var(--dim); font-size: var(--fs-tx); }
.crumb-a {
  background: none; border: 0; padding: 3px 7px; margin: 0; border-radius: 7px;
  font: inherit; font-size: var(--fs-tx); font-weight: 600; color: var(--dim);
  cursor: pointer; width: auto; min-width: 0;
}
.crumb-a:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.crumb-now {
  font-size: var(--fs-h2); letter-spacing: -0.02em; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw;
}
.crumb-x {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--line); color: var(--dim);
  font-size: var(--fs-h2); line-height: 1; min-width: 0;
}
.crumb-x:hover:not(:disabled) { background: var(--subtle); border-color: var(--line); color: var(--tx); }

/* 상세 카드 — 가로로 폈다. 왼쪽 정보 / 오른쪽 QR·단추.
   ※탐구 화면 미리보기 프레임은 두지 않는다 (2026-08-14 사용자 지정) —
     좁은 틀에 학생 화면을 축소해 넣어 봐야 읽히지 않는다. 「교사용으로 열기」가
     새 창에 크게 띄우고, 그쪽이 실제로 쓰이는 길이다. */
.pfull .pdetail { margin: 0; }
.pfull .pdetail .body {
  display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 22px; align-items: start;
}
.pfull .pdetail .meta { margin: 0; }
.pfull .pdetail .qrwrap { padding-top: 0; margin: 0; align-items: flex-start; }

/* ★개요 · QR · 수업 시작하기 = **세 칸**으로 눕힌다 (2026-08-20 대표 지정).
   예전에는 표 아래로 QR 이 떨어져 한 화면에 안 들어왔다. QR 옆에 「수업 시작하기」가
   붙어 있어야 「QR 은 아직 프로젝트 주소, 누르면 수업 방 주소로 바뀐다」가 눈에 잡힌다. */
.pfull .pdetail .body {
  /* 개요 표 · 「수업 시작하기」 · QR+세션 코드 — 왼쪽부터 붙여 놓는다.
     남는 자리는 오른쪽에 둔다(칸을 늘려 벌리지 않는다). */
  grid-template-columns: minmax(260px, 360px) auto auto;
  justify-content: start;
}
.rowwarn { grid-column: 1 / -1; margin: 2px 0 0; max-width: 900px; }
.pfull .pdetail .qrcol { align-self: start; }
/* QR 칸 — 테두리는 다른 곳과 같은 얇은 회색 한 겹. 모서리만 보이던 옛 자국을 없앤다. */
.qrcol canvas {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.startcol { min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.startcol .startline { margin: 0; }
.startcol > button.ghost { flex: 0 0 auto; }

/* 아직 수업을 안 열었을 때 — 칸이 둘이다 (개요 표 · 「수업 시작하기」 단추) */
.pfull .pdetail .body.nolive { grid-template-columns: minmax(260px, 360px) auto; }

/* 수업을 연 뒤 — 단추가 있던 자리에 세션 코드가 들어선다 */
/* 세션 코드 — QR **바로 아래**. 카메라가 없는 기기는 이 여섯 자리를 친다.
   QR 폭에 맞춰 눕히고, 교실 뒷줄에서 읽히도록 크게. */
.sesscode {
  display: flex; flex-direction: column; gap: 2px; margin-top: 8px;
  background: var(--acc-soft); border-radius: 12px; padding: 10px 14px 12px;
  text-align: center;
}
.sesscode .lbl { font-size: var(--fs-mini); color: var(--dim); font-weight: 600; }
.sesscode b {
  font-size: var(--fs-h1); line-height: 1.15; letter-spacing: .12em;
  color: var(--acc); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.qrcol { display: flex; flex-direction: column; align-items: stretch; }
.qrcol canvas { align-self: center; }

@media (max-width: 1100px) {
  .pfull .pdetail .body,
  .pfull .pdetail .body.nolive { grid-template-columns: minmax(240px, 340px) auto; }
}

@media (max-width: 1180px) {
  .lvpick { grid-template-columns: 1fr; }
  .pfull .pdetail .body { grid-template-columns: 1fr; }
}

/* ── `?only=` 로 한 탭만 띄웠을 때 (2026-08-15) ────────────────────────
 * 통합 학생 앱의 「큐브 점검」이 이 화면을 iframe 으로 끼운다. 머리말·탭줄은
 * 부모 화면에 이미 있으므로 여기서는 지운다 — 테두리 안에 또 탭줄이 있으면
 * 「남의 화면을 들여다보는 것」처럼 읽힌다. */
body[data-only] { padding-top: 0; }
body[data-only] header { display: none !important; }
body[data-only] .mpane { margin-top: 0; }

/* ── 큰 QR 화면 — 카메라 없는 기기용 「주소 + 수업 코드」 (2026-08-17) ────
 * 노트북·크롬북에는 카메라가 없거나 학교 정책으로 막혀 있다. 그 학생은 주소를 손으로
 * 친다. 전체 QR 주소를 크게 띄우는 것은 소용이 없다 — 한글이 퍼센트 인코딩되어
 * `?c=3%ED%95%99…` 이 되므로 아무도 못 친다.
 * ⟹ 치는 것은 **짧은 주소** 하나, 넣는 것은 **네 자리** 하나. 둘 다 교실 뒷줄에서 읽히게. */
.qrbig-row { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; }
.qrbig-type { text-align: left; min-width: 320px; max-width: 520px; }
.qrbig-type .cap { margin: 0 0 14px; font-size: var(--fs-tx); color: var(--dim); }
.qrbig-type .cap.dim { margin: 14px 0 0; font-size: var(--fs-tx); }
.qrbig-type .cap.warn { color: var(--warn, var(--warn)); font-weight: 600; }
.qrbig-type .tsec { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; }
.qrbig-type .tno {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent, var(--acc)); color: #fff;
  font: 700 var(--fs-h2)/1 var(--font-ui); margin-top: 6px;
}
.qrbig-type .tlbl { display: block; font-size: var(--fs-tx); color: var(--dim); margin-bottom: 2px; }
.qrbig-type .taddr {
  font: 700 var(--fs-big)/1.25 var(--font-ui);
  letter-spacing: -.01em; word-break: break-all; color: var(--tx, var(--tx));
}
.qrbig-type .tcode {
  font: 700 var(--fs-big)/1.05 var(--font-ui);
  letter-spacing: .12em; color: var(--accent, var(--acc));
}
.qrbig-type .tcode.none { font-size: var(--fs-h2); letter-spacing: 0; color: var(--dim); font-weight: 600; }
/* 한 단계짜리 — 번호 동그라미가 없다 (2026-08-17) */
.qrbig-type .tsec.one { margin-bottom: 8px; }
/* 짧은 주소는 숫자와 점·콜론이 섞인다 — 글자 사이를 벌리면 오히려 못 읽는다 */
.qrbig-type .tsec.one .tcode {
  font: 700 var(--fs-big)/1.15 var(--font-ui);
  letter-spacing: 0; word-break: break-all;
}
.qrbig-type .tlbl.dim { color: var(--faint, var(--faint)); font-size: var(--fs-tx); margin: 6px 0 0; }
@media (max-width: 900px) { .qrbig-row { flex-direction: column; } .qrbig-type { min-width: 0; } }

/* 프로젝트 개요의 「손으로 칠 때」 한 줄 (2026-08-17) */
.shorturl {
  margin: 6px 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.shorturl .lbl { font-size: var(--fs-tx); color: var(--dim); }
.shorturl b {
  font: 700 var(--fs-h1)/1.2 var(--font-ui);
  color: var(--accent, var(--acc)); letter-spacing: -.01em;
  background: var(--panel2); border-radius: 8px; padding: 3px 10px;
}

/* ★교실 TV 용 — 제목 · QR · 짧은 주소 셋뿐이다. 여백을 남기지 않는다 (2026-08-17) */
.qrbig { padding: 12px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 8px; }
.qrbig canvas { border: 1px solid var(--line); border-radius: 6px; display: block; }
.qrbig-code {
  font-family: var(--font-ui); font-size: var(--fs-big); letter-spacing: .04em; line-height: 1.25;
  color: var(--accent); background: var(--accent-soft); padding: 4px 18px; border-radius: 12px;
}
.qrbig-code.none { font-size: var(--fs-h2); color: var(--dim); background: var(--panel2); }
.qrbig-addr { margin: 0; font-size: var(--fs-tx); color: var(--dim); }
.qrbig-warn { margin: 0; font-size: var(--fs-tx); color: var(--dim); }
.qrbig-warn.warn { color: var(--dim); font-weight: 600; }


/* ── 머리줄의 「문구 고치기」 스위치 (2026-08-18) ─────────────────────────
   「수업 설정」 탭을 없애면서 갈 곳이 없어진 스위치를 여기 다시 놓았다.
   평소에는 눈에 띄지 않는 회색이고, 켜져 있을 때만 주황으로 알린다.
   숫자 자리에 「!」 가 뜨면 문구.json 을 못 읽은 것이다. */
.hdrcopy{font:inherit;font-size: var(--fs-tx);font-weight:600;
  padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--dim);
  white-space:nowrap;margin-right:10px}
.hdrcopy:hover{border-color:var(--accent);color:var(--accent)}
.hdrcopy b{font-weight:700;opacity:.75;margin-left:2px}
.hdrcopy.on{background:var(--acc);border-color:var(--acc);color:#fff}
.hdrcopy.on b{opacity:.9}
.hdrcopy.bad{background:var(--subtle);border-color:var(--line);color: var(--tx)}
.hdrcopy.bad b{opacity:1}

/* ══════════════════════════════════════════════════════════════════════
 * 프로젝트 화면 — 개요 · 수업 내용 · 수업 현황 (2026-08-19 사용자 지정)
 *
 * ★오른쪽 아래 단추 넷(수업 시작하기·QR 크게 보기·교사용으로 열기·QR 이미지 저장)을
 *   없앴다. 그 일들은 이제 —
 *     · 수업 열기      → 진행 모드를 고르거나 「수업 현황」을 열면 저절로
 *     · QR 크게 보기   → QR 아래 **돋보기**
 *     · 교사용으로 열기 → 「수업 내용」 탭이 그 화면을 그대로 품는다
 * ═══════════════════════════════════════════════════════════════════ */
/* ★단추임을 색으로 말한다 (2026-08-19 신고 — 「눌러야 되는 건지 인식이 안 된다」).
   회색 테두리는 빵 부스러기 글씨와 구별되지 않았다. 이 앱의 보라색을 그대로 입힌다. */
.crumb .crumb-view {
  font: inherit; font-weight: 700; font-size: var(--fs-tx); cursor: pointer;
  border: 1px solid transparent; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 4px 13px; margin-left: 6px; white-space: nowrap;
  transition: background .12s, color .12s;
}
.crumb .crumb-view:hover { background: var(--accent); color: #fff; }
/* 지금 보고 있는 화면 이름 — 단추와 헷갈리지 않게 글씨만 진하게 */
.crumb .crumb-now { color: var(--tx); font-weight: 700; }

/* 프로젝트 이름 줄 — 오른쪽 끝에 진행 방식 */
.pbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin: 0 0 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.pbar .sp { flex: 1; }
.pbar .pname { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; }

/* 자율진행 · 함께하기 — 라디오 둘. 고른 쪽만 색이 든다. */
.modepick { display: flex; gap: 8px; align-items: center; }
.modepick .mlbl { font-size: var(--fs-tx); color: var(--dim); margin-right: 2px; }
.modepick label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: var(--fs-tx); font-weight: 600; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: #fff;
}
.modepick label:hover { border-color: var(--accent); }
.modepick label.on { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.modepick input { accent-color: var(--accent); margin: 0; }
.modepick small { font-weight: 500; color: var(--dim); }

/* QR 아래 돋보기 */
.qrzoom {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: var(--fs-tx); font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--dim);
  border-radius: 8px; padding: 6px 12px;
}
.qrzoom:hover { border-color: var(--accent); color: var(--accent); }
.qrzoom svg { width: 15px; height: 15px; }

/* 「수업 내용」 — 학생이 보는 그 화면을 그대로 품는다 */
.pcontent { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.pcontent iframe { display: block; width: 100%; height: calc(100vh - 210px); min-height: 520px; border: 0; }

/* 팝업 안의 주소 한 줄 */
.qrbig-url {
  margin: 12px auto 0; max-width: 720px; word-break: break-all;
  font: var(--fs-tx)/1.5 var(--font-ui); color: var(--dim);
}
/* QR 과 돋보기를 한 줄로 세운다 */
.qrcol { display: flex; flex-direction: column; align-items: center; gap: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   수업 시작하기 · 수업 QR (2026-08-19 사용자 지정)

   ★두 화면 다 **교실에서 쓰는 화면**이다 —
     시작 팝업은 선생님이 3초 안에 채우고 넘어가야 하고,
     QR 팝업은 교실 뒷줄에서 보여야 한다. 그래서 글자가 크고 여백이 넉넉하다.
   ══════════════════════════════════════════════════════════════════════ */

/* 머리줄 상시 QR — 수업이 열려 있는 동안에만 보인다 */
.hdrqr {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent;
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--fs-tx); font-weight: 700; line-height: 1;
}
.hdrqr:hover { background: var(--accent, var(--acc)); color: #fff; }
.hdrqr svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.hdrqr b {
  font-family: var(--font-ui);
  letter-spacing: .12em; font-size: var(--fs-tx);
}

/* ── 수업 시작 팝업 ─────────────────────────────────────────────────── */
.modal-box.startbox { width: min(520px, 94vw); }
.startbody { padding: 18px 22px 20px; }
.startbody .frow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.startbody .frow .lbl {
  flex: none; width: 84px; font-size: var(--fs-tx); color: var(--dim, var(--dim));
}
.startbody .frow input {
  flex: 1; min-width: 0; font-size: var(--fs-h2); padding: 9px 12px;
  border: 1px solid var(--line, var(--line)); border-radius: 10px; background: #fff;
}
.startbody .frow input:focus {
  outline: none; border-color: var(--accent, var(--acc));
  box-shadow: 0 0 0 3px var(--accent-soft, var(--acc-soft));
}
/* 프로젝트 제목은 **고칠 수 없다** — 눈으로도 그렇게 보여야 한다 */
.startbody #stProject {
  background: var(--panel2, var(--subtle)); color: var(--dim, var(--dim));
  font-weight: 600; cursor: default;
}
.startbody .frow.btns { margin: 18px 0 0; }
.startbody .frow.btns .sp { flex: 1; }
.startbody .hint { margin: 0 0 4px; font-size: var(--fs-tx); line-height: 1.7; }
.startbody .hint.warn { color: var(--warn, var(--warn)); font-weight: 600; }

/* ── 수업 QR 팝업 (교실 TV) ─────────────────────────────────────────── */
.qrbig.lqbig { padding: 8px 16px 22px; }
.lq-what { margin: 0 0 12px; font-size: var(--fs-tx); color: var(--dim); }
.lq-code {
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
  margin-top: 16px;
}
.lq-code .lbl { font-size: var(--fs-tx); color: var(--dim, var(--dim)); }
.lq-code b {
  font-family: var(--font-ui);
  font-size: var(--fs-big); letter-spacing: .18em; line-height: 1.1;
  color: var(--accent, var(--acc));
}
.lq-url {
  margin: 10px 0 0; font-size: var(--fs-tx); color: var(--dim, var(--dim));
  word-break: break-all;
}
.lq-hint { margin: 14px auto 0; max-width: 560px; font-size: var(--fs-tx); color: var(--dim, var(--dim)); }
.lq-warn { margin: 10px auto 0; max-width: 560px; font-size: var(--fs-tx); color: var(--warn, var(--warn)); font-weight: 600; }

/* ── 개요의 「수업 시작하기」 ────────────────────────────────────────── */
.startline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 14px; padding: 12px 14px;
  border: 1px solid var(--line, var(--line)); border-radius: 12px;
  background: var(--panel2, var(--subtle));
}
.startline .big {
  font-size: var(--fs-h2); padding: 10px 20px; border-radius: 10px; font-weight: 700;
}
.startline .said { font-size: var(--fs-tx); color: var(--dim, var(--dim)); }
.startline .said b {
  font-family: var(--font-ui);
  letter-spacing: .14em; color: var(--accent, var(--acc)); font-size: var(--fs-h2);
}