/*
 * 記事ビジュアル・コンポーネント v1.0（組込みエンジニアノート）
 * ------------------------------------------------------------
 * 記事本文で使う「絵のasset」の正本CSS。図解を毎回インラインstyleで
 * 書き直す運用をやめ、ブランド色で統一したクラスを流し込みHTMLから使う。
 *
 * - 使い分け・スニペットの正本: .agents/記事ビジュアルガイド.md
 * - 見た目の確認: assets/article-components.preview.html をブラウザで開く（本CSSを読み込む）
 * - 本番では functions.php が is_singular() のときだけ enqueue する
 * - 全セレクタは JIN の本文コンテナ .cps-post-main にスコープ（トップページ等には影響しない）
 * - クラス接頭辞 jin-cmp-。CSSが未配備でも文章として読める構造で書く前提（画像頼み禁止と同じ）
 *
 * 🔴 2026-08-15：**デザイントークン（--jc-*）の定義をこのファイルから外した**（規則 V16）。
 *    正本は `theme/jin-child/style.css` の `:root`（§0-1）。
 *
 *    理由：トークンがここ（`.cps-post-main` スコープ）にしか無かったため、
 *    **サイトの器（ヘッダー・一覧・サイドバー・フッター）は色を1つも共有できていなかった。**
 *    実測（2026-08-14・本番）で style.css は CSS変数0・ハードコード色35種、
 *    コントラスト不足はトップ27件・記事70件だった。
 *    さらに `.cps-post-main` に置いたままだと、`:root` のダークモード値を
 *    記事本文だけが上書きしてしまい、ダークで本文が壊れる。
 *
 *    🔒 ここでトークンを再定義しない。色を変えるときは style.css §0-1 だけを触る。
 *    🔒 トークン名は変えない（公開記事50本超のHTMLが直接参照している）。
 *    ⚠️ プレビュー（article-components.preview.html）は style.css を先に読み込む。
 */

/* 共通: 縦リズムと、JIN側スタイルの継承を断つ基礎リセット */
.cps-post-main [class^="jin-cmp-"],
.cps-post-main [class*=" jin-cmp-"] {
	box-sizing: border-box;
}

/* ★2026-08-11追加：WordPress(wpautop)が入れる空の <p> を消す。
   コンポーネントの中の改行が <p></p> になり、**高さ32pxの空白**として残る。
   コードブロックの中では地色が出て**白い帯**になっていた
   （本番実測: Post424で12個・Post432で9個・Post782で10個。うちコード内は7/4個）。
   記事本文を直しても入稿のたびにWordPress側で復活するので、**表示側で殺す**。
   :empty は子ノードが1つも無い場合だけ一致するので、意味のある段落は消えない
   （本番で「空pの10個すべてが :empty に一致・適用後に残り0」を実測）。 */
.cps-post-main [class^="jin-cmp-"] > p:empty,
.cps-post-main [class*=" jin-cmp-"] > p:empty {
	display: none;
}

.cps-post-main .jin-cmp-callout,
.cps-post-main .jin-cmp-term,
.cps-post-main .jin-cmp-flow,
.cps-post-main .jin-cmp-steps,
.cps-post-main .jin-cmp-compare,
.cps-post-main .jin-cmp-check,
.cps-post-main .jin-cmp-related,
.cps-post-main .jin-cmp-cta,
.cps-post-main .jin-cmp-figure,
.cps-post-main .jin-cmp-code,
.cps-post-main .jin-cmp-timeline,
.cps-post-main .jin-cmp-stats,
.cps-post-main .jin-cmp-pullquote,
.cps-post-main .jin-cmp-trouble,
.cps-post-main .jin-cmp-trace,
.cps-post-main .jin-cmp-grid {
	margin: 1.8em 0;
}

/* =========================================================
   1. コールアウト（ポイント / 注意 / 補足 / 体験談）
   土台 .jin-cmp-callout ＋ 種別クラス
   ========================================================= */

.cps-post-main .jin-cmp-callout {
	position: relative;
	padding: 15px 18px 15px 46px;
	border: 1px solid var(--jc-line);
	border-radius: 10px;
	background: var(--jc-bg);
	font-size: 0.95em;
	line-height: 1.9;
}

.cps-post-main .jin-cmp-callout > :first-child { margin-top: 0; }
.cps-post-main .jin-cmp-callout > :last-child { margin-bottom: 0; }

.cps-post-main .jin-cmp-callout__title {
	display: block;
	margin: 0 0 6px;
	font-weight: 800;
	line-height: 1.5;
}

/* 左肩のマーク（絵文字は使わない。文字＋角丸タイルのCSS図形） */
.cps-post-main .jin-cmp-callout::before {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 21px;
	height: 21px;
	border-radius: 6px;
	color: var(--jc-static-white);
	font-family: var(--jc-mono);
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	line-height: 21px;
	text-align: center;
}

/* ポイント（要点・結論。ティール） */
.cps-post-main .jin-cmp-point {
	border-color: var(--jc-teal-line);
	background: var(--jc-teal-bg);
}
.cps-post-main .jin-cmp-point .jin-cmp-callout__title { color: var(--jc-teal-dark); }
.cps-post-main .jin-cmp-point::before { content: "\2713"; background: var(--jc-teal-surface); }

/* 注意・落とし穴（琥珀） */
.cps-post-main .jin-cmp-warn {
	border-color: var(--jc-amber-line);
	background: var(--jc-amber-bg);
}
.cps-post-main .jin-cmp-warn .jin-cmp-callout__title { color: var(--jc-amber-dark); }
.cps-post-main .jin-cmp-warn::before { content: "!"; background: var(--jc-amber-surface); }

/* 補足・メモ（ニュートラル） */
.cps-post-main .jin-cmp-note .jin-cmp-callout__title { color: var(--jc-ink-2); }
.cps-post-main .jin-cmp-note::before { content: "i"; background: var(--jc-muted); }

/* 体験談（このブログの核。等幅//ラベル＋ティールの左罫で「人の声」を立てる） */
.cps-post-main .jin-cmp-exp {
	padding-left: 20px;
	border-color: var(--jc-teal-line);
	border-left: 5px solid var(--jc-teal);
	border-radius: 0 10px 10px 0;
	background: linear-gradient(180deg, var(--jc-teal-bg-soft), var(--jc-surface));
}
.cps-post-main .jin-cmp-exp::before { content: none; }
.cps-post-main .jin-cmp-exp .jin-cmp-callout__title { color: var(--jc-teal-dark); }
.cps-post-main .jin-cmp-exp .jin-cmp-callout__title::before {
	content: "// ";
	font-family: var(--jc-mono);
	color: var(--jc-teal);
}

/* =========================================================
   2. 用語メモ（定義リスト。タイプC・初出用語の注釈まとめ）
   ========================================================= */

.cps-post-main .jin-cmp-term {
	padding: 14px 18px;
	border: 1px dashed var(--jc-teal-line);
	border-radius: 10px;
	background: var(--jc-teal-bg-soft);
	font-size: 0.92em;
	line-height: 1.85;
}

.cps-post-main .jin-cmp-term dl { margin: 0; }
.cps-post-main .jin-cmp-term dt {
	margin: 0;
	color: var(--jc-ink);
	font-weight: 800;
}
.cps-post-main .jin-cmp-term dt::before {
	content: "# ";
	color: var(--jc-teal);
	font-family: var(--jc-mono);
}
.cps-post-main .jin-cmp-term dd {
	margin: 2px 0 12px;
	padding: 0;
	color: var(--jc-text);
}
.cps-post-main .jin-cmp-term dd:last-child { margin-bottom: 0; }

/* =========================================================
   3. 横フロー（A → B → C。3〜4工程まで）
   ========================================================= */

.cps-post-main .jin-cmp-flow {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
	padding: 18px 16px;
	border: 1px solid var(--jc-line);
	border-radius: 12px;
	background: var(--jc-teal-bg-soft);
}

.cps-post-main .jin-cmp-flow__step {
	flex: 1 1 0;
	min-width: 0;
	padding: 13px 10px;
	border: 1px solid var(--jc-teal-line);
	border-radius: 10px;
	background: var(--jc-surface);
	text-align: center;
}

.cps-post-main .jin-cmp-flow__step--accent {
	border-color: var(--jc-teal);
	background: var(--jc-teal-bg);
}

.cps-post-main .jin-cmp-flow__num {
	display: inline-flex;
	width: 25px;
	height: 25px;
	align-items: center;
	justify-content: center;
	margin-bottom: 7px;
	border-radius: 50%;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	font-family: var(--jc-mono);
	font-size: 0.82em;
	font-weight: 700;
}

.cps-post-main .jin-cmp-flow__label {
	display: block;
	color: var(--jc-ink);
	font-weight: 800;
	line-height: 1.5;
}

.cps-post-main .jin-cmp-flow__desc {
	display: block;
	margin-top: 3px;
	color: var(--jc-muted);
	font-size: 0.82em;
	line-height: 1.7;
}

.cps-post-main .jin-cmp-flow__arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--jc-teal);
	font-weight: 800;
}

.cps-post-main .jin-cmp-flow__arrow::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform: rotate(45deg);
}

/* =========================================================
   4. 縦ステップ（番号付き手順。1工程に説明文が要るとき）
   ========================================================= */

.cps-post-main ol.jin-cmp-steps {
	padding: 0;
	list-style: none;
	counter-reset: jin-cmp-steps;
}

.cps-post-main .jin-cmp-steps > li {
	position: relative;
	margin: 0;
	padding: 2px 0 20px 46px;
	list-style: none;
	line-height: 1.85;
}

.cps-post-main .jin-cmp-steps > li:last-child { padding-bottom: 2px; }

.cps-post-main .jin-cmp-steps > li::before {
	counter-increment: jin-cmp-steps;
	content: counter(jin-cmp-steps);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	font-family: var(--jc-mono);
	font-size: 0.9em;
	font-weight: 700;
}

.cps-post-main .jin-cmp-steps > li::after {
	content: "";
	position: absolute;
	top: 33px;
	bottom: 3px;
	left: 14px;
	width: 2px;
	background: var(--jc-teal-line);
}
.cps-post-main .jin-cmp-steps > li:last-child::after { display: none; }

.cps-post-main .jin-cmp-steps__title {
	display: block;
	margin-bottom: 2px;
	color: var(--jc-ink);
	font-weight: 800;
	line-height: 1.6;
}

/* =========================================================
   5. 2カラム比較（良い例/悪い例・Before/After・A/B）
   ========================================================= */

.cps-post-main .jin-cmp-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.cps-post-main .jin-cmp-compare__col {
	padding: 15px 16px;
	border: 1px solid var(--jc-line);
	border-top-width: 3px;
	border-radius: 10px;
	background: var(--jc-surface);
	font-size: 0.95em;
	line-height: 1.85;
}

