*{margin:0;padding:0;box-sizing:border-box;}
body{background:#fff;color:#333;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ========== 视差滚动内容外壳 ========== */
.page-body-shell{
    position:relative;
    z-index:2;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* ========== 案例详情页容器 ========== */
.case-detail-page{width:100%;max-width:1800px;margin:0 auto;padding:80px 0px;}

/* ========== 页面标题 ========== */
.case-title{font-size:30px;font-weight:600;color:#333;margin-bottom:30px;line-height:1.3}

/* ========== 图片画廊 ========== */
.gallery-wrap{display:flex;gap:12px;margin-bottom:48px}
/* 主图 */
.gallery-main{flex:1;min-width:0;background:#f5f5f5;border-radius:4px;overflow:hidden;position:relative;aspect-ratio:16/9}
.gallery-main img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.gallery-main .no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#999;font-size:14px;background:#f0f0f0}
/* 缩略图列 */
.gallery-thumbs{display:flex;flex-direction:column;gap:10px;width:clamp(80px, 12vw, 140px);flex-shrink:0}
.gallery-thumb{cursor:pointer;border-radius:4px;overflow:hidden;border:2px solid transparent;transition:border-color .2s;aspect-ratio:16/9;background:#f5f5f5}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-thumb:hover{border-color:#00a79d}
.gallery-thumb.active{border-color:#00a79d}

/* ========== 信息区块公共样式 ========== */
.info-section{display:flex;gap:clamp(30px, 5vw, 80px);padding:36px 0;border-bottom:1px solid #e8e8e8}
.info-section:last-of-type{border-bottom:none}
.section-label{width:clamp(100px, 15vw, 160px);flex-shrink:0;font-size:22px;font-weight:600;color:#333;white-space:nowrap}
.section-body{flex:1;min-width:0}

/* ========== 项目概况 ========== */
.params-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:0 40px}
.param-item{display:flex;flex-direction:column;gap:10px;padding:24px 0;border-bottom:1px solid #e0e0e0}
.param-label{font-size:14px;color:#666}
.param-value{font-size:16px;color:#333;font-weight:500}

/* ========== 项目亮点 ========== */
.highlight-text{font-size:15px;color:#555;line-height:2}

/* ========== 相关新闻 ========== */
.related-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#333;transition:color .2s;cursor:pointer}
.related-link:hover{color:#00a79d}
.related-link .arrow{font-size:18px;line-height:1;transition:transform .2s}
.related-link:hover .arrow{transform:translateX(4px)}

/* 翻页导航 */
.page-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding: 20px 0;
}

.page-nav a {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #334155;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
    cursor: pointer;
}

.page-nav a:hover {
    border-color: #00a79d;
    color: #00a79d;
}

/* 禁用状态 */
.page-nav a.disabled {
    color: #cbd5e1;
    border-color: #e2e8f0;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== 案例不存在提示 ========== */
.case-empty{text-align:center;padding:120px 20px;color:#999}
.case-empty h2{font-size:20px;font-weight:400;margin-bottom:12px}

/* ==================== 响应式 ==================== */
@media(max-width:768px){
    .case-detail-page{padding:20px 16px 60px}
    .case-title{margin-bottom:20px}
    /* 画廊纵向 */
    .gallery-wrap{flex-direction:column}
    .gallery-thumbs{flex-direction:row;width:100%;overflow-x:auto;gap:8px;padding-bottom:4px}
    .gallery-thumb{flex-shrink:0;width:clamp(80px, 25vw, 120px)}
    /* 信息区块纵向 */
    .info-section{flex-direction:column;gap:16px;padding:24px 0}
    .section-label{font-size:18px}
    .params-grid{gap:16px 20px}
    .param-value{font-size:15px}
    .page-nav{gap:12px;margin-top:40px}
    .page-nav a{padding:10px 24px;font-size:13px}
}

@media(max-width:480px){
    .params-grid{grid-template-columns:1fr}
}

/* ========== 页面加载动画 ========== */
.page-loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    z-index:99999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transition:opacity .5s ease,visibility .5s ease;
}
.page-loader.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.loader-spinner{
    width:50px;
    height:50px;
    border:3px solid #e8e8e8;
    border-top-color:#00a79d;
    border-radius:50%;
    animation:loaderSpin .8s linear infinite;
}
.loader-text{
    margin-top:16px;
    font-size:14px;
    color:#888;
    letter-spacing:2px;
}
@keyframes loaderSpin{
    to{transform:rotate(360deg)}
}
/* 内容淡入 */
.page-fade-in{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .6s ease,transform .6s ease;
}
.page-fade-in.show{
    opacity:1;
    transform:translateY(0);
}
/* 信息区块依次淡入 */
.info-section{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .5s ease,transform .5s ease,border-color .2s;
}
.info-section.show{
    opacity:1;
    transform:translateY(0);
}
/* 画廊淡入 */
.gallery-wrap{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .5s ease,transform .5s ease;
}
.gallery-wrap.show{
    opacity:1;
    transform:translateY(0);
}
/* 标题淡入 */
.case-title{
    opacity:0;
    transform:translateY(12px);
    transition:opacity .4s ease,transform .4s ease;
}
.case-title.show{
    opacity:1;
    transform:translateY(0);
}
/* 翻页导航淡入 */
.page-nav{
    opacity:0;
    transition:opacity .4s ease;
}
.page-nav.show{
    opacity:1;
}