/* css/overlay.css — h10 오버레이 (신규 스타일은 이 파일에만 — R5v1)
 * 원본 CSS(reset/base/style-N)는 무수정 반입. 여기서 캐스케이드로 보강/보정만 한다.
 * [R24⑤] 분기 이중 레이어 토글 — 경계 1024 (m.petami 가 태블릿 UA 도 모바일 렌더)
 * [R12②] #mononav 스크롤 전환 — 미러 실측(interactions.headerScrolled) 수치 그대로
 */

/* ---- R24 분기 레이어 토글 (경계 1024) ---- */
@media (max-width: 1024px) {
  .pc-only { display: none !important; }
  /* stylefix r2: #mctns·카카오 플로팅(pc)은 pc-only 클래스 제거(원본 클래스 시그니처 보존 — R16
   * 스타일 매칭이 클래스 경로 기반이라 pc-only 부가가 오매칭 유발) — 동치 토글을 여기서 수행 */
  #mctns { display: none !important; }
  .mbi-simpletalk-kakao[data-device="pc"] { display: none !important; }
  /* stylefix r3: category #contents 내 PC 래퍼·#footer 도 클래스 대신 data-layer 토글(R16 경로 시그니처 보존) */
  [data-layer="pc"] { display: none !important; }
}
@media (min-width: 1025px) {
  .m-only { display: none !important; }
  .mbi-simpletalk-kakao[data-device="mobile"] { display: none !important; }
  [data-layer="m"] { display: none !important; }
}

/* ---- R12② PC 대메뉴(#mononav) — 평시 absolute top100(원본 scroll_navi 초기 상태),
        스크롤 시 fixed 전환(실측: fixed top0 h57 bg#fff border-b 1px #f0f0f0 z10) ---- */
#mononav { position: absolute; top: 100px; left: 0; right: 0; }
#mononav.is-scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 57px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: none;
  z-index: 10;
}

/* ---- R24 레이어 간 CSS 오염 보정 ----
 * PC 스킨(style-28 등)의 bare `header{position:fixed;z-index:10}` 는 PC #mononav 내부
 * header.large(롤링 로고) 대상 규칙인데, 같은 문서에 든 m-only <header id="header"> 에도
 * 맞아 모바일 헤더가 고정돼 버린다(원본 모바일 헤더는 static — m 스킨에 header 규칙 없음).
 * 모바일 뷰포트에서 원본 상태로 되돌린다. */
@media (max-width: 1024px) {
  /* navfix iter2: float:none 추가 — bare header{float:left;width:100%;position:fixed}(style-1/31 계열)의
   * float 전이가 남아 m 헤더가 플로트로 흐름 이탈(높이 0 기여) → 직후 .mainNav 첫 ul(overflow:hidden BFC)이
   * 플로트 옆 잔여폭 0 으로 수축(rect x=390,w=0, NavWalk 2.6). 원본 m 헤더는 비플로트 정적. */
  /* 전역 r1: header#header.m-only 병기 — 래퍼 병합(파리티) 후에도 매칭되도록(현 구조는 래퍼 하위라 앞 셀렉터가 담당) */
  .m-only header#header, header#header.m-only { position: static; top: auto; z-index: auto; float: none; }
  /* navfix iter2: PC 스킨 .xans-layout-logotop{position:relative;z-index:9}(PC 로고 규칙)가
   * 공유 클래스인 m 로고 h1 에 전이 → h1(z9)이 절대배치 .search 버튼(z auto)을 덮어
   * 검색 레이어 트리거 탭 불가(NavWalk 2.4, 전 페이지). 원본 m 스킨은 h1 무배치(static).
   * offsets 없는 relative 라 static 복원은 시각 무변화. */
  .m-only .searchWrap .xans-layout-logotop { position: static; z-index: auto; }
}

/* ---- R24 레이어 오염 보정 공통(COMMON ①, board-responsible-list 요청 승인) ----
 * PC 스킨 전반(style-1/3/4/8/11/13/14/19/21/25/26/28/30/31/36 등)의
 *   .xans-layout-footer{position:relative;float:right;width:1000px;height:234px}
 *   .xans-layout-footer .copyright{position:absolute;left:0;bottom:0;height:45px;font-size:11px;line-height:45px}
 * 가 공유 클래스인 m-only 푸터에 전이 → 모바일 폭에서 float:right w1000 으로
 * footerInfo(사업자정보)·copyright 가 화면 밖(x≈-600) 유실. 전 서브페이지 공통 결함
 * (board-review-list/read-128/guide 실측 x=-596 — index 는 pages/index.css 선보정).
 * 원본 m 스킨은 .xans-layout-footer 무규칙(static·auto), copyright 실값은
 * .xans-layout-footerpackage .copyright{static;text-align:center;line-height:28px;font-size:9px}.
 * 전이분만 기본값 복원(페이지별 동일값 선보정과 중복 적용돼도 무해). */
@media (max-width: 1024px) {
  .m-only .xans-layout-footer { position: static; float: none; width: auto; height: auto; }
  .m-only .xans-layout-footer .copyright { position: static; left: auto; bottom: auto; height: auto; font-size: 9px; line-height: 28px; }
}

/* ---- R24 레이어 오염 보정(shotfix r2, D2 가로 overflow) ----
 * PC 스킨 style-19 `.menuCategory{border:1px solid #d7d5d5;width:100%}` 가 공유 클래스인
 * m-only ul.menuCategory 에 전이 — content-box 라 100% + 좌우 border 2px = 뷰포트+2px
 * 문서 가로 overflow(category 11면, t/m 각 2px 실측: ul.menuCategory rect 392@390·770@768).
 * 원본 m 스킨(style-27)은 ul 레벨 width/border 무규칙. 현행 시각(보더 표시)은 게이트 통과
 * 상태라 보존하고, box-sizing 만 border-box 로 — 보더가 100% 폭 안쪽으로 들어와
 * 리플로우로 overflow 해소(마스킹 아님). PC 뷰포트(min-width:1025)는 무접촉. */