.cps-post-main .jin-cmp-compare__col--good { border-top-color: var(--jc-teal); background: var(--jc-teal-bg-soft); }
.cps-post-main .jin-cmp-compare__col--bad { border-top-color: var(--jc-amber); background: var(--jc-amber-bg); }

.cps-post-main .jin-cmp-compare__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 800;
	line-height: 1.5;
}

.cps-post-main .jin-cmp-compare__col--good .jin-cmp-compare__head { color: var(--jc-teal-dark); }
.cps-post-main .jin-cmp-compare__col--bad .jin-cmp-compare__head { color: var(--jc-amber-dark); }

.cps-post-main .jin-cmp-compare__head::before {
	display: inline-flex;
	width: 21px;
	height: 21px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--jc-static-white);
	font-family: var(--jc-mono);
	font-size: 0.8em;
	font-weight: 700;
}

.cps-post-main .jin-cmp-compare__col--good .jin-cmp-compare__head::before { content: "\2713"; background: var(--jc-teal-surface); }
.cps-post-main .jin-cmp-compare__col--bad .jin-cmp-compare__head::before { content: "\00d7"; background: var(--jc-amber-surface); }

.cps-post-main .jin-cmp-compare__col > :last-child { margin-bottom: 0; }

/* =========================================================
   6. チェックリスト（読者の到達確認・準備リスト）
   ========================================================= */

.cps-post-main ul.jin-cmp-check {
	padding: 15px 18px;
	list-style: none;
	border: 1px solid var(--jc-teal-line);
	border-radius: 10px;
	background: var(--jc-teal-bg-soft);
}

.cps-post-main .jin-cmp-check > li {
	position: relative;
	margin: 0;
	padding: 7px 0 7px 30px;
	list-style: none;
	line-height: 1.8;
}

.cps-post-main .jin-cmp-check > li + li { border-top: 1px dashed var(--jc-teal-line); }

.cps-post-main .jin-cmp-check > li::before {
	content: "\2713";
	position: absolute;
	top: 9px;
	left: 0;
	display: flex;
	width: 19px;
	height: 19px;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	font-size: 0.72em;
	font-weight: 700;
}

/* =========================================================
   7. 関連記事カード（次に読む・回遊）
   ========================================================= */

.cps-post-main a.jin-cmp-related {
	display: block;
	padding: 13px 16px;
	border: 1px solid var(--jc-line);
	border-left: 4px solid var(--jc-teal);
	border-radius: 0 10px 10px 0;
	background: var(--jc-surface);
	text-decoration: none;
	transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.cps-post-main a.jin-cmp-related:hover {
	background: var(--jc-teal-bg-soft);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(16, 27, 38, 0.08);
}

.cps-post-main .jin-cmp-related__label {
	display: block;
	margin-bottom: 2px;
	color: var(--jc-teal);
	font-family: var(--jc-mono);
	font-size: 0.76em;
	font-weight: 700;
}

.cps-post-main .jin-cmp-related__title {
	display: block;
	color: var(--jc-ink);
	font-weight: 800;
	line-height: 1.6;
}

/* =========================================================
   8. CTAボックス（転職=琥珀 / 教材・技術=ティール）
   ========================================================= */

.cps-post-main .jin-cmp-cta {
	padding: 20px;
	border: 1px solid var(--jc-line);
	border-top-width: 4px;
	border-radius: 12px;
	background: var(--jc-surface);
}

.cps-post-main .jin-cmp-cta--career { border-top-color: var(--jc-amber); background: var(--jc-amber-bg); }
.cps-post-main .jin-cmp-cta--tech { border-top-color: var(--jc-teal); background: var(--jc-teal-bg); }

.cps-post-main .jin-cmp-cta__title {
	margin: 0 0 8px;
	color: var(--jc-ink);
	font-size: 1.05em;
	font-weight: 800;
	line-height: 1.55;
}

.cps-post-main .jin-cmp-cta__body {
	margin: 0 0 14px;
	color: var(--jc-text);
	font-size: 0.93em;
	line-height: 1.85;
}

.cps-post-main a.jin-cmp-cta__btn {
	display: inline-flex;
	min-height: 46px;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	border-radius: 8px;
	color: var(--jc-static-white) !important;
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.cps-post-main .jin-cmp-cta--career a.jin-cmp-cta__btn { background: var(--jc-amber-surface); }
.cps-post-main .jin-cmp-cta--career a.jin-cmp-cta__btn:hover {
	background: var(--jc-amber-surface);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(201, 138, 43, 0.32);
}
.cps-post-main .jin-cmp-cta--tech a.jin-cmp-cta__btn { background: var(--jc-teal-surface); }
.cps-post-main .jin-cmp-cta--tech a.jin-cmp-cta__btn:hover {
	background: var(--jc-teal-surface);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(23, 127, 112, 0.32);
}

/* =========================================================
   9. 図キャプション枠（実スクショ・実物写真＋出典）
   ========================================================= */

.cps-post-main figure.jin-cmp-figure {
	padding: 0;
	text-align: center;
}

.cps-post-main .jin-cmp-figure img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--jc-line);
	border-radius: 8px;
}

.cps-post-main .jin-cmp-figure figcaption {
	margin-top: 7px;
	color: var(--jc-muted);
	font-size: 0.82em;
	line-height: 1.7;
	text-align: center;
}

.cps-post-main .jin-cmp-figure figcaption a { color: var(--jc-teal-dark); }

/* =========================================================
   10. ファイル名付きコードブロック（タイプBのコード掲載）
   pre の濃色地は style.css（可読性CSS）を継承する
   ========================================================= */

.cps-post-main .jin-cmp-code {
	position: relative;   /* コピーボタン（--float）と折りたたみのフェードの基準 */
	overflow: hidden;
	border: 1px solid var(--jc-ink-deepest);
	border-radius: 8px;
	/* ★2026-08-11追加：地色を pre と同じにする。
	   背景を持たせていなかったため、ファイル名と pre の間に入り込んだ要素
	   （wpautopの空 <p> など）がページの白地で抜けて見えていた。
	   上の p:empty で消しているが、**別の要因で隙間ができても白くならない**ようにする。 */
	background: var(--jc-ink-deep);
}

.cps-post-main .jin-cmp-code__name {
	display: block;
	padding: 8px 14px;
	border-bottom: 1px solid var(--jc-ink-surface-2);
	background: var(--jc-ink-deepest);
	color: var(--jc-teal-on-dark);
	font-family: var(--jc-mono);
	font-size: 0.82em;
	font-weight: 700;
}

.cps-post-main .jin-cmp-code pre {
	margin: 0;
	border-radius: 0;
}

/* ---------------------------------------------------------
   シンタックスハイライト（2026-08-08追加）
   根拠＝読ませ方の科学 S12（Sarkar 2015・PPIG・アイトラッキング）
   「色分けはタスク完了時間を有意に短縮し、経験が増えるほど効果は弱まる」
   ＝未経験者向けの本サイトで最も効く。対象は pre 168個・ドリル17本。

   クラスは tools/clean-publish-html.py が **publish生成時に埋める**。
   記事本文（content.html）は素のままで、インライン style も書かない。

   🔒 色はティール＋琥珀＋グレーだけ（届け方の科学 V4「色は2レーン＋グレーから増やさない」）。
   🔒 背景 var(--jc-ink-deep) に対するコントラストは全色 WCAG AA(4.5:1) 以上
      （実測: comment 6.02 / keyword 10.25 / const 7.91 / string 9.74 / number 7.97 / func 13.83）。
      色を足すときは必ず測り直す（届け方の科学 V9・M5）。
   --------------------------------------------------------- */

.cps-post-main pre .tok-c { color: var(--jc-muted); font-style: normal; }  /* コメント */
.cps-post-main pre .tok-k { color: var(--jc-teal-on-dark); }                      /* キーワード・型 */
.cps-post-main pre .tok-p { color: var(--jc-teal-on-dark); }                      /* プリプロセッサ */
.cps-post-main pre .tok-t { color: var(--jc-teal-bright); }                      /* 定数・レジスタ */
.cps-post-main pre .tok-s { color: var(--jc-amber); }                      /* 文字列 */
.cps-post-main pre .tok-n { color: var(--jc-amber); }                      /* 数値 */
.cps-post-main pre .tok-f { color: var(--jc-line-2); }                      /* 関数名 */

/* =========================================================
   11. フェーズタイムライン（タイプH＝ロードマップ/ハブ記事の主役）
   ========================================================= */

.cps-post-main ol.jin-cmp-timeline {
	padding: 0 0 0 8px;
	list-style: none;
}

.cps-post-main .jin-cmp-timeline > li {
	position: relative;
	margin: 0;
	padding: 0 0 24px 30px;
	border-left: 2px solid var(--jc-teal-line);
	list-style: none;
}

.cps-post-main .jin-cmp-timeline > li:last-child {
	padding-bottom: 2px;
	border-left-color: transparent;
}

.cps-post-main .jin-cmp-timeline > li::before {
	content: "";
	position: absolute;
	top: 2px;
	left: -9px;
	width: 8px;
	height: 8px;
	border: 4px solid var(--jc-teal);
	border-radius: 50%;
	background: var(--jc-surface);
}

.cps-post-main .jin-cmp-timeline__phase {
	display: inline-block;
	margin-bottom: 5px;
	padding: 2px 11px;
	border-radius: 12px;
	background: var(--jc-ink-surface);
	color: var(--jc-teal-on-dark);
	font-family: var(--jc-mono);
	font-size: 0.76em;
	font-weight: 700;
	line-height: 1.7;
}

.cps-post-main .jin-cmp-timeline__title {
	display: block;
	margin-bottom: 4px;
	color: var(--jc-ink);
	font-size: 1.02em;
	font-weight: 800;
	line-height: 1.6;
}

.cps-post-main .jin-cmp-timeline__body {
	margin: 0;
	color: var(--jc-text);
	font-size: 0.93em;
	line-height: 1.85;
}

.cps-post-main .jin-cmp-timeline__body a { color: var(--jc-teal-dark); }

/* =========================================================
   12. 練習問題カード＋折りたたみ回答（タイプB・ドリル）
   問題は常に見せ、解答・解説は <details> で隠す。summary の
   +/− で開閉（JSなし。CSS未配備でも native に開閉できる＝画像頼み禁止と同じ思想）
   ========================================================= */

.cps-post-main .jin-cmp-quiz {
	margin: 1.4em 0;
	padding: 16px 18px;
	border: 1px solid var(--jc-teal-line);
	border-left: 4px solid var(--jc-teal);
	border-radius: 0 10px 10px 0;
	background: var(--jc-teal-bg-soft);
}

