<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>壁量電卓 Free 3.23（広告あり）</title>

<style>
    /* --- Global Settings --- */
    body {
      font-family: 'Roboto', sans-serif;
      background: #f0f2f5;
      color: #333;
      margin: 0;
      padding: 20px;
    }

    h1 {
      font-size: 1.8em;
      margin-bottom: 20px;
      text-align: center;
      color: #4a90e2;
    }

    h2 {
      font-size: 1.4em;
      margin-bottom: 15px;
      text-align: center;
      color: #4a90e2;
    }

    h3 {
      font-size: 1.1em;
      margin-bottom: 12px;
      text-align: center;
      color: #4a90e2;
    }

    a {
      color: #4a90e2;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }

    /* --- Container --- */
    .app-container {
      max-width: 1200px;
      margin: 0 auto;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    /* --- File Controls --- */
    #fileControls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-bottom: 10px;
    }
    #fileControls button {
      background: #4a90e2;
      border: none;
      color: #fff;
      padding: 10px 20px;
      font-size: 1em;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    #fileControls button:hover {
      background: #357abd;
    }

    /* --- Sections --- */
    .section {
      display: none;
    }
    .section.active {
      display: block;
    }

    /* --- Floor Selector --- */
    #floorSelector {
      text-align: center;
      margin-bottom: 20px;
    }
    #floorSelector label {
      font-weight: bold;
      margin: 0 10px;
    }

    /* --- Flexible Layout for Canvas & Data --- */
    .viewer {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    .canvas-container {
      width: 1600px;
      height: 900px;
      overflow: auto;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    #lineData {
      width: 300px;
      height: 900px;
      font-family: monospace;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 10px;
      resize: none;
    }

    /* --- Forms --- */
    .inputs-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
    }
    .inputs-group label {
      font-weight: bold;
    }
    .inputs-group input {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 5px;
      outline: none;
      transition: border 0.3s ease;
    }
    .inputs-group input:focus {
      border-color: #4a90e2;
    }

    /* --- Summary Totals --- */
    #wallTotals p {
      margin: 5px 0;
      text-align: center;
    }

    /* --- Additional Info --- */
    #additionalInputs {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #fafafa;
      text-align: center;
    }
    #additionalInputs h2 {
      font-size: 1.2em;
      margin-bottom: 10px;
      text-align: center;
    }
    #additionalInputs .inputs-group {

      text-align: center;
    }

    /* --- Context Menu --- */
    .context-menu {
      position: absolute;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .context-menu-item {
      padding: 8px 15px;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .context-menu-item:hover {
      background: #f0f0f0;
    }

    /* --- Footer --- */
    #totals {
      text-align: center;
      margin-top: 20px;
      font-size: 0.9em;
      color: #777;
    }

/* 計測モード中はボタンを緑色に */
#measureButton.active {
  background: #4caf50;
}

</style>

</head>
<body>
  <div class="app-container">
    <h1>壁量電卓 Free 3.23（広告あり）</h1>
<a href="https://amzn.to/44hRqEF", '_blank'>PR:住宅設計のための建築法規（人気のそぞろさんの本）</A><BR>
<a href="https://amzn.to/42IznX9", '_blank'>PR:設計実務に使える木造住宅の許容応力度計算</A><BR>

    <!-- File Operations -->
    <div id="fileControls">
      <button onclick="window.open('https://namazu-honpo.com/?page_id=5242', '_blank')">解説</button>
      <button id="loadButton">読込</button>
      <button id="saveButton">保存</button>
      <button id="printButton">印刷</button>
      <button onclick="window.open('https://taafnanbu.sakura.ne.jp/hekiden25/hosonaga006.html', '_blank')">細長比</button>
        <button onclick="window.open('https://namazu-honpo.com/apripre/futanviewer130.html')">柱負担ビューア</button>
      <input type="file" id="fileInput" accept="application/json" style="display:none;" />
<BR>
      <button onclick="showSection('section1')">壁入力</button>
      <button onclick="showSection('section3')">建物情報入力</button>
      <button onclick="showSection('section2')">結果概要</button>
  <button id="measureButton">計測</button>
    </div>

    <!-- Section 1: CAD Input -->
    <div id="section1" class="section active">
      <div id="floorSelector">
        <label><input type="radio" name="floor" value="1" checked> １階</label>
        <label><input type="radio" name="floor" value="2"> ２階</label>
      </div>
      <div class="viewer">
        <div class="canvas-container">
          <canvas id="gridCanvas"></canvas>
        </div>
        <textarea id="lineData" readonly></textarea>
      </div>
	<h3>存在壁量（簡易地震判定　青：OK　赤：NG）</h3>
        <p>１階 X方向壁量(m): <span id="horizontalTotal1">0.000 m</span>　１階 Y方向壁量(m): <span id="verticalTotal1">0.000 m</span></p>
        <p>２階 X方向壁量(m): <span id="horizontalTotal2">0.000 m</span>　２階 Y方向壁量(m): <span id="verticalTotal2">0.000 m</span></p>
    </div>

    <!-- Section 2: Results Overview -->
    <div id="section2" class="section">
	<h2>壁量計算結果概要</h2>
	<h3>床面積・必要壁量（自動計算）</h3>
      <div id="inputs" class="inputs-group">
        <div class="inputs-group" id="floor1Inputs">
          <label for="floorArea1">１階 床面積(㎡):</label>
          <input type="number" id="floorArea1" value="0" step="any" />
          <label for="requiredWall1">１階 必要壁量(m):</label>
          <input type="text" id="requiredWall1" readonly />
        </div>
        <div class="inputs-group" id="floor2Inputs">
          <label for="floorArea2">２階 床面積(㎡):</label>
          <input type="number" id="floorArea2" value="0" step="any" />
          <label for="requiredWall2">２階 必要壁量(m):</label>
          <input type="text" id="requiredWall2" readonly />
        </div>
        <div class="inputs-group" id="kaze1Inputs">
          <label for="kazeXArea1">１階 X方向風必要壁量(m):</label>
          <input type="number" id="kazeXArea1" readonly />
          <label for="kazeXArea2">２階 X方向風必要壁量(m):</label>
          <input type="text" id="kazeXArea2" readonly />
        </div>
        <div class="inputs-group" id="kaze2Inputs">
          <label for="kazeYArea1">１階 Y方向風必要壁量(m):</label>
          <input type="number" id="kazeYArea1" readonly />
          <label for="kazeYArea2">２階 Y方向風必要壁量(m):</label>
          <input type="text" id="kazeYArea2" readonly />
        </div>
      </div>
      <div id="wallTotals">
	<h3>地震力壁量判定（存在壁量/必要壁量　（）内は検定比　青：OK　赤：NG）</h3>
  <p>１階 X方向壁量(m): <span id="seismicX1">0.000 m</span></p>
  <p>１階 Y方向壁量(m): <span id="seismicY1">0.000 m</span></p>
  <p>２階 X方向壁量(m): <span id="seismicX2">0.000 m</span></p>
  <p>２階 Y方向壁量(m): <span id="seismicY2">0.000 m</span></p>

	<h3>風圧力壁量判定（（）内は検定比　青：OK　赤：NG）</h3>
        <p>１階 X方向: <span id="horizontalkaze1">0.000 m</span>　１階 Y方向: <span id="verticalkaze1">0.000 m</span></p>
        <p>２階 X方向: <span id="horizontalkaze2">0.000 m</span>　２階 Y方向: <span id="verticalkaze2">0.000 m</span></p>
      

	<h3>４分割法判定（壁量充足率 1.0以上（青：OK　赤：NG））</h3>
        <p>１階 上側面積: <span id="floor1TopArea">0.000 m²</span> 必要壁量: <span id="floor1needTWall">0.000 m</span> 存在壁量: <span id="floor1UpperWall">0.000 m</span>1階上側壁量充足率: <span id="floor1UpperWallR">   </span></p>
        <p>１階 下側面積: <span id="floor1BottomArea">0.000 m²</span> 必要壁量: <span id="floor1needBWall">0.000 m</span> 存在壁量: <span id="floor1LowerWall">0.000 m</span>1階下側壁量充足率: <span id="floor1LowerWallR">   </span></p>
        <p>１階 左側面積: <span id="floor1LeftArea">0.000 m²</span> 必要壁量: <span id="floor1needLWall">0.000 m</span> 存在壁量: <span id="floor1LeftWall">0.000 m</span>1階左側壁量充足率: <span id="floor1LeftWallR">   </span></p>
        <p>１階 右側面積: <span id="floor1RightArea">0.000 m²</span> 必要壁量: <span id="floor1needRWall">0.000 m</span> 存在壁量: <span id="floor1RightWall">0.000 m</span>1階右側壁量充足率: <span id="floor1RightWallR">   </span></p>
        <p>２階 上側面積: <span id="floor2TopArea">0.000 m²</span> 必要壁量: <span id="floor2needTWall">0.000 m</span> 存在壁量: <span id="floor2UpperWall">0.000 m</span>2階上側壁量充足率: <span id="floor2UpperWallR">   </span></p>
        <p>２階 下側面積: <span id="floor2BottomArea">0.000 m²</span> 必要壁量: <span id="floor2needBWall">0.000 m</span> 存在壁量: <span id="floor2LowerWall">0.000 m</span>2階下側壁量充足率: <span id="floor2LowerWallR">   </span></p>
        <p>２階 左側面積: <span id="floor2LeftArea">0.000 m²</span> 必要壁量: <span id="floor2needLWall">0.000 m</span> 存在壁量: <span id="floor2LeftWall">0.000 m</span>2階左側壁量充足率: <span id="floor2LeftWallR">   </span></p>
        <p>２階 右側面積: <span id="floor2RightArea">0.000 m²</span> 必要壁量: <span id="floor2needRWall">0.000 m</span> 存在壁量: <span id="floor2RightWall">0.000 m</span>2階右側壁量充足率: <span id="floor2RightWallR">   </span></p>


	<h3>４分割法判定（壁率比0.5以上（青：OK　赤：NG））</h3>
    <div id="wallBalance" class="inputs-group">
      <label>1階 上下比:</label><span id="floor1ULBalance">0.0000</span>
      <label>1階 左右比:</label><span id="floor1LRBalance">0.0000</span>
      <label>2階 上下比:</label><span id="floor2ULBalance">0.0000</span>
      <label>2階 左右比:</label><span id="floor2LRBalance">0.0000</span>
    </div>

      </div>
    </div>

    <!-- Section 3: Building Info -->
    <div id="section3" class="section">
      <div id="additionalInputs">
        <h2>建物情報入力</h2>
        <div class="inputs-group">
          <label for="creationDate">作成日付:</label>
          <input type="text" id="creationDate" placeholder="YYYY-MM-DD" />
        </div>
        <div class="inputs-group">
          <label for="buildingName">建物名（必ず入力）:</label>
          <input type="text" id="buildingName" />
        </div>
        <div class="inputs-group">
          <label for="floorHeight1">1階階高:</label>
          <input type="number" id="floorHeight1" step="any" />
        </div>
        <div class="inputs-group">
          <label for="floorHeight2">2階階高:</label>
          <input type="number" id="floorHeight2" step="any" />
        </div>
        <div class="inputs-group">
          <label for="maxHeight">最高高さ:</label>
          <input type="number" id="maxHeight" step="any" />
        </div>
        <div class="inputs-group">
          <label for="maxEaveHeight">最高軒高:</label>
          <input type="number" id="maxEaveHeight" step="any" />
        </div>
        <div class="inputs-group">
          <label for="coefficient1">１階 係数（必ず入力）:</label>
          <input type="number" id="coefficient1" value="0" step="any" />
        </div>
        <div class="inputs-group">
          <label for="coefficient2">２階 係数（必ず入力）:</label>
          <input type="number" id="coefficient2" value="0" step="any" />
        </div>
        <div class="inputs-group">
          <label for="coefficient3">平屋 係数（必ず入力）:</label>
          <input type="number" id="coefficient3" value="0" step="any" />
        </div>
        <div class="inputs-group">
          <label for="visibleAreaX1">1階Ｘ方向（→）見付面積:</label>
          <input type="number" id="visibleAreaX1" step="any" />
        </div>
        <div class="inputs-group">
          <label for="visibleAreaX2">2階Ｘ方向（→）見付面積:</label>
          <input type="number" id="visibleAreaX2" step="any" />
        </div>
        <div class="inputs-group">
          <label for="visibleAreaY1">1階Ｙ方向（↑）見付面積:</label>
          <input type="number" id="visibleAreaY1" step="any" />
        </div>
        <div class="inputs-group">
          <label for="visibleAreaY2">2階Ｙ方向（↑）見付面積:</label>
          <input type="number" id="visibleAreaY2" step="any" />
        </div>
      </div>
    </div>

    <div id="totals">開発：株式会社なまあず本舗　Catfishなおうち 2025/5/4公開　自由にご利用いただいて構いませんが、このアプリを使ってのいかなる損害も補償しません。また随時アップデートしています。公開を急にやめることもあります。バグなどの報告は、note版のCatfishなおうちへお願いします。</div>

     
  

  </div>


<script>
        /**********************************
         * グローバル定数・変数の定義
         **********************************/
        const canvas = document.getElementById("gridCanvas");
        const ctx = canvas.getContext("2d");
        const marginLeft = 50;
        const marginRight = 20;
        const marginTop = 20;
        const marginBottom = 50;
        const baseSpacing = 0.91;
        const scalingFactor = 100; // 例：0.91×100 = 91px

