/* 1) swiper-container를 기준 삼도록(기본 relative이지만 확실히) */
  .photo .swiper-container {
    position: relative;
  }

  /* 2) 기본 margin-top 리셋, 위치·transform 덮어쓰기 */
  .photo .swiper-button-prev,
  .photo .swiper-button-next {
    position: absolute;      /* 절대위치 */
    margin: 0;               /* 기본 margin-top: -22px 제거 */
    top: 50%;                /* 컨테이너 높이의 절반 */
    transform: translateY(-50%); /* 버튼 높이의 절반 올리기 */
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    z-index: 20;
  }

  .photo .swiper-button-prev {
    left: 0.5rem;   /* 왼쪽으로 살짝 붙이기 */
  }
  .photo .swiper-button-next {
    right: 0.5rem;  /* 오른쪽으로 살짝 붙이기 */
  }

  /* 화살표 아이콘 크기 */
  .photo .swiper-button-prev::after,
  .photo .swiper-button-next::after {
    font-size: 1.25rem;
    color: #fff;
  }

  /* 이미지가 버튼 아래로 가도록 z-index 조정 */
  .photo .swiper-slide img {
    position: relative;
    z-index: 1;
  }

  /* 페이지 순서 (fraction) 스타일링 */
  .photo .swiper-pagination {
    position: absolute !important;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    z-index: 30;
    width: auto !important;
    text-align: center;
  }