/* Blog index/detail redesign based on tiptop Blog.html. */

.tiptop-blog-page,
.single-post,
.category,
.tag,
.date {
	--tiptop-blog-accent: var(--tiptop-primary);
	--tiptop-blog-ink: var(--tiptop-contrast);
	--tiptop-blog-muted: var(--tiptop-muted);
	--tiptop-blog-border: var(--tiptop-border);
	--tiptop-blog-surface: var(--tiptop-surface);
	--tiptop-post-detail-page-bg: var(--tiptop-base);
	--tiptop-post-detail-surface: var(--tiptop-blog-surface);
	--tiptop-post-detail-text: var(--tiptop-blog-ink);
	--tiptop-post-detail-muted: var(--tiptop-blog-muted);
	--tiptop-post-detail-border: var(--tiptop-blog-border);
	background: var(--tiptop-base);
	color: var(--tiptop-blog-ink);
}

/* Unlike .tiptop-works-page__content/.tiptop-news-page__content/.tiptop-contact-page__content,
 * this wrapper was never added to front-layout-fixes.css's shared section-rhythm padding-block
 * rule, so the standard design's blog toolbar sat flush against the hero with no gap (reported
 * 2026-08-01). Match siblings' top gap; bottom stays owned by .tiptop-blog-layout below. */
.tiptop-blog-page__content {
	padding-top: var(--tt-space-section);
}

.tiptop-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	padding-bottom: clamp(48px, 6vw, 80px);
}

.tiptop-blog-layout:not(.has-sidebar) {
	grid-template-columns: minmax(0, 1fr);
}

/* Issue #767: the approved standard mock keeps 64px between the article grid
 * and the 320px sidebar. Change only the column gap: the primary column must
 * continue to absorb the remaining width, and immersive keeps its own layout. */
body.tiptop-standard-system .tiptop-blog-page .tiptop-blog-layout.has-sidebar,
body.tiptop-standard-system .tiptop-blog-page .content-layout.has-sidebar {
	column-gap: var(--tt-space-8);
}

.tiptop-blog-posts {
	display: block;
}

.tiptop-blog-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.tiptop-blog-column {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.tiptop-blog-posts .navigation.pagination {
	grid-column: 1 / -1;
}

.tiptop-blog-page .post-card,
.category .post-card,
.tag .post-card,
.date .post-card {
	display: block;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

/* The whole card is one <a class="tiptop-blog-card__link"> (content-front-blog-card.php),
 * so without an explicit reset the browser's default underlined-link style paints through
 * the title/meta/excerpt text underneath it. immersive-content-pages.css already resets this
 * for the immersive design's scoped variant of this selector; standard never got the
 * equivalent (reported 2026-08-01 — see standard-immersive-contract.md). */
.tiptop-blog-page .post-card .tiptop-blog-card__link,
.category .post-card .tiptop-blog-card__link,
.tag .post-card .tiptop-blog-card__link,
.date .post-card .tiptop-blog-card__link {
	color: inherit;
	text-decoration: none;
}

.tiptop-blog-page .post-card__image,
.category .post-card__image,
.tag .post-card__image,
.date .post-card__image {
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: 16px;
	background: var(--tiptop-blog-surface);
	overflow: hidden;
}

.tiptop-blog-page .post-card__image img,
.category .post-card__image img,
.tag .post-card__image img,
.date .post-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.tiptop-blog-page .post-card__body,
.category .post-card__body,
.tag .post-card__body,
.date .post-card__body {
	display: block;
	padding: 0;
}

.tiptop-blog-page .post-card__title,
.category .post-card__title,
.tag .post-card__title,
.date .post-card__title {
	margin: 0;
	color: var(--tiptop-blog-ink);
}

.tiptop-blog-page .post-card__meta,
.category .post-card__meta,
.tag .post-card__meta,
.date .post-card__meta {
	margin: 10px 0 0;
	color: var(--tiptop-blog-muted);
}

.tiptop-blog-page .post-card__excerpt,
.category .post-card__excerpt,
.tag .post-card__excerpt,
.date .post-card__excerpt {
	margin-top: 14px;
	color: var(--tiptop-text, var(--tt-color-text));
	font-size: var(--tt-text-note);
	font-weight: 500;
	line-height: calc(1.95 * var(--tt-leading-scale));
}

.tiptop-blog-page .post-card__excerpt p,
.category .post-card__excerpt p,
.tag .post-card__excerpt p,
.date .post-card__excerpt p {
	margin: 0;
}

.tiptop-blog-page .post-card__more,
.category .post-card__more,
.tag .post-card__more,
.date .post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-label);
	font-weight: 600;
	letter-spacing: calc(0.06em + var(--tt-letter-add));
	line-height: calc(1.5 * var(--tt-leading-scale));
	text-decoration: none;
}

.tiptop-blog-page .post-card__more span,
.category .post-card__more span,
.tag .post-card__more span,
.date .post-card__more span {
	color: var(--tiptop-blog-accent);
	font-size: 1.1em;
	line-height: 1;
}

.tiptop-blog-page .post-card__more:hover,
.tiptop-blog-page .post-card__more:focus,
.category .post-card__more:hover,
.category .post-card__more:focus,
.tag .post-card__more:hover,
.tag .post-card__more:focus,
.date .post-card__more:hover,
.date .post-card__more:focus {
	color: var(--tiptop-blog-muted);
}

.tiptop-blog-sidebar {
	display: flex;
	align-self: start;
	flex-direction: column;
	gap: 24px;
}

/* 目次がある詳細ページだけ外側を記事列の高さまで伸ばす。
 * 一覧・目次なし詳細は従来どおり中身の高さで止める。 */
.tiptop-blog-sidebar[data-tiptop-sidebar-has-track] {
	align-self: stretch;
	min-height: 0;
}

/* このトラックを記事列内で伸ばし、sticky/pin の終了位置を
 * 下段ウィジェットの直前に揃えて両者の重なりを防ぐ。 */
.tiptop-blog-sidebar > .tiptop-blog-sidebar__track {
	flex: 1 1 auto;
	min-height: 0;
}

.tiptop-blog-sidebar__sticky {
	position: sticky;
	top: 88px;
}

/* GSAPがpin要素へ焼くheightとは分離し、実際の目次だけを画面高で制限する。
 * 短い目次は自然高、長い目次だけ内部スクロールになる。 */
.tiptop-blog-sidebar__sticky > .tiptop-blog-toc {
	max-height: calc(100vh - 112px);
	overflow-y: auto;
}

.tiptop-blog-sidebar__widgets {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.tiptop-blog-toc__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tiptop-blog-toc__item {
	margin: 0;
}

.tiptop-blog-toc__item--level-3 {
	padding-left: 1em;
}

.tiptop-blog-toc__item a {
	display: block;
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-label);
	line-height: calc(1.7 * var(--tt-leading-scale));
	text-decoration: none;
}

.tiptop-blog-toc__item a:hover,
.tiptop-blog-toc__item a:focus-visible {
	color: var(--tiptop-blog-muted);
}

.tiptop-blog-widget,
.single-post .sidebar-section,
.category .sidebar-section,
.tag .sidebar-section,
.date .sidebar-section {
	border: 1px solid var(--tiptop-blog-border);
	border-radius: 0;
	padding: 22px;
	background: var(--tiptop-base);
	box-shadow: none;
}

.tiptop-blog-widget .button {
	width: 100%;
	justify-content: center;
	white-space: normal;
}

.tiptop-blog-widget.tiptop-blog-profile {
	display: grid;
	gap: var(--tt-space-4);
	text-align: center;
}

