:root { --bg:#fff; --fg:#1f2328; --muted:#666; --line:#d0d7de; --accent:#1c4587; --warn:#fff4ce; --ng:#ffd7d5; --ok:#dafbe1; --head:#1c4587; --head-fg:#fff; --g2:#d0e0e3; }
* { box-sizing: border-box; }
/* hidden の印を、display を指定した要素（詳細の覆い・タブなど）でも必ず効かせる */
[hidden] { display: none !important; }
body { margin:0; font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; color:var(--fg); background:var(--bg); font-size:14px; }
.bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:8px 16px; background:#f6f8fa; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-size:15px; }
.tabs { display:flex; gap:4px; flex-wrap:wrap; }
.tabs button { border:1px solid var(--line); background:#fff; padding:6px 10px; border-radius:6px; cursor:pointer; }
.tabs button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.spacer { flex:1; }
.who, .muted { color:var(--muted); }
.notice { padding:8px 16px; background:var(--warn); border-bottom:1px solid var(--line); }
main { padding:12px 16px; }
button, input, select, textarea { font:inherit; }
.btn { border:1px solid var(--accent); background:var(--accent); color:#fff; padding:6px 12px; border-radius:6px; cursor:pointer; }
.btn.sub { background:#fff; color:var(--accent); }
.list { width:100%; border-collapse:collapse; }
.list th, .list td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; white-space:nowrap; }
.list tr.row { cursor:pointer; }
.list tr.row:hover { background:#f6f8fa; }
.section-title { margin:16px 0 8px; font-size:15px; }
.search { width:100%; max-width:480px; padding:8px; border:1px solid var(--line); border-radius:6px; }
.detail { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.35); display:flex; justify-content:flex-end; }
.detail .panel { width:min(720px,100%); height:100%; overflow:auto; background:#fff; padding:16px; }
.detail h2 { margin:0 0 4px; font-size:17px; }
.detail fieldset { border:1px solid var(--line); border-radius:8px; margin:12px 0; padding:8px 12px; }
.detail legend { font-weight:600; padding:0 4px; }
.field { display:grid; grid-template-columns: 160px 1fr; gap:8px; align-items:center; padding:4px 0; border-bottom:1px dashed #eee; }
.field label { color:var(--muted); font-size:13px; }
.field .ro { overflow-wrap:anywhere; }
.field input[type=text], .field textarea, .field select { width:100%; padding:6px; border:1px solid var(--line); border-radius:6px; }
.field .msg { grid-column: 2; font-size:12px; }
.field.changed { background:var(--warn); }
.field.error .msg { color:#cf222e; }
.field.saved .msg { color:#1a7f37; }
@media (max-width: 600px) { .field { grid-template-columns: 1fr; } .field .msg { grid-column:1; } .list .wide { display:none; } }
.master-wrap { overflow:auto; height: calc(100vh - 150px); border:1px solid var(--line); }
.master { border-collapse:separate; border-spacing:0; table-layout:fixed; }
.master th, .master td { border-right:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; padding:2px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; height:22px; background:#fff; }
.master thead th { position:sticky; z-index:3; }
.master thead tr.r1 th { top:0; background:#fff; color:#555; }
.master thead tr.r2 th { top:22px; background:var(--g2); }
.master thead tr.r3 th { top:44px; background:var(--head); color:var(--head-fg); cursor:pointer; }
.master thead tr.rf th { top:66px; background:#f6f8fa; }
.master thead tr.rf input { width:100%; font-size:11px; padding:1px 2px; border:1px solid var(--line); }
.master .frozen { position:sticky; z-index:2; }
.master thead .frozen { z-index:4; }
.master tr.cooloff td { background:#e0e0e0; }
.master tr.missing td { background:#fff2cc; }
.master td.paid-done { background:#d9ead3 !important; }
.master td.paid-open { background:#f4cccc !important; }
.master td.editable { cursor:text; }
.master td input, .master td select { width:100%; font-size:12px; }
.toolbar { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.admin-form { display:grid; gap:8px; max-width:640px; }
.admin-form .roles { display:flex; gap:12px; flex-wrap:wrap; }
.detail .toolbar.sticky { position:sticky; top:-16px; background:#fff; padding:8px 0; z-index:1; border-bottom:1px solid var(--line); }
.field .edit { display:flex; gap:6px; align-items:center; }
.field .edit input, .field .edit textarea { flex:1; }
.field .actions { display:flex; gap:4px; white-space:nowrap; }
.btn.small { padding:4px 8px; font-size:13px; }
.field.pending { background:var(--warn); }
.field.pending .msg { color:#9a6700; font-weight:600; }
.field.saving .msg { color:var(--muted); }
/* 担当一覧（担当セクションの入力欄つき） */
.sheet-wrap { overflow:auto; max-height: calc(100vh - 210px); border:1px solid var(--line); }
.sheet { border-collapse:separate; border-spacing:0; }
.sheet th, .sheet td { border-bottom:1px solid var(--line); border-right:1px solid #eee; padding:4px 6px; vertical-align:top; background:#fff; }
.sheet thead th { position:sticky; top:0; z-index:2; background:var(--head); color:var(--head-fg); font-weight:600; white-space:nowrap; font-size:12px; }
.sheet thead th small { display:block; font-weight:400; opacity:.75; }
.sheet .sticky-col { position:sticky; left:0; z-index:1; }
.sheet thead .sticky-col { z-index:3; }
.sheet td { min-width:110px; }
.sheet td .ro { white-space:nowrap; }
.cell-editor .edit { display:flex; gap:4px; align-items:center; }
.cell-editor input[type=text], .cell-editor select, .cell-editor textarea { width:100%; min-width:90px; padding:4px; border:1px solid var(--line); border-radius:4px; }
.cell-editor .actions { display:flex; gap:2px; }
.cell-editor .msg { display:block; font-size:11px; }
.cell-editor.compact .msg { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell-editor.pending { background:var(--warn); }
.cell-editor.pending .msg { color:#9a6700; font-weight:600; }
.cell-editor.saved .msg { color:#1a7f37; }
.cell-editor.error .msg, .cell-editor.changed .msg { color:#cf222e; }
.cell-editor.changed { background:var(--ng); }
.notice-inline { padding:8px; background:var(--warn); border-radius:6px; }
@media (max-width: 700px) {
  .sheet-wrap { max-height:none; border:0; }
  .sheet thead { display:none; }
  .sheet, .sheet tbody, .sheet tr, .sheet td { display:block; width:100%; }
  .sheet tr { border:1px solid var(--line); border-radius:8px; margin-bottom:12px; padding:6px; }
  .sheet td { border:0; min-width:0; padding:4px 0; }
  .sheet td::before { content: attr(data-label); display:block; font-size:12px; color:var(--muted); }
  .sheet .sticky-col { position:static; font-weight:600; }
  .cell-editor.compact .msg { max-width:none; white-space:normal; }
}
/* ログインの画面 */
.login { max-width:420px; margin:40px auto; }
.login h1 { font-size:20px; text-align:center; }
.login-form { display:grid; gap:12px; }
.login-form label { display:grid; gap:4px; font-size:13px; color:var(--muted); }
.login-form input { padding:10px; border:1px solid var(--line); border-radius:6px; font-size:16px; }
.login-msg { min-height:1.4em; color:#cf222e; margin:0; }
.login .or { text-align:center; margin:16px 0 8px; }
.login p:last-child { text-align:center; }
.issued .password { font-family: ui-monospace, Menlo, monospace; font-size:20px; letter-spacing:1px; }