.naplee-smart-related a {
	align-items: baseline;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	min-height: 44px;
}

.naplee-smart-related .related-category {
	color: var(--wp--preset--color--muted, #777);
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--ui, sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.naplee-smart-related .related-title {
	flex: 1 1 auto;
}

/* The template owns placement; this layer only makes the shared rail resilient. */
body .article-reading-layout > .article-toc-column:has(> .article-rail-stack) {
	display: block;
}

body.page .reading-column:has(> .entry-content > .naplee-translation-article-layout),
body.page .entry-content:has(> .naplee-translation-article-layout) {
	max-width: none;
	width: 100%;
}

.naplee-translation-article-layout {
	margin-block-start: 0;
}

.naplee-translation-reading-column {
	min-width: 0;
}

.article-reading-layout .article-rail-stack {
	border-left: var(--naplee-hairline, 1px solid rgba(127, 127, 127, 0.24));
	box-sizing: border-box;
	max-height: calc(100vh - 4rem);
	max-height: calc(100dvh - 4rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-left: 1.25rem;
	position: sticky;
	scrollbar-width: thin;
	top: 2rem;
}

.article-reading-layout .article-rail-stack > * {
	margin-block-start: 0;
}

.article-reading-layout .article-rail-stack .naplee-language-switcher {
	display: block;
	margin: 0;
	padding: 0 0 1.4rem;
}

.article-reading-layout .article-rail-stack .naplee-language-switcher__label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	margin-bottom: 0.7rem;
	text-transform: uppercase;
}

.article-reading-layout .article-rail-stack .naplee-language-switcher ul {
	gap: 0.4rem 0.75rem;
}

.article-reading-layout .article-rail-stack .naplee-language-switcher li {
	font-size: 0.78rem;
}

.article-reading-layout .article-rail-stack .article-toc {
	border-left: 0;
	max-height: none;
	overflow: visible;
	padding-left: 0;
	position: static;
}

.article-reading-layout .article-rail-stack .related-reading {
	margin-top: 2rem;
	padding-top: 1.4rem;
}

.article-reading-layout .article-rail-stack .related-reading h2 {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	margin: 0 0 0.7rem;
}

.article-reading-layout .article-rail-stack .naplee-smart-related a {
	align-items: flex-start;
	flex-direction: column;
	gap: 0.25rem;
	justify-content: flex-start;
	padding-block: 0.65rem;
}

.article-reading-layout .article-rail-stack .naplee-smart-related .related-title {
	font-size: 0.82rem;
	line-height: 1.5;
}

@media (max-width: 1100px) {
	.article-reading-layout .article-rail-stack {
		border-left: 0;
		max-height: none;
		overflow: visible;
		overscroll-behavior: auto;
		padding-left: 0;
		position: static;
	}

	.article-reading-layout .article-rail-stack .related-reading {
		margin-top: 1.5rem;
		padding-top: 1.25rem;
	}

	.article-reading-layout .article-rail-stack .naplee-language-switcher {
		padding-bottom: 1rem;
	}
}

@media (max-width: 480px) {
	.naplee-smart-related a {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.25rem;
		justify-content: flex-start;
		padding-block: 0.35rem;
	}
}

/* ── 0.2.5 · Comments column ────────────────────────────────────── */

/* The single template lifts the separator and comments out of
   .reading-column so mobile can place related reading between the body and
   the comments. Desktop keeps the previous result: comments sit under the
   body in column 1, and the rail spans both rows so the sticky stack travels
   exactly as far as it did in 0.2.4. `span 2` is deliberate — the theme
   declares no grid-template-rows, so `1 / -1` would resolve against an
   explicit grid that has only one line. */
body .article-reading-layout > .comments-column {
	grid-column: 1;
	grid-row: 2;
	margin: 0 !important;
	max-width: none;
	width: 100%;
}

/* Scoped to layouts that actually have the second row. Translated pages keep
   their comments outside the runtime wrapper, so spanning there would only
   create an empty implicit row. */
body .article-reading-layout:has(> .comments-column) > .article-toc-column {
	grid-row: 1 / span 2;
}

/* ── 0.2.5 · In-article ad slot ─────────────────────────────────── */

/* Article_Ads prints nothing unless site code fills the slot, so the default
   package adds no element and reserves no space. These rules only shape a
   slot that already has markup in it. */
.naplee-ad {
	border-top: var(--naplee-hairline, 1px solid rgba(127, 127, 127, 0.24));
	box-sizing: border-box;
	contain: layout;
	display: block;
	margin-block: 2.75rem 0;
	max-width: 100%;
	overflow: hidden;
	padding-block-start: 1.25rem;
}

.naplee-ad__label {
	color: var(--wp--preset--color--muted, #777);
	display: block;
	font-family: var(--wp--preset--font-family--ui, sans-serif);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	margin-bottom: 0.8rem;
	text-transform: uppercase;
}

.naplee-ad__slot,
.naplee-ad__slot > * {
	max-width: 100%;
}

.naplee-ad__slot {
	overflow: hidden;
}

/* Reserve the height at parse time, and only when an ad unit is actually in
   the markup, so a late-loading ad cannot push related reading and comments. */
.naplee-ad__slot:has(> ins.adsbygoogle) {
	min-height: 280px;
}

@media (min-width: 1101px) {
	.naplee-ad__slot:has(> ins.adsbygoogle) {
		min-height: 260px;
	}
}

/* Leave no trace when the slot is empty or the ad request went unfilled. */
.naplee-ad:empty,
.naplee-ad:has(> .naplee-ad__slot:empty),
.naplee-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
	display: none;
}

/* ── 0.2.5 · Mobile reading order ───────────────────────────────── */

/* The theme places the rail in row 1 and the body in row 2 with explicit
   grid placement, which `order` cannot override. Flatten the two rail
   wrappers and give every part its own explicit row instead. Rows 1-5 are
   occupied, so anything injected into the flattened container later
   auto-places after row 5 rather than jumping above the article. */
@media (max-width: 1100px) {
	body .article-reading-layout > .article-toc-column:has(> .article-rail-stack),
	body .article-reading-layout > .article-toc-column > .article-rail-stack {
		display: contents;
	}

	body .article-reading-layout .naplee-language-switcher {
		grid-column: 1;
		grid-row: 1;
	}

	body .article-reading-layout .article-toc-mobile {
		grid-column: 1;
		grid-row: 2;
	}

	body .article-reading-layout > .reading-column {
		grid-column: 1;
		grid-row: 3;
	}

	body .article-reading-layout .related-reading {
		grid-column: 1;
		grid-row: 4;
	}

	body .article-reading-layout > .comments-column {
		grid-column: 1;
		grid-row: 5;
	}
}

/* ── 0.2.5 · Stray line-break guard ─────────────────────────────── */

/* On Korean source posts the rail shortcodes are expanded inside the block
   template, where core's render_block_core_shortcode() runs wpautop() over the
   result. Related_Posts::render() is now newline-free so nothing is left for
   wpautop's line-break pass to convert, but these cards are column flex
   containers, where a single stray <br> becomes its own flex item and opens
   the card by a full line. Neutralise it here too. */
.naplee-smart-related br,
.naplee-language-switcher br,
.article-toc br,
.article-toc-mobile br {
	display: none;
}

/* ── Translated article header ──────────────────────────────────────
   Translations are pages, so the page template renders a bare title and no
   featured image. Translation_Header rebuilds the Korean `.post-header`
   around that title with the same core blocks, and the theme stylesheet then
   styles it unchanged. These rules only stop the page template's narrow
   reading measure from clamping the rebuilt header. */
body.page .reading-column:has(> .naplee-translation-post-header),
body.page .entry-content:has(> .naplee-translation-post-header) {
	max-width: none;
	width: 100%;
}

body.page .naplee-translation-post-header {
	margin-block-start: 0;
}

/* ── 0.2.9 · Translated article page parity ───────────────────────
   The page template remains the durable content owner, but its `world-shell`
   and outer `.reading-column` otherwise add section padding around the article
   layout that the Korean `single` template does not have. The stable body
   class keeps every reset away from ordinary pages and language landing pages. */
body.naplee-translation-article-page main.world-shell {
	border-bottom: 0;
	padding-bottom: 0;
	padding-top: 0;
}

body.naplee-translation-article-page main.world-shell > .naplee-translation-post-header,
body.naplee-translation-article-page main.world-shell > .wp-block-post-featured-image {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none;
	width: 100%;
}

/* The translated header is nested inside the page shell, so the Group support
   class alone does not receive the root padding that `single` gets at the
   template root. Restore that exact inset without narrowing the featured image. */
body.naplee-translation-article-page main.world-shell > .naplee-translation-post-header {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

body.naplee-translation-article-page main.world-shell > .reading-column {
	padding-bottom: 0;
	padding-top: 0;
}

/* The live source-post rule hides the deck above the article while retaining
   excerpts in lists. Apply that same presentation only to translated articles. */
body.naplee-translation-article-page .naplee-translation-post-header .post-deck {
	display: none;
}

/* The grid sizes its body track from the layout's inherited font size.
   A page inherits the smaller generic post-content scale here, while a source
   post inherits the site's medium body preset. Restore that layout basis,
   then apply the source article's reading scale only to the body column. */
body.naplee-translation-article-page .naplee-translation-article-layout {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

/* 0.2.12 · One gutter, not three. The Korean template puts the article grid
   at the root of an unpadded `main`, so the theme's own
   `.article-reading-layout` padding is the only page gutter there. A
   translation is a page: `main.page-shell` already carries that same inset
   (`--naplee-shell` and `--naplee-gutter` are the same clamp), so the grid's
   padding became a second copy and 0.2.10's explicit inset on the runtime
   reading wrapper a third. Measured at 1440px the body column started at
   207.6px instead of 92.4px and lost 115.2px of measure; at 390px it started
   at 60px instead of 20px. Zero both inner insets and let the page shell own
   the gutter, which leaves the rebuilt header and the featured image, both
   tuned against that shell in 0.2.8 and 0.2.9, exactly where they are. */
body.naplee-translation-article-page .naplee-translation-article-layout {
	padding-left: 0;
	padding-right: 0;
}

body.naplee-translation-article-page .naplee-translation-reading-column {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
	line-height: 1.85;
	padding-left: 0;
	padding-right: 0;
}

/* Translated content is inserted directly into the runtime reading wrapper;
   unlike the source template, its first paragraph would therefore match the
   theme's direct-child lead rule a second time. */
body.naplee-translation-article-page .naplee-translation-reading-column > p:first-of-type {
	font-size: inherit;
	line-height: inherit;
}