/* SITE-004 A-1：共通の見た目。数値は書かない。すべて tokens.css の変数を参照する。
   段の色だけは build.js が labels.json から作る steps.css（--step-{key}）を参照する。
   既製のテーマ・CSS フレームワークは使っていない。 */

/* ---- 字体（自前で配る。Google Fonts の GitHub から取った Noto Sans JP を
        JIS X 0208 の範囲に絞って woff2 にしたもの。SIL OFL 1.1） ---- */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/NotoSansJP-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/NotoSansJP-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/NotoSansJP-Black.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg-2);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-2);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

img, svg { max-width: 100%; }
/* SITE-008 1-1：width/height 属性を持つ img は、そのままだと属性の高さ（630px 等）が
   固定されてしまうことがある。height を auto にして幅にまかせ、実際の縦横比は
   枡側（.card-thumb・.hero img・.hub-lead img など）の aspect-ratio と object-fit で決める。 */
img { height: auto; }

.wrap {
  width: 100%;
  max-width: var(--w-wide);
  margin: 0 auto;
  padding-inline: var(--sp-3);
}

main.wrap { padding-block: var(--sp-4) var(--sp-7); }

.skip { position: absolute; left: -100vw; }
.skip:focus {
  left: var(--sp-3); top: var(--sp-3); z-index: 30;
  background: var(--c-ink); color: var(--c-bg);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-1);
}

a { color: var(--c-link); }
a:visited { color: var(--c-link-visited); }

/* ================================================================ 頭 */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: var(--c-bg);
  border-bottom: var(--bw-1) solid var(--c-line);
}
.head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}
.brand {
  font-family: var(--f-head);
  font-size: var(--fs-4);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand::before {
  content: "";
  display: inline-block;
  width: 0.55em; height: 0.55em;
  margin-right: 0.4em;
  background: var(--c-accent);
  vertical-align: baseline;
}
.head-links { display: flex; gap: var(--sp-3); flex-wrap: nowrap; }
.head-links a {
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  color: var(--c-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.head-links a:hover { color: var(--c-accent); }

/* SITE-026【C-2】頭の右上の検索窓（SITE-022 で空けたところ）。
   索引はビルドのときに作り、探すのはブラウザの中だけで完結する（外へ送らない）。
   ★JavaScript が動かない環境では出さない（押しても何も起きない物を見せない）。
     assets/js/search.js が hidden を外す。 */
.site-search { position: relative; flex: 0 0 auto; }
.site-search-label {
  position: absolute; width: var(--bw-1); height: var(--bw-1);
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.site-search input {
  width: var(--w-search-sm);
  font-family: var(--f-body);
  font-size: var(--fs-1);
  line-height: var(--lh-chip);
  color: var(--c-ink);
  background: var(--c-surface-2);
  border: var(--bw-1) solid var(--c-line-2);
  border-radius: var(--r-2);
  padding: var(--sp-1) var(--sp-2);
}
.site-search input:focus {
  outline: var(--bw-2) solid var(--c-accent);
  outline-offset: var(--bw-1);
  background: var(--c-surface);
}
.search-panel {
  position: absolute; top: 100%; right: 0; z-index: 30;
  width: var(--w-search-panel);
  max-height: var(--h-search-panel);
  overflow-y: auto;
  margin-top: var(--sp-1);
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line-2);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
}
.search-panel p.search-note {
  margin: 0; padding: var(--sp-2);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--c-ink-3);
}
.search-panel ul { list-style: none; margin: 0; padding: 0; }
.search-panel li + li { border-top: var(--bw-1) solid var(--c-line); }
.search-panel a {
  display: block;
  padding: var(--sp-2);
  text-decoration: none;
  color: var(--c-ink);
}
.search-panel a:hover, .search-panel a:focus { background: var(--c-bg-2); }
.search-panel .t {
  display: block;
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.search-panel .x {
  display: block;
  margin-top: var(--sp-0);
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}
.search-panel mark { background: var(--c-accent-soft); color: var(--c-ink); }
@media (min-width: 48rem) {
  .site-search input { width: var(--w-search); }
}

.head-tabs { border-top: var(--bw-1) solid var(--c-line); }
.head-tabs .wrap { padding-inline: var(--sp-3); }
.tabs {
  display: flex; gap: var(--sp-4);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs > li { margin: 0; }
.tabs a {
  display: block;
  padding-block: var(--sp-2);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  color: var(--c-ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--bw-3) solid transparent;
}
.tabs a:hover { color: var(--c-ink); }
.tabs a[aria-current="page"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }

/* ================================================================ 足 */
.site-foot {
  background: var(--c-bg);
  border-top: var(--bw-2) solid var(--c-line-strong);
  color: var(--c-ink-2);
  font-size: var(--fs-1);
}
.site-foot .wrap { padding-block: var(--sp-5) var(--sp-6); }
.foot-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--sp-4);
}
.foot-grid h2 {
  font-size: var(--fs-1); margin: 0 0 var(--sp-1);
  letter-spacing: var(--ls-label); color: var(--c-ink-3);
  border: 0; padding: 0;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin: 0 0 var(--sp-0); }
.foot-grid a { color: var(--c-ink-2); text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; }
.foot-note { color: var(--c-ink-3); font-size: var(--fs-0); margin: 0; }

/* ================================================================ 文字 */
h1, h2, h3, h4 {
  font-family: var(--f-head);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--c-ink);
}
h1 { font-size: var(--fs-6); font-weight: var(--fw-black); margin: 0 0 var(--sp-3); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-5); font-weight: var(--fw-black); margin: var(--sp-6) 0 var(--sp-3); }
h3 { font-size: var(--fs-4); font-weight: var(--fw-bold); margin: var(--sp-5) 0 var(--sp-2); }
h4 { font-size: var(--fs-3); font-weight: var(--fw-bold); margin: var(--sp-4) 0 var(--sp-2); }
p  { margin: 0 0 var(--sp-3); }

ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.35em; }
li { margin-bottom: var(--sp-1); }

