/*
Template: jin
Theme Name: jin-child-11
Author: CrossPiece
Version: 3.1.1
*/

/* =========================================================
   設計メモ
   - 読者レーンの色分け: 転職・キャリア = 琥珀 / 技術 = ティール
   - トップページは .jin-child-front 配下のみに適用（親テーマJINと衝突させない）
   - 記事可読性の改善は .cps-post-main（JINの本文コンテナ）に最小限で適用

   2026-08-15 全面改修（運営者指示「科学的に最適なブログ構成にしたい。調査からやり直し」）
   ---------------------------------------------------------
   実測で分かった根本原因：
     **子テーマは「記事の本文」だけを設計していて、「サイトの器」は一度も設計していない。**
     デザイントークンは assets/article-components.css の .cps-post-main の中にしか無く、
     このファイルは **CSS変数0・ハードコード色35種**だった。結果として
       ・本番トップでコントラスト不足 27件（カテゴリバッジ 2.94／日付 3.56）
       ・本番の技術記事でコントラスト不足 70件
         （目次リンク21本が親JINの #008db7 = 3.82 ／ 日付 #bbb = 1.92 ／ パンくず 12px = 1.49）
       ・文字サイズがトップだけで18種類（11.2 / 11.52 / 11.84 / 12.48 …）＝尺度が存在しない
       ・見出しの隣接比が 1.09〜1.15 で、階層が視覚的に成立していない
     が起きていた。

   → このファイルが **サイト全体のトークンと尺度の正本**になる（規則 V16）。
     規則の正本は .agents/届け方の科学.md §5（V16〜V22）、根拠は同 §2（M25〜M42）。
   ========================================================= */

/* =========================================================
   §0-1 デザイントークン（規則 V16 ／ 根拠 M25・M39）
   ---------------------------------------------------------
   🔒 このファイルに生の色を書かない。色を変えるときはこのブロックだけ触る。
   🔒 トークン名 --jc-* は変えない。公開記事50本超のHTMLが直接参照している。
   🔒 文字に使う色は「白地で 4.5:1 以上」（M25 ＝ WCAG SC 1.4.3）。
      括弧内の数値が白地でのコントラスト比。これを下回る色を新しく作らない。
   🔒 色に意味を持たせるときは必ずラベル文字を添える（M26 ＝ 色覚異常は男性の約8%）。
      レーンは「技術」「転職」の**文字**で示し、色は補助にする。
   ========================================================= */

/* 🔴 2026-08-15（2回目）：**実物16サイトを測って配色をやり直した。**
   運営者の指摘「くそダサい／色調がとんでもなく見づらい」。
   1回目はコントラスト比を通すことだけに寄せ、**近黒のヘッダー＋暗いティールを広く**使った結果、
   全体が重く沈んだ。Vercel / GitHub Blog / Cloudflare / Josh Comeau / Overreacted / Julia Evans /
   CSS-Tricks / web.dev / Zenn / Qiita / DevelopersIO / メルカリ / クックパッド / サイボウズ /
   ヒトデブログ / Tsuzuki Blog の16件を実測したところ：

     ・ヘッダーは**ページ地と同じ白か極薄**が 14/16。濃い帯は GitHub と CSS-Tricks の2件だけ
     ・見出しは**塗りも罫線も無し**が 14/15。大きさと太さだけで階層を作っている
     ・影の使用率は **0〜3%** が大半（Zenn 0% / メルカリ 0% / Cloudflare 0%）
     ・本文色は**ニュートラルな黒〜濃灰**（#171717 / #262626 / #404040 / #434347）。青みを入れていない
     ・鮮やかな色は**ごく狭い面積**にだけ（Zennの #3ea8ff は 3k、Qiitaの #357a00 は 10k）
     ・角丸は **4〜8px**

   → 色そのものより **「暗い面を広く使ったこと」と「見出しに色の罫線を足したこと」**が原因だった。
     地の色から青みを抜き、暗い面を減らし、レーン色は**面積を狭めて少し明るく**する。 */

:root {
	/* --- 技術レーン。🔒 **広い面に使わない。** アクセントは狭く ---
	   🔴 2026-08-15（4回目）：**ティール（色相175°）→ 青（色相203°）へ寄せた。**
	   運営者の指摘「テック系の色調に調整してほしい」。実測した13サイトのアクセント色は
	     Tsuzuki 204° ／ Qiita 206° ／ Zenn 207° ／ Vercel・GitHub・MDN 212° ／
	     web.dev 214° ／ サイボウズ・クックパッド 220° ／ Stripe 243°
	   で **10/13が青（199〜220°・中央値212°）**。ティール175°は青緑で、テックの色相帯から外れていた。
	   さらに **既存アイキャッチ40枚のうち37枚が既に青系（主に200°）**だったので、
	   青へ寄せるほうが**画像資産と揃う**（ティール系は3枚だけだった）。

	   ⚠️ トークン名 `--jc-teal-*` は**変えない**（公開記事50本超のHTMLが参照している）。
	      名前は歴史的なもので、いまの値は青。**名前で色を判断しない。** */
	--jc-teal:         #0b6ba8; /* 5.7:1 色相203°。文字・アイコン・面 */
	--jc-teal-dark:    #095486; /* 8.0:1 */
	--jc-teal-deep:    #073f66; /* 11.0:1 */
	--jc-teal-bright:  #2b9ae0; /* 濃地の上・細い装飾だけ */
	--jc-teal-on-dark: #7cc7f0; /* 濃地で 9.0:1 */
	--jc-teal-bg:      #eef6fc;
	--jc-teal-bg-soft: #f7fbfe;
	--jc-teal-line:    #cbe1f2;

	/* --- 転職レーン（琥珀） --- */
	/* ⚠️ 琥珀は明るいので、文字に使える濃さまで落とすと2段必要になる。
	   実測でここを間違えた：#a86f1c は「4.6:1」のつもりだったが**実測 4.24:1 で不合格**だった。
	   計算で確かめてから採ること。 */
	--jc-amber:        #d97706; /* 🔒 白地 3.4:1。**文字に使わない**。罫線・細い装飾だけ */
	--jc-amber-dark:   #b45309; /* 5.0:1。転職レーンの文字はこちら */
	--jc-amber-deep:   #92400e; /* 7.2:1。白抜き文字を載せる面・hover */
	--jc-amber-bg:     #fef8ee;
	--jc-amber-line:   #f5dcb8;

	/* --- 地の色。🔒 **青みを入れない。** 実物はニュートラルな黒〜濃灰 --- */
	/* 🔴 3回目：本文をもう1段濃くした（#404040 → #2b2b2b）。
	   運営者の指摘「ぱっと見が見づらい」。記事ページで測った実物の本文色は
	   **#000000 が4件・#333333 / #3e3e3e / #454545 / #50514c**で、
	   **#404040 は薄い側**だった。中央値寄りへ寄せる。 */
	--jc-ink:          #141414; /* 18.4:1 見出し */
	--jc-ink-2:        #2b2b2b; /* 14.3:1 */
	--jc-text:         #2b2b2b; /* 14.3:1 本文 */
	--jc-muted:        #575757; /*  7.2:1 日付・補足。🔒 これより薄い文字色を作らない */
	--jc-marker:       #a3a3a3; /*  2.9:1 文字でない装飾（箇条書きの点など） */
	/* 🔴 面（背景）専用のトークン。**文字色と混ぜない**。
	   最初の実装で --jc-ink を「見出しの文字色」と「濃い帯の背景」の両方に使ったところ、
	   ダークで文字側の都合により明るく反転し、**帯の背景まで明るくなって**
	   その上の白文字と同化した（実測 1.01:1 が52〜60件）。
	   面はダークでも**暗いまま**にする。 */
	--jc-ink-surface:   #1c1c1c; /* 白文字で 15.9:1 */
	--jc-ink-surface-2: #333333; /* 白文字で 12.6:1 */
	--jc-teal-surface:  #0b6ba8; /* 白文字で  5.7:1。チップ・ボタンの面 */
	--jc-amber-surface: #b45309; /* 白文字で  5.0:1。チップ・ボタンの面 */
	--jc-ink-deep:      #16181d; /* コード地 */
	--jc-ink-deep-2:    #1b1e24;
	--jc-ink-deepest:   #101216;
	--jc-on-dark:       #f2f2f2; /* 濃い面の上の文字。ライト・ダークとも明るいまま */
	--jc-static-white:  #ffffff; /* レーン色・濃い面の上の白文字。🔒 反転させない */

	--jc-surface:      #ffffff; /* 本文カラム・カード・ヘッダーの地 */
	/* 🔴 ページの地。**真っ白にしない**（2026-08-15の4回目）。
	   実測12サイトで **#ffffff 1色は Cloudflare とメルカリの2件だけ**。
	   日本のブログは全部「地を落として、本文カラムを白」にしている：
	     サイボウズ #f4f4f4 ／ DevelopersIO #f5f5f5 ／ Qiita #f5f6f6 ／
	     サルワカ #f0ebeb ／ ヒトデブログ #f7f2e8（クリーム）／ Tsuzuki #fcfcfc ／ Vercel #fafafa
	   → 中央値あたりの #f5f5f5 を採る（🔒 青みを入れない＝M43-④）。 */
	--jc-bg:           #f5f5f5;
	--jc-line:         #e5e5e5;
	--jc-line-2:       #ebebeb;
	--jc-line-soft:    #f2f2f2;

	/* --- リンク（根拠 M34） ---
	   NN/g は「青＋下線が最強の手がかり」とするが、青を足すと一目の情報量が増える（V4）。
	   ここでは **色はレーン色のまま据え置き、下線を常時表示する**ことで手がかりを作る。
	   🔒 その代わり **リンク以外に下線を使わない**（M34）。既読は同系をくすませる。 */
	--jc-link:         #0b6ba8; /*  5.7:1 */
	--jc-link-hover:   #073f66; /* 11.0:1 */
	--jc-link-visited: #6b5b8a; /*  6.0:1 同系をくすませて「読んだ」を示す */

	/* --- コード --- */
	--jc-code-bg:        #16181d;
	--jc-code-text:      #e4e4e7; /* 濃地で 14.1:1 */
	--jc-code-inline-bg: #f2f2f2;
	--jc-code-inline:    #0f3a5c;

	--jc-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, Menlo, monospace;

	/* --- 書体（根拠 M30） ---
	   🔒 外部フォントを読まない。日本語Webフォントはフルセットで数MBあり、
	      実測例では3ウェイト6.05MB → システムフォント化で転送99%減・Speed Index 48%短縮。
	      Zenn もメルカリEngineering も外部フォント0で運用している（2026-08-14 実測）。 */
	--jc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
	           "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;

	/* --- タイポグラフィの尺度（規則 V18 ／ 根拠 M32・M40） ---
	   🔒 比率 1.25（Major Third）の7段だけを使う。ここに無いサイズを新しく作らない。
	   🔴 2026-08-15（2回目）：本文を **18px → 17px** へ下げた。
	      1回目は M40（日本語の行長は20〜29字）に寄せて18pxにしたが、
	      **日本語ブログの実物は14〜17px**（Qiita 14 / DevelopersIO 14 / ヒトデ 15 /
	      クックパッド 16 / サイボウズ 17）で、18pxは最大級だった＝間延びして見える。
	      **サイボウズ Inside Out が 17px / 行間1.7 / 幅700px ＝ 41字**で最も近い。実物に合わせる。
	   ⚠️ M40の推奨（20〜29字）には**実運用の前例が無い**（Zenn 44字・サイボウズ 41字）。
	      「44字より内側」で止める、という判断にした。 */
	/* 🔴 3回目：caption 13→14 / small 15→16 へ戻した。
	   本文だけ実物に合わせて小さくしたら、**周辺の文字まで一緒に小さくなって**
	   全体が細く見えた（運営者の指摘「ぱっと見が見づらい」）。
	   本文17px は実物の中央値（サイボウズ17・Qiita17・Tsuzuki17）なので据え置く。 */
	--jc-fs-caption: 0.875rem;  /* 14px 図キャプション・注記 */
	--jc-fs-small:   1rem;      /* 16px 日付・パンくず・メタ */
	--jc-fs-body:    1.0625rem; /* 17px 本文（700px幅で41字＝サイボウズと同じ） */
	--jc-fs-h4:      1.25rem;   /* 20px */
	--jc-fs-h3:      1.5rem;    /* 24px */
	--jc-fs-h2:      1.8125rem; /* 29px ＝本文の1.71倍（V18は1.6倍以上） */
	--jc-fs-h1:      2.25rem;   /* 36px */
}

