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

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

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

   ★서브페이지가 같이 되는 이유 — pro2 의 «서브페이지 상단관리»는 메인과 같은
     .logoSearchWrap#headers(로고·검색·탑메뉴·마이메뉴·전체카테고리) 를,
     «서브페이지 하단관리»는 메인과 같은 .footer#footer(카피라이트) 를 쓴다.
     그래서 여기 한 벌이 메인과 서브에 동시에 걸린다.

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

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

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

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

/* ==========================================================================
   1. 1360px 이하 — 문서 고정폭 해제 (메인 · 서브 공통)
      «html body {min-width:1300px}» 와 «.wrap_body {min-width:1300px}» 가
      본문 인라인 <style> 에 박혀 있다 → html 을 앞에 붙여 이긴다.
   ========================================================================== */
@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; }

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

	/* ── 1300px 로 박힌 박스들을 «유동 + 좌우 여백» 으로 ──────────────
	   메인 디자인템플릿 · 서브 상단/하단관리 · 공용 서브 골격을 한자리에서 푼다. */
	html body .logoSearchWrap .logoSearch,
	html body .allCateWrap .allCateBox,
	html body .timeSaleWrap .timeSaleBox,
	html body .weekPdWrap .weekPdBox,
	html body .startPdWrap .startPdBox,
	html body .eventImgWrap .eventImgBox,
	html body .mdRecomWrap .mdRecomBox,
	html body .addPdWrap .addPdBox,
	html body .brandStoryWrap .brandStoryBox,
	html body .bestReviewWrap .bestReviewBox,
	html body .snsListWrap .snsListBox,
	html body .notiCsWrap .notiCsBox,
	html body .footer .copyrightMenu,
	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;
	}
	/* .bestReviewBox 는 원래 위아래 패딩 55px 을 갖고 있었다 — 살려 둔다 */
	html body .bestReviewWrap .bestReviewBox { padding-top: 55px !important; padding-bottom: 55px !important; }

	/* 폭만 풀면 되는(여백은 자기가 가진) 것들 */
	html body .main_visual_wrap,
	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, html body .contAuto {
		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; }

	/* 메인 비주얼의 조작버튼들은 «화면 중앙 + 650/595/540px»(= 1300px 레이아웃의 끝)에
	   붙어 있어 폭이 줄면 화면 밖으로 나간다. 넓은 화면에서는 원래 자리를 그대로 두고,
	   좁아지면 오른쪽 끝에서 멈추게 한다. */
	html body .main_visual_wrap .bannerMoreBtn { right: max(16px, calc(50% - 650px)) !important; margin-right: 0 !important; }
	html body .main_visual_wrap .swiper_btn    { right: max(71px, calc(50% - 595px)) !important; margin-right: 0 !important; }
	html body .main_visual_wrap .bottom_btn    { right: max(126px, calc(50% - 540px)) !important; margin-right: 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;
	}

	/* BEST 상품 알림 팝업(355px 고정) — 좁은 화면에서 화면 밖으로 나가지 않게 */
	html body .bestPopWrap { width: min(355px, 92vw) !important; }
}

/* ==========================================================================
   2. 1200px 이하 — 옛 PC 헤더를 감추고 «폰 크롬» 으로 교체
      실측 : .logoSearch 의 내용물(전체메뉴 46 + 로고 159 + 검색 210 +
      탑메뉴 511 + 마이메뉴 143 + 사이 여백)이 최소 1152px 을 먹는다.
      그 아래로는 줄이 깨지므로 한 벌을 더 만들지 않고 전용 크롬으로 갈아탄다.
   ========================================================================== */
