/* css/pages/index.css — index 전용 보정 (R24 이중 레이어 CSS 오염 상쇄)
 * 원인: 원본은 PC(style-28)와 모바일(style-7) 스킨을 서로 다른 문서에서 로드하지만,
 * 산출물은 한 문서에 둘 다 로드한다. 공유 클래스(.ec-base-product/.prdList/#contents/
 * .xans-layout-footer)에 두 스킨 규칙이 교차 적용되므로 레이어별로 원본 스킨 값을 복원한다.
 * 수치 근거: 미러 _styles/index.json(PC computed)·style-28/style-7 원본 규칙 — 신규 디자인 없음.
 */

/* ---- PC 레이어(>=1025): style-7(모바일 스킨)이 뒤에 로드되며 덮은 값을 style-28 원값으로 복원 ---- */
@media (min-width: 1025px) {
  /* stylefix r2: style-7 bare body,code{Roboto;13px;#1b1b1b;lh1.2em} 오염 복원 — style-28 최종
   * body,code{font:0.75em 'Noto Sans KR',…;color:#353535}(@51161, body{NanumGothic;#666}@1613 를 후승).
   * font 축약의 lh normal 리셋까지가 원문 계산값(_styles/index.json: noto/#353535/lh normal). */
  body { font-family: 'Noto Sans KR', sans-serif, 'LotteMartDream', Verdana, Dotum, AppleGothic; color: #353535; line-height: normal; }

  /* stylefix r2: 원본 index 는 #footer 가 #wrap(>#contents>#imgALLarea) 내부 — #wrap{font-family:NanumGothic…}
   * + #imgALLarea{font-size:11px;letter-spacing:-1px} 상속(미러 DOM 실측). 산출물 푸터는 공통 조각
   * (body 직계)이라 상속 문맥이 끊김 → 동일 계산값을 #footer 에 직접 복원(_styles/index.json:
   * 푸터 트리 nanumgothic·letterSpacing -1px). */
  #footer { font-family: 'NanumGothic', "맑은고딕", "Malgun Gothic", Dotum, "돋음", sans-serif; font-size: 11px; letter-spacing: -1px; }

  /* stylefix r2: style-7 #main #header h1{height:65px;line-height:62px}/h1 img{max-height:35px} 오염 —
   * style-28 은 h1 무규칙(UA), .topArea{height:50px;padding:10px 0 0} 만. 원본 실측 IMG 232×58.
   * (r2 2차: auto/none → 58px 상한 — _styles/index.json h1 h58·img 232×58, 파리티 src H1 48면 전수 h58 동형.
   *  원본 로고 원본픽셀 300×75 를 58 로 축소 렌더하는 것이 원본 계산값) */
  #main #header h1 { height: 58px; line-height: normal; }
  #main #header h1 img { max-height: 58px; }

  /* stylefix r2 슬라이더: style-7(m) #wrapper{position:relative;padding-bottom:29px;background:#fff} 후승
   * 오염 복원 — style-28 원문 #wrapper{background:#fff;width:100%;height:690px;margin-top:96px;
   * overflow:hidden;position:absolute;top:0;left:0}. #slide 는 절대배치 슬라이더의 흐름 자리(스페이서,
   * _styles/index.json 26: h750 static). 래퍼/캐러셀 계산값은 원본 caroufredsel JS 산출 실측
   * (28: relative 1480x700 / 29: absolute 13000x700, ta left·ls normal). */
  /* r2 3차: 750px 스페이서 제거(0) — 원본은 절대배치 슬라이더가 흐름 밖이고 #imgALLarea{margin:730px 0 0}
   * 가 유일한 오프셋(src 트리: 배너 y790·Drcont y860, 슬라이더 96..846 이 위를 덮음). 750 스페이서를 두면
   * mt730 과 이중 가산되어 본문이 +680 내려앉는 시각 드리프트(스냅 대조 실측) */
  #slide { height: 0; }
  #slide #wrapper {
    position: absolute; top: 0; left: 0;
    width: 100%; min-width: 1480px; height: 690px;
    margin-top: 96px; padding-bottom: 0;
    overflow: hidden; background: #fff;
  }
  #slide .caroufredsel_wrapper {
    position: relative; width: 1480px; height: 700px; margin: 0 auto; overflow: hidden;
  }
  #slide #carousel {
    position: absolute; top: 0; left: 0; width: 13000px; height: 700px;
    margin: 0; text-align: left; letter-spacing: normal;
  }
  /* spec 37: .arrowm h146(자연높이 이탈 복원). #pager h10 잔차(라인박스 14)는 lh 조작 시
   * 스펙 lh normal 과 상충(a 3종 연쇄 — r2 실측 롤백)이라 보류 */
  #slide .arrowm { height: 146px; }

  /* stylefix r2: m 스킨(style-7) #wrap{background:#fff;padding-bottom:29px} 전이 복원 — 원본 index
   * PC(src 트리)는 wrap 무배경·무패딩(스펙 26 bg 투명·pb0). position 은 절대배치 #wrapper 의
   * 기준블록(y156 정합)이라 유지 */
  #wrap { background: transparent; padding-bottom: 0; }

  /* (stylefix r2 판정) index 푸터 mismatch 5건(_styles 124-125 w1480/h189/mt40/w1218/mb-45)은
   * 원본 미폐합 마크업(#imgALLarea 안으로 푸터가 파싱됨)로 인한 경로 깊이 차이의 매칭 앨리어싱 —
   * 산출물 푸터는 공통 조각(body 직계, 파리티 r1 확정 구조)이라 CSS 로는 매칭 불가, 구조 이동은
   * m 레이어 푸터 소실 부작용이 있어 보류(REPORT 인계). */

  /* 원본 PC: #footer 는 float:right 인 #contents 내부(문서 흐름상 콘텐츠 뒤).
     산출물은 공통 푸터 조각이 #wrap 밖이라, #wrap 이 float 를 머금도록 컨테인 */
  #wrap { overflow: hidden; }

  /* 원본 #imgALLarea{height:0} 는 footer 가 그 '안'에 파싱돼(원본 마크업 미폐합) 성립하던
     레이아웃 — 산출물은 footer 가 조각으로 밖에 있어 height:0 이면 #wrap overflow:hidden 에
     그리드 전체가 잘린다. 콘텐츠를 흐름에 담도록 auto 복원(margin-top:730 스페이서는 유지). */
  #imgALLarea { height: auto; }

  /* style-7(m 스킨) @media 의 .prdList.grid3>li{width:20%} 오염 복원 —
     원본 PC(style-28) .ec-base-product ul.grid3 > li{width:33.33%} (실측 li w=467=1400/3) */
  .pc-only .ec-base-product ul.grid3 > li { width: 33.33%; }

  .pc-only .ec-base-product { padding: 0; background: none; }
  .pc-only .ec-base-product .title h2 {
    max-height: none; overflow: visible; text-overflow: clip; white-space: normal;
    font-size: 20px; line-height: normal; padding: 0; background: none;
  }
  .pc-only .ec-base-product > ul { padding: 0; }
  .pc-only .ec-base-product [class*="grid"] {
    display: block; width: 100%; box-sizing: content-box; padding: 0;
    margin: -20px 0 0; font-size: 0; line-height: 0;
  }
  .pc-only .ec-base-product [class*="grid"] > li {
    display: inline-block; margin: 30px 0 20px; vertical-align: top;
    text-align: inherit; font-size: 0; line-height: 0;
  }
  .pc-only .ec-base-product .thumbnail { position: relative; margin: 10px 7px; text-align: center; }
  .pc-only .ec-base-product .thumbnail a { display: inline; }
  .pc-only .ec-base-product .thumbnail a img {
    /* stylefix r2: inline-block→inline — _styles/index.json prdImg a img display inline(스펙 실측) */
    display: inline; width: auto; max-width: 100%; border: 0; vertical-align: middle;
  }
  .pc-only .ec-base-product .description {
    min-height: 0; margin: 0 auto; padding: 0 7px; font-size: 12px; line-height: 18px; text-align: center;
  }
  .pc-only .ec-base-product .description .name { margin: 0; line-height: 18px; }
  .pc-only .ec-base-product .description .name a { font-size: 12px; font-weight: normal; color: #2e2e2e; }
}

