/**
 * LP（`website/{ja,en,es}/index.html`）でしか使わない部品（2026-09-23・`C-106` で `style.css` から分けた）。
 *
 * 見本の画面・手順・入手カード・事実の3枚・同意の帯など。**ガイドは読まない**（同梱の控えを軽くするため）。
 * 【明暗で値の変わる札をここに置かない】明暗の3区画は `style.css` にある（design-tokens.md 10-2）。
 */

/* ------------------------------------------------------------------ *
 * ヒーロー
 * ------------------------------------------------------------------ */

.hero {
  position: relative;
  text-align: center;
  /**
   * 【`calc` の中に空白を置かない】
   * `check-styles.mjs` は値を空白で割ってから見る。`* 1.6` と離して書くと
   * **`*` と `1.6)` が別々の値として拾われ、直書き4件として落ちる。**
   * 掛け算と割り算は空白を要求しないので、詰めて書く。
   */
  --hero-top: calc(var(--space-12)*1.6);
  padding: var(--hero-top) 0 calc(var(--space-12)*1.2);
}

/**
 * 名乗り（印を上、名前を下）。**2026-09-23 に札と入れ替えた**（ユーザー判断・案 B）。
 * かつてここには「👀 更新を、見に行かずに知る」の札があった。
 * その文はフッターの標語として残っている。
 *
 * 【下の余白は、上の余白と同じ札を読む】（ユーザー指定「ロゴの上と同じくらい」）
 * 名乗りは見出しと別の塊なので、**区画の端と同じだけ離して、独立して見せる。**
 * 片方だけ直すと釣り合いが崩れるので、数値を2か所に書かない。
 *
 * 【GAZER だけを傾きで塗る】OGP 画像・拡張機能のサイドバーと同じ塗り分け。
 *
 * 【`<p>` で書かないこと】`.hero p`（0,1,1）がこちら（0,1,0）に勝ち、
 * **余白も字の大きさも上書きされる**（実測で下の余白が 32px になっていた）。
 */
.hero-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--hero-top);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-main);
}

.hero-lockup__mark {
  width: 96px;
  height: 96px;
  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;
}

/**
 * 「β版」の札（2026-09-24・ユーザー判断で 0.9.0 をβとして出す）。
 * 入手欄の「○ いまは未対応」と同じ、枠線だけの丸い札。**名乗りの大文字と大きさを継がない。**
 * 正式に出すとき（1.0.0）に、札ごと外す。
 *
 * 【狭い画面の余裕が 8px しかない】（2026-09-24・実測）札を足したあと、幅 390px・高さ 844px で
 * 入手のボタンの下端は ja 696px／en 767px／**es 836px**。ヒーローに何か足すなら、es で測り直すこと。
 * （2026-09-24 に de / fr / ko を足した日に測り直した：de 767px／**fr 836px**／ko 666px。
 *   fr も es と同じく余裕 8px。測るのはヒーローの**一番下の**ボタン —— 狭い画面では2つ目が下の段へ回る）
 */