.tiptop-blog-widget.tiptop-blog-profile > .tiptop-blog-profile__image {
	width: min(100%, calc(var(--tt-space-8) * 2));
	margin: 0 auto;
	overflow: hidden;
	border-radius: 50%;
	aspect-ratio: 1;
}

.tiptop-blog-widget.tiptop-blog-profile > .tiptop-blog-profile__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tiptop-blog-widget.tiptop-blog-profile > .tiptop-blog-profile__name {
	margin: 0;
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-card);
	line-height: calc(1.5 * var(--tt-leading-scale));
}

.tiptop-blog-profile__text {
	color: var(--tiptop-blog-muted);
	font-size: var(--tt-text-note);
	line-height: calc(1.8 * var(--tt-leading-scale));
	text-align: left;
}

.tiptop-blog-profile__text p {
	margin: 0;
}

.tiptop-blog-widget.tiptop-blog-profile .site-social-links {
	justify-content: center;
}

.tiptop-blog-widget__title,
.single-post .sidebar-section__title,
.category .sidebar-section__title,
.tag .sidebar-section__title,
.date .sidebar-section__title {
	color: var(--tiptop-blog-ink);
}

.tiptop-blog-recent {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tiptop-blog-recent > li {
	padding: 12px 0;
	border-top: 1px solid var(--tiptop-blog-border);
}

.tiptop-blog-recent > li:first-child {
	padding-top: 0;
	border-top: 0;
}

/* 子カテゴリ：親と同じ罫線を重ねると子の数だけ線が増えて崩れるため、
 * インデントだけで階層を示す（モック _mockup/standard/blog.html に合わせる。2026-08-13）。 */
.tiptop-blog-categories-list .children {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0 0 0 16px;
	list-style: none;
}

.tiptop-blog-categories-list .children li {
	padding: 0;
	border-top: 0;
}

.tiptop-blog-recent a {
	display: block;
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-note);
	font-weight: 700;
	line-height: calc(1.6 * var(--tt-leading-scale));
	text-decoration: none;
	transition: opacity var(--tt-motion-duration-ui) ease;
}

/* このウィジェットだけhoverの視覚フィードバックが皆無だった不整合を解消
 * （ナビ等と同じink-fade機構に合わせる。2026-07-21監査）。 */
.tiptop-blog-recent a:hover,
.tiptop-blog-recent a:focus-visible {
	opacity: 0.7;
}

.tiptop-blog-recent time {
	display: block;
	margin-top: 6px;
	color: var(--tiptop-blog-muted);
	font-size: var(--tt-text-meta, 0.72rem);
	letter-spacing: calc(0.05em + var(--tt-letter-add));
}

.tiptop-blog-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tiptop-blog-categories ul,
.tiptop-blog-categories li {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tiptop-blog-categories a,
.single-post .sidebar-list--compact a,
.category .sidebar-list--compact a,
.tag .sidebar-list--compact a,
.date .sidebar-list--compact a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0.16rem 0.58rem;
	border: 1px solid var(--tiptop-blog-border);
	border-radius: var(--tt-radius-pill);
	background: var(--tiptop-base);
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-meta, 0.72rem);
	font-weight: 700;
	line-height: calc(1.35 * var(--tt-leading-scale));
	text-decoration: none;
}

.single-post .sidebar-section--accent,
.category .sidebar-section--accent,
.tag .sidebar-section--accent,
.date .sidebar-section--accent {
	border: 0;
	background: var(--tiptop-contrast-surface-bg, var(--tiptop-button-bg, var(--tiptop-blog-ink)));
	color: var(--tiptop-contrast-surface-text, var(--tiptop-button-text, var(--tiptop-base)));
}

.single-post .sidebar-section--accent .sidebar-section__title,
.category .sidebar-section--accent .sidebar-section__title,
.tag .sidebar-section--accent .sidebar-section__title,
.date .sidebar-section--accent .sidebar-section__title {
	color: var(--tiptop-contrast-surface-text, var(--tiptop-button-text, var(--tiptop-base)));
}

.single-post .sidebar-section--accent p,
.category .sidebar-section--accent p,
.tag .sidebar-section--accent p,
.date .sidebar-section--accent p {
	margin: 0 0 16px;
	color: var(--tiptop-contrast-surface-muted, color-mix(in srgb, var(--tiptop-contrast-surface-text, var(--tiptop-button-text, var(--tiptop-base))) 72%, transparent));
	font-size: var(--tt-text-note);
	line-height: calc(1.9 * var(--tt-leading-scale));
}

.single-post .sidebar-section--accent a,
.category .sidebar-section--accent a,
.tag .sidebar-section--accent a,
.date .sidebar-section--accent a {
	color: var(--tiptop-contrast-surface-text, var(--tiptop-button-text, var(--tiptop-base)));
	font-size: var(--tt-text-note);
	font-weight: 700;
	letter-spacing: calc(0.04em + var(--tt-letter-add));
	text-underline-offset: 0.3em;
}

.single-post .content-layout {
	padding-top: var(--tt-space-section-compact);
	padding-bottom: var(--tt-space-section-compact);
}

.single-post .entry {
	padding: 0;
}

.single-post .entry__title {
	margin: 0;
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-title);
	font-weight: 700;
	letter-spacing: calc(0.04em + var(--tt-letter-add));
	line-height: calc(1.45 * var(--tt-leading-scale));
}

/* 日付の下に32pxの余白が余っていた（2026-08-12・Issue #913・オーナー指摘
 * 「ブログ詳細の日付下の余白が広い」）。実測ではメタ下端→ヘッダー下端が
 * 実65px／モック33pxで、差はこの margin-bottom そのものだった。モックのメタは
 * 上下マージンを持たず、ヘッダーの padding-bottom 32px だけで下を作っている。
 *
 * font-size はここを触らないこと。モックはこの箱を 0.92rem にしているが、中身の
 * 日付とバッジが自分で 0.72rem を持つので**箱の値は表に出ない**。実サイトは
 * バッジ（.term-list）が箱から継承するため、0.92rem に上げるとバッジだけ
 * 大きくなってモックから離れる（2026-08-12に一度やって実測で気づいた）。 */
.single-post .entry__meta {
	margin: 0;
	color: var(--tiptop-blog-muted);
	font-size: var(--tt-text-meta, 0.72rem);
	letter-spacing: calc(0.04em + var(--tt-letter-add));
}

.single-post .entry__image {
	margin: 0 0 40px;
	background: var(--tiptop-blog-surface);
}

.single-post .entry__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
}

.single-post .entry__content {
	max-width: var(--tiptop-text-width);
}

.single-post .entry__content p {
	font-size: var(--tt-text-body);
	line-height: calc(2.05 * var(--tt-leading-scale));
}

@media (max-width: 960px) {
	.tiptop-blog-sidebar[data-tiptop-sidebar-has-track] {
		align-self: start;
		min-height: auto;
	}

	.tiptop-blog-sidebar > .tiptop-blog-sidebar__track {
		flex: 0 0 auto;
		min-height: auto;
	}

	.tiptop-blog-sidebar__sticky {
		position: static;
	}

	.tiptop-blog-sidebar__sticky > .tiptop-blog-toc {
		max-height: none;
		overflow-y: visible;
	}

	/* サイドバーが本文の下へ回り込むと、検索フォームの width: 100% に上限が無く
	 * サイドバーいっぱい（900pxで856px）まで伸びていた。モックは全幅の帯でも
	 * 383px で止まる（2026-08-12・Issue #913）。max-width だけを足すので、
	 * 375px など親が383pxより狭い画面では従来どおり親幅に従う。
	 * 新しいブレークポイントは作らず既存の960px帯の中で完結させている
	 * （820px＝ナビ・781px＝イマーシブ標準値と兼用の値があり、増やすと埋もれる）。 */
	body.tiptop-standard-system.single-post .tiptop-blog-widget--search form.search-form {
		max-width: 383px;
	}

	.tiptop-blog-hero__inner,
	.tiptop-blog-layout,
	.single-post .content-layout,
	.category .content-layout,
	.tag .content-layout,
	.date .content-layout {
		grid-template-columns: 1fr;
	}
}

