/* ============================================================
 * pages-creative.css ─ 投稿/アーカイブ/問い合わせ系「世界観統一」クリエイティブ層
 *
 * 役割：home-creative.css でトップに確立した編集的世界観
 *      （設計事務所/美術館パンフレット：明朝見出し・等幅ラベル・
 *        細罫線・コーナーブラケット・建築グリッド・静謐）を、
 *        投稿・アーカイブ・検索・404・ラボの棚・お問い合わせの各ページへ波及させる
 *        上書きレイヤー。各ページCSSの「後ろ」に読み込む。
 *
 * 依存：tokens.css / base.css（--color-decor-* / --bracket-* / --font-serif-jp /
 *      --font-mono / .has-brackets / .has-blueprint-grid）／各ページ別CSS。
 *
 * 方針（CLAUDE.md / home-creative.css と整合）：
 *   - 既存クラス名・PHPロジック・DOM構造は壊さない。値の上書きのみ。
 *   - WCAG AA 最優先：muted(#7C8186, 紙地3.49:1)を本文・小文字へ使う箇所は
 *     secondary 以上へ。白×明コッパー(#C9885F)は不採用、文字コッパーは
 *     accent-700(#9E6743)以上 / accent-900。失敗していた #C4781E / #C8654A /
 *     #0BA5A5 / #C97A14 の小テキストを全置換。
 *   - 記事本文（.single-post__body の p / li / 行長・行間）は可読性最優先で温存。
 *     装飾（章番号・ドット・glow）だけ編集トーンへ差し替える。
 *   - グロー（box-shadow:0 0…ネオン）・5色POPドット・塗りピル・
 *     ブランド色ベタ帯・radialグラデ地は中立化（罫線・ブラケット・等幅へ）。
 *   - prefers-reduced-motion で全モーション停止。SP（〜767px）可読死守。
 * ============================================================ */


/* ════════════════════════════════════════════════════════════
 * 0. ページ地：radial グラデ地を静かな紙地＋極薄ブループリント帯へ
 *    （home の section-movement と同じ「製図された紙」の佇まい）
 * ════════════════════════════════════════════════════════════ */
.archive--column,
.page-search,
.page-404,
.archive--ailab,
body.single-resource,
body.single-cpt_resource {
	background: var(--color-bg-primary);
}

/* 一覧/検索/404 の本文先頭に、ごく薄い建築グリッドの導入帯（home の代替表現） */
.archive--column main::before,
.page-search main::before,
.page-404 main::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: clamp(160px, 28vh, 320px);
	background-image:
		linear-gradient(var(--color-decor-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--color-decor-grid) 1px, transparent 1px);
	background-size: var(--space-7) var(--space-7);
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent);
	mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent);
	pointer-events: none;
	z-index: 0;
	opacity: 0.6;
}
.archive--column main,
.page-search main,
.page-404 main {
	position: relative;
}
.archive--column main > *,
.page-search main > *,
.page-404 main > * {
	position: relative;
	z-index: 1;
}


/* ════════════════════════════════════════════════════════════
 * 1. ヒーロー：ブランド色ベタ帯／塗りピル overline を
 *    白ベース＋等幅ラベル＋細罫線の「図録ノンブル」へ
 * ════════════════════════════════════════════════════════════ */

/* ベタ teal グラデ地のKVを白ベースに（パンくずと自然に連続：CLAUDE.md 2026-05-30） */
.column-hero,
.search-hero {
	background: var(--color-bg-primary);
	border-bottom: 1px solid var(--color-decor-hairline);
}

/* overline：塗りピル＋glow ドット → 等幅ラベル＋細い前置き罫線（ピル撤去） */
.column-hero__overline,
.search-hero__overline,
.error-links__title {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	color: var(--color-text-secondary);   /* brand-700 でも可だが、ラベルは静かに */
	gap: var(--space-2);
}
.column-hero__overline::before,
.search-hero__overline::before {
	content: "";
	width: 24px;
	height: 1px;
	border-radius: 0;
	background: var(--color-brand);
	box-shadow: none;                       /* glow 撤去 */
}

/* 見出しは明朝へ（home の各 __title と統一）。インクが紙に沈む multiply */
.column-hero__title,
.search-hero__title,
.search-archive__empty-title,
.error-hero__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tight);
	mix-blend-mode: multiply;
}

