/* 適用対象の記事本文を、内容のまとまりに合わせて整える。 */
.mame-article-spacing .body .article-content {
	--reading-paragraph-gap: var(--space-5);
	--reading-block-gap: var(--space-8);
	--reading-section-gap: var(--space-16);
	--reading-subsection-gap: var(--space-10);
	--reading-minor-section-gap: var(--space-8);
	--reading-heading-gap: var(--space-5);
	--reading-inset-line-height: 1.7;
	--reading-inset-paragraph-gap: var(--space-4);
	--reading-inset-image-gap: var(--space-5);
	--reading-header-surface: #f6f7f8;
	--reading-component-border: #d7dce2;
	font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
	font-weight: 500;
	line-height: 1.7;
}

/* 青いCTAは比較表と同じ色にする。線ボタンや用途別の色は対象にしない。 */
.mame-article-spacing .body .article-content :is(
	.swell-block-button:where(:not(.red_):not(.green_):not(.orange_):not(.is-style-btn_line):not(.is-style-more_btn)) a,
	.swl-inline-btn a,
	.article-cta--lp .article-cta__primary,
	.ds-btn--primary,
	.ds-btn--lead
) {
	background: var(--article-action);
	color: var(--white);
	box-shadow: 0 3px 0 var(--article-action-shadow);
}
.mame-article-spacing .body .article-content :is(
	.swell-block-button:where(:not(.red_):not(.green_):not(.orange_):not(.is-style-btn_line):not(.is-style-more_btn)) a,
	.swl-inline-btn a,
	.article-cta--lp .article-cta__primary,
	.ds-btn--primary,
	.ds-btn--lead
):hover {
	background: var(--article-action-hover);
	color: var(--white);
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--article-action-shadow);
}
.mame-article-spacing .body .article-content :is(
	.swell-block-button:where(:not(.red_):not(.green_):not(.orange_):not(.is-style-btn_line):not(.is-style-more_btn)) a,
	.swl-inline-btn a,
	.article-cta--lp .article-cta__primary,
	.ds-btn--primary,
	.ds-btn--lead
):active {
	transform: translateY(3px);
	box-shadow: none;
}

/* 小さな注記も読める大きさにし、囲みのリンクは選択肢として見分けやすくする。 */
.mame-article-spacing .body .article-content :is(.u-fz-xs, .u-fz-s, small, figcaption) {
	font-size: max(.875em, 13px);
	font-weight: 500;
}
.mame-article-spacing .body .article-content .cap_box_content :is(ul, ol) a {
	font-weight: 600;
}

/* 斜線背景の枠の最後にあるリストは、枠の内側余白だけを残す。 */
.mame-article-spacing .body .article-content .wp-block-group.is-style-bg_stripe > :is(ul, ol):last-child,
.mame-article-spacing .body .article-content .wp-block-group.is-style-bg_stripe > .wp-block-group__inner-container > :is(ul, ol):last-child {
	margin-bottom: 0 !important;
}
.mame-article-spacing .body .article-content .wp-block-group.is-style-bg_stripe > :is(ul, ol):last-child > li:last-child,
.mame-article-spacing .body .article-content .wp-block-group.is-style-bg_stripe > .wp-block-group__inner-container > :is(ul, ol):last-child > li:last-child {
	margin-bottom: 0 !important;
}

