//* 1. 基础容器：解除宽度锁定 */
body, html {
    margin: 0;
    padding: 0;
    /* 恢复你指定的灰色背景 */
    background-color: #F5F5F5 !important;
    
    /* 以下所有原本逻辑保持不动 */
    overflow: auto !important; 
    
    /* 关键：去掉 width: 100%，允许由内部内容撑开宽度 */
    width: auto !important; 
    height: 100%;
    
    /* 恢复缩放交互 */
    user-select: auto !important;
    -webkit-user-select: auto !important;
}

/* 2. 环形内容容器：强制横向延伸 */
.your-infinite-container { /* 请确保这里替换为您 HTML 中包裹所有画作的类名 */
    display: flex !important;
    flex-wrap: nowrap !important; /* 核心：禁止换行，强制所有图片排成一排 */
    
    /* 允许宽度根据图片数量无限延伸 */
    width: max-content !important; 
    
    /* 确保溢出部分不被裁剪 */
    overflow: visible !important; 
}

/* 3. 图片定义：防止被手机浏览器强行缩小 */
.your-infinite-container img {
    /* 不要使用 max-width: 100%，否则图片会缩到屏幕大小 */
    flex-shrink: 0; /* 防止图片被挤压变形 */
}

/* ============================================================
   2. 顶部标题区域
   ============================================================ */
.main-header {
    position: absolute;
    top: 50px;
    width: 100%;
    text-align: center;
    z-index: 100;
}

.main-header h1 {
    margin: 0;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: 15px;
    text-transform: uppercase;
    line-height: 1.1;
}

.main-header .name { color: #122139; }
.main-header .studio { color: #D47B00; margin-left: 20px; }

.header-url { margin-top: 12px; }
.header-url a {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: 300;
    transition: color 0.3s ease;
}
.header-url a:hover { color: #D47B00; }

/* ============================================================
   3. 画廊展示核心区 (Viewport & Track)
   ============================================================ */

/* 飞行层：用来装大图的次元空间 */
#gallery-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 5000 !important; /* 关键：确保它在按钮之下 */
    background: rgba(0, 0, 0, 0); 
    backdrop-filter: blur(0px);
    transition: background 0.6s ease, backdrop-filter 0.8s ease;
}

#gallery-overlay.active {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    pointer-events: auto !important;/* 拦截发往背景图的点击 */
}

.flying-img {
    position: fixed;
    pointer-events: auto; /* 关键：让飞出来的大图可以被点击 */
    cursor: zoom-out;
    object-fit: contain;
    z-index: 1000001;
    /* 物理高清渲染 */
    max-width: none !important;
    max-height: none !important;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}














#viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
   overflow: hidden !important;   /* 核心：禁止溢出撑开 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* 强制内容始终锁死在屏幕正中心 */
    cursor: grab; 
}

#viewport:active { cursor: grabbing; }

/* 当背景被锁定时，强制背景内的图片不接受任何鼠标信号 */
.viewport.locked {
    cursor: default !important;
    pointer-events: none !important;
}






#wall-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    height: 100%;
    
    /* 强制开启硬件加速，解决闪耀问题 */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* 关键：确保 flex 容器不会因为太长而试图“优化”内部空间 */
    min-width: max-content; 
	/* 告诉浏览器不要在跳转瞬间尝试进行位移补间动画 */
    transition: none !important; 
    /* 保持亚像素精度 */
    -webkit-font-smoothing: subpixel-antialiased;	
	
}
.wall-item {
    flex: 0 0 auto;
    width: auto; /* 必须是 auto，让盒子紧贴画框边缘 */
    
    /* 这里是核心：既然你喜欢用 margin，那就只留这一个 */
    /* 120px 是你要求的增加 1/2 后的间距 */
    margin: 0 80px; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 !important;
    border: none !important;
    transition: none !important;
    transform: translateY(-22px) !important;
}
	
	
	
}

