/* シフト表 — デファクトのブランドカラーで組む。
   ネイビーで締め、シアンを操作の色、オレンジを休みの色に使う。 */

:root{
  color-scheme:light;
  --navy:#0D1B26; --cyan:#00A0C2; --orange:#EA801F;
  --paper:#FFFFFF; --ground:#EEF1F4;
  --ink:#0D1B26; --ink-2:#4A5964; --ink-3:#8A96A0;
  --rule:#DCE1E6; --tint:#F4F7F9;
  --rest:#E9EDF0; --sat:#F1F6FA; --sun:#FBF1EC;
  --ok:#1E8E5A; --stop:#C0392B;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.app{max-width:460px;margin:0 auto;min-height:100%;position:relative;
  display:flex;flex-direction:column;background:var(--paper);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.view{display:none;flex-direction:column;flex:1}
.view.on{display:flex}
.body{flex:1;padding:14px 12px 80px}
.empty{color:var(--ink-3);font-size:13px;text-align:center;padding:44px 8px}
[hidden]{display:none !important}

/* ---------- 名前を選ぶ ---------- */
.pick{flex:1;display:flex;flex-direction:column;justify-content:center;padding:34px 22px}
.brand{font-weight:900;font-size:23px;border-bottom:3px solid var(--navy);padding-bottom:9px}
.brand small{display:block;font-weight:700;font-size:10px;letter-spacing:.22em;
  color:var(--cyan);margin-bottom:4px}
.pick p{color:var(--ink-3);font-size:12.5px;margin:12px 0 14px}
.names{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.names button{appearance:none;cursor:pointer;text-align:left;display:flex;align-items:center;gap:11px;
  background:transparent;border:0;border-bottom:1px solid var(--rule);padding:15px 2px;
  font-weight:700;font-size:17px}
.names button:hover{background:var(--tint)}
.names .arw{margin-left:auto;color:var(--cyan);font-size:13px}

/* ---------- 見出し帯 ---------- */
.bar{background:var(--navy);color:#fff;padding:11px 12px;flex:none;
  display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:5}
.who{display:flex;align-items:baseline;gap:5px;min-width:0}
.who b{font-weight:700;font-size:16px;white-space:nowrap}
.who span{font-size:11px;color:#9FB0BC}
.ghost{appearance:none;background:transparent;border:1px solid rgba(255,255,255,.35);
  color:#fff;border-radius:4px;padding:5px 9px;font-size:12px;cursor:pointer;flex:none}
.ghost:hover{background:rgba(255,255,255,.12)}
#share{margin-left:auto}
.ghost.dark{border-color:var(--rule);color:var(--ink-2);margin-top:22px}
.ghost.dark:hover{background:var(--tint)}

.mode{display:none;margin:0;padding:8px 12px;background:#FDF3E8;color:#8A5111;
  font-size:11.5px;border-bottom:1px solid #F0DCC2}
body.editing .mode{display:block}

/* ---------- 月表 ---------- */
.sheet{border:1px solid var(--rule)}
.stamp{margin:0;padding:6px 8px;background:var(--tint);border-bottom:1px solid var(--rule);
  font-size:11px;color:var(--ink-3)}
.stamp.saved{background:#EAF7F0;color:var(--ok);font-weight:700}
.sheet-head{display:none}
.grid{width:100%;border-collapse:collapse;table-layout:fixed}
.grid th,.grid td{border:1px solid var(--rule);padding:0;text-align:center;
  font-weight:400;font-size:12px}
.grid thead th{background:var(--navy);color:#fff;font-weight:700;font-size:11px;
  height:52px;vertical-align:middle;position:sticky;top:41px;z-index:3}
.grid thead .p span{writing-mode:vertical-rl;letter-spacing:.02em;display:inline-block}
.grid thead .p.mine{background:var(--cyan)}
.grid .d{width:52px;background:var(--tint);color:var(--ink-2);
  padding:3px 2px;line-height:1.25;text-align:left}
.grid thead .d,.grid thead .n{background:var(--navy)}
.grid .d b{font-size:14px;font-weight:700;margin-right:2px}
.grid .d i{font-style:normal;font-size:11px}
.grid .d em{display:block;font-style:normal;font-size:9px;color:var(--orange);
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid .n{width:26px;color:var(--ink-3);font-size:11px}
.grid tbody tr{height:30px}
.grid td.c{font-size:11px;font-weight:700;color:var(--ink-3)}
.grid td.c.mine{background:#F0FAFC}
.grid td.c.off{background:#FBEFE2;color:var(--orange)}
.grid tr.sat .d{background:var(--sat);color:#2A6FA8}
.grid tr.rest .d{background:var(--sun);color:var(--stop)}
.grid tr.rest td.c{background:var(--rest)}
.grid tr.today .d{box-shadow:inset 3px 0 0 var(--cyan)}
.grid tr.today .d b{color:var(--cyan)}
body.editing .grid td.c,body.editing .grid tbody .d{cursor:pointer}
body.editing .grid tr.rest td.c{cursor:default}
body.editing .grid tr:not(.rest) td.c:hover{outline:2px solid var(--cyan);outline-offset:-2px}

.legend{margin:10px 2px 0;color:var(--ink-3);font-size:11px;display:flex;
  align-items:center;gap:5px;flex-wrap:wrap}
.legend i{font-style:normal;display:inline-block;min-width:20px;text-align:center;
  border:1px solid var(--rule);font-size:10px;font-weight:700;margin-left:8px}
.legend i:first-child{margin-left:0}
.legend .s-off{background:#FBEFE2;color:var(--orange)}
.legend .s-rest{background:var(--rest)}

/* ---------- 自分の予定 ---------- */
.next{border:1px solid var(--rule);border-top:3px solid var(--cyan);padding:16px;margin-bottom:18px}
.next small{display:block;color:var(--ink-3);font-size:11.5px;letter-spacing:.06em}
.next b{display:block;font-size:26px;font-weight:900;line-height:1.3;margin-top:4px}
.next span{color:var(--ink-2);font-size:13px}
h3{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.08em;
  border-bottom:1px solid var(--rule);padding-bottom:6px;margin:22px 0 10px}
.days{list-style:none;margin:0;padding:0}
.days li{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--rule);
  padding:9px 2px;font-size:14px}
.days li b{font-weight:700;min-width:76px}
.days li span{color:var(--ink-3);font-size:12px;margin-left:auto}
.days li.rest{color:var(--ink-3)}

/* ---------- フォーム ---------- */
.form label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:0 0 14px}
.form label.check{display:flex;align-items:center;gap:7px}
.form label.check input{width:auto;margin:0}
.form .req{color:var(--stop);font-weight:700;font-size:10.5px;margin-left:4px}
.form input{display:block;width:100%;margin-top:5px;
  background:var(--paper);border:1px solid var(--rule);border-radius:5px;
  padding:10px 11px;font-weight:400;color:var(--ink)}
.form input:focus{border-color:var(--cyan);outline:none}
.err{min-height:22px;color:var(--stop);font-size:12.5px;margin:2px 0 8px}
.ok{background:var(--tint);border-left:3px solid var(--ok);padding:10px 12px;
  font-size:12.5px;color:var(--ink-2);margin:0}
.go{display:block;width:100%;appearance:none;cursor:pointer;border:0;border-radius:5px;
  background:var(--cyan);color:#fff;font-weight:700;font-size:15px;padding:12px 0}
.go:hover{filter:brightness(1.06)}
.go:disabled{opacity:.5;cursor:default}
.roster{list-style:none;margin:0;padding:0}
.roster li{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--rule);
  padding:8px 2px;font-size:13.5px;cursor:pointer}
.roster li:hover{background:var(--tint)}
.roster li code{color:var(--ink-3);font-size:11.5px;margin-left:auto}

/* ---------- 下のタブ ---------- */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:460px;
  display:flex;background:var(--paper);border-top:1px solid var(--rule);z-index:6}
.tab{flex:1;appearance:none;background:none;border:0;border-top:3px solid transparent;
  padding:11px 0 13px;font-size:12.5px;font-weight:700;color:var(--ink-3);cursor:pointer}
.tab.on{color:var(--navy);border-top-color:var(--cyan)}

/* ---------- 印刷(A4横) ---------- */
@media print{
  @page{size:A4 landscape;margin:10mm}
  body{background:#fff;font-size:11px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .app{max-width:none;border:0}
  .bar,.tabs,.mode,.legend,.err{display:none !important}
  .view{display:none !important}
  .view#v-month{display:block !important}
  .body{padding:0}
  .sheet{border:0}
  .sheet-head{display:block;margin-bottom:3mm}
  .stamp{background:#fff;border:0;padding:0 0 2mm;font-size:9px}
  .stamp.saved{color:var(--ink-3);font-weight:400}
  .sheet-head h1{font-size:18px;font-weight:900;margin:0;
    border-bottom:2px solid var(--navy);padding-bottom:4px}
  .sheet-head p{margin:4px 0 0;font-size:10px;color:var(--ink-2)}
  .grid thead th{position:static;background:#fff;color:var(--ink);
    border:1px solid #999;height:auto;padding:4px 0}
  .grid thead .p span{writing-mode:horizontal-tb}
  .grid thead .p.mine{background:#fff}
  .grid th,.grid td{border:1px solid #999;font-size:10px}
  .grid .d{width:64px;background:#fff}
  .grid tbody tr{height:auto}
  .grid td.c{padding:2px 0}
  .grid td.c.mine{background:#fff}
  .grid tr.today .d{box-shadow:none}
  .grid tr.today .d b{color:var(--ink)}
  .grid tr.rest td.c{background:#EEE}
  .grid .n{color:var(--ink-2)}
}