let isMeasureMode = false;

  (function(){
// デバッグ用
    console.log('hostname:', location.hostname);
    const allowedHosts = [
      'namazu-honpo.com',
      'www.namazu-honpo.com'
    ];

    if (!allowedHosts.includes(location.hostname)) {
      document.body.innerHTML = '<h1 style="color:red;">アクセスエラー</h1>';
      throw new Error('Unauthorized domain: ' + location.hostname);
    }
  })();


        // 現在の編集中フロア（1または2）
        let currentFloor = 1;

        // 各階のデータを格納するオブジェクト
        // ※軸データは両階で共通とする
        let floorData = {
          1: {
            lines: [],
            floorAreaRectangles: [],
            floorArea: 0,
            coefficient: 0,
            xAxisData: null,
            yAxisData: null
          },
          2: {
            lines: [],
            floorAreaRectangles: [],
            floorArea: 0,
            coefficient: 0,
            xAxisData: null,
            yAxisData: null
          }
        };

        // ★ 両階で共有する軸データ生成関数（初期状態）
        function initAxisData() {
          let xAxisData = [];
          let yAxisData = [];
          for (let i = 0; i < 30; i++) {
            const xObj = { name: "X" + (i + 1), spacing: (i < 29 ? baseSpacing : null), addCount: 0 };
            const yObj = { name: "Y" + (i + 1), spacing: (i < 29 ? baseSpacing : null), addCount: 0 };
            xAxisData.push(xObj);
            yAxisData.push(yObj);
          }
          return { xAxisData, yAxisData };
        }

        // 初期軸データ生成し、両階に同じ参照を割り当て
        const axisInit = initAxisData();
        floorData[1].xAxisData = axisInit.xAxisData;
        floorData[1].yAxisData = axisInit.yAxisData;
        floorData[2].xAxisData = axisInit.xAxisData;
        floorData[2].yAxisData = axisInit.yAxisData;

        // ★ 軸データを両階で同期させる関数
        function syncAxisData() {
          // 現在の階の軸データをグローバルとして両階に設定
          const globalXAxis = getCurrentData().xAxisData;
          const globalYAxis = getCurrentData().yAxisData;
          floorData[1].xAxisData = globalXAxis;
          floorData[2].xAxisData = globalXAxis;
          floorData[1].yAxisData = globalYAxis;
          floorData[2].yAxisData = globalYAxis;
        }

        // 現在の階のデータを返す
        function getCurrentData() {
          return floorData[currentFloor];
        }

        // 数値を小数点以下3桁で表示
        function formatSpacing(value) {
          const truncated = Math.floor(value * 1000) / 1000;
          return truncated.toFixed(3);
        }

        // 指定した軸データの間隔合計（インデックス a～b-1）
        function sumAxisSpacing(axisData, a, b) {
          let sum = 0;
          for (let i = a; i < b; i++) {
            sum += axisData[i].spacing;
          }
          return sum;
        }

        // グリッド点のX座標
        function getXPos(index, xAxisData) {
          let pos = marginLeft;
          for (let i = 0; i < index; i++) {
            pos += xAxisData[i].spacing * scalingFactor;
          }
          return pos;
        }

        // グリッド点のY座標（下から上へ）
        function getYPos(index, yAxisData) {
          let pos = canvas.height - marginBottom;
          for (let j = 0; j < index; j++) {
            pos -= yAxisData[j].spacing * scalingFactor;
          }
          return pos;
        }

        /**********************************
         * Undo機能
         **********************************/
        function pushUndoState() {
          const data = getCurrentData();
          const state = {
            lines: JSON.parse(JSON.stringify(data.lines)),
            floorAreaRectangles: JSON.parse(JSON.stringify(data.floorAreaRectangles))
          };
          undoStack.push(state);
        }
        function undoAction() {
          if (undoStack.length > 0) {
            const prevState = undoStack.pop();
            const data = getCurrentData();
            data.lines = prevState.lines;
            data.floorAreaRectangles = prevState.floorAreaRectangles;
            let totalArea = data.floorAreaRectangles.reduce((sum, r) => sum + r.area, 0);
            data.floorArea = totalArea;
            updateInputFields();
            updateTotals();
            updateLineDataDisplay();
            updateAllAdditionalCalculations();
            drawGrid();
          } else {
            alert("元に戻す操作はありません");
          }
        }
        let undoStack = [];

        /**********************************
         * キャンバス・グリッド更新・描画
         **********************************/
        function updateCanvasSize() {
          const data = getCurrentData();
          let totalX = marginLeft + marginRight;
          for (let i = 0; i < data.xAxisData.length - 1; i++) {
            totalX += data.xAxisData[i].spacing * scalingFactor;
          }
          let totalY = marginTop + marginBottom;
          for (let j = 0; j < data.yAxisData.length - 1; j++) {
            totalY += data.yAxisData[j].spacing * scalingFactor;
          }
          canvas.width = totalX;
          canvas.height = totalY;
          const container = document.querySelector(".canvas-container");
          container.scrollLeft = 0;
          container.scrollTop = canvas.height - container.clientHeight;
        }

        // 線分・軸・床面積矩形などの情報をテキストエリアに表示
        function updateLineDataDisplay() {
          const data = getCurrentData();
          const textarea = document.getElementById("lineData");
          let text = "【線分データ】\n";
          data.lines.forEach((line, i) => {
            let lengthCalc = 0;
            if (line.orientation === "horizontal") {
              const start = Math.min(line.start.x, line.end.x);
              const end = Math.max(line.start.x, line.end.x);
              lengthCalc = sumAxisSpacing(data.xAxisData, start, end);
              text += `Line ${i + 1}: Start(${line.start.x},${line.start.y}) End(${line.end.x},${line.end.y}) 水平, 長さ: ${lengthCalc.toFixed(3)}, 倍率: ${line.multiplier}\n`;
            } else if (line.orientation === "vertical") {
              const start = Math.min(line.start.y, line.end.y);
              const end = Math.max(line.start.y, line.end.y);
              lengthCalc = sumAxisSpacing(data.yAxisData, start, end);
              text += `Line ${i + 1}: Start(${line.start.x},${line.start.y}) End(${line.end.x},${line.end.y}) 垂直, 長さ: ${lengthCalc.toFixed(3)}, 倍率: ${line.multiplier}\n`;
            }
          });
          text += "\n【X軸データ】\n";
          data.xAxisData.forEach((label, i) => {
            text += label.name;
            if (i < data.xAxisData.length - 1) {
              text += ` (間隔: ${formatSpacing(label.spacing)})`;
            }
            text += "\n";
          });
          text += "\n【Y軸データ】\n";
          data.yAxisData.forEach((label, i) => {
            text += label.name;
            if (i < data.yAxisData.length - 1) {
              text += ` (間隔: ${formatSpacing(label.spacing)})`;
            }
            text += "\n";
          });
          text += "\n【床面積矩形データ】\n";
          data.floorAreaRectangles.forEach((rectObj, i) => {
            text += `Rect ${i + 1}: Start(${rectObj.start.x},${rectObj.start.y}) End(${rectObj.end.x},${rectObj.end.y}) 面積: ${rectObj.area.toFixed(3)}\n`;
          });
          // 追加情報の表示（右側テキストエリア下部へ）
          text += "\n【追加情報】\n";
          text += "作成日付: " + document.getElementById("creationDate").value + "\n";
          text += "建物名称: " + document.getElementById("buildingName").value + "\n";
          text += "1階階高: " + document.getElementById("floorHeight1").value + "\n";
          text += "2階階高: " + document.getElementById("floorHeight2").value + "\n";
          text += "最高高さ: " + document.getElementById("maxHeight").value + "\n";
          text += "最高軒高: " + document.getElementById("maxEaveHeight").value + "\n";
          text += "1階Ｘ方向（→）見付面積: " + document.getElementById("visibleAreaX1").value + "\n";
          text += "2階Ｘ方向（→）見付面積: " + document.getElementById("visibleAreaX2").value + "\n";
          text += "1階Ｙ方向（↑）見付面積: " + document.getElementById("visibleAreaY1").value + "\n";
          text += "2階Ｙ方向（↑）見付面積: " + document.getElementById("visibleAreaY2").value + "\n";
          textarea.value = text;
        }

        // ★【追加】グリッド上の実数値（メートル単位）を算出する関数
        function gridCoord(index, axisData) {
          let sum = 0;
          for (let i = 0; i < index; i++) {
            sum += axisData[i].spacing;
          }
          return sum;
        }

        // ★【追加】床面積矩形の面積再計算
        function recalcFloorAreaRectangles() {
          const data = getCurrentData();
          data.floorAreaRectangles.forEach((rect) => {
            const width = sumAxisSpacing(data.xAxisData, rect.start.x, rect.end.x);
            const height = sumAxisSpacing(data.yAxisData, rect.start.y, rect.end.y);
            rect.area = width * height;
          });
        }

// ■JS：計測モード切替ボタン
document.getElementById("measureButton").addEventListener("click", function() {
  isMeasureMode = !isMeasureMode;
  this.classList.toggle("active");  // 必要ならスタイル用
});


        // グリッドおよび各要素（軸、線分、床面積矩形）の描画
        function drawGrid() {
          const data = getCurrentData();
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          // (1) 2階編集中の場合、1階の床面積矩形を背景に薄い灰色で描画
          if (currentFloor === 2) {
            floorData[1].floorAreaRectangles.forEach((rectObj) => {
              const x1 = getXPos(rectObj.start.x, floorData[1].xAxisData);
              let y1 = getYPos(rectObj.end.y, floorData[1].yAxisData);
              const x2 = getXPos(rectObj.end.x, floorData[1].xAxisData);
              let y2 = getYPos(rectObj.start.y, floorData[1].yAxisData);
              if (y2 >= canvas.height) { y2 = canvas.height - 1; }
              ctx.fillStyle = "rgba(200,200,200,0.5)"; // 薄い灰色
              ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
            });
          }
          // (2) グリッド点描画
          for (let i = 0; i < data.xAxisData.length; i++) {
            for (let j = 0; j < data.yAxisData.length; j++) {
              const x = getXPos(i, data.xAxisData);
              const y = getYPos(j, data.yAxisData);
              ctx.beginPath();
              ctx.arc(x, y, 3, 0, 2 * Math.PI);
              ctx.fillStyle = "#000";
              ctx.fill();
            }
          }
          // (3) 線分描画と倍率表示
          multiplierAreas = []; // グローバル配列（後述）をクリア
          data.lines.forEach((line, i) => {
            ctx.beginPath();
            const startX = getXPos(line.start.x, data.xAxisData);
            const startY = getYPos(line.start.y, data.yAxisData);
            const endX = getXPos(line.end.x, data.xAxisData);
            const endY = getYPos(line.end.y, data.yAxisData);
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.strokeStyle = "red";
            ctx.lineWidth = 3;
            ctx.stroke();
            const midX = (startX + endX) / 2;
            const midY = (startY + endY) / 2;
            ctx.font = "14px sans-serif";
            ctx.fillStyle = "blue";
            const text = line.multiplier.toString();
            const metrics = ctx.measureText(text);
            const textWidth = metrics.width;
            const textHeight = 16;
            if (line.orientation === "horizontal") {
              ctx.textAlign = "center";
              ctx.textBaseline = "middle";
              ctx.fillText(text, midX, midY - 10);
              multiplierAreas.push({
                x: midX - textWidth / 2,
                y: midY - 10 - textHeight / 2,
                width: textWidth,
                height: textHeight,
                lineIndex: i
              });
            } else if (line.orientation === "vertical") {
              ctx.textAlign = "left";
              ctx.textBaseline = "middle";
              ctx.fillText(text, midX + 10, midY);
              multiplierAreas.push({
                x: midX + 10,
                y: midY - textHeight / 2,
                width: textWidth,
                height: textHeight,
                lineIndex: i
              });
            }
          });
          // (4) 軸ラベル描画
          xLabelAreas = [];
          yLabelAreas = [];
          ctx.font = "14px sans-serif";
          ctx.fillStyle = "#000";
          // X軸ラベル
          ctx.textAlign = "center";
          ctx.textBaseline = "middle";
          data.xAxisData.forEach((label, i) => {
            const x = getXPos(i, data.xAxisData);
            const y = canvas.height - marginBottom + 15;
            ctx.fillText(label.name, x, y);
            const metrics = ctx.measureText(label.name);
            xLabelAreas.push({
              x: x - metrics.width / 2,
              y: y - 10,
              width: metrics.width,
              height: 20,
              axis: "x",
              index: i
            });
          });
          // Y軸ラベル
          ctx.textAlign = "right";
          data.yAxisData.forEach((label, j) => {
            const x = marginLeft - 10;
            const y = getYPos(j, data.yAxisData);
            ctx.fillText(label.name, x, y);
            const metrics = ctx.measureText(label.name);
            yLabelAreas.push({
              x: x - metrics.width,
              y: y - 10,
              width: metrics.width,
              height: 20,
              axis: "y",
              index: j
            });
          });
          // (5) 軸間隔表示（X・Y共通）
          xSpacingAreas = [];
          ctx.font = "12px sans-serif";
          ctx.textAlign = "center";
          for (let i = 0; i < data.xAxisData.length - 1; i++) {
            const text = formatSpacing(data.xAxisData[i].spacing);
            const x = (getXPos(i, data.xAxisData) + getXPos(i + 1, data.xAxisData)) / 2;
            const y = canvas.height - marginBottom + 25;
            ctx.textBaseline = "top";
            ctx.fillText(text, x, y);
            const metrics = ctx.measureText(text);
            xSpacingAreas.push({
              x: x - metrics.width / 2,
              y: y,
              width: metrics.width,
              height: 16,
              index: i,
              axis: "x"
            });
          }
          ySpacingAreas = [];
          ctx.font = "12px sans-serif";
          ctx.textAlign = "right";
          ctx.textBaseline = "middle";
          for (let j = 0; j < data.yAxisData.length - 1; j++) {
            const text = formatSpacing(data.yAxisData[j].spacing);
            const x = marginLeft - 20;
            const y = (getYPos(j, data.yAxisData) + getYPos(j + 1, data.yAxisData)) / 2;
            ctx.fillText(text, x, y);
            const metrics = ctx.measureText(text);
            ySpacingAreas.push({
              x: x - metrics.width,
              y: y - 8,
              width: metrics.width,
              height: 16,
              index: j,
              axis: "y"
            });
          }

          // (6) 床面積矩形描画（自階は薄緑色）
          drawFloorAreaRectangles();
          // (7) 分割線（点線）描画
          drawAreaDivisionLines();
        }

        // 床面積矩形描画
        function drawFloorAreaRectangles() {
          const data = getCurrentData();
          data.floorAreaRectangles.forEach((rectObj) => {
            const x1 = getXPos(rectObj.start.x, data.xAxisData);
            let y1 = getYPos(rectObj.end.y, data.yAxisData);
            const x2 = getXPos(rectObj.end.x, data.xAxisData);
            let y2 = getYPos(rectObj.start.y, data.yAxisData);
            if (y2 >= canvas.height) y2 = canvas.height - 1;
            ctx.fillStyle = "rgba(144,238,144,0.5)";
            ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
          });
          if (isAreaDragging && areaDragStart && currentAreaDragPoint) {
            const data = getCurrentData();
            const startX = Math.min(areaDragStart.grid.x, currentAreaDragPoint.x);
            const endX = Math.max(areaDragStart.grid.x, currentAreaDragPoint.x);
            const startY = Math.min(areaDragStart.grid.y, currentAreaDragPoint.y);
            const endY = Math.max(areaDragStart.grid.y, currentAreaDragPoint.y);
            const x1 = getXPos(startX, data.xAxisData);
            let y1 = getYPos(endY, data.yAxisData);
            const x2 = getXPos(endX, data.xAxisData);
            let y2 = getYPos(startY, data.yAxisData);
            if (y2 >= canvas.height) y2 = canvas.height - 1;
            ctx.fillStyle = "rgba(144,238,144,0.5)";
            ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
          }
        }

        // -----------------------
        // 面積エリアの分割用点線描画
