:root {
  --bg: #f6f8fa;
  --card: #ffffff;
  --text: #2b2f36;
  --muted: #6b7280;
  --accent: #2f6fb3;
  --linking: #e8890c;   /* オレンジ＝リンキング */
  --reduction: #5f96d8; /* ブルー＝リダクション */
  --flapping: #2fa84f;  /* グリーン＝フラッピング */
  --border: #e3e8ee;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}
.container { max-width: 860px; margin: 0 auto; padding: 16px 16px 80px; }
header.site { padding: 20px 0 4px; }
header.site h1 { font-size: 1.35rem; margin: 0 0 4px; }
header.site .sub { color: var(--muted); font-size: 0.9rem; }
a { color: var(--accent); }

/* レッスン一覧 */
.lesson-list { display: grid; gap: 12px; margin-top: 16px; }
.lesson-card {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--text);
  transition: box-shadow .15s;
}
.lesson-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.lesson-card .cat { font-size: .75rem; color: var(--muted); }
.lesson-card .title { font-weight: 700; font-size: 1.05rem; }
.lesson-card .title-ja { font-size: .85rem; color: var(--muted); }

/* コントロールバー */
.controls {
  position: sticky; top: 0; z-index: 10;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px; margin: 12px 0 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 10px;
}
.controls audio { width: 100%; }
.control-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; }
.control-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
#speed { flex: 1; min-width: 120px; }
.speed-val { font-variant-numeric: tabular-nums; min-width: 9.5em; color: var(--muted); }

/* 凡例 */
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin: 4px 0 16px; }
.legend .sw { display: inline-block; width: .85em; height: .85em; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

/* 文カード */
.sentence {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
}
.sentence .num { font-size: .75rem; color: var(--muted); margin-bottom: 2px; }
.sentence .en { font-size: 1.12rem; font-weight: 500; letter-spacing: .01em; }
.sentence .ja { font-size: .9rem; color: var(--muted); margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 6px; }
.hide-ja .sentence .ja { display: none; }
.hide-btns .sentence .btns { display: none; }
.hide-btns .sentence { padding: 10px 16px; margin-bottom: 8px; }
.hide-btns .sentence .num { display: none; }
.sentence .btns { margin-top: 10px; display: flex; gap: 8px; }
button.play, button.loop {
  border: 1px solid var(--border); background: #fafbfc; color: var(--text);
  border-radius: 8px; padding: 6px 14px; font-size: .85rem; cursor: pointer;
}
button.play:active { background: #eef2f6; }
button.loop.on { background: var(--accent); color: #fff; border-color: var(--accent); }
button.play.playing { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 色付け */
.colored l { color: var(--linking); font-weight: 700; font-style: normal; }
.colored r { color: var(--reduction); font-weight: 700; }
.colored f { color: var(--flapping); font-weight: 700; }
l, r, f { font-style: normal; }

.note { font-size: .8rem; color: var(--muted); margin-top: 24px; }