/* 全画面共通のCSS変数・基礎スタイル（モック各画面の<style>先頭部分を抽出） */
:root {
  --bg-base: oklch(0.16 0.012 290);
  --bg-panel: oklch(0.205 0.016 290);
  --bg-panel-2: oklch(0.255 0.02 288);
  --bg-hover: oklch(0.29 0.022 288);
  --border: oklch(0.34 0.02 288);
  --text-primary: oklch(0.95 0.008 90);
  --text-secondary: oklch(0.68 0.02 288);
  --text-dim: oklch(0.52 0.018 288);
  --gold: oklch(0.80 0.13 85);
  --gold-dim: oklch(0.55 0.09 85);
  --purple: oklch(0.62 0.13 300);
  --success: oklch(0.72 0.13 150);
  --warning: oklch(0.78 0.14 70);
  --danger: oklch(0.64 0.18 25);
  --navy: oklch(0.78 0.10 230);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-dim); }
.serif { font-family: 'Shippori Mincho', 'Noto Serif JP', serif; }
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: oklch(0.18 0.02 90);
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .12s ease;
  font-family: inherit;
}
.btn-gold:hover { filter: brightness(1.08); }
.btn-outline {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bg-panel-2); border-radius: 4px; }
.filter-input, .filter-select {
  width: 100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 11.5px;
  color: var(--text-primary);
  font-family: inherit;
}
.filter-input::placeholder { color: var(--text-dim); }
.filter-input:focus, .filter-select:focus { outline: none; border-color: var(--gold-dim); }
.filter-select { cursor: pointer; }
.filter-reset { font-size: 11.5px; color: var(--gold-dim); cursor: pointer; white-space: nowrap; }
.filter-reset:hover { color: var(--gold); }
.error-message { color: var(--danger); font-size: 12.5px; margin-top: 10px; }