/* 請求書メーカー
   ⚠ 共通の print.css は読み込まない（あちらは A4 横向きが既定＝請求書は縦）
   色はさくら色1本（ページの型 14）*/

/* 🔴⚠iPhone では `overflow-x:clip` が効かず、どこを触ってもページが横に動いた
   （2026-09-10 本人・Safari も Chrome も同じ＝どちらも中身は WebKit）。
   ⭐指の「横方向のスクロール」そのものを止める。
   ⭐縦（pan-y）は通すので、⭐片手でのスクロールは今までどおり */
body{touch-action:pan-y}
/* ⭐横に動かしていい場所だけ、ここで許す */
.inv-scroll,.inv-stage.big{touch-action:pan-x pan-y}

/* ===== 画面 ===== */

/* ⭐入力は共通の .row.tight を使う（座席表と同じ形）。
   ⭐高さを出さないために、桁の少ない欄は幅を決めて横に並べる（2026-09-09 本人
     「枠が大きい」「電話番号なんて桁少ないし、そういうのはもっと詰めてほしい」） */
.row.tight > div > input,
.row.tight > div > select,
.row.tight > div > textarea{width:100%}
/* 🔴⭐同じ行に並ぶ「入力欄」と「ボタン」の高さをそろえる（2026-09-10 本人）。
   ⚠共通CSSのボタンは45px、入力欄は42pxで、3pxずれていた。
   ⚠iPhone では日付の欄がさらに変わるので、高さを決めて固定する */
.row.tight > div > input:not([type=file]),
.row.tight > div > select,
.inv-row > input:not([type=file]),
.inv-row > select{height:45px}
.inv-row textarea,.row.tight > div > textarea{height:auto}
/* ⚠日付とファイルは「中身ぶんの幅」が自然な形。伸ばさない（2026-09-09 本人） */
.row.tight > div > input[type=date],
.row.tight > div > input[type=file]{width:auto}

.row.tight > div.d-auto{flex:0 0 auto}

/* ⚠スマホ（375px）で折り返さないよう、伸びる欄の下限を小さくする */
.row.tight > div.grow{flex:1 1 130px;min-width:0}
.row.tight > div.w-zip{flex:0 0 104px}
.row.tight > div.w-tel{flex:0 0 132px}
.row.tight > div.w-honor{flex:0 0 108px}
.row.tight > div.w-mail{flex:1 1 190px;min-width:0}
.row.tight > div.w-round{flex:0 0 140px}
.row.tight > div.w-person{flex:1 1 170px;min-width:0}
.row.tight > div.w-no{flex:0 0 132px}
.row.tight > div.w-pre{flex:0 0 140px}
.row.tight > div.w-dig{flex:0 0 92px}
.row.tight{margin-bottom:9px;gap:9px}
.row.tight:last-child{margin-bottom:0}
.tightrow{margin-top:10px}

/* 入力の章 */
.inv-row{display:block;margin-top:10px}
.inv-row:first-child{margin-top:0}
.inv-row label{display:block;margin:8px 0 3px;font-size:.86rem;font-weight:700;color:var(--ink-soft)}
.inv-row label .tip-btn{vertical-align:middle}
/* ⭐見た目（枠・角丸・余白）は共通の style.css に任せる。ここは幅だけ（→ ページの型 16-a） */
.inv-row input[type=text],.inv-row input[type=tel],.inv-row input[type=email],.inv-row input[type=number],.inv-row textarea,.inv-row select{width:100%}
/* ⭐1行ぶん大きくした（2026-09-10 本人）。薄い文字（サンプル）はそのまま */
.inv-row textarea{min-height:0;height:5.7em;resize:vertical}

/* ⚠横に並ぶ箱は、上のふちと高さをそろえる（2026-09-09 本人）。
   ⭐原因は .inv-row:first-child の margin-top:0 が左の箱にだけ効いていたこと
     （→ 記憶/コード/label-margin-3px.md と同じ形）*/
.inv-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
.inv-2col>.inv-row{margin-top:12px}
.inv-2col>.inv-row label{margin-top:0}
@media(max-width:560px){.inv-2col{grid-template-columns:1fr}}
.inv-hint{font-size:.78rem;color:var(--ink-soft);margin:4px 0 0;line-height:1.6}

