@charset "UTF-8";

/*
Theme Name: Scalesuite Parent Theme
Theme URI: https://sse.jp
Author: Scalesuite
Author URI: https://sse.jp
Description: AIが生成するWordPressコアブロック構造を、UD/アクセシビリティの制約を守りながら破綻なく表示するための最小限のFSE親テーマです。デザインテーマではなく、複数クライアント展開のための土台（スキン）として設計されています。クライアントごとの個性は style variations（/styles/*.json）と header/footer 差し替えで表現します。
Version: 5.4.0
Update URI: https://updates.scalesuite.dev/scalesuite-theme
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scalesuite-theme
Tags: block-theme, full-site-editing, minimal
*/

/* ==========================================================================
   Scalesuite Parent Theme — Core Block Skin CSS
   このファイルはコアブロックの表示を整えるための最小限のスキンです。
   ページ固有のデザインはここに書かず、Patterns / style variations で対応します。

   アクセシビリティ方針（詳細は docs/UNIVERSAL-ACCESSIBILITY.md）:
   - ここに書かれた指定は「見た目の好み」ではなく「下限の保証」である。
   - 特定の配色値に依存しない。style variation でパレットが差し替わっても
     壊れない書き方（二重リング、semantic token 参照）を優先する。
   - :where() を使う指定は「UAデフォルトより強く、ブロック設定より弱い」
     ことを意図している。編集者の指定を奪わないための優先度制御。
   ========================================================================== */

/* ---- Base ---- */
html {
	scroll-behavior: smooth;
}

body {
	color: var(--wp--preset--color--scalesuite-ink);
	background-color: var(--wp--preset--color--scalesuite-background);
}

:root {
	accent-color: var(--wp--preset--color--scalesuite-accent);
	/* フォーカスリングの太さ・隙間を一箇所で管理する */
	--ss--focus-width: 3px;
	--ss--focus-gap: 2px;
	/* 最小タップターゲット（WCAG 2.2 / 2.5.8 は 24px。実運用は 44px を下限にする） */
	--ss--target-min: 2.75rem;
	/* 固定 CTA の高さの上限。**退避量（本文の下パディングと scroll-padding）と
	   同じ値でなければならない**ため、1 箇所で持つ。詳細は is-style-fixed-cta の項。 */
	--ss--fixed-cta-max: 30vh;

	/* ---- 床（フォールバック）----

	   `var(--wp--preset--color--X)` は、X が未定義だと **無効値**になる。
	   CSS は宣言を無視するのではなく、`invalid at computed-value time` として
	   **宣言ごと落とす**。実測（§21.3 / VD-32）: `focus` を持たない子テーマでは
	   `outline-style` が `none` に落ち、`box-shadow` も消え、
	   **二重リングが内側も外側も完全に消えた状態で全自動検査が PASS した。**

	   そこで Invariant を運ぶ宣言だけ `var(--wp--preset--color--X, var(--ss--floor-X))`
	   の二段で書く。トークンが在れば床は一度も使われない。
	   **床は「値」ではなく「下限」である。**

	   だから「生の色値を書くとパレット差し替えに置き去りにされる」という規則の
	   適用外になる。置き去りにされるのは *使われる* 値だけであり、
	   床はトークンが存在する限り一度も使われない。

	   `Canvas` / `CanvasText` を使うところは、**組で保証が付く**ためである。
	   この 2 つはユーザエージェントが「地」と「文字」として持つ組であり、
	   互いに読める。テーマが色を 1 つも渡せなくなった状況で、
	   こちらが具体的な色を指定するより確実である。
	   暗色セクションと固定 CTA は「暗い面」「ブランド面」という前提を持つので、
	   システム色では代わりにならない。ここだけ具体値を置く。

	   **床が保証するのは「宣言が丸ごと落ちないこと」であって、比率ではない。**
	   組の片方だけが欠けた場合、床と実トークンの組み合わせが 4.5:1 を
	   満たす保証は無い。比率は `tools/check-contrast.mjs` が見る。
	   床は検査を置き換えるものではなく、検査を回さなかったサイトで
	   フォーカスリングが消えるのを防ぐためのものである。

	   `--ss--*` は互換面ではない（docs/COMPATIBILITY.md C-7）。
	   子テーマからこれらを参照しない。 */
	--ss--floor-ground: Canvas;
	--ss--floor-ink: CanvasText;
	--ss--floor-focus: CanvasText;
	--ss--floor-dark: #131820;
	--ss--floor-dark-ink: #f4f6f9;
	--ss--floor-accent: #0f766e;
	--ss--floor-accent-ink: #ffffff;

	/* ---- 重ね順（z-index layering contract）----
	   下の「重ね順」の項を読むこと。数値を宣言箇所へ直接書かない。 */
	--ss--z-sticky: 10;
	--ss--z-fixed-cta: 100;
	--ss--z-overlay: 1000;
	--ss--z-modal: 10000;
	--ss--z-a11y: 100000;
}

/* ---- 重ね順（z-index layering contract）----
   重なる UI は、前後関係が決まっていなければ「たまたま今の DOM 順で
   正しく見えている」だけの状態になる。1.2.3 まで z-index は宣言箇所へ
   直接書かれた 100 と 100000 の 2 つだけで、**その 100 がテーマの中で何番目なのか
   どこにも定義が無かった。** 層を 1 つ足すたびに周囲の数値を読んで推測することになる。

   数値ではなく意味の側に名前を付け、帯として予約する。

     通常コンテンツ          （z-index を持たない）
       ↓ sticky      10       スクロールに追従するヘッダー等
       ↓ fixed-cta   100      常時可視の固定 CTA
       ↓ overlay     1000     ドロワー / ナビゲーションのオーバーレイ
       ↓ modal       10000    モーダル・ダイアログ
       ↓ a11y        100000   スキップリンク等、常に最前面である必要があるもの

   **固定 CTA の位置がこの設計の要点である。**
   かなり前に出す必要はあるが、最前面 UI ではない。
   ナビゲーションのオーバーレイを開いたのに CTA がその上に乗っていれば
   操作の妨げになるし、ダイアログより前に出てもいけない。
   sticky より上・overlay より下、という位置づけを名前で固定する。

   帯を 10 倍ずつ空けてあるのは、後から層を挿し込めるようにするためである。
   sticky / overlay / modal は現在このテーマに実装が無い。**使う予定が無くても
   予約する。** 順序は「今ある要素の並び」ではなく「UI の種別の序列」であり、
   実装が現れてから決めると、その時点の見え方に合わせた数値が入る。

   **外部の巨大な z-index と数値で競わない。**
   保証するのはこのテーマが所有する UI どうしの順序だけである。
   実測（WordPress 7.0 / WooCommerce）:
     .wp-block-navigation__responsive-container.is-menu-open   100000
     .wc-block-components-drawer__screen-overlay                 9999
     .wp-lightbox-overlay 〜 close button              100000 〜 5000000
   いずれも固定 CTA（100）より前に出る。**これは望ましい向きである。**
   勝つために 9999999 のような値を持ち出しても、次に上げた側が勝つだけで、
   順序の設計そのものが消える。親テーマが決められるのは自分の UI の並びまで。

   スキップリンクの 100000 はコア自身の .screen-reader-text:focus と同値である。
   ナビゲーションのオーバーレイとも同値になり、DOM 順で後のオーバーレイが前へ出るが、
   開いている間の焦点は aria-modal のオーバーレイ側にあり、
   スキップリンクへは到達しない。ここでコアと競わせる理由が無い。

   **前提：この 5 段は「同じ重ね合わせコンテキスト」の中でしか成り立たない。**
   祖先に transform / filter / backdrop-filter / perspective / opacity < 1 /
   isolation / contain / will-change のいずれかがあると、そこに新しい
   重ね合わせコンテキストが生まれ、固定 CTA は帯の値に関係なく
   その内側へ閉じ込められる。
   さらに filter / backdrop-filter / transform / perspective は
   **position: fixed の基準（containing block）まで祖先へ移す。**
   固定 CTA が viewport ではなく祖先に対して固定されるため、
   R-7 の退避量（body の下パディング・scroll-padding）が前提ごと崩れる。
   帯が壊れるだけでなく、隠さない保証が壊れる。

   このテーマはこれらのプロパティを一切使わない。子テーマも .wp-site-blocks と
   その祖先へ持ち込まないこと（docs/CHILD-THEME.md §7）。
   tools/check-structure.mjs が生の z-index を落とし、
   tools/check-browser.mjs が固定 CTA の祖先を実機で見る。
*/

