@charset "utf-8";
/*
	易菇网 · 图库详情页「多图浏览」增强样式  （/photo/show.php）
	原则（按用户要求）：只做三件事 ——
	  ① 图片下方多张小图
	  ② 看得见的「上一张 / 下一张」按钮
	  ③ 张数提示
	.jqslide 的外框（黑底 / 满宽 / padding-top:30px）、.pic（1220px 居中）、
	.big（min-height:600px）与主图缩放规则一律沿用 DESTOON 原版 jquery.slide.css，不做改动。
	DOM 结构与 static/script/jquery.slide.js 的交互逻辑全部沿用。
	作用域：.jqslide —— 全站仅 template/emushroomF/photo/show.htm 使用。
	版本：随模板内 <link ... ps.css?v=ps20261008c> 的 v 值手工维护。
*/

/* ============ ① 上一张 / 下一张：原版是两块不可见的半屏热区（只有自定义鼠标指针），
	这里用伪元素在热区上画出圆按钮，点击仍落在内部的 #prevbtn / #nextbtn 上，逻辑不变 ============ */
.jqslide .pic .prev::before,
.jqslide .pic .next::before {
	content: ''; position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	box-shadow: 0 6px 20px rgba(0,0,0,.35);
	transition: background .22s, transform .22s;
	pointer-events: none;
}
.jqslide .pic .prev::before { left: 22px; }
.jqslide .pic .next::before { right: 22px; }
.jqslide .pic .prev::after,
.jqslide .pic .next::after {
	content: ''; position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -8px;
	border-top: 3px solid #134F3C; border-right: 3px solid #134F3C;
	transition: border-color .22s;
	pointer-events: none;
}
.jqslide .pic .prev::after { left: 41px; transform: rotate(-135deg); }
.jqslide .pic .next::after { right: 41px; transform: rotate(45deg); }
.jqslide .pic .prev:hover::before,
.jqslide .pic .next:hover::before { background: #3DD68C; transform: scale(1.06); }
.jqslide .pic .prev:hover::after,
.jqslide .pic .next:hover::after { border-color: #FFFFFF; }

/* ============ ② 张数 + 键盘提示条（宽度与主图一致，黑底上用浅色字） ============ */
.jqslide .ps-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	width: 100%; max-width: 100%; margin: 0 auto; padding: 0 0 12px;
	font-size: 13.5px; color: rgba(255,255,255,.8);
}
.jqslide .ps-now .count_a {
	display: inline-block; min-width: 28px; padding: 1px 8px; margin: 0 3px;
	font-size: 15px; font-weight: 800; color: #12332A; text-align: center;
	background: #3DD68C; border-radius: 9px;
	box-shadow: 0 3px 10px rgba(0,0,0,.28);
}
.jqslide .ps-now b { color: #FFFFFF; font-weight: 800; }
.jqslide .ps-keys {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; color: rgba(255,255,255,.62);
}
.jqslide .ps-keys i {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; font-style: normal; font-size: 12px; font-weight: 700;
	color: #FFFFFF; background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.24); border-radius: 6px;
}

/* ============ ③ 缩略图：由原版「单行 + 拖动滚动条」改为自动换行，容器宽度与主图对齐 ============ */
.jqslide .plist { height: auto; min-height: 150px; position: relative; }
.jqslide .scd {
	width: 100%; max-width: 100%; height: auto; margin: 0 auto;
	overflow-y: auto; overflow-x: hidden;
	/* 小图超过 3 行时限高滚动，避免多图图集（最多 123 张）把页面拉过长 */
	max-height: 348px;
	scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
}
.jqslide .scd::-webkit-scrollbar { width: 8px; }
.jqslide .scd::-webkit-scrollbar-track { background: transparent; }
.jqslide .scd::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); border-radius: 4px; }
.jqslide .scd::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.44); }

