/* 기본은 둘 다 숨김 */
#slide_01,
#slide_02 {
    display: none;
}

/* 데스크탑(991px 이상) → slide_01만 보이게 */
@media (min-width: 991px) {
    #slide_01 { display: block !important; }
    #slide_02 { display: none  !important; }
}

/* 모바일/태블릿(990px 이하) → slide_02만 보이게 */
@media (max-width: 990px) {
    #slide_01 { display: none !important; height:0 !important; overflow:hidden; }
    #slide_02 { display: block !important; padding:0; margin:0; }
}

/* 모바일 슬라이드 이미지: 정사각형 + 좌우 여백 없이 */
#slide_02 .rev-slidebg {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* 모바일 화면이 600px 이상일 때는 600x600 유지 */
@media (min-width: 600px) and (max-width: 990px) {
    #slide_02 .rev-slidebg {
        width: 600px !important;
        height: 600px !important;
        margin: 0 auto;              /* 가운데 정렬 */
    }
}


  /* 슬라이드 박스 */
  .slide-item {
      position: relative;
      overflow: hidden;
  }

  .slide-item img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
  }

  .hero-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      border-radius: 9999px;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      font-size: 14px;
      text-decoration: none;
      backdrop-filter: blur(4px);
      transition: 0.25s ease;
      white-space: nowrap;
  }

  .hero-btn:hover {
      background: rgba(0, 0, 0, 0.85);
  }

  .hero-btn-bottom-center {
      position: absolute;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      z-index: 10;
  }



  @media (max-width: 990px) {

    /* 아이폰 전용 슬라이드 높이 보정 */
    #splide {
        /* 우리가 원래 쓰던 레이아웃 그대로 두되
           min-height 때문에 아래로 길게 늘어지는 걸 줄인다 */
        aspect-ratio: 600 / 700;  
        height: 80vw;            /* 유지 */
        min-height: 75vh;        /* ← 600px 대신 화면비 */
        max-height: 700px;       /* 상한선은 그대로 둬도 됨 */

        background-size: contain;       /* 절대 cover로 바꾸지 않는다 */
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #fff;

        /* 하단쪽 큰 빈 공간을 만드는 쓸데없는 강제 block/flex 변화 금지.
           그냥 지금 너의 기본 flex 중앙 정렬 유지 */
        display: flex;
        align-items: center;
        justify-content: center;

        position: relative;
        margin: 0 !important;
        padding: 0 !important;
    }
 
  }
/* 기본 버튼 (PC 기준) */
.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: 0.25s ease;
    white-space: nowrap;
}

  /* 기본: 모바일( <768px ) → 2개 */
  .curator-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 태블릿: 768px ~ 1023px → 3개 */
  @media (min-width: 768px) {
    .curator-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* 노트북 이상: 1024px 이상 → 4개 */
  @media (min-width: 1024px) {
    .curator-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* 기본: 모바일(작은 화면)에서 높이 220px */
  .curator-thumb {
          width: 100%;
        aspect-ratio: 4 / 3;  /* 가로:세로 = 4:3 */
        overflow: hidden;
  }

  /* 태블릿 이상 */
  @media (min-width: 768px) {
      .curator-thumb {
          height: 260px;
      }
  }

  /* 데스크탑(1024px 이상) */
  @media (min-width: 1024px) {
      .curator-thumb {
          height: 300px;
      }
  }
.font-pretendard {
  font-family: "Pretendard", sans-serif;
}