.color-fill-text {
  color: rgba(200, 200, 200, 0.3); /* 옅은 회색 기본 색상 */
  background-clip: text;
  -webkit-background-clip: text;
  display: inline-block;
  position: relative;
  font-weight: bold;
}

.color-fill-text::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 0%; /* 초기에는 채워지지 않음 */
  color: transparent;
  background-image: linear-gradient(to right, #000, #000);
  background-clip: text;
  -webkit-background-clip: text;
  overflow: hidden;
  white-space: nowrap;
  /* transition: width 0.5s ease-out; */
}

/* 보이는 영역에 들어오면 활성화되는 클래스 */
.color-fill-text.active::before {
  transition: width 0.5s ease-out;
  width: 100%; /* 100%까지 채워짐 */
}

/* 선택적: 여러 색상 테마 */

.theme-white .color-fill-text::before{
  background-image: linear-gradient(to right, #fff, #fff);
  
}
.theme-blue .color-fill-text::before {
  background-image: linear-gradient(to right, #0c62A7, #0c62A7);
}

.theme-purple .color-fill-text::before {
  background-image: linear-gradient(to right, #9D50BB, #6E48AA);
}

.theme-orange .color-fill-text::before {
  background-image: linear-gradient(to right, #FF6B00, #FF6B00);
}

.theme-white .color-fill-text {
  color: transparent; /* 또는 rgba(255, 255, 255, 0) */
}