/* 高校情報 共通スタイル（kj = koukou-jouhou）
 *
 * koukou-jouhou.org の全ページを同じ見た目にそろえるための CSS。
 * メインサイトが /kj/kj.css として配信し、サブパスの各ツールは実行時に読み込む。
 *
 *     <link rel="stylesheet" href="/kj/kj.css">
 *     <script src="/site-bar.js" defer></script>
 *
 * ■ なぜコピーではなく実行時に読み込むのか
 *
 * 2026-09-27 の棚卸しで、ヘッダー・フッター・色がプロジェクトごとにコピーされ、
 * コピーのたびに少しずつずれていたことが分かった（アクセント6系統、フォント6種類、
 * 本文12〜18px）。オーナーは「色も全ページ共通にする」と決めた（案A）。
 * 1か所直せば全ページに行き渡るには、site-bar.js と同じく実行時に配るしかない。
 *
 * ■ 読み込んだだけでは何も変わらない
 *
 * 変数（--color-*, --kj-*）を定義し、kj- で始まるクラスを用意するだけ。
 * 要素セレクタ（body, a, button…）には一切スタイルを当てない。
 * ページ全体の土台（文字・背景・フォーカス表示）は、body に class="kj-body" を
 * 付けたときだけ効く。Tailwind などと混ぜても既存の見た目を壊さないため。
 *
 * ■ 数値の根拠
 *
 * デジタル庁デザインシステム（DADS）に合わせる。本文16px以上、行間1.8、
 * 文字と背景は4.5:1以上、意味を持つ枠線・状態色は3:1以上、押せる所は44px以上。
 * 比率は WCAG の相対輝度式で計算し、行末のコメントに残した。色を変えたら必ず計算し直す。
 *
 * ■ 例外
 *
 * 作品として独自の世界観があるもの（kotonoha-chronicle の和紙色など）は、
 * 本文エリアの --color-background / --color-surface だけ上書きしてよい。
 * ヘッダー・フッター・ボタン・アクセント色は上書きしない。
 */

