@charset "UTF-8";
/**
 * 空错相册 —— 前端样式
 *
 * 设计原则：不发明新配色，全部读取主题自己的设计令牌。
 *   --bravada-accent-1 / --bravada-accent-2  是 Bravada 生成的 CSS 变量，
 *   用户以后在「自定义」里改了主题颜色，相册会跟着变，不会脱节。
 * 圆角保持 0：主题 style.css 里 border-radius 出现最多（27 处）的就是 0，
 * 是一套方正、编辑式的版式，相册跟着走才不会显得是外挂的。
 *
 * 所有选择器都以 .kc- 开头，或限定在 body.kc-album-* 之下，绝不外溢到主题其它区域。
 */

/* ============================================================ 变量 */
/* 令牌要挂**两个**宿主，不是一个。
 *
 * album.js 会把 #kc-lb 搬到 document.body 底下（必须搬：主题给内容区写过
 * #container .main{z-index:9}，那是个层叠上下文，灯箱埋在里面出不来）。
 * 自定义属性是沿着 **DOM 树**继承的，不是沿视觉位置 —— 灯箱一离开 .kc-album，
 * 这里定义的 --kc-* 就全部落空，而 CSS 里那些 var() 会退化成"什么都没写"：
 *   装裱卡 border-top:3px solid var(--kc-a2) → 展签上那条青绿细线凭空消失
 *   装裱卡 border:1px solid var(--kc-line)   → 整张卡没了边框
 *   输入框 border:1px solid var(--kc-line)   → 白框贴在白卡上，看不出能打字
 * 全是"看着还行、其实是坏了"的静默失败，所以 .kc-lb 也得自己领一份。 */
.kc-album,
.kc-lb {
	--kc-a1: var(--bravada-accent-1, #E9B44C);
	--kc-a2: var(--bravada-accent-2, #0F8B8D);
	--kc-head: #162521;
	--kc-text: #707070;
	--kc-mute: #9b9b9b;
	--kc-line: #eeeeee;
	--kc-soft: #F3F7F6;
	--kc-card: #ffffff;
	--kc-pad: 3%;
}

.kc-album {
	color: var(--kc-text);
	font-size: inherit;
	line-height: 1.8;
	word-wrap: break-word;
}

/* 单相册页：影头标题区显示的是「相册」两个字，而页面里已经有相册自身的大标题，
   两个标题会打架。这里只隐藏影头里的文字，背景大图保留，和站内其它页面观感一致。 */
body.kc-album-single #header-page-title {
	display: none;
}

/* ============================================================ 容器 */
/* 相册集页：**上边不留白**。
   这一块现在住在主题的 .article-inner 里、紧跟页面标题和正文（见 templates/collection.php
   开头那段说明），主题已经给了上下内边距；再叠 3% 的 padding-top，
   第一行就比普通页面的正文低三十多像素。左右和下边照旧 3%。 */
.kc-collection {
	padding: 0 var(--kc-pad) var(--kc-pad);
}

.kc-single {
	padding: var(--kc-pad);
}

/* 主题的 .entry-content h2 会带自己的上边距，而「本站相册」是这块的第一行 */
.kc-collection .kc-sec-title {
	margin-top: 0;
}

.kc-sec-title {
	display: inline-block;
	margin: 0 0 1.4em;
	padding-bottom: .45em;
	font-size: 1.15em;
	font-weight: 400;
	line-height: 1.4;
	color: var(--kc-head);
	border-bottom: 2px solid var(--kc-a1);
}

.kc-empty {
	margin: 0 0 1em;
	color: var(--kc-mute);
}

.kc-dot {
	padding: 0 .55em;
	color: #cfcfcf;
	font-style: normal;
}

/* ============================================================ 相册集：卡片 */
/* ⚠️ 2.4.3 起相册集页不再画卡片（首页摆分类、点开一类是「相册名清单」），
   于是这一整段和 templates/partials/album-cards.php 目前**没有页面在用**。
   留着是因为它是一份能直接用的封面卡（搜索结果、以后做「按时间排」都可能要），
   而不是因为忘删。要彻底清掉，就连片段一起删，别只删一半。 */
/* gap 一律用固定值，**不要用百分比** —— 这是踩出来的：
   百分比的行间距在 grid 里是相对「容器高度」算的，而容器高度又取决于行数，
   套成了一个环。Chrome 的解法是「算高度时把行间距当 0，画的时候又照加」，
   于是容器的盒子高度比内容矮一截，最后一行整个溢出到容器外面 ——
   在相册页上就是最后一行照片压住了下面的页码条（实测窄屏溢出 709px）。
   列间距用百分比倒是安全的（相对宽度，不循环），但两处不等宽会很难看，
   索性一起钉死。 */
.kc-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 1em;
}

.kc-card {
	background: var(--kc-card);
	border: 1px solid var(--kc-line);
	border-radius: 0;
	transition: border-color .25s ease;
}

.kc-card:hover {
	border-color: var(--kc-a1);
}

.kc-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.kc-card-link:hover {
	color: inherit;
}

.kc-card-cv {
	display: block;
	position: relative;
	padding-top: 66%;
	overflow: hidden;
	background: var(--kc-soft);
}

.kc-card-cv img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s ease;
}

.kc-card:hover .kc-card-cv img {
	transform: scale(1.035);
}

.kc-card-body {
	display: block;
	padding: 1em 1.1em 1.2em;
}

.kc-card-title {
	display: block;
	font-size: 1.08em;
	line-height: 1.5;
	color: var(--kc-head);
}

.kc-card-meta {
	display: block;
	margin-top: .35em;
	font-size: .8em;
	line-height: 1.6;
	color: var(--kc-mute);
}

