/*
  テンプレート集の印刷用のページ（/templates/print/）だけが読む、印刷の形（A4 縦）。
  @page はページを選べないので、ほかのページの印刷を変えないよう、このファイルを印刷用のページだけで読む（media="print"）。
  画面で見たときの形は style.css の「足した部品（templates）」の節。PDF は python3 tools/build_templates_pdf.py

  - このファイルは style.css より先に読まれるので、どの決まりも body.tpl-print-page から書いて、style.css の決まりより強くする
  - 1 ページ目（表紙）は余白なしで紙いっぱい。2 ページ目からは余白をとり、下に冊子の名前とページの数を出す
  - 大きな節のうち、使い方・配信の文例・出典は、新しいページから始める。あいさつ・自動の流れ・リッチメニューは、前の節の終わりのページに続けて置く
    （前の節の終わりのページが大きく空かないように。2026-10-19 に、12 ページ目が上の 4 分の 1 だけ、24 ページ目が型 1 つだけになっていた）。
    続けて置く節は見出しの上をあけ、見出し（break-after: avoid）だけがページの下に残らないようにする
  - 配信の文例とあいさつは、雑誌のように 2 段に流す（文例の途中で段が変わってもよい。吹き出し・題・ひとことの途中では切らない）
  - 自動の流れの型とリッチメニューの例は、1 つずつページの途中で切らない
  - 暗い表示で印刷しても、明るい色で刷る
*/
@page {
  size: 210mm 297mm;
  margin: 11mm 11mm 14mm;

  @bottom-left {
    content: "つなぎ帳 テンプレート集";
    color: #6e6e73;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", sans-serif;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  @bottom-right {
    content: counter(page) " / " counter(pages);
    color: #6e6e73;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", sans-serif;
    font-size: 7pt;
    font-variant-numeric: tabular-nums;
  }
}

@page :first {
  margin: 0;

  @bottom-left { content: none; }
  @bottom-right { content: none; }
}