/* em 強調：下線ハイライト塗り → 細い下罫線（編集的・色は brand-700 で AA） */
.column-hero__title em,
.search-hero__title em {
	background: none;
	color: var(--color-brand-700);
	padding: 0;
	box-shadow: inset 0 -2px 0 var(--color-brand-300);
}

/* リード文：muted 化していないが secondary 維持を明示 */
.column-hero__lead,
.search-hero__title,
.error-hero__lead {
	color: var(--color-text-secondary);
}

/* 背景巨大タイポ "COLUMN" は残しつつ、明朝へ寄せて編集トーンに */
.column-hero__bg-typo {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
	opacity: 0.05;
}

/* 404 の巨大数字：グラデ塗り抜き文字 → ブランド明朝の堂々一色（編集的） */
.error-hero__code {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--color-brand);
	-webkit-text-fill-color: var(--color-brand);
}

/* 404 「Suggested Pages」見出し：中央の細罫線を hairline トーンへ */
.error-links__title::before,
.error-links__title::after {
	background: var(--color-decor-hairline);
}


/* ════════════════════════════════════════════════════════════
 * 2. カード：影＋角丸＋hover 浮き → 細罫線＋コーナー反応の編集グリッド
 *    （home の bento-cell と同じ「罫線が引かれる」反応）
 * ════════════════════════════════════════════════════════════ */
.column-card,
.search-result,
.error-card {
	border: 1px solid var(--color-decor-hairline);
	border-radius: var(--radius-sm);
	box-shadow: none;
}
.column-card:hover,
.search-result:hover,
.error-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-brand);
	box-shadow: var(--shadow-md);
}

/* カード見出しは明朝へ（一覧でも書体コントラストを効かせる） */
.column-card__title,
.search-result__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}

/* カード上のカテゴリピル：強い影 → 罫線つきの落ち着いた面 */
.column-card__category {
	box-shadow: none;
	border-radius: var(--radius-sm);
}

/* CTA「View →」/ meta の英字：等幅へ寄せて図録トーン */
.column-card__cta,
.search-result__date,
.error-card__arrow,
.column-pagination__item,
.search-pagination__item {
	font-family: var(--font-mono);
	letter-spacing: var(--ls-wide);
}

/* 404 カードアイコン：brand-100 塗り角丸 → 細罫線の小窓＋コーナーブラケット風 */
.error-card__icon {
	background: transparent;
	border: 1px solid var(--color-decor-hairline);
	border-radius: var(--radius-sm);
	color: var(--color-brand-700);
}


/* ════════════════════════════════════════════════════════════
 * 3. WCAG AA：muted(#7C8186=3.49:1) を使う本文/メタ/小文字を secondary へ。
 *    （大文字・装飾アイコンは muted 可だが、テキストは一律 secondary に上げる）
 * ════════════════════════════════════════════════════════════ */
.column-card__meta,
.column-pagination__ellipsis,
.search-result__meta,
.search-archive__empty-desc {
	color: var(--color-text-secondary);
}

/* pagination の disabled：opacity 0.5 だと secondary でも 3.7:1 を割る。
   opacity を上げ、色は secondary 基準にして「無効でも読める」を担保 */
.column-pagination__item--disabled,
.search-pagination__item--disabled {
	color: var(--color-text-secondary);
	opacity: 0.7;
}

/* 検索 mark（ヒット語ハイライト）：accent-100 地に accent-900 文字＝9.27:1 で安全。
   ただし font-weight 700 を維持し、視認性を確保（既存値を尊重） */
.search-result__excerpt mark {
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

/* 種別バッジ：data-type=info は secondary 地に白＝AA。ailab/resource は
   intelligence-700 / action-700 地に白で確保（既存値が AA を満たすため温存） */


/* ════════════════════════════════════════════════════════════
 * 4. ページネーション：角丸 md → sm、hover の brand-100 塗りは維持しつつ
 *    現在地は brand ベタで明快（white on brand = 5.09:1 AA）
 * ════════════════════════════════════════════════════════════ */
.column-pagination__item,
.search-pagination__item {
	border-color: var(--color-decor-hairline);
	border-radius: var(--radius-sm);
}


/* ════════════════════════════════════════════════════════════
 * 5. single-post（コラム/お知らせ/ラボノート）：
 *    本文可読性は温存。装飾だけ編集トーンへ。
 * ════════════════════════════════════════════════════════════ */

/* 5-1. 進捗バー：teal→amber グラデ → ブランド単色（ノイズ削減） */
.single-post__progress-bar {
	background: var(--color-brand);
}

/* 5-2. 記事ヘッダー：タイトルを明朝へ（本文ゴシックとの書体コントラスト） */
.single-post__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tight);
}

