/* =========================================================
   大人の復習ドリル
   デザインの方向性：バズっている算数系YouTubeのサムネ言語
   （太い黒枠 / 黄色地 / 赤いハイライト / 極太ゴシック）を
   そのままWeb UIに落とし込む。
   ========================================================= */

:root{
  --bg:#fffdf3;
  --bg-2:#ffffff;
  --ink:#12141a;
  --ink-2:#5a6172;
  --line:#12141a;
  --red:#e2352b;
  --red-soft:#fbdcd9;
  --yellow:#ffe100;
  --yellow-soft:#fff7c2;
  --blue:#1d5fd8;
  --blue-soft:#dbe6fb;
  --green:#12874a;
  --hl-bg:var(--yellow);
  --shadow:4px 4px 0 var(--line);
  --radius:14px;
  --maxw:1080px;
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic",
         "Noto Sans JP","Meiryo",system-ui,sans-serif;
}
/* OS がダークのとき（明示的にライトを選んだ人は除く） */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --bg:#14161d; --bg-2:#1d212b; --ink:#f2f4f8; --ink-2:#a3abbd;
  --line:#f2f4f8; --red:#ff6a5e; --red-soft:#4a2320; --yellow:#ffd93d;
  --yellow-soft:#3d3616; --blue:#7aa5f5; --blue-soft:#1e2a44;
  --green:#4ade80; --hl-bg:rgba(255,217,61,.35);
  --shadow:4px 4px 0 rgba(242,244,248,.85);
  }
}
/* 明示的にダークを選んだとき（OS がライトでも勝つ） */
:root[data-theme="dark"]{
  --bg:#14161d; --bg-2:#1d212b; --ink:#f2f4f8; --ink-2:#a3abbd;
  --line:#f2f4f8; --red:#ff6a5e; --red-soft:#4a2320; --yellow:#ffd93d;
  --yellow-soft:#3d3616; --blue:#7aa5f5; --blue-soft:#1e2a44;
  --green:#4ade80; --hl-bg:rgba(255,217,61,.35);
  --shadow:4px 4px 0 rgba(242,244,248,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.75;
  font-feature-settings:"palt";
}
a{color:inherit}
b{font-weight:800}
button{font-family:inherit}

.hl-red{color:var(--red)}
.hl-yellow{
  background:linear-gradient(transparent 58%, var(--hl-bg) 58%);
  padding:0 .1em;
}

/* ---------- ヘッダー ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:nowrap;
  padding:10px max(14px, calc((100vw - var(--maxw))/2));
  background:var(--bg); border-bottom:3px solid var(--line);
}
.brand{display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; min-width:0; flex:1 1 auto}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0}
.logo-mark{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  background:var(--yellow); color:#12141a; border:3px solid var(--line);
  border-radius:10px; font-weight:900; font-size:20px;
}
.brand-name{font-weight:900; font-size:22px; letter-spacing:.01em; white-space:nowrap}
.tool-by{
  font-size:12px; color:var(--ink-2); text-decoration:underline;
  text-underline-offset:3px; white-space:nowrap;
}
.tool-by:hover{color:var(--ink)}
.ver{font-size:11px; color:var(--ink-2); white-space:nowrap}
/* 言語の切りかえ。ひとつながりの帯の中で、選んでいるものだけを塗る */
.langs{
  display:inline-flex; flex:none; margin-left:auto;
  background:var(--bg-2); border:2.5px solid var(--line);
  border-radius:999px; padding:3px; gap:2px;
}
.lang{
  border:none; background:transparent; color:var(--ink-2);
  border-radius:999px; padding:5px 15px; font:800 13px/1.4 var(--font);
  cursor:pointer; white-space:nowrap; transition:background .12s, color .12s;
}
.lang:hover{color:var(--ink)}
.lang.on{background:var(--line); color:var(--bg)}
main{
  max-width:var(--maxw); margin:0 auto;
  padding:22px max(16px, calc((100vw - var(--maxw))/2)) 28px;
}

/* ---------- フィルタ ---------- */
.filters{
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--bg-2); padding:12px 14px; margin-bottom:14px;
}
.filter-row{display:flex; align-items:center; flex-wrap:wrap; gap:6px}
.filter-row + .filter-row{margin-top:8px; padding-top:8px; border-top:1px dashed var(--ink-2)}
.filter-label{font-size:12px; font-weight:800; color:var(--ink-2); width:70px; flex:none}
.chip{
  border:2px solid var(--line); background:transparent; color:var(--ink);
  border-radius:999px; padding:3px 12px; font-size:13px; font-weight:700;
  cursor:pointer; transition:.12s;
}
.chip:hover{background:var(--yellow-soft)}
/* せまい画面でも「すべて・ふつう・むずかしい」が1行におさまるように */
@media (max-width:430px){
  .filter-label{width:52px; font-size:11px}
  .chip{padding:3px 9px; font-size:12px}
  .filter-row{gap:5px}
}
.chip.on{background:var(--line); color:var(--bg)}
.count{font-size:12px; color:var(--ink-2); margin:0 0 12px 2px; font-weight:700}