/* ================================================================== 色（明るい色で刷る） */
html:root { color-scheme: light; }
body.tpl-print-page {
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --bg-elev: #ffffff;
  --bg-sunk: #fbfbfd;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #6e6e73;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --brand: #2f54c8;
  --brand-ink: #2a4bb3;
  --brand-deep: #1f3a8f;
  --brand-soft: #eef2fd;
  --violet: #7a55e6;
  --violet-soft: #f3effd;
  --gold: #e9a23b;
  --gold-ink: #8a5a0b;
  --gold-soft: #fdf3e2;
  --teal: #0f8f7e;
  --teal-soft: #e3f5f2;
  --rose: #d6456b;
  --rose-soft: #fdecf1;
  --grad: linear-gradient(100deg, #2f54c8 0%, #7a55e6 48%, #e9a23b 100%);
  --on-brand: #ffffff;
  --shadow-s: none;
  --shadow-m: none;
  --shadow-l: none;
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: "IPAPGothic", "IPAPゴシック", var(--font);
  font-size: 11px;
  line-height: 1.6;
}
/* 字体: PDF を作る Linux では IPA の字体を使う（Noto Sans CJK で作ると、PDF から写した字の一部が形の同じ別の字（康熙部首。例:「文」が U+2F42）に
   なるため。2026-10-19 に確かめた）。IPA の字体が無いところ（ほかの OS のブラウザーで印刷するときなど）は、いつもの字体になる */
body.tpl-print-page .tpl-var,
body.tpl-print-page .tpl-mini-bubs b { font-family: "IPAGothic", "IPAゴシック", var(--mono); }
body.tpl-print-page * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ================================================================== 印刷しないもの */
body.tpl-print-page .skip,
body.tpl-print-page .ribbon,
body.tpl-print-page .gnav,
body.tpl-print-page .gfoot,
body.tpl-print-page .tpl-pnote,
body.tpl-print-page .tpl-talk-h { display: none !important; }
body.tpl-print-page main { margin: 0; padding: 0; }
body.tpl-print-page .tpl-book { padding: 0; }
body.tpl-print-page .wrap { width: auto; max-width: none; margin: 0; padding: 0; }
body.tpl-print-page a { color: inherit; text-decoration: none; }

/* ================================================================== 表紙（1 ページ目・紙いっぱい） */
body.tpl-print-page .tpl-pcover {
  box-sizing: border-box;
  width: 210mm;
  height: 297mm;
  min-height: 0;
  margin: 0;
  padding: 24mm 20mm 16mm;
  gap: 0;
  overflow: hidden;
  border-radius: 0;
  break-after: page;
}
body.tpl-print-page .tpl-pcover-brand { gap: 4mm; font-size: 20px; }
body.tpl-print-page .tpl-pcover-brand svg { width: 15mm; height: 15mm; }
body.tpl-print-page .tpl-pcover-main { margin-top: auto; margin-bottom: auto; }
body.tpl-print-page .tpl-pcover-k { font-size: 20px; }
body.tpl-print-page .tpl-pcover h1 { margin-top: 5mm; font-size: 38px; line-height: 1.3; }
body.tpl-print-page .tpl-pcover-sub { max-width: none; margin-top: 8mm; font-size: 14px; line-height: 1.85; }
body.tpl-print-page .tpl-pcover-meta { gap: 3mm; margin-top: 10mm; }
body.tpl-print-page .tpl-pcover-meta li { padding: 1.5mm 4.5mm; font-size: 12.5px; }
body.tpl-print-page .tpl-pcover-foot { font-size: 10px; line-height: 1.7; }

/* ================================================================== 大きな節 */
body.tpl-print-page .tpl-psec { margin: 0; break-before: page; }
/* あいさつ・自動の流れ・リッチメニューは、前の節に続けて置く（新しいページから始めない。上の説明） */
body.tpl-print-page #p-greetings,
body.tpl-print-page #p-workflows,
body.tpl-print-page #p-richmenus { margin-top: 9mm; break-before: auto; }
/* 見出しは字の流れで並べる（PDF のしおりが「配信の文例 58 本」のように、名前と数のあいだをあけて読めるように） */
body.tpl-print-page .tpl-ph2 { display: block; padding-bottom: 2.2mm; border-bottom: 0.6mm solid var(--ink); font-size: 22px; line-height: 1.3; break-after: avoid; }
body.tpl-print-page .tpl-ph2 small { margin-left: 2mm; font-size: 11.5px; }
body.tpl-print-page .tpl-plead { max-width: none; margin-top: 2.6mm; font-size: 10.5px; line-height: 1.7; }
body.tpl-print-page .tpl-pcat { gap: 2.2mm; margin: 5mm 0 2.6mm; padding: 1.5mm 2.6mm; border-radius: 2mm; background: var(--tc-soft); color: var(--tc-ink); font-size: 13.5px; line-height: 1.35; break-after: avoid; break-inside: avoid; }
body.tpl-print-page .tpl-pcols > .tpl-pcat:first-child { margin-top: 0; }
body.tpl-print-page .tpl-pcat svg { width: 5mm; height: 5mm; }
body.tpl-print-page .tpl-pcat small { margin-left: 1mm; color: var(--tc-ink); font-size: 10px; opacity: 0.85; }
body.tpl-print-page .tpl-pnote2 { margin-top: 2.4mm; font-size: 10px; line-height: 1.65; }

/* ================================================================== 使い方 */
body.tpl-print-page .tpl-phow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8mm; }
body.tpl-print-page .tpl-phow .tpl-pcat:first-child { margin-top: 5mm; }
body.tpl-print-page .tpl-list { gap: 1mm; }
body.tpl-print-page .tpl-list li { padding-left: 3.6mm; font-size: 10.5px; line-height: 1.6; }
body.tpl-print-page .tpl-list li::before { left: 0.5mm; top: 0.7em; width: 1.5mm; height: 1.5mm; }
body.tpl-print-page .tpl-ptbl { font-size: 10px; }
body.tpl-print-page .tpl-ptbl th,
body.tpl-print-page .tpl-ptbl td { padding: 1.5mm 2mm; border-top: 0.3mm solid var(--line-soft); line-height: 1.5; }
body.tpl-print-page .tpl-ptbl th { width: 52%; }
body.tpl-print-page .tpl-ptbl .tpl-var,
body.tpl-print-page .tpl-ptbl .tpl-ph { font-size: 9.5px; }
/* 1 つの文例の見方 */
body.tpl-print-page .tpl-pread { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4mm; }
body.tpl-print-page .tpl-pread li { padding: 2.6mm 2.8mm 3mm 9.4mm; border-radius: 2.4mm; font-size: 9.5px; line-height: 1.6; break-inside: avoid; }
body.tpl-print-page .tpl-pread li::before { left: 2.4mm; top: 2.6mm; width: 5.2mm; height: 5.2mm; font-size: 10px; }
body.tpl-print-page .tpl-pread b { font-size: 11px; }
/* この冊子の中身 */
body.tpl-print-page .tpl-phow + .tpl-pcat { margin-top: 7mm; }
body.tpl-print-page .tpl-ptoc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4mm; }
body.tpl-print-page .tpl-ptoc li { gap: 0.6mm 3mm; padding: 2.6mm 3.2mm; border-radius: 2.4mm; break-inside: avoid; }
body.tpl-print-page .tpl-ptoc li::before { width: 7.5mm; height: 7.5mm; font-size: 12px; }
body.tpl-print-page .tpl-ptoc b { font-size: 13px; }
body.tpl-print-page .tpl-ptoc span { font-size: 10px; }
body.tpl-print-page .tpl-ptoc small { font-size: 9.5px; line-height: 1.6; }

