/* ============================================================
   reset.css — Modern CSS Reset
   Based on: Andy Bell's Modern Reset + Josh Comeau's Custom Reset
   https://piccalil.li/blog/a-more-modern-css-reset/

   @layer base で囲むことで Tailwind のユーティリティ（@layer utilities）
   が常に優先される。p-5 などが reset に負けることがなくなる。
============================================================ */

@layer base {
    /* 1. ボックスモデルを border-box に統一 */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* 2. デフォルトマージンをゼロに */
    * {
        margin: 0;
        padding: 0;
    }

    /* 3. HTML/Body のベース設定 */
    html {
        /* スクロール時のアニメーション（アクセシビリティ考慮） */
        scroll-behavior: smooth;
    }
    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }
    }

    body {
        min-height: 100dvh;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* 4. メディア要素のブロック化と最大幅制限 */
    img,
    picture,
    video,
    canvas,
    svg,
    iframe {
        display: block;
        max-width: 100%;
    }

    /* 5. フォーム要素のフォント継承 */
    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    /* 6. 長い単語・URLの折り返し */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    /* 7. リストスタイルのリセット（role="list" を明示した場合に限り） */
    ul[role='list'],
    ol[role='list'] {
        list-style: none;
    }

    /* 8. テーブルの境界線折り畳み */
    table {
        border-collapse: collapse;
    }

    /* 9. ボタンのデフォルトスタイルリセット */
    button {
        background: none;
        border: none;
        cursor: pointer;
        color: inherit;
    }

    /* 10. アンカーのデフォルト色継承 */
    a,
    main a img,
    main a div {
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    a {
        color: inherit;
        text-decoration: none;
    }
    a {
        outline: none;
    }
    a:link,
    a:visited {
        color: var(--bs-primary);
        text-decoration: underline;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    a:hover,
    a:active {
        text-decoration: none;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    a:link {
        color: var(--bs-primary);
        text-decoration: none;
        outline: 0;
    }
    a:visited {
        color: var(--bs-primary);
        text-decoration: none;
    }
    a:hover {
        color: var(--bs-primary);
        text-decoration: none;
    }
    a:hover img {
        opacity: 0.8;
    }
    a:active {
        color: var(--bs-primary);
        text-decoration: none;
    }

    /* 11. 引用・コード要素 */
    blockquote,
    dl,
    dd,
    figure {
        margin: 0;
    }
    pre,
    code,
    kbd,
    samp {
        font-family: monospace, monospace;
        font-size: 1em;
    }

    /* 12. hr のスタイルリセット */
    hr {
        border: none;
        border-top: 1px solid currentColor;
        color: inherit;
    }

    /* 13. アニメーション抑制（アクセシビリティ） */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
} /* end @layer base */