@charset "utf-8";
/* CSS Document */


/* 基本設定（ダークテーマの変数） */
:root {
    --bg-color: #15202b;        /* 画面外側の背景 */
    --container-bg: #000000;    /* 中央コンテナの背景 */
    --text-color: #ffffff;      /* メイン文字色 */
    --text-muted: #8899a6;      /* サブ文字色 */
    --border-color: #38444d;    /* 枠線の色 */
    --btn-bg: #1c2733;          /* リンクボタンの標準色 */
    --entrance-bg: #eff3f4;     /* 入場ボタンの背景 */
    --entrance-text: #0f1419;   /* 入場ボタンの文字色 */
}

/* ライトテーマ時の変数上書き（白背景モード） */
body.light-theme {
    --bg-color: #f5f8fa;
    --container-bg: #ffffff;
    --text-color: #0f1419;
    --text-muted: #0f1419;      /* ★グレーをやめて、メインと同じくっきりした黒（または濃いグレー #333）に変更 */
    --border-color: #cfd9de;    /* ★枠線のグレーも一段階濃くして、ボタンの輪郭をはっきりさせる */
    --btn-bg: #eff3f4;
    --entrance-bg: #0f1419;
    --entrance-text: #ffffff;
}

/* 各要素のカラー指定を変数に置き換えます */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    /* 変更時のアニメーションを滑らかにする */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.portal-container {
    background-color: var(--container-bg);
    border-color: var(--border-color);
    transition: background-color 0.3s ease;
}

.profile-bio { color: var(--text-muted); }
.brand-link { background-color: var(--btn-bg); color: var(--text-color); }
.entrance-section { border-top-color: var(--border-color); }
.btn-entrance { background-color: var(--entrance-bg); color: var(--entrance-text); }
.cookie-note { color: var(--text-muted); }