/* ================================================================== 配信の文例・あいさつ（2 段に流す） */
body.tpl-print-page .tpl-pcols { display: block; margin-top: 4mm; columns: 2; column-gap: 7mm; column-rule: 0.25mm solid var(--line-soft); }
body.tpl-print-page .tpl-pcols .tpl-card {
  display: block;
  margin: 0 0 3.8mm;
  padding: 2mm 0 0;
  overflow: visible;
  border: 0;
  border-top: 0.7mm solid var(--tc);
  border-radius: 0;
  background: none;
  box-shadow: none;
  break-inside: auto;
}
body.tpl-print-page .tpl-pcols .tpl-card::before { display: none; }
body.tpl-print-page .tpl-pcols .tpl-card > * + * { margin-top: 1.3mm; }
body.tpl-print-page .tpl-pcols .tpl-card > .tpl-top,
body.tpl-print-page .tpl-pcols .tpl-card > h4 { break-after: avoid; break-inside: avoid; }
/* 「目的・だれに・いつ」の欄（.tpl-meta）は、後ろでは切らないが、行と行の間では段が変わってもよい（1 行ずつは切らない）。
   欄の中を切らない決まりにすると、Chrome が節の最後のページで 2 段の高さをそろえられず、段組みがページの下まで場所をとって、
   次の節が次のページに送られていた（12 ページ目が上の 4 分の 1 だけになった。2026-10-19 に確かめた） */
body.tpl-print-page .tpl-pcols .tpl-card > .tpl-meta { break-after: avoid; }
body.tpl-print-page .tpl-pcols .tpl-card > .tpl-meta > div { break-inside: avoid; }
body.tpl-print-page .tpl-card h3,
body.tpl-print-page .tpl-card h4 { font-size: 12.5px; line-height: 1.4; }
body.tpl-print-page .tpl-top { gap: 1mm 1.4mm; }
body.tpl-print-page .tpl-no { padding: 0 2mm; font-size: 9px; }
body.tpl-print-page .tag { padding: 0 1.8mm; font-size: 8.5px; line-height: 1.65; }
body.tpl-print-page .tpl-meta { gap: 0.6mm; }
body.tpl-print-page .tpl-meta > div { grid-template-columns: 3.4em minmax(0, 1fr); gap: 1.6mm; }
body.tpl-print-page .tpl-meta dt { font-size: 8.5px; }
body.tpl-print-page .tpl-meta dd { font-size: 9px; line-height: 1.5; }
body.tpl-print-page .tpl-talk { display: block; padding: 0; border: 0; border-radius: 0; background: none; }
body.tpl-print-page .tpl-bub,
body.tpl-print-page .tpl-att { width: fit-content; max-width: calc(100% - 5mm); margin: 1mm 0 0 5mm; break-inside: avoid; }
body.tpl-print-page .tpl-bub {
  display: block;
  padding: 1.2mm 2.4mm;
  border: 0.25mm solid var(--line-soft);
  border-radius: 3.2mm;
  border-top-left-radius: 1mm;
  background: var(--bg-soft);
  font-size: 10.5px;
  line-height: 1.55;
}
body.tpl-print-page .tpl-bub::before,
body.tpl-print-page .tpl-att::before { left: -5mm; top: 1.3mm; width: 3.8mm; height: 3.8mm; font-size: 8px; }
body.tpl-print-page .tpl-att { gap: 1.8mm; padding: 1mm 2.4mm 1mm 1.4mm; border-radius: 2.6mm; font-size: 9.5px; line-height: 1.4; }
body.tpl-print-page .tpl-att b { font-size: 8px; }
body.tpl-print-page .tpl-att-ic { width: 5.2mm; height: 5.2mm; border-radius: 1.6mm; }
body.tpl-print-page .tpl-att-ic svg { width: 3.4mm; height: 3.4mm; }
body.tpl-print-page .tpl-var { padding: 0 0.7mm; border-radius: 1mm; }
body.tpl-print-page .tpl-ph { padding: 0 0.5mm; border-radius: 0.8mm; }
body.tpl-print-page .tpl-tip { gap: 1.4mm; font-size: 9px; line-height: 1.55; break-inside: avoid; }
body.tpl-print-page .tpl-tip > svg { width: 3.4mm; height: 3.4mm; margin-top: 0.3mm; }
body.tpl-print-page .tpl-tip b { display: inline; margin-right: 1.4mm; font-size: 8.5px; }
body.tpl-print-page .tpl-warn { padding: 1.6mm 2.4mm; border-radius: 2mm; font-size: 8.5px; line-height: 1.5; break-inside: avoid; break-before: avoid; }
body.tpl-print-page .tpl-warn b { display: inline; margin-right: 1.4mm; font-size: 8.5px; }
body.tpl-print-page .tpl-src { margin-top: 0.6mm; font-size: 8px; line-height: 1.45; }

