/* page-single.css — Extracted from style.css (P2-B 2026-09-02) — is_single() priority 102 deps [cocoon-child-style]
 * Source: style.css single block ~339 lines — body.single #sidebar/#main/.cat-label/.cat-link/#toc_container/.entry-content animation disable
 * Unmodified move per Phase2 P2-2
 */

/************************************
** 個別記事ページ（single）
** サイドバー非表示 + 1カラム化（Zenn式白カード準備）
** ※実装日: 2026-08-17 Step 1
************************************/

/* サイドバー非表示（functions.phpのget_sidebar_display_typeフィルターのCSSフォールバック） */
body.single #sidebar,
body.single .sidebar,
body.single aside#sidebar {
  display: none !important;
}

/* メインエリアを全幅化（862.7px → 1207.2px） */
body.single #main,
body.single .main {
  width: 100% !important;
  float: none !important;
}

body.single #content {
  width: 100% !important;
  max-width: 100% !important;
}

body.single .article {
  width: 100% !important;
}

/************************************
** 記事詳細ページ（single）: スクロールアニメーション無効化
** 読むことが目的のページのため、本文ブロックのフェードインを止める
** 対象: css/animation-common.css が全ページに適用する .entry-content 系
** 追加日: 2026-08-17
************************************/
body.single .entry-content h2,
body.single .entry-content .wp-block-columns,
body.single .entry-content .concept-box,
body.single .entry-content .wp-block-quote,
body.single .entry-content .wp-block-separator,
body.single .entry-content .wp-block-group,
body.single .entry-content .wp-block-image {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* 保険: 旧アニメーション（追加CSS ID:41 の .anim-pending / .anim-played）が
   万一クラス付与された場合でもコンテナ自体は非表示にしない */
body.single .entry-content {
  opacity: 1 !important;
  animation: none !important;
}

/************************************
** 個別記事ページ（single）: カテゴリータグ配色統一
** 依頼19: .cat-link を V3 パレットへ統一
** 追加日: 2026-08-19
************************************/
body.single .cat-link {
  background-color: var(--color-fuji-tint) !important; /* #F6F3FB */
  color: var(--color-fuji-deep) !important; /* #5F568E */
  border: 1px solid var(--color-fuji) !important; /* #BBB7DA */
  border-radius: 4px !important;
  padding: 0.2em 0.6em !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

body.single .cat-link:hover {
  background-color: var(--color-fuji-mid) !important; /* #7369A0 */
  color: #ffffff !important;
}

/************************************
** 個別記事ページ（single）: 目次（TOC）背景色統一
** 依頼20: #toc_container を V3 パレットへ統一
** 追加日: 2026-08-19
************************************/
body.single #toc_container {
  background-color: var(--color-bg-fuji) !important; /* #F6F3FB */
  border: 1px solid var(--color-border) !important; /* #DCE6EE */
  border-radius: 8px !important;
  overflow-x: auto !important; /* 390px横溢れ防止 */
}

body.single #toc_container a {
  color: var(--color-link) !important; /* #5F568E */
}

body.single #toc_container a:hover {
  color: var(--color-link-hover) !important; /* #2B6B58 */
}