@media (max-width: 1200px) {

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

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

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

	/* 고객센터형 2단 레이아웃(좌측메뉴 250px + 우측본문) → 한 단으로 */
	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; }

	/* 상품후기 목록(/board/best_list.asp) — 카드 그리드가 4열로 박혀 있다.
	   그 CSS 는 «본문 안 인라인 <style>» 이라 html body + !important 로 이긴다. */
	html body .rvw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

	/* 진열 목록을 그리드로 — 원래 float+% 라 칸수를 바꾸면 줄바꿈이 깨진다 */
	html body .timeSaleWrap .timeSaleList ul,
	html body .weekPdWrap .weekPdList ul,
	html body .startPdWrap .startList ul,
	html body .addPdWrap .addPdList,
	html body .bestReviewWrap .bestReviewList ul,
	html body .snsListWrap .snsListInner ul,
	html body .notiCsWrap .csMenuList ul {
		display: grid !important; gap: 20px 18px; float: none !important; width: 100% !important;
	}
	html body .timeSaleWrap .timeSaleList ul > li,
	html body .weekPdWrap .weekPdList ul > li,
	html body .startPdWrap .startList ul > li,
	html body .addPdWrap .addPdList > li,
	html body .bestReviewWrap .bestReviewList ul > li,
	html body .snsListWrap .snsListInner ul > li,
	html body .notiCsWrap .csMenuList ul > li {
		float: none !important; width: auto !important; margin: 0 !important;
	}
	html body .timeSaleWrap .timeSaleList ul,
	html body .startPdWrap .startList ul,
	html body .addPdWrap .addPdList,
	html body .bestReviewWrap .bestReviewList ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	html body .weekPdWrap .weekPdList ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	html body .snsListWrap .snsListInner ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
	html body .notiCsWrap .csMenuList ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

	/* 2단 섹션 → 한 단 */
	html body .bestReviewWrap .bestReviewBox .titleBox,
	html body .bestReviewWrap .bestReviewBox .bestReviewList,
	html body .notiCsWrap .noticeBox, html body .notiCsWrap .csMenuBox,
	html body .brandStoryWrap .videoInner, html body .brandStoryWrap .brandInner,
	html body .footer .footInfoWrap, html body .footer .logoImg {
		float: none !important; width: 100% !important; margin-right: 0 !important;
	}
	html body .bestReviewWrap .bestReviewBox .titleBox { margin-bottom: 24px !important; }
	html body .notiCsWrap .csMenuBox { margin-top: 40px !important; }
	html body .brandStoryWrap .brandInner { margin-top: 24px !important; }

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

	/* 서브페이지 하단관리(카피라이트) — 로고를 아래로 내리고 줄이 넘치지 않게 */
	html body .footer .logoImg { max-width: 148px !important; margin-top: 24px !important; }
	html body .footer .footInfoWrap .footLinkMenu { display: flex !important; flex-wrap: wrap !important; }
	html body .footer .footInfoWrap .footLinkMenu li { float: none !important; }
	html body .footer .footInfoWrap .footAddrBox { word-break: keep-all !important; }
}

/* ==========================================================================
   3. 1024px 이하 — 태블릿
   ========================================================================== */