.cps-post-main .jin-cmp-quiz > :last-child { margin-bottom: 0; }

.cps-post-main .jin-cmp-quiz__label {
	display: inline-block;
	margin: 0 0 8px;
	padding: 2px 11px;
	border-radius: 12px;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	font-family: var(--jc-mono);
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.7;
}

/* 発展問題は濃いティールで「格上」を示す（色の意味は技術のまま崩さない） */
.cps-post-main .jin-cmp-quiz--advanced { border-left-color: var(--jc-teal-deep); }
.cps-post-main .jin-cmp-quiz--advanced .jin-cmp-quiz__label { background: var(--jc-teal-surface); }

/* 折りたたみ回答（details/summary。開閉はネイティブ） */
.cps-post-main .jin-cmp-answer {
	margin-top: 12px;
	border: 1px solid var(--jc-teal-line);
	border-radius: 8px;
	background: var(--jc-surface);
}

.cps-post-main .jin-cmp-answer > summary {
	position: relative;
	padding: 11px 16px 11px 42px;
	color: var(--jc-teal-dark);
	font-weight: 800;
	line-height: 1.5;
	list-style: none; /* Firefox の三角を消す */
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.cps-post-main .jin-cmp-answer > summary::-webkit-details-marker { display: none; } /* Chrome/Safari の三角 */

/* 左肩の +（開いたら −）マーク */
.cps-post-main .jin-cmp-answer > summary::before {
	content: "+";
	position: absolute;
	top: 50%;
	left: 12px;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	border-radius: 5px;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	font-family: var(--jc-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.cps-post-main .jin-cmp-answer[open] > summary::before { content: "\2212"; } /* − */
.cps-post-main .jin-cmp-answer[open] > summary { border-bottom: 1px solid var(--jc-teal-line); }

.cps-post-main .jin-cmp-answer__body {
	padding: 14px 16px;
	font-size: 0.95em;
	line-height: 1.85;
}

.cps-post-main .jin-cmp-answer__body > :first-child { margin-top: 0; }
.cps-post-main .jin-cmp-answer__body > :last-child { margin-bottom: 0; }
.cps-post-main .jin-cmp-answer__body .jin-cmp-code { margin: 12px 0; }

/* =========================================================
   13. 数値スタッツ（転職の数字・年収・残業など「効く数字」を大きく見せる）
   タイプA/H。既定はティール、転職系は --career で琥珀に。
   ========================================================= */

.cps-post-main .jin-cmp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 12px;
}

.cps-post-main .jin-cmp-stats__item {
	padding: 18px 12px 15px;
	border: 1px solid var(--jc-teal-line);
	border-radius: 12px;
	background: linear-gradient(180deg, var(--jc-teal-bg-soft), var(--jc-surface));
	text-align: center;
}

.cps-post-main .jin-cmp-stats__value {
	display: block;
	color: var(--jc-teal-deep);
	font-family: var(--jc-mono);
	font-size: 2.05em;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.cps-post-main .jin-cmp-stats__unit {
	margin-left: 2px;
	font-size: 0.48em;
	font-weight: 700;
	letter-spacing: 0;
}

.cps-post-main .jin-cmp-stats__label {
	display: block;
	margin-top: 7px;
	color: var(--jc-muted);
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.5;
}

.cps-post-main .jin-cmp-stats__note {
	display: block;
	margin-top: 2px;
	color: var(--jc-muted);
	font-size: 0.76em;
	line-height: 1.6;
}

/* 転職系は琥珀で数字を立てる（色の意味：琥珀＝転職・キャリア） */
.cps-post-main .jin-cmp-stats--career .jin-cmp-stats__item {
	border-color: var(--jc-amber-line);
	background: linear-gradient(180deg, var(--jc-amber-bg), var(--jc-surface));
}
.cps-post-main .jin-cmp-stats--career .jin-cmp-stats__value { color: var(--jc-amber-dark); }

/* =========================================================
   14. プルクオート（面接官の一言・本音など、印象的な引用を大きく見せる）
   濃色地で本文と質感を変え、体験の"声"を立てる。
   ========================================================= */

.cps-post-main blockquote.jin-cmp-pullquote {
	position: relative;
	padding: 22px 24px 20px 58px;
	border: 0;
	border-radius: 12px;
	background: var(--jc-ink-surface);
	color: var(--jc-line-soft);
}

.cps-post-main .jin-cmp-pullquote::before {
	content: "\201C";
	position: absolute;
	top: 4px;
	left: 18px;
	color: var(--jc-teal);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.1em;
	line-height: 1;
}

.cps-post-main .jin-cmp-pullquote p {
	margin: 0;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.75;
}

.cps-post-main .jin-cmp-pullquote cite {
	display: block;
	margin-top: 10px;
	color: var(--jc-muted);
	font-size: 0.82em;
	font-style: normal;
	font-weight: 600;
}
.cps-post-main .jin-cmp-pullquote cite::before { content: "\2014\00a0"; }

/* 転職系は琥珀の引用符 */
.cps-post-main .jin-cmp-pullquote--career::before { color: var(--jc-amber); }

/* =========================================================
   15. 判定バッジ（「本当/誇張/会社による」等をインラインで色分け。表セル内でも使える）
   色の意味：琥珀＝注意すべき事実、ティール＝読者には安心材料、グレー＝条件次第
   ========================================================= */

.cps-post-main .jin-cmp-verdict {
	display: inline-flex;
	align-items: center;
	padding: 2px 11px;
	border-radius: 12px;
	font-family: var(--jc-mono);
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
}

.cps-post-main .jin-cmp-verdict--true {
	background: var(--jc-amber-bg);
	color: var(--jc-amber-dark);
	box-shadow: inset 0 0 0 1px var(--jc-amber-line);
}
.cps-post-main .jin-cmp-verdict--myth {
	background: var(--jc-teal-bg);
	color: var(--jc-teal-dark);
	box-shadow: inset 0 0 0 1px var(--jc-teal-line);
}
.cps-post-main .jin-cmp-verdict--depends {
	background: var(--jc-line-soft);
	color: var(--jc-ink-2);
	box-shadow: inset 0 0 0 1px var(--jc-line);
}

/* 汎用の良い/悪いバッジ（myth-busting以外＝物販の互換性◎/×などで使う別名。
   色の意味は素直に：ティール＝良い/対応、琥珀＝注意/非対応、グレーは--dependsで条件次第） */
.cps-post-main .jin-cmp-verdict--ok {
	background: var(--jc-teal-bg);
	color: var(--jc-teal-dark);
	box-shadow: inset 0 0 0 1px var(--jc-teal-line);
}
.cps-post-main .jin-cmp-verdict--no {
	background: var(--jc-amber-bg);
	color: var(--jc-amber-dark);
	box-shadow: inset 0 0 0 1px var(--jc-amber-line);
}

/* =========================================================
   16. 特徴グリッド（アイコン付きカードを2〜4枚。向いてる人の特徴・活きるスキル等）
   2カラム比較（⑧）が良い/悪いの2択なのに対し、こちらは並列の複数要素を見せる。
   ========================================================= */

.cps-post-main .jin-cmp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
	gap: 12px;
}

.cps-post-main .jin-cmp-grid__item {
	padding: 16px 16px 13px;
	border: 1px solid var(--jc-line);
	border-top: 3px solid var(--jc-teal);
	border-radius: 10px;
	background: var(--jc-surface);
}
.cps-post-main .jin-cmp-grid__item > :last-child { margin-bottom: 0; }

/* 🔒 2026-08-14 運営者指示：1文字だけのマークはUIとして見栄えが悪いので使わない。
   単語（2〜6文字程度）を入れる運用へ変更したため、固定30px角からラベル型へ直した。
   min-width で従来の1〜3文字（USB 等）の見え方も保つ。 */
.cps-post-main .jin-cmp-grid__mark {
	display: inline-flex;
	min-width: 30px;
	height: 30px;
	padding: 0 10px;
	margin-bottom: 9px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--jc-teal-bg);
	color: var(--jc-teal-dark);
	font-family: var(--jc-mono);
	font-size: 0.95em;
	font-weight: 800;
	white-space: nowrap;
}

.cps-post-main .jin-cmp-grid__title {
	display: block;
	margin-bottom: 4px;
	color: var(--jc-ink);
	font-weight: 800;
	line-height: 1.5;
}

.cps-post-main .jin-cmp-grid__item p {
	margin: 0;
	color: var(--jc-text);
	font-size: 0.9em;
	line-height: 1.8;
}

.cps-post-main .jin-cmp-grid--career .jin-cmp-grid__item { border-top-color: var(--jc-amber); }
.cps-post-main .jin-cmp-grid--career .jin-cmp-grid__mark { background: var(--jc-amber-bg); color: var(--jc-amber-dark); }

/* =========================================================
   20. 商品カード（物販・比較） jin-cmp-product
   ---------------------------------------------------------
   使いどころ：ボードごとの「スペック＋こんな人向け＋購入ボタン」を
   カード単位で見せる（比較・購入ガイド）。--pick でおすすめを強調。
   ドリル互換などの判定は既存の jin-cmp-verdict を spec 内に流用する。
   ========================================================= */
.cps-post-main .jin-cmp-product {
	margin: 18px 0;
	padding: 18px 20px;
	border: 1px solid var(--jc-line);
	border-radius: 12px;
	background: var(--jc-surface);
}
.cps-post-main .jin-cmp-product--pick {
	border: 2px solid var(--jc-teal);
	background: var(--jc-teal-bg-soft);
}
.cps-post-main .jin-cmp-product__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-bottom: 12px;
}
.cps-post-main .jin-cmp-product__name {
	margin: 0;
	color: var(--jc-ink);
	font-size: 1.12em;
	font-weight: 800;
	line-height: 1.4;
}
.cps-post-main .jin-cmp-product__tag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	font-size: 0.74em;
	font-weight: 700;
}
.cps-post-main .jin-cmp-product__body {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.cps-post-main .jin-cmp-product__img {
	flex: 0 0 auto;
	width: 168px;
	max-width: 100%;
}
.cps-post-main .jin-cmp-product__img img {
	width: 100%;
	height: auto;
	border: 1px solid var(--jc-line);
	border-radius: 8px;
}
.cps-post-main .jin-cmp-product__main {
	flex: 1 1 260px;
	min-width: 0;
}
.cps-post-main table.jin-cmp-product__spec {
	width: 100%;
	margin: 0 0 10px;
	border-collapse: collapse;
	font-size: 0.85em;
}
.cps-post-main .jin-cmp-product__spec th,
.cps-post-main .jin-cmp-product__spec td {
	padding: 4px 8px;
	border-bottom: 1px solid var(--jc-line);
	text-align: left;
	vertical-align: top;
}
.cps-post-main .jin-cmp-product__spec th {
	width: 32%;
	color: var(--jc-muted);
	font-weight: 700;
	white-space: nowrap;
}
.cps-post-main .jin-cmp-product__for {
	margin: 0 0 12px;
	color: var(--jc-text);
	font-size: 0.92em;
	line-height: 1.8;
}
.cps-post-main a.jin-cmp-product__btn {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	padding: 8px 22px;
	border-radius: 8px;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white) !important;
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.cps-post-main a.jin-cmp-product__btn:hover {
	background: var(--jc-teal-surface);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(23, 127, 112, 0.32);
}
.cps-post-main .jin-cmp-product__note {
	margin: 8px 0 0;
	color: var(--jc-muted);
	font-size: 0.8em;
	line-height: 1.7;
}

/* =========================================================
   19. 冒頭の結論カード jin-cmp-hero（2026-07-26 追加）
   ファーストビューで「この記事を読むと何が手に入るか」を3秒で渡す。
   リード直後に1枚だけ置く。1記事に2枚置かない。
   ========================================================= */

.cps-post-main .jin-cmp-hero {
	margin: 22px 0 26px;
	padding: 20px 22px 18px;
	border-radius: 12px;
	background: linear-gradient(160deg, var(--jc-ink-surface) 0%, var(--jc-ink-surface-2) 100%);
	color: var(--jc-on-dark);
}

.cps-post-main .jin-cmp-hero__label {
	display: inline-block;
	margin-bottom: 12px;
	padding: 3px 12px;
	border-radius: 12px;
	background: rgba(127, 214, 201, 0.16);
	color: var(--jc-teal-on-dark);
	font-family: var(--jc-mono);
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.7;
}

/* 🔒 2026-08-28: 記事側の <ul> に jin-cmp-hero__list が付いていない実例が本番に複数ある
   （post 866 ほか）。style.css の `.cps-post-main li { color: var(--jc-text) }`（詳細度0,1,1）が
   hero の継承色に勝ち、濃紺の上に濃グレーが乗って**最初の1画面が読めなくなっていた**。
   記事側を直しても公開済みは直らないので、素の ul/li でも同じ見た目になるようここで受ける。 */
.cps-post-main ul.jin-cmp-hero__list,
.cps-post-main .jin-cmp-hero > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cps-post-main .jin-cmp-hero > p { color: var(--jc-on-dark); }

.cps-post-main .jin-cmp-hero__list > li,
.cps-post-main .jin-cmp-hero > ul > li {
	position: relative;
	margin: 0 0 10px;
	padding: 0 0 0 26px;
	color: var(--jc-on-dark);
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.75;
	list-style: none;
}

.cps-post-main .jin-cmp-hero__list > li:last-child,
.cps-post-main .jin-cmp-hero > ul > li:last-child { margin-bottom: 0; }

.cps-post-main .jin-cmp-hero__list > li::before,
.cps-post-main .jin-cmp-hero > ul > li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 4px;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	/* 🔒 !important が要る。style.css の
	   `html body .cps-post-main ul > li:before { background-color: var(--jc-teal-surface) !important }`
	   （親テーマの黄色い点を潰すための全体指定）がここまで効き、濃地の上で **3.03:1** まで落ちていた。
	   hero は濃地なので --jc-teal-on-dark(9.0:1) を使う。2026-08-28 実測。 */
	background-color: var(--jc-teal-on-dark) !important;
}

