/* 图片灯箱（GLightbox 3.3.1）主题样式：由 public/include.php 在文章/页面载入，跟在 vendor/glightbox/3.3.1/glightbox.min.css 之后。
   原 Fancybox 3 的 void / ember 皮肤配色（assets/skin/*/skin.css 里的 .fancybox-* 规则，换库后已失效）在这里按 GLightbox 的类名重做：
   遮罩色/透明度、圆形半透明按钮与悬停色、页码字体、ember 图片圆角 14px。无皮肤时沿用 Fancybox 默认的深灰遮罩与半透明方块按钮。 */

/* ---------- 默认（无皮肤）---------- */
.glightbox-container .goverlay { background: #1e1e1e; opacity: .87; }
.glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose { background-color: rgba(30, 30, 30, .6); }
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gclose:hover { background-color: rgba(0, 0, 0, .8); }

/* 页码 “n / N”（对应 Fancybox 的 infobar，左上角；由 joe.post_page.js 写入文本） */
.joe-glb-counter {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	min-width: 44px;
	padding: 0 10px;
	line-height: 44px;
	font-size: 13px;
	color: #ccc;
	text-shadow: 0 0 2px rgba(0, 0, 0, .6);
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
.joe-glb-counter:empty { display: none; }

/* ---------- void 皮肤 ---------- */
html[data-skin=void] .glightbox-container .goverlay { background: #060409; opacity: .94; }
html[data-skin=void] .glightbox-clean .gprev,
html[data-skin=void] .glightbox-clean .gnext,
html[data-skin=void] .glightbox-clean .gclose { background-color: rgba(20, 12, 18, .72); border-radius: 50%; width: 44px; }
html[data-skin=void] .glightbox-clean .gprev:hover,
html[data-skin=void] .glightbox-clean .gnext:hover,
html[data-skin=void] .glightbox-clean .gclose:hover { background-color: var(--void-btn); color: #fff; }
html[data-skin=void] .joe-glb-counter { color: #fff; font-family: var(--void-mono); }

/* ---------- ember 皮肤 ---------- */
html[data-skin=ember] .glightbox-container .goverlay { background: var(--e-overlay); opacity: .96; }
html[data-skin=ember] .glightbox-clean .gprev,
html[data-skin=ember] .glightbox-clean .gnext,
html[data-skin=ember] .glightbox-clean .gclose { background-color: rgba(20, 8, 11, .6); border-radius: 50%; width: 44px; color: #fff; }
html[data-skin=ember] .glightbox-clean .gprev:hover,
html[data-skin=ember] .glightbox-clean .gnext:hover,
html[data-skin=ember] .glightbox-clean .gclose:hover { background-color: rgba(229, 40, 58, .75); }
html[data-skin=ember] .joe-glb-counter { color: #fff; font-family: var(--e-sans); }
html[data-skin=ember] .gslide-image img { border-radius: 14px; }