/* 一覧（ブログ／カテゴリー／タグ／日付）の「本文＋サイドバー」は 1100px で1列へ
 * （2026-08-10・Issue #833）。承認済みモック _mockup/tiptop-pages.css:563 は
 * 1100px以下で .blog-layout を1列に落とすが、実サイトは上の 960px ブロックだけで
 * 折り返していたため 961〜1100px が2カラムのままで、本文が痩せていた。
 *
 * 上の960pxブロックは**そのまま残す**（境界を動かさない）。理由は2つ：
 * ①記事詳細（`.single-post .content-layout`）はモックも 960px 境界
 * （_mockup/tiptop-single.css:608）なので一覧とは分ける必要がある。
 * ②上のブロックはモード非限定で、`.category/.tag/.date .content-layout` には
 * イマーシブ側の上書きが無い。境界を動かすとイマーシブの一覧も一緒に変わる。
 * そのためここは標準スコープに閉じ、961〜1100px の帯だけ足す。
 * （コメント内にモードのセレクタ文字列を書くと check-mode-drift が
 * 新規ルールと誤検知するため、ここでは書かない。） */
@media (max-width: 1100px) {
	body.tiptop-standard-system .tiptop-blog-layout,
	body.tiptop-standard-system .category .content-layout,
	body.tiptop-standard-system .tag .content-layout,
	body.tiptop-standard-system .date .content-layout {
		grid-template-columns: 1fr;
	}

	/* Issue #917：下層の外枠は base-system.css でモックの左右22pxへ固定する。
	 * この入れ子だけは下の760pxルールでtabletガターをもう一度差し引くため、
	 * 標準では親幅いっぱいへ戻して二重ガターを防ぐ。 */
	body.tiptop-standard-system .tiptop-blog-layout {
		width: 100%;
	}

	/* Issue #837: the archive modifier is emitted only for the standard Blog list.
	 * Once the layout stacks, stop following with the same 1100px boundary. */
	.tiptop-blog-sidebar--archive-sticky .tiptop-blog-sidebar__sticky {
		position: static;
		top: auto;
	}
}

@media (max-width: 760px) {
	.tiptop-blog-hero__inner,
	.tiptop-blog-layout,
	.single-post .content-layout,
	.category .content-layout,
	.tag .content-layout,
	.date .content-layout {
		width: min(calc(100% - var(--tt-gutter-tablet)), var(--tt-width-default));
	}

	.tiptop-blog-list,
	.category .post-list,
	.tag .post-list,
	.date .post-list {
		grid-template-columns: 1fr;
	}

	.tiptop-blog-column {
		gap: 36px;
	}
}

/* ============================================================
   ここから下は blog-page-adjustments.css を吸収したもの
   （2026-08-11・Issue #645 Phase B）。

   このファイルと調整ファイルは inc/enqueue.php の鎖で完全に隣接して
   おり（間に何も挟まらない）、調整ファイルは常に直後に読まれていた。
   3本目の blog-comment-submit-accent.css はさらに後ろなので、吸収後も
   「base → 調整 → コメント送信」の相対順序は変わらない。
   よって末尾へそのまま連結すればカスケード順は変わらない。
   宣言の中身は1文字も変えていない（cat で連結）。

   ⚠ 下のブロックは「後に書いてある方が勝つ」ことに依存している。
   同じセレクタを2回書いている組が22ある（コメント欄・フォーム・
   サイドバー・ページ送りのフォーカス表示などに集中。3回以上のものは無い）。
   順序を入れ替えたり、重複を「片方だけ残す」形で整理すると見た目が
   変わる。整理するならセレクタごとに最終的に効いている宣言の集合を
   作ってからにすること。

   ※説明にセレクタをそのまま書き並べると scripts/check-mode-drift.js が
   コメント行を新規ルールと誤検知する（行頭の照合しか見ないため）。
   ============================================================ */

/* Final small adjustments for blog HTML alignment. */

.tiptop-blog-page .post-card__excerpt .excerpt-more,
.category .post-card__excerpt .excerpt-more,
.tag .post-card__excerpt .excerpt-more,
.date .post-card__excerpt .excerpt-more {
	display: none !important;
}

/*
 * Issue #694: the blog toolbar owned the standard search decoration, so moving the
 * form into the sidebar would otherwise leave standard mode unstyled. Keep the
 * cataloged underline + transparent icon contract in the wired --search context.
 * The old toolbar selectors stay in front-intro-list-unstyled.css until B-1c.
 * Widget framing and title typography are owned by design-system.css in standard
 * mode; the old 22px padding and 0.82rem/800 title overrides were dead/conflicting.
 */
.tiptop-blog-page .tiptop-blog-widget--search .search-form,
.tiptop-blog-page .tiptop-blog-widget--search form[role="search"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 52px;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	border-bottom: 1px solid var(--tiptop-blog-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	gap: 0;
}

.tiptop-blog-page .tiptop-blog-widget--search .search-form label,
.tiptop-blog-page .tiptop-blog-widget--search form[role="search"] label {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.tiptop-blog-page .tiptop-blog-widget--search .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.tiptop-blog-page .tiptop-blog-widget--search .search-field {
	display: block;
	width: 100%;
	min-width: 0;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0 var(--tt-space-3) 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--tiptop-blog-ink);
	font: inherit;
	font-size: var(--tt-text-body);
}

.tiptop-blog-page .tiptop-blog-widget--search .search-submit {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	min-width: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--tiptop-blog-muted);
	transform: none;
}

.tiptop-blog-page .tiptop-blog-widget--search .search-submit svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tiptop-blog-page .tiptop-blog-widget--search :is(.search-form, form[role="search"]):focus-within {
	border-bottom-color: var(--tiptop-blog-ink);
}

.tiptop-blog-page .tiptop-blog-widget--search .search-submit:hover,
.tiptop-blog-page .tiptop-blog-widget--search .search-submit:focus-visible {
	background: transparent;
	color: var(--tiptop-blog-ink);
}

.tiptop-blog-page .tiptop-blog-widget--search .search-submit:focus-visible {
	outline: var(--tiptop-field-focus-width) solid var(--tt-form-focus-color, var(--tiptop-blog-ink));
	outline-offset: 3px;
}

.tiptop-blog-categories-list .current-cat > a,
.tiptop-blog-categories-list > .is-current > a {
	font-weight: 700;
}

/* #184: Blog v2 minimal alignment. Keep template/PHP structure unchanged. */
.tiptop-blog-page .tiptop-blog-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
	gap: clamp(28px, 5vw, 40px);
	align-items: center;
}

.tiptop-blog-page .tiptop-blog-hero__art {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 8;
	border: 1px solid var(--tiptop-blog-border);
	background: var(--tiptop-blog-surface);
	overflow: hidden;
}

.tiptop-blog-page .tiptop-blog-hero__art img {
	display: block;
	width: min(62%, 220px);
	height: auto;
	max-height: 72%;
	object-fit: contain;
	opacity: 0.9;
}

.tiptop-blog-page .tiptop-blog-hero__art span {
	color: var(--tiptop-blog-ink);
	font-size: clamp(1rem, 3vw, 1.6rem);
	font-weight: 700;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
}

/* main.css の .post-card__image（トークン参照）より詳細度が高いため、ここが角丸の実質的な
 * 決定点になる。0のハードコードだと標準モードの角丸方針が一覧ページだけ効かないので
 * トークン参照にする（イマーシブは --tt-radius-md が0のまま＝現状維持）。 */