.hero-lockup__beta,
.install-card__beta {
  padding: 2px var(--space-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: none;
}

.hero-lockup__gazer {
  background: var(--gradient-mark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/**
 * 【語の途中で割らない】（2026-09-23）
 * 狭い画面で見出しが「監視／する。」と割れ、**「する。」だけが1行に取り残されていた。**
 */
.nobr { white-space: nowrap; }

/**
 * 【狭い画面では、上下を揃えたまま詰める】（2026-09-23・実測）
 * 77px のままだと、幅 390px のスペイン語で**入手のボタンが最初の画面の下へ落ちた**
 *（下端 854px ／ 画面 844px）。札を1つ書き換えるだけなので、上下の釣り合いは崩れない。
 */
@media (max-width: 720px) {
  .hero { --hero-top: var(--space-12); }
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5.4vw, 56px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}

/**
 * 見出しの一部をブランドの傾きで塗る。
 * 【全部は塗らない】全文を塗ると、読ませたい語が沈む。**1節だけ**にする。
 */
.hero h1 .accent {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  max-width: 42rem;
  margin: 0 auto var(--space-8);
  color: var(--text-muted);
  font-size: 17px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* 1つおきに面の色を変えて、区画の切れ目を出す。線より静かに効く */
.section--alt {
  background: var(--bg-secondary);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.section-head { text-align: center; margin-bottom: var(--space-12); }

.section-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

.section-head p { margin: 0; color: var(--text-muted); font-size: 15px; }

/* ------------------------------------------------------------------ *
 * 入手する（対応ブラウザ）
 * 2026-09-23 に3枚のカードへ組み直した（ユーザー判断・案 I1）
 * ------------------------------------------------------------------ */

/**
 * 【未対応も同じ形で並べる】「どこで使えないか」も一目で分かるように。
 * 【高さを揃える】（ユーザー指定）格子の既定（`stretch`）に任せる。
 * 【幅も揃える】（ユーザー判断）かつては Chromium 系だけ 1.3 倍にしていた。
 * 均等にすると名前が「Chrome・Edge・Brave な／ど」と割れたので、
 * **名前を「Chrome・Edge など」に縮めて揃えた。** 残りのブラウザは下の一覧が言う。
 * 【ロゴを使わない】各ブラウザのロゴは各社の商標なので、名前だけで言う。
 */
.install-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.install-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
}
.install-card--main {
  border: 2px solid transparent;
  background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, var(--gradient-brand) border-box;
}

.install-card__family { color: var(--text-dim); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.install-card__name { margin: 0; font: 700 22px/1.3 var(--font-heading); }
.install-card p { margin: 0; color: var(--text-muted); font-size: 14px; }

.install-card__state {
  align-self: flex-start;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  /* β版の札（.hero-lockup__beta）と同じ行の高さ。本文の高さを引き継ぐと、並べたとき 3.6px 高かった（2026-10-07 に測った） */
  line-height: 1.5;
}
.install-card__state--ok { border: 1px solid transparent; background: rgba(var(--success-rgb), 0.14); color: var(--success-light); }
/*
 * 【対応の札の右に、β版の札】（2026-10-07・ユーザー判断）見た目はヒーローの β版の札と同じ規則（上の .hero-lockup__beta）。
 * β版の札は1px の縁を持つので、対応の札にも透明な縁を足して高さをそろえた。
 */
.install-card__states { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.install-card__state--no { border: 1px solid var(--card-border); color: var(--text-dim); }

/**
 * 入手の口。ストアのページへのリンク（2026-10-05 に公開した）。
 * 公開までは押せない形の札（`is-pending`）だったが、使わなくなったので規則ごと外した。
 * 【1行と、外へ出る印】（2026-10-07・ユーザー判断・モック「LPの入手の節」）
 * かつては2行目に「ストアのページを開く」を小さく添えていた。いまはストアの名前だけにし、右に外へ出る印を置く。
 * 印は文字の色で塗る線の絵で、各言語のページに直接書いている（外から読み込まない）。
 */
.install-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.install-card__ext { width: 16px; height: 16px; flex: none; }

.install-card__list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.install-card__list li { padding: var(--space-1) var(--space-3); border: 1px solid var(--card-border); border-radius: var(--radius-pill); font-size: 13px; }

/**
 * 「お使いのブラウザ」の札。`browser-badge.js` が訪問者のブラウザを見て `hidden` を外す。
 * **JavaScript が無ければ出ないだけ**で、ほかは何も変わらない。
 */
.install-card__you {
  position: absolute;
  top: -12px;
  left: var(--space-6);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.install-card__you[hidden] { display: none; }

/**
 * 【札が付いたカードに、札と同じ色の縁を付ける】（ユーザー判断）
 * 傾きの枠は「ここから入れられる」、青い縁は「あなたのブラウザ」。**意味が別なので、
 * 枠は札に付いて動かさない。** Firefox で来た人にも、入れられるのは左だと伝わる。
 * 縁が無いと、札が飾りのないカードの上に浮いて見えた。
 */
.install-card.is-yours:not(.install-card--main) { border-color: var(--primary); }

.install-foot { margin: var(--space-8) auto 0; text-align: center; color: var(--text-dim); font-size: 13px; }

@media (max-width: 760px) {
  .install-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ------------------------------------------------------------------ *
 * よくある質問
 * ------------------------------------------------------------------ */

/**
 * 畳める質問。
 *
 * 【畳む代償を、見出しで払う】
 * アコーディオンは拾い読みする人から中身を隠す。**問いだけは全部見えている**
 * ので、目次の代わりになる。答えは開いた人だけが読めばよい。
 */
.faq { max-width: 46rem; margin: 0 auto; display: grid; gap: var(--space-3); }

.faq details {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  transition: border-color 0.2s ease;
}

.faq details[open] { border-color: var(--card-hover-border); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
}

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

.faq summary::after {
  content: "▶";
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 11px;
  transition: transform 0.2s ease;
}

.faq details[open] > summary::after { content: "▼"; }

.faq details > div {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--text-muted);
  font-size: 14px;
}

/* ------------------------------------------------------------------ *
 * トップの3節（特長・手順・端末から出ない）
 * 2026-09-23 に組み直した（ユーザー判断: 特長 F1／手順 S1／端末 P1＋P2）
 * ------------------------------------------------------------------ */

/**
 * 画面の模型。**スクリーンショットではなく HTML で描く。**
 *
 * 【言語ごとに中身が変わる】文字なので、各言語のページが自分の言葉と通貨で書く
 *（¥12,800 / $128.00 / 128,00 €）。画像にすると言語の数だけ作り直すことになる。
 *
 * 【絵文字を置かない】見本で 🔕 が撮影用のブラウザで別の絵に化けた。
 * 描かれ方が環境で変わるので、札（`.mock-note__tag`）で言う。
 */
.mock {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: rgba(var(--surface-sunken-rgb), 0.7);
  padding: var(--space-3);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.mock-bar { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); }
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--divider-strong); }
.mock-bar span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--text-dim);
  font-size: 11px;
}

/* 選んでいない所は、中身を持たない線で描く。**読ませたいのは選んだ所だけ** */
.mock-img { height: 46px; margin-bottom: var(--space-2); border-radius: var(--radius-xs); background: var(--divider-strong); opacity: 0.35; }
.mock-line { height: 8px; margin: var(--space-2) 0; border-radius: var(--radius-xs); background: var(--divider-strong); opacity: 0.5; }
.mock-line--70 { width: 70%; }
.mock-line--90 { width: 90%; }
.mock-line--55 { width: 55%; }

.mock-pick {
  position: relative;
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb), 0.1);
  font-size: 16px;
  font-weight: 700;
}

.mock-pick__tag {
  position: absolute;
  top: -11px;
  right: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 10px;
}

.mock-pick__sub { margin-left: var(--space-1); color: var(--text-dim); font-size: 12px; font-weight: 400; }

.mock-head { margin-bottom: var(--space-2); color: var(--text-dim); font-size: 11px; font-weight: 700; }
.mock-head + .mock-row + .mock-row + .mock-head { margin-top: var(--space-3); }

.mock-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-1) 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  font-weight: 600;
}
.mock-row b { width: 1em; text-align: center; }
.mock-row--del { background: rgba(var(--danger-rgb), 0.14); color: var(--danger-light); }
.mock-row--del span { text-decoration: line-through; }
.mock-row--add { background: rgba(var(--success-rgb), 0.14); color: var(--success-light); }

