/* ============================================================
   打印样式。
   ------------------------------------------------------------
   为什么值得做：
   打印是一个**几乎没人会去看、但确实存在**的表面。
   而这个站的整个设定就是"一个真实运营的系统"——
   真实系统是有打印样式的（顾客要打宠物资料、员工要打登记表）。
   有，本身就是真实感的一部分。

   而它同时给了一样别处给不了的东西：
   **纸上的内容和屏幕上的不一样。**
   屏幕上你可以说服自己是显示问题、是缓存、是我看错了。
   打出来的那张纸不会自我修正 —— 它就躺在你手上。

   分寸：
   · 打印件必须首先是**一份能用的资料** —— 去掉导航、去掉按钮、黑白可读。
     如果它只是个恶作剧，那就不再是"一个真实系统"了。
   · 多出来的东西一律走**页脚小字**：真实系统的页脚就是印这些的
     （打印时间、操作员、文档编号）。它不喊，它只是在那儿。
   ============================================================ */
@media print {

  /* —— 先让它是一份正经资料 —— */
  html { filter: none !important; background: #fff !important; }
  body { background: #fff !important; color: #000 !important; }
  body::after, body::before { display: none !important; }   /* 颗粒 / 暗角 / 低语 */

  nav, #header, #gnavi, .header-menu, .topic-path,
  .foot, .nav, #debug-panel, .zoomlink, .cta, .fav,
  .idx-main-bnr, .h-star, .h-mail, .h-contact,
  button, .go, .cam-btn { display: none !important; }

  a { color: #000 !important; text-decoration: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }

  img { max-width: 60mm !important; height: auto !important;
        filter: grayscale(1) contrast(1.1) !important; }

  .wrap, #main, #content { max-width: none !important; margin: 0 !important;
                           padding: 0 !important; }

  /* —— 打印件页脚 —— */
  /* 真实系统打出来的东西都有这么一行。这里也有。
     它印的东西**比屏幕上多一点点**，而且没有任何地方解释过为什么。 */
  #content::after, .wrap::after {
    content: "本页由 暖光宠物 内部系统生成 ｜ 打印件仅供核对，不作为凭证 ｜ 文档编号 NG-03-14";
    display: block;
    margin-top: 14mm;
    padding-top: 3mm;
    border-top: 1px solid #000;
    font-size: 9pt;
    color: #000;
    letter-spacing: .5px;
  }

  /* 腐化 3 级起，页脚多一行。
     这行只在纸上出现 —— 屏幕上从头到尾没有它。 */
  html[data-dread="3"] #content::after,
  html[data-dread="4"] #content::after,
  html[data-dread="5"] #content::after,
  html[data-dread="6"] #content::after,
  html[data-dread="3"] .wrap::after,
  html[data-dread="4"] .wrap::after,
  html[data-dread="5"] .wrap::after,
  html[data-dread="6"] .wrap::after {
    content: "本页由 暖光宠物 内部系统生成 ｜ 打印件仅供核对，不作为凭证 ｜ 文档编号 NG-03-14"
             "\A本次打印为该文档的第 2 次打印。第 1 次的打印时间与本次相同。";
    white-space: pre-line;
  }

  /* 详情页：纸上比屏幕上多一栏。
     屏幕上宠物资料只有品种/生日/编号，纸上还有一栏「登记状态」——
     一个在整个网站上从来没出现过的字段。 */
  .print-only { display: block !important; }
}

/* 注意：这个文件是用 `media="print"` 挂上去的，
   所以**屏幕上它整个不生效** —— 在这里写 `.print-only{display:none}` 是没用的。
   屏幕侧的隐藏规则必须写在常规样式表里（见 zh.css）。
   我第一版就写在这儿，于是「只该在纸上出现」的那一栏在屏幕上也露着。 */