@layer components {
	/*
	 * 語義解説ブロック（移植元 why-nexray/ .word-badge）。NEXUS / RAY の語＋
	 * 意味（つながり・光）＋本文を縦積みで示す。見出し行は
	 *   [ emphasis-text（語） ][ 32px 線 ][ 意味 ]
	 * の横並び。線は .word-badge__meaning::before で描き、装飾用の空要素を持たない。
	 *
	 * 縦積みは WP フロー（is-layout-flow）に載せ、ブロック間 16px（移植元 space-sm）は
	 * `> * + *` の margin で上書きする（WP フロー余白＝24px は wp 層のため components 層の
	 * 通常宣言で勝てる。詳細は why-nexray.css の余白コメント）。
	 */
	.word-badge > * + * {
		margin-block-start: var(--wp--preset--spacing--30); /* 16px */
	}

	/*
	 * 見出し行の横並び。語 ↔ 線 ↔ 意味の間隔を等倍（24px）にする。
	 *
	 * 語と線の間はこの gap、線と意味の間は .word-badge__meaning の padding-left から線幅
	 * （32px）を引いた残り＝同じ 24px。#255 で青箱を撤去して以降、語が線に密着して見えて
	 * いたため揃えた。値を変えるときは両方（gap と padding-left の減算後）を必ず一致させる。
	 */
	.word-badge__header {
		display: flex;
		align-items: center;
		gap: 1.5rem; /* 24px */
	}

	/*
	 * NEXUS / RAY（欧文）の内部レディングを除去する。
	 *
	 * 元の狙いは青箱を字面に密着させることだったが、#255 で箱を撤去した後も維持している：
	 * trim は行ボックス高を変えるため、横並び（.word-badge__header は flex・align-items:
	 * center）での語と 32px 線・意味テキストの縦位置整列に効いており、外すとズレる。
	 * 1440 で語と意味の中心 Y が一致することを実測で確認済み（#255）。
	 *
	 * 欧文は cap/alphabetic で綺麗に収まりクリップしない（和文は字面が cap を超えるため
	 * この edge だと切れる＝emphasis-text の base には掛けず、欧文の語バッジ限定で適用）。
	 * 対応ブラウザ（Chrome 133+ / Safari 18.2+）のみのプログレッシブエンハンスメント。
	 */
	.word-badge__header .emphasis-text {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
	}

	/* 意味テキスト。左に 32px の接続線（::before）＋線との間隔 24px を取る。 */
	.word-badge__meaning {
		position: relative;
		padding-left: 3.5rem; /* 56px = 線 32px + 余白 24px（header の gap と等倍） */
		color: var(--wp--preset--color--primary);
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1;
	}

	.word-badge__meaning::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 2rem; /* 32px */
		height: 1px;
		background: var(--wp--preset--color--primary);
	}

	.word-badge__body {
		color: var(--wp--preset--color--contrast);
	}

	/*
	 * モバイル（≤768）：見出し行を「語 ― 意味」の1行に収める（#268）。
	 * md=769 の厳密補集合（max-width:768）で据え置き（ページ全体のモバイル境界＝
	 * site-nav ドロワーに一致・tokens.css 権威）。
	 *
	 * かつては語を独立行に落として縦積み（flex-direction: column）にしていたが、先方FBで
	 * 1行化の要望が出たため流体サイズへ切り替えた（#264 の「モバイルは語 48px 固定」は
	 * 撤回。48px では 390px 幅で語 175px ＋ 意味 165px ＝ 固定コスト込み 396px となり、
	 * コンテナ 294px に対して物理的に1行へ入らない）。
	 *
	 * 仕組み：この行に可変 font-size を1つ持たせ、語＝1em・意味＝0.42em の相対指定で
	 * 追従させる。0.42 はデスクトップの 48:20 と同比なので、上限に達すると語48/意味20＝
	 * デスクトップの組と一致する。これで意味テキストは 768→769 が 20.2→20px と連続する
	 * ようになった（従来は 18→20px で跳ねていた）。
	 * ただし語の 768(48px)→769(38.5px) の段差は残る：デスクトップ側 --lg は 5vw なので
	 * viewport 960px 未満で 48px に届かない（この段差は今回の変更前後で同じ＝既存事象。
	 * 解消するには --lg 自体の流体化が必要で、範囲外とした）。
	 *
	 * 係数 7.7 の根拠（ブラウザ実測較正）：NEXUS の字面は 3.646em・意味「つながり・
	 * 結びつき」は 9.14em なので、必要幅は 3.646 + 9.14×0.42 ＝ 7.485em ＋ 固定コスト
	 * 32px。分母を 7.7 に切り上げて約7px の余裕を持たせ、Web フォント読込差で折れるのを
	 * 防ぐ。基準は .nc-why__inner のコンテナ幅（100cqi）＝主見出しと同じ土台。
	 *
	 * 下限 2rem(32px) に張り付くと合計が容器幅を超えるため、狭い端末では flex-wrap で
	 * 自動的に2行（語／線＋意味）へ落ちる＝実測で viewport 369px 以下（370px 以上は1行。
	 * 長い方の NEXUS 行が境界を決める。RAY 行は 320px でも1行）。意味テキストを
	 * これ以上小さくしないための下限であり、320px 幅は2行を正とする（1行にするには
	 * 意味が 10px 台まで落ち和文が読めない）。
	 */
	@media (max-width: 768px) {
		.word-badge__header {
			flex-wrap: wrap;
			/* 折返し時の行間 16px ／ 語↔線↔意味は 8px（狭幅では等倍 24px を維持できない）。 */
			gap: var(--wp--preset--spacing--30) 0.5rem;
			font-size: clamp(2rem, calc((100cqi - 32px) / 7.7), 3rem);
		}

		/* 語は行の基準サイズそのまま（旧: 3rem 固定）。 */
		.word-badge .emphasis-text--lg {
			font-size: 1em;
		}

		.word-badge__meaning {
			padding-left: 1.5rem; /* 24px = 線 16px + 余白 8px（header の column-gap と等倍） */
			font-size: 0.42em;
		}

		/* 線もモバイルでは半分（32→16px）。1行に収めるための固定コスト削減。 */
		.word-badge__meaning::before {
			width: 1rem; /* 16px */
		}
	}
}