/* 10-12 v173 선생님 하루 흐름: 홈(오늘 수업할 반 고르기) → 출결 판(함께 보기) → 오늘 반 탭 + 반 화면(수업) — 이모지 없음 */

/* ── 오늘 반 탭(선생님 화면 어디서나 위 색 단추 줄 바로 아래) ── */
.td-tabs { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.td-tabs[hidden] { display: none; }
.td-l { flex: none; font-size: 12px; font-weight: 800; color: var(--text-3); }
.td-row { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px; }
.td-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; overflow: hidden; }
.td-tab::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cc, #2B50D8); }
.td-tab b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.td-tab small { font-size: 11.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.td-tab:hover { border-color: var(--cc, #2B50D8); }
.td-tab.on { border-color: var(--cc, #2B50D8); background: color-mix(in srgb, var(--cc, #2B50D8) 12%, var(--surface)); box-shadow: inset 0 -3px 0 var(--cc, #2B50D8); }
.td-tab.on b { font-size: 17px; }
.td-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 900; color: #fff; }
.td-tab.st-att .td-dot { background: #E5484D; box-shadow: 0 0 0 3px #FDE2E2; }
.td-tab.st-live .td-dot { background: #16A34A; box-shadow: 0 0 0 3px #DCFCE7; }
.td-tab.st-end .td-dot { background: #94A3B8; }
.td-all { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--brand-line, #C7D4F7); color: var(--brand, #2B50D8); font-weight: 800; font-size: 13px; text-decoration: none; background: var(--surface); }
.td-all.on, .td-all:hover { background: var(--brand, #2B50D8); color: #fff; border-color: var(--brand, #2B50D8); }
@media (max-width: 640px) { .td-l { display: none; } .td-tab b { font-size: 14.5px; } .td-all span { display: none; } }

/* ── 홈: 오늘 수업할 반 고르기 ── */
.hk-top { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.hk-cheer, .ob-cheer { font-size: 14px; font-weight: 700; color: var(--brand, #2B50D8); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk .hk-ask { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; background: linear-gradient(90deg, #EEF3FF, var(--surface)); border-bottom: 1px solid var(--line); }
.hk .hk-ask b { font-size: 22px; font-weight: 900; color: #1E3A8A; letter-spacing: -.01em; }
.hk .hk-ask small { font-size: 13px; color: var(--text-2); font-weight: 600; }
.hk-row { gap: 10px; }
.hk-row.on { background: color-mix(in srgb, var(--cc, #2B50D8) 6%, var(--surface)); }
.hk-row.drag { opacity: .5; } .hk-row.drop { box-shadow: inset 0 3px 0 var(--brand, #2B50D8); }
.hk-row[draggable] { cursor: grab; }
.hk-ck { flex: none; position: relative; width: 30px; height: 30px; cursor: pointer; }
.hk-ck input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hk-box { position: absolute; inset: 0; border: 2px solid var(--line-strong, #94A3B8); border-radius: 8px; background: var(--surface); }
.hk-ck input:checked + .hk-box { background: var(--brand, #2B50D8); border-color: var(--brand, #2B50D8); }
.hk-ck input:checked + .hk-box::after { content: ''; position: absolute; left: 9px; top: 4px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.hk-ck input:focus-visible + .hk-box { outline: 3px solid #93B4FF; outline-offset: 2px; }
.hk-ord { flex: none; min-width: 20px; height: 20px; border-radius: 6px; background: var(--brand, #2B50D8); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.hk-row .tc-name { font-size: 16px; }
.hk-warn { font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: #E5484D; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.hk-ok { font-style: normal; font-size: 12px; font-weight: 800; color: #475569; background: #E2E8F0; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.hk-save { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.hk-n { font-size: 13.5px; color: var(--text-2); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-n b { color: var(--brand, #2B50D8); }
.btn.big { min-height: 46px; padding: 0 22px; font-size: 16px; font-weight: 800; }
@media (max-width: 640px) {
  .hk .hk-ask b { font-size: 19px; }
  .hk-row { flex-wrap: wrap; } .hk-row .rm-when { flex-basis: 100%; order: 9; }
  .hk-save { flex-wrap: wrap; } .hk-n { flex-basis: 100%; } .hk-save .btn { flex: 1 1 auto; }
}

/* ── 출결 판(오늘 수업 · 함께 보기) ── */
.ob-top1 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; min-height: 40px; }
.ob-vw2 { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.ob-vw2 small { font-size: 11.5px; font-weight: 800; color: var(--text-3); padding: 0 4px 0 6px; }
.ob-vw2 button { border: 1.5px solid transparent; border-radius: 8px; padding: 0 11px; height: 30px; font: 800 13px var(--font); cursor: pointer; }
.ob-vw2 .v1 { background: #E8F0FF; color: #1D4ED8; } .ob-vw2 .v1.on { background: #1D4ED8; color: #fff; }
.ob-vw2 .v2 { background: #E7F8EF; color: #15803D; } .ob-vw2 .v2.on { background: #15803D; color: #fff; }
.ob-vw2 .v3 { background: #FFF1E6; color: #C2410C; } .ob-vw2 .v3.on { background: #C2410C; color: #fff; }
.ob-vw2 .v0 { background: #F3EEFF; color: #6D28D9; } .ob-vw2 .v0.on { background: #6D28D9; color: #fff; }
.ob-tabs { height: auto; min-height: 54px; overflow-x: auto; scrollbar-width: thin; }
.ob-tabs .ob-tab { flex: 1 0 180px; height: 46px; }
.ob-tabs .ob-tab b { font-size: 16.5px; }
.ob-wrap.all { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.ob-head h2 a { color: inherit; text-decoration: none; } .ob-head h2 a:hover { text-decoration: underline; }
.ob-band2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; padding: 14px 18px; border-radius: 12px; background: #FEF2F2; border: 2px solid #FCA5A5; }
.ob-band2 b { font-size: 21px; font-weight: 900; color: #B91C1C; }
.ob-band2 span { font-size: 14px; font-weight: 700; color: #7F1D1D; }
.ob-band2 .btn { margin-left: auto; }
.ob-band2.ok { background: #F0FDF4; border-color: #86EFAC; } .ob-band2.ok b { color: #15803D; } .ob-band2.ok span { color: #166534; }
.ob-attq, .tc-attq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; padding: 10px 14px; border-radius: 10px; background: #FEF2F2; border-left: 5px solid #E5484D; }
.ob-attq b, .tc-attq b { font-size: 17px; font-weight: 900; color: #B91C1C; }
.ob-attq span, .tc-attq span { font-size: 13px; font-weight: 600; color: #7F1D1D; }
.ob-attq.ok, .tc-attq.ok { background: var(--surface-2); border-left-color: #94A3B8; }
.ob-attq.ok b, .tc-attq.ok b { font-size: 14.5px; color: var(--text-2); } .ob-attq.ok span, .tc-attq.ok span { color: var(--text-3); }
.tc-attq:empty { display: none; }
/* 명단 첫 줄 위 작은 칸 제목(출결 · 점수 · 숙제) */
.ob-r.h1 { position: relative; margin-top: 16px; }
.ob-r.h1 .ob-at::before, .ob-r.h1 .ob-sc::before, .ob-r.h1 .ob-hw::before { position: absolute; top: -16px; font-size: 10.5px; font-weight: 800; color: var(--text-3); white-space: nowrap; pointer-events: none; }
.ob-r.h1 .ob-at, .ob-r.h1 .ob-sc, .ob-r.h1 .ob-hw { position: relative; }
.ob-r.h1 .ob-at::before { content: '출결 — 지각 · 조퇴 · 결석만'; left: 0; }
.ob-r.h1 .ob-sc::before { content: '점수'; left: 0; }
.ob-r.h1 .ob-hw::before { content: '숙제'; left: 0; }
@media (max-width: 900px) { .ob-top1 { flex-wrap: wrap; } .ob-cheer { flex-basis: 100%; order: 3; } .ob-wrap.all { grid-template-columns: 1fr; } }

/* ── 반 화면 「오늘」: 이 반 학습지 머리 · 맨 아래 오늘 수업 저장 ── */
.rm-sh-t { display: flex; align-items: baseline; gap: 6px; }
.rm-sh-a { color: var(--brand, #2B50D8); text-decoration: underline; text-underline-offset: 3px; }
.rm-sh-t small { margin-left: 6px; font-weight: 600; }
.rm-end { margin: 18px 0 30px; }
.rm-end-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-radius: 12px; border: 2px solid var(--brand-line, #C7D4F7); background: #F5F8FF; }
.rm-end-in b { display: block; font-size: 17px; font-weight: 900; } .rm-end-in small { font-size: 13px; color: var(--text-2); font-weight: 600; }
.rm-end-in.ok { background: var(--surface-2); border-color: var(--line); }
.tc-rh-act .ck-box { margin-right: 4px; }

/* ── 이 반 학습지 카드 = 내 학습지 줄 부품을 카드로 ── */
.ms-cardv .ms-tbl, .ms-cardv .ms-tbl tbody { display: block; width: 100%; }
.ms-cardv .ms-tbl thead { display: none; }
.ms-cardv .ms-tbl tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.ms-cardv .ms-tbl tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ms-cardv .ms-tbl td { border: 0; padding: 0; }
.ms-cardv .ms-tbl .ms-ttl { flex-basis: 100%; order: -1; }
.ms-cardv .ms-tbl td:last-child { flex-basis: 100%; }
.ms-cardv .ms-tbl .ms-by { display: none; }
.ms-cardv .ms-acts { justify-content: flex-start; flex-wrap: wrap; }
.ms-cardv .ms-acts > :not(.ms-cam):not([data-ag]):not([data-pz]):not([data-qa]):not([data-pv]):not([data-more]):not(.ms-tr) { display: none; }
.ms-cardv .ms-acts:has(.ms-cam) > [data-pv] { display: none; }
.ss-miss .ss-c { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }

/* ── 반 「일지」 게시판 ── */
.jb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.jb-mon { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; }
.jb-mon button { flex: none; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font: 700 13px var(--font); cursor: pointer; }
.jb-mon button.on { background: var(--brand, #2B50D8); color: #fff; border-color: var(--brand, #2B50D8); }
.jb-q { flex: 1 1 220px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: 500 13.5px var(--font); }
.jb-row { border-bottom: 1px solid var(--line); }
.jb-row.on { background: var(--surface-2); }
.jb-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: 100%; padding: 10px 14px; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; color: var(--text); }
.jb-h:hover { background: var(--surface-2); }
.jb-d { flex: none; min-width: 74px; font-size: 14px; }
.jb-u { font-weight: 800; font-size: 13.5px; }
.jb-c { font-size: 12.5px; color: var(--text-2); }
.jb-n b { color: var(--text); }
.jb-a { color: #B45309; font-weight: 700; } .jb-m { color: var(--text-3); }
.jb-ok { font-size: 11.5px; font-weight: 800; color: #475569; background: #E2E8F0; border-radius: 5px; padding: 1px 6px; }
.jb-x { padding: 4px 14px 14px; }
.jb-x-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .jb-x-h span { font-size: 13px; color: var(--text-2); }
.jb-note { margin: 0 0 8px; font-size: 13px; }
.jb-stu { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 14px; }
.jb-s { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.jb-s b { flex: none; min-width: 56px; }
.jb-hw { flex: none; font-size: 11.5px; font-weight: 800; padding: 0 6px; border-radius: 5px; background: var(--surface-2); color: var(--text-3); }
.jb-hw.h-done { background: #DCFCE7; color: #15803D; } .jb-hw.h-part { background: #FEF3C7; color: #B45309; } .jb-hw.h-none { background: #FEE2E2; color: #B91C1C; }
.jb-sl { min-width: 0; }

/* ── 관리부: 시간 없이 오늘 수업인 반 ── */
.dk-picks { border-color: #C7D4F7; background: #F5F8FF; }

/* ── 바늘 시계 셋(클래식 · 밤하늘 · 단순) · 남은 시간 ── */
.ck-left { font-size: 11.5px; font-weight: 800; color: #B45309; background: #FEF3C7; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.ck-t-classic, .ck-t-night, .ck-t-pure { height: 44px; padding: 0 10px 0 4px; }
.ck-t-classic .ck-main b, .ck-t-night .ck-main b, .ck-t-pure .ck-main b { font-size: 14px; }
.ck-v-classic .ck-face { fill: #FBF7EC; stroke: none; } .ck-v-classic .ck-ring { fill: none; stroke: #8A7346; stroke-width: 1.6; }
.ck-v-classic .ck-tick { stroke: #3B3325; stroke-width: .9; } .ck-v-classic .ck-tick.fine { stroke-width: .35; }
.ck-v-classic .ck-num { font: 700 5.2px Georgia, 'Times New Roman', serif; fill: #2B2418; text-anchor: middle; }
.ck-v-classic .ck-hh, .ck-v-classic .ck-mh { stroke: #1F1A12; } .ck-v-classic .ck-sh { stroke: #A3342B; } .ck-v-classic .ck-dot { fill: #8A7346; }
.ck-v-night .ck-face { fill: #13213F; stroke: none; } .ck-v-night .ck-ring { fill: none; stroke: #C9A85C; stroke-width: 1.4; }
.ck-v-night .ck-tick { stroke: #C9A85C; stroke-width: .9; } .ck-v-night .ck-tick.big { stroke-width: 1.8; }
.ck-v-night .ck-hh, .ck-v-night .ck-mh { stroke: #E9D7A8; } .ck-v-night .ck-sh { stroke: #F2C14E; } .ck-v-night .ck-dot { fill: #F2C14E; }
.ck-v-pure .ck-face { fill: #FFFFFF; stroke: #CBD5E1; stroke-width: 1.4; } .ck-v-pure .ck-tick-d { fill: #64748B; }
.ck-v-pure .ck-hh, .ck-v-pure .ck-mh { stroke: #0F172A; } .ck-v-pure .ck-sh { stroke: #2B50D8; } .ck-v-pure .ck-dot { fill: #0F172A; }