/**
 * common.css — コンポーネント共有スタイル（バッジ類）
 *
 * 読み込み順:
 *   <link rel="stylesheet" href="/assets/css/common.css" />
 *   <link rel="stylesheet" href="/assets/css/style.css" />   ← :root / reset / body / ボタン
 *   <link rel="stylesheet" href="/assets/css/admin.css" />   ← 管理画面（任意）
 *
 * 本ファイルの役割:
 *   - レアリティバッジ（.badge-N / .rarity-badge-N など）
 *   - ステータスバッジ（.status-active / .status-sold-out など）
 *
 * CSS 変数・リセット・body・ボタンは style.css に一元化。
 */

/* ── レアリティバッジ ──────────────────────────────────────────────
 * AppUI.rarityBadgeHtml() が生成するクラスに対応。
 * ベースクラス名（"badge" または "rarity-badge"）+ "-{RARITY}" の形式。
 * ─────────────────────────────────────────────────────────────── */

.badge-N,
.rarity-badge-N      { background: var(--rarity-n-bg);      color: var(--rarity-n-fg); }

.badge-R,
.rarity-badge-R      { background: var(--rarity-r-bg);      color: var(--rarity-r-fg); }

.badge-SR,
.rarity-badge-SR     { background: var(--rarity-sr-bg);     color: var(--rarity-sr-fg); }

.badge-SSR,
.rarity-badge-SSR    { background: var(--rarity-ssr-bg);    color: var(--rarity-ssr-fg); }

.badge-LEGEND,
.rarity-badge-LEGEND { background: var(--rarity-legend-bg); color: var(--rarity-legend-fg); }


/* ── ステータスバッジ ─────────────────────────────────────────────── */

.status-active   { background: rgba(34,  197, 94, 0.15); color: #86efac; }
.status-locked   { background: rgba(234, 179,  8, 0.15); color: #fde047; }
.status-sold     { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
.status-sold-out { background: rgba(239,  68,  68, 0.15); color: #fca5a5; }
.status-revoked  { background: rgba(107, 114, 128, 0.15); color: #8b949e; }
.status-cancelled{ background: rgba(239,  68,  68, 0.15); color: #fca5a5; }
.status-expired  { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }