/* ==============================================================================
 * app/assets/stylesheets/devise_registration.css
 *
 * 概要: Devise新規登録画面専用スタイル。高級感のあるゴールド×ダークテーマの
 *       認証UIをデフォルト・ライト・ウッド3テーマで提供する。
 *
 * 更新日: 2026-03-17
 * リファクタリング基準（CSS）:
 *   1. 500行未満: 完璧
 *   2. 800行未満: 問題なし
 *   3. 1200行未満: 注意喚起。リファクタリング要検討
 *   4. 1200行以上: リファクタリング必須
 * 現在の行数: 約981行（コメント除外: 約880行）→ 要検討 ⚠️
 *
 * 【リファクタリング改善方針案】（2026-03-17記載）
 * ----------------------------------------------------------------
 * 現在916行で「要検討」段階。以下の分割案を検討すること:
 *   案1: テーマ override 部分（L583-1015）を別ファイルに分離
 *         → devise_registration_themes.css（約430行）
 *         → devise_registration.css はコアスタイルのみ（約585行）
 *   案2: セクション14（言語選択ドロップダウン）を accounts_locale_selector.css に統合
 *         → ただしDevise画面専用override があるため、完全統合は困難
 *   推奨: 案1が最もクリーンだが、現時点で1200行未満のため優先度「中」
 * ----------------------------------------------------------------
 *
 * セクション構成:
 *   1. コンテナ・背景パターン  2. カード・グロー効果  3. ヘッダー（ロゴ・タイトル）
 *   4. リンク  5. フォーム入力  6. 必須/任意バッジ
 *   7. 送信ボタン  8. 利用規約  9. パスワード強度バー
 *   10. ライトテーマ対応  11. ウッドテーマ対応  12. レスポンシブ対応
 *   13. 言語選択ドロップダウン（2026-03-16追加）
 *   ※ 旧セクション7「プレミアム特典」は2026-03-17に削除
 *
 * 関連ファイル:
 *   - app/views/devise/registrations/new.html.erb（使用箇所）
 *   - app/assets/stylesheets/accounts_locale_selector.css（ドロップダウン基本スタイル）
 *   - config/initializers/assets.rb（プリコンパイル登録）
 *
 * 変更履歴:
 *   - 2026-02-28: 初版作成（セクション1-13）
 *   - 2026-03-16: セクション14 言語選択ドロップダウン追加（ダーク/ライト/ウッド3テーマ対応）
 *   - 2026-03-17: ヘッダーコメント更新、リファクタリング改善方針案追加
 *   - 2026-03-17: プレミアム特典セクション（旧セクション7）関連スタイル削除
 *       削除対象: .luxury-premium-features, .luxury-features-title,
 *                 .luxury-features-list, .luxury-feature-item, .luxury-feature-icon
 *       Light/Woodテーマの対応overrideも合わせて削除
 *       レスポンシブ対応の.luxury-features-listルールも削除
 *   - 2026-03-20: コメント整備
 *
 * 【対応テーマ】
 *   - ダークモード（デフォルト）: ゴールド #FFD700 × ダーク背景 #0a0a0a
 *   - ライトモード: [data-theme="light"] ゴールド → ブラウンゴールド rgba(180,83,9)
 *   - ウッドモード: [data-theme="wood"] ゴールド → コッパー rgba(200,149,106) + 木目テクスチャ
 *
 * 【ジュニアエンジニア向け解説】
 *   このファイルはDevise（Railsの認証ライブラリ）の新規登録画面のスタイルです。
 *
 *   レイアウト構造:
 *     .luxury-auth-container（全画面背景）
 *       └ .luxury-auth-card（中央配置カード、max-width: 520px）
 *           ├ .luxury-auth-header（ロゴ + タイトル）
 *           ├ form（入力フィールド群）
 *           │   ├ .luxury-form-group（各入力項目）
 *           │   ├ .luxury-password-strength-bar（パスワード強度インジケーター）
 *           │   └ .luxury-submit-btn（送信ボタン）
 *           └ .luxury-tos-section（利用規約チェックボックス）
 *
 *   背景パターン:
 *     radial-gradient を3層重ねてゴールドの光が漂うような背景を作成。
 *     @keyframes で緩やかにアニメーションして高級感を演出しています。
 *
 *   パスワード強度バー:
 *     .luxury-password-strength-bar は入力されたパスワードの強度を
 *     4段階（弱/普通/強/最強）で色分け表示するインジケーターです。
 *     JavaScriptからCSSクラスを動的に変更して色を切り替えます。
 *
 *   テーマ対応:
 *     セクション10（ライト）・11（ウッド）で [data-theme] セレクタを使い、
 *     背景色・テキスト色・アクセント色をテーマごとに上書きしています。
 * ============================================================================== */