.mock-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
}
.mock-note__t { font-weight: 700; }
.mock-note__d { color: var(--text-muted); font-size: 12px; }
.mock-note__tag {
  flex: none;
  padding: 2px var(--space-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
}
/* 知らせない行は、中身だけ沈める。札まで沈めると「知らせない」が読めない */
.mock-note--quiet > div { opacity: 0.55; }
.mock-note--quiet .mock-note__t { text-decoration: line-through; }
.mock-note--alert { border-color: var(--warning-light); background: rgba(var(--warning-rgb), 0.14); }
.mock-note--alert .mock-note__t { color: var(--warning-light); }
.mock-note--alert .mock-note__tag { border-color: var(--warning-light); background: var(--warning-light); color: var(--bg-primary); }

/**
 * 特長の3本柱。
 * 【見出しの高さを揃える】模型の高さが違っても、3枚の見出しを同じ線に置く（`subgrid`）。
 */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--space-6);
}

.pillar {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  /**
   * 【中身を囲みの幅に収める】（2026-09-23・幅 800px で実測）
   * 列を指定しないと、模型の中の折れない URL が列の最小幅を押し上げ、
   * **中身が囲みから 13px はみ出していた。**
   */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
}
.pillar h3 { margin: 0 0 var(--space-2); font-size: 17px; }
.pillar p { margin: 0; color: var(--text-muted); font-size: 14px; }

