/*
 * ================================================================================
 * ファイル名: app/assets/stylesheets/application_layout.css
 * 目的: アプリケーションレイアウト（app/views/layouts/application.html.erb）専用CSS
 * 作成日: 2026-02-10
 * 作成理由: インラインCSS外部化（保守性・キャッシュ効率向上）
 * ================================================================================
 * 【リファクタリング基準】CSS専用（コメント行は行数カウントから除外）
 * ----------------------------------------------------------------
 * 現在の行数: 約640行
 * 判定: ✅ 問題なし（800行未満）
 * ----------------------------------------------------------------
 * 基準（CSS専用）:
 *   1. 500行未満 → 完璧 ✅
 *   2. 800行未満 → 問題なし ✅ ← 現在ここ（約640行）
 *   3. 1200行未満 → 注意喚起。リファクタリング要検討 ⚠️
 *   4. 1200行以上 → リファクタリング必須 🚨
 *
 * コメント追加日: 2026-03-20
 * ================================================================================
 *
 * 【ジュニアエンジニア向け解説】
 *   このファイルはアプリ全体のレイアウト構造（サイドバー以外）を定義しています。
 *   - .main-container: position: fixed で画面全体に固定配置。
 *     これによりヘッダー上部の隙間が解消される。
 *   - .luxury-bg-pattern: 3層のradial-gradientで高級感のある背景を表現。
 *     animation で20秒周期のゆっくりとした浮遊アニメーションを適用。
 *   - .luxury-flash: position: fixed で画面右上に固定表示される通知メッセージ。
 *     notice（緑）と alert（赤）の2種類がある。
 *   - サイドバー関連のスタイルは shared_sidebar.css に統一済み。
 *     このファイルにサイドバースタイルを追加しないこと。
 *
 * 【対応テーマ】
 *   - ダークモード（デフォルト）: ゴールドアクセント rgba(255, 215, 0)
 *   - ライトモード: ブラウンゴールド rgba(180, 83, 9) に変換
 *   - ウッドモード: 木目テクスチャ + コッパー rgba(200, 149, 106) に変換
 *
 * 【関連ファイル】
 *   - app/views/layouts/application.html.erb（使用箇所）
 *   - app/assets/stylesheets/shared_sidebar.css（サイドバースタイル）
 *   - app/assets/stylesheets/theme_variables.css（テーマCSS変数定義）
 *
 * 【変更履歴】
 *   - 2026-02-10: インラインCSS外部化・新規作成
 *   - 2026-02-15: コメント追加
 *   - 2026-02-18: Light/Woodテーマオーバーライド追加
 *   - 2026-03-20: コメント整備
 * ================================================================================
 */

