/* =========================================================================
   希望の月間一覧 (month_wishes.php)
   縦にメンバー / 横に日。 横は必ずはみ出すので 表だけを横スクロールさせ、
   氏名の列は左に貼り付けて 誰の行か見失わないようにする。
   ========================================================================= */
/* 見出しは **折り返さず1行**。 表に使える高さを増やすため 上下の余白も詰める。
   狭い画面では 店舗名などの補足 (.mw-meta) を消して 1行を保つ。 */
.mw-head { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; padding:8px 12px; }
/* 入りきらないときは 見出しの方を縮める (ボタンは押せる大きさを保つ)。
   最後の手段として … で切る。 折り返して2行になるより 切れている方がまし */
.mw-head h2 { margin:0; font-size:0.95rem; white-space:nowrap;
              flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mw-head .mw-nav, .mw-head .mw-back { flex:0 0 auto; white-space:nowrap; }
/* 補足は余った幅だけ使う。 入りきらなければ … で切る (改行して2行にしない) */
.mw-meta { margin:0; flex:1 1 auto; min-width:0; font-size:0.78rem;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 補足が消えても 戻るボタンは右端に置く */
.mw-head .mw-back { margin-left:auto; }
/* ◀ ▶ は 環境によって幅も高さも揃わないので、 少し小さくして 位置を合わせる */
.mw-arrow { font-size:0.78em; line-height:1; vertical-align:1px; }

.mw-legend { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
             padding:10px 14px; font-size:0.8rem; color:#555; }
.mw-k { display:inline-grid; place-items:center; min-width:26px; height:22px; padding:0 5px;
        border-radius:5px; font-size:0.75rem; font-weight:600; margin-left:10px; }
.mw-legend .mw-k:first-child { margin-left:0; }

/* セルの色 (凡例と表で同じものを使う) */
.is-free      { background:#e6f4ea; color:#1b7a3d; }
.is-time      { background:#e6f0fa; color:#1e5b96; }
.is-off       { background:#fdecea; color:#c5221f; }
.is-undecided { background:#fff4e0; color:#a86400; }
.is-none      { background:#f4f4f6; color:#bbb; border:1px dashed #ddd; }

.mw-wrap { padding:8px 10px; }
/* マウスでは つかんで左右に動かせる (js は month_wishes.php)。
   指のときは もともとの横スクロールに任せるので touch-action は触らない。

   縦も **この箱の中**でスクロールさせる。 そうしないと
   thead の sticky が 箱の上端にしか効かず、 ページを下げると日付の行が消えてしまう。
   高さは JS が画面の残りに合わせて入れる (--mw-h)。 */
.mw-scroll { overflow:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
             cursor:grab; max-height:var(--mw-h, 60vh); }
.mw-scroll.is-grabbing { cursor:grabbing; user-select:none; }
.mw-scroll.is-grabbing * { cursor:grabbing; }
.mw-table { border-collapse:separate; border-spacing:0; font-size:0.78rem; }

/* 罫線の色。 表が細かいので はっきり見える濃さにする
   (薄いと どの行のどの日か 目で追えない) */
.mw-table { --mw-line:#c8c8d0; --mw-line-week:#9aa0aa; }

/* 氏名の列を左に固定する */
.mw-table th.mw-name {
  position:sticky; left:0; z-index:2; background:#fff;
  text-align:left; font-weight:600; white-space:nowrap;
  min-width:9.5em; max-width:12em; padding:5px 9px;
  border-bottom:1px solid var(--mw-line); border-right:2px solid var(--mw-line-week);
}
/* 縦にスクロールすると 日付の行と氏名の列が重なる。 日付の行を上に置く */
.mw-table thead th.mw-name { z-index:5; }

.mw-table thead th { position:sticky; top:0; z-index:4; background:#fafafb;
                     border-bottom:2px solid var(--mw-line-week);
                     border-right:1px solid var(--mw-line); padding:4px 0; }
.mw-table th.mw-d { min-width:2.4em; font-size:0.7rem; color:#666; font-weight:600; }
.mw-table th.mw-d span { display:block; font-size:0.8rem; color:#333; }
.mw-table th.mw-d small { display:block; font-size:0.62rem; font-weight:400; }
.mw-table th.mw-d.is-sun, .mw-table td.is-sun { background:#fff5f5; }
.mw-table th.mw-d.is-sat, .mw-table td.is-sat { background:#f3f8ff; }

.mw-table td.mw-c {
  min-width:2.4em; height:2.6em; text-align:center; vertical-align:middle;
  border-bottom:1px solid var(--mw-line);
  border-right:1px solid var(--mw-line);
  font-size:0.66rem; line-height:1.25;
  padding:2px 1px; white-space:nowrap;
}
/* 未提出のセルも 枠は同じにする (ここだけ枠が消えると 列がずれて見える) */
.mw-table td.mw-c.is-none {
  background:#fafafb;
  border-bottom:1px solid var(--mw-line); border-right:1px solid var(--mw-line);
}
/* 週の切れ目。 **土曜の右**に濃い線を入れる = 日〜土 でひと区切りになる。
   祝日は背景色 (is-sun) だけで、 線は付けない (毎年変わるので 週の区切りにならない)。

   「日曜の左」に border-left で入れてはいけない。 この表は border-collapse:separate
   なので 罫線が重ならず、 土曜の right 1px と 日曜の left 2px が足されて
   3px の線になってしまう。 土曜の right を 2px に置き換えるのが正しい。 */
.mw-table th.mw-d.is-weekend, .mw-table td.mw-c.is-weekend { border-right:2px solid var(--mw-line-week); }

.mw-table tr.is-me th.mw-name, .mw-table tr.is-me td { background:#fffdf3; }
.mw-table tr.is-me th.mw-name { box-shadow:inset 3px 0 0 #ed8a2a; }


@media (max-width:700px) {
  .mw-table th.mw-name { min-width:7em; max-width:8em; font-size:0.72rem; }
}
/* ここから下は 1行に収まらなくなる幅。 補足を消し、 文字と余白を詰めて 1行を守る */
@media (max-width:640px) {
  .mw-meta { display:none; }
  .mw-head { gap:6px; padding:7px 9px; }
  .mw-head h2 { font-size:0.88rem; }
  .mw-head .btn { padding:4px 8px; font-size:0.78rem; }
  .mw-legend { padding:7px 9px; }
}
@media (max-width:430px) {
  .mw-head { gap:4px; padding:6px 7px; }
  .mw-head h2 { font-size:0.8rem; }
  .mw-head .btn { padding:4px 6px; font-size:0.73rem; }
  .mw-year { display:none; }   /* 「9月 の希望」 で十分わかる */
}