/* ---------- カード一覧 ---------- */
.card-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.card a{
  display:flex; flex-direction:column; height:100%; text-decoration:none;
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--bg-2); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s;
}
.card a:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--line)}
.card a:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.card-fig{
  background:var(--yellow-soft); border-bottom:3px solid var(--line);
  padding:10px; display:grid; place-items:center; min-height:130px;
}
.card-fig svg{width:100%; height:auto; max-height:150px; display:block}
.card-fig .formula{transform:scale(.72); transform-origin:center}
.fig-none{font-weight:900; font-size:20px; color:var(--ink-2)}
.card-body{padding:11px 13px 13px; display:flex; flex-direction:column; gap:6px; flex:1}
.card-meta{display:flex; align-items:center; gap:8px; font-size:11px}
.cat{
  background:var(--line); color:var(--bg); font-weight:800;
  border-radius:5px; padding:1px 7px;
}
.lvl{color:var(--red); letter-spacing:-.06em; font-size:12px}
.target{font-size:11px; color:var(--ink-2); font-weight:700}
.card-title{margin:0; font-size:17px; font-weight:900; line-height:1.4}
.card-tags{display:flex; flex-wrap:wrap; gap:5px; font-size:11px; color:var(--ink-2)}
.badge{
  margin-top:auto; align-self:flex-start; font-size:11px; font-weight:800;
  border-radius:999px; padding:1px 10px; border:2px solid var(--line);
}
.badge-new{color:var(--ink-2); border-color:var(--ink-2)}
.badge-solved{background:var(--blue-soft)}
.badge-perfect{background:var(--yellow); color:#12141a; border-color:#12141a}
.badge-peek{background:var(--red-soft)}

/* ---------- 問題ページ ---------- */
.back{
  display:inline-block; font-size:13px; font-weight:800; text-decoration:none;
  color:var(--ink-2); margin-bottom:14px;
}
.back:hover{color:var(--ink)}
.problem{display:flex; flex-direction:column; gap:14px}
.p-meta{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px}
.p-title{margin:0; font-size:clamp(22px,4.6vw,32px); font-weight:900; line-height:1.35}

.p-fig{
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--yellow-soft); padding:18px; display:grid; place-items:center;
  box-shadow:var(--shadow);
}
.p-fig svg{width:100%; max-width:460px; height:auto; display:block}

.p-question{
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--bg-2); padding:16px 18px; font-size:17px; font-weight:600;
}
.q-badge{
  display:inline-block; background:var(--line); color:var(--bg);
  font-size:12px; font-weight:900; border-radius:5px;
  padding:1px 9px; margin-right:9px; vertical-align:2px;
}

