/* ずんだ速報サイト共通スタイル
 *
 * CSS変数 + color-mix() で派生色を計算し、両テーマを同期させる。
 * 外部ホストへのリクエストは行わない。
 */

/* ── デザイントークン（ライト） ─────────────────────────── */
:root {
  --bg:        #ffffff;
  --bg-elev:   #f5f6f8;
  --surface:   #ffffff;
  --border:    #dfe1e6;
  --text:      #1a1b1e;
  --accent:    #4453c4;   /* ライトでは 4.5:1 を満たすまで暗くする */
  --accent-ink:#ffffff;

  /* 派生色はトークンから計算する。個別に色を足さない */
  --text-muted:  color-mix(in srgb, var(--text) 62%, var(--bg));
  --text-faint:  color-mix(in srgb, var(--text) 45%, var(--bg));
  --surface-2:   color-mix(in srgb, var(--surface) 92%, var(--text));
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
  --accent-line: color-mix(in srgb, var(--accent) 38%, var(--bg));

  --maxw: 1100px;
  --radius: 12px;
  --radius-sm: 8px;

  color-scheme: light dark;
}

/* ── ダーク ─────────────────────────────────────────────
 * 明示指定が無いときだけ OS 設定に従う。:root[data-theme="light"] を
 * 除外しないと、ライトを選んだ人がダークOSでダークのままになる。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #141519;
    --bg-elev: #1b1c21;
    --surface: #1e1f24;
    --border:  #2e3038;
    --text:    #e6e7ea;
    --accent:  #869af9;
    --accent-ink: #14151a;
  }
}
/* トグルで選んだダークは OS 設定より優先させる */
:root[data-theme="dark"] {
  --bg:      #141519;
  --bg-elev: #1b1c21;
  --surface: #1e1f24;
  --border:  #2e3038;
  --text:    #e6e7ea;
  --accent:  #869af9;
  --accent-ink: #14151a;
}

/* ── ベース ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* フォントは端末のものを使う。外部リクエストを出さないため */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
               "Yu Gothic", Meiryo, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.8;   /* JLReq 2.4.2 の 1.5〜2.0。行長が長いので上寄り */
  /* 和文と欧文の間のアキ。2025-11 に Baseline 入りしたが既定では効かない */
  text-autospace: normal;
}

/* 日本語に text-wrap: balance / pretty は使わない。
 * 空白区切りの言語向けの実装で、文節の途中で改行が入る。 */

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* フォーカスリングも 3:1 が要る（WCAG 2.2 / 1.4.11） */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── スキップリンク（WCAG 2.4.1） ───────────────────────── */
.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: var(--radius-sm); z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── レイアウト（1コンテナ・1リズム） ───────────────────── */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: 3.5rem; }
.section + .section { padding-top: 0; }

/* ── ヘッダー ───────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { width: 210px; }

/* ロゴはテーマで差し替える。
 * ロゴの文字と団子は白なので、そのまま明るい地に置くと 1.00:1 で消える。
 * 差し色 #8fd14f も白地では 1.84:1 で図形の下限 3:1 を割る。
 * そのため明るい地用（濃い文字・#40891b の差し色・団子に輪郭）と
 * 暗い地用（白い文字）の2枚を用意し、ここで入れ替える。
 * HTML の src は明るい地用。CSS が効かない場合もそちらで読める。
 * 上のダーク定義と同じ3状態（OS設定／明示ライト／明示ダーク）に揃えること。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img { content: url("/assets/logo-dark.png"); }
}
:root[data-theme="dark"] .brand img { content: url("/assets/logo-dark.png"); }
.brand span { position: absolute; left: -9999px; }  /* ロゴ画像の代替テキスト用 */

