/* ====== Base ====== */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Segoe UI", Arial, sans-serif;
  background: #f4f6f9;
  color: #1b2433;
  line-height: 1.55;
}
body { min-height: 100vh; }

/* ====== Header ====== */
.app-header {
  background: linear-gradient(135deg, #1f3a5f 0%, #2b5178 100%);
  color: white;
  padding: 18px 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.app-header .header-text { flex: 1; min-width: 0; }
.app-header h1 { margin: 0; font-size: 22px; letter-spacing: 0.05em; }
.app-header .sub { margin: 4px 0 0; opacity: .82; font-size: 12.5px; }

/* ====== Tabs ====== */
.tabs {
  display: flex;
  gap: 2px;
  background: #e6ebf3;
  padding: 0 16px;
  border-bottom: 1px solid #c6cfdc;
  overflow-x: auto;
  white-space: nowrap;
}
.tab {
  background: transparent;
  border: none;
  padding: 12px 18px;
  font-size: 14px;
  cursor: pointer;
  color: #3b4a60;
  border-bottom: 3px solid transparent;
  font-weight: 500;
  transition: all .15s;
}
.tab:hover { color: #1f3a5f; background: #dce3ee; }
.tab.active {
  color: #1f3a5f;
  border-bottom-color: #3b7ac0;
  background: #fff;
  font-weight: 700;
}

/* ====== Panels ====== */
#panels { padding: 18px 24px 40px; max-width: 1400px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }
.panel h2 {
  margin: 4px 0 12px;
  font-size: 17px;
  color: #1f3a5f;
  border-left: 4px solid #3b7ac0;
  padding-left: 10px;
}
.panel h3 {
  margin: 4px 0 8px;
  font-size: 14px;
  color: #2b5178;
}

/* ====== Panel grid ====== */
.panel-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.2fr);
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 960px) {
  .panel-grid { grid-template-columns: 1fr; }
}

/* ====== Inputs ====== */
.inputs-col fieldset {
  border: 1px solid #c6cfdc;
  border-radius: 6px;
  padding: 10px 14px 12px;
  margin: 0 0 10px;
  background: #fff;
}
.inputs-col legend {
  padding: 0 6px;
  font-size: 12.5px;
  color: #2b5178;
  font-weight: 600;
}
.inputs-col label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 4rem;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  font-size: 13px;
}
.inputs-col input[type=number],
.inputs-col select {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid #b8c2d3;
  border-radius: 4px;
  background: #eef9e8;    /* Excelの緑セル入力を踏襲 */
  font-size: 13px;
  text-align: right;
}
.inputs-col input[type=number]:focus,
.inputs-col select:focus {
  outline: none;
  border-color: #3b7ac0;
  box-shadow: 0 0 0 2px rgba(59,122,192,0.25);
}

/* 入力欄下の補足コメント (段板の集中荷重説明など) */
.load-note {
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 12px;
  color: #3b4a60;
  background: #f0f4fa;
  border-left: 3px solid #3b7ac0;
  border-radius: 3px;
  line-height: 1.55;
}