/* ---- 日本語の折り返し ----
   overflow-wrap:anywhere は英数字の途中でも問答無用で折るため、
   長いURLには効く一方で日本語混在文の可読性を落とす。
   禁則処理（line-break:strict）を効かせたうえで、はみ出す場合のみ折る。
*/
body {
	word-break: normal;
	line-break: strict;
	overflow-wrap: break-word;
}

/* URL等が確実に入る必要がある箇所だけ強く折る */
.wp-block-code,
.wp-block-preformatted,
.wp-block-verse {
	overflow-wrap: anywhere;
	overflow-x: auto;
}

a {
	color: var(--wp--preset--color--scalesuite-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	/* 細すぎる下線は拡大時・低視力時に消える */
	text-decoration-thickness: max(0.06em, 1px);
}

a:hover,
a:focus {
	color: var(--wp--preset--color--scalesuite-primary);
}

/* ---- Skip link ----
   WordPress コア（wp_enqueue_block_template_skip_link）が
   ブロックテーマに対して自動でスキップリンクを注入する。
   テーマ側で二重に置かない。ここでは見た目だけ上書きする。
   注入条件：テンプレートに <main> が存在すること。
   → 全テンプレートに main を必ず置くこと（coming-soon 含む）。
*/
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--scalesuite-primary, var(--ss--floor-ground));
	color: var(--wp--preset--color--scalesuite-background, var(--ss--floor-ink));
	outline: var(--ss--focus-width) solid var(--wp--preset--color--scalesuite-focus, var(--ss--floor-focus));
	outline-offset: var(--ss--focus-gap);
	box-shadow: 0 0 0 var(--ss--focus-gap) var(--wp--preset--color--scalesuite-background, var(--ss--floor-ground));
	font-size: 1rem;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-decoration: none;
	/* 常に最前面。コア自身の .screen-reader-text:focus と同値（重ね順の項） */
	z-index: var(--ss--z-a11y);
}

/* ---- 視覚的に隠すユーティリティ ----
   コアブロック・WooCommerce・プラグインが .screen-reader-text を出力する。
   テーマ側で定義しておかないと、環境によっては隠しテキストが露出する。
*/
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ---- Focus visibility ----
   単色のリングは「背景色が何になるか分からない」設計では保証にならない。
   実測：focus(#2563eb) は primary(#26415c) 上で 2.04:1、accent(#0f766e) 上で 1.06:1。
   client style variation で accent が #c2410c になると 1.00:1（完全に不可視）。
   → 内側に background 色、外側に focus 色の二重リングにして、
     どちらか一方が必ず隣接色と 3:1 以上になる状態を作る。
*/
:focus-visible {
	outline: var(--ss--focus-width) solid var(--wp--preset--color--scalesuite-focus, var(--ss--floor-focus));
	outline-offset: var(--ss--focus-gap);
	box-shadow: 0 0 0 var(--ss--focus-gap) var(--wp--preset--color--scalesuite-background, var(--ss--floor-ground));
}

/* ---- ターゲットサイズ（WCAG 2.2 / 2.5.8） ---- */
:where(.wp-block-query-pagination, .wp-block-comments-pagination) :where(a) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--ss--target-min);
	min-inline-size: var(--ss--target-min);
	padding-inline: var(--wp--preset--spacing--20);
}

/* ナビゲーションリンクは短い語（「ホーム」等）だと文字幅だけでは 44px に届かない。
   0.3.0 以前は WordPress 既定の文字サイズが大きく、たまたま超えていただけで
   保証はされていなかった。theme.json のトークンを有効化した際に 41.2px となって表面化した。
   高さと同じく幅も明示する。中央寄せにしないと箱だけ広がって文字が左に寄る。 */
:where(.wp-block-navigation) .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--ss--target-min);
	min-inline-size: var(--ss--target-min);
}

:where(.wp-block-post-terms, .wp-block-comment-reply-link) a {
	display: inline-block;
	padding-block: var(--wp--preset--spacing--20);
}

/* ---- 最上位ブロック（header / main / footer）の間隔 ----
   theme.json の styles.spacing.blockGap は 1 つの値で 2 つの出力を兼ねている。
     1. --wp--style--block-gap
        → group / columns / flow レイアウト全体の既定の間隔
     2. :where(.wp-site-blocks) > * { margin-block-start: <値> }
        → 最上位（header / main / footer）どうしの間隔
   theme.json 側で 2 だけを外す書き方は無い。値を消すとコア既定の 24px に
   戻るだけで、settings.spacing.blockGap を無効化すると 1 まで消えて
   本文の縦リズムが全部飛ぶ。よって 2 のみをここで打ち消す。
   コア側は :where() の 0 specificity なので、この 1 段の指定で確実に勝つ
   （読み込み順に依存しない）。
   最上位の余白が要る場合は header / footer パーツ側の padding で持たせる。
*/
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---- はみ出し防止 ----
   flex/grid の子要素は min-width:auto が既定なので、
   中身（長い見出し・表・埋め込み）の最小幅がそのまま下限になり、
   320px 幅で親を突き破る。明示的に 0 を入れて縮めるようにする。
*/
.wp-site-blocks,
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-tabs,
.wp-block-tab-list,
.wp-block-post-template > li {
	min-width: 0;
}

