/* ============================================================
   Body 個別記事 ―― 「身体を観察する雑誌の一頁」
   対象：通常投稿 かつ 主カテゴリー(パンくず先頭)= Body かつ
         content_type が ARTICLE / COLUMN / ESSAY のものだけ
         （functions.php で限定配信。NOTE・今日の風・Radio・
          Journey/Foods/Mind/Salon/Shelf/Home へは配信しない）
   方式：親テーマ・single.php は変更しない。既存DOM
         （#top_title_area の扉／SWELL自動目次／本文／参照札／
          本文内画像／ライトボックス）を CSS と最小JS で組み替える。
   共通語彙：呼吸・体温・脈・今日の身体。円 / 弧 / 細い縦線。
   使わない：ベージュの大きなタイトル枠、白いカード、ピル型ARTICLE札、
            医療サイト風／健康商品LP風／癒しサロン風。
   ============================================================ */

/* ── 0. 下地 ─────────────────────────────────────────────── */

/* JSが扉を組み替え終えるまでは元表示のまま（no-JSでも壊さない） */
#body_wrap.vayu-bsingle-ready #top_title_area { display: none !important; }

/* 標準パンくずの帯は視覚上だけ隠す（head内 JSON-LD の BreadcrumbList は別物なので残る） */
#body_wrap.vayu-bsingle-ready > #breadcrumb {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ページ面は白。Bodyのセージは細い弧と線だけに使う（大きな面には敷かない） */
#body_wrap.vayu-body-post.vayu-bsingle-ready,
#body_wrap.vayu-body-post.vayu-bsingle-ready #content,
#body_wrap.vayu-body-post.vayu-bsingle-ready #main_content { background-color: #fff; }

/* 本文頭のSWELL装飾バッジは扉に集約するので隠す */
#body_wrap.vayu-bsingle-ready .l-mainContent__inner > .vayu-content-type.-single { display: none; }

/* 旧・関連記事欄「お時間あれば、こちらもどうぞ…」は、functions.php の
   get_post_metadata フィルタで SWELL のサーバー側出力自体を停止している
   （swell_meta_show_related を対象ページだけ 'hide' に差し替え）。
   前後の記事リンク・著者・コメントは残る。ここではCSSで隠さない。 */

/* 扉に取り込んだ SWELL の元タイトル塊（JSが lede へ移設）。
   旧 vayu-body-post.css は `.vayu-body-post.vayu-ctype-article .p-articleHead…`（クラス4個）で
   枠線・角丸・影を付けているため、#body_wrap を足して確実に上書きする。 */
#body_wrap .vayu-bsingle .p-articleHead.c-postTitle {
	all: unset;
	display: block;
}
.vayu-bsingle .c-postTitle__ttl {
	margin: 0;
	color: #3d4f42;
	font-weight: 600;
	font-family: "Zen Kaku Gothic New", "Zen Maru Gothic", sans-serif;
	/* 折り返し制御は §4「文字組み」でまとめて指定 */
}
.vayu-bsingle .c-postTitle__date,
.vayu-bsingle .p-articleMetas.-top { display: none; }
/* 旧 vayu-body-post.css の "BODY"::after ・綿毛::before は扉のキッカーへ統合したので止める */
#body_wrap .vayu-bsingle .p-articleHead.c-postTitle::before,
#body_wrap .vayu-bsingle .p-articleHead.c-postTitle::after { content: none !important; display: none !important; }

/* 扉直後の本文の入りを詰める（SWELL標準4emは扉があると空きすぎる） */
#body_wrap.vayu-bsingle-ready .l-mainContent__inner > .post_content { margin-top: 30px; }

.vayu-bsingle { margin: 0 0 6px; font-feature-settings: "palt" 1; }
.vayu-bsingle * { box-sizing: border-box; }