/* カテゴリチップ：塗りピル → 細罫線チップ（ホバーで brand 反転は維持） */
.single-post__category {
	background: transparent;
	border: 1px solid var(--color-border-brand);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
}
.single-post__category:hover {
	background: var(--color-brand);
	color: var(--color-text-on-brand);
}

/* メタの英字（投稿日など）／読了時間：等幅化＋AA。
   読了時間の #C4781E(3.08:1) を accent-900 地 accent-100 で安全に */
.single-post__meta {
	font-family: var(--font-mono);
}
.single-post__meta-label {
	color: var(--color-text-secondary);   /* muted → secondary（AA） */
}
.single-post__meta-icon {
	fill: var(--color-text-secondary);
}
.single-post__reading-time {
	background: transparent;
	border: 1px solid var(--color-decor-hairline);
	border-radius: var(--radius-sm);
	color: var(--color-text-secondary);
}
.single-post__updated strong {
	color: var(--color-brand-700);         /* brand(4.52)→brand-700(8.34) で確実 */
}

/* 5-3. アイキャッチ：角丸を控えめに（編集的エッジ） */
.single-post__featured {
	border-radius: var(--radius-sm);
}

/* 5-4. 著者アバター：teal→cyan グラデ → ブランド単色面（cyan 廃止トークン整理） */
.single-post__author-avatar,
.sidebar-author__avatar {
	background: var(--color-brand);
}
.single-post__author-name {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}

/* 5-5. 会社紹介ブロック：薄 teal 塗り → 上下細罫線の編集ブロック */
.single-post__company-intro {
	background: transparent;
	border-radius: 0;
	border-top: 1px solid var(--color-decor-hairline);
	border-bottom: 1px solid var(--color-decor-hairline);
	color: var(--color-text-secondary);
}

/* 5-6. 目次（TOC）：上下 2px brand 帯 → 上下 hairline、ラベルは等幅 */
.single-post__toc {
	border-top: 1px solid var(--color-decor-hairline);
	border-bottom: 1px solid var(--color-decor-hairline);
}
.single-post__toc-title {
	font-family: var(--font-mono);
	color: var(--color-text-secondary);
}
.single-post__toc-list > li > a::before,
.single-post__toc-list a.is-active {
	color: var(--color-brand-700);
}

/* 5-7. 本文 h2：H.01 章番号は等幅で残し、5色POPドット → 細い brand 罫線 */
.single-post__body h2,
.single-post__body h3,
.single-post__body h4 {
	font-family: var(--font-serif-jp);
}
.single-post__body h2::before {
	font-family: var(--font-mono);
	font-weight: var(--fw-medium);
	color: var(--color-brand-700);
	letter-spacing: var(--ls-widest);
}
.single-post__body h2::after {
	width: 56px;
	height: 2px;
	background: var(--color-brand);
	background-image: none;
}

/* h3 番号マーカー：teal→cyan グラデ丸 → ブランド単色丸（cyan 整理） */
.single-post__body h2 + h3::before,
.single-post__body h3::before {
	background: var(--color-brand);
	box-shadow: none;
}
.single-post__body h3 {
	border-bottom: 1px solid var(--color-decor-hairline);
}

/* 本文中リンクの hover：#C4781E(3.08:1) → accent-900(8.58:1) で AA かつ温度感 */
.single-post__body a:not([class*="btn"]):hover {
	color: var(--color-accent-900);
}

/* 引用符 blockquote：serif 引用符は維持、左罫線を brand に統一済 */
.single-post__body blockquote::before {
	font-family: var(--font-serif-jp);
}

/* インラインコード：#C8654A(3.44:1) → accent-900(9.27:1 on surface) で AA */
.single-post__body code:not(pre code) {
	color: var(--color-accent-900);
	background: var(--color-glass-default);
}

