/* ============================
   1. 全局定义
   ============================ */
/* 同时引入：Noto Serif SC (宋体-用于正文) 和 Noto Sans SC (黑体-用于导航) */
/* wght@100;300;400... 表示引入 100, 300, 400 等粗细 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap');

:root {
    --nav-height:80px;   /* 导航栏高度固定60, 数越大，留白越大 */
    --page-gap: 20px;     /* 左右页面留白 */
    --img-ratio: 91%;     /* 图片占比 */
    
    --primary-color: #000000;
    --accent-color: #8c8c8c;
    --bg-color: #ffffff;

    /* 导航栏字体粗细在这里调整 */
    --nav-weight-default: 300;  /* 默认：Thin */
    --nav-weight-hover:   400;  /* 悬停：Light */
    
    /*修改选中时的粗细 */
    --nav-weight-active:  500;  
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 优先使用 'Noto Sans SC'字体*/
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    background-color: var(--bg-color);
    color: var(--primary-color);
    font-weight: 500;  /*字体粗细*/
}

/* 首页锁定无滚动 */
body.home-page {
    overflow: hidden;
    height: 100vh;
}

/* ============================
   开屏页 (Intro Splash Screen)
   ============================ */

#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    
    /* 🔴 层级最高：必须盖住导航栏(1000)和灯箱 */
    z-index: 9999; 
    
    background-color: #fff; /* 白底 */
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 鼠标变成手型，提示可点击 */
    cursor: pointer; 
    
    /* 消失动画：向上滑动 */
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 当加上这个类名时，开屏页滑上去 */
#intro-screen.hidden {
    transform: translateY(-100%);
}

.intro-content {
    max-width: 1000px;
    padding: 40px;
    text-align: center;
    animation: fadeIn 1s ease-out;
}

.intro-image img {
    width: 100%;
    max-height: 50vh; /* 图片不要太高，留点位置给字 */
    object-fit: cover;
    margin-bottom: 40px;
    display: block;
}

/* 开屏页 */
.intro-text h1 {
    font-size: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    
    /* Raleway + 思源黑体, 400粗细, 纯黑 */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    color: #000;
    line-height: 1.2;  /* 行高 */
}

.intro-text p {
    font-size: 16px;
    line-height: 2;
    max-width: 600px;
    margin: 0 auto 40px;
    
    /* Light 300, 纯黑 */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 300;
    
    /* 之前是 #666，现在改为 #000 */
    color: #000; 
    line-height: 1.2;   /* 行高 */
}

.click-hint {
    font-size: 12px;
    letter-spacing: 1px;
    animation: pulse 2s infinite;
    
    /* Thin 100, 纯黑 */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 100;
    color: #000; 
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 默认在电脑上隐藏手机社交图标 */
.mobile-social {
    display: none;
}
/* PC端隐藏移动版语言栏 */
.mobile-lang {
    display: none;
}
/* 默认情况 (PC端)：隐藏手机轮播 */
.mobile-slider {
    display: none;
}


/* ============================
   2. 导航栏 (中文版)
   ============================ */
.navbar {
    display: flex;
    align-items: center;
    height: var(--nav-height);
    padding: 0 var(--page-gap) 5px var(--page-gap); /*上、右、下、左*/
    background-color: var(--bg-color);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.logo a {
    text-decoration: none;
    color: #000;
    font-size: 28px;
    /* 使用 Raleway 字体 + Regular 400 字重 */
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
}

/* 中间菜单 - 靠右对齐 */
.nav-center {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto; /* 推到右边 */
    margin-right: 30px;
}

.divider {   /* 调整竖线 */
    font-weight: 300; /* 宽度 */
    color: #000;
    font-size: 15px; /* 长度 */
    display: inline-block; /* 必须加这行，下面的拉伸才生效 */
    transform: scaleY(1.8); /* 表示拉长倍数 */
    margin-top: -2px;
}

/* 1. 默认设置 (中文版) */
.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    /* 增加中文的间距 */
    gap: 75px; 
}

/* 2. 英文版专用设置 (针对 body 有 lang-en 的页面) */
body.lang-en .nav-links {
    /* 英文单词比较长，所以间距要小一点 */
    gap: 57.5px;
}

/* 1. 字体设置 (中文版链接) */
.nav-links li a {
    text-decoration: none;
    color: #000; /* 始终纯黑 */
    font-size: 16px;
    font-family: 'Noto Sans SC', sans-serif;
    
    /* 引用上面定义的变量 */
    font-weight: var(--nav-weight-default); 
    
    text-transform: uppercase;
    transition: none;
}

/* 2. 悬停效果 */
.nav-links li a:hover {
    font-weight: var(--nav-weight-hover); 
}

/* 3. 选中效果 */
/* 注意：这里通过 .active 类来控制 */
.nav-links li a.active {
    font-weight: var(--nav-weight-active) !important;
    color: #000;
}

/* 右侧语言 */
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
}

