/* 公式サイトへの設置カタログ(v61 → v62)
 *
 * 発注者却下(2026-09-04夕方「デザイン、システムともにむだしかない/使い勝手が悪くなっている/
 * 見づらい/わかりづらい/無駄な情報が多い」)を受けた最小化(brief-v61.md)の実装。
 * ヒーロー面(英字eyebrow・大見出し・リード・マスコット・吹き出し)、手順3ステップの帯、
 * 全幅cream帯の説明ブロック、固定CTA(SP下バー/PC浮遊)、ナビ付き大フッターは廃止。
 * ヘッダー直下に「機能を選ぶ→形式を選ぶ→コードをコピー」の作業領域(カード一覧)が
 * すぐ見える1本の道具画面にする。design.css / v60-base.css の共通トークン・部品
 * (--navy-900 等、.v60-*)だけで組み、新しい色・角丸・影は足さない。
 *
 * v62(2026-09-04 夜、発注者「アニメーションどこ、背景がなさ過ぎてみずらい、画像が少ない」):
 * 白一色だった道具画面に、共通部品(v60-base.css の .v62-*)で背景の帯・カードの影・
 * 挿絵・出現/フェード/拡縮の動きを足す。構成(§1原則)と文言は変えない。
 */

* { box-sizing: border-box; }

body.embed-catalog {
  margin: 0;
  /* v62: body 既定の背景(transparent)を上書きしていた。塗ると共通の body::before の
   * 紺金の帯(ページ最上部)が隠れて見えなくなるため、この画面だけの上書きは外す。 */
  color: var(--ink);
  font-family: var(--font-sans);
}

/* ── 作業領域(ヘッダー直下、道具として使う1本の縦積み)──────────────────── */
.ec-main { padding-block: 24px 48px; }
@media (min-width: 640px) { .ec-main { padding-block: 32px 56px; } }

/* 見出し+件数は読みやすさ優先で720pxに収める(指示書§1-7)。カード一覧・コード欄は
 * 「一覧」の除外規定により .v60-shell の幅(--page-max=1200px)のまま使う。 */
.ec-intro { max-width: 720px; margin: 0 0 28px; }
/* v62追記(実測): 見出し+本文(高さ計68〜93px)が body::before の帯(bg-hero.webp、
 * 露出部72〜272px/PC・56〜200px/SP)に全部かかる。地色 var(--ink) のままだと帯の写真に
 * 沈んで判読できない(実測で確認)。同じ帯画像(地色 #0b1730 相当)には
 * home.css の .home-title/.home-sub が同じ白文字+影で実測17.4:1を確認済みなので、
 * その処方をそのまま流用する(新しい色・仕組みは作らない)。 */
/* v65(2026-09-05 夜、発注者「もっと明るい、見やすい、わかりやすいにして」): 帯を明るい生成りの絹に
   変えたので、帯の上の文字は白+影から濃紺(--navy-900)+白の薄い縁取りに。 */
.ec-intro h1 {
  margin: 0;
  color: #10203f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.ec-intro p {
  margin: 8px 0 0;
  color: #1a305e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
/* v63(2026-09-05 検査役是正): 見出し+リードは data-reveal を持たず、カード側の
 * data-reveal-group(#module-catalog)はIntersectionObserverで「画面に映って初めて」
 * 動くため、狭いビューポートでは最初のカードしか映らずanim200が基準未満だった
 * (実測: 1024x768/390x844でanim200=7、v63基準の8画面≥8を満たさない)。文・ボタンは
 * 増やさず、ヘッダー/フッターの安全策(v60-base.cssの.hd-brand/.hd-title/.v61-foot)と
 * 同じ「スクロール位置に関係なく必ず動く」v60-riseをこの2行にも適用する。 */
/* 2026-09-15(発注者「なぞのアニメーション…意味が分からない」): 見出し・リードの
 * 登場せり上がり(v60-rise)を削除。最初から静止して表示する。 */

/* ── 機能ごとの1枚(v62: 白カード+影、間はgapで空ける。区切り罫は使わない)──── */
.ec-feature-list { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* 読み込み前の場所取り(CLS対策)。テクスチャ・ドットは敷かず、地色だけで確保する。 */
#module-catalog.ec-feature-list:empty {
  min-height: clamp(420px, 60vh, 900px);
  border-radius: var(--r-card);
  background: var(--cream);
}
/* 2026-09-17(v92 S-07): 上の :empty は一度も当たっていなかった。index.html の
   #module-catalog には JavaScript が動かない環境向けの 1 文(p.ec-status)が最初から
   入っているため、この枠は「空」ではない(実測: 場所取りのはずが高さ 104px)。
   その結果 catalog.js が機能の札を入れた瞬間に、下の「設置前にご確認ください」
   (.ec-notes)と最小フッターが 2000px 以上まとめて下がっていた(CLS 0.43/0.30)。
   1 文だけが入っている間(= まだ札が入っていない間)も同じ場所取りを当て、
   下の節を最初から画面の外に置く。高さは「初期表示 1 画面ぶん」(この枠の上端は
   実測で 375/768/1280 とも y=200〜201)。札が入ると規則が外れるので、落ち着いた
   後の高さ・座標は変わらない。JavaScript が動かない環境では当てない
   (@media (scripting: enabled))= 札が入る見込みが無いのに白い面を広げないため。 */
@media (scripting: enabled) {
  #module-catalog.ec-feature-list:has(> .ec-status) {
    min-height: max(420px, calc(100vh - 200px));
    border-radius: var(--r-card);
    background: var(--cream);
  }
}