/* ---- 編集者が指定した min-width を、ページ全体の横スクロールにしない ----

   WP 7.1 で `dimensions.minWidth` がブロックサポートに入った。`appearanceTools`
   の opt-in 一覧（`WP_Theme_JSON::APPEARANCE_TOOLS_OPT_INS`）に含まれるため、
   このテーマは **設定を 1 行も書いていないのに制御が増えている。**
   値はインラインの `min-width` として出る（style engine の `dimensions.minWidth`）。

   CSS では `min-width` が `max-width` より後に適用される。つまり
   `max-width: 100%` を足しても勝てない。上のルールも詳細度で負ける。
   **インラインの指定を打ち消す方法は無いし、打ち消すべきでもない。**
   編集者が明示した幅は編集者の判断である。

   打ち消す代わりに、はみ出しをその場に閉じ込める。表と Woo のカートで
   すでに使っている作法と同じで、**あふれる領域自身をスクロール領域にして
   ページ全体の横スクロール（I-5）を防ぐ。**

   `:has()` を使うのは、min-width にクラスが付かないためである。背景画像の
   ときと同じ理由で、インラインスタイルの部分一致で見るしかない。
   `min-height` には当たらない（前方一致ではなく `min-width` の綴りで見る）。

   スクロール領域を作ると、その中の `position: sticky` は viewport ではなく
   この箱に対して貼り付く。**§37.2 で実測した。**保険が働いた Group の中では
   sticky の走査親が viewport からその Group へ移り、Group には高さの制限が無いので
   縦スクロールが起きず、**結果として sticky が効かない状態になる。**

   この交換は意図したものである。失う側は「sticky が効かない」という劣化で、
   守る側は I-5（ページ全体の横スクロールを出さない）という Invariant である。
   **固定 CTA（position: fixed）は影響を受けない。**
   fixed の包含ブロックは viewport であり、overflow では切り取られない。

   当たる範囲は狭い。**7.1 で `dimensions.minWidth` を宣言しているコアブロックは
   `core/group` だけである**（実測）。さらに条件は「min-width を持つ子を*直接*持つ」
   ことなので、同じ Group へ min-width の子と sticky の子を両方入れた場合にしか起きない。
*/
:where(.wp-block-group, .wp-block-column, .wp-block-cover):has(> [style*="min-width"]) {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
}

/* 横向き時などにブラウザが勝手に文字サイズを膨らませるのを防ぐ */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* ---- 現在位置を色以外でも示す ---- */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
[aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- 支援技術向けテキストがフォーカス時に読める必要がある場合 ---- */
.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
}

/* ---- WooCommerce の主要操作もターゲットサイズを下回らせない ----
   min-block-size は非置換インライン要素には適用されないため、
   display を併せて指定して初めて成立する。
*/
:where(
	.wc-block-components-button,
	.wc-block-cart-item__remove-link,
	.wc-block-mini-cart__button,
	.wc-block-customer-account__link,
	.wc-block-components-quantity-selector__button
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--ss--target-min);
	min-inline-size: var(--ss--target-min);
}

/* ---- WooCommerce の操作対象にもフォーカスリングを届かせる（R-3 / I-3）----

   3.6.0 で `check-browser.mjs` が公開ページのフォーカス順を一周して測るようにした
   ところ、**購入導線の主要ボタンでリングが出ていないことが実測された。**

     「購入手続きに進む」 .wc-block-cart__submit-button   outline-color: rgba(0,0,0,0)（透明）
     「注文を確定」       .wc-block-components-checkout-place-order-button  同上
     数量の +/- と入力欄  .wc-block-components-quantity-selector__*         outline-style: none
     カートから削除       .wc-block-cart-item__remove-link                  内側リングなし
     チェックアウトの同意 .wc-block-components-checkbox__input              色がテーマ外の値

   **この状態でそれまでの自動検査はすべて PASS していた。**VD-40 / VD-48 と同じ形で、
   「検査していない範囲は、問題が無いのではなく検査していない」の実例である。
   原因は WooCommerce 自身の CSS で、テーマより詳細度が高い。

   **ここだけ `!important` を使う。**理由は 2 つある。

   1. R-3 は Invariant（下限）であって好みではない。強制配色や背景画像の抑止で
      既に `!important` を使っているのと同じ種類の指定である。
   2. **対象を Woo のクラスへ限定している。**WP 7.1 の per-instance state CSS
      （`block-supports/states.php`）は編集者の意図であり、テーマが奪ってはいけない。
      コアブロックの `:focus-visible` には一切触れず、検査で報告するだけに留める。
      奪う相手を「プラグインの CSS」に限る、というのがこの規則の線引きである。
*/
:where( [class*="wc-block-"], [class*="wp-block-woocommerce-"], .wc-forward ) :focus-visible,
[class*="wc-block-"]:focus-visible,
.wc-forward:focus-visible {
	outline: var(--ss--focus-width) solid var(--wp--preset--color--scalesuite-focus, var(--ss--floor-focus)) !important;
	outline-offset: var(--ss--focus-gap) !important;
	box-shadow: 0 0 0 var(--ss--focus-gap) var(--wp--preset--color--scalesuite-background, var(--ss--floor-ground)) !important;
}

/* ---- スティッキーヘッダー等を使った場合のアンカー着地位置 ---- */
:target {
	scroll-margin-block-start: var(--wp--preset--spacing--60);
}

/* ---- Media ---- */
img,
video,
canvas,
svg {
	max-width: 100%;
	height: auto;
}

/* ---- Forms ----
   :where() で 0 specificity にしてあるため、UAデフォルトには勝ち、
   ブロック側の設定には負ける（編集者の指定を奪わない）。
*/
:where(input, select, textarea, button) {
	font-family: inherit;
	line-height: 1.5;
}

:where(input, select, textarea) {
	/* 16px 未満だと iOS がフォーカス時に自動ズームし、レイアウトが破綻する */
	font-size: max(1rem, 1em);
}

:where(
	input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"]),
	select,
	textarea
) {
	/* border トークン（#ddd8d3 / 対背景 1.42:1）は装飾用。
	   入力欄の境界は UI コンポーネントなので 3:1 以上が必要 → muted を使う。 */
	border: 1px solid var(--wp--preset--color--scalesuite-muted);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--30);
	min-block-size: var(--ss--target-min);
	color: var(--wp--preset--color--scalesuite-ink);
	background-color: var(--wp--preset--color--scalesuite-background);
}

:where(input, textarea)::placeholder {
	color: var(--wp--preset--color--scalesuite-muted);
	opacity: 1;
}

/* ---- Buttons ---- */
button,
.wp-block-button__link {
	cursor: pointer;
}

:where(
	.wp-block-button__link,
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"]
) {
	min-block-size: var(--ss--target-min);
	min-inline-size: var(--ss--target-min);
}

:where([role="button"]) {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--ss--target-min);
	min-inline-size: var(--ss--target-min);
}

