/* サイト全体の色。黒地（既定）と白地の2つを、同じ名前で切り替える。

★なぜ変数にまとめるか
  色が11のファイルに直接書かれていて（455か所）、同じ意味の色に
  #949494 と #999 と #a3a3a3 のようなばらつきがあった。
  1つ直すのに11ファイルを見て回ることになり、必ずどこかが取り残される。
  ここに集めておけば、地の色を入れ替えるだけで両方の見た目が決まる。

★白地の値は「黒地をそのまま反転」させていない。
  反転すると、黒地でちょうどよかった灰色が白地では薄すぎて読めなくなる。
  どの色も白地に対して測り直してある（本文 12:1、補助 6:1 以上）。

★赤は白地では暗くする。#ef4444 は白の上だと 3.3:1 しかなく、
  文字に使うと読みにくい。白地用は #c81e1e（5.9:1）。
  ただし赤い面の上に載る文字（--on-accent）は、どちらでも白のまま。
  面が赤いのだから、そこだけは反転させてはいけない。
*/
:root {
  color-scheme: dark;

  /* ── 面 ── */
  --bg:         #0a0a0a;   /* ページの地 */
  --bg2:        #111111;   /* 1つおきの区画の地 */
  --bg3:        #1a1a1a;   /* カードの地（区画の上に載る） */
  --surface:    #0f0f0f;   /* 枠の中の面（一覧・入力欄の外側） */
  --surface-2:  #141414;   /* 上の面に重ねる、少しだけ明るい面 */
  --surface-3:  #1c1c1c;   /* 押せる小さな面（ボタンの地） */
  --surface-4:  #262626;   /* その上に乗ったとき */
  --rule:       #161616;   /* 行と行の仕切り */
  --border:     #2a2a2a;   /* 枠線 */
  --border-2:   #383838;   /* 強めの枠線 */

  /* ── 文字 ── */
  --text-strong: #ffffff;  /* 見出し */
  --text:        #e8e8e8;  /* 本文 */
  --text-2:      #dddddd;  /* 少し弱い本文 */
  --text-3:      #bbbbbb;  /* 値・札 */
  --text-muted:  #a3a3a3;  /* 補助説明 */
  --text-dim:    #8a8a8a;  /* 脇役 */
  /* ほぼ飾り・使えない状態。★#6f6f6f は黒地で 3.94:1 しかなく、
     規格（4.5:1）に届いていなかった。白地を作るついでにここも上げる。 */
  --text-faint:  #7c7c86;

  /* ── 色 ── */
  --red:         #ef4444;
  --red-2:       #ff3b3b;  /* トップページの主色（少し鮮やか） */
  --red-strong:  #dc2626;  /* 押したとき・濃いほう */
  /* ★料金の赤いカード専用の地。白い文字を載せるので、--red より濃くする。
     --red（#ef4444）の上では白い文字でも 3.4:1 しか出ず、
     半透明の白（85%）だと 3.09 まで落ちていた（実測）。 */
  --red-card:    #b91c1c;
  --red-soft:    #ff7b7b;  /* 帯のグラデーションの明るいほう */
  --on-accent:   #ffffff;  /* 赤い面の上に載る文字。両方とも白のまま */
  --green:       #22c55e;
  --green-2:     #4ade80;
  --green-strong:#16a34a;
  /* ★薄い色の面（緑や琥珀のうすい帯）の上に載せる文字。
     地の色ごとに向きが逆になる。黒地では明るく、白地では暗くする。
     --green をそのまま使うと、白地で 4.09〜4.41 しか出ず基準を割る
     （実測）。逆に白地向けの濃い緑を黒地でも使うと、今度は黒地が割れる。 */
  --green-on-tint: #4ade80;
  --amber:       #fbbf24;
  --amber-2:     #d4a017;
  /* うすい琥珀の帯の上に載せる文字。黒地では明るい側。 */
  --amber-on-tint: #fcd34d;
  --blue:        #60a5fa;

  /* ── 半透明の面 ── */
  --hero-tint:   #1a0000;  /* 大きな帯のグラデーションの片側 */

  /* 赤い面の上に載る、少し弱めた白。地の色が変わっても面は赤のままなので、
     どちらの地でも白のまま。 */
  --on-accent-85: rgba(255,255,255,0.85);
  --on-accent-70: rgba(255,255,255,0.70);
  --on-accent-45: rgba(255,255,255,0.45);
  /* 地の上に薄く重ねる面と線。★白の半透明は白地では消える。地ごとに入れ替える。 */
  --tint-soft:   rgba(255,255,255,0.06);
  --tint-line:   rgba(255,255,255,0.10);
  --tint-line-2: rgba(255,255,255,0.20);
  /* かぶせ物の後ろ。ここが薄いと、後ろの文字が透けて読めなくなる。 */
  --overlay:     rgba(0,0,0,0.75);
  /* 上に貼り付くヘッダー。後ろが透けるので、地とほぼ同じ色の半透明にする。 */
  --bg-blur:     rgba(10,10,10,0.90);
  --bg-blur-2:   rgba(10,10,10,0.96);

}