/* ========================================
   1. コンテナ: 全画面を覆うダーク背景
   グラデーションとゴールドのradial-gradientパターンで高級感を演出
   ======================================== */
.luxury-auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
  position: relative;
  overflow: hidden;
}

.luxury-auth-bg-pattern {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.03) 0%, transparent 70%);
  background-size: 600px 600px, 800px 800px, 1000px 1000px;
  animation: luxuryPatternFloat 20s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes luxuryPatternFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-20px, -10px) rotate(1deg); }
  50% { transform: translate(15px, -15px) rotate(-1deg); }
  75% { transform: translate(-10px, 10px) rotate(0.5deg); }
}

/* ========================================
   2. カード: ガラスモーフィズム風の認証カード
   backdrop-filterでブラー効果、グロー効果でゴールドの光を演出
   ======================================== */
.luxury-auth-card {
  max-width: 500px;
  width: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 48px 40px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  animation: luxuryCardAppear 0.8s ease-out;
}

@keyframes luxuryCardAppear {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.luxury-auth-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  opacity: 0.6;
  animation: luxuryGlowPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes luxuryGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* ========================================
   3. ヘッダー: ロゴ・タイトル・サブタイトル
   ゴールドグラデーションのテキストとロゴアイコン
   ======================================== */
.luxury-auth-header {
  text-align: center;
  margin-bottom: 40px;
}

.luxury-auth-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  box-shadow:
    0 20px 40px rgba(255, 215, 0, 0.3),
    0 0 0 1px rgba(255, 215, 0, 0.2);
  position: relative;
}

.luxury-auth-logo::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 17px;
  z-index: -1;
  filter: blur(20px);
  opacity: 0.7;
}

.luxury-auth-logo svg {
  width: 36px;
  height: 36px;
}

