/**
 * Layout — サイト幅・余白の唯一の定義元
 *
 * width: min(max, 100% - gutter×2) で
 * 「max-width + padding」の二重インセットを防ぐ。
 */
:root {
  --layout-max: 1320px;
  --layout-gutter: 24px;

  /* 旧変数名（参照互換） */
  --container-max: var(--layout-max);
  --container-pad: var(--layout-gutter);
}

@media (max-width: 768px) {
  :root {
    --layout-gutter: 12px;
  }
}

.container {
  width: min(var(--layout-max), calc(100% - var(--layout-gutter) * 2));
  margin-inline: auto;
}