/* 3本柱から外した事実。**消したのではなく、小さくした** */
.sub-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-size: 13px;
}
.sub-facts span {
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
}
.sub-facts b { color: var(--text-main); font-weight: 600; }

/**
 * 手順。**見出しは拡張機能の登録画面の3段と同じ言葉にする**（`_locales` の `addStep1Title` など）。
 * 画面で出会う言葉と違うと、サイトで読んだ手順が製品のどこか分からない。
 */
.stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
/* 番号の円をつなぐ線。円の中心から中心まで */
.stepper::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 16.6%;
  right: 16.6%;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0.6;
}
.stepper__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font: 700 22px/1 var(--font-heading);
  /* 線を円の手前で切る。地の色の輪で線を隠す */
  box-shadow: 0 0 0 6px var(--bg-primary);
}
.stepper strong { display: block; margin-bottom: var(--space-1); font-size: 17px; }
/* 【最後の行に字を残さない】「増減か／ら。」と2字だけ落ちていた */
.stepper p,
.pillar p,
.fact p { text-wrap: pretty; }
.stepper p { max-width: 20rem; margin: 0 auto; color: var(--text-muted); font-size: 14px; }

.after-note { margin: var(--space-8) 0 0; text-align: center; color: var(--text-dim); font-size: 13px; }

/**
 * 端末から出ない —— 流れの図（どこへ行き、どこへ行かないか）。
 *
 * 【取り消し線は「サーバー」に引く】（2026-09-23・見本で直した）
 * 「ありません」に引くと、**「無いことを打ち消す＝ある」とも読めた。**
 */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1.25fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  max-width: 980px;
  margin: 0 auto;
}
.flow-node {
  padding: var(--space-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  text-align: center;
}
.flow-node__k { margin-bottom: var(--space-1); color: var(--text-dim); font-size: 11px; font-weight: 700; }
.flow-node__v { font-size: 16px; font-weight: 700; }
.flow-node--you {
  padding: var(--space-6) var(--space-4);
  border: 2px solid transparent;
  background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, var(--gradient-brand) border-box;
}
.flow-node--you .flow-node__v { font-size: 19px; }
.flow-node--optional { border-style: dashed; }
.flow-chips { display: flex; justify-content: center; gap: var(--space-1); margin-top: var(--space-2); }
.flow-chips span {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 700;
}

.flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}
.flow-arrow i { position: relative; display: block; width: 56px; height: 2px; background: var(--text-dim); }
.flow-arrow i::after,
.flow-arrow--both i::before { content: ""; position: absolute; top: -4px; border: 5px solid transparent; }
.flow-arrow i::after { right: -1px; border-right: 0; border-left: 7px solid var(--text-dim); }
.flow-arrow--both i::before { left: -1px; border-left: 0; border-right: 7px solid var(--text-dim); }
.flow-arrow--optional i { background: repeating-linear-gradient(90deg, var(--text-dim) 0 5px, transparent 5px 9px); }


