/**
 * WebPageGazer — 公開サイトの見た目。
 *
 * 【暗い地を既定にした】（2026-09-12・ユーザー指摘）
 * かつてここは明るい地の 760px 幅で、**文書としては読めるが製品の顔に見えなかった。**
 * 色の札は拡張機能（`extension/entrypoints/dashboard/style/base.css`）と
 * 姉妹（`../../fleamarketgazer/website/index.html`）で**すでに同一**だった ——
 * 地・文字・差し色の6色がそのまま重なっていた。
 * **移せない色は1つも無かった。** 差は色ではなく、構成要素の数だった。
 *
 * 【ここに16進数を並べないこと】（2026-09-23）
 * かつて6色を書き出していたが、**差し色を藍から青へ移したとき説明だけが古く残った。**
 * `theme.test.ts` がコメントの中の色も数えるので落ちて気づけた。
 *
 * 【角丸と余白は札から引く】
 * `.agents/rules/design-tokens.md` 第8〜10項。
 * `extension/scripts/check-styles.mjs` がこのファイルを見ており、直書きで落ちる。
 */
:root {
  /* 地と面。**正典は extension の base.css** */
  --bg-primary: #0b0f19;
  --bg-secondary: #111827;
  /* 沈んだ面（畳んだ補足の地）。正典は extension の base.css */
  --surface-sunken-rgb: 15, 23, 42;
  --card-bg: rgba(30, 41, 59, 0.65);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-hover-border: rgba(59, 130, 246, 0.4);
  /**
   * 用件の切れ目に引く線。**囲みの線（`--card-border`）より濃い。**
   * 拡張機能が `controls.css` で決めた階層（段 0.22 / 欄 0.08）に揃えてある。
   */
  --divider-strong: rgba(255, 255, 255, 0.22);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* 【2026-09-23 に 藍 → 青へ移した】（ユーザー判断）正典は拡張機能の `utils/theme.ts` */
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  /* 【地の上に置く文字色】暗い面では明るい側へ振る（拡張機能と同じ考え方） */
  --primary-light: #93c5fd;
  /**
   * 【紫（`--secondary: #a855f7`）は 2026-09-22 に外した】（ユーザー判断）
   * ブランドの傾きが藍 → 紫 → 桃 から**藍 → 青緑の2色**になり、中間が要らなくなった。
   *
   * **一度は「単独で使う場所がある」として札だけ残したが、それは誤りだった** ——
   * 番人（`check:styles`）に数えさせたら、`website/` のどこからも読まれていなかった。
   * **パレットに並んでいるものは「使われている」と読まれる。** 残さない。
   *
   * 拡張機能側の紫（パレットの `accentViolet`）は**残っている**。あちらはピッカーの区画タグと
   * 開発者モードの印で使っており、**ブランドの色ではなく区別の色**である。
   */
  /**
   * 注意を促す文字（ガイドの「⚠」の行）。
   * 【`C-76` で拡張機能から写した節が使う】正典は extension の base.css。
   * 地の上に置く文字なので、明暗で濃さを振る。
   */
  --warning-light: #fcd34d;
  /**
   * 変更前後と「知らせる／知らせない」の模型が使う（2026-09-23・トップの特長）。
   * 正典は拡張機能の `utils/theme.ts`。文字の色は地の明暗で濃さを振る。
   * `-rgb` は面を薄く塗るための三つ組で、明暗で変えない。
   */
  --success-light: #6ee7b7;
  --danger-light: #fca5a5;
  --success-rgb: 16, 185, 129;
  --danger-rgb: 239, 68, 68;
  --warning-rgb: 245, 158, 11;
  --primary-rgb: 59, 130, 246;
  /**
   * SNS のアイコンの色。**白か黒しか使わない**（2026-09-23）。
   * Bluesky は「公式の色か、白黒の単色」以外への塗り替えを禁じている。X と Threads も
   * 配っているのは白と黒の版だけである。灰色の文字色に揃えたくなるが、揃えないこと。
   */
  --sns-fg: #ffffff;
  /**
   * ブランドの終点。**2026-09-22 に桃と入れ替えた**（ユーザー判断）。
   * 正典は拡張機能の `utils/theme.ts`（`PALETTE.accentCyan`）。
   */
  --tertiary: #06b6d4;
  /**
   * ブランドの傾きの起点。**アクセントではない。**
   * 正典は拡張機能の `utils/theme.ts`（`PALETTE.accentIndigo`）。
   */
  --indigo: #4f46e5;
  /**
   * 暗い地に置くときのブランドの両端。
   * 「地の上に置く色は、明暗で濃さを逆に振る」——拡張機能側と同じ決まりである
   *（正典は `extension/utils/theme.ts`）。印は面積が小さく、沈むと形が読めない。
   */
  --indigo-light: #818cf8;
  --cyan-light: #22d3ee;
  /** 同じ青緑の濃い側。明るい地の上に置くときに使う */
  --cyan-deep: #0e7490;

  /** ブラウザが描く部品（言語の候補一覧）の明暗。明るいテーマで light へ振る */
  --select-scheme: dark;

  /* 【傾きも札から組む】端の色を直に書くと、差し色を変えたときにここだけ残る */
  /**
   * 【起点はアクセントとは別の札である】（2026-09-23）
   * かつて `--primary-hover` を起点にしていたが、**アクセントを青へ移すと
   * ブランドの傾きまで動く形だった。** 藍は `--indigo` として分けてある。
   */
  --gradient-brand: linear-gradient(135deg, var(--indigo) 0%, var(--tertiary) 100%);
  /**
   * ロゴの形を塗る傾き。**ここだけ真横である。**
   * 揃えたくなる不揃いなので、片付けのつもりで 135deg にしないこと
   *（`.agents/rules/design-tokens.md` 5-2）。
   */
  --gradient-mark: linear-gradient(90deg, var(--indigo-light) 0%, var(--cyan-light) 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-hover));
  --glow: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.25) 0%, rgba(11, 15, 25, 0) 70%);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /**
   * 【並び順が効く】（2026-09-22 に測って直した）
   * 前の指定は `system-ui` が `"Hiragino Sans"` より前にあり、
   * **後ろの2つには一度も到達していなかった。** 同じ文を描いて絵を突き合わせて確かめた。
   * いまは同梱の日本語（`Noto Sans JP Subset`）を `system-ui` より前に置く。
   * 最後の逃げ場は残す —— 部分集合に無い字は、そこで拾われる。
   */
  --font-main: "Noto Sans", "Noto Sans KR Subset", "Noto Sans JP Subset", system-ui, sans-serif;
  --font-heading: "Poppins", "Noto Sans KR Subset", "Noto Sans JP Subset", "Noto Sans", system-ui, sans-serif;

  /**
   * 貼り付くヘッダー（`.site-header`・`site.css`）の高さ。**サイトにしか無い寸法**（規約 7-2）。
   * 高さは中身なりで決まり、実測 69px（1280px・390px とも、2026-09-24）。少し余らせて 4.5rem。
   * 使うのは `site.css` の `scroll-padding-top` —— アンカーで飛んだ先がヘッダーの下に潜らないように。
   */
  --site-header-height: 4.5rem;
}