strong { font-weight: var(--fw-bold); }

code, kbd, samp {
  font-family: var(--f-mono);
  font-size: 0.9em;
  background: var(--c-code-bg);
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
}
pre {
  font-family: var(--f-mono);
  background: var(--c-code-bg);
  padding: var(--sp-3);
  border-radius: var(--r-2);
  overflow-x: auto;
  font-size: var(--fs-1);
}
pre code { background: none; padding: 0; }

.table-scroll { overflow-x: auto; margin-bottom: var(--sp-4); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
th, td {
  text-align: left; padding: var(--sp-1) var(--sp-2);
  border-bottom: var(--bw-1) solid var(--c-line); vertical-align: top;
}
th { font-weight: var(--fw-bold); background: var(--c-surface-2); }

/* ================================================================ 現在地 */
.breadcrumb { font-size: var(--fs-0); color: var(--c-ink-3); margin-bottom: var(--sp-3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--sp-1); color: var(--c-line-2); }
.breadcrumb a { color: var(--c-ink-3); }

/* ================================================================ 段のラベル */
.step-chip {
  display: inline-block;
  font-size: var(--fs-0);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-chip);
  padding: 0 var(--sp-1);
  color: var(--c-accent-ink);
  background: var(--chip, var(--c-ink));
  border-radius: var(--r-1);
  text-decoration: none;
  white-space: nowrap;
}
a.step-chip:hover { opacity: 0.85; }

.kind-chip {
  display: inline-block;
  font-size: var(--fs-0);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  padding: 0 var(--sp-1);
  color: var(--c-ink-2);
  border: var(--bw-1) solid var(--c-line-2);
  border-radius: var(--r-1);
  white-space: nowrap;
}

/* ================================================================ フィード（トップ）
   SITE-018 2-2：★文字入りの画像を一覧から外した。
   これまでは絵の中にタイトル・道具名・サイト名が描かれ、そのすぐ下の見出しで
   同じ文字をもう一度読ませていた。1画面に3〜4件しか入らない原因がここだった。
   いまは「分類の記号（読ませない・区別するだけ）＋段のラベル＋見出し＋道具名＋更新日」の
   文字だけの行にしてある。絵に戻したいときは config/site.json の listThumbnails を true にする。
   記号の役割は Zenn の絵文字と同じだが、絵文字は使わない（環境で見た目が変わるため）。 */
