/* ===================================================
   スクリュー杭 構造計算プログラム  styles.css
   =================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: "Yu Gothic UI", "Yu Gothic", "Meiryo", "MS PGothic", sans-serif;
  font-size: 14px;
  color: #222;
  background: #f4f6f9;
}

.container { max-width: 1100px; margin: 0 auto; padding: 16px 20px; }

/* ---- header & tabs ---- */
.app-header {
  background: linear-gradient(135deg, #14387f, #1a55b9);
  color: #fff;
  padding: 14px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  position: sticky; top:0; z-index: 30;
}
.app-header h1 { margin: 0 0 8px 0; font-size: 18px; font-weight: 700; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab-btn {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  padding: 7px 16px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-size: 13px;
}
.tab-btn:hover { background: rgba(255,255,255,.18); }
.tab-btn.active {
  background: #fff;
  color: #14387f;
  font-weight: 700;
  border-bottom-color: #fff;
}

.tab-section { display: none; }
.tab-section.active { display: block; }

/* ---- form / cards ---- */
.card {
  background: #fff;
  border: 1px solid #d4dbe4;
  border-radius: 8px;
  padding: 16px 20px 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.card legend {
  background: #14387f;
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 18px;
  margin-top: 8px;
}
.grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; color: #555;
}
.grid input, .grid select {
  padding: 6px 8px;
  border: 1px solid #c4ccd8;
  border-radius: 4px;
  font-size: 13.5px;
  background: #fff;
  color: #111;
}
.grid input:focus, .grid select:focus { outline: 2px solid #1a55b9; outline-offset: -1px; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-row { margin: 16px 0 32px; justify-content: flex-end; }

.btn {
  background: #fff;
  border: 1px solid #c4ccd8;
  padding: 7px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: #14387f;
}
.btn:hover { background: #eef3fb; }
.btn-primary {
  background: #14387f; color: #fff; border-color: #14387f;
  font-weight: 700;
}
.btn-primary:hover { background: #1a55b9; }

.note { color: #555; line-height: 1.6; }
.note.small { font-size: 12px; margin-top: 8px; }

/* ---- layer table ---- */
.layer-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}
.layer-table th, .layer-table td {
  border: 1px solid #c4ccd8;
  padding: 4px 6px;
  text-align: center;
}
.layer-table th { background: #eef3fb; }
.layer-table td input, .layer-table td select {
  width: 100%;
  padding: 3px 5px;
  border: 1px solid #d4dbe4;
  border-radius: 3px;
  font-size: 13px;
}
.layer-table td.del button {
  background: #c0392b; color: #fff; border: none; padding: 2px 8px; border-radius: 3px; cursor: pointer;
}

/* ---- result panel ---- */
#result_panel {
  background: #fff;
  border: 1px solid #d4dbe4;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 13px;
}
#result_panel h2 { color: #14387f; border-bottom: 2px solid #14387f; padding-bottom: 4px; }
#result_panel h3 { color: #14387f; margin-top: 20px; }
#result_panel table { border-collapse: collapse; width: 100%; margin: 8px 0 14px; }
#result_panel th, #result_panel td {
  border: 1px solid #c4ccd8; padding: 4px 8px; font-size: 12.5px;
}
#result_panel th { background: #eef3fb; }
#result_panel td.num { text-align: right; font-family: Consolas, monospace; }
#result_panel td.ok { color: #2c7a2c; font-weight: 700; }
#result_panel td.ng { color: #c0392b; font-weight: 700; }

/* ---- 詳細計算式 ---- */
#result_panel .formula-sec {
  background: #f8fafc;
  border-left: 4px solid #14387f;
  padding: 10px 14px;
  margin: 10px 0 14px;
  border-radius: 4px;
}
#result_panel .formula-sec h4 {
  margin: 0 0 6px;
  color: #14387f;
  font-size: 13.5px;
}
#result_panel .formula-line {
  font-family: "Consolas", "Yu Gothic UI", monospace;
  font-size: 12.5px;
  line-height: 1.9;
  margin: 2px 0;
  padding-left: 8px;
  border-left: 1px dashed #c4ccd8;
}
#result_panel .formula-line b {
  color: #1a55b9;
  background: #eaf3ff;
  padding: 0 4px;
  border-radius: 3px;
}
#result_panel ul.standards {
  list-style: disc;
  margin: 8px 0 0 24px;
  padding: 0;
}
#result_panel ul.standards li {
  margin: 6px 0;
  line-height: 1.7;
}
#result_panel ul.standards .small {
  font-size: 12px;
  color: #555;
}