/**
 * 端末から出ない —— 3つの事実。
 * 【図と並べる】（ユーザー判断）図は「どこへ行くか」、こちらは「何が無いか」を言う。
 */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.fact {
  padding: var(--space-6);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  text-align: center;
}
.fact__k { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.fact__v {
  margin: var(--space-2) 0 var(--space-3);
  background: var(--gradient-mark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /**
   * 【幅に合わせて縮める】スペイン語の `Desactivadas` は 34px で 242px あり、
   * 幅 800px の画面（使える幅 185px）で溢れていた。
   */
  font: 700 clamp(24px, 3vw, 34px)/1.1 var(--font-heading);
}
.fact p { margin: 0; color: var(--text-muted); font-size: 13px; }

.flow-foot { max-width: 720px; margin: var(--space-8) auto 0; text-align: center; color: var(--text-muted); font-size: 13px; }

@media (max-width: 760px) {
  .pillars, .stepper, .facts { grid-template-columns: 1fr; }
  .stepper::before { display: none; }

  /* 図は縦に積む。矢印も縦へ向け直す */
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { flex-direction: row; justify-content: center; }
  .flow-arrow i { width: 2px; height: 28px; }
  .flow-arrow i::after,
  .flow-arrow--both i::before { top: auto; left: -4px; right: auto; }
  .flow-arrow i::after { bottom: -1px; border: 5px solid transparent; border-bottom: 0; border-top: 7px solid var(--text-dim); }
  .flow-arrow--both i::before { top: -1px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--text-dim); }
  .flow-arrow--optional i { background: repeating-linear-gradient(180deg, var(--text-dim) 0 5px, transparent 5px 9px); }
}

/* ------------------------------------------------------------------ *
 * 訪問の統計を送ってよいかの帯（LP のみ・`C-84`）
 * 画面の下に寄せ、答えるまで残る。`hidden` のときは JS が開くまで出ない
 * ------------------------------------------------------------------ */

/**
 * 【目立たせた】（2026-09-23・ユーザー指摘「目立たなさすぎる」）
 * かつては画面幅いっぱいの帯で、**地の色が1つおきの区画と同じ**だった。
 * 下へ送ると区画の一部に見え、文字も沈んだ色だった。
 * 浮いたカードにし、見出しを置き、縁を差し色にした。
 */
.consent-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  padding: 0 var(--space-4) var(--space-4);
  pointer-events: none;
}

.consent-bar[hidden] { display: none; }

.consent-bar__card {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-6);
  border: 1px solid var(--primary);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  color: var(--text-main);
  font-size: 14px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.35);
  pointer-events: auto;
}

.consent-bar__card p { margin: 0 0 var(--space-4); color: var(--text-muted); }
.consent-bar__card .consent-bar__title { margin-bottom: var(--space-2); color: var(--text-main); font-size: 16px; font-weight: 700; }
.consent-bar a { color: var(--text-main); }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/**
 * 【「送る」と「送らない」を同じ重さにする】（2026-09-23）
 * かつては「送る」だけが塗りの主ボタンで、「送らない」は枠だけだった。
 * **拒否を同意より目立たなくする作りは、EU の監督機関が同意の誘導として問題にしている**
 *（EDPB のクッキーバナーの報告書、CNIL の指針）。どちらも同じ形・同じ色にする。
 * 【並びは「送らない｜送る」】（2026-10-07・C-172）製品全体の並び（取り消しを左、決定を右）に合わせた。色は変えない。
 * 「送る」を決定の色にする案も検討したが、法的な論点を増やさない方を選んだ（screen-names.md 4-3）。
 */
.consent-btn {
  flex: 1 1 8rem;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--text-main);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.consent-btn:hover { background: rgba(var(--primary-rgb), 0.24); }