/* Shopify記事の同じコースの案内は、ボタンと補足を同じ間隔にする。 */
.mame-article-spacing.postid-3931 .body .article-content .is-style-bg_stripe:has(.mame-shopify-cta__label) {
	padding: var(--space-6);
	background-image: none;
	background-color: var(--surface);
}
.mame-article-spacing.postid-3931 .body .article-content :is(.wp-block-group, .wp-block-group__inner-container):has(> .swell-block-button .mame-shopify-cta__label) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}
.mame-article-spacing.postid-3931 .body .article-content :is(.wp-block-group, .wp-block-group__inner-container):has(> .swell-block-button .mame-shopify-cta__label) > p {
	margin: 0 !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7 !important;
	color: var(--text-secondary);
}
.mame-article-spacing.postid-3931 .body .article-content .is-style-bg_stripe:has(.mame-shopify-cta__label) .u-fz-s {
	font-size: inherit;
}
.mame-article-spacing.postid-3931 .body .article-content .is-style-bg_stripe:has(.mame-shopify-cta__label) mark {
	color: inherit !important;
}
.mame-article-spacing.postid-3931 .body .article-content .is-style-bg_stripe:has(.mame-shopify-cta__label) p a {
	overflow-wrap: anywhere;
}
.mame-article-spacing.postid-3931 .body .article-content .swell-block-button:has(.mame-shopify-cta__label) {
	width: 100%;
	max-width: 400px;
	margin: 0;
}
.mame-article-spacing.postid-3931 .body .article-content .swell-block-button:has(.mame-shopify-cta__label) a {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: 14px 20px;
	font-size: 15px;
	line-height: 1.6;
	flex-wrap: wrap;
	gap: 0 var(--space-1);
	white-space: normal;
}
.mame-article-spacing.postid-3931 .body .article-content .swell-block-button:has(.mame-shopify-cta__label) .mame-shopify-cta__label {
	white-space: nowrap;
}
@media (max-width: 640px) {
	.mame-article-spacing.postid-3931 .body .article-content :is(.wp-block-group, .wp-block-group__inner-container):has(> .swell-block-button .mame-shopify-cta__label) > p:first-child {
		font-size: 13px;
	}
}

/* 本文と、装飾のないグループ内の文章に適用する。部品の内側は広げない。 */
.mame-article-spacing .body :is(
	.article-content,
	:where(
		.article-content > .wp-block-group:not(.has-background):not(.has-border):not([class*="is-style-"]),
		.article-content > .wp-block-group:not(.has-background):not(.has-border):not([class*="is-style-"]) > .wp-block-group__inner-container
	)
) > p:not(.has-background):not(.has-border):not([class*="is-style-"]) {
	margin-top: 0;
	margin-bottom: var(--reading-paragraph-gap) !important;
}

.mame-article-spacing .body :is(
	.article-content,
	:where(
		.article-content > .wp-block-group:not(.has-background):not(.has-border):not([class*="is-style-"]),
		.article-content > .wp-block-group:not(.has-background):not(.has-border):not([class*="is-style-"]) > .wp-block-group__inner-container
	)
) > :is(h2, h3, h4, h5, h6) {
	margin-bottom: var(--reading-heading-gap) !important;
}
.mame-article-spacing .body :is(
	.article-content,
	:where(
		.article-content > .wp-block-group:not(.has-background):not(.has-border):not([class*="is-style-"]),
		.article-content > .wp-block-group:not(.has-background):not(.has-border):not([class*="is-style-"]) > .wp-block-group__inner-container
	)
) > h2 {
	margin-top: var(--reading-section-gap);
	margin-bottom: var(--reading-paragraph-gap) !important;
}
.mame-article-spacing .body :is(
	.article-content,
	:where(
		.article-content > .wp-block-group:not(.has-background):not(.has-border):not([class*="is-style-"]),
		.article-content > .wp-block-group:not(.has-background):not(.has-border):not([class*="is-style-"]) > .wp-block-group__inner-container
	)
) > h3 { margin-top: var(--reading-subsection-gap); }
.mame-article-spacing .body :is(
	.article-content,
	:where(
		.article-content > .wp-block-group:not(.has-background):not(.has-border):not([class*="is-style-"]),
		.article-content > .wp-block-group:not(.has-background):not(.has-border):not([class*="is-style-"]) > .wp-block-group__inner-container
	)
) > :is(h4, h5, h6) {
	margin-top: var(--reading-minor-section-gap);
	margin-bottom: var(--space-6) !important;
}

/* 親見出しの直後に続く小見出しは、同じまとまりとして扱う。 */
.mame-article-spacing .body .article-content :is(h2 + h3, h3 + h4, h4 + h5, h5 + h6) {
	margin-top: var(--space-6);
}
.mame-article-spacing .body :is(.article-content, .article-content :where(.wp-block-group, .wp-block-group__inner-container)) > :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* 説明文と直後のリストを近づけ、リストの後でまとまりを区切る。 */
.mame-article-spacing .body .article-content > p:has(+ :is(ul, ol)) {
	margin-bottom: var(--space-4) !important;
}
.mame-article-spacing .body .article-content > :is(ul, ol) {
	margin-block: 0 var(--reading-paragraph-gap);
}
.mame-article-spacing .body .article-content > :is(ul, ol) > li {
	margin-bottom: var(--space-2);
}
.mame-article-spacing .body .article-content > :is(ul, ol) > li:last-child { margin-bottom: 0; }

