/* ===== 全局重置 & 基础 ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            padding: 0 0 20px 0;
        }

        /* ===== 表格容器 ===== */
        .table-wrapper {
            max-width: 100%;
            padding: 10px;
            margin: 0 auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            /* 关键：让表格在容器内滚动 */
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            /* iOS 顺滑滚动 */
            position: relative;
        }

        /* ===== 表格本身 ===== */
        .responsive-table {
            border-collapse: collapse;
            table-layout: auto;
            /* 让列宽根据内容自动调整 */;
            width: 100%;
            min-width: 700px;
            /* 保证在手机上可滚动查看，但不会太挤 */;
        }

        /* 所有单元格 */
        .responsive-table td,
        .responsive-table th {
            padding: 4px 3px;
            vertical-align: middle;
            text-align: center;
            border: none;
            line-height: 0;
            /* 消除图片下方空隙 */;
        }

        /* 单元格内的链接 */
        .responsive-table td a {
            display: block;
            text-decoration: none;
            transition: opacity 0.2s ease;
        }

        .responsive-table td a:hover {
            opacity: 0.85;
        }

        /* 所有图片 */
        .responsive-table td img {
            display: block;
            max-width: 100%;
            height: auto;
            margin: 0 auto;
            border-radius: 4px;
            background: #fafafa;
            /* 图片加载时的占位背景 */;
        }

        /* ===== 桌面端 (≥768px) 保持原样 ===== */
        @media (min-width: 768px) {
            .table-wrapper {
                padding: 20px 30px;
            }

            .responsive-table {
                min-width: 960px;
                /* 桌面端恢复原宽度 */
                width: auto;
            }

            .responsive-table td {
                padding: 5px 4px;
            }
        }

        /* ===== 平板 & 小屏笔记本 (600px ~ 767px) ===== */
        @media (max-width: 767px) {
            .table-wrapper {
                padding: 8px 6px;
                border-radius: 4px;
            }

            .responsive-table {
                min-width: 620px;
                /* 适当缩小，让更多内容可见 */
            }

            .responsive-table td {
                padding: 3px 2px;
            }

            /* 图片适当缩小，但保持清晰 */
            .responsive-table td img {
                max-width: 120px;
            }
        }

        /* ===== 手机端 (< 600px) ===== */
        @media (max-width: 599px) {
            .table-wrapper {
                padding: 6px 4px;
            }

            .responsive-table {
                min-width: 480px;
                /* 手机宽度较小时，依然可滚动 */
            }

            .responsive-table td {
                padding: 2px 2px;
            }

            .responsive-table td img {
                max-width: 90px;
                border-radius: 3px;
            }

            /* 对于一些特别宽的单元格（如顶部横幅），让图片占满宽度 */
            .responsive-table td[colspan="15"] img,
            .responsive-table td[colspan="5"] img,
            .responsive-table td[colspan="6"] img,
            .responsive-table td[colspan="4"] img {
                max-width: 100%;
                width: auto;
            }
        }

        /* ===== 超小屏 (< 400px) ===== */
        @media (max-width: 399px) {
            .responsive-table {
                min-width: 380px;
            }

            .responsive-table td img {
                max-width: 70px;
            }

            .responsive-table td {
                padding: 1px 1px;
            }
        }

        /* ===== 让滚动条更美观 (WebKit) ===== */
        .table-wrapper::-webkit-scrollbar {
            height: 6px;
            background: #e8e8e8;
            border-radius: 3px;
        }

        .table-wrapper::-webkit-scrollbar-thumb {
            background: #c0c0c0;
            border-radius: 3px;
        }

        .table-wrapper::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        /* ===== 滚动提示 (仅手机显示) ===== */
        .scroll-hint {
            display: none;
            text-align: center;
            font-size: 12px;
            color: #999;
            padding: 6px 0 2px 0;
            letter-spacing: 0.5px;
            user-select: none;
        }

        .scroll-hint::before {
            content: "← 左右滑动浏览 →";
        }

        @media (max-width: 767px) {
            .scroll-hint {
                display: block;
            }
        }

        /* ===== 可选：点击时高亮反馈 ===== */
        .responsive-table td a:active {
            opacity: 0.6;
        }

        /* ===== 图片懒加载占位优化 ===== */
        .responsive-table td img {
            background-color: #f0f0f0;
            background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }

        /* 图片加载完成后取消动画（用JS可做，但这里省略，不影响功能） */

        /* ===== 打印样式 ===== */
        @media print {
            .table-wrapper {
                overflow: visible !important;
                padding: 0 !important;
                box-shadow: none !important;
            }
            .responsive-table {
                min-width: auto !important;
                width: 100% !important;
            }
            .scroll-hint {
                display: none !important;
            }
        }