TimeGate - ビジュアル勤怠＆有給管理ダッシュボード

【目的・ターゲット】中小企業やスタートアップの労務担当者・従業員向けに、出退勤打刻から有給申請・承認、月次振り返りまでを1つで完結できる勤怠管理アプリ。無機質になりがちな勤怠管理を、時間帯で変化する背景演出と月末の『振り返りムービー』でリッチに体験させる。

【主要機能】
1. ワンタップ出退勤打刻：現在時刻に応じて背景が朝/昼/夕/夜へ自動遷移し、打刻時に短い効果音が鳴る。
2. 有給休暇申請＆承認フロー：カレンダーから日付選択→申請→管理者が一覧から承認/却下、残日数を自動計算。
3. 月間勤怠カレンダー：稼働時間をヒートマップ表示し、残業超過や連続出勤をアラート表示。
4. 管理者ダッシュボード：部署別稼働率、有給消化率、遅刻・早退傾向をカード＋グラフで可視化。
5. 月末『がんばりましたムービー』：出勤日数・総労働時間・有給消化率・皆勤バッジなどをスライドアニメーションとBGMで自動生成し、本人が再生・PNG保存できる。
6. CSV出力・印刷用勤怠表レイアウト（給与計算連携用）。

【画面構成】従業員選択/簡易ログイン画面、打刻メイン画面（背景アニメーション＋大きな時計）、有給申請フォームと承認一覧、月間カレンダービュー、管理者ダッシュボード、月次振り返りムービー再生画面。

【データ構造(MySQL)】companies(id,name)、employees(id,company_id,name,dept,join_date)、attendance_logs(id,employee_id,type[in/out],logged_at)、leave_requests(id,employee_id,start_date,end_date,days,status,reason,created_at)、leave_balances(employee_id,year,total_days,used_days)。

【デザイン方向性】ガラスモーフィズム風の半透明カード、朝は淡いブルー〜ピンク、昼は明るい水色、夕方はオレンジグラデーション、夜は紺〜紫のグラデーション背景。線は柔らかく丸みのあるフラットイラスト調で統一。

【BGM仕様】月次ムービー再生時にWeb Audio APIでアコースティックポップ調BGMを生成。BPM100、4/4拍子。ピアノアルペジオ＋ソフトなキック/ハイハット＋ウォームなベースラインで構成し、Aメロ4小節（穏やかなコード進行C-G-Am-F）→Bメロ4小節（盛り上がるFmaj7-G-Em-Am）の8小節ループ。4小節目にハイハットのフィルを挿入し変化をつける。AudioContext.currentTimeで次ノートを先読みスケジューリングし、BGM/効果音(打刻音)の音量を別スライダーで管理、ミュートボタンと画面遷移時のノード停止・切断処理を実装する。

## BGM品質要件
- アプリの雰囲気に合うジャンル・BPM・拍子を定め、ドラム、ベース、和声、メロディの4層で構成する
- 最低8小節またはA/Bの2展開を作り、休符、アクセント、フィル、フレーズ変化を入れる
- Web Audio APIはAudioContext.currentTime基準で先読みし、BGM/SE別音量・ミュート・停止処理を実装する
- 単一オシレーターの持続音や1〜3音だけの反復はBGMとして不可

## ビジュアル品質要件
- 生成済み素材を仕様内の用途・表示場所で実際に使用し、未使用素材を残さない
- 画風・配色・キャラクター比率を全画面で統一し、文字はHTML/CSSで重ねる
- PC・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する