// -----------------------
// 面積エリアの分割用点線描画（両端まで延長）
function drawAreaDivisionLines() {
  const data = getCurrentData();
  if (data.floorAreaRectangles.length === 0) return; // 床面積矩形がなければ描画しない

  // 床面積矩形群の外接矩形（※位置はcanvas座標上）
  let xLeftUnion = Infinity, xRightUnion = -Infinity, yTopUnion = Infinity, yBottomUnion = -Infinity;
  data.floorAreaRectangles.forEach(rect => {
    const x1 = getXPos(Math.min(rect.start.x, rect.end.x), data.xAxisData);
    const x2 = getXPos(Math.max(rect.start.x, rect.end.x), data.xAxisData);
    // getYPosは下方向に向かって値が大きくなるため、上端は大きい方のインデックスを使う
    const yTop = getYPos(Math.max(rect.start.y, rect.end.y), data.yAxisData);
    const yBottom = getYPos(Math.min(rect.start.y, rect.end.y), data.yAxisData);
    xLeftUnion = Math.min(xLeftUnion, x1);
    xRightUnion = Math.max(xRightUnion, x2);
    yTopUnion = Math.min(yTopUnion, yTop);
    yBottomUnion = Math.max(yBottomUnion, yBottom);
  });

  // 垂直線のX座標（左端・右端およびその中間4等分＝計5本）
  const verticalPositions = [
    xLeftUnion,
    xLeftUnion + (xRightUnion - xLeftUnion) / 4,
    xLeftUnion + (xRightUnion - xLeftUnion) / 2,
    xLeftUnion + (xRightUnion - xLeftUnion) * 3 / 4,
    xRightUnion
  ];

  // 水平線のY座標（上端・下端およびその中間4等分＝計5本）
  const horizontalPositions = [
    yTopUnion,
    yTopUnion + (yBottomUnion - yTopUnion) / 4,
    yTopUnion + (yBottomUnion - yTopUnion) / 2,
    yTopUnion + (yBottomUnion - yTopUnion) * 3 / 4,
    yBottomUnion
  ];

  ctx.save();
  ctx.setLineDash([5, 5]);
  ctx.strokeStyle = "gray"; // 点線の色

  // ▼【変更】垂直線の描画：元は yTopUnion～yBottomUnion でしたが、
  //     左右の X 座標はそのままで、Y方向はグリッドの上下端（marginTop ～ canvas.height - marginBottom）まで延長
  verticalPositions.forEach(xPos => {
    ctx.beginPath();
    ctx.moveTo(xPos, marginTop);                  // 変更：上端（グリッドの最上部）
    ctx.lineTo(xPos, canvas.height - marginBottom); // 変更：下端（グリッドの最下部）
    ctx.stroke();
  });

  // ▼【変更】水平線の描画：元は xLeftUnion～xRightUnion でしたが、
  //     上下の Y 座標はそのままで、X方向はグリッドの左右端（marginLeft ～ canvas.width - marginRight）まで延長
  horizontalPositions.forEach(yPos => {
    ctx.beginPath();
    ctx.moveTo(marginLeft, yPos);                    // 変更：左端（グリッドの最左部）
    ctx.lineTo(canvas.width - marginRight, yPos);      // 変更：右端（グリッドの最右部）
    ctx.stroke();
  });
  ctx.restore();
}


        // ★【追加】床面積矩形分割面積（A,B,C,D）の算出
        // A: 上側面積（上側エリア＝上端から全体の上から1/4部分）
        // B: 下側面積（下側エリア＝下端から全体の下から1/4部分）
        // C: 左側面積（左側エリア＝左端から全体の左から1/4部分）
        // D: 右側面積（右側エリア＝右端から全体の右から1/4部分）
        let additionalAreas = {
          1: { A: 0, B: 0, C: 0, D: 0 },
          2: { A: 0, B: 0, C: 0, D: 0 }
        };
        function recalcAdditionalFloorAreas() {
          [1, 2].forEach(function(floorNum) {
            const data = floorData[floorNum];
            const xAxisData = data.xAxisData;
            const yAxisData = data.yAxisData;
            if (data.floorAreaRectangles.length === 0) {
              additionalAreas[floorNum] = { A: 0, B: 0, C: 0, D: 0 };
              setDisplayArea(floorNum, { A: 0, B: 0, C: 0, D: 0 });
              return;
            }
            // 全体の外接領域
            let unionXLeft = Infinity, unionXRight = -Infinity;
            let unionYBottom = Infinity, unionYTop = -Infinity;
            data.floorAreaRectangles.forEach(function(rect) {
              const rx1 = gridCoord(Math.min(rect.start.x, rect.end.x), xAxisData);
              const rx2 = gridCoord(Math.max(rect.start.x, rect.end.x), xAxisData);
              const ry1 = gridCoord(Math.min(rect.start.y, rect.end.y), yAxisData);
              const ry2 = gridCoord(Math.max(rect.start.y, rect.end.y), yAxisData);
              unionXLeft = Math.min(unionXLeft, rx1);
              unionXRight = Math.max(unionXRight, rx2);
              unionYBottom = Math.min(unionYBottom, ry1);
              unionYTop = Math.max(unionYTop, ry2);
            });
            // 分割位置（上下・左右を4等分）
            const h1 = unionYBottom;
            const h2 = unionYBottom + (unionYTop - unionYBottom) / 4;
            const h4 = unionYBottom + (unionYTop - unionYBottom) * 3/4;
            const h5 = unionYTop;
            const v1 = unionXLeft;
            const v2 = unionXLeft + (unionXRight - unionXLeft) / 4;
            const v4 = unionXLeft + (unionXRight - unionXLeft) * 3/4;
            const v5 = unionXRight;
            let areaA = 0, areaB = 0, areaC = 0, areaD = 0;
            data.floorAreaRectangles.forEach(function(rect) {
              const rx1 = gridCoord(Math.min(rect.start.x, rect.end.x), xAxisData);
              const rx2 = gridCoord(Math.max(rect.start.x, rect.end.x), xAxisData);
              const ry1 = gridCoord(Math.min(rect.start.y, rect.end.y), yAxisData);
              const ry2 = gridCoord(Math.max(rect.start.y, rect.end.y), yAxisData);
              // A領域：上側（[h4, h5]）
              const interAHeight = Math.max(0, Math.min(ry2, h5) - Math.max(ry1, h4));
              const interAWidth = Math.max(0, Math.min(rx2, unionXRight) - Math.max(rx1, unionXLeft));
              areaA += interAWidth * interAHeight;
              // B領域：下側（[h1, h2]）
              const interBHeight = Math.max(0, Math.min(ry2, h2) - Math.max(ry1, h1));
              const interBWidth = Math.max(0, Math.min(rx2, unionXRight) - Math.max(rx1, unionXLeft));
              areaB += interBWidth * interBHeight;
              // C領域：左側（[v1, v2]）
              const interCWidth = Math.max(0, Math.min(rx2, v2) - Math.max(rx1, v1));
              const interCHeight = Math.max(0, Math.min(ry2, unionYTop) - Math.max(ry1, unionYBottom));
              areaC += interCWidth * interCHeight;
              // D領域：右側（[v4, v5]）
              const interDWidth = Math.max(0, Math.min(rx2, v5) - Math.max(rx1, v4));
              const interDHeight = Math.max(0, Math.min(ry2, unionYTop) - Math.max(ry1, unionYBottom));
              areaD += interDWidth * interDHeight;
            });
            additionalAreas[floorNum] = { A: areaA, B: areaB, C: areaC, D: areaD };
            setDisplayArea(floorNum, { A: areaA, B: areaB, C: areaC, D: areaD });
          });
        }
        function setDisplayArea(floorNum, areas) {
          if (floorNum === 1) {
            document.getElementById("floor1TopArea").textContent = areas.A.toFixed(3) + " m²";
            document.getElementById("floor1BottomArea").textContent = areas.B.toFixed(3) + " m²";
            document.getElementById("floor1LeftArea").textContent = areas.C.toFixed(3) + " m²";
            document.getElementById("floor1RightArea").textContent = areas.D.toFixed(3) + " m²";
          } else if (floorNum === 2) {
            document.getElementById("floor2TopArea").textContent = areas.A.toFixed(3) + " m²";
            document.getElementById("floor2BottomArea").textContent = areas.B.toFixed(3) + " m²";
            document.getElementById("floor2LeftArea").textContent = areas.C.toFixed(3) + " m²";
            document.getElementById("floor2RightArea").textContent = areas.D.toFixed(3) + " m²";
          }
        }
        // ★【追加】テキストエリアへ床面積分割結果を追記する関数
        function updateLineDataDisplay_Extended() {
          const textarea = document.getElementById("lineData");
          let text = textarea.value;
          text += "\n【床面積分割】\n";
          text += "1階 A1 (上): " + (additionalAreas[1] ? additionalAreas[1].A.toFixed(3) : "0.000") + " m²\n";
          text += "1階 B1 (下): " + (additionalAreas[1] ? additionalAreas[1].B.toFixed(3) : "0.000") + " m²\n";
          text += "1階 C1 (左): " + (additionalAreas[1] ? additionalAreas[1].C.toFixed(3) : "0.000") + " m²\n";
          text += "1階 D1 (右): " + (additionalAreas[1] ? additionalAreas[1].D.toFixed(3) : "0.000") + " m²\n";
          text += "2階 A2 (上): " + (additionalAreas[2] ? additionalAreas[2].A.toFixed(3) : "0.000") + " m²\n";
          text += "2階 B2 (下): " + (additionalAreas[2] ? additionalAreas[2].B.toFixed(3) : "0.000") + " m²\n";
          text += "2階 C2 (左): " + (additionalAreas[2] ? additionalAreas[2].C.toFixed(3) : "0.000") + " m²\n";
          text += "2階 D2 (右): " + (additionalAreas[2] ? additionalAreas[2].D.toFixed(3) : "0.000") + " m²\n";
          textarea.value = text;
        }

        // ★【追加】各エリア内の壁量（線分長×倍率）の合計を算出する関数
        function recalcAreaWallTotals() {
          [1, 2].forEach(function(floorNum) {
            const data = floorData[floorNum];
            const xAxisData = data.xAxisData;
            const yAxisData = data.yAxisData;
            let upperWall = 0, lowerWall = 0, leftWall = 0, rightWall = 0;
            if (data.floorAreaRectangles.length === 0) {
              updateWallDisplay(floorNum, 0, 0, 0, 0);
              return;
            }
            let unionXLeft = Infinity, unionXRight = -Infinity;
            let unionYBottom = Infinity, unionYTop = -Infinity;
            data.floorAreaRectangles.forEach(function(rect) {
              const rx1 = gridCoord(Math.min(rect.start.x, rect.end.x), xAxisData);
              const rx2 = gridCoord(Math.max(rect.start.x, rect.end.x), xAxisData);
              const ry1 = gridCoord(Math.min(rect.start.y, rect.end.y), yAxisData);
              const ry2 = gridCoord(Math.max(rect.start.y, rect.end.y), yAxisData);
              unionXLeft = Math.min(unionXLeft, rx1);
              unionXRight = Math.max(unionXRight, rx2);
              unionYBottom = Math.min(unionYBottom, ry1);
              unionYTop = Math.max(unionYTop, ry2);
            });
            // 分割境界値の算出
            const h1 = unionYBottom;
            const h2 = unionYBottom + (unionYTop - unionYBottom) / 4;
            const h4 = unionYBottom + (unionYTop - unionYBottom) * 3 / 4;
            const h5 = unionYTop;
            const v1 = unionXLeft;
            const v2 = unionXLeft + (unionXRight - unionXLeft) / 4;
            const v4 = unionXLeft + (unionXRight - unionXLeft) * 3 / 4;
            const v5 = unionXRight;
            data.lines.forEach(function(line) {
              if (line.orientation === "horizontal") {
                const yVal = gridCoord(line.start.y, yAxisData);
                const len = sumAxisSpacing(xAxisData, Math.min(line.start.x, line.end.x), Math.max(line.start.x, line.end.x));
                if (yVal >= h4 && yVal <= h5) {
                  upperWall += len * line.multiplier;
                } else if (yVal >= h1 && yVal <= h2) {
                  lowerWall += len * line.multiplier;
                }
              } else if (line.orientation === "vertical") {
                const xVal = gridCoord(line.start.x, xAxisData);
                const len = sumAxisSpacing(yAxisData, Math.min(line.start.y, line.end.y), Math.max(line.start.y, line.end.y));
                if (xVal >= v1 && xVal <= v2) {
                  leftWall += len * line.multiplier;
                } else if (xVal >= v4 && xVal <= v5) {
                  rightWall += len * line.multiplier;
                }
              }
            });
            updateWallDisplay(floorNum, upperWall, lowerWall, leftWall, rightWall);
          });
        }
        // ★【追加】計算結果をHTMLの各表示エリアに反映する関数
        function updateWallDisplay(floorNum, upperWall, lowerWall, leftWall, rightWall) {
          if (floorNum === 1) {
            document.getElementById("floor1UpperWall").textContent = upperWall.toFixed(3) + " m";
            document.getElementById("floor1LowerWall").textContent = lowerWall.toFixed(3) + " m";
            document.getElementById("floor1LeftWall").textContent = leftWall.toFixed(3) + " m";
            document.getElementById("floor1RightWall").textContent = rightWall.toFixed(3) + " m";
          } else if (floorNum === 2) {
            document.getElementById("floor2UpperWall").textContent = upperWall.toFixed(3) + " m";
            document.getElementById("floor2LowerWall").textContent = lowerWall.toFixed(3) + " m";
            document.getElementById("floor2LeftWall").textContent = leftWall.toFixed(3) + " m";
            document.getElementById("floor2RightWall").textContent = rightWall.toFixed(3) + " m";
          }
        }
        // ★【追加】テキストエリアへ壁量結果を追記する関数
        function updateLineDataDisplay_Extended_Walls() {
          const textarea = document.getElementById("lineData");
          let text = textarea.value;
          text += "\n【エリア別壁量】\n";
          text += "1階 上側壁量 (A1): " + document.getElementById("floor1UpperWall").textContent + "\n";
          text += "1階 下側壁量 (B1): " + document.getElementById("floor1LowerWall").textContent + "\n";
          text += "1階 左側壁量 (C1): " + document.getElementById("floor1LeftWall").textContent + "\n";
          text += "1階 右側壁量 (D1): " + document.getElementById("floor1RightWall").textContent + "\n";
          text += "2階 上側壁量 (A2): " + document.getElementById("floor2UpperWall").textContent + "\n";
          text += "2階 下側壁量 (B2): " + document.getElementById("floor2LowerWall").textContent + "\n";
          text += "2階 左側壁量 (C2): " + document.getElementById("floor2LeftWall").textContent + "\n";
          text += "2階 右側壁量 (D2): " + document.getElementById("floor2RightWall").textContent + "\n";
          textarea.value = text;
        }

