/* 通用内容区块样式 —— 用于补足页面正文厚度
   只在新增区块上使用独立 jh- 前缀，避免与站点既有 class 冲突
   单位约定：与 rem-adapter.js 一致，1rem = 100px @1920 */

.jh-sec {
	background: #ffffff;
	padding: 0.8rem 0;
}

.jh-sec--gray {
	background: #f7f9fc;
}

.jh-sec__inner {
	width: 100%;
	max-width: 12rem;
	margin: 0 auto;
	padding: 0 0.2rem;
	box-sizing: border-box;
}

.jh-sec__title {
	margin: 0 0 0.12rem;
	font-size: 0.32rem;
	line-height: 0.44rem;
	font-weight: 600;
	color: #1b2330;
	text-align: center;
}

.jh-sec__lead {
	margin: 0 auto 0.4rem;
	max-width: 8.4rem;
	font-size: 0.14rem;
	line-height: 0.26rem;
	color: #6b7684;
	text-align: center;
}

.jh-grid {
	display: grid;
	gap: 0.16rem;
}

.jh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.jh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.jh-grid--4 { grid-template-columns: repeat(4, 1fr); }

.jh-card {
	border: 1px solid #e6ebf2;
	border-radius: 0.08rem;
	padding: 0.24rem 0.22rem;
	background: #ffffff;
}

.jh-card__t {
	margin: 0 0 0.1rem;
	font-size: 0.17rem;
	line-height: 0.26rem;
	font-weight: 600;
	color: #1b2330;
}

.jh-card__d {
	margin: 0;
	font-size: 0.14rem;
	line-height: 0.26rem;
	color: #4a5563;
}

.jh-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.12rem;
	counter-reset: step;
}

.jh-step {
	position: relative;
	padding: 0.22rem 0.16rem 0.2rem;
	border-top: 0.03rem solid #1a6cff;
	background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
}

.jh-step__n {
	display: block;
	margin-bottom: 0.08rem;
	font-size: 0.15rem;
	font-weight: 700;
	color: #1a6cff;
}

.jh-step__t {
	margin: 0 0 0.06rem;
	font-size: 0.16rem;
	line-height: 0.24rem;
	font-weight: 600;
	color: #1b2330;
}

.jh-step__d {
	margin: 0;
	font-size: 0.13rem;
	line-height: 0.22rem;
	color: #5b6673;
}

.jh-prose {
	max-width: 8.6rem;
	margin: 0 auto;
}

.jh-prose h3 {
	margin: 0.28rem 0 0.1rem;
	font-size: 0.19rem;
	line-height: 0.3rem;
	font-weight: 600;
	color: #1b2330;
}

.jh-prose p {
	margin: 0 0 0.14rem;
	font-size: 0.15rem;
	line-height: 0.28rem;
	color: #4a5563;
}

.jh-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem;
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
}

.jh-tags li {
	padding: 0.06rem 0.14rem;
	border: 1px solid #dbe4ef;
	border-radius: 1rem;
	background: #ffffff;
	font-size: 0.13rem;
	line-height: 0.2rem;
	color: #4a5563;
}

.jh-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.12rem;
	margin: 0.24rem 0 0;
	padding: 0;
	list-style: none;
}

.jh-facts li {
	padding: 0.16rem 0.18rem;
	border-left: 0.03rem solid #1a6cff;
	background: #f8fafd;
}

.jh-facts b {
	display: block;
	margin-bottom: 0.04rem;
	font-size: 0.15rem;
	color: #1b2330;
}

.jh-facts span {
	font-size: 0.13rem;
	line-height: 0.22rem;
	color: #5b6673;
}

@media (max-width: 1200px) {
	.jh-steps { grid-template-columns: repeat(3, 1fr); }
	.jh-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.jh-grid--3, .jh-facts { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.jh-sec { padding: 0.5rem 0; }
	.jh-sec__inner { padding: 0 0.24rem; }
	.jh-sec__title { font-size: 0.26rem; }
	.jh-grid--2, .jh-grid--4, .jh-steps { grid-template-columns: 1fr; }
}

/* 对比表 */
.jh-table-wrap {
	overflow-x: auto;
	margin-top: 0.2rem;
}

.jh-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.14rem;
	background: #ffffff;
}

.jh-table caption {
	margin-bottom: 0.12rem;
	font-size: 0.14rem;
	color: #6b7684;
	text-align: left;
}

.jh-table th,
.jh-table td {
	border: 1px solid #e6ebf2;
	padding: 0.14rem 0.16rem;
	text-align: left;
	line-height: 0.24rem;
	vertical-align: top;
}

.jh-table thead th {
	background: #f2f7ff;
	font-weight: 600;
	color: #1b2330;
}

.jh-table tbody th {
	width: 1.8rem;
	background: #fafcff;
	font-weight: 600;
	color: #1b2330;
}

.jh-table td { color: #4a5563; }

.jh-note {
	margin: 0.16rem 0 0;
	font-size: 0.13rem;
	line-height: 0.24rem;
	color: #6b7684;
}

/* 延伸阅读（related links） */
.jh-related {
	margin-top: 0.16rem;
}

.jh-related__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem;
	padding: 0;
	margin: 0.16rem 0 0;
	list-style: none;
}

.jh-related__links a {
	display: inline-block;
	padding: 0.06rem 0.14rem;
	border: 1px solid #dbe4ef;
	border-radius: 0.04rem;
	background: #ffffff;
	font-size: 0.13rem;
	line-height: 0.2rem;
	color: #000000;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s;
}

.jh-related__links a:hover {
	border-color: #000000;
	background: #f5f5f5;
}