/* 自治体ファクトマップ — 最小エディトリアル CSS */

:root {
  --text: #1a1a1a;
  --text-muted: #666;
  --bg: #fafafa;
  --surface: #fff;
  --border: #e5e5e5;
  --link: #0a5ca8;
  --link-hover: #073d70;
  --container-w: 960px;

  /* カテゴリ色（Phase 12-D で集約）。
     既存 4 つの tag コンテキスト（home-category-tag / municipality-card-category /
     category-tag / category-index-tag）はすべて同じ色を共有。新カテゴリ追加時は
     ここに 1 行（bg/fg のペア）を増やすだけで全 tag 表示に反映される。 */
  --cat-default-bg: #eef2f6;
  --cat-default-fg: #2c3e50;
  --cat-metropolitan-bg: #e6edf5;        --cat-metropolitan-fg: #1f4e79;
  --cat-prefectural_capital-bg: #eef0f5; --cat-prefectural_capital-fg: #3d4f6b;
  --cat-designated_city-bg: #e8eef5;     --cat-designated_city-fg: #2c4a6e;
  --cat-core_city-bg: #f0eef5;           --cat-core_city-fg: #553d6b;
  --cat-city_general-bg: #f0f0f0;        --cat-city_general-fg: #4a4a4a;
  --cat-special_ward-bg: #f5e8e8;        --cat-special_ward-fg: #6b3d3d;
  --cat-ward-bg: #e8eef0;                --cat-ward-fg: #2c4a55;
  --cat-town_general-bg: #f0f2ed;        --cat-town_general-fg: #5a644a;
  --cat-village_general-bg: #f2efe8;     --cat-village_general-fg: #6b5a3d;
  --cat-immigration_popular-bg: #ecf2e8; --cat-immigration_popular-fg: #4a6e2e;
  --cat-population_decline-bg: #f3ede4;  --cat-population_decline-fg: #8a6f3a;

  /* Chart.js のパレット（Phase 12-c で集約）。
     各 chart partial は window.chartPalette 経由で参照。
     詳細は themes/facts-theme/layouts/_default/city.html の <script> ブロック。 */
  --chart-primary: #1f4e79;
  --chart-primary-fill: rgba(31, 78, 121, 0.08);
  --chart-secondary: #5176a0;
  --chart-secondary-fill: rgba(81, 118, 160, 0.06);
  --chart-tertiary: #94a8c0;
  --chart-tick: #6e7984;
  --chart-grid: #eaeef2;
  --chart-legend-label: #3a444f;

  /* Heatmap quartiles（Phase 13-2 で変数化）。compare.html の階調に使用。 */
  --heatmap-q1-bg: #eef2f6; --heatmap-q1-fg: #2c3e50;
  --heatmap-q2-bg: #c8d4e1; --heatmap-q2-fg: #2c3e50;
  --heatmap-q3-bg: #7e9bbe; --heatmap-q3-fg: #fff;
  --heatmap-q4-bg: #1f4e79; --heatmap-q4-fg: #fff;
  --heatmap-na-bg: #fafafa; --heatmap-na-fg: #aaa;

  /* Light gray surfaces (code blocks, compare-table thead, etc.) */
  --surface-alt: #f6f6f6;

  /* Data-status variants (Phase 6 で 3 階調確立、Phase 13-2 で変数化) */
  --status-neutral-bg: #f6f6f6;     --status-neutral-border: #c4c4c4;
  --status-info-bg: #f0f5fa;        --status-info-border: #94b8db;
  --status-attention-bg: #faf6f0;   --status-attention-border: #c9a227;
  --status-attention-title: #6e5410;
}

/* ============================================================
 * Dark mode（Phase 13-2 で OS 追従、Phase 15-3 でユーザー切替対応）
 * 適用ルール:
 *   1. ユーザーが明示的に dark を選んだ場合 → :root[data-theme="dark"]
 *   2. OS が dark で、ユーザーが明示的に light を選んでいない場合
 *      → @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
 * 49 変数を上書きするだけで全ページ・全グラフ・全カテゴリが追従する。
 * ============================================================ */