// 汎用関数：指定した階（1 または 2）と面（"T":上, "B":下, "L":左, "R":右）について
// 面積表示から必要壁量を算出し、対応する要素に表示、さらに存在壁量との比較で文字色を設定する
function updateWallNeedAndColorForSide(floor, side) {
  // (1) 通常の係数を取得
  const baseCoeffId = (floor === 1) ? "coefficient1" : "coefficient2";
  let coefficient = parseFloat(document.getElementById(baseCoeffId).value) || 0;
  let override = false;

  // (2) １階かつ該当領域が 2 階で空っぽなら coefficient3 を使う
  if (floor === 1 && isSecondFloorRegionEmpty(side)) {
    coefficient = parseFloat(document.getElementById("coefficient3").value) || 0;
    override = true;
  }

  // (3) 面積取得
  const areaIdMap = {
    T: `floor${floor}TopArea`,
    B: `floor${floor}BottomArea`,
    L: `floor${floor}LeftArea`,
    R: `floor${floor}RightArea`
  };
  const areaText = document.getElementById(areaIdMap[side]).textContent.replace(/[^\d\.]/g, "");
  const area = parseFloat(areaText) || 0;

  // (4) 必要壁量を算出し「※」を付与
  const requiredWall = area * coefficient * 0.01;
  const requiredId = `floor${floor}need${side}Wall`;
  document.getElementById(requiredId).textContent =
    requiredWall.toFixed(3) + " m" + (override ? "※" : "");

  // (5) 存在壁量の取得および色付け
  const existingIdMap = {
    T: `floor${floor}UpperWall`,
    B: `floor${floor}LowerWall`,
    L: `floor${floor}LeftWall`,
    R: `floor${floor}RightWall`
  };
  const existingEl = document.getElementById(existingIdMap[side]);
  const existingWall = parseFloat(existingEl.textContent) || 0;
  existingEl.style.color = (existingWall >= requiredWall) ? "blue" : "red";
existingEl.style.color = "";
}


// --- ヘルパー関数：１階の分割領域（T/B/L/R）に 2 階の床が一切ないかを判定 ---
function isSecondFloorRegionEmpty(side) {
  const data1 = floorData[1];
  const data2 = floorData[2];
  if (data1.floorAreaRectangles.length === 0) return false;

  const xAxis = data1.xAxisData;
  const yAxis = data1.yAxisData;

  // １階の全床矩形の外接領域を real-world 座標（m）で取得
  let unionXLeft = Infinity, unionXRight = -Infinity;
  let unionYBottom = Infinity, unionYTop = -Infinity;
  data1.floorAreaRectangles.forEach(rect => {
    const rx1 = gridCoord(Math.min(rect.start.x, rect.end.x), xAxis);
    const rx2 = gridCoord(Math.max(rect.start.x, rect.end.x), xAxis);
    const ry1 = gridCoord(Math.min(rect.start.y, rect.end.y), yAxis);
    const ry2 = gridCoord(Math.max(rect.start.y, rect.end.y), yAxis);
    unionXLeft   = Math.min(unionXLeft,   rx1);
    unionXRight  = Math.max(unionXRight,  rx2);
    unionYBottom = Math.min(unionYBottom, ry1);
    unionYTop    = Math.max(unionYTop,    ry2);
  });

  // ４等分の境界値
  const h1 = unionYBottom;
  const h2 = unionYBottom + (unionYTop - unionYBottom) / 4;
  const h4 = unionYBottom + (unionYTop - unionYBottom) * 3/4;
  const h5 = unionYTop;
  const v1 = unionXLeft;
  const v2 = unionXLeft + (unionXRight - unionXLeft) / 4;
  const v4 = unionXLeft + (unionXRight - unionXLeft) * 3/4;
  const v5 = unionXRight;

  // 領域ごとの real-world 座標範囲を決定
  let regionMinX, regionMaxX, regionMinY, regionMaxY;
  switch (side) {
    case "T": // 上側
      regionMinY = h4; regionMaxY = h5;
      regionMinX = v1; regionMaxX = v5;
      break;
    case "B": // 下側
      regionMinY = h1; regionMaxY = h2;
      regionMinX = v1; regionMaxX = v5;
      break;
    case "L": // 左側
      regionMinX = v1; regionMaxX = v2;
      regionMinY = h1; regionMaxY = h5;
      break;
    case "R": // 右側
      regionMinX = v4; regionMaxX = v5;
      regionMinY = h1; regionMaxY = h5;
      break;
  }

  // ２階の各床矩形が、この real-world 領域に少しでも重なっているかをチェック
  return !data2.floorAreaRectangles.some(rect => {
    const rx1 = gridCoord(Math.min(rect.start.x, rect.end.x), xAxis);
    const rx2 = gridCoord(Math.max(rect.start.x, rect.end.x), xAxis);
    const ry1 = gridCoord(Math.min(rect.start.y, rect.end.y), yAxis);
    const ry2 = gridCoord(Math.max(rect.start.y, rect.end.y), yAxis);
    const overlapW = Math.max(0, Math.min(rx2, regionMaxX) - Math.max(rx1, regionMinX));
    const overlapH = Math.max(0, Math.min(ry2, regionMaxY) - Math.max(ry1, regionMinY));
    return overlapW > 0 && overlapH > 0;
  });
}




// 全面（１階・２階それぞれの上、下、左、右）について更新する関数
function updateAllWallNeeds() {
  // １階
  updateWallNeedAndColorForSide(1, "T");
  updateWallNeedAndColorForSide(1, "B");
  updateWallNeedAndColorForSide(1, "L");
  updateWallNeedAndColorForSide(1, "R");
  // ２階
  updateWallNeedAndColorForSide(2, "T");
  updateWallNeedAndColorForSide(2, "B");
  updateWallNeedAndColorForSide(2, "L");
  updateWallNeedAndColorForSide(2, "R");
}




        // ★【追加】全体の追加計算更新関数
        function updateAllAdditionalCalculations() {
          recalcAdditionalFloorAreas();
          recalcAreaWallTotals();
          updateLineDataDisplay_Extended();
          updateLineDataDisplay_Extended_Walls();
          updateAllWallNeeds();
          updateWindPressure();
  updateWallRatios();
  updateWallBalance();
  updateSeismicCheck();

        }

        /**********************************
         * 軸ラベル編集・操作用関数
         **********************************/
function showAxisContextMenu(axis, index, event) {
  if (isZoomed) return;
  const existingMenu = document.getElementById("axisContextMenu");
  if (existingMenu) existingMenu.remove();
  const menu = document.createElement("div");
  menu.id = "axisContextMenu";
  menu.className = "context-menu";
  // event.pageX と event.pageY を利用（スクロール位置も含む）
  menu.style.left = event.pageX + "px";
  menu.style.top = event.pageY + "px";

  // メニュー項目の設定
  const items = [
    { label: "名前の変更", action: () => editAxisName(axis, index) },
    { label: "削除", action: () => deleteAxisLabel(axis, index) },
    { label: "軸追加", action: () => addAxisLabel(axis, index) }
  ];
  items.forEach((item) => {
    const div = document.createElement("div");
    div.className = "context-menu-item";
    div.textContent = item.label;
    div.addEventListener("click", () => { 
      item.action(); 
      menu.remove(); 
    });
    menu.appendChild(div);
  });
  document.body.appendChild(menu);
  document.addEventListener("click", function onDocClick() {
    menu.remove();
    document.removeEventListener("click", onDocClick);
  });
}
      function editAxisName(axis, index) {
  if (isZoomed) return;
  const areas = axis === "x" ? xLabelAreas : yLabelAreas;
  const area = areas.find((a) => a.index === index);
  if (!area) return;
  const input = document.createElement("input");
  input.type = "text";
  const data = getCurrentData();
  input.value = axis === "x" ? data.xAxisData[index].name : data.yAxisData[index].name;
  input.style.position = "absolute";
  const canvasRect = canvas.getBoundingClientRect();
  // 補正：canvasRect の値はビューポート基準なので、スクロール量を加算する
  input.style.left = (canvasRect.left + window.scrollX + area.x) + "px";
  input.style.top = (canvasRect.top + window.scrollY + area.y) + "px";
  input.style.width = area.width + "px";
  input.style.fontSize = "14px";
  document.body.appendChild(input);
  input.focus();
  input.addEventListener("keydown", function (ev) {
    if (ev.key === "Enter") {
      const entered = input.value.trim();
      const data = getCurrentData();
      const axisData = axis === "x" ? data.xAxisData : data.yAxisData;
      const duplicate = axisData.some((label, i) => i !== index && label.name === entered);
      if (duplicate) {
        alert("重複した名前は設定できません。");
        return;
      }
      axisData[index].name = entered;
      syncAxisData(); // 軸データの同期
      updateLineDataDisplay();
      drawGrid();
      document.body.removeChild(input);
    }
  });
  input.addEventListener("blur", function () {
    if (document.body.contains(input)) {
      document.body.removeChild(input);
    }
  });
}

        function deleteAxisLabel(axis, index) {
          if (isZoomed) return;
          if (index === 0) {
            alert("先頭の軸ラベルは削除できません。");
            return;
          }
          const data = getCurrentData();
          const axisData = axis === "x" ? data.xAxisData : data.yAxisData;
          if (index === axisData.length - 1) {
            alert("末尾の軸ラベルは削除できません。");
            return;
          }
          const usedByWall = data.lines.some((line) => {
            return axis === "x"
              ? (line.start.x === index || line.end.x === index)
              : (line.start.y === index || line.end.y === index);
          });
          const usedByFloor = data.floorAreaRectangles.some((rect) => {
            return axis === "x"
              ? (rect.start.x === index || rect.end.x === index)
              : (rect.start.y === index || rect.end.y === index);
          });
          if (usedByWall || usedByFloor) {
            alert("削除できません。壁や床面積の端部に使用されている軸は削除できません。");
            return;
          }
          if (!confirm("削除しますか？")) return;
          axisData[index - 1].spacing += axisData[index].spacing;
          axisData.splice(index, 1);
          syncAxisData(); // ★ 同期
          data.lines.forEach((line) => {
            if (axis === "x") {
              if (line.start.x > index) line.start.x--;
              if (line.end.x > index) line.end.x--;
            } else {
              if (line.start.y > index) line.start.y--;
              if (line.end.y > index) line.end.y--;
            }
          });
          data.floorAreaRectangles.forEach((rect) => {
            if (axis === "x") {
              if (rect.start.x > index) rect.start.x--;
              if (rect.end.x > index) rect.end.x--;
            } else {
              if (rect.start.y > index) rect.start.y--;
              if (rect.end.y > index) rect.end.y--;
            }
          });
          updateLineDataDisplay();
          updateCanvasSize();
          drawGrid();
        }
        function addAxisLabel(axis, index) {
          if (isZoomed) return;
          const data = getCurrentData();
          const axisData = axis === "x" ? data.xAxisData : data.yAxisData;
          if (index === axisData.length - 1) {
            const inputVal = prompt(axis === "x" ? "右側に追加するための間隔を入力してください:" : "上側に追加するための間隔を入力してください:");
            const d = parseFloat(inputVal);
            if (isNaN(d) || d < 0.001 || d > 2) {
              alert("間隔は0.001～2の間で入力してください。");
              return;
            }
            axisData[index].spacing = d;
            const baseName = axisData[index].name;
            const newSuffix = String.fromCharCode(97 + axisData[index].addCount);
            axisData[index].addCount++;
            const newName = baseName + newSuffix;
            const newLabel = { name: newName, spacing: null, addCount: 0 };
            axisData.push(newLabel);
            updateLineIndicesAfterInsertion(axis, axisData.length - 1);
            updateFloorRectanglesAfterInsertion(axis, axisData.length - 1);
            syncAxisData(); // ★ 同期
            updateLineDataDisplay();
            updateCanvasSize();
            drawGrid();
            return;
          }
          const currentSpacing = axisData[index].spacing;
          const inputVal = prompt(axis === "x" ? "右側何㎜のところに追加しますか？ (0～" + currentSpacing + "の値を入力してください)" : "上側何㎜のところに追加しますか？ (0～" + currentSpacing + "の値を入力してください)");
          const d = parseFloat(inputVal);
          if (isNaN(d) || d < 0.001 || d > 2 || d >= currentSpacing) {
            alert("間隔は0.001～2の間、かつ既存の間隔より小さい値を入力してください。");
            return;
          }
          axisData[index].spacing = d;
          const baseName = axisData[index].name;
          const newSuffix = String.fromCharCode(97 + axisData[index].addCount);
          axisData[index].addCount++;
          const newName = baseName + newSuffix;
          const newLabel = { name: newName, spacing: currentSpacing - d, addCount: 0 };
          axisData.splice(index + 1, 1, newLabel);
          updateLineIndicesAfterInsertion(axis, index + 1);
          updateFloorRectanglesAfterInsertion(axis, index + 1);
          syncAxisData(); // ★ 同期
          updateLineDataDisplay();
          updateCanvasSize();
          drawGrid();
        }
        function updateLineIndicesAfterInsertion(axis, insertedIndex) {
          const data = getCurrentData();
          data.lines.forEach((line) => {
            if (axis === "x") {
              if (line.start.x >= insertedIndex) line.start.x++;
              if (line.end.x >= insertedIndex) line.end.x++;
            } else {
              if (line.start.y >= insertedIndex) line.start.y++;
              if (line.end.y >= insertedIndex) line.end.y++;
            }
          });
        }
        function updateFloorRectanglesAfterInsertion(axis, insertedIndex) {
          const data = getCurrentData();
          data.floorAreaRectangles.forEach((rect) => {
            if (axis === "x") {
              if (rect.start.x >= insertedIndex) rect.start.x++;
              if (rect.end.x >= insertedIndex) rect.end.x++;
            } else {
              if (rect.start.y >= insertedIndex) rect.start.y++;
              if (rect.end.y >= insertedIndex) rect.end.y++;
            }
          });
        }
        // ダブルクリックで軸間隔を変更
        canvas.addEventListener("dblclick", function (e) {
          if (isZoomed) return;
          drawGrid(); 
          const rect = canvas.getBoundingClientRect();
          const clickX = e.clientX - rect.left;
          const clickY = e.clientY - rect.top;
          let area = xSpacingAreas.find(a => clickX >= a.x && clickX <= a.x + a.width &&
                                             clickY >= a.y && clickY <= a.y + a.height);
          if (area) {
            startEditingSpacing("x", area.index, e);
            return;
          }
          area = ySpacingAreas.find(a => clickX >= a.x && clickX <= a.x + a.width &&
                                         clickY >= a.y && clickY <= a.y + a.height);
          if (area) {
            startEditingSpacing("y", area.index, e);
            return;
          }
        });
 function startEditingSpacing(axis, index, e) {
  if (isZoomed) return;
  const data = getCurrentData();
  const currentSpacing = axis === "x" ? data.xAxisData[index].spacing : data.yAxisData[index].spacing;
  const newVal = prompt("新しい間隔を入力してください (0.001～2):", currentSpacing);
  if (newVal === null) return; // キャンセルされた場合は何もしない
  const parsedVal = parseFloat(newVal);
  if (isNaN(parsedVal) || parsedVal < 0.001 || parsedVal > 2) {
    alert("間隔は0.001～2の間で入力してください。");
    return;
  }
  if (axis === "x") {
    data.xAxisData[index].spacing = parsedVal;
  } else {
    data.yAxisData[index].spacing = parsedVal;
  }
  syncAxisData(); // 両階にデータを同期
  recalcFloorAreaRectangles();
  let totalArea = data.floorAreaRectangles.reduce((sum, r) => sum + r.area, 0);
  data.floorArea = totalArea;
  updateInputFields();
  updateLineDataDisplay();
  updateCanvasSize();
  drawGrid();
}


     function startEditingMultiplier(lineIndex, e) {
  if (isZoomed) return;
  const area = multiplierAreas.find((a) => a.lineIndex === lineIndex);
  if (!area) return;
  const input = document.createElement("input");
  const data = getCurrentData();
  input.type = "text";
  input.value = data.lines[lineIndex].multiplier;
  input.style.position = "absolute";
  const canvasRect = canvas.getBoundingClientRect();
  input.style.left = (canvasRect.left + window.scrollX + area.x) + "px";
  input.style.top = (canvasRect.top + window.scrollY + area.y) + "px";
  input.style.width = area.width + "px";
  input.style.fontSize = "14px";
  document.body.appendChild(input);
  input.focus();
  input.addEventListener("keydown", function (ev) {
    if (ev.key === "Enter") {
      pushUndoState();
      const newVal = parseFloat(input.value);
      if (isNaN(newVal) || newVal < 0.01 || newVal > 7) {
        alert("倍率は0.01～7の間で入力してください。");
        return;
      }
      data.lines[lineIndex].multiplier = newVal;
      updateLineDataDisplay();
      drawGrid();
      updateTotals();
      updateAllAdditionalCalculations();
      document.body.removeChild(input);
    }
  });
  input.addEventListener("blur", function () {
    if (document.body.contains(input)) {
      document.body.removeChild(input);
    }
  });
}


        /**********************************
         * イベントリスナー設定（キャンバス、キーボードなど）
         **********************************/
        let isAreaDragging = false;
        let areaDragStart = null;
        let currentAreaDragPoint = null;
        const dragThreshold = 5;
        let measurementStart = null;
        let isMeasuring = false;
        let measurementCurrent = null;
        let isZoomed = false;
        let isMouseOverCanvas = false;

