/* layout.css — asobito レイアウト定義（Layer 4）
   読み込み順: tokens.css → main.css → components.css → layout.css
   配置・余白・グリッドのみ。色・タイポグラフィは tokens.css / components.css の責務。 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KPI グリッド
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--_sp-16);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   セクション余白
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.section + .section,
.card + .card { margin-top: var(--_sp-24); }

.section-break { margin-top: var(--_sp-48); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ページコンテンツエリア
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.page {
  padding: 28px var(--_sp-32) var(--_sp-24) var(--_sp-32);
  min-height: 100%;
  box-sizing: border-box;
}