/*
 * common.css - サイト共通スタイル (トップページ・全ツールで読み込む)
 * 追加理由(2026-11-12): トップと各ツールのデザインを揃え、配色を1か所で変更できるようにするため。
 * 配色は後日決定予定。色を変えるときは :root の変数だけを編集すること。
 */
:root {
  /* --- 配色(仮)。決定後にここだけ差し替える --- */
  --site-bg: #f8f9fa;
  --site-surface: #ffffff;
  --site-text: #212529;
  --site-muted: #6c757d;
  --site-accent: #0d6efd;
  --site-border: #dee2e6;
}

body {
  background: var(--site-bg);
  color: var(--site-text);
}

/* 本文幅。スマホは画面幅いっぱい、PCは読みやすい幅で中央寄せ */
.site-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}

.site-card {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: .5rem;
}

.site-muted {
  color: var(--site-muted);
}

/* ツールリスト(js/tools.js が生成する要素) */
.tool-card {
  display: block;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}
.tool-card:hover {
  border-color: var(--site-accent);
}
.tool-card .bi {
  color: var(--site-accent);
}