// 右クリック（contextmenu）でグリッド間隔を変更する処理を追加
canvas.addEventListener("contextmenu", function (e) {
  if (isZoomed) return;
  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  const clickX = e.clientX - rect.left;
  const clickY = e.clientY - rect.top;
  
  // ▼ まず、X軸の間隔エリアかどうかをチェックして編集開始
  let area = xSpacingAreas.find(a => 
    clickX >= a.x && clickX <= a.x + a.width &&
    clickY >= a.y && clickY <= a.y + a.height
  );
  if (area) {
    startEditingSpacing("x", area.index, e);
    return;
  }
  
  // ▼ 次に、Y軸の間隔エリアかどうかをチェックして編集開始
  area = ySpacingAreas.find(a => 
    clickX >= a.x && clickX <= a.x + a.width &&
    clickY >= a.y && clickY <= a.y + a.height
  );
  if (area) {
    startEditingSpacing("y", area.index, e);
    return;
  }
  
  // ▼ それ以外の場合は従来の処理（軸ラベル、床面積矩形などのコンテキストメニュー表示）を実施
  let found = false;
  for (const area of xLabelAreas) {
    if (clickX >= area.x && clickX <= area.x + area.width &&
        clickY >= area.y && clickY <= area.y + area.height) {
      showAxisContextMenu("x", area.index, e);
      found = true;
      break;
    }
  }
  if (!found) {
    for (const area of yLabelAreas) {
      if (clickX >= area.x && clickX <= area.x + area.width &&
          clickY >= area.y && clickY <= area.y + area.height) {
        showAxisContextMenu("y", area.index, e);
        found = true;
        break;
      }
    }
  }
  if (!found) {
    const data = getCurrentData();
    for (let i = 0; i < data.floorAreaRectangles.length; i++) {
      const rectObj = data.floorAreaRectangles[i];
      const x1 = getXPos(rectObj.start.x, data.xAxisData);
      const y1 = getYPos(rectObj.end.y, data.yAxisData);
      const x2 = getXPos(rectObj.end.x, data.xAxisData);
      const y2 = getYPos(rectObj.start.y, data.yAxisData);
      if (clickX >= x1 && clickX <= x2 && clickY >= y1 && clickY <= y2) {
        showFloorContextMenu(i, e);
        found = true;
        break;
      }
    }
  }
});


        function getNearestGridPoint(x, y) {
          const data = getCurrentData();
          let closestX = 0, minDist = Infinity;
          data.xAxisData.forEach((_, i) => {
            const pos = getXPos(i, data.xAxisData);
            const d = Math.abs(x - pos);
            if (d < minDist) { minDist = d; closestX = i; }
          });
          let closestY = 0, minDistY = Infinity;
          data.yAxisData.forEach((_, j) => {
            const pos = getYPos(j, data.yAxisData);
            const d = Math.abs(y - pos);
            if (d < minDistY) { minDistY = d; closestY = j; }
          });
          return { x: closestX, y: closestY };
        }

        function isDuplicateLine(p1, p2) {
          const data = getCurrentData();
          return data.lines.some((line) => {
            return ((line.start.x === p1.x && line.start.y === p1.y &&
                     line.end.x === p2.x && line.end.y === p2.y) ||
                    (line.start.x === p2.x && line.start.y === p2.y &&
                     line.end.x === p1.x && line.end.y === p1.y));
          });
        }

        let startPoint = null;
        canvas.addEventListener("mousedown", function (e) {
          if (isZoomed) return;
          e.preventDefault();
          const rect = canvas.getBoundingClientRect();
          const clickX = e.clientX - rect.left;
          const clickY = e.clientY - rect.top;
          const gridPoint = getNearestGridPoint(clickX, clickY);
          if (e.button === 0) {
            startPoint = gridPoint;
            areaDragStart = {
              screenX: e.clientX,
              screenY: e.clientY,
              grid: gridPoint
            };
          } else if (e.button === 2) {
            const data = getCurrentData();
            if (!startPoint) {
              const area = multiplierAreas.find(a => 
                clickX >= a.x && clickX <= a.x + a.width &&
                clickY >= a.y && clickY <= a.y + a.height);
              if (area != null) {
                if (confirm("削除しますか？")) {
                  pushUndoState();
                  data.lines.splice(area.lineIndex, 1);
                  updateTotals();
                  updateLineDataDisplay();
                  updateAllAdditionalCalculations();
                  drawGrid();
                  return;
                } else { return; }
              } else {
                console.log("始点が未設定です。");
                return;
              }
            }
            if (isDuplicateLine(startPoint, gridPoint)) {
              console.log("この線分は既に存在します。");
              startPoint = null;
              return;
            }
            let orientation = null;
            if (startPoint.y === gridPoint.y && startPoint.x !== gridPoint.x) {
              orientation = "horizontal";
            } else if (startPoint.x === gridPoint.x && startPoint.y !== gridPoint.y) {
              orientation = "vertical";
            } else {
              console.log("無効な線分です。");
              startPoint = null;
              return;
            }
            const multiplierInput = prompt("倍率を入力してください:");
            const multiplier = parseFloat(multiplierInput);
            if (isNaN(multiplier) || multiplier < 0.01 || multiplier > 7) {
              alert("倍率は0.01～7の間で入力してください。");
              startPoint = null;
              return;
            }
            pushUndoState();
            data.lines.push({
              start: startPoint,
              end: gridPoint,
              multiplier: multiplier,
              orientation: orientation
            });
            startPoint = null;
            drawGrid();
            updateTotals();
            updateLineDataDisplay();
            updateAllAdditionalCalculations();
updateAllWallNeeds();
          }
        });

        canvas.addEventListener("mousemove", function (e) {
          if (isZoomed) return;
          if (areaDragStart && (e.buttons & 1) === 1) {
            const dx = e.clientX - areaDragStart.screenX;
            const dy = e.clientY - areaDragStart.screenY;
            if (!isAreaDragging && Math.sqrt(dx * dx + dy * dy) > dragThreshold) {
              isAreaDragging = true;
              startPoint = null;
            }
            if (isAreaDragging) {
              const rect = canvas.getBoundingClientRect();
              currentAreaDragPoint = getNearestGridPoint(e.clientX - rect.left, e.clientY - rect.top);
              drawGrid();
              drawFloorAreaRectangles();
            }
          }
          if (isMeasuring && measurementStart) {
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;
            measurementCurrent = getNearestGridPoint(mouseX, mouseY);
            drawGrid();
            const startX = getXPos(measurementStart.x, getCurrentData().xAxisData);
            const startY = getYPos(measurementStart.y, getCurrentData().yAxisData);
            const endX = getXPos(measurementCurrent.x, getCurrentData().xAxisData);
            const endY = getYPos(measurementCurrent.y, getCurrentData().yAxisData);
            ctx.beginPath();
            ctx.setLineDash([5, 5]);
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.strokeStyle = "green";
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.setLineDash([]);
          }
        });

        canvas.addEventListener("mouseup", function (e) {
          if (isZoomed) return;
          if (e.button === 0 && isAreaDragging) {
            const rect = canvas.getBoundingClientRect();
            const dragEnd = getNearestGridPoint(e.clientX - rect.left, e.clientY - rect.top);
            const startX = Math.min(areaDragStart.grid.x, dragEnd.x);
            const endX = Math.max(areaDragStart.grid.x, dragEnd.x);
            const startY = Math.min(areaDragStart.grid.y, dragEnd.y);
            const endY = Math.max(areaDragStart.grid.y, dragEnd.y);
            if (startX === endX || startY === endY) {
              areaDragStart = null;
              isAreaDragging = false;
              currentAreaDragPoint = null;
              drawGrid();
              return;
            }
            const data = getCurrentData();
            const overlaps = data.floorAreaRectangles.some((rectObj) => {
              return !(endX <= rectObj.start.x || startX >= rectObj.end.x ||
                       endY <= rectObj.start.y || startY >= rectObj.end.y);
            });
            if (overlaps) {
              alert("床面積矩形が重複しています");
              areaDragStart = null;
              isAreaDragging = false;
              currentAreaDragPoint = null;
              drawGrid();
              return;
            }
            const width = sumAxisSpacing(data.xAxisData, startX, endX);
            const height = sumAxisSpacing(data.yAxisData, startY, endY);
            const area = width * height;
            pushUndoState();
            data.floorAreaRectangles.push({
              start: { x: startX, y: startY },
              end: { x: endX, y: endY },
              area: area
            });
            let totalArea = data.floorAreaRectangles.reduce((sum, r) => sum + r.area, 0);
            data.floorArea = totalArea;
            updateInputFields();
            areaDragStart = null;
            isAreaDragging = false;
            currentAreaDragPoint = null;
            drawGrid();
            updateLineDataDisplay();
            updateTotals();
            updateAllAdditionalCalculations();
updateAllWallNeeds();
          }
        });

        function showFloorContextMenu(rectIndex, event) {
          const existingMenu = document.getElementById("floorContextMenu");
          if (existingMenu) existingMenu.remove();
          const menu = document.createElement("div");
          menu.id = "floorContextMenu";
          menu.className = "context-menu";
  menu.style.left = event.pageX + "px";
  menu.style.top = event.pageY + "px";
          const item = document.createElement("div");
          item.className = "context-menu-item";
          item.textContent = "削除";
          item.addEventListener("click", () => {
            pushUndoState();
            const data = getCurrentData();
            data.floorAreaRectangles.splice(rectIndex, 1);
            let totalArea = data.floorAreaRectangles.reduce((sum, r) => sum + r.area, 0);
            data.floorArea = totalArea;
            updateInputFields();
            drawGrid();
            updateLineDataDisplay();
            updateTotals();
            updateAllAdditionalCalculations();
            menu.remove();
          });
          menu.appendChild(item);
          document.body.appendChild(menu);
          document.addEventListener("click", function onDocClick() {
            menu.remove();
            document.removeEventListener("click", onDocClick);
          });
        }

        // 中ボタンクリックによる測定処理
