UI/UX デザインシステム

このドキュメントでは、Scripture Habit のカラーパレット、グラスモーフィズム（すりガラス効果）、タイポグラフィ、およびレスポンシブデザインの設計基準について解説します。

1. カラーパレットとテーマ

すべてのデザイン変数は src/index.css に定義されています：

ブランドカラー:
- --pink: ハイライト、アクティブ状態
- --purple: 主要アクションボタン
- --yellow: 実績アイコン、コイン
基本カラー:
- --black (#242d49): 視認性の高いダークネイビー（文字色）
- --gray: 補足説明テキスト、枠線
- --red: エラー・警告

css

background: linear-gradient(106.37deg, #feac5e 29.63%, #c779d0 51.55%, #4bc0c8 90.85%);

奥行きと透明感のある心地よいUIを表現するため、グラスカードを採用しています：

.AppGlass: アプリ全体のメインコンテナ（rgba(255, 255, 255, 0.54)、角丸 2rem、ソフトシャドウ）
注意点: 子要素の position: fixed が崩れるのを防ぐため、一部のコンテナでは backdrop-filter ではなくアルファブレンド背景を使用しています。

デスクトップ (768px 以上): サイドバー固定、コンテンツは中央寄せカード配置。
モバイル (768px 未満):
- 視認性を高めるため、白背景を濃いめ（rgba(255, 255, 255, 0.95)）に調整。
- スマートフォンのノッチやホームバーとの重なりを防ぐため、env(safe-area-inset-top) / env(safe-area-inset-bottom) を適用。

フォント: セルフホストされた @fontsource/inter および @fontsource/outfit を使用（FOUT やレイアウト崩れを防止）。
マイクロインタラクション:
- ボタンのホバー・タップ時の微小なスケール変化（0.2s トランジション）。
- エラー発生時の視覚的なシェイク（揺れ）アニメーション。