/* =========================================
	 GRM Holiday Calendar / フロント表示
	 （v0.3.3〜：カードデザインに刷新）
========================================= */

/* ---- 凡例 ---- */
.grm-holiday-legend{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:8px;
	max-width:1000px;
	margin:16px auto 0;
}

.grm-holiday-legend-swatch{
	display:inline-block;
	width:14px;
	height:14px;
	border-radius:4px;
	background:#e2493c;
}

.grm-holiday-legend-swatch--partial{
	background:#fff3ea;
	border:2px solid #e2493c;
	box-sizing:border-box;
	margin-left:16px;
}

.grm-holiday-legend-swatch--cafe{
	background:#eaf7ee;
	border:2px solid #2f7a44;
	box-sizing:border-box;
	margin-left:16px;
}

.grm-holiday-legend-swatch--open-override{
	background:#fff;
	border:2px solid #2f7a44;
	box-sizing:border-box;
	margin-left:16px;
}

/* ---- 一部休業の色バリエーション（v0.5.4〜）：同じ月に異なる時間指定
	 （例：〜17:00と〜13:00）が混在する場合、セルと凡例の両方で色を
	 変えて見分けられるようにする。既定（1番目）は上の
	 is-partial-closed / --partial の色のまま、2番目・3番目だけ
	 ここで色を変える。 ---- */
.grm-holiday-cell.is-partial-closed.is-partial-variant-2{
	background:#e8f1fa;
	border:1px solid #2f6fa8;
	color:#1f4f7a;
}

.grm-holiday-cell.is-partial-closed.is-partial-variant-3{
	background:#f2e9fa;
	border:1px solid #7a4fa8;
	color:#5a3680;
}

.grm-holiday-legend-swatch--partial.is-partial-variant-2{
	background:#e8f1fa;
	border-color:#2f6fa8;
}

.grm-holiday-legend-swatch--partial.is-partial-variant-3{
	background:#f2e9fa;
	border-color:#7a4fa8;
}

.grm-holiday-cell.is-partial-closed.is-partial-variant-2 .grm-holiday-partial-note{
	color:#1f4f7a;
}

.grm-holiday-cell.is-partial-closed.is-partial-variant-3 .grm-holiday-partial-note{
	color:#5a3680;
}

.grm-holiday-legend-label{
	font-size:14px;
	color:#4a4a4a;
}

.grm-holiday-calendar-wrap{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:60px;
	max-width:1000px;
	margin:0 auto;
}

@media(max-width:767px){
	.grm-holiday-calendar-wrap{
		grid-template-columns:1fr;
		gap:40px;
	}
}

.grm-holiday-month-title{
	text-align:center;
	font-size:20px;
	font-weight:700;
	margin:0 0 20px;
	letter-spacing:.05em;
}

.grm-holiday-week-row{
	display:grid;
	grid-template-columns:repeat(7, 1fr);
	gap:8px;
	margin-bottom:10px;
}

.grm-holiday-week-cell{
	text-align:center;
	font-weight:700;
	font-size:13px;
	color:#8a8a8a;
	padding:6px 0;
	letter-spacing:.02em;
}

.grm-holiday-week-cell.is-sun{
	color:#e2493c;
}

.grm-holiday-week-cell.is-sat{
	color:#3f7fd1;
}

.grm-holiday-grid{
	display:grid;
	grid-template-columns:repeat(7, 1fr);
	gap:8px;
}

.grm-holiday-cell{
	aspect-ratio:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	border-radius:10px;
	background:#fff;
	border:1px solid #e9e9e9;
	color:#1a1a1a;
	font-size:16px;
	font-weight:600;
	overflow:hidden;
	padding:2px;
	box-sizing:border-box;
	transition:box-shadow .15s, transform .15s;
}

.grm-holiday-cell.is-blank{
	background:transparent;
	border-color:transparent;
}

.grm-holiday-cell.is-weekend{
	background:#fafafa;
}

/* ---- 休業日：赤のソリッドで強く示す ---- */
.grm-holiday-cell.is-closed{
	background:#e2493c;
	border-color:#e2493c;
	color:#fff;
	font-weight:700;
	box-shadow:0 2px 6px rgba(226,73,60,.25);
}

/* ---- 一部休業（午前のみ・午後のみ・時間指定）：終日休業と区別する ---- */
.grm-holiday-cell.is-partial-closed{
	background:#fff3ea;
	border:1px solid #e2493c;
	color:#b23a2f;
	font-weight:700;
}

.grm-holiday-partial-note{
	font-size:9px;
	line-height:1.2;
	font-weight:600;
	color:#b23a2f;
	text-align:center;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

@media(max-width:480px){
	.grm-holiday-partial-note{
		display:none;
	}
}

/* ---- カフェのみ休業：店舗自体は営業しているため、休業日・一部休業とは別の緑系で区別する ---- */
.grm-holiday-cell.is-cafe-closed{
	background:#eaf7ee;
	border:1px solid #2f7a44;
	color:#1f5c30;
	font-weight:700;
}

.grm-holiday-cafe-note{
	font-size:9px;
	line-height:1.2;
	font-weight:600;
	color:#1f5c30;
	text-align:center;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

@media(max-width:480px){
	.grm-holiday-cafe-note{
		display:none;
	}
}

/* ---- 定休日ルールに当てはまるが、臨時営業として休業日を解除した日 ---- */
.grm-holiday-cell.is-open-override{
	background:#fff;
	border:1px solid #2f7a44;
	color:#2f7a44;
	font-weight:700;
}

.grm-holiday-open-note{
	font-size:9px;
	line-height:1.2;
	font-weight:600;
	color:#2f7a44;
	text-align:center;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

@media(max-width:480px){
	.grm-holiday-open-note{
		display:none;
	}
}

/* ---- 日本の祝日ラベル ---- */
.grm-holiday-cell.is-jp-holiday:not(.is-closed) .grm-holiday-num{
	color:#e2493c;
}

.grm-holiday-jp-name{
	font-size:9px;
	line-height:1.2;
	font-weight:600;
	color:#e2493c;
	text-align:center;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.grm-holiday-cell.is-closed .grm-holiday-jp-name{
	color:#fff;
	opacity:.9;
}

@media(max-width:480px){
	.grm-holiday-jp-name{
		display:none;
	}
}

/* ---- 表示イメージ（サンプル）を囲む枠：ページ側で
	 .grm-holiday-demo-box というクラスを付けて使う想定 ---- */
.grm-holiday-demo-box{
	border:1px solid #eee;
	border-radius:16px;
	padding:32px 24px;
	background:#fafafa;
}