/*
 * 書体はこのサイトに同梱する（fonts/）。**CDN から読んではならない。**
 *
 * 【製品と同じ判断である】（2026-09-12・ユーザー判断）
 * 拡張機能は最初から同梱していた（`extension/entrypoints/dashboard/style/base.css`）。
 * **サイトだけが Google Fonts から読んでいた。** 同じ4ファイルを置いて揃える。
 *
 * 理由:
 *  1. 可用性: Google は実ファイル名を入れ替えるが、CSS のキャッシュ指定が
 *     `max-age=86400, stale-while-revalidate=604800` のため、ブラウザは最大8日間
 *     古い CSS を使い続ける。その間に実ファイルが廃止されると 404 になる
 *     （姉妹プロジェクトで実際に発生）。
 *  2. プライバシー: 訪問者の IP と User-Agent が Google へ渡る。
 *     **この製品は「外へ出さない」を訴求しており、その説明をしているサイトが
 *     訪問者の情報を外へ出すのは筋が通らない。**
 *  3. 同じものを配れば、製品とサイトで見え方が確実に一致する。
 *
 * 【3本立てである】（2026-09-22・ユーザー判断で Inter / Outfit から入れ替えた）
 * Poppins が見出し、Noto Sans が本文、**Noto Sans JP Subset が日本語と記号**、Noto Sans KR Subset がハングル（2026-09-24）。
 * 正典は拡張機能の `style/base.css` で、あちらに長い注記がある。
 *
 * 【日本語は「使う字だけ」を同梱している】
 * まるごとだと 3.5 MB あるが、**この製品の日本語は 900 字ほどしか無い。**
 * 切り詰めて 277 KB になった（`tools/make-jp-subset.mjs` が書き出す）。
 * **文言を足したら作り直すこと。** 番人は
 * `extension/tests/safety/jp-font-covers-text.test.ts`。
 *
 * 【欧文には `unicode-range` を付け、日本語には付けない】
 * 付けてあるおかげで、**英語とスペイン語の訪問者は日本語の書体を1バイトも取りに行かない。**
 * 日本語側に付けないのは、**何を持っているかを範囲で言い表せない**からである
 *（部分集合なので、範囲内でも持っていない字がある）。
 *
 * 【latin-ext は同梱しない】ja / en / es に要る文字は、すべて latin に入っている（実測）。
 *
 * いずれも SIL Open Font License 1.1（fonts/OFL-*.txt）。
 */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans JP Subset';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/noto-sans-jp-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans KR Subset';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/noto-sans-kr-subset.woff2') format('woff2');
  /* 【範囲を付ける】ハングルだけを受け持つ。韓国語を読まない人は取りに行かない（日本語の書体と違い、範囲で言い表せる） */
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF;
}

