/* =========================================
       1. 全局配置与主容器 (全屏自适应版)
       ========================================= */
    .module-wrapper-short-full {
        --bg-canvas: #f8f8f8;
        --col-client: #6FA8DC;
        --col-mfr: #C90076; 
        --col-navy: #2C3E75;
        --col-text: #2C3E75;
        
        /* 字体定义 */
        --font-number: 'Damion', cursive; 
        --font-text: 'DengXian', '等线', 'Microsoft YaHei', sans-serif; 
        --font-sans: 'Roboto', sans-serif;

        /* 初始倍率 */
        --scale-factor: 1.5; 
        
        /* 基础尺寸 */
        --card-base-w: 178px;
        --card-base-h: 230px;
        
        /* 计算后的物理占位 */
        --card-real-w: calc(var(--card-base-w) * var(--scale-factor)); 
        --card-real-h: calc(var(--card-base-h) * var(--scale-factor)); 

        width: 100vw; 
        max-width: 100%;
        
        background-color: var(--bg-canvas);
        position: relative;
        box-sizing: border-box;
        
        /* 
           修改点：
           1. 顶部 padding 减去 30px (减少上方间隙)
           2. 底部保持原样 
           3. 左右留出 200px 
        */
        padding: calc(45px * var(--scale-factor) - 30px) 200px calc(20px * var(--scale-factor)) 200px; 
        
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        
        /* 
           注意：已移除原先的 overflow: hidden; 
           因为顶部高度减少后，悬停弹出的卡片可能会略微超出容器顶部，
           移除后即可允许它自然溢出，保证悬停数字不被裁切。
        */
    }

    /* 5个步骤的背景色 */
    .bg-step-1 { background-color: #d8e4ef; }
    .bg-step-2 { background-color: #9dc1e4; }
    .bg-step-3 { background-color: #4f8dd6; }
    .bg-step-4 { background-color: #3561b6; }
    .bg-step-5 { background-color: #0d3b94; }

    /* =========================================
       2. 卡片容器与布局 (自动等距贴边)
       ========================================= */
    .cards-container {
        display: flex;
        justify-content: space-between; /* 自动吸收剩余空间作为间隙 */
        align-items: flex-end;
        width: 100%;
    }

    /* 物理占位框 */
    .card-wrapper {
        position: relative;
        width: var(--card-real-w); 
        height: var(--card-real-h);
        display: flex;
        justify-content: center;
        align-items: flex-end; 
        cursor: pointer;
        z-index: 1;
    }

    /* 无损缩放引擎 */
    .card-scaler {
        position: relative; 
        width: var(--card-base-w); 
        height: var(--card-base-h);
        transform: scale(var(--scale-factor)); 
        transform-origin: bottom center;
        display: flex; 
        justify-content: center; 
        align-items: flex-end;
    }

    /* =========================================
       3. 卡片内部元素 (保持原样)
       ========================================= */
    .card-tab {
        position: absolute; bottom: 35px; width: 150px; height: 180px;
        border-radius: 15px 15px 0 0; z-index: 1;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: flex; justify-content: center; padding-top: 5px; box-sizing: border-box;
        box-shadow: 0 -5px 10px rgba(0,0,0,0.05);
    }
    
    /* 悬停弹出高度 */
    .card-wrapper:hover .card-tab { transform: translateY(-30px); }

    .tab-number {
        font-family: var(--font-number); font-weight: 400; 
        color: #fff; font-size: 31px; line-height: 1;
        display: flex; align-items: baseline; text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .num-zero { font-size: 0.6em; margin-right: 2px; }

    .card-pocket {
        position: relative; z-index: 2; width: 100%; height: 185px; background-color: #ffffff; 
        clip-path: path('M 20 0 L 44 0 L 44 20 Q 44 30 54 30 L 124 30 Q 134 30 134 20 L 134 0 L 158 0 Q 178 0 178 20 L 178 165 Q 178 185 158 185 L 20 185 Q 0 185 0 165 L 0 20 Q 0 0 20 0 Z');
        filter: drop-shadow(6px 6px 8px rgba(0, 0, 0, 0.3)) drop-shadow(-2px -2px 1px rgba(255, 255, 255, 1));
        display: flex; flex-direction: column; align-items: center; justify-content: flex-end; 
        transform: translateY(10px); padding-bottom: 35px; 
    }

    .deco-brackets { position: absolute; top: 40px; bottom: 45px; left: 18px; right: 18px; pointer-events: none; }
    .deco-brackets::before {
        content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 10px;
        border-top: 2px solid var(--col-navy); border-bottom: 2px solid var(--col-navy); border-left: 2px solid var(--col-navy); border-radius: 15px 0 0 15px;
    }
    .deco-brackets::after {
        content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 10px;
        border-top: 2px solid var(--col-navy); border-bottom: 2px solid var(--col-navy); border-right: 2px solid var(--col-navy); border-radius: 0 15px 15px 0;
    }

    .card-icon { width: 70px; height: 70px; object-fit: contain; margin-bottom: 5px; z-index: 3; }
    .card-text { font-family: var(--font-text); font-weight: bold; font-size: 13.5px; color: var(--col-text); text-align: center; height: 20px; line-height: 20px; margin-bottom: 13px; white-space: nowrap; z-index: 3; }
    .card-bar { width: 45px; height: 6px; border-radius: 3px; background-color: var(--col-client); z-index: 3; margin-bottom: 15px; }

    .bg-c-blue { background-color: var(--col-client); }
    .bg-c-pink { background-color: var(--col-mfr); }
    .bg-c-mix { background: linear-gradient(90deg, var(--col-client) 50%, var(--col-mfr) 50%); }
    .bg-c-blue-purple { background: linear-gradient(90deg, var(--col-client) 50%, var(--col-mfr) 50%); }

    /* =========================================
       4. 高频精细媒体查询 (配合200px留白微调)
       原理：随着屏幕缩小，优先自动压缩卡片之间的空隙，直到即将塞不下时再调低缩放率
       ========================================= */
    @media (max-width: 1850px) { .module-wrapper-short-full { --scale-factor: 1.45; } }
    @media (max-width: 1750px) { .module-wrapper-short-full { --scale-factor: 1.35; } }
    @media (max-width: 1650px) { .module-wrapper-short-full { --scale-factor: 1.25; } }
    @media (max-width: 1550px) { .module-wrapper-short-full { --scale-factor: 1.15; } }
    @media (max-width: 1450px) { .module-wrapper-short-full { --scale-factor: 1.05; } }
    @media (max-width: 1350px) { .module-wrapper-short-full { --scale-factor: 0.95; } }
    @media (max-width: 1250px) { .module-wrapper-short-full { --scale-factor: 0.85; } }
    @media (max-width: 1150px) { .module-wrapper-short-full { --scale-factor: 0.75; } }
    @media (max-width: 1050px) { .module-wrapper-short-full { --scale-factor: 0.65; } }

    /* 小于 950px：转为移动端换行自适应居中 */
    @media (max-width: 950px) {
        .module-wrapper-short-full { 
            --scale-factor: 1.1; 
            /* 移动端同样缩小了顶部的安全边距 */
            padding-top: 15px; 
            padding-bottom: 30px; 
            /* 手机端/小平板空间极度宝贵，取消 200px 留白，恢复为 15px */
            padding-left: 15px;
            padding-right: 15px;
        }
        .cards-container {
            flex-wrap: wrap; 
            justify-content: center;
            gap: 40px 15px; 
        }
    }
    @media (max-width: 600px) { .module-wrapper-short-full { --scale-factor: 0.85; } }