.luxury-auth-title {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 8px 0;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.luxury-auth-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.luxury-auth-link {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
}

/* ========================================
   4. リンク: ゴールドのアンダーライン付きリンク
   ホバー時にアンダーラインがスライドインするアニメーション
   ======================================== */
.luxury-link {
  color: #FFD700;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.luxury-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
  transition: width 0.3s ease;
}

.luxury-link:hover {
  color: #FFA500;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.luxury-link:hover::after {
  width: 100%;
}

/* ========================================
   5. フォーム入力フィールド
   ダーク背景に半透明の入力欄、フォーカス時にゴールドのボーダー
   ======================================== */
.luxury-auth-form {
  space-y: 24px;
}

.luxury-form-group {
  margin-bottom: 24px;
}

.luxury-form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
   6. 必須/任意バッジ
   【2026-02-23追加】フィールドラベル横に表示されるバッジ
   必須バッジ: ゴールド色（#FFD700）
   任意バッジ: 半透明白色（控えめなデザイン）
   ======================================== */
.luxury-required-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.luxury-optional-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.luxury-input-group {
  position: relative;
}

.luxury-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

.luxury-input-icon svg {
  width: 20px;
  height: 20px;
}

.luxury-input {
  width: 100%;
  padding: 16px 16px 16px 52px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.luxury-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.luxury-input:focus {
  outline: none;
  border-color: rgba(255, 215, 0, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 3px rgba(255, 215, 0, 0.1),
    0 8px 25px rgba(255, 215, 0, 0.1);
}

.luxury-input:focus + .luxury-input-icon {
  color: #FFD700;
}

.luxury-input-hint {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

/* ========================================
   8. 送信ボタン
   ゴールドグラデーション、ホバー時にシマー効果
   【2026-02-23追加】:disabled スタイル（必須フィールド未入力時）
   ======================================== */
.luxury-form-submit {
  margin-top: 32px;
}

.luxury-submit-btn {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #000;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.luxury-submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.luxury-submit-btn:hover::before {
  transform: translateX(100%);
}

.luxury-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(255, 215, 0, 0.4);
}

.luxury-submit-btn:active {
  transform: translateY(0);
}

/* 送信ボタン無効化スタイル（必須フィールド未入力時） */
.luxury-submit-btn:disabled {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 165, 0, 0.3) 100%);
  color: rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.luxury-submit-btn:disabled::before {
  display: none;
}

.luxury-submit-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ========================================
   9. 利用規約: フォーム下部の同意テキスト
   ======================================== */
.luxury-terms-note {
  margin-top: 24px;
  text-align: center;
}

.luxury-terms-note p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

/* ========================================
   10. パスワード強度バー（2025-12-20 追加）
   5段階のカラーバーとテキストでパスワード強度を可視化
   data-strength属性（0-4）で色と幅を制御
   ======================================== */
.password-strength-container {
  margin-top: 12px;
}

.password-strength-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.password-strength-fill {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 3px;
}

.password-strength-fill[data-strength="0"] {
  width: 20%;
  background: linear-gradient(90deg, #DC2626 0%, #B91C1C 100%);
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

.password-strength-fill[data-strength="1"] {
  width: 40%;
  background: linear-gradient(90deg, #F97316 0%, #EA580C 100%);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

.password-strength-fill[data-strength="2"] {
  width: 60%;
  background: linear-gradient(90deg, #EAB308 0%, #CA8A04 100%);
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}

.password-strength-fill[data-strength="3"] {
  width: 80%;
  background: linear-gradient(90deg, #84CC16 0%, #65A30D 100%);
  box-shadow: 0 0 10px rgba(132, 204, 22, 0.5);
}

.password-strength-fill[data-strength="4"] {
  width: 100%;
  background: linear-gradient(90deg, #22C55E 0%, #16A34A 100%);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.password-strength-text {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

.password-strength-text[data-strength="0"] {
  color: #DC2626;
}

.password-strength-text[data-strength="1"] {
  color: #F97316;
}

.password-strength-text[data-strength="2"] {
  color: #EAB308;
}

.password-strength-text[data-strength="3"] {
  color: #84CC16;
}

.password-strength-text[data-strength="4"] {
  color: #22C55E;
}

/* ========================================
   14. 言語選択ドロップダウン（2026-03-16 追加）
   ========================================
   【概要】
   サインアップ画面の言語選択ドロップダウンをDevise登録画面の
   ダークテーマ（ゴールドアクセント #FFD700）に合わせてoverride。
   基本スタイルは accounts_locale_selector.css で定義されている。

   【ジュニアエンジニア向け解説】
   accounts_locale_selector.css にはアカウント設定画面用の
   ドロップダウンスタイルが定義されている。サインアップ画面では
   ダーク背景 + ゴールドアクセントのため、ここで色やボーダーを
   上書きする。.luxury-auth-form で限定することで、アカウント
   設定画面のスタイルには影響しない。

   【テーマ別アクセントカラー】
   - ダーク（デフォルト）: ゴールド #FFD700 / rgba(255, 215, 0, *)
   - ライト: ブラウンゴールド #b45309 / rgba(180, 83, 9, *)
   - ウッド: コッパー #c8956a / rgba(200, 149, 106, *)

   【対象セレクタ】
   - __trigger: ドロップダウンの開閉ボタン
   - __trigger:hover / :focus: インタラクション状態
   - __menu: ドロップダウンメニュー本体
   - __item: メニュー内の各言語項目
   - __item:hover / --active: 選択状態
   - __menu::-webkit-scrollbar-track: スクロールバー

   【テスト】
   spec/assets/stylesheets/devise_registration_theme_css_spec.rb
   ======================================== */
.luxury-auth-form .luxury-locale-dropdown__trigger {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  padding: 16px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.luxury-auth-form .luxury-locale-dropdown__trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 215, 0, 0.4);
}

.luxury-auth-form .luxury-locale-dropdown__trigger:focus {
  outline: none;
  border-color: rgba(255, 215, 0, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 3px rgba(255, 215, 0, 0.1),
    0 8px 25px rgba(255, 215, 0, 0.1);
}

.luxury-auth-form .luxury-locale-dropdown__menu {
  background: linear-gradient(135deg, rgba(30, 30, 35, 0.98) 0%, rgba(20, 20, 25, 0.98) 100%);
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.luxury-auth-form .luxury-locale-dropdown__item {
  color: rgba(255, 255, 255, 0.85);
}

.luxury-auth-form .luxury-locale-dropdown__item:hover {
  background: rgba(255, 215, 0, 0.1);
  color: #fff;
}

.luxury-auth-form .luxury-locale-dropdown__item--active {
  background: rgba(255, 215, 0, 0.15);
  color: #fff;
}

.luxury-auth-form .luxury-locale-dropdown__item--active::after {
  background: #FFD700;
}

.luxury-auth-form .luxury-locale-dropdown__menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

/* ========================================
   11. ライトテーマ対応
   ブラウンゴールド系の配色でライトモードを実現
   ======================================== */

/* ライトテーマ: ゴールド(#FFD700) → ブラウンゴールド(rgba(180,83,9)) に変換 */

/* コンテナ・背景パターン: ダーク → ライトグラデーションに変換 */
[data-theme="light"] .luxury-auth-container {
  background: linear-gradient(135deg, #f0f0f0 0%, #f8f9fa 50%, #ffffff 100%);
}

[data-theme="light"] .luxury-auth-bg-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(180, 83, 9, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(180, 83, 9, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(180, 83, 9, 0.02) 0%, transparent 70%);
}

/* カード・グロー: ガラスモーフィズムの色味をライト化 */
[data-theme="light"] .luxury-auth-card {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .luxury-auth-glow {
  background: radial-gradient(circle, rgba(180, 83, 9, 0.08) 0%, transparent 70%);
}

/* ロゴ・タイトル: ゴールドグラデーション → ブラウンゴールドグラデーションに変換 */
[data-theme="light"] .luxury-auth-logo {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  box-shadow:
    0 20px 40px rgba(180, 83, 9, 0.2),
    0 0 0 1px rgba(180, 83, 9, 0.15);
}

[data-theme="light"] .luxury-auth-logo::before {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
}

[data-theme="light"] .luxury-auth-title {
  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #b45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

[data-theme="light"] .luxury-auth-subtitle {
  color: rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .luxury-auth-link {
  color: rgba(0, 0, 0, 0.55);
}

/* リンク: ゴールド → ブラウンゴールドに変換、アンダーラインも同色 */
[data-theme="light"] .luxury-link {
  color: #b45309;
}

[data-theme="light"] .luxury-link::after {
  background: linear-gradient(90deg, #b45309 0%, #d97706 100%);
}

[data-theme="light"] .luxury-link:hover {
  color: #d97706;
  text-shadow: 0 0 10px rgba(180, 83, 9, 0.3);
}

/* フォーム・入力フィールド: 背景・ボーダー・テキスト色をライト化 */
[data-theme="light"] .luxury-form-label {
  color: rgba(0, 0, 0, 0.85);
}

/* バッジ: ゴールド → ブラウンゴールド系に変換 */
[data-theme="light"] .luxury-required-badge {
  color: #b45309;
  background: rgba(180, 83, 9, 0.1);
  border: 1px solid rgba(180, 83, 9, 0.25);
}

[data-theme="light"] .luxury-optional-badge {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .luxury-input-icon {
  color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .luxury-input {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #1a1a2e;
}

[data-theme="light"] .luxury-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .luxury-input:focus {
  border-color: rgba(180, 83, 9, 0.5);
  background: rgba(0, 0, 0, 0.02);
  box-shadow:
    0 0 0 3px rgba(180, 83, 9, 0.1),
    0 8px 25px rgba(180, 83, 9, 0.1);
}

[data-theme="light"] .luxury-input:focus + .luxury-input-icon {
  color: #b45309;
}

[data-theme="light"] .luxury-input-hint {
  color: rgba(0, 0, 0, 0.55);
}

/* 送信ボタン: ゴールドグラデーション → ブラウンゴールドグラデーション、テキスト白に変換 */
[data-theme="light"] .luxury-submit-btn {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  color: #fff;
  box-shadow: 0 8px 25px rgba(180, 83, 9, 0.2);
}

[data-theme="light"] .luxury-submit-btn:hover {
  box-shadow: 0 12px 35px rgba(180, 83, 9, 0.3);
}

[data-theme="light"] .luxury-submit-btn:disabled {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.3) 0%, rgba(217, 119, 6, 0.3) 100%);
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .luxury-terms-note p {
  color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .password-strength-bar {
  background: rgba(0, 0, 0, 0.08);
}

/* ========================================
   12. ウッドテーマ対応
   銅色系の配色と木目テクスチャで温かみのあるUIを実現
   ======================================== */

/* ウッドテーマ: ゴールド(#FFD700) → コッパー(rgba(200,149,106)/#c8956a) に変換 */
/* ウッドテーマ: 背景に var(--wood-grain-card) テクスチャを適用 */

/* コンテナ・背景パターン: ダーク → ウッド系ダークブラウンに変換 */
[data-theme="wood"] .luxury-auth-container {
  background: linear-gradient(135deg, #1a1714 0%, #2a2520 50%, #342e28 100%);
}

[data-theme="wood"] .luxury-auth-bg-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(200, 149, 106, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(200, 149, 106, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(200, 149, 106, 0.03) 0%, transparent 70%);
}

/* カード: コッパー系半透明背景に木目テクスチャを適用 */
[data-theme="wood"] .luxury-auth-card {
  background: linear-gradient(135deg, rgba(200, 149, 106, 0.12) 0%, rgba(200, 149, 106, 0.06) 100%);
  background-image: var(--wood-grain-card);
  border: 1px solid rgba(200, 149, 106, 0.15);
  box-shadow: 0 30px 80px rgba(20, 12, 6, 0.4);
}

[data-theme="wood"] .luxury-auth-glow {
  background: radial-gradient(circle, rgba(200, 149, 106, 0.1) 0%, transparent 70%);
}

/* ロゴ・タイトル: ゴールドグラデーション → コッパーグラデーションに変換 */
[data-theme="wood"] .luxury-auth-logo {
  background: linear-gradient(135deg, #c8956a 0%, #d4a87a 100%);
  box-shadow:
    0 20px 40px rgba(200, 149, 106, 0.3),
    0 0 0 1px rgba(200, 149, 106, 0.2);
}

[data-theme="wood"] .luxury-auth-logo::before {
  background: linear-gradient(135deg, #c8956a 0%, #d4a87a 100%);
}

[data-theme="wood"] .luxury-auth-title {
  background: linear-gradient(135deg, #c8956a 0%, #d4a87a 50%, #c8956a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

[data-theme="wood"] .luxury-auth-subtitle {
  color: rgba(232, 220, 200, 0.8);
}

[data-theme="wood"] .luxury-auth-link {
  color: rgba(200, 149, 106, 0.6);
}

/* リンク: ゴールド → コッパーに変換、アンダーラインも同色 */
[data-theme="wood"] .luxury-link {
  color: #c8956a;
}

[data-theme="wood"] .luxury-link::after {
  background: linear-gradient(90deg, #c8956a 0%, #d4a87a 100%);
}

[data-theme="wood"] .luxury-link:hover {
  color: #d4a87a;
  text-shadow: 0 0 10px rgba(200, 149, 106, 0.5);
}

/* フォーム・入力フィールド: コッパー系の背景・ボーダー・テキスト色に変換 */
[data-theme="wood"] .luxury-form-label {
  color: rgba(232, 220, 200, 0.9);
}

/* バッジ: ゴールド → コッパー系に変換 */
[data-theme="wood"] .luxury-required-badge {
  color: #c8956a;
  background: rgba(200, 149, 106, 0.15);
  border: 1px solid rgba(200, 149, 106, 0.3);
}

[data-theme="wood"] .luxury-optional-badge {
  color: rgba(200, 149, 106, 0.5);
  background: rgba(200, 149, 106, 0.05);
  border: 1px solid rgba(200, 149, 106, 0.15);
}

[data-theme="wood"] .luxury-input-icon {
  color: rgba(200, 149, 106, 0.5);
}

[data-theme="wood"] .luxury-input {
  background: rgba(200, 149, 106, 0.05);
  border: 1px solid rgba(200, 149, 106, 0.12);
  color: #e8dcc8;
}

[data-theme="wood"] .luxury-input::placeholder {
  color: rgba(200, 149, 106, 0.4);
}

[data-theme="wood"] .luxury-input:focus {
  border-color: rgba(200, 149, 106, 0.5);
  background: rgba(200, 149, 106, 0.08);
  box-shadow:
    0 0 0 3px rgba(200, 149, 106, 0.1),
    0 8px 25px rgba(200, 149, 106, 0.1);
}

[data-theme="wood"] .luxury-input:focus + .luxury-input-icon {
  color: #c8956a;
}

[data-theme="wood"] .luxury-input-hint {
  color: rgba(200, 149, 106, 0.6);
}

/* 送信ボタン: ゴールドグラデーション → コッパーグラデーション、テキストをダークブラウンに変換 */
[data-theme="wood"] .luxury-submit-btn {
  background: linear-gradient(135deg, #c8956a 0%, #d4a87a 100%);
  color: #1a1714;
  box-shadow: 0 8px 25px rgba(200, 149, 106, 0.3);
}

[data-theme="wood"] .luxury-submit-btn:hover {
  box-shadow: 0 12px 35px rgba(200, 149, 106, 0.4);
}

[data-theme="wood"] .luxury-submit-btn:disabled {
  background: linear-gradient(135deg, rgba(200, 149, 106, 0.3) 0%, rgba(212, 168, 122, 0.3) 100%);
  color: rgba(26, 23, 20, 0.4);
}

[data-theme="wood"] .luxury-terms-note p {
  color: rgba(200, 149, 106, 0.6);
}

[data-theme="wood"] .password-strength-bar {
  background: rgba(200, 149, 106, 0.1);
}

/* ========================================
   13. レスポンシブ対応: モバイル（480px以下）
   パディング縮小、フォントサイズ調整、グリッド1カラム化
   ======================================== */
@media (max-width: 480px) {
  .luxury-auth-container {
    padding: 20px 16px;
  }

  .luxury-auth-card {
    padding: 32px 24px;
  }

  .luxury-auth-title {
    font-size: 1.75rem;
  }

}

/* ライトテーマ: 言語選択ドロップダウン（2026-03-16追加）
   色変換: ゴールド(#FFD700) → ブラウンゴールド(#b45309 / rgba(180,83,9))
   背景: 白系グラデーション、テキスト: ダーク系 */
[data-theme="light"] .luxury-auth-form .luxury-locale-dropdown__trigger {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #1a1a2e;
}

[data-theme="light"] .luxury-auth-form .luxury-locale-dropdown__trigger:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(180, 83, 9, 0.4);
}

[data-theme="light"] .luxury-auth-form .luxury-locale-dropdown__trigger:focus {
  border-color: rgba(180, 83, 9, 0.5);
  background: rgba(0, 0, 0, 0.02);
  box-shadow:
    0 0 0 3px rgba(180, 83, 9, 0.1),
    0 8px 25px rgba(180, 83, 9, 0.1);
}

[data-theme="light"] .luxury-auth-form .luxury-locale-dropdown__menu {
  background: linear-gradient(135deg, rgba(250, 250, 252, 0.98) 0%, rgba(245, 245, 248, 0.98) 100%);
  border: 1px solid rgba(180, 83, 9, 0.15);
}

[data-theme="light"] .luxury-auth-form .luxury-locale-dropdown__item {
  color: rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .luxury-auth-form .luxury-locale-dropdown__item:hover {
  background: rgba(180, 83, 9, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

[data-theme="light"] .luxury-auth-form .luxury-locale-dropdown__item--active {
  background: rgba(180, 83, 9, 0.12);
}

[data-theme="light"] .luxury-auth-form .luxury-locale-dropdown__item--active::after {
  background: #b45309;
}

/* ウッドテーマ: 言語選択ドロップダウン（2026-03-16追加）
   色変換: ゴールド(#FFD700) → コッパー(#c8956a / rgba(200,149,106))
   背景: 木目ダーク系、テキスト: ベージュ系(#e8dcc8) */
[data-theme="wood"] .luxury-auth-form .luxury-locale-dropdown__trigger {
  background: rgba(200, 149, 106, 0.05);
  border: 1px solid rgba(200, 149, 106, 0.12);
  color: #e8dcc8;
}

[data-theme="wood"] .luxury-auth-form .luxury-locale-dropdown__trigger:hover {
  background: rgba(200, 149, 106, 0.08);
  border-color: rgba(200, 149, 106, 0.4);
}

[data-theme="wood"] .luxury-auth-form .luxury-locale-dropdown__trigger:focus {
  border-color: rgba(200, 149, 106, 0.5);
  background: rgba(200, 149, 106, 0.08);
  box-shadow:
    0 0 0 3px rgba(200, 149, 106, 0.1),
    0 8px 25px rgba(200, 149, 106, 0.1);
}

[data-theme="wood"] .luxury-auth-form .luxury-locale-dropdown__menu {
  background: linear-gradient(135deg, rgba(36, 32, 28, 0.98) 0%, rgba(26, 23, 20, 0.98) 100%);
  border: 1px solid rgba(200, 149, 106, 0.2);
}

[data-theme="wood"] .luxury-auth-form .luxury-locale-dropdown__item {
  color: rgba(232, 220, 200, 0.85);
}

[data-theme="wood"] .luxury-auth-form .luxury-locale-dropdown__item:hover {
  background: rgba(200, 149, 106, 0.1);
  color: rgba(232, 220, 200, 1);
}

[data-theme="wood"] .luxury-auth-form .luxury-locale-dropdown__item--active {
  background: rgba(200, 149, 106, 0.15);
}

[data-theme="wood"] .luxury-auth-form .luxury-locale-dropdown__item--active::after {
  background: #c8956a;
}