.cps-post-main .jin-cmp-hero__list > li strong,
.cps-post-main .jin-cmp-hero > ul > li strong,
.cps-post-main .jin-cmp-hero > ul > li b { color: var(--jc-amber-line); }

.cps-post-main .jin-cmp-hero__meta {
	display: block;
	margin-top: 15px;
	padding-top: 13px;
	border-top: 1px solid rgba(234, 243, 241, 0.16);
	color: var(--jc-line-2);
	font-size: 0.84em;
	line-height: 1.9;
}

/* 1項目＝1つの span。テキストノードのままだと折り返しで単位が泣き別れる */
.cps-post-main .jin-cmp-hero__meta > span {
	display: inline-block;
	margin-right: 16px;
	white-space: nowrap;
}

.cps-post-main .jin-cmp-hero__meta > span:last-child { margin-right: 0; }

.cps-post-main .jin-cmp-hero__meta b {
	color: var(--jc-amber-line);
	font-family: var(--jc-mono);
	font-size: 1.2em;
	font-weight: 800;
}

/* =========================================================
   20. 著者カード jin-cmp-author（2026-07-26 追加）
   「＜自己紹介＞」の地の文を置き換える。E-E-A-T の明示。
   ========================================================= */

/* 🔒 2026-08-28: flex の直下に avatar・name・role・body を並べていたため、
   name/role が min-content(幅16px)まで潰れて**本番で縦書きになっていた**（post 866で実測）。
   記事側は span 4つのままなので、グリッドの領域割り当てで受ける。
   ※ role を持たない記事があるので、行は auto にして空行が潰れるようにする。 */
.cps-post-main .jin-cmp-author {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-areas:
		"avatar name"
		"avatar role"
		"avatar body";
	gap: 0 14px;
	align-items: start;
	margin: 22px 0;
	padding: 15px 17px;
	border: 1px solid var(--jc-line);
	border-left: 4px solid var(--jc-amber);
	border-radius: 8px;
	background: var(--jc-bg);
}

.cps-post-main .jin-cmp-author__avatar {
	grid-area: avatar;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--jc-ink-surface);
	color: var(--jc-amber-line);
	font-size: 1.05em;
	font-weight: 800;
	line-height: 1;
}

.cps-post-main .jin-cmp-author__name {
	grid-area: name;
	display: block;
	color: var(--jc-ink);
	font-size: 0.98em;
	font-weight: 800;
	line-height: 1.5;
}

.cps-post-main .jin-cmp-author__role {
	grid-area: role;
	display: block;
	margin-top: 2px;
	color: var(--jc-amber-dark);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.6;
}

.cps-post-main .jin-cmp-author__body {
	grid-area: body;
	display: block;
	margin-top: 7px;
	color: var(--jc-text);
	font-size: 0.9em;
	line-height: 1.8;
}

/* =========================================================
   21. 例文カード jin-cmp-sample（2026-07-26 追加）
   志望動機・職務経歴のような「型のある文章」を出すときの主役。
   dt に要素ラベル、dd に本文。型が目で見える形にする。
   ========================================================= */

.cps-post-main .jin-cmp-sample {
	margin: 24px 0;
	border: 1px solid var(--jc-teal-line);
	border-radius: 10px;
	background: var(--jc-surface);
	overflow: hidden;
}

.cps-post-main .jin-cmp-sample__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: center;
	padding: 11px 16px;
	background: var(--jc-teal-bg);
	color: var(--jc-teal-deep);
	font-size: 0.94em;
	font-weight: 800;
	line-height: 1.6;
}

.cps-post-main .jin-cmp-sample__badge {
	flex: 0 0 auto;
	padding: 2px 10px;
	border-radius: 11px;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	font-family: var(--jc-mono);
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.8;
}

.cps-post-main dl.jin-cmp-sample__body {
	display: grid;
	grid-template-columns: 6.4em 1fr;
	margin: 0;
	padding: 4px 16px 14px;
}

.cps-post-main .jin-cmp-sample__body > dt {
	margin: 0;
	padding: 13px 12px 0 0;
	color: var(--jc-teal-dark);
	font-family: var(--jc-mono);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.02em;
	border-top: 1px solid var(--jc-teal-line);
}

.cps-post-main .jin-cmp-sample__body > dd {
	margin: 0;
	padding: 13px 0 0;
	color: var(--jc-text);
	font-size: 0.95em;
	line-height: 1.9;
	border-top: 1px solid var(--jc-teal-line);
}

.cps-post-main .jin-cmp-sample__body > dt:first-of-type,
.cps-post-main .jin-cmp-sample__body > dt:first-of-type + dd {
	border-top: 0;
	padding-top: 12px;
}

.cps-post-main .jin-cmp-sample__note {
	display: block;
	padding: 10px 16px;
	border-top: 1px dashed var(--jc-teal-line);
	background: var(--jc-teal-bg-soft);
	color: var(--jc-muted);
	font-size: 0.85em;
	line-height: 1.8;
}

/* =========================================================
   22. 選択肢カード jin-cmp-pick（2026-07-26 追加）
   「この中から1つ選ぶ」を提示する一覧。3列表の代わりに使い、
   狭幅でも潰れないようにする。__who は「こう書ける人」。
   ========================================================= */

.cps-post-main ol.jin-cmp-pick {
	counter-reset: jin-cmp-pick;
	margin: 22px 0;
	padding: 0;
	list-style: none;
}

.cps-post-main .jin-cmp-pick > li {
	position: relative;
	margin: 0 0 10px;
	padding: 13px 16px 13px 52px;
	border: 1px solid var(--jc-line);
	border-radius: 9px;
	background: var(--jc-surface);
	list-style: none;
}

.cps-post-main .jin-cmp-pick > li:last-child { margin-bottom: 0; }

.cps-post-main .jin-cmp-pick > li::before {
	counter-increment: jin-cmp-pick;
	content: counter(jin-cmp-pick);
	position: absolute;
	top: 13px;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	font-family: var(--jc-mono);
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1;
}

.cps-post-main .jin-cmp-pick__title {
	display: block;
	color: var(--jc-ink);
	font-size: 1em;
	font-weight: 800;
	line-height: 1.7;
}

.cps-post-main .jin-cmp-pick__who {
	display: block;
	margin-top: 5px;
	padding-left: 15px;
	position: relative;
	color: var(--jc-muted);
	font-size: 0.87em;
	line-height: 1.8;
}

.cps-post-main .jin-cmp-pick__who::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 8px;
	height: 1px;
	background: var(--jc-amber-surface);
}

/* 琥珀（キャリア面）に寄せたい記事用 */
.cps-post-main .jin-cmp-pick--career > li::before { background: var(--jc-amber-surface); }

/* =========================================================
   23. 見出し直下の要点1行 jin-cmp-keyline（2026-07-26 追加）
   H2/H3 の直後に置き、その章の結論を1文で先に渡す。
   ========================================================= */

.cps-post-main .jin-cmp-keyline {
	margin: -4px 0 18px;
	padding: 9px 0 9px 15px;
	border-left: 3px solid var(--jc-amber);
	color: var(--jc-ink-2);
	font-size: 1.01em;
	font-weight: 700;
	line-height: 1.85;
}