/* ---------- 解答欄 ---------- */
.answer-box{
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--bg-2); padding:12px 18px 12px;
}
.answer-box > label{display:block; font-size:13px; font-weight:800; color:var(--ink-2); margin-bottom:7px}
.answer-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.answer-row input{
  flex:1 1 150px; min-width:0;
  border:3px solid var(--line); border-radius:10px; background:var(--bg);
  color:var(--ink); font-size:19px; font-weight:800; padding:8px 12px;
  font-family:inherit;
}
.answer-row input:focus{outline:3px solid var(--blue); outline-offset:1px}
.unit{font-size:17px; font-weight:900}
.input-hint{margin:8px 0 0; font-size:12px; color:var(--ink-2)}
.judge{margin:10px 0 0; font-size:15px; font-weight:900; min-height:1.4em}
.judge.ok{color:var(--green)}
.judge.ng{color:var(--red)}
.answer-box.done input{background:var(--yellow-soft)}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:3px solid var(--line); border-radius:10px; background:var(--bg-2);
  color:var(--ink); font-size:15px; font-weight:900; padding:9px 18px;
  cursor:pointer; text-decoration:none; transition:.12s;
  box-shadow:3px 3px 0 var(--line);
}
.btn:hover:not(:disabled){transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--line)}
.btn:active:not(:disabled){transform:translate(2px,2px); box-shadow:0 0 0 var(--line)}
.btn:disabled{opacity:.5; cursor:default; box-shadow:none}
.btn-primary{background:var(--red); color:#fff; border-color:var(--line)}
.btn-hint{background:var(--yellow); color:#12141a; width:100%; font-size:16px; padding:12px}
.btn-next{background:var(--line); color:var(--bg)}

/* ---------- ヒント ---------- */
.hint-zone{
  border:3px dashed var(--line); border-radius:var(--radius);
  padding:11px 16px; background:var(--bg-2);
}
.hint-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px}
.hint-head h2{margin:0; font-size:17px; font-weight:900}
.hint-count{font-size:13px; font-weight:800; color:var(--ink-2)}
.hint-list{display:flex; flex-direction:column; gap:10px}
.hint-list:not(:empty){margin-bottom:12px}
.hint{
  border:2px solid var(--line); border-left:8px solid var(--yellow);
  border-radius:9px; background:var(--bg); padding:10px 14px;
  /* 中身は常に不透明。アニメが走らない環境でも必ず読める形にする */
  animation:hint-in .3s ease;
}
@keyframes hint-in{
  from{ transform:translateY(-10px); border-left-color:var(--red) }
  to{ transform:none; border-left-color:var(--yellow) }
}
@media (prefers-reduced-motion: reduce){ .hint{animation:none} }
.hint-no{
  display:inline-block; font-size:11px; font-weight:900; color:var(--bg);
  background:var(--line); border-radius:4px; padding:0 8px; margin-bottom:4px;
}
.hint p{margin:0; font-size:15px}
.hint-note{margin:10px 0 0; font-size:12px; color:var(--ink-2); text-align:center}

/* ---------- 解説 ---------- */
.solution-zone{display:flex; flex-direction:column; gap:12px}
.solution-zone > .btn{align-self:center}
.sol-box{
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--bg-2); padding:16px 20px 20px; box-shadow:var(--shadow);
}
.sol-answer{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-bottom:3px solid var(--line); padding-bottom:12px; margin-bottom:14px;
}
.sol-answer span{
  background:var(--red); color:#fff; font-size:12px; font-weight:900;
  border-radius:5px; padding:2px 11px;
}
.sol-answer b{font-size:clamp(24px,5vw,34px); font-weight:900; letter-spacing:-.01em}
.sol-box h3{margin:0 0 8px; font-size:15px; font-weight:900; color:var(--ink-2)}
.sol-steps{margin:0; padding-left:1.35em; display:flex; flex-direction:column; gap:10px}
.sol-steps li{font-size:16px; padding-left:4px; line-height:1.9}
.sol-steps b{color:var(--red); font-weight:900}
.sol-steps .hl, .note-say .hl{
  background:linear-gradient(transparent 58%, var(--hl-bg) 58%); padding:0 .1em;
}
.sol-steps li::marker{font-weight:900; color:var(--red)}
.sol-comment{
  margin:16px 0 0; padding:11px 14px; font-size:14px; font-weight:700;
  background:var(--yellow-soft); border-radius:10px; border:2px solid var(--line);
}
.p-nav{display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap}

/* ---------- 数式 ---------- */
.formula{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px; font-size:26px; font-weight:800; padding:8px 0;
}
.formula .op{margin:0 2px}
.frac{display:inline-flex; flex-direction:column; align-items:center; line-height:1.2}
.frac b{font-weight:800; padding:0 6px}
.frac i{font-style:normal; border-top:3px solid currentColor; padding:2px 6px 0}

