@charset "utf-8";
/* ==========================================================================
   pro3(몰프로 데모몰) 반응형 레이어            /data/pro3/css/site_v2.css
   2026-08-24 홍현기  [MU2608240010] 1차(폭 풀기) → [MU2608240030] 2차(엔드에디트 참고)

   무엇을 —
     1차(MU2608240010)는 «가로스크롤만» 없앴다. 폰에서는 PC 화면이 그대로
     쪼그라들어 로고 · 검색창 · 아이콘 · GNB 가 세로로 쌓이며 첫 화면의
     500px 을 잡아먹었다(실측 390px).
     2차(MU2608240030)는 https://endedit.com/ 를 기준삼아 «폰 전용 크롬» 을 만든다 —
       · 56px 고정 상단바 (☰ 서랍 · 로고 · 검색 · 장바구니)
       · 옆으로 미는 메뉴 칩줄
       · 왼쪽 서랍(전체 카테고리 + 메뉴 + 고객센터 + 로그인)
       · 하단 5탭바 (홈 · 카테고리 · 검색 · 좋아요 · MY) ← endedit 부품 재사용
     그리고 메인 페이지의 1200px 고정 블록을 전부 유동으로 바꾼다.

   ★어떻게 — 관리자 디자인템플릿(서브상단/서브하단/메인 디자인템플릿) HTML 은
     한 글자도 고치지 않는다. 폭 제약을 CSS 로 풀고, 폰 크롬은
     /data/pro3/js/site_v2.js 가 «새로 그려 붙인다»(기존 헤더는 CSS 로 숨김).
     따라서 관리자에서 상단/하단/메인 내용을 바꿔도 계속 유효하다.

   ★적용 범위 : pro3 «한 사이트만». /_include/header.asp 가
     /data/{shop}/css/site_v2.css 를 «파일이 있을 때만» 읽으므로 다른 쇼핑몰
     (demo3 · rroys · endedit · labelon · kchanggo …)은 이 파일이 없어 무영향.
   ★공용 파일(/css/common.css.asp · /css/commonTotal.css ·
     /common/inc/shop_legacy_responsive.css)은 건드리지 않았다.

   브레이크포인트 (endedit /static/shop-chrome/index.css 와 같은 기준)
     ~1439 : 고정폭 해제(유동)      ~1024 : 태블릿(2단→1단, 3열)
      ~768 : 폰(전용 크롬, 2열)      ~480 : 좁은 폰 보정

   되돌리기 : 이 파일 하나만 지우면 즉시 1차 이전(고정폭) 상태로 돌아간다.
     폰 크롬만 끄려면 /data/pro3/js/site_v2.js 를 지운다(CSS 는 남아도 무해).
   ========================================================================== */

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

/* 폰 크롬이 쓰는 색 — 관리자 「사이트 테마 색상1」(pro3 = #FF7700)을 승계한다.
   레거시 스킨 head 가 --sitecolor1 을 내보내고, 리뉴얼 셸에서는
   /common/inc/shop_theme.asp 가 --wds-primary 를 내보낸다. 둘 다 없으면 주황. */