.tiptop-blog-page .post-card__image,
.category .post-card__image,
.tag .post-card__image,
.date .post-card__image,
.single-post .entry__image,
.single-post .entry__image img {
	border-radius: var(--tt-radius-md, 0);
	box-shadow: none;
}

.sidebar-list--compact a:hover,
.sidebar-list--compact a:focus-visible {
	border-color: var(--tiptop-button-bg);
	background: var(--tiptop-button-bg);
	color: var(--tiptop-button-text);
}

.tiptop-blog-page .page-numbers:hover,
.tiptop-blog-page .page-numbers:focus-visible,
.category .page-numbers:hover,
.category .page-numbers:focus-visible,
.tag .page-numbers:hover,
.tag .page-numbers:focus-visible,
.date .page-numbers:hover,
.date .page-numbers:focus-visible {
	color: var(--tiptop-blog-ink);
}

/* news/worksアーカイブにはあった:focus-visibleのアウトラインがblogだけ
 * 抜けていた不整合を解消（2026-07-21監査）。 */
.tiptop-blog-page .page-numbers:focus-visible,
.category .page-numbers:focus-visible,
.tag .page-numbers:focus-visible,
.date .page-numbers:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--tiptop-blog-ink) 20%, transparent);
	outline-offset: 3px;
}

.single-post .entry__meta a {
	color: var(--tiptop-blog-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.24em;
}

.single-post .entry__meta a:hover,
.single-post .entry__meta a:focus-visible {
	color: var(--tiptop-blog-muted);
}

.single-post .entry__meta a.tiptop-badge--category {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 2px 10px;
	border: 1px solid var(--tiptop-blog-accent);
	border-radius: var(--tt-radius-pill);
	background: color-mix(in srgb, var(--tiptop-blog-accent) var(--tt-tint-soft), transparent);
	color: var(--tiptop-blog-accent);
	font-size: var(--tt-text-meta);
	font-weight: 500;
	text-decoration: none;
	transition:
		border-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		background-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		opacity var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}

.single-post .entry__meta a.tiptop-badge--category:hover,
.single-post .entry__meta a.tiptop-badge--category:focus-visible {
	border-color: var(--tiptop-blog-accent);
	background: color-mix(in srgb, var(--tiptop-blog-accent) var(--tt-tint-strong), transparent);
	color: var(--tiptop-blog-accent);
}

.single-post .entry__meta a.tiptop-badge--category:hover {
	opacity: 0.62;
}

/* #304: WordPress comments, restyled without replacing native behavior. */
.single-post .blog-comments {
	--tiptop-comment-surface: var(--tiptop-contrast-surface-bg);
	--tiptop-comment-text: var(--tiptop-contrast-surface-text);
	--tiptop-comment-muted: var(--tiptop-contrast-surface-muted);
	--tiptop-comment-border: var(--tiptop-contrast-surface-border);
	/* 2026-07-23: accentはButton/ghost/SocialLinkのhover doctrineから撤去した（露出過多のため）。
	 * コメント面のアクション色（Reply hover・編集ペン・パーマリンクhover）はmutedへ揃える。 */
	--tiptop-comment-action: var(--tiptop-muted);
	margin-top: clamp(64px, 9vw, 112px);
	padding: clamp(32px, 5vw, 64px);
	border: 1px solid var(--tiptop-comment-border);
	background: var(--tiptop-comment-surface);
	color: var(--tiptop-comment-text);
}

.single-post .blog-comments__title {
	display: inline-flex;
	gap: var(--tt-space-2);
	align-items: center;
	margin: 0 0 clamp(28px, 4vw, 44px);
	color: var(--tiptop-comment-text);
	font-size: var(--tt-text-section);
	font-weight: 600;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
}

.single-post .blog-comments__title-icon {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 1px solid var(--tiptop-comment-border);
	border-radius: var(--tt-radius-pill);
	font-size: var(--tt-text-meta);
}

.single-post .blog-comments__list,
.single-post .blog-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-post .blog-comments__list .children {
	margin-left: clamp(24px, 5vw, 72px);
}

.single-post .blog-comment {
	margin: 0;
	padding: clamp(28px, 4vw, 44px) 0;
	border-top: 1px solid var(--tiptop-comment-border);
}

.single-post .blog-comments__list > .blog-comment:first-child {
	border-top: 0;
	padding-top: 0;
}

.single-post .blog-comment__body {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: clamp(16px, 3vw, 28px);
}

.single-post .blog-comment__avatar-image {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var(--tt-radius-pill);
	object-fit: cover;
}

/* Gravatar 無効時のローカル・フォールバックアバター（コメント面トークンで可読・線画で統一）。 */
.single-post .blog-comment__avatar-fallback {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--tiptop-comment-border);
	border-radius: var(--tt-radius-pill);
	background: color-mix(in srgb, var(--tiptop-comment-text) var(--tt-tint-faint), transparent);
	color: var(--tiptop-comment-text);
}

.single-post .blog-comment__header {
	display: flex;
	gap: var(--tt-space-4);
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--tt-space-3);
}

.single-post .blog-comment__identity {
	display: grid;
	gap: 4px;
}

.single-post .blog-comment__author,
.single-post .blog-comment__author a {
	color: var(--tiptop-comment-text);
	font-weight: 700;
	text-decoration: none;
}

.single-post .blog-comment__permalink {
	color: var(--tiptop-comment-muted);
	font-size: var(--tt-text-meta);
	text-decoration: none;
}

.single-post .blog-comment__permalink:hover,
.single-post .blog-comment__permalink:focus-visible {
	color: var(--tiptop-comment-action);
}

/* 編集ペン（自分/権限者のコメント・ヘッダー右上）。 */
.single-post .blog-comment__edit {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--tiptop-comment-action);
	transition: color var(--tt-motion-duration-ui) ease;
}

.single-post .blog-comment__edit:hover,
.single-post .blog-comment__edit:focus-visible {
	color: var(--tiptop-comment-text);
}

/* Reply はコメント本文の下・戻る矢印付き・本文色（画像①準拠）。 */
.single-post .blog-comment__actions {
	margin-top: var(--tt-space-3);
}

.single-post .comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tiptop-comment-text);
	font-size: var(--tt-text-meta);
	font-weight: 500;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
	text-decoration: none;
}

.single-post .comment-reply-link > span {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.single-post .blog-comment__reply-icon {
	flex: 0 0 auto;
}

.single-post .comment-reply-link:hover,
.single-post .comment-reply-link:focus-visible {
	color: var(--tiptop-comment-action);
}

.single-post .blog-comment__text,
.single-post .blog-comment__text p {
	color: var(--tiptop-comment-text);
	line-height: var(--tt-leading-base);
}

.single-post .blog-comment__text p:last-child {
	margin-bottom: 0;
}

.single-post .blog-comment__moderation {
	margin: 0 0 var(--tt-space-3);
	color: var(--tiptop-comment-muted);
	font-style: italic;
}

.single-post .comment-respond {
	margin-top: clamp(40px, 6vw, 72px);
	padding-top: clamp(32px, 5vw, 56px);
	border-top: 1px solid var(--tiptop-comment-border);
}

.single-post .comment-reply-title {
	margin: 0 0 var(--tt-space-5);
	color: var(--tiptop-comment-text);
	font-size: var(--tt-text-card);
	font-weight: 400;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
}

.single-post .comment-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tt-space-4);
}

.single-post .comment-form > p {
	margin: 0;
}

.single-post .comment-form-comment,
.single-post .comment-form-url,
.single-post .logged-in-as,
.single-post .comment-notes,
.single-post .form-submit {
	grid-column: 1 / -1;
}

