/* 印刷用共通スタイル */

/* 2桁ページ番号用のカウンタースタイル */
@counter-style two-digit {
  system: extends decimal;
  pad: 2 "0";
}

/* CSS変数でフォントサイズを定義 */
:root {
  --base-font-size: 12pt;  /* 本文の基本サイズ */
  --h1-font-size: 20pt;
  --h2-font-size: 16pt;
  --h3-font-size: 14pt;
  --code-font-size: 11pt;
  --header-font-size: 10pt;
  --footer-font-size: 9pt;
}

/* ページ設定 */
@page {
  size: A4;
  margin: 20mm;
}

/* MPDFのヘッダー・フッター設定 */
@page main {
  @top-left {
    content: string(doctitle);
    font-size: var(--header-font-size);
    color: #666;
  }
  
  @top-right {
    content: "";
    font-size: var(--header-font-size);
    color: #666;
  }
  
  @bottom-center {
    content: "─── " counter(page, two-digit) " ───";
    font-size: var(--footer-font-size);
    color: #666;
  }
}

/* 基本設定 */
body {
  margin: 0;
  padding: 0;
  background: white;
  font-size: var(--base-font-size);
  color: #3b3b3b;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}

/* コンテンツエリア */
.content {
  font-size: var(--base-font-size);
  line-height: 1.8;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

/* 見出し */
.content h1 {
  font-size: var(--h1-font-size);
  font-weight: bold;
  margin: 25px 0 20px 0;
  page-break-after: avoid;
  string-set: doctitle content(text);
}

.content h2 {
  font-size: var(--h2-font-size);
  font-weight: bold;
  margin: 15px 0 10px 0;
  page-break-after: avoid;
}

.content h3 {
  font-size: var(--h3-font-size);
  font-weight: bold;
  margin: 10px 0 8px 0;
  page-break-after: avoid;
}

/* 段落 */
.content p {
  font-size: var(--base-font-size);
  line-height: 1.8;
  margin: 10px 0;
  orphans: 3;
  widows: 3;
}

/* リスト */
.content ul, .content ol {
  font-size: var(--base-font-size);
  line-height: 1.8;
  margin: 10px 0 10px 25px;
}

.content li {
  font-size: var(--base-font-size);
  line-height: 1.8;
  margin: 5px 0;
}

/* コードブロック */
.content pre {
  background-color: #f5f5f5;
  padding: 12px;
  page-break-inside: avoid;
  margin: 15px 0;
  font-size: var(--code-font-size);
}

/* Issue #35: 長いコードブロック（20行以上）は分割を許可 */
.content pre.long-code {
  page-break-inside: auto;
}

.content code {
  background-color: #f5f5f5;
  padding: 2px 4px;
  font-size: var(--code-font-size);
}

/* テーブル */
.content table {
  border-collapse: collapse;
  width: 100%;
  margin: 15px 0;
  page-break-inside: avoid;
}

.content th, .content td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.content th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 画像 */
.content img {
  max-width: 100%;
  height: auto;
  page-break-inside: avoid;
}

/* 引用 */
.content blockquote {
  margin: 10px 0;
  padding-left: 20px;
  border-left: 4px solid #ddd;
  color: #666;
  font-size: var(--base-font-size);
  word-wrap: break-word !important;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* ページブレーク制御 - .contentにスコープ化（Issue #44: CSS干渉対策） */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  page-break-after: avoid;
  page-break-inside: avoid;
}

.content p, .content li, .content blockquote {
  page-break-inside: avoid;
}

.content table, .content figure, .content img {
  page-break-inside: avoid;
}

/* 画面表示要素を印刷時に非表示 */
.no-print {
  display: none !important;
}

.toolbar,
.alert-container,
.modal,
.upload-modal {
  display: none !important;
}