.lang-switch {
    display: flex;
    align-items: center;
}

/* 语言切换按钮 (中文) */
.lang-btn {
    text-decoration: none;
    color: #000;
    font-size: 13px;
    line-height: 1;
    padding: 6px 12px;
    display: inline-block;
    transition: none;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: var(--nav-weight-default);
}

.lang-btn:hover {
    font-weight: var(--nav-weight-hover);
}

.lang-btn.active {
    font-weight: var(--nav-weight-active);
}

.burger { display: none; }

/* ============================
   导航栏——英文版 (仅当 body 有 lang-en 类时生效)
   ============================ */

/* 1. 导航栏菜单 */
body.lang-en .nav-links li a {
    font-family: 'Raleway', sans-serif;
    color: #000;
    font-weight: var(--nav-weight-default); /* 100 */
    
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: capitalize;
    transition: none;
}

body.lang-en .nav-links li a:hover {
    font-weight: var(--nav-weight-hover); /* 300 */
}

/* 英文版选中态 */
body.lang-en .nav-links li a.active {
    font-weight: var(--nav-weight-active) !important; /* 500 */
}

/* 2. 语言切换按钮 (英文版上下文) */
body.lang-en .lang-btn {
    font-family: 'Raleway', sans-serif;
    font-weight: var(--nav-weight-default);
    color: #000;
}

body.lang-en .lang-btn:hover {
    font-weight: var(--nav-weight-hover);
}

body.lang-en .lang-btn.active {
    font-weight: var(--nav-weight-active);
}

/* ============================
   3. 首页轮播 (内补白版 - 完美渐变)
   ============================ */
main {
    margin-top: var(--nav-height);
}

.hero-wrapper {
    width: 100%;
    height: calc(100vh - var(--nav-height));
    
    display: grid;
    grid-template-columns: 1fr 1fr; 
    
    /* 物理缝隙永远为 0 */
    gap: 0; 
    padding: 0 var(--page-gap) 0 var(--page-gap); /* padding: [上] [右] [下] [左]; */
    box-sizing: border-box;
}

.hero-col {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* --- 每一项的样式 --- */
.item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    
    opacity: 0; 
    background-color: var(--bg-color); /* 确保缝隙是白色的 */
    z-index: 0;

    /* 🔴 改动2：默认情况下，给内部加 padding 来模拟缝隙 */
    box-sizing: border-box; 
}

/* 左侧列的普通项目：右边留 10px 白 */
.left-col .item {
    padding-right: 10px; 
}

/* 右侧列的普通项目：左边留 10px 白 */
.right-col .item {
    padding-left: 10px;
}

/* 🔴 改动3：如果是全景图 (pano)，把 padding 归零 */
/* 这样缝隙就消失了，且因为是在 .item 上，会随 opacity 一起淡入淡出 */
.left-col .item.pano {
    padding-right: 0;
}
.right-col .item.pano {
    padding-left: 0;
}


/* --- 激活状态 --- */
.item.active {
    opacity: 1;
    z-index: 10;
}

/* 下面的 img-box 等保持不变... */
.project-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

.img-box {
    width: 100%;
    height: var(--img-ratio);
    overflow: hidden;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.text-box {
    height: calc(100% - var(--img-ratio));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 15px;
}

.text-box h3 {
    font-size: 15px;
    text-transform: capitalize;
    letter-spacing: 1.5px;
    margin-bottom: 5px;

    /* 字体+字重500+纯黑 */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 500;
    color: #000;
}

.text-box p {
    font-size: 12px;
    /* 字体+字重300+纯黑 */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 300;
    color: #000;
}

/* ============================
   Lightbox (灯箱) - 全局通用样式
   ============================ */

.lightbox {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000; 
    
    /* 🔴 核心修改：背景改为灰白色，带一点点透明 */
    /* rgba(245, 245, 245, 0.95) = 非常浅的灰白，几乎不透 */
    /* 如果想要纯白，改成 rgba(255, 255, 255, 0.95) */
    background-color: rgba(245, 245, 245, 0.98);
    
    display: none;
    flex-direction: column; 
    justify-content: center; 
    align-items: center;     
}

/* ============================
   Lightbox 左右切换箭头
   ============================ */
.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    font-size: 40px;
    font-family: 'Raleway', sans-serif; /* 保持字体一致 */
    font-weight: 100; /* 极细 */
    color: #000;
    
    background: none;
    border: none;
    cursor: pointer;
    padding: 20px; /* 增加点击区域 */
    z-index: 2002; /* 必须比图片层级高 */
    user-select: none; /* 防止双击选中 */
    transition: opacity 0.3s, visibility 0.3s; /* 增加 visibility 过渡 */
}

