/*
 * 资源页（工具 / 对照表 / 术语表）共用样式
 *
 * 为什么抽成外部文件而不是各模板底部各写一份：
 *   这 5 个资源页共用同一套「卡片 + 表格 + 表单 + 结果块」组件，
 *   写进 5 个模板意味着同一份规则维护 5 遍，改一个间距要改 5 处 —— 必然漂移。
 *   项目本身也已有 assets/css/components.css 与 layout.css，抽文件与既有结构一致。
 *   各模板底部只保留「只有那一页才用得到」的少量样式。
 *
 * 约定：BEM，块名前缀 sdf-；颜色一律走本文件顶部定义的 CSS 变量（不散落 hex）。
 */

.sdf-tool {
	--tool-line: #dfe5ee;
	--tool-line-soft: #ecf0f6;
	--tool-ink: #1a2030;
	--tool-ink-soft: #39445c;
	--tool-muted: #6b7688;
	--tool-accent: #17357f;
	--tool-accent-soft: #e8eeff;
	--tool-bg: #ffffff;
	--tool-bg-soft: #f6f8fb;
	--tool-radius: 10px;
	--tool-shadow: 0 1px 2px rgba(18, 39, 92, .04), 0 8px 24px rgba(18, 39, 92, .06);

	--tool-gap-sm: 10px;
	--tool-gap: 18px;
	--tool-gap-lg: 32px;

	color: var(--tool-ink);
}

/* ══════════════════════════════════════════════════════════
 * 顶部 banner（资源页 hero）
 *
 * 骨架复用 components.css 既有的 .sdf-page-hero--img：
 * 铺满定位、文字层 z-index、标题转白的规则都在那边，这里不重复。
 * 本段只做两件它没做的事：
 *
 *   1. 把它的「整张 opacity:.45 统一压暗」换成左重右轻的渐变遮罩。
 *      统一压暗会把亮底素材（如打包台白景）压成一整片死黑，细节全丢；
 *      渐变遮罩让标题所在的左侧足够暗（白字对比度达标），右侧仍看得出素材内容。
 *      与博客列表页 banner 同一套做法，全站观感一致。
 *
 *   2. 给一个最小高度。否则宽屏下 padding 撑起来的高度有限，
 *      banner 会被压成一条细缝，图等于白配。
 *
 * 注意：这里必须覆盖 .sdf-page-hero__img 的 opacity —— 那条规则在
 * components.css 里是给「联系我们」页用的（浅色文字叠浅色图，靠整体压暗），
 * 与这里的渐变方案冲突，所以显式改回 1，由遮罩负责明暗。
 * ══════════════════════════════════════════════════════════ */

.sdf-res-hero--img {
	display: flex;
	align-items: center;
	min-height: clamp(260px, 22vw, 380px);
}

/* flex 子项默认按内容宽度收缩，容器要显式撑满，否则左右留白消失 */
.sdf-res-hero--img > .sdf-container {
	width: 100%;
}

.sdf-res-hero--img .sdf-page-hero__img {
	opacity: 1;
}

.sdf-res-hero--img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(17, 17, 17, .90) 0%,
		rgba(17, 17, 17, .76) 46%,
		rgba(17, 17, 17, .44) 100%
	);
}

/*
 * 窄屏：banner 被裁到只剩中间一条，渐变改为「上下重、中间轻」—— 
 * 横向渐变在这种裁切下会变成左半边全黑、右半边太亮，出现一条生硬的竖切边。
 * 同时把标题与引言的最大宽度放开，避免在窄容器里被逼成很多行。
 */
@media (max-width: 767px) {
	.sdf-res-hero--img {
		min-height: clamp(240px, 46vw, 320px);
	}

	.sdf-res-hero--img::after {
		background: linear-gradient(
			180deg,
			rgba(17, 17, 17, .84) 0%,
			rgba(17, 17, 17, .72) 55%,
			rgba(17, 17, 17, .84) 100%
		);
	}

	.sdf-res-hero--img .sdf-page-hero__title {
		font-size: clamp(22px, 6vw, 28px);
	}
}

/* ── 引言 ─────────────────────────────────────────────── */

.sdf-tool__lead {
	margin: 0 0 var(--tool-gap-lg);
	max-width: 74ch;
	font-size: 16px;
	line-height: 1.75;
	color: var(--tool-ink-soft);
}

.sdf-tool__lead p { margin: 0 0 12px; }
.sdf-tool__lead p:last-child { margin-bottom: 0; }

/* ── 区块标题 ─────────────────────────────────────────── */

