<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>なまあず平均GL算定アプリ v2.9</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
     crossorigin="anonymous"></script>
    
    <style>
        :root {
            --bg-color: #f4f4f9;
            --panel-bg: #ffffff;
            --accent-color: #2c3e50;
            --border-color: #ddd;
        }
        body {
            font-family: "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-color);
            margin: 0;
            padding: 20px;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        /* 広告用スタイル */
        .ad-container {
            width: 100%;
            max-width: 1200px;
            margin-bottom: 20px;
            text-align: center;
        }

        h1 {
            color: var(--accent-color);
            font-size: 1.5rem;
            margin-bottom: 20px;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            width: 100%;
            max-width: 1200px;
            justify-content: center;
            align-items: flex-start;
        }
        .panel {
            background: var(--panel-bg);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .input-panel { flex: 1; min-width: 450px; }
        .visual-panel { flex: 1; min-width: 500px; display: flex; flex-direction: column; align-items: center; }
        
        /* Table Styling */
        table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-bottom: 15px; }
        th, td { border: 1px solid var(--border-color); padding: 4px 6px; text-align: center; vertical-align: middle; }
        th { background-color: var(--accent-color); color: white; font-weight: normal; }
        input[type="number"] { width: 60px; padding: 4px; text-align: right; border: 1px solid #ccc; border-radius: 4px; }
        select { padding: 4px; border-radius: 4px; max-width: 120px; }
        .calc-row td { background-color: #f9f9f9; font-weight: bold; }
        
        /* Result & Formula Box */
        .result-container {
            margin-top: 15px;
            padding: 15px;
            background-color: #eef;
            border: 2px solid #bbc;
            border-radius: 5px;
            text-align: center;
        }
        .formula-box {
            margin-bottom: 10px;
            font-size: 0.95rem;
            color: #555;
            padding-bottom: 10px;
            border-bottom: 1px dashed #ccc;
        }
        .result-val { font-size: 1.6rem; font-weight: bold; color: #0056b3; }
        
        /* Canvas */
        canvas#planCanvas { background-color: #fff; border: 1px solid #999; }
        
        /* Buttons */
        .controls { margin-top: 10px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
        .main-actions { margin-bottom: 20px; display: flex; gap: 15px; }
        button { padding: 6px 12px; background-color: var(--accent-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
        button:hover { opacity: 0.9; }
        button.danger { background-color: #c0392b; }
        button.add-btn { background-color: #27ae60; padding: 2px 8px; font-size: 0.8rem; }
        button.file-btn { background-color: #2980b9; }
        button.print-btn { background-color: #8e44ad; }
        button.help-btn { background-color: #f39c12; }
        button.chart-btn { background-color: #8e44ad; font-weight: bold; }
        
        #btnToggleGradient { background-color: #e67e22; width: 140px; }
        #btnToggleGradient.active { background-color: #d35400; box-shadow: inset 0 3px 5px rgba(0,0,0,0.2); }
        
        /* 3D Button */
        #btn3D { background-color: #16a085; font-weight: bold; }

        .legend { margin-top: 10px; font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: center; }
        .legend-item { display: flex; align-items: center; }
        .color-box { width: 12px; height: 12px; margin-right: 5px; }

        /* Modals */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .modal-container {
            width: 90%; height: 85%;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
        }
        #container3D { background-color: #222; }
        #elevationContainer { background-color: #fff; padding: 10px; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column; }
        #elevationCanvas { width: 100%; height: 100%; }
        
        .modal-header-btn {
            position: absolute;
            top: 10px;
            padding: 6px 12px;
            cursor: pointer;
            border-radius: 4px;
            border: none;
            color: white;
            font-size: 0.9rem;
            z-index: 1001;
        }
        .modal-close-btn { right: 10px; background: #c0392b; }
        .modal-print-btn { right: 90px; background: #8e44ad; }
        
        /* Print Styles */
        @media print {
            body { background-color: white; padding: 0; }
            
            /* --- 広告を非表示にする設定 --- */
            .adsbygoogle, .ad-container { display: none !important; }

            /* --- 通常印刷時 (アプリ画面) --- */
            .container { gap: 0; display: block; }
            .panel { box-shadow: none; padding: 0; margin-bottom: 20px; page-break-inside: avoid; }
            .input-panel input, .input-panel select { border: none; background: transparent; text-align: center; width: auto; appearance: none; }
            th:nth-child(6), td:nth-child(6) { display: none; }
            .controls, .main-actions, h1 { display: none; }
            .visual-panel { margin-top: 20px; page-break-before: always; }
            canvas { border: 1px solid #333; }
            .panel::before { content: "平均GL算定書"; display: block; font-size: 1.5rem; font-weight: bold; margin-bottom: 10px; text-align: center; }
            .visual-panel::before { content: "配置図・平均GL算定図"; }
            
            .modal-overlay { display: none !important; }

            /* --- 算定図のみ印刷モード --- */
            body.printing-chart {
                background: white;
                height: 100%;
                overflow: visible;
            }
            body.printing-chart > * { display: none !important; } 
            body.printing-chart #modalElevation {
                display: block !important;
                position: static !important;
                width: 100% !important;
                height: 100% !important;
                background: white !important;
                z-index: 9999;
            }
            body.printing-chart #elevationContainer {
                display: block !important;
                position: static !important;
                width: 100% !important;
                height: 100% !important;
                box-shadow: none !important;
                border: none !important;
                padding: 0 !important;
            }
            body.printing-chart #elevationCanvas {
                width: 100% !important;
                height: auto !important;
            }
            body.printing-chart .modal-close-btn,
            body.printing-chart .modal-print-btn { display: none !important; }
            body.printing-chart #elevationContainer h2 {
                display: block !important;
                position: static !important;
                text-align: center;
                margin-bottom: 20px;
                font-size: 24px;
            }
        }
    </style>
</head>
<body>

    <div class="ad-container no-print">
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-format="fluid"
             data-ad-layout-key="-gw-3+1f-3d+2z"
             data-ad-client="ca-pub-7855061578893179"
             data-ad-slot="8574377639"></ins>
        <script>
             (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <h1 class="no-print">なまあず平均GL算定アプリ v2.9</h1>

    <div class="main-actions no-print">
        <button class="file-btn" onclick="saveData()">💾 保存 (JSON)</button>
        <button class="file-btn" onclick="document.getElementById('fileInput').click()">📂 読込 (JSON)</button>
        <button class="print-btn" onclick="window.print()">🖨️ 印刷</button>
        <button class="help-btn" onclick="window.open('help.html', '_blank')">❓ 解説</button>
        <button class="chart-btn" onclick="openElevation()">📊 算定図 (展開図)</button>
        <button id="btn3D" onclick="open3D()">🧊 3Dプレビュー</button>
        <input type="file" id="fileInput" accept=".json" style="display: none;" onchange="loadData(this)">
    </div>

    <div class="container">
        <div class="panel input-panel">
            <h3>1. 座標・条件入力</h3>
            <table id="inputTable">
                <thead>
                    <tr>
                        <th>点</th>
                        <th>X (mm)</th>
                        <th>Y (mm)</th>
                        <th>次の点への<br>GL (mm)</th>
                        <th>勾配</th>
                        <th class="no-print">操作</th>
                    </tr>
                </thead>
                <tbody id="tableBody"></tbody>
            </table>
            
            <div class="controls no-print">
                <button class="add-btn" onclick="addPoint()">＋ 末尾に点を追加</button>
                <button class="danger" id="btnReset">全てリセット</button>
                <button id="btnToggleGradient" onclick="toggleGradient()">勾配表示: OFF</button>
            </div>

            <h3 style="margin-top:30px;">2. 算定表</h3>
            <table id="calcTable">
                <thead>
                    <tr>
                        <th>辺</th>
                        <th>長さ (m)</th>
                        <th>GL高さ (m)</th>
                        <th>係数</th>
                        <th>高さの積 (m²)</th>
                    </tr>
                </thead>
                <tbody id="calcBody"></tbody>
                <tfoot>
                    <tr class="calc-row">
                        <td>合計</td>
                        <td id="totalLength">0.000</td>
                        <td>-</td>
                        <td>-</td>
                        <td id="totalArea">0.000</td>
                    </tr>
                </tfoot>
            </table>

            <div class="result-container">
                <div class="formula-box" id="formulaDisplay">
                    平均GL = 高さの積の合計 ÷ 長さの合計<br>
                    = 0 ÷ 0
                </div>
                平均GL = <span id="averageGL" class="result-val">0</span> mm
            </div>
        </div>

        <div class="panel visual-panel">
            <h3>平面図プレビュー</h3>
            <canvas id="planCanvas" width="600" height="600"></canvas>
            <div class="legend">
                <div class="legend-item"><div class="color-box" style="background:rgba(0,0,255,0.4); border:1px solid blue;"></div>GLマイナス (内側)</div>
                <div class="legend-item"><div class="color-box" style="background:rgba(255,0,0,0.4); border:1px solid red;"></div>GLプラス (外側)</div>
                <div class="legend-item" style="border-bottom: 2px dashed #333; margin-right:5px;">勾配あり(破線)</div>
            </div>
        </div>
    </div>

    <div id="modal3D" class="modal-overlay">
        <div id="container3D" class="modal-container">
            <button class="modal-header-btn modal-close-btn" onclick="close3D()">閉じる</button>
        </div>
    </div>

    <div id="modalElevation" class="modal-overlay">
        <div id="elevationContainer" class="modal-container">
            <h2 style="position:absolute; top:10px; left:20px; margin:0; z-index:10;">平均GL算定図 (展開図)</h2>
            <button class="modal-header-btn modal-print-btn" onclick="printElevation()">🖨️ 印刷</button>
            <button class="modal-header-btn modal-close-btn" onclick="closeElevation()">閉じる</button>
            <canvas id="elevationCanvas"></canvas>
        </div>
    </div>

<script>
    // --- グローバル変数 ---
    let points = [];
    let showGradient = false;
    const pointLabels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    const canvas = document.getElementById('planCanvas');
    const ctx = canvas.getContext('2d');

    // --- 3D用変数 ---
    let scene, camera, renderer, controls, animationId;

    // --- 初期化 ---
    window.addEventListener('DOMContentLoaded', () => {
        const btnReset = document.getElementById('btnReset');
        if(btnReset) btnReset.addEventListener('click', clearAllPoints);
        loadSampleData();
        
        // 印刷後の後処理 (クラス削除)
        window.addEventListener("afterprint", () => {
            document.body.classList.remove("printing-chart");
        });
    });

    // --- データ操作 ---
    function loadSampleData() {
        points = [
            { x: 0, y: 0, gl: 0, slope: 0 },
            { x: 0, y: 8190, gl: 0, slope: 0 },
            { x: 6067, y: 8190, gl: 0, slope: 0 },
            { x: 6067, y: 1517, gl: 0, slope: 0 },
            { x: 6977, y: 1517, gl: -750, slope: 2}, 
            { x: 6977, y: 0, gl: -750, slope: 0 },
            { x: 2427, y: 0, gl: -750, slope: 1 } 
        ];
        update();
    }

    function clearAllPoints() {
        if(confirm("全てのデータを削除して初期化しますか？")) {
            points = [];
            update();
        }
    }

    function toggleGradient() {
        showGradient = !showGradient;
        const btn = document.getElementById('btnToggleGradient');
        if(showGradient) {
            btn.innerText = "勾配表示: ON";
            btn.classList.add('active');
        } else {
            btn.innerText = "勾配表示: OFF";
            btn.classList.remove('active');
        }
        calculateAndDraw();
    }

    window.addPoint = function() { points.push({ x: 0, y: 0, gl: 0, slope: 0 }); update(); };
    window.insertPoint = function(index) {
        const current = points[index];
        const next = points[(index + 1) % points.length];
        const newX = (current.x + next.x) / 2;
        const newY = (current.y + next.y) / 2;
        points.splice(index + 1, 0, { x: newX, y: newY, gl: 0, slope: 0 });
        update();
    };
    window.removePoint = function(index) { points.splice(index, 1); update(); };
    window.updatePoint = function(index, key, value) { points[index][key] = parseFloat(value); update(); };

    function update() { renderInputTable(); calculateAndDraw(); }

    function saveData() {
        if(points.length === 0) { alert("データがありません"); return; }
        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(points));
        const a = document.createElement('a');
        a.href = dataStr; a.download = "average_gl_data.json";
        document.body.appendChild(a); a.click(); a.remove();
    }

    window.loadData = function(input) {
        const file = input.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = function(e) {
            try {
                const loadedPoints = JSON.parse(e.target.result);
                if (Array.isArray(loadedPoints)) { points = loadedPoints; update(); alert("読込完了"); }
                else { alert("データ形式エラー"); }
            } catch (err) { alert("読込失敗"); }
        };
        reader.readAsText(file);
        input.value = '';
    }

    function renderInputTable() {
        const tbody = document.getElementById('tableBody');
        tbody.innerHTML = '';
        if (points.length === 0) {
            tbody.innerHTML = `<tr><td colspan="6" style="padding:20px; color:#888;">データがありません</td></tr>`;
            return;
        }
        points.forEach((p, index) => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td><b>${getPointLabel(index)}</b></td>
                <td><input type="number" value="${p.x}" onchange="updatePoint(${index}, 'x', this.value)"></td>
                <td><input type="number" value="${p.y}" onchange="updatePoint(${index}, 'y', this.value)"></td>
                <td><input type="number" value="${p.gl}" step="10" onchange="updatePoint(${index}, 'gl', this.value)"></td>
                <td>
                    <select onchange="updatePoint(${index}, 'slope', this.value)">
                        <option value="0" ${p.slope == 0 ? 'selected' : ''}>平坦</option>
                        <option value="1" ${p.slope == 1 ? 'selected' : ''}>先上がり</option>
                        <option value="2" ${p.slope == 2 ? 'selected' : ''}>後上がり</option>
                    </select>
                </td>
                <td class="no-print" style="white-space:nowrap;">
                    <button class="add-btn" onclick="insertPoint(${index})" title="挿入">＋</button>
                    <button class="danger" style="padding:2px 8px;" onclick="removePoint(${index})" title="削除">×</button>
                </td>
            `;
            tbody.appendChild(tr);
        });
    }

    function getPointLabel(index) { return pointLabels[index % pointLabels.length] + (Math.floor(index / 26) || ""); }

    // --- 2D 計算・描画 ---
    let globalTotalLen = 0;
    let globalTotalArea = 0;
    let globalAvgGL = 0;

    function calculateAndDraw() {
        const calcBody = document.getElementById('calcBody');
        const totalLenElem = document.getElementById('totalLength');
        const totalAreaElem = document.getElementById('totalArea');
        const avgGLElem = document.getElementById('averageGL');
        const formulaElem = document.getElementById('formulaDisplay');

        calcBody.innerHTML = '';
        totalLenElem.innerText = '0.000'; totalAreaElem.innerText = '0.000'; avgGLElem.innerText = '0';
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        if (points.length < 2) return; 

        let totalLen = 0, totalArea = 0;
        const xs = points.map(p => p.x), ys = points.map(p => p.y);
        const minX = Math.min(...xs), maxX = Math.max(...xs);
        const minY = Math.min(...ys), maxY = Math.max(...ys);
        const margin = 120;
        const rangeX = (maxX - minX) || 1000;
        const rangeY = (maxY - minY) || 1000;
        const scale = Math.min((canvas.width - margin * 2) / rangeX, (canvas.height - margin * 2) / rangeY);
        const toCx = (x) => margin + (x - minX) * scale;
        const toCy = (y) => canvas.height - margin - (y - minY) * scale;

        for (let i = 0; i < points.length; i++) {
            const p1 = points[i];
            const p2 = points[(i + 1) % points.length]; 

            const distM = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) / 1000;
            const glM = p1.gl / 1000;
            const factor = (p1.slope == 0) ? 1.0 : 0.5;
            const area = distM * glM * factor;
            totalLen += distM; totalArea += area;

            const row = document.createElement('tr');
            let slopeText = "平坦";
            if(p1.slope == 1) slopeText = "先上がり";
            if(p1.slope == 2) slopeText = "後上がり";

            row.innerHTML = `
                <td>${getPointLabel(i)}～${getPointLabel(i+1)}</td>
                <td>${distM.toFixed(3)}</td>
                <td>${glM === 0 ? "±0" : glM.toFixed(3)}</td>
                <td>${factor.toFixed(1)} (${slopeText})</td>
                <td>${area.toFixed(5)}</td>
            `;
            calcBody.appendChild(row);

            const cx1 = toCx(p1.x), cy1 = toCy(p1.y);
            const cx2 = toCx(p2.x), cy2 = toCy(p2.y);
            
            ctx.beginPath(); ctx.moveTo(cx1, cy1); ctx.lineTo(cx2, cy2);
            const lineColor = (p1.gl < 0) ? "blue" : (p1.gl > 0 ? "red" : "#333");
            ctx.strokeStyle = lineColor; ctx.lineWidth = 2;
            ctx.setLineDash(p1.slope != 0 ? [5, 5] : []); ctx.stroke(); ctx.setLineDash([]); 

            if (showGradient && p1.gl !== 0) {
                const dx = p2.x - p1.x, dy = p2.y - p1.y;
                const len = Math.sqrt(dx*dx + dy*dy);
                const nx = -dy / len, ny = dx / len;
                let h1 = 0, h2 = 0;
                if (p1.slope === 0) { h1 = p1.gl; h2 = p1.gl; }
                else if (p1.slope === 1) { h1 = p1.gl; h2 = 0; }
                else if (p1.slope === 2) { h1 = 0; h2 = p1.gl; }

                const p1_out_x = p1.x + nx * h1, p1_out_y = p1.y + ny * h1;
                const p2_out_x = p2.x + nx * h2, p2_out_y = p2.y + ny * h2;
                const c1ox = toCx(p1_out_x), c1oy = toCy(p1_out_y);
                const c2ox = toCx(p2_out_x), c2oy = toCy(p2_out_y);

                ctx.beginPath(); ctx.moveTo(cx1, cy1); ctx.lineTo(cx2, cy2);
                ctx.lineTo(c2ox, c2oy); ctx.lineTo(c1ox, c1oy); ctx.closePath();

                const midX = (cx1 + cx2)/2, midY = (cy1 + cy2)/2;
                const dxC = cx2 - cx1, dyC = cy2 - cy1;
                const distPx = Math.sqrt(dxC*dxC + dyC*dyC);
                const nxC = dyC / distPx, nyC = -dxC / distPx;
                const maxH_px = Math.max(Math.abs(h1), Math.abs(h2)) * scale;
                const gradEndX = midX + nxC * maxH_px, gradEndY = midY + nyC * maxH_px;
                const grad = ctx.createLinearGradient(midX, midY, gradEndX, gradEndY);
                const isNegative = (p1.gl < 0);
                const baseColor = isNegative ? "0, 0, 255" : "255, 0, 0";
                grad.addColorStop(0, `rgba(${baseColor}, 0.6)`);
                grad.addColorStop(1, `rgba(${baseColor}, 0.05)`);

                ctx.fillStyle = grad; ctx.fill();
                ctx.strokeStyle = `rgba(${baseColor}, 0.5)`; ctx.lineWidth = 1; ctx.stroke();

                ctx.font = "10px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle";
                ctx.fillStyle = isNegative ? "blue" : "red";
                if (Math.abs(h1) > 0) drawGLLabel(ctx, c1ox, c1oy, h1, isNegative, nxC, nyC);
                if (Math.abs(h2) > 0) drawGLLabel(ctx, c2ox, c2oy, h2, isNegative, nxC, nyC);
            }
        }
        
        for (let i = 0; i < points.length; i++) {
             const p1 = points[i];
             const p2 = points[(i + 1) % points.length]; 
             const cx1 = toCx(p1.x), cy1 = toCy(p1.y);
             const cx2 = toCx(p2.x), cy2 = toCy(p2.y);
             const distM = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) / 1000;
             const midX = (cx1 + cx2) / 2, midY = (cy1 + cy2) / 2;
             const dxC = cx2 - cx1, dyC = cy2 - cy1;
             const distPx = Math.sqrt(dxC*dxC + dyC*dyC);
             const nxC = dyC / distPx, nyC = -dxC / distPx;
             let offsetDoc = 40; if (distPx < 60) offsetDoc = 60;
             const textX = midX + nxC * offsetDoc, textY = midY + nyC * offsetDoc;
             const glText = p1.gl === 0 ? "GL±0" : `GL${p1.gl}`;
             const lenText = `L=${distM.toFixed(2)}`;
             ctx.font = "bold 11px Arial";
             const textWidth = Math.max(ctx.measureText(lenText).width, ctx.measureText(glText).width);
             ctx.fillStyle = "rgba(255,255,255,0.9)";
             ctx.fillRect(textX - textWidth/2 - 5, textY - 14, textWidth + 10, 28);
             ctx.textAlign = "center"; ctx.textBaseline = "middle";
             ctx.fillStyle = "#333"; ctx.fillText(lenText, textX, textY - 7);
             ctx.fillStyle = (p1.gl < 0) ? "blue" : (p1.gl > 0 ? "red" : "#333");
             ctx.fillText(glText, textX, textY + 7);
        }

        points.forEach((p, i) => {
            const cx = toCx(p.x), cy = toCy(p.y);
            ctx.beginPath(); ctx.arc(cx, cy, 3, 0, Math.PI * 2);
            ctx.fillStyle = "#2c3e50"; ctx.fill();
            const centerX = (minX+maxX)/2, centerY = (minY+maxY)/2;
            const dirX = p.x - centerX, dirY = -(p.y - centerY);
            const len = Math.sqrt(dirX*dirX + dirY*dirY) || 1;
            ctx.fillStyle = "#000"; ctx.font = "bold 12px Arial";
            ctx.fillText(getPointLabel(i), cx + (dirX/len)*15, cy - (dirY/len)*15);
        });

        // 集計結果の保存
        globalTotalLen = totalLen;
        globalTotalArea = totalArea;
        globalAvgGL = totalLen > 0 ? (totalArea / totalLen) * 1000 : 0;
        
        totalLenElem.innerText = totalLen.toFixed(3);
        totalAreaElem.innerText = totalArea.toFixed(5);
        avgGLElem.innerText = globalAvgGL.toFixed(2);
        
        formulaElem.innerHTML = `
            平均GL ＝ 高さの積の合計 ÷ 長さの合計<br>
            ＝ ${totalArea.toFixed(5)} ÷ ${totalLen.toFixed(3)}
        `;
    }

    function drawGLLabel(ctx, x, y, val, isNegative, nx, ny) {
        const padding = 10;
        const lx = x + nx * padding, ly = y + ny * padding;
        const label = `▼ ${val}`;
        const width = ctx.measureText(label).width + 4;
        ctx.fillStyle = "rgba(255,255,255,0.8)";
        ctx.fillRect(lx - width/2, ly - 7, width, 14);
        ctx.fillStyle = isNegative ? "blue" : "red";
        ctx.fillText(label, lx, ly);
    }

    // --- 展開図 (Elevation Chart) ---
    function openElevation() {
        if (points.length < 2) return;
        document.getElementById('modalElevation').style.display = "flex";
        
        // 描画
        const canvas = document.getElementById('elevationCanvas');
        const container = document.getElementById('elevationContainer');
        const rect = container.getBoundingClientRect();
        canvas.width = rect.width;
        canvas.height = rect.height;
        
        drawElevation();
    }

    function closeElevation() {
        document.getElementById('modalElevation').style.display = "none";
    }

    function printElevation() {
        document.body.classList.add("printing-chart");
        window.print();
    }

    function drawElevation() {
        const c = document.getElementById('elevationCanvas');
        const ctx = c.getContext('2d');
        ctx.clearRect(0, 0, c.width, c.height);

        const chartMarginX = 50;
        const chartMarginY = 60;
        const graphW = c.width - chartMarginX * 2;
        const graphH = c.height - chartMarginY * 2;
        
        const allGLs = points.map(p => p.gl);
        allGLs.push(0); 
        allGLs.push(globalAvgGL); 
        const maxGL = Math.max(...allGLs);
        const minGL = Math.min(...allGLs);
        const glRange = maxGL - minGL || 1000;
        
        // 縦スケール調整 (1/4)
        const scaleY = graphH / (glRange * 4.0); 
        const centerY = c.height / 2;
        const centerGL = (maxGL + minGL) / 2;
        const getPlotY = (h) => centerY - (h - centerGL) * scaleY;
        const zeroY = getPlotY(0);

        const scaleX = graphW / globalTotalLen;

        let currentX = chartMarginX;
        
        for (let i = 0; i < points.length; i++) {
            const p1 = points[i];
            const p2 = points[(i + 1) % points.length];
            const distM = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) / 1000;
            const segW = distM * scaleX;
            
            let h1 = 0, h2 = 0;
            if (p1.slope === 0) { h1 = p1.gl; h2 = p1.gl; }
            else if (p1.slope === 1) { h1 = p1.gl; h2 = 0; }
            else if (p1.slope === 2) { h1 = 0; h2 = p1.gl; }
            
            const y1 = getPlotY(h1); 
            const y2 = getPlotY(h2);

            ctx.beginPath();
            ctx.fillStyle = "rgba(100, 100, 100, 0.2)";
            ctx.moveTo(currentX, zeroY);
            ctx.lineTo(currentX, y1);
            ctx.lineTo(currentX + segW, y2);
            ctx.lineTo(currentX + segW, zeroY);
            ctx.closePath();
            ctx.fill();

            ctx.beginPath();
            ctx.strokeStyle = "#000";
            ctx.lineWidth = 2;
            ctx.moveTo(currentX, y1);
            ctx.lineTo(currentX + segW, y2);
            ctx.stroke();

            ctx.beginPath();
            ctx.setLineDash([4, 4]);
            ctx.strokeStyle = "#bbb";
            ctx.lineWidth = 1;
            ctx.moveTo(currentX, chartMarginY/2);
            ctx.lineTo(currentX, c.height - chartMarginY/2);
            ctx.stroke();
            ctx.setLineDash([]);

            ctx.fillStyle = "#000";
            ctx.textAlign = "center";
            ctx.font = "bold 14px Arial";
            ctx.fillText(getPointLabel(i), currentX, chartMarginY/2);

            if(h1 !== 0 || h2 !== 0){
                ctx.fillStyle = "#444";
                ctx.font = "12px Arial";
                if(Math.abs(h1)>0) {
                    const textY = (h1 < 0) ? y1 + 15 : y1 - 5;
                    ctx.fillText(`H=${h1}`, currentX + 25, textY);
                }
                if(p1.slope !== 0 && Math.abs(h2)>0) {
                    const textY = (h2 < 0) ? y2 + 15 : y2 - 5;
                    ctx.fillText(`H=${h2}`, currentX + segW - 25, textY);
                }
            }

            ctx.fillStyle = "#333";
            ctx.font = "12px Arial";
            ctx.fillText(`L=${distM.toFixed(2)}m`, currentX + segW/2, c.height - chartMarginY + 20);
            
            if(segW > 60) {
                const factor = (p1.slope == 0) ? 1.0 : 0.5;
                const area = distM * p1.gl / 1000 * factor;
                ctx.fillStyle = "#666";
                ctx.font = "11px Arial";
                ctx.fillText(`S=${area.toFixed(2)}`, currentX + segW/2, chartMarginY + 20);
            }

            currentX += segW;
        }
        
        ctx.beginPath();
        ctx.setLineDash([4, 4]);
        ctx.strokeStyle = "#bbb";
        ctx.moveTo(currentX, chartMarginY/2);
        ctx.lineTo(currentX, c.height - chartMarginY/2);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.fillStyle = "#000";
        ctx.textAlign = "center";
        ctx.font = "bold 14px Arial";
        ctx.fillText(getPointLabel(0), currentX, chartMarginY/2);

        ctx.beginPath();
        ctx.strokeStyle = "#00aa00"; 
        ctx.lineWidth = 2;
        ctx.moveTo(chartMarginX, zeroY);
        ctx.lineTo(chartMarginX + graphW, zeroY);
        ctx.stroke();
        ctx.textAlign = "right";
        ctx.fillStyle = "#00aa00";
        ctx.font = "bold 12px Arial";
        ctx.fillText("設計GL ±0", chartMarginX - 5, zeroY + 4);

        const avgY = getPlotY(globalAvgGL);
        ctx.beginPath();
        ctx.strokeStyle = "#ffa500";
        ctx.lineWidth = 2;
        ctx.setLineDash([10, 5]);
        ctx.moveTo(chartMarginX, avgY);
        ctx.lineTo(chartMarginX + graphW, avgY);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.fillStyle = "#ffa500";
        ctx.fillText(`平均地盤面 ${globalAvgGL.toFixed(1)}`, chartMarginX - 5, avgY + 4);
    }

    // Three.js (省略なし)
    function open3D() {
        if (points.length < 3) { alert("3D表示には少なくとも3つの点が必要です。"); return; }
        document.getElementById('modal3D').style.display = "flex";
        init3D();
    }
    function close3D() {
        document.getElementById('modal3D').style.display = "none";
        if (renderer) { renderer.dispose(); document.getElementById('container3D').innerHTML = '<button class="modal-header-btn modal-close-btn" onclick="close3D()">閉じる</button>'; }
        if (animationId) cancelAnimationFrame(animationId);
    }
    function init3D() {
        const container = document.getElementById('container3D');
        const w = container.clientWidth; const h = container.clientHeight;
        scene = new THREE.Scene(); scene.background = new THREE.Color(0x222222); 
        camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 1000); camera.position.set(15, 20, 25);
        renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(w, h); container.appendChild(renderer.domElement);
        controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true;
        const gridHelper = new THREE.GridHelper(50, 50, 0x444444, 0x333333); scene.add(gridHelper);
        createBuildingWireframe(); animate3D();
    }
    function createBuildingWireframe() {
        let sumX = 0, sumY = 0; points.forEach(p => { sumX += p.x; sumY += p.y; });
        const centerX = sumX / points.length; const centerY = sumY / points.length;
        const avgGL_m = globalAvgGL / 1000;
        const matLineWhite = new THREE.LineBasicMaterial({ color: 0xffffff });
        const matLineDesignGL = new THREE.LineBasicMaterial({ color: 0x00ff00 }); 
        const matLineAvgGL = new THREE.LineBasicMaterial({ color: 0xffa500 });    
        const buildingHeight = 4.0; 
        const pts3D = points.map(p => ({ x: (p.x - centerX) / 1000, z: (p.y - centerY) / 1000 * -1, gl: p.gl / 1000, slope: p.slope }));
        const shapeGeo = new THREE.BufferGeometry(); const shapeVertices = [];
        pts3D.forEach(p => shapeVertices.push(p.x, 0, p.z)); shapeVertices.push(pts3D[0].x, 0, pts3D[0].z);
        shapeGeo.setAttribute('position', new THREE.Float32BufferAttribute(shapeVertices, 3)); scene.add(new THREE.Line(shapeGeo, matLineDesignGL));
        const avgGlGeo = new THREE.BufferGeometry(); const avgGlVertices = [];
        pts3D.forEach(p => avgGlVertices.push(p.x, avgGL_m, p.z)); avgGlVertices.push(pts3D[0].x, avgGL_m, pts3D[0].z);
        avgGlGeo.setAttribute('position', new THREE.Float32BufferAttribute(avgGlVertices, 3)); scene.add(new THREE.Line(avgGlGeo, matLineAvgGL));
        const roofGeo = new THREE.BufferGeometry(); const roofVertices = [];
        pts3D.forEach(p => roofVertices.push(p.x, buildingHeight, p.z)); roofVertices.push(pts3D[0].x, buildingHeight, pts3D[0].z);
        roofGeo.setAttribute('position', new THREE.Float32BufferAttribute(roofVertices, 3)); scene.add(new THREE.Line(roofGeo, matLineWhite));
        pts3D.forEach((p1, i) => {
            const pillarGeo = new THREE.BufferGeometry();
            pillarGeo.setAttribute('position', new THREE.Float32BufferAttribute([p1.x, 0, p1.z, p1.x, buildingHeight, p1.z], 3));
            scene.add(new THREE.Line(pillarGeo, matLineWhite));
            const p2 = pts3D[(i + 1) % pts3D.length];
            let h1 = 0, h2 = 0;
            if (p1.slope === 0) { h1 = p1.gl; h2 = p1.gl; } else if (p1.slope === 1) { h1 = p1.gl; h2 = 0; } else if (p1.slope === 2) { h1 = 0; h2 = p1.gl; }
            const glLineGeo = new THREE.BufferGeometry();
            glLineGeo.setAttribute('position', new THREE.Float32BufferAttribute([p1.x, h1, p1.z, p2.x, h2, p2.z], 3));
            scene.add(new THREE.Line(glLineGeo, matLineWhite));
            if (Math.abs(h1) > 0.001) {
                 const foundationGeo = new THREE.BufferGeometry();
                 foundationGeo.setAttribute('position', new THREE.Float32BufferAttribute([p1.x, 0, p1.z, p1.x, h1, p1.z], 3));
                 scene.add(new THREE.Line(foundationGeo, matLineWhite));
                 const labelText = `${Math.round(h1 * 1000)}`;
                 const sprite = makeTextSprite(labelText, { fontsize: 24, textColor: "#ccccff", backgroundColor: "rgba(0,0,0,0.5)" });
                 sprite.position.set(p1.x, h1, p1.z); if(h1 < 0) sprite.position.y -= 0.3; else sprite.position.y += 0.3; scene.add(sprite);
            }
        });
        const designLabel = makeTextSprite("設計GL ±0", { fontsize: 32, textColor: "#00ff00", backgroundColor: "rgba(0,0,0,0.7)" });
        designLabel.position.set(pts3D[0].x, 0.2, pts3D[0].z + 0.5); scene.add(designLabel);
        const avgLabelStr = `平均GL ${globalAvgGL.toFixed(1)} mm`;
        const avgLabel = makeTextSprite(avgLabelStr, { fontsize: 32, textColor: "#ffa500", backgroundColor: "rgba(0,0,0,0.7)" });
        avgLabel.position.set(pts3D[1].x, avgGL_m + 0.2, pts3D[1].z + 0.5); scene.add(avgLabel);
    }
    function makeTextSprite(message, parameters) {
        if ( parameters === undefined ) parameters = {};
        const fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Arial";
        const fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 18;
        const textColor = parameters.hasOwnProperty("textColor") ? parameters["textColor"] : "rgba(255, 255, 255, 1.0)";
        const backgroundColor = parameters.hasOwnProperty("backgroundColor") ? parameters["backgroundColor"] : "rgba(0,0,0,0)";
        const canvas = document.createElement('canvas'); canvas.width = 256; canvas.height = 128; 
        const context = canvas.getContext('2d');
        context.fillStyle = backgroundColor; context.fillRect(0, 0, canvas.width, canvas.height);
        context.font = "Bold " + fontsize + "px " + fontface; context.fillStyle = textColor;
        context.textAlign = 'center'; context.textBaseline = 'middle';
        context.fillText(message, canvas.width / 2, canvas.height / 2);
        const texture = new THREE.Texture(canvas); texture.needsUpdate = true; 
        const spriteMaterial = new THREE.SpriteMaterial({ map: texture, depthTest: false });
        const sprite = new THREE.Sprite(spriteMaterial); sprite.scale.set(2, 1, 1); return sprite;
    }
    function animate3D() {
        animationId = requestAnimationFrame(animate3D);
        if(controls) controls.update();
        if(renderer && scene && camera) renderer.render(scene, camera);
    }
</script>
</body>
</html>