Filmarks（フィルマークス）の検索体験を参考にして、アニメ評価アプリの「検索」タブ画面を実装してください。
ダークモード（#0f172a基調、ゴールドアクセント）のデザインを引き継いでください。

【1. ヘッダー＆検索バー】

• 上部に「検索」タイトルと検索入力バー（プレースホルダー：「作品名・声優・制作会社」）。
• 入力中は右に「キャンセル」ボタンとクリア（×）ボタンが表示される。
• 入力中のサジェスト：1文字入力するごとに、キービジュアル付きの予測候補リストがドロップダウンのように表示される。

【2. 検索前（初期状態）のトップ画面】
検索バーに何も入力していないときは以下のコンテンツを表示：

• カテゴリ一覧：
  • 「今期アニメ（2026夏）」「過去クール」「劇場版アニメ」「OVA・短編」など各項目に矢印（>）付きのリスト。
• 配信サービス別（VOD）絞り込み：
  • 「dアニメストア」「Netflix」「U-NEXT」「Amazon Prime」「ABEMA」などのアイコンバッジをグリッド配置し、タップで配信元ごとにアニメを即絞り込める。

【3. 検索結果一覧画面（検索後）】

• 上部フィルタータグ（横スクロール）：[ すべて ] [ 高評価順 ] [ 見放題配信中 ] [ 2026夏 ] [ 歴代名作 ]
• 表示切り替えボタン（Filmarks風）：
  • 「ポスターグリッド表示（3列）」と「リスト表示（横長カード）」を右上のアイコンでワンタップ切り替え可能。
• 各作品カード：
  • ポスター画像、タイトル、全体平均スコア（★ 9.2）、評価数（1.2k）。
  • タップするとその場で星スライダーまたは詳細が開いて評価できる。

【4. ボトムナビゲーション】

• [ 🔍 検索 ] タブをゴールドでアクティブ状態にする。

※動作確認用に、検索入力時のサジェストやポスター/リスト切り替えが動くダミーデータをセットしてください。