/*
 * style.css — サイト全体のスタイル（1ファイル・ビルド工程なし。TECH_STACK §3.4）
 *
 * 方針:
 *  - プリプロセッサ・CSS フレームワーク・Web フォントを使わない（NFR-001 ページ重量 ≤300KB の主要因を持たない）
 *  - 全テキスト16px以上・コントラスト4.5:1以上（NFR-002。ライト/ダーク両方で判定値を満たす — DESIGN_TOKENS.md §2/§3-2）
 *  - ライト/ダークは `prefers-color-scheme` で自動切替（トグルなし）。値は :root のトークンに集約
 *  - **暦種別は色でなく文字ラベルで表す**（NFR-002「色のみに依存しない」）。
 *    このファイルには意味を担う色が1つもない — 色を落としても情報は失われない。
 *  - 情報密度（記事=低／一覧=高／検証=最高）はフォントサイズでなく余白トークンで表す（DESIGN_TOKENS.md §4）
 *  - 視覚デザインの作り込みは designer の作業（本実装は読める骨格まで）
 */

/*
 * 実測コントラスト比（対 --paper / --paper-soft。DESIGN_TOKENS.md §2 の計算値）。
 * ライト: 本文 17.22:1 / 15.66:1・補助 7.46:1 / 6.8:1・罫線(非テキスト) 3.39:1 / 3.1:1・リンク 8.54:1・訪問済リンク 9.1:1
 * ダーク: 本文 14.24:1 / 12.94:1・補助 7.30:1 / 6.64:1・罫線(非テキスト) 3.41:1 / 3.10:1・リンク 7.91:1 / 7.19:1・訪問済リンク 7.71:1
 * いずれも WCAG 1.4.3（テキスト 4.5:1 以上）／1.4.11（非テキスト 3:1 以上）を満たす。
 */
:root {
  /* 色（ライト既定値） */
  --ink: #1b1b1b;
  --ink-soft: #555555;
  --paper: #ffffff;
  --paper-soft: #f5f4f1;
  --rule: #8f8b83;
  --link: #14507a;
  --link-visited: #5a3a76;

  /* 文字サイズ（サイト全域16px以上。DESIGN_TOKENS.md §3-2） */
  --fs-meta: 1rem;        /* 16px — 補助文字・メタ情報の最小段 */
  --fs-body: 1.0625rem;   /* 17px（モバイル） */
  --fs-h3: 1.1875rem;     /* 19px */
  --fs-h2: 1.375rem;      /* 22px（モバイル） */
  --fs-h1: 1.75rem;       /* 28px（モバイル） */

  /* 情報密度トークン（DESIGN_TOKENS.md §4。高密度=一覧・最高密度=検証） */
  --space-list-item: 0.75rem;
  --space-claim: 1.1rem;

  /* 本文最大幅（40em相当。DESIGN_TOKENS.md §5） */
  --measure: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7e5e0;
    --ink-soft: #a8a5a0;
    --paper: #16171a;
    --paper-soft: #1f2023;
    --rule: #6a6c72;
    --link: #7fb2d9;
    --link-visited: #c39bdb;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.8;
  text-align: left;
}

