/* SoyTwo section3 "MD CHOICE" 캐러셀 — 벤치마크(COS PTMD539896) MONTH BEST 실측 이식.
   2026-08-09, 전달.md 지시: "MONTH BEST 삭제 + 그 캐러셀·마우스오버 이벤트를 MD CHOICE로" 처리.
   Playwright로 뽑은 실제 규칙(.ec-base-product .prdList .thumbnail .icon{opacity:0;bottom:-10px;
   transition:.5s} → :hover{opacity:1;bottom:10px})을 우리 카드(.st-card) 구조에 맞게 이식했다.
   모든 규칙을 #st-md-choice로 스코프해 section5(.st-grid-4) 등 다른 카드에는 영향을 주지 않는다. */

/* [2026-08-09] .st-split-products는 display:flex;flex-direction:column(그리드-섹션.css)이라
   .pl-module-wrap(캐러셀을 감싸는 block 자식)이 그 열 방향 flex item이 된다 — 기본 자동 최소너비가
   내부 캐러셀의 min-content(카드 6장분, ~1150px)를 그대로 반영해버려 모바일에서 섹션 전체가
   가로로 넘쳤다(overflow:hidden인 .st-mdc-viewport로도 못 막음 — 조상의 자동 최소크기 계산은
   overflow와 무관하게 먼저 일어남). min-width:0으로 그 전파를 끊는다. */
#st-md-choice .pl-module-wrap {
  min-width: 0;
}

#st-md-choice .st-mdc-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

#st-md-choice .st-mdc-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

#st-md-choice .st-mdc-track {
  position: relative; /* 자식 li의 offsetLeft를 track 기준으로 재도록(js/md-choice-carousel.js) */
  display: flex;
  gap: 28px;
  transition: transform 0.45s ease;
}

#st-md-choice .st-mdc-slide {
  flex: 0 0 calc((100% - 28px) / 2);
  min-width: 0;
}

#st-md-choice .st-mdc-arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ml-border, #eeeeee);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ml-fg, #151515);
  cursor: pointer;
}
#st-md-choice .st-mdc-arrow svg { width: 18px; height: 18px; }

#st-md-choice .st-mdc-dots {
  margin-top: 24px;
  display: flex;
  gap: 8px;
}

#st-md-choice .st-mdc-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: var(--ml-border, #e0ddd8);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
#st-md-choice .st-mdc-dot.is-active {
  width: 22px;
  background: var(--ml-fg, #151515);
}

/* ---------- 마우스오버 이벤트(벤치마크 실측 이식: 이미지 확대 + 하트 아이콘 등장) ---------- */
#st-md-choice .st-card-thumb img {
  transition: transform 0.4s ease;
}
/* [2026-08-11, 전달.md] "상품들 모바일에서 기본 마우스 오버상태 해제" — 모바일 탭 시
   hover가 안 풀려 이미지가 확대된 채 고정되던 문제, hover 가능한 환경으로 한정. */
@media (hover: hover) and (pointer: fine) {
  #st-md-choice .st-card:hover .st-card-thumb img {
    transform: scale(1.05);
  }
}

#st-md-choice .st-card-like {
  position: absolute;
  right: 10px;
  bottom: -10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ml-fg, #151515);
  opacity: 0;
  transition: 0.5s;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
#st-md-choice .st-card-like svg { width: 16px; height: 16px; }
#st-md-choice .st-card:hover .st-card-like { opacity: 1; bottom: 10px; }
#st-md-choice .st-card-like[data-liked="true"] { color: #d02020; }
#st-md-choice .st-card-like[data-liked="true"] svg { fill: currentColor; }

/* [2026-08-11, 전달.md] "좋아요 위 장바구니 담기 추가" — 찜 아이콘과 동일 구조, 42px(아이콘
   32px+여백 10px) 위에 쌓는다. */
#st-md-choice .st-card-cart {
  position: absolute;
  right: 10px;
  bottom: 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ml-fg, #151515);
  opacity: 0;
  transition: 0.5s;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
#st-md-choice .st-card-cart svg { width: 16px; height: 16px; }
#st-md-choice .st-card:hover .st-card-cart { opacity: 1; bottom: 52px; }
#st-md-choice .st-card-cart[data-added="true"] { background: #151515; color: #fff; }

/* [2026-08-11, 전달.md] "MD초이스는 모바일에서 좋아요랑 찜 나오는게 디폴트야? 소이원처럼
   한번 클릭하면 나오게 하라니까" — 위에서 상시 노출시켰던 걸 되돌린다. 소이원(skin01)의
   실제 카페24 순정 상품목록(`.thumbnail .icon`, Tier C 무변형)과 동일하게 `:hover`를
   그대로 두면, 모바일 브라우저 기본 동작(링크를 첫 탭하면 :hover만 걸리고 바로 이동하지
   않음 — 두 번째 탭이나 아이콘 자체를 탭해야 실제 동작)에 의해 자연히 "한 번 탭하면
   나온다"가 된다. 별도 JS 없이 강제 노출 미디어쿼리만 제거하면 됨 — 이미지 확대(§60-②)처럼
   가려야 하는 부작용이 아니라 여기선 그 네이티브 동작 자체가 원하는 결과다. */
@media (max-width: 767px) {
  #st-md-choice .st-mdc-slide { flex: 0 0 calc((100% - 16px) / 2); }
  #st-md-choice .st-mdc-track { gap: 16px; }
  #st-md-choice .st-mdc-arrow { width: 32px; height: 32px; }
}