.wall-item img {
    display: block;
    width: auto; 
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
       opacity: 1 !important;
	
	/* 基础显示/消失时间设为 0.5 秒 */
    transition: opacity 0.5s ease-in-out !important;
    
    /* 核心：当你点击“退回”时，给它 0.5 秒的延迟，等大图先消失 */
    transition-delay: 0.5s !important; 
    
    
	
	margin: 0 auto !important;   /* 强制水平居中，不准向左或向右偏 */
	
}

/* ============================================================
   4. 底部导航控制中心
   ============================================================ */
.bottom-nav-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center !important; 
    gap: 60px !important; 
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;

    /* --- 核心修改点：确保它在遮罩层之上 --- */
    /* 我们把 z-index 统一设为 100000，只要它比 #gallery-overlay 的 5000 高就行 */
    z-index: 100000 !important; 
    
    /* 这一行保持不变：容器本身不挡鼠标，让内部按钮去接收点击 */
    pointer-events: none !important; 
}

/* 补充：确保内部按钮是激活的，这一步非常重要 */
.bottom-nav-container .nav-btn, 
.bottom-nav-container #info-btn,
.bottom-nav-container .right-links .nav-btn {
    pointer-events: auto !important; 
}

.bottom-nav-container .nav-btn, 
.bottom-nav-container #info-btn,
.bottom-nav-container .right-links .nav-btn {
    pointer-events: auto !important; 
}

.nav-group, .center-action, .right-links {
    display: flex !important;
    gap: 15px !important; /* 缩小按钮之间的距离 */
    pointer-events: auto !important;
}

.nav-btn {
    background: transparent;
    border: none;
    color: #888;
    font-size: 11px;
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.3s;
}
.nav-btn:hover { color: #122139; }

#info-btn {
    background: #122139;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 3px;
    cursor: pointer;
}

#info-btn:hover { background: #6C6B6B !important; }

/* ============================================================
   5. ART INFO 信息面板 (已修复水平对齐)
   ============================================================ */
#info-panel {
    position: fixed !important;
    left: 50% !important;
    bottom: 75px !important;
    transform: translateX(-50%) !important;
    width: 360px !important; /* 稍微加宽一点点 */
    background: white !important;
    padding: 20px 35px !important;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    z-index: 9999;
    box-sizing: border-box !important;
}

.info-hidden { display: none !important; }

#info-panel .modal-close {
    position: absolute;
    top: 12px;
    right: 15px;
    background: none;
    border: none;
    font-size: 22px;
    color: #CCC;
    cursor: pointer;
}

#art-title {
    margin-top: 2px !important;
    font-size: 14px;
    /*letter-spacing: 2px;*/
    color: #122139;
    /*text-transform: uppercase;*/
    text-align: center;
    /*display: inline-block !important; */
    width: 100%; 
    /*text-decoration: underline !important;*/
    text-underline-offset: 8px !important; 
    /*padding-bottom: -44px;*/
    border: none !important;
}

/* 核心修复：锁定水平对齐的网格 */
.info-grid {
    display: grid !important;
    /* 强制轨道宽度：标签 85px | 数据 1fr | 标签 85px | 数据 1fr */
    grid-template-columns: 25px 1fr 25px 1fr !important;/*调整每一单元中左右两组的间隔距离*/
    column-gap: 32px !important;/*调整单元之间的间隔距离*/
    align-items: center !important;
 background-image: linear-gradient(to bottom, transparent 49%, #EEE 50%, #EEE 51%, transparent 52%) !important;
background-size: 80% 25px !important; /* 建议先改成30px或40px，20px太密了可能看不清 */
background-repeat: repeat !important;  /* 改成 repeat */
    border-top: 3px solid #eee !important;/*在所有数据的最上方加水平线*/
    padding-top: 4px !important;/*所有数据上方的空间调整*/
	/* --- 控制上下移动的关键 --- */
    /* 第一个参数 0 是左右偏移（不动） */
    /* 第二个参数 10px 是上下偏移（正数向下移，负数向上移） */
    background-position: 0 11px !important; /* 所有线条上下移动 */
	
	
	
}

.info-grid span {
    color: #999 !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    /*text-transform: uppercase !important;*/
    text-align: left !important;
    line-height: 25px !important; /* 对齐横线 */

	
}

.info-grid strong {
    color: #122139 !important;
    font-size: 10px !important;
    text-align: right !important;
    line-height: 25px !important;
    font-weight: 600 !important;
}


#info-panel .close-btn {
    right: 15px !important;  /* 减小数值，让它向右边靠拢 */
    top: 10px !important;    /* 减小数值，让它向上边靠拢 */
    font-size: 28px !important; /* 稍微缩小一点，更符合小窗口比例 */
}









