/**
 * 公式サイトの枠と、ガイド以外のページが使う部品（2026-09-23・`C-106` で `style.css` から分けた）。
 *
 * 【ガイドは読まない】ガイドは製品の中からだけ見るので、枠（ヘッダー・フッター）を持たない。
 * `style.css` はガイドの同梱の控えとして拡張機能へ丸ごと写されるので、**ガイドが使わないものをここへ出した。**
 * 読むのは枠を持つ全ページ（LP・法務・更新履歴）。LP でしか使わないものは `lp.css`。
 *
 * 【明暗で値の変わる札をここに置かない】明暗の3区画は `style.css` にある（design-tokens.md 10-2）。
 * ここは札を使うだけにする。
 */

/**
 * 上からの光。**ヒーローの後ろにだけ置く。**
 * `position: absolute` なので、下の区画の高さには影響しない。
 */
.bg-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 560px;
  background: var(--glow);
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------------------ *
 * ヘッダー
 * ------------------------------------------------------------------ */

/**
 * 貼り付いて、後ろをぼかす。
 * 【地の色を直に敷かない】透けないと、下の区画が上へ潜っていく様子が消える。
 */
/**
 * 【アンカーで飛んだ先を、ヘッダーの下に出す】（2026-09-24・ユーザー指摘）
 * 貼り付くヘッダーがあるので、ページ内リンクの行き先が上端ぴったりに来ると**見出しが潜る。**
 * `site.css` を読むのはヘッダーを持つページだけ（ガイドは読まない）なので、ここに置く。
 */
html { scroll-padding-top: calc(var(--site-header-height) + var(--space-4)); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
  border-bottom: 1px solid var(--card-border);
}

.site-header a { text-decoration: none; }
/**
 * 【色を継がせるのは、ボタン以外】（2026-09-23・ユーザー指摘「文字が暗い」）
 * `.site-header a`（0,1,1）は `.cta`（0,1,0）より詳細なので、ボタンにも効いていた。
 * **明るい地では、青い塗りの上に `#0f172a` の文字が乗っていた。**
 * 下の `.nav a` も同じ理由で `.cta` を外している。
 */
.site-header a:not(.cta) { color: inherit; }

/**
 * 屋号。**2026-09-23 に全部大文字にした**（ユーザー判断）。
 *
 * 【描くときだけ大文字にする】
 * `text-transform` で当てており、**名前そのものは `WebPageGazer` のままである。**
 * 書式の効かない場所（検索結果・法務文書・README）では大文字が語の切れ目を作っており、
 * `WEBPAGEGAZER` には切れ目が1つも無い。読み上げも DOM の文字を読むので変わらない。
 * 拡張機能側（`style/layout.css` の `.logo-name`）と同じ考え方。
 *
 * 【字間を開いた】もとは -0.01em だった。大文字は字面が詰まって見えるので、
 * 名乗りとして置く面では開く（サイドバーと同じ 0.02em）。
 */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/**
 * ロゴの印。**2026-09-23 に足した**（ユーザー判断。製品のサイドバーと揃える）。
 *
 * 【形は SVG、色はトークン】
 * `assets/logo-mark.svg` を `mask` で切り抜き、傾きの札で塗る。
 * **SVG に色を書かない** —— 書くとライトとダークの切り替えに追従しない。
 *
 * 【この形は拡張機能と同じファイルである】
 * `extension/public/brand/logo-mark.svg` の写しで、**手で写している。**
 * 2つが同じであることは `extension/tests/safety/svg-assets.test.ts` が見張る。
 *
 * 【傾きは真横である。揃えないこと】
 * 地や文字に敷く傾きは斜めだが、印は形そのものに色を載せるので向きが読み取りに効く
 *（`.agents/rules/design-tokens.md` 5-2）。
 *
 * 【`-webkit-mask` も並べる】接頭辞なしが効かない版でも印が消えないように。
 */
.brand__mark {
  flex: none;
  width: 26px;
  height: 26px;
  background: var(--gradient-mark);
  -webkit-mask: url("/assets/logo-mark.svg") center / contain no-repeat;
  mask: url("/assets/logo-mark.svg") center / contain no-repeat;
}

/**
 * 言語の切り替え。**`select` ひとつで済ませる**（2026-09-23・ユーザー判断）。
 * かつては `English` `Español` を並べたリンクで、**ページが増えるほど横に伸びていた。**
 *
 * 【JavaScript が切れていても袋小路にしない】
 * 切り替えそのものは `/lang-switch.js` が行う。動かない環境のために、
 * `noscript` で素のリンクを出す（`.lang-fallback`）。
 */
/* フッターのテーマ・統計の select も同じ形（2026-09-23） */
.lang-select,
.theme-select,
.consent-select {
  font: inherit;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  /**
   * 【候補の一覧はブラウザが描く】
   * ここを宣言しないと、暗い地のサイトでも**開いた候補だけが白い紙**で出る。
   * `:root` に置くとスクロールバーまで変わるので、この部品にだけ持たせる
   *（拡張機能が `--color-scheme` で同じ形を採っている）。
   */
  color-scheme: var(--select-scheme, dark);
}

.lang-select:hover,
.theme-select:hover,
.consent-select:hover {
  color: var(--text-main);
  border-color: var(--card-hover-border);
}

.lang-fallback {
  display: flex;
  gap: var(--space-2);
  font-size: 13px;
}

