/*
  AllRev の**読み物ページ 57 枚**のスタイル——利用者向けマニュアル
  （`lp/docs/*.html` = `https://all-rev.com/docs/<トピック>`）と、
  規約系 3 枚（`/terms` `/privacy` `/data-deletion`）。

  **`styles.css` を読まない。** あちらは広告用 LP 2 枚（`/lp-ad-1` `/lp-ad-2`）
  だけの正本になった。**`home.css` も読まない**——あちらはサービス紹介の
  4 枚で、ヒーローやコラージュのような読み物には要らない部品を抱えている。
  **同じ値を 2 つ持たない**ために、トークンだけは `home.css` の `:root` を
  正本として写してある（**ずれたらあちらが正**）。

  ── 見た目の方針（Linear 風・白キャンバス）─────────────────────
  **正本は `server/app/mcp/knowledge/skills/linear-design/SKILL.md`。** サービス紹介 →
  ドキュメントと移った人に**別サイトに見えない**ことが、この面の仕事
  ——だから面・線・文字・青・角丸の語彙は LP とまったく同じものを使い、
  違うのは「読ませるための配置」（2 カラム・本文の行長・図の見せ方）だけ。

  要点:
  - **面は 2 段**（`--bg` → `--bg-card`）。読み物に 3 段目は要らない。
  - **分離は 1px のヘアライン。** 影を落としてよいのは**浮いている**もの
    ——管理画面のスクリーンショット（`--sh-float`）だけで、カード・表・
    サイドバーには落とさない（面の数だけ影が並ぶと紙束に見える）。
  - **角丸は 2 / 6 / 12 / 9999 の 4 語彙だけ。**
  - **font-weight の上限は 600**（700/800 は読み込んでもいない）。
    強調は太さではなく色（`--ink`）で付ける。
  - **青は「押すと何かが起きる」場所だけ。** 見出しにも飾りにも使わない。
  - **`--faint` を読ませる文字に使わない**（白地 2.56:1 = AA 落ち）。
    このページ群では `.faint` は**パンくずと索引の説明文**という
    「読ませる文字」に付いているので、**クラスのほうを `--muted` に
    解決してある**（薄い文字が要るときはいつでも `--muted`）。
  - **hover で動かさない。** 変えてよいのは色・枠の色・下線だけで、
    位置も大きさも枠の太さも変えない。
  - 押せるものには `:focus-visible` を必ず付ける（`:focus` には付けない）。

  ── 動き ────────────────────────────────────────────────
  読み物なので**出現アニメーションは付けない**。動くのは色・枠色・影の
  120ms だけ。無効化は末尾の `prefers-reduced-motion` 1 箇所にまとめる。

  ── ビルドしない ────────────────────────────────────────
  Tailwind も PostCSS も通さない。ここに書いたものがそのまま配信される。
  **JS を実行しなくても本文が読める**こと（クローラに読まれるのが仕事）。
  JS が足すのは 2 つだけ——「表示するサービス」の絞り込み（`<html data-svc="…">`
  を当てるだけで、**markup からは何も消えない**）と、見出しの「#」
  （`lp/docs.js`。節の URL を写す。動かなくても `#id` には飛べる）。
*/

