/* Simple Business Calendar
   フォントはテーマを継承し、色だけをCSS変数で受け取る設計。
   どのテーマに置いても浮かないことを最優先にしています。 */

.sbc {
	--sbc-closed-bg: #fdecec;
	--sbc-closed-fg: #b4232a;
	--sbc-event-bg: #e8f2fb;
	--sbc-event-fg: #14568f;
	--sbc-sat: #2f7fbf;
	--sbc-sun: #c0392b;
	--sbc-today: #2c3e50;
	--sbc-line: rgba(0, 0, 0, 0.12);
	--sbc-muted: rgba(0, 0, 0, 0.55);
	--sbc-radius: 4px;

	font-size: inherit;
	line-height: 1.4;
	max-width: 100%;
}

.sbc *,
.sbc *::before,
.sbc *::after {
	box-sizing: border-box;
}

/* ---------- 月送り ---------- */

.sbc-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 0.6em;
}

.sbc-nav-current {
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	flex: 1 1 auto;
}

.sbc-nav-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border: 1px solid var(--sbc-line);
	border-radius: var(--sbc-radius);
	color: inherit;
	text-decoration: none;
	font-size: 1.1em;
	line-height: 1;
	background: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sbc-nav-btn:hover,
.sbc-nav-btn:focus-visible {
	background: rgba(0, 0, 0, 0.05);
	border-color: currentColor;
	text-decoration: none;
}

.sbc-nav-btn:focus-visible {
	outline: 2px solid var(--sbc-today);
	outline-offset: 2px;
}

.sbc-nav-btn.is-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

/* ---------- カレンダー本体 ---------- */

.sbc-months {
	display: grid;
	gap: 1.2em;
	grid-template-columns: 1fr;
}

.sbc-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
	background: transparent;
}

.sbc-caption {
	caption-side: top;
	text-align: center;
	font-weight: 700;
	padding-bottom: 0.4em;
	color: inherit;
}

/* 月送りを出しているときは各月の見出しが重複するので隠す */
.sbc-body[data-nav="1"] .sbc-months .sbc-table:first-child .sbc-caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	padding: 0;
}

.sbc-table th,
.sbc-table td {
	border: 1px solid var(--sbc-line);
	padding: 0;
	text-align: center;
	vertical-align: middle;
	background: transparent;
}

.sbc-head {
	font-size: 0.82em;
	font-weight: 600;
	padding: 0.4em 0;
	color: var(--sbc-muted);
}

.sbc-head.sbc-sat {
	color: var(--sbc-sat);
}

.sbc-head.sbc-sun {
	color: var(--sbc-sun);
}

.sbc-cell {
	position: relative;
	height: 2.6em;
	font-size: 0.95em;
	font-variant-numeric: tabular-nums;
}

.sbc-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 2.6em;
	color: inherit;
}

a.sbc-num-link {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

a.sbc-num-link:hover,
a.sbc-num-link:focus-visible {
	text-decoration-thickness: 2px;
}

.sbc-cell.sbc-sat .sbc-num {
	color: var(--sbc-sat);
}

.sbc-cell.sbc-sun .sbc-num,
.sbc-cell.sbc-holiday .sbc-num {
	color: var(--sbc-sun);
}

.sbc-cell.sbc-empty {
	background: transparent;
	border-color: transparent;
}

/* 休業日 */
.sbc-cell.sbc-closed {
	background: var(--sbc-closed-bg);
}

.sbc-cell.sbc-closed .sbc-num {
	color: var(--sbc-closed-fg);
	font-weight: 600;
}

/* イベント日 */
.sbc-cell.sbc-event {
	background: var(--sbc-event-bg);
}

.sbc-cell.sbc-event .sbc-num {
	color: var(--sbc-event-fg);
	font-weight: 600;
}

/* 休業かつイベントの日は、上辺の帯でイベントを示す */
.sbc-cell.sbc-closed.sbc-event {
	background: var(--sbc-closed-bg);
}

.sbc-cell.sbc-closed.sbc-event::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--sbc-event-fg);
}

.sbc-cell.sbc-closed.sbc-event .sbc-num {
	color: var(--sbc-closed-fg);
}

/* 今日 */
.sbc-cell.sbc-is-today {
	box-shadow: inset 0 0 0 2px var(--sbc-today);
}

/* スクリーンリーダー向けの補足 */
.sbc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- 凡例・補足 ---------- */

.sbc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1em;
	margin: 0.7em 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.82em;
	color: var(--sbc-muted);
}

.sbc-legend li {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.sbc-swatch {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 1px solid var(--sbc-line);
	border-radius: 2px;
	flex: 0 0 auto;
}

.sbc-swatch-closed {
	background: var(--sbc-closed-bg);
}

.sbc-swatch-event {
	background: var(--sbc-event-bg);
}

.sbc-note {
	margin-top: 0.7em;
	font-size: 0.85em;
	color: var(--sbc-muted);
}

.sbc-note p {
	margin: 0 0 0.3em;
}

.sbc-note p:last-child {
	margin-bottom: 0;
}

/* ---------- イベント一覧 ---------- */

.sbc-events {
	margin: 0.9em 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.88em;
	border-top: 1px solid var(--sbc-line);
}

.sbc-events li {
	display: flex;
	gap: 0.7em;
	margin: 0;
	padding: 0.45em 0;
	border-bottom: 1px solid var(--sbc-line);
}

.sbc-events-date {
	flex: 0 0 5.5em;
	color: var(--sbc-event-fg);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---------- 状態 ---------- */

.sbc-body.is-loading {
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.sbc *,
	.sbc *::before,
	.sbc *::after {
		transition: none !important;
	}
}

/* ---------- 複数月表示 ----------
   min() を挟むことで、狭いサイドバーでも1列に落ちて横あふれしません。 */

.sbc-months {
	grid-template-columns: repeat(auto-fit, minmax(min(16em, 100%), 1fr));
}