/* 5-8. coletlab-marker（蛍光ペン）：amber 半透明は装飾なので維持。
   ただし下地が紙のため文字色は primary 固定（既存） */

/* 5-9. FAQ：Q バッジ／開閉アイコンは brand 維持。is-open 薄塗りも可。 */

/* 5-10. 文中CTA：ラベル等幅化、上下破線は brand 維持 */
.single-post__inline-cta__label,
.single-post__share-title,
.single-post__next-label,
.sidebar-block__title {
	font-family: var(--font-mono);
	font-weight: var(--fw-medium);
	color: var(--color-brand-700);
}
.single-post__inline-cta__icon::before {
	background: none;                       /* radial POP グラデ撤去 */
}
.single-post__inline-cta__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
/* next-label の POP ドット → 細い brand 罫線 */
.single-post__next-label::before {
	width: 24px;
	height: 1px;
	background: var(--color-brand);
	background-image: none;
}

/* 5-11. CTA カード（記事末3枚）：上端 5色グラデ帯 → コーナーブラケット＋細罫線 */
.single-post__cta-card {
	border: 1px solid var(--color-decor-hairline);
	border-radius: var(--radius-sm);
}
.single-post__cta-card::before {
	height: 2px;
	background: var(--color-brand);
}
.single-post__cta-card--highlight::before,
.single-post__cta-card--line::before,
.single-post__cta-card--code-check::before {
	background: var(--color-accent-300);
	opacity: 0.7;
}
.single-post__cta-card-title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
.single-post__cta-card-arrow {
	font-family: var(--font-mono);
	color: var(--color-brand-700);
}
/* highlight（ダーク teal 地）：内部は白系のままで AA 維持 */
.single-post__cta-card--highlight {
	background: linear-gradient(135deg, var(--color-brand-700) 0%, var(--color-brand-900) 100%);
}

/* 5-12. 「次に読む」/関連：影付きカード → 細罫線カード、5色グラデ下線 → brand 罫線 */
.single-post__next-card,
.single-post__related-card {
	border: 1px solid var(--color-decor-hairline);
	border-radius: var(--radius-sm);
}
.single-post__next-card-title,
.single-post__related-title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
.single-post__related-title::before {
	height: 2px;
	background: var(--color-brand);
}
.single-post__next-card-cat,
.single-post__related-card-cat,
.single-post__next-card-meta,
.single-post__related-card-meta {
	font-family: var(--font-mono);
	letter-spacing: var(--ls-wide);
}
.single-post__next-card-meta,
.single-post__related-card-meta {
	color: var(--color-text-secondary);    /* meta は secondary で AA */
}


/* ════════════════════════════════════════════════════════════
 * 6. サイドバー：glow 検索ボックス・POPピル・cyan を編集トーンへ
 * ════════════════════════════════════════════════════════════ */
.sidebar-block,
.sidebar-link {
	border: 1px solid var(--color-decor-hairline);
	border-radius: var(--radius-sm);
	background: var(--color-bg-surface);
}

/* 検索ボックス：teal→teal-900 グラデ面はブランド主張として維持（白文字 AA）。
   送信ボタンの amber(#F4A340) on 白文字は不採用ではないが、ここは brand 文字へ */
.sidebar-search__btn {
	background: var(--color-bg-base);
	color: var(--color-brand-700);
	border-radius: var(--radius-sm);
}
.sidebar-search__btn:hover {
	background: var(--color-brand-100);
}
.sidebar-search__hint {
	color: rgba(255, 255, 255, 0.82);       /* 検索面（ダーク teal）上：AA */
}

/* タグ／カテゴリチップ：amber hover → brand-100 hover、角を立てる */
.sidebar-tag,
.sidebar-cats a {
	border-radius: var(--radius-sm);
	background: var(--color-bg-base);
	color: var(--color-text-secondary);
}
.sidebar-tag:hover {
	background: var(--color-brand-100);
	color: var(--color-brand-700);
}
.sidebar-tag--lg {
	background: var(--color-brand-100);
	color: var(--color-brand-700);
}
.sidebar-tag--md {
	color: var(--color-text-primary);
}