/* 共通: dark mode で適用される変数群（mixin 代わりにセレクタ別に同内容を書く） */
:root[data-theme="dark"] {
  /* 基本色: 黒に振りすぎない（ダーク系エディトリアル）。 */
  --text: #e5e7eb;
  --text-muted: #9ca3af;
  --bg: #15161a;
  --surface: #1d1f24;
  --border: #2d3138;
  --link: #7eb6e8;
  --link-hover: #a4ccef;

  --cat-default-bg: #2a2e34;            --cat-default-fg: #cfd6df;
  --cat-metropolitan-bg: #1a2e44;       --cat-metropolitan-fg: #b9d3ee;
  --cat-prefectural_capital-bg: #232838; --cat-prefectural_capital-fg: #c5cee0;
  --cat-designated_city-bg: #1d2a40;    --cat-designated_city-fg: #bdcfe8;
  --cat-core_city-bg: #2c2438;          --cat-core_city-fg: #d2c0e0;
  --cat-city_general-bg: #2a2a2a;       --cat-city_general-fg: #c8c8c8;
  --cat-special_ward-bg: #38201f;       --cat-special_ward-fg: #e6b9b8;
  --cat-ward-bg: #1d2c30;               --cat-ward-fg: #b9d3da;
  --cat-town_general-bg: #252e22;       --cat-town_general-fg: #c4d3b3;
  --cat-village_general-bg: #2e2820;    --cat-village_general-fg: #d6c69e;
  --cat-immigration_popular-bg: #1f2c19; --cat-immigration_popular-fg: #b8d6a4;
  --cat-population_decline-bg: #2e2615; --cat-population_decline-fg: #d8be7e;

  --chart-primary: #7eb6e8;
  --chart-primary-fill: rgba(126, 182, 232, 0.12);
  --chart-secondary: #a4ccef;
  --chart-secondary-fill: rgba(164, 204, 239, 0.10);
  --chart-tertiary: #c8d4e1;
  --chart-tick: #9ca3af;
  --chart-grid: #2a2e34;
  --chart-legend-label: #cfd6df;

  --heatmap-q1-bg: #1f2226; --heatmap-q1-fg: #9ca3af;
  --heatmap-q2-bg: #2c3a48; --heatmap-q2-fg: #c5cee0;
  --heatmap-q3-bg: #4a6b8a; --heatmap-q3-fg: #f0f4f8;
  --heatmap-q4-bg: #7eb6e8; --heatmap-q4-fg: #15161a;
  --heatmap-na-bg: #1a1c20; --heatmap-na-fg: #4a5260;

  --surface-alt: #1a1c20;

  --status-neutral-bg: #1f2226;     --status-neutral-border: #3a4048;
  --status-info-bg: #1a2738;        --status-info-border: #3a6090;
  --status-attention-bg: #2a2418;   --status-attention-border: #8a6f3a;
  --status-attention-title: #d8be7e;
}