.single-post .comment-form label:not(.screen-reader-text) {
	display: block;
	margin-bottom: var(--tt-space-2);
	color: var(--tiptop-comment-muted);
	font-size: var(--tt-text-label);
}

.single-post .comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.single-post .comment-form textarea {
	width: 100%;
	box-shadow: none;
	color: var(--tiptop-comment-text);
	font: inherit;
}

.single-post .comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
	min-height: 48px;
	padding: 10px 12px;
}

.single-post .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.single-post .comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 2px;
}

.single-post .comment-form-cookies-consent label {
	margin-bottom: 0;
}

.single-post .comment-form textarea {
	min-height: 180px;
	padding: clamp(16px, 3vw, 24px);
	resize: vertical;
}

.single-post .comment-form input::placeholder,
.single-post .comment-form textarea::placeholder {
	color: var(--tiptop-comment-muted);
	opacity: 1;
}

.single-post .comment-form .form-submit {
	display: flex;
	justify-content: flex-end;
}

.single-post .comment-form .submit svg {
	display: block;
}

/* ログイン行：名前（左）＋プロフィール/ログアウトのアイコン（右）＝画像①準拠。 */
.single-post .logged-in-as {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tt-space-3);
}

.single-post .logged-in-as__name {
	color: var(--tiptop-comment-text);
	font-weight: 700;
}

.single-post .logged-in-as__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--tt-space-3);
}

.single-post .logged-in-as__icon {
	display: inline-flex;
	color: var(--tiptop-comment-muted);
	transition: color var(--tt-motion-duration-ui) ease;
}

.single-post .logged-in-as__icon:hover,
.single-post .logged-in-as__icon:focus-visible {
	color: var(--tiptop-comment-text);
}

.single-post .blog-comments__notice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: var(--tt-space-5) 0 0;
	color: var(--tiptop-comment-muted);
	font-size: var(--tt-text-meta);
	line-height: calc(1.7 * var(--tt-leading-scale));
}

.single-post .blog-comments__notice-icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 1px;
}

.single-post .comment-form .required,
.single-post .comment-form .required-field-message,
.single-post .comment-form .logged-in-as {
	color: var(--tiptop-comment-muted);
}

.single-post .comment-form .error,
.single-post .comment-form [aria-invalid="true"] {
	border-color: var(--tt-color-danger);
}

@media (prefers-reduced-motion: no-preference) {
}

@media (max-width: 960px) {
	.tiptop-blog-page .tiptop-blog-hero__inner {
		grid-template-columns: 1fr;
	}

	.tiptop-blog-page .tiptop-blog-hero__art {
		display: none;
	}
}

@media (max-width: 640px) {
	.single-post .blog-comments {
		padding: 28px 20px;
	}

	.single-post .blog-comments__list .children {
		margin-left: 18px;
	}

	.single-post .blog-comment__body {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 14px;
	}

	.single-post .blog-comment__avatar-image {
		width: 42px;
		height: 42px;
	}

	.single-post .blog-comment__header {
		flex-wrap: wrap;
	}

	.single-post .comment-form {
		grid-template-columns: 1fr;
	}

	.single-post .comment-form-author,
	.single-post .comment-form-email {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   標準モードのブログ詳細をモック（tiptop-single）へ合わせる
   （2026-08-07・オーナー承認）
   方針はトップのNEWSと同じ「面を反転させず、罫線と余白で区切る」。
   イマーシブは既存の見た目（濃色パネルのコメント欄）を維持する。
   ============================================================ */

/* --- コメント欄：黒帯をやめて白面＋上罫線に --- */
/* .blog-comments は --tiptop-comment-* の4トークンで面と文字色を作っているので、
 * トークンを差し替えるだけで見出し・罫線・本文・Reply等が一括で追従する。 */
body.tiptop-standard-system.single-post .blog-comments {
	--tiptop-comment-surface: transparent;
	--tiptop-comment-text: var(--tiptop-text);
	--tiptop-comment-muted: var(--tiptop-muted);
	--tiptop-comment-border: var(--tiptop-border);
	padding: clamp(32px, 5vw, 48px) 0 0;
	border: 0;
	border-top: 1px solid var(--tiptop-border);
}

/* 見出しは丸枠アイコンをやめて素のアイコン＋件数に */
body.tiptop-standard-system.single-post .blog-comments__title-icon {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	color: var(--tiptop-muted);
}

/* 1件目の上にも罫線を引く（リスト側で持つ） */
body.tiptop-standard-system.single-post .blog-comments__list {
	border-top: 1px solid var(--tiptop-border);
}

/* アバターは40pxの円形（カタログのcircular契約） */
body.tiptop-standard-system.single-post .blog-comment__body {
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--tt-space-4);
}

body.tiptop-standard-system.single-post .blog-comment__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--tiptop-surface);
	color: var(--tiptop-muted);
}

/* 返信は左1本の縦罫でぶら下げる（インデントの余白だけに頼らない） */
body.tiptop-standard-system.single-post .blog-comments__list .children {
	margin-left: 0;
	padding-left: var(--tt-space-5);
	border-left: 1px solid var(--tiptop-border);
}

/* --- カテゴリバッジ：トップのニュースタグと同じアクセントの薄塗り・枠線なし --- */
/* --tiptop-blog-accent は --tiptop-primary(=黒)由来で他6箇所からも参照されるため、
 * トークンごと差し替えず、このバッジだけを上書きする。
 * 2026-08-12・Issue #917：モックの実測値は 11.52px / line-height 1.7 /
 * padding 0.18em 0.8em / min-height 24px。背景はアクセント10%をbaseへ混ぜた色で、
 * mono-editorial の生値は持たない。既存の --tt-tint-soft(16%) はこの役割には濃すぎる。
 * 上のモード非限定ルールはイマーシブにも効くため、そちらは動かさず標準だけ上書きする。 */
body.tiptop-standard-system.single-post .entry__meta > time {
	font-size: var(--tt-text-meta);
}

body.tiptop-standard-system.single-post .entry__meta a.tiptop-badge--category {
	min-height: 24px;
	padding: 0.18em 0.8em;
	border: 0;
	background: color-mix(in srgb, var(--tiptop-accent) 10%, var(--tiptop-base));
	color: var(--tiptop-accent);
	line-height: calc(1.7 * var(--tt-leading-scale));
}

body.tiptop-standard-system.single-post .entry__meta a.tiptop-badge--category:hover,
body.tiptop-standard-system.single-post .entry__meta a.tiptop-badge--category:focus-visible {
	border-color: var(--tiptop-accent);
	background: var(--tiptop-accent);
	color: var(--tiptop-base);
	opacity: 1;
}

/* --- 入力欄：角丸0の取り残しを sm(8px) へ --- */
body.tiptop-standard-system.single-post .comment-form input[type="text"],
body.tiptop-standard-system.single-post .comment-form input[type="email"],
body.tiptop-standard-system.single-post .comment-form input[type="url"],
body.tiptop-standard-system.single-post .comment-form textarea {
	border-radius: var(--tt-radius-sm);
}

/* --- ヒーロー画像：16:9＋トップの画像と同じ角丸 ---
 * .tiptop-post-detail__hero はニュース詳細とも共有するクラスだが、このファイルは
 * ブログ系ページでしかenqueueされないため、ニュース詳細側は news-page.css
 * で同じ角丸を当てている（このファイルを広げても届かない）。 */
body.tiptop-standard-system.single-post .tiptop-post-detail__hero {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--tt-radius-md);
}

body.tiptop-standard-system.single-post .tiptop-post-detail__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 本文の測度：サイドバーがある分、読み物幅に絞る --- */
body.tiptop-standard-system.single-post .tiptop-post-detail__body {
	max-width: 42em;
}

