/* =====================================================================
   style.css — 学年別漢字チェッカー ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   学年カラーは light / dark の両方で視認できる値を定義。
   ===================================================================== */

:root {
  --kg1: #d6336c; /* 1年 ピンク */
  --kg2: #e8590c; /* 2年 オレンジ */
  --kg3: #2f9e44; /* 3年 グリーン */
  --kg4: #1971c2; /* 4年 ブルー */
  --kg5: #7048e8; /* 5年 バイオレット */
  --kg6: #0c8599; /* 6年 ティール */
  --kgout: #868e96; /* 学年外 グレー */
}
@media (prefers-color-scheme: dark) {
  html:not(.sg-dark):not(.sg-light) {
    --kg1: #f783ac;
    --kg2: #ffa94d;
    --kg3: #69db7c;
    --kg4: #74c0fc;
    --kg5: #b197fc;
    --kg6: #3bc9db;
    --kgout: #adb5bd;
  }
}
html.sg-dark {
  --kg1: #f783ac;
  --kg2: #ffa94d;
  --kg3: #69db7c;
  --kg4: #74c0fc;
  --kg5: #b197fc;
  --kg6: #3bc9db;
  --kgout: #adb5bd;
}

/* h2 見出し（共有CSSに sg-subtitle が無い環境でも整うよう最小限） */
.sg-subtitle {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 var(--sg-space-3);
  color: var(--sg-fg, #222);
}

/* 入力 */
.kg-input {
  width: 100%;
  font-size: 1.05rem;
  line-height: 1.7;
  resize: vertical;
  min-height: 5.5em;
}

.kg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-space-3);
  align-items: center;
  margin-top: var(--sg-space-3);
}

/* ghost ボタン（共有CSSに --ghost が無いため補完） */
.sg-btn--ghost {
  background: transparent;
  color: var(--sg-muted, #555);
  border: 1px solid var(--sg-border, rgba(0, 0, 0, 0.15));
}

/* 凡例 */
.kg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-space-2);
  margin-bottom: var(--sg-space-3);
}
.kg-legend__item {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  line-height: 1.6;
}

/* 学年カラー（テキスト色として使う） */
.kg-1 { color: var(--kg1); }
.kg-2 { color: var(--kg2); }
.kg-3 { color: var(--kg3); }
.kg-4 { color: var(--kg4); }
.kg-5 { color: var(--kg5); }
.kg-6 { color: var(--kg6); }
.kg-out { color: var(--kgout); }

/* ハイライト出力 */
.kg-output {
  font-size: 1.25rem;
  line-height: 2;
  word-break: break-word;
  white-space: pre-wrap;
  padding: var(--sg-space-3);
  min-height: 3em;
  background: var(--sg-surface-2, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sg-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--sg-radius, 10px);
  color: var(--sg-fg, #222);
}
.kg-ch {
  font-weight: 700;
  border-bottom: 3px solid currentColor;
  padding: 0 1px;
  border-radius: 2px;
}
.kg-placeholder {
  color: var(--sg-muted, #888);
  font-size: 0.95rem;
  font-weight: 400;
}
.kg-summary {
  margin-top: var(--sg-space-3);
}

/* 統計グリッド */
.kg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--sg-space-2);
}
.kg-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--sg-radius, 10px);
  background: var(--sg-surface-2, rgba(0, 0, 0, 0.03));
  border-left: 4px solid var(--sg-border, #ccc);
}
.kg-stat-1 { border-left-color: var(--kg1); }
.kg-stat-2 { border-left-color: var(--kg2); }
.kg-stat-3 { border-left-color: var(--kg3); }
.kg-stat-4 { border-left-color: var(--kg4); }
.kg-stat-5 { border-left-color: var(--kg5); }
.kg-stat-6 { border-left-color: var(--kg6); }
.kg-stat-out { border-left-color: var(--kgout); }
.kg-stat__label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sg-muted, #666);
}
.kg-stat__num {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--sg-fg, #222);
}
.kg-stat__unit {
  font-size: 0.75rem;
  color: var(--sg-muted, #888);
  margin-left: 1px;
}
.kg-stat__sub {
  font-size: 0.7rem;
  color: var(--sg-muted, #999);
  margin-top: 2px;
}

/* 学年別一覧 */
.kg-grade-block {
  margin-bottom: var(--sg-space-5);
}
.kg-grade-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 var(--sg-space-3);
  padding-bottom: 6px;
  border-bottom: 2px solid currentColor;
}
.kg-grade-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sg-muted, #777);
}
.kg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2em, 1fr));
  gap: 4px;
}
.kg-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 6px;
  background: var(--sg-surface-2, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sg-border, rgba(0, 0, 0, 0.08));
}