/* 当箭头不可用时，直接隐藏 */
.lightbox-btn.disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 禁止点击 */
}

.lightbox-btn:hover {
    opacity: 0.6;
}

.lightbox-btn.prev {
    left: 20px;
}

.lightbox-btn.next {
    right: 20px;
}

/* --- 上下项目切换按钮 --- */
.project-switch-btn {
    /* 取消绝对定位，让它们占据真实空间 */
    position: relative; 
    transform: none; 
    left: auto;
    top: auto;
    bottom: auto;
    
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #000;
    cursor: pointer;
    z-index: 2002;
    padding: 10px 20px;
    text-transform: uppercase;
    transition: all 0.3s;
    
    background-color: transparent; /* 不需要背景色了，因为不压图 */
    border-radius: 0;
}

.project-switch-btn:hover {
    /* 简单的加粗或下划线效果，不再变黑底白字 */
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* 上一个项目按钮 */
.switch-prev {
    /* 🔴 Flex 排序：排在最上面 */
    order: 1; 
    margin-bottom: 15px; /* 给图片留点空隙 */
}

/* 下一个项目按钮 */
.switch-next {
    /* 🔴 Flex 排序：排在最下面 */
    order: 3; 
    margin-top: 15px; /* 给图片留点空隙 */
}

/* 如果没有上/下一个项目，隐藏按钮 */
.project-switch-btn.hidden {
    display: none;
}

/* 灯箱里的大图 */
.lightbox-content {
    /* 🔴 Flex 排序：排在中间 */
    order: 2;
    
    max-width: 90%;
    /* 🔴 限制高度，留出空间给上下按钮 */
    /* 100vh - 100px 大约是减去上下按钮和留白的高度 */
    max-height: calc(100vh - 120px); 
    
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); 
    animation: zoomIn 0.3s ease-out;
}

.lightbox-btn:hover { opacity: 0.6; }
.lightbox-btn.prev { left: 30px; } /* 稍微往里一点 */
.lightbox-btn.next { right: 30px; }
.lightbox-btn.disabled { opacity: 0; visibility: hidden; pointer-events: none; }

/* 关闭按钮 (X) */
.close-btn {
    position: absolute;
    top: 30px;
    right: 40px;
    
    /* 🔴 核心修改：因为背景是白的，X必须是黑的 */
    color: #000; 
    
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s;
    z-index: 2001;
}

.close-btn:hover {
    /* 悬停时变浅一点的灰 */
    color: #666; 
}

/* ============================
   网站底部 ICP 备案号 (全屏与滚动智能适配版)
   ============================ */

/* 1. 通用基础样式 */
.icp-footer {
    width: 100%;
    text-align: center;
    z-index: 1000; 
}

/* 2. 针对首页 (全屏无滚动)：悬浮在屏幕最底部 */
body.home-page .icp-footer {
    position: fixed;      /* 强制悬浮 */
    bottom: 15px;         /* 距离屏幕最底部的距离 */
    left: 0;
    background-color: transparent; /* 首页保持透明，不遮挡大图 */
    pointer-events: auto; /* 确保可以被点击 */
}

/* 3. 针对其他页面 (如剧目、幕后等有滚动条的页面)：正常排在页面最下方 */
body:not(.home-page) .icp-footer {
    position: relative;
    background-color: var(--bg-color); /* 白底 */
    padding: 30px 0 20px 0; 
    margin-top: 20px;
}

/* 字体与链接样式 */
.icp-footer a {
    font-size: 12px;
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 300;
    color: #999;          /* 浅灰色，保持高级感和低调 */
    text-decoration: none;
    transition: color 0.3s;
    letter-spacing: 1px;
}

.icp-footer a:hover {
    color: #000;          /* 鼠标悬停变黑 */
}

