/* ========================================================================
 * Experts Front CDN CSS Overrides
 * ========================================================================
 *
 * 이 파일은 CDN (img.echosting.cafe24.com/api/partner/front/css/expertsCommon.css)
 * 의 스타일을 오버라이드하기 위한 로컬 관리용 파일입니다.
 *
 * CDN CSS는 퍼블팀이 배포 시점에 업데이트하므로, 버그 수정이 바로 반영되지 않습니다.
 * 이 파일에 오버라이드를 추가하여 즉시 반영하고,
 * CDN에 동일 수정이 반영되면 해당 블록을 제거합니다.
 *
 * 로드 순서: layout.tsx에서 CDN expertsCommon.css 이후에 로드하여 오버라이드.
 *
 * 주의: 일부 page.tsx들이 CDN CSS를 layout 이후에 재로드하기 때문에,
 * 이 파일의 규칙은 !important 를 사용해 specificity/order 경쟁에서 항상 우선시킴.
 * (CDN의 expertsCommon.css 자체는 해당 규칙에 !important 를 사용하지 않음)
 *
 * 각 오버라이드 블록에는 다음 정보를 주석으로 명시:
 *  - JIRA 키
 *  - 원인
 *  - CDN 반영 시점 (반영되면 블록 삭제)
 * ======================================================================== */


/* ------------------------------------------------------------------------
 * [EXPERT-9978] 기획전 theme1 상품 1개일 때 좌측 정렬 (1280px+ 데스크톱 전용)
 *
 * 관련: EXPERT-8444 (원본 수정 - 동일 증상 재발견)
 * 원인:
 *   1) ul의 width:auto로 ul이 자식(li) 크기만큼만 차지 → justify-content 무효
 *   2) 1280px+ 미디어쿼리에서 margin 재지정이 없어 기본 규칙(977라인)의
 *      margin:0 -8px 음수 마진이 상속 → width:100% 적용 시 양쪽 8px씩
 *      부모 범위를 벗어나 좌측 콘텐츠가 잘려보임
 * 수정: width:100% + justify-content:flex-start + margin:0
 *
 * 주의: Swiper 비활성인 1280px+ 데스크톱에만 적용.
 *       태블릿은 EXPERT-9979에서 Swiper 비활성화로 전환 (MainContents.tsx).
 *
 * CDN 반영 후 이 블록 삭제 가능.
 * ------------------------------------------------------------------------ */
@media (min-width: 1280px) {
  .mProductList.theme1 ul {
    width: 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }
}

/* 태블릿(768~1279px): Swiper 비활성화됨 (EXPERT-9979) → 정적 그리드에도 좌측 정렬 */
@media (min-width: 768px) and (max-width: 1279px) {
  .mProductList.theme1 ul {
    width: 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }
}


/* ------------------------------------------------------------------------
 * [EXPERT-9980] 모바일 기획전 theme1 Swiper 좌우 스크롤 시 첫번째 상품 잘림
 *
 * 원인: CDN 기본 규칙(997라인)의 ul { margin:0 -8px } + li { margin:0 8px }
 *       음수 마진 패턴이 Swiper의 transform 기반 슬라이드 이동과 충돌.
 *       Swiper가 슬라이드 위치를 계산할 때 CSS margin을 고려하지 않아
 *       loop 전환 시 첫번째 슬라이드가 왼쪽으로 밀려 잘림.
 * 수정: Swiper 활성 시(swiper-initialized) ul 음수 마진만 제거.
 *       li의 margin(0 8px)은 유지하여 상품 간 간격 보존.
 *       (MainContents.tsx의 Swiper config에 spaceBetween:16도 추가됨)
 *
 * CDN 반영 후 이 블록 삭제 가능.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .mProductList.theme1.swiper-initialized ul {
    margin: 0 !important;
  }
  /* li margin(0 8px)은 유지 — 상품 간 간격에 필요 (실서버와 동일) */
}