/* 項目名と説明があるリストは、手順ごとにまとまりを作る。 */
.mame-article-spacing .body .article-content .mame-reading-list > li {
	margin-bottom: var(--reading-paragraph-gap);
}
.mame-article-spacing .body .article-content .mame-reading-list > li:last-child { margin-bottom: 0; }
.mame-article-spacing .body .article-content .mame-reading-list > li::marker { font-weight: 700; }
.mame-article-spacing .body .article-content .mame-reading-list__title {
	display: block;
	font-weight: 700;
	line-height: 1.7;
}
.mame-article-spacing .body .article-content .mame-reading-list__body { margin-top: var(--space-3); }
.mame-article-spacing .body .article-content .mame-reading-list__body > p { margin: 0 !important; }
.mame-article-spacing .body .article-content .mame-reading-list__body > p + p { margin-top: var(--space-3) !important; }
/* 囲みの中では、本文の手順より間隔を小さくする。 */
.mame-article-spacing .body .article-content :is(.cap_box, .swell-block-faq) .mame-reading-list > li { margin-bottom: var(--space-4); }
.mame-article-spacing .body .article-content :is(.cap_box, .swell-block-faq) .mame-reading-list > li:last-child { margin-bottom: 0; }

/* 図表や囲みは、前後の文章から一段離して見せる。 */
.mame-article-spacing .body .article-content > :is(
	figure, blockquote, pre, table, .tblwrap, .wp-block-group,
	.swell-block-columns, .swell-block-postLink, .swell-block-capbox,
	.swell-block-faq, .swell-block-accordion, .swell-block-step,
	.wp-block-cocoon-blocks-blank-box-1, .wp-block-cocoon-blocks-tab-caption-box-1
) { margin-block: var(--reading-block-gap); }
/* 横スクロールの案内は、対応する表と離さない。 */
.mame-article-spacing .body .article-content > .c-scrollHint + figure.wp-block-table { margin-top: var(--space-2); }

/* 連続する関連記事はまとめて見せ、本文との前後の間隔は保つ。 */
.mame-article-spacing .body .article-content > .swell-block-postLink:has(+ .swell-block-postLink) {
	margin-bottom: 0;
}
.mame-article-spacing .body .article-content > .swell-block-postLink + .swell-block-postLink {
	margin-top: var(--space-4);
}

/* 番号用の字下げは見出しだけに置き、手順本文は記事幅を使う。 */
.mame-article-spacing .body .article-content .swell-block-step {
	--reading-step-number-size: 28px;
	--reading-step-title-offset: 44px;
}
.mame-article-spacing .body .article-content .swell-block-step.is-style-big {
	--reading-step-number-size: 38px;
	--reading-step-title-offset: 54px;
}
.mame-article-spacing .body .article-content .swell-block-step.is-style-small {
	--reading-step-number-size: 22px;
	--reading-step-title-offset: 36px;
}
.mame-article-spacing .body .article-content .swell-block-step__item {
	padding-left: 0;
	padding-bottom: var(--space-10);
}
.mame-article-spacing .body .article-content .swell-block-step__item:last-child { padding-bottom: 0; }
.mame-article-spacing .body .article-content .swell-block-step__item::after { display: none; }
.mame-article-spacing .body .article-content .swell-block-step__title {
	box-sizing: border-box;
	min-height: var(--reading-step-number-size);
	margin: 0;
	padding-block: var(--space-1);
	padding-left: var(--reading-step-title-offset);
}
.mame-article-spacing .body .article-content .swell-block-step__body { margin-top: var(--space-4); }
.mame-article-spacing .body .article-content .swell-block-step__body > p:not([class*="is-style-"]) {
	font-size: inherit;
	color: inherit;
}

/* 吹き出しは本文と同じ行間にし、部品の内側の段落間隔は保つ。 */
.mame-article-spacing .body .article-content :is(.speech-balloon, .c-balloon__text) { line-height: 1.7; }
.mame-article-spacing .body .article-content > :is(.swell-block-balloon, .speech-wrap) { margin-block: var(--reading-paragraph-gap); }