/* 移动端微调：如果是手机，字号可以稍微小一点防拥挤 */
@media screen and (max-width: 768px) {
    .icp-footer a {
        font-size: 11px;
    }
    body.home-page .icp-footer {
        bottom: 10px;     /* 手机首页稍微靠下一点 */
    }
}

/* 简单的放大动画 */
@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ============================
   4. 移动端适配 (Mobile)
   ============================ */
@media screen and (max-width: 768px) {
    
    /* 1. 隐藏不需要显示的 PC 端元素 */
    .nav-right, 
    .divider { 
        display: none; 
    }

    /* ============================
       开屏页：移动端专属调整
       ============================ */

    .intro-content {
        padding-left: 0 !important;  
        padding-right: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* ------ A. 中文部分 (Chinese) ------ */

    /* [中文标题组] 独立控制 */
    .cn-block div { 
        /* =========== 🔴 中文标题左右缩进 =========== */
        padding-left:  30px; 
        padding-right: 30px;
        
        /* 标题组距离下方正文的距离 */
        margin-bottom: 30px !important; 
    }
    .cn-block div h1:nth-of-type(1) { margin-bottom: 5px !important; }

    /* [中文正文] 独立控制 */
    .cn-block p.cn {
        /* =========== 🔴 中文正文左右缩进 (可与标题不同) =========== */
        padding-left:  30px; 
        padding-right: 30px;
    }
    /* 正文行间距微调 (保持不变) */
    .cn-block p.cn:nth-of-type(1) { margin-bottom: 10px !important; }
    .cn-block p.cn:nth-of-type(2) { margin-bottom: 10px !important; }
    .cn-block p.cn:nth-of-type(3) { margin-bottom: 10px !important; }
    .cn-block p.cn:nth-of-type(4) { margin-bottom: 10px !important; }
    .cn-block p.cn:nth-of-type(5) { margin-bottom: 10px !important; }


    /* ------ B. 英文部分 (English) ------ */

    /* 控制【中文块】和【英文块】之间的大距离 */
    .cn-block {
        margin-bottom: 60px !important;
    }
    /* [英文标题组] 独立控制 */
    .en-block div {
        /* =========== 🔴 英文标题左右缩进 =========== */
        padding-left:  30px;
        padding-right: 30px; 
        margin-bottom: 20px !important;
    }

    /* [英文正文] 独立控制 */
    .en-block p.en {
        /* =========== 🔴 英文正文左右缩进 (可与标题不同) =========== */
        padding-left:  30px;
        padding-right: 30px;
    }
    /* 英文正文行间距微调  */
    .en-block p.en:nth-of-type(1) { margin-bottom: 5px !important; }
    .en-block p.en:nth-of-type(2) { margin-bottom: 5px !important; }
    .en-block p.en:nth-of-type(3) { margin-bottom: 5px !important; }
    .en-block p.en:nth-of-type(4) { margin-bottom: 5px !important; }
    .en-block p.en:nth-of-type(5) { margin-bottom: 5px !important; }
    .en-block p.en:nth-of-type(6) { margin-bottom: 70px !important; }

    /* 控制【中文块】和【英文块】之间的大距离 */
    .cn-block {
        margin-bottom: 20px !important;
    }

    /* 1. 中文标题字体 (Mithyā 源自...) */
    .intro-text h1 {
        /* 修改这里调整标题字号 */
        font-size: 20px !important; 
        
        /* 行高：数字越大，行与行之间越松散 */
        line-height: 1.4 !important; 
    }

    /* 2. 中文正文字体 (它指向...) */
    .cn-block p.cn {
        /* 修改这里调整中文正文字号 */
        font-size: 14px !important; 
        
        line-height: 1.8 !important;
    }

    /* 3. 英文正文字体 (Mithyā originates...) */
    .en-block p.en {
        /* 修改这里调整英文正文字号 */
        font-size: 13px !important; 
        
        line-height: 1.6 !important;
    }

    /* 4. 底部点击提示 (CLICK TO ENTER) */
    .click-hint {
        /* 修改这里调整提示语字号 */
        font-size: 11px !important; 
    }
    /* ============================================ */

    /* 2. 导航栏容器：只负责让 Logo 居中 */
    .navbar {
        justify-content: center; /* 核心：让内部唯一的流元素(Logo)居中 */
        padding: 0 20px; /* 减小左右留白 */
    }

    /* 3. 中间菜单容器 (让它隐身) */
    /* 我们不能 display:none 它，因为 nav-links 在里面 */
    /* 但我们可以把它的宽度设为 0，防止它把 Logo 挤歪 */
    .nav-center {
        width: 0;
        margin: 0;
        padding: 0;
        position: static; /* 解除定位限制 */
    }

    /* 4. 汉堡菜单 (强制钉在右边) */
    .burger {
        display: block;
        cursor: pointer;
        z-index: 1001; /* 保证层级最高，能点到 */
        
        /* 🔴 核心布局：绝对定位 */
        position: absolute;
        right: 20px; /* 距离右边的距离 */
        top: 50%;
        transform: translateY(-50%); /* 垂直居中 */
    }

    /* 汉堡线条 */
    .burger div {
        width: 24px;
        height: 2px; /* 手机上细一点更精致 */
        background-color: var(--primary-color);
        margin: 5px;
        transition: all 0.3s ease;
    }

     /* 5. 侧滑菜单 (改为半屏 + 阴影) */
    .nav-links {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        
        /* 保持原宽度不变 */
        width: 35%; 
        min-width: 200px; 
        
        background-color: #fff;
        box-shadow: -5px 0 20px rgba(0,0,0,0.1); 
        
        display: flex;
        flex-direction: column;

        /* 1. 水平居中：让内部的文字链接居中显示 */
        align-items: center; 
        
        /* 2. 垂直对齐保持不变：依然是从顶部开始 */
        justify-content: flex-start; 

        /* 3. 顶部距离保持 120px 不变 */
        padding-top: 120px; 

        /* 4. 去掉左侧内边距 (为了保证绝对居中) */
        padding-left: 0;

        gap: 30px; 
        
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1); 
        z-index: 999;
    }

    /* A. 中文版  */
    .nav-links li a {
        font-size: 18px; 
        
        /* 字体：中文黑体 */
        font-family: 'Noto Sans SC', sans-serif;
        
        /* 粗细：未选中用 300 (PC默认) */
        font-weight: var(--nav-weight-default); 
        
        color: #000;
        text-transform: uppercase;
        transition: font-weight 0.2s ease;
    }

    /* 中文版选中态 */
    .nav-links li a.active {
        /* 粗细：选中用 500 (PC高亮) */
        font-weight: var(--nav-weight-active) !important;
    }

     /* B. 英文版 (当 body 有 lang-en 类时) */
    body.lang-en .nav-links li a {
        /* 字体：英文 Raleway */
        font-family: 'Raleway', sans-serif;
        
        /* 粗细：未选中用 300 */
        font-weight: var(--nav-weight-default);
        
        letter-spacing: 1px; /* 英文加一点字间距更好看 */
        text-transform: capitalize;
    }

    /* 英文版选中态 */
    body.lang-en .nav-links li a.active {
        font-weight: var(--nav-weight-active) !important;
    }

    /* 移动端语言切换样式 */
    .mobile-lang {
        display: flex;
        
        /* 改为居中对齐 */
        justify-content: center; 
        align-items: baseline; 
        gap: 30px; 
        margin-top: 20px; 
        padding-top: 30px; 
        border-top: 1px solid #eee; 
        
        width: 100%; 
        padding-left: 0; 
    }

    .mobile-lang a {
        text-decoration: none;
        color: var(--accent-color); /* 默认灰色 */
        font-size: 18px;
        
        /* 字体：英文用 Raleway，中文回退到 Noto Sans SC */
        font-family: 'Raleway', 'Noto Sans SC', sans-serif;
        
        /* 粗细：未选中 300 */
        font-weight: var(--nav-weight-default);
        
        transition: color 0.3s, font-weight 0.3s;
        line-height: 1; 
    }

    .mobile-lang a.active {
        color: var(--primary-color); /* 选中变黑 */
        
        /* 粗细：选中 500 */
        font-weight: var(--nav-weight-active);
    }

      /* 6. 遮罩层 (防止误触背景) */
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        /* 半透明黑色，让用户知道“后面不能点” */
        /* 如果你想要完全透明（看不见），把 0.5 改成 0 */
        background-color: rgba(0,0,0,0); 
        
        z-index: 998; /* 关键：在菜单(999)下面，但在网页(100)上面 */
        
        /* 默认隐藏 */
        opacity: 0;
        visibility: hidden; 
        transition: all 0.3s ease;
    }

    /* 激活状态 */
    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* 菜单激活状态 */
    .nav-active { 
        transform: translateX(0%); 
    }

    /* 移动端底部社交栏样式 */
    .mobile-social {
        position: absolute; /* 绝对定位 */
        bottom: 60px;       /* 距离底部的距离 */
        left: 0;
        width: 100%;        /* 占满菜单宽度 */
        
        display: flex;
        justify-content: center; /* 水平居中 */
        gap: 30px; /* 图标之间的间距 */
    }

    /* 控制移动端社交图标图片的大小 */
    .mobile-icon-img {
        width: 24px;   /* 🔴 设置图标宽度，建议 20px - 24px */
        height: 24px;  /* 🔴 高度保持一致 */
        object-fit: contain; /* 保证图片按比例缩放，不会变形 */
        display: block;
    }

    /* 微调链接容器，确保垂直居中 */
    .mobile-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s;
    }
    
    .mobile-social a:hover {
        opacity: 0.6;
    }

    /* 汉堡变叉叉动画 */
    .toggle .line1 { transform: rotate(-45deg) translate(-5px, 5px); }
    .toggle .line2 { opacity: 0; }
    .toggle .line3 { transform: rotate(45deg) translate(-5px, -5px); }
}

