/* CardSpicy · 卡详情页（/cards/<slug>/）
   浅色底 · 品牌红 #8b1a1a · 与 .cs151 令牌体系同源
   2026-09-30 R95 建立（样板 10 页）
--------------------------------------------------------------------------- */

.cs-cd {
	--c-ink: #252523;
	--c-soft: #8a8880;
	--c-accent: #8b1a1a;
	--c-accent2: #b84a44;
	--c-rule: #edeae2;
	--c-bg: #fcfbf8;
	color: var(--c-ink);
	max-width: 46rem;
	margin-inline: auto;
}

/* ---- 导语 ---------------------------------------------------------------- */
.cs-cd-kick {
	margin: 0 0 .55rem;
	font-size: .8rem;
	letter-spacing: .085em;
	text-transform: uppercase;
	color: var(--c-accent);
	font-weight: 700;
}

.cs-cd-lead {
	margin: 0 0 1.4rem;
	font-size: 1.06rem;
	line-height: 1.68;
	color: #3c3c38;
}

.cs-cd-lead strong {
	color: var(--c-ink);
}

/* ---- 首图 ---------------------------------------------------------------- */
.cs-cd-hero {
	margin: 0 0 2rem;
	padding: 0;
	text-align: center;
}

.cs-cd-hero img {
	display: block;
	width: auto;
	max-width: 300px;
	height: auto;
	margin: 0 auto .6rem;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgb(37 37 35 / 8%), 0 10px 30px rgb(37 37 35 / 8%);
}

.cs-cd-hero figcaption {
	font-size: .82rem;
	color: var(--c-soft);
}

/* ---- 表格 ---------------------------------------------------------------- */
.cs-cd-t {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4rem;
	font-size: .95rem;
}

.cs-cd-t th,
.cs-cd-t td {
	padding: .5rem .1rem;
	border-bottom: 1px solid var(--c-rule);
	vertical-align: top;
	text-align: left;
	font-weight: 400;
}

.cs-cd-t th {
	color: var(--c-soft);
	width: 42%;
	padding-right: 1rem;
}

.cs-cd-t td {
	color: var(--c-ink);
	font-weight: 600;
}

.cs-cd-t--num th {
	width: 52%;
}

.cs-cd-t thead th {
	color: var(--c-ink);
	font-weight: 700;
	border-bottom: 1.5px solid var(--c-ink);
}

/* ---- 指标块 -------------------------------------------------------------- */
.cs-cd-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .6rem;
	margin: 1.4rem 0 1.8rem;
}

.cs-cd-stat {
	background: var(--c-bg);
	border: 1px solid var(--c-rule);
	border-radius: 10px;
	padding: .8rem .85rem;
	display: flex;
	flex-direction: column;
	gap: .18rem;
}

.cs-cd-stat-l {
	font-size: .74rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-soft);
	font-weight: 700;
}

.cs-cd-stat-v {
	font-size: 1.32rem;
	font-weight: 700;
	color: var(--c-accent);
	line-height: 1.15;
}

.cs-cd-stat-s {
	font-size: .76rem;
	color: var(--c-soft);
	line-height: 1.35;
}

/* ---- 图表 ---------------------------------------------------------------- */
.cs-cd-fig {
	margin: 1.6rem 0;
	padding: 0;
}

.cs-cd-fig svg {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--c-rule);
	border-radius: 10px;
}

.cs-cd-fig figcaption {
	margin-top: .55rem;
	font-size: .82rem;
	color: var(--c-soft);
	line-height: 1.55;
}

.cs-cd-note {
	font-size: .85rem;
	color: var(--c-soft);
	line-height: 1.6;
}

/* ---- 画师 ---------------------------------------------------------------- */
.cs-cd-artist {
	background: var(--c-bg);
	border: 1px solid var(--c-rule);
	border-left: 3px solid var(--c-accent);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	margin: 0 0 1rem;
}