/**
 * 明るい地。
 *
 * 【既定の裏返しにする】（2026-09-12）
 * かつては明るい地が既定で、暗い地をメディアクエリで足していた。
 * 拡張機能は暗い地が既定なので、**同じ製品で明暗の既定が逆**になっていた。
 */
@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #f1f5f9;
    --bg-secondary: #ffffff;
    --surface-sunken-rgb: 226, 232, 240;
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: rgba(0, 0, 0, 0.12);
    --card-hover-border: rgba(59, 130, 246, 0.4);
    /* 【明暗で向きが逆になる】重ねる色そのものが白から黒へ入れ替わる */
    --divider-strong: rgba(0, 0, 0, 0.22);

    --text-main: #0f172a;
    --text-muted: #475569;
    --text-dim: #64748b;

    /* 【役割は同じ、濃さが逆】地の上に置く文字なので、明るい面では暗い側へ */
    --primary-light: #2563eb;
    /* 【明るい地では濃い側へ振る】印が白地に溶けるのを避ける */
    --gradient-mark: linear-gradient(90deg, var(--indigo) 0%, var(--cyan-deep) 100%);
    --select-scheme: light;
    --warning-light: #b45309;
    --success-light: #047857;
    --danger-light: #b91c1c;
    --sns-fg: #000000;
    --glow: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.14) 0%, rgba(241, 245, 249, 0) 70%);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-main);
  line-height: 1.8;
  font-size: 16px;
  overflow-x: hidden;
}

/*
 * 【韓国語は語の途中で改行しない】（2026-09-24・ユーザー指摘）
 * ブラウザは既定でハングルを日本語と同じく音節ごとにどこでも改行する。韓国語は語を空白で区切って書くので、
 * 語の途中で切れると読みにくい —— LP の見出しの下の文が「있습니 / 다.」と、最後の1字だけ次の行に落ちていた
 * （幅 360〜1440 を測って、同じ切れ方が LP だけで 17 か所）。改行は空白でだけ行う。ラテン文字の改行は変わらない。
 * 根にだけ置いて受け継がせる（全要素に当てると、個別に書いた `word-break` を順番しだいで上書きする）。
 * `overflow-wrap: break-word` は、空白の無い長い並びが枠からはみ出すときだけ切る保険。拡張機能の `base.css` と同じ。
 */
html:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  position: relative;
  z-index: 1;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 68px;
}

/* ------------------------------------------------------------------ *
 * 区画
 * ------------------------------------------------------------------ */

section { padding: var(--space-12) 0; }

h2 { font-family: var(--font-heading); font-size: 24px; margin: 0 0 var(--space-4); }
h3 { font-size: 16px; margin: var(--space-6) 0 var(--space-2); }

/* ------------------------------------------------------------------ *
 * カード（ガイドと法務ページの囲み）
 * トップの特長は 2026-09-23 に `.pillars` へ移した（下の「トップの3節」）
 * ------------------------------------------------------------------ */

.card {
  padding: var(--space-8);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--card-hover-border);
}

.card h3 { margin: 0 0 var(--space-2); font-size: 16px; }
/**
 * 【余白だけ、詳細度を下げて譲る】（2026-09-22・実測で見つけた・ユーザー判断）
 *
 * かつてここは `.card p { margin: 0 }` だった。**要素名を1つ含むので (0,1,1)** で、
 * **`.mt-2` `.mt-3` `.mb-3`（0,1,0）に必ず勝つ。** 後から書いても負ける。
 * ガイドで数えたところ、**70 か所の指定のうち 62 か所が死んでいた** ——
 * カードの中の段落は、書いた者の意図に反して**すべて間隔ゼロで並んでいた。**
 *
 * `:where()` は中身の詳細度を 0 にするので、この行は `.card`（0,1,0）だけになり、
 * **後ろにある余白の札が素直に勝つ。** 札を付けていない素の `<p>` は、
 * ブラウザの既定（要素名だけ = 0,0,1）に勝つので**これまでどおり余白ゼロ**である。
 *
 * 【`!important` を使わない】このファイルで `!important` を持つのは
 * `.is-hidden`（隠すこと）だけである。**余白のために例外を増やさない。**
 *
 * 字の大きさと色は譲らない —— ここは札で上書きしたい対象ではない。
 */
.card :where(p) { margin: 0; }
.card p { font-size: 14px; color: var(--text-muted); }

code {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: rgba(59, 130, 246, 0.12);
  font-size: 0.9em;
}