/* ランキング/新着の日付・カテゴリ：muted の小文字を secondary へ（AA） */
.sidebar-recent__date {
	color: var(--color-text-secondary);
}
.sidebar-ranking__cat,
.sidebar-recent__cat {
	color: var(--color-brand-700);
	font-family: var(--font-mono);
}
.sidebar-links__group-label {
	color: var(--color-text-secondary);
	font-family: var(--font-mono);
}
.sidebar-link__desc {
	color: var(--color-text-secondary);
}
.sidebar-link:hover .sidebar-link__icon {
	color: var(--color-brand-100);          /* hover brand 地上で視認 */
}
/* サイドバーリンク左の 5色 inset bar → ブランド単色（POP 配色整理） */
.sidebar-link[href="/lp/ai-geo-writing/"],
.sidebar-link[href="/lp/bizboot-meo/"],
.sidebar-link[href="/lp/instagram-marketing/"],
.sidebar-link[href="/lp/web-marketing-support/"],
.sidebar-link[href="/lp/marketing-copilot/"],
.sidebar-link[href="/resources/"] {
	box-shadow: inset 3px 0 0 var(--color-brand);
}
.sidebar-author__name {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
.sidebar-author__role,
.sidebar-author__bio {
	color: var(--color-text-secondary);
}


/* ════════════════════════════════════════════════════════════
 * 7. ラボノート（cpt_ailab）/ ラボの棚（resource）のアクセント整理
 *    廃止トークン由来の cyan(#0BA5A5=2.69:1) / amber 文字(#C97A14=2.97:1) は
 *    AA を割るので、本文・ラベルの「テキスト」用途を AA 値へ置換。
 *    面（バッジ/グラデ地）に使う分は白文字とのコントラストが取れるため温存。
 * ════════════════════════════════════════════════════════════ */

/* ラボノート：cyan テキスト → intelligence-700(#054F4F 系=brand-700 相当・AA) */
.single-post--ailab .single-post__updated strong,
.single-post--ailab .single-post__related-card-cat,
.single-post--ailab .single-post__next-card-cat,
.single-post--ailab .sidebar-block__title,
.single-post--ailab .single-post__body .ai-lab-substep,
.single-post--ailab .single-post__cta-card-arrow,
.single-post--ailab .single-post__inline-cta__label,
.single-post--ailab .single-post__resource-cta-label,
.single-post--ailab .single-post__resource-cta-arrow {
	color: var(--color-brand-700);
}
/* ラボノート見出しも明朝統一（本文 h2 は §5 で適用済） */
.single-post--ailab .single-post__title {
	font-family: var(--font-serif-jp);
}

/* ラボの棚：amber 文字(#C97A14=2.97:1) → accent-900(#5E3D27=9.27:1 AA) */
.single-post--resource .single-post__updated strong,
.single-post--resource .single-post__related-card-cat,
.single-post--resource .single-post__next-card-cat,
.single-post--resource .sidebar-block__title,
.single-post--resource .single-post__body .ai-lab-substep,
.single-post--resource .single-post__cta-card-arrow,
.single-post--resource .single-post__inline-cta__label,
.single-post--resource .single-post__download-label,
.single-post--resource .single-post__pair-label {
	color: var(--color-accent-900);
}

/* 資料モードの本文メタ・キャプション：muted を secondary へ（AA） */
.single-post__body .ai-lab-meta,
.single-post__body .ai-lab-caption,
.single-post--resource .single-post__body p.ai-lab-caption {
	color: var(--color-text-secondary);
}

/* 資料モード h1/h2/h3：ゴシック extrabold のままだと本文と書体差が出ない。
   見出しは明朝へ寄せ、書体コントラストを効かせる（本文可読性は不変） */
.single-post--resource .single-post__title,
.single-post--resource .single-post__body h2,
.single-post--resource .single-post__body h2.wp-block-heading,
.single-post--resource .single-post__body h3,
.single-post--resource .single-post__body h3.wp-block-heading {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
/* h1 上の teal グラデ短線 → ブランド単色細線 */
.single-post--resource .single-post__title::before {
	background: var(--color-brand);
}


/* ════════════════════════════════════════════════════════════
 * 8. アーカイブ：ラボノート（archive-cpt_ailab）の cyan/POP は
 *    別途 §10 のスコープ上書きで対応（loud spots）。共通分のみここで。
 * ════════════════════════════════════════════════════════════ */
.archive--column .column-archive__summary strong,
.page-search .search-archive__summary strong {
	color: var(--color-text-primary);
}

/* カテゴリピル：塗りピル → 罫線チップ（現在地のみ brand ベタで明快） */
.column-archive__category-pill,
.search-tabs__item {
	border-radius: var(--radius-sm);
	border-color: var(--color-decor-hairline);
}
.search-tabs__count {
	font-family: var(--font-mono);
}


/* ════════════════════════════════════════════════════════════
 * 8-b. ラボノート アーカイブ（archive--ailab / .ailab-*）
 *      Bento KV の cyan glow・radial 青ピンク blob・塗りピルを編集トーンへ。
 *      cyan(rgba 20,212,212)・coral(rgba 231,111,142) のベタ tint を撤去。
 * ════════════════════════════════════════════════════════════ */
.archive--ailab {
	background: var(--color-bg-primary);
}

/* Bento KV セル：cyan/coral radial → 紙地＋細罫線 */
.ailab-bento__cell--hero {
	background: var(--color-bg-surface);
	border-color: var(--color-decor-hairline);
}
.ailab-bento__hero-visual::before {
	background: none;                       /* 青ピンクの blur blob 撤去 */
	filter: none;
}

/* overline ピル＋glow ドット → 等幅ラベル＋細前置き罫線 */
.ailab-bento__overline {
	background: transparent;
	border-radius: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-weight: var(--fw-medium);
	color: var(--color-text-secondary);
}
.ailab-bento__overline::before {
	width: 24px;
	height: 1px;
	border-radius: 0;
	background: var(--color-brand);
	box-shadow: none;
}

/* 見出し明朝化＋ em の塗りハイライト → 細下罫線 */
.ailab-bento__title,
.ailab-archive-list__empty-title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
	mix-blend-mode: multiply;
}
.ailab-bento__title em {
	background: none;
	color: var(--color-brand-700);
	box-shadow: inset 0 -2px 0 var(--color-brand-300);
}
.ailab-bento__lead strong {
	background: none;
	color: var(--color-text-primary);
	box-shadow: inset 0 -2px 0 var(--color-brand-100);
}

/* 記事カード：影 → 細罫線、見出し明朝、meta/tag の muted を secondary（AA） */
.ailab-card {
	border: 1px solid var(--color-decor-hairline);
	border-radius: var(--radius-sm);
	box-shadow: none;
}
.ailab-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-brand);
	box-shadow: var(--shadow-md);
}
.ailab-card__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
.ailab-card__meta,
.ailab-card__tags {
	color: var(--color-text-secondary);
	font-family: var(--font-mono);
}
.ailab-card__cta {
	font-family: var(--font-mono);
	color: var(--color-brand-700);
}
.ailab-archive-pagination__item {
	font-family: var(--font-mono);
	border-color: var(--color-decor-hairline);
	border-radius: var(--radius-sm);
}
.ailab-archive-pagination__item--disabled,
.ailab-archive-pagination__ellipsis {
	color: var(--color-text-secondary);
}
.ailab-archive-pagination__item--disabled {
	opacity: 0.7;
}
.ailab-archive-list__empty-desc {
	color: var(--color-text-secondary);
}