@media (max-width: 1024px) {
  .m-only ul.menuCategory { box-sizing: border-box; }
}

/* ---- R24 레이어 오염 보정 공통(navfix iter2, NavWalk 판정) ----
 * m 스킨(style-15/27 등)의 #container{z-index:100;position:relative}(모바일 페이지 전환용)가
 * 공유 노드 #container 를 통해 PC 뷰에도 적용 → PC 대메뉴 #mononav(z10, 실측값)가
 * 컨테이너 뒤로 가려져 GNB 미표시·클릭 불가(goods/te/shopinfo/category/product 상세 등).
 * 원본 PC 문서의 #container 는 z-index 무지정 — PC 뷰포트에서만 원상 복원한다
 * (#mononav z10 실측 수치는 그대로 유지). 페이지별 선보정(board-index z101 등)과 공존 무해. */
@media (min-width: 1025px) {
  #container { z-index: auto; }
}

/* ---- R24 레이어 오염 보정 공통(전역 r1 — board-free-list/goods/te/shopinfo-guide/article-notice 위임) ----
 * m 스킨(style-15/18/27/35 등)의 bare body 규칙(position:relative;height:100%;min-width:320px;
 * font-size:13px, Roboto/#1b1b1b)이 뒤 로드로 PC 뷰 body computed 를 오염 — 전 페이지 parity
 * "BODY mixed" 공통 근인. PC 원값 중 전 페이지 동일값 4종만 복원(src 트리 47/48면 실측 동형:
 * static·auto·min-width1480·12px). font-family/color 는 PC 스킨별 상이(nanumgothic #666 vs
 * noto sans kr #353535) — 페이지 css 몫. min-width:1480 은 원본 자체의 vw1440 가로 40px
 * 오버플로 재현(src BODY w1480 — te/goods/shopinfo-guide/board-free 페이지 보정과 동일 정책).
 * 예외: protected-supply-list(BODY#popup)는 src w1440·min-width 무규칙 — 원값 유지. */
@media (min-width: 1025px) {
  body { position: static; height: auto; min-width: 1480px; font-size: 12px; }
  body#popup { min-width: 0; }
}

/* ---- 전역 r2: partials/header.html 래퍼 병합 보상 ----
 * BODY 직계 익명 .pc-only/.m-only 래퍼 DIV(파리티 위치매칭 한 칸 밀림의 근인)를 각 요소에
 * 병합(pc-only→#skipNavigation/#utile/#mctns/#header/hr.layout, m-only→header#header/hr.layout —
 * r1 footer 병합과 동일 패턴). 병합으로 침묵 실효되는 구조 의존 페이지 셀렉터를 여기서 동치 보상
 * (전역 단계는 css/pages/* 수정 금지):
 * ① goods.css·member-agreement.css `.m-only header#header …` 4규칙 — m 스킨 원문값 그대로
 *   (board-index.css 병기분과 동일값, 전 m 스킨 공통 헤더 표준값 — 중복 적용 무해)
 * ② board-read 4면(css) `#layout .pc-only #header h1` 2규칙 — src PC H1 은 48면 전수
 *   [579.5,20,321,58] 동형 실측이라 #layout 잔존 페이지 전체 적용해도 src 정합 */
@media (max-width: 1024px) {
  header#header.m-only .header { position: relative; width: 100%; text-align: left; background: #fff; }
  header#header.m-only h1 { height: 65px; line-height: 62px; padding: 0; text-align: center; }
  header#header.m-only h1 img { max-height: 35px; vertical-align: middle; }
  header#header.m-only .search { top: 12px; }
}
@media (min-width: 1025px) {
  /* stylefix r2: line-height normal→inherit — 원본 h1 은 lh 무규칙(body 상속): NanumGothic 스킨(body lh
   * 1.2em)은 14.4px, Noto 스킨(페이지 css 가 body lh normal 복원)은 normal — 스펙 실측 페이지별 상이를
   * inherit 로 동형 재현. m 스킨 #layout #header h1{line-height:62px} 전이는 후승 동특이도로 무력화.
   * height:58 고정이라 rect 무변(파리티 src [579.5,20,321,58] 유지) */
  #layout #header.pc-only h1 { height: 58px; line-height: inherit; }
  #layout #header.pc-only h1 img { max-height: 58px; }
}

/* ---- R24⑩ 모바일 검색 레이어 열림 상태 (원본 .xans-layout-searchheader display:none → JS 토글) ---- */
#search_box.is-open { display: block; }
#searchBarForm .dimmed.is-open { display: block; }

