/* ========================================================================== シフト表 — 共通スタイル配色はすべてCSS変数。:root がダーク、[data-theme="light"] がライト。テーマの切り替えはを書き換えるだけ。 ========================================================================== */ :root{ --bg:#0d0f13; --bg-grad:radial-gradient(1200px 600px at 20% -10%, #17202b 0%, transparent 60%); --card:#171b22; --card-2:#1d222b; --card-hi:rgba(255,255,255,.045); --zebra:rgba(255,255,255,.022); --border:#262c37; --border-2:#333b49; --text:#e8ecf2; --dim:#9aa4b2; --faint:#6b7684; --accent:#2dbf8e; --accent-ink:#04231a; --accent-soft:rgba(45,191,142,.14); --warn:#e0983a; --warn-ink:#1c1400; --warn-soft:rgba(224,152,58,.13); --pending:#5aa9f0; --pending-soft:rgba(90,169,240,.14); --danger:#e9635f; --danger-soft:rgba(233,99,95,.14); --sat:#7aa8e0; --sun:#e07a7a; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --tile-hi:rgba(255,255,255,.2); --unset-bg:#232833; --unset-fg:#7b8593; --today:rgba(45,191,142,.10); } [data-theme="light"]{ --bg:#eef1f5; --bg-grad:radial-gradient(1200px 600px at 20% -10%, #ffffff 0%, transparent 65%); --card:#ffffff; --card-2:#f6f8fb; --card-hi:rgba(0,0,0,.02); --zebra:rgba(16,24,40,.018); --border:#e3e8ef; --border-2:#cdd5e0; --text:#141b24; --dim:#5b6672; --faint:#8a95a3; --accent:#0f9d70; --accent-ink:#ffffff; --accent-soft:rgba(15,157,112,.12); --warn:#c47d1c; --warn-ink:#ffffff; --warn-soft:rgba(196,125,28,.12); --pending:#1f6fd0; --pending-soft:rgba(31,111,208,.11); --danger:#d64541; --danger-soft:rgba(214,69,65,.11); --sat:#2f6ba8; --sun:#b5453f; --shadow:0 1px 2px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.08); --shadow-sm:0 1px 2px rgba(16,24,40,.07); --tile-hi:rgba(255,255,255,.38); --work-bg:#b9a9e4; --work-fg:#2b1d55; --off-bg:#f7c4da; --off-fg:#6b1638; --paid-bg:#f7b96b; --paid-fg:#5a2c00; --office-bg:#b3ddb6;--office-fg:#14401a; --honpai-bg:#f8e78c;--honpai-fg:#453700; --unset-bg:#e9edf3; --unset-fg:#78828f; --today:rgba(15,157,112,.10); } /* ========================= 基本 ========================= */ *{box-sizing:border-box} /* hidden属性を常に優先する。これが無いと .modal-overlay{display:flex} などのクラス指定に負けて、 hidden を付けた要素（モーダル等）が表示されたままになる。 */ [hidden]{display:none !important} body{ margin:0; background:var(--bg); background-image:var(--bg-grad); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; font-feature-settings:"tnum" 1; -webkit-font-smoothing:antialiased; transition:background-color .25s, color .25s; } button,select,input,textarea{font:inherit;color:inherit} button{cursor:pointer;border:none;background:none} a{color:var(--accent)} .wrap{max-width:1180px;margin:0 auto;padding:0 18px 64px} .spacer{flex:1} .card{ background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); position:relative; overflow:hidden; } .card::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--card-hi)} h1{font-size:calc(20px * var(--fs));font-weight:800;letter-spacing:.01em;margin:22px 0 16px} h2{font-size:calc(15px * var(--fs));font-weight:800;margin:0 0 3px} h3{font-size:calc(14px * var(--fs));font-weight:800;margin:0 0 3px} .sub{margin:0 0 14px;font-size:calc(11.5px * var(--fs));color:var(--faint);line-height:1.65} .empty-msg{color:var(--faint);font-size:calc(13px * var(--fs));font-weight:600} .emptybox{padding:34px 20px;text-align:center;color:var(--faint);font-size:calc(13px * var(--fs));font-weight:600;line-height:1.9} /* ========================= ボタン・入力 ========================= */ .ghost-btn{ padding:8px 13px;border-radius:10px;background:var(--card);border:1px solid var(--border); color:var(--dim);font-size:calc(12.5px * var(--fs));font-weight:600;transition:.15s;box-shadow:var(--shadow-sm); } .ghost-btn:hover{color:var(--text);border-color:var(--border-2)} .ghost-btn.sm{padding:6px 11px;font-size:calc(11.5px * var(--fs));border-radius:9px} .primary-btn{ padding:9px 16px;border-radius:11px;background:var(--accent);color:var(--accent-ink); font-size:calc(13px * var(--fs));font-weight:800;box-shadow:var(--shadow-sm);transition:.15s; } .primary-btn:hover{filter:brightness(1.08);transform:translateY(-1px)} .danger-btn{ padding:7px 12px;border-radius:9px;background:var(--danger-soft);color:var(--danger); border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);font-size:calc(11.5px * var(--fs));font-weight:700;transition:.15s; } .danger-btn:hover{filter:brightness(1.1)} .icon-btn{ width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--card); border:1px solid var(--border);color:var(--dim);transition:.15s;box-shadow:var(--shadow-sm); } .icon-btn:hover{color:var(--text);border-color:var(--border-2);transform:translateY(-1px)} .icon-btn svg{width:16px;height:16px} .select,.input{ padding:9px 12px;border-radius:11px;background:var(--card);border:1px solid var(--border); font-size:calc(13px * var(--fs));font-weight:600;box-shadow:var(--shadow-sm);outline:none;transition:.15s; } .input{background:var(--card-2);font-weight:500} .input:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .input::placeholder{color:var(--faint)} .link-btn{font-size:calc(11.5px * var(--fs));font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px} .row{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:13px} .row:last-child{margin-bottom:0} /* ========================= アプリバー ========================= */ .appbar{ position:sticky;top:0;z-index:40; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); } .appbar-in{max-width:1180px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:12px} .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:calc(16px * var(--fs));letter-spacing:.02em; color:var(--text);text-decoration:none} .brand .mark{ width:28px;height:28px;border-radius:9px;display:grid;place-items:center; background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#1b6ea8)); color:var(--accent-ink);box-shadow:var(--shadow-sm);flex:none; } .brand .mark svg{width:16px;height:16px} .user-chip{ display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px; background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm); } .avatar{ width:26px;height:26px;border-radius:999px;display:grid;place-items:center;font-size:calc(12px * var(--fs));font-weight:800;flex:none; background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#1b6ea8));color:var(--accent-ink); } .user-chip .nm{font-size:calc(13px * var(--fs));font-weight:700;line-height:1.15;display:block} .user-chip .rl{font-size:calc(10px * var(--fs));color:var(--faint);letter-spacing:.04em} .admin-link-btn{ display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:11px; background:var(--card);border:1px solid var(--border);color:var(--text);text-decoration:none; font-size:calc(12.5px * var(--fs));font-weight:700;box-shadow:var(--shadow-sm);transition:.15s; } .admin-link-btn:hover{border-color:var(--border-2);transform:translateY(-1px)} .pending-badge{ background:var(--danger);color:#fff;border-radius:999px;padding:2px 8px;font-size:calc(11px * var(--fs));font-weight:900; } /* ========================= ツールバー ========================= */ .toolbar{ position:sticky;top:57px;z-index:35;margin:0 -18px 12px;padding:12px 18px; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--border); } .monthnav{display:flex;align-items:center;gap:6px} .month-pill{ display:flex;align-items:baseline;gap:8px;padding:9px 15px;border-radius:12px;background:var(--card); border:1px solid var(--border);box-shadow:var(--shadow-sm);font-weight:800;font-size:calc(15px * var(--fs));transition:.15s; } .month-pill:hover{border-color:var(--border-2)} .month-pill small{font-weight:600;font-size:calc(11.5px * var(--fs));color:var(--faint)} .month-pill .caret{color:var(--faint);font-size:calc(10px * var(--fs))} .seg-wrap{display:flex;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:3px; box-shadow:var(--shadow-sm)} .seg{padding:7px 17px;border-radius:9px;font-size:calc(13px * var(--fs));font-weight:700;color:var(--dim);transition:.18s} .seg.active{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-sm)} .jump-pop{ display:none;gap:8px;align-items:center;padding:12px 14px;margin:-2px 0 12px;background:var(--card); border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);flex-wrap:wrap; } .jump-pop.open{display:flex} .jump-pop .lbl{font-size:calc(12px * var(--fs));color:var(--faint);font-weight:600} /* ========================= メンバー絞り込み ========================= */ .filterbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px} .filter-toggle{ display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:11px;background:var(--card); border:1px solid var(--border);box-shadow:var(--shadow-sm);font-size:calc(12.5px * var(--fs));font-weight:700; color:var(--dim);transition:.15s; } .filter-toggle:hover{border-color:var(--border-2);color:var(--text)} .filter-toggle svg{width:15px;height:15px} .filter-toggle .cnt{ font-size:calc(11px * var(--fs));font-weight:900;padding:2px 9px;border-radius:999px;background:var(--card-2);color:var(--faint); } .filter-toggle.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--text);background:var(--accent-soft)} .filter-toggle.on .cnt{background:var(--accent);color:var(--accent-ink)} .filter-toggle .chev{transition:.2s;font-size:calc(9px * var(--fs));color:var(--faint)} .filter-toggle.open .chev{transform:rotate(180deg)} .active-names{display:flex;gap:5px;flex-wrap:wrap;align-items:center;font-size:calc(11.5px * var(--fs));color:var(--faint);font-weight:600} .active-names b{color:var(--text);font-weight:800} .filter-panel{display:none;padding:14px 16px;margin-bottom:14px} .filter-panel.open{display:block} .fp-top{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap} .search{flex:1;min-width:170px;position:relative;display:flex;align-items:center} .search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--faint);pointer-events:none} .search input{ width:100%;padding:9px 12px 9px 33px;border-radius:11px;background:var(--card-2);border:1px solid var(--border); font-size:calc(13px * var(--fs));font-weight:600;outline:none;transition:.15s; } .search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .search input::placeholder{color:var(--faint);font-weight:500} .chips{display:flex;gap:7px;flex-wrap:wrap} .chip{ display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:999px; background:var(--card-2);border:1px solid var(--border);font-size:calc(12.5px * var(--fs));font-weight:700;color:var(--dim);transition:.15s; } .chip:hover{border-color:var(--border-2);color:var(--text)} .chip .ck{width:15px;height:15px;border-radius:5px;border:1.5px solid var(--border-2);display:grid; place-items:center;flex:none;transition:.15s} .chip .ck svg{width:10px;height:10px;opacity:0;transition:.15s} .chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .chip.on .ck{background:var(--accent-ink);border-color:var(--accent-ink)} .chip.on .ck svg{opacity:1;color:var(--accent)} .chip.hide{display:none} .fp-empty{font-size:calc(12px * var(--fs));color:var(--faint);padding:6px 2px;font-weight:600} /* ========================= 凡例 ========================= */ .legend{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;align-items:center} .lg{ display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 5px;border-radius:999px; background:var(--card);border:1px solid var(--border);font-size:calc(11.5px * var(--fs));font-weight:700;color:var(--dim); } .lg i{width:14px;height:14px;border-radius:5px;display:block} .lg.pend i{background:transparent;border:2px dashed var(--pending)} /* ========================= ステータス色 ========================= */ /* 各ステータスの色は管理者ページで設定し、common.js の applyStatuses() が