/* =============================================================================
   タテレポ モックアップ — 報告書サンプル（PDFイメージ）専用CSS
   report-pdf.html だけが読み込む。色・角丸は tokens.css の変数を使う。
   画面ではA4の紙が縦に並び、印刷（PDF保存）では1枚＝1ページになる。
   ============================================================================= */

@page { size: A4 portrait; margin: 0; }

:root {
  --sheet-w: 210mm;
  --sheet-h: 297mm;
  --sheet-pad-x: 15mm;
  --sheet-pad-top: 14mm;
  --sheet-pad-bottom: 12mm;
  --sheet-scale: 1;
  --doc-font: "Noto Sans JP", "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #e7ebf2;
  color: var(--color-text);
  font-family: var(--doc-font);
  font-feature-settings: "palt" 1;
}

img { max-width: 100%; display: block; }

/* --- 画面上部のツールバー（印刷では消える） -------------------------------- */
.toolbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.toolbar a, .toolbar button { font-family: inherit; }
.tb-back {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 40px; padding: 0 var(--sp-2);
  color: var(--color-text-2); text-decoration: none;
  font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-sm);
}
.tb-back:hover { background: var(--color-surface-2); color: var(--color-text); }
.tb-title { font-size: var(--text-md); font-weight: 700; }
.tb-note {
  flex: 1 1 240px;
  font-size: var(--text-xs); color: var(--color-text-3);
}
.tb-print {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: var(--text-base); font-weight: 700; cursor: pointer;
}
.tb-print:hover { background: var(--color-primary-hover); }
.toolbar .lucide { width: 18px; height: 18px; }

/* --- 紙の並び -------------------------------------------------------------- */
/* 高さをJSで指定するので、padding を含まない content-box にしておく */
.stage { overflow: hidden; padding: 24px 0 40px; box-sizing: content-box; }
#sheets {
  width: var(--sheet-w);
  margin: 0 auto;
  transform-origin: top left;
}

.sheet {
  position: relative;
  display: flex; flex-direction: column;
  width: var(--sheet-w); height: var(--sheet-h);
  margin: 0 0 24px;
  padding: var(--sheet-pad-top) var(--sheet-pad-x) var(--sheet-pad-bottom);
  background: #fff;
  box-shadow: 0 10px 30px rgba(27, 36, 49, .16);
  overflow: hidden;
  font-size: 11pt; line-height: 1.75;
}
.sheet:last-child { margin-bottom: 0; }

.sheet-head {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 4mm;
  padding-bottom: 2mm; margin-bottom: 4mm;
  border-bottom: 1.5px solid var(--color-primary);
}
.sheet-head .sh-title { font-size: 13pt; font-weight: 700; }
.sheet-head .sh-sub { font-size: 8.5pt; color: var(--color-text-3); white-space: nowrap; }

.sheet-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }

.sheet-foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 4mm;
  padding-top: 2mm; margin-top: 4mm;
  border-top: 1px solid var(--color-border);
  font-size: 8pt; color: var(--color-text-3);
}

/* --- 文書の基本要素 -------------------------------------------------------- */
.doc-p { margin: 0 0 3.5mm; font-size: 11pt; line-height: 1.9; text-align: justify; }
.doc-p:last-child { margin-bottom: 0; }
.doc-sub { margin: 0 0 2mm; font-size: 11pt; font-weight: 700; }
.doc-sub + .doc-p, .doc-sub + .doc-table, .doc-sub + .doc-box { margin-top: 0; }
.doc-block { margin-bottom: 6mm; }
.doc-block:last-child { margin-bottom: 0; }
.doc-small { font-size: 8.5pt; color: var(--color-text-3); line-height: 1.7; }
.doc-muted { color: var(--color-text-2); }

.doc-box {
  padding: 3.5mm 4mm;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: 10.5pt; line-height: 1.85;
}
.doc-box-accent { border-left: 3px solid var(--color-primary); }
.doc-box-strong { background: #fff; border: 1.5px solid var(--color-border-strong); }

.doc-table { width: 100%; border-collapse: collapse; font-size: 9pt; line-height: 1.6; }
.doc-table th, .doc-table td {
  border: 1px solid var(--color-border);
  padding: 1.8mm 2.2mm;
  vertical-align: top;
  text-align: left;
}
.doc-table th {
  background: var(--color-surface-2);
  color: var(--color-text-2);
  font-weight: 700; white-space: nowrap;
}
.doc-table td.num, .doc-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 見出しが長い列は折り返す（既定の th は nowrap） */
.doc-table th.wrap, .doc-table td.wrap { white-space: normal; }
.sc-val { font-variant-numeric: tabular-nums; }
.doc-table .key { width: 30%; background: var(--color-surface-2); color: var(--color-text-2); font-weight: 700; }
.doc-table .row-ref td { color: var(--color-text-3); background: #fcfdff; }
.doc-table .qid { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-2); }

.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; align-items: start; }

.unverified { color: var(--color-warning); font-weight: 700; }