/* ====== Diagram ====== */
.diagram-col {
  background: #fff;
  border: 1px solid #c6cfdc;
  border-radius: 6px;
  padding: 12px 14px 14px;
}
.svg-wrap {
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svg-wrap svg { width: 100%; height: auto; max-height: 420px; }

/* ====== Results ====== */
.results {
  background: #fff;
  border: 1px solid #c6cfdc;
  border-radius: 6px;
  padding: 14px 18px 16px;
}
.results h3 {
  margin: 10px 0 6px;
  font-size: 14px;
  color: #2b5178;
  border-bottom: 1px dashed #c6cfdc;
  padding-bottom: 3px;
}
.results h3:first-child { margin-top: 0; }
.results .row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
  align-items: baseline;
}
.results .row .lbl { color: #3b4a60; min-width: 140px; }
.results .row .val {
  font-family: "Consolas", "Menlo", monospace;
  color: #111;
}
.results .row .eq {
  font-family: "Consolas", "Menlo", monospace;
  color: #555;
  font-size: 12px;
}
.results .ok  { color: #1a7f37; font-weight: 700; }
.results .ng  { color: #c4281a; font-weight: 700; }

/* ====== Bolt table ====== */
table.bolt-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
  background: #fff;
  table-layout: fixed;
}
table.bolt-table col.col-eq { width: 9.5%; }
table.bolt-table th, table.bolt-table td { word-break: break-all; }
table.bolt-table th, table.bolt-table td {
  border: 1px solid #c6cfdc;
  padding: 5px 8px;
  text-align: center;
}
table.bolt-table th {
  background: #e9eef6;
  color: #1f3a5f;
  font-weight: 600;
  text-align: center;
}
table.bolt-table td.name { text-align: left; font-weight: 600; }
table.bolt-table td.size { text-align: center; font-weight: 700; }
table.bolt-table tr.type-header td {
  background: #d6e2ef;
  text-align: left;
  font-weight: 700;
  color: #1f3a5f;
}
.note { font-size: 12px; color: #5a667a; }

/* ====== Footer ====== */
.app-footer {
  padding: 14px 24px;
  text-align: center;
  color: #5a667a;
  font-size: 12px;
  border-top: 1px solid #c6cfdc;
  background: #eaeff6;
}

/* ====== 拡張セクション（データ管理／計算書／結果出力／ロジック解説） ====== */
.ext-section {
  max-width: 1400px;
  margin: 0 auto 16px;
  padding: 14px 18px 16px;
  background: #fff;
  border: 1px solid #c6cfdc;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ext-section + .ext-section { margin-top: 12px; }
#panels + .ext-section { margin-top: 16px; }

.ext-h2 {
  margin: 0 0 8px;
  padding: 6px 12px;
  font-size: 15px;
  background: linear-gradient(135deg, #1f3a5f 0%, #2b5178 100%);
  color: #fff;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.ext-note {
  font-size: 12px;
  color: #3b4a60;
  margin: 0 0 8px;
  padding: 6px 10px;
  background: #f0f4fa;
  border-left: 3px solid #3b7ac0;
  border-radius: 3px;
  line-height: 1.55;
}
.ext-note-sub {
  background: transparent;
  border-left: none;
  padding: 4px 0;
  font-size: 11px;
  color: #5a667a;
}

.ext-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.ext-label {
  font-size: 12.5px;
  color: #3b4a60;
}
.ext-input-text {
  margin-left: 6px;
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid #b8c2d3;
  border-radius: 4px;
  width: 320px;
  background: #fff;
}
.ext-input-text:focus {
  outline: none;
  border-color: #3b7ac0;
  box-shadow: 0 0 0 2px rgba(59,122,192,0.25);
}

.ext-btn {
  background: #1f3a5f;
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.12s;
}
.ext-btn:hover { background: #2b5178; }
.ext-btn.alt { background: #6a7a96; }
.ext-btn.alt:hover { background: #87a0bd; }
.ext-file-label {
  display: inline-block;
  cursor: pointer;
}

.ext-radio-bar {
  font-size: 12.5px;
  padding: 5px 10px;
  background: #f4f6fa;
  border: 1px solid #d4dae6;
  border-radius: 3px;
  margin-bottom: 8px;
  color: #3b4a60;
}
.ext-radio-bar label { margin-left: 12px; }

.ext-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 14px;
  font-size: 12.5px;
  margin-bottom: 8px;
}
@media (max-width: 720px) {
  .ext-checkbox-grid { grid-template-columns: 1fr 1fr; }
}

.ext-case-list {
  max-height: 280px;
  overflow: auto;
  border: 1px solid #c6cfdc;
  border-radius: 4px;
  margin-top: 4px;
}
table.ext-case-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}
table.ext-case-table th,
table.ext-case-table td {
  border: 1px solid #c6cfdc;
  padding: 4px 8px;
  text-align: right;
  vertical-align: middle;
}
table.ext-case-table th {
  background: #e9eef6;
  color: #1f3a5f;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
table.ext-case-table td.l,
table.ext-case-table th.l { text-align: left; }
table.ext-case-table .res-ok { color: #1a7f37; font-weight: 700; }
table.ext-case-table .res-ng { color: #c4281a; font-weight: 700; }

/* 計算ロジック詳細解説 */
.ext-logic-doc { font-size: 12.5px; line-height: 1.75; padding: 8px 12px 4px; }
.ext-logic-doc h3 {
  font-size: 13.5px;
  color: #1f3a5f;
  border-left: 4px solid #3b7ac0;
  padding-left: 8px;
  margin: 14px 0 4px;
}
.ext-logic-doc p { margin: 4px 0 6px; }
.ext-logic-doc ul, .ext-logic-doc ol { margin: 4px 0 8px; padding-left: 22px; }
.ext-logic-doc li { margin-bottom: 3px; }
.ext-formula {
  background: #f4f6fa;
  border-left: 3px solid #1f3a5f;
  padding: 6px 12px;
  font-family: "Cambria Math", Consolas, serif;
  font-size: 12.5px;
  margin: 4px 0 8px;
  line-height: 1.85;
  border-radius: 3px;
}
.ext-ref-list {
  font-size: 12px;
  line-height: 1.85;
  padding-left: 20px;
}
#logicSection details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: #1f3a5f;
  padding: 4px 8px;
}
#logicSection details[open] summary { margin-bottom: 4px; }