/* 話者の画像と名前を保ち、SWELLと旧Cocoonの吹き出しを同じ見た目にする。 */
.mame-article-spacing .body .article-content :is(.swell-block-balloon, .wp-block-cocoon-blocks-balloon-ex-box-1) {
	--reading-balloon-avatar-size: 88px;
	--reading-balloon-font-size: 15px;
	--reading-balloon-gap: 12px;
}
.mame-article-spacing .body .article-content :is(.c-balloon, .wp-block-cocoon-blocks-balloon-ex-box-1) {
	align-items: flex-start;
	gap: var(--reading-balloon-gap);
}
.mame-article-spacing .body .article-content :is(.c-balloon__icon, .speech-person) {
	width: var(--reading-balloon-avatar-size);
	flex: 0 0 var(--reading-balloon-avatar-size);
}
.mame-article-spacing .body .article-content :is(.swell-block-balloon, .wp-block-cocoon-blocks-balloon-ex-box-1):not(.mame-balloon) :is(.c-balloon__icon img, .speech-icon img) {
	display: block;
	box-sizing: border-box;
	width: var(--reading-balloon-avatar-size);
	height: var(--reading-balloon-avatar-size);
	object-fit: contain;
	border: 1px solid var(--border-subtle);
	border-radius: 50%;
	background: var(--surface);
}
.mame-article-spacing .body .article-content :is(.c-balloon__text, .speech-balloon) {
	padding: 13px 16px;
	background: var(--surface);
	border: 2px solid var(--border);
	border-radius: 12px;
	font-family: inherit;
	font-size: var(--reading-balloon-font-size);
	font-weight: 500;
	line-height: 1.7;
	color: var(--text-primary);
}
.mame-article-spacing .body .article-content :is(.c-balloon__text, .speech-balloon) p {
	margin-block: 0 !important;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.mame-article-spacing .body .article-content :is(.c-balloon__text, .speech-balloon) p + p {
	margin-top: 10px !important;
}
.mame-article-spacing .body .article-content :is(.c-balloon__text, .speech-balloon)::before {
	background: var(--surface);
	border-color: var(--border);
	border-style: solid;
	border-width: 0 0 2px 2px;
}
.mame-article-spacing .body .article-content .wp-block-cocoon-blocks-balloon-ex-box-1.sbp-r {
	flex-direction: row-reverse;
}
.mame-article-spacing .body .article-content :is(.c-balloon.-bln-right .c-balloon__text, .wp-block-cocoon-blocks-balloon-ex-box-1.sbp-r .speech-balloon)::before {
	left: auto;
	right: -7px;
	border-width: 2px 2px 0 0;
}
.mame-article-spacing .body .article-content :is(.c-balloon__iconName, .speech-name) {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 4px 0 0;
	transform: none;
	font-size: 11px;
	line-height: 1.5;
	color: var(--navy-700);
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}
.mame-article-spacing .body .article-content :is(.c-balloon__iconName, .speech-name):empty { display: none; }

@media (max-width: 640px) {
	.mame-article-spacing .body .article-content :is(.swell-block-balloon, .wp-block-cocoon-blocks-balloon-ex-box-1) {
		--reading-balloon-avatar-size: 64px;
		--reading-balloon-font-size: 16px;
		--reading-balloon-gap: 10px;
	}
	.mame-article-spacing .body .article-content :is(.c-balloon__text, .speech-balloon) { padding: 12px 14px; }
}

/* 囲みの内側は本文と分け、短い説明が一つのまとまりとして読める密度にする。 */
.mame-article-spacing .body .article-content :is(
	[class*="is-style-big_icon_"], [class*="is-style-icon_"],
	.wp-block-cocoon-blocks-blank-box-1,
	.wp-block-group.has-background, .wp-block-group.has-border,
	p.has-background, p.has-border
) {
	line-height: var(--reading-inset-line-height);
}
/* 入れ子の吹き出しには、囲みの段落間隔を適用しない。 */
.mame-article-spacing .body .article-content :is(
	.wp-block-cocoon-blocks-blank-box-1,
	.wp-block-group.has-background, .wp-block-group.has-border,
	.wp-block-group[class*="is-style-big_icon_"]
) :is(p:not([class*="is-style-"]), ul, ol):not(:where(.c-balloon__text *, .speech-balloon *)) {
	line-height: var(--reading-inset-line-height);
	margin-bottom: var(--reading-inset-paragraph-gap) !important;
}
.mame-article-spacing .body .article-content :is(
	.wp-block-cocoon-blocks-blank-box-1,
	.wp-block-group.has-background, .wp-block-group.has-border,
	.wp-block-group[class*="is-style-big_icon_"]
) :is(p, ul, ol):last-child:not(:where(.c-balloon__text *, .speech-balloon *)) {
	margin-bottom: 0 !important;
}
/* 段落そのものが枠のときは、画像の前後を空行でなく専用の余白で区切る。 */
.mame-article-spacing .body .article-content p[class*="is-style-big_icon_"] > img {
	display: block;
	margin-block: var(--reading-inset-image-gap);
}
.mame-article-spacing .body .article-content p[class*="is-style-big_icon_"] > :is(
	br:has(+ img), br:has(+ br + img), img + br, noscript + br
) { display: none; }

@media (max-width: 620px) {
	.mame-article-spacing .body .article-content {
		--reading-paragraph-gap: var(--space-5);
		--reading-block-gap: var(--space-8);
		--reading-section-gap: calc(var(--space-12) + var(--space-2));
		--reading-subsection-gap: var(--space-10);
		--reading-minor-section-gap: var(--space-8);
		--reading-heading-gap: var(--space-5);
		font-size: 16px;
		line-height: 1.7;
	}
	.mame-article-spacing .body .article-content :is(h2 + h3, h3 + h4, h4 + h5, h5 + h6) { margin-top: var(--space-5); }
	.mame-article-spacing .body .article-content > .mame-reading-list > li { margin-bottom: var(--reading-paragraph-gap); }
	.mame-article-spacing .body .article-content > .mame-reading-list > li:last-child { margin-bottom: 0; }
}

/* 旧記事の大きな余白指定より、内容のまとまりを優先する。囲みの中の指定は残す。 */
.mame-article-spacing .body .article-content > :is(p, ul, ol)[class*="u-mb-"] {
	margin-bottom: var(--reading-paragraph-gap) !important;
}
.mame-article-spacing .body .article-content > :is(
	figure, blockquote, pre, table, .tblwrap, .wp-block-group,
	.swell-block-columns, .swell-block-postLink, .swell-block-faq,
	.swell-block-step, .mame-x-quote, .wp-block-cocoon-blocks-blank-box-1
):where(:not(.is-style-double, .swell-block-step.is-style-small)) { margin-block: var(--reading-block-gap) !important; }
.mame-article-spacing .body .article-content > :is(.swell-block-balloon, .speech-wrap) {
	margin-block: var(--reading-paragraph-gap) !important;
}
/* 本文直下の外部カードも、編集画面と同じ間隔へそろえる。 */
.mame-article-spacing .body .article-content > .swell-block-postLink:where(:has(> .p-blogCard.-external)) { margin-block: var(--space-4, 16px) !important; }
.mame-article-spacing .body .article-content > .swell-block-postLink:has(+ .swell-block-postLink) { margin-bottom: 0 !important; }
.mame-article-spacing .body .article-content > .swell-block-postLink + .swell-block-postLink { margin-top: var(--space-4) !important; }
.mame-article-spacing .body .article-content > .c-scrollHint + figure.wp-block-table { margin-top: var(--space-2) !important; }
.mame-article-spacing .body .article-content .swell-block-step__body > :last-child { margin-bottom: 0 !important; }

/* 囲みは白を基調にし、要点の青はラベル、注意の黄色は背景に残す。 */
.mame-article-spacing .body .article-content :is(.cap_box, .article-cta) { box-shadow: none; }
.mame-article-spacing .body .article-content :is(.is-style-bg_stripe, .is-style-bg_grid) {
	background-image: none;
	background-color: var(--surface) !important;
	text-align: left;
}
.mame-article-spacing .body .article-content .is-style-bg_stripe :is(ul, ol, li) { text-align: left !important; }
.mame-article-spacing .body .article-content .is-style-bg_stripe:has(ul, ol) {
	background-color: var(--surface) !important;
	border-color: var(--reading-component-border);
}
.mame-article-spacing .body .article-content :is(.is-style-big_icon_point, .is-style-big_icon_check, .is-style-big_icon_good) {
	--big-bd: var(--blue-500);
	background-color: var(--surface) !important;
	border-color: var(--reading-component-border);
}
.mame-article-spacing .body .article-content :is(.is-style-big_icon_check, .is-style-big_icon_good)::before { --big-bd: var(--blue-500); }
.mame-article-spacing .body .article-content .is-style-big_icon_point::before { content: var(--mame-box-label); }
.mame-article-spacing .body .article-content :is(.is-style-big_icon_check, .is-style-big_icon_good)::before { content: var(--mame-box-label); }
.mame-article-spacing .body .article-content .is-style-big_icon_memo::before { content: var(--mame-box-label); }

.mame-article-spacing .body .article-content :is(.is-style-big_icon_caution, .is-style-big_icon_bad, .is-style-big_icon_batsu) {
	--big-bd: var(--warning);
	background-color: #fff8e5 !important;
}
.mame-article-spacing .body .article-content :is(.is-style-big_icon_caution, .is-style-big_icon_bad, .is-style-big_icon_batsu)::before {
	content: var(--mame-box-label);
	background: #f1c04d;
	color: var(--text-primary);
}
.mame-article-spacing .body .article-content blockquote:not(.mame-x-quote__body) {
	padding: 16px 20px;
	border-left: 3px solid var(--border);
	background: var(--surface-sunken);
	color: var(--text-primary);
}
.mame-article-spacing .body .article-content blockquote::before,
.mame-article-spacing .body .article-content blockquote::after { content: none; }
.mame-article-spacing .body .article-content :is(ul, ol).is-style-num_circle > li {
	min-height: 32px;
	padding-left: 34px;
}
.mame-article-spacing .body .article-content .article-cta { background: var(--surface); }

/* Xの投稿は人物アイコンや吹き出しを付けず、出典のある引用枠で示す。 */
.mame-article-spacing .body .article-content .mame-x-quote {
 margin-block: var(--reading-block-gap);
 padding: 16px 20px;
 border: 1px solid var(--border);
 border-radius: 8px;
 background: #f7f8fa;
}
.mame-x-quote__header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 13px; }
.mame-x-quote__label { font-weight: 700; color: var(--text-primary); }
.mame-x-quote__header a { font-size: 12px; }
.mame-article-spacing .body .article-content .mame-x-quote__body { margin: 0 !important; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; }
.mame-article-spacing .body .article-content .mame-x-quote__body > p { margin: 0 !important; font: inherit; color: inherit; }
.mame-article-spacing .body .article-content .mame-x-quote__body > p + p { margin-top: 16px !important; }
.mame-x-quote__source { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 13px; line-height: 1.7; color: var(--text-secondary); overflow-wrap: anywhere; }
.mame-x-quote a { overflow-wrap: anywhere; }