@media (max-width: 767px) {
	:root {
		--jc-fs-caption: 0.8125rem; /* 13px */
		--jc-fs-small:   0.9375rem; /* 15px */
		--jc-fs-body:    1.0625rem; /* 17px（390px幅で21字） */
		--jc-fs-h4:      1.1875rem; /* 19px */
		--jc-fs-h3:      1.375rem;  /* 22px */
		--jc-fs-h2:      1.75rem;   /* 28px（27pxだと h2÷本文 が 1.59 で V18 の 1.6 を割る） */
		--jc-fs-h1:      1.9375rem; /* 31px */
	}
}

/* =========================================================
   §0-2 ダークモードは**実装しない**（2026-08-15の3回目に撤回）
   ---------------------------------------------------------
   一度は `prefers-color-scheme: dark` で実装したが、**外した**。理由は3つ。

   ① **同じ種類のサイトが誰もやっていない**（実測18サイト・2026-08-15）。
      対応あり5件＝Vercel／Cloudflare／Josh Comeau／Overreacted／Zenn。
      **日本の個人ブログは4件中0件**（ヒトデ／Tsuzuki／サルワカ／ヨッセンス）、
      日本の技術ブログも5件中1件（Zennだけ、しかもブログでなくプラットフォーム）。
      GitHub Blog も web.dev も非対応だった。

   ② **可読性の研究はライトが有利**（M27）。視力課題・校正課題の両方で明地が勝ち、
      年齢に関係せず、文字が小さいほど差が開く。ダークの根拠は「開発者の好み」であって
      読みやすさではない。**好みと性能が食い違うなら、ブログは読みやすさを採る。**

   ③ **親テーマと既存記事が白地前提で、完全対応が事実上できない**。
      JINは `#fff` を各所にハードコードしており、公開済み記事50本超にも
      `style="background:#fff"` の直書きが残っている。一件ずつ潰したうえ、
      最後は `[style*="background:#f"]` という**当て推量のセレクタ**まで足していた。
      記事を1本足すたびに壊れる余地が残る＝**維持できない**。

   🔒 復活させるなら、上の3点（実物・可読性・維持可能性）が変わったことを先に示すこと。
   ========================================================= */


/* =========================================================
   §0-3 動きを止められるようにする（規則 V21 ／ 根拠 M29）
   ---------------------------------------------------------
   スクロール連動の動きは前庭障害でめまい・吐き気・頭痛を起こす（WCAG SC 2.3.3）。
   OSの「視差効果を減らす／動きを減らす」を受け取り、親テーマのアニメーションごと止める。
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* hover で「浮く」演出も止める */
	.jin-child-front a:hover,
	.jin-child-lane__cta:hover {
		transform: none !important;
	}
}

/* =========================================================
   §0-4 書体と本文のタイポグラフィ（規則 V18・V20 ／ 根拠 M30・M32・M40）
   ========================================================= */

body,
input,
textarea,
select,
button,
.cps-post-main {
	font-family: var(--jc-sans);
}

/* 本文。16px → 18px（行長 44字 → 39字） */
.cps-post-main {
	font-size: var(--jc-fs-body);
}

.cps-post-main p,
.cps-post-main li,
.cps-post-main dd,
.cps-post-main td,
.cps-post-main th {
	font-size: 1em; /* 🔒 段の外のサイズを作らない。親の --jc-fs-body に従う */
	color: var(--jc-text);
}

/* 🔴 2026-08-15：**本文の太さが 300（細い）**だった（JINの既定）。
   実測した実物は **5件すべて 400**（ヒトデ／Tsuzuki／サイボウズ／クックパッド／Qiita）。
   300は文字が痩せて薄く見え、運営者の「見づらい」という指摘の一因になっていた。 */
html body .cps-post-main,
html body .cps-post-main p,
html body .cps-post-main li,
html body .cps-post-main dd,
html body .cps-post-main td {
	font-weight: 400;
}

/* =========================================================
   §0-5 見出しを「階段」にする（規則 V18 ／ 根拠 M32）
   ---------------------------------------------------------
   レイヤーケーキ型スキャン＝読者は**見出しだけを拾って本文を飛ばす**。
   F型は「手がかりが無いときに起きる非効率な読み方」（NN/g・2017年の再訪）。
   成立の条件は①見出しが視覚的にはっきり違う ②その節の内容だけを言い当てる ③先頭に主要語。
   ①だけがCSSの仕事。②③は記事側（S9・G1）。

   実測（改修前・本番）：h1 28.8 / h2 26.4 / h3 24 / h4 20.8px ＝隣接比 1.09〜1.15。
   本文16pxに対しh2は1.65倍しかなく、拾える見出しになっていなかった。
   ========================================================= */

.cps-post-main h2,
.cps-post-main h3,
.cps-post-main h4,
.cps-post-main h5 {
	color: var(--jc-ink);
	font-family: var(--jc-sans);
	letter-spacing: 0.01em;
}

/* 🔴 2026-08-15（3回目）：**h2の塗りを戻した。**
   2回目に「装飾を全部やめる」と判断したのは **調査の誤り**だった。
   h2の装飾を**トップページで測っていた**（トップのh2はセクション見出しであって記事の見出しではない）。
   **記事ページで測り直した結果（9サイト）：**
     ヒトデブログ  塗り #efbf75 ＋白文字＋角丸4px
     Tsuzuki Blog 塗り #213555 ＋左罫線8px
     ヨッセンス    塗り #fdffb2 ＋角丸30px
     サイボウズ    左罫線6px ／ DevelopersIO・Zenn・Qiita 1px下線 ／ クックパッド 装飾なし
   → **9件中8件が何らかのマークを持つ。** 日本の個人ブログ3件は**全部「塗り」**。

   さらに、装飾を外したのは **自分で書いた M32 に違反**していた。
   レイヤーケーキ型スキャンの成立条件は「**見出しが視覚的にはっきり違う**」ことで、
   大きさと太さだけでは手がかりが弱い（運営者の指摘「ぱっと見が見づらい」と一致）。

   🔒 h2＝**レーン色の帯に白文字**。h3＝**左の太い罫線**。h4＝**細い下線**。
      面積が小さいので「暗い面を広く使わない」（M43）とは両立する。 */
.cps-post-main h2 {
	margin: 2.6em 0 1.1em;
	padding: 0.62em 0.8em;
	border: 0;
	border-radius: 4px;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	font-size: var(--jc-fs-h2);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.45;
}

.jin-child-lane-career .cps-post-main h2 {
	background: var(--jc-amber-surface);
}

.cps-post-main h3 {
	margin: 2.2em 0 0.8em;
	padding: 0.1em 0 0.1em 0.62em;
	border: 0;
	border-left: 5px solid var(--jc-teal);
	background: none;
	font-size: var(--jc-fs-h3);
	font-weight: 700;
	line-height: 1.5;
}

.jin-child-lane-career .cps-post-main h3 {
	border-left-color: var(--jc-amber);
}

.cps-post-main h4 {
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--jc-line);
}

.cps-post-main h4 {
	margin: 1.9em 0 0.8em;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--jc-fs-h4);
	font-weight: 700;
	line-height: 1.55;
}

/* 記事タイトル（親テーマの h1）。
   🔴 2026-08-15：**まだ効いていなかった**（実測 29px・font-weight 300）。
      JIN本体（theme/jin/style.css:8845）が
      `.cps-post .cps-post-header .cps-post-title`（**クラス3つ**）で
      `font-weight: 300` と `font-size: 1.8rem` を当てており、
      こちらの `h1.cps-post-title`（クラス1つ＋型1つ）では負けていた。
      結果、**塗りのあるh2（29px/700）のほうがタイトルより目立つ**という階層の逆転が起きていた。
   実物はタイトルが必ず h2 以上（サイボウズ 1.38倍／クックパッド 1.23／Qiita 1.08／
   ヒトデ 1.04／Tsuzuki 1.00）で、太さも 500〜700。細い300は1件も無い。 */
.cps-post-main h1,
h1.cps-post-title,
#article-title,
.entry-title,
h1.entry-title,
html body .cps-post .cps-post-header .cps-post-title {
	color: var(--jc-ink);
	font-size: var(--jc-fs-h1);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

/* =========================================================
   §0-6 リンクの見せ方（根拠 M34）
   ---------------------------------------------------------
   NN/g：クリック可能性の手がかりは**色と下線**。既読と未読で色を分ける。
   🔒 **リンク以外に下線を使わない**。下線をリンクの専用記号にする。
   ⚠️ 一覧・ナビ・サイドバーは「行そのものがリンク」なので下線を出さない（後段で個別に外す）。
   ========================================================= */

.cps-post-main a {
	color: var(--jc-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.cps-post-main a:hover,
.cps-post-main a:focus-visible {
	color: var(--jc-link-hover);
	text-decoration-thickness: 2px;
}

.cps-post-main a:visited {
	color: var(--jc-link-visited);
}

/* 図・ボタン・コンポーネント内のリンクは、下線が図を汚すので外す（見た目で押せると分かる） */
.cps-post-main a:has(> img),
.cps-post-main .jin-cmp-btn,
.cps-post-main figure a,
.cps-post-main .jin-child-audience__alt {
	text-decoration: none;
}

/* 🔒 リンクでないものに下線を使わせない（M34）。JINは強調に u / text-decoration を使う */
.cps-post-main :not(a) > u {
	text-decoration: none;
	border-bottom: 2px solid var(--jc-amber-line);
}

/* キーボード操作の現在地（WCAG SC 2.4.7） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--jc-teal);
	outline-offset: 2px;
}

/* =========================================================
   §0-7 親テーマ JIN の低コントラスト色を上書きする（規則 V17 ／ 根拠 M25）
   ---------------------------------------------------------
   本番の技術記事で 70件のコントラスト不足が出ていた。実測した内訳：
     ・目次リンク 21本 … JINの #008db7 ＝ 3.82:1（基準4.5）
     ・投稿日      …… #bbb ＝ 1.92:1
     ・パンくず    …… 12px ＝ 1.49:1
   いずれも**親テーマの既定値**で、子テーマは一度も上書きしていなかった。
   ========================================================= */

/* ⚠️ ここは **!important を使う**。JINはカスタマイザーの設定色を
      <head> のインライン <style> で出しており、外部CSSでは特異度を上げても勝てない
      （実測：カテゴリラベルの背景が #ffcd44 のまま白文字で 1.49:1）。
   🔒 !important を使ってよいのはこの節（親テーマの色の上書き）だけにする。 */

/* --- 目次（JINの .toc）。実測 #008db7 ＝ 3.62:1 で21本すべて不合格だった --- */
.cps-post-main .toc a,
.cps-post-main #toc_container a,
.toc a,
#toc_container a,
.toc_list a {
	color: var(--jc-link) !important;
	text-decoration: none;
}

.cps-post-main .toc a:hover,
.toc a:hover,
#toc_container a:hover {
	color: var(--jc-link-hover) !important;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.cps-post-main .toc,
.toc,
#toc_container {
	background: var(--jc-bg);
	border: 1px solid var(--jc-line);
	color: var(--jc-text);
}

/* --- 投稿日・更新日（#bbb ＝ 1.92:1 だった）。V22：いつの記事かは信頼に直結する --- */
.post-date,
.date,
.date-published,
.date-modified,
.cps-post-date,
.post-list-date,
.post-list-meta,
.post-list-meta time,
time {
	color: var(--jc-muted) !important;
	font-size: var(--jc-fs-caption);
}

/* --- パンくず（12px・1.49:1 だった）。M2：現在地の手がかり --- */
.breadcrumb,
#breadcrumb,
.footer_type1 {
	color: var(--jc-muted);
	font-size: var(--jc-fs-caption);
}

.breadcrumb a,
#breadcrumb a {
	color: var(--jc-link) !important;
}

/* --- カテゴリラベル。JINの設定色（#ffcd44）に白文字で 1.49:1 だった ---
   🔴 2026-08-15：**ここに黒塗りの指定が残っていた**（消し忘れ）。
      後段の §0-8 で「淡い地＋濃い文字」へ変えたのに、外側の `<span>` だけ
      黒塗りのままで、フォーカス枠のコントラストが **2.99:1** と基準（3:1）割れになっていた。
      指定は §0-8 に一本化し、ここでは**文字サイズと行の高さだけ**を持たせる。 */
.cps-post-cat,
.cps-post-cat a,
a.cps-post-cat,
.post-list-cat,
.post-list-cat a,
span.post-list-cat {
	background: transparent !important;
	font-size: var(--jc-fs-caption) !important;
	font-weight: 700;
	line-height: 1.5;
}

/* --- アーカイブの見出し（「― CATEGORY ―」が 1.61:1 だった） --- */
.archive-title,
.archive-title span,
.cat-title,
.cps-archive-title,
.archive-box .archive-title {
	color: var(--jc-ink) !important;
}

/* --- フッターのポリシー系（11.2px。M25の下限も V18 の尺度も割っていた） --- */
#footer-box a,
#footer-box,
.footer-inner,
.footer-inner a,
#privacy a,
#law a,
.copyright {
	color: var(--jc-muted) !important;
	font-size: var(--jc-fs-caption) !important;
}

#footer-box a:hover,
.footer-inner a:hover {
	color: var(--jc-link-hover) !important;
}

/* --- 記事一覧（JINの post-list）。8pxの文字と薄いメタが出ていた --- */
.post-list-title,
.post-list-inner,
.post-list-link {
	color: var(--jc-text);
}

.post-list-title {
	font-size: var(--jc-fs-h4);
	font-weight: 700;
	line-height: 1.55;
}

/* --- サイト全体の既定文字色。JINの淡いグレーを残さない --- */
body,
#contents {
	color: var(--jc-text);
}

