セキュリティ自己診断レポート

当ツールは、情報の不透明さを排除するため、開発にあたりAI（大規模言語モデル）を用いたホワイトハッカー視点のセキュリティ診断を実施しました。その結果を包み隠さず公開します。
📋 セキュリティ分析結果（AIによる評価）

結論：このツール自体の設計は「サーバーサイドの脆弱性」を極めて生み出しにくい構造になっています。
1. サーバーサイドへの攻撃（OSコマンド注入・RCEなど）
【分析：攻撃は極めて困難】
このツールは「サーバーにファイルを送らない」設計です。PDFの解析・結合・編集はすべて利用者のブラウザで行われます。攻撃者がサーバーに悪意のあるPDFをアップロードしても処理が走らないため、サーバーを乗っ取る足がかりがありません。
2. クロスサイト・スクリプティング（XSS）
【分析：対策済み】
PDF内のスクリプトを実行せず、Canvasへ「画像として描画」するだけなので、PDF由来の攻撃は無効化されます。テキスト追加機能もHTMLではなく画像として焼き付けるため、悪意のあるコードが実行されることはありません。
3. サプライチェーン攻撃（ライブラリの汚染）
【分析：対策済み】
外部のCDN（ライブラリ配信元）がハッキングされるリスクに対し、本ツールは「バージョンの完全固定」と「SRI（Subresource Integrity: 改ざん検知のハッシュ値）」の付与を行っています。これにより、万が一配信元が改ざんされても悪意のあるスクリプトは実行されません。
ご自身で安全性を点検（検証）する方法

上記のレポートだけでなく、プログラミングの知識がない方でも、普段お使いのAI（ChatGPTやClaudeなど）にツールのコードを読ませることで、「本当にファイルを送っていないか？」をご自身の手で客観的に検証することができます。
質問テンプレートをコピー
下の青い枠内にあるAIへの質問文をコピーします。
ソースコードをコピー
ページ最下部の黒い枠内にあるツールの全コードをコピーします。
AIに貼り付けて質問
お使いのAI（ChatGPTなど）に「1」と「2」を貼り付けて送信してください。
AIへの質問用テンプレート（コピーして使えます）

以下のHTMLコードは、「ブラウザ完結で安全に動く無料のPDFエディタ」の全ソースコードです。
セキュリティやプライバシーの観点から、このコードを解析し、以下の点について専門家として解説してください。

1. ユーザーがアップロードしたPDFファイルの中身や画像が、外部のサーバーへ送信（アップロード）されるような処理が含まれていないか？
2. 悪意のあるコードや、情報を盗み取るような怪しいプログラムが隠されていないか？
3. アクセス解析（Google Tag Manager等）のタグが含まれているようだが、それは一般的な統計取得の範囲内であり、ファイルの中身自体を送信するものではないか？

