/* /jp/cmslite/assets/print.css
   ============================================
   Print Only（wkhtmltopdf / Browser Print）
   - screen.css が画面担当
   - ここは印刷専用（A4安定・はみ出し対策）
   ============================================ */

@page { size: A4; margin: 8mm; }

@media print {

  /* =========================
     Base（印刷だけ）
  ========================= */
  html, body {
    margin: 0;
    padding: 0;
    color: #111;
    font-family: "IPAexMincho","IPAMincho","Yu Mincho","游明朝","Hiragino Mincho ProN","MS Mincho",serif;
    font-size: 10.6px;     /* はみ出し殺し：見た目ほぼ同じ */
    line-height: 1.42;
  }

  /* 画面要素は消す（旧 literal を外部化） */
  .sheet-toolbar,
  .site-header,
  .site-footer {
    display: none !important;
  }

  /* SPカードも消す */
  .pack-sp { display: none !important; }
  .pack-pc { display: block !important; }

  /* 印刷は白背景 */
  .sheet { background: #fff; }

  /* A4枠を維持 */
  .a4{
    background: #fff;
    width: 190mm !important;
    min-height: 277mm !important;
    margin: 0 auto !important;
    padding: 5mm !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* 最後の保険 */
  }

  .doc-title{
    font-size: 21px !important;
    font-weight: 700;
    text-align: center;
    letter-spacing: .12em;
    margin: 3px 0 8px 0 !important;
  }

  .hr { border-top: 1px solid #222; margin: 6px 0 !important; }
  .center { text-align: center; }

  /* box微調整 */
  .box{
    padding: 6px 8px !important;
    page-break-inside: avoid;
    box-sizing: border-box;
  }
  .box h2{
    margin: 0 0 4px 0 !important;
    font-size: 11.2px;
    font-weight: 900;
    border-bottom: 1px solid #111;
    padding-bottom: 1px !important;
  }
  .mt { margin-top: 8px; }

  .bullets { margin: 4px 0 0 16px !important; padding: 0; }
  .bullets li { margin: 1px 0 !important; }
  .bullets.no-bullet { list-style: none; margin-left: 0; padding-left: 0; }

  /* テキスト折り返し保険 */
  .section-txt,
  .section-txt .txt,
  .box .txt{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-break: strict;
  }

  /* =========================
     Header：grid禁止→table固定
  ========================= */
  .head{
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  .head-photo{
    display: table-cell !important;
    width: 55mm !important;
    height: 45mm !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
    vertical-align: middle !important;
    text-align: center !important;
  }
  .head-photo img{
    max-width: 55mm !important;
    max-height: 45mm !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
  .head-info{
    display: table-cell !important;
    vertical-align: top !important;
    padding-left: 6mm !important;
  }

  /* =========================
     2カラム：grid禁止→table固定
  ========================= */
  .grid2{
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 4mm 0 !important;
  }
  .grid2 > .box{
    display: table-cell !important;
    vertical-align: top !important;
    width: 50% !important;
  }

  /* =========================
     栄養＋包装：table固定（包装優先）
  ========================= */
  .np-grid{
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 2mm 0 !important;
  }
  .np-grid > *{
    display: table-cell !important;
    vertical-align: top !important;
  }
  .np-grid .nutri{ width: 30% !important; }
  .np-grid .pack-wrap{ width: 70% !important; }

  /* 栄養は少し詰める */
  .box.nutri{ max-width: 42mm !important; padding: 5px 6px !important; }
  .nutri-head{ display:flex; align-items:baseline; gap:6px; margin-bottom:2px; }
  .box.nutri h2{
    display: inline-block;
    border-bottom: 1px solid #111;
    padding-bottom: 2px;
    margin-bottom: 0;
  }
  .nutri-note{ font-size: 9px; color:#555; margin:0; }
  .nutri-tbl{ font-size: 9px !important; border-collapse: collapse; white-space: nowrap; }
  .nutri-tbl th, .nutri-tbl td{
    border: 0.6px solid #999;
    padding: 2px 3px;
    text-align: center;
    vertical-align: middle;
  }
  .nutri-tbl th{ background:#f8f8f6; font-weight:800; }
  .nutri-tbl td{ font-weight:700; font-variant-numeric: tabular-nums; }
  .nutri-tbl td.num{ text-align:right; padding-right:4px; }

  /* =========================
     包装表：タイトル・th折返し
  ========================= */
  .pack-wrap{ padding: 6px 3px !important; page-break-inside: avoid; box-sizing: border-box; }

  .pack-title{
    text-align: center;
    font-weight: 900;
    font-size: 10.8px !important;
    line-height: 1.22 !important;
    border-bottom: 1px solid #222;
    margin: 0 0 6px 0;
    padding-bottom: 2px;

    white-space: normal !important;
    word-break: keep-all !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* transformは印刷で事故るので禁止 */
  .pack-pc{ transform: none !important; }

  .pack3-tbl{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 8.8px !important;
    max-width: 100% !important;
  }
  .pack3-tbl col.c-type { width: 10mm; }

  .pack3-tbl th,
  .pack3-tbl td{
    border: 0.8px solid #2b2b2b;
    padding: 2px 2px;
    line-height: 1.15;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;

    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-overflow: clip !important;
  }

  .pack3-tbl th{
    white-space: normal !important;  /* thは折返し */
    overflow: visible !important;
    line-height: 1.2 !important;
  }
  .pack3-tbl td{
    white-space: nowrap !important;  /* tdは数字保護 */
    overflow: hidden !important;
  }

  .pack3-tbl .pack3-head th{
    background: #f4f6f8;
    font-weight: 700;
    font-size: 8.2px !important;
    padding: 2px 1px;
  }

  .pack3-tbl .pack3-sub{
    background: #f7f7f7;
    font-weight: 700;
    font-size: 8.2px !important;
    padding: 2px 1px;
  }

  .pack3-tbl .pack3-type{
    background: #eef2f6;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 4px 1px;

    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .pack3-tbl .num{
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .pack3-tbl td.pack3-form{ padding-left: 3px; padding-right: 3px; }
  .pack3-tbl td.pack3-count{ font-size: 9px; padding: 2px 2px; }

  .pack3-tbl .mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;
    font-size: 8.8px;
    letter-spacing: 0.1px;
  }

  .pack-foot{
    margin-top: 6px;
    font-size: 10px;
    color: #555;
  }

  /* =========================
     任意セクション：float固定（つっかえ防止）
  ========================= */
  .section-body{ display:block !important; }

  .section-body.pos-right .section-img,
  .section-body.pos-left  .section-img{
    float: left !important;
    width: 30mm !important;
    margin-right: 4mm !important;
    margin-left: 0 !important;
    margin-bottom: 2mm !important;
    overflow: visible !important;
  }

  .section-body.pos-right .section-img img,
  .section-body.pos-left  .section-img img{
    width: 30mm !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .section-txt{ overflow:hidden !important; }

  .box.section::after{
    content:"";
    display:block;
    clear:both;
  }

  /* table 横はみ出し保険 */
  table{ max-width: 100% !important; }
}