.cs-cd-artist-n {
	margin: 0;
	font-size: 1.22rem;
	font-weight: 700;
	color: var(--c-ink);
	line-height: 1.25;
}

.cs-cd-artist-c {
	margin: .3rem 0 0;
	font-size: .86rem;
	color: var(--c-accent2);
}

.cs-cd-artist-m {
	margin: .5rem 0 0;
	font-size: .9rem;
	color: var(--c-soft);
}

/* ---- 同画师互链（卡详情页 → 卡详情页）------------------------------------ */
.cs-cd-sib {
	margin: 0 0 .6rem;
	padding: 0;
	list-style: none;
}

.cs-cd-sib > li {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0 .8rem;
	padding: .5rem .1rem;
	border-bottom: 1px solid var(--c-rule);
}

.cs-cd-sib > li > a {
	font-weight: 600;
	color: var(--c-ink);
	text-decoration: none;
	border-bottom: 1px solid rgb(139 26 26 / 28%);
	justify-self: start;
}

.cs-cd-sib > li > a:hover {
	color: var(--c-accent);
	border-bottom-color: var(--c-accent);
}

.cs-cd-sib-v {
	font-size: .84rem;
	font-weight: 700;
	color: var(--c-accent);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cs-cd-src {
	font-size: .82rem;
	color: var(--c-soft);
}

.cs-cd h2 {
	margin-top: 2.4rem;
}

/* ---- 与全站表格滚动容器共存 ------------------------------------------------ */
/* cs-table-scroll.php 会在每张顶层 <table> 外包一层 .cs-tscroll，并给内层 table 补
   `margin-inline:auto;max-width:var(--wp--style--global--content-size)`（645px）。
   本页的 .cs-cd 自身已经卡在 46rem，再被压到 645px 会与正文宽度不一致 ⇒ 在这里
   用更高特异性把宽度放回容器宽度；滚动容器的 overflow 仍然保留（手机端依旧可横滑）。 */
.cs-cd .cs-tscroll > table.cs-cd-t {
	max-width: 100%;
}

/* ---- 卡索引页（/cards/） --------------------------------------------------- */
.cs-cd-idx {
	margin: 0 0 1.6rem;
}

.cs-cd-idxl {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cs-cd-idx;
}

.cs-cd-idxl > li {
	counter-increment: cs-cd-idx;
	display: grid;
	grid-template-columns: 1.9rem 1fr auto auto;
	align-items: baseline;
	gap: 0 .55rem;
	padding: .55rem .1rem;
	border-bottom: 1px solid var(--c-rule);
}

.cs-cd-idxl > li::before {
	content: counter(cs-cd-idx);
	font-size: .8rem;
	font-weight: 700;
	color: var(--c-soft);
	font-variant-numeric: tabular-nums;
}

.cs-cd-idxl > li > a {
	font-weight: 600;
	color: var(--c-ink);
	text-decoration: none;
	border-bottom: 1px solid rgb(139 26 26 / 28%);
	justify-self: start;
}

.cs-cd-idxl > li > a:hover {
	color: var(--c-accent);
	border-bottom-color: var(--c-accent);
}

.cs-cd-idxn,
.cs-cd-idxv {
	font-size: .82rem;
	color: var(--c-soft);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cs-cd-idxv {
	color: var(--c-accent);
	font-weight: 700;
}

/* ---- 手机 ---------------------------------------------------------------- */
@media (max-width: 700px) {
	.cs-cd-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cs-cd-lead {
		font-size: 1rem;
	}

	.cs-cd-hero img {
		max-width: 210px;
	}

	.cs-cd-stat-v {
		font-size: 1.18rem;
	}

	/* 窄屏把编号列与金额列收紧，避免卡名被挤成一列两个字。 */
	.cs-cd-idxl > li {
		grid-template-columns: 1.5rem 1fr auto;
		gap: 0 .45rem;
	}

	.cs-cd-idxn {
		display: none;
	}
}