@charset "UTF-8";
/* ==========================================================================
   base.css — サイト全体で共通の骨格・タイポグラフィ・部品
   --------------------------------------------------------------------------
   設計方針（なぜこう書いたか）:
   - 記事ごとに色や雰囲気を変えたい（要望④）が、レイアウトや余白は全ページで
     そろえたい（要望①）。そこで「配色だけを CSS 変数にまとめて themes.css で
     上書きし、構造の CSS はここに一本化する」という分け方にしている。
   - ビルドツールを使わない素の HTML/CSS/JS だけで動くようにしている。
     Cloudflare Pages に GitHub 連携で上げるとき、ビルド設定なしで
     そのまま公開できるほうが事故が少ないため。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン（既定値 = 標準テーマ）
   themes.css で body に .theme-xxx を付けると、この値が上書きされる。
   -------------------------------------------------------------------------- */
:root {
  /* 配色 */
  --bg: #f7f5ef;            /* ページ全体の背景 */
  --bg-elev: #fffdf8;       /* カードなど一段手前の面 */
  --bg-sunken: #efece3;     /* 引用・コラムなど一段奥の面 */
  --fg: #23211d;            /* 本文の文字色 */
  --fg-muted: #5f5a51;      /* 補足の文字色 */
  --accent: #2f6f4e;        /* 見出し・リンクなどの主役色 */
  --accent-ink: #ffffff;    /* --accent の上に載せる文字色 */
  --border: #ddd7c9;        /* 罫線 */
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --focus: #b4531f;         /* キーボード操作時のフォーカス枠 */

  /* 字体：日本語が読みやすい順に並べ、最後に総称ファミリを置く。
     Web フォントは読み込まない（表示の遅延と外部依存を避けるため）。 */
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
                "Noto Serif JP", Georgia, serif;

  /* 寸法 */
  --measure: 40rem;         /* 本文の最大幅（1行が伸びすぎると読みにくい） */
  --wide: 60rem;            /* ヘッダーや一覧など、少し広く使う幅 */
  --radius: 14px;
  --gap: clamp(1rem, 3vw, 1.75rem);
}