/* --- ページの地と本文カラムを分ける（2026-08-15の4回目）---
   実測12サイトで**真っ白1色は2件だけ**。日本のブログは全部
   「地を極薄に落として、本文カラム／カードを白」にしている（サイボウズ・DevelopersIO・
   Qiita・サルワカ・ヒトデ・Tsuzuki）。地と本文が同色だと境目が消えて**のっぺりする**。 */
html body {
	background-color: var(--jc-bg) !important;
}

/* 本文カラムは白。ヘッダー（白）とは地の色で分かれる */
html body .cps-post-box,
html body .post-entry,
html body .cps-post,
html body #main-contents,
html body .jin-child-front-main,
html body .archive-post-header {
	background-color: var(--jc-surface) !important;
}

/* トップは自前レイアウトなので、白い面に余白と枠を与える */
.jin-child-front #main-contents {
	padding: 8px 28px 36px;
	border: 1px solid var(--jc-line);
	border-radius: 8px;
}

@media (max-width: 760px) {
	.jin-child-front #main-contents {
		padding: 4px 16px 26px;
	}
}

/* =========================================================
   §0-8 JINのカスタマイザー色を最後に上書きする（規則 V16・V17 ／ 根拠 M25・V4）
   ---------------------------------------------------------
   🔴 実測でここを取り違えた。JINは**カスタマイザーの設定色を `<head>` のインライン
      `<style>` へ、しかも `!important` 付きで**出している（32,025文字）。
      子テーマの外部CSSは後から読まれないので、同じ特異度では必ず負ける。

   実際に効いていた設定色（LocalWP・本番とも同じ）：
      #3b4675（スレートブルー）… body / a / a:link / a:visited / footer / #header-box /
                                  #breadcrumb / .post-list-title / #toc_container の文字
      #ffcd44（黄）             … .cps-post-cat a / .post-list-cat / 本文の箇条書きの点 ほか
      #008db7（水色）           … a:hover / .cps-post-main a
   これで
      ・カテゴリラベル＝白文字 on #ffcd44 ＝ **1.49:1**
      ・フッターのリンク＝グレー on #3b4675 ＝ **1.50:1**
      ・目次リンク＝#008db7 on 白 ＝ **3.82:1**
   になっていた。

   🔒 勝ち方：**`html body` を頭に付けて型セレクタを2つ足す**（特異度で上回る）＋ `!important`。
      `!important` を使ってよいのはこの節だけにする。
   🔒 レーン以外の色（スレートブルー・黄・水色）を残さない。3色目・4色目が増えると
      一目の情報量が上がる（V4＝視覚的複雑さは50ms以内に効く）。
      ⚠️ カスタマイザーの設定値そのものは変えていない。テーマを戻せば元の色に戻る。
   ========================================================= */

/* --- 文字とリンクの基本色 --- */
html body,
html body a,
html body a:link {
	color: var(--jc-text);
}

/* 🔴 バグ修正（2026-08-15）：ここに `html body a:visited` を混ぜていたため、
      **一覧のタイトルが「訪問済みかどうか」でティールと黒に割れて**見えていた。
      既読の区別は**本文中のリンクだけ**でよい（一覧は行そのものがリンクなので、
      色が2種類に割れると「なぜこの2本だけ色が違うのか」というノイズになる）。 */
html body .cps-post-main a {
	color: var(--jc-link);
}

html body .cps-post-main a:visited {
	color: var(--jc-link-visited);
}

/* 一覧・ナビ・サイドバーは既読で色を変えない */
html body .jin-child-post-row__title a:visited,
html body .jin-child-side-list a:visited,
html body .jin-child-lane__links a:visited,
html body .post-list-link:visited,
html body #drawernav3 a:visited {
	color: inherit;
}

html body a:hover,
html body .cps-post-main a:hover {
	color: var(--jc-link-hover);
}

html body .cps-post-main a:visited {
	color: var(--jc-link-visited);
}

/* --- ヘッダー：**白（ページ地と同じ）＋下に薄い罫線1本** ---
   🔴 2026-08-15（2回目）に濃紺→近黒→**白**へ直した。
      実測16サイトのうち **14件がページ地と同じ白か極薄**（Vercel #fafafa / Cloudflare #fff /
      Zenn #fff / Qiita 透明 / DevelopersIO #f5f5f5 / メルカリ #fff / サイボウズ 透明 / ヒトデ 透明）。
      濃い帯は **GitHub Blog と CSS-Tricks の2件だけ**。
      近黒の帯はページの一番上に「重い塊」を置くことになり、実物では少数派だった。 */
html body #header-box,
html body .header-box,
html body #header {
	background-color: var(--jc-surface) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--jc-line) !important;
	box-shadow: none !important;
}

/* ⚠️ PCのグローバルナビは `#header-box` の外にある別要素（`#drawernav3 > nav.fixed-content`）。
      JINは濃いヘッダー前提で文字を **#f4f4f4** にしているので、
      ヘッダーを白にしただけだと**白地に白文字で消える**（実測で踏んだ）。 */
html body #header-box,
html body #drawernav3,
html body #drawernav3 nav.fixed-content,
html body nav.fixed-content {
	background-color: var(--jc-surface) !important;
	background-image: none !important;
}

html body #header-box a,
html body #site-info a,
html body #headmenu a,
html body .header-box a,
html body #drawernav3 ul.menu-box > li > a,
html body nav.fixed-content ul.menu-box > li > a,
html body #drawernav3 .sub-menu > li > a {
	color: var(--jc-ink) !important;
}

html body #headmenu a:hover,
html body .header-box a:hover,
html body #drawernav3 ul.menu-box > li > a:hover,
html body nav.fixed-content ul.menu-box > li > a:hover {
	color: var(--jc-teal) !important;
}

/* 🔴 2026-08-15：JINがナビの各項目へ `::before { content:"・"; color:#ffcd44 }` を
   出しており、**黄色い点がラベルに重なって**いた（実測：幅30.8px・色 rgb(255,205,68)）。
   §0-8 でカスタマイザー色を潰したときの取りこぼし。
   意味を持たない飾りなので消す（M35：意味のない記号を足さない）。 */
html body #drawernav3 ul.menu-box > li > a::before,
html body nav.fixed-content ul.menu-box > li > a::before,
html body .sp-menu-box ul.menu-box > li > a::before {
	display: none !important;
	content: none !important;
}

/* いま見ているカテゴリを、下線1本で示す（色帯にしない） */
html body #headmenu .current-menu-item > a,
html body #headmenu .current-category-ancestor > a,
html body #drawernav3 .current-menu-item > a,
html body #drawernav3 .current-category-ancestor > a {
	box-shadow: inset 0 -2px 0 var(--jc-teal);
}

/* --- フッターだけは濃い面のままにする（ページの終わりの合図） --- */
html body footer,
html body #footer-box,
html body #page-top a {
	background-color: var(--jc-ink-surface) !important;
}

html body footer,
html body footer a,
html body #footer-box a,
html body .footer-inner,
html body .footer-inner a,
html body #privacy a,
html body #law a,
html body .copyright,
html body footer .widgettitle {
	color: var(--jc-on-dark) !important;
}

html body footer a:hover,
html body #footer-box a:hover {
	color: var(--jc-teal-on-dark) !important;
}

/* --- カテゴリラベル（#ffcd44 に白文字で 1.49:1 だった） --- */
/* 🔴 2026-08-15（2回目）：**黒の塗りをやめ、薄い地＋濃い文字にした。**
   1回目は近黒の塗りにしたが、記事タイトルのすぐ上に黒い塊が来て重かった。
   実物（サイボウズ・Qiita）は**小さな薄いチップ**。塗りつぶしはしていない。 */
html body .cps-post-cat a,
html body .meta-cat,
html body .popular-cat,
html body .post-list .post-list-cat,
html body .post-list-mag .post-list-cat,
html body .post-list-mag3col .post-list-cat,
html body .post-list-mag-sp1col .post-list-cat,
html body .swiper-slide .post-list-cat,
html body .pickup-cat {
	background-color: var(--jc-teal-bg) !important;
	border: 1px solid var(--jc-teal-line) !important;
	border-radius: 4px !important;
	color: var(--jc-teal) !important;
	font-weight: 600;
}

/* ⚠️ JIN本体（theme/jin/style.css:8826）が
      `.cps-post .cps-post-header .cps-post-cat a` （クラス3つ＋!important）で
      `color: #fff` を当てている。薄い地にすると**白文字のまま消える**ので、
      同じ深さのセレクタで文字色を戻す（実測で踏んだ）。 */
html body .cps-post .cps-post-header .cps-post-cat a,
html body .cps-post .cps-post-header .cps-post-cat span,
html body .post-list-item .post-list-inner .post-list-meta .post-list-cat,
html body .post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-cat,
html body .post-list-mag3col .post-list-item .post-list-inner .post-list-meta .post-list-cat,
html body .post-list-mag-sp1col .post-list-item .post-list-inner .post-list-meta .post-list-cat,
html body .post-list-cat,
html body .meta-cat,
html body .popular-cat,
html body .pickup-cat {
	color: var(--jc-teal) !important;
}

