.vac-wrap {
  display: grid;
  gap: 40px;
}

.vac-title {
  margin: 8px 0 4px;
  font-weight: 700;
  font-size: 1.1rem;
}

.vac-cal {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
}

.vac-cal th, .vac-cal td {
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: top;
  padding: 6px;
}

.vac-day {
  position: relative;
  min-height: 56px;
}

.vac-day-label {
  position: absolute;
  top: 4px;
  left: 6px;
  font-weight: 600;
  font-size: 12px;
  opacity: 0.85;
}

/* 色分け（お好みで変更） */
.vac-day.is-3 { background: #e9f7ef; } /* 空床3：十分余裕 */
.vac-day.is-2 { background: #fff8e1; } /* 空床2：やや余裕 */
.vac-day.is-1 { background: #ffe9e0; } /* 空床1：残りわずか */
.vac-day.is-0 { background: #ffd6d6; } /* 空床0：満床 */

/* 空セル */
.vac-cal td.is-empty {
  background: #fafafa;
}

/* レスポンシブ例：幅が狭いと縦並びに */
@media (max-width: 800px) {
  .vac-wrap {
    grid-template-columns: 1fr;
  }
}