/* =========================================================
   診療カレンダー（休診日カレンダー）
   Figma: 歯科テンプレートデザイン node 1:11701 に準拠（カラム幅 ≒631px 基準の実寸）
   配色は CSS 変数で集約 → クリニックごとに上書き可。
   状態: open(診療) / am(午前のみ) / pm(午後のみ) / closed(終日休診)
   ========================================================= */
.clinic-cal {
	--cc-card-bg: #fff;
	--cc-text: #28373b;
	--cc-open-bg: #d7eef4;   /* 診療日 */
	--cc-closed-bg: #fee3d2; /* 休診日 */
	--cc-sun: #eb6918;       /* 日曜の文字 */
	--cc-head-bg: #eee;      /* 曜日見出し・今月バー */

	width: 100%;
	/* 親カラム幅いっぱい（フッターでは上の診療時間表と同じ幅に揃う）。
	   単独設置で広がりすぎる場合だけ呼び出し側で max-width を指定する。 */
	margin-inline: auto;
	padding: 30px;
	background: var(--cc-card-bg);
	border-radius: 20px;
	color: var(--cc-text);
	font-family: inherit;
	box-sizing: border-box;
}
.clinic-cal *,
.clinic-cal *::before,
.clinic-cal *::after {
	box-sizing: border-box;
}

/* --- 見出し（2025年 5月） --- */
.clinic-cal__head {
	text-align: center;
	margin-block-end: 36px;
}
.clinic-cal__title {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.04em;
}
.clinic-cal__month {
	font-size: 48px;
	font-weight: 400;
	margin-inline: 8px;
	vertical-align: -8px; /* 大きい数字のベースライン微調整 */
}

/* --- グリッド --- */
/* 見出しキャプション（見た目上は非表示・スクリーンリーダー用） */
.clinic-cal__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* SWELL のテーブル既定スタイル（border-collapse / th 背景・色 / セル罫線・ストライプ）を打ち消す */
.clinic-cal__table {
	width: 100%;
	border-collapse: separate !important;
	border-spacing: 8px 10px !important;
	table-layout: fixed;
	margin-block: 0 24px;
	background: transparent;
}
.clinic-cal__table tr { background: transparent !important; }
.clinic-cal__table th,
.clinic-cal__table td {
	border: none !important;
	padding: 0;
}
.clinic-cal__dow {
	padding-block: 5px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	background: var(--cc-head-bg) !important;
	color: var(--cc-text) !important;
}
.clinic-cal__dow--0 { color: var(--cc-sun) !important; }

.clinic-cal__cell {
	height: 30px;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}
.clinic-cal__num {
	display: block;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
}

/* 状態ごとの背景 */
.clinic-cal__cell.is-open { background: var(--cc-open-bg); }
.clinic-cal__cell.is-closed { background: var(--cc-closed-bg); }
/* 半日: 上下スプリット（上=午前 / 下=午後）。診療側=open色, 休診側=closed色 */
.clinic-cal__cell.is-am {
	background: linear-gradient(to bottom, var(--cc-open-bg) 0 50%, var(--cc-closed-bg) 50% 100%);
}
.clinic-cal__cell.is-pm {
	background: linear-gradient(to bottom, var(--cc-closed-bg) 0 50%, var(--cc-open-bg) 50% 100%);
}
.clinic-cal__cell.is-empty { background: transparent; }

/* 日曜の数字色（休診背景でも判別できるよう数字に色） */
.clinic-cal__cell--dow0 .clinic-cal__num { color: var(--cc-sun); }

/* 今日（デザインには無いが機能として軽く強調） */
.clinic-cal__cell.is-today .clinic-cal__num { font-weight: 700; }

/* --- 今月バー（前 / 今月 / 次） --- */
.clinic-cal__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 14px;
	background: var(--cc-head-bg);
}
.clinic-cal__today {
	flex: 1;
	padding-block: 10px;
	border: none;
	background: transparent;
	color: var(--cc-text);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
}
.clinic-cal__today:disabled { cursor: default; }

.clinic-cal__nav {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1.5px solid var(--cc-text);
	border-radius: 50%;
	background: var(--cc-card-bg);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}
.clinic-cal__nav:disabled { opacity: 0.3; cursor: default; }
.clinic-cal__nav span {
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--cc-text);
	border-right: 2px solid var(--cc-text);
}
.clinic-cal__nav--prev span { transform: rotate(-135deg); margin-inline-start: 3px; }
.clinic-cal__nav--next span { transform: rotate(45deg); margin-inline-end: 3px; }

/* --- 凡例 --- */
.clinic-cal__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 50px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	font-size: 20px;
	font-weight: 500;
}
.clinic-cal__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.clinic-cal__legend-item span {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
}
.clinic-cal__legend-item.is-open span { background: var(--cc-open-bg); }
.clinic-cal__legend-item.is-closed span { background: var(--cc-closed-bg); }
.clinic-cal__legend-item.is-am span {
	background: linear-gradient(to bottom, var(--cc-open-bg) 0 50%, var(--cc-closed-bg) 50% 100%);
}
.clinic-cal__legend-item.is-pm span {
	background: linear-gradient(to bottom, var(--cc-closed-bg) 0 50%, var(--cc-open-bg) 50% 100%);
}

/* --- スマホ（カラムが狭くなる）では実寸を縮小 --- */
@media screen and (max-width: 600px) {
	.clinic-cal { padding: 18px; border-radius: 14px; }
	.clinic-cal__head { margin-block-end: 22px; }
	.clinic-cal__title { font-size: 15px; }
	.clinic-cal__month { font-size: 32px; vertical-align: -5px; }
	.clinic-cal__table { border-spacing: 4px 6px !important; margin-block-end: 16px; }
	.clinic-cal__dow { font-size: 12px; padding-block: 3px; }
	.clinic-cal__cell { height: 22px; }
	.clinic-cal__num { font-size: 14px; }
	.clinic-cal__today { font-size: 17px; padding-block: 8px; }
	.clinic-cal__nav { width: 22px; height: 22px; }
	.clinic-cal__nav span { width: 5px; height: 5px; border-width: 1.5px; }
	.clinic-cal__legend { gap: 12px 28px; font-size: 14px; }
	.clinic-cal__legend-item span { width: 14px; height: 14px; }
}