/* ============================================================
   勤怠・シフト管理：スタッフ用アプリの画面（作り物）と、ホームでの見せ方。

   2026-09-12 に shift.html / shift.en.html のページ内 <style> から
   ここへ移した。ホーム（index.html / index.en.html）の #staff でも
   同じ画面を出すことになり、4ファイルが同じ規則をそれぞれ持つと、
   片方だけ直る事故が起きるため。
   読み込んでいるのは shift.html / shift.en.html / index.html /
   index.en.html の4ページ。

   実機はスタッフのスマホで開く縦画面なので、共有の .phone（app.css）に
   中身を流し込んでいる。

   ⚠️ .sh-scr は文字色と --muted を自前で持つこと。ホームの #staff は
      白地（.lw）で、ページ側の文字色・--muted が濃い色になる。画面の
      中の色をページの配色に頼ると、暗い画面の上で文字が読めなくなる。
   ⚠️ 画面は作り物。実機のスクリーンショットに差し替えないこと
      （配信元のURLと、実在するスタッフの名前が写る）。
   ============================================================ */
.sh-scr{
  height:100%;border-radius:1.75rem;padding:1.15rem 1rem;
  background:#0a0908;border:1px solid rgba(205,205,212,.16);
  display:flex;flex-direction:column;overflow:hidden;
  color:#F2F2F3;--muted:#8E8E96;text-align:left;
}
.sh-top{display:flex;justify-content:space-between;align-items:center;
  font-size:.52rem;letter-spacing:.14em;color:var(--muted);
  padding-bottom:.7rem;margin-bottom:.9rem;border-bottom:1px solid rgba(205,205,212,.12)}