/* 上の :where() は詳細度 0 なので Woo 自身の CSS に負ける。ここで (0,2,0) へ上げる。
   **子結合子（>）を使わない。**上げたいのは詳細度であって、入れ子の深さに
   依存したいわけではない。Woo 11.1 は数量ステッパーの DOM 順を視覚順に合わせる
   （WCAG 1.3.2 / 2.4.3 の修正）。このテーマは位置指定のセレクタを 1 つも
   持たないため順序の変更そのものは当たらないが、`>` は「button が selector の
   直下にある」ことに依存しており、Woo が包み直した時点で黙って効かなくなる。
   子孫結合子なら詳細度は同じ (0,2,0) のまま、深さの前提だけが外れる。 */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-inline-size: var(--ss--target-min);
}

/* ---- Query / Post Template ---- */
.wp-block-query {
	margin-block: var(--wp--preset--spacing--60);
}

.wp-block-post-template {
	gap: var(--wp--preset--spacing--50);
}

/* ---- アイキャッチが箱を突き抜けて下のブロックを覆うのを止める ----

   コアの post-featured-image は、`useFirstImageFromPost` が有効でアイキャッチが
   未設定のとき、本文の最初の <img> の属性を丸ごと写して figure の中へ置く
   （wp-includes/blocks/post-featured-image.php）。このとき、コアが aspectRatio 用に
   組み立てている `width:100%;height:100%;object-fit:<scale>` は
   **get_the_post_thumbnail() へ渡す配列にしか入っていない**ため、写した img には
   1 つも付かない。それでも figure には aspect-ratio が付く。

   結果、箱だけが 4/3 に固定され、中の img は元画像の縦横比のまま描かれる。
   コアの既定は `.wp-block-post-featured-image :where(img) { width:100%;height:auto }`
   で詳細度が (0,1,0) しかないため、宣言比より縦長の画像は箱を突き抜ける。
   さらにコアは figure へ `position:relative` を当てているので、
   はみ出した画像は**通常フローの直後のブロックより上に描画される**。
   タイトルと日付が画像に覆われて読めなくなる。

   実測（2026-08-19 / WP 7.0.4 / Edge / コアの CSS のみ / 300px カラム / 元画像 600×900）:

     通常のアイキャッチ + 4/3        img 225px  はみ出し 0
     useFirstImageFromPost + 4/3    img 450px  はみ出し +225px  タイトルを覆う
     同上（元が Cover の背景画像）    img 450px  はみ出し +225px  同一

   Cover 由来かどうかは関係が無い。コアの Cover の絶対配置は
   `.wp-block-cover` の子孫へスコープされており、写した先では発火しない。
   `elementFromPoint` でタイトル位置を測ると img が返る（覆っている）。

   したがって当てるのは position ではなく **寸法**である。コアが本来当てるはずの
   値を当て直すだけで、写してきた属性を洗い流す指定は 1 つも書かない。

   条件を付けない理由: 高さの定まっていない figure の子に対する `height:100%` は
   `auto` へ解決されるため、aspect-ratio も height も持たない既定の
   アイキャッチには**何も起こらない**（実測で 450px のまま変化しないことを確認）。
   `[style*="aspect-ratio"]` で絞る案もあるが、コアが figure へ height を直接
   書く経路（height 属性）でも同じことが起きるうえ、属性値の部分一致は
   コアの出力形式に依存する。無条件で書いて、効かない場面では効かない形にする。

   編集者の指定は奪わない。通常のアイキャッチでは同じ 3 つがインラインスタイルで
   img に付いており、そちらが常に勝つ。 */
.wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
}

/* ---- アイキャッチの箱を親より広くしない（リフローの保険 / I-5）----

   `aspect-ratio` を持つ figure が縦 flex の中に置かれると、**幅より先に高さが決まり、
   幅がそこから逆算される。**正方形の素材を横長の比率で表示する組み合わせで顕著になる。

   実測（2026-08-19 / WP 7.0.4 / Edge / 導入先のトップページ / 素材 1200×1200 / 16:9 指定）:

     viewport   カード幅   figure の実寸   ページの scrollWidth
     320px      278px      490 × 276      505   ← 横スクロールが出る
     1280px     384px      679 × 382      1265  ← 隣のカードへ被る

   幅 490.3 = 高さ 275.8 × 16/9 である。275.8 はカードの内寸（278 − 境界 2）で、
   **正方形の画像をカード幅に合わせて高さが決まり、そのあと比率が幅を広げている。**
   コアは figure へ `position:relative` を当てるので、はみ出した画像は
   後続のブロックの上へ描かれる（2.1.0 の項と同じ壊れ方）。

   `max-width` を当てると、幅が親で頭打ちになり、比率が高さを引き直す。
   同じ実測で scrollWidth は 505 → **305**（viewport と一致）、figure は 276×155 になる。
   1280px 側も 382×215 に収まる。

   **箱を親の中へ収めるだけで、比率も object-fit も奪わない。**
   グリッドの 1 列化（次の項）と同じ「保険」の側に置く指定である。 */
.wp-block-post-featured-image {
	max-width: 100%;
}

/* リフローの保険（WCAG 1.4.10 / 320px 幅）。
   グリッドは patterns 側で minimumColumnWidth を明示するのが原則だが、
   編集者が columnCount だけを設定した場合に横スクロールを起こさないための下限。
   コアの grid 実装はバージョンで挙動が変わるため、テーマ側でも止める。 */
@media (max-width: 30rem) {
	.wp-block-post-template.is-layout-grid,
	.wp-block-group.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Navigation ---- */
.wp-block-navigation a {
	text-decoration: none;
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
	text-decoration: underline;
}

/* ---- Heading ----
   color は指定しない。親 Group に背景色＋文字色を指定した暗色セクションで、
   見出しだけ ink のまま取り残されるのを防ぐ。既定色は body から継承される。
*/
.wp-block-heading {
	text-wrap: balance;
	/* 対応ブラウザでは文節単位で折り返す（日本語見出しの可読性） */
	word-break: auto-phrase;
}

p {
	text-wrap: pretty;
}

/* ---- Image ---- */
.wp-block-image figcaption {
	color: var(--wp--preset--color--scalesuite-muted);
}

/* ---- Table ----
   表の罫線は「構造を理解するために必要なグラフィック」なので
   装飾用の border トークンではなく muted（対背景 5.74:1）を使う。
*/
.wp-block-table {
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--scalesuite-muted);
	padding: var(--wp--preset--spacing--30);
}

.wp-block-table th {
	text-align: start;
	background-color: var(--wp--preset--color--scalesuite-surface);
}

/* 横スクロールが必要な表はキーボードでもスクロールできるようにする */
.wp-block-table {
	overflow-x: auto;
}

/* Woo の cart line items は狭幅でも表の最小幅を維持する。
   cart 主領域自身をスクロール領域にして、ページ全体の横スクロールを防ぐ。 */
