/* ==========================================================================
   2025 Professional Reset CSS
   Based on insights from Josh Comeau, Andy Bell, and Modern Standards.
   ========================================================================== */

/* * 1. ボックスサイズの定義
 * paddingとborderを幅と高さに含めることで、レイアウト計算を直感的にします。
 * 疑似要素（before, after）にも適用します。
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* * 2. デフォルトのマージンを削除
 * ブラウザごとに異なるデフォルトのマージン（body, h1, p, ulなど）を統一し、
 * 意図しない余白を防ぎます。
 */
* {
    margin: 0;
    padding: 0;
    /* 必要に応じてpaddingもリセット */
}

/* * 3. ボディの設定
 * line-height: 1.5 ... 可読性のための黄金比。
 * -webkit-font-smoothing ... Mac/iOSでのフォント描画を滑らかに。
 * min-height: 100dvh ... モバイルブラウザのアドレスバー伸縮に対応した高さ確保。
 */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    /* システムフォントスタック（パフォーマンス最優先） */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    /* 真っ黒(#000)よりも目に優しい濃いグレーを推奨 */
}

/* * 4. メディア要素のレスポンシブ対応
 * 画像や動画が親要素からはみ出すのを防ぎます。
 * display: block ... 画像下の謎の余白（ディセンダー用）を削除。
 */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* * 5. フォーム要素のフォント継承
 * input, button, textarea, selectはデフォルトで親のフォント設定を継承しないため、
 * 強制的に継承させます。
 */
input,
button,
textarea,
select {
    font: inherit;
}

/* * 6. テキストの折り返し制御（2025年モダン仕様）
 * p, h1-h6の見出しで、行末の単語が不自然に切れたり、
 * 1文字だけ改行されるのを防ぎます。
 */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    text-wrap: pretty;
    /* バランスの良い改行を自動計算 */
}

/* * 7. ルートの分離（スタッキングコンテキスト）
 * React/Vue/Next.jsなどのアプリケーションルート用。
 * z-indexの管理を容易にするために独立したコンテキストを作成します。
 */
#root,
#__next {
    isolation: isolate;
}

/* * 8. iOSでのテキスト自動拡大の無効化
 * 横向きにした際などにフォントサイズが勝手に変わるのを防ぎます。
 */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* * 9. リストスタイルの削除
 * role="list"を持つもの以外（ナビゲーションなどで使うul/ol）の
 * デフォルトの点（・）を削除します。
 */
ul,
ol {
    list-style: none;
}

/* * 10. アンカーリンクのスムーズスクロールがない場合の配慮
 * ページ内リンクでジャンプする際、ヘッダー固定などで隠れないように
 * scroll-margin-topを設定する余地を残しますが、
 * ここでは基本の装飾リセットを行います。
 */
a {
    text-decoration-skip-ink: auto;
    /* 下線が文字に被らないようにする */
    color: inherit;
    /* 親の色を継承 */
}

/* * 11. アクセシビリティ：アニメーションの軽減
 * ユーザーがOS設定で「視差効果を減らす」をオンにしている場合、
 * 全てのアニメーションを無効化します。
 */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}