html body .cps-post-cat a:hover,
html body .cps-post .cps-post-header .cps-post-cat a:hover {
	background-color: var(--jc-teal) !important;
	border-color: var(--jc-teal) !important;
	color: var(--jc-static-white) !important;
}

/* --- パンくず・記事一覧の見出し・目次（すべて #3b4675 / #008db7 だった） --- */
html body #breadcrumb ul li,
html body #breadcrumb ul li a,
html body .post-list-title,
html body #prev-next p,
html body #toc_container .toc_list li a,
html body .toc a,
html body .toc ol li a {
	color: var(--jc-link) !important;
}

html body #breadcrumb ul li {
	color: var(--jc-muted) !important;
}

/* --- 本文の箇条書きの点（黄）。レーン色にそろえる --- */
html body .cps-post-main ul > li:before,
html body .cps-post-main ol > li:before {
	background-color: var(--jc-teal-surface) !important;
}

/* --- 各所のアクセント（黄）。ボタン地は白文字が載るので濃い面にする --- */
html body .sidebar-btn a,
html body .profile-sns-menu,
html body .cps-info-bar a,
html body .color-button01 a,
html body .color-button01:before {
	background-color: var(--jc-teal-surface) !important;
	color: var(--jc-static-white) !important;
}

html body .search-box:hover,
html body .profile-follow a:hover,
html body #headmenu .headsns a:hover {
	color: var(--jc-teal-dark) !important;
	border-color: var(--jc-teal) !important;
}


/* JINの見出しスタイル（`.h2-style01 h2` の塗り・`::before` の飾り）を外して、
   §0-5 の設計（h2＝レーン色の帯／h3＝左罫線／h4＝細い下線）に置き換える。
   ⚠️ JINの塗りをそのまま使わないのは、色がカスタマイザーの `#3b4675` で
      レーンの配色と食い違い、しかも暗い文字と重なって 1.75:1 になっていたため。 */
html body .cps-post-main h2 {
	background-color: var(--jc-teal-surface) !important;
	background-image: none !important;
	color: var(--jc-static-white) !important;
	border: 0 !important;
}

html body.jin-child-lane-career .cps-post-main h2 {
	background-color: var(--jc-amber-surface) !important;
}

html body .cps-post-main h3 {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--jc-ink) !important;
	border: 0 !important;
	border-left: 5px solid var(--jc-teal) !important;
}

html body.jin-child-lane-career .cps-post-main h3 {
	border-left-color: var(--jc-amber) !important;
}

html body .cps-post-main h4 {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--jc-ink) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--jc-line) !important;
}

/* JINは見出しの :before / :after で飾りを足す。塗りを外したので一緒に消す */
html body .cps-post-main h2::before,
html body .cps-post-main h2::after,
html body .cps-post-main h3::before,
html body .cps-post-main h3::after {
	display: none !important;
}

/* --- 図キャプション（JINの既定 #777 ＝ 4.48:1 で基準割れ） --- */
html body figcaption,
html body .cps-post-main figcaption,
html body .wp-caption-text {
	color: var(--jc-muted) !important;
	font-size: var(--jc-fs-caption);
	line-height: 1.7;
}

/* --- 一覧のメタ（JINの #888 ＝ 3.54:1） ---
   ⚠️ JIN側が `.post-list-mag .post-list-meta .post-list-date` のように
      クラス3つで指定しているので、こちらもクラス数で上回る必要がある。 */
html body .post-list-item .post-list-meta .post-list-date,
html body .post-list-item .post-list-meta .date,
html body .post-list-inner .post-list-meta span,
html body .post-list-date,
html body .post-list-meta,
html body span.post-list-date {
	color: var(--jc-muted) !important;
	font-size: var(--jc-fs-caption) !important;
}

/* 🔒 JIN本体（theme/jin/style.css:7111）が **クラス5つ＋!important** で
      `color: #888 !important; font-size: 0.65〜0.75rem` を当てている。
      !important 同士では特異度で決まるので、**同じ深さのセレクタで書く**。 */
html body .post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-date,
html body .post-list-mag3col .post-list-item .post-list-inner .post-list-meta .post-list-date,
html body .post-list-mag-sp1col .post-list-item .post-list-inner .post-list-meta .post-list-date {
	color: var(--jc-muted) !important;
	font-size: var(--jc-fs-caption) !important;
	letter-spacing: 0 !important;
}

/* --- アーカイブの小見出し（JINの #ccc ＝ 1.61:1） --- */
html body .archive-title-sub,
html body .archive-post-header .archive-title-sub,
html body .archive-post-header span {
	color: var(--jc-muted) !important;
}

/* --- 尺度から外れている文字を段へ戻す（規則 V18） ---
   実測（390px）：パンくず 10.4px ／ 一覧タイトル 12px ／ 前後記事 12px。
   🔒 11〜13px を作らない。下限は caption（14px）。 */
html body #breadcrumb ul li,
html body #breadcrumb ul li a,
html body #breadcrumb ul li span {
	font-size: var(--jc-fs-caption) !important;
	line-height: 1.7;
}

html body .post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-title,
html body .post-list-mag3col .post-list-item .post-list-inner .post-list-meta .post-list-title,
html body .post-list-mag-sp1col .post-list-item .post-list-inner .post-list-meta .post-list-title,
html body .post-list.basicstyle .post-list-item .post-list-inner .post-list-meta .post-list-title,
html body .related-entry-section .post-list-title {
	font-size: var(--jc-fs-small) !important;
	line-height: 1.6;
}

html body #prev-next p,
html body a.prev .metabox p,
html body a.next .metabox p {
	font-size: var(--jc-fs-small) !important;
	line-height: 1.6;
}

/* --- サイトタイトルが単語の途中で折り返していた（V6：見た目の粗さは信頼を削る） ---
   実測（1440px）：`#site-info` の幅が **188px 固定**なのに、
   「組込みエンジニアノート」11字 × 21.76px ＝ **239px** 必要で、
   「組込みエンジニ／アノート」と割れていた。
   🔒 文字を小さくして押し込まない。**箱を内容に合わせて伸ばす**。
      親は display:flex（実測 1200px、ナビ 972px）なので、
      `width:auto` にすればナビ側が縮んで重ならない。
   ⚠️ 以前は `word-break: keep-all` だけを当てて**箱から溢れ、ナビと重なった**。
      幅を可変にするのが正しい直し方。 */
@media (min-width: 768px) {
	html body #site-info,
	html body .header-box #site-info {
		width: auto !important;
		flex: 0 0 auto;
		white-space: nowrap;
		word-break: keep-all;
		overflow-wrap: normal;
	}

	/* 🔒 箱を可変にしたら、隣（グローバルナビ）との間隔を明示する。
	      近接は「同じグループか」の手がかりなので、間隔0だとロゴとナビが1つに見える（M39）。 */
	html body #site-info {
		padding-right: 32px !important;
		margin-right: 4px !important;
	}

	html body #site-info a {
		font-size: var(--jc-fs-h4);
		white-space: nowrap;
	}
}

/* --- タップ目標を24px（M28の適合下限）より上へ。フッターの法務リンクが24px丁度だった --- */
/* ⚠️ 大きさだけでなく**間隔**も要る。Material は
      「48dp以上・**間隔8dp以上**」で、8dp未満だと誤タップが増える。
      実測（390px）で「プライバシーポリシー」と「免責事項」の間が **5.4px** だった。 */
html body #footer-box a,
html body .footer-inner a,
html body #privacy a,
html body #law a {
	display: inline-block;
	min-height: 32px;
	padding: 8px 4px;
}

/* ⚠️ 間隔は `<a>` ではなく**親の `<span>`** に入れる。
      JINのフッターは `<span id="privacy"><a>…</a></span>` という構造で、
      a に margin を付けても span 同士の間隔にならなかった（実測で 5.4px のまま）。 */
html body .footer-inner > span {
	display: inline-block;
	margin-right: 16px;
}

html body .footer-inner > span:last-child {
	margin-right: 0;
}

html body .cps-post-cat a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
}

/* --- 記事本文にべた書きされた薄いグレー ---
   🔴 公開済みの記事本文に `style="color:#888"` のような直書きが残っている（実測 3.54:1）。
      50本超を書き直さずに救うため、**値を名指しして**トークンへ寄せる。
   🔒 これは救済であって設計ではない。新しい記事に直書きの色を足さない
      （色の正本は §0-1 のトークン＝規則 V16）。 */
html body .cps-post-main [style*="#888"],
html body .cps-post-main [style*="#999"],
html body .cps-post-main [style*="#aaa"],
html body .cps-post-main [style*="#777"],
html body .cps-post-main [style*="#bbb"],
html body .cps-post-main [style*="#ccc"] {
	color: var(--jc-muted) !important;
}

.jin-child-front,
.jin-child-front * {
	box-sizing: border-box;
	letter-spacing: 0;
}

#contents.jin-child-front {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	/* align-items は stretch のまま：サイドバー最下段の追従パネル（sticky）の可動域を確保する */
	max-width: 1140px;
	padding: 8px 20px 56px;
}

