/* 清除默认边距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #ffffff;
    /* 关键：禁用整个网页的全局滚动条，把滚动权交给右侧区域 */
    overflow: hidden; 
}

/* ================= 固定背景图 ================= */
.fixed-bg {
    position: fixed;
    top: 0;
    left: 0; /* 让背景图从左侧边栏的右边开始显示 */
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -100;          /* 垫底 */
    pointer-events: none; /* 无法点击、不可选中 */
    user-select: none;    /* 防止被拖拽 */
    /* 建议在背景图上加一点暗化处理，否则文字会看不清 */
    filter: brightness(0.3); 
}
/* ================= 整体排版 (左 1/4，右 3/4) ================= */
.layout-wrapper {
    display: flex;
    height: 100vh; /* 容器高度强制为屏幕高度 */
    width: 100vw; /* 容器宽度强制为屏幕宽度 */

}

/* --- 左侧侧边栏 --- */
.sidebar {
    display: flex;
    flex-direction: column;
    /* 核心修改 1：把原本的 center 改为 flex-start，让所有元素贴紧左边！ */
    align-items: flex-start; 
    
    /* 核心修改 2：用 padding 来控制那三个固定的距离 */

    position: fixed; /* 固定在屏幕上 */
    padding-top: 5vh; /* 顶部留白 60px */
    padding-left: 5vw; /* 左侧留白 5% */

    
    /* 确保 padding 不会导致侧边栏被撑宽 */
    box-sizing: border-box;

    height: 100vh; /* 高度强制为屏幕高度 */
    width: 25vw; /* 宽度强制为屏幕宽度的 1/4 */

    z-index: 50

}

.sidebar-logo {
    width: 280px;
    height: auto;
    pointer-events: none; /* 禁止点击和拖拽 */

}

/* 垂直菜单 */
.vertical-menu {
    display: flex;
    flex-direction: column;
    
    position: absolute;
    top: 50%;              /* 从父容器高度一半开始 */
    left: 5vw;             /* 左对齐（与父容器 padding-left 一致） */
    transform: translateY(-50%);  /* 向上偏移自身高度的一半，实现完美居中 */
  

    gap: 20px; /* 菜单项之间的间距 */

}

.menu-item {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    letter-spacing: 5px;
    padding: 10px 10px;
    text-align: left;
    border: 1px solid transparent;
    transition: all 0.3s ease;

    
}

.menu-item:hover {
    color: #ffffff;
    border-left-color: rgba(255, 255, 255, 0.5);
}

/* 表示当前所在页面的按钮样式（高亮显示） */
.menu-item.active {
    color: #ffffff; 
    background-color: transparent; /* 背景完全透明，不掺杂任何颜色 */
    font-weight: bold; /* 文字加粗凸显 */
    
    /* 核心魔法：在左边画一条 3px 宽的纯白实线作为指示器 */
    border-left: 2px solid #ffffff; 
    border-radius: 0; /* 去掉之前的圆角，让线条笔直 */
    padding-left: 12px; /* 微调内边距，弥补线条占据的空间 */

    /* 核心魔法 1：禁止一切鼠标交互（点击、悬停变色都会直接失效） */
    pointer-events: none;
    
    /* 核心魔法 2：防止按钮文字被鼠标拖拽选中（避免出现蓝色高亮块） */
    user-select: none;
}

/* ================= 侧边栏联系方式区域 ================= */

.contact-info {
    display: flex;
    flex-direction: column;
    /* 核心修改 4：内部文字也向左对齐 */
    align-items: flex-start; 
    position: fixed; /* 固定在屏幕上 */
    bottom: 5vh; /* 距离屏幕底部 5% */
    gap: 10px;
    
    /* 核心修改 5：把之前写的 margin-top 和 margin-bottom 清零 */
    margin-top: 0; 
    margin-bottom: 0;
}

