/* =========================================================
   lesson.css — パチンコ学習ワークスペース 共通スタイル
   Tufte 風：広い余白・セリフ本文・サイドノート・印刷前提
   すべての lessons/*.html と reference/*.html が読み込む
   ========================================================= */

:root {
  --ink:        #1a1613;
  --ink-soft:   #4a443d;
  --ink-faint:  #867d72;
  --paper:      #fffdf8;
  --paper-alt:  #f6f1e6;
  --rule:       #ded5c4;
  --accent:     #8c2f1d;   /* 朱 — 見出しアクセント・リンク */
  --accent-alt: #1f5d50;   /* 深緑 — 正解・プラス */
  --warn:       #9a6b00;   /* 山吹 — 注意 */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  --sans:  "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --mono:  "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:       #ece5d8;
    --ink-soft:  #c0b7a6;
    --ink-faint: #8d8375;
    --paper:     #15130f;
    --paper-alt: #1f1c16;
    --rule:      #3a342a;
    --accent:    #e08a72;
    --accent-alt:#6fc0ac;
    --warn:      #d8ab4a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.85;
  font-feature-settings: "palt" 1;
}

.sheet {
  max-width: 44rem;
  margin: 0 auto;
  padding: 4rem 1rem 6rem;
}

/* ---------- 冒頭ブロック ---------- */

.kicker {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .6rem;
}

h1 {
  font-size: 2.1rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 .5rem;
  letter-spacing: .01em;
}

.subtitle {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0 0 2rem;
  font-style: normal;
}

.meta {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .7rem 0;
  margin: 0 0 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
}

/* ---------- 見出し ---------- */

h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 3.2rem 0 .9rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 2.2rem 0 .6rem;
  color: var(--ink);
}

p { margin: 0 0 1.2rem; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
a:hover { border-bottom-color: var(--accent); }

strong { font-weight: 600; }

code, .num {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--paper-alt);
  padding: .1em .35em;
  border-radius: 3px;
}

/* ---------- サイドノート（Tufte） ---------- */

.sidenote {
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.7;
  color: var(--ink-soft);
  border-left: 3px solid var(--rule);
  padding: .1rem 0 .1rem .9rem;
  margin: 1.4rem 0 1.6rem;
}

@media (min-width: 1180px) {
  .sidenote {
    position: absolute;
    right: calc(50% - 44rem / 2 - 17rem);
    width: 15rem;
    border-left: 2px solid var(--rule);
    margin-top: -.3rem;
  }
  .sheet { position: relative; }
}

/* ---------- 定義・重要ブロック ---------- */

.define {
  background: var(--paper-alt);
  border-left: 4px solid var(--accent);
  padding: 1.1rem 1.3rem;
  margin: 1.8rem 0;
}
.define .term {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--accent);
  display: block;
  margin-bottom: .35rem;
}
.define p:last-child { margin-bottom: 0; }

.formula {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.2rem 1rem;
  margin: 1.6rem 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 2;
}
.formula .eq { font-weight: 600; }
.formula .note {
  display: block;
  font-size: .78rem;
  color: var(--ink-faint);
  margin-top: .5rem;
  line-height: 1.6;
}

.callout {
  border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--paper));
  padding: 1rem 1.2rem;
  margin: 1.8rem 0;
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.8;
}
.callout .label {
  font-weight: 700;
  color: var(--warn);
  letter-spacing: .06em;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- 表 ---------- */

.table-wrap { overflow-x: auto; margin: 1.8rem 0; }

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: .86rem;
  line-height: 1.6;
}
caption {
  caption-side: top;
  text-align: left;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--ink-faint);
  padding-bottom: .5rem;
}
th, td {
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
thead th {
  border-bottom: 2px solid var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}
td.no, th.no {
  width: 2.2rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
td.n { font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--paper-alt); }
.hi { color: var(--accent-alt); font-weight: 600; }
.lo { color: var(--accent); font-weight: 600; }

/* ---------- リスト ---------- */

ol, ul { padding-left: 1.5rem; margin: 0 0 1.4rem; }
li { margin-bottom: .55rem; }
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1rem;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: .15rem;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 演習（quiz.js が使う） ---------- */

.drill {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.4rem 1.4rem 1.2rem;
  margin: 2rem 0;
  background: var(--paper);
}
.drill-head {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--ink-faint);
  margin-bottom: .7rem;
}
.drill .q {
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.8;
}
.drill .given {
  font-family: var(--sans);
  font-size: .85rem;
  background: var(--paper-alt);
  border-radius: 4px;
  padding: .7rem .9rem;
  margin-bottom: 1rem;
  line-height: 1.9;
}

.answer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .9rem;
}
.answer-row input[type="number"],
.answer-row input[type="text"] {
  font-family: var(--mono);
  font-size: 1rem;
  width: 7rem;
  padding: .45rem .6rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.answer-row input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px;
}

button.check, button.reveal {
  font-family: var(--sans);
  font-size: .85rem;
  padding: .45rem 1.1rem;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
}
button.reveal { background: transparent; color: var(--accent); }
button.check:hover, button.reveal:hover { filter: brightness(1.1); }

