.footer .adrCopyright { height:250px; overflow:hidden } 로 «높이가 250px 에
못박혀» 있고, 그 안의 .footlogo / .footCopyright / .footlogo2 / .SNS 는 전부
position:absolute + margin-left:265px|730px · right:0 이다.
폰에서는 글이 여러 줄로 늘어 내용이 270px 이 되는데 상자는 250px 이라
구매안전(에스크로) 서비스 배너가 반쯤 잘려 나왔다(사용자 캡처).
서브페이지는 더 나쁘다 — 절대배치가 그대로라 .contAuto 높이가 0 이 되고
로고·주소·배너가 서로 겹친 채 250px 상자 밖으로 잘려 나갔다.
조치 : 폰(≤767px)에서만
① .footer / form / .adrCopyright / .contAuto 의 «고정 높이와 overflow:hidden» 해제
② 절대배치 4형제(.footlogo · .footCopyright · .footlogo2 · .SNS)를 흐름 배치로 되돌려
위에서 아래로 가운데 정렬 스택
③ 하단 고정 탭바에 마지막 줄이 가리지 않도록 아래 여백을 60px → 78px 로 넓힘
★범위 : 폰에서만. 데스크톱(≥768px) 푸터는 전혀 건드리지 않는다.
========================================================================== */
@media all and (max-width:1199px) {
/* ① 못박힌 높이·클리핑 해제 — 이게 「잘림」의 직접 원인이다 */
.footer,
.footer form,
.footer .adrCopyright,
.footer .adrCopyright .contAuto {
height: auto !important; min-height: 0 !important;
overflow: visible !important;
}
.footer .adrCopyright { padding: 18px 0 22px !important; box-sizing: border-box; }
.footer .adrCopyright .contAuto {
position: relative !important; display: block !important;
padding: 0 14px !important; box-sizing: border-box; text-align: center;
}
/* ② 절대배치 4형제 → 세로 스택 (margin-left:265px·730px, right:0 을 모두 무효화) */
.footer .adrCopyright .footlogo,
.footer .adrCopyright .footlogo2,
.footer .adrCopyright .footCopyright,
.footer .adrCopyright .SNS {
position: static !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
float: none !important; width: 100% !important; max-width: 100% !important;
margin: 0 0 12px !important; padding: 0 !important;
box-sizing: border-box; text-align: center;
}
.footer .adrCopyright .footlogo img,
.footer .adrCopyright .footlogo2 img { max-width: 210px; height: auto; }
.footer .adrCopyright .footCopyright {
line-height: 1.65 !important; font-size: 12px; word-break: keep-all;
}
.footer .adrCopyright .SNS { margin-bottom: 0 !important; font-size: 0; }
.footer .adrCopyright .SNS a { display: inline-block; margin: 0 !important; }
.footer .adrCopyright .SNS img { margin: 0 !important; max-width: 100%; height: auto; }
/* 사업자정보확인 버튼이 글줄 사이에서 눌리기 쉽게
★2026-09-04 [PD2609040130] 세로 위치 보정 — 이 버튼은 사업자 정보 «글줄 안»에 끼어
있는 inline-block 이다. 예전 값(margin 4px + line-height 20px + padding 2px)은 버튼
높이를 26px 로 만들어, 19.8px 짜리 글줄보다 커진 만큼 아래로 삐져나와 옆 글자와
높이가 안 맞고 윗줄을 덮었다. 게다가 원본이 vertical-align:top 이라 어긋남이 더 컸다.
→ 글줄 높이에 맞춰 낮추고 vertical-align:middle 로 «글줄 한가운데»에 놓는다. */
.footer .footCopyrightbtn {
display: inline-block;
margin: 0 0 0 4px !important; padding: 0 8px !important;
line-height: 18px !important; vertical-align: middle !important;
}
/* 푸터 링크바(1:1친절상담·이용약관·개인정보보호방침·제휴문의·배송결제안내·이용안내)
원본은 justify-content:flex-end 한 줄이라 폰에서 오른쪽이 잘렸다.
(메인은 main_resp_v2.css 가 이미 고쳐놨지만 서브페이지는 그대로였다 — 실측 확인) */
.footer .links { padding: 10px 0 !important; overflow: hidden; }
.footer .links .contAuto {
display: flex !important; flex-wrap: wrap !important;
justify-content: center !important; align-items: center;
gap: 6px 14px !important; padding: 6px 10px !important;
text-align: center; box-sizing: border-box;
}
.footer .links .contAuto > a { position: static !important; float: none !important; margin: 0 !important; white-space: nowrap; }
/* ④ 서브페이지 보정 (2026-09-04 767px 실측)
ⓐ .footer .links / .adrCopyright / form 에 폭 100% 를 못 박지 않으면 .adrCopyright 가
데스크톱 1200px 로 남아 오른쪽이 화면 밖으로 나간다(메인은 main_resp_v2.css 가 이미
하고 있었는데 서브 전용인 이 파일엔 빠져 있었다).
ⓑ 아래 여백은 .wrap_body 가 아니라 «body» 에 준다 — /cscenter/faq.asp 처럼
.wrap_body 로 감싸지 않는 페이지가 있어, .wrap_body 에만 주면 그런 페이지에서
에스크로 배너가 하단 탭바에 그대로 가려졌다(실측). */
.footer .links,
.footer .adrCopyright,
.footer form {
width: 100% !important; max-width: 100% !important; min-width: 0 !important;
box-sizing: border-box;
}
html body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
html body .wrap_body { padding-bottom: 0 !important; }
}
/* ==========================================================================
폰 고객센터(FAQ) 본문 — 좌측 빈여백·우측 쏠림 수정 2026-09-04 [PD2609040050]
---------------------------------------------------------------------------
문제 (390px 실측) : /cscenter/faq.asp 는 데스크톱 «좌측 LNB + 우측 본문» 2단 구조를
폰에서도 그대로 쓰고 있었다.
.LeftWrapSize → float:left, 폭 16%(390px 화면에서 62px) · 내용은 거의 비어 있음
.PageWrapSize → float:right, 폭 76.8%(300px) + margin-left:24px
그래서 왼쪽에 62 + 24 = 86px 짜리 빈 칸이 생기고 본문은 300px 로 눌려
오른쪽으로 쏠렸다 — 실측 본문 왼여백 90px / 오른여백 17px(글자는 화면 오른쪽
끝에 붙음).
조치 : 폰(≤767px)에서만 이 2단을 세로 스택으로 푼다.
· float 해제 + 폭 100% → 본문이 화면 전체를 쓴다
· 좌우 12px 안전 여백을 줘 글자가 화면 끝에 붙지 않게 한다
· 비어 있는 LNB 칸은 높이 0 이라 자연히 사라진다(내용이 있으면 본문 위에 쌓인다)
★적용 범위를 좁게 잡았다 : .LeftWrapSize ~ .PageWrapSize 라 «LNB 가 실제로 있는»
2단 페이지에만 걸린다. /product/sublist.asp 처럼 .PageWrapSize 만 단독으로 쓰는
페이지(이미 폭 100%·L0 로 정상)는 건드리지 않는다 — 12개 서브페이지 실측으로 확인.
★범위 : 폰에서만. 데스크톱(≥768px) 2단 레이아웃은 전혀 건드리지 않는다.
========================================================================== */
@media all and (max-width:1199px) {
/* 좌측 LNB 칸 : float 해제 · 폭 100% (비어 있으면 높이 0 이라 보이지 않는다) */
.LeftWrapSize {
float: none !important; width: 100% !important; max-width: 100% !important;
min-width: 0 !important; margin: 0 !important; box-sizing: border-box;
}
/* 그 뒤의 본문 칸 : float 해제 · 폭 100% · 좌우 안전여백 */
.LeftWrapSize ~ .PageWrapSize {
float: none !important; width: 100% !important; max-width: 100% !important;
min-width: 0 !important; margin: 12px 0 0 !important;
padding: 0 12px !important; box-sizing: border-box;
}
/* 안쪽 래퍼들도 폭 고정이 남지 않게 */
.LeftWrapSize ~ .PageWrapSize > .sub_contents,
.LeftWrapSize ~ .PageWrapSize .right_section,
.LeftWrapSize ~ .PageWrapSize .right_cont {
width: 100% !important; max-width: 100% !important; min-width: 0 !important;
margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box;
}
}
/* 아주 좁은 폰(≤430px)에서는 로고를 조금 더 줄여 검색창이 로고 옆에 그대로 남게 한다.
2026-09-04 [PD2609040090] */
@media all and (max-width:430px) {
.logoSearch .logo img { max-width: 120px; }
.logoSearch .search { flex: 1 1 140px; }
.logoSearch .search input[type="text"], .logoSearch .search .inputTxt { font-size: 12px; padding: 0 10px !important; }
}
/* ==========================================================================
폰 상품상세(product/content.asp) — 구매 영역이 화면 밖으로 나가던 문제
2026-09-04 [PD2609040100]
---------------------------------------------------------------------------
문제 (426px·390px 실측, 사용자 캡처) : 상품상세는 데스크톱 «좌 이미지 500px +
우 구매폼» 2단 레이아웃을 폰에서도 그대로 쓰고 있었다.
.productInfo .img_box → float:left; width:500px (화면폭보다 넓다)
.productInfo .infoWrap → padding-left:500px (★진짜 원인)
폰 폭 390px 에서 왼쪽 패딩만 500px 이라 구매폼의 «내용상자 폭이 0» 이 되고,
상품명·가격·옵션·총금액·장바구니/구매하기 버튼이 통째로 x=524~ 즉 «화면 밖»
으로 밀렸다. .wrap_body 의 overflow-x:hidden 이 그걸 잘라내서, 사용자에게는
「이미지 아래가 커다란 빈 칸」 으로만 보였다(오류도 안 나서 원인을 찾기 어렵다).
조치 : 폰(≤767px)에서만
① 남아 있던 고정 1200px 잔재(#basisBody · .location .locationBox)를 100% 로
② 2단(이미지|구매폼)을 세로 스택으로 풀고, 데스크톱용 큰 글자(상품명 28px ·
가격 40px)를 폰 크기로 줄인다
③ 선택옵션 카드의 수량조절·금액은 position:absolute(right:30px) 라 좁은 폭에서
상품명과 겹치므로 흐름배치(flex)로 되돌린다
④ 하단 탭메뉴(상세정보·상품문의·배송/교환·반품·상품평)와 그 안 게시판 표,
상품평 머리 요약(15%/10%/75% 3단)을 폰 폭에 맞춘다
★범위 : 폰에서만. 데스크톱(≥768px) 상품상세는 전혀 건드리지 않는다.
데스크톱 전용인 플로팅 구매카드(.pd-fcard)는 원래 1221px 이상에서만 켜지므로
이 블록과 겹치지 않는다.
되돌리기 : 이 블록을 지우면 원래대로 돌아간다.
========================================================================== */
@media all and (max-width:1199px) {
/* ── ① 페이지에 남은 「고정 1200px」 잔재 ─────────────────────────── */
.wrap_body table#basisBody { width: 100% !important; max-width: 100% !important; }
/* 상단 경로줄(홈 > 대분류 > 중분류 > 소분류). 메인스타일 템플릿의
.location .locationBox{width:1200px} 때문에 폰에서는 통째로 화면 밖에 있었다.
(사용자 캡처의 「GNB 와 상품이미지 사이 빈 흰 띠」가 이것이다) */
.location .locationBox {
width: 100% !important; max-width: 100% !important; box-sizing: border-box;
margin: 0 !important; padding: 6px 12px !important;
display: flex !important; flex-wrap: wrap; align-items: center;
justify-content: flex-start !important; gap: 6px;
text-align: left !important; line-height: 1.3 !important;
}
.location .locationBox > a { flex: 0 0 auto; margin: 0 !important; }
.location .locationBox .ui-selectmenu-button {
flex: 1 1 calc(50% - 18px); width: auto !important;
min-width: 0 !important; max-width: 100% !important;
margin: 0 !important; box-sizing: border-box;
}
.location .locationBox .ui-selectmenu-button .ui-selectmenu-text {
width: auto !important; margin-right: 22px !important; font-size: 13px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── ② 상품상세 카드 : 좌 이미지 + 우 구매폼 2단 → 세로 스택 ───────── */
.productInfo { padding: 0 !important; overflow: visible !important; }
.productInfo .img_box { float: none !important; width: 100% !important; }
.productInfo .img_box .img,
.productInfo .img_box .img li,
.productInfo .img_box .img li span.cutImgBox2 { width: 100% !important; }
.productInfo .img_box .img li img { width: 100% !important; height: auto !important; }
.productInfo .img_box .simg { width: 100% !important; margin: 12px 0 !important; }
.productInfo .img_box .swiper-button-next,
.productInfo .img_box .swiper-button-prev { top: auto !important; bottom: 96px !important; }
.productInfo .infoWrap { padding-left: 0 !important; }
.productInfo .infoWrap .infoBox { padding: 14px 14px 20px !important; }
/* 데스크톱용 큰 글자(28px 상품명 · 40px 가격)를 폰 크기로 */
.productInfo .infoWrap .infoBox h2 { font-size: 20px !important; line-height: 1.35 !important; }
.productInfo .infoWrap .infoBox h2 .newdname { font-size: 13px !important; }
.productInfo .infoWrap .infoBox .goods_subT { font-size: 13.5px !important; line-height: 1.5 !important; }
.productInfo .infoWrap .infoBox .prd_mkprc { font-size: 17px !important; line-height: 1.3 !important; }
.productInfo .infoWrap .infoBox .prd_prc { font-size: 26px !important; line-height: 1.35 !important; }
.productInfo .infoWrap .infoBox .prd_prc span.prd_prc_txt { font-size: 15px !important; }
.productInfo .infoWrap .infoBox .prd_prc em { font-size: 26px !important; }
/* ③ 선택한 옵션 카드 — 수량조절(.count_control)·금액(.prc)이 absolute(right:30px)
라 좁은 폭에서 상품명과 겹친다. 흐름배치로 되돌려 「이름 / 수량 · 금액」 두 줄로 */
.productInfo .optList .selected_option {
display: flex !important; flex-wrap: wrap; align-items: center;
gap: 8px 10px; padding: 14px !important;
}
.productInfo .optList .selected_option .neme { flex: 1 1 100%; }
.productInfo .optList .selected_option .neme .pTit { padding-right: 0 !important; }
.productInfo .optList .selected_option .count_control {
position: static !important; right: auto !important; top: auto !important; flex: 0 0 auto;
}
.productInfo .optList .selected_option .prc {
position: static !important; right: auto !important; top: auto !important;
margin-left: auto !important; flex: 0 0 auto;
}
.productInfo .optList .selected_option .btn_delete { top: 10px !important; right: 8px !important; }
.productInfo .infoBox .total_price { padding-right: 0 !important; line-height: 1.6 !important; }
.productInfo .infoBox .total_price span em { font-size: 24px !important; }
/* 찜 · 장바구니 · 구매하기 — 높이 70px/글자 18px/아이콘 35px 은 폰에서 두 줄로 깨진다 */
.productInfo .infoBox .btn_area { gap: 6px; }
.productInfo .infoBox .btn_area a {
height: 54px !important; line-height: 52px !important;
font-size: 15px !important; margin-left: 0 !important;
}
.productInfo .infoBox .btn_area a:first-child { width: 64px !important; flex: 0 0 64px !important; }
.productInfo .infoBox .btn_area a .iconfont { font-size: 20px !important; margin: -2px 4px 0 0 !important; }
/* ── ④ 하단 탭메뉴(상세정보 · 상품문의 · 배송/교환·반품 · 상품평) ──── */
/* ★content_v2.css 가 「.product_detail .tab01 > a{font-size:17px !important}」 를
이 파일 «뒤에» 로드해서 같은 특이도로는 진다 → .wrap_body 를 앞에 붙여 특이도를 올린다 */
.wrap_body .product_detail .tab01 > a {
font-size: 13px !important; line-height: 1.3 !important;
padding: 6px 2px !important; word-break: keep-all;
}
.wrap_body .product_detail .tab01 > a span { font-size: 13px !important; margin-left: 1px !important; }
.product_detail .tab01,
.product_detail .tab01_cont { padding-left: 10px !important; padding-right: 10px !important; }
/* 탭 안 게시판 표(상품문의·상품평) — 5칸이라 「번호」·「작성자」가 세로로 쪼개졌다 */
.tab01_cont table.board_list { font-size: 12.5px !important; margin-top: 18px !important; }
.tab01_cont table.board_list th {
padding: 10px 2px !important; font-size: 12px !important; white-space: nowrap;
}
.tab01_cont table.board_list td {
padding: 12px 3px !important; font-size: 12.5px !important; word-break: break-all;
}
.tab01_cont table.board_list tr.board_qa_box td .questions,
.tab01_cont table.board_list tr.board_qa_box td .answers { padding: 24px 14px 16px 46px !important; }
.tab01_cont .btn_board_right02 a { font-size: 13px !important; }
/* 상품평 머리 요약 — Reviews 15% / 점수 10% / 사진 75% 3단이라 글자가 겹쳤다 */
.reviwe_top_box { padding: 16px 14px !important; margin-bottom: 20px !important; }
.reviwe_top_box .poto_link { font-size: 13px !important; }
.reviwe_top_box .reviwe_top { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.reviwe_top_box .reviwe_top > div.Reviews {
width: auto !important; flex: 0 0 auto; text-align: left !important;
}
.reviwe_top_box .reviwe_top > div.total_score {
width: auto !important; flex: 0 0 auto; font-size: 24px !important;
}
.reviwe_top_box .reviwe_top > div.img_list {
width: 100% !important; flex: 1 1 100%; height: auto !important; text-align: left !important;
}
.reviwe_top_box .reviwe_top > div.img_list span.img { width: 88px !important; height: 88px !important; }
}
/* ==========================================================================
우측 공용 아이콘메뉴(#right_bn_wrap)가 본문을 덮던 문제 2026-09-04 [PD2609040110]
---------------------------------------------------------------------------
증상 : 창을 좁히면 오른쪽에 항상 떠 있는 세로 아이콘메뉴(로그인·장바구니·마이페이지·
최근본상품·TOP)가 본문 위로 올라와 상품 슬라이더 마지막 칸, 상품문의 표의
「답변」칸, 「나의글」 버튼 같은 것들을 가렸다.
원인 : 이 메뉴는 position:fixed; right:0; width:75px 으로 «창 오른쪽 끝»에
붙는다(base.css). 그런데 본문은 .contAuto 가 1200px 고정폭이라
창을 줄여도 좁아지지 않는다. 그래서 창이 «1200 + 75×2 = 1350px» 보다 좁아지는
순간부터 메뉴가 본문 오른쪽을 그대로 덮기 시작한다.
실측(상품상세 기준) — 1400px 겹침 0 · 1350px 겹침 0 · 1280px 35px ·
1200px 75px · 1024px 251px · 834px 441px · 768px 507px.
조치 : 자리가 없는 폭(≤1349px)에서는 이 메뉴를 감춘다. 1350px 이상에서는 예전 그대로다.
· 감춰도 기능은 그대로 남는다 — 로그인·장바구니·마이페이지는 상단 유틸바에,
최근본상품은 마이페이지에 있고, TOP 은 스크롤로 대신한다.
· 폰(≤767px)에서는 이미 감추고 있었다(위 767px 블록) — 그 규칙과 이어져
«본문을 덮지 않는 폭에서만 보인다» 로 규칙이 하나가 된다.
· 상품상세 플로팅 구매카드(.pd-fcard)는 이 메뉴의 실제 좌표를 읽어 자리를
잡는데(site_v2.js toolbarLeftEdge), 숨겨지면 폭 0 으로 읽혀 창 오른쪽 기준으로
자동 복귀한다 — 따로 손댈 것이 없다.
되돌리기 : 이 블록만 지우면 예전처럼 전 폭에서 메뉴가 뜬다.
========================================================================== */
@media (max-width: 1349px) {
#right_bn_wrap { display: none !important; }
}
/* ==========================================================================
반응형 분기점 확장 — 767px → 1199px 2026-09-04 [PD2609040120]
---------------------------------------------------------------------------
왜 : 창을 줄여도 768~1199px 구간에서는 반응형이 «전혀 걸리지 않아» 데스크톱
1200px 고정 레이아웃이 그대로 나왔다(가로 스크롤 + 오른쪽이 잘림).
위의 모든 @media 블록 분기점을 max-width:767px → max-width:1199px 로 넓혔다.
1200px 이상(본문 1200px 이 온전히 들어가는 폭)에서만 예전 데스크톱 그대로다.
여기서는 : 폰 기준으로 잡아둔 몇몇 «최대폭»만 넓은 창에 맞게 키운다.
========================================================================== */
@media all and (min-width:768px) and (max-width:1199px) {
/* 로고·검색창은 폰 기준(170px / 340px)이라 넓은 창에서 왼쪽에 몰려 보인다 */
.logoSearch .logo img { max-width: 220px !important; }
.logoSearch .search { max-width: 520px !important; }
.logoSearchWrap { padding: 12px 20px !important; }
.utilWrap .utilBox { padding-left: 20px !important; padding-right: 20px !important; }
/* 본문 좌우 안전여백도 조금 더 */
.LeftWrapSize ~ .PageWrapSize { padding: 0 20px !important; }
.location .locationBox { padding: 8px 20px !important; }
}
/* ★2026-09-04 [PD2609040120-b] 히어로 왼쪽에 세로 카테고리 목록이 겹쳐 보이던 것.
원본 .sTextCte 는 «position:absolute; left:50%; margin-left:-600px» 로 1200px 기준
왼쪽 끝에 붙이는 방식이라, 창이 1200px 보다 좁으면 화면 안쪽으로 들어와 배너 위에
글자만 걸쳐 보인다(폰에서는 -405px 로 화면 밖이라 우연히 안 보였을 뿐이다).
같은 목록이 상단 「전체보기」 카테고리 메뉴에 그대로 있으므로 좁은 폭에서는 감춘다. */
@media all and (max-width:1199px) {
.sTextCte { display: none !important; }
}
/* ==========================================================================
본문(에디터) 표가 좁은 화면에서 깨지고 «너무 크게» 나오던 문제
2026-09-04 [PD2609040140] · 같은 날 재작업 [PD2609040140-b]
---------------------------------------------------------------------------
증상 : 회사소개(page.asp?uid=419) 「주요납품병원」 4열 표가 좁은 폭에서
① 셀 글씨가 본문 글씨보다 크고 ② 표 자체가 세로로 너무 컸다.
원인 (실측) : 이 표는 «엑셀에서 붙여넣은» 표다.
① 셀 글씨가 = 24px 로 박혀 있다.
본문 다른 글씨는 16px 이라 표 안만 유독 크다.
② ★행 높이가 인라인으로 못박혀 있다 —
.footer .adrCopyright .SNS { text-align:center } 를 주고 있었는데
!important 를 안 붙였다. 디자인관리 템플릿이 body 안에서 쏟아내는
인라인