.jin-child-front #main-contents {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.jin-child-front-main a,
.jin-child-front-sidebar a {
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.jin-child-front a:focus-visible {
	outline: 2px solid var(--jc-teal);
	outline-offset: 2px;
}

/* ---------------------------------------------------------
   ヒーロー
   ---------------------------------------------------------
   🔴 2026-08-15（2回目）：**暗いグラデの箱をやめ、白地の見出しにした。**
   実測した16サイトに「暗いヒーローの箱」は1件も無かった。Zenn・Vercel・DevelopersIO・
   サイボウズはいずれも**白地に大きいタイトルを置くだけ**。
   紫グラデ・ガラス風を避けるルール（§3・V5＝典型性）と同じ理由で、暗箱もやめる。
   🔒 レーンの2色は**下の細い線1本**にだけ残す（面ではなく線）。
   --------------------------------------------------------- */

.jin-child-hero {
	position: relative;
	margin-bottom: 26px;
	padding: 40px 0 30px;
	border-bottom: 1px solid var(--jc-line);
	background: none;
	color: var(--jc-text);
}

.jin-child-hero::after {
	content: "";
	position: absolute;
	inset: auto auto -1px 0;
	width: 96px;
	height: 3px;
	background: linear-gradient(90deg, var(--jc-amber) 0%, var(--jc-amber) 50%, var(--jc-teal) 50%, var(--jc-teal) 100%);
}

.jin-child-hero__kicker {
	margin: 0 0 12px;
	color: var(--jc-teal);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.jin-child-hero h1 {
	margin: 0 0 14px;
	color: var(--jc-ink);
	font-size: var(--jc-fs-h1);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.35;
}

.jin-child-hero__lead {
	max-width: 680px;
	margin: 0;
	color: var(--jc-muted);
	font-size: var(--jc-fs-small);
	line-height: 1.95;
}

/* ---------------------------------------------------------
   読者レーン（未経験・転職 ／ 技術・学習）
   --------------------------------------------------------- */

.jin-child-fork {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 48px;
}

.jin-child-lane {
	display: flex;
	flex-direction: column;
	padding: 26px 24px 24px;
	border: 1px solid var(--jc-line);
	border-top-width: 3px;
	border-radius: 8px;
	background: var(--jc-surface);
	box-shadow: none;
}

.jin-child-lane--career {
	border-top-color: var(--jc-amber);
}

.jin-child-lane--tech {
	border-top-color: var(--jc-teal);
}

.jin-child-lane__tag {
	margin: 0 0 10px;
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 600;
}

.jin-child-lane--career .jin-child-lane__tag {
	color: var(--jc-amber-dark);
}

.jin-child-lane--tech .jin-child-lane__tag {
	color: var(--jc-teal);
}

.jin-child-lane h2 {
	margin: 0 0 10px;
	color: var(--jc-ink);
	font-size: var(--jc-fs-h3);
	font-weight: 800;
	line-height: 1.5;
}

.jin-child-lane__desc {
	margin: 0 0 18px;
	color: var(--jc-muted);
	font-size: var(--jc-fs-small);
	line-height: 1.9;
}

.jin-child-lane__links {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.jin-child-lane__links li {
	border-bottom: 1px dashed var(--jc-line-soft);
}

.jin-child-lane__links li:last-child {
	border-bottom: 0;
}

.jin-child-lane__links a {
	position: relative;
	display: block;
	padding: 11px 4px 11px 20px;
	color: var(--jc-ink-2);
	font-size: var(--jc-fs-small);
	font-weight: 700;
	line-height: 1.6;
}

.jin-child-lane__links a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	opacity: 0.55;
	transform: translateY(-50%) rotate(45deg);
}

.jin-child-lane--career .jin-child-lane__links a:hover {
	color: var(--jc-amber-dark);
}

.jin-child-lane--tech .jin-child-lane__links a:hover {
	color: var(--jc-teal);
}

/* 技術レーン内のレベルチップ（入門/実務） */
.jin-child-level {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 4px;
	font-size: var(--jc-fs-caption);
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
}

.jin-child-level--learn {
	border: 1px solid var(--jc-teal-line);
	background: var(--jc-teal-bg);
	color: var(--jc-teal-dark);
}

.jin-child-level--pro {
	border: 1px solid var(--jc-teal-deep);
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
}

.jin-child-lane__cta {
	display: inline-flex;
	min-height: 46px;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: var(--jc-fs-small);
	font-weight: 700;
	line-height: 1.4;
}

/* 🔒 白抜き文字を載せる面には --jc-amber を使わない（白地3.0:1・白文字も3.0:1）。
   実測で 2.94:1 と出た箇所。面は --jc-amber-deep（白文字で 8.4:1）にする。 */
/* 🔴 2026-08-15（2回目）：**CTAを近黒に統一した。**
   琥珀を面にすると茶色く濁って見える（運営者指摘）。
   実物（Vercel・Zenn・GitHub Blog）の主ボタンは**ほぼ黒**で、ブランド色は
   ロゴやバッジのような**狭い面積**にだけ置いている。
   レーンの区別はカード上端の3px線・`// 未経験・転職` のラベル・レベルチップで十分に付く。 */
/* ⚠️ `html body` ＋ `!important` で確実に勝たせる。
      特異度を上げただけでは **近黒のボタンに濃いグレーの文字**（実測 1.64:1）のままだった。
      背景は効くのに文字色だけ負ける、という出方をするので気づきにくい。 */
html body .jin-child-lane__cta {
	background: var(--jc-ink-surface) !important;
	color: var(--jc-static-white) !important;
}

.jin-child-lane--career .jin-child-lane__cta:hover {
	background: var(--jc-amber-deep);
	transform: none;
	box-shadow: none;
}

.jin-child-lane--tech .jin-child-lane__cta:hover {
	background: var(--jc-teal-surface);
	transform: none;
	box-shadow: none;
}

/* ---------------------------------------------------------
   セクション見出し
   --------------------------------------------------------- */

.jin-child-section {
	margin-bottom: 48px;
}

.jin-child-section__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 10px;
	/* 🔒 2pxの黒線をやめて1pxの薄い線に。区切りは「見えれば足りる」（実物も細い） */
	border-bottom: 1px solid var(--jc-line);
}

.jin-child-section__label {
	color: var(--jc-muted);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 600;
}

.jin-child-section__head h2,
.jin-child-side-panel h2 {
	margin: 0;
	color: var(--jc-ink);
	font-size: var(--jc-fs-h3);
	font-weight: 800;
	line-height: 1.45;
}

/* ---------------------------------------------------------
   最新記事：リスト型（規則 V19 ／ 根拠 M33・M31・M1）
   ---------------------------------------------------------
   2026-08-15 に **カード型 → リスト型**へ作り替えた。
   NN/g：カードが勝つのは**サムネイルが判断を担うとき**、リストが勝つのは
   **テキストの属性を1件ずつ走査して比べるとき**。
   実測（改修前・本番トップ）では、アイキャッチ 1200×630 の文字入り図が
   **345px＝元の45%**に縮んで文字が読めず、判断を担っていなかった。
   さらに「NO IMAGE」のカードが混ざり（M23-⑩）、タイトルの前にラベルが3つ並び、
   要約は全6件が81字ちょうどの機械抜粋で文の途中で切れていた。
   → 🔒 サムネイルを置かず、タイトルを先頭にし、要約は人が書いた post_desc を使う。
   --------------------------------------------------------- */

/* 🔴 2026-08-15（4回目）：**1本ずつの罫線をやめ、余白で区切る。**
   運営者の指摘「記事の境目、陳腐じゃない？」。実測10サイトの区切り方は
     余白だけ … Zenn（高さ92／余白92）・Vercel（216／216）・GitHub（215／48）・
                Tsuzuki（80／21）・ヒトデ　＝ **5件**
     カード   … Qiita（角丸8px・地白）・DevelopersIO（角丸4px・影）　＝ **2件**
     罫線     … サイボウズ（1px #ddd）・メルカリ（1px #dbdbdb）　＝ **2件**
   自サイトは **罫線1px ＋ 余白0** で、10件中いちばん詰まっていた。
   → 多数派の「余白で区切る」へ。罫線を消して、行間の余白を取る。 */
.jin-child-post-list {
	border-top: 0;
}

/* 🔴 2026-08-15（5回目）：**罫線なし・余白だけ**をやめ、**枠のあるカード**に戻した。
   運営者の指摘「区切り線も見えづらい」。
   前回は「余白で区切る」を採ったが、それは**海外のプロダクトサイトと投稿プラットフォーム**の型だった。
   参照クラス（日本の技術×転職メディア6件）を測り直すと：
     影付きカード 3件（テックキャンプ・アンドエンジニア 角丸12px＋影・レバテック 角丸4px＋影）
     1px罫線     2件（ポテパンスタイル #e0e0e0・エンジニアの入り口 #f2f2f2）
     余白だけ     1件（侍エンジニア）
   → **枠のあるカードが最多**。地（#f5f5f5）の上に白いカードを置くと境目がはっきり出る。 */
.jin-child-post-row {
	padding: 16px 18px;
	margin: 0;
	border: 1px solid var(--jc-line);
	border-radius: 8px;
	background: var(--jc-surface);
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.jin-child-post-row + .jin-child-post-row {
	margin-top: 12px;
}

/* 行そのものがリンクなので、触れたら面が反応することを示す */
.jin-child-post-row:hover {
	border-color: var(--jc-teal);
	background-color: var(--jc-teal-bg-soft);
}

/* ---------------------------------------------------------
   よく読まれている記事（2026-08-15新設）
   ---------------------------------------------------------
   🔒 面に色を敷いて「最新記事」と分ける。実測した参照クラスは
      ポテパン #f2f5f8 ／ エンジニアの入り口 #f2f2f2 ／ テックキャンプ #f7f7f7 ／
      レバテックはセクション単位で #f0f3f3 を敷いている。
   --------------------------------------------------------- */

.jin-child-popular {
	padding: 4px 22px 24px;
	border: 1px solid var(--jc-teal-line);
	border-radius: 8px;
	background: var(--jc-teal-bg-soft);
}

.jin-child-popular .jin-child-section__head {
	border-bottom-color: var(--jc-teal-line);
}

ol.jin-child-rank {
	counter-reset: jin-child-rank;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jin-child-rank__item {
	counter-increment: jin-child-rank;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--jc-teal-line);
}

.jin-child-rank__item:first-child {
	border-top: 0;
}

.jin-child-rank__item > a {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 4px 12px;
	align-items: center;
	min-height: 56px;
	padding: 12px 4px;
	color: var(--jc-ink);
}

.jin-child-rank__item > a::before {
	content: counter(jin-child-rank, decimal-leading-zero);
	grid-row: span 2;
	color: var(--jc-teal);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-h4);
	font-weight: 700;
	text-align: center;
}

.jin-child-rank__item--career > a::before {
	color: var(--jc-amber-dark);
}

.jin-child-rank__title {
	font-size: var(--jc-fs-small);
	font-weight: 700;
	line-height: 1.55;
}

.jin-child-rank__item > a:hover .jin-child-rank__title {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.jin-child-rank__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	color: var(--jc-muted);
	font-size: var(--jc-fs-caption);
	line-height: 1.5;
}

/* 🔒 レーンは色でなく**文字**で示す（M26） */
.jin-child-rank__lane {
	padding: 1px 7px;
	border: 1px solid var(--jc-teal-line);
	border-radius: 4px;
	color: var(--jc-teal);
	font-weight: 700;
}

.jin-child-rank__item--career .jin-child-rank__lane {
	border-color: var(--jc-amber-line);
	color: var(--jc-amber-dark);
}

@media (max-width: 760px) {
	.jin-child-popular {
		padding: 4px 14px 18px;
	}
}

.jin-child-post-row__title {
	margin: 0 0 4px;
	font-size: var(--jc-fs-h4);
	font-weight: 800;
	line-height: 1.55;
}

.jin-child-post-row__title a {
	display: block;
	min-height: 44px; /* V7・M28 */
	padding: 4px 0;
	color: var(--jc-ink);
}

.jin-child-post-row__title a:hover {
	color: var(--jc-link-hover);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.jin-child-post-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 8px;
	color: var(--jc-muted);
	font-size: var(--jc-fs-caption);
	line-height: 1.5;
}

/* 🔒 レーンは**文字**で示す。色は補助（M26：色覚異常は男性の約8%）。
      色を落としても「技術・入門」「転職・キャリア」と読めることが要件。 */
.jin-child-post-row__lane {
	padding: 2px 8px;
	border: 1px solid var(--jc-teal-line);
	border-radius: 4px;
	color: var(--jc-teal-dark);
	font-weight: 700;
}

.jin-child-post-row--career .jin-child-post-row__lane {
	border-color: var(--jc-amber-line);
	color: var(--jc-amber-dark);
}

.jin-child-post-row__cat::before {
	content: "／";
	margin-right: 6px;
	color: var(--jc-marker);
}

.jin-child-post-row__meta time {
	font-family: var(--jc-mono);
}

.jin-child-post-row__summary {
	margin: 0;
	color: var(--jc-text);
	font-size: var(--jc-fs-small);
	line-height: 1.85;
}

/* ---------------------------------------------------------
   このサイトについて（規則 V22 ／ 根拠 M38・M23）
   --------------------------------------------------------- */

/* 事実は「項目名＋値」で並べる。文章で説明しないほうが読み取りが速い
   （実物の個人ブログも肩書きを名詞句で列挙している） */
.jin-child-about__facts {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr);
	gap: 6px 16px;
	margin: 0 0 14px;
}

.jin-child-about__facts dt {
	color: var(--jc-muted);
	font-size: var(--jc-fs-caption);
	font-weight: 700;
	line-height: 1.9;
}

.jin-child-about__facts dd {
	margin: 0;
	color: var(--jc-text);
	font-size: var(--jc-fs-small);
	line-height: 1.85;
}

.jin-child-about__facts dt:first-of-type + dd {
	font-weight: 700;
}

@media (max-width: 600px) {
	.jin-child-about__facts {
		grid-template-columns: 1fr;
		gap: 0 0;
	}

	.jin-child-about__facts dd {
		margin-bottom: 10px;
	}
}

