/*
  全ページ共通のデザインの決まり（色・フォント・角丸・影・ボタン）
  - 全ページの <head> で、ページ固有の <style> より前に読み込む
  - 変数とクラス名はすべて --akp- / .akp- で始める（各ページの変数・クラスとぶつけない）
  - 各ページの :root では、そのページで使う変数名をここの変数に結びつける
    例）--red: var(--akp-akapen);
  - ダークモードは全ページ対応。色はここの変数を通して使えば、自動でダーク用の色に切り替わる
  - 自社アプリ（単語帳・九九タウン・タイムカード）は、本体の世界観（色・フォント）は各ページのままとし、
    共通の上部バー・フッターのためにこのファイルを読み込む
*/
:root{
  color-scheme:light dark;

  /* ブランド色（赤ペン）。塗り（白文字を載せる）と、文字色を分けている */
  --akp-akapen:#94263e;        /* ボタンなどの塗り */
  --akp-akapen-hover:#7c1f34;  /* 塗りのホバー */
  --akp-akapen-text:#94263e;   /* 背景の上に置く赤い文字・枠線 */
  --akp-akapen-soft:#faf0f1;   /* 薄い赤の背景 */
  --akp-akapen-line:#ecc3cb;   /* 薄い赤の背景に付ける枠線 */
  --akp-akapen-on-navy:#f2909f; /* 紺の上に置く赤い文字（ロゴの「赤ペン」など。ライト・ダーク共通） */

  /* 紺。上部バーなどの塗りと、見出しの文字色を分けている */
  --akp-navy:#0e2c48;
  --akp-navy-2:#16395c;
  --akp-navy-text:#0e2c48;

  /* 文字・背景・線 */
  --akp-ink:#16283a;           /* 本文 */
  --akp-ink-2:#43545f;         /* 補足 */
  --akp-ink-3:#5f707b;         /* 注記（白背景でコントラスト比 4.5 以上） */
  --akp-bg:#fdfcf8;            /* ページの背景 */
  --akp-bg-soft:#f7f4ec;       /* 区切り・表の見出しなど少し濃い背景 */
  --akp-surface:#ffffff;       /* カード */
  --akp-line:#ddd8cc;          /* 区切り線・枠線 */
  --akp-line-strong:#b9b3a6;   /* 入力欄の枠線 */
  --akp-link:#7c1f34;
  --akp-focus:#2f6fd0;

  /* 判定の色（OK／注意／NG／不明） */
  --akp-ok:#27673f;   --akp-ok-soft:#e8f3ec;   --akp-ok-line:#b9d8c3;
  --akp-warn:#8a6414; --akp-warn-soft:#fdf6e3; --akp-warn-line:#ead7a4;
  --akp-ng:#b3271e;   --akp-ng-soft:#fdecea;   --akp-ng-line:#ecbab4;
  --akp-unk:#5f707b;  --akp-unk-soft:#eef0f2;

  /* 結果の「答案用紙」風の表示（紙・紙の枠線・右上の朱色のはんこ） */
  --akp-paper:#fffdf8;
  --akp-paper-line:#c9c2b4;

  /* フォント（Web フォントは使わず、端末にあるフォントを使う） */
  --akp-font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",YuGothic,Meiryo,"Noto Sans JP",sans-serif;
  --akp-font-serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --akp-font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* 角丸・影 */
  --akp-radius:14px;           /* カード */
  --akp-radius-sm:10px;        /* ボタン・入力欄 */
  --akp-radius-pill:999px;     /* ラベル */
  --akp-shadow:0 10px 30px rgba(14,44,72,.08);
  --akp-shadow-sm:0 2px 10px rgba(14,44,72,.06);
}