/* OS が dark で、ユーザーが light に明示 override していない場合も同じ変数を適用 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #e5e7eb;
    --text-muted: #9ca3af;
    --bg: #15161a;
    --surface: #1d1f24;
    --border: #2d3138;
    --link: #7eb6e8;
    --link-hover: #a4ccef;

    --cat-default-bg: #2a2e34;            --cat-default-fg: #cfd6df;
    --cat-metropolitan-bg: #1a2e44;       --cat-metropolitan-fg: #b9d3ee;
    --cat-prefectural_capital-bg: #232838; --cat-prefectural_capital-fg: #c5cee0;
    --cat-designated_city-bg: #1d2a40;    --cat-designated_city-fg: #bdcfe8;
    --cat-core_city-bg: #2c2438;          --cat-core_city-fg: #d2c0e0;
    --cat-city_general-bg: #2a2a2a;       --cat-city_general-fg: #c8c8c8;
    --cat-special_ward-bg: #38201f;       --cat-special_ward-fg: #e6b9b8;
    --cat-ward-bg: #1d2c30;               --cat-ward-fg: #b9d3da;
    --cat-town_general-bg: #252e22;       --cat-town_general-fg: #c4d3b3;
    --cat-village_general-bg: #2e2820;    --cat-village_general-fg: #d6c69e;
    --cat-immigration_popular-bg: #1f2c19; --cat-immigration_popular-fg: #b8d6a4;
    --cat-population_decline-bg: #2e2615; --cat-population_decline-fg: #d8be7e;

    --chart-primary: #7eb6e8;
    --chart-primary-fill: rgba(126, 182, 232, 0.12);
    --chart-secondary: #a4ccef;
    --chart-secondary-fill: rgba(164, 204, 239, 0.10);
    --chart-tertiary: #c8d4e1;
    --chart-tick: #9ca3af;
    --chart-grid: #2a2e34;
    --chart-legend-label: #cfd6df;

    --heatmap-q1-bg: #1f2226; --heatmap-q1-fg: #9ca3af;
    --heatmap-q2-bg: #2c3a48; --heatmap-q2-fg: #c5cee0;
    --heatmap-q3-bg: #4a6b8a; --heatmap-q3-fg: #f0f4f8;
    --heatmap-q4-bg: #7eb6e8; --heatmap-q4-fg: #15161a;
    --heatmap-na-bg: #1a1c20; --heatmap-na-fg: #4a5260;

    --surface-alt: #1a1c20;

    --status-neutral-bg: #1f2226;     --status-neutral-border: #3a4048;
    --status-info-bg: #1a2738;        --status-info-border: #3a6090;
    --status-attention-bg: #2a2418;   --status-attention-border: #8a6f3a;
    --status-attention-title: #d8be7e;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Helvetica Neue", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--link-hover); }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
.site-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
}
.site-nav a {
  margin-left: 1rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}
.site-nav a:hover { color: var(--link); }

/* Phase 15-3: dark mode toggle button */
.theme-toggle {
  margin-left: 1rem;
  padding: 0.2em 0.5em;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--link); color: var(--link); }
.theme-toggle:focus { outline: 2px solid var(--link); outline-offset: 2px; }
.theme-toggle-icon { display: inline-block; line-height: 1; }

/* Main */
.site-main { padding: 2rem 0 4rem; min-height: 60vh; }

/* Hero (home) */
.hero { padding: 1.5rem 0 2.5rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.hero-title { font-size: 1.9rem; margin: 0 0 0.5rem; line-height: 1.4; }
.hero-lead { color: var(--text-muted); margin: 0; font-size: 1rem; }

/* ============================================================
 * Phase 8: Home / Pref / Card / Compare
 * ============================================================ */

/* Home sections */
.home-section-header { margin: 2.5rem 0 1rem; }
.home-section-title { font-size: 1.3rem; margin: 0 0 0.3rem; }
.home-section-desc { color: var(--text-muted); margin: 0; font-size: 0.95rem; }
.home-cities { margin-bottom: 2rem; }
.home-category-block { margin: 1.5rem 0 2rem; }
.home-category-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  margin: 0 0 0.75rem;
}
.home-category-tag {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--cat-default-bg);
  color: var(--cat-default-fg);
}
.home-category-count { color: var(--text-muted); font-size: 0.85rem; font-weight: normal; }
.home-category-more { margin: 0.5rem 0 0; font-size: 0.9rem; }
.home-category-more a { color: var(--link); text-decoration: none; }
.home-category-more a:hover { text-decoration: underline; }

.home-cta { margin: 2.5rem 0 2rem; padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; }
.home-cta .home-section-title { font-size: 1.1rem; margin: 0 0 0.5rem; }
.home-cta p { margin: 0.4rem 0; }
.cta-link { font-weight: 600; }

