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

/* ── 오늘 반 탭(선생님 화면 어디서나 위 색 단추 줄 바로 아래) ── */
/* 10-14 w60 원장님 「너무 복잡 · 작은 단추로」 — 오늘 반 줄: 한 줄 가로 탭(반 이름 + 작은 시간 + 상태 점). 상자 · 칩 테두리 · 그림자 · 알약 없음 */
.td-tabs { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 0; min-height: 36px; border: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; }
.td-tabs[hidden] { display: none; }
.td-l { flex: none; font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.td-row { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.td-row::-webkit-scrollbar { display: none; }
.td-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.td-tab b { font-size: 14px; font-weight: 600; }
.td-tab small { font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.td-tab, .td-tab:hover, .td-all { text-decoration: none; }
.td-tab:hover { color: var(--text); background: var(--surface-2); }
.td-tab.on { color: var(--text); border-bottom-color: var(--brand); }
.td-tab.on b { font-weight: 800; }
.td-tab.st-end:not(.on) { opacity: .6; }
.td-tab:focus-visible, .td-all:focus-visible, .td-x:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 4px; }
.td-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st-end); }
.td-tab.st-att .td-dot { background: color-mix(in srgb, var(--st-att) 55%, #fff); }
.td-tab.st-live .td-dot { background: var(--st-live); }
.td-tab.st-end .td-dot { background: var(--st-end); opacity: .7; }
.td-tab .td-x { position: relative; z-index: 1; flex: none; display: inline-grid; place-items: center; width: 0; height: 20px; margin-left: 0; overflow: hidden; border-radius: 4px; color: var(--text-3); cursor: pointer; opacity: 0; visibility: hidden; }
.td-tab .td-x .ic { width: 12px; height: 12px; }
.td-tab.on .td-x, .td-tab:hover .td-x, .td-tab:focus-within .td-x, .td-tab.hold .td-x { width: 18px; opacity: 1; visibility: visible; overflow: visible; }
.td-tab .td-x:hover, .td-tab .td-x:focus-visible { background: var(--bad-soft); color: var(--bad); }
.td-all { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 6px; border: 0; background: none; color: var(--brand); font-size: 13px; font-weight: 600; text-decoration: none; }
.td-all.on, .td-all:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .td-tabs { gap: 6px; }
  .td-tab { padding: 0 6px; }
  .td-tab { height: 44px; }      /* 휴대폰: 탭 자체를 44px(가로 스크롤 줄 안이라 덧칸은 잘림) */
  .td-all::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
  .td-all { position: relative; min-width: 36px; justify-content: center; }
  .td-tab .td-x::after { content: ''; position: absolute; left: -13px; right: -13px; top: -12px; bottom: -12px; }      /* 휴대폰 ✕ 누르는 칸 44px(탭 덧칸 위) */
  .td-all span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* 10-14 w60 한 줄 합치기: 뒤로 · 홈(왼쪽 작은 단추) | 오늘 반 탭(가운데, 옆으로 밀기) | 함께 보기(오른쪽 글자). app.js 쉘이 두 부품을 .top-line 한 곳에 붙임 — 모든 선생님 화면 같은 모양 */
.main .top-line { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; min-height: 36px; }
.main .top-line:has(.td-tabs:not([hidden])) { border-bottom: 1px solid var(--line); }
.main .top-line > .page-nav.qn-bar { flex: none; margin: 0; flex-wrap: nowrap; gap: 6px; }
.main .top-line > .td-tabs { flex: 1 1 auto; min-width: 0; margin: 0; border: 0; }
.main.compact .top-line { margin: 0 0 4px; }
@media (max-width: 640px) { .main .top-line { gap: 6px; } .main .top-line .td-l { display: none; } }
/* 10-19 wFix15 원장님 「오늘 반 줄 찾기 한참 걸림 · 색 넣어」: 지금 보는 반 = 진한 초록 채움 + 흰 글자 · 다른 오늘 반 = 주황(눌러서 옮겨 갈 반, 빨강은 오류 색이라 안 씀) · 수업 끝난 반(시간 지남 · 저장 끝) = 회색 · 30분 안 시작 = 진한 주황 2px 테두리. 깜빡임 없음. 대비 4.5 이상(밝은 · 어두운 화면) */
:root { --td-on-bg: #0F7A53; --td-on-tx: #FFFFFF; --td-go-bg: #FFF1E2; --td-go-bd: #F59E4B; --td-go-tx: #9A3412; --td-go-hv: #FFE3C7; --td-soon-bd: #EA580C; --td-past-bg: #EEF1F5; --td-past-bd: #D9DEE6; --td-past-tx: #5B6475; }      /* wFix15 */
:root[data-theme="dark"] { --td-on-bg: #0F7A53; --td-on-tx: #FFFFFF; --td-go-bg: #3A2614; --td-go-bd: #B4541A; --td-go-tx: #FFC58F; --td-go-hv: #4A2E14; --td-soon-bd: #FB923C; --td-past-bg: #1C2540; --td-past-bd: #2B3555; --td-past-tx: #8E98B2; }      /* wFix15 */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --td-on-bg: #0F7A53; --td-on-tx: #FFFFFF; --td-go-bg: #3A2614; --td-go-bd: #B4541A; --td-go-tx: #FFC58F; --td-go-hv: #4A2E14; --td-soon-bd: #FB923C; --td-past-bg: #1C2540; --td-past-bd: #2B3555; --td-past-tx: #8E98B2; } }      /* wFix15 */
.td-tabs .td-l { font-size: 13px; font-weight: 800; color: var(--text-2); }      /* wFix15 라벨 진하게 */
.td-tabs .td-row { gap: 6px; }      /* wFix15 */
:root .td-tabs .td-tab { height: 40px; margin: 0; padding: 0 10px; border: 1.5px solid transparent; border-radius: 8px; animation: none; opacity: 1; }      /* wFix15 칩 40px · 깜빡임 없음 */
:root .td-tabs .td-tab b { font-size: 15px; }      /* wFix15 */
:root .td-tabs .td-tab.on { background: var(--td-on-bg); border-color: var(--td-on-bg); color: var(--td-on-tx); }      /* wFix15 지금 보는 반 */
:root .td-tabs .td-tab.on b, :root .td-tabs .td-tab.on small, :root .td-tabs .td-tab.on .td-x { color: var(--td-on-tx); }      /* wFix15 */
:root .td-tabs .td-tab.on .td-dot { box-shadow: 0 0 0 1.5px #fff; }      /* wFix15 */
:root .td-tabs .td-tab.td-go { background: var(--td-go-bg); border-color: var(--td-go-bd); color: var(--td-go-tx); }      /* wFix15 다른 오늘 반 = 주황 */
:root .td-tabs .td-tab.td-go b, :root .td-tabs .td-tab.td-go small { color: var(--td-go-tx); }      /* wFix15 */
:root .td-tabs .td-tab.td-go small { font-weight: 600; }      /* wFix15 */
:root .td-tabs .td-tab.td-go:hover { background: var(--td-go-hv); }      /* wFix15 */
:root .td-tabs .td-tab.td-go.td-soon { border-width: 2px; border-color: var(--td-soon-bd); background: var(--td-go-hv); }      /* wFix15 30분 안 시작 */
:root .td-tabs .td-tab.td-go.td-past, :root .td-tabs .td-tab.td-go.st-end { background: var(--td-past-bg); border-color: var(--td-past-bd); color: var(--td-past-tx); }      /* wFix15 끝난 반 = 회색 */
:root .td-tabs .td-tab.td-go.td-past b, :root .td-tabs .td-tab.td-go.td-past small, :root .td-tabs .td-tab.td-go.st-end b, :root .td-tabs .td-tab.td-go.st-end small { color: var(--td-past-tx); font-weight: 600; }      /* wFix15 */
:root .td-tabs .td-tab.td-go.td-past:hover, :root .td-tabs .td-tab.td-go.st-end:hover { background: color-mix(in srgb, var(--td-past-bd) 55%, var(--td-past-bg)); }      /* wFix15 */
@media (max-width: 640px) { :root .td-tabs .td-tab { height: 44px; padding: 0 8px; } :root .td-tabs .td-row { gap: 5px; } }      /* wFix15 휴대폰 44px */
.main .top-line:has(.td-tabs:not([hidden])) { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }      /* wFix15 밑줄을 안쪽 그림자로(칩 40px 이어도 줄 높이 40) */
.main .top-line:has(.td-tabs:not([hidden])) > .tl-acts { flex: none; flex-wrap: nowrap; white-space: nowrap; }      /* wFix15 칩이 커져도 오른쪽 단추들은 두 줄로 접히지 않음 — 좁으면 오늘 반 칩 줄이 옆으로 밀기 */
@media (max-width: 640px) { .main .top-line:has(.td-tabs:not([hidden])) { flex-wrap: wrap; row-gap: 4px; } .main .top-line:has(.td-tabs:not([hidden])) > .tl-acts { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; } .main .top-line > .td-tabs:not([hidden]) { order: 10; flex: 1 0 100%; } }      /* wFix15 휴대폰: 오른쪽 단추들(tl-acts)에 밀려 오늘 반 칩이 폭 0 으로 사라지던 것 → 첫 줄 = 뒤로 · 홈 + 단추들(옆으로 밀기) · 둘째 줄 = 오늘 반 전체 폭 */
/* ── 홈: 오늘 수업할 반 고르기 ── */
.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-offtt { font-size: 12px; font-weight: 700; color: #92400E; background: #FEF3C7; border-radius: 6px; padding: 2px 7px; }      /* 10-15 시간표에 없는 요일 — 오늘만 */
.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; }
/* 10-13 v221 출결 판 반 탭 = 위 「오늘 반」 띠와 같은 꼴: 상태 표(.td-st) · 고른 반 = 진한 파랑 꽉 채움 · 늦은 출결은 빨간 테두리(그대로) · 파란 점(출결 끝)은 상태 표가 대신 */
.ob-tabs .ob-tab { flex: 1 0 auto; min-width: 180px; gap: 8px; padding-left: 16px; border-color: var(--line-strong); box-shadow: var(--sh-1); }
.ob-tabs .ob-tab b { flex: none; overflow: visible; }      /* 반 이름은 잘리지 않게(넘치면 줄이 옆으로 밀림) */
.ob-tabs .ob-tab .cb { width: 7px; }
.ob-tabs .ob-tab .td-st { margin-left: auto; }
.ob-tabs .ob-tab .ob-lt:not(.red) { display: none; }
.ob-tabs .ob-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 38%, transparent); }
.ob-tabs .ob-tab.on .cb { box-shadow: 2px 0 0 #fff; }
.ob-tabs .ob-tab.on b { color: #fff; }
.ob-tabs .ob-tab.on small { color: rgba(255, 255, 255, .82); }
.ob-tabs .ob-tab.on em { color: #fff; background: rgba(255, 255, 255, .18); border-radius: 6px; padding: 1px 5px; }
.ob-tabs .ob-tab.on .td-st { background: #fff; box-shadow: none; }
.ob-tabs .ob-tab.on .td-st.st-att { color: #C62828; } .ob-tabs .ob-tab.on .td-st.st-live { color: #0B7A52; } .ob-tabs .ob-tab.on .td-st.st-end { color: #4A5470; }
.ob-tabs .ob-tab.on.late { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad); }
.ob-tt-b.tt-add { border-width: 1.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-oq]):not([data-d1]):not([data-pv]):not([data-more]):not(.ms-tr) { display: none; }      /* 10-17 w321 오답 QR · 1일 테스트 만들기도 보임 */
.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-most { background: #ECFCCB; color: #4D7C0F; } .jb-hw.h-half, .jb-hw.h-some { 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; }

/* ── 10-14 w60 오늘 수업 · 출결 판 위쪽도 같은 공용 모양: 반 탭 = 한 줄 가로 탭(이름 + 작은 시간 + 상태 점, 고른 반 = 진한 글자 + 파란 밑줄) · 「보기」 = 작은 회색 칩 한 벌 · 「내 반」 칩 = 회색 작은 칩 ── */
.main .ob-tabs { position: sticky; top: var(--top-h, 60px); z-index: 6; flex-wrap: nowrap; height: 36px; min-height: 36px; padding: 0; gap: 2px; border-bottom: 1px solid var(--line); background: var(--bg); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.main .ob-tabs::-webkit-scrollbar { display: none; }
.main .ob-tabs .ob-tab { flex: none; min-width: 0; height: 36px; gap: 6px; padding: 0 8px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--text-2); font-size: 14px; overflow: visible; }
.main .ob-tabs .ob-tab .cb { display: none; }
.main .ob-tabs .ob-tab b { font-size: 14px; font-weight: 600; color: inherit; }
.main .ob-tabs .ob-tab small { font-size: 12px; font-weight: 500; color: var(--text-3); }
.main .ob-tabs .ob-tab:hover { background: var(--surface-2); color: var(--text); }
.main .ob-tabs .ob-tab.on { background: none; box-shadow: none; border-color: transparent; border-bottom-color: var(--brand); color: var(--text); }
.main .ob-tabs .ob-tab.on b { font-weight: 800; color: var(--text); }
.main .ob-tabs .ob-tab.on small { color: var(--text-3); }
.main .ob-tabs .ob-tab.late, .main .ob-tabs .ob-tab.on.late { border-color: transparent; box-shadow: none; animation: none; }
.main .ob-tabs .ob-tab.on em { color: var(--bad); background: none; padding: 0; }
.main .ob-tabs .ob-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.main .ob-tabs .ob-arw { height: 28px; min-width: 24px; border: 0; background: none; color: var(--text-3); }
/* 상태 = 작은 점(글자는 화면 읽기용으로 남김 · 마우스를 올리면 title) */
.main .ob-tabs .ob-tab .td-st, .main .ob-tabs .ob-tab.on .td-st { margin-left: 0; padding: 0; height: 8px; width: 8px; min-width: 8px; font-size: 0; gap: 0; border-radius: 50%; box-shadow: none; overflow: hidden; background: var(--st-end); }
.main .ob-tabs .ob-tab .td-st > * { display: none; }
.main .ob-tabs .ob-tab .td-st.st-att { background: color-mix(in srgb, var(--st-att) 55%, #fff); }
.main .ob-tabs .ob-tab .td-st.st-live { background: var(--st-live); }
.main .ob-tabs .ob-tab .td-st.st-end { background: var(--st-end); opacity: .7; }
/* 보기 칩 */
.main .ob-vw2 { gap: 2px; padding: 0; background: none; }
.main .ob-vw2 small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.main .ob-vw2 button, .main .ob-vw2 .v0, .main .ob-vw2 .v1, .main .ob-vw2 .v2, .main .ob-vw2 .v3 { height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-2); font: 600 13px var(--font); }
.main .ob-vw2 button:hover { border-color: var(--brand); color: var(--text); }
.main .ob-vw2 button.on { background: var(--surface); border-color: var(--brand); color: var(--brand); font-weight: 800; }
.main .ob-vw2 button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.main .ob-top1 .ob-all { height: 28px; min-height: 28px; padding: 0 10px; font-size: 13px; }
/* 내 반 칩 */
.main .ob-my { min-height: 28px; }
.main .ob-my > b { font-weight: 600; color: var(--text-3); font-size: 12px; }
.main .ob-my-l { scrollbar-width: none; }
.main .ob-my-l::-webkit-scrollbar { display: none; }
.main .ob-mc { height: 26px; border-radius: 8px; }
.main .ob-mc.on { border-color: var(--brand); background: var(--surface); }
@media (max-width: 640px) {      /* 휴대폰: 출결 판 탭 · 화살표 · 보기 칩 누르는 칸 44px(보이는 크기는 그대로) */
  .main .ob-tabs, .main .ob-tabs .ob-tab { height: 44px; min-height: 44px; }
  .main .ob-tabs .ob-arw { min-width: 44px; height: 44px; }
  .main .ob-vw2 button { position: relative; }
  .main .ob-vw2 button::after { content: ''; position: absolute; left: -1px; right: -1px; top: -8px; bottom: -8px; }
}
/* 10-14 w60: 출결 판 탭 앞의 신호등 점(.ob-lt)은 상태 점과 겹쳐 두 개로 보임 → 숨기고, 늦은 출결은 상태 점을 진한 빨강으로 */
.main .ob-tabs .ob-tab .ob-lt { display: none; }
.main .ob-tabs .ob-tab.late .td-st.st-att { background: var(--st-att); }
/* ───── wHm2 10-24 원장님 「메인 페이지 단순화」 — 선생님 홈 ───── */
.hm2-head { align-items: center; margin-bottom: 8px; }      /* wHm2 「내 반」 한 줄 */
.hm2-head .hm2-t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }      /* wHm2 */
.hm2-head h1 { margin: 0; }      /* wHm2 */
.hm2-head .ck-box { transform: scale(.92); transform-origin: left center; }      /* wHm2 시계 작게(한 곳) */
#hpPick .hk-ask { padding: 12px 18px; }      /* wHm2 설명 줄 뺀 머리 */
.hm2-todo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }      /* wHm2 할 일 칩 한 줄 */
.hm2-todo[hidden] { display: none; }      /* wHm2 */
.hm2-tl { font-size: 14px; font-weight: 800; color: var(--text-2); margin-right: 2px; }      /* wHm2 */
.hm2-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: 14.5px; font-weight: 700; color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; }      /* wHm2 */
.hm2-chip:hover { text-decoration: none; border-color: var(--brand); }      /* wHm2 */
.hm2-chip b { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #E03131; color: #fff; font-size: 13px; }      /* wHm2 숫자 */
.hm2-chip.k-tp b { background: #1B7F3A; } .hm2-chip.k-nt b { background: #2B50D8; } .hm2-chip.on { border-color: var(--brand); background: #EEF3FF; }      /* wHm2 */
.hm2-pan { margin: 0 0 10px; } .hm2-pan[hidden] { display: none; }      /* wHm2 칩 아래 펼침(같은 화면 · 덮개 없음) */
.hm2-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 12px; }      /* wHm2 작은 링크 한 줄 */
.hm2-links .agd-one { margin: 0; flex: 0 1 auto; min-width: 0; } .hm2-links .agd-one[open] { flex: 1 1 100%; }      /* wHm2 */
.hm2-ln { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 700; color: var(--brand, #2B50D8); text-decoration: none; }      /* wHm2 교재 만들기(wLd1 띠 → 작은 링크) */
.hm2-ht:empty { display: none; } .hm2-ht .ht-mini { position: static; }      /* wHm2 이 화면 체험하기 = 링크 줄 안 */
.hm2-week > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }      /* wHm2 한 주 한눈에 접기 */
.hm2-week > summary::-webkit-details-marker { display: none; }      /* wHm2 */
.hm2-week > summary .tl-dh { flex: 1 1 200px; min-width: 0; }      /* wHm2 */
.hm2-week:not([open]) > summary .tl-dh { display: none; }      /* wHm2 접힌 줄 = 두 길만 */
.hm2-wk-go { display: inline-flex; gap: 6px; flex-wrap: wrap; } .hm2-wk-go a { font-size: 13.5px; font-weight: 700; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }      /* wHm2 */
.hm2-wk-tg { margin-left: auto; font-size: 13.5px; color: var(--brand, #2B50D8); white-space: nowrap; }      /* wHm2 펼쳐 보기 / 닫기 */
.hm2-flash { box-shadow: 0 0 0 3px rgba(43, 80, 216, .35); transition: box-shadow .3s; }      /* wHm2 새 공지 칩 → 공지 칸 */
.mode-band.mb-chip { display: inline-flex; flex-wrap: nowrap; margin: 0; padding: 2px 2px 2px 10px; border-radius: 999px; gap: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }      /* wHm2 원장 「선생님 화면」 작은 칩(머리줄) */
.mode-band.mb-chip .btn { min-height: 30px; padding: 0 10px; border-radius: 999px; }      /* wHm2 */
@media (max-width: 640px) { .mode-band.mb-chip .mb-t { display: none; } .mode-band.mb-chip { padding: 0; background: none; border: 0; } }      /* wHm2 휴대폰 = 「원장으로 돌아가기」 단추만 */