/* ⚠details.opt.sub（章の中の細かい設定・保存の欄）の見た目は
   ⭐共通の style.css に移した（2026-09-10 本人「共通ですよ」）。ここには置かない */

/* ⭐「保存するもの／保存しないもの／気をつけること」の上に線を入れない（2026-09-10 本人） */
.read .howto .body p.sub.noline{border-top:0;padding-top:0}

/* ⭐見積書 →請求書 へ移るところ（2026-09-10 本人）。⭐ボタンは中央ぞろえ */
.inv-handoff{text-align:center;margin:18px 0}
.inv-handoff .inv-hint{margin:0 0 10px}
/* ⭐⑦のカードの中に入れた（2026-09-14）。PDFで保存との間に区切りの線 */
.card .inv-handoff{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
/* ⭐見積書⇔請求書の行き来（2026-09-14）。⭐いちばん下は中央、戻るは上に小さく */
.doc-switch{text-align:center;margin:18px 0 22px;font-size:.9rem}
.doc-switch a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.doc-switch a:hover{color:var(--ink)}
.doc-back{margin:0 0 14px}
.doc-back .primary{font-size:.95rem;padding:9px 20px}

/* ボタンだけを並べる行（ラベルの下に置く） */
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}

/* 取引先の選び */
.inv-pick{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.inv-pick select{flex:1 1 200px}
.inv-pick button{white-space:nowrap}

/* サンプルのボタン（2か所に置く） */
/* ⚠①②と同じ強さにしない（2026-09-10 本人「要するに、①や②と同等にしたくないんだよね」）。
   ⭐サンプルは「自分が作るもの」ではないので、線を引かない。
   ⚠背景の白は残す═⑥確認の紙の真下にもあるので、地続きに見えないように。
   ⚠「サンプル」のラベルも消した＝選ぶ欄の中に同じ言葉がある（→ 型13-h） */
.inv-sample{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin:14px 0 18px;padding:0;
  background:none;border:0;
}

/* 明細の表 */
/* ⭐明細の表も「表の見た目」（ページの型 9-a）にそろえた（2026-09-14 本人「ほかのtestページに表があるか確認して、同じ型に変えて」）
   ＝横の線だけ／項目名は地なし・うすいグレー・中央／表の地なし／消すボタンはうすいグレーの28×26px
   ⭐④の地は白（実測 #fff）＝決まり「背景が白なら、そのまま」→ 入力欄はうすいグレーの地・枠なし、選ぶ欄は白＋枠
   ⚠PDFに出る明細（.inv-sheet table.det）と④の下の合計（.inv-sum）はそろえない（本人「揃えないのはPDF（印刷）で使うもの」） */
.inv-items{width:100%;border-collapse:collapse;font-size:.92rem;background:transparent}
.inv-items th{
  font-size:.82rem;color:#9a9ea4;font-weight:700;text-align:center !important;background:transparent;
  padding:6px 6px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.inv-items td{padding:6px 6px;vertical-align:middle;border-bottom:1px solid var(--line)}
.inv-items input{
  width:100%;padding:4px 7px;border:1px solid transparent;border-radius:6px;font:inherit;font-size:.92rem;background:var(--bg);color:var(--ink);
}
.inv-items select{
  width:100%;padding:4px 3px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.82rem;background:#fff;color:var(--ink);
}
.inv-items input:focus,.inv-items select:focus{outline:none;border-color:var(--pink);background:#fff}
.inv-items input[type=number]{text-align:right}
/* ⭐単位の▼（候補の一覧を開くしるし）を小さく・うすく（2026-09-14 本人「▶ボタンが出ると大きいような気がして」→ 案A）
   ⚠Chrome・Edge向けの書き方。こちらの確認用ブラウザでは画面写真が撮れず、小さくなったかは見ていない（本人の画面で確かめる）。
   ⚠Safari・Firefoxには効かない */
.inv-items .i-unit::-webkit-calendar-picker-indicator{width:10px;height:10px;padding:0;margin:0;opacity:.5}
.inv-items .c-no{text-align:center;color:var(--ink-soft);font-size:.8rem;white-space:nowrap}
.inv-items .c-amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.inv-items .c-del{text-align:center}
.inv-items .c-del button{
  width:28px;height:26px;padding:0;border:1px solid var(--line);background:#fff;border-radius:6px;
  color:var(--ink-soft);cursor:pointer;line-height:1;font-size:11px;
}
.inv-items .c-del button:hover{background:var(--pink-pale)}
/* ⭐明細の表だけは横に動かす（ここは意図した動き） */
.inv-scroll{overflow-x:auto;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.inv-items{min-width:560px}

/* 合計 */
.inv-sum{margin-top:12px;display:flex;justify-content:flex-end}
.inv-sum table{font-size:.9rem;border-collapse:collapse}
.inv-sum th{text-align:left;padding:3px 18px 3px 0;font-weight:normal;color:var(--ink-soft)}
.inv-sum td{text-align:right;padding:3px 0;font-variant-numeric:tabular-nums;min-width:7em}
.inv-sum tr.total th,.inv-sum tr.total td{
  font-size:1.05rem;font-weight:bold;color:var(--pink);border-top:2px solid var(--pink-light);padding-top:7px;
}

/* しるし */
.chk-inline{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:.86rem;font-weight:normal;color:var(--ink)}
.inv-row .chk-inline{display:inline-flex}
.inv-chks{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:6px}

/* ファイル名の見本 */
.inv-fname{
  margin-top:8px;padding:9px 11px;background:#fff;border:1px dashed var(--pink-light);border-radius:9px;
  font-size:.84rem;word-break:break-all;color:var(--ink);
}
.inv-fname b{color:var(--pink)}

/* ===== 見本（A4を1枚まるごと出す） =====
   ⭐画面の幅がいくつでも、紙と同じ形（A4たて）で見せる（2026-09-09 本人）。
     ⚠幅に合わせて伸び縮みさせると「このまま紙になります」が嘘になる */
.inv-stage{
  position:relative;overflow:hidden;margin:0 auto;
  background:var(--bg);
  touch-action:pan-y;
}
/* ⭐紙は何枚にもなる。画面では縦に並べて、間をあける（2026-09-09 本人「2ページになるときも見たい」）*/
/* ⚠幅をA4に合わせる。ここを広げたままにすると、縮小の計算が入れものの幅を見てしまい
   スマホでA4がはみ出したまま切れる */
#pages{width:210mm;transform-origin:top left;font-size:10.5pt}
#pages .inv-sheet{margin:0 0 14px}
#pages .inv-sheet:last-child{margin-bottom:0}
/* 「以下余白」
   ⚠決まりはない。通例は「右下」「1行あけて右寄せ」。⭐中央は本人の指定（2026-09-09） */
.inv-endmark{color:#555;font-size:.92em;display:block;text-align:center}

/* ⭐サンプルの透かし。⚠そのまま刷ってしまう事故を防ぐので、紙にも出す（座席表と同じ考え方） */
.inv-sheet.sample::after{
  content:"SAMPLE";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:bold;font-size:76pt;letter-spacing:.14em;
  color:rgba(200,106,142,.16);transform:rotate(-18deg);
  pointer-events:none;
}

/* サンプルのえらび欄。⭐となりのボタンと高さをそろえる（2026-09-09 本人） */
.inv-sample select{
  height:45px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:.9rem;background:#fff;color:var(--ink);
}

/* たたむ章の中身（共通CSSは padding-top しか持っていない） */
#meBox > .body,#prevBox > .body,#s2Box > .body,#s3Box > .body,#s4Box > .body{padding:0 18px 16px}
#prevBox[open] > .body,#s2Box[open] > .body,#s3Box[open] > .body,#s4Box[open] > .body{padding-top:16px}
#meBox[open] > .body{padding-top:16px}

/* 紙のロゴ */
/* ⭐自分の情報の中で中央に置く（2026-09-09 本人） */
.inv-logo{max-width:44mm;max-height:18mm;display:block;margin:0 auto 5px}

/* 見本のたたみ（道具の部品なので details.opt を使う） */
#prevBox{margin:18px 0}
#prevBox>summary{font-weight:bold}
#prevBox .inv-stage{margin-top:0}
.inv-stage.big .inv-sheet{cursor:zoom-out}
@media print{ #zoomHint{display:none !important} }

/* 2枚目からの見出し（請求書番号と宛先） */
.inv-cont{
  display:flex;justify-content:space-between;gap:12px;
  font-size:.92em;color:#000;
  border-bottom:1px solid #000;padding-bottom:5px;margin-bottom:12px;
}
.inv-pageno{
  position:absolute;right:16mm;bottom:8mm;
  font-size:.85em;color:#333;
}
/* ⭐実物大のときは横にはみ出すので、ここで横スクロールさせる */
.inv-stage.big{background:var(--pink-pale);overflow-x:auto}
.inv-sheet{
  cursor:zoom-in;
  position:relative;
  width:210mm;min-height:297mm;padding:20mm;  /* ⚠中身を 170×230mm にする（印刷と揃える） */  /* ⚠余白は印刷と同じ 20mm。⭐中身は 170×257 で揃う */
  background:#fff;border:1px solid var(--line);
  font-size:inherit;line-height:1.6;color:#000;
  box-sizing:border-box;
}
.inv-preview-cap{font-size:.78rem;color:var(--ink-soft);text-align:center;margin:0 0 8px}

/* 押すと大きく見る */
/* 紙の中身 */
.inv-sheet h3{margin:0 0 16px;text-align:center;font-size:1.7em;letter-spacing:.4em;font-weight:bold}
.inv-head{display:flex;justify-content:space-between;gap:20px}
.inv-to{flex:1 1 auto;min-width:0}
.inv-to .to-name{font-size:1.25em;font-weight:bold;border-bottom:1px solid #000;padding-bottom:3px;display:inline-block;min-width:60%}
.inv-to .to-addr{font-size:.92em;color:#000;margin-top:6px;white-space:pre-wrap}
/* ⚠住所やメールが長いと左へ伸びて、宛先を押しつぶす（2026-09-09 実測 159px→480px）。
   ⭐上限を決めて、そこから先は折り返す */
.inv-from{
  flex:0 1 auto;max-width:72mm;text-align:left;font-size:.92em;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.inv-to{min-width:56mm}
.inv-from .from-name{font-weight:bold;font-size:1.08em}
/* ⭐屋号がない人は、氏名を目立たせない */
.inv-from .from-name.solo{font-weight:normal;font-size:1em}
.inv-meta{text-align:right;font-size:.92em;margin-bottom:10px}
.inv-total-box{
  margin:16px 0 18px;padding:9px 12px;border-top:2px solid #000;border-bottom:2px solid #000;
  display:flex;justify-content:space-between;align-items:baseline;
}
.inv-total-box .lbl{font-weight:bold}
.inv-total-box .val{font-size:1.5em;font-weight:bold;font-variant-numeric:tabular-nums}
.inv-sheet table.det{width:100%;border-collapse:collapse;font-size:.92em}
/* ⭐幅を指定どおりに効かせるため fixed にする。
   ⚠auto だと「品目 99%」が強すぎて、数字の列が中身ぴったりまで潰れていた（2026-09-09） */
.inv-sheet table.det{table-layout:fixed}
.inv-sheet table.det td{overflow-wrap:anywhere}
.inv-sheet table.det th{background:#f3f4f5;border:1px solid #777;padding:4px 6px;font-weight:bold;text-align:center}
/* 中身のぶんだけ取る列（数字・日付・品番）。折り返させない */
/* ⭐中身のぶんだけ取るが、⚠端に寄りすぎないよう最低の幅を決める
   （2026-09-09 本人「いま、端っこに寄ってる。7桁入るくらいの余裕は欲しい」）
   ⭐1,234,567 が入る幅＝およそ22mm */
.inv-sheet table.det th.w-min{white-space:nowrap;width:5.1%}
/* ⚠ table-layout:auto では th の min-width が効きにくい。width で希望値を渡す */
.inv-sheet table.det th.w-num{white-space:nowrap;width:13%}
.inv-sheet table.det th.w-qty{white-space:nowrap;width:9.6%}
.inv-sheet table.det th.w-date2{white-space:nowrap;width:9%}
.inv-sheet table.det th.w-code{white-space:nowrap;width:11.9%}
.inv-sheet table.det td.c,.inv-sheet table.det td.n{white-space:nowrap}
.inv-sheet table.det td{border:1px solid #777;padding:4px 6px;height:1.9em}
.inv-sheet table.det td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-sheet table.det td.c{text-align:center;white-space:nowrap}
.inv-sheet .det-sum{margin-top:10px;display:flex;justify-content:flex-end}
.inv-sheet .det-sum table{font-size:.94em;border-collapse:collapse}
.inv-sheet .det-sum th{text-align:left;padding:2px 16px 2px 0;font-weight:normal}
.inv-sheet .det-sum td{text-align:right;padding:2px 0;min-width:7em;font-variant-numeric:tabular-nums}
.inv-sheet .det-sum tr.t th,.inv-sheet .det-sum tr.t td{font-weight:bold;border-top:1px solid #000;padding-top:5px}
.inv-pay{margin-top:18px;font-size:.92em}
.inv-pay .ttl{font-weight:bold;border-bottom:1px solid #000;display:inline-block;margin-bottom:5px;padding-bottom:2px}
.inv-pay .body{white-space:pre-wrap}
.inv-note{margin-top:14px;font-size:.9em;white-space:pre-wrap;color:#000}

/* ===== 印刷 ===== */
/* 🔴⭐余白は紙（@page）ではなく、紙の中身（.inv-sheet の padding）で作る。
   ⚠ブラウザの印刷画面の「余白」が「デフォルト」のとき、@page の margin は使われず
     ブラウザ既定の余白になる（2026-09-10 Edgeで確認）。
   ⭐margin:0 にしておけば、どの設定でも中身が縮むことがない */
@page{size:A4 portrait;margin:0}
@media print{
  /* 🔴⭐印刷のときは、紙（#pages）だけを body の直下に出している（keiri.js の liftPages）。
     ⭐ここでその紙以外を全部消す＝画面用の指定がいっさいかからない */
  body.printing > *{display:none !important}
  body.printing > #pages{display:block !important}
  body.printing{
    width:210mm !important;min-width:0 !important;
    margin:0 !important;padding:0 !important;background:#fff;
  }
  /* 🔴⚠body のはじめからある余白（8px）が残っていると、210mm の紙が
     紙に入りきらず、⭐ブラウザが全体を縮めて左上に寄せる
     （2026-09-10 本人「A4用紙の左上に寄ってるし、小さくなってるよ」） */
  /* 🔴⭐印刷のとき、ブラウザは中身を広めの幅（948px）で組み立ててから
     A4に押し込んでいた＝⚠0.63倍に縮んでいた（2026-09-10 PDFの中身を読んで確定）。
     ⭐紙の幅そのものを210mmに固定すれば、縮まない */

  /* 🔴⭐中身の幅（170mm）で組み立てて、紙の中央に置く。
     ⚠210mm で組むと、印刷できる幅（約176mm）に入らず8%縮んでいた
     （2026-09-10 本人のPDFを測って確定） */
  /* 🔴⭐min-width が残っていると、ブラウザは全体を縮めて紙に収める。⭐必ず打ち消す */
  html,body{margin:0 !important;padding:0 !important;width:210mm !important;min-width:0 !important}
  /* ⚠紙の中身に残っている min-width も、印刷のときだけ消す */
  .inv-sheet *{min-width:0 !important}
  /* ⭐背景の色・罫線を紙にも出す（帳票CSSの定石）。
     ⚠表の見出しだけに書いていたのを、紙全体に広げた（2026-09-10 リサーチ） */
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* ⚠入力の章は .card。ここを入れ忘れると、打ち込む欄まで紙に出る */
  /* 🔴⭐.inv-hint＝画面用の説明文。紙にはいっさい出さない（2026-09-12 本人のPDFで発覚
     「⚠入力後に『サンプルを見る』を押すと…」が紙の一番上に出ていた）。
     ⚠①〜⑤の中の説明文は章ごと消えるが、⭐この1行だけ章の外にあって残っていた */
  .site-head,footer,.noprint,.read,.card,h1,.catch,.lead,.can-do,
  .inv-sample,.notice-top,.inv-hint{display:none !important}
  /* 🔴⭐①〜⑤は details.opt で、.card ではない（クラス指定だけでは消えない）。
     ⚠開いている章が紙に出ていた（2026-09-10 本人「請求書、PDFにしたら、その画面になったよ」）。
     ⭐IDで消す＝⑥（確認）も details.opt だが、中身が紙そのものなので残す */
  #meBox,#s2Box,#s3Box,#s4Box,#s5Box,.intro{display:none !important}
  /* 🔴⑥は中身が紙なので残すが、見出しと枠は紙にいらない（2026-09-10 本人
     「PDFにしたら、⑥確認も一緒に印刷される感じになってるよ」） */
  #prevBox > summary{display:none !important}
  #prevBox{border:0 !important;background:none !important;margin:0 !important;box-shadow:none !important}
  #prevBox > .body{padding:0 !important}
  /* ⚠max-width:none だと中身なりに広がる。⭐210mm に固定する */
  main.wrap,.wrap{width:210mm !important;max-width:210mm !important;min-width:0 !important;padding:0 !important;margin:0 !important}
  /* ⭐画面では縮めて見せているので、紙では必ず戻す */
  /* 🔴⚠.inv-stage.big （拡大中のピンクの地）のほうが指定が強く、印刷でもピンクが出ていた。
     ⭐その地が紙より高くなり、下がはみ出して切れていた
     （2026-09-10 本人「今回ピンクが出たからわかりやすい」） */
  .inv-stage,.inv-stage.big{
    overflow:visible !important;height:auto !important;min-height:0 !important;
    background:#fff !important;padding:0 !important;margin:0 !important;
  }
  /* 🔴⭐紙の幅を 210mm のままにすると、印刷できる幅（210－余白32＝178mm）を
     はみ出して、⚠ブラウザが勝手に縮める。結果、⭐紙の下が大きく空いていた
     （2026-09-10 本人の画面写真で判明）。⭐印刷では幅を紙まかせにする */
  /* 🔴⚠210mm と書くと、紙と同じ幅なのに1pxでも超えるとブラウザが全体を縮めて
     左上に寄せる（2026-09-10 本人「またPDFにするとき、寄った」）。
     ⭐100% にすれば、紙の幅を超えることがない */
  /* 🔴⭐幅は⑥と同じ 210mm にする（2026-09-10 本人「そもそも、列幅が広がってるよね」）。
     ⚠100% にすると「印刷できる幅」に合わせるので、ブラウザの余白設定で幅が変わる。
     ⭐幅が変わると、mmで固定した列（数量・単価・金額）はそのままで、品目の列だけが伸び縮みする */
  /* 🔴⚠210mm ちょうどだと、ブラウザの印刷領域に入りきらず全体が縮んで左上に寄る。
     ⭐209mm にする（逃げ1mm）。⑥は210mmのままだが、列幅の差は品目列の1mmだけ */
  /* ⭐170mm の中身を、紙（210mm）の中央に置く＝左右20mmずつの余白
     （2026-09-10 本人「左余白がなくなったよ」） */
  #pages{width:210mm !important;min-width:0 !important;transform:none !important;margin:0 !important}
  /* 🔴⭐⑥確認で見たものを、そのまま紙にする（2026-09-10 本人
     「⑥確認で確認したんだから、それをそのまま表示しなきゃ意味ない」）。
     ⚠以前は印刷のときだけ min-height:0 にしていたため、⑥で埋まっていたはずの
       紙の下が空いていた。⭐画面と同じ 210mm × 297mm のまま出す */
  /* ⚠margin は #pages .inv-sheet（14px）のほうが強いので、!important で消す。
     ⭐残っていると2枚目以降が少しずつ下にずれる */
  /* 🔴⭐印刷で全体が縮む原因は min-width（2026-09-10 リサーチで判明）。
     ⚠ブラウザは「その幅が必要」と判断して、紙に収まるまで全体を縮める。
     ⭐紙は 210×296mm、余白は padding 20mm＝帳票CSSの定石どおり */
  /* ⭐紙＝paper-css と同じ形。210×297mm、余白は padding 20mm、はみ出しは切る */
  .inv-sheet{
    width:210mm;height:297mm;
    padding:20mm;
    box-sizing:border-box;overflow:hidden;
    border:none;margin:0 !important;
    break-after:page;page-break-after:always;
  }
  .inv-sheet:last-child{break-after:auto;page-break-after:auto}
  /* 🔴⚠ここを position:static にすると、ページ番号の分だけ紙が背が伸びて
     297mm を超え、⭐ブラウザが全体を縮める。2026-09-10 に取りやめた。
     ⭐画面と同じ absolute のまま出す（⑥と同じ見た目になる） */
  .inv-sheet table.det th{
    background:#f3f4f5 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
    .inv-sheet.sample::after{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .inv-sheet table.det{page-break-inside:auto}
  .inv-sheet table.det tr{page-break-inside:avoid}
}

/* 🔴⭐iPhone（Safari）だけの印刷（2026-09-12 本人のスクショで判明）。
   ⚠Safari は @page の margin を読まない＝紙いっぱい（210×297mm）に置けない。
     Safari 自前の余白が必ず入るので、⭐297mm の紙が印刷できる高さに入らず、
     下が切れて、あふれた分が⭐白紙の2ページ目になっていた。
   出典: mdn/browser-compat-data #23178「Safari does not handle print page margins
   correctly」（2026-09-12 確認）https://github.com/mdn/browser-compat-data/issues/23178
   ⭐iOSでは紙の大きさを決め打ちせず、Safari がくれた印刷できる範囲に合わせる。
   ⚠@supports(-webkit-touch-callout) は iOS だけが通る＝PC（Edge）はここに入らない。
     PCの印刷は 2026-09-10 に合わせたまま、いっさい変えない */
@supports (-webkit-touch-callout: none){
  @media print{
    html,body{width:auto !important;min-width:0 !important}
    #pages{width:100% !important}
    /* ⭐高さは中身なり＝紙からはみ出さないので、切れない・白紙も出ない */
    .inv-sheet{
      width:100% !important;height:auto !important;min-height:0 !important;
      padding:12mm !important;overflow:visible !important;
    }
  }
}

/* ⭐一段弱いボタン（2026-09-10 本人が3案から選んだ）
   使う場所＝見積書の「この内容で請求書を作る」。
   ⚠PDFで保存（.primary）と同じ見た目だと、⭐控えを残す前に押されてしまう。
   ⚠大きさ・形・文字は .primary のまま。⭐塗りをやめて桜色の枠だけにする。
     大きさまで変えると「別のボタン」に見えて、押していいのか迷わせる */
.primary.weak{
  background:#fff;border-color:var(--pink);color:var(--pink);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
/* ⚠.primary:hover が桜色の塗りに戻してしまうので、ここで打ち消す */
@media (hover:hover){
  .primary.weak:hover{
    background:var(--pink-pale);border-color:var(--pink);filter:none;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
  }
}
/* 指で使う機器。⚠.primary の強い影を弱める */
@media (hover:none){
  .primary.weak{box-shadow:0 2px 6px rgba(0,0,0,.12)}
}
/* ⭐押した合図は .primary と同じ（沈む）。⚠暗くするのだけ、薄い地に合わせて弱める */
.primary.weak:active{filter:none;background:var(--pink-light)}

/* ⭐⑧の中は3つともシャッター（2026-09-10 本人「必要なものだけ操作すればいい」）。
   ⚠線で区切る案は取り下げた＝たたむので要らなくなった。
   ⭐見た目は③の「細かい設定」と同じ details.opt.sub を使う（新しい見た目を作らない） */
.cls-box > details.opt.sub:first-child{margin-top:0}

/* 🔴⭐できあがりの見本（2026-09-10 本人）。
   ⭐**上半分だけ見せる**（本人「上半分だけイメージにしてサイズをそろえるとか？」）。
   ⚠A4の縦なので、全体を入れると小さすぎて何も読めない。
   ⚠画像そのものは切っていない＝表示で切っているだけ。⭐幅が変わってもいつも上半分が出る。
   ⚠クラス名は座席表と同じ .intro / .t-sample にそろえる（新しい見た目を作らない） */
.intro{margin:0 0 20px}
.t-sample{
  margin:0 0 20px;max-width:240px;position:relative;
  /* ⭐下端は白に消す═「続きがある」と分かる。⚠切れっぱなしにしない */
  -webkit-mask-image:linear-gradient(#000 82%,transparent);
  mask-image:linear-gradient(#000 82%,transparent);
}
/* 🔴⭐押すと全体が見える（2026-09-12 本人
   「ちょっと見たい、大きくなるかなっていう気持ち。
     あ、いいじゃんってなったらサンプルを見るで自分に合うものを選択」）。
   ⚠JSは使わない＝チェックボックスで開け閉めする（座席表のナビと同じやり方） */
.t-sample-open{position:absolute;opacity:0;pointer-events:none}
.t-sample label{
  display:block;position:absolute;inset:0;cursor:zoom-in;z-index:2;
}
/* ⭐開いたら═透かしを外して、絵全体を出す */
.t-sample-open:checked ~ .t-sample{
  /* ⭐幅はそのまま。⭐**縦だけ伸ばして下まで見せる**（2026-09-12 本人
     「こんなに大きくなくていいよ。**今のサイズで下まで見えるくらい**」） */
  -webkit-mask-image:none;mask-image:none;
}
.t-sample-open:checked ~ .t-sample img{
  position:static;height:auto;object-fit:contain;
}
.t-sample-open:checked ~ .t-sample label{cursor:zoom-out}
/* ⭐「押せる」と分かるしるし。⚠絵の上に小さく出す */
.t-sample label::after{
  content:"押すと全体";
  position:absolute;right:6px;bottom:6px;
  background:rgba(255,255,255,.92);color:var(--pink);
  font-size:.68rem;font-weight:bold;padding:2px 7px;border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.t-sample-open:checked ~ .t-sample label::after{content:"押すと小さく";bottom:10px}
/* ⚠幅を変えないので、パソコンでも並びはそのまま */
/* ⚠絵を absolute にしないと、画像の自然な高さで枠が伸びる */
.t-sample img{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:cover;object-position:top;
  border-radius:6px;background:#fff;
  box-shadow:0 5px 16px rgba(0,0,0,.17), 0 1px 3px rgba(0,0,0,.10);
}
@media (min-width:860px){
  /* ⭐文章と高さをそろえる。⚠高さは文章のほうが決める */
  .intro{display:flex;align-items:stretch;gap:26px}
  .intro .intro-txt{flex:1 1 0;min-width:0}
  .intro .t-sample{flex:0 0 32%;max-width:250px;margin:0}
  /* ⚠文章の1行目と絵の上端をそろえる */
  .intro .intro-txt > *:first-child{margin-top:0}
}
/* ⚠狭い画面では縦に積む。⭐絵は文章の下（座席表と同じ順） */
@media (max-width:859px){
  .intro{display:flex;flex-direction:column}
  /* ⭐スマホも上半分だけ（2026-09-10 本人・A案）。
     ⚠全体を出すと縦に長く、そのぶんスクロールが増える。⭐高さはここで決め打つ */
  /* ⚠margin:auto を使うと stretch が効かない。⭐幅を明示する（幅が0になった） */
  .intro .t-sample{width:240px;max-width:100%;height:180px;margin:4px auto 16px}
}

/* ⭐キャッチは、パソコンで長く・スマホで短く（2026-09-10 本人）。
   本人「個人事業主は直接SEOだけど、小さい会社は使ってもらえるといいなと思って」。
   ⚠帯（.site-sub .now-long / .now-short）と同じやり方。⭐新しい仕組みを作らない */
.catch .c-short{display:none}
@media(max-width:640px){
  .catch .c-long{display:none}
  .catch .c-short{display:inline}
}