/** Shopify CDN: Minification failed

Line 692:0 Unexpected "}"

**/
/* =============================================
   APOEURO — Custom Theme CSS (Dawn) [최종 통합본]
   크림베이지 #FAF7F2 / 샌드 #F5F0E8
   웜브라운 #2C2118 / 테라코타 #C4956A / 토프 #8B7355
   ============================================= */


/* ─────────────────────────────
   1. GLOBAL
   ───────────────────────────── */
body { background-color: #FAF7F2 !important; color: #2C2118 !important; }
a { color: #2C2118 !important; }
a:hover { color: #C4956A !important; }
.btn, button, [type="button"] { border-radius: 0 !important; }


/* ─────────────────────────────
   2. ANNOUNCEMENT BAR
   ───────────────────────────── */
.announcement-bar { background-color: #2C2118 !important; color: #FAF7F2 !important; }
.announcement-bar a, .announcement-bar p { color: #FAF7F2 !important; }


/* ─────────────────────────────
   3. HEADER
   ───────────────────────────── */
.header {
  background-color: #FAF7F2 !important;
  border-bottom: 1px solid rgba(44,33,24,0.1) !important;
}
.header__heading-link,
.header__menu-item {
  color: #2C2118 !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
}
.header__heading-link:hover,
.header__menu-item:hover { color: #C4956A !important; }
.header__icon svg,
.header__icon path {
  fill: #2C2118 !important;
  stroke: #2C2118 !important;
}


/* ─────────────────────────────
   4. IMAGE BANNER (단일 배너 전용 — 슬라이드쇼 제외)
   ───────────────────────────── */

/* banner 자체 — 슬라이드쇼에는 적용 안 됨 */
.banner:not(.slideshow),
.banner:not(.banner--stacked):not(.slideshow),
.banner.banner--small:not(.slideshow),
.banner.banner--medium:not(.slideshow),
.banner.banner--large:not(.slideshow) {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  min-height: 480px !important;
  height: 480px !important;
  isolation: auto !important;
}

/* 미디어 */
.banner:not(.slideshow) .banner__media {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}
.banner:not(.slideshow) .banner__media img,
.banner:not(.slideshow) .banner__media svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
}

/* content absolute — Dawn 위치 클래스(align/justify) 유지 */
.banner:not(.slideshow) .banner__content,
.banner--small:not(.slideshow):not(.banner--mobile-bottom):not(.banner--adapt) .banner__content,
.banner--medium:not(.slideshow):not(.banner--mobile-bottom):not(.banner--adapt) .banner__content,
.banner--large:not(.slideshow):not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 5rem !important;
  z-index: 2 !important;
}

/* banner__box 배경 완전 제거 */
.banner:not(.slideshow) .banner__box,
.banner:not(.slideshow) .banner__box.gradient,
.banner:not(.slideshow) .banner__box[class*="color-scheme"],
.banner--desktop-transparent:not(.slideshow) .banner__box {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 배너 내부 요소 배경 투명 */
.banner:not(.slideshow) *:not(img):not(svg):not(.button):not(a):not(button) {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* 가상요소 무력화 */
.banner:not(.slideshow)::before,
.banner:not(.slideshow)::after,
.banner:not(.slideshow) .banner__media::before,
.banner:not(.slideshow) .banner__media::after,
.banner:not(.slideshow) .banner__content::before,
.banner:not(.slideshow) .banner__content::after,
.banner:not(.slideshow) .banner__box::before,
.banner:not(.slideshow) .banner__box::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* 모바일 */
@media screen and (max-width: 749px) {
  .banner:not(.slideshow),
  .banner:not(.banner--stacked):not(.slideshow),
  .banner.banner--small:not(.slideshow),
  .banner.banner--medium:not(.slideshow),
  .banner.banner--large:not(.slideshow),
  .banner.banner--mobile-bottom:not(.slideshow) {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    height: 480px !important;
    min-height: 480px !important;
  }
  .banner:not(.slideshow) .banner__content,
  .banner--small:not(.slideshow):not(.banner--mobile-bottom):not(.banner--adapt) .banner__content,
  .banner--medium:not(.slideshow):not(.banner--mobile-bottom):not(.banner--adapt) .banner__content,
  .banner--large:not(.slideshow):not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 2rem 1.5rem !important;
  }
  .banner:not(.slideshow) .banner__media {
    position: absolute !important;
  }
}


/* ─────────────────────────────
   5. CARD — 일반 상품 카드 (완벽한 정렬 + 고정 높이)
   ───────────────────────────── */

/* 카드 전체 구조 */
.card-wrapper {
  height: 100% !important;
}

.card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 0.5px solid rgba(44,33,24,0.1) !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.card:hover {
  border-color: rgba(196,149,106,0.5) !important;
}

/* 카드 내부 - ratio 무력화 */
.card__inner {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

/* ratio 클래스 무력화 */
.card__inner.ratio,
.card.ratio {
  aspect-ratio: auto !important;
  padding-bottom: 0 !important;
}

/* ::before 가상요소 완전 제거 */
.card__inner::before,
.card::before,
.card__media::before,
.card__media .media::before {
  display: none !important;
  content: none !important;
  padding-bottom: 0 !important;
}

/* 이미지 미디어 영역 - 고정 높이 */
.card__media {
  position: relative !important;
  width: 100% !important;
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.card__media .media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
  height: 320px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* 첫 번째 이미지 (메인) */
.card__media .media img:first-child,
.card__media .media > img {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  display: block !important;
  transform: none !important;
}

/* 두 번째 이미지 (호버) */
.card__media .media img:nth-child(2) {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 40px) !important;
  max-height: calc(100% - 40px) !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 2 !important;
}

/* 호버 효과 */
.card-wrapper:hover .card__media .media img:nth-child(2) {
  opacity: 1 !important;
}

.card-wrapper:hover .card__media .media img:first-child {
  opacity: 0 !important;
}

/* 카드 콘텐츠 영역 */
.card__content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.5rem !important;
}

.card__information {
  flex: 1 !important;
}

/* 타이틀/가격 숨김 (이미지 카드인 경우) */
.card--standard.card--media .card__inner .card__information {
  display: none !important;
}

/* 카드 배지 */
.card__badge {
  position: absolute !important;
  z-index: 3 !important;
}

/* 모바일 반응형 */
@media (max-width: 749px) {
  .card__media,
  .card__media .media {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    padding: 16px !important;
  }
  
  .card__media .media img:nth-child(2) {
    max-width: calc(100% - 32px) !important;
    max-height: calc(100% - 32px) !important;
  }
}

/* ─────────────────────────────
   6. SECTION TITLES
   ───────────────────────────── */
.featured-collection .title,
h2.title,
.featured-collection h2 {
  color: #2C2118 !important;
  font-size: clamp(2.2rem, 3vw, 2.8rem) !important;
  font-weight: 500 !important;
}
.price,
.price__regular,
.price-item {
  display: block !important;
  visibility: visible !important;
  color: #C4956A !important;
  font-weight: 500 !important;
}
.card__heading,
.card__heading a {
  display: block !important;
  visibility: visible !important;
  color: #2C2118 !important;
  font-size: 1.3rem !important;
}


/* ─────────────────────────────
   7. FOOTER
   ───────────────────────────── */
.footer {
  background-color: #F5F0E8 !important;
  border-top: 1px solid rgba(44,33,24,0.1) !important;
}
.footer__heading {
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: #2C2118 !important;
}
.footer__list-item a,
.footer a { color: #8B7355 !important; }
.footer a:hover { color: #C4956A !important; }


/* ─────────────────────────────
   8. SPACING
   ───────────────────────────── */
.page-width {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  max-width: 130rem !important;
  margin: 0 auto !important;
}
@media (max-width: 750px) {
  .page-width {
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
  }
}


/* ─────────────────────────────
   9. IMAGE WITH TEXT
   ───────────────────────────── */
.image-with-text { background-color: #F5F0E8 !important; }
.image-with-text .image-with-text__content {
  padding: 4rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.image-with-text__heading {
  color: #2C2118 !important;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
.image-with-text__text {
  color: #8B7355 !important;
  font-size: 1.6rem !important;
}
.image-with-text .image-with-text__media { min-height: 400px !important; }


/* ─────────────────────────────
   10. SHOP COLLECTIONS
   ───────────────────────────── */
.collection-list .card-wrapper { overflow: visible !important; }
.collection-list .card { overflow: visible !important; }
.collection-list .card__inner {
  height: auto !important;
  min-height: 220px !important;
  overflow: visible !important;
}
.collection-list .card__media .media {
  height: 220px !important;
  overflow: hidden !important;
  position: relative !important;
}
.collection-list .card__media .media img {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  max-width: 100% !important;
  max-height: none !important;
  transform: none !important;
}
.collection-list-title { font-size: 28px !important; }


/* ─────────────────────────────
   11. SECTION SPACING — 섹션 간 빈 공간 축소
   ───────────────────────────── */
.shopify-section { margin: 0 !important; }

.shopify-section > [style*="padding-top"],
.shopify-section .color-scheme-1[style*="padding-top"],
.shopify-section .color-scheme-2[style*="padding-top"],
.shopify-section .color-scheme-3[style*="padding-top"],
.shopify-section .color-scheme-4[style*="padding-top"],
.shopify-section .color-scheme-5[style*="padding-top"] {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

@media screen and (max-width: 749px) {
  .shopify-section > [style*="padding-top"] {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}


/* ─────────────────────────────
   12. SLIDESHOW — 메인 슬라이드쇼 전용 (공지바 제외)
   ───────────────────────────── */

/* 공지바 슬라이드쇼는 원래 크기 유지 */
.announcement-bar,
.announcement-bar *,
.announcement-bar-slider,
.announcement-bar-slider *,
[id*="announcement-bar"] .slideshow,
[id*="announcement-bar"] .slideshow__slide,
[id*="announcement-bar"] .slider__slide,
[id*="announcement-bar"] .banner {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* ========================================
   🔥 CRITICAL FIX — 뿌연 현상 완전 제거
   ======================================== */

/* 1. 전역 scroll-trigger 무력화 */
.scroll-trigger,
.scroll-trigger.animate--fade-in,
.scroll-trigger.animate--slide-in,
.scroll-trigger--offscreen,
.scroll-trigger.animate--fade-in.scroll-trigger--offscreen,
.scroll-trigger.animate--slide-in.scroll-trigger--offscreen {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* 2. 슬라이드쇼 내부 모든 요소 opacity 강제 복원 */
main .slideshow *,
main .slideshow__slide *,
main .slideshow .slider__slide *,
#MainContent .slideshow *,
.slideshow.banner *,
.slideshow.banner .banner__media *,
.slideshow.banner .slideshow__media *,
.slideshow.banner .media *,
.slideshow.banner img,
.slideshow.banner svg {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* 3. 이미지/미디어 명시적 처리 */
main .slideshow img,
main .slideshow svg,
main .slideshow__media img,
main .slideshow__media svg,
main .slideshow .media img,
main .slideshow .media svg,
#MainContent .slideshow img,
#MainContent .slideshow svg {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  display: block !important;
}

/* 4. 가상 요소 오버레이 완전 제거 */
main .slideshow *::before,
main .slideshow *::after,
main .slideshow__slide::before,
main .slideshow__slide::after,
main .slideshow .banner__media::before,
main .slideshow .banner__media::after {
  opacity: 0 !important;
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* ======================================== */

/* 메인 슬라이드쇼 높이 */
main .slideshow.banner,
#MainContent .slideshow.banner {
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  overflow: hidden !important;
}
main .slideshow__slide,
main .slideshow .slider__slide {
  height: 400px !important;
  min-height: 400px !important;
  position: relative !important;
}

/* 슬라이드 이미지 */
main .slideshow__media,
main .slideshow__media img,
main .slideshow__media svg {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* 텍스트 박스 배경 투명 */
main .slideshow__text.gradient,
main .slideshow__text[class*="color-scheme"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 모바일 슬라이드쇼 수정 */
@media screen and (max-width: 749px) {
  main .slideshow.banner,
  main .slideshow.banner.banner--mobile-bottom,
  #MainContent .slideshow.banner {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    display: flex !important;  /* block → flex로 변경 */
    overflow-x: auto !important;  /* 스크롤 활성화 */
    scroll-snap-type: x mandatory !important;  /* 스냅 스크롤 */
    -webkit-overflow-scrolling: touch !important;  /* iOS 부드러운 스크롤 */
  }
  
  main .slideshow__slide,
  main .slideshow .slider__slide {
    height: 300px !important;
    min-height: 300px !important;
    position: relative !important;
    display: block !important;
    flex: 0 0 100% !important;  /* 슬라이드 너비 고정 */
    scroll-snap-align: start !important;  /* 스냅 포인트 */
  }
  
  /* 텍스트 영역을 이미지 위에 absolute로 강제 → 모바일에서 잘리지 않음 */
  main .slideshow__text-wrapper,
  main .banner--mobile-bottom .slideshow__text-wrapper,
  main .slideshow .slideshow__text-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    order: 0 !important;
  }
  
  main .slideshow__media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* 🔥 모바일 전용 추가 강화 */
  main .slideshow *,
  main .slideshow img,
  main .slideshow svg {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }
}
  main .slideshow__slide,
  main .slideshow .slider__slide {
    height: 300px !important;
    min-height: 300px !important;
    position: relative !important;
    display: block !important;
  }
  /* 텍스트 영역을 이미지 위에 absolute로 강제 → 모바일에서 잘리지 않음 */
  main .slideshow__text-wrapper,
  main .banner--mobile-bottom .slideshow__text-wrapper,
  main .slideshow .slideshow__text-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    order: 0 !important;
  }
  main .slideshow__media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* 🔥 모바일 전용 추가 강화 */
  main .slideshow *,
  main .slideshow img,
  main .slideshow svg {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }
}
/* ═══════════════════════════════════════════════════════
   13. SCROLL-TRIGGER 전역 강제 무력화 (최종 방어선)
   ═══════════════════════════════════════════════════════
   Dawn의 animations.js 누락으로 opacity: 0.05에 멈추는 현상 차단
   맨 끝 배치로 base.css보다 높은 우선순위 확보
   ══════════════════════════════════════════════════════ */

html .scroll-trigger,
html .scroll-trigger.animate--fade-in,
html .scroll-trigger.animate--slide-in,
html body .scroll-trigger,
body .scroll-trigger,
.scroll-trigger,
.scroll-trigger.animate--fade-in,
.scroll-trigger.animate--slide-in,
.scroll-trigger--offscreen,
.animate--fade-in,
.animate--slide-in {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
}

/* 슬라이드쇼 검정 오버레이 완전 제거 */
.banner__media::after,
.slideshow .banner__media::after,
main .slideshow .banner__media::after,
#MainContent .slideshow .banner__media::after {
  opacity: 0 !important;
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* 슬라이드쇼 모든 요소 강제 표시 */
.slideshow *,
.slideshow img,
.slideshow svg,
.slideshow .media,
.slideshow .banner__media {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* (기존 apoeuro.css 내용 전체 + 맨 끝에 아래 추가) */

/* ═══════════════════════════════════════════════════════
   14. SCROLL-TRIGGER 미디어쿼리 강제 무력화 (최종 해결)
   ═══════════════════════════════════════════════════════
   base.css가 @media (prefers-reduced-motion: no-preference) 안에서
   opacity: 0.01을 설정하므로, 같은 미디어쿼리로 덮어써야 함
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .scroll-trigger,
  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in,
  .scroll-trigger--offscreen,
  .scroll-trigger.animate--fade-in.scroll-trigger--offscreen,
  .scroll-trigger.animate--slide-in.scroll-trigger--offscreen {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  
  .scroll-trigger:not(.scroll-trigger--offscreen),
  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in,
  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* 슬라이드쇼 모든 요소 강제 표시 (미디어쿼리 밖에서도 적용) */
.slideshow,
.slideshow *,
.slideshow img,
.slideshow svg,
.slideshow .media,
.slideshow .banner__media,
main .slideshow *,
#MainContent .slideshow * {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

/* 검정 오버레이 완전 제거 */
.banner__media::after,
.slideshow .banner__media::after,
main .slideshow .banner__media::after,
#MainContent .slideshow .banner__media::after {
  opacity: 0 !important;
  display: none !important;
  content: none !important;
  background: transparent !important;
}
/* ═══════════════════════════════════════════════════════
   15. GRADIENT 배경 완전 제거 (최종 해결)
   ═══════════════════════════════════════════════════════
   슬라이드쇼의 .gradient 클래스가 반투명 배경을 만드는 문제 해결
   ═══════════════════════════════════════════════════════ */
 
/* 슬라이드쇼 gradient 배경 완전 제거 */
.slideshow .gradient,
.slideshow .gradient::before,
.slideshow .gradient::after,
.slideshow .banner__box.gradient,
.slideshow .content-container.gradient,
.slideshow__text.gradient {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
}
 
/* 슬라이드쇼 전체 배경 투명 */
.slideshow .banner__box,
.slideshow .content-container,
.slideshow__text-wrapper,
.slideshow__text {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}
 
/* Color scheme 배경도 제거 */
.slideshow .color-scheme-1,
.slideshow .color-scheme-2,
.slideshow [class*="color-"] {
  background: transparent !important;
  background-image: none !important;
}
/* ═══════════════════════════════════════════════════════
   16. CARD HOVER 이미지 효과 수정
   ═══════════════════════════════════════════════════════
   2개 이미지가 동시에 보이는 문제 해결
   ═══════════════════════════════════════════════════════ */

/* 메인 이미지 컨테이너 */
.card__media .media {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 320px !important;
  padding: 20px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

/* 첫 번째 이미지 (메인) */
.card__media .media img:first-child {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease !important;
  z-index: 1 !important;
}

/* 두 번째 이미지 (호버용) - 기본 숨김 */
.card__media .media img:nth-child(2) {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 40px) !important;
  max-height: calc(100% - 40px) !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 2 !important;
}

/* 호버 시 두 번째 이미지 표시 */
.card-wrapper:hover .card__media .media img:nth-child(2) {
  opacity: 1 !important;
}

/* 호버 시 첫 번째 이미지 숨김 */
.card-wrapper:hover .card__media .media img:first-child {
  opacity: 0 !important;
}

/* 모바일 */
@media (max-width: 749px) {
  .card__media .media {
    height: 280px !important;
    padding: 16px !important;
  }
  
  .card__media .media img:nth-child(2) {
    max-width: calc(100% - 32px) !important;
    max-height: calc(100% - 32px) !important;
  }
}