/* =========================================================
신세계단체복 - 모바일 최적화 반응형 CSS (한국형 / 햄버거)
---------------------------------------------------------
- header.php 의 "맨 마지막" 스타일시트로 로드할 것
- viewport 필수 변경:
- 모바일 햄버거 마크업/JS 는 mobile-header-snippet.php 참고
- 768px 이하 = 모바일 / 데스크탑 레이아웃·기능은 그대로 유지
========================================================= */
img { max-width: 100%; height: auto; }
/* 모바일 가로 스크롤(하단 스크롤바) 방지 - clip 은 sticky 헤더 안 깨짐 */
@media (max-width: 768px) {
html, body { overflow-x: clip; max-width: 100%; }
}
/* =========================================================
1. 모바일 전용 헤더 + 햄버거 드로어 (기본 숨김, 768↓ 표시)
========================================================= */
.m-header { display: none; }
.m-drawer { display: none; }
.m-overlay { display: none; }
@media (max-width: 768px) {
/* 데스크탑 헤더 3단 숨김 */
.top-nav,
.header-main,
.category-menu,
.category-menu + .overlay { display: none !important; }
/* 프로모 배너 얇게 */
.promo-banner { padding: 7px 0 !important; }
.promo-banner span { font-size: 12px !important; font-weight: 600 !important; }
.promo-banner .container { padding: 0 36px 0 12px !important; }
/* 모바일 상단바 [☰][로고][🔍🛒] */
.m-header {
display: flex; align-items: center; justify-content: space-between;
position: sticky; top: 0; z-index: 1100;
height: 50px; padding: 0 12px;
background: #fff; border-bottom: 1px solid #e5e5e5;
}
.m-ham { background: none; border: none; cursor: pointer; font-size: 22px; color: #222; line-height: 1; padding: 4px 6px; }
.m-logo img { width: 128px; display: block; }
.m-logo { margin-left: 35px; } /* 숫자 키울수록 오른쪽으로 이동 */
.m-header-icons { display: flex; align-items: center; gap: 16px; font-size: 19px; }
.m-header-icons a { color: #333; line-height: 1; }
/* 오버레이 */
.m-overlay {
display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 1190;
}
.m-overlay.open { opacity: 1; visibility: visible; }
/* 좌측 슬라이드 드로어 */
.m-drawer {
display: block; position: fixed; top: 0; left: 0; bottom: 0;
width: 80%; max-width: 300px; background: #fff;
transform: translateX(-100%); transition: transform .25s ease;
z-index: 1200; overflow-y: auto; box-shadow: 2px 0 14px rgba(0,0,0,.18);
}
.m-drawer.open { transform: translateX(0); }
.m-drawer-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px; background: #3267a6; color: #fff; font-size: 16px; font-weight: bold;
}
.m-drawer-close { background: none; border: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.m-drawer-auth { display: flex; border-bottom: 1px solid #eee; }
.m-drawer-auth a { flex: 1; text-align: center; padding: 13px 0; color: #333; font-size: 13px; font-weight: 500; border-right: 1px solid #eee; }
.m-drawer-auth a:last-child { border-right: 0; }
.m-drawer-nav a { display: block; padding: 13px 16px; color: #333; font-size: 14px; border-bottom: 1px solid #f1f1f1; }
.m-drawer-nav a:active { background: #f5f8ff; }
.m-drawer-sub { padding: 14px 16px 28px; }
.m-drawer-sub a { display: inline-block; margin: 0 6px 8px 0; padding: 7px 13px; border: 1px solid #ddd; border-radius: 16px; color: #555; font-size: 12px; }
.m-drawer-sub a.primary { background: #3267a6; color: #fff; border-color: #3267a6; }
}
/* =========================================================
2. 모바일 여백 축소 (한국형 밀도)
========================================================= */
@media (max-width: 768px) {
body .container,
body .tshirt-container,
body .training-container,
body .jacket-container,
body .vest-container,
body .hat-container,
body .tab-products-container,
body .footer-container { padding-left: 12px !important; padding-right: 12px !important; }
body .tshirt-section { padding: 14px 0 !important; }
body .training-section,
body .jacket-section,
body .vest-section,
body .hat-section { padding: 18px 0 !important; }
body .tab-products-section { padding: 22px 0 !important; }
body .footer-section { padding: 24px 0 !important; }
body .main-title,
body .tshirt-title,
body .training-title,
body .jacket-title,
body .vest-title,
body .hat-title { font-size: 18px !important; margin-bottom: 14px !important; }
body .tab-products-title { font-size: 19px !important; margin-bottom: 18px !important; }
body .main-slider { margin-bottom: 14px !important; border-radius: 6px !important; }
body .category-grid { margin-bottom: 14px !important; }
body .tshirt-grid { margin-bottom: 20px !important; }
}
/* =========================================================
3. 메인 슬라이더 (배너 안 잘리게 높이 auto)
========================================================= */
@media (max-width: 768px) {
body .main-slider { height: auto !important; min-height: 110px; }
body .main-slider .slide,
body .main-slider .slide > div { height: auto !important; }
body .main-slider img { width: 100%; height: auto; display: block; }
body .slider-nav { bottom: 8px; right: 8px; padding: 5px 9px; }
body .slider-pagination { font-size: 12px; margin: 0 6px; }
body .slider-btn { width: 24px; height: 24px; }
body .slider-indicators { bottom: 8px; left: 8px; }
}
/* =========================================================
4. 상단 카테고리 배너 그리드 (4열 → 2열)
========================================================= */
@media (max-width: 768px) {
body .category-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
}
/* =========================================================
5. 추천상품
========================================================= */
@media (max-width: 768px) {
body .categories-grid { gap: 10px !important; }
}
/* =========================================================
6. 티셔츠 - 모바일 2열 고정
========================================================= */
@media (max-width: 1024px) {
body .tshirt-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 768px) {
body .tshirt-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
body .tshirt-image { width: 100% !important; height: 160px !important; }
body .tshirt-details { padding: 10px !important; }
body .tshirt-description { font-size: 13px !important; height: 36px !important; }
body .tshirt-price { font-size: 15px !important; margin-bottom: 10px !important; }
body .tshirt-buttons { gap: 5px !important; }
body .tshirt-btn-green,
body .tshirt-btn-red { padding: 7px 2px !important; font-size: 11px !important; }
}
/* =========================================================
7. 트레이닝/자켓/조끼/유니폼 - 홍보박스 숨김 + 상품 2열
========================================================= */
@media (max-width: 1024px) {
body .training-products-grid,
body .jacket-products-grid,
body .vest-products-grid,
body .hat-products-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }
}
@media (max-width: 768px) {
body .training-layout,
body .jacket-layout,
body .vest-layout,
body .hat-layout { display: block !important; }
body .training-promo-box,
body .jacket-promo-box,
body .vest-promo-box,
body .hat-promo-box { display: none !important; }
body .training-products-grid,
body .jacket-products-grid,
body .vest-products-grid,
body .hat-products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
body .training-product-image,
body .jacket-product-image,
body .vest-product-image,
body .hat-product-image { height: 150px !important; }
}
/* =========================================================
8. 탭 섹션 - 모바일 2열
========================================================= */
@media (max-width: 768px) {
body .tab-menu { flex-wrap: wrap; gap: 4px; }
body .tab-item { padding: 9px 12px !important; font-size: 13px !important; }
body .tab-products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
body .tab-product-card { flex-direction: column !important; text-align: left; }
body .tab-product-image { width: 100% !important; height: 140px !important; }
body .tab-product-info { padding: 10px !important; }
body .tab-product-name { font-size: 12px !important; }
body .tab-product-price { font-size: 14px !important; }
}
@media (max-width: 480px) {
body .tab-product-image { height: 120px !important; }
}
/* =========================================================
9. 하단 프로모 배너 (주석처리분 복구 + 축소)
========================================================= */
@media (max-width: 768px) {
body .bottom-promo-banner { padding: 40px 0 !important; }
body .promo-banner-title { font-size: 22px !important; }
body .promo-banner-subtitle { font-size: 13px !important; }
}
@media (max-width: 480px) {
body .bottom-promo-banner { padding: 30px 0 !important; }
body .promo-banner-title { font-size: 18px !important; }
}
.bottom-banner-section { width: 100%; max-width: 1200px; }
/* =========================================================
10. 회사 푸터 (footer.php) - 모바일 컴팩트 / 한 열 / 작게
========================================================= */
@media (max-width: 768px) {
/* index 하단 4박스 푸터 */
body .footer-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
/* 상단 납품사례 배너 */
body .delivery-banner { padding: 12px 0 !important; }
body .delivery-container { gap: 10px !important; }
body .delivery-info { gap: 10px !important; }
body .delivery-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; }
body .delivery-title { font-size: 13px !important; margin-bottom: 2px !important; }
body .delivery-subtitle { font-size: 11px !important; line-height: 1.3 !important; }
body .delivery-products { gap: 5px !important; }
body .product-sample,
body .product-sample img { width: 52px !important; height: 52px !important; }
/* 네비 바 */
body .company-nav { padding: 6px 0 !important; }
body .nav-container { gap: 4px !important; padding: 0 12px !important; }
body .nav-item { font-size: 11px !important; padding: 6px 8px !important; min-height: 0 !important; background: transparent !important; }
/* 회사 정보 - 한 열, 작게, 좌측 정렬 */
body .company-info { padding: 14px 0 !important; }
body .info-container { grid-template-columns: 1fr !important; gap: 10px !important; text-align: left !important; padding: 0 14px !important; }
body .logo-section { align-items: flex-start !important; }
body .company-logo img { max-width: 120px !important; }
body .company-details { font-size: 11px !important; line-height: 1.6 !important; text-align: left !important; }
body .company-name { font-size: 12px !important; margin-bottom: 3px !important; }
body .detail-row { margin-bottom: 1px !important; }
/* 고객센터 / 무통장입금 - 가로 2열로 압축 */
body .contact-section { flex-direction: row !important; gap: 6px !important; align-items: stretch !important; }
body .contact-box { width: 50% !important; max-width: 50% !important; padding: 8px !important; box-shadow: none !important; border: 1px solid #eee; border-radius: 8px; }
body .contact-icon { width: 24px !important; height: 24px !important; font-size: 9px !important; margin: 0 0 5px 0 !important; }
body .contact-title { font-size: 11px !important; margin-bottom: 4px !important; text-align: left !important; }
body .contact-details { font-size: 10px !important; line-height: 1.45 !important; text-align: left !important; }
/* 저작권 */
body .copyright { padding: 10px 0 !important; }
body .copyright-text { font-size: 11px !important; padding: 0 14px !important; }
}
/* =========================================================
11. 서브페이지 고정폭 안전망 (레거시 클래스)
========================================================= */
@media (max-width: 1340px) {
.top_navbar,
.footer_bottom_bar { min-width: 0 !important; }
}
@media (max-width: 1130px) {
.all_wrap,
.body_center_wrap,
.top_navwrap,
.top_logoandsearch_wrap,
.header_allbrand_wrap,
.top_category_wrap,
.top_category_ul,
.list_right,
.right_thumbnail_wrap,
.paging_wrap,
.board_wrap_title,
.board_btns,
.login_wrap,
.idsearch_box,
.success_title,
[class$="_top_classify"],
[class$="_top_title"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
}
/* =========================================================
12. 메인 상품 이미지 안 잘리게 (전체 노출 / object-fit: contain)
========================================================= */
@media (max-width: 768px) {
/* 이미지 영역 배경 흰색 (남는 여백 깔끔하게) */
body .tshirt-image,
body .training-product-image,
body .jacket-product-image,
body .vest-product-image,
body .hat-product-image,
body .tab-product-image,
body .product-image { background: #fff !important; }
/* 이미지를 잘리지 않게 전체 표시 */
body .tshirt-image img,
body .training-product-image img,
body .jacket-product-image img,
body .vest-product-image img,
body .hat-product-image img,
body .tab-product-image img,
body .product-image img {
object-fit: contain !important;
width: 100% !important;
height: 100% !important;
}
}
/* =========================================================
13. 상품 상세페이지 (details_vest.php 등) - 모바일 대응
========================================================= */
@media (max-width: 768px) {
/* 좌우 플로팅 사이드 배너 숨김 */
body .main_quick1,
body .main_quick2 { display: none !important; }
/* 전체 래퍼 폭 해제 */
body .all_wrap,
body .body_center_wrap,
body .order1,
body .order7,
body .order7_1-exp {
width: 100% !important; max-width: 100% !important;
box-sizing: border-box; padding-left: 12px; padding-right: 12px;
}
/* 상단: 큰 이미지 + 상품정보 → 세로 배치 */
body .order1_img_wrap,
body .order1_exp_wrap { float: none !important; width: 100% !important; margin-right: 0 !important; }
body .order1_main { width: 100% !important; height: auto !important; }
body .order1_main img { width: 100% !important; height: auto !important; }
body .order1_suv { width: 100% !important; height: auto !important; }
body .order1_suv li { width: 60px !important; height: auto !important; }
body .order1_exp_title { font-size: 18px !important; }
/* 주문/견적 버튼 영역 → 전체폭, 가로 균등 분할 */
body .trade_btn_wrap { width: 100% !important; height: auto !important; }
body .trade_btn_group1,
body .trade_btn_group2 { width: 100% !important; height: auto !important; float: none !important; display: flex; gap: 8px; margin-bottom: 8px; }
body .trade_btn_group1 li,
body .trade_btn_group2 li { float: none !important; flex: 1 !important; width: auto !important; margin: 0 !important; }
/* 마크 인쇄 작업 지시서 폼 */
body .wrap_orderVest .left table { width: 100% !important; height: auto !important; }
body .wrap_orderVest table { width: 100% !important; }
body .wrap_orderVest input[type="text"],
body .wrap_orderVest input[type="password"],
body .wrap_orderVest textarea,
body section.mark input[type="text"],
body [id*="_teamname"] { width: 100% !important; box-sizing: border-box; }
body .wrap_orderVest select { max-width: 100% !important; }
body section.mark h4 { font-size: 18px !important; }
/* 하단 견적문의/주문 영역 - float·고정위치 해제 */
body .wrap_orderVest section.btn { float: none !important; position: static !important; left: auto !important; text-align: center; margin: 10px 0; }
body .wrap_orderVest div[style*="float:left"] { float: none !important; position: static !important; left: auto !important; width: 100% !important; }
/* 상세 탭(상품상세정보/사이즈가이드/교환반품/후기/문의) - 줄바꿈 */
body .order7_1, body .order7_2, body .order7_3, body .order7_4, body .order7_5 {
width: 100% !important; height: auto !important; display: flex; flex-wrap: wrap;
}
body .order7_1 li, body .order7_2 li, body .order7_3 li, body .order7_4 li, body .order7_5 li {
float: none !important; width: 33.33% !important; height: auto !important;
box-sizing: border-box; padding: 10px 2px; line-height: 1.3 !important;
font-size: 11px !important; text-align: center;
}
body .order7_1-exp table { width: 100% !important; }
}
/* =========================================================
14. 모바일 검색창 (헤더 🔍 토글)
========================================================= */
.m-search-bar { display: none; }
@media (max-width: 768px) {
/* 아이콘 영역 버튼 통일 */
.m-header-icons button {
background: none; border: none; color: #333;
font-size: 19px; line-height: 1; cursor: pointer; padding: 0;
}
/* 펼쳐진 검색창 (헤더 바로 아래 고정) */
.m-search-bar.open {
display: flex; gap: 6px;
position: sticky; top: 50px; z-index: 1090;
background: #fff; padding: 8px 12px;
border-bottom: 1px solid #e5e5e5;
}
.m-search-bar input {
flex: 1; height: 38px; padding: 0 12px;
border: 2px solid #3267a6; border-radius: 6px;
font-size: 14px; outline: none; box-sizing: border-box;
}
.m-search-bar button {
width: 44px; height: 38px; border: none;
background: #3267a6; color: #fff; border-radius: 6px;
font-size: 16px; cursor: pointer;
}
}
/* =========================================================
15. 상품 검색결과/목록 (search.php, list.php) - 모바일 2열
========================================================= */
@media (max-width: 768px) {
/* 결과 영역을 2열 그리드로 */
body .list_right {
width: 100% !important; max-width: 100% !important;
float: none !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
padding: 0 12px !important;
box-sizing: border-box;
}
/* 5개씩 끊긴 을 투명화 → 상품들이 끊김없이 2열로 흐름 */
body .right_thumbnail_wrap { display: contents !important; }
/* 상품 카드 */
body .right_thumbnail_list {
width: 100% !important; height: auto !important;
float: none !important; margin: 0 !important;
}
body .right_thumbnail_list .img_view {
width: 100% !important; height: 240px !important; /* 카드 이미지 영역 높이 */
}
body .right_thumbnail_list .img_view img {
width: 100% !important; height: 100% !important;
object-fit: contain !important; /* 안 잘리게 전체 표시 */
}
body .right_thumbnail_list > p { font-size: 12px !important; margin: 4px 0 !important; }
/* '등록된 데이터가 없습니다' 메시지는 2칸 전체 차지 */
body .list_right li[style*="1200px"] { grid-column: 1 / -1 !important; width: auto !important; }
/* 제목/정렬 줄 - 위(카테고리)·아래(상품) 간격 */
body .list_title {
height: auto !important;
overflow: hidden !important; /* 좌우 float(제목·select) 감싸기 */
padding: 0 12px !important;
margin: 14px 0 16px !important; /* 위=카테고리와 간격, 아래=상품과 간격 */
}
body .list_title p { line-height: 30px !important; font-size: 17px !important; }
body .list_title select { width: 110px !important; }
/* 상품 리스트 ↔ 페이징 간격 */
body .paging_wrap { margin-top: 28px !important; padding-bottom: 20px !important; }
body .paging_num { margin-top: 0 !important; }
}
/* =========================================================
16. 카테고리 칩 균등 그리드 (list.php)
========================================================= */
@media (max-width: 768px) {
/* 테이블을 풀어서 칩들을 균등 그리드로 */
body .list_category_wrap {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
gap: 6px !important;
width: 100%;
margin-bottom: 28px !important; /* 카테고리 ↔ 제목 간격 */
}
body .list_category_table,
body .list_category_table tbody,
body .list_category_table tr { display: contents !important; }
body .list_category_table td { display: block !important; padding: 0 !important; }
body .list_category_table td:empty { display: none !important; } /* 간격/줄바꿈용 빈 칸 숨김 */
body .list_category {
display: flex !important; align-items: center; justify-content: center;
width: 100% !important; max-width: none !important;
min-height: 42px !important; margin: 0 !important;
padding: 6px 8px !important; box-sizing: border-box;
font-size: 12px !important; line-height: 1.25 !important;
white-space: normal !important; word-break: keep-all;
border: 1px solid #e0e0e0 !important; border-radius: 8px !important;
background: #fff;
}
body .list_category_table td img { max-width: 100% !important; height: auto !important; }
}
/* =========================================================
17. 게시판 공통 (목록/글쓰기/보기) - 모바일
========================================================= */
@media (max-width: 768px) {
/* 공통 래퍼·테이블 폭 */
body .qna_wrap,
body .write_wrap,
body .review_detail_wrap,
body .board_wrap_title,
body .board_btns { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
body .qna_wrap table,
body .review_detail_wrap table { width: 100% !important; }
body .board_wrap_title p { font-size: 18px !important; }
/* ---- 목록 테이블: 번호 | 제목 | 날짜 만 표시 ---- */
body .qna_wrap th,
body .qna_wrap td { font-size: 12px !important; padding: 9px 5px !important; }
body .qna_title th:nth-child(3),
body .qna_title th:nth-child(5),
body .qna_question td:nth-child(3),
body .qna_question td:nth-child(5) { display: none !important; } /* 작성자·조회 숨김 */
body .qna_question td a { font-size: 13px !important; }
/* ---- 검색 박스: 세로로 ---- */
body .board_search_wrap table,
body .board_search_wrap tr,
body .board_search_wrap td { display: block !important; width: 100% !important; }
body .board_search_wrap select,
body .board_search_wrap input[type="text"] { width: 100% !important; height: 38px !important; box-sizing: border-box; margin-bottom: 6px !important; }
body .board_search_wrap button { width: 100% !important; height: 38px !important; }
/* ---- 글쓰기 폼: 라벨 칸만 글자폭으로 (테이블/에디터 구조 유지 → 겹침·에디터깨짐 없음) ---- */
body .write_wrap .board_td { width: 1% !important; white-space: nowrap !important; } /* 라벨 칸을 글자 크기로 축소 */
body .write_wrap .board_td p { margin-left: 8px !important; font-size: 13px !important; font-weight: 600; white-space: nowrap !important; }
body .write_wrap input[type="text"],
body .write_wrap input[type="password"],
body .write_wrap textarea { width: 100% !important; box-sizing: border-box; margin-left: 0 !important; }
body .write_wrap input[type="file"] { max-width: 100% !important; }
/* 에디터 등 내용이 화면폭을 넘지 않게 (가로 스크롤 방지) */
body .write_wrap td * { max-width: 100% !important; }
body .write_wrap iframe { max-width: 100% !important; }
/* ---- 보기(view) ---- */
body .review_detail_wrap td { word-break: break-all; }
body .review_detail_wrap textarea { width: 100% !important; box-sizing: border-box; }
body .review_detail_wrap div[style*="1000px"] { width: 100% !important; } /* 댓글 내용 1000px 고정 해제 */
body .review_detail_menu { text-align: center; }
/* ---- 페이징 가운데 정렬 ---- */
body .pagination-container { text-align: center; margin: 24px 0; padding-bottom: 20px; }
body .paging_num { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0 !important; padding: 0; }
body .paging_num li { list-style: none; }
}
/* =========================================================
18. 납품사례 갤러리형 게시판 (sellcase_list.php) - 모바일 2열 카드
========================================================= */
@media (max-width: 768px) {
/* 갤러리 테이블 → 2열 카드 그리드 */
body .sell_case_wrap {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
width: 100%;
padding: 0 12px;
box-sizing: border-box;
}
body .sell_case_wrap table,
body .sell_case_wrap tbody,
body .sell_case_wrap tr { display: contents !important; }
body .sell_case_wrap td { display: block !important; width: auto !important; height: auto !important; }
body .sell_case_wrap td[width="28"],
body .sell_case_wrap td:empty { display: none !important; } /* 카드 사이 간격용 빈 td 숨김 */
/* 카드 내부 250px 고정 해제 */
body .sell_case_wrap td ul,
body .sell_case_wrap td li { width: 100% !important; height: auto !important; box-sizing: border-box; }
body .sell_case_wrap td img { width: 100% !important; height: auto !important; display: block; }
body .sell_case_wrap td p { white-space: normal !important; }
}
/* =========================================================
19. 장바구니 (cart.php) - 모바일
========================================================= */
@media (max-width: 768px) {
/* 주문단계(01·02·03) - 제목 아래로, 작게 */
body .cart_top_title { height: auto !important; }
body .cart_top_title .left { float: none !important; display: block; font-size: 18px !important; margin-bottom: 8px; }
body .cart_top_title .right { float: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
body .cart_top_title .right li { font-size: 11px !important; }
body .cart_top_title .right span img { height: 10px !important; width: auto !important; }
/* 장바구니 표: 폭 해제 + 축소 + 적립금 칸 숨김 */
body form table[style*="1102px"] { width: 100% !important; }
body form table[style*="1102px"] th,
body form table[style*="1102px"] td { font-size: 11px !important; }
body form table[style*="1102px"] tr > td:nth-child(4) { display: none !important; } /* 적립금 칸 숨김 */
body form table[style*="1102px"] td img[width="60"] { width: 48px !important; height: 48px !important; }
body form table[style*="1102px"] td p { margin: 4px 0 4px 6px !important; word-break: break-all; }
body form table[style*="1102px"] input[name="ea[]"] { width: 34px !important; }
/* 합계 영역 - 세로로 우측 정렬, 장식 이미지 숨김 */
body .cart_result_exp { width: 100% !important; }
body .cart_result_inner { display: flex !important; flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
body .cart_result_inner > div { float: none !important; }
body .cart_result_inner > div:not([class*="result"]) { display: none !important; }
/* 하단 버튼 - 모바일: 전체폭 / 색 구분 / 텍스트 보이게 */
body .under_wrap { width:100%;display: block !important; padding: 0 12px !important; height: auto !important; float: none !important; overflow: visible !important; }
body .under_wrap .under_left_btn,
body .under_wrap .under_right_btn,
body .under_wrap .under_right_btn li {
float: none !important; width: 100% !important; max-width: 100% !important;
margin: 0 0 8px 0 !important; padding: 0 !important; height: auto !important;
background: none !important; background-image: none !important; list-style: none !important;
}
body .under_wrap .under_left_btn p,
body .under_wrap .under_right_btn p {
margin: 0 !important; padding: 0 !important; height: auto !important;
background: none !important; background-image: none !important;
}
body .under_wrap .under_left_btn a,
body .under_wrap .under_right_btn a {
display: block !important; width: 100% !important; box-sizing: border-box !important;
text-align: center !important; padding: 15px 0 !important; height: auto !important;
font-size: 15px !important; font-weight: 600 !important; line-height: normal !important;
border-radius: 6px !important; text-decoration: none !important;
background-image: none !important;
}
body .under_wrap .under_left_btn a { background-color: #6b7280 !important; color: #fff !important; } /* 선택 상품 삭제 = 회색 */
body .under_wrap .under_right_btn a { background-color: #2196F3 !important; color: #fff !important; } /* 주문 = 파랑 */
}
/* =========================================================
20. 주문서 작성/결제 (order.php) - 모바일
========================================================= */
@media (max-width: 768px) {
/* 주문단계(01·02·03) */
body .order_top_title { height: auto !important; }
body .order_top_title .left { float: none !important; display: block; font-size: 18px !important; margin-bottom: 8px; }
body .order_top_title .right { float: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
body .order_top_title .right li { font-size: 11px !important; }
body .order_top_title .right span img { height: 10px !important; width: auto !important; }
/* 합계 박스 - 빈 공간 제거 + 세로 우측정렬 */
body .order_result_exp { width: 100% !important; height: auto !important; min-height: 0 !important; background-image: none !important; }
body .order_result_inner { display: flex !important; flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
body .order_result_inner > div { float: none !important; }
body .order_result_inner > div:not([class*="result"]) { display: none !important; }
body .order_result_title { padding: 0 12px; }
/* 정보 박스 - 넘침 차단 */
body .customer_information1_wrap,
body .customer_information2_wrap,
body .customer_information3_wrap,
body .customer_information4_wrap { width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box; }
body [class^="customer_information"] * { max-width: 100% !important; box-sizing: border-box !important; }
/* 라벨 컬럼(좁게) + 입력 컬럼(나머지) - 행 높이는 그대로 둬서 정렬 유지 */
body .customer_information1_left,
body .customer_information2_left,
body .customer_information3_left { float: left !important; width: 100px !important; }
body .customer_information1_right,
body .customer_information2_right,
body .customer_information3_right { float: left !important; width: calc(100% - 100px) !important; }
/* 결제정보 포인트/적립금 행 - 겹침 해결 (좌우 같은 높이 + 세로 스택) */
body .customer_information3_left li:nth-child(4),
body .customer_information3_left li:nth-child(5),
body .customer_information3_right li:nth-child(4),
body .customer_information3_right li:nth-child(5) { padding-top:10px;height: 80px !important; overflow: visible !important; }
body .customer_information3_right li:nth-child(4) > div,
body .customer_information3_right li:nth-child(5) > div {
float: none !important; display: block !important; clear: both !important;
margin: 0px 0 0 8px !important; height: auto !important; overflow: visible !important;
}
body .customer_information3_right input.money { width: 100px !important; float: left !important; margin: 0 !important; }
body .customer_information3_right li:nth-child(4) p,
body .customer_information3_right li:nth-child(5) p { font-size: 11px !important; }
body .customer_information1_left li p,
body .customer_information2_left li p,
body .customer_information3_left li p { font-size: 11.5px !important; padding-top:20px;padding-left: 0px !important; white-space: normal !important; word-break: keep-all; line-height: 1.3 !important; }
/* 입력칸/셀렉트 폭 (체크박스·라디오·버튼 제외) */
body [class^="customer_information"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not(.money),
body [class^="customer_information"] select,
body [class^="customer_information"] textarea {
width: calc(100% - 14px) !important; margin-left: 7px !important; margin-right: 0 !important;
}
body .customer_information4 li { overflow: visible !important; height: auto !important; }
body #paytype_1 { height: auto !important; padding-bottom: 12px; }
/* 배송정보 - 받으실 곳(우편번호/주소) 행 정리 (160px 높이는 유지) */
body .customer_information2_right input[type="button"] { float: left !important; margin: 0 0 0 6px !important; }
body .customer_information2_right #zipcode { width: calc(100% - 120px) !important; margin: 0 0 0 7px !important; float: left !important; }
body .customer_information2_right #address,
body .customer_information2_right #road_address { clear: both !important; float: none !important; display: block !important; margin: 8px 0 0 7px !important; }
/* 최종 결제금액 / 결제하기 버튼 */
body .order_result1_wrap { width: 100% !important; box-sizing: border-box; padding: 0 12px; overflow: hidden; }
body #paybtn { float: none !important; width: calc(100% - 24px) !important; max-width: 500px; margin: 12px auto 0 !important; }
body #paybtn a { color: #fff !important; display: block !important; }
/* 결제 동의문 + 결제하기 버튼 영역 (안 줄어드는 것 해결) */
body .order_last_wrap {
width: 100% !important; max-width: 100% !important;margin:50px auto;
box-sizing: border-box !important; padding: 0 12px !important; overflow: hidden !important;
}
body .order_last_wrap > div:first-child {
width: 100% !important; height: auto !important; box-sizing: border-box; overflow: hidden;
}
body .order_last_wrap > div:first-child p { float: none !important; display: block; line-height: 0.8 !important; }
body #paybtn {
float: none !important; width: 100% !important; max-width: 500px;
height: 54px !important; margin: 12px auto 0 !important;
}
body #paybtn a { color: #fff !important; display: block !important; line-height: 54px !important; }
}
/* =========================================================
21. 폼·버튼 반응형 마무리 (모든 화면폭 대응)
========================================================= */
@media (max-width: 768px) {
/* 게시판 글쓰기 이전/저장 버튼 - 크게, 나란히 전체폭 */
body .write_wrap div[style*="206px"] {
width: 100% !important; display: flex !important; gap: 8px;
padding: 0 12px; box-sizing: border-box; margin: 0 0 10px !important;
}
body .write_wrap div[style*="206px"] input[type="button"] {
flex: 1 !important; width: auto !important; height: 46px !important;
}
/* 모든 폼 버튼 최소 탭 높이 보장 */
body #paybtn { height: 54px !important; line-height: 54px !important; }
body #paybtn a { line-height: 54px !important; }
}
/* 소형 휴대폰 (≤480px) - 라벨/표 더 압축 */
@media (max-width: 480px) {
body .customer_information1_left,
body .customer_information2_left,
body .customer_information3_left { width: 84px !important; }
body .customer_information1_right,
body .customer_information2_right,
body .customer_information3_right { width: calc(100% - 84px) !important; }
body .customer_information1_left li p,
body .customer_information2_left li p,
body .customer_information3_left li p { font-size: 11px !important; }
body form table[style*="1102px"] th,
body form table[style*="1102px"] td { font-size: 10.5px !important; padding: 7px 3px !important; }
body .customer_information2_right #zipcode { width: calc(100% - 112px) !important; }
}
/* 초소형 휴대폰 (≤360px) - 라벨 칸 한번 더 압축 */
@media (max-width: 360px) {
body .customer_information1_left,
body .customer_information2_left,
body .customer_information3_left { width: 74px !important; }
body .customer_information1_right,
body .customer_information2_right,
body .customer_information3_right { width: calc(100% - 74px) !important; }
}
/* ===== 22. order.php 결제수단 선택 (customer_information4) ===== */
body .customer_information4_wrap { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
body .customer_information4 { width: 100% !important; box-sizing: border-box; }
/* 핵심: 각 li가 내부 float를 품게 → 행끼리 안 겹침 */
body .customer_information4 > li {
width: 100% !important; box-sizing: border-box;
height: auto !important; min-height: 0 !important;
clear: both !important; overflow: hidden !important;
}
/* 결제수단 라디오 줄: 라벨 높이 줄여 컴팩트하게 */
body .customer_information4 > li:first-child input[type="radio"] { margin: 12px 6px 12px 12px !important; }
body .customer_information4 > li:first-child p { line-height: 40px !important; }
/* 무통장 입금 상세 (#paytype_1) */
body #paytype_1 { padding: 8px 0 14px !important; }
body #paytype_1 > div { height: auto !important; margin: 8px 0 0 12px !important; overflow: hidden !important; }
body #paytype_1 #bankuser { width: 160px !important; }
body #paytype_1 select[name="bankname"] { width: calc(100% - 90px) !important; max-width: 280px !important; }
/* 현금영수증/계산서 (#paytype_2): 제목 한 줄, 라디오는 아래로 */
body #paytype_2 > p { float: none !important; display: block !important; line-height: 28px !important; margin: 8px 0 4px 12px !important; }
body #paytype_2 > div { float: left !important; height: auto !important; margin: 6px 28px 6px 12px !important; }
@media (max-width: 768px) {
/* ===== 23. 주문완료 페이지 (success_exp) ===== */
body .success_big_icon { padding: 18px 12px !important; text-align: center !important; }
body .success_big_icon p { font-size: 18px !important; line-height: 1.4 !important; }
body .success_big_icon span { font-size: 14px !important; }
body .success_exp_wrap { width: 100% !important; box-sizing: border-box; padding: 0 5px; }
body .success_exp {
width: 100% !important; margin-bottom: 20px !important;
font-size: 12px !important; table-layout: fixed;
}
body .success_exp td { overflow-wrap: break-word; word-break: break-word; }
body .success_exp td:first-child { width: 30% !important; padding: 8px 4px !important; }
body .success_exp td:nth-child(2) { width: 70% !important; padding-left: 3% !important; }
body .success_exp img { display: inline-block; vertical-align: middle; max-width: 16px; }
body .success_btn { text-align: center !important; padding: 0 12px !important; }
body .success_btn a {
display: block !important; width: 100% !important; max-width: 100px;
margin: 0 auto !important; box-sizing: border-box !important;
}
}
@media (max-width: 768px) {
/* ===== 24. 마이페이지 메인 (mypage.php) ===== */
body .mypage_ordering_wrap, body .mypage_latelyorder_wrap, body .mypage_latelyproduct_title { width: 100% !important; box-sizing: border-box !important; }
body .mypage_ordering_title, body .mypage_latelyorder_title { padding: 0 12px !important; box-sizing: border-box; }
body .mypage_ordering_title p, body .mypage_latelyorder_title p { float: none !important; line-height: 1.5 !important; }
body .mypage_latelyorder_title p[style*="float:right"] { float: right !important; }
/* 진행중인 주문 - 모바일 정리 */
body .mypage_ordering_exp { width: 100% !important; height: auto !important; box-sizing: border-box; padding: 12px !important; }
/* 상태 동그라미: 화살표 숨기고 3열 그리드(3+3) */
body .mypage_ordering_exp .left { width: 100% !important; height: auto !important; float: none !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; }
body .mypage_ordering_exp .left > li:has(img) { display: none !important; }
body .mypage_ordering_exp .left > li { width: 33.333% !important; margin: 0 0 12px !important; box-sizing: border-box; }
body .mypage_ordering_exp .left > li > ul { width: 100% !important; }
body .mypage_ordering_exp .left > li > ul > li { width: 100% !important; height: auto !important; margin: 0 !important; text-align: center; }
body .mypage_ordering_exp .left > li > ul > li > div { margin: 6px auto !important; }
/* 취소/교환/반품: 오른쪽 잘림 방지(패딩) */
body .mypage_ordering_exp .right {
width: 100% !important; height: auto !important; float: none !important;
border-left: 0 !important; border-top: 1px dotted #d2d2d2 !important;
margin: 6px 0 0 !important; padding: 12px 0 0 !important; box-sizing: border-box;
}
body .mypage_ordering_exp .right li { overflow: hidden !important; padding: 7px 12px !important; box-sizing: border-box; }
body .mypage_ordering_exp .right li .floatL { float: left !important; }
body .mypage_ordering_exp .right li .floatR { float: right !important; }
/* 최근 주문정보: 칸이 많아 가로 스크롤 처리 */
body .mypage_latelyorder_exp { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
body .mypage_latelyorder_exp > li { min-width: 1059px !important; }
body .mypage_latelyorder_exp > li > ul { white-space: nowrap !important; }
/* 최근 견적정보 표 */
body .goodslist { width: 100% !important; font-size: 12px !important; }
body .goodslist th, body .goodslist td { word-break: break-all; }
/* 최근 본 상품: 2열 */
/* 최근 본 상품 - 모바일 2열 + 이미지 정리 */
body .goods-view-container { margin-left: 0 !important; padding: 10px 12px !important; }
body .goods-grid { gap: 12px !important; }
body .goods-item { width: calc(50% - 6px) !important; }
body .goods-image {
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 4 !important;
object-fit: contain !important;
background: #fff !important;
}
/* ===== 26. 주문내역/배송조회 (order_view.php) ===== */
/* 상단 상품 표 */
body .mypage_latelyorder_wrap > table { width: 100% !important; font-size: 12px !important; }
body .mypage_latelyorder_wrap > table td { word-break: break-all; }
body .mypage_latelyorder_wrap > table img { max-width: 60px; height: auto; }
body .mypage_latelyorder_wrap > table li[style*="240px"] { width: 100% !important; box-sizing: border-box; }
/* 주문고객정보 / 배송지정보 두 표 → 세로로 쌓기 */
body .body_center_wrap td[width="1%"] { display: none !important; }
body .body_center_wrap td[width="49%"],
body .body_center_wrap td[width="50%"] { display: block !important; width: 100% !important; box-sizing: border-box; }
/* 결제정보 표(tb01) */
body .tb01 { width: 100% !important; font-size: 12px !important; }
body .tb01 th, body .tb01 td { word-break: break-all; padding: 4px !important; }
body .tb01 .tdr, body .tb01 th { width: auto !important; }
/* 목록보기 버튼 */
body .body_center_wrap ul[style*="width:100%"] button { width: 100% !important; max-width: 200px; box-sizing: border-box; }
/* ===== 25. 등급/마일리지/예치금 박스 (mypage_vip_wrap) ===== */
body .mypage_vip_wrap:not([style*="none"]) {
width: 100% !important; height: auto !important;
display: flex !important; flex-wrap: wrap !important;
align-items: center !important; justify-content: center !important;
box-sizing: border-box; padding: 10px !important;
}
body .mypage_vip_wrap > li { margin: 8px !important; height: auto !important; float: none !important; }
body .mypage_vip_wrap > li[style*="210px"] { width: calc(33.333% - 16px) !important; box-sizing: border-box !important; }
body .mypage_vip_wrap > li[style*="210px"] ul li { width: 100% !important; height: auto !important; }
body .mypage_vip_wrap img { max-width: 100% !important; height: auto; }
/* 등급혜택안내 팝업: 모바일 화면 안으로 */
body .mypage_vip_wrap #rat ul, body .mypage_vip_wrap #rat ul li { position: static !important; top: auto !important; left: auto !important; width: 100% !important; }
body .mypage_vip_wrap #rat table { width: 100% !important; }
}
@media (max-width: 768px) {
/* ===== 회원가입 모바일 - PC처럼 라벨左 / 입력右 유지, 폭만 맞춤 ===== */
body .join_top_title,
body .join_suv_title,
body .join_check1,
body .join_check2,
body .next_wrap_title,
body .wrap_title_radio,
body .join_next_wrap,
body .information_wrap,
body .join_under_btn,
body .under_btn {
width: 100% !important; max-width: 100% !important;
box-sizing: border-box !important;
padding-left: 12px !important; padding-right: 12px !important;
}
body .next_wrap_title { height: auto !important; overflow: visible !important; }
/* 라벨(회색)·입력칸 좌우 유지 — 라벨만 살짝 좁혀서 폭 맞춤 */
body .information_wrap ul[class^="information"] { display: flex !important; align-items: stretch !important; width: 100% !important; height: auto !important; }
body .information_wrap .li1 { width: 120px !important; height: auto !important; float: none !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box; }
body .information_wrap .li2 { width: calc(100% - 120px) !important; height: auto !important; float: none !important; box-sizing: border-box; padding: 8px 0 !important; }
body .information_wrap .li1 p { margin: 0 !important; padding: 0 !important; text-align: center !important; }
body .information_wrap .li2 input,
body .information_wrap .li2 select,
body .information_wrap .li2 textarea { max-width: 100% !important; box-sizing: border-box; }
/* 제목 안내문 작게(2줄 걸침 방지) */
body .next_wrap_title span { font-size: 11px !important; }
/* 이메일 줄 정리: 아이디@도메인 한 줄, 선택칸 아래로 */
/* 이메일 줄: 입력칸 강제 축소(40%) → 한 줄, 도메인선택 아래로 */
body .information6 .li2 input[type="text"] { width: 40% !important; max-width: 40% !important; box-sizing: border-box; }
body .information6 .li2 select { width: 100% !important; float: none !important; margin: 6px 0 0 !important; box-sizing: border-box; }
/* 약관 textarea 높이 */
body .join_check1 textarea, body .join_check2 textarea { width: 100% !important; height: 150px !important; box-sizing: border-box; }
/* 하단 버튼 2개 나란히 */
body .join_under_btn li, body .under_btn li { float: left !important; width: 48% !important; margin: 0 1% !important; box-sizing: border-box; }
body .join_under_btn li a, body .under_btn li a { display: block !important; text-align: center !important; box-sizing: border-box; }
}
@media (max-width: 768px) {
/* ===== 29. 로그인 (login.php) ===== */
body .login_top_title { padding: 0 12px !important; box-sizing: border-box; }
body .login_wrap { width: 100% !important; height: auto !important; box-sizing: border-box; padding: 0 12px !important; }
body .login_box1, body .login_box2 { width: 100% !important; box-sizing: border-box; margin-bottom: 24px !important; }
/* 입력칸 전체폭 + 로그인/확인 버튼 아래로 */
body .login_input_wrap { width: 100% !important; height: auto !important; }
body .login_input_wrap > ul { float: none !important; width: 100% !important; height: auto !important; margin: 0 !important; }
body .login_input_wrap > ul li input { width: 100% !important; box-sizing: border-box; }
body .login_btn1, body .login_btn2 { float: none !important; width: 100% !important; height: auto !important; margin-top: 10px !important; }
body .login_btn1 input, body .login_btn2 input { height: 50px !important; line-height: 50px !important; }
/* 하단 링크(회원가입/아이디찾기/비밀번호찾기) 균등 3등분 */
body .btn_wrap { width: 100% !important; box-sizing: border-box; display: flex !important; gap: 6px !important; margin-top: 14px !important; overflow: hidden; }
body .btn_wrap li { float: none !important; flex: 1 !important; width: auto !important; text-align: center; }
body .btn_wrap li a { display: block !important; text-align: center !important; }
/* 비회원 안내 문구 */
body .under { padding: 12px !important; box-sizing: border-box; font-size: 12px !important; line-height: 1.5 !important; }
/* ===== 30. 아이디/비밀번호 찾기 (id_search, pw_search 등) ===== */
body .idsearch_box, body .idsearchnext_box, body .pssearch_box, body .pssearchnext_box {
width: 100% !important; box-sizing: border-box; padding: 0 12px !important;
}
body .idsearch_top_title, body .pssearch_top_title, body .pssearchnext_top_title { padding: 0 12px !important; box-sizing: border-box; }
/* 입력칸 전체폭 + 찾기 버튼 아래로 */
body .idsearch_input_wrap { width: 100% !important; height: auto !important; }
body .idsearch_input_wrap > ul { float: none !important; width: 100% !important; height: auto !important; margin: 0 !important; }
body .idsearch_input_wrap > ul li input { width: 100% !important; box-sizing: border-box; }
body .idsearch_btn1 { float: none !important; width: 100% !important; height: auto !important; margin-top: 10px !important; }
body .idsearch_btn1 input { height: 50px !important; line-height: 50px !important; }
/* 하단 버튼 2개 나란히 */
body .idsearch_under_btn, body .idsearchnext_under_btn {
width: 100% !important; box-sizing: border-box; display: flex !important; gap: 8px !important; margin-top: 14px !important; overflow: hidden;
}
body .idsearch_under_btn > div, body .idsearchnext_under_btn > div {
float: none !important; flex: 1 !important; width: auto !important; margin: 0 !important; text-align: center;
}
body .idsearch_under_btn a, body .idsearchnext_under_btn a { display: block !important; text-align: center !important; }
/* 아이디 찾기 결과 */
body .idsearchnext_exp { padding: 24px 12px !important; text-align: center; box-sizing: border-box; }
body .idsearchnext_exp p { font-size: 16px !important; line-height: 1.6 !important; }
/* 비밀번호 찾기 - 인증수단 선택 */
body .pssearchnext_select { width: 100% !important; box-sizing: border-box; }
body .pssearchnext_select li { width: 100% !important; box-sizing: border-box; }
body .next_under_btn { width: 100% !important; box-sizing: border-box; padding: 0 12px !important; margin-top: 14px !important; }
body .next_under_btn p a { display: block !important; text-align: center !important; }
}