/* --- 送信ボタン：標準モードは文字ラベル入りのpillボタンにする --- */
/* comments.php 側で出力を分岐し、標準は <span>コメントを送信</span> を持つ。
 * 上の .single-post .comment-form .submit は 58×58px 固定＋padding:0 !important で
 * アイコン専用の寸法を作っているため、標準ではそれを解除する。
 * ⚠ padding は相手が !important のため同じ手段でしか上書きできない
 * （このプロジェクトは !important を避ける方針だが、!important を打ち消すには
 *  !important が必要という例外。詳細度だけでは勝てない）。 */
body.tiptop-standard-system.single-post .comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 44px;
	padding: 0.7em 1.6em !important;
	letter-spacing: 0.08em !important;
	border-radius: var(--tt-radius-pill);
	/* 行間はモックと同じ normal（2026-08-10・Issue #784）。モックの送信ボタンは
	 * `.button` に line-height の指定が無く、`<button>` は既定で body の行間を継承しない
	 * ため normal になる。実サイトは 1.6 で 19.968px だった。
	 * **見た目は変わらない**：この要素は min-height 44px と inline-flex + align-items:center で
	 * 高さも文字の縦位置も決まっており、行間19.968px→normal(約15px)でも 44px のまま
	 * （padding 0.7em×2＋文字で 44px に届かないため min-height が支配する）。 */
	line-height: normal;
}

/* 標準モードのブログ一覧カード間隔（2026-08-08・モック移行）。
 * blog-page.css の 40px は数値直書きでトークン外だったため、標準モードだけ
 * トップのブログ節と同じ --tt-space-6（32px）へ揃える。イマーシブは40pxのまま。 */
body.tiptop-standard-system .tiptop-blog-list {
	gap: var(--tt-space-6);
}

/* ブログ詳細のタイトル（2026-08-09・モックへ）。
 * 実サイトは 39.2px / 800 でモック（clamp(1.5rem, 2.6vw, 2.2rem)＝1440pxで35.2px / 700）より
 * 一段強かった。他の詳細ページ（実績・ニュース）と同じ調子に揃える。 */
body.tiptop-standard-system.single-post .entry__title {
	font-size: var(--tt-text-title);
	font-weight: 700;
	/* 和文なので字間を足さない（2026-08-12・Issue #913）。実績詳細・新着詳細も同じ。 */
	letter-spacing: normal;
	/* タイトル直下の余白。2026-08-11（Issue #900）に「モックは24px」として
	 * --tt-space-5 を入れたが、実測するとモックは **32px** で、24px は誤りだった
	 * （2026-08-12・Issue #913。モックは 2026-08-11 に組み直されている）。
	 * 同時に .entry__meta の margin-top: 18px を 0 にしたので、隣接マージンの
	 * 相殺を当てにする書き方もやめてここだけで距離を作る。 */
	margin-bottom: var(--tt-space-6);
}

/* ============================================================
   ブログ詳細の残差をモックへ（2026-08-09・スクショ＋全要素の実測突合）
   前回「一通り完了」と判断したが、目次・本文タイポ・コメントの基準サイズが
   まとめてズレていた。モックとの実測差分をそのまま埋める。
   ============================================================ */

/* --- 目次：面＋罫線＋角丸のカード（実サイトは面も罫線も無かった） --- */
body.tiptop-standard-system .tiptop-blog-toc {
	padding: var(--tt-space-5);
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-md);
	background: var(--tiptop-surface);
	font-size: var(--tt-text-body);
	line-height: 2;
	/* モックの目次は `.tiptop-blog-toc` 単独＝ウィジェットではないので block（2026-08-11・Issue #900）。
	 * 実サイトのマークアップは nav に `tiptop-blog-widget` を兼ねさせているため、
	 * design-system.css の標準モード用ウィジェット規則（`.tiptop-blog-widget`）が持つ
	 * `display: grid; row-gap: 12px` まで乗り、見出し→最初の項目が
	 * **モック16px に対し 28px**（16px の margin に row-gap 12px が上乗せ）になっていた。
	 * 同詳細度(0,2,1)でこのファイルが後勝ちするので、ここで block へ戻す。 */
	display: block;
}

body.tiptop-standard-system .tiptop-blog-toc ol {
	padding-left: 1.2em;
}

/* 項目の間隔もモックへ（2026-08-11・Issue #900）。モックの `.tiptop-blog-toc ol` は 8px、
 * 実サイトは基底 `.tiptop-blog-toc__list`(0,1,0) の 10px のままだった。
 * イマーシブ側は immersive-content-pages.css が同じリストへ別の gap を持つので影響しない。 */
body.tiptop-standard-system .tiptop-blog-toc__list {
	gap: var(--tt-space-2);
}

body.tiptop-standard-system .tiptop-blog-toc a {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-note);
	line-height: 1.8;
}

body.tiptop-standard-system .tiptop-blog-toc a:hover,
body.tiptop-standard-system .tiptop-blog-toc a:focus-visible {
	color: var(--tiptop-contrast);
}

/* --- 本文：行間2.42→2.0、h2は33.6px→1.25remで上罫線つき --- */
body.tiptop-standard-system.single-post .tiptop-post-detail__body {
	line-height: 2;
}

body.tiptop-standard-system.single-post .tiptop-post-detail__body h2 {
	margin-top: var(--tt-space-8);
	margin-bottom: var(--tt-space-4);
	padding-top: var(--tt-space-5);
	border-top: 1px solid var(--tiptop-border);
	font-size: var(--tt-text-heading);
	font-weight: 700;
	line-height: 1.7;
}

body.tiptop-standard-system.single-post .tiptop-post-detail__body h3 {
	margin-top: var(--tt-space-7);
	margin-bottom: var(--tt-space-3);
	font-size: var(--tt-text-subheading);
	font-weight: 700;
	line-height: 1.7;
}

/* --- コメント：基準フォントが16px/行間36.8pxのままだった --- */
body.tiptop-standard-system.single-post .blog-comments,
body.tiptop-standard-system.single-post .comment-form {
	font-size: var(--tt-text-body);
	line-height: 2;
}

body.tiptop-standard-system.single-post .blog-comments__title {
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-section);
	font-weight: 500;
	line-height: 2;
	/* 見出し下の余白（2026-08-11・Issue #900）。モックは 32px、実サイトは
	 * `.single-post .blog-comments__title`(0,2,1) の clamp(28px, 4vw, 44px) が
	 * 1920px で上限に張り付いて **44px** だった。
	 * この差は突合ツールが報告しない（モック「2」／実サイト「コメント数 2」と
	 * 文言が違い対応が取れないため）＝要素を直接並べて見つけたもの。 */
	margin-bottom: var(--tt-space-6);
	/* 書体・字間・アイコンとの間隔をモックへ（2026-08-11・PR #904 の新パスが検出）。
	 * モック（_mockup/tiptop-single.css:283-291）は `font-family: var(--font-latin)`＝Jost、
	 * 字間 0.04em、gap 12px。実サイトは書体の指定が無く和文（Zen Kaku Gothic New）を継承し、
	 * 字間は `.single-post .blog-comments__title` の 0.08em＝モックの2倍だった。
	 *
	 * 日本語を欧文書体で描く心配は無い：この見出しで**目に見えるのはアイコンと数字だけ**で、
	 * 「コメント数」は `<span class="screen-reader-text">`（comments.php:89）＝読み上げ専用。
	 * 突合ツールが「コメント数 2」というキーを作っていたのは textContent が
	 * 読み上げ専用テキストも拾うためで、画面には出ていない。
	 *
	 * このファイル下方の `.comment-reply-title` へ入れた同じ是正と同型＝
	 * **共通ルール漏れが隣の要素にも残っていた**実例。 */
	display: flex;
	gap: var(--tt-space-3);
	font-family: var(--tiptop-font-latin);
	letter-spacing: calc(0.04em + var(--tt-letter-add));
}

