/* ================================================================================
 * ファイル名: app/assets/stylesheets/luxury_auth.css
 * 📊 リファクタリング基準（コメント行は行数カウントから除外）
 *   ✅ 500行未満: 完璧
 *   ✅ 800行未満: 問題なし
 *   ⚠️  1200行未満: 注意喚起・リファクタリング要検討
 *   🚨 1200行以上: リファクタリング必須
 * 現在のコード行数: 約507行（コメント除く）→ ✅ 問題なし
 *
 * 作成日: 2026-03-21
 * コメント追加日: 2026-04-08
 * 目的: 認証画面（ログイン・登録・メール確認）共通スタイル。3テーマ対応。
 *
 * 【使用画面】
 *   - devise/sessions/new.html.erb（ログイン）
 *   - devise/registrations/new.html.erb（登録）
 *   - users/email_confirmations/show.html.erb（メール確認）
 *
 * 【セクション構成】
 *   1. ダークテーマ（デフォルト）: ゴールド系 (#FFD700 / #FFA500)、背景 #0a0a0a
 *   2. ライトテーマ [data-theme="light"]: ブラウンゴールド (#b45309 / #d97706)
 *   3. ウッドテーマ [data-theme="wood"]: コッパー (#c8956a / #d4a87a) + 木目テクスチャ
 *   4. Google SSO ボタン: Google公式ブランドガイドライン準拠 + 3テーマ対応
 *   5. レスポンシブ対応: 768px（タブレット）/ 480px（スマートフォン）
 *
 * 【ジュニアエンジニア向け解説】
 *   - [data-theme="light"] セレクターはHTMLタグの data-theme 属性で判定
 *   - backdrop-filter: blur(25px) でカード背景をぼかすガラスモーフィズム効果
 *   - ::before 疑似要素のシマー効果: translateX(-100%) → translateX(100%) で
 *     光が左から右へ流れるアニメーション
 *   - var(--wood-grain-main) はウッドテーマ用の木目テクスチャCSS変数
 *
 * 【関連ファイル】
 *   - app/views/devise/sessions/new.html.erb（ログイン画面ビュー）
 *   - app/views/devise/registrations/new.html.erb（登録画面ビュー）
 *   - app/views/users/email_confirmations/show.html.erb（メール確認画面ビュー）
 *   - app/assets/stylesheets/theme_variables.css（CSS変数定義元）
 *
 * 【変更履歴】
 *   2026-03-27: タブレット・スマホ向けレスポンシブ対応追加、行数更新
 *   2026-04-07: コメント追加日追記、行数更新（294→387行）、セクション構成・関連ファイル補完
 *   2026-04-09: 利用規約チェックボックスのライト/ウッドテーマ対応追加、SSO利用規約テキストのウッドテーマ追加
 *   2026-04-08: Google SSO・利用規約チェックボックス・テーマ別SSOセクションにコメント追加
 * ================================================================================ */

/* ----------------------------------------
   セクション1: ダークテーマ（デフォルト）
   ---------------------------------------- */

/* 2026-04-18: モバイル viewport 対応
   - min-height: 100vh → 100dvh に置換
   - ログイン/サインアップのラグジュアリー認証画面を
     モバイルアドレスバー表示時も画面全体で表示するため。 */
.luxury-auth-container {
  min-height: 100dvh;
  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); }
}

.luxury-auth-card {
  max-width: 450px;
  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); }
}

.luxury-auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.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: 1.75rem;
  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;
}

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

/* フォーム要素: ラベル・入力フィールド・送信ボタン */
.luxury-auth-form {
  margin-top: 0;
}

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

.luxury-form-submit {
  margin-top: 24px;
}

/* 送信ボタン: ゴールドグラデーション + ホバーで浮遊 + シマーアニメーション
   ::before 疑似要素で光の横移動を実現（translateX(-100%) → translateX(100%)） */
.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; }

/* ===== レスポンシブ対応 ===== */

/* タブレット（768px以下）: タブレット向けレスポンシブ対応
 * コンテナのパディングを縮小して画面幅に合わせる
 * カードの最大幅を100%に変更し、パディング・角丸を調整
 * ロゴサイズを80px→64pxに縮小 */