/* ---- R12⑧ 카카오톡 상담 플로팅 (happytalk 위젯 정적 재현 — 실측 rect: PC 80x80 우하단) ---- */
.mbi-simpletalk-kakao {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 999;
}
.mbi-simpletalk-kakao .badge { display: block; cursor: pointer; color: #333; }
.mbi-simpletalk-kakao .badge img { width: 100%; display: block; }

/* ---- Parity r2 전역(2차 루프, category-64#0·category-69#1 위임): style-27(m) bare 3종 PC 전이 —
 * category 17면 공통 오염(전 카테고리가 동일 스택 style-19(PC)+style-27(m), css-page-map 실측).
 * ① .xans-product-menupackage .banner{padding:10px 14px} → 빈 p.banner h20 박스화, .title 30→70,
 *   하류 전부 +38 시프트(maltese/siamese 실측 재확인: banner h20 pad10/14·title h70).
 * ② .xans-product-menupackage > ul{background:#fff} → menuCategory 배경(style-19 무규칙=투명이 원문).
 * ③ bare a{color:#000} 가 style-19 a{color:#333} 후승 — 접힌 A 컨텍스트 currentColor 로 이미지
 *   보더색 이탈. 복원은 category 전용 컨테이너로 스코프(두 클래스는 category/*.html 17면에만 실재 —
 *   타 페이지 무접촉), 특이도 (0,1,1)이라 style-19 의 더 특정한 앵커색(.menuCategory>li>a 등)은 보존.
 * 복원값 = style-19 원문. m 뷰포트에선 style-27 이 정당한 원문이므로 PC 블록 한정.
 * category-pomeranian/dog-etc.css 의 동일값 선보정과 중복 적용돼도 무해. */
@media (min-width: 1025px) {
  .xans-product-menupackage .banner { padding: 0; }
  .xans-product-menupackage > ul { background: none; }
  .xans-product-menupackage a,
  .xans-product-listnormal a { color: #333; }
}

/* ---- Parity r2 전역(2차 루프): 헤더 로고 — src 트리 실측 A/IMG color rgb(51,51,51)·A [624,20,232,15](IMG 상단정렬).
   tgt 는 base img{vertical-align:middle}·a 상속색 #000 으로 A y+21.2/borderColor(currentColor) 이탈 — 전 페이지 공통 ---- */
#header .topArea h1 a { color: #333; }
/* !important: style-2 등 m 스킨 bare `#layout #header h1 img{vertical-align:middle}`(2,0,2) PC 전이를 이겨야 함 — .topArea 는 PC 헤더 전용이라 부작용 없음 */
#header .topArea h1 img { vertical-align: top !important; }

/* ---- StyleGate r2 전역: m 스킨(style-2/6/7/9/10/12/15~18/20/22~24/27/29/32~35) bare a{color:#000} 이
 * 뒤 로드로 PC 뷰 bare 앵커색을 오염 — 전 PC 스킨(style-1/3/13/14/19/21/25/26/28/30/31/36) bare a 는
 * 전부 a{text-decoration:none;color:#333} 단일(오프셋 실사, 예외 0건). 동특이도(0,0,1) 후승으로 복원.
 * (더 특정한 스킨 앵커색 규칙은 특이도 우위로 원래대로 이긴다 — 원본 캐스케이드 동형) ---- */
@media (min-width: 1025px) {
  a { color: #333; }
}

/* ---- StyleGate r2 전역 2: category 17면 공통 잔여(스택 style-19+style-27 동일, 컨테이너 스코프 누출 없음) —
 * ① style-27 .xans-product-menupackage > ul > li > a{display:inline-block;…} 전이 → src display inline·h auto
 *   (style-19 .menuCategory > li > a 는 display 무선언 = inline)
 * ② style-27 .ec-base-product .description .name a{font-weight:700} 전이 → style-19
 *   .ec-base-product .prdList .description .name{font-weight:normal} 상속이 원문(src fw400) ---- */
@media (min-width: 1025px) {
  .xans-product-menupackage > ul > li > a { display: inline; }
  .xans-product-listnormal .prdList .description .name a { font-weight: normal; }
}

/* ---- stylefix r2 전역: 상품상세 8면(PC style-1 + m style-24) — m 스킨 후승 전이 복원.
 * 셀렉터는 상품 전용 컨테이너(xans-product-detail/additional) 또는 실측 전수 동형값으로 한정.
 * 근거: _styles/product-*-*.json PC 실측 + style-1 원문 규칙(전이 전 원값) —
 *  ① style-24 .xans-product-detail{margin:0 0 14px} → style-1 원문 margin:50px auto
 *  ② style-24 .xans-product-additional{background:#fff} → src 투명
 *  ③ style-24 .ec-base-tab li{text-align:center}/.ec-base-tab a{flex 센터} → src start/normal
 *  ④ style-24 .btnNormal 계열{height:29px} → src h48(auto=pad14+lh18+border) — gColumn 한정
 *  ⑤ style-24 .xans-product-action{padding-bottom:0} 연쇄 → style-1 원문 pb23
 *  ⑥ style-24 .ec-base-button{text-align:right} → PC 전 스펙 center(48면 실측 15/15) ---- */
@media (min-width: 1025px) {
  .xans-product-detail { margin: 50px auto; }
  .xans-product-additional { background: transparent; }
  .xans-product-additional .ec-base-tab li { text-align: start; }
  .xans-product-additional .ec-base-tab a { align-items: normal; justify-content: normal; }
  .ec-base-button[class*="gColumn"] [class^="btn"] { height: auto; }
  .xans-product-detail .imgArea .xans-product-action { padding-bottom: 23px; }
  .ec-base-button { text-align: center; }
}

/* ---- stylefix r2: instagram 위젯 iframe(카테고리 16면, 파리티 기준선 IFRAME#instagramWidget.null
 * #contents 말미 1184x258 실측) — 원본 주입 스크립트 미반입(R25-E)이라 프레임 계산값만 재현.
 * display 는 원본 computed inline(기본값) 유지, m 뷰는 원본 m 문서에 없어 숨김 ---- */
#instagramWidget { width: 100%; height: 258px; border: 0; }
@media (max-width: 1024px) {
  #instagramWidget { display: none; }
}

/* ---- stylefix r2 전역: 게시판 상세 5면(PC style-26 + m style-10/35) — m 스킨 후승 전이 복원.
 * 근거: CDP matched-rules 실측(전이 규칙 원문 확인) + _styles/article-*.json PC 실측 —
 *  ① m bare table{table-layout:fixed} → PC 원문 auto(스펙 td 1032/1162 = auto 산정 폭.
 *    fixed 는 4셀 행 기준 균등분할로 td 506 반토막 + 본문 이미지 794px 축소 연쇄)
 *  ② m .xans-board-read .ec-base-button{margin:10px 14px} → PC 원문 margin:10px 0 40px
 *  ③ m .xans-board-commentwrite{padding:29px 0 0} → PC 원문 padding:5px 20px 20px
 *  ④ m .xans-board-readpackage{background:#fff} → src 투명
 *  ⑤ froala 클래스 .fr-dib(=display block, 상용 CSS R18 미반입로 실효) — 스펙 display block 만 동치 재기술 ---- */
@media (min-width: 1025px) {
  .ec-base-table.typeWrite table { table-layout: auto; }
  .xans-board-read .ec-base-button { margin: 10px 0 40px; }
  .xans-board-commentwrite { padding: 5px 20px 20px; }
  .xans-board-readpackage { background: transparent; }
  /* m 스킨 .ec-base-tooltip .btnClose{w/h25;fs1;bg none} 전이 →
   * PC 원문(base) 복원: 자연크기 13x9 img + fs12/lh18, bg 무(member-join 스펙 실측) */
  .ec-base-tooltip a.btnClose { width: auto; height: auto; padding: 0; background: none; font-size: 12px; line-height: 18px; }
}

/* ---- stylefix r2 전역 3: m 스킨 공통 전이 잔여 일괄(전 서브페이지 스펙 실측 동형) ----
 *  ① m #container{position:relative} / #contents{position:relative;background:#fff;padding:0 0 29px}
 *    → PC 스펙 전수 static·투명·pb0 (te/goods/privacy/product 8면/보드 전면 실측 — 페이지 css 선보정과 동치·중복 무해)
 *  ② m .xans-board-listpackage·.ec-base-table{background:#fff} → PC 투명
 *  ③ m .xans-board-search{margin:0 0 29px;padding:14px;text-align:left;border} → PC 원문
 *    (style-25/26 계열 공통: margin 0·padding 20px 0 20px 10px·ta start — board-free-list.css 검증 동형)
 *  ④ m select/input/legend 폼 전이 → UA+PC 원문(board-free-list.css·board-notice 검증 패턴 전역화)
 *  ⑤ m .ec-base-table th/td(fs13·lh·pad13) → PC 원문 typeWrite 셀(pad 11/18·td lh18, notice-read 스펙)
 *  ⑥ popup(보호납품처 리스트): 원본 popup 문서는 bare a{color:#000}(m 스킨 후승)이 최종 —
 *    전역 a{color:#333} 복원의 예외. h1 은 원본 bold(스펙 fw700) ---- */
@media (min-width: 1025px) {
  #container { position: static; background-color: transparent; }
  #contents { position: static; background-color: transparent; padding-bottom: 0; }
  .xans-board-listpackage { background: transparent; }
  .ec-base-table.typeList { background: transparent; }
  .xans-board-search { margin: 0; padding: 20px 0 20px 10px; border: 0; text-align: start; }
  .boardSearch p { text-align: start; }
  .boardSearch select { all: revert; width: 72px; margin: 0 2px 0 0; }
  .boardSearch select#search_date { margin: 0 2px 0 22px; }
  .boardSearch input.inputTypeText { all: revert; padding: 0; }
  .boardSearch legend { height: auto; width: auto; text-indent: 0; }
  /* 스펙 검증분만 지정(미검증 변은 현행 유지 — 과보정 금지).
   * 스코프 = 게시판 상세(.xans-board-read) 한정 — 회원가입 등 폼 typeWrite 는 스펙 상이(r2 실측 회귀 스코프 축소) */
  /* stylefix r3: th 상하 12px 도 style-35(m) `.ec-base-table tbody th{padding:12px 0 12px 13px}` 전이 —
   * PC 원문(style-26) `padding:11px 0 10px 18px` 전체 복원(행높이 43→40, 테이블 체인 +6 근인) */
  .xans-board-read .ec-base-table.typeWrite th { padding: 11px 0 10px 18px; }
  /* stylefix r3: 좌우 13px 은 style-35(m) `.ec-base-table td{padding:12px 13px}` 전이 — PC 원문(style-26)
   * `.ec-base-table.typeWrite td{padding:8px 10px 7px}` 복원. 첫 td(colspan 포함)는 style-35
   * `…tr td:first-child{padding:12px 13px}`(0,3,2) 가 이겨 위 rule 로 부족 — 동치 first-child 변형 병기 */
  .xans-board-read .ec-base-table.typeWrite td,
  .xans-board-read .ec-base-table.typeWrite tr td:first-child { padding: 8px 10px 7px; line-height: 18px; }
  /* stylefix r3: style-10(m) `.xans-board-commentpackage{overflow:hidden}` PC 전이가 commentwrite
   * mt30 의 부모 마진 붕괴를 차단(+30 체인, review-read 실측 81.4→spec 51.4) — PC 원문(style-26) 무규칙=visible 복원 */
  .xans-board-commentpackage { overflow: visible; }
  .fr-view p { line-height: 18px; }  /* 전 read 스펙 p lh18(직접값 — inherit 는 .fr-view lh normal 에 걸림) */
  .fr-view img.fr-fic { position: relative; }
  body#popup a, body#popup .mbi-simpletalk-kakao .badge { color: #000; }
  body#popup h1 { font-weight: 700; }
}
.fr-view img.fr-dib { display: block; }

/* ---- stylefix r2 전역: style-27 등 m 스킨 `.ec-base-product [class*="grid"] > li{text-align:center}` 이
 * 뒤 로드로 PC 뷰 prdList li 를 center 오염 — 미러 _styles 실측은 전 카테고리/추천 li textAlign start
 * (PC 스킨엔 li 단위 text-align 무규칙 = initial start, 가운데 정렬은 하위 .description/.box 몫).
 * 동일 셀렉터 후승으로 원값 복원(PC 한정 — m 뷰포트는 style-27 원문 유지) ---- */
@media (min-width: 1025px) {
  .ec-base-product [class*="grid"] > li { text-align: start; }
}

/* ---- stylefix r3 전역: style-27(m) `@min768 .ec-base-product [class*="grid"] li .name{font-size:15px}` 이
 * PC 뷰 상품명 fs 를 오염(전 스펙 .name fs12, 15px 스펙 0건 — _styles 전수 실사) — strong.name h33→34,
 * li 386→387, prdList 1744→1748(+4) 연쇄 드리프트의 근인(fs12 토글 실측으로 확정, 기준선 트리 동치).
 * 동일 셀렉터 후승으로 원값 복원(PC 한정) ---- */
@media (min-width: 1025px) {
  .ec-base-product [class*="grid"] li .name { font-size: 12px; }
}

/* ---- editgate: BR-RUN(R1) 수선 — <br><br> 스페이서 제거분을 실측 여백으로 치환 ----
 * footer m-only 지점 블록: br 2줄 = 33px(2×16.5px line box, 390/768 실측 동일값)
 * product 경고문(font[red] b): 빈 줄 1 = 1.2em(line-height normal — pc 14.4px/m 15.6px 실측 일치) */
.footerCustomer .ftm-brgap-tel { padding-top: 33px; }
.footerCustomer hr.ftm-brgap-hr { margin-bottom: 33px; }
.warn-row { display: block; }
.warn-row-gap { margin-bottom: 1.2em; }

/* ---- GNB 래핑 픽스: 1025~1114px 에서 PC 대메뉴 2그룹(inline-block, 브리더456+마진30+분양608≈1094px)이
 * #mononav(min-width:1100) 컨테이너에 살짝 안 맞아 둘째 그룹이 다음 줄로 래핑 → absolute(h57) 넘쳐
 * 히어로 침범. body min-width:1480 고정 레이아웃이므로 단일행 유지가 정합(가로스크롤로 흡수). ---- */
#mononav .position { white-space: nowrap; }

/* ---- #container PC 전용 스타일(width:80%·margin -1px)의 모바일/태블릿 누수 차단 ----
 * base style-*.css 가 전역으로 #container{width:80%;margin:0 auto} + margin-top/left:-1px 를 지정,
 * 일부 page css 는 @media(max-width:1024){#container{width:80%}} 로 모바일에도 80% 적용 → 폭 좁아짐·1px 밀림.
 * 모바일/태블릿은 전체폭·음수마진 제거가 정합(PC 레이아웃 트릭이므로 PC 한정). ---- */
@media (max-width: 1024px) {
  #container { width: 100% !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* ---- 히어로 캐러셀 페이드 레이아웃 (caroufredsel 제거분 바닐라 재현) ----
 * 3슬라이드 절대배치 스택, is-active 만 노출(페이드). active 는 relative 로 컨테이너 높이 확보.
 * touch-action:pan-y 로 세로스크롤 보존하며 가로 스와이프 감지(규약 R 인터랙션). ---- */
#wrapper .caroufredsel_wrapper{position:relative !important;width:100% !important;height:auto !important;overflow:hidden !important;}
#carousel{position:relative !important;width:100% !important;height:auto !important;left:0 !important;touch-action:pan-y;}
#carousel>a{position:absolute;top:0;left:0;width:100% !important;opacity:0;transition:opacity .6s ease;display:block;}
#carousel>a.is-active{position:relative;opacity:1;z-index:1;}
#carousel>a img{width:100% !important;height:auto !important;display:block;}

/* ---- 모바일 히어로 스마트배너 슬라이더 페이드 레이아웃 (bxslider 바닐라 재현) ---- */
.smart-banner-wrapper .smart-banner-bxslider{position:relative;width:100%;margin:0;padding:0;list-style:none;touch-action:pan-y;}
.smart-banner-wrapper .smart-banner-bxslider>li{position:absolute;top:0;left:0;width:100%;opacity:0;transition:opacity .5s ease;}
.smart-banner-wrapper .smart-banner-bxslider>li.is-active{position:relative;opacity:1;z-index:1;}
.smart-banner-wrapper .smart-banner-bxslider>li a{display:block;}
.smart-banner-wrapper .smart-banner-bxslider>li img{width:100%;height:auto;display:block;}
.smart-banner-wrapper{position:relative;}
.h10-sb-pager{position:absolute;bottom:10px;left:0;right:0;text-align:center;z-index:2;font-size:0;}
.h10-sb-pager button{width:8px;height:8px;border-radius:50%;border:0;margin:0 3px;padding:0;background:rgba(255,255,255,.55);cursor:pointer;vertical-align:middle;}
.h10-sb-pager button.on{background:#fff;}

/* ---- 히어로 캐러셀 nav 위치보정 (caroufredsel 플러그인 제거로 어긋난 화살표/페이저 재배치) ----
 * 페이드 전환이라 히어로 높이가 원본(가로트랙 690px)과 달라 #pager/arrow가 히어로 아래 빈공간에 뜨던 것 수정.
 * #prev/next=히어로 좌우 오버레이 화살표(투명박스740→46원형+CSS화살표), #pager=핑크바 위 3점, .arrowm 잔재 숨김. ---- */
#slide.pc-only>ul,#slide.pc-only>ul>li{height:auto;}
#wrapper{position:relative;height:auto;bottom:auto;}
#wrapper #prev,#wrapper #next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;margin:0;z-index:10;background:rgba(0,0,0,.18);border-radius:50%;opacity:.55;transition:opacity .2s;}
#wrapper #prev:hover,#wrapper #next:hover{opacity:.9;}
#wrapper #prev{left:18px;right:auto;}
#wrapper #next{right:18px;left:auto;}
#wrapper #prev:before,#wrapper #next:before{content:"";position:absolute;top:50%;left:50%;width:11px;height:11px;border-left:2px solid #fff;border-bottom:2px solid #fff;}
#wrapper #prev:before{transform:translate(-30%,-50%) rotate(45deg);}
#wrapper #next:before{transform:translate(-70%,-50%) rotate(-135deg);}
#wrapper #pager{position:absolute;left:0;right:0;bottom:16px;top:auto;width:auto;text-align:center;z-index:10;}
#wrapper #pager a{display:inline-block;width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.55);margin:0 5px;}
#wrapper #pager a.selected{background:#fff;}
#wrapper #pager a span{display:none;}
#wrapper .arrowm{display:none;}

/* ---- 지점안내(zz.html) — PC-first 초벌서 누락된 모바일 페이지 반응형 재생성 ---- */
.zz-page{max-width:900px;margin:0 auto;padding:20px 16px 60px;box-sizing:border-box;}
.zz-head{text-align:center;margin:10px 0 24px;}
.zz-title{font-size:26px;color:#333;font-weight:bold;margin:0 0 18px;}
.zz-title span{color:#c98b8b;font-weight:normal;font-size:20px;}
.zz-tabs{display:inline-flex;gap:8px;}
.zz-tab{display:inline-block;padding:9px 22px;border-radius:20px;border:1px solid #ddd;color:#666;font-size:15px;text-decoration:none;background:#fff;}
.zz-tab.on{background:#333;border-color:#333;color:#fff;font-weight:bold;}
.zz-branch{padding:34px 0;border-top:1px solid #eee;}
.zz-branch:first-of-type{border-top:0;}
.zz-branch-name{font-size:22px;color:#222;font-weight:bold;text-align:center;margin:0 0 16px;}
.zz-links{text-align:center;margin:0 0 18px;font-size:0;}
.zz-links .zz-link{display:inline-block;margin:0 5px;padding:9px 18px;border:1px solid #ddd;border-radius:22px;color:#555;font-size:14px;text-decoration:none;background:#fafafa;}
.zz-links .zz-link em{font-style:normal;}
.zz-photos{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin:0 0 18px;-webkit-overflow-scrolling:touch;}
.zz-photos img{flex:0 0 auto;width:66%;max-width:520px;height:auto;border-radius:8px;object-fit:cover;}
.zz-addr{text-align:center;margin:0 0 16px;}
.zz-addr-text{font-size:15px;color:#333;line-height:1.7;margin:0;}
.zz-addr-text strong{color:#c98b8b;margin-right:6px;}
.zz-copy{margin-left:8px;padding:4px 12px;border:1px solid #cfcfcf;border-radius:14px;background:#fff;color:#555;font-size:13px;cursor:pointer;vertical-align:middle;}
.zz-copy:hover{border-color:#999;color:#222;}
.zz-addr-note{font-size:13px;color:#999;margin:6px 0 0;}
.zz-map{margin:0 0 18px;}
.zz-map .root_daum_roughmap{width:100%!important;}
.zz-map .root_daum_roughmap .wrap_map{height:360px!important;}
.zz-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.zz-actions .zz-btn{display:inline-block;padding:13px 22px;border-radius:26px;font-size:15px;font-weight:bold;text-decoration:none;box-sizing:border-box;}
.zz-actions .zz-btn em{font-style:normal;}
.zz-btn-tel{background:#333;color:#fff;}
.zz-btn-kakao{background:#fae100;color:#3a1d1d;}
@media (max-width:768px){
  .zz-page{padding:14px 12px 50px;}
  .zz-title{font-size:22px;}
  .zz-photos img{width:82%;}
  .zz-actions .zz-btn{flex:1 1 100%;text-align:center;}
  .zz-map .root_daum_roughmap .wrap_map{height:300px!important;}
}
.zz-map-frame{width:100%;height:360px;border:0;display:block;border-radius:8px;overflow:hidden;background:#f2f2f2;}
@media (max-width:768px){ .zz-map-frame{height:300px;} }

/* ---- 지점안내 PC 레이아웃 정합 (body.zz-location, >1024) ----
 * 원본엔 PC 지점안내 페이지가 없어(모바일 전용), 커스텀 location.html 이 다른 CSS세트(style-31)를
 * 로드하며 표준 PC 그리드를 못 받아 #container margin-left 가 -1px(타 페이지는 148px)→브레드크럼이
 * 좌측끝에 붙고(페이지마다 다르게 노출), zz-page 가 absolute #mononav(top100~157) 영역과 겹쳤다.
 * 아래로 표준 콘텐츠 칼럼 정렬(148px)+nav 하단 시작(margin-top)+지도폭 정상화. 모바일(≤1024) 무영향. */
@media (min-width:1025px){
  body.zz-location #container { margin-left:148px !important; overflow:visible !important; }
  body.zz-location .zz-page { margin-top:56px !important; }
  body.zz-location .zz-map { max-width:640px; margin-left:auto; margin-right:auto; }
}

/* ---- PC 현재위치(breadcrumb) 페이지 간 불일치 정합 (>1024) ----
 * ① 카테고리(강아지/고양이 등)의 breadcrumb 는 `.xans-product-headcategory.path` 로 margin-top:30px →
 *    top:90 이 되어 absolute #mononav(top100~157)와 겹쳐 흐릿하게 잘림. board 의 `.path.pc-only`(top:48,
 *    nav 위)와 어긋난다. margin-top 을 -12(board 값)로 당겨 nav 위로 올리고, 같은 크기 margin-bottom 으로
 *    아래 제목/필터 위치는 그대로 보존(순수 breadcrumb만 이동). 실측: bc 90→48, 제목 160·필터 195 불변.
 * ② 용품할인(goods.html) 등 style-15 계열을 로드하는 페이지는 #container{margin-left:-1px} 라 좌측끝에
 *    붙는다(타 페이지는 margin:0 auto=중앙 148px). `.path.pc-only` 를 가진 컨테이너만 중앙정렬로 되돌린다
 *    — 홈(index)은 breadcrumb(.path.pc-only)가 없어 미매칭이라 full-width 레이아웃 보존. */
@media (min-width:1025px){
  .xans-product-headcategory.path { margin-top:-12px !important; margin-bottom:62px !important; }
  #container:has(.path.pc-only) { margin-left:auto !important; margin-right:auto !important; }
}

/* ---- 이슈2: PC 브레드크럼/타이틀 크롬(.titleArea/.path/.monoline)이 pc-only 누락된 페이지(board·member·company 등)에서
 * 모바일 상단 여백을 만드는 것 일괄 차단. 분양혜택(guide)처럼 모바일에선 숨김이 정합. 카테고리 id=titleArea(모바일 제목)와 무관. ---- */
/* h10-pcchrome-hide */
@media (max-width:1024px){
  #contents > .titleArea, #contents > .path, #contents > .monoline { display:none !important; }
}

/* ---- 이슈3: 모바일/태블릿 품종필터(menuCategory)를 원본 모바일과 1:1 재현 ----
 * 원본 실측(m.petami.co.kr, 390px):
 *   ul{text-align:center;font-size:13px;line-height:15.6px;padding:0 14px;margin:-1px 0 0;
 *      border:0 단, border-bottom:1px solid #d5d5d5}   ← 필터 아래 구분선 1줄만 존재
 *   li{inline-block;width:auto(글자폭);margin:0;padding:11px 0 10px;font-size:13px}
 *   a{padding:0;background:none(화살표없음)}.
 * base 스킨(style-19)은 font-size:0(공백제거)+li width:115px(고정)+border 1px 4변(박스) 라
 * 항목이 넓게 퍼져 2열/4줄이 됐음 → 아래로 원본과 동일하게 콤팩트 auto-width·가운데정렬·
 * 자연줄바꿈(6+1)으로 복원하고, 4변 박스 대신 원본처럼 하단 구분선만 남긴다.
 * margin-top 은 base -15px 를 원본값 -1px 로 되돌려 타이틀(headcategory 하단선)과의 간격을 맞춘다.
 * PC(>1024)는 원 스타일(4변 박스 border) 유지.
 * 검수요청(8/6): 카테고리(필터) 위에도 구분선이 있어야 함 → border-top 추가(하단과 대칭, 상하 1줄씩). */
/* h10-catfilter */
@media (max-width:1024px){
  .xans-product-menupackage .menuCategory { border:0 !important; border-top:1px solid #d5d5d5 !important; border-bottom:1px solid #d5d5d5 !important; font-size:13px !important; line-height:15.6px !important; padding:0 14px !important; margin:-1px 0 0 !important; }
  .menuCategory > li { display:inline-block !important; width:auto !important; margin:0 !important; padding:11px 0 10px !important; font-size:13px !important; line-height:15.6px !important; vertical-align:baseline !important; }
  .menuCategory > li > a { padding:0 !important; background-image:none !important; background:none !important; }
  .menuCategory > li > a .count { display:none !important; }
}

/* ==== 검수 요청 3건(8/6) — 모바일/태블릿 ==== */
@media (max-width:1024px){
  /* ① 용품할인(goods)·방문훈련(te) 상단 여백 제거.
   *    이 페이지들은 titleArea 뒤 `</div>` 로 #contents 가 조기 종료돼 실제 본문 .mall_companyR 이
   *    #contents 의 형제로 밀려나 있다(HTML 버그). 빈 #contents(float:right)가 하단으로 흘러
   *    본문을 ~29px 아래로 밀어 상단 여백이 생긴다. #contents 바로 뒤에 .mall_companyR 형제가 오는
   *    깨진 구조에서만 빈 #contents 를 collapse 해 본문을 상단에 붙인다(정상 페이지는 미매칭). */
  #container > #contents:has(+ .mall_companyR) { float:none !important; height:0 !important; min-height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; }

  /* ② 검색 아이콘 레이어(#search_box) 상단 여백 제거. absolute + positioned 조상(.header top:10)
   *    때문에 뷰포트 최상단에서 ~10px 떠 회색 딤드가 보였다 → fixed top:0 로 최상단 밀착. */
  #search_box { position:fixed !important; top:0 !important; left:0 !important; right:0 !important; }

  /* ③ 게시판(분양후기 등) 페이지네이션 정사각 정규화. base 숫자링크가 padding 9/6 + line-height 27
   *    로 33×44 세로 직사각형이 돼 화살표(33×29)와 어긋났다 → 숫자·화살표 모두 40×40 정사각 통일. */
  .ec-base-paginate.typeList ol li a,
  .ec-base-paginate.typeList .btnPrev,
  .ec-base-paginate.typeList .btnNext { box-sizing:border-box; width:40px; height:40px; line-height:38px; padding:0; vertical-align:middle; border:0; }
}

/* ==== 검수 요청(8/6) PC — GNB 호버 서브메뉴 / 로고 애니 / 필터밑줄 (모두 no !important) ==== */
/* 서브메뉴 기본 숨김은 전역(모바일에서도 노출 금지) — 호버 노출만 PC 미디어쿼리 */
#mononav .gnb-sub { display:none; }
@media (min-width:1025px){
  /* B: 강아지/고양이분양 GNB 마우스오버 시 품종 드롭다운(원본 xans-layout-category 동적 서브 재현).
   *    원본은 세로 흰 드롭다운(연테두리+그림자), 호버 항목은 분홍. 정적 클론이라 마크업 수작업 추가. */
  #mononav .gnb-has-sub { position:relative; }
  #mononav .gnb-sub { position:absolute; top:100%; left:0; z-index:130; min-width:150px; margin:0;
    padding:8px 0; background:#fff; border:1px solid #e5e5e5; box-shadow:0 6px 14px rgba(0,0,0,.08); text-align:left; }
  #mononav .gnb-has-sub:hover .gnb-sub { display:block; }
  #mononav .gnb-sub li { display:block; float:none; margin:0; }
  #mononav .gnb-sub a { display:block; padding:8px 20px; font-size:14px; font-weight:normal; color:#555; white-space:nowrap; }
  #mononav .gnb-sub a:hover { color:#c68b8b; background:#faf7f7; }
  /* GNB 전 메뉴 마우스오버 시 핑크(#c68b8b=원본 rgb198,139,139). base 는 청록 hover 라 원본과 달랐음.
   * 강아지/고양이뿐 아니라 브리더펫아미·분양혜택·용품할인·방문훈련·분양후기 모두 동일 적용. */
  #mononav .position > ul > li:hover > a { color:#c68b8b; }

  /* D: 스크롤로 헤더 고정될 때 좌측 로고 페이드/슬라이드 애니메이션. 원본 로고/헤더는 transition:1s 인데
   *    클론은 duration 없어(즉시) 애니가 빠졌다 → transition:all 1s 로 복원(opacity 0→1 + 위로 슬라이드). */
  #mononav header, #mononav header .logo { transition:all 1s ease; }

  /* E: 카테고리(강아지/고양이분양) 필터 링크 밑줄은 모바일 전용 — PC에선 제거.
   *    밑줄 소스 `.xans-product-menupackage > ul > li > a`(0,1,3) 보다 구체적인 아래 셀렉터(0,2,2)로
   *    !important 없이 무력화(overlay.css 최종 로드). 모바일은 원본대로 밑줄 유지. */
  .xans-product-menupackage .menuCategory > li > a { text-decoration:none; }
}

/* ==== 검수 요청(8/7) 분양후기 상세/목록 — 모두 no !important, 미디어쿼리+선택자 ==== */
/* ① PC 상세 테이블 상단선: overlay 의 border-top 방식 폐기 → 기존 style-26.css
 *    `.ec-base-table table:before`(1px #d7d5d5 라인)에 z-index:1 을 주어 노출(base 편집으로 처리). */

/* ② 지점안내(body.zz-location) PC 브레드크럼 상단 잘림 — 진짜 원인 정정(8/7-4).
 *    다른 PC 페이지 breadcrumb 은 전부 y47(margin-top:-12px, GNB 위)에서 선명한데 location 만
 *    잘렸다. 원인=location 이 로드하는 base CSS 세트가 #container{overflow:hidden} 이라
 *    breadcrumb 의 -12px 오버행(글자 상단)이 container 밖으로 나가 잘림(다른 페이지는 overflow:visible).
 *    → 위 body.zz-location #container 에 overflow:visible 추가로 근본 해결. breadcrumb 은 원위치(-12px)
 *    유지해 다른 페이지와 완전 동일한 y47 위치로 정합(margin-top:110px 이동안 폐기). */

/* ③ 모바일 상세: 이전/다음글 세로정렬. base(style-35) 는 li height:30px 고정 + strong 을
 *    left:-60px·width:40px 로 좌측 인덴트에 밀어넣어 라벨이 "이전글"→"이" 로 잘리고 제목과
 *    세로로 어긋났다 → li 를 flex 행(라벨+제목 수직 중앙)으로, strong 은 정위치 복원해 라벨
 *    전체 노출, 제목은 남은 폭에서 말줄임 1줄. 원본(라벨+제목 인라인)과 동일한 정렬.
 *    ④ 라벨의 화살표(^/∨) 배경도 태블릿/모바일에서 제거(검수요청). */
@media (max-width:1024px){
  .m-only .xans-board-movement li { display:flex; align-items:center; height:auto; min-height:42px; padding:8px 14px; }
  .m-only .xans-board-movement li strong { position:static; left:auto; float:none; width:54px; margin:0 8px 0 0; padding:0; height:auto; line-height:1.4; flex:0 0 auto; }
  .m-only .xans-board-movement li a { position:static; float:none; width:auto; height:auto; line-height:1.4; flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .xans-board-movement li strong,
  .xans-board-movement li.next strong { background:none; }
}

/* ⑥ 게시판 검색영역 p 의 삼각 불릿 배경 제거(검수요청). ⑤ "검색어" 라벨 :before 는 base css 에서 삭제. */
.xans-board-search p { background:none; }

/* ④ PC 목록: 검색어 찾기영역 정돈. base input 은 브라우저 기본(2px inset·높이19)이라 촌스럽고
 *    회색 찾기버튼(높이24)과 높이가 어긋났다 → input 을 1px 테두리 박스(높이30)로, 버튼도
 *    높이30 으로 맞추고 둘 다 vertical-align:middle 로 수평 정렬. */
@media (min-width:1025px){
  .pc-only .boardSearch .inputTypeText { height:30px; box-sizing:border-box; padding:0 10px; border:1px solid #ccc; font-size:13px; vertical-align:middle; }
  .pc-only .boardSearch .btnEmFix { height:30px; box-sizing:border-box; line-height:28px; padding:0 18px; vertical-align:middle; }
}

/* ==== 검수 요청(8/7-2) 모바일 검색헤더 ==== */
/* ⑧ 검색헤더 searchForm 돋보기 아이콘 복원 — 원본 bg_search.png 가 유실돼 base 규칙이 background:none.
 *    외부 CDN(//img.echosting…) 대신 사이트 규약대로 로컬 재호스팅본(/uploads/mig_site/img/ext/…)을 지정.
 *    base 의 no-repeat·7px 5px·background-size:20px 20px 는 유지되도록 이미지만 longhand 로 복원. */
.xans-layout-searchheader .searchForm { background-image:url(/uploads/mig_site/img/ext/img-echosting-cafe24-com/skin/mobile_ko_KR/layout/bg_search.png); background-repeat:no-repeat; background-position:7px 5px; }

/* ⑨ 모바일 검색폼 input 폭 100%. */
@media (max-width: 1024px) {
  .m-only .xans-search-form .searchbox input { width:100%; }
}