@charset "utf-8";
/* ==========================================================================
pro4(몰프로 데모몰 DEMOMALL) 반응형 레이어 /data/pro4/css/site_v2.css
2026-08-24 정희찬(PRO4) [MU2608240040]
무엇을 —
· 메인페이지(관리자 «메인 디자인템플릿» M_1599~M_1623)의 1200px 고정폭을
전부 «유동» 으로 바꾼다.
· 768px 이하에서는 /data/pro4/js/site_v2.js 가 그리는 «폰 전용 크롬»
(56px 상단바 · 메뉴 칩줄 · 왼쪽 서랍 · 하단 5탭바)을 쓰고 옛 PC 헤더는 숨긴다.
· 서브페이지의 «서브페이지상단관리(TSA_87 · TSA_88)» 와
«서브페이지하단관리(CSA_75 · CSA_64 · CSA_82)» 는 메인의 헤더/탑메뉴/카피라이트와
«같은 마크업» 이다(실측 : 이미지 파일명 3곳만 다르고 나머지 전부 일치).
그래서 이 파일 하나로 메인과 서브가 «같은 모양으로» 반응형이 된다.
★어떻게 — 관리자 디자인템플릿 HTML 은 한 글자도 고치지 않는다.
폭 제약만 CSS 로 풀고, 폰 크롬은 JS 가 «새로 그려 붙인다».
따라서 관리자 디자인관리에서 상단/하단/메인 내용을 바꿔도 계속 유효하다.
★특이도 주의 — 관리자 템플릿은 «본문 안 인라인 style» 로 폭을 박아 둔다.
인라인 style 블록은 head 의 외부 CSS 보다 «뒤» 라 같은 특이도로는 못 이긴다.
그래서 html body 를 앞에 붙이고 !important 를 같이 쓴다.
★적용 범위 : pro4 «한 사이트만».
/_include/header.asp 가 /data/{shop}/css/site_v2.css 를 «파일이 있을 때만» 읽고,
/main/main_header.asp 는 siteID='pro4' 일 때만 읽는다.
다른 쇼핑몰(pro3 · demo3 · rroys · endedit · labelon …)은 이 파일이 없어 무영향.
★공용 파일(/css/site_v2.css · /css/commonTotal.css ·
/common/inc/shop_legacy_responsive.css)은 건드리지 않았다.
브레이크포인트
~1439 : 고정폭 해제(유동) · 히어로 조작버튼 화면 안쪽으로
~1024 : 태블릿 (2단 → 1단, 진열 3열)
~768 : 폰 (전용 크롬, 진열 2열)
~480 : 좁은 폰 보정
되돌리기 : 이 파일 하나만 지우면 즉시 예전(고정폭 1200px) 상태로 돌아간다.
폰 크롬만 끄려면 /data/pro4/js/site_v2.js 를 지운다(CSS 는 남아도 무해 —
숨김 규칙이 전부 .p4mo-on 에 걸려 있고 그 클래스는 JS 가 붙인다).
========================================================================== */
/* ==========================================================================
0. 공통 — 어떤 폭에서도 내용이 화면을 밀어내지 못하게
========================================================================== */
img, video, iframe, embed, object { max-width: 100%; }
/* 폰 크롬이 쓰는 색 — 관리자 「사이트 테마 색상1」(pro4 = #00BE39)을 승계한다.
레거시 스킨 head 가 --sitecolor1 을, 리뉴얼 셸은 --wds-primary 를 내보낸다. */
:root { --p4-accent: var(--sitecolor1, var(--wds-primary, #00be39)); }
/* ==========================================================================
1. 1439px 이하 — 문서 고정폭 해제
pro4 는 head 인라인 CSS 에 html body{min-width:1200px;overflow-x:auto} 와
@media(max-width:1300px){html body .wrap_body{min-width:1200px}} 가 박혀 있다.
그 둘을 여기서 푼다.
========================================================================== */
@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=1200) — 내용이 없어 그냥 뺀다 */
#basisBody { display: none !important; }
/* 상단 툴바 iframe(자기 폭 100%) 은 그대로 두고 폭만 잠근다 */
html body iframe.top_iframe, html body iframe.bodyTopFrame { max-width: 100% !important; }
/* ── 서브페이지 본문 골격 ──────────────────────────────────────── */
html body .location, html body .locationBox,
html body .sub_contents, html body .sub_contents > .inner,
html body .sbc_width, html body .left_none,
html body .PageWrapSize, html body .right_section, html body .right_cont,
html body .member_wrap.width, html body .content_category {
width: 100% !important; min-width: 0 !important; max-width: 100% !important;
box-sizing: border-box !important; float: none !important;
}
/* ── 서브페이지상단관리(TSA) = 메인 헤더/탑메뉴와 같은 마크업 ──── */
html body .logoSearchWrap, html body .logoSearch,
html body .myListBox, html body .utilWrap, html body .utilBox,
html body .gnbWrap, html body .gnbBox, html body .submenu1_in,
html body .allMenuBox,
html body .scroll_gnb, html body .scroll_gnb .logoSearchWrap, html body .scroll_gnb .logoSearch,
/* ── 서브페이지하단관리(CSA) = 메인 카피라이트영역과 같은 마크업 ── */
html body .footer, html body .footer .links, html body .footer .contAuto,
html body .footer .adrCopyright, html body .footer .footerlogos {
width: 100% !important; min-width: 0 !important; max-width: 100% !important;
box-sizing: border-box !important;
}
/* 좌우 여백은 한 곳에서만 준다(이중 여백 방지) */
html body .logoSearch, html body .gnbBox,
html body .footer .contAuto, html body .footer .footerlogos {
padding-left: 16px !important; padding-right: 16px !important;
}
/* 헤더 안쪽 요소 — 로고/검색창이 남는 폭을 나눠 갖게 한다 */
html body .logoSearch .logo { width: 170px !important; margin-right: 16px !important; }
html body .logoSearch .search { float: left !important; max-width: 100% !important; }
html body .logoSearch .search input,
html body .scroll_gnb .search input { max-width: 100% !important; }
html body .logoSearch .searchComplete { max-width: 100% !important; }
/* GNB 는 항목이 많다 — 줄바꿈 대신 «옆으로 밀어» 보게 한다(모바일 관례) */
html body .gnbBox { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; }
html body .gnbBox::-webkit-scrollbar { height: 0; }
html body .gnbBox > ul { float: none !important; display: flex !important; }
html body .gnbBox > ul:first-child { float: none !important; }
html body .gnbBox > ul > li { flex: none !important; padding: 0 18px !important; }
/* 전체 카테고리 드롭다운 — 6열 고정을 화면 폭에 맞춘다 */
html body .allMenuBox div div.depth1_box { width: 33.333% !important; }
/* ── 우측 플로팅(날개메뉴 · 채팅버튼) — 화면 안쪽으로 붙인다 ────── */
html body .rightMenuWrap { right: 10px !important; left: auto !important; margin-left: 0 !important; transform: none !important; }
html body #rightFloating { right: 10px !important; left: auto !important; }
/* 넓은 표는 칸을 유지한 채 표 안에서만 넘긴다 */
html body .sub_contents table, html body .right_cont table, html body .PageWrapSize table { max-width: 100% !important; }
}
/* ==========================================================================
2. 메인 페이지 — 1200px 고정 블록을 전부 유동으로
각 진열의 «본문 안 인라인 style» 에 width:1200px 이 박혀 있다
(실측 : 1024px 창에서 문서폭 1236px → 가로스크롤).
========================================================================== */
@media (max-width: 1439px) {
html body .top_banner_wrap .top_banner_box,
html body .nowPdWrap .nowPdBox,
html body .cateListWrap .cateListBox,
html body .chanceWrap .chanceBox,
html body .timeSaleWrap .timeSaleBox,
html body .MDbestWrap .MDbestBox,
html body .midBannerWrap .midBannerBox,
html body .pickBdWrap .pickBdBox,
html body .eventBnWrap .eventBnBox,
html body .noticeWrap .noticeBox,
html body .tsWrap .tsCont {
width: 100% !important; min-width: 0 !important; max-width: 1200px !important;
margin-left: auto !important; margin-right: auto !important;
box-sizing: border-box !important;
}
/* 메인비주얼은 «화면 꽉 채우기»(min-width:1200/max-width:1920) 라 1200 으로 묶지 않는다 */
html body .visualWrap { min-width: 0 !important; width: 100% !important; }
html body .visualWrap .pageWrap { width: 100% !important; max-width: 1200px !important; box-sizing: border-box !important; }
/* 페이지네이션이 1120px 로 박혀 있다 — 좌우 화살표 80px 을 뺀 나머지로 */
html body .visualWrap .pageWrap .swiper-pagination { width: calc(100% - 80px) !important; }
html body .top_banner_wrap .btn_bn_close { right: 12px !important; left: auto !important; }
/* 스와이퍼는 자기 폭을 «계산» 하므로 상자만 열어 준다(트랙 폭은 안 건드린다) */
html body .timeSaleWrap .swiper-container,
html body .visualWrap.swiper-container { max-width: 100% !important; }
/* ★메인 비주얼의 조작버튼은 «화면 중앙 ± 695px», 왼쪽 카테고리 패널은 «중앙 −600px» 에
박혀 있다(left:50% + margin-left:-695px 방식). 화면이 1390px 보다 좁아지면 그대로
화면 밖으로 나간다. 1440px 이상에서는 원래 좌표 그대로라 PC 화면은 안 바뀐다. */
html body .visualWrap .prev {
left: 12px !important; right: auto !important; margin-left: 0 !important;
}
html body .visualWrap .next {
right: 12px !important; left: auto !important; margin-right: 0 !important;
}
html body .visualWrap .icon_tit_list {
left: 0 !important; right: auto !important; margin-left: 0 !important;
}
}
/* ==========================================================================
3. 1024px 이하 — 태블릿. 2단 배치를 1단으로, 진열 3열
========================================================================== */
@media (max-width: 1024px) {
/* 좌측메뉴 + 본문 2단 → 1단.
★바깥 상자(.LeftWrapSize · .PageWrapSize)까지 함께 풀어야 한다 —
안쪽만 100% 로 하면 «찌그러진 바깥 상자의 100%» 가 되어 좌측메뉴가 세로글씨로 눌린다. */
html body .LeftWrapSize, html body .cslnb_v2,
html body .left_section, html body .left_cont, html body .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; }
html body .right_section, html body .right_cont { width: 100% !important; float: none !important; margin-left: 0 !important; }
html body .location, html body .locationBox { padding-left: 14px !important; padding-right: 14px !important; }
html body .sub_contents, html body .right_cont, html body .PageWrapSize {
padding-left: 14px !important; padding-right: 14px !important;
}
/* 우측 날개메뉴는 이 폭부터 접는다 — 본문 읽기를 방해한다 */
html body .rightMenuWrap { display: none !important; }
/* ── 메인 진열 : 5열 → 3열 ─────────────────────────────────────────
원본은 li{width:19%;margin-right:1.25%} + last-child{margin-right:0} 이다.
열 수를 바꾸면 그 조합이 어긋나 마지막 칸이 줄을 넘긴다 → gap 으로 바꾼다. */
html body .nowPdWrap .nowPdBox ul,
html body .chanceWrap .chanceBox ul {
flex-wrap: wrap !important; gap: 22px 2% !important;
}
html body .nowPdWrap .nowPdBox ul li,
html body .nowPdWrap .nowPdBox ul li:last-child,
html body .chanceWrap .chanceBox ul li,
html body .chanceWrap .chanceBox ul li:last-child {
width: 32% !important; margin-right: 0 !important;
}
/* 추천 브랜드 5열 → 3열 */
html body .pickBdWrap .pickBdBox ul { flex-wrap: wrap !important; gap: 16px 2% !important; }
html body .pickBdWrap .pickBdBox ul li { width: 32% !important; margin-right: 0 !important; }
/* MD 추천 3열은 그대로 두되 마진을 gap 으로 정리 */
html body .MDbestWrap .MDbestBox ul { gap: 24px 2% !important; }
html body .MDbestWrap .MDbestBox ul li { width: 32% !important; margin-right: 0 !important; margin-bottom: 0 !important; }
/* 타임세일(별도 진열) 5열 → 3열 */
html body .tsWrap .tsCont .wvybstSlider { gap: 16px 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개씩 두 줄 */
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; }
html body .cateListWrap .cateListBox ul li img { max-width: 100% !important; }
/* 이벤트 배너 2개(50%+3% = 103% 로 원래 넘친다) */
html body .eventBnWrap .eventBnBox ul { flex-wrap: wrap !important; gap: 14px 3% !important; }
html body .eventBnWrap .eventBnBox ul li { width: 48.5% !important; margin-right: 0 !important; }
/* ── 서브하단(카피라이트) 2단 → 1단 ───────────────────────────── */
html body .footer .contAuto .footCopyright,
html body .footer .contAuto .footCopyright2,
html body .footer .contAuto .footCsInfo {
float: none !important; width: 100% !important; white-space: normal !important;
}
html body .footer .contAuto .footCsInfo { margin-top: 18px !important; }
html body .footer .links .contAuto { display: flex !important; flex-wrap: wrap !important; gap: 0 4px !important; line-height: 34px !important; }
html body .footer .links { line-height: 34px !important; padding: 8px 0 !important; }
html body .footer .links a { padding: 0 12px !important; }
/* ── 폼 요소 : 고정폭 input/탭박스가 좁은 화면을 밀어내지 않게 ──── */
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; }
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;
}
/* 회원가입 「휴대폰인증」 버튼이 입력칸을 덮지 않게 */
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; }
}
/* ==========================================================================
4. 768px 이하 — 폰.
여기서부터 «서브페이지상단관리(로고+검색+아이콘) · 탑메뉴(GNB)» 를 숨기고
/data/pro4/js/site_v2.js 가 그리는 폰 크롬(#p4mo)을 쓴다.
(숨김 규칙은 전부 .p4mo-on 에 걸려 있다 — 그 JS 가 html 태그에 붙이는 클래스라
JS 가 없으면 아무 것도 숨지 않는다.)
========================================================================== */
@media (max-width: 768px) {
/* ── 옛 PC 헤더/탑메뉴 숨김 (폰 크롬이 켜졌을 때만) ─────────────── */
.p4mo-on .logoSearchWrap,
.p4mo-on .gnbWrap,
.p4mo-on .scroll_gnb,
.p4mo-on .allMenuBox { display: none !important; }
/* 브레드크럼은 남기되 작게 */
html body .location .locationBox { font-size: 12px !important; padding: 6px 14px !important; }
/* ── 솔루션 운영자 툴바(iframe · 높이 27px) ───────────────────────
PC 폭에 맞춰 한 줄로 짜인 메뉴라 폰에서는 글자가 서로 겹쳐 읽을 수 없다
(실측 390px : 「대표운영자 님 / 로그아웃 / 견적의뢰 …」 가 3줄로 뭉개짐).
쇼핑몰 내용이 아니라 «솔루션 관리자용» 띠라서 폰에서만 접는다 — PC 는 그대로. */
html body iframe.top_iframe, html body iframe.bodyTopFrame { display: none !important; }
/* 히어로 : 왼쪽 카테고리 패널(191px)은 서랍(☰)이 대신하므로 접는다.
좌우 화살표도 폰에서는 손가락으로 넘기므로 뺀다. */
.p4mo-on .visualWrap .icon_tit_list,
.p4mo-on .visualWrap .prev,
.p4mo-on .visualWrap .next { display: none !important; }
/* 메인비주얼 : PC 는 «높이 400px 고정 + object-fit:cover» 라 폭이 좁아질수록 양옆이
잘린다. 폰(390px)에서는 배너의 40%만 보여 문구가 통째로 잘렸다(실측).
폰에서만 «이미지 원래 비율» 로 통째로 보여 준다 — 잘림 0.
★관리자에 모바일용(세로가 긴) 배너를 올리면 화면을 더 꽉 채운다(코드 수정 불필요). */
html body .visualWrap .visual_img li { height: auto !important; min-height: 0 !important; }
html body .visualWrap .visual_img img { height: auto !important; object-fit: contain !important; }
/* ── 히어로 아래 배너 제목줄(swiper-pagination) ──────────────────
원본은 «배너 개수만큼 1/n 씩 나눠 갖는» 고정 비율이라 8개가 되면 폰에서
한 칸이 38px 로 눌려 글자가 겹친다(실측 390px). 글자폭대로 늘리고
줄바꿈 대신 «옆으로 밀어» 보게 한다. 좌우 화살표는 손가락으로 대체. */
html body .visualWrap .pageWrap {
max-width: 100% !important;
overflow-x: auto !important; -webkit-overflow-scrolling: touch;
}
html body .visualWrap .pageWrap::-webkit-scrollbar { height: 0; }
html body .visualWrap .pageWrap .swiper-pagination {
position: static !important; width: auto !important; bottom: auto !important;
display: flex !important; white-space: nowrap !important;
}
html body .visualWrap .pageWrap .swiper-pagination .swiper-pagination-bullet {
width: auto !important; flex: none !important; padding: 0 14px !important;
}
html body .visualWrap .pageWrap .swiper-pagination .swiper-pagination-bullet span {
position: static !important; width: auto !important; transform: none !important;
line-height: 40px !important;
}
html body .visualWrap .pageWrap .swiper-button-prev,
html body .visualWrap .pageWrap .swiper-button-next { display: none !important; }
/* ── 메인 진열 2열 ─────────────────────────────────────────────── */
html body .nowPdWrap .nowPdBox ul,
html body .chanceWrap .chanceBox ul { gap: 20px 3% !important; }
html body .nowPdWrap .nowPdBox ul li,
html body .nowPdWrap .nowPdBox ul li:last-child,
html body .chanceWrap .chanceBox ul li,
html body .chanceWrap .chanceBox ul li:last-child { width: 48.5% !important; }
html body .MDbestWrap .MDbestBox ul { gap: 20px 3% !important; }
html body .MDbestWrap .MDbestBox ul li { width: 48.5% !important; }
html body .pickBdWrap .pickBdBox ul { gap: 14px 3% !important; }
html body .pickBdWrap .pickBdBox ul li { width: 48.5% !important; }
html body .tsWrap .tsCont .wvybstSlider { gap: 16px 3% !important; }
html body .tsWrap .tsCont .wvybstSlider li,
html body .tsWrap .tsCont .wvybstSlider li:nth-of-type(5n) { width: 48.5% !important; }
html body .eventBnWrap .eventBnBox ul { gap: 12px !important; }
html body .eventBnWrap .eventBnBox ul li { width: 100% !important; }
/* 카테고리 아이콘줄 4개씩 */
html body .cateListWrap .cateListBox ul { gap: 16px 4% !important; }
html body .cateListWrap .cateListBox ul li { width: 22% !important; }
html body .cateListWrap .cateListBox ul li img { width: 56px !important; height: auto !important; }
html body .cateListWrap .cateListBox ul li p { font-size: 12px !important; }
/* ── 섹션 좌우 여백 · 제목 크기 ────────────────────────────────────
★진열 상자가 «그 자체로 swiper-container» 인 곳(.timeSaleBox)은 안쪽 여백을 주면
그 칸으로 옆 슬라이드가 비쳐 보인다 — 여백은 바깥 Wrap 으로 옮긴다. */
html body .nowPdWrap, html body .chanceWrap, html body .MDbestWrap,
html body .pickBdWrap, html body .midBannerWrap, html body .timeSaleWrap {
padding-left: 12px !important; padding-right: 12px !important;
box-sizing: border-box !important;
}
html body .nowPdWrap .nowPdBox, html body .chanceWrap .chanceBox,
html body .MDbestWrap .MDbestBox, html body .pickBdWrap .pickBdBox,
html body .midBannerWrap .midBannerBox, html body .timeSaleWrap .timeSaleBox {
padding-left: 0 !important; padding-right: 0 !important;
}
html body .noticeWrap .noticeBox, html body .eventBnWrap .eventBnBox,
html body .cateListWrap .cateListBox, html body .tsWrap .tsCont {
padding-left: 12px !important; padding-right: 12px !important;
}
html body .nowPdWrap, html body .chanceWrap, html body .MDbestWrap,
html body .pickBdWrap, html body .eventBnWrap { margin: 28px 0 !important; }
html body .timeSaleWrap { margin: 28px 0 !important; padding-top: 24px !important; padding-bottom: 24px !important; }
html body .tsWrap { margin-top: 28px !important; }
html body .nowPdWrap .nowPdBox h1, html body .chanceWrap .chanceBox h1,
html body .MDbestWrap .MDbestBox h1, html body .pickBdWrap .pickBdBox h1,
html body .timeSaleWrap .timeSaleBox h1, html body .noticeWrap .noticeBox h1 {
font-size: 19px !important; margin-bottom: 14px !important;
}
html body .tsWrap .tsCont .titleSec h2 { font-size: 19px !important; margin-bottom: 12px !important; }
html body .MDbestWrap .title { font-size: 16px !important; }
html body .chanceWrap .title, html body .nowPdWrap .title { font-size: 15px !important; }
/* ── 넓은 표는 표 안에서만 가로 스크롤(칸을 부수지 않는다) ───────── */
html body .sub_contents table.tbl_type01,
html body .sub_contents table.cartTable,
html body .sub_contents table.orderTable,
html body .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, html body .footer .footerlogos { padding: 0 14px !important; }
html body .footer .adrCopyright { padding: 20px 0 !important; }
html body .footer .adrCopyright p,
html body .footer .footCopyright, html body .footer .footCopyright2,
html body .footer .footCsInfo { font-size: 12px !important; line-height: 20px !important; word-break: keep-all !important; }
html body .footer .footCsInfo ul { margin-bottom: 18px !important; }
html body .footer .footerlogos { margin-top: 18px !important; padding-top: 14px !important; }
html body .footer .footerlogos img { max-width: 100% !important; height: auto !important; }
html body .footer .links a { padding: 0 10px !important; font-size: 12px !important; }
/* 폰에서 가로 여백 축소 */
html body .location, html body .locationBox,
html body .sub_contents, html body .right_cont, html body .PageWrapSize {
padding-left: 12px !important; padding-right: 12px !important;
}
/* 페이징 — 「다음」이 두 글자로 쪼개져 두 줄이 되던 것 방지(실측 390px) */
html body .paging { flex-wrap: wrap !important; }
html body .paging a, html body .paging span, html body .paging strong {
white-space: nowrap !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 { padding: 12px 58px 12px 18px !important; font-size: 15px !important; }
html body #rightFloating .chatBtn .imgBox { width: 46px !important; height: 46px !important; background-size: 60% !important; }
}
/* ==========================================================================
5. 폰 크롬(#p4mo) — /data/pro4/js/site_v2.js 가 그리는 요소들의 옷
기준 : 56px 상단바 · 아이콘칸 44px · 장바구니 배지 16px · 메뉴칩줄 44px
★769px 이상에서는 아예 감춘다(PC 화면은 예전 그대로).
========================================================================== */
#p4mo, #p4mo-dim, #p4mo-drawer { display: none; }
@media (max-width: 768px) {
/* ── 고정 상단 묶음(띠배너 + 상단바 + 검색시트 + 칩줄) ───────────── */
#p4mo {
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;
}
/* 띠배너(관리자 콘텐츠)를 이 안으로 «옮겨» 담는다 — 내용을 지우지 않는다 */
/* ★display 는 절대 고정하지 말 것 — 관리자 띠배너의 닫기(X)는 jQuery slideUp() 이라
display 를 직접 만진다. display:block !important 를 걸면 닫기가 «먹지 않는다»(실측). */
#p4mo .p4mo-band { position: relative !important; width: 100% !important; padding: 0 !important; }
#p4mo .p4mo-band .top_banner_box { width: 100% !important; min-width: 0 !important; box-sizing: border-box; padding: 0 34px 0 12px !important; }
#p4mo .p4mo-band .top_banner_box p { font-size: 12px !important; line-height: 34px !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#p4mo .p4mo-band .btn_bn_close { top: 7px !important; right: 10px !important; }
.p4mo-bar { height: 56px; display: flex; align-items: center; gap: 2px; padding: 0 4px; box-sizing: border-box; }
.p4mo-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;
}
.p4mo-ico:hover, .p4mo-ico:active { color: var(--p4-accent); }
.p4mo-logo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding-left: 2px; }
.p4mo-logo a { display: flex; align-items: center; text-decoration: none; }
.p4mo-logo img { max-height: 26px; width: auto; max-width: 160px; display: block; }
.p4mo-logo .p4mo-logo-txt { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #191f28; text-decoration: none; }
.p4mo-badge {
position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px;
box-sizing: border-box; border-radius: 999px; background: var(--p4-accent); color: #fff;
font-size: 10px; line-height: 16px; font-weight: 700; text-align: center;
}
.p4mo-badge[hidden] { display: none; }
/* ── 서브페이지 상단바 : [← 뒤로가기] [페이지 제목] [검색][장바구니] ──────
https://endedit.com/product/list.asp?type=best 의 모바일 상단바와 같은 규격
(56px · 88px|1fr|88px 3칸 · 아이콘칸 44px · 제목 18px/700 가운데정렬).
★서브페이지에는 탑메뉴(칩줄)와 전체메뉴 서랍을 달지 않는다 — 2026-08-25 지시.
★마이페이지 · 고객센터 · 회원화면 · 장바구니/주문서는 오른쪽 아이콘을 «안 단다»
(JS 의 isBare() 판정). 제목은 3칸 격자라 아이콘이 없어도 가운데에 그대로 있다. */
.p4mo-bar-sub {
height: 56px; display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px;
align-items: center; padding: 0 4px; box-sizing: border-box;
}
.p4mo-back { justify-self: start; }
.p4mo-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;
}
.p4mo-right { display: flex; justify-content: flex-end; }
.p4mo-ico-rel { position: relative; }
/* 제목이 상단바에 들어갔으니 본문 위 브레드크럼은 겹쳐 읽힌다 — 폰에서만 접는다 */
.p4mo-sub-on .location { display: none !important; }
/* ── 메뉴 칩줄 (관리자 GNB 를 읽어서 그린다) ────────────────────── */
.p4mo-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;
}
.p4mo-chips::-webkit-scrollbar { height: 0; }
.p4mo-chips a {
flex: none; font-size: 15px; line-height: 44px; font-weight: 500;
color: #4e5968; text-decoration: none;
}
.p4mo-chips a.is-accent { color: var(--p4-accent); font-weight: 700; }
/* ── 검색 시트 (검색 아이콘을 누르면 내려온다) ───────────────────── */
.p4mo-search { display: none; padding: 8px 12px 12px; box-shadow: inset 0 -1px 0 #eef0f2; }
.p4mo-search.is-open { display: block; }
.p4mo-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; }
.p4mo-search input {
flex: 1 1 auto; min-width: 0; height: 42px; border: 0; outline: none; background: transparent;
font-size: 15px; color: #191f28;
}
.p4mo-search button {
flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
background: var(--p4-accent); color: #fff; display: grid; place-items: center; cursor: pointer;
}
/* ── 왼쪽 서랍 ───────────────────────────────────────────────────── */
#p4mo-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;
}
#p4mo-dim.is-open { opacity: 1; pointer-events: auto; }
#p4mo-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;
}
#p4mo-drawer.is-open { transform: none; }
html.p4mo-lock, html.p4mo-lock body { overflow: hidden !important; }
.p4mo-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; }
.p4mo-dw-top strong { font-size: 16px; font-weight: 700; color: #191f28; }
.p4mo-dw-auth { flex: none; display: flex; gap: 8px; padding: 12px 16px; }
.p4mo-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;
}
.p4mo-dw-auth a.is-primary { background: var(--p4-accent); color: #fff; }
.p4mo-dw-auth a.is-ghost { background: #f2f4f6; color: #333d4b; }
.p4mo-dw-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; }
.p4mo-dw-h { padding: 14px 16px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #8b95a1; }
.p4mo-cate > li { border-bottom: 1px solid #f2f4f6; }
.p4mo-cate .p4mo-row { display: flex; align-items: center; }
.p4mo-cate .p4mo-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; }
.p4mo-cate .p4mo-tg { flex: none; width: 46px; height: 46px; border: 0; background: transparent; display: grid; place-items: center; color: #8b95a1; cursor: pointer; }
.p4mo-cate .p4mo-tg svg { transition: transform .18s ease; }
.p4mo-cate .is-open .p4mo-tg svg { transform: rotate(180deg); }
.p4mo-cate .p4mo-sub { display: none; padding: 2px 0 10px; background: #fafbfc; }
.p4mo-cate .is-open .p4mo-sub { display: block; }
.p4mo-cate .p4mo-sub a { display: block; padding: 9px 16px 9px 28px; font-size: 14px; color: #4e5968; text-decoration: none; }
.p4mo-links a { display: block; padding: 12px 16px; font-size: 15px; color: #333d4b; text-decoration: none; border-bottom: 1px solid #f2f4f6; }
.p4mo-links a.is-accent { color: var(--p4-accent); font-weight: 600; }
/* ── 하단탭바(공용 부품 /common/inc/ee-bottomnav.js) 색 맞춤 ────── */
.ee-bn-i.is-on, .ee-bn-i.is-on:hover, .ee-bn-i.is-on:active { color: var(--p4-accent) !important; }
/* ══════════════════════════════════════════════════════════════════
★서브페이지 «카피라이트영역» 숨김 (2026-08-25 사용자 지시)
「모바일 반응형 서브페이지에서는 카피라이트 안나오게 해줘」
여기서 카피라이트 = © 한 줄이 아니라 «하단 푸터 영역 전체» 다 —
하단링크(회사소개·제휴문의·입점신청·1:1문의·개인정보처리방침·이용약관·이용안내) ·
회사정보(상호·대표·주소·사업자등록번호·통신판매신고·개인정보관리책임자) ·
고객센터/계좌정보 · 에스크로 고지 · 푸터 로고줄 · COPYRIGHT 줄 전부.
그 묶음이 곧 서브페이지하단관리의 .footer(CSA_64) 다.
★적용 범위 — «서브페이지» × «768px 이하» 뿐이다.
메인과 서브를 어떻게 구분하나 — 마크업이 «똑같아서» 클래스로는 못 가른다.
대신 «어느 디자인영역이 그렸는가» 를 본다. 서브 하단은 서브페이지하단관리
() 가, 메인 하단은 메인 디자인템플릿() 이
그리고, 그 이름표가 푸터를 감싼 div 의 «첫 자식» 으로 찍힌다.
그래서 CSA 이름표를 가진 상자 안의 푸터만 정확히 겨냥한다.
★공용 ASP 를 안 건드리는 방법이라, 다른 세션이 header.asp 를 덮어써도 살아남는다.
따라서 메인페이지의 카피라이트영역과 PC 폭 서브페이지는 그대로 나온다.
★마크업은 지우지 않고 display 로만 감춘다 — 되돌리기는 이 규칙 두 줄 삭제.
※법적 고지 — 사업자등록번호 · 통신판매업 신고번호는 전자상거래법상 표시의무가
있는 항목이다. 사용자 지시로 폰 화면에서만 감춘 것이며, PC 화면과
메인페이지에는 그대로 노출된다.
══════════════════════════════════════════════════════════════════ */
html body div:has(> a[name^="CSA_"]) .footer { display: none !important; }
/* :has() 를 모르는 구형 브라우저용 — /data/pro4/js/site_v2.js 가 같은 판정을 해서
html 에 p4-sub 를 붙인다(그쪽은 DOM 준비 후라 아주 잠깐 보였다 사라질 수 있다). */
html.p4-sub body .footer { display: none !important; }
/* 푸터가 빠진 만큼 아래 여백을 채운다 — 없으면 본문 마지막 줄(게시판 페이징 등)이
하단탭바(62px)와 1:1 채팅버튼에 가려진다(실측 : 고객센터 페이징이 덮였다). */
html body:has(a[name^="CSA_"]) .wrap_body,
html.p4-sub body .wrap_body { padding-bottom: 70px !important; }
}
/* 서브페이지 하단의 「모바일웹으로 이동하기」(60px 글씨) — /_include/copyright.asp 가
모바일 UA 일 때 찍는다. pro4 는 폰·태블릿에서도 이 반응형 화면을 쓰므로 뺀다.
★폭 조건 없이 끈다 — 아이패드처럼 «Mobile» UA 이면서 1024px 인 기기도 있다.
(메인페이지 쪽 같은 안내는 /main/main_real.asp 에서 pro4 를 제외해 아예 안 찍는다) */
html body .copyrightMobile { display: none !important; }
/* ==========================================================================
6. 600~768px — 가로로 든 폰 · 태블릿 세로(아이패드 768)
폰 크롬(상단바·서랍·탭바)은 그대로 쓰되 «진열만» 3열로 되돌린다.
2열로 두면 카드 하나가 370px 이 되어 문서가 31,000px 까지 길어졌다(실측 768px).
★위 768px 블록보다 «뒤» 에 와야 이긴다(같은 특이도 — 나중 것이 이긴다).
========================================================================== */
@media (min-width: 600px) and (max-width: 768px) {
html body .nowPdWrap .nowPdBox ul,
html body .chanceWrap .chanceBox ul { gap: 22px 2% !important; }
html body .nowPdWrap .nowPdBox ul li,
html body .nowPdWrap .nowPdBox ul li:last-child,
html body .chanceWrap .chanceBox ul li,
html body .chanceWrap .chanceBox ul li:last-child { width: 32% !important; }
html body .MDbestWrap .MDbestBox ul { gap: 22px 2% !important; }
html body .MDbestWrap .MDbestBox ul li { width: 32% !important; }
html body .pickBdWrap .pickBdBox ul { gap: 16px 2% !important; }
html body .pickBdWrap .pickBdBox ul li { width: 32% !important; }
html body .tsWrap .tsCont .wvybstSlider { gap: 16px 2.5% !important; }
html body .tsWrap .tsCont .wvybstSlider li,
html body .tsWrap .tsCont .wvybstSlider li:nth-of-type(5n) { width: 31.6% !important; }
html body .eventBnWrap .eventBnBox ul { gap: 14px 3% !important; }
html body .eventBnWrap .eventBnBox ul li { width: 48.5% !important; }
/* 카테고리 아이콘줄은 6개씩 */
html body .cateListWrap .cateListBox ul { gap: 16px 3.2% !important; }
html body .cateListWrap .cateListBox ul li { width: 14% !important; }
}
/* 480px 이하 — 좁은 폰 */
@media (max-width: 480px) {
.p4mo-chips { gap: 14px; padding: 0 12px; }
.p4mo-chips a { font-size: 14px; }
html body .cateListWrap .cateListBox ul li img { width: 48px !important; }
html body .tsWrap .tsCont .titleSec h2 { font-size: 18px !important; }
}