#studio-panel .close-btn:hover {
    color: #ff0000 !important;
}






/* ============================================================
   6. 其他弹窗样式
   ============================================================ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { background: white; width: 45vw; height: 90vh; border-radius: 8px; position: relative; display: flex; flex-direction: column; overflow: hidden; }


 /* 以下是右边底部的3个按钮的编码 */

/* 让 Studio 专属房间占满 95% 的屏幕 */
#studio-panel.custom-modal {
    position: fixed;
    top: 47%; left: 50%;
    transform: translate(-50%, -50%);
    
    /* 窗口开大：宽和高都占到屏幕的 95% */
    /*width: 45vw !important; 
    height: 80vh !important; */
    
   
    z-index: 1000000; /* 确保在最顶层 */
    box-shadow: 0 0 100px rgba(0,0,0,0.5); /* 加重阴影，让它像悬浮在墙上的大画框 */
    
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important; /* 隐藏外层滚动条 */
    
	
	width: 40.5vw !important;
    height: 90vh !important;
    
  
    
   /* 核心数据：装裱衬托面 */
    /* 顺序是：顶部 80px (留出写字位置), 左右 40px, 底部 40px */
    padding: 80px 40px 40px 40px !important; 

    /* 彻底切除边线：不要 border，不要 outline */
    border: none !important; 
    outline: none !important;

    /* 淡淡的阴影，让画框浮起来 */
    box-shadow: 0 30px 60px rgba(0,0,0,0.12) !important;
    

    /* 必须加这一句，否则衬托面会把盒子撑变形 */
    box-sizing: border-box !important; 

    background: #ffffff;
    /* 核心数据 C：强制让里面的网页不要溢出这层衬托面 */
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}
	

/* 内部 iframe 必须死死撑满 */
#studio-panel iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
	
}

/* 强制把那个该死的 X 钉在右边 */
.close-btn {
    position: absolute !important;
    left: auto !important;   /* 这一句最关键：彻底废掉左边的定位 */
    right: 40px !important;  /* 强制钉在右边 40px 的位置 */
    top: 25px !important;    /* 钉在顶部 25px 的位置 */
    
    display: block !important;
    width: auto !important;
    z-index: 999999 !important; /* 确保它浮在最面上 */
    
    font-size: 35px !important;
    color: #BBB !important;
	
	/* 如果你想让它更有交互感，可以加个悬停变色 */
    transition: color 0.2s !important;
	
    background: none !important;
    border: none !important;
    cursor: pointer !important;
	
	
	
	
}

/* 鼠标指上去时的颜色 */
.close-btn:hover {
    color: #ff0000 !important;  /* 比如：鼠标一指就变红，提醒可以关闭 */
}


.hidden {
    display: none !important; /* 核心数据：这行代码保证它初始是消失的 */
}

/* 文字的精确定位 */
.modal-title {
    position: absolute !important;
    left: 50px !important;
    right: auto !important;
    top: 38px !important;
    font-size: 24px !important;
    z-index: 10000 !important;
}

/* 确保画心（iframe）不会乱跑 */


.gallery-container.locked, 
.viewport.locked {
    cursor: default !important;
    pointer-events: none !important; /* 核心：让鼠标“穿透”背景，不触发任何图片效果 */
}







