/* 基础优雅文字与极简布局样式 */
        :root {
            --primary-color: #1a1a1a;
            --text-color: #4a4a4a;
            --accent-color: #FFBF00; /* 网页主色调：温暖而专业的工业金黄 */
            --accent-text: #cc9600;  /* 针对浅色背景上文本的深金黄色，确保无障碍阅读对比度 */
            --bg-light: #f9f9f9;
            --border-color: #e0e0e0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: var(--text-color);
            line-height: 1.8;
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            -webkit-font-smoothing: antialiased;
        }

        .news-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px 60px 20px; /* 已将顶部 60px 间距改为 0，彻底去除文章开头的空行 */
        }

        /* 导语部分 */
        .news-lead {
            font-size: 1.15rem;
            color: #333;
            max-width: 800px;
            margin: 0 auto 60px auto;
            text-align: justify;
            font-weight: 400;
            position: relative;
            padding: 0 20px;
            border-left: 4px solid var(--accent-color); /* 主色调左边框 */
        }

        /* 阶段交错布局方案 */
        .phase-section {
            display: flex;
            align-items: center;
            gap: 50px;
            margin-bottom: 80px;
        }

        /* 偶数行反转，实现左右交错 */
        .phase-section:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* 图片包裹区容器 */
        .phase-image-wrapper {
            flex: 1;
            min-width: 300px;
        }

        /* 图片容器样式（无图时显示占位边框，有图时无缝填满） */
        .phase-image-container {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 3;
            background-color: transparent; /* 已将默认的灰色背景 var(--bg-light) 修改为透明，去除图片背后的灰色框 */
            border-radius: 6px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 真实图片样式 */
        .phase-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 2;
        }

        /* 图片成功加载后，渐显覆盖占位图 */
        .phase-image.loaded {
            opacity: 1;
        }

        /* 当图片成功加载后，隐藏占位提示文字，防止与图片发生重叠 */
        .phase-image.loaded ~ .placeholder-box {
            display: none;
        }

        /* 占位提示文字样式 */
        .placeholder-box {
            position: absolute;
            padding: 20px;
            text-align: center;
            color: #999;
            font-size: 0.9rem;
            line-height: 1.6;
            z-index: 1;
        }

        /* 文字内容区 */
        .phase-content {
            flex: 1;
        }

        .phase-number {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--accent-text); /* 采用可读性更好的深金黄色 */
            font-weight: 700;
            margin-bottom: 5px;
            display: block;
        }

        .phase-title {
            font-size: 1.6rem;
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .phase-text {
            margin: 0;
            font-size: 1.05rem;
            color: var(--text-color);
            text-align: justify;
        }

        /* 结尾总结区域 */
        .news-footer {
            margin-top: 80px;
            padding: 40px;
            background-color: var(--bg-light);
            border-left: 4px solid var(--accent-color); /* 主色调左边框 */
            border-radius: 0 4px 4px 0;
        }

        .news-footer p {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--primary-color);
        }

        /* 响应式手机端排版优化 */
        @media (max-width: 768px) {
            .news-container {
                padding: 40px 15px;
            }

            .news-title {
                font-size: 1.8rem;
            }

            .phase-section, .phase-section:nth-child(even) {
                flex-direction: column;
                gap: 20px;
                margin-bottom: 50px;
            }

            .phase-image-wrapper {
                width: 100%;
            }

            .phase-title {
                font-size: 1.3rem;
                margin-bottom: 10px;
            }
        }