/* ==========================================================================
   bb-autumn.css — ★바로분양 «가을 · 단풍» 옷   (담당: 단풍0913 · 2026-09-13)

   ★왜 이 파일이 따로 있나
     오늘 index.html 은 ★알약0913 이 잡고 있다. 같은 파일을 두 담당이 고치면
     2026-09-11 처럼 ★3배 중복이 난다. 그래서 ★새 파일에 짓고 ★<link> 한 줄만 붙인다.
     ★되돌리기 — 그 <link> 한 줄만 지우면 ★전부 원래대로다. 지울 것이 하나뿐이다.

   ★붙이는 자리 (반드시 ★bb-extras.css «뒤»)
     <link rel="stylesheet" href="assets/bb-extras.css">
     <link rel="stylesheet" href="assets/bb-autumn.css">   ← ★이 줄
     </head>
     ★왜 뒤인가 — index.html 의 <style> 덩이와 ★같은 특이도라서 ★나중에 온 쪽이 이긴다.

   ★무엇을 고쳤나 — ★대표가 보신 「지역현장 목록」이 ★아직 파랬다
     위(히어로)는 이미 단풍인데 ★그 아래부터 끝까지 ★남색·파랑이 그대로였다.
     ★한 화면에 강조색이 둘이면 ★대충 만든 것으로 보인다. ★주홍 하나로 맞춘다.

   ★정본  ★★★바로분양_정본_대표직권_20260913.md
          「바탕 #FBF7F0 · 띠 #F4EBDF · 글자 #2A211A · ★강조 #B0553A (단풍 주홍) ★하나만」

   ★현장 사진(조감도·투시도)은 ★한 픽셀도 안 건드린다 — ★색 필터·오버레이 ★전부 금지.
     그건 실제 매물 그림이고, 단풍을 입히면 ★허위 표시가 된다.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   ① 밑값 — ★여기 한 군데만 바꾸면 ★var() 를 쓰는 자리가 ★전부 따라온다
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ---- 바탕·글자 : 차가운 회청 → ★따뜻한 아이보리·먹 -------------------- */
  --ink:#2A211A;        /* 이전 #16191F  · 푸터 바탕도 이 값을 쓴다 (CR 14.78 ✅) */
  --paper:#FBF7F0;      /* 이전 #F5F6F8 */
  --paper2:#F4EBDF;     /* 이전 #EEF1F5  · 청사진 격자·썸네일 바탕 */
  --line:#E8DCCB;       /* 이전 #E3E6EB  · 격자 선까지 같이 따뜻해진다 */
  --slate:#6B5B4E;      /* 이전 #6B7280  · 흰 바탕 대비 4.83 → ★6.50 (더 잘 읽힌다) */

  /* ---- 강조색 ★하나 : 파랑 → ★단풍 주홍 -------------------------------- */
  --brass:#B0553A;      /* 이전 #3D68C9 · 흰글자 CR 4.99 · 흰카드 대비 4.99 (기준 3.0) */
  --brass-bright:#91422C;  /* 이전 #5A80D6 — ★«밝게»가 아니라 ★«짙게» 눌린다.
                              흰글자 CR 4.99 → ★6.95 로 ★올라간다 (눌렀을 때 더 또렷) */
  --brass-dark:#7A3623;

  /* ---- 두 번째 강조 : 신호 빨강 → ★황금빛 --------------------------------
     ★왜 바꾸나 — #E8483A(신호 빨강)와 #B0553A(단풍 주홍)가 ★한 화면에 같이 있으면
       손님이 ★어느 쪽이 «상담»이고 어느 쪽이 «경고»인지 ★못 가른다.
       ★빨강 계열은 ★상담 단추 ★하나만 쓰고, 나머지 강조(#신규·선택됨)는 ★금으로 보낸다.
       #8A5F22 — 흰글자 CR 5.61 ✅ / 흰바탕 글자 CR 5.61 ✅ (둘 다 AA 본문 통과) */
  --rebar:#8A5F22;      /* 이전 #E8483A */

  /* ---- 이 파일 안에서만 쓰는 값 ---------------------------------------- */
  --au-soft:#F6EDE3;    /* 부드러운 칩 바탕 (이전 #E9F0FE 파랑칩 자리) */
  --au-soft-2:#F3EADF;
  --au-deep:#91422C;    /* 칩·테두리 글자 — 작은 글씨는 ★짙은 쪽을 쓴다 */
  --au-gold-soft:#F5EBD6;
  --au-btn-r:6px;       /* 단추 둥글기 — ★히어로 「내 조건으로 찾아보기」(.bb-go) 와 ★같은 값 */
}


