/*
  프로젝트 전역 오버라이드 (구 styles/overrides.css 단일 이관)
  - 외주 벤더 CSS(style-mobile.css / style-desktop.css CDN)보다 뒤에 로드되어
    프로덕션에서 벤더 규칙에 밀리지 않습니다.
  - app/layout.tsx에서 Swiper·벤더 링크 다음에 연결됩니다.
  - 원칙: 외주 원본 무수정, 커스터마이징은 이 파일에만 추가
  - 권장 스코프: 모바일 body.gwm-app.st-no-dock … / 데스크탑 body.gwm-app:not(.st-no-dock) …
*/

/* Example
body.gwm-app.st-no-dock .some-selector {
  property: value !important;
}
*/

/*
  Performance-safe overrides (mobile)
  - 외주 원본 CSS는 유지하고, 재페인트 범위/모션 비용만 보수적으로 완화
*/
body.gwm-app.st-no-dock .mobile-product-item .tile-thumb,
body.gwm-app.st-no-dock .carousel.st-free .carousel-item {
  contain: paint;
}

/*
  접근성 설정(reduced motion)을 사용하는 경우에만
  비핵심 트랜지션/애니메이션 비용을 줄임
*/
@media (prefers-reduced-motion: reduce) {
  body.gwm-app.st-no-dock .mobile-product-item,
  body.gwm-app.st-no-dock .carousel-item,
  body.gwm-app.st-no-dock .related-carousel-placeholder-item {
    animation: none !important;
    transition: none !important;
  }
}

/*
  Dock bar motion override
  - 외주 원본의 bottom 기반 이동을 transform 기반으로 덮어 레이아웃 영향 최소화
*/
body.gwm-app.st-no-dock #dockBar {
  transform: translate3d(0, var(--dockbar-offset-y, 0), 0) !important;
  transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s !important;
  will-change: transform !important;
}

body.gwm-app.st-no-dock.st-up #dockBar {
  --dockbar-offset-y: 0 !important;
  bottom: 0 !important;
}

body.gwm-app.st-no-dock.st-down #dockBar {
  --dockbar-offset-y: 27.7777777778vw !important;
  --dockbar-offset-y: calc(
    27.7777777778vw + constant(safe-area-inset-bottom)
  ) !important;
  --dockbar-offset-y: calc(
    27.7777777778vw + env(safe-area-inset-bottom)
  ) !important;
  bottom: 0 !important;
}

/* TopTen 풀페이지 핀 모드: st-up/st-down 무관하게 dockBar 항상 노출 */
body.gwm-app.st-no-dock.st-fullpage-pin #dockBar {
  --dockbar-offset-y: 0 !important;
  transform: translate3d(0, 0, 0) !important;
  bottom: 0 !important;
}

/*
  LnB 카테고리 컨테이너 높이 보정
  - style-mobile.css 기본값(100% - 29.4444vw)은 top widget 기준
  - 상단 블록 조합(위젯/게이트웨이 배너 유무)에 따라 높이를 분기
*/
#global-nav .gnb-category-container.has-top-widget,
#modal-category .gnb-category-container.has-top-widget {
  height: calc(100% - 29.4444444444vw) !important;
}

#global-nav .gnb-category-container.has-gateway-banner,
#modal-category .gnb-category-container.has-gateway-banner {
  height: calc(100% - 19.1666666666vw) !important;
}

#global-nav .gnb-category-container.no-top-extra,
#modal-category .gnb-category-container.no-top-extra {
  height: 100% !important;
}

/*
  Header transition lock (desktop)
  - 라우트 전환 시 st-scroll 토글에 의한 헤더 높이 애니메이션을 일시 비활성화
  - DesktopScrollClassProvider가 pathname 변경 감지 시 100ms간 적용
*/
#header.st-transition-lock .header-symbol,
#header.st-transition-lock .header-start .header-nav,
#header.st-transition-lock .selectshop-button {
  transition: none !important;
}

