/* ★@import は他の指定より先に書かないと無視される（CSSの決まり）。
ポータルだけが使う見出し書体をここで読み込む。 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');
/* ═══════════════════════════════════════════════════════════════
theme-dark.css — 従来の濃紺テーマを保つための上書き
■ なぜ必要か
2026-08 に、お客様が見る画面（TOP・購入・クーポン・ブログ等）を
フロント（index-front.php）と同じ「白基調」に統一した。
色は css/style.css の :root にまとめてあるので、そこを白へ変えると
style.css を読んでいる画面はすべて白くなる。
★アフィリエイター専用ポータルも style.css を共有しているため、
何もしないと一緒に白くなってしまう。ポータルは運用者向けの
管理系画面で、今回の統一対象ではない（管理画面と同じ扱い）。
そこで「ポータルだけ従来の濃紺に戻す」ための上書きをここに置く。
■ 使い方
style.css の *後* に読み込むこと（後勝ちで :root を上書きする）。
← この順
■ ポータルも白基調にしたくなったら
各ページからこの1行を外すだけでよい（style.css 側は触らない）。
═══════════════════════════════════════════════════════════════ */
:root {
--bg-base: #070c1a;
--bg-mid: #0d1427;
--bg-card: rgba(255,255,255,0.04);
--bg-card-hover: rgba(255,255,255,0.07);
--gold: #c9a84c;
--gold-light: #e8c96d;
--gold-dim: rgba(201,168,76,0.25);
--gold-glow: rgba(201,168,76,0.12);
--teal: #1a9fa0;
--teal-dim: rgba(26,159,160,0.2);
--text-primary: #f0ede6;
--text-secondary: #8a8d9e;
--text-muted: #52556a;
--border: rgba(201,168,76,0.15);
--border-strong: rgba(201,168,76,0.4);
--shadow: 0 8px 40px rgba(0,0,0,0.5);
--shadow-card: 0 4px 24px rgba(0,0,0,0.3);
/* 主要ボタンは白基調で使う赤オレンジではなく、従来どおり金 */
--cta-from: #c9a84c;
--cta-to: #a8832a;
--cta-text: #070c1a;
--link: #e8c96d;
/* 別名（style.css と同じ名前を、濃紺の実体へ繋ぎ直す） */
--text: var(--text-primary);
--text-2: var(--text-secondary);
--text-3: var(--text-muted);
--ink: var(--text-primary);
--muted: var(--text-muted);
--bg: var(--bg-base);
--line: var(--border);
--danger: #e74c3c;
--red: #e74c3c;
--success: #a8d84a;
/* 見出しの書体も従来のまま（サイト側は Poppins に変えたが、
ポータルは「以前とまったく同じ画面」であることを優先する） */
--font-heading: 'Cinzel', serif;
}
/* ─── 白基調のために style.css 側で変えた実体を、濃紺向けへ戻す ─── */
.nav { background: rgba(7,12,26,0.92); }
.nav-mobile { background: #0c1430; }
.nav-mypage-btn:hover { color: #070c1a; }
.form-input,
.form-select { background: rgba(255,255,255,0.05); }
.card:hover { border-color: rgba(201,168,76,0.3); }
/* ネイティブの選択肢一覧（OSが描く）は濃紺配色に戻す */
.form-select option,
.form-input option,
select option {
color: #f0ede6;
background-color: #131b2e;
}
.form-select option:disabled,
.form-input option:disabled {
color: #0a1020 !important;
background-color: #e2e6ee !important;
}
/* バッジ・アラートの淡色面を、濃紺の上でのコントラストに戻す */
.badge-gold { background: var(--gold-dim); color: var(--gold-light); border: 1px solid var(--border-strong); }
.badge-teal { background: var(--teal-dim); color: var(--teal); border-color: transparent; }
.badge-green { background: rgba(132,192,40,0.15); color: #84c028; border-color: transparent; }
.badge-red { background: rgba(192,57,43,0.15); color: #e74c3c; border-color: transparent; }
.alert-info { background: rgba(26,159,160,0.12); border-color: var(--teal-dim); color: var(--teal); }
.alert-warn { background: rgba(201,168,76,0.1); border-color: var(--border); color: var(--gold-light); }
.alert-success { background: rgba(132,192,40,0.1); border-color: rgba(132,192,40,0.25); color: #a8d84a; }
.alert-error { background: rgba(192,57,43,0.1); border-color: rgba(192,57,43,0.25); color: #e74c3c; }
/* 言語スイッチャー（i18n.css）も濃紺向けへ戻す */
.lang-toggle { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--text-primary); }
.lang-toggle:hover { background: rgba(255,255,255,0.1); border-color: rgba(201,168,76,0.4); }
.lang-menu { background: #1a1d29; border-color: rgba(255,255,255,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.lang-item { color: #d8dae6; }
.lang-item:hover { background: rgba(255,255,255,0.07); }
.lang-item.active { color: #c9a84c; background: rgba(201,168,76,0.1); }