```react
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { Target, Plus, Minus, FileUp, Trash2, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, CheckCircle2, Crosshair, CloudUpload, X, List, ChevronLeft, FolderGit2 } from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, collection, doc, setDoc, onSnapshot, deleteDoc } from 'firebase/firestore';

// --- Firebase Initialization ---
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

export default function App() {
    const [user, setUser] = useState(null);
    const [sites, setSites] = useState([]);
    const [view, setView] = useState('list'); // 'list' | 'detail'
    const [currentSiteId, setCurrentSiteId] = useState(null);

    // PWA Meta tags injection
    useEffect(() => {
        const addMeta = (name, content) => {
            let meta = document.querySelector(`meta[name="${name}"]`);
            if (!meta) {
                meta = document.createElement('meta');
                meta.name = name;
                document.head.appendChild(meta);
            }
            meta.content = content;
        };
        addMeta("apple-mobile-web-app-capable", "yes");
        addMeta("apple-mobile-web-app-status-bar-style", "black-translucent");
        addMeta("viewport", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");
        
        // Disable scrollbar globally
        const style = document.createElement('style');
        style.innerHTML = `
            body { -webkit-tap-highlight-color: transparent; background-color: #f1f5f9; }
            .no-scrollbar::-webkit-scrollbar { display: none; }
            input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { opacity: 1; }
            .font-mono-precision { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
        `;
        document.head.appendChild(style);
    }, []);

    // Authentication
    useEffect(() => {
        const initAuth = async () => {
            try {
                if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                    await signInWithCustomToken(auth, __initial_auth_token);
                } else {
                    await signInAnonymously(auth);
                }
            } catch (error) {
                console.error("Auth Error:", error);
            }
        };
        initAuth();
        const unsubscribe = onAuthStateChanged(auth, setUser);
        return () => unsubscribe();
    }, []);

    // Fetch Sites Data
    useEffect(() => {
        if (!user) return;
        const sitesRef = collection(db, 'artifacts', appId, 'users', user.uid, 'sites');
        const unsubscribe = onSnapshot(sitesRef, (snapshot) => {
            const loadedSites = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
            // JS側で降順ソート (Firebaseのインデックス制約を回避)
            loadedSites.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
            setSites(loadedSites);
        }, (error) => console.error("Fetch Error:", error));
        return () => unsubscribe();
    }, [user]);

    const createNewSite = async () => {
        if (!user) return;
        const newSite = {
            id: `site_${Date.now()}`,
            name: `新規現場 ${new Date().toLocaleDateString()}`,
            createdAt: Date.now(),
            xAxisIs: 'N',
            tolerance: 5.0,
            perfectThreshold: 1.0,
            activeColumnId: 1,
            columns: [
                { id: 1, name: '1節-A1', designX: 100.0000, designY: 200.0000, measuredX: 100.0000, measuredY: 200.0000 }
            ]
        };
        try {
            await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'sites', newSite.id), newSite);
            setCurrentSiteId(newSite.id);
            setView('detail');
        } catch (e) { console.error("Create Error:", e); }
    };

    const deleteSite = async (siteId, e) => {
        e.stopPropagation();
        if (!user) return;
        try {
            await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'sites', siteId));
        } catch (e) { console.error("Delete Error:", e); }
    };

    if (!user) {
        return <div className="min-h-screen flex items-center justify-center bg-slate-100 text-slate-500 font-black">認証中...</div>;
    }

    if (view === 'list') {
        return (
            <div className="min-h-screen flex flex-col max-w-lg mx-auto bg-slate-100 shadow-2xl p-4 font-sans text-slate-900">
                <header className="flex items-center gap-2 font-black italic tracking-tighter mb-8 mt-4">
                    <div className="bg-blue-600 p-2 rounded-2xl shadow-lg"><Target size={32} color="white" /></div>
                    <h1 className="text-3xl text-slate-800">建方キング Pro</h1>
                </header>

                <button onClick={createNewSite} className="bg-blue-600 text-white p-5 rounded-[2rem] shadow-xl flex items-center justify-center gap-3 font-black text-lg active:scale-95 transition-all mb-8">
                    <Plus size={28} /> 新しい現場（ゲーム）を作成
                </button>

                <h2 className="text-sm font-black uppercase text-slate-500 tracking-widest mb-4 flex items-center gap-2"><FolderGit2 size={18} /> 保存済みデータ</h2>
                <div className="space-y-4">
                    {sites.length === 0 && (
                        <div className="text-center p-10 text-slate-400 font-black italic border-2 border-dashed border-slate-300 rounded-[2rem]">データがありません</div>
                    )}
                    {sites.map(site => (
                        <div key={site.id} onClick={() => { setCurrentSiteId(site.id); setView('detail'); }}
                             className="bg-white p-5 rounded-[2rem] shadow-sm border border-slate-200 flex items-center justify-between active:bg-slate-50 cursor-pointer group transition-all">
                            <div>
                                <h3 className="font-black text-xl text-slate-800 mb-1">{site.name}</h3>
                                <p className="text-xs font-black text-slate-400 uppercase tracking-widest">{new Date(site.createdAt).toLocaleString()}更新 • {site.columns?.length || 0}点</p>
                            </div>
                            <button onClick={(e) => deleteSite(site.id, e)} className="p-3 text-slate-300 hover:text-red-500 active:text-red-500 transition-colors">
                                <Trash2 size={24} />
                            </button>
                        </div>
                    ))}
                </div>
            </div>
        );
    }

    const currentSite = sites.find(s => s.id === currentSiteId);
    if (!currentSite) {
        setView('list');
        return null;
    }

    return (
        <SiteDetail 
            site={currentSite} 
            user={user}
            onBack={() => setView('list')} 
        />
    );
}

// --- Detail View Component ---
function SiteDetail({ site, user, onBack }) {
    // ローカルステートで編集状態を管理し、変更があれば自動保存する
    const [localSite, setLocalSite] = useState(site);
    const [isImportModalOpen, setIsImportModalOpen] = useState(false);
    const [importText, setImportText] = useState("");
    const [stepUnit, setStepUnit] = useState(0.001);
    const fileInputRef = useRef(null);
    const saveTimeoutRef = useRef(null);

    // 親のデータが変更されたらローカルも同期（他のデバイスでの変更検知用）
    useEffect(() => {
        setLocalSite(site);
    }, [site.id]);

    // ローカルステートが変更されたらFirestoreへ自動保存（Debounce）
    const updateSite = useCallback((newSiteData) => {
        setLocalSite(newSiteData);
        if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current);
        
        saveTimeoutRef.current = setTimeout(async () => {
            try {
                await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'sites', newSiteData.id), newSiteData);
            } catch (e) { console.error("Auto-Save Error:", e); }
        }, 500); // 500msの遅延で自動保存
    }, [user.uid]);


    const activeColumn = useMemo(() => localSite.columns.find(c => c.id === localSite.activeColumnId) || localSite.columns[0], [localSite.columns, localSite.activeColumnId]);

    const stats = useMemo(() => {
        if (!activeColumn) return null;
        const dx = (activeColumn.measuredX - activeColumn.designX) * 1000;
        const dy = (activeColumn.measuredY - activeColumn.designY) * 1000;
        
        let labels = { top: '', bottom: '', right: '', left: '' };
        let fixTextX = ""; let fixTextY = "";

        if (localSite.xAxisIs === 'N') {
            labels = { top: '北 (X+)', bottom: '南 (X-)', right: '東 (Y+)', left: '西 (Y-)' };
            fixTextX = -dx > 0 ? "北" : "南"; fixTextY = -dy > 0 ? "東" : "西";
        } else if (localSite.xAxisIs === 'S') {
            labels = { top: '南 (X+)', bottom: '北 (X-)', right: '西 (Y+)', left: '東 (Y-)' };
            fixTextX = -dx > 0 ? "南" : "北"; fixTextY = -dy > 0 ? "西" : "東";
        } else if (localSite.xAxisIs === 'E') {
            labels = { top: '東 (X+)', bottom: '西 (X-)', right: '南 (Y+)', left: '北 (Y-)' };
            fixTextX = -dx > 0 ? "東" : "西"; fixTextY = -dy > 0 ? "南" : "北";
        } else if (localSite.xAxisIs === 'W') {
            labels = { top: '西 (X+)', bottom: '東 (X-)', right: '北 (Y+)', left: '南 (Y-)' };
            fixTextX = -dx > 0 ? "西" : "東"; fixTextY = -dy > 0 ? "北" : "南";
        }

        return { 
            dx, dy, fixX: -dx, fixY: -dy, 
            fixTextX, fixTextY, labels, 
            isOk: Math.abs(dx) <= localSite.tolerance && Math.abs(dy) <= localSite.tolerance, 
            isPerfect: Math.abs(dx) <= localSite.perfectThreshold && Math.abs(dy) <= localSite.perfectThreshold 
        };
    }, [activeColumn, localSite.xAxisIs, localSite.tolerance, localSite.perfectThreshold]);

    const formatWithSign = (val, dec = 1) => (val > 0 ? "+" : (val < 0 ? "" : "+")) + val.toFixed(dec);

    const handleSiteNameChange = (e) => {
        updateSite({ ...localSite, name: e.target.value });
    };

    const setXAxisIs = (axis) => {
        updateSite({ ...localSite, xAxisIs: axis });
    };

    const setActiveId = (id) => {
        updateSite({ ...localSite, activeColumnId: id });
    };

    const updateActiveColumn = (field, value) => {
        const val = value === "" ? 0 : parseFloat(value);
        const newColumns = localSite.columns.map(c => c.id === (localSite.activeColumnId || localSite.columns[0].id) ? { ...c, [field]: val } : c);
        updateSite({ ...localSite, columns: newColumns });
    };

    const adjustValue = (field, delta) => {
        const target = activeColumn;
        if (!target) return;
        const newVal = (Math.round(target[field] * 10000) + Math.round(delta * 10000)) / 10000;
        updateActiveColumn(field, newVal);
    };

    const handleFileChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (event) => setImportText(event.target.result);
            reader.readAsText(file, 'Shift-JIS'); // 日本語対応
        }
    };

    const handleImport = () => {
        const lines = importText.split('\n').filter(l => l.trim() !== "");
        const newPillars = [];
        lines.forEach((line, index) => {
            const parts = line.split(',').map(p => p.trim());
            let name, x, y;
            if (parts[0] === 'A01' && parts.length >= 5) {
                name = parts[2]; x = parseFloat(parts[3]); y = parseFloat(parts[4]);
            } else {
                const spaceParts = line.split(/[\t, ]+/).map(p => p.trim());
                if (spaceParts.length >= 3) { name = spaceParts[0]; x = parseFloat(spaceParts[1]); y = parseFloat(spaceParts[2]); }
            }
            if (!isNaN(x) && !isNaN(y)) {
                newPillars.push({ id: Date.now() + index, name: name || `柱-${localSite.columns.length + index + 1}`, designX: x, designY: y, measuredX: x, measuredY: y });
            }
        });
        if (newPillars.length > 0) {
            updateSite({ ...localSite, columns: [...localSite.columns, ...newPillars], activeColumnId: newPillars[0].id });
            setImportText(""); setIsImportModalOpen(false);
        }
    };

    const addColumn = () => {
        const newCol = { id: Date.now(), name: `柱-${localSite.columns.length+1}`, designX: 0, designY: 0, measuredX: 0, measuredY: 0 };
        updateSite({ ...localSite, columns: [...localSite.columns, newCol], activeColumnId: newCol.id });
    };

    const deleteColumn = (id) => {
        if (localSite.columns.length <= 1) return;
        const filtered = localSite.columns.filter(c => c.id !== id);
        updateSite({ ...localSite, columns: filtered, activeColumnId: (localSite.activeColumnId === id ? filtered[0].id : localSite.activeColumnId) });
    };

    const exportToSIMA = () => {
        let content = "Z00,*** 建方キング Pro エクスポート ***,\r\n";
        content += `G00, 01,建方実測データ,\r\n`;
        content += "Z00,----- 座標データ -----\r\n";
        content += "A00,\r\n";
        localSite.columns.forEach((col, idx) => {
            content += `A01,${(idx + 1).toString().padStart(5, ' ')}, ${col.name}, ${col.measuredX.toFixed(4)}, ${col.measuredY.toFixed(4)}, 0.0000,\r\n`;
        });
        content += "A99,\r\n";
        const blob = new Blob([content], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${localSite.name}_実測値_${new Date().getTime()}.sim`;
        a.click();
        URL.revokeObjectURL(url);
    };

    return (
        <div className="min-h-screen flex flex-col pb-10 select-none overflow-x-hidden max-w-lg mx-auto bg-slate-100 shadow-2xl font-sans text-slate-900">
            {/* ヘッダー */}
            <header className="bg-slate-900 text-white p-4 sticky top-0 z-40 border-b-4 border-blue-600 shadow-2xl">
                <div className="flex justify-between items-center mb-4 px-1">
                    <button onClick={onBack} className="flex items-center gap-1 text-slate-400 active:text-white transition-colors py-2 pl-0 pr-4">
                        <ChevronLeft size={24} /> <span className="text-sm font-black uppercase">戻る</span>
                    </button>
                    <input 
                        type="text" 
                        value={localSite.name} 
                        onChange={handleSiteNameChange}
                        className="bg-transparent text-xl font-black italic tracking-tighter text-right w-full outline-none focus:bg-slate-800 rounded-lg px-2"
                    />
                </div>
                <div className="bg-slate-800 p-2 rounded-2xl border border-slate-700">
                    <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2 text-center italic">現場のX軸プラス(上)の方角を指定</p>
                    <div className="flex gap-2 w-full">
                        {['N','S','E','W'].map(d => {
                            const labels = { 'N':'北','S':'南','E':'東','W':'西' };
                            return (
                                <button key={d} onClick={() => setXAxisIs(d)} 
                                    className={`flex-1 h-12 flex items-center justify-center rounded-xl text-base font-black transition-all ${localSite.xAxisIs === d ? 'bg-blue-600 text-white shadow-xl scale-105 border-2 border-blue-400' : 'bg-slate-700 text-slate-400 hover:text-slate-200'}`}>
                                    {labels[d]}
                                </button>
                            );
                        })}
                    </div>
                </div>
            </header>

            <main className="flex-1 p-3 space-y-4">
                {/* モニター */}
                <div className="bg-white p-5 rounded-[3rem] shadow-sm border border-slate-200 flex flex-col items-center relative">
                    <div className="flex justify-between items-center w-full mb-4 px-1">
                        <input 
                            type="text"
                            value={activeColumn?.name || ""}
                            onChange={(e) => updateActiveColumn('name', e.target.value)}
                            className="text-2xl font-black text-slate-800 italic tracking-tighter truncate w-full text-center outline-none bg-slate-50 rounded-xl py-1 focus:ring-2 focus:ring-blue-400" 
                        />
                    </div>
                    
                    <div className="relative w-[300px] h-[300px] bg-slate-900 rounded-[2.5rem] border-4 border-slate-800 overflow-hidden shadow-2xl">
                        <div className="absolute top-1/2 left-0 w-full h-[1px] bg-slate-700/50"></div>
                        <div className="absolute left-1/2 top-0 h-full w-[1px] bg-slate-700/50"></div>
                        
                        {/* ラベル回転 */}
                        <div className="absolute top-3 left-1/2 -translate-x-1/2 text-sm font-black text-blue-400 bg-slate-900/90 px-4 py-1 rounded-full border border-blue-900">{stats?.labels.top}</div>
                        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 text-xs font-black text-slate-500 uppercase">{stats?.labels.bottom}</div>
                        <div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs font-black text-slate-500 rotate-90 uppercase">{stats?.labels.right}</div>
                        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-black text-slate-500 -rotate-90 uppercase">{stats?.labels.left}</div>
                        
                        {stats && (
                            <div className="absolute w-6 h-6 rounded-full border-2 border-white shadow-xl transition-all duration-300 flex items-center justify-center"
                                style={{ 
                                backgroundColor: stats.isPerfect ? '#22c55e' : (stats.isOk ? '#3b82f6' : '#ef4444'), 
                                left: `${150 + Math.max(-140, Math.min(140, stats.dy * 15)) - 12}px`, 
                                top: `${150 - Math.max(-140, Math.min(140, stats.dx * 15)) - 12}px` 
                                }}>
                                <div className="w-1.5 h-1.5 bg-white rounded-full"></div>
                            </div>
                        )}
                    </div>

                    <div className="grid grid-cols-2 gap-3 w-full mt-6 text-center text-slate-800 font-black">
                        <div className="bg-slate-50 p-4 rounded-3xl border border-slate-100 shadow-inner">
                            <p className="text-[11px] font-black text-slate-400 mb-1 uppercase tracking-widest">X軸ズレ (上下方向)</p>
                            <p className={`text-2xl font-black ${Math.abs(stats?.dx || 0) > localSite.tolerance ? 'text-red-500' : 'text-blue-600'}`}>{formatWithSign(stats?.dx || 0, 1)}<span className="text-xs ml-1 font-bold">mm</span></p>
                        </div>
                        <div className="bg-slate-50 p-4 rounded-3xl border border-slate-100 shadow-inner">
                            <p className="text-[11px] font-black text-slate-400 mb-1 uppercase tracking-widest">Y軸ズレ (左右方向)</p>
                            <p className={`text-2xl font-black ${Math.abs(stats?.dy || 0) > localSite.tolerance ? 'text-red-500' : 'text-blue-600'}`}>{formatWithSign(stats?.dy || 0, 1)}<span className="text-xs ml-1 font-bold">mm</span></p>
                        </div>
                    </div>
                </div>

                {/* 指示パネル */}
                <div className={`p-6 rounded-[3.5rem] shadow-2xl border-b-[12px] flex flex-col items-center justify-center min-h-[350px] text-white transition-colors duration-500 ${stats?.isPerfect ? 'bg-green-600 border-green-800' : (stats?.isOk ? 'bg-blue-600 border-blue-800' : 'bg-red-600 border-red-800')}`}>
                    <div className="text-[11px] font-black uppercase tracking-[0.4em] bg-black/20 px-6 py-2 rounded-full mb-8 italic shadow-inner">{stats?.isPerfect ? '完全合格' : (stats?.isOk ? '精度内 (ゼロへ追い込み中)' : '建ち直し指示が必要です')}</div>
                    {stats?.isPerfect ? (
                        <div className="flex flex-col items-center animate-bounce text-center"><CheckCircle2 size={100} strokeWidth={3} /><h3 className="text-6xl font-black italic mt-4 uppercase tracking-tighter">固定OK</h3></div>
                    ) : (
                        <div className="w-full flex justify-around items-center px-2">
                            {Math.abs(stats?.fixX || 0) > 0.0001 && (
                                <div className="flex flex-col items-center gap-4">
                                    <div className="bg-white p-6 rounded-full text-slate-900 shadow-2xl">{stats?.fixX > 0 ? <ArrowUp size={56} strokeWidth={3} /> : <ArrowDown size={56} strokeWidth={3} />}</div>
                                    <div className="text-center">
                                        <p className="text-2xl font-black">{stats?.fixTextX}へ</p>
                                        <p className="text-6xl font-black tracking-tighter font-mono-precision">{Math.abs(stats?.fixX || 0).toFixed(1)}<span className="text-xl ml-1 font-bold text-white">mm</span></p>
                                    </div>
                                </div>
                            )}
                            <div className="h-32 w-[2px] bg-white/20 mx-2"></div>
                            {Math.abs(stats?.fixY || 0) > 0.0001 && (
                                <div className="flex flex-col items-center gap-4">
                                    <div className="bg-white p-6 rounded-full text-slate-900 shadow-2xl">{stats?.fixY > 0 ? <ArrowRight size={56} strokeWidth={3} /> : <ArrowLeft size={56} strokeWidth={3} />}</div>
                                    <div className="text-center">
                                        <p className="text-2xl font-black">{stats?.fixTextY}へ</p>
                                        <p className="text-6xl font-black tracking-tighter font-mono-precision">{Math.abs(stats?.fixY || 0).toFixed(1)}<span className="text-xl ml-1 font-bold text-white">mm</span></p>
                                    </div>
                                </div>
                            )}
                        </div>
                    )}
                </div>

                {/* 実測入力 */}
                <div className="bg-white p-5 rounded-[3rem] shadow-sm border border-slate-200">
                    <h3 className="font-black text-slate-800 flex items-center gap-3 mb-6 border-b pb-4 border-slate-50 text-sm uppercase italic tracking-widest"><Crosshair size={24} className="text-blue-600" />実測座標入力 (m)</h3>
                    <div className="space-y-8 text-left">
                        <div className="space-y-2">
                            <div className="flex justify-between items-center text-[11px] font-black text-blue-600 px-2 italic uppercase tracking-tighter">
                                <span>北方向 X軸入力</span>
                                <div className="flex items-center gap-2">
                                    <span className="text-slate-400">設計:</span>
                                    <input type="number" step="0.0001" value={activeColumn?.designX || 0} onChange={(e) => updateActiveColumn('designX', e.target.value)} className="font-mono-precision bg-slate-50 px-2 py-1 outline-none rounded-lg border font-bold text-slate-700 w-24 text-right" />
                                </div>
                            </div>
                            <div className="flex items-center gap-2">
                                <button onClick={() => adjustValue('measuredX', -stepUnit)} className="bg-slate-100 p-5 rounded-2xl active:bg-slate-300 transition-colors shrink-0 shadow-sm border flex items-center justify-center min-w-[64px] min-h-[64px]"><Minus size={28} /></button>
                                <div className="flex-1 bg-blue-50 p-5 rounded-[2.5rem] border-2 border-blue-200 overflow-hidden text-center shadow-inner flex items-center justify-center">
                                    <input type="number" step="0.0001" value={activeColumn?.measuredX || 0} onChange={(e) => updateActiveColumn('measuredX', e.target.value)} className="w-full bg-transparent font-mono-precision font-black text-blue-900 text-3xl outline-none text-center tracking-tighter" />
                                </div>
                                <button onClick={() => adjustValue('measuredX', stepUnit)} className="bg-slate-100 p-5 rounded-2xl active:bg-slate-300 transition-colors shrink-0 shadow-sm border flex items-center justify-center min-w-[64px] min-h-[64px]"><Plus size={28} /></button>
                            </div>
                        </div>
                        <div className="space-y-2">
                            <div className="flex justify-between items-center text-[11px] font-black text-blue-600 px-2 italic uppercase tracking-tighter">
                                <span>東方向 Y軸入力</span>
                                <div className="flex items-center gap-2">
                                    <span className="text-slate-400">設計:</span>
                                    <input type="number" step="0.0001" value={activeColumn?.designY || 0} onChange={(e) => updateActiveColumn('designY', e.target.value)} className="font-mono-precision bg-slate-50 px-2 py-1 outline-none rounded-lg border font-bold text-slate-700 w-24 text-right" />
                                </div>
                            </div>
                            <div className="flex items-center gap-2">
                                <button onClick={() => adjustValue('measuredY', -stepUnit)} className="bg-slate-100 p-5 rounded-2xl active:bg-slate-300 transition-colors shrink-0 shadow-sm border flex items-center justify-center min-w-[64px] min-h-[64px]"><Minus size={28} /></button>
                                <div className="flex-1 bg-blue-50 p-5 rounded-[2.5rem] border-2 border-blue-200 overflow-hidden text-center shadow-inner flex items-center justify-center">
                                    <input type="number" step="0.0001" value={activeColumn?.measuredY || 0} onChange={(e) => updateActiveColumn('measuredY', e.target.value)} className="w-full bg-transparent font-mono-precision font-black text-blue-900 text-3xl outline-none text-center tracking-tighter" />
                                </div>
                                <button onClick={() => adjustValue('measuredY', stepUnit)} className="bg-slate-100 p-5 rounded-2xl active:bg-slate-300 transition-colors shrink-0 shadow-sm border flex items-center justify-center min-w-[64px] min-h-[64px]"><Plus size={28} /></button>
                            </div>
                        </div>
                    </div>
                    <div className="flex gap-3 mt-8 bg-slate-100 p-2 rounded-2xl border border-slate-200 justify-center font-black">
                        <button onClick={() => setStepUnit(0.001)} className={`flex-1 py-4 text-xs font-black rounded-xl transition-all ${stepUnit === 0.001 ? 'bg-blue-600 text-white shadow-xl scale-105' : 'text-slate-500 hover:text-slate-800'}`}>1mm単位</button>
                        <button onClick={() => setStepUnit(0.0001)} className={`flex-1 py-4 text-xs font-black rounded-xl transition-all ${stepUnit === 0.0001 ? 'bg-blue-600 text-white shadow-xl scale-105' : 'text-slate-500 hover:text-slate-800'}`}>0.1mm単位</button>
                    </div>
                </div>

                {/* 精度管理ログ */}
                <div className="bg-white rounded-[3rem] shadow-sm border border-slate-200 overflow-hidden mb-12 text-left">
                    <div className="p-6 bg-slate-50 border-b flex justify-between items-center">
                        <h3 className="text-sm font-black uppercase flex items-center gap-2 text-slate-600 italic tracking-widest"><List size={22} /> 精度管理ログ</h3>
                        <div className="flex gap-3">
                            <button onClick={exportToSIMA} className="bg-blue-600 text-white p-3 rounded-2xl active:scale-90 shadow-lg flex items-center gap-1 font-black px-4"><CloudUpload size={18} />SIMA</button>
                            <button onClick={() => setIsImportModalOpen(true)} className="bg-blue-100 text-blue-600 p-3 rounded-2xl active:scale-90 shadow-sm"><FileUp size={20} /></button>
                            <button onClick={addColumn} className="bg-slate-800 text-white p-3 rounded-2xl active:scale-90 shadow-lg"><Plus size={20} /></button>
                        </div>
                    </div>
                    <div className="overflow-x-auto no-scrollbar">
                        <table className="w-full text-left border-collapse">
                            <thead className="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b text-center">
                                <tr><th className="p-5 text-left">点名</th><th className="p-5 text-left">設計座標(m)</th><th className="p-5">ズレ(mm)</th><th className="p-5"></th></tr>
                            </thead>
                            <tbody className="divide-y divide-slate-100 text-slate-700 font-black italic">
                                {localSite.columns.map(col => {
                                    const dx = (col.measuredX - col.designX) * 1000;
                                    const dy = (col.measuredY - col.designY) * 1000;
                                    const isP = Math.abs(dx) <= localSite.perfectThreshold && Math.abs(dy) <= localSite.perfectThreshold;
                                    const isActive = localSite.activeColumnId === col.id;
                                    
                                    return (
                                        <tr key={col.id} onClick={() => setActiveId(col.id)} className={`transition-all cursor-pointer ${isActive ? 'border-l-[12px] border-l-blue-600 bg-blue-50' : 'hover:bg-slate-50'}`}>
                                            <td className="p-5 font-black text-sm leading-tight max-w-[100px] truncate">{col.name}</td>
                                            <td className="p-3">
                                                <div className="flex flex-col gap-0.5 text-[10px] font-mono-precision opacity-60">
                                                    <div>X:{col.designX.toFixed(4)}</div>
                                                    <div>Y:{col.designY.toFixed(4)}</div>
                                                </div>
                                            </td>
                                            <td className="p-3 text-center">
                                                <div className="flex flex-col gap-0.5 text-[10px] font-black font-mono-precision">
                                                    <div className={`${Math.abs(dx) > localSite.tolerance ? 'text-red-500' : (isP ? 'text-green-600' : 'text-blue-600')}`}>
                                                        <span className="opacity-40 mr-1 italic text-[9px]">X:</span>{formatWithSign(dx, 1)}
                                                    </div>
                                                    <div className={`${Math.abs(dy) > localSite.tolerance ? 'text-red-500' : (isP ? 'text-green-600' : 'text-blue-600')}`}>
                                                        <span className="opacity-40 mr-1 italic text-[9px]">Y:</span>{formatWithSign(dy, 1)}
                                                    </div>
                                                </div>
                                            </td>
                                            <td className="p-4 text-right pr-4">
                                                <button 
                                                    onClick={(e) => { e.stopPropagation(); deleteColumn(col.id); }} 
                                                    className="text-slate-300 hover:text-red-600 active:text-red-600 transition-all p-3 rounded-full flex items-center justify-center"
                                                >
                                                    <Trash2 size={22}/>
                                                </button>
                                            </td>
                                        </tr>
                                    );
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            </main>

            {/* SIMAインポートモーダル */}
            {isImportModalOpen && (
                <div className="fixed inset-0 z-50 bg-slate-900/90 backdrop-blur-md flex items-center justify-center p-4 text-center">
                    <div className="bg-white w-full max-w-sm rounded-[3rem] shadow-2xl p-10 relative">
                        <button onClick={() => setIsImportModalOpen(false)} className="absolute top-6 right-6 text-slate-400 p-2 font-black hover:bg-slate-100 rounded-full"><X size={28}/></button>
                        <div className="mb-10 text-slate-800 font-black italic">
                            <h2 className="uppercase text-lg tracking-widest flex items-center justify-center gap-2"><FileUp className="text-blue-600" /> SIMAデータ読込</h2>
                        </div>
                        <div onClick={() => fileInputRef.current.click()} className="border-4 border-dashed border-slate-200 rounded-[2.5rem] p-16 flex flex-col items-center justify-center gap-8 bg-slate-50 active:bg-slate-100 transition-all cursor-pointer group shadow-inner">
                            <input type="file" ref={fileInputRef} onChange={handleFileChange} className="hidden" accept="*" />
                            <CloudUpload size={80} className="text-slate-300 group-hover:text-blue-500 transition-colors" />
                            <p className="text-sm font-black text-slate-400 uppercase tracking-widest">{importText ? "読込完了" : "ファイルを指定"}</p>
                        </div>
                        <div className="mt-12 flex gap-4 font-black">
                            <button onClick={() => setIsImportModalOpen(false)} className="flex-1 bg-slate-100 text-slate-400 p-6 rounded-[2rem] text-sm uppercase italic active:bg-slate-200">戻る</button>
                            <button onClick={handleImport} disabled={!importText} className={`flex-[2] p-6 rounded-[2rem] text-sm uppercase tracking-widest font-black shadow-xl transition-all ${importText ? 'bg-blue-600 text-white shadow-blue-500/40 active:scale-95' : 'bg-slate-200 text-slate-300'}`}>リスト展開</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

```