@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   オートオーエ — 定休日カレンダー 印刷／画像DLページ専用CSS
   （page-calendar-print.php でのみ読み込む。calendar.css の後に読む）

   Step A：月セレクトの表示制御＋印刷ページ用の基準ノブ拡大のみ。
   （黒/白モード＝Step B、印刷CSS＝Step C、DL＝Step D で追記）
   ═══════════════════════════════════════════════════════════════ */

/* ── 画面レイアウト ── */
.ooe-print-tool{
	max-width:720px;
	margin:0 auto;
}
.ooe-print-controls{
	display:flex;
	gap:1em;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	margin-bottom:1.4em;
}
.ooe-print-field{display:inline-flex;align-items:center;gap:.6em}
.ooe-print-label{color:var(--ooe-text);font-weight:700}
#ooe-print-month{
	font:inherit;
	padding:.4em .7em;
	background:#1c1c1c;
	color:#eaeaea;
	border:1px solid var(--ooe-rule);
	border-radius:4px;
}

/* ── 操作ボタン（印刷・後続DL） ── */
.ooe-print-actions{
	display:flex;
	gap:.7em;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	margin-bottom:1.4em;
}
.ooe-print-btn{
	font:inherit;
	font-weight:700;
	cursor:pointer;
	padding:.55em 1.4em;
	color:#111;
	background:var(--ooe-accent);
	border:none;
	border-radius:6px;
	line-height:1.2;
	transition:filter .15s ease;
}
.ooe-print-btn:hover{filter:brightness(1.08)}
.ooe-print-btn:active{filter:brightness(.94)}
.ooe-print-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* 補助ボタン（JPEG保存）＝主ボタン（印刷）と区別する枠線スタイル */
.ooe-print-btn--sub{
	color:var(--ooe-accent);
	background:transparent;
	border:2px solid var(--ooe-accent);
	padding:.45em 1.2em;
}
.ooe-print-btn--sub[disabled]{opacity:.55;cursor:progress}

/* ── 月シート：選択中の1枚だけ表示 ── */
.ooe-print-sheet{display:none}
.ooe-print-sheet.is-active{display:block}

/* ═══ ポスター体裁（参照ポスターの構図に寄せる上書き） ═══
   ここから下はすべて .ooe-print-sheet スコープ＝このページ限定。
   calendar.css（完成資産）とトップの2ヶ月カレンダーには影響しない。

   構図の意図：
   ・黄色い額縁は細く控えめ（主役は中身）
   ・見出し「◯月の定休日」を主役サイズ、「お知らせ」帯は脇役
   ・白いグリッドを看板幅いっぱいに（黒の左右余白は最小限）
   ═══════════════════════════════════════════════════════════════ */

/* 基準ノブ拡大（全体が em 比例で等倍スケール）＋黄枠。
   padding＝黄色い余白の太さ（.5em→1em に倍増）。 */
.ooe-print-sheet .ooe-cal{
	font-size:20px;
	padding:1em;
}

/* 黒看板：幅キャップ解除。黒余白は「左右は太く（1.5em）＝黒枠の見栄え維持」、
   「上下は詰める（1.3/1.2em）＝6週月の縦スペースを稼ぐ」。
   （左右を太いまま残すことで貼り出し時のどっしり感は保てる） */
.ooe-print-sheet .ooe-cal .board{
	max-width:none;
	padding:1.3em 1.5em 1.2em;
	border-radius:1.1em;
}

/* 単月グリッドの幅キャップ（22em）を解除して看板いっぱいに */
.ooe-print-sheet .ooe-cal .months.ooe-cal-single{
	grid-template-columns:minmax(0,1fr);
}
.ooe-print-sheet .ooe-cal .months{margin-top:.5em}

/* 「お知らせ」帯＝脇役サイズに（横棒は短めに整える） */
.ooe-print-sheet .ooe-cal .notice{font-size:1.1em}
.ooe-print-sheet .ooe-cal .notice::before,
.ooe-print-sheet .ooe-cal .notice::after{width:2.6em}

/* 月見出し「◯月の定休日」＝主役サイズ（6週月の縦節約でやや控えめに） */
.ooe-print-sheet .ooe-cal .month .month-title{
	font-size:1.6em;
	letter-spacing:.08em;
	margin-bottom:.3em;
}

/* 曜日ヘッダー：グリッド幅に合わせ少し大きく・グリッドに寄せる */
.ooe-print-sheet .ooe-cal .cal-head{margin-bottom:.25em}
.ooe-print-sheet .ooe-cal .cal-head span{font-size:1em}