:root {
  /* ── 面（明るい順に 3 段。これ以上増やさない） ───────────── */
  --bg: #ffffff; /* ページ地 */
  --bg-card: #f8fafc; /* 淡い面: サイドバーの hover・コードの地・タブの箱 */
  /* 3 段目（`--bg-raise: #f1f5f9`）は読み物では出番が無いので置いていない。
     **要るときは `home.css` の値をそのまま写す**（勝手に別の淡さを作らない）。 */

  /* ── 境界線（分離の主役） ───────────────────────────────── */
  --line: #e2e8f0; /* 標準のヘアライン */
  --line2: #cbd5e1; /* 強めの区切り・フッター上端・hover */

  /* ── 文字（白地での実測比） ───────────────────────────── */
  --ink: #0f172a; /* 見出し・強調（白地 17.85:1） */
  --body: #475569; /* 本文（白地 7.58:1）。マニュアルは本文が主役なので、
     全文を補足の色（--muted）で組まない——強調との階層も潰れる */
  --muted: #64748b; /* 補足・ラベル（白地 4.76:1・淡い面 4.55:1、AA 可） */
  /* **読ませる文字に使わない**（白地 2.56:1）。装飾専用。 */
  --faint: #94a3b8;

  /* ── アクセント = 既存テーマのロイヤルブルー ─────────────── */
  --b600: #2563eb; /* 塗りボタンの地（白文字と 5.17:1）。文字色には使わない */
  --b700: #1d4ed8; /* 白地の上のリンク・アクセント文字（6.6:1）。
     塗りボタンの hover もこちら（白文字と 7.0:1） */
  --b-tint: rgba(37, 99, 235, 0.06); /* 淡い青ワッシュ（現在ページ・手順の番号） */

  /* ── 画像注釈の色 ─────────────────────────────────────
     スクリーンショット（`lp/img/docs/*.webp`）に**焼き込んである**枠と
     番号の色（`scripts/docs_screenshots/capture.py` の `HL`）と同じ値。
     **ここを変えるなら capture.py も変える**——別の色になると、どの説明が
     どの枠を指しているのか読み手には辿れない。「注意」のコールアウト
     （`.doc-warn`）も同じ色に揃える——青 1 色の紙面で、目を止めるべき
     場所だけがこの色になる。 */
  --mark: #e8590c;
  --mark-soft: #fdf1e9;
  --mark-border: #f2cdb3;

  /* ── 角丸: 4 語彙だけ（2 / 6 / 12 / 9999） ────────────────── */
  --r-sm: 2px;
  --r: 6px; /* ボタン・入力・箱 */
  --r-lg: 12px; /* 写真・カード上限。**これ以上大きくしない** */
  /* 9999px（ピル）は読み物には出てこない */

  /* ── エレベーション ─────────────────────────────────────
     ヘアラインが標準。**影は「浮いている」ものだけ**（＝管理画面の写真）。 */
  --sh-float: 0 24px 48px -24px rgba(15, 23, 42, 0.18);

  /* ── レイアウト ───────────────────────────────────────
     ページ幅は LP と同じ 1180px。本文の列は 760px で止める
     ——1 行が長いほど次の行の頭を見失う（読み物としての上限）。 */
  --wrap: 1180px;
  --col: 760px;
  --side: 240px;
  --head: 56px; /* ヘッダーの高さ。sticky の基準に使う */

  /* ── モーション（色と枠だけ。距離は動かさない） ───────────── */
  --t-fast: 120ms;

  /* ── フォント ─────────────────────────────────────────── */
  /* 読み込みは family=Inter:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600
     （700/800 は読み込まない。見出しは 600 で止める） */
  --sans:
    "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* ヘッダーが固定なので、アンカーで飛んだ先が隠れないように余白を取る */
  scroll-padding-top: calc(var(--head) + 24px);
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  /* 日本語の詰め。見出しの折り返し位置がこれ前提で決まっている */
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--b700);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}

/* **押せるものには必ずフォーカスの輪郭。** `:focus` には付けない
   ——マウスで押しただけの要素に輪郭が残る。 */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--b600);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── 共通の器 ─────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* サイドバーを持たない読み物（規約・ポリシー・データ削除）。
   本文の列と同じ幅で止める */
.wrap.narrow {
  max-width: calc(var(--col) + 48px);
}

.tiny {
  font-size: 13px;
  line-height: 1.7;
}

/* **`--faint` には解決しない。** このページ群で `.faint` が付くのは
   パンくずと索引の説明文——どちらも読ませる文字なので `--muted`（4.76:1）。 */
.faint {
  color: var(--muted);
}

/* キーボードで辿る人が、目次を全部踏まずに本文へ行けるようにする。
   見えていると邪魔なので、フォーカスが当たったときだけ出す。 */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--b600);
  color: #fff;
  border-radius: 0 0 var(--r) 0;
}

.skip:focus {
  left: 0;
}

/* ── ボタン ─────────────────────────────────────────────
   **塗りは 1 画面 1 つ**（ヘッダーの「管理画面へ」）。 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color var(--t-fast) ease;
}

.btn:hover {
  text-decoration: none;
}

/* hover は**薄い側へ振らない**——濃い側 `--b700` なら白文字と 7.0:1 で、
   静止時（5.17:1）より読みやすくなる。影も translateY も付けない。 */