.jin-child-about__lead {
	margin: 0 0 10px;
	color: var(--jc-text);
	font-size: var(--jc-fs-small);
	line-height: 1.95;
}

.jin-child-about__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jin-child-about__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--jc-link);
	font-size: var(--jc-fs-small);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.jin-child-about__links a:hover {
	color: var(--jc-link-hover);
}

/* ---------------------------------------------------------
   記事末の「次に読む」（根拠 M36）
   ---------------------------------------------------------
   NN/g：関連コンテンツは記事の**直後**・間に何も挟まない・**広告と同じ見た目にしない**。
   🔒 カード枠と影を使わない（広告に見えた瞬間に見られなくなる＝M20）。
   --------------------------------------------------------- */

.jin-child-next-reads {
	margin: 3em 0 0;
}

.cps-post-main h2.jin-child-next-reads__title {
	margin-top: 0;
}

.jin-child-next-reads__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jin-child-next-reads__list > li {
	border-bottom: 1px solid var(--jc-line);
}

.cps-post-main .jin-child-next-reads__list > li > a {
	display: block;
	padding: 12px 0 12px 18px;
	position: relative;
	color: var(--jc-link);
	text-decoration: none;
}

.cps-post-main .jin-child-next-reads__list > li > a::before {
	content: "";
	position: absolute;
	top: 1.15em;
	left: 2px;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--jc-marker);
	border-right: 2px solid var(--jc-marker);
	transform: rotate(45deg);
}

.jin-child-next-reads__label {
	display: block;
	font-size: var(--jc-fs-small);
	font-weight: 700;
	line-height: 1.6;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.jin-child-next-reads__desc {
	display: block;
	margin-top: 2px;
	color: var(--jc-muted);
	font-size: var(--jc-fs-caption);
	font-weight: 400;
	line-height: 1.7;
}

.cps-post-main .jin-child-next-reads__list > li > a:hover .jin-child-next-reads__label {
	color: var(--jc-link-hover);
}

/* ---------------------------------------------------------
   カテゴリ探索（読者レーン別グループ）
   --------------------------------------------------------- */

.jin-child-cat-group {
	margin-bottom: 26px;
}

.jin-child-cat-group:last-child {
	margin-bottom: 0;
}

.jin-child-cat-group__title {
	position: relative;
	margin: 0 0 14px;
	padding-left: 14px;
	color: var(--jc-ink);
	font-size: var(--jc-fs-h4);
	font-weight: 800;
	line-height: 1.5;
}

.jin-child-cat-group__title::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 5px;
	height: 1.1em;
	border-radius: 4px;
	transform: translateY(-50%);
}

.jin-child-cat-group--career .jin-child-cat-group__title::before {
	background: var(--jc-amber-surface);
}

.jin-child-cat-group--learn .jin-child-cat-group__title::before {
	background: var(--jc-teal-surface);
}

.jin-child-cat-group--pro .jin-child-cat-group__title::before {
	background: var(--jc-teal-surface);
}

.jin-child-category-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.jin-child-category-card {
	padding: 18px;
	border: 1px solid var(--jc-line);
	border-radius: 8px;
	background: var(--jc-surface);
}

.jin-child-category-card__title {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--jc-ink);
	font-size: var(--jc-fs-small);
	font-weight: 800;
	line-height: 1.5;
}

.jin-child-category-card__title:hover {
	color: var(--jc-teal);
}

.jin-child-category-card p {
	margin: 0;
	color: var(--jc-muted);
	font-size: var(--jc-fs-small);
	line-height: 1.75;
}

.jin-child-category-card__children {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

/* 🔒 チップの枠は「押せる」と分かる唯一の手がかりなので 3:1 を満たす（SC 1.4.11／V17）。
   実測（2026-08-15・本番トップ）で --jc-line-2 の枠は **チップ背景に対し 1.09**、
   チップ背景と外側の差も **1.09**、下線も無し＝**リンクだと分かる手がかりが1つも無かった**。
   枠を --jc-teal（この地に対し 5.0:1）、文字を --jc-teal-dark（11.3:1）にして、
   青＝クリック可能性という手がかり（M34）も持たせる。地の色は変えない。 */
.jin-child-category-card__children a,
.jin-child-tag-list a {
	display: inline-flex;
	min-height: 32px;
	align-items: center;
	padding: 5px 11px;
	border: 1px solid var(--jc-teal);
	border-radius: 8px;
	background: var(--jc-bg);
	color: var(--jc-teal-dark);
	font-size: var(--jc-fs-caption);
	font-weight: 700;
	line-height: 1.35;
}

.jin-child-category-card__children a:hover,
.jin-child-tag-list a:hover {
	border-color: var(--jc-teal);
	background: var(--jc-teal-bg);
	color: var(--jc-teal-dark);
}

/* ---------------------------------------------------------
   カテゴリページの「この中で絞り込む」（2026-08-15追加）
   実測でカテゴリページに子カテゴリへの導線が0件だった。
   ナビには足さない（参考10サイト中8サイトが親だけ。ナビ項目は4〜7が中心で当サイトは既に8）。
   その階層へ来た人にだけ見せる。
   --------------------------------------------------------- */
.jin-child-cat-narrow {
	margin: 0 0 26px;
	padding: 14px 16px;
	border: 1px solid var(--jc-line);
	border-radius: 8px;
	background: var(--jc-teal-bg-soft);
}

.jin-child-cat-narrow__label {
	display: block;
	margin-bottom: 10px;
	color: var(--jc-muted);
	font-size: var(--jc-fs-caption);
	font-weight: 700;
}

.jin-child-cat-narrow__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jin-child-cat-narrow__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jin-child-cat-narrow__list li::before {
	display: none;
	content: none;
}

/* 🔒 枠線は「押せる」と分かる唯一の手がかりなので 3:1 を満たす色にする（SC 1.4.11／V17）。
   実測（2026-08-15・本番）で --jc-line-2 の枠は **チップ背景に対し 1.19** しかなく、
   チップ背景と panel 背景の差も **1.04** だった＝**境界がどこにも見えていなかった**。
   --jc-teal は白地 5.7:1 で、リンクであることの手がかり（M34：青＝クリック可能性）も兼ねる。 */
html body .jin-child-cat-narrow__list a {
	display: inline-flex;
	min-height: 34px;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border: 1px solid var(--jc-teal);
	border-radius: 8px;
	background: var(--jc-surface);
	color: var(--jc-teal-dark);
	font-size: var(--jc-fs-caption);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

html body .jin-child-cat-narrow__list a:hover,
html body .jin-child-cat-narrow__list a:focus-visible {
	border-color: var(--jc-teal);
	background: var(--jc-teal-bg);
	color: var(--jc-teal-dark);
}

.jin-child-cat-narrow__count {
	color: var(--jc-muted);
	font-size: var(--jc-fs-caption);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   サイドバー
   --------------------------------------------------------- */

.jin-child-front-sidebar {
	min-width: 0;
}

.jin-child-front-sidebar > * + * {
	margin-top: 16px;
}

.jin-child-side-panel {
	padding: 20px;
	border: 1px solid var(--jc-line);
	border-radius: 8px;
	background: var(--jc-surface);
}

/* 最下段「まず読む記事」はスクロールに追従させる（回遊・ロードマップ導線の主役） */
.jin-child-side-panel--sticky {
	position: sticky;
	top: 24px;
}

.jin-child-side-panel h2 {
	margin-bottom: 12px;
	font-size: var(--jc-fs-h4);
}

.jin-child-side-panel p {
	margin: 0;
	color: var(--jc-muted);
	font-size: var(--jc-fs-small);
	line-height: 1.85;
}

.jin-child-side-panel__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: var(--jc-muted);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 600;
}

.jin-child-side-profile {
	border-top: 3px solid var(--jc-ink-surface);
}

.jin-child-side-profile__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.jin-child-side-profile__avatar {
	display: block;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.jin-child-side-profile__avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jc-ink-surface);
	color: var(--jc-teal-on-dark);
	font-size: var(--jc-fs-h3);
	font-weight: 700;
}

.jin-child-side-profile__id {
	min-width: 0;
}

.jin-child-side-panel h2.jin-child-side-profile__name {
	margin-bottom: 2px;
	font-size: var(--jc-fs-h4);
	line-height: 1.4;
}

.jin-child-side-panel p.jin-child-side-profile__role {
	margin: 0;
	color: var(--jc-muted);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 600;
	line-height: 1.5;
}

.jin-child-side-profile__btn {
	display: inline-flex;
	min-height: 40px;
	align-items: center;
	margin-top: 14px;
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--jc-ink-surface);
	color: var(--jc-static-white);
	font-size: var(--jc-fs-small);
	font-weight: 700;
	line-height: 1.35;
}

.jin-child-side-profile__btn:hover {
	background: var(--jc-ink-surface-2);
}

.jin-child-front-sidebar .search-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 46px;
	gap: 0;
	margin: 0;
}

.jin-child-front-sidebar .search-text {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--jc-line-2);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	background: var(--jc-surface);
}

.jin-child-front-sidebar #searchsubmit {
	width: 46px;
	min-height: 44px;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: var(--jc-teal-surface);
	color: var(--jc-static-white);
	cursor: pointer;
}

.jin-child-side-list,
.jin-child-side-categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jin-child-side-list {
	counter-reset: jin-child-side-list;
}

.jin-child-side-list li,
.jin-child-side-categories li {
	margin: 0;
	border-bottom: 1px solid var(--jc-line-soft);
}

.jin-child-side-list li:last-child,
.jin-child-side-categories li:last-child {
	border-bottom: 0;
}

.jin-child-side-categories a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	color: var(--jc-ink-2);
	font-size: var(--jc-fs-small);
	font-weight: 700;
	line-height: 1.65;
}

.jin-child-side-categories a:hover {
	color: var(--jc-teal);
}

.jin-child-side-categories__name {
	min-width: 0;
}

.jin-child-side-categories__count {
	flex-shrink: 0;
	color: var(--jc-muted);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 600;
}

.jin-child-side-categories a:hover .jin-child-side-categories__count {
	color: var(--jc-teal);
}

/* まず読む記事：サムネイル＋順位バッジのランキング型 */
.jin-child-side-list li {
	counter-increment: jin-child-side-list;
}

.jin-child-side-list a {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	padding: 10px 0;
	color: var(--jc-ink-2);
}

.jin-child-side-list__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	background: var(--jc-line-soft);
}

.jin-child-side-list__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jin-child-side-list__thumb::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: inline-flex;
	width: 21px;
	height: 21px;
	align-items: center;
	justify-content: center;
	border-radius: 0 0 6px 0;
	background: var(--jc-ink-surface);
	color: var(--jc-teal-on-dark);
	content: counter(jin-child-side-list, decimal-leading-zero);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 700;
}

/* 関連記事（記事ページ）は順位バッジなし */
.jin-child-side-list--plain .jin-child-side-list__thumb::before {
	display: none;
}

.jin-child-side-list__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: var(--jc-fs-small);
	font-weight: 700;
	line-height: 1.55;
}

.jin-child-side-list a:hover .jin-child-side-list__title {
	color: var(--jc-teal);
}

.jin-child-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------------------------------------------------------
   記事・アーカイブページのサイドバー（sidebar.php オーバーライド）
   親JINの #sidebar 内に、トップと同じパネル群を置く
   --------------------------------------------------------- */

#sidebar .jin-child-front-sidebar a {
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

#sidebar .jin-child-article-sidebar h2 {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--jc-ink);
	text-align: left;
}

#sidebar #widget-tracking {
	margin-top: 16px;
}

/* 追従目次（記事ページ。#widget-tracking 内） */
.jin-child-side-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: jin-child-side-toc;
}

