@charset "UTF-8";
/**
 * 記事詳細 2026 — Dark Editorial
 *
 * 記事詳細は YOOtheme Builder ではなく、子テーマの css/custom.css で組まれている
 * （YOOtheme Pro が css/custom.css を自動読み込みする仕様）。
 * custom.css は CSS変数で設計されているため、変数を body.single-post に再定義するだけで
 * 大部分がダークに反転する。custom.css 自体は編集しない:
 *   - 同じファイルが /contents/ でも読み込まれており、触ると影響範囲が広がる
 *   - このファイルを外すだけで元に戻せる
 *
 * 変数で拾えないベタ書きの色（緑系グラデーション等）だけ個別に上書きしている。
 */

body.single-post {
  /* custom.css の :root を上書きする。body に置けば配下すべてに継承される */
  --ink: #EDE8E3;        /* 見出し・強調 */
  --ink-mid: #a8a39e;    /* 本文。15pxの長文なので明るめ（対背景 7.9:1） */
  --ink-light: #888480;  /* 日付・補足（5.4:1） */
  --cream: #0A0909;      /* ページ背景 */
  --warm-white: #161414; /* ボックス背景 */
  --accent: #C8B89A;     /* 元は緑 #2d5a3d */
  /* --accent-light は custom.css で「背景8箇所・文字色1箇所」に使われている。
     半透明にすると文字色用途(.reason-num)が消えるため、不透明の暗いアクセント地にする。 */
  --accent-light: #1f1c18;
  --border: #242020;

  --serif: 'Noto Serif JP', serif;
  --sans: 'Noto Sans JP', sans-serif;
}

/* 記事本文を包む YOOtheme のセクションが明るいままなので合わせる。
   custom.css は body にしか背景を指定しておらず、ここが取り残される。 */
