/* 記事ページの見た目 v2：おとさんが合格を出した部品だけ（2026-10-17 03:50 おとさん「私がデザインに合格出したものに関しては全部反映させて欲しい」）
   公開記事はこのファイルだけを読む。中身は article-v2.css（1本目の控え site/_rework/ が読む全部入り）から、合格した部品の行をそのまま写したもの。
   合格した部品＝リード（答えの箱・要点の段・赤い太字の数字）／目次／データ欄／見出し2。
   まだおとさんが見ていない部品（本文の行の高さ・太字のマーカー・見出し3・箇条書き・引用・表・でも気をつけようぜ・よくある質問・黒い画面）は入れない。
   article-v2.css の合格した部品を直したら、ここも同じに直す。 */

.art--v2 { --red: var(--accent); --red-text: var(--accent-text); --red-pale: #fdebe7; --red-mark: #f9bcae; }

/* ---------- リード：1段落目＝答えの箱、2段落目＝要点の段 ---------- */
.art--v2 .entry > p.lead { font-size: 1.125rem; line-height: 2; font-weight: 500; letter-spacing: .03em; }
/* 答えの箱：薄い赤みのグレーの面・黒い枠・黒いずらし影。札 ANSWER は箱の上辺に独立して載せる（本文の行に入れない） */
.art--v2 .entry > p.lead--answer {
  position: relative; margin-block-start: 2.6em; padding: 2.1em 1.6em 1.5em;
  background: #f7efec; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.art--v2 .entry > p.lead--answer::before {
  content: "ANSWER"; content: "ANSWER" / "";
  position: absolute; inset-block-start: -.95em; inset-inline-start: 1.1em;
  padding: .55em .85em .5em; background: var(--red); color: #fff;
  font-family: var(--pixel); font-size: .625rem; letter-spacing: .2em; line-height: 1; font-weight: 400;
  box-shadow: 3px 3px 0 var(--ink);
}
/* 要点の段：白地のまま、上下に余白。大事な一句に赤のマーカー */
.art--v2 .entry > p.lead--key { margin-block-start: 1.8em; }
.art--v2 .entry .mk { background: linear-gradient(transparent 52%, var(--red-mark) 52%); font-weight: 700; padding-inline: .1em; }
/* 本文の数（5以上の件・本・回・分など）＝赤の太字。長い段落の中の目が止まる場所 */
.art--v2 .entry b.num { color: var(--red-text); font-weight: 800; letter-spacing: .02em; }

/* 合格の時、冒頭の吹き出し・目次・データ欄は、本文全体の行の高さ（article-v2.css の .art--v2 .entry）を受け継いでいた。
   本文全体の行の高さはまだおとさんが見ていないので変えず、この3つにだけ同じ値を置いて合格の見た目を写す */
.art--v2 .entry > .guide, .art--v2 .toc, .art--v2 .status { line-height: 2.05; }
@media (width < 760px) {
  .art--v2 .entry > .guide, .art--v2 .toc, .art--v2 .status { font-size: 1rem; line-height: 2; }
}

/* ---------- 目次：見出し帯は黒、番号は赤いタイル ---------- */
.art--v2 .toc { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.art--v2 .toc-head { background: var(--ink); color: #fff; border-block-end: 0; }
.art--v2 .toc-head span { display: none; } /* MAP は出さない（10/17 おとさん） */
.art--v2 .toc-list { padding: 1.1rem 1.25rem 1.25rem; }
.art--v2 .toc li { grid-template-columns: 2.6rem 1fr; align-items: start; padding-block: .4rem; }
.art--v2 .toc li + li { border-block-start: 1px dashed var(--line); }
.art--v2 .toc li::before {
  display: grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem; padding: 0; margin-block-start: .15em;
  background: var(--red); color: #fff; font-size: .625rem;
}
.art--v2 .toc a { line-height: 1.7; padding-block-start: .2em; }
.art--v2 .toc a:hover { color: var(--red-text); }

/* ---------- データ欄（この記事の数字）：数字を赤に ---------- */
.art--v2 .status { box-shadow: 6px 6px 0 var(--red); }
.art--v2 .status-num { color: var(--red); }

/* ---------- 見出し2：黒い面に白文字。頭に赤い番号タイル、下に赤いずらし影（ゲームの面の看板） ---------- */
.art--v2 .entry h2 {
  display: flex; gap: 1em; align-items: center;
  margin-block: 3.6em 1.4em; padding: 1em 1.3em 1.05em 1.1em;
  background: var(--ink); color: #fff; border-block-end: 0;
  box-shadow: 6px 6px 0 var(--red);
  font-size: clamp(1.25rem, 1.12rem + .6vw, 1.5625rem); line-height: 1.5;
}
.art--v2 .entry h2::before {
  content: counter(h2, decimal-leading-zero); content: counter(h2, decimal-leading-zero) / "";
  flex: none; display: grid; place-items: center; inline-size: 3.1em; block-size: 3.1em; margin: 0; padding: 0;
  background: var(--red); color: #fff; font-family: var(--pixel); font-size: .6em; letter-spacing: 0; line-height: 1; font-weight: 400;
}
.art--v2 .entry h2::after { content: none; }

@media (width < 760px) {
  .art--v2 .entry > p.lead { font-size: 1.0625rem; }
  .art--v2 .entry > p.lead--answer { padding: 1.9em 1.1em 1.2em; box-shadow: 4px 4px 0 var(--ink); }
  .art--v2 .entry h2 { gap: .8em; padding: .9em 1em .95em .9em; box-shadow: 4px 4px 0 var(--red); }
}

/* 目次のリンクは目次の見た目のまま（青い文字リンクの決まりは文の中だけ）。10/17 おとさん「なんで目次のデザイン変えたの」 */
.art--v2 .entry .toc a:not([class]), .art--v2 .entry .toc a:not([class]):visited { color: var(--ink); text-decoration: none; font-weight: 700; }
.art--v2 .entry .toc a:not([class]):hover { color: var(--red-text); text-decoration: none; }
/* 控えでは文字リンクの決まり（.2em）がここにも掛かっていた。目次は下線なしなので見た目は変わらないが、計算後の値も合格の時にそろえる */
.art--v2 .entry .toc a:not([class]) { text-underline-offset: .2em; }