@media (max-width: 1024px) {
	html body .mainTitWrap { font-size: 26px !important; }
	html body .mainTitWrap .sideTxt { display: block; margin-left: 0 !important; margin-top: 6px; font-size: 15px !important; }
	html body .mainTitWrap .moreBtn { font-size: 15px !important; }

	html body .weekPdWrap .weekPdList ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	html body .addPdWrap .addPdList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html body .bestReviewWrap .titleBox .tit { font-size: 26px !important; }

	html body .timeSaleWrap, html body .weekPdWrap, html body .startPdWrap,
	html body .addPdWrap, html body .brandStoryWrap, html body .bestReviewWrap,
	html body .snsListWrap, html body .notiCsWrap, html body .mdRecomWrap,
	html body .newPdWrap, html body .eventImgWrap { margin: 40px 0 !important; }
}

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

	html body .logoSearchWrap .logoSearch,
	html body .timeSaleWrap .timeSaleBox, html body .weekPdWrap .weekPdBox,
	html body .startPdWrap .startPdBox, html body .eventImgWrap .eventImgBox,
	html body .mdRecomWrap .mdRecomBox, html body .addPdWrap .addPdBox,
	html body .brandStoryWrap .brandStoryBox, html body .bestReviewWrap .bestReviewBox,
	html body .snsListWrap .snsListBox, html body .notiCsWrap .notiCsBox,
	html body .footer .copyrightMenu, html body .location .locationBox,
	html body .sub_contents, html body .sub_contents > .inner {
		padding-left: 14px !important; padding-right: 14px !important;
	}

	/* 진열 2열 */
	html body .timeSaleWrap .timeSaleList ul,
	html body .weekPdWrap .weekPdList ul,
	html body .startPdWrap .startList ul,
	html body .bestReviewWrap .bestReviewList ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
	html body .addPdWrap .addPdList { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	html body .snsListWrap .snsListInner ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	html body .notiCsWrap .csMenuList ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	html body .notiCsWrap .csMenuList ul li { padding: 16px 6px !important; }
	html body .notiCsWrap .csMenuList ul li .menuIcon { width: 100% !important; height: 42px !important; background-size: auto 38px !important; }
	html body .notiCsWrap .csMenuList .tit { font-size: 13px !important; margin-top: 8px !important; }

	html body .gallery_list ul li { width: 50% !important; }
	html body .rvw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 12px !important; }

	/* 이달의 이벤트 — 3장 가로배치를 한 장씩 */
	html body .eventImgWrap .imgInner ul { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 12px; }
	html body .eventImgWrap .imgInner ul li,
	html body .eventImgWrap .imgInner ul li.midBox { width: auto !important; margin-right: 0 !important; }

	/* 글자 크기 — 1300px 기준으로 잡힌 값들을 폰 크기로 */
	html body .mainTitWrap { font-size: 20px !important; margin-bottom: 14px !important; }
	html body .mainTitWrap .sideTxt { font-size: 13px !important; }
	html body .mainTitWrap .moreBtn { font-size: 13px !important; }
	html body .timeSaleWrap .timeSaleList .pdTxtBox .title,
	html body .weekPdWrap .weekPdList .pdTxtBox .title,
	html body .startPdWrap .startList .pdTxtBox .title,
	html body .newPdWrap .newPdList .pdTxtBox .title,
	html body .mdRecomWrap .mdRecomList .pdTxtBox .title { font-size: 14px !important; min-height: 0 !important; margin-bottom: 6px !important; }
	html body .timeSaleWrap .timeSaleList .pdTxtBox .priBox,
	html body .weekPdWrap .weekPdList .pdTxtBox .priBox,
	html body .startPdWrap .startList .pdTxtBox .priBox,
	html body .newPdWrap .newPdList .pdTxtBox .priBox,
	html body .mdRecomWrap .mdRecomList .pdTxtBox .priBox { font-size: 17px !important; }
	html body .timeSaleWrap .timeSaleList .pdTxtBox .priBox .mkprc,
	html body .weekPdWrap .weekPdList .pdTxtBox .priBox .mkprc,
	html body .startPdWrap .startList .pdTxtBox .priBox .mkprc,
	html body .newPdWrap .newPdList .pdTxtBox .priBox .mkprc,
	html body .mdRecomWrap .mdRecomList .pdTxtBox .priBox .mkprc { font-size: 13px !important; margin-left: 4px !important; }
	html body .timeSaleWrap .timeSaleList .pdTxtBox .priBox .m_per,
	html body .weekPdWrap .weekPdList .pdTxtBox .priBox .m_per,
	html body .startPdWrap .startList .pdTxtBox .priBox .m_per,
	html body .newPdWrap .newPdList .pdTxtBox .priBox .m_per,
	html body .mdRecomWrap .mdRecomList .pdTxtBox .priBox .m_per,
	html body .timeSaleWrap .timeSaleList .pdTxtBox .priBox .mwon,
	html body .weekPdWrap .weekPdList .pdTxtBox .priBox .mwon,
	html body .startPdWrap .startList .pdTxtBox .priBox .mwon,
	html body .newPdWrap .newPdList .pdTxtBox .priBox .mwon,
	html body .mdRecomWrap .mdRecomList .pdTxtBox .priBox .mwon { font-size: 12px !important; }
	html body .timeSaleWrap .reviewStarBox, html body .weekPdWrap .reviewStarBox,
	html body .startPdWrap .reviewStarBox, html body .newPdWrap .reviewStarBox,
	html body .mdRecomWrap .reviewStarBox, html body .addPdWrap .reviewStarBox { font-size: 12px !important; }
	html body .timeSaleWrap .timeSaleList .pdTxtBox,
	html body .weekPdWrap .weekPdList .pdTxtBox,
	html body .startPdWrap .startList .pdTxtBox,
	html body .mdRecomWrap .mdRecomList .pdTxtBox { margin-top: 10px !important; }
	html body .timeSaleWrap .timeSaleList .pdImg,
	html body .weekPdWrap .weekPdList .pdImg,
	html body .startPdWrap .startList .pdImg,
	html body .newPdWrap .newPdList .pdImg,
	html body .mdRecomWrap .mdRecomList .pdImg { border-radius: 12px !important; }

	/* 함께 사면 좋은 상품(.addPdWrap) — 한 줄에 한 칸이라 글자가 커서 값이 잘렸다.
	   장바구니 버튼(absolute)이 겹치지 않게 오른쪽 자리도 비워 준다. */
	html body .addPdWrap .addPdList li .addPdInner { margin-top: 18px !important; }
	html body .addPdWrap .addPdList li .addPdInner .pdImg { width: 22% !important; margin-right: 4% !important; }
	html body .addPdWrap .addPdList li .pdTxtBox { width: 74% !important; padding-right: 52px !important; box-sizing: border-box !important; }
	html body .addPdWrap .addPdList li .pdTxtBox .tit { height: auto !important; font-size: 14px !important; }
	html body .addPdWrap .addPdList li .pdTxtBox .priBox { font-size: 16px !important; }
	html body .addPdWrap .addPdList li .pdTxtBox .priBox .mkprc { font-size: 12px !important; margin-left: 4px !important; }
	html body .addPdWrap .addPdList li .pdTxtBox .priBox .m_per,
	html body .addPdWrap .addPdList li .pdTxtBox .priBox .mwon { font-size: 12px !important; }
	html body .addPdWrap .addPdList .cartBtn { width: 40px !important; height: 40px !important; bottom: 0 !important; background-size: 18px !important; }

	/* 타임세일 D-day 뱃지 */
	html body .timeSaleWrap .dDayTxt { top: 8px !important; left: 8px !important; }
	html body .timeSaleWrap .dDayTxt .time { height: 30px !important; line-height: 32px !important; padding: 0 10px 0 36px !important; font-size: 12px !important; }
	html body .timeSaleWrap .dDayTxt .timeIcon { width: 32px !important; height: 32px !important; line-height: 30px !important; background-size: 16px auto !important; }

	/* 상품평 섹션 */
	html body .bestReviewWrap .titleBox .tit { font-size: 20px !important; margin-bottom: 12px !important; }
	html body .bestReviewWrap .titleBox .moreBtn { font-size: 13px !important; }
	html body .bestReviewWrap .bestReviewList ul li .starsCnt { margin-top: 12px !important; }
	html body .bestReviewWrap .bestReviewList ul li .starsCnt .appraisalstar .iconfont { width: 15px !important; height: 15px !important; }
	html body .bestReviewWrap .bestReviewList ul li .starsCnt .reviewCntTxt { margin-left: 6px !important; font-size: 13px !important; }
	html body .bestReviewWrap .bestReviewList ul li .contTxt { margin-top: 6px !important; font-size: 13px !important; }

	/* 공지 목록 */
	html body .notiCsWrap .noticeList li { padding: 12px 0 !important; font-size: 14px !important; }
	html body .notiCsWrap .noticeList li .gubunTxt { width: 20% !important; }
	html body .notiCsWrap .noticeList li .notiTit { width: 80% !important; }
	html body .notiCsWrap .noticeList li .date { display: none !important; }

	/* 메인 비주얼 조작버튼 — 폰에서는 재생/정지를 빼고 크기를 줄인다 */
	html body .main_visual_wrap .swiper_btn { display: none !important; }
	html body .main_visual_wrap .bannerMoreBtn { right: 12px !important; bottom: 12px !important; width: 34px !important; height: 34px !important; line-height: 32px !important; }
	html body .main_visual_wrap .bottom_btn { right: 54px !important; bottom: 12px !important; height: 34px !important; line-height: 34px !important; padding: 0 14px !important; }
	html body .main_visual_wrap .bottom_btn .swiper-pagination-fraction .swiper-pagination-current,
	html body .main_visual_wrap .bottom_btn .swiper-pagination-fraction .swiper-pagination-total { font-size: 13px !important; padding: 0 7px !important; }
	html body .main_visual_wrap .swiper-button-prev, html body .main_visual_wrap .swiper-button-next { display: none !important; }

	/* 전체 배너 팝업 */
	html body .bn_wrapper_allmenu .bn_pop { padding: 60px 14px !important; }

	/* 서브페이지 하단관리(카피라이트) */
	html body .footer { padding: 24px 0 !important; }
	html body .footer .footInfoWrap .footLinkMenu { margin-bottom: 14px !important; row-gap: 6px; }
	html body .footer .footInfoWrap .footLinkMenu li a { padding: 0 10px !important; font-size: 13px !important; }
	html body .footer .footInfoWrap .footAddrBox { margin-bottom: 16px !important; font-size: 12px !important; }
	html body .footer .footInfoWrap .footCopy { font-size: 12px !important; }
	html body .footer .logoImg { width: 110px !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; }

	/* BEST 상품 알림 팝업 — 폰에서는 방해만 된다 */
	html body .bestPopWrap { display: none !important; }
}