/* ── リンク ────────────────────────────────────────────────── */
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
a:visited { color: var(--link-visited); }
a:hover, a:focus { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--ink); padding: 0.5rem 1rem; z-index: 10;
}
.skip-link:focus { left: 0; top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── ランドマーク ───────────────────────────────────────────── */
.site-header, .breadcrumbs, main, .site-footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.site-header {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding-block: 1.25rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.site-title { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.site-title a { color: var(--ink); text-decoration: none; }
.site-title a:hover { text-decoration: underline; }

.breadcrumbs { padding-block: 0.75rem 0; font-size: var(--fs-meta); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.35rem; color: var(--ink-soft); }
.breadcrumbs [aria-current] { color: var(--ink-soft); }

main { padding-block: 1.5rem 3rem; }

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 1.5rem 3rem;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}
.site-footer ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-note { margin: 0; }

/* ── 見出し ────────────────────────────────────────────────── */
h1 { font-size: var(--fs-h1); line-height: 1.4; margin: 0 0 1rem; }
h2 { font-size: var(--fs-h2); line-height: 1.45; margin: 2.25rem 0 0.75rem; }
h3 { font-size: var(--fs-h3); margin: 1.75rem 0 0.5rem; }
p, li { font-size: var(--fs-body); }
p { margin: 0 0 1.1em; }

/* ── 表・引用・コード ───────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: var(--fs-meta); }
th, td { border: 1px solid var(--rule); padding: 0.4rem 0.55rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
th { background: var(--paper-soft); }
/*
 * 360px 幅でも表がページ全体を横スクロールさせない（D-1・REV-00009）。
 * `display: block` にしても `<thead>`/`<tbody>`/`<tr>`/`<td>` は UA スタイルシートの
 * タグ既定表示（table-row-group 等）を保つため表としての見た目は変わらず、
 * はみ出しは表そのものの中だけでスクロールする。本文（markdown由来）の表を含め
 * `main` 配下の全 `<table>` に一律で効かせる。
 */
main :where(table) { display: block; overflow-x: auto; }
blockquote { margin: 1.25rem 0; padding: 0.75rem 1rem; border-left: 4px solid var(--rule); background: var(--paper-soft); }
blockquote p:last-child { margin-bottom: 0; }
code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: var(--fs-meta); background: var(--paper-soft); padding: 0.1em 0.3em; }

/* ── 記事 ──────────────────────────────────────────────────── */
.calendar-note {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
}
.calendar-facts { margin: 0; }
.calendar-facts > div { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.35rem; }
.calendar-facts dt { flex: 0 0 5.5rem; font-weight: 700; margin: 0; }
.calendar-facts dd { margin: 0; }
.cal-kind { color: var(--ink-soft); }   /* 暦種別は文字で示す。色は補助にすぎない */
.calendar-note-body { margin-top: 0.75rem; font-size: var(--fs-meta); }
.calendar-note-body blockquote { margin: 0; border-left-width: 3px; background: transparent; padding-left: 0.85rem; }

.trust-line { font-size: var(--fs-meta); color: var(--ink-soft); margin-bottom: 2rem; }

.variants { margin: 1.75rem 0; border: 1px solid var(--rule); }
.variants > summary { padding: 0.75rem 1rem; cursor: pointer; font-weight: 700; background: var(--paper-soft); }
.variants-body { padding: 0.25rem 1rem 0.75rem; }

.takeaway { margin: 2.5rem 0; padding: 1rem 1.15rem; border: 2px solid var(--rule); }
.takeaway h2 { margin-top: 0; font-size: var(--fs-h3); }
.takeaway p { margin-bottom: 0; }

.next-steps { margin: 2.5rem 0; }
.next-steps ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.next-steps li { margin-bottom: 0.4rem; }
.person-name { margin: 0.75rem 0 0.25rem; font-weight: 700; }

.sources ol { padding-left: 1.5rem; }
.sources li { margin-bottom: 0.5rem; }
.source-id { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: var(--fs-meta); }
.source-publisher, .source-rank, .source-note { color: var(--ink-soft); }
.sources-note { font-size: var(--fs-meta); color: var(--ink-soft); }

.affiliate { margin: 2.5rem 0; padding: 1rem 1.15rem; border: 1px dashed var(--rule); }
.affiliate-disclosure { font-size: var(--fs-meta); color: var(--ink-soft); margin-bottom: 0; }

.revisions-note, .verify-note { font-size: var(--fs-meta); color: var(--ink-soft); }

/* ── 今日ページ ────────────────────────────────────────────── */
.today-header { margin-bottom: 1.5rem; }
.today-tagline { margin: 0 0 0.35rem; color: var(--ink-soft); font-size: var(--fs-meta); }
.today-date { margin: 0; color: var(--ink-soft); font-size: var(--fs-meta); }

.hero-card { margin: 1.5rem 0 2rem; padding: 1.25rem; border: 1px solid var(--rule); }
.hero-card h2 { margin-top: 0; font-size: var(--fs-h3); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; color: var(--ink-soft); font-size: var(--fs-meta); margin-bottom: 0.75rem; }
.hero-summary { margin-bottom: 0.75rem; }
.hero-more { margin-bottom: 0; }

/* ── 一覧（日付・時代・併置ブロック）─────────────────────────── */
.article-list { list-style: none; margin: 0; padding: 0; }
.article-list > li { padding: var(--space-list-item) 0; border-bottom: 1px solid var(--rule); }
.article-list-head { margin: 0 0 0.25rem; }
.article-list-head .year { display: inline-block; min-width: 5.5rem; color: var(--ink-soft); font-size: var(--fs-meta); }
.article-list-meta, .article-list-cal { margin: 0 0 0.25rem; color: var(--ink-soft); font-size: var(--fs-meta); }
.article-list-takeaway { margin: 0; font-size: var(--fs-meta); }

.hub-lead { color: var(--ink-soft); font-size: var(--fs-meta); }
.hub-nav { margin-top: 2rem; }
.hub-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* ── 検証ページ ────────────────────────────────────────────── */
.verify-parent { font-size: var(--fs-meta); }
.verify-summary dl { margin: 0; }
.verify-summary > dl > div { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.35rem; }
.verify-summary dt { flex: 0 0 8rem; font-weight: 700; margin: 0; }
.verify-summary dd { margin: 0; }
.claim { margin: var(--space-claim) 0; padding-left: 1rem; border-left: 3px solid var(--rule); }
.claim h3 { margin-top: 0; }
.claim-confidence { margin-bottom: 0.5rem; font-size: var(--fs-meta); }
.claim-evidence { margin: 0; padding-left: 1.25rem; }
.claim-evidence li { margin-bottom: 0.5rem; font-size: var(--fs-meta); }
.evidence-source { color: var(--ink-soft); }

/* ── NL 導線 ───────────────────────────────────────────────── */
.nl-cta { margin: 3rem 0 0; padding: 1.25rem; background: var(--paper-soft); border: 1px solid var(--rule); }
.nl-cta h2 { margin-top: 0; font-size: var(--fs-h3); }
.nl-cta-note { margin-bottom: 0; font-size: var(--fs-meta); color: var(--ink-soft); }
.button {
  display: inline-block; padding: 0.6rem 1.25rem;
  background: var(--ink); color: var(--paper); text-decoration: none;
  border: 2px solid var(--ink);
}
.button:visited { color: var(--paper); }
.button:hover, .button:focus { background: var(--paper); color: var(--ink); text-decoration: underline; }

/* ── 固定ページ ────────────────────────────────────────────── */
.page .lead { font-size: 1.0625rem; }
.page ul, .page ol { padding-left: 1.4rem; }
.page li { margin-bottom: 0.4rem; }
.contact, .contact-pending { font-size: 1.0625rem; }

/* ── 画面幅 ────────────────────────────────────────────────── */
@media (min-width: 48rem) {
  :root {
    --measure: 45rem;   /* 本文18px時にちょうど40em */
    --fs-body: 1.125rem; /* 18px */
    --fs-h2: 1.5rem;     /* 24px */
    --fs-h1: 2.25rem;    /* 36px */
  }
}