/* ===================================================
   高校数学 解説×ドリル 共通スタイル v2
   コンセプト: 方眼紙×文具。プリント教材の信頼感に
   デザインの厚みを足す。印刷時は装飾を落とす。
   =================================================== */
:root{
  --ink:#242c26;
  --ink-soft:#4a544c;
  --paper:#f7f6f1;
  --card:#fffefb;
  --line:#dcd6c6;
  --line-soft:#e9e4d6;
  --accent:#2e6e5c;
  --accent-deep:#1f5646;
  --accent-soft:#e2efe8;
  --accent-ghost:#f0f6f2;
  --num:#8a7a52;
  --red:#b5533c;
  --red-soft:#f7e8e4;
  --grid-line:rgba(46,110,92,.055);
  --shadow:0 1px 2px rgba(46,74,62,.06),0 8px 24px -12px rgba(46,74,62,.18);
  --shadow-sm:0 1px 3px rgba(46,74,62,.10);
  --gothic:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --mincho:"Hiragino Mincho ProN","Yu Mincho",serif;
  --radius:6px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--paper);
  /* 方眼紙モチーフ（ごく薄く） */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:26px 26px;
  color:var(--ink);
  font-family:var(--mincho);
  line-height:1.8;
  padding:0 0 4.5rem;
}
::selection{background:var(--accent-soft);}

/* ---------- ヘッダ（マスタヘッド） ---------- */
header.page-header{
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  padding:2.2rem 1.5rem 1.7rem;
  text-align:center;
  position:relative;
}
header.page-header::before{ /* 上端の学帯 */
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:5px;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent) 55%,var(--num));
}
header.page-header h1{
  font-size:clamp(1.55rem, 4.2vw, 2.05rem);
  letter-spacing:.075em;
  margin:.4rem 0 .5rem;
  font-weight:600;
  color:var(--ink);
}
header.page-header h1::after{
  content:"";
  display:block;
  width:3.2em;
  height:3px;
  margin:.55rem auto 0;
  background:var(--accent);
  border-radius:2px;
}
header.page-header .subtitle{
  color:var(--ink-soft);
  font-size:.88rem;
  margin:.2rem 0 0;
  font-family:var(--gothic);
  letter-spacing:.04em;
}
.crumbs{
  font-family:var(--gothic);
  font-size:.78rem;
  color:#7c766a;
  margin:0 0 .6rem;
  letter-spacing:.05em;
}
.crumbs a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.crumbs a:hover{border-bottom-color:var(--accent);}

.pdf-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.15rem;
  font-family:var(--gothic);
}
.pdf-links a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.83rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--accent-deep);
  border:1.5px solid var(--accent);
  border-radius:var(--radius);
  padding:.42rem 1.05rem;
  text-decoration:none;
  background:var(--card);
  transition:background .2s, transform .15s, box-shadow .2s;
}
.pdf-links a::before{
  content:"↓";
  font-weight:700;
  font-size:.9em;
}
.pdf-links a:hover{background:var(--accent-ghost);box-shadow:var(--shadow-sm);}
.pdf-links a:active{transform:translateY(1px);}
.pdf-links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pdf-links a.solid{background:var(--accent);color:#fdfdfa;border-color:var(--accent);}
.pdf-links a.solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);}

main{
  max-width:820px;
  margin:0 auto;
  padding:2.2rem 1.2rem;
}