.kc-card-desc {
	display: block;
	margin-top: .7em;
	padding-top: .7em;
	font-size: .85em;
	line-height: 1.75;
	color: var(--kc-text);
	border-top: 1px solid var(--kc-line);
}

/* ============================ 相册集：分类条 + 这一类的缩略图（2.4.5）
 *
 * 八十多本平铺一页，首页就没有意义了。现在的样子：
 *   上面一排分类（一格一类，带本数）；
 *   点一格 → **就在这一格下面**浮出一张小卡，列这一类的相册名，点名字直接进相册；
 *   下面永远只铺**当前那一类**的七八张缩略图。
 *
 * 弹层出现时下面那排先不动，收起时才换（album.js 干这个）——
 * 想「先看看名字再决定」的时候，底下不会跟着跳一下。
 *
 * 不认 JS 时分类格还是 ?cat=kc-cat-3 的真链接，整页刷新到那一类。
 */
.kc-cats-hint {
	margin: 0 0 1em;
	font-size: .86em;
	line-height: 1.7;
	color: var(--kc-mute);
}

.kc-cats-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* 固定值，不用百分比 —— 理由见上面 .kc-cards 那条 */
	gap: 14px;
	margin: 0 0 1.6em;
	padding: 0;
	list-style: none;
}

/* 每一格外面多包一层：弹层要绝对定位到「这一格」上，所以格子得是定位祖先 */
.kc-cat {
	position: relative;
}

.kc-cat-tile {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .8em;
	height: 100%;
	padding: .95em 1.05em;
	color: var(--kc-head);
	text-decoration: none;
	background: var(--kc-card);
	border: 1px solid var(--kc-line);
	/* 顶上那道 2px 平时是浅灰，指上去换成主题的第一个强调色 ——
	   比整格变色轻，但一眼看得出「这块能点」。 */
	border-top: 2px solid var(--kc-line);
	transition: border-color .2s ease, background .2s ease;
}

.kc-cat-tile:hover,
.kc-cat-tile:focus-visible {
	background: var(--kc-soft);
	border-color: var(--kc-a1);
	border-top-color: var(--kc-a1);
}

/* 弹层开着的那一格：描边换成强调色，和「选中」分得开 ——
   一个表示「我正在看这一类的名字」，一个表示「下面铺的就是这一类」。 */
.kc-cat-tile[aria-expanded="true"] {
	background: var(--kc-soft);
	border-color: var(--kc-a1);
	border-top-color: var(--kc-a1);
}

/* 下面那排缩略图**就是**这一类：用第二个强调色（青绿）+ 左侧一道条。 */
.kc-cat.is-cur .kc-cat-tile {
	background: var(--kc-soft);
	border-color: var(--kc-a2);
	border-top-color: var(--kc-a2);
	box-shadow: inset 3px 0 0 var(--kc-a2);
}

.kc-cat.is-cur .kc-cat-tile-name {
	font-weight: 600;
}

.kc-cat-tile-name {
	font-size: 1.02em;
	line-height: 1.55;
}

.kc-cat-tile-n {
	flex: 0 0 auto;
	font-size: .78em;
	line-height: 1.55;
	color: var(--kc-mute);
}

/* ---- 弹层：相册名一览 ------------------------------------------------
 * 从格子下沿浮出 6px，盖在缩略图上（z-index 60，远低于主题顶栏的 9999）。
 * 宽度按内容走，但最多到「视口减两侧边距」—— 手机上不会撑出屏幕。
 *
 * ⚠️ [hidden] 那条不能省：这里写了 display:block，而 display 会盖掉
 *    hidden 属性自带的 display:none，弹层就关不掉了。
 */
.kc-cat-pop {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	display: block;
	width: max-content;
	min-width: 100%;
	max-width: min(320px, calc(100vw - 2 * var(--kc-pad) - 8px));
	max-height: 60vh;
	overflow: auto;
	padding: .3em 0;
	background: var(--kc-card);
	border: 1px solid var(--kc-line);
	border-top: 2px solid var(--kc-a2);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.kc-cat-pop[hidden] {
	display: none !important;
}

/* 最右一列（桌面上每 3 个一个、手机每 2 个一个）改成右对齐，
   否则弹层会从格子往右伸出去、被屏幕切掉。 */
.kc-cats-list > .kc-cat:nth-child(3n) .kc-cat-pop {
	left: auto;
	right: 0;
}

.kc-cat-pop-a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.2em;
	padding: .52em .95em;
	color: var(--kc-text);
	line-height: 1.5;
	text-decoration: none;
}

.kc-cat-pop-a:hover,
.kc-cat-pop-a:focus-visible {
	background: var(--kc-soft);
	color: var(--kc-head);
}

.kc-cat-pop-t {
	font-size: .95em;
}

.kc-cat-pop-n {
	flex: 0 0 auto;
	font-size: .76em;
	color: var(--kc-mute);
}

/* ---- 缩略图区：上面一行「北京的山 · 23 本相册」 ---------------------- */
.kc-cards-head {
	margin: 0 0 .9em;
}

.kc-cards-lab {
	display: flex;
	align-items: baseline;
	gap: .6em;
	margin: 0;
	padding-bottom: .45em;
	font-size: 1.05em;
	line-height: 1.5;
	color: var(--kc-head);
	border-bottom: 2px solid var(--kc-line);
}

.kc-cards-name {
	font-weight: 600;
}

.kc-cards-n {
	font-size: .78em;
	font-weight: 400;
	color: var(--kc-mute);
}

/* 换类时新内容淡入；等接口回来的那一小会儿压暗一点，看得出「在换」 */
.kc-cards-wrap.is-in {
	animation: kc-cards-in .28s ease both;
}

