:root{
  --bg:#F6F9FD;--card:#fff;--ink:#1B2A41;--sub:#5B6B82;--line:#DCE5F2;
  --blue:#2B7BEA;--blue-d:#1F63C4;--blue-bg:#E8F1FD;
  --red:#D64545;--red-bg:#FDECEC;--orange:#C7731B;--orange-bg:#FFF3E5;--green:#1F9D63;--green-bg:#E6F6EE;--gray-bg:#EEF2F8;
  --sat:#2B7BEA;--sun:#D64545;
  --font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
.boot{padding:40px;text-align:center;color:var(--sub)}

/* ヘッダー */
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top))}
.logo{font-weight:800;letter-spacing:.02em;font-size:18px;color:var(--blue)}
.logo small{color:var(--sub);font-weight:500;font-size:12px;margin-left:6px}
.top .sp{flex:1}
.who{font-size:13px;color:var(--sub);text-align:right;line-height:1.2}
.who b{display:block;color:var(--ink);font-size:14px}
.iconbtn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;font-size:13px;color:var(--sub);cursor:pointer}

/* 下のナビ */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;border:0;background:none;padding:10px 4px 8px;font-size:12px;color:var(--sub);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.nav button .ic{font-size:20px;line-height:1}
.nav button.on{color:var(--blue);font-weight:700}
.nav .badge{position:absolute;margin:-4px 0 0 18px;background:var(--red);color:#fff;border-radius:10px;font-size:11px;padding:0 6px;min-width:18px}

.wrap{max-width:960px;margin:0 auto;padding:14px 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
h2{font-size:18px;margin:0 0 8px}
h3{font-size:15px;margin:0 0 6px;color:var(--sub)}
.muted{color:var(--sub);font-size:13px}

/* お知らせ */
.notice{border-radius:12px;padding:12px 14px;margin-bottom:10px;border:1px solid var(--line);background:#fff}
.notice.deadline{background:var(--orange-bg);border-color:#F3D1A6}
.notice.deadline b{color:var(--orange);font-size:17px}
.notice .t{font-weight:700}
.notice .b{font-size:14px;color:var(--sub);margin-top:2px;white-space:pre-wrap}

/* バッジ */
.badge-s{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.b-none{background:var(--gray-bg);color:var(--sub)}.b-draft{background:var(--gray-bg);color:var(--sub)}
.b-submitted,.b-kmgr_ok{background:var(--orange-bg);color:var(--orange)}
.b-approved,.b-reflected{background:var(--green-bg);color:var(--green)}
.b-returned,.b-reflect_failed{background:var(--red-bg);color:var(--red)}

/* 集計（大きい数字） */
.sumrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.sum{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.sum .l{font-size:12px;color:var(--sub)}
.sum .v{font-size:34px;font-weight:800;line-height:1.1;color:var(--ink)}
.sum .v small{font-size:14px;font-weight:600;color:var(--sub);margin-left:2px}
.sum .s{font-size:12px;color:var(--sub);margin-top:2px}
@media (max-width:420px){.sum .v{font-size:28px}}

/* 時間帯パレット */
.pal{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{border:2px solid var(--line);background:#fff;border-radius:10px;padding:6px 12px;cursor:pointer;text-align:center;min-width:76px}
.chip b{display:block;font-size:18px;line-height:1.2}
.chip span{font-size:11px;color:var(--sub)}
.chip.on{border-color:var(--blue);background:var(--blue-bg)}
.chip.on b{color:var(--blue-d)}
.chip.clear{border-style:dashed}
.chip.clear.on{border-color:var(--red);background:var(--red-bg)}
.chip.clear.on b{color:var(--red)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:600}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:disabled{background:#9DBCE8;border-color:#9DBCE8;cursor:not-allowed}
.btn.dan{background:#fff;border-color:var(--red);color:var(--red)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.ok{background:var(--green);border-color:var(--green);color:#fff}

/* カレンダー */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .h{text-align:center;font-size:13px;font-weight:700;padding:4px 0;color:var(--sub);cursor:pointer;border-radius:6px}
.cal .h.sun{color:var(--sun)}.cal .h.sat{color:var(--sat)}
.cal .h:active{background:var(--blue-bg)}
.cell{position:relative;min-height:62px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:3px 4px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;user-select:none}
.cell .d{font-size:12px;font-weight:700}
.cell.sun .d,.cell.hol .d{color:var(--sun)}.cell.sat .d{color:var(--sat)}
.cell .hn{font-size:9px;color:var(--sun);line-height:1.1;overflow:hidden;white-space:nowrap}
.cell .lab{font-size:15px;font-weight:800;text-align:center;color:var(--blue-d);letter-spacing:-.02em}
.cell .hr{font-size:10px;text-align:center;color:var(--sub);margin-top:-2px}
.cell.has{background:var(--blue-bg);border-color:var(--blue)}
.cell.na{background:var(--gray-bg);color:#9AA7BB;cursor:not-allowed}
.cell.closed{background:repeating-linear-gradient(45deg,#EEF2F8,#EEF2F8 6px,#E3E9F2 6px,#E3E9F2 12px);cursor:not-allowed}
.cell.closed .lab{font-size:10px;color:var(--sub)}
.cell.blank{border:0;background:none;cursor:default}
.cell.shake{animation:sh .25s}
@keyframes sh{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.cal.ro .cell{cursor:default}
.cell .lab{white-space:nowrap}
@media (max-width:480px){.cell .lab{font-size:13px;letter-spacing:-.04em}.cell{padding:3px 2px}.cell .hr{font-size:9px}}
.cal.mini .cell{min-height:42px;padding:2px 3px}
.cal.mini .cell .lab{font-size:12px}.cal.mini .cell .hr,.cal.mini .cell .hn{display:none}

/* 検算 */
.issue{border-radius:8px;padding:8px 12px;margin:6px 0;font-size:14px;font-weight:600}
.issue.error{background:var(--red-bg);color:var(--red)}
.issue.warn{background:var(--orange-bg);color:var(--orange)}
.issue.info{background:var(--blue-bg);color:var(--blue-d)}
.issue.good{background:var(--green-bg);color:var(--green)}

/* フォーム */
input[type=text],input[type=password],input[type=datetime-local],input[type=date],select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff}
textarea{min-height:64px;resize:vertical}
label.f{display:block;font-size:13px;color:var(--sub);margin:10px 0 4px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:6px;margin:0 0 12px;overflow-x:auto;padding-bottom:2px}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;white-space:nowrap;cursor:pointer;font-weight:600;color:var(--sub)}
.tabs button.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ログイン */
.login{max-width:380px;margin:0 auto;padding:36px 20px}
.login .logo{font-size:28px;text-align:center}
.login p{text-align:center;color:var(--sub);font-size:14px}
.err{color:var(--red);font-weight:600;min-height:24px;margin-top:8px;font-size:14px}

/* 表 */
table.t{border-collapse:collapse;width:100%;font-size:14px}
table.t th,table.t td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:middle}
table.t th{color:var(--sub);font-size:12px;font-weight:600}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);margin-right:6px}
.dot.off{background:#C5CEDC}
.scroll{overflow-x:auto}
table.mx{border-collapse:collapse;font-size:12px}
table.mx th,table.mx td{border:1px solid var(--line);padding:3px 4px;text-align:center;white-space:nowrap;min-width:38px}
table.mx td.nm{position:sticky;left:0;background:#fff;text-align:left;font-weight:700;min-width:96px;z-index:1}
table.mx th.sun,table.mx td.sun{color:var(--sun)}table.mx th.sat,table.mx td.sat{color:var(--sat)}
table.mx td.v{background:var(--blue-bg);font-weight:700;color:var(--blue-d)}
table.mx td.clo{background:var(--gray-bg)}
table.mx tr.tot td{background:#fafcff;font-weight:800}

/* トースト・モーダル */
.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#1B2A41;color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:90%}
.toast.on{opacity:1;transform:translate(-50%,0)}
.modal-back{position:fixed;inset:0;background:rgba(20,30,50,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.modal-back[hidden]{display:none}
.modal{background:#fff;border-radius:16px 16px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));width:100%;max-width:520px;max-height:88vh;overflow:auto}
@media (min-width:600px){.modal-back{align-items:center}.modal{border-radius:16px}}
.saved{font-size:12px;color:var(--sub)}
.steps{counter-reset:s;padding-left:0;list-style:none}
.steps li{counter-increment:s;margin:8px 0;padding-left:34px;position:relative}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;text-align:center;line-height:24px;font-size:13px;font-weight:700}

.logo{display:flex;align-items:center;gap:8px}
.toplogo{height:32px;width:auto;display:block}
.login .logo{justify-content:center}
.biglogo{display:block;margin:0 auto 10px;width:220px;max-width:70%;height:auto}

.demobar{position:sticky;top:0;z-index:30;background:#FFE9B8;color:#6B4200;border-bottom:2px solid #E8A53A;padding:8px 16px;font-size:13px;font-weight:600}
.demobar .btn{padding:3px 10px}
.demobar+.top{top:42px}

.wrap.wide{max-width:1560px}
table.mx2{width:100%;table-layout:fixed}
table.mx2 th,table.mx2 td{min-width:0;padding:3px 1px;font-size:11px;line-height:1.15;overflow:hidden}
table.mx2 td.nm{white-space:normal;font-size:13px;padding:4px 8px;position:static}
table.mx2 .stl{font-weight:400;margin-top:2px;font-size:11px}
table.mx2 .stl .badge-s{font-size:10px;padding:1px 7px}
table.mx2 .tm{display:block;font-size:8px;font-weight:400;color:var(--sub)}
.lnk{font-size:11px;color:var(--red)}
@media (max-width:1100px){table.mx2{min-width:1000px}}
.badge-s.z1{background:#FFF6BF;color:#8A6D00}
.badge-s.z2{background:#FFE0B8;color:#B25A00}
.badge-s.z3{background:#FBD0D0;color:#B71C1C}

.iconbtn{white-space:nowrap}.top .logo small{white-space:nowrap}
.cell .kj{font-size:11px;line-height:1.2;color:#9AA4B5;font-weight:600;margin-top:2px}
td .kjg,.kjg td{color:#9AA4B5;font-weight:600}
tr.tot.kjg td{background:#F4F6FA}

a.btn{text-decoration:none;display:inline-block;text-align:center}

/* 管理者の画面を見やすく：部署の色・状態の色・表の色 */
.badge-s.a-none{background:#FDDADA;color:#B3261E}
.badge-s.a-draft{background:#FFF0AD;color:#7A5F00}
.badge-s.a-returned,.badge-s.a-reflect_failed{background:#FFD9C2;color:#B54708}
.badge-s.a-submitted,.badge-s.a-kmgr_ok{background:#FFE3B3;color:#9C5200}
.badge-s.a-approved,.badge-s.a-reflected{background:#BFEBD3;color:#0C6A3E}
.dtag{display:inline-block;border-radius:6px;padding:1px 8px;color:#fff;font-weight:700;font-size:13px;line-height:1.5}
.dtag.l{font-size:17px;padding:2px 14px;border-radius:8px}
.dtag.s{font-size:10px;padding:0 5px;margin-left:2px;border-radius:4px}
.deptrow{width:100%;margin:8px 0 2px;padding-left:8px}
#adm .card h2{color:#173B7A}
#adm table.t th{background:#E3EDFB;color:#24477F;border-bottom:2px solid #BFD2F0}
#adm table.t tr:nth-child(even) td{background:#F5F9FF}
#adm .tabs button{background:#fff;border:1px solid #BFD2F0;color:#24477F}
#adm .tabs button.on{background:var(--blue);border-color:var(--blue);color:#fff}
#adm .card{border-color:#CFDDF3;box-shadow:0 1px 3px rgba(40,80,150,.08)}
table.mx2 th{background:#E3EDFB;color:#24477F}
table.mx2 td.v{background:#EAF2FF}
table.mx2 tr.tot td{background:#FFF6E0;font-weight:700}

/* 差し戻しの目立つ表示・スマホのお知らせ */
.retbanner{background:var(--red);color:#fff;border-radius:14px;padding:16px 16px 14px;margin-bottom:12px;box-shadow:0 4px 14px rgba(214,69,69,.35)}
.retbanner .rb1{font-size:20px;font-weight:800;margin-bottom:4px}
.retbanner .rb2{font-size:15px;line-height:1.5;margin-bottom:10px}
.retbanner .btn{background:#fff;color:var(--red);border:0;font-weight:800;width:100%;padding:13px;font-size:16px;border-radius:10px}
.pushcard{background:var(--orange-bg);border-color:#F3D1A6}
.pushcard.on{background:var(--green-bg);border-color:#BFE6D2;padding:10px 14px}

/* 共有端末対策: パスワード欄を「パスワード欄」と認識させない（見た目は●●●） */
.pwmask{-webkit-text-security:disc;text-security:disc}
.pwrow{display:flex;gap:8px;align-items:center}.pwrow input{flex:1}
label.own{display:flex;gap:10px;align-items:flex-start;margin:12px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;cursor:pointer}
label.own input{width:22px;height:22px;margin-top:2px;flex:none}
label.own small{color:var(--sub);font-size:12px;line-height:1.5}