/* 微調整は CSS 変数で行う（ショートコードの width / font_size 属性、またはテーマ側 CSS で上書き可） */
.phx-biz-calendar {
	--bc-width: 100%;
	--bc-font-size: 14px;
	--bc-border: #ccc;
	--bc-cell-height: 2.2em;
	width: var(--bc-width);
	max-width: 100%;
	font-size: var(--bc-font-size);
	box-sizing: border-box;
}
.phx-biz-calendar *, .phx-biz-calendar *::before, .phx-biz-calendar *::after { box-sizing: border-box; }
.phx-biz-calendar::after { content: ""; display: block; clear: both; }
.phx-biz-calendar__picker { overflow: hidden; }
/* 複数月表示時に jQuery UI が付ける inline width（17em × 月数）を打ち消す */
.phx-biz-calendar .ui-datepicker { width: 100% !important; display: block; float: none; }
.phx-biz-calendar .ui-datepicker-group { float: left; width: 100%; padding: 0 4px; }
.phx-biz-calendar .ui-datepicker-header { position: relative; text-align: center; padding: .5em 0; font-weight: bold; }
.phx-biz-calendar .ui-datepicker-prev,
.phx-biz-calendar .ui-datepicker-next { position: absolute; top: .5em; cursor: pointer; font-weight: normal; font-size: .85em; }
.phx-biz-calendar .ui-datepicker-prev { left: 4px; }
.phx-biz-calendar .ui-datepicker-next { right: 4px; }

/* 罫線あり */
.phx-biz-calendar table.ui-datepicker-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid var(--bc-border); }
.phx-biz-calendar .ui-datepicker-calendar th,
.phx-biz-calendar .ui-datepicker-calendar td { text-align: center; padding: 0; border: 1px solid var(--bc-border); }
.phx-biz-calendar .ui-datepicker-calendar th { background: #f5f5f5; font-weight: normal; padding: .25em 0; }
.phx-biz-calendar .ui-datepicker-calendar td span,
.phx-biz-calendar .ui-datepicker-calendar td a { display: block; height: var(--bc-cell-height); line-height: var(--bc-cell-height); text-decoration: none; color: inherit; }
.phx-biz-calendar .ui-datepicker-today span,
.phx-biz-calendar .ui-datepicker-today a { outline: 2px solid currentColor; outline-offset: -2px; }
.phx-biz-calendar td.bc-full,
.phx-biz-calendar td.bc-half { pointer-events: none; }
.phx-biz-calendar td.bc-full span,
.phx-biz-calendar td.bc-full a { background: var(--bc-color, #e57373); color: #fff; }
/* 半日休み: 色を斜めに半分だけ塗る */
.phx-biz-calendar td.bc-half span,
.phx-biz-calendar td.bc-half a { background: linear-gradient(135deg, var(--bc-color, #ffb74d) 50%, transparent 50%); }

.phx-biz-calendar__legend { clear: both; list-style: none; margin: .75em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5em 1.25em; font-size: .85em; }
.phx-biz-calendar__swatch { display: inline-block; width: 1em; height: 1em; margin-right: .4em; border-radius: 2px; vertical-align: -.15em; }

/* サイドバー用: 幅200px・月は縦並び・コンパクト */
.phx-biz-calendar--sidebar { --bc-width: 200px; --bc-font-size: 12px; --bc-cell-height: 1.9em; }
.phx-biz-calendar--sidebar .ui-datepicker-group { padding: 0 0 .75em; }

/* 本文用: 幅100%（最大720px）・広い画面で横並び */
.phx-biz-calendar--body { max-width: min(100%, 720px); }
@media (min-width: 640px) {
	.phx-biz-calendar--body .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; }
	.phx-biz-calendar--body .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.333%; }
}

/* バナー用: 横長・3か月を横並び・低いセル */
.phx-biz-calendar--banner { --bc-font-size: 12px; --bc-cell-height: 1.8em; }
.phx-biz-calendar--banner .ui-datepicker-group { width: 100%; }
@media (min-width: 640px) {
	.phx-biz-calendar--banner .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; }
	.phx-biz-calendar--banner .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.333%; }
	.phx-biz-calendar--banner .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; }
}