canvas.addEventListener("mousedown", function (e) {
  if (isMeasureMode && e.button === 0) {  // 左クリックかつ計測モード
    e.preventDefault();
    const rect = canvas.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const clickY = e.clientY - rect.top;
    const gridPoint = getNearestGridPoint(clickX, clickY);

    if (!measurementStart) {
      measurementStart = gridPoint;
      isMeasuring = true;
    } else {
      if (measurementStart.x !== gridPoint.x && measurementStart.y !== gridPoint.y) {
        alert("斜め方向は計測しません");
      } else {
        let distance = 0;
        const data = getCurrentData();
        if (measurementStart.x === gridPoint.x) {
          const start = Math.min(measurementStart.y, gridPoint.y);
          const end   = Math.max(measurementStart.y, gridPoint.y);
          distance = sumAxisSpacing(data.yAxisData, start, end);
        } else {
          const start = Math.min(measurementStart.x, gridPoint.x);
          const end   = Math.max(measurementStart.x, gridPoint.x);
          distance = sumAxisSpacing(data.xAxisData, start, end);
        }
        alert("計測距離: " + distance.toFixed(3) + " m");
      }
      // 計測状態をリセット
      measurementStart   = null;
      isMeasuring        = false;
      measurementCurrent = null;
      drawGrid();
    }
    return;
  }
  // ↓ それ以外は従来のクリック処理へフォールバック
});

        // キーボード操作：ズーム切替(Sキー)／Undo(← or Ctrl+Z)
        document.addEventListener("keydown", function (e) {
          if (e.key.toLowerCase() === "s") {
            e.preventDefault();
            if (!isZoomed) {
              canvas.style.transformOrigin = "bottom left";
              canvas.style.transform = "scale(0.5)";
              isZoomed = true;
            } else {
              canvas.style.transform = "scale(1)";
              isZoomed = false;
            }
          }
          const tag = e.target.tagName.toLowerCase();
          if (tag === "input" || tag === "textarea") return;
          if (e.key === "ArrowLeft" || (e.ctrlKey && (e.key === "z" || e.key === "Z"))) {
            undoAction();
          }
        });

        canvas.addEventListener("mouseenter", () => { isMouseOverCanvas = true; });
        canvas.addEventListener("mouseleave", () => { isMouseOverCanvas = false; });

// 3) canvas の mousedown ハンドラ先頭に、柱モード判定を追加
canvas.addEventListener('mousedown', function (e) {
  if (isZoomed) return;

  if (isPillarMode) {
    e.preventDefault();  // コンテキストメニュー抑制
    const rect = canvas.getBoundingClientRect();
    const gridPoint = getNearestGridPoint(e.clientX - rect.left, e.clientY - rect.top);
    const data = getCurrentData();

    if (e.button === 0) {
      // 左クリックで柱を追加（重複防止）
      if (!data.pillars.some(p => p.x === gridPoint.x && p.y === gridPoint.y)) {
        data.pillars.push({ x: gridPoint.x, y: gridPoint.y });
        drawGrid();
      }
    } else if (e.button === 2) {
      // 右クリックで柱を削除
      const idx = data.pillars.findIndex(p => p.x === gridPoint.x && p.y === gridPoint.y);
      if (idx >= 0) {
        data.pillars.splice(idx, 1);
        drawGrid();
      }
    }
    return; // 通常の線分処理はスキップ
  }

  // 以下、既存の線分描画ロジック…
  // （省略）
});


        /**********************************
         * 入力欄更新／ファイル操作
         **********************************/
        function updateInputFields() {
          // １階
          document.getElementById("floorArea1").value = floorData[1].floorArea.toFixed(3);
          document.getElementById("coefficient1").value = floorData[1].coefficient;
          const req1 = (floorData[1].floorArea * floorData[1].coefficient / 100) || 0;
          document.getElementById("requiredWall1").value = req1.toFixed(3);
          // ２階
          document.getElementById("floorArea2").value = floorData[2].floorArea.toFixed(3);
          document.getElementById("coefficient2").value = floorData[2].coefficient;
          const req2 = (floorData[2].floorArea * floorData[2].coefficient / 100) || 0;
          document.getElementById("requiredWall2").value = req2.toFixed(3);

        }

        function updateTotals() {
          // １階計算
          let horizontalTotal1 = 0;
          let verticalTotal1 = 0;
          floorData[1].lines.forEach((line) => {
            if (line.orientation === "horizontal") {
              const start = Math.min(line.start.x, line.end.x);
              const end = Math.max(line.start.x, line.end.x);
              const len = sumAxisSpacing(floorData[1].xAxisData, start, end);
              horizontalTotal1 += len * line.multiplier;
            } else if (line.orientation === "vertical") {
              const start = Math.min(line.start.y, line.end.y);
              const end = Math.max(line.start.y, line.end.y);
              const len = sumAxisSpacing(floorData[1].yAxisData, start, end);
              verticalTotal1 += len * line.multiplier;
            }
          });
          document.getElementById("horizontalTotal1").innerHTML =
            (horizontalTotal1 < reqWall(1) ? "<span style='color: red; font-weight: bold;'>" : "<span style='color: blue; font-weight: bold;'>")
            + horizontalTotal1.toFixed(3) + "m</span>";
          document.getElementById("verticalTotal1").innerHTML =
            (verticalTotal1 < reqWall(1) ? "<span style='color: red; font-weight: bold;'>" : "<span style='color: blue; font-weight: bold;'>")
            + verticalTotal1.toFixed(3) + "m</span>";
          // ２階計算
          let horizontalTotal2 = 0;
          let verticalTotal2 = 0;
          floorData[2].lines.forEach((line) => {
            if (line.orientation === "horizontal") {
              const start = Math.min(line.start.x, line.end.x);
              const end = Math.max(line.start.x, line.end.x);
              const len = sumAxisSpacing(floorData[2].xAxisData, start, end);
              horizontalTotal2 += len * line.multiplier;
            } else if (line.orientation === "vertical") {
              const start = Math.min(line.start.y, line.end.y);
              const end = Math.max(line.start.y, line.end.y);
              const len = sumAxisSpacing(floorData[2].yAxisData, start, end);
              verticalTotal2 += len * line.multiplier;
            }
          });
          document.getElementById("horizontalTotal2").innerHTML =
            (horizontalTotal2 < reqWall(2) ? "<span style='color: red; font-weight: bold;'>" : "<span style='color: blue; font-weight: bold;'>")
            + horizontalTotal2.toFixed(3) + "m</span>";
          document.getElementById("verticalTotal2").innerHTML =
            (verticalTotal2 < reqWall(2) ? "<span style='color: red; font-weight: bold;'>" : "<span style='color: blue; font-weight: bold;'>")
            + verticalTotal2.toFixed(3) + "m</span>";
        }
        function reqWall(floor) {
          return (floorData[floor].floorArea * floorData[floor].coefficient / 100) || 0;
        }
        document.getElementById("floorArea1").addEventListener("input", function(){
          floorData[1].floorArea = parseFloat(this.value) || 0;
          updateTotals();
          updateRequiredWall();
        });
        document.getElementById("coefficient1").addEventListener("input", function(){
          floorData[1].coefficient = parseFloat(this.value) || 0;
          updateTotals();
          updateRequiredWall();
        });
        document.getElementById("floorArea2").addEventListener("input", function(){
          floorData[2].floorArea = parseFloat(this.value) || 0;
          updateTotals();
          updateRequiredWall();
        });
        document.getElementById("coefficient2").addEventListener("input", function(){
          floorData[2].coefficient = parseFloat(this.value) || 0;
          updateTotals();
          updateRequiredWall();
        });
        function updateRequiredWall() {
          updateInputFields();
        }

        // フロア切替
        document.querySelectorAll("input[name='floor']").forEach(radio => {
          radio.addEventListener("change", function(){
            currentFloor = parseInt(this.value);
            undoStack = [];
            updateInputFields();
            updateLineDataDisplay();
            updateCanvasSize();
            drawGrid();
            updateTotals();
            updateAllAdditionalCalculations();
	updateAllWallNeeds();
          });
        });


// ★【追加】４分割法 壁率充足率を計算・表示
function updateWallRatios() {
  const sides = [
    { floor:1, ratioId:"floor1UpperWallR",   existingId:"floor1UpperWall",   needId:"floor1needTWall" },
    { floor:1, ratioId:"floor1LowerWallR",   existingId:"floor1LowerWall",   needId:"floor1needBWall" },
    { floor:1, ratioId:"floor1LeftWallR",    existingId:"floor1LeftWall",    needId:"floor1needLWall" },
    { floor:1, ratioId:"floor1RightWallR",   existingId:"floor1RightWall",   needId:"floor1needRWall" },
    { floor:2, ratioId:"floor2UpperWallR",   existingId:"floor2UpperWall",   needId:"floor2needTWall" },
    { floor:2, ratioId:"floor2LowerWallR",   existingId:"floor2LowerWall",   needId:"floor2needBWall" },
    { floor:2, ratioId:"floor2LeftWallR",    existingId:"floor2LeftWall",    needId:"floor2needLWall" },
    { floor:2, ratioId:"floor2RightWallR",   existingId:"floor2RightWall",   needId:"floor2needRWall" }
  ];

  sides.forEach(({ ratioId, existingId, needId }) => {
    // 数値部分を取り出し
    const existing = parseFloat(document.getElementById(existingId).textContent) || 0;
    const need     = parseFloat(document.getElementById(needId).textContent)     || 0;
    let ratio = need > 0 ? existing / need : 0;
    // 小数点第4位で切り捨て
    ratio = Math.floor(ratio * 10000) / 10000;
    const display = ratio.toFixed(3);

    const el = document.getElementById(ratioId);
    if (ratio > 1.0) {
      el.innerHTML = `<span style="color: blue; font-weight:bold;">${display} OK!</span>`;
    } else {
      el.innerHTML = `<span style="color: red;  font-weight:bold;">${display} NG!</span>`;
    } 
  });
}

// ★【追加】４分割法 壁率比（均衡度）を計算・表示
function updateWallBalance() {
  const sets = [
    { id: 'floor1ULBalance', a: 'floor1UpperWallR', b: 'floor1LowerWallR' },
    { id: 'floor1LRBalance', a: 'floor1LeftWallR',  b: 'floor1RightWallR' },
    { id: 'floor2ULBalance', a: 'floor2UpperWallR', b: 'floor2LowerWallR' },
    { id: 'floor2LRBalance', a: 'floor2LeftWallR',  b: 'floor2RightWallR' }
  ];
  sets.forEach(({ id, a, b }) => {
    const aVal = parseFloat(document.getElementById(a).textContent) || 0;
    const bVal = parseFloat(document.getElementById(b).textContent) || 0;
    const small = Math.min(aVal, bVal);
    const large = Math.max(aVal, bVal);
    let ratio = large > 0 ? small / large : 0;
    // 小数点第4位で切り捨て
    ratio = Math.floor(ratio * 10000) / 10000;
    const disp = ratio.toFixed(4);
    const el = document.getElementById(id);
   
    if (ratio >= 0.5) {
      el.innerHTML = `<span style="color: blue; font-weight:bold;">${disp} OK!</span>`;
    } else {
      el.innerHTML = `<span style="color: red; font-weight:bold;">${disp} NG!</span>`;
    }
  });
}

