/**
 * 全ページ共通の ヘッダーとナビゲーション。
 *
 * 色は各ページが定義している CSS 変数（--bg, --surface, --border, --text,
 * --dim, --accent）をそのまま使うので、このファイルは配色を持ちません。
 *
 * 構成は 2段:
 *   1段目 … ロゴ＋サイト名（about.html へ）／ページ固有の表示／テーマ切替
 *   2段目 … 7ページを行き来する ナビゲーション
 */

/* ── 1段目: ブランド ── */
header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
header .brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
}
header .brand .logo { width: 32px; height: 32px; object-fit: contain; }
header .brand .title { font-size: 16px; font-weight: 600; }
header .brand .about {
  font-size: 10px; color: var(--dim); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 7px;
}
header .brand:hover .title { color: var(--accent); }
header .brand:hover .about { border-color: var(--accent); color: var(--accent); }
header .spacer { margin-left: auto; }
header .status { font-size: 12px; color: var(--dim); }
header #theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--text); font-family: inherit;
}
header #theme-toggle:hover { border-color: var(--accent); }

/* ── 2段目: ナビゲーション ── */
#sitenav {
  display: flex; gap: 2px; padding: 0 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: thin;
}
#sitenav a {
  flex: 0 0 auto; padding: 11px 14px; font-size: 13px;
  color: var(--dim); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
#sitenav a:hover { color: var(--text); }
#sitenav a.active {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 600;
}

@media (max-width: 640px) {
  header { padding: 10px 14px; }
  header .brand .title { font-size: 15px; }
  header .status { font-size: 11px; }
  #sitenav { padding: 0 6px; }
  #sitenav a { padding: 10px 10px; font-size: 12px; }
}