/* ---------- 解説ブロック ---------- */
section.block{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:10px;
  box-shadow:var(--shadow-sm);
  padding:1.5rem 1.6rem 1.3rem;
  margin-bottom:1.6rem;
}
.step-tag{
  display:inline-block;
  font-family:var(--gothic);
  font-size:.74rem;
  font-weight:700;
  color:#fdfdfa;
  background:var(--accent);
  padding:.2rem .75rem;
  border-radius:3px;
  letter-spacing:.14em;
  margin-bottom:.55rem;
  box-shadow:inset 0 -1.5px 0 rgba(0,0,0,.14);
}
h2{
  font-family:var(--gothic);
  font-size:1.22rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.02em;
  margin:0 0 .9rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line-soft);
}
h3{
  font-family:var(--gothic);
  font-size:1rem;
  font-weight:700;
  color:var(--accent-deep);
  margin:1.4rem 0 .5rem;
  padding-left:.7rem;
  border-left:4px solid var(--accent);
}
p{margin:.55rem 0;}
.lead{
  font-family:var(--gothic);
  font-size:.95rem;
  color:var(--ink-soft);
  line-height:1.85;
}
figure{margin:1.1rem 0;text-align:center;}
figure img, figure svg{
  max-width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
}
figcaption{
  font-family:var(--gothic);
  font-size:.78rem;
  color:#7c766a;
  margin-top:.35rem;
}
.graph{margin:1.1rem auto;text-align:center;}
.graph svg{
  max-width:100%;
  height:auto;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.box{
  background:var(--accent-ghost);
  border:1px solid var(--line-soft);
  border-left:5px solid var(--accent);
  padding:.95rem 1.15rem;
  border-radius:4px;
  font-family:var(--gothic);
  font-size:.9rem;
  line-height:1.8;
}
.box.gold{border-left-color:var(--num);background:#faf7ee;}
.box.red{border-left-color:var(--red);background:var(--red-soft);}
.flow{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  font-family:var(--gothic);
  font-size:.9rem;
}
.flow-step{
  background:var(--accent-soft);
  border:1px solid rgba(46,110,92,.35);
  border-radius:var(--radius);
  padding:.65rem .95rem;
}
.flow-arrow{
  text-align:center;
  color:var(--accent);
  font-size:1.1rem;
  margin:-.1rem 0;
}
.branch{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:.55rem;
}
.branch.two{grid-template-columns:1fr 1fr;}
@media (max-width:600px){
  .branch,.branch.two{grid-template-columns:1fr;}
}
.branch > div{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  border-radius:4px;
  padding:.6rem .75rem;
  font-size:.85rem;
  font-family:var(--gothic);
}
.branch strong{color:var(--accent-deep);}

/* ---------- 例題 ---------- */
.worked-example{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:1.05rem 1.2rem;
  margin-top:.9rem;
  box-shadow:var(--shadow-sm);
}
.worked-example .q{
  font-family:var(--gothic);
  font-weight:700;
  color:var(--num);
  font-size:.88rem;
  margin-bottom:.45rem;
}
.final{
  font-weight:700;
  color:var(--accent-deep);
  font-family:var(--gothic);
}

/* ---------- 練習問題 ---------- */
.practice-title{
  font-family:var(--gothic);
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
  text-align:center;
  margin:2.6rem 0 .5rem;
  position:relative;
  padding-top:2rem;
}
.practice-title::before{
  content:"DRILL";
  display:block;
  font-size:.68rem;
  letter-spacing:.42em;
  color:var(--accent);
  margin-bottom:.2rem;
}
.practice-title::after{
  content:"";
  display:block;
  width:4.5em;
  height:3px;
  margin:.5rem auto 0;
  background:linear-gradient(90deg,var(--accent),var(--num));
  border-radius:2px;
}
.practice-title + .lead{margin-bottom:1.4rem;}
.tier-title{
  font-family:var(--gothic);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.06em;
  color:#fdfdfa;
  background:var(--num);
  display:inline-block;
  padding:.28rem 1.1rem;
  border-radius:4px 4px 0 0;
  margin:1.9rem 0 0;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
}
.tier-title.std{background:var(--accent);}
.tier-title.adv{background:var(--red);}
.tier-title + .problem{border-top:2px solid var(--line);}
.problem{
  background:var(--card);
  border-bottom:1px solid var(--line-soft);
  padding:1.1rem 1rem;
  transition:background .2s;
}
.problem:hover{background:#fbfaf4;}
.problem:last-of-type{border-bottom:2px solid var(--line);}
.problem-head{display:flex;gap:.75rem;align-items:baseline;}
.problem-num{
  font-family:var(--gothic);
  font-weight:700;
  font-size:.92rem;
  color:var(--accent-deep);
  background:var(--accent-soft);
  min-width:2rem;
  text-align:center;
  border-radius:4px;
  padding:.05rem .25rem;
}
.problem-body{flex:1;}
.pattern-hint{
  display:inline-block;
  font-family:var(--gothic);
  font-size:.72rem;
  color:var(--accent-deep);
  background:var(--accent-ghost);
  border:1px solid rgba(46,110,92,.25);
  padding:.08rem .55rem;
  border-radius:3px;
  margin-bottom:.4rem;
}

/* ---------- 自動採点 ---------- */
.quiz-row{
  font-family:var(--gothic);
  font-size:.92rem;
  margin:.6rem 0 .2rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem .55rem;
}
input.quiz-input{
  font-family:var(--gothic);
  font-size:1rem;
  width:6.8rem;
  padding:.32rem .5rem;
  border:1px solid var(--line);
  border-bottom:2.5px solid var(--num);
  border-radius:4px 4px 0 0;
  background:#fff;
  text-align:center;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
input.quiz-input:focus{
  outline:none;
  border-bottom-color:var(--accent);
  box-shadow:0 2px 0 0 rgba(46,110,92,.25);
  background:#fcfffd;
}
input.quiz-input.correct{border-bottom-color:var(--accent);background:var(--accent-soft);}
input.quiz-input.wrong{border-bottom-color:var(--red);background:var(--red-soft);}
.mark{
  font-family:var(--gothic);
  font-weight:700;
  font-size:1.05rem;
  min-width:1.2rem;
  display:inline-block;
}
.mark.ok{color:var(--accent);}
.mark.ng{color:var(--red);}
button.check-btn{
  font-family:var(--gothic);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  color:#fdfdfa;
  background:var(--accent);
  border:none;
  border-radius:var(--radius);
  padding:.38rem .95rem;
  cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.16), var(--shadow-sm);
  transition:background .2s, transform .12s;
}
button.check-btn:hover{background:var(--accent-deep);}
button.check-btn:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.16);}
button.check-btn:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px;}
.answer-display{
  font-family:var(--gothic);
  font-weight:700;
  color:var(--accent-deep);
  border-bottom:2px solid var(--accent);
  padding:0 .4rem;
}

/* ---------- スコアパネル ---------- */
.score-panel{
  position:sticky;
  bottom:0;
  background:rgba(255,254,251,.96);
  backdrop-filter:blur(4px);
  border-top:2px solid var(--accent);
  font-family:var(--gothic);
  font-size:.88rem;
  padding:.6rem 1.2rem;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.8rem 1.2rem;
  align-items:center;
  box-shadow:0 -4px 16px rgba(46,74,62,.10);
}
.score-panel .score-num{font-weight:700;color:var(--accent-deep);font-size:1.08rem;}
.score-panel button{
  font-family:var(--gothic);
  font-size:.78rem;
  font-weight:600;
  color:var(--accent-deep);
  background:var(--card);
  border:1.5px solid var(--accent);
  border-radius:var(--radius);
  padding:.3rem .85rem;
  cursor:pointer;
  transition:background .2s, transform .12s;
}
.score-panel button:hover{background:var(--accent-ghost);}
.score-panel button:active{transform:translateY(1px);}

/* ---------- 解答開閉 ---------- */
details{margin-top:.5rem;}
summary{
  cursor:pointer;
  font-family:var(--gothic);
  font-size:.83rem;
  font-weight:600;
  color:var(--accent-deep);
  width:fit-content;
  padding:.28rem .75rem;
  border:1.5px solid var(--accent);
  border-radius:var(--radius);
  list-style:none;
  background:var(--card);
  transition:background .2s;
  user-select:none;
}
summary:hover{background:var(--accent-ghost);}
summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
summary::-webkit-details-marker{display:none;}
summary::before{content:"▸ ";}
details[open] summary::before{content:"▾ ";}
.answer{
  margin-top:.6rem;
  padding:.85rem 1rem;
  background:#fff;
  border:1px solid var(--line-soft);
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--gothic);
  font-size:.9rem;
  white-space:pre-wrap;
  animation:answerIn .22s ease-out;
}
@keyframes answerIn{
  from{opacity:0;transform:translateY(-3px);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion: reduce){
  .answer{animation:none;}
  html{scroll-behavior:auto;}
}
.answer .katex{white-space:normal;}

/* ---------- ページ送り・フッタ ---------- */
.pager{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:2.8rem;
  font-family:var(--gothic);
  font-size:.85rem;
}
.pager a{
  color:var(--accent-deep);
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.6rem 1rem;
  background:var(--card);
  max-width:48%;
  box-shadow:var(--shadow-sm);
  transition:background .2s, transform .15s, box-shadow .2s;
}
.pager a:hover{background:var(--accent-ghost);box-shadow:var(--shadow);}
.pager a:active{transform:translateY(1px);}
footer{
  text-align:center;
  color:#938d7c;
  font-size:.78rem;
  font-family:var(--gothic);
  letter-spacing:.05em;
  margin-top:2.4rem;
}

/* ---------- 目次（index.html） ---------- */
.site-hero{
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  padding:3.2rem 1.5rem 2.4rem;
  text-align:center;
  position:relative;
}
.site-hero::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:5px;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent) 55%,var(--num));
}
.site-hero .hero-label{
  font-family:var(--gothic);
  font-size:.72rem;
  letter-spacing:.42em;
  color:var(--accent);
  margin:0 0 .6rem;
}
.site-hero h1{
  font-size:clamp(1.8rem, 5vw, 2.5rem);
  letter-spacing:.1em;
  margin:0 0 .8rem;
  font-weight:600;
}
.site-hero .hero-sub{
  font-family:var(--gothic);
  font-size:.92rem;
  color:var(--ink-soft);
  max-width:34em;
  margin:0 auto;
  line-height:2;
}
.hero-stats{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.4rem;
  font-family:var(--gothic);
}
.hero-stats span{
  font-size:.8rem;
  color:var(--accent-deep);
  background:var(--accent-ghost);
  border:1px solid rgba(46,110,92,.25);
  border-radius:999px;
  padding:.25rem .95rem;
}
.hero-stats span strong{font-size:.95rem;}