/* .v62-card(白地+影+角丸)は catalog.js が付ける。ここでは内側の余白と
 * 2カラム化(PC 480px+可変)だけを決める。1枚目は .v62-lift も付き、
 * 帯(body::before)の上に浮く。 */
.ec-feature {
  display: grid;
  gap: 32px;
  padding: 28px 24px;
}
@media (min-width: 640px) { .ec-feature { padding: 32px; } }
@media (min-width: 900px) {
  .ec-feature { grid-template-columns: 480px minmax(0, 1fr); gap: 56px; align-items: start; padding: 40px; }
}

.ec-feature-info > * + * { margin-top: 12px; }
.ec-feature-info h2 { margin-top: 0; }

/* 機能名の左に挿絵(.v62-art--sm、96px角)。v60-h2 の行高に合わせて中央揃え。 */
.ec-feature-head { display: flex; align-items: center; gap: 16px; }
.ec-feature-head h2 { min-width: 0; }

/* バッジ+ボタンは同じ行。QAの注意文(ec-placement-note)が増えても、
 * この行の縦位置(=ボタンの位置)は他の機能と揃ったまま動かない。 */
.ec-feature-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.ec-audience-chip { display: inline-flex; }
.ec-placement-note {
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--gold-line);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}
@media (min-width: 640px) { .ec-placement-note { font-size: 16px; } }
.ec-status { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
@media (min-width: 640px) { .ec-status { font-size: 16px; } }

.ec-feature-code { display: grid; gap: 12px; min-width: 0; }

/* ── 表示形式セグメント(「ボタン/画面右下に固定/ページに直接表示」)────────── */
.ec-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--navy-100);
}
.ec-tab {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--navy-700);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.ec-tab.is-active { background: var(--navy-700); color: #ffffff; }
@media (hover: hover) {
  .ec-tab:not(.is-active):hover { background: rgba(255, 255, 255, .7); }
}
.ec-tab:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }

.ec-panel { display: grid; gap: 12px; }
.ec-variant-note { margin: 0; }

/* ── コードブロック(navy-950地、角丸12、右上にコピーのピル)────────────── */
.ec-code-block {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--navy-950);
  color: #ffffff;
}
.ec-code-toolbar { display: flex; justify-content: flex-end; padding: 10px 12px 0; }

.ec-code-block .ec-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-pill);
  background: transparent;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .ec-code-block .ec-copy-btn:hover { border-color: #ffffff; background: rgba(255, 255, 255, .12); }
}
.ec-code-block .ec-copy-btn:active { transform: scale(.98); }
.ec-code-block .ec-copy-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.ec-code-block .ec-copy-btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .ec-code-block .ec-copy-btn { transition: none; }
  .ec-code-block .ec-copy-btn:active { transform: none; }
}

/* v62: コピー成功で釦が1回だけ拡縮する(既存の成功文言 .ec-copy-status はそのまま)。
 * catalog.js が copyCode() 成功時に is-copied を付け、約260ms後に外す。 */
