/* css/pages/category-dog-all.css — category/dog-all.html 전용 보정 (R24 레이어 간 CSS 오염 보정)
 * 원본 분리 문서에서는 style-19(PC 스킨)와 style-27(m 스킨)이 각자 로드되지만
 * 병합 문서에서는 둘 다 로드되어 서로를 오염시킨다 — 원본 각 스킨의 계산값으로 되돌린다. */

/* PC 뷰: style-27 의 @media(min-width:768) .prdList.grid3>li{width:20%} 가
 * PC 목록(원본 33.333% — style-19)을 5열로 오염 → 원상복구 */
@media (min-width: 1025px) {
  .pc-only .ec-base-product .prdList.grid3 > li,
  [data-layer="pc"] .ec-base-product .prdList.grid3 > li { width: 33.333%; }
}

/* 모바일 뷰: style-19(PC 스킨) 오염 보정
 * - #container{width:80%} → 원본 m 스킨은 전폭
 * - .prdList{min-width:756px} → 390px 뷰포트 가로 overflow 유발 */
@media (max-width: 1024px) {
  #container { width: 100%; }
  .m-only .ec-base-product .prdList,
  .m-only .xans-product-listnormal ul.prdList { min-width: 0; }
  /* style-19 의 .xans-product-menupackage/.xans-product-normalmenu/.xans-product-listnormal{width:1200px;margin:*px auto}
   * 오염 보정 — 원본 m 스킨 계산값: 전폭(391px@390), margin 0 (실측 rect w391) */
  .m-only .xans-product-menupackage,
  .m-only .xans-product-normalmenu,
  .m-only .xans-product-listnormal { width: auto; margin: 0; }
  /* style-19 의 ul.grid2 li .thumbnail{float:left;width:220px} / .description{float:left;width:247px;padding:0 20px}
   * 오염 보정 — 원본 m 스킨(style-27) 계산값: thumbnail margin:0 7px 14px 전폭, description margin:0 7px (실측 li 188×215, thumb 175×177, 이름은 이미지 아래) */
  .m-only .ec-base-product ul.grid2 li .thumbnail { float: none; width: auto; margin: 0 7px 14px; }
  .m-only .ec-base-product ul.grid2 li .description { float: none; width: auto; padding: 0; margin: 0 7px; }
}

/* ---- stylefix r2: style-27(m) bare 규칙 PC 전이 복원 — category-64/69(pomeranian/dog-etc) 확증 처방 전면 이식
 * (근거 _styles/category-*.json 실측: body NanumGothic #666(style-19 원문 후승), #container/#contents static·투명,
 *  prdList display:table·li margin 30/20·fs0/lh0, thumbnail a img inline·border0 = style-19 원문값.
 *  banner/menuCategory bg/a #333 은 overlay 전역(Parity r2)이 기집행.) ---- */
@media (min-width: 1025px) {
  body { font-family: 'NanumGothic', "맑은고딕", "Malgun Gothic", Dotum, "돋음", sans-serif; color: #666; }
  #container { position: static; overflow: visible; margin: 0 auto; background-color: transparent; z-index: auto; }
  #contents { position: static; padding: 0; background-color: transparent; }
  .pc-only .xans-product-normalmenu,
  [data-layer="pc"] .xans-product-normalmenu { width: 1200px; margin: 0 auto; padding: 0; overflow: visible; background: transparent; }
  .pc-only .ec-base-product,
  .pc-only.ec-base-product,
  [data-layer="pc"] .ec-base-product,
  [data-layer="pc"].ec-base-product { background-color: transparent; }
  .pc-only .ec-base-product .prdList,
  .pc-only.ec-base-product .prdList,
  [data-layer="pc"] .ec-base-product .prdList,
  [data-layer="pc"].ec-base-product .prdList { display: table; padding: 0; box-sizing: content-box; }
  .pc-only .ec-base-product .prdList > li,
  .pc-only.ec-base-product .prdList > li,
  [data-layer="pc"] .ec-base-product .prdList > li,
  [data-layer="pc"].ec-base-product .prdList > li { margin: 30px 0 20px; font-size: 0; line-height: 0; }
  .pc-only .ec-base-product [class*="grid"],
  .pc-only.ec-base-product [class*="grid"],
  [data-layer="pc"] .ec-base-product [class*="grid"],
  [data-layer="pc"].ec-base-product [class*="grid"] { padding-left: 0; padding-right: 0; }
  .pc-only .thumbnail a,
  .pc-only.ec-base-product .thumbnail a,
  [data-layer="pc"] .thumbnail a,
  [data-layer="pc"].ec-base-product .thumbnail a { display: inline; }
  .pc-only .thumbnail a img,
  .pc-only.ec-base-product .thumbnail a img,
  [data-layer="pc"] .thumbnail a img,
  [data-layer="pc"].ec-base-product .thumbnail a img { display: inline; width: auto; border: 0; }
  .pc-only .prdList .thumbnail .prdImg,
  .pc-only.ec-base-product .prdList .thumbnail .prdImg,
  [data-layer="pc"] .prdList .thumbnail .prdImg,
  [data-layer="pc"].ec-base-product .prdList .thumbnail .prdImg { font-size: 0; line-height: 0; }
  #instagramWidget { display: block; width: 100%; height: 258px; border: 0; }  /* stylefix r3: inline 라인박스 여분 +7.41px 제거 — 기준선 iframe 258px 정합 */
}

/* catalog-dog 배선: API 3상태(로딩/빈/에러) 문구 */
.apiStates { width: 100%; }
.apiState { padding: 60px 0; text-align: center; font-size: 13px; color: #666; }
.apiState[hidden] { display: none; }