@media (max-width: 768px) {
  .highlight-animate__text {
    font-size: 15px;
    line-height: 1.4;
    padding: 0 2px;
  }
  .highlight-animate__bg {
    border-radius: 2px;
    min-height: 1.6em;
  }
}

@media (max-width: 480px) {
  .highlight-animate__text {
    font-size: 13px;
    line-height: 1.3;
    padding: 0 1px;
  }
  .highlight-animate__bg {
    border-radius: 1px;
    min-height: 1.4em;
  }
}
/* 텍스트 하이라이트 애니메이션 (레퍼런스 사이트 스타일)
   - 민트색 박스가 텍스트 뒷면에서 오른쪽으로 넓어짐
   - 스크롤 노출 시 트리거 (Intersection Observer)
*/

.highlight-animate {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.highlight-animate__bg {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: #33918b;
  z-index: -1;
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}

.highlight-animate.active .highlight-animate__bg {
  width: 100%;
}

.highlight-animate__text {
  position: relative;
  z-index: 1;
}