.sdf-tool__h2 {
	margin: 0 0 var(--tool-gap);
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--tool-ink);
}

.sdf-tool__h3 {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.4;
	color: var(--tool-ink);
}

.sdf-tool__text {
	margin: 0 0 var(--tool-gap);
	max-width: 74ch;
	font-size: 15px;
	line-height: 1.75;
	color: var(--tool-ink-soft);
}

.sdf-tool__text:last-child { margin-bottom: 0; }

/* ── 卡片 ─────────────────────────────────────────────── */

.sdf-tool-card {
	margin: 0 0 var(--tool-gap-lg);
	padding: clamp(18px, 2.4vw, 28px);
	border: 1px solid var(--tool-line);
	border-radius: var(--tool-radius);
	background: var(--tool-bg);
}

.sdf-tool-card--soft {
	border-color: transparent;
	background: var(--tool-bg-soft);
}

.sdf-tool-card--accent {
	border-color: var(--tool-accent);
	background: var(--tool-accent-soft);
}

.sdf-tool-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 var(--tool-gap);
}

.sdf-tool-card__head .sdf-tool__h2,
.sdf-tool-card__head .sdf-tool__h3 { margin: 0; }

.sdf-tool-card__hint {
	font-size: 13px;
	color: var(--tool-muted);
}

/* ── 表格 ─────────────────────────────────────────────── */

.sdf-tool-tablewrap {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border: 1px solid var(--tool-line);
	border-radius: var(--tool-radius);
	background: var(--tool-bg);
}

.sdf-tool-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 14px;
}

.sdf-tool-table caption {
	padding: 14px 16px 0;
	text-align: left;
	font-size: 13px;
	color: var(--tool-muted);
	caption-side: top;
}

.sdf-tool-table th,
.sdf-tool-table td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--tool-line-soft);
}

.sdf-tool-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--tool-bg-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tool-muted);
	white-space: nowrap;
	border-bottom: 1px solid var(--tool-line);
}

.sdf-tool-table tbody tr:last-child td { border-bottom: 0; }
.sdf-tool-table tbody tr:hover td { background: #fcfbf9; }

.sdf-tool-table td.is-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sdf-tool-table td strong { font-weight: 600; }

/* 尺寸表：表头上方的「跳到指定尺寸」 */
.sdf-tool-jump {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sdf-tool-jump .sdf-tool-select {
	width: auto;
	min-width: 160px;
}

/*
 * 打印版页眉：屏幕上不占位，只在 @media print 时出现。
 * 导出的 PDF 脱离浏览器地址栏后必须自己能说明是什么表、出自哪里，
 * 否则被转发出去就成了一张无出处的图。
 */
.sdf-tool__print-head { display: none; }

.sdf-tool__print-title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.sdf-tool__print-head p {
	margin: 0 0 10px;
	font-size: 11px;
	color: #555;
}

/* 尺寸对照表：把 SS 列做成可点的锚，方便引用到具体尺寸 */
.sdf-tool-table .sdf-size-key {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--tool-ink);
}

/* ── 表单（计算器） ───────────────────────────────────── */

.sdf-tool-form {
	display: grid;
	gap: var(--tool-gap);
	grid-template-columns: 1fr;
}

.sdf-tool-field { display: flex; flex-direction: column; gap: 6px; }

.sdf-tool-field__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tool-ink);
}

.sdf-tool-field__hint {
	font-size: 12px;
	line-height: 1.5;
	color: var(--tool-muted);
}

.sdf-tool-input,
.sdf-tool-select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--tool-line);
	border-radius: 8px;
	background: var(--tool-bg);
	color: var(--tool-ink);
	font: inherit;
	/* 16px：低于此值 iOS 聚焦时会放大整页 */
	font-size: 16px;
	line-height: 1.4;
}

.sdf-tool-input:focus,
.sdf-tool-select:focus {
	outline: none;
	border-color: var(--tool-accent);
	box-shadow: 0 0 0 3px rgba(201, 162, 54, .18);
}

.sdf-tool-input::placeholder { color: #a9a29a; }

.sdf-tool-inputgroup {
	display: flex;
	align-items: stretch;
}

.sdf-tool-inputgroup .sdf-tool-input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.sdf-tool-inputgroup__suffix {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	border: 1px solid var(--tool-line);
	border-left: 0;
	border-radius: 0 8px 8px 0;
	background: var(--tool-bg-soft);
	color: var(--tool-muted);
	font-size: 13px;
	white-space: nowrap;
}

/* ── 按钮 ─────────────────────────────────────────────── */

.sdf-tool-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tool-gap-sm);
	margin-top: 4px;
}

