以下の仕様で、POSデータ可視化ダッシュボードのアーティファクトを作成してください。
サンプルのExcelファイルは添付の通りです。

─── アプリ概要 ────────────────────────────────────────
Excelファイルをドラッグ&ドロップすると、KPI・グラフ・データテーブルが
自動表示されるダッシュボードアプリ。ブラウザのみで完結し、サーバー不要。

─── 対象Excelの構造（実データに基づく）──────────────────
カラム構成（12列）:
  ID, TransactionID, DateTime, Dayofweek, Shop,
  Gender, AgeGroup, Item, Price, Amount, Subtotal, Paymethod

数値カラム   : Price（円）/ Amount（個）/ Subtotal（円）
カテゴリカラム: Gender（男性・女性）
               AgeGroup（子供・若者・中高年・高齢者）
               Item（シュークリーム・ショートケーキ・チョコスペシャル・
                     フルーツタルト・モンブラン）
               Paymethod（現金・クレジット・電子マネー）
               Dayofweek（Monday〜Sunday）
日時カラム   : DateTime（YYYY-MM-DD HH:MM:SS形式）

─── 日時選択欄 ──────────────────────
対象となる日時を選択する欄。ユーザーが選択した範囲でデータをフィルタリングする。標準ではデータの開始から終了まですべてを表示
- 開始日
- 開始時間
- 終了日
- 終了時間

─── KPIカード（最上段、4枚横並び）──────────────────────
① 総売上        — Subtotalの合計（円表示、カンマ区切り）
② 総取引数      — TransactionIDのユニーク数
③ 平均客単価    — 総売上 ÷ 総取引数（円表示）
④ 販売点数合計  — Amountの合計

─── グラフ（2列グリッド、計6枚）────────────────────────
① 日別売上推移（折れ線グラフ）
   - X軸: 日付（MM/DD形式）、Y軸: 売上（円）
   - 対象期間: 2026-06-01〜2026-06-30（30日分）

② 時間帯別売上（棒グラフ）
   - X軸: 時刻を1時間単位で集計（7時〜19時）、Y軸: 売上（円）

③ 商品別売上ランキング（横棒グラフ）
   - Item 5種（シュークリーム・ショートケーキ・チョコスペシャル・
     フルーツタルト・モンブラン）を Subtotal合計降順で表示

④ 支払方法別構成比（ドーナツチャート）NEW
   - Paymethod（現金・クレジット・電子マネー）の件数比率を表示

⑤ 年齢層別売上（棒グラフ）NEW
   - AgeGroup（子供・若者・中高年・高齢者）別のSubtotal合計

⑥ 曜日別平均売上（棒グラフ）NEW
   - Dayofweek（月〜日）別のSubtotal平均値、月曜始まりで並び替え

─── データテーブル（グラフの下）─────────────────────────
- 表示カラム: DateTime / TransactionID / Gender / AgeGroup /
              Item / Price / Amount / Subtotal / Paymethod
- 列ヘッダークリックでソート（昇順／降順トグル）
- テキスト検索ボックス（Item・Gender・AgeGroup・Paymethodで
  リアルタイムフィルタ）
- 1ページ50行、ページネーション付き

─── ファイル読込UI ──────────────────────────────────────
- 初期状態: 画面中央にドラッグ&ドロップエリアを表示
- ドロップまたは「ファイルを選択」ボタンでCSVを読み込む
- 読み込み後: ダッシュボードに切り替え（フェードイン）
- ヘッダーに「別のファイルを読み込む」ボタンを常時表示
- Excel、CSV以外のファイルはエラーメッセージを表示

─── デザイン ─────────────────────────────────────────────
- テーマ: 白背景、クリーン・ミニマル
- フォント: 'Noto Sans JP'（Google Fonts）+ 数値は 'DM Mono'
- アクセントカラー: #2563EB（青）
- グラフ配色:
    ["#2563EB","#059669","#D97706","#7C3AED","#DC2626","#0891B2"]
- KPIカードは背景 #F8F9FA、ボーダーなし、角丸8px
- グラフカードは背景 #FFFFFF、ボーダー 1px solid #E5E7EB、角丸12px
- テーブルはストライプ行（偶数行 #F9FAFB）、ホバーハイライトあり

─── 技術要件 ─────────────────────────────────────────────
- 単一HTMLファイル（index.html）で完結
- 外部依存: Chart.js（cdnjs.cloudflare.com）、Google Fonts のみ
- CSVパースはJavaScriptで自前実装（ライブラリ不使用）
- BOM付きUTF-8・BOMなしUTF-8 どちらも正しく読み込めること
- 1,000行超のCSVでも描画が重くならないよう考慮すること

─── 出力 ──────────────────────────────────────────────────
index.html を1ファイルで出力してください。