:root { --p3-accent: var(--sitecolor1, var(--wds-primary, #ff7700)); }

/* ==========================================================================
   1. 1439px 이하 — 문서 고정폭 해제 (769~1439 구멍 메우기)
      shop_legacy_responsive.css 의 같은 구간은 :has(.rr-header-wrap) 로 잠겨 있어
      pro3 에서는 안 걸린다. 여기서 «헤더 종류와 무관하게» 같은 일을 한다.
   ========================================================================== */
@media (max-width: 1439px) {

	/* ── 문서 전체 ─────────────────────────────────────────────────── */
	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; }

	/* topmenu.asp 가 찍는 «빈 폭맞춤 표»(width=1300) — 내용이 없어 그냥 뺀다 */
	#basisBody { display: none !important; }

	/* ── 본문 골격 ─────────────────────────────────────────────────── */
	.location, .locationBox,
	.sub_contents, .sub_contents > .inner, .sbc_width, .left_none,
	.PageWrapSize, .right_section, .right_cont,
	.member_wrap.width, .content_category, .contAuto {
		width: 100% !important; min-width: 0 !important; max-width: 100% !important;
		box-sizing: border-box !important; float: none !important;
	}

	/* ── 관리자 디자인템플릿 서브상단/서브하단 (pro3 가 실제로 쓰는 것) ──
	   실측에서 화면을 밀어내던 요소들 : .logoSearchWrap · .logoSearch ·
	   .myListBox(1200px) · .footerlogos · .contAuto(1215px) */
	/* ★관리자 템플릿은 «본문 안 인라인 <style>» 로 .logoSearchWrap{min-width:1200px!important}
	   을 건다. 인라인 style 블록은 head 의 외부 CSS 보다 «뒤» 라 같은 특이도로는 못 이긴다.
	   -> html body 를 앞에 붙여 특이도를 (0,1,0) 에서 (0,1,2) 로 올려 이긴다. */
	html body .logoSearchWrap, html body .logoSearch,
	html body .footerlogos, html body .footerWrap, html body .footer, html body .footerBox,
	html body .topMenuWrap, html body .topmenuWrap, html body .gnbWrap,
	html body .headerWrap, html body #headers, html body .contAuto,
	html body .scroll_gnb .in_cont,
	/* 서브하단(관리자 디자인템플릿) — 실측에서 1200px 로 남아 잘리던 요소들 */
	html body .links, html body .adrCopyright, html body .footCopyright,
	html body .footCopyright2, html body .footerInner, html body .footerCont {
		width: 100% !important; min-width: 0 !important; max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* 카테고리·메뉴 줄은 항목이 많다 — 줄바꿈 대신 «옆으로 밀어» 보게 한다 */
	.gnb, .gnbBox, .categoryList, .cateList {
		max-width: 100% !important;
		overflow-x: auto !important; -webkit-overflow-scrolling: touch;
	}
	.gnb::-webkit-scrollbar, .gnbBox::-webkit-scrollbar,
	.categoryList::-webkit-scrollbar, .cateList::-webkit-scrollbar { height: 0; }

	/* 검색창은 남는 폭을 채운다 */
	#sword, .searchInput, .logoSearch input[type="text"] { max-width: 100% !important; }

	/* ── 우측 플로팅 메뉴 — 1024px 실측에서 오른쪽 1314px 까지 삐져나오던 주범 ──
	   내용을 지우지 않고 «화면 안쪽으로» 붙인다. */
	html body .rightMenuWrap, html body .rightMenuBox, html body .rightMenuText {
		max-width: 92px !important; box-sizing: border-box !important;
	}
	html body .rightMenuWrap {
		right: 0 !important; left: auto !important;
		margin-left: 0 !important; transform: none !important;
	}

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

	/* ── 전체 카테고리 드롭다운(PC) ─────────────────────────────────── */
	html body .submenu1_in { width: 100% !important; box-sizing: border-box !important; padding: 0 16px !important; }
}

/* ==========================================================================
   2. 메인 페이지 — 1200px 고정 블록 전부 유동으로
      메인은 «관리자 메인 디자인템플릿»(T_MAIN_STYLE) 이 그리고, 폭이 각 템플릿의
      «본문 안 인라인 style» 에 1200px 로 박혀 있다(실측 : 390px 에서 문서폭 1236px).
      ★인라인 style 을 이기려면 특이도(html body)+!important 가 둘 다 필요하다.
      ★디자인템플릿 HTML 은 고치지 않는다 — 관리자에서 메인을 바꿔도 계속 유효하다.
   ========================================================================== */
@media (max-width: 1439px) {
	html body .top_banner_wrap .top_banner_box,
	html body .main_visual_wrap,
	html body .cateListWrap .cateListBox,
	html body .nowPdWrap .nowPdBox,
	html body .todayPdWrap .todayPdBox,
	html body .midBannerWrap .midBannerBox,
	html body .livePdWrap .livePdBox,
	html body .popularWrap .chanceBox,
	html body .pickBdWrap .pickBdBox,
	html body .pickPdWrap .pickPdBox,
	html body .eventBnWrap .eventBnBox,
	html body .noticeWrap .noticeBox,
	html body .tsWrap .tsCont,
	html body .bn_wrapper_allmenu, html body .bn_area,
	html body .mainVisWrap, html body .mainContWrap, html body .mainGoodsWrap {
		width: 100% !important; min-width: 0 !important; max-width: 1200px !important;
		margin-left: auto !important; margin-right: auto !important;
		box-sizing: border-box !important;
	}

	/* 스와이퍼는 자기 폭을 «계산» 하므로 상자만 열어 준다(트랙 폭은 건드리지 않는다) */
	html body .main_visual_wrap .swiper-container,
	html body .nowPdWrap .swiper-container, html body .todayPdWrap .swiper-container,
	html body .midBannerWrap .swiper-container, html body .livePdWrap .swiper-container,
	html body .popularWrap .swiper-container, html body .pickPdWrap .swiper-container {
		max-width: 100% !important; overflow: hidden !important;
	}

	html body .top_banner_wrap .btn_bn_close { right: 10px !important; left: auto !important; }
}

/* ★메인 비주얼의 조작버튼들은 «화면 중앙 + 600px»(= 1200px 레이아웃의 끝) 에
   붙어 있다 — right:50% + margin-right:-600px 방식이라 화면이 1200px 보다 좁아지면
   그대로 화면 밖으로 나간다(실측 390px : 문서폭 982px).
   ★1200px 보다 넓을 때는 원래 좌표가 «본문 끝» 과 맞으므로 건드리지 않는다. */
@media (max-width: 1200px) {
	html body .main_visual_wrap .swiper_btn,
	html body .main_visual_wrap .bottom_btn,
	html body .main_visual_wrap .swiper-button-next {
		left: auto !important; right: 10px !important;
		margin-left: 0 !important; margin-right: 0 !important;
		max-width: calc(100% - 20px) !important; box-sizing: border-box !important;
	}
	html body .main_visual_wrap .swiper-button-prev {
		left: 10px !important; right: auto !important;
		margin-left: 0 !important; margin-right: 0 !important;
	}
	/* 히어로 왼쪽 카테고리 패널(190px · margin-left:-600px) */
	html body .main_visual_wrap #cateList { left: 0 !important; right: auto !important; margin-left: 0 !important; }
}

/* ==========================================================================
   3. 1024px 이하 — 태블릿. 2단 배치를 1단으로, 진열 3열
   ========================================================================== */
@media (max-width: 1024px) {

	.location, .locationBox { padding-left: 14px !important; padding-right: 14px !important; }
	.sub_contents, .right_cont, .PageWrapSize {
		padding-left: 14px !important; padding-right: 14px !important;
	}

	/* 좌측 메뉴 + 본문 2단 → 1단
	   ★바깥 상자(.LeftWrapSize · .PageWrapSize · .cslnb_v2)까지 함께 풀어야 한다 —
	     안쪽만 100% 로 만들면 «찌그러진 바깥 상자의 100%» 가 되어 고객센터 좌측메뉴가
	     59px 세로글씨로 눌린다(실측 390px). */
	html body .LeftWrapSize, html body .cslnb_v2,
	.left_section, .left_cont, .lmenu {
		width: 100% !important; float: none !important;
		margin-left: 0 !important; margin-right: 0 !important;
	}
	html body .PageWrapSize { float: none !important; margin-left: 0 !important; }
	.right_section, .right_cont { width: 100% !important; float: none !important; margin-left: 0 !important; }

	/* 우측 플로팅 메뉴는 이 폭부터 접는다 — 본문 읽기를 방해한다 */
	html body .rightMenuWrap { display: none !important; }

	/* 메인 진열 — 타임세일(플렉스 그리드) 5열 → 3열.
	   원본은 li{width:19.2%;margin-right:1%} + nth(5n){margin-right:0} 조합이다.
	   열 수를 바꾸면 nth 규칙이 어긋나 마지막 칸이 줄을 넘긴다 → gap 으로 바꾼다. */
	html body .tsWrap .tsCont .wvybstSlider { gap: 14px 2.5% !important; }
	html body .tsWrap .tsCont .wvybstSlider li,
	html body .tsWrap .tsCont .wvybstSlider li:nth-of-type(5n) {
		width: 31.6% !important; margin-right: 0 !important;
	}

	/* 카테고리 아이콘줄(8개 · nowrap) → 4개씩 두 줄로 접는다
	   (원본 li{width:12.5%;margin-right:3%} 의 마진을 gap 으로 바꿔 줄끝이 안 넘치게) */
	html body .cateListWrap .cateListBox ul { flex-wrap: wrap !important; gap: 18px 4% !important; }
	html body .cateListWrap .cateListBox ul li,
	html body .cateListWrap .cateListBox ul li:last-child { width: 22% !important; margin-right: 0 !important; }

	/* 메인 배너 3개(bn1~3) 세로 정렬 */
	html body .bn_area { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
	html body .bn_area .bn { width: 100% !important; max-width: 100% !important; }
}

/* ==========================================================================
   4. 768px 이하 — 폰.
      여기서부터 «관리자 서브상단(로고+검색+아이콘) · GNB» 를 숨기고
      /data/pro3/js/site_v2.js 가 그리는 폰 크롬(#p3mo)을 쓴다.
      (숨기는 것뿐이라 폰 크롬 JS 가 없으면 CSS 도 아무 것도 숨기지 않는다 —
       .p3mo-on 클래스는 그 JS 가 <html> 에 붙인다.)
   ========================================================================== */
@media (max-width: 768px) {

	/* ── 레거시 PC 헤더 숨김 (폰 크롬이 켜졌을 때만) ─────────────────── */
	.p3mo-on .logoSearchWrap,
	.p3mo-on .logoSearchHeight,
	.p3mo-on .gnbWrap,
	.p3mo-on #headers.scroll_gnb,
	.p3mo-on .allMenuBox { display: none !important; }

	/* 브레드크럼은 남기되 작게 */
	.location .locationBox { font-size: 12px !important; padding: 6px 14px !important; }

	/* 히어로 왼쪽 카테고리 패널 : 폰에서는 서랍(☰)이 그 역할을 하므로 접는다
	   (190px 패널이 히어로 절반을 덮고, 2단 하위메뉴가 화면 밖으로 나간다) */
	.p3mo-on .main_visual_wrap #cateList { display: none !important; }

	/* ── 상품 진열 2열 ───────────────────────────────────────────────── */
	.goodsList > li, .goods_list > li, .prdList > li, .itemList > li,
	.mainGoodsWrap li, .mainCont .goodsList > li {
		width: 50% !important; box-sizing: border-box !important;
	}
	html body .tsWrap .tsCont .wvybstSlider { gap: 14px 3% !important; }
	html body .tsWrap .tsCont .wvybstSlider li,
	html body .tsWrap .tsCont .wvybstSlider li:nth-of-type(5n) {
		width: 48.5% !important; margin-right: 0 !important;
	}
	html body .gallery_list ul { width: 100% !important; }

	/* 카테고리 아이콘줄 4개씩 */
	html body .cateListWrap .cateListBox { padding: 22px 12px !important; }
	html body .cateListWrap .cateListBox ul { gap: 16px 4% !important; }
	html body .cateListWrap .cateListBox ul li,
	html body .cateListWrap .cateListBox ul li:last-child { width: 22% !important; margin-right: 0 !important; }
	html body .cateListWrap .cateListBox ul li p { font-size: 12px !important; }

	/* 메인 섹션 좌우 여백·제목 크기
	   ★진열 상자(.nowPdBox 등)는 «그 자체가 swiper-container» 다 — 안쪽 여백을 주면
	     그 여백 칸으로 옆 슬라이드가 비쳐(왼쪽에 카드 조각이 걸린 것처럼) 보인다.
	     그래서 여백은 바깥 Wrap 으로 옮기고 상자는 0 으로 둔다. */
	html body .nowPdWrap, html body .todayPdWrap, html body .midBannerWrap,
	html body .livePdWrap, html body .popularWrap, html body .pickBdWrap,
	html body .pickPdWrap {
		padding-left: 12px !important; padding-right: 12px !important;
		box-sizing: border-box !important;
	}
	html body .nowPdWrap .nowPdBox, html body .todayPdWrap .todayPdBox,
	html body .midBannerWrap .midBannerBox, html body .livePdWrap .livePdBox,
	html body .popularWrap .chanceBox, html body .pickBdWrap .pickBdBox,
	html body .pickPdWrap .pickPdBox {
		padding-left: 0 !important; padding-right: 0 !important;
	}
	html body .noticeWrap .noticeBox, html body .eventBnWrap .eventBnBox,
	html body .tsWrap .tsCont {
		padding-left: 12px !important; padding-right: 12px !important;
	}
	html body .tsWrap .tsCont .titleSec h2 { font-size: 19px !important; margin-bottom: 12px !important; }

	/* ── 넓은 표는 표 안에서만 가로 스크롤(칸을 부수지 않는다) ───────── */
	.sub_contents table.tbl_type01,
	.sub_contents table.cartTable,
	.sub_contents table.orderTable,
	.right_cont table.tbl_type01 {
		display: block !important; width: 100% !important;
		overflow-x: auto !important; -webkit-overflow-scrolling: touch;
		white-space: nowrap !important;
	}

	/* ── 서브하단(푸터) 세로 정리 ────────────────────────────────────── */
	html body .footer .contAuto { padding: 0 14px !important; }
	html body .footer .footCopyright, html body .footer .footCsInfo,
	html body .footer .footerLogo { float: none !important; width: 100% !important; text-align: left !important; }
	html body .footerlogos { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
	html body .links { display: flex !important; flex-wrap: wrap !important; gap: 6px 12px !important; }
	html body .links .contAuto { display: flex !important; flex-wrap: wrap !important; gap: 4px 14px !important; }
	html body .adrCopyright, html body .footCopyright2 { word-break: keep-all !important; }
	html body .footer { padding-bottom: 8px !important; }

	/* 폰에서 가로 여백 축소 */
	.location, .locationBox, .sub_contents, .right_cont, .PageWrapSize {
		padding-left: 12px !important; padding-right: 12px !important;
	}

	/* ── 1:1 채팅 상담 버튼 : 하단탭바(62px) 위로 올린다 ─────────────── */
	html body #rightFloating.aside { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; right: 10px !important; z-index: 8990 !important; }
	html body #rightFloating .chatBtn .titleBox { display: none !important; }
}

/* ==========================================================================
   5. 폼 요소 — 고정폭 input / 탭박스가 좁은 화면을 밀어내지 않게
      실측(회원가입 390px) : .tab_box 867px · input.text 635px 넘침
   ========================================================================== */
@media (max-width: 1024px) {
	html body .tab_box, html body .tab_box > ul,
	html body .join_box, html body .joinWrap, html body .member_wrap {
		width: 100% !important; min-width: 0 !important; max-width: 100% !important;
		box-sizing: border-box !important;
	}
	/* 탭이 많으면 줄바꿈 대신 옆으로 밀어 보게 한다 */
	html body .tab_box > ul { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
	html body .tab_box > ul::-webkit-scrollbar { height: 0; }

	/* ★회원가입 「휴대폰인증」 — 버튼(label.smsSubmit)이 absolute 로 입력칸 위에 겹쳐
	   폰에서는 입력한 번호가 버튼에 가려진다(실측 390px : 입력칸 28~362 · 버튼 176~362.
	   이 겹침은 이번 작업 전부터 있던 것으로, 폰에서만 드러난다).
	   버튼을 글자폭에 맞게 줄이고 입력칸 오른쪽에 그만큼 자리를 비운다. */
	html body .moInputBox > label.smsSubmit { width: auto !important; left: auto !important; right: 0 !important; }
	html body .moInputBox > label.smsSubmit .btn_check { width: auto !important; padding: 0 14px !important; }
	html body .moInputBox:has(> label.smsSubmit) > input.text { padding-right: 104px !important; box-sizing: border-box !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;
	}
}

/* ==========================================================================
   6. 폰 크롬(#p3mo) — /data/pro3/js/site_v2.js 가 그리는 요소들의 옷.
      기준 : https://endedit.com/ 모바일 헤더 실측
        상단바 56px · 아이콘칸 44px · 장바구니 배지 16px · 메뉴줄 44px
      ★769px 이상에서는 아예 감춘다(PC 화면은 예전 그대로).
   ========================================================================== */
#p3mo, #p3mo-dim, #p3mo-drawer { display: none; }

@media (max-width: 768px) {

	/* ── 고정 상단 묶음(띠배너 + 상단바 + 칩줄) ───────────────────────── */
	#p3mo {
		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;
	}
	/* 띠배너(관리자 콘텐츠)를 이 안으로 옮겨 담는다 — 내용을 지우지 않는다 */
	#p3mo .p3mo-band { position: relative !important; width: 100% !important; }
	#p3mo .p3mo-band .top_banner_box { width: 100% !important; min-width: 0 !important; box-sizing: border-box; padding: 0 34px 0 12px !important; }
	#p3mo .p3mo-band .top_banner_box p { font-size: 12px !important; line-height: 34px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

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

	/* ── 메뉴 칩줄 (endedit 의 카테고리 칩줄과 같은 자리) ───────────── */
	.p3mo-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;
	}
	.p3mo-chips::-webkit-scrollbar { height: 0; }
	.p3mo-chips a {
		flex: none; font-size: 15px; line-height: 44px; font-weight: 500;
		color: #4e5968; text-decoration: none;
	}
	.p3mo-chips a.is-accent { color: var(--p3-accent); font-weight: 700; }

	/* ── 검색 시트 (검색 아이콘을 누르면 내려온다) ───────────────────── */
	.p3mo-search { display: none; padding: 8px 12px 12px; box-shadow: inset 0 -1px 0 #eef0f2; }
	.p3mo-search.is-open { display: block; }
	.p3mo-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; }
	.p3mo-search input {
		flex: 1 1 auto; min-width: 0; height: 42px; border: 0; outline: none; background: transparent;
		font-size: 15px; color: #191f28;
	}
	.p3mo-search button {
		flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
		background: var(--p3-accent); color: #fff; display: grid; place-items: center; cursor: pointer;
	}

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

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

	/* ── 하단탭바(endedit 부품 /common/inc/ee-bottomnav.js) 색 맞춤 ──── */
	.ee-bn-i.is-on, .ee-bn-i.is-on:hover, .ee-bn-i.is-on:active { color: var(--p3-accent) !important; }
}

/* 480px 이하 — 좁은 폰 */
@media (max-width: 480px) {
	.p3mo-chips { gap: 14px; padding: 0 12px; }
	.p3mo-chips a { font-size: 14px; }
	html body .cateListWrap .cateListBox ul li { width: 22% !important; }
	html body .tsWrap .tsCont .titleSec h2 { font-size: 18px !important; }
}

/* ==========================================================================
   7. 2026-08-24 정희찬(PRO4) — pro3 메인·서브 반응형 «마무리»
      (1·2차 : 홍현기 MU2608240010 / MU2608240030 — 위 1~6번)

      이번에 고친 것 —
        ① 769~1439px «PC 헤더(서브페이지상단관리)» 가 무너지던 문제
           실측(1280px) : .myListBox 가 폭 100% 를 먹어 아이콘 묶음이 다음 줄로
           떨어지고 「전체 카테고리」 버튼을 덮었다. 「로그인|회원가입|고객센터」는
           오른쪽 화면 밖으로 잘렸다(1024px).
        ② 폰(≤768) 메인 히어로 배너가 «81px 짜리 띠» 로 나오던 문제
           PC 배너가 1920x400 이라 390px 에서 81px 이 된다. 모바일몰(/m)에는
           같은 배너의 720x394 판(m_banner_N.jpg)이 이미 있다 →
           /data/pro3/js/site_v2.js 가 폰에서만 그 이미지로 갈아끼운다.
           (이 파일은 그때 필요없어지는 «큰 화살표» 만 접는다)
        ③ 메인 「고객센터 안내 3칸」·「추천 브랜드 5칸」 이 폰에서 세로글씨로
           눌리던 문제(실측 390px : .noticeTxt 26px · .brendTxt 65px)

      ★관리자 디자인템플릿(메인/서브상단/서브하단) HTML 은 여전히 한 글자도
        고치지 않았다 — 폭 제약만 CSS 로 푼다. 관리자에서 내용을 바꿔도 유효하다.
      ★서브페이지 상단(로고·검색·아이콘 + 탑메뉴)과 하단(푸터)은 메인과 «같은»
        마크업이다(실측 대조 : 이미지 파일명만 다르고 나머지는 동일). 그래서
        여기 규칙 하나가 메인·서브에 함께 적용된다.
   ========================================================================== */

/* ── 7-1. PC 헤더 + 탑메뉴 (769~1439) ───────────────────────────────────
   원본은 float 배치라 폭이 줄면 아이콘 묶음이 줄바꿈된다 → 한 줄 플렉스로 바꾼다.
   ★서브페이지는 «본문 안 인라인 style» 로 .logoSearchWrap .logoSearch 에
     padding 을 !important 로 건다(특이도 0,2,0). 그래서 여기서는 «앞에
     .logoSearchWrap 을 붙여» 0,3,2 로 올려야 이긴다. */
@media (min-width: 769px) and (max-width: 1439px) {

	html body .logoSearch,
	html body .logoSearchWrap .logoSearch,
	html body .logoSearchWrap.scroll .logoSearch {
		display: flex !important; align-items: center !important; gap: 18px !important;
		padding: 12px 16px !important; box-sizing: border-box !important;
	}
	html body .logoSearch > * { float: none !important; margin: 0 !important; }
	html body .logoSearch .logo { flex: 0 0 auto; width: 170px !important; padding-top: 0 !important; }
	html body .logoSearch .search { flex: 1 1 auto; min-width: 0; margin-top: 0 !important; }
	html body .logoSearch .search form,
	html body .logoSearch .search .searchComplete { width: 100% !important; }
	html body .logoSearch .search input { width: 100% !important; float: none !important; }
	html body .topAdImgBox { flex: 0 0 182px; }
	/* ★여기가 1280px 에서 헤더가 무너지던 원인이었다 — 1번 규칙의 폭 100% 목록에
	   .myListBox 가 들어 있었다. float:right 인 채로 폭이 100% 가 되면 «혼자 한 줄»
	   을 차지한다. 목록에서 뺐고, 혹시 남아 있어도 여기서 되돌린다. */
	html body .myListBox {
		flex: 0 0 auto; width: auto !important; max-width: none !important;
		padding-top: 0 !important;
	}

	/* 탑메뉴 : 「로그인|회원가입|고객센터」를 윗줄로 올리고 메뉴는 아랫줄에 채운다
	   (1024px 에서 오른쪽으로 잘려 나가던 묶음이다) */
	html body .gnbBox {
		padding: 0 16px !important; box-sizing: border-box !important;
		overflow: visible !important;
	}
	html body .gnbBox > ul { display: flex !important; flex-wrap: wrap !important; align-items: center !important; }
	html body .gnbBox > ul > li { float: none !important; padding: 0 12px !important; }
	html body .gnbBox > ul > li.allMenu { width: 170px !important; }
	html body .gnbBox .loginBox {
		order: -1; width: 100% !important; float: none !important; padding: 0 !important;
		display: flex !important; justify-content: flex-end !important; line-height: 34px !important;
	}
	html body .gnbBox .loginBox .util { float: none !important; display: flex !important; align-items: center !important; }
	html body .gnbBox ul li .util a { float: none !important; padding-right: 26px !important; }
	html body .gnbBox ul li .util > a::after { right: 12px !important; }

	/* 전체 카테고리 드롭다운은 «메뉴줄 바로 아래» 로 (탑메뉴가 2줄이 됐다) */
	html body .allMenuBox { top: 100% !important; }
}

/* 1100px 이하 — 헤더 광고는 접고 글자·여백을 한 단계 줄인다 */
@media (min-width: 769px) and (max-width: 1100px) {
	html body .topAdImgBox { display: none !important; }
	html body .logoSearch .logo { width: 150px !important; }
	html body .gnbBox > ul > li { padding: 0 9px !important; }
	html body .gnbBox > ul > li.allMenu { width: 150px !important; padding: 0 14px !important; }
}

/* 1024px 이하 — 히어로 왼쪽 카테고리 패널(190px)은 접는다.
   히어로가 213px 이하로 낮아져 6단 목록이 패널 밖으로 넘친다. 같은 메뉴가
   탑메뉴 「전체 카테고리」 드롭다운에 그대로 있다. (폰은 4번에서 이미 접는다) */
@media (min-width: 769px) and (max-width: 1024px) {
	html body .main_visual_wrap #cateList { display: none !important; }
}

/* ── 7-2. 메인 히어로·중간 띠배너 (폰) ─────────────────────────────────
   배너 이미지 교체는 site_v2.js 가 한다. 여기서는 배너 위 조작버튼만 정리한다.
   (40x70 화살표가 배너 절반을 덮는다 — 폰에서는 밀어서 넘긴다) */
@media (max-width: 768px) {
	html body .main_visual_wrap .swiper-button-next,
	html body .main_visual_wrap .swiper-button-prev,
	html body .main_visual_wrap .swiper_btn,
	html body .midBannerWrap .swiper-button-next,
	html body .midBannerWrap .swiper-button-prev { display: none !important; }

	html body .main_visual_wrap .bottom_btn {
		bottom: 10px !important; right: 10px !important; margin-right: 0 !important;
		height: 28px !important; line-height: 28px !important; padding: 0 32px 0 12px !important;
	}
	html body .main_visual_wrap .bottom_btn .swiper-pagination-fraction { font-size: 12px !important; line-height: 26px !important; }
	html body .main_visual_wrap .bannerMoreBtn { height: 28px !important; line-height: 26px !important; font-size: 17px !important; }

	/* 갈아끼운 모바일 배너(720x394)가 들어와도 상자는 화면폭에 맞춘다 */
	html body .main_visual_wrap .swiper-container .swiper-slide img,
	html body .midBannerWrap .swiper-slide img { width: 100% !important; height: auto !important; }

	/* ★2026-08-25 [MU2608250120] — 배너 «자리» 를 처음부터 모바일 비율로 잡는다.
	   PC 배너(히어로 1920x400 · 중간띠 1200x148)는 폰 폭에서 81px · 48px 짜리
	   «납작한 띠» 로 그려졌다가, 스크립트가 모바일 배너(720x394 · 664x210)로
	   갈아끼우는 순간 213px · 123px 로 «훌쩍» 커진다 — 그때 아래 내용이 밀린다.
	   → 처음부터 «모바일 배너와 같은 비율» 로 자리를 잡아 두면, 교체는 그림만
	     바뀌고 화면이 튀지 않는다. 교체 전까지는 PC 배너의 가운데가 보인다.
	   ★교체가 끝나면 비율이 정확히 맞으므로 잘리는 부분이 없다. */
	html body .main_visual_wrap .swiper-container .swiper-slide img {
		aspect-ratio: 720 / 394 !important;
		object-fit: cover !important;
		object-position: center !important;
	}
	html body .midBannerWrap .swiper-slide img {
		aspect-ratio: 664 / 210 !important;
		object-fit: cover !important;
		object-position: center !important;
	}
	html body .midBannerWrap { margin: 30px 0 !important; }
}

/* ── 7-3. 「주문배송조회 / 자주 묻는 질문 / 이벤트」 3칸 안내 ────────────
   원본 : li{width:33.33%; padding:20px 30px} + 아이콘 70px.
   390px 에서 글자칸이 26px 만 남아 세로글씨가 된다. */
@media (max-width: 1024px) {
	html body .noticeWrap .noticeBox ul li { padding: 16px 14px !important; margin-right: 1.5% !important; }
	html body .noticeWrap .noticeBox ul li .eventImg { width: 52px !important; margin-right: 14px !important; }
}
@media (max-width: 768px) {
	html body .noticeWrap { margin: 30px 0 !important; }
	html body .noticeWrap .noticeBox ul { flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 18px !important; }
	html body .noticeWrap .noticeBox ul li,
	html body .noticeWrap .noticeBox ul li:last-child { width: 100% !important; margin-right: 0 !important; }
	html body .noticeWrap .noticeBox h1 { font-size: 19px !important; margin-bottom: 12px !important; }
	html body .noticeWrap .noticeBox ul li .noticeTxt { margin-top: 0 !important; }
}

/* ── 7-4. 「추천 브랜드」 5칸 ──────────────────────────────────────────
   원본 : li{width:20%; margin-right:2%} nowrap. 390px 에서 칸이 71px 로 눌린다.
   ★nth 규칙이 없으므로 마진을 gap 으로 바꿔 줄 끝이 넘치지 않게 한다. */
@media (max-width: 1024px) {
	html body .pickBdWrap .pickBdBox ul { flex-wrap: wrap !important; gap: 14px 2.5% !important; }
	html body .pickBdWrap .pickBdBox ul li,
	html body .pickBdWrap .pickBdBox ul li:last-child { width: 31.6% !important; margin-right: 0 !important; }
}
@media (max-width: 768px) {
	html body .pickBdWrap .pickBdBox ul { gap: 12px 3% !important; }
	html body .pickBdWrap .pickBdBox ul li,
	html body .pickBdWrap .pickBdBox ul li:last-child { width: 48.5% !important; }
	html body .pickBdWrap .pickBdBox h1 { font-size: 19px !important; }
}

/* ==========================================================================
   8. 2026-08-25 정희찬(PRO4) — «모바일 반응형 서브페이지» 하단 푸터(카피라이트) 숨김

   사용자 요청 : "모바일 반응형 서브페이지에서는 카피라이트 안나오게 해줘"
   ★이 환경에서 「카피라이트」는 © 한 줄이 아니라 «하단 푸터 영역 전체» 를 뜻한다 —
     하단링크(회사소개 · 제휴문의 · 입점신청 · 1:1문의 · 개인정보처리방침 · 이용약관 ·
     이용안내) · 회사정보(상호 · 대표 · 사업자등록번호 · 통신판매신고 · 주소 ·
     개인정보관리책임자) · 고객센터 · 계좌정보 · 에스크로 고지 · COPYRIGHT 줄 ·
     하단 로고띠(LG U+ · 공정위 · KISA · 국세청 · mallpro) 까지 «전부».
     서브페이지 하단은 관리자 「서브페이지하단관리」(CSA)가 그리는 .footer 한 덩어리다.

   범위 — «서브페이지 × 폰» 두 조건이 모두 맞을 때만 숨긴다.
     · 서브페이지 : body.p3-sub 는 /_include/header.asp 가 붙인다. 그 파일은
       서브페이지 전용이라(메인은 /main/main_header.asp) 메인에는 안 붙는다
       -> «메인 페이지 푸터는 그대로 나온다».
     · 폰 : 769px 이상(PC · 태블릿) 서브페이지 푸터도 그대로 나온다.
     · 하단 5탭바(홈 · 카테고리 · 검색 · 좋아요 · MY)는 «메뉴» 라 그대로 둔다.

   ★마크업은 지우지 않는다 — CSS 로 감추기만 하므로 이 블록을 지우면 즉시 복귀한다.
   ⚠ 사업자등록번호 · 통신판매업 신고번호는 전자상거래법상 표시의무가 있는 항목이다.
     지금은 «폰 서브페이지» 에서만 가려지고 메인 · PC 에는 그대로 나오지만,
     법적 검토가 필요하면 이 블록을 지우는 것으로 한 번에 되돌릴 수 있다.
   ========================================================================== */
@media (max-width: 768px) {
	html body.p3-sub #footer,
	html body.p3-sub .footer { display: none !important; }
}

/* 푸터가 사라지면 본문이 하단탭바(62px)에 «딱» 붙는다 — 숨 쉴 자리를 준다.
   (탭바 높이만큼의 body padding-bottom 은 ee-bottomnav 가 인라인으로 넣는다) */
@media (max-width: 768px) {
	html body.p3-sub .sub_contents,
	html body.p3-sub .right_cont,
	html body.p3-sub .PageWrapSize { padding-bottom: 24px !important; }
}

/* ==========================================================================
   9. 2026-08-25 정희찬(PRO4) — 모바일 «서브페이지» 상단바
      「뒤로가기 + 페이지 제목 + 아이콘」 (탑메뉴 칩줄은 안 그린다)

   사용자 요청 : "모바일 서브페이지 탑메뉴는 안나오게 해주고,
                 endedit.com 처럼 뒤로가기 · 페이지타이틀 · 아이콘 이렇게"
   기준 화면 : https://endedit.com/product/list.asp?type=best
   치수도 endedit 과 같다(/common/inc/shop_header.css 의 .mp-hd-bar-sub) —
     56px 높이 · [88px | 1fr | 88px] 그리드 · 44px 아이콘 · 제목 18px/700/말줄임.
     ★88px = 아이콘 두 개(44+44). 아이콘이 없는 화면(마이페이지·고객센터)도
       오른쪽 칸을 88px 로 비워 둬야 제목이 «가운데» 에 선다.

   · 바 자체는 /data/pro3/js/site_v2.js 의 buildBar() 가 그린다.
   · 메인은 예전 그대로(로고 + 검색 + 장바구니 + 칩줄) — 서브만 바뀐다.
   · ☰ 는 서브에서 .p3mo-off 로 «감추기만» 한다. 하단탭바의 「카테고리」가
     .ee-burger 를 대신 눌러 전체 카테고리 서랍을 연다(endedit 과 같은 구조).
   되돌리기 : 이 구역과 site_v2.js 의 buildBar() 서브 분기를 지운다.
   ========================================================================== */
@media (max-width: 768px) {

	.p3mo-off { display: none !important; }

	.p3mo-bar.p3mo-bar-sub {
		display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px;
		align-items: center; height: 56px; padding: 0 4px; gap: 0;
	}
	.p3mo-back {
		justify-self: start; width: 44px; height: 44px;
		border: 0; padding: 0; background: transparent;
		display: grid; place-items: center; cursor: pointer;
		color: #191f28; -webkit-tap-highlight-color: transparent;
	}
	.p3mo-back:hover, .p3mo-back:active { color: var(--p3-accent); }
	.p3mo-title {
		margin: 0; min-width: 0; text-align: center;
		font-size: 18px; line-height: 26px; font-weight: 700; color: #191f28;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.p3mo-right { display: flex; justify-content: flex-end; }

	/* 제목이 상단바에 있으니 본문 위 브레드크럼(홈 > …)은 중복이다.
	   endedit 도 폰에서는 이 줄이 없다. (제목 문구는 JS 가 «감춰지기 전 값이 아니라»
	   textContent 로 읽으므로 숨겨도 그대로 읽힌다) */
	html body.p3-sub .location { display: none !important; }
}
/* ==========================================================================
   9. 2026-08-25 [MU2608250030] — 폰(≤768) 오른쪽 아래 «뜨는 버튼» 두 개

     ① 1:1 채팅상담(#rightFloating) 이 하단탭바에 묻혀 아래가 잘려 보였다.
        원인 두 가지가 겹쳤다 —
          · 폰에서는 말풍선 글자(.titleBox)를 감추므로 상자가 105x29 로 납작해지는데,
            실제로 보이는 «60px 원»(.imgBox)은 position:absolute 라 상자 아래로 30px
            삐져나온다. 그래서 bottom 값이 실제 위치와 맞지 않았다(실측 646px :
            상자 아래끝 902px · 원 아래끝 932px).
          · 하단탭바(.ee-bn)는 z-index 9000 인데 채팅은 8990 이라, 겹치는 24px 이
            탭바에 덮여 사라졌다.
        → 상자를 «원 크기» 로 만들어 bottom 이 실제 위치가 되게 하고,
          탭바 실측 높이(--p3mo-bnh, site_v2.js 가 잰다) 위로 12px 띄우고,
          z-index 를 탭바 위로 올린다.

     ② ↑TOP 은 모바일몰(/m)의 .float_btn_wrap 에만 있고 반응형에는 없었다.
        같은 이미지(/data/pro3/banner/top_button_2.png) · 같은 40px ·
        같은 «200px 넘게 내리면 나타남» 규칙으로 site_v2.js 가 #p3mo-top 을 만든다.

     ★--p3mo-bnh 는 탭바 실측 높이다(기본 68px). 탭바가 없는 화면(상품상세의 구매바
       등 .ee-bn-off)에서는 0 이 되어 버튼이 화면 아래로 내려온다.
     ★탭바 높이에는 env(safe-area-inset-bottom) 이 이미 padding 으로 들어 있으므로
       여기서 다시 더하지 않는다(아이폰에서 두 번 밀린다).
   ========================================================================== */
#p3mo-top { display: none; }

@media (max-width: 768px) {

	/* ── ① 1:1 채팅상담 ─────────────────────────────────────────────── */
	html body #rightFloating.aside {
		bottom: calc(var(--p3mo-bnh, 68px) + 12px) !important;
		right: 12px !important;
		z-index: 9010 !important;                 /* 하단탭바(9000) 위 */
		width: 60px !important; height: 60px !important;
	}
	html body #rightFloating .aside_menu { width: 60px !important; height: 60px !important; }
	html body #rightFloating .chatBtn {
		width: 60px !important; height: 60px !important;
		padding: 0 !important; background: none !important;
		box-shadow: none !important; border-radius: 50% !important;
	}
	/* 원을 상자 «안» 으로 들여놓는다 — 이래야 bottom 값이 곧 화면상의 위치가 된다 */
	html body #rightFloating .chatBtn .imgBox {
		position: static !important; top: auto !important; right: auto !important;
		width: 60px !important; height: 60px !important; display: block !important;
	}

	/* ── ② ↑TOP ──────────────────────────────────────────────────────── */
	#p3mo-top {
		display: block; position: fixed; right: 20px;
		bottom: calc(var(--p3mo-bnh, 68px) + 20px);
		width: 40px; height: 40px; padding: 0; border: 0; background: none;
		cursor: pointer; z-index: 9010; -webkit-tap-highlight-color: transparent;
		opacity: 0; pointer-events: none; transform: translateY(8px);
		transition: opacity .25s ease, transform .25s ease;
	}
	#p3mo-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
	#p3mo-top img { width: 40px; height: 40px; display: block; }
	/* 채팅상담 버튼이 있는 화면에서는 그 «위» 로 올린다 (12 + 60 + 10) */
	html.p3mo-haschat #p3mo-top { bottom: calc(var(--p3mo-bnh, 68px) + 82px); }
}
/* ==========================================================================
   10. 2026-08-25 [MU2608250040] — 폰 우편번호찾기 «화면 안 레이어»

     PC 화면들은 daum.Postcode 를 «브라우저 새 창» 으로 띄운다 — 폰에서는
     주소창만 큰 창이 뜨거나 팝업차단에 막혔다(첨부 화면). site_v2.js 가
     폰 폭일 때만 그 창을 이 레이어 안으로 넣는다(.embed).
     ★레이어는 폰에서만 쓰므로 PC 에서는 아예 만들어지지도 보이지도 않는다.
   ========================================================================== */
#p3mo-zip { display: none; }

@media (max-width: 768px) {
	#p3mo-zip {
		position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9700;
		display: none; flex-direction: column; background: #fff;
	}
	#p3mo-zip.is-open { display: flex; }
	#p3mo-zip .p3mo-zip-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; background: #fff;
	}
	#p3mo-zip .p3mo-zip-top strong { font-size: 16px; font-weight: 700; color: #191f28; }
	#p3mo-zip .p3mo-zip-x {
		width: 44px; height: 44px; border: 0; padding: 0; background: transparent;
		display: grid; place-items: center; color: #4e5968; cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	#p3mo-zip .p3mo-zip-x:hover, #p3mo-zip .p3mo-zip-x:active { color: var(--p3-accent); }
	#p3mo-zip .p3mo-zip-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
	/* 다음 우편번호는 <div><iframe> 구조로 들어온다 — 둘 다 레이어에 꽉 채운다 */
	#p3mo-zip .p3mo-zip-body > div,
	#p3mo-zip .p3mo-zip-body iframe {
		width: 100% !important; height: 100% !important; border: 0 !important; display: block;
	}
}
/* ==========================================================================
   11. 2026-08-25 [MU2608250050] — 폰 「우편번호찾기」 버튼 왼쪽 맞춤

     PC 에서는 버튼이 주소칸 «오른쪽 옆» 에 붙는 구조라 margin-left:10px 을 갖는다
     (실측 1440px : 주소칸 오른끝 922px · 버튼 왼끝 932px — 10px 은 «칸 사이 간격»).
     폰에서는 주소칸이 한 줄을 다 쓰므로 버튼이 «아랫줄» 로 내려오는데, 그 10px 이
     그대로 남아 주소칸보다 10px 안쪽에서 시작했다
     (실측 576px : 주소칸 왼끝 28px · 버튼 왼끝 38px).
     → 폰에서만 그 여백을 없애 «바로 위 주소칸의 왼쪽 세로줄» 과 맞춘다.

   ★버튼을 onclick 으로 집는다 — .btn_gray_board 는 다른 버튼(이메일인증 등)도
     함께 쓰는 이름이라, 그쪽 줄맞춤까지 건드리지 않기 위해서다.
     회원가입 · 사업자주소 · 주문 · 배송지 · 내정보의 우편번호 버튼이 모두 걸린다.
   ========================================================================== */
