/* ============================================================
   layout.css — Container / Section / Grid / Flex
   レイアウトの土台。色や装飾は持たせない（構造のみ）。
   ============================================================ */

/* -------- Container -------- */
.da-container {
	width: 100%;
	max-width: var(--da-container);
	margin-inline: auto;
	padding-inline: var(--da-gutter);
}
.da-container--narrow { max-width: var(--da-container-narrow); }
.da-container--wide   { max-width: var(--da-container-wide); }

/* -------- Section -------- */
.da-section {
	padding-block: var(--da-section-y);
}
/* 背景バリエーション（背景リズム用） */
.da-section--subtle { background: var(--da-bg-subtle); }
.da-section--brand  { background: var(--da-primary-50); }
.da-section--dark   { background: var(--da-secondary); color: var(--da-text-invert); }

/* -------- Grid（モバイル1列 → responsive.css で段階的に増やす） -------- */
.da-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--da-space-24);
}
/* .da-grid--2 / --3 / --4 のカラム数は responsive.css で定義（mobile-first） */

/* 中身に応じて自動折返しするグリッド（枚数不定のカード等） */
.da-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* -------- Flex ユーティリティ -------- */
.da-flex          { display: flex; }
.da-flex-center   { display: flex; align-items: center; justify-content: center; }
.da-flex-col      { flex-direction: column; }
.da-flex-wrap     { flex-wrap: wrap; }
.da-items-center  { align-items: center; }
.da-items-start   { align-items: flex-start; }
.da-justify-center  { justify-content: center; }
.da-justify-between { justify-content: space-between; }

/* -------- Spacing（gap）ユーティリティ -------- */
.da-gap-8  { gap: var(--da-space-8); }
.da-gap-16 { gap: var(--da-space-16); }
.da-gap-24 { gap: var(--da-space-24); }
.da-gap-32 { gap: var(--da-space-32); }