*{box-sizing:border-box}
body{margin:0;font:14px/1.4 system-ui,Arial,sans-serif;background:#f4f6f9;color:#1f2937}
.top{display:flex;align-items:center;gap:18px;background:#1e3a5f;color:#fff;padding:8px 16px;position:sticky;top:0;z-index:20}
.top nav{display:flex;gap:4px;flex:1}
.top a{color:#cfe0f5;text-decoration:none;padding:6px 12px;border-radius:6px}
.top a.on,.top a:hover{background:#2f5a91;color:#fff}
.who{font-size:13px}
main{padding:16px;max-width:100%}
h2{margin:4px 0 12px}h3{margin:22px 0 6px}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:8px 0}
.bar label,.card label{display:flex;flex-direction:column;font-size:12px;gap:3px}
.sp{flex:1}
input,select{padding:6px 8px;border:1px solid #c5ccd6;border-radius:6px;font:inherit;background:#fff}
.btn{background:#1e66d0;color:#fff;border:0;border-radius:6px;padding:8px 14px;cursor:pointer;text-decoration:none;font:inherit;display:inline-block}
.btn.alt{background:#5b6b82}.btn.danger{background:#c62828}.btn.sm{padding:4px 9px;font-size:12px}
.btn:hover{opacity:.9}
.card{background:#fff;border:1px solid #dde3ec;border-radius:10px;padding:14px}
.hint{color:#5b6b82;font-size:12px;margin:4px 0}
.msg{background:#fff4e5;border:1px solid #ffd49a;padding:8px;border-radius:6px}
.scroll{overflow:auto;max-height:75vh;background:#fff;border:1px solid #dde3ec;border-radius:8px}
.grid{border-collapse:collapse;width:max-content;min-width:100%}
.grid th,.grid td{border:1px solid #cfd6e0;padding:3px 6px;text-align:center;white-space:nowrap}
.grid thead th{background:#dfe8f5;position:sticky;top:0;z-index:5}
.grid td.nm{text-align:left}
.grid td.num{text-align:right}
.grid td.b{font-weight:700}
.grid .grp td{background:#c9d3e0;font-weight:700;text-align:left}
.grid th.minggu{background:#f6c7c7}
.grid tfoot td{background:#eef2f7;font-weight:700}
.grid td.tot{font-weight:700;background:#f7f9fc}
td.cell{padding:0;min-width:46px}
td.cell select{width:100%;border:0;border-radius:0;background:transparent;padding:5px 2px;text-align:center;text-align-last:center;appearance:none;-webkit-appearance:none;cursor:pointer;font-weight:600}
td.cell select option{background:#fff;color:#000}
.c-h{background:#e9ecef}.c-s{background:#8fd694}.c-i{background:#7db7f0}.c-off{background:#ff6b6b;color:#fff}
.c-t{background:#ffb347}.c-c{background:#d9b8f0}.c-a{background:#ff6b6b;color:#fff}.c-half{background:#ffb6d0}
td.c-off select,td.c-a select{color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.legend span{padding:3px 9px;border-radius:12px;font-size:12px;font-weight:600}
.gi{width:110px;text-align:right}
.gi.saving{background:#fff8d6}.gi.err{background:#ffd6d6}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal .card{width:min(420px,92vw);display:flex;flex-direction:column;gap:10px}
.chk{flex-direction:row!important;align-items:center;gap:6px!important}
#toast{position:fixed;bottom:18px;right:18px;background:#222;color:#fff;padding:9px 14px;border-radius:8px;opacity:0;transition:.25s;pointer-events:none;z-index:99;max-width:80vw}
#toast.show{opacity:1}#toast.bad{background:#b71c1c}
body.login{display:flex;min-height:100vh;align-items:center;justify-content:center}
.loginbox{width:min(340px,92vw);display:flex;flex-direction:column;gap:10px}
.loginbox label{display:flex;flex-direction:column;gap:3px;font-size:12px}