/* ★859px 이하 — «버튼이 아랫줄로 내려오는 구간» 전부(폰 + 좁은 태블릿).
   실측(회원가입) : 859px 까지는 아랫줄, 861px 부터는 주소칸 오른쪽 같은 줄.
   ★860px 은 «여백을 빼면 딱 들어맞는» 한 칸이라(줄 790 = 주소칸 607 + 버튼 183)
     여기까지 넣으면 두 칸이 «붙어» 버린다 → 경계를 859 로 둔다.
   같은 줄일 때의 10px 은 «칸 사이 간격» 이므로 그대로 두어야 한다. */
@media (max-width: 859px) {
	html body [onclick^="openNewAddr"],
	html body [onclick^="ordPostcode"],
	html body [onclick*="set_zipcode"],
	html body [onclick*="set_mobilezipcode"] {
		margin-left: 0 !important;
		/* ★2026-08-25 [MU2608250060] — 위 「주소 입력」 칸과 붙어 있던 것을 띄운다.
		   이 폼의 칸 사이 세로 간격은 10px 이다(실측 : 우편번호찾기→상세주소 10px ·
		   상세주소→생년월일 10px). 버튼이 «아랫줄» 로 내려올 때만 0px 이었다. */
		margin-top: 10px !important;
	}
}
/* ==========================================================================
   12. 2026-08-25 [MU2608250070] — 폰 알림창(alert)

     브라우저 기본 alert 은 «주소(도메인)가 큰 글씨로 박힌» PC 모양 창이라
     폰 화면에 어울리지 않는다. site_v2.js 가 폰 폭에서만 이 팝업으로 바꾼다.
     ★confirm / prompt 는 «값을 돌려줘야» 하는 창이라 건드리지 않았다.
     ★문구의 줄바꿈(\n)은 white-space:pre-line 으로 그대로 살린다.
   ========================================================================== */
