/* =============================================================================
   📐 LAYOUT COMPONENTS - 汎用レイアウトコンポーネント  
   ============================================================================= */

/* 🔧🔧🔧 【メインコンテンツ】基本レイアウトコンテナ 🔧🔧🔧 */
.main-content {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    gap: 2rem;
}

/* 🔧🔧🔧 【アニメーション要素コンテナ】背景装飾用 🔧🔧🔧 */
.animated-objects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* 🔧🔧🔧 【フレックスレイアウト】汎用フレックスコンテナ 🔧🔧🔧 */

/* 横並びレイアウト */
.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

/* 縦並びレイアウト */
.flex-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

/* 中央揃えレイアウト */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* 両端揃えレイアウト */
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* 等間隔レイアウト */
.flex-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
}

/* 🔧🔧🔧 【グリッドレイアウト】グリッドベースレイアウト 🔧🔧🔧 */

/* 2カラムグリッド */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

/* 3カラムグリッド */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* 4カラムグリッド */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* レスポンシブグリッド */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* 🔧🔧🔧 【コンテナ】幅制限コンテナ 🔧🔧🔧 */

/* 狭いコンテナ */
.container-sm {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* 標準コンテナ */
.container-md {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* 広いコンテナ */
.container-lg {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* 最大コンテナ */
.container-xl {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* フルワイドコンテナ */
.container-full {
    width: 100%;
    padding: 0 1rem;
}

/* 🔧🔧🔧 【スペーシング】マージン・パディング 🔧🔧🔧 */

/* パディング */
.p-sm { padding: 0.5rem; }
.p-md { padding: 1rem; }
.p-lg { padding: 2rem; }
.p-xl { padding: 3rem; }

/* マージン */
.m-sm { margin: 0.5rem; }
.m-md { margin: 1rem; }
.m-lg { margin: 2rem; }
.m-xl { margin: 3rem; }

/* 上下マージン */
.my-sm { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-md { margin-top: 1rem; margin-bottom: 1rem; }
.my-lg { margin-top: 2rem; margin-bottom: 2rem; }
.my-xl { margin-top: 3rem; margin-bottom: 3rem; }

/* 左右マージン */
.mx-sm { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-md { margin-left: 1rem; margin-right: 1rem; }
.mx-lg { margin-left: 2rem; margin-right: 2rem; }
.mx-xl { margin-left: 3rem; margin-right: 3rem; }

/* 🔧🔧🔧 【ポジション】配置制御 🔧🔧🔧 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* 🔧🔧🔧 【可視性】表示制御 🔧🔧🔧 */
.hidden { display: none; }
.visible { display: block; }
.invisible { visibility: hidden; }

/* 🔧🔧🔧 【オーバーフロー】スクロール制御 🔧🔧🔧 */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }