/**
 * common.css — 全ページ共通スタイル
 *
 * 読み込み方:
 *   <link rel="stylesheet" href="/common.css" />
 *   ※ ui.js より前、ページ固有の <style> より前に読み込むこと
 *
 * 含まれるスタイル:
 *   - レアリティバッジ（.badge-N / .badge-R / .badge-SR / .badge-SSR / .badge-LEGEND）
 *   - ステータスバッジ（.status-active / .status-sold-out / .status-revoked など）
 *
 * 移行手順:
 *   各 HTML の <style> から下記クラスの定義を削除し、このファイルに一元管理する。
 *   ファイルごとにクラス名が微妙に異なる場合（.rarity-N と .badge-N など）は
 *   どちらか一方に統一してから削除すること。
 */

/* ── レアリティバッジ ──────────────────────────────────────────────
 * AppUI.rarityBadgeHtml() が生成するクラスに対応。
 * ベースクラス名（"badge" または "rarity-badge"）+ "-{RARITY}" の形式。
 *
 * 対象ファイル（削除済みを確認すること）:
 *   auction_mode_switch.html  → .badge.rarity-N など
 *   wholesale_auction.html    → .rarity-badge.rarity-N など
 *   market_mode_switch.html   → .badge-N など
 *   card.html                 → .badge-N など
 *   wholesale_rights.html     → .rarity-badge.rarity-N など
 * ─────────────────────────────────────────────────────────────── */

.badge-N,
.rarity-badge-N      { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }

.badge-R,
.rarity-badge-R      { background: rgba(37,  99,  235, 0.2); color: #93c5fd; }

.badge-SR,
.rarity-badge-SR     { background: rgba(124, 58,  237, 0.2); color: #c4b5fd; }

.badge-SSR,
.rarity-badge-SSR    { background: rgba(234, 179,  8,  0.2); color: #fde047; }

.badge-LEGEND,
.rarity-badge-LEGEND { background: rgba(239,  68, 68,  0.2); color: #fca5a5; }


/* ── ステータスバッジ ───────────────────────────────────────────────
 * market_mode_switch.html / wholesale_rights.html などで使用。
 * ─────────────────────────────────────────────────────────────── */

.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; }