/* ═══ SASHITE 本体の CSS（tehai-app.css を同じフォルダの 8 枚に分けたうちの 7/8・工程2 CSS・2026-09-28）═══
   クレジットステータスの窓・ヒーロー／ヘッダー（姉妹ページ）・案件一覧の？・5 枠の色（終日・夕方・深夜）・枠が 4 つ以上のときの詰め
   ★中身は tehai-app.css の 3501〜4292 行目を **そのまま** 移したもの（1 文字も変えていない）。
   ★順番が大事（カスケード）：functions.php が 00 → 07 の順に読む（deps で固定）。@import はしない。モックも同じ順（tehai/tests/harness/render_*.php）。
   ★1 枚でも欠けると functions.php は旧 tehai-app.css（1 枚）に戻して読む（fallback）。旧ファイルは 1 週間置いてから、fallback の行と一緒に消す。 ═══ */
/* ── ここから本文（tehai-app.css の 3501〜4292 行目・移しただけ）── */
/* ========== クレジットステータスモーダル ========== */
.cs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.cs-modal-window {
    background: #f5f7fa;
    border-radius: 18px;
    max-width: 440px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,.28);
    display: flex;
    flex-direction: column;
}
.cs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 0;
    flex-shrink: 0;
}
.cs-modal-title {
    font-size: 15px;
    font-weight: bold;
    color: #1e3a5f;
}
.cs-modal-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #aaa;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.cs-modal-close:hover { color: #333; }
.cs-modal-body {
    padding: 12px 20px 24px;
    overflow-y: auto;
}

