/* 日本語フォントは「\」を「¥」の形で描くことがあるため、「\」だけ別フォントで描く */
@font-face {
  font-family: "bs-fix";
  src: url("fonts/backslash.woff2") format("woff2"), local("Consolas"), local("Cascadia Mono");
  unicode-range: U+005C;
}
:root {
  --bg: #ffffff;
  --fg: #1f2933;
  --muted: #5f6c7b;
  --accent: #2563eb;
  --accent-bg: #eff4ff;
  --border: #d9e0e8;
  --code-bg: #f3f5f8;
  --warn-bg: #fff6e5;
  --warn-border: #f0b44c;
  --ok-bg: #ecf8ef;
  --ok-border: #4caf6a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181d;
    --fg: #e6eaef;
    --muted: #9aa7b5;
    --accent: #7aa7ff;
    --accent-bg: #1c2638;
    --border: #2d3640;
    --code-bg: #1d232b;
    --warn-bg: #2b2414;
    --warn-border: #b98a2f;
    --ok-bg: #16261b;
    --ok-border: #3f8f58;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "bs-fix", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  line-height: 1.85;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
header.site { border-bottom: 1px solid var(--border); padding: 12px 16px; }
header.site a { color: var(--fg); text-decoration: none; font-weight: bold; }
h1 { font-size: 1.8rem; line-height: 1.4; margin: 1.2em 0 .4em; }
h2 { font-size: 1.35rem; margin: 2.2em 0 .6em; padding-bottom: .2em; border-bottom: 2px solid var(--border); }
h3 { font-size: 1.1rem; margin: 1.6em 0 .4em; }
a { color: var(--accent); }
code { background: var(--code-bg); padding: .1em .4em; border-radius: 4px; font-family: "bs-fix", Consolas, "Cascadia Mono", monospace; font-size: .92em; }
pre { font-family: "bs-fix", Consolas, "Cascadia Mono", monospace; background: var(--code-bg); padding: 12px 14px; border-radius: 8px; overflow-x: auto; line-height: 1.6; }
pre code { padding: 0; background: none; }
table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .95rem; }
th, td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--code-bg); }
.meta { color: var(--muted); font-size: .9rem; }
.box { border-left: 4px solid var(--accent); background: var(--accent-bg); padding: 10px 16px; border-radius: 0 8px 8px 0; margin: 1.2em 0; }
.box.warn { border-color: var(--warn-border); background: var(--warn-bg); }
.box.ok { border-color: var(--ok-border); background: var(--ok-bg); }
.box strong.title { display: block; margin-bottom: 2px; }
.goals li { margin: .2em 0; }
details { border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; margin: .8em 0; }
details summary { cursor: pointer; font-weight: bold; }
figure { margin: 1.4em 0; }
figure svg { width: 100%; height: auto; background: var(--code-bg); border-radius: 8px; }
figcaption { color: var(--muted); font-size: .88rem; text-align: center; }
.screenshot { border: 2px dashed var(--border); border-radius: 8px; padding: 28px 12px; text-align: center; color: var(--muted); margin: 1em 0; font-size: .9rem; }
nav.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 3em; padding-top: 16px; border-top: 1px solid var(--border); }
.toc { list-style: none; padding: 0; }
.toc li { border: 1px solid var(--border); border-radius: 10px; margin: 10px 0; }
.toc a { display: block; padding: 12px 16px; text-decoration: none; color: var(--fg); }
.toc .no { color: var(--accent); font-weight: bold; margin-right: .6em; }
.toc .desc { display: block; color: var(--muted); font-size: .88rem; }
.toc li.soon a { color: var(--muted); pointer-events: none; }
.tag { font-size: .75rem; border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; margin-left: .6em; color: var(--muted); }

/* ---- 図解 (SVG) ---- */
figure.diagram svg { background: transparent; border: 1px solid var(--border); }
.d text { fill: var(--fg); font-family: "bs-fix", "Yu Gothic UI", "Meiryo", system-ui, sans-serif; font-size: 14px; }
.d .t-lg { font-size: 18px; font-weight: bold; }
.d .t-md { font-size: 15px; font-weight: bold; }
.d .t-sm { font-size: 13px; }
.d .t-mono { font-family: "bs-fix", Consolas, "Cascadia Mono", monospace; font-size: 17px; }
.d .muted { fill: var(--muted); }
.d .b1 { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1.6; }
.d .b2 { fill: var(--ok-bg); stroke: var(--ok-border); stroke-width: 1.6; }
.d .b3 { fill: var(--warn-bg); stroke: var(--warn-border); stroke-width: 1.6; }
.d .b0 { fill: var(--code-bg); stroke: var(--border); stroke-width: 1.4; }
.d .ln { stroke: var(--muted); stroke-width: 1.8; fill: none; }
.d .arrowhead { fill: var(--muted); }