@media (max-width: 768px) {
  /* コンテナの左右パディングを16pxに縮小 */
  .luxury-auth-container { padding: 24px 16px; }
  /* カードの最大幅を画面いっぱいに変更、パディングと角丸を縮小 */
  .luxury-auth-card {
    max-width: 100%;
    padding: 36px 28px;
    border-radius: 16px;
  }
  /* ロゴサイズをタブレット向けに縮小（64px） */
  .luxury-auth-logo {
    width: 64px;
    height: 64px;
  }
}

/* スマートフォン（480px以下）: さらに小さい画面向けの調整
 * コンテナ・カードのパディングを最小化
 * タイトルのフォントサイズを1.5remに縮小 */
@media (max-width: 480px) {
  .luxury-auth-container { padding: 20px 16px; }
  .luxury-auth-card { padding: 32px 24px; }
  .luxury-auth-title { font-size: 1.5rem; }
}

/* ----------------------------------------
   セクション2: ライトテーマオーバーライド
   白背景ベース。ゴールド → ブラウンゴールド (#b45309 / #d97706) に変換。
   テキストは暗色系。影は控えめ。

   色設計思想:
   - 白背景(#f8f9fa)に対しダークテーマのゴールド(#FFD700)はコントラスト不足。
   - そのためロゴ・タイトル・ボタンをブラウンゴールド(#b45309/#d97706)に変換。
   - テキスト・サブタイトルは暗色系(rgba(26,26,46,...))で視認性確保。
   - 影は不透明度を下げ(0.08-0.12)、白背景に対して重くならないよう調整。
   ---------------------------------------- */

[data-theme="light"] .luxury-auth-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f5 50%, #e8e8ed 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(217, 119, 6, 0.03) 0%, transparent 70%);
}

[data-theme="light"] .luxury-auth-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 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, #d97706 0%, #b45309 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, #d97706 0%, #b45309 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;
}

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

[data-theme="light"] .luxury-form-label {
  color: rgba(26, 26, 46, 0.85);
}