.jqslide .plist ul {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
	gap: 10px;
	height: auto; overflow: visible;
	margin: 0 !important;			/* 原版用 margin-left 负值滚动，换行后不再需要 */
	user-select: none;
}
.jqslide .plist ul li {
	float: none; width: auto; padding: 0; margin: 0; position: relative;
	list-style: none;
}
.jqslide .plist li img {
	display: block;
	width: 132px; height: 99px; object-fit: cover;
	border-radius: 10px;
	background: #1A1A1A;
	border: 2px solid transparent !important;	/* 压掉 JS 写死的内联边框色 */
	transition: border-color .2s, box-shadow .2s, transform .2s;
	cursor: pointer;
}
.jqslide .plist li img:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.5); }
/* 当前图（由模板末尾一小段脚本据 .count_a 同步） */
.jqslide .plist li img.ps-on {
	border-color: #3DD68C !important;
	box-shadow: 0 0 0 3px rgba(61,214,140,.28);
}
/* 序号角标 */
.jqslide .plist ul li span {
	display: block !important;
	position: absolute; left: 6px; top: 6px; z-index: 2;
	margin: 0; padding: 1px 7px;
	font-size: 11px; line-height: 18px; color: #FFFFFF;
	background: rgba(0,0,0,.62);
	border-radius: 8px; opacity: 1;
	pointer-events: none;
}
/* 原版的两侧小箭头与拖动滚动条在新布局下不再需要 */
.jqslide .scb,
.jqslide .scl,
.jqslide .scr { display: none !important; }

/* ============ ④ 单图图集：不显示翻页按钮与计数条（缩略图区按原版保留） ============ */
.jqslide.jq-single .ps-bar,
.jqslide.jq-single .pic .prev,
.jqslide.jq-single .pic .next { display: none; }

/* ============ ⑤ 响应式（小屏时缩略图与容器同步收窄） ============ */
@media (max-width: 1240px) {
	.jqslide .plist li img { width: 118px; height: 89px; }
}
@media (max-width: 900px) {
	.jqslide .pic .prev::before,
	.jqslide .pic .next::before { width: 44px; height: 44px; margin-top: -22px; }
	.jqslide .pic .prev::before { left: 10px; }
	.jqslide .pic .next::before { right: 10px; }
	.jqslide .pic .prev::after,
	.jqslide .pic .next::after { width: 12px; height: 12px; margin-top: -6px; border-width: 2px 2px 0 0; }
	.jqslide .pic .prev::after { left: 24px; }
	.jqslide .pic .next::after { right: 24px; }
	.jqslide .ps-keys { display: none; }
	.jqslide .plist ul { gap: 8px; }
	.jqslide .plist li img { width: 104px; height: 78px; border-radius: 8px; }
}
@media (max-width: 560px) {
	.jqslide .plist ul { gap: 7px; }
	.jqslide .plist li img { width: 84px; height: 63px; }
	.jqslide .plist ul li span { left: 4px; top: 4px; padding: 0 5px; font-size: 10px; line-height: 15px; }
}

/* ============ ⑥ 版面两栏：左（标题信息 + 图片）/ 右（推荐图库 · 热门图集 · 图库栏目） ============
	说明：只把原有两条通栏区块（.photo_l 标题信息、.jqslide 图片区）包进左栏，
	右栏为新增；jqslide 内部的 DOM 与 jquery.slide.js 交互逻辑完全未动。 */
.ps-flex { display: flex; align-items: flex-start; gap: 24px; }
.ps-col { flex: 1 1 auto; min-width: 0; }
.ps-side { flex: 0 0 340px; width: 340px; min-width: 0; }

/* 图片区：原版 .pic / .big / .scd 均为固定 1220px，两栏后改为随左栏自适应 */
.jqslide .pic,
.jqslide .pic .big { width: 100%; }
/* 主图由 jquery.slide.js 写入内联宽高，这里限宽并保持比例，避免左栏变窄时溢出 */
.jqslide .pic .big img { width: auto !important; height: auto !important; max-width: 100%; max-height: 800px; }