/* =========================================================
   24. 読者別の分岐 jin-cmp-branch（2026-07-26 追加）
   ハブ記事から配下記事へ、読者が自分の行き先を選べるようにする。
   ========================================================= */

.cps-post-main .jin-cmp-branch {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 9px;
	margin: 22px 0;
}

.cps-post-main a.jin-cmp-branch__item {
	position: relative;
	display: block;
	padding: 12px 34px 12px 15px;
	border: 1px solid var(--jc-teal-line);
	border-radius: 9px;
	background: var(--jc-teal-bg-soft);
	text-decoration: none;
}

.cps-post-main a.jin-cmp-branch__item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-top: 2px solid var(--jc-teal);
	border-right: 2px solid var(--jc-teal);
	transform: rotate(45deg);
}

.cps-post-main .jin-cmp-branch__k {
	display: block;
	color: var(--jc-teal-dark);
	font-family: var(--jc-mono);
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.7;
}

.cps-post-main .jin-cmp-branch__v {
	display: block;
	margin-top: 2px;
	color: var(--jc-ink);
	font-size: 0.94em;
	font-weight: 700;
	line-height: 1.65;
	text-decoration: underline;
	text-decoration-color: var(--jc-teal-line);
	text-underline-offset: 3px;
}

.cps-post-main .jin-cmp-branch__d {
	display: block;
	margin-top: 5px;
	color: var(--jc-muted);
	font-size: 0.85em;
	font-weight: 400;
	line-height: 1.8;
}

/* =========================================================
   25. 症状別トラブル jin-cmp-trouble（2026-07-31 追加）
   dt＝読者がいま見えている症状、dd＝原因と対処。
   「症状／原因／対処」を3列表にすると狭幅で横スクロールになるため、
   dt+dd を1枚のカードに積んで縦に読ませる。色は琥珀（注意レーン）。
   ========================================================= */

.cps-post-main .jin-cmp-trouble dl { margin: 0; }

.cps-post-main .jin-cmp-trouble dt {
	position: relative;
	margin: 0;
	padding: 12px 16px 12px 44px;
	border: 1px solid var(--jc-amber-line);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background: var(--jc-amber-bg);
	color: var(--jc-ink);
	font-weight: 800;
	line-height: 1.65;
}

.cps-post-main .jin-cmp-trouble dt::before {
	content: "?";
	position: absolute;
	top: 13px;
	left: 14px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--jc-amber-surface);
	color: var(--jc-static-white);
	font-family: var(--jc-mono);
	font-size: 0.78em;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.cps-post-main .jin-cmp-trouble dd {
	margin: 0 0 14px;
	padding: 12px 16px;
	border: 1px solid var(--jc-amber-line);
	border-radius: 0 0 10px 10px;
	background: var(--jc-surface);
	color: var(--jc-text);
	line-height: 1.9;
}

.cps-post-main .jin-cmp-trouble dd:last-child { margin-bottom: 0; }

/* =========================================================
   26. ビットレイアウト jin-cmp-bitfield（2026-08-02 追加）
   バイト列の「どのビットに何が入っているか」を実寸比で見せる。
   CAN/UART のペイロード、レジスタのビット割り当てなど、
   「8ビット中の3ビット」が視覚的に3マスに見えることが要件。
   表(<table>)でも書けるが、幅の比率が目に出ないため専用に起こした。
   構造は span だけ（div直下に p を置かない＝WPビジュアルエディタ対策）。
   ========================================================= */

.cps-post-main .jin-cmp-bitfield {
	padding: 15px 16px;
	border: 1px solid var(--jc-line);
	border-radius: 10px;
	background: var(--jc-teal-bg-soft);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cps-post-main .jin-cmp-bitfield__row {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 260px;
}

.cps-post-main .jin-cmp-bitfield__row + .jin-cmp-bitfield__row { margin-top: 5px; }

.cps-post-main .jin-cmp-bitfield__byte {
	flex: 0 0 auto;
	width: 72px;
	color: var(--jc-muted);
	font-family: var(--jc-mono);
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.6;
	text-align: right;
	white-space: nowrap;
}

.cps-post-main .jin-cmp-bitfield__cells {
	display: flex;
	flex: 1 1 auto;
	gap: 2px;
	min-width: 0;
}

/* 1マス＝1ビット。等幅で並べるので「3bit幅」が3マスに見える */
.cps-post-main .jin-cmp-bitfield__cell {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	height: 27px;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--jc-line);
	border-radius: 3px;
	background: var(--jc-surface);
	color: var(--jc-muted);
	font-family: var(--jc-mono);
	font-size: 0.68em;
	font-weight: 700;
	line-height: 1;
}

/* 信号の色分け。--a/--b/--c は「技術レーン＝ティール系＋インク」で統一する。
   琥珀は --warn（触ってはいけない・予約ビット）だけに使い、色の意味を崩さない。 */
.cps-post-main .jin-cmp-bitfield__cell--a {
	border-style: solid;
	border-color: var(--jc-teal);
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
}
.cps-post-main .jin-cmp-bitfield__cell--b {
	border-style: solid;
	border-color: var(--jc-teal-deep);
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
}
.cps-post-main .jin-cmp-bitfield__cell--c {
	border-style: solid;
	border-color: var(--jc-ink-2);
	background: var(--jc-ink-surface-2);
	color: var(--jc-static-white);
}
.cps-post-main .jin-cmp-bitfield__cell--warn {
	border-style: solid;
	border-color: var(--jc-amber);
	background: var(--jc-amber-bg);
	color: var(--jc-amber-dark);
}

/* 凡例。どの色がどの信号かをここで対応づける（本文だけでも読める補助） */
.cps-post-main .jin-cmp-bitfield__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid var(--jc-line);
	font-size: 0.85em;
	line-height: 1.7;
}

.cps-post-main .jin-cmp-bitfield__key {
	display: inline-flex;
	align-items: center;
	color: var(--jc-text);
	font-weight: 700;
}

.cps-post-main .jin-cmp-bitfield__key::before {
	content: "";
	width: 13px;
	height: 13px;
	margin-right: 7px;
	border-radius: 3px;
	background: var(--jc-line);
}

.cps-post-main .jin-cmp-bitfield__key--a::before { background: var(--jc-teal-surface); }
.cps-post-main .jin-cmp-bitfield__key--b::before { background: var(--jc-teal-surface); }
.cps-post-main .jin-cmp-bitfield__key--c::before { background: var(--jc-ink-surface-2); }
.cps-post-main .jin-cmp-bitfield__key--warn::before {
	background: var(--jc-amber-bg);
	box-shadow: inset 0 0 0 1px var(--jc-amber);
}

/* 図の下に置く一言（何バイト目の何ビットを取るか等） */
.cps-post-main .jin-cmp-bitfield__note {
	display: block;
	margin-top: 8px;
	color: var(--jc-muted);
	font-size: 0.82em;
	line-height: 1.7;
}

/* =========================================================
   27. フレーム帯 jin-cmp-frame（2026-08-02 追加）
   通信フレームのフィールド並びを「1本の帯」で見せる。
   CANのデータフレーム（SOF/ID/RTR/DLC/データ/CRC/ACK/EOF）のように、
   順番と「どこが自分の担当か」を一目で示したいときに使う。
   ㉘bitfield が「1マス＝1ビットで幅の比率を見せる」のに対し、
   こちらは「フィールドの並びと担当の色分け」が要件。ビット数が
   11や15になると1マス1ビットでは破綻するため別コンポーネントにした。
   幅は --f1〜--f8 の flex-grow でおおよそビット数に比例させる。
   構造は span だけ（div直下に p を置かない＝WPビジュアルエディタ対策）。
   ========================================================= */

.cps-post-main .jin-cmp-frame {
	padding: 15px 16px;
	border: 1px solid var(--jc-line);
	border-radius: 10px;
	background: var(--jc-teal-bg-soft);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cps-post-main .jin-cmp-frame__row {
	display: flex;
	align-items: stretch;
	gap: 9px;
	min-width: 300px;
}

.cps-post-main .jin-cmp-frame__row + .jin-cmp-frame__row { margin-top: 9px; }

.cps-post-main .jin-cmp-frame__label {
	flex: 0 0 auto;
	width: 78px;
	align-self: center;
	color: var(--jc-ink);
	font-size: 0.8em;
	font-weight: 800;
	line-height: 1.5;
	text-align: right;
}

.cps-post-main .jin-cmp-frame__fields {
	display: flex;
	flex: 1 1 auto;
	gap: 2px;
	min-width: 0;
}

/* 1フィールド。既定は「コントローラが自動でやる」側＝グレー */
.cps-post-main .jin-cmp-frame__field {
	display: flex;
	flex: 1 1 0;
	/* 短い名前（SOF・RTR）が1文字ずつ折り返さない下限。
	   これを割ると帯が読めなくなるので、収まらないときは容器側を横スクロールさせる */
	min-width: 40px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 7px 3px;
	border: 1px solid var(--jc-line);
	border-radius: 4px;
	background: var(--jc-line-soft);
	color: var(--jc-muted);
	text-align: center;
}

/* 幅の重み。厳密な比率ではなく「短い/長い」が伝わればよい */
.cps-post-main .jin-cmp-frame__field--f2 { flex-grow: 2; }
.cps-post-main .jin-cmp-frame__field--f3 { flex-grow: 3; }
.cps-post-main .jin-cmp-frame__field--f4 { flex-grow: 4; }
.cps-post-main .jin-cmp-frame__field--f6 { flex-grow: 6; }
.cps-post-main .jin-cmp-frame__field--f8 { flex-grow: 8; }

/* アプリのコードから触るフィールド（ID・DLC・データ）＝ティール */
.cps-post-main .jin-cmp-frame__field--app {
	border-color: var(--jc-teal);
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
}

/* CAN FD で増える・変わるところ＝琥珀（注意して見る場所） */
.cps-post-main .jin-cmp-frame__field--fd {
	border-color: var(--jc-amber);
	background: var(--jc-amber-bg);
	color: var(--jc-amber-dark);
}

/* 「いまこの節で話しているフィールド」＝濃いティールで1つだけ立てる。
   シグナリング(cueing)の原理。同じ帯を節ごとに再掲し、話している箇所だけを
   強調すると、読者が前の章へ戻らずに済む（空間的近接の原理）。
   色は技術レーンのまま濃さで差をつけるので、--app との意味の衝突が起きない。 */
.cps-post-main .jin-cmp-frame__field--focus {
	border-color: var(--jc-teal-deep);
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	box-shadow: 0 0 0 2px var(--jc-teal-deep);
}

/* 再掲用の帯は本文の流れを止めないよう余白を詰める */
.cps-post-main .jin-cmp-frame--recap {
	margin: 1.1em 0;
	padding: 11px 14px;
}

.cps-post-main .jin-cmp-frame__name {
	display: block;
	font-size: 0.76em;
	font-weight: 800;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.cps-post-main .jin-cmp-frame__bits {
	display: block;
	margin-top: 2px;
	font-family: var(--jc-mono);
	font-size: 0.66em;
	font-weight: 700;
	line-height: 1.3;
	opacity: 0.85;
}

.cps-post-main .jin-cmp-frame__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid var(--jc-line);
	font-size: 0.85em;
	line-height: 1.7;
}

.cps-post-main .jin-cmp-frame__key {
	display: inline-flex;
	align-items: center;
	color: var(--jc-text);
	font-weight: 700;
}

.cps-post-main .jin-cmp-frame__key::before {
	content: "";
	width: 13px;
	height: 13px;
	margin-right: 7px;
	border-radius: 3px;
	background: var(--jc-line-soft);
	box-shadow: inset 0 0 0 1px var(--jc-line);
}

.cps-post-main .jin-cmp-frame__key--app::before {
	background: var(--jc-teal-surface);
	box-shadow: none;
}
.cps-post-main .jin-cmp-frame__key--fd::before {
	background: var(--jc-amber-bg);
	box-shadow: inset 0 0 0 1px var(--jc-amber);
}
.cps-post-main .jin-cmp-frame__key--focus::before {
	background: var(--jc-teal-surface);
	box-shadow: none;
}

.cps-post-main .jin-cmp-frame__note {
	display: block;
	margin-top: 8px;
	color: var(--jc-muted);
	font-size: 0.82em;
	line-height: 1.7;
}

/* =========================================================
   28. 階層スタック jin-cmp-stack（2026-08-02 追加）
   「どこからどこまでが自分の担当か」を積み木で見せる。
   OSIの層と規格の対応のように、上下の順序と範囲の境界が意味を持つとき。
   表(<table>)でも書けるが、表は「並び」であって「積み上がり」に見えない。
   --in が自分の範囲（ティール）、--out が範囲外（グレー）。
   構造は span だけ（div直下に p を置かない＝WPビジュアルエディタ対策）。
   ========================================================= */

.cps-post-main .jin-cmp-stack {
	padding: 15px 16px;
	border: 1px solid var(--jc-line);
	border-radius: 10px;
	background: var(--jc-teal-bg-soft);
}

.cps-post-main .jin-cmp-stack__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 14px;
	padding: 11px 14px;
	border: 1px solid var(--jc-line);
	border-radius: 6px;
	background: var(--jc-line-soft);
	color: var(--jc-muted);
}

