@charset "utf-8";
/* ==========================================================================
   pro5(몰프로 데모몰 DEMOMALL) 반응형 레이어      /data/pro5/css/site_v2.css
   2026-08-25 정희찬(PRO4)

   무엇을 —
     pro5 는 문서가 «min-width:1200px» 로 못박혀 있어 폰·태블릿에서 가로스크롤이
     났고, 폰으로 «/» 에 들어오면 아예 옛 모바일몰(/m)로 보내 버렸다.
     이 파일은 PC 한 벌을 «폰까지» 반응형으로 만든다.
       · ~1360 : 1200px 고정폭을 전부 유동으로 (가로스크롤 제거)
       · ~1200 : «폰/태블릿 전용 크롬»으로 교체 — 옛 헤더·탑메뉴를 숨기고
                 /data/pro5/js/site_v2.js 가 상단바·서랍·칩줄을 새로 그린다
                 (서브페이지는 endedit 식 «뒤로가기 + 페이지타이틀 + 아이콘» 바)
       ·  ~768 : 폰 — 진열 2열, 하단 5탭바(/common/inc/ee-bottomnav.js)
       ·  ~480 : 좁은 폰 보정

   ★어떻게 — 관리자 디자인템플릿(메인 디자인템플릿 · 서브페이지 상단관리 ·
     서브페이지 하단관리) HTML 은 «한 글자도» 고치지 않는다. 그 템플릿들은
     자기 <style> 을 본문 안에 달고 나오므로(= head 의 외부 CSS 보다 뒤)
     여기서는 «html body + !important» 로 특이도를 올려 이긴다.
     따라서 관리자에서 상단/하단/메인 내용을 바꿔도 이 반응형은 계속 유효하다.

   ★서브페이지가 같이 되는 이유 — pro5 의 «서브페이지 상단관리»는 메인과 같은
     .logoSearchWrap(로고·검색·마이메뉴·장바구니) + .gnbWrap#gnb(탑메뉴) 를,
     «서브페이지 하단관리»는 메인과 같은 .footer(카피라이트) 를 쓴다(실측).
     그래서 여기 한 벌이 메인과 서브에 동시에 걸린다. DB 를 고칠 필요가 없다.

   ★적용 범위 : pro5 «한 사이트만». /_include/header.asp 가
     /data/{shop}/css/site_v2.css 를 «파일이 있을 때만» 읽고,
     /main/main_header.asp 는 siteID="pro5" 일 때만 이 파일을 건다.
     다른 쇼핑몰(endedit · labelon · pro2 · pro3 · pro4 · rroys)에는 이 파일이 없다.

   되돌리기 : 이 파일 하나만 지우면 즉시 예전(고정폭) 상태로 돌아간다.
              폰 크롬만 끄려면 /data/pro5/js/site_v2.js 를 지운다.
   ========================================================================== */

/* ==========================================================================
   0. 공통 — 어떤 폭에서도 내용이 화면을 밀어내지 못하게
   ========================================================================== */
img, video, iframe, embed, object { max-width: 100%; }

/* 폰 크롬이 쓰는 색 — 관리자 「사이트 테마 색상1」(pro5 = #8B51B8)을 승계한다.
   레거시 스킨 head 가 --sitecolor1 을 내보낸다. 없으면 pro5 기본색. */
