/* teacher-layout.css : 선생님 화면 배치(2026-11-12)
   사용자 요청: 로그인하면 메뉴 단추만 보이고 반별로 보기가 불편하다 → 들어가자마자 한눈에 보이게.
   위쪽 띠(제목·관리 화면·새로 고침) 아래에 반 단추 줄과 탭 줄을 붙여 두고, 처음 탭은 「한눈에 보기」 표다. */

/* 위쪽 띠: 한 줄로 */
#app .top { flex-wrap: nowrap; }
#app .top h1 { white-space: nowrap; }
.tl-more { position: relative; }
.tl-more > summary { list-style: none; cursor: pointer; border: 1px solid #d6daea; background: #fff; border-radius: 8px; padding: 6px 12px; white-space: nowrap; }
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-more > summary::after { content: ' ▾'; color: var(--mute); }
.tl-more[open] > summary { border-color: #818cf8; background: #eef2ff; }
.tl-more-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px; display: flex; flex-direction: column; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(30, 27, 75, .14); }
.tl-more-list a { padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; white-space: nowrap; }
.tl-more-list a:hover, .tl-more-list a:focus-visible { background: #eef2ff; outline: none; }

/* 반 단추 줄 + 탭 줄: 위쪽 띠 바로 아래에 붙어 다닌다 */
.tl-bar { position: sticky; top: var(--tl-top, 49px); z-index: 4; background: rgba(243, 244, 251, .96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); padding: 8px 18px 0; }
.tl-ban { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tl-ban-l { font-weight: 800; color: var(--mute); font-size: 14px; margin-right: 2px; }
.tl-ban button { display: inline-flex; align-items: baseline; gap: 5px; min-width: 64px; justify-content: center; padding: 7px 12px; border-radius: 10px; font-size: 15px; font-weight: 700; border: 1px solid #d6daea; background: #fff; }
.tl-ban button small { font-size: 12px; font-weight: 600; color: var(--mute); }
.tl-ban button.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 3px 10px rgba(79, 70, 229, .3); }
.tl-ban button.on small { color: #e0e7ff; }
.tl-ban button.empty { opacity: .55; }
.tl-ban button:first-of-type { min-width: 76px; }

/* 탭 줄: 밑줄 탭 */
.tl-bar .tabs { margin: 0; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; align-items: flex-end; }
.tl-bar .tabs button { flex: none; border: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; background: transparent; padding: 9px 14px 8px; font-size: 15px; font-weight: 600; color: #475569; white-space: nowrap; }
.tl-bar .tabs button:hover { background: #e9ebfb; color: var(--ink); }
.tl-bar .tabs button.on { background: #fff; color: var(--brand); border-bottom-color: var(--brand); font-weight: 800; box-shadow: none; }
.tl-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 2px; border-radius: 10px; background: #e11d48; color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-weight: 800; }
.tl-bar .tabs .jump { flex: none; align-self: center; margin-bottom: 4px; }

/* 고른 반 제목과 게임별 참여 수 */
.tl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 10px; }
.tl-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.tl-head h2 small { font-size: 15px; font-weight: 600; color: var(--mute); margin-left: 4px; }
.tl-head .chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* 누르면 자세히 보는 요약 칸 */
.tile.tl-go { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.tile.tl-go:hover, .tile.tl-go:focus-visible { border-color: #818cf8; box-shadow: 0 6px 18px rgba(79, 70, 229, .16); transform: translateY(-1px); outline: none; }
.tile.tl-go span::after { content: ' →'; color: #818cf8; }

/* 휴대폰·좁은 화면 */
@media (max-width: 900px) {
  #app .top { flex-wrap: wrap; }
}
@media (max-width: 700px), (max-height: 500px) {
  .tl-bar { position: static; padding: 8px 10px 0; }
  .tl-ban { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .tl-ban button { flex: none; min-width: 56px; padding: 6px 10px; font-size: 14px; }
  .tl-head h2 { font-size: 19px; }
}

/* 한눈에 보기 위쪽: 오늘 학습 활동 판 하나에 보기·줄 세우기·설명을 모은다 */
.daily-panel.tl-tools { padding: 12px 16px; }
.daily-panel.tl-tools .daily-toolbar h2 { font-size: 17px; }
.daily-panel.tl-tools .daily-note { margin-top: 6px; }

/* 표 머리 정렬 단추: 머리 칸 전체를 누를 수 있다 */
.tbl th[aria-sort] { padding: 0; }
.th-sort { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; padding: 7px 8px; border: 0; border-radius: 0; background: transparent; font: inherit; font-weight: 700; color: inherit; text-align: inherit; cursor: pointer; }
th.l .th-sort { justify-content: flex-start; }
.th-sort:hover { background: #e0e7ff; }
.th-sort:focus-visible { outline: 3px solid #818cf8; outline-offset: -3px; }
.th-txt { line-height: 1.3; }
.th-arr { flex: none; font-size: 11px; color: #a5b4fc; }
.th-sort.on { color: var(--brand); }
.th-sort.on .th-arr { color: var(--brand); font-size: 12px; }
/* 별조각 칸의 과학몬·기초 별 줄이 옆 칸으로 넘치지 않게 */
.gw-line { display: block; white-space: normal; line-height: 1.35; margin-top: 2px; }
/* 정렬 화살표 자리만큼 좁은 칸을 넓힌다 */
.learning-table .learning-col-class { width: 70px; }
.learning-table .learning-col-number { width: 66px; }
.th-sort .th-txt { word-break: keep-all; }

/* 앞쪽 칸 고정(반·번호·닉네임): stickCols()가 .stk와 left를 붙인다 */
.tbl .stk { position: sticky; z-index: 2; background: #fff; }
.tbl thead .stk { z-index: 3; background: #eef2ff; }
.tbl .stk-end { box-shadow: 6px 0 8px -6px rgba(30, 27, 75, .22); }
.tbl tbody tr:hover td.stk { background: #f4f4fe; }

/* 줄 높이 줄이기: 오늘 별·평가 0인 배지는 글자만 조용히 */
.daily-badge.is-zero { background: none; border-color: transparent; padding: 0; margin-bottom: 2px; color: #94a3b8; font-weight: 500; }
.learning-table .cell .bar { margin: 3px 0 2px; }

/* 「한눈에 보기」: 오늘 학습 활동 요약 줄과 아래 판을 한 덩어리로 */
#app[data-tab="all"] #daily-shortcut .daily-shortcut { margin-bottom: 0; border-radius: 14px 14px 0 0; border-bottom: 0; background: #f8faff; }
#app[data-tab="all"] #view > .daily-panel:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px dashed #dce3ef; padding-top: 10px; }
#app[data-tab="all"] #view > .daily-panel:first-child .daily-toolbar h2 { display: none; }

/* 다른 관리 화면 목록 안의 오류 제보 항목 */
.tl-more-list button { text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-weight: 600; color: var(--ink); white-space: nowrap; border-top: 1px solid var(--line); margin-top: 4px; }
.tl-more-list button:hover, .tl-more-list button:focus-visible { background: #eef2ff; outline: none; }
/* .tbl의 overflow:hidden은 칸 고정(sticky)을 막는다. clip은 둥근 모서리는 지키고 고정은 막지 않는다 */
.tbl[data-stick] { overflow: clip; }

/* ===== 3차(2026-11-12 오후): 고르기 칸 없애고 단추로, 학생 공간 둘러보기 ===== */
/* 오늘 학습 활동 줄: 보기 단추 */
.daily-filter-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.daily-filter-btns button { min-height: 36px; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; background: #fff; border: 1px solid #d6daea; color: #334155; }
.daily-filter-btns button small { color: var(--mute); font-weight: 600; margin-left: 2px; }
.daily-filter-btns button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.daily-filter-btns button.on small { color: #e0e7ff; }
.daily-shortcut .daily-updated { font-size: 12px; color: var(--mute); margin-left: auto; cursor: help; }
#app[data-tab="all"] #daily-shortcut .daily-shortcut { margin-bottom: 12px; border-radius: 12px; border-bottom: 1px solid #dce3ef; background: #fff; }
/* 탭 안의 작은 동작 줄(고르기 단추, 기준 말풍선) */
.tl-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.tl-act button { min-height: 36px; padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.tl-act button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tl-info-tip { margin-left: auto; font-size: 13px; color: var(--mute); border: 1px dashed #cbd5e1; border-radius: 999px; padding: 4px 10px; cursor: help; white-space: nowrap; }
.tl-info-tip:focus-visible { outline: 3px solid #818cf8; }
/* 학생 공간 카드 */
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.rm-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; box-shadow: 0 3px 12px rgba(30, 27, 75, .06); transition: transform .12s, box-shadow .12s, border-color .12s; }
.rm-card:hover, .rm-card:focus-visible { background: #fff; border-color: #818cf8; box-shadow: 0 8px 22px rgba(79, 70, 229, .16); transform: translateY(-2px); outline: none; }
.rm-pic { aspect-ratio: 3 / 2; background: #f8eddf; overflow: hidden; }
.rm-pic .pr-scene, .rm-big .pr-scene { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.rm-pic canvas, .rm-big canvas { display: block; width: 100%; height: auto; }
.rm-meta { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.rm-meta b { font-size: 15px; color: var(--ink); }
.rm-meta span { font-size: 14px; color: #475569; }
.rm-meta small { font-size: 12px; color: var(--mute); }
.rm-big-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rm-big-head h2 { margin: 0; font-size: 19px; }
.rm-big { border-radius: 12px; overflow: hidden; }
.daily-reload { min-width: 36px; min-height: 36px; padding: 0 10px; border-radius: 999px; font-size: 16px; line-height: 1; }
/* 학생 공간 크게 보기: 창 높이에 맞춰 그림을 줄인다(아래가 잘리지 않게) */
.rm-big { display: flex; justify-content: center; }
.rm-big .personal-room { width: fit-content; max-width: 100%; }
.rm-big .pr-scene { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.rm-big canvas { width: auto; max-width: 100%; max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }

/* ===== 전 화면 점검(2026-11-12 오후) ===== */
/* 노트북(1024 등)에서도 요약 칸 6개가 한 줄에 들어가게 */
#tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
#tiles .tile span { font-size: 12.5px; }
/* 휴대폰: 요약 칸·게임 칩·오늘 활동 단추를 옆으로 미는 한 줄로(세로로 쌓여 내용이 첫 화면에 안 보이던 것) */
@media (max-width: 700px) {
  #tiles { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  #tiles .tile { flex: 0 0 132px; scroll-snap-align: start; }
  .tl-head { flex-wrap: nowrap; }
  .tl-head .chips { flex-wrap: nowrap; overflow-x: auto; min-width: 0; }
  .tl-head .chips .chip { flex: none; }
  .daily-shortcut { padding: 10px 12px; gap: 8px; }
  .daily-shortcut > div { width: auto; }
  .daily-filter-btns { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
  .daily-shortcut .daily-filter-btns button { flex: none; white-space: nowrap; }
  .daily-shortcut .daily-updated { margin-left: 0; }
}
@media (max-width: 700px) {
  .daily-shortcut > .daily-filter-btns { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .daily-shortcut .daily-reload { flex: none; width: auto; }
}

/* 학생 실명(명렬표): 닉네임 옆 괄호, 조금 흐리게 */
.rn { color: #64748b; font-weight: 500; white-space: nowrap; }

/* 표 칸 너비 끌어서 바꾸기: 머리 칸 오른쪽 끝 손잡이 */
/* 손잡이는 제 칸 안에만 둔다(옆 칸 머리 단추가 넘친 쪽을 덮어 끌리지 않았다) */
.col-rs { position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
.col-rs::after { content: ''; position: absolute; top: 20%; bottom: 20%; right: 0; width: 2px; border-radius: 2px; background: #c7d2fe; opacity: 0; transition: opacity .12s; }
.tbl thead th:hover .col-rs::after, .col-rs:hover::after { opacity: 1; }
.col-rs.on::after, .col-rs:hover::after { background: var(--brand); top: 0; bottom: 0; opacity: 1; }
body:has(.col-rs.on) { cursor: col-resize; user-select: none; }

/* 고른 학생 막대(2026-11-12): 할 일 단추 한 줄 + 고른 일의 입력 한 줄 */
#selbar { padding: 8px 18px 8px; }
#selbar .sb-head { margin: 0 0 6px; gap: 10px; }
#selbar .sb-head .cnt { font-size: 15px; white-space: nowrap; }
#selbar .sb-acts { display: flex; gap: 4px; flex-wrap: wrap; padding: 3px; background: #f1f5f9; border-radius: 10px; }
#selbar .sb-acts button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; color: #475569; cursor: pointer; white-space: nowrap; }
#selbar .sb-acts button:hover { background: #e2e8f0; color: var(--ink); }
#selbar .sb-acts button.on { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
#selbar .sb-body { margin: 0; flex-wrap: wrap; align-items: center; gap: 8px; }
#selbar .sb-msg { flex: 1 1 240px; min-width: 180px; height: 38px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 10px; font: inherit; }
#selbar .sb-num { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
#selbar .sb-num input { width: 84px; height: 38px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 8px; font: inherit; text-align: right; }
#selbar .sb-num select { height: 38px; }
#selbar .sb-q { min-width: 46px; height: 34px; padding: 0 8px; }
#selbar .sb-body .pri { height: 38px; padding: 0 16px; white-space: nowrap; }
#selbar .sb-body .muted { font-size: 13px; }
#selbar .out:empty { display: none; }
body:has(#selbar.on) .wrap { padding-bottom: 130px; }
@media (max-width: 700px) {
  #selbar { padding: 6px 10px; }
  #selbar .sb-acts button { padding: 6px 8px; font-size: 13px; }
}

/* 2026-11-13: 실명을 앞에 굵게, 닉네임은 작게(teacher.html who()) */
.rn-main { font-weight: 800; color: #1e1b4b; white-space: nowrap; }
.nk { font-size: .82em; font-weight: 500; color: #64748b; white-space: nowrap; }
/* 2026-11-13: 요약 칸·게임 참여 칩은 「한눈에 보기」에서만, 오늘 학습 활동 줄은 한눈에 보기·단원평가·도움 필요에서만.
   다른 탭은 노트북(높이 630) 첫 화면에 탭 내용이 바로 보이게 한다 */
#app:not([data-tab="all"]) #tiles,
#app:not([data-tab="all"]) #gchips { display: none; }
#app:not([data-tab="all"]):not([data-tab="assessment"]):not([data-tab="help"]) #daily-shortcut { display: none; }
/* 2026-11-13: 도움 필요 탭 「안 하는 학생에게 별 주기」 */
.help-bulk { margin-bottom: 12px; border-left: 5px solid #ef4444; }
.help-bulk .hb-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.help-bulk .hb-head b { font-size: 17px; }
.help-bulk .hb-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.help-bulk .sb-num input { width: 80px; }
.help-bulk .sb-msg { flex: 1 1 240px; min-width: 200px; }
.help-bulk .hb-all { display: inline-flex; gap: 4px; align-items: center; font-size: 14px; white-space: nowrap; }

/* 학생 찾기(2026-11-13): 위 띠 제목 옆 검색 칸과 결과 목록 */
.tl-find { position: relative; flex: 0 1 340px; min-width: 200px; }
.tl-find input { width: 100%; height: 38px; padding: 0 12px; border: 1.5px solid #c7d2fe; border-radius: 10px; background: #fff; font: inherit; font-size: 15px; }
.tl-find input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .2); }
.tl-find-list { position: absolute; top: calc(100% + 6px); left: 0; width: max(100%, 380px); max-height: 420px; overflow-y: auto; z-index: 30; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); padding: 6px; }
.tl-find-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.tl-find-row:hover, .tl-find-row[data-first]:not(.on) { background: #eef2ff; }
.tl-find-row.on { background: #dcfce7; }
.tl-find-chk { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid #cbd5e1; border-radius: 6px; font-weight: 800; color: #15803d; background: #fff; }
.tl-find-row.on .tl-find-chk { border-color: #22c55e; }
.tl-find-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-find-open { flex: none; min-height: 28px; padding: 2px 10px; font-size: 13px; }
.tl-find-foot, .tl-find-empty { padding: 7px 8px 4px; font-size: 12.5px; color: #64748b; border-top: 1px solid #f1f5f9; margin-top: 4px; }
.tl-find-empty { border-top: 0; }
@media (max-width: 700px) { .tl-find { flex: 1 1 100%; order: 5; } .tl-find-list { width: 100%; } }

/* 별 주는 까닭 고르기(2026-11-13) */
.sb-reasons { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin: 0 0 6px; }
.sb-rs { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 3px 10px; border: 1.5px solid #fde68a; border-radius: 999px; background: #fffbeb; color: #78350f; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.sb-rs b { color: #b45309; }
.sb-rs:hover { border-color: #f59e0b; background: #fef3c7; }
.sb-rs.on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.sb-rs.on b { color: #fff; }
#selbar .sb-acts button[data-act="remove"].on { color: #b91c1c; }
#selbar .sb-warn { color: #b91c1c; font-weight: 600; }
#selbar .sb-code { flex: 0 1 200px; min-width: 150px; }
#selbar .sb-danger { background: #dc2626 !important; border-color: #dc2626 !important; }

/* 2026-11-13: 별 칸 두 줄(전체 보유 · 사용 가능) */
.st2 { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 92px; line-height: 1.35; }
.st2 small { font-size: 11.5px; color: #64748b; }
.st2 b { font-size: 14px; color: #334155; }
.st2-use b { color: var(--gold, #b45309); }
.tl-find-open { white-space: nowrap; }

/* 바로가기 줄(2026-11-13): 로그인하면 반·탭 아래에 늘 보인다. 오류 · 관리 · 보기 세 묶음 */
.tl-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; padding: 8px 12px; background: #fff; border: 1px solid #e2e5f1; border-radius: 12px; }
.tq-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tq-group + .tq-group { padding-left: 14px; border-left: 1px solid #e2e5f1; }
.tq-l { font-size: 12px; font-weight: 700; color: #64748b; margin-right: 2px; }
.tl-quick a, .tl-quick button, .tl-quick .jump > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px; border: 1px solid #d6daea; border-radius: 8px; background: #f8f9fe; color: #1e1b4b; font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tl-quick a:hover, .tl-quick button:hover, .tl-quick .jump > summary:hover { background: #eef2ff; border-color: #a5b4fc; filter: none; }
.tl-quick a:focus-visible, .tl-quick button:focus-visible, .tl-quick .jump > summary:focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }
.tl-quick .tq-key { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.tl-quick .tq-key:hover { background: #ffedd5; border-color: #fb923c; }
.tl-quick .jump > summary::after { content: '▾'; color: #64748b; font-size: 12px; }
.tl-quick .jump[open] > summary { background: #eef2ff; border-color: #818cf8; }
.tl-quick .jump .glinks { left: 0; right: auto; }
@media (max-width: 760px) {
  .tl-quick { gap: 6px; padding: 8px; }
  .tq-group + .tq-group { padding-left: 0; border-left: 0; }
  .tq-group { width: 100%; }
  .tl-quick a, .tl-quick button, .tl-quick .jump > summary { font-size: 13px; padding: 4px 9px; }
}