.feed {
  list-style: none; padding: 0; margin: 0 0 var(--sp-5);
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
  overflow: hidden;
}
@media (min-width: 64rem) { .feed { grid-template-columns: repeat(2, 1fr); } }

.feed > li { margin: 0; border-bottom: var(--bw-1) solid var(--c-line); }
/* 2列のときは、右の列の左側にも境目を引く */
@media (min-width: 64rem) {
  .feed > li:nth-child(2n) { border-left: var(--bw-1) solid var(--c-line); }
}

.card {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  height: 100%;
  padding: var(--row-pad) var(--sp-3);
  background: var(--c-surface);
  text-decoration: none;
  color: var(--c-ink);
}
.card:visited { color: var(--c-ink); }
.card:hover { background: var(--c-surface-2); }

.card-body { display: flex; flex-direction: column; gap: var(--sp-0); flex: 1; min-width: 0; }
/* SITE-019 2-3：段のラベルと種類のラベルが「つくる入門」のようにくっついて読めていた。
   別々の要素であることは変えず、間の空きを広げ、HTML 側にも空白を1つ入れて、
   CSS が効かない状態でも2語が続けて読めないようにする。 */
.card-labels { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
/* 見出しは2行で切る。行数を決めておかないと、行が並んだときに高さが暴れる */
.card-title {
  font-family: var(--f-head);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* SITE-019 3-1：一覧に要約は出さない。要約そのものを HTML に書き出さない形にしたので、
   ここで display:none にはしない（config/site.json の listSummary を true に戻したとき、
   CSS 側で消してしまうと出せなくなるため）。出すときは2行で切る。 */
.card-sum {
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--c-ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-foot {
  font-size: var(--fs-0); color: var(--c-ink-3);
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
}
.card-foot .tool { font-weight: var(--fw-bold); color: var(--c-ink-2); }
.card-foot .dot::before { content: "・"; }

/* SITE-018 2-2：先頭の1件を大きくする扱いはやめた。
   大きい枡は1画面の件数を減らすうえ、絵を外したいまは意味が薄い。 */
.feed > li.lead .card-title { font-size: var(--fs-3); }

/* listThumbnails を true に戻したときだけ出る絵（config/site.json） */
.card-thumb {
  display: block; width: var(--sp-7); flex: 0 0 auto;
  aspect-ratio: var(--ar-og);
  object-fit: cover; background: var(--c-surface-2);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-1);
}

/* ================================================================ 分類の記号（SITE-019 3-5・3-6）
   絵は assets/marks/ に自前で置いた Twemoji の SVG、分類との対応は config/marks.json。
   ★色を奪わない。カラフルな記号が並ぶことが、一覧の見渡しやすさの起点になっている。 */
.mark { display: block; flex: 0 0 auto; object-fit: contain; }
.mark-sm { width: var(--mark-sm); height: var(--mark-sm); }
.mark-md { width: var(--mark-md); height: var(--mark-md); }
.mark-lg { width: var(--mark-lg); height: var(--mark-lg); }
/* 記号の下じき。無彩色なので、記号の色だけが浮く */
.mark-box {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  background: var(--c-mark-bg);
  border-radius: var(--r-2);
  padding: var(--mark-pad);
}
.mark-box-lg { border-radius: var(--r-3); padding: var(--sp-3); }

/* ================================================================ 記事
   SITE-018 2-4〜2-8：Zenn から取り入れた「組み方」。色・字体・ロゴは真似していない。
     ・本文は白い紙。ページの地はごく薄い灰色。対比で本文が浮く（2-4）
     ・本文の右に追従する目次。いま読んでいる節に印が付く（2-5）
     ・本文の左に縦の細い操作列。中身は共有だけ（2-6：このサイトには著者への反応が無い）
     ・本文の上にタグの列（2-7）／本文の下に関連するページを2列で（2-8） */

/* 操作列・本文・目次の3列。狭い画面では本文だけになる */
.doc-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-shell);
  align-items: start;
  justify-content: center;
}
@media (min-width: 68rem) {
  .doc-shell {
    grid-template-columns: var(--w-rail) minmax(0, var(--w-doc)) var(--w-toc);
  }
}

