/* 紙に出したときの様式。8枚すべてが読み込む1枚。
 *
 * 画面の書式は「検品票」を絵として真似たもので、地の色（--paper / --sheet）と
 * 濃紺の帯（--mat）でその見た目を作っている。紙に出すとその2つが逆に働く。
 * 濃紺の帯はページの1/4をインクで塗り潰し、地の色はざら紙のように沈む。
 * 印刷では絵を捨てて、真似ていた本物 — 白い紙・黒い墨・黒い罫 — に戻す。
 *
 * いちばん印刷される画面は注文完了（振込先の口座番号）である。
 * 迷ったらその1枚が読めるかで判断する。
 *
 * 色は #fff と #000 だけを使う。中間色はどの家庭用プリンタでも網点になり、
 * 細い罫と小さい等幅の字がつぶれる。
 */

@page{margin:14mm}

@media print{
  /* 地と文字はいっせいに白黒へ倒す。帯・札・見出しなど濃い地を持つ要素は
     8枚に散らばっていて、個別に拾うと必ず取りこぼす。まず全部を白黒にし、
     境目が消えて困る場所だけ、このあとで罫として描き直す */
  *,*::before,*::after{
    background:#fff !important;
    color:#000 !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }

  html{scroll-behavior:auto}
  body{font-size:10.5pt;line-height:1.7}

  /* 画面を操作するためのものは紙の上で働かない。
     帯の案内・脚部の索引・押しボタン・戻る導線はすべて落とす */
  /* .ar は質問の開閉を示す ＋ / −。紙の上では全部開いているので意味が無い */
  .skip,.band-nav,.band-cta,.foot-nav,.foot-bottom,.hero-btns,.cta,.ar,
  .go,.back,button,.opt-note,.line-btn,.nbox{display:none !important}

  /* 社章は SVG の fill 属性で色を持っているので、上の白黒化が効かない。
     地の色（--paper）で描いた側は白い紙の上で消える */
  #kmark rect{fill:#000 !important}

  /* 発行元の帯は残す。どの店の票かが紙の上から消えると、
     振込先だけが書かれた紙になってしまう */
  .band{position:static !important;border-bottom:2pt solid #000}
  .band .wrap{height:auto;padding-top:6pt;padding-bottom:6pt}

  /* 濃い地で区切っていた見出しを、罫で引き直す */
  .sec-head,.sec,.done-head,.opt-head{border-bottom:1.5pt solid #000}

  /* 票の枠と罫。地の濃淡で表していた欄の区切りを、すべて黒い線にする */
  table,th,td,.bank,.done-card,.frame,.nothave,.opt,.plate,.spec{
    border-color:#000 !important}
  .done-card{border:1.5pt solid #000}

  /* 検印は朱でなく黒い枠で押す。朱1色のためにカラー印刷を要求しない */
  .stamp{border:1.5pt solid #000 !important}

  /* 振込コード。画面では朱の地で目立たせていた。この紙を持って
     ATMや振込画面に向かう客が、書き写すのはこの4桁である。
     地色が消えたぶんを枠で補わないと、ただの数字として本文に紛れる */
  .code{border:1pt solid #000;padding:1pt 4pt;font-weight:700}

  .wrap,main.wrap,main.wrap.narrow{max-width:none;padding:0}

  /* 折りたたみと切替は、画面が有限だから要るもの。紙は捲れるので、
     隠れている中身が刷られないほうが困る。
     よくあるご質問は15件のうち1件しか開いておらず、そのままだと
     問だけが並んで答えが1つも出ない紙になる。
     特商法ページは「特商法」と「プライバシー」の2枚が切替で、
     どちらか一方しか刷られない。法定の表記なので両方載せる */
  /* 畳まれた details は display で開かない。中身は UA が ::details-content の
     content-visibility で隠しているので、そこを名指しで開ける。
     ⚠️ ::details-content は Chrome 131 / Safari 18.4 / Firefox 139 以降。
        それ以前のブラウザでは問だけが刷られる。JSを足せば全部で開けるが、
        紙に出すためだけに実行するコードは持たない判断（画面側は無傷）。
        いちばん刷られる注文完了の紙には details が無いので影響しない */
  details::details-content{content-visibility:visible !important}
  .tabs{display:none !important}
  .pane{display:block !important}
  /* 2枚を続けて刷るので、後ろの1枚は新しい紙から始める */
  .pane + .pane{break-before:page}

  /* 欄・行・段落の途中で改ページさせない。口座番号が2枚に割れると
     振込のときに読み違える。対照表は金額・差額・注記が1枚に揃って
     はじめて根拠として読めるので、割らせない */
  tr,li,.bank,.done-card,.opt,.plate,.qa,.nothave,
  .cmp-sheet{break-inside:avoid}
  h1,h2,h3{break-after:avoid}

  /* 紙にはリンクの先が無い。外部を参照している箇所だけ行き先を書き足す。
     内部リンク（/faq など）と、押しても意味が変わらないものは足さない */
  a[href^="http"]:not([href*="kumiba.com"])::after{
    content:" 〈" attr(href) "〉";
    font-size:8.5pt;
    word-break:break-all}

  /* 画面では読み込み後に現れる部分がある。印刷時に隠れたままだと
     白紙が出るので、表示されているものだけを対象にする（[hidden] は残す） */
  img{max-width:100%}
}