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

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

.right-column {
    flex: 1;
    height: 100%;
    padding: 0% 2% 2% 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;    /* 确保图片充满比例框且不拉伸 */
}

/* --- 底部导航栏容器 --- */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: center; /* 居中排列 */
    width: 100%;
    max-width: 682px; /* 宽度与大图一致 */
    margin: 20px auto 0;
    gap: 15px;       /* 按钮与图片区域的物理间距 */
    position: relative;
    z-index: 10;
}

/* --- 缩略图列表 --- */
.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; 
}

/* --- 缩略图单体比例 (129 x 129) --- */
.thumb {
    flex: 0 0 129px; /* 固定缩略图宽度，不让它被挤压，确保能触发滚动 */
    max-width: 129px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.3s;
}

.thumb.active {
    border-color: var(--active-blue);
    opacity: 1;
}

.nav-btn-alt {
    flex: 0 0 40px;  /* 固定 40px 宽，不放大不缩小 */
    height: 40px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 20;     /* 确保层级高于图片 */
}

.nav-btn-alt:hover {
    background-color: var(--active-blue);
    color: white;
    border-color: var(--active-blue);
}
/* 右侧详情文字装饰 */
.article-header { border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 15px; }
.article-content { margin-bottom: 12px; color: #444; }
.article-content p {  margin-bottom: 22px; line-height:1.8; }

/* 全屏预览遮罩 */
#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); }