/* ---- スクリーンショット差し込み枠 ---- */
figure.shot img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--border); border-radius: 8px; }
figure.shot.missing img { display: none; }
figure.shot.missing::before {
  content: "（スクリーンショットを準備中）";
  display: block; border: 2px dashed var(--border); border-radius: 8px;
  padding: 28px 12px; text-align: center; color: var(--muted); font-size: .9rem;
}

/* ---- ターミナル表示のイメージ ---- */
pre.term { background: #012456; color: #f2f2f2; border-radius: 8px; padding: 14px 16px; line-height: 1.6; }
pre.term .ps { color: #f2f2f2; }
pre.term .out { color: #c0d4ee; }

@media (prefers-color-scheme: dark) {
  .d .b1 { fill: #27406b; stroke: #8fb4ff; }
  .d .b2 { fill: #22523a; stroke: #6fd08f; }
  .d .b3 { fill: #5f4a17; stroke: #e8b04a; }
  .d .b0 { fill: #313b48; stroke: #5b6877; }
  .d .ln { stroke: #aab6c4; }
  .d .arrowhead { fill: #aab6c4; }
  .d .muted { fill: #b4bfcc; }
}

table.ok-ng td.ok { color: var(--ok-border); font-weight: bold; }
table.ok-ng td.ng { color: #d64545; font-weight: bold; }

/* ---- コーヒーブレイク ---- */
details.coffee { border: 1px solid var(--warn-border); background: var(--warn-bg); border-radius: 10px; padding: 8px 16px; margin: 1.6em 0; }
details.coffee summary { cursor: pointer; font-weight: bold; }
details.coffee summary .skip { font-weight: normal; color: var(--muted); font-size: .85rem; margin-left: .5em; }
details.coffee[open] summary { margin-bottom: .6em; }
details.coffee ol, details.coffee ul { padding-left: 1.4em; }
details.coffee li { margin: .5em 0; }

/* 図の中の「PowerShell 風パネル」は、ライト・ダークどちらでも暗い背景なので、文字は常に明るい色 */
.d text.tw { fill: #f2f2f2; }
.d text.tb { fill: #c0d4ee; }

/* ---- チャレンジ ---- */
.challenge { border: 2px dashed var(--accent); border-radius: 12px; padding: 12px 18px; margin: 1.6em 0; background: var(--accent-bg); }
.challenge > .title { display: block; font-weight: bold; margin-bottom: .3em; }
.challenge details { background: var(--bg); }
.challenge .level { color: var(--warn-border); letter-spacing: .1em; }

/* ---- フッター ---- */
footer.site-foot { border-top: 1px solid var(--border); margin-top: 2em; padding: 16px; text-align: center; color: var(--muted); font-size: .88rem; }

/* ---- 付録（コマンド一覧） ---- */
table.cmds td:first-child { white-space: nowrap; }
table.cmds .soon td { color: var(--muted); }

/* ---- ヘッダー（版・作成者） ---- */
header.site { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
header.site .ver { color: var(--muted); font-size: .8rem; }
header.site .ver a { color: var(--muted); font-weight: normal; text-decoration: underline; }

/* ---- コマンド名の由来 ---- */
p.etym { color: var(--muted); font-size: .92rem; border-left: 3px solid var(--border); padding-left: .8em; margin: .6em 0; }
.en { color: var(--muted); font-size: .85em; }

table.cmds td.en-col { color: var(--muted); font-size: .88rem; }

/* ---- ボタン風リンク ---- */
a.btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: bold; padding: 10px 22px; border-radius: 8px; margin: .4em 0; }
@media (prefers-color-scheme: dark) { a.btn { color: #0b1220; } }

table.cmds td a[href^="chapter-"] { white-space: nowrap; }

/* ---- ここで一区切り ---- */
.pause { border-top: 2px dashed var(--border); border-bottom: 2px dashed var(--border); padding: 10px 4px; margin: 2em 0; color: var(--muted); font-size: .92rem; }
.pause strong.title { display: block; color: var(--fg); margin-bottom: 2px; }

/* ---- 申請文・質問文の見本 ---- */
.template { white-space: pre-wrap; background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; font-size: .92rem; line-height: 1.7; }

/* ---- トップページのお知らせ（カード） ---- */
.notice { margin: 1.6em 0 2em; }
.notice h2 { margin-top: 1em; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 1em 0; }
.card { border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 10px; padding: 12px 16px; background: var(--bg); font-size: .93rem; line-height: 1.75; min-width: 0; }
.card.must { border-top-color: #d64545; }
.card.warn { border-top-color: var(--warn-border); background: var(--warn-bg); }
.card.ok { border-top-color: var(--ok-border); }
.card .tag { display: inline-block; font-size: .78rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 10px; margin-bottom: 4px; }
.card strong.title { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.card p { margin: .4em 0; }
.card pre { margin: .4em 0; padding: 8px 12px; }
.card p code { white-space: nowrap; }
.card .note { color: var(--muted); font-size: .88rem; }
.notice .reassure ul { margin: .4em 0; padding-left: 1.3em; }
.notice .reassure li { margin: .3em 0; }