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

/* PC 뷰: style-12(m 스킨, 뒤 로드)의 .xans-search-form .searchbox 계열 규칙이
 * PC 검색박스(.ec-base-box.searchbox)를 오염 → style-13/base 원본값 복원 */
@media (min-width: 1025px) {
  /* style-12(m) bare body,code{Roboto;13px;#1b1b1b} PC 전이 복원 — style-13 원문
   * body{font-size:12px;font-family:'NanumGothic'…;line-height:1.2em;color:#666}
   * (color 복원으로 currentColor→borderColor 연쇄 오염(#wrap/#container/#contents)도 해소) */
  body {
    font-family: 'NanumGothic', "맑은고딕", "Malgun Gothic", Dotum, "돋음", sans-serif;
    font-size: 12px;
    line-height: 1.2em;
    color: #666;
  }
  /* style-12 #contents{position:relative;background:#fff}+{padding:0 0 29px} 오염 복원 —
   * style-13 원본(#contents{float:right;width:100%} — position/bg/padding 무지정) */
  #contents {
    position: static;
    padding: 0;
    background-color: transparent;
  }
  /* style-12 #container{z-index:100;position:relative;overflow:hidden;margin:-1px;background:#fff} 가
   * PC GNB(#mononav — 원본 z-index:999 선언이 원본 CSS 오타로 소실)를 덮어 메뉴가 안 보임.
   * style-13 원본값(#container{width:80%;margin:0 auto} — position/z-index 없음) 복원 */
  #container {
    position: static;
    z-index: auto;
    overflow: visible;
    margin: 0 auto;
    background-color: transparent;
  }
  .pc-only .xans-search-form .searchbox {
    position: static;
    padding: 45px 0;                      /* style-13 원본 */
    border: 5px solid #e8e8e8;            /* style-13 .ec-base-box 원본(style-12 bare .ec-base-box 가 1px #d5d5d5 로 오염) */
    color: #404040;                       /* style-13 .ec-base-box 원본(style-12 bare color:#757575 — fieldset currentColor borderColor 연쇄 오염) */
    line-height: 1.2em;                   /* 원본 상속치(style-13 body 1.2em) 복원 — style-12 bare line-height:1.6 이 행높이를 부풀림 */
  }
  .pc-only .xans-search-form .searchbox input#keyword {
    width: 260px;                         /* style-13 .searchbox #keyword */
    padding: 5px 4px 5px 10px;            /* style-13 .searchbox .item input */
  }
  .pc-only .xans-search-form .searchbox .button {
    position: static;
    width: auto;
    text-align: left;                     /* style-12 absolute/right 오염 복원 — 원본은 p.button margin 만 */
  }
  /* style-12 전역 legend{width:0;height:0;text-indent:-9999em} 오염 복원 —
   * 원본 PC 렌더(정답샷 -d)는 fieldset legend "상품 검색" 노출(style-13 은 legend 를 숨기지 않음) */
  .pc-only .searchbox legend {
    width: auto;
    height: auto;
    text-indent: 0;
  }
  /* style-12 전역 input[type=text]{padding:10px;border:1px #d7d5d5;border-box;radius:2} 오염 복원 —
   * 원본 PC 는 UA 기본 input + style-13 .item input{padding:5px 4px 5px 10px} 만
   * (content-box 복원으로 #keyword 가 원본처럼 다음 줄로 랩됨 — 정답샷 -d 기준) */
  .pc-only .xans-search-form .searchbox input[type=text] {
    box-sizing: revert;
    border: revert;
    height: revert;                       /* style-12 bare input[type=text]{height:29px} 오염 — src 는 UA(content 15px, 총 29px) */
    font-family: revert;                  /* style-12 오염(Nanum Gothic) — src 입력폼은 UA 기본(Arial 상당, content 15px 근거) */
    -webkit-appearance: revert;
    appearance: revert;
    vertical-align: revert;               /* style-12 vertical-align:middle 오염 — src 는 UA baseline(item 행높이 59 근거) */
    border-radius: revert;
    color: revert;
    font-size: revert;
    line-height: revert;
    font-weight: revert;
    outline-style: revert;
    padding: 5px 4px 5px 10px;            /* style-13 .searchbox .item input */
  }
  /* style-12 전역 select{appearance:none;ico_select.gif;border #d7d5d5;13px} 오염 복원 —
   * 원본 PC 는 네이티브 select + style-13 height/width 만 */
  .pc-only .xans-search-form .searchbox select {
    -webkit-appearance: revert;
    appearance: revert;
    background: revert;
    border: revert;
    border-radius: revert;
    padding: revert;
    margin: revert;
    color: revert;
    font-size: revert;
    line-height: revert;
    font-weight: revert;
    max-width: revert;
    word-break: revert;
    height: 30px;                         /* style-13 .searchbox select */
  }
}

