@layer components {
	/* ============================================================
	 * サイト共通の内容シェル（home=front-page 以外の全ページ）。
	 * 基本構成（docs/page-structure.html）:
	 *   main(背景色) > hero(全幅・beam) + .nexray-wrapper + breadcrumb
	 *   .nexray-wrapper（w-full＋左右 gutter）> .nexray-section × N
	 *
	 *   .nexray-wrapper … hero の下・main 直下。全幅で左右 gutter（shell-gutter）。
	 *   .nexray-section … wrapper 内の各区画。max-width=shell-max 中央。
	 *                     背景色・縦 padding は各区画（block/固定ページ本文）側が持つ。
	 *
	 * 幅の権威は theme.json（contentSize/wideSize）を壊さない：section 内側の
	 * WP constrained が本文テキスト幅をそのまま制御する（section は外枠 shell-max のみ）。
	 * project-archive はこの上に一覧固有ルールを載せる（project-archive.css）。
	 * ============================================================ */
	.nexray-wrapper {
		padding-inline: var(--nexray-shell-gutter);
	}

	.nexray-section {
		max-width: var(--nexray-shell-max);
		margin-inline: auto;
	}

	/* ============================================================
	 * nexray-sheet … 白パネル primitive（自己完結カード）。
	 *   max-width=shell-max 中央 ＋ 白背景 ＋ y/x レスポンシブ padding。
	 *   wrapper 直下に置けば 1472 の白カードになる（section と併用不要）。
	 * nexray-sheet__inner … 中身の本文コンテンツ列を content-max(1216) に絞る。
	 *   全幅で使いたいときは __inner を使わず sheet 直下に置く。
	 * ============================================================ */
	.nexray-sheet {
		max-width: var(--nexray-shell-max);
		margin-inline: auto;
		background-color: var(--wp--preset--color--base);
		padding-block: clamp(2rem, 8vw, 8rem);
		padding-inline: clamp(1.5rem, 4vw, 4rem);
	}

	.nexray-sheet__inner {
		max-width: var(--nexray-content-max);
		margin-inline: auto;
	}
}