/* ════════════════════════════════════════════════════════════
 * 8-c. ラボの棚（page-resources / .shelf-*）
 *      amber action glow・amber/cyan radial blob・塗りピルを編集トーンへ。
 *      文字色 amber 系は AA を満たす値（accent-900）へ。
 * ════════════════════════════════════════════════════════════ */
.shelf-bento__cell--hero {
	background: var(--color-bg-surface);
	border-color: var(--color-decor-hairline);
}
.shelf-bento__hero-visual::before {
	background: none;
	filter: none;
}

/* overline ピル＋glow → 等幅ラベル＋細前置き罫線（hero/bento/list 共通） */
.shelf-bento__overline,
.shelf-hero__overline,
.shelf-list__overline {
	background: transparent;
	border-radius: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-weight: var(--fw-medium);
	color: var(--color-text-secondary);
}
.shelf-bento__overline::before,
.shelf-hero__overline::before,
.shelf-list__overline::before {
	width: 24px;
	height: 1px;
	border-radius: 0;
	background: var(--color-brand);
	box-shadow: none;
}

/* 見出し明朝化＋ em ハイライト → 細下罫線 */
.shelf-bento__title,
.shelf-hero__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
	mix-blend-mode: multiply;
}
.shelf-bento__title em,
.shelf-hero__title em {
	background: none;
	color: var(--color-accent-900);          /* amber 文字は accent-900=AA */
	box-shadow: inset 0 -2px 0 var(--color-accent-300);
}