/*
  Wishlist pending state
  - disabled 상태 배경색(.tile-heart:disabled) 대신 data-pending 기반으로 클릭만 차단
  - 하트 버튼 주변 사각 배경 깜빡임 방지
*/
body.gwm-app .catalog-item.st-tile .tile-thumb .tile-heart[data-pending="true"],
body.gwm-app .tile-item .tile-thumb .tile-heart[data-pending="true"],
body.gwm-app .tile-item-horizon .tile-thumb .tile-heart[data-pending="true"],
body.gwm-app .button-icon[data-pending="true"] {
  pointer-events: none !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/*
  Tailwind Preflight가 img에 display:block을 주면,
  외주 CSS의 .announce { text-align: center }만으로는 이미지가 수평 가운데에 오지 않음
  (블록 레벨 요소는 부모의 text-align 대상이 아님).
  레거시 정적 페이지와 동일하게 맞추기 위해 announce 영역 이미지만 인라인 블록으로 복원.
*/
body.gwm-app .announce .announce-img,
body.gwm-app .announce img {
  display: inline-block;
  vertical-align: top;
}

/*
  Ranking scrollspy fixed switch
  - st-fixed 토글 시점의 top/transform 전환 애니메이션을 제거해
    라이브와 동일하게 즉시 고정/해제되도록 보정
*/
body.gwm-app #rankingTabContent1 .nav-scrollspy,
body.gwm-app #rankingTabContent1 .nav-scrollspy.st-fixed,
body.gwm-app #rankingTabContent1 .nav-scrollspy .navigator {
  transition: none !important;
  animation: none !important;
}

/*
  Ranking category bottom border fallback
  - 레벨별 클래스(st-bottom 포함/미포함) 차이와 관계없이
    랭킹 카테고리 네비게이터 하단선이 항상 보이도록 보정
*/
body.gwm-app #rankingTabContent1 .nav-scrollspy.st-small .navigator,
body.gwm-app #rankingTabContent1 .nav-scrollspy.st-reduced .navigator {
  border-bottom: 1px solid #ededed !important;
}

/*
  Mobile catalog sticky background guard
  - 이벤트/기획전 + 카테고리 모바일 상품영역의 앵커/필터 sticky 하단에서
    하위 콘텐츠가 비쳐 보이는 현상을 방지
*/
body.gwm-app #viewScrollSpyCont #catalogScrollSpy.nav-scrollspy.st-reduced,
body.gwm-app #viewScrollSpyCont #catalogScrollSpySecond.nav-scrollspy.st-small,
body.gwm-app #viewScrollSpyCont #catalogScrollSpy .navigator,
body.gwm-app #viewScrollSpyCont #catalogScrollSpySecond .navigator,
body.gwm-app #viewScrollSpyCont #catalogScrollSpySecond .navigator.st-small,
body.gwm-app #categoryScrollSpy.nav-scrollspy.st-reduced,
body.gwm-app #categoryScrollSpySecond.nav-scrollspy.st-small,
body.gwm-app #categoryScrollSpy .navigator,
body.gwm-app #categoryScrollSpySecond .navigator,
body.gwm-app #categoryScrollSpySecond .navigator.st-small,
body.gwm-app #filterScrollSpy.nav-scrollspy.st-filter-brief.st-catalog,
body.gwm-app
  #filterScrollSpy.nav-scrollspy.st-filter-brief.st-catalog
  .filter-bubble-brief,
body.gwm-app #filterScrollSpy.nav-scrollspy.st-filter-brief.st-category-catalog,
body.gwm-app
  #filterScrollSpy.nav-scrollspy.st-filter-brief.st-category-catalog
  .filter-bubble-brief {
  background-color: #fff !important;
  background-image: none !important;
}

/*
  카테고리 PLP: 고정 탭(.navigator z-index 110)이 page-utility 헤더보다 위에 남아
  브레드크럼/뒤로가기가 가려지는 현상 방지 (sticky 기준점 0 버그 복구와 함께 권장)
*/
body.gwm-app.st-no-dock header.page-utility:not(.modal-header) {
  z-index: 115 !important;
}

