<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>採光計算アプリ多機能版（株式会社なまあず本舗）</title>

<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>

<style>
  body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    padding: 20px;
    background-color: #f9f9f9;
    color: #333;
  }
  h2 {
    border-bottom: 2px solid #555;
    padding-bottom: 5px;
  }
  .disclaimer {
    font-size: 13px;
    color: #664d03;
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    line-height: 1.5;
  }
  .project-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .project-info .info-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .project-info label {
    font-weight: bold;
    font-size: 14px;
  }
  .project-info input[type="text"] {
    text-align: left;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  .controls {
    margin-bottom: 15px;
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
  }
  .controls select {
    padding: 5px;
    font-size: 16px;
  }
  /* データ操作ボタン群のスタイル */
  .data-controls {
    background: #e9ecef;
    border-left: 4px solid #6c757d;
  }
  /* 広告エリアのスタイル */
  .ad-container {
    margin-bottom: 15px;
    text-align: center;
  }
  /* 印刷時専用の表示枠（画面では非表示） */
  .print-only {
    display: none;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px 5px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
  }
  th {
    background-color: #f2f2f2;
    font-weight: bold;
    white-space: nowrap;
  }
  input[type="number"], table input[type="text"] {
    width: 70px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: right;
  }
  table input[type="text"].room-name {
    width: 100px;
    text-align: left;
  }
  .adj-input {
    background-color: #f8f9fa;
  }
  .adj-label {
    font-size: 11px;
    margin-top: 6px;
    color: #555;
    text-align: left;
  }
  .ok { color: #008000; font-weight: bold; font-size: 16px; }
  .ng { color: #ff0000; font-weight: bold; font-size: 16px; }
  .badge-sky {
    background-color: #17a2b8;
    color: #fff;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    margin-left: 4px;
    display: inline-block;
  }
  .btn {
    cursor: pointer;
    padding: 6px 10px;
    margin: 2px;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    color: #fff;
  }
  .btn-add { background-color: #007bff; }
  .btn-add:hover { background-color: #0056b3; }
  .btn-add-sky { background-color: #17a2b8; }
  .btn-add-sky:hover { background-color: #138496; }
  .btn-remove { background-color: #dc3545; }
  .btn-remove:hover { background-color: #c82333; }
  .btn-print { background-color: #6c757d; font-size: 14px; padding: 6px 12px; margin-left: auto; }
  .btn-print:hover { background-color: #5a6268; }
  .btn-info { background-color: #17a2b8; }
  .btn-info:hover { background-color: #138496; }
  
  /* 新規追加ボタンのスタイル */
  .btn-save-local { background-color: #28a745; }
  .btn-save-local:hover { background-color: #218838; }
  .btn-clear-local { background-color: #fd7e14; }
  .btn-clear-local:hover { background-color: #e86e13; }
  .btn-export { background-color: #20c997; }
  .btn-export:hover { background-color: #1aa179; }
  .btn-import { background-color: #ffc107; color: #333; }
  .btn-import:hover { background-color: #e0a800; }
  .btn-reset { background-color: #343a40; }
  .btn-reset:hover { background-color: #23272b; }

  /* 参考表用のスタイル */
  .reference-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
  }
  .reference-section {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .reference-section h3 {
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    margin-top: 0;
  }
  .ref-table {
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
  }
  .ref-table th, .ref-table td {
    text-align: left;
    padding: 8px;
  }
  .ref-table th {
    background-color: #e9ecef;
  }
  .ref-note {
    font-size: 12px;
    color: #555;
    margin-top: 10px;
    line-height: 1.5;
  }

  /* 印刷用のスタイル（横向き設定・縮小・強力な非表示設定） */
  @media print {
    @page {
      size: landscape; /* 印刷の向きを横（ランドスケープ）に強制 */
      margin: 10mm;
    }
    body {
      padding: 0;
      background-color: #fff;
    }
    
    /* 印刷時に用途地域と割合を表示する */
    .print-only {
      display: block !important;
      margin-bottom: 10px;
      font-size: 15px;
    }

    /* 注意書き、操作パネル、広告枠を強制的に消去（影や余白も残さない） */
    .disclaimer,
    .controls,
    .data-controls,
    .ad-container,
    .google-auto-placed,
    ins.adsbygoogle,
    iframe {
      display: none !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      margin: 0 !important;
      padding: 0 !important;
      height: 0 !important;
      width: 0 !important;
      overflow: hidden !important;
      visibility: hidden !important;
    }

    .project-info {
      box-shadow: none !important;
      padding: 0 !important;
      margin-bottom: 10px !important;
      background: transparent !important;
      gap: 15px !important;
    }
    .project-info .info-item input[type="text"] {
      border: none !important;
      border-bottom: 1px solid #333 !important;
      border-radius: 0 !important;
      background: transparent !important;
      padding: 2px 5px !important;
    }
    table {
      box-shadow: none !important;
      border: 2px solid #333 !important;
      width: 100% !important;
    }
    /* 表がはみ出さないよう文字サイズと余白を縮小 */
    #calcTable th, #calcTable td {
      border: 1px solid #333 !important;
      font-size: 11px !important;
      padding: 3px 2px !important;
    }
    /* 計算表の操作列のみ非表示にする */
    #calcTable th:last-child, #calcTable td:last-child {
      display: none !important;
    }
    /* 入力枠を表のセル幅に100%合わせてはみ出しを防ぐ */
    table input[type="number"], table input[type="text"] {
      border: none !important;
      background: transparent !important;
      padding: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    .badge-sky {
      border: 1px solid #333 !important;
      color: #333 !important;
      background: transparent !important;
    }
    .adj-input {
      background-color: transparent !important;
    }
    .reference-container {
      margin-top: 20px !important;
      gap: 10px !important;
      page-break-inside: avoid !important;
    }
    .reference-section {
      box-shadow: none !important;
      border: 1px solid #333 !important;
      padding: 10px !important;
    }
  }
</style>
</head>
<body>

  <h2 id="pageTitle">採光計算アプリ多機能版（株式会社なまあず本舗）</h2>

  <div class="disclaimer">
    公開日：2026年3月16日　β版です。本ツールはご自由にご利用いただけます。<br>
    <strong>【免責事項】</strong>本ツールを利用して生じたいかなる損害やトラブル等についても、当サイトおよび制作者は一切の責任を負いません。入力結果や判定については、必ずご自身の責任において確認・検証を行ってください。製作：株式会社なまあず本舗
  </div>

  <div class="ad-container">
    <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>
  </div>

  <div class="controls data-controls">
    <button class="btn btn-save-local" onclick="saveToLocal()">💾 ブラウザに保存</button>
    <button class="btn btn-clear-local" onclick="clearLocal()">🗑️ ブラウザ保存を削除</button>
    <span style="border-left: 1px solid #adb5bd; height: 20px; margin: 0 5px;"></span>
    <button class="btn btn-export" onclick="exportJson()">⬇️ JSON出力</button>
    <button class="btn btn-import" onclick="document.getElementById('jsonInput').click()">⬆️ JSON読込</button>
    <input type="file" id="jsonInput" accept=".json" style="display:none;" onchange="importJson(event)">
    <span style="border-left: 1px solid #adb5bd; height: 20px; margin: 0 5px;"></span>
    <button class="btn btn-reset" onclick="initData()">⚠️ 現在のデータを初期化</button>
  </div>

  <div class="project-info">
    <div class="info-item">
      <label>物件名:</label>
      <input type="text" id="projName" style="width: 250px;" placeholder="〇〇邸新築工事">
    </div>
    <div class="info-item">
      <label>設計事務所名:</label>
      <input type="text" id="officeName" style="width: 200px;" placeholder="株式会社〇〇設計">
    </div>
    <div class="info-item">
      <label>設計者:</label>
      <input type="text" id="designerName" style="width: 120px;" placeholder="氏名">
    </div>
    <div class="info-item">
      <label>設計日付:</label>
      <input type="text" id="designDate" style="width: 120px;" placeholder="令和〇年〇月〇日">
    </div>
  </div>
  
  <div class="print-only">
    <strong>【算定条件】 用途地域：</strong><span id="printZoneText"></span>　/　
    <strong>採光必要割合：</strong><span id="printRatioText"></span>
  </div>

  <div class="controls">
    <label>
      <strong>用途地域:</strong>
      <select id="zoneSelect" onchange="recalc()">
        <option value="residential">住居系</option>
        <option value="industrial">工業系</option>
        <option value="commercial">商業系</option>
      </select>
    </label>
    <label>
      <strong>採光必要割合:</strong>
      <select id="ratioSelect" onchange="recalc()">
        <option value="5">1/5 (認定こども園等)</option>
        <option value="7" selected>1/7 (住宅・学校・病室等)</option>
        <option value="10">1/10 (住宅緩和・診療室等)</option>
        <option value="20">1/20 (一定の照明設備設置による緩和)</option>
      </select>
    </label>
    <button class="btn btn-add btn-room" onclick="addRoom()" style="font-size: 14px; padding: 6px 12px;">＋ 部屋を追加</button>
    
    <div style="margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
     <a href="https://namazu-honpo.com/apri/manual.html" target="_blank" class="btn btn-info" style="font-size: 14px; padding: 6px 12px; text-decoration: none; color: #fff; display: flex; align-items: center;">アプリの解説</a>
      <a href="https://kijunhou.com/about-a-lighting-calculation/" target="_blank" class="btn btn-info" style="font-size: 14px; padding: 6px 12px; text-decoration: none; color: #fff; display: flex; align-items: center;">🔗 採光計算解説サイト（外部サイトリンク：建築基準法とらのまき（そぞろさん））</a>
      <button class="btn btn-print" onclick="window.print()" style="margin: 0;">🖨️ 印刷する</button>
    </div>
  </div>

  <table id="calcTable">
    <thead>
      <tr>
        <th>階・部屋名<br><span style="font-size:11px; font-weight:normal;">(+隣接室名)</span></th>
        <th>面積(㎡)<br><span style="font-size:11px; font-weight:normal;">(+隣接面積)</span></th>
        <th>窓名</th>
        <th>水平距離<br>d (m)</th>
        <th>垂直距離<br>h (m)</th>
        <th>d/h</th>
        <th>補正係数<br>(上限3)</th>
        <th>建具幅<br>(m)</th>
        <th>高さ<br>(m)</th>
        <th>開口面積<br>(㎡)</th>
        <th>有効面積<br>(㎡)</th>
        <th>部屋合計<br>有効面積(㎡)</th>
        <th>必要面積<br>(㎡)</th>
        <th>判定</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tbody"></tbody>
  </table>

  <div class="reference-container">
    <div class="reference-section">
      <h3>【参考】建築基準法に基づく採光に有効な面積の割合</h3>
      <table class="ref-table">
        <thead>
          <tr>
            <th style="width: 75%;">居室の種類</th>
            <th style="width: 25%;">割合</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>住宅の居住のための居室</td>
            <td>1/7<br><span style="font-size: 11px; font-weight: normal;">（緩和時 1/10）</span></td>
          </tr>
          <tr>
            <td>学校の教室、保育所の保育室等、病院の病室等</td>
            <td>1/7</td>
          </tr>
          <tr>
            <td>幼保連携型認定こども園の保育室等</td>
            <td>1/5</td>
          </tr>
          <tr>
            <td>病院の診療室、児童福祉施設等の寝室・居室等</td>
            <td>1/10</td>
          </tr>
          <tr>
            <td>一定の要件（有効な照明設備の設置等）を満たす居室</td>
            <td>1/20 等</td>
          </tr>
        </tbody>
      </table>
      <div class="ref-note">
        ※ふすま、障子など随時開放できるもので仕切られた2室は1室とみなす。<br>
        ※1/20は令和5年法改正による緩和規定（国土交通大臣が定める基準に適合する照明設備を設置した場合などに適用可能）。
      </div>
    </div>

    <div class="reference-section">
      <h3>【参考】採光補正係数</h3>
      <table class="ref-table">
        <thead>
          <tr>
            <th style="width: 25%; text-align: center;">用途地域</th>
            <th style="width: 50%; text-align: center;">計算式</th>
            <th style="width: 25%; text-align: center;">限度</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="text-align: center;">住居系</td>
            <td style="text-align: center;">D/H × 6.0 - 1.4</td>
            <td style="text-align: center;" rowspan="3">3.0</td>
          </tr>
          <tr>
            <td style="text-align: center;">工業系</td>
            <td style="text-align: center;">D/H × 8.0 - 1.0</td>
          </tr>
          <tr>
            <td style="text-align: center;">商業系</td>
            <td style="text-align: center;">D/H × 10.0 - 1.0</td>
          </tr>
        </tbody>
      </table>
      <div class="ref-note">
        ※天窓の採光補正係数は、上記により計算した数値に<strong>3.0</strong>を乗じた数値となります。<br>
        ※採光関係比率（D/H）がマイナスとなる場合の補正係数は0として計算します。
      </div>
    </div>
  </div>

<script>
const STORAGE_KEY = 'saikou_calc_data';

let rooms = [];

function generateId() {
  return Math.random().toString(36).substr(2, 9);
}

// ----------------------------------------------------
// データ管理機能 (初期化・保存・読込・出力)
// ----------------------------------------------------

function getSaveData() {
  return {
    projName: document.getElementById('projName').value,
    officeName: document.getElementById('officeName').value,
    designerName: document.getElementById('designerName').value,
    designDate: document.getElementById('designDate').value,
    zone: document.getElementById('zoneSelect').value,
    ratio: document.getElementById('ratioSelect').value,
    rooms: rooms
  };
}

function applyData(data) {
  if (!data) return;
  
  if (data.projName !== undefined) document.getElementById('projName').value = data.projName;
  if (data.officeName !== undefined) document.getElementById('officeName').value = data.officeName;
  if (data.designerName !== undefined) document.getElementById('designerName').value = data.designerName;
  if (data.designDate !== undefined) document.getElementById('designDate').value = data.designDate;
  if (data.zone !== undefined) document.getElementById('zoneSelect').value = data.zone;
  if (data.ratio !== undefined) document.getElementById('ratioSelect').value = data.ratio;
  if (data.rooms !== undefined && Array.isArray(data.rooms)) {
    rooms = data.rooms;
  }
  render();
}

function initData() {
  if(confirm("現在の入力内容をすべて初期化します。よろしいですか？")) {
    document.getElementById('projName').value = "";
    document.getElementById('officeName').value = "";
    document.getElementById('designerName').value = "";
    document.getElementById('designDate').value = "";
    document.getElementById('zoneSelect').value = "residential";
    document.getElementById('ratioSelect').value = "7";
    
    rooms = [{
      id: generateId(),
      floor: "",
      name: "部屋A",
      adjName: "",
      area: "",
      adjArea: "",
      windows: [{ id: generateId(), name: "窓1", d: "", h: "", w: "", h2: "", isSkylight: false }]
    }];
    render();
  }
}

function saveToLocal() {
  const data = getSaveData();
  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
  alert("ブラウザにデータを保存しました。\n次回アクセス時に自動的に復元されます。");
}

function clearLocal() {
  if(confirm("ブラウザに保存されているデータを削除しますか？\n（現在の画面のデータは消えません）")) {
    localStorage.removeItem(STORAGE_KEY);
    alert("保存データを削除しました。");
  }
}

function loadFromLocal() {
  const jsonStr = localStorage.getItem(STORAGE_KEY);
  if (jsonStr) {
    try {
      const data = JSON.parse(jsonStr);
      applyData(data);
      return true;
    } catch (e) {
      console.error("データの読み込みに失敗しました。", e);
    }
  }
  return false;
}

function exportJson() {
  const data = getSaveData();
  const jsonStr = JSON.stringify(data, null, 2);
  const blob = new Blob([jsonStr], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = url;
  
  let pName = document.getElementById('projName').value.trim();
  pName = pName ? pName + "_" : "";
  a.download = `${pName}採光計算データ.json`;
  
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

function importJson(event) {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function(e) {
    try {
      const data = JSON.parse(e.target.result);
      applyData(data);
      alert("JSONファイルを読み込みました。");
    } catch (error) {
      alert("ファイルの読み込みに失敗しました。正しいJSONファイルか確認してください。");
      console.error(error);
    }
    event.target.value = '';
  };
  reader.readAsText(file);
}

// ----------------------------------------------------
// UI描画・計算機能
// ----------------------------------------------------

function render() {
  const tbody = document.getElementById('tbody');
  
  if (rooms.length === 0) {
    tbody.innerHTML = `<tr><td colspan="15" style="padding: 20px;">部屋がありません。「＋ 部屋を追加」ボタンから追加してください。</td></tr>`;
    recalc();
    return;
  }

  let rowsHtml = '';

  rooms.forEach((room, rIndex) => {
    room.windows.forEach((win, wIndex) => {
      rowsHtml += `<tr>`;

      if (wIndex === 0) {
        rowsHtml += `
          <td rowspan="${room.windows.length}">
            <div style="display: flex; align-items: center; gap: 4px; margin-bottom: 4px;">
              <span style="font-size: 12px; color: #555;">階:</span>
              <input type="text" class="room-name" style="width: 50px;" value="${room.floor || ''}" placeholder="例:1" oninput="updateRoom(${rIndex}, 'floor', this.value)">
            </div>
            <input type="text" class="room-name" value="${room.name}" placeholder="主たる部屋名" oninput="updateRoom(${rIndex}, 'name', this.value)">
            <div class="adj-label">＋隣接室(2室1室):</div>
            <input type="text" class="room-name adj-input" value="${room.adjName || ''}" placeholder="隣接室名" oninput="updateRoom(${rIndex}, 'adjName', this.value)">
          </td>
          <td rowspan="${room.windows.length}">
            <input type="number" step="0.1" min="0" value="${room.area}" placeholder="面積" oninput="updateRoom(${rIndex}, 'area', this.value)">
            <div class="adj-label">＋隣接面積(㎡):</div>
            <input type="number" step="0.1" min="0" value="${room.adjArea || ''}" class="adj-input" placeholder="面積" oninput="updateRoom(${rIndex}, 'adjArea', this.value)">
          </td>
        `;
      }

      const skyBadge = win.isSkylight ? '<span class="badge-sky">天窓</span>' : '';
      
      rowsHtml += `
        <td>
          <input type="text" class="room-name" style="width:70px;" value="${win.name}" oninput="updateWin(${rIndex}, ${wIndex}, 'name', this.value)">
          <br>${skyBadge}
        </td>
        <td><input type="number" step="0.001" min="0" value="${win.d}" oninput="updateWin(${rIndex}, ${wIndex}, 'd', this.value)"></td>
        <td><input type="number" step="0.001" min="0" value="${win.h}" oninput="updateWin(${rIndex}, ${wIndex}, 'h', this.value)"></td>
        <td id="dh-${rIndex}-${wIndex}">0.000</td>
        <td id="coeff-${rIndex}-${wIndex}">0.000</td>
        <td><input type="number" step="0.001" min="0" value="${win.w}" oninput="updateWin(${rIndex}, ${wIndex}, 'w', this.value)"></td>
        <td><input type="number" step="0.001" min="0" value="${win.h2}" oninput="updateWin(${rIndex}, ${wIndex}, 'h2', this.value)"></td>
        <td id="winArea-${rIndex}-${wIndex}">0.000</td>
        <td id="effArea-${rIndex}-${wIndex}">0.000</td>
      `;

      if (wIndex === 0) {
        rowsHtml += `
          <td rowspan="${room.windows.length}" id="total-${rIndex}" style="font-weight:bold;">0.000</td>
          <td rowspan="${room.windows.length}" id="req-${rIndex}">0.000</td>
          <td rowspan="${room.windows.length}" id="judge-${rIndex}">-</td>
        `;
      }

      let actionHtml = `<button class="btn btn-remove" onclick="removeWin(${rIndex}, ${wIndex})">削除</button>`;
      if (wIndex === 0) {
        actionHtml = `
          <button class="btn btn-add" onclick="addWin(${rIndex}, false)" style="margin-bottom:4px; width:100%;">＋ 窓追加</button><br>
          <button class="btn btn-add-sky" onclick="addWin(${rIndex}, true)" style="margin-bottom:4px; width:100%;">＋ 天窓追加</button><br>
          <button class="btn btn-remove" onclick="removeRoom(${rIndex})" style="width:100%;">部屋削除</button>
        `;
      }
      rowsHtml += `<td>${actionHtml}</td>`;
      rowsHtml += `</tr>`;
    });
  });

  tbody.innerHTML = rowsHtml;
  recalc();
}

function recalc() {
  const ratioSelect = document.getElementById('ratioSelect');
  const zoneSelect = document.getElementById('zoneSelect');
  if (!ratioSelect || !zoneSelect) return;
  
  const ratioVal = parseInt(ratioSelect.value, 10);
  const ratio = 1 / ratioVal;
  const zone = zoneSelect.value;
  
  const zoneText = zoneSelect.options[zoneSelect.selectedIndex].text;
  const ratioText = ratioSelect.options[ratioSelect.selectedIndex].text;
  
  // タイトルと印刷用設定表示枠の更新
  document.getElementById('pageTitle').innerText = `採光計算アプリ多機能版 - ${zoneText}`;
  
  const printZoneEl = document.getElementById('printZoneText');
  const printRatioEl = document.getElementById('printRatioText');
  if(printZoneEl) printZoneEl.innerText = zoneText;
  if(printRatioEl) printRatioEl.innerText = ratioText;

  rooms.forEach((room, rIndex) => {
    let totalEffectiveArea = 0;
    
    let roomArea = Number(room.area) || 0;
    let adjArea = Number(room.adjArea) || 0;
    let totalRoomArea = roomArea + adjArea;
    let reqArea = totalRoomArea * ratio;

    room.windows.forEach((win, wIndex) => {
      let d = Number(win.d) || 0;
      let h = Number(win.h) || 0;
      let w = Number(win.w) || 0;
      let h2 = Number(win.h2) || 0;

      let dh = (h > 0) ? d / h : 0;
      
      let rawCoeff = 0;
      if (zone === 'residential') {
        rawCoeff = dh * 6.0 - 1.4;
      } else if (zone === 'industrial') {
        rawCoeff = dh * 8.0 - 1.0;
      } else if (zone === 'commercial') {
        rawCoeff = dh * 10.0 - 1.0;
      }
      
      if (rawCoeff < 0) rawCoeff = 0;
      
      if (win.isSkylight) {
        rawCoeff *= 3.0;
      }
      
      let coeff = Math.min(3.0, rawCoeff);
      
      let winArea = w * h2;
      let effArea = winArea * coeff;
      
      totalEffectiveArea += effArea;

      const elDh = document.getElementById(`dh-${rIndex}-${wIndex}`);
      const elCoeff = document.getElementById(`coeff-${rIndex}-${wIndex}`);
      const elWinArea = document.getElementById(`winArea-${rIndex}-${wIndex}`);
      const elEffArea = document.getElementById(`effArea-${rIndex}-${wIndex}`);

      if (elDh) elDh.innerText = dh.toFixed(3);
      if (elCoeff) elCoeff.innerText = coeff.toFixed(3);
      if (elWinArea) elWinArea.innerText = winArea.toFixed(3);
      if (elEffArea) elEffArea.innerText = effArea.toFixed(3);
    });

    let isOk = totalEffectiveArea >= reqArea && reqArea > 0;

    const elTotal = document.getElementById(`total-${rIndex}`);
    const elReq = document.getElementById(`req-${rIndex}`);
    const elJudge = document.getElementById(`judge-${rIndex}`);

    if (elTotal) elTotal.innerText = totalEffectiveArea.toFixed(3);
    if (elReq) elReq.innerText = reqArea.toFixed(3);
    if (elJudge) {
      elJudge.innerHTML = `<span class="${isOk ? 'ok' : 'ng'}">${isOk ? 'OK' : 'NG'}</span>`;
    }
  });
}

function updateRoom(rIdx, key, val) {
  rooms[rIdx][key] = val;
  recalc();
}

function updateWin(rIdx, wIdx, key, val) {
  rooms[rIdx].windows[wIdx][key] = val;
  recalc();
}

function addRoom() {
  rooms.push({
    id: generateId(),
    floor: '',
    name: `部屋${String.fromCharCode(65 + rooms.length)}`,
    adjName: '',
    area: '',
    adjArea: '',
    windows: [{ id: generateId(), name: "窓1", d: '', h: '', w: '', h2: '', isSkylight: false }]
  });
  render();
}

function addWin(rIdx, isSkylight) {
  const wins = rooms[rIdx].windows;
  const defaultName = isSkylight ? `天窓${wins.length + 1}` : `窓${wins.length + 1}`;
  wins.push({ 
    id: generateId(), 
    name: defaultName, 
    d: '', h: '', w: '', h2: '', 
    isSkylight: isSkylight 
  });
  render();
}

function removeRoom(rIdx) {
  if(confirm("この部屋を削除してもよろしいですか？")) {
    rooms.splice(rIdx, 1);
    render();
  }
}

function removeWin(rIdx, wIdx) {
  rooms[rIdx].windows.splice(wIdx, 1);
  if (rooms[rIdx].windows.length === 0) {
    rooms.splice(rIdx, 1);
  }
  render();
}

window.onload = function() {
  const isLoaded = loadFromLocal();
  if (!isLoaded) {
    rooms = [
      {
        id: generateId(),
        floor: "",
        name: "部屋A",
        adjName: "",
        area: "50",
        adjArea: "",
        windows: [
          { id: generateId(), name: "窓1", d: "0.56", h: "0.422", w: "0.351", h2: "0.6", isSkylight: false }
        ]
      }
    ];
    render();
  }
};
</script>

</body>
</html>