.jin-child-side-toc__list li {
	margin: 0;
	border-bottom: 1px solid var(--jc-line-soft);
	counter-increment: jin-child-side-toc;
}

.jin-child-side-toc__list li:last-child {
	border-bottom: 0;
}

.jin-child-side-toc__list a {
	display: flex;
	gap: 10px;
	padding: 9px 0;
	color: var(--jc-text);
	font-size: var(--jc-fs-small);
	font-weight: 600;
	line-height: 1.55;
}

.jin-child-side-toc__list a::before {
	flex-shrink: 0;
	padding-top: 1px;
	color: var(--jc-muted);
	content: counter(jin-child-side-toc, decimal-leading-zero);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 700;
}

.jin-child-side-toc__list a:hover,
#sidebar .jin-child-side-toc__list a:hover {
	color: var(--jc-teal);
}

.jin-child-side-toc__list a.is-active,
#sidebar .jin-child-side-toc__list a.is-active {
	color: var(--jc-teal-dark);
}

.jin-child-side-toc__list a.is-active::before {
	color: var(--jc-teal);
}

/* JINの #sidebar a 配色より詳細度で勝たせる色の再指定 */
#sidebar .jin-child-side-panel a {
	color: var(--jc-ink-2);
}

#sidebar .jin-child-side-categories a:hover,
#sidebar .jin-child-side-categories a:hover .jin-child-side-categories__count,
#sidebar .jin-child-side-list a:hover .jin-child-side-list__title {
	color: var(--jc-teal);
}

#sidebar .jin-child-side-categories__count {
	color: var(--jc-muted);
}

#sidebar .jin-child-side-panel a.jin-child-side-profile__btn {
	color: var(--jc-static-white);
	background: var(--jc-ink-surface);
}

#sidebar .jin-child-side-panel a.jin-child-side-profile__btn:hover {
	background: var(--jc-ink-surface-2);
}

/* ---------------------------------------------------------
   記事ページ: 対象読者バッジ（本文冒頭）
   --------------------------------------------------------- */

.jin-child-audience {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 28px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: var(--jc-fs-small);
	line-height: 1.6;
}

.jin-child-audience--career {
	background: var(--jc-amber-bg);
	border: 1px solid var(--jc-amber-line);
}

.jin-child-audience--tech {
	background: var(--jc-teal-bg);
	border: 1px solid var(--jc-teal-line);
}

.jin-child-audience__tag {
	padding: 3px 10px;
	border-radius: 4px;
	color: var(--jc-static-white);
	font-size: var(--jc-fs-caption);
	font-weight: 700;
	white-space: nowrap;
}

.jin-child-audience--career .jin-child-audience__tag {
	background: var(--jc-amber-surface);
}

.jin-child-audience--tech .jin-child-audience__tag {
	background: var(--jc-teal-surface);
}

.jin-child-audience__text {
	color: var(--jc-text);
	font-weight: 500;
}

.jin-child-audience__alt {
	margin-left: auto;
	color: var(--jc-teal-dark);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.jin-child-audience--career .jin-child-audience__alt {
	color: var(--jc-amber-dark);
}

/* ---------------------------------------------------------
   記事ページ: 可読性の底上げ（JIN本文コンテナへ最小限の上書き）
   --------------------------------------------------------- */

/* コードブロック: 濃色地＋横スクロールで折返し崩れを防ぐ */
.cps-post-main pre {
	overflow-x: auto;
	padding: 16px 18px;
	border-radius: 8px;
	background: var(--jc-ink-deep);
	color: var(--jc-code-text);
	font-family: var(--jc-mono);
	font-size: 0.88em;
	line-height: 1.75;
	-webkit-overflow-scrolling: touch;
}

.cps-post-main pre code {
	padding: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
}

/* インラインコード */
.cps-post-main :not(pre) > code {
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--jc-line-soft);
	color: var(--jc-code-inline);
	font-family: var(--jc-mono);
	font-size: 0.9em;
}

/* 本文中の画像 */
.cps-post-main img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* 埋め込み（YouTube等）のはみ出し防止 */
.cps-post-main iframe {
	max-width: 100%;
}

/* スマホ: 表は横スクロールで読ませる（列潰れ防止） */
@media (max-width: 767px) {
	.cps-post-main table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ---------------------------------------------------------
   レスポンシブ（トップページ）
   --------------------------------------------------------- */

@media (max-width: 1024px) {
	#contents.jin-child-front {
		grid-template-columns: minmax(0, 1fr);
	}

	.jin-child-front-sidebar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.jin-child-front-sidebar > * + * {
		margin-top: 0;
	}

	/* 1カラム時は追従させない（本文の下に並ぶだけなので） */
	.jin-child-side-panel--sticky {
		position: static;
	}
}

@media (max-width: 760px) {
	#contents.jin-child-front {
		padding: 4px 14px 40px;
		gap: 24px;
	}

	.jin-child-hero {
		padding: 34px 22px 32px;
		border-radius: 8px;
	}

	.jin-child-hero h1 {
		font-size: var(--jc-fs-h2);
	}

	.jin-child-hero h1 br {
		display: none;
	}

	.jin-child-hero__lead {
		font-size: var(--jc-fs-small);
		line-height: 1.95;
	}

	.jin-child-fork,
	.jin-child-category-grid,
	.jin-child-front-sidebar {
		grid-template-columns: 1fr;
	}

	.jin-child-fork {
		gap: 14px;
		margin-bottom: 38px;
	}

	.jin-child-section {
		margin-bottom: 38px;
	}

	.jin-child-lane {
		padding: 22px 18px 20px;
	}

	.jin-child-lane__cta {
		width: 100%;
	}

	.jin-child-audience {
		font-size: var(--jc-fs-caption);
	}

	.jin-child-audience__alt {
		margin-left: 0;
	}
}

/* =========================================================
   グローバルナビ（モバイル）を常時見える形にする
   ---------------------------------------------------------
   規則 V13 ／ 根拠 M21（NN/g・6サイト179人）：
     ナビを隠すと発見率が約半減し、タスクがデスクトップで39%・モバイルで15%遅くなる。

   2026-08-06のサイト監査で「nav.fixed-content に8リンクあるのに高さ0」「表示中の
   ボタン・トグルは0個」と出た原因は2つ。どちらも親テーマの既定。
     ① .sp-menu-box が transform: translate3d(0,-100%,0) で画面外にある
     ② .cps-icon-bar（ハンバーガーの3本線）が background:var(--jc-surface) で、白背景に白線
   → トグルを直すのではなく、**帯そのものを常時表示にして隠すのをやめる**。
   ========================================================= */

@media (max-width: 767px) {

	/* 開閉の仕掛けを使わない。閉じている状態を作らなければ発見率は落ちない */
	#navtoggle,
	.sp-menu-open,
	.sp-menu-close,
	.sp-menu-box .sp-menu-title {
		display: none !important;
	}

	/* 画面外へ飛ばされていた帯を、その場に置く */
	.sp-menu-box {
		position: static !important;
		transform: none !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
		z-index: auto !important;
		background: var(--jc-surface) !important;
		border-bottom: 1px solid var(--jc-line) !important;
		transition: none !important;
	}

	.sp-menu-box .fixed-content {
		width: 100% !important;
		height: auto !important;
		margin-top: 0 !important;
	}

	.sp-menu-box ul.menu-box {
		display: flex;
		margin: 0;
		padding: 0 6px;
		list-style: none;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sp-menu-box ul.menu-box::-webkit-scrollbar { display: none; }

	.sp-menu-box ul.menu-box > li {
		flex: 0 0 auto;
		margin: 0;
		border: 0;
		order: 2;
	}

	/* 🔒 カテゴリを先頭へ寄せる。読者の目的語に近いものほど匂いが強い（M1）。
	   並び順はWP管理画面のメニュー設定を触らず、表示側だけで決める。 */
	.sp-menu-box ul.menu-box > li.menu-item-object-category { order: 1; }

	.sp-menu-box ul.menu-box > li > a {
		display: flex !important;
		align-items: center;
		min-height: 48px; /* M6：48dp。指の腹は10〜14mm */
		padding: 0 13px !important;
		border: 0 !important;
		background: none !important;
		color: var(--jc-ink) !important;
		font-size: var(--jc-fs-small);
		font-weight: 700;
		line-height: 1.4;
		white-space: nowrap;
	}

	.sp-menu-box ul.menu-box > li > a:active,
	.sp-menu-box ul.menu-box > li > a:hover {
		color: var(--jc-teal) !important;
		background: var(--jc-teal-bg) !important;
	}

	/* いま見ているカテゴリを下線で示す（現在地の手がかり） */
	.sp-menu-box ul.menu-box > li.current-menu-item > a,
	.sp-menu-box ul.menu-box > li.current-category-ancestor > a {
		box-shadow: inset 0 -2px 0 var(--jc-teal);
	}

	/* 帯の中に階層は出さない（横1行に収める） */
	.sp-menu-box ul.menu-box .sub-menu { display: none !important; }

	/* 🔴 検索をナビ帯に出す（2026-08-15）。
	   スマホでは検索窓がページの89〜92%地点にあり、事実上たどり着けなかった。
	   実物は6件中5件が上部（Zenn 0%／Qiita 0%／ヒトデ 0%／侍 2%／Tsuzuki 8%）。 */
	.sp-menu-box ul.menu-box > li.jin-child-nav-search {
		order: 0;                 /* カテゴリより前＝帯の先頭に置く */
		flex: 0 0 auto;
		display: flex !important;
		align-items: center;
		padding: 0 8px;
	}

	.jin-child-nav-search__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* ⚠️ 幅を取りすぎるとカテゴリが画面外へ押し出される（実測：164pxで帯347pxの半分近く）。
	      帯は横スクロールするが、**最初に見えるのはカテゴリであってほしい**（M1：情報の匂い）。 */
	.jin-child-nav-search input[type="search"] {
		width: 108px;
		min-height: 34px;
		padding: 4px 8px;
		border: 1px solid var(--jc-line-2);
		border-radius: 6px;
		background: var(--jc-surface);
		color: var(--jc-text);
		font-size: var(--jc-fs-caption);
	}

	.jin-child-nav-search input[type="search"]::placeholder {
		color: var(--jc-muted);
	}
}

/* PCではナビ帯の検索を出さない（サイドバーの検索が上部＝456px にあるため） */
@media (min-width: 768px) {
	li.jin-child-nav-search { display: none !important; }

	/* サイトタイトルが単語の途中で折り返していた（375pxで「組込みエンジニアノー／ト」）。
	   実測：枠が187pxしかないのに文字が25.6pxで11字＝281px必要だった。
	   折り返しを禁止するだけでは溢れるので、狭幅では文字を詰める。 */
	#site-info,
	#site-info a,
	.header-box #site-info {
		word-break: keep-all;
		overflow-wrap: normal;
		white-space: nowrap;
		font-size: 1rem !important;
		letter-spacing: 0;
	}
}

/* =========================================================
   タップ目標の下限をそろえる（V7 ／ 根拠 M6）
   ---------------------------------------------------------
   実測（LocalWP 375px・2026-08-14）で 44px未満が40件あった。
   内訳はトップのカテゴリカードの子リンク（32px）・カード見出し（24px）・
   サイトタイトル（20px）・フッターのポリシー系（16px）。
   🔒 本文中のインラインリンクは対象外（WCAGでも対象外。除外しないと誤検知になる）。
   ========================================================= */

.jin-child-category-card__title,
.jin-child-category-card__children a,
.jin-child-lane__links a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* 対象読者バッジの「逃がしリンク」。2026-08-06の監査で21pxと出ていた箇所 */
.jin-child-audience__alt {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 2px;
}