body.tiptop-standard-system.single-post .comment-reply-title {
	font-size: var(--tt-text-subheading);
	font-weight: 700;
	line-height: 1.8;
}

/* コメントフォームの細部（2026-08-09・実測突合の2周目）。
 * ラベル・返信見出し・textareaのパディング・注意書きがモックとズレていた。 */
body.tiptop-standard-system.single-post .comment-reply-title {
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-card);
	font-weight: 500;
	line-height: 2;
}

body.tiptop-standard-system.single-post .comment-form label:not(.screen-reader-text) {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-label);
	font-weight: 500;
	line-height: 2;
}

body.tiptop-standard-system.single-post .comment-form textarea {
	padding: 0.7em 0.9em;
	font-size: var(--tt-text-body);
	line-height: 1.9;
}

body.tiptop-standard-system.single-post .comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
	font-size: var(--tt-text-body);
	line-height: 1.9;
}

body.tiptop-standard-system.single-post .blog-comments__notice {
	/* コメント一覧との間隔もモックへ（2026-08-10）。モックの同名クラスは margin-top 32px、
	 * 実サイトは `.single-post .blog-comments__notice`（0,2,1）の 24px だった。
	 * サイズ（12.16px）は既に一致。 */
	margin-top: var(--tt-space-6);
	font-size: var(--tt-text-meta);
	line-height: 2;
}

/* 目次は番号付きリスト（モックは ol の既定マーカーが見える）。
 * 実サイトは list-style: none が効いて番号が消えていた。 */
body.tiptop-standard-system .tiptop-blog-toc ol {
	list-style: decimal;
}

/* 本文中の画像もカードと同じ角丸に揃える（モックの .entry-body figure img と同じ）。 */
body.tiptop-standard-system.single-post .tiptop-post-detail__body img,
body.tiptop-standard-system.single-post .tiptop-post-detail__body figure img {
	border-radius: var(--tt-radius-md);
}

/* コメント欄のアイコンとボタン（2026-08-09・実測突合の3周目）。
 * あやちゃんの「アイコンやボタンもまだ全然違う」への対応。 */

/* コメント数は見出しの主役ではないのでグレーで控えめに（実サイトは#111・行高42px）。 */
body.tiptop-standard-system.single-post .blog-comments__count {
	color: var(--tiptop-muted);
	line-height: 2;
}

/* ログイン中の表示名は本文色（実サイトはグレーで沈んでいた）。 */
body.tiptop-standard-system.single-post .logged-in-as {
	color: var(--tiptop-text);
}

/* プロフィール編集／ログアウトは32pxの丸いアウトラインボタン
 * （実サイトは18pxの素のアイコンで、枠も丸みも無かった）。 */
body.tiptop-standard-system.single-post .logged-in-as__icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-pill);
	color: var(--tiptop-muted);
}

body.tiptop-standard-system.single-post .logged-in-as__icon svg {
	width: 14px;
	height: 14px;
}

body.tiptop-standard-system.single-post .logged-in-as__icon:hover,
body.tiptop-standard-system.single-post .logged-in-as__icon:focus-visible {
	border-color: var(--tiptop-contrast);
	color: var(--tiptop-contrast);
}

/* 送信ボタンは左寄せ（モックは .form-submit が block。実サイトは flex-end で右端にいた）。 */
body.tiptop-standard-system.single-post .comment-form .form-submit {
	display: block;
}

/* 注意書きのアイコンはモックと同じ13px（実サイトは16pxで文字より目立っていた）。 */
body.tiptop-standard-system.single-post .blog-comments__notice-icon svg {
	width: 13px;
	height: 13px;
}

/* ============================================================
   投稿済みコメントを承認済みモックへ合わせる（2026-08-09）
   イマーシブの濃色コメント面は維持し、標準だけを罫線中心の一覧へ整える。
   ============================================================ */

/* リスト上罫線と各コメントの下罫線で区切るため、項目自身の上罫線は持たせない。 */
body.tiptop-standard-system.single-post .blog-comments__list {
	margin-bottom: var(--tt-space-7);
}

body.tiptop-standard-system.single-post .blog-comment {
	padding: var(--tt-space-5) 0;
	border-top: 0;
	border-bottom: 1px solid var(--tiptop-border);
}

/* 既存ルールが先頭だけ上余白を0にするため、モックの24pxへ明示的に戻す。 */
body.tiptop-standard-system.single-post .blog-comments__list > .blog-comment:first-child {
	padding-top: var(--tt-space-5);
}

body.tiptop-standard-system.single-post .blog-comment__body {
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--tt-space-4);
	align-items: start;
}

body.tiptop-standard-system.single-post .blog-comment__avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
}

/* 56px前提の旧アバター要素を枠へ追従させ、二重の枠線と面を作らない。 */
body.tiptop-standard-system.single-post .blog-comment__avatar-image,
body.tiptop-standard-system.single-post .blog-comment__avatar-fallback {
	width: 100%;
	height: 100%;
}

body.tiptop-standard-system.single-post .blog-comment__avatar-fallback {
	border: 0;
	background: transparent;
	color: var(--tiptop-muted);
}

body.tiptop-standard-system.single-post .blog-comment__avatar-fallback svg {
	width: 18px;
	height: 18px;
}

body.tiptop-standard-system.single-post .blog-comment__content {
	min-width: 0;
}

/* 編集リンクは右端に残し、著者名と日時だけをモックどおり横並びにする。 */
body.tiptop-standard-system.single-post .blog-comment__identity {
	display: flex;
	align-items: baseline;
	gap: var(--tt-space-3);
}

body.tiptop-standard-system.single-post .blog-comment__header {
	align-items: baseline;
	margin-bottom: var(--tt-space-2);
}

body.tiptop-standard-system.single-post .blog-comment__author,
body.tiptop-standard-system.single-post .blog-comment__author a {
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-body);
	font-weight: 700;
}

body.tiptop-standard-system.single-post .blog-comment__permalink {
	color: var(--tiptop-text);
}

body.tiptop-standard-system.single-post .blog-comment__permalink time {
	color: var(--tiptop-muted);
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-meta);
	letter-spacing: 0.06em;
}

body.tiptop-standard-system.single-post .blog-comment__text,
body.tiptop-standard-system.single-post .blog-comment__text p {
	color: var(--tiptop-text);
	font-size: var(--tt-text-note);
	line-height: 2;
}

body.tiptop-standard-system.single-post .blog-comment__text p {
	margin: 0;
}

body.tiptop-standard-system.single-post .comment-reply-link {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-label);
	font-weight: 500;
}

body.tiptop-standard-system.single-post .comment-reply-link > span {
	text-decoration: none;
}

body.tiptop-standard-system.single-post .comment-reply-link:hover,
body.tiptop-standard-system.single-post .comment-reply-link:focus-visible {
	color: var(--tiptop-contrast);
}

body.tiptop-standard-system.single-post .blog-comment__reply-icon svg {
	width: 13px;
	height: 13px;
}

/* 返信は左罫線からぶら下げ、親コメントとの間だけ24px空ける。 */
body.tiptop-standard-system.single-post .blog-comment .children {
	margin: var(--tt-space-5) 0 0;
	padding-left: var(--tt-space-5);
	border-left: 1px solid var(--tiptop-border);
	list-style: none;
}

body.tiptop-standard-system.single-post .blog-comment .children .blog-comment {
	padding-bottom: 0;
	border-bottom: 0;
}

