/* =========================================================
   base.css : 変数・リセット・タイポグラフィなどの土台
   ========================================================= */

:root {
  /* --- Onsta のブランドカラー（ここを変えると全体の色が変わる） --- */
  --c-primary:        #5B5BD6;  /* メインカラー：インディゴ */
  --c-primary-dark:   #4646b8;
  --c-primary-light:  #ececfb;  /* 淡い背景用 */
  --c-accent:         #ffb020;  /* アクセント：いいね・バッジなど */

  /* --- LoC（集中度）を3段階で色分けする --- */
  --c-loc-high:       #2dd4a7;  /* 高い（70以上） */
  --c-loc-mid:        #f6c445;  /* ふつう（40〜69） */
  --c-loc-low:        #f4785a;  /* 低い（40未満） */

  /* --- 背景・文字・枠線 --- */
  --c-bg:             #f5f6fa;
  --c-surface:        #ffffff;
  --c-surface-2:      #fafaff;
  --c-text:           #1f2233;
  --c-text-sub:       #6b7089;
  --c-text-weak:      #9aa0b5;
  --c-border:         #e5e7f0;
  --c-danger:         #e5484d;
  --c-success:        #2dbd7e;

  /* --- 科目ごとの色（教材サムネのプレースホルダなどに使う） --- */
  --c-subject-math:      #5b5bd6;
  --c-subject-english:   #e8724c;
  --c-subject-physics:   #2d9cdb;
  --c-subject-chemistry: #27ae60;
  --c-subject-japanese:  #eb5a8c;
  --c-subject-social:    #f2994a;
  --c-subject-info:      #8e6fe0;

  /* --- 余白・角丸・影・レイアウト幅 --- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(31, 34, 51, .06);
  --shadow:    0 2px 10px rgba(31, 34, 51, .07);
  --shadow-lg: 0 8px 30px rgba(31, 34, 51, .14);

  --sidebar-w: 240px;
  --header-h:  60px;
  --content-w: 700px;
}

/* --- リセット --- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI",
               "Meiryo", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

/* フォーカスリング（キーボード操作時だけ出す） */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* --- 汎用ユーティリティ --- */
.u-muted    { color: var(--c-text-sub); }
.u-weak     { color: var(--c-text-weak); }
.u-small    { font-size: 12px; }
.u-bold     { font-weight: 700; }
.u-center   { text-align: center; }
.u-row      { display: flex; align-items: center; gap: 8px; }
.u-spread   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.u-hidden   { display: none !important; }
.u-nowrap   { white-space: nowrap; }

/* スクリーンリーダー向けにだけ読ませたいテキスト */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 数字をそろえて表示したいとき（タイマーなど） */
.tabular { font-variant-numeric: tabular-nums; }