.sdf-tool-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 22px;
	border: 1px solid var(--tool-accent);
	border-radius: 8px;
	background: var(--tool-accent);
	color: #1a1a1a;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sdf-tool-btn:hover { background: #b8912c; border-color: #b8912c; color: #1a1a1a; }

.sdf-tool-btn--ghost {
	background: transparent;
	border-color: var(--tool-line);
	color: var(--tool-ink);
}

.sdf-tool-btn--ghost:hover {
	background: var(--tool-bg-soft);
	border-color: var(--tool-ink);
	color: var(--tool-ink);
}

/* ── 结果块 ───────────────────────────────────────────── */

.sdf-tool-result {
	margin: var(--tool-gap) 0 0;
	padding: var(--tool-gap);
	border: 1px solid var(--tool-line);
	border-radius: var(--tool-radius);
	background: var(--tool-bg-soft);
}

.sdf-tool-result[hidden] { display: none; }

.sdf-tool-result__title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tool-muted);
}

.sdf-tool-metrics {
	display: grid;
	gap: var(--tool-gap-sm);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 0 0 var(--tool-gap);
	padding: 0;
	list-style: none;
}

.sdf-tool-metric {
	padding: 12px 14px;
	border: 1px solid var(--tool-line);
	border-radius: 8px;
	background: var(--tool-bg);
}

.sdf-tool-metric__label {
	display: block;
	margin: 0 0 4px;
	font-size: 12px;
	color: var(--tool-muted);
}

.sdf-tool-metric__value {
	display: block;
	font-size: 22px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: var(--tool-ink);
}

.sdf-tool-metric--key {
	border-color: var(--tool-accent);
	background: var(--tool-accent-soft);
}

.sdf-tool-metric__unit {
	margin-left: 3px;
	font-size: 13px;
	font-weight: 500;
	color: var(--tool-muted);
}

.sdf-tool-breakdown {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.sdf-tool-breakdown li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px dashed var(--tool-line);
}

.sdf-tool-breakdown li:last-child { border-bottom: 0; }

.sdf-tool-breakdown__num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--tool-ink);
}

/* ── 提示条 ───────────────────────────────────────────── */

.sdf-tool-note {
	margin: var(--tool-gap) 0 0;
	padding: 12px 16px;
	border-left: 3px solid var(--tool-accent);
	border-radius: 0 8px 8px 0;
	background: var(--tool-accent-soft);
	font-size: 14px;
	line-height: 1.7;
	color: var(--tool-ink-soft);
}

.sdf-tool-note strong { color: var(--tool-ink); }

.sdf-tool-note--warn {
	border-left-color: #b3261e;
	background: #fdf1f0;
}

/* ── 交互状态：高亮行 / 推荐行 ─────────────────────────── */

.sdf-tool-table tr.is-highlight td {
	background: var(--tool-accent-soft);
	box-shadow: inset 0 0 0 1px rgba(201, 162, 54, .35);
}

.sdf-tool-table tr.is-recommended td {
	background: var(--tool-accent-soft);
}

.sdf-tool-table tr.is-recommended td:first-child {
	box-shadow: inset 3px 0 0 var(--tool-accent);
}

/* ── 筛选胶囊 ─────────────────────────────────────────── */

.sdf-tool-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--tool-gap);
	padding: 0;
	list-style: none;
}

.sdf-tool-chip {
	min-height: 38px;
	padding: 8px 15px;
	border: 1px solid var(--tool-line);
	border-radius: 999px;
	background: transparent;
	color: var(--tool-ink-soft);
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.sdf-tool-chip:hover { border-color: var(--tool-accent); color: var(--tool-ink); }

.sdf-tool-chip.is-active {
	border-color: var(--tool-ink);
	background: var(--tool-ink);
	color: #fff;
}

/* ── 术语表 ───────────────────────────────────────────── */

.sdf-glossary {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--tool-line);
}

.sdf-glossary__item {
	display: grid;
	gap: 4px 20px;
	grid-template-columns: minmax(140px, 220px) 1fr;
	padding: 16px 0;
	border-bottom: 1px solid var(--tool-line);
}

.sdf-glossary__term {
	font-size: 15px;
	font-weight: 600;
	color: var(--tool-ink);
}

.sdf-glossary__term abbr { text-decoration: none; }

.sdf-glossary__def {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--tool-ink-soft);
}

.sdf-glossary__def a { color: var(--tool-ink); text-decoration: underline; text-underline-offset: 2px; }