.cps-post-main .jin-cmp-stack__row + .jin-cmp-stack__row { margin-top: 4px; }

/* 自分の範囲（この記事でいうCANの規格）＝ティールで塗る */
.cps-post-main .jin-cmp-stack__row--in {
	border-color: var(--jc-teal);
	background: var(--jc-teal-bg);
	color: var(--jc-text);
}

.cps-post-main .jin-cmp-stack__layer {
	flex: 0 0 auto;
	width: 13em;
	font-size: 0.88em;
	font-weight: 800;
	line-height: 1.6;
}

.cps-post-main .jin-cmp-stack__row--in .jin-cmp-stack__layer { color: var(--jc-teal-deep); }

.cps-post-main .jin-cmp-stack__spec {
	flex: 0 0 auto;
	width: 12em;
	font-family: var(--jc-mono);
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.7;
}

.cps-post-main .jin-cmp-stack__row--in .jin-cmp-stack__spec { color: var(--jc-teal-dark); }

.cps-post-main .jin-cmp-stack__desc {
	flex: 1 1 12em;
	min-width: 0;
	font-size: 0.86em;
	line-height: 1.75;
}

/* 範囲の境目に引く線。--in の最初の行の上へ置く */
.cps-post-main .jin-cmp-stack__border {
	display: block;
	margin: 9px 0;
	padding-left: 22px;
	position: relative;
	color: var(--jc-teal-dark);
	font-size: 0.82em;
	font-weight: 800;
	line-height: 1.6;
}

.cps-post-main .jin-cmp-stack__border::before {
	content: "";
	position: absolute;
	top: 0.68em;
	left: 0;
	width: 14px;
	height: 0;
	border-top: 2px dashed var(--jc-teal);
}

.cps-post-main .jin-cmp-stack__note {
	display: block;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--jc-line);
	color: var(--jc-muted);
	font-size: 0.82em;
	line-height: 1.7;
}

/* =========================================================
   表（<table>）★2026-08-08追加・全記事に効く
   ---------------------------------------------------------
   実測 117個・46本（88%）に入っているのに、CSSは2026-07-26の
   「横潰れ対策」だけで、見た目の設計は0行だった
   （経緯＝.agents/ブログ要素マップ.md §0 の指摘1）。

   採ったもの
     - 縦罫線を落として横罫線だけにする（S2＝理解に寄与しない線を減らす）
     - 見出し行を面で立てる（S4＝構造の合図。太字だけでは行にならない）
     - 1列目＝行ラベルを立てる（S4）
     - 狭幅で切れている表に「まだ続く」合図を出す（W6＝完全性の錯覚の回避）
   採らなかったもの
     - ゼブラ縞。Enders 2008 の対照試験で**正確性に有意差なし・速度もほぼ差なし**。
       効くとされるのは列の多い表だが、自サイトは 2列51・3列42＝**79%が3列以下**。
       根拠が弱いものを全表へ入れない（正本＝.agents/読ませ方の科学.md §10-4）
   ========================================================= */

.cps-post-main table {
	margin: 1.8em 0;
	border: none;
	border-top: 1px solid var(--jc-line);
	border-bottom: 2px solid var(--jc-line);
	/* JIN親テーマの word-break:break-all を打ち消す。
	   `DDRB` `PlatformIO` のような識別子が1文字ずつ折れて読めなくなっていた。 */
	word-break: normal;
	overflow-wrap: break-word;
}

/* 🔒 セレクタは親テーマと同じ `table tr td` の形にする。
   `table td` だと詳細度が (0,1,2) で、親の (0,1,3) に負けて縦罫線が消えなかった
   （2026-08-08、ブラウザ描画で確認して修正）。 */
.cps-post-main table tr th,
.cps-post-main table tr td {
	border: none;
	border-bottom: 1px solid var(--jc-line);
	padding: 11px 14px;
	vertical-align: top;
	line-height: 1.75;
}

/* 見出し行。thead が108/117、無い表は先頭行の th で拾う */
.cps-post-main table thead tr th,
.cps-post-main table:not(:has(thead)) tr:first-child th {
	background: var(--jc-teal-bg-soft);
	border-bottom: 2px solid var(--jc-teal-line);
	color: var(--jc-ink);
	font-weight: 700;
	text-align: left;
	vertical-align: middle;
	/* 日本語は任意の位置で折れるので、見出し語（「レジスタ」等）が1文字ずつ
	   折り返して列が細く潰れる。見出しだけ CJK の途中改行を止める。
	   長い見出しは overflow-wrap で必要なときだけ折れる。 */
	word-break: keep-all;
}

/* 1列目＝行ラベル。どの行を見ているかの手がかり */
.cps-post-main table tbody tr th,
.cps-post-main table tbody tr td:first-child {
	color: var(--jc-ink-2);
	font-weight: 600;
}

/* 最終行の罫線は table 側の border-bottom と重なる */
.cps-post-main table tbody tr:last-child th,
.cps-post-main table tbody tr:last-child td {
	border-bottom: none;
}

/* 読んでいる行を保持する手がかり（タッチ端末では出さない） */
@media (hover: hover) {
	.cps-post-main table tbody tr:hover th,
	.cps-post-main table tbody tr:hover td {
		background: var(--jc-bg);
	}

	.cps-post-main table thead tr:hover th {
		background: var(--jc-teal-bg-soft);
	}
}

/* =========================================================
   レスポンシブ（スマホは横並びを縦に落とす）
   ========================================================= */

