/* ============================================================
   dark.css — ダークモード専用の没入演出（発光・縁・奥行き）
   [data-mode="dark"] のときのみ適用
   ============================================================ */

[data-mode="dark"] body, body[data-mode="dark"] {
  background:
    radial-gradient(1100px 600px at 16% -8%, color-mix(in oklch, var(--accent) 9%, transparent), transparent 60%),
    var(--c-page);
}

/* ヘッダー下に淡い発光ライン */
[data-mode="dark"] .site-header { box-shadow: 0 1px 0 color-mix(in oklch, var(--accent) 18%, transparent); }
[data-mode="dark"] .brand .glyph,
[data-mode="dark"] .footer-brand .glyph,
[data-mode="dark"] .age-card .glyph { box-shadow: var(--glow); }
[data-mode="dark"] .genre-nav a.is-active { box-shadow: var(--glow); }

/* ヒーロー：上方アクセントのオーロラ */
[data-mode="dark"] .hero h1 em {
  color: transparent; background: linear-gradient(100deg, var(--accent), var(--accent-hover));
  -webkit-background-clip: text; background-clip: text;
}
[data-mode="dark"] .header-search form { background: var(--c-surface-2); }

/* カード：縁取り＋ホバー発光 */
[data-mode="dark"] .card,
[data-mode="dark"] .card-row,
[data-mode="dark"] .cta-block,
[data-mode="dark"] .toc,
[data-mode="dark"] .widget { border: 1px solid var(--c-line); }
[data-mode="dark"] .card:hover,
[data-mode="dark"] .card-row:hover { border-color: color-mix(in oklch, var(--accent) 55%, transparent); box-shadow: var(--shadow-lift), var(--glow); }

/* 強調要素の発光 */
[data-mode="dark"] .section-head .mark,
[data-mode="dark"] .widget-title .mark,
[data-mode="dark"] .article-body h3,
[data-mode="dark"] .points li::before,
[data-mode="dark"] .badge:not(.soft):not(.outline) { box-shadow: var(--glow); }
[data-mode="dark"] .points { border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent); }

/* ランキング No.1 を光る見せ場に */
[data-mode="dark"] .rank-feat { box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent); }
[data-mode="dark"] .rank-feat .no { box-shadow: var(--glow); }
[data-mode="dark"] .rank-item.top1 .rank-no,
[data-mode="dark"] .rank-item.top2 .rank-no,
[data-mode="dark"] .rank-item.top3 .rank-no,
[data-mode="dark"] .pop-item .pno { text-shadow: 0 0 16px color-mix(in oklch, var(--accent) 70%, transparent); }

/* ジャンルタイル */
[data-mode="dark"] .genre-tile { box-shadow: var(--shadow-card), 0 0 0 1px var(--c-line); }
[data-mode="dark"] .genre-tile .label { background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0)); }

/* 画像プレースホルダ暗所トーン */
[data-mode="dark"] .ph { background: repeating-linear-gradient(135deg, #1c1c24 0 11px, #16161d 11px 22px); }

/* CTAボタン発光 */
[data-mode="dark"] .btn-cta { box-shadow: 0 10px 30px -8px var(--accent-shadow), var(--glow); }
[data-mode="dark"] .btn-cta:hover { box-shadow: 0 14px 38px -8px var(--accent-shadow), var(--glow); }

/* 広告・本文・フッター微調整 */
[data-mode="dark"] .ad-slot { background: rgba(255,255,255,.02); border-color: var(--c-line-2); }
[data-mode="dark"] .article-body h2 { border-bottom-color: var(--c-line-2); }
[data-mode="dark"] .sortbar a { background: var(--c-surface-2); }
[data-mode="dark"] .site-footer { background: #0c0c12; }