/* ------------------------------------------------------------------
 * 图片弹窗预览（图片浏览模块 galpop）
 *   标准（image）：图片弹窗显示，点击任意处即关闭
 *   漫画（comic）：右上角关闭按钮 + 上一张/下一张 + 滑动切换（跨按钮图集）
 * 复用旧站 .mask 的全屏遮罩（fixed + rgba 黑底），只补布局与控件样式。
 * ------------------------------------------------------------------ */

.galpop .wrap {
	display: block;
	/* 覆盖全局 .wrap{width:1440px}：弹层容器跟随视口全屏，否则窄屏时内容溢出、关闭按钮被推出屏外 */
	width: auto;
	max-width: none;
	height: 100%;
	position: relative;
	padding-top: 0;
}

.galpop .galpop-stage {
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	/* 两侧留出翻页箭头的位置（响应式收缩）；上下留少量呼吸空间 */
	padding: clamp(8px, 3vh, 40px) clamp(48px, 8vw, 110px);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
}

/* 标准弹窗（无箭头）：两侧只需少量留白，图片更贴近铺满 */
.galpop-image .galpop-stage {
	padding: clamp(8px, 3vh, 40px) clamp(10px, 3vw, 32px);
}

/* 图片自适应：object-fit:contain —— 宽或高必有一边铺满舞台，另一边等比留白（不裁切不变形） */
.galpop .galpop-stage img {
	width: 100%;
	height: 100%;
	-webkit-object-fit: contain;
	object-fit: contain;
	display: block;
	box-shadow: 0 10px 40px rgba(0,0,0,.6);
}

/* 右上角关闭按钮（× 用两条线画，悬停变主题紫色）——
   尺寸/位置全部 clamp 响应式，且不超出屏幕（原 translateX(50%) 会推出屏外一半） */
.galpop .galpop-close {
	position: absolute;
	right: clamp(10px, 3vw, 28px);
	top: clamp(10px, 4vh, 44px);
	width: clamp(44px, 7vw, 94px);
	height: clamp(44px, 7vw, 94px);
	z-index: 3;
	cursor: pointer;
}
.galpop .galpop-close::before,
.galpop .galpop-close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 38%;
	height: clamp(3px, 0.5vmax, 5px);
	background: #fff;
	border-radius: 2px;
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
	transition: background .2s;
}
.galpop .galpop-close::after {
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.galpop .galpop-close:hover::before,
.galpop .galpop-close:hover::after {
	background: #948dff;
}

/* 上一张 / 下一张（箭头用边框画，悬停变主题紫色）——尺寸/偏移响应式，始终留在屏内 */
.galpop .galpop-prev,
.galpop .galpop-next {
	position: absolute;
	top: 50%;
	width: clamp(40px, 6vw, 64px);
	height: clamp(72px, 14vh, 110px);
	margin-top: calc(clamp(72px, 14vh, 110px) / -2);
	z-index: 2;
	cursor: pointer;
}
.galpop .galpop-prev {
	left: clamp(6px, 1.5vw, 24px);
}
.galpop .galpop-next {
	right: clamp(6px, 1.5vw, 24px);
}
.galpop .galpop-prev::before,
.galpop .galpop-next::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(14px, 2.2vmax, 20px);
	height: clamp(14px, 2.2vmax, 20px);
	border-left: clamp(3px, 0.5vmax, 4px) solid #fff;
	border-bottom: clamp(3px, 0.5vmax, 4px) solid #fff;
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
	transition: border-color .2s;
}
.galpop .galpop-next::before {
	-webkit-transform: translate(-50%,-50%) rotate(-135deg);
	-ms-transform: translate(-50%,-50%) rotate(-135deg);
	transform: translate(-50%,-50%) rotate(-135deg);
}
.galpop .galpop-prev:hover::before,
.galpop .galpop-next:hover::before {
	border-color: #948dff;
}

/* 图注（标题 · 描述）：只有配了文案的图才显示 —— 脚本写入空串时 :empty 自动隐藏。
   pointer-events:none 保证「标准弹窗点击任意处关闭」不被图注遮挡。 */
.galpop .galpop-caption {
	position: absolute;
	left: 0; right: 0; bottom: clamp(8px, 2.5vh, 32px);
	z-index: 3;
	padding: 0 clamp(16px, 6vw, 110px);
	text-align: center;
	color: #fff;
	font-size: clamp(13px, 1.8vh, 17px);
	line-height: 1.6;
	text-shadow: 0 2px 10px rgba(0,0,0,.8);
	pointer-events: none;
}
.galpop .galpop-caption:empty {
	display: none;
}