@keyframes ec-copy-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
.ec-code-block .ec-copy-btn.is-copied { animation: ec-copy-pulse 240ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .ec-code-block .ec-copy-btn.is-copied { animation: none; }
}

/* v62: 表示形式タブの切替でコードブロックだけを200msフェードする(catalog.js が
 * タブクリック時に ec-fade-in を付け替える)。 */
@keyframes ec-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ec-code-block.ec-fade-in { animation: ec-fade-in 200ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .ec-code-block.ec-fade-in { animation: none; }
}

/*
 * 設置コードは1行が長い(実測1531px)。横スクロールはコピー用途では読みにくいので、
 * 折り返して全文を見せる(2026-09-04 リーダー判定で横スクロールから変更)。
 */
.ec-code-block .ec-code {
  margin: 0;
  padding: 24px;
  color: #e8edf7;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
}
/* design.css の汎用 code{background:var(--brand-soft); padding:1px 6px; ...} が
 * そのまま乗ると、紺地の上に明るい帯が敷かれて文字が読めなくなる(実測: 帯 rgb(233,238,248)
 * と文字 rgb(232,237,247) がほぼ同色)。ここで明示的に打ち消す。 */
.ec-code-block .ec-code code {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

.ec-copy-status { min-height: 18px; margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; }

/* ── 設置前の確認欄(全幅の帯ではなく、作業領域と同じ幅のカード1枚に畳む)──────
 * 注意文は1行、詳細は<details>3枚に畳む(指示書§1-4)。地色は .ec-notes 自身が
 * 直接 --cream を宣言する(静的コントラスト検査はセレクタ文字列から祖先の地色を
 * たどるため、自分の宣言として持たせておけば実際のDOM位置に関わらず正しく解決する)。 */
.ec-notes {
  max-width: 720px;
  margin: 40px 0 0;
  padding: 20px 24px;
  border-radius: var(--r-card);
  background: var(--cream);
  color: var(--ink);
}
.ec-notes > * + * { margin-top: 16px; }

/* セレクタ文字列を必ず .ec-notes 前置にする(静的コントラスト検査は選択子文字列から
 * 祖先の地色をたどるため、実際のDOM祖先である .ec-notes を明記しないと解決できない)。 */
.ec-notes .ec-disclosure { border-top: 1px solid var(--line-1); }
.ec-notes .ec-disclosure > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
}
.ec-notes .ec-disclosure > summary::-webkit-details-marker { display: none; }
.ec-notes .ec-disclosure > summary::after { margin-left: auto; color: var(--gold-text); content: "開く"; font-size: 13px; font-weight: 700; }
.ec-notes .ec-disclosure[open] > summary::after { content: "閉じる"; }
.ec-notes .ec-disclosure > summary:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
.ec-disclosure-body { padding: 0 0 20px; }
.ec-disclosure-body > * + * { margin-top: 16px; }
.ec-notes .ec-checklist { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--ink); font-size: 15px; line-height: 1.8; }

/* option-list / color-list(catalog.js が definitionList() で流し込む dl)。 */
.option-list { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.option-list dt {
  overflow-wrap: anywhere;
  color: var(--navy-700);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
}
/* 2026-09-10是正: 375px で「色・位置の変更」の --davide-embed-dock-bottom-mobile
   (calc(59px + env(safe-area-inset-bottom, 0px)))のように長い値だと、35px
   はみ出していた(実測: CODE.module-id と隣の SPAN.v60-small が共に l=44 r=410)。
   原因は二重。(1) dd 自身の入れ子grid が列指定なし(暗黙の auto 列)だったため、
   auto 列は中身の max-content ぶんまで自分から広がれてしまい、dd の実際の幅
   (外側 .option-list 側は minmax(0,1fr) 済み)を無視して 366px 化していた
   → grid-template-columns を明示して 1fr(実質の外側幅なり)に固定する。
   (2) white-space:nowrap の min-content がそのまま列幅の下限になっていた
   → 折り返しを許可して min-content 自体も縮める(横スクロールにはしない)。
   どちらか片方だけでは直らない(実測済み)。 */
.option-list dd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; margin: 0; }
.option-list .module-id {
  display: inline-flex;
  align-items: center;
  /* dd(入れ子grid)の中でも縮む短い値は幅なりの chip のまま(stretch させない)。
     width:auto だと grid item は既定で列いっぱいに stretch してしまうため、
     必ず width を明示して shrink-to-fit を保つ(2026-09-10 実測で判明)。 */
  width: max-content;
  min-width: 0;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--navy-100);
  color: var(--navy-700);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
}
@media (max-width: 639px) {
  .option-list { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .option-list dd { margin-bottom: 10px; }
}

/* ── 表示確認ダイアログ ─────────────────────────────────────────── */
.preview-dialog {
  width: min(1040px, calc(100% - 24px));
  max-width: 1040px;
  /* v102: dvh の無い端末(iOS 15.0〜15.3)は vh の行を使う。dvh のある端末は次の行が上書きする(records.css と同じ書き方)。 */
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-float);
}
.preview-dialog::backdrop { background: rgba(11, 23, 48, .64); }
/* v102: <dialog> の無い端末(iOS 15.0〜15.3)ではこの要素が「未知の要素」になり、開いていない時も
 * 本文の下に出てしまう。<dialog> のある端末はブラウザ自身が同じ規則(dialog:not([open]) を出さない)を
 * 持っているので、今の端末の見た目は変わらない。 */