/* ---- 右栏卡片 ---- */
.ps-side .ps-card {
	background: #FFFFFF; border: 1px solid #E6F0EB; border-radius: 13px;
	padding: 14px 15px 8px; margin-bottom: 14px;
	box-shadow: 0 4px 16px rgba(19,79,60,.045);
}
.ps-side .ps-card:last-child { margin-bottom: 0; }
.ps-side .ps-ch {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin: 0 0 10px; padding: 0 0 9px; border-bottom: 1px solid #F2F7F4;
}
.ps-side .ps-ch h3 {
	margin: 0; padding-left: 10px; position: relative;
	font-size: 13.5px; font-weight: 800; color: #12332A; letter-spacing: .2px; white-space: nowrap;
}
.ps-side .ps-ch h3::before {
	content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 14px;
	margin-top: -7px; border-radius: 2px;
	background: linear-gradient(180deg, #3DD68C, #26B47A);
}
.ps-side .ps-ch a { font-size: 12px; color: #94A9A0; text-decoration: none; }
.ps-side .ps-ch a:hover { color: #0F7A52; }
.ps-side .ps-ch .ps-sub { font-size: 11.5px; color: #A8BAB3; }

/* 推荐图库：竖排图文 */
.ps-side .ps-recs { list-style: none; margin: 0; padding: 0; }
.ps-side .ps-recs li { margin: 0 0 10px; }
.ps-side .ps-recs li:last-child { margin-bottom: 4px; }
.ps-side .ps-recs a { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; }
.ps-side .ps-recs img,
.ps-side .ps-recs .ps-ph {
	flex: none; width: 86px; height: 64px; border-radius: 9px; background: #EEF4F1; display: block;
}
.ps-side .ps-recs img { object-fit: cover; }
.ps-side .ps-recs .ps-ph {
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; color: #9DB3A9;
}
.ps-side .ps-rt { flex: 1; min-width: 0; display: block; }
.ps-side .ps-rt b {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; font-size: 13px; font-weight: 600; color: #1B3B30; line-height: 1.45;
}
.ps-side .ps-recs a:hover .ps-rt b { color: #0F7A52; }
.ps-side .ps-rt em { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; color: #94A9A0; }

/* 热门图集：编号榜 */
.ps-side .ps-rank { list-style: none; margin: 0; padding: 0; }
.ps-side .ps-rank li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #F0F5F2; }
.ps-side .ps-rank li:last-child { border-bottom: 0; }
.ps-side .ps-rank i {
	flex: none; width: 18px; height: 18px; line-height: 18px; text-align: center;
	font-style: normal; font-size: 11px; font-weight: 800; color: #8FA79D;
	background: #F1F6F3; border-radius: 5px;
}
.ps-side .ps-rank li:nth-child(-n+3) i { color: #FFFFFF; background: linear-gradient(135deg, #3DD68C, #26B47A); }
.ps-side .ps-rank a {
	flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: 13px; color: #2A4A40; text-decoration: none;
}
.ps-side .ps-rank a:hover { color: #0F7A52; }
.ps-side .ps-rank em { flex: none; font-style: normal; font-size: 11.5px; color: #A8BAB3; }

/* 图库栏目 */
.ps-side .ps-cats { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 6px; }
.ps-side .ps-cats a {
	display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
	font-size: 12.5px; color: #2A4A40; background: #F4F8F6;
	border: 1px solid #E8F1EC; border-radius: 8px; text-decoration: none;
	transition: background .2s, border-color .2s, color .2s;
}
.ps-side .ps-cats a:hover { color: #0F7A52; background: #EAF7F0; border-color: #C9EBD8; }
.ps-side .ps-cats em { font-style: normal; font-size: 11px; color: #94A9A0; }

/* ============ ⑦ 响应式：窄屏时右栏移到图片下方 ============ */
@media (max-width: 1360px) {
	.ps-flex { flex-direction: column; gap: 16px; }
	.ps-side { flex: none; width: 100%; }
	.ps-side .ps-card { margin-bottom: 12px; }
	.ps-side .ps-recs { display: flex; flex-wrap: wrap; gap: 10px; }
	.ps-side .ps-recs li { width: calc(50% - 5px); margin: 0; }
	.ps-side .ps-recs a { gap: 9px; }
}
@media (max-width: 760px) {
	.ps-side .ps-recs li { width: 100%; }
}

/* ============ ⑧ 标题 + 时间信息区：换掉原版 #333 / #666 灰底 ============
	原版 photo.css：.photo_l{background:#333} .photo_info{background:#666;color:#F1F1F1}，
	而 theme.css 用 !important 把 .title 定色为深色 --f-ink(#12332A)
	→ 深色标题压在 #666 灰底上对比极差（就是「灰色底色不美观」的根因）。
	这里改成与右栏 .ps-card 同款的白色卡片 + 左侧绿色竖条。 */
.photo_l { background: transparent; margin-bottom: 14px; }
.photo_l .photo_info {
	position: relative; overflow: hidden;
	background: #FFFFFF; border: 1px solid #E6F0EB; border-radius: 13px;
	padding: 18px 22px 14px 26px; color: #4A6A5E;
	box-shadow: 0 4px 16px rgba(19,79,60,.045);
}
.photo_l .photo_info::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: linear-gradient(180deg, #3DD68C, #26B47A);
}
.photo_l .photo_info .title { font-size: 24px; line-height: 1.5; padding: 0 0 14px; }
.photo_l .photo_info_r { float: right; padding: 4px 0 0 12px; }
.photo_l .photo_info_r .count_a { font-size: 20px; color: #0F8A5B; }
.photo_l .photo_info_r .count_b { font-size: 20px; color: #B8CFC6; }
.photo_l .photo_info_i { clear: both; padding: 12px 0 0; }
.photo_l .photo_info_i .ui-ico-time,
.photo_l .photo_info_i .ui-ico-hits,
.photo_l .photo_info_i .ui-ico-comm,
.photo_l .photo_info_i .ui-ico-area { color: #8AA79C; }
.photo_l .photo_info_i .f_r img { opacity: .5; vertical-align: middle; }
.photo_l .photo_info_i .f_r:hover img { opacity: 1; }

/* ============ ⑨ 图片下方「介绍信息」：宽度与图片背景（左侧栏）对齐 ============
	原 .m3 是「.m3l(890) + .m3r(320) + 890px 处一条 bg-line」的两栏；
	本轮已删掉右栏发布人卡片，故去掉竖线并让正文宽度 = 左栏宽（100% - 340 边栏 - 24 间距）。 */
.m.m3.ps-m3 { background: #FFFFFF; }
.m.m3.ps-m3 > .m3l { width: calc(100% - 364px); float: none; min-width: 0; }

/* ============ ⑩ 推荐图库：条目铺满整行（通栏） ============
	原版 .list0 div{width:200px;float:left} + img 定宽 180px，5 条只占 976px / 1526px，
	右侧空出 530px。改为 flex 均分铺满。 */
.m.ps-recm .list-img.list0 { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 0 0; }
/* 按比例均分铺满整行：bask 取 0 → 无论几条、无论视口多宽都不会换行，
   末条不会被拉大（1366/1280 下若用 flex-basis:180px，7 条会挤成 6+1 两行）。
   max-width 仅作兜底（某栏目只剩 1~2 条时避免被拉成巨幅 banner）。 */
.m.ps-recm .list0 > div { flex: 1 1 0; width: auto; max-width: 480px; float: none; min-width: 0; margin: 0; }
.m.ps-recm .list0 > div > a { display: block; }
.m.ps-recm .list0 > div img { display: block; width: 100%; height: auto; border-radius: 10px; }
.m.ps-recm .list0 > div p {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin: 8px 0 6px;
}
.m.ps-recm .list0 > div p .ui-ico-time { padding-right: 0; }
.m.ps-recm .list0 > div ul { margin: 0; }

@media (max-width: 1360px) {
	.m.m3.ps-m3 > .m3l { width: 100%; }
}
/* （≤860 的推荐图库换行规则见下方第 ⑪ 段末尾的 @media，避免两处 flex-basis 相互覆盖） */

/* ============ ⑪ 底部数据区：数据洞察 + 热度指数 + 数据概览 合并到同一栏（一行三栏） ============
	原布局：数据洞察(.m.dt-insight)独占整行，下面再一行「关键词 | 热度指数 | 数据概览」。
	现把「数据洞察」移入 .dt-side-block-in 网格同排，并去掉「关键词」块 → 一行三栏；
	模板里已去掉 .m 类（否则它会被 moment-detail.css 的 `.dt-insight.m` 撑成 1560px）。
	moment-detail.css 里 .dt-side-block-in 的响应式断点是 1240 / 860，这里必须重声明，
	因为本文件在其后加载，同特异性下会覆盖它的 @media 规则。 */
.dt-side-block-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dt-side-block-in > .dt-insight { margin: 0; }
.dt-side-block-in .dt-insight .dt-ins-h { flex-wrap: wrap; row-gap: 3px; }
.dt-side-block-in .dt-insight .dt-ins-grid { grid-template-columns: 1fr 1fr; }
.dt-side-block-in .dt-insight .dt-ins-i { padding: 14px 12px; border-right: 1px solid #E6F0EB; border-bottom: 1px solid #E6F0EB; }
.dt-side-block-in .dt-insight .dt-ins-i:nth-child(2n) { border-right: 0; }
.dt-side-block-in .dt-insight .dt-ins-i:nth-child(n+3) { border-bottom: 0; }
.dt-side-block-in .dt-insight .dt-ins-tx b { font-size: 16px; }

@media (max-width: 1240px) {
	.dt-side-block-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.dt-side-block-in { grid-template-columns: 1fr; }
	/* 小屏改回「定基准宽 + 换行」，否则 7 条会被压到 90px 以下 */
	.m.ps-recm .list0 { gap: 12px; }
	.m.ps-recm .list0 > div { flex: 1 1 140px; }
}