/* 手机端专属轮播图 */
@media screen and (max-width: 768px) {
    /* 灯箱 */
    .lightbox-btn {
        font-size: 30px;
        padding: 10px;
    }
    .lightbox-btn.prev { left: 10px; }
    .lightbox-btn.next { right: 10px; }

     .lightbox-content {
        /* 限制图片高度，给上下按钮留出空间 */
        max-height: 80vh; 
    }
    .project-switch-btn {
        font-size: 12px;
        padding: 5px 15px;
    }
    .switch-prev { top: 15px; }
    .switch-next { bottom: 15px; }

    /* 1. 隐藏所有灯箱按钮 (左右箭头 + 上下项目切换) */
    .lightbox-btn, 
    .project-switch-btn {
        display: none !important;
    }
    
    /* 2. 确保灯箱内容区域没有多余的滚动条，方便滑屏 */
    .lightbox {
        touch-action: none; /* 这是一个新属性，告诉浏览器这里由我们自己接管触摸，防止页面跟着滚 */
    }
    
    /* 1. 隐藏电脑版 */
    .pc-slider {
        display: none !important;
    }

    /* 2. 显示手机版 */
    .mobile-slider {
        display: block;
        width: 100%;
        /* 手机端高度计算：全屏 - 导航栏 */
        height: calc(100vh - var(--nav-height));
        
        position: relative; /* 用于内部绝对定位 */
        overflow: hidden;
        
        /* 手机端的留白设置 (上 右 下 左) */
        padding: 0 0 0 0;
        box-sizing: border-box;
    }

    /* 3. 手机轮播单项样式 */
    .m-item {
        position: absolute;
        top: 0; /* 也就是 padding-top 的值 */
        left: 0;             /* 这里的 left 必须等于上面的 左padding，也就是 padding-left 的值 */
        
        /* 宽高要减去 padding 占用的空间 */
        width: calc(100%);       /* 这里的减数必须等于左padding + 右padding (20+20=40) */
        height: calc(100%);
        
        opacity: 0; /* 默认隐藏 */
        z-index: 0;
    }

    .m-item.active {
        opacity: 1;
        z-index: 10;
    }

    .m-item a {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: inherit;
    }

    /* 图片容器 */
    .m-img-box {
        width: 100%;
        height: 90%; /* 图片占 90% */
        overflow: hidden;
    }

    .m-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 竖图填满 */
    }

    /* 文字容器 */
    .m-text-box {
        height: 10%; 
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 15px;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* 项目标题 - 对齐 PC 端样式 */
    .m-text-box h3 {
        font-size: 16px; /* 移动端保持 16px 易读，样式对齐 PC */
        
        /* 字体组合：英文 Raleway + 中文黑体 */
        font-family: 'Raleway', 'Noto Sans SC', sans-serif;
        
        /* 粗细：400 (Regular) */
        font-weight: 400; 
        
        color: #000;
        text-transform: capitalize;
        margin-bottom: 5px;
    }

    /* 项目副标题 - 对齐 PC 端样式 */
    .m-text-box p {
        font-size: 12px;
        
        /* 字体组合 */
        font-family: 'Raleway', 'Noto Sans SC', sans-serif;
        
        /* 粗细：300 (Light) */
        font-weight: 300;
        
        /* 颜色：改为纯黑 (原为灰色 accent-color) */
        color: #000; 
    }
}