[data-theme="light"] .luxury-submit-btn {
  background: linear-gradient(135deg, #d97706 0%, #b45309 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(217, 119, 6, 0.3) 0%, rgba(180, 83, 9, 0.3) 100%);
  color: rgba(255, 255, 255, 0.4);
}

/* ----------------------------------------
   セクション3: ウッドテーマオーバーライド
   ダークウッド調。コッパー (#c8956a / #d4a87a) アクセント。
   木目テクスチャ (--wood-grain-*) を背景に適用。

   色設計思想:
   - ゴールド → コッパー(#c8956a/#d4a87a)に変換し、ウッドテーマの暖色調に統一。
   - 背景はダークブラウン(#1a1a18)に木目テクスチャを重ね、重厚な書斎風。
   - テキストはパーチメント色(rgba(232,220,200,...))で羊皮紙のような温かみ。
   - 影はダークブラウン(rgba(20,12,6,...))で木の陰影を表現。
   ---------------------------------------- */

[data-theme="wood"] .luxury-auth-container {
  background:
    var(--wood-grain-main),
    linear-gradient(135deg, #1a1a18 0%, #1e2a24 50%, #2a2520 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:
    var(--wood-grain-card),
    linear-gradient(135deg, rgba(200, 149, 106, 0.08) 0%, rgba(200, 149, 106, 0.04) 100%);
  border: 1px solid rgba(200, 149, 106, 0.15);
  box-shadow: 0 30px 80px rgba(20, 12, 6, 0.5);
}

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

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

[data-theme="wood"] .luxury-form-label {
  color: rgba(232, 220, 200, 0.9);
}

[data-theme="wood"] .luxury-submit-btn {
  background: linear-gradient(135deg, #c8956a 0%, #d4a87a 100%);
  color: #1a1a18;
  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, 26, 24, 0.4);
}

/* ----------------------------------------
   セクション4: Google SSO ボタン + 利用規約チェックボックス
   【2026-04-08追記】

   【概要】
   Google公式ブランドガイドライン準拠（白背景 + Gロゴ + テキスト）のSSOボタンと、
   新規登録画面で使用する利用規約同意チェックボックスのスタイル。

   【使用画面】
   - devise/sessions/new.html.erb: Google SSOボタン + 区切り線のみ使用
   - devise/registrations/new.html.erb: 利用規約チェックボックス + Google SSOボタン + 区切り線を使用

   【ジュニアエンジニア向け解説】
   - .luxury-terms-checkbox: appearance: none でブラウザデフォルトの
     チェックボックスを非表示にし、CSSでカスタムデザインを適用。
     :checked::after 疑似要素でチェックマーク（回転したL字型border）を描画。
   - .luxury-terms-checkbox-section:has(.luxury-terms-checkbox:checked):
     CSS :has() セレクターで、チェックボックスがチェックされた時に
     セクション全体のボーダー色・背景色を変更（同意状態の視覚的フィードバック）。
   - .luxury-google-btn:disabled: 利用規約未同意時の半透明表示。
     signup_validation.js がJSで disabled 属性を動的に切り替える。
   - .luxury-divider: ::before / ::after で左右の水平線を生成し、
     中央のテキスト（「または」）を挟むレイアウト。flexbox + gap で実現。

   【テーマ対応】
   - ダークテーマ（デフォルト）: ゴールド (#FFD700) アクセント
   - ライトテーマ: ボタンのborder色を暗色系に調整、影を控えめに
   - ウッドテーマ: ボタンのborder色をコッパー系に調整
   - 利用規約チェックボックス: 3テーマ対応済み（ダーク: ゴールド、ライト: ブラウンゴールド、ウッド: コッパー）
   ---------------------------------------- */

/* 利用規約同意チェックボックスセクション:
   新規登録画面でSSOボタン・送信ボタンの両方を制御する同意UIの外枠。
   カスタムチェックボックス + luxury テーマに合わせたゴールドアクセント */
.luxury-terms-checkbox-section {
  margin-bottom: 24px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.luxury-terms-checkbox-section:has(.luxury-terms-checkbox:checked) {
  border-color: rgba(255, 215, 0, 0.3);
  background: rgba(255, 215, 0, 0.03);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.05);
}

.luxury-terms-checkbox-label {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  transition: color 0.3s ease;
}

.luxury-terms-checkbox-label:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* カスタムチェックボックス: ブラウザデフォルトを非表示にし、SVGチェックマーク付きに */
.luxury-terms-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.luxury-terms-checkbox:hover {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.05);
}

.luxury-terms-checkbox:checked {
  background: linear-gradient(135deg, #FFD700, #c8a45a);
  border-color: #FFD700;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.luxury-terms-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 6px;
  height: 10px;
  border: solid #1a1a2e;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* チェックボックス横の利用規約テキスト: テキスト選択を防止してクリック操作を安定させる */
.luxury-terms-checkbox-text {
  user-select: none;
}

/* 利用規約・プライバシーポリシーへのリンク: 下線付きで視認性を確保 */
.luxury-terms-checkbox-text .luxury-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* SSOセクション: Google SSOボタン + 区切り線を囲むコンテナ */
.luxury-sso-section {
  margin-bottom: 8px;
}

/* SSOフォーム: form_tagで生成されるフォーム要素を全幅に */
.luxury-sso-form {
  width: 100%;
}

/* Googleログインボタン: Google公式ブランドガイドライン準拠の白背景ボタン
   color: #3c4043 は Google Material Design のテキスト色 */
.luxury-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  background: #fff;
  color: #3c4043;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.luxury-google-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* アクティブ（押下中）: 浮遊をリセットして押した感触を演出 */
.luxury-google-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* disabled状態: 新規登録画面で利用規約未同意時に適用される。
   opacity: 0.5 で半透明にし、クリック不可であることを視覚的に示す。
   signup_validation.js の termsCheckbox.addEventListener('change', ...) で制御 */
.luxury-google-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* disabled状態のホバー: disabled時はホバーエフェクトを無効化 */
.luxury-google-btn:disabled:hover {
  background: #fff;
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* GoogleのGロゴアイコン: flex-shrink: 0 でアイコンが縮小されないよう固定 */
.luxury-google-icon {
  flex-shrink: 0;
}

/* Google SSO ボタン下の利用規約同意文言 */
.luxury-sso-terms {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  line-height: 1.6;
}

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

/* 区切り線: 「または」テキストを挟む水平線。
   ::before / ::after で左右の線を生成し、中央のテキスト(span)を挟む */
.luxury-divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  gap: 16px;
}

.luxury-divider::before,
.luxury-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.luxury-divider span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ライトテーマ: 利用規約チェックボックス（2026-04-09追加）
   白背景ベースのため、ボーダー・背景色をダーク系に変更。
   チェック時のアクセントはブラウンゴールド (#d97706 / #b45309) に統一 */
[data-theme="light"] .luxury-terms-checkbox-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .luxury-terms-checkbox-section:has(.luxury-terms-checkbox:checked) {
  border-color: rgba(180, 83, 9, 0.3);
  background: rgba(217, 119, 6, 0.03);
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.05);
}

[data-theme="light"] .luxury-terms-checkbox-label {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .luxury-terms-checkbox-label:hover {
  color: rgba(26, 26, 46, 0.9);
}

[data-theme="light"] .luxury-terms-checkbox {
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .luxury-terms-checkbox:hover {
  border-color: rgba(180, 83, 9, 0.4);
  background: rgba(217, 119, 6, 0.05);
}

[data-theme="light"] .luxury-terms-checkbox:checked {
  background: linear-gradient(135deg, #d97706, #b45309);
  border-color: #d97706;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.3);
}

[data-theme="light"] .luxury-terms-checkbox:checked::after {
  border-color: #fff;
}

/* ライトテーマ: Google SSOボタン + 区切り線
   白背景テーマのため、ボタン自体は同じ白だがborder色を暗色系に変更。
   影はダークテーマより控えめ（0.08→0.12）にして白背景に馴染ませる */
[data-theme="light"] .luxury-google-btn {
  background: #fff;
  color: #3c4043;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .luxury-google-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* ライトテーマ: 区切り線を暗色系に（ダークテーマの白系から変更） */
[data-theme="light"] .luxury-divider::before,
[data-theme="light"] .luxury-divider::after {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .luxury-divider span {
  color: rgba(26, 26, 46, 0.45);
}

/* ウッドテーマ: SSO利用規約テキスト */
[data-theme="wood"] .luxury-sso-terms {
  color: rgba(232, 220, 200, 0.5);
}

/* ウッドテーマ: 利用規約チェックボックス（2026-04-09追加）
   ダークウッド背景のため、ボーダー・背景色をコッパー系に変更。
   チェック時のアクセントはコッパー (#c8956a / #d4a87a) に統一 */
[data-theme="wood"] .luxury-terms-checkbox-section {
  background: rgba(200, 149, 106, 0.03);
  border-color: rgba(200, 149, 106, 0.08);
}

[data-theme="wood"] .luxury-terms-checkbox-section:has(.luxury-terms-checkbox:checked) {
  border-color: rgba(200, 149, 106, 0.3);
  background: rgba(200, 149, 106, 0.05);
  box-shadow: 0 0 0 3px rgba(200, 149, 106, 0.05);
}

[data-theme="wood"] .luxury-terms-checkbox-label {
  color: rgba(232, 220, 200, 0.7);
}

[data-theme="wood"] .luxury-terms-checkbox-label:hover {
  color: rgba(232, 220, 200, 0.9);
}

[data-theme="wood"] .luxury-terms-checkbox {
  border-color: rgba(200, 149, 106, 0.2);
  background: rgba(200, 149, 106, 0.05);
}

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

[data-theme="wood"] .luxury-terms-checkbox:checked {
  background: linear-gradient(135deg, #c8956a, #d4a87a);
  border-color: #c8956a;
  box-shadow: 0 2px 8px rgba(200, 149, 106, 0.3);
}

[data-theme="wood"] .luxury-terms-checkbox:checked::after {
  border-color: #1a1a18;
}

/* ウッドテーマ: Google SSOボタン + 区切り線
   ボタン自体は白背景のまま、border色をコッパー系に変更してウッドテーマに調和。
   影の色もダークブラウン系（rgba(20, 12, 6, ...)）に変更 */
[data-theme="wood"] .luxury-google-btn {
  background: #fff;
  color: #3c4043;
  border-color: rgba(200, 149, 106, 0.2);
  box-shadow: 0 4px 12px rgba(20, 12, 6, 0.2);
}

[data-theme="wood"] .luxury-google-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 6px 20px rgba(20, 12, 6, 0.3);
}

/* ウッドテーマ: 区切り線をコッパー系に */
[data-theme="wood"] .luxury-divider::before,
[data-theme="wood"] .luxury-divider::after {
  background: rgba(200, 149, 106, 0.15);
}

[data-theme="wood"] .luxury-divider span {
  color: rgba(232, 220, 200, 0.45);
}