/**
 * モバイルファーストアプリ用CSS
 * PC画面で800px固定幅にするスタイル
 * 作成日: 2025-01-27
 * 更新日: 2025-01-27 - 完全センタリング対応
 */

/* モバイルファースト基本コンテナ */
.mobile-first-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* タブレット以下では通常表示 */
@media (max-width: 991px) {
    .mobile-first-container {
        max-width: 100%;
    }
    
    body {
        background-color: #fff;
    }
}

/* PC画面（992px以上）で800px固定 - 元のBootstrap構造を維持 */
@media (min-width: 992px) {
    /* 背景設定のみ */
    body {
        background-color: #f8f9fa !important;
        background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
    }
    
    /* 元のBootstrap構造を維持 - 制限しない */
    .py-8.mobile-app-style {
        /* 元のスタイルを維持 */
    }
    
    .mobile-first-container {
        /* 元のスタイルを維持 - 800px制限を削除 */
        box-shadow: 0 0 20px rgba(0,0,0,0.05);
        border-radius: 15px;
        background: #fff;
    }
    
    /* Bootstrap標準のセンタリングを維持 */
    .row.justify-content-center {
        justify-content: center !important;
        margin: 0 !important;
    }
    
    /* 最終的な内容のみ800px固定 */
    .col-12.main-container {
        max-width: 800px !important;
        width: 800px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* プロファイル編集エリア */
    .profile-editor-v2 {
        max-width: 800px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* タブナビゲーション */
    .tab-navigation {
        border-radius: 10px 10px 0 0;
    }
    
    /* カードスタイル */
    .profile-editor-v2 .tab-container {
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 4px 25px rgba(0,0,0,0.1);
    }
}

/* 大画面（1400px以上）でも800px維持 */
@media (min-width: 1400px) {
    .col-12.main-container {
        max-width: 800px !important;
        width: 800px !important;
    }
    
    .profile-editor-v2 {
        max-width: 800px !important;
    }
}

/* PC版での追加スタイル */
@media (min-width: 992px) {
    .mobile-app-style .mobile-first-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }
}
}