.toc-subject{margin-bottom:2.6rem;}
.toc-subject > h2{
  border:none;
  padding:0 0 0 .75rem;
  border-left:6px solid var(--accent);
  font-size:1.35rem;
  letter-spacing:.08em;
  margin-bottom:1rem;
  display:flex;
  align-items:baseline;
  gap:.7rem;
}
.toc-subject > h2 .subject-note{
  font-size:.78rem;
  font-weight:400;
  color:#938d7c;
  letter-spacing:.04em;
}
.toc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem;
}
@media (max-width:640px){
  .toc-grid{grid-template-columns:1fr;}
}
.toc-chapter{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:10px;
  box-shadow:var(--shadow-sm);
  padding:1.05rem 1.25rem 1rem;
  transition:box-shadow .2s, transform .2s;
}
.toc-chapter.open:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
.toc-chapter h3{
  margin:0 0 .55rem;
  padding:0 0 .45rem;
  border-left:none;
  border-bottom:1px solid var(--line-soft);
  font-size:1rem;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem;
}
.chapter-state{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.05em;
  white-space:nowrap;
  color:var(--accent-deep);
  background:var(--accent-soft);
  border-radius:3px;
  padding:.12rem .5rem;
}
.chapter-state.prep{
  color:#938d7c;
  background:#f1efe6;
}
.toc-chapter ul{
  margin:.3rem 0 0;
  padding-left:0;
  list-style:none;
  font-family:var(--gothic);
  font-size:.88rem;
}
.toc-chapter li{
  margin:0;
  padding:.28rem 0 .28rem 1.15rem;
  position:relative;
}
.toc-chapter li::before{
  content:"";
  position:absolute;
  left:.15rem;
  top:.92em;
  width:.45em;
  height:.45em;
  border:1.5px solid var(--line);
  border-radius:2px;
  background:#fff;
}
.toc-chapter li.done::before{
  background:var(--accent);
  border-color:var(--accent);
}
.toc-chapter a{
  color:var(--accent-deep);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.toc-chapter a:hover{border-bottom-color:var(--accent);}
.toc-chapter .soon{color:#a89f8a;}
.toc-chapter .soon::after{
  content:"（準備中）";
  font-size:.76rem;
}

/* ---------- レスポンシブ（スマホ最適化） ---------- */
.katex-display{overflow-x:auto;overflow-y:hidden;padding:.15rem 0;}
@media (max-width:600px){
  body{background-size:22px 22px;}
  header.page-header{padding:1.7rem 1rem 1.4rem;}
  header.page-header h1{letter-spacing:.04em;}
  .crumbs{font-size:.72rem;line-height:1.6;}
  .pdf-links a{font-size:.78rem;padding:.4rem .85rem;}
  main{padding:1.4rem .7rem;}
  section.block{padding:1.1rem .95rem 1rem;border-radius:8px;}
  h2{font-size:1.08rem;}
  .lead{font-size:.9rem;}
  .box{padding:.8rem .85rem;font-size:.86rem;}
  .worked-example{padding:.85rem .9rem;}
  .problem{padding:.95rem .35rem;}
  .problem-head{gap:.55rem;}
  .quiz-row{font-size:.88rem;gap:.35rem .45rem;}
  input.quiz-input{width:5.4rem;font-size:16px;} /* 16px未満だとiOSが自動ズームする */
  button.check-btn{padding:.34rem .8rem;}
  .answer{font-size:.86rem;padding:.75rem .8rem;}
  .flow-step{font-size:.85rem;padding:.55rem .75rem;}
  .pager{flex-direction:column;}
  .pager a{max-width:100%;text-align:center;}
  .score-panel{font-size:.8rem;padding:.5rem .7rem;gap:.5rem .8rem;}
  .site-hero{padding:2.3rem 1rem 1.9rem;}
  .site-hero .hero-sub{font-size:.86rem;}
  .hero-stats span{font-size:.74rem;padding:.2rem .75rem;}
  .toc-subject > h2{font-size:1.15rem;}
  .graph svg{width:100%;height:auto;}
}
@media (max-width:380px){
  input.quiz-input{width:4.6rem;}
  .pdf-links{flex-direction:column;align-items:center;}
}

/* ---------- 印刷・PDFモード ---------- */
@page{
  size:A4;
  margin:13mm 11mm;
}
@media print{
  body{
    padding-bottom:0;
    background-image:none;
    background-color:#fff;
    orphans:3;
    widows:3;
  }
  p{orphans:3;widows:3;}
  header.page-header{box-shadow:none;}
  header.page-header::before{display:none;}
  section.block,.worked-example,.graph svg,.pager a,.problem{box-shadow:none;}
  section.block{border-color:var(--line);}
  .crumbs,.pdf-links,.pager,button.check-btn,.score-panel,.mark{display:none !important;}

  /* 見出し直後の改ページ禁止（見出しがページ末尾に孤立するのを防ぐ） */
  h2,h3,.practice-title,.tier-title,.step-tag{
    break-after:avoid;
    break-inside:avoid;
  }
  h2 + *,h3 + *,.practice-title + *,.step-tag + *{
    break-before:avoid;
  }
  /* tier-title は直後の最初の問題と必ず同じページに（最悪パターン: 帯だけページ末尾に残る） */
  .tier-title + .problem{
    break-before:avoid;
  }

  /* ヘッダ（タイトル＋氏名得点欄）はページ内で分割しない・直後の改ページも避ける */
  header.page-header{
    break-inside:avoid;
    break-after:avoid;
  }
  .worksheet-meta{
    break-inside:avoid;
  }

  /* まとまりのある要素はページ内で分割しない（収まらない高さの場合は自然に割れるのを許容） */
  section.block{break-inside:avoid;}
  .problem{break-inside:avoid;background:#fff;}
  .worked-example{break-inside:avoid;}
  .graph{break-inside:avoid;}
  figure{break-inside:avoid;}
  .box{break-inside:avoid;}
  .flow{break-inside:avoid;}
  .branch{break-inside:avoid;}
  .worksheet-meta{break-inside:avoid;}

  input.quiz-input{background:#fff !important;border-bottom:2px solid var(--num) !important;box-shadow:none;width:5rem;}
  .quiz-row{font-size:.88rem;gap:.3rem .4rem;}
  .answer{animation:none;}
}

/* ---------- 実験ウィジェット（.explorer） ---------- */
/* スライダーでパラメータを動かすとグラフがリアルタイムに変わる体験用カード。
   quiz.js の initExplorers() がマークアップを構築する。 */
.explorer{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-top:3px solid var(--accent);
  border-radius:10px;
  box-shadow:var(--shadow-sm);
  padding:1.3rem 1.4rem 1.2rem;
  margin:1.4rem 0;
}
.explorer-graph{margin:0 auto .9rem;}
.explorer-graph svg{display:block;margin:0 auto;}
.explorer-formula{
  font-family:var(--gothic);
  font-size:1.1rem;
  text-align:center;
  color:var(--ink);
  background:var(--accent-ghost);
  border:1px solid rgba(46,110,92,.2);
  border-radius:var(--radius);
  padding:.6rem .8rem;
  min-height:2.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.85rem;
}
.explorer-formula .katex{font-size:1.08em;}
.explorer-extremum{
  font-family:var(--gothic);
  font-size:.9rem;
  font-weight:700;
  color:var(--accent-deep);
  text-align:center;
  background:var(--accent-soft);
  border-radius:var(--radius);
  padding:.45rem .7rem;
  margin-bottom:.9rem;
}
.explorer-controls{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin-bottom:.9rem;
}
.explorer-param-row{
  display:grid;
  grid-template-columns:1.6rem 3.2rem 1fr;
  align-items:center;
  gap:.7rem;
  font-family:var(--gothic);
}
.explorer-param-label{
  font-family:var(--mincho);
  font-style:italic;
  font-size:1.05rem;
  font-weight:700;
  color:var(--accent-deep);
  text-align:center;
}
.explorer-param-value{
  font-size:.92rem;
  font-weight:700;
  color:var(--ink);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.explorer-param-slider{
  width:100%;
  height:44px;
  padding:0;
  margin:0;
  accent-color:var(--accent);
  cursor:pointer;
  touch-action:manipulation;
}
.explorer-actions{
  display:flex;
  justify-content:center;
}
button.explorer-reset{
  font-family:var(--gothic);
  font-size:.8rem;
  font-weight:600;
  color:var(--accent-deep);
  background:var(--card);
  border:1.5px solid var(--accent);
  border-radius:var(--radius);
  padding:.38rem 1.1rem;
  cursor:pointer;
  transition:background .2s, transform .12s;
}
button.explorer-reset:hover{background:var(--accent-ghost);}
button.explorer-reset:active{transform:translateY(1px);}
button.explorer-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.explorer-caption{
  font-family:var(--gothic);
  font-size:.8rem;
  color:#7c766a;
  text-align:center;
  margin-top:.9rem;
}
@media (max-width:600px){
  .explorer{padding:1.05rem 1rem 1rem;}
  .explorer-formula{font-size:1rem;}
  .explorer-param-row{
    grid-template-columns:1fr;
    gap:.3rem;
    background:var(--accent-ghost);
    border-radius:var(--radius);
    padding:.5rem .6rem;
  }
  .explorer-param-label{
    grid-row:1;
    text-align:left;
  }
  .explorer-param-value{
    grid-row:1;
    text-align:right;
    margin-left:auto;
  }
  .explorer-param-label,.explorer-param-value{
    display:inline-block;
    width:auto;
  }
  .explorer-param-row{display:flex;flex-wrap:wrap;align-items:center;}
  .explorer-param-slider{width:100%;order:3;flex:1 1 100%;}
}

/* インタラクティブ専用のため印刷・PDFモードでは表示しない */
@media print{
  .explorer{display:none !important;}
}
body.mode-q .explorer,body.mode-a .explorer{display:none !important;}

/* ---------- 応用問題（PDF限定・.pdf-extra） ---------- */
/* 通常のスクリーン表示では隠す。問題プリント/解答モードでのみ表示する。 */
.pdf-extra{display:none;}

/* ---------- おまけドリルへの導線カード（.bonus-drill） ----------
   各章ページの練習問題末尾に置く「腕試しドリル」への案内カード。
   方眼紙モチーフ（--grid-lineを流用・本文の背景より密度を上げて
   ノートの切れ端のような質感にする）＋num色の「おまけ」ラベルで
   controlledな遊び心を出す。印刷（PDF）・問題/解答モードには出さない。 */
.bonus-drill{
  margin:1.7rem 0 2.1rem;
  padding:1.15rem 1.3rem 1.3rem;
  text-align:center;
  background-color:var(--card);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:11px 11px;
  border:1.5px dashed var(--num);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.bonus-drill .bonus-label{
  display:inline-block;
  margin:0 auto .55rem;
  padding:.18rem .8rem;
  background:var(--num);
  color:#fdfdfa;
  font-family:var(--gothic);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.08em;
  border-radius:999px;
}
.bonus-drill p:not(.bonus-label){
  margin:0 auto .8rem;
  max-width:34rem;
  font-family:var(--gothic);
  font-size:.9rem;
  color:var(--ink-soft);
  line-height:1.7;
}
.bonus-drill a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--gothic);
  font-size:.88rem;
  font-weight:700;
  color:var(--accent-deep);
  background:var(--card);
  border:1.5px solid var(--accent);
  border-radius:var(--radius);
  padding:.55rem 1.15rem;
  text-decoration:none;
  transition:background .2s, box-shadow .2s;
}
.bonus-drill a:hover{background:var(--accent-ghost);box-shadow:var(--shadow-sm);}
.bonus-drill a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media print{
  .bonus-drill{display:none !important;}
}

/* ---------- 氏名・得点欄（mode時にquiz.jsが挿入する罫線バー） ---------- */
.worksheet-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem 1.6rem;
  font-family:var(--gothic);
  font-size:.92rem;
  color:var(--ink);
  max-width:820px;
  margin:1.3rem auto 0;
  padding:0 1.2rem;
}
.worksheet-meta .meta-name{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  flex:1 1 auto;
  min-width:12rem;
}
.worksheet-meta .meta-name-line{
  flex:1 1 auto;
  max-width:50%;
  min-width:6rem;
  height:1.2em;
  border-bottom:1px solid var(--ink);
}
.worksheet-meta .meta-score{
  white-space:nowrap;
  flex:0 0 auto;
}

/* ---------- 問題プリント版（?mode=q）・解答つき版（?mode=a）共通 ---------- */
body.mode-q,body.mode-a{background-image:none;background-color:#fff;}
body.mode-q section.block,body.mode-a section.block,
body.mode-q .crumbs,body.mode-a .crumbs,
body.mode-q .pdf-links,body.mode-a .pdf-links,
body.mode-q .pager,body.mode-a .pager,
body.mode-q button.check-btn,body.mode-a button.check-btn,
body.mode-q .score-panel,body.mode-a .score-panel,
body.mode-q .mark,body.mode-a .mark{display:none !important;}
body.mode-q .bonus-drill,body.mode-a .bonus-drill{display:none !important;}
body.mode-q .pdf-extra,body.mode-a .pdf-extra{display:block;}
/* 応用問題は必ず新しいページから開始（タイトルのページ末尾孤立を防ぐ） */
@media print{
  .pdf-extra{break-before:page;}
}
body.mode-q footer,body.mode-a footer{display:none !important;}
/* 画面用の操作説明（採点ボタン等への言及）は紙面に出さない */
body.mode-q main > .practice-title + .lead,
body.mode-a main > .practice-title + .lead{display:none !important;}

/* 問題のみ版（?mode=q）: 解答を完全に隠す */
body.mode-q details{display:none !important;}
/* 解答つき版（?mode=a）: 解答を全て開いた状態で表示 */
body.mode-a details{display:block;}
body.mode-a summary{display:none;}
body.mode-a .answer{margin-top:.3rem;animation:none;}

/* =====================================================
   問題プリントPDF 体裁見本（?style=b / ?style=c）
   styleパラメータ省略時（見本A＝現行）は body に style-b/style-c が
   一切付かないため、以下は完全に無効。既存の見た目に影響ゼロ。
   ===================================================== */

/* ---------- 見本B: 学校プリント風・高密度・モノクロ ----------
   mode-q / mode-a のときのみ有効（画面の通常表示には影響させない）。 */
body.style-b.mode-q,
body.style-b.mode-a{
  --ink:#111;
  --ink-soft:#333;
  --accent:#222;
  --accent-deep:#000;
  --accent-soft:#e7e7e7;
  --accent-ghost:#f1f1f1;
  --num:#000;
  --red:#000;
  --red-soft:#e7e7e7;
  --line:#8a8a8a;
  --line-soft:#cfcfcf;
  font-family:var(--gothic);
  font-size:9.5pt;
  line-height:1.5;
}
body.style-b.mode-q main,
body.style-b.mode-a main{
  max-width:none;
  columns:2;
  column-gap:8mm;
  padding:1.4rem .6rem;
}
body.style-b.mode-q .practice-title,
body.style-b.mode-a .practice-title{
  column-span:all;
  font-size:1.1rem;
  margin:1rem 0 .3rem;
  padding-top:.9rem;
}
body.style-b.mode-q .tier-title,
body.style-b.mode-a .tier-title{
  margin:.8rem 0 0;
  font-size:.78rem;
  padding:.2rem .7rem;
  background:#000;
  color:#fff;
}
body.style-b.mode-q .tier-title.std,
body.style-b.mode-a .tier-title.std,
body.style-b.mode-q .tier-title.adv,
body.style-b.mode-a .tier-title.adv{
  background:#000;
  color:#fff;
}
body.style-b.mode-q .problem,
body.style-b.mode-a .problem{
  padding:.5rem .45rem;
  break-inside:avoid;
  font-size:9.5pt;
}
body.style-b.mode-q .problem-head,
body.style-b.mode-a .problem-head{
  gap:.45rem;
}
body.style-b.mode-q .problem-num,
body.style-b.mode-a .problem-num{
  background:#fff;
  color:#000;
  border:1.3px solid #000;
  font-size:.82rem;
  min-width:1.7rem;
}
body.style-b.mode-q .pattern-hint,
body.style-b.mode-a .pattern-hint{
  font-size:.66rem;
  padding:.05rem .4rem;
  margin-bottom:.2rem;
  border-color:#999;
  background:#f1f1f1;
}
body.style-b.mode-q .quiz-row,
body.style-b.mode-a .quiz-row{
  font-size:9.5pt;
  margin:.3rem 0 .05rem;
  gap:.2rem .3rem;
}
body.style-b.mode-q input.quiz-input,
body.style-b.mode-a input.quiz-input{
  width:4.4rem;
  padding:.15rem .3rem;
  font-size:9.5pt;
}
body.style-b.mode-q .answer,
body.style-b.mode-a .answer{
  font-size:8.3pt;
  padding:.45rem .55rem;
  line-height:1.45;
}
body.style-b.mode-q .worksheet-meta,
body.style-b.mode-a .worksheet-meta{
  font-size:9.5pt;
  max-width:none;
}

/* ---------- 見本C: じっくり計算スペース型 ----------
   問題のみ版（mode=q）だけに適用。解答つき版（mode=a）は不要なので付けない。
   配色は現行のまま（変数の上書きなし）。 */
body.style-c.mode-q .problem{
  break-inside:avoid;
}
body.style-c.mode-q .problem::after{
  content:"計算スペース";
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  margin-top:.9rem;
  height:4.6cm;
  border:1px solid var(--line);
  border-radius:4px;
  background-color:#fff;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:8mm 8mm;
  font-family:var(--gothic);
  font-size:.7rem;
  color:#a89f8a;
  padding:.3rem .6rem;
  box-sizing:border-box;
}