/* 農業用ドローン一覧のスタイル。
   ★ 姉妹サイトのCSSを流用していない（過去に流用ファイルの痕跡が本番に出たため）★
   色は :root と :root[data-theme="dark"] の2ブロックだけで持つ。
   ダークの地は姉妹サイト共通の紺 #1a2a4a（theme.js の DARK_BG と揃えること）。 */

:root {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --ink: #1c2430;
  --ink-weak: #5a6676;
  --line: #d7dee7;
  --line-soft: #e7ecf2;
  --accent: #2f6b4f;          /* 田畑の緑。装飾に使わず、印と押下だけに使う */
  --accent-ink: #ffffff;
  --seed-bg: #f1f6f2;
  --tag-bg: #eef2f7;
}

:root[data-theme="dark"] {
  --bg: #1a2a4a;
  --panel: #21335a;
  --ink: #e8edf5;
  --ink-weak: #a8b6cc;
  --line: #3a4e78;
  --line-soft: #2c4069;
  --accent: #7fc0a0;
  --accent-ink: #12203a;
  --seed-bg: #223d52;
  --tag-bg: #2b3f6b;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
               "Noto Sans JP", "Yu Gothic UI", sans-serif;
  line-height: 1.75;
  font-size: 16px;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 20px 16px 64px; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

.home-link {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-weak);
  text-decoration: none;
  margin-bottom: 18px;
}
.home-link:hover { text-decoration: underline; }

.page-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.emblem { flex: 0 0 auto; }
:root[data-theme="dark"] .emblem-light { display: none; }
:root:not([data-theme="dark"]) .emblem-dark { display: none; }
.ph-body { min-width: 0; }

h1 { font-size: 25px; margin: 0 0 6px; line-height: 1.4; letter-spacing: .01em; }
h2 { font-size: 18px; margin: 34px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.lead { margin: 0; color: var(--ink-weak); font-size: 14px; }

.notice {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 14px 16px;
  font-size: 14px;
  margin: 18px 0;
}
.notice strong { font-weight: 700; }

.terms { margin: 0; padding-left: 1.2em; font-size: 15px; }
.terms li { margin: 4px 0; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 16px;
}

.filters { display: grid; gap: 12px; }
.fgroup { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fgroup > span { font-size: 13px; color: var(--ink-weak); min-width: 7.5em; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opts button {
  font: inherit;
  font-size: 13px;
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.opts button:hover { border-color: var(--accent); }
.opts button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.count { margin: 12px 0 0; font-size: 13px; color: var(--ink-weak); }

.legend { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-weak); margin: 14px 0; }
.legend-swatch {
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: 4px;
  background: var(--seed-bg); border: 1px solid var(--line);
}

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th {
  position: sticky; top: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--ink-weak);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr.is-seeding { background: var(--seed-bg); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.maker { color: var(--ink-weak); white-space: nowrap; }
.model { font-weight: 700; }
.tagline { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--tag-bg); color: var(--ink-weak); }
.dash { color: var(--ink-weak); }
td.src a { font-size: 13px; white-space: nowrap; }

/* 狭い画面では見出し行を消し、1機ぶんをカードとして縦に積む */
@media (max-width: 700px) {
  .table-scroll { border: none; background: transparent; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 4px 2px;
  }
  tbody tr.is-seeding { background: var(--seed-bg); }
  td { border-bottom: none; padding: 4px 12px; display: flex; gap: 12px; justify-content: space-between; }
  td::before { content: attr(data-label); color: var(--ink-weak); font-size: 12px; flex: 0 0 auto; }
  td.model-cell { display: block; padding-top: 8px; }
  td.model-cell::before { display: none; }
  td.maker { padding-top: 8px; }
  td.num { text-align: right; }
}

.theme-switch { display: flex; gap: 6px; justify-content: flex-end; margin: 30px 0 0; }
.theme-switch button {
  font: inherit; font-size: 12px; padding: 3px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-weak); cursor: pointer;
}
.theme-switch button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

footer { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.brand-line { color: var(--ink-weak); text-decoration: none; }
.brand-line:hover { text-decoration: underline; }

/* 説明ページ用 */
.prose { font-size: 15px; }
.prose h2 { margin-top: 30px; }
.prose p { margin: 12px 0; }
.prose table { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; margin: 14px 0; }

/* 型式そのものが公式ページへのリンク（出典の列は置かない） */
a.model { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
a.model:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* パンくず・ページ間のリンク */
.crumbs { font-size: 13px; color: var(--ink-weak); margin-bottom: 18px; }
.crumbs a { color: var(--ink-weak); }
.siblings { margin-top: 34px; }
.terms-link { font-size: 15px; margin: 18px 0; }