/* ============================================================
 * sheet.css — 상담식 엑셀 시트(app-sheet.js) 공통 스타일
 *   토스 톤 · 둥근 카드 + 밝은 헤더 + 행 구분(세로선 없음) + 호버. 클래스 접두사 xs-.
 * ============================================================ */
.xs-toolbar{display:flex;align-items:center;gap:8px;margin:4px 0 12px;flex-wrap:wrap}
.xs-tool{padding:9px 16px;border:1px solid #e3e9f0;background:#fff;border-radius:11px;font-size:13px;font-weight:700;font-family:inherit;color:#4f8ec0;cursor:pointer;transition:all .15s;white-space:nowrap}
.xs-tool:hover{background:#f2f7fc}
.xs-tool:active{transform:scale(.97)}
.xs-tool.on{background:#4f8ec0;border-color:#4f8ec0;color:#fff}
.xs-bar{display:flex;align-items:center;gap:6px;margin-left:auto;color:#8b95a1;font-size:12px}
.xs-arrow{width:28px;height:28px;border:1px solid #e3e9f0;background:#fff;border-radius:9px;color:#4f8ec0;font-size:14px;cursor:pointer;line-height:1}
.xs-arrow:active{transform:scale(.94)}
.xs-hint{white-space:nowrap}

.xs-wrap{border:1px solid #e9eef4;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(43,53,64,.04),0 6px 20px rgba(43,53,64,.06)}
.xs-wrap.xs-editing{outline:2px solid #f0c674;outline-offset:-1px}
.xs-scroll{overflow-x:auto;max-height:72vh;overflow-y:auto}
/* PC(≥1000px, 좌측 사이드바 있음): 세로를 최대한 크게 — 사이드바는 가로만 차지하므로 세로는 화면 거의 전체 사용 */
@media(min-width:1000px){ .xs-scroll{max-height:calc(100vh - 150px)} }

table.xs-table{border-collapse:collapse;width:max-content;min-width:100%;font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.xs-table th{position:sticky;top:0;z-index:2;background:#f4f7fb;color:#7c8894;font-weight:800;font-size:12px;text-align:left;padding:12px 14px;white-space:nowrap;border:none;border-bottom:1px solid #e3e9f0}
.xs-table td{padding:12px 14px;border:none;border-bottom:1px solid #eef2f6;color:#233039;font-weight:500}
.xs-table th.xs-sort{cursor:pointer;user-select:none}
.xs-table th.xs-sort:hover{background:#ecf1f7}
.xs-arw{font-size:10px;margin-left:3px;color:#4f8ec0}
/* 행 호버(선택보다 약하게) */
.xs-table tbody tr:hover td{background:#f6f9fd}
.xs-table tbody tr:last-child td{border-bottom:none}

/* # 열 + 고정 열 */
.xs-table th.xs-idxh,.xs-table td.xs-idx{position:sticky;left:0;z-index:1;width:40px;min-width:40px;text-align:center}
.xs-table th.xs-idxh{z-index:3;background:#f4f7fb}
.xs-table td.xs-idx{background:#fff;color:#aab4bf;font-weight:800}
.xs-table .xs-fz{position:sticky;z-index:2;overflow:hidden;text-overflow:ellipsis;box-shadow:1px 0 0 #eef2f6}
.xs-table td.xs-fz{background:#fff}
.xs-table thead th.xs-fz{z-index:4;background:#f4f7fb}

/* 읽기 셀 */
.xs-table td.xs-cell{cursor:cell;outline:none}
.xs-table td.xs-cell:not(.xs-fz){max-width:240px;overflow:hidden;text-overflow:ellipsis}
.xs-table td.sr-narrow{max-width:108px!important}
/* 셀 선택 시 그 행 전체 하이라이트(포커스 셀은 더 진하게) */
.xs-table tr:focus-within td{background:#eaf4fb!important}
.xs-table td.xs-cell:focus,.xs-table td.xs-idx:focus{outline:2.5px solid #2f80a8;outline-offset:-2px;background:#cfe6f7!important;color:#12405e;font-weight:700}
.xs-table td.xs-expanded{max-width:420px!important;white-space:normal!important;word-break:break-word;overflow:visible;background:#fffef5;box-shadow:inset 0 0 0 2px #4f8ec0}

/* 편집 셀 */
.xs-table td.xs-ecell{cursor:cell;outline:none}
.xs-table td.xs-ecell:focus{outline:2.5px solid #2f80a8;outline-offset:-2px;background:#cfe6f7!important;color:#12405e;font-weight:700}
.xs-table td.xs-ecell.editing{padding:0}
.xs-wrap.xs-editing .xs-table td{background:#fff8e8}
.xs-wrap.xs-editing .xs-table td.xs-idx,.xs-wrap.xs-editing .xs-table td.xs-fz{background:#fff8e8}
.xs-wrap.xs-editing .xs-table td.xs-ecell:focus{background:#cfe6f7}
.xs-input{width:100%;box-sizing:border-box;border:2px solid #4f8ec0;border-radius:0;padding:9px 8px;font-size:13.5px;font-family:inherit;font-weight:500;color:#233039;outline:none;background:#fff}

/* 액션/삭제 열 */
.xs-table th.xs-acth,.xs-table td.xs-act{text-align:center;width:52px}
.xs-actbtn{border:none;background:transparent;color:#4f8ec0;font-size:13px;font-weight:800;cursor:pointer;padding:4px 7px;border-radius:6px;white-space:nowrap}
.xs-actbtn:hover{background:#e8f1fa}
.xs-actbtn.del{color:#e0586b}
.xs-actbtn.del:hover{background:#fdecef}
.acc-badge{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:800;vertical-align:middle}
.acc-badge.ns{background:#fdecef;color:#e0586b}
.acc-badge.np{background:#fbf0dd;color:#c07d1f}
.acc-badge.pa{background:#e8f1fa;color:#3b7bb5}
.xs-del{border:none;background:transparent;color:#aab4bf;font-size:14px;font-weight:800;cursor:pointer;padding:4px 7px;border-radius:6px}
.xs-del:hover{color:#e0586b;background:#fdecec}

/* 시트/간략 보기 토글 */
.view-toggle{display:inline-flex;gap:4px;background:#eef2f6;border-radius:12px;padding:4px;margin-bottom:10px}
.view-toggle button{border:none;background:transparent;padding:7px 16px;border-radius:9px;font-weight:700;font-size:13px;color:#8b95a1;cursor:pointer;font-family:inherit}
.view-toggle button.on{background:#fff;color:#4f8ec0;box-shadow:0 1px 3px rgba(0,0,0,.08)}

.xs-foot{text-align:center;padding:13px;color:#8b95a1;font-size:12px;border-top:1px solid #eef2f6;background:#f9fbfd;font-weight:700}
.xs-empty{text-align:center;padding:40px 16px;color:#8b95a1;font-size:13px}

/* 상단 요약 타일(화면별로 사용 — 결제선생 톤) */
.xs-summary{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid #e9eef4;border-radius:16px;box-shadow:0 1px 2px rgba(43,53,64,.04),0 6px 20px rgba(43,53,64,.06);overflow:hidden;margin:2px 0 14px}
.xs-summary .s{padding:14px 18px;border-left:1px solid #eef2f6}
.xs-summary .s:first-child{border-left:none}
.xs-summary .s .sl{font-size:12px;font-weight:800;color:#7c8894}
.xs-summary .s .sc{font-size:21px;font-weight:800;letter-spacing:-.03em;margin-top:6px;color:#233039}
.xs-summary .s .sa{font-size:13px;font-weight:800;color:#3d4a56;margin-top:2px}
.xs-summary .s.ok .sc{color:#2fa37a}
.xs-summary .s.crit .sc{color:#d98a2b}
@media(max-width:560px){.xs-summary{grid-template-columns:1fr}.xs-summary .s{border-left:none;border-top:1px solid #eef2f6}.xs-summary .s:first-child{border-top:none}}

/* 상태 알약(fmt에서 사용) */
.xs-pill{display:inline-block;font-size:12px;font-weight:800;padding:4px 10px;border-radius:8px;white-space:nowrap}
.xs-pill.sky{background:#e8f1fa;color:#3b7bb5}
.xs-pill.ok{background:#e2f4ee;color:#2fa37a}
.xs-pill.amber{background:#fbeedd;color:#d98a2b}
.xs-pill.crit{background:#fbe6ea;color:#d15466}

/* 상세 팝업 */
.xs-modal-overlay{position:fixed;inset:0;background:rgba(20,28,38,.45);display:none;align-items:flex-start;justify-content:center;z-index:1000;padding:24px 14px;overflow-y:auto}
.xs-modal-overlay.open{display:flex}
.xs-modal{background:#fff;border-radius:18px;width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:18px}
.xs-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.xs-modal-title{font-size:17px;font-weight:800;color:#2c3540}
.xs-modal-x{border:none;background:transparent;font-size:16px;color:#8b95a1;cursor:pointer;padding:4px 8px;line-height:1}

/* 모바일: 고정열(sticky)을 전부 해제하고 일반 가로 스크롤 표로.
   → 고정열이 모바일(특히 iOS)에서 어긋나며 왼쪽에 빈칸/밀림 생기던 것 완전 제거 (PC는 그대로 고정) */
@media(max-width:480px){
  .xs-table{font-size:12px;width:auto;min-width:100%}
  .xs-table th,.xs-table td{padding:9px 10px}
  .xs-scroll{-webkit-overflow-scrolling:auto}
  .xs-table th.xs-idxh,.xs-table td.xs-idx,.xs-table .xs-fz{
    position:static !important;left:auto !important;box-shadow:none !important;z-index:auto !important}
  .xs-table th.xs-idxh,.xs-table td.xs-idx{width:30px;min-width:30px}
}

/* 행 강조 (rowCls) — 미배정·취소 등 */
.xs-table tr.xs-warn td{background:#fffaf2}
.xs-table tr.xs-warn td.xs-fz,.xs-table tr.xs-warn td.xs-idx{background:#fffaf2}
.xs-table tr.xs-dim td{background:#fafbfc;color:#8b95a1}
.xs-table tr.xs-dim td.xs-fz,.xs-table tr.xs-dim td.xs-idx{background:#fafbfc}

/* 칸 폭 축소용(긴 글은 …으로 잘림, 더블클릭하면 전체 보임) */
.xs-table td.xs-w90{max-width:90px!important}
.xs-table td.xs-w120{max-width:120px!important}
@media(max-width:480px){
  .xs-table td.xs-w90{max-width:74px!important}
  .xs-table td.xs-w120{max-width:96px!important}
}

/* 교육비 — 개인별 교육비가 따로 설정된 학생 표시 */
.tu-diff{display:inline-flex;align-items:center;gap:5px;background:#fff6e8;color:#c47f1e;
     font-weight:800;border-radius:7px;padding:3px 8px}
.tu-diff i{width:6px;height:6px;border-radius:50%;background:#e89c3c;flex-shrink:0}
.tu-diff.up{background:#fdeef1;color:#c0485c}
.tu-diff.up i{background:#e0586b}

/* 시트 다중 선택 삭제 (bulkDelete) */
.xs-tool.del{color:#e0586b;border-color:#f3d3d9}
.xs-tool.del:disabled{opacity:.4;cursor:default}
.xs-table th.xs-ckh,.xs-table td.xs-ckc{width:36px;min-width:36px;text-align:center;padding:8px 6px}
.xs-table th.xs-ckh{background:#f7f9fc;border-bottom:1px solid #eef2f6}
.xs-ck{width:18px;height:18px;border:1.7px solid #b6c0cc;border-radius:5px;display:inline-grid;
     place-items:center;font-size:11px;color:#fff;font-weight:900;cursor:pointer;vertical-align:middle;background:#fff}
.xs-ck.on{background:#e0586b;border-color:#e0586b}
.xs-ck.on::after{content:"✓"}
.xs-table tr.xs-picked td{background:#fdf3f5}
.xs-table tr.xs-picked td.xs-fz,.xs-table tr.xs-picked td.xs-idx,.xs-table tr.xs-picked td.xs-ckc{background:#fdf3f5}