/* 本文の紙（2-4） */
.doc {
  max-width: var(--w-doc);
  margin: 0 auto;
  min-width: 0;
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-3);
  padding: var(--pad-doc);
  box-shadow: var(--shadow-1);
}
.doc-wide { max-width: var(--w-wide); margin: 0 auto; }

/* ---- 左の縦の操作列（2-6）。狭い画面では出さない ---- */
.doc-rail { display: none; }
@media (min-width: 68rem) {
  .doc-rail {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
    position: sticky; top: var(--toc-top);
  }
}
.rail-btn {
  display: flex; align-items: center; justify-content: center;
  width: var(--w-rail); height: var(--w-rail);
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
  color: var(--c-ink-3);
  text-decoration: none;
  cursor: pointer;
}
.rail-btn:hover { color: var(--c-ink); border-color: var(--c-line-2); }
.rail-btn svg { width: var(--mark-sm); height: var(--mark-sm); display: block; }
.rail-note {
  font-size: var(--fs-0); color: var(--c-ink-3);
  letter-spacing: var(--ls-label); writing-mode: vertical-rl;
  margin-top: var(--sp-1);
}

/* ---- 右の追従する目次（2-5） ---- */
.toc-side { display: none; }
@media (min-width: 68rem) {
  .toc-side {
    display: block;
    position: sticky; top: var(--toc-top);
    max-height: calc(100vh - var(--toc-top) - var(--sp-4));
    overflow-y: auto;
    font-size: var(--fs-1);
  }
}
.toc-side h2 {
  font-size: var(--fs-0); letter-spacing: var(--ls-label);
  color: var(--c-ink-3); margin: 0 0 var(--sp-1); border: 0; padding: 0;
}
.toc-side ol { list-style: none; margin: 0; padding: 0; }
.toc-side li { margin: 0; }
.toc-side a {
  display: block;
  padding: var(--sp-0) var(--sp-2);
  border-left: var(--bw-2) solid var(--c-line);
  color: var(--c-ink-3);
  text-decoration: none;
  line-height: var(--lh-head);
}
.toc-side a:hover { color: var(--c-ink); border-left-color: var(--c-line-2); }
/* いま読んでいる節の印（2-5）。doc.js が aria-current を付け替える */
.toc-side a[aria-current="true"] {
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  border-left-color: var(--c-accent);
}

/* 狭い画面では本文の上に畳む（2-5） */
.toc-fold { margin: 0 0 var(--sp-4); }
@media (min-width: 68rem) { .toc-fold { display: none; } }
.toc-fold > summary {
  cursor: pointer;
  font-size: var(--fs-1); font-weight: var(--fw-bold);
  color: var(--c-ink-2);
  padding: var(--sp-2) 0;
  border-bottom: var(--bw-1) solid var(--c-line);
}
.toc-fold ol { margin: var(--sp-2) 0 0; padding-left: 1.2em; font-size: var(--fs-2); }
.toc-fold li { margin-bottom: var(--sp-0); }
.toc-fold a { color: var(--c-ink); text-decoration: none; }
.toc-fold a:hover { text-decoration: underline; }

/* ---- 本文の上のタグの列（2-7） ---- */
.doc-tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  list-style: none; padding: 0; margin: 0 0 var(--sp-3);
}
.doc-tags > li { margin: 0; }

/* ---- 記事の先頭（2-3：記号を中央に1つ、その下に見出しと公開日） ---- */
.doc-head { margin-bottom: var(--sp-4); text-align: center; }
.doc-head .mark-box { margin: 0 auto var(--sp-3); }
.doc-head .hero-labels { justify-content: center; margin-bottom: var(--sp-2); }
.doc-head h1 { margin-bottom: var(--sp-2); }
.doc-head .meta { font-size: var(--fs-0); color: var(--c-ink-3); margin: 0; }
.doc-head .meta span + span::before { content: "・"; }
.doc-head + .doc-tags { justify-content: center; }