/* ------------------------------------------------------------------ */
/* 変数：色（名前は shared/tokens.css と同じ。値もここを正とする）       */
/* ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  --color-background: #f8fafc;       /* text 17.06:1 / muted 7.24:1 */
  --color-surface: #ffffff;          /* text 17.85:1 / muted 7.58:1 */
  --color-surface-strong: #e2e8f0;   /* text 14.48:1 / muted 6.15:1 */
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-border: #64748b;           /* background 4.55:1 / surface 4.76:1 */
  --color-accent: #4f46e5;           /* background 6.01:1 / surface 6.29:1 */
  --color-on-accent: #ffffff;        /* accent 6.29:1 */
  /* アクセントのホバー。文字色の側へ寄せる（ライトは暗く、ダークは明るく）。on-accent との比は上がる */
  --kj-accent-hover: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
  --color-success: #047857;          /* surface 5.48:1 */
  --color-on-success: #ffffff;
  --color-warning: #b45309;          /* surface 5.02:1 */
  --color-on-warning: #ffffff;
  --color-danger: #b91c1c;           /* surface 6.47:1 */
  --color-on-danger: #ffffff;

  /* ここから kj 独自 */
  --kj-ink: #0f172a;                 /* 太枠・ずらした影・フッター。surface 17.85:1 */
  --kj-divider: #cbd5e1;             /* 装飾の区切り線（意味を持たない線だけに使う） */
  --kj-accent-soft: #e0e7ff;         /* アクセントの薄い面。text 14.49:1 / accent 5.10:1 */
  --kj-marker: #ffd43d;              /* 蛍光ペン。text 12.53:1 */
  --kj-focus-ring: #ffd43d;          /* フォーカスの外側の黄色 */
  --kj-notice-bg: #fffbeb;           /* 注意の面。text 17.22:1 / warning 4.84:1 */
  --kj-success-soft: #ecfdf5;        /* 正解・成功の薄い面。text 16.95:1 / success 5.21:1 */
  --kj-danger-soft: #fef2f2;         /* 不正解・危険の薄い面。text 16.32:1 / danger 5.91:1 */
  --kj-placeholder: #f1f5f9;         /* 画像が入るまでの仮の面 */

  /* フッター・全画面ツールの細いバー。明暗どちらのテーマでも同じ濃い地（ダークでも上書きしない） */
  --kj-footer-bg: #0f172a;
  --kj-on-footer: #ffffff;           /* footer-bg 17.85:1 */
  --kj-on-footer-muted: #cbd5e1;     /* footer-bg 12.02:1 */

  /* 反転の面（明暗どちらでも濃い地）。フッター以外の部品もこちらの名前で使う */
  --kj-inverse: var(--kj-footer-bg);
  --kj-on-inverse: var(--kj-on-footer);
  --kj-on-field: #ffffff;            /* 分野の色の面の上の文字。比は下の各色のコメント */

  /* 分野の色。白文字との比。分野名などの文字も必ず一緒に出し、色だけで区別しない */
  --kj-field-network: #4338ca;       /* 白 7.90:1 */
  --kj-field-programming: #c2410c;   /* 白 5.18:1 */
  --kj-field-data: #047857;          /* 白 5.48:1 */
  --kj-field-design: #7e22ce;        /* 白 6.98:1 */

  /* 文字 */
  --kj-font: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --kj-font-mono: "Noto Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --kj-text-base: 1rem;              /* 16px。これ未満を本文に使わない */
  --kj-text-lead: 1.125rem;          /* 18px */
  --kj-text-small: 0.875rem;         /* 14px。フッターの注記など、例外だけ */
  --kj-leading-body: 1.8;
  --kj-leading-heading: 1.4;

  /* 形 */
  --kj-radius: 12px;
  --kj-radius-lg: 20px;
  --kj-border-bold: 3px;
  --kj-shadow-offset: 6px;
  --kj-hit: 44px;                    /* 押せる所の最小の高さ・幅 */

  /* 幅 */
  --kj-width-wide: 1200px;           /* 一覧・ツール */
  --kj-width-text: 780px;            /* 記事の本文（1行40字前後） */
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    --color-background: #020617;     /* text 19.28:1 / muted 13.59:1 */
    --color-surface: #0f172a;        /* text 17.06:1 / muted 12.02:1 */
    --color-surface-strong: #1e293b;
    --color-text: #f8fafc;
    --color-text-muted: #cbd5e1;
    --color-border: #94a3b8;         /* background 7.87:1 */
    --color-accent: #818cf8;         /* background 6.76:1 / surface 5.98:1 / surface-strong 4.90:1 */
    --color-on-accent: #0f172a;
    --color-success: #34d399;
    --color-on-success: #052e22;
    --color-warning: #fbbf24;
    --color-on-warning: #422006;
    --color-danger: #f87171;
    --color-on-danger: #450a0a;

    --kj-ink: #94a3b8;               /* 太枠・影は明るい灰に反転。background 7.87:1 */
    --kj-divider: #1e293b;
    --kj-accent-soft: #1e1b4b;
    --kj-marker: #713f12;            /* 明るい文字との比 8.29:1 */
    --kj-notice-bg: #1c1407;         /* text 17.42:1 / warning 10.92:1 */
    --kj-success-soft: #052e22;      /* text 14.13:1 / success 7.69:1 */
    --kj-danger-soft: #450a0a;       /* text 15.43:1 / danger 5.84:1 */
    --kj-placeholder: #1e293b;
  }
}

/* localStorage の theme で明示的に選んだダーク。site-bar.js の切替ボタンが html.dark を付け外しする */
html.dark {
  color-scheme: dark;
  --color-background: #020617;
  --color-surface: #0f172a;
  --color-surface-strong: #1e293b;
  --color-text: #f8fafc;
  --color-text-muted: #cbd5e1;
  --color-border: #94a3b8;
  --color-accent: #818cf8;
  --color-on-accent: #0f172a;
  --color-success: #34d399;
  --color-on-success: #052e22;
  --color-warning: #fbbf24;
  --color-on-warning: #422006;
  --color-danger: #f87171;
  --color-on-danger: #450a0a;

  --kj-ink: #94a3b8;
  --kj-divider: #1e293b;
  --kj-accent-soft: #1e1b4b;
  --kj-marker: #713f12;
  --kj-notice-bg: #1c1407;
  --kj-success-soft: #052e22;
  --kj-danger-soft: #450a0a;
  --kj-placeholder: #1e293b;
}