.preview-dialog:not([open]) { display: none; }
/* 同じ端末で開いた時の出し方。showModal が無い時だけ catalog.js が .is-fallback を付ける
 * (showModal のある端末にはこの class が付かない= この規則は当たらない)。 */
.preview-dialog.is-fallback[open] {
  display: block;
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 1000;
  overflow: auto;
  transform: translateX(-50%);
}
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-1);
}
.preview-header strong { color: var(--ink); font-size: 15px; }
.preview-frame { display: block; width: 100%; height: min(760px, calc(100vh - 100px)); height: min(760px, calc(100dvh - 100px)); border: 0; background: var(--cream); }

/* ── レスポンシブ細部 ───────────────────────────────────────────── */
@media (max-width: 639px) {
  /* 2026-09-05(v62 独立検査役の是正、司令塔許可 2026-09-05): 390px で最長ラベル
   * 「ページに直接表示」(8字)が実測 97px(12px)/89px(11px)必要なのに対し、3等分タブの
   * 内寸は最大でも94px前後(パディング込み)しか無く、12〜13pxのままでは1行に収まらない
   * (実測: 12pxで2行折れ)。11px(ui-readability-contractが許す下限)まで下げ、左右
   * パディングを4px→3pxへ縮め、white-space:nowrapで折り返し自体を止める(3タブとも
   * 同じ規則なので高さは揃ったまま)。 */
  .ec-tab { font-size: 11px; padding: 6px 3px; white-space: nowrap; }
  /* SP: コードブロックは横スクロール、コピーはブロック下に全幅(design-brief §4-5)。
   * ボタンを消さず、ツールバーごと下へ回して全幅にする。 */
  .ec-code-block { display: flex; flex-direction: column; }
  .ec-code-block .ec-code { order: 1; padding-top: 16px; }
  .ec-code-toolbar { order: 2; justify-content: stretch; padding: 0 12px 12px; }
  .ec-code-block .ec-copy-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ec-tab { transition: none; }
}

/* ══ v61 見出しの統一(2026-09-04 夕方 納品前検査 R6・司令塔裁定)═══════════════
 * 画面名は共通ヘッダーの .hd-title(全画面同寸)。本文の最初の見出しは
 * 22px / var(--font-sans) / 700 / var(--ink) に揃える。直前は 8 画面で
 * 13px ゴシック金(質問チャット)〜36px 明朝(埋め込み案内)までばらけており、
 * 質問チャットは自分の h1 が直下の h2 より小さい逆転が起きていた(実測)。
 * 節の見出しはその下(18px)に置いて階層を1段だけ作る。 */
.ec-intro h1 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}
/* 機能名は本文の節見出し。直前は h1 と同じ 36px 明朝で、どれがページの題名か
   分からなくなっていた(実測: h1 36px / h2 36px)。1段下げる。 */
.ec-feature .v60-h2, .ec-feature-info h2 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
}