/* ---------- 図のスタイル ---------- */
svg .fig-line{fill:none; stroke:var(--ink); stroke-width:3; stroke-linejoin:round}
svg .fig-thin{fill:none; stroke:var(--ink); stroke-width:1.6}
svg .fig-dash{fill:none; stroke:var(--ink); stroke-width:2; stroke-dasharray:6 5}
svg .fig-path-dash{fill:none; stroke:var(--red); stroke-width:2.4; stroke-dasharray:7 6}
svg .fig-path-red{fill:none; stroke:var(--red); stroke-width:5; stroke-linejoin:round; stroke-linecap:round}
svg .fig-fill-none{fill:none}
svg .fig-fill-red{fill:var(--red); fill-opacity:.75; stroke:none}
svg .fig-fill-red-soft{fill:var(--red); fill-opacity:.18}
svg .fig-fill-blue{fill:#2f6fd0; fill-opacity:.72; stroke:none}
svg .fig-fill-yellow{fill:var(--yellow); fill-opacity:.6; stroke:none}
svg .fig-fill-bg{fill:var(--bg-2); stroke:none}
svg .fig-grid{fill:none; stroke:var(--ink); stroke-opacity:.22; stroke-width:1.4}
/* 寸法線（どこからどこまでかを示す両矢印） */
svg .fig-dim{fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round}
svg .fig-dim-head{fill:var(--ink); stroke:none}
svg .ov-dim{fill:none; stroke:var(--red); stroke-width:2.6; stroke-linecap:round}
svg .ov-dim-head{fill:var(--red); stroke:none}
svg .fig-fill-road{fill:#8a7f6a; fill-opacity:.9; stroke:none}
/* 濃い色の上にのせる文字。白いふちのままだとつぶれるので、ふちを濃い色にする */
svg .fig-onink{fill:#fff; stroke:var(--ink); stroke-width:4.5px; paint-order:stroke; stroke-linejoin:round}
svg .fig-fill-green{fill:#1aa06a; fill-opacity:.34; stroke:none}
svg .fig-fill-gray{fill:var(--ink); fill-opacity:.26; stroke:none}
svg .fig-dot{fill:var(--ink); stroke:none}
svg .fig-hand-long{stroke:var(--ink); stroke-width:4; stroke-linecap:round}
svg .fig-hand-short{stroke:var(--red); stroke-width:7; stroke-linecap:round}
svg text{
  font-family:var(--font); font-weight:900; fill:var(--ink);
  text-anchor:middle; paint-order:stroke; stroke:var(--bg); stroke-width:4px;
}
svg .fig-lbl{font-size:20px}
svg .fig-lbl-s{font-size:14px}
svg .fig-red{fill:var(--red)}

/* ---------- フッター ---------- */
.site-foot{
  border-top:3px solid var(--line); padding:16px max(16px,calc((100vw - var(--maxw))/2)) 28px;
  font-size:12px; color:var(--ink-2);
}
.site-foot p{margin:0 0 6px}

@media(max-width:680px){
  .brand-name{font-size:17px}
  .tool-by, .ver{display:none}
  .logo-mark{width:32px; height:32px; font-size:17px; border-width:2px}
  /* せまい画面でも、タイトルと同じ行に収まるように小さくする */
  .langs{padding:2px; border-width:2px}
  .lang{padding:4px 9px; font-size:11px}
}
@media(max-width:390px){
  .brand-name{font-size:15px}
  .lang{padding:4px 7px; font-size:10px}
}
@media(max-width:520px){
  .p-fig{padding:10px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}

/* =========================================================
   図の上に重ねるヒントレイヤー
   ---------------------------------------------------------
   ヒント＝文章ではなく、図に描き足される補助線・角度・色。
   「読む」のではなく「見る」だけで次の一手がわかるようにする。
   ========================================================= */

/* 出現時に一瞬だけ光る。アニメが走らない環境でも中身は必ず見える形 */
.hint-layer{ animation:layer-in .45s ease }
@keyframes layer-in{
  from{ filter:drop-shadow(0 0 10px var(--red)) }
  to{ filter:none }
}
@media (prefers-reduced-motion: reduce){ .hint-layer{animation:none} }

svg .ov-line{fill:none; stroke:var(--red); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
svg .ov-dash{fill:none; stroke:var(--red); stroke-width:3.5; stroke-dasharray:9 7; stroke-linecap:round}
svg .ov-dash2{fill:none; stroke:var(--blue); stroke-width:3; stroke-dasharray:8 6; stroke-linecap:round}
svg .ov-thin{fill:none; stroke:var(--ink); stroke-width:2}
svg .ov-thin-red{fill:none; stroke:var(--red); stroke-width:2.5}
svg .ov-blue{fill:none; stroke:var(--blue); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
svg .ov-thin-blue{fill:none; stroke:var(--blue); stroke-width:2.6; stroke-linecap:round}
svg .ov-fill-blue{fill:#2f6fd0; fill-opacity:.72; stroke:none}
svg .ov-fill-yellow{fill:#ffd400; fill-opacity:.42; stroke:none}
svg .ov-fill-green{fill:#1aa06a; fill-opacity:.45; stroke:none}
svg .ov-fill-red{fill:var(--red); fill-opacity:.34; stroke:none}
svg .ov-fill-purple{fill:#8b3fd6; fill-opacity:.38; stroke:none}
svg .ov-fill-pair1{fill:#2f7fd6; fill-opacity:.55; stroke:none}
svg .ov-fill-pair2{fill:#e08a00; fill-opacity:.45; stroke:none}
/* 星形の5つのトゲ。うすい色だと黄色い背景にとけて見分けがつかないので、はっきり塗る */
svg .ov-tip1{fill:#e2542c; fill-opacity:.82; stroke:none}
svg .ov-tip2{fill:#2f6fd0; fill-opacity:.82; stroke:none}
svg .ov-tip3{fill:#8b3fd6; fill-opacity:.82; stroke:none}
svg .ov-tip4{fill:#17a05e; fill-opacity:.82; stroke:none}
svg .ov-tip5{fill:#d63384; fill-opacity:.82; stroke:none}
/* いまの話に関係ない線を、消さずにうっすら残す */
svg .ov-ghost{fill:none; stroke:var(--ink); stroke-opacity:.20; stroke-width:2}
svg .ov-fill-pale{fill:var(--ink); fill-opacity:.06; stroke:none}
svg .ov-edge-pair1{fill:none; stroke:#2f7fd6; stroke-width:5; stroke-linejoin:round}
svg .ov-edge-pair2{fill:none; stroke:#e08a00; stroke-width:5; stroke-linejoin:round}
svg .ov-txt-pair1{font-size:24px; fill:#1c5fa8}
svg .ov-txt-pair2{font-size:24px; fill:#a35f00}
svg .ov-fill-ink{fill:var(--ink); fill-opacity:.10; stroke:none}
/* 図の上にのる文字は、下の色に関係なく読めるように白いふちを付ける */
svg .ov-txt, svg .ov-txt-red, svg .ov-txt-blue, svg .ov-txt-s,
svg .ov-txt-pair1, svg .ov-txt-pair2, svg .fig-lbl, svg .fig-lbl-s{
  paint-order:stroke; stroke:var(--bg-2); stroke-width:5px; stroke-linejoin:round;
}
svg .fig-onink{stroke:var(--ink)}
svg .ov-txt{font-size:24px; fill:var(--ink)}
svg .ov-txt-red{font-size:24px; fill:var(--red)}
svg .ov-txt-blue{font-size:24px; fill:var(--blue)}
svg .ov-txt-s{font-size:17px; fill:var(--ink)}
svg .ov-dot-red{fill:var(--red); stroke:none}
svg .ov-strike{stroke:var(--red); stroke-width:3.5; stroke-linecap:round}
svg .animal{fill:var(--ink); stroke:none}
svg .animal .leg{stroke:var(--ink); stroke-width:2.4; fill:none; stroke-linecap:round}
svg .animal-red{fill:var(--red)}
svg .animal-red .leg{stroke:var(--red)}

/* ---------- 問題ページ：図を主役にする ---------- */
.stage{
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--yellow-soft); padding:10px; box-shadow:var(--shadow);
}
.stage svg{width:100%; height:auto; display:block; max-height:70vh}

/* 問題の条件。図の中の小さな字ではなく、読める大きさで別に出す */
.cond-box{
  border:2.5px dashed var(--line); border-radius:12px;
  background:var(--bg-2); padding:12px 14px; margin:0 0 14px;
  font-size:16px; font-weight:800; line-height:1.8; color:var(--ink);
}
.cond-tag{
  display:inline-block; background:var(--ink); color:var(--bg);
  font-size:12px; font-weight:900; border-radius:999px;
  padding:2px 12px; margin-right:10px; vertical-align:2px;
}

/* ---------- ヒントボタン（図のすぐ下） ---------- */
.hint-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.hint-bar .btn-hint{flex:1 1 240px}
.dots{display:flex; gap:8px; flex-wrap:wrap}
.dot{
  width:30px; height:30px; border-radius:50%; padding:0; flex:none;
  border:2.5px solid var(--line); background:var(--bg-2); color:var(--ink);
  font:900 13px/1 var(--font); cursor:pointer;
  display:grid; place-items:center; transition:transform .12s;
}
.dot:disabled{opacity:.4; cursor:default}
.dot.seen{background:var(--red); color:#fff}
.dot.cur{outline:3px solid var(--yellow); outline-offset:2px}
.dot:not(:disabled):hover{transform:translateY(-2px)}
.dot:focus-visible{outline:3px solid var(--blue); outline-offset:2px}

/* =========================================================
   画像に焼き込む情報とレイアウト
   ---------------------------------------------------------
   一覧 … 求めるもの＋難易度、タイトル、その下に図をどんと大きく
   問題 … 左に図、右の余白にヒントを1つだけ表示（次を押すと入れかわる）
   ========================================================= */
svg .meta-chip{fill:var(--line); stroke:none}
svg .meta-cat{font-size:18px; fill:var(--bg); stroke:none}
svg .lv-t{font-size:24px; fill:var(--red); text-anchor:end; stroke:none; letter-spacing:-.08em}
svg .title-t{font-size:34px; fill:var(--ink); text-anchor:start; stroke:none}
svg .cond-t{font-size:17px; fill:var(--ink-2); font-weight:700; text-anchor:start}

/* ---------- 一覧：図の大きいサムネイルを並べる ---------- */
.card-grid{
  display:block;            /* 高さがバラバラなので、下から詰まるカラム組みにする */
  columns:330px; column-gap:18px;
}
.card{break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 18px}
.card a{
  display:block; height:auto; border-radius:14px; overflow:hidden;
  background:var(--yellow-soft); position:relative; padding:0;
  border:3px solid var(--line); box-shadow:var(--shadow);
  transition:transform .12s, box-shadow .12s;
}
.card a:hover{transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--line)}


/* もっと見る（スマホだけ出す） */
/* もっと見る。必要なときだけ書き出すので、いつも表示でよい */
.btn-more{display:block; width:100%; margin:6px 0 10px}
.card a svg{display:block; width:100%; height:auto}

/* ---------- 問題ページ：図と、その横の余白 ---------- */
.p-head{display:none}
.stage{
  display:grid; grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  gap:8px 20px; align-items:stretch;
  border:3px solid var(--line); border-radius:var(--radius);
  background:var(--yellow-soft); padding:10px 20px 12px;
  box-shadow:var(--shadow);
}
.stage svg{width:100%; height:auto; display:block; max-height:none; align-self:center}
.side{padding:4px 0; display:flex; flex-direction:column}
.note{padding:0; flex:1; display:flex; flex-direction:column; justify-content:center}
.share-row{margin-top:auto; padding-top:18px}
.cond-box{font-size:17px; line-height:1.9}
.note-empty{
  margin:0; color:var(--ink-2); font-size:14px; font-weight:700;
  line-height:2.1; text-align:center;
}
.note-no{
  display:inline-block; background:var(--red); color:#fff;
  font-size:13px; font-weight:900; border-radius:999px;
  padding:2px 15px; margin:0 0 12px;
}
.note-say{
  margin:0; font-size:17px; line-height:1.95; font-weight:600; color:var(--ink);
  animation:layer-in .35s ease;
}
.note-say b{color:var(--red); font-weight:900}

@media(max-width:820px){
  .stage{grid-template-columns:1fr; padding:12px 16px 16px}
  .note{padding-top:2px}
}

/* Xでシェアするボタン */
.btn-x{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  background:var(--ink); color:var(--bg); border-color:var(--ink);
  padding:10px 20px; font-size:15px; border-radius:999px;
}
.btn-x svg{width:17px; height:17px; fill:currentColor}
.btn-x:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--red)}
/* 拡散してもらうのがいちばん大事なので、図のすぐ横（四角の中の右下）に置く */
.share-row{display:flex; justify-content:flex-end; padding-top:14px}

/* ヒントが自前の「？」を書きこんだら、問題文の「？」は消す */
svg.q-off .q-base{display:none}

/* JSなしでも読める形。JSが動いたら #view ごと差しかわる */
.seo-only{max-width:820px;margin:0 auto;padding:8px 0 20px}
.seo-only h1{font-size:26px;font-weight:900;margin:0 0 12px}
.seo-only h2{font-size:18px;font-weight:900;margin:22px 0 8px}
.seo-only ol{padding-left:1.4em;line-height:2}
.seo-fig{background:var(--yellow-soft);border:3px solid var(--line);border-radius:16px;padding:10px;margin:12px 0}
.seo-fig svg{width:100%;height:auto;display:block}