@media screen and (max-width: 1024px) {
    body, html {
        /* 必须禁止原生滚动，否则手指划动时网页会上下乱飘 */
        overflow: hidden !important; 
        width: 100%;
        height: 100%;
        /* 注意：这里去掉了 position: fixed，防止坐标系乱掉 */
    }

    #viewport {
        width: 100vw !important;
        height: 100vh !important;
        position: relative;
        overflow: hidden;
        touch-action: none; /* 关键：禁止浏览器默认手势，把控制权全给 JS */
    }

    #wall-track {
        display: flex !important;       /* 强制横向排列 */
        flex-wrap: nowrap !important;   /* 绝对禁止换行 */
        width: max-content !important;  /* 宽度根据十几张画的总和自动延伸 */
        height: 100%;
        align-items: center;            /* 画作垂直居中 */
        will-change: transform;         /* 告诉浏览器这是动画层，提升流畅度 */
    }

    .wall-item {
        /* 强制每一站画的物理宽度，你可以根据需要改 300 或 350 */
        width: 300px !important; 
        flex: 0 0 300px !important;     /* 禁止被压缩，确保 JS 步长计算准确 */
        margin: 0 15px !important;      /* 画之间的间距 */
    }

    .gallery-img {
        width: 100% !important;
        height: auto !important;
        pointer-events: none;           /* 防止长按图片弹出系统菜单干扰滑动 */
	}	
		
 /* --- 3. 【重点：新增部分】仅针对弹窗开启上下滑动，不影响背景 --- */
    #studio-panel {
        /* 强制让弹窗在高度不够时可以滚动 */
        overflow-y: auto !important; 
        max-height: 95vh !important; /* 高度不超出屏幕 */
        
        /* 允许弹窗区域接收触摸信号，这样你才能划动它 */
        touch-action: pan-y !important; 
        pointer-events: auto !important;
        
        /* 针对 iOS 的平滑滚动 */
        -webkit-overflow-scrolling: touch;
    }
    
    /* 确保弹窗里的 iframe 也有足够空间 */
    #studio-panel iframe {
        min-height: 600px; /* 保证简历等内容能拉得很长 */
    }
	
	
	.bottom-nav-container {
        position: fixed !important;
        z-index: 2147483647 !important; /* 这是 CSS 能写的最大数字，确保它在最最最前面 */
        pointer-events: auto !important; /* 开启点击权限 */
    }

    .nav-btn, #info-btn {
        pointer-events: auto !important; /* 确保按钮本身是可点的 */
        cursor: pointer !important;
    }
	
	
	
	
	
	
	
}




/* 针对手机横屏或高度较小的设备 */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #studio-panel {
        /* 1. 强行限制弹窗高度，不能超出屏幕 */
        height: 90vh !important; 
        top: 5vh !important;
        transform: translateX(-50%) !important; /* 修正居中，去掉垂直偏移 */
        
        /* 2. 开启弹窗内部的独立滚动 */
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch;
    }

    /* 3. 针对弹窗内的内容容器（如果有的话） */
    .modal-content, iframe {
        height: 100% !important;
        min-height: 400px; /* 保证内部内容有足够空间展开 */
    }
}



/* 暴力复活底部所有点击事件 */
.bottom-nav-container, 
.bottom-nav-container *, 
.nav-btn, 
#info-btn {
    pointer-events: auto !important; /* 强制刺穿透明遮挡 */
    z-index: 9999999 !important;     /* 顶到最前面 */
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 去除手机点击时的蓝色阴影 */
}

/* 检查是否被遮罩层挡住 */
#gallery-overlay.active {
    /* 只有当遮罩层激活时才挡住背景，没激活时必须让开 */
    pointer-events: auto; 
}
#gallery-overlay:not(.active) {
    pointer-events: none; /* 没激活时，它必须是透明且可穿透的 */
}





/* 暴力全局锁定：管你是 JS 生成的还是 HTML 原有的，全部强制灰色 */
#viewport, 
#wall-track, 
.wall-item, 
.container,
html, 
body {
    background-color: #F5F5F5 !important;
}

/* 针对你 JS 里的遮罩层：防止它变白 */
#gallery-overlay {
    background-color: transparent !important; /* 没激活时必须透明 */
}

#gallery-overlay.active {
    background-color: rgba(245, 245, 245, 0.8) !important; /* 激活时是灰色半透明 */
}


/* 自定義 WORK INFO 按鈕字體顏色 */
#info-btn {
    color: #d5d5d5; /* 這裡換成您心儀的顏色 */
}