/* =========================================================
   レストラン シフト管理（制作例）
   温かみのある飲食店向けUI：テラコッタ × クリーム × 深緑
   ========================================================= */
:root{
  --paper:#FBF7F0;
  --paper-2:#F3EADD;
  --line:#E6DACA;
  --ink:#2A2320;
  --ink-soft:#6B5F57;
  --ink-faint:#9A8C82;
  --brand:#B4573A;          /* テラコッタ */
  --brand-deep:#8E402A;
  --brand-tint:#F7E6DF;
  --accent:#2F6B54;         /* 深緑（確定・OK） */
  --accent-tint:#E4F0EA;
  --warn:#C9A227;
  --warn-tint:#FBF2D8;
  --ng:#B23B3B;
  --ng-tint:#FBE7E7;
  --radius:14px;
  --shadow-sm:0 2px 8px rgba(42,35,32,.06);
  --shadow:0 12px 32px -16px rgba(42,35,32,.35);
  --f:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--paper);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.4;font-weight:700}
button{font-family:inherit;cursor:pointer}
table{border-collapse:collapse}

/* ---- header ---- */
.hd{position:sticky;top:0;z-index:30;background:rgba(251,247,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd__in{max-width:1200px;margin:0 auto;padding:0 18px;height:58px;display:flex;align-items:center;gap:14px}
.hd__logo{font-weight:700;letter-spacing:.02em;color:var(--brand-deep);display:flex;align-items:center;gap:8px}
.hd__logo svg{width:22px;height:22px}
.hd__nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.hd__nav a{padding:8px 14px;border-radius:999px;text-decoration:none;font-size:.92rem;color:var(--ink-soft)}
.hd__nav a.on{background:var(--brand);color:#fff;font-weight:700}
.hd__user{font-size:.86rem;color:var(--ink-faint);margin-left:6px;white-space:nowrap}

.wrap{max-width:1200px;margin:0 auto;padding:22px 18px 60px}
.demo-bar{background:var(--warn-tint);border-bottom:1px solid #EBD9A6;color:#6B5518;font-size:.82rem;text-align:center;padding:6px 12px}

/* ---- card ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px}
.card + .card{margin-top:16px}
.card__t{font-size:1.05rem;margin-bottom:4px}
.card__d{color:var(--ink-soft);font-size:.88rem;margin:0 0 14px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:999px;padding:10px 18px;font-size:.92rem;font-weight:700;transition:.15s}
.btn--p{background:var(--brand);color:#fff}
.btn--p:hover{background:var(--brand-deep)}
.btn--g{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--g:hover{border-color:var(--brand);color:var(--brand-deep)}
.btn--a{background:var(--accent);color:#fff}
.btn--sm{padding:6px 12px;font-size:.84rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- grid: 希望入力 ---- */
.pref-tbl{width:100%;font-size:.86rem}
.pref-tbl th,.pref-tbl td{border:1px solid var(--line);padding:0;text-align:center}
.pref-tbl thead th{background:var(--paper-2);padding:8px 6px;font-weight:700;position:sticky;top:58px;z-index:5}
.pref-tbl td.dayname{background:var(--paper-2);padding:10px 8px;text-align:left;white-space:nowrap;font-weight:700}
.pref-tbl td.sat{color:#2E6FA8}.pref-tbl td.sun{color:#B23B3B}
.cell{width:100%;border:0;background:transparent;padding:14px 4px;font-size:.84rem;font-weight:700;color:var(--ink-faint)}
.cell[data-p="ok"]{background:var(--accent-tint);color:#245C46}
.cell[data-p="want"]{background:var(--brand-tint);color:var(--brand-deep)}
.cell[data-p="ng"]{background:var(--ng-tint);color:var(--ng)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-soft);margin-top:10px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:5px;vertical-align:-2px}

/* ---- grid: シフト表 ---- */
.shift-tbl{width:100%;font-size:.84rem;table-layout:fixed}
.shift-tbl th,.shift-tbl td{border:1px solid var(--line);padding:8px;vertical-align:top}
.shift-tbl thead th{background:var(--paper-2);text-align:center;font-weight:700}
.shift-tbl .slotname{background:var(--paper-2);font-weight:700;width:110px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-tint);color:#245C46;border-radius:999px;padding:3px 10px;font-size:.8rem;margin:2px 3px 2px 0;white-space:nowrap}
.chip--k{background:var(--brand-tint);color:var(--brand-deep)}
.chip button{border:0;background:transparent;color:inherit;font-size:.9rem;line-height:1;padding:0 0 0 2px;opacity:.55}
.chip button:hover{opacity:1}
.short{display:block;color:var(--ng);font-size:.78rem;font-weight:700;margin-top:4px}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat b{display:block;font-size:1.5rem;line-height:1.2}
.stat span{color:var(--ink-faint);font-size:.8rem}
.tbl{width:100%;font-size:.86rem}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
.tbl th{background:var(--paper-2);font-weight:700}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:6px;background:var(--paper-2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.bar i.over{background:var(--ng)}

/* ---- login ---- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login__box{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:34px;width:100%;max-width:420px}
.login__box h1{font-size:1.3rem;margin-bottom:6px}
.login__box p{color:var(--ink-soft);font-size:.88rem;margin:0 0 20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:5px}
.field input,select{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:var(--paper)}
.field input:focus,select:focus{outline:none;border-color:var(--brand);background:#fff}
.quick{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.quick p{font-size:.8rem;color:var(--ink-faint);margin:0 0 10px}
.msg{font-size:.85rem;padding:9px 12px;border-radius:9px;margin-bottom:12px;display:none}
.msg.err{display:block;background:var(--ng-tint);color:var(--ng)}
.msg.ok{display:block;background:var(--accent-tint);color:#245C46}

.scroll{overflow-x:auto}
.muted{color:var(--ink-faint);font-size:.82rem}
@media(max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .hd__nav a{padding:7px 10px;font-size:.86rem}
  .hd__user{display:none}
}
@media print{
  .hd,.demo-bar,.row,.btn{display:none!important}
  body{background:#fff}
  .card{border:0;box-shadow:none;padding:0}
}