/* ------------------------------------------------------------------ */
/* ページの土台（body に class="kj-body" を付けたときだけ）             */
/* ------------------------------------------------------------------ */

.kj-body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--kj-font);
  font-size: var(--kj-text-base);
  line-height: var(--kj-leading-body);
  -webkit-text-size-adjust: 100%;
}
.kj-body :where(h1, h2, h3, h4) { line-height: var(--kj-leading-heading); font-weight: 900; }
/* リンクは下線つき（色だけで区別しない）。Tailwind の preflight は下線を消すので、ここで戻す */
.kj-body :where(a:not([class])) { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
/* フォーカスは「対象そのものを囲む」。黒の太枠＋外側の黄色で、どの背景でも見える */
.kj-body :focus-visible {
  outline: 4px solid var(--color-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--kj-focus-ring);
}

/* ------------------------------------------------------------------ */
/* 枠組み                                                               */
/* ------------------------------------------------------------------ */

.kj-container { box-sizing: border-box; width: 100%; max-width: calc(var(--kj-width-wide) + 32px); margin-inline: auto; padding-inline: 16px; }
.kj-container--text { max-width: calc(var(--kj-width-text) + 32px); }

.kj-page-title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 900; line-height: var(--kj-leading-heading); }
.kj-heading { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 900; line-height: var(--kj-leading-heading); }
.kj-heading--rule { padding-bottom: 8px; border-bottom: 4px solid var(--kj-ink); }
.kj-lead { font-size: var(--kj-text-lead); color: var(--color-text-muted); line-height: 1.75; }
.kj-prose { font-size: 1.0625rem; line-height: var(--kj-leading-body); }
.kj-prose > * + * { margin-top: 1em; }
.kj-marker { background: linear-gradient(transparent 62%, var(--kj-marker) 62%); }

/* パンくず */
.kj-breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 16px 0; list-style: none; font-size: var(--kj-text-base); }
.kj-breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--color-text-muted); }
/* 押せる範囲を上下に広げて 24px 以上にする（文字だけだと 18px しかなかった） */
.kj-breadcrumb a { display: inline-block; padding-block: 4px; color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.kj-breadcrumb { padding-block: 12px; }

/* ------------------------------------------------------------------ */
/* ボタン                                                               */
/* ------------------------------------------------------------------ */

.kj-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--kj-hit); padding: 0 20px;
  border: 2px solid var(--color-text); border-radius: 10px;
  background: var(--color-surface); color: var(--color-text);
  font: 700 var(--kj-text-base)/1 var(--kj-font);
  text-decoration: none; cursor: pointer;
  white-space: nowrap; flex-shrink: 0; /* 横に並べたとき「検索」が1文字ずつ折れるのを防ぐ */
}
.kj-btn:hover { background: var(--color-surface-strong); }
.kj-btn--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
/* ホバーは明度だけ変える（色相は変えない）。文字色の側へ寄せるので、
   ライトでは暗く、ダークでは明るくなり、どちらでも上の文字との比が上がる */
.kj-btn--primary:hover { background: var(--kj-accent-hover); }
.kj-btn--lg { min-height: 52px; padding: 0 28px; font-size: 1.0625rem; }
.kj-btn:disabled, .kj-btn[aria-disabled="true"] { border-style: dashed; border-color: var(--color-border); color: var(--color-text-muted); background: var(--color-surface-strong); cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* カード                                                               */
/* ------------------------------------------------------------------ */

.kj-card {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border: 1px solid var(--color-border); border-radius: var(--kj-radius);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
}
a.kj-card:hover { border-color: var(--color-accent); }
/* 目立たせたいカード：太い黒枠＋ずらした影 */
.kj-card--bold { border: var(--kj-border-bold) solid var(--kj-ink); border-radius: var(--kj-radius-lg); box-shadow: var(--kj-shadow-offset) var(--kj-shadow-offset) 0 var(--kj-ink); }
a.kj-card--bold:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--kj-ink); }
.kj-card__title { margin: 0; font-size: 1.25rem; font-weight: 900; line-height: var(--kj-leading-heading); }
.kj-card__text { margin: 0; color: var(--color-text-muted); line-height: 1.6; }

