/*
 * dark.css — ダークモード用オーバーライド
 * <html class="dark"> が付与された時のみ適用される。
 * コンパイル済み Tailwind (twc.css) に dark: バリアントが含まれないため、
 * サイト内で使用しているユーティリティクラスを .dark 配下で上書きする方式。
 */

.dark { color-scheme: dark; }

/* ── テーマ切替アニメーション ──────────
 * View Transitions API 対応ブラウザ: 画面全体を 1 枚絵としてクロスフェード（要素ごとのズレが出ない）
 * 非対応ブラウザ: 全要素に同一の transition を一時的に付与してフォールバック
 */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .6s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color .6s cubic-bezier(.4, 0, .2, 1),
                border-color     .6s cubic-bezier(.4, 0, .2, 1),
                color            .6s cubic-bezier(.4, 0, .2, 1),
                fill             .6s cubic-bezier(.4, 0, .2, 1),
                stroke           .6s cubic-bezier(.4, 0, .2, 1),
                box-shadow       .6s cubic-bezier(.4, 0, .2, 1),
                filter           .6s cubic-bezier(.4, 0, .2, 1),
                outline-color    .6s cubic-bezier(.4, 0, .2, 1) !important;
    transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: .01ms; }

    html.theme-transition,
    html.theme-transition *,
    html.theme-transition *::before,
    html.theme-transition *::after { transition: none !important; }
}

.dark body {
    background-color: #111827;
    color: #d1d5db;
}