.kc-cards-wrap.is-loading {
	opacity: .45;
}

@keyframes kc-cards-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* 关掉动画的人就别看了 —— 尊重系统的「减少动态效果」。 */
@media (prefers-reduced-motion: reduce) {
	.kc-cards-wrap.is-in {
		animation: none;
	}
}

/* ============================================================ 单相册：页眉 */
.kc-crumb {
	margin: 0 0 1.2em;
	font-size: .82em;
	line-height: 1.6;
	color: var(--kc-mute);
}

.kc-crumb a {
	color: var(--kc-mute);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

.kc-crumb a:hover {
	color: var(--kc-a2);
	border-bottom-color: var(--kc-a2);
}

.kc-sep {
	padding: 0 .6em;
	color: #cfcfcf;
}

.kc-head {
	margin: 0 0 1.6em;
}

.kc-title {
	margin: 0 0 .35em;
	font-size: 1.9em;
	font-weight: 400;
	line-height: 1.35;
	color: var(--kc-head);
}

.kc-meta {
	margin: 0;
	font-size: .85em;
	line-height: 1.7;
	color: var(--kc-mute);
}

.kc-desc {
	margin: .9em 0 0;
	max-width: 46em;
	font-size: .95em;
	line-height: 1.9;
	color: var(--kc-text);
}

/* ============================================================ 单相册：操作条 */
.kc-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .9em;
	margin: 0 0 1.5em;
	padding: .9em 0;
	border-top: 1px solid var(--kc-line);
	border-bottom: 1px solid var(--kc-line);
}

.kc-btn {
	padding: .5em 1.3em;
	border: 0;
	border-radius: 0;
	background-color: var(--kc-a1);
	color: #ffffff;
	font-family: inherit;
	font-size: .85em;
	line-height: 1.6;
	cursor: pointer;
	transition: background-color .25s ease;
}

.kc-btn:hover {
	background-color: var(--kc-a2);
	color: #ffffff;
}

.kc-hint {
	font-size: .8em;
	color: var(--kc-mute);
}

/* 「点图题即可修改」——只在登录状态下才出现在操作条里 */
.kc-hint-edit {
	padding: .2em .6em;
	color: var(--kc-a2);
	background: rgba(15, 139, 141, .09);
	border-left: 2px solid var(--kc-a2);
}

/* ============================================================ 搜索框 */
/* 用户原话：「在图题里找的输入框不明显」。
   原来那格是 1px #d5d5d5 的白框贴在浅绿的底上，几乎看不出来是个能打字的框。
   2.4.3 换成 2px 的深一档边线 + 一点点内阴影，落在浅底上边界清清楚楚；
   指上去再加深一次，点了就是主题的青绿色。整块搜索区也给一圈细边，
   免得那个左粗边看起来像「贴在旁边的一条装饰」。 */
.kc-search {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .7em;
	margin: 0 0 1.6em;
	padding: .9em 1.1em;
	background: var(--kc-soft);
	border: 1px solid var(--kc-line);
	border-left: 3px solid var(--kc-a2);
}

.kc-search-lab {
	font-size: .85em;
	color: var(--kc-head);
}

.kc-input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 1 22em;
	min-width: 8em;
	padding: .5em .7em;
	border: 2px solid #c3cbc9;
	border-radius: 0;
	background: #ffffff;
	box-shadow: inset 0 1px 2px rgba(22, 37, 33, .06);
	color: var(--kc-text);
	font-family: inherit;
	font-size: .88em;
	line-height: 1.6;
	transition: border-color .2s ease;
}

.kc-input:hover {
	border-color: #9fadab;
}

.kc-input:focus {
	outline: none;
	border-color: var(--kc-a2);
	box-shadow: 0 0 0 1px var(--kc-a2);
}

.kc-input::-webkit-search-cancel-button {
	cursor: pointer;
}

.kc-search-clear {
	font-size: .82em;
	color: var(--kc-mute);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

.kc-search-clear:hover {
	color: var(--kc-a2);
	border-bottom-color: var(--kc-a2);
}

.kc-search-meta {
	margin: -.6em 0 1.4em;
	font-size: .88em;
	color: var(--kc-text);
}

.kc-search-meta strong {
	color: var(--kc-head);
}

/* 单相册页操作条里的即时过滤 */
.kc-find {
	display: inline-flex;
	align-items: center;
	gap: .6em;
}

.kc-find .kc-input {
	flex: 0 1 14em;
	padding: .38em .6em;
	font-size: .82em;
}

.kc-find-count {
	font-size: .78em;
	color: var(--kc-mute);
	white-space: nowrap;
}

.kc-find-all {
	font-size: .8em;
	color: var(--kc-a2);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
}

.kc-find-all:hover {
	border-bottom-color: var(--kc-a2);
}

.kc-find-none {
	margin: -.4em 0 1.4em;
	padding: .9em 1.1em;
	background: var(--kc-soft);
	font-size: .9em;
	color: var(--kc-text);
}

/* 过滤时藏起来的照片 */
.kc-hide {
	display: none !important;
}

/* 命中的关键词 */
.kc-hl {
	background: rgba(233, 180, 76, .38);
	color: inherit;
	padding: 0 .1em;
}

/* 改完图题、库里写成功了，让网格里那张闪一下，提示「已经生效」 */
.kc-cap.kc-flash {
	animation: kc-flash .9s ease;
}

@keyframes kc-flash {
	0% { background: rgba(15, 139, 141, .28); }
	100% { background: transparent; }
}

/* ============================================================ 单相册：照片网格 */
.kc-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* 固定值，不是百分比 —— 原因见上面 .kc-cards 那条注释 */
	gap: 16px;
	/* 卡片按自己的内容高，不互相拉伸。
	   这一条是治「图题被切掉」的一半 —— 另一半是 .kc-item 不再裁切。 */
	align-items: start;
}

