/* 配るための1枚（/schedule/print/）専用のスタイル。
   A4たて1枚に収めることだけを考えているので、サイト本体の style.css は読み込まない。

   画面で見るときは、紙のイメージ（白い面）を灰色の背景に置いて確認できるようにし、
   印刷では余白・文字サイズを紙に合わせて切り替える（@media print）。 */

:root {
  --ink: #1c1f22;
  --ink-soft: #3d444b;
  --ink-faint: #5d656e;
  --line: #c9cfd6;
  --line-soft: #e2e6ea;
  --blue: #16558f;
  --alert: #8a4b00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 24px;
  background: #eef0f3;
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- 画面だけに出す操作 ---------- */
.tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.tools__btn {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: 4px;
  padding: 10px 22px;
  cursor: pointer;
}
.tools__btn:hover { background: #0f4272; }
.tools__link { color: var(--blue); }
.tools__note { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- 紙 ---------- */
.sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 20px auto;
  padding: 14mm 14mm 10mm;
  background: #fff;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
}

.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10mm;
  padding-bottom: 4mm;
  border-bottom: 2px solid var(--blue);
}
/* 団体のマークと題字 */
.sheet__title { display: flex; align-items: center; gap: 5mm; }
.sheet__mark { width: 22mm; height: 22mm; flex: 0 0 auto; }

.sheet__eyebrow {
  margin: 0 0 2px;
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--blue);
}
.sheet__ttl { margin: 0; font-size: 25px; line-height: 1.25; letter-spacing: .01em; }
.sheet__ttl span { font-size: 15px; font-weight: 400; }
.sheet__lead { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }

/* 要点は表組みにして、ぱっと見で条件が分かるようにする */
.sheet__facts { list-style: none; margin: 0; padding: 0; flex: 0 0 auto; }
.sheet__facts li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  border-bottom: 1px dotted var(--line-soft);
  padding: 1.5px 0;
}
.sheet__facts span { flex: 0 0 3.6em; color: var(--ink-faint); }
.sheet__facts strong { font-size: 13px; }

.sheet__sec { margin-top: 6mm; }
.sheet__sec h2 {
  margin: 0 0 2.5mm;
  font-size: 14.5px;
  color: var(--blue);
  border-left: 4px solid var(--blue);
  padding-left: 7px;
  line-height: 1.3;
}
.sheet__hint { margin: 2mm 0 0; font-size: 11px; color: var(--ink-faint); }
.sheet__empty { margin: 0; font-size: 12.5px; }