/* ← BODYへ戻る */
.vayu-bsingle__back {
	display: inline-flex; align-items: center; gap: .5em;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 11px; letter-spacing: .16em;
	color: #8fa389; text-decoration: none; padding: 4px 0;
	transition: color .18s ease;
}
.vayu-bsingle__back:hover { color: #4b5d46; }

/* 共通キッカー（誌名＋読み物タイプ） */
.vayu-bsingle__kicker {
	margin: 0 0 16px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 11px; font-weight: 500; letter-spacing: .28em;
	color: #8fa389;
	display: flex; align-items: baseline; gap: 12px;
}
.vayu-bsingle__series { color: #6e8a72; }
.vayu-bsingle__ctype { letter-spacing: .22em; color: #a98a6f; }

/* 日付（脈のような細い縦線を左に） */
.vayu-bsingle__meta {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 11px; letter-spacing: .12em; color: #8fa389;
}

/* ============================================================
   1. ARTICLE ｜ BODY OBSERVATION
      左に「BODY OBSERVATION」＋公開日＋細い縦線、中央に大H1、右にアイキャッチ。
   ============================================================ */
.vayu-bsingle--article .vayu-bsingle__door {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr) minmax(0, 34%);
	gap: 28px;
	align-items: start;
	margin-top: 16px;
	padding-bottom: 22px;
	border-bottom: 1px solid #e3ede0;
}
/* ARTICLEは左の観察コラムが誌名を担うので、キッカーの誌名は伏せて読み物タイプだけ */
.vayu-bsingle--article .vayu-bsingle__kicker { margin-bottom: 12px; }
.vayu-bsingle--article .vayu-bsingle__kicker .vayu-bsingle__series { display: none; }
.vayu-bsingle--article .vayu-bsingle__obs {
	position: relative;
	padding-top: 4px;
	padding-left: 14px;
	font-family: "Zen Kaku Gothic New", sans-serif;
}
/* 細い縦線＝観察の軸 */
.vayu-bsingle--article .vayu-bsingle__obs::before {
	content: "";
	position: absolute; left: 0; top: 6px; bottom: -30px;
	width: 1px; background: #cfe0cd;
}
.vayu-bsingle__obsLabel {
	display: block;
	font-size: 9px; letter-spacing: .1em; line-height: 1.8;
	color: #8fa389;
	white-space: nowrap;
}
.vayu-bsingle__obsDate {
	display: block; margin-top: 10px;
	font-size: 11px; letter-spacing: .08em; color: #a7b8a5;
	white-space: nowrap;
}
.vayu-bsingle--article .vayu-bsingle__lede { padding-top: 2px; }
.vayu-bsingle--article .c-postTitle__ttl {
	font-size: clamp(1.7rem, 1.05rem + 2.1vw, 2.55rem);
	line-height: 1.42;
	letter-spacing: .01em;
}
/* アイキャッチ：やわらかい角＋細い弧のアクセント。円形にはしない（記事写真が切れるため） */
.vayu-bsingle--article .vayu-bsingle__figure {
	position: relative;
	margin: 4px 0 0;
	border-radius: 8px;
	overflow: hidden;
	background: #eef4ec;
	aspect-ratio: 3 / 2;
}
.vayu-bsingle--article .vayu-bsingle__figure img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 弧：アイキャッチ左上に重なる細い四分円 */
.vayu-bsingle--article .vayu-bsingle__figure::after {
	content: "";
	position: absolute; left: -22px; top: -22px;
	width: 64px; height: 64px;
	border: 1px solid #b9cdb6;
	border-radius: 50%;
	background: transparent;
}
/* アイキャッチが無い記事：右カラムを畳んで、細い弧だけを添える */
.vayu-bsingle--article.is-no-figure .vayu-bsingle__door {
	grid-template-columns: 104px minmax(0, 1fr);
}
.vayu-bsingle--article.is-no-figure .vayu-bsingle__lede {
	position: relative;
}
.vayu-bsingle--article.is-no-figure .vayu-bsingle__lede::after {
	content: "";
	position: absolute; right: -6px; top: 4px;
	width: 46px; height: 46px;
	border: 1px solid #cfe0cd;
	border-right-color: transparent; border-bottom-color: transparent;
	border-radius: 50%;
}

/* 目次 → 「OBSERVATION MAP / この記事の見取り図」細い横並び。扉直下スロットへJSが移設
   （SWELLの `#main_content .p-toc{margin:4em auto}` はID指定なので #body_wrap を足して上書き） */
.vayu-bsingle__mapslot { margin: 10px 0 0; }
#body_wrap .vayu-bsingle__mapslot .p-toc {
	margin: 0; padding: 16px 0 4px;
	background: transparent; border: 0;
	border-top: 1px solid #e3ede0;
	max-width: none; width: 100%;
}
.vayu-bsingle__mapslot .p-toc__ttl {
	display: block; position: relative;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 10px; letter-spacing: .22em; color: #8fa389;
}
.vayu-bsingle__mapslot .p-toc__ttl::before { display: none; }
.vayu-bsingle__mapslot .p-toc__ttl::after {
	content: "この記事の見取り図";
	display: block; margin-top: 3px;
	font-size: 12px; letter-spacing: .06em; color: #7d9a84;
}
.vayu-bsingle__mapslot .p-toc__list {
	columns: 2; column-gap: 34px; margin-top: 12px;
}
.vayu-bsingle__mapslot .p-toc__list > li {
	break-inside: avoid;
	position: relative;
	padding-left: 16px;
	list-style: none;
}
.vayu-bsingle__mapslot .p-toc__list > li::before {
	content: "";
	position: absolute; left: 0; top: .68em;
	width: 6px; height: 6px; margin-top: -3px;
	border: 1px solid #a9c5a5; border-radius: 50%;
}
.vayu-bsingle__mapslot .p-toc__list ol { list-style: none; padding-left: 14px; }
.vayu-bsingle__mapslot .p-toc__link { font-size: 13px; line-height: 1.75; color: #4b5d46; }

/* ============================================================
   2. COLUMN ｜ BODY BETWEEN DAYS
      問いと短い導入が主役。タイトルは中央にせず少し左へ。呼吸する程度の余白。
   ============================================================ */
.vayu-bsingle--column .vayu-bsingle__door {
	margin-top: 12px;
	margin-left: clamp(0px, 4vw, 54px);   /* 中央でも左端でもなく、少し左へずらす */
	padding: 2px 0 22px 20px;
	border-bottom: 1px solid #e3ede0;
	max-width: 40em;
}
.vayu-bsingle--column .vayu-bsingle__figure { display: none; }  /* 写真は必須にしない */
/* 錆色の細い縦線＋小さな円＝「日々のあいだ」の目印。抜粋を出さないので lede 全体に添える */
.vayu-bsingle--column .vayu-bsingle__lede {
	position: relative;
}
.vayu-bsingle--column .vayu-bsingle__lede::before {
	content: "";
	position: absolute; left: -20px; top: .2em; bottom: .2em;
	width: 1px; background: #cbae9c;
}
.vayu-bsingle--column .vayu-bsingle__lede::after {
	content: "";
	position: absolute; left: -23px; top: -2px;
	width: 7px; height: 7px;
	border: 1px solid #b98a6f; border-radius: 50%; background: #fff;
}
.vayu-bsingle--column .c-postTitle__ttl {
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
	line-height: 1.55;
	letter-spacing: .015em;
	max-width: 24em;
}
.vayu-bsingle--column .vayu-bsingle__meta { margin-top: 16px; }

/* COLUMN：本文は ARTICLE より少し狭い一段組（呼吸する程度） */
#body_wrap.vayu-bsingle-ready.vayu-ctype-column .post_content > *:not(.wp-block-image):not(figure):not(.p-toc):not(table):not(.wp-block-table) {
	max-width: 38em;
}
/* COLUMN：目次は常設の大箱にしない。見出しが多い時だけ小さくインライン */
#body_wrap.vayu-bsingle-ready.vayu-ctype-column .post_content .p-toc {
	max-width: 38em; margin: 24px 0;
	padding: 10px 0; background: transparent;
	border: 0; border-top: 1px solid #e6ece3; border-bottom: 1px solid #e6ece3;
	border-radius: 0; font-size: .9em;
}
#body_wrap.vayu-bsingle-ready.vayu-ctype-column .post_content .p-toc__ttl { font-size: 10px; letter-spacing: .2em; color: #8fa389; }
#body_wrap.vayu-bsingle-ready.vayu-ctype-column .post_content .p-toc__ttl::before { display: none; }

