/*
 * 記事ビジュアル・コンポーネント 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が未配備でも文章として読める構造で書く前提（画像頼み禁止と同じ）
 *
 * 色はトークン（CSS変数）で一元管理。変えるときはこの :root 相当のブロックだけ触る。
 * テーマ本体 style.css と同じパレット: ティール=技術/学習, 琥珀=転職/キャリア, インク=地。
 */

.cps-post-main {
	--jc-teal: #177f70;
	--jc-teal-dark: #10685b;
	--jc-teal-deep: #0d4a41;
	--jc-teal-bg: #e9f4f2;
	--jc-teal-bg-soft: #f2faf8;
	--jc-teal-line: #c4e0db;
	--jc-amber: #c98a2b;
	--jc-amber-dark: #a86f1c;
	--jc-amber-bg: #faf3e6;
	--jc-amber-line: #eddcbb;
	--jc-ink: #17242e;
	--jc-ink-2: #2a3a43;
	--jc-text: #40525a;
	--jc-muted: #55656d;
	--jc-line: #e0e6e5;
	--jc-bg: #f7f9f8;
	--jc-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, Menlo, monospace;
}

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

.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-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: #fff;
	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); }

/* 注意・落とし穴（琥珀） */
.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); }

/* 補足・メモ（ニュートラル） */
.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: #7c8a90; }

/* 体験談（このブログの核。等幅//ラベル＋ティールの左罫で「人の声」を立てる） */
.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), #fff);
}
.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: #fbfdfc;
	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: #fbfdfc;
}

.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: #fff;
	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);
	color: #fff;
	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);
	color: #fff;
	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: #fff;
	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: #fff;
	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); }
.cps-post-main .jin-cmp-compare__col--bad .jin-cmp-compare__head::before { content: "\00d7"; background: var(--jc-amber); }

.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);
	color: #fff;
	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: #fff;
	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: #fff;
}

.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: #fff !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); }
.cps-post-main .jin-cmp-cta--career a.jin-cmp-cta__btn:hover {
	background: var(--jc-amber-dark);
	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); }
.cps-post-main .jin-cmp-cta--tech a.jin-cmp-cta__btn:hover {
	background: var(--jc-teal-dark);
	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: #7c8a90;
	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 {
	overflow: hidden;
	border: 1px solid #0d1620;
	border-radius: 8px;
}

.cps-post-main .jin-cmp-code__name {
	display: block;
	padding: 8px 14px;
	border-bottom: 1px solid #24323d;
	background: #0d1620;
	color: #7fd6c9;
	font-family: var(--jc-mono);
	font-size: 0.82em;
	font-weight: 700;
}

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

/* =========================================================
   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: #fff;
}

.cps-post-main .jin-cmp-timeline__phase {
	display: inline-block;
	margin-bottom: 5px;
	padding: 2px 11px;
	border-radius: 12px;
	background: var(--jc-ink);
	color: #7fd6c9;
	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);
	color: #fff;
	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-deep); }

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

.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);
	color: #fff;
	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), #fff);
	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: #7c8a90;
	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), #fff);
}
.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);
	color: #eaf1f0;
}

.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: #9fb4b0;
	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: #eef1f2;
	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: #fff;
}
.cps-post-main .jin-cmp-grid__item > :last-child { margin-bottom: 0; }

.cps-post-main .jin-cmp-grid__mark {
	display: inline-flex;
	width: 30px;
	height: 30px;
	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;
}

.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: #fff;
}
.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);
	color: #fff;
	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);
	color: #fff !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-dark);
	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) 0%, #21323d 100%);
	color: #eaf3f1;
}

.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: #7fd6c9;
	font-family: var(--jc-mono);
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.7;
}

.cps-post-main ul.jin-cmp-hero__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cps-post-main .jin-cmp-hero__list > li {
	position: relative;
	margin: 0 0 10px;
	padding: 0 0 0 26px;
	color: #eaf3f1;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.75;
	list-style: none;
}

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

.cps-post-main .jin-cmp-hero__list > li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 4px;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: #7fd6c9;
}

.cps-post-main .jin-cmp-hero__list > li strong { color: #ffd894; }

.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: #b6c9c6;
	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: #ffd894;
	font-family: var(--jc-mono);
	font-size: 1.2em;
	font-weight: 800;
}

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

.cps-post-main .jin-cmp-author {
	display: flex;
	gap: 14px;
	align-items: flex-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 {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--jc-ink);
	color: #ffd894;
	font-size: 1.05em;
	font-weight: 800;
	line-height: 1;
}

.cps-post-main .jin-cmp-author__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 {
	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 {
	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: #fff;
	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);
	color: #fff;
	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: #fff;
	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);
	color: #fff;
	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);
}

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

/* =========================================================
   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;
}

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

@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; }

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

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

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