.sdf-glossary__empty {
	padding: 24px 0;
	font-size: 14px;
	color: var(--tool-muted);
}

.sdf-tool-search {
	position: relative;
	margin: 0 0 var(--tool-gap);
	max-width: 400px;
}

/* ── 引用来源 ─────────────────────────────────────────── */

.sdf-tool-cite {
	margin: var(--tool-gap-lg) 0 0;
	padding-top: var(--tool-gap);
	border-top: 1px solid var(--tool-line);
	font-size: 13px;
	line-height: 1.7;
	color: var(--tool-muted);
}

.sdf-tool-cite__title {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tool-muted);
}

.sdf-tool-cite ul { margin: 0; padding-left: 18px; }
.sdf-tool-cite li { margin-bottom: 4px; }
.sdf-tool-cite a { color: var(--tool-ink-soft); }

/* ── 页尾行动区 ───────────────────────────────────────── */

.sdf-tool-cta {
	margin: var(--tool-gap-lg) 0 0;
	padding: clamp(22px, 3vw, 34px);
	border-radius: var(--tool-radius);
	background: #111111;
	color: #fff;
}

.sdf-tool-cta__title {
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.35;
	color: #fff;
}

.sdf-tool-cta__text {
	margin: 0 0 var(--tool-gap);
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .8);
}

.sdf-tool-cta .sdf-tool-btn { border-color: #fff; background: #fff; color: #111; }
.sdf-tool-cta .sdf-tool-btn:hover { background: #e9e4d8; border-color: #e9e4d9; color: #111; }

.sdf-tool-cta .sdf-tool-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}

.sdf-tool-cta .sdf-tool-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
}

/* ── 相关工具互链 ─────────────────────────────────────── */

.sdf-tool-links {
	display: grid;
	gap: var(--tool-gap-sm);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin: var(--tool-gap-lg) 0 0;
	padding: 0;
	list-style: none;
}

.sdf-tool-links__item a {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--tool-line);
	border-radius: 8px;
	background: var(--tool-bg);
	color: var(--tool-ink);
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.sdf-tool-links__item a:hover {
	border-color: var(--tool-accent);
	box-shadow: var(--tool-shadow);
}

.sdf-tool-links__title {
	display: block;
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
}

.sdf-tool-links__desc {
	display: block;
	font-size: 13px;
	line-height: 1.55;
	color: var(--tool-muted);
}

/* ── 响应式 ───────────────────────────────────────────── */

@media (min-width: 768px) {
	.sdf-tool-form--2 { grid-template-columns: repeat(2, 1fr); }
	.sdf-tool-form--3 { grid-template-columns: repeat(3, 1fr); }
	.sdf-tool-form__full { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
	.sdf-glossary__item {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.sdf-tool-table {
		font-size: 13.5px;
		min-width: 520px;
	}

	.sdf-tool-table th,
	.sdf-tool-table td { padding: 9px 11px; }

	.sdf-tool__h2 { font-size: 21px; }

	.sdf-tool-metric__value { font-size: 20px; }
}

/* ── 打印（尺寸对照表导出 PDF 用）──────────────────────── */

@media print {
	.sdf-tool-cta,
	.sdf-tool-links,
	.sdf-tool-filters,
	.sdf-tool-actions,
	.sdf-site-header,
	.sdf-footer,
	.sicily-chat,
	.sdf-totop,
	.sdf-side { display: none !important; }

	/*
	 * hero banner：打印时去掉图片与遮罩，只留标题块。
	 * 全宽 banner 会把第一页大部分版面吃掉，而它承载的信息量为零；
	 * 导出 PDF 的人要的是表格，不是封面图。
	 * 文字转回深色 —— 遮罩没了之后再是白字就等于白纸上印白字。
	 */
	.sdf-res-hero--img {
		display: block;
		min-height: 0;
		padding-block: 0 12px;
		background: transparent !important;
	}

	.sdf-res-hero--img .sdf-page-hero__img,
	.sdf-res-hero--img::after { display: none !important; }

	.sdf-res-hero--img .sdf-page-hero__title,
	.sdf-res-hero--img .sdf-page-hero__text { color: #191716 !important; }

	.sdf-tool-tablewrap { overflow: visible; border: 0; }
	.sdf-tool-table { min-width: 0; font-size: 11px; }
	.sdf-tool-table thead th { position: static; background: #f2f2f2; }
	.sdf-tool-card { break-inside: avoid; border-color: #ccc; }
	.sdf-tool__print-head { display: block !important; }

	@page { margin: 12mm; }
}