.wp-block-woocommerce-cart .wc-block-cart__main {
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
}

/* 商品入りmini-cartの閉じたdrawerは left:100% に置かれるため、
   Chromiumでページ全体のscrollWidthを数px広げることがある。 */
.wc-block-components-drawer__screen-overlay--is-hidden {
	display: none;
}

/* badge はボタン端から数px外へ張り出すため、論理方向の内側へ戻す。 */
.wc-block-mini-cart__badge {
	margin-inline-start: calc(-44% - 0.125rem);
}

/* ---- Quote ---- */
.wp-block-quote {
	border-inline-start: 4px solid var(--wp--preset--color--scalesuite-muted);
	padding-inline-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--scalesuite-muted);
}

/* ---- Separator ---- */
.wp-block-separator {
	border-color: var(--wp--preset--color--scalesuite-muted);
	opacity: 1;
}

/* ---- Tabs（WP 7.1 で追加されたコアブロック）----

   `core/tabs` / `core/tab-list` / `core/tab-panels` / `core/tab-panel` の 4 つ。
   コアが配るスタイルは箱の初期化だけで（`blocks/tab-list/style.css` は
   `border: none; background: none; appearance: none` でボタンを裸に戻す）、
   面・境界・下限はテーマの担当になる。

   **選択中のタブは色だけで示されていない。**コアが
   `button[aria-selected="true"]::before` で 2px の下線を引く（I-9）。
   ここで font-weight を足したくなるが、**足さない。**タブは
   `width: max-content` なので、太字にした瞬間に選択のたびタブ幅が変わり、
   帯全体が横へずれる。下線は位置と形の手がかりとして単独で成立している。

   フォーカスリングは全体の `:focus-visible` がそのまま効く。
   **だから tab-list に `overflow` を作らない。**スクロール領域にすると
   二重リングの外側が切り取られる。狭幅は flex の折り返し（コアの既定が
   `flexWrap: wrap`）で処理し、上の min-width: 0 と合わせて I-5 を保つ。
*/

/* コアのボタンの余白は `--wp--preset--spacing--20 / --30` である。
   このテーマのトークンを入れると block 方向は 0.4rem × 2 = 12.8px で、
   本文（medium / line-height 1.8）と合わせても 44px に届かない領域が残る。
   ページネーションやナビゲーションと同じく、下限をここで明示する。 */
.wp-block-tab-list button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--ss--target-min);
	min-inline-size: var(--ss--target-min);
}

/* タブの帯と中身の境界。選択中タブの下線（currentColor）はこの線の上に乗る。
   罫線は「どこまでがタブでどこからが中身か」を伝える情報なので、
   装飾用ではなく表と同じ扱いにする。 */
.wp-block-tab-list {
	border-block-end: 1px solid var(--wp--preset--color--scalesuite-hairline);
}

.wp-block-tab-panel {
	padding-block-start: var(--wp--preset--spacing--40);
}

/* ---- Block Style Variation: Fixed CTA ----
   register_block_style()（functions.php）で core/group に登録した
   スタイルバリエーション。theme.json の styles.blocks.*.variations は
   register_block_style() で登録された名前にしかCSSを生成しないため、
   色・余白・角丸・影もここで直接定義します。独自ブロックではなく、
   標準の Group ブロックに対する 1 つのスタイルバリエーションです。

   固定要素は「フォーカスされた要素を隠さない」（WCAG 2.2 / 2.4.11）と
   「拡大時に画面を占有しない」（1.4.10）の両方を壊しやすい。
   下の3点セットで初めて安全になる。

   **退避量は CTA の高さの上限と同じ値でなければならない。**
   1.2.0 まで、CTA は最大 30vh まで伸びる一方で退避は 7rem 固定だった。
   独立した 2 つの定数が一致している必要があったのに、一致していなかった。
   実測（320x900 / Edge）: CTA の実高 185.1px に対し退避 112px。73.1px 不足し、
   最下部までスクロールしたとき本文の最終行が CTA に覆われていた。
   最悪ケースは 30vh - 7rem、900px の viewport で 158px 不足する。
   `--ss--fixed-cta-max` に束ねて、片方だけ変えられない形にした。
   `box-sizing: border-box` のため `max-block-size` はボーダーボックスを抑える。
   したがって CTA の総高は必ず `--ss--fixed-cta-max` 以下になり、退避が下回ることはない。
*/
/* ---- 機構 ----
   固定配置と、それに伴う破綻防止。ここはテーマが保証する側なので通常の詳細度で書く。
*/
.wp-block-group.is-style-fixed-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	/* overlay / modal より下。ナビのオーバーレイやダイアログを覆わない（重ね順の項） */
	z-index: var(--ss--z-fixed-cta);
	max-block-size: var(--ss--fixed-cta-max);
	overflow-y: auto;
}

/* ---- 装飾 ----
   :where() で 0 詳細度にして、編集者のブロック設定へ譲る。
   このテーマは「デザインを決めるCSSではなく、壊れないための最低保証」を優先する。
   固定 CTA だけがブランド色を押し付けている状態を解消する。
*/
:where(.wp-block-group.is-style-fixed-cta) {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	padding-bottom: calc(var(--wp--preset--spacing--40) + env(safe-area-inset-bottom, 0px));
	box-shadow: var(--wp--preset--shadow--scalesuite-md);
}

/* 配色は「背景と文字色の組」でしか意味を持たない。
   片方だけ残ると、もう片方が取り残されて読めなくなる。

   実測（1.2.1 / Edge）: fixture は backgroundColor:"surface"（明色）を設定していたが、
   コアの has-scalesuite-surface-background-color は !important で背景だけを置き換え、
   テーマの color（白）はそのまま残っていた。**白文字 / 明るい背景で 1.09:1。**
   本文「まずはご相談ください。」が事実上見えない状態だった。
   R-4（見出しが親の foreground から取り残される）と同型の欠陥である。

   編集者が背景を決めた時点で、この組は成立しない。だから組ごと降りる。
   降りた結果、文字色は body から継承される（ink）ため、明色背景でも読める。
   暗色背景を選んだ場合に文字色を明示するのは編集側の責任（docs/CONTENT-AI.md）。

   文字色は accent-ink であって、ページの地の色（background）ではない。
   1 つの slug が「ページの地」と「ブランド面の上に乗るインク」を兼ねていると、
   生成器が地の色をブランドへ振った瞬間、CTA の文字色が道連れになる。
   check-contrast.mjs は FAIL を出すが、直せば今度は地の色が歪む。
   1 つの slug が 2 つの役割を持つ限り、検査は矛盾を指すだけで解けない（1.4.0）。
*/
:where(.wp-block-group.is-style-fixed-cta:not(.has-background)) {
	background-color: var(--wp--preset--color--scalesuite-accent, var(--ss--floor-accent));
	color: var(--wp--preset--color--scalesuite-accent-ink, var(--ss--floor-accent-ink));
}