/* ---------- この紙の主役：1日ぶんの集合場所 ---------- */
.today { margin-top: 5mm; }
.today__date {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0 0 2.5mm;
  padding-bottom: 2mm;
  border-bottom: 1px solid var(--line);
}
.today__md { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.today__dow { font-size: 15px; color: var(--ink-soft); }
.today__at { margin-left: auto; font-size: 17px; font-weight: 700; color: var(--blue); }

.today__places--two { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
/* 地名が何の地名かを示す小見出し。紙は読み返せないので、必ず地名より先に目に入れる */
.today__eyebrow {
  display: inline-block;
  margin: 0 0 1.5mm;
  padding: 1mm 2.5mm;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--blue);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.today__name { margin: 0; font-size: 26px; line-height: 1.2; }
.today__name small { font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.today__x {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--alert);
  padding: 2px 8px;
  vertical-align: middle;
}
.today__addr { margin: 1.5mm 0 0; font-size: 12.5px; color: var(--ink-soft); }
/* その集合場所から回る海岸。1箇所だけの日は見出しと同じになるので出さない */
.today__beaches { margin: 1.5mm 0 0; font-size: 12.5px; color: var(--ink-soft); }
.today__facil { margin: 1mm 0 0; font-size: 12.5px; }
.today__facil strong { color: var(--blue); }
.today__note { margin: 1mm 0 0; font-size: 11.5px; color: var(--ink-soft); }
.today__nomap { margin: 2mm 0 0; font-size: 11.5px; color: var(--ink-faint); }

.today__map { margin: 2.5mm 0 0; }
.today__map iframe {
  display: block;
  width: 100%;
  height: 88mm;
  border: 1px solid var(--line);
}
.today__map figcaption { margin-top: 1mm; font-size: 10.5px; color: var(--ink-faint); }
/* 公式サイトのQRコード。題字と同じ段（ヘッダー）に置いて、そのぶんの高さを地図に回す。
   紙ではヘッダーが display:block になるので float で右へ、画面では order で右端へ */
.sheet__qr {
  order: 3;
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  padding: 1.5mm 2mm;
  border: 1px solid var(--line);
}
.sheet__qr img { display: block; width: 24mm; height: 24mm; margin: 0 auto; }
.sheet__qr figcaption { margin-top: 1mm; font-size: 9px; line-height: 1.4; color: var(--ink-faint); }
.sheet__qr strong { font-size: 10.5px; color: var(--ink); }

.today__warn {
  margin: 3mm 0 0;
  padding: 2mm 3mm;
  background: #fdf6ec;
  border: 1px solid #e8d3b0;
  font-size: 11.5px;
  line-height: 1.6;
}
.today__warn strong { color: var(--alert); }

/* ---------- 予定の表 ---------- */
.plan { width: 100%; border-collapse: collapse; }
.plan th,
.plan td {
  border: 1px solid var(--line);
  padding: 2mm 2.5mm;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
}
.plan th { background: #f2f5f8; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.plan__date { white-space: nowrap; }
.plan__date strong { font-size: 14px; }
.plan__rel { margin-left: 4px; font-size: 10.5px; color: var(--blue); }
.plan__place strong { font-size: 14px; }
.plan__note { display: block; font-size: 10.5px; color: var(--ink-faint); }
.plan__mark { text-align: center; white-space: nowrap; }
.plan__x {
  margin-left: 5px;
  border: 1px solid var(--alert);
  color: var(--alert);
  font-size: 10.5px;
  padding: 0 5px;
}
.plan--canceled td { color: var(--ink-faint); }

/* ---------- 参加のしかた・持ち物 ---------- */
.sheet__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }

.steps { margin: 0; padding-left: 1.3em; }
.steps li { margin-bottom: 2mm; font-size: 11.5px; color: var(--ink-soft); }
.steps strong { display: block; font-size: 12.5px; color: var(--ink); }

.bring { list-style: none; margin: 0; padding: 0; }
.bring li {
  font-size: 11.5px;
  color: var(--ink-soft);
  padding: 1mm 0 1mm 1.2em;
  border-bottom: 1px dotted var(--line-soft);
  position: relative;
}
.bring li::before { content: "□"; position: absolute; left: 0; color: var(--blue); }
.bring strong { display: block; font-size: 12.5px; color: var(--ink); }
.provided {
  margin: 2.5mm 0 0;
  padding: 2mm 3mm;
  background: #f2f5f8;
  border: 1px solid var(--line-soft);
  font-size: 12px;
}
.provided span { display: block; font-size: 10.5px; color: var(--ink-faint); }

/* ---------- 注意 ---------- */
.cautions { list-style: none; margin: 0; padding: 0; }
.cautions li {
  font-size: 11.5px;
  color: var(--ink-soft);
  padding: 1.2mm 0 1.2mm 1.2em;
  position: relative;
}
.cautions li::before { content: "・"; position: absolute; left: 0; }
.cautions strong { color: var(--ink); }

/* ---------- 足 ---------- */
.sheet__foot { margin-top: 6mm; padding-top: 3mm; border-top: 1px solid var(--line); }
.sheet__foot-main { margin: 0; font-size: 11.5px; }
.sheet__foot-main span { margin-left: 10px; color: var(--ink-soft); }
.sheet__foot-sub { margin: 1mm 0 0; font-size: 10px; color: var(--ink-faint); }

/* 狭い画面用の組み替えは置かない。
   この1枚は紙に合わせて組んだものなので、画面が狭いからと1段組みに変えると、
   プレビューと実際に刷られる紙が食い違ってしまう。
   スマホでもA4と同じ幅で組ませ（<meta name="viewport" content="width=840">）、
   画面に入りきらないぶんは端末側の縮小表示に任せる。 */

/* ---------- 印刷 ---------- */
@page { size: A4 portrait; margin: 12mm; }

@media print {
  /* 紙幅（A4 - 余白 = 186mm）は画面より狭く、そのままでは行が増えて2枚目にこぼれる。
     文字と余白を一段詰めて、たて1枚に収める */
  html, body { height: auto; }
  body { background: #fff; padding: 0; font-size: 11px; line-height: 1.55; }
  .tools { display: none; }
  /* 紙幅（A4 - @page の余白 = 186mm）を数値で持たせる。auto のままだと、
     スマホの印刷は画面の幅（390px 前後）でそのまま組まれてしまい、
     折り返しが増えて2枚目にこぼれる。ここを固定すると、どの端末から刷っても
     パソコンと同じ組み方（＝たて1枚）になる */
  html, body { width: 186mm; }
  .sheet {
    width: 186mm;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
  }
  .sheet__ttl { font-size: 20px; }
  /* 紙では「どこへ・いつ」が主役。英字の飾りとリード文は落として、
     条件は1行に流す（そのぶんを地図と集合場所に回す） */
  .sheet__eyebrow { display: none; }
  .sheet__lead { font-size: 10.5px; margin-top: 2px; }
  .sheet__head { display: block; }
  /* マークは紙でも出す（背景画像ではなく img なので、既定の設定でも印刷される） */
  .sheet__mark { width: 17mm; height: 17mm; }
  .sheet__title { gap: 4mm; }
  .sheet__facts { display: flex; flex-wrap: wrap; gap: 0 4mm; margin-top: 2mm; }
  .sheet__facts li { border: 0; padding: 0; gap: 4px; }
  .sheet__facts span { flex: 0 0 auto; }
  .sheet__sec { margin-top: 3.5mm; }
  .sheet__sec h2 { font-size: 13px; margin-bottom: 2mm; }
  .sheet__cols { gap: 6mm; }
  .plan th, .plan td { padding: 1.4mm 2mm; font-size: 11px; }
  .plan__date strong, .plan__place strong { font-size: 12.5px; }
  .steps li, .bring li, .cautions li { font-size: 10.5px; }
  /* 紙では見出しと説明を同じ行に流して、行数を半分にする（画面では2行のまま） */
  .steps strong, .bring strong { display: inline; font-size: 10.5px; }
  .steps strong::after, .bring strong::after, .cautions strong::after { content: "："; font-weight: 400; }
  .bring li { padding-top: .7mm; padding-bottom: .7mm; }
  /* 注意書きは2段に流して、たての高さを半分に抑える */
  .cautions { columns: 2; column-gap: 6mm; }
  .cautions li { padding-top: .6mm; padding-bottom: .6mm; font-size: 10px; break-inside: avoid; }
  .provided { margin-top: 2mm; padding: 1.5mm 2.5mm; font-size: 11px; }
  .sheet__foot { margin-top: 4.5mm; padding-top: 2.5mm; }
  /* 主役（日付・場所・地図）は紙でも大きさを保ち、まわりを詰めて1枚に収める */
  .today { margin-top: 3mm; }
  .today__md { font-size: 26px; }
  .today__name { font-size: 22px; }
  .today__eyebrow { margin-bottom: 1mm; padding: 0.8mm 2mm; font-size: 10px; }
  .today__at { font-size: 15px; }
  .today__warn { margin-top: 2mm; padding: 1.5mm 2.5mm; font-size: 10px; line-height: 1.5; }
  /* ヘッダーは display:block なので、QRは float で題字の右へ回り込ませる。
     マーク（17mm）と要点の行でどのみち埋まる高さなので、ここに置くぶんの増分はほぼ無い */
  .sheet__qr { float: right; margin-left: 5mm; padding: 1.2mm 1.8mm; }
  .sheet__qr img { width: 19mm; height: 19mm; }
  .sheet__qr figcaption { font-size: 8px; }
  .today__map { margin-top: 2mm; }
  /* 紙の余白は地図に回す。ピンは中央にあるので、上下を切っても集合場所は残る。
     この値は積み上げで決めている（A4の使用可能高さ＝297-24＝273mm）。
       ・地図82mm・QRが中止案内の横にあった頃の組みで、1枚に収まることを実測済み
       ・QRをヘッダーへ移して中止案内の行が24.5mm縮み、ヘッダーがQRの高さに
         引っ張られて5.8mm伸び、「集合場所」ラベルで5.2mm増えた（差引 +13.5mm）
       ・そのうち7.5mmは、プリンタや文字幅の差ぶんの余裕として残す
     2枚目にこぼれるようなら、まずここを数mm下げる */
  .today__map iframe { height: 88mm; }
  /* 2カ所回る日は地図が横に並び、住所や施設の行も2つぶん増えるので低くする
     （同じ考え方で、実測済みの64mmに稼いだぶんを足して余裕を引いた値） */
  .today__places--two .today__map iframe { height: 70mm; }
  /* 地図は色を落とさずそのまま刷る（既定では背景色が飛ばされる） */
  .today__map, .today__map iframe { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .today__map figcaption { font-size: 9.5px; }
  .today__date { margin-bottom: 2mm; padding-bottom: 1.5mm; }
  .today__addr, .today__facil, .today__beaches { font-size: 11px; }
  .sheet__head { padding-bottom: 3mm; }
  /* QRの回り込みをヘッダーの中で終わらせる（下の日付が右に寄らないように） */
  .sheet__head::after { content: ''; display: block; clear: both; }
  .sheet__facts li { font-size: 10.5px; }
  .sheet__facts strong { font-size: 11.5px; }
  .steps li { margin-bottom: 1.5mm; }
  .sheet__foot-main { font-size: 10.5px; }
  .sheet__foot-sub { font-size: 9px; }
  /* 地図が途中で切れないように */
  .today, .today__place, .today__map { break-inside: avoid; }
  /* 見出しと中身が別のページに分かれないようにする */
  .sheet__sec, .plan tr, .steps li, .bring li, .cautions li { break-inside: avoid; }
  .sheet__sec h2 { break-after: avoid; }
  /* 印刷では下線や薄い色が飛びやすいので、罫線は確実に出す色にする */
  .plan th { background: #eef1f4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .provided { background: #f4f6f8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* スマホ・タブレットからの印刷だけ、地図を低くして1枚に収める。
   iPhoneの印刷は @page の余白（12mm）どおりには刷られず、端末側の余白や
   ヘッダー・フッターのぶん刷り面が狭い。パソコンで1枚に収まる高さ（88mm）のままだと
   その差ぶんがこぼれて2枚になる。
   紙の向きや余白は印刷時までCSSから分からないので、端末の種類（pointer: coarse ＝
   指で触る端末）で分ける。判定は印刷の中でも端末側の値で行われる */
@media print and (pointer: coarse) {
  .today__map iframe { height: 72mm; }
  .today__places--two .today__map iframe { height: 58mm; }
}