/* 分野の色タイル。class="kj-card kj-card--bold kj-field kj-field--network" */
.kj-field { color: var(--kj-on-field); border-color: var(--kj-ink); }
.kj-field .kj-card__text { color: var(--kj-on-field); }
.kj-field--network { background: var(--kj-field-network); }
.kj-field--programming { background: var(--kj-field-programming); }
.kj-field--data { background: var(--kj-field-data); }
.kj-field--design { background: var(--kj-field-design); }

.kj-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

/* ------------------------------------------------------------------ */
/* ラベル・注意                                                         */
/* ------------------------------------------------------------------ */

.kj-tag { display: inline-flex; align-items: center; padding: 2px 10px; border: 2px solid var(--color-text); border-radius: 6px; font-size: var(--kj-text-small); font-weight: 700; line-height: 1.5; }
.kj-tag--safe { border-color: var(--color-success); color: var(--color-success); }
/* 斜めの帯。「よく使われている」「新しい」など、1画面に1つまで */
.kj-badge { display: inline-block; padding: 4px 12px; background: var(--kj-ink); color: var(--color-background); font-weight: 900; transform: skew(-8deg); }

/* 子は「アイコン」と「<div>（見出し＋本文）」の2つにする。文の途中に太字がある段落へ直接付けると、flex で文が割れる */
.kj-notice { display: flex; gap: 12px; padding: 16px 20px; border: 2px solid var(--color-warning); border-radius: var(--kj-radius); background: var(--kj-notice-bg); color: var(--color-text); }
.kj-notice__title { font-weight: 900; }
.kj-notice--info { border-color: var(--color-accent); background: var(--kj-accent-soft); }

/* ------------------------------------------------------------------ */
/* ツールの枠                                                           */
/* ------------------------------------------------------------------ */

/* T4 ツール（ふつう幅）の本体を囲む枠。中身の作りはツールの自由 */
.kj-tool-frame { box-sizing: border-box; border: var(--kj-border-bold) solid var(--kj-ink); border-radius: var(--kj-radius-lg); background: var(--color-surface); overflow: clip; }
/* hidden だと、枠の中の scrollIntoView やフォーカス移動で中身が横にずれる（dncl-tracer で実際に起きた）。clip はずれない */

/* 入力欄 */
.kj-field-label { display: block; margin-bottom: 6px; font-weight: 700; }
.kj-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 12px; border: 2px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font: 400 var(--kj-text-base)/1.5 var(--kj-font); }

/* 画像が入るまでの仮置き */
.kj-placeholder { display: flex; align-items: center; justify-content: center; border: 3px dashed var(--color-border); border-radius: var(--kj-radius-lg); background: var(--kj-placeholder); color: var(--color-text-muted); }

/* ------------------------------------------------------------------ */
/* 印刷：画面用の枠・広告・操作ボタンは紙に出さない                       */
/* ------------------------------------------------------------------ */

@media print {
  /* 紙はいつも白。ダーク表示のまま印刷しても、暗い面をそのまま紙に出さない。
     :not(#kj-print) は詳細度を上げるためだけの書き方で、html.dark と
     :root:not(.light) の両方に確実に勝つ（そういう id の要素は無い） */
  :root:not(#kj-print) {
    color-scheme: light;
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-strong: #e2e8f0;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-border: #64748b;
    --color-accent: #4f46e5;
    --color-on-accent: #ffffff;
    --color-success: #047857;
    --color-on-success: #ffffff;
    --color-warning: #b45309;
    --color-on-warning: #ffffff;
    --color-danger: #b91c1c;
    --color-on-danger: #ffffff;
    --kj-ink: #0f172a;
    --kj-divider: #cbd5e1;
    --kj-accent-soft: #e0e7ff;
    --kj-marker: #ffd43d;
    --kj-notice-bg: #fffbeb;
    --kj-success-soft: #ecfdf5;
    --kj-danger-soft: #fef2f2;
    --kj-placeholder: #f1f5f9;
  }
  .kj-no-print, .kj-ad { display: none !important; }
  .kj-card--bold, .kj-tool-frame { box-shadow: none; }
}