@layer layout {
	/*
	 * コンテナ・グリッド・セクション余白などのレイアウト基盤。
	 * design coding の layout 系スタイルをここへ移植する。
	 */

	/*
	 * ページシェル：ヘッダー / メイン / フッターを縦積みにし、最低でもビューポート高
	 * （svh＝モバイルの動的ツールバー考慮）を確保。メインを伸縮させ、コンテンツが短くても
	 * フッターが画面下に張り付くようにする（sticky footer）。
	 */
	.wp-site-blocks {
		display: flex;
		flex-direction: column;
		min-height: 100svh;
	}

	/*
	 * main の背景は footer と同色にしてページ〜フッターを連続させる。
	 * 既定＝紺（primary）／明るい配色ページ（ACF page_gray → body.has-gray-page）
	 * ＝グレー（slate-100・footer グレー変種と同色）。
	 */
	.wp-site-blocks > main {
		flex: 1;
		background-color: var(--wp--preset--color--primary);
	}

	.has-gray-page .wp-site-blocks > main {
		background-color: var(--wp--preset--color--slate-100);
	}

	/*
	 * フロー間マージン（WP の :where(.is-layout-flow)>*+* ＝global-styles）で付く上マージンを
	 * スキップリンク標的とテンプレートパート（header/footer）で打ち消す。global-styles は
	 * wp 層のため layout 層の通常宣言で勝てる（#98/#100）。
	 */
	#wp--skip-link--target,
	.wp-block-template-part {
		margin-top: 0;
	}
}