/* =============================================================================
   テンプレート記事の記事下ブロック
   -----------------------------------------------------------------------------
   ・tpl-premium-cta … Premium Documents への転換導線（Navy + Gold）
   ・tpl-related     … 同じ工程の他テンプレートへの回遊導線（Light）
   根拠は docs/templates-uiux-review.md
   ========================================================================== */

/* ── Premium 導線（Navy + Gold）─────────────────────────────
   遷移先の Premium ページがフル Navy + Gold のため、
   ここで世界観を先に見せて着地時のギャップをなくす */
.tpl-premium-cta {
	margin: 56px 0 40px;
	padding: 36px 32px;
	background: linear-gradient(160deg, var(--navy-bg-base, #001a33) 0%, var(--navy-bg-section, #002847) 100%);
	border: 1px solid var(--navy-border-medium, #1f4972);
	border-radius: 12px;
	color: var(--navy-text-primary, #f5f9fc);
}
.tpl-premium-cta-label {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--navy-accent-gold, #C9A876);
}
.tpl-premium-cta-title {
	margin: 0 0 14px;
	font-size: 22px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--navy-text-primary, #f5f9fc);
	border: none;
	padding: 0;
	background: none;
}
.tpl-premium-cta-lead {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.85;
	color: var(--navy-text-secondary, #b5c5d6);
}
.tpl-premium-cta-points {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}
.tpl-premium-cta-points li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--navy-text-secondary, #b5c5d6);
}
/* チェックは疑似要素で描く（絵文字は使わない） */
.tpl-premium-cta-points li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.55em;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--navy-accent-gold, #C9A876);
	border-bottom: 2px solid var(--navy-accent-gold, #C9A876);
	transform: rotate(-45deg);
}
.tpl-premium-cta-btn {
	display: inline-block;
	padding: 14px 36px;
	background: var(--navy-accent-gold, #C9A876);
	color: var(--navy-bg-base, #001a33);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.tpl-premium-cta-btn:hover {
	background: var(--navy-accent-gold-bright, #E5D9C3);
	color: var(--navy-bg-base, #001a33);
	transform: translateY(-2px);
}
.tpl-premium-cta-btn:focus-visible {
	outline: 3px solid var(--navy-accent-gold-bright, #E5D9C3);
	outline-offset: 3px;
}

/* ── 同じ工程の他テンプレート（Light）───────────────────── */
.tpl-related {
	margin: 40px 0;
	padding: 28px 24px;
	background: var(--color-bg-gray, #F7F7F7);
	border-radius: 12px;
}
.tpl-related-title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-heading, #2D3748);
	border: none;
	padding: 0;
	background: none;
}
.tpl-related-lead {
	margin: 0 0 18px;
	font-size: 13px;
	color: var(--color-sub, #718096);
}
.tpl-related-list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px;
}
.tpl-related-item {
	margin: 0;
}
.tpl-related-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	background: var(--color-bg-white, #FFFFFF);
	border: 1px solid var(--color-border, #E8E8E8);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tpl-related-link:hover {
	border-color: var(--color-primary, #2B6CB0);
	box-shadow: 0 2px 8px rgba(43, 108, 176, 0.12);
}
.tpl-related-link:focus-visible {
	outline: 2px solid var(--color-primary, #2B6CB0);
	outline-offset: 2px;
}
.tpl-related-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-heading, #2D3748);
}
.tpl-related-format {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
}
/* 一覧ページと同じ配色にそろえる */
.tpl-related-format.tpl-format-excel { background: #E6F4EA; color: #1E7E34; }
.tpl-related-format.tpl-format-ppt   { background: #FFF3E0; color: #E65100; }
.tpl-related-format.tpl-format-word  { background: #E3F2FD; color: #1565C0; }

.tpl-related-more {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary, #2B6CB0);
	text-decoration: none;
}
.tpl-related-more::after {
	content: " →";
}
.tpl-related-more:hover {
	color: var(--color-primary-hover, #1E5A9E);
	text-decoration: underline;
}
.tpl-related-more:focus-visible {
	outline: 2px solid var(--color-primary, #2B6CB0);
	outline-offset: 2px;
}

/* ── レスポンシブ ───────────────────────────────────────── */
@media (max-width: 768px) {
	.tpl-premium-cta {
		padding: 28px 20px;
		margin: 40px 0 32px;
	}
	.tpl-premium-cta-title {
		font-size: 19px;
	}
	.tpl-premium-cta-btn {
		display: block;
		text-align: center;
		padding: 14px 20px;
	}
	.tpl-related {
		padding: 22px 16px;
	}
	.tpl-related-list {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tpl-premium-cta-btn,
	.tpl-related-link {
		transition: none;
	}
	.tpl-premium-cta-btn:hover {
		transform: none;
	}
}