/* ══════════════════════════════════════════════════════════════════════════
   ② ★★상담 단추 — ★이 사이트의 ★유일한 돈줄이다. ★«덜 띄게» 만들면 실패다
   ──────────────────────────────────────────────────────────────────────────
   ★잰 것
     흰 카드 대비   파랑 #3D68C9 = 5.22   →   주홍 #B0553A = 4.99   (기준 3.0)
       ★-0.23 은 ★눈에 안 보이는 차이다. ★둘 다 기준의 ★1.6배를 넘는다
     흰 글자 대비   5.22 → 4.99  (AA 본문 4.5 ★통과)
     눌렀을 때      5.22 → ★6.95 (짙게 눌리므로 ★오히려 또렷해진다)

   ★그런데 «튀는 정도»는 ★대비 숫자만으로 안 정해진다 — ★경쟁자 수가 더 크다.
     지금 카드 안에 ★파란 것이 ★셋 — #즉시콜백 칩 · 전화 상담 테두리 · 상담 신청.
     ★셋이 같은 파랑이라 ★단추가 «칩들 사이에 섞여» 있었다.
     ★고친 뒤 — 칩은 ★차분한 모래빛, 전화는 ★테두리만, ★채워진 주홍은 ★상담 신청 하나.
     → ★단추가 카드 안에서 ★«유일하게 채워진 것»이 된다. ★전보다 더 눈에 띈다.

   ★붉은색이 «경고»로 안 읽히게 — ★잰 것
     신호 빨강 #E8483A : 채도 79% · 밝기 57%
     단풍 주홍 #B0553A : 채도 ★50% · 밝기 ★46%   → 채도 ★-29pt · 밝기 ★-11pt
     ★채도가 낮고 어두운 벽돌색은 ★«경고»가 아니라 ★«차분한 단추»로 읽힌다.
     ★게다가 이 색은 ★이미 이 사이트의 주 단추다 — 맨 위 「맞춤 상담」과
     ★아래 고정 띠 「」이 ★이미 #B0553A 다.
     ★목록만 파란 것이 ★틀린 쪽이었다.
   ══════════════════════════════════════════════════════════════════════════ */
.consult-btn{
  background:var(--brass);
  border-radius:var(--au-btn-r);          /* 20px 알약 → ★히어로 주 단추와 같은 6px */
  font-weight:800;
  letter-spacing:-0.02em;
  box-shadow:0 2px 6px rgba(176,85,58,0.26);   /* 이전 rgba(61,104,201,…) 파란 그림자 */
}
.consult-btn:hover{
  background:var(--brass-bright);              /* ★짙게 — 흰글자 대비 6.95 */
  box-shadow:0 4px 12px rgba(176,85,58,0.34);
}
.consult-btn:active{ transform:translateY(1px); }
.consult-btn:focus-visible{ outline:3px solid var(--au-deep); outline-offset:2px; }