/* 1. 末尾コンテンツがCTAの下に潜り込まないようにする */
body:has(.is-style-fixed-cta) {
	padding-bottom: var(--ss--fixed-cta-max);
}

/* 2. アンカー遷移・キーボードフォーカスの着地点がCTAに隠れないようにする */
html:has(.is-style-fixed-cta) {
	scroll-padding-block-end: var(--ss--fixed-cta-max);
}

/* 3. 縦が狭い（＝400%拡大・横向きスマホ）ときは固定をやめる */
@media (max-height: 30rem) {
	.wp-block-group.is-style-fixed-cta {
		position: static;
		max-block-size: none;
	}

	body:has(.is-style-fixed-cta) {
		padding-bottom: 0;
	}
}

/* 4. エディタのキャンバスでは固定をやめる

   style.css はキャンバスへもそのまま渡る（add_editor_style() と
   scalesuite_editor_parent_style()）。フロントと同じ見た目で編集できることが
   目的だが、**position: fixed だけは編集そのものを妨げる。**

   キャンバスは iframe であり、fixed の基準はその viewport になる。
   固定 CTA は常に下端へ張り付き、z-index 100 で本文の上に乗る。
   固定 CTA は文書の末尾に置くもの（それが本来の置き方）なので、
   末尾へ追加したブロックと既定のアペンダは帯の下に入り、
   クリックが帯へ吸われて **触れなくなる**。

   報告と診断（2.0.0 / WP 7.0.4）: 「固定 CTA を末尾に持つページで、末尾へ
   ブロックや Group を追加すると、そのブロックに触れなくなる・固まったように
   見える」という報告を受けた。原因はこの宣言から導いたものであり、
   **エディタのキャンバスで実測してはいない**（VD-50）。
   止まっているのは編集操作ではなく当たり判定である。

   overflow-y も戻す。キャンバスではブロックがスクロールコンテナになり、
   中のブロックが隠れる。

   `.block-editor-block-list__block` は**キャンバスにしか存在しない**。
   これを条件にすると、フロント側の宣言を 1 つも変えずにエディタだけ降ろせる。
   エディタ専用の CSS ファイルを別に持たないのは、見た目の定義場所を
   2 つへ割らないためである（style.css を唯一の定義場所にする）。
   降ろす内容は 3 の「縦が狭いときは固定をやめる」と同じである。
*/
.wp-block-group.is-style-fixed-cta.block-editor-block-list__block {
	position: static;
	max-block-size: none;
	overflow-y: visible;
}

body:has(.is-style-fixed-cta.block-editor-block-list__block) {
	padding-bottom: 0;
}

/* ==========================================================================
   Block Style Variations: 表現レベル 2
   register_block_style()（functions.php）で登録した名前に対応するCSS。

   ここに置くものと置かないものの線引き（docs/CONTENT-AI.md「表現レベル」）:
   - 置く     テーマが繰り返し保証できる語彙。暗色セクション、パネル、
              ディスプレイ見出し、ラベル。どのクライアントでも同じ意味で使える。
   - 置かない 1ページ限りの装飾。それは子テーマかページ固有CSSの領分である。

   すべて **preset トークンだけ**を参照する。生の色値を書くと
   style variation でパレットが差し替わったときに置き去りになる。

   背景の重ね掛けのような「修飾」はここへ登録しない。
   ブロックスタイルバリエーションは 1 ブロックにつき 1 つしか選べず
   （エディタの選択は is-style-* を入れ替える）、暗色セクションと
   併用した時点で選択が壊れる。深度が要る場合は gradient preset を使う。

   固定UI（is-style-fixed-cta）との関係:
   ここで transform / filter / backdrop-filter / isolation を使わない。
   これらは重ね合わせコンテキスト（transform 系はさらに containing block）を作り、
   セクションの内側に置かれた固定CTAが viewport 基準で固定されなくなる。
   カードの hover は translateY ではなく border-color と box-shadow で表す。
   見た目のためにこの契約を曲げない。
   ========================================================================== */

/* ---- Dark Section ----
   全幅（alignfull）と組み合わせて使う暗色の帯。

   色は 2 つだけ指定する。背景と **本文色** である。
   見出し色を指定しないのは I-4（見出しは親の foreground を継承する）を
   保つため。ここで見出しへ色を当てると、暗色セクションの中だけ
   見出しが本文と別系統になり、style variation の差し替えで取り残される。

   リンクとボタンは暗色の上で別の色へ切り替える。
   theme.json の accent / primary は明背景を前提にした比率しか持たず、
   暗色の上では 3:1 すら満たさない（tools/check-contrast.mjs で実測）。
   切り替えた先も同じチェッカーが検査している。
*/
/* 条件は「編集者が面の色を選んだか」であって、`has-background` ではない。

   `has-background` は **背景画像を設定したときにも付く。**コアはフロントでは
   `render_block`、編集画面では `getBackgroundImageClasses()` で同じクラスを足す。
   したがって `:not(.has-background)` で書くと、**画像を敷いた瞬間に
   暗色セクションの面の色が降りる。**残るのは文字色（dark-ink）だけになり、
   要素の背景色は transparent のままになる。

   実害が 2 つある。

   1. 画像が読めない・透過を含む場合、明るい地に明るい文字が乗る。
   2. **編集画面が「この色の組み合わせは読みにくい」と警告し続ける。**
      コアのコントラスト検査は要素の背景色を見て、transparent なら祖先へ
      遡る（`ColorPanel` の `getComputedStyle` ループ）。遡った先はキャンバスの
      白なので、白 対 dark-ink で 1.1:1 と判定される。**画像も覆いも見ていない。**
      利用者から 2.2.0 の受け入れ確認で報告された（§32.9）。

   面の色を選んだかどうかは、コアが付ける preset のクラスで見る。
   色なら `has-<slug>-background-color`、gradient なら `has-<slug>-gradient-background`。
   任意の色値（preset 外）はインラインスタイルで来るので、0 詳細度の
   :where() より強く、この宣言を自然に上書きする。

   **WP 7.1 で gradient の経路が 2 つになった。**上の列挙は旧経路のもので、
   新しい `background.gradient` ブロックサポート（`core/group` は block.json で
   宣言している）はクラスを `has-background` しか付けない。**slug のクラスが
   付かないので、上の :not() は新経路を検知できない。**

   これは穴ではない。2 つの経路は出す CSS プロパティが違う。
     - 旧 `color.gradient` … `background` ショートハンド
       → background-color ごと置き換わるので、この宣言は自然に消える。
     - 新 `background.gradient` … `background-image`
       → **background-color は打ち消されない。**面の色が gradient の下に残る。
   残るのは背景画像のときと同じ状態で、この項が意図してそう作った側である。
   検知できないまま安全側に倒れているので、:not() は旧経路のまま置く。
   **新経路に合わせて :not([style*="background-image"]) を足してはいけない。**
   足すと画像を敷いた瞬間に面の色が降りるという、この項が塞いだ欠陥へ戻る。

   強制配色でも塞がっている。gradient は `background-image` として出るため、
   forced-colors の項の `[style*="background-image"] { background-image: none }`
   がそのまま拾い、面の色（dark）が残って本文が読める。

   これで画像の下に面の色が残る。画像はその上に描かれるので見た目は変わらない。
   コアの検査も、実際に塗られている色（dark）を見るようになる。
   **ただしコアの検査は写真そのものを見ない。**写真の上で本文が読めるかは
   覆い（overlay-*）の側の保証であり、あちらは tools/check-contrast.mjs が見ている。 */
