/*
 * レイアウトの枠（コンテナ幅・セクション・グリッド・下層の 2 カラム）。色や文字は持たない。
 * コンテナは「中央寄せの固定幅＋左右の最低余白（SP 20 / PC 40）」。1200 未満の PC は幅が縮む（設計書 §2-3）。
 * 下層の 2 カラム（.l-sub）だけは 1024px で切り替える（1024 未満は SP と同じ縦積み・判断待ち 17・設計書 §2-3・§9）。
 */
@layer layout {
	.l-container {
		width: min(100% - var(--gutter) * 2, var(--w-content));
		margin-inline: auto;
	}

	.l-container--sub {
		width: min(100% - var(--gutter) * 2, var(--w-sub));
	}

	.l-container--main {
		width: min(100% - var(--gutter) * 2, var(--w-main));
	}

	.l-section {
		position: relative;
	}

	/* 紙の背景（Concept・Instagram・エリア枠）。テクスチャ画像は不透明なので、XD の 30% 重ねを疑似要素の不透明度で再現する（画像と大きさは PC / SP ともトークン） */
	.l-section--paper {
		isolation: isolate;
		background: var(--c-bg);
	}

	.l-section--paper::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: var(--z-behind);
		background: var(--paper-img) center top / var(--paper-size) no-repeat;
		opacity: var(--op-paper);
		pointer-events: none;
	}

	/* 列数は修飾で決める（SP 1 列が既定）。列と行の間隔は各ページで指定する */
	.l-grid {
		display: grid;
		grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
	}

	.l-grid--sp-2 {
		--grid-cols: 2;
	}

	.l-grid--sp-3 {
		--grid-cols: 3;
	}

	/*
	 * 下層: 1024 未満（SP と 768〜1023）は本文 → カテゴリボックスの順に縦積み・本文は列いっぱい。
	 * 1024 以上は左サイドバー 250＋間 40＋本文 710（768〜1023 で横に並べると本文が 398 まで細るため・判断待ち 17）
	 */
	.l-sub {
		display: grid;
	}

	.l-sub__main {
		min-width: 0;
	}

	@media (min-width: 768px) {
		.l-grid--2 {
			--grid-cols: 2;
		}

		.l-grid--3 {
			--grid-cols: 3;
		}

		.l-grid--4 {
			--grid-cols: 4;
		}
	}

	@media (min-width: 1024px) {
		.l-sub {
			grid-template-columns: var(--w-side) minmax(0, var(--w-main));
			grid-template-areas: "side main";
			column-gap: var(--gap-side);
			align-items: start;
		}

		.l-sub__main {
			grid-area: main;
		}

		.l-sub__side {
			grid-area: side;
		}

		/* サイドバーを外すとき（判断待ち 11）: 本文 710 を中央に置き、カテゴリボックスはサイドバーの幅（1024 以上）で出さない */
		.l-sub--no-side {
			grid-template-columns: minmax(0, var(--w-main));
			grid-template-areas: "main";
			justify-content: center;
		}

		.l-sub--no-side .l-sub__side {
			display: none;
		}
	}
}