/*
 * 静的ページ（読むだけのページ）の下地。
 *
 * 本体は SPA で、Vite がバンドルした CSS を読む。**こちらはそれを使えない。**
 * バンドル後のファイル名はハッシュが付くので、素の HTML から名指しできない。
 * `public/` に実ファイルとして置き、`/pages.css` の固定パスで読む。
 *
 * **`src/index.css` とトークンが二重になる。**片方だけ直すと色が食い違うので、
 * 値が一致していることを `src/pages.test.ts` が見張る。
 */

:root {
  --surface: #ffffff;
  --surface-sunken: #f4f5f7;
  --border: #e2e5ea;
  --ink: #14171c;
  --ink-secondary: #4d5560;
  --ink-muted: #767f8c;
  --link: #1d4ed8;
  color-scheme: light dark;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  /* 読ませるページなので本体（1.6）より広く取る。 */
  line-height: 1.8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #12151a;
    --surface-sunken: #0c0e12;
    --border: #2a3038;
    --ink: #f2f4f7;
    --ink-secondary: #b8c0cc;
    --ink-muted: #8b95a3;
    --link: #60a5fa;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background: var(--surface-sunken);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

h1 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.updated {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-bottom: 20px;
}

section {
  padding: 16px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

h2 {
  font-size: 0.9375rem;
  margin-bottom: 6px;
}

p,
li {
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

p + p,
ul {
  margin-top: 8px;
}

ul {
  padding-left: 1.2em;
}

li + li {
  margin-top: 4px;
}

a {
  color: var(--link);
}

strong {
  color: var(--ink);
}

.back {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.875rem;
}

/* 節の中の小見出し。 */
h3 {
  font-size: 0.875rem;
  margin-top: 14px;
  margin-bottom: 2px;
}

section > h3:first-of-type {
  margin-top: 6px;
}

/* ページの導入。見出しの直後に置く。 */
.lead {
  font-size: 0.875rem;
  color: var(--ink-secondary);
  margin-bottom: 16px;
}

/*
 * 料率や年ごとの値を並べる表。
 *
 * **狭い画面では折り返させず横スクロールにする。**料率の表は列が短いので、
 * 折り返すと数字とラベルの対応が崩れて読めなくなる。
 */
.scroll {
  overflow-x: auto;
  margin-top: 8px;
}

table {
  border-collapse: collapse;
  font-size: 0.8125rem;
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

th {
  color: var(--ink);
  font-weight: 700;
}

td {
  color: var(--ink-secondary);
}

/* 数字の列。桁を揃える。 */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ほかの解説ページへの導線。ページの末尾に置く。 */
.nav {
  margin-top: 20px;
}

.nav h2 {
  margin-bottom: 8px;
}

.nav ul {
  padding-left: 0;
  list-style: none;
}

.nav li + li {
  margin-top: 6px;
}

/*
 * サイト内の案内。**全ページの上部に同じものを置く。**
 *
 * 狭い画面では折り返す。横スクロールにすると、隠れた項目に気づけない
 * （表と違い、ここは全部見えていることに意味がある）。
 */
.globalNav {
  margin-bottom: 16px;
}

.globalNav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  /*
   * 上の `ul` が付ける余白・行頭記号・字下げを打ち消す。
   *
   * **`margin` を全方向で 0 にする。**上の `ul` が足すのは `margin-top` だけなので
   * 今は `margin-top: 0` でも足りるが、それは冒頭の `* { margin: 0 }` が
   * ブラウザ既定の `margin-bottom` を消していることに乗った書き方になる。
   * ここだけ読んで安全と分かる形にしておく。
   */
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.globalNav li {
  font-size: 0.75rem;
}

/* 縦に積む場面が無いので、素の li + li の余白は要らない。 */
.globalNav li + li {
  margin-top: 0;
}

/* 現在のページ。リンクにしていないので、色と太さで «ここにいる» と示す。 */
.globalNav [aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}

/*
 * 広告枠（解説ページの本文の末尾）。
 *
 * `display: block` が無いと adsbygoogle.js は幅を測れず、枠が出ない。
 * 在庫が無いときに畳む指定は `src/index.css` にも同じものがある（あちらは SPA 用）。
 * **埋まった広告は決して隠さない**（AdSense のポリシー違反になる）。
 */
.adsbygoogle {
  display: block;
  margin-top: 20px;
}

ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}