/* ========================================================================== bb-extras.css — ★바로분양 «얹는» 옷 (담당: 딴파일0913 · 2026-09-13) ★이 파일은 ★새 파일이다. index.html 을 ★한 줄도 고치지 않는다. 총괄이 index.html 에 한 줄만 붙이면 적용된다. 붙이는 자리 → data_붙일두줄_20260913.md 정본 : ★★★바로분양_정본_대표직권_20260913.md 하는 일 셋 ① 맨 위를 ★한 줄로 (업자 메뉴를 ★숨기고 푸터 «파트너 안내»로 모은다. ★지우지 않는다) ② 예산·입주로 ★진짜 걸러진 결과를 보여 줄 자리 ③ 목록 카드의 ★비교 담기 + ★비교 표 + ★상담으로 잇기 ★숨기기는 반드시 CSS 로 한다 — index.html 의 restoreTradeChrome() 이 a.style.display='' 로 ★인라인만 지운다. CSS !important 는 살아남는다. ========================================================================== */ :root{ --bb-key:#B0553A; /* 단풍 주홍 — ★강조색 하나만 */ --bb-key-2:#91422C; --bb-key-soft:#FAEDE5; --bb-paper:#FFFDF9; --bb-ground:#F7F0E6; --bb-ink:#2A211A; --bb-body:#6B5B4E; --bb-mute:#A0958A; --bb-line:#E9DFD0; --bb-r:8px; --bb-r-sm:4px; } /* ────────────────────────────────────────────────────────────────────── ① 맨 위 — ★한 줄 ────────────────────────────────────────────────────────────────────── */ /* 위 줄의 지역 고르개는 ★히어로의 「희망 지역」이 대신한다. ★지우지 않는다 — bb-extras.js 가 이 select 에 값을 넣어 기존 거르개를 움직인다. */ .brand-row .region-select{ display:none !important; } /* 위아래 ★중복 검색창 → 검색은 ★한 곳. bb-extras.js 가 .search-box 를 ★히어로 밑으로 «옮긴다»(DOM 이동 = 리스너 유지). 아래 선택자는 «.brand-row 안에 있을 때»만 먹으므로, 옮겨지면 저절로 풀린다. ★옮기기가 실패해도 맨 위는 한 줄로 남는다. */ .brand-row .search-box{ display:none !important; } /* 탭바 — ★손님 것만 남긴다. 업자 것은 ★숨긴다(요소는 그대로 — JS 가 찾는다) */ #tabBar a[data-tab="top"], #tabBar a[data-tab="supporters"], #tabBar a[data-tab="staffSignup"], #tabBar a[data-tab="partners"]{ display:none !important; } /* 맨 위 오른쪽 — 업자용 링크는 ★푸터 「파트너 안내」로 옮긴다(bb-extras.js). 옮기기 전/실패 시에도 첫 줄이 밀리지 않게 여기서 내려 둔다(!important 는 안 쓴다 — 로그인 위젯의 인라인 display 를 막지 않기 위해서다). */ .brand-cta a[href="community.html"], .brand-cta a[href="marketer.html"], .brand-cta .nav-cta-outline{ display:none; } /* PC — ★진짜 한 줄. 「로고 / 분양 찾기 / 현장 비교 / 분양 가이드 / 맞춤 상담」 */ .bb-nav{ display:flex; align-items:center; gap:24px; margin-left:16px; } .bb-nav a{ font-size:15px; font-weight:600; color:var(--bb-body); text-decoration:none; white-space:nowrap; padding:6px 0; } .bb-nav a:hover{ color:var(--bb-key); } @media (min-width:901px){ /* 둘째 줄(탭바)은 PC 에서 접는다 — 같은 메뉴가 위에 들어갔다. ★지우지 않는다. 폰에서는 그대로 쓴다 */ .tab-bar-wrap{ display:none !important; } } @media (max-width:900px){ .bb-nav{ display:none; } } /* 새 손님 단추 둘 — 관심 현장(테두리) · 맞춤 상담(채움) */ .bb-navbtn{ display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:13px; font-weight:700; white-space:nowrap; padding:9px 15px; border-radius:var(--bb-r-sm); cursor:pointer; border:1px solid var(--bb-key); background:var(--bb-key); color:#fff; text-decoration:none; transition:background .15s ease; } .bb-navbtn:hover{ background:var(--bb-key-2); border-color:var(--bb-key-2); } .bb-navbtn.out{ background:transparent; color:var(--bb-key); } .bb-navbtn.out:hover{ background:var(--bb-key-soft); } .bb-navbtn svg{ width:14px; height:14px; flex:none; } .bb-navbtn .bb-n{ font-variant-numeric:tabular-nums; } /* 푸터 「파트너 안내」로 옮겨 온 링크들 — 푸터 글꼴에 맞춘다 */ .foot-col .mypage-link, .foot-col .nav-cta, .foot-col .nav-cta-outline{ display:block !important; background:none !important; border:0 !important; padding:0 !important; font-size:13px; font-weight:500; color:rgba(255,255,255,.72) !important; text-decoration:none; white-space:normal; } .foot-col .mypage-link:hover, .foot-col .nav-cta:hover, .foot-col .nav-cta-outline:hover{ color:#fff !important; text-decoration:underline; } .foot-col .login-widget-user{ display:flex; gap:10px; } /* 첫 화면에서 ★「전체 등록·홍보 가능 227개」를 뺀다 (정본 ★2 표). 요소는 남긴다 — updateMiniStats() 가 여기에 글자를 쓴다. */ #listings .mini-stats{ display:none !important; } /* ────────────────────────────────────────────────────────────────────── 검색창이 히어로 밑으로 내려온 모습 ────────────────────────────────────────────────────────────────────── */ .bb-search-hold{ max-width:1180px; margin:12px auto 0; padding:0 34px; display:flex; align-items:center; gap:10px; } .bb-search-hold > .bb-lbl{ font-size:13px; font-weight:700; color:var(--bb-mute); flex:none; } .bb-search-hold .search-box{ flex:1 1 auto; max-width:none; border-color:var(--bb-line); border-radius:var(--bb-r-sm); } /* ────────────────────────────────────────────────────────────────────── ② 거른 결과 · ③ 비교 표 — ★목록 ★위에 뜬다 ────────────────────────────────────────────────────────────────────── */ .bb-panel{ max-width:1180px; margin:0 auto; padding:0 34px; } .bb-panel > *:first-child{ margin-top:0; } .bb-box{ background:var(--bb-paper); border:1px solid var(--bb-line); border-radius:var(--bb-r); padding:18px 20px; margin:22px 0 0; } .bb-box.key{ border-color:var(--bb-key); } .bb-box.soft{ background:var(--bb-ground); } .bb-count{ margin:0; font-family:"Noto Serif KR",serif; font-weight:600; letter-spacing:-.03em; font-size:19px; line-height:1.4; color:var(--bb-ink); } .bb-count b{ color:var(--bb-key); font-weight:700; } .bb-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 0; } .bb-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--bb-key); background:var(--bb-key-soft); border:1px solid var(--bb-line); border-radius:999px; padding:5px 10px; } .bb-chip button{ border:0; background:none; cursor:pointer; color:var(--bb-key); font-family:inherit; font-size:13px; font-weight:700; line-height:1; padding:0; } .bb-note{ margin:10px 0 0; font-size:13.5px; line-height:1.7; color:var(--bb-body); } .bb-note.quiet{ color:var(--bb-mute); font-size:12.5px; } /* 조건을 ★한 칸씩 풀어 보는 단추 (0곳일 때) */ .bb-loosen{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; } .bb-loosen button{ font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; color:var(--bb-key); background:#fff; border:1px solid var(--bb-key); border-radius:var(--bb-r-sm); padding:9px 13px; } .bb-loosen button:hover{ background:var(--bb-key-soft); } /* 비교 표 */ .bb-cmp-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .bb-cmp-head h3{ margin:0; font-family:"Noto Serif KR",serif; font-weight:600; font-size:18px; letter-spacing:-.03em; color:var(--bb-ink); } .bb-cmp-head .bb-clear{ margin-left:auto; border:0; background:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; color:var(--bb-mute); } .bb-cmp-head .bb-clear:hover{ color:var(--bb-key); text-decoration:underline; } .bb-tablewrap{ overflow-x:auto; margin:14px 0 0; } table.bb-table{ width:100%; min-width:420px; border-collapse:collapse; background:#fff; border:1px solid var(--bb-line); border-radius:var(--bb-r-sm); } table.bb-table th, table.bb-table td{ padding:12px 14px; text-align:center; font-size:14.5px; border-bottom:1px solid var(--bb-line); color:var(--bb-ink); } table.bb-table thead th{ font-family:"Noto Serif KR",serif; font-weight:600; font-size:15.5px; letter-spacing:-.03em; } table.bb-table tbody th{ text-align:left; font-size:13px; font-weight:600; color:var(--bb-mute); background:var(--bb-ground); width:24%; white-space:nowrap; } table.bb-table tr:last-child th, table.bb-table tr:last-child td{ border-bottom:0; } table.bb-table td.bb-p{ color:var(--bb-key); font-weight:700; font-size:16px; letter-spacing:-.02em; } table.bb-table td.bb-na{ color:var(--bb-mute); font-weight:600; font-size:13.5px; } .bb-ask{ display:inline-flex; align-items:center; gap:8px; margin:16px 0 0; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; border:0; border-radius:var(--bb-r-sm); padding:13px 22px; background:var(--bb-key); color:#fff; transition:background .15s ease; } .bb-ask:hover{ background:var(--bb-key-2); } /* 가까운 조건 / 분양가 미공개 — ★작은 줄 목록 (카드를 두 번 그리지 않는다) */ .bb-rows{ margin:12px 0 0; border-top:1px solid var(--bb-line); } .bb-row{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 2px; border-bottom:1px solid var(--bb-line); background:none; border-left:0; border-right:0; border-top:0; font-family:inherit; text-align:left; cursor:pointer; color:inherit; } .bb-row:hover{ background:var(--bb-key-soft); } .bb-row .bb-rgn{ font-size:12.5px; font-weight:700; color:var(--bb-mute); flex:none; min-width:52px; } .bb-row .bb-nm{ font-size:14.5px; font-weight:700; color:var(--bb-ink); letter-spacing:-.02em; } .bb-row .bb-mv{ margin-left:auto; font-size:13px; font-weight:600; color:var(--bb-body); flex:none; } .bb-more{ margin:12px 0 0; border:0; background:none; cursor:pointer; padding:0; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--bb-key); } .bb-more:hover{ text-decoration:underline; } /* ────────────────────────────────────────────────────────────────────── ③ 목록 카드 — ★비교 담기 한 줄 ────────────────────────────────────────────────────────────────────── */ .bb-pick-row{ display:flex; align-items:center; gap:10px; margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--bb-line); } .bb-pick{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--bb-ink); cursor:pointer; user-select:none; } .bb-pick input{ appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; position:relative; cursor:pointer; border:1.5px solid var(--bb-line); border-radius:3px; background:#fff; margin:0; } .bb-pick input:checked{ background:var(--bb-key); border-color:var(--bb-key); } .bb-pick input:checked::after{ content:""; position:absolute; left:5px; top:1.5px; width:5px; height:10px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg); } .bb-pick input:focus-visible{ outline:2px solid var(--bb-key); outline-offset:2px; } .bb-pick-row .bb-detail{ margin-left:auto; font-size:13px; font-weight:700; color:var(--bb-body); text-decoration:none; } .bb-pick-row .bb-detail:hover{ color:var(--bb-key); } /* ★2026-09-14 대표 지적 — 「비교담기 깨진거 고쳐」 ★폰(411px)에서 카드가 ★2단이라 칸 안쪽이 ★162px 밖에 안 된다. 그 안에 ☐18 + 「비교 담기」65 + 「자세히 보기 ↗」95 = ★196px 을 한 줄에 넣으려니 ★글자 한가운데서 잘려 「비교 담 / 기」로 깨졌다. ★고치는 법 — ①낱말은 ★안 끊는다 ②줄이 모자라면 ★줄째로 내린다. ★카드를 1단으로 바꾸지 않는다 — 폰 손님이 ★한 화면에 두 곳을 보는 편이 낫다. */ .bb-pick-row{ flex-wrap:wrap; row-gap:8px; } .bb-pick{ white-space:nowrap; } .bb-pick span{ white-space:nowrap; } .bb-pick-row .bb-detail{ white-space:nowrap; } /* 담은 카드는 ★테두리로 표시 */ .listing-card.bb-picked{ border-color:var(--bb-key) !important; box-shadow:0 4px 14px rgba(176,85,58,.16); } /* ────────────────────────────────────────────────────────────────────── 폰 아래 고정 띠 ★2026-09-14 (하단띠2_0914) — 「상담사 지원」을 ★다시 살렸다 (대표 직권 「★★상담사랑 ★상담신청이 ★있어야지」). 우리 사업이 ★현장 전담 상담사 네트워크라 상담사 모으는 것이 ★본업의 한 축이다. 숨기면 안 된다. ★옛 줄: .mobile-bar a.staff-mini{ display:none !important; } (2026-09-13 에 이 한 줄 때문에 띠에 ★손님 단추 하나 · 업자 단추 ★0 이 됐었다) ★「맞춤 상담」(.bb-mb) 자리는 index.html 의 #mbHomeConsultBtn「상담 신청」이 대신한다. bb-extras.js 폰띠정리() 가 상담 단추를 이미 찾으면 .bb-mb 를 ★안 붙인다. ────────────────────────────────────────────────────────────────────── */ .mobile-bar .bb-mb{ flex:0 0 38%; font-family:inherit; font-size:13.5px; font-weight:800; border:0; border-radius:var(--bb-r-sm); cursor:pointer; background:var(--bb-key); color:#fff; padding:12px 6px; } .mobile-bar .bb-mb:active{ background:var(--bb-key-2); } /* ────────────────────────────────────────────────────────────────────── 분양 가이드 — 탭바 「분양 가이드」가 닿을 자리 ────────────────────────────────────────────────────────────────────── */ .bb-guide{ background:var(--bb-ground); padding:40px 0; } .bb-guide .bb-in{ max-width:1180px; margin:0 auto; padding:0 34px; } .bb-guide h2{ margin:0 0 6px; font-family:"Noto Serif KR",serif; font-weight:600; font-size:25px; letter-spacing:-.035em; color:var(--bb-ink); } .bb-guide > .bb-in > p{ margin:0 0 18px; font-size:14.5px; color:var(--bb-body); } .bb-guide details{ background:var(--bb-paper); border:1px solid var(--bb-line); border-radius:var(--bb-r); padding:14px 18px; margin:0 0 10px; } .bb-guide summary{ cursor:pointer; font-size:15.5px; font-weight:700; color:var(--bb-ink); letter-spacing:-.02em; } .bb-guide details p{ margin:10px 0 0; font-size:14px; line-height:1.78; color:var(--bb-body); } /* ────────────────────────────────────────────────────────────────────── 폰 (≤640px) — ★맨 위 한 줄 · ★「맞춤 상담」은 ★항상 보인다 ────────────────────────────────────────────────────────────────────── */ @media (max-width:640px){ /* 원본 CSS 는 폰에서 .brand-cta 를 통째로 숨긴다 → 손님 단추가 사라진다. 되살린다 */ .brand-row{ flex-wrap:nowrap !important; } .brand-cta{ display:flex !important; gap:6px; margin-left:auto; } .brand-cta a[href="community.html"], .brand-cta a[href="marketer.html"], .brand-cta .nav-cta-outline, .brand-cta .mypage-link, .brand-cta .login-widget-user{ display:none !important; } .brand-cta .bb-navbtn{ display:inline-flex !important; } /* 한 줄에 들어가게 — 로고 옆 영문 표기는 폰에서 접는다(푸터에 그대로 있다) */ .logo .tag{ display:none; } .bb-navbtn{ font-size:12px; padding:8px 11px; gap:4px; } .bb-navbtn.out{ padding:8px 9px; } .bb-search-hold{ margin-top:10px; padding:0 18px; } .bb-search-hold > .bb-lbl{ display:none; } .bb-panel{ padding:0 18px; } .bb-box{ padding:15px 16px; margin-top:18px; } .bb-count{ font-size:17px; } .bb-guide{ padding:30px 0; } .bb-guide .bb-in{ padding:0 18px; } .bb-guide h2{ font-size:21px; } table.bb-table th, table.bb-table td{ padding:10px 9px; font-size:13.5px; } table.bb-table thead th{ font-size:14px; } .bb-ask{ width:100%; justify-content:center; } } /* ════════════════════════════════════════════════════════════════ ★2026-09-17 — ★손가락 자리 (대표 직권 「모바일에서 작은 버튼」) ★잰 값 (폰 375px, 2026-09-17) 찜 하트 30×30 지역 탭 56×35 쪽수 45×34 고르개 307×30 최근 칩 93×29 자세히 보기 74×20 ★손가락이 닿는 자리는 ★44px 이 기준이다 (애플·구글 지침). ★모양은 그대로 둔다 — «보이는 크기»가 아니라 ★«닿는 자리»만 넓힌다. ::before 로 투명한 판을 깔면 ★자리가 하나도 안 밀린다. ★고르개·탭·쪽수는 원래 자리를 차지하는 것들이라 ★키를 44 로 올린다. ════════════════════════════════════════════════════════════════ */ /* ── 모양을 안 바꾸고 «닿는 자리»만 넓히는 것들 ── */ .fav-btn{ position:absolute } /* 이미 absolute — 다시 못 박는다 */ .fav-btn::before{ content:""; position:absolute; inset:-7px; border-radius:50%; } .bb-detail{ position:relative; display:inline-block; } .bb-detail::before{ content:""; position:absolute; inset:-12px 0; } /* ★가로로 넓히지 않는다 — 옆 단추의 누름을 가로챈다 */ .listing-title{ position:relative; display:inline-block; } .listing-title::before{ content:""; position:absolute; inset:-14px 0; } /* ★가로 확장 금지 — 찜 하트를 덮는다 */ /* ── 자리를 차지하는 것들은 키를 올린다 ── */ .main-tab-btn{ min-height:44px; display:inline-flex; align-items:center; } .page-btn{ min-height:44px; min-width:44px; } .recent-chip{ min-height:44px; display:inline-flex; align-items:center; } .bb-filter select, .bb-filters select, select.bb-select, .filter-row select{ min-height:44px; } /* ★고르개는 모양이 제각각이라 «보이는 것 전부»를 한 번에 올린다. ★손으로 하나씩 고르면 또 빠진다 — 2026-09-17 에 형제 링크가 그렇게 빠졌다. */ select{ min-height:44px; } /* ★2026-09-17 (2차) — 남은 작은 단추들. 잰 값: 관심 현장 86×32 · 맞춤 상담 68×37 · 돌아가기 129×20 · 찜하기 76×31 전화번호 112×29 · 상담사 안내 263×25 · 전문망 칩 78×28 ★전문망 칩은 ★내가 오늘 만든 것이다. 나도 작은 단추를 만들었다 — 같이 올린다. ★지도(leaflet) 확대·축소는 그 라이브러리 기본값이라 건드리지 않는다. */ .bb-navbtn, .nav-cta{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .detail-fav-btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .detail-back{ position:relative; display:inline-block; } .detail-back::before{ content:""; position:absolute; inset:-12px 0; } .detail-phone-num{ position:relative; display:inline-block; } .detail-phone-num::before{ content:""; position:absolute; inset:-8px 0; } .detail-staff-cta{ position:relative; display:inline-block; } .detail-staff-cta::before{ content:""; position:absolute; inset:-10px 0; } .전문망길 a{ min-height:44px; display:inline-flex; align-items:center; }