/* ================================================================================
 * ファイル名: app/assets/stylesheets/landing_footer.css
 * 📊 リファクタリング基準（コメント行は行数カウントから除外）
 *   ✅ 500行未満: 完璧
 *   ✅ 800行未満: 問題なし
 *   ⚠️  1200行未満: 注意喚起・リファクタリング要検討
 *   🚨 1200行以上: リファクタリング必須
 * 現在のコード行数: 約100行（コメント除く） / 総行数 130行 → ✅ 完璧
 *
 * 🎯 作成日: 2026-03-20
 * 📝 目的: ランディングページ フッターセクション（ロゴ・リンク群・SNSアイコン・著作権表示）のCSS
 *
 * 【分離元】landing.css（Phase 1 セクション別分離 → 2026-05-03 配線完了）
 *
 * 【セクション構成】
 *   1. .landing-footer       ベース（上部ボーダー・パディング）
 *   2. .landing-footer__container / __content / __brand   レイアウト
 *   3. .landing-footer__logo / __tagline                  ロゴ表示
 *   4. .landing-footer__links / __link                    リンク群（利用規約等）
 *   5. .landing-footer__social / __social-link            SNSアイコン（X リンク用）
 *   6. .landing-footer__copyright                         著作権表示
 *   7. レスポンシブ（768px 以下で flexbox 縦並び）
 *
 * 【ジュニアエンジニア向け解説】
 *   - .landing-footer__social-link は 36×36 の円形リンクで、内部に SVG アイコンを中央配置
 *   - margin-left: -8px はアイコンが視覚的に左揃えに見えるよう、円の内部余白を打ち消すための補正
 *   - hover で背景色が変化する設計（color と background-color を transition）
 *
 * 【関連ファイル】
 *   - app/assets/stylesheets/landing.css（CSS変数・ベーススタイル）
 *   - app/views/layouts/landing.html.erb（X リンクの DOM）
 *   - spec/requests/landing_footer_x_link_spec.rb（X リンク locale 連動テスト）
 *
 * 【変更履歴】
 *   2026-03-22: 日本語コメント追加（保守性向上）
 *   2026-05-03: SNSアイコン用クラス（.landing-footer__social / __social-link）追加、
 *               768px 以下のレスポンシブを本ファイルに集約（Phase 1+2 リファクタリング）
 * ================================================================================ */

/* ----------------------------------------
   フッター
   上部ボーダー線で区切り。ロゴ・タグライン・リンク群を
   flexboxで横並び配置。著作権表示は全幅中央揃え。
   768px以下で縦並びに変更。
   ---------------------------------------- */
.landing-footer {
  padding: 60px 0 40px;
  border-top: 1px solid var(--landing-card-border);
}

.landing-footer__container {
  max-width: var(--landing-container-max);
  margin: 0 auto;
  padding: 0 var(--landing-container-padding);
}

.landing-footer__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.landing-footer__logo,
.landing-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.landing-footer__logo span,
.landing-footer__brand span {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--landing-text);
}

.landing-footer__tagline {
  font-size: 0.85rem;
  color: var(--landing-text-muted);
  margin: 0;
}

/* フッターリンク群: flexboxで横並び配置。768px以下で折り返し */
.landing-footer__links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.landing-footer__link {
  color: var(--landing-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--landing-transition-fast);
}

.landing-footer__link:hover {
  color: var(--landing-text);
}

/* SNSアイコン群: フッター内で footer__links と並列配置。アイコンのみのリンク */
.landing-footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  margin-left: -8px;
}

.landing-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--landing-text-muted);
  text-decoration: none;
  transition: color var(--landing-transition-fast), background-color var(--landing-transition-fast);
}

.landing-footer__social-link:hover {
  color: var(--landing-text);
  background-color: var(--landing-card-border);
}

/* 著作権表示: 全幅中央揃え。上部にborder-topで区切り線 */
.landing-footer__copyright {
  width: 100%;
  text-align: center;
  color: var(--landing-text-muted);
  font-size: 0.85rem;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--landing-card-border);
}

/* レスポンシブ: 768px 以下で flexbox を縦並びに変更 */
@media (max-width: 768px) {
  .landing-footer__content {
    flex-direction: column;
    text-align: center;
  }
}