/* ---- 모바일 레이어(<=1024): style-28(PC 스킨) 오염을 style-7 원값으로 복원 ---- */
@media (max-width: 1024px) {
  /* 원본 m DOM 에는 PC 2단 레이아웃 float 가 없다 */
  #contents { float: none; width: auto; }

  .m-only .ec-base-product .prdList { min-width: 0; margin: 0; }
  .m-only .ec-base-product .prdList > li { margin: 0 0 20px; }
  .m-only .ec-base-product ul.grid2 li .thumbnail {
    float: none; width: auto; margin: 0 7px 14px; text-align: center;
  }
  .m-only .ec-base-product ul.grid2 li .description {
    float: none; width: auto; padding: 0; margin: 0 7px;
  }
  .m-only .ec-base-product .prdList .description {
    margin: 0 7px; padding: 0; text-align: left; font-size: 12px; line-height: 1em;
  }
  .m-only .ec-base-product .prdList .description .name a { font-size: 13px; color: #1b1b1b; font-weight: 700; }

  /* m 푸터: style-28 .xans-layout-footer{float:right;width:1000px;height:234px} 무력화 */
  .m-only .xans-layout-footer { float: none; width: auto; height: auto; position: static; }
  .m-only .xans-layout-footer .copyright { position: static; height: auto; line-height: 1.5em; }
}

/* zone home-showcase — 목록 배선 3상태(로딩/빈/에러) 표시 */
.prdList .showcase-state {
  float: none;
  display: block;
  clear: both;
  width: 100%;
  padding: 48px 0;
  text-align: center;
  color: #888;
  font-size: 14px;
  list-style: none;
}
.prdList .showcase-state[hidden] { display: none; }