/* ============================================================
   お役立ちツール（チェックシート）の体裁
   画面: 白いシートをプレビュー表示 ／ 印刷: シートだけをA4で出力
   ============================================================ */

/* ---------- シート本体（画面・印刷共通） ---------- */
.tool-sheet{
  background:#fff; color:#1a1a1a;
  font-family:"Noto Sans JP",sans-serif; font-size:10pt; line-height:1.5;
  width:210mm; max-width:100%; margin:0 auto; padding:12mm 14mm;
}
.ts-head h1{ font-family:"Shippori Mincho B1",serif; font-size:16pt; line-height:1.4; margin:2mm 0 0; }
.ts-brand{ font-family:"Instrument Sans",sans-serif; font-size:7pt; letter-spacing:.25em; color:#888; }
.ts-sub{ font-size:8.5pt; color:#555; margin-top:1.5mm; }

.ts-meta{ display:grid; grid-template-columns:1fr 1fr; gap:1.5mm 6mm; margin-top:4mm;
  border-top:2px solid #1a1a1a; padding-top:4mm; }
.ts-meta div{ display:flex; align-items:flex-end; gap:3mm; }
.ts-meta span{ font-size:8pt; color:#555; white-space:nowrap; padding-bottom:1mm; }
.ts-meta i{ flex:1; border-bottom:1px solid #999; height:5.5mm; }

.ts-phase{ margin-top:3.8mm; }
.ts-phase h2{ font-size:10.5pt; font-weight:700; border-left:3px solid #1a1a1a; padding-left:3mm; }
.ts-phase h2 em{ font-family:"Instrument Sans",sans-serif; font-style:normal; font-size:7pt;
  letter-spacing:.2em; color:#888; display:inline-block; margin-right:3mm; transform:translateY(-.5pt); }

.ts-phase table{ width:100%; border-collapse:collapse; margin-top:1.8mm; }
.ts-phase th{ font-size:7pt; font-weight:500; color:#777; text-align:left;
  border-bottom:1px solid #1a1a1a; padding:1mm 2mm; }
.ts-phase td{ border-bottom:1px solid #ddd; padding:1.1mm 2mm; vertical-align:top; }
.ts-phase td small{ display:block; font-size:7pt; color:#777; margin-top:.3mm; }
.ts-phase .c{ width:8mm; text-align:center; }
.ts-phase .w{ width:22mm; }
.ts-phase td b{ display:inline-block; width:4mm; height:4mm; border:1.5px solid #1a1a1a; margin-top:1mm; }
.ts-phase tr{ break-inside:avoid; }

.ts-foot{ margin-top:5mm; border-top:2px solid #1a1a1a; padding-top:2.5mm; }
.ts-foot p{ font-size:7.5pt; color:#444; }

/* ---------- 画面表示のみ ---------- */
@media screen{
  /* ダーク背景（bg-ink）の上に白いA4シートを浮かせる */
  .tool-sheet{ box-shadow:0 20px 60px rgba(0,0,0,.5); }
}

/* ---------- 印刷専用ビュー（/tool/{slug}/?print=1）---------- */
/* 印刷はサイトの画面からではなく、シートだけを含む専用ページから行う。
   余白は @page に持たせ、2ページ目以降にも同じ余白が付くようにする。 */
.tool-print{ margin:0; padding:0; background:#fff; }
.tool-print .tool-sheet{ width:auto; max-width:182mm; margin:0 auto; padding:0; box-shadow:none; border:none; }

@page{ size:A4; margin:12mm 14mm; }
@media print{
  html, body{ margin:0; padding:0; background:#fff; }
  /* 表は行の境目でだけ改ページする（行の途中では切らない・巨大な空白も作らない） */
  .ts-phase{ break-inside:auto; }
  .ts-phase table{ break-inside:auto; }
  .ts-phase tr{ break-inside:avoid; }
  .ts-phase h2{ break-after:avoid; break-inside:avoid; }
  .ts-head, .ts-meta{ break-inside:avoid; }
  .ts-foot{ break-inside:avoid; }
  .ts-phase td b{ border-width:1px; }
}

/* --- 記入式ワークシート用の部品（2026-08-21 追加） --------------------- */
.ts-write{ border:1px solid #bbb; border-radius:1mm; margin-top:1.8mm; padding:1.5mm 2.5mm 0; }
.ts-write i{ display:block; border-bottom:1px dotted #bbb; height:6.5mm; }
.ts-write i:last-child{ border-bottom:none; }
.ts-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:2mm; margin-top:1.8mm; }
.ts-pick div{ border:1px solid #bbb; border-radius:1mm; padding:2mm 2.5mm; }
.ts-pick b{ display:inline-block; width:3.4mm; height:3.4mm; border:1.5px solid #1a1a1a;
  vertical-align:-.4mm; margin-right:1.8mm; }
.ts-pick strong{ font-size:9.5pt; }
.ts-pick small{ display:block; font-size:7pt; color:#777; margin-top:1mm; line-height:1.5; }
.ts-lead{ font-size:8pt; color:#555; margin-top:1.5mm; }
.ts-phase .n{ width:16mm; }
.ts-phase .m{ width:30mm; }
.ts-phase td.f{ border-bottom:1px solid #ddd; height:7mm; }
@media print{
  .ts-write, .ts-pick div{ break-inside:avoid; }
}

/* 記入欄が多いシート用に、行間と余白を少しだけ詰める */
.ts-dense .ts-phase{ margin-top:2.6mm; }
.ts-dense .ts-phase td{ padding:.7mm 2mm; }
.ts-dense .ts-phase td.f{ height:5.6mm; }
.ts-dense .ts-lead{ margin-top:1.2mm; }
.ts-dense .ts-pick div{ padding:1.6mm 2.2mm; }
.ts-dense .ts-write i{ height:5.5mm; }
.ts-dense .ts-foot{ margin-top:2mm; padding-top:1.5mm; }
.ts-dense .ts-foot p{ font-size:7pt; }