/* 선생님 화면에만 쓰는 옷 (teacher.html 만 부릅니다).
*
* style.css 는 학생 화면과 함께 씁니다. 거기를 고치면 수업 중인 받아쓰기 화면까지
* 바뀌므로(HANDOFF 4-e), 선생님 화면에서 새로 생긴 것은 여기 둡니다. 색 · 둥글기 ·
* 그림자는 style.css 의 변수(--brand, --line, --radius …)를 그대로 따릅니다.
*/
/* ---- 차림표: 세 묶음 ---------------------------------------------------------
예전에는 열 개가 한 줄로 서 있고 줄마다 설명이 붙어, 무엇부터 눌러야 할지 한참
읽어야 했습니다. 묶음 이름을 달고 설명 줄은 접습니다(둘러보기의 메뉴 버블이 그
설명을 읽어 가므로 글은 남아 있습니다). */
.tnav .nav-sec {
display: block; padding: 12px 12px 4px; font-size: 11px; font-weight: 700;
letter-spacing: .08em; color: #a3a8af; text-transform: uppercase;
}
.tnav .nav-sec:first-child { padding-top: 4px; }
.tnav .nav-txt small { display: none; }
.tnav button { align-items: center; padding: 10px 12px; }
.tnav button svg { margin-top: 0; }
@media (max-width: 860px) {
.tnav .nav-sec { display: none; }
}
@media (orientation: landscape) and (max-height: 560px) and (min-width: 700px) {
.tnav .nav-sec { display: none; }
}
/* 그룹 고르개가 숨어도 오른쪽 단추는 오른쪽에 */
.toolbar .tb-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .tb-group .bubble-row { margin: 0; }
/* 폰: 그룹 칩 13개가 줄바꿈으로 300px 를 차지해 채점 목록이 화면 밖으로 밀렸습니다.
한 줄로 옆으로 밀리게 해서 세로 자리를 되돌립니다(고른 칩은 chipify 가 가운데로 옮김). */
@media (max-width: 640px) {
.toolbar .tb-group { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.toolbar .tb-group .bubble-row { flex-wrap: nowrap; overflow-x: auto; min-width: 0;
scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.toolbar .tb-group .bubble-row::-webkit-scrollbar { display: none; }
.toolbar .tb-group .bubble { flex: none; white-space: nowrap; }
.toolbar .tb-group .tb-label { flex: none; white-space: nowrap; }
}
/* 넓은 화면의 그룹 칩은 아래 «2026-10-22 개편» 의 한 줄 옆으로 밀기(teacher.html scrollRow)가 맡습니다.
(main 의 «두 줄 + N개 더» 접기와 둘이 같이 들어 있었는데, 줄이 늘 하나라 접기는 쓰이지 않아 2026-10-26 에 뺐습니다.) */
/* 카드 제목 옆의 작은 설명 */
.h-note { margin: 0 !important; font-size: 13px; font-weight: 500; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.card-head h2 { margin: 0; }
.card-head > button { margin-left: auto; }
/* 버블 한 단계 작은 것 (확인 표 · 거르개) */
.bubble.sm { padding: 5px 11px; font-size: 13px; }
/* 오늘 → 할 일에서 펼치는 칸(다음 권 배정 · 2026-10) */
.td-panel { margin: -2px 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint, #faf6f0); }
.nb-list { display: grid; gap: 4px; margin-bottom: 10px; }
.nb-row { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 3px; align-items: center; padding: 7px 2px; cursor: pointer; font-size: 14px; border-top: 1px solid var(--line); }
.nb-row:first-child { border-top: 0; }
.nb-row input { grid-row: span 2; }
.nb-books { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nb-row.off { cursor: default; opacity: .7; }
.nb-row input { width: 18px; height: 18px; margin: 0; }
.nb-arrow { color: var(--ink-soft); }
/* 선생님 한마디 (2026-10) */
.rmk-form { display: grid; gap: 8px; }
.rmk-in { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rmk-in select { flex: 0 1 280px; min-width: 160px; margin: 0; }
.rmk-in input { flex: 1 1 220px; min-width: 0; margin: 0; }
.rmk-seen { margin-left: auto; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.rmk-seen.on { color: #2e9e5b; font-weight: 700; }
.note-h .rmk-seen + .note-del { margin-left: 8px; }
.rmk-emo { font-size: 18px; margin-right: 6px; }
tr.remark-row > td { background: var(--tint); padding: 10px 12px 12px; }
.rmk-title { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.rp-remarks { margin: 6px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
/* 함께 풀기 (2026-10) -- TV 에 띄우는 판 */
.rm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rm-meta { display: grid; gap: 2px; min-width: 0; }
.rm-meta b { font-size: 16px; }
.rm-meta span { font-size: 13.5px; color: var(--ink-soft); }
.rm-acts { display: flex; gap: 6px; flex-wrap: wrap; }
/* 다 냈으면 «정답 공개» 가 몇 번 숨 쉬듯 빛납니다 -- 시계를 끝까지 기다리지 않아도 된다는 표시 */
.rm-acts .rm-ready { animation: rm-pulse 1.2s ease-in-out 3; }
@keyframes rm-pulse { 50% { box-shadow: 0 0 0 6px var(--brand-soft); } }
/* 몇 명 답했는지는 폰 리모컨 단추 띠에만 띄웁니다(노트북은 아래 아이 줄이 함께 보여서 필요 없음) */
.rm-acts-st { display: none; }
.rm-wait { text-align: center; padding: 28px 10px; display: grid; gap: 8px; justify-items: center; }
.qk { display: grid; gap: 8px; max-width: 640px; }
.qk-p { margin: 0; font-size: 15px; font-family: inherit; }
.qk-opts { display: grid; gap: 6px; }
.qk-row { display: grid; grid-template-columns: 22px 26px 1fr; align-items: center; gap: 8px; }
.qk-row input[type=radio] { width: 18px; height: 18px; margin: 0; }
.qk-l { font-weight: 800; color: var(--ink-soft); }
.qk-o { margin: 0; }
.qk-o[readonly] { background: var(--tint); font-weight: 800; text-align: center; max-width: 120px; }
.rm-quickadd { margin-top: 18px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line); display: grid; gap: 8px; }
.rm-qa-h { font-size: 14px; }
.rm-board:fullscreen .rm-quickadd { display: none; }
.rm-keys { margin: 14px 0 0; font-size: 13px; }
#rmTeamBar .team-bar { margin: 18px 0 0; }
.rm-board:fullscreen #rmTeamBar .team-bar { font-size: 24px; }
.rm-board:fullscreen .rm-keys { display: none; }
@media (max-width: 640px), (pointer: coarse) { .rm-keys { display: none; } }
/* 폰 = 리모컨 (2026-10): TV 에 띄워 두고 폰으로 넘깁니다. 단추는 화면 아래에 크게 붙이고, 지문은 접어 둡니다. */
@media (max-width: 640px) {
.rm-board .rm-top { display: contents; }
.rm-board .rm-acts { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 30; order: 99; margin-top: 12px;
display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 16px;
background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.rm-board .rm-acts > button { min-height: 52px; font-size: 15px; padding: 0 6px; }
.rm-board .rm-acts > #rmFull, .rm-board .rm-acts > #rmTvOpen { display: none; }
/* 🎲 한 명 뽑기는 위에 얇은 줄로 따로: 같은 칸에 넷이 들면 ‘정답 공개’ · ‘다음 문제’가 65px 로 줄고 두 줄로 꺾입니다
(뽑기를 잘못 누르면 TV · 그 아이 태블릿에 이름이 뜨니, 큰 단추 옆에 붙이지 않습니다). grid 로 한 줄을 다 주면 나머지가 14px 로 눌려 flex 로. */
.rm-board .rm-acts > button { flex: 1 1 0; }
.rm-board .rm-acts > #rmPick { flex-basis: 100%; order: -1; min-height: 40px; }
/* 폰에서는 띠가 보기를 덮어 아이 줄이 안 보이니, 단추 바로 위에 «몇 명 답했어요» 를 한 줄로 */
.rm-board .rm-acts > .rm-acts-st { display: block; flex-basis: 100%; order: -2; text-align: center; font-size: 14px; font-weight: 800; color: var(--brand-ink); }
.rm-board .rm-acts > .rm-acts-st:empty { display: none; }
.rm-board { display: flex; flex-direction: column; }
.rm-board .rm-passage { max-height: 22vh; font-size: 14px; }
.rm-board .rm-passage p { font-size: 15px; }
.rm-prompt { font-size: 30px; padding: 14px 6px; }
.rm-opt { grid-template-columns: 34px 1fr 40px; padding: 10px 12px 12px; }
.rm-letter { width: 32px; height: 32px; }
}
.rm-past { display: grid; grid-template-columns: 120px 150px minmax(0, 1fr) 110px 56px; align-items: center; gap: 10px; width: 100%;
text-align: left; padding: 10px 12px; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; min-height: 0;
color: var(--ink); /* 단추 기본 글자색(흰색)을 물려받으면 그룹 · 범위 글자가 안 보입니다 */ }
.rm-past b { font-weight: 700; }
.rm-past:first-child { border-top: 0; }
.rm-past:hover { background: var(--tint); }
.rm-past-d, .rm-past-n { color: var(--ink-soft); font-size: 13px; }
.rm-past-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-past-p { text-align: right; color: #237a47; } /* #2e9e5b 는 흰 바탕에 3.4:1 */
.rm-past-p.low { color: #c0392b; }
@media (max-width: 760px) { .rm-past { grid-template-columns: 1fr auto; } .rm-past-d, .rm-past-s { display: none; } .rm-past-n { grid-column: 1; } }
/* 가로 태블릿(893px 등): 다섯 칸 고정 폭(120+150+110+56)에 범위 칸이 39px 만 남아 글이 안 보였습니다. 날짜 칸을 접고 나머지를 줄입니다. */
@media (min-width: 761px) and (max-width: 1100px) {
.rm-past { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto auto; }
.rm-past-d { display: none; }
}
.rp-together { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
/* 선생님과 함께 한 수업 (2026-10-20) -- 리포트 종이의 한 칸. 바탕색은 인쇄에서 빠지는 일이 많아 왼쪽 띠로 묶습니다. */
.rp-class { margin: 0; padding: 4px 0 4px 30px; border-left: 4px solid var(--brand); font-size: 14.5px; line-height: 1.7; }
.rp-class li { word-break: keep-all; }
/* 수업 기록 카드: 함께 풀기에서 채웠다는 알림(아직 저장 전). */
.ls-from { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-size: 13.5px; line-height: 1.55; }
.rm-retry { display: block; margin: 8px 0 12px; }
.hw-now { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-size: 13.5px; cursor: pointer; }
.hw-now input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.rm-tv { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--tint); }
.rm-tv > div:first-child { display: grid; gap: 2px; flex: 1 1 240px; }
.rm-tv-more { flex-basis: 100%; font-size: 13.5px; }
.rm-tv-more summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; }
.rm-tv-code { display: grid; gap: 2px; justify-items: start; }
.rm-tv-big { font-size: 28px; font-weight: 900; letter-spacing: .14em; color: var(--brand-ink); }
/* 함께 풀기 고르기 (2026-11-05): 넓은 화면에서는 짧은 고르개(문제 수 · 방향 · 시간 · 팀 · 골든벨 · 버저)를 나란히.
한 줄에 하나씩이라 1366 화면에서 «교실 열기» 까지 2,500px 를 내려가야 했고, 오른쪽 절반은 늘 비어 있었습니다.
누구와 · 교실 · 무엇을 · 어떤 단어로 · 읽기 · 듣기는 버블이 길어 한 줄을 다 씁니다. 숨은 칸(.hidden)은 자리를 안 차지합니다. */
@media (min-width: 1100px) {
#rmSetup .auto-form { max-width: none; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 28px; row-gap: 14px; align-items: start; }
#rmSetup .auto-form > :is(:first-child, #rmNoBox, #rmKindBox, #rmSrcBox, #rmListenBox) { grid-column: 1 / -1; }
}
.rm-say { display: block; margin: 0 auto 6px; font-size: 22px; padding: 14px 28px; border-radius: 99px; }
.rm-spell { text-align: center; font-size: clamp(40px, 6vw, 72px); font-weight: 800; color: #2e9e5b; letter-spacing: .02em; margin: 6px 0 10px; }
.rm-typed { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rm-typed-w { padding: 6px 14px; border-radius: 99px; border: 1.5px solid #e2a0a0; background: #fdf0f0; font-size: 18px; }
.rm-typed-w.ok { border-color: #2e9e5b; background: #eef9f1; }
.rm-typed-w b { color: var(--ink-soft); font-size: 15px; }
.rm-clock { font-size: 26px; font-weight: 800; color: var(--brand-ink); min-width: 70px; text-align: center; }
.rm-clock.low { color: #c0392b; }
.rm-passage { max-width: 900px; margin: 0 auto 12px; padding: 18px 22px; border-radius: 14px; background: var(--tint); max-height: 40vh; overflow: auto; }
.rm-passage b { display: block; font-size: 20px; margin-bottom: 8px; }
.rm-passage p { margin: 0; font-size: clamp(17px, 1.9vw, 22px); line-height: 1.75; white-space: pre-wrap; }
.rm-tag { display: table; margin: 4px auto 0; padding: 3px 12px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; font-weight: 700; }
.rm-prompt.small { font-size: clamp(22px, 3vw, 34px); padding: 14px 10px 16px; }
.rm-perq { display: grid; gap: 6px; margin: 12px 0 6px; max-width: 860px; }
.rm-perq-h { font-size: 14px; }
.rm-perq-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px 44px 44px; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
.rm-perq-row.low { border-color: #e2a0a0; background: #fdf6f6; }
.rm-perq-n { font-weight: 800; color: var(--ink-soft); }
.rm-perq-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-perq-q small { color: #2e9e5b; font-weight: 700; }
.rm-perq-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.rm-perq-bar i { display: block; height: 100%; background: #2e9e5b; }
.rm-perq-row.low .rm-perq-bar i { background: #e07070; }
.rm-board:fullscreen .rm-passage p { font-size: clamp(22px, 2.4vw, 32px); }
@media (max-width: 640px) { .rm-perq-row { grid-template-columns: 36px minmax(0, 1fr) 40px; } .rm-perq-bar, .rm-perq-row > small { display: none; } }
.rm-wait b { font-size: 22px; }
.rm-wait span { color: var(--ink-soft); max-width: 520px; }
.rm-wait .rm-n { font-size: 18px; font-weight: 800; color: var(--brand-ink); }
.rm-wait .rm-missing { font-size: 13.5px; color: var(--ink-soft); max-width: 640px; }
/* 교실 방 (2026-10 둘째: 교실 이름): 모이는 동안 교실 이름을 옅은 알약 하나로 -- «교실» 작은 글씨 + 이름.
예전의 40px · 900 덩어리는 판에서 가장 시끄러웠습니다. TV(board.html .tv-room) · 아이 화면(.rc-room)과 같은 말투. */
.rm-wait .rm-no { display: inline-flex; align-items: baseline; gap: 10px; max-width: 100%; padding: 6px 20px 8px; border-radius: 999px;
background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-ink); }
.rm-wait .rm-no.hidden { display: none; }
.rm-wait .rm-no small { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--ink-soft); }
.rm-wait .rm-no span { font-size: 24px; font-weight: 800; color: var(--brand-ink); max-width: none; overflow-wrap: anywhere; }
/* 판 머리의 교실 이름(rmScope 앞) -- 같은 알약을 작게. */
.rm-room-tag { display: inline-block; font-size: .86em; font-weight: 800; color: var(--brand-ink); background: var(--brand-soft);
border: 1px solid var(--brand-line); padding: 1px 10px; border-radius: 999px; margin-right: 4px; vertical-align: 1px; }
/* 셋업의 교실 칩: 열린 교실은 이름 뒤 작은 점. 교실이 많으면(13개~) 촘촘한 격자 + 찾기 칸, 높이는 접어서 굴립니다. */
.rm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #277a4e); margin-left: 6px; vertical-align: 2px; }
.hint .rm-dot { margin: 0 2px 0 0; }
.rm-rooms .rm-room { white-space: nowrap; }
.rm-rooms.many { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); max-height: 196px; overflow: auto; }
.rm-rooms.many .rm-room { overflow: hidden; text-overflow: ellipsis; text-align: left; padding: 7px 10px; }
.rm-rooms.many .rm-room-n { overflow: hidden; text-overflow: ellipsis; }
.rm-no-find { max-width: 260px; margin: 2px 0 6px; padding: 7px 12px; font-size: 14px; }
/* 설정 → 교실 이름: 줄마다 순번 · 이름 칸 · 위/아래 · 빼기. 60개까지라 목록은 접어서 굴립니다. */
.rn-list { list-style: none; margin: 12px 0 0; padding: 0 4px 0 0; display: grid; gap: 6px; max-height: 420px; overflow: auto; max-width: 620px; }
.rn-add { max-width: 620px; }
.co-add.rn-add input { flex: 1 1 260px; }
.rn-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 6px; }
.rn-row input { padding: 6px 10px; font-size: 14.5px; min-height: 0; }
.rn-row .rn-i { text-align: right; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rn-row .rn-mv { width: 32px; height: 32px; min-height: 0; padding: 0; }
.rn-row .rn-x { min-height: 0; height: 32px; padding: 0 12px; }
.rn-row .rn-live { font-size: 12px; font-weight: 700; color: var(--ok-ink, #1f6b40); background: var(--ok-soft, #e9f6ee); padding: 2px 8px; border-radius: 99px; }
.rn-row:not(:has(.rn-live)) { grid-template-columns: 28px minmax(0, 1fr) auto auto auto; }
.rm-prompt { font-size: clamp(34px, 6vw, 64px); font-weight: 800; text-align: center; padding: 30px 10px 24px; word-break: keep-all; letter-spacing: -0.01em; }
.rm-opts { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.rm-opt { display: grid; grid-template-columns: 44px 1fr 56px; align-items: center; gap: 12px; padding: 12px 16px 14px;
border: 2px solid var(--line); border-radius: 14px; background: #fff; position: relative; overflow: hidden; }
.rm-letter { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--tint); color: var(--ink); }
.rm-text { font-size: clamp(18px, 2.4vw, 26px); font-weight: 600; word-break: keep-all; }
.rm-bar { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; }
.rm-bar i { display: block; height: 100%; background: var(--brand-line); transition: width .3s; }
.rm-n { text-align: right; color: var(--ink-soft); font-size: 15px; }
.rm-opt.right { border-color: #2e9e5b; background: #eef9f1; }
.rm-opt.right .rm-letter { background: #2e9e5b; color: #fff; }
.rm-opt.right .rm-bar i { background: #2e9e5b; }
.rm-opt.dim { opacity: .55; }
.rm-note { text-align: center; margin: 14px 0 4px; color: var(--ink-soft); font-size: 15px; }
.rm-note.rm-ans { color: var(--ink); font-size: clamp(18px, 2.4vw, 26px); font-weight: 700; }
.rm-players { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
/* 노트북: 언제 공개할지는 누가 냈는지를 보고 정하는데, 보기가 길면 아이 줄이 화면 밑으로 밀렸습니다.
아이 줄을 판 아래에 붙여 두고, 넓은 화면에서는 보기를 두 칸으로 놓아 키를 줄입니다.
(폰은 아래에 단추 띠가 붙어 있어 겹치니 빼고, 전체 화면 TV 도 그대로 둡니다.) */
@media (min-width: 641px) {
.rm-board:not(:fullscreen) > .rm-players { position: sticky; bottom: 0; z-index: 4; background: var(--card, #fff);
margin: 18px -24px 0; padding: 12px 24px 14px; max-height: 32vh; overflow: auto;
box-shadow: 0 -10px 18px -12px rgba(0,0,0,.25); }
.rm-board:not(:fullscreen) > .rm-players:empty { display: none; }
}
@media (min-width: 1000px) {
/* 받아쓰기(보기 없음: 다시 듣기 · 철자)는 한 칸 그대로 */
.rm-board:not(:fullscreen) .rm-opts:has(> .rm-opt) { grid-template-columns: 1fr 1fr; max-width: 1000px; }
.rm-board:not(:fullscreen) .rm-passage { max-height: 30vh; }
}
.rm-kid { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font-size: 14px; }
.rm-kid small { font-weight: 700; color: var(--ink-soft); }
.rm-kid.in { border-color: var(--brand-line); background: var(--brand-soft); }
.rm-kid.in small { color: var(--brand-ink); }
.rm-kid.ok { border-color: #2e9e5b; background: #eef9f1; } .rm-kid.ok small { color: #2e9e5b; }
.rm-kid.no { border-color: #e2a0a0; background: #fdf0f0; } .rm-kid.no small { color: #c0392b; }
.rm-kid.idle { opacity: .6; }
/* 골든벨에서 구경하는 아이: 흐리게 + 점선(«안 들어옴 · 안 냄» 과 구별되게 👀 를 붙입니다) */
.rm-kid.out { opacity: .5; border-style: dashed; }
/* «전체 화면» 은 HDMI 로 TV 에 그대로 나갑니다(2026-10-21 검토). TV 판(board.html)이 반 앞에 걸지 않는 것은 여기서도 가립니다:
아이마다 ○/× · 점수(이름 칩의 작은 글씨 · 빨간 칩), 따라 말하기 아이별 점수 · 받아적힌 글(공개 전에는 반 평균도),
«이름 보이기» 를 안 켠 생각 · 영작 카드의 이름, 끝난 뒤 메달 셋 아래의 순위 · 아이별 답. */
.rm-board:fullscreen .rm-kid small { display: none; }
.rm-board:fullscreen .rm-kid.no { border-color: var(--line); background: #fff; }
.rm-board:fullscreen .rm-spk, .rm-board:fullscreen .rm-spk-sum.rm-pre { display: none; }
.rm-board:fullscreen .rm-nm-off { display: none; }
.rm-board:fullscreen .rm-rank-row.rm-low, .rm-board:fullscreen .rm-rank.rm-rank-spk, .rm-board:fullscreen .rm-kid-ans { display: none; }
/* 1280×720 · 1366×768 노트북: 리딩 글 칸이 30vh 면 마지막 보기 줄이 아래 학생 띠(sticky)에 가렸습니다(실제 브라우저 점검에서 찾음). */
/* 글 칸만 줄여서는 1280×720 에서 두 줄짜리 보기 넷이 여전히 넘쳐(재 봄), 리딩 문제 · 보기 글자와 여백도 화면 높이에 맞춰 줄입니다. */
@media (min-width: 1000px) and (max-height: 820px) {
.rm-board:not(:fullscreen) #rmQ .rm-passage { max-height: 16vh; }
.rm-board:not(:fullscreen) #rmQ:has(> #rmPassage:not(.hidden)) > .rm-prompt { font-size: clamp(20px, 3.4vh, 28px); padding: 6px 10px 10px; }
.rm-board:not(:fullscreen) #rmQ:has(> #rmPassage:not(.hidden)) .rm-opt { padding: 6px 14px 8px; }
.rm-board:not(:fullscreen) #rmQ:has(> #rmPassage:not(.hidden)) .rm-text { font-size: clamp(16px, 2.6vh, 20px); }
}
.rm-bell { margin: 14px auto 0; max-width: 760px; text-align: center; padding: 10px 16px; border-radius: 14px; background: #fff7e0; border: 2px solid #f2d27a; display: grid; gap: 2px; }
.rm-bell b { font-size: 18px; }
.rm-bell span { color: var(--ink-soft); font-size: 14px; }
.rm-bell.end b { font-size: 22px; }
.rm-bell.end span { color: var(--ink); font-size: 18px; font-weight: 700; }
.rm-board:fullscreen .rm-bell b { font-size: 26px; }
/* 문장 만들기(선생님 판): 섞인 카드 · 공개 뒤 바른 문장 · 아이들이 세운 차례 묶음(선생님 판에만 -- TV 에는 안 감). */
.rm-ochips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.rm-ochips span { padding: 6px 16px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-size: 22px; font-weight: 700; }
.rm-osent { text-align: center; font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; color: #2e9e5b; margin: 6px 0 10px; }
.rm-oways { display: grid; gap: 6px; max-width: 760px; margin: 0 auto; }
.rm-oways span { padding: 6px 14px; border-radius: 12px; border: 1.5px solid #e2a0a0; background: #fdf0f0; font-size: 16px; }
.rm-oways span.ok { border-color: #2e9e5b; background: #eef9f1; }
.rm-oways b { color: var(--ink-soft); font-size: 14px; margin-left: 6px; }
/* 버저 퀴즈(선생님 판): 누른 차례. 지금 차례는 진하게, 틀린 아이는 줄을 긋습니다. */
.rm-buzz { margin: 14px auto 0; max-width: 760px; text-align: center; padding: 10px 16px; border-radius: 14px; background: #fff7e0; border: 2px solid #f2d27a; display: grid; gap: 8px; }
.rm-buzz > b { font-size: 22px; }
.rm-buzz ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rm-buzz li { padding: 6px 14px; border-radius: 99px; background: #fff; border: 1.5px solid var(--line); font-size: 16px; font-weight: 700; }
.rm-buzz li.now { background: #f6b93b; border-color: #e0a020; }
.rm-buzz li.wrong { text-decoration: line-through; color: var(--ink-soft); }
.rm-buzz li.ok { background: #eef9f1; border-color: #2e9e5b; }
.rm-buzz > span { color: var(--ink-soft); font-size: 14px; }
.rm-board:fullscreen .rm-buzz > b { font-size: 30px; }
/* 문법 설명 고르기: 단계마다 한 줄(기초 · 중급 · 심화) + 찾기 */
.rm-gpick .rm-gfind { max-width: 420px; margin: 0 0 8px; }
.rm-gstage { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; margin: 6px 0; }
.rm-gstage > b { font-size: 13px; color: var(--ink-soft); padding-top: 9px; }
.rm-gsel { margin: 8px 0 0; }
/* 문법 설명(선생님 판): 노트북을 그대로 TV 에 띄우는 선생님도 있어 아이 화면보다 크게. 넓으면 설명 왼쪽 · 예문 오른쪽. */
.rm-gram { max-width: 1100px; margin: 0 auto 6px; padding: 18px 22px; border-radius: 16px; background: var(--tint); }
.rm-gram .gc-title { font-size: clamp(24px, 3vw, 36px); }
.rm-gram .gc-say { font-size: clamp(17px, 1.8vw, 22px); }
.rm-gram .gc-rule { font-size: clamp(18px, 2vw, 24px); }
.rm-gram .gc-en { font-size: clamp(19px, 2.2vw, 28px); }
.rm-gram .gc-ko { font-size: clamp(14px, 1.5vw, 18px); }
@media (min-width: 1000px) {
.rm-gram .gc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
.rm-gram .gc > :not(.gc-ex) { grid-column: 1; }
.rm-gram .gc-ex { grid-column: 2; grid-row: 1 / span 3; }
}
.rm-board:fullscreen .rm-gram .gc-title { font-size: 44px; }
.rm-board:fullscreen .rm-gram .gc-say { font-size: 26px; }
.rm-board:fullscreen .rm-gram .gc-rule { font-size: 28px; }
.rm-board:fullscreen .rm-gram .gc-en { font-size: 34px; }
.rm-board:fullscreen .rm-gram .gc-ko { font-size: 21px; }
.rm-wait.rm-wait-s { padding: 10px; gap: 4px; }
.rm-wait.rm-wait-s b { font-size: 16px; }
.rm-gram-rule { width: fit-content; max-width: 900px; margin: 0 auto 4px; padding: 6px 16px; border-radius: 99px; background: #fff7e0; border: 1.5px solid #f2d27a; font-weight: 700; font-size: 15px; text-align: center; word-break: keep-all; }
/* 생각 모으기 카드: 누르면 TV 에 크게(on) */
.rm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-width: 1100px; margin: 6px auto 0; }
.rm-cards .empty-state { grid-column: 1 / -1; }
button.rm-card { display: grid; gap: 4px; align-content: start; text-align: left; min-height: 0; padding: 12px 14px; border-radius: 14px;
border: 2px solid var(--line); background: #fff; color: var(--ink); box-shadow: none; font-weight: 400; }
button.rm-card:hover { background: var(--tint); border-color: var(--brand-line); }
.rm-card-t { font-size: 18px; font-weight: 700; line-height: 1.4; word-break: break-word; }
.rm-card small { color: var(--ink-soft); font-size: 12.5px; }
button.rm-card.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-soft); }
.rm-think-end { margin: 10px 0; padding: 10px 14px; border-radius: 12px; background: var(--tint); max-width: 860px; }
.rm-think-end ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.rm-think-end li small { color: var(--ink-soft); }
.rm-done h3 { margin: 0 0 6px; }
.rm-rank { display: grid; gap: 6px; max-width: 520px; margin-top: 10px; }
.rm-rank-row { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--tint); }
.rm-rank-n { font-weight: 800; color: var(--brand-ink); }
.rm-rank-row.tap { cursor: pointer; }
.rm-kid-ans { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 10px; }
.rm-kid-ans span { padding: 4px 10px; border-radius: 99px; font-size: 13px; border: 1px solid var(--line); background: #fff; }
.rm-kid-ans span.ok { border-color: #a9d8b8; } .rm-kid-ans span.no { border-color: #e2a0a0; background: #fdf6f6; }
/* 우리 반 약한 단어 (2026-10-20): 기간 · 누구의 · 미리 본 단어(많이 틀린 것부터) */
.rm-weak { padding: 12px 14px; border-radius: 14px; background: var(--tint); display: grid; gap: 8px; }
.rm-weak-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rm-weak-row .lbl { min-width: 44px; margin: 0; font-size: 14px; }
.rm-weak-row select { max-width: 360px; }
.rm-weak-h { margin: 4px 0 6px; }
.rm-weak-words { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-weak-w { padding: 5px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
.rm-weak-w b { font-size: 15px; }
.rm-weak-w small { color: var(--ink-soft); font-size: 12px; }
/* 듣고 풀기: 답이 든 문장(공개 뒤) · 접어 둔 글(선생님만) */
.rm-cite { display: grid; gap: 4px; margin: 4px 0 8px; padding: 10px 14px; border-radius: 12px; background: #fff7d6; border: 1.5px solid #f2d27a; }
.rm-cite small { font-weight: 800; color: #8a5a00; }
.rm-cite span { font-size: 18px; font-weight: 700; line-height: 1.5; }
.rm-listen-text summary { cursor: pointer; font-weight: 700; color: var(--brand-ink); }
.rm-passage p.rm-listen-note { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.rm-listen-text mark { background: #fff1a8; border-radius: 4px; padding: 0 2px; }
/* 따라 말하기: 반 평균 · 자주 놓친 단어 · 아이마다 점수 */
.rm-spk-sum { text-align: center; font-size: 17px; margin: 4px 0 10px; }
.rm-spk-sum b { color: var(--brand-ink); font-size: 20px; }
.rm-spk-sum i { font-style: normal; margin: 0 4px; padding: 2px 10px; border-radius: 99px; background: #fdf0f0; border: 1px solid #e2a0a0; font-size: 15px; }
.rm-spk-sum.big { text-align: left; font-size: 18px; }
.rm-spk { display: grid; gap: 6px; max-width: 900px; margin: 0 auto; }
.rm-spk-row { display: grid; grid-template-columns: minmax(70px, 140px) 54px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 7px 12px;
border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 15px; }
.rm-spk-row.ok { border-color: #a9d8b8; background: #f3fbf5; }
.rm-spk-row.low { border-color: #e2a0a0; background: #fdf6f6; }
.rm-spk-n { font-weight: 800; font-variant-numeric: tabular-nums; }
.rm-spk-miss { color: #c0392b; font-weight: 700; }
.rm-spk-row.ok .rm-spk-miss { color: #2e9e5b; }
.rm-spk-row small { grid-column: 2 / -1; color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
/* 영작: 실마리 · 본보기 · 답 셋 묶음(딱 맞음 · 거의 · 다시 보기). 본보기에 없는 단어는 빨강. */
.rm-w-hint { width: fit-content; max-width: 900px; margin: 0 auto 8px; padding: 6px 16px; border-radius: 99px; background: #fff7e0; border: 1.5px solid #f2d27a; font-weight: 700; font-size: 15px; text-align: center; }
.rm-w-hint small { font-weight: 600; color: var(--ink-soft); }
.rm-wgroups { display: grid; gap: 10px; max-width: 1100px; margin: 0 auto; }
.rm-wgroup > b { display: block; font-size: 15px; margin: 2px 0 2px 2px; }
.rm-wgroup.exact > b { color: #2e9e5b; } .rm-wgroup.close > b { color: #8a5a00; } .rm-wgroup.work > b { color: #c0392b; }
.rm-wgroup .rm-cards { margin: 4px 0 0; }
em.rm-w-bad { font-style: normal; color: #c0392b; text-decoration: underline wavy #e2a0a0; text-underline-offset: 3px; }
.rm-w-model { margin: 4px 0 2px; color: #2e9e5b; font-weight: 700; }
.rm-kid-ans small { font-weight: 700; color: var(--ink-soft); }
/* 전체 화면(TV): 더 크게, 메뉴 없이 */
.rm-board:fullscreen { overflow: auto; padding: 32px 48px; background: var(--bg, #fff8f3); border-radius: 0; }
.rm-board:fullscreen .rm-prompt { font-size: clamp(48px, 8vw, 96px); }
/* 리딩 문제 · 긴 문장은 위 96px 규칙이 .small 을 이겨 두 줄로 꺾이고 보기가 화면 밖으로 밀렸습니다.
.small 은 전체 화면에서도 작게, 보기는 두 칸으로 놓아 지문 · 문제 · 보기가 한 화면에 들어오게 합니다. */
.rm-board:fullscreen .rm-prompt.small { font-size: clamp(28px, 3.2vw, 46px); padding: 10px 10px 14px; }
.rm-board:fullscreen .rm-prompt.small + .rm-opts:has(> .rm-opt) { grid-template-columns: 1fr 1fr; }
.rm-board:fullscreen .rm-passage { max-height: 34vh; }
.rm-board:fullscreen .rm-text { font-size: clamp(24px, 3.2vw, 40px); }
.rm-board:fullscreen .rm-opts { max-width: 1100px; }
.rm-board:fullscreen .rm-kid { font-size: 18px; padding: 8px 16px; }
/* 전체 화면은 HDMI 로 TV 에 그대로 나가는 화면입니다 -- TV 화면(board.html)처럼 공개 전 보기별 «N명» 과
틀린 아이 빨강은 숨깁니다(남 따라 고르기 · 망신 막기). 노트북 화면(전체 화면 아님)에서는 그대로 보입니다. */
.rm-board:fullscreen .rm-opt:not(.right):not(.dim) :is(.rm-bar, .rm-n) { visibility: hidden; }
.rm-board:fullscreen .rm-kid.no { border-color: var(--line); background: #fff; }
.rm-board:fullscreen .rm-kid.no small { color: inherit; }
.rm-board:fullscreen .rm-wait b { font-size: 34px; }
/* 전체 화면 한 화면 맞춤 (2026-10-20): HDMI 로 비추는 1366×768 노트북에서 단어 판(보기가 한 줄에 하나씩 · 96px 낱말)은
200~300px, 리딩 판(40px 보기가 두 줄로 꺾임)은 270px 넘게 화면 밑으로 넘쳤습니다 -- TV 앞 아이들은 스크롤한 화면을 못 봅니다.
판을 화면 높이의 세로 줄로 놓고(아이 줄만 모자라면 그 안에서 스크롤), 큰 글자는 화면 너비(vw)만이 아니라 높이(vh)도 봅니다.
끝난 판(순위 · 문제별 정답률)은 원래 길어서 예전처럼 판 전체를 스크롤합니다. */
.rm-board:fullscreen { display: flex; flex-direction: column; padding: clamp(14px, 2.6vh, 32px) 48px; }
.rm-board:fullscreen > * { flex-shrink: 0; }
.rm-board:fullscreen .rm-top { margin-bottom: clamp(6px, 1.4vh, 14px); }
.rm-board:fullscreen .rm-prompt { font-size: clamp(44px, min(8vw, 12vh), 96px); line-height: 1.15; padding: clamp(6px, 2vh, 30px) 10px clamp(6px, 1.8vh, 24px); }
.rm-board:fullscreen .rm-prompt.small { font-size: clamp(26px, min(3.2vw, 5.4vh), 46px); line-height: 1.2; padding: clamp(4px, 1vh, 10px) 10px clamp(6px, 1.4vh, 14px); }
/* 보기 넷은 늘 두 칸(한 줄에 하나씩이면 네 줄이 380px 를 먹습니다). 받아쓰기(보기 없음)는 그대로 한 칸. */
.rm-board:fullscreen .rm-opts:has(> .rm-opt) { grid-template-columns: 1fr 1fr; }
.rm-board:fullscreen .rm-opt { padding: clamp(6px, 1.2vh, 12px) 16px clamp(8px, 1.5vh, 14px); }
.rm-board:fullscreen .rm-text { font-size: clamp(22px, min(3.2vw, 5vh), 40px); line-height: 1.25; }
.rm-board:fullscreen .rm-note { margin: clamp(6px, 1.4vh, 14px) 0 0; font-size: clamp(15px, 2.2vh, 20px); }
.rm-board:fullscreen .rm-note.rm-ans { font-size: clamp(18px, min(2.4vw, 3.4vh), 28px); }
.rm-board:fullscreen .rm-say { margin-bottom: 4px; padding: clamp(8px, 1.4vh, 14px) 28px; }
.rm-board:fullscreen .rm-spell { font-size: clamp(40px, min(6vw, 10vh), 96px); line-height: 1.1; margin: 2px 0 6px; }
.rm-board:fullscreen #rmTeamBar .team-bar { font-size: clamp(18px, 3vh, 24px); margin-top: clamp(8px, 1.6vh, 18px); }
.rm-board:fullscreen #rmTeamBar .team-bar .tb { padding: clamp(4px, .9vh, 10px) 14px; }
/* 문제를 푸는 동안 아이 줄: 남는 자리만 쓰고, 이름이 더 많으면 그 줄 안에서만 스크롤(판은 그대로) */
.rm-board:fullscreen:has(> #rmDone.hidden) > .rm-players { flex-shrink: 1; min-height: 58px; overflow: auto; align-content: flex-start;
margin-top: clamp(8px, 1.6vh, 18px); padding-top: clamp(8px, 1.4vh, 14px); }
/* 리딩: 지문 · 문제 · 보기 넷 · «N명 답했어요» 를 위아래로 쌓으면 768 에서 보기 C · D 가 밖으로 나갔습니다.
넓은 화면은 TV 화면(board.html)처럼 지문을 왼쪽, 문제 · 보기(한 칸에 하나)를 오른쪽에 둡니다. */
@media (min-width: 1100px) {
.rm-board:fullscreen #rmQ:has(> #rmPassage:not(.hidden)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 28px; row-gap: clamp(6px, 1.2vh, 12px); align-content: start; }
.rm-board:fullscreen #rmQ:has(> #rmPassage:not(.hidden)) > * { grid-column: 2; margin: 0; }
/* 위 «> *» 규칙(:has 때문에 우선순위가 높음)을 이기려고 같은 :has 를 붙입니다 */
.rm-board:fullscreen #rmQ:has(> #rmPassage:not(.hidden)) > #rmPassage { grid-column: 1; grid-row: 1 / span 4; align-self: start; max-width: none;
max-height: calc(100vh - 230px); padding: clamp(12px, 2vh, 18px) 22px; }
.rm-board:fullscreen #rmQ > #rmPassage p { font-size: clamp(16px, min(1.45vw, 2.7vh), 26px); line-height: 1.6; }
.rm-board:fullscreen #rmQ:has(> #rmPassage:not(.hidden)) > .rm-tag { justify-self: start; }
.rm-board:fullscreen #rmQ:has(> #rmPassage:not(.hidden)) > .rm-prompt { text-align: left; padding: 0; font-size: clamp(24px, min(2.6vw, 4.4vh), 44px); }
.rm-board:fullscreen #rmQ:has(> #rmPassage:not(.hidden)) > .rm-opts { grid-template-columns: 1fr; gap: clamp(6px, 1vh, 10px); max-width: none; }
.rm-board:fullscreen #rmQ:has(> #rmPassage:not(.hidden)) .rm-text { font-size: clamp(19px, min(2vw, 3.2vh), 34px); }
.rm-board:fullscreen #rmQ:has(> #rmPassage:not(.hidden)) > .rm-note { text-align: left; line-height: 1.35; }
.rm-board:fullscreen #rmQ:has(> #rmPassage:not(.hidden)) > .rm-note.rm-ans { font-size: clamp(17px, min(1.8vw, 2.7vh), 28px); }
/* 리딩은 오른쪽 칸이 길어 팀 띠를 한 단계 작게(점수는 그래도 26px 넘게) */
.rm-board:fullscreen:has(#rmPassage:not(.hidden)) #rmTeamBar .team-bar { font-size: clamp(17px, 2.6vh, 24px); }
.rm-board:fullscreen:has(#rmPassage:not(.hidden)) #rmTeamBar .team-bar .tb { padding-block: clamp(2px, .6vh, 10px); }
}
/* 자동 숙제 (2026-10) */
.auto-form { display: grid; gap: 12px; margin-top: 10px; max-width: 760px; }
.auto-form .lbl { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.auto-form select { max-width: 360px; }
.auto-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.auto-row:first-child { border-top: 0; }
.auto-row.off { opacity: .55; }
.auto-say { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.auto-say b { font-size: 15px; }
.auto-say span { font-size: 13.5px; color: var(--ink-soft); }
.auto-say small { font-size: 12.5px; color: var(--brand-ink); font-weight: 600; }
.auto-row.off .auto-say small { color: var(--ink-soft); }
.auto-say small.wait { color: var(--ink-soft); font-weight: 500; }
.auto-acts { display: flex; gap: 6px; flex: none; }
.bubble.ghosty { border-style: dashed; color: var(--ink-soft); }
/* 학생이 많을 때 버블을 좁히는 찾기 칸 */
input.find { max-width: 280px; padding: 8px 12px; font-size: 14px; min-height: 0; margin: 0 0 8px; }
/* ---- 오늘 ------------------------------------------------------------------ */
.today-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin: 2px 0 16px;
}
.today-title h2 { font-size: 24px; margin: 0; }
.today-title h2::before { height: 22px; }
.today-title p { margin: 6px 0 0 14px; font-size: 14.5px; }
.today-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.today-quick button { padding: 9px 14px; font-size: 14px; }
.today-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
/* min-width:0 이 없으면 격자 칸이 «안에 든 것의 최소 너비» 만큼 벌어져서, 폰에서
카드가 화면보다 넓어집니다(412px 화면에 414px). 2px 이지만 페이지가 가로로
흔들립니다 -- 선생님은 포털을 폰으로 씁니다. */
.today-grid > .card { margin-bottom: 18px; min-width: 0; }
/* 왼쪽 메뉴(260px)가 있는 폭에서는 본문이 화면보다 260px 좁습니다 -- 1024 가로 태블릿에서 «할 일» 칸이 300px 남짓이라
«리포트를 / 30일 넘게 안 / 보낸 학생» 처럼 세 줄로 꺾였습니다. 1180 아래는 위아래로 (2026-10-30). */
@media (max-width: 1180px) { .today-grid { grid-template-columns: 1fr; gap: 0; } }
.td-slot {
display: flex; gap: 12px; align-items: flex-start;
padding: 10px 0; border-top: 1px solid var(--line-soft);
}
.td-slot:first-child { border-top: 0; padding-top: 2px; }
.td-slot.past { opacity: .7; } /* .62 에서는 지난 수업 시각 글자가 4.4:1 로 흐렸습니다(2026-11-03) */
.td-time { flex: none; width: 52px; font-size: 15px; font-variant-numeric: tabular-nums; padding-top: 5px; }
.td-kids { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.td-kid {
display: inline-flex; align-items: center; gap: 6px;
background: var(--card); color: var(--ink); border: 1px solid var(--line);
border-left: 3px solid var(--c, var(--brand));
border-radius: 8px; padding: 6px 10px; font-size: 14px; font-weight: 600;
min-height: 0; box-shadow: none;
}
.td-kid:hover { background: var(--tint); }
.td-kid i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--c, var(--brand)); }
.td-kid.done { background: var(--bg); color: var(--ink-soft); }
.td-ok { color: var(--ok); font-weight: 800; }
.td-todo {
display: flex; align-items: center; gap: 12px;
padding: 11px 0; border-top: 1px solid var(--line-soft);
}
.td-todo:first-child { border-top: 0; padding-top: 2px; }
.td-n {
flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px;
display: grid; place-items: center; font-size: 16px;
background: var(--brand-soft); color: var(--brand-ink); font-variant-numeric: tabular-nums; /* --brand 는 이 바탕에서 3.1:1 이라 진한 쪽 */
}
.td-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-tt b { font-size: 14.5px; }
.td-tt span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-todo > button { flex: none; }
.td-clear { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.td-clear b { color: var(--ok); }
.card .stat-row { margin: 4px 0 16px; }
/* ---- 수업 · 시간표: 둘 중 하나 고르기 ---------------------------------------- */
.seg {
display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px;
background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.seg button {
background: none; color: var(--ink-soft); border: 0; box-shadow: none;
padding: 9px 18px; font-size: 14.5px; font-weight: 700; border-radius: 9px; min-height: 0;
}
.seg button:hover { color: var(--ink); background: var(--bg); }
.seg button.on { background: var(--brand); color: #fff; }
/* ---- 이번 주 시간표 ---------------------------------------------------------- */
.wk-filter { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 10px; }
.wk-frow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wk-frow .tb-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); min-width: 44px; }
.wk-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); }
.wk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wk-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.wk-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.wk-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; min-width: 640px; }
.wk-table th, .wk-table td { border: 0; border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); }
.wk-table thead th {
background: var(--tint); font-size: 13.5px; font-weight: 700; padding: 9px 6px; text-align: center;
border-top: 0; position: sticky; top: 0;
}
.wk-table thead th small { display: block; font-weight: 500; color: var(--ink-soft); font-size: 11.5px; margin-top: 1px; }
.wk-table th:first-child, .wk-table td:first-child { border-left: 0; }
.wk-corner { width: 58px; }
.wk-table .wk-time {
background: var(--tint); font-size: 13px; font-weight: 700; text-align: center;
font-variant-numeric: tabular-nums; vertical-align: top; padding: 10px 4px; width: 58px;
}
.wk-cell {
vertical-align: top; padding: 6px; cursor: pointer; min-height: 44px; height: 44px;
transition: background .12s;
}
.wk-table thead th.today { background: var(--brand-soft); color: var(--brand-ink); }
.wk-table thead th.today small { color: var(--brand-ink); }
.wk-cell.today { background: color-mix(in srgb, var(--brand-soft) 40%, #fff); }
.wk-cell:hover { background: var(--brand-soft); }
.wk-cell.empty:hover .wk-plus { opacity: 1; }
.wk-plus { display: block; text-align: center; color: var(--brand); font-weight: 700; opacity: 0; font-size: 18px; line-height: 30px; }
.wk-chip {
display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%;
margin: 0 0 4px; padding: 4px 7px; min-height: 0; box-shadow: none;
background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--ink);
border: 0; border-left: 3px solid var(--c); border-radius: 6px;
font-size: 12.5px; font-weight: 600; text-align: left;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-chip:hover { background: color-mix(in srgb, var(--c) 22%, #fff); }
.wk-chip i { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--c); flex: none; }
.wk-empty {
text-align: center; padding: 34px 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--bg);
}
.wk-empty b { display: block; font-size: 16px; }
.wk-empty p { color: var(--ink-soft); font-size: 14px; margin: 6px 0 14px; }
/* 폰: 요일 하나씩, 시각마다 한 줄 */
.wk-days { margin-bottom: 10px; }
/* 요일 고르개는 한 줄에 다 -- 접히는 줄이라 390px 폰에서 «월 화 수 목 / 금» 하나만 둘째 줄로 떨어졌습니다.
요일 수(5~7)만큼 같은 너비 칸으로 나누고, 좁은 칸에 맞게 요일 위 · 사람 수 아래로 세웁니다. */
.wk-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; }
.wk-days .bubble { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px; line-height: 1.2; }
.wk-days .bubble .sub { margin: 0; font-size: 11.5px; }
.wk-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.wk-line { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.wk-line:first-child { border-top: 0; }
.wk-line:active { background: var(--brand-soft); }
.wk-line .wk-time { flex: none; width: 44px; font-size: 13.5px; padding-top: 4px; font-variant-numeric: tabular-nums; }
.wk-kids { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.wk-kids .wk-chip { width: auto; margin: 0; }
.wk-line.empty .wk-plus { opacity: 1; color: var(--brand-ink); font-weight: 600; font-size: 13px; line-height: 26px; text-align: left; } /* 폰 «+ 넣기»: 옅은 분홍(.55)이 2:1 이라 안 읽혔습니다 -- 대표 색 글자로 (2026-10-30 axe) */
/* ---- 칸 하나 창 -------------------------------------------------------------- */
.sl-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px;
}
.sl-row.focus { border-color: var(--brand); background: var(--brand-soft); }
.sl-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex: none; }
.sl-row .muted { font-size: 13px; }
.sl-acts { margin-left: auto; display: flex; gap: 6px; }
#slSheet h3:first-child { margin-top: 16px; }
/* ---- 한 번에 넣기 ------------------------------------------------------------- */
.sheet-panel.im-panel { width: min(1040px, 100%); }
.im-steps { display: flex; gap: 6px; }
.im-steps i {
font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
background: var(--bg); color: #a3a8af; border: 1px solid var(--line);
}
.im-steps i.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.im-ways { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: 14px; }
@media (max-width: 760px) { .im-ways { grid-template-columns: 1fr; } }
.im-way {
border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--card);
display: flex; flex-direction: column;
}
.im-way > b { font-size: 16px; }
.im-way .hint { margin-top: 4px; }
.im-way textarea {
width: 100%; box-sizing: border-box; margin: 10px 0; min-height: 150px; flex: 1;
font: 13.5px/1.55 ui-monospace, "Cascadia Mono", Consolas, "D2Coding", monospace;
border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; resize: vertical; tab-size: 12;
}
.im-way textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.im-drop {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
margin: 10px 0; min-height: 150px; flex: 1; cursor: pointer;
border: 2px dashed var(--brand-line); border-radius: 12px; background: var(--brand-soft);
color: var(--brand); font-weight: 700; text-align: center; padding: 12px;
transition: background .12s, border-color .12s;
}
.im-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.im-drop:hover, .im-drop.over { border-color: var(--brand); background: #fbe1e5; }
.im-drop-t { font-size: 16px; }
.im-drop-s { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.im-drop.busy { pointer-events: none; opacity: .7; }
.im-drop.busy .im-drop-t::after { content: ' · 읽는 중…'; }
.im-drop.off { filter: grayscale(1); opacity: .55; pointer-events: none; }
.im-help { margin-top: 14px; font-size: 14px; }
.im-help summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; }
.im-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
@media (max-width: 760px) { .im-shapes { grid-template-columns: 1fr; } }
.im-shapes b { font-size: 13px; }
.im-shapes pre {
margin: 6px 0 0; padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
font: 12px/1.5 ui-monospace, Consolas, "D2Coding", monospace; overflow-x: auto; white-space: pre;
}
.im-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 540px) { .im-kpis { grid-template-columns: repeat(2, 1fr); } }
.im-kpi { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); }
.im-kpi b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.im-kpi span { font-size: 12.5px; color: var(--ink-soft); }
.im-kpi.good b { color: var(--ok); }
.im-kpi.warn { border-color: #efd9b4; background: #fdf8ef; }
.im-kpi.warn b { color: var(--warn); }
.im-names { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.im-name {
display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; gap: 10px; align-items: center;
padding: 9px 12px; border-top: 1px solid var(--line-soft);
}
.im-name:first-child { border-top: 0; }
.im-name.need { background: #fdf3f3; }
.im-name.check { background: #fdf8ef; }
.im-name.skip { opacity: .55; }
.im-from { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.im-from small { color: var(--ink-soft); font-size: 12px; }
.im-from .pill { font-size: 11px; padding: 1px 7px; }
.im-to { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font-size: 14px; }
.im-to .bubble-row { width: 100%; }
.im-in { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; }
.im-in input { width: 110px; padding: 6px 9px; font-size: 14px; min-height: 0; }
.im-in input.code { width: 96px; font-variant-numeric: tabular-nums; }
.im-acts { display: flex; gap: 6px; }
.im-pick { grid-column: 1 / -1; padding: 8px 0 2px; }
.warn-t { color: var(--bad); font-size: 13.5px; }
@media (max-width: 640px) {
.im-name { grid-template-columns: 1fr; gap: 6px; }
.im-acts { justify-content: flex-start; }
}
.im-fill {
display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding: 10px 12px;
border: 1px dashed var(--line); border-radius: 12px; background: var(--bg);
}
.im-fillrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.im-fillrow .tb-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-right: 4px; }
.im-table td { font-size: 14px; }
.im-table td.bad { color: var(--bad); font-weight: 700; background: #fdf3f3; }
.im-table td.odd { color: var(--warn); font-weight: 600; }
.im-table tr.off > td { opacity: .45; text-decoration: line-through; }
.im-table tr.off > td:last-child { text-decoration: none; opacity: 1; }
.im-table tr.im-edit > td { background: var(--tint); padding: 10px 12px; }
.im-editor { display: flex; flex-direction: column; gap: 8px; }
.im-erow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.im-erow .tb-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); min-width: 44px; }
.im-erow .bubble-row { margin: 0; }
.im-foot {
display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
position: sticky; bottom: 0; background: var(--card);
}
.im-foot button:last-child { min-width: 220px; }
.im-done { text-align: center; padding: 22px 10px 8px; }
.im-done b { font-size: 20px; color: var(--ok); }
.im-done p { margin: 6px 0 0; }
/* 학생 등록 칸 옆: 많으면 시간표로 한 번에 */
.bulk-tip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.bulk-tip span { flex: 1; min-width: 220px; font-size: 13.5px; }
/* ---- 설정 → 수업 틀 ----------------------------------------------------------- */
.co-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.co-add input { width: auto; flex: 0 1 200px; padding: 8px 11px; font-size: 14px; min-height: 0; }
.co-add input[type=time] { flex: 0 0 auto; width: 128px; }
.co-add input.co-short { flex: 0 0 72px; width: 72px; }
.co-add .bubble-row { margin: 0; }
.bubble.co-x { position: relative; padding-right: 26px; }
.bubble.co-x::after {
content: '×'; position: absolute; right: 10px; top: 50%; transform: translateY(-52%);
font-weight: 700; opacity: .75;
}
.bubble.co-x:hover { background: var(--brand-dark); }
/* ---- 학부모 리포트: 학생마다 카톡으로 · 보냄 표시 ------------------------------- */
.rp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.rp-counts { font-size: 14px; }
.rp-bar .bubble-row { margin: 0; }
.rp-bar-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ok-t { color: var(--ok); }
.warn-t2 { color: var(--warn); }
.rp-list { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rp-item {
display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(120px, 1.2fr) auto auto;
gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line-soft);
}
.rp-item:first-child { border-top: 0; }
.rp-item.sent { background: #f6fbf8; }
.rp-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rp-who .muted { font-size: 12px; }
.rp-stats { font-size: 13px; color: var(--ink-soft); }
.rp-stats.rp-blank { color: var(--warn, #b26b00); font-weight: 600; } /* 빈 리포트: 보내기 전에 한 번 보게 */
.rp-state {
background: #fdf3e6; color: var(--warn); border: 1px solid #f1dcbd; box-shadow: none;
border-radius: 99px; padding: 4px 11px; font-size: 12.5px; font-weight: 700; min-height: 0; white-space: nowrap;
}
.rp-state.on { background: #e9f4ee; color: #23663f; border-color: #cfe7d8; }
.rp-acts { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 700px) {
.rp-item { grid-template-columns: 1fr auto; gap: 6px 10px; }
.rp-stats { grid-column: 1; }
.rp-state { grid-column: 2; grid-row: 1; justify-self: end; }
.rp-acts { grid-column: 1 / -1; justify-content: flex-start; }
.rp-bar-right { margin-left: 0; }
}
/* 보내기 창: 왼쪽 그림, 오른쪽 단추. 폰은 위아래. */
.sheet-panel.rs-panel { width: min(920px, 100%); }
.rs-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, 1fr); gap: 18px; padding-top: 16px; }
@media (max-width: 720px) { .rs-body { grid-template-columns: 1fr; } }
.rs-img { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 240px; }
.rs-img img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow); }
.rs-side { display: flex; flex-direction: column; gap: 8px; }
.rs-side .hint { margin: -2px 0 4px; font-size: 13px; }
.rs-state { margin-bottom: 4px; }
.rs-sent {
display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px;
background: #fdf3e6; border: 1px solid #f1dcbd; font-size: 13.5px;
}
.rs-sent b { color: var(--warn); font-size: 15px; }
.rs-sent.on { background: #e9f4ee; border-color: #cfe7d8; }
.rs-sent.on b { color: #23663f; }
.rs-sent .linky { align-self: flex-start; font-size: 12.5px; color: var(--ink-soft); text-decoration: underline; }
.rs-nav { display: flex; gap: 8px; margin-top: 8px; }
.rs-nav button { flex: 1; }
.rs-only { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-weight: 500; }
.rs-only input { width: auto; min-height: 0; }
/* 학생 창: 학부모에게 보낸 것 */
.sh-sent-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sh-sent-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 12px; border-top: 1px solid var(--line-soft); font-size: 13.5px;
}
.sh-sent-row:first-child { border-top: 0; }
.sh-sent-row b { font-variant-numeric: tabular-nums; min-width: 88px; }
.sh-sent-row .linky { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); text-decoration: underline; }
/* 화면 아래에 잠깐 뜨는 한 줄 */
.toast {
position: fixed; left: 50%; bottom: 26px; z-index: 80; transform: translate(-50%, 16px);
background: #2f3338; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 600;
box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
max-width: min(560px, calc(100vw - 32px)); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #a03434; }
/* ---- 성적 백업 ---------------------------------------------------------------- */
.bk-last {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 14px; border-radius: 12px; background: #e9f4ee; border: 1px solid #cfe7d8; font-size: 14px;
}
.bk-last b { color: #23663f; }
.bk-last.old { background: #fdf3e6; border-color: #f1dcbd; }
.bk-last.old b { color: var(--warn); }
.bk-last button { margin-left: auto; }
/* ---- Cloudflare 사용량 -------------------------------------------------------- */
.us-row { padding: 10px 0; border-top: 1px solid var(--line-soft, var(--line)); }
.us-row:first-child { border-top: 0; }
.us-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.us-pct { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.us-bar { display: block; height: 8px; margin-top: 6px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.us-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ok, #2f8f5b); }
.us-row.warn .us-bar i { background: #e0a030; }
.us-row.warn .us-pct { color: #b7791f; }
.us-row.danger .us-bar i { background: var(--bad, #d64545); }
.us-row.danger .us-pct { color: var(--bad, #d64545); }
.us-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
/* ---- 도움 요청 글 ------------------------------------------------------------ */
.help-ask textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.help-preview {
white-space: pre-wrap; word-break: break-word; margin: 12px 0 0; padding: 12px 14px;
border-radius: 10px; background: var(--bg); border: 1px solid var(--line);
font: 13px/1.55 ui-monospace, Consolas, "D2Coding", monospace; max-height: 320px; overflow: auto;
}
#helpWho .btn-link {
text-decoration: none; color: var(--brand); border: 1px solid var(--brand-line, var(--line));
background: var(--brand-soft); padding: 6px 12px; border-radius: 999px; font-weight: 700;
}
/* ---- 예시 학원 --------------------------------------------------------------- */
.demo-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 14px;
background: #fdf3e6; border: 1px dashed #e8c89a;
}
.demo-bar b { color: var(--warn); }
.demo-bar button { margin-left: auto; }
/* ---- 선생님별 활동 ------------------------------------------------------------ */
.act-recent { display: flex; flex-direction: column; gap: 6px; }
.act-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.act-when { color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 128px; }
.act-row .pill { font-size: 11.5px; padding: 1px 8px; }
.td-staff { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 5px; }
.td-staff-h { display: flex; align-items: center; justify-content: space-between; }
.td-staff-h b { font-size: 13.5px; }
.td-staff-h .linky { font-size: 13px; color: var(--brand-ink); } /* --brand 는 흰 바탕에서 3.4:1 */
.td-staff-row { display: flex; gap: 8px; font-size: 13.5px; flex-wrap: wrap; }
/* 폰에서 둘러보기·오늘의 여백 */
@media (max-width: 540px) {
.today-title h2 { font-size: 21px; }
.today-quick { width: 100%; }
.today-quick button { flex: 1; }
.td-time { width: 44px; font-size: 14px; }
.seg { display: flex; }
.seg button { flex: 1; padding: 9px 8px; }
input.find { max-width: none; }
}
/* ---- 한 화면 안의 칸 고르개 ----
성적 10568px · 설정 10532px. 카드 넷이 세로로 쌓여 있어서, 그중 하나를
보려고 나머지 셋을 지나가야 했습니다. 한 번에 하나만 보여 줍니다. */
.sectabs {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 14px; padding: 5px;
background: var(--tint); border: 1px solid var(--line); border-radius: 12px;
}
.sectab {
min-height: 38px; padding: 8px 14px;
background: none; border: 0; border-radius: 9px;
font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft);
cursor: pointer; white-space: nowrap;
}
.sectab:hover { background: #fff; color: var(--ink); }
.sectab.on { background: #fff; color: var(--brand-ink); box-shadow: var(--shadow); }
.sect-off { display: none !important; }
/* 종이에는 «보고 있던 칸» 만 나갑니다 -- 화면에서 «많이 틀리는 단어» 를 보다
인쇄하면 그것이 나와야지, 접어 둔 셋까지 딸려 나오면 안 됩니다. */
@media print { .sectabs { display: none; } }
/* ---- 명단에서 한 아이 찾기 ----
백 명이 넘는 학원에서 표를 8000px 굴리게 두지 않습니다. */
.find-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.find-row input {
flex: 1 1 260px; max-width: 360px; min-height: 42px;
padding: 9px 13px; font-size: 15px;
border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.find-row input:focus { outline: none; border-color: var(--brand); }
.find-row .hint { margin: 0; white-space: nowrap; }
/* ---- 학습 메뉴 고르개 ----
활동 아홉 개를 갈래 제목과 함께 한 줄로 흘립니다. 제목이 줄을 끊어서,
«단어 / 듣고 쓰기 / 읽기» 가 아이 홈과 같은 차례로 읽힙니다. */
.menu-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-g {
flex-basis: 100%; margin-top: 6px;
font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em;
}
.mp-g:first-child { margin-top: 0; }
/* 고른 것이 보여야 합니다.
«.chip.on» 은 style.css 에서 «.chips .chip.on» 으로 묶여 있습니다. 이 고르개는
.chips 가 아니라 .menu-pick 이라 그 규칙이 안 걸렸고, 게다가 .chip 의 기본이
이미 옅은 브랜드색이라 **아홉 개가 전부 골라진 것처럼** 보였습니다 --
선생님이 무엇을 정했는지 알 수 없었습니다. 안 고른 것은 흰 바탕으로 내리고,
고른 것만 색을 줍니다. */
.teacher-layout .menu-pick .chip {
min-height: 34px; padding: 6px 12px; font-size: 13.5px;
background: #fff; border-color: var(--line); color: var(--ink-soft);
}
.teacher-layout .menu-pick .chip:hover { border-color: var(--brand-line); color: var(--ink); }
.teacher-layout .menu-pick .chip.on {
background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700;
}
/* 표 칸 안에서 펼 때는 폭을 묶습니다. 안 묶으면 칩 아홉 개가 한 줄로 늘어서서
그 칸 하나가 표를 화면 밖까지 밀고, 오른쪽 끝 «수정 · PIN 재발급» 이 가로
스크롤 뒤로 숨습니다. 세로로 길어지는 편이 낫습니다. */
.tmain td .menu-pick { width: 230px; }
/* 정해 둔 활동은 짧은 이름으로(칩에 제목을 달아 두어 마우스로 보면 긴 이름) */
.tmain td .pill { font-size: 11.5px; padding: 1px 7px; }
/* ---- 원생 추가 -------------------------------------------------------------
학생 관리의 첫 칸입니다. 이름 · 코드 · 단추가 한 줄에 서고, 폰에서는 세로로
쌓입니다. 단추가 «이름» 칸만큼 늘어나면 한 줄에 셋을 두는 뜻이 없어지므로
단추만 자기 폭을 지킵니다. */
.add-row > div { min-width: 120px; }
.add-row > div:last-child { min-width: 0; }
.add-row label .hint { display: inline; margin: 0 0 0 4px; font-size: 12px; }
@media (max-width: 560px) {
/* 폰에서는 이름과 코드가 각각 한 줄을 쓰고, 단추는 그 아래 폭 전체. 130px 짜리
둘이 한 줄에 끼면 «예: minjun2019» 가 잘려서 무엇을 적는 칸인지 안 보입니다. */
.add-row > div { flex: 1 1 100%; }
.add-row > div:last-child button { width: 100%; }
}
/* 여러 명 한 번에 -- 학기 초에 한 번 쓰는 것이라 접어 둡니다. */
.add-many { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.add-many > summary {
cursor: pointer; color: var(--ink-soft); font-weight: 600; font-size: 13.5px;
/* 폰에서 손가락으로 닿는 자리를 32px 이상으로 */
min-height: 32px; display: flex; align-items: center;
}
.add-many[open] > summary { color: var(--ink); }
/* flex 로 바꾸면 브라우저의 ▸ 표시가 사라져 그냥 글자로 보였습니다 -- 펼 수 있다는 표시를 직접 답니다. */
.add-many > summary::-webkit-details-marker { display: none; }
.add-many > summary::before {
content: '▸'; display: inline-block; width: 1em; color: var(--brand-ink); transition: transform .15s;
}
.add-many[open] > summary::before { transform: rotate(90deg); }
/* ---- «누구에게»: 한 명씩 / 그룹 전체 ----------------------------------------
같은 물음을 세 군데에서 세 모양으로 물었습니다 -- 숙제는 학생 버블이 기본에
그룹은 접힌 단추 뒤, 교재 배정과 학습 메뉴는 그룹만 있는데 첫 그룹이 미리
골라져 있었습니다. 한 모양으로 모읍니다. 설정 화면의 갈래 탭과 같은 모양이라
선생님이 이미 아는 손놀림입니다. */
.whotabs { margin-bottom: 8px; width: fit-content; max-width: 100%; }
.whobox { margin-top: 12px; }
.whobox + .whobox { margin-top: 16px; }
/* 한 명씩일 때 내미는 길잡이. «여기서는 못 한다» 로 끝내지 않고 할 수 있는
자리로 데려다 줍니다 -- 못 찾겠다는 말을 이 자리에서 들었습니다. */
.who-say {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 14px; border-radius: 10px;
background: var(--tint); border: 1px solid var(--line);
font-size: 14px; color: var(--ink-soft);
}
.who-say b { color: var(--ink); }
.who-say button { flex: 0 0 auto; }
/* 고르기 전에는 단추를 못 누릅니다. 미리 골라 두지 않기로 한 이상, 안 고르고
누른 사람에게 «그룹을 고르세요» 를 나중에 말하는 것보다 낫습니다. */
.who-pane button[disabled] { opacity: .45; cursor: not-allowed; }
/* 방금 데려다 준 자리를 잠깐 밝힙니다. 화면이 길어서 «갔는데 어디를 보라는
거지» 가 됩니다. */
@keyframes who-flash { from { background: var(--brand-soft); } to { background: transparent; } }
.who-flash { animation: who-flash 1.6s ease-out; border-radius: 10px; }
/* ---- 숙제 «한 명씩» 고르개 -------------------------------------------------
백예순아홉 명이면 버블이 백예순아홉 개 깔립니다. 그 벽 때문에 «무엇을» 이
1373px 아래로 밀려나서, 숙제 하나 내는 데 화면을 한참 굴려야 했습니다.
칸 높이를 묶고 그 안에서 굴립니다 -- 스무 명짜리 학원은 다 들어가서 굴릴 일이
없고, 큰 학원은 위의 찾기 칸으로 바로 집습니다. */
#hwWho {
max-height: 236px; overflow-y: auto;
/* 안쪽 목록 끝에서 화면 전체가 따라 움직이지 않게 */
overscroll-behavior: contain;
padding: 2px;
}
/* ---- 교재 뽑기 -------------------------------------------------------------
미리보기는 **진짜 그 글**을 띄웁니다 (틀을 따로 그리지 않습니다). 그래야
인쇄한 종이와 화면이 다를 수가 없습니다. 교재 쪽은 A4 라 폭을 억지로 줄이면
줄이 달라지므로, 좁은 화면에서는 가로로 굴려서 봅니다. */
.wb-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.wb-bar .mini { margin-left: auto; }
.wb-frame {
width: 100%; height: 72vh; min-height: 420px;
border: 1px solid var(--line, #ddd); border-radius: 10px; background: #e8e8ea;
}
/* 폰에서는 한 화면에 A4 폭이 안 들어갑니다. 높이를 줄여 두어, 미리보기를 보는
동안에도 위의 고르개가 함께 보이게 합니다 -- 폰에서 가장 자주 하는 일이
«색을 바꿔 가며 다시 보기» 입니다. */
@media (max-width: 640px) { .wb-frame { height: 56vh; } }
/* 숙제 미리보기 아래의 경고 한 줄. 「이렇게 나갑니다」 와 같은 상자 안에 두되
줄을 갈라 둡니다 -- 범위 옆에 붙여 두면 긴 문장이 미리보기를 덮습니다. */
.hw-warn {
flex-basis: 100%; margin-top: 8px; padding-top: 8px;
border-top: 1px dashed var(--line, #ddd);
font-size: 13px; line-height: 1.55; color: var(--ink2, #6b6560);
}
.hw-warn b { color: #b4601c; margin-right: 6px; }
/* 교재를 다시 만드는 동안. 미리보기가 **옛 교재**를 그대로 들고 있으면, 고르개를
바꿨는데 안 바뀐 것처럼 보입니다 -- 몇 초 동안 그렇습니다. */
.wb-loading .wb-frame { opacity: .45; transition: opacity .15s; }
.wb-loading .wb-bar::after {
content: '만드는 중 …'; font-size: 13px; color: var(--ink2, #6b6560);
}
/* 폰에서는 고르개를 한 줄에 하나씩. 두 개씩 놓으면 「문제지 — 아이에게 줄 것」이
「문제지 — 아이(」 로 잘려서, 무엇을 고르는지 글자만 보고는 모릅니다. */
@media (max-width: 480px) {
.pane[data-pane="books"] .row > div { flex: 1 1 100%; min-width: 0; }
.pane[data-pane="books"] .row > div select { width: 100%; }
}
/* 개인정보·동의 (2026-10-08). 동의를 적은 학생 버블은 옅은 초록 테두리 + 날짜. */
.teacher-layout .cn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.teacher-layout .cn-chips .chip.cn-ok:not(.on) { border-color: #9fd3ae; background: #f2faf4; }
.teacher-layout .cn-when { font-style: normal; font-size: 12px; color: #3a8a52; }
.teacher-layout .cn-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.teacher-layout .cn-act .chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* ==== 2026-10 디자인 손질 — 선생님 화면을 «업무용 프로그램» 처럼 ===============
style.css 끝의 손질 층(서체 · 색 · 단추)을 그대로 따르고, 여기서는 틀만 바꿉니다:
· 가운데 1200px 상자 → 화면 폭을 쓰는 «왼쪽 메뉴 + 본문» (1440px 까지)
· 떠 있는 흰 메뉴 카드 → 회색 바탕에 붙은 조용한 메뉴(고른 줄만 흰 칸)
· 카드 속 카드(.subcard)가 겹겹이 보이던 것 → 선 하나로 나뉜 구역
· 숫자 칸의 색 눈금 → 숫자만 크게
좁은 화면(860px 아래)의 규칙은 위쪽 것이 그대로 이깁니다. */
body > .wrap { max-width: 1440px !important; padding: 24px 28px 72px; }
@media (max-width: 860px) { body > .wrap { padding: 16px 14px 64px; } }
/* 넓은 화면에서만 -- 860px 아래는 style.css 가 메뉴를 위로 올려 한 칸으로 만듭니다.
이 줄이 그 규칙을 덮어 폰에서 본문이 84px 이 된 적이 있습니다. */
@media (min-width: 861px) {
.teacher-layout { grid-template-columns: 216px minmax(0, 1fr); gap: 32px; }
}
/* 861~1100(가로 태블릿 · 좁은 노트북): 옆 메뉴 216 + 틈 32 + 여백 56 을 빼면 본문이 552px(900 폭) 밖에 안 남아
학생별 현황 · 배치고사 · 명단 표가 옆으로 굴러야 보였습니다(2026-11-01). 메뉴 글은 «숙제·채점 ⑦» 이 가장 긴데
168px 에 들어갑니다. */
@media (min-width: 861px) and (max-width: 1100px) {
.teacher-layout { grid-template-columns: 168px minmax(0, 1fr); gap: 20px; }
body > .wrap { padding-left: 18px; padding-right: 18px; }
}
.tnav {
top: 84px; gap: 2px; padding: 0;
background: none; border: 0; box-shadow: none; border-radius: 0;
}
.tnav .nav-sec {
font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
color: #8a94a1; padding: 16px 12px 6px;
}
.tnav .nav-sec:first-child { padding-top: 2px; }
.tnav button {
padding: 9px 12px; border-radius: 8px; color: #3f4854; font-size: 14.5px; font-weight: 600;
white-space: nowrap;
}
.tnav button svg { color: #7b8592; }
.tnav button:hover { background: rgba(16, 24, 40, .05); color: var(--ink); }
.tnav button.active {
background: #fff; color: var(--ink);
box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px var(--line);
}
.tnav button.active svg { color: var(--brand); }
.tnav button.active::before { display: none; }
.tnav .badge { background: var(--brand-btn); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
.tnav { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; }
.tnav button { white-space: normal; }
}
/* 태블릿 세로(541~860px): 접히는 줄이라 원장 메뉴 아홉 개가 일곱 + 둘(820px)로 들쭉날쭉했습니다.
폰처럼 다섯 칸 두 줄(5 + 4), 아이콘 위 · 이름 아래로 칸을 맞춥니다(옆으로 두면 541px 에서
«수업·시간표» 가 옆 칸으로 넘쳤습니다).
낮은 가로 화면(가로 · 높이 560 아래 · 폭 700 넘게)은 메뉴를 왼쪽 옆칸으로 세우므로 뺍니다 --
아래 세 갈래가 바로 그 «나머지» 입니다(높이가 넉넉하거나 · 폭이 700 아래거나 · 세로). */
@media (min-width: 541px) and (max-width: 860px) and (min-height: 561px),
(min-width: 541px) and (max-width: 699px),
(min-width: 541px) and (max-width: 860px) and (orientation: portrait) {
.tnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.tnav button {
position: relative; width: auto; min-width: 0; min-height: 58px; padding: 8px 4px; gap: 4px;
flex-direction: column; align-items: center; justify-content: center;
}
.tnav .nav-txt { flex-direction: column; align-items: center; flex: none; }
.tnav .nav-txt > span { font-size: 13px; line-height: 1.2; }
.tnav .badge, .tnav .nav-sum {
position: absolute; top: 5px; left: calc(50% + 10px); margin: 0;
min-width: 16px; height: 16px; font-size: 10.5px; line-height: 16px; padding: 0 4px;
}
.tnav .nav-sum.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }
}
/* 그룹 고르개 · 새로고침 · 엑셀 -- 본문 맨 위 한 줄 */
.toolbar { margin-bottom: 18px; min-height: 36px; }
.toolbar .tb-right button.mini { min-height: 34px; }
/* 오늘 -- 날짜를 화면 제목처럼 */
.today-title h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; }
.today-title p { margin: 6px 0 0; }
.today-quick button { min-height: 38px; }
/* 숫자 칸 */
.stat {
background: var(--card); border: 1px solid var(--line); padding: 16px 18px;
}
.stat b { font-size: 28px; font-weight: 800; }
.stat span { font-size: 13px; font-weight: 500; }
/* 카드 속 구역: 겹친 상자 대신 위쪽 선 하나 */
.pane .card .subcard {
background: none; border: 0; border-top: 1px solid var(--line);
border-radius: 0; padding: 22px 0 4px; margin: 0;
}
.pane .card .subcard:first-of-type { border-top: 0; padding-top: 8px; }
.pane .card > h2 + p.hint { margin-top: -6px; margin-bottom: 6px; }
/* 표: 바깥 테두리 하나, 머리 줄은 옅은 회색 */
.teacher-layout .tbl { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.teacher-layout th { padding: 10px 12px; }
.teacher-layout td { padding: 11px 12px; }
/* 둥근 칩(오늘 수업의 학생, 시간표 칸) */
.td-kid, .wk-chip { border-radius: 8px; }
.seg { border-radius: var(--r-sm); }
.seg button.on { background: var(--brand-btn); }
/* 숙제 내기: 넓은 화면에서 두 칸 (teacher.html 의 .hw-form) */
@media (min-width: 1100px) {
.hw-form { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.hw-side {
position: sticky; top: 84px;
background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius);
padding: 6px 18px 18px;
}
.hw-side .row { display: block; }
.hw-side .row > * { min-width: 0; }
/* 오른쪽 판이 화면보다 길면(1366x768 에서 약 750px) 위 sticky 가 소용없어 «숙제 내기» 가 y≈1080,
화면 밖이었습니다. 판을 화면 높이로 묶어 안에서 내려가게 하고, «숙제 내기» 줄은 판 아래에 붙여
어디까지 내려가 있든 바로 누를 수 있게 합니다. (문항 수 · 기한을 한 줄에 두면 기한 칸이
«연도-월» 로 잘려서 세로로 둡니다.) */
.hw-side { max-height: calc(100vh - 100px); overflow-y: auto; }
/* bottom: -18px -- 판 안쪽 여백(18px)만큼 내려야 판 바닥에 딱 붙습니다(0 이면 밑으로 글자가 비침) */
.hw-side .hw-go { position: sticky; bottom: -18px; z-index: 2; margin: 10px -18px -18px; padding: 10px 18px 18px;
background: var(--tint); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 -8px 16px -12px rgba(0,0,0,.25); }
}
.hw-go { margin-top: 10px; }
.hw-go #hwAddMsg .msg { margin: 0 0 8px; }
/* 선생님 화면의 Day 숫자판은 칸 너비를 고정합니다 -- 화면 폭만큼 늘어나 칸 하나가
120px 이 되면 «며칠» 이 아니라 «단추 벽» 으로 보입니다. */
@media (min-width: 861px) {
/* 2026-10: 52px 로 못박았더니 숙제 내기 왼쪽 칸(약 600px)보다 넓어져 Day 12 · 24 가
오른쪽 «이번 숙제» 판 밑으로 들어가 눌리지 않았습니다. 52px 은 «최대» 로만. */
.teacher-layout .daygrid { grid-template-columns: repeat(12, minmax(0, 52px)); }
}
/* 화면 안의 두 갈래 단추(.seg)도 칸 고르개(.sectabs)와 같은 모양으로 -- 진한 대표색 판은
«누르면 무엇이 일어나는 단추» 처럼 보여서, 같은 일을 하는 두 고르개가 달라 보였습니다. */
.seg { background: var(--tint); border: 1px solid var(--line); padding: 4px; gap: 4px; }
.seg button { border-radius: 8px; color: var(--ink-soft); font-weight: 600; }
.seg button:hover { background: #fff; color: var(--ink); }
.seg button.on { background: #fff; color: var(--brand-ink); box-shadow: var(--shadow); }
.seg { box-shadow: none; }
/* 왼쪽 메뉴 묶음 (teacher.html NAV_GROUPS): 묶인 화면의 단추는 숨기고, 본문 위 갈래 단추로 */
.tnav button.nav-sub { display: none !important; }
/* 화면 갈래(학생 관리 | 개인정보·동의)는 밑줄 탭으로: 그 아래 그룹 칩 · 칸 탭과 똑같은 베이지 알약이면
셋 중 무엇이 «화면을 바꾸는» 것인지 구분이 안 됐습니다. */
.subnav { margin-bottom: 18px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 22px; box-shadow: none; }
.subnav .sectab { background: none; box-shadow: none; border-radius: 0; padding: 6px 2px 10px; min-height: 0; font-size: 17px; font-weight: 700; color: var(--ink-soft); }
.subnav .sectab:hover { background: none; color: var(--ink); }
.subnav .sectab.on { background: none; box-shadow: inset 0 -3px 0 var(--brand); color: var(--ink); }
.subnav .badge {
margin-left: 6px; background: var(--brand-btn); color: #fff; border-radius: 99px;
font-size: 11px; padding: 1px 7px; font-weight: 700;
}
/* «학생» 묶음 머리의 표시는 숫자 대신 점: 동의 안 적은 수가 전체 학생 수와 같아 «학생 303» 으로 읽혔습니다 */
.tnav .nav-sum.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%; }
/* 폰 메뉴: 네 칸씩이면 원장 메뉴 아홉 개가 세 줄(셋째 줄에 «도움말» 하나)이 됩니다. 다섯 칸 두 줄로 */
@media (max-width: 540px) { .tnav { grid-template-columns: repeat(5, 1fr); } }
/* 제목 옆 ⓘ (teacher.html foldHints) */
.hint-fold { display: none; }
.hint-fold.open { display: block; margin-top: -2px !important; margin-bottom: 10px; }
.hint-i {
flex: none; width: 20px; height: 20px; min-height: 0; padding: 0; margin-left: 2px;
border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-soft);
font: italic 700 12px/18px Georgia, serif; text-align: center; vertical-align: 2px;
}
.hint-i:hover, .hint-i[aria-expanded="true"] { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
/* 그림은 20px 그대로, 누르는 자리만 사방 8px 넓힙니다(36px) -- 손가락으로는 자꾸 빗나갔습니다. */
.hint-i { position: relative; }
.hint-i::after { content: ''; position: absolute; inset: -8px; }
/* 줄 끝 «⋯» 메뉴 */
.more-btn { min-width: 34px; font-size: 16px; line-height: 1; letter-spacing: 1px; }
.more-menu {
position: fixed; z-index: 60; min-width: 150px; padding: 4px;
background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lift);
}
.more-menu button {
display: block; width: 100%; text-align: left; min-height: 36px; padding: 8px 12px;
background: none; color: var(--ink); font-size: 14px; font-weight: 500; border-radius: 8px;
}
.more-menu button:hover { background: var(--tint); }
.more-menu button.danger { color: var(--bad); }
/* 머리글 «학생 찾기» */
/* 머리줄이 모자라면 줄어드는 것은 검색창입니다 -- 단추 글자(«나가/기»)나 이름표가 쪼개지지 않게 */
header.bar .who, header.bar #outBtn { white-space: nowrap; flex: none; }
/* 폰: 로고 + «원장 (마스터 암호)» 이름표 + 나가기가 모자라면 단추가 화면 밖으로 밀립니다(320px 21px ·
머리줄이 바뀐 뒤 360px 29px). 이름표만 «…» 로 줄어들게 합니다 -- 자리가 넉넉하면 줄지 않습니다. */
header.bar #who, header.bar #whoBadge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qfind { position: relative; margin-left: auto; width: min(260px, 32vw); flex: 0 4 auto; min-width: 120px; } /* 모자라면 이름표보다 먼저 줄어듭니다 */
.qfind input { min-height: 38px; padding: 7px 12px 7px 34px; font-size: 14px; background:
#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 11px 50% / 16px no-repeat; }
.qfind-list {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70; padding: 4px;
background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lift);
}
.qfind-item {
display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 36px; padding: 7px 10px;
background: none; color: var(--ink); border-radius: 8px; font-size: 14px; font-weight: 500; text-align: left;
}
.qfind-item small { margin-left: auto; color: var(--ink-soft); }
.qfind-item.on, .qfind-item:hover { background: var(--tint); }
.qfind-none { padding: 10px; font-size: 13px; color: var(--ink-soft); }
header.bar .qfind + .who, header.bar .qfind ~ #whoBadge { margin-left: 0; }
/* 강사 이름표 = «내 암호 바꾸기» 여는 단추(teacher.html loadWhoami) */
header.bar #whoBadge[role="button"] { cursor: pointer; }
header.bar #whoBadge[role="button"]:hover { border-color: var(--brand); }
/* 폰: 학부모 전화는 폰으로 받는데 검색이 폰에서만 없었습니다. 돋보기 하나로 줄여 두고,
누르면 머리줄 위로 넓게 펼칩니다(키보드 · 목록 동작은 그대로). */
@media (max-width: 640px) {
.qfind { display: block; flex: 0 0 40px; width: 40px; min-width: 40px; margin-left: auto; }
.qfind input { padding: 7px 8px 7px 34px; }
.qfind input:not(:focus) { color: transparent; cursor: pointer; }
.qfind input:not(:focus)::placeholder { color: transparent; }
.qfind:focus-within { position: absolute; left: 12px; right: 12px; top: 8px; width: auto; z-index: 80; }
}
/* 성적 · 학생별 현황: 정렬되는 머리 칸, 점수 색, 이름 + 코드 한 칸 */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
th.sortable .sort-mark { font-style: normal; font-size: 10px; margin-left: 4px; opacity: .45; }
th.sortable.on { color: var(--ink); }
th.sortable.on .sort-mark { opacity: 1; color: var(--brand-ink); }
td.who-cell small { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.sc { display: inline-block; min-width: 52px; text-align: center; padding: 2px 8px; border-radius: 99px;
font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.sc-hi { background: #e9f4ee; color: #23663f; }
.sc-mid { background: #fdf6ea; color: #8a5a12; }
.sc-lo { background: #fbeaea; color: #a03434; }
/* 폰에서 표 → 카드 (teacher.html labelTables 가 칸마다 data-label 을 답니다) */
@media (max-width: 640px) {
.pane .tbl { border: 0; background: none; overflow: visible; border-radius: 0; }
.pane .tbl > table { min-width: 0 !important; width: 100%; }
.pane .tbl > table, .pane .tbl > table > tbody,
.pane .tbl > table > tbody > tr, .pane .tbl > table > tbody > tr > td { display: block; }
.pane .tbl > table > thead { display: none; }
.pane .tbl > table > tbody > tr {
background: var(--card); border: 1px solid var(--line); border-radius: 12px;
padding: 10px 14px; margin-bottom: 8px; box-shadow: var(--shadow);
}
.pane .tbl > table > tbody > tr:hover > td { background: none; }
.pane .tbl > table > tbody > tr > td {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 4px 0; border: 0; text-align: right; min-height: 0; white-space: normal;
}
.pane .tbl > table > tbody > tr > td::before {
content: attr(data-label); flex: none; text-align: left;
font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.pane .tbl > table > tbody > tr > td[data-label=""]::before { display: none; }
/* 첫 칸은 카드 제목 */
.pane .tbl > table > tbody > tr > td:first-child {
justify-content: flex-start; text-align: left; font-size: 16px; font-weight: 700;
padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft);
}
.pane .tbl > table > tbody > tr > td:first-child::before { display: none; }
.pane .tbl > table > tbody > tr > td:empty { display: none; }
/* 단추 칸은 맨 아래 오른쪽 */
.pane .tbl > table > tbody > tr > td.acts { justify-content: flex-end; padding-top: 8px; }
.pane .tbl > table > tbody > tr > td.acts::before { display: none; }
.pane .tbl td.wide-only { display: none !important; }
.pane .tbl input { max-width: 60%; }
}
/* 카드 안은 두 칸씩: 이름표는 작게 위, 값은 아래 -- 한 줄에 하나씩이면 서른 명이 1만 px 입니다 */
@media (max-width: 640px) {
.pane .tbl > table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 6px; }
.pane .tbl > table > tbody > tr > td {
flex-direction: column; align-items: flex-start; justify-content: flex-start;
gap: 2px; text-align: left; padding: 2px 0;
}
.pane .tbl > table > tbody > tr > td::before { font-size: 11.5px; }
.pane .tbl > table > tbody > tr > td > * { max-width: 100%; }
.pane .tbl > table > tbody > tr > td:first-child,
.pane .tbl > table > tbody > tr > td.acts { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.pane .tbl > table > tbody > tr > td.acts { justify-content: flex-end; }
.pane .tbl input { max-width: 100%; width: 100%; }
}
@media (max-width: 640px) {
.pane .tbl > table > tbody > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
.pane .tbl > table > tbody > tr > td:has(> input) { grid-column: span 2; }
.pane .tbl > table > tbody > tr > td[data-label="QR 카드"] { display: none; }
.pane .tbl > table > tbody > tr > td { font-size: 14px; }
}
/* 단추 칸(수정 · ⋯)은 카드 제목 줄 오른쪽으로 -- 카드마다 한 줄이 줄어듭니다 */
@media (max-width: 640px) {
.pane .tbl > table > tbody > tr > td:first-child { grid-column: 1 / 3; grid-row: 1; border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pane .tbl > table > tbody > tr > td.acts { grid-column: 3; grid-row: 1; padding-top: 0; }
.pane .tbl > table > tbody > tr:has(> td.acts) > td:first-child { grid-column: 1 / 3; }
.pane .tbl > table > tbody > tr > td:nth-child(2) { margin-top: 4px; }
}
/* 학생 창 = 그 학생의 모든 일 (2026-10) */
.sh-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
padding: 10px 22px; border-bottom: 1px solid var(--line-soft); background: var(--card); }
.sh-acts-fill { flex: 1; }
.sh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.sh-stat { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); }
.sh-stat b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums; color: var(--ink); }
.sh-stat span { font-size: 12.5px; color: var(--ink-soft); }
.sh-stat.hi b { color: #23663f; } .sh-stat.mid b { color: #8a5a12; } .sh-stat.lo b { color: #a03434; }
.sh-manage { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sh-manage table { width: 100%; border-collapse: collapse; }
.sh-manage th { width: 92px; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-soft);
padding: 10px 12px; background: var(--tint); vertical-align: top; }
.sh-manage td { padding: 8px 12px; }
.sh-manage tr + tr > * { border-top: 1px solid var(--line-soft); }
@media (max-width: 640px) {
.sh-acts { padding: 8px 14px; }
.sh-stat { padding: 8px 10px; } .sh-stat b { font-size: 17px; }
.sh-manage th { width: 72px; padding: 10px 8px; }
}
/* 명단: 읽기만 하는 줄. 칩은 한 줄에 */
table.roster tbody tr.tap { cursor: pointer; }
.cell-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
table.roster td.acts { white-space: nowrap; text-align: right; }
.ed-who { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-who label { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--ink-soft); margin: 0; }
.who-line { display: flex; align-items: center; gap: 10px; }
.who-line > input { width: 120px !important; padding: 4px 8px !important; font-size: 13px !important; min-height: 0; }
/* 명단(모든 폭): 가로 태블릿(641~690 · 861~990px)에서 이름 칸이 120px 로 버티는 사이 코드 단추가
한 글자씩 세로로 꺾여(전역 overflow-wrap:anywhere) 줄이 160~185px 이 됐습니다. 코드는 한 줄로 두고,
자리가 모자라면 이름 칸이 다음 줄로 내려가거나 줄어듭니다. 낱말 가운데서는 끊지 않습니다. */
table.roster td { overflow-wrap: break-word; }
table.roster .who-line { flex-wrap: wrap; row-gap: 4px; }
table.roster .who-line > .linky { flex: none; white-space: nowrap; }
table.roster .who-line > input { flex: 1 1 96px; min-width: 0; width: 96px !important; }
/* ↑ width:auto 이면 빈 «별명·이름» 칸이 제 기본 폭(220px)을 표의 최소 폭으로 우겨, 사이드바가 있는 가로 태블릿
(1024)에서 명단 표가 칸보다 73px 넓어지고 «수정 · −» 단추가 오른쪽 밖으로 잘렸습니다(2026-11-01).
기본 폭을 96px 로 못 박고, 남는 자리는 flex 로 늘어납니다. */
@media (hover: hover) and (min-width: 641px) { table.roster tbody tr.tap:hover > td { background: var(--tint); } }
.sh-manage tr:hover > * { background: inherit; }
.sh-manage td { background: var(--card); }
.more-menu .phone-only { display: none; }
@media (max-width: 640px) {
.more-menu .phone-only { display: block; }
#stSheet #shParent, #stSheet #shPrint { display: none; }
}
@media (max-width: 640px) { #stSheet #shClose { margin-left: auto; } }
/* 폰 명단 카드: 로그인 칸은 알릴 것(첫 로그인 전 · QR 카드)이 있을 때만 */
@media (max-width: 640px) {
.pane .tbl > table.roster > tbody > tr > td.quiet { display: none; }
}
/* 숙제 내기: 1 누구에게 · 2 무엇을 · 3 범위 · 4 문항 수·기한 (2026-10) */
label.step { display: flex; align-items: center; gap: 8px; margin: 22px 0 8px;
font-size: 15px; font-weight: 700; color: var(--ink); }
.hw-main > label.step:first-of-type { margin-top: 4px; }
label.step > i { flex: none; width: 22px; height: 22px; border-radius: 50%;
display: inline-grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700;
background: var(--tint); color: var(--ink-soft); border: 1px solid var(--line); }
label.step.done > i { background: var(--brand); color: #fff; border-color: transparent; font-size: 0; }
label.step.done > i::after { content: '✓'; font-size: 12px; }
.hw-side label.step { margin-top: 16px; }
.pane[data-pane="hw"] .range-hint { display: none; }
.hw-preview { display: block; margin: 12px 0 0; padding: 12px 14px; background: var(--card);
border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.hw-preview.todo { border-style: solid; }
.hw-preview .hp-title { font-size: 12.5px; font-weight: 700; color: var(--brand-ink); margin-bottom: 6px; }
.hw-preview.todo .hp-title { color: var(--ink-soft); }
.hw-preview .hp-row { display: grid; grid-template-columns: 70px 1fr; gap: 8px; padding: 5px 0;
border-top: 1px solid var(--line-soft); }
.hw-preview .hp-row:first-of-type { border-top: 0; }
.hw-preview .hp-k { color: var(--ink-soft); font-size: 13px; }
.hw-preview .hp-v { color: var(--ink); font-weight: 600; word-break: keep-all; }
.hw-preview .hp-row.empty .hp-v { color: var(--line); font-weight: 400; }
.hw-preview .hp-todo { margin-top: 8px; font-size: 13px; color: #8a5a12; background: #fdf6ea;
border-radius: 8px; padding: 6px 10px; }
#hwAdd.not-ready { opacity: .55; }
.hw-find { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hw-find > input { flex: 1 1 220px; max-width: 360px; }
.hw-find-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.hw-find-acts #hwWhoCount { color: var(--brand-ink); font-weight: 700; }
#hwWho .bubble.more { color: var(--brand-ink); font-weight: 600; background: transparent; }
.bubble-row .bubble.more { color: var(--brand-ink); font-weight: 600; background: transparent; }
#scForm { margin-top: 6px; }
#scForm > label:not(.step) { margin-top: 12px; }
#scList:empty { display: none; }
/* 오늘 · 살펴볼 학생 */
.td-watch { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.td-w { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
min-height: 48px; padding: 8px 12px; background: var(--card); color: var(--ink); text-align: left;
border: 1px solid var(--line); border-radius: 12px; box-shadow: none; font-weight: 600; font-size: 14.5px; }
.td-w:hover { border-color: var(--brand); background: var(--tint); }
.td-w-why { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.td-w-why .sc { min-width: 0; font-size: 12px; padding: 2px 7px; }
.td-w-more { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
.td-watch > .td-clear { grid-column: 1 / -1; }
/* 학생 창 · 점수 흐름 (teacher.html scoreTrend) */
.trend { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 4px; margin: 0 0 10px; background: var(--card); }
.trend-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.trend-h b { font-size: 13.5px; color: var(--ink); }
.trend-svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.trend-base { stroke: var(--line); stroke-width: 1; }
.trend-ax { font-size: 11px; fill: var(--ink-soft); }
.trend-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-hit { fill: transparent; cursor: pointer; }
.trend-dot { fill: var(--brand); stroke: var(--card); stroke-width: 2; pointer-events: none; }
.trend-pt:hover .trend-dot, .trend-pt:focus .trend-dot { r: 7; }
.trend-pt:focus { outline: none; }
.trend-val { font-size: 13px; font-weight: 700; fill: var(--ink); }
.td-w-more { font-size: 13.5px; font-weight: 600; color: var(--brand-ink); }
.trend-h { flex-wrap: wrap; }
.trend-kinds { margin-left: auto; display: inline-flex; gap: 4px; flex-wrap: wrap; }
.trend-kinds .chip { min-height: 26px; padding: 2px 10px; font-size: 12px; }
/* 진행 중인 숙제: 다 한 것은 아래로 옅게, 한 사람 수는 막대로 */
.hw-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between;
background: #e9f6ee; color: #1f6b40; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; }
.hw-bulk b { color: #1f6b40; }
tr.hw-fin > td { color: var(--ink-soft); }
tr.hw-fin > td .linky { color: var(--ink-soft); }
.hw-all { color: #1f6b40; font-weight: 700; font-size: 13px; white-space: nowrap; }
.hw-prog { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hw-bar { width: 56px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; display: inline-block; }
.hw-bar > i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
/* 선생님 화면에서는 범위 밑 긴 설명을 접습니다 -- «만들기 · 숙제 내기» 를 누르면 고른 범위로 됩니다 */
.teacher-layout .range-hint { display: none; }
/* 보호자 동의: 위 도구 한 줄 · 가운데 이름 · 아래 «고른 학생에게» 한 줄 */
.cn-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.cn-tools > input { flex: 1 1 200px; max-width: 320px; margin: 0; }
.cn-tools > #cnPickMissing { margin-left: auto; }
.cn-chips .chip.more { color: var(--brand-ink); font-weight: 600; background: transparent; }
.cn-act { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px;
padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint); }
.cn-n { font-size: 14px; color: var(--brand-ink); min-width: 90px; }
.cn-n.zero { flex-basis: 100%; } /* 안 골랐을 때 안내는 자기 줄 -- «받은 방법» 이름표처럼 읽히지 않게 */
.cn-act-f { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cn-act-b { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.cn-n.zero { color: var(--ink-soft); font-weight: 500; }
/* 반 한눈에 (teacher.html loadBoard) */
.bd-tools { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 10px; }
.bd-legend { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
.bd-lg { display: inline-flex; align-items: center; gap: 4px; }
.bd-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
/* 긴 표는 머리 줄이 밀려 올라가 «Day 몇» · «평균» 이 어느 칸인지 몰랐습니다. th 의 sticky 는
가로 스크롤 상자에 붙어 페이지 스크롤에는 소용없어서, 표마다 제 상자 안에서 내려가게 하고
머리 줄을 그 위에 붙입니다(반 한눈에의 왼쪽 학생 칸 고정은 그대로). */
@media (min-width: 861px) {
.pane[data-pane="grades"] .bd-wrap { max-height: calc(100vh - 260px); overflow: auto; }
.pane[data-pane="grades"] #summary { max-height: calc(100vh - 240px); overflow: auto; }
.pane[data-pane="grades"] #summary thead th { position: sticky; top: 0; z-index: 1; background: var(--tint); }
}
table.bd { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 860px; font-size: 13px; }
table.bd th { position: sticky; top: 0; background: var(--tint); font-weight: 600; color: var(--ink-soft);
font-size: 11.5px; padding: 8px 2px; text-align: center; z-index: 1; }
table.bd td { padding: 3px 2px; border-top: 1px solid var(--line-soft); text-align: center; }
table.bd .bd-who { position: sticky; left: 0; background: var(--card); text-align: left; padding: 6px 10px;
min-width: 150px; z-index: 2; }
table.bd th.bd-who { background: var(--tint); z-index: 3; }
table.bd td.bd-who { display: flex; align-items: center; justify-content: space-between; gap: 6px; white-space: nowrap; }
table.bd td.bd-who .level-chip, table.bd td.bd-who .lv { font-size: 11px; }
table.bd .bd-d { width: 26px; }
table.bd .bd-sum { padding: 6px 10px; text-align: right; white-space: nowrap; min-width: 70px; }
.bd-c { display: inline-block; width: 22px; height: 22px; border-radius: 5px; border: 0; padding: 0; min-height: 0;
vertical-align: middle; box-shadow: none; }
button.bd-c { cursor: pointer; }
button.bd-c:hover, button.bd-c:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.bd-c.none { background: transparent; border: 1px dashed var(--line); }
.bd-c.b1 { background: #86b6ef; } .bd-c.b2 { background: #5598e7; } .bd-c.b3 { background: #2a78d6; }
.bd-c.b4 { background: #1c5cab; } .bd-c.b5 { background: #104281; }
.bd-legend .bd-c { width: 14px; height: 14px; border-radius: 3px; }
@media (max-width: 640px) {
table.bd .bd-who { min-width: 0; padding: 6px 8px; }
table.bd td.bd-who .lv, table.bd td.bd-who [class*="level"] { display: none; }
.bd-legend { margin-left: 0; }
}
/* 반 한눈에 · 골라서 숙제 */
.bd-pick { display: inline-flex; margin: 0; }
.bd-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
table.bd td.bd-who { justify-content: flex-start; }
table.bd td.bd-who .level-chip { margin-left: auto; }
.bd-bar { position: sticky; bottom: 12px; z-index: 5; margin-top: 10px; display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--brand);
box-shadow: var(--shadow-lift); }
.bd-bar b { color: var(--brand-ink); margin-right: auto; }
/* 학생 창 · 상담 메모 */
.notes { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; background: var(--card); }
.notes-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.notes-h b { font-size: 13.5px; color: var(--ink); }
.notes-in { display: flex; gap: 8px; align-items: flex-end; }
.notes-in textarea { flex: 1; margin: 0; font-size: 14px; min-height: 0; resize: vertical; }
.notes-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.note { background: var(--tint); border-radius: 10px; padding: 8px 10px; }
.note-h { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.note-h .note-del { margin-left: auto; font-size: 12px; color: var(--ink-soft); }
.note-b { font-size: 14px; white-space: pre-wrap; margin-top: 2px; }
.notes-in textarea { font-family: inherit; }
table.bd tr.bd-nobook td { text-align: left; padding: 10px 12px; background: var(--tint); }
table.bd tr.bd-nobook summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.bd-nb-list { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13.5px; }
table.bd tr.bd-nobook td { position: sticky; left: 0; }
/* 폰 명단: 학생 한 명 = 한 줄 (2026-10). 카드 한 장이 124px 이라 여든 명이 10,000px 이었습니다.
바꾸는 일은 전부 학생 창에 있으므로(줄을 누르면 열림) 줄에는 이름 · 반 · 교재만.
고치는 줄(tr.editing)은 예전 카드 모양 그대로 둡니다. */
@media (max-width: 640px) {
.pane .tbl > table.roster > tbody > tr:not(.editing) {
display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
padding: 10px 12px; margin-bottom: 6px; min-height: 52px;
}
.pane .tbl > table.roster > tbody > tr:not(.editing) > td {
display: block; padding: 0; margin: 0; border: 0; min-height: 0; text-align: left;
}
.pane .tbl > table.roster > tbody > tr:not(.editing) > td::before { display: none; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td.who-cell { flex: 1; min-width: 0; font-size: 15px; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td.who-cell small { display: inline; margin-left: 6px; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td:nth-child(2) { flex: none; font-size: 12.5px; color: var(--ink-soft); }
/* 교재가 여럿인 아이(50권 다 연 아이)는 칩이 한 줄로 4,000px 넘게 늘어섰습니다 -- 줄어들게 하고 넘치는 칩은 가립니다(전부는 학생 창에) */
.pane .tbl > table.roster > tbody > tr:not(.editing) > td:nth-child(3) { flex: 0 1 auto; min-width: 0; max-width: 50%; overflow: hidden; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td:nth-child(3) .cell-chips { flex-wrap: nowrap; display: flex; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td:nth-child(3) .level-chip { flex: none; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td:nth-child(4),
.pane .tbl > table.roster > tbody > tr:not(.editing) > td.quiet,
.pane .tbl > table.roster > tbody > tr:not(.editing) > td.acts { display: none; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td .muted { font-size: 12.5px; }
.pane .tbl > table.roster > tbody > tr:not(.editing)::after { content: '›'; flex: none; color: var(--ink-soft); font-size: 18px; }
/* 교재가 둘인 아이는 이름 칸이 96px 로 고정이라 코드 단추가 Q/A/-/5/0/1 한 글자씩 꺾였습니다.
코드는 한 줄로 두고, 줄어드는 것은 이름 칸입니다. */
.pane .tbl > table.roster .who-line > .linky { flex: none; white-space: nowrap; }
.pane .tbl > table.roster .who-line > input { width: auto !important; flex: 1 1 0; min-width: 48px; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td:nth-child(3) { max-width: 38%; }
/* 긴 이름(12자) + 긴 그룹(12자): 그룹 칸이 줄지 않아(flex: none) 이름이 «김/수/한/무…» 한 글자씩 세로로
섰습니다(2026-11-01). 그룹 머리 줄이 있으면 그룹 칸은 접고(같은 말), 없으면(찾기 · 그룹 하나) 줄며 말줄임, 이름은 3.5em 은 지키고 말줄임. */
.pane .tbl > table.roster > tbody > tr:not(.editing) > td:nth-child(2) { flex: 0 1 auto; min-width: 0; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td.who-cell { min-width: 3.5em; }
.pane .tbl > table.roster.grouped > tbody > tr:not(.editing) > td:nth-child(2) { display: none; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td:nth-child(3) { flex-shrink: 0; }
.pane .tbl > table.roster > tbody > tr:not(.editing) > td.who-cell > .linky { display: inline-block; vertical-align: bottom; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* 폰 인쇄물: 두 칸(무엇으로 | 문항 수, 종류 | 단 …)이 좁아 칩이 글자째 접혔습니다. 한 칸씩 */
@media (max-width: 640px) {
.pane[data-pane="print"] .row { flex-direction: column; align-items: stretch; }
.pane[data-pane="print"] .row > * { flex: 1 1 auto !important; width: 100%; min-width: 0; }
}
/* 오늘 수업: 왔나 점 (초록 = 오늘 공부함, 주황 = 시각이 지났는데 기록 없음) */
.td-kid .td-dot, .td-legend .td-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: transparent; margin-right: 5px; vertical-align: middle; flex: none; }
/* 아직 수업 전: 빈 동그라미 -- 예전에는 투명한 점이 이름 앞에 19px 빈자리로만 남아 «왜 띄었지» 로 보였습니다 (2026-10-30) */
.td-kid .td-dot { margin-right: 0; box-shadow: inset 0 0 0 1.5px var(--line); }
.td-kid.came .td-dot, .td-kid.nocome .td-dot { box-shadow: none; }
.td-legend .td-dot.wait { box-shadow: inset 0 0 0 1.5px var(--line); }
.td-kid.came .td-dot, .td-legend .td-dot.came { background: #1f9d55; }
.td-kid.nocome .td-dot, .td-legend .td-dot.nocome { background: #e8913a; }
.td-legend { font-size: 12.5px; }
.td-legend .td-dot.nocome { margin-left: 10px; }
/* 학생 창 · 교재 칸의 도장 24개 (아이 도장판과 같은 그림) */
.sheet .subcard .stamps.mini { margin: 10px 0 2px; gap: 4px; }
.sheet .subcard .stamps.mini i { max-width: 16px; }
/* 오늘 · 최근 7일 한 줄 */
.wk-sum { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.wk-sum .wk-h { align-self: center; font-size: 13px; color: var(--ink-soft); margin-right: 2px; }
.wk-t { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 12px;
background: var(--card); border: 1px solid var(--line); }
.wk-t span:first-child { font-size: 12.5px; color: var(--ink-soft); }
.wk-t b { font-size: 17px; font-variant-numeric: tabular-nums; }
.wk-d { font-size: 12px; font-weight: 700; }
.wk-d.up { color: #1f7a45; } .wk-d.down { color: #b4433b; } .wk-d.same { color: var(--ink-soft); font-weight: 500; }
/* 폰: 칸 셋이 한 줄에 하나씩 세 줄(150px)로 꺾였습니다 -- 세 칸으로 나란히, 칸 안은 위아래로 (2026-10-30) */
@media (max-width: 640px) {
.wk-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wk-sum .wk-h { grid-column: 1 / -1; }
.wk-t { flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; min-width: 0; }
.wk-t span:first-child, .wk-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
@media (max-width: 640px) { #shActs .wide-acts { display: none; } }
/* 폰: 단추 셋 다음의 «⋯» 하나만 둘째 줄로 떨어졌습니다(390px). 단추 옆 여백을 조금 줄이고,
좁은 폰에서는 «이름·그룹 고치기» 를 «고치기» 로 줄여 한 줄에 둡니다(무엇을 고치는지는 열면 보입니다). */
@media (max-width: 640px) { #shActs > button.mini { padding-left: 11px; padding-right: 11px; } }
@media (max-width: 420px) { #shActs .sh-long { display: none; } }
/* 학생 → 그룹 */
.grp-add { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; max-width: 460px; }
.grp-add input { flex: 1; margin: 0; }
.grp-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.grp-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card); min-height: 52px; }
.grp-row + .grp-row { border-top: 1px solid var(--line-soft); }
.grp-row .grp-name { font-size: 15px; min-width: 0; }
.grp-row .grp-n { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.grp-row.empty .grp-name { color: var(--ink-soft); }
.grp-row .grp-acts { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.grp-row.editing input { margin: 0; max-width: 200px; padding: 6px 10px; }
.grp-list > .grp-none { margin: 0; padding: 10px 14px; background: var(--tint); border-top: 1px solid var(--line-soft); }
.grp-list > .empty-state { margin: 0; border: 0; border-radius: 0; }
@media (max-width: 640px) { .grp-row { flex-wrap: wrap; } .grp-row .grp-acts { width: 100%; justify-content: flex-start; } }
/* 명단의 그룹 머리 줄 */
table.roster tr.grp-head > th { text-align: left; background: var(--tint); color: var(--ink); font-size: 13.5px;
font-weight: 800; padding: 10px 14px; border-top: 1px solid var(--line); }
table.roster tr.grp-head > th span { margin-left: 8px; font-weight: 500; color: var(--ink-soft); font-size: 12.5px; }
table.roster tbody tr.grp-head:hover > th { background: var(--tint); }
@media (max-width: 640px) {
.pane .tbl > table.roster > tbody > tr.grp-head { display: block; background: none; border: 0; box-shadow: none;
padding: 14px 4px 6px; margin: 0; min-height: 0; }
.pane .tbl > table.roster > tbody > tr.grp-head > th { display: block; background: none; border: 0; padding: 0; }
.pane .tbl > table.roster > tbody > tr.grp-head::after { content: none; }
}
/* 채점(공책 받아쓰기): 줄 어디를 눌러도 O/X 가 바뀝니다(teacher.html renderMarking).
단어 칸을 좁혀 단추를 단어 가까이 두고, X 줄은 바탕까지 붉게 해 O 줄과 한눈에 갈리게 합니다. */
.pane[data-pane="marking"] .grade-item { cursor: pointer; }
.pane[data-pane="marking"] .grade-item .txt { flex: 0 0 min(320px, 55%); }
.pane[data-pane="marking"] .grade-item:has(button.on-x) { background: #fdf3f3; }
.pane[data-pane="marking"] .grade-item:has(button.on-x) .txt { color: #a03434; font-weight: 600; }
/* 도움말 «먼저 이 세 가지»: 설명 안의 굵은 낱말까지 제목처럼 한 줄을 차지해 문장이 끊겼습니다.
(style.css 의 ol.steps li b 는 단계 제목용) 설명(span) 안의 b 는 글 속에 그대로 둡니다. */
ol.steps li span b { display: inline; font-size: inherit; color: var(--ink); }
/* 손가락 화면(폰 · 태블릿)의 작은 누름 자리: 26~30px 이라 옆 것을 누르기 쉬웠습니다. 마우스 화면은 그대로.
(반 한눈에의 Day 칸 .bd-c 22px 은 스물네 칸이 한 줄에 들어가야 해서 일부러 둡니다.) */
@media (pointer: coarse) {
.trend-kinds .chip { min-height: 34px; }
.wk-chip { min-height: 34px; }
.rp-state { min-height: 34px; }
.rm-tv-more summary { padding: 8px 0; }
}
/* 숙제 «누구에게»: 오늘 시간표에 있는 아이는 앞에 서고, 왼쪽에 작은 점이 붙습니다. */
.bubble.today { position: relative; padding-left: 22px; }
.bubble.today::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px;
margin-top: -3.5px; border-radius: 50%; background: var(--brand); }
.bubble.today.on::before { background: currentColor; }
/* 수업 기록 «그날 수업»: 시각마다 «이 시간 모두 기록» */
.ls-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.ls-slots .tb-label { font-size: 12.5px; color: var(--ink-soft); margin-right: 2px; }
/* 숙제 «각자 지난번 다음 범위» 미리 보기 */
.hw-plan table { font-size: 13.5px; }
.hw-plan tr.off td { color: var(--ink-soft); }
/* ==== 2026-10-22 개편: 선생님 화면을 한 체계로 ==================================
원장이 오후 수업 전에 하는 일(오늘 볼 학생 → 숙제 내기 → 채점 → 함께 풀기 →
학부모 리포트)을 PC(1366×768) · 가로 태블릿(1180×820)에서 직접 따라가 보고
걸린 것들입니다:
· 화면 머리에 고르개가 서너 층 -- 화면 갈래(숙제 | 채점) · 그룹 칩(+ 새로고침 ·
엑셀이 다음 줄로 밀림) · 칸 탭 · 카드. 숙제 내기 폼이 PC 에서 y≈370,
태블릿에서는 그룹 칩이 이름표 한 줄 + 칩 두 줄 + 단추 한 줄이 되어 y≈410.
· 칸 탭이 화면 폭을 다 쓰는 띠라 카드처럼 보였고, 같은 일을 하는 «수업·시간표»
의 갈래 단추(.seg)와 모양이 달랐습니다.
· 고르개 줄(.pick-row)의 칩 받침이 화면 끝까지 늘어나 «파트» 칩 열 개가
1,000px 띠가 되고, 학생 드롭다운은 폭 전체를 먹었습니다.
· 큰 단추(.wide)가 PC 에서 1,000px 알약 -- «채점 저장» · «저장» · «수업 기록하기»
가 화면에서 가장 큰 덩어리였습니다.
여기서 한 번에 정리합니다. 색 · 서체 변수(style.css :root)와 레벨 다섯 색은 그대로,
간격 · 크기 · 위계만. 메이플 옷(theme-maple.css)이 뒤에 읽히므로 같은 무게의 규칙은
.teacher-layout 을 붙여 이깁니다. */
:root {
--t-gap: 16px; /* 카드와 카드 · 큰 덩어리 사이 */
--t-pad: 24px; /* 카드 안쪽 */
--t-ctl-sm: 34px; /* 작은 단추(.mini) 높이 -- 손가락 화면은 아래에서 40px */
}
@media (pointer: coarse) { :root { --t-ctl-sm: 40px; } }
/* ---- 화면 머리 ① 화면 갈래(숙제 | 채점 …): 화면 제목처럼 -------------------
메이플 옷의 반투명 띠 안에 밑줄 탭이 들어 있어 «띠 + 밑줄» 두 겹이었습니다.
띠를 걷고 제목 크기의 글자 + 밑줄 하나로. */
.teacher-layout .tmain > .subnav {
background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
box-shadow: none; padding: 0; margin: 0 0 14px; gap: 26px; width: auto;
}
.teacher-layout .tmain > .subnav .sectab {
min-height: 0; padding: 2px 2px 11px; border-radius: 0; background: none; box-shadow: none;
font-size: 19px; font-weight: 750; letter-spacing: -0.03em; color: var(--ink-soft);
}
.teacher-layout .tmain > .subnav .sectab:hover { color: var(--ink); background: none; }
.teacher-layout .tmain > .subnav .sectab.on { color: var(--ink); background: none; box-shadow: inset 0 -3px 0 var(--brand); }
/* ---- 화면 머리 ② 그룹 고르개 + 새로고침 · 엑셀: 한 줄 --------------------------
칩이 넘치면 줄을 바꾸지 않고 그 줄 안에서 옆으로 밉니다(마우스 휠도 옆으로 --
teacher.html scrollRow). 고른 칩은 chipify 가 보이는 자리로 데려옵니다. 넘친 쪽
끝은 옅게 흐려(.fade-l · .fade-r) «더 있다» 를 알립니다. 폰(640 아래)은 style.css ·
위쪽 규칙이 이미 같은 방식입니다. */
@media (min-width: 641px) {
.teacher-layout .toolbar { flex-wrap: nowrap; gap: 12px; margin-bottom: 16px; min-height: 0; }
.teacher-layout .toolbar .tb-group { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 10px; }
/* position: relative -- chipify 가 고른 칩을 가운데로 데려올 때 재는 offsetLeft 가 이 줄 기준이 되게.
안 그러면 화면 왼쪽 끝 기준으로 재서 «전체» 가 17px 밀려 왼쪽이 흐려졌습니다. */
.teacher-layout .toolbar .tb-group .bubble-row {
position: relative; flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: none; overscroll-behavior-x: contain;
}
.teacher-layout .toolbar .tb-group .bubble-row::-webkit-scrollbar { display: none; }
.teacher-layout .toolbar .tb-group .bubble { flex: none; white-space: nowrap; }
.teacher-layout .toolbar .tb-label { flex: none; white-space: nowrap; }
.teacher-layout .toolbar .tb-right { flex: none; margin-left: auto; width: auto; }
.teacher-layout .toolbar .tb-right button { flex: none; }
}
.bubble-row.fade-r, .sectabs.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.bubble-row.fade-l, .sectabs.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.bubble-row.fade-l.fade-r, .sectabs.fade-l.fade-r {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
/* ---- 화면 머리 ③ 칸 탭 = 갈래 단추 하나의 모양 ---------------------------------
칸 탭(.sectabs) · 수업·시간표 갈래(.seg) · «한 명씩 | 그룹 전체»(.whotabs)는 모두
«이 자리에 무엇을 보일지» 고르는 단추입니다. 받침 하나에 고른 것만 흰 칸 -- 칩
고르개와 같은 말투, 폭은 글자만큼. */
.teacher-layout .sectabs:not(.subnav), .teacher-layout .seg {
display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 4px;
background: var(--tint); border: 1px solid var(--line); border-radius: 12px; box-shadow: none;
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.teacher-layout .sectabs:not(.subnav)::-webkit-scrollbar { display: none; }
.teacher-layout .pane > .sectabs, .teacher-layout .seg { margin: 0 0 14px; }
.teacher-layout .sectabs:not(.subnav) .sectab, .teacher-layout .seg button {
flex: none; min-height: 36px; padding: 7px 16px; border-radius: 9px; border: 0;
background: none; box-shadow: none; white-space: nowrap;
font-size: 14.5px; font-weight: 650; color: var(--ink-soft);
}
.teacher-layout .sectabs:not(.subnav) .sectab:hover, .teacher-layout .seg button:hover { background: rgba(90, 55, 20, .06); color: var(--ink); }
.teacher-layout .sectabs:not(.subnav) .sectab.on, .teacher-layout .seg button.on {
background: #fff; color: var(--brand-ink); box-shadow: 0 1px 2px rgba(90, 55, 20, .10), 0 0 0 1px var(--line);
}
.teacher-layout .whotabs { margin-bottom: 10px; }
.teacher-layout .sectabs.whotabs:not(.subnav) .sectab { min-height: 34px; padding: 6px 14px; font-size: 14px; }
/* ---- 카드 · 제목 · 설명 -------------------------------------------------------
카드 머리(h2)는 한 크기, 제목 옆 작은 설명(.h-note)은 한 색. 카드 안 구역 제목(h3)은
한 단계 작게, 위쪽 여백으로 구역을 가릅니다. */
/* 함께 풀기 판(.rm-board)은 아래 학생 띠가 카드 여백(24px)만큼 바깥으로 붙어 있어 여백을 그대로 둡니다 */
.teacher-layout .tmain .card:not(.rm-board) { padding: var(--t-pad); }
.teacher-layout .tmain .card { margin-bottom: var(--t-gap); }
.teacher-layout .tmain .card > h2, .teacher-layout .tmain .card-head > h2 {
font-size: 18px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.35; flex-wrap: wrap; row-gap: 2px;
}
.teacher-layout .tmain .card > h2 { margin: 0 0 14px; }
.teacher-layout .tmain .card h2 .h-note { color: var(--ink-soft); font-weight: 500; letter-spacing: -0.01em; }
.teacher-layout .tmain .card h3 { font-size: 15px; font-weight: 750; letter-spacing: -0.02em; margin: 26px 0 10px; }
.teacher-layout .tmain .card > h3:first-child, .teacher-layout .tmain .card .subcard > h3:first-child { margin-top: 0; }
.teacher-layout .tmain .card p.hint { font-size: 13.5px; }
@media (max-width: 640px) { :root { --t-pad: 14px; --t-gap: 12px; } }
@media (min-width: 641px) and (max-width: 1200px) { :root { --t-pad: 20px; } }
/* ---- 큰 단추: PC 에서는 글자만큼 ----------------------------------------------
폭 전체 알약은 폰에서 엄지로 누르라고 만든 모양입니다. 넓은 화면에서는 폼 왼쪽 줄에
맞춘 220px 남짓의 단추로 -- 그래도 화면에서 가장 진한 것은 그대로 이 단추입니다.
숙제 «이번 숙제» 판(#hwAdd)은 판 폭이 곧 단추 폭이라, 교실 열기(#rmStart)는 그 칸을
다른 갈래가 손보고 있어 그대로 둡니다. */
@media (min-width: 861px) {
.teacher-layout .pane .card button.wide:not(#hwAdd):not(#rmStart) {
width: auto; min-width: 220px; padding-left: 32px; padding-right: 32px;
}
/* 줄(.row)에 혼자 선 큰 단추(설정 «저장» 등)는 .row 의 flex: 1 로 다시 늘어났습니다 -- 제 폭으로, 폼 끝 오른쪽에 */
.teacher-layout .pane .card .row > button.wide:not(#rmStart) { flex: 0 0 auto; }
.teacher-layout .pane .card .row:has(> button.wide:only-child:not(#rmStart)) { justify-content: flex-end; }
}
/* 작은 단추는 손가락 화면에서 40px -- 34px 이면 줄 끝 «수정 · ⋯» 에서 옆 것을 눌렀습니다. */
.teacher-layout button.mini, .sheet button.mini { min-height: var(--t-ctl-sm); }
/* 한 줄에 서는 단추 묶음: 폼 맨 아래 «버리기 · 채점 저장» 처럼. 주 단추가 오른쪽 끝. */
.t-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.t-actions > .t-actions-note { margin-right: auto; font-size: 13px; color: var(--ink-soft); }
@media (min-width: 861px) { .t-actions > button:not(.mini):not(.ghost) { min-width: 180px; } }
@media (max-width: 640px) { .t-actions > button:not(.mini) { flex: 1 1 auto; } }
/* ---- 고르개 줄 «이름표 [칩 칩 칩]» --------------------------------------------
칩 받침이 남은 폭을 다 차지해(flex: 1) 칩 셋짜리 «종류» 가 1,000px 띠가 됐습니다.
받침은 칩만큼, 이름표는 첫 줄 칩 가운데에. 학생이 열두 명을 넘어 드롭다운으로 남은
칸(채점 · 최근 시험)도 폭 전체 대신 이름이 들어갈 만큼만. */
.teacher-layout .pick-row { align-items: flex-start; gap: 12px; }
.teacher-layout .pick-row > .tb-label { min-width: 34px; padding-top: 12px; }
@media (max-width: 640px) { .teacher-layout .pick-row > .tb-label { padding-top: 0; align-self: center; } }
.teacher-layout .pick-row > .bubble-row { flex: 0 1 auto; }
.teacher-layout .pick-row > select { width: auto; min-width: 200px; max-width: 360px; margin: 0; }
.teacher-layout .pick-row:has(> select:not(.hidden)) { align-items: center; }
.teacher-layout .pick-row:has(> select:not(.hidden)) > .tb-label { padding-top: 0; }
.teacher-layout .pick-count { margin: 10px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
/* ---- 목록 줄: 표 밖의 «한 줄 = 한 건» 은 같은 여백 ---------------------------------
지난 함께 풀기 · 그룹 · 자동 숙제 · 많이 틀리는 단어 · 리포트가 저마다 다른 여백이었고,
많이 틀리는 단어는 «100%» 가 상자 테두리에 붙어 있었습니다. */
.teacher-layout #hard ul.answers { margin: 0; padding: 0; }
.teacher-layout #hard ul.answers > li { padding: 10px 16px; gap: 12px; }
.teacher-layout #hard ul.answers > li > .mark { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.teacher-layout .rm-past { padding: 11px 16px; min-height: 48px; }
.teacher-layout .grp-row { padding: 10px 16px; }
.teacher-layout .rp-item { padding: 10px 16px; }
/* 목록 머리 줄: 표처럼 «무엇이 어느 칸인지» (지난 함께 풀기) */
.rm-past-h { display: grid; grid-template-columns: 120px 150px minmax(0, 1fr) 110px 56px; gap: 10px; padding: 9px 16px;
background: var(--tint); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.rm-past-h > :last-child { text-align: right; }
.rm-past-box { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.rm-past-box .rm-past:first-of-type { border-top: 0; }
@media (min-width: 761px) and (max-width: 1100px) {
.rm-past-h, .teacher-layout .rm-past { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 96px 56px; }
.rm-past-h > :first-child { display: none; }
}
@media (max-width: 760px) { .rm-past-h { display: none; } }
.rm-past-more { padding: 10px 16px; border-top: 1px solid var(--line-soft); margin: 0 !important; }
.rm-past-more:empty { display: none; }
/* ---- 비어 있을 때: 다음에 할 일 한 단추 -------------------------------------------
«학생이 없습니다.» 로 끝나면 처음 쓰는 학원은 어디로 가야 할지 모릅니다. 갈 곳이 있는
빈 상자에는 오른쪽에 단추 하나(teacher.html empty(…, { go })). */
.empty-state .es-go { margin-left: auto; flex: none; }
@media (max-width: 640px) { .empty-state { flex-wrap: wrap; } .empty-state .es-go { margin-left: 34px; } }
/* ---- 숫자 · 점수 ---------------------------------------------------------------
최근 시험의 «0/3» 이 맨글자라, 학생별 현황의 색 점수(.sc)와 다른 말을 했습니다. */
.teacher-layout td.num .sc { min-width: 56px; }
/* ---- 메뉴 묶음 이름(매일 · 관리 · 안내): 크림 바탕에서 2.9:1 이라 작은 글씨로는 흐렸습니다 ---- */
.teacher-layout .tnav .nav-sec { color: var(--ink-soft); }
/* ==== 화면별 ====================================================================== */
/* ---- 오늘 · 살펴볼 학생: 이름 한 줄, 까닭은 그 밑 ----------------------------------
이름과 까닭 칩을 한 줄에 세우니 «ZZ-09lj8lodb» 가 «ZZ-» / «09lj8lodb» 로 꺾였습니다. */
.teacher-layout .td-w { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 10px 14px; }
.teacher-layout .td-w > b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.teacher-layout .td-w-why { justify-content: flex-start; }
/* «N명 더 — 성적에서 …» 는 맨글자처럼 보여 누를 수 있는지 몰랐습니다 */
.teacher-layout .td-w-more { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brand-line); }
.teacher-layout .td-w-more::after { content: ' ›'; }
/* «접속 없는 학생 N명 보기»: 폭 전체 알약(1,000px)이 «지금 교실» 에서 가장 큰 것이었습니다 */
@media (min-width: 641px) {
.teacher-layout #liveGrid button.live-span { width: auto; min-height: 38px; padding: 8px 18px; font-size: 14px; justify-self: start; }
}
.teacher-layout .today-quick button { min-height: 40px; }
/* ---- 숙제 내기 ------------------------------------------------------------------- */
/* 기한 빠른 칩 다섯이 300px 판에서 넷 + «없음» 한 개로 꺾였습니다 */
.teacher-layout #hwDueQuick { flex-wrap: wrap; }
.teacher-layout #hwDueQuick .bubble { padding: 6px 8px; font-size: 13.5px; }
/* 학생이 하나도 없는 학원: 버블 자리에 안내 한 줄 + 단추 */
.teacher-layout .hw-none { margin-top: 4px; }
/* ---- 채점: 공책 한 장 = 테두리 상자 하나 ----------------------------------------------
«채점 저장» 이 폭 전체(1,000px) 알약이었고, 스무 단어 공책이 1,100px 이었습니다.
넓은 화면에서는 신문 단처럼 두 단(1~10 왼쪽 · 11~20 오른쪽 -- 공책과 같은 차례). */
.teacher-layout .mk-paper { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px 18px 16px; margin: 12px 0 0; }
.teacher-layout .mk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.teacher-layout .mk-head b { font-size: 16px; }
.teacher-layout .mk-head .muted { font-size: 13px; }
.teacher-layout .mk-head .chip { margin: 0; font-size: 12.5px; padding: 3px 10px; flex: none; }
.teacher-layout .mk-items .grade-item { padding: 6px 4px; }
@media (min-width: 1000px) {
.teacher-layout .mk-items.two { columns: 2; column-gap: 32px; }
.teacher-layout .mk-items.two .grade-item { break-inside: avoid; }
.teacher-layout .mk-items.two .grade-item .txt { flex: 1 1 auto; }
}
.teacher-layout .mk-paper .t-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.teacher-layout #markCount:empty { display: none; }
/* ---- 성적 · 최근 시험: 줄 끝 단추 둘 → 하나 + ⋯ --------------------------------------- */
.teacher-layout #results td.acts { white-space: nowrap; }
.teacher-layout #results td.acts .more-btn { margin-left: 5px; }
/* ---- 학생 명단 ------------------------------------------------------------------
이름이 없는 학생 줄마다 이름 칸(입력 상자)이 서 있어, 삼백 줄이 입력 상자 벽이었습니다.
평소에는 밑줄 하나, 손을 대면(마우스 · 초점) 상자가 됩니다. 적는 법은 그대로. */
.teacher-layout table.roster .who-line > input {
border-color: transparent; background: transparent; box-shadow: none;
border-bottom: 1px dashed var(--line-strong); border-radius: 6px;
}
.teacher-layout table.roster .who-line > input:hover { border-color: var(--line-strong); border-bottom-style: solid; background: #fff; }
.teacher-layout table.roster .who-line > input:focus { border-color: var(--brand); border-bottom-style: solid; background: #fff; box-shadow: var(--focus); }
.teacher-layout .roster-more { padding: 12px 14px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teacher-layout .roster-more:empty { display: none; }
.teacher-layout .roster-more .hint { font-size: 13.5px; color: var(--ink-soft); }
/* 새 그룹 이름(열두 글자)을 적는 칸이 폭 전체(1,000px)였습니다 */
.teacher-layout #newCls { max-width: 360px; }
/* ---- 인쇄물 · 학부모 리포트: «만들기» 는 폼 끝 오른쪽 ------------------------------
종류 · 단 · 글자 칸 사이에 떠 있던 «만들기» 를 폼 맨 끝으로. 리포트는 «선생님 한마디»
를 적기 **전에** 단추가 있었습니다(한마디는 만들 때 들어갑니다). */
.teacher-layout .pr-go { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.teacher-layout .pr-go button { min-width: 160px; }
/* ---- 함께 풀기(판 바깥) ------------------------------------------------------------ */
.teacher-layout .rm-done > .hint { margin-top: 2px; }
.teacher-layout .tmain .card .rm-done h3 { margin: 0 0 6px; }
/* ==== 학생 창 ======================================================================
구역마다 모양이 달랐습니다 -- 한마디 · 메모 · 점수 흐름은 테두리 상자에 작은 굵은 글씨
제목, 오는 요일 · 수업 기록 · 숙제는 상자 없이 큰 제목. 제목은 한 크기, 목록은
모두 테두리 상자 안의 줄로. */
#stSheet .sheet-body h3, #stSheet .notes-h b, #stSheet .trend-h b { font-size: 15px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); }
#stSheet .sheet-body h3 { margin: 22px 0 8px; }
#stSheet .notes, #stSheet .trend, #stSheet .sh-manage, #stSheet .sheet-body > .subcard { margin: 0 0 12px; border-radius: 14px; }
#stSheet .notes { padding: 12px 14px; }
#stSheet .notes-h { margin-bottom: 10px; flex-wrap: wrap; row-gap: 2px; }
#stSheet .notes-h .muted { font-size: 12.5px; }
#stSheet .sh-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
#stSheet .sh-list > .grade-item { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); }
#stSheet .sh-list > .grade-item:last-child { border-bottom: 0; }
#stSheet .sh-list > ul.answers { margin: 0; padding: 0; }
#stSheet .sh-list > ul.answers > li { padding: 9px 14px; gap: 12px; }
#stSheet .sh-list > ul.answers > li > .mark { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
/* 오는 요일: 누르는 칩이 아니라 적힌 것 -- 고르개 받침 대신 옅은 꼬리표 */
#stSheet .sh-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#stSheet .sh-tags > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 10px;
background: var(--tint); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
#stSheet .sh-tags > span small { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
#stSheet .sheet-body > .tbl { margin-top: 0; }
/* 자동 숙제 · 정해 둔 것: 제목 + 테두리 상자 (teacher.html loadAutoRules) */
.teacher-layout #autoList > h3 { margin: 26px 0 10px; }
.teacher-layout .auto-list { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.teacher-layout .auto-list > .auto-row { padding: 12px 16px; }
/* 명단 · 표 칸 안의 작은 꼬리표(«첫 로그인 전» · 활동 이름)는 한 줄로 -- 태블릿에서 «첫 로그인 / 전» 으로 꺾였습니다 */
.teacher-layout td .pill, .teacher-layout .cell-chips .pill { white-space: nowrap; }
/* 폰: 칸 탭은 옆으로 밀지 않고 접어서 다 보이게(설정 일곱 칸) -- 밀 수 있다는 것을 모르면 없는 칸입니다 */
@media (max-width: 640px) {
.teacher-layout .sectabs:not(.subnav) { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.teacher-layout .tmain > .subnav .sectab { font-size: 17px; }
}
/* 폰: 오늘 맨 위 빠른 단추가 넷이 되어 한 줄에 서면 «학부모 / 리포트» 로 꺾입니다 -- 두 칸씩 두 줄 */
@media (max-width: 540px) {
.teacher-layout .today-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
}
/* 한 번에 넣기 창의 단계 표시(아직 안 온 단계)가 #a3a8af 라 크림 바탕에서 2.3:1 이었습니다 */
.sheet .im-steps i:not(.on) { color: var(--ink-soft); }
#stSheet .sh-list > .sh-more { padding: 8px 14px 10px; border-top: 1px solid var(--line-soft); }
#stSheet .sh-list > .sh-more:empty { display: none; }
#stSheet .sh-list > .sh-more .hint { font-size: 13px; }
/* 인쇄할 때는 지금 뽑는 쪽만 (teacher.html 의 printOnly). style.css 의 «숨어 있지 않은 쪽을 내보냄» 보다
한 단계 세게 걸어, 화면에 남아 있는 다른 쪽(QR 카드 · 지난 인쇄물)이 같은 종이에 섞이지 않게 합니다. */
@media print {
body[data-print="qr"] #paper, body[data-print="paper"] #qrSheet { display: none !important; }
}
/* 폰(2026-10-26 점검): 그룹 칩 줄의 끝 흐림 · 고른 칩 데려오기는 폰에서도 켜지므로 재는 기준(position)도 폰에서.
갈래 단추(.seg)는 폰에서 글자 폭이 아니라 예전처럼 줄을 꽉 채운 칸으로(누르는 자리가 넓게). */
@media (max-width: 640px) {
.teacher-layout .toolbar .tb-group .bubble-row { position: relative; }
.teacher-layout .seg { width: 100%; }
.teacher-layout .seg button { flex: 1; }
}
/* ---- 폰: 그룹 고르개 · 새로고침 · 엑셀을 한 줄로 (2026-10-30) ----------------------
640px 아래에서는 오른쪽 단추가 다음 줄로 꺾여(style.css 860px 규칙) 화면마다 «새로고침»
하나가 한 줄(50px)을 차지했습니다 -- 머리 메뉴 아래 일감이 그만큼 내려갔습니다.
그룹 칩은 이미 옆으로 밀리므로 같은 줄에 두고, 새로고침은 ↻ 그림만 보입니다
(글자는 font-size 0 으로 남겨 두어 화면 읽기 프로그램 · 툴팁에는 «새로고침»). */
@media (max-width: 640px) {
.teacher-layout .toolbar { flex-wrap: nowrap; gap: 8px; }
.teacher-layout .toolbar .tb-group { flex: 1 1 auto; min-width: 0; }
.teacher-layout .toolbar .tb-right { flex: none; width: auto; margin-left: auto; gap: 6px; }
.teacher-layout .toolbar .tb-right button { flex: none; }
.teacher-layout #refresh { font-size: 0; width: 38px; padding: 0; display: inline-grid; place-items: center; }
.teacher-layout #refresh::before { content: '↻'; font-size: 19px; line-height: 1; font-weight: 700; }
}
/* 학생 창 · 수업 기록 줄: 날짜 | 무엇을 | 시각·선생님 (2026-10-30)
폰에서는 가운데 칸이 120px 남짓만 남아 «Orange 1권 / Day 17~18 / 지문 요약 …» 이 낱말마다 꺾여 한 줄이 120px 이 됐습니다.
좁으면 날짜와 시각을 윗줄 양끝에, 내용은 아랫줄 전체 폭에 둡니다. */
.sh-lesson .sh-ls-date { flex: none; width: 52px; font-size: 13px; }
.sh-lesson .sh-ls-meta { flex: none; font-size: 12.5px; }
@media (max-width: 640px) {
.sh-lesson { flex-wrap: wrap; row-gap: 2px; }
.sh-lesson .sh-ls-date { width: auto; order: 0; }
.sh-lesson .sh-ls-meta { order: 1; margin-left: auto; }
.sh-lesson .txt { order: 2; flex: 1 0 100%; }
}
/* 학생 창: 날짜 · 종류 · 점수 알약은 꺾지 않습니다 (폰에서 «18/2 / 0» 처럼 숫자가 갈라졌습니다) */
#shBody .sh-when { flex: none; font-size: 12.5px; white-space: nowrap; }
#shBody .sh-kind { white-space: nowrap; }
.sc { white-space: nowrap; }
@media (max-width: 640px) {
#shBody .tbl td, #shBody .tbl th { padding-left: 6px; padding-right: 6px; }
#shBody .tbl .sc { min-width: 0; }
}
/* 칩 안의 작은 글(학생 수 · «새 그룹» · 코드): opacity .75 로 흐리게 해서 3.1:1 이었습니다 -- 옅은 글자색으로 4.4:1 (2026-10-30 axe) */
.teacher-layout .bubble .sub { opacity: 1; color: var(--ink-soft); }
.teacher-layout .bubble.on .sub { color: inherit; opacity: 1; }
/* 폰 · 그룹이 하나뿐인 학원: 머리줄에 ↻ 하나만 남아 한 줄(50px)을 차지했습니다. 그 줄을 접습니다 --
새로 고침은 브라우저의 당겨서 새로 고침으로 되고, 보던 화면으로 돌아옵니다(PANE_KEY). :has 를 모르는 옛 브라우저는 예전 그대로. */
@media (max-width: 640px) {
.teacher-layout .toolbar:has(#clsBar.hidden):has(#export.hidden) { display: none; }
}
/* 범례는 항목 단위로만 꺾습니다(«아직 · / 이름을…» 처럼 가운데서 갈리지 않게) */
.td-legend { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; }
.td-legend .td-lg { white-space: nowrap; display: inline-flex; align-items: center; }
/* 머리줄 «☰ 메뉴» -- 폰 · 세로 태블릿에서 메뉴가 화면 밖으로 나갔을 때만 (teacher.html navJumpWatch) */
header.bar .nav-jump { display: none; flex: none; min-height: 36px; padding: 6px 11px; font-size: 13.5px; font-weight: 700; gap: 4px; align-items: center; }
@media (max-width: 860px) {
header.bar .nav-jump.on { display: inline-flex; }
}
/* 좁은 폰(380 아래): ☰ 만 두고, 메뉴 단추가 나와 있는 동안은 이름표를 접습니다 -- 320px 에서 «나가기» 가 화면 밖으로 밀렸습니다 */
@media (max-width: 380px) {
header.bar .nav-jump .nj-t { display: none; }
header.bar:has(.nav-jump.on) #who, header.bar:has(.nav-jump.on) #whoBadge { display: none; }
}
/* 폰 명단: 이름 옆 코드(small)는 한 덩어리로 -- 320px 에서 «예시-0 / 3» 처럼 숫자 가운데가 꺾였습니다. 모자라면 다음 줄로 통째 */
@media (max-width: 640px) {
.pane .tbl > table.roster > tbody > tr:not(.editing) > td.who-cell small { white-space: nowrap; }
}
/* 본문 속 글 링크(«이 주소» · «이용약관»): 브라우저 기본 파랑(#00e)이 이 화면에서만 튀었습니다 -- 대표 색 글자로 */
.teacher-layout .pane p a:not([class]), .teacher-layout .pane li a:not([class]) { color: var(--brand-ink); text-underline-offset: 2px; }
/* 파일 고르기 칸의 단추: 브라우저 기본 회색 네모(«Choose File»)가 이 화면에서만 튀었습니다 -- 다른 작은 단추와 같은 모양 (2026-10-30) */
.teacher-layout input[type="file"] { padding: 6px 8px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.teacher-layout input[type="file"]::file-selector-button {
font: inherit; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line);
border-radius: 99px; padding: 6px 14px; margin-right: 10px; cursor: pointer;
}
.teacher-layout input[type="file"]::file-selector-button:hover { border-color: var(--brand); }
/* 성적 → 최근 시험 (폰): 한 건이 230px 카드였고 제목이 날짜였습니다(누구 것인지는 아래 작게). 두 줄로 줄입니다 --
왼쪽 «이름 (코드) / 날짜», 가운데 «점수 / 파트», 오른쪽 배지 · [한마디 ⋯]. 범위는 줄을 누르면 나오는 상세에 그대로 (2026-10-30) */
@media (max-width: 640px) {
.pane #results.tbl > table > tbody > tr:not(.remark-row) {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 3px;
align-items: center; padding: 9px 10px 9px 12px;
}
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td { display: block; padding: 0; margin: 0; border: 0; text-align: left; min-height: 0; }
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td::before { display: none; }
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 15px; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td:first-child { grid-column: 1; grid-row: 2; font-size: 12px; font-weight: 500; color: var(--ink-soft);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; margin: 0; border: 0; min-width: 0; }
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td.num { grid-column: 2; grid-row: 1; justify-self: center; }
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: center; }
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td:nth-child(3) .pill { font-size: 11px; padding: 1px 7px; white-space: nowrap; }
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td.acts { grid-column: 3; grid-row: 1 / 3; display: flex; flex-wrap: wrap; justify-content: flex-end;
align-items: center; gap: 4px; max-width: 124px; padding: 0; }
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td.acts .pill { margin: 0 !important; font-size: 11px; padding: 1px 7px; }
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td.acts button.mini { padding: 5px 10px; min-height: 32px; }
}
/* 아주 좁은 폰(360 아래): 오른쪽 단추 칸 때문에 이름이 «하윤 (» 로 잘렸습니다 -- 단추 · 배지는 셋째 줄 오른쪽으로 */
@media (max-width: 360px) {
.pane #results.tbl > table > tbody > tr:not(.remark-row) > td.acts { grid-column: 1 / -1; grid-row: 3; max-width: none; flex-wrap: nowrap; margin-top: 4px; }
}
/* 폰 머리줄의 «성적 엑셀로 받기»: 그룹 칩 자리를 거의 다 먹어 «전체» 하나만 보였습니다 -- «엑셀» 로 줄입니다(만드는 중엔 «…») */
@media (max-width: 640px) {
.teacher-layout #export { font-size: 0; padding-left: 12px; padding-right: 12px; }
.teacher-layout #export::before { content: '엑셀'; font-size: 12.5px; }
.teacher-layout #export:disabled::before { content: '…'; }
}
/* 숙제 → 진행 중인 숙제 (폰): 한 건이 190px 카드(«종류 / 범위 / 완료» 이름표가 줄마다)였습니다 -- 스물여덟 건이면 5,000px.
윗줄 «누구에게 완료 막대», 아랫줄 «종류 범위(· 한마디)», 오른쪽 단추 (2026-10-30) */
@media (max-width: 640px) {
.pane #hwList.tbl > table > tbody > tr {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 3px;
align-items: center; padding: 9px 10px 9px 12px;
}
.pane #hwList.tbl > table > tbody > tr > td { display: block; padding: 0; margin: 0; border: 0; text-align: left; min-height: 0; }
.pane #hwList.tbl > table > tbody > tr > td::before { display: none; }
.pane #hwList.tbl > table > tbody > tr > td:first-child { grid-column: 1 / 3; grid-row: 1; font-size: 15px; font-weight: 700;
padding: 0; margin: 0; border: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane #hwList.tbl > table > tbody > tr > td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.pane #hwList.tbl > table > tbody > tr > td:nth-child(3) { grid-column: 2 / 4; grid-row: 2; font-size: 12.5px; color: var(--ink-soft); min-width: 0; }
.pane #hwList.tbl > table > tbody > tr > td:nth-child(3) .muted { font-size: 12px !important; }
.pane #hwList.tbl > table > tbody > tr > td.num { grid-column: 3; grid-row: 1; justify-self: end; }
.pane #hwList.tbl > table > tbody > tr > td.acts { grid-column: 4; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0; }
.pane #hwList.tbl > table > tbody > tr > td.acts button.mini { padding: 5px 10px; min-height: 32px; }
}
/* 성적 → 학생별 현황 (폰): 한 명이 180px 카드(이름표 «교재 / 진도 / 시험 / 평균 / 마지막»)였습니다 -- 두 줄로.
윗줄 «이름 (코드) 교재 평균», 아랫줄 «진도 막대 시험 N회 마지막 날» (2026-10-30) */
@media (max-width: 640px) {
.pane #summary.tbl > table > tbody > tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 9px 12px;
}
.pane #summary.tbl > table > tbody > tr > td { display: block; padding: 0; margin: 0; border: 0; text-align: left; min-height: 0; }
.pane #summary.tbl > table > tbody > tr > td::before { display: none; }
.pane #summary.tbl > table > tbody > tr > td:first-child { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 700; padding: 0; margin: 0; border: 0;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane #summary.tbl > table > tbody > tr > td:first-child small { margin-left: 6px; font-weight: 500; font-size: 12px; }
.pane #summary.tbl > table > tbody > tr > td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
.pane #summary.tbl > table > tbody > tr > td:nth-child(6) { grid-column: 3; grid-row: 1; justify-self: end; }
.pane #summary.tbl > table > tbody > tr > td:nth-child(4) { grid-column: 1; grid-row: 2; min-width: 0; }
.pane #summary.tbl > table > tbody > tr > td:nth-child(5) { grid-column: 2; grid-row: 2; justify-self: end; font-size: 12.5px; color: var(--ink-soft); }
.pane #summary.tbl > table > tbody > tr > td:nth-child(5)::after { content: '회'; }
.pane #summary.tbl > table > tbody > tr > td:nth-child(7) { grid-column: 3; grid-row: 2; justify-self: end; font-size: 12px; white-space: nowrap; }
}
@media (max-width: 640px) {
.pane #summary.tbl > table > tbody > tr > td:nth-child(4) .minibar { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pane #summary.tbl > table > tbody > tr > td:nth-child(4) .minibar b { white-space: nowrap; }
.pane #summary.tbl > table > tbody > tr > td:first-child { display: flex; align-items: baseline; gap: 0; }
}
/* 설정 → 백업 목록 (폰): 한 건이 130px 카드였습니다 -- 한 줄 «언제 · 줄 · 크기 [내려받기]» */
@media (max-width: 640px) {
.pane #bkList table > tbody > tr { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; flex-wrap: nowrap; }
.pane #bkList table > tbody > tr > td { display: block; padding: 0; margin: 0; border: 0; min-height: 0; font-size: 13px; }
.pane #bkList table > tbody > tr > td::before { display: none; }
.pane #bkList table > tbody > tr > td:first-child { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; padding: 0; margin: 0; border: 0; white-space: nowrap; }
.pane #bkList table > tbody > tr > td.num { color: var(--ink-soft); white-space: nowrap; }
.pane #bkList table > tbody > tr > td.num:nth-child(2)::after { content: '줄'; }
}
@media (max-width: 640px) { .pane #bkList button.mini { white-space: nowrap; flex: none; } }
@media (max-width: 640px) { .pane #bkList table > tbody > tr > td:first-child { overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 360px) { .pane #bkList table > tbody > tr > td.num:nth-child(2) { display: none; } }
/* 설정 → 선생님별 활동 (폰): 한 사람이 200px 카드였고 빈 칸 «·» 가 이름표째 줄줄이 섰습니다.
이름 한 줄 + «숙제 3 · 수업 기록 8 · … 합계 15» 를 한 덩어리로, 0 인 칸은 뺍니다 (2026-10-30) */
@media (max-width: 640px) {
.pane #actList table > tbody > tr.tap { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; padding: 9px 12px; }
.pane #actList table > tbody > tr.tap > td { display: inline-flex; gap: 4px; padding: 0; margin: 0; border: 0; min-height: 0; font-size: 13px; text-align: left; }
.pane #actList table > tbody > tr.tap > td::before { font-size: 12px; font-weight: 500; }
.pane #actList table > tbody > tr.tap > td:first-child { flex-basis: 100%; font-size: 15px; padding: 0 0 2px; margin: 0; border: 0; }
.pane #actList table > tbody > tr.tap > td.act-zero { display: none; }
.pane #actList table > tbody > tr.tap > td.act-sum { margin-left: auto; }
}
@media (max-width: 640px) { header.bar #whoBadge .wb-x { display: none; } }
/* 최근 시험 표 (641~ · 1024 가로 태블릿): 오른쪽 배지 · 단추 칸에 밀려 «하윤 / (예시- / 02)» · «10.30 / 00:58» 이 세 줄로 꺾였습니다.
날짜 · 이름은 한 줄로 두고 줄어드는 것은 범위 칸입니다 (2026-10-30) */
@media (min-width: 641px) {
.teacher-layout #results td:first-child { white-space: nowrap; }
.teacher-layout #results td:nth-child(2) .linky { white-space: nowrap; }
}
@media (min-width: 641px) and (max-width: 1180px) {
/* 좁은 표에서는 배지(너무 빨리 · 집)가 단추 위로 꺾여도 됩니다 -- 그래야 범위 칸이 «Oran/ge/1권» 으로 서지 않습니다 */
.teacher-layout #results td.acts { white-space: normal; width: 150px; min-width: 150px; text-align: right; line-height: 2.1; }
}
@media (min-width: 641px) { .teacher-layout #summary td.who-cell .linky { white-space: nowrap; } }
/* 저장된 로그인으로 들어가는 동안: 로그인 칸은 숨기고 «들어가는 중…» 만 (teacher.html gateIdle) */
#gate.gate-busy > :not(.login-brand) { display: none; }
#gate.gate-busy::after { content: '들어가는 중…'; display: block; text-align: center; color: var(--ink-soft); font-weight: 600; padding: 6px 0 2px; }
/* 채점 (세로 태블릿 600~999): 낱말 공책은 두 단으로 (2026-10-31). 한 장 열 줄이 한 줄씩이라 세 장이면 1,600px 을 굴렸습니다.
폰은 한 단 그대로 -- 두 단이면 «micro/phone» 처럼 철자 가운데가 꺾여 공책과 견주기 어렵습니다. 문장 공책도 한 단. */
@media (min-width: 600px) and (max-width: 999px) {
.teacher-layout .mk-items.two.words { columns: 2; column-gap: 24px; }
.teacher-layout .mk-items.two.words .grade-item { break-inside: avoid; }
.teacher-layout .mk-items.two.words .grade-item .txt { flex: 1 1 auto; min-width: 0; }
}
/* 시간표 한 번에 넣기 → 줄 확인 (폰): «17:3/0» · «Readi/ng» · «빼/기» 처럼 칸마다 꺾였습니다 (2026-10-31).
시각 · 단추는 한 줄, 과목은 줄임표, 칸 안쪽 여백을 줄입니다. */
@media (max-width: 640px) {
#imRows .im-table th, #imRows .im-table td { padding: 8px 5px; font-size: 13px; }
#imRows .im-table td:nth-child(2), #imRows .im-table td:nth-child(3) { white-space: nowrap; }
#imRows .im-table td:nth-child(4) { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#imRows .im-table td:last-child button { white-space: nowrap; padding: 4px 9px; min-height: 30px; font-size: 12.5px; }
#imRows .im-table td:first-child { word-break: keep-all; }
}
.co-add .co-tm { display: inline-flex; align-items: center; gap: 6px; flex: none; }
/* 배치고사 표 (641~1100, 세로 태블릿 · 좁은 노트북): 줄 끝 «등록하기» 가 오른쪽 밖으로 밀려 굴려야 보였습니다.
읽기 다섯 칸 점수(0·1·0·1·2)는 접고 -- 배정 결과에 이미 담겨 있습니다 -- 등록 단추를 한 화면에 (2026-11-01) */
@media (min-width: 641px) and (max-width: 1100px) {
.teacher-layout #placements .pl-read { display: none; }
.teacher-layout #placements td.acts { white-space: nowrap; }
}
@media (max-width: 640px) { #rmReveal .rm-all { display: none; } }
/* 폰 배치고사 카드(320): 단추가 «등록하 / 기» 로 꺾이고, 셋째 칸에 갇힌 «Orange 1권» 칩이 잘렸습니다(2026-11-01).
카드 단추는 한 줄로, 배정 칩 칸은 두 칸 폭으로. */
@media (max-width: 640px) {
.pane .tbl > table > tbody > tr > td.acts button { white-space: nowrap; }
.pane #placements.tbl > table > tbody > tr > td:has(> .level-chip) { grid-column: span 2; }
}
/* 교재 인쇄 «표지» 고르개: 같은 폭 칸 여섯에 갇혀 «작게 · 보통 / 크게», «아래 · 학원 / 이름 옆» 처럼
칸마다 다르게 꺾였습니다(세로 태블릿 800, 2026-11-01). 칸을 내용 폭으로 두고 넘치면 칸째 다음 줄로. */
.pane[data-pane="books"] .row:has(#wbLogo) > div { flex: 0 1 auto; }
.pane[data-pane="books"] .row:has(#wbLogo) .bubble { white-space: nowrap; }
/* 명단 «그룹» 칸: 세로 태블릿(800)에서 이름 칸이 비어 있는데도 «예시 / 중등반» 으로 꺾였습니다(2026-11-01).
띄어쓰기에서 꺾지 않고 한 줄로 -- 아주 긴 그룹 이름만 말줄임. 카드로 바뀌는 폰(≤640)은 따로 있습니다. */
@media (min-width: 641px) {
table.roster tbody tr:not(.editing) > td:nth-child(2) { white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
}
/* 학생별 현황 (641~1100, 사이드바 있는 가로 태블릿 1024): 표가 칸보다 49px 넓어 «마지막» 칸이 잘렸고, 그 사이
그룹 칸은 «A9M / A66», «예시 / 중등 / 반» 으로 한두 글자씩 꺾였습니다(2026-11-01).
진도 칸의 «다음 권» 은 막대 아래로 내리고, 아주 긴 코드는 말줄임(눌러 열면 다 보입니다). */
@media (min-width: 641px) and (max-width: 1100px) {
.teacher-layout #summary td:nth-child(4) { white-space: normal; }
.teacher-layout #summary td:nth-child(4) .minibar { flex-wrap: wrap; row-gap: 3px; }
.teacher-layout #summary td:nth-child(4) .pill { margin-left: 0 !important; }
.teacher-layout #summary td.who-cell .linky { max-width: 9em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.teacher-layout #summary td:nth-child(2) { word-break: keep-all; overflow-wrap: normal; }
}
/* 표 공통 (641~1100: 세로 태블릿 · 사이드바 있는 가로 태블릿): 칸 여백 12px 이 일곱 칸이면 168px 입니다.
명단 · 학생별 현황 · 배치고사 · 선생님 계정 표가 칸보다 4~73px 넓어 줄 끝 단추나 «마지막» 칸이 잘렸습니다
(2026-11-01 표 넘침 훑기, 700 · 1024). 여백을 8px 로, 아주 긴 학생 코드는 말줄임, 계정 단추는 꺾어 둡니다. */
@media (min-width: 641px) and (max-width: 1100px) {
.teacher-layout .tbl th, .teacher-layout .tbl td { padding-left: 8px; padding-right: 8px; }
.teacher-layout table.roster .who-line > .linky { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.teacher-layout #stfList td:last-child { white-space: normal; }
}
/* 학생 창 단추 줄 (≤360): «숙제 내기 · 수업 기록 · 고치기» 뒤에 «⋯» 하나만 둘째 줄로 떨어져 한 줄을 통째로
먹었습니다(320, 2026-11-01). 단추 여백을 조금 줄여 한 줄에. */
@media (max-width: 360px) {
.sh-acts { gap: 5px; padding-left: 10px; padding-right: 10px; }
.sh-acts > button { padding-left: 10px; padding-right: 10px; }
}
/* 641~760(작은 세로 태블릿): 명단은 긴 이름(12자) · 긴 그룹이 한 줄로 버텨 20px, 배치고사는 23px 넘쳤습니다(2026-11-01).
이름은 낱말 경계에서 두 줄로, 그룹 칸은 110px 에서 말줄임, 배치고사는 «단어 레벨» 을 접습니다(배정 칸이 결론). */
@media (min-width: 641px) and (max-width: 1100px) {
table.roster td.who-cell > .linky { white-space: normal; overflow-wrap: anywhere; text-align: left; }
table.roster tbody tr:not(.editing) > td:nth-child(2) { max-width: 110px; }
}
@media (min-width: 641px) and (max-width: 760px) {
.teacher-layout #placements th:nth-child(5), .teacher-layout #placements td:nth-child(5) { display: none; }
/* 학생별 현황 «시험» 횟수도 접습니다(평균 · 마지막이 남습니다) */
.teacher-layout #summary th:nth-child(5), .teacher-layout #summary td:nth-child(5) { display: none; }
/* 명단 «학습 메뉴»(대개 «전부»)도 접습니다 -- 학생 창에서 보고 바꿉니다 */
.teacher-layout table.roster thead th:nth-child(4), .teacher-layout table.roster tbody tr:not(.editing) > td:nth-child(4) { display: none; }
}
/* 학생별 현황 그룹 칸: 띄어쓰기 없는 긴 그룹 이름(12자)이 칸을 189px 로 우겼습니다 -- 7em 에서 말줄임 */
@media (min-width: 641px) and (max-width: 1100px) {
.teacher-layout #summary td:nth-child(2) { max-width: 7em; overflow: hidden; text-overflow: ellipsis; }
}
/* 시험지 미리보기 위 단추 줄(teacher.html #paperBar). 머리줄 바로 밑에 붙어 굴려도 따라옵니다. 인쇄에는 안 나옵니다. */
.paper-bar { position: sticky; z-index: 6; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
max-width: 1440px; margin: 0 auto; padding: 10px 28px; background: rgba(255, 252, 248, .94);
backdrop-filter: blur(6px); border-bottom: 1px solid var(--line-soft); }
.paper-bar [data-pb="back"] { margin-left: auto; }
@media (max-width: 860px) { .paper-bar { padding: 8px 14px; } }
@media print { .paper-bar { display: none !important; } }
/* 수업 기록(폰): 네 칸이 두 칸씩 접히면 «수업 종류» 를 채우는 과목 버블이 «선생님 · 교실» 줄 밑에 떨어져,
어느 칸 것인지 알 수 없었습니다(2026-11-03). 짧은 셋(시간 · 선생님 · 교실)은 한 줄, «수업 종류» 는 그 밑 온 폭 --
과목 버블이 바로 아래에 붙습니다. */
@media (max-width: 640px) {
.teacher-layout .ls-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.teacher-layout .ls-fields > div { min-width: 0; }
.teacher-layout .ls-fields > div:has(#lsSubject) { grid-column: 1 / -1; order: 9; }
.teacher-layout .ls-fields input { width: 100%; min-width: 0; }
}