a { color: var(--primary-light); }

/**
 * 規約・プライバシー・使い方。**読み物なので幅を詰める。**
 * 1行が長いほど、次の行の頭を見失う。
 */
.legal { max-width: 46rem; margin-inline: auto; padding: var(--space-12) var(--space-6); }
.legal h1 { font-family: var(--font-heading); font-size: 30px; line-height: 1.35; }
.legal h2 { font-size: 20px; margin-top: var(--space-12); }
.legal ol, .legal ul { padding-left: 1.4em; }
/**
 * 【自分で余白を組むリストは、上の字下げから降りる】（2026-09-22・実測で見つけた）
 *
 * 上の1行は `.legal` の中の**素のリスト**のためにある。
 * `.list-indent` と `.guide-symptoms` は自前で余白を組んでおり、
 * **どちらも `padding: 0` と書いてあった —— が、効いていなかった。**
 * `.legal ul`（0,1,1）のほうが `.guide-symptoms`（0,1,0）より詳細なので、
 * **後から書いても負ける。** 実測では 17.5px と 22.4px が残っていた。
 *
 * 【印は残す】`.list-indent` の `<ol>` には**順序に意味があるもの**がある
 *（取り方の3段、通知を減らす手順の4段）。`list-style: none` にすると数字が消える。
 * 字下げだけ降りれば、印は左の `margin` の中へぶら下がる。
 */
.legal .list-indent,
.legal .guide-symptoms { padding-left: 0; }
.legal li { margin-bottom: var(--space-2); }
.legal p, .legal li { font-size: 15px; }
.updated { font-size: 13px; color: var(--text-dim); }

/**
 * 【中央に1列で積む】（2026-09-23・ユーザー判断）
 * 標語 → 案内 → 著作権表示の順。かつては左右に割っていたが、
 * 案内が2本に減ると右側が痩せ、**左右の重さが釣り合わなくなった。**
 */
.site-footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

/* 【動きを望まない人には止める】浮き上がりと滑らかな送りを切る */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card:hover, .cta:hover { transform: none; }
}

/* ------------------------------------------------------------------ *
 * 埋め込み（拡張機能の中から読むとき）
 * ------------------------------------------------------------------ */

/**
 * 【埋め込みのときは、同梱の書体を名乗らない】（`C-88`・2026-09-13・ユーザー判断）
 *
 * 拡張機能はこのファイルを `sandbox` の iframe で読む。`allow-same-origin` が
 * 無いので**中の文書は不透明な生成元（`null`）になる。**
 * 書体の取得は既定で CORS を伴うため、**同じ配信元から出た要求でも
 * cross-origin 扱いになり**、`Access-Control-Allow-Origin` が無くて弾かれる。
 *
 * **遠くでも近くでも落ちる。** 同梱の控えは `chrome-extension://` から出るが、
 * あちらの `/fonts/*` は `web_accessible_resources` に載っていないので、
 * Chrome はそもそも CORS のヘッダを付けない。**配信側をいじっても届かない。**
 *
 * 【なぜ「直す」のではなく「名乗らない」のか】
 * 4本の要求は**今日すでに全部落ちていて、ガイドはもうシステム書体で出ている。**
 * だからここを書き換えても**見た目は何も変わらない。** 変わるのは、
 * **必ず失敗する要求を出さなくなること**である。
 *
 * **その失敗が、観測された唯一の実害だった** —— `font-display: swap` の差し替えが
 * 再フローを起こし、ガイドを開いた直後のボタンの座標が動いていた
 *（`extension/tests/e2e/diagnostics-panel.spec.ts`）。
 *
 * 【退けた道】
 *  ・`sandbox` に `allow-same-origin`
 *      … **控えの経路では隔離が消える。** 生成元が親と同じになるので
 *        `parent.document` に届き、**自分の `sandbox` 属性を外して読み直せる。**
 *        遠くの経路だけなら安全だが、**遠くと近くで見え方が食い違う。**
 *  ・書体を base64 で埋める
 *      … 両方の経路で確実に効く唯一の道。ただし **235KB**（latin だけでも 105KB）。
 *        このファイルは**サイトの全ページが読む**ので、訪問者全員が払うことになる。
 *
 * 【サイトで開いたガイドは、同梱の書体のまま】
 * 落とすのは埋め込みのときだけである。印は `<head>` の `embed.js` が立てる。
 * **書体名を一覧で書かない** —— `@font-face` から引いて数える番人がいる
 *（`tests/unit/theme.test.ts` の「埋め込みのガイドは、同梱の書体を名乗らない」）ので、
 * ここに同梱書体の名前を書くと落ちる。
 */
