/* ===========================
   Theme System
   =========================== */

:root {
  --sidebar-width: 220px; /* 用途: サイドバー幅 */
  --topbar-height: 56px; /* 用途: トップバー高さ */
  --card-radius: 0.75rem; /* 用途: カード・パネルの角丸半径 */
  --z-topbar: 1030; /* 用途: トップバーの z-index 基準値 */
  --z-sidebar: 1040; /* 用途: サイドバーの z-index 基準値。フルスクリーンモーダル類はこれより必ず上にする */
  --z-notification: 1050; /* 用途: 通知バー/トーストの z-index */
  --z-modal: 2000; /* 用途: フルスクリーンモーダルオーバーレイの z-index。sidebar より上であることが必須 */
  --z-editor-modal: 10000; /* 用途: ピクセルアートエディタ等、最前面に来る特殊モーダルの z-index */
}

/* =============================================
   Theme System - 10 keyboard-inspired themes
   5 Light (Classic Beige, Slate, Sakana, Botanical, Shell White)
   5 Dark  (Carbon, Synthwave, Hacker, Tidal, Viper)
   ============================================= */

/* --- L1: Classic Beige (retro beige keyboard) --- */
[data-theme="light-classic"],
:root {
  --sidebar-bg: #2c2520; /* 用途: サイドバー背景 */
  --sidebar-color: #b8a898; /* 用途: サイドバー文字色 */
  --sidebar-active-color: #fff; /* 用途: サイドバーのアクティブ項目文字色 */
  --sidebar-active-bg: rgba(255,255,255,0.1); /* 用途: サイドバーのアクティブ項目背景 */
  --sidebar-hover-bg: rgba(255,255,255,0.05); /* 用途: サイドバー項目のホバー背景 */
  --sidebar-border: rgba(255,255,255,0.08); /* 用途: サイドバー内の区切り線 */
  --sidebar-profile-bg: rgba(255,255,255,0.06); /* 用途: サイドバー下部のプロフィールカード背景 */
  --sidebar-terms-color: rgba(255,255,255,0.5); /* 用途: サイドバー利用規約テキスト */
  --sidebar-terms-link: rgba(255,255,255,0.55); /* 用途: サイドバー利用規約リンク色 */
  --topbar-bg: rgba(255,252,245,0.92); /* 用途: トップバー背景 */
  --topbar-shadow: 0 1px 3px rgba(80,60,40,0.12); /* 用途: トップバーの影 */
  --body-bg: #f0e8dc; /* 用途: ページ背景色 */
  --body-gradient: radial-gradient(ellipse at 60% 35%, rgba(220,200,160,0.15) 0%, transparent 55%),
                   linear-gradient(150deg, #f2ead8 0%, #ece2d4 100%); /* 用途: ページ背景の装飾グラデーション */
  --accent: #8b1a1a; /* 用途: アクセントカラー（主要ボタン・リンク・強調） */
  --accent-rgb: 139,26,26; /* 用途: アクセントカラーの RGB 値。rgba(var(--accent-rgb), alpha) 用 */
  --key-led: #c03030; /* 用途: キー LED 色（タイピング強調・キーキャップ装飾） */
  --key-led-rgb: 192,48,48; /* 用途: キー LED の RGB 値。rgba(var(--key-led-rgb), alpha) 用 */
  --border-color: #d8ccbc; /* 用途: 汎用ボーダー色 */
  --text-primary: #2c2218; /* 用途: 本文テキスト色 */
  --text-secondary: #534734; /* 用途: 補助テキスト色（primary より一段薄く、muted より濃い） */
  --text-muted: #6e5e48; /* 用途: 弱めのテキスト色（キャプション等。secondary より body-bg 寄り） */
  --card-bg: rgba(255,252,245,0.88); /* 用途: カード・パネル背景 */
  --card-actions-bg: rgba(248,242,232,0.9); /* 用途: カード内アクションバー背景 */
  --code-bg: rgba(244,238,228,0.9); /* 用途: コードブロック背景 */
  --tag-bg: #e4d8c8; /* 用途: タグ・バッジ背景 */
  --error-bg: #fff0f0; /* 用途: エラー表示の背景 */
  --empty-bg: rgba(255,252,245,0.88); /* 用途: 空状態 (EmptyState) の背景 */
  --footer-border: #d0c4b4; /* 用途: フッターのボーダー色 */
  --footer-color: #7a6a58; /* 用途: フッター文字色 */
}

/* --- L2: Slate (professional gray/navy keyboard) --- */
[data-theme="light-slate"] {
  --sidebar-bg: #1c2028;
  --sidebar-color: #8898b0;
  --body-bg: #eaecf0;
  --body-gradient: radial-gradient(ellipse at 55% 40%, rgba(160,170,200,0.08) 0%, transparent 50%),
                   linear-gradient(160deg, #eceef2 0%, #e4e6ee 100%);
  --accent: #2a4a7a;
  --accent-rgb: 42,74,122;
  --key-led: #4a7acc;
  --key-led-rgb: 74,122,204;
  --border-color: #c8ccd4;
  --text-primary: #1c2028;
  --text-secondary: #4a5468;
  --text-muted: #596478;
  --card-bg: rgba(255,255,255,0.88);
  --card-actions-bg: rgba(244,246,250,0.9);
  --code-bg: rgba(240,242,248,0.9);
  --tag-bg: #d8dce6;
  --error-bg: #fff5f5;
  --empty-bg: rgba(255,255,255,0.88);
  --footer-border: #c0c4d0;
  --footer-color: #6a7080;
  /* テーマ調整セマンティック色: ネイビー世界の中で対比を出す。WCAG AA 確保のため danger をより濃紅に */
  --color-danger: #9f1239; --color-danger-rgb: 159,18,57;
  --color-success: #166534; --color-success-rgb: 22,101,52;
  --danger-bg: rgba(159,18,57,0.12);
  --lh-danger: #9f1239; --lh-danger-rgb: 159,18,57;
  --lh-success: #166534; --lh-success-rgb: 22,101,52;
  --lh-warning: #92400e; --lh-warning-rgb: 146,64,14;
  --lh-warning-alt: #b45309; --lh-warning-alt-rgb: 180,83,9;
  --lh-upcoming: #6d28d9; --lh-upcoming-rgb: 109,40,217;
}

/* --- L3: Sakana (Japanese blue/salmon keyboard) --- */
[data-theme="light-sakana"] {
  --sidebar-bg: #182838;
  --sidebar-color: #88a0c0;
  --body-bg: #eff2f8;
  --body-gradient: radial-gradient(ellipse at 65% 30%, rgba(208,96,80,0.06) 0%, transparent 45%),
                   radial-gradient(ellipse at 30% 70%, rgba(80,120,180,0.06) 0%, transparent 50%),
                   linear-gradient(160deg, #f0f3f8 0%, #eaeff6 100%);
  --accent: #b04838;
  --accent-rgb: 176,72,56;
  --key-led: #ff7868;
  --key-led-rgb: 255,120,104;
  --border-color: #c8d0e0;
  --text-primary: #1a2838;
  --text-secondary: #4a5a78;
  --text-muted: #5a6a88;
  --card-bg: rgba(255,255,255,0.88);
  --card-actions-bg: rgba(246,248,254,0.9);
  --code-bg: rgba(242,244,252,0.9);
  --tag-bg: #d8e0f0;
  --error-bg: #fff5f3;
  --empty-bg: rgba(255,255,255,0.88);
  --footer-border: #c0c8d8;
  --footer-color: #6070a0;
  /* テーマ調整セマンティック色: アクセント赤茶と差別化。danger 和の朱、success 苔色、upcoming 濃紫 */
  --color-danger: #9f1239; --color-danger-rgb: 159,18,57;
  --color-success: #166534; --color-success-rgb: 22,101,52;
  --danger-bg: rgba(159,18,57,0.12);
  --lh-danger: #9f1239; --lh-danger-rgb: 159,18,57;
  --lh-success: #166534; --lh-success-rgb: 22,101,52;
  --lh-warning: #92400e; --lh-warning-rgb: 146,64,14;
  --lh-warning-alt: #b45309; --lh-warning-alt-rgb: 180,83,9;
  --lh-upcoming: #6d28d9; --lh-upcoming-rgb: 109,40,217;
}

/* --- L4: Botanical (green/cream keyboard) --- */
[data-theme="light-botanical"] {
  --sidebar-bg: #1a2818;
  --sidebar-color: #88a880;
  --body-bg: #f2f4ec;
  --body-gradient: radial-gradient(ellipse at 45% 50%, rgba(120,170,100,0.08) 0%, transparent 50%),
                   linear-gradient(150deg, #f4f6ec 0%, #eef0e6 100%);
  --accent: #2a6838;
  --accent-rgb: 42,104,56;
  --key-led: #48b858;
  --key-led-rgb: 72,184,88;
  --border-color: #c8d4c0;
  --text-primary: #1a2818;
  --text-secondary: #4a5e44;
  --text-muted: #4a6a42;
  --card-bg: rgba(255,255,252,0.88);
  --card-actions-bg: rgba(248,250,242,0.9);
  --code-bg: rgba(244,248,238,0.9);
  --tag-bg: #d8e4d0;
  --error-bg: #fff5f5;
  --empty-bg: rgba(255,255,252,0.88);
  --footer-border: #c0d0b8;
  --footer-color: #5a7050;
  /* テーマ調整セマンティック色: アクセント緑との被り回避。success はオリーブの濃色で WCAG AA 確保 */
  --color-danger: #b91c1c; --color-danger-rgb: 185,28,28;
  --color-success: #3f6212; --color-success-rgb: 63,98,18;
  --danger-bg: rgba(185,28,28,0.12);
  --lh-danger: #b91c1c; --lh-danger-rgb: 185,28,28;
  --lh-success: #3f6212; --lh-success-rgb: 63,98,18;
  --lh-warning: #92400e; --lh-warning-rgb: 146,64,14;
  --lh-warning-alt: #b45309; --lh-warning-alt-rgb: 180,83,9;
  --lh-upcoming: #6d28d9; --lh-upcoming-rgb: 109,40,217;
}

/* --- L5: Shell White (minimal white keyboard - SIMPLE) --- */
[data-theme="light-shell"] {
  --sidebar-bg: #1a1a1e;
  --sidebar-color: #909098;
  --body-bg: #f6f6f8;
  --body-gradient: linear-gradient(180deg, #f8f8fa 0%, #f2f2f6 100%);
  --accent: #1f2937;
  --accent-rgb: 31,41,55;
  --key-led: #888890;
  --key-led-rgb: 136,136,144;
  --border-color: #dcdce0;
  --text-primary: #1a1a1e;
  --text-secondary: #505058;
  --text-muted: #646468;
  --card-bg: rgba(255,255,255,0.92);
  --card-actions-bg: rgba(248,248,250,0.9);
  --code-bg: rgba(244,244,248,0.9);
  --tag-bg: #e4e4e8;
  --error-bg: #fff5f5;
  --empty-bg: rgba(255,255,255,0.92);
  --footer-border: #d0d0d4;
  --footer-color: #808088;
  /* テーマ調整セマンティック色: ミニマル無彩色 + 白背景。WCAG AA 確保のため濃色寄りで引き締めミニマル感を演出 */
  --color-danger: #b91c1c; --color-danger-rgb: 185,28,28;
  --color-success: #14532d; --color-success-rgb: 20,83,45;
  --danger-bg: rgba(185,28,28,0.12);
  --lh-danger: #b91c1c; --lh-danger-rgb: 185,28,28;
  --lh-success: #14532d; --lh-success-rgb: 20,83,45;
  --lh-warning: #9a3412; --lh-warning-rgb: 154,52,18;
  --lh-warning-alt: #7c2d12; --lh-warning-alt-rgb: 124,45,18;
  --lh-upcoming: #6d28d9; --lh-upcoming-rgb: 109,40,217;
}

/* =============================================
   Player Overlay Variables
   lyrics-scroll / typing-replay 共通
   ============================================= */

/* Light themes: typing area default bg + accent text */
[data-theme="light-classic"],
[data-theme="light-slate"],
[data-theme="light-sakana"],
[data-theme="light-botanical"],
[data-theme="light-shell"] {
  --typing-bg: var(--body-bg);
  --text-on-accent: #fff;
}

/* Light themes: player overlay uses theme-consistent light colors */
[data-theme="light-classic"],
[data-theme="light-slate"],
[data-theme="light-sakana"],
[data-theme="light-botanical"],
[data-theme="light-shell"],
:root {
  --player-surface: rgba(0, 0, 0, 0.04);
  --player-surface-strong: rgba(0, 0, 0, 0.07);
  --player-hover: rgba(0, 0, 0, 0.06);
  --player-border: rgba(0, 0, 0, 0.1);
  --player-scrollbar: rgba(0, 0, 0, 0.12);
  --player-scrollbar-hover: rgba(0, 0, 0, 0.22);
  --player-menu-bg: rgba(255, 255, 255, 0.96);
  --player-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  --player-float-bg: var(--card-bg);
  --player-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  --player-spinner-track: rgba(0, 0, 0, 0.1);
  --card-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15); /* 用途: カードホバー時の浮き上がり影 */
}

/* Dark themes: player overlay retains immersive dark style */
[data-theme="dark-carbon"],
[data-theme="dark-synthwave"],
[data-theme="dark-hacker"],
[data-theme="dark-tidal"],
[data-theme="dark-viper"] {
  /* ダーク系 accent は明色 (橙/マゼンタ/ゴールド/ティール/緑) なのでアクセント上の文字色は黒で WCAG AA 確保 */
  --text-on-accent: #1a1a1a;
  --player-surface: rgba(255, 255, 255, 0.06);
  --player-surface-strong: rgba(255, 255, 255, 0.1);
  --player-hover: rgba(255, 255, 255, 0.08);
  --player-border: rgba(255, 255, 255, 0.08);
  --player-scrollbar: rgba(255, 255, 255, 0.15);
  --player-scrollbar-hover: rgba(255, 255, 255, 0.25);
  --player-menu-bg: rgba(20, 20, 28, 0.96);
  --player-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --player-float-bg: rgba(30, 30, 36, 0.92);
  --player-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  --player-spinner-track: rgba(255, 255, 255, 0.12);
  --card-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.5); /* 用途: カードホバー時の浮き上がり影。ダーク背景上で視認性確保 */
}

/* =============================================
   Interaction Variables
   汎用インタラクション（ホバー等）。テーブル行・カード・リンク・ボタン等で共通利用
   ============================================= */

[data-theme="light-classic"],
[data-theme="light-slate"],
[data-theme="light-sakana"],
[data-theme="light-botanical"],
[data-theme="light-shell"],
:root {
  --hover-bg: rgba(0, 0, 0, 0.05); /* 用途: 汎用ホバー背景（テーブル行・カード・リンク等）。ライト系は黒系、ダーク系は白系の薄い半透明 */
  --bg-secondary: rgba(0, 0, 0, 0.05); /* 用途: 副次パネル・入力欄・プログレスバー溝などの弱い背景。テキストは text-primary を継承する前提 */
  --input-bg: rgba(255, 255, 255, 0.6); /* 用途: 入力フィールド背景。ライト系は白寄り、ダーク系は黒寄り */
  --color-danger: #b91c1c; /* 用途: エラー・危険色テキスト。ライト系は濃赤で視認性確保 */
  --color-danger-rgb: 185, 28, 28;
  --color-success: #166534; /* 用途: 成功色テキスト。ライト系は深緑（body-bg 上で WCAG AA 確保） */
  --color-success-rgb: 22, 101, 52;
  --danger-bg: rgba(185, 28, 28, 0.12); /* 用途: 危険系の薄い背景 */
  /* 用途: ライブイベント関連バッジ・進捗バー色。home 等 live_events.css 非ロードページでも参照されるため theme.css に集約 */
  --lh-success: #166534;
  --lh-success-rgb: 22, 101, 52;
  --lh-danger: #b91c1c;
  --lh-danger-rgb: 185, 28, 28;
  --lh-warning: #92400e;
  --lh-warning-rgb: 146, 64, 14;
  --lh-warning-alt: #b45309;
  --lh-warning-alt-rgb: 180, 83, 9;
  --lh-upcoming: #6d28d9;
  --lh-upcoming-rgb: 109, 40, 217;
  --lh-marker-color: rgba(0, 0, 0, 0.4); /* 用途: 進行バーの閾値マーカー色 */
  --lh-accent: #ca8a04; /* 用途: ピクセルアートコンテスト等のゴールド系 accent。light テーマは濃ゴールド */
  --lh-accent-rgb: 202, 138, 4;
  --lh-track-bg: rgba(0, 0, 0, 0.08); /* 用途: 進行バーや補助バッジの track/chip 背景。light は薄黒、dark は薄白 */
  /* 用途: ライブイベント主催者識別バッジ。テーマ非依存の不透明強色（公式=黄、ユーザー=青）で識別性最大化。テキスト色も対比固定 */
  --lh-official-bg: #ca8a04; --lh-official-fg: #1a1a1a;
  --lh-user-bg: #0e7490; --lh-user-fg: #ffffff;
  /* 用途: メダル色のテキスト用途専用トークン。light テーマでは body 上に WCAG AA 確保のため濃色化。背景用 --medal-gold 等 (application.css) は鮮色のまま維持 */
  --medal-gold-fg: #92670a;
  --medal-silver-fg: #5a5a5e;
  --medal-bronze-fg: #92510e;
  /* 用途: チャンネル属性バッジ。薄背景+濃文字で WCAG AA 確保。light テーマ用 */
  --badge-popular-bg: rgba(255, 59, 48, 0.12);
  --badge-popular-fg: #b91c1c;
  --badge-beginner-bg: rgba(72, 187, 120, 0.12);
  --badge-beginner-fg: #166534;
  --badge-expert-bg: rgba(159, 122, 234, 0.12);
  --badge-expert-fg: #6b21a8;
}

[data-theme="dark-carbon"],
[data-theme="dark-synthwave"],
[data-theme="dark-hacker"],
[data-theme="dark-tidal"],
[data-theme="dark-viper"] {
  --hover-bg: rgba(255, 255, 255, 0.05);
  --bg-secondary: rgba(255, 255, 255, 0.05);
  --input-bg: rgba(0, 0, 0, 0.3);
  --color-danger: #ef4444; /* 用途: エラー・危険色テキスト。ダーク系は明赤 */
  --color-danger-rgb: 239, 68, 68;
  --color-success: #22c55e;
  --color-success-rgb: 34, 197, 94;
  --danger-bg: rgba(239, 68, 68, 0.18);
  /* ライブイベントカラーのダーク系上書き */
  --lh-success: #3fb950;
  --lh-success-rgb: 63, 185, 80;
  --lh-danger: #f85149;
  --lh-danger-rgb: 248, 81, 73;
  --lh-warning: #ffc107;
  --lh-warning-rgb: 255, 193, 7;
  --lh-warning-alt: #ff9800;
  --lh-warning-alt-rgb: 255, 152, 0;
  --lh-upcoming: #c084fc;
  --lh-upcoming-rgb: 192, 132, 252;
  /* ダーク系では --lh-upcoming が薄紫のため、UPCOMING タグの文字を黒側に切り替えて WCAG AA 確保 */
  --tag-upcoming-fg: #1a1a1a;
  --lh-marker-color: rgba(255, 255, 255, 0.3);
  --lh-accent: #ffcc22;
  --lh-accent-rgb: 255, 204, 34;
  --lh-track-bg: rgba(255, 255, 255, 0.1);
  /* ダーク系の主催者識別。鮮黄+黒 / 鮮青+白 で WCAG AA 確保 */
  --lh-official-bg: #ffc107; --lh-official-fg: #1a1a1a;
  --lh-user-bg: #22d3ee; --lh-user-fg: #0a1418;
  /* ダーク系: メダル色テキスト用途は鮮色のまま (背景=暗のため視認性 AAA) */
  --medal-gold-fg: #ffd700;
  --medal-silver-fg: #c0c0c0;
  --medal-bronze-fg: #cd7f32;
  /* ダーク系チャンネル属性バッジ: 薄背景濃く + 明色文字 */
  --badge-popular-bg: rgba(255, 59, 48, 0.18);
  --badge-popular-fg: #fb7185;
  --badge-beginner-bg: rgba(72, 187, 120, 0.18);
  --badge-beginner-fg: #4ade80;
  --badge-expert-bg: rgba(159, 122, 234, 0.18);
  --badge-expert-fg: #c4b5fd;
}

/* =============================================
   命名揺れエイリアス（外部由来コードや旧命名を吸収）
   theme.css 定義済みトークンへの薄いラッパー
   ============================================= */
:root {
  --border: var(--border-color); /* 用途: --border-color のエイリアス */
  --border-default: var(--border-color);
  --border-subtle: var(--border-color);
  --card-border: var(--border-color);
  --accent-color: var(--accent); /* 用途: --accent のエイリアス */
  --accent-primary: var(--accent);
  --primary-color: var(--accent);
  --color-primary: var(--accent);
  --link-color: var(--accent);
  --accent-bg: rgba(var(--accent-rgb), 0.1); /* 用途: アクセント色の薄背景 */
  --text: var(--text-primary); /* 用途: --text-primary のエイリアス */
  --text-color: var(--text-primary);
  --text-tertiary: var(--text-muted);
  --status-text-color: var(--text-primary);
  --bg: var(--body-bg); /* 用途: --body-bg のエイリアス */
  --bg-primary: var(--body-bg);
  --bg-card: var(--card-bg); /* 用途: --card-bg のエイリアス */
  --bg-elevated: var(--card-bg);
  --bg-surface: var(--card-bg);
  --surface-bg: var(--card-bg);
  --surface-color: var(--card-bg);
  --surface-elevated: var(--card-bg);
  --bg-subtle: var(--bg-secondary); /* 用途: --bg-secondary のエイリアス */
  --bg-tertiary: var(--bg-secondary);
  --surface-2: var(--bg-secondary);
  --surface-secondary: var(--bg-secondary);
  --bg-hover: var(--hover-bg); /* 用途: --hover-bg のエイリアス */
  --surface-hover: var(--hover-bg);
  --tag-hover-bg: var(--hover-bg);
  --color-error: var(--color-danger); /* 用途: --color-danger のエイリアス */
  --danger-color: var(--color-danger);
  --danger: var(--color-danger);
  --success-color: var(--color-success);
  --success: var(--color-success);
  --warning-color: var(--color-warning);
  --warning: var(--color-warning);
  --primary: var(--accent);
  --scrollbar: var(--player-scrollbar); /* 用途: --player-scrollbar のエイリアス */
  --star: var(--star-active);
  --star-color-rgb: 255, 183, 0; /* 用途: ★評価のアクティブ色 RGB */
  /* 用途: トップバー検索ボックスのサーフェス色。ライト/ダーク両対応のニュートラル半透明グレー */
  --topbar-search-bg: rgba(128, 128, 128, 0.08);
  --topbar-search-border: rgba(128, 128, 128, 0.15);
  --topbar-search-focus-bg: rgba(128, 128, 128, 0.05);
  --topbar-search-kbd-bg: rgba(128, 128, 128, 0.1);
}

/* =============================================
   Semantic Warning / Gold Tokens
   Beat表示・警告バッジ・ステータス強調に使用
   ============================================= */

[data-theme="light-classic"],
[data-theme="light-slate"],
[data-theme="light-sakana"],
[data-theme="light-botanical"],
[data-theme="light-shell"],
:root {
  --color-warning: #92400e; /* 用途: 警告・注目（Beat/ペンディング等）の文字色。ライト系テーマで視認性確保のため濃色（全 5 light テーマで WCAG AA 4.5+ 確保） */
  --color-warning-rgb: 146, 64, 14; /* 用途: 警告色の RGB 値。rgba(var(--color-warning-rgb), alpha) 用 */
}

[data-theme="dark-carbon"],
[data-theme="dark-synthwave"],
[data-theme="dark-hacker"],
[data-theme="dark-tidal"],
[data-theme="dark-viper"] {
  --color-warning: #fbbf24; /* 用途: 警告・注目の文字色。ダーク系テーマでは明色 */
  --color-warning-rgb: 251, 191, 36;
}

/* =============================================
   Keyboard Pagination Variables
   pagination-plate / keycap 共通
   ============================================= */

/* Light themes: keyboard pagination */
[data-theme="light-classic"],
[data-theme="light-slate"],
[data-theme="light-sakana"],
[data-theme="light-botanical"],
[data-theme="light-shell"],
:root {
  --plate-bg: rgba(255, 255, 255, 0.7);
  --plate-border: rgba(0, 0, 0, 0.1);
  --plate-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --plate-led-gradient: linear-gradient(90deg, transparent, rgba(var(--key-led-rgb), 0.4), transparent);
  --plate-led-opacity: 0.6;
  --keycap-bg: rgba(255, 255, 255, 0.9);
  --keycap-color: var(--text-primary);
  --keycap-border: rgba(0, 0, 0, 0.12);
  --keycap-shadow: rgba(0, 0, 0, 0.1);
  --keycap-shine: rgba(255, 255, 255, 0.8);
  --keycap-active-bg: var(--accent);
  --keycap-active-color: #fff;
  --keycap-active-border: var(--accent);
  --keycap-active-glow: 0 0 8px rgba(var(--key-led-rgb), 0.3);
  --keycap-active-text-glow: 0 0 4px rgba(255, 255, 255, 0.3);
}

/* Dark themes: keyboard pagination */
[data-theme="dark-carbon"],
[data-theme="dark-synthwave"],
[data-theme="dark-hacker"],
[data-theme="dark-tidal"],
[data-theme="dark-viper"] {
  --plate-bg: rgba(0, 0, 0, 0.4);
  --plate-border: rgba(255, 255, 255, 0.08);
  --plate-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  --plate-led-gradient: linear-gradient(90deg, transparent, rgba(var(--key-led-rgb), 0.5), transparent);
  --plate-led-opacity: 0.8;
  --keycap-bg: rgba(255, 255, 255, 0.06);
  --keycap-color: var(--text-primary);
  --keycap-border: rgba(255, 255, 255, 0.1);
  --keycap-shadow: rgba(0, 0, 0, 0.4);
  --keycap-shine: rgba(255, 255, 255, 0.06);
  --keycap-active-bg: rgba(var(--key-led-rgb), 0.2);
  --keycap-active-color: rgb(var(--key-led-rgb));
  --keycap-active-border: rgba(var(--key-led-rgb), 0.5);
  --keycap-active-glow: 0 0 12px rgba(var(--key-led-rgb), 0.3);
  --keycap-active-text-glow: 0 0 6px rgba(var(--key-led-rgb), 0.4);
}

/* --- D1: Carbon (industrial charcoal/orange keyboard) --- */
[data-theme="dark-carbon"] {
  --sidebar-bg: #0e0e10;
  --sidebar-color: #8a8888;
  --sidebar-active-color: #ffd0a0;
  --sidebar-active-bg: rgba(232,116,42,0.1);
  --sidebar-hover-bg: rgba(232,116,42,0.05);
  --sidebar-border: rgba(232,116,42,0.08);
  --sidebar-profile-bg: rgba(232,116,42,0.06);
  --sidebar-terms-color: rgba(220,180,150,0.6);
  --sidebar-terms-link: rgba(220,180,150,0.65);
  --topbar-bg: rgba(18,18,20,0.95);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.4);
  --body-bg: #141416;
  --body-gradient: radial-gradient(ellipse at 65% 30%, rgba(232,116,42,0.08) 0%, transparent 50%),
                   linear-gradient(150deg, #1a1a1c 0%, #121214 100%);
  --accent: #e8742a;
  --accent-rgb: 232,116,42;
  --key-led: #ff8c3c;
  --key-led-rgb: 255,140,60;
  --border-color: #2a2a2e;
  --text-primary: #e0dcd8;
  --text-secondary: #a8a4a0;
  --text-muted: #8a8480;
  --card-bg: rgba(24,24,28,0.88);
  --card-actions-bg: rgba(18,18,22,0.9);
  --code-bg: rgba(14,14,16,0.9);
  --tag-bg: #2a2828;
  --error-bg: #401818;
  --empty-bg: rgba(24,24,28,0.88);
  --footer-border: #2a2a2e;
  --footer-color: #787470;
  /* テーマ調整セマンティック色: 工業オレンジアクセント。color-* と lh-* で値を統一。warning-alt はクラレット赤茶でアクセント橙と差別化 */
  --color-danger: #f87171; --color-danger-rgb: 248,113,113;
  --color-success: #4ade80; --color-success-rgb: 74,222,128;
  --danger-bg: rgba(248,113,113,0.18);
  --lh-danger: #f87171; --lh-danger-rgb: 248,113,113;
  --lh-success: #4ade80; --lh-success-rgb: 74,222,128;
  --lh-warning: #facc15; --lh-warning-rgb: 250,204,21;
  --lh-warning-alt: #d97706; --lh-warning-alt-rgb: 217,119,6;
  --lh-upcoming: #a78bfa; --lh-upcoming-rgb: 167,139,250;
}

/* --- D2: Synthwave (retro synthwave magenta/cyan keyboard) --- */
[data-theme="dark-synthwave"] {
  --sidebar-bg: #0a0818;
  --sidebar-color: #8870a8;
  --sidebar-active-color: #ffb0e0;
  --sidebar-active-bg: rgba(232,72,152,0.1);
  --sidebar-hover-bg: rgba(232,72,152,0.05);
  --sidebar-border: rgba(200,60,160,0.08);
  --sidebar-profile-bg: rgba(200,60,160,0.06);
  --sidebar-terms-color: rgba(200,160,220,0.62);
  --sidebar-terms-link: rgba(200,160,220,0.67);
  --topbar-bg: rgba(14,10,28,0.95);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.5);
  --body-bg: #100e20;
  --body-gradient: radial-gradient(ellipse at 60% 25%, rgba(232,72,152,0.1) 0%, transparent 45%),
                   radial-gradient(ellipse at 30% 70%, rgba(64,216,240,0.06) 0%, transparent 45%),
                   linear-gradient(150deg, #161228 0%, #0e0c1c 100%);
  --accent: #e84898;
  --accent-rgb: 232,72,152;
  --key-led: #e84898;
  --key-led-rgb: 232,72,152;
  --border-color: #2a2040;
  --text-primary: #e0d8f0;
  --text-secondary: #a890c0;
  --text-muted: #8a78a8;
  --card-bg: rgba(20,16,36,0.88);
  --card-actions-bg: rgba(16,12,28,0.9);
  --code-bg: rgba(12,10,22,0.9);
  --tag-bg: #282040;
  --error-bg: #401028;
  --empty-bg: rgba(20,16,36,0.88);
  --footer-border: #282040;
  --footer-color: #705898;
  /* テーマ調整セマンティック色: ネオン世界。danger は赤紫寄り、success はネオン緑、warning はネオン黄、upcoming はマゼンタに近い紫 */
  --color-danger: #ff5577; --color-danger-rgb: 255,85,119;
  --color-success: #4ade80; --color-success-rgb: 74,222,128;
  --danger-bg: rgba(255,85,119,0.18);
  --lh-danger: #ff5577; --lh-danger-rgb: 255,85,119;
  --lh-success: #4ade80; --lh-success-rgb: 74,222,128;
  --lh-warning: #fde047; --lh-warning-rgb: 253,224,71;
  --lh-warning-alt: #fb923c; --lh-warning-alt-rgb: 251,146,60;
  --lh-upcoming: #c084fc; --lh-upcoming-rgb: 192,132,252;
  /* マゼンタ key-led の半透明背景上では同色文字が WCAG NG なので、白寄りピンクに上書き */
  --keycap-active-color: #ffd0e8;
}

/* --- D3: Hacker (minimal black/gold keyboard - SIMPLE) --- */
[data-theme="dark-hacker"] {
  --sidebar-bg: #0a0a0c;
  --sidebar-color: #8a8a92;
  --sidebar-active-color: #d8d0c0;
  --sidebar-active-bg: rgba(200,180,120,0.08);
  --sidebar-hover-bg: rgba(200,180,120,0.04);
  --sidebar-border: rgba(160,150,120,0.06);
  --sidebar-profile-bg: rgba(160,150,120,0.05);
  --sidebar-terms-color: rgba(180,170,150,0.62);
  --sidebar-terms-link: rgba(180,170,150,0.67);
  --topbar-bg: rgba(14,14,16,0.96);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.4);
  --body-bg: #121214;
  --body-gradient: linear-gradient(180deg, #161618 0%, #101012 100%);
  --accent: #b8a060;
  --accent-rgb: 184,160,96;
  --key-led: #c8b070;
  --key-led-rgb: 200,176,112;
  --border-color: #242428;
  --text-primary: #d0ccc4;
  --text-secondary: #989490;
  --text-muted: #888480;
  --card-bg: rgba(20,20,24,0.88);
  --card-actions-bg: rgba(16,16,18,0.9);
  --code-bg: rgba(12,12,14,0.9);
  --tag-bg: #242424;
  --error-bg: #3a1818;
  --empty-bg: rgba(20,20,24,0.88);
  --footer-border: #242428;
  --footer-color: #686460;
  /* テーマ調整セマンティック色: ターミナル感。success はクラシックなターミナル緑、warning はゴールドアクセントと差別化された黄 */
  --color-danger: #ef4444; --color-danger-rgb: 239,68,68;
  --color-success: #4ade80; --color-success-rgb: 74,222,128;
  --danger-bg: rgba(239,68,68,0.18);
  --lh-danger: #ef4444; --lh-danger-rgb: 239,68,68;
  --lh-success: #4ade80; --lh-success-rgb: 74,222,128;
  --lh-warning: #fbbf24; --lh-warning-rgb: 251,191,36;
  --lh-warning-alt: #fb923c; --lh-warning-alt-rgb: 251,146,60;
  --lh-upcoming: #a78bfa; --lh-upcoming-rgb: 167,139,250;
}

/* --- D4: Tidal (deep teal/neon green ocean keyboard) --- */
[data-theme="dark-tidal"] {
  --sidebar-bg: #060e12;
  --sidebar-color: #508a88;
  --sidebar-active-color: #b0f0d8;
  --sidebar-active-bg: rgba(48,240,160,0.08);
  --sidebar-hover-bg: rgba(48,240,160,0.04);
  --sidebar-border: rgba(40,180,130,0.08);
  --sidebar-profile-bg: rgba(40,180,130,0.05);
  --sidebar-terms-color: rgba(120,200,180,0.62);
  --sidebar-terms-link: rgba(120,200,180,0.67);
  --topbar-bg: rgba(10,18,20,0.95);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.4);
  --body-bg: #0a1418;
  --body-gradient: radial-gradient(ellipse at 45% 40%, rgba(48,240,160,0.06) 0%, transparent 50%),
                   radial-gradient(ellipse at 80% 70%, rgba(20,100,80,0.08) 0%, transparent 45%),
                   linear-gradient(160deg, #0e1a1e 0%, #0a1418 50%, #060e10 100%);
  --accent: #28c8a0;
  --accent-rgb: 40,200,160;
  --key-led: #30f0a0;
  --key-led-rgb: 48,240,160;
  --border-color: #1a2e30;
  --text-primary: #c8e8e0;
  --text-secondary: #88b8a8;
  --text-muted: #5a9484;
  --card-bg: rgba(14,24,28,0.88);
  --card-actions-bg: rgba(10,18,22,0.9);
  --code-bg: rgba(8,14,18,0.9);
  --tag-bg: #1a2e2e;
  --error-bg: #3a1520;
  --empty-bg: rgba(14,24,28,0.88);
  --footer-border: #1a2e30;
  --footer-color: #608878;
  /* テーマ調整セマンティック色: ティールアクセントとの被り回避。success は薄緑、warning-alt は深海珊瑚ピンクで海要素を維持 */
  --color-danger: #f87171; --color-danger-rgb: 248,113,113;
  --color-success: #86efac; --color-success-rgb: 134,239,172;
  --danger-bg: rgba(248,113,113,0.16);
  --lh-danger: #f87171; --lh-danger-rgb: 248,113,113;
  --lh-success: #86efac; --lh-success-rgb: 134,239,172;
  --lh-warning: #fbbf24; --lh-warning-rgb: 251,191,36;
  --lh-warning-alt: #fb7185; --lh-warning-alt-rgb: 251,113,133;
  --lh-upcoming: #a78bfa; --lh-upcoming-rgb: 167,139,250;
}

/* --- D5: Viper (gaming black/vivid green keyboard) --- */
[data-theme="dark-viper"] {
  --sidebar-bg: #080a08;
  --sidebar-color: #78a078;
  --sidebar-active-color: #c0ffc0;
  --sidebar-active-bg: rgba(0,255,85,0.08);
  --sidebar-hover-bg: rgba(0,255,85,0.04);
  --sidebar-border: rgba(0,200,50,0.06);
  --sidebar-profile-bg: rgba(0,200,50,0.05);
  --sidebar-terms-color: rgba(120,200,120,0.62);
  --sidebar-terms-link: rgba(120,200,120,0.67);
  --topbar-bg: rgba(12,14,12,0.96);
  --topbar-shadow: 0 1px 4px rgba(0,0,0,0.5);
  --body-bg: #0c0e0c;
  --body-gradient: radial-gradient(ellipse at 50% 40%, rgba(0,255,85,0.05) 0%, transparent 45%),
                   linear-gradient(180deg, #101210 0%, #080a08 100%);
  --accent: #00cc44;
  --accent-rgb: 0,204,68;
  --key-led: #00ff55;
  --key-led-rgb: 0,255,85;
  --border-color: #1a2a1a;
  --text-primary: #d0e0d0;
  --text-secondary: #90a890;
  --text-muted: #6a8a6a;
  --card-bg: rgba(16,20,16,0.88);
  --card-actions-bg: rgba(12,16,12,0.9);
  --code-bg: rgba(10,12,10,0.9);
  --tag-bg: #1a2a1a;
  --error-bg: #3a1518;
  --empty-bg: rgba(16,20,16,0.88);
  --footer-border: #1a2a1a;
  --footer-color: #608060;
  /* テーマ調整セマンティック色: 鮮緑アクセントとの被り回避。success はライム/黄緑寄りで識別 */
  --color-danger: #ef4444; --color-danger-rgb: 239,68,68;
  --color-success: #a3e635; --color-success-rgb: 163,230,53;
  --danger-bg: rgba(239,68,68,0.18);
  --lh-danger: #ef4444; --lh-danger-rgb: 239,68,68;
  --lh-success: #a3e635; --lh-success-rgb: 163,230,53;
  --lh-warning: #facc15; --lh-warning-rgb: 250,204,21;
  --lh-warning-alt: #fb923c; --lh-warning-alt-rgb: 251,146,60;
  --lh-upcoming: #c084fc; --lh-upcoming-rgb: 192,132,252;
}

/* =============================================
   Section Tag / Card Overlay / Rating Tokens
   セクションタグ（HOT/NEW/KIDS）、サムネオーバーレイ、★評価、SEO 番号で共用
   ============================================= */
:root {
  --star-active: #ffb700; /* 用途: ★評価のアクティブ色 */
  --star-inactive: rgba(128, 128, 128, 0.3); /* 用途: ★評価の非アクティブ色 */

  --tag-hot-bg: #dc2626; /* 用途: セクションタグ HOT 背景（人気セクション） */
  --tag-hot-fg: #ffffff; /* 用途: セクションタグ HOT 文字 */
  --tag-new-bg: var(--accent); /* 用途: セクションタグ NEW 背景（新着セクション、テーマアクセント連動） */
  --tag-new-fg: var(--text-on-accent); /* 用途: セクションタグ NEW 文字 */
  --tag-kids-bg: #f59e0b; /* 用途: セクションタグ KIDS 背景（キッズ・初心者セクション） */
  --tag-kids-fg: #ffffff; /* 用途: セクションタグ KIDS 文字 */
  --tag-live-bg: #16a34a; /* 用途: セクションタグ LIVE 背景（開催中ライブイベント） */
  --tag-live-fg: #ffffff; /* 用途: セクションタグ LIVE 文字 */
  --tag-upcoming-bg: var(--lh-upcoming); /* 用途: セクションタグ UPCOMING 背景（開催予定ライブイベント）。--lh-upcoming のテーマ別値を共有 */
  --tag-upcoming-fg: #ffffff; /* 用途: セクションタグ UPCOMING 文字。light テーマのデフォルト（濃紫上の白）。dark テーマでは #1a1a1a に上書き（薄紫上の黒） */

  --card-overlay-bg: rgba(0, 0, 0, 0.78); /* 用途: 動画カードのサムネオーバーレイ背景（時間バッジ・プロフィールのチャンネル名）。サムネ画像の上に載せるため全テーマ共通の暗色 */
  --card-overlay-fg: #f0f0f0; /* 用途: 動画カードオーバーレイ文字色（ライト/ダーク共通） */
  --card-overlay-border: rgba(255, 255, 255, 0.08); /* 用途: 動画カードオーバーレイ枠線 */

  --seo-num-color: var(--text-muted); /* 用途: SEO セクションの項目番号 (01, 02...) 色 */

  --trophy-gold: #ffb700; /* 用途: 動画カードのゴールドトロフィー色 */
  --trophy-gold-rgb: 255, 183, 0; /* 用途: ゴールドトロフィーの RGB 値（rgba()合成用） */
  --trophy-silver: #d0d0d0; /* 用途: 動画カードのシルバートロフィー色 */
  --trophy-silver-rgb: 208, 208, 208; /* 用途: シルバートロフィーの RGB 値（rgba()合成用） */
  --trophy-bronze: #b8722c; /* 用途: 動画カードのブロンズトロフィー色 */
  --trophy-bronze-rgb: 184, 114, 44; /* 用途: ブロンズトロフィーの RGB 値（rgba()合成用） */
  --trophy-white-rgb: 128, 128, 128; /* 用途: CLEARランクの中立グレー RGB 値 */

  /* メダル色（テーマ非依存固定値）。ランキング 1/2/3 位のメダル背景・グラデーション・上の文字色 */
  --medal-gold: #ffd700; /* 用途: ゴールドメダル基本色（メダル背景） */
  --medal-gold-dim: #f0c800; /* 用途: ゴールドメダルのグラデーション終端 */
  --medal-gold-text: #5a3e00; /* 用途: ゴールドメダル背景の上に乗せる文字色 */
  --medal-silver: #c0c0c0; /* 用途: シルバーメダル基本色 */
  --medal-silver-dim: #e8e8e8; /* 用途: シルバーメダルのグラデーション終端 */
  --medal-silver-text: #444; /* 用途: シルバーメダル背景の上に乗せる文字色 */
  --medal-bronze: #cd7f32; /* 用途: ブロンズメダル基本色 */
  --medal-bronze-dim: #e8a060; /* 用途: ブロンズメダルのグラデーション終端 */
  --medal-bronze-text: #fff; /* 用途: ブロンズメダル背景の上に乗せる文字色 */

  /* ブランド・固定ステータス色（テーマ非依存固定値） */
  --youtube-red: #ff0000; /* 用途: YouTube アイコン・「YouTube で開く」リンク（ブランドカラー） */
  --success-green: #22c55e; /* 用途: タイピング成功・rank.great 等の固定グリーン強調 */

  /* 用途: 装飾的な警告色背景の RGB 値（薄い背景・ボーダー・光彩用）。テーマ非依存の鮮黄で UX 識別性優先。
     文字色用途は --color-warning（テーマ別、light で AA 確保のため濃色）を使う */
  --warning-soft-bg-rgb: 255, 193, 7;
  /* 用途: 警告バッジ・ボタンの強い背景色。テーマ非依存の鮮黄 + 黒文字で UX 識別を優先。
     light テーマでは --color-warning が濃オレンジ茶のため、 元 Bootstrap 鮮黄バッジを再現する用途で使う */
  --warning-badge-bg: #ffc107;
  --warning-badge-fg: #000;

  --modal-panel-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); /* 用途: パネル（SEO詳細パネル等）の影 */
}

/* =============================================
   Medal Glow Shadow（テーマ別）
   ライト背景では光彩が薄くなるため alpha を強める
   ============================================= */
[data-theme="light-classic"],
[data-theme="light-slate"],
[data-theme="light-sakana"],
[data-theme="light-botanical"],
[data-theme="light-shell"],
:root {
  --medal-gold-shadow: rgba(255, 215, 0, 0.6); /* 用途: ゴールドメダル box-shadow の光彩。ライト系で視認性を確保するため強め */
}

[data-theme="dark-carbon"],
[data-theme="dark-synthwave"],
[data-theme="dark-hacker"],
[data-theme="dark-tidal"],
[data-theme="dark-viper"] {
  --medal-gold-shadow: rgba(255, 215, 0, 0.4); /* 用途: ゴールドメダル box-shadow の光彩。ダーク系では控えめでも光って見える */
}

/* =============================================
   Shared Custom Icons (used in live events + admin)
   CSS mask-image approach — inherits color from currentColor
   ============================================= */
.icon-penlight,
.icon-uchiwa,
.icon-bouquet,
.icon-firework,
.icon-confetti {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-penlight {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='6' y='0' width='4' height='10' rx='2'/%3E%3Crect x='6.5' y='9' width='3' height='6.5' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='6' y='0' width='4' height='10' rx='2'/%3E%3Crect x='6.5' y='9' width='3' height='6.5' rx='1'/%3E%3C/svg%3E");
}
.icon-uchiwa {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='6.5' r='6'/%3E%3Crect x='6.75' y='11.5' width='2.5' height='4' rx='1.25'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='6.5' r='6'/%3E%3Crect x='6.75' y='11.5' width='2.5' height='4' rx='1.25'/%3E%3C/svg%3E");
}
.icon-bouquet {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='4.8' cy='4' r='2.8'/%3E%3Ccircle cx='11.2' cy='4' r='2.8'/%3E%3Ccircle cx='8' cy='1.8' r='2.8'/%3E%3Ccircle cx='8' cy='5.5' r='2'/%3E%3Cpath d='M4 7.5 L12 7.5 L10.5 15 L5.5 15 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='4.8' cy='4' r='2.8'/%3E%3Ccircle cx='11.2' cy='4' r='2.8'/%3E%3Ccircle cx='8' cy='1.8' r='2.8'/%3E%3Ccircle cx='8' cy='5.5' r='2'/%3E%3Cpath d='M4 7.5 L12 7.5 L10.5 15 L5.5 15 Z'/%3E%3C/svg%3E");
}
.icon-firework {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='7' r='1.5'/%3E%3Cline x1='8' y1='2' x2='8' y2='4.5' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='9.5' x2='8' y2='12' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='3' y1='7' x2='5.5' y2='7' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='10.5' y1='7' x2='13' y2='7' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='4.5' y1='3.5' x2='6' y2='5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='10' y1='9' x2='11.5' y2='10.5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='10' y1='5' x2='11.5' y2='3.5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='4.5' y1='10.5' x2='6' y2='9' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='8' y1='13' x2='8' y2='15.5' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='7' r='1.5'/%3E%3Cline x1='8' y1='2' x2='8' y2='4.5' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='9.5' x2='8' y2='12' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='3' y1='7' x2='5.5' y2='7' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='10.5' y1='7' x2='13' y2='7' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='4.5' y1='3.5' x2='6' y2='5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='10' y1='9' x2='11.5' y2='10.5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='10' y1='5' x2='11.5' y2='3.5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='4.5' y1='10.5' x2='6' y2='9' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='8' y1='13' x2='8' y2='15.5' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
}
.icon-confetti {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='4' height='1.8' rx='.4' transform='rotate(25 3 2.9)'/%3E%3Crect x='9' y='1' width='3.5' height='1.8' rx='.4' transform='rotate(-20 10.75 1.9)'/%3E%3Crect x='10' y='7' width='4' height='1.8' rx='.4' transform='rotate(40 12 7.9)'/%3E%3Crect x='1' y='9' width='3.5' height='1.8' rx='.4' transform='rotate(-30 2.75 9.9)'/%3E%3Crect x='5' y='5.5' width='4' height='1.8' rx='.4' transform='rotate(10 7 6.4)'/%3E%3Crect x='7' y='11' width='4' height='1.8' rx='.4' transform='rotate(-15 9 11.9)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='4' height='1.8' rx='.4' transform='rotate(25 3 2.9)'/%3E%3Crect x='9' y='1' width='3.5' height='1.8' rx='.4' transform='rotate(-20 10.75 1.9)'/%3E%3Crect x='10' y='7' width='4' height='1.8' rx='.4' transform='rotate(40 12 7.9)'/%3E%3Crect x='1' y='9' width='3.5' height='1.8' rx='.4' transform='rotate(-30 2.75 9.9)'/%3E%3Crect x='5' y='5.5' width='4' height='1.8' rx='.4' transform='rotate(10 7 6.4)'/%3E%3Crect x='7' y='11' width='4' height='1.8' rx='.4' transform='rotate(-15 9 11.9)'/%3E%3C/svg%3E");
}

/* =============================================
   ユーティリティクラス
   ERB の inline style を排除するための共通クラス
   JS は target.classList.toggle('is-hidden', cond) で表示制御する
   ============================================= */
.is-hidden { display: none !important; } /* design-allow: bang-important */
.is-inline { display: inline; } /* 用途: form タグ等で inline 配置を強制（ERB の style="display:inline" 代替） */

/* =============================================
   印刷スタイル（インク節約・可読性確保）
   ============================================= */
@media print {
  :root {
    --body-bg: #ffffff;
    --body-gradient: none;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
    --card-bg: #ffffff;
    --border-color: #cccccc;
    --bg-secondary: #f5f5f5;
    --hover-bg: transparent;
  }
  /* design-allow-start: bang-important */
  body { background: #ffffff !important; color: #000000 !important; }
  .sidebar, .admin-sidebar, .topbar, .cookie-consent-banner, .feedback-bar,
  .ad-slot, .pickup-events-scroll-wrapper, .mini-venue,
  .notification-panel, .notification-panel-overlay, .theme-panel, .theme-overlay,
  .live-event-card video {
    display: none !important;
  }
  /* design-allow-end: bang-important */
  a { color: #000000; text-decoration: underline; }
}

/* =============================================
   Forced Colors (Windows ハイコントラスト)
   OS の系統色を尊重しつつ、状態色とフォーカスリングだけ保護
   ============================================= */
@media (forced-colors: active) {
  :root {
    --accent: LinkText;
    --text-primary: CanvasText;
    --text-secondary: CanvasText;
    --text-muted: GrayText;
    --border-color: CanvasText;
    --card-bg: Canvas;
    --body-bg: Canvas;
    --hover-bg: Highlight;
  }
  /* フォーカス可視性を OS 強制色に追従 */
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}