// ★ ③地震力壁量判定（検定比付き） updateSeismicCheck を定義
function updateSeismicCheck() {
  // 各階・各方向の必要壁量
  const req1 = floorData[1].floorArea * floorData[1].coefficient / 100;
  const req2 = floorData[2].floorArea * floorData[2].coefficient / 100;

  // 実際の壁量を再集計
  let w1X = 0, w1Y = 0, w2X = 0, w2Y = 0;
  floorData[1].lines.forEach(line => {
    const len = line.orientation === 'horizontal'
      ? sumAxisSpacing(floorData[1].xAxisData, Math.min(line.start.x, line.end.x), Math.max(line.start.x, line.end.x))
      : sumAxisSpacing(floorData[1].yAxisData, Math.min(line.start.y, line.end.y), Math.max(line.start.y, line.end.y));
    if (line.orientation === 'horizontal') w1X += len * line.multiplier;
    else                                    w1Y += len * line.multiplier;
  });
  floorData[2].lines.forEach(line => {
    const len = line.orientation === 'horizontal'
      ? sumAxisSpacing(floorData[2].xAxisData, Math.min(line.start.x, line.end.x), Math.max(line.start.x, line.end.x))
      : sumAxisSpacing(floorData[2].yAxisData, Math.min(line.start.y, line.end.y), Math.max(line.start.y, line.end.y));
    if (line.orientation === 'horizontal') w2X += len * line.multiplier;
    else                                    w2Y += len * line.multiplier;
  });

  // 検定比
  const r1X = req1 > 0 ? w1X / req1 : 0;
  const r1Y = req1 > 0 ? w1Y / req1 : 0;
  const r2X = req2 > 0 ? w2X / req2 : 0;
  const r2Y = req2 > 0 ? w2Y / req2 : 0;

// 表示更新
  document.getElementById('seismicX1').innerHTML =
    `<span style="color:${(req1 > 0 && w1X >= req1) ? 'blue' : 'red'}; font-weight:bold;">
       ${w1X.toFixed(3)}m / ${req1.toFixed(3)}m (${r1X.toFixed(3)})
     </span>`;  // 0m/0m は赤表示 :contentReference[oaicite:0]{index=0}&#8203;:contentReference[oaicite:1]{index=1}

  document.getElementById('seismicY1').innerHTML =
    `<span style="color:${(req1 > 0 && w1Y >= req1) ? 'blue' : 'red'}; font-weight:bold;">
       ${w1Y.toFixed(3)}m / ${req1.toFixed(3)}m (${r1Y.toFixed(3)})
     </span>`;

  document.getElementById('seismicX2').innerHTML =
    `<span style="color:${(req2 > 0 && w2X >= req2) ? 'blue' : 'red'}; font-weight:bold;">
       ${w2X.toFixed(3)}m / ${req2.toFixed(3)}m (${r2X.toFixed(3)})
     </span>`;

  document.getElementById('seismicY2').innerHTML =
    `<span style="color:${(req2 > 0 && w2Y >= req2) ? 'blue' : 'red'}; font-weight:bold;">
       ${w2Y.toFixed(3)}m / ${req2.toFixed(3)}m (${r2Y.toFixed(3)})
     </span>`;
}




        // ファイル保存（保存ファイル名を「壁量電卓V3保存.json」に変更）
