/* ==========================================================================
   base.css — グローバルリセット & ページ土台
   ==========================================================================
   責務:
   - ブラウザデフォルトのリセット・標準化
   - body や a, img, button など HTML 要素レベルのベーススタイル
   - ページ全体を包むコンテナ（.page など）の最低限レイアウト
   - 変数は variables.css（:root）から参照し、自身では定義しない
   - @layer base により wysiwyg で上書き可能
   ========================================================================== */

@layer base {
  html {
    scroll-padding-top: calc(var(--header-height) + 20px);
    scroll-behavior: smooth;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    min-width: 375px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  dl,
  figure {
    margin: 0;
  }

  body {
    font-family: var(--font-sans);
    color: var(--color-main);
    background-color: var(--color-white);
  }

  img {
    max-width: 100%;
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .page {
    min-height: 100vh;
  }

  .page__common-inner {
    max-width: var(--content-max-width-sm);
    margin-inline: auto;
    padding-inline: 20px;

    .page__common-inner-lg & {
      padding-inline: 0px;
    }

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      padding-inline: 24px;
    }
  }

  .page__common-inner-lg {
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: 20px;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      padding-inline: 24px;
    }
  }

  /* --------------------------------------------------------------------------
   コンポーネントの上マージン（link-card-list / related-nav / related-nav-sub / toc-nav / disclosure / usage-guide）
   -------------------------------------------------------------------------- */
  .breadcrumb {
    margin-top: 10px;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      margin-top: 20px;
    }
  }

  .link-card-list {
    margin-top: 40px;
  }

  .text-link-list {
    margin-top: 20px;
  }

  .related-nav {
    margin-top: 80px;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      margin-top: 100px;
    }
  }

  .related-nav-sub {
    margin-top: 80px;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      margin-top: 100px;
    }
  }

  .toc-nav {
    margin-top: 40px;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      margin-top: 100px;
    }
  }

  .disclosure {
    margin-block-start: 28px;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      margin-block-start: 40px;
    }
  }

  .disclosure+.disclosure {
    margin-block-start: 0;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      margin-block-start: 0;
    }
  }

  .section[data-type="usage-guide"] {
    margin-top: 40px;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      margin-top: 100px;
    }
  }

  .page-header {
    padding-block-start: 40px;

    &+* {
      margin-top: 60px;
    }

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      padding-block-start: 109px;

      &+* {
        margin-top: 100px;
      }
    }
  }

  .entry-visit-guide {
    margin-block-start: 60px;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      margin-block-start: 100px;
    }
  }

  .visit-info {
    margin-block-start: 60px;
  }

  .disclosure+.disclosure {
    margin-top: 0;
    border-top: 0;
  }

  /* --------------------------------------------------------------------------
    汎用クラス（br-sp: mobile 時のみ改行表示）
   -------------------------------------------------------------------------- */
  .br-sp {
    display: block;
  }

  html[data-viewport="tablet"] .br-sp,
  html[data-viewport="desktop"] .br-sp {
    display: none;
  }

  /* --------------------------------------------------------------------------
    汎用クラス（br-pc: tablet/desktop 時のみ改行表示）
   -------------------------------------------------------------------------- */
  .br-pc {
    display: none;
  }

  html[data-viewport="tablet"] .br-pc,
  html[data-viewport="desktop"] .br-pc {
    display: block;
  }

}