/*
  Mobile catalog sticky stacking (wrappers)
  - 필터 #filterScrollSpy.st-fixed 가 z-index:104 이므로, 벤더 st-reduced(100) 래퍼만으로는
    카테고리/앵커 전체 서브트리가 필터 아래로 깔릴 수 있음 → 래퍼를 110/109 대역으로 올림
*/
body.gwm-app #viewScrollSpyCont #catalogScrollSpy.st-fixed,
body.gwm-app #categoryScrollSpy.st-fixed {
  isolation: isolate;
  z-index: 110 !important;
}

body.gwm-app #viewScrollSpyCont #catalogScrollSpySecond.st-fixed,
body.gwm-app #categoryScrollSpySecond.st-fixed {
  isolation: isolate;
  z-index: 109 !important;
}

/*
  Mobile catalog sticky z-index (fixed .navigator)
  - 벤더 .nav-scrollspy.st-fixed .navigator 의 z-index:99 보강
  - 상품 타일 등과 역전 방지, 필터(104)보다 위에 카테고리/앵커 행이 오도록
*/
body.gwm-app #viewScrollSpyCont #catalogScrollSpy.st-fixed .navigator,
body.gwm-app #categoryScrollSpy.st-fixed .navigator {
  z-index: 110 !important;
}

body.gwm-app #viewScrollSpyCont #catalogScrollSpySecond.st-fixed .navigator,
body.gwm-app #categoryScrollSpySecond.st-fixed .navigator {
  z-index: 109 !important;
}

/*
  Category PLP: 1뎁스 탭 스크롤스파이 ↔ 필터 줄 사이 불필요한 세로 간격 제거
*/
body.gwm-app.st-no-dock
  #filterScrollSpy.nav-scrollspy.st-filter-brief.st-category-catalog {
  margin-top: 0 !important;
}

body.gwm-app.st-no-dock #categoryScrollSpy.nav-scrollspy.st-reduced {
  margin-bottom: 0 !important;
}

/*
  Category chevron 펼침 그리드: 벤더 .navigator.st-tile z-index:98 < 필터 104
*/
body.gwm-app #modal-category-depth.navigator.st-tile.is-active {
  z-index: 118 !important;
}

/*
  Mobile filter fixed layering guard
  - 필터 fixed 영역이 상품카드 정보 레이어 아래로 깔려 클릭 불가해지는 현상 방지
*/
body.gwm-app #filterScrollSpy.nav-scrollspy.st-filter-brief.st-catalog.st-fixed,
body.gwm-app
  #filterScrollSpy.nav-scrollspy.st-filter-brief.st-category-catalog.st-fixed {
  isolation: auto !important;
  z-index: 104 !important;
}

body.gwm-app
  #filterScrollSpy.nav-scrollspy.st-filter-brief.st-catalog.st-fixed
  .filter-bubble-brief,
body.gwm-app
  #filterScrollSpy.nav-scrollspy.st-filter-brief.st-category-catalog.st-fixed
  .filter-bubble-brief {
  pointer-events: auto !important;
}

/*
  Event sticky header logo hidden guard
  - 이벤트 본문에서 header-logo에 hidden 클래스가 붙을 때
    Tailwind .hidden(display:none) 영향으로 flex 레이아웃이 깨지는 현상 보정
  - 원본 의도대로 공간은 유지하고(=display 복원), 시각적으로만 숨김(opacity/visibility) 처리
*/
body.gwm-app .promotion-article .header-inner .header-logo.hidden {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
  PC 검색 무결과 아이겐 추천(recommendTypeB): 레거시 행당 5칸(col-5-1)
  - 벤더 그리드에 클래스가 없을 때를 대비한 보조 규칙
*/
body.gwm-app:not(.st-no-dock) .row.gy-72.gx-8 > .col-5-1 {
  flex: 0 0 20%;
  max-width: 20%;
}

/*
  Floating Navigation Soft-Nav Bug Fix
  - Next.js 페이지 이동 시 st-up, st-down 클래스가 리셋되어
    nav-end가 bottom: 0 벤더 CSS로 떨어지고 dockBar 뒤로 깔리는 현상 수정
  - st-down(스크롤 내림) 상태가 아닐 때만 dockBar 위로 위치 강제
*/
body.gwm-app.st-no-dock:not(.st-up):not(.st-down) #floating-nav {
  bottom: calc(18.3333333333vw + env(safe-area-inset-bottom)) !important;
}