:root{
  --ink:#14242b; --ink-2:#4a5b63; --ink-3:#66767d;
  --line:#e3e8ea; --line-2:#cfd8dc;
  --bg:#f4f6f7; --panel:#ffffff;
  --navy:#0f3b4c; --teal:#1b6d7a; --teal-2:#35a39a; --teal-soft:#e6f3f2;
  --gold:#c9962b; --gold-soft:#fbf4e4;
  --red:#b4442b; --red-soft:#fbebe7; --green:#2b7a4b; --green-soft:#e8f4ec; --blue-soft:#e9f1f8;
  --r:10px; --shadow:0 1px 2px rgba(20,36,43,.06),0 4px 16px rgba(20,36,43,.05);
  --font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Noto Sans JP","Meiryo",system-ui,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.45rem;font-weight:600;letter-spacing:.01em;margin:0 0 .25rem}
h2{font-size:1.05rem;font-weight:600;margin:0 0 .75rem;color:var(--navy)}
.sub{color:var(--ink-2);font-size:.9rem;margin:0 0 1.25rem}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-3)}.small{font-size:.85rem}
.nowrap{white-space:nowrap}

/* layout */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{background:var(--navy);color:#dbe7ea;padding:1.25rem 1rem;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{font-weight:700;color:#fff;letter-spacing:.02em;line-height:1.3;margin-bottom:.25rem}
.brand small{display:block;font-weight:400;color:#9fb8bf;font-size:.75rem}
.nav{margin-top:1.25rem;display:flex;flex-direction:column;gap:2px}
.nav a{color:#dbe7ea;padding:.5rem .7rem;border-radius:8px;font-size:.93rem;display:flex;align-items:center;gap:.5rem}
.nav a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.nav a.on{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.nav .grp{font-size:.7rem;color:#8fa9b1;letter-spacing:.1em;margin:.9rem .7rem .2rem;text-transform:uppercase}
.menu-btn{display:none}
.sidebody{display:flex;flex-direction:column;flex:1}
.side .me{margin-top:auto;font-size:.82rem;color:#b9cbd0;border-top:1px solid rgba(255,255,255,.12);padding-top:.9rem}
.side .me b{color:#fff;display:block}
.side .me form{display:inline}
.main{padding:1.75rem 2.25rem 4rem;max-width:1280px;width:100%;min-width:0}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}
.topbar .actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.1rem 1.25rem;margin-bottom:1.25rem}
.card.tight{padding:0;overflow:hidden}
.card .head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--line);background:#fbfcfc}
.card .head h2{margin:0}
.grid{display:grid;gap:1.25rem}.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}
@media screen and (max-width:1000px){.grid.c2,.grid.c3{grid-template-columns:1fr}}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem}
@media screen and (max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.1rem;box-shadow:var(--shadow)}
.kpi .l{font-size:.78rem;color:var(--ink-2)}
.kpi .v{font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--navy);line-height:1.2;margin-top:.15rem}
.kpi .v small{font-size:.8rem;font-weight:400;color:var(--ink-3);margin-left:.2rem}

/* tables */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{font-weight:600;color:var(--ink-2);text-align:left;font-size:.8rem;letter-spacing:.02em;padding:.6rem .75rem;border-bottom:1px solid var(--line-2);background:#fbfcfc;white-space:nowrap}
td{padding:.55rem .75rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#f8fafa}
tr.total td{font-weight:600;background:#f3f7f7;border-top:2px solid var(--line-2)}
tr.off td{color:var(--ink-3);background:#fafbfb}
tr.locked td{background:#fbfaf6}
th.num,td.num{text-align:right}
.tbl-wrap{overflow-x:auto}

/* forms */
label{display:block;font-size:.82rem;color:var(--ink-2);margin-bottom:.25rem;font-weight:600}
label .req{color:var(--red);margin-left:.2rem;font-weight:400}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=email],input[type=month],select,textarea{
  width:100%;font:inherit;padding:.5rem .65rem;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(27,109,122,.15)}
input[readonly]{background:#f6f8f8;color:var(--ink-2)}
input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
textarea{min-height:5rem;resize:vertical}
.field{margin-bottom:.9rem}.help{font-size:.8rem;color:var(--ink-3);margin-top:.2rem}
.frow{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.inline-form{display:flex;gap:.5rem;align-items:end;flex-wrap:wrap}
.inline-form .field{margin:0}
.check{display:flex;align-items:center;gap:.5rem;font-weight:400;color:var(--ink)}
.check input{width:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.9rem;font-weight:600;padding:.5rem .95rem;border-radius:8px;border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:#f3f6f6;text-decoration:none}
.btn.pri{background:var(--teal);border-color:var(--teal);color:#fff}.btn.pri:hover{background:#155b66}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}.btn.gold:hover{background:#b3841f}
.btn.danger{color:var(--red);border-color:#e4b8ad}.btn.danger:hover{background:var(--red-soft)}
.btn.sm{font-size:.8rem;padding:.3rem .6rem}
.btn.ghost{border-color:transparent;background:transparent;color:var(--teal)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:focus-visible{outline:3px solid rgba(27,109,122,.35);outline-offset:1px}

/* badges */
.badge{display:inline-block;font-size:.74rem;font-weight:600;padding:.12rem .55rem;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.badge.draft{background:#f1f3f4;color:var(--ink-2);border-color:var(--line-2)}
.badge.issued{background:var(--blue-soft);color:#2a5a86}
.badge.approved{background:var(--green-soft);color:var(--green)}
.badge.returned{background:var(--red-soft);color:var(--red)}
.badge.void{background:#f3f3f3;color:var(--ink-3);text-decoration:line-through}
.badge.none{background:var(--gold-soft);color:#8a6410}
.badge.kind{background:var(--teal-soft);color:var(--teal)}
.badge.warn{background:var(--red-soft);color:var(--red)}

/* flash */
.flash{border-radius:8px;padding:.7rem 1rem;margin-bottom:1rem;font-size:.92rem;border:1px solid}
.flash.success{background:var(--green-soft);border-color:#bfe0cb;color:var(--green)}
.flash.error{background:var(--red-soft);border-color:#eac1b6;color:var(--red)}
.flash.info{background:var(--blue-soft);border-color:#c5d9ea;color:#2a5a86}
.warnbox{background:var(--gold-soft);border:1px solid #ecd7a2;color:#6d4f0c;border-radius:8px;padding:.7rem 1rem;margin-bottom:1rem;font-size:.9rem}
.warnbox ul{margin:.3rem 0 0 1.1rem;padding:0}
.lockbox{background:#f6f3ea;border:1px solid #e3d9bf;color:#6d5a2c;border-radius:8px;padding:.6rem .9rem;font-size:.88rem;margin-bottom:1rem}

/* month nav */
.monthnav{display:inline-flex;align-items:center;gap:.25rem;border:1px solid var(--line-2);border-radius:8px;background:#fff;padding:.15rem}
.monthnav a,.monthnav span{padding:.3rem .6rem;border-radius:6px;font-weight:600;color:var(--ink)}
.monthnav a:hover{background:#f1f4f4;text-decoration:none}
.monthnav form{display:inline}.monthnav input[type=month]{width:auto;padding:.3rem .4rem;border:0;font-weight:600}

/* steps */
.steps{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--ink-3);margin-bottom:1rem;flex-wrap:wrap}
.steps .s{padding:.2rem .6rem;border-radius:999px;background:#eef1f2}
.steps .s.on{background:var(--teal);color:#fff;font-weight:600}
.steps .s.done{background:var(--green-soft);color:var(--green)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,var(--navy),#1b6d7a 70%,#35a39a)}
.login .box{background:#fff;border-radius:14px;padding:2rem 2.25rem;width:380px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login h1{font-size:1.15rem}

/* document (screen) */
.doc{background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);padding:22mm 18mm;width:210mm;max-width:100%;margin:0 auto;font-size:10.5pt;line-height:1.55;color:#111}
.doc .t{text-align:center;font-size:20pt;letter-spacing:.35em;font-weight:600;margin:0 0 .2rem}
.doc .st{text-align:center;color:#555;font-size:9pt;margin-bottom:1.4rem}
.doc .hdr{display:flex;justify-content:space-between;gap:2rem;margin-bottom:1rem}
.doc .to{font-size:13pt;font-weight:600;border-bottom:1px solid #333;padding-bottom:.2rem;display:inline-block;min-width:60%}
.doc .meta{font-size:9.5pt;color:#333;text-align:right}
.doc .meta div{white-space:nowrap}
.doc .issuer{font-size:9.5pt;text-align:left}
.doc .issuer b{font-size:11pt}
.doc .amt{display:flex;align-items:baseline;gap:1rem;border-bottom:2px solid #111;padding:.3rem .2rem;margin:.6rem 0 1rem;width:62%}
.doc .amt .l{font-size:10pt;white-space:nowrap;flex:none}.doc .amt .v{font-size:17pt;font-weight:700;font-variant-numeric:tabular-nums;margin-left:auto}
.doc table{font-size:9.5pt}
.doc th{background:#eef2f3;color:#222;border-bottom:1px solid #999;border-top:1px solid #999;padding:.35rem .5rem}
.doc td{border-bottom:1px solid #ccc;padding:.35rem .5rem}
.doc tr.total td{background:#f6f8f8;font-weight:600;border-top:1px solid #999}
.doc .sums{margin-left:auto;width:55%;margin-top:.6rem}
.doc .sums td{padding:.3rem .5rem}
.doc .notes{font-size:8.5pt;color:#333;margin-top:1.2rem;white-space:pre-line;border-top:1px solid #ccc;padding-top:.6rem}
.doc .box{border:1px solid #999;padding:.5rem .8rem;font-size:9.5pt;margin-top:.8rem}
.doc .box div{display:flex;gap:1rem}.doc .box div span:first-child{width:6em;font-weight:600;flex:none}
.doc .detail{margin-top:1rem}
.doc .detail h3{font-size:9.5pt;margin:.6rem 0 .3rem;color:#333}
.doc .sig{display:flex;justify-content:flex-end;gap:2rem;margin-top:1.4rem;font-size:9pt}
.doc .sig div{border:1px solid #999;width:70px;height:70px;display:grid;place-items:start center;padding-top:.2rem;color:#666}
.doc .draftmark{position:absolute;right:10mm;top:10mm;border:2px solid var(--red);color:var(--red);font-weight:700;padding:.1rem .6rem;transform:rotate(8deg);opacity:.8;font-size:11pt}
.doc{position:relative}

/* print */
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff}
  .noprint{display:none !important}
  .doc{border:0;box-shadow:none;padding:0;width:auto;margin:0}
  .doc .draftmark{display:block}
  table{page-break-inside:auto}tr{page-break-inside:avoid}
  .doc{font-size:9.5pt;line-height:1.35}
  .doc .t{font-size:17pt;margin-bottom:0}.doc .st{margin-bottom:.6rem}
  .doc .hdr{margin-bottom:.4rem}.doc .amt{margin:.3rem 0 .5rem}
  .doc td,.doc th{padding:.2rem .4rem}
  .doc .detail{margin-top:.5rem}.doc .detail h3{margin:.3rem 0 .15rem}
  .doc .detail td,.doc .detail th{padding:.05rem .4rem;font-size:7.8pt;line-height:1.2}
  .doc .box{margin-top:.4rem;padding:.3rem .6rem}
  .doc .notes{margin-top:.5rem;padding-top:.3rem;font-size:7.8pt;line-height:1.3}
  .doc .sums{margin-top:.3rem}
  .doc .detail tr.off td{color:#888}
}
.printbar{display:flex;gap:.5rem;justify-content:space-between;align-items:center;margin:0 auto 1rem;width:210mm;max-width:100%}
@media screen and (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:0;z-index:20;height:auto;padding:.7rem 1rem;box-shadow:0 2px 8px rgba(0,0,0,.2)}
  .sidehead{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .brand{margin:0;font-size:.95rem}.brand small{display:none}
  .menu-btn{display:inline-block;font:inherit;font-size:.85rem;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:.35rem .8rem}
  .sidebody{display:none}.sidebody.open{display:flex;padding-bottom:.5rem}
  .nav{margin-top:.5rem}.nav a{padding:.65rem .7rem}
  .side .me{margin-top:.8rem}
  .main{padding:1rem .9rem 3rem}
  html{font-size:15px}
  h1{font-size:1.2rem}
  .topbar{flex-direction:column;align-items:stretch}
  .kpis{grid-template-columns:1fr 1fr;gap:.6rem}.kpi .v{font-size:1.2rem}
  .card{padding:.9rem 1rem}.card .head{padding:.7rem 1rem;flex-wrap:wrap}
  td,th{padding:.5rem .5rem}
  .btn{padding:.55rem 1rem}
  .doc{padding:6mm 4mm;font-size:9pt;overflow-x:auto}
  .btn.sm{padding:.55rem .9rem;font-size:.9rem}
  .monthnav a{padding:.6rem .9rem}
  /* 勤務実績：日付ごとのカード */
  table.shifts,table.shifts tbody,table.shifts tr,table.shifts td{display:block;width:100%}
  table.shifts thead,table.shifts tfoot,table.shifts .wdcell{display:none}
  table.shifts tr{border:1px solid var(--line);border-radius:10px;margin:.6rem 0;padding:.5rem .8rem .7rem;background:#fff}
  table.shifts tr.off{background:#fafbfb}
  table.shifts td{border:0;padding:.25rem 0;display:flex;align-items:center;gap:.6rem}
  table.shifts td[data-label]::before{content:attr(data-label);font-size:.78rem;color:var(--ink-2);width:5.5em;flex:none}
  table.shifts td input{flex:1;width:auto !important;max-width:12em}
  table.shifts td.dcell{font-size:1rem;padding-bottom:.3rem;border-bottom:1px dashed var(--line)}
  table.shifts td.actcell{justify-content:flex-end;padding-top:.5rem}
  table.shifts td.num{justify-content:flex-start}
  table.shifts td:empty{display:none}
  .doc .t{font-size:16pt}.doc .amt{width:100%}.doc .hdr{flex-direction:column;gap:.6rem}.doc .meta{text-align:left}
}
body{overflow-x:hidden}
.sub{overflow-wrap:anywhere}
kbd{font-family:var(--mono);font-size:.75rem;background:#eef1f2;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 .3rem}