/* 전화 상담 — ★테두리만. ★채워진 것은 상담 신청 하나여야 한다 */
.card-tel-btn{
  color:var(--au-deep);                        /* 흰 바탕 대비 ★6.95 (11.5px 작은 글씨라 짙게) */
  border-color:var(--brass);
  border-radius:var(--au-btn-r);
}
.card-tel-btn:hover{ background:var(--brass); color:#fff; }
.card-tel-btn:focus-visible{ outline:3px solid var(--au-deep); outline-offset:2px; }

/* 아래 고정 띠·상세 단추 — 첫 화면 <style> 이 !important 로 이미 주홍이다. 둥글기만 맞춘다 */
.mobile-bar button.solid, .mobile-bar a.tel-main, .mobile-bar a.outline{ border-radius:var(--au-btn-r); }


/* ══════════════════════════════════════════════════════════════════════════
   ③ 카드 안의 ★작은 칩들 — ★파란 칩 넷을 ★모래빛으로. ★단추와 경쟁시키지 않는다
   ══════════════════════════════════════════════════════════════════════════ */
.pill{ color:var(--au-deep); background:var(--au-soft); }        /* #즉시콜백 · 칩 대비 6.01 ✅ */
.pill.pill-new{ color:#6E4B1B; background:var(--au-gold-soft); } /* #신규 — ★금. 빨강은 단추만 */
.pill.pill-ready{ color:#4A6B33; background:#EDF2E2; }           /* 「바로 가능」 — 차분한 이끼빛 */

.badge-tag.presale{ background:var(--au-soft-2); color:#6B4A2E; }  /* 대비 6.67 ✅ */
.badge-tag.remaining{ background:#F6E7DE; color:#8C3B2E; }
.badge-tag.premium{ background:var(--au-gold-soft); color:#6E4B1B; }
.badge-tag.hot{ background:#F6E7DE; color:var(--au-deep); }
.badge-tag.open{ background:#EDF2E2; color:#41663C; }
.badge-tag.soldout{ background:#EAE4DA; color:#6E645A; }

.listing-region-lbl{ color:var(--au-deep); }
.listing-card{ border-color:var(--line); }
.listing-card:hover{ border-color:var(--brass); box-shadow:0 10px 24px rgba(60,40,26,0.12); }
.listing-card.premium{ border-color:var(--brass); box-shadow:0 0 0 1px var(--brass); }
.listing-card.premium:hover{ border-color:var(--au-deep); box-shadow:0 0 0 1px var(--au-deep); }


/* ══════════════════════════════════════════════════════════════════════════
   ④ ★★법에 걸리던 자리 — ★고지 문구. ★이건 색 문제가 아니라 ★표시 문제다
   ──────────────────────────────────────────────────────────────────────────
   ★정본 원문 — 「자리 ★그림 «아래 띠» · 바탕 ★불투명 · ★12px 이상 · 본문과 같은 색 대비」
                「★지금 9.5px 반투명은 ★공정위가 든 ★실패 예시와 같은 모양이다. ★고쳐야 한다」
   ★고치기 전 / 뒤
     카드 참고이미지 배지   9.5px · 바탕 알파 0.65(★반투명) · 모서리 알약
       →  ★12px · 바탕 ★알파 1.0(★불투명) · ★그림 아래에 ★가로로 꽉 찬 띠
     히어로 배지            11px · ★바탕 없음(글자 그림자만 — 밝은 사진 위에서 ★거의 안 보임)
       →  ★12px · ★불투명 띠 · 글자 대비 ★13.37 (AA 본문 4.5 의 세 배)
   ★근거  AI기본법 제31조③(2026-01-22 시행) · 공정위 부동산 심사지침 Ⅳ.1 / Ⅴ.13.나
   ══════════════════════════════════════════════════════════════════════════ */
.thumb-ref-note{
  left:0; right:0; bottom:0;                 /* 모서리 알약 → ★아래 가로 띠 */
  background:#2A211A;                        /* 알파 0.65 → ★1.0 불투명 */
  color:#FBF7F0;
  font-size:12px;                            /* 9.5px → ★12px */
  font-weight:700;
  line-height:1.35;
  padding:4px 8px;
  border-radius:0;
  text-align:left;
  letter-spacing:-0.01em;
}
/* ★특이도 주의 — 히어로 CSS 는 <body> 안 <style> 에 있어서 ★내 <link> 보다 «뒤»다.
   ★클래스 두 개(.bb-hero-pic .cr)로는 ★진다. ★셋으로 올려야 이긴다.
   ★실측으로 잡았다 — 처음엔 바탕만 먹고 ★글자는 11px 그대로였다 */
/* ★고지 띠를 «아래 가로 띠»로 내리면 ★두득 배지(오른쪽 아래)와 ★겹친다.
   ★실제로 겹쳤다 — 「…이미지 참ㅣ두득ㅣ고용)」 으로 글자가 가려졌다(폰 375px 실측).
   ★법에 걸리는 쪽(고지)이 ★이긴다 → ★두득 배지를 ★띠 위로 올린다. 배지를 지우지는 않는다. */
.thumb-placeholder .dudeuk-badge{ bottom:46px; }
@media (min-width:641px){ .thumb-placeholder .dudeuk-badge{ bottom:32px; } }

.bb-hero .bb-hero-pic span.cr{
  right:0; left:auto; bottom:0;
  background:#2A211A;                        /* 글자 그림자만 → ★불투명 띠 */
  color:#FBF7F0;
  font-size:12px;                            /* 11px → ★12px */
  font-weight:700;
  padding:4px 10px;
  text-shadow:none;
  letter-spacing:-0.01em;
}
@media (max-width:960px){
  /* 폰에서는 사진이 가로로 꽉 차므로 띠도 꽉 채운다 */
  .bb-hero .bb-hero-pic span.cr{ left:0; right:0; text-align:right; }
}

/* 카드 사진 위의 ♡ · 🔗 동그라미 — ★남은 마지막 «차가운 파랑» 48조각.
   rgba(15,27,43,.55) 는 색상각 215°(파랑)다. ★따뜻한 먹으로 바꾼다.
   ★사진 자체는 안 건드린다 — ★사진 «위에 얹힌 우리 단추»만 바꾼다 */
.fav-btn, .link-btn{ background:rgba(42,33,26,0.55); }
.fav-btn:hover, .link-btn:hover{ background:rgba(42,33,26,0.78); }
.fav-btn.active{ background:var(--brass); }


/* ══════════════════════════════════════════════════════════════════════════
   ⑤ 목록 위 거르개 — 파란 초점·빨간 선택 → ★주홍·금
   ══════════════════════════════════════════════════════════════════════════ */
.main-tab-btn:hover{ border-color:var(--brass); }
.main-tab-btn.section-tab.active{ background:var(--rebar); border-color:var(--rebar); }  /* ★금 */
.filter-check:has(input:checked){ border-color:var(--rebar); color:#6E4B1B; }
.filter-check input{ accent-color:var(--brass); }
.filter-select:focus, .sort-select:focus{ border-color:var(--brass); outline:2px solid var(--au-soft); }
.search-box:focus-within, .region-select:focus{ border-color:var(--brass); }
.recent-chip:hover{ border-color:var(--brass); }
.showcase-card:hover{ border-color:var(--brass); }


/* ══════════════════════════════════════════════════════════════════════════
   ⑥ 아래쪽 큰 덩이들 — ★파랑이 그대로 남아 있던 자리
      (01·02·03 흐름표 · 역할 카드 · FAQ · 옛 히어로 · 띠 배너)
   ══════════════════════════════════════════════════════════════════════════ */
.funnel-icon{ background:var(--au-soft); color:var(--brass); }          /* 이전 #E9F0FE */
.funnel-owner{ color:var(--au-deep); background:var(--au-soft); }       /* 이전 #E9F0FE */
.funnel-step.highlight{
  background:linear-gradient(180deg,#F7EFE5,#FDFAF5);                   /* 이전 파란 기운 */
  box-shadow:inset 0 3px 0 var(--brass), inset 0 -3px 0 var(--brass);
}
.funnel-step.highlight .funnel-owner{ background:var(--brass); color:#fff; }
.funnel-arrow{ color:var(--brass); }

.role-card.staff .role-cta{ background:var(--rebar); }
.role-card.staff .role-cta:hover{ background:#6E4B1B; }

.faq-item summary:hover{ background:var(--paper2); }

/* 옛 남색 히어로 — 지금은 안 쓰지만 ★되살아나도 파랗지 않게 (되돌림 사고 대비) */
.hero-section{ background-color:#3A2A20; }
/* 띠 배너 — SVG 그림은 ★안 건드린다(남의 자산). ★바탕색만 단풍으로 */
.promo-strip{ background-color:#8C4832; }
.entry-modal{ background-color:#8C4832; }


/* ══════════════════════════════════════════════════════════════════════════
   ⑦ 푸터 — 차가운 남회색 글자 → ★따뜻한 회갈색 (바탕은 --ink 가 이미 따라왔다)
   ══════════════════════════════════════════════════════════════════════════ */
.foot-col p{ color:#B5A797; }                       /* 이전 #9AA4B2 · 대비 6.72 ✅ */
/* ★2026-09-14 푸터접기0914 — 「사업자 정보」 접기 단추도 같은 가을색으로.
   ★body 를 앞에 붙인 이유: 접기 <style> 이 이 파일 «뒤»에 오므로 그냥 쓰면 진다 */
body .foot-biz > summary{ color:#B5A797; }
body .foot-biz > summary:hover,
body .foot-biz > summary:focus-visible{ color:#D8CCBD; }
.foot-col a, .foot-static-link{ color:#D6CABB; }    /* 이전 #B9C2CC · 대비 9.79 ✅ */
.foot-bottom{ color:#9C8E80; border-top-color:rgba(251,247,240,0.14); }  /* 대비 4.95 ✅ */
/* 푸터 「파트너 안내」로 옮겨 온 링크 — bb-extras 가 ★순백 72% 로 박아 두어
   따뜻한 갈색 바탕 위에서 ★혼자 파랗게 뜬다. ★아이보리로 맞춘다.
   (!important 로 박힌 값이라 ★이쪽도 !important + ★나중 파일이라 이긴다) */
.foot-col .mypage-link,
.foot-col .nav-cta,
.foot-col .nav-cta-outline{ color:rgba(251,247,240,0.78) !important; }
.foot-col .mypage-link:hover,
.foot-col .nav-cta:hover,
.foot-col .nav-cta-outline:hover{ color:#FBF7F0 !important; }
.login-widget-user .nav-user-name{ color:rgba(251,247,240,0.78); }


/* ══════════════════════════════════════════════════════════════════════════
   ⑧ 폰 (≤640px) — ★엄지로 누르는 크기. ★44px 아래로 내려가지 않게
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .listing-cta-row{ gap:7px; }
  .consult-btn{ min-height:44px; font-size:13.5px; }
  .card-tel-btn{ min-height:44px; font-size:12px; }
  .thumb-ref-note{ font-size:12px; padding:4px 7px; }
}