/* =============================================
   04_mobile.css : スマホ表示最適化
   ============================================= */
@media(max-width:768px) { 
    .cvx-main { padding: 10px; }
    .cvx-section { padding: 15px; border-radius: 15px; margin-bottom: 30px; }

    /* TOP3エリア：Flexboxで順番制御 */
    .cvx-top3-area { 
        display: flex;
        flex-direction: column; /* 縦並びの土台 */
        align-items: center; /* 中央寄せ */
        justify-content: center;
        min-height: auto; 
        gap: 20px; /* 縦の隙間 */
        margin-bottom: 25px;
    }

    /* 1位：滲まないサイズ（70%）で最上部に */
    .cvx-top-1 { 
        order: 1; /* 最上部に配置 */
        width: 70% !important; /* 横幅を滲まない程度に抑える */
        position: static; 
        transform: none;
        margin: 0 auto;
    }

    /* 2位・3位の横並びコンテナ（回り込み防止） */
    .cvx-top-2, .cvx-top-3 { 
        order: 2; /* 1位の下に配置 */
        display: inline-block;
        width: 46% !important; /* 2枚並び */
        margin: 0;
    }

    /* 2位と3位を横に並べるためのFlex設定 */
    .cvx-top3-area {
        flex-direction: row; /* 基本は横並び */
        flex-wrap: wrap; /* 折り返し許可 */
        justify-content: space-around; /* 均等配置 */
    }

    /* 王冠バッジの調整（1位は大きく、2・3位は滲まないサイズ） */
    .cvx-top-1 .cvx-badge { 
        width: 50px; 
        height: 50px; 
        font-size: 24px; 
        top: -15px; 
        left: 10px; 
    }
    .cvx-top-2 .cvx-badge, .cvx-top-3 .cvx-badge { 
        width: 40px; 
        height: 40px; 
        font-size: 18px; 
        top: -15px; 
        left: 5px; 
    }

    /* バッジの△部分が隠れないように、1位を少し上に上げる */
    .cvx-top-1 {
        z-index: 100;
        transform: translateY(-5px); /* 少し上に浮かせる */
    }
    .cvx-top-2, .cvx-top-3 {
        z-index: 50;
    }

    /* 4位以下のグリッド：3列 */
    .cvx-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 8px; 
    } 
    
    .cvx-card { padding: 8px; border-radius: 8px; }
    .cvx-title { font-size: 10px; height: 2.6em; line-height: 1.3; }

    /* その他パーツ */
    .cvx-datebar { gap: 5px; }
    .cvx-chip { min-width: 60px; padding: 6px 4px; font-size: 10px; }
    .cvx-more-btn {
        width: 100%;
        padding: 12px 0;
        font-size: 14px;
        white-space: nowrap;
        margin-top: 25px;
    }
}