.sh-h{font-family:Archivo,system-ui,sans-serif;font-weight:700;
  font-size:1.35rem;line-height:1.1;letter-spacing:-.01em;margin:0;color:#F2F2F3}
.sh-sub{font-size:.62rem;color:var(--muted);margin:.25rem 0 0}
.sh-who{font-size:.55rem;letter-spacing:.16em;color:var(--muted);margin:.5rem 0 0}
/* 名前のグリッド。実名を入れないこと（上の ⚠️ 参照）。 */
.sh-names{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.9rem}
.sh-name{border:1px solid rgba(205,205,212,.16);border-radius:.6rem;
  padding:.5rem .55rem;font-size:.6rem;letter-spacing:.06em;display:flex;gap:.35rem;align-items:baseline}
.sh-name i{font-style:normal;font-size:.48rem;color:var(--muted)}
.sh-mood{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.9rem}
.sh-m{border:1px solid rgba(205,205,212,.16);border-radius:.7rem;
  padding:.7rem .4rem;text-align:center}
.sh-m.on{background:#fff;border-color:#fff;color:#0a0908}
.sh-m b{display:block;font-size:.62rem;letter-spacing:.1em;font-weight:600}
.sh-m span{display:block;font-size:.52rem;opacity:.6;margin-top:.15rem}
.sh-m-wide{grid-column:1/-1;display:flex;gap:.5rem;align-items:center;justify-content:center;
  border:1px solid rgba(205,205,212,.16);border-radius:.7rem;padding:.55rem;font-size:.6rem}
.sh-note{margin-top:.45rem;border:1px solid rgba(205,205,212,.14);border-radius:.6rem;
  padding:.6rem;font-size:.55rem;color:var(--muted)}
.sh-btn{margin-top:auto;background:#fff;color:#0a0908;border-radius:2rem;
  padding:.6rem;text-align:center;font-size:.62rem;font-weight:600;letter-spacing:.08em}
.sh-legend{display:flex;gap:.6rem;justify-content:center;margin:.8rem 0 .1rem;font-size:.5rem;color:var(--muted)}
.sh-legend i{display:inline-block;width:.45rem;height:.45rem;margin-right:.2rem;border-radius:.1rem;vertical-align:middle}
.sh-cal{border:1px solid rgba(205,205,212,.14);border-radius:.9rem;padding:.7rem .6rem;margin-top:.5rem}
.sh-cal-h{text-align:center;font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:.78rem;margin:0}
.sh-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.22rem;margin-top:.5rem}
.sh-grid span{aspect-ratio:1;display:grid;place-items:center;font-size:.5rem;
  border:1px solid rgba(205,205,212,.1);border-radius:.28rem;color:var(--muted)}
.sh-grid span.ok{background:#2ecc71;border-color:#2ecc71;color:#06210f;font-weight:600}
.sh-grid span.sent{background:#fff;border-color:#fff;color:#0a0908;font-weight:600}
.sh-big{border:1px solid rgba(205,205,212,.14);border-radius:.9rem;padding:.9rem;text-align:center;margin-top:.8rem}
.sh-big b{display:block;font-family:Archivo,system-ui,sans-serif;font-size:1.8rem;line-height:1;margin-top:.25rem}
.sh-row{display:flex;justify-content:space-between;font-size:.58rem;padding:.45rem 0;
  border-bottom:1px solid rgba(205,205,212,.1)}
.sh-row b{font-weight:600}
.sh-fine{font-size:.5rem;color:var(--muted);text-align:center;margin:.7rem 0 0;line-height:1.5}
.sh-tabs{display:flex;justify-content:space-between;margin-top:.8rem;padding-top:.6rem;
  border-top:1px solid rgba(205,205,212,.12);font-size:.44rem;letter-spacing:.06em;color:var(--muted)}
.sh-tabs b{color:#fff;font-weight:600}

/* ============================================================
   ホームの #staff（2026-09-12）。
   見出しは棚（#system）と同じ .store-head--stack の型を使い、
   ここでは本文・要点・ボタン・スマホ2台の並びだけを持つ。
   ⚠️ スマホの幅は 280px 前後から小さくしないこと。画面の中の文字は
      rem 固定なので、枠だけ縮めると中身が下で切れる。狭い幅では
      2台目を隠して1台にする（下の max-width:640px）。
   ============================================================ */
.staff-show{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  margin-top:clamp(2.5rem,5vh,3.5rem);
}
.staff-n{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;
  font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;color:var(--text);margin:0 0 1rem;line-height:1.3}
.staff-live{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;
  letter-spacing:.08em;font-weight:500;color:#2E7D4F}
.staff-live i{width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.staff-lead{font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.85;color:var(--text);
  margin:0;max-width:34em;line-break:strict}
.staff-pts{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:0;max-width:36em}
.staff-pts li{display:grid;grid-template-columns:9em minmax(0,1fr);gap:1rem;
  padding:1rem 0;border-top:1px solid var(--hairline)}
.staff-pts li:last-child{border-bottom:1px solid var(--hairline)}
.staff-pts b{font-weight:600;color:var(--text)}
.staff-pts span{color:var(--muted);line-height:1.7;line-break:strict}
.staff-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.staff-note{font-size:.84rem;color:var(--faint);margin:1rem 0 0}
/* ⚠️ align-items:flex-start を外さないこと。既定の stretch だと、下にずらした
   2台目（margin-top）のぶんだけ1台目の枠が縦に伸びる（2026-09-12 に 64px 伸びていた）。 */
.staff-phones{display:flex;justify-content:center;align-items:flex-start;gap:1.3rem;margin:0}
.staff-phones .phone{width:280px;margin:0;flex:none}
.staff-phones .phone + .phone{margin-top:4rem}
@media(max-width:1024px){
  .staff-show{grid-template-columns:1fr}
  .staff-phones{justify-content:flex-start}
}
@media(max-width:640px){
  .staff-phones{justify-content:center}
  .staff-phones .phone{width:min(280px,72vw)}
  .staff-phones .phone + .phone{display:none}
  .staff-pts li{grid-template-columns:1fr;gap:.25rem}
}

/* ============================================================
   ホームの料金：スタッフ側の1枚（2026-09-12）。
   ⚠️ .price-grid の中に入れないこと（積み上げの4段目に見える）。
      グリッドの外に全幅で置き、横長の1枚にしている。
   ============================================================ */
.price.staff-price{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:1.2rem 3rem;align-items:center;margin-top:1rem;
}
.staff-price h3{margin:.2rem 0 .5rem}
.staff-price .alt{margin:0;max-width:40em;line-break:strict}
.staff-price-r{display:flex;flex-direction:column;align-items:flex-end;gap:.9rem}
.staff-price .amt{white-space:nowrap;margin:0}
.staff-price-act{display:flex;align-items:center;gap:1.2rem}
@media(max-width:760px){
  .price.staff-price{grid-template-columns:1fr}
  .staff-price-r{align-items:flex-start}
  .staff-price-act{flex-wrap:wrap}
}