:root {
  color-scheme: light dark;
  /* 丸ゴシックがある端末（iPhone・Mac など）では丸ゴシック、なければ標準のゴシック */
  font-family:
    "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Zen Maru Gothic", "M PLUS Rounded 1c", "BIZ UDPGothic",
    system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;

  --bg: #f8f4ee;
  --surface: #fffdfa;
  --surface-2: #f3ede4;
  --text: #3a332e;
  --muted: #7d7269;
  --border: #ebe2d6;
  --accent: #2b6f8f;
  --accent-soft: #e1eef4;
  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgb(80 60 40 / 0.05), 0 6px 20px rgb(80 60 40 / 0.06);

  /* 注意（位置の誤差が大きいとき）と、グラフの「いま」の線 */
  --risk-bg: #fff1dc;
  --risk-text: #7d4a07;
  --risk-icon: #df9220;
  /* エラーと、地図の十字 */
  --high-bg: #fde6e1;
  --high-text: #8f2a1e;
  --high-icon: #d65241;
  /* 色をつけない項目（ほぼすべて） */
  --info-bg: #f6f1ea;
  --info-icon: #a08f7e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1916;
    --surface: #26221e;
    --surface-2: #2e2924;
    --text: #f1eae2;
    --muted: #b4a99d;
    --border: #3b342e;
    --accent: #86c3dd;
    --accent-soft: #1b3440;
    --on-accent: #0c2430;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 20px rgb(0 0 0 / 0.25);

    --risk-bg: #3a2a13;
    --risk-text: #ffd59c;
    --risk-icon: #f0b25a;
    --high-bg: #3d1d19;
    --high-text: #ffbbb0;
    --high-icon: #f08a7c;
    --info-bg: #2e2924;
    --info-icon: #b4a99d;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
main, footer { max-width: 640px; margin: 0 auto; padding: 16px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; font-size: 0.85rem; color: var(--muted); }
.crumbs a { font-weight: 700; text-decoration: none; }
h1 { margin: 0; font-size: 1.6rem; line-height: 1.35; }
.reading { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.aliases { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.summary { margin: 12px 0 0; font-size: 1.05rem; font-weight: 700; }
.card { margin-top: 16px; padding: 16px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.card p { margin: 0 0 0.9em; }
.card p:last-child { margin-bottom: 0; }
figure { margin: 16px 0 0; }
figure svg { display: block; width: 100%; height: auto; border-radius: 18px; }
figcaption { margin-top: 6px; font-size: 0.8rem; color: var(--muted); }
.in-site { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--accent-soft); font-size: 0.92rem; }
.in-site a { font-weight: 700; }
h2 { margin: 24px 4px 8px; font-size: 1.05rem; }
.term-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.term-list a {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center; column-gap: 12px;
  padding: 10px 10px 10px 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none;
}
.term-list a:active { transform: scale(0.99); }
.term-list .thumb { display: block; width: 96px; height: 48px; border-radius: 10px; overflow: hidden; }
.term-list .thumb svg { display: block; width: 100%; height: 100%; }
.term-list .thumb .lbl { display: none; }
.term-list .text { min-width: 0; }
.term-list strong { display: block; color: var(--accent); }
.term-list .desc { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--muted); }
.term-list .more { display: block; margin-top: 4px; font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.term-list .chev { width: 18px; height: 18px; color: var(--muted); }
.note { margin-top: 24px; font-size: 0.8rem; color: var(--muted); }
.sources { margin-top: 16px; font-size: 0.8rem; color: var(--muted); }
.sources ul { margin: 4px 0 0; padding-left: 1.2em; }
.back { display: inline-block; margin-top: 16px; font-weight: 700; }

/* 図の色 */
.sky { fill: var(--surface-2); }
.sea { fill: var(--accent-soft); }
.ln { stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.thin { stroke-width: 1.5; }
.ln-f { fill: var(--text); }
.acc-f { fill: var(--accent); }
.acc-s { stroke: var(--accent); fill: none; stroke-linecap: round; }
.warm-f { fill: var(--risk-icon); }
.warm-s { stroke: var(--risk-icon); fill: none; stroke-linecap: round; }
.mute-f { fill: var(--border); }
.mute-s { stroke: var(--muted); fill: none; stroke-linecap: round; stroke-dasharray: 4 4; }
.bg-f { fill: var(--surface); }
.worm { stroke: #b0705a; stroke-width: 7; fill: none; stroke-linecap: round; }
.thin-worm { stroke-width: 3; stroke: #8a6a50; }
.lbl { fill: var(--muted); font-size: 11px; font-family: inherit; }