/* ============================================================ * bidroom-mobile.css — V2/test 페이지 모바일 최적화 오버레이 v4.5 * ------------------------------------------------------------ * 설계서: design_drafts/MOBILE_OPTIMIZATION_DESIGN.md (+§11 구현현황) * * 안전 규약 (절대 준수): * - renewal/footer_v2.php 에서만 로드(= V2/test 전용). 라이브·renewal 메인 무관. * - 모든 선언은 max-width 미디어쿼리 내부 → ≥1025px 데스크톱 무변화. * - 데이터 은닉 금지. 스코프 클래스(mbl-*)로 페이지 간 오염 차단. * - !important 는 "기존 !important/인라인 스타일 대응" 주석이 있는 곳만. * * v1.2 핵심 전략 (상위 1% 사이트 패턴): * [T1] 데이터 그리드 표 = 절대 짜부라뜨리지 않는다. * table{width:max-content; min-width:100%} + 셀 nowrap * → 열이 자연폭 유지, 래퍼가 가로 스크롤. 업체명 세로 한글자 깨짐 원천 차단. * (공고명 셀 .bidcol 만 예외적으로 줄바꿈 허용 — min-width 확보돼 있음) * [T2] 라벨:값(KV) 표 = 모바일에서 스택형 그리드로 변환(스크롤 없이 읽기). * tr{display:grid; 96px 1fr} — th/td 쌍이 자동으로 세로 나열. * [T3] 달력 = 고정 10열 그리드 → 가로 스크롤 스냅 캐러셀(폭에 따라 5일 노출). * [T4] 검색/액션 바 = "압축"이 아니라 재배치: 검색어 풀폭 최상단, 기간 다음 줄, * 액션버튼 랩 그리드. * * 버전: v2.4 (수정 시 footer_v2 + com/ShowCorpAllV2.php 의 ?v= 파라미터를 함께 올릴 것) * 참고: 뷰에 붙은 mbl-svc 스코프는 예약 훅(서비스 페이지는 현재 .cbv2 규칙으로 커버, * 빌링 표 등 서비스 전용 규칙은 v1.9 부터 mbl-svc 를 실사용). * ============================================================ */ /* ========================================================= * BP-L : ≤1024px — 가로 넘침 방지(고정폭 해제 + 표 스크롤). 구조는 유지. * ========================================================= */ @media (max-width:1024px){ /* --- 0) 미디어 넘침 방지 --- */ img, video, canvas{ max-width:100%; height:auto; } iframe{ max-width:100%; } /* --- 1) 셸 고정폭 해제 ------------------------------------------- * bidroom.css 의 .cusWrap{min-width:1200px} 가 모든 목록/상세를 1200px 로 * 고정하던 주범. 스코프 클래스가 붙은 셸에서 min-width 를 해제한다. * (bidroom-mobile 이 bidroom.css 뒤에 로드되어 동일 특이도에서 이긴다) */ .mbl-bidlist, .mbl-cuslist, .mbl-corp, .mbl-myres, .mbl-dtl{ min-width:0; max-width:100%; } /* [v3.8] 화면 좌우 여백은 **한 곳에서만** 정한다. 풀블리드(변환본)는 이 값을 음수 마진으로 되돌려 화면 끝까지 나가야 하는데, 그 -14px 을 따로 적어 두면 여기 14px 을 바꾸는 순간 조용히 어긋난다. 같은 숫자를 두 곳에 적는 것 자체가 버그의 씨앗이라 변수로 묶는다. */ .mbl-bidlist, #cbn2.mbl-cuslist, #clv2.mbl-corp, #nsv2.mbl-cuslist, #vdv2.mbl-dtl, #vrv2.mbl-dtl, #vcv2.mbl-dtl, #scv2.mbl-dtl, #brv2wrap.mbl-myres{ --md-gutter:14px; } #cbn2.mbl-cuslist, #clv2.mbl-corp, #nsv2.mbl-cuslist{ max-width:100%; padding-left:var(--md-gutter, 14px); padding-right:var(--md-gutter, 14px); } /* 상세 셸(id 특이도 min-width:1200 대응) */ #vdv2.mbl-dtl, #vrv2.mbl-dtl, #vcv2.mbl-dtl, #scv2.mbl-dtl{ min-width:0; max-width:100%; padding-left:var(--md-gutter, 14px); padding-right:var(--md-gutter, 14px); } #brv2wrap.mbl-myres{ padding-left:var(--md-gutter, 14px); padding-right:var(--md-gutter, 14px); } /* --- 2) [T1] 데이터 그리드 표: 자연폭 + 래퍼 가로 스크롤 ---------- * width:max-content 로 열이 콘텐츠 폭을 유지(짜부라짐 금지), * min-width:100% 로 좁은 표는 풀폭. 넘치는 만큼만 래퍼가 스크롤. */ .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; } .tbl-wrap > table, .tbl-wrap > .grid{ width:max-content !important; /* bidroom.css table.grid{width:100%!important} 대응 */ min-width:100%; max-width:none; } .tbl-wrap th, .tbl-wrap td{ white-space:nowrap; } /* 공고명 셀만 줄바꿈 허용(자연폭 대신 적정폭) — bidroom.css 에 min-width:180px 존재 */ .tbl-wrap td.bidcol{ white-space:normal; min-width:220px; max-width:300px; } .tbl-wrap td.bidcol .bid-name{ white-space:normal; } /* #cbn2(맞춤정보) 는 자체 .tbl-wrap{overflow:hidden} 이 인라인 정의 → 스코프로 재정의 */ #cbn2.mbl-cuslist .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* --- 3) [T1] 상세 페이지의 래퍼 없는 데이터 표 -------------------- * (낙찰업체/자사순위 .gtbl, 복수예비가격 .resTable, 투찰업체 .resTable2, * 구매대상물품 .proTable, 전체보기 #scTable) → 표 자체를 스크롤 컨테이너로. */ .mbl-dtl table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; } .mbl-dtl .gtbl th, .mbl-dtl .gtbl td, .mbl-dtl .resTable th, .mbl-dtl .resTable td, .mbl-dtl .resTable2 th, .mbl-dtl .resTable2 td, .mbl-dtl .proTable th, .mbl-dtl .proTable td{ white-space:nowrap; } /* --- 4) 고객센터/커뮤니티(cbv2) --- */ .cbv2 .cbv2-main{ min-width:0; max-width:100%; } /* fit-content 산정이 내부 광폭 요소로 커지는 것 방지 */ .cbv2 .cbv2-main table{ max-width:100%; } .cbv2 .tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; } .cbv2 .btbl{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; } .cbv2 .cbv2-inner{ padding-left:14px; padding-right:14px; } } /* ========================================================= * BP-M : ≤768px — 구조 변화(스택·재배치) + 모바일 입력 * ========================================================= */ @media (max-width:768px){ /* --- 입력 요소: iOS 자동확대 방지 --- */ input, select, textarea{ font-size:16px; } /* --- 페이지 타이틀 밀도 --- */ .page-h{ font-size:17px !important; margin-bottom:11px !important; } /* 인라인 정의 대응 */ .page-h > i{ width:29px !important; height:29px !important; font-size:13px !important; } /* ================================================== * P2 상세: 2컬럼 → 1컬럼 스택 * ================================================== */ #vdv2.mbl-dtl .vtop{ flex-direction:column; align-items:stretch; } #vdv2.mbl-dtl .vmain{ width:100%; min-width:0; } #vdv2.mbl-dtl .vrail{ flex:1 1 auto; width:100%; max-width:100%; } #vdv2.mbl-dtl .rail-sticky{ position:static; } #vdv2.mbl-dtl .docview iframe{ height:60vh; } /* ---- [2-n] 입찰공고서 변환본: 폭은 카드 **안에서** 벌어야 한다 (v3.8) ---- 앱 진단 실측(360px 화면): inner 360 · frame 292 · doc 292 · zoom none. 문서는 프레임에 정확히 맞고 있었다 — 좁았던 것은 프레임이다. 360 에서 292 까지 68px 은 여백이 겹겹이 쌓인 결과였다: 셸 14+14=28 · card 테두리 1+1=2 · card-b 18+18=36 · docview 테두리 2 [되돌린 이유] 처음에는 카드째로 화면 끝까지 빼봤다(풀블리드). 그러나 iframe 이 width:100% 라 카드까지 화면 폭을 꽉 채우게 되고, 그러면 이 카드만 위아래 다른 카드와 좌우 선이 어긋나 튀어 보인다. **카드는 다른 카드와 같은 자리에 두고**, 안쪽에서 낭비되는 여백만 걷어낸다. 걷어내는 것: card-b 의 좌우 여백 36px 과 docview 의 이중 테두리. 문서 자신의 읽는 여백은 iframe 안에서 준다(ViewDtlV2 주입 CSS, 프레임 폭에 비례). 결과: 프레임 292 → 328px, 카드 위치는 그대로. */ #vdv2.mbl-dtl #s-doc > .card-b{ padding-left:0; padding-right:0; padding-bottom:0; } /* 카드 테두리가 이미 문서를 감싸므로 docview 테두리는 이중선이 된다 */ /* 눈에 보이는 좌우 여백은 **여기서** 준다. 문서 안(iframe)에도 줄 수 있지만 그쪽은 뷰 파일이라 opcache 에 걸리면 반영이 늦다 — 이 파일은 ?v= 로 즉시 갱신된다. 12px 은 카드 본문 여백(18px)보다 조금 좁다. 변환본은 표가 많아 폭이 아깝다. */ #vdv2.mbl-dtl #s-doc .docview{ border:0; border-radius:0; padding:0 12px 12px; } /* 테두리는 .docview 가 아니라 **iframe** 에 두른다. .docview 에 두르면 여백 바깥, 즉 카드 테두리 바로 옆에 붙어 이중선이 된다. iframe 에 두르면 여백 안쪽에서 문서를 감싸 '문서가 여기 있다'가 분명해진다. */ #vdv2.mbl-dtl #s-doc .docview iframe{ display:block; margin-left:auto; margin-right:auto; border:1px solid #e3e9f2; border-radius:8px; background:#fff; /* 테두리 2px 이 width:100% 에 얹혀 카드를 넘치지 않게 — 폭 안에 테두리를 포함시킨다 */ box-sizing:border-box; } #vrv2.mbl-dtl .dualcol{ flex-direction:column; align-items:stretch; } #vrv2.mbl-dtl .dc-l{ width:100%; min-width:0; } #vrv2.mbl-dtl .dc-r{ flex:1 1 auto; width:100%; max-width:100%; } /* [FIX] 맨 1fr = minmax(auto,1fr) 이라 트랙의 최소 크기가 min-content 가 된다. 안에 폭이 굳은 SVG(≈600px)가 있으면 트랙이 그만큼 벌어져 카드보다 넓어지고, 보정 JS 는 그 부푼 폭을 다시 기준으로 삼아 영원히 줄지 않았다(순환 의존). */ #vrv2.mbl-dtl .chart-grid{ grid-template-columns:minmax(0,1fr); } #vrv2.mbl-dtl .chartbox{ max-width:100%; overflow:hidden; } /* KPI/통계 카드 그리드: 고정 다열 → 모바일 스택 (kpi-row 3열, ai-row 4열, prc-grid 5열, respv 3열 — 압축되어 좌우로 넘치던 문제) */ #vdv2.mbl-dtl .kpi-row, #vrv2.mbl-dtl .kpi-row{ grid-template-columns:1fr; } /* KPI 1개 = 한 줄 */ #vdv2.mbl-dtl .ai-row{ grid-template-columns:repeat(2,1fr); } #vdv2.mbl-dtl .prc-grid{ grid-template-columns:repeat(2,1fr); } #vdv2.mbl-dtl .respv{ grid-template-columns:1fr; } #vrv2.mbl-dtl .ai-row{ grid-template-columns:repeat(2,1fr); } #vrv2.mbl-dtl .prc-grid{ grid-template-columns:repeat(2,1fr); } /* 차트: 컨테이너·SVG 강제 유동폭 (Highcharts 는 리사이즈 시 자동 reflow + bidroom-mobile.js 가 보강) */ #vrv2.mbl-dtl .chartbox > div{ width:100% !important; } #vrv2.mbl-dtl .chartbox svg{ max-width:100%; } /* [FIX] 투찰업체 개찰결과 — 9열을 가로 스크롤 + 고정열로 우겨넣던 방식을 버린다. 좁은 화면에서는 고정열이 가용 폭의 절반을 먹어 실제로 볼 수 있는 영역이 130px 밖에 남지 않았다. 이제 뷰(ViewResV2)가 모바일에서 .mo4 를 붙여 순위·업체명·투찰금액· 사정율 4열만 남기므로, 표는 그냥 폭 100% 로 들어간다. */ #vrv2.mbl-dtl .corp_data{ overflow-x:auto; -webkit-overflow-scrolling:touch; } #vrv2.mbl-dtl .corp_data .resTable2{ display:table; width:100%; } #vrv2.mbl-dtl .corp_data .resTable2.mo4 th, #vrv2.mbl-dtl .corp_data .resTable2.mo4 td{ white-space:normal; word-break:break-all; } /* 낙찰업체/자사순위(.gtbl[data-mbl-cards]) : 표 → 세로 카드 변환 (뷰에서 td 에 data-label 부여 — 열 이름을 유지한 채 스택) */ #vrv2.mbl-dtl .gtbl[data-mbl-cards]{ display:block; overflow:visible; border:0; } #vrv2.mbl-dtl .gtbl[data-mbl-cards] thead, #vrv2.mbl-dtl .gtbl[data-mbl-cards] tr:first-child{ display:none; } /* th 헤더행(thead 없음) */ #vrv2.mbl-dtl .gtbl[data-mbl-cards] tbody{ display:block; } #vrv2.mbl-dtl .gtbl[data-mbl-cards] tr{ display:flex; flex-wrap:wrap; gap:4px 6px; border:1px solid #dfe6ef; border-radius:12px; padding:12px 14px; margin-bottom:10px; background:#fff; box-shadow:0 1px 3px rgba(20,30,50,.05); } #vrv2.mbl-dtl .gtbl[data-mbl-cards] td{ flex:1 1 100%; display:flex; justify-content:space-between; align-items:center; gap:10px; border:0; border-bottom:1px solid #f0f4f9; height:auto; min-height:29px; padding:3px 0; white-space:normal; word-break:break-all; text-align:right; color:#243043; font-size:12.5px; font-weight:600; background:transparent; } #vrv2.mbl-dtl .gtbl[data-mbl-cards] td::before{ content:attr(data-label); flex:0 0 auto; font-weight:700; color:#8a93a2; font-size:11.5px; text-align:left; } /* 업체명 = 카드 타이틀(라벨 없이 크게, 최상단 풀폭) */ #vrv2.mbl-dtl .gtbl[data-mbl-cards] td[data-label="업체명"]{ order:-3; justify-content:flex-start; text-align:left; font-size:15px; font-weight:800; border-bottom:0; padding-bottom:0; } #vrv2.mbl-dtl .gtbl[data-mbl-cards] td[data-label="업체명"]::before{ content:none; } /* 구분·순위 = 타이틀 아래 작은 배지 2개 */ #vrv2.mbl-dtl .gtbl[data-mbl-cards] td[data-label="구분"], #vrv2.mbl-dtl .gtbl[data-mbl-cards] td[data-label="순위"]{ order:-2; flex:0 0 auto; min-height:0; background:#fdeeee; color:#ca1111; font-weight:800; font-size:11.5px; border:0; border-radius:7px; padding:3px 9px; margin-bottom:6px; } #vrv2.mbl-dtl .gtbl[data-mbl-cards] td[data-label="구분"]::before, #vrv2.mbl-dtl .gtbl[data-mbl-cards] td[data-label="순위"]::before{ content:attr(data-label) " "; color:#ca1111; font-weight:700; } #vrv2.mbl-dtl .gtbl[data-mbl-cards] td:last-child{ border-bottom:0; } /* 라벨:값 정의그리드(.dl 4열) → 2열(BP-S 1열) */ #vdv2.mbl-dtl .dl, #vrv2.mbl-dtl .dl{ grid-template-columns:96px minmax(0,1fr); } #vdv2.mbl-dtl .dl .v.full, #vrv2.mbl-dtl .dl .v.full{ grid-column:2 / 3; } #vdv2.mbl-dtl .dl > div, #vrv2.mbl-dtl .dl > div{ word-break:break-all; } /* --- [T2] 계약현황 KV 표(.ctbl th{width:150px} 4열) → 스택형 그리드 --- * th/td 쌍이 96px:1fr 그리드에 자동 배치되어 세로로 읽힌다. 스크롤 불필요. */ #vcv2.mbl-dtl .ctbl{ display:block; overflow:visible; } #vcv2.mbl-dtl .ctbl tbody{ display:block; } #vcv2.mbl-dtl .ctbl tr{ display:grid; grid-template-columns:96px minmax(0,1fr); } #vcv2.mbl-dtl .ctbl th, #vcv2.mbl-dtl .ctbl td{ display:block; width:auto; min-height:34px; border:0; border-bottom:1px solid #eef1f6; text-align:left; word-break:break-all; white-space:normal; } #vcv2.mbl-dtl .ctbl th{ background:#f8fafd; } /* ================================================== * P5 필터/검색 (입찰/낙찰 목록 셸) * 지역|기관, 기간|금액 처럼 한 줄 2쌍(.flab+.fbody ×2)이던 행을 * 모바일에서 쌍 단위로 세로 분리: fbody 를 남은 폭 전부로 강제해 * 다음 쌍이 자동 줄바꿈. (인라인 flex:1 1 42% 대응 !important) * ================================================== */ .mbl-bidlist .frow{ row-gap:12px; } .mbl-bidlist .frow > .fbody{ flex:1 1 calc(100% - 66px) !important; max-width:100%; } .mbl-bidlist .flab{ font-size:12.5px; font-weight:800; color:#33405a; letter-spacing:-.2px; } .mbl-bidlist .fld{ max-width:100%; } /* 통합검색: 입력창 풀폭 1행 → 검색/초기화 2행 (한 줄 압축 시 입력창 소멸 방지) */ .mbl-bidlist .usearch{ display:flex; flex-wrap:wrap; gap:8px; } .mbl-bidlist .usearch .u-tt{ display:none; } /* 검색창 자체가 설명됨 */ .mbl-bidlist .usearch .u-inner{ flex:1 1 100%; order:-1; height:44px; } .mbl-bidlist .usearch .u-dirty{ flex:1 1 100%; } .mbl-bidlist .usearch .u-btn, .mbl-bidlist .usearch .u-reset{ flex:1 1 40%; justify-content:center; min-height:44px; } #clv2.mbl-corp .segrid{ grid-template-columns:1fr; } /* ================================================== * 입찰/낙찰 목록: 표 → "필수정보 세로 카드" (꼭 필요한 것만, 세로 배치) * bid(13열): 4 공고명 / 5 지역 / 6 업종 / 7 기초금액(추정 줄 JS 제거) / * 10 마감 / 11 개찰 / 13 신청 + 1 선택박스 * — 숨김: 2No 3서류함 8게시일 9참가 12메모 * res(12열): 3 공고명 / 4 지역 / 5 업종 / 8 개찰 / 9 1순위업체 / * 11 예가·기초 + 1 선택박스 — 숨김: 2No 6기초 7예정 10업체수 12메모 * ≤1024 의 max-content 스크롤 규칙을 카드 모드로 재정의. * ================================================== */ .mbl-l-bid .tbl-wrap > table.grid, .mbl-l-res .tbl-wrap > table.grid{ display:block; width:100% !important; min-width:0; max-width:100%; } .mbl-l-bid .tbl-wrap thead, .mbl-l-res .tbl-wrap thead{ display:none; } .mbl-l-bid .tbl-wrap colgroup, .mbl-l-res .tbl-wrap colgroup{ display:none; } .mbl-l-bid .tbl-wrap tbody, .mbl-l-res .tbl-wrap tbody{ display:block; } .mbl-l-bid .tbl-wrap tbody tr, .mbl-l-res .tbl-wrap tbody tr{ position:relative; /* (내부 absolute 요소 대비 유지) */ display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px; border:1px solid #e7ebf2; border-radius:14px; background:#fff; padding:14px 44px 12px 16px; /* v1.8 블록에서 14/16/12 로 재정의됨 */ margin-bottom:12px; box-shadow:0 1px 2px rgba(17,24,39,.04), 0 6px 18px rgba(17,24,39,.05); } .mbl-l-bid .tbl-wrap tbody tr:active, .mbl-l-res .tbl-wrap tbody tr:active{ background:#fbfcfe; } /* 선택 체크박스: 하단 액션행에 버튼 크기 박스로 배치(우상단 돌출 제거). bid: [선택박스][분석요청 버튼] 나란히 / res·cbn2: [선택박스+라벨] 풀행 */ .mbl-l-bid .tbl-wrap tbody td:nth-child(1), .mbl-l-res .tbl-wrap tbody td:nth-child(1){ display:flex; position:static; order:9; align-items:center; justify-content:center; gap:7px; min-height:42px; margin-top:7px; padding:0 12px; border:1px solid #dde3ec; border-radius:11px; background:#fbfcfe; } .mbl-l-bid .tbl-wrap tbody td:nth-child(1){ flex:0 0 auto; } .mbl-l-res .tbl-wrap tbody td:nth-child(1){ flex:1 1 100%; } .mbl-l-res .tbl-wrap tbody td:nth-child(1)::after{ content:"선택"; font-size:12.5px; font-weight:700; color:#5b6b82; } .mbl-l-bid .tbl-wrap tbody td:nth-child(1) input, .mbl-l-res .tbl-wrap tbody td:nth-child(1) input{ width:21px; height:21px; accent-color:#ca1111; } .mbl-l-bid .tbl-wrap tbody td, .mbl-l-res .tbl-wrap tbody td{ display:block; border:0; height:auto; padding:2px 0; white-space:normal; text-align:left; } /* 공고명 셀(발주처·공고번호·아이콘 포함) = 카드 본문, 풀폭 최상단 */ .mbl-l-bid .tbl-wrap tbody td.bidcol, .mbl-l-res .tbl-wrap tbody td.bidcol{ flex:1 1 100%; order:-3; min-width:0; max-width:none; padding:0 0 9px; border-bottom:1px solid #f0f4f9; margin-bottom:6px; } .mbl-l-bid .tbl-wrap tbody td.bidcol .bid-name, .mbl-l-res .tbl-wrap tbody td.bidcol .bid-name{ font-size:14.5px; font-weight:800; line-height:1.45; letter-spacing:-.2px; color:#1a2230; } .mbl-l-bid .tbl-wrap tbody td.bidcol .balju, .mbl-l-res .tbl-wrap tbody td.bidcol .balju{ font-size:12px; font-weight:700; } .mbl-l-bid .tbl-wrap tbody td.bidcol .gno, .mbl-l-res .tbl-wrap tbody td.bidcol .gno{ font-size:11px; } /* 지역·업종 = 메타 필 칩 */ .mbl-l-bid .tbl-wrap tbody td:nth-child(5), .mbl-l-bid .tbl-wrap tbody td:nth-child(6), .mbl-l-res .tbl-wrap tbody td:nth-child(4), .mbl-l-res .tbl-wrap tbody td:nth-child(5){ flex:0 0 auto; order:-2; font-size:11px; font-weight:700; color:#5b6b82; background:#f1f4f9; border-radius:999px; padding:3px 11px; margin-bottom:5px; } /* 라벨:값 행(풀폭, 라벨은 ::before) */ .mbl-l-bid .tbl-wrap tbody td:nth-child(7), .mbl-l-bid .tbl-wrap tbody td:nth-child(10), .mbl-l-bid .tbl-wrap tbody td:nth-child(11), .mbl-l-res .tbl-wrap tbody td:nth-child(8), .mbl-l-res .tbl-wrap tbody td:nth-child(9), .mbl-l-res .tbl-wrap tbody td:nth-child(11){ flex:1 1 100%; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:24px; font-variant-numeric:tabular-nums; } .mbl-l-bid .tbl-wrap tbody td:nth-child(7)::before{ content:"기초금액"; } /* 추정가격 줄은 JS 로 제거 */ .mbl-l-bid .tbl-wrap tbody td:nth-child(10)::before{ content:"마감일"; } .mbl-l-bid .tbl-wrap tbody td:nth-child(11)::before{ content:"개찰일"; } .mbl-l-res .tbl-wrap tbody td:nth-child(8)::before{ content:"개찰일"; } .mbl-l-res .tbl-wrap tbody td:nth-child(9)::before{ content:"1순위업체"; } .mbl-l-res .tbl-wrap tbody td:nth-child(11)::before{ content:"예가/기초"; } .mbl-l-bid .tbl-wrap tbody td::before, .mbl-l-res .tbl-wrap tbody td::before{ flex:0 0 auto; font-size:11.5px; font-weight:600; color:#98a2b3; } /* 값 타이포: 볼드 금지(요청) — 라벨 뮤트/값 일반 굵기, 한 줄 표기 */ .mbl-l-bid .tbl-wrap tbody td:nth-child(7), .mbl-l-bid .tbl-wrap tbody td:nth-child(10), .mbl-l-bid .tbl-wrap tbody td:nth-child(11), .mbl-l-res .tbl-wrap tbody td:nth-child(8), .mbl-l-res .tbl-wrap tbody td:nth-child(9), .mbl-l-res .tbl-wrap tbody td:nth-child(11){ font-size:13px; font-weight:400; color:#243043; min-height:30px; border-bottom:1px solid #f4f6fa; white-space:nowrap; } .mbl-l-bid .tbl-wrap tbody td:nth-child(7) br, .mbl-l-bid .tbl-wrap tbody td:nth-child(10) br, .mbl-l-bid .tbl-wrap tbody td:nth-child(11) br, .mbl-l-res .tbl-wrap tbody td:nth-child(8) br{ display:none; } /* 날짜 한 줄(간격은 JS 보정) */ .mbl-l-bid .tbl-wrap tbody td:nth-child(11), .mbl-l-res .tbl-wrap tbody td:nth-child(11){ border-bottom:0; } /* 신청(분석요청) 액션: 풀폭 필 버튼 */ .mbl-l-bid .tbl-wrap tbody td:nth-child(13){ flex:1 1 100%; order:9; text-align:center; padding-top:9px; border-top:1px solid #f0f4f9; margin-top:6px; min-width:0; } .mbl-l-bid .tbl-wrap tbody td:nth-child(13) a{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:42px; border-radius:11px; font-size:13.5px; font-weight:800; text-decoration:none; } .mbl-l-bid .tbl-wrap tbody td:nth-child(13) .req-btn{ background:#ca1111; color:#fff !important; border:0; box-shadow:0 3px 10px rgba(202,17,17,.22); } .mbl-l-bid .tbl-wrap tbody td:nth-child(13) .req-btn:active{ background:#a90d0d; } .mbl-l-bid .tbl-wrap tbody td:nth-child(13) .req-done{ background:#f1f4f9; color:#8a93a2 !important; border:0; } /* 숨김: No/서류함/게시일/참가등록/메모(bid — 운영 모바일 참고: 목록엔 날짜 1개면 충분, 실무 핵심인 마감·개찰만 유지), No/기초/예정/업체수/메모(res). 체크박스(1)는 위에서 하단 액션행(선택 박스)으로 재배치. */ .mbl-l-bid .tbl-wrap tbody td:nth-child(2), .mbl-l-bid .tbl-wrap tbody td:nth-child(3), .mbl-l-bid .tbl-wrap tbody td:nth-child(8), .mbl-l-bid .tbl-wrap tbody td:nth-child(9), .mbl-l-bid .tbl-wrap tbody td:nth-child(12), .mbl-l-res .tbl-wrap tbody td:nth-child(2), .mbl-l-res .tbl-wrap tbody td:nth-child(6), .mbl-l-res .tbl-wrap tbody td:nth-child(7), .mbl-l-res .tbl-wrap tbody td:nth-child(10), .mbl-l-res .tbl-wrap tbody td:nth-child(12){ display:none; } /* 빈 결과 행(colspan)은 원형 유지 */ .mbl-l-bid .tbl-wrap tbody td[colspan], .mbl-l-res .tbl-wrap tbody td[colspan]{ display:block !important; flex:1 1 100%; text-align:center; order:0; } .mbl-l-bid .tbl-wrap tbody td[colspan]::before, .mbl-l-res .tbl-wrap tbody td[colspan]::before{ content:none; } /* 카드 모드에선 래퍼 테두리 제거(카드가 각자 테두리) */ .mbl-l-bid .tbl-wrap, .mbl-l-res .tbl-wrap{ border:0 !important; overflow:visible; } /* 목록 상단 액션바(정렬·엑셀·인쇄·나의입찰추가)·적용조건: 랩 허용 */ .mbl-bidlist .list-bar{ flex-wrap:wrap; gap:8px; } .mbl-bidlist .list-bar .dl-actions{ flex-wrap:wrap; } .mbl-bidlist .condbar{ flex-wrap:wrap; } /* ================================================== * [T4] 맞춤정보(#cbn2) 검색/액션 바 재배치 * 1행: 통합검색(풀폭) + 검색/초기화 * 2행: 기간(게시일) 범위 * 3행: 검색결과 건수 · 액션 버튼 랩 * ================================================== */ #cbn2.mbl-cuslist .resbar{ gap:8px; padding:10px 12px; } #cbn2.mbl-cuslist .resbar .kwd{ order:-3; flex:1 1 calc(100% - 132px); min-width:0; } #cbn2.mbl-cuslist .resbar .kwd input{ width:100%; max-width:none; } #cbn2.mbl-cuslist .resbar > a.abtn.pri{ order:-2; } #cbn2.mbl-cuslist .resbar > a.abtn.pri + a.abtn{ order:-2; } /* 초기화 */ #cbn2.mbl-cuslist .resbar > span:has(.dinp){ order:-1; flex:1 1 100%; } /* width:auto 금지 — input 고유폭(~size 20자)으로 되돌아가 넘친다. 축소 가능하게 */ #cbn2.mbl-cuslist .resbar .dinp{ max-width:none; flex:1 1 96px; width:100%; min-width:0; } #cbn2.mbl-cuslist .resbar .rc{ flex:1 1 100%; order:0; } #cbn2.mbl-cuslist .resbar .sp{ display:none; } #cbn2.mbl-cuslist .resbar > a.abtn{ min-height:40px; } /* 좌우 폭 정렬 통일(카드 내부 패딩 일원화) */ #cbn2.mbl-cuslist .cstrip{ padding:12px; } #cbn2.mbl-cuslist .c-rows{ padding:0 8px; } /* --- [T3] 맞춤정보 달력: 10열 고정 그리드 → 스냅 캐러셀(약 5일 노출) --- */ #cbn2.mbl-cuslist .c-cal{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:thin; } #cbn2.mbl-cuslist .c-cal .c-day{ flex:0 0 20%; /* 뷰포트당 5일 — 폭이 좁아지면 min-width 로 4일 */ min-width:64px; scroll-snap-align:start; } /* ================================================== * P3/P4 고객센터·커뮤니티 (기존 유지) * ================================================== */ .cbv2 .cbv2-inner{ gap:14px; } .cbv2 .cbv2-side ul{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; } .cbv2 .cbv2-side ul li{ flex:0 0 auto; white-space:nowrap; border-radius:999px; } .cbv2 .cbv2-side ul li .ar{ display:none; } .cbv2 .frm{ grid-template-columns:1fr; gap:6px 0; } .cbv2 .subgrid{ grid-template-columns:1fr; } .cbv2 .pcards{ grid-template-columns:1fr; } .cbv2 .paytabs{ grid-template-columns:1fr; } /* 라디오·체크박스는 제외한다 — 전폭이 되면 옆의 글자(업종구분 '종합공사' 등)를 화면 밖으로 밀어낸다. 폭을 채워야 하는 건 텍스트/숫자 입력과 선택 상자다. */ .cbv2 .cin, .cbv2 .cin.sm, .cbv2 .cin.lg, .cbv2 .ctarea, .cbv2 .frm input:not([type=radio]):not([type=checkbox]), .cbv2 .frm select, .cbv2 .subgrid input:not([type=radio]):not([type=checkbox]), .cbv2 .subgrid select{ width:100%; max-width:100%; } /* 같은 실수가 다른 규칙에서 나도 버티도록 못 박아 둔다 */ .cbv2 input[type=radio], .cbv2 input[type=checkbox]{ width:auto; max-width:none; flex:0 0 auto; } .cbv2 .paytbl select, .cbv2 .pay1 select{ min-width:0; width:100%; max-width:100%; } .mbl-board .vbody img{ max-width:100%; height:auto; } .mbl-board .vfile .fitems a{ display:inline-flex; align-items:center; min-height:40px; } /* 게시판 검색바: 고정 230px 입력 → 유동, 버튼 줄바꿈·잘림 방지 */ .cbv2 .searchbar{ display:flex; flex-wrap:nowrap; gap:6px; align-items:center; } .cbv2 .searchbar select{ flex:0 0 auto; } .cbv2 .searchbar input[type=text]{ flex:1 1 auto; width:auto !important; min-width:0; } .cbv2 .searchbar .sbtn{ flex:0 0 auto; white-space:nowrap; } /* 투찰결과(#brv2) 검색조건: 132px 라벨열 → 라벨 위/값 아래 스택 */ .mbl-myres #brv2 .srow, .mbl-myres #brv2 .srow2{ grid-template-columns:1fr; } .mbl-myres #brv2 .srow2 .slab+.sval+.slab{ border-left:0; border-top:1px solid #f0f3f8; } .mbl-myres #brv2 .slab{ padding-bottom:2px; } .mbl-myres #brv2 .rngbox .rl{ white-space:nowrap; } /* NewSetV2 지역 2컬럼 스택 */ #nsv2.mbl-cuslist .area2{ grid-template-columns:1fr; } #nsv2.mbl-cuslist .area2 .sido{ grid-template-columns:1fr 1fr; } } /* ========================================================= * BP-S : ≤480px — 밀도 축소, 320px 보장 * ========================================================= */ @media (max-width:480px){ /* 상세 정의그리드 1열(라벨 위/값 아래) */ #vdv2.mbl-dtl .dl, #vrv2.mbl-dtl .dl{ grid-template-columns:1fr; } #vdv2.mbl-dtl .dl .v.full, #vrv2.mbl-dtl .dl .v.full{ grid-column:1 / 2; } #vdv2.mbl-dtl .dl .k, #vrv2.mbl-dtl .dl .k{ border-right:0; padding-bottom:2px; } /* 달력: 4일 노출로 밀도 완화 */ #cbn2.mbl-cuslist .c-cal .c-day{ flex-basis:25%; } /* 좌우 패딩 축소 */ .mbl-dtl, #cbn2.mbl-cuslist, #clv2.mbl-corp, #nsv2.mbl-cuslist{ padding-left:12px; padding-right:12px; } .cbv2 .cbv2-inner{ padding-left:12px; padding-right:12px; } /* 설정 발주처 그리드 9열 → 4열 */ #nsv2.mbl-cuslist .balju{ grid-template-columns:repeat(4,1fr); } } /* ========================================================= * v1.8 추가 블록 — 실기기 피드백 2차 반영 * ========================================================= */ @media (max-width:768px){ /* ---- 목록 카드: 체크박스가 하단행으로 갔으므로 우측 패딩 원복 ---- */ .mbl-l-bid .tbl-wrap tbody tr, .mbl-l-res .tbl-wrap tbody tr{ padding:14px 16px 12px; } /* 공고명만 볼드(14px), 발주처·지역·업종 일반 굵기 */ .mbl-l-bid .tbl-wrap tbody td.bidcol .bid-name, .mbl-l-res .tbl-wrap tbody td.bidcol .bid-name{ font-size:14px; } .mbl-l-bid .tbl-wrap tbody td.bidcol .balju, .mbl-l-res .tbl-wrap tbody td.bidcol .balju{ font-weight:400; } .mbl-l-bid .tbl-wrap tbody td:nth-child(5), .mbl-l-bid .tbl-wrap tbody td:nth-child(6), .mbl-l-res .tbl-wrap tbody td:nth-child(4), .mbl-l-res .tbl-wrap tbody td:nth-child(5){ font-weight:400; } /* bid 액션행: [선택박스] + [분석요청] 나란히 */ .mbl-l-bid .tbl-wrap tbody td:nth-child(13){ flex:1 1 auto; border-top:0; margin-top:7px; padding-top:0; } .mbl-l-bid .tbl-wrap tbody td:nth-child(13) a{ min-height:42px; } /* ---- list-bar(결과·정렬·액션): 랩 + 여백 (한줄 깨짐 수정) ---- */ .mbl-bidlist .list-bar{ flex-wrap:wrap; gap:8px; row-gap:8px; } /* [FIX] flex-wrap 만 다시 선언하는 것으로는 아무 일도 일어나지 않았다(bidroom.css 에 이미 있음). 진짜 원인은 .dl-actions{flex-shrink:0} — 컨테이너가 절대 좁아지지 않으니 안쪽 wrap 이 발동할 일이 없고, 버튼 5개(≈550px)가 카드 밖으로 튀어나갔다. 한 줄을 통째로 쓰게 하고 줄어들 수 있게 풀어 준다. margin-left:auto 도 해제해야 왼쪽부터 채운다. */ .mbl-bidlist .list-bar .dl-actions{ flex:1 1 100%; min-width:0; margin-left:0; flex-wrap:wrap; gap:6px; justify-content:flex-start; } .mbl-bidlist .list-bar .dl-actions .tb-btn{ flex:0 1 auto; min-width:0; } /* ---- 상세 toolbar: 랩 (한줄 이탈 수정) ---- */ .mbl-dtl .toolbar{ flex-wrap:wrap; gap:6px; row-gap:6px; } .mbl-dtl .toolbar .abtn{ flex:0 1 auto; } /* [v3.1] 공유는 아이콘만 두면 못 찾는다 — 이 버튼만 라벨을 남기고 브랜드색으로 세운다. 상단고정·인쇄는 알고 쓰는 기능이라 아이콘만으로 충분하다. */ .mbl-dtl .tb-tools .tb-share .lb{ display:inline !important; } .mbl-dtl .tb-tools .tb-share{ border-color:#e0c9c9; color:#c0392b !important; } .mbl-dtl .tb-tools .tb-share i{ color:#c0392b !important; } /* ---- AI 인사이트: 1개씩 세로 ---- */ #vdv2.mbl-dtl .ai-row{ grid-template-columns:1fr; } #vrv2.mbl-dtl .ai-row{ grid-template-columns:1fr; } /* ---- qjump: 한 줄 + 가로 스크롤(활성 자동 스크롤은 JS) ---- */ .mbl-dtl .qjump{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .mbl-dtl .qjump::-webkit-scrollbar{ display:none; } .mbl-dtl .qjump-seg{ flex-wrap:nowrap; width:max-content; max-width:none; } .mbl-dtl .qjump a{ white-space:nowrap; } /* ---- 투찰업체 개찰결과: 검색줄 정리 + 부가버튼 숨김 ---- */ #vrv2.mbl-dtl .corp-bar{ flex-wrap:nowrap; gap:6px; } #vrv2.mbl-dtl .corp-bar select{ flex:0 0 auto; width:auto; max-width:88px; } #vrv2.mbl-dtl .corp-bar input[type=text]{ flex:1 1 auto; min-width:0; width:auto; } #vrv2.mbl-dtl .corp-bar .sbtn, #vrv2.mbl-dtl .corp-bar .gbtn{ flex:0 0 auto; white-space:nowrap; } #vrv2.mbl-dtl .corp-bar .abtn, #vrv2.mbl-dtl .corp-bar .spacer{ display:none; } /* 고정열은 폐기했다(위 4열 축약으로 불필요) — 업체명이 남는 폭을 다 쓰게만 해 둔다 */ #vrv2.mbl-dtl .corp_data .resTable2 td:nth-child(2){ min-width:0; } /* ---- 맞춤정보(#cbn2): 목록 카드 모드 (17열 → 카드) ---- * 5 공고명 / 6 지역 / 7 업종 / 8 기초금액(추정 줄 JS 제거) / 12 투찰마감 / * 13 개찰일 / 14 1순위 / 17 신청 + 1 선택박스. 나머지 숨김. */ #cbn2.mbl-cuslist .tbl-wrap{ overflow:visible; border:0; } #cbn2.mbl-cuslist .bidTbl{ display:block; width:100% !important; min-width:0; } #cbn2.mbl-cuslist .bidTbl thead{ display:none; } #cbn2.mbl-cuslist .bidTbl tbody{ display:block; } #cbn2.mbl-cuslist .bidTbl tbody tr{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px; border:1px solid #e7ebf2; border-radius:14px; background:#fff; padding:14px 16px 12px; margin-bottom:12px; box-shadow:0 1px 2px rgba(17,24,39,.04), 0 6px 18px rgba(17,24,39,.05); } #cbn2.mbl-cuslist .bidTbl tbody td{ display:block; border:0; height:auto; padding:2px 0; white-space:normal; text-align:left; } #cbn2.mbl-cuslist .bidTbl tbody td.bidcol{ flex:1 1 100%; order:-3; min-width:0; max-width:none; padding:0 0 9px; border-bottom:1px solid #f0f4f9; margin-bottom:6px; } #cbn2.mbl-cuslist .bidTbl tbody td.bidcol .bid-name{ font-size:14px; font-weight:800; line-height:1.45; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(6), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(7){ flex:0 0 auto; order:-2; font-size:11px; font-weight:400; color:#5b6b82; background:#f1f4f9; border-radius:999px; padding:3px 11px; margin-bottom:5px; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(8), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(12), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(13), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(14){ flex:1 1 100%; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px; font-size:13px; font-weight:400; border-bottom:1px solid #f4f6fa; font-variant-numeric:tabular-nums; white-space:nowrap; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(8) br, #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(12) br, #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(13) br{ display:none; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(8)::before{ content:"기초금액"; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(12)::before{ content:"투찰마감"; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(13)::before{ content:"개찰일"; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(14)::before{ content:"1순위"; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(8)::before, #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(12)::before, #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(13)::before, #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(14)::before{ font-size:11.5px; font-weight:600; color:#98a2b3; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(14){ border-bottom:0; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(1){ display:flex; order:9; flex:0 0 auto; align-items:center; justify-content:center; gap:7px; min-height:42px; margin-top:7px; padding:0 12px; border:1px solid #dde3ec; border-radius:11px; background:#fbfcfe; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(1) input{ width:21px; height:21px; accent-color:#ca1111; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(17){ flex:1 1 auto; order:9; margin-top:7px; padding:0; min-width:0; text-align:center; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(17) a{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:42px; border-radius:11px; font-size:13.5px; font-weight:800; text-decoration:none; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(17) .req-btn{ background:#ca1111; color:#fff !important; box-shadow:0 3px 10px rgba(202,17,17,.22); } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(17) .req-done{ background:#f1f4f9; color:#8a93a2 !important; } #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(2), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(3), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(4), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(9), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(10), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(11), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(15), #cbn2.mbl-cuslist .bidTbl tbody td:nth-child(16){ display:none; } #cbn2.mbl-cuslist .bidTbl tbody td[colspan]{ display:block !important; flex:1 1 100%; text-align:center; } /* 맞춤 검색줄: 높이 통일(40px), 통합검색+검색+초기화 한 줄 유지 */ #cbn2.mbl-cuslist .resbar .kwd input{ height:40px; } #cbn2.mbl-cuslist .resbar .abtn{ height:40px; } #cbn2.mbl-cuslist .resbar .dinp{ height:40px; } /* ---- 고객센터/커뮤니티: 사이드바 세로 1개씩(카드 행) + 게시판 목록 행 ---- */ .cbv2 .cbv2-side ul{ display:block; overflow:visible; padding-bottom:0; } .cbv2 .cbv2-side ul li{ display:flex; align-items:center; justify-content:space-between; white-space:normal; border-radius:12px; border:1px solid #e7ebf2; background:#fff; padding:12px 15px; margin-bottom:8px; font-size:13.5px; font-weight:700; color:#33405a; } .cbv2 .cbv2-side ul li .ar{ display:inline-block; color:#c1c9d4; } .cbv2 .cbv2-side .st{ margin-bottom:8px; } /* 게시판 목록: 표 → 2줄 행(제목 풀폭 + 날짜·조회 보조줄) */ .mbl-board .btbl{ display:block; overflow:visible; } .mbl-board .btbl thead{ display:none; } .mbl-board .btbl tbody{ display:block; } .mbl-board .btbl tbody tr{ display:flex; flex-wrap:wrap; gap:2px 10px; padding:11px 2px; border-bottom:1px solid #eef2f7; } .mbl-board .btbl tbody td{ display:block; border:0; height:auto; padding:0; white-space:normal; } .mbl-board .btbl tbody td:first-child{ order:2; font-size:11px; color:#98a2b3; } .mbl-board .btbl tbody td.subj{ flex:1 1 100%; order:1; font-size:13.5px; font-weight:700; word-break:break-all; } .mbl-board .btbl tbody td:nth-child(3), .mbl-board .btbl tbody td:nth-child(4){ order:3; font-size:11.5px; color:#98a2b3; } .mbl-board .btbl tbody td[colspan]{ flex:1 1 100%; text-align:center; } } /* ========================================================= * v1.9 추가 블록 — 전수조사(A목록·B상세팝업·C서비스/게시판·D크로스컷) 반영 * ========================================================= */ @media (max-width:1024px){ /* [A] 목록 셸 좌우 패딩 정합(#cbn2 등과 동일 14px) — cusWrap 18px 대응 */ .mbl-bidlist{ padding-left:14px; padding-right:14px; } /* [B] 계약현황(#vcv2) 데이터 표: BP-L 스크롤 패턴에 nowrap 누락분 보충 (.grid 는 gtbl/resTable 계열 목록에 없던 클래스) */ #vcv2.mbl-dtl .grid th, #vcv2.mbl-dtl .grid td{ white-space:nowrap; } /* [C] 서비스(빌링/결제) 표: 셀 줄바꿈으로 세로 붕괴 방지 — 자연폭 + 래퍼 스크롤. mbl-svc 스코프 실사용(게시판 .btbl 카드 변환과 충돌하지 않게 분리) */ .mbl-svc .btbl th, .mbl-svc .btbl td{ white-space:nowrap; } .cbv2 .tblwrap > table{ width:max-content !important; min-width:100%; } .cbv2 .tblwrap th, .cbv2 .tblwrap td{ white-space:nowrap; } } @media (max-width:768px){ /* ---- [A] 카드 타이포: cusWrap 돋움 상속 차단(목록 카드만 Noto) ---- */ .mbl-l-bid .tbl-wrap tbody tr, .mbl-l-res .tbl-wrap tbody tr, #cbn2.mbl-cuslist .bidTbl tbody tr{ font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif; } /* ---- [A] 페이저·정렬 칩: 터치 타깃 확보 ---- */ .mbl-bidlist .pager a, .mbl-bidlist .pager strong, .mbl-cuslist .pager a, .mbl-cuslist .pager strong{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:38px; } /* ---- [A] NewSetV2: 저장바 랩 + kw 드로어 인라인 2열 grid 스택 ---- */ #nsv2.mbl-cuslist .savebar{ flex-wrap:wrap; gap:8px; } #nsv2.mbl-cuslist .savebar .btn{ min-height:44px; } #nsv2.mbl-cuslist .drw > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; /* 인라인 style 대응 */ } /* ---- [B] 상세 sticky 체계 재정렬: 모바일은 헤더 비고정 + toolbar 가 랩되어 높이가 유동 → toolbar 는 흐름 배치, qjump 만 최상단 sticky 로 유지. 카드 anchor 여백은 qjump 높이(≈48px)에 맞춘다. (인라인 top:53px 대응) ---- */ #vdv2.mbl-dtl .toolbar, #vrv2.mbl-dtl .toolbar{ position:static; } #vdv2.mbl-dtl .qjump, #vrv2.mbl-dtl .qjump{ top:0; } #vdv2.mbl-dtl .card, #vrv2.mbl-dtl .card{ scroll-margin-top:56px; } #vrv2.mbl-dtl .rail-sticky{ position:static; } /* ---- [B] 상세 타이틀: 건수 배지 포함 시 줄바꿈 허용 ---- */ .mbl-dtl .page-h{ flex-wrap:wrap; } /* ---- [C] cbv2 입력: 페이지 인라인 스타일(13px 등)이 일반 16px 규칙보다 특이도가 높아 iOS 포커스 확대가 재발 → 스코프 재정의 ---- */ .cbv2 .cin, .cbv2 .cin.sm, .cbv2 .cin.lg, .cbv2 .ctarea, .cbv2 .searchbar input[type=text], .cbv2 .frm input, .cbv2 .frm select, .cbv2 .subgrid input, .cbv2 .subgrid select{ font-size:16px !important; } /* ---- [C] 서비스 소형 버튼(매출전표/보기/신청/조회): 터치 타깃 ---- */ .mbl-svc .minibtn{ display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 12px; } /* ---- [C] 게시판 목록: 번호는 모바일 노이즈 → 숨김, 공지 배지만 유지 (:has 미지원 구형 브라우저는 번호·배지 모두 숨김 — 열람에 지장 없음) ---- */ .mbl-board .btbl tbody td:first-child{ display:none; } .mbl-board .btbl tbody td:first-child:has(.badge-pin){ display:block; order:0; } .mbl-board .btbl tbody td[colspan]{ display:block; } /* ---- [C] 게시글 본문: 폭 초과 콘텐츠(표·코드)는 본문 내부 스크롤 ---- */ .mbl-board .vbody{ overflow-x:auto; -webkit-overflow-scrolling:touch; } } @media (max-width:480px){ /* [A] 좌우 패딩 정합(12px) — 목록·투찰결과 셸 */ .mbl-bidlist{ padding-left:12px; padding-right:12px; } #brv2wrap.mbl-myres{ padding-left:12px; padding-right:12px; } } /* ========================================================= * v2.0 추가 블록 — 실기기 피드백 3차(사이드바 아코디언·액션행 버튼· * 투찰결과/업체목록 카드 모드·카드 단위 hover) * ========================================================= */ @media (max-width:768px){ /* ---- [2] cbv2 사이드바: sticky 가로 칩 탭 바(JS 가 .mbl-chips 부착 + 활성 칩 센터링) v1.8 의 세로 카드 행 규칙을 .mbl-chips 특이도로 재정의 ---- */ .cbv2 .cbv2-side.mbl-chips{ /* [v3.1 · 원인] 이 칩 바만 좌우 스크롤이 안 되던 이유. .cbv2-inner 는 align-items:flex-start 인 flex 컨테이너이고, 모바일에서 flex-direction:column 이 된다. 세로 방향에서 교차축은 '가로'인데 align-items 가 stretch 가 아니라 flex-start 라서 자식이 **내용 폭(shrink-to-fit)** 으로 잡힌다. 게다가 아래 width:auto 가 인라인 규칙의 width:100% 를 덮는다. → aside 가 칩 전체 폭(~416px)만큼 넓어지고, 그 안의 ul 도 같은 폭이 되어 **컨테이너와 내용의 폭이 같아진다 = 스크롤할 거리가 0**. 넘친 부분은 페이지 밖으로 잘려서 "마지막 칩이 안 보이고 밀리지도 않는" 상태가 된다. 다른 칩·캐러셀들은 일반 블록 흐름 안에 있어 컨테이너 폭이 화면에 묶여 있었고, 그래서 같은 CSS 로도 정상 동작했다. align-self:stretch 로 교차축을 채우게 만들면 폭이 화면에 묶이고 스크롤이 살아난다. */ align-self:stretch; max-width:100%; min-width:0; position:sticky; top:0; z-index:80; background:#faf8f8; border:0; border-radius:0; box-shadow:none; padding:6px 0 10px; margin:0; overflow:visible; /* [검수 N-08·B-13] 각 사이드바의 풀블리드 규칙(margin:0 -14px + width:calc(100%+28px)) 중 margin 만 여기서 0 으로 되돌리고 width 를 안 되돌려, 칩 바가 28px 만큼 오른쪽으로 넘쳤다(infoQEV2·infoLwltRateV2·requestV2 세 화면 동일). */ width:auto; } .cbv2 .cbv2-side.mbl-chips .st{ display:none; } /* 섹션 타이틀 박스는 페이지 헤드가 대신함 */ .cbv2 .cbv2-side.mbl-chips ul{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 4px; margin:0; scrollbar-width:none; max-width:100%; min-width:0; /* [v3.0] 칩 바는 화면 최상단 sticky 라 앱에서 '당겨서 새로고침' 제스처와 겹쳤다. 앱은 v3.0.1 에서 새로고침을 걷어냈고, 여기서는 가로 스크롤이 부모(문서 세로 스크롤· 브라우저 뒤로가기 스와이프)로 새 나가지 않게 가둔다. */ overscroll-behavior-x:contain; } .cbv2 .cbv2-side.mbl-chips ul::-webkit-scrollbar{ display:none; } .cbv2 .cbv2-side.mbl-chips ul li{ display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; white-space:nowrap; min-height:40px; margin:0; padding:0 15px; border:1px solid #e0e5ee; border-radius:999px; background:#fff; font-size:13px; font-weight:700; color:#4a5568; box-shadow:none; } .cbv2 .cbv2-side.mbl-chips ul li .ar{ display:none; } .cbv2 .cbv2-side.mbl-chips ul li i.lead{ color:#a9b2c0; } .cbv2 .cbv2-side.mbl-chips ul li.on{ background:var(--pri); border-color:var(--pri); color:#fff; font-weight:800; } .cbv2 .cbv2-side.mbl-chips ul li.on i.lead{ color:#fff; } /* [v3.0] 좁은 화면에서는 칩 4개(공지사항·블로그소식·FAQ·자료실)가 화면보다 ~50px 넓어 마지막 칩이 잘렸다. 50px 짜리 가로 스크롤은 있어도 "안 넘어간다"로 느껴진다. 앞쪽 아이콘을 접으면(개당 19px × 4) 네 개가 한 화면에 다 들어와 스크롤 자체가 불필요해진다. 글자만 남아도 무슨 메뉴인지 알 수 있는 라벨이라 잃는 정보가 없다. overflow-x:auto 는 그대로 둔다 — 항목이 늘면 다시 스크롤로 감당한다. */ @media (max-width:430px){ .cbv2 .cbv2-side.mbl-chips ul li i.lead{ display:none; } .cbv2 .cbv2-side.mbl-chips ul li{ padding:0 13px; gap:0; } } /* ---- [2-b] '적용된 검색조건' 바: 칩과 [전체해제] 겹침 ---- .condbar 는 flex 한 줄에 [라벨][#condChips flex:1][전체해제 margin-left:auto] 를 놓는다. 좁은 화면에서 #condChips 가 얻는 폭은 150px 안팎인데, 칩 하나가 white-space:nowrap 이라 그보다 길면 상자 밖으로 삐져나와 [전체해제] 위에 겹쳐 그려진다. → 칩 줄을 통째로 한 줄 내려 자기 폭(100%)을 갖게 하고, 긴 칩은 줄바꿈시킨다. */ .condbar{ align-items:flex-start; row-gap:8px; } .condbar .cb-lab{ order:0; } .condbar .cond-clear{ order:1; margin-left:auto; } .condbar #condChips{ order:2; flex:0 0 100%; width:100%; min-width:0; } .condbar .cchip{ max-width:100%; white-space:normal; height:auto; padding:4px 5px 4px 11px; } .condbar .cchip .cx{ flex:0 0 auto; } /* ---- [2-c] 목록 카드 본문 좌측 공백 ---- .mbc-body 의 왼쪽 패딩 43px 은 카드 머리의 체크박스(.mbc-chk 20px) 자리를 비워 둔 값인데, 그 체크박스는 .mbc-chk{display:none} 으로 항상 숨겨져 있다(legacy-show 를 붙이는 코드가 없다). 즉 아무것도 없는 자리를 30px 비워 두고 있었고, 좁은 화면에서 그만큼 카드가 좁아졌다. 좌우를 같게 맞춰 꽉 채운다. */ .mbc-body{ padding-left:13px; } /* ---- [2-d] 투찰업체 개찰결과: 사정율 칸 오른쪽 테두리 ---- 사정율은 값(7)·편차(8) 두 칸으로 나뉘어 있고, 한 값이라 사이 경계를 지운다 (td:nth-child(7){border-right:0}). 그런데 모바일 4열 모드(.mo4)는 8·9 칸을 감춰서 7 번 칸이 **표의 마지막 칸**이 된다 — 지워 둔 그 경계가 곧 표의 오른쪽 테두리라 테두리가 없는 것처럼 보였다. 마지막 칸이 되는 모바일에서만 되살린다. */ #vrv2.mbl-dtl .corp_data .resTable2.mo4 tbody td:nth-child(7){ border-right:1px solid #eef1f6 !important; } #vrv2.mbl-dtl .corp_data .resTable2.mo4 thead th:last-child{ border-right:1px solid #e6ecf3 !important; } /* ---- [2-e] 목록 카드 머리: 공고명·발주처의 왼쪽 들여쓰기 ---- .mbc-top 은 [체크박스 20px][gap 10px][본문] 을 한 줄에 놓는 flex 라, 공고명·발주처가 좌측에서 30px 안쪽에서 시작한다. 그 아래 .mbc-body 는 [2-c] 에서 좌우를 13px 로 맞췄기 때문에 **머리만 혼자 들여써져** 카드가 어긋나 보인다. 체크박스를 줄 끝으로 보내면 본문이 카드 왼쪽 끝에서 시작해 아래와 정렬된다. (체크박스는 그대로 같은 줄에 있고 탭 영역도 유지된다) */ .mbc-top{ padding-left:13px; } .mbc-top .mbc-chk{ order:2; margin-left:10px; } .mbc-top .mbc-head{ order:1; } /* ---- [2-f] 낙찰정보: 검색결과 배지와 [아이콘 설명] 을 한 줄에 ---- .list-bar 를 wrap 으로 열어 둬서 배지와 액션이 줄을 나눠 썼다. 낙찰정보는 액션이 세 개뿐이라 한 줄에 들어간다 — 배지는 고정, 액션은 오른쪽으로. */ .mbl-l-res .list-bar{ flex-wrap:nowrap; align-items:center; } .mbl-l-res .list-bar .result-badge{ flex:0 0 auto; } .mbl-l-res .list-bar .dl-actions{ flex:1 1 auto; min-width:0; margin-left:auto; display:flex; justify-content:flex-end; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .mbl-l-res .list-bar .dl-actions::-webkit-scrollbar{ display:none; } .mbl-l-res .list-bar .dl-actions .tb-btn{ flex:0 0 auto; } /* ---- [2-g] 분석실: 검색결과 줄이 세로로 쌓이던 문제 ---- .tb-row 가 좁은 폭에서 줄바꿈되며 '검색결과 / N / 건' 이 세로로 떨어졌다. 배지 안쪽은 절대 쪼개지지 않게 묶고, 줄 자체는 가로 스크롤로 감당한다. */ /* [v3.6] 분석실 툴바도 줄바꿈. 가로로 숨기면 무엇이 있는지 알 수 없다. '검색결과 N건' 처럼 **덩어리 안에서** 갈라지면 안 되는 것만 nowrap 으로 묶는다. */ .cusWrap .tb-row{ display:flex; align-items:center; gap:8px; row-gap:6px; flex-wrap:wrap; } .cusWrap .tb-row > *{ flex:0 0 auto; max-width:100%; } .cusWrap .result-badge{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; } .cusWrap .result-badge b, .cusWrap .result-badge em, .cusWrap .result-badge i{ display:inline; white-space:nowrap; } /* ---- [2-h] 분석실 빠른필터: 세로로 쌓이고 칩이 상자를 벗어나던 문제 ---- .dl-summary 가 wrap 이라 칩이 줄줄이 내려갔고, 라벨('빠른필터')이 자리를 먹어 마지막 칩이 상자 밖으로 밀렸다. 한 줄 가로 스크롤로 바꾸고 상자 안에 가둔다. */ /* [v3.7] 가로 스크롤이 아니라 **줄바꿈**이다(대표 지시). 가로로 숨기면 어떤 필터가 있는지 알 수 없고, 한 화면에 다 보이는 편이 낫다. */ .dl-summary{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; row-gap:6px; max-width:100%; min-width:0; } .dl-summary > *{ flex:0 0 auto; max-width:100%; } .dl-summary .dls-lab{ flex:0 0 auto; } .cusWrap .list-bar{ max-width:100%; min-width:0; } /* ---- [2-i] 메모 있음 상태 ---- 색만 바꾸면(펜이 빨개짐) 놓치기 쉽고 색각 이상 사용자에게는 전달되지 않는다. 상위 앱들이 쓰는 방식대로 **모양·글자·내용** 세 가지를 함께 바꾼다. 여기서는 모양(채운 칩)을 맡고, 글자('메모 1')와 내용(카드의 메모 줄)은 JS 가 맡는다. */ .mbc-act .mbc-memobtn.has{ background:#fdf3f3; color:#c0392b !important; font-weight:800; box-shadow:inset 0 0 0 1px #f0d5d5; } .mbc-act .mbc-memobtn.has .mi{ color:#c0392b !important; } .mbc-body .mbc-memo .v{ color:#5b6573 !important; font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; } /* ---- [2-j] 상단고정 토글이 먹지 않던 문제 ---- 아래 [B] 블록이 모바일에서 toolbar 를 position:static 으로 못 박아 두어, [상단고정 켜기] 를 눌러도 아무 일이 없었다. 토글 상태를 존중하도록 되돌린다. (끄기는 .nosticky 로 표현되므로 그때만 static 이면 된다) */ #vdv2.mbl-dtl:not(.nosticky) .toolbar, #vrv2.mbl-dtl:not(.nosticky) .toolbar{ position:sticky; top:0; z-index:60; } #vdv2.mbl-dtl.nosticky .toolbar, #vrv2.mbl-dtl.nosticky .toolbar{ position:static; } /* ---- [2-k] 히어로 배지·상단 툴바를 한 줄로 ---- 둘 다 flex-wrap:wrap 이라 좁은 폭에서 줄이 갈렸고, 히어로는 상태 배지가 margin-left:auto 로 오른쪽에 붙어 왼쪽 묶음과 따로 놀았다. 왼쪽부터 쭉 한 줄로 세우고, 넘치는 만큼은 가로 스크롤로 넘긴다. */ /* [v3.6] 가로 스크롤이 아니라 **줄바꿈**이다(대표 지시). 숨은 내용이 생기지 않고 한 화면에서 전부 보이는 편이 낫다. 왼쪽부터 채우다가 넘치면 다음 줄로 내려간다. ※ overflow-x 를 걸면 그 요소 안의 sticky 가 죽으므로, 여기서는 절대 걸지 않는다. */ .mbl-dtl .hero-top, .mbl-dtl .hero-badges, .mbl-dtl .toolbar, .mbl-dtl .tb-tools{ display:flex; flex-wrap:wrap !important; align-items:center; gap:6px; row-gap:6px; max-width:100%; min-width:0; } .mbl-dtl .hero-top > *, .mbl-dtl .hero-badges > *, .mbl-dtl .toolbar > *, .mbl-dtl .tb-tools > *{ flex:0 0 auto; max-width:100%; } /* 오른쪽으로 밀어내던 규칙 해제 — 한 줄이면 왼쪽부터 순서대로가 맞다 */ .mbl-dtl .hero-top .status-bar{ margin-left:0 !important; } .mbl-dtl .toolbar > div[style*="flex:1"]{ display:none !important; } .mbl-dtl .hero-badges{ margin-bottom:0 !important; } /* ---- [2-l] 분석실 툴바: 업체 선택과 [이전버전으로보기] 가 카드를 넘치던 문제 ---- .tb-row 를 한 줄 가로 스크롤로 바꿨으므로(2-g) 안쪽 요소가 스스로 줄어들어야 한다. 업체 select 는 길어질 수 있어 상한을 두고 말줄임, 여백 채우개는 접는다. */ /* 이전버전으로보기: 모바일에서는 감춘다(대표 지시) — 구버전 화면은 PC 전용 동선이다 */ .cusWrap .tb-row a[href*="SetVer/old"]{ display:none !important; } .cusWrap .company-wrap{ display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; } .cusWrap .company-wrap > span, .cusWrap .company-wrap select{ min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cusWrap .tb-grow{ display:none !important; } .cusWrap .tb-sep{ flex:0 0 auto; } /* ---- [2-m] 분석실 검색카드 배치 (대표 지시) ---- 통합검색 ← 한 줄 풀폭 업체명 ← 한 줄 풀폭 초기화·연락처·카카오 ← 한 줄, 균등, 가운데 페이지(bid_new.php)에 이미 이 의도의 규칙이 있었는데, 위 [2-g] 에서 넣은 `.cusWrap .tb-row > *{flex:0 0 auto}` 가 같은 특이도이면서 나중에 로드돼(외부 CSS 가 인라인