@layer layout {
  /* ========================================
     HTML（スクロールバーによるレイアウトシフト防止）
  ======================================== */
  html {
    overflow-y: scroll;
  }

  /* ========================================
     Body
  ======================================== */
  body {
    background: var(--palette-gray-ice);
    overflow-x: hidden;
  }

  /* 固定ページ・投稿一覧・アーカイブ・404・記事ページ用 */
  body.page,
  body.blog,
  body.archive,
  body.error404,
  body.single {
    background: #F3F5F6;
    padding: 0;
    margin: 0;
  }

  /* ========================================
     Main
  ======================================== */
  .main {
    display: block;
  }

  /* 固定ページ用 */
  .main--page {
    background-image: linear-gradient(180deg, #E0F2F8 0%, #F3F5F6 640px, #F3F5F6 100%);

    @media (min-width: 768px) {
      background-image: linear-gradient(180deg, #E0F2F8 0%, #F3F5F6 900px, #F3F5F6 100%);
    }
  }

  /* 404ページはグラデーションを短く */
  body.error404 .main--page {
    background-image: linear-gradient(180deg, #E0F2F8 0%, #F3F5F6 400px, #F3F5F6 100%);

    @media (min-width: 768px) {
      background-image: linear-gradient(180deg, #E0F2F8 0%, #F3F5F6 500px, #F3F5F6 100%);
    }
  }

  /* ========================================
     Main Content（グラデーション背景 薄→濃）
  ======================================== */
  .main-content {
    background: var(--gradient-bg-section);
  }

  /* ========================================
     Section Spacing
  ======================================== */
  .section + .section {
    margin-top: var(--space-18);

    @media (min-width: 768px) {
      margin-top: var(--space-40);
    }
  }

  /* ========================================
     Container
  ======================================== */
  .container {
    max-width: var(--content-w);
    margin-inline: auto;
    padding-inline: var(--container-padding-x);
  }

  .container--narrow {
    max-width: var(--content-w-narrow);
  }

  .container--wide {
    max-width: var(--content-w-wide);
  }

  /* ========================================
     Section
  ======================================== */
  .section {
    /* 余白は .section + .section で管理 */
    /* 横余白は各コンポーネントで管理 */
  }
}