:root[data-embed] {
  /**
   * 【書体の名前を1つも並べない】（2026-09-22・ユーザー判断）
   * `system-ui` が先頭にあれば、**後ろに並べた名前には到達しない。**
   * OS の書体の連なりは「UI 用の書体で描き、無い字は言語ごとの標準書体へ送る」よう
   * 作られており、**我々が名前を並べるより賢い。**
   * 拡張機能の `--font-user` と同じ考え方である（あちらに長い注記がある）。
   *
   * **ついでに、番人にも掛からなくなる** —— 同梱の欧文の族名が `Noto Sans` なので、
   * `"Noto Sans JP"` と書くと名前として重なり、「同梱書体を名乗っている」と読まれる。
   */
  --font-main: system-ui, sans-serif;
  --font-heading: system-ui, sans-serif;
}

/**
 * `?embed=1` のとき、**サイトの枠を伏せて地を透かす**（`C-76`・2026-09-12）。
 *
 * 【なぜ別ファイルにしないのか】
 * 文章が二重になり、**必ず片方が古くなる。** 同じ1つのファイルを、
 * 印ひとつで2通りに見せる。印は `<head>` の素の `<script>` が立てる。
 *
 * 【地を透かす】
 * 拡張機能側の明暗に合わせるのは**親**である。ここで地を塗ると、
 * 親が暗いのに白い矩形が浮く。
 */
:root[data-embed] body {
  background: transparent;
}

/**
 * 【親が明暗を決めるとき、地の色札もそちらに従う】
 * 拡張機能は `data-theme` を根へ書く。サイトの既定（暗い地）と
 * メディアクエリの両方を、この印が上書きする。
 */
:root[data-theme="light"] {
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: rgba(0, 0, 0, 0.12);
  --surface-sunken-rgb: 226, 232, 240;
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;
  --primary-light: #2563eb;
  --card-hover-border: rgba(59, 130, 246, 0.4);
  --divider-strong: rgba(0, 0, 0, 0.22);
  /* 【明示の light と同じ値を持つこと】上のメディアクエリと揃える */
  --gradient-mark: linear-gradient(90deg, var(--indigo) 0%, var(--cyan-deep) 100%);
  --select-scheme: light;
  --warning-light: #b45309;
  --success-light: #047857;
  --danger-light: #b91c1c;
  --sns-fg: #000000;
  --glow: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.14) 0%, rgba(241, 245, 249, 0) 70%);
}

/**
 * 【暗い地を明示する】（2026-09-23・フッターのテーマの select と同時に足した）
 * 既定は暗い地なので、要るのは**OS が明るい設定のときに、暗い地へ戻す**場合だけである。
 * **それまでは無かった** —— 拡張機能はガイドへ `?theme=dark` を渡し、`toc.js` が
 * `data-theme="dark"` を立てていたのに、受ける区画が無く、OS が明るい設定だと
 * ガイドは明るい地で出ていた。
 *
 * 【値は `:root` の既定の写し】上の2つの明るい地の区画が上書きする札を、すべて戻す。
 * 3つの区画の顔ぶれと値は `extension/tests/safety/website-theme.test.ts` が見張る。
 */
:root[data-theme="dark"] {
  --bg-primary: #0b0f19;
  --bg-secondary: #111827;
  --surface-sunken-rgb: 15, 23, 42;
  --card-bg: rgba(30, 41, 59, 0.65);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-hover-border: rgba(59, 130, 246, 0.4);
  --divider-strong: rgba(255, 255, 255, 0.22);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --primary-light: #93c5fd;
  --gradient-mark: linear-gradient(90deg, var(--indigo-light) 0%, var(--cyan-light) 100%);
  --select-scheme: dark;
  --warning-light: #fcd34d;
  --success-light: #6ee7b7;
  --danger-light: #fca5a5;
  --sns-fg: #ffffff;
  --glow: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.25) 0%, rgba(11, 15, 25, 0) 70%);
}

/** 枠が無いぶん、上下の余白は中身が持つ */
:root[data-embed] .legal {
  padding-top: 0;
  padding-bottom: 0;
  /* 【幅は親が決める】読み物としての幅の詰めは、サイトで開いたときだけ */
  max-width: none;
  /**
   * 【左右も親に合わせる】（2026-09-13・実測）
   * `.wrap` の左右 24px が残っていたので、中のブロックは 908px、
   * その下に拡張機能が出すカードは 956px で、**一番下だけ左右にはみ出して見えた。**
   */
  padding-left: 0;
  padding-right: 0;
}

