/* ========================================
   ICT教育支援アプリ - 印刷・PDF対応CSS（統合版）
   styles/print.css
   ======================================== */

@media print {
  /* === 基本設定 === */
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* === 印刷に不要な要素を非表示 === */
  .app-header,
  .progress-section,
  .bottom-navigation,
  .floating-actions,
  .fab,
  .modal,
  .toast,
  .overlay,
  .header-menu,
  .hamburger-btn,
  #enhancedHamburgerBtn,
  .hamburger-menu,
  .menu-overlay,
  .menu-content,
  #enhancedHamburgerMenu,
  #enhancedMenuOverlay,
  .menu-item,
  .menu-icon,
  .menu-text,
  .modal-overlay,
  .backdrop,
  .user-type-display,
  .overall-progress,
  .last-study-info,
  .nav-button,
  .back-button,
  .next-button,
  .continue-button,
  .bookmark-button,
  .memo-button,
  .search-button,
  .theme-button,
  .settings-button,
  .speech-control-panel {
    display: none !important;
    visibility: hidden !important;
  }

  /* === ページ設定 === */
  @page {
    size: A4;
    margin: 8mm 6mm; /* 既存の設定を調整 */
  }
  
  @page :first {
    margin-top: 8mm;
  }
  
  @page :left {
    margin-left: 8mm;
  }
  
  @page :right {
    margin-right: 8mm;
  }

  /* === 基本レイアウトの最適化 === */
  html, body {
    background: white !important;
    color: black !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    font-size: 9pt !important; /* 既存より少し小さく */
    line-height: 1.3 !important;
  }

  .main-content {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* === 🆕 3列グリッドレイアウトの最適化（確実版） === */
  
  /* デフォルト：年齢別カードの3列レイアウト */
  .age-showcase {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6pt !important;
    width: 100% !important;
    margin: 6pt 0 !important;
  }

  /* 🔥 nth-child による確実な判定方法 */
  
  /* 2個の子要素しかない場合の判定と調整 */
  .age-showcase > :first-child:nth-last-child(2) {
    /* 2個目の要素に対する親の設定を変更するトリガー */
    grid-column: 1 / 2 !important;
  }
  
  .age-showcase > :first-child:nth-last-child(2) ~ * {
    grid-column: 2 / 3 !important;
  }

  /* 2個の子要素の場合に親グリッドを2列に変更 */
  .age-showcase:has(> :first-child:nth-last-child(2)) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  /* フォールバック：CSSカウンターを使用した方法 */
  .age-showcase {
    counter-reset: items;
  }
  
  .age-showcase > * {
    counter-increment: items;
  }
  
  .age-showcase > :last-child::after {
    content: counter(items);
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* より確実な方法：疑似クラスの組み合わせ */
  .age-showcase > :nth-child(2):last-child {
    /* 2番目が最後の要素 = 合計2個 */
  }

  /* 2個の要素がある age-showcase の強制2列化 */
  .age-showcase:not(:has(> :nth-child(3))) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  /* さらに確実な方法：CSS Grid の重複定義で優先度アップ */
  @supports selector(:has(*)) {
    .age-showcase:has(> :nth-child(2):last-child) {
      grid-template-columns: 1fr 1fr !important !important;
      gap: 8pt !important !important;
    }
  }

  /* @supports が使えない場合の代替 */
  @media print {
    .age-showcase > :nth-child(2):last-child {
      width: auto !important;
    }
    
    .age-showcase:has(> :nth-child(2):last-child) {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8pt !important;
      grid-auto-rows: auto !important;
    }
  }

  /* 活動カードの3列レイアウト */
  .activity-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6pt !important;
    width: 100% !important;
    margin: 6pt 0 !important;
  }

  /* 目的グリッドの3列レイアウト */
  .purpose-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6pt !important;
    width: 100% !important;
    margin: 6pt 0 !important;
  }

  /* その他のグリッド要素（自動判定対応） */
  .rule-categories,
  .classroom-rule-types,
  .success-tips {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6pt !important;
    width: 100% !important;
    margin: 6pt 0 !important;
  }

  /* rule-categories の自動判定 */
  .rule-categories:has(> :first-child:nth-last-child(2)) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  .rule-categories:not(:has(> :nth-child(3))) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  /* 🔥 4つの要素がある場合も2列レイアウト */
  .rule-categories:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  /* classroom-rule-types の自動判定 */
  .classroom-rule-types:has(> :first-child:nth-last-child(2)) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  .classroom-rule-types:not(:has(> :nth-child(3))) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  /* 🔥 4つの要素がある場合も2列レイアウト */
  .classroom-rule-types:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  /* success-tips の自動判定 */
  .success-tips:has(> :first-child:nth-last-child(2)) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  .success-tips:not(:has(> :nth-child(3))) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  /* 🔥 4つの要素がある場合も2列レイアウト */
  .success-tips:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  /* 2列グリッドの場合 */
  .grid-2-cols,
  .expression-methods {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

  /* === 🆕 カード要素の詳細調整 === */
  .age-card,
  .development-story,
  .activity-card,
  .rule-category,
  .classroom-rule,
  .tip-item,
  .checklist,
  .purpose-card,
  .expression-method {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin: 0 !important;
    padding: 6pt !important;
    transform: none !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    min-height: auto !important;
    width: 100% !important;
    font-size: 8pt !important;
    line-height: 1.2 !important;
  }

  /* === 🆕 カード内タイポグラフィ === */
  .age-card h3,
  .activity-card h3,
  .purpose-card h3,
  .expression-method h3,
  .age-card .card-title,
  .activity-card .card-title,
  .purpose-card .card-title,
  .expression-method .card-title {
    font-size: 9pt !important;
    margin: 0 0 3pt 0 !important;
    padding: 0 !important;
    font-weight: bold !important;
  }

  .age-card ul,
  .activity-card ul,
  .purpose-card ul,
  .expression-method ul,
  .age-card ol,
  .activity-card ol,
  .purpose-card ol,
  .expression-method ol {
    margin: 3pt 0 !important;
    padding-left: 8pt !important;
    font-size: 7pt !important;
    line-height: 1.1 !important;
  }

  .age-card li,
  .activity-card li,
  .purpose-card li,
  .expression-method li {
    margin: 1pt 0 !important;
    font-size: 7pt !important;
  }

  .age-card p,
  .activity-card p,
  .purpose-card p,
  .expression-method p {
    margin: 2pt 0 !important;
    font-size: 7pt !important;
    line-height: 1.1 !important;
  }

  /* === 章ヘッダーの最適化 === */
  .chapter-header {
    margin: 0 0 12pt 0 !important; /* 既存設定を調整 */
    padding: 12pt !important;
    page-break-after: auto !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    position: relative !important;
  }

  /* 章ヘッダー重複防止 */
  .chapter-header:not(:first-child) {
    display: none !important;
  }
  
  body.printing .chapter-header {
    position: static !important;
    break-after: auto !important;
  }

  /* === フォントサイズの最適化 === */
  .chapter-title {
    font-size: 14pt !important; /* 既存より少し小さく */
    color: white !important;
    margin-bottom: 4pt !important;
  }

  .chapter-subtitle {
    font-size: 10pt !important;
    color: white !important;
    margin-top: 0 !important;
  }

  .section-title {
    font-size: 11pt !important; /* 既存より少し小さく */
    margin: 6pt 0 4pt 0 !important;
  }

  .content-heading {
    font-size: 10pt !important;
    margin: 5pt 0 3pt 0 !important;
  }

  .content-h4 {
    font-size: 9pt !important;
    margin: 4pt 0 2pt 0 !important;
  }

  /* === 🔧 セクションブロックの改ページ最適化 === */
  .section-block {
    margin: 8pt 0 !important;
    padding: 8pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    border: 1px solid #ddd !important;
    orphans: 3 !important;
    widows: 3 !important;
    
    /* セクション全体を一つのブロックとして扱う */
    display: block !important;
    overflow: visible !important;
  }

  /* セクション内の要素グループの改ページ制御 */
  .section-block > * {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* セクション内のグリッド要素の改ページ制御 */
  .section-block .age-showcase,
  .section-block .activity-grid,
  .section-block .purpose-grid,
  .section-block .expression-methods,
  .section-block .rule-categories {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 6pt 0 !important;
  }

  /* セクション内のストーリー・事例の改ページ制御 */
  .section-block .development-story,
  .section-block .example-story {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 6pt 0 !important;
  }

  /* セクション内のチェックリストの改ページ制御 */
  .section-block .checklist {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 6pt 0 !important;
  }

  /* セクション内のkey-term要素の改ページ制御 */
  .section-block .key-term,
  .section-block .personalized-box {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 6pt 0 !important;
  }

  .section-block:first-of-type {
    page-break-before: avoid !important;
    margin-top: 4pt !important;
  }

  .section-block:last-of-type {
    margin-bottom: 0 !important;
  }

  /* === パーソナライズボックスの最適化 === */
  .personalized-box {
    margin: 6pt 0 !important; /* 既存設定を調整 */
    padding: 6pt 10pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    orphans: 2 !important;
    widows: 2 !important;
  }

  .personalized-box.parent {
    background: #e8f5e8 !important;
    border-left: 3pt solid #4caf50 !important;
  }

  .personalized-box.educator {
    background: #fff8f0 !important;
    border-left: 3pt solid #ff9800 !important;
  }

  /* === クイズセクション最適化 === */
  .quiz-section {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 8pt 0 !important; /* 既存設定を調整 */
    padding: 8pt !important;
    border: 1px solid #ccc !important;
  }

  .quiz-option {
    margin: 4pt 0 !important; /* 既存設定を調整 */
    padding: 3pt !important;
    page-break-inside: avoid !important;
  }

  /* === 🔧 改ページ制御の強化 === */
  h1, h2, h3, h4, .section-title, .content-heading {
    page-break-after: avoid !important;
    break-after: avoid !important;
    orphans: 3 !important;
    
    /* タイトル直後の要素と一緒に保持 */
    page-break-before: auto !important;
  }

  /* タイトル + 直後のコンテンツをセットで保持 */
  .section-title + *,
  .content-heading + *,
  h2 + *,
  h3 + *,
  h4 + * {
    page-break-before: avoid !important;
    break-before: avoid !important;
  }

  /* グリッド要素の改ページ制御強化 */
  .age-showcase,
  .activity-grid,
  .purpose-grid,
  .expression-methods,
  .rule-categories,
  .classroom-rule-types,
  .success-tips {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-before: auto !important;
    page-break-after: auto !important;
  }

  /* コンテンツブロックの改ページ制御 */
  .development-story,
  .example-story,
  .checklist,
  .key-term,
  .personalized-box,
  .quiz-section {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    orphans: 2 !important;
    widows: 2 !important;
  }

  /* === リスト要素の最適化 === */
  .bullet-list {
    margin: 4pt 0 !important; /* 既存設定を調整 */
    padding-left: 10pt !important;
  }

  .bullet-list li {
    margin: 2pt 0 !important;
    line-height: 1.2 !important;
    page-break-inside: avoid !important;
  }

  /* === 🚫 レスポンシブ設定の無効化 === */
  .age-showcase,
  .activity-grid,
  .rule-categories,
  .classroom-rule-types,
  .success-tips {
    grid-template-columns: 1fr 1fr 1fr !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* === 余白の最小化 === */
  .main-content > *:last-child,
  .section-block:last-child {
    margin-bottom: 0 !important;
  }

  /* === 印刷品質向上・文字の鮮明化 === */
  body, p, div, span {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /* === テキストの折り返し制御 === */
  .age-card,
  .activity-card,
  .purpose-card,
  .expression-method {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}