/* ========== Base styles ========== */

      * {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        box-sizing: border-box;
      }
      
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
        overflow: hidden;
        color: var(--text-primary);
      }

      /* ========================================
       * ラグジュアリー背景パターン（2025-11-02 プレミアム化）
       * ========================================
       * 【変更内容】
       * - 2層 → 3層に拡張（奥行き感の向上）
       * - サイズ拡大: 400px → 600px/800px/1000px
       * - 透明度向上: 0.05/0.03 → 0.08/0.05/0.03
       * - アニメーション追加: 20秒周期の浮遊効果
       * 
       * 【効果】
       * ログイン画面と同等の高品質な背景デザイン
       * 全画面でのプレミアム感の統一
       ======================================== */
      .luxury-bg-pattern {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
          /* 第1層: 左上からの明るい光 */
          radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
          /* 第2層: 右下からの中間の光 */
          radial-gradient(circle at 75% 75%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
          /* 第3層: 中央からの薄い光（新規追加） */
          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;     /* 20秒周期のゆっくりとした動き */
        z-index: 0;
        pointer-events: none;
      }

      /* 背景パターンの浮遊アニメーション（2025-11-02 新規追加） */
      @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); 
        }
      }
      
      /* 
       * メインコンテナ: 全画面の親要素
       * 【2025-11-02】ヘッダー隙間解消のためposition固定を追加
       * 
       * 変更履歴:
       * - position: relative → fixed に変更（画面最上部への固定配置）
       * - top: 0 追加（ブラウザツールバー直下に配置）
       * - left/right/bottom: 0 追加（全画面フル表示）
       * - margin/padding: 0 追加（不要な余白を完全除去）
       * 
       * 効果: カンバンボード画面と同様にヘッダー上部の隙間を解消
       * 注意: position:fixedはスクロール動作に影響するため、変更時は注意
       */
      .main-container {
        display: flex;
        height: 100vh;
        position: fixed;        /* 画面固定配置（隙間解消の重要ポイント） */
        top: 0;                 /* 画面最上部に配置（ブラウザツールバー直下） */
        left: 0;                /* 画面左端に配置 */
        right: 0;               /* 画面右端まで拡張 */
        bottom: 0;              /* 画面下端まで拡張 */
        z-index: 1;
        margin: 0;              /* 外側余白をゼロに */
        padding: 0;             /* 内側余白をゼロに */
      }
      
      /*
       * ========================================
       * 【2026-01-02】サイドバーCSS統一対応
       * ========================================
       *
       * 変更前の問題点:
       *   - このファイル内に.sidebarスタイルが約120行定義されていた
       *   - board.html.erbにも同様の定義があり、2重管理状態
       *   - 修正時に2ファイルを変更する必要があり、保守性が低かった
       *
       * 変更内容:
       *   - サイドバー関連のインラインCSS（約120行）を削除
       *   - shared_sidebar.css を単一ソースオブトゥルースとして使用
       *
       * 効果:
       *   - サイドバーのスタイル変更が1ファイル（shared_sidebar.css）で完結
       *   - 全画面でサイドバーの見た目が統一
       *   - コード重複の解消により保守性が大幅向上
       *
       * 注意事項:
       *   - サイドバーのスタイルを変更する場合は shared_sidebar.css を編集
       *   - このファイルにサイドバースタイルを追加しないこと（重複防止）
       *   - 参照: app/assets/stylesheets/shared_sidebar.css
       * ========================================
       */

      /* レスポンシブ対応: メインコンテナのみ（サイドバーはshared_sidebar.cssで定義） */
      @media (max-width: 768px) {
        .main-container {
          flex-direction: column;
        }

        .main-content {
          order: 1;
          height: 50vh;
        }
      }
      
      .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
      
      /* 
       * ヘッダー: ページ上部のタイトルとボタン領域
       * 【2025-11-02】padding最適化によりカンバンボード画面と統一
       * 
       * 変更履歴:
       * - padding: 20px 32px → 12px 24px に変更（カンバンボード画面と同じ値）
       * - margin: 0 明示的に追加（不要な外側余白を防止）
       * 
       * 参考: カンバンボード画面では .board-project-header { padding: 12px 24px }
       * 
       * 効果: 
       * - ヘッダー高さが8px削減され、コンテンツ表示領域が拡大
       * - 全画面でヘッダーの見た目が統一され、UX向上
       * 
       * 注意事項:
       * - padding変更時は、ヘッダー内のボタンやテキストの配置バランスを確認すること
       * - 多言語対応で文字数が変化するため、レスポンシブ表示を必ず確認すること
       * - i18n対応: 全12言語での表示確認済み（2025-11-02時点）
       */
      .header {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-primary);
        padding: 12px 24px;     /* カンバンボード画面と統一（2025-11-02変更） */
        flex-shrink: 0;
        position: relative;
        z-index: 10;
        margin: 0;              /* 不要な余白を防止（2025-11-02追加） */
      }

      .header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.3) 50%, transparent 100%);
      }
      
      /* ======================================================================
         コンテンツエリア: メイン表示領域
         ======================================================================
         【パンくずリストとの関係】（更新日: 2026-01-31）
         - padding-top: 12px はパンくずリスト上部の余白
         - パンくずリスト自体は各ERBビューの yield 直下で表示
         - パンくずリストは .content-area の内部に配置されるため、
           この padding がパンくずリストの外側余白になる
         - 左右 24px のパディングはパンくずリスト含む全コンテンツに適用
         ====================================================================== */
      .content-area {
        flex: 1;
        overflow-y: auto;
        padding: 12px 24px 32px 24px;
        background: transparent;
      }
      
      .header-button {
        background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 100%);
        color: #000;
        border: none;
        border-radius: 12px;
        padding: 12px 24px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
        position: relative;
        overflow: hidden;
      }

      .header-button::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;
      }

      .header-button:hover::before {
        transform: translateX(100%);
      }
      
      .header-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 35px rgba(255, 215, 0, 0.4);
        color: #000;
        text-decoration: none;
      }

      /* 【2026-01-02】ロゴスタイル更新: 画像ロゴ対応（ダークモード）
       * 変更内容: 
       *   - 背景グラデーションを削除（画像ロゴに内包）
       *   - エフェクトを最小化（画像の視認性優先）
       *   - 将来のホワイトモード対応を考慮した設計
       */
      .luxury-logo {
        background: transparent;  /* 画像背景を活かすため透明に変更 */
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 
          0 8px 20px rgba(255, 215, 0, 0.15);  /* 控えめなシャドウに変更 */
        position: relative;
        overflow: hidden;  /* 画像のはみ出し防止 */
      }

      /* ロゴのグローエフェクト（より控えめに調整） */
      .luxury-logo::before {
        content: '';
        position: absolute;
        inset: 0;
        background: transparent;
        border-radius: 16px;
        z-index: -1;
        filter: blur(10px);
        opacity: 0;  /* 初期状態は非表示 */
        transition: opacity 0.3s ease;
      }

      /* ホバー時のみグローエフェクトを表示 */
      .luxury-logo:hover::before {
        opacity: 0.3;
        background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
      }

      .luxury-search {
        background: var(--bg-surface);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        padding: 12px 16px 12px 44px;
        color: var(--text-primary);
        font-size: 14px;
        width: 100%;
        transition: all 0.3s ease;
      }

      .luxury-search:focus {
        outline: none;
        border-color: rgba(255, 215, 0, 0.5);
        background: var(--border-secondary);
        box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
      }

      .luxury-search::placeholder {
        color: var(--text-tertiary);
      }

      /* サイドバー用セクションタイトルのデフォルトスタイル */
      /* 注意: shared_sidebar.css で !important 付きで上書きされる */
      .sidebar .luxury-section-title {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 12px;
        margin-top: 24px;
      }

      /* ユーザーメニュー */
      .luxury-user-section {
        padding: 20px;
        border-top: 1px solid var(--border-primary);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
        position: relative;
      }

      .luxury-user-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.3) 50%, transparent 100%);
      }

      .luxury-user-info {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .luxury-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid rgba(255, 215, 0, 0.3);
        flex-shrink: 0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }

      .luxury-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .luxury-avatar-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        font-weight: 600;
        font-size: 16px;
      }

      .luxury-user-menu {
        position: absolute;
        bottom: 100%;
        left: 20px;
        right: 20px;
        margin-bottom: 8px;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%);
        backdrop-filter: blur(20px);
        border: 1px solid var(--border-primary);
        border-radius: 16px;
        padding: 8px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        z-index: 9999;
      }

      .luxury-user-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .luxury-user-menu a,
      .luxury-user-menu button {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        color: var(--text-primary);
        text-decoration: none;
        border-radius: 12px;
        transition: all 0.3s ease;
        font-size: 14px;
        font-weight: 500;
        width: 100%;
        border: none;
        background: none;
        cursor: pointer;
        text-align: left;
      }

      .luxury-user-menu a:hover,
      .luxury-user-menu button:hover {
        background: var(--bg-surface-active);
        color: var(--gold-primary);
        transform: translateX(4px);
      }

      .luxury-user-menu-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        color: var(--text-primary);
        text-decoration: none;
        border-radius: 12px;
        transition: all 0.3s ease;
        font-size: 14px;
        font-weight: 500;
        width: 100%;
        border: none;
        background: none;
        cursor: pointer;
        text-align: left;
      }

      .luxury-user-menu-item:hover {
        background: var(--bg-surface-active);
        color: var(--gold-primary);
        transform: translateX(4px);
      }

      .luxury-auth-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .luxury-auth-btn {
        padding: 12px 20px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .luxury-auth-btn-primary {
        background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 100%);
        color: #000;
        border: none;
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
      }

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

      .luxury-auth-btn-secondary {
        background: var(--bg-surface-active);
        color: var(--text-primary);
        border: 1px solid var(--border-primary);
      }

      .luxury-auth-btn-secondary:hover {
        background: var(--border-primary);
        color: var(--text-primary);
        transform: translateY(-2px);
      }

      /* フラッシュメッセージ */
      .luxury-flash {
        position: fixed;
        top: 100px;
        right: 32px;
        z-index: 20001;
        padding: 12px 20px;
        border-radius: 12px;
        backdrop-filter: blur(20px);
        border: 1px solid;
        font-weight: 500;
        font-size: 14px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        animation: luxurySlideIn 0.5s ease-out;
        max-width: 350px;
        word-break: break-word;
        white-space: pre-line;
        transform: translateX(0);
      }

      .luxury-flash-notice {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
        border-color: rgba(34, 197, 94, 0.3);
        color: #22C55E;
      }

      .luxury-flash-alert {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
        border-color: rgba(239, 68, 68, 0.3);
        color: #EF4444;
      }

      @keyframes luxurySlideIn {
        from {
          opacity: 0;
          transform: translateX(100px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @keyframes luxurySlideInFromBottom {
        from {
          opacity: 0;
          transform: translateY(100px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ヘッダータイトル */
      .luxury-header-title {
        font-size: 2rem;
        font-weight: 700;
        background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 50%, var(--gold-primary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        padding: 0;
        line-height: 1.2;
      }

      /* レスポンシブ対応 */
      @media (max-width: 768px) {
        .sidebar {
          width: 240px;
        }
        
        .content-area {
          padding: 12px 16px 20px 16px;
        }

        .header {
          padding: 16px 20px;
        }

        .luxury-header-title {
          font-size: 1.5rem;
        }

        .luxury-flash {
          top: 120px;
          right: 20px;
          max-width: 280px;
          font-size: 13px;
          padding: 10px 16px;
        }
      }

/* ========== Loading overlay styles ========== */

      #global-loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:20000;display:flex;align-items:center;justify-content:center}
      #global-loading-overlay .global-loading-content{display:flex;flex-direction:column;align-items:center;padding:40px 50px;background:rgba(30,30,30,0.95);border-radius:20px;border:1px solid rgba(255,215,0,0.3);min-width:280px}
      #global-loading-overlay .global-loading-spinner{position:relative;width:80px;height:80px;margin-bottom:24px}
      #global-loading-overlay .global-spinner-ring{position:absolute;width:100%;height:100%;border:4px solid transparent;border-radius:50%;animation:_gr 1.2s cubic-bezier(.5,0,.5,1) infinite}
      #global-loading-overlay .global-spinner-ring:nth-child(1){border-top-color:var(--gold-primary);animation-delay:-.45s}
      #global-loading-overlay .global-spinner-ring:nth-child(2){border-top-color:var(--gold-secondary);animation-delay:-.3s;width:75%;height:75%;top:12.5%;left:12.5%}
      #global-loading-overlay .global-spinner-ring:nth-child(3){border-top-color:#60A5FA;animation-delay:-.15s;width:50%;height:50%;top:25%;left:25%}
      @keyframes _gr{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
      #global-loading-overlay .global-loading-text{color:var(--text-primary);font-size:16px;font-weight:500;margin-bottom:20px}
      #global-loading-overlay .global-loading-progress{width:100%;max-width:220px;height:6px;background:var(--bg-surface-active);border-radius:3px;overflow:hidden}
      #global-loading-overlay .global-loading-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-primary),var(--gold-secondary),var(--gold-primary));border-radius:3px;transition:width .3s ease-out}

/* ========== Flash notification styles ========== */

      .luxury-flash {
        position: fixed;
        top: 100px;
        right: 32px;
        z-index: 20001;
        padding: 12px 20px;
        border-radius: 12px;
        backdrop-filter: blur(20px);
        border: 1px solid;
        font-weight: 500;
        font-size: 14px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        animation: luxurySlideIn 0.5s ease-out;
        max-width: 350px;
        white-space: nowrap;
        transform: translateX(0);
        transition: opacity 0.3s ease, transform 0.3s ease;
      }

      .luxury-flash-notice {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
        border-color: rgba(34, 197, 94, 0.3);
        color: #22C55E;
      }

      .luxury-flash-alert {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
        border-color: rgba(239, 68, 68, 0.3);
        color: #EF4444;
      }

      @keyframes luxurySlideIn {
        from {
          opacity: 0;
          transform: translateX(100px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @media (max-width: 768px) {
        .luxury-flash {
          top: 120px;
          right: 20px;
          max-width: 280px;
          font-size: 13px;
          padding: 10px 16px;
        }
      }

/* ========================================
 * Light Theme - Layout Overrides
 * 追加日: 2026-02-18
 * ========================================
 * 【目的】
 *   白背景でゴールドの背景パターンが不可視になる問題の修正。
 *   ゴールド(rgba(255,215,0)) → ブラウンゴールド(rgba(180,83,9)) に変換。
 *
 * 【対象セレクタ】
 *   - .luxury-bg-pattern: 背景パターン（radial-gradient 3層）
 *   - .header::after: ヘッダー下部装飾線
 *   - .luxury-user-section::before: ユーザーセクション上部装飾線
 *   - .luxury-logo:hover::before: ロゴのグローエフェクト
 * ======================================== */
[data-theme="light"] .luxury-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"] .header::after {
  background: linear-gradient(90deg, transparent 0%, rgba(180, 83, 9, 0.3) 50%, transparent 100%);
}

[data-theme="light"] .luxury-user-section::before {
  background: linear-gradient(90deg, transparent 0%, rgba(180, 83, 9, 0.3) 50%, transparent 100%);
}

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

/* ========================================
 * Wood Theme - Background Pattern Override
 * 追加日: 2026-02-18
 * ========================================
 * 【目的】
 *   ウッドモード時の背景パターンを木目テクスチャに変換。
 *   3層のrepeating-linear-gradient（木目グレイン）+
 *   2層のradial-gradient（年輪風アクセント）で構成。
 *   色: コッパー rgba(200, 149, 106, X)
 * ======================================== */
[data-theme="wood"] .luxury-bg-pattern {
  background-image:
    /* 木目グレイン: 3層構造 */
    repeating-linear-gradient(
      85deg,
      rgba(200, 149, 106, 0.04) 0px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(
      82deg,
      rgba(200, 149, 106, 0.025) 0px,
      transparent 1px,
      transparent 10px
    ),
    repeating-linear-gradient(
      78deg,
      rgba(200, 149, 106, 0.015) 0px,
      transparent 1px,
      transparent 20px
    ),
    /* 年輪風アクセント: 左上 */
    radial-gradient(
      ellipse at 20% 30%,
      rgba(200, 149, 106, 0.06) 0%,
      transparent 50%
    ),
    /* 年輪風アクセント: 右下 */
    radial-gradient(
      ellipse at 80% 70%,
      rgba(200, 149, 106, 0.04) 0%,
      transparent 50%
    );
  background-size: auto, auto, auto, 600px 600px, 800px 800px;
}