/* 
  フッターコンポーネント専用スタイル
  - フッターのデザインとレイアウトのみを管理
  - 汎用的なレイアウトスタイルは各レイアウトCSSで管理
*/

/* ========================================
   アプリケーションフッター - 統一デザインシステム
   ======================================== */

/* ベースフッタースタイル */
.app-footer {
  /* スティッキーフッターの実装 */
  margin-top: auto;
  
  /* base-layout.cssの美しいガラスモーフィズムデザインを採用 */
  background: var(--surface-primary);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.05);
  padding: var(--space-6) 0;
}

/* フッターコンテナ */
.app-footer__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  text-align: center;
}

/* コピーライトテキスト */
.app-footer__copyright {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: var(--tracking-wide);
}

/* テーマバリエーション */
[data-theme="user"] .app-footer {
  background: rgba(242, 247, 255, 0.93);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(102, 126, 234, 0.13);
  box-shadow: 0 -2px 10px rgba(102, 126, 234, 0.13);
}

[data-theme="admin"] .app-footer {
  background: rgba(255, 247, 247, 0.94);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 107, 107, 0.12);
  box-shadow: 0 -2px 10px rgba(255, 107, 107, 0.12);
}

.app-footer--user,
.app-footer--admin {
  /* 今後必要に応じて追加 */
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .app-footer__container {
    padding: 0 var(--space-4);
  }
}


/* 高コントラスト設定対応 */
@media (prefers-contrast: high) {
  .app-footer {
    box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.3);
  }
  
  .app-footer__copyright {
    color: #000000;
  }
}

/* モーション設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .app-footer {
    transition: none;
  }
}

/* プリント時のスタイル */
@media print {
  .app-footer {
    background: white !important;
    box-shadow: none !important;
    border-top: 1px solid #000 !important;
    color: #000 !important;
    
    /* ページ下部に固定 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  .app-footer__copyright {
    color: #000 !important;
  }
}