/* 모바일 뷰: style-13(PC 스킨) 오염 보정 — 원본 m 스킨(style-12) 계산값 복원 */
@media (max-width: 1024px) {
  #container { width: 100%; }             /* style-13 #container{width:80%} 오염 */
  #contents { float: none; }              /* style-13 #contents{float:right} 오염 */
  .m-only .xans-search-form { margin: 0; }             /* style-13 .xans-search-form{margin:0 0 20px} 오염 */
  .m-only .xans-search-form .searchbox { margin: 0; }  /* style-13 .searchbox{margin:21px 0 20px} 오염 */
  /* style-13 .searchbox .button{margin:30px 0 0 170px} 오염 복원 —
   * 원본 m 은 position:absolute;top:7px;right:10px(style-12)뿐, margin 없음(검색버튼이 입력줄 우측) */
  .m-only .xans-search-form .searchbox .button { margin: 0; }
  /* 원본 m 문서는 footer 가 #wrap 내부라 #wrap{min-height:100%}(style-12)가 무해했으나
   * 병합 문서는 footer 가 #wrap 밖(PC 구조) — 그대로 두면 본문 아래 뷰포트만큼 공백 발생 */
  #wrap { min-height: 0; }
  /* 원본 m 은 .mainNav 가 float:left #header 내부 — 병합 문서에선 헤더 밖 조각(nav-m)이라
   * 헤더 float 에 밀려 첫 ul(BFC, overflow:hidden)이 폭 0 으로 붕괴 → float 해제+전폭 복원 */
  .m-only .mainNav { clear: both; }
  .m-only .mainNav ul { width: 100%; }
}

/* stylefix r2: m 스킨 .searchbox p.button{text-align:left} 전이 → PC 스펙 start(_styles/product-search.json) */
@media (min-width: 1025px) {
  .pc-only .ec-base-box.searchbox fieldset p.button { text-align: start; }
}

/* --- product-search 존 배선(API 검색 결과 렌더) --- */
/* 3상태 hidden 토글 보증 — style-13 .noData 등 author display 선언이 [hidden]을 이기는 것 차단 */
#contents [data-state][hidden] { display: none !important; }

.searchSections .searchSection { margin: 20px 0 0; }
.searchSections .sectionTitle {
  margin: 0 0 8px;
  padding: 8px 0;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  color: #404040;
}
.searchSections .sectionTitle .count { font-weight: normal; color: #757575; }
.searchSections .truncNote { padding: 8px 0; color: #757575; text-align: center; }
.searchState .stateMsg { padding: 40px 0; text-align: center; color: #404040; }
.searchState .stateMsg.warning { color: #cb5052; }

@media (max-width: 1024px) {
  /* verifyfix: style-13 #titleArea span{position:absolute;top:6px;left:14px}(뒤로가기 mobileaction 용 스킨 규칙)이
   * div#titleArea 내부에 주입되는 sections-m 템플릿 span(board-name/board-count/item title)까지 절대배치시켜
   * 섹션 제목 이탈·중첩 + 뒤로가기 버튼 피복(클릭 불가, R12 파손). 주입 결과 스코프만 정적으로 중화 —
   * 스킨 원 규칙(뒤로가기 span)은 그대로 유지 */
  #titleArea .searchSections span { position: static; top: auto; left: auto; }
  .m-only .searchSections .searchSection { margin: 14px 0 0; }
  .m-only .searchSections .sectionTitle { padding: 8px 14px; font-size: 14px; }
  /* 모바일 grid2 카드(원본 카테고리 목록 2열 카드형) — style-13(PC 스킨) .prdList{min-width:756px}·
   * .grid2 li .thumbnail{float:left;width:220px} 오염 복원 */
  .m-only .searchSections .prdList { min-width: 0; width: 100%; margin: 0; }
  .m-only .searchSections .prdList.grid2 > li {
    float: left;
    width: 50%;
    margin: 0;
    padding: 7px;
    box-sizing: border-box;
    border-top: 0;
  }
  .m-only .searchSections .prdList.grid2 li .thumbnail { float: none; width: auto; margin: 0; text-align: center; }
  .m-only .searchSections .prdList.grid2 li .thumbnail img { width: 100%; }
  .m-only .searchSections .prdList.grid2 li .description { float: none; width: auto; padding: 6px 4px; text-align: center; }
}

/* stylefix: style-12(m 스킨) 상위 media 의 .prdList.grid3 폭 오염(≈20% — 5열) 복원 —
 * 원본 PC 카테고리 grid3 는 3열(style-13 .grid3 > li{width:33.33%}) */
@media (min-width: 1025px) {
  .pc-only .searchSections .prdList.grid3 > li { width: 33.33%; }
}