/* ==========================================================================
   5. 480px 이하 — 좁은 폰
   ========================================================================== */
@media (max-width: 480px) {
	html body .mainTitWrap { font-size: 18px !important; }
	html body .footer .footInfoWrap .footLinkMenu li a { padding: 0 8px !important; font-size: 12px !important; }
}

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

@media (max-width: 1200px) {

	#p2mo {
		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;
	}

	.p2mo-bar { height: 56px; display: flex; align-items: center; gap: 2px; padding: 0 4px; box-sizing: border-box; }
	.p2mo-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;
	}
	.p2mo-ico:hover, .p2mo-ico:active { color: var(--p2-accent); }
	.p2mo-logo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding-left: 2px; }
	.p2mo-logo img { max-height: 26px; width: auto; max-width: 170px; display: block; }
	.p2mo-logo .p2mo-logo-txt { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #222; text-decoration: none; }
	.p2mo-badge {
		position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px;
		box-sizing: border-box; border-radius: 999px; background: var(--p2-accent); color: #fff;
		font-size: 10px; line-height: 16px; font-weight: 700; text-align: center;
	}
	.p2mo-badge[hidden] { display: none; }

	/* ── 서브페이지 상단바 : ← 뒤로가기 · 페이지 제목 · (검색 · 장바구니) ──
	   endedit.com 의 .mp-hd-bar-sub 실측값을 그대로 따랐다 —
	   높이 56 · 좌우 88px 고정칸 · 가운데 제목 18/26 bold.
	   양쪽 칸이 같은 88px 이라 오른쪽 아이콘이 없어도(마이페이지·고객센터 등)
	   제목이 화면 정가운데에 그대로 남는다. */
	.p2mo-bar.is-sub {
		display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px;
		align-items: center; height: 56px; padding: 0 4px; box-sizing: border-box; gap: 0;
	}
	.p2mo-bar.is-sub .p2mo-back { justify-self: start; }
	.p2mo-title {
		margin: 0; min-width: 0; text-align: center;
		font-size: 18px; line-height: 26px; font-weight: 700; color: #222;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.p2mo-right { display: flex; justify-content: flex-end; align-items: center; }
	/* 제목을 뽑을 수 없는 낱장에서는 제목 자리에 로고를 세운다 */
	.p2mo-title-logo { display: flex; align-items: center; justify-content: center; }
	.p2mo-title-logo img { max-height: 24px; width: auto; max-width: 100%; display: block; }
	/* 하단탭바 「카테고리」가 눌러 서랍을 여는 «숨은» 버튼 */
	.p2mo-burger-hidden { display: none !important; }

	/* 탑메뉴(서브페이지 상단관리의 .gnbBox)를 그대로 옮겨 담은 칩줄 — 메인에서만 그린다 */
	.p2mo-chips {
		display: flex; align-items: center; gap: 16px; 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;
	}
	.p2mo-chips::-webkit-scrollbar { height: 0; }
	.p2mo-chips a { flex: none; font-size: 15px; line-height: 44px; font-weight: 500; color: #4e5968; text-decoration: none; }
	.p2mo-chips a.is-accent { color: var(--p2-accent); font-weight: 700; }

	/* 검색 시트 */
	.p2mo-search { display: none; padding: 8px 12px 12px; box-shadow: inset 0 -1px 0 #eef0f2; }
	.p2mo-search.is-open { display: block; }
	.p2mo-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; }
	.p2mo-search input { flex: 1 1 auto; min-width: 0; height: 42px; border: 0; outline: none; background: transparent; font-size: 15px; color: #222; }
	.p2mo-search button { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--p2-accent); color: #fff; display: grid; place-items: center; cursor: pointer; }

	/* 왼쪽 서랍 */
	#p2mo-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; }
	#p2mo-dim.is-open { opacity: 1; pointer-events: auto; }
	#p2mo-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;
	}
	#p2mo-drawer.is-open { transform: none; }
	html.p2mo-lock, html.p2mo-lock body { overflow: hidden !important; }

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

/* 하단 5탭바(/common/inc/ee-bottomnav.js)는 768px 이하에서만 그려진다 —
   켜진 탭 색만 pro2 사이트색으로 맞춘다. */
@media (max-width: 768px) {
	.ee-bn-i.is-on, .ee-bn-i.is-on:hover, .ee-bn-i.is-on:active { color: var(--p2-accent) !important; }
}
/* ==========================================================================
   2026-08-25 [MU2608250130] — endedit 실측에 맞춘 두 가지

   ① 서브페이지에도 «탑메뉴 칩줄» 을 그린다(JS). 상단바 왼쪽은 뒤로가기라
      ☰ 는 endedit 처럼 «칩줄 왼쪽» 에 박스로 놓는다.
      (endedit 실측 : /product/list.asp 에서 button.ee-burger 가 [10,60] 36x36,
       그 오른쪽으로 a.ee-nav-item 「브랜드 · 타임세일 · 베스트 …」)

   ② 브레드크럼(.location 「홈 > 상품」)은 폰에서 숨긴다.
      제목이 이미 상단바 한가운데 있어 «같은 말» 이 두 번 나온다 —
      endedit 서브페이지에는 이 줄이 없다(실측).
   ========================================================================== */
@media (max-width: 1200px) {

	/* ── ① 칩줄 왼쪽 ☰ ─────────────────────────────────────────────── */
	.p2mo-chips .p2mo-chip-burger {
		flex: none; width: 36px; height: 36px; margin-right: 4px; padding: 0;
		border: 1px solid #e5e8eb; border-radius: 10px; background: #fff; cursor: pointer;
		display: grid; place-items: center; color: #191f28;
		-webkit-tap-highlight-color: transparent;
	}
	.p2mo-chips .p2mo-chip-burger:active { background: #f2f4f6; }
	.p2mo-chips .p2mo-chip-burger svg { width: 22px; height: 22px; }

	/* ── ② 중복 브레드크럼 숨김 ────────────────────────────────────── */
	html body .location { display: none !important; }
}