:root { --p5-accent: var(--sitecolor1, #8b51b8); }

/* ==========================================================================
   1. 1360px 이하 — 문서 고정폭 해제 (메인 · 서브 공통)
      «html body {min-width:1200px; overflow-x:auto}» 와
      «@media(max-width:1300px){.wrap_body{min-width:1200px}}» 가 본문 인라인
      <style> 에 박혀 있다 → html 을 앞에 붙이고 !important 로 이긴다.
   ========================================================================== */
@media (max-width: 1360px) {

	html, html body { min-width: 0 !important; overflow-x: hidden !important; }
	html body .wrap_body { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

	/* 서브페이지 상단관리(/_include/topmenu.asp)가 찍는 «빈 폭맞춤 표»(width=1200) —
	   내용이 없어 화면만 밀어낸다. 그냥 뺀다. */
	html body #basisBody { display: none !important; }

	/* min-width:1200px 로 못박힌 «띠» 들 */
	html body .logoSearchWrap,
	html body .gnbWrap,
	html body .visualWrap,
	html body .scroll_gnb,
	html body .scroll_gnb .logoSearchWrap { min-width: 0 !important; }

	/* ── 1200px 로 박힌 안쪽 박스들을 «유동 + 좌우 여백» 으로 ───────────────
	   메인 디자인템플릿 · 서브 상단/하단관리 · 공용 서브 골격을 한자리에서 푼다. */
	html body .top_banner_wrap .top_banner_box,
	html body .logoSearchWrap .logoSearch,
	html body .gnbWrap .gnbBox,
	html body .allMenuBox .submenu1_in,
	html body .nowPdWrap .nowPdBox,
	html body .cateListWrap .cateListBox,
	html body .chanceWrap .chanceBox,
	html body .MDbestWrap .MDbestBox,
	html body .midBannerWrap .midBannerBox,
	html body .pickBdWrap .pickBdBox,
	html body .eventBnWrap .eventBnBox,
	html body .tsWrap .tsCont,
	html body .noticeWrap .noticeBox,
	html body .footer .contAuto,
	html body .footer .footerlogos,
	html body .location .locationBox,
	html body .sub_contents,
	html body .sub_contents > .inner,
	html body .member_wrap.width,
	html body .content_category {
		width: 100% !important; min-width: 0 !important; max-width: 1340px !important;
		margin-left: auto !important; margin-right: auto !important;
		padding-left: 20px !important; padding-right: 20px !important;
		box-sizing: border-box !important;
	}

	/* 배너 아래 «글자 페이지네이션» — .swiper-pagination 이 1120px 로 못박혀 있어
	   폭이 줄면 마지막 칸이 오른쪽 화살표(40px×2) 밑으로 잘려 들어간다. */
	html body .visualWrap .pageWrap .swiper-pagination { width: calc(100% - 80px) !important; }

	/* 폭만 풀면 되는(여백은 자기가 가진) 것들 */
	html body .visualWrap .pageWrap,
	html body .PageWrapSize, html body .LeftWrapSize,
	html body .sub_contents.csWrap, html body .right_cont,
	html body .best_wrap .inner, html body .best_wrap .width_area,
	html body .gallery_list ul {
		width: 100% !important; min-width: 0 !important; max-width: 100% !important;
		box-sizing: border-box !important;
	}
	html body .best_wrap .category_area > ul { width: 100% !important; }

	/* 메인 비주얼 — 원래는 «li 높이 400px 고정 + img object-fit:cover» 라, 폭이 줄면
	   배너의 좌우가 잘려 나간다(1920x400 짜리를 390x400 으로 채우니 1/5만 보인다).
	   높이를 배너 «자기 비율» 에 맡겨 한 장이 통째로 보이게 한다. */
	html body .visualWrap .visual_img li { height: auto !important; }
	html body .visualWrap .visual_img img { height: auto !important; object-fit: contain !important; }
	/* 좌우 화살표는 «화면 중앙 ±695px»(= 1390px 레이아웃의 끝)에 붙어 있어 폭이
	   줄면 화면 밖으로 나간다. 좁아지면 화면 끝에서 멈추게 한다. */
	html body .visualWrap .prev { left: auto !important; right: auto !important; margin-left: 0 !important; }
	html body .visualWrap .next { left: auto !important; right: 0 !important; margin-right: 0 !important; }
	/* 배너 위 왼쪽 카테고리 오버레이(-600px 기준) — 폭이 좁아지면 왼쪽 끝에 붙인다 */
	html body .visualWrap .icon_tit_list { left: 0 !important; margin-left: 0 !important; }

	/* 표는 칸을 유지한 채 표 안에서만 가로로 넘긴다 */
	html body .sub_contents table, html body .right_cont table { max-width: 100% !important; }

	/* 고정 입력칸·셀렉트가 남는 자리를 넘지 않게 */
	html body .sub_contents input[type="text"], html body .sub_contents input[type="password"],
	html body .sub_contents input[type="tel"],  html body .sub_contents input[type="email"],
	html body .sub_contents select, html body .sub_contents textarea,
	html body .right_cont input[type="text"], html body .right_cont select, html body .right_cont textarea {
		max-width: 100% !important; box-sizing: border-box !important;
	}
}

/* ==========================================================================
   2. 1200px 이하 — 옛 PC 헤더·탑메뉴를 감추고 «폰 크롬» 으로 교체
      실측 : .logoSearch 의 내용물(로고 200 + 검색 450 + 마이/장바구니 380 +
      사이 여백)이 최소 1030px, 탑메뉴 .gnbBox ul 이 1170px 를 먹는다.
      그 아래로는 줄이 깨지므로 한 벌을 더 만들지 않고 전용 크롬으로 갈아탄다.
   ========================================================================== */
@media (max-width: 1200px) {

	/* 옛 헤더·탑메뉴(서브페이지 상단관리 템플릿) — 마크업은 남기고 «보이기만» 끈다.
	   폰 크롬 JS 가 이 안의 로고·탑메뉴·전체카테고리·로그인상태·장바구니수를 읽어 쓴다. */
	html body .logoSearchWrap,
	html body .gnbWrap,
	html body .scroll_gnb,
	html body .searchDimmed { display: none !important; }

	/* 서브페이지 «위치 표시»(홈 > 베스트) — 새 상단바가 페이지 제목을 이미 보여 준다.
	   endedit 모바일 서브페이지에도 이 줄은 없다. */
	html body .location { display: none !important; }

	/* 몰프로 영업 툴바(/toolbar/ToolbarMenu.asp) — 높이 27px 로 못박힌 iframe 이라
	   폰에서는 안쪽 글자가 3줄로 접히며 서로 겹쳐 읽히지 않는다(실측).
	   쇼핑몰 내용이 아니라 데모몰용 안내 띠다 — 폰/태블릿에서만 감춘다.
	   되돌리기 : 이 한 줄만 지우면 예전처럼 나온다(그때는 겹쳐 보이는 것도 그대로). */
	html body iframe.bodyTopFrame, html body iframe.top_iframe { display: none !important; }

	/* 본문 인라인 <style> 이 «@media(min-width:701px) and (max-width:1200px)» 로
	   .gnbBox 를 다시 1200px 로 못박는다 — 여기서 되돌린다(숨기지만 폭도 풀어 둔다) */
	html body .gnbWrap .gnbBox { width: 100% !important; }

	/* 오른쪽 플로팅(최근 본 상품)은 이미 1400px 이하에서 화면 밖으로 빠져 있다 —
	   혹시 남아 있어도 화면을 밀지 않게 못박는다 */
	html body .rightMenuWrap { right: auto !important; left: -9999px !important; }

	/* 상단 띠배너(회원가입 포인트 안내) — 새 상단바 아래로 자연스럽게 흐르게 */
	html body .top_banner_wrap { padding: 8px 0 !important; }
	html body .top_banner_wrap .top_banner_box p { font-size: 13px !important; line-height: 1.4 !important; padding-right: 26px !important; }

	/* 본문 좌우 여백 축소 */
	html body .sub_contents, html body .sub_contents > .inner {
		padding-left: 16px !important; padding-right: 16px !important;
	}

	/* 고객센터형 2단 레이아웃(좌측메뉴 + 우측본문) → 한 단으로 */
	html body .right_section { padding-left: 0 !important; min-height: 0 !important; }
	html body .LeftWrapSize, html body .cslnb_v2 { float: none !important; width: 100% !important; }
	html body .cslnb_v2 .lmenu { position: static !important; width: 100% !important; }

	/* 레거시 갤러리형 목록(기획전 등) — 한 줄 4칸은 좁은 화면에서 너무 잘다 */
	html body .gallery_list ul li { width: 33.3333% !important; }

	/* ── 메인 진열을 그리드로 ─────────────────────────────────────────────
	   원래는 flex + width:19%/32%/20% + margin-right:% 라서 칸수만 바꾸면
	   줄바꿈이 깨진다. 그리드로 바꾸고 li 의 폭·여백을 무효로 만든다. */
	html body .nowPdWrap .nowPdBox > ul,
	html body .chanceWrap .chanceBox > ul,
	html body .MDbestWrap .MDbestBox > ul,
	html body .pickBdWrap .pickBdBox > ul,
	html body .cateListWrap .cateListBox > ul,
	html body .eventBnWrap .eventBnBox > ul,
	html body .tsWrap .tsCont .wvybstSlider {
		display: grid !important; gap: 26px 16px !important;
		flex-wrap: wrap !important; justify-content: stretch !important;
		float: none !important; width: 100% !important; overflow: visible !important;
	}
	html body .nowPdWrap .nowPdBox > ul > li,
	html body .chanceWrap .chanceBox > ul > li,
	html body .MDbestWrap .MDbestBox > ul > li,
	html body .pickBdWrap .pickBdBox > ul > li,
	html body .cateListWrap .cateListBox > ul > li,
	html body .eventBnWrap .eventBnBox > ul > li,
	html body .tsWrap .tsCont .wvybstSlider > li {
		float: none !important; width: auto !important; min-width: 0 !important; margin: 0 !important;
	}

	html body .nowPdWrap .nowPdBox > ul,
	html body .chanceWrap .chanceBox > ul,
	html body .tsWrap .tsCont .wvybstSlider { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	html body .MDbestWrap .MDbestBox > ul { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	html body .pickBdWrap .pickBdBox > ul { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	html body .cateListWrap .cateListBox > ul { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 16px 8px !important; }
	html body .eventBnWrap .eventBnBox > ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

	/* 인기메뉴 아이콘 — 80px 고정이라 칸보다 커지면 넘친다 */
	html body .cateListWrap .cateListBox > ul > li img { width: 100% !important; max-width: 80px !important; height: auto !important; }

	/* 섹션 제목 */
	html body .nowPdWrap .nowPdBox h1, html body .chanceWrap .chanceBox h1,
	html body .MDbestWrap .MDbestBox h1, html body .pickBdWrap .pickBdBox h1,
	html body .cateListWrap .cateListBox h1, html body .eventBnWrap .eventBnBox h1,
	html body .noticeWrap .noticeBox h1 { font-size: 21px !important; }
	html body .tsWrap .tsCont .titleSec h2 { font-size: 21px !important; }

	/* 섹션 사이 여백 */
	html body .nowPdWrap, html body .chanceWrap, html body .MDbestWrap,
	html body .pickBdWrap, html body .eventBnWrap, html body .midBannerWrap { margin: 36px 0 !important; }
	html body .tsWrap { margin-top: 40px !important; }

	/* ── 서브페이지 «카피라이트» 숨김 ────────────────────────────────────
	   「모바일 반응형 서브페이지에서는 카피라이트 안 나오게」 요청.
	   여기서 «카피라이트» 는 © 한 줄이 아니라 하단 푸터 영역 전체를 말한다 —
	   하단링크(회사소개·이용약관…) · 회사정보 · 사업자정보 · 고객센터 · 결제로고.
	   ★서브페이지만 — .p5-subfoot 은 /_include/copyright.asp(= 서브페이지
	     하단관리 렌더러)가 pro5 에서만 찍는 표식이다. 메인 푸터는 메인
	     디자인템플릿이 그리므로 이 클래스가 없다 → 메인에는 그대로 나온다.
	   ★PC(1201px 이상)에는 서브페이지에도 그대로 나온다 — 사업자등록번호·
	     통신판매업 신고번호는 전자상거래법상 표시의무가 있어 사이트에서 없애지 않는다.
	   ★마크업은 지우지 않는다(display:none) — 이 두 줄만 지우면 즉시 복구된다. */
	html body .p5-subfoot .footer,
	html body .p5-subfoot #footer { display: none !important; }

	/* 하단관리(카피라이트) 2단 구성 → 한 단 (메인 · PC 서브 공통) */
	html body .footer .contAuto .footCopyright,
	html body .footer .contAuto .footCopyright2,
	html body .footer .contAuto .footCsInfo {
		float: none !important; width: 100% !important; min-width: 0 !important;
		white-space: normal !important;
	}
	html body .footer .contAuto .footCsInfo { margin-top: 24px !important; }
	html body .footer .contAuto .footCopyright2 { margin-top: 24px !important; }
	html body .footer .links .contAuto { display: flex !important; flex-wrap: wrap !important; row-gap: 2px; line-height: 34px !important; }
	html body .footer .links a { padding: 0 14px !important; }
	html body .footer .links a:first-child { padding-left: 0 !important; }
	html body .footer .footerlogos img { max-width: 100% !important; height: auto !important; }
}

/* ==========================================================================
   3. 1024px 이하 — 태블릿
   ========================================================================== */
@media (max-width: 1024px) {
	html body .nowPdWrap .nowPdBox > ul,
	html body .chanceWrap .chanceBox > ul,
	html body .tsWrap .tsCont .wvybstSlider { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	html body .MDbestWrap .MDbestBox > ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html body .pickBdWrap .pickBdBox > ul { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	html body .cateListWrap .cateListBox > ul { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

	html body .MDbestWrap .title { font-size: 17px !important; }
	html body .MDbestWrap .priBox, html body .MDbestWrap .priBox .per { font-size: 20px !important; }
	html body .MDbestWrap .marktP { font-size: 15px !important; }
	html body .MDbestWrap .reveiwInfo { font-size: 14px !important; }
}

/* ==========================================================================
   4. 768px 이하 — 폰
   ========================================================================== */
@media (max-width: 768px) {

	html body .top_banner_wrap .top_banner_box,
	html body .nowPdWrap .nowPdBox, html body .cateListWrap .cateListBox,
	html body .chanceWrap .chanceBox, html body .MDbestWrap .MDbestBox,
	html body .midBannerWrap .midBannerBox, html body .pickBdWrap .pickBdBox,
	html body .eventBnWrap .eventBnBox, html body .tsWrap .tsCont,
	html body .noticeWrap .noticeBox, html body .footer .contAuto,
	html body .footer .footerlogos,
	html body .sub_contents, html body .sub_contents > .inner {
		padding-left: 14px !important; padding-right: 14px !important;
	}

	/* 진열 2열 */
	html body .nowPdWrap .nowPdBox > ul,
	html body .chanceWrap .chanceBox > ul,
	html body .MDbestWrap .MDbestBox > ul,
	html body .pickBdWrap .pickBdBox > ul,
	html body .tsWrap .tsCont .wvybstSlider { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 12px !important; }
	html body .cateListWrap .cateListBox > ul { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	html body .eventBnWrap .eventBnBox > ul { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
	html body .gallery_list ul li { width: 50% !important; }

	/* 글자 크기 — 1200px 기준으로 잡힌 값들을 폰 크기로 */
	html body .nowPdWrap .nowPdBox h1, html body .chanceWrap .chanceBox h1,
	html body .MDbestWrap .MDbestBox h1, html body .pickBdWrap .pickBdBox h1,
	html body .cateListWrap .cateListBox h1, html body .eventBnWrap .eventBnBox h1,
	html body .noticeWrap .noticeBox h1 { font-size: 18px !important; margin-bottom: 12px !important; }
	html body .tsWrap .tsCont .titleSec h2 { font-size: 18px !important; margin-bottom: 12px !important; }
	html body .nowPdWrap .nowPdBox h1 a, html body .chanceWrap .chanceBox h1 a,
	html body .MDbestWrap .MDbestBox h1 a, html body .pickBdWrap .pickBdBox h1 a { font-size: 13px !important; margin-top: 4px !important; }

	html body .nowPdWrap .title, html body .chanceWrap .title,
	html body .MDbestWrap .title { font-size: 14px !important; margin: 5px 0 !important; }
	html body .nowPdWrap .priBox, html body .nowPdWrap .priBox .per,
	html body .chanceWrap .priBox, html body .chanceWrap .priBox .per,
	html body .MDbestWrap .priBox, html body .MDbestWrap .priBox .per { font-size: 17px !important; }
	html body .nowPdWrap .marktP, html body .chanceWrap .marktP,
	html body .MDbestWrap .marktP { font-size: 13px !important; margin-left: 6px !important; }
	html body .nowPdWrap .priBox .price .mwon, html body .chanceWrap .priBox .price .mwon,
	html body .MDbestWrap .priBox .price .mwon,
	html body .nowPdWrap .priBox .per .pct .m_per, html body .chanceWrap .priBox .per .pct .m_per,
	html body .MDbestWrap .priBox .per .pct .m_per { font-size: 13px !important; }
	html body .nowPdWrap .reveiwInfo, html body .chanceWrap .reveiwInfo,
	html body .MDbestWrap .reveiwInfo { font-size: 12px !important; }
	html body .nowPdWrap .reveiwInfo .revCnt, html body .chanceWrap .reveiwInfo .revCnt,
	html body .MDbestWrap .reveiwInfo .revCnt { margin-left: 10px !important; }
	html body .nowPdWrap .nowPdBox > ul > li .pdNum { width: 28px !important; height: 28px !important; line-height: 28px !important; font-size: 12px !important; }

	html body .tsWrap .tsCont .wvybstSlider li .tit { font-size: 13px !important; }
	html body .tsWrap .tsCont .wvybstSlider li .prc { font-size: 16px !important; min-height: 0 !important; }
	html body .tsWrap .tsCont .wvybstSlider li .prc .prc_wrap em { font-size: 16px !important; }
	html body .tsWrap .tsCont .wvybstSlider li .prc .marketprc,
	html body .tsWrap .tsCont .wvybstSlider li .prc .prc_wrap { font-size: 13px !important; }
	html body .tsWrap .tsCont .wvybstSlider li .per, html body .tsWrap .tsCont .wvybstSlider li .per em { font-size: 15px !important; }

	html body .cateListWrap .cateListBox > ul > li img { max-width: 58px !important; }
	html body .cateListWrap .cateListBox > ul > li p { font-size: 12px !important; }

	/* 메인 비주얼 — 폰에서는 10칸짜리 글자 페이지네이션이 못 읽힌다. 배너는 밀어서 넘긴다. */
	html body .visualWrap .pageWrap { display: none !important; }
	html body .visualWrap .prev, html body .visualWrap .next { display: none !important; }
	html body .visualWrap.on { padding-top: 0 !important; }

	/* 공지 목록 */
	html body .noticeWrap .noticeBox { padding: 24px 0 !important; }
	html body .noticeWrap .noticeBox .noticeList a { font-size: 13px !important; margin-right: 10px !important; }

	/* 하단관리(카피라이트) — 메인·PC서브 공통 */
	html body .footer .links { line-height: 1.6 !important; padding: 12px 0 !important; }
	html body .footer .links a { font-size: 12px !important; padding: 0 10px !important; }
	html body .footer .adrCopyright { padding: 20px 0 !important; }
	html body .footer .adrCopyright p, html body .footer .contAuto .footCopyright,
	html body .footer .contAuto .footCopyright2 { font-size: 12px !important; line-height: 20px !important; word-break: keep-all !important; }
	html body .footer .footCsInfo h2 { font-size: 15px !important; }
	html body .footer .footerlogos { margin-top: 20px !important; padding-top: 14px !important; }

	/* 1:1 채팅 상담 버튼 — 하단 5탭바(62px) 위로 올린다 */
	html body #rightFloating.aside { right: 10px !important; bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; z-index: 8990 !important; }
	html body .aside .aside_menu .chatBtn { padding: 10px 52px 10px 16px !important; font-size: 13px !important; }
	html body .aside .aside_menu .chatBtn .imgBox { width: 42px !important; height: 42px !important; background-size: 22px auto !important; }
}

/* ==========================================================================
   5. 480px 이하 — 좁은 폰
   ========================================================================== */
@media (max-width: 480px) {
	html body .cateListWrap .cateListBox > ul { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px 6px !important; }
	html body .cateListWrap .cateListBox > ul > li img { max-width: 48px !important; }
	html body .footer .links a { padding: 0 8px !important; }
	html body .tsWrap .tsCont .wvybstSlider,
	html body .nowPdWrap .nowPdBox > ul, html body .chanceWrap .chanceBox > ul,
	html body .MDbestWrap .MDbestBox > ul, html body .pickBdWrap .pickBdBox > ul { gap: 22px 10px !important; }
}

/* ==========================================================================
   6. 폰 크롬(#p5mo) — /data/pro5/js/site_v2.js 가 그리는 요소들의 옷
      ★1201px 이상에서는 아예 감춘다(PC 화면은 예전 그대로).
   ========================================================================== */
#p5mo, #p5mo-dim, #p5mo-drawer { display: none; }

@media (max-width: 1200px) {

	#p5mo {
		display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 9500;
		background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
		font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;
	}

	.p5mo-bar { height: 56px; display: flex; align-items: center; gap: 2px; padding: 0 4px; box-sizing: border-box; }
	.p5mo-ico {
		flex: none; width: 44px; height: 44px; display: grid; place-items: center;
		border: 0; padding: 0; background: transparent; cursor: pointer;
		color: #222; -webkit-tap-highlight-color: transparent; position: relative; text-decoration: none;
	}
	.p5mo-ico:hover, .p5mo-ico:active { color: var(--p5-accent); }
	.p5mo-logo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding-left: 2px; }
	.p5mo-logo img { max-height: 28px; width: auto; max-width: 180px; display: block; }
	.p5mo-logo .p5mo-logo-txt { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #222; text-decoration: none; }
	.p5mo-badge {
		position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px;
		box-sizing: border-box; border-radius: 999px; background: var(--p5-accent); color: #fff;
		font-size: 10px; line-height: 16px; font-weight: 700; text-align: center;
	}
	.p5mo-badge[hidden] { display: none; }

	/* ── 서브페이지 바 : [뒤로가기][페이지 제목][검색][장바구니] ──────────────
	   endedit(/product/list.asp?type=best) 와 같은 구성. 제목은 화면 가운데.
	   마이페이지·고객센터·장바구니·회원 화면은 «아이콘 없이» 제목만 낸다
	   (endedit 의 mobileBack.bare 와 같은 규칙). */
	.p5mo-bar.is-sub { padding: 0 6px; }
	.p5mo-back { flex: none; }
	.p5mo-title {
		flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 4px;
		font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: #171719;
		text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.p5mo-right { flex: none; display: flex; align-items: center; }
	/* 아이콘이 없는(bare) 화면에서도 제목이 «정확히 가운데» 오도록 왼쪽 버튼만큼 자리를 비운다 */
	.p5mo-right.is-bare { width: 44px; }

	/* 탑메뉴(상단관리의 .gnbBox)를 그대로 옮겨 담은 칩줄 — «메인에서만» 그린다.
	   서브페이지에서는 요청대로 탑메뉴를 내지 않는다(제목 바 하나로 끝). */
	.p5mo-chips {
		display: flex; align-items: center; gap: 18px; height: 44px;
		padding: 0 14px; box-sizing: border-box;
		overflow-x: auto; overflow-y: hidden; white-space: nowrap;
		box-shadow: inset 0 -1px 0 #eef0f2;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.p5mo-chips::-webkit-scrollbar { height: 0; }
	.p5mo-chips a { flex: none; font-size: 15px; line-height: 44px; font-weight: 500; color: #4e5968; text-decoration: none; }
	.p5mo-chips a.is-accent { color: var(--p5-accent); font-weight: 700; }

	/* 검색 시트 */
	.p5mo-search { display: none; padding: 8px 12px 12px; box-shadow: inset 0 -1px 0 #eef0f2; }
	.p5mo-search.is-open { display: block; }
	.p5mo-search form { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px; box-sizing: border-box; border-radius: 999px; background: #f7f8f9; box-shadow: inset 0 0 0 1px #e5e8eb; }
	.p5mo-search input { flex: 1 1 auto; min-width: 0; height: 42px; border: 0; outline: none; background: transparent; font-size: 15px; color: #222; }
	.p5mo-search button { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--p5-accent); color: #fff; display: grid; place-items: center; cursor: pointer; }

	/* 왼쪽 서랍 — 하단탭바 「카테고리」와 메인 상단바 ☰ 가 연다 */
	#p5mo-dim { display: block; position: fixed; inset: 0; z-index: 9550; background: rgba(0, 0, 0, .42); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
	#p5mo-dim.is-open { opacity: 1; pointer-events: auto; }
	#p5mo-drawer {
		display: flex; flex-direction: column;
		position: fixed; top: 0; bottom: 0; left: 0; z-index: 9600;
		width: min(320px, 86vw); background: #fff;
		transform: translateX(-101%); transition: transform .26s cubic-bezier(.16, 1, .3, 1);
		box-shadow: 0 0 40px rgba(0, 0, 0, .18);
		font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;
	}
	#p5mo-drawer.is-open { transform: none; }
	html.p5mo-lock, html.p5mo-lock body { overflow: hidden !important; }

	.p5mo-dw-top { flex: none; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 16px; box-shadow: inset 0 -1px 0 #eef0f2; }
	.p5mo-dw-top strong { font-size: 16px; font-weight: 700; color: #222; }
	.p5mo-dw-auth { flex: none; display: flex; gap: 8px; padding: 12px 16px; }
	.p5mo-dw-auth a { flex: 1 1 0; height: 40px; line-height: 40px; text-align: center; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; box-sizing: border-box; }
	.p5mo-dw-auth a.is-primary { background: var(--p5-accent); color: #fff; }
	.p5mo-dw-auth a.is-ghost { background: #f2f4f6; color: #333d4b; }
	.p5mo-dw-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; }
	.p5mo-dw-h { padding: 14px 16px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #8b95a1; }
	.p5mo-cate > li { border-bottom: 1px solid #f2f4f6; }
	.p5mo-cate .p5mo-row { display: flex; align-items: center; }
	.p5mo-cate .p5mo-row > a { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 12px 8px 12px 16px; font-size: 15px; font-weight: 600; color: #222; text-decoration: none; }
	.p5mo-cate .p5mo-row > a img { width: 24px; height: 24px; object-fit: contain; flex: none; }
	.p5mo-cate .p5mo-tg { flex: none; width: 46px; height: 46px; border: 0; background: transparent; display: grid; place-items: center; color: #8b95a1; cursor: pointer; }
	.p5mo-cate .p5mo-tg svg { transition: transform .18s ease; }
	.p5mo-cate .is-open .p5mo-tg svg { transform: rotate(180deg); }
	.p5mo-cate .p5mo-sub { display: none; padding: 2px 0 10px; background: #fafbfc; }
	.p5mo-cate .is-open .p5mo-sub { display: block; }
	.p5mo-cate .p5mo-sub a { display: block; padding: 9px 16px 9px 28px; font-size: 14px; color: #4e5968; text-decoration: none; }
	.p5mo-links a { display: block; padding: 12px 16px; font-size: 15px; color: #333d4b; text-decoration: none; border-bottom: 1px solid #f2f4f6; }
	.p5mo-links a.is-accent { color: var(--p5-accent); font-weight: 600; }

	/* 서브페이지에는 ☰ 가 «보이지 않는다» — 하단탭바 「카테고리」가 대신 누른다 */
	.p5mo-burger-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; }
}

/* 하단 5탭바(/common/inc/ee-bottomnav.js)는 768px 이하에서만 그려진다 —
   켜진 탭 색만 pro5 사이트색으로 맞춘다. */
@media (max-width: 768px) {
	.ee-bn-i.is-on, .ee-bn-i.is-on:hover, .ee-bn-i.is-on:active { color: var(--p5-accent) !important; }
}