/* ヒーローカード */
.cs-hero {
    background: #fff;
    border-radius: 20px;
    padding: 26px 22px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    margin-bottom: 12px;
}
.cs-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 18px;
}
.cs-badge-green  { background: #e8f5e9; color: #2e7d32; }
.cs-badge-blue   { background: #e3f2fd; color: #1565c0; }
.cs-badge-amber  { background: #fffde7; color: #f57f17; }
.cs-badge-orange { background: #fff3e0; color: #e65100; }
.cs-badge-red    { background: #fce4ec; color: #c62828; }

/* リングゲージ */
.cs-ring-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 16px;
}
.cs-ring-wrap svg { transform: rotate(-90deg); }
.cs-ring-bg   { fill: none; stroke: #f0f4f8; stroke-width: 11; }
.cs-ring-fill {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
    transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .4s;
}
.cs-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cs-approx { font-size: 12px; font-weight: 600; opacity: .5; }
.cs-num    { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.cs-unit   { font-size: 13px; font-weight: 600; margin-top: 2px; opacity: .65; }

.cs-basis    { font-size: 11px; color: #bbb; margin-bottom: 12px; line-height: 1.5; }
.cs-cr-row   { font-size: 13px; color: #aaa; margin-bottom: 5px; }
.cs-cr-row strong { color: #1a2a3a; font-size: 15px; }

.cs-mini-bar-wrap { margin: 6px 0 12px; }
.cs-mini-bar  { height: 5px; background: #f0f4f8; border-radius: 3px; overflow: hidden; }
.cs-mini-fill { height: 100%; border-radius: 3px; transition: width .6s, background .3s; }

.cs-renew        { font-size: 12px; color: #bbb; }
.cs-renew strong { color: #666; font-size: 13px; }

/* ヒントカード */
.cs-hint-card {
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 10px;
}
.cs-hint-orange { background: #fff8f0; border: 1.5px solid #ffcc80; color: #bf360c; }
.cs-hint-red    { background: #fff5f5; border: 1.5px solid #ffcdd2; color: #c62828; }

/* サブカード */
.cs-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    margin-bottom: 10px;
}
.cs-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #bbb;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cs-safe-title { color: #4caf50; }

/* プラン */
.cs-plan-row  { display: flex; justify-content: space-between; align-items: center; }
.cs-plan-name { font-size: 14px; font-weight: 600; color: #1a2a3a; }
.cs-plan-badge {
    font-size: 11px; font-weight: 600;
    background: #e8eef6; color: #1e5aa0;
    border-radius: 20px; padding: 3px 10px;
}

/* 消費ルール */
.cs-rule-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f5f7fa;
}
.cs-rule-row:last-child { border-bottom: none; }
.cs-rule-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.cs-icon-geo   { background: #e3f2fd; }
.cs-icon-route { background: #e8f5e9; }
.cs-rule-body  { flex: 1; }
.cs-rule-name  { font-size: 13px; font-weight: 600; color: #333; }
.cs-rule-sub   { font-size: 11px; color: #aaa; margin-top: 2px; }
.cs-rule-cr    { font-size: 16px; font-weight: 700; color: #1e5aa0; flex-shrink: 0; text-align: right; }
.cs-rule-cr span { font-size: 10px; font-weight: 400; color: #aaa; }

/* 安心ポイント */
.cs-safe-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f5f7fa;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}
.cs-safe-row:last-child { border-bottom: none; }
.cs-check { color: #4caf50; font-weight: 700; flex-shrink: 0; }
.cs-safe-note { font-size: 11px; color: #aaa; display: block; margin-top: 2px; }

/* モバイル対応 */
@media (max-width: 480px) {
    .cs-hero { padding: 20px 16px; }
    .cs-num  { font-size: 38px; }
}

/* =========================================================
   SASHITE の4ページは業務用アプリなので、
   津山工業HPのヘッダー・フッターは出さない（2026-09-09）
   body.sashite-app は functions.php の body_class フィルタで付く。
   get_header()/get_footer() は wp_head()/wp_footer() のために呼び続けている。
   ========================================================= */
body.sashite-app > header,
body.sashite-app #footer,
body.sashite-app #page-top {
    display: none;
}

/* ヒーローの下に少し余白（ヘッダーは固定になったので、場所取りの空箱に付ける。2026-09-18） */
body.sashite-app .sashite-hero-spacer {
    height: var(--sashite-hero-h, 150px);
    margin-bottom: clamp(18px, 3vh, 32px);
}
/* iPhone のステータスバーやゴムのように引っぱったときに見える地色を、ヘッダーの上端の色にそろえる */
html:has(body.sashite-app) { background: #f8fbfa; }   /* 本文の地色と同じ（下へ引っぱったとき・本文より下の余白が白くならない。マサさん指摘 2026-09-18）。ステータスバーは theme-color（白）で塗られるので影響なし */

/* 本文の地色も、ヒーローと同じ寒色側にそろえる。
   HPの地色（--content-wrapper-color = rgb(255,253,251)）は少し黄みがあり、
   ティールの帯の下に置くと境目で色が転んで見えるため、この4ページだけ差し替える。
   ★変数の上書きなのでHP側には影響しない。 */
body.sashite-app {
    /* 地色に色を持たせ、案件カードは白のまま＝「机の上に紙が乗っている」形。
       カード側に色を付ける案も試したが、カードの中はすでに
       午前＝水色／午後＝クリーム／夜間＝薄紫で色分けされているので、
       カードの地に色を足すとその色分けが読みにくくなる。 */
    --content-wrapper-color: #f8fbfa;   /* 2026-09-18 マサさん指定：もう少し薄く（#f4f8f7 → #f8fbfa。ページ全体の地色も同じ） */
}

/* =========================================================
   SASHITE ヘッダー（2026-09-09）
   4ページ共通。tehai/parts/sashite-header.php から出る。
   ・アプリ本体（--home）＝ロゴを大きく、ページ名は出さない
   ・姉妹ページ（--sub） ＝ロゴは小さくトップへの戻り口、その下にページ名
   ロゴ画像（images/sashite-logo.png）が無い間は文字ロゴで表示する。
   ========================================================= */
.sashite-hero {
    /* 左上から光が入り、右下へロゴのティール寄りのうすい緑へ落ちる。
       下の線は同じティール系をごく薄く。線を太くすると帯が主張しすぎるので細く。
       ★ロゴPNGは全体が半透明（不透明度85%まで）なので、背景が透けて見える。
         濃い色の背景にすると沈んで濁るため、明るい背景を保つこと。 */
    /* ★2026-09-18：上端は一直線に真っ白（#fff）。iPhone のステータスバー（Safari が theme-color=#fff で塗る。色付けを切っている端末でも白）と
       継ぎ目なくつながる。前の斜めのグラデーションは上端の色が横に変わるので、ステータスバーとの境に線が見えていた。
       白から下へ向かってロゴのティール寄りのうすい緑へ落とす。左下の光は上端に掛からない位置に */
    background:
      radial-gradient(120% 140% at 4% 100%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 55%),
      linear-gradient(180deg, #ffffff 0px, #ffffff 6px, #f4f9f7 40%, #e4eeec 100%);
    border-bottom: 1px solid rgba(0, 109, 98, 0.20);
    /* スクロールで徐々に縮んで小さいロゴだけ残す（2026-09-18 マサさん指定）。
       画面上部に固定し、--p（0〜1・script が付ける）で余白とロゴの大きさが連続的に変わる。
       説明文・会員情報・ページ名の縮小は is-compact でふわっと（transition）。
       本文の場所取りは .sashite-hero-spacer。z-index は保存バー（900）より上・モーダル（999〜）より下。 */
    --p: 0;
    position: fixed; top: 0; left: 0; right: 0; z-index: 950;
    box-shadow: 0 2px 12px rgba(0, 60, 54, calc(var(--p) * 0.10));
    /* iPhone：viewport-fit=cover（header.php・SASHITE の4ページだけ）で、ステータスバーの裏までこの地色が続く。中身は縁の分だけ下げる */
    padding-top: env(safe-area-inset-top, 0px);
}
body.sashite-app { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.sashite-hero.no-anim, .sashite-hero.no-anim * { transition: none !important; }

.sashite-hero-inner {
    /* 左右の余白は本体（.tehai-app-page の margin: 0 12vw）と同じ値にそろえる。
       以前は幅1280pxの箱を中央寄せにしていたため、広い画面ではロゴが本体の
       左端より内側に、会員情報が右端より内側に寄ってしまっていた。
       同じ 12vw にすれば、ロゴの左端＝案件一覧の左端、会員情報の右端＝本体の右端になる。 */
    max-width: none;
    margin: 0;
    /* 上下の余白は --p で 全部見えている値 → 8px へ */
    padding: calc((1 - var(--p)) * clamp(24px, 4.5vh, 48px) + var(--p) * 4px) 12vw calc((1 - var(--p)) * clamp(20px, 3.5vh, 36px) + var(--p) * 4px);   /* 縮むと上下 4px（マサさん指定 2026-09-18：縮小時のロゴを大きく・上のスキマは小さく） */
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    /* 横は 12vw＋画面の縁（iPhone 横向きのノッチの分。縦向きは 0） */
    padding-left: calc(12vw + env(safe-area-inset-left, 0px));
    padding-right: calc(12vw + env(safe-area-inset-right, 0px));
}

.sashite-hero-main {
    min-width: 0;
}

.sashite-brand {
    display: block;      /* 「手配検討シミュレーター」が上、SASHITE が下 */
    text-decoration: none;
}

a.sashite-brand:hover {
    opacity: 0.72;
}

.sashite-logo-img {
    display: block;
    width: auto;
    /* 画像は「荷揚げのマーク ＋ SASHITE」の横並びロゴ。
       マークのぶん縦に厚みがあるので、文字ロゴのときより少し大きめにとる。 */
    height: calc((1 - var(--p)) * clamp(36px, 5.4vw, 58px) + var(--p) * 34px);   /* 縮むと 34px */
}

.sashite-logo-word {
    display: block;
    color: #14110e;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: calc((1 - var(--p)) * clamp(38px, 6vw, 64px) + var(--p) * 34px);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.sashite-logo-sub {
    display: block;
    /* ロゴ以外は最初の 40px で消え切る（--q＝1→0 を p の3倍の速さで）。時間のアニメは使わない＝スクロールと完全に連動（グニャッとしない） */
    opacity: clamp(0, 1 - var(--p) * 3, 1);
    max-height: calc(clamp(0, 1 - var(--p) * 3, 1) * 30px); overflow: hidden;
    margin-bottom: calc(clamp(0, 1 - var(--p) * 3, 1) * 6px);
    color: #14110e;
    font-size: clamp(13px, 1.5vw, 17px);
    font-weight: 600;
    letter-spacing: 0.34em;
    text-indent: 0.34em;   /* 字間の分だけ右に寄るのを戻す */
}

/* --- 姉妹ページ：ロゴは小さく、ページ名を主役にする --- */
.sashite-hero--sub .sashite-logo-img   { height: calc((1 - var(--p)) * clamp(24px, 3vw, 34px) + var(--p) * 28px); }
.sashite-hero--sub .sashite-logo-word  { font-size: calc((1 - var(--p)) * clamp(26px, 3.2vw, 35px) + var(--p) * 28px); }
.sashite-hero--sub .sashite-logo-sub   { margin-bottom: 4px; font-size: 12px; letter-spacing: 0.26em; text-indent: 0.26em; }

.sashite-page-title {
    margin: 0;
    border-top: 1px solid rgba(32, 28, 24, 0.14);
    color: rgb(32, 28, 24);
    font-family: "Hiragino Kaku Gothic ProN", Arial, sans-serif;
    font-size: calc((1 - var(--p)) * clamp(26px, 3.4vw, 40px) + var(--p) * 15px);   /* 縮むと 15px */
    font-weight: normal;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin-top: calc((1 - var(--p)) * 14px + var(--p) * 2px);
    padding-top: calc((1 - var(--p)) * 12px);
    border-top-color: rgba(32, 28, 24, calc((1 - var(--p)) * 0.14));
}

/* --- 会員情報 --- */
.sashite-hero-meta {
    text-align: right;
    line-height: 1.5;
    /* 会員情報も最初の 40px で消え切る（スクロール連動・時間のアニメなし） */
    opacity: clamp(0, 1 - var(--p) * 3, 1);
    max-height: calc(clamp(0, 1 - var(--p) * 3, 1) * 210px); overflow: hidden;   /* 職人手配オンラインの行が増えたぶん広げた（2026-09-20） */
    transform: translateY(calc(var(--p) * -6px));
}
/* is-compact（script が 40px 超で付ける）：消えた会員情報を押せないように・読み上げから外す。見た目はもう --p で消えている */
.sashite-hero.is-compact .sashite-hero-meta { visibility: hidden; pointer-events: none; }

.sashite-meta-label {
    margin: 0;
    color: rgba(32, 28, 24, 0.5);
    font-size: 11px;
    letter-spacing: 0.14em;
}

.sashite-meta-name {
    margin: 2px 0 0;
    color: #14110e;
    font-size: 16px;
    font-weight: 700;
}

.sashite-meta-sub {
    margin: 2px 0 0;
    color: rgba(32, 28, 24, 0.65);
    font-size: 13px;
}

.sashite-meta-id {
    margin-left: 4px;
    color: rgba(32, 28, 24, 0.45);
}

/* HPのヘッダーを出さなくなったので、ログアウトの出口はここだけ */
.sashite-logout {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    border: 1px solid rgba(32, 28, 24, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: rgba(32, 28, 24, 0.75);
    font-size: 12px;
    line-height: 1.6;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sashite-logout:hover,
.sashite-logout:focus {
    background: #fff;
    border-color: rgba(32, 28, 24, 0.5);
    color: #14110e;
}

@media screen and (max-width: 767px) {
    .sashite-hero-inner {
        align-items: flex-start;
        gap: 12px;
    }
    /* スマホではロゴを大きく。PC向けの clamp では下限の36pxに張り付いて小さすぎ、
       会員情報の文字と釣り合わなかった。画面幅の15%（375pxで56px）を基準にし、
       幅は自動なのでロゴ全体（比率5.5:1）が横に収まる範囲で最大化する。 */
    .sashite-logo-img {
        height: calc((1 - var(--p)) * clamp(48px, 15vw, 64px) + var(--p) * 30px);   /* 縮むと 30px */
    }
    .sashite-logo-word {
        font-size: calc((1 - var(--p)) * clamp(44px, 12vw, 56px) + var(--p) * 30px);
    }
    .sashite-logo-sub {
        margin-bottom: 8px;
        font-size: 13px;
    }
    /* 姉妹ページ（マスター管理・傾向・Dock）も同じ考えで一段大きく */
    .sashite-hero--sub .sashite-logo-img  { height: calc((1 - var(--p)) * clamp(36px, 11vw, 46px) + var(--p) * 28px); }
    .sashite-hero--sub .sashite-logo-word { font-size: calc((1 - var(--p)) * clamp(30px, 8.5vw, 40px) + var(--p) * 28px); }
    .sashite-hero-main {
        width: 100%;
    }
    /* スマホは会員情報を2段に割り、ログアウトはその右にまとめて置く。
       1行に詰めるとログアウトだけ次の行へ落ちて、宙に浮いて見えるため。
         1段目：会員情報  山田 一郎        [ログアウト]
         2段目：〇〇工業株式会社 (yamada)      〃      */
    .sashite-hero-meta {
        width: 100%;
        text-align: left;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: baseline;
        column-gap: 8px;
        row-gap: 2px;
        padding-top: 8px;
        border-top: 1px solid rgba(32, 28, 24, 0.10);
    }
    .sashite-hero-meta p { margin: 0; min-width: 0; }
    .sashite-meta-label { grid-column: 1; grid-row: 1; }
    .sashite-meta-name  { grid-column: 2; grid-row: 1; font-size: 14px; }
    .sashite-meta-sub   { grid-column: 1 / span 2; grid-row: 2; font-size: 12px; }
    .sashite-logout {
        grid-column: 3;
        grid-row: 1 / span 2;   /* 2段ぶんの高さの真ん中に置く */
        align-self: center;
        margin-top: 0;
    }
    .sashite-hero-meta .sp { display: none; }   /* スマホでも会社名とIDは1行に並べる */
    .sashite-hero-inner { gap: calc(clamp(0, 1 - var(--p) * 3, 1) * 12px); }   /* 消えた会員情報のぶんの隙間も一緒に詰める */
    .sashite-hero-inner { padding-bottom: calc((1 - var(--p)) * 12px + var(--p) * 4px); }   /* 会員情報・ログアウトの下の余白は 12px（PC の 3.5vh は iPhone で約30pxと広すぎ。マサさん指定 2026-09-18） */
    .sashite-hero-meta { padding-top: calc(clamp(0, 1 - var(--p) * 3, 1) * 8px); border-top-width: calc(clamp(0, 1 - var(--p) * 3, 1) * 1px); }
    .sashite-hero .sashite-page-title { font-size: calc((1 - var(--p)) * clamp(26px, 3.4vw, 40px) + var(--p) * 14px); margin-top: calc((1 - var(--p)) * 10px); padding-top: calc((1 - var(--p)) * 10px); }   /* 「.tehai-app-page h1」より強く */
}

/* 案件一覧の見出しの右・件数の左に置く「？」（操作のしかた）。
   ほかの「？」は色の濃いボタンの上に乗るので、白のガラスドームで立体を出している。
   ここは白地なので同じ手は使えない。代わりに「濃紺のドーム＋白抜きの？」にして、
   照り返しと影の付け方をそろえ、同じ立体感に見えるようにする。 */
.projectList-header .ops-help-btn {
    position: static;          /* 他の「？」は絶対配置。ここは見出しの隣に流し込む */
    margin: 0 auto 0 8px;      /* 見出しの右に寄せ、あとは space-between に任せる */
    border: none;
    background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 52%),
        linear-gradient(160deg, #3a76b8 0%, #23507f 100%);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.45),
        inset 0 -1px 2px rgba(0,0,0,0.22),
        0 2px 4px rgba(30,58,95,0.28),
        0 1px 2px rgba(0,0,0,0.12);
    color: #fff;
    line-height: 1;
}

.projectList-header .ops-help-btn:hover {
    background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0) 52%),
        linear-gradient(160deg, #4485cb 0%, #295c92 100%);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.55),
        inset 0 -1px 2px rgba(0,0,0,0.20),
        0 4px 8px rgba(30,58,95,0.32),
        0 1px 2px rgba(0,0,0,0.14);
    transform: translateY(-1px);
}

.projectList-header .ops-help-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.22),
        0 1px 2px rgba(30,58,95,0.24);
}

/* ── 新しい枠（終日・夕方・深夜）の枠色。夜間の規則をもとに生成（2026-09-11）。枠定義が入るまでは使われない ── */
/* 空欄の縁は6枠とも #projectList input の 1px #ccc（1087行）に任せる（2026-09-12 総点検）。
   ここに書いていた 1.5px の色つき縁は、クラス指定（0,1,1）が ID 指定（1,0,1）に負けて
   もともと効いておらず、下の ID+属性 の指定だけが終日・夕方・深夜に効いて
   3枠と新しい枠で縁が食い違っていた。どちらも外して同じ見た目にそろえた。 */
.allday-members-container input   { background-color: var(--allday-light); }
.evening-members-container input  { background-color: var(--evening-light); }
.midnight-members-container input { background-color: var(--midnight-light); }
.allday-members-container input.assigned {
    background-color: var(--allday);
    box-shadow: 0 3px 7px rgba(44,134,125,0.35), 0 1px 2px rgba(0,0,0,0.15);   /* 終日の緑（#2c867d）の影。旧色 #5b7a99 の残りを直した（2026-09-12） */
    border: none;
    font-weight: 700;
    transform: translateY(-1px);
}
.evening-members-container input.assigned {
    background-color: var(--evening);
    box-shadow: 0 3px 7px rgba(217,72,28,0.35), 0 1px 2px rgba(0,0,0,0.15);
    border: none;
    font-weight: 700;
    transform: translateY(-1px);
}
.midnight-members-container input.assigned {
    background-color: var(--midnight);
    box-shadow: 0 3px 7px rgba(31,42,90,0.35), 0 1px 2px rgba(0,0,0,0.15);
    border: none;
    font-weight: 700;
    transform: translateY(-1px);
}
.allday-members-container     input.assigned.support { background-color: #e9d3ec; border-color: var(--allday) !important; }
.evening-members-container     input.assigned.support { background-color: #e9d3ec; border-color: var(--evening) !important; }
.midnight-members-container     input.assigned.support { background-color: #e9d3ec; border-color: var(--midnight) !important; }

/* ══════════════════════════════════════════════════════════
   枠の色を data-shift から引く（2026-09-11・時間枠の可変化の土台）

   これまでは `.morning-members-container input` のように**クラス名**で色を引いていた。
   枠が可変になると枠キー（allday/morning/afternoon/evening/night/midnight）から
   クラス名を組み立てることになるので、`data-shift` の値で引く形も用意しておく。

   ・既存のクラス名の規則はそのまま残す（3枠の会員は今までどおり）
   ・ここは**後に書いてあるぶん強い**ので、同じ色を指すかぎり見た目は変わらない
   ・新しい枠（終日・夕方・深夜）はクラス名の規則が無いので、ここだけが効く
   ══════════════════════════════════════════════════════════ */
#projectList input[data-shift="allday"],    .ops-projectList input[data-shift="allday"]    { background-color: var(--allday-light); }
#projectList input[data-shift="morning"],   .ops-projectList input[data-shift="morning"]   { background-color: var(--morning-light); }
#projectList input[data-shift="afternoon"], .ops-projectList input[data-shift="afternoon"] { background-color: var(--afternoon-light); }
#projectList input[data-shift="evening"],   .ops-projectList input[data-shift="evening"]   { background-color: var(--evening-light); }
#projectList input[data-shift="night"],     .ops-projectList input[data-shift="night"]     { background-color: var(--night-light); }
#projectList input[data-shift="midnight"],  .ops-projectList input[data-shift="midnight"]  { background-color: var(--midnight-light); }

#projectList input[data-shift="allday"].assigned,    .ops-projectList input[data-shift="allday"].assigned    { background-color: var(--allday); }
#projectList input[data-shift="morning"].assigned,   .ops-projectList input[data-shift="morning"].assigned   { background-color: var(--morning); }
#projectList input[data-shift="afternoon"].assigned, .ops-projectList input[data-shift="afternoon"].assigned { background-color: var(--afternoon); }
#projectList input[data-shift="evening"].assigned,   .ops-projectList input[data-shift="evening"].assigned   { background-color: var(--evening); }
#projectList input[data-shift="night"].assigned,     .ops-projectList input[data-shift="night"].assigned     { background-color: var(--night); }
#projectList input[data-shift="midnight"].assigned,  .ops-projectList input[data-shift="midnight"].assigned  { background-color: var(--midnight); }

/* ══════════════════════════════════════════════════════════
   枠を選ぶタブ（2026-09-12）

   スマホではスタッフ一覧を枠ごとに重ねて1つだけ見せるので、選ぶ手段が要る。
   枠が4つ以上のときだけHTMLに出る（3枠の会員には存在しない＝見た目は変わらない）。
   パソコンでは枠が横に並んでいて選ぶ必要が無いので、ここで隠す。
   ══════════════════════════════════════════════════════════ */
.frame-tabs { display: none; }

.frame-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--frame-color, #666);
    background: #fff;
    border: 1.5px solid var(--frame-color, #ccc);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.frame-tab.active {
    background: var(--frame-color, #666);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════
   出勤スタッフ一覧の「名前が並ぶ箱」（2026-09-12）

   ★これまで #morningStaffList のように**ID名**でしか書かれていなかったので、
     終日・夕方・深夜の列には枠線も高さもスクロールも付いていなかった。
     IDの指定はクラスの指定より強いので、ここを足しても
     既存3枠は今までどおりIDの規則が勝つ＝見た目は1pxも変わらない。

   引き先は2通り。.frame-staff-box は page-spot-tehai.php が付ける印。
   .frame-staff > div のほうは、PHPがまだ古くてもCSSだけで効くようにするための保険。
   （.frame-staff の直下にある div はこの箱だけ）
   値は、既存3枠が最終的に受け取っているものとまったく同じにそろえてある
   （2034行目の指定に、2784行目の枠線・角丸・影を重ねたあとの姿）。
   ══════════════════════════════════════════════════════════ */
.frame-staff-box,
.frame-staff > div {
    text-align: center;
    width: 100%;
    height: 70vh;
    height: 70svh;
    padding-bottom: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid #d4d9e3;
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
}

/* ══════════════════════════════════════════════════════════
   応援（外注）の仮配置の色（2026-09-12 手直し）

   ★上の `#projectList input[data-shift="…"].assigned` はIDを含むので、
     `.morning-members-container input.assigned.support`（IDなし）より**強い**。
     そのため着手順3を入れた日から、応援の枠がふつうの割当と同じ濃い色になっていた。
     応援は「仮」だと一目で分かる薄い色でなければならないので、同じ土俵で書き直す。
   既存3枠の色は、着手順3より前とまったく同じ値に戻してある。
   ══════════════════════════════════════════════════════════ */
#projectList input[data-shift="allday"].assigned.support,
.ops-projectList input[data-shift="allday"].assigned.support    { background-color: #c6e2de; }
#projectList input[data-shift="morning"].assigned.support,
.ops-projectList input[data-shift="morning"].assigned.support   { background-color: #c9e6ff; }
#projectList input[data-shift="afternoon"].assigned.support,
.ops-projectList input[data-shift="afternoon"].assigned.support { background-color: #ffe4bf; }
#projectList input[data-shift="evening"].assigned.support,
.ops-projectList input[data-shift="evening"].assigned.support   { background-color: #f8ccc0; }
#projectList input[data-shift="night"].assigned.support,
.ops-projectList input[data-shift="night"].assigned.support     { background-color: #e9d3ec; }
#projectList input[data-shift="midnight"].assigned.support,
.ops-projectList input[data-shift="midnight"].assigned.support  { background-color: #c9cfe4; }

/* 出勤スタッフの札も同じ考え方で（既存は #morningStaffList li のようにIDで引いている）。
   既存の3枠はIDの規則のほうが強いので、ここは新しい3枠（終日・夕方・深夜）のためにある。
   6枠ぶん書いておき、IDの規則が無くなっても同じ色が出るようにしておく。 */
.staffList-Container li.staff-item[data-shift="allday"]    { background-color: var(--allday); }
.staffList-Container li.staff-item[data-shift="morning"]   { background-color: var(--morning); }
.staffList-Container li.staff-item[data-shift="afternoon"] { background-color: var(--afternoon); }
.staffList-Container li.staff-item[data-shift="evening"]   { background-color: var(--evening); }
.staffList-Container li.staff-item[data-shift="night"]     { background-color: var(--night); }
.staffList-Container li.staff-item[data-shift="midnight"]  { background-color: var(--midnight); }

/* 割当済み（グレー）は枠の色より強い。IDで書かれている既存の規則と同じ強さにそろえる */
.staffList-Container li.staff-item.assigned { background-color: #888 !important; }

/* ══════════════════════════════════════════════════════════
   枠に依存しない指定（2026-09-11 / 2026-09-12 手直し）

   これまで `.morningDataCount` `.nightStaffList` のように枠の名前ごとに書いていたぶんを、
   共通クラス（HTML側で併記している `.frame-count` / `.frame-staff`）で引けるようにする。
   枠の色は HTML の data-frame="<枠キー>" から引く。6種すべてに当たる。

   ★ここはファイルの末尾にあるので、上に書いてある枠名ごとの規則を**上書きする**。
     だから「上書きしてよいものだけ」を書くこと。
     2026-09-12 に2つやらかした：
       ・h4 に border:1px solid #000 を書いてしまい、色付き帯の border:none を打ち消して
         案件一覧のタイトルに黒い枠線が出た
       ・.frame-staff に width:100% を書いてしまい、元の width:30% を打ち消して
         出勤スタッフ一覧の枠どうしのスキマが消えた
   ══════════════════════════════════════════════════════════ */

/* ── 枠の色。どの枠でも・どちら側でも同じように当たるようにする ──
   引き先は2通り用意してある：
     ① data-frame="<枠キー>"  … page-spot-tehai.php が出す印。6種すべてに当たる
     ② 元からあるクラス名      … CSSだけ先に上がってもグレーにならないための保険
   ★②が無いと、PHPが古いままのときに --frame-color が見つからず
     タイトルが全部グレーになる（2026-09-12 に本番で出した）。両方残すこと。 */
[data-frame="allday"],
.alldayDataCount,    .alldayStaffList    { --frame-color: var(--allday);    --frame-light: var(--allday-light); --frame-shadow: rgba(44,134,125,0.28); }
[data-frame="morning"],
.morningDataCount,   .morningStaffList   { --frame-color: var(--morning);   --frame-light: var(--morning-light); --frame-shadow: rgba(30,144,255,0.28); }
[data-frame="afternoon"],
.afternoonDataCount, .afternoonStaffList { --frame-color: var(--afternoon); --frame-light: var(--afternoon-light); --frame-shadow: rgba(255,140,0,0.28); }
[data-frame="evening"],
.eveningDataCount,   .eveningStaffList   { --frame-color: var(--evening);   --frame-light: var(--evening-light); --frame-shadow: rgba(217,72,28,0.28); }
[data-frame="night"],
.nightDataCount,     .nightStaffList     { --frame-color: var(--night);     --frame-light: var(--night-light); --frame-shadow: rgba(139,0,139,0.28); }
[data-frame="midnight"],
.midnightDataCount,  .midnightStaffList  { --frame-color: var(--midnight);  --frame-light: var(--midnight-light); --frame-shadow: rgba(31,42,90,0.28); }

/* ══════════════════════════════════════════════════════════
   枠のタイトル（色付きの帯）

   ★案件一覧と出勤スタッフ一覧で**まったく同じ見た目**にする。
     左右で対になっていることを、見ただけで分かるようにするため（マサさんのこだわり）。
     片側だけ変えないこと。触るならこの1か所を触る。
   ══════════════════════════════════════════════════════════ */
.frame-count h4,
.frame-staff h4 {
    height: 25px;
    width: 100%;
    margin: 0 auto;
    /* 縦も横も真ん中に置く。高さを決め打ちしているので、
       文字を小さくしたとき（枠が4つ以上のとき）に上へ寄って見えるのを防ぐ。 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--frame-color, #666);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════════════════════
   枠の列の幅とスキマ

   枠どうしの間のスキマは**意味を持たせて空けてある**（列の切れ目を見せる）。
   幅は「(全体 − スキマの合計) ÷ 枠の数」。枠の数は HTML が --frames で渡す。
   3枠・スキマ5% なら 30% ちょうどで、今までの見た目と1pxも変わらない。
   入れ物は justify-content: space-between なので、余った 10% が
   2つの隙間に 5% ずつ配られる＝ここで指定したスキマになる。
   ══════════════════════════════════════════════════════════ */
.projectList-DataCount,
.staffList {
    --frames: 3;
    --frame-gap: 5%;
}
/* 枠が4つ以上：横幅は変えずにスキマを詰めて中身を優先する（マサさんの原則） */
.projectList-DataCount.is-many,
.staffList.is-many {
    --frame-gap: 2.5%;
}

.frame-count,
.frame-staff {
    width: calc((100% - (var(--frames) - 1) * var(--frame-gap)) / var(--frames));
    text-align: center;
}

.frame-count p {
    height: 20px;
    font-size: 14px;
    margin: 5px 0;
    color: #333;
}
.frame-staff p {
    height: 20px;
    font-size: 14px;
    margin: 5px 0;
    color: #333;
}

/* 枠が4つ以上のときだけ、文字を詰める（幅とスキマは上の計算に任せる） */
.projectList-DataCount.is-many .frame-count h4 { font-size: 13px; }
.projectList-DataCount.is-many .frame-count p  { font-size: 12px; white-space: nowrap; }
.staffList.is-many .frame-staff h4 { font-size: 13px; }
.staffList.is-many .frame-staff p  { font-size: 12px; white-space: nowrap; }

/* 枠ごとの札の色。
   既存3枠は #morningStaffList li のようなIDの規則（重みが上）が勝つので見た目は変わらない。
   終日・夕方・深夜のようにIDの規則が無い枠だけ、ここの色が当たる。
   これが無いと、白い文字が白い地に乗って札が見えなくなる（2026-09-12 に見つけた）。
   割当て済（.assigned）は !important で灰色になるので、ここでは上書きされない。 */
.frame-staff li.staff-item {
    background-color: var(--frame-color, #666);
    color: #fff;
    border-radius: var(--name-radius, 5px);
    font-weight: 600;
    box-shadow: 0 2px 6px var(--frame-shadow, rgba(0,0,0,0.25));
}

/* 枠が4つ以上のとき、札が列からはみ出すのを止める。
   右端の出勤可否の色チップ（.staff-marks）を箱の中に残し、あふれるぶんは名前側を切る。
   ★2026-09-12：ここは元々「右端の削除ボタン（×）が隠れるのを止める」と書いてあった。
     削除ボタンは廃止（右クリック／長押しへ移した）ので、その理由はもう無い。
     指定そのものは今も要る（札の右端に色チップが居るのは変わらないため）ので、理由だけ書き直した。
   .is-many のときだけなので、3枠の会社は1pxも動かない。
   width ではなく max-width なのは、スマホ（列が全幅になる場所）で札を膨らませないため。 */
.staffList.is-many .frame-staff li.staff-item {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

/* ── マスターへの提案の札（姉妹ページのリンクに付く・2026-09-14） ── */
.report-back-btn .suggest-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #e67e22; color: #fff; font-size: 11px; line-height: 18px; text-align: center; vertical-align: 1px; }

/* ── スクロールバーの見た目（2026-09-14）：枠が多いときの出勤一覧 ──
   細くて角丸、触っている間だけ濃く。標準の scrollbar-width / scrollbar-color だけで書く
   （Chrome 121 以降は ::-webkit-scrollbar と併用すると標準が勝つので、標準にそろえる。Safari は元の細い overlay のまま） */
.avail-body.is-many { scrollbar-width: thin; scrollbar-color: rgba(44, 62, 80, .32) transparent; }
.avail-body.is-many:hover { scrollbar-color: rgba(44, 62, 80, .58) transparent; }