/* 2026-09-13(v79、監査 AU-D の D-13): 匿名集計の同意チェックの当たり判定が 287x28px しか
   なく、同じ役目の /skin/・/faq/(301x44px)より小さかった。見た目は据え置いたまま、
   指で押せる高さとチェックの大きさを skin.css:1753-1769 と同じ値にそろえる。 */
.analytics-consent-card label.row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
}
.analytics-consent-card label.row > span { flex: 1 1 auto; }
.analytics-consent-card label.row input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 24px;
  block-size: 24px;
  accent-color: var(--brand);
  cursor: pointer;
}

/* ============ v83(2026-09-15) 設置コードの読みやすさ(P-06) ============
   grok 依頼 4 の指摘: 375 でコードが単語の途中で折れ、「コードをコピー」はカードの下まで
   送らないと見えなかった(実測: 折り返しは word-break:break-all、SP はツールバーが order:2 で下)。
   直し:
   ・折り返しは属性の境目(空白)だけにする(URL などの 1 かたまりは途中で切らない)。
     入りきらない分はコードの枠の中だけ横へ送れるようにする(ページは横へ広がらない)。
   ・SP でもコピーの釦をコードの上に置く(押す場所を探して下まで送らなくてよい)。
   2026-09-04 の判断(横スクロールをやめて折り返す)は残す= 属性の境目では折り返す。 */
.ec-code-block .ec-code {
  word-break: normal;
  overflow-wrap: normal;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* 1 かたまり(catalog.js の codeElement が包む span)の中では折り返さない。
 * URL の / や - の後ろ、日本語の文字と文字の間は既定では切れるので、ここで止める。 */
.ec-code-block .ec-code .ec-code-token { white-space: nowrap; }
/* SP: 348〜351 行の並び(コードが上・釦が下)を打ち消して、釦をコードの上へ。
 * 釦は全幅のまま(押しやすさは据え置き)。 */
@media (max-width: 639px) {
  .ec-code-block .ec-code { order: 2; padding: 16px 12px; font-size: 13px; }
  .ec-code-toolbar { order: 1; justify-content: stretch; padding: 12px 12px 0; }
}

/* ══ v83(2026-09-15) a11y の是正(P-44)═════════════════════════════════════
 * a11y 計測 2-11: 狭い幅で表示形式のタブが 11px。12px 以上にする。
 * 345 行の注記のとおり 12px では「ページに直接表示」(8 字)が 1 行に収まらないので、
 * 折り返しを許す(3 つとも同じ規則なので高さは揃ったまま。min-height 44px の中に
 * 2 行= 30px が収まるので、押せる大きさも今までどおり)。 */
@media (max-width: 639px) {
  .ec-tab {
    font-size: 12px; padding: 6px 2px; letter-spacing: -.01em;
    white-space: normal; line-height: 1.25; text-wrap: balance;
  }
}

/* ══ v87（2026-09-16）設置コードの折り返し（S-04）═══════════════════════
 * 本番の URL は手元のものより 30 字ほど長く、768 では 1 かたまり
 * （src="…/embed/…-embed.js" の形）だけで枠の幅 638px を超え、末尾が
 * 「…/embed/davide-em」で切れて見える（実測 文字の右端 766 > 枠の右端 703）。
 * 手で写すと欠けたコードになるので、入りきらないときはかたまりの中でも折る。
 * ・まず属性と属性の間（空白）で折る= v83 の並びは変わらない。
 * ・それでも入りきらないときだけ、かたまりの中で折る（overflow-wrap: anywhere）。
 * ・コピーする文字列は catalog.js の build() の戻り値そのままなので変わらない。 */
.ec-code-block .ec-code .ec-code-token { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ══ v87（2026-09-16）送信を許可する四角の押せる広さ（S-05 の揃え）═════
 * 394 行 の四角は 24×24px で、指で押す広さ（44×44px）に届かない。
 * 質問チャット（faq.css の v87 の節）と同じ形で、見た目は 24×24px のまま、
 * 擬似要素を四方に 10px ずつはみ出させて押せる範囲だけを 44×44px にする（24+10+10=44）。
 * 擬似要素は地色も線も持たないので画面には何も出ず、文字の位置も行の高さ（44px）も変わらない。 */
.analytics-consent-card label.row input[type="checkbox"] { position: relative; }
.analytics-consent-card label.row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  inset: -10px;
  display: block;
}