/* ============================================================
   印刷用スタイル（A4 縦）

   ねらい：インターネットを使わない方に渡す紙の資料として、
   ブラウザから「印刷」するだけで読みやすい1枚ものができること。

   ・画面用の飾り（固定ヘッダー・メニュー・ボタン・動画枠）は落とす
   ・本文は黒文字・大きめの字送りにして、背景色に頼らず読めるようにする
   ・紙面の先頭にサイト名とQRコード、末尾に問い合わせ先を入れる
   ・QRコードはページのURLからその場で生成されるので、
     ページを増やしても何もしなくてよい（partials/print-header.html.twig）

   custom.css（priority 80）より後に読ませているので !important はほぼ不要。
   ============================================================ */

/* 画面では印刷用のブロックを出さない */
.kb-print-head,
.kb-print-foot,
.ls-panel__title-print,
.ls-print-note {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    /* 店舗一覧が1枚に収まるところまで詰めた値。
       これ以上狭めるとプリンタの印字できない縁にかかる恐れがある。 */
    margin: 12mm 12mm 13mm;
  }

  /* ---------- 配色 ----------
     端末がダークモードでも紙は白地・黒文字にする。
     ダーク側の変数を明るい値に戻すことで、個別の指定を増やさずに済む。 */
  :root,
  :root[data-theme='light'],
  :root[data-theme='dark'] {
    --q2-accent: #06707d;
    --q2-accent-contrast: #ffffff;
    --q2-link: #06707d;

    --q2-bg: #ffffff;
    --q2-bg-elev: #ffffff;
    --q2-bg-muted: #ffffff;

    --q2-text: #000000;
    --q2-text-strong: #000000;
    --q2-text-muted: #333333;

    --q2-border-ring: #999999;
    --q2-border-strong: #666666;
    --q2-divider: #bbbbbb;

    --q2-shadow-card: none;
    --q2-shadow-raised: none;

    --kb-open: #06707d;
    --kb-busy: #555555;
    --kb-warn: #8a5200;
  }

  html,
  body {
    background: #fff;
    color: #000;
    overflow: visible; /* 画面用の overflow-x:hidden は紙面を切ってしまう */
  }

  body {
    /* 高齢の方にも読みやすいよう、画面より一回り大きめの本文にする */
    font-size: 11pt;
    line-height: 1.75;
    padding-top: 0;

    /* 画面用の sticky-footer（body を flex にして 100vh まで伸ばす）は、
       紙では最後に空白のページを増やす原因になるので解除する */
    display: block;
    min-height: 0;
  }

  /* ---------- 画面専用の要素を落とす ---------- */
  #header,
  .mobile-menu,
  .mobile-container,
  .overlay,
  #footer,
  .theme-toggle,
  .login-status-wrapper,
  .kb-actions,
  .btn,
  .kb-video,
  .kb-machine__back,
  .kb-store-card__foot,
  .breadcrumbs {
    display: none !important;
  }

  /* ---------- 骨格をまっすぐにする ---------- */
  #page-wrapper {
    display: block;
    min-height: 0;
  }

  main#start,
  .section,
  #body-wrapper {
    padding: 0;
    margin: 0;
    background: none;
  }

  .container {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  /* content-item の白カード（影・角丸・余白）は紙では不要。
     quark2 は #body-wrapper > .container > .content-item で指定しているので、
     こちらも同じ強さの書き方にする。 */
  #body-wrapper > .container > .content-item,
  .content-item,
  .kb-store,
  .kb-equipment {
    max-width: none;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  /* ---------- 紙面のヘッダー ----------
     区切り線は引かず、ブランドとQRコードのすぐ下から本文を詰めて始める。
     URLと印刷日はブラウザ側の印刷ヘッダー・フッターに任せ、ここでは出さない。 */
  .kb-print-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8mm;
    margin-bottom: 3mm;
  }

  .kb-print-head__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 2.5mm;
    padding-top: 1mm;
  }

  .kb-print-head__mark {
    font-size: 13pt;
  }

  .kb-print-head__title {
    font-size: 15pt;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .kb-print-head__owner {
    width: 100%;
    font-size: 9pt;
    color: #333;
  }

  .kb-print-qr {
    flex: none;
    text-align: center;
    width: 30mm;
  }

  .kb-print-qr__code {
    /* 24mm あれば1コマ 0.6mm 前後になり、スマートフォンで問題なく読める */
    width: 24mm;
    height: 24mm;
    margin: 0 auto;
  }

  .kb-print-qr__code svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ---------- 紙面のフッター ---------- */
  .kb-print-foot {
    display: block;
    margin-top: 5mm;
    padding-top: 2.5mm;
    border-top: 0.8pt solid #666;
    font-size: 9pt;
    color: #222;
    break-inside: avoid;
  }

  .kb-print-foot p {
    margin: 0 0 0.8mm;
    color: #222;
  }

  /* 「お問い合わせ ○○ 電話 ××× （受付時間 ×××）」の行。
     本文の目立つ場所ではなく、末尾の補足情報なので二回り小さくする。 */
  .kb-print-foot__contact {
    font-size: 7pt;
  }

  .kb-print-foot__contact strong {
    margin-right: 1.5mm;
  }

  .kb-print-foot__meta {
    font-size: 8pt;
    color: #444;
    display: flex;
    justify-content: space-between;
    gap: 4mm;
  }

  /* ---------- 見出しと本文 ---------- */
  h1 {
    font-size: 17pt;
    margin: 0 0 2.5mm;
  }

  h2 {
    font-size: 13.5pt;
    margin: 7mm 0 2mm;
  }

  h3 {
    font-size: 11.5pt;
    margin: 5mm 0 1.5mm;
  }

  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
    break-inside: avoid;
    color: #000;
  }

  /* 見出しの行頭マークは紙でも残す（行内に入るので余白を増やさない）。
     背景色を刷らない設定でも消えないよう、文字色で描いている。 */
  h2::before {
    color: #000;
  }

  /* h1 直後の h2 も普通の節見出しとして扱う（custom.css と同じ考え方）。
     custom.css 側の指定に勝てるよう、同じ詳細度で書く。 */
  #body-wrapper .content-item h1 + h2 {
    margin-top: 5mm;
    color: #000;
  }

  p,
  li,
  dd,
  dt,
  td,
  th {
    color: #000;
    orphans: 3;
    widows: 3;
  }

  /* 紙では下線つきのリンクだらけになると読みにくいので、本文と同じ見た目にする。
     行き先はヘッダーのQRコードとURLで分かる。 */
  a,
  a:visited {
    color: #000;
    text-decoration: none;
  }

  img,
  figure,
  table,
  dl,
  ul,
  ol {
    break-inside: avoid;
  }

  img {
    max-width: 100%;
  }

  /* ---------- 表 ---------- */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
  }

  th,
  td {
    border: 0.5pt solid #999;
    padding: 1.2mm 2mm;
  }

  th {
    background: none;
    font-weight: 700;
  }

  /* ---------- 使い方ページの手順カード ----------
     背景色を印刷しない設定でも番号が消えないよう、丸は枠線で描く。 */
  .kb-steps,
  .kb-guide #body-wrapper .content-item > ol {
    gap: 3mm;
    margin-top: 4mm;
  }

  .kb-steps > li,
  .kb-guide #body-wrapper .content-item > ol > li {
    background: none;
    border: 0.8pt solid #666;
    border-radius: 2mm;
    box-shadow: none;
    padding: 3mm 3mm 3mm 13mm;
    break-inside: avoid;
  }

  .kb-steps > li::before,
  .kb-guide #body-wrapper .content-item > ol > li::before {
    left: 3mm;
    top: 3mm;
    width: 7mm;
    height: 7mm;
    background: none;
    color: #000;
    border: 1pt solid #000;
    font-size: 10pt;
  }

  /* ---------- ICカード特典パネル ---------- */
  .kb-otoku {
    padding: 4mm;
    margin: 5mm 0;
    border: 1pt solid #000;
    border-radius: 2mm;
    break-inside: avoid;
  }

  .kb-otoku__coin,
  .kb-otoku__no,
  .kb-otoku__chip,
  .kb-otoku__mark {
    /* 色地に白抜きの部品は、背景を刷らない設定だと消えてしまう */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ---------- タグ（所在地・立地） ---------- */
  .kb-facilities {
    margin-top: 0.8mm;
    gap: 1mm;
  }

  .kb-facility {
    border: 0.4pt solid #666;
    background: none;
    color: #000;
    font-size: 7.5pt;
    line-height: 1.5;
    padding: 0.2mm 1.5mm;
  }

  .kb-facility i {
    color: #000;
  }

  /* ---------- 店舗一覧 ----------
     写真は縦を食うわりに情報が少ないので落とし、A4 を2段組みにして
     店舗をなるべく少ない枚数に収める。 */
  .kb-store-group + .kb-store-group {
    margin-top: 4mm;
  }

  .kb-store-group__title {
    margin: 0;
    padding-bottom: 0.8mm;
    font-size: 12pt;
    border-bottom: 1pt solid #000;
    break-after: avoid;
  }

  .kb-store-group__count {
    font-size: 9pt;
    color: #333;
  }

  .kb-store-group .kb-store-grid,
  .kb-store-grid {
    display: block;
    columns: 2;
    column-gap: 8mm;
    margin-top: 2mm;
    border: 0;
    box-shadow: none;
  }

  .kb-store-card {
    display: block;
    break-inside: avoid;
    border: 0;
    border-bottom: 0.5pt solid #bbb;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 2mm;
    padding-bottom: 1.5mm;
  }

  .kb-store-card__media {
    display: none;
  }

  .kb-store-card__body {
    padding: 0;
    gap: 0.5mm;
  }

  .kb-store-card__name {
    font-size: 10.5pt;
    margin-bottom: 0;
  }

  .kb-store-card__meta {
    font-size: 8.5pt;
    line-height: 1.45;
    color: #000;
  }

  .kb-store-card__telnote {
    font-size: 8pt;
    color: #333;
  }

  /* ---------- 店舗ページ ---------- */
  .kb-store-hero {
    float: right;
    width: 55mm;
    margin: 0 0 4mm 5mm;
  }

  .kb-store-hero img {
    width: 100%;
    border: 0.5pt solid #999;
  }

  .kb-store-info {
    max-width: none;
  }

  .kb-info {
    break-inside: avoid;
  }

  .kb-info dt {
    color: #000;
    font-size: 9.5pt;
  }

  .kb-info dd {
    color: #000;
  }

  /* ---------- 稼働状況 ----------
     空き状況は刻々と変わるため紙には載せない。
     どんな機械があるかは役に立つので、機種の一覧だけ残す。 */
  .ls-summary,
  .ls-item__state,
  .ls-foot,
  .ls-panel__title-screen {
    display: none;
  }

  .ls-panel__title-print {
    display: inline;
  }

  .ls-panel {
    clear: both;
    break-inside: avoid;
  }

  .ls {
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .ls-list {
    display: block;
    columns: 2;
    column-gap: 8mm;
    border: 0;
    margin: 3mm 0 0;
    padding: 0;
    background: none;
  }

  /* 1台1行。号機・機種・容量を横並びにして紙面を詰める */
  .ls-item,
  .ls-item.is-free,
  .ls-item:last-child {
    display: block;
    break-inside: avoid;
    border: 0;
    border-bottom: 0.4pt solid #ccc;
    padding: 0.8mm 0;
    background: none;
    font-size: 9.5pt;
  }

  .ls-item__no,
  .ls-item__unit,
  .ls-item__pos,
  .ls-item__type,
  .ls-item__cap {
    display: inline;
    color: #000;
  }

  .ls-item__no {
    font-size: 10pt;
    font-weight: 700;
  }

  .ls-item__pos::before,
  .ls-item__type::before,
  .ls-item__cap::before {
    content: ' ';
  }

  .ls-item__type a {
    color: #000;
    border-bottom: 0;
    text-decoration: none;
  }

  .ls-print-note {
    display: block;
    margin: 2mm 0 0;
    font-size: 8.5pt;
    color: #333;
  }

  .ls-unavailable {
    display: none;
  }

  /* ---------- 機材ページ ---------- */
  .kb-machine__photo {
    float: right;
    width: 65mm;
    margin: 0 0 4mm 5mm;
  }

  .kb-machine__photo img {
    width: 100%;
    border: 0.5pt solid #999;
  }

  .kb-machine__head {
    break-inside: avoid;
  }

  .kb-machine__icon {
    color: #000;
  }

  .kb-machine__stores {
    columns: 2;
    column-gap: 8mm;
  }

  .kb-machine__stores a {
    border: 0;
    background: none;
    padding: 0;
  }

  /* ---------- 機材一覧 ---------- */
  .kb-eq-grid {
    display: block;
    columns: 2;
    column-gap: 8mm;
  }

  .kb-eq-card {
    break-inside: avoid;
    border: 0.6pt solid #999;
    border-radius: 2mm;
    box-shadow: none;
    background: none;
    margin-bottom: 4mm;
    padding: 3mm;
  }

  .kb-eq-card__chevron {
    display: none;
  }

  /* ---------- 法的表示 ---------- */
  .kb-legal #body-wrapper .content-item h2 {
    font-size: 12pt;
  }

  /* ---------- トップページ ---------- */
  .modular-hero {
    padding: 0;
    background: none !important;
    min-height: 0;
  }

  .modular-hero h1 {
    color: #000;
  }

  /* ---------- 注意書き ---------- */
  .kb-note {
    border: 0.8pt solid #666;
    background: none;
    break-inside: avoid;
    padding: 3mm;
  }

  /* 未確定箇所のマーカーは紙でも目立たせる（社内確認用） */
  mark.kb-todo {
    background: none;
    border: 0.6pt solid #000;
    padding: 0 1mm;
    color: #000;
  }
}