#container {
	grid-template-columns: minmax(0, 1fr) 320px;
}

.article_detail_page {
	width: auto;
	max-width: none;
	margin: 0;
	padding: clamp(24px, 3vw, 40px);
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(219, 229, 222, 0.92);
	border-radius: 30px;
	box-shadow: 0 24px 60px rgba(25, 48, 37, 0.08);
}

#mainContent {
	grid-column: 1;
}

.admin_shortcut {
	display: inline-flex;
	margin-bottom: 20px;
	font-size: var(--font-size-xs);
	font-weight: 700;
}

.article_category_badge {
	display: inline-flex;
	align-items: center;
	margin-bottom: 14px;
	padding: 0.48rem 0.86rem;
	border-radius: 999px;
	background: #edf5f0;
	font-size: 0.76rem;
	font-weight: 700;
	color: #2b5b45;
}

.article_title h1 {
	margin-bottom: 16px;
	font-size: clamp(2rem, 3vw, 3rem);
	line-height: 1.25;
}

.article_lead {
	font-size: 1.05rem;
	color: #526059;
}

.article_meta {
	padding-bottom: 24px;
	margin-bottom: 28px;
	border-bottom: 1px solid #e2ebe5;
}

.article_meta_row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	font-size: 0.82rem;
	color: #6b746e;
}

.article_meta_row span:last-child {
	min-width: min(100%, 18rem);
	max-width: 100%;
}

.article_meta_row span:last-child a {
	display: block;
	max-width: min(100%, 34rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.article_body {
	display: grid;
	gap: 0;
	max-width: var(--site-reading-width);
}

.article_body h2,
.article_body h3 {
	scroll-margin-top: 120px;
}

.article_body h2 {
	text-wrap: balance;
}

.article_body > :where(p, ul, ol, blockquote, figure, h2, h3, h4) {
	margin-bottom: clamp(16px, 2vw, 24px);
}

.article_body h3 {
	padding-left: 14px;
	border-left: 4px solid rgba(71, 157, 128, 0.48);
}

.article_body > *:last-child {
	margin-bottom: 0;
}

.article_body p,
.article_body li {
	font-size: 1.02rem;
	line-height: 1.95;
}

.article_body ul,
.article_body ol {
	padding: 18px 20px 18px 1.25rem;
	border-radius: 20px;
	background: rgba(244, 248, 245, 0.82);
}

.article_body ul {
	list-style: disc;
}

.article_body ol {
	list-style: decimal;
}

.article_body blockquote {
	padding: 20px 22px;
	border-left: 4px solid rgba(71, 157, 128, 0.42);
	border-radius: 0 20px 20px 0;
	background: rgba(244, 248, 245, 0.74);
	color: #44514a;
}

.article_body img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 18px;
	background: linear-gradient(135deg, #edf5f0 0%, #f7fbf8 100%);
	box-shadow: 0 18px 40px rgba(25, 48, 37, 0.1);
}

.article_body a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

.related_area {
	margin-top: 56px;
}

.article_sidebar {
	grid-column: 2;
	align-self: start;
	position: sticky;
	top: 116px;
	height: fit-content;
	display: grid;
	gap: 18px;
}

.article_sidebar_section {
	padding: 22px;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(219, 229, 222, 0.92);
	border-radius: 24px;
	box-shadow: 0 20px 42px rgba(25, 48, 37, 0.06);
}

.article_sidebar_heading {
	margin-bottom: 14px;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: #587160;
}

.article_sidebar_text {
	margin-bottom: 0;
	font-size: var(--font-size-s);
}

.article_sidebar_tags,
.article_sidebar_links {
	display: grid;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.article_sidebar_tags li,
.article_sidebar_links li {
	list-style: none;
	margin: 0;
}

.article_sidebar_tags a {
	display: inline-flex;
	padding: 0.5rem 0.78rem;
	border-radius: 999px;
	background: #f3f7f5;
	font-size: 0.75rem;
}

.article_sidebar_links a {
	display: block;
	line-height: 1.7;
}

.article_sidebar_links_trust {
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid #e2ebe5;
}

.article_sidebar_section_trust .article_sidebar_text {
	line-height: 1.8;
	color: #526059;
}

.article_sidebar_links a:hover,
.article_sidebar_links a:focus-visible {
	color: #2b5b45;
}

@media screen and (max-width: 900px) {
	#container {
		grid-template-columns: 1fr;
	}

	#mainContent {
		grid-column: auto;
		order: 1;
	}

	.article_sidebar {
		grid-column: auto;
		position: static;
		order: 2;
		gap: 14px;
	}

	.article_detail_page {
		padding: 22px 18px;
	}

	.article_meta {
		padding-bottom: 20px;
		margin-bottom: 24px;
	}

	.article_meta_row span:last-child {
		min-width: 0;
	}

	.article_meta_row span:last-child a {
		max-width: 100%;
	}

	.article_body {
		max-width: none;
	}
}

@media screen and (max-width: 768px) {
	.article_title h1 {
		font-size: clamp(1.7rem, 8vw, 2.2rem);
	}

	.article_lead {
		font-size: 0.96rem;
	}

	.article_body p,
	.article_body li {
		font-size: 0.95rem;
		line-height: 1.88;
	}

	.article_body ul,
	.article_body ol,
	.article_body blockquote {
		padding-inline: 16px;
	}
}