async function saveData() {
  const additionalData = {
    creationDate: document.getElementById("creationDate").value,
    buildingName: document.getElementById("buildingName").value,
    floorHeight1: parseFloat(document.getElementById("floorHeight1").value) || 0,
    floorHeight2: parseFloat(document.getElementById("floorHeight2").value) || 0,
    maxHeight: parseFloat(document.getElementById("maxHeight").value) || 0,
    maxEaveHeight: parseFloat(document.getElementById("maxEaveHeight").value) || 0,
coefficient3: parseFloat(document.getElementById("coefficient3").value)|| 0,
    visibleAreaX1: parseFloat(document.getElementById("visibleAreaX1").value) || 0,
    visibleAreaX2: parseFloat(document.getElementById("visibleAreaX2").value) || 0,
    visibleAreaY1: parseFloat(document.getElementById("visibleAreaY1").value) || 0,
    visibleAreaY2: parseFloat(document.getElementById("visibleAreaY2").value) || 0
  };
  const dataToSave = {
    floorData: floorData,
    additionalData: additionalData,
    additionalAreas: additionalAreas
  };
  const json = JSON.stringify(dataToSave, null, 2);

  try {
    // File System Access API に対応している場合（Chromeなど）
    if (window.showSaveFilePicker) {
      const opts = {
        suggestedName: "壁量電卓V3保存.json",
        types: [
          {
            description: "JSON Files",
            accept: { "application/json": [".json"] }
          }
        ]
      };
      const handle = await window.showSaveFilePicker(opts);
      const writable = await handle.createWritable();
      await writable.write(json);
      await writable.close();
    } else {
      // 対応していない場合は従来のダウンロード方法を使用
      const blob = new Blob([json], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "壁量電卓V3保存.json";
      a.click();
      URL.revokeObjectURL(url);
    }
  } catch (err) {
    alert("ファイル保存に失敗しました: " + err);
  }
}



        function loadData(e) {
          const file = e.target.files[0];
          if (!file) return;
          const reader = new FileReader();
          reader.onload = function (e) {
            try {
              const json = JSON.parse(e.target.result);
              if (json.floorData) {
                floorData = json.floorData;
                // ★ ファイル読込後、1階の軸データをマスターとして両階を同期
                floorData[2].xAxisData = floorData[1].xAxisData;
                floorData[2].yAxisData = floorData[1].yAxisData;
                updateInputFields();
                if (json.additionalData) {
                  document.getElementById("creationDate").value = json.additionalData.creationDate || "";
                  document.getElementById("buildingName").value = json.additionalData.buildingName || "";
                  document.getElementById("floorHeight1").value = json.additionalData.floorHeight1 || "";
                  document.getElementById("floorHeight2").value = json.additionalData.floorHeight2 || "";
                  document.getElementById("maxHeight").value = json.additionalData.maxHeight || "";
                  document.getElementById("maxEaveHeight").value = json.additionalData.maxEaveHeight || "";
 document.getElementById("coefficient3").value   = json.additionalData.coefficient3  
                  document.getElementById("visibleAreaX1").value = json.additionalData.visibleAreaX1 || "";
                  document.getElementById("visibleAreaX2").value = json.additionalData.visibleAreaX2 || "";
                  document.getElementById("visibleAreaY1").value = json.additionalData.visibleAreaY1 || "";
                  document.getElementById("visibleAreaY2").value = json.additionalData.visibleAreaY2 || "";
                }
                if (json.additionalAreas) {
                  additionalAreas = json.additionalAreas;
                }
                updateLineDataDisplay();
                updateCanvasSize();
                drawGrid();
                updateTotals();
                updateLineDataDisplay();
                updateAllAdditionalCalculations();
              } else {
                alert("無効なファイル形式です。");
              }
            } catch (err) {
              alert("ファイルの読み込みに失敗しました。");
            }
          };
          reader.readAsText(file);
          e.target.value = "";
        }
        document.getElementById("saveButton").addEventListener("click", saveData);
        document.getElementById("loadButton").addEventListener("click", function(){
          document.getElementById("fileInput").click();
        });
        document.getElementById("fileInput").addEventListener("change", loadData);
        // 追加情報入力欄の値が変わるたびに updateLineDataDisplay() を呼び出す
        document.getElementById("creationDate").addEventListener("input", updateLineDataDisplay);
        document.getElementById("buildingName").addEventListener("input", updateLineDataDisplay);
        document.getElementById("floorHeight1").addEventListener("input", updateLineDataDisplay);
        document.getElementById("floorHeight2").addEventListener("input", updateLineDataDisplay);
        document.getElementById("maxHeight").addEventListener("input", updateLineDataDisplay);
        document.getElementById("maxEaveHeight").addEventListener("input", updateLineDataDisplay);
        document.getElementById("visibleAreaX1").addEventListener("input", updateLineDataDisplay);
        document.getElementById("visibleAreaX2").addEventListener("input", updateLineDataDisplay);
        document.getElementById("visibleAreaY1").addEventListener("input", updateLineDataDisplay);
        document.getElementById("visibleAreaY2").addEventListener("input", updateLineDataDisplay);

['visibleAreaX1','visibleAreaX2','visibleAreaY1','visibleAreaY2'].forEach(id => {
  document.getElementById(id).addEventListener('input', () => {
    updateLineDataDisplay();          // テキストエリア更新
    updateAllAdditionalCalculations(); // 風圧力も含めた全計算
  });
});

document.getElementById("coefficient1").addEventListener("input", function(){
  floorData[1].coefficient = parseFloat(this.value) || 0;
  updateTotals();
  updateRequiredWall();
  updateAllAdditionalCalculations(); // ここで追加の計算も実行
});

document.getElementById("coefficient2").addEventListener("input", function(){
  floorData[2].coefficient = parseFloat(this.value) || 0;
  updateTotals();
  updateRequiredWall();
  updateAllAdditionalCalculations(); // ここで追加の計算も実行
});


     



document.getElementById("coefficient3").addEventListener("input", function() {
  // 1階・2階ともに updateWallNeedAndColorForSide 内で coefficient3 の判定が走ります
  updateAllAdditionalCalculations();
});

// 風圧力用データ格納
let windRequiredAreas = { 1: { X: 0, Y: 0 }, 2: { X: 0, Y: 0 } };

// ★ 風圧力壁量計算・表示更新関数（検定比付き表示）
function updateWindPressure() {
  // 見付面積取得
  const vX1 = parseFloat(document.getElementById('visibleAreaX1').value) || 0;
  const vX2 = parseFloat(document.getElementById('visibleAreaX2').value) || 0;
  const vY1 = parseFloat(document.getElementById('visibleAreaY1').value) || 0;
  const vY2 = parseFloat(document.getElementById('visibleAreaY2').value) || 0;

  // 必要面積計算
  const kX1 = (vX1 + vX2) * 0.50;
  const kX2 = vX2 * 0.50;
  const kY1 = (vY1 + vY2) * 0.50;
  const kY2 = vY2 * 0.50;

  // UI の入力欄には従来通り数値だけをセット
  document.getElementById('kazeXArea1').value = kX1.toFixed(3);
  document.getElementById('kazeXArea2').value = kX2.toFixed(3);
  document.getElementById('kazeYArea1').value = kY1.toFixed(3);
  document.getElementById('kazeYArea2').value = kY2.toFixed(3);

  // 実際の壁量を集計
  let wX1 = 0, wX2 = 0, wY1 = 0, wY2 = 0;
  floorData[1].lines.forEach(line => {
    if (line.orientation === 'horizontal') {
      const len = sumAxisSpacing(floorData[1].xAxisData,
                    Math.min(line.start.x, line.end.x),
                    Math.max(line.start.x, line.end.x));
      wX1 += len * line.multiplier;
    }
    if (line.orientation === 'vertical') {
      const len = sumAxisSpacing(floorData[1].yAxisData,
                    Math.min(line.start.y, line.end.y),
                    Math.max(line.start.y, line.end.y));
      wY1 += len * line.multiplier;
    }
  });
  floorData[2].lines.forEach(line => {
    if (line.orientation === 'horizontal') {
      const len = sumAxisSpacing(floorData[2].xAxisData,
                    Math.min(line.start.x, line.end.x),
                    Math.max(line.start.x, line.end.x));
      wX2 += len * line.multiplier;
    }
    if (line.orientation === 'vertical') {
      const len = sumAxisSpacing(floorData[2].yAxisData,
                    Math.min(line.start.y, line.end.y),
                    Math.max(line.start.y, line.end.y));
      wY2 += len * line.multiplier;
    }
  });

  // 検定比計算
  const rX1 = kX1 > 0 ? wX1 / kX1 : 0;
  const rX2 = kX2 > 0 ? wX2 / kX2 : 0;
  const rY1 = kY1 > 0 ? wY1 / kY1 : 0;
  const rY2 = kY2 > 0 ? wY2 / kY2 : 0;

 // 判定表示（OK/NG + (検定比)）  
  document.getElementById('horizontalkaze1').innerHTML =
    `<span style="color:${(kX1 > 0 && wX1 >= kX1) ? 'blue' : 'red'}; font-weight:bold;">
       ${wX1 >= kX1 ? 'OK' : 'NG'} (${rX1.toFixed(3)})
     </span>`;  // 0壁量／0必要面積 は赤表示 :contentReference[oaicite:2]{index=2}&#8203;:contentReference[oaicite:3]{index=3}

  document.getElementById('verticalkaze1').innerHTML =
    `<span style="color:${(kY1 > 0 && wY1 >= kY1) ? 'blue' : 'red'}; font-weight:bold;">
       ${wY1 >= kY1 ? 'OK' : 'NG'} (${rY1.toFixed(3)})
     </span>`;

  document.getElementById('horizontalkaze2').innerHTML =
    `<span style="color:${(kX2 > 0 && wX2 >= kX2) ? 'blue' : 'red'}; font-weight:bold;">
       ${wX2 >= kX2 ? 'OK' : 'NG'} (${rX2.toFixed(3)})
     </span>`;

  document.getElementById('verticalkaze2').innerHTML =
    `<span style="color:${(kY2 > 0 && wY2 >= kY2) ? 'blue' : 'red'}; font-weight:bold;">
       ${wY2 >= kY2 ? 'OK' : 'NG'} (${rY2.toFixed(3)})
     </span>`;
}




 function showSection(id) {
      // すべてのセクションを非表示に
      const sections = document.querySelectorAll('.section');
      sections.forEach(sec => sec.classList.remove('active'));

      // 指定されたセクションを表示
      const target = document.getElementById(id);
      if (target) {
        target.classList.add('active');
      }
    }


/**********************************
 * 印刷処理：集計結果を帳票として出力
 **********************************/
function printReport() {

  const subject = document.getElementById("buildingName").value.trim();
  if (subject === "") {
    alert("建物名称を入力してください。");
    return;
  }
  let reportContent = `<html><head><meta charset="UTF-8"><title>${subject} 壁量計算書</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    h1 { text-align: center; }
    h2 { border-bottom: 1px solid #000; padding-bottom: 5px; }
    pre { font-size: 14px; }
    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    th, td { border: 1px solid #000; padding: 5px; text-align: center; }
  </style>
  </head><body>`;
  reportContent += `<h1>${subject} 壁量計算書(壁量電卓Ver.3.23 free)</h1>`;

  reportContent += `<h2>①建物情報</h2>`;

reportContent += `
    <div style="text-align:left; margin-bottom:20px;">
      <p>作成日付: ${document.getElementById("creationDate").value}</p>
      <p>建物名称: ${document.getElementById("buildingName").value}</p>
      <p>1階階高: ${document.getElementById("floorHeight1").value} m</p>
      <p>2階階高: ${document.getElementById("floorHeight2").value} m</p>
      <p>最高高さ: ${document.getElementById("maxHeight").value} m</p>
      <p>最高軒高: ${document.getElementById("maxEaveHeight").value} m</p>
      <p>１階 係数: ${document.getElementById("coefficient1").value}</p>
      <p>２階 係数: ${document.getElementById("coefficient2").value}</p>
      <p>平屋 係数: ${document.getElementById("coefficient3").value}</p>
      <p>1階Ｘ方向（→）見付面積: ${document.getElementById("visibleAreaX1").value} ㎡</p>
      <p>2階Ｘ方向（→）見付面積: ${document.getElementById("visibleAreaX2").value} ㎡</p>
      <p>1階Ｙ方向（↑）見付面積: ${document.getElementById("visibleAreaY1").value} ㎡</p>
      <p>2階Ｙ方向（↑）見付面積: ${document.getElementById("visibleAreaY2").value} ㎡</p>
    </div>
  `;

  reportContent += `<h2>②地震力の検討</h2>`;
  // 各部：1階X方向、1階Y方向、2階X方向、2階Y方向
  reportContent += generateReportForFloorDirection(1, "horizontal");
  reportContent += generateReportForFloorDirection(1, "vertical");
  reportContent += generateReportForFloorDirection(2, "horizontal");
  reportContent += generateReportForFloorDirection(2, "vertical");



   // ③風圧力の検討（1F X/Y, 2F X/Y + 検定比表示）
  reportContent += `<h2>③風圧力の検討</h2><pre>`;

  // 見付面積を取得
  const visX1 = parseFloat(document.getElementById("visibleAreaX1").value) || 0;
  const visX2 = parseFloat(document.getElementById("visibleAreaX2").value) || 0;
  const visY1 = parseFloat(document.getElementById("visibleAreaY1").value) || 0;
  const visY2 = parseFloat(document.getElementById("visibleAreaY2").value) || 0;

  // --- 1階 X方向 ---
  const reqX1  = (visX1 + visX2) * 0.50;
  const wallX1 = parseFloat(document.getElementById("horizontalTotal1").textContent.replace(/[^\d\.]/g, "")) || 0;
  const ratioX1 = reqX1 > 0 ? wallX1 / reqX1 : 0;
  reportContent += `1階X方向必要面積: (${visX1.toFixed(3)} + ${visX2.toFixed(3)}) × 50 = ${reqX1.toFixed(3)} ㎡\n`;
  reportContent += `1階X方向壁量: ${wallX1.toFixed(3)} m\n`;
  reportContent += `判定: <span style="color:${wallX1 >= reqX1 ? 'blue' : 'red'};">${wallX1 >= reqX1 ? 'OK' : 'NG'} (${ratioX1.toFixed(3)})</span>\n\n`;

  // --- 1階 Y方向 ---
  const reqY1  = (visY1 + visY2) * 0.50;
  const wallY1 = parseFloat(document.getElementById("verticalTotal1").textContent.replace(/[^\d\.]/g, "")) || 0;
  const ratioY1 = reqY1 > 0 ? wallY1 / reqY1 : 0;
  reportContent += `1階Y方向必要面積: (${visY1.toFixed(3)} + ${visY2.toFixed(3)}) × 50 = ${reqY1.toFixed(3)} ㎡\n`;
  reportContent += `1階Y方向壁量: ${wallY1.toFixed(3)} m\n`;
  reportContent += `判定: <span style="color:${wallY1 >= reqY1 ? 'blue' : 'red'};">${wallY1 >= reqY1 ? 'OK' : 'NG'} (${ratioY1.toFixed(3)})</span>\n\n`;

  // --- 2階 X方向 ---
  const reqX2  = visX2 * 0.50;
  const wallX2 = parseFloat(document.getElementById("horizontalTotal2").textContent.replace(/[^\d\.]/g, "")) || 0;
  const ratioX2 = reqX2 > 0 ? wallX2 / reqX2 : 0;
  reportContent += `2階X方向必要面積: ${visX2.toFixed(3)} × 50 = ${reqX2.toFixed(3)} ㎡\n`;
  reportContent += `2階X方向壁量: ${wallX2.toFixed(3)} m\n`;
  reportContent += `判定: <span style="color:${wallX2 >= reqX2 ? 'blue' : 'red'};">${wallX2 >= reqX2 ? 'OK' : 'NG'} (${ratioX2.toFixed(3)})</span>\n\n`;

  // --- 2階 Y方向 ---
  const reqY2  = visY2 * 0.50;
  const wallY2 = parseFloat(document.getElementById("verticalTotal2").textContent.replace(/[^\d\.]/g, "")) || 0;
  const ratioY2 = reqY2 > 0 ? wallY2 / reqY2 : 0;
  reportContent += `2階Y方向必要面積: ${visY2.toFixed(3)} × 50 = ${reqY2.toFixed(3)} ㎡\n`;
  reportContent += `2階Y方向壁量: ${wallY2.toFixed(3)} m\n`;
  reportContent += `判定: <span style="color:${wallY2 >= reqY2 ? 'blue' : 'red'};">${wallY2 >= reqY2 ? 'OK' : 'NG'} (${ratioY2.toFixed(3)})</span>\n`;

  reportContent += `</pre>`;


  // ４分割法検討表
  reportContent += generateFourDivisionReport();

  reportContent += "</body></html>";

  const printWindow = window.open("", "_blank");
  printWindow.document.open();
  printWindow.document.write(reportContent);
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
}

function generateReportForFloorDirection(floor, direction) {
  const header = (direction === "horizontal") ? `【${floor}階X方向】` : `【${floor}階Y方向】`;
  let reportSection = `<h2>${header}</h2><pre>`;

  // 対象となる線分を抽出
  const lines = floorData[floor].lines.filter(line => {
    return (direction === "horizontal" && line.orientation === "horizontal") ||
           (direction === "vertical" && line.orientation === "vertical");
  });

  const groups = {};
  lines.forEach(line => {
    const m = line.multiplier;
    const key = m.toFixed(3);
    let len = 0;
    if (direction === "horizontal") {
      const startIndex = Math.min(line.start.x, line.end.x);
      const endIndex = Math.max(line.start.x, line.end.x);
      len = sumAxisSpacing(floorData[floor].xAxisData, startIndex, endIndex);
    } else {
      const startIndex = Math.min(line.start.y, line.end.y);
      const endIndex = Math.max(line.start.y, line.end.y);
      len = sumAxisSpacing(floorData[floor].yAxisData, startIndex, endIndex);
    }
    if (!groups[key]) {
      groups[key] = { multiplier: m, lengths: [] };
    }
    groups[key].lengths.push(len);
  });

  let subtotal = 0;
  if (Object.keys(groups).length === 0) {
    reportSection += "データなし\n";
  } else {
    const keys = Object.keys(groups).sort((a, b) => parseFloat(a) - parseFloat(b));
    keys.forEach(key => {
      const group = groups[key];
      const multiplier = group.multiplier;
      const lengthsStr = group.lengths.map(v => v.toFixed(3)).join(" + ");
      const sumLengths = group.lengths.reduce((a, b) => a + b, 0);
      const product = multiplier * sumLengths;
      subtotal += product;
      reportSection += `${multiplier.toFixed(3)} × (${lengthsStr}) = ${sumLengths.toFixed(3)} → ${product.toFixed(3)}\n`;
    });
    reportSection += `小計： ${subtotal.toFixed(3)}\n`;
  }

  // 必要壁量の計算（床面積×係数）
  const requiredWall = (floorData[floor].floorArea * floorData[floor].coefficient / 100) || 0;
  reportSection += `必要壁量: ${floorData[floor].floorArea.toFixed(3)} × ${floorData[floor].coefficient} = ${requiredWall.toFixed(3)}\n`;

  // ★ 検定比を計算
  const ratio = requiredWall > 0 ? subtotal / requiredWall : 0;

 // 不等号での比較＋検定比表示
  if (subtotal >= requiredWall) {
    reportSection += `${requiredWall.toFixed(3)} ≤ ${subtotal.toFixed(3)}　<span style="color: blue;">OK (${ratio.toFixed(3)})</span>\n`;
  } else {
    reportSection += `${requiredWall.toFixed(3)} ≥ ${subtotal.toFixed(3)}　<span style="color: red;">NG (${ratio.toFixed(3)})</span>\n`;
  }
  reportSection += "</pre>";
  return reportSection;
}

document.getElementById("printButton").addEventListener("click", printReport);


// ４分割法検討帳票作成用の関数
function generateFourDivisionReport() {
  // 各面（階・面ごとのID対応）の定義
  const sections = [
    { floor: 1, sideLabel: "上側", areaId: "floor1TopArea",    requiredId: "floor1needTWall", existingId: "floor1UpperWall", balanceId: "floor1ULBalance" },
    { floor: 1, sideLabel: "下側", areaId: "floor1BottomArea", requiredId: "floor1needBWall", existingId: "floor1LowerWall", balanceId: "floor1ULBalance" },
    { floor: 1, sideLabel: "左側", areaId: "floor1LeftArea",   requiredId: "floor1needLWall", existingId: "floor1LeftWall",  balanceId: "floor1LRBalance" },
    { floor: 1, sideLabel: "右側", areaId: "floor1RightArea",  requiredId: "floor1needRWall", existingId: "floor1RightWall", balanceId: "floor1LRBalance"  },
    { floor: 2, sideLabel: "上側", areaId: "floor2TopArea",    requiredId: "floor2needTWall", existingId: "floor2UpperWall", balanceId: "floor2ULBalance" },
    { floor: 2, sideLabel: "下側", areaId: "floor2BottomArea", requiredId: "floor2needBWall", existingId: "floor2LowerWall", balanceId: "floor2ULBalance" },
    { floor: 2, sideLabel: "左側", areaId: "floor2LeftArea",   requiredId: "floor2needLWall", existingId: "floor2LeftWall", balanceId: "floor2LRBalance"  },
    { floor: 2, sideLabel: "右側", areaId: "floor2RightArea",  requiredId: "floor2needRWall", existingId: "floor2RightWall" , balanceId: "floor2LRBalance"},
  ];

  let html = `<h2>④４分割法検討</h2>`;
  html += `
    <table>
      <tr>
        <th>階</th>
        <th>面</th>
        <th>面積 (m²)</th>
        <th>必要壁量 (m)</th>
        <th>存在壁量 (m)</th>
        <th>壁量充足率</th>
	<th>評価</th>
        <th>壁率比</th>
      </tr>`;

  sections.forEach(sec => {
   // 各値を取得
    const area     = parseFloat(document.getElementById(sec.areaId).textContent.replace(/[^\d\.]/g, "")) || 0;
    const required = parseFloat(document.getElementById(sec.requiredId).textContent.replace(/[^\d\.]/g, "")) || 0;
    const existing = parseFloat(document.getElementById(sec.existingId).textContent.replace(/[^\d\.]/g, "")) || 0;

    // 壁量充足率と評価
    const ratio     = required > 0 ? existing / required : 0;
    const ratioDisp = ratio.toFixed(3);
    const evaluation = ratio > 1 ? "OK" : "NG";

    // 壁率比の表示（NGの場合のみ）
    const balanceEl   = document.getElementById(sec.balanceId);
    const balanceHtml = (evaluation === "NG" && balanceEl) ? balanceEl.innerHTML : "";

    // 行を組み立て
    html += `<tr>
        <td>${sec.floor}階</td>
        <td>${sec.sideLabel}</td>
        <td>${area.toFixed(3)}</td>
        <td>${required.toFixed(3)}</td>
        <td>${existing.toFixed(3)}</td>
        <td>${ratioDisp}</td>
        <td>${evaluation}</td>
        <td>${balanceHtml}</td>
      </tr>`;
  });

  html += `</table>`;
  return html;
}



        /**********************************
         * 初期描画
         **********************************/
        updateInputFields();
        updateCanvasSize();
        drawGrid();
        updateLineDataDisplay();
        updateTotals();
        updateAllAdditionalCalculations();
	updateAllWallNeeds();


</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
     crossorigin="anonymous"></script>
<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>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LLZX3KXMVF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-LLZX3KXMVF');
</script>
    </div>
<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="border:1px solid #95a5a6;border-radius:.75rem;background-color:#FFFFFF;width:280px;margin:0px;padding:5px;text-align:center;overflow:hidden;"><table><tr><td style="width:128px"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001353%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"><img src="https://hbb.afl.rakuten.co.jp/hgb/0f0388c1.6f4454d6.0f0388c2.a028d65e/?me_id=1271373&item_id=10001353&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fnamazushop%2Fcabinet%2Fsoft%2Fimg57859639s.jpg%3F_ex%3D128x128&s=128x128&t=picttext" border="0" style="margin:2px" alt="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]" title="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]"></a></td><td style="vertical-align:top;width:136px;display: block;"><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px;word-wrap:break-word"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001353%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;">HOUSE-ST1 Ver9キャンペーン版　初心者向け木造構造計算ソフト　2025年改正建築基準法に対応　木造軸組工法住宅の許容応力度設計2017年版対応（オリジナルサンプル付）</a><br><span >価格：393,140円（税込、送料無料)</span> <span style="color:#BBB">(2025/3/30時点)</span></p></td></tr></table></div><br><p style="color:#000000;font-size:12px;line-height:1.4em;margin:5px;word-wrap:break-word"></p></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="border:1px solid #95a5a6;border-radius:.75rem;background-color:#FFFFFF;width:280px;margin:0px;padding:5px;text-align:center;overflow:hidden;"><table><tr><td style="width:128px"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001638%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"><img src="https://hbb.afl.rakuten.co.jp/hgb/0f0388c1.6f4454d6.0f0388c2.a028d65e/?me_id=1271373&item_id=10001638&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fnamazushop%2Fcabinet%2Fsoft%2Fhousedoc2.jpg%3F_ex%3D128x128&s=128x128&t=picttext" border="0" style="margin:2px" alt="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]" title="[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]"></a></td><td style="vertical-align:top;width:136px;display: block;"><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px;word-wrap:break-word"><a href="https://hb.afl.rakuten.co.jp/ichiba/0f0388c1.6f4454d6.0f0388c2.a028d65e/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnamazushop%2F10001638%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjowLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;">HOUSE-DOC Ver6（2022年建防協評価更新・2012年改訂版木造住宅の耐震診断と補強方法対応）木造耐震診断ソフト</a><br><span >価格：198,000円（税込、送料無料)</span> <span style="color:#BBB">(2025/3/30時点)</span></p></td></tr></table></div><br><p style="color:#000000;font-size:12px;line-height:1.4em;margin:5px;word-wrap:break-word"></p></td></tr></table>
    </div>


</body>
</html>