/* 「領収書の貼り付け台紙」の画面。共通の部品と色・大きさの変数は、src/style.css。ここは、この道具だけの物(台紙そのものは、紙なので、いつも白地に黒)。 */
.options { --opt-min: 14rem; }
.field input[type="text"], .photos input[type="text"] { width: 100%; max-width: 26rem; }

/* 写真ごとの、順・向き・メモ */
.photos { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.photos li { display: grid; grid-template-columns: 2rem 4.5rem minmax(0, 1fr); gap: 0.3rem 0.7rem; align-items: center; margin: 0; padding: var(--sp-2) 0.6rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg); }
.photos .no { font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.photos .thumb { width: 4.5rem; height: 4.5rem; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); }
.photos .body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.photos .name { font-size: var(--fs-xs); color: var(--muted); }
.photos .memo-label { font-size: var(--fs-xs); font-weight: 700; }
.photos .buttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.photos .buttons .button { min-width: var(--tap); }
/* 広い画面: 順・向き・外すのボタンを、メモの欄の右に置く(小さな画像の横が空かない) */
@media (min-width: 52rem) {
  .photos li { grid-template-columns: 2rem 4.5rem minmax(0, 1fr) auto; }
  .photos .buttons { grid-column: auto; justify-content: flex-end; }
}

/* 台紙(A4 の紙)。画面では、幅に合わせて縮めて見せる。中の位置と大きさは、紙の幅に対する割合(スクリプトが決める)。 */
.sheets { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); margin-top: 0.8rem; }
.sheet {
  position: relative; container-type: inline-size; overflow: hidden; width: 100%; max-width: 36rem; aspect-ratio: 210 / 297;
  background: #fff; color: #111; border: 1px solid #999; box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif; line-height: 1.2;
}
.sheet.land { aspect-ratio: 297 / 210; max-width: 50rem; }
.sheet > * { position: absolute; margin: 0; }
.sheet .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; border-bottom: 1px solid #555; font-weight: 700; }
.sheet .head .title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sheet .head .page { flex: none; font-weight: 400; font-variant-numeric: tabular-nums; }
.sheet .pic { display: block; }
/* 写真は、枠の左上に寄せる(下のメモが左端から始まるので、写真とメモが離れない) */
.sheet .pic img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left top; }
.sheet .cap { line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }

/* 「台帳つき(準備中)」の案内(台紙の後。写真が有るときだけ出す。印刷には出ない) */
.ledger { border: 1px dashed var(--line); border-radius: var(--r-m); padding: 0.4rem 0.9rem 0.8rem; margin-top: var(--sp-5); }
.ledger-count { margin: 0.3rem 0 0; }
.ledger-thanks { font-weight: 700; margin-bottom: 0; }
.ledger-thanks:empty { display: none; }

/* スマホの幅: メモの欄を、行の幅いっぱいに取る(番号と小さな画像の横だと、狭い) */
@media (max-width: 40rem) {
  .photos .body { grid-column: 1 / -1; }
}

/* 印刷: 台紙だけを、A4 の紙に1枚ずつ出す(写真が有るときだけ。紙の向きは、print-portrait.css・print-landscape.css) */
@media print {
  html.rs-print header.site, html.rs-print footer.site, html.rs-print .skip,
  html.rs-print main .wrap > :not(#tool), html.rs-print #tool > :not(#sheets) { display: none !important; }
  html.rs-print, html.rs-print body { background: #fff; }
  html.rs-print body { display: block; min-height: 0; }
  html.rs-print main { padding: 0; }
  html.rs-print .wrap { max-width: none; padding: 0; }
  html.rs-print .tool { border: 0; border-radius: 0; padding: 0; margin: 0; background: none; }
  html.rs-print .sheets { display: block; margin: 0; }
  html.rs-print .sheet { width: 210mm; height: 297mm; max-width: none; aspect-ratio: auto; border: 0; box-shadow: none; break-after: page; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  html.rs-print .sheet.land { width: 297mm; height: 210mm; }
  html.rs-print .sheet:last-child { break-after: auto; }
}