.nav { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.nav a {
  /* 単独リンクは 24x24 以上（WCAG 2.2 / 2.5.8）。本文中のリンクは対象外 */
  display: inline-flex; align-items: center; min-height: 32px;
  padding: .25rem .7rem; border-radius: 999px;
  font-size: 14px; text-decoration: none; color: var(--text-muted);
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.nav-short { display: none; }

/* ── 見出し ─────────────────────────────────────────────── */
h1, h2, h3 { line-height: 1.5; margin: 0 0 .6rem; }
h1 { font-size: 1.75rem; letter-spacing: .01em; }
h2 { font-size: 1.25rem; margin-top: 2.25rem; }
h3 { font-size: 1.05rem; margin-top: 1.5rem; }
.lead { color: var(--text-muted); margin-top: 0; }

/* ── カード（コンテナはカード、中身はリスト） ────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.grid { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── リスト ─────────────────────────────────────────────── */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }

/* li を flex にしてはいけない。<br> やリンクを含む項目では、それぞれが
 * 別々の flex アイテムになって横に並ぼうとし、テキストが1〜2文字幅の
 * 縦長の列に潰れる（390px で高さ324pxの項目が出ていた）。
 * 点は絶対配置で置き、li 自体は通常のブロックのままにする。 */
.list li { position: relative; padding-left: 1.1em; }
.list li::before {
  content: "・";
  position: absolute; left: 0; top: 0;
  color: var(--text-faint);
}
/* 長いURLは折り返す。折り返せないと画面外へはみ出す。
 * .list に限らず本文・.note・表の中にも裸のURLが出るので全体に効かせる。 */
a { overflow-wrap: anywhere; }

dl.meta { margin: 0; display: grid; gap: .5rem; }
@media (min-width: 560px) {
  dl.meta { grid-template-columns: 11rem 1fr; gap: .5rem 1rem; }
}
dl.meta dt { color: var(--text-muted); font-size: 14px; margin: 0; }
dl.meta dd { margin: 0; }

/* ── 表 ─────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; white-space: nowrap; }

/* ── 動画カード（YouTubeへリンクアウトする。埋め込まない） ── */
.video-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
}
.video-card:hover { border-color: var(--accent-line); background: var(--surface-2); }
.video-card .t { font-weight: 600; margin-bottom: .2rem; }
.video-card .s { color: var(--text-muted); font-size: 13px; }

/* ── ボタン ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .45rem 1.1rem;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { background: var(--surface-2); }

/* ── 注記 ───────────────────────────────────────────────── */
.note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem; font-size: 14px;
}

/* ── フッター ───────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 3.5rem; padding-block: 2rem;
  color: var(--text-muted); font-size: 13px;
}
.site-footer .links { display: flex; gap: .35rem 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
/* 単独リンクは 24x24 以上（WCAG 2.2 / 2.5.8）。本文中のリンクは対象外 */
.site-footer .links a { display: inline-flex; align-items: center; min-height: 24px; }
.site-footer a { color: var(--text-muted); }

/* ── 言語切り替え ───────────────────────────────────────── */
/* 対応する言語ページへの単純なリンク（JSなし） */
.lang-switch {
  min-width: 32px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .65rem; border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  text-decoration: none; color: var(--text-muted);
}
.lang-switch:hover { background: var(--surface-2); color: var(--text); }

/* ── テーマトグル ───────────────────────────────────────── */
.theme-toggle {
  min-width: 32px; min-height: 32px;   /* 単独操作なので 24x24 以上 */
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; color: var(--text-muted);
  cursor: pointer; font-size: 14px; padding: 0 .6rem;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }


/* ── 狭い画面 ─────────────────────────────────────────────
 * 390px 実測で、ヘッダーが 142px（画面の17%）を占め、sticky のため
 * スクロールしても居座っていた。ナビが2行に折り返すのが原因。
 * 狭い画面では sticky をやめ、本文に画面を明け渡す。 */
@media (max-width: 640px) {
  .site-header { position: static; }

  .site-header .wrap {
    min-height: 0;
    padding-block: .55rem;
    gap: .4rem .5rem;
  }

  /* ロゴは 210px あり、390px 幅では画面の54%を占めていた */
  .brand img { width: 150px; }

  /* 言語切替とテーマ切替はロゴ行の右端に固定する。
   * ナビのフローに残すと、ページリンクを押し出して
   * ヘッダーが1行ぶん高くなり、並びもばらつく。 */
  .site-header .wrap { position: relative; padding-right: 5.5rem; }
  .lang-switch, .theme-toggle { position: absolute; top: .5rem; }
  .lang-switch { right: 3.3rem; }
  .theme-toggle { right: 1.25rem; }

  .nav {
    width: 100%;
    margin-left: 0;
    gap: .15rem;
    justify-content: flex-start;
  }
  .nav a {
    font-size: 13px;
    padding: .25rem .5rem;
  }

  /* 日本語のラベルは長く、390px では2行に折り返す。
   * 狭い画面では短縮表記に差し替える（読み上げ用の全文は残す）。 */
  .nav .nav-full { position: absolute; left: -9999px; }
  .nav .nav-short { display: inline; }

  .section { padding-block: 2.25rem; }
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.15rem; margin-top: 1.75rem; }

  /* 表は横スクロールさせる（.table-scroll 済みだが、セルの詰まりを緩める） */
  th, td { padding: .5rem .55rem; }
}

/* さらに狭い端末 */
@media (max-width: 380px) {
  .brand img { width: 130px; }
  .nav a { font-size: 12px; padding: .25rem .4rem; }
}