/* 匿名の口コミには、既存の匿名アイコンと話者表記を使う。 */

.reader-toc-desktop {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 56;
	width: 54px;
	height: 54px;
	border: 0;
	border-radius: 50%;
	background: var(--blue-500);
	color: #fff;
	font: 700 13px/1.5 var(--font-ui);
	cursor: pointer;
}
.reader-toc-desktop[hidden] { display: none; }
.reader-toc-desktop:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.mame-article-spacing .tocmodal__x { width: 44px; height: 44px; top: 8px; right: 8px; }

@media (max-width: 620px) {
	.reader-toc-desktop { display: none; }
	.mame-article-spacing .mame-single > .w { padding-inline: 0; }
	.mame-article-spacing .mame-single .crumb { padding-inline: 16px; }
	.mame-article-spacing .mame-single .body { padding: 24px 16px; border: 0; border-radius: 0; }
	.mame-article-spacing .mame-single .art > .sec { margin-inline: 16px; }
	.mame-article-spacing .body .article-content .mame-x-quote { padding: 14px; }
	.mame-article-spacing .pg { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
	.mame-article-spacing .stickbar {
		gap: 8px;
		padding: 4px 16px calc(4px + env(safe-area-inset-bottom));
		background: var(--surface);
		backdrop-filter: none;
		box-shadow: none;
	}
	.mame-article-spacing .stickbar .ds-btn { min-height: 44px; padding: 8px 16px; font-size: 14px; }
	.reader-toc-button {
		min-width: 64px;
		min-height: 44px;
		padding: 8px 12px;
		border: 1px solid var(--border);
		border-radius: var(--radius-button);
		background: var(--surface);
		color: var(--text-primary);
		font: 700 14px/1.5 var(--font-ui);
		cursor: pointer;
	}
	.reader-toc-button[hidden] { display: none; }
	.reader-toc-button:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
	.mame-article-spacing .tocmodal__panel { width: calc(100vw - 32px); padding: 20px; }
	.mame-article-spacing .tocmodal__x { width: 44px; height: 44px; top: 8px; right: 8px; }
}