/* 資料カード／一覧見出しなど sans-jp の主要見出しを明朝へ寄せる */
.shelf-card__title,
.shelf-list__title,
.shelf-bento__cell-title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}

/* muted の小テキスト（カードメタ・タグ・ページネーション）を secondary へ（AA） */
.shelf-card__meta,
.shelf-card__date,
.shelf-card__tags,
.shelf-pagination__ellipsis {
	color: var(--color-text-secondary);
}
.shelf-pagination__item--disabled {
	color: var(--color-text-secondary);
	opacity: 0.7;
}
.shelf-card,
.shelf-pagination__item {
	border-radius: var(--radius-sm);
}
.shelf-pagination__item {
	font-family: var(--font-mono);
}


/* ════════════════════════════════════════════════════════════
 * 9. お問い合わせ / プライバシー：見出し書体統一＋glow/塗りピル撤去＋AA。
 *    Contact KV は軽量（CLAUDE.md）。本文・フォームの可読性は温存。
 * ════════════════════════════════════════════════════════════ */

/* overline：塗りピル＋glow ドット → 等幅ラベル＋細前置き罫線 */
.contact-hero__overline {
	background: transparent;
	border-radius: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-weight: var(--fw-medium);
	color: var(--color-text-secondary);
}
.contact-hero__overline::before {
	width: 24px;
	height: 1px;
	border-radius: 0;
	background: var(--color-brand);
	box-shadow: none;
}

/* 見出し明朝化 */
.contact-hero__title,
.contact-thanks-hero__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
.contact-hero__bg-typo {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}

/* 補足文・注記の muted を secondary へ（AA：説明文は読ませる） */
.contact-form__submit-note,
.contact-tel__notes,
.contact-form__hint {
	color: var(--color-text-secondary);
}

/* FAQ q-mark 番号：色付き円上で白に（muted のままだと円色で消える） */
.contact-faq__q-mark-num {
	color: var(--color-text-on-brand);
}
/* FAQ 円の open/hover 色：coral(#C8654A) → brand（世界観統一） */
.contact-faq__q:hover .contact-faq__q-mark-svg circle:first-child,
.contact-faq__item[open] .contact-faq__q-mark-svg circle:first-child {
	fill: var(--color-brand);
}

/* thanks カード矢印 muted → secondary（AA） */
.contact-thanks-next__card-arrow {
	color: var(--color-text-secondary);
}

/* プライバシー：overline 等幅化＋見出し明朝化 */
.privacy-hero__overline {
	font-family: var(--font-mono);
	font-weight: var(--fw-medium);
	color: var(--color-text-secondary);
}
.privacy-hero__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}


/* ════════════════════════════════════════════════════════════
 * 10. CSS Scroll-driven（home と同じ「組み上がる」演出・@supports 隔離）
 *     未対応は静止。reduced-motion で全停止。
 * ════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.archive--column main::before,
		.page-search main::before,
		.page-404 main::before {
			animation: pages-blueprint-draw linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
		.column-card,
		.search-result,
		.error-card {
			animation: pages-card-rise linear both;
			animation-timeline: view();
			animation-range: entry 2% cover 16%;
		}
	}
}
@keyframes pages-blueprint-draw {
	from { clip-path: inset(0 0 100% 0); opacity: 0; }
	60%  { opacity: 0.6; }
	to   { clip-path: inset(0 0 0 0); opacity: 0.6; }
}
@keyframes pages-card-rise {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

@media (hover: none) {
	.column-card:hover,
	.search-result:hover,
	.error-card:hover,
	.single-post__next-card:hover,
	.single-post__related-card:hover {
		transform: none;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.archive--column main::before,
	.page-search main::before,
	.page-404 main::before {
		clip-path: none !important;
		opacity: 0.5 !important;
		animation: none !important;
	}
	.column-card,
	.search-result,
	.error-card {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}