【ソースコード】
（※ここに下のソースコードを貼り付けてください）
tool.html (ツール本体の全コード)
<!DOCTYPE html>
<html lang="ja">
<head>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-WJN2MK5N');</script>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Secure PDF Toolkit | エディタ画面</title>
  
  <script src="https://cdn.tailwindcss.com/3.4.1"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" xintegrity="sha512-8Q6Y9XnTbce/xXAQyvto/xZkSfjyEwS//PZz63mZILgI8T3bH3fLwV/Kof2eAOkR07HqWqQoEw90zQ8jEIfNzg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" xintegrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.2/babel.min.js" xintegrity="sha512-ND11pbmp3M3Wldj90In1EUlHIt8T7O6FykizQ/yXrFjHtpX+D0SX+/IVeLjqAV91r/Lavq4BpWJIC0nUtw5Kvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js" xintegrity="sha512-z8IYLHO8bTgFqj+yrPyIJnzBDf7DDhWwiEsk4sY+Oe6J2M+WQequeGS7qioI5vT6rXgVRb4K1UVQC5ER7MKzKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <style>
    body { -webkit-tap-highlight-color: transparent; }
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    .editor-textarea { resize: none; background: transparent; border: none; outline: none; width: 100%; height: 100%; padding: 0; margin: 0; box-sizing: border-box; }
    input[type="color"] { -webkit-appearance: none; border: none; width: 24px; height: 24px; border-radius: 4px; overflow: hidden; cursor: pointer; padding: 0; }
    input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
    input[type="color"]::-webkit-color-swatch { border: 1px solid #4b5563; border-radius: 4px; }
  </style>
</head>
<body class="bg-gray-100 text-gray-800 font-sans">
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJN2MK5N"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

  <div id="root"></div>

  <script type="text/babel" data-type="module">
    const { useState, useEffect, useRef, useCallback } = React;

    const trackEvent = (eventName, eventParams = {}) => {
      if (window.dataLayer) window.dataLayer.push({ event: eventName, ...eventParams });
      else console.log(`[Tracking] ${eventName}`, eventParams);
    };

    const DB_NAME = 'SecurePDFCacheDB_Standalone';
    const STORE_NAME = 'pdf_files';
    const initDB = () => new Promise((resolve, reject) => {
      const request = window.indexedDB.open(DB_NAME, 1);
      request.onupgradeneeded = (e) => e.target.result.createObjectStore(STORE_NAME);
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
    const saveToDB = async (key, buffer) => {
      const db = await initDB();
      return new Promise((resolve, reject) => {
        const tx = db.transaction(STORE_NAME, 'readwrite');
        tx.objectStore(STORE_NAME).put(buffer, key);
        tx.oncomplete = () => resolve();
        tx.onerror = () => reject(tx.error);
      });
    };
    const getFromDB = async (key) => {
      const db = await initDB();
      return new Promise((resolve, reject) => {
        const tx = db.transaction(STORE_NAME, 'readonly');
        const req = tx.objectStore(STORE_NAME).get(key);
        req.onsuccess = () => resolve(req.result);
        req.onerror = () => reject(req.error);
      });
    };
    const clearDB = async () => {
      const db = await initDB();
      return new Promise((resolve, reject) => {
        const tx = db.transaction(STORE_NAME, 'readwrite');
        tx.objectStore(STORE_NAME).clear();
        tx.oncomplete = () => resolve();
        tx.onerror = () => reject(tx.error);
      });
    };
    window.addEventListener('beforeunload', () => { window.indexedDB.deleteDatabase(DB_NAME); });

    const TrashIcon = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>;
    const RotateIcon = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 2v6h-6M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8"/></svg>;
    const MaskIcon = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>;
    const TextIcon = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>;
    const UndoIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"/></svg>;
    const MoveLeftIcon = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="15 18 9 12 15 6"></polyline></svg>;
    const MoveRightIcon = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="9 18 15 12 9 6"></polyline></svg>;
    const CheckCircleIcon = () => <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-green-500 mx-auto mb-4"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>;
    const AlertCircleIcon = () => <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-red-500 mx-auto mb-4"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>;
    const ShieldIcon = () => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    const ShieldSmallIcon = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="mr-1 inline"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    const HandIcon = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 11V6a2 2 0 0 0-4 0v4"/><path d="M14 10V5a2 2 0 0 0-4 0v5"/><path d="M10 9.5V4a2 2 0 0 0-4 0v11.5"/><path d="M6 14v-2a2 2 0 1 0-4 0v6a8 8 0 0 0 16 0V13a2 2 0 1 0-4 0v-2"/></svg>;
    const BoldIcon = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>;
    const ItalicIcon = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"></line><line x1="15" y1="4" x2="9" y2="20"></line></svg>;
    const UnderlineIcon = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"></path><line x1="4" y1="21" x2="20" y2="21"></line></svg>;

    const mmToPt = (mm) => (mm * 72) / 25.4;
    const PAGE_SIZES = {
      ORIGINAL: 'original', A3: [mmToPt(297), mmToPt(420)], A4: [mmToPt(210), mmToPt(297)],
      A5: [mmToPt(148), mmToPt(210)], B4: [mmToPt(257), mmToPt(364)], B5: [mmToPt(182), mmToPt(257)],
    };
    const BASE_WIDTH_PT = 595.28;

    const LazyPageCard = ({ page, index, totalPages, isDragged, onDragStart, onDragOver, onDrop, movePage, rotatePage, toggleDelete, openEditor }) => {
      const [imgUrl, setImgUrl] = useState(null);
      const [isVisible, setIsVisible] = useState(false);
      const cardRef = useRef(null);

      useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
          if (entries[0].isIntersecting) { setIsVisible(true); observer.disconnect(); }
        }, { rootMargin: '100px' });
        if (cardRef.current) observer.observe(cardRef.current);
        return () => observer.disconnect();
      }, []);

      const annString = JSON.stringify(page.annotations || []);

      useEffect(() => {
        if (!isVisible) return;
        let isMounted = true;
        const loadThumbnail = async () => {
          try {
            const arrayBuffer = await getFromDB(page.fileId);
            if (!arrayBuffer) return;
            const uint8Array = new Uint8Array(arrayBuffer);
            const loadingTask = window.pdfjsLib.getDocument({ data: uint8Array });
            const pdfDoc = await loadingTask.promise;
            const pdfPage = await pdfDoc.getPage(page.pageIndex);
            
            const viewport = pdfPage.getViewport({ scale: 0.4 });
            const pdfCanvas = document.createElement('canvas');
            pdfCanvas.width = viewport.width;
            pdfCanvas.height = viewport.height;
            const pdfCtx = pdfCanvas.getContext('2d');
            
            pdfCtx.fillStyle = 'white';
            pdfCtx.fillRect(0, 0, pdfCanvas.width, pdfCanvas.height);
            await pdfPage.render({ canvasContext: pdfCtx, viewport }).promise;

            const editRot = page.editRotation !== undefined ? page.editRotation : page.rotation;
            const extraRot = page.rotation - editRot;

            const isEditSideways = editRot % 180 !== 0;
            const editCanvas = document.createElement('canvas');
            editCanvas.width = isEditSideways ? viewport.height : viewport.width;
            editCanvas.height = isEditSideways ? viewport.width : viewport.height;
            const editCtx = editCanvas.getContext('2d');
            
            editCtx.fillStyle = 'white';
            editCtx.fillRect(0, 0, editCanvas.width, editCanvas.height);
            editCtx.save();
            editCtx.translate(editCanvas.width / 2, editCanvas.height / 2);
            editCtx.rotate((editRot * Math.PI) / 180);
            editCtx.drawImage(pdfCanvas, -pdfCanvas.width / 2, -pdfCanvas.height / 2);
            editCtx.restore();

            if (page.annotations && page.annotations.length > 0) {
              page.annotations.forEach(ann => {
                const ax = ann.rx * editCanvas.width;
                const ay = ann.ry * editCanvas.height;
                const aw = ann.rw * editCanvas.width;
                const ah = ann.rh * editCanvas.height;

                editCtx.save();
                editCtx.beginPath();
                editCtx.rect(ax, ay, aw, ah);
                editCtx.clip();

                if (ann.type === 'rect') {
                   if (ann.bgColor && ann.bgColor !== 'transparent') {
                      editCtx.fillStyle = ann.bgColor;
                      editCtx.fillRect(ax, ay, aw, ah);
                   }
                } else if (ann.type === 'text') {
                  if (ann.bgColor && ann.bgColor !== 'transparent') {
                    editCtx.fillStyle = ann.bgColor;
                    editCtx.fillRect(ax, ay, aw, ah);
                  }
                  if (ann.text) {
                    editCtx.fillStyle = ann.color || '#000000';
                    const fontSizePx = Math.floor(editCanvas.width * ((ann.fontSize || 16) / BASE_WIDTH_PT));
                    const fStyle = ann.isItalic ? 'italic ' : '';
                    const fWeight = ann.isBold ? 'bold ' : 'normal ';
                    editCtx.font = `${fStyle}${fWeight}${fontSizePx}px ${ann.fontFamily || 'sans-serif'}`;
                    editCtx.textBaseline = 'top';
                    
                    if ('letterSpacing' in editCtx) {
                      editCtx.letterSpacing = `${ann.letterSpacing || 0}em`;
                    }
                    
                    const lines = ann.text.split('\n');
                    const lineHeightPx = fontSizePx * (ann.lineHeight || 1.2);

                    for (let j = 0; j < lines.length; j++) {
                      const lineStr = lines[j];
                      const charY = ay + (j * lineHeightPx);
                      editCtx.fillText(lineStr, ax, charY);
                      
                      if (ann.isUnderline) {
                        const textWidth = editCtx.measureText(lineStr).width;
                        const underlineY = charY + fontSizePx * 1.05; 
                        const underlineHeight = Math.max(1, fontSizePx * 0.05);
                        editCtx.fillRect(ax, underlineY, textWidth, underlineHeight);
                      }
                    }
                  }
                }
                editCtx.restore();
              });
            }

            const isFinalSideways = page.rotation % 180 !== 0;
            const finalCanvas = document.createElement('canvas');
            finalCanvas.width = isFinalSideways ? viewport.height : viewport.width;
            finalCanvas.height = isFinalSideways ? viewport.width : viewport.height;
            const finalCtx = finalCanvas.getContext('2d');

            finalCtx.fillStyle = 'white';
            finalCtx.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
            finalCtx.save();
            finalCtx.translate(finalCanvas.width / 2, finalCanvas.height / 2);
            finalCtx.rotate((extraRot * Math.PI) / 180);
            finalCtx.drawImage(editCanvas, -editCanvas.width / 2, -editCanvas.height / 2);
            finalCtx.restore();
            
            finalCanvas.toBlob((blob) => {
              if (isMounted && blob) setImgUrl(URL.createObjectURL(blob));
              pdfCanvas.width = 0; pdfCanvas.height = 0;
              editCanvas.width = 0; editCanvas.height = 0;
              finalCanvas.width = 0; finalCanvas.height = 0;
              pdfPage.cleanup();
              pdfDoc.destroy();
            }, 'image/jpeg', 0.6);
          } catch (err) { console.error("Thumbnail error:", err); }
        };
        loadThumbnail();
        return () => { isMounted = false; };
      }, [isVisible, page.fileId, page.pageIndex, page.rotation, page.editRotation, annString]);

      useEffect(() => { return () => { if (imgUrl) URL.revokeObjectURL(imgUrl); }; }, [imgUrl]);

      const isSideways = page.rotation % 180 !== 0;
      let wrapperStyle = { width: '100%', height: '100%' };

      if (page.origWidth && page.origHeight) {
        const parentAspect = 1 / 1.414; 
        const actualW = isSideways ? page.origHeight : page.origWidth;
        const actualH = isSideways ? page.origWidth : page.origHeight;
        const imgAspect = actualW / actualH;
        
        if (imgAspect > parentAspect) { wrapperStyle = { width: '100%', height: 'auto', aspectRatio: `${actualW} / ${actualH}` }; } 
        else { wrapperStyle = { width: 'auto', height: '100%', aspectRatio: `${actualW} / ${actualH}` }; }
      }

      return (
        <div ref={cardRef} draggable onDragStart={(e) => onDragStart(e, index)} onDragOver={onDragOver} onDrop={(e) => onDrop(e, index)}
          className={`relative bg-white rounded-lg border-2 overflow-hidden shadow-sm transition-all flex flex-col h-full
            ${isDragged ? 'opacity-50' : 'opacity-100'} ${page.deleted ? 'border-red-200 bg-red-50' : 'border-transparent hover:border-blue-400 cursor-move'}`}
        >
          <div className="absolute top-1 left-1 bg-black bg-opacity-70 text-white text-[10px] px-1.5 py-0.5 rounded z-10 font-mono">{index + 1}</div>
          <div className={`aspect-[1/1.414] relative overflow-hidden flex items-center justify-center bg-gray-100 ${page.deleted ? 'opacity-30' : ''}`}>
            {!imgUrl ? ( <div className="text-gray-400 text-xs animate-pulse">Loading...</div> ) : (
              <div className="relative m-auto" style={wrapperStyle}>
                <img src={imgUrl} alt={`Page ${index + 1}`} className="absolute inset-0 w-full h-full object-contain pointer-events-none shadow-[0_0_2px_rgba(0,0,0,0.1)]" />
              </div>
            )}
          </div>
          <div className="bg-gray-50 border-t flex flex-col mt-auto shrink-0">
            {!page.deleted ? (
              <>
                <div className="flex border-b border-gray-200">
                  <button onClick={() => movePage(index, -1)} disabled={index === 0} className="flex-1 py-1.5 flex justify-center text-gray-500 hover:bg-gray-200 disabled:opacity-30 transition"><MoveLeftIcon/></button>
                  <div className="w-px bg-gray-200"></div>
                  <button onClick={() => movePage(index, 1)} disabled={index === totalPages - 1} className="flex-1 py-1.5 flex justify-center text-gray-500 hover:bg-gray-200 disabled:opacity-30 transition"><MoveRightIcon/></button>
                </div>
                <div className="flex justify-between items-center p-1 gap-1">
                  <button onClick={() => rotatePage(page.id)} title="回転" className="flex-1 flex justify-center p-1.5 text-gray-600 hover:bg-white hover:shadow rounded transition"><RotateIcon/></button>
                  <button onClick={() => openEditor(page)} title="編集（墨消し・文字追加）" className={`flex-1 flex justify-center p-1.5 rounded transition ${page.annotations && page.annotations.length > 0 ? 'bg-blue-600 text-white shadow' : 'text-gray-600 hover:bg-white hover:shadow'}`}><MaskIcon/></button>
                  <button onClick={() => toggleDelete(page.id)} title="削除" className="flex-1 flex justify-center p-1.5 text-red-500 hover:bg-red-50 rounded transition"><TrashIcon/></button>
                </div>
              </>
            ) : (
              <div className="p-2"><button onClick={() => toggleDelete(page.id)} className="w-full py-2 text-xs md:text-sm text-blue-600 hover:bg-blue-50 rounded font-bold">復元する</button></div>
            )}
          </div>
        </div>
      );
    };

    function App() {
      const [agreed, setAgreed] = useState(false);
      const [pdfjsReady, setPdfjsReady] = useState(false);

      const [pages, setPages] = useState([]);
      const [outputSize, setOutputSize] = useState('ORIGINAL');
      const [draggedIdx, setDraggedIdx] = useState(null);

      const [editingPage, setEditingPage] = useState(null);
      const [editorImgUrl, setEditorImgUrl] = useState(null);
      const [isEditorLoading, setIsEditorLoading] = useState(false);
      const [editorMode, setEditorMode] = useState('pan'); 
      const [zoomLevel, setZoomLevel] = useState(1);
      const [canvasSize, setCanvasSize] = useState({ w: 0, h: 0 });
      
      const containerRef = useRef(null);
      const scrollContainerRef = useRef(null);
      
      const [history, setHistory] = useState([]);
      const [historyIndex, setHistoryIndex] = useState(-1);
      const annotationsRef = useRef([]);
      
      const [selectedId, setSelectedId] = useState(null);
      const [isEditingText, setIsEditingText] = useState(false);
      const [isDrawing, setIsDrawing] = useState(false);
      const [startPos, setStartPos] = useState({ x: 0, y: 0 });
      const [currentRect, setCurrentRect] = useState(null);
      const [draggingObj, setDraggingObj] = useState(null);
      const [resizingObj, setResizingObj] = useState(null);
      
      const [isPanning, setIsPanning] = useState(false);
      const [panStart, setPanStart] = useState({x: 0, y: 0});
      const [scrollStart, setScrollStart] = useState({left: 0, top: 0});

      const [isProcessing, setIsProcessing] = useState(false);
      const [progressData, setProgressData] = useState({ current: 0, total: 0, text: '' });
      const [downloadInfo, setDownloadInfo] = useState(null);
      const [errorMsg, setErrorMsg] = useState('');
      const [confirmClear, setConfirmClear] = useState(false);

      const [isFileDragging, setIsFileDragging] = useState(false);
      const dragCounter = useRef(0);

      useEffect(() => {
        const isAgreed = localStorage.getItem('SecurePDF_Agreed');
        if (isAgreed === 'true') setAgreed(true);

        const script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
        script.integrity = 'sha512-q+4liFwdPC/bNdhUpZx6aXDx/h77yEQtn4I1slHydcbZK34nLaR3cAeYSJshoxIOq3mjEf7xJE8YWIUHMn+oCQ==';
        script.crossOrigin = 'anonymous';
        script.referrerPolicy = 'no-referrer';
        script.onload = () => {
          window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
          setPdfjsReady(true);
        };
        script.onerror = () => {
          setErrorMsg("PDFエンジンの読み込みに失敗しました。SRIハッシュの検証エラー、またはネットワークエラーの可能性があります。");
        };
        document.head.appendChild(script);
        
        clearDB();
      }, []);

      useEffect(() => {
        if (editingPage) annotationsRef.current = editingPage.annotations;
      }, [editingPage]);

      const handleAgree = () => {
        setAgreed(true);
        localStorage.setItem('SecurePDF_Agreed', 'true');
        trackEvent('agreed_to_terms'); 
      };

      const executeClearAll = async () => {
        setConfirmClear(false);
        await clearDB();
        setPages([]);
        trackEvent('cache_cleared'); 
      };

      const handleFilesAdded = async (e) => {
        const files = Array.from(e.target.files).filter(f => f.type === 'application/pdf');
        if (files.length === 0 || !pdfjsReady) return;
        trackEvent('files_added', { file_count: files.length }); 
        setIsProcessing(true);
        setProgressData({ current: 0, total: 1, text: 'ファイルの解析と暗号化キャッシュへの退避中...' });

        try {
          const newPages = [...pages];
          for (const file of files) {
            const arrayBuffer = await file.arrayBuffer();
            const fileId = `file_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
            await saveToDB(fileId, arrayBuffer);
            const uint8Array = new Uint8Array(arrayBuffer);
            const loadingTask = window.pdfjsLib.getDocument({ data: uint8Array });
            const pdfDoc = await loadingTask.promise;
            const totalPages = pdfDoc.numPages;
            for (let i = 1; i <= totalPages; i++) {
              const page = await pdfDoc.getPage(i);
              const origViewport = page.getViewport({ scale: 1.0 });
              newPages.push({
                id: `page_${fileId}_${i}`, fileId: fileId, pageIndex: i, 
                rotation: 0, editRotation: 0,
                deleted: false, annotations: [],
                origWidth: origViewport.width, origHeight: origViewport.height
              });
              page.cleanup();
            }
          }
          setPages(newPages);
        } catch (err) { 
          setErrorMsg("PDFの解析に失敗しました。\n詳細: パスワード保護や「編集・改変禁止」設定がされている可能性があります。"); 
          trackEvent('error_occurred', { error_type: 'parse_failed', details: err.message }); 
        }
        setIsProcessing(false);
      };

      const handleFileDragEnter = (e) => {
        e.preventDefault();
        e.stopPropagation();
        if (e.dataTransfer.types && Array.from(e.dataTransfer.types).includes('Files')) {
          dragCounter.current += 1;
          if (dragCounter.current === 1) setIsFileDragging(true);
        }
      };

      const handleFileDragOver = (e) => {
        e.preventDefault();
        e.stopPropagation();
        if (e.dataTransfer.types && Array.from(e.dataTransfer.types).includes('Files')) {
          e.dataTransfer.dropEffect = 'copy';
        }
      };

      const handleFileDragLeave = (e) => {
        e.preventDefault();
        e.stopPropagation();
        if (e.dataTransfer.types && Array.from(e.dataTransfer.types).includes('Files')) {
          dragCounter.current -= 1;
          if (dragCounter.current === 0) setIsFileDragging(false);
        }
      };

      const handleFileDrop = (e) => {
        e.preventDefault();
        e.stopPropagation();
        dragCounter.current = 0;
        setIsFileDragging(false);
        
        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
          handleFilesAdded({ target: { files: e.dataTransfer.files, value: '' } });
        }
      };

      const toggleDelete = useCallback((id) => setPages(prev => prev.map(p => p.id === id ? { ...p, deleted: !p.deleted } : p)), []);
      const rotatePage = useCallback((id) => setPages(prev => prev.map(p => p.id === id ? { ...p, rotation: (p.rotation + 90) % 360 } : p)), []);
      const movePage = useCallback((index, direction) => {
        setPages(prev => {
          const newPages = [...prev];
          if (index + direction < 0 || index + direction >= newPages.length) return prev;
          const temp = newPages[index];
          newPages[index] = newPages[index + direction];
          newPages[index + direction] = temp;
          return newPages;
        });
      }, []);

      const handleDragStart = (e, index) => { setDraggedIdx(index); e.dataTransfer.effectAllowed = "move"; };
      const handleDragOverItem = (e) => e.preventDefault();
      const handleDropItem = (e, dropIndex) => {
        e.preventDefault();
        if (draggedIdx === null || draggedIdx === dropIndex) return;
        setPages(prev => {
          const newPages = [...prev];
          const item = newPages.splice(draggedIdx, 1)[0];
          newPages.splice(dropIndex, 0, item);
          return newPages;
        });
        setDraggedIdx(null);
      };

      const commitHistory = () => {
        const currentAnns = [...annotationsRef.current];
        setHistory(h => {
          const newHistory = h.slice(0, historyIndex + 1);
          if (newHistory.length > 0 && JSON.stringify(newHistory[newHistory.length - 1]) === JSON.stringify(currentAnns)) return h;
          newHistory.push(currentAnns);
          setHistoryIndex(newHistory.length - 1);
          return newHistory;
        });
      };

      const undo = () => {
        if (historyIndex > 0) {
          const prev = history[historyIndex - 1];
          setEditingPage(p => ({ ...p, annotations: prev }));
          setHistoryIndex(historyIndex - 1);
          setSelectedId(null);
          setIsEditingText(false);
        }
      };

      const redo = () => {
        if (historyIndex < history.length - 1) {
          const next = history[historyIndex + 1];
          setEditingPage(p => ({ ...p, annotations: next }));
          setHistoryIndex(historyIndex + 1);
          setSelectedId(null);
          setIsEditingText(false);
        }
      };

      const openEditor = async (pageToEdit) => {
        let page = { ...pageToEdit };
        
        if (page.annotations && page.annotations.length > 0 && page.editRotation !== undefined && page.rotation !== page.editRotation) {
            page.rotation = page.editRotation;
            setPages(prev => prev.map(p => p.id === page.id ? { ...p, rotation: page.editRotation } : p));
        }

        setIsEditorLoading(true);
        setZoomLevel(1);
        setEditorMode('pan'); 
        setSelectedId(null);
        setIsEditingText(false);
        document.body.style.overflow = 'hidden'; 
        trackEvent('editor_opened'); 

        const migratedAnns = (page.annotations || []).map(ann => {
           if(ann.type === 'blackout' || !ann.type) return { ...ann, type: 'rect', bgColor: '#000000' };
           if(ann.type === 'whiteout') return { ...ann, type: 'rect', bgColor: '#ffffff' };
           return ann;
        });
        setHistory([migratedAnns]);
        setHistoryIndex(0);

        try {
          const arrayBuffer = await getFromDB(page.fileId);
          const uint8Array = new Uint8Array(arrayBuffer);
          const loadingTask = window.pdfjsLib.getDocument({ data: uint8Array });
          const pdfDoc = await loadingTask.promise;
          const pdfPage = await pdfDoc.getPage(page.pageIndex);
          
          const viewport = pdfPage.getViewport({ scale: 2.0 });
          const canvas = document.createElement('canvas');
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          const ctx = canvas.getContext('2d');
          
          ctx.fillStyle = 'white';
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          await pdfPage.render({ canvasContext: ctx, viewport }).promise;
          
          const isSideways = page.rotation % 180 !== 0;
          const finalCanvas = document.createElement('canvas');
          finalCanvas.width = isSideways ? viewport.height : viewport.width;
          finalCanvas.height = isSideways ? viewport.width : viewport.height;
          const finalCtx = finalCanvas.getContext('2d');
          
          finalCtx.fillStyle = 'white';
          finalCtx.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
          finalCtx.save();
          finalCtx.translate(finalCanvas.width / 2, finalCanvas.height / 2);
          finalCtx.rotate((page.rotation * Math.PI) / 180);
          finalCtx.drawImage(canvas, -canvas.width / 2, -canvas.height / 2);
          finalCtx.restore();

          setCanvasSize({ w: finalCanvas.width, h: finalCanvas.height });
          
          finalCanvas.toBlob((blob) => {
            setEditorImgUrl(URL.createObjectURL(blob));
            setEditingPage({ ...page, annotations: migratedAnns });
            setIsEditorLoading(false);
            canvas.width = 0; canvas.height = 0;
            finalCanvas.width = 0; finalCanvas.height = 0;
            pdfPage.cleanup();
          }, 'image/jpeg', 0.9);
        } catch (err) {
          setIsEditorLoading(false);
          setErrorMsg("エディタ画像の生成に失敗しました。\n詳細: " + err.message);
          trackEvent('error_occurred', { error_type: 'editor_load_failed', details: err.message }); 
          document.body.style.overflow = '';
        }
      };

      const closeEditor = () => {
        setEditingPage(null);
        if (editorImgUrl) URL.revokeObjectURL(editorImgUrl);
        setEditorImgUrl(null);
        setSelectedId(null);
        setIsEditingText(false);
        document.body.style.overflow = '';
      };

      const saveAnnotations = () => {
        setPages(pages.map(p => p.id === editingPage.id ? { ...editingPage, editRotation: editingPage.rotation } : p));
        closeEditor();
      };

      const getCoordinates = (e) => {
        if (!containerRef.current) return { x: 0, y: 0 };
        const rect = containerRef.current.getBoundingClientRect();
        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
        return { 
          x: Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)), 
          y: Math.max(0, Math.min(1, (clientY - rect.top) / rect.height)) 
        };
      };

      const handleWrapperPointerDown = (e) => {
        if (editorMode === 'pan') {
          setIsPanning(true);
          setPanStart({ x: e.clientX || (e.touches && e.touches[0].clientX), y: e.clientY || (e.touches && e.touches[0].clientY) });
          if(scrollContainerRef.current) {
            setScrollStart({ left: scrollContainerRef.current.scrollLeft, top: scrollContainerRef.current.scrollTop });
          }
        }
      };

      const handleWrapperPointerMove = (e) => {
        if (editorMode === 'pan' && isPanning && scrollContainerRef.current) {
          const clientX = e.clientX || (e.touches && e.touches[0].clientX);
          const clientY = e.clientY || (e.touches && e.touches[0].clientY);
          scrollContainerRef.current.scrollLeft = scrollStart.left - (clientX - panStart.x);
          scrollContainerRef.current.scrollTop = scrollStart.top - (clientY - panStart.y);
        }
      };

      const handleWrapperPointerUp = () => setIsPanning(false);

      const handleBgPointerDown = (e) => { 
        if (e.touches && e.touches.length > 1) return;
        
        let wasEditing = isEditingText;

        if(isEditingText) {
           setIsEditingText(false);
           setTimeout(() => commitHistory(), 0);
        }
        setSelectedId(null);

        if (editorMode === 'pan') return;
        if (wasEditing) return; 
        
        setIsDrawing(true); 
        setStartPos(getCoordinates(e)); 
      };

      const handlePointerMove = (e) => {
        if (editorMode === 'pan' && !draggingObj && !resizingObj) return;
        if (e.touches && e.touches.length > 1) { setIsDrawing(false); setDraggingObj(null); setResizingObj(null); setCurrentRect(null); return; }
        if (!isDrawing && !draggingObj && !resizingObj) return;
        
        if (e.cancelable) e.preventDefault(); 
        const pos = getCoordinates(e);

        if (resizingObj) {
          const dx = pos.x - resizingObj.startX;
          const dy = pos.y - resizingObj.startY;
          updateSelectedAnnRealtime({
            rw: Math.max(0.02, resizingObj.startRw + dx),
            rh: Math.max(0.02, resizingObj.startRh + dy)
          });
        } else if (draggingObj) {
          const dx = pos.x - draggingObj.startX;
          const dy = pos.y - draggingObj.startY;
          updateSelectedAnnRealtime({
            rx: Math.max(0, Math.min(1 - draggingObj.startRw, draggingObj.startRx + dx)),
            ry: Math.max(0, Math.min(1 - draggingObj.startRh, draggingObj.startRy + dy))
          });
        } else if (isDrawing) {
          setCurrentRect({
            x: Math.min(startPos.x, pos.x), y: Math.min(startPos.y, pos.y),
            w: Math.abs(pos.x - startPos.x), h: Math.abs(pos.y - startPos.y)
          });
        }
      };

      const handlePointerUp = (e) => {
        if(editorMode === 'pan') return;
        let changed = false;

        if (isDrawing) {
          if (currentRect && currentRect.w > 0.01 && currentRect.h > 0.01) {
            const newAnn = {
              id: 'ann_' + Date.now() + Math.random().toString(36).substr(2, 5),
              type: editorMode,
              rx: currentRect.x, ry: currentRect.y, rw: currentRect.w, rh: currentRect.h,
              text: editorMode === 'text' ? '' : undefined,
              fontSize: 16, fontFamily: 'sans-serif', 
              color: '#000000', bgColor: editorMode === 'rect' ? '#000000' : 'transparent',
              letterSpacing: 0, lineHeight: 1.2,
              isBold: false, isItalic: false, isUnderline: false
            };
            setEditingPage(prev => ({ ...prev, annotations: [...prev.annotations, newAnn] }));
            setSelectedId(newAnn.id);
            if (editorMode === 'text') setIsEditingText(false); 
            changed = true;
          } else if (editorMode === 'text' && (!currentRect || currentRect.w <= 0.01)) {
            const defaultW = 0.15;
            const defaultH = 0.03;
            const pos = getCoordinates(e);
            const newAnn = {
              id: 'ann_' + Date.now() + Math.random().toString(36).substr(2, 5),
              type: 'text',
              rx: Math.min(pos.x, 1 - defaultW), ry: Math.min(pos.y, 1 - defaultH), rw: defaultW, rh: defaultH,
              text: '', fontSize: 16, fontFamily: 'sans-serif', color: '#000000', bgColor: 'transparent',
              letterSpacing: 0, lineHeight: 1.2,
              isBold: false, isItalic: false, isUnderline: false
            };
            setEditingPage(prev => ({ ...prev, annotations: [...prev.annotations, newAnn] }));
            setSelectedId(newAnn.id);
            setIsEditingText(false);
            changed = true;
          }
        } else if (draggingObj || resizingObj) {
           changed = true;
        }
        
        setIsDrawing(false); 
        setCurrentRect(null);
        setDraggingObj(null);
        setResizingObj(null);

        if(changed) setTimeout(() => commitHistory(), 0);
      };

      const handleObjPointerDown = (e, ann) => {
        if (editorMode === 'pan') return;
        e.stopPropagation(); 
        
        if(isEditingText && selectedId !== ann.id) {
           setIsEditingText(false);
           setTimeout(() => commitHistory(), 0);
        }
        setSelectedId(ann.id);
        
        const pos = getCoordinates(e);
        setDraggingObj({ id: ann.id, startX: pos.x, startY: pos.y, startRx: ann.rx, startRy: ann.ry, startRw: ann.rw, startRh: ann.rh });
      };

      const handleResizePointerDown = (e, ann) => {
        e.stopPropagation();
        setSelectedId(ann.id);
        const pos = getCoordinates(e);
        setResizingObj({ id: ann.id, startX: pos.x, startY: pos.y, startRw: ann.rw, startRh: ann.rh });
      };

      const updateSelectedAnnRealtime = (updates) => {
        if (!selectedId) return;
        setEditingPage(prev => ({
            ...prev, annotations: prev.annotations.map(ann => ann.id === selectedId ? { ...ann, ...updates } : ann)
        }));
      };

      const updateSelectedAnnProperty = (updates) => {
        if (!selectedId) return;
        setEditingPage(prev => ({
            ...prev, annotations: prev.annotations.map(ann => ann.id === selectedId ? { ...ann, ...updates } : ann)
        }));
        setTimeout(() => commitHistory(), 0);
      };

      const deleteSelectedAnn = () => {
        if (!selectedId) return;
        setEditingPage(prev => ({ ...prev, annotations: prev.annotations.filter(ann => ann.id !== selectedId) }));
        setSelectedId(null);
        setIsEditingText(false);
        setTimeout(() => commitHistory(), 0);
      };

      const generatePDF = async () => {
        if (!window.PDFLib || pages.length === 0) return;
        trackEvent('pdf_export_started', { target_size: outputSize }); 
        
        setIsProcessing(true);
        const validPages = pages.filter(p => !p.deleted);
        setProgressData({ current: 0, total: validPages.length, text: 'PDF出力エンジンの初期化中...' });

        try {
          const { PDFDocument, degrees } = window.PDFLib;
          const finalDoc = await PDFDocument.create();
          const isOriginalSize = outputSize === 'ORIGINAL';
          const selectedSize = !isOriginalSize ? PAGE_SIZES[outputSize] : null;

          for (let i = 0; i < validPages.length; i++) {
            const p = validPages[i];
            await new Promise(resolve => setTimeout(resolve, 50));

            const isSideways = p.rotation % 180 !== 0;
            const actualW = isSideways ? p.origHeight : p.origWidth;
            const actualH = isSideways ? p.origWidth : p.origHeight;
            const targetW = isOriginalSize ? actualW : selectedSize[0];
            const targetH = isOriginalSize ? actualH : selectedSize[1];
            const scale = isOriginalSize ? 1 : Math.min(targetW / actualW, targetH / actualH);

            if (p.annotations && p.annotations.length > 0) {
              setProgressData({ current: i + 1, total: validPages.length, text: `ページ ${i + 1} の安全な再レンダリング処理中...` });
              
              const fileBuffer = await getFromDB(p.fileId);
              const bufferForPdfJs = new Uint8Array(fileBuffer);
              const pdfjsDoc = await window.pdfjsLib.getDocument({ data: bufferForPdfJs }).promise;
              const jsPage = await pdfjsDoc.getPage(p.pageIndex);
              
              const resScale = 2.0; 
              const viewport = jsPage.getViewport({ scale: resScale });
              
              const pdfCanvas = document.createElement('canvas');
              pdfCanvas.width = viewport.width;
              pdfCanvas.height = viewport.height;
              const pdfCtx = pdfCanvas.getContext('2d');
              pdfCtx.fillStyle = 'white';
              pdfCtx.fillRect(0, 0, pdfCanvas.width, pdfCanvas.height);
              await jsPage.render({ canvasContext: pdfCtx, viewport }).promise;

              const editRot = p.editRotation !== undefined ? p.editRotation : p.rotation;
              const extraRot = p.rotation - editRot;

              const isEditSideways = editRot % 180 !== 0;
              const editCanvas = document.createElement('canvas');
              editCanvas.width = isEditSideways ? viewport.height : viewport.width;
              editCanvas.height = isEditSideways ? viewport.width : viewport.height;
              const editCtx = editCanvas.getContext('2d');
              
              editCtx.fillStyle = 'white';
              editCtx.fillRect(0, 0, editCanvas.width, editCanvas.height);
              editCtx.save();
              editCtx.translate(editCanvas.width / 2, editCanvas.height / 2);
              editCtx.rotate((editRot * Math.PI) / 180);
              editCtx.drawImage(pdfCanvas, -pdfCanvas.width / 2, -pdfCanvas.height / 2);
              editCtx.restore();

              p.annotations.forEach(ann => {
                const ax = ann.rx * editCanvas.width;
                const ay = ann.ry * editCanvas.height;
                const aw = ann.rw * editCanvas.width;
                const ah = ann.rh * editCanvas.height;

                editCtx.save();
                editCtx.beginPath();
                editCtx.rect(ax, ay, aw, ah);
                editCtx.clip();

                if (ann.type === 'rect') {
                   if (ann.bgColor && ann.bgColor !== 'transparent') {
                      editCtx.fillStyle = ann.bgColor;
                      editCtx.fillRect(ax, ay, aw, ah);
                   }
                } else if (ann.type === 'text') {
                  if (ann.bgColor && ann.bgColor !== 'transparent') {
                    editCtx.fillStyle = ann.bgColor;
                    editCtx.fillRect(ax, ay, aw, ah);
                  }
                  if (ann.text) {
                    editCtx.fillStyle = ann.color || '#000000';
                    const fontSizePx = Math.floor(editCanvas.width * ((ann.fontSize || 16) / BASE_WIDTH_PT));
                    
                    const fStyle = ann.isItalic ? 'italic ' : '';
                    const fWeight = ann.isBold ? 'bold ' : 'normal ';
                    editCtx.font = `${fStyle}${fWeight}${fontSizePx}px ${ann.fontFamily || 'sans-serif'}`;
                    editCtx.textBaseline = 'top';
                    
                    if ('letterSpacing' in editCtx) {
                      editCtx.letterSpacing = `${ann.letterSpacing || 0}em`;
                    }
                    
                    const lines = ann.text.split('\n');
                    const lineHeightPx = fontSizePx * (ann.lineHeight || 1.2);

                    for (let j = 0; j < lines.length; j++) {
                      const lineStr = lines[j];
                      const charY = ay + (j * lineHeightPx);
                      editCtx.fillText(lineStr, ax, charY);
                      
                      if (ann.isUnderline) {
                        const textWidth = editCtx.measureText(lineStr).width;
                        const underlineY = charY + fontSizePx * 1.05; 
                        const underlineHeight = Math.max(1, fontSizePx * 0.05);
                        editCtx.fillRect(ax, underlineY, textWidth, underlineHeight);
                      }
                    }
                  }
                }
                editCtx.restore();
              });

              const isFinalSideways = p.rotation % 180 !== 0;
              const finalCanvas = document.createElement('canvas');
              finalCanvas.width = isFinalSideways ? viewport.height : viewport.width;
              finalCanvas.height = isFinalSideways ? viewport.width : viewport.height;
              const finalCtx = finalCanvas.getContext('2d');

              finalCtx.fillStyle = 'white';
              finalCtx.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
              finalCtx.save();
              finalCtx.translate(finalCanvas.width / 2, finalCanvas.height / 2);
              finalCtx.rotate((extraRot * Math.PI) / 180);
              finalCtx.drawImage(editCanvas, -editCanvas.width / 2, -editCanvas.height / 2);
              finalCtx.restore();

              const imgDataUrl = finalCanvas.toDataURL('image/jpeg', 0.9); 
              const jpgImage = await finalDoc.embedJpg(imgDataUrl);
              const newPage = finalDoc.addPage([targetW, targetH]);

              const sw = actualW * scale;
              const sh = actualH * scale;

              newPage.drawImage(jpgImage, {
                x: (targetW - sw) / 2,
                y: (targetH - sh) / 2,
                width: sw,
                height: sh,
              });

              pdfCanvas.width = 0; pdfCanvas.height = 0;
              editCanvas.width = 0; editCanvas.height = 0;
              finalCanvas.width = 0; finalCanvas.height = 0;
              jsPage.cleanup();
              pdfjsDoc.destroy();

            } else {
              setProgressData({ current: i + 1, total: validPages.length, text: `ページ ${i + 1} を安全に結合中...` });
              const fileBuffer = await getFromDB(p.fileId);
              const tempPdfDoc = await window.PDFLib.PDFDocument.load(fileBuffer);
              const sourcePage = tempPdfDoc.getPages()[p.pageIndex - 1];
              
              if (isOriginalSize) {
                const [copiedPage] = await finalDoc.copyPages(tempPdfDoc, [p.pageIndex - 1]);
                const currentRot = copiedPage.getRotation().angle;
                copiedPage.setRotation(degrees((currentRot + p.rotation) % 360));
                finalDoc.addPage(copiedPage);
              } else {
                const embeddedPage = await finalDoc.embedPage(sourcePage);
                const newPage = finalDoc.addPage([targetW, targetH]);
                
                const sw = p.origWidth * scale;
                const sh = p.origHeight * scale;

                let dx = -sw / 2, dy = -sh / 2;
                if (p.rotation === 90) { dx = -sh / 2; dy = sw / 2; }
                else if (p.rotation === 180) { dx = sw / 2; dy = sh / 2; }
                else if (p.rotation === 270) { dx = sh / 2; dy = -sw / 2; }

                newPage.drawPage(embeddedPage, {
                  x: targetW / 2 + dx,
                  y: targetH / 2 + dy,
                  width: sw,
                  height: sh,
                  rotate: degrees(-p.rotation)
                });
              }
            }
          }

          setProgressData({ current: validPages.length, total: validPages.length, text: 'ファイルの最終書き出し中...' });
          await new Promise(resolve => setTimeout(resolve, 50));

          const pdfBytes = await finalDoc.save();
          const blob = new Blob([pdfBytes], { type: 'application/octet-stream' });
          const url = URL.createObjectURL(blob);
          const filename = `Secure_Merged_${outputSize}_${new Date().getTime()}.pdf`;
          
          setDownloadInfo({ url, filename });
          trackEvent('pdf_export_success'); 

        } catch (err) {
          console.error(err);
          setErrorMsg("PDFの生成中にエラーが発生しました。\n詳細: " + (err.message || String(err)));
          trackEvent('error_occurred', { error_type: 'generate_failed', details: err.message }); 
        }
        setIsProcessing(false);
      };

      if (!pdfjsReady) return <div className="min-h-screen flex items-center justify-center bg-gray-50 text-gray-500">システム初期化中...</div>;

      const selectedAnn = editingPage?.annotations?.find(a => a.id === selectedId);

      return (
        <div 
          className="min-h-screen bg-gray-100 font-sans text-gray-800 pb-20"
          onDragEnter={handleFileDragEnter}
          onDragOver={handleFileDragOver}
          onDragLeave={handleFileDragLeave}
          onDrop={handleFileDrop}
        >
          {isFileDragging && (
            <div className="fixed inset-0 z-[100] flex items-center justify-center bg-blue-600 bg-opacity-90 backdrop-blur-sm transition-all duration-200 pointer-events-none" style={{ height: '100dvh' }}>
              <div className="text-center text-white border-4 border-white border-dashed rounded-3xl p-12 animate-pulse">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="mx-auto mb-4 text-white"><path d="M16 16l-4-4-4 4"/><path d="M12 12v9"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/><path d="M16 16l-4-4-4 4"/></svg>
                <h2 className="text-2xl md:text-3xl font-bold">PDFをドロップして読み込む</h2>
                <p className="mt-2 text-blue-100 font-medium text-sm md:text-base">ローカル環境で安全に処理されます</p>
              </div>
            </div>
          )}
          
          {!agreed && (
            <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-70 p-4" style={{ height: '100dvh' }}>
              <div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full flex flex-col max-h-full overflow-hidden">
                <div className="p-5 border-b bg-gray-50 flex items-center shrink-0">
                  <div className="bg-blue-600 text-white p-2 rounded-lg"><ShieldIcon /></div>
                  <div className="ml-3">
                    <h2 className="text-xl md:text-2xl font-bold text-gray-800 leading-tight">Secure PDF Toolkit</h2>
                    <p className="text-xs text-blue-600 font-bold mt-0.5">登録不要・完全無料・ブラウザ完結</p>
                  </div>
                </div>

                <div className="p-6 overflow-y-auto flex-1 bg-white">
                  <div className="mb-6">
                    <h3 className="font-bold text-lg text-gray-800 mb-3 border-l-4 border-blue-500 pl-2">ツールの特徴と使い方</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                      <div className="bg-blue-50 border border-blue-100 p-3 rounded-lg">
                        <p className="font-bold text-blue-900 mb-1">🔒 完全ローカル処理</p>
                        <p className="text-gray-600 leading-relaxed">PDFファイルは外部サーバーへ一切送信されません。機密文書もご自身のブラウザ内で安全に処理されます。</p>
                      </div>
                      <div className="bg-blue-50 border border-blue-100 p-3 rounded-lg">
                        <p className="font-bold text-blue-900 mb-1">⬛ 墨消し・白塗り・文字追加</p>
                        <p className="text-gray-600 leading-relaxed">情報を隠す図形や任意の文字の追加が可能です。編集した<strong className="text-red-600">ページは1枚の「画像」に変換</strong>されるため、専用ソフトで下の文字を剥がされる心配がない安全な方式です。</p>
                      </div>
                      <div className="bg-gray-50 border border-gray-200 p-3 rounded-lg">
                        <p className="font-bold text-gray-800 mb-1">📄 結合・抽出（分割）・並び替え</p>
                        <p className="text-gray-600 leading-relaxed">複数PDFの追加や、ドラッグ操作による自由な並び替えが可能です。不要なページを「削除（ゴミ箱）」して保存すれば、必要なページだけを抽出できます。</p>
                      </div>
                      <div className="bg-gray-50 border border-gray-200 p-3 rounded-lg">
                        <p className="font-bold text-gray-800 mb-1">📏 用紙サイズの一括変更</p>
                        <p className="text-gray-600 leading-relaxed">サイズの異なる書類を、A4やB5などの指定サイズに一括で変更できます。元の縦横比を保ったまま枠内に収まるよう拡大縮小され、中央配置されます。</p>
                      </div>
                    </div>
                  </div>

                  <div>
                    <h3 className="font-bold text-lg text-gray-800 mb-3 border-l-4 border-gray-500 pl-2">利用技術およびOSSライセンス</h3>
                    <div className="text-xs text-gray-600 bg-gray-50 p-4 rounded-lg border border-gray-200 mb-6 leading-relaxed">
                      <p className="mb-4">当ツールは、高度なセキュリティとブラウザ完結処理を実現するため、以下のオープンソースソフトウェア（OSS）を活用しています。各ライブラリの開発者およびコミュニティに深く感謝いたします。</p>
                      <ul className="list-disc pl-5 space-y-2">
                        <li><strong>pdf-lib</strong> (PDF生成・操作): <a href="https://github.com/Hopding/pdf-lib/blob/master/LICENSE.md" target="_blank" rel="noreferrer" className="text-blue-500 hover:underline">MIT License</a></li>
                        <li><strong>pdf.js</strong> (PDF解析・レンダリング / Mozilla): <a href="https://github.com/mozilla/pdf.js/blob/master/LICENSE" target="_blank" rel="noreferrer" className="text-blue-500 hover:underline">Apache License 2.0</a></li>
                        <li><strong>React / React DOM</strong> (UI構築): <a href="https://github.com/facebook/react/blob/main/LICENSE" target="_blank" rel="noreferrer" className="text-blue-500 hover:underline">MIT License</a></li>
                        <li><strong>Babel Standalone</strong> (コード変換): <a href="https://github.com/babel/babel/blob/main/LICENSE" target="_blank" rel="noreferrer" className="text-blue-500 hover:underline">MIT License</a></li>
                        <li><strong>Tailwind CSS</strong> (スタイリング): <a href="https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE" target="_blank" rel="noreferrer" className="text-blue-500 hover:underline">MIT License</a></li>
                      </ul>
                    </div>

                    <h3 className="font-bold text-lg text-gray-800 mb-3 border-l-4 border-gray-500 pl-2">利用規約および免責事項</h3>
                    <div className="text-xs text-gray-600 bg-gray-100 p-4 rounded-lg border border-gray-200 h-48 overflow-y-auto leading-relaxed space-y-3">
                      <p><strong>1. 非破壊処理と事前テスト：</strong>当ツールは元のPDFを直接上書きしませんが、エラーが生じる場合があります。大切なファイルは必ず原本を手元に保管してください。</p>
                      <p><strong>2. 送信・保存「されない」データ：</strong>アップロードされたPDF等のファイルデータは、外部サーバーへ一切送信・保存されません。</p>
                      <p><strong>3. 統計データの取得：</strong>今後のサービス向上のため、個人を特定しない統計ログ（読み込み回数、利用ブラウザ等）をGoogle Analytics等を利用して記録する場合があります。</p>
                      <p><strong>4. 免責事項：</strong>当ツールの利用により生じた直接的・間接的な損害について、開発者・運営者は一切の責任を負いません。ご自身の責任においてご利用ください。</p>
                      <p><strong>5. キャッシュの破棄：</strong>共有PC等をご利用の際は、作業終了後に画面上の「キャッシュを完全破棄」ボタンを押し、データを消去してください。</p>
                      <p><strong>6. 広告掲載について：</strong>当ツールは無料で提供しておりますが、維持管理費に充てるため、画面内に広告を掲載させていただく場合がございます。</p>
                    </div>
                  </div>
                </div>

                <div className="p-5 border-t bg-gray-50 shrink-0">
                  <button onClick={handleAgree} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3.5 px-4 rounded-lg shadow-md transition-colors text-lg">
                    規約に同意して利用を開始する
                  </button>
                </div>
              </div>
            </div>
          )}

          {confirmClear && (
            <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-80 p-4" style={{ height: '100dvh' }}>
              <div className="bg-white rounded-xl shadow-2xl max-w-sm w-full p-6 text-center max-h-full overflow-y-auto">
                <AlertCircleIcon />
                <h2 className="text-xl font-bold mb-2">データを破棄しますか？</h2>
                <p className="text-sm text-gray-600 mb-6">キャッシュされたPDFデータはすべて削除され、初期状態に戻ります。</p>
                <div className="flex gap-3">
                  <button onClick={() => setConfirmClear(false)} className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg transition">キャンセル</button>
                  <button onClick={executeClearAll} className="flex-1 bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition">完全に破棄</button>
                </div>
              </div>
            </div>
          )}

          {isProcessing && (
            <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-80 p-4" style={{ height: '100dvh' }}>
              <div className="bg-white rounded-xl shadow-2xl max-w-sm w-full p-6 text-center max-h-full overflow-y-auto">
                <div className="animate-spin rounded-full h-12 w-12 border-b-4 border-blue-600 mx-auto mb-4"></div>
                <h2 className="text-lg font-bold mb-2">安全に処理しています</h2>
                {progressData.total > 0 && (
                  <div className="w-full bg-gray-200 rounded-full h-2.5 mb-2 mt-4 overflow-hidden">
                    <div className="bg-blue-600 h-2.5 rounded-full transition-all duration-300" style={{ width: `${(progressData.current / progressData.total) * 100}%` }}></div>
                  </div>
                )}
                <p className="text-xs text-gray-500 whitespace-pre-wrap mt-2">{progressData.text}</p>
              </div>
            </div>
          )}

          {isEditorLoading && (
            <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black bg-opacity-80 p-4" style={{ height: '100dvh' }}>
              <div className="bg-gray-900 rounded-xl shadow-2xl p-6 text-center text-white border border-gray-700">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-3"></div>
                <p className="text-sm">高解像度画像をレンダリング中...</p>
              </div>
            </div>
          )}

          {downloadInfo && (
            <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-80 p-4" style={{ height: '100dvh' }}>
              <div className="bg-white rounded-xl shadow-2xl max-w-sm w-full p-6 text-center max-h-full overflow-y-auto">
                <CheckCircleIcon />
                <h2 className="text-xl font-bold mb-2">PDFの生成が完了しました</h2>
                <p className="text-sm text-gray-600 mb-6">処理が完了しました。以下のボタンからファイルを保存してください。</p>
                <a 
                  href={downloadInfo.url} 
                  download={downloadInfo.filename}
                  onClick={() => setTimeout(() => setDownloadInfo(null), 500)}
                  className="block w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition mb-3 shadow-lg"
                >
                  PDFをダウンロード
                </a>
                
                <div className="mt-4 pt-4 border-t border-gray-100">
                   <p className="text-[10px] text-gray-400 mb-2">- スポンサーリンク -</p>
                   <div className="w-full h-16 bg-gray-100 border border-gray-200 border-dashed rounded flex items-center justify-center text-gray-400 text-xs">
                     広告枠
                   </div>
                </div>

                <button onClick={() => setDownloadInfo(null)} className="mt-4 text-gray-400 text-sm hover:text-gray-700 hover:underline">閉じて作業を続ける</button>
              </div>
            </div>
          )}

          {errorMsg && (
            <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-80 p-4" style={{ height: '100dvh' }}>
              <div className="bg-white rounded-xl shadow-2xl max-w-sm w-full p-6 text-center max-h-full overflow-y-auto">
                <AlertCircleIcon />
                <h2 className="text-xl font-bold mb-2">エラーが発生しました</h2>
                <p className="text-sm text-gray-600 mb-6 whitespace-pre-wrap text-left break-all bg-gray-50 p-2 rounded border">{errorMsg}</p>
                <button onClick={() => setErrorMsg('')} className="w-full bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg transition">閉じる</button>
              </div>
            </div>
          )}

          {editingPage && (
            <div className="fixed inset-0 z-50 flex flex-col bg-gray-900" style={{ height: '100dvh' }}>
              <div className="flex justify-between items-center p-3 bg-gray-800 text-white shadow-md z-10 shrink-0">
                <h3 className="text-sm md:text-base font-bold flex items-center">高度なエディタ</h3>
                <button onClick={closeEditor} className="text-gray-300 hover:text-white px-3 py-1.5 text-sm bg-gray-700 hover:bg-gray-600 rounded transition">キャンセル</button>
              </div>
              
              <div className={`bg-gray-800 border-b border-gray-700 transition-all duration-200 shrink-0 ${selectedId ? 'opacity-100 h-auto p-2' : 'opacity-0 h-0 overflow-hidden p-0'}`}>
                <div className="max-w-xl mx-auto flex items-center gap-2 overflow-x-auto hide-scrollbar text-sm">
                  {selectedAnn && (
                    <>
                      <button onClick={deleteSelectedAnn} className="bg-red-500 hover:bg-red-600 text-white w-9 h-9 flex items-center justify-center rounded font-bold shadow shrink-0" title="削除">
                        <TrashIcon/>
                      </button>
                      <div className="w-px bg-gray-600 shrink-0 h-6 mx-1"></div>
                      
                      {selectedAnn.type === 'text' && (
                        <>
                          <div className="h-9 flex items-center gap-1.5 text-white bg-gray-700 px-2 rounded border border-gray-600 shrink-0">
                            <span className="text-xs">文字:</span>
                            <input type="color" value={selectedAnn.color || '#000000'} onChange={e => updateSelectedAnnProperty({color: e.target.value})} title="文字の色" className="shrink-0"/>
                          </div>
                          
                          <div className="h-9 flex items-center gap-1.5 text-white bg-gray-700 px-2 rounded border border-gray-600 shrink-0">
                            <label className="flex items-center gap-1.5 text-xs cursor-pointer whitespace-nowrap">
                              <input type="checkbox" checked={selectedAnn.bgColor !== 'transparent'} onChange={e => updateSelectedAnnProperty({bgColor: e.target.checked ? '#ffffff' : 'transparent'})} className="cursor-pointer w-3.5 h-3.5 rounded-sm" />
                              背景
                            </label>
                            {selectedAnn.bgColor !== 'transparent' && (
                              <input type="color" value={selectedAnn.bgColor || '#ffffff'} onChange={e => updateSelectedAnnProperty({bgColor: e.target.value})} title="背景の色" className="shrink-0"/>
                            )}
                          </div>

                          <div className="w-px bg-gray-600 shrink-0 h-6 mx-1"></div>

                          <div className="flex gap-0.5 shrink-0 border border-gray-600 rounded bg-gray-700 overflow-hidden">
                            <button onClick={() => updateSelectedAnnProperty({isBold: !selectedAnn.isBold})} className={`h-9 w-9 flex items-center justify-center transition ${selectedAnn.isBold ? 'bg-gray-500 text-white' : 'text-gray-300 hover:bg-gray-600'}`} title="太字"><BoldIcon/></button>
                            <div className="w-px bg-gray-600"></div>
                            <button onClick={() => updateSelectedAnnProperty({isItalic: !selectedAnn.isItalic})} className={`h-9 w-9 flex items-center justify-center transition ${selectedAnn.isItalic ? 'bg-gray-500 text-white' : 'text-gray-300 hover:bg-gray-600'}`} title="斜体"><ItalicIcon/></button>
                            <div className="w-px bg-gray-600"></div>
                            <button onClick={() => updateSelectedAnnProperty({isUnderline: !selectedAnn.isUnderline})} className={`h-9 w-9 flex items-center justify-center transition ${selectedAnn.isUnderline ? 'bg-gray-500 text-white' : 'text-gray-300 hover:bg-gray-600'}`} title="下線"><UnderlineIcon/></button>
                          </div>

                          <div className="w-px bg-gray-600 shrink-0 h-6 mx-1"></div>

                          <select value={selectedAnn.fontSize} onChange={e => updateSelectedAnnProperty({fontSize: parseInt(e.target.value)})} className="h-9 bg-gray-700 text-white px-2 rounded outline-none border border-gray-600 cursor-pointer shadow-sm shrink-0">
                            {[8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 24, 28, 32, 36, 48, 64, 72].map(s => <option key={s} value={s}>{s}pt</option>)}
                          </select>
                          
                          <select value={selectedAnn.fontFamily} onChange={e => updateSelectedAnnProperty({fontFamily: e.target.value})} className="h-9 bg-gray-700 text-white px-2 rounded outline-none border border-gray-600 cursor-pointer shadow-sm shrink-0">
                            <option value="sans-serif">標準ゴシック</option>
                            <option value="'Hiragino Maru Gothic ProN', 'Yu Rounded Gothic', sans-serif">丸ゴシック</option>
                            <option value="serif">標準明朝</option>
                            <option value="monospace">等幅フォント</option>
                            <option value="Arial, sans-serif">Arial</option>
                            <option value="'Times New Roman', serif">Times New Roman</option>
                          </select>

                          <div className="w-px bg-gray-600 shrink-0 h-6 mx-1"></div>

                          <div className="h-9 flex items-center gap-1 text-white bg-gray-700 px-2 rounded border border-gray-600 shrink-0" title="行間隔">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3v18M12 3l-3 3M12 3l3 3M12 21l-3-3M12 21l3-3"/><path d="M5 8h3M5 16h3"/></svg>
                            <select value={selectedAnn.lineHeight || 1.2} onChange={e => updateSelectedAnnProperty({lineHeight: parseFloat(e.target.value)})} className="bg-transparent text-white outline-none cursor-pointer shadow-sm shrink-0">
                              <option value="1">1.0</option>
                              <option value="1.2">1.2 (標準)</option>
                              <option value="1.5">1.5</option>
                              <option value="1.8">1.8</option>
                              <option value="2.0">2.0</option>
                              <option value="2.5">2.5</option>
                            </select>
                          </div>

                          <div className="h-9 flex items-center gap-1 text-white bg-gray-700 px-2 rounded border border-gray-600 shrink-0" title="文字間隔">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12h18M3 12l3-3M3 12l3 3M21 12l-3-3M21 12l-3 3"/><path d="M8 5v3M16 5v3"/></svg>
                            <select value={selectedAnn.letterSpacing || 0} onChange={e => updateSelectedAnnProperty({letterSpacing: parseFloat(e.target.value)})} className="bg-transparent text-white outline-none cursor-pointer shadow-sm shrink-0">
                              <option value="-0.1">-2</option>
                              <option value="-0.05">-1</option>
                              <option value="0">標準</option>
                              <option value="0.05">+1</option>
                              <option value="0.1">+2</option>
                              <option value="0.2">+3</option>
                              <option value="0.5">+4</option>
                            </select>
                          </div>
                        </>
                      )}
                      {selectedAnn.type === 'rect' && (
                        <>
                          <div className="h-9 flex items-center gap-1.5 text-white bg-gray-700 px-2 rounded border border-gray-600 shrink-0">
                            <span className="text-xs">図形の色:</span>
                            <input type="color" value={selectedAnn.bgColor === 'transparent' ? '#000000' : selectedAnn.bgColor} onChange={e => updateSelectedAnnProperty({bgColor: e.target.value})} title="図形の色を変更" className="shrink-0"/>
                          </div>
                          <div className="text-gray-400 flex items-center px-2 py-1 shrink-0 whitespace-nowrap text-xs">
                            <HandIcon /> <span className="ml-1">ドラッグで移動・枠でリサイズ</span>
                          </div>
                        </>
                      )}
                    </>
                  )}
                </div>
              </div>

              <div 
                ref={scrollContainerRef}
                className="flex-1 bg-gray-900 overflow-auto hide-scrollbar flex relative editor-scroll-container"
                style={{ touchAction: editorMode === 'pan' ? 'pan-x pan-y' : 'none' }}
                onPointerDown={handleWrapperPointerDown}
                onPointerMove={handleWrapperPointerMove}
                onPointerUp={handleWrapperPointerUp}
                onPointerLeave={handleWrapperPointerUp}
              >
                <div 
                  ref={containerRef}
                  className="m-auto relative bg-white shadow-[0_0_20px_rgba(0,0,0,0.5)] flex-shrink-0"
                  style={{ 
                    width: `${canvasSize.w * zoomLevel}px`, height: `${canvasSize.h * zoomLevel}px`,
                    cursor: editorMode === 'pan' ? 'grab' : 'crosshair', touchAction: 'none'
                  }}
                  onPointerDown={handleBgPointerDown}
                  onPointerMove={handlePointerMove}
                  onPointerUp={handlePointerUp}
                  onPointerLeave={handlePointerUp}
                >
                  {editorImgUrl && <img src={editorImgUrl} className="absolute inset-0 w-full h-full pointer-events-none" draggable="false" />}

                  {editingPage.annotations.map(ann => {
                    const isSelected = selectedId === ann.id;
                    const fontSizePx = (canvasSize.w * zoomLevel) * ((ann.fontSize || 16) / BASE_WIDTH_PT);
                    
                    return (
                      <div key={ann.id} style={{
                        position: 'absolute', left: `${ann.rx * 100}%`, top: `${ann.ry * 100}%`, width: `${ann.rw * 100}%`, height: `${ann.rh * 100}%`,
                        backgroundColor: ann.bgColor || 'transparent',
                        border: isSelected ? '2px dashed #3b82f6' : (ann.type === 'text' && !ann.text && ann.bgColor === 'transparent' ? '1px dashed #9ca3af' : 'none'),
                        color: ann.color || 'black',
                        zIndex: isSelected ? 10 : 1,
                        fontFamily: ann.fontFamily || 'sans-serif',
                        fontSize: `${fontSizePx}px`
                      }}>
                        <div className="absolute inset-0 cursor-move" onPointerDown={(e) => handleObjPointerDown(e, ann)}></div>
                        
                        {ann.type === 'text' && (
                          <div className="absolute inset-0 pointer-events-none" style={{ overflow: 'hidden' }}>
                            {isSelected && isEditingText ? (
                              <textarea
                                autoFocus
                                value={ann.text || ''}
                                onChange={e => updateSelectedAnnRealtime({ text: e.target.value })}
                                onBlur={() => { setIsEditingText(false); setTimeout(() => commitHistory(), 0); }}
                                className="editor-textarea pointer-events-auto"
                                placeholder="文字を入力..."
                                onPointerDown={e => e.stopPropagation()} 
                                style={{ 
                                  touchAction: 'none', 
                                  lineHeight: 1,
                                  letterSpacing: '0em',
                                  fontWeight: ann.isBold ? 'bold' : 'normal',
                                  fontStyle: ann.isItalic ? 'italic' : 'normal',
                                  textDecoration: ann.isUnderline ? 'underline' : 'none',
                                  whiteSpace: 'pre',
                                  overflow: 'hidden'
                                }}
                              />
                            ) : (
                              <div className="w-full h-full m-0 p-0 flex flex-col" 
                                style={{ 
                                  color: ann.color || '#000000', 
                                  fontWeight: ann.isBold ? 'bold' : 'normal',
                                  fontStyle: ann.isItalic ? 'italic' : 'normal',
                                  textDecoration: ann.isUnderline ? 'underline' : 'none',
                                  whiteSpace: 'pre',
                                  lineHeight: 1,
                                  letterSpacing: `${ann.letterSpacing || 0}em`
                                }}
                              >
                                {ann.text || (isSelected ? <span className="text-gray-400 font-normal">文字を入力...</span> : '')}
                              </div>
                            )}
                          </div>
                        )}

                        {isSelected && (
                          <>
                            {ann.type === 'text' && !isEditingText && (
                              <button
                                onPointerDown={e => { e.stopPropagation(); setIsEditingText(true); }}
                                className="absolute -top-4 -right-4 w-8 h-8 bg-blue-600 text-white rounded-full shadow-lg flex items-center justify-center pointer-events-auto z-20 active:scale-95"
                                title="テキスト編集"
                              >✎</button>
                            )}
                            <div
                              onPointerDown={e => handleResizePointerDown(e, ann)}
                              className="absolute -bottom-3 -right-3 w-6 h-6 bg-blue-600 border-2 border-white rounded-full shadow-lg cursor-nwse-resize pointer-events-auto z-20 flex items-center justify-center"
                            >
                              <svg width="12" height="12" viewBox="0 0 24 24" stroke="white" strokeWidth="3" fill="none"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
                            </div>
                          </>
                        )}
                      </div>
                    );
                  })}

                  {isDrawing && currentRect && (
                     <div style={{
                       position: 'absolute', left: `${currentRect.x * 100}%`, top: `${currentRect.y * 100}%`, width: `${currentRect.w * 100}%`, height: `${currentRect.h * 100}%`,
                       backgroundColor: editorMode === 'rect' ? '#000000' : 'rgba(59, 130, 246, 0.1)',
                       border: editorMode === 'text' ? '2px dashed #3b82f6' : 'none',
                       pointerEvents: 'none', zIndex: 20
                     }} />
                  )}
                </div>
              </div>

              <div className="bg-gray-800 border-t border-gray-700 p-3 shrink-0" style={{ paddingBottom: 'max(12px, env(safe-area-inset-bottom))' }}>
                <div className="max-w-xl mx-auto space-y-3">
                  <div className="flex justify-between items-center bg-gray-900 rounded-lg p-1.5 border border-gray-700 overflow-x-auto hide-scrollbar gap-1 shadow-inner">
                    <button onClick={() => {setEditorMode('pan'); setSelectedId(null);}} className={`px-2 py-2 rounded-md text-xs font-bold flex items-center transition whitespace-nowrap flex-1 justify-center ${editorMode === 'pan' ? 'bg-blue-600 text-white shadow' : 'text-gray-400 hover:bg-gray-800'}`} title="移動・ズーム">
                      <HandIcon /> <span className="ml-1 hidden sm:inline">移動</span>
                    </button>
                    <button onClick={() => {setEditorMode('rect'); setSelectedId(null);}} className={`px-2 py-2 rounded-md text-xs font-bold flex items-center transition whitespace-nowrap flex-1 justify-center ${editorMode === 'rect' ? 'bg-gray-600 text-white shadow ring-1 ring-gray-400' : 'text-gray-400 hover:bg-gray-800'}`} title="図形(墨消し等)">
                      <MaskIcon /> <span className="ml-1 hidden sm:inline">図形</span>
                    </button>
                    <button onClick={() => {setEditorMode('text'); setSelectedId(null);}} className={`px-2 py-2 rounded-md text-xs font-bold flex items-center transition whitespace-nowrap flex-1 justify-center ${editorMode === 'text' ? 'bg-blue-100 text-blue-800 shadow ring-1 ring-blue-300' : 'text-gray-400 hover:bg-gray-800'}`} title="枠を作って文字追加">
                      <TextIcon /> <span className="ml-1 hidden sm:inline">文字</span>
                    </button>

                    <div className="w-px bg-gray-700 mx-1 h-6"></div>

                    <div className="flex items-center text-white shrink-0 pr-1">
                      <button onClick={() => setZoomLevel(Math.max(0.5, zoomLevel - 0.2))} className="w-7 h-7 flex justify-center items-center bg-gray-800 rounded hover:bg-gray-700 transition active:scale-95">-</button>
                      <span className="w-10 text-center text-[10px] font-mono font-bold">{Math.round(zoomLevel * 100)}%</span>
                      <button onClick={() => setZoomLevel(Math.min(3, zoomLevel + 0.2))} className="w-7 h-7 flex justify-center items-center bg-gray-800 rounded hover:bg-gray-700 transition active:scale-95">+</button>
                    </div>
                  </div>

                  <div className="flex gap-2">
                    <div className="flex bg-gray-700 rounded-lg overflow-hidden border border-gray-600 flex-[0.3]">
                      <button onClick={undo} disabled={historyIndex <= 0} className="flex-1 py-2 flex justify-center items-center text-white hover:bg-gray-600 disabled:opacity-30 transition" title="元に戻す"><UndoIcon /></button>
                      <div className="w-px bg-gray-600"></div>
                      <button onClick={redo} disabled={historyIndex >= history.length - 1} className="flex-1 py-2 flex justify-center items-center text-white hover:bg-gray-600 disabled:opacity-30 transition" title="やり直し" style={{transform:'scaleX(-1)'}}><UndoIcon /></button>
                    </div>
                    
                    <button onClick={saveAnnotations} className="flex-[0.7] py-2.5 bg-green-600 hover:bg-green-500 text-white font-bold rounded-lg shadow-lg transition flex items-center justify-center gap-2">
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                      編集を確定して戻る
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}

          <header className="bg-white border-b shadow-sm sticky top-0 z-30">
            <div className="max-w-7xl mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center gap-3">
              <div className="w-full md:w-auto flex justify-between items-center">
                <div>
                  <h1 className="text-lg md:text-xl font-bold text-gray-800 flex items-center">
                    <span className="bg-gray-800 text-white p-1.5 rounded mr-2"><MaskIcon/></span>
                    Secure PDF Toolkit
                  </h1>
                  <p className="text-[10px] md:text-xs text-blue-600 font-semibold mt-0.5"><ShieldSmallIcon/>ローカルキャッシュ保護モード稼働中</p>
                </div>
                <label className="md:hidden cursor-pointer bg-gray-100 border border-gray-300 text-gray-700 text-sm font-medium py-1.5 px-3 rounded shadow-sm">
                  + 追加
                  <input type="file" multiple accept=".pdf" className="hidden" onChange={handleFilesAdded} />
                </label>
              </div>
              
              <div className="w-full md:w-auto flex items-center gap-2 justify-end">
                <div className="flex items-center text-sm border border-gray-300 rounded overflow-hidden">
                  <span className="bg-gray-100 text-gray-600 px-2 py-2 text-xs md:text-sm font-medium border-r border-gray-300 whitespace-nowrap">出力サイズ</span>
                  <select value={outputSize} onChange={(e) => setOutputSize(e.target.value)} className="bg-white py-1.5 px-2 outline-none text-sm cursor-pointer">
                    <option value="ORIGINAL">そのまま (推奨)</option>
                    <option value="A3">A3 統一</option>
                    <option value="A4">A4 統一</option>
                    <option value="A5">A5 統一</option>
                    <option value="B4">B4 統一</option>
                    <option value="B5">B5 統一</option>
                  </select>
                </div>
                <label className="hidden md:block cursor-pointer bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-1.5 px-4 rounded shadow-sm transition">
                  + 追加
                  <input type="file" multiple accept=".pdf" className="hidden" onChange={handleFilesAdded} />
                </label>
                <button 
                  onClick={generatePDF}
                  disabled={pages.length === 0 || isProcessing}
                  className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-1.5 px-4 md:px-6 rounded shadow-sm transition disabled:bg-blue-300 disabled:cursor-not-allowed whitespace-nowrap"
                >
                  処理・保存
                </button>
              </div>
            </div>
          </header>

          <main className="max-w-7xl mx-auto px-4 py-6 md:py-8 min-h-[50vh]">
            {pages.length === 0 ? (
              <div className="border-2 md:border-4 border-dashed border-gray-300 rounded-2xl h-64 md:h-96 flex flex-col items-center justify-center text-gray-500 bg-white p-4 text-center">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="mb-4 opacity-50"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z"/><path d="M13 2v7h7"/></svg>
                <p className="text-base md:text-lg font-medium">PDFファイルをドラッグ＆ドロップするか、選択してください</p>
                <p className="text-xs md:text-sm mt-2 text-gray-400">データは即座に暗号化されたローカルキャッシュに退避され、メモリを圧迫しません。</p>
                <label className="mt-6 cursor-pointer bg-blue-50 hover:bg-blue-100 text-blue-600 font-medium py-2 px-6 rounded-full border border-blue-200 transition-colors shadow-sm">
                  ファイルを選ぶ
                  <input type="file" multiple accept=".pdf" className="hidden" onChange={handleFilesAdded} />
                </label>
              </div>
            ) : (
              <div>
                <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-2">
                  <p className="text-xs md:text-sm text-gray-500 bg-yellow-50 p-2 md:p-3 rounded border border-yellow-100 flex-1">
                    💡 <strong>ヒント:</strong> 表示されていないページの画像は破棄されメモリを節約しています。安心してスクロールしてください。
                  </p>
                  <button onClick={() => setConfirmClear(true)} className="text-xs text-red-600 bg-red-50 hover:bg-red-100 border border-red-200 py-2 px-4 rounded font-bold whitespace-nowrap transition">
                    <TrashIcon /> キャッシュを完全破棄
                  </button>
                </div>
                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
                  {pages.map((page, idx) => (
                    <LazyPageCard key={page.id} page={page} index={idx} totalPages={pages.length} isDragged={draggedIdx === idx} onDragStart={handleDragStart} onDragOver={handleDragOverItem} onDrop={handleDropItem} movePage={movePage} rotatePage={rotatePage} toggleDelete={toggleDelete} openEditor={openEditor} />
                  ))}
                </div>
              </div>
            )}
          </main>

          <div className="max-w-7xl mx-auto px-4 pb-8">
            <div className="bg-gray-50 border border-gray-200 border-dashed rounded-lg p-4 text-center max-w-4xl mx-auto">
              <p className="text-xs text-gray-400 mb-2">- スポンサーリンク -</p>
              <div className="flex justify-center items-center h-24 md:h-32 bg-gray-200 rounded text-gray-500 text-sm overflow-hidden">
                広告枠
              </div>
            </div>
          </div>

        </div>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  </script>
</body>
</html>