/* ================================================================================
 * ファイル名: app/assets/stylesheets/landing_mobile_nav.css
 * 📊 リファクタリング基準（コメント行は行数カウントから除外）
 *   ✅ 500行未満: 完璧
 *   ✅ 800行未満: 問題なし
 *   ⚠️  1200行未満: 注意喚起・リファクタリング要検討
 *   🚨 1200行以上: リファクタリング必須
 * 現在のコード行数: 約100行（コメント除く） / 総行数 125行 → ✅ 完璧
 *
 * 🎯 作成日: 2026-05-03（Phase 2 セクション別分離）
 * 📝 目的: ランディングページ モバイルナビゲーション（ハンバーガー + ドロワー）
 *
 * 【分離元】landing.css のモバイルナビゲーション節を抽出
 *
 * 【セクション構成】
 *   1. ハンバーガーボタン（768px以下で表示）
 *   2. オーバーレイ（is-visible でフェードイン）
 *   3. ドロワー本体（is-open でスライドイン）
 *   4. ドロワー内リンク・区切り・ボタン
 *
 * 【ジュニアエンジニア向け解説】
 *   - ドロワーは初期状態で transform: translateX(100%) で右側画面外に配置
 *   - .is-open クラス付与時に translateX(0) になり、transition でスライドイン
 *   - z-index 階層: オーバーレイ(1001) < ドロワー(1002)
 *   - hamburger の display: none はデフォルト。@media 768px で flex に切替（landing.css 内）
 *
 * 【関連ファイル】
 *   - app/assets/stylesheets/landing.css（CSS変数・ベーススタイル・hamburger 表示制御）
 *   - app/views/layouts/landing.html.erb（ハンバーガーボタン・ドロワー DOM）
 *   - public/javascripts/landing_page.js（開閉ハンドラ）
 *   - tests/javascript/landing/mobile_nav.test.js（Vitest）
 *
 * 【変更履歴】
 *   2026-05-03: 新規作成（landing.css のモバイルナビ節から分離）
 * ================================================================================ */

/* ========================================
   モバイルナビゲーション（768px以下）
   ======================================== */

/* ハンバーガーボタン（デスクトップでは非表示） */
.landing-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--landing-text);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.landing-hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* モバイルオーバーレイ */
.landing-mobile-overlay {
  display: none;
}

.landing-mobile-overlay.is-visible {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1001;
}

/* モバイルナビドロワー */
.landing-mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: linear-gradient(135deg, #0a0a0f 0%, #12121a 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1002;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 80px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.landing-mobile-nav.is-open {
  transform: translateX(0);
}

.landing-mobile-nav__link {
  display: block;
  padding: 14px 16px;
  color: var(--landing-text-muted);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.landing-mobile-nav__link:hover {
  color: var(--landing-text);
  background: rgba(255, 255, 255, 0.05);
}

.landing-mobile-nav__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 0;
}

.landing-mobile-nav__btn {
  display: block;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--landing-gold) 0%, var(--landing-gold-hover) 100%);
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.landing-mobile-nav__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}