/* 점수 관리 화면 전용 스타일 — 색은 styles.css 의 토큰만 씁니다 */
.sc-form { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 28px; }
.sc-form label { display: grid; gap: 8px; font-size: .82rem; color: var(--muted); }
/* 입력창과 버튼은 같은 높이로 맞춰 가운데가 나란히 오게 */
.sc-form .inp, .sc-form > .btn { box-sizing: border-box; height: 46px; } .sc-form > .btn { padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; }
.sc-form input[type=file].inp { padding-top: 0; padding-bottom: 0; line-height: 44px; }
.sc-num { width: 88px; } .sc-name { width: 220px; max-width: 100%; } .sc-date { width: 190px; } .sc-sel { width: 240px; max-width: 100%; }
/* 규칙 체크 목록: 여러 줄이 되어도 가장 긴 이름 기준으로 칸을 맞춤 (--lg 는 score.js fitCols 가 잼) */
.sc-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--lg, 9em) + 40px), 1fr)); gap: 12px 0; align-items: center; padding-bottom: 8px; flex: 1 1 100%; min-width: 0; }
.sc-chk { width: max-content; max-width: 100%; display: inline-flex !important; grid-template-columns: none; align-items: center; gap: 8px !important; color: var(--text) !important; font-size: .9rem !important; }
.sc-chk input { width: 18px; height: 18px; accent-color: var(--text); }
.sc-link { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .sc-link .inp { flex: 1; min-width: 0; }

.sc-ctl { display: inline-flex; align-items: center; gap: 12px; }
.sc-b { width: 34px; height: 34px; border-radius: 999px; border: 0; background: var(--surface2); color: var(--text); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background-color .28s ease, filter .28s ease; }
.sc-b:hover { filter: brightness(1.18); } :root[data-theme="light"] .sc-b:hover { filter: brightness(.94); }
.sc-n { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.sc-n.sc-in { width: 4.4ch; height: 34px; padding: 0 2px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text); font: inherit; outline: 0; transition: background-color .2s ease, border-color .2s ease; }   /* 평소엔 숫자처럼 보이고, 마우스를 올리거나 칸에 들어가면 입력칸 모양 */
.sc-n.sc-in:hover { background: var(--surface2); } .sc-n.sc-in:focus { background: var(--bg); border-color: var(--muted); }
.sc-board td, .sc-board th { white-space: nowrap; }
.sc-me td { font-weight: 600; }
.sc-admin .meta { margin-top: 4px; }
.card h3 { margin: 0 0 8px; }

/* 화면 낭독기에는 읽히지만 눈에는 보이지 않는 글 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 표 안의 글자(특히 학생 이름)는 줄바꿈하지 않고, 폭이 모자라면 표를 가로로 밀어서 봅니다 */
.sc-t th, .sc-t td { white-space: nowrap; }
/* 구역 이동 탭: 아래로 스크롤해도 상단 메뉴 바로 밑에 붙어 있음 */
.sc-sticky { position: sticky; top: var(--hdr-h, 69px); z-index: 5; background: var(--surface); margin: 0 calc(var(--pad-card) * -1) 20px; padding: 10px var(--pad-card) 0; }
.sc-sticky .fgroup { margin: 0; }

/* 표가 옆으로 스크롤될 정도로 넓어지면(또는 600px 이하) 학생 한 명당 카드로 자동 전환 — score.js fitTables 가 .is-stack 을 붙임 */
.tbl-stack.is-stack, .tbl-stack.is-stack tbody { display: block; } .tbl-stack.is-stack thead { display: none; }
.tbl-stack.is-stack tr { display: grid; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tbl.tbl-stack.is-stack td { display: block; border: 0; padding: 0; } .tbl.tbl-stack.is-stack td:empty { display: none; }
/* 머리줄(.sc-hd) 한 줄 + 영역별 줄(.sc-rt) */
.tbl.tbl-stack.is-stack.sc-t td { white-space: normal; } .tbl.tbl-stack.is-stack.sc-t td.sc-hd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl.tbl-stack.is-stack.sc-t tr { display: grid; align-items: baseline; gap: 8px 10px; padding: 18px 0; }
.tbl.tbl-stack.is-stack.sc-board tr { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.tbl.tbl-stack.is-stack.sc-grid tr { grid-template-columns: auto minmax(0, 1fr); }
.tbl.tbl-stack.is-stack.sc-list tr { grid-template-columns: auto auto auto minmax(0, 1fr) auto; }
.tbl.tbl-stack.is-stack.sc-t td.sc-hd[data-u]::after { content: attr(data-u); margin-left: 2px; color: var(--muted); font-size: .82rem; }
.tbl.tbl-stack.is-stack.sc-t td.sc-hd-name { font-weight: 600; }
.tbl.tbl-stack.is-stack.sc-t td.sc-hd-rank { color: var(--text); } .tbl.tbl-stack.is-stack.sc-t td.sc-hd-total { text-align: right; font-weight: 600; }
.tbl.tbl-stack.is-stack.sc-t td.sc-rt { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tbl.tbl-stack.is-stack.sc-t td.sc-rt::before { content: attr(data-l); color: var(--muted); font-size: .86rem; min-width: 0; overflow-wrap: anywhere; }
.tbl.tbl-stack.is-stack.sc-t td.sc-del { text-align: right; }
/* 600px보다 넓은데 카드형이 된 점수 부여 표: 카드를 여러 열로 나란히 놓아 휑하지 않게 */
@media (min-width: 601px) { .sc-grid.is-stack tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 48px; } }

/* 학생 링크로 들어온 화면: 선생님용 메뉴·계정·검색을 숨겨 단순하게 */
.pub .nav, .pub .menu-btn, .pub .acct, .pub [data-act="search"], .pub #foot-cols { display: none !important; }

@media (max-width: 600px) {
  .sc-num, .sc-name, .sc-date, .sc-sel { width: 100%; } .sc-form label { flex: 1 1 130px; }
}

/* ───── 영역별 둥근 막대 순위 ───── */
:root {   /* 영역마다 다른 색: 과학 개념의 파스텔 크레파스 색감(다크는 칠판용으로 어둡고 차분하게). 종이 질감 없이 색만 */
  --sc-0: #4c6697; --sc-1: #4a7a62; --sc-2: #857840; --sc-3: #8c5a60; --sc-4: #8c6a44; --sc-5: #6c5b9a;
}
:root[data-theme="light"] {
  --sc-0: #b5cdf2; --sc-1: #b4dfb9; --sc-2: #f5d980; --sc-3: #f2b4b4; --sc-4: #f9c88c; --sc-5: #cdbcf0;   /* 파스텔 토큰보다 한 단계 진하게 */
}
.sc-c0 { background: var(--sc-0); } .sc-c1 { background: var(--sc-1); } .sc-c2 { background: var(--sc-2); } .sc-c3 { background: var(--sc-3); } .sc-c4 { background: var(--sc-4); } .sc-c5 { background: var(--sc-5); }
/* 범례: 두 줄 이상이 되어도 가장 긴 이름 기준으로 칸 폭을 같게 맞춰 위아래가 정렬되게 (--lg 는 score.js fitTables 가 잼) */
.sc-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--lg, 8em) + 22px), 1fr)); gap: 8px 0; list-style: none; margin: 0 0 28px; padding: 0; color: var(--muted); font-size: .86rem; }
.sc-legend li { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; }
.sc-dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; }
.sc-rank { list-style: none; margin: 0 0 36px; padding: 0; }
.sc-brow { display: grid; grid-template-columns: 1.7em var(--who-w, 8em) minmax(0, 1fr) 3.2em; align-items: center; gap: 20px; padding: 14px 16px; border-radius: 16px; }   /* 순위·번호+이름·막대·점수 사이 간격을 모두 20px 로 같게 */
.sc-rk { margin-right: -5px; text-align: right; color: var(--text); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sc-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-bar { display: flex; gap: 3px; height: 18px; padding: 0; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.card .sc-bar { background: var(--surface2); }
.sc-seg { display: block; flex: 0 1 auto; height: 100%; min-width: 8px; border-radius: 999px; transform-origin: left center; animation: sc-grow .6s cubic-bezier(.2, .7, .2, 1) both; }
.sc-tot { text-align: left; font-weight: 500; font-variant-numeric: tabular-nums; }
.sc-brow.sc-me { background: var(--surface2); } .sc-brow.sc-me .sc-bar { background: var(--surface); }
@keyframes sc-grow { from { transform: scaleX(0); } }
.sc-det { margin-top: 8px; } .sc-det summary { cursor: pointer; color: var(--muted); font-size: .88rem; padding: 8px 0; width: fit-content; } .sc-det summary:hover { color: var(--text); }
@media (max-width: 600px) {
  .sc-brow { grid-template-columns: 1.7em minmax(0, 1fr) auto; gap: 8px 14px; padding: 12px 6px; } .sc-tot { text-align: right; }
  .sc-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ───── 규칙별 순위표 ───── */
.sc-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 28px 32px; margin-top: 8px; }
.sc-rcard { background: var(--bg); border-radius: 20px; padding: 24px 26px; min-width: 0; }
.sc-rhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sc-rhead h3 { margin: 0; }
.sc-rtbl { margin: 8px 0 0; } .sc-rtbl th, .sc-rtbl td { white-space: nowrap; } .sc-rtbl th:last-child, .sc-rtbl td:last-child { text-align: right; }
.sc-rtbl tbody tr:nth-child(-n+3) td:first-child { font-weight: 600; }

/* ───── 넓은 화면 정렬: 기록 날짜 이름표와 입력칸은 한 줄로, 점수 입력칸은 위 열 이름 가운데에 ───── */
@media (min-width: 601px) {
  .sc-form label.sc-inline { display: flex; align-items: center; gap: 14px; }
  .sc-grid th, .sc-grid td { vertical-align: middle; }
  .sc-grid th:nth-child(n+3), .sc-grid td.sc-rt { text-align: center; }
  /* 표가 옆으로 밀려도 번호·이름 열은 왼쪽에 남아 있어서 누구에게 점수를 주는지 늘 보이게 */
  .sc-grid { border-collapse: separate; border-spacing: 0; }
  .sc-grid:not(.is-stack) th:nth-child(1), .sc-grid:not(.is-stack) td:nth-child(1), .sc-grid:not(.is-stack) th:nth-child(2), .sc-grid:not(.is-stack) td:nth-child(2) { position: sticky; z-index: 2; background: var(--surface); }
  .sc-grid:not(.is-stack) th:nth-child(1), .sc-grid:not(.is-stack) td:nth-child(1) { left: 0; width: 56px; min-width: 56px; }
  .sc-grid:not(.is-stack) th:nth-child(2), .sc-grid:not(.is-stack) td:nth-child(2) { left: 56px; min-width: 96px; box-shadow: 1px 0 0 var(--line); }
}

/* ───── 감점(음수): 0점 기준선과 빨간 계열 막대 ───── */
.sc-bar { position: relative; }
.sc-bar .sc-pos, .sc-bar .sc-neg { display: flex; gap: 3px; min-width: 0; }
.sc-bar .sc-neg { flex-direction: row-reverse; }
.sc-bar.has-neg { gap: 0; overflow: visible; }
.sc-bar.has-neg .sc-pos { padding-left: 3px; } .sc-bar.has-neg .sc-neg { padding-right: 3px; }
.sc-bad { background: var(--danger); }
/* 감점도 영역마다 다른 붉은 계열(진함·연함을 번갈아) — 점수와 같은 영역 순서 */
:root { --sc-b0: var(--danger); --sc-b1: color-mix(in srgb, var(--danger) 55%, var(--bg)); --sc-b2: color-mix(in srgb, var(--danger) 80%, var(--text)); --sc-b3: color-mix(in srgb, var(--danger) 36%, var(--bg)); --sc-b4: color-mix(in srgb, var(--danger) 66%, var(--text)); --sc-b5: color-mix(in srgb, var(--danger) 70%, var(--bg)); }
.sc-bad.sc-b0 { background: var(--sc-b0); } .sc-bad.sc-b1 { background: var(--sc-b1); } .sc-bad.sc-b2 { background: var(--sc-b2); } .sc-bad.sc-b3 { background: var(--sc-b3); } .sc-bad.sc-b4 { background: var(--sc-b4); } .sc-bad.sc-b5 { background: var(--sc-b5); }
.sc-legend .sc-dot + .sc-dot { margin-left: -4px; } .sc-lg-neg { color: var(--muted); font-size: .8rem; }
.sc-tot.neg { color: var(--danger); }

/* ───── 페이지 제목: 상자 없이 글자만 (눌러서 들어가는 카드와 모양이 겹치지 않게) ───── */
.page-h { margin: 8px 0 48px; } .page-h h2 { margin: 0 0 10px; } .page-h p { margin: 0; } .page-h .pill { vertical-align: middle; margin-left: 8px; }

/* ───── 영역별 점수 표: 점수만, 0점은 흐리게, 가운데 정렬 ───── */
.sc-board td.z { color: var(--muted); }
@media (min-width: 601px) {
  .sc-board th:nth-child(n+4), .sc-board td:nth-child(n+4) { text-align: center; }
  .sc-board td.sc-hd-total { font-weight: 600; }
}



/* 학급 줄: 탭(끝에 + 와 순서 변경) — 한 줄에 안 들어가면 "학급 이름 ▾" 단추로 자동 전환 */
.strip-i.sc-add { font-size: 1.15rem; line-height: 1; padding: 8px 2px; }
.strip-i.sc-ord-t { margin-left: auto; padding-left: 12px; }
.cl-bar { flex: 1; min-width: 0; width: 100%; }
.cl-bar .cl-listrow { display: none; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cl-bar.as-list .strip { display: none; } .cl-bar.as-list .cl-listrow { display: flex; }
/* 학급 목록 팝업 */
.cl-dlg { width: min(420px, calc(100vw - 24px)); }
.cl-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cl-list { list-style: none; margin: 0 0 18px; padding: 0; position: relative; max-height: min(56dvh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.cl-list li { display: flex; align-items: center; gap: 4px; height: 44px; border-radius: 14px; transition: transform .18s ease, background .2s ease; }
.cl-list li.drag { z-index: 2; background: var(--surface2); box-shadow: 0 6px 22px rgba(0, 0, 0, .16); transition: none; }
.cl-h { flex: none; width: 40px; height: 40px; background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: grab; touch-action: none; border-radius: 12px; }
.cl-h:hover, .cl-h:focus-visible { color: var(--text); } .cl-list li.drag .cl-h { cursor: grabbing; }
.cl-n { flex: 1; min-width: 0; height: 100%; background: none; border: 0; color: var(--text); font: inherit; text-align: left; padding: 0 8px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-n .pill { margin-left: 6px; }
.cl-dlg .row.end { justify-content: space-between; }
/* 삭제 단추: 연한 붉은 바탕 + 붉은 글자 (알약) */
.btn.danger-soft { background: var(--danger-soft); color: var(--danger); } .btn.danger-soft:hover { background: color-mix(in srgb, var(--danger) 18%, var(--danger-soft)); }

/* 학생 등록: 학년·반·번호·이름 각각이 따로 놓인 알약 입력 (라벨은 칸 안의 흐린 글씨) */
.sc-fields { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 320px; max-width: 600px; min-width: 0; }
.sc-f { box-sizing: border-box; height: 46px; min-width: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; padding: 0 18px; text-align: center; transition: border-color .28s ease; }
.sc-f:focus { outline: 0; border-color: var(--muted); } .sc-f::placeholder { color: var(--muted); opacity: 1; }
.sc-fn { flex: 0 0 76px; } .sc-fname { flex: 1 1 150px; text-align: left; padding-left: 20px; }
@media (max-width: 400px) { .sc-fn { flex-basis: calc((100% - 20px) / 3); padding: 0 8px; } .sc-fname { flex-basis: 100%; } }
.sc-cap { margin: 0 0 8px; font-size: .82rem; color: var(--muted); }
/* 학급 목록 팝업: 평소(이름만) / 순서 변경 중(≡ 손잡이) */
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .cl-head h3 { margin: 0; }
.cl-list:not(.edit) .cl-n { padding-left: 14px; } .cl-list:not(.edit) li:hover { background: var(--surface2); }
.cl-n:disabled { cursor: default; color: var(--text); }
/* 팝업을 누른 단추 바로 아래에 붙여 열기: 배경은 흐리지 않고, 작고 가볍게 */
.cl-dlg { padding: 22px; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 16px 48px rgba(0, 0, 0, .18); }
.cl-dlg::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cl-head h3 { font-size: 1.05rem; }
.cl-dlg .row.end { margin-top: 4px; }
/* 순위는 굵은 숫자, 학생 번호는 작은 알약(윤곽선) 안의 흐린 숫자 — "위"·"번" 글자 없이도 구별됨 */
.sc-no, .tbl.tbl-stack.is-stack.sc-t td.sc-hd-no { display: inline-block; min-width: 1.5em; padding: 1px 3px; border: 0; color: var(--muted); font-size: .8rem; font-style: normal; font-weight: 400; text-align: center; font-variant-numeric: tabular-nums; }
.sc-no { margin-right: 4px; }   /* 번호와 이름을 가깝게(2026-10-22) */
.sc-hd-rank { font-weight: 600; font-variant-numeric: tabular-nums; }
.tbl.tbl-stack.is-stack.sc-t td.sc-hd-no { justify-self: start; align-self: center; }
/* 점수 막대 조각 말풍선: 마우스 옆에 바로 뜸 (지연·이동 효과 없음) */
.sc-tip { position: fixed; left: 0; top: 0; right: auto; bottom: auto; margin: 0; border: 0; overflow: visible; width: auto; height: auto; z-index: 200; pointer-events: none; padding: 6px 11px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: .8rem; line-height: 1.3; white-space: normal; max-width: calc(100vw - 16px); text-align: center; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; opacity: 0; will-change: transform; }
.sc-tip.on { opacity: 1; }
.cl-x { flex: none; width: 32px; height: 32px; margin-right: 4px; border: 0; border-radius: 50%; background: none; color: var(--muted); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: color .2s ease, background .2s ease; } .cl-x:hover { color: var(--danger); background: var(--danger-soft); }
/* 화면 가운데에 여는 목록 팝업(홈 편집): 뒤 화면을 흐리게 */
.cl-dlg.center::backdrop { background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
:root[data-theme="light"] .cl-dlg.center::backdrop { background: rgba(255, 255, 255, .45); }

/* 목록 팝업: 여러 개 체크해서 한 번에 추가 */
.cl-list.pick li.cl-g { height: auto; padding: 18px 14px 6px; font-size: .8rem; font-weight: 500; color: var(--muted); pointer-events: none; } .cl-list.pick li.cl-g:first-child { padding-top: 2px; }
.cl-p { display: flex; align-items: center; gap: 12px; padding-left: 14px; } .cl-list.pick li:not(.cl-g):hover { background: var(--surface2); }
.cl-ck { flex: none; position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--muted); transition: background .2s, border-color .2s; }
.cl-p.on .cl-ck { background: var(--text); border-color: var(--text); }
.cl-p.on .cl-ck::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cl-dlg .btn:disabled { opacity: .4; cursor: default; }

/* 순위표 막대: 영역별 알약이 따로 떨어져 있던 것을 하나의 알약 안에서 색 조각으로 나뉘게 (조각 사이에 틈·흰 선 없이 색만 나뉨).
   조각 합계 길이는 학생마다 달라서, 알약 전체를 감싸는 것이 아니라 "맨 앞 조각의 왼쪽 끝"과 "맨 뒤 조각의 오른쪽 끝"만 둥글게 해서 모든 학생이 완성된 알약 모양이 되게 함 */
.sc-bar .sc-pos, .sc-bar .sc-neg { gap: 0; }
.sc-bar .sc-seg { border-radius: 0; }
.sc-bar .sc-pos .sc-seg:first-child { border-radius: 999px 0 0 999px; }
.sc-bar .sc-pos .sc-seg:last-child { border-radius: 0 999px 999px 0; }
.sc-bar .sc-pos .sc-seg:only-child { border-radius: 999px; }
.sc-bar .sc-neg .sc-seg:last-child { border-radius: 999px 0 0 999px; }
.sc-bar .sc-neg .sc-seg:first-child { border-radius: 0 999px 999px 0; }   /* 마이너스가 여러 칸일 때 0점 쪽(오른쪽) 끝도 둥글게: 알약 모양 유지 */
.sc-bar .sc-neg .sc-seg:only-child { border-radius: 999px; }

/* 목록 팝업: 팝업 자체·손잡이에 브라우저 기본 검은 포커스 테두리가 어색하게 잘려 보이지 않게(사파리). 손잡이는 키보드로 올 때만 연한 배경으로 표시 */
.cl-dlg:focus, .cl-dlg:focus-visible { outline: 0; }
.cl-h:focus, .cl-h:focus-visible, .cl-x:focus-visible, .cl-n:focus-visible { outline: 0; }
.cl-h:focus-visible, .cl-x:focus-visible { background: var(--surface2); color: var(--text); }
/* 영역 사이 하얀 실선 제거: 칸 너비가 소수(%)라 이웃한 칸 사이에 배경이 1px 안 되게 비쳐 보이므로, 이웃한 칸을 1px 겹침 */
.sc-bar .sc-pos .sc-seg + .sc-seg { margin-left: -1px; }
.sc-bar .sc-neg .sc-seg + .sc-seg { margin-right: -1px; }
.sc-bar .sc-pos .sc-seg + .sc-seg { box-sizing: content-box; padding-left: 1px; } .sc-bar .sc-neg .sc-seg + .sc-seg { box-sizing: content-box; padding-right: 1px; }   /* 틈 방지로 1px 겹친 만큼 칸을 1px 넓혀서, 막대 전체 길이가 줄어들지 않게(1위가 배경 알약 끝까지 꽉 참) */
/* 번호와 이름 사이를 좁게: 표에서도 번호 칸은 내용 폭만, 이름 칸은 바로 붙여서 */
.sc-hd-no { padding-right: 4px !important; } .sc-hd-name { padding-left: 4px !important; }
/* 학생 관리 표: 번호·이름 간격은 예전 그대로(사용자 요청), 모든 칸 글자만 위아래 가운데로 맞춤(삭제 단추가 아래로 처져 보이던 것) */
.tbl.sc-list th, .tbl.sc-list td { vertical-align: middle; }
.tbl.sc-list td.sc-del { text-align: right; } .tbl.sc-list td.sc-del .link { display: inline-block; padding: 0; line-height: 1.4; vertical-align: middle; }
/* 카드형(좁은 화면·영역별 점수 표) 줄: 번호와 이름을 바로 옆에 붙임. 순위↔번호 간격(10px)은 그대로 두어 구별되게 */
.tbl.tbl-stack.is-stack.sc-t td.sc-hd-no { margin-right: -7px; padding: 1px 2px !important; } .tbl.tbl-stack.is-stack.sc-t td.sc-hd-name { padding-left: 0 !important; }
/* 학생 관리 표만 번호↔이름 간격을 예전 그대로 */
.sc-list td.sc-hd-no { padding-right: 12px !important; } .sc-list td.sc-hd-name { padding-left: 12px !important; }
.tbl.tbl-stack.is-stack.sc-t.sc-list td.sc-hd-no { min-width: 2em; padding: 1px 9px !important; margin-right: 0; } .tbl.tbl-stack.is-stack.sc-t.sc-list td.sc-hd-name { padding-left: 0 !important; }
/* 규칙별 순위 표: 칸 안 가운데 정렬. 이름 오른쪽 빈 칸(.sc-sp)이 남는 폭을 가져가 번호와 이름이 멀어지지 않음 */
.sc-rtbl { table-layout: fixed; width: 100%; }
.sc-rtbl th, .sc-rtbl td, .sc-rtbl th:last-child, .sc-rtbl td:last-child { text-align: center; }
.sc-rtbl th:nth-child(1), .sc-rtbl td:nth-child(1), .sc-rtbl th:nth-child(2), .sc-rtbl td:nth-child(2), .sc-rtbl th:nth-child(5), .sc-rtbl td:nth-child(5) { width: 14%; }
.sc-rtbl th:nth-child(3), .sc-rtbl td:nth-child(3) { width: 24%; overflow: hidden; text-overflow: ellipsis; } .sc-rtbl .sc-sp { padding: 0; }
/* 학생 관리 표(넓은 화면): 학년·반·번호·이름 시작 위치의 간격을 모두 같게(예전엔 105/80/105px 로 들쭉날쭉) — 번호~이름 간격은 예전과 거의 같은 약 105px */
.tbl.sc-list:not(.is-stack) { table-layout: fixed; width: 100%; }
.tbl.sc-list:not(.is-stack) th:nth-child(-n+4), .tbl.sc-list:not(.is-stack) td:nth-child(-n+4) { width: 19.5%; }
.tbl.sc-list:not(.is-stack) td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; }
.tbl.sc-list:not(.is-stack) th, .tbl.sc-list:not(.is-stack) td, .tbl.sc-list:not(.is-stack) td.sc-del { text-align: center; }   /* 칸 안 가운데 정렬(2026-10-22 사용자 요청): 학년·반·번호·이름 칸 폭이 같아 중심 간격도 모두 같음 */
.sc-kind { display: grid; gap: 8px; margin-top: 18px; justify-items: start; }

/* ───── 홈 "추가할 항목" 선택창: 넓은 화면은 왼쪽 서비스 · 오른쪽 안쪽 2단, 좁은 화면은 접고 펼치는 목록 ───── */
.cl-dlg.tree-wide { width: min(880px, calc(100vw - 48px)); }
.cl-two { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 28px; overflow: hidden; margin-bottom: 14px; }
.cl-left, .cl-right, .cl-acc { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.cl-left { display: grid; align-content: start; gap: 2px; padding-right: 4px; }
.cl-cat { padding: 14px 14px 6px; font-size: .8rem; font-weight: 500; color: var(--muted); } .cl-left .cl-cat:first-child, .cl-acc > .cl-cat:first-child { padding-top: 2px; }
.cl-svc { display: block; width: 100%; padding: 11px 14px; border: 0; border-radius: 14px; background: none; color: var(--muted); font: inherit; font-size: 1.1rem; text-align: left; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.cl-svc:hover { color: var(--text); } .cl-svc.on { background: var(--surface2); color: var(--text); }
.cl-right { display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.cl-right > * { flex: none; }   /* 안쪽이 창보다 길어도 과목 탭(알약 묶음)이 눌려 줄무늬로 찌그러지지 않게 */
.cl-rh { margin: 0; font-size: 1.1rem; font-weight: 500; }
.cl-right .cl-list { margin: 0; max-height: none; overflow: visible; }
.cl-right .seg-ctl { align-self: flex-start; margin-top: 4px; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; margin-bottom: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.cl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 14px; border: 0; border-radius: 999px; background: var(--surface2); color: var(--text); font: inherit; font-size: .86rem; cursor: pointer; } .cl-chip i { font-style: normal; color: var(--muted); }
.cl-acc { margin-bottom: 14px; }
.cl-sv { border-bottom: 1px solid var(--line); }
.cl-svh { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .cl-svh i { font-style: normal; color: var(--muted); font-size: 1.2rem; }
.cl-acc .cl-list { margin: 0 0 8px; max-height: none; overflow: visible; }
.cl-list.pick li.cl-gs { padding-top: 10px; color: var(--text); }

/* 점수 항목 제목: 구역 탭 바로 아래에 붙여 학생 명단을 내려도 계속 보이게.
   표가 폭 안에 들어갈 때만 가로 스크롤 컨테이너를 풀어 페이지 기준 sticky가 작동하게 함. */
.sc-grid-wrap.sc-head-fixed { overflow: visible; }
.sc-head-fixed .sc-grid:not(.is-stack) thead th {
  position: sticky;
  top: calc(var(--hdr-h, 69px) + var(--sc-tabs-h, 0px));
  z-index: 4;
  background: var(--surface);
}