/* ================================================================================
   📋 ファイル名: app/assets/stylesheets/plan_badges.css
   🎯 目的: プランバッジ表示スタイル（Pro/Plus/Standard/Lite + テーマ対応）
   作成日: 2026-02-22
   最終更新: 2026-02-23（ライト/ウッドモード box-shadow 追加）

   ================================================================================
   【リファクタリング基準】CSS専用（コメント行は行数カウントから除外）
   ----------------------------------------------------------------
   現在の行数: 約120行
   判定: ✅ 完璧（500行未満）
   ----------------------------------------------------------------
   基準（CSS専用）:
     1. 500行未満 → 完璧 ✅ ← 現在ここ（約120行）
     2. 800行未満 → 問題なし
     3. 1200行未満 → 注意喚起。リファクタリング要検討 ⚠️
     4. 1200行以上 → リファクタリング必須 🚨
   ================================================================================

   【変更履歴】
     2026-02-22: 初版作成（4プランバッジ + シマーアニメーション + サイドバー用サイズ）
     2026-02-23: ライト/ウッドモード box-shadow テーマオーバーライド追加

   【ジュニアエンジニア向け解説】
     このCSSファイルはプランバッジ（Pro / Plus / Standard / Lite）のスタイルを定義します。
     バッジはサイドバーのロゴ横や、アカウント設定画面に表示されます。

     【バッジの構成】
       - .plan-badge: 全バッジ共通のベーススタイル（角丸、フォント、レイアウト）
       - .plan-badge--pro: Proプラン（ダイヤモンドカラー: アイスブルー系）
       - .plan-badge--plus: Plusプラン（ゴールドカラー: 金色系）
       - .plan-badge--standard: Standardプラン（シルバーカラー: 銀色系）
       - .plan-badge--lite: Liteプラン（ブロンズカラー: 銅色系）
       - .plan-badge::after: シマー（光沢アニメーション）効果

     【テーマ対応方針】（2026-02-23追記）
       バッジ本体の色（background, color, border）はオーナー承認済みの確定仕様のため変更禁止。
       テーマごとに変更するのは box-shadow のみ:
       - ダーク（デフォルト）: 各バッジ固有の色味でシャドウ（例: Proは水色系シャドウ）
       - ライト: 明るい背景上でバッジが溶け込まないようダーク系シャドウ（rgba(0,0,0,x)）
       - ウッド: ダークブラウン系シャドウ（rgba(20,12,6,0.4)）で木目調に統一

   [注意] バッジの色・光沢・アイコンデザインはオーナー承認済みの確定仕様です。
     - テーマ（ダーク/ライト）に依存せず、固定カラーで表示する設計です。
     - CSS変数（var(--xxx)）やメディアクエリによるテーマ切替は意図的に使用していません。
     修正を行う場合は必ずユーザー（オーナー）へ確認を取ってから実施してください。

   【関連ファイル】
     - app/helpers/plan_helper.rb: バッジCSSクラス名・アイコンの生成ヘルパー
     - app/views/shared/_sidebar.html.erb: サイドバーでのバッジ表示箇所
     - app/views/app/accounts/_subscription_section.html.erb: アカウント画面でのバッジ表示
     - spec/assets/stylesheets/plan_badges_theme_css_spec.rb: テーマ対応テスト

   【改善点・リファクタリング方針案】（2026-02-23時点）
     - 現状は約120行で「完璧」判定。当面リファクタリング不要。
     - 新プラン追加時は、プランバリアント(.plan-badge--xxx)とライトモードオーバーライドを追加。
     - ウッドモードは .plan-badge 共通セレクタで対応しているため、新プラン追加時の変更不要。
   ================================================================================ */

/* ========================================
 * ベースバッジスタイル
 * ========================================
 * 全プランバッジに共通するレイアウト・フォント設定。
 * inline-flex で左右にアイコンとテキストを並べる。
 * position: relative + overflow: hidden はシマー効果（::after）のために必要。
 * ======================================== */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
}

/* ========================================
 * シマー（光沢）アニメーション
 * ========================================
 * ::after疑似要素で透明→白→透明のグラデーションを左から右へスライドさせ、
 * メタリックな光沢効果を演出する。3秒周期で無限ループ。
 * 各プランバリアント（--pro等）でグラデーション色を上書きする場合がある。
 * ======================================== */