@media (max-width: 600px) {
	.cps-post-main .jin-cmp-flow { flex-direction: column; }
	.cps-post-main .jin-cmp-flow__arrow { justify-content: center; }
	.cps-post-main .jin-cmp-flow__arrow::before { transform: rotate(135deg); }
	.cps-post-main .jin-cmp-compare { grid-template-columns: 1fr; }
	.cps-post-main a.jin-cmp-cta__btn { width: 100%; }
	/* 数値スタッツは狭幅でも2列は保ち、潰れすぎない */
	.cps-post-main .jin-cmp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* 商品カードは画像を上に載せ、ボタンは全幅 */
	.cps-post-main .jin-cmp-product__img { width: 100%; }
	.cps-post-main a.jin-cmp-product__btn { width: 100%; }
	/* 冒頭カードは余白を締める */
	.cps-post-main .jin-cmp-hero { padding: 17px 16px 15px; }
	.cps-post-main .jin-cmp-hero__list > li { font-size: 0.97em; }
	/* 例文カードはラベルを上に積む（2列だと本文が細くなりすぎる） */
	.cps-post-main dl.jin-cmp-sample__body { grid-template-columns: 1fr; padding: 2px 14px 12px; }
	.cps-post-main .jin-cmp-sample__body > dt {
		padding: 12px 0 0;
		border-top: 1px solid var(--jc-teal-line);
	}
	.cps-post-main .jin-cmp-sample__body > dd {
		padding: 3px 0 0;
		border-top: 0;
	}
	.cps-post-main .jin-cmp-sample__body > dt:first-of-type + dd { padding-top: 3px; }
	.cps-post-main .jin-cmp-pick > li { padding: 12px 14px 12px 46px; }
	.cps-post-main .jin-cmp-pick > li::before { left: 11px; }
	.cps-post-main .jin-cmp-trouble dt {
		padding: 10px 13px 10px 38px;
		font-size: 0.95em;
	}
	.cps-post-main .jin-cmp-trouble dt::before { top: 11px; left: 11px; }
	.cps-post-main .jin-cmp-trouble dd {
		padding: 11px 13px;
		font-size: 0.95em;
	}
	/* ビットレイアウトは列数(8)を保ったまま縮める。縦積みにすると
	   「ビット幅の比率が目に見える」という存在理由そのものが消えるため */
	.cps-post-main .jin-cmp-bitfield { padding: 13px 12px; }
	.cps-post-main .jin-cmp-bitfield__byte {
		width: 54px;
		font-size: 0.7em;
	}
	.cps-post-main .jin-cmp-bitfield__cell {
		height: 23px;
		font-size: 0.6em;
	}
	.cps-post-main .jin-cmp-bitfield__legend { gap: 5px 12px; font-size: 0.8em; }
	/* フレーム帯は縦積みにすると「1本の帯」でなくなるので、
	   ラベルを上へ逃がして帯そのものは横のまま残す */
	.cps-post-main .jin-cmp-frame { padding: 13px 12px; }
	.cps-post-main .jin-cmp-frame__row {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}
	.cps-post-main .jin-cmp-frame__label {
		width: auto;
		align-self: flex-start;
		text-align: left;
		font-size: 0.78em;
	}
	.cps-post-main .jin-cmp-frame__field { padding: 6px 2px; min-width: 34px; }
	.cps-post-main .jin-cmp-frame__name { font-size: 0.66em; }
	.cps-post-main .jin-cmp-frame__bits { font-size: 0.6em; }
	.cps-post-main .jin-cmp-frame__legend { gap: 5px 12px; font-size: 0.8em; }
	/* 階層スタックは狭幅で3列が潰れるので、1行の中で縦に積む */
	.cps-post-main .jin-cmp-stack { padding: 13px 12px; }
	.cps-post-main .jin-cmp-stack__row { padding: 10px 12px; gap: 1px 10px; }
	.cps-post-main .jin-cmp-stack__layer,
	.cps-post-main .jin-cmp-stack__spec,
	.cps-post-main .jin-cmp-stack__desc {
		flex: 1 1 100%;
		width: auto;
	}

	/* -----------------------------------------------------------
	   表の横潰れ対策（2026-07-26 追加・全記事に効く）
	   狭幅だと1列目が1文字ずつ折り返して読めなくなっていた。
	   セルに下限幅を与え、収まらない表は表自体を横スクロールさせる。
	   display:block でも thead/tbody は行グループのままなので、
	   ブラウザが匿名テーブルを作り列の位置ズレは起きない。
	   ----------------------------------------------------------- */
	.cps-post-main table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;

		/* ★2026-08-08追加：横に続きがあることを見せる（W6＝完全性の錯覚の回避）
		   これまでは黙って切れていたので、読者は表が終わったと思って通り過ぎていた。
		   仕組み：白いカバー2枚を background-attachment:local で内容と一緒に動かし、
		   影2枚を scroll で固定する。端まで送るとカバーが影に重なって影が消える。
		   JSもラッパー要素も要らないので、既存117個の表へそのまま効く。 */
		background-image:
			linear-gradient(to right, var(--jc-surface) 30%, rgba(255, 255, 255, 0)),
			linear-gradient(to left, var(--jc-surface) 30%, rgba(255, 255, 255, 0)),
			linear-gradient(to right, rgba(23, 36, 46, 0.16), rgba(23, 36, 46, 0)),
			linear-gradient(to left, rgba(23, 36, 46, 0.16), rgba(23, 36, 46, 0));
		background-position: left center, right center, left center, right center;
		background-repeat: no-repeat;
		background-size: 30px 100%, 30px 100%, 13px 100%, 13px 100%;
		background-attachment: local, local, scroll, scroll;
	}

	.cps-post-main table th,
	.cps-post-main table td {
		min-width: 6.2em;
		padding: 10px 12px;
	}

	/* 1列目が見出し役のことが多いので、少しだけ広く取る */
	.cps-post-main table th:first-child,
	.cps-post-main table td:first-child {
		min-width: 7em;
	}

	/* display:block にすると表の中身が内容幅まで縮み、収まる表でも
	   見出し行の帯が途中で切れて「壊れている」ように見える（実測 267px / 画面327px）。
	   最終列に余りを吸わせて幅を揃える。横スクロールが要る表はそのまま溢れる
	   （4列表 scrollWidth 523 > clientWidth 327 を確認済み・2026-08-08）。 */
	.cps-post-main table tr th:last-child,
	.cps-post-main table tr td:last-child {
		width: 100%;
	}

	/* 1列目を position:sticky で張り付かせる案は**採らない**（2026-08-08検討）。
	   実測で1列目が <th> なのは117個中8個だけで、残り109個は <td>。
	   th だけ張り付かせると見出し行と本文行がずれて壊れる。全部へ当てるには
	   109個の表のマークアップ変更が要り、効くのは5列以上の15個だけ。
	   横スクロールの気づきは上のフェードで足りるので、ここでは足さない。 */
}

/* =========================================================
   29. コードブロックの「コピー」と「折りたたみ」（2026-08-14 追加）
   ---------------------------------------------------------
   運営者指示：「コードを載せている個所はコピーコマンドを仕込みたい」
               「全文を載せている個所は折りたたむ。ただし数行は見せる」

   🔒 ボタンのDOMは assets/article-code.js が作る。記事HTMLへ書くのは
      折りたたみたいブロックへ `jin-cmp-code--fold` を足すことだけ。
   🔒 折りたたみの高さ制限は `.is-folded` に付ける。この class はJSが付与するので、
      **JSが読めない環境ではコードが全文そのまま出る**（隠れて読めない事故を作らない）。
   ========================================================= */

/* ファイル名バーを「名前 | ボタン」の2列にする（従来のバーは block のまま使える） */
.cps-post-main .jin-cmp-code__name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.cps-post-main .jin-cmp-code__copy {
	flex: 0 0 auto;
	padding: 4px 12px;
	border: 1px solid var(--jc-ink-surface-2);
	border-radius: 5px;
	background: var(--jc-ink-surface);
	color: var(--jc-teal-line);
	font-family: inherit;
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cps-post-main .jin-cmp-code__copy:hover {
	border-color: var(--jc-teal);
	background: var(--jc-ink-surface);
	color: var(--jc-teal-line);
}

/* コピー成功。色の意味は本文と同じ（ティール＝うまくいった） */
.cps-post-main .jin-cmp-code__copy.is-done {
	border-color: var(--jc-teal);
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
}

/* ファイル名バーが無いブロック用。枠の右上へ浮かせる */
.cps-post-main .jin-cmp-code__copy--float {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
}

/* --- 折りたたみ --------------------------------------------------------- */

/* 🔒 高さを絞るのは is-folded のときだけ（JSが付ける）。
   PEEK_LINES=8 に合わせ、8行ぶん＋上下の余白がだいたい入る高さにする。 */
.cps-post-main .jin-cmp-code--fold.is-folded pre {
	max-height: 15.5em;
	overflow: hidden;
}

/* 下端をぼかして「まだ続く」を出す（W6＝完全性の錯覚の回避。表の横スクロールと同じ考え方）。
   🔒 pre::after ではなく**枠側**に置く。pre は is-folded のとき overflow:hidden なので、
      中に絶対配置すると切り取られて出ない。 */
.cps-post-main .jin-cmp-code--fold.is-folded::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 44px;
	left: 0;
	height: 64px;
	background: linear-gradient(180deg, rgba(16, 27, 38, 0), var(--jc-ink-deep) 86%);
	pointer-events: none;
}

.cps-post-main .jin-cmp-code__fold {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-top: 1px solid var(--jc-ink-surface-2);
	background: var(--jc-ink-deepest);
	color: var(--jc-teal-on-dark);
	font-family: inherit;
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cps-post-main .jin-cmp-code__fold:hover {
	background: var(--jc-ink-surface-2);
	color: var(--jc-teal-line);
}

/* 開いている間は「折りたたむ」が下端に来る。位置の手がかりに矢印を付ける */
.cps-post-main .jin-cmp-code__fold::before {
	content: "\25BC\00a0";
	font-size: 0.85em;
}

.cps-post-main .jin-cmp-code--fold:not(.is-folded) .jin-cmp-code__fold::before {
	content: "\25B2\00a0";
}

@media (max-width: 600px) {
	.cps-post-main .jin-cmp-code__copy {
		padding: 3px 9px;
		font-size: 0.86em;
	}
	.cps-post-main .jin-cmp-code--fold.is-folded pre {
		max-height: 13em;
	}
}

/* =========================================================
   N. トレース（コードの差分 × 実測波形）
   .jin-cmp-trace
   ---------------------------------------------------------
   🔴 2026-08-23 新規。記事 pid-control-embedded の実験枠。
   なぜ起こしたか：PID記事のSEO上位6本を分解したところ、
   「応答波形だけを持つ企業記事」と「コードだけを持つ個人記事」に
   きれいに割れていて、**両方を持つ記事が1本も無かった**。
   読者は「このコードがこの波形になる」という対応を自分で埋めている。
   その対応を記事が引き受けるための器。
   在庫の .jin-cmp-compare は左右が対等な比較で、
   「変えた所（コード）」と「その結果（波形）」という因果の向きを持てない。
   ========================================================= */

.cps-post-main .jin-cmp-trace {
	border: 1px solid var(--jc-line);
	border-radius: 10px;
	background: var(--jc-bg);
	overflow: hidden;
}

.cps-post-main .jin-cmp-trace__label {
	display: block;
	padding: 9px 16px;
	border-bottom: 1px solid var(--jc-line);
	background: var(--jc-accent-weak, rgba(127, 214, 201, .12));
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.6;
}

.cps-post-main .jin-cmp-trace__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 0;
	align-items: stretch;
}

.cps-post-main .jin-cmp-trace__code {
	min-width: 0;
	padding: 14px 16px;
	border-right: 1px solid var(--jc-line);
}

.cps-post-main .jin-cmp-trace__code pre {
	margin: 0;
	overflow-x: auto;
	font-size: 0.86em;
	line-height: 1.75;
}

/* 変えた行だけを目立たせる。強調は「ここを見て」の合図（R2） */
.cps-post-main .jin-cmp-trace__code .is-diff {
	display: inline-block;
	width: 100%;
	background: rgba(240, 184, 102, .18);
	border-left: 3px solid #f0b866;
	padding-left: 6px;
	margin-left: -9px;
}

.cps-post-main .jin-cmp-trace__wave {
	min-width: 0;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cps-post-main .jin-cmp-trace__wave img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 6px;
}

/* 図と、その図の読み方を同じ器に入れる（R1・空間的近接 g=0.74） */
.cps-post-main .jin-cmp-trace__read {
	margin: 0;
	padding: 11px 16px;
	border-top: 1px solid var(--jc-line);
	background: rgba(0, 0, 0, .03);
	font-size: 0.9em;
	line-height: 1.85;
}

.cps-post-main .jin-cmp-trace__read strong {
	font-weight: 700;
}

@media (max-width: 600px) {
	.cps-post-main .jin-cmp-trace__body {
		grid-template-columns: 1fr;
	}
	.cps-post-main .jin-cmp-trace__code {
		border-right: 0;
		border-bottom: 1px solid var(--jc-line);
	}
	.cps-post-main .jin-cmp-trace__code pre {
		font-size: 0.82em;
	}
}

