/* ============================================================
   assets/css/calendar.css
   営業日カレンダー・リスト表示・モーダル
   ============================================================ */

.calendar-wrap { width: 100%; max-width: 640px; margin: 0 auto; }

/* ナビゲーション */
.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.calendar-nav__btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-text-light); cursor: pointer; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); background: none; transition: border-color var(--transition-fast), color var(--transition-fast); }
.calendar-nav__btn:hover { border-color: var(--color-text); color: var(--color-text); }
.calendar-nav__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.calendar-nav__title { font-size: var(--font-size-lg); font-weight: 400; letter-spacing: var(--letter-spacing-wide); color: var(--color-text); }

/* カレンダーグリッド */
.calendar-grid { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.calendar-grid__head th { padding: var(--space-3) 0; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--color-text-lighter); text-align: center; }
.calendar-grid__head .th-sun { color: color-mix(in srgb, #E74C3C 80%, var(--color-text)); }
.calendar-grid__head .th-sat { color: color-mix(in srgb, #3498DB 80%, var(--color-text)); }
.calendar-grid td { width: calc(100% / 7); padding: 0; vertical-align: top; }

.calendar-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 72px; padding: var(--space-2); background-color: var(--color-base); border-radius: var(--radius-sm); transition: background-color var(--transition-fast); position: relative; }
.calendar-day__num { font-size: var(--font-size-sm); color: var(--color-text); line-height: 1; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; font-family: var(--font-family-en, inherit); }
.calendar-day--today .calendar-day__num { background-color: var(--color-text); color: var(--color-base); font-weight: 700; box-shadow: 0 4px 10px color-mix(in srgb, var(--color-text) 20%, transparent); }
.calendar-day--sun .calendar-day__num { color: color-mix(in srgb, #E74C3C 80%, var(--color-text)); }
.calendar-day--sat .calendar-day__num { color: color-mix(in srgb, #3498DB 80%, var(--color-text)); }
.calendar-day--other-month .calendar-day__num { color: var(--color-text-lighter); opacity: 0.5; }

/* イベントドット（グリッド用） */
.calendar-day__event { width: 100%; margin-top: auto; border-radius: 4px; padding: 4px; font-size: 9px; line-height: 1.2; font-weight: 600; text-align: center; letter-spacing: 0.05em; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.calendar-day__event--closed  { background-color: var(--color-accent); color: var(--color-text-on-accent); }
.calendar-day__event--event   { background-color: var(--color-text); color: var(--color-base); }
.calendar-day__event--limited { background-color: var(--color-base-alt); color: var(--color-text); border: 1px solid var(--color-border); }
.calendar-day__event--special { background-color: var(--color-text-light); color: var(--color-base); }

/* クリック可能なイベントセルのホバーアクション */
.js-calendar-event { cursor: pointer; }
.js-calendar-event:hover { background-color: var(--color-base-alt); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

/* 凡例 */
.calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); padding: var(--space-5); background-color: var(--color-base-alt); border-radius: var(--radius-md); }
.calendar-legend__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text); font-weight: 500; }
.calendar-legend__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.calendar-legend__dot--closed  { background-color: var(--color-accent); }
.calendar-legend__dot--event   { background-color: var(--color-text); }
.calendar-legend__dot--limited { background-color: var(--color-base-alt); border: 1px solid var(--color-border); }
.calendar-legend__dot--special { background-color: var(--color-text-light); }

/* ============================================================
   スマホ向け リスト表示
   ============================================================ */
.calendar-sp-list { margin-top: var(--space-8); }
.calendar-sp-list__title { font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--color-text-lighter); margin-bottom: var(--space-3); }
.calendar-sp-list__item { padding: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2); }
.calendar-sp-list__item-header { display: flex; align-items: center; gap: var(--space-3); }
.calendar-sp-list__date { font-size: var(--font-size-sm); color: var(--color-text-light); font-weight: 500; }
.calendar-sp-list__title { font-size: var(--font-size-base); color: var(--color-text); font-weight: 500; line-height: var(--line-height-tight); }
.calendar-sp-list__click-text { font-size: var(--font-size-xs); color: var(--color-text-lighter); }

/* PCではリストを非表示 */
@media (min-width: 768px) {
    .calendar-sp-list { display: none; }
}

/* ============================================================
   イベント詳細モーダル（ポップアップ）
   ============================================================ */
.calendar-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); padding: var(--space-4); }
.calendar-modal.is-open { opacity: 1; visibility: visible; }
.calendar-modal__content { background-color: var(--color-base); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; border-radius: var(--radius-md); position: relative; padding: var(--space-8) var(--space-6); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.calendar-modal__close { position: absolute; top: var(--space-3); right: var(--space-3); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--color-base-alt); border-radius: 50%; color: var(--color-text); border: none; transition: opacity var(--transition-fast); }
.calendar-modal__close:hover { opacity: 0.7; }
.calendar-modal__thumb { width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: var(--space-5); aspect-ratio: 16/9; object-fit: cover; }
.calendar-modal__date { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-light); margin-bottom: var(--space-2); }
.calendar-modal__title { font-size: var(--font-size-xl); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-wide); margin-bottom: var(--space-4); color: var(--color-text); }
.calendar-modal__note { font-size: var(--font-size-sm); color: var(--color-text-light); background-color: var(--color-base-alt); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.calendar-modal__body { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text); border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-4); }
.calendar-modal__body img { border-radius: var(--radius-sm); }