/* 記事のカテゴリラベル（親テーマ）。ナビゲーションなので指で押せる大きさにする */
.cps-post-cat a,
a.cps-post-cat {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 10px;
}

/* カード見出しは行が2行になることがあるので、下限だけ与えて伸ばす */
.jin-child-category-card__title {
	min-height: 44px;
	padding: 4px 0;
}

/* サイトタイトル（ロゴ）は親テーマの実装。指で押せる大きさにする。
   🔒 モバイル限定にする。PCで inline-flex + min-height を当てるとヘッダーの
      レイアウトが崩れ、タイトルがグローバルナビと重なった（実測で確認）。
      PCはマウス操作なので44pxの要件も強くない。 */
@media (max-width: 767px) {
	#site-info a,
	.header-box #site-info a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* フッターのポリシー系リンク（16px）。WCAG 2.5.8 の 24×24 も割っていた。
   実測で祖先idが #privacy / #law だったので、そこも名指しする。 */
#footer-widget-box a,
.footer-menu a,
.copyright a,
#privacy a,
#law a,
#footer a {
	display: inline-block;
	min-height: 24px;
	padding: 6px 2px;
	line-height: 1.6;
}

/* =========================================================
   サイドバーの簡素化（V12 ／ 根拠 M20）
   ---------------------------------------------------------
   NN/g の実測：右レールは**面積の25%を占めながら注視は0.8%**（33倍小さい）。
   原因は「広告っぽい位置と見た目」の学習で、対策は
     ①視覚設計を軽く単純に（グラフィカルなほど注意を払われない）
     ②内部の誘導と広告を見た目で分ける
     ③サムネイルは有用な情報を素早く伝えるときだけ
   → カード枠・白背景・サムネイル・順位バッジをやめ、
     「見出し＋テキストリンク」だけにする。本文の延長に見せる。
   ========================================================= */

.cps-post-main .jin-child-side-panel,
.jin-child-front-sidebar .jin-child-side-panel {
	padding: 0 0 18px;
	border: 0;
	border-bottom: 1px solid var(--jc-line);
	border-radius: 0;
	background: transparent;
}

.jin-child-front-sidebar .jin-child-side-panel:last-child {
	border-bottom: 0;
}

.jin-child-front-sidebar > * + * {
	margin-top: 22px;
}

/* 見出しの下の線1本だけでレーンを示す。🔒 色帯・カード・背景色は使わない。
   ⚠️ 既存の `#sidebar .jin-child-article-sidebar h2 { border:0 }` がIDセレクタで
      強いので、こちらも #sidebar を含めて特異度を合わせる（実測で判明）。 */
/* 🔴 2026-08-15（2回目）：**2pxのティール下線を 1px の薄いグレーにした。**
   パネル5つ×全幅の色線は「鮮やかな色をごく狭い面積に」（実測）に反していた。
   レーンは既に文字（「// ROADMAP」等）で分かるので、線に色を持たせる必要が無い。 */
.jin-child-front-sidebar .jin-child-side-panel h2,
#sidebar .jin-child-article-sidebar .jin-child-side-panel h2 {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--jc-line);
}

/* プロフィール：アバターとボタンを廃止したぶんの調整 */
.jin-child-side-profile {
	border-top: 0 !important;
}

.jin-child-side-panel p.jin-child-side-profile__role {
	margin: 0 0 8px;
}

/* 記事リスト：番号もサムネイルも持たないテキストの箇条書き */
.jin-child-front-sidebar ul.jin-child-side-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jin-child-front-sidebar .jin-child-side-list > li + li {
	margin-top: 2px;
	border-top: 1px dotted var(--jc-line-soft);
}

.jin-child-front-sidebar .jin-child-side-list > li > a {
	display: flex;
	align-items: center;
	min-height: 44px; /* V7 */
	padding: 6px 0 6px 14px;
	position: relative;
	color: var(--jc-text);
	font-size: var(--jc-fs-small);
	line-height: 1.6;
}

.jin-child-front-sidebar .jin-child-side-list > li > a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 2px;
	width: 5px;
	height: 5px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--jc-marker);
}

.jin-child-front-sidebar .jin-child-side-list > li > a:hover {
	color: var(--jc-teal-dark);
}

.jin-child-front-sidebar .jin-child-side-list > li > a:hover::before {
	background: var(--jc-teal-surface);
}

/* 転職レーンの「この先の進め方」。番号付きで道が1本だと分かる形にする（V15） */
.jin-child-side-note {
	margin: 0 0 10px;
	color: var(--jc-muted);
	font-size: var(--jc-fs-small);
	line-height: 1.7;
}

ol.jin-child-side-steps {
	counter-reset: jin-child-step;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.jin-child-side-steps > li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jin-child-side-steps > li > a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 0 6px 30px;
	color: var(--jc-text);
	font-size: var(--jc-fs-small);
	line-height: 1.6;
}

.jin-child-side-steps > li > a::before {
	counter-increment: jin-child-step;
	content: counter(jin-child-step);
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 50%;
	background: var(--jc-amber-bg);
	color: var(--jc-amber-dark);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.jin-child-side-steps > li > a:hover {
	color: var(--jc-amber-dark);
}

/* トップのカテゴリカード：記事数を数字だけで出す（V14） */
.jin-child-category-card__title {
	justify-content: space-between;
	gap: 10px;
}

.jin-child-category-card__count {
	flex: 0 0 auto;
	color: var(--jc-muted);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 700;
}

/* トップのタグライン（V8／M16） */
.jin-child-hero__tagline {
	margin: 0 0 10px;
	color: var(--jc-ink-2);
	font-size: var(--jc-fs-h4);
	font-weight: 700;
	line-height: 1.7;
}

.jin-child-hero__tagline strong {
	color: var(--jc-teal);
}

/* =========================================================
   広告枠（AdSense）。M22：枠の高さを先に確保してCLSを出さない
   ---------------------------------------------------------
   🔒 承認前は functions.php 側が何も出力しない。ここは承認後に
      レイアウトが動かないよう、高さだけ先に決めてある。
   ========================================================= */

.jin-child-ad-slot {
	margin: 2.4em 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--jc-line);
	min-height: 300px; /* 一般的なレクタングルの高さ。差し替えるときはここも合わせる */
	text-align: center;
}

/* 🔒 広告だと分かる表示。本文と見た目を混ぜない（M20-④・M23-⑨） */
.jin-child-ad-slot__label {
	display: block;
	margin-bottom: 6px;
	color: var(--jc-muted);
	font-family: var(--jc-mono);
	font-size: var(--jc-fs-caption);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: left;
}

@media (max-width: 600px) {
	.jin-child-ad-slot { min-height: 280px; }
}

/* =========================================================
   ヘッダーまわりの積み残し（2026-08-06の監査で指摘されたまま残っていたもの）
   ========================================================= */

/* 検索ボタンが豆腐（□）になっていた。JINのアイコンフォントの文字が出ず、
   値だけが残っていたので、フォントを当てずに読める形にする。 */
.search-box #searchsubmit,
.headsearch .search-box #searchsubmit {
	color: transparent !important;
	position: relative;
	text-indent: -9999px;
	overflow: hidden;
}

.search-box #searchsubmit::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 13px;
	margin: -8px 0 0 -8px;
	border: 2px solid currentColor;
	border-radius: 50%;
	color: var(--jc-ink);
	text-indent: 0;
}

.search-box #searchsubmit::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 8px;
	margin: 3px 0 0 3px;
	background: var(--jc-ink-surface);
	transform: rotate(-45deg);
	text-indent: 0;
}

/* サイトタイトルの折り返し対策は**モバイル限定**にする。
   🔒 PCへ word-break:keep-all を当てると、タイトル枠（実測188px）から溢れて
      グローバルナビの「ホーム」と重なった。PCは親テーマの既定のままにする
      （2行に折り返すが、重なりよりは軽い）。監査で指摘されたのは375pxの方。 */

/* =========================================================
   §0-3b Windowsハイコントラスト（forced-colors）
   ---------------------------------------------------------
   OSのハイコントラストが有効だと、ブラウザは **background-color と color を
   システム側の色で上書き**し、**box-shadow は消える**。
   そのため「面の色だけで意味を伝えている箇所」と「影で区切っている箇所」が壊れる。
   対策は①**システム色キーワードを使う**（ButtonFace / ButtonText / LinkText /
   Canvas / CanvasText / Highlight）②**outline を明示**（影は消えるので）。

   このサイトで壊れる可能性があるのは次の3つ。いずれも**罫線を足して**形を残す。
     ・h2の帯（面の色が消えると、ただの太字になる）
     ・レーンのチップ（面と枠の色が消える）
     ・一覧のカード（枠が消えると1件ずつの区切りが無くなる）
   🔒 レーンは**文字ラベル**でも示しているので、色が消えても意味は失われない（M26）。
   ========================================================= */

@media (forced-colors: active) {
	/* 影は消えるので、形は必ず罫線で持たせる */
	html body .jin-child-post-row,
	html body .jin-child-lane,
	html body .jin-child-category-card,
	html body .jin-child-popular,
	html body .jin-child-rank__lane,
	html body .jin-child-post-row__lane,
	html body .cps-post-cat a {
		border: 1px solid CanvasText !important;
	}

	/* h2の帯は面の色が消える。枠で「帯」であることを残す */
	html body .cps-post-main h2 {
		border: 2px solid CanvasText !important;
		background: Canvas !important;
		color: CanvasText !important;
	}

	html body .cps-post-main h3 {
		border-left: 5px solid CanvasText !important;
	}

	/* リンクとフォーカスはシステム色に従う */
	html body .cps-post-main a {
		color: LinkText !important;
	}

	a:focus-visible,
	button:focus-visible,
	input:focus-visible {
		outline: 3px solid Highlight !important;
		outline-offset: 2px;
	}
}

/* =========================================================
   関連記事（RELATED POST）を Swiper なしで並べる
   ---------------------------------------------------------
   🔴 2026-09-08 追加。運営者の指摘「最近の投稿のところ以下が化けてる」。

   何が起きていたか：
     functions.php の jin_child_drop_external_assets() が、個別記事でも
     swiper-style / cps-swiper を dequeue している。その根拠として
     「.swiper-container .swiper-slide が **0要素**。記事・トップでは使われていない」
     と 2026-08-14 に実測したと書いてあるが、**この実測が誤り**だった。
     JIN の RELATED POST は個別記事で li.swiper-slide を出す（実測3件）。
     ライブラリが無いのでカルーセルが初期化されず、
     **カードが列幅いっぱい（740px）で縦に3枚積まれていた**（全記事で発生）。

   なぜ CSS で直すか：
     Swiper を読み込み直すと、外していた外部CDN（cdnjs）への描画ブロックが戻る。
     関連記事はスライドさせる必要が無く、**静的な3列グリッドで十分**なので、
     初期化されないままでも正しく見えるようにする。
     🔒 これなら functions.php の外部依存の削減（規則V20・根拠M30）を保ったまま直せる。

   実測（本番へCSSを注入して確認・2026-09-08）：
     1280px → 3列1行（各235px）／768px → 2列（各232px）／390px → 1列（286px）
     いずれも横あふれ無し。適用前は 740px × 3枚の縦積み。
   ========================================================= */
.related-slide .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	/* Swiper が付ける translate3d が残っていても効かないようにする */
	transform: none !important;
}

.related-slide .swiper-slide {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

/* 動かないので、送り矢印とページャは出さない */
.related-slide .swiper-button-next,
.related-slide .swiper-button-prev,
.related-slide .swiper-pagination {
	display: none !important;
}

@media (max-width: 768px) {
	.related-slide .swiper-wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.related-slide .swiper-wrapper {
		grid-template-columns: 1fr;
	}
}