PasteProof - コピペ前に確認！個人情報・機密文言チェッカー

## 1. アプリの目的・ターゲットユーザー
社内文書・メール・チャット・SNSへの投稿前に、テキストを貼り付けるだけで個人情報・機密情報・要注意ワードが含まれていないかを即座にチェックできる「誤送信・情報漏洩防止支援ツール」。
- **ターゲット**: 会社員・フリーランサー・営業担当・事務職・ライター・ブロガーなど、文章を日常的に扱う人全般。「送信前に不安になる」体験のある人なら誰でも。
- テキストはサーバに送信せず**ブラウザ内(JS)のみで処理**するためプライバシー安全を強調。

## 2. 主要機能
- **リアルタイム検出**: テキストエリアに文章を貼り付けると即座に問題箇所をハイライト表示。検出カテゴリは以下の5種類。
1. 個人情報（氏名パターン・電話番号・メールアドレス・住所・郵便番号・生年月日・マイナンバー形式）
2. 金融情報（クレジットカード番号・口座番号・暗証番号っぽい4桁連続）
3. 機密ワード（「社外秘」「極秘」「内部資料」「confidential」など約30語の内製リスト）
4. URLとIPアドレス（社内システムURLや内部IPが含まれていないかを確認）
5. カスタムNGワード（ユーザーが独自に登録できるフリーワードリスト、LocalStorage保存）
- **重要度バッジ**: 検出結果をHigh / Medium / Low の3段階でカード一覧表示。件数サマリーを画面上部に表示。
- **マスキング出力**: 「個人情報を★★★に置換してコピー」ボタンで安全なテキストをクリップボードへ。
- **チェック履歴**: 直近10件のチェック結果（文字数・検出件数・日時）をLocalStorageに保存して参照可能。
- **送信判定メーター**: 検出件数・重要度の合計スコアから「🟢 送信OK」「🟡 要確認」「🔴 要修正」の3段階判定を大きく表示。

## 3. 画面構成
### メイン画面（1ページ完結）
- **ヘッダー**: ロゴ「PasteProof」＋「テキストはブラウザ内で処理。サーバに送信しません🔒」の信頼バナー
- **入力エリア**: 大きめのtextarea（最大20,000文字）＋文字数カウンター＋「クリア」ボタン
- **判定メーター**: 入力と同時にリアルタイム更新される信号機UI（大きなアイコンと判定テキスト）
- **ハイライトプレビュー**: 入力テキストをそのまま表示し、問題箇所をカテゴリ別の背景色でハイライト（個人情報=赤、金融=橙、機密ワード=紫、URL/IP=青、カスタム=黄）
- **検出結果カード一覧**: カテゴリアイコン・検出文字列（一部マスク）・重要度バッジ・行番号を縦に並べる
- **マスキング出力エリア**: 置換後テキストとコピーボタン
- **カスタムNGワード設定パネル**: 折りたたみ式、ワードのタグ入力UIでLocalStorage保存
- **チェック履歴パネル**: 折りたたみ式、直近10件をリスト表示

## 4. データ構造
### LocalStorage
- `pasteproof_custom_words`: カスタムNGワードの配列 JSON
- `pasteproof_history`: チェック履歴オブジェクト配列（max10件）
```json
[
{
"id": 1,
"date": "2025-06-01T12:34:00",
"charCount": 800,
"detected": 3,
"verdict": "warning"
}
]
```
### DB不要（完全クライアントサイド）
- PHPはHTMLファイルの配信のみに使用。MySQL不使用。

## 5. デザインの方向性
- **カラー**: ダークネイビー(#1a1f36)を基調とした「セキュリティ系」の信頼感あるUI。アクセントカラーは電気ブルー(#3b82f6)。
- **フォント**: システムフォント。等幅フォントでハイライトプレビューを表示。
- **レイアウト**: PC時は左に入力エリア・右に検出結果の2カラム。スマホ時は縦1カラム積み。
- **アニメーション**: 判定メーター切り替え時にフェードトランジション。検出カード出現時に軽いスライドイン。
- **サイズ**: 単一HTMLファイル＋1CSS＋1JS で完結するシンプル構成。外部CDN依存なし。