/* ============================================================
   3. ESSAY ｜ THIS BODY, THIS DAY
      写真とタイトルを 42:58 で隣接。ARTICLEより柔らかく、白＋ごく薄い桃・錆。
   ============================================================ */
.vayu-bsingle--essay .vayu-bsingle__door {
	display: grid;
	grid-template-columns: 42% 58%;
	gap: 34px;
	align-items: center;
	margin-top: 12px;
	padding-bottom: 24px;
	border-bottom: 1px solid #efe7e2;
}
.vayu-bsingle--essay .vayu-bsingle__figure {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: #f6efec;
	aspect-ratio: 4 / 5;
	max-height: 400px;
}
.vayu-bsingle--essay .vayu-bsingle__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vayu-bsingle--essay .vayu-bsingle__lede { position: relative; }
/* ごく薄い桃の円をタイトル背後に添える */
.vayu-bsingle--essay .vayu-bsingle__lede::before {
	content: "";
	position: absolute; left: -30px; top: -18px;
	width: 74px; height: 74px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(214,178,168,.20), rgba(214,178,168,0) 70%);
	pointer-events: none;
}
.vayu-bsingle--essay .c-postTitle__ttl {
	font-size: clamp(1.4rem, 1.05rem + 1.4vw, 1.95rem);
	line-height: 1.62;
	font-weight: 500;
	color: #4a5147;
}
.vayu-bsingle--essay .vayu-bsingle__meta { margin-top: 16px; }
/* 写真が無いESSAY：写真枠を畳み、H1・日付・淡い円だけで成立させる（本文冒頭の転用はしない） */
.vayu-bsingle--essay.is-no-figure .vayu-bsingle__door { grid-template-columns: 1fr; }
.vayu-bsingle--essay.is-no-figure .vayu-bsingle__figure { display: none; }
/* ESSAY：大きな目次は置かない */
#body_wrap.vayu-bsingle-ready.vayu-ctype-essay .post_content > .p-toc { display: none; }
/* 短いエッセイ（is-vayu-short-note）の本文頭モチーフは扉と重複するので止める */
#body_wrap.vayu-bsingle-ready.vayu-ctype-essay.is-vayu-short-note .post_content::before { display: none !important; }

