/* Filter Button */
.filter-btn {
  transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1),
    background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn[data-filter-status="active"] {
  background-color: transparent;
  color: #efeeec;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* ── Filter List Item ── */
/* 모바일 우선: display:none으로 렌더 트리에서 완전 제거 */
.filter-list__item[data-filter-status="active"] {
  display: block;
  opacity: 1;
  visibility: visible;
  position: relative;
  pointer-events: auto;
}

.filter-list__item[data-filter-status="transition-out"] {
  display: none;
  /* 모바일: JS에서 사용 안 하지만 방어적 처리 */
}

.filter-list__item[data-filter-status="not-active"] {
  display: none;
  /* ← 핵심: 렌더 트리에서 완전 제거 */
}

/* 데스크탑: display:block 복원 + 기존 트랜지션 */
@media (min-width: 768px) {
  .filter-list__item[data-filter-status="active"] {
    display: block;
    transition: opacity 0.5s cubic-bezier(0.625, 0.05, 0, 1),
      transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
    transform: scale(1);
  }

  .filter-list__item[data-filter-status="transition-out"] {
    display: block;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.625, 0.05, 0, 1),
      transform 0.35s cubic-bezier(0.625, 0.05, 0, 1);
    transform: scale(0.95);
  }

  .filter-list__item[data-filter-status="not-active"] {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
  }
}