/* =========================================================
   §30 API（関数カード）  .jin-cmp-api
   ---------------------------------------------------------
   なぜ起こしたか：関数リファレンスは「名前・何をするか・実測値・使いどころ」の
   4つを並べたいが、<table> にすると3列以上になり狭幅で横スクロールする
   （§2の表の横潰れ対策と同じ問題）。dt＝関数のシグネチャ、dd＝説明を積む形にして
   390px でも横スクロールを出さない。
   🔒 <div> 直下に <p> を置かない（WPのビジュアルエディタが剥がす）。
   ========================================================= */

.cps-post-main .jin-cmp-api {
	margin: 1.6em 0;
}

.cps-post-main .jin-cmp-api dl {
	margin: 0;
	padding: 0;
}

.cps-post-main .jin-cmp-api dt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	margin: 0;
	padding: 11px 16px;
	border: 1px solid var(--jc-teal-line, var(--jc-line));
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: var(--jc-teal-bg-soft, var(--jc-surface));
	font-family: var(--jc-mono);
	font-size: 0.98em;
	font-weight: 700;
	color: var(--jc-ink-deep);
}

.cps-post-main .jin-cmp-api dt code {
	background: none;
	padding: 0;
	font-size: 1em;
	color: inherit;
}

/* 実測値は右へ逃がす。数字がこの記事の主役なので、名前と同じ行に置く */
.cps-post-main .jin-cmp-api__measured {
	margin-left: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--jc-teal);
	color: var(--jc-static-white);
	font-family: inherit;
	font-size: 0.8em;
	font-weight: 700;
	white-space: nowrap;
}

.cps-post-main .jin-cmp-api dd {
	margin: 0 0 14px;
	padding: 12px 16px 13px;
	border: 1px solid var(--jc-line);
	border-radius: 0 0 8px 8px;
	background: var(--jc-surface);
	line-height: 1.85;
}

/* 🔒 dd > span への一括指定はしない。詳細度(0,2,2)が __use/__diff の flex(0,2,0) を
   上書きして gap が効かなくなる（実際にプレビューで踏んだ） */
.cps-post-main .jin-cmp-api__what {
	display: block;
}

/* ラベルは flex で固定し、折り返させない（固定幅だと「使いどこ／ろ」で泣き別れた） */
.cps-post-main .jin-cmp-api__use,
.cps-post-main .jin-cmp-api__diff {
	display: flex;
	gap: 10px;
	margin-top: 7px;
	font-size: 0.94em;
	color: var(--jc-muted);
}

.cps-post-main .jin-cmp-api__use::before,
.cps-post-main .jin-cmp-api__diff::before {
	flex: 0 0 auto;
	white-space: nowrap;
	font-weight: 700;
}

.cps-post-main .jin-cmp-api__use::before {
	content: "使いどころ";
	color: var(--jc-teal);
}

/* R3とR4で挙動が変わるものだけに付ける。付いていない＝同じ、と読ませる */
.cps-post-main .jin-cmp-api__diff::before {
	content: "R3 / R4";
	color: var(--jc-amber-dark);
}

@media (max-width: 600px) {
	.cps-post-main .jin-cmp-api dt {
		font-size: 0.92em;
	}
	.cps-post-main .jin-cmp-api__measured {
		margin-left: 0;
	}
	.cps-post-main .jin-cmp-api__use,
	.cps-post-main .jin-cmp-api__diff {
		flex-direction: column;
		gap: 2px;
	}
}

/* =========================================================
   §31 実測の突き合わせ  .jin-cmp-measure  （2026-08-25 追加）
   ---------------------------------------------------------
   用途：一次資料が「計算で」示した値と、自分が実機で「測った」値を
         同じ土俵に並べ、その差に意味を1行で添える。
   起こした理由：
     ・.jin-cmp-stats は単独の数値を並べる型で、2値の対応が出ない（用途もタイプA/H）
     ・.jin-cmp-compare は --good/--bad で ✓/× が付く「良し悪しの2択」専用。
       計算値と実測値には優劣が無いので、×が付いた時点で本文と矛盾する
       （2026-07-31に what-is-arduino と arduino-ide-install の2記事で同じ誤用が再現済み）
   色：技術レーンに合わせ ティール系＋インクで統一する。
       ティール＝この記事が実際に測って出した値。琥珀は --warn（差が問題であるとき）だけ。
   ========================================================= */

.cps-post-main .jin-cmp-measure {
	margin: 1.8em 0;
	padding: 16px 18px;
	border: 1px solid var(--jc-line);
	border-radius: 10px;
	background: var(--jc-bg);
}

.cps-post-main .jin-cmp-measure__title {
	margin: 0 0 12px;
	font-size: 0.95em;
	font-weight: 800;
	line-height: 1.6;
	color: var(--jc-ink);
}

/* 3枚を等幅で並べる。grid にしているのは、値の桁数が違っても
   ラベルの位置がそろうため（flex だと中身の幅で揺れる） */
.cps-post-main .jin-cmp-measure__row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	align-items: stretch;
}

.cps-post-main .jin-cmp-measure__cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	border: 1px solid var(--jc-line);
	border-radius: 8px;
	background: var(--jc-surface);
	text-align: center;
}

.cps-post-main .jin-cmp-measure__label {
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--jc-muted);
}

.cps-post-main .jin-cmp-measure__value {
	font-family: var(--jc-mono);
	font-size: 1.55em;
	font-weight: 700;
	line-height: 1.25;
	color: var(--jc-ink);
	word-break: keep-all;
}

.cps-post-main .jin-cmp-measure__unit {
	margin-left: 2px;
	font-size: 0.55em;
	font-weight: 700;
	color: var(--jc-muted);
}

/* 出典・条件。ここが無いと「どの条件で測ったか」が本文へ流れてしまう */
.cps-post-main .jin-cmp-measure__src {
	font-size: 0.78em;
	line-height: 1.6;
	color: var(--jc-muted);
}

/* 計算値＝一次資料の側。ニュートラルのまま置く */
.cps-post-main .jin-cmp-measure__cell--calc {
	border-style: dashed;
}

/* 実測値＝この記事が出した値。ここだけティールで立てる */
.cps-post-main .jin-cmp-measure__cell--real {
	border-color: var(--jc-teal-line);
	background: var(--jc-teal-bg);
}
.cps-post-main .jin-cmp-measure__cell--real .jin-cmp-measure__label { color: var(--jc-teal-dark); }
.cps-post-main .jin-cmp-measure__cell--real .jin-cmp-measure__value { color: var(--jc-teal-deep); }

/* 差＝2値の関係そのもの。
   🔴 最初 background に var(--jc-ink-surface) を当てて、headless Chrome の実描画で潰した。
   --jc-ink-surface は #1c1c1c ＝ **白文字を載せる面専用**のトークンで、
   そこへ --jc-ink（#141414）の数字を置いていた＝黒地に黒文字。
   面のトークンと文字のトークンを混ぜないこと（style.css の注記どおり）。
   区別は「破線＝計算／ティール面＝実測／無地＝差」の3態で付ける。 */
.cps-post-main .jin-cmp-measure__cell--diff {
	border-color: var(--jc-line-2);
	box-shadow: inset 0 3px 0 var(--jc-teal-line);
}
.cps-post-main .jin-cmp-measure__cell--diff .jin-cmp-measure__label { color: var(--jc-ink-2); }

/* 差が「問題として効く」ときだけ琥珀へ寄せる（既定では使わない） */
.cps-post-main .jin-cmp-measure__cell--warn {
	border-color: var(--jc-amber-line);
	background: var(--jc-amber-bg);
}
.cps-post-main .jin-cmp-measure__cell--warn .jin-cmp-measure__label { color: var(--jc-amber-dark); }
.cps-post-main .jin-cmp-measure__cell--warn .jin-cmp-measure__value { color: var(--jc-amber-dark); }

/* 差の意味を1行だけ。ここを空にしたら、この部品を使う意味が無い */
.cps-post-main .jin-cmp-measure__note {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px dashed var(--jc-line);
	font-size: 0.9em;
	line-height: 1.85;
	color: var(--jc-ink-2);
}

/* 390px でも3枚を横に保つ。縦積みにすると「並べて差を見る」意味が消えるので、
   落とすのは字送りと余白であってレイアウトではない */
@media (max-width: 600px) {
	.cps-post-main .jin-cmp-measure {
		padding: 14px 12px;
	}
	.cps-post-main .jin-cmp-measure__row {
		gap: 6px;
	}
	.cps-post-main .jin-cmp-measure__cell {
		padding: 10px 6px;
	}
	.cps-post-main .jin-cmp-measure__value {
		font-size: 1.15em;
	}
	.cps-post-main .jin-cmp-measure__label {
		font-size: 0.72em;
	}
	.cps-post-main .jin-cmp-measure__src {
		font-size: 0.7em;
	}
}

/* =========================================================
   O. 横スクロールする表の器
   .jin-cmp-scroll
   ---------------------------------------------------------
   🔴 2026-09-06 新規。記事 pid-control-embedded で導入。
   なぜ起こしたか：実測値を「指標 × 条件 × 判定」で並べる場面は、
   .jin-cmp-measure（3セル固定）にも .jin-cmp-compare（左右2列）にも
   収まらず、素の <table> を使うしかなかった。
   ただし素のままだと、列の多い表がスマホで**ページごと横に伸びる**。
   表だけを内側でスクロールさせ、本文は縦スクロールのままにする器。
   ========================================================= */

.cps-post-main .jin-cmp-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.6em 0;
	border: 1px solid var(--jc-line);
	border-radius: 10px;
	background: var(--jc-bg);
}

.cps-post-main .jin-cmp-scroll > table {
	width: 100%;
	min-width: 34em;          /* これ以下には潰さず、器の側をスクロールさせる */
	margin: 0;
	border-collapse: collapse;
	font-size: 0.92em;
	line-height: 1.7;
}

.cps-post-main .jin-cmp-scroll th,
.cps-post-main .jin-cmp-scroll td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--jc-line);
	text-align: left;
	vertical-align: top;
}

.cps-post-main .jin-cmp-scroll thead th {
	background: var(--jc-accent-weak, rgba(127, 214, 201, .12));
	font-weight: 700;
	white-space: nowrap;
}

.cps-post-main .jin-cmp-scroll tbody tr:last-child th,
.cps-post-main .jin-cmp-scroll tbody tr:last-child td {
	border-bottom: 0;
}

/* 数字の列は詰めて、折り返さない */
.cps-post-main .jin-cmp-scroll td:not(:first-child) {
	white-space: nowrap;
}

@media (max-width: 600px) {
	.cps-post-main .jin-cmp-scroll > table {
		font-size: 0.86em;
	}
	.cps-post-main .jin-cmp-scroll th,
	.cps-post-main .jin-cmp-scroll td {
		padding: 8px 10px;
	}
}