/* ---- 本文の下の「関連するページ」（2-8）。2列。カードは小さく軽い ---- */
.related { margin: var(--sp-6) 0 0; }
.related > h2 {
  font-size: var(--fs-3); margin: 0 0 var(--sp-2);
  border: 0; padding: 0;
}
.rel-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--sp-2);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .rel-grid { grid-template-columns: repeat(2, 1fr); } }
.rel-grid > li { margin: 0; }
.rel-card {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-2);
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
  text-decoration: none; color: var(--c-ink);
}
.rel-card:visited { color: var(--c-ink); }
.rel-card:hover { border-color: var(--c-line-2); background: var(--c-surface-2); }
.rel-card .t {
  font-family: var(--f-head); font-weight: var(--fw-bold);
  font-size: var(--fs-1); line-height: var(--lh-tight);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rel-card .m { font-size: var(--fs-0); color: var(--c-ink-3); }
.rel-card .m .tool { font-weight: var(--fw-bold); color: var(--c-ink-2); }
.rel-card .m span + span::before { content: "・"; }
.rel-body { display: flex; flex-direction: column; gap: var(--sp-0); min-width: 0; }


.hero {
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
  overflow: hidden;
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.hero img { display: block; width: 100%; aspect-ratio: var(--ar-og); object-fit: cover; }
.hero-body { padding: var(--sp-4); }
.hero-labels { display: flex; gap: var(--sp-1); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.hero h1 { font-size: var(--fs-7); margin-bottom: var(--sp-2); }
.hero .meta { font-size: var(--fs-0); color: var(--c-ink-3); margin: 0; }
.hero .meta span + span::before { content: "・"; }

/* SITE-008 1-2 / SITE-018 2-3：記事ページの先頭はヒーロー絵を出さない。
   いまは「分類の記号（中央に1つ）→ 段のラベル → 見出し → 公開日」の順。
   絵（文字入り）は OGP でだけ使う。見た目の指定は上の .doc-head にまとめてある。 */

.answer {
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  background: var(--c-surface);
  border-left: var(--bw-3) solid var(--c-accent);
  border-radius: var(--r-1);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
}

/* SITE-018 2-5：本文の中に置いていた目次の箱はやめた。
   広い画面では右に追従する目次（.toc-side）、狭い画面では上に畳む目次（.toc-fold）。 */

.doc section.sec { background: transparent; }
.doc section.sec > h2 {
  margin-top: var(--sp-6);
  padding-bottom: var(--sp-1);
  border-bottom: var(--bw-3) solid var(--c-ink);
}

/* ---- 箱は3種。色と記号で見分ける ---- */
.box {
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
  font-size: var(--fs-2);
  border-left: var(--bw-3) solid var(--box-c, var(--c-ink));
  background: var(--box-bg, var(--c-surface-2));
}
.box > p:last-child { margin-bottom: 0; }
.box > .box-head {
  font-weight: var(--fw-black);
  color: var(--box-c, var(--c-ink));
  font-size: var(--fs-1);
  letter-spacing: var(--ls-label);
  margin: 0 0 var(--sp-1);
}
.box > .box-head::before { content: var(--box-mark, "■"); margin-right: 0.4em; }
.box-point { --box-c: var(--c-point); --box-bg: var(--c-point-bg); --box-mark: "■"; }
.box-warn  { --box-c: var(--c-warn);  --box-bg: var(--c-warn-bg);  --box-mark: "▲"; }
.box-word  { --box-c: var(--c-word);  --box-bg: var(--c-word-bg);  --box-mark: "●"; }

/* ---- 手順 ---- */
.howto { list-style: none; padding: 0; margin: 0 0 var(--sp-4); counter-reset: howto; }
.howto > li {
  counter-increment: howto;
  position: relative;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);
  border-bottom: var(--bw-1) solid var(--c-line);
  margin: 0;
}
.howto > li::before {
  content: counter(howto);
  position: absolute; left: 0; top: var(--sp-3);
  width: var(--sp-5); height: var(--sp-5);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-ink); color: var(--c-bg);
  font-family: var(--f-head); font-weight: var(--fw-black); font-size: var(--fs-1);
  border-radius: var(--r-1);
}
.howto .do { display: block; font-weight: var(--fw-bold); }
.howto .then { display: block; color: var(--c-ink-2); }
.howto .then::before { content: "→ "; color: var(--c-accent); font-weight: var(--fw-bold); }

/* ---- よくある質問 ---- */
.faq { margin: 0 0 var(--sp-4); }
.faq dt {
  font-weight: var(--fw-black); font-family: var(--f-head);
  font-size: var(--fs-3); margin-top: var(--sp-4);
  padding-left: 1.4em; text-indent: -1.4em;
}
.faq dt::before { content: "Q"; color: var(--c-accent); font-weight: var(--fw-black); margin-right: 0.5em; }
.faq dd { margin: var(--sp-1) 0 0; padding-left: 1.4em; }

/* ---- 図解 ---- */
.figure {
  margin: var(--sp-4) 0;
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
  padding: var(--sp-3);
}
.figure svg { display: block; width: 100%; height: auto; max-width: 34rem; margin: 0 auto; }
/* SITE-011 1-4：図のタイトルは絵の上。下の figcaption は番号だけ。 */
.figure .fig-title {
  margin: 0 0 var(--sp-2); text-align: center;
  font-family: var(--f-head); font-weight: var(--fw-black);
  font-size: var(--fs-2); color: var(--c-ink);
}
.figure figcaption {
  font-size: var(--fs-0); color: var(--c-ink-3);
  margin-top: var(--sp-2); text-align: center;
}

/* ---- 出典・関連 ---- */
.panel {
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
}
.panel > h2 { margin-top: 0; font-size: var(--fs-4); border: 0; padding: 0; }
.panel > h3 { margin-top: var(--sp-3); font-size: var(--fs-3); }

.linklist { list-style: none; padding: 0; margin: 0 0 var(--sp-2); }
.linklist > li { margin: 0; padding: var(--sp-2) 0; border-bottom: var(--bw-1) solid var(--c-line); }
/* SITE-019 3-5：一覧の行にも、カードと同じ分類の記号を左端に出す。
   記号のぶんだけ本文を右に寄せ、記号の無い行（出典など）は今までどおり左端から始める。 */
.linklist > li.row { display: flex; align-items: flex-start; gap: var(--sp-2); }
.linklist > li.row > .row-body { flex: 1; min-width: 0; }
.linklist > li:last-child { border-bottom: 0; }
.linklist a { font-weight: var(--fw-bold); }
.linklist .sub { display: block; font-size: var(--fs-0); color: var(--c-ink-3); word-break: break-all; }

/* 出典は番号つき。本文の [^n] からここへ跳ぶ（SITE-005【3】） */
ol.linklist.sources { list-style: decimal; padding-left: 1.6em; }
ol.linklist.sources > li { padding-left: var(--sp-0); }
ol.linklist.sources > li:target { background: var(--c-accent-soft); border-radius: var(--r-1); }

/* 文中の脚注。行の高さを変えないよう、上付きは小さく置く */
sup.fn { font-size: 0.68em; line-height: 0; vertical-align: super; margin-left: 0.15em; }
sup.fn a {
  color: var(--c-accent); text-decoration: none; font-weight: var(--fw-bold);
  padding: 0 0.15em;
}
sup.fn a:visited { color: var(--c-accent); }
sup.fn a:hover { text-decoration: underline; }

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.tags > li { margin: 0; }
.tag {
  display: inline-block; font-size: var(--fs-1); line-height: var(--lh-tag);
  padding: 0 var(--sp-2);
  border: var(--bw-1) solid var(--c-line-2);
  border-radius: var(--r-1);
  color: var(--c-ink-2); text-decoration: none; background: var(--c-surface);
}
.tag:hover { border-color: var(--c-ink); color: var(--c-ink); }
.tag .n { color: var(--c-ink-3); font-size: 0.9em; }

.term-link { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.25em; }

/* ================================================================ 道具のページ */
.hub-lead { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-bottom: var(--sp-4); }
@media (min-width: 52rem) { .hub-lead { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.hub-lead img {
  display: block; width: 100%; aspect-ratio: var(--ar-og); object-fit: cover;
  border-radius: var(--r-2); border: var(--bw-1) solid var(--c-line);
}

.facts { margin: 0; }
.facts dl { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; }
.facts dt { color: var(--c-ink-3); font-size: var(--fs-0); }
.facts dd { margin: 0; font-size: var(--fs-1); word-break: break-word; }

/* ================================================ 代表作（SITE-005【2】）
   正本は content/tools/<道具>/showcase.json。記事2とまとめページが同じ形で出す。
   ゲームの画像・ロゴは置かない。Steam の絵は Valve 公式のウィジェットの中だけに出る。 */
.works { list-style: none; padding: 0; margin: 0; }
.works > li {
  margin: 0; padding: var(--sp-4) 0;
  border-bottom: var(--bw-1) solid var(--c-line);
}
.works > li:last-child { border-bottom: 0; }
.works .work-head { margin: 0 0 var(--sp-0); }
.works .name { font-family: var(--f-head); font-weight: var(--fw-black); font-size: var(--fs-3); }
.works .maker { color: var(--c-ink-3); font-size: var(--fs-0); }
.works .what { margin: var(--sp-0) 0 var(--sp-2); font-size: var(--fs-2); }

.works .dist { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; margin: 0 0 var(--sp-2); }
.dist-label {
  font-size: var(--fs-0); letter-spacing: var(--ls-label);
  color: var(--c-ink-3); font-weight: var(--fw-bold);
}
.dist-chip {
  display: inline-block; font-size: var(--fs-1); line-height: var(--lh-tag);
  padding: 0 var(--sp-2);
  border: var(--bw-1) solid var(--c-line-2);
  border-radius: var(--r-1);
  background: var(--c-surface);
  color: var(--c-ink); text-decoration: none; font-weight: var(--fw-bold);
}
a.dist-chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
/* 店へのリンクが公式に載っていないものは、リンクにしない（SITE-007 1-1：到達しないものは出さないので、
   ここは is-plain だけが残る。is-dead は使わなくなった） */
.dist-chip.is-plain { color: var(--c-ink-3); font-weight: var(--fw-body); }
.dist-none { color: var(--c-ink-3); font-size: var(--fs-1); }
.sub-note { font-size: var(--fs-0); color: var(--c-ink-3); margin-left: 0.25em; }

.work-links {
  list-style: none; padding: 0; margin: 0 0 var(--sp-2);
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-1);
}
.work-links > li { margin: 0; }

/* SITE-007 23：更新情報（:::releases）の表示。表は works-table と揃えて使い回す */
.release-current { font-size: var(--fs-2); margin: 0 0 var(--sp-2); }
.release-major-head { margin: var(--sp-3) 0 var(--sp-1); font-weight: var(--fw-bold); }
.release-highlights { margin: 0 0 var(--sp-2); padding-left: 1.4em; }
.release-highlights > li { margin: 0 0 var(--sp-0); }
.release-table th[scope="row"] { font-weight: var(--fw-bold); white-space: nowrap; }

/* Valve 公式のウィジェット。横幅は 646 が既定で、狭い画面では枡に合わせて縮める */
.steam-widget { margin: var(--sp-2) 0 0; max-width: var(--w-steam); }
.steam-widget iframe {
  display: block; width: 100%; max-width: 100%;
  border: 0; background: var(--c-surface-2); border-radius: var(--r-1);
}

/* SITE-006 1-3：ウィジェットを出さない残りの作品。「名前＋配信」の文字だけで並べる */
.works-rest-head { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-2); }
.works-plain { list-style: none; padding: 0; margin: 0; }
.works-plain > li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-0) var(--sp-2);
  padding: var(--sp-1) 0; border-bottom: var(--bw-1) solid var(--c-line);
}
.works-plain > li:last-child { border-bottom: 0; }
.works-plain .name { font-weight: var(--fw-bold); }
.works-plain .maker, .works-plain .dist { color: var(--c-ink-3); font-size: var(--fs-0); }
.works-more { margin: var(--sp-2) 0 0; font-weight: var(--fw-bold); }

