/* css/explanation-v2.css
   ═══════════════════════════════════════════════════════════════
   作り直した解説（ひな型＝リードα 応用問題175）の見た目（2026-10-12）
   先生の指示「授業コンテンツページと同様にシムや図の配置サイズを最適化したい，文章の中に組み込んだり，
   文量を調整したり，装飾を最適化することでブラッシュアップして」

   効くのは、解説の断片の題に印のある解説だけ:
     <h2 class="prob-title-sub" data-expl-v2>応用問題175 慣性力</h2>
   viewer.js が印を見つけると <html> に expl-v2 を付ける。決まりはすべて html.expl-v2 の下に置くので、
   印の無い 1,600 本あまりの解説は 1 px も変わらない。

   部品（書き方は docs/EXPLANATION_PAGE_GUIDE.md）
     h3 > span.q-no             設問の番号（(1)）。カードの題
     .intuition                 💡 考え方（藍）
     .fig-steps                 図と，その横に並べる段（授業ページと同じ 2 列の組。図は右・画面に付いてくる）
       ol.step-list             番号つきの段（札＋題＋短い中身＋式）
     .box-note > .box-note-label  ✅ 答え（緑）
     details.alt / details.check  🔁 別解・🔍 検算（たたむ）
     .box-alert.box-alert--warn   ⚠️ つまずきどころ（橙）
     .box-alert.box-alert--key    🔑 Point（赤）
   枠の色は、この 4 つ（藍・緑・橙・赤）だけ。赤い字は使わない（授業ページの穴埋めの色と取り違えないため）
   ═══════════════════════════════════════════════════════════════ */

html.expl-v2 {
  --ev-ink: #1e293b;
  --ev-sub: #475569;
  --ev-mute: #64748b;
  --ev-indigo: #4f46e5;
  --ev-green: #059669;
  --ev-orange: #ea580c;
  --ev-rose: #e11d48;
  /* 図の列（2026-10-12，先生の指示「図版と文章で真ん中で区切られているが，文中の右側に図版やシムを入れるなどして授業コンテンツページと同じようなデザインにして」。
     46%（ほぼ半分ずつ）から，授業ページの図と段の組（本文が 6 割あまり）に近い割合へ） */
  --ev-fig-col: min(400px, 38%);
}

/* ── カード ──
   付いてくる図（position: sticky）は、カードが横の送り（overflow-x: auto）を持つと効かない。
   はみ出しは、数式（mjx-container）と表がそれぞれ自分で送る */
html.expl-v2 .explanation-area .card {
  overflow: visible;
  content-visibility: visible;
  padding: 34px 40px 26px;
}
@media (max-width: 768px) {
  html.expl-v2 .explanation-area .card { padding: 20px 14px 18px; }
}

