/* =========================================
       1. 全局配置与基础变量
       ========================================= */
    .odm-mod {
        --sf: 1.55; /* 缩放倍率 */
        --cw: 178px; --ch: 230px; /* 基础宽高 */
        --c-nv: #2C3E75; --c-tx: #2C3E75;
        --c-cl: #6FA8DC; --c-mf: #C90076;
        --f-num: 'Damion', cursive; --f-txt: 'DengXian', sans-serif; --f-san: 'Roboto', sans-serif;

        width: 100vw; max-width: 100%; box-sizing: border-box; position: relative;
        background-color: #f8f8f8; display: flex; flex-direction: column; overflow: hidden; 

        /* 顶部内容通过 padding 整体下推 50px */
        padding: calc(30px * var(--sf) + 50px) 50px calc(20px * var(--sf)) 50px; 
    }

    /* 背景色彩简写 */
    .s1 { background: #d8e4ef; } .s2 { background: #9dc1e4; } .s3 { background: #4f8dd6; } 
    .s4 { background: #3561b6; } .s5 { background: #0d3b94; } .s6 { background: #072168; }
    .bg-cl { background: var(--c-cl); } .bg-mf { background: var(--c-mf); } 
    .bg-mx { background: linear-gradient(90deg, var(--c-cl) 50%, var(--c-mf) 50%); }

    /* =========================================
       2. 顶部 Header
       ========================================= */
    .header { display: flex; justify-content: space-between; align-items: flex-start; height: calc(85px * var(--sf)); margin-bottom: calc(15px * var(--sf)); padding: 0 calc(20px * var(--sf)); z-index: 10; }
    
    .leg-box { display: flex; flex-direction: column; gap: calc(8px * var(--sf)); }
    .leg-item { display: flex; align-items: center; gap: calc(10px * var(--sf)); font: 500 calc(14px * var(--sf)) var(--f-san); color: #333; }
    .l-mark { width: calc(32px * var(--sf)); height: calc(8px * var(--sf)); border-radius: calc(4px * var(--sf)); }

    /* ✅ 修复点：标题同步强制下推 50px，保证内部间距丝毫不变 */
    .tit-box { position: absolute; left: 50%; transform: translateX(-50%); top: 50px; display: flex; align-items: center; color: var(--c-nv); }
    
    .t-main { font: 700 calc(65px * var(--sf))/0.9 var(--f-san); margin-right: calc(20px * var(--sf)); }
    .t-sub { font: 500 calc(17px * var(--sf))/1.2 var(--f-san); color: #222; border-left: calc(2px * var(--sf)) solid #333; padding-left: calc(15px * var(--sf)); display: flex; flex-direction: column; justify-content: center; }

    /* =========================================
       3. 卡片网格与缩放内核
       ========================================= */
    .grid { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; padding-bottom: 20px; }
    .c-wrap { width: calc(var(--cw) * var(--sf)); height: calc(var(--ch) * var(--sf)); position: relative; display: flex; justify-content: center; align-items: flex-end; margin-bottom: 10px; cursor: pointer; z-index: 1; }
    .c-scale { width: var(--cw); height: var(--ch); transform: scale(var(--sf)); transform-origin: bottom center; position: relative; display: flex; justify-content: center; align-items: flex-end; }

    /* =========================================
       4. 卡片内部元素
       ========================================= */
    .c-tab { position: absolute; bottom: 35px; width: 150px; height: 180px; border-radius: 15px 15px 0 0; z-index: 1; display: flex; justify-content: center; padding-top: 5px; box-sizing: border-box; box-shadow: 0 -5px 10px rgba(0,0,0,0.05); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); font: 31px/1 var(--f-num); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.2); align-items: baseline; }
    .c-wrap:hover .c-tab { transform: translateY(-40px); }
    .c-tab span { font-size: 0.6em; margin-right: 2px; }

    .c-pkt { position: relative; z-index: 2; width: 178px; height: 185px; background: #fff; 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,.3)) drop-shadow(-2px -2px 1px #fff); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 35px; transform: translateY(10px); }
    
    .deco { position: absolute; top: 40px; bottom: 45px; left: 18px; right: 18px; pointer-events: none; }
    .deco::before, .deco::after { content: ''; position: absolute; top: 0; bottom: 0; width: 10px; border-top: 2px solid var(--c-nv); border-bottom: 2px solid var(--c-nv); }
    .deco::before { left: 0; border-left: 2px solid var(--c-nv); border-radius: 15px 0 0 15px; }
    .deco::after { right: 0; border-right: 2px solid var(--c-nv); border-radius: 0 15px 15px 0; }

    .c-pkt img { width: 70px; height: 70px; object-fit: contain; margin-bottom: 5px; z-index: 3; }
    .c-txt { font: bold 13.5px var(--f-txt); color: var(--c-tx); margin-bottom: 12px; white-space: nowrap; z-index: 3; }
    .c-bar { width: 45px; height: 6px; border-radius: 3px; z-index: 3; margin-bottom: 15px; }

    /* =========================================
       5. 媒体查询 (紧凑排列缩放规则)
       ========================================= */
    @media (max-width: 1850px) { .odm-mod { --sf: 1.5; } } @media (max-width: 1750px) { .odm-mod { --sf: 1.4; } }
    @media (max-width: 1650px) { .odm-mod { --sf: 1.3; } } @media (max-width: 1550px) { .odm-mod { --sf: 1.2; } }
    @media (max-width: 1450px) { .odm-mod { --sf: 1.1; } } @media (max-width: 1350px) { .odm-mod { --sf: 1.0; } }
    @media (max-width: 1250px) { .odm-mod { --sf: 0.9; } } @media (max-width: 1150px) { .odm-mod { --sf: 0.85;} }
    @media (max-width: 1050px) { .odm-mod { --sf: 0.75;} }
    
    @media (max-width: 950px) {
        .odm-mod { --sf: 1.0; padding: 90px 20px 30px 20px; }
        .header { flex-direction: column; align-items: center; gap: 30px; height: auto; }
        /* 移动端标题脱离绝对定位，重置 top 防止二次下移 */
        .tit-box { position: relative; transform: none; left: 0; top: 0; }
        .grid { flex-wrap: wrap; justify-content: center; gap: 40px 15px; }
    }
    @media (max-width: 600px) { .odm-mod { --sf: 0.8; } }