/**
 * 海岸マップの印刷用1枚（/activity/print/）だけの見た目。
 * 図そのもののスタイルは css/beachmap.css と共用で、ここでは紙に合わせた枠だけを持つ。
 */

/* A4よこ。地図が横長（1040×700）なので、たてに組むと左右が大きく余る */
@page { size: A4 landscape; margin: 8mm; }

.mapsheet-page { background: #eef1f5; padding: 24px 0 40px; }
.mapsheet-page__sheet {
  width: 1060px;
  margin: 0 auto;
  padding: 10px 10px 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(20, 40, 80, .18);
}

.mapsheet-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.mapsheet-page__ttl { margin: 0; font-size: 20px; line-height: 1.35; color: var(--ink, #1c1f22); }
.mapsheet-page__ttl span { font-size: .72em; font-weight: 400; }
.mapsheet-page__lead { margin: 4px 0 0; font-size: 12px; color: var(--ink-soft, #3d444b); line-height: 1.7; }
.mapsheet-page__empty { margin: 0; font-size: 13px; }

/* QRは紙で読み取ってもらうものなので、印刷でも消さない */
.mapsheet-page__qr { flex: none; margin: 0; text-align: center; }
.mapsheet-page__qr img { display: block; width: 76px; height: 76px; }
.mapsheet-page__qr figcaption { margin-top: 2px; font-size: 9px; line-height: 1.4; color: var(--ink-faint, #5d656e); }
.mapsheet-page__qr strong { font-weight: 700; word-break: break-all; }

/* 図は紙の幅に合わせた大きさで組んであるので、画面でも縮めない。
   公開ページ用の「狭い画面では横に送る」指定（beachmap.css）はここでは効かせない
   ── 紙は最初から図が収まる幅で組んでいて、送る先が無い */
.mapsheet-page .beachmap { margin: 0; overflow: visible; padding-bottom: 0; }
.mapsheet-page .beachmap__frame { width: auto; }
.mapsheet-page .beachmap__cap { margin-top: 6px; font-size: 10px; }
/* 「番号は巡回順です…」は見出しの下で言っているので、図の脚注では繰り返さない。
   出典（地図：国土地理院）だけを残す ── 国土地理院のタイルは表示が要る */
.mapsheet-page .beachmap__note { display: none; }

@media print {
  html, body { width: auto; background: #fff; }
  .mapsheet-page { background: #fff; padding: 0; }
  /* 島は z=14 で縦およそ640px あり、地図をこれ以上低くすると南北の端の浜が図から外れる。
     そこで大きさは変えず、紙に収まるぶんだけ全体を縮める。
     zoom は組み方ごと縮むので、札の文字だけが取り残されて重なることがない
     （transform: scale だと、縮んだあとも元の高さぶん場所を取り、2枚目にこぼれる） */
  /* 幅を紙任せ（auto）にすると、図が刷り面いっぱいまで伸びて縦が足りなくなり、
     見出しとQRが2枚目へこぼれる。図の元の大きさで組んでから、
     見出しごと1枚に収まるぶんだけ縮める。

     よこで効くのは高さの制約（刷り面 210-8*2 = 194mm ＝ 約733px、シートは約834px）。
     計算上の上限は 733/834 = 0.88 だが、0.88 は実機で2枚目にこぼれた
     （ブラウザの改ページ計算は zoom 込みの寸法と完全には一致しない）。
     1枚に収まると実測できている 0.84 を使う。上げるなら1枚のままか必ず確認 */
  .mapsheet-page__sheet { width: 1040px; margin: 0 auto; padding: 0; box-shadow: none; zoom: .84; }
  .mapsheet-page .beachmap__frame { width: 1040px; }
  .tools { display: none; }
  /* 印の色と札の地は、紙でも必ず出す（既定では背景色が省かれる） */
  .beachmap__pin,
  .beachmap__flag,
  .beachmap__frame { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .beachmap { break-inside: avoid; }
}

/* スマホ・タブレットだけ、たて向きでも1枚に収まる値まで縮める。
   @page で よこ を指定していても、スマホの印刷プレビューは たて が既定で、
   向きの指定が効かない端末がある。0.84 のままだと幅 874px（約231mm）が
   たての刷り面（210-8*2 = 194mm ＝ 約733px）からはみ出し、2枚に分かれる。
     733/1040 = 0.70 → 幅約193mm・高さ約155mm で、たて1枚に収まる。
   図は横長なので、たての紙では下に余白が残る。これは紙の向きと図の形の差で、
   正立のまま埋める手は無い（90°回して敷き詰める案は、読む向きが変わるので不採用）。
   紙の向きは印刷時までCSSから分からないので、端末の種類で分ける
   （pointer: coarse ＝ 指で触る端末。印刷の中でも端末側の値で判定される）。
   パソコンは既定の 0.84 のまま、よこ1枚を目いっぱい使う */
@media print and (pointer: coarse) {
  .mapsheet-page__sheet { zoom: .70; }
}

/* スマホでも、印刷の設定で「横」を選んだときは、パソコンと同じ大きさまで戻す。
   0.70 のままだと、よこの広い刷り面に小さな図が置かれて余白だらけになる */
@media print and (pointer: coarse) and (orientation: landscape) {
  .mapsheet-page__sheet { zoom: .84; }
}