:root{
  --bg:#f4f5f7; --card:#fff; --line:#dfe3e8; --txt:#1f2328; --muted:#6b7280;
  --accent:#2563eb; --ok:#0f9d58; --bad:#d93025; --warn:#b45309;
}
*{box-sizing:border-box}
/* 세로 스크롤바가 생겼다 사라지며 화면이 좌우로 흔들리지 않게 자리를 늘 비워 둔다.
   scrollbar-gutter 를 모르는 브라우저는 overflow-y:scroll 로 같은 효과를 낸다. */
html{overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.6 "Malgun Gothic","맑은 고딕",system-ui,-apple-system,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
header{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.bar{display:flex;align-items:center;height:66px;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;
       color:var(--txt);text-decoration:none;white-space:nowrap}
.brand .logo{height:38px;width:auto;display:block}
.brand .brandname{letter-spacing:-.2px}
.sep{color:#c3c8d0;font-weight:700}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{color:var(--accent);text-decoration:none;font-size:14px;padding:5px 11px;
      border:1px solid #c6d5ef;border-radius:16px;white-space:nowrap;
      background:#eaf1fb;font-weight:600;box-shadow:0 1px 2px rgba(31,51,83,.06)}
nav a:hover{background:#dde8f8;border-color:#a9c0e6}
nav a.here{background:var(--accent);border-color:var(--accent);color:#fff}
.logout{margin-left:auto;font-size:13px;text-decoration:none}
@media (max-width:720px){.bar{height:auto;padding:10px 0}.logout{margin-left:0}
  .brand .logo{height:30px}.brand{font-size:15px;gap:8px}}
main.wrap{padding:17px 16px 32px}
footer.wrap{padding:16px;text-align:right}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:18px}
.card.narrow{max-width:420px;margin:40px auto}
/* 왼쪽(추첨 조건)은 안내 문구가 길어 더 넓게 둔다 */
/* 두 카드의 위아래 끝을 맞춘다 (align-items:start 면 짧은 쪽이 먼저 끝난다) */
.grid2{display:grid;grid-template-columns:1.45fr 1fr;gap:18px;align-items:stretch}
.grid2>.card{margin-bottom:0}
.grid2{margin-bottom:18px}
@media (max-width:820px){.grid2{grid-template-columns:1fr}}

h1{font-size:20px;margin:0 0 12px}
h2{font-size:16px;margin:0 0 12px}
h3{font-size:14px;margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:13px}
.warn{color:var(--warn);font-weight:600}

label{display:block;margin-bottom:10px;font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;
  font:inherit;color:var(--txt);background:#fff;margin-top:4px}
textarea{resize:vertical}
button{padding:8px 16px;border:0;border-radius:6px;background:var(--accent);color:#fff;
  font:inherit;cursor:pointer}
button:hover{filter:brightness(1.06)}
button.mini{padding:4px 10px;font-size:12px}
button.danger{background:var(--bad)}
.inline-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.inline-form label{margin-bottom:0;flex:1 1 140px}
.row-form{display:flex;gap:6px;align-items:center}
.row-form input{margin-top:0}
.small-input{max-width:140px}
.wide-input{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:13px}

/* ---- 표 공통 테마 (사이트 전체 같은 모양) ------------------------------
   가운 명단(table.roster)이 쓰던 파란 머리글·테두리를 모든 표에 맞춘다.
   roster 는 제 규칙을 뒤에서 다시 선언하므로 파스텔 배경을 그대로 지킨다. */
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
th,td{padding:7px 8px;border:1px solid #dde3ec;text-align:left;vertical-align:middle}
th{color:#1f2328;font-weight:700;font-size:13px}
thead th{background:#dce6f1;border-color:#b9c7dc;text-align:center}
table.kv th{width:40%;background:#eef3f9;color:#44506a}

/* 줄 구분 : 짝수 줄에 아주 옅은 바탕, 올리면 살짝 파랗게 */
table:not(.roster) tbody tr:nth-child(even)>td{background:#fafbfd}
table:not(.roster) tbody tr:hover>td{background:#eef3fb}
table.kv tbody tr:nth-child(even)>td,
table.kv tbody tr:hover>td{background:#fff}
tr.off{opacity:.5}

.chip{background:#eef2f7;color:var(--muted);border-radius:20px;padding:3px 12px;font-size:12px}
.chip.on{background:#e6f4ea;color:var(--ok)}
.chip.offchip{background:#fdeceb;color:var(--bad)}
.tag{background:var(--accent);color:#fff;border-radius:4px;padding:1px 6px;font-size:11px}

.msg{padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:14px}
.msg.ok{background:#e6f4ea;color:#136b35}
.msg.bad{background:#fdeceb;color:#a3160f}
.msg.warnbox{background:#fff7e6;color:#8a5a00}
.msg ul{margin:6px 0 0 18px;padding:0}

.groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:12px}
@media (max-width:760px){.groups{grid-template-columns:repeat(2,1fr) !important}}
.group{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:#fbfcfd}
.group ul{margin:0;padding-left:18px}


details summary{cursor:pointer;font-size:15px;font-weight:600;margin-bottom:10px}

/* 멤버 표 입력칸 폭 */
td input,td select{margin-top:0;padding:4px 6px;font-size:13px}
.w-name{width:88px}.w-gown{width:62px}.w-pos{width:60px}.w-sex{width:40px}.w-part{width:86px}.w-no{width:52px}
table.wide td,table.wide th{padding:5px 6px}

/* ---------------- 드래그 앤 드롭 보드 ---------------- */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.board .half{grid-column:span 2}
.board .rowstart{grid-column-start:1}   /* 특별 보직 줄 다음은 새 줄에서 시작 */
/* 지휘 · 반주 — 1라인에 한 칸씩. 1명뿐이라 아래 여백을 두지 않는다 */
.special{background:#f7f8fb;border-style:dashed;align-self:start;min-height:0}
.special .bcol-body{min-height:0 !important;padding:8px 10px;flex:0 0 auto}
.bcol-body{min-height:56px}
.special .bcol-body{min-height:0}
@media (max-width:900px){
  .board{grid-template-columns:repeat(2,1fr)}
  .board .half{grid-column:span 1}
}
.bcol{background:var(--card);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;min-height:160px}
.bcol-head{padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600;font-size:14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.bcol-body{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.bcol-body.flow{flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}
.bcol.over,.dropbox.over{outline:2px dashed var(--accent);outline-offset:-3px;background:#eff5ff}

.nametag{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);
  border-radius:20px;background:#fff;cursor:grab;user-select:none;font-size:14px;white-space:nowrap;
  flex:0 0 auto;min-height:0}
.nametag:active{cursor:grabbing}
.nametag.male{background:#eef4ff;border-color:#c7d9ff}
.nametag.female{background:#fff0f5;border-color:#ffd0e0}
.nametag.locked{background:#f1f2f4;color:var(--muted);cursor:not-allowed}
.nametag.dragging{opacity:.45}
.nametag.over{outline:2px solid var(--accent);outline-offset:1px}
.nametag .sub{font-size:11px;color:var(--muted)}
.pairmark{color:#d6336c;font-size:13px}
.dropbox{border-style:dashed}

/* ---------------- 가운 표 ---------------- */
.gown-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 18px}
table.gown td,table.gown th{padding:4px 8px}
td.no{width:46px;color:var(--muted);font-variant-numeric:tabular-nums}
tr.empty td{color:#b9bec6}
tr.dup td{background:#fff3f2}
.w-dept{width:92px}
tr.teacher{background:#fbfbe9}

/* 하위 탭 */
.tabs{display:flex;gap:6px;margin:0 0 18px;flex-wrap:wrap}
.tabs a{padding:7px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;
  color:var(--accent);text-decoration:none;font-size:14px}
.tabs a:hover{background:#eef3fd}
.tabs a.here{background:var(--txt);border-color:var(--txt);color:#fff}

/* 입력 형식 안내 */
.guide{border:1px solid #dbe4f3;background:#f5f8ff;border-radius:8px;padding:12px 14px;margin-bottom:14px}
.guide-order{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.guide-order span{position:relative;background:#fff;border:1px solid #c7d6ef;border-radius:6px;
  padding:3px 10px;font-size:13px;color:#2b4a7d;font-weight:600}
.guide-order span:not(:last-child)::after{content:",";position:absolute;right:-6px;color:#8aa2c8;font-weight:700}
.guide-ex{margin:0;padding:10px 12px;background:#fff;border:1px solid #e3e9f3;border-radius:6px;
  font-family:ui-monospace,Consolas,"D2Coding",monospace;font-size:13px;line-height:1.8;
  color:#333;white-space:pre-wrap;word-break:break-all}
.tiplist{margin:12px 0 0 18px;padding:0}
.tiplist li{padding:1px 0}
.guide-note{margin:10px 0 0;color:#2b4a7d}
.male-t{color:#1d4ed8;font-weight:600}
.female-t{color:#be185d;font-weight:600}
.danger-zone{border-color:#f3c7c4;background:#fffaf9}
.danger-zone h2{color:var(--bad)}

/* 선택 상자 글자가 화살표에 가려 잘리지 않게 */
td select{padding-right:14px;text-overflow:ellipsis}
td input.w-gown{text-align:center;padding-left:4px;padding-right:4px}
.chip.absentchip{background:#fff4d6;color:#8a5a00}
tr.absent{background:#f0f2f5}
.absent-sub{color:#5a626e}
.absent-tag{background:#79818d}
.guide-order span.opt{border-style:dashed;color:#6b7a94}
.absent-card{border-color:#ccd2da;background:#f4f6f8}
.absent-card h2{color:#434b57}

/* 정렬 선택 */
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sorter{display:flex;align-items:center;gap:8px}
.sorter label{margin:0;display:inline-flex;align-items:center;gap:5px;font-size:14px;color:var(--txt);
  border:1px solid var(--line);border-radius:16px;padding:4px 12px;cursor:pointer;background:#fff}
.sorter label.on{background:var(--accent);border-color:var(--accent);color:#fff}
.sorter input{width:auto;margin:0;accent-color:#fff}

/* 활동 / 부재 선택 */
.absent-form{margin:0}
td select.statesel,td select.snacksel{width:76px;border-radius:14px;font-size:12px;
    padding:3px 6px;text-align:center}
select.onsel{background:#e6f4ea;color:#0f9d58;border-color:#bfe3cb}
select.absentsel{background:#d6dae0;color:#343c48;border-color:#b9c0c9;font-weight:600}
select.inclsel{background:#e6f4ea;color:#0f9d58;border-color:#bfe3cb}
select.exclsel{background:#fdeceb;color:#c5362c;border-color:#f3cdc9}

/* 가운 표 : 파트가 달라도 칸 폭이 같도록 고정 */
table.gown.fixed{table-layout:fixed;max-width:560px}
table.gown .c-name{width:170px}
table.gown .c-gown{width:110px}
table.gown .c-act{width:70px}
table.gown .c-no{width:64px}
table.gown td,table.gown th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.gown td input.w-gown{width:92px;text-align:center}
table.gown h3+table{margin-top:4px}
table.gown .c-wear{width:210px}

/* 파트 표식 - 색 사각형 안에 S A T B */
.pt{display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;border-radius:4px;
  color:#fff;font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.3px;
  vertical-align:middle;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.pt-s{background:#c5221f}   /* 소프라노 — 진한 빨강 */
.pt-a{background:#ffd60a;color:#3d2e00;box-shadow:inset 0 0 0 1px #e0b400}   /* 알토 — 밝은 노랑 */
.pt-t{background:#0f9d58}   /* 테너 */
.pt-b{background:#1a73e8}   /* 베이스 */
.pt-c,.pt-p{background:#6b4ea8;font-size:11px}   /* 지휘 · 반주 */
.pt-x{background:#9aa0a6}

/* 추첨 옵션 */
.inline-form .opts,
.opts{flex:0 0 100%;display:flex;flex-direction:column;gap:8px;margin-top:8px;
  border-top:1px solid var(--line);padding-top:10px;align-items:stretch}
.inline-form .opts .opt-line,
.opt-line{flex:0 0 auto !important;display:flex;align-items:flex-start;gap:8px;margin:0;
  font-size:14px;color:var(--txt);cursor:pointer;line-height:1.45}
.opt-line input{width:auto;margin:3px 0 0;flex:0 0 auto}
.tag.allmark{background:#6b4ea8}
.tag.onmark{background:#e6f4ea;color:#136b35}
.tag.offmark{background:#f1f2f4;color:#6b7280}

.group li{display:flex;align-items:center;gap:6px}
.group ul{list-style:none;padding-left:2px}
.group li::before{content:"";width:4px;height:4px;border-radius:50%;background:#c3c8d0;flex:0 0 auto}
.runbtn{flex:0 0 auto;margin-top:10px}
.card .inline-form+.small{margin-top:10px}

/* 조원 이름은 크게, 파트 배지는 작게 */
.group li{font-size:15px;padding:0;margin:0;line-height:1.6;font-weight:400}
.group ul{margin:0}
.group h3{font-size:17px;margin-bottom:10px}
.group h3 .small{font-size:13px;font-weight:400}

/* 추첨 카드 — 위아래 군더더기 줄이기 */
.inline-form{align-items:flex-start}
.inline-form>label{margin-bottom:0}
.runbtn{margin-top:12px}
.card .inline-form+.small{margin-top:12px}
.card p.small:last-child{margin-bottom:0}

/* 관리자 계정 초기화 모드 경고 */
.resetbar{background:#fdeceb;border-bottom:1px solid #f3c7c4;color:#a3160f;
  padding:10px 0;font-size:14px}
.resetbar code{background:#fff;border:1px solid #f3c7c4;border-radius:4px;padding:1px 6px}

/* 파트별 명단 표 (엑셀 느낌) */
table.roster{width:auto;min-width:520px;border-collapse:collapse;font-size:14px;margin-top:6px}
table.roster th,table.roster td{border:1px solid #9aa7bd;padding:5px 10px;white-space:nowrap}
table.roster thead th{background:#dce6f1;color:#1f2328;text-align:center;font-weight:700;font-size:14px}
table.roster thead th .sub{font-size:12px;font-weight:400;color:#5a6a85}
table.roster .partcell{background:#dce6f1;text-align:center;vertical-align:middle;font-weight:700}
table.roster .partcell .pname{font-size:15px}
table.roster .partcell .psub{font-size:12px;font-weight:400;color:#2b5fa8;margin-top:2px}
table.roster .person{min-width:150px}
table.roster .person .sub{font-size:12px;color:#6b7280}
table.roster .gno{text-align:center;width:92px;font-variant-numeric:tabular-nums}
table.roster .star{color:var(--bad);font-weight:700;margin-right:2px}
table.roster tr.absent-row,table.roster .absent-row{color:#6b7280}

/* 파트별 파스텔 배경 */
table.roster .pc-s{background:#fbdedb}  /* 소프라노 */
table.roster .pc-a{background:#fdf0c4}  /* 알토 */
table.roster .pc-t{background:#d9eee1}  /* 테너 */
table.roster .pc-b{background:#dbe6f8}  /* 베이스 */
table.roster .pc-c,table.roster .pc-p{background:#e5dff4}  /* 지휘 · 반주 */
table.roster .pc-x{background:#eceef1}

/* 파트 칸만 색을 쓰고, 이름 · 가운 번호 칸은 흰 바탕으로 둔다 */
table.roster tr.pr-s td:not(.partcell),
table.roster tr.pr-a td:not(.partcell),
table.roster tr.pr-t td:not(.partcell),
table.roster tr.pr-b td:not(.partcell),
table.roster tr.pr-c td:not(.partcell),
table.roster tr.pr-p td:not(.partcell),
table.roster tr.pr-x td:not(.partcell){background:#fff}

/* 번호별 표 */
table.roster.numlist{min-width:420px}
table.roster.numlist td.no{background:#eef1f6;text-align:center;font-weight:600;color:#4a5568}
table.roster.numlist tr.empty td{color:#b9bec6;background:#fcfcfd}
table.roster.numlist tr.dup td{background:#fdeceb}
table.roster .c-wear{width:220px}

/* 편집 탭 */
table.roster.edit{min-width:480px}
table.roster.edit td{padding:4px 8px}
.parthead{display:inline-block;padding:5px 14px;border-radius:8px 8px 0 0;margin:16px 0 0;
  border:1px solid #9aa7bd;border-bottom:0;font-size:15px}
.parthead+table.roster{margin-top:0}

/* 편집 탭 — 파트가 달라도 칸 폭이 같게, 저장 버튼은 가운데 */
table.roster.edit{table-layout:fixed;width:540px;min-width:0}
table.roster.edit .c-name{width:150px}
table.roster.edit .c-gown{width:130px}
table.roster.edit .c-act{width:92px}
table.roster.edit td:nth-child(2),
table.roster.edit td:nth-child(3),
table.roster.edit td:nth-child(4){text-align:center}
table.roster.edit td input.w-gown{width:104px;text-align:center}
table.roster.edit td button.mini{min-width:56px}
.parthead{min-width:120px;text-align:left}

/* 가운 번호 고르기 */
.gowncell{display:flex;align-items:center;justify-content:center;gap:2px}
table.roster.edit td .gowncell input.w-gown{width:86px}
.dropbtn{padding:2px 6px;font-size:12px;line-height:1.2;background:#eef2f7;color:#4a5568;
  border:1px solid var(--line);border-radius:5px;cursor:pointer}
.dropbtn:hover{background:#dde5ef}

.gownpop{position:absolute;z-index:50;background:#fff;border:1px solid #9aa7bd;border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);min-width:230px;max-height:300px;overflow:auto}
.gownpop-head{padding:7px 12px;background:#dce6f1;font-weight:700;font-size:13px;
  border-bottom:1px solid #9aa7bd;position:sticky;top:0}
.gownpop-body{padding:6px}
.gownpop-row{display:flex;align-items:center;gap:4px;padding:2px 4px}
.gownpop-no{min-width:46px;padding:4px 8px;font-size:14px;font-weight:700;
  background:#eef2f7;color:var(--txt);border:1px solid var(--line);border-radius:5px;cursor:pointer}
.gownpop-no:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.gownpop-size{padding:4px 9px;font-size:12px;background:#fff;color:var(--muted);
  border:1px solid var(--line);border-radius:5px;cursor:pointer}
.gownpop-size:hover{background:#eef3fd;color:var(--accent);border-color:var(--accent)}
.gownpop-none{padding:10px 12px;color:var(--muted);font-size:13px}

/* 저장 버튼 칸 — 가운데 */
table.roster td.actcell{text-align:center !important;vertical-align:middle}
table.roster td.actcell button{display:inline-block;float:none;margin:0 auto}
.board .special{align-self:start}

/* 간식 제외 칸 — 가로 3열로 가지런히 */
.dropbox .bcol-body{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}
.dropbox .bcol-body .nametag{width:100%;justify-content:flex-start}
@media (max-width:900px){.dropbox .bcol-body{grid-template-columns:repeat(2,1fr)}}
/* 휴대폰에서는 보드를 한 줄에 한 파트씩 */
@media (max-width:560px){
  .board{grid-template-columns:1fr}
  .dropbox .bcol-body{grid-template-columns:1fr}
  .bcol-body.flow{flex-wrap:wrap}
}

/* 지휘 · 반주 칸은 내용 높이만 (.bcol 의 min-height:160px 을 덮는다) */
.board .bcol.special{min-height:0 !important;align-self:start}
.board .bcol.special .bcol-body{min-height:0 !important;flex:0 0 auto;padding:8px 10px 10px}

/* ---- 대원 본인 로그인 (보기 전용 화면) ------------------------------- */
.w-pass{width:56px;text-align:center}
.bar .who{font-weight:600}
.logintip{margin-top:14px;line-height:1.6}

/* 내 정보 카드 — 폭을 내용에 맞춰 왼쪽에 모은다 */
.mecard{width:auto;min-width:300px;max-width:420px;border-collapse:collapse;margin:0 0 10px}
.mecard th{width:110px;text-align:left;padding:6px 12px;color:#44506a;font-weight:600;white-space:nowrap}
.mecard td{padding:6px 12px}
.mygroup{font-size:16px;color:#8a5b00}
@media (max-width:720px){.mecard{min-width:0;width:100%}}

/* 제목줄 안의 작은 글씨 (직분) */
.tb-sub{font-size:13px;font-weight:600;color:#44506a;margin-left:6px}

/* 가운 명단에서 내 줄 */
table.roster tbody tr.merow>td:not(.partcell){background:#fff6d8 !important}
table.roster tbody tr.merow>td{font-weight:700}

/* 내가 속한 조 / 내 이름을 눈에 띄게 */
.group.mine{border-color:#f0b429;background:#fffdf5}
.group.mine h3{color:#8a5b00}
.meline{font-weight:700}

/* CSV 내보내기 버튼 (a 태그라 button 모양을 따로 준다 - 크기는 button 과 같게) */
a.btn{display:inline-block;padding:8px 16px;border:0;border-radius:6px;
      background:#2f8f4e;color:#fff;text-decoration:none;font:inherit;cursor:pointer}
a.btn:hover{filter:brightness(1.06)}

/* 바깥 사이트로 나가는 버튼 (자리배치) */
nav a.ext{background:#e6f3ea;color:#2f7d4f;border-color:#c2ddcd}
nav a.ext:hover{background:#d6ebdd;border-color:#a8cdb8}

/* ---- 상태 색은 얼룩무늬보다 세게 ------------------------------------- */
table:not(.roster) tbody tr.dup>td{background:#fff3f2}
table:not(.roster) tbody tr.absent>td{background:#f0f2f5}
/* 가운 표도 같게 — 파트 칸(rowspan)은 파트 색을 지킨다 */
table.roster tbody tr.absent>td:not(.partcell){background:#f0f2f5 !important}
table:not(.roster) tbody tr.off>td{background:#f4f5f6;color:#8b929c}
table:not(.roster) tbody tr.teacher>td{background:#f7f9f4}
table:not(.roster) tbody tr.empty>td{color:#b9bec6}


/* ---- 제목칸 : 하복 주황 · 동복 보라 (사이트 전체 통일) ----------------
   템플릿에서 th 에 th-su / th-wi 를 붙인다. 표 종류를 가리지 않는다. */
th.th-su{background:#fbe0c4 !important;color:#7a4b12 !important}
th.th-wi{background:#e4ddf5 !important;color:#4b3d80 !important}

/* 교사 · 부재는 손으로 고르지 않아도 빠진다 — 누를 수 없는 표시 */
.chip.fixedchip{display:inline-block;background:#fdeceb;color:var(--bad);cursor:default}

/* ---- 휴대폰 화면 -------------------------------------------------------
   칸 많은 표는 줄이지 않고 옆으로 밀어 본다. 첫 열(이름)은 붙잡아 둔다. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table{width:max-content;min-width:100%}

@media (max-width:720px){
  main.wrap{padding:12px 12px 24px}
  .card{padding:14px 12px;border-radius:8px}
  table{font-size:13px}
  th,td{padding:5px 6px}
  .tablewrap{margin:0 -12px;padding:0 12px}      /* 카드 여백까지 써서 넓게 */

  /* 이름 열 고정 — 옆으로 밀어도 누구 줄인지 보인다 */
  table.wide tbody td:nth-child(2),
  table.wide thead th:nth-child(2){position:sticky;left:0;z-index:2;background:#fff}
  table.wide thead th:nth-child(2){background:#dce6f1;z-index:3}
  table.wide tbody tr:nth-child(even)>td:nth-child(2){background:#fafbfd}
  table.wide tbody tr.absent>td:nth-child(2){background:#f0f2f5}

  table.roster .c-person,table.roster .person{position:sticky;left:0;z-index:2;background:#fff}
  table.roster thead th.c-person{background:#dce6f1;z-index:3}

  .w-name{width:72px}.w-pass{width:48px}.w-pos{width:50px}
  .w-part{width:74px}.w-gown{width:76px}.w-dept{width:78px}
  .tabs,.sorter{flex-wrap:wrap}
  .inline-form{flex-direction:column;align-items:stretch}
  .inline-form label{flex:1 1 auto}
  a.btn,button{width:auto}
}

/* 표를 옆으로 밀 수 있다는 안내 (휴대폰에서만 보인다) */
.scrollhint{display:none}
@media (max-width:720px){
  .scrollhint{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
}

/* 카드 안에서 제목처럼 보이게 하는 머리줄 */
h2.titlebar{background:#dce6f1;border:1px solid #b9c7dc;border-radius:7px;
            color:#1f3353;font-size:17px;padding:9px 14px;margin:-4px 0 14px;text-align:center}
@media (max-width:720px){h2.titlebar{font-size:15px;padding:8px 10px}}

.noticemeta{margin:-6px 0 12px}

/* ---- 대원 목록 표 본문 글자 크기 (한 곳에서 바꾼다) ------------------- */
table.wide tbody td,
table.wide tbody td .small,
table.wide tbody td .muted,
table.wide tbody td .chip,
table.wide tbody td input,
table.wide tbody td select,
table.wide tbody td button{font-size:11px}

/* 11px 에 맞춘 대원 목록 표 가로폭 — 글자가 작아진 만큼 칸도 줄인다 */
table.wide tbody td,table.wide thead th{padding:4px 5px}
table.wide .w-name{width:56px}
table.wide .w-pass{width:44px}
table.wide .w-pos{width:36px}
table.wide .w-part{width:74px}
table.wide .w-dept{width:60px}
table.wide .gowncell input.w-gown{width:62px}
table.wide .gowncell{gap:1px}
table.wide .dropbtn{padding:1px 4px;font-size:10px}
table.wide td select.statesel,table.wide td select.snacksel{width:46px;padding:2px 1px}
table.wide td button.mini{padding:3px 7px}
table.wide td input,table.wide td select{padding:3px 4px}
/* 남은 칸들도 글자 크기에 맞춰 조인다 */
table.wide .w-part{width:66px}
table.wide .gowncell input.w-gown{width:56px}
table.wide td button.mini{padding:3px 5px}
table.wide thead th{white-space:nowrap}
table.wide tbody td,table.wide thead th{padding:4px 4px}

/* 저장 · 삭제를 한 칸에 나란히 */
td.actcell .actbox{display:flex;align-items:center;justify-content:center;gap:4px}
td.actcell .actbox form{margin:0}

/* 가운 표는 화면이 넓어도 끝없이 늘어나지 않게 상한을 둔다 (가독성) */
.tablewrap table.roster{width:auto;min-width:0;max-width:720px}
.tablewrap table.roster.numlist{max-width:520px}
.tablewrap table.roster.edit{max-width:560px}
@media (max-width:720px){
  .tablewrap table.roster{max-width:none}
}

/* 번호별 표 : 하복 · 동복 칸의 남는 여백을 덜어낸다 (220 -> 176, 20%) */
table.roster.numlist .c-wear{width:176px}
.tablewrap table.roster.numlist{max-width:440px}