.choices { list-style: none; padding: 0; margin: 0; }
.choices li { margin-bottom: .5rem; }
.choices button {
  font-family: var(--sans);
  font-size: .92rem;
  width: 100%;
  text-align: left;
  padding: .65rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.choices button:hover { background: var(--paper-alt); }
.choices button.right {
  border-color: var(--accent-alt);
  background: color-mix(in srgb, var(--accent-alt) 12%, var(--paper));
}
.choices button.wrong {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  opacity: .75;
}

.verdict {
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.85;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: 4px;
  display: none;
}
.verdict.show { display: block; }
.verdict.ok {
  background: color-mix(in srgb, var(--accent-alt) 12%, var(--paper));
  border-left: 4px solid var(--accent-alt);
}
.verdict.ng {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  border-left: 4px solid var(--accent);
}
.verdict .why { display: block; margin-top: .4rem; color: var(--ink-soft); }

.score {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink-faint);
  text-align: right;
  margin: 1rem 0 0;
}

/* ---------- フッター ---------- */

.footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.85;
  color: var(--ink-soft);
}
.footer h3 {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .14em;
  color: var(--ink-faint);
  margin: 1.6rem 0 .5rem;
  font-weight: 600;
}
.footer ol { padding-left: 1.4rem; }
.ask {
  background: var(--paper-alt);
  border-radius: 5px;
  padding: 1rem 1.2rem;
  margin-top: 2rem;
  font-size: .88rem;
}
.ask strong { color: var(--accent); }

.cite { font-size: .78rem; color: var(--ink-faint); font-family: var(--sans); }
.cite a { color: var(--ink-soft); }

/* ---------- 指で操作する端末（スマホ・タブレット） ----------
   画面の広さではなく「ポインタが粗いか＝指か」で判定する。画面幅で判定すると、
   ウィンドウを小さくした PC まで巨大なボタンになってしまう。pointer: coarse なら
   マウスの PC は見た目が1pxも変わらへん。

   マウスは 1px を狙えるが、指の接地面は 8mm ほどある。Android は 48px、
   Apple は 44px をタップの的の最小の目安にしてる。 */

@media (pointer: coarse) {

  /* 演習の判定・正解表示ボタン。素の高さは 37px しかなかった */
  button.check,
  button.reveal {
    min-height: 48px;
    font-size: 1rem;
    padding: .6rem 1.3rem;
  }

  /* 選択肢。押し間違いがそのまま誤答になるので広めに取る */
  .choices button {
    min-height: 48px;
    padding: .85rem .9rem;
    font-size: 1rem;
  }

  /* 入力欄は、文字が16px未満やと触った瞬間にブラウザが画面を勝手に拡大する。
     指の端末では16pxを下回らせへん。高さも 35px → 44px に上げる */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 44px;
    font-size: max(16px, 1rem);
  }

  /* 回転率・ボーダー計算ツールの入力欄は1列に並べる。
     375px 幅では 2 列に割れて、どの欄が何かが読みにくい */
  .calc-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* 演習の答え入力欄は指で狙える幅にする */
  .answer-row input[type="number"],
  .answer-row input[type="text"] { width: 8.5rem; }

  /* ページ間を移動するリンク（冒頭のメタ行・末尾の関連リスト・目次の表）は
     押せる的にする。本文中のリンクは行の高さを壊すので触らへん */
  .meta a,
  .footer ol a,
  .table-wrap td a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .1rem;
  }
  .meta { gap: 0 1.2rem; }
  .footer ol li { margin-bottom: 0; }
}

/* ---------- 印刷 ---------- */

@media print {
  :root {
    --ink: #000; --ink-soft: #333; --ink-faint: #555;
    --paper: #fff; --paper-alt: #f2f2f2; --rule: #bbb;
    --accent: #000; --accent-alt: #000; --warn: #000;
  }
  body { font-size: 10.5pt; line-height: 1.6; }
  .sheet { max-width: none; padding: 0; }
  .sidenote { position: static; width: auto; right: auto; }
  button, .answer-row input { display: none; }
  .verdict { display: block !important; }
  h2, h3 { page-break-after: avoid; }
  .drill, table, .define, .formula { page-break-inside: avoid; }
  a { border-bottom: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}

/* ---------- 計算ツール（calc.js が使う） ---------- */

.calc {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-alt);
  padding: 1.2rem 1.3rem 1.3rem;
  margin: 2rem 0;
  font-family: var(--sans);
}
.calc-head {
  font-size: .76rem;
  letter-spacing: .13em;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}
.calc-sub { letter-spacing: .02em; color: var(--ink-soft); }

.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .9rem;
  margin-bottom: 1.1rem;
}
.calc-grid label {
  display: flex;
  flex-direction: column;
  font-size: .8rem;
  color: var(--ink-soft);
  gap: .3rem;
}
.calc-grid .u {
  font-size: .72rem;
  color: var(--ink-faint);
}
.calc-grid input {
  font-family: var(--mono);
  font-size: 1.05rem;
  padding: .45rem .55rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.calc-grid label .u { order: 3; }

.calc-rows { border-top: 1px solid var(--rule); }
.calc-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .86rem;
}
.calc-row span { color: var(--ink-soft); }
.calc-row b { font-variant-numeric: tabular-nums; }

.calc-verdict {
  margin-top: .9rem;
  padding: .8rem 1rem;
  border-radius: 4px;
  font-size: .88rem;
  line-height: 1.8;
  border-left: 4px solid var(--ink-faint);
  background: var(--paper);
}
.calc-verdict.go  { border-left-color: var(--accent-alt); background: color-mix(in srgb, var(--accent-alt) 12%, var(--paper)); }
.calc-verdict.mid { border-left-color: var(--warn);       background: color-mix(in srgb, var(--warn) 10%, var(--paper)); }
.calc-verdict.ng  { border-left-color: var(--accent);     background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }

.calc-note, .calc-msg {
  margin-top: .7rem;
  font-size: .76rem;
  line-height: 1.7;
  color: var(--ink-faint);
}

@media print {
  .calc-grid input { display: inline-block; }
}