/************************************
** 個別記事ページ（single）: サムネイル上カテゴリーラベル統一
** Cocoon親テーマが生成する .cat-label を V3 パレットへ統一
** 追加日: 2026-08-19
************************************/
body.single .cat-label {
  background-color: var(--color-fuji-tint) !important; /* #F6F3FB */
  color: var(--color-fuji-deep) !important; /* #5F568E */
  border: 1px solid var(--color-fuji) !important; /* #BBB7DA */
  border-radius: 4px !important;
  font-size: 12px !important; /* 親テーマ既定 9-10px → 可読性下限 12px（フォント刷新後最適化 2026-08-26） */
  opacity: 1 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* 日付メタの可読性下限確保: SPで 10-11.2px まで縮むため 12px に底上げ（同上 2026-08-26） */
body.single .entry-date,
body.single .post-date {
  font-size: 12px;
}

body.single .cat-label:hover {
  background-color: var(--color-fuji-mid) !important; /* #7369A0 */
  color: #ffffff !important;
}


/* モバイル対応 — 30:70横並びはデスクトップのみ、768px以下は縦積み全幅。余白均等は padding:1em で維持 */



/* --- Additional body.single blocks extracted (P2-B continuation) --- */


/* ===== 記事ページ（single）: Zenn式白カード化 ===== */
/* 背景色: V3パレット外の #EBF1F8（意図的。白カードを視覚的に浮かせるため、
   スカイtint #F3FAFD よりわずかに濃い色を使用） */
body.single {
  background-color: #EBF1F8 !important;
}

/* #main の白背景を透過にし、ページ背景 #EBF1F8 を見せる（白カードが浮くための前提） */
body.single #main,
body.single .main {
  background-color: transparent !important;
  border: none !important;
}

/* 白カード: 枠線 + 薄い影で浮き上がり表現 */
body.single #main .article {
  background-color: #ffffff !important;
  border: 1px solid var(--color-border, #DCE6EE) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  padding: 0 !important;
}

/* 本文幅を読みやすい幅に制限（Zenn式中央寄せ） */
body.single #main .entry-content {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* タイトルも中央寄せ（本文幅に合わせる） */
body.single #main .article-header {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 記事フッター（カテゴリ・SNS・footer-meta）も本文幅に合わせて中央寄せ */
body.single #main .article-footer {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== 記事ページ（single）SNSシェアボタン: 2カラム中央寄せ ===== */
/* Cocoonのss-col-6がblock表示のため、2ボタンを中央に並べる */
body.single .sns-share .sns-share-buttons {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

body.single .sns-share .sns-share-buttons .share-button {
  flex: 0 1 auto !important;
  min-width: 160px !important;
}

/* Twitter → X にボタン名を変更 */
body.single .sns-share .twitter-button .button-caption {
  color: transparent !important;
  position: relative !important;
  width: 100% !important;
  text-align: center !important;
}
body.single .sns-share .twitter-button .button-caption::after {
  content: "X / Twitter" !important;
  color: #333 !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
  width: 100% !important;
  text-align: center !important;
}

/************************************
** 記事ページ（single）SNSシェアセクション装飾
** 追加日: 2026-08-17
** 目的: 「シェアする」見出しの無装飾（黒字のみ）を解消
** 適用: body.single の記事下部シェアセクション（ss-bottom）のみ
** 方針: カラーV3「空気の往還」の変数を使用（hexフォールバック付き）
************************************/

/* 1. セクション全体を藤色tintのカードで囲み、白カード内で存在感を出す */
body.single .sns-share.ss-bottom {
  margin: 24px 0;
  padding: 14px 12px;
  background-color: var(--color-bg-fuji, #F6F3FB); /* 藤色tint */
  border: 1px solid var(--color-fuji, #BBB7DA);     /* 藤色base */
  border-radius: 12px;                               /* サイト共通の角丸 */
}

/* 2. 「シェアする」見出し: 左右対称ライン + テキスト中央 */
body.single .sns-share.ss-bottom .sns-share-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--color-fuji-deep, #5F568E); /* 藤色deep */
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* 左装飾ライン */
body.single .sns-share.ss-bottom .sns-share-message::before {
  content: "";
  width: 32px;
  height: 1px;
  background: linear-gradient(270deg, var(--color-fuji, #BBB7DA), transparent);
  letter-spacing: 0;
}

/* 右装飾ライン */
body.single .sns-share.ss-bottom .sns-share-message::after {
  content: "";
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-fuji, #BBB7DA), transparent);
}

/* 3. ボタン: 角丸統一・ホバー演出・フォーカス可視化 */
body.single .sns-share.ss-bottom .sns-share-buttons .share-button {
  height: 44px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
body.single .sns-share.ss-bottom .sns-share-buttons .share-button:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 52, 64, 0.15);
}
body.single .sns-share.ss-bottom .sns-share-buttons .share-button:focus-visible {
  outline: 2px solid var(--color-fuji-mid, #7369A0);
  outline-offset: 2px;
}

/* 4. XボタンをXブランドの黒に変更（旧Twitter青の上書き） */
body.single .sns-share.ss-bottom .twitter-button {
  color: #000000;
  border-color: #000000;
}

/************************************
** 記事詳細ページ: 関連記事エリアのカード化（Step 4）
** #related-entries は白カード(.article)の外側のため、
** 本文と揃えた白カード＋角丸＋影で統一する
************************************/
/* エリア全体を白カード化 */
body.single #related-entries {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1.5em 1.5em 1em;
  margin-bottom: 2em;
}

/* 見出し: サイト共通の h2 見出しスタイルと統一 */
body.single #related-entries .related-entry-heading {
  font-size: 1.4em;
  color: var(--color-main);
  border-bottom: 2px solid var(--color-sky);
  padding: 0.5em 0.8em 0.3em;
  margin: 0 0 1em 0;
}

/* 各カードのリンク領域: 枠線＋角丸＋ホバー演出 */
/* 注: .related-entry-card-wrap 自体が <a> + .a-wrap クラスを持つ */
body.single .rect-vertical-card .related-entry-card-wrap {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.8em;
  margin-bottom: 1em;
  display: block;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body.single .rect-vertical-card .related-entry-card-wrap:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  background-color: #ffffff;
}

/* カード内サムネイル: 角丸 */
body.single .rect-vertical-card .related-entry-card-thumb img {
  border-radius: 6px;
}

/* カード内タイトル: サイトのリンク色に統一 */
body.single .rect-vertical-card .related-entry-card-title a {
  color: var(--color-main);
}
body.single .rect-vertical-card .related-entry-card-title a:hover {
  color: var(--color-link-hover);
}

/* モバイル: 390px以下で関連記事を1カラム化（横溢れ防止） */


/* パンくず: 白カードの左端に左揃え + 余白8pxグリッド・リンク色サイトカラー */
body.single #main #breadcrumb {
  margin: 24px 0;
  font-size: 0.85em;
  color: var(--color-text);
}
body.single #main #breadcrumb a {
  color: var(--color-link);
  text-decoration: none;
}
body.single #main #breadcrumb a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
body.single #main #breadcrumb .sp {
  color: var(--color-border);
}

/* タイトル: 本文幅に合わせた中央寄せ + カラーV3統一 */
body.single .entry-title {
  color: var(--color-fuji-deep, #5F568E);
  font-weight: 700;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  margin-bottom: 16px;
}

/* 7-2: single記事内リンク色を翡翠色deepに変更 */
body.single .entry-content a {
  color: #2B6B58 !important;
}

/* 7-2: 本文内内包要素の横スクロール防止 */
body.single .entry-content img,
body.single .entry-content figure,
body.single .entry-content table,
body.single .entry-content ul,
body.single .entry-content ol {
  max-width: 100%;
  box-sizing: border-box;
}

/* 7-2: コードブロック・pre の横スクロール対応 */
body.single .entry-content pre {
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* moved to css/responsive-768.css:4122+ [768] + css/responsive-480.css:1427+ [480] (plan 1788322173688 → T-01 1788672824824) — SP隔離・PC層はSP用@mediaを置かない */