/* ============================================================================
   全站ボタン統一スタイル
   ----------------------------------------------------------------------------
   適用は各ページの最後の <link> 1行だけ。外せば完全に元へ戻る。

   方針（2026-09 改訂）:
     形はカプセルのまま。ただし「AIが作った Landing Page」に見える要素を削った。
       - 過剰な backdrop-filter（ガラス）→ ほぼ無地の面に
       - ピンク→ブルーの厚いグラデ → 単色アクセントに
       - 大きなぼかし影 → 1px の細い縁と極薄い影に
     質感は「装飾」ではなく「余白と線」で出す。それが人の手で詰めた見た目になる。
   ========================================================================== */

:root {
  --ui-ink: #23283a;
  --ui-sub: #6b7290;
  --ui-line: #e6e2e9;
  --ui-hover: #faf8fb;
  --ui-pink: #e07a9e;
  --ui-pink-soft: #fdeef3;
  --ui-shadow: 0 1px 2px rgba(35, 40, 58, 0.05);
}

/* ---- 1. 対象となるボタン ------------------------------------------------ */
/* ローディング画面の「点击跳过」だけはテキストリンクのままにする。 */
:where(button, input[type="submit"], a.btn, a.btn2, .cta, .cta-primary, .cta-ghost, a[class*="btn-"]) {
  border-radius: 999px !important;
  border: 1px solid var(--ui-line) !important;
  background: #fff;
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
  padding: 0.6em 1.4em;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

/* ---- 2. hover / active -------------------------------------------------- */
:where(button, input[type="submit"], a.btn, a.btn2, .cta, .cta-primary, .cta-ghost, a[class*="btn-"]):hover:not(:disabled) {
  background: var(--ui-hover);
  border-color: #d8d2db !important;
  box-shadow: 0 2px 6px rgba(35, 40, 58, 0.07);
}
:where(button, input[type="submit"], a.btn, a.btn2, .cta, .cta-primary, .cta-ghost, a[class*="btn-"]):active:not(:disabled) {
  transform: translateY(0.5px);
  box-shadow: none;
}
:where(button, input[type="submit"]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ---- 3. 主要操作は単色アクセント（グラデにしない） ---------------------- */
:where(.btn-primary, .btn-login, .btn-register, .btn-submit, .btn-save, .btn-send,
       .btn-generate-large, .btn-start-quiz, .btn-diagnose-submit,
       .cta-primary, .role-action-btn) {
  background: var(--ui-pink) !important;
  border-color: var(--ui-pink) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(224, 122, 158, 0.25) !important;
}
:where(.btn-primary, .btn-login, .btn-register, .btn-submit, .btn-save, .btn-send,
       .btn-generate-large, .btn-start-quiz, .btn-diagnose-submit,
       .cta-primary, .role-action-btn):hover:not(:disabled) {
  background: #d76b91 !important;
  border-color: #d76b91 !important;
  box-shadow: 0 2px 8px rgba(224, 122, 158, 0.28) !important;
}

/* ---- 4. 危険操作は赤みを残す -------------------------------------------- */
:where(.btn-danger, .btn-delete-item, .btn-del-dlg, .btn-del-option) {
  color: #b4545c !important;
  border-color: #eddadd !important;
  background: #fdf6f7 !important;
}
:where(.btn-danger, .btn-delete-item, .btn-del-dlg, .btn-del-option):hover:not(:disabled) {
  background: #fbebee !important;
  border-color: #e0bfc4 !important;
}

/* ---- 5. ローディング画面のスキップは対象外に戻す ------------------------ */
#tjhs-load .skip {
  border-radius: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transform: none !important;
  color: #5a7a94 !important;
  text-decoration: underline !important;
}

/* ============================================================================
   6. 老ページの見た目を新デザインに寄せる（全站統一レイヤー）
   ----------------------------------------------------------------------------
   このファイルは各ページの <style> より後に読み込まれるので、
   同じ詳細度ならこちらが勝つ。よって :root の上書きだけで効く。

   実測: 旧ページは --brand:#5B8DEF（青）で、study.html は var(--brand) を
   137 回参照していた。変数を 1 つ上書きするだけで 137 箇所が揃う。
   ========================================================================== */

:root {
  /* 旧・青ブランド → 新・ピンクへ寄せる */
  --brand: #e07a9e;
  --primary: #e07a9e;
  --accent: #e07a9e;
  --main: #e07a9e;
  --pink: #e07a9e;
  --brand-soft: #fdeef3;
  --brand-dark: #d76b91;

  /* 角丸と影も新側に合わせる */
  --radius: 14px;
  --card-radius: 14px;
  --shadow: 0 1px 2px rgba(35, 40, 58, 0.05);
}

/* 字体を1つに揃える。各ページの body 指定より後に読まれるのでこれで揃う。 */
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo",
    "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 見出しの余計な字間を抑える（旧ページは letter-spacing が散らばっていた） */
h1,
h2,
h3 {
  letter-spacing: normal;
}