/* 印刷はライトのまま（screen のときだけダークにする） */
@media screen and (prefers-color-scheme: dark){
  :root{
    --akp-akapen:#b8405a;
    --akp-akapen-hover:#a8364f;
    --akp-akapen-text:#f2909f;
    --akp-akapen-soft:#3a2129;
    --akp-akapen-line:#6a3340;

    --akp-navy:#0b2238;
    --akp-navy-2:#14324f;
    --akp-navy-text:#cfe0ec;

    --akp-ink:#e8edf1;
    --akp-ink-2:#b4c1ca;
    --akp-ink-3:#8f9ea9;
    --akp-bg:#12171d;
    --akp-bg-soft:#182029;
    --akp-surface:#1c252f;
    --akp-line:#334150;
    --akp-line-strong:#4a5a6a;
    --akp-link:#f2909f;
    --akp-focus:#7fb0f2;

    --akp-ok:#6fcf97;   --akp-ok-soft:#173528;   --akp-ok-line:#2d5a41;
    --akp-warn:#e3b93e; --akp-warn-soft:#3a3010; --akp-warn-line:#5e4d1c;
    --akp-ng:#f0837f;   --akp-ng-soft:#3d1d1b;   --akp-ng-line:#6a3330;
    --akp-unk:#a7b0bf;  --akp-unk-soft:#252d3d;

    --akp-paper:#1f262e;
    --akp-paper-line:#4a5663;

    --akp-shadow:0 10px 30px rgba(0,0,0,.35);
    --akp-shadow-sm:0 2px 10px rgba(0,0,0,.3);
  }
}

/* 土台（各ページの body 指定があればそちらが優先される） */
body{
  font-family:var(--akp-font);
  background:var(--akp-bg);
  color:var(--akp-ink);
}
/* リンク色（:where で強さを 0 にしているので、各ページの a{} 指定があればそちらが優先される）。
   ブラウザ既定の青のままだと、ダークモードで読みにくくなるため */
:where(a){color:var(--akp-link)}

/* ---------- フォーカスの決まり ----------
   キーボードで操作したときに、今どこにいるかが必ず見えるようにする（:where で強さを 0 にしているので、
   各ページで独自のフォーカス枠を指定していればそちらが優先される）。
   入力欄は、マウスでクリックしたときにも枠を出す（文字を打つ場所が分かるように） */
:where(a,button,summary,select,textarea,input,[tabindex]):focus-visible{outline:3px solid var(--akp-focus);outline-offset:2px}
/* 結果の見出しなど、スクリプトでフォーカスを移すだけの要素（tabindex="-1"）には枠を出さない。
   スクリーンリーダーは、フォーカスが移った見出しを読み上げる */
:where([tabindex="-1"]):focus{outline:none}

/* ---------- ボタンの決まり ----------
   新しく作るボタンは .akp-btn を使う。既存ページの独自クラスも、同じ見た目（角丸・塗り・高さ）にそろえている */
.akp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 22px;border-radius:var(--akp-radius-sm);
  font:inherit;font-size:15px;font-weight:700;line-height:1.3;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
}
.akp-btn-primary{background:var(--akp-akapen);color:#fff}
.akp-btn-primary:hover{background:var(--akp-akapen-hover);color:#fff}
.akp-btn-ghost{background:var(--akp-surface);color:var(--akp-ink);border-color:var(--akp-line)}
.akp-btn-ghost:hover{border-color:var(--akp-akapen-text);color:var(--akp-akapen-text)}
.akp-btn:disabled{opacity:.55;cursor:not-allowed}
.akp-btn:focus-visible{outline:3px solid var(--akp-focus);outline-offset:2px}

/* ---------- 答案用紙の決まり ----------
   結果を「赤ペンで添削した答案」に見立てて表示するときの紙とはんこ。
   各ツールでは .paper などの独自クラスに、下の変数・見た目を合わせている */
.akp-paper{background:var(--akp-paper);border:2px solid var(--akp-paper-line);border-radius:6px;padding:24px 22px;position:relative;box-shadow:var(--akp-shadow-sm)}
.akp-stamp{position:absolute;top:12px;right:16px;font-size:11px;color:var(--akp-akapen-text);border:1.5px solid var(--akp-akapen-text);border-radius:4px;padding:1px 8px;transform:rotate(3deg);opacity:.8}