/* --------------------------------------------------------------------------
   2. リセットと土台
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* 画面幅に応じて基準文字サイズをなめらかに変える（スマホでも読みやすく） */
  font-size: clamp(16px, 0.95rem + 0.25vw, 19px);
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* 固定ヘッダーの下に見出しが隠れないように */
}
@media (prefers-reduced-motion: reduce) {
  /* 動きが苦手な人の OS 設定を尊重する（アクセシビリティ） */
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.9;               /* 日本語は行間を広めにすると読みやすい */
  letter-spacing: .02em;
  text-underline-offset: .18em;
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; }
a:hover { text-decoration-style: dotted; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 読み上げソフト用にだけ存在するテキスト */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* キーボード利用者が本文へ直接飛べるリンク */
.skip-link {
  position: absolute; left: 0; top: -100%;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. レイアウト
   -------------------------------------------------------------------------- */
.wrap  { width: min(100% - 2rem, var(--wide));    margin-inline: auto; }
.prose { width: min(100% - 2rem, var(--measure)); margin-inline: auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
@supports (backdrop-filter: blur(1px)) {
  /* 対応ブラウザだけ、すりガラス風にする（非対応でも見た目が壊れない書き方） */
  .site-header { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); }
}
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  padding: .6rem 0; justify-content: space-between;
}
.site-title {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-weight: 700; margin: 0;
  letter-spacing: .06em;
}
.site-title a { color: inherit; text-decoration: none; }
.site-title small {
  display: block; font-size: .68rem; font-weight: 400;
  color: var(--fg-muted); letter-spacing: .04em;
}

.site-footer {
  margin-top: 4rem; padding: 2rem 0 3rem;
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  font-size: .85rem; color: var(--fg-muted);
}
.site-footer p { margin: .4rem 0; }
.site-footer h2 { font-size: .95rem; color: var(--fg); margin: 0 0 .4rem; border: 0; padding: 0; }
.site-footer a { color: var(--fg); }

/* --------------------------------------------------------------------------
   4. 見出しと本文
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.45; letter-spacing: .04em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin: 0 0 .6rem; }
h2 {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  margin: 3rem 0 1rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--accent);
}
h3 { font-size: 1.1rem; margin: 2rem 0 .6rem; color: var(--accent); }
p { margin: 0 0 1.3em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.3em; }
li { margin-bottom: .5em; }
strong { color: var(--accent); font-weight: 700; }
ruby rt { font-size: .5em; letter-spacing: 0; }

/* 用語のひとこと説明。title 属性の中身をマウスで見られる注記 */
.term { border-bottom: 1px dotted currentColor; cursor: help; }

/* --------------------------------------------------------------------------
   5. 部品
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 補足・コラム */
.note {
  background: var(--bg-sunken);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem; margin: 1.8rem 0;
  font-size: .95rem;
}
.note > :last-child { margin-bottom: 0; }
.note__label {
  display: inline-block; font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; color: var(--accent); margin-bottom: .3rem;
}

/* 数式や記号を目立たせる小さな枠 */
.formula {
  display: block; text-align: center;
  font-family: var(--font-serif); font-size: 1.15rem;
  background: var(--bg-sunken); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: .9rem 1rem; margin: 1.4rem 0;
  overflow-x: auto;
}

/* 図（自作の SVG だけを置く。他人の画像は載せない＝転載トラブルの予防） */
figure { margin: 1.8rem 0; }
figure svg { display: block; margin-inline: auto; }
figcaption {
  font-size: .82rem; color: var(--fg-muted);
  text-align: center; margin-top: .6rem; line-height: 1.7;
}

/* 表は幅が足りないとき横スクロールさせる（本文は横に流さない） */
.table-scroll { overflow-x: auto; margin: 1.6rem 0; }
.table-scroll table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.table-scroll th, .table-scroll td {
  border: 1px solid var(--border); padding: .55rem .7rem; text-align: left; vertical-align: top;
}
.table-scroll th { background: var(--bg-sunken); font-weight: 700; }

/* パンくず */
.breadcrumb { font-size: .8rem; color: var(--fg-muted); margin: 1.5rem 0 .5rem; }
.breadcrumb a { color: inherit; }

/* --------------------------------------------------------------------------
   6. 難易度スイッチ（要望③）
   --------------------------------------------------------------------------
   同じ記事の中に「低学年 / 高学年 / 中学生」3 通りの文章を全部書いておき、
   body[data-level] に応じて CSS で出し分ける。
   ページを分けずスイッチ 1 つで切り替える方式にした理由:
   - 読者が「難しい」と思った瞬間に、同じ場所のままやさしい版へ移れる
   - URL が 1 記事 1 本で済むので、共有・ブックマークでリンク切れが起きない
   JavaScript が無効な環境でも、HTML 側で最初から data-level="upper" を
   指定してあるので高学年版がそのまま読める。
   -------------------------------------------------------------------------- */
[data-lv] { display: none; }
body[data-level="lower"]  [data-lv~="lower"],
body[data-level="upper"]  [data-lv~="upper"],
body[data-level="junior"] [data-lv~="junior"] {
  /* revert を理解しないブラウザでも本文が消えないよう、先に block を書いておく。
     revert が使える環境では下の行が勝ち、span などの元の表示形式に戻る。 */
  display: block;
  display: revert;
}

.levelbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.levelbar__label { font-size: .75rem; color: var(--fg-muted); letter-spacing: .08em; }
.levelbar__group {
  display: flex; gap: .25rem; padding: .25rem;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 999px;
}
.levelbar__btn {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-size: .82rem; line-height: 1.2;
  padding: .45rem .85rem; border-radius: 999px;
  background: transparent; color: var(--fg-muted);
  transition: background .15s ease, color .15s ease;
}
.levelbar__btn:hover { color: var(--fg); }
/* ボタンの中のふりがな。小さいボタンでも読めるよう、本文より大きめの比率にし、
   ふりがなの分の高さを行間で確保する。低学年の子が自分むけのボタンを選べるようにするため。 */
.levelbar__btn ruby { ruby-position: over; }
.levelbar__btn ruby rt { font-size: .62em; line-height: 1; }
.levelbar__btn { line-height: 1.45; }
.levelbar__btn[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
}

/* 記事冒頭に置く「今どのレベルを読んでいるか」の表示 */
.level-hint {
  font-size: .8rem; color: var(--fg-muted);
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: .7rem .9rem; margin: 1.2rem 0 2rem;
}

/* --------------------------------------------------------------------------
   7. 目次（クリックで開く）— 要望①
   details/summary を使うと JavaScript なしでも開閉できる。
   -------------------------------------------------------------------------- */
.toc { margin: 2rem 0; }
.toc > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-serif); font-weight: 700;
  padding: .9rem 1.1rem; border-radius: var(--radius);
  background: var(--bg-elev); border: 1px solid var(--border);
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::before {
  content: "\25B6"; font-size: .7em; color: var(--accent);
  transition: transform .2s ease;
}
.toc[open] > summary::before { transform: rotate(90deg); }
.toc__body { padding: .5rem .4rem 0; }
/* 目次の中の分野名。見出し階層を乱さないよう h3 ではなく p に当てる */
.toc__heading {
  font-family: var(--font-serif); font-weight: 700; font-size: .95rem;
  color: var(--accent); margin: .8rem .7rem .2rem;
}
.toc ol { list-style: none; padding-left: 0; counter-reset: toc; margin-bottom: 0; }
.toc li { counter-increment: toc; margin: 0; }
.toc li a {
  display: flex; gap: .7rem; padding: .55rem .7rem;
  border-radius: 8px; text-decoration: none; color: var(--fg);
}
.toc li a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--accent); font-size: .8rem; font-variant-numeric: tabular-nums;
  padding-top: .15em;
}
.toc li a:hover { background: var(--bg-sunken); }