/* ── 白地 ──
   ★html に data-theme="light" が付いたときだけ効く。
     付ける役目は theme.js（描く前に付けるので、黒→白のちらつきが出ない）。 */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:         #ffffff;
  --bg2:        #f6f6f8;
  --bg3:        #ffffff;
  --surface:    #ffffff;
  --surface-2:  #fafafb;
  --surface-3:  #f0f0f3;
  --surface-4:  #e4e4e9;
  --rule:       #ececef;
  --border:     #dcdce2;
  --border-2:   #c4c4cc;

  /* ★白地の脇役の文字は、黒地より一段弱く見える（実測: 対比の中央値が
     黒地 7.74 に対し白地 7.26。基準は満たすが「薄い」と感じる）。
     白の上では少し濃いほうへ寄せる。 */
  --text-strong: #0d0d12;
  --text:        #26262c;
  --text-2:      #33333a;
  --text-3:      #45454e;
  --text-muted:  #4d4d57;
  --text-dim:    #5b5b66;
  --text-faint:  #62626d;

  --red:         #c81e1e;
  --red-2:       #c81e1e;
  --red-strong:  #a51616;
  --red-card:    #a51616;
  --red-soft:    #e05252;
  --on-accent:   #ffffff;
  --green:       #15803d;
  --green-2:     #15803d;
  --green-strong:#166534;
  --green-on-tint: #12602c;
  --amber:       #92610a;
  --amber-2:     #92610a;
  --amber-on-tint: #7a5108;
  --blue:        #1d4ed8;

  --hero-tint:   #fff1f1;

  --on-accent-85: rgba(255,255,255,0.85);
  --on-accent-70: rgba(255,255,255,0.70);
  --on-accent-45: rgba(255,255,255,0.45);
  --tint-soft:   rgba(16,16,24,0.045);
  --tint-line:   rgba(16,16,24,0.10);
  --tint-line-2: rgba(16,16,24,0.18);
  --overlay:     rgba(16,16,24,0.45);
  --bg-blur:     rgba(255,255,255,0.90);
  --bg-blur-2:   rgba(255,255,255,0.96);

}

/* 色が変わるところは、切り替えたときだけ短く混ぜる。
   ★動きを止めている人には出さない。 */
@media (prefers-reduced-motion: no-preference) {
  :root.theme-switching,
  :root.theme-switching * {
    transition: background-color 0.18s linear, border-color 0.18s linear,
                color 0.18s linear !important;
  }
}

/* ── 黒地／白地の切り替えボタン ──
   全ページのヘッダーに同じ形で出る。各ページの <style> ではなく
   ここに置く（11ファイルに同じ指定を書き写すと、必ずどこかがずれる）。
   ※success / reset-password にはヘッダーが無いのでボタンも出ない。
     選んだ地は覚えているので、表示そのものは合った側で出る。 */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 押せるものは 24px 以上。アイコンは 15px なので、周りに余白で足す。 */
  width: 26px; height: 26px; margin-left: 8px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-dim); cursor: pointer; font-family: inherit;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.theme-btn:hover { color: var(--text); background: var(--surface-3); }
.theme-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* 出すのは「押したらこうなる」ほうの絵。
   ★いまの状態の絵を出すと、押す前と押した後で同じ絵に見えて、
     効いたのかどうか分からない。 */
.theme-btn .ico-sun { display: block; }
.theme-btn .ico-moon { display: none; }
:root[data-theme="light"] .theme-btn .ico-sun { display: none; }
:root[data-theme="light"] .theme-btn .ico-moon { display: block; }

/* ── 本文へ飛ぶリンク ──
   キーボードだけで見ている人は、ページを開くたびにナビの項目を
   全部 Tab で抜けないと本文に入れない。1つ目に置いて、そこを飛ばせるようにする。
   ★見えなくするのに display:none は使わない。それだと Tab でも止まらず、
     置いた意味が無くなる（よくある間違い）。画面の外へ出しておく。 */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 300;
  background: var(--red-strong); color: var(--on-accent);
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 8px; }

/* ── 画面の隅に出る短い知らせ ──
   alert() の代わり。画面を止めず、押している場所も消さない。 */
.ytmax-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 400;
  transform: translate(-50%, 12px);
  max-width: min(440px, calc(100vw - 32px));
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 18px; font-size: 13px; line-height: 1.6;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.ytmax-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ytmax-toast.err { border-color: var(--red); color: var(--text-strong); }
@media (prefers-reduced-motion: reduce) {
  .ytmax-toast { transition: opacity 0.18s; transform: translate(-50%, 0); }
}