:where(
	.wp-block-group.is-style-section-dark:not([class*="-background-color"]):not([class*="-gradient-background"])
) {
	background-color: var(--wp--preset--color--scalesuite-dark, var(--ss--floor-dark));
}

.wp-block-group.is-style-section-dark:not(.has-text-color) {
	color: var(--wp--preset--color--scalesuite-dark-ink, var(--ss--floor-dark-ink));
}

/* 編集者が色を指定したリンクは触らない。指定が無いものだけ暗色向けにする。 */
.wp-block-group.is-style-section-dark :where(a:not(.wp-element-button):not(.has-text-color)) {
	color: var(--wp--preset--color--scalesuite-dark-accent);
}

.wp-block-group.is-style-section-dark :where(a:not(.wp-element-button):not(.has-text-color)):hover {
	color: var(--wp--preset--color--scalesuite-dark-ink);
}

.wp-block-group.is-style-section-dark
	:where(.wp-element-button:not(.has-background):not(.has-text-color)) {
	background-color: var(--wp--preset--color--scalesuite-dark-accent);
	color: var(--wp--preset--color--scalesuite-dark);
}

.wp-block-group.is-style-section-dark
	:where(.wp-element-button:not(.has-background):not(.has-text-color)):hover,
.wp-block-group.is-style-section-dark
	:where(.wp-element-button:not(.has-background):not(.has-text-color)):focus {
	background-color: var(--wp--preset--color--scalesuite-dark-accent-alt);
	color: var(--wp--preset--color--scalesuite-dark);
}

/* 罫線を持つコアブロックは muted を前提にしている（対背景 5.74:1）。
   暗色の上では同じ役割を dark-muted が持つ。装飾用の dark-border ではない。
   意味のある境界に装飾トークンを使うと、比率の要件が誰の担当か分からなくなる。 */
.wp-block-group.is-style-section-dark :where(.wp-block-table th),
.wp-block-group.is-style-section-dark :where(.wp-block-table td),
.wp-block-group.is-style-section-dark :where(.wp-block-separator),
.wp-block-group.is-style-section-dark :where(.wp-block-tab-list),
.wp-block-group.is-style-section-dark :where(.wp-block-quote) {
	border-color: var(--wp--preset--color--scalesuite-dark-muted);
}

.wp-block-group.is-style-section-dark :where(.wp-block-table th) {
	background-color: var(--wp--preset--color--scalesuite-dark-surface);
}

.wp-block-group.is-style-section-dark :where(.wp-block-quote) {
	color: var(--wp--preset--color--scalesuite-dark-muted);
}

/* ---- Panel ----
   境界を持つカード。列（Columns）や Grid の中へ並べて使う。

   hover と focus-within を同じ見た目にする。
   hover だけに反応する実装は、キーボードで中のリンクへ到達したときに
   カード自体が反応せず、いまどのカードにいるのかが分からなくなる。
*/
:where(.wp-block-group.is-style-panel) {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--scalesuite-hairline);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--scalesuite-surface);
	transition:
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

:where(.wp-block-group.is-style-panel:hover),
:where(.wp-block-group.is-style-panel:focus-within) {
	border-color: var(--wp--preset--color--scalesuite-muted);
	box-shadow: var(--wp--preset--shadow--scalesuite-md);
}

/* ---- 入れ子の左右 padding をコアに 0 にされないようにする ----

   WordPress は useRootPaddingAwareAlignments が有効なとき、次を出力する。

     .has-global-padding :where(
         :not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)
     ) { padding-right: 0; padding-left: 0 }

   入れ子の constrained group が root padding を二重に持たないための規則であり、
   コア側の意図としては正しい。**特異度は (0,1,0) である。**
   :where() で書いたテーマの既定（0,0,0）はこれに負ける。

   実測（1.3.0 / WP 7.0.4 / Edge）: Columns の中に置いた is-style-panel は
   padding が 24px / **0px** / 24px / **0px** になり、境界に本文が接触していた。
   alignfull を持つ Dark Section が無事だったのは、コア側の :not(.alignfull) に
   当たって除外されるためで、直っていたのではなく当たっていなかっただけである。

   パネルと固定CTAの左右 padding は「余白の好み」ではなく、
   **境界を持つ箱が成立するための条件**である。境界と本文が接触した状態は
   余白が狭いのではなく壊れている。したがってここだけ :where() を使わず
   (0,2,0) で明示する。編集者が指定した padding はインラインスタイルなので
   この指定より強く、選択を奪わない。

   物理プロパティで書く。コア側が padding-right / padding-left という
   物理プロパティで宣言しており、論理プロパティとの解決順序に依存させないため。
*/
.wp-block-group.is-style-panel,
.wp-block-group.is-style-fixed-cta {
	padding-right: var(--wp--preset--spacing--50);
	padding-left: var(--wp--preset--spacing--50);
}

.wp-block-group.is-style-section-dark
	:where(.wp-block-group.is-style-panel:not(.has-background)) {
	border-color: var(--wp--preset--color--scalesuite-dark-hairline);
	background-color: var(--wp--preset--color--scalesuite-dark-surface);
}

.wp-block-group.is-style-section-dark
	:where(.wp-block-group.is-style-panel:not(.has-background):hover),
.wp-block-group.is-style-section-dark
	:where(.wp-block-group.is-style-panel:not(.has-background):focus-within) {
	border-color: var(--wp--preset--color--scalesuite-dark-muted);
}

