/* マニュアルの枠（2026-09-24）。サイトの style.css の上に重ねる。
   ★色はトークンだけ。新しいトークンは明るい配色と暗い配色の両方に置く（style.css と同じ書き方） */
:root{
  --wide:1000px;
  --ok:#1f7a45; --ok-soft:#eaf5ee;
  --ng:#b3261e; --ng-soft:#fbeceb;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ok:#6cc294; --ok-soft:#1a2a20;
    --ng:#f28b82; --ng-soft:#2e1d1c;
  }
}

.wrap.wide{max-width:var(--wide)}
/* ロゴの横の「マニュアル」。★マニュアルの中だけで行き来する（ホームへのリンクは置かない） */
.logo .mlabel{margin-left:10px; font-size:14px; font-weight:600; color:var(--muted); letter-spacing:.02em}
/* 目次（/manual/） */
.manual>h1:first-child{margin-top:28px}
.cat{padding:22px 0 6px}
ul.arts{list-style:none; padding:0; margin:0}
ul.arts li{border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin:0 0 10px; background:var(--surface)}
ul.arts a{font-weight:600; font-size:16px}
ul.arts .asum{display:block; color:var(--muted); font-size:14px; margin-top:2px}
.crumb{font-size:13px; color:var(--muted); margin:22px 0 8px}
.crumb a{color:var(--muted)}
.manual h1{font-size:26px; line-height:1.45; margin:0 0 6px}
.meta{font-size:13px; color:var(--muted); margin:0 0 10px}
.summary{margin:0 0 12px}
.toc{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; padding:12px 16px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px}
.manual section{padding:30px 0}
.plead{color:var(--muted); margin:-8px 0 18px; font-size:15px}
/* 何をやるかの全体像（題の下に1つ） */
.overview{border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:10px;
  padding:12px 18px; margin:0 0 14px; background:var(--bg)}
.overview p{margin:0 0 6px}
.overview ul{margin:0 0 6px; padding-left:1.3em}
.overview li{margin-bottom:2px}
.overview>*:last-child{margin-bottom:0}
/* 必須ではない段：見出しの印と、目立つ説明の箱 */
.opt{display:inline-block; margin-left:10px; padding:1px 10px; font-size:13px; font-weight:600;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent); border-radius:999px;
  vertical-align:3px}
.pnote{margin:-6px 0 20px; padding:10px 14px; background:var(--accent-soft); border:1px solid var(--border);
  border-radius:8px; font-weight:600}

/* 手順：左に番号、右に1行の文と画像 */
ol.steps{list-style:none; counter-reset:st; padding:0; margin:0}
ol.steps>li{counter-increment:st; position:relative; padding-left:44px; margin:0 0 46px; scroll-margin-top:90px}
ol.steps>li::before{content:counter(st); position:absolute; left:0; top:0; width:30px; height:30px;
  border-radius:50%; background:var(--accent); color:var(--bg); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center}
.st{margin:2px 0 10px; font-size:16px; line-height:1.7}
/* ★文を並びで書いたとき（段落と箇条書き・2026-09-26） */
div.st p,div.pnote p{margin:0 0 6px}
div.st ul,div.pnote ul{margin:0 0 6px; padding-left:1.3em}
div.st li,div.pnote li{margin-bottom:2px}
div.st>*:last-child,div.pnote>*:last-child{margin-bottom:0}
.st code,figcaption code{font-family:Consolas,"BIZ UDGothic",monospace; font-size:15px; background:var(--surface);
  border:1px solid var(--border); border-radius:4px; padding:1px 6px; user-select:all; word-break:break-all}
a.shot{display:inline-block; max-width:100%}
a.shot img{display:block; max-width:100%; height:auto; border:1px solid var(--border); border-radius:6px}

/* 質問と答え（説明のページ。番号を振らない） */
.qalist{margin:0}
.qa{margin:0 0 44px; scroll-margin-top:90px}
.qq{position:relative; margin:0 0 8px; padding-left:34px; font-size:17px; font-weight:700; line-height:1.6}
.qq::before{content:"Q"; position:absolute; left:0; top:1px; width:24px; height:24px;
  border-radius:50%; background:var(--accent); color:var(--bg); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center}
.qa>.st,.qa>a.shot,.qa>.pair{margin-left:34px}
.qa>a.shot{display:block; width:calc(100% - 34px)}

/* 変える前／変えた後を横に並べる（良し悪しではないので色は付けない） */
.pair{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; margin-top:12px}
.pair figure{margin:0; border:1px solid var(--border); border-radius:8px; padding:8px 10px 10px;
  background:var(--surface)}
.pair figcaption{font-size:14px; font-weight:600; margin-bottom:6px; line-height:1.6; color:var(--muted)}

/* 確かめる姿（OK／NG） */
.checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:12px}
.checks figure{margin:0; border:1px solid var(--border); border-radius:8px; padding:8px 10px 10px}
.checks figcaption{font-size:14px; font-weight:600; margin-bottom:6px; line-height:1.6}
.checks .ok{background:var(--ok-soft)}
.checks .ok figcaption{color:var(--ok)}
.checks .ng{background:var(--ng-soft)}
.checks .ng figcaption{color:var(--ng)}

/* うまくいかないとき */
details.tr{border:1px solid var(--border); border-radius:10px; margin:0 0 10px; background:var(--surface)}
details.tr summary{cursor:pointer; font-weight:600; padding:12px 16px}
details.tr ol.steps{padding:4px 16px 2px}
details.tr ol.steps>li{margin-bottom:24px}

@media (max-width:560px){
  .manual h1{font-size:22px}
  ol.steps>li{padding-left:38px}
  .qq{padding-left:30px}
  .qa>.st,.qa>a.shot,.qa>.pair{margin-left:0}
  .qa>a.shot{width:100%}
}
@media print{
  header.site,footer.site,.toc{display:none}
  ol.steps>li,.checks figure,.qa,.pair figure{break-inside:avoid}
  a.shot{max-width:80%}
}