@charset "utf-8"; /* ========================================================= 프론트 모바일 공용 스타일 (2026-07-29) 원칙 · 데스크톱(769px 이상)은 손대지 않는다. 모든 규칙은 @media (max-width:768px) 안에만 둔다. · 본문과 어울리지 않는 장식 이미지는 모바일에서 아예 숨긴다(작게 줄여 억지로 넣지 않는다). · 입력 폼은 기본 한 줄(라벨 위 / 입력칸 아래). 내용이 짧은 항목만 tr 에 class="m2" 를 붙여 두 칸으로. · 이미지 목록은 한 줄에 2개. 메인/대표 이미지는 한 줄에 1개로 크게. 사용법: 프론트 페이지 에 basic.css 다음으로 링크한다. ※ 각 페이지의 가 반드시 있어야 이 파일이 동작한다. ========================================================= */ @media (max-width:768px) { /* ---------- 1. 공통 폭 해제 ---------- */ /* 데스크톱 고정폭(1100px) 래퍼들 */ .cs-wrap, #estWrap { width: auto !important; max-width: 100%; padding-left: 14px; padding-right: 14px; box-sizing: border-box; } img { max-width: 100%; height: auto; } /* 레거시 마크업의 고정폭 표()가 화면을 밀어내지 않게 한다. 견적 페이지들은 푸터를 이 표로 감싸고 있다. */ table[width="1100"], table[width="1100"] > tbody > tr > td, td[width="1100"] { width: 100% !important; max-width: 100%; } /* 가로 스크롤바가 생기지 않게 */ html, body { overflow-x: hidden; } /* ---------- 2. 모바일에서 숨기는 이미지 ---------- */ /* 본문 옆에 붙는 장식 사진들은 세로 화면에서 흐름을 끊는다 → 숨김 */ .building-float { display: none !important; } /* 회사소개 - 사옥 사진 */ #siteFooter .ft-col-logo { display: none !important; } /* 푸터 로고 - 상단 헤더에 이미 있음 */ /* 공통 유틸 : 모바일에서 감출 요소에 붙인다 */ .m-hide { display: none !important; } /* ---------- 3. 입력 폼 : 기본 한 줄 ---------- */ /* 견적요청 폼 (table.est-form) — tr 을 grid 로 바꿔 th/td 를 세로로 쌓는다 */ table.est-form { border-top-width: 2px; } table.est-form tr { display: grid; grid-template-columns: 1fr; } table.est-form th, table.est-form td { display: block; width: auto !important; white-space: normal; border-left: 0; border-right: 0; } table.est-form th { text-align: left; padding: 9px 12px; font-size: 13px; } table.est-form td { padding: 10px 12px 14px; } /* 입력칸은 가로 가득 (폭이 인라인으로 박힌 것도 덮어쓴다) ※ 칸이 잘게 나뉜 항목(핸드폰 000-0000, 대수/인원, 날짜+시간 …)은 */ table.est-form tr.m2 { grid-template-columns: 1fr 1fr; } table.est-form tr.m2 th { grid-column: span 1; } table.est-form tr.m2 td { grid-column: span 1; } /* 제출 버튼 */ .est-submit-row { padding: 18px 0 40px; } .est-btn { width: 100%; padding: 14px 0; font-size: 17px; } .est-lead { font-size: 12px; } /* 내견적확인 카드 */ .confirm-box { width: auto !important; margin: 24px 0 60px !important; padding: 32px 18px 36px !important; } .confirm-box h1 { font-size: 21px; } .confirm-box input[type=text] { width: 100% !important; box-sizing: border-box; font-size: 16px; } .confirm-box .b { width: 100% !important; } /* ---------- 4. 목록 표 : 가로 스크롤 ---------- */ /* 칸이 많은 표는 줄이지 말고 옆으로 밀어서 본다(내용 잘림 방지) */ table.list-table, table.nt-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } table.list-table th, table.list-table td, table.nt-table th, table.nt-table td { font-size: 13px; padding: 8px 7px; } .toolbar { flex-wrap: wrap; } .toolbar .tb { flex: 1 1 auto; } .auth-box input { width: 100% !important; box-sizing: border-box; font-size: 16px; margin-bottom: 8px; } .mine-bar { flex-direction: column; align-items: flex-start; gap: 8px; } /* 견적 상세 표 — 라벨/값 세로 배치 */ .est-view-table tr { display: block; } .est-view-table th, .est-view-table td { display: block; width: auto !important; text-align: left; } /* ---------- 5. 이미지 목록 : 한 줄에 2개 ---------- */ /* auto-fit 을 쓰는 이유 : 2칸 고정으로 두면 상품이 1개뿐인 목록에서 카드가 화면 절반만 차지하고 옆이 비어 어색해진다. 2개 이상이면 지금처럼 2칸이 된다. */ .tour-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 12px; } .bi-rel-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } /* ---------- 6. 대표 이미지 : 한 줄에 1개, 크게 ---------- */ .main-visual, .bi-hero { width: 100% !important; height: auto !important; } .main-visual > img, .bi-hero img { width: 100%; height: auto; display: block; } /* ---------- 7. 게시판(공지/FAQ) ---------- */ .nt-paging a, .nt-paging span, .faq-paging a, .faq-paging span { min-width: 30px; padding: 7px 9px; font-size: 13px; } .nt-btns { flex-wrap: wrap; } .nv-subj { font-size: 17px; line-height: 1.45; } .nv-meta { font-size: 12px; } .faq-q { align-items: flex-start; } .faq-q .q-text { font-size: 15px; line-height: 1.5; } .faq-a .a-inner { font-size: 14px; line-height: 1.7; } /* ---------- 8. 상단 타이틀 밴드 ---------- */ .cs-head { padding: 16px 18px; } .cs-head .kr { font-size: 19px; } .cs-crumb { margin: 10px 2px 18px; } }
로 이 규칙에서 제외해 원래 폭을 지킨다. */ table.est-form td:not(.m-inline) input[type=text], table.est-form td:not(.m-inline) input[type=password], table.est-form td:not(.m-inline) input[type=tel], table.est-form td:not(.m-inline) input[type=email], table.est-form td:not(.m-inline) input[type=date], table.est-form td:not(.m-inline) input[type=time], table.est-form td:not(.m-inline) select, table.est-form td textarea { width: 100% !important; max-width: 100%; box-sizing: border-box; font-size: 16px; /* iOS 자동확대 방지 */ padding: 9px 10px; } /* m-inline 칸 : 지정된 폭(70px 등)은 그대로 두고 글자·여백만 손본다 */ table.est-form td.m-inline { line-height: 2.2; } table.est-form td.m-inline input, table.est-form td.m-inline select { max-width: 100%; box-sizing: border-box; font-size: 16px; padding: 8px 9px; vertical-align: middle; } /* 한 줄에 여러 입력칸이 오는 칸(일시 등)은 줄바꿈 허용 */ table.est-form td .radios label { display: inline-block; margin: 0 12px 6px 0; } table.est-form td .hint { display: block; margin: 4px 0 0; } /* 내용이 짧은 항목만 두 칸으로 :