/* ---- Display ----
   大きく見せる文字のトラッキングと行間。文字サイズ自体は指定しない。
   サイズは編集者が preset（display / display-lg）から選ぶものであり、
   スタイル側で固定すると選択を奪う。

   :where() を使わないのは、theme.json の elements.heading が
   :root :where(h1 ... h6) で line-height を出しており、
   :where() では負けるためである。編集者が指定した場合は
   インラインスタイルになるので、この指定より強い。
*/
.wp-block-heading.is-style-display,
.wp-block-paragraph.is-style-display {
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* ---- Eyebrow ----
   セクション見出しの上に置く小さいラベル。

   大文字化は CSS で行う。マークアップ側を大文字で書くと、
   読み上げが 1 文字ずつになる音声環境があり、検索や翻訳の対象も変わる。
   表示だけを変え、文書に入る文字列は書いたままにする。

   先頭の罫は content:"" の疑似要素なのでアクセシビリティツリーへ載らない。
   aria-hidden を書く必要はない。

   inline-block で組む。flex にすると、直接の子であるテキストノードが
   min-width:auto の匿名フレックスアイテムになり、320px で溢れる余地が残る。
*/
.wp-block-paragraph.is-style-eyebrow {
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--scalesuite-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* 編集者が背景を塗った面の上では、eyebrow は色を持たず親の前景を継承する。

   muted は「ページの地（background / surface）の上で控えめに見える」ことを
   前提にした色であり、編集者が選んだ任意の面の上で比率を保証できない。
   実測: muted #6b6560 は primary の上で 1.83:1、accent の上では 1.05:1 である。
   accent 面に置いた eyebrow は事実上見えていなかった。

   固定CTAの配色と同じ判断をする。**組が成立しない場面では組ごと降りる。**
   降りた結果、eyebrow はその面のために編集者が選んだ本文色を継承するので、
   本文が読める面なら eyebrow も読める。

   has-background は編集者が背景を指定したときにだけ付く。
   is-style-panel の surface はテーマが CSS で塗っており、このクラスは付かない。
   したがってテーマが比率を保証している面では muted のままになる。

   暗色セクションは切り替え先（dark-accent）を持つので、下で明示する。 */
:where(.has-background) .wp-block-paragraph.is-style-eyebrow:not(.has-text-color) {
	color: inherit;
}

.wp-block-paragraph.is-style-eyebrow::before {
	content: "";
	display: inline-block;
	inline-size: 2rem;
	block-size: 1px;
	margin-inline-end: 0.75em;
	background-color: currentColor;
	vertical-align: middle;
}

.wp-block-group.is-style-section-dark
	.wp-block-paragraph.is-style-eyebrow:not(.has-text-color) {
	color: var(--wp--preset--color--scalesuite-dark-accent);
}

/* ---- User preference: prefers-reduced-motion ----
   OS/ブラウザで「視差効果を減らす」等が設定されているユーザーには、
   アニメーション・トランジション・スムーズスクロールを最小化する。
*/
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

/* ---- User preference: prefers-contrast ----
   コントラストを強めたいユーザー向けに、フォーカスリングや罫線を太くする。
*/
@media (prefers-contrast: more) {
	:root {
		--ss--focus-width: 4px;
	}

	.wp-block-table th,
	.wp-block-table td,
	.wp-block-tab-list,
	.wp-block-quote {
		border-width: 2px;
	}

	a {
		text-decoration-thickness: max(0.1em, 2px);
	}

	/* WP 7.1 の `typography.textShadow` を落とす。
	   影は文字の縁を滲ませる方向にしか働かず、コントラストを上げたい
	   利用者の要求と逆になる。詳細は forced-colors 側の同じ項。 */
	* {
		text-shadow: none !important;
	}
}

/* ---- User preference: forced-colors（Windows ハイコントラスト） ----
   ユーザー定義のシステム色が優先される。テーマの配色は無効化されるので、
   「色以外で伝わっているか」だけをここで担保する。
*/
@media (forced-colors: active) {
	:focus-visible {
		outline-color: Highlight;
		box-shadow: none;
	}

	.wp-block-group.is-style-fixed-cta {
		border-block-start: 1px solid CanvasText;
	}

	/* パネルの境界はシステム色で残す。カードの区切りは情報である。 */
	.wp-block-group.is-style-panel {
		border: 1px solid CanvasText;
	}

	/* ---- 背景画像を落とす ----

	   強制配色が置き換えるのは色のプロパティであり、**背景画像は置き換えられない。**
	   一方 box-shadow は none へ落ちる。この 2 つが同時に起きるため、
	   画像オーバーレイ（shadow preset の overlay-*）を敷いた面では
	   **覆いだけが消えて写真が残る。**文字はシステム色になっているので、
	   写真の明暗と無関係な 1 色が写真の上に直接乗ることになる。

	   実測（Edge / forced-colors 強制）: 真っ黒な画像を背景に持つ Group で、
	   面の画素は (0,0,0)、文字色は CanvasText（この環境では黒）。**読めない。**
	   覆いを敷いていない背景画像でも同じことが起きるので、条件は overlay ではなく
	   **背景画像そのもの**に置く。オーバーレイを足したことで生まれた欠陥ではなく、
	   背景画像を語彙として配る以上ここで塞ぐべきものである。

	   セレクタがインラインスタイルの部分一致なのは、背景画像に class が
	   付かないためである。コアは `render_block` で style 属性へ
	   `background-image:url(...)` を書き込む（保存済み HTML には無い）。
	   Cover ブロックは img 要素と別の重ね方をしており、この規則には当たらない。
	   あちらは覆いが background-color なので強制配色で不透明になり、自然に読める。

	   値の書き方まで条件にしない。**フロントと編集画面で綴りが違う。**
	   フロントはコアが文字列として組み立てるので `background-image:url(...)`、
	   編集画面は React が CSSOM 経由で当てるため `background-image: url(...)` と
	   空白が入る。プロパティ名だけで見る。

	   `!important` は、インラインスタイルへ勝つために要る。 */
	[style*="background-image"] {
		background-image: none !important;
	}

	/* ---- 文字の影を落とす ----

	   WP 7.1 で `typography.textShadow` が theme.json のスタイルに入った。
	   style engine には無いので、ブロックのインラインではなく
	   `global-styles-inline-css` の側から出る（:root / 要素セレクタ）。

	   **強制配色は text-shadow を置き換えない。**置き換わるのは色・背景色・
	   罫線色で、影は作者が指定した色のまま残る。システム色になった文字の
	   周りに作者の色の縁が残るので、置き換えの目的そのものを損なう。
	   ブラウザは自動で外さないため、ここで明示的に落とす。

	   `*` なのは、影がどの階層のセレクタから来るか分からないためである。
	   global styles は :root にも要素にもブロックにも書ける。 */
	* {
		text-shadow: none !important;
	}

	.wp-block-navigation a:hover,
	.wp-block-navigation a:focus {
		text-decoration: underline;
	}
}

/* ---- Print ----
   印刷・PDF保存も「別の出力環境」として扱う。
*/
@media print {
	.wp-block-group.is-style-fixed-cta,
	.wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	body:has(.is-style-fixed-cta) {
		padding-bottom: 0;
	}

	body {
		color: #000;
		background: #fff;
	}

	/* 暗色セクションを紙へそのまま出さない。
	   全面のベタ塗りはインクを浪費し、プリンタによっては本文が潰れる。
	   色を落としても構造は見出しと余白で残る。 */
	.wp-block-group.is-style-section-dark,
	.wp-block-group.is-style-section-dark .wp-block-group.is-style-panel {
		color: #000 !important;
		background-color: transparent !important;
	}
}