/* Municipality grid + card */
.municipality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 0;
}
.municipality-card {
  display: block;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.municipality-card:hover {
  border-color: var(--link);
  transform: translateY(-1px);
}
.municipality-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.municipality-card-pref {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.municipality-card-category {
  font-size: 0.7rem;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--cat-default-bg);
  color: var(--cat-default-fg);
  white-space: nowrap;
}
.municipality-card-title {
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  color: var(--text);
}
.municipality-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}
.municipality-card-sep { margin: 0 0.35rem; }
.municipality-card-code { font-family: monospace; }

/* Pref page */
.pref-page .page-header { padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.page-section-h2 { font-size: 1.15rem; margin: 1.5rem 0 0.75rem; }

/* Compare page */
.compare-page .page-header { padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.compare-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.compare-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
  background: var(--surface);
}
.compare-table th,
.compare-table td {
  padding: 0.5rem 0.55rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.compare-table th:last-child,
.compare-table td:last-child { border-right: 0; }
.compare-table thead th {
  background: var(--surface-alt);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  vertical-align: bottom;
}
.compare-corner { text-align: left; }
.compare-city-th { text-align: center; padding: 0.6rem 0.5rem; }
.compare-city-th a { color: var(--text); text-decoration: none; display: block; font-weight: 600; }
.compare-city-th a:hover { color: var(--link); text-decoration: underline; }
.compare-city-pref {
  display: block;
  font-size: 0.7rem;
  font-weight: normal;
  color: var(--text-muted);
}
/* Phase 16-6: 横スクロール時に左 1 列（指標名）と上 1 行（自治体名）を sticky */
.compare-corner,
.compare-row-label {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--surface-alt);
  font-weight: 600;
  color: var(--text);
  border-right: 2px solid var(--border);   /* sticky 列の境界をやや強調 */
  min-width: 12em;
}
.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;   /* 角は最前面 */
}
.compare-corner { z-index: 3; }   /* 左上の交点は最前面（縦スクロール + 横スクロール両方で前に） */
.compare-cell { font-variant-numeric: tabular-nums; }
.compare-cell-value { display: inline-block; }

/* Heatmap quartiles（Phase 13-2 で CSS 変数経由に） */
.heatmap-q1 { background: var(--heatmap-q1-bg); color: var(--heatmap-q1-fg); }
.heatmap-q2 { background: var(--heatmap-q2-bg); color: var(--heatmap-q2-fg); }
.heatmap-q3 { background: var(--heatmap-q3-bg); color: var(--heatmap-q3-fg); }
.heatmap-q4 { background: var(--heatmap-q4-bg); color: var(--heatmap-q4-fg); }
.heatmap-na { background: var(--heatmap-na-bg); color: var(--heatmap-na-fg); }

.compare-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0 1rem; font-size: 0.8rem; color: var(--text-muted); }
.compare-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.compare-legend-swatch {
  display: inline-block;
  width: 1.2em;
  height: 0.85em;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.compare-note { font-size: 0.85rem; color: var(--text-muted); margin: 0.5rem 0 1.5rem; }

/* Footer nav (Phase 8) */
.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0 0 0.8rem;
  padding: 0.5rem 1rem;
}
.site-footer-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}
.site-footer-nav a:hover { color: var(--link); }

@media (max-width: 600px) {
  .municipality-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .municipality-card { padding: 0.8rem; }
  .municipality-card-title { font-size: 0.95rem; }
  .compare-table { font-size: 0.78rem; }
  .compare-table th, .compare-table td { padding: 0.4rem 0.45rem; }
  .home-section-title { font-size: 1.1rem; }
}
@media (max-width: 400px) {
  .municipality-grid { grid-template-columns: 1fr; }
}

/* Status card */
.status-card {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--link);
  border-radius: 2px;
}
.status-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.25rem;
  letter-spacing: 0.05em;
}
.status-body { margin: 0; font-size: 0.95rem; }