.works-table th[scope="row"] { font-weight: var(--fw-bold); }
.works-table th[scope="row"] .sub { display: block; font-weight: var(--fw-body); color: var(--c-ink-3); font-size: var(--fs-0); }
.works-table caption { text-align: left; font-size: var(--fs-0); color: var(--c-ink-3); padding-bottom: var(--sp-1); }
.src-note { font-size: var(--fs-0); color: var(--c-ink-3); margin: var(--sp-2) 0 0; }

/* SITE-006 2-5：記事の末尾に出す「前の記事／次の記事」。並びは config/series.json */
.series-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
}
.series-nav > * {
  display: flex; flex-direction: column; gap: var(--sp-0);
  padding: var(--sp-2) var(--sp-3);
  border: var(--bw-1) solid var(--c-line); border-radius: var(--r-1);
  background: var(--c-surface); text-decoration: none;
}
.series-nav a:hover { border-color: var(--c-accent); }
.series-nav .dir { font-size: var(--fs-0); color: var(--c-ink-3); }
.series-nav .t { font-weight: var(--fw-bold); }
.series-nav .next { text-align: right; }
.series-nav .is-none { color: var(--c-ink-3); background: var(--c-surface-2); }
.series-nav .is-none .t { font-weight: var(--fw-body); }
@media (max-width: 40rem) {
  .series-nav { grid-template-columns: 1fr; }
  .series-nav .next { text-align: left; }
}