/**
 * 【埋め込みでは、中の文書を 1px も巻けなくする】（2026-09-16・実測）
 * 親は `body` の実寸を iframe の高さにする。ところが札の `margin-bottom: 24px` は
 * `body` の外へ抜けて `html` の巻き幅に入るので、**中の文書が 24px だけ巻けた。**
 * ホイールを枠の上で回すと、まず中が 24px 巻いてブロックが上へずれ（隙間が不揃いに見える）、
 * Chrome はそのジェスチャを中に固定するので親が巻かず、引っかかった（ホイール 1500 で親 0・中 24）。
 * 逆へ巻くと中が 0 へ戻り、隙間も戻る。
 *
 * 札の外余白をやめ、**親が `gap` で隙間を持つ。** `display: none` の札（題・履歴・ご意見）は
 * `gap` に数えられないので、末尾に余白が残らない。`html` の巻き幅 ＝ `body` の実寸になる。
 * `overflow: hidden` は、開いた直後（親が高さを当てるまでの 1 フレーム）にホイールが
 * 中へ食われないための保険。目次からの `scrollIntoView` は親の面を巻くので影響しない。
 */
:root[data-embed] {
  overflow: hidden;
}

:root[data-embed] .guide-body {
  display: flex;
  flex-direction: column;
  /**
   * 【隙間は親と同じ 16px】（2026-09-16・ユーザー指摘）
   * 枠の下に親が出す「ご意見」のカードは `.tab-page` の `gap`（16px）で並ぶ。
   * 中だけ 24px だと、**最後の 1 つの隙間だけ狭く見える。**
   */
  gap: var(--space-4);
}

:root[data-embed] .guide-body > .card {
  margin-bottom: 0;
}

/**
 * 【埋め込みでは、文字の大きさを製品に合わせる】（2026-09-17・ユーザー指摘・実測）
 * サイトの基底は本文 16px・行間 1.8、`.legal p, li` は 15px。製品は本文 0.8rem（12.8px）・
 * 行間 1.5、カードの本文 0.82rem。FAQ の `<details>` では**見出し 16px・中身 15px**に対し、
 * 製品は**見出し 12.8px・中身 13.1px**で、同じ画面の中で段差になっていた。
 * `summary` は body を継ぐので、body を合わせれば揃う。
 */
:root[data-embed] body {
  font-size: 0.8rem;
  line-height: 1.5;
}

:root[data-embed] .legal p,
:root[data-embed] .legal li {
  /* 製品の `.card > p.help-text`（controls.css）と同じ */
  font-size: 0.82rem;
  line-height: 1.7;
}

:root[data-embed] .card h3 {
  /* 製品の `.card h3`（controls.css）と同じ */
  font-size: 1.1rem;
  font-weight: 600;
}

/**
 * 【埋め込みでは、浮き上がらない】（2026-09-13・実測）
 * `.card:hover` の `translateY(-4px)` は LP の「できること」のためのもので、
 * 読み物のブロックが指を置くたびに動くのは**気が散る。**
 * `C-76` の前は本文がダッシュボードの中にあり、あちらの `.card:hover` は枠の色しか変えない。
 */
:root[data-embed] .card:hover {
  transform: none;
  /* 【枠の色も変えない】（2026-09-16・ユーザー指摘）読み物のブロックに、指を置いた印は要らない */
  border-color: var(--card-border);
}

/**
 * 【題は親が出している】（`C-76`・2026-09-12・実機で見つけた）
 * 拡張機能の面は「ガイド & FAQ」という題を既に持っている。
 * **中の「使い方」と合わせて、題が2つ縦に並んでいた。**
 */
:root[data-embed] .guide-body > h1,
:root[data-embed] .guide-body > h1 + .updated {
  display: none;
}

/* ------------------------------------------------------------------ *
 * ガイド本文
 * ------------------------------------------------------------------ */

/**
 * **正典がここへ移った**（`C-76`・2026-09-12）。
 *
 * ガイドの文章は長らく拡張機能の `index.html` にあり、
 * **1文字直すのにストア審査（数日）が要った。** サイトは即デプロイできる。
 * お知らせ（`announcement/`）と同じ非対称性を、読み物にも当てる。
 *
 * 【見た目は拡張機能から写した】
 * 節は `extension/entrypoints/dashboard/style/guide.css` から起こしている。
 * **同じ文章が2つの地の上に出る**ので、色は両方のトークンで解決する形にしてある。
 *
 * 【`?embed=1` のときは、親が明暗を決める】
 * 拡張機能の中から読むときは地を透かす（上の「埋め込み」の節）。
 */

.card {
  padding: var(--space-6);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  margin-bottom: var(--space-6);
}

.card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin: 0 0 var(--space-4);
}

.summary-title {
  font-weight: 600;
  color: var(--text-main);
}

/**
 * 開け閉めの印。**直接の子に限ること。**
 * 子孫に当てると、外側が開いているだけで中の閉じた `<details>` まで ▼ になる
 * （拡張機能側で 2026-09-12 に踏んだ）。
 */
.guide-body details > summary { cursor: pointer; list-style: none; }
.guide-body details > summary::-webkit-details-marker { display: none; }

.guide-body details > summary::after {
  content: "▶";
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-left: var(--space-2);
}

