/* =========================================================
   ダークモード（「yozora：デザイン → ダークモード」を「端末の設定に合わせる」にしたとき）
   このファイルは、端末がダークモードのときだけ当たるように読み込む（media 属性で切り替え）。
   色の変数を暗い色に置き換えるだけなので、どのスキンにも効く（ミッドナイトはもともと暗いので読み込まない）。
   ========================================================= */

:root {
	--c-text: #e4e2dd;
	--c-heading: #f2f0eb;
	--c-sub: #a9a59c;
	--c-bg: #16171a;
	--c-bg-soft: #1f2125;
	--c-line: #33363c;
	--c-accent: #7aa7ec;
	--c-on-accent: #111111;
	--c-link: #8db6f2;
	--c-h2-bg: #23262b;
	--c-h2-text: var(--c-heading);
	--c-h2-border: var(--c-accent);
	--c-thumb-frame: var(--c-line);
	--c-thumb-bg: #24262b;
	--c-overlay: rgba(22, 23, 26, .9);
	--pickup-shadow: none;
}

/* スキンごとのアクセント色（暗い背景で読める明るさに） */
body.skin-sunrise { --c-accent: #fb923c; --c-link: #93b4f5; --c-h2-bg: #1f2a44; --c-h2-border: #fb923c; }
body.skin-paper { --c-accent: #7cc4ad; --c-link: #8fd1bc; --c-h2-bg: transparent; --c-bg: #191a18; --c-bg-soft: #20221f; --c-line: #353831; }

/* スキンで白に決め打ちしている所を、暗い色に戻す */
body .card__link, body .side-box { background: var(--c-bg-soft); box-shadow: none; }
body.skin-paper .card:not(.card--pickup) .card__link, body.skin-paper .side-box { background: none; }

/* 画像は少しだけ明るさを落として、まぶしさを抑える */
.entry-content img:not(.yb-product__img) { filter: brightness(.92); }

/* サンライズの強調マーカー（黄色）は、暗い背景用に薄くする */
body.skin-sunrise .entry-content strong { background: linear-gradient(transparent 62%, rgba(255, 214, 0, .22) 62%); }

/* もこもこ：白に決め打ちしている所を暗い色に */
body.skin-mokomoko { --c-accent: #ff8fab; --c-on-accent: #2a1a20; --c-link: #ffa3bb; --c-h2-bg: #3a2830; --c-h2-text: #ffe3ea; --c-h2-border: #6b4050; --c-sky: #1f3440; }
body.skin-mokomoko .toc, body.skin-mokomoko .next-story { background: var(--c-bg-soft); }
body.skin-mokomoko .entry-content h3 { color: #bfe6f7; }
body.skin-mokomoko .entry-content strong { background: linear-gradient(transparent 60%, #5a3442 60%); }

/* マガジン：黒に決め打ちしている線や文字を白に */
body.skin-magazine { --c-accent: #ffd400; --c-on-accent: #111; --c-link: #ffffff; --c-heading: #ffffff; --c-h2-text: #ffffff; --c-h2-border: #ffffff; --cat-default: #3a3a3a; }
body.skin-magazine .brand__name, body.skin-magazine .side-box__title, body.skin-magazine .more a { color: #fff; }
body.skin-magazine .entry-content h2 { border-bottom-color: #fff; }
body.skin-magazine .entry-content h2::before { color: #111; background: var(--c-mark); }
body.skin-magazine .entry-content blockquote, body.skin-magazine .toc, body.skin-magazine .more a { border-color: #fff; }
body.skin-magazine .card--pickup .card__link, body.skin-magazine .side-box, body.skin-magazine .next-story { border-color: #fff; }