.series { list-style: none; padding: 0; margin: 0; counter-reset: series; }
.series > li {
  counter-increment: series;
  display: flex; gap: var(--sp-2); align-items: baseline;
  padding: var(--sp-2) 0; margin: 0;
  border-bottom: var(--bw-1) solid var(--c-line);
}
.series > li::before {
  content: counter(series);
  flex: 0 0 auto; width: 1.7em; text-align: center;
  font-family: var(--f-head); font-weight: var(--fw-black);
  color: var(--c-ink-3);
}
.series .soon { color: var(--c-ink-3); }
.series .soon .badge {
  margin-left: var(--sp-1); font-size: var(--fs-0);
  border: var(--bw-1) solid var(--c-line-2); border-radius: var(--r-1);
  padding: 0 var(--sp-1); color: var(--c-ink-3);
}

/* ================================================================ 一覧・索引 */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap;
  border-bottom: var(--bw-3) solid var(--c-ink);
  padding-bottom: var(--sp-1);
  margin: var(--sp-5) 0 var(--sp-3);
}
.section-head h1,
.section-head h2 { margin: 0; border: 0; padding: 0; font-size: var(--fs-5); }
.section-head a { font-size: var(--fs-1); font-weight: var(--fw-bold); }

.count { color: var(--c-ink-3); font-size: 0.62em; font-weight: var(--fw-body); margin-left: 0.4em; }