#p3mo-alert { display: none; }

@media (max-width: 768px) {
	#p3mo-alert {
		position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9800;
		display: none; align-items: center; justify-content: center; padding: 24px;
	}
	#p3mo-alert.is-open { display: flex; }
	#p3mo-alert .p3mo-al-dim { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .45); }
	#p3mo-alert .p3mo-al-box {
		position: relative; width: 100%; max-width: 340px; box-sizing: border-box;
		background: #fff; border-radius: 16px; padding: 26px 20px 16px; text-align: center;
		box-shadow: 0 12px 40px rgba(20, 30, 60, .28); animation: p3moAlPop .16s ease-out;
	}
	@keyframes p3moAlPop { from { transform: scale(.94); opacity: .3; } to { transform: none; opacity: 1; } }
	#p3mo-alert .p3mo-al-tx {
		margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: #191f28;
		white-space: pre-line; word-break: break-word;
	}
	/* 알림(확인 1칸) / 확인창(취소·확인 2칸) — is-ask 가 붙으면 「취소」 가 보인다 (MU2608250080) */
	#p3mo-alert .p3mo-al-btns { display: flex; gap: 8px; }
	#p3mo-alert .p3mo-al-ok,
	#p3mo-alert .p3mo-al-no {
		flex: 1 1 0; min-width: 0; height: 48px; border: 0; border-radius: 12px; cursor: pointer;
		font-size: 15px; font-weight: 700; font-family: inherit; -webkit-tap-highlight-color: transparent;
	}
	#p3mo-alert .p3mo-al-ok { background: var(--p3-accent); color: #fff; }
	#p3mo-alert .p3mo-al-no { display: none; background: #f2f4f6; color: #4e5968; }
	#p3mo-alert.is-ask .p3mo-al-no { display: block; }
	#p3mo-alert .p3mo-al-ok:active, #p3mo-alert .p3mo-al-no:active { filter: brightness(.94); }

	/* 팝업이 떠 있는 동안 뒤 화면은 스크롤되지 않게 (우편번호 레이어의 잠금과 별개) */
	html.p3mo-alock, html.p3mo-alock body { overflow: hidden !important; }
}
/* ==========================================================================
   13. 2026-08-25 [MU2608250090] — 「내용보기」 팝업의 닫기(X)

     ★닫기 버튼은 «원래 있었다» — 다만 화면 밖에 있었다.
       .itaBox .close-all-menu 가 «position:absolute; right:-44px» 이라,
       팝업(.itaBoxWrap) 의 «바깥 오른쪽 44px» 에 붙는다. 화면이 넓으면 그 자리가
       남아서 보이지만, 좁으면 그대로 화면 밖으로 나간다.
       실측 : 390px → X 가 409~439px(화면 밖) · 576px → 595~625px(화면 밖) ·
              768px → 783~813px(화면 밖) · 900px 부터 화면 안.
       (닫는 동작 자체는 이미 onclick="closeIta(this)" 로 붙어 있다)

     ★팝업도 화면을 넘쳤다 — 실측 390px 에서 팝업 폭이 410px(문서폭보다 큼).
       X 를 팝업 «안» 으로 넣으려면 팝업부터 화면에 맞춰야 한다.

     그래서 880px 이하에서 —
       ① 팝업을 화면 폭에 맞추고(양옆 12px), 높이도 화면을 넘지 않게 해서
          내용만 스크롤되게 한다
       ② 닫기 X 를 팝업 «안» 오른쪽 위로 옮기고 손가락에 맞게 34px 로 키운다
     ★881px 이상(PC)은 예전 그대로다 — 그쪽은 X 가 화면 안에 잘 보인다.
   ========================================================================== */