/* Page */
.page-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.page-title { font-size: 1.7rem; margin: 0 0 0.4rem; }
.page-description { color: var(--text-muted); margin: 0; }
.page-content h2 { margin-top: 2rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.page-content h3 { margin-top: 1.5rem; }
.page-list { margin-top: 2rem; }
.page-list ul { padding-left: 1.5rem; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 4rem;
  padding: 1.5rem 0;
}
.site-footer-inner { padding: 0.5rem 1rem; }
.footer-meta {
  margin: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.footer-disclaimer { font-size: 0.8rem; }

/* Responsive */
@media (max-width: 600px) {
  .hero-title { font-size: 1.55rem; }
  .page-title { font-size: 1.4rem; }
  .site-header-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .site-nav a:first-child { margin-left: 0; }
}

/* ============================================================
 * City page (自治体詳細ページ)
 * ============================================================ */

.city-page { padding-top: 1rem; }
.city-header { padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.breadcrumb { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.5rem; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--link); text-decoration: underline; }
.breadcrumb-sep { margin: 0 0.4rem; color: var(--border); }
.city-title { font-size: 1.85rem; margin: 0 0 0.5rem; }
.city-meta { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.city-meta-sep { margin: 0 0.5rem; color: var(--border); }

/* Data sections */
.data-section {
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.section-header { margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.section-title { font-size: 1.2rem; margin: 0; }
.data-subsection { margin: 1.5rem 0; }
.data-subsection:first-child { margin-top: 0; }
.data-subsection-title { font-size: 1.0rem; margin: 0 0 0.5rem; color: var(--text); }

/* Data meta (取得日 + 次回更新予定) */
.data-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.data-meta-sep { margin: 0 0.4rem; color: var(--border); }

/* Source inline (各セクション末尾) */
.data-source-inline {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}
.data-source-id { font-family: monospace; font-size: 0.75rem; }

/* Data status (取得待ち / 取得不可 / 親自治体参照 / 取得失敗) — Phase 6 で 3 variant に統一 */
.data-status {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 3px;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
}
.data-status p { margin: 0; }
.data-status p + p { margin-top: 0.4rem; }
.data-status-title { font-weight: 600; color: var(--text); }
.data-status-explanation { color: var(--text-muted); }
.data-status-hint { color: var(--text-muted); font-size: 0.85rem; }
.data-status-hint a { color: var(--link); }
.data-status-next {
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
  padding-top: 0.4rem;
  margin-top: 0.6rem !important;
}

/* variant: neutral（取得待ち / 取得不可） — グレー系で控えめ */
.data-status-neutral {
  background: var(--status-neutral-bg);
  border-left-color: var(--status-neutral-border);
}

/* variant: info（親自治体データ参照） — 抑えめ青系 */
.data-status-info {
  background: var(--status-info-bg);
  border-left-color: var(--status-info-border);
}

/* variant: attention（取得失敗） — 抑えめ茶系（赤・黄を避けてエディトリアル感維持） */
.data-status-attention {
  background: var(--status-attention-bg);
  border-left-color: var(--status-attention-border);
}
.data-status-attention .data-status-title { color: var(--status-attention-title); }

/* Basic info dl */
.basic-info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.basic-info dt { color: var(--text-muted); font-weight: normal; font-size: 0.9rem; }
.basic-info dd { margin: 0; }
.basic-info-note { color: var(--text-muted); font-size: 0.85rem; }

/* Finance figures */
.finance-figures { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 1rem 0; }
.finance-figures dt { color: var(--text-muted); font-weight: normal; }
.finance-figures dd { margin: 0; }
.finance-value { font-size: 1.6rem; font-weight: 600; color: var(--link); }

/* 関連自治体セクション（Phase 16-2） */
.section-related .municipality-grid { margin-top: 0; }
.related-cities-more { margin: 1rem 0 0; font-size: 0.9rem; }
.related-cities-more a { font-weight: 600; }

/* 人口推移 単年フォールバック表示（Phase 14-1） */
.population-single { margin: 1rem 0; padding: 1rem 1.25rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 4px; }
.population-single-year { margin: 0 0 0.3rem; font-size: 0.85rem; color: var(--text-muted); }
.population-single-value { margin: 0; font-size: 1.8rem; font-weight: 600; color: var(--link); font-variant-numeric: tabular-nums; }
.population-single-unit { font-size: 0.95rem; font-weight: normal; color: var(--text); margin-left: 0.25em; }
.population-single-note { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 0.5rem; }

/* Sources list */
.sources-note { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 0.75rem; }
.sources-list { padding-left: 1.2rem; margin: 0; }
.sources-list-item { font-size: 0.9rem; margin: 0.4rem 0; }
.sources-key { font-weight: 600; }
.sources-cycle { color: var(--text-muted); font-size: 0.85rem; }
.sources-status { color: var(--text-muted); font-size: 0.8rem; margin-left: 0.4rem; }

/* Charts */
.chart-container { position: relative; height: 280px; margin: 0.75rem 0; }
.chart-container-pie { height: 240px; max-width: 480px; }
.chart-container-bar { height: 240px; max-width: 600px; }

/* Furusato section: 2 グラフ縦並びレイアウト */
.furusato-chart-pair { display: flex; flex-direction: column; gap: 1rem; margin: 0.75rem 0; }
.furusato-chart-block .chart-container { height: 220px; margin: 0.25rem 0; }
.furusato-chart-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.25rem;
  letter-spacing: 0.02em;
}
.furusato-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0;
  font-style: italic;
}

/* ============================================================
 * /docs/data-sources/ ページ
 * ============================================================ */

.data-sources-table-section { margin: 2rem 0; }
.data-sources-layer-heading {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.data-sources-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.data-sources-table th,
.data-sources-table td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-sources-table thead th {
  background: var(--surface-alt);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.data-sources-table tbody tr:last-child td { border-bottom: 0; }
.docs-back { margin-top: 2rem; font-size: 0.9rem; }

/* ============================================================
 * Mobile overrides — Phase 6 で iPhone 想定の幅 (375-414px) を精査
 * ============================================================ */

@media (max-width: 720px) {
  .container { padding: 0 0.75rem; }
}

@media (max-width: 600px) {
  /* 既存 */
  .city-title { font-size: 1.45rem; }
  .data-section { padding: 0.9rem; }
  .basic-info, .finance-figures { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .basic-info dt, .finance-figures dt { margin-top: 0.5rem; }
  .chart-container { height: 240px; }

  /* Phase 6 追加: 文字密度の高いページでも詰まらないよう調整 */
  .city-meta { font-size: 0.85rem; line-height: 1.6; }
  .city-meta-sep { margin: 0 0.35rem; }
  .breadcrumb { font-size: 0.8rem; }
  .data-status { padding: 0.75rem 0.85rem; font-size: 0.88rem; }
  .data-status-title { font-size: 0.95rem; }
  .data-source-inline { font-size: 0.75rem; line-height: 1.6; }
  .finance-value { font-size: 1.4rem; }
  .data-subsection-title { font-size: 0.95rem; }
  .data-sources-table { font-size: 0.82rem; }
  .data-sources-table th,
  .data-sources-table td { padding: 0.5rem 0.35rem; }
}

@media (max-width: 400px) {
  /* iPhone SE / mini クラス（375px）でグラフが極端に細くならないように */
  .chart-container { height: 220px; }
  .chart-container-pie { height: 220px; }
  .chart-container-bar { height: 220px; }
  .city-title { font-size: 1.3rem; }
  .city-meta { font-size: 0.8rem; }
}

/* ============================================================
 * /all-cities/ カテゴリ index と各カテゴリページ（Phase 11）
 * ============================================================ */

.page-title-count {
  margin-left: 0.6rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: normal;
}
.category-tag {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--cat-default-bg);
  color: var(--cat-default-fg);
  vertical-align: middle;
}

.category-index {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}
.category-index-item { margin: 0; }
.category-index-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.category-index-link:hover {
  border-color: var(--link);
  transform: translateY(-1px);
}
.category-index-tag {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--cat-default-bg);
  color: var(--cat-default-fg);
}
.category-index-count {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Phase 12-D: 全 4 つの tag コンテキストに共通のカテゴリ色を適用。
   :where() で specificity を 0 に保ち、各 base 規則を上書きする際は通常の単一クラスで足りる。
   新カテゴリ追加時は :root の --cat-{name}-bg / -fg を増やし、ここに 1 行追加するだけ。 */
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-metropolitan         { background: var(--cat-metropolitan-bg);        color: var(--cat-metropolitan-fg); }
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-prefectural_capital  { background: var(--cat-prefectural_capital-bg); color: var(--cat-prefectural_capital-fg); }
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-designated_city      { background: var(--cat-designated_city-bg);     color: var(--cat-designated_city-fg); }
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-core_city            { background: var(--cat-core_city-bg);           color: var(--cat-core_city-fg); }
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-city_general         { background: var(--cat-city_general-bg);        color: var(--cat-city_general-fg); }
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-special_ward         { background: var(--cat-special_ward-bg);        color: var(--cat-special_ward-fg); }
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-ward                 { background: var(--cat-ward-bg);                color: var(--cat-ward-fg); }
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-town_general         { background: var(--cat-town_general-bg);        color: var(--cat-town_general-fg); }
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-village_general      { background: var(--cat-village_general-bg);     color: var(--cat-village_general-fg); }
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-immigration_popular  { background: var(--cat-immigration_popular-bg); color: var(--cat-immigration_popular-fg); }
:where(.home-category-tag, .municipality-card-category, .category-tag, .category-index-tag).category-population_decline   { background: var(--cat-population_decline-bg);  color: var(--cat-population_decline-fg); }

/* ============================================================
 * /all-cities/ 検索 UI（Phase 13-1）
 * ============================================================ */

.city-search {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.city-search-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.city-search-input {
  width: 100%;
  padding: 0.55rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
}
.city-search-input:focus {
  outline: 2px solid var(--link);
  outline-offset: -1px;
  border-color: var(--link);
}
.city-search-status {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  min-height: 1.2em;
}
.city-search-results {
  margin-top: 0.75rem;
  max-height: 60vh;
  overflow-y: auto;
}
.city-search-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.4rem;
}
.city-search-item { margin: 0; }
.city-search-link {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  text-decoration: none;
  color: var(--text);
}
.city-search-link:hover,
.city-search-link-active {
  border-color: var(--link);
  text-decoration: none;
}
.city-search-link-active {
  background: var(--surface);
  outline: 2px solid var(--link);
  outline-offset: -1px;
}
.city-search-pref {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.city-search-mark {
  background: var(--cat-population_decline-bg);
  color: var(--cat-population_decline-fg);
  padding: 0 0.1em;
  border-radius: 2px;
  font-weight: 600;
}
.city-search-name {
  flex: 1;
  font-size: 0.95rem;
}
.city-search-code {
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
}
/* Phase 16-5: /all-cities/{cat}/ の compact 表（30 件超） */
.all-cities-compact {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.all-cities-compact thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  padding: 0.5rem 0.6rem;
  background: var(--surface-alt);
}
.all-cities-compact tbody tr { border-bottom: 1px solid var(--border); }
.all-cities-compact tbody tr:hover { background: var(--surface-alt); }
.all-cities-compact td { padding: 0.4rem 0.6rem; vertical-align: baseline; }
.all-cities-compact .col-code { font-family: monospace; color: var(--text-muted); width: 5em; }
.all-cities-compact .col-pref { color: var(--text-muted); width: 7em; font-size: 0.85rem; }
.all-cities-compact .col-name a { font-weight: 600; }
.all-cities-compact .col-type { color: var(--text-muted); font-size: 0.85rem; width: 8em; }
@media (max-width: 600px) {
  .all-cities-compact { font-size: 0.85rem; }
  .all-cities-compact .col-code { width: 4.5em; }
  .all-cities-compact .col-pref { display: none; }   /* モバイルでは pref を隠して横幅確保 */
  .all-cities-compact .col-type { display: none; }
}

.all-cities-section-title {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}