/* 日付マス：ゆったり大きく（数字は上寄せのまま） */
.ooe-print-sheet .ooe-cal .day{
	min-height:3.9em;
	padding-top:.5em;
}

/* 全部空の最終行は行ごと畳む（ポスターの間延び防止）。
   エンジンは常に42セル（6行）を出す仕様＝2ヶ月横並びで高さを揃えるため。
   1ヶ月ポスターでは不要なので、5行目（29セル目〜）・6行目（36セル目〜）が
   「.empty のみ」のときだけ display:none で行ごと消す。
   ※日付が1つでも居る行はそのまま（欠けマスを作らない） */
.ooe-print-sheet .ooe-cal .cal-body:not(:has(.day:nth-child(n+29):not(.empty))) .day:nth-child(n+29),
.ooe-print-sheet .ooe-cal .cal-body:not(:has(.day:nth-child(n+36):not(.empty))) .day:nth-child(n+36){
	display:none;
}

/* フッター（営業時間・店名）：間合いを詰めて品よく（6週月の縦節約で更に圧縮） */
.ooe-print-sheet .ooe-cal .hours{margin-top:.55em;font-size:1.05em}
.ooe-print-sheet .ooe-cal .shop{margin-top:.35em;letter-spacing:.2em}

/* 日付の色（日曜=赤/土曜=青）は calendar.css の .ooe-cal スコープに移設。
   トップの2ヶ月版と印刷ページの両方が同ルールで色付く（DRY）。 */


/* ═══════════════════════════════════════════════════════════════
   A4プレビュー（画面）＋カレンダー伸縮フィル（Step C-2a）

   ・アクティブな1枚を A4縦比(210:297)の枠で見せ、印刷の仕上がりを
     画面でイメージできるようにする。
   ・カレンダーのマス目を「固定高さ」から「伸縮(1fr)」に変え、5週の月も
     6週の月も枠を過不足なく埋める（＝A4を常にピッタリ充填）。
   ・印刷される範囲を白い点線で示す（outline＝レイアウトに影響しない／
     印刷時は @media print で消す）。
   すべて .ooe-print-sheet スコープ＝トップの2ヶ月版に無影響。
   ═══════════════════════════════════════════════════════════════ */

/* A4縦の枠（読みやすい幅に）。白点線＝印刷範囲ガイド（画面のみ）。 */
.ooe-print-sheet.is-active{
	width:100%;
	max-width:460px;
	margin:1.4em auto 0;
	aspect-ratio:210 / 297;
	overflow:hidden;                            /* 万一の溢れはクリップ */
	outline:2px dashed rgba(255,255,255,.85);
	outline-offset:8px;
}

/* 高さ100%を看板→黒板→グリッドへと下まで伝える。
   基準ノブは6週(31日が土日始まり)の月でも中身が行に収まる控えめ値に。
   （グリッド外枠は1frで常にA4充填。セル内の数字+休丸だけが font 依存なので、
   　最も行が低くなる6週月を基準にサイズを決める） */
.ooe-print-sheet.is-active .ooe-cal{height:100%;font-size:17px}
.ooe-print-sheet.is-active .ooe-cal .board{
	height:100%;
	justify-content:flex-start;                 /* 上:お知らせ → 中:カレンダー(伸) → 下:フッター */
}

/* 単月グリッドを縦にも伸ばして残りの高さを埋める */
.ooe-print-sheet.is-active .months.ooe-cal-single{
	flex:1 1 auto;
	grid-template-rows:minmax(0,1fr);
	align-content:stretch;
	min-height:0;
}
.ooe-print-sheet.is-active .month{
	display:flex;
	flex-direction:column;
	height:100%;
	min-height:0;
}
.ooe-print-sheet.is-active .cal{
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	min-height:0;
}
.ooe-print-sheet.is-active .cal-body{
	flex:1 1 auto;
	grid-auto-rows:1fr;                         /* 週の行が均等に高さを分け合う＝枠を充填 */
	min-height:0;
}
/* マスは固定高さ(min-height)をやめ、1fr の配分に従わせる。
   中身（数字+休丸）を縦に詰め、低い行でもはみ出さないよう overflow で保険。 */