/* 逆引きの件数（SITE-005【4】）。0件も出す。隠さない。 */
.lede-note { font-size: var(--fs-1); color: var(--c-ink-3); margin: 0 0 var(--sp-2); }
.linklist .n, .index-cols .n { color: var(--c-ink-3); font-size: var(--fs-0); margin-left: 0.2em; }

.lede { font-size: var(--fs-3); color: var(--c-ink-2); margin: 0 0 var(--sp-4); max-width: var(--w-max); }

.notice {
  background: var(--c-warn-bg);
  border-left: var(--bw-3) solid var(--c-warn);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-1);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-1);
}

.index-cols { columns: 2 13rem; column-gap: var(--sp-4); }
.index-cols ul { list-style: none; padding: 0; margin: 0; }
.index-cols li { break-inside: avoid; margin-bottom: var(--sp-0); font-size: var(--fs-2); }

.hr { border: 0; border-top: var(--bw-1) solid var(--c-line); margin: var(--sp-6) 0; }

.plain { background: var(--c-surface); border: var(--bw-1) solid var(--c-line); border-radius: var(--r-2); padding: var(--sp-4); }

@media (max-width: 34rem) {
  .facts dl { grid-template-columns: 1fr; }
  .index-cols { columns: 1; }
  .hero-body { padding: var(--sp-3); }
  .hero h1 { font-size: var(--fs-6); }
}