.guide-body details[open] > summary::after { content: "▼"; }

.help-text { font-size: 0.8rem; color: var(--text-muted); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mb-3 { margin-bottom: var(--space-3); }
.is-hidden { display: none !important; }

/**
 * 畳んだ補足の枠。拡張機能の `.setting-note` と同じ見た目にしてある
 * （`settings.css`）。**同じ文章が、同じ形で出ること。**
 */
.setting-note {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-muted);
  background: rgba(var(--surface-sunken-rgb), 0.6);
  border: 1px dashed var(--card-border);
  border-radius: var(--radius-sm);
}

.setting-note > summary {
  padding: var(--space-2) var(--space-3);
  color: var(--primary-light);
  font-weight: 600;
}

.setting-note > div { padding: 0 var(--space-3) var(--space-3); }

.faq-item {
  border-bottom: 1px solid var(--card-border);
  padding: var(--space-4) 0;
}

.faq-item:first-of-type {
  padding-top: 0;
}

.faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.faq-item details > div,
.faq-item > div {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: var(--space-3);
  line-height: 1.7;
}

/**
 * ガイドの「カードに出る言葉の意味」の表。
 * 【横スクロールはこの中に閉じ込める】
 * 表が広いときにページ全体が横に伸びると、他のカードまで読みづらくなる。
 */
.table-scroll {
  overflow-x: auto;
}

.guide-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.guide-table th,
.guide-table td {
  border-bottom: 1px solid var(--card-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}

.guide-table th {
  color: var(--text-main);
  font-weight: 600;
  white-space: nowrap;
}

.guide-table td:first-child {
  color: var(--text-main);
  white-space: nowrap;
}

.guide-table tr:last-child td {
  border-bottom: none;
}

.text-warning-inline {
  color: var(--warning-light);
}

.list-indent {
  margin: var(--space-2) 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/**
 * バージョン履歴の1件（`C-83`・2026-09-12）。
 *
 * 【描くのはガイドの `toc.js`】（2026-09-24）値は親（拡張機能）が取って渡す。
 * かつてはダッシュボードの `guide.css` にあったが、`C-76` で枠が iframe の中へ移り、**一度も当たっていなかった。**
 * **版と日付を横に並べ、中身をその下へ下げる。**
 * 版が見出しの役をするので、`<h4>` は使わない ——
 * ガイドの見出しの階層（`h3` = カード）を1つ増やしたくない。
 */
.changelog-entry + .changelog-entry {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--card-border);
}

.changelog-entry__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.changelog-entry__version { font-size: 0.95rem; }
.changelog-entry__date { font-size: 0.75rem; color: var(--text-dim); }

/** 文の中の改行は、そのまま改行として出す（2026-09-24。JSON に HTML は書かせない） */
.changelog-text { white-space: pre-line; }

/** ガイドの項目へ送る「詳しく」。行の末尾に小さく置く */
.changelog-more { font-size: 0.8rem; }

/**
 * 症状から引く索引。**目次の主役**（2026-09-12）。
 *
 * 【表をやめて、押せる面を広げた】
 * かつては「症状 ／ 行き先」の2列表で、**押せるのは右の列だけ**だった。
 * 症状そのものを押せないので、読んだあとに目を右の列へ移す必要があった。
 * 症状を1つのリンクにすれば、読んだところがそのまま押せる。
 *
 * 【段の値で組む】列の最小幅だけは中身なりの実寸を持つ（18 件が2〜3列に割れる）。
 */
.guide-symptoms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-1) var(--space-4);
  list-style: none;
  padding: 0;
  /**
   * 【上の隙間は、行の余白ではなく自分で持つ】（2026-09-22・ユーザー指摘）
   * かつて説明文との隙間は、**行（`> li > a`）の上パディング**が作っていた。
   * その余白を外したので、**何もしなければ説明文にくっつく。**
   * 隣り合わせの関係は、行の飾りではなくこちらが持つ。
   *
   * 【上の `.help-text.mb-3` は数えない】（2026-09-22・実測）
   * 説明文は `.mb-3` を付けているが、**その余白は出ていない** ——
   * `.card p { margin: 0 }`（0,1,1）が `.mb-3`（0,1,0）に勝つためで、
   * 実測でも `margin-bottom` は 0 だった。**当てにすると、また外す。**
   * ここの隙間は、上下ともこの札1つだけで作る（下は `+ .setting-note`）。
   */
  margin: var(--space-4) 0 0;
}

.guide-symptoms > li > a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  /**
   * 【囲まずに、下線で応える】（2026-09-22・ユーザー判断）
   * かつてここは `padding` と透明の枠を持ち、指すと**地と枠の付いた箱**になった。
   * 押せる面は広かったが、**23 行ぶんの箱が畳んだ目次の中で重かった。**
   * 余白と枠を外したので、当たる面は文字の行だけに戻る。
   */
  font-size: 0.85rem;
  line-height: 1.5;
  text-decoration: none;
}