/* ---- report (構造計算書) ---- */
.report-toolbar { padding: 10px 0; background: #f4f6f9; }
.report {
  background: #fff;
  margin: 0 auto;
  padding: 0;
  font-family: "Yu Mincho", "MS PMincho", "MS Mincho", serif;
  color: #000;
  font-size: 12pt;
  line-height: 1.7;
}
.report .page {
  width: 210mm;
  min-height: 297mm;
  padding: 22mm 20mm 18mm 22mm;
  margin: 0 auto 12px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  page-break-after: always;
  position: relative;
}
.report .page:last-child { page-break-after: auto; }
.report .pgnum { position: absolute; bottom: 12mm; left: 0; right: 0; text-align: center; font-size: 10pt; }

.report .cover-title { text-align: center; font-size: 22pt; letter-spacing: 0.3em; margin: 60mm 0 20mm; }
.report .cover-meta { text-align: center; font-size: 13pt; line-height: 2.2; margin: 0 0 30mm; }
.report .cover-meta .meta-row { text-align: center; margin: 4mm 0; }
.report .cover-meta .label { display: inline; }
.report .cover-company { text-align: center; font-size: 11pt; line-height: 1.8; margin-top: 30mm; }

.report .toc { margin: 30mm 0 0; font-size: 12pt; line-height: 2.5; }
.report .toc-title { text-align: center; font-size: 16pt; margin-bottom: 14mm; letter-spacing: 0.3em; }

.report h2.sec { font-size: 13pt; border-bottom: 1.5pt solid #000; padding-bottom: 2pt; margin: 4mm 0 4mm; }
.report h3.sub { font-size: 12pt; margin: 5mm 0 3mm; }
.report h4.tbl-title { font-size: 11pt; margin: 4mm 0 2mm; }

.report table.calc {
  width: 100%; border-collapse: collapse; font-size: 10.5pt; margin: 2mm 0 5mm;
}
.report table.calc th, .report table.calc td {
  border: 0.6pt solid #000; padding: 2pt 5pt; vertical-align: middle;
}
.report table.calc th { background: #e8eef7; font-weight: 600; text-align: center; }
.report table.calc td.num { text-align: right; font-family: "Consolas", "MS Gothic", monospace; }
.report table.calc td.center { text-align: center; }
.report table.calc td.ok { color: #1f6e1f; font-weight: 700; text-align: center; }
.report table.calc td.ng { color: #b62525; font-weight: 700; text-align: center; }

.report ul.designref { margin: 0 0 4mm 5mm; padding: 0; }
.report ul.designref li { font-size: 11pt; line-height: 1.8; }

.report .formula {
  background: #f6f6f6;
  border-left: 3pt solid #14387f;
  padding: 4pt 8pt;
  margin: 2mm 0;
  font-family: "Consolas", "MS Gothic", monospace;
  font-size: 10.5pt;
  white-space: pre-wrap;
}
.report .ref-tag { font-size: 10pt; color: #444; margin-left: 6pt; }
.report .small { font-size: 10pt; color: #333; }

/* ---- スクリュー杭 形状図 (SVG) ---- */
.pile-diagram {
  display: inline-block;
  background: #fff;
  border: 1px solid #d4dbe4;
  border-radius: 4px;
  padding: 8px;
  vertical-align: top;
  max-width: 100%;
}
.pile-diagram svg {
  display: block;
  height: auto;
  margin: 0 auto;
}

/* 1.2 杭仕様 — 入力欄 + 形状図 の2列レイアウト */
.pile-spec-row {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 18px;
  align-items: flex-start;
  margin-top: 8px;
}
.pile-spec-fields { min-width: 0; }
.pile-spec-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 80px;
}
.pile-spec-figure .pile-diagram {
  width: 100%;
  max-width: 220px;
}
.pile-caption {
  font-size: 11.5px;
  color: #555;
  margin-top: 6px;
  text-align: center;
}

/* グリッドを2列固定 (狭い画面では自動折返し) */
.grid.grid-2col {
  grid-template-columns: repeat(2, minmax(140px, 1fr));
}
@media (max-width: 900px) {
  .pile-spec-row { grid-template-columns: 1fr; }
  .pile-spec-figure { position: static; }
  .grid.grid-2col { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

.report .pile-diagram { border: none; padding: 0; background: transparent; }
.report .pile-diagram svg { width: 60mm; }

/* ===========================================================
   印刷スタイル
   余白なし印刷でA4ページに合うように、
   画面の .page (210mm × 297mm) をそのまま用紙に焼く
   =========================================================== */
@page {
  size: A4;
  margin: 0;
}

@media print {
  /* リセット */
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  /* UIを完全に隠す */
  .no-print,
  .app-header,
  #tab-input,
  #tab-result,
  .report-toolbar {
    display: none !important;
  }
  /* 構造計算書だけ表示 */
  #tab-report,
  #tab-report.tab-section {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .report {
    width: 210mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #fff !important;
    font-family: "Yu Mincho", "MS PMincho", "MS Mincho", serif !important;
    font-size: 10pt !important;
    line-height: 1.55 !important;
  }
  /* 各ページは内容の高さに追従。プリンタの不可視領域分の安全マージン込み。
     コンテンツ領域は 200mm × 287mm 以内 */
  .report .page {
    width: 200mm !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 5mm auto !important;
    padding: 10mm 10mm 12mm 12mm !important;
    box-shadow: none !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
    /* page-break: 内部は自然分割を許可 */
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
  /* 2 番目以降の .page は強制的に新しい用紙から開始 */
  .report .page + .page {
    page-break-before: always !important;
    break-before: page !important;
  }
  /* 表組みや式ブロックがページ境界で切れないよう抑止 */
  .report table.calc,
  .report .formula,
  .report .formula-sec,
  .report ul.designref,
  .report ul.standards {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  /* 見出しは直後の内容と離さない */
  .report h2.sec,
  .report h3.sub,
  .report h4.tbl-title {
    page-break-after: avoid !important;
    break-after: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  /* 杭仕様の表+図のレイアウトも分断しない */
  .report .pile-diagram,
  .report .pile-spec-row {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  /* 印刷時の見出し・本文サイズ最適化 */
  .report h2.sec   { font-size: 12pt !important; padding-bottom: 1.5pt !important; margin: 0 0 3mm !important; }
  .report h3.sub   { font-size: 11pt !important; margin: 3mm 0 1.5mm !important; }
  .report h4.tbl-title { font-size: 10pt !important; margin: 2mm 0 1mm !important; }
  /* 表組み圧縮 */
  .report table.calc {
    font-size: 9pt !important;
    margin: 1mm 0 3mm !important;
    line-height: 1.35 !important;
  }
  .report table.calc th,
  .report table.calc td {
    border: 0.5pt solid #000 !important;
    padding: 1.2pt 4pt !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .report table.calc th {
    background: #e8eef7 !important;
  }
  /* 小文字・式ブロック */
  .report .small,
  .report ul.designref li,
  .report .ref-tag {
    font-size: 9pt !important;
    line-height: 1.5 !important;
  }
  .report .formula {
    font-size: 9pt !important;
    padding: 2pt 6pt !important;
    margin: 1mm 0 !important;
  }
  /* リスト */
  .report ul.designref { margin: 0 0 2mm 4mm !important; }
  .report ul.designref li { margin: 0 0 0.5mm !important; }
  /* 改ページ抑止 */
  .report table.calc,
  .report .formula,
  .report ul.designref {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  /* 色・OK/NG */
  .report .ok, .report td.ok {
    color: #1f6e1f !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .report .ng, .report td.ng {
    color: #b62525 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* 形状図 */
  .report .pile-diagram svg {
    width: 50mm !important;
    height: auto !important;
  }
  /* ページ番号は各セクション末尾に静的配置 (absolute だと自動分割時に消える) */
  .report .pgnum {
    position: static !important;
    text-align: center !important;
    margin-top: 8mm !important;
    font-size: 9pt !important;
  }
  /* 表紙センタリング */
  .report .cover-title {
    margin: 60mm 0 12mm !important;
    font-size: 22pt !important;
    text-align: center !important;
    letter-spacing: 0.3em !important;
  }
  .report .cover-meta {
    text-align: center !important;
    font-size: 13pt !important;
    line-height: 2.2 !important;
  }
  .report .cover-meta .meta-row {
    text-align: center !important;
    margin: 4mm 0 !important;
  }
  .report .cover-meta .label { display: inline !important; }
  .report .cover-company {
    text-align: center !important;
    margin-top: 30mm !important;
    font-size: 11pt !important;
  }
  /* 目次 */
  .report .toc-title { font-size: 16pt !important; }
  .report .toc { font-size: 12pt !important; line-height: 2.2 !important; }
}