@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: 1.3.0
Update URI: https://github.com/takeshimatsukado/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--ink);
	background-color: var(--wp--preset--color--background);
}

:root {
	accent-color: var(--wp--preset--color--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;

	/* ---- 重ね順（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--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--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--primary);
	color: var(--wp--preset--color--background);
	outline: var(--ss--focus-width) solid var(--wp--preset--color--focus);
	outline-offset: var(--ss--focus-gap);
	box-shadow: 0 0 0 var(--ss--focus-gap) var(--wp--preset--color--background);
	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--focus);
	outline-offset: var(--ss--focus-gap);
	box-shadow: 0 0 0 var(--ss--focus-gap) var(--wp--preset--color--background);
}

/* ---- ターゲットサイズ（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-post-template > li {
	min-width: 0;
}

/* 横向き時などにブラウザが勝手に文字サイズを膨らませるのを防ぐ */
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);
}

/* ---- スティッキーヘッダー等を使った場合のアンカー着地位置 ---- */
: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--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--ink);
	background-color: var(--wp--preset--color--background);
}

:where(input, textarea)::placeholder {
	color: var(--wp--preset--color--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);
}

.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);
}

/* リフローの保険（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--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--muted);
	padding: var(--wp--preset--spacing--30);
}

.wp-block-table th {
	text-align: start;
	background-color: var(--wp--preset--color--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--muted);
	padding-inline-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

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

/* ---- 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--md);
}

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

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

   編集者が背景を決めた時点で、この組は成立しない。だから組ごと降りる。
   降りた結果、文字色は body から継承される（ink）ため、明色背景でも読める。
   暗色背景を選んだ場合に文字色を明示するのは編集側の責任（docs/CONTENT-AI.md）。
*/
:where(.wp-block-group.is-style-fixed-cta:not(.has-background)) {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

/* 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;
	}
}

/* ==========================================================================
   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 で実測）。
   切り替えた先も同じチェッカーが検査している。
*/
:where(.wp-block-group.is-style-section-dark:not(.has-background)) {
	background-color: var(--wp--preset--color--dark);
}

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

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

.wp-block-group.is-style-section-dark :where(a:not(.wp-element-button):not(.has-text-color)):hover {
	color: var(--wp--preset--color--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--vivid);
	color: var(--wp--preset--color--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--vivid-alt);
	color: var(--wp--preset--color--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-quote) {
	border-color: var(--wp--preset--color--dark-muted);
}

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

.wp-block-group.is-style-section-dark :where(.wp-block-quote) {
	color: var(--wp--preset--color--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--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--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--muted);
	box-shadow: var(--wp--preset--shadow--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--dark-border);
	background-color: var(--wp--preset--color--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--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--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.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--vivid);
}

/* ---- 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-quote {
		border-width: 2px;
	}

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

/* ---- 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;
	}

	.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;
	}
}