.btn-primary {
  background: var(--b600);
  color: #fff;
}

.btn-primary:hover {
  background: var(--b700);
  color: #fff;
}

/* ── ヘッダー ─────────────────────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

/* 中身は本文と同じ器（`.wrap`）に入れる——ロゴと本文の左端が揃っていないと、
   ページの骨格が 2 つあるように見える */
.bar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--head);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.brand:hover {
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 22px;
  height: 22px;
}

.bar-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
}

.bar-nav a {
  color: var(--muted);
}

.bar-nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.bar-cta {
  display: flex;
  gap: 10px;
}

/* ナビと CTA が収まらない幅ではナビを畳む。ハンバーガーを足すほど項目が
   無く、ページを送るだけならスクロールで足りる */
@media (max-width: 820px) {
  .bar-nav {
    display: none;
  }

  .bar-cta {
    margin-left: auto;
  }
}

/* ── 2 カラム（左にページ一覧） ─────────────────────────────
   `/docs` は一覧に戻らないと隣のページへ行けなかった。左に固定の一覧を置き、
   いま読んでいるページに印を付ける。

   **一覧の markup は全ページが同じものを静的に持つ。** LP はビルドしないので
   JS で組むと no-JS とクローラーから消える。ページを足したときのずれは
   `server/tests/test_docs_nav.py` が止める（1 ページでも欠けると落ちる）。 */

.doc {
  padding: 40px 0 96px;
}

.docs-layout {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}

.docs-side {
  position: sticky;
  /* ヘッダー（固定）の下に貼り付く */
  top: calc(var(--head) + 16px);
  max-height: calc(100vh - var(--head) - 40px);
  overflow-y: auto;
  /* 目次自身のスクロールバーが本文に食い込まないよう、内側に余白を取る */
  padding-right: 12px;
  /* 見出し（h1）の 1 行目と目次の頭を揃える */
  margin-top: 4px;
}

.docs-main {
  /* **`width: 100%` を外さない。** `margin: 0 auto` を置いた瞬間、グリッドの
     項目は「引き伸ばし」をやめて中身の幅（fit-content）で決まるようになり、
     **表（`min-width` を持つ）のあるページだけ本文が画面からはみ出す**
     ——狭い画面でページ全体が横スクロールする、という形で出る。 */
  width: 100%;
  max-width: var(--col);
  min-width: 0;
  /* 余った幅は本文の左右へ均等に。右端に全部寄せると、広い画面で
     目次と本文だけが左に固まって見える */
  margin: 0 auto;
}

/* ── サイドバーの一覧 ───────────────────────────────────── */

.docs-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13.5px;
}

.docs-nav a {
  padding: 5px 10px;
  border-radius: var(--r);
  color: var(--muted);
  line-height: 1.5;
  transition:
    background-color var(--t-fast) ease,
    color var(--t-fast) ease;
}

/* **hover で動かさない**（色だけ）。 */
.docs-nav a:hover {
  background: var(--bg-card);
  color: var(--ink);
  text-decoration: none;
}

/* いま読んでいるページ。色だけだとリンクと見分けが付かないので、
   ごく淡い青の地で「ここにいる」と分かるようにする */
.docs-nav a.is-current {
  background: var(--b-tint);
  color: var(--ink);
  font-weight: 500;
}

.docs-nav-home {
  color: var(--ink) !important;
  font-weight: 500;
}

/* 章の見出し。**リンクと同じ色のまま**、大きさと字間だけで差を付ける
   ——濃くすると押せるものに見え、薄くすると `--faint` の禁止に触れる。
   実際に切り分けているのは上の余白（20px）。 */