/* --------------------------------------------------------------------------
   8. 記事カード一覧（トップページ）
   -------------------------------------------------------------------------- */
.entry-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); }
@media (min-width: 46rem) { .entry-list { grid-template-columns: repeat(2, 1fr); } }

.entry {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.3rem 1.4rem; text-decoration: none; color: inherit;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.entry:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,.07), 0 16px 40px rgba(0,0,0,.09); }
.entry__swatch { height: 5px; border-radius: 999px; margin-bottom: .3rem; }
.entry__meta { font-size: .72rem; color: var(--fg-muted); letter-spacing: .08em; }
.entry__title { font-family: var(--font-serif); font-size: 1.15rem; margin: 0; line-height: 1.5; }
.entry__lead { font-size: .88rem; color: var(--fg-muted); margin: 0; }
.entry__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .6rem; }
.tag {
  font-size: .7rem; padding: .18rem .55rem; border-radius: 999px;
  background: var(--bg-sunken); border: 1px solid var(--border); color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   9. 免責・出典まわり（要望⑤）
   -------------------------------------------------------------------------- */
.disclaimer {
  margin: 3rem 0 0; padding: 1.2rem 1.3rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-sunken);
  font-size: .82rem; color: var(--fg-muted); line-height: 1.85;
}
.disclaimer h2 { font-size: .95rem; color: var(--fg); border: 0; margin: 0 0 .5rem; padding: 0; }
.disclaimer ul { padding-left: 1.2em; margin-bottom: 0; }

.sources { font-size: .85rem; }
.sources ol { padding-left: 1.4em; }
.sources li { margin-bottom: .7em; }
.sources .src-note { color: var(--fg-muted); }

.updated { font-size: .78rem; color: var(--fg-muted); }

/* 印刷したときは、選ばれているレベルの本文だけがきれいに出るようにする */
@media print {
  .site-header, .levelbar, .toc, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}