/* --- 1. 页面大容器比例修改 --- */
.page-wrapper {
    display: flex;
    gap: 30px;
    width: 100%;            /* 占据屏幕宽度，留一点边距 */
    align-items: flex-start;
    
    /* 核心：设置 1920 x 998 的比例 */
    /* aspect-ratio: 1920 / 998;  */
    background: #ffffff;      /* 确保容器有底色 */
    overflow: hidden;      /* 防止内容溢出比例框 */
    padding-left: 50px;
    padding-right: 50px;
}

/* 调整内部左右比例 */
.left-column {
    flex: 0.8; 
    height: 100%;          /* 跟随父容器比例高度 */
    display: flex;
    flex-direction: column;
    /* 使用百分比内边距随缩放调整 */
    padding: 2% 2% 5% 2% !important; 
}

.right-column {
    flex: 1;
    height: 100%;
    padding: 2% 2% 5% 2% !important;
}

/* 复用之前的图片组件样式 */
.main-display {
    width: 100%;           /* 宽度跟随左侧容器 flex: 0.8 的缩放 */
    max-width: 682px;      /* 限制最大设计尺寸 */
    aspect-ratio: 682 / 680; /* 核心：强制比例 */
    
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    cursor: zoom-in;
    margin: 0 auto;        /* 居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-display img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* 确保图片充满比例框且不拉伸 */
}


/* --- 缩略图列表 --- */
.thumbnail-wrapper {
    flex: 1;
    display: flex;
    gap: 10px;
    /* 核心修改：开启横向滚动 */
    overflow-x: auto; 
    scroll-behavior: smooth; /* 开启平滑滚动效果 */
    padding: 5px;
    
    /* 隐藏滚动条 (Chrome/Safari) */
    &::-webkit-scrollbar { display: none; }
    /* 隐藏滚动条 (Firefox) */
    scrollbar-width: none; 
}


/* 全屏预览遮罩 */
#overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    display: none; /* 初始隐藏 */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: zoom-out;
}

#overlay img { max-width: 90%; max-height: 90%; box-shadow: 0 0 50px rgba(0,0,0,0.5); }


/* 适配移动端：单列显示 */
/* 响应式微调：当屏幕太小时取消固定比例，避免文字重叠 */
@media (max-width: 1024px) {
    .main-display {
        aspect-ratio: 1 / 1; /* 手机端可以直接设为 1:1 方便对齐 */
    }
    .thumb {
        width: 60px; /* 移动端固定一个较小的宽度，防止太拥挤 */
    }
    .page-wrapper, .case-card {
        aspect-ratio: auto; /* 小屏关闭强制比例，改为自适应高度 */
        height: auto;
    }
    .case-card {
        width: calc(50% - 10px); /* 改为每行2个 */
    }
}