.docs-nav-group {
  margin: 20px 0 4px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.docs-nav-sec {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.docs-nav-sec:first-of-type .docs-nav-group {
  margin-top: 14px;
}

/* ── 表示するサービス（タブ） ───────────────────────────────
   契約しているサービス（広告 / SNS / SEO）に関係するページだけに絞る。
   **絞るのは CSS だけで、markup からは何も消さない**——JS を切っている人と
   クローラーには「すべて」の状態がそのまま見える。切り替えるのは
   `<html data-svc="…">` の 1 箇所で（配るのは `scripts/sync_docs_nav.py`）、
   項目側の印は `data-svc` の空白区切り（`~=` で 1 つずつ照合できる）。

   **3 つ + 1 つの 2 段。** 上の段が「どれか 1 つを選ぶ」（広告 / SNS / SEO）、
   下の段の「すべて表示」だけが**絞り込みを外す**操作。同じ大きさで 4 つ
   並べると、外す操作が 4 つ目のサービスに見える。 */

.docs-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 16px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.docs-tabs-label {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* `.docs-nav a`（目次のリンク）より強い指定にする——同じ入れ子にあるので、
   クラスだけで書くと余白も角丸も、選択中の色まで目次のリンク側が勝つ */
.docs-nav a.docs-tab {
  padding: 5px 2px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  transition:
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color var(--t-fast) ease;
}

.docs-nav a.docs-tab:hover {
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink);
  text-decoration: none;
}

/* 選んでいるもの。**箱の中で 1 枚だけ白く浮かせる**（セグメント）
   ——枠線の色替えだけでは、隣のリンクに埋もれて分からない */
.docs-nav a.docs-tab.is-current {
  background: var(--bg);
  border-color: var(--line2);
  color: var(--ink);
  font-weight: 600;
}

/* 「すべて表示」は下の段いっぱい。**絞り込みを外す操作**なので、
   サービスの 3 つとは段も見た目も分ける */
.docs-nav a.docs-tab-all {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: var(--b700);
  font-size: 12.5px;
}

.docs-nav a.docs-tab-all:hover {
  background: var(--bg);
  border-color: var(--line);
  color: var(--b700);
}

/* **タブと「使う機能」は別物**（こちらは説明書の表示、あちらは管理画面に
   出す機能）。違いはリンク先で説明し、ここは飛び先だけ置く */
.docs-tabs-note {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding: 0 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.docs-nav .docs-tabs-note a {
  /* `.docs-nav a`（目次の項目）の padding と角丸を打ち消す——同じ入れ子に
     あるので、外すと文中の「こちら」の前後に項目ぶんの隙間が空く。
     リンクの途中で折り返すと押せる範囲が 2 行に割れるので nowrap。 */
  display: inline;
  padding: 0;
  border-radius: 0;
  color: var(--b700);
  white-space: nowrap;
}

/* ── 絞り込みの規則 ───────────────────────────────────── */

/* 選んだサービスに関係しない項目を隠す */
html[data-svc="ad"] .svc:not([data-svc~="ad"]),
html[data-svc="account"] .svc:not([data-svc~="account"]),
html[data-svc="seo"] .svc:not([data-svc~="seo"]) {
  display: none;
}

/* **いま読んでいるページだけは必ず残す。** 消すと、開いているページが
   目次のどこにも無い状態になり、読んでいる人には壊れて見える */
html[data-svc] .docs-nav a.svc.is-current {
  display: block;
}

/* 項目が 1 つも残らなかった章は、見出しごと畳む
   （押せるものが無い見出しだけが残ると、リンクが壊れたように見える） */
html[data-svc="ad"] .docs-nav-sec:not(:has(a[data-svc~="ad"], a.is-current)),
html[data-svc="account"] .docs-nav-sec:not(:has(a[data-svc~="account"], a.is-current)),
html[data-svc="seo"] .docs-nav-sec:not(:has(a[data-svc~="seo"], a.is-current)) {
  display: none;
}

/* 索引（`/docs`）の節も同じ。**印の付いた項目だけでできている節**が対象で、
   印の無い項目（利用規約など）が 1 つでもあれば節ごと消さない。
   **`:has(li.svc)` を外さない**——外すと、リストを持たない節（本文だけの節）が
   すべて「残る項目が無い節」に当てはまり、ページの中身が丸ごと消える
   （2026-08-31 に本番で起きた。見張りは `test_docs_nav.py`）。 */
html[data-svc="ad"] .doc-section:has(li.svc):not(:has(li:not(.svc), li[data-svc~="ad"])),
html[data-svc="account"] .doc-section:has(li.svc):not(:has(li:not(.svc), li[data-svc~="account"])),
html[data-svc="seo"] .doc-section:has(li.svc):not(:has(li:not(.svc), li[data-svc~="seo"])) {
  display: none;
}

/* ページ内目次も、行き先が 1 つも残らなければ畳む（空の箱が残ると、
   目次が壊れているように見える）。**印の無いリンク（どのサービスでも
   読む節）が 1 つでもあれば残す** */
html[data-svc="ad"] .toc:not(:has(a[data-svc~="ad"], a:not(.svc))),
html[data-svc="account"] .toc:not(:has(a[data-svc~="account"], a:not(.svc))),
html[data-svc="seo"] .toc:not(:has(a[data-svc~="seo"], a:not(.svc))) {
  display: none;
}

/* 索引の頭に出す「いまどれを表示しているか」。**選んでいるものだけを出す**
   （どれも選んでいない = JS が無いときは 1 つも出さない） */
.svc-note {
  display: none;
}

html[data-svc="all"] .svc-note[data-svc~="all"],
html[data-svc="ad"] .svc-note[data-svc~="ad"],
html[data-svc="account"] .svc-note[data-svc~="account"],
html[data-svc="seo"] .svc-note[data-svc~="seo"] {
  display: block;
}

/* 絞り込みで隠れている節へ**リンクで来た**とき、その節だけを開く
   （`docs.js` が `is-revealed` を付ける）。**中の項目も一緒に開く**
   ——この節が隠れているのは「残っている項目が 1 つも無い」ときなので、
   節だけ出すと見出しと空のリストが残る。
   `!important` なのは、絞り込みの規則（`:has()` を含むぶん強い）を
   1 つの節だけ上書きするため。 */
.doc-section.is-revealed,
.doc-section.is-revealed .svc {
  display: revert !important;
}

.doc-revealed {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-card);
  color: var(--muted);
  font-size: 13px;
}

/* ── 本文 ─────────────────────────────────────────────── */

.doc h1 {
  font-size: clamp(28px, 3.2vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 8px 0 16px;
}

.doc-lead {
  max-width: 68ch;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 16px;
}

/* 見出しの下線は引かない。**節の切れ目は余白で示す**——1 ページに 10 本の
   罫線が並ぶと、どこが本文でどこが区切りなのか目が拾えなくなる */
.doc-section {
  margin-bottom: 0;
  padding-bottom: 8px;
  /* ヘッダーが固定なので、目次から飛んだ見出しが隠れないようにする */
  scroll-margin-top: calc(var(--head) + 24px);
}

.doc-section h2 {
  margin: 48px 0 16px;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.doc-section h3 {
  margin: 28px 0 8px;
  font-size: 16px;
  line-height: 1.6;
}

/* ── 節へのリンク（見出しの右の「#」） ─────────────────────
   押すとその節へ飛び、同時に**その節の URL がクリップボードへ入る**
   ——「ここを見てください」と渡すときに、ページの URL だけでは長いページの
   どこを読むのかが伝わらない。置くのは `lp/docs.js`（markup には無い）。
   **hover でしか出さない作りにしない**——指で触る端末にはポインタが無く、
   出す手段がどこにも無くなる。 */
.doc-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: var(--faint);
  vertical-align: middle;
  opacity: 0;
  transition:
    opacity var(--t-fast) ease,
    color var(--t-fast) ease;
}

.doc-section h2:hover .doc-anchor,
.doc-section h3:hover .doc-anchor,
.doc-anchor:hover,
.doc-anchor:focus-visible,
.doc-anchor.is-copied {
  opacity: 1;
}

.doc-anchor:hover {
  color: var(--b700);
}

.doc-anchor:focus-visible {
  border-radius: var(--r-sm);
  outline: 2px solid var(--b600);
  outline-offset: 2px;
}

@media (hover: none) {
  .doc-anchor {
    opacity: 1;
  }
}

/* 写したかどうかは**押した場所**で知らせる（画面の隅に出すと目が追えない）。
   文面は `docs.js` が入れる——**写せなかったときはそう出す** */
.doc-anchor.is-copied::after {
  content: attr(data-note);
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.doc-section p {
  margin: 0 0 14px;
  color: var(--body);
}

.doc-section strong,
.doc-list strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── ページ内目次 ───────────────────────────────────────
   **囲まない。** 目次は本文の前に置く道しるべで、独立した部品ではない
   ——枠と地を張ると、本文より先に「箱」が目に入る。縦線 1 本で足りる。
   見出しは markup を増やさずに `::before` で置く（サイドバーの「目次」と
   紛らわしいので、こちらは「このページの内容」と名乗る）。 */

.toc {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin: 24px 0 40px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.toc::before {
  content: "このページの内容";
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.toc a {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.toc a:hover {
  color: var(--ink);
}

/* ── 箇条書き ─────────────────────────────────────────── */

.doc-list {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.doc-list li {
  position: relative;
  padding-left: 20px;
  color: var(--body);
}

.doc-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--b700);
}

/* 索引（`/docs`）の項目。リンクの下に 1 行の説明が付く */
.doc-list a {
  font-size: 15px;
}

.doc-list .tiny {
  color: var(--muted);
}

.doc-dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px 20px;
  margin: 0 0 16px;
}

.doc-dl dt {
  color: var(--muted);
  font-size: 14px;
}

.doc-dl dd {
  margin: 0;
  color: var(--body);
}

/* ── 手順 ─────────────────────────────────────────────
   **1 項目 1 枚の枠は外す。** 枠が縦に 5 枚並ぶと、手順ではなく
   カードの一覧に見える——番号と余白だけで足りる。

   番号は**角丸の四角**にする。同じページにスクリーンショットの凡例番号
   （`.shot-legend` = オレンジの正円。画像内の枠を指す）が並ぶので、
   丸どうしだと「1, 2, 3」が 2 系統あることに読み手が気づけない。
   色（青 / オレンジ）と形（四角 / 丸）の両方で分ける。 */

.doc-steps {
  counter-reset: doc-step;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.doc-steps li {
  counter-increment: doc-step;
  position: relative;
  padding-left: 34px;
  color: var(--body);
}

.doc-steps li::before {
  content: counter(doc-step);
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--b-tint);
  color: var(--b700);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
}

/* ── 注意と補足 ─────────────────────────────────────────
   事故が起きてからでは遅い注意書き。本文と同じ見た目にすると読み飛ばされる。
   色は画像注釈と同じ `--mark`（オレンジ）——アクセント青だと情報リンクと
   同じ顔になり、「注意」に見えない。 */

.doc-warn {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--mark-soft);
  border: 1px solid var(--mark-border);
  border-left: 2px solid var(--mark);
  border-radius: var(--r);
  color: var(--body);
}

/* 注意ほど強くない、ただの言い添え。**色を持たせない**——ページに
   有彩色の箱が 2 種類並ぶと、どちらが「止まって読む」ほうか分からなくなる */
.doc-note {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--body);
}

/* ── コード ───────────────────────────────────────────── */

.doc code {
  padding: 1px 5px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-all;
}

/* ── 画面のスクリーンショット ───────────────────────────────
   **画像に焼くのは枠と番号だけで、説明の文はここ（HTML）に置く。** 画像へ
   吹き出しを描き込むと、肝心の画面を吹き出しが覆ううえ、文言を直すたびに
   撮り直しになり、検索にも翻訳にも掛からない。撮影は
   `scripts/docs_screenshots/capture.py`（説明の文の正本は同ディレクトリの
   `shots.py`。貼り付ける markup は `--legend` が書き出す）。 */

.shot {
  margin: 0 0 24px;
}

/* 写真は「紙の上に浮いている 1 枚」なので、ここだけ影を落とす */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-float);
}

/* 縦長の 1 枚（サイドバーだけを切り出したものなど）。**本文の幅いっぱいに
   広げない**——横 280px ぶんの写真を引き伸ばすと、1 枚で画面 3 つ分の
   高さになり、そのページの他の説明が全部押し出される */
.shot.tall img {
  max-width: 320px;
}

/* 本文は 760px で止めるが、**写真だけは列からはみ出させる**——管理画面の
   写真は 1440px で撮ったものなので、760px まで縮めると中の文字が読めない。
   広い画面（本文の左右に余白があるとき）だけ、両側へ 60px ずつ広げる。 */
@media (min-width: 1200px) {
  .shot:not(.tall) {
    margin-left: -60px;
    margin-right: -60px;
  }
}

.shot figcaption {
  margin-top: 12px;
}

.shot-legend {
  counter-reset: shot-num;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.shot-legend li {
  counter-increment: shot-num;
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* **オレンジの正円のまま。** 画像に焼き込んである番号と同じ色・同じ形で、
   手順の番号（青の角丸四角）と見分けられるようにしてある */
.shot-legend li::before {
  content: counter(shot-num);
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mark);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.shot-legend strong {
  color: var(--ink);
  font-weight: 600;
}

/* 狭い画面では縮めきると文字が読めなくなるので、横スクロールに逃がす
   （`.table-wrap` と同じ考え方）。図の外枠は SVG 側が持っている */
.shot-scroll {
  overflow-x: auto;
  border-radius: var(--r-lg);
}

/* `.wrap.narrow` の中では本文幅より広げない */
.narrow-fig {
  margin: 0 0 28px;
}

/* 横スクロールに逃がさない図（狭い画面むけの版を `<picture>` で持つもの）。
   **必ず画面幅に収める**——収まらないと、はみ出た側が見切れたまま
   気づかれない */
.fig-plain {
  margin: 32px 0 0;
}

.fig-plain img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ── 前後のページ ───────────────────────────────────────
   **`<a>` の中に要素を足さない**——絞り込みのスクリプトが `textContent` を
   丸ごと書き換えるので、中の markup は消える（`sync_docs_nav.py`）。 */

.doc-pager {
  display: flex;
  gap: 12px;
  margin-top: 48px;
  font-size: 14px;
}

.doc-pager a {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  transition:
    border-color var(--t-fast) ease,
    color var(--t-fast) ease;
}

.doc-pager a:hover {
  border-color: var(--line2);
  color: var(--ink);
  text-decoration: none;
}

/* 2 つ目（次のページ）は右端へ。1 つしか無いときも左には寄せない */
.doc-pager a:last-child:not(:first-child) {
  text-align: right;
}

/* 絞り込みで次のページが無くなったとき、スクリプトが `hidden` を付ける */
.doc-pager a[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .doc-pager {
    flex-direction: column;
  }

  .doc-pager a:last-child:not(:first-child) {
    text-align: left;
  }
}

/* ── 表 ───────────────────────────────────────────────
   **縞を敷かない。** 行の区切りは 1px のヘアラインだけで足りる
   ——地の色が交互に変わると、読み手はそこに意味があると思って探す。 */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  text-align: left;
  padding: 10px 12px;
  vertical-align: top;
}

thead th {
  border-bottom: 1px solid var(--line2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

tbody td {
  border-bottom: 1px solid var(--line);
  color: var(--body);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody td:first-child {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}

/* ── サービス別ガイドで使う部品 ─────────────────────────────
   `/docs/service-*` だけが使う（読み物の中の「紹介」パート）。 */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 16px;
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* **並ぶカードに影を落とさない**（面の数だけ影が並ぶと紙束に見える）。
   分離は 1px のヘアラインだけ。 */
.tile {
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.tile h3 {
  margin-bottom: 8px;
  font-size: 15px;
}

.tile p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* タイルの見出しの上に置く小さな図。**img として読み込む**ので、この
   ファイルの CSS 変数もウェブフォントも図の中には届かない（色は SVG 側に
   直値で持たせてある）。**width / height 属性を消さない**——読み込み前でも
   場所が確保され、本文が後から飛ばなくなる */
.fig {
  display: block;
  width: 100%;
  height: auto;
  margin: -2px 0 14px;
  background: var(--bg);
  border-radius: var(--r);
}

/* 「見出し（strong）＋補足（span）」を積む手順。**`.doc-steps` と分ける**
   ——あちらは文中で強調を打つので、`strong` を block にすると 1 語ごとに
   改行される */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 34px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--b-tint);
  color: var(--b700);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
}

.steps strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.steps span {
  color: var(--muted);
  font-size: 14px;
}

/* 「こんなお悩みをなくします」。空のチェックボックス風の印で、読んだ人が
   自分で当てはまりを数えられる形にする（色だけに頼らない） */
.pains {
  margin: 0 0 20px;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.pains-title {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.pains ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 24px;
}

.pains li {
  position: relative;
  padding-left: 26px;
  color: var(--muted);
  font-size: 14px;
}

.pains li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--line2);
  border-radius: 4px;
}

.list {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.list li {
  position: relative;
  padding-left: 20px;
  color: var(--body);
}

.list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--b700);
}

.faq {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

.faq details {
  padding: 2px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t-fast) ease;
}

.faq details:hover {
  border-color: var(--line2);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  color: var(--ink);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: "+";
  color: var(--b700);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
}

.faq details[open] summary::before {
  content: "−";
}

.faq p {
  margin: 0 0 16px;
  padding-left: 24px;
  color: var(--muted);
  font-size: 14px;
}

/* 見出しの上に置く小さなラベル（サービス別ガイドの導入）。
   **大文字化しない**——SaaS が SAAS になるうえ、日本語には効かない */
.eyebrow {
  margin: 0 0 16px;
  color: var(--b700);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.eyebrow .dot {
  margin: 0 8px;
  color: var(--faint);
}

/* ── フッター ─────────────────────────────────────────── */

.foot {
  padding: 40px 0 56px;
  background: var(--bg);
  border-top: 1px solid var(--line2);
  color: var(--muted);
  font-size: 13px;
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
}

.foot-inner .tiny {
  margin: 8px 0 0;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.foot-nav a {
  color: var(--muted);
}

.foot-nav a:hover {
  color: var(--ink);
}

/* ── 狭い画面 ─────────────────────────────────────────── */

/* サイドバーが本文を圧迫する幅では、上に畳んで置く。**消さない**——
   消すと、狭い画面の人だけ隣のページへ行く手段が索引へ戻ることしかなくなる。
   閉じる操作は入れず、高さを切って中をスクロールさせる（JS を足さないため） */
@media (max-width: 960px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .docs-side {
    position: static;
    max-height: 320px;
    margin: 0;
    padding: 12px 8px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r);
  }

  /* 下端のフェード。高さを切って中をスクロールさせているので、これが無いと
     リンクの文字が途中で水平に切断され、続きがあることではなく描画が
     壊れたことに見える。sticky なので、常に見えている範囲の下端に貼り付く */
  .docs-side::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    height: 32px;
    margin-top: -32px;
    background: linear-gradient(transparent, var(--bg-card));
    pointer-events: none;
  }

  /* 末尾までスクロールしたとき、フェードが最後の項目を覆わないための余白 */
  .docs-side .docs-nav {
    padding-bottom: 24px;
  }

  .docs-nav-sec:first-of-type .docs-nav-group {
    margin-top: 10px;
  }

  /* 目次は高さを切って中をスクロールさせるので、タブが流れていくと
     「絞り込みがある」ことに気づけない。箱の頭に貼り付ける。
     **狭い画面では 1 段に畳む**——貼り付くものが 2 段あると、そのぶん
     目次が見えなくなる（見えている部分の取り合いになる） */
  .docs-tabs {
    position: sticky;
    top: 0;
    z-index: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--bg);
  }

  .docs-nav a.docs-tab-all {
    grid-column: auto;
    margin-top: 0;
  }

  .docs-main {
    max-width: none;
  }
}

@media (max-width: 620px) {
  /* 用語と中身が 150px の列に収まらなくなるので、縦に積む */
  .doc-dl {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  .doc-dl dd {
    margin-bottom: 12px;
  }

  /* 見出しの手動改行を止める。この幅では自然な折り返しと二重になり、
     「活動を」だけの行ができる */
  .br-wide {
    display: none;
  }
}

@media (max-width: 760px) {
  /* 大きい図は縮めると文字が潰れる。横スクロールで読める大きさを保つ
     （タイルの中の小さい図 `.fig` は文字数を絞ってあるのでそのまま縮める） */
  .shot-scroll img {
    min-width: 700px;
  }
}

/* ── 動きを減らす設定 ─────────────────────────────────────
   無効化はここ 1 箇所にまとめる（散らすと、あとから足した動きだけが
   止まらない）。 */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}