/* ================================================================== 自動の流れの型（文と図を横に並べる） */
body.tpl-print-page .tpl-pwfs { display: block; }
body.tpl-print-page .tpl-wf {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 4mm;
  align-items: start;
  margin: 0 0 3.6mm;
  padding: 3.6mm 3.6mm 3.4mm;
  border: 0.3mm solid var(--line);
  border-radius: 3mm;
  box-shadow: none;
  break-inside: avoid;
}
body.tpl-print-page .tpl-wf::before { height: 1mm; }
body.tpl-print-page .tpl-wf h3,
body.tpl-print-page .tpl-wf h4:not(.tpl-h4) { margin-top: 1.2mm; font-size: 12.5px; line-height: 1.4; }
body.tpl-print-page .tpl-aim { margin-top: 0.8mm; font-size: 9.5px; line-height: 1.55; }
body.tpl-print-page .tpl-h4 { margin: 1.6mm 0 0.6mm; font-size: 8.5px; }
/* 「使うノード」は、図のノードと同じなので刷らない */
body.tpl-print-page .tpl-wf .uses,
body.tpl-print-page .tpl-wf .tpl-h4:has(+ .uses) { display: none; }
body.tpl-print-page .tpl-steps { gap: 0.8mm; }
body.tpl-print-page .tpl-steps li { padding-left: 4.6mm; font-size: 9px; line-height: 1.5; }
body.tpl-print-page .tpl-steps li::before { top: 0.1mm; width: 3.4mm; height: 3.4mm; font-size: 7.5px; }
body.tpl-print-page .tpl-wf .tpl-list { gap: 0.8mm; }
body.tpl-print-page .tpl-wf .tpl-list li { font-size: 9px; line-height: 1.5; }
body.tpl-print-page .tpl-wf .tpl-warn,
body.tpl-print-page .tpl-wf .tpl-src { margin-top: 1.8mm; }
body.tpl-print-page .tpl-wf .canvas { padding: 2.4mm 1.6mm; border-radius: 2.4mm; background-color: var(--bg-soft); background-image: none; }
body.tpl-print-page .flow { gap: 2.4mm; }
body.tpl-print-page .tpl-wf .node { width: 100%; padding: 0.8mm 1.6mm; border: 0.3mm solid var(--line); border-radius: 1.8mm; box-shadow: none; font-size: 9px; line-height: 1.35; }
body.tpl-print-page .tpl-wf .node.trigger { border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
body.tpl-print-page .node + .node::before,
body.tpl-print-page .flow-branch::before,
body.tpl-print-page .flow-after::before { top: calc(-2.4mm - 0.3mm); width: 0.5mm; height: 2.4mm; }
body.tpl-print-page .node .nk { gap: 1mm; font-size: 7px; }
body.tpl-print-page .node .nk svg { width: 2.6mm; height: 2.6mm; }
/* 種類の名前（きっかけ・メッセージを送る など）と題を 1 行に */
body.tpl-print-page .tpl-wf .node .nk { display: inline-flex; margin-right: 1.4mm; vertical-align: 0.1em; }
body.tpl-print-page .tpl-wf .node .nt { display: inline; margin-top: 0; }
body.tpl-print-page .node .ns { margin-top: 0; font-size: 7.5px; line-height: 1.3; }
body.tpl-print-page .flow-branch { gap: 1.6mm; width: 100%; padding-top: 2.6mm; }
body.tpl-print-page .flow-branch::after { height: 0.5mm; }
body.tpl-print-page .flow-branch > .col { gap: 2.4mm; }
body.tpl-print-page .flow-branch > .col::before { top: -2.6mm; width: 0.5mm; height: 2.6mm; }
body.tpl-print-page .flow-branch .port { top: -2.4mm; padding: 0 1.4mm; font-size: 7px; }
body.tpl-print-page .tpl-merge { gap: 1.6mm; width: 100%; padding-bottom: 2.6mm; }
body.tpl-print-page .tpl-merge::after { height: 0.5mm; }
body.tpl-print-page .tpl-merge > .col::after { bottom: -2.6mm; width: 0.5mm; height: 2.6mm; }

/* ================================================================== リッチメニューの型 */
body.tpl-print-page .tpl-ptypes-h { margin: 2.6mm 0 1.8mm; color: var(--ink-2); font-size: 10.5px; font-weight: 800; }
body.tpl-print-page .tpl-types { gap: 2.6mm; }
body.tpl-print-page .tpl-types-l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.tpl-print-page .tpl-types-s { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.tpl-print-page .tpl-type { padding: 2.2mm 2.2mm 2.6mm; border-radius: 2.4mm; background: var(--bg-soft); break-inside: avoid; }
body.tpl-print-page .tpl-type .tpl-rm > span { background: #ffffff; font-size: 9.5px; }
body.tpl-print-page .tpl-type-n { margin-top: 1.6mm; font-size: 10.5px; }
body.tpl-print-page .tpl-type-m { font-size: 8.5px; }
body.tpl-print-page .tpl-type-u { margin-top: 0.8mm; font-size: 9px; line-height: 1.5; }
body.tpl-print-page .tpl-rm { gap: 0.6mm; padding: 0.6mm; border-radius: 1.4mm; }
body.tpl-print-page .tpl-rm > span { border-radius: 0.7mm; }
/* 業種ごとの例（左にスマホの絵、右にボタンの中身） */
body.tpl-print-page .tpl-prmxs { display: block; }
body.tpl-print-page .tpl-rmx {
  display: grid;
  grid-template-columns: 26mm minmax(0, 1fr);
  gap: 4.5mm;
  align-items: start;
  margin: 0 0 3mm;
  padding: 3.2mm 3.4mm 3mm;
  border: 0.3mm solid var(--line);
  border-radius: 3mm;
  box-shadow: none;
  container-type: normal;
  break-inside: avoid;
}
body.tpl-print-page .tpl-rmx::before { height: 1mm; }
body.tpl-print-page .tpl-rmx .tpl-rmx-art { float: none; margin: 0; }
body.tpl-print-page .tpl-rmx .phone.sm { zoom: 0.42; box-shadow: none; }
body.tpl-print-page .tpl-rmx .phone.sm .phone-screen.cv { min-height: 0; }
body.tpl-print-page .tpl-rmx .cv-body { padding: 10px 8px 14px; }
body.tpl-print-page .tpl-rmx h3,
body.tpl-print-page .tpl-rmx h4 { margin-top: 1mm; font-size: 12.5px; line-height: 1.4; }
body.tpl-print-page .tpl-rmx .tpl-meta { margin-top: 1.2mm; }
body.tpl-print-page .tpl-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2mm; margin-top: 2mm; }
body.tpl-print-page .tpl-btns li { gap: 0.2mm 1.4mm; padding: 1mm 1.6mm 1.2mm 6.2mm; border-radius: 1.6mm; font-size: 9px; line-height: 1.4; }
body.tpl-print-page .tpl-btns li::before { left: 1.4mm; top: 1.2mm; width: 3.4mm; height: 3.4mm; border-radius: 1mm; font-size: 7.5px; }
body.tpl-print-page .tpl-act { padding: 0 1.4mm; font-size: 8px; }
body.tpl-print-page .tpl-what { font-size: 8px; line-height: 1.35; }
body.tpl-print-page .tpl-rmx .tpl-tip { margin-top: 1.6mm; }

/* ================================================================== 出典 */
body.tpl-print-page .tpl-srcs { gap: 1.4mm; margin-top: 3.6mm; padding-left: 5mm; font-size: 9.5px; line-height: 1.5; }
body.tpl-print-page .tpl-srcs li { break-inside: avoid; }
body.tpl-print-page .tpl-srcs a { color: var(--brand-ink); }