/* Swiper가 끝에 도달했을 때 자동으로 붙여주는 클래스입니다 */
  .swiper-button-disabled {
    opacity: 0.35;
    /* 투명도 조절 (흐리게) */
    cursor: not-allowed;
    /* 마우스 커서 변경 (금지 표시) */
    pointer-events: none;
    /* 클릭 자체를 물리적으로 차단 */
  }

  .swiper-pagination {
    position: absolute;
    /* !important를 붙여서 Swiper 기본 CSS를 무시하고 강제로 적용합니다 */
    bottom: -50px !important;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 10;
  }

  /* 1. 기본 불렛 스타일 (비활성 상태) */
  .swiper-pagination-bullet {
    width: 12px;
    /* 사각형 너비 */
    height: 4px;
    /* 사각형 높이 */
    border-radius: 0px;
    /* 0px = 완전 사각형, 2px = 둥근 사각형 */
    background: #ffffff;
    /* 색상 (원하는 색으로 변경) */
    opacity: 0.2;
    /* 흐리게 */
    margin: 0 4px !important;
    /* 불렛 간격 */
    transition: all 0.3s;
    /* 부드러운 애니메이션 */
  }

  /* 2. 활성 불렛 스타일 (현재 페이지) */
  .swiper-pagination-bullet-active {
    opacity: 1;
    /* 진하게 */
    width: 24px;
    /* (선택사항) 활성된 놈만 길게 늘리기 */
    background: #ffffff;
    /* 활성 색상 */
  }