.kc-item {
	margin: 0;
	background: var(--kc-card);
	border: 1px solid var(--kc-line);
	border-radius: 0;
	/* 这里**故意不写** overflow:hidden。
	   网格的行高是按图片算的、没把图题算进去，卡片一旦裁切，
	   图题的下半截就会被切掉（实测 52 张里 30 张中招，展开后最长的一条被切 409px）。
	   相册里的图横竖构图混着来，这个偏差时有时无，所以不能靠「大概没事」。 */
	cursor: zoom-in;
	transition: border-color .25s ease;
}

.kc-item:hover {
	border-color: var(--kc-a1);
}

.kc-item img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--kc-soft);
}

.kc-cap {
	margin: 0;
	padding: .7em .85em .8em;
	font-size: .8em;
	line-height: 1.7;
	color: var(--kc-text);
	border-top: 1px solid var(--kc-line);
	/* 图题先由 PHP 按字数收成摘要（约 25 字 + 省略号，见 kc_album_caption_excerpt()），
	   这里的两行 clamp 只是**兜底**：万一半角字多、字体偏窄，25 个字正好一行；
	   万一系统字体偏宽，25 个字可能要三行 —— clamp 会把它按住，别把卡片撑歪。
	   四行配套缺一不可：clamp 负责「只画两行、末尾补省略号」，
	   overflow:hidden 负责把第三行之后裁掉，缺一样就没有省略号。
	   注意：这段裁切只发生在图题框内部，卡片本身不裁切（见上）。 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kc-nocap {
	color: #c4c4c4;
}

/* 搜索结果显示的「这张属于哪个相册」小标签 */
.kc-item-album {
	display: block;
	padding: .45em .85em .6em;
	font-size: .74em;
	line-height: 1.5;
	color: var(--kc-mute);
	text-decoration: none;
	background: var(--kc-soft);
	border-top: 1px solid var(--kc-line);
	transition: color .2s ease;
}

.kc-item-album:hover {
	color: var(--kc-a2);
}

/* ============================================================ 翻页 */
.kc-pager {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5em;
	margin: 1.8em 0 .4em;
	padding-top: 1.2em;
	border-top: 1px solid var(--kc-line);
	font-size: .85em;
	line-height: 1.6;
}

.kc-pager-btn,
.kc-pager-num {
	display: inline-block;
	min-width: 2.4em;
	padding: .42em .75em;
	text-align: center;
	text-decoration: none;
	color: var(--kc-text);
	background: #ffffff;
	border: 1px solid var(--kc-line);
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.kc-pager-btn:hover,
.kc-pager-num:hover {
	color: var(--kc-a2);
	border-color: var(--kc-a2);
}

/* 到头了就画成一个不响应的灰块：占着位子，让人知道「没有更多了」 */
.kc-pager-btn.is-off {
	color: #c9c9c9;
	background: transparent;
	border-color: var(--kc-line);
	cursor: default;
}

.kc-pager-nums {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .3em;
	margin: 0 .3em;
}

.kc-pager-num {
	min-width: 2.2em;
	padding: .42em .5em;
}

/* 当前页：主题的金色强调，与站内其它「当前项」一致 */
.kc-pager-num.is-cur {
	color: #ffffff;
	background: var(--kc-a1);
	border-color: var(--kc-a1);
	cursor: default;
}

.kc-pager-gap {
	padding: .42em .2em;
	color: #c9c9c9;
}

.kc-pager-meta {
	margin-left: auto;
	color: var(--kc-mute);
	font-size: .92em;
}

/* ============================================================ 灯箱
   刻意做成浅色：背景用主题的站点底色，文字用主题的正文/标题色，
   控件用主题的两个强调色。这样它是「主题里的一个弹层」，而不是一个深色外挂。

   版式是一张「装裱卡」：卡里上面是大图，下面一条虚线下面是图题
   （读者看到的是整段文字，登录后是一个随内容长高的输入框 + 保存 / 取消 / 删除）。
   卡片的宽度是**一个**值（--kc-card-w，由 album.js 算），图片和图题都按它来 ——
   这正是「图题和图片不居中」那个毛病的解法，详见下面 .kc-lb-card 那一段。 */
.kc-lb {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 上下留白给足。以前是 2.4vh —— 大图顶到屏幕边上，看着像被挂在上沿
	   （用户原话：「图片整体太靠上了」）。这一圈是**最小**留白，
	   真正摆哪儿由下面 stage / num 上的两个 auto 外边距决定。 */
	padding: 6vh 3vw;
	background: rgba(243, 247, 246, .985);
	/* 窗户特别矮的时候（横屏手机、半屏窗口）上下两段加起来可能装不下，
	   留一道自己的滚动条兜底。关闭/翻页按钮用 fixed，所以不会跟着滚走。 */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.kc-lb[hidden] {
	display: none;
}

/* 垂直位置：整张装裱卡的 margin-top:auto（和 .kc-lb-num 的 margin-bottom:auto 配对）
 * 把富余高度从上下两边平分掉，于是一屏装得下的时候，大图 + 图题整组是**居中**的
 * —— 这是看图弹层最常见的摆法（用户原话：「你看常规的显示一般是怎么样的」）。
 * 装不下的时候（超长图题把内容顶过一屏），auto 外边距按规则算成 0，
 * 内容自动退回顶部对齐，从 .kc-lb 的 padding 开始往下排 ——
 * 宁可让整层滚动，也绝不会出现「上半截被挤到滚动原点之上、滚不回来」。 */

/* ------------------------------------------------------------ 装裱卡
 *
 * 「大图 + 图题」外面套一张白卡。加这一层是为了解决一个具体的问题：
 * 这两个东西的宽度本来是**各算各的** —— 图片宽由「图片区高度 × 照片比例」决定，
 * 图题区宽由 min(50vw,820) 决定，各自居中。竖构图照片只有 288px 宽，
 * 下面却是一行从 700px 宽的框里排出来的字，文字起点跑到图片左边缘外面
 * 200 多 px（用户原话：「图题和图片不居中，看起来很不好看」）。
 *
 * 有了这张卡，两者就有了同一个参照物。卡宽同时看「图片想占多宽」和
 * 「图题需要多宽」，由 JS 算好写进 --kc-card-w。
 *
 * 卡片自己不给宽度 —— 它给不出：卡片一宽，图片区跟着宽，图片宽又反过来
 * 决定卡片宽，那就绕成环了（1.7.0 的注释里记着这个环）。所以宽度只由 JS
 * 按这些量推：照片原始像素宽、图片区高度、窗口宽度 —— 全是常量，
 * 谁也不依赖渲染结果。CSS 这边只管画。
 *
 * 兜底：--kc-card-w 还没有值时用 min(1400px,94vw)（首帧、图片没加载完时）。 */
.kc-lb-card {
	/* 左右内边距单独拎出来，因为卡片总宽要用它算（窄屏会调小） */
	--kc-card-pad-x: 20px;
	position: relative;
	flex: 0 0 auto;
	/* 和 .kc-lb-num 的 margin-bottom:auto 配对，把富余高度上下平分 ——
	   一屏装得下时，整张卡垂直居中；装不下时 auto 算成 0，退回顶部对齐、
	   整层滚动。绝不能用 justify-content:center 代替（溢出时上半截会
	   被推到滚动原点之上，滚不回来）。 */
	margin-top: auto;
	/* 卡片总宽 = 内容宽 + 左右内边距 + 左右边框（border-box）。
	   内容宽（--kc-card-w）就是图题框宽，也是图片区宽 —— 由 JS 算好。 */
	width: calc(var(--kc-card-w, min(1400px, 94vw)) + var(--kc-card-pad-x) * 2 + 2px);
	max-width: 100%;
	box-sizing: border-box;
	padding: 18px var(--kc-card-pad-x) 20px;
	background: #ffffff;
	border: 1px solid var(--kc-line);
	/* 顶上这一条青绿是"展签"的意思：让人一眼看出图题属于上面那张图 */
	border-top: 3px solid var(--kc-a2);
	box-shadow: 0 6px 26px rgba(15, 44, 42, .10);
}

/* 大图区：高度**只跟窗口有关**，不随图题长短变。
 *
 * 为什么不让它「吃掉剩余高度」（flex:1 1 auto）：那会绕成一个死环 ——
 *   图题区长 → 大图区矮 → 图变窄 → 卡片跟着变窄 → 图题换行更多 → 图题区更高 → …
 * 定成一个 vh，环就断了：图片多高多宽一次算定，卡片和图题照着它走。
 *
 * 编辑态是例外：那张卡的图区高度由 JS 按「卡里还剩多少地方」现算
 * （见 album.js 的 syncStageHeight）—— 编辑框要优先保证看得全，
 * 字数多的时候图自动让位。JS 没跑成时退回下面这个 50vh。
 *
 * 图片用绝对定位贴在这个框里，而不是当普通流内元素，原因有两条：
 *   1. 流内元素的 max-height:100% 要算成「父元素的确定高度」，在 flex 列里
 *      这个百分比有时解析不出来 —— 解析失败图就按原始尺寸铺开、比框还高，
 *      上下溢出的部分被平均切掉，而上半截跑在滚动原点之上，滚也滚不回来。
 *      这正是「管理员打开大图，图片头部被截掉一点」的来历。
 *   2. 绝对定位元素的百分比高度相对**包含块**算，具体高度就是框的实际高度，
 *      解析必定成功；再配上 inset:0 + margin:auto 自己居中。
 * 再加上 overflow:hidden 兜底：万一是 1px 的出入，也只是上下对称各让半像素，
 * 绝不会出现「顶部被切掉一块」。
 *
 * 读者为什么是 63vh：**这是「灯箱里的图有多大」唯一的旋钮** ——
 * 图片宽 = 图片区高 × 照片比例，而卡片宽又跟着图片宽走，所以调这一个数就够，
 * JS 一个字都不用改（syncCardWidth() 是现读 stageEl.clientHeight 的）。
 *
 * 实测（真视口 1400×950、横样片 1440×1080 4:3）：
 *   46vh → 437px 高 → 横图 582px 宽（用户原话：「现在好像是 600px」）
 *   63vh → 599px 高 → 横图 **797px** 宽 ← 现在这一档
 *   68vh → 646px 高 → 横图 861px，最长图题要滚 3px（开始付代价）
 * 62/63vh 是「横图够到 800px」且**整层还装得下**的最后一档，所以停在这。
 * 再往上图更大，但长图题就得滚了。
 *
 * 试过的两档（0.43 / 0.40 那一轮）都比 46vh 差：图变小 → 卡片跟着变窄 →
 * 行数涨回来，滚动量 172 → 200 → 172。那一轮是**在 46vh 里挑最优**；
 * 后来用户明确要「图再大点」，才整体抬到 63vh 重新权衡（长图题改成整层滚）。 */
.kc-lb-stage {
	position: relative;
	flex: 0 0 auto;
	height: 63vh;
	width: 100%;
	overflow: hidden;
}

body.kc-can-edit .kc-lb-stage {
	height: 50vh;
}

.kc-lb-stage img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	display: block;
	/* border-box：max-height:100% 连那 1px 边框一起算，
	   否则图会比框高出 2px —— 又是「头部被截」的一条来源 */
	box-sizing: border-box;
	max-width: min(1400px, 94vw);
	max-height: 100%;
	width: auto;
	height: auto;
	background: #ffffff;
	border: 1px solid var(--kc-line);
}

/* 图题 / 编辑区。宽度**就是卡片内容宽**，不再自己算。
 *
 * 1.7.0 这里写的是 max(var(--kc-lb-w), min(50vw,820))：竖图照片只有 288px 宽，
 * 这个框却有 700px，两边各自居中 —— 图题文字于是贴着 700px 的左边排，
 * 和图片错开 200 多 px，看着就是散的。
 * 现在宽度统一由卡片决定（--kc-card-w）：
 *   · 读者态卡片内容宽 = 图片宽                     → 图题框和图片**天然齐平**
 *   · 编辑态卡片内容宽 = max(图片宽, min(50vw,820)) → 框够宽，好改字
 */
.kc-lb-foot {
	flex: 0 0 auto;
	width: 100%;
	margin: 1em 0 0;
	padding-top: .9em;
	/* 这条虚线是"展签"的一部分：把图和字分开 */
	border-top: 1px dashed #dfe5e3;
}

/* 访客读图题时**不要**让他对着一个小滚动框读。他没有编辑框要占地方，
   索性不限高：图题自然撑开，真的长到屏幕装不下，滚的是整层灯箱
   （和读网页一样），而不是在一个小框里挤来挤去。
   编辑态那一边的限高交给 JS（syncStageHeight + autogrow），
   原则同样是「让整层滚，不让编辑框自己滚」。 */
body:not(.kc-can-edit) .kc-lb-foot {
	max-height: none;
	overflow: visible;
}

/* 访客看到的：完整图题文本。块本身跟 .kc-lb-foot 一样居中，
 * 但**里面的文字左对齐** —— 中文段落居中之后，每一行起止位置都不一样，
 * 长的图题一折行就像一首歪歪扭扭的诗，读起来很累（用户原话）。 */
.kc-lb-cap {
	margin: 0 auto;
	font-size: .95em;
	line-height: 1.9;
	color: var(--kc-text);
	text-align: left;
}

.kc-lb-cap.is-empty {
	color: #c4c4c4;
}

.kc-lb-lab {
	display: flex;
	align-items: baseline;
	gap: .6em;
	margin: 0 0 .45em;
	font-size: .75em;
	letter-spacing: .14em;
	color: var(--kc-mute);
}

.kc-lb-lab .kc-lb-wc {
	letter-spacing: 0;
}

/* 全宽、随内容长高的输入框。
 *
 * 关键是**高度跟内容走**（album.js 的 autogrow）：262 字的图题要 196px，
 * 1.7.0 写死 max-height:32vh 又加 overflow:auto，框里就杵着一根滚动条，
 * 最后一段永远看不全（用户原话：「如果字数多，图题的高度不够，请留够高度，
 * 尽量避免上下拉滚条」）。
 * 现在不给 max-height：框按内容长，卡里放不下就往下顶，顶到屏幕边缘时
 * 滚的是整层灯箱 —— 编辑框自己始终不滚。 */
.kc-lb-ta {
	display: block;
	width: 100%;
	min-height: 5.4em;
	/* border-box：JS 用 scrollHeight 定高度（autogrow），scrollHeight 不含边框，
	   含上边框才不用来回补 2px */
	box-sizing: border-box;
	padding: .6em .8em;
	border: 1px solid var(--kc-line);
	border-radius: 0;
	background: #ffffff;
	color: #2c3338;
	font-family: inherit;
	font-size: .95em;
	line-height: 1.85;
	overflow: hidden;
	resize: vertical;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.kc-lb-ta:focus {
	border-color: var(--kc-a2);
	box-shadow: 0 0 0 2px rgba(15, 139, 141, .12);
}

.kc-lb-ta:disabled {
	background: #f7f9f8;
	color: var(--kc-mute);
}

.kc-lb-tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .7em;
	margin-top: .7em;
}

.kc-lb-tools .kc-btn.is-dirty {
	background-color: var(--kc-a2);
}

/* 没改动时保存按钮淡下去，一眼知道「现在不用按」 */
.kc-lb-tools .kc-btn[disabled] {
	opacity: .45;
	cursor: default;
}

.kc-lb-tools .kc-btn[disabled]:hover {
	background-color: var(--kc-a1);
}

.kc-lb-tools .kc-btn-ghost {
	background-color: transparent;
	color: var(--kc-mute);
	border: 1px solid var(--kc-line);
}

.kc-lb-tools .kc-btn-ghost:hover {
	background-color: var(--kc-soft);
	color: var(--kc-head);
}

.kc-lb-tools .kc-btn-danger {
	margin-left: auto;
	background-color: transparent;
	color: #b3423a;
	border: 1px solid #e3c4c0;
}

.kc-lb-tools .kc-btn-danger:hover {
	background-color: #fdeceb;
	color: #8f2f28;
}

.kc-lb-status {
	font-size: .8em;
	line-height: 1.6;
	color: var(--kc-mute);
}

.kc-lb-status.is-ok {
	color: #2e7d5b;
}

.kc-lb-status.is-err {
	color: #b3492f;
}

.kc-lb-status.is-busy {
	color: var(--kc-a2);
}

.kc-lb-left {
	margin-left: auto;
}

/* 页码是流里的最后一个元素，所以「剩下的高度」由它的下外边距收掉 ——
   和 .kc-lb-stage 的 margin-top:auto 一起，把富余高度上下平分（见那边的注释）。 */
.kc-lb-num {
	flex: 0 0 auto;
	margin-top: .8em;
	margin-bottom: auto;
	font-size: .8em;
	letter-spacing: .08em;
	color: var(--kc-mute);
}

.kc-lb-num span {
	color: var(--kc-head);
}

.kc-lb-loading {
	position: absolute;
	top: 42%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	text-align: center;
	font-size: .85em;
	color: var(--kc-mute);
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
}

.kc-lb-loading.on {
	opacity: 1;
}

/* 关闭与翻页用 fixed 而不是 absolute：灯箱自己可能滚（见上），
   这几个按钮得钉在窗口上，不能跟着内容滚出去。
 *
 * z-index 必须写死：fixed 但没写 z-index 时值是 auto，跟大图区（position:relative，
 * 也是 auto）同级，谁后画谁在上 —— 而 .kc-lb-stage 在 DOM 里排在按钮**后面**，
 * 于是图片把这些按钮整个盖住。桌面上图片窄、不越界，看不出来；手机上一放大
 * 图片就铺满宽度，右上角那个「×」正好被压在图片底下，点不着（用户报的就是这个）。 */
.kc-lb-close,
.kc-lb-prev,
.kc-lb-next {
	position: fixed;
	z-index: 3;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--kc-mute);
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease;
}

.kc-lb-close:hover,
.kc-lb-prev:hover,
.kc-lb-next:hover {
	color: var(--kc-a2);
	background: transparent;
}

.kc-lb-close {
	top: 1.6vh;
	right: 2.4vw;
	font-size: 2.2em;
}

.kc-lb-prev,
.kc-lb-next {
	top: 40%;
	margin-top: -1.4em;
	font-size: 3.2em;
	width: 1.4em;
}

.kc-lb-prev {
	left: .6vw;
}

.kc-lb-next {
	right: .6vw;
}

/* 锁住背景滚动 */
body.kc-lb-open {
	overflow: hidden;
}

/* ============================================================ 自适应 */
@media (max-width: 1100px) {
	.kc-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.kc-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	/* 分类格三列在平板宽度下每个只剩 200 出头，「北京的古建筑」会折成两行；
	   两列之后一行放得下。 */
	.kc-cats-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 两列之后「最右那一格」是每 2 个一个，弹层的右对齐跟着改 */
	.kc-cats-list > .kc-cat:nth-child(3n) .kc-cat-pop {
		left: 0;
		right: auto;
	}

	.kc-cats-list > .kc-cat:nth-child(2n) .kc-cat-pop {
		left: auto;
		right: 0;
	}

	.kc-grid {
		gap: 12px;
	}
}

@media (max-width: 760px) {
	.kc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.kc-title {
		font-size: 1.55em;
	}

	.kc-card-body {
		padding: .85em .9em 1em;
	}

	.kc-lb-prev,
	.kc-lb-next {
		font-size: 2.4em;
	}

	/* 手机上的关闭按钮：给个白色圆底。
	   图片铺满宽度时，一个灰色的 × 压在照片上根本看不清；
	   圆底让它在任何照片上都显眼，顺手把点击区域撑到 50px 以上（手指够得着），
	   边距也用固定的 px，不再贴着屏幕边。 */
	.kc-lb-close {
		top: 10px;
		right: 10px;
		width: 2.2em;
		height: 2.2em;
		font-size: 1.5em;
		line-height: 2.05em;
		color: #444444;
		background: rgba(255, 255, 255, .9);
		border-radius: 50%;
		box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
	}

	.kc-lb-close:hover {
		color: var(--kc-a2);
		background: #ffffff;
	}

	/* 手机/矮窗口：图让一点，把高度留给图题与按钮 */
	.kc-lb-stage {
		height: 40vh;
	}

	body.kc-can-edit .kc-lb-stage {
		height: 34vh;
	}

	/* 手机上把卡片内边距收窄，别让白边把宽度吃掉一大截。
	   --kc-card-pad-x 一改，卡片总宽那条 calc 会自动跟着算。 */
	.kc-lb-card {
		--kc-card-pad-x: 14px;
		padding-top: 14px;
		padding-bottom: 16px;
	}

	/* 手机上输入框占满一行，别挤成一团 */
	.kc-search-lab {
		display: none;
	}

	.kc-search .kc-input {
		flex: 1 1 100%;
	}

	.kc-find {
		flex: 1 1 100%;
	}

	.kc-find .kc-input {
		flex: 1 1 auto;
	}

	.kc-bar .kc-hint {
		display: none;
	}
}

@media (max-width: 560px) {
	.kc-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 手机上 12 个分类仍是两列（一列的话要滑六屏），
	   只把内边距和字号收一点，让「北京的古建筑」六个字一行放得下。 */
	.kc-cats-list {
		gap: 10px;
	}

	.kc-cat-tile {
		padding: .78em .82em;
		gap: .5em;
	}

	.kc-cat-tile-name {
		font-size: .95em;
	}

	.kc-cat-tile-n {
		font-size: .74em;
	}

	/* 手机上缩略图区那行「北京的山 · 23 本相册」也收一点 */
	.kc-cards-lab {
		font-size: 1em;
	}

	/* 两列时最右那一列是每 2 个一个 —— 上面按 3n 写的右对齐在这里要改掉，
	   否则第 3、6、9 格（左列）的弹层会从左边伸出去。 */
	.kc-cats-list > .kc-cat:nth-child(3n) .kc-cat-pop {
		left: 0;
		right: auto;
	}

	.kc-cats-list > .kc-cat:nth-child(2n) .kc-cat-pop {
		left: auto;
		right: 0;
	}
}

/* ============================================================ 手机灯箱（≤640px）
 *
 * 手机上换一套摆法：**纯黑底、图片宽度占满屏幕、图题先露 50 字**。
 * 桌面那套「装裱卡」一个字不动 —— 白卡、边框、投影在手机上只会把宽度吃掉、
 * 把图压小；看图这件事本身不需要装裱。
 *
 * ⚠️ 图片区高度在这里**不能再用 vh**（46vh / 63vh 是桌面按窗口高算的那个旋钮），
 *    要用「一屏减去图题那一条」= calc(100% - 150px)。
 *    为什么是 150：真机可视高常见 700~760，3:4 竖图在 390 宽下要 520 高，
 *    760−56(浮栏)−150 = 554 > 520 才够满幅；留 170 会差 10px、图被削一点点。
 *    百分比能解析得出来，靠的是上面把 .kc-lb 从 flex 改成 block、
 *    又把 .kc-lb-card 撑成 height:100% —— 链上每一级都得有确定高度，少一级就退化成 auto，
 *    图片区会当场塌成 0。
 * ⚠️ 图片「往上挪一点」的 padding-bottom 由 JS 给（album.js 的 placeMobileStage），
 *    这里只留 padding-bottom:0 的初值。 */
@media (max-width: 640px) {
	/* 灯箱：黑底、去掉左右内边距（图片要真贴到屏幕两边） */
	.kc-lb {
		display: block;
		padding: 0;
		background: #000000;
	}

	/* 卡片：退化成「图 + 图题」的容器，不再是装裱 */
	.kc-lb-card {
		width: 100% !important;   /* 盖掉 JS 算出来的 --kc-card-w */
		max-width: none;
		height: 100%;             /* 给子级的百分比高度一个确定的参照 */
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	/* 图片区：顶部让出浮栏那 56px；底部那份 padding 由 JS 按剩余空间补上 */
	.kc-lb-stage,
	body.kc-can-edit .kc-lb-stage {
		height: calc(100% - 150px);
		min-height: 200px;
		padding-top: 56px;
		padding-bottom: 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 图片：宽度优先占满（横竖都满），实在装不下才按高度让一点，且保持完整不裁。
	   桌面那套是 absolute + inset:0 + margin:auto —— 这里换成 flex 居中，
	   这样「底部 padding 把图顶上去」才成立。 */
	.kc-lb-stage img {
		position: static;
		inset: auto;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		background: none;
		border: 0;
	}

	/* 图题区：黑底浅字，没有虚线、没有居中，就是一段可以读的字 */
	.kc-lb-foot,
	body:not(.kc-can-edit) .kc-lb-foot {
		width: 100% !important;
		margin: 0;
		padding: 16px 20px 34px;
		border-top: 0;
	}

	.kc-lb-cap {
		margin: 0;
		font-size: 14px;
		line-height: 1.86;
		color: #ecebe7;
		/* 「展开」时文字是**长出来**的（JS 卡住旧高度、再放开到新高度）。
		   这条 transition 必须有 —— 它只在手机档出现，桌面一个字不受影响。
		   ⚠️ 光靠 transitionend 收尾不稳（后台标签页 / 无头虚拟时间下事件可能不来），
		   JS 那边另有一个兜底定时器，两边配合见 album.js 的 toggleReaderCaption()。 */
		transition: max-height .34s cubic-bezier(.22, .7, .3, 1);
	}

	.kc-lb-cap.is-empty {
		color: #8a8a86;
	}

	/* 「展开 / 收起」就内联在文字末尾，像文字的一部分 */
	.kc-lb-more {
		display: inline;
		margin: 0 0 0 3px;
		padding: 0 3px;
		border: 0;
		background: none;
		font: inherit;
		color: #63cfa8;
		cursor: pointer;
		border-radius: 4px;
	}

	.kc-lb-more:active {
		background: rgba(99, 207, 168, .18);
	}

	/* 页码挪到顶上做成一条浮栏 —— 桌面它是流里最后一个元素（靠 margin-bottom:auto
	   和图片区平分富余高度），手机上流到最后就跑到一屏之外去了。 */
	.kc-lb-num {
		position: fixed;
		z-index: 3;
		top: 0;
		left: 0;
		right: 0;
		height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		font-size: .78em;
		color: #ffffff;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
		background: linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.36) 55%, rgba(0,0,0,0) 100%);
		pointer-events: none;
	}

	.kc-lb-num span {
		color: #ffffff;
	}

	/* 黑底上的翻页箭头：要浅色 + 一点阴影才看得见 */
	.kc-lb-prev,
	.kc-lb-next {
		color: rgba(255, 255, 255, .78);
		text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
	}

	.kc-lb-prev:hover,
	.kc-lb-next:hover,
	.kc-lb-close:hover {
		color: #ffffff;
		background: transparent;
	}

	.kc-lb-close {
		color: #444444;
	}

	/* 深底上要换浅色的几处：载入提示、编辑面板的标签与状态 */
	.kc-lb-loading {
		color: #d8d8d4;
	}

	.kc-lb-lab {
		color: #a9a9a4;
	}

	.kc-lb-status {
		color: #a9a9a4;
	}

	.kc-lb-tools .kc-btn-ghost {
		background-color: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .28);
		color: #ecebe7;
	}
}

/* 打印：不打印灯箱、按钮和搜索框。
   搜索命中处保留 mark，但去掉底色会让「命中在哪」看不出来，所以留一点灰底。
   打印时图题不再截断 —— 屏幕上只有两行是为了版面整齐，纸上没这个必要。 */
@media print {
	.kc-lb,
	.kc-bar,
	.kc-search {
		display: none !important;
	}

	.kc-hl {
		background: transparent;
		font-weight: 600;
	}

	.kc-cap {
		display: block;
		-webkit-line-clamp: none;
		overflow: visible;
	}
}