.plan-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: badge-shimmer 3s ease-in-out infinite;
}

@keyframes badge-shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* ========================================
 * プラン別バリアント（確定仕様: 変更禁止）
 * ========================================
 * 以下4プランの background / color / border / box-shadow は
 * オーナー承認済みの確定仕様です。変更前に必ず確認を取ってください。
 * ======================================== */

/* Diamond (Pro) - ダイヤモンド: アイスブルー系 (#B9F2FF → #E0F7FF) */
.plan-badge--pro {
  background: linear-gradient(135deg, #B9F2FF 0%, #E0F7FF 100%);
  color: #0C4A6E;
  border: 1px solid rgba(185, 242, 255, 0.5);
  box-shadow: 0 2px 8px rgba(185, 242, 255, 0.3);
}

.plan-badge--pro::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 25%,
    rgba(185, 242, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.5) 75%,
    transparent 100%
  );
}

.plan-badge--pro svg {
  color: #0284C7;
}

/* Gold (Plus) - ゴールド: 金色系 (#FFD700 → #FFA500) */
.plan-badge--plus {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #78350F;
  border: 1px solid rgba(255, 215, 0, 0.5);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.plan-badge--plus svg {
  color: #92400E;
}

/* Silver (Standard) - シルバー: 銀色系 (#C0C0C0 → #E8E8E8) */
.plan-badge--standard {
  background: linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 100%);
  color: #374151;
  border: 1px solid rgba(192, 192, 192, 0.5);
  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.3);
}

.plan-badge--standard svg {
  color: #4B5563;
}

/* Bronze (Lite) - ブロンズ: 銅色系 (#CD7F32 → #E8A862) */
.plan-badge--lite {
  background: linear-gradient(135deg, #CD7F32 0%, #E8A862 100%);
  color: #451A03;
  border: 1px solid rgba(205, 127, 50, 0.5);
  box-shadow: 0 2px 8px rgba(205, 127, 50, 0.3);
}

.plan-badge--lite svg {
  color: #78350F;
}

/* バッジ内SVGアイコンのサイズ統一 */
.plan-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ========================================
 * サイドバー用バッジスタイル
 * ========================================
 * サイドバーのロゴ横に表示されるバッジは、通常バッジより小さいサイズで表示。
 * .sidebar-plan-badge 内の .plan-badge を font-size: 10px / padding: 1px 8px に縮小。
 * ======================================== */
.sidebar-plan-badge {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar-plan-badge .plan-badge {
  font-size: 10px;
  padding: 1px 8px;
}

.sidebar-plan-badge .plan-badge svg {
  width: 12px;
  height: 12px;
}

/* ========================================
 * 【2026-02-23追加】ライトモード テーマオーバーライド
 * ========================================
 * ライトモード（背景: #f8f9fa）では、バッジの色味付きシャドウが
 * 白い背景に溶け込んで見えにくくなる問題がある。
 * 特にStandardバッジ（シルバー: #C0C0C0）は白背景との差が小さい。
 *
 * 対策: box-shadow を黒系シャドウ（rgba(0,0,0,x)）に置き換え、
 *       バッジと背景の視覚的分離を確保する。
 *
 * Standardバッジ: opacity 0.15（白背景に最も溶け込みやすいため強め）
 * Pro/Plus/Lite: opacity 0.12（元の色味で十分に区別できるため控えめ）
 *
 * [注意] background / color / border は変更禁止（確定仕様）。
 *        box-shadow のみ変更可。
 * ======================================== */
[data-theme="light"] .plan-badge--standard {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .plan-badge--pro {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .plan-badge--plus {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .plan-badge--lite {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ========================================
 * 【2026-02-23追加】ウッドモード テーマオーバーライド
 * ========================================
 * ウッドモード（背景: #1a1a18、ダークウッド調）では、
 * 全バッジ共通でダークブラウン系シャドウ（rgba(20,12,6,0.4)）を適用。
 * 木目調の暗い背景に自然に馴染むよう、茶色系の深いシャドウを使用。
 *
 * ウッドモードは背景が暗いため、バッジ単位のオーバーライドは不要。
 * .plan-badge 共通セレクタで一括適用する。
 * ======================================== */
[data-theme="wood"] .plan-badge {
  box-shadow: 0 2px 8px rgba(20, 12, 6, 0.4);
}