@media (max-width: 880px) {

	html body .itaBox .itaBoxWrap {
		width: calc(100vw - 24px) !important;
		max-width: 560px !important;
		max-height: calc(100vh - 40px) !important;
		padding: 16px 14px !important;
		box-sizing: border-box !important;
		border-radius: 14px !important;
		display: flex !important; flex-direction: column !important;
		overflow: hidden !important;
	}
	/* 제목 — X 자리를 비워 둔다 */
	html body .itaBox .itaBoxWrap .itaBoxHead {
		flex: none !important;
		padding: 0 40px 12px 0 !important;
		font-size: 17px !important; line-height: 1.4 !important;
	}
	/* 본문만 스크롤 (원본은 height:500px 고정이라 화면을 넘긴다) */
	html body .itaBox .itaBoxWrap .itaBoxBody,
	html body .itaBox2 .itaBoxWrap .itaBoxBody {
		flex: 1 1 auto !important; min-height: 0 !important; height: auto !important;
		overflow: auto !important; -webkit-overflow-scrolling: touch;
	}
	html body .itaBox .itaBoxWrap .guide_wrap {
		height: auto !important; margin: 10px 0 !important; padding: 14px 12px !important;
	}
	html body .itaBox .itaBoxWrap p.check_notice { flex: none !important; }

	/* ★닫기 X — 팝업 «안» 오른쪽 위로.
	   ★이 아이콘(/images/close_2.png)은 «순백색» 이다(실측 : 불투명 픽셀 184개가 전부
	     255,255,255). 원래는 팝업 «바깥» 어두운 배경 위에 있어서 흰색이 맞았는데,
	     팝업 «안»(흰 바탕)으로 옮기면 그대로는 보이지 않는다
	     → invert 로 검게 뒤집고 옅은 회색 동그라미를 깔아 눈에 띄게 한다. */
	html body .itaBox .close-all-menu {
		position: absolute !important;
		top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important;
		width: 34px !important; height: 34px !important;
		display: grid !important; place-items: center !important;
		background: #f2f4f6 !important; border-radius: 50% !important;
		z-index: 5 !important; cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	html body .itaBox .close-all-menu:active { background: #e5e8eb !important; }
	html body .itaBox .close-all-menu img {
		width: 18px !important; height: 18px !important;
		filter: invert(1) !important;          /* 흰색 X → 검은색 */
	}
}
/* ==========================================================================
   14. 2026-08-25 [MU2608250100] — 페이징의 「다음」 이 세로로 쪼개지던 문제

     .paging a 가 «숫자 한 글자» 기준의 36x36 정사각형이다
     (width:36px · min-width:36px · 좌우 여백 8px씩 · box-sizing:border-box)
     → 글자칸이 36 − 16 = 20px 밖에 안 남는다.
     「다음」 은 14px 두 글자라 28px 쯤 필요해 들어가지 못하고
     «다 / 음» 두 줄로 쪼개진다(실측 : 줄수 2 · 다른 칸은 1).

     ★폭과 상관없이 늘 그랬다 — 폰(390px)뿐 아니라 PC(1440px)에서도 두 줄이다.
       그래서 이 규칙은 미디어쿼리 없이 «모든 폭» 에 적용한다.
     → 글자 수에 맞게 가로로 늘어나게 하고(width:auto), 숫자 칸은 min-width 로
       지금 크기(36px)를 그대로 지키며, 줄바꿈만 막는다.
     ★「이전 · 처음 · 끝」 처럼 글자로 된 다른 칸도 함께 고쳐진다.
   ========================================================================== */
html body .paging a {
	width: auto !important;
	min-width: 36px !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}
/* ==========================================================================
   15. 2026-08-25 [MU2608250110] — «PC 화면이 잠깐 보였다 사라지는» 문제

     원인 : 폰 크롬을 그리는 site_v2.js 는 defer 라 «문서를 다 읽은 뒤» 에 돈다.
       옛 PC 헤더를 숨기는 규칙이 .p3mo-on 에 걸려 있는데 그 클래스도 그때 붙으므로,
       그때까지는 PC 헤더가 그대로 보인다(실측 : 메인으로 이동 시 2.5초 넘게 노출).
     조치 : header.asp / main_header.asp 의 «head 에서 곧바로 도는 한 줄» 이
       폰 폭이면 <html> 에 p3mo-on 과 p3mo-boot 을 미리 붙인다.
       - p3mo-on   : 첫 그림부터 옛 PC 헤더가 숨는다(아래 4번 구역 규칙).
       - p3mo-boot : 폰 크롬이 아직 안 그려진 «그 사이» 를 지키는 흰 막대.
                     site_v2.js 가 다 그리면 지운다.
   ========================================================================== */
@media (max-width: 768px) {
	/* 폰 크롬이 그려지기 «전» 에도 상단 자리를 미리 비워 둔다 — 내용이 튀지 않게 */
	html.p3mo-boot body { padding-top: 56px !important; }
	/* 그 자리에 실제 상단바와 같은 «흰 막대» 를 미리 깔아 둔다(z-index 는 #p3mo 아래) */
	html.p3mo-boot::before {
		content: ''; position: fixed; top: 0; left: 0; right: 0; height: 56px;
		z-index: 9490; background: #fff; box-shadow: inset 0 -1px 0 #eef0f2;
	}
}