/* ── 背景 ─────────────────────────── */
.dark .bg-white      { background-color: #1f2937; }
.dark .bg-gray-50    { background-color: #374151; }
.dark .bg-gray-100   { background-color: #374151; }
.dark .bg-gray-200   { background-color: #4b5563; }
.dark .bg-gray-300   { background-color: #4b5563; }
.dark .bg-slate-50   { background-color: #111827; }
.dark .bg-slate-100  { background-color: #1e293b; }
.dark .bg-blue-50    { background-color: #1e2c47; }
.dark .bg-blue-100   { background-color: #274067; }
.dark .bg-blue-200   { background-color: #2f4d80; }
.dark .bg-green-50   { background-color: #14301f; }
.dark .bg-amber-50   { background-color: #33270f; }
.dark .bg-black\/5   { background-color: rgba(0, 0, 0, .55); }

/* ── 文字色 ────────────────────────── */
.dark .text-gray-900  { color: #f3f4f6; }
.dark .text-gray-800  { color: #e5e7eb; }
.dark .text-gray-700  { color: #d1d5db; }
.dark .text-gray-600  { color: #9ca3af; }
.dark .text-gray-500  { color: #9ca3af; }
.dark .text-slate-950 { color: #f8fafc; }
.dark .text-slate-900 { color: #f1f5f9; }
.dark .text-slate-800 { color: #e2e8f0; }
.dark .text-slate-700 { color: #cbd5e1; }
.dark .text-slate-600 { color: #94a3b8; }
.dark .text-slate-500 { color: #94a3b8; }
.dark .text-blue-600    { color: #60a5fa; }
.dark .text-blue-700    { color: #93c5fd; }
.dark .text-blue-800    { color: #bfdbfe; }
.dark .text-green-600   { color: #4ade80; }
.dark .text-green-800   { color: #86efac; }
.dark .text-emerald-700 { color: #34d399; }
.dark .text-amber-800   { color: #fcd34d; }
.dark .text-amber-900   { color: #fbbf24; }
.dark .text-red-600     { color: #f87171; }

/* ── ボーダー / 区切り線 ─────────────── */
.dark .border-gray-100  { border-color: #374151; }
.dark .border-gray-200  { border-color: #374151; }
.dark .border-gray-300  { border-color: #4b5563; }
.dark .border-slate-100 { border-color: #334155; }
.dark .border-slate-200 { border-color: #334155; }
.dark .border-slate-300 { border-color: #475569; }
.dark .border-green-200 { border-color: #166534; }
.dark .border-amber-200 { border-color: #92400e; }
.dark .divide-slate-100 > :not(:last-child) { border-color: #334155; }
.dark .divide-slate-200 > :not(:last-child) { border-color: #334155; }
.dark .ring-black\/5 { --tw-ring-color: rgba(255, 255, 255, .1); }

/* ── hover / focus / group-hover ────── */
.dark .hover\:bg-gray-50:hover     { background-color: #374151; }
.dark .hover\:bg-gray-100:hover    { background-color: #374151; }
.dark .hover\:bg-gray-200:hover    { background-color: #4b5563; }
.dark .hover\:bg-slate-100:hover   { background-color: #334155; }
.dark .hover\:bg-blue-50:hover     { background-color: #274067; }
.dark .hover\:bg-blue-200:hover    { background-color: #2f4d80; }
.dark .hover\:text-gray-900:hover  { color: #f3f4f6; }
.dark .hover\:text-gray-500:hover  { color: #cbd5e1; }
.dark .hover\:text-slate-800:hover { color: #e2e8f0; }
.dark .hover\:text-slate-600:hover { color: #cbd5e1; }
.dark .hover\:text-blue-600:hover  { color: #93c5fd; }
.dark .group:hover .group-hover\:text-gray-900 { color: #f3f4f6; }
.dark .focus\:bg-gray-100:focus    { background-color: #374151; }
.dark .focus\:bg-gray-300:focus    { background-color: #4b5563; }
.dark .focus\:text-gray-500:focus  { color: #cbd5e1; }

/* ── フォーム ─────────────────────── */
.dark input,
.dark textarea,
.dark select { color: #e5e7eb; }
.dark ::placeholder { color: #6b7280; }

/* ── 記事本文 ─────────────────────── */
/* twc.css の #post_main 系は CSS 変数直書き（dark: バリアント無し）のため ID 込みで上書き */
.dark #post_main                          { color: #ffffff; }
.dark #post_main p,
.dark #post_main li,
.dark #post_main dt,
.dark #post_main dd,
.dark #post_main blockquote,
.dark #post_main strong,
.dark #post_main b,
.dark #post_main em                       { color: #ffffff; }

/* 見出し: 背景は #1f2937 より少し明るい黒、文字は白 */
.dark #post_main h2                       { background-color: #2d3748; color: #ffffff; }
.dark #post_main h3,
.dark #post_main h4,
.dark #post_main h5,
.dark #post_main h6                       { color: #ffffff; }
.dark #post_main h3:before                { background-color: #64748b; }

/* 本文内リンク / 図表 */
.dark #post_main a:not(:has(img))         { color: #60a5fa; }
.dark #post_main a:not(:has(img)):hover   { color: #93c5fd; }
.dark #post_main figcaption               { color: #9ca3af; }
.dark #post_main .wp-block-quote          { background-color: #1f2937; border-color: #4b5563; }
.dark #post_main .wp-block-separator      { border-color: #4b5563; }
.dark #post_main table                    { color: #ffffff !important; }
.dark #post_main th,
.dark #post_main td                       { border-color: #4b5563 !important; }
.dark #post_main tr                       { border-color: #4b5563 !important; }
.dark #post_main tr:nth-child(odd)        { background-color: #1f2937 !important; }
.dark #post_main tr:nth-child(2n)         { background-color: #273140 !important; }

/* 目次: 背景は透明、枠線は白 */
.dark #toc_container        { background-color: transparent; border-color: #ffffff; }
.dark .toc_title            { color: #ffffff; }
.dark .toc_list > li        { color: #ffffff; }
.dark .toc_list > li a      { color: #e5e7eb; }
.dark .toc_list > li > a    { border-color: #ffffff; }

.dark #post_main p.post-source > a        { color: #9ca3af; }
.dark #post_main p.post-source > a:hover  { color: #d1d5db; }

/* ── SNS シェアボタン ───────────────
 * Threads はロゴが黒のため、ダークモードでも背景は白のまま維持
 */
.dark .sns-threads { background-color: #ffffff; border-color: #d1d5db; }

/* ── ロゴ（ダークグレー文字のため反転） ── */
.dark header img[src*="logo_cb"] { filter: invert(1) hue-rotate(180deg); }

/* ── テーマ切替ボタンのアイコン/ラベル表示制御 ──
 * ライトモード時: 月アイコン + 「ダークモード」ラベル（切り替え先を表示）
 * ダークモード時: 太陽アイコン + 「ライトモード」ラベル
 */
.theme-toggle-sun,
.theme-label-to-light { display: none; }
.dark .theme-toggle-sun      { display: block; }
.dark .theme-toggle-moon     { display: none; }
.dark .theme-label-to-light  { display: inline; }
.dark .theme-label-to-dark   { display: none; }