/* ── 字 ── 授業ページと同じ：本文の太字は黒。色を付けるのは役割のある語だけ */
html.expl-v2 .card { color: var(--ev-ink); }
html.expl-v2 .card p,
html.expl-v2 .card li { line-height: 1.8; }
html.expl-v2 .card strong { color: var(--ev-ink); font-size: 1em; font-weight: 800; }
html.expl-v2 .card strong.kw { color: #3730a3; }
html.expl-v2 .card strong.warn { color: #c2410c; }
/* 蛍光ペン 3 色：黄＝結論・青＝定義・緑＝条件。字は黒のまま、下半分にだけ色を引く */
html.expl-v2 .card .highlight {
  color: var(--ev-ink);
  font-weight: 800;
  padding: 0 2px;
  border-radius: 0;
  background: linear-gradient(transparent 55%, rgba(250, 204, 21, 0.55) 55%);
}
html.expl-v2 .card .highlight.hl-def { background: linear-gradient(transparent 55%, rgba(56, 189, 248, 0.42) 55%); }
html.expl-v2 .card .highlight.hl-cond { background: linear-gradient(transparent 55%, rgba(52, 211, 153, 0.45) 55%); }

/* ── カードの題（設問）──
   授業ページのカードの題と同じ形：番号はグラデーションの字、題の字の下半分に蛍光ペン、下線は幅いっぱい */
html.expl-v2 .card > h3 {
  display: block;
  margin: 0 0 18px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, #0ea5e9, #8b5cf6) 1;
  color: var(--ev-ink);
  font-size: 1.42rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
html.expl-v2 .card > h3 .q-no {
  display: inline-block;
  margin-right: 0.45em;
  font-weight: 900;
  background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html.expl-v2 .card > h3 .q-tx {
  background: linear-gradient(transparent 60%, rgba(14, 165, 233, 0.16) 60%, rgba(139, 92, 246, 0.16) 100%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (max-width: 768px) {
  html.expl-v2 .card > h3 { font-size: 1.18rem; }
}

/* ── 💡 考え方（直感的理解）── 藍 */
html.expl-v2 .card .intuition {
  margin: 0 0 20px;
  padding: 14px 20px 12px;
  border: 1.5px solid rgba(79, 70, 229, 0.26);
  border-left: 5px solid #6366f1;
  border-radius: 14px;
  background: rgba(79, 70, 229, 0.045);
  box-shadow: none;
}
html.expl-v2 .card .intuition-title {
  margin: 0 0 4px;
  color: var(--ev-indigo);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
}
html.expl-v2 .card .intuition-title::before { content: "💡 "; }
html.expl-v2 .card .intuition p { margin: 6px 0; }
html.expl-v2 .card .intuition .scene { color: var(--ev-sub); font-size: 0.94em; }
html.expl-v2 .card .intuition .scene::before {
  content: "場面";
  display: inline-block;
  margin-right: 0.5em;
  padding: 0 0.5em;
  border-radius: 6px;
  background: rgba(79, 70, 229, 0.12);
  color: var(--ev-indigo);
  font-size: 0.82em;
  font-weight: 800;
  line-height: 1.7;
  vertical-align: 0.08em;
}

/* ── 🎯 方針（何を求めれば終わるか，1 文）── */
html.expl-v2 .card .aim {
  margin: 0 0 12px;
  padding: 0 0 0 1.6em;
  text-indent: -1.6em;
  color: var(--ev-ink);
  font-weight: 700;
}
html.expl-v2 .card .aim::before { content: "🎯"; display: inline-block; width: 1.6em; text-indent: 0; }

/* ── 図と，その横の段（fig-steps）── 授業ページ（public/css/components.css）と同じ組み方
   段は左の列に同じ幅・同じ間隔で並び，図は右の列で，スクロールしても画面に付いてくる。
   760px 未満では 1 列に戻し，図を先に出す */
html.expl-v2 .card .fig-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ev-fig-col);
  column-gap: 36px;
  align-items: start;
  margin: 0 0 8px;
}
html.expl-v2 .card .fig-steps.fig-steps--narrow { --ev-fig-col: min(360px, 40%); }
html.expl-v2 .card .fig-steps > .fig-steps__text { grid-column: 1; grid-row: 1; min-width: 0; }
html.expl-v2 .card .fig-steps > .fig-steps__fig {
  grid-column: 2; grid-row: 1; min-width: 0;
  position: sticky;
  top: calc(var(--vw-bar-h, 58px) + 10px);
}
html.expl-v2 .card .fig-steps > .fig-steps__text > :first-child { margin-top: 0; }
html.expl-v2 .card .fig-steps > .fig-steps__text > :last-child { margin-bottom: 0; }
/* 1000px 未満（iPad 縦・スマホ・狭い窓）では 1 列に戻し，図を先に出す。
   2 列にすると図の列が 320px を切り（900px で 317px），シムの札と操作の帯が窮屈になる */
@media (max-width: 999px) {
  /* align-items は stretch に戻す（start のままだと，段の列が中のいちばん長い独立数式の幅まで広がり，カードの右へ出る。
     2026-10-12，(5) の約分の式で 390px のとき 46px 出た）。列が入れ物の幅なら，長い式はその中で横に送れる */
  html.expl-v2 .card .fig-steps { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  html.expl-v2 .card .fig-steps > .fig-steps__fig { order: -1; position: static; width: 100%; max-width: 600px; margin: 0 auto; }
}

/* ── 番号つきの段（step-list）── 授業ページと同じ形（札＋題＋短い中身） */
html.expl-v2 .card ol.step-list { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: step; }
html.expl-v2 .card ol.step-list > li {
  counter-increment: step;
  position: relative;
  display: flow-root;
  margin: 0 0 12px;
  padding: 12px 16px 10px 58px;
  border-radius: 14px;
  background: rgba(14, 165, 233, 0.05);
  border: 1px solid rgba(14, 165, 233, 0.16);
}
html.expl-v2 .card ol.step-list > li:last-child { margin-bottom: 0; }
html.expl-v2 .card ol.step-list > li::before {
  content: counter(step);
  position: absolute;
  left: 13px; top: 11px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}
html.expl-v2 .card ol.step-list .step-title { font-weight: 800; font-size: 1.04em; line-height: 1.55; margin: 2px 0 2px; }
html.expl-v2 .card ol.step-list > li > p { margin: 3px 0; }
html.expl-v2 .card ol.step-list > li > ul { margin: 4px 0 2px; padding-left: 1.2em; list-style: disc; }
html.expl-v2 .card ol.step-list > li > ul > li::marker { color: #0ea5e9; }
html.expl-v2 .card ol.step-list > li > ul > li + li { margin-top: 1px; }
html.expl-v2 .card ol.step-list mjx-container[display="true"] { margin: 8px 0 4px !important; }
@media (max-width: 768px) {
  html.expl-v2 .card ol.step-list > li { padding: 10px 12px 8px 50px; }
  html.expl-v2 .card ol.step-list > li::before { left: 10px; width: 28px; height: 28px; font-size: 0.9rem; }
}

/* ── ✅ 答え ── 緑（授業ページの問題カードの正解の色と同じ系統） */
html.expl-v2 .card .box-note {
  position: relative;
  max-width: none;
  margin: 26px 0 14px;
  padding: 22px 22px 12px;
  border: 2px solid rgba(5, 150, 105, 0.5);
  border-radius: 16px;
  background: rgba(16, 185, 129, 0.055);
  box-shadow: none;
  text-align: center;
}
html.expl-v2 .card .box-note-label {
  position: absolute;
  top: -14px; left: 18px;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
html.expl-v2 .card .box-note-label::before { content: "✅ "; }
html.expl-v2 .card .box-note mjx-container[display="true"] { font-size: 1.32em !important; margin: 6px 0 !important; }
html.expl-v2 .card .box-note .box-note-sub { margin: 6px 0 2px; color: var(--ev-sub); font-size: 0.92em; text-align: left; }

/* ── 枠（つまずき・Point）── */
html.expl-v2 .card .box-alert {
  margin: 26px 0 14px;
  padding: 22px 20px 10px;
  border-width: 2px;
  border-radius: 16px;
}
html.expl-v2 .card .box-alert p { margin: 6px 0; }
html.expl-v2 .card .box-alert ul { margin: 4px 0; }
html.expl-v2 .card .box-alert-label { font-size: 0.86rem; padding: 5px 14px; letter-spacing: 0.04em; }
html.expl-v2 .card .box-alert.box-alert--warn {
  border-color: rgba(234, 88, 12, 0.5);
  background: rgba(249, 115, 22, 0.05);
}
html.expl-v2 .card .box-alert.box-alert--warn .box-alert-label::before { content: "⚠️ "; }
html.expl-v2 .card .box-alert.box-alert--key {
  border-color: rgba(225, 29, 72, 0.5);
  background: rgba(225, 29, 72, 0.045);
}
html.expl-v2 .card .box-alert.box-alert--key .box-alert-label {
  background: linear-gradient(135deg, #e11d48, #f43f5e);
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3);
}
html.expl-v2 .card .box-alert.box-alert--key .box-alert-label::before { content: "🔑 "; }
/* つまずきの 1 つ 1 つ：頭の語（何を誤るか）を橙の字で */
html.expl-v2 .card .box-alert--warn .trap { margin: 6px 0; padding-left: 1.3em; text-indent: -1.3em; }
html.expl-v2 .card .box-alert--warn .trap::before { content: "✗"; display: inline-block; width: 1.3em; text-indent: 0; color: var(--ev-orange); font-weight: 900; }
html.expl-v2 .card .box-alert--warn .trap > strong:first-child { color: #c2410c; }

/* ── たたむ（別解・検算）── */
html.expl-v2 .card details {
  margin: 14px 0;
  border: 1.5px solid rgba(148, 163, 184, 0.45);
  border-radius: 14px;
  background: #fff;
}
html.expl-v2 .card details > summary { padding: 11px 18px; color: #3730a3; font-size: 0.95rem; }
html.expl-v2 .card details > summary::before { color: #6366f1; }
html.expl-v2 .card details .details-content { padding: 12px 20px 10px; }
html.expl-v2 .card details .details-content p { margin: 6px 0; }

/* ── 図（解説の中のシム）──
   白地・外枠なし。題は図の下（図 N：…），その行の右に ⛶ 拡大・🔍 図鑑（小さく）。
   包み（figure.vw-fig）は viewer-stage.js の SimChrome が組む */
html.expl-v2 .card .vw-fig { margin: 0; }
html.expl-v2 .card .vw-fig > .sim-embed {
  max-width: none;
  width: 100%;
  margin: 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html.expl-v2 .card .vw-fig > .sim-embed canvas { border-radius: 10px; }

/* ═══ 現れ方（表示アニメーション）═══
   先生の指示「表示アニメーションも入れて」。授業ページ（components.css の .rv）と同じ動き：
     見出し … 左から右へ拭う／考え方 … 広がる／段 … 左から 1 つずつ／図 … 右から／答え・枠 … 軽く弾む
   印（rv ＋ 種類）は viewer-stage.js が付け，出す合図は .reveal-show。
   出し終えたあとの見た目は，付ける前とまったく同じ（transform も切り抜きも残さない） */
html.expl-v2 .card .rv {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.75s cubic-bezier(0.16, 1, 0.3, 1), -webkit-clip-path 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
html.expl-v2 .card .rv.rv-up    { transform: translateY(20px); }
html.expl-v2 .card .rv.rv-left  { transform: translateX(-24px); }
html.expl-v2 .card .rv.rv-right { transform: translateX(24px); }
html.expl-v2 .card .rv.rv-zoom  { transform: scale(0.96); }
html.expl-v2 .card .rv.rv-pop   { transform: scale(0.93) translateY(8px); transition-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
html.expl-v2 .card .rv.rv-wipe {
  opacity: 0.001;
  -webkit-clip-path: inset(-12px 100% -12px -12px);
  clip-path: inset(-12px 100% -12px -12px);
}
html.expl-v2 .card .rv.reveal-show { opacity: 1; transform: none; }
html.expl-v2 .card .rv.rv-wipe.reveal-show {
  -webkit-clip-path: inset(-12px -12px -12px -12px);
  clip-path: inset(-12px -12px -12px -12px);
}
/* 1 列のときは、横からの動きを縦にする（横へずらすと、現れる前の図が画面の外へ出てページが横に動く）。
   :not(.reveal-show) が要る —— この規則は .reveal-show より後ろにあるので、付けないと出たあとも 20px ずれたまま残った */
@media (max-width: 999px) {
  html.expl-v2 .card .rv.rv-left:not(.reveal-show),
  html.expl-v2 .card .rv.rv-right:not(.reveal-show) { transform: translateY(20px); }
}
@media (prefers-reduced-motion: reduce) {
  html.expl-v2 .card .rv { opacity: 1 !important; transform: none !important; transition: none !important; -webkit-clip-path: none !important; clip-path: none !important; }
}
@media print {
  html.expl-v2 .card .rv { opacity: 1 !important; transform: none !important; -webkit-clip-path: none !important; clip-path: none !important; }
}
html.expl-v2 body.printing .card .rv,
html.expl-v2.ink-writing .card .rv {
  opacity: 1 !important; transform: none !important; transition: none !important;
  -webkit-clip-path: none !important; clip-path: none !important;
}

/* ═══ 印刷 ═══ 図は列の横に並べず，本文の下に置く（紙の幅では 2 列は狭い） */
/* 図の幅は、印刷の準備（body.printing）に入った時点の幅のまま固定する（viewer-stage.js が inline で書く）。
   紙で幅を変えると、焼いた絵（img）だけが縮み、上に重ねた数式の札（SimMath の層）は前の幅の位置に残ってずれる */
@media print {
  html.expl-v2 .card .fig-steps { display: block; }
  html.expl-v2 .card .fig-steps > .fig-steps__fig { position: static; margin: 4mm auto 0; max-width: 100%; }
  html.expl-v2 .card .vw-fig-tools { display: none !important; }
  /* 焼いた絵は縮めない（列の幅で組んだ絵なので、もともと版面の半分ほど。縮めると札の層とずれる） */
  html.expl-v2 .card .vw-fig .sim-embed .print-canvas-shot { width: 100% !important; max-height: none !important; }
}