/* 等級・優先度のバッジ（app.css は読み込まないのでここで定義する） */
.gb {
  display: inline-block; padding: 0.4mm 2mm;
  border-radius: var(--radius-pill);
  font-size: 8.5pt; font-weight: 700; white-space: nowrap;
}
.gb-a { background: var(--grade-a-soft); color: var(--grade-a); }
.gb-b { background: var(--grade-b-soft); color: var(--grade-b); }
.gb-c { background: var(--grade-c-soft); color: var(--grade-c); }
.gb-d { background: var(--grade-d-soft); color: var(--grade-d); }
.gb-p1 { background: var(--p1-soft); color: var(--p1); }
.gb-p2 { background: var(--p2-soft); color: var(--p2); }
.gb-p3 { background: var(--p3-soft); color: var(--p3); }
.gb-p4 { background: var(--p4-soft); color: var(--p4); }
.gb-plain { background: var(--color-neutral-soft); color: var(--color-neutral); }

.bar { display: block; height: 3.4mm; border-radius: var(--radius-pill); background: var(--color-neutral-soft); overflow: hidden; min-width: 22mm; }
.bar > span { display: block; height: 100%; border-radius: var(--radius-pill); }
.bar-a > span { background: var(--grade-a); }
.bar-b > span { background: var(--grade-b); }
.bar-c > span { background: var(--grade-c); }
.bar-d > span { background: var(--grade-d); }

.legend { display: flex; flex-wrap: wrap; gap: 2mm 5mm; font-size: 9pt; }
.legend .lg-item { display: flex; align-items: center; gap: 1.5mm; }
.legend .lg-dot { width: 3mm; height: 3mm; border-radius: var(--radius-pill); flex: none; }

.doc-list { margin: 0; padding-left: 5mm; font-size: 10pt; line-height: 1.8; }
.doc-list li { margin-bottom: 1.5mm; }

/* --- 表紙 ------------------------------------------------------------------ */
.cover-body { display: flex; flex-direction: column; height: 100%; }
.cover-top { display: flex; align-items: center; justify-content: space-between; gap: 4mm; }
.cover-company { font-size: 11pt; font-weight: 700; letter-spacing: .04em; }
.cover-kind {
  padding: 1mm 3mm; border-radius: var(--radius-pill);
  background: var(--color-primary-soft); color: var(--color-primary);
  font-size: 9pt; font-weight: 700;
}
.cover-title { margin-top: 24mm; font-size: 26pt; font-weight: 700; letter-spacing: .08em; }
.cover-sub { margin-top: 3mm; font-size: 11.5pt; color: var(--color-text-2); letter-spacing: .02em; }
.cover-rule { margin-top: 5mm; width: 34mm; height: 1.4mm; background: var(--color-primary); border-radius: var(--radius-pill); }
.cover-photo {
  margin-top: 10mm; height: 72mm; border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-neutral-soft);
}
.cover-photo img { width: 100%; height: 100%; object-fit: cover; }
.cover-building { margin-top: 8mm; font-size: 17pt; font-weight: 700; }
.cover-case { margin-top: 1.5mm; font-size: 11pt; color: var(--color-text-2); }
.cover-address { margin-top: 1mm; font-size: 10pt; color: var(--color-text-3); }
.cover-meta { margin-top: auto; padding-top: 8mm; }
.cover-note { margin-top: 4mm; font-size: 8.5pt; color: var(--color-text-3); }

/* --- 総合評価ブロック ------------------------------------------------------ */
.score-box {
  display: flex; align-items: stretch; gap: 6mm;
  padding: 5mm; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
}
.score-grade {
  flex: none; width: 32mm;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}
.score-grade .sg-letter { font-size: 34pt; font-weight: 700; line-height: 1.1; }
.score-grade .sg-label { font-size: 9.5pt; font-weight: 700; }
.score-main { flex: 1 1 auto; min-width: 0; }
.score-value { font-size: 22pt; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.score-caption { font-size: 9pt; color: var(--color-text-3); }
.score-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; margin-top: 4mm; }
.score-fact { border-left: 2px solid var(--color-border); padding-left: 2.5mm; }
.score-fact dt { font-size: 8.5pt; color: var(--color-text-3); }
.score-fact dd { margin: 0; font-size: 10.5pt; font-weight: 700; }
/* 数値でなく短い文が入るときは、少し小さめにして3列に収める */
.score-fact dd.sf-text { font-size: 9.5pt; font-weight: 600; line-height: 1.55; }

/* --- 写真台帳 -------------------------------------------------------------- */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm 6mm; }
.pcell { break-inside: avoid; }
.pcell .pshot {
  aspect-ratio: 3 / 2; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--color-neutral-soft);
}
.pcell .pshot img { width: 100%; height: 100%; object-fit: cover; }
.pcell .pmeta { margin-top: 1.5mm; font-size: 8.5pt; line-height: 1.55; color: var(--color-text-2); }
.pcell .pmeta .pid { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.pcell .pcap { margin-top: 1mm; font-size: 8.5pt; line-height: 1.6; color: var(--color-text); }

/* --- 印刷（PDF保存） ------------------------------------------------------- */
@media print {
  html, body { background: #fff; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
  .stage { padding: 0; overflow: visible; height: auto !important; }
  #sheets { width: var(--sheet-w); margin: 0 !important; transform: none !important; }
  .sheet {
    margin: 0; box-shadow: none;
    page-break-after: always; break-after: page;
    page-break-inside: avoid; break-inside: avoid;
  }
  .sheet:last-child { page-break-after: auto; break-after: auto; }
  .pcell, .doc-block { page-break-inside: avoid; break-inside: avoid; }
}