/**
 * 【行の頭に印を置く】（2026-09-12・ユーザー指摘）
 * 印が無いと、2〜3列に割れた 18 行が**ただの文字の塊**に見える。
 * 押せることと、1行がどこで切れているかを、同時に言う。
 */
.guide-symptoms > li > a::before {
  content: '›';
  flex-shrink: 0;
  color: var(--text-dim);
  font-weight: 700;
}

.guide-symptoms > li > a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guide-symptoms > li > a:hover::before {
  color: var(--primary-light);
}

/**
 * 【索引と索引のあいだを空ける】（2026-09-12）
 * かつてここは HTML 側で `.mt-4` と書いていたが、
 * **そのクラスは存在しない**（あるのは `.mt-2` `.mt-3` だけ）。
 * 効いていない指定だったので、隣り合わせの関係として持ち直す。
 */
/**
 * 本題ではないが読ませたい補足の枠。（2026-09-22・ユーザー指摘で足した）
 *
 * 【サイト側にだけ、定義が無かった】
 * ガイドの「『監視の準備中』のあいだ、何をしているか」はこの枠に入っているが、
 * **`.note-panel` はこのファイルに1行も無かった。** 枠も地も余白も付かず、
 * 前後の本文と地続きの文字列として出ていて、**どこからどこまでが補足なのか読めなかった。**
 *
 * 正典は拡張機能の `rule-builder.css`。**同じ見た目を持たせること** ——
 * ガイドは iframe で製品の中にも出るので、ここだけ別の箱になると面が割れる。
 */
.note-panel {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(var(--surface-sunken-rgb), 0.6);
  border: 1px dashed var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.82rem;
}

.guide-symptoms + .setting-note {
  /**
   * 【上下を同じ量にする】（2026-09-12 に揃え、2026-09-22 に持ち直した）
   *
   * かつて症状の行は自分で上下に `--space-2` を持っており、
   * ここは「行の下パディング 8 と足して 20」になるよう `--space-3` だった。
   * **その 8 を外したので、この値のままでは下だけ 12 になる。**
   * 上側（`.guide-symptoms` の `margin-top`）と同じ札を置いて、**同じ数で挟む。**
   */
  margin-top: var(--space-4);
}

/**
 * 機能別の索引。**症状で引けなかった人のための副次**（2026-09-12 に畳んだ）。
 * 【2列にする】縦一列だと目次そのものが長くなり、目次の意味が薄れる。
 */
.guide-toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
}

/**
 * 【`margin` の短縮形を使わない】（2026-09-04）
 * `margin: 0 0 …` と書くと `margin-top: 0` まで宣言することになり、
 * **`.mt-3` / `.mt-4` の `margin-top` を打ち消す。**
 * 同じ詳細度なので、後から読まれるこちらが勝つ。
 * 実際これで、目次の小見出しが前の段に貼り付いていた。
 */
/**
 * 【目次のリンクは、指したときだけ下線を出す】（2026-09-22・ユーザー判断）
 * 29 行がすべて常時下線だと、**畳んだ目次が線の束に見える。**
 * 押せることは行頭の黒丸と色が言っているので、下線は反応の合図に回す。
 * `.guide-symptoms`（症状から引く索引）と同じ振る舞いに揃えてある。
 */
.guide-toc a { text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; text-underline-offset: 2px; }

.guide-toc__label {
  margin-bottom: var(--space-2);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

/**
 * 折りたたみの見出しに添える一文。**畳んだ状態で読める位置に置くこと。**
 *
 * 【`<summary>` の中に入れる理由】
 * `<details>` の中（`<summary>` の外）へ置くと、**開くまで見えない。**
 * アコーディオンの代償（拾い読みする人から隠す）を打ち消すための一文なので、
 * それでは意味が無い。一度そう書いて気づいた。
 */
/**
 * 【見出しと要約を縦に積む】（2026-09-04）
 * 共通の `details summary` は `display: flex; justify-content: space-between`
 * で、**全幅のカードを前提にしている。** そのままだと要約が
 * 見出しの右端へ飛び、開閉の印との間で引き裂かれる（実測して気づいた）。
 * ここは「見出しの下に一文」が目的なので、縦へ積み直す。
 */
.faq-item summary.summary-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--space-3);
}

/**
 * 開閉の印は、見出しと同じ行の右端へ。
 * 【明示しないと3行目へ落ちる】格子の自動配置では、
 * 見出し・要約に続く3つ目の項目として置かれてしまう。
 */
.faq-item summary.summary-title::after {
  grid-column: 2;
  grid-row: 1;
  margin-left: 0;
}

.faq-item__lead {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--space-1);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
}