*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  background:#f4f6f9;color:#1f2733;font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%}
a{color:#1558b0}
.wrap{max-width:1180px;margin:0 auto;padding:16px}
.wrap.narrow{max-width:720px}

header.bar{background:#12355b;color:#fff;padding:10px 0}
header.bar .wrap{display:flex;align-items:center;gap:12px;padding-top:0;padding-bottom:0;flex-wrap:wrap}
header.bar h1{font-size:17px;margin:0;font-weight:700;letter-spacing:.02em}
header.bar .sp{flex:1}
header.bar .who{font-size:13px;opacity:.9}
header.bar a,header.bar button.link{color:#cfe2ff;font-size:13px;background:none;border:0;cursor:pointer;text-decoration:underline;padding:0}

.card{background:#fff;border:1px solid #dde3ec;border-radius:10px;padding:18px;margin-bottom:16px}
.card h2{font-size:16px;margin:0 0 12px}
.card h3{font-size:14px;margin:18px 0 8px;color:#41506a}
.muted{color:#6b7890;font-size:13px}
.right{text-align:right}
.center{text-align:center}

label.f{display:block;margin-bottom:12px;font-size:13px;font-weight:600;color:#41506a}
label.f input,label.f select,label.f textarea{display:block;width:100%;margin-top:4px;font-weight:400;color:#1f2733}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  padding:9px 10px;border:1px solid #c3ccda;border-radius:6px;font-size:15px;font-family:inherit;background:#fff}
textarea{min-height:120px;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid #2f6fd0;outline-offset:-1px;border-color:#2f6fd0}

button,.btn{display:inline-block;padding:9px 16px;border-radius:6px;border:1px solid #c3ccda;background:#fff;
  font-size:14px;font-family:inherit;cursor:pointer;color:#1f2733;text-decoration:none}
button:hover,.btn:hover{background:#f0f3f8}
button.primary,.btn.primary{background:#1558b0;border-color:#1558b0;color:#fff}
button.primary:hover{background:#11498f}
button.danger{color:#b3261e;border-color:#e6b4b0}
button.sm{padding:4px 10px;font-size:12px}
button:disabled{opacity:.5;cursor:default}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;border-bottom:2px solid #dde3ec}
.tabs button{border:0;background:none;border-bottom:3px solid transparent;border-radius:0;
  padding:9px 14px;font-size:14px;font-weight:600;color:#6b7890;margin-bottom:-2px}
.tabs button.on{color:#12355b;border-bottom-color:#1558b0}

table.grid{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
table.grid th,table.grid td{border:1px solid #dde3ec;padding:7px 9px;text-align:left;white-space:nowrap}
table.grid th{background:#eef2f7;font-weight:600;color:#41506a;position:sticky;top:0;z-index:1}
table.grid td.num{text-align:right;font-variant-numeric:tabular-nums}
table.grid tr:hover td{background:#f7fafe}
.scroll{overflow-x:auto;border:1px solid #dde3ec;border-radius:8px}
.scroll table.grid{border:0}
.scroll table.grid th:first-child,.scroll table.grid td:first-child{position:sticky;left:0;background:#fff;z-index:2}
.scroll table.grid th:first-child{background:#eef2f7;z-index:3}

.up{color:#0a7c48;font-weight:700}
.down{color:#c0392b;font-weight:700}
.flat{color:#8a94a6}
.pill{display:inline-block;font-size:11px;padding:1px 7px;border-radius:10px;border:1px solid #c3ccda;color:#6b7890}
.pill.ok{background:#e6f4ec;border-color:#a8d5bd;color:#0a7c48}
.pill.wait{background:#fdf3e3;border-color:#efd4a3;color:#9a6a10}
.pill.manual{background:#eef0fb;border-color:#c2c8ee;color:#4a53a8}

/* マーク入力 */
.secblock{margin-bottom:22px}
.secblock > h3{background:#eef2f7;border-left:4px solid #1558b0;padding:7px 10px;margin:0 0 10px;font-size:14px;border-radius:0 4px 4px 0}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:6px}
.slot{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid #e6eaf1;
  border-radius:6px;background:#fff}
.slot.done{background:#f2f8ff;border-color:#c8dcf5}
.slot .k{flex:0 0 44px;font-weight:700;font-size:13px;color:#12355b;text-align:center;
  background:#eef2f7;border-radius:4px;padding:3px 2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot input.ans{flex:0 0 40px;width:40px;height:34px;padding:0;text-align:center;
  font-size:18px;font-weight:700;font-family:inherit;color:#12355b;
  border:2px solid #c3ccda;border-radius:6px;background:#fff}
.slot input.ans:focus{outline:3px solid #2f6fd0;outline-offset:-1px}
.slot input.ans:disabled{background:#f4f6f9;color:#41506a}
.slot .opts{display:flex;gap:3px;flex-wrap:wrap;flex:1 1 auto}
.slot .opts button.mk{width:27px;height:27px;padding:0;font-size:12px;border-radius:50%;
  line-height:1;border:1px solid #c3ccda;color:#41506a;background:#fff}
.slot .opts button.mk:hover:not(:disabled){background:#eef2f7}
.slot .opts button.mk.sel{background:#1558b0;border-color:#1558b0;color:#fff;font-weight:700}
.slot.num .opts button.mk{width:23px;height:23px;font-size:11px}
.slots.num{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.secnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.secnav a{font-size:12px;padding:4px 9px;border:1px solid #c3ccda;border-radius:14px;
  text-decoration:none;color:#41506a;background:#fff}
.secnav a:hover{background:#eef2f7}

.stickybar{position:sticky;bottom:0;background:#fff;border-top:1px solid #dde3ec;
  padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;z-index:5;
  box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.stickybar .sp{flex:1}
.progress{height:6px;background:#e6eaf1;border-radius:3px;overflow:hidden;width:160px}
.progress i{display:block;height:100%;background:#1558b0}

.msg{padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:14px}
.msg.err{background:#fdecea;border:1px solid #f5c6c2;color:#a03027}
.msg.ok{background:#e6f4ec;border:1px solid #a8d5bd;color:#0a7c48}
.msg.info{background:#eaf2fd;border:1px solid #bdd5f5;color:#12355b}

.modal{position:fixed;inset:0;background:rgba(15,25,40,.5);display:flex;align-items:flex-start;
  justify-content:center;padding:24px 12px;overflow:auto;z-index:50}
.modal .box{background:#fff;border-radius:10px;padding:20px;max-width:900px;width:100%}
.modal .box h2{margin-top:0}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.row > *{margin-bottom:0}
.hide{display:none!important}

@media (max-width:640px){
  .wrap{padding:12px}
  .card{padding:14px}
  .slots{grid-template-columns:1fr}
  .slot .opts button.mk{width:30px;height:30px;font-size:13px}
  header.bar h1{font-size:15px}
}

/* 先生の代理入力グリッド */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:5px;margin-bottom:14px}
.pcell{display:flex;align-items:center;gap:5px;border:1px solid #e6eaf1;border-radius:6px;padding:3px 5px}
.pcell span{flex:1 1 auto;font-size:12px;font-weight:700;color:#12355b;text-align:center;
  background:#eef2f7;border-radius:4px;padding:3px 2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pcell input{flex:0 0 38px;width:38px;height:32px;padding:0;text-align:center;
  font-size:17px;font-weight:700;border:2px solid #c3ccda;border-radius:6px}
.pcell input:focus{outline:3px solid #2f6fd0;outline-offset:-1px}