/* ============================================================
   4. 文字組み（全タイプ）
   ============================================================ */
/* 題名：日本語の語中（「断／食」など）で割れないよう word-break:keep-all。
   句読点・ダッシュのない長い区間は overflow-wrap:anywhere を最終手段にして
   横はみ出しだけ確実に防ぐ。タイトル本文に手動 <br> は入れない。
   狭い画面ではフォントを一段落として、割れずに収まる余地をつくる。 */
.vayu-bsingle .c-postTitle__ttl {
	line-break: strict;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.vayu-bsingle__mapslot .p-toc__link {
	line-break: strict;
	word-break: normal;
	overflow-wrap: anywhere;
}
/* 観察ラベルは英単語なので keep-all では割れない。nowrap で2語の途中改行も防ぐ。 */
.vayu-bsingle__obsLabel { word-break: keep-all; }

/* ============================================================
   5. レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
	/* ARTICLE 390px：観察情報→H1→画像→見取り図→本文 */
	.vayu-bsingle--article .vayu-bsingle__door,
	.vayu-bsingle--article.is-no-figure .vayu-bsingle__door {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.vayu-bsingle--article .vayu-bsingle__obs {
		order: 1;
		display: flex; align-items: baseline; gap: 14px;
		padding-left: 12px;
	}
	.vayu-bsingle--article .vayu-bsingle__obs::before { top: 0; bottom: 0; }
	.vayu-bsingle--article .vayu-bsingle__obsDate { margin-top: 0; }
	.vayu-bsingle--article .vayu-bsingle__lede { order: 2; }
	.vayu-bsingle--article .vayu-bsingle__figure { order: 3; aspect-ratio: 16 / 10; }
	.vayu-bsingle__mapslot { order: 4; }
	.vayu-bsingle__mapslot .p-toc__list { columns: 1; }

	.vayu-bsingle--essay .vayu-bsingle__door {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	/* ESSAY 390px：タイトル→日付→写真→本文。写真の上に題名を重ねない */
	.vayu-bsingle--essay .vayu-bsingle__lede { order: 1; }
	.vayu-bsingle--essay .vayu-bsingle__figure { order: 2; aspect-ratio: 4 / 3; }
	.vayu-bsingle--essay .vayu-bsingle__meta { order: 0; }

	.vayu-bsingle--column .vayu-bsingle__door { margin-left: 0; max-width: 100%; }
	#body_wrap.vayu-bsingle-ready.vayu-ctype-column .post_content > *:not(.wp-block-image):not(figure):not(.p-toc):not(table):not(.wp-block-table),
	#body_wrap.vayu-bsingle-ready.vayu-ctype-column .post_content .p-toc { max-width: 100%; }
}

@media (max-width: 600px) {
	.vayu-bsingle__kicker { flex-wrap: wrap; gap: 8px; }
	.vayu-bsingle--article .vayu-bsingle__figure::after { left: -14px; top: -14px; width: 44px; height: 44px; }
	.vayu-bsingle--essay .vayu-bsingle__lede::before { left: -16px; width: 54px; height: 54px; }
}

/* 狭い画面：句読点のない最長区間（例 COLUMN「断食を始める前に考えたいこと」、
   ARTICLE「睡眠時間とパフォーマンスの関係」）が1行に収まるフォントに落とす。
   これで keep-all のまま語中分割も横はみ出しも起きない。 */
@media (max-width: 480px) {
	.vayu-bsingle--article .c-postTitle__ttl { font-size: 1.24rem; line-height: 1.55; }
	.vayu-bsingle--column  .c-postTitle__ttl { font-size: 1.18rem; line-height: 1.62; }
	.vayu-bsingle--essay   .c-postTitle__ttl { font-size: 1.24rem; line-height: 1.6; }
	.vayu-bsingle--column .vayu-bsingle__door { padding-left: 14px; }
	.vayu-bsingle--column .vayu-bsingle__lede::before { left: -14px; }
	.vayu-bsingle--column .vayu-bsingle__lede::after { left: -17px; }
}