.ooe-print-sheet.is-active .day{
	min-height:0;
	padding-top:.5em;                           /* 5週月のゆったり配置（6週は下で上書き） */
	line-height:1.05;
	overflow:hidden;                            /* 万一のはみ出しを隣の行へ漏らさない */
}
/* 休丸：flex で縦潰れ（楕円化）しないよう固定。数字から下げてゆったり配置。
   ※これは5週月向けの値。6週月は行が低いので下の :has() 上書きで丸を上げる。 */
.ooe-print-sheet.is-active .day.off::after{
	flex-shrink:0;
	width:1.7em;
	height:1.7em;
	line-height:1.7em;                          /* 高さと一致＝中身で縦に伸びない（snapdom/foreignObject で楕円化するのを防ぐ） */
	aspect-ratio:1;                             /* 念のため正円を強制 */
	margin-top:.5em;
	font-size:.85em;
}

/* ── 6週の月だけ休丸を上げて収める ──
   6行目(セル36以降)に日付がある月＝6週＝行が低い（≒59px）。
   その月に限り、数字の上余白と休丸の間隔を詰めて丸を上へ引き上げ、
   .5em/.5em のままだと 3px はみ出す休丸をセル内に収める。
   5週月（7月等）は :has() が外れるので上の .5em/.5em のまま。 */
.ooe-print-sheet.is-active .cal-body:has(.day:nth-child(n+36):not(.empty)) .day{
	padding-top:.3em;
}
.ooe-print-sheet.is-active .cal-body:has(.day:nth-child(n+36):not(.empty)) .day.off::after{
	margin-top:.25em;
}


/* ═══════════════════════════════════════════════════════════════
   印刷（Step C-2b）— A4いっぱいにカレンダー1枚を刷る

   考え方：
   ・.no-print（ヘッダー/ナビ/フッター/セレクト/ボタン）は紙に出さない。
   ・表示中の1枚を position:fixed; inset:0 で紙の全面に広げる（＝A4充填）。
     @page margin:0 と合わせ、僅かな黄枠の内側を黒カレンダーが埋める。
   ・print-color-adjust:exact — ブラウザは省インク目的で背景色を落とす
     ことがある。黒看板と黄枠を「原色のまま刷れ」と明示する（最重要）。
   ・グリッドは 1fr 充填なので、文字・休丸だけ紙面に見合う大きさに上げる。
   ═══════════════════════════════════════════════════════════════ */
@media print{

	/* A4縦・フルブリード（黄枠を紙の縁近くまで＝「A4いっぱい」） */
	@page{ size:A4 portrait; margin:0; }

	/* 画面専用の要素は紙に出さない */
	.no-print{ display:none !important; }

	/* サイト骨格を隠してカレンダーだけにする（header=.site-header /
	   footer=.site-footer。#masthead/#colophon は保険） */
	#masthead,
	#colophon,
	.site-header,
	.site-footer{ display:none !important; }

	/* 背景・文字色を原色のまま刷る（省インク変換を無効化）。
	   ベンダー接頭辞込みで主要ブラウザをカバー。 */
	.ooe-print-sheet,
	.ooe-print-sheet *{
		-webkit-print-color-adjust:exact !important;
		print-color-adjust:exact !important;
	}

	/* 紙の地を白に＋余白殺し（黒ページが刷られるのを防ぐ） */
	html,body{
		background:#fff !important;
		margin:0 !important;
		padding:0 !important;
	}
	.ooe-print-tool{ max-width:none !important; margin:0 !important; }

	/* 表示中の1枚で紙面を丸ごと埋める。
	   position:fixed; inset:0 ＝ @page の全面にフィット（高さも自動で満たす）。
	   画面用の A4比・上余白・白点線・max-width はここで解除。 */
	.ooe-print-sheet.is-active{
		position:fixed !important;
		inset:0 !important;
		margin:0 !important;
		width:auto !important;
		height:auto !important;
		max-width:none !important;
		aspect-ratio:auto !important;
		outline:none !important;
		overflow:hidden !important;
	}

	/* 印刷では文字・休丸を紙面に見合う大きさに（グリッドは 1fr で自動充填）。
	   padding は僅かに残す＝全周の細い黄枠＝「僅かな黄色い余白」。 */
	.ooe-print-sheet.is-active .ooe-cal{
		font-size:30px !important;
		padding:1em !important;
		break-inside:avoid;
		page-break-inside:avoid;
	}
	.ooe-print-sheet.is-active .ooe-cal .board{
		break-inside:avoid;
		page-break-inside:avoid;
	}
}