@charset "utf-8";
/* ==========================================================================
   工具页 SEO / GEO 增强样式（2026-11-13）
   仅服务两个工具页（药物研发计算工具箱 / 多肽计算器）：
   面包屑右侧入口、可见 FAQ 区块、服务互链 CTA。
   刻意独立成文件、独立版本号——工具本体样式是内联在模板里的，
   两边解耦后改这里不会碰到任何计算器的排版。
   ========================================================================== */

/* ---------- 面包屑：右侧并排一个静态入口 ---------- */
.position--tool {
	display: flex;
	align-items: center;
	gap: 12px 20px;
	flex-wrap: wrap;
	/* 与下方 .top-bar 卡片右边缘对齐（2026-11-13 像素实测）：
	   工具页的 .top-bar 自带 margin-right: 24px（给侧栏滚动条留位），
	   面包屑没有，导致右侧入口条比卡片右边缘多出正好 24px。
	   左边不动 —— 面包屑左端与卡片左边缘本来就齐平。
	   不用 padding-right：padding 会把宽度撑满 1200 再内缩，
	   右端仍在 1200，白留一段空白。 */
	margin-right: 24px;
}
/* 左侧面包屑原样保持 inline 排列，只负责占满剩余宽度，不参与左右分离 */
.position--tool .crumb-trail {
	flex: 1 1 auto;
	min-width: 0;
}
.position--tool .tool-crumb-note {
	font-size: 13.5px;
	line-height: 1.6;
}
.position--tool .tool-crumb-note a {
	color: #2208C9;
	text-decoration: none;
	border-bottom: 1px solid rgba(34, 8, 201, .28);
	padding-bottom: 1px;
}
.position--tool .tool-crumb-note a:hover {
	border-bottom-color: #2208C9;
}

/* ---------- 可见 FAQ 区块 ---------- */
.tool-faq {
	background: #fff;
	border-top: 1px solid #e8edf5;
	padding: 56px 0 64px;
	/* 从顶栏「复溶常见问题」跳过来时，避免标题被 sticky 顶栏压住 */
	scroll-margin-top: 84px;
}
.tool-faq .tool-faq-inner {
	/* 900px 阅读宽度：与工具本体卡片的 920px 同一档。
	   刻意不用 .container 这个通用类名——它是 bootstrap 等框架的保留名，
	   将来站内引入框架会直接串味。 */
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px;
}
.tool-faq h2 {
	font-size: 26px;
	line-height: 1.35;
	font-weight: 700;
	color: #0b1a33;
	margin: 0 0 12px;
	text-align: left;
}
.tool-faq-lead {
	font-size: 15px;
	line-height: 1.8;
	color: #5a6a7e;
	margin: 0 0 32px;
}
.tool-faq-list {
	display: flex;
	flex-direction: column;
}
.tool-faq-item {
	padding: 22px 0;
	border-top: 1px solid #eef2f8;
}
.tool-faq-item:first-child {
	border-top: none;
	padding-top: 0;
}
.tool-faq-item h3 {
	font-size: 17px;
	line-height: 1.6;
	font-weight: 700;
	color: #0b1a33;
	margin: 0 0 10px;
	text-align: left;
}
.tool-faq-item p {
	font-size: 15px;
	line-height: 1.85;
	color: #3d4a5c;
	margin: 0;
}

/* ---------- 服务互链 CTA ---------- */
.tool-cta {
	background: #f4f7fc;
	border-top: 1px solid #e3e9f2;
	padding: 34px 20px;
}
.tool-cta-inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}
.tool-cta-inner p {
	margin: 0;
	flex: 1 1 30rem;
	font-size: 15px;
	line-height: 1.8;
	color: #1a2a4a;
}
.tool-cta-inner strong {
	font-weight: 700;
}
.tool-cta-btn {
	display: inline-block;
	padding: 12px 22px;
	background: #2208C9;
	color: #fff !important;
	font-weight: 600;
	font-size: 15px;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
}
.tool-cta-btn:hover {
	background: #1a06a3;
}

/* ---------- 顶栏 FAQ 锚点（多肽计算器用） ---------- */
.top-bar-faq {
	flex-shrink: 0;
	margin-left: 8px;
	padding: 6px 14px;
	border: 1px solid #d7e0ee;
	border-radius: 999px;
	font-size: 13.5px;
	color: #2208C9;
	text-decoration: none;
	white-space: nowrap;
	background: #fff;
}
.top-bar-faq:hover {
	border-color: #2208C9;
}
.top-bar-faq .faq-short {
	display: none;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 767px) {
	.tool-faq {
		padding: 40px 0 48px;
	}
	.tool-faq h2 {
		font-size: 22px;
	}
	.tool-faq-item h3 {
		font-size: 16px;
	}
	.tool-faq-item p,
	.tool-faq-lead {
		font-size: 14.5px;
	}
	.position--tool {
		align-items: flex-start;
		/* 窄屏下 responsive.css 有 `.position { margin: 16px 0 }`，
		   把右边的 24px 一起冲掉；这里再写一次，保证卡片边缘始终对齐。 */
		margin-right: 24px;
	}
	.position--tool .tool-crumb-note {
		font-size: 13px;
	}
}
@media (max-width: 480px) {
	/* 顶栏空间紧张：长文案换成三个字母，避免多占一行 */
	.top-bar-faq .faq-full {
		display: none;
	}
	.top-bar-faq .faq-short {
		display: inline;
	}
	.top-bar-faq {
		padding: 5px 10px;
		font-size: 13px;
	}
}