html:has(body.single-post) { background: #0A0909; }

body.single-post .uk-section,
body.single-post .uk-section-default,
body.single-post .uk-section-muted {
  background-color: var(--cream) !important;
  color: var(--ink-mid);
}

/* --accent-light を文字色に使っている唯一の箇所（大きな連番 01/02/03） */
body.single-post .reason-num { color: rgba(200, 184, 154, .42) !important; }

/* ---------- ヘッダー（custom.css の素の nav 指定が YOOtheme のナビに当たっている） ---------- */

body.single-post nav,
body.single-post .uk-navbar,
body.single-post .uk-navbar-container,
body.single-post .tm-header,
body.single-post .tm-header-mobile {
  background: rgba(10, 9, 9, .92) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* 白抜きロゴへ差し替え（YOOtheme が両方出力している） */
body.single-post .uk-logo img:not(.uk-logo-inverse) { display: none !important; }
body.single-post .uk-logo .uk-logo-inverse { display: block !important; }

body.single-post .uk-navbar-nav > li > a,
body.single-post .uk-navbar-toggle { color: var(--ink-light) !important; }
body.single-post .uk-navbar-nav > li > a:hover { color: var(--ink) !important; }

body.single-post .uk-navbar-dropdown {
  background: var(--warm-white) !important;
  border: 1px solid var(--border);
}
body.single-post .uk-navbar-dropdown a { color: var(--ink-light) !important; }

/* ---------- ベタ書きの色を個別に上書き ---------- */

/* カバー画像のプレースホルダー（薄緑のグラデーション） */
body.single-post .cover-img {
  background: linear-gradient(135deg, #1a1817 0%, #14120f 45%, #0d0c0b 100%) !important;
}
body.single-post .cover-img::before {
  background: repeating-linear-gradient(-45deg, transparent, transparent 40px,
              rgba(255, 255, 255, .04) 40px, rgba(255, 255, 255, .04) 41px) !important;
}

/* 見出し帯・ラベルなどの薄緑地 */
body.single-post [style*="#e8f0ea"],
body.single-post .point-box-label { color: var(--ink-light); }

/* ピラミッド図のバー */
body.single-post .pyramid-bar.big { background: #2b2724 !important; }
body.single-post .pyramid-bar.mid { background: #221f1c !important; }
body.single-post .pyramid-bar     { color: var(--ink); }

/* 表のハイライトセル */
body.single-post .do-table td.do-cell { background: rgba(200, 184, 154, .10) !important; }

/* カード類の影は暗背景では効かないので枠線に置き換える */
body.single-post .card,
body.single-post [class*="card"] {
  box-shadow: none !important;
  border-color: var(--border) !important;
}

/* 明るいグラデーションのビジュアル */
body.single-post [style*="linear-gradient(160deg"],
body.single-post .visual-box {
  background: linear-gradient(160deg, #1b1917 0%, #141210 55%, #0e0d0c 100%) !important;
}

/* 進捗バー等の塗り */
body.single-post .bar-fill,
body.single-post [style*="rgba(45,90,61"] { background: rgba(200, 184, 154, .3) !important; }

/* 星は金色のまま暗背景で成立するので触らない（.star-icons #E8A920） */

/* ---------- 画像 ---------- */

body.single-post .post-content img,
body.single-post .cover img {
  border-radius: var(--radius, 2px);
}

/* ---------- フッター ---------- */

body.single-post .uk-section-primary {
  background: #080808 !important;
  color: var(--ink-light) !important;
  border-top: 1px solid var(--border);
}
body.single-post .uk-section-primary a { color: var(--ink-light) !important; }
body.single-post .uk-section-primary a:hover { color: var(--ink) !important; }

/* ---------- 記事下の関連記事・カテゴリー欄（YOOtheme Builder 部分） ---------- */

/* 本文は custom.css が組んでいるので触らない。Builder 側のクラスだけを対象にする。 */

body.single-post .el-title,
body.single-post .uk-h1,
body.single-post .uk-h2,
body.single-post .uk-h3,
body.single-post .uk-h4,
body.single-post .uk-h5 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  color: var(--ink) !important;
}

body.single-post .uk-h6,
body.single-post .el-meta,
body.single-post .uk-text-meta {
  font-family: var(--sans) !important;
  letter-spacing: 2px !important;
  color: var(--accent) !important;
}

body.single-post .el-content,
body.single-post .el-content p {
  color: var(--ink-mid) !important;
}

body.single-post .el-link,
body.single-post .uk-link,
body.single-post .uk-button-text {
  color: var(--ink-light) !important;
}
body.single-post .el-link:hover,
body.single-post .uk-link:hover { color: var(--ink) !important; }

body.single-post .uk-card-default {
  background: var(--warm-white) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

body.single-post .uk-button-primary {
  background: var(--ink) !important;
  color: var(--cream) !important;
  border-color: var(--ink) !important;
}

body.single-post .uk-button-default,
body.single-post .uk-button-secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink-light) !important;
}

body.single-post hr,
body.single-post .uk-hr { border-top-color: var(--border) !important; }

/* 関連記事欄などのクラス無しリンク。テーマ既定の #2d2e33 が暗背景で 1.47:1 になる。
   本文内のリンクは custom.css の担当なので、そちらだけアクセント色に戻す。 */
body.single-post a { color: var(--ink-light); }
body.single-post a:hover { color: var(--ink); }
body.single-post .post-content a { color: var(--accent); }

/* ---------- custom.css にベタ書きされた緑系の残り ---------- */

/* 引用ボックス。薄緑地 #e8f0ea に本文色という組み合わせで、暗背景から浮いていた */
body.single-post .pull-quote {
  background: var(--warm-white) !important;
  border-color: var(--accent) !important;
  color: var(--ink) !important;
}

/* 中の <p> にも緑 #2d5a3d がベタ書きされている（暗背景で 2.31:1） */
body.single-post .pull-quote p {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
}

/* 装飾の引用符も緑 */
body.single-post .pull-quote::before { color: var(--accent) !important; }

/* 記事末尾のCTAボタン。緑地 #2d5a3d に白文字 */
body.single-post .cta-button {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0A0909 !important;
}
body.single-post .cta-button:hover { background: #d8c9ad !important; }