.nav { display: flex; align-items: center; gap: var(--space-6); font-size: 14px; }
/**
 * 【入手のボタンを除く】（2026-09-23）上の `.site-header a` と同じ理由。
 */
.nav a:not(.cta) { color: var(--text-muted); transition: color 0.2s ease; }
.nav a:not(.cta):hover { color: var(--text-main); }

.brand { white-space: nowrap; }

/**
 * 【狭い画面では、入手だけ残す】（2026-09-12・実機で崩れていた）
 * 5つの並びが折り返し、**屋号まで2行に割れて**帯が3段になっていた。
 * 区画への導線は本文を下へ送れば辿り着ける。**辿り着けないのは入手だけ**なので、
 * それだけ残す。
 */
@media (max-width: 720px) {
  .nav a:not(.cta) { display: none; }
  .nav { gap: var(--space-3); }
  .brand { font-size: 15px; }
}

/* 【ボタンの文言を2行に割らない】幅が足りないときに「入手／する」と折れていた */
.cta { white-space: nowrap; }

/**
 * 【もっと狭い画面では、屋号を印だけにする】（2026-09-23・実測）
 * 言語の select を足してから、幅 390px で**並びが収まらなくなった。**
 * 使える幅 342px に対し、屋号 161 ＋ 言語 86 ＋ 入手 115（スペイン語）＋ 間 28 ＝ 390px。
 * 屋号の字を縮めても 48px は稼げない。
 *
 * 【名前は読み上げに残す】`display: none` にすると、リンクの名前が無くなる
 *（印は `aria-hidden`）。見えなくするだけで、読み上げには残す。
 */
@media (max-width: 480px) {
  .brand > span:not(.brand__mark) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ *
 * ボタン
 * ------------------------------------------------------------------ */

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-sm);
  /**
   * 【枠は透明で持つ】
   * `border: none` にすると、二次のボタンと高さが 2px ずれる。
   */
  border: 1px solid transparent;
  background: var(--gradient-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35);
}

.cta--ghost {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: var(--text-main);
}

.cta--ghost:hover {
  border-color: var(--card-hover-border);
  box-shadow: none;
}

.cta--sm { padding: var(--space-2) var(--space-4); font-size: 14px; }

/* ------------------------------------------------------------------ *
 * そのほか
 * ------------------------------------------------------------------ */

/** 読ませたい但し書き。**左の帯で、地の文と区別する** */
.callout {
  padding: var(--space-6);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  font-size: 14px;
}

.callout p { margin: 0 0 var(--space-4); }
.callout p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * フッター
 * ------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--card-border);
  background: var(--bg-secondary);
  padding: var(--space-12) 0;
  font-size: 14px;
  color: var(--text-muted);
}

.site-footer p { margin: 0; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text-main); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); }

/**
 * 【「All rights reserved」は書かない】（2026-09-23・ユーザー判断）
 * あの一文が意味を持ったのはブエノスアイレス条約の下だけで、
 * その加盟国もすべてベルヌ条約に入った今は、**書いても書かなくても権利は変わらない。**
 * 著作権は創作と同時に生じる（無方式主義）。`©` と年と名も同じく必須ではないが、
 * **誰の物かを1行で示す慣行**として残す。
 *
 * 【名乗るのは製品名】運営者の氏名は出さない（`.agents/rules/operator-privacy.md` 第1項）。
 */
.footer-copy { font-size: 12px; color: var(--text-dim); }

/**
 * 共有の口。**2026-09-23 にトップの節からここへ移した**（ユーザー判断）。
 * 顔ぶれは X・Bluesky・Threads。**LINE は不採用**（専用のアイコンか指定の文言しか
 * 使えず、並びを揃えられない）。アイコンだけで文字は置かない（ユーザー判断）。
 */
.footer-share { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6); }

/**
 * 【形は各社の公式の SVG、色は札】`assets/sns/*.svg` は**配布物のまま、1 バイトも変えていない。**
 * 形だけを型抜き（`mask`）に使い、`--sns-fg`（白か黒）で塗る。
 * 【間を 24px 取る】Bluesky は、アイコンの周りに**アイコンと同じ幅**の余白を求めている（20px ＜ 24px）。
 */
.sns-link { display: inline-flex; padding: 2px; border-radius: var(--radius-xs); }
.sns-icon {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--sns-fg);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.sns-icon--x { -webkit-mask-image: url("/assets/sns/x.svg"); mask-image: url("/assets/sns/x.svg"); }
.sns-icon--bluesky { -webkit-mask-image: url("/assets/sns/bluesky.svg"); mask-image: url("/assets/sns/bluesky.svg"); }
.sns-icon--threads { -webkit-mask-image: url("/assets/sns/threads.svg"); mask-image: url("/assets/sns/threads.svg"); }

/**
 * 画面の明るさと、訪問の統計の選び直し。
 * 【台本が動くときだけ見せる】`hidden` を外すのは `theme.js` と、トップだけが読む統計の台本。
 * 【ここに統計の台本の名前を書かない】この CSS はガイドの控えにも入り、番人が「計測の入口に触れている」と読む。
 * 統計の台本はトップにしか無いので、**法務ページとガイドでは統計の select は出ない。**
 */
.footer-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); }
.footer-control { display: flex; align-items: center; gap: var(--space-2); color: var(--text-dim); font-size: 13px; }
.footer-control[hidden] { display: none; }