/* "Contact" 小标题样式 */
.contact-title {
    color: rgba(255, 255, 255, 0.4); /* 比较暗的颜色，作为视觉层级区分 */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/* 链接和普通文本的通用样式 */
.contact-link,
.contact-text {
    color: rgba(255, 255, 255, 0.7); /* 半透明白色 */
    text-decoration: none; /* 去除超链接默认的下划线 */
    font-size: 14px;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

/* 鼠标悬停在链接上时的效果 */
.contact-link:hover {
    color: #ffffff; /* 变纯白，提示用户可以点击 */
}


/* --- 右侧内容滚动区 --- */
.content-area {
    width: 100%; /* 占据 3/4 宽度 */
    height: 100%;
    margin-left: 0; /* 留出左侧 1/4 的空间给侧边栏 */
    /* 核心属性：只有当内容超出屏幕时，右侧才出现上下滚动条 */
    overflow-y: auto; 
    
}



/* 隐藏滚动条 (适用于 Chrome, Safari, Edge) */
.content-area::-webkit-scrollbar {
    display: none; 
}

/* 隐藏滚动条 (适用于 Firefox) */
.content-area {
    scrollbar-width: none; 
}



/* 内容白板容器 */
.content-box {
 
    padding: 0px;
    margin-left: 20%;

}

/* 页面大标题样式 */
.page-title {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* 正文段落样式 */
.page-text p {
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 16px;
    color: #e0e0e0;
}






/* ================= 语言切换按钮区域 ================= */
.lang-switch {
    position: fixed;    /* 核心：固定在屏幕上 */
    top: 30px;          /* 距离屏幕顶部的距离 */
    right: 40px;        /* 距离屏幕右侧的距离 */
    z-index: 999;       /* 确保它在最上层，不会被你的内容挡住 */
    display: flex;
    align-items: center;
    gap: 12px;
    
    /* 给它也加上一点磨砂半透明背景，保持整体高级感 */
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 按钮文字默认样式 */
.lang-btn {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5); /* 默认半透明白色 */
    font-size: 14px;
    letter-spacing: 1px;
    transition: color 0.3s ease;
    cursor: pointer;
}

/* 鼠标悬停变白 */
.lang-btn:hover {
    color: #ffffff;
}

/* 当前所在语言的高亮样式 */
.lang-btn.active {
    color: #ffffff;
    font-weight: bold;
    pointer-events: none; /* 当前语言禁止重复点击 */
}

/* 中间的竖线分割符 */
.lang-divider {
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    user-select: none; /* 禁止选中竖线 */
}








/* ================= 手机端专属：隐藏的菜单按钮 ================= */
.mobile-menu-btn {
    display: none; /* 在电脑端默认隐藏 */
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 1000; /* 确保在最顶层 */
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8); /* 确保在白底图上也能看清 */
}

/* ================= 手机端适配 (屏幕宽度 < 768px) ================= */
@media screen and (max-width: 1024px) and (pointer: coarse) {
    
    /* 1. 显示汉堡菜单按钮 */
    .mobile-menu-btn {
        display: block;
    }

    /* 2. 侧边栏魔改：变成滑出的毛玻璃抽屉 */
    .sidebar {
        width: 75vw; /* 占据屏幕 3/4 宽度 */
        max-width: 320px;
        padding-top: 80px; /* 顶部留白避开汉堡按钮 */
        padding-left: 30px;
        
        /* 毛玻璃质感 */
        background: rgba(0, 0, 0, 0.4); /* 半透明黑底 */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px); /* 兼容苹果 Safari */
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        
        /* 核心动画设置 */
        transform: translateX(-100%); /* 默认移出屏幕左侧彻底隐藏 */
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 顺滑的滑出动画 */
        z-index: 990; 
    }

    /* 当用 JS 给侧边栏加上 .open 类名时，菜单滑入屏幕 */
    .sidebar.open {
        transform: translateX(0);
    }

    /* 3. 调整侧边栏内部元素的排版 */
    .sidebar-logo {
        width: 200px; /* 手机上 logo 稍微小一点 */
        margin-top: 20px;
    }

    .vertical-menu {
        position: relative; /* 取消绝对定位 */
        top: 50px;
        left: 0;
        transform: none; /* 取消 Y 轴偏移 */
        margin-top: 40px; /* 距离 Logo 的间距 */
    }

    .contact-info {
        position: relative; /* 取消底部固定 */
        bottom: 0;
        margin-top: auto; /* 利用 flex 布局自动把它推到最底部 */
        margin-bottom: 40px; /* 距离抽屉底部留白 */
    }

    /* 4. 右侧内容区撑满全屏 */
    .content-area {
        width: 100vw;
    }
    
    .content-box {
        margin-left: 5vw; /* 手机上缩小两侧留白 */
        width: 90vw;
    }

    /* 5. 语言切换按钮微调，防止挡住内容 */
    .lang-switch {
        top: 30px;
        right: 30px;
        padding: 6px 12px;
    }
}