/* 返信アバターは親コメントより一段控えめな32pxにする。 */
body.tiptop-standard-system.single-post .blog-comment .children .blog-comment__body {
	grid-template-columns: 32px minmax(0, 1fr);
	gap: var(--tt-space-3);
}

body.tiptop-standard-system.single-post .blog-comment .children .blog-comment__avatar {
	width: 32px;
	height: 32px;
}

@media (max-width: 781px) {
	body.tiptop-standard-system.single-post .blog-comment__body {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: var(--tt-space-3);
	}

	body.tiptop-standard-system.single-post .blog-comment__avatar {
		width: 32px;
		height: 32px;
	}

	body.tiptop-standard-system.single-post .blog-comment__header {
		flex-wrap: wrap;
		gap: var(--tt-space-2);
	}
}

/* コメントフォームのアクティブ表示をモックへ（2026-08-09）。
 * モック（_mockup/tiptop-single.css）は
 *   border-color: アクセント / outline: 2px アクセント30%の半透明 / offset 1px
 * で、しかも `:focus`＝**クリックでも見た目が変わる**。
 * 実サイトは front-component-unification.css が `:focus-visible` に
 * `--tt-form-focus-color` の実線 outline ＋ offset 3px を当てていて、
 * 色も太さもオフセットも違い、さらにマウスクリックでは何も変わらなかった。
 * ここでは :focus と :focus-visible の両方を当てて、どちらの操作でも
 * モックと同じ見え方にする（キーボード利用者の視認性は保つ）。 */
body.tiptop-standard-system.single-post .comment-form :is(
	input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	textarea,
	select
):focus,
body.tiptop-standard-system.single-post .comment-form :is(
	input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	textarea,
	select
):focus-visible {
	border-color: var(--tiptop-accent);
	outline: 2px solid color-mix(in srgb, var(--tiptop-accent) 30%, transparent);
	outline-offset: 1px;
}

/* 記事詳細の文字を承認済みモックへ（2026-08-09・Issue #784・#768）。
 * モックは「大きい見出しほど字間を締める」設計で、本文まわりの字間は 0.02em。
 * 実サイトは共通の 0.04em が一律に乗って、タイトルと見出しで開きすぎていた。 */
body.tiptop-standard-system .entry__title {
	/* 行間もモックの1.6倍へ（実サイトは1.45倍で詰まっていた）。 */
	line-height: calc(1.6 * var(--tt-leading-scale));
	letter-spacing: 0.02em;
}

body.tiptop-standard-system .entry__content .wp-block-heading {
	letter-spacing: 0.02em;
}

/* 詳細のメタ（カテゴリのバッジと日付）。モックはバッジ11.52px/w700、日付12.48px、
 * どちらも行間2.0倍。実サイトは10.56px/w500・11.52pxで、行間も1.95倍だった。 */
body.tiptop-standard-system .tiptop-post-detail__header .tiptop-badge {
	font-size: var(--tt-text-meta);
	font-weight: 700;
	line-height: calc(2 * var(--tt-leading-scale));
}

body.tiptop-standard-system .tiptop-post-detail__header time {
	font-size: var(--tt-text-label);
	line-height: calc(2 * var(--tt-leading-scale));
	letter-spacing: 0.06em;
}

/* コメント件数はモックだと欧文書体の14.4px。実サイトは和文書体の20.8pxで
 * 見出しのように大きく出ていた。 */
body.tiptop-standard-system .blog-comments__count {
	font-family: var( --tiptop-font-latin );
	font-size: var(--tt-text-body);
	line-height: calc(2 * var(--tt-leading-scale));
	letter-spacing: 0.06em;
}

/* サイドバーのリンクを承認済みモックへ（2026-08-09・Issue #784）。
 * モックは w400 の細字で行間2.0倍。実サイトは w500・行間1.7倍で、
 * 本文より主張が強く行間も詰まっていた。記事リンクとカテゴリの両方が対象。
 *
 * 2026-08-11（Issue #900）：目次を除外した。実サイトの目次 nav は
 * `tiptop-blog-toc tiptop-blog-widget` と両方を持つため、このルールが
 * 同詳細度(0,2,2)・後勝ちで上の目次リンク規則（`.tiptop-blog-toc a`・
 * モックと完全に一致している方）を潰しており、目次リンクの色が
 * **モック #707070 に対し #222**、行間が **23.04px に対し 26.24px** になっていた。
 * モックの目次リンクはこのサイドバー共通ルールの対象外なので、狙いどおり除外する。 */
body.tiptop-standard-system .tiptop-blog-widget:not(.tiptop-blog-toc) a {
	font-weight: 400;
	line-height: calc(2 * var(--tt-leading-scale));
	/* 色もモックの本文色へ（実サイトは見出し色で、サイドバーとしては強すぎた）。 */
	color: var(--tiptop-text);
}

/* コメントの送信ボタン。モックは 12.48px / w600 で、404の戻るボタンと同じ寸法。
 * 実サイトは 10.72px / w700 と小さく太かった。
 * 2026-08-10：ここにあった `line-height: calc(2 * ...)` を削除した。**そもそも死んでいた**
 * ——同ファイル上方の `.single-post` を含むルール (0,4,1) が 1.6 を当てており、この (0,3,1)
 * では届いていなかった（実測 19.968px＝1.6倍）。そしてモックの正解は 2.0 ではなく normal
 * だったので、値ごと上のルール側へ寄せた（Issue #784）。 */
body.tiptop-standard-system .comment-form .submit {
	font-size: var(--tt-text-label);
	font-weight: 600;
}

/* コメント欄と返信リンクの字間をモックへ（2026-08-10）。
 * モックは見出しが0.06em、返信リンクは字間なし。実サイトはどちらも0.08emで、
 * 共通の見出し字間が一律に乗っていた。 */
/* 2026-08-10（オーナー指摘「Commentが細字？」）：ラベルが「Comment」という
 * ラテン文字なのに和文書体（Zen Kaku Gothic New）で描かれていた。モックは
 * 欧文書体（Jost）。サイズ16.8px・太さ500・行間33.6px・字間0.06emは既に一致して
 * いたので、書体だけ欧文トークンへ寄せる（書体名は直書きしない）。 */
body.tiptop-standard-system .comment-reply-title {
	font-family: var(--tiptop-font-latin);
	letter-spacing: 0.06em;
}

body.tiptop-standard-system .comment-reply-link {
	letter-spacing: normal;
}

/* サイドバーの記事リンクのサイズ（2026-08-10）。モックは 0.82rem、実サイトは 0.8rem。
 * li へ書くとリンク側の指定に負けるため、リンク自身に当てる。
 *
 * 2026-08-11（Issue #900）：目次を除外した。目次 nav も `tiptop-blog-widget` を
 * 兼ねるため (0,2,3) のこのルールが目次リンクにも当たり、**モック 12.8px に対し
 * 13.12px** になっていた。モックの目次リンクは 0.8rem。 */
body.tiptop-standard-system .tiptop-blog-widget:not(.tiptop-blog-toc) li,
body.tiptop-standard-system .tiptop-blog-widget:not(.tiptop-blog-toc) li a {
	font-size: var(--tt-text-note);
}

/* ブログ一覧のヒーローの説明文を承認済みモックへ（2026-08-10・オーナー指摘
 * 「トップ以外のヒーロー部分の説明文のカラーとサイズが違う」）。
 * モックは 14.72px / w400 / muted。実サイトは色が --tiptop-text（#222222）で
 * 太さが500だった。サイズ14.72pxは既に一致しているので触らない。
 * 新着一覧は news-page.css 側で同じ是正をしている（あちらは色だけ既に合っていた）。 */
body.tiptop-standard-system .tiptop-blog-page .archive-hero__lead {
	color: var(--tiptop-muted);
	font-weight: 400;
}