/* 计数器（四格漫画页用：`当前 / 总数`）——弹窗里没这个节点时不生效。
   DOM 顺序为「计数器 → 图注」，两者都在底部时计数器贴底、图注抬高一行。 */
.galpop .galpop-counter {
	position: absolute;
	left: 0; right: 0; bottom: clamp(8px, 2.5vh, 32px);
	z-index: 4;
	text-align: center;
	color: rgba(255, 255, 255, .62);
	font-size: clamp(12px, 1.6vh, 14px);
	line-height: 1.2;
	pointer-events: none;
}
.galpop .galpop-counter:empty {
	display: none;
}
.galpop .galpop-counter:not(:empty) + .galpop-caption:not(:empty) {
	bottom: calc(clamp(8px, 2.5vh, 32px) + 24px);
}

/* 漫画弹窗：底部预留图注/计数器的位置（图片不会被文字压住） */
.galpop-comic .galpop-stage {
	padding-bottom: clamp(58px, 9vh, 96px);
}

/* 点击图片放大：class 由脚本切换 —— 原尺寸 + 纵向滚动（竖长漫画阅读） */
.galpop-comic.galpop-zoom .galpop-stage {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	overflow-x: hidden;
	overflow-y: auto;
}
.galpop-comic.galpop-zoom .galpop-stage img {
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	-webkit-object-fit: none;
	object-fit: none;
	margin: 0 auto;
}

/* 放大提示（漫画弹窗左上角小字） */
.galpop .galpop-hint {
	position: absolute;
	left: clamp(10px, 3vw, 28px);
	top: clamp(10px, 4vh, 44px);
	z-index: 3;
	color: rgba(255, 255, 255, .45);
	font-size: clamp(12px, 1.5vh, 14px);
	line-height: 1.4;
	pointer-events: none;
}
/* ------------------------------------------------------------------
 * 壁纸鉴赏弹层（mask1）自适应修复（图片浏览模块统一接入）
 * 旧样式问题（窄屏/高分辨率下）：
 *   ① .mask .wrap 继承全局 .wrap{width:1440px} → 容器溢出视口
 *   ② .ukpos li{height:650px} 固定高度 → 高图被裁/矮图铺不满
 *   ③ .mask .icons 关闭按钮 translateX(50%) → 被推出屏幕外一半，不可见
 * ------------------------------------------------------------------ */

/* 弹层容器跟随视口 */
.mask1 .wrap {
	width: auto;
	max-width: none;
	padding-top: 0;
}

/* 舞台：全屏居中，两侧留出箭头位置（响应式） */
.mask1 .ukpos {
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	padding: clamp(8px, 3vh, 40px) clamp(48px, 9vw, 110px);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* 轮播轨道撑满舞台 */
.mask1 .swiper_bz {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.mask1 .swiper_bz .swiper-wrapper,
.mask1 .swiper_bz .swiper-slide {
	height: 100%;
}

/* 壁纸图：一边铺满 + 等比 contain（横图铺宽、竖图铺高，不裁切） */
.mask1 .swiper_bz .swiper-slide {
	background-origin: content-box !important;
	-webkit-background-size: contain !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/* 关闭按钮：不再 translateX(50%)，改用 clamp 边距，尺寸/位置响应式 */
.mask1 > .wrap > .icons {
	right: clamp(10px, 3vw, 28px);
	top: clamp(10px, 4vh, 44px);
	width: clamp(44px, 7vw, 94px);
	height: clamp(44px, 7vw, 94px);
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	-webkit-background-size: 60% 60%;
	background-size: 60% 60%;
	z-index: 5;
}

/* 翻页箭头：贴舞台两侧、垂直居中（原 padding:0 100px 把箭头顶到 1440 容器外）
   ⚠ 旧站两个箭头的类名与位置是「反」的（style.css）：`.next` 在**左**（未旋转 ⇒ ❮），
   `.prev` 在**右**（rotate(180deg) ⇒ ❯）。所以两者**必须一边一个** ——
   曾经把 `.next` 也写成 `right`，结果两个按钮完全重叠（实测 rect 完全相同）。 */
.mask1 .ukpos .next,
.mask1 .ukpos .prev {
	left: auto;
	top: 50%;
	margin-top: calc(clamp(72px, 14vh, 110px) / -2);
	height: clamp(72px, 14vh, 110px);
	width: clamp(40px, 6vw, 64px);
	-webkit-background-size: 40% 40%;
	background-size: 40% 40%;
	z-index: 5;
}
.mask1 .ukpos .next {
	left: clamp(6px, 1.5vw, 24px);
}
.mask1 .ukpos .prev {
	right: clamp(6px, 1.5vw, 24px);
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* 「下载壁纸」浮层跟图片右下走 */
.mask1 .ukpos li a {
	right: 0;
	bottom: 0;
}