:root{
  --navy:#1c2a44;--navy2:#26385c;--gold:#b8893b;--gold-l:#f4ead7;
  --bg:#f3f4f7;--card:#fff;--tx:#1f2937;--mu:#6b7280;--ln:#e3e6ec;
  --blue:#3b6fd4;--green:#2f9e6a;--gray:#9aa3b2;--amber:#d99a1c;--red:#d2514a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Noto Sans JP',-apple-system,'Hiragino Sans','Yu Gothic',Meiryo,sans-serif;background:var(--bg);color:var(--tx);font-size:14px;line-height:1.6}
button,input,select,textarea{font:inherit;color:inherit}
.shell{display:flex;min-height:100vh}
.side{width:224px;background:var(--navy);color:#fff;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:40}
.brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand b{display:block;font-size:17px;letter-spacing:.08em}
.brand span{font-size:11px;color:#c9b27e;letter-spacing:.12em}
#nav{padding:12px 10px;flex:1}
#nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:#d6dbe7;text-decoration:none;margin-bottom:2px}
#nav a::before{content:"";width:6px;height:6px;border-radius:50%;background:#56688d}
#nav a:hover{background:var(--navy2)}
#nav a.on{background:var(--navy2);color:#fff;font-weight:700}
#nav a.on::before{background:var(--gold)}
.side-foot{padding:14px 18px;font-size:11px;color:#9aa6bf;border-top:1px solid rgba(255,255,255,.1)}
.main{margin-left:224px;flex:1;min-width:0}
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:14px;padding:12px 24px}
.top h1{font-size:18px;margin:0;flex:1}
.top-r{display:flex;align-items:center;gap:16px}
.today{font-size:13px;color:var(--mu)}
.role{font-size:12px;color:var(--mu);display:flex;align-items:center;gap:6px}
.role select{border:1px solid var(--ln);border-radius:6px;padding:5px 8px;background:#fff}
.burger{display:none;border:0;background:none;width:38px;height:38px;padding:8px;cursor:pointer}
.burger i{display:block;height:2px;background:var(--navy);margin:5px 0;border-radius:2px}
.scrim{display:none}
#view{padding:22px 24px 60px}
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--ln);border-radius:12px;padding:14px 16px}
.kpi small{color:var(--mu);font-size:12px}
.kpi b{display:block;font-size:26px;line-height:1.3;color:var(--navy)}
.kpi em{font-style:normal;font-size:12px;color:var(--mu)}
.cols2{grid-template-columns:1fr 1fr}
.cols3{grid-template-columns:2fr 1fr}
.card{background:var(--card);border:1px solid var(--ln);border-radius:12px;padding:16px 18px;min-width:0}
.card h2{font-size:15px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.card h2 small{font-weight:400;color:var(--mu);font-size:12px}
.btn{border:1px solid var(--ln);background:#fff;border-radius:8px;padding:7px 14px;cursor:pointer;font-size:13px}
.btn:hover{border-color:var(--navy)}
.btn.pri{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.pri:hover{background:var(--navy2)}
.btn.gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn.sm{padding:3px 10px;font-size:12px}
.btn.danger{color:var(--red);border-color:#efc4c1}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;color:var(--mu);text-align:left;font-weight:500;padding:8px 10px;border-bottom:1px solid var(--ln);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid #eef0f4;vertical-align:middle}
.tbl tr.clk{cursor:pointer}
.tbl tr.clk:hover td{background:#f8f9fc}
.tbl td.r,.tbl th.r{text-align:right}
.scroll{overflow-x:auto}
.chip{display:inline-block;font-size:11px;padding:1px 9px;border-radius:99px;border:1px solid transparent;white-space:nowrap;font-weight:500}
.c-tentative{background:#fdf1d6;color:#8a6410;border-color:#f0d78e}
.c-confirmed{background:#e3ecfb;color:#274f9c}
.c-in{background:#dff3e8;color:#1f7a50}
.c-out{background:#eceef2;color:#59627a}
.c-cancelled{background:#fbe5e3;color:#a63a34}
.c-clean{background:#dff3e8;color:#1f7a50}
.c-dirty{background:#fbe5e3;color:#a63a34}
.c-cleaning{background:#fdf1d6;color:#8a6410}
.c-ooo{background:#eceef2;color:#59627a}
.c-occupied{background:#e3ecfb;color:#274f9c}
.c-gold{background:var(--gold-l);color:#8a6410;border-color:#e4cf9f}
.c-silver{background:#eef0f4;color:#4b5468;border-color:#d3d8e2}
.c-reg{background:#f5f6f8;color:#6b7280;border-color:#e3e6ec}
.row-list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eef0f4}
.li:last-child{border:0}
.li .n{flex:1;min-width:0}
.li .n b{display:block}
.li .n span{font-size:12px;color:var(--mu)}
.bars{display:flex;align-items:flex-end;gap:10px;height:130px;padding-top:6px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.bars .b i{display:block;width:100%;max-width:36px;background:var(--navy);border-radius:5px 5px 0 0;min-height:2px}
.bars .b.t i{background:var(--gold)}
.bars .b span{font-size:11px;color:var(--mu)}
.bars .b em{font-style:normal;font-size:11px;font-weight:700}
.hbar{display:grid;grid-template-columns:130px 1fr 96px;gap:10px;align-items:center;margin:7px 0;font-size:13px}
.hbar .tr{height:10px;background:#eef0f4;border-radius:5px;overflow:hidden}
.hbar .tr i{display:block;height:100%;background:var(--navy);border-radius:5px}
.hbar b{text-align:right;font-weight:500}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.tools .sp{flex:1}
.in{border:1px solid var(--ln);border-radius:8px;padding:7px 10px;background:#fff;min-width:0}
.in:focus{outline:2px solid #c9d4ee;border-color:var(--blue)}
/* chart */
.chart{--cw:58px;--nw:112px;min-width:calc(var(--nw) + var(--cw)*16)}
.ch-h,.ch-r,.ch-o{display:flex}
.ch-n{width:var(--nw);flex:none;position:sticky;left:0;background:#fff;z-index:3;padding:0 10px;display:flex;align-items:center;gap:6px;font-size:12px;border-right:1px solid var(--ln);border-bottom:1px solid #eef0f4;height:38px}
.ch-n b{font-size:13px}.ch-n span{color:var(--mu);font-size:11px}
.ch-h .ch-n,.ch-o .ch-n{height:44px;color:var(--mu);font-size:11px}
.ch-d{width:var(--cw);flex:none;text-align:center;font-size:11px;border-bottom:1px solid var(--ln);height:44px;padding-top:4px;color:var(--mu);line-height:1.3}
.ch-d b{display:block;font-size:14px;color:var(--tx)}
.ch-d.sat b,.ch-d.sat{color:#2e6ac7}.ch-d.sun b,.ch-d.sun{color:var(--red)}
.ch-d.td{background:var(--gold-l)}
.ch-o .ch-d{height:34px;border-bottom:1px solid var(--ln);padding-top:6px}
.ch-c{position:relative;display:flex;border-bottom:1px solid #eef0f4;height:38px}
.ch-c .c{width:var(--cw);flex:none;border-right:1px solid #f1f2f6;cursor:pointer}
.ch-c .c:hover{background:#eef3fd}
.ch-c .c.td{background:#fcf8ef}
.bar{position:absolute;top:5px;height:28px;border-radius:6px;color:#fff;font-size:11px;padding:0 7px;line-height:28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;z-index:2;border:0;text-align:left}
.bar.s-confirmed{background:var(--blue)}
.bar.s-tentative{background:repeating-linear-gradient(45deg,#e6b44a,#e6b44a 6px,#efc566 6px,#efc566 12px);color:#4a3606}
.bar.s-in{background:var(--green)}
.bar.s-out{background:var(--gray)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mu);margin-bottom:10px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* rooms */
.floor{margin-bottom:18px}
.floor h3{font-size:13px;color:var(--mu);margin:0 0 8px;font-weight:500}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rm{background:#fff;border:1px solid var(--ln);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.rm b{font-size:17px}
.rm small{color:var(--mu);font-size:11px}
.rm select{border:1px solid var(--ln);border-radius:6px;padding:3px 6px;font-size:12px;background:#fff}
.rm .gst{font-size:12px;min-height:18px;color:var(--mu)}
/* modal */
.modal-wrap{position:fixed;inset:0;background:rgba(18,26,43,.55);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:4vh 14px;overflow:auto}
.modal-wrap[hidden]{display:none}
.modal{background:#fff;border-radius:14px;width:min(640px,100%);padding:22px 24px 24px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .x{position:absolute;right:12px;top:10px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--mu)}
.modal h2{margin:0 0 12px;font-size:17px;padding-right:30px}
.fl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fl .f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mu)}
.fl .f.w{grid-column:1/-1}
.fl .f .in{color:var(--tx);font-size:14px}
.dl{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:0 0 12px}
.dl dt{color:var(--mu);font-size:12px;padding-top:2px}.dl dd{margin:0}
.bill{width:100%;border-collapse:collapse;margin:8px 0}
.bill td{padding:6px 2px;border-bottom:1px dashed var(--ln)}
.bill td:last-child{text-align:right}
.bill tr.t td{font-weight:700;font-size:16px;border-bottom:2px solid var(--navy);padding-top:10px}
.act-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;justify-content:flex-end}
.note{font-size:12px;color:var(--mu);background:#f7f8fb;border-radius:8px;padding:8px 12px;margin:10px 0}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 20px;border-radius:99px;z-index:90;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast[hidden]{display:none}
.ok{color:var(--green);font-weight:700}.ng{color:#c3c8d3}
.empty{color:var(--mu);padding:14px 0;text-align:center}
.recpt{border:1px solid var(--ln);border-radius:10px;padding:16px 18px;background:#fffdf8}
.recpt h3{margin:0 0 4px;text-align:center;letter-spacing:.3em}
@media (max-width:980px){
  .cols2,.cols3{grid-template-columns:1fr}
}
@media (max-width:900px){
  .side{transform:translateX(-100%);transition:transform .25s;will-change:transform;background:#1c2a44}
  .side.open{transform:none;box-shadow:8px 0 30px rgba(0,0,0,.35)}
  .scrim.on{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30}
  .main{margin-left:0}
  .burger{display:block}
  .top{padding:8px 14px;gap:8px}
  .top h1{font-size:16px}
  .today{display:none}
  .role{font-size:0}.role select{font-size:12px;max-width:128px}
  #view{padding:16px 14px 60px}
  .hbar{grid-template-columns:96px 1fr 80px}
  .fl{grid-template-columns:1fr}
  .dl{grid-template-columns:90px 1fr}
  .modal{padding:18px 16px 20px}
}
@media print{
  .side,.top,.act-row,.modal .x{display:none!important}
  .modal-wrap{position:static;background:none;padding:0}.modal{box-shadow:none;width:100%}
  body *{visibility:hidden}.recpt,.recpt *{visibility:visible}.recpt{position:absolute;left:0;top:0;width:100%}
}