/* 부동산바로 — ★밝은 판 (2026-09-16)
   ★왜 밝은가: 대표님이 새로 뽑으신 그림이 «낮 사진»이다.
     딥네이비 위에 낮 사진을 얹으면 ★어두운 판에 창문만 뚫린 꼴이 된다.
   ★어두운 판 토큰을 «덮어쓰기»만 한다. 구조·움직임은 손대지 않는다.
   ★색은 전부 대비를 재서 골랐다(본문 4.5 : 1 이상).
     제목 17.11 · 설명 5.46(흰)/4.71(바닥) · 보조 5.27/4.55 · 링크 5.36
     공개배지 6.54 · 검토배지 6.22 */

:root {
  /* ── 층 ── */
  --L0: #E8EFF7;                 /* 페이지 바닥 */
  --L1: #F3F7FC;                 /* 페이지 위쪽 */
  --L2: #FFFFFF;                 /* ★카드 — 흰색이라 사진이 «창»처럼 뜬다 */
  --L3: #FFFFFF;
  --바닥: var(--L0);
  --바닥2: var(--L1);
  --판: #FFFFFF;
  --판밝: #FFFFFF;
  --판선: rgba(24, 58, 96, .13);
  --판선밝: rgba(14, 116, 144, .42);

  /* ── 글 ── */
  --글: #0E1C30;
  --글연: #5A6B80;
  --글보조: #5F6D80;

  /* ── 포인트 — «중요한 곳»에만 ── */
  --형광: #0E7490;
  --형광2: #0B6B85;
  --산: #0F6B45;                 /* 공개 */
  --중바: #F2E7CC;               /* 검토용 바탕 */
  --중글: #7A5C1E;               /* 검토용 글 */
  --끔: #6B7787;                 /* 준비 중 */

  --유리: blur(10px) saturate(104%);
  --하이라이트: rgba(255, 255, 255, .9);

  /* ── 흐르는 바탕이 읽어 가는 값 ── */
  --흐름색: #1F8FB5, #2E9BC4, #4E8FD0, #3AA8B8, #5AA2CF;
  --격자색: rgba(30, 80, 120, .055);
  --실색: 40, 110, 150;
}

/* ── 바탕판 — 하늘빛에서 옅은 청회색으로 ── */
#baro-flow {
  background:
    radial-gradient(1200px 680px at 50% -10%, rgba(120, 190, 235, .22), transparent 66%),
    radial-gradient(980px 620px at 88% 106%, rgba(150, 200, 230, .16), transparent 64%),
    linear-gradient(180deg, var(--L1) 0%, #EDF3FA 46%, var(--L0) 100%);
}
#baro-flow::after { display: none; }        /* ★훑는 선은 밝은 판에서 지저분하다 */
#baro-flow .번짐 {
  background:
    radial-gradient(820px 460px at 50% 24%, rgba(255, 255, 255, .55), transparent 68%),
    radial-gradient(560px 340px at 50% 24%, rgba(140, 200, 235, .16), transparent 62%);
}

/* ── 판 ── */
.칸, .관제띠, .셈 div, .약속 article, .망 {
  background: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(16, 42, 72, .05),
              0 10px 26px -18px rgba(16, 42, 72, .28) !important;
}
.칸:hover {
  background: #FFFFFF !important;
  box-shadow: 0 2px 4px rgba(16, 42, 72, .07),
              0 18px 40px -20px rgba(14, 116, 144, .42) !important;
}
.띠 { background: linear-gradient(140deg, #DDE8F3, #CFDDEC); }
.띠::after { background: linear-gradient(180deg, transparent 86%, rgba(16, 42, 72, .10) 100%); }
/* ★낮 사진이라 ★더 밝힐 필요가 없다. 살짝만 또렷하게. */
.띠 img { filter: saturate(1.02) contrast(1.02); }

/* ── 배지 ── */
.패 { background: rgba(255, 255, 255, .92); border: 1px solid rgba(24, 58, 96, .14);
      box-shadow: 0 1px 2px rgba(16, 42, 72, .08); }
.패.열림 { color: var(--산); }
.패.검토 { color: var(--중글); background: var(--중바); border-color: rgba(122, 92, 30, .22); }
.패.아직 { color: var(--끔); }

/* ── 잔가지 ── */
.가 { border-top: 1px solid rgba(24, 58, 96, .10); }
.가 span { color: var(--글보조); }
.망 a, .망 span.칸없음 { border-top: 1px solid rgba(24, 58, 96, .09); }
.망 a:hover { background: rgba(14, 116, 144, .05); }
.망 .표 { background: linear-gradient(140deg, #DDE8F3, #CFDDEC); }
.망 .표 img { filter: saturate(1.02); }
.망 .셈작 { color: var(--글연); }
.망 .준비 { background: #EEF2F7; border: 1px solid rgba(24, 58, 96, .12); color: var(--끔); }
.셈 em, .출처 td small, footer { color: var(--글보조); }
.출처 th, .출처 td { border-bottom: 1px solid rgba(24, 58, 96, .10); }
.출처 td { color: #2A3C52; }
.귀띔 { background: #FBF4E4; border: 1px solid rgba(122, 92, 30, .22); color: #6A5018; }
.귀띔 b { color: #4E3A0E; }
footer { border-top: 1px solid rgba(24, 58, 96, .10); }
footer b { color: var(--글연); }
.이름 i { box-shadow: 0 0 8px rgba(15, 107, 69, .45); }

/* ── 모바일 — 밝은 판은 더 올릴 필요가 없다. 바닥만 살짝 더 희게 ── */
@media (max-width: 760px) {
  :root { --L0: #EDF2F9; --L1: #F7FAFD; }
}

/* ── ★전체 배경이 «사진»일 때 (2026-09-16) ──────────────
   사진 자체에 지도 선과 핀이 이미 들어 있다. 캔버스 흐름을 겹치면 지저분하다.
   ★위쪽(사진 자리)은 비우고, ★아래 밝은 바닥에서만 흐르게 한다. */
#baro-flow { z-index: -1; }
#baro-flow canvas {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 52%, #000 78%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 52%, #000 78%, #000 100%);
}
#baro-flow .번짐 { display: none; }        /* ★사진이 이미 하늘빛이다 */
/* ★사진이 위를 덮으므로 바탕 그러데이션은 아래쪽만 */
#baro-flow {
  background: linear-gradient(180deg, transparent 0%, transparent 40%, #EDF3FA 72%, var(--L0) 100%);
}

/* ════════════════════════════════════════════════════════════════
   ★2026-09-17 — 상담띠 (대표 직권 「바로분양만큼 전부 만들어라」)
   ★손님이 «어디로 연락하나»를 첫 화면에서 알게 한다. 스크롤 없이 보인다.
   ★ 은 실제로 받는 대표번호다 (대표 직권 2026-09-12).
   ★번호를 여기 적지 않는다 — 화면 마크업 한 곳에서만 읽는다.
   ════════════════════════════════════════════════════════════════ */
.상담띠{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; gap:8px;
  padding:8px 12px; padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-top:1px solid var(--선,#e3e9ef);
  box-shadow:0 -2px 14px rgba(22,32,43,.10);
}
.상담띠 > a{
  flex:1; min-height:54px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-radius:11px; text-decoration:none;
  font-size:15px; font-weight:800; letter-spacing:-.3px; line-height:1.15;
}
.상담띠 > a small{ font-size:10.5px; font-weight:600; opacity:.88; letter-spacing:0 }
.상담띠 .전화{ background:var(--짙은파랑,#1f4e79); color:#fff; border:1.5px solid var(--짙은파랑,#1f4e79) }
.상담띠 .남기기{ background:#fff; color:var(--짙은파랑,#1f4e79); border:1.5px solid var(--짙은파랑,#1f4e79) }
.상담띠 > a:active{ filter:brightness(.93) }
.상담띠 > a[hidden]{ display:none }
body{ padding-bottom:80px }
@media (min-width:900px){
  .상담띠{ left:auto; right:18px; bottom:18px; width:340px; border-radius:14px;
           border:1px solid var(--선,#e3e9ef); padding:10px }
  body{ padding-bottom:0 }
}
@media print{ .상담띠{ display:none } }

/* ★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; }

/* ════════════════════════════════════════════════════════════════
   ★2026-09-17 (대표 감사보고 UX-01) — 목적으로 문을 연다
   ★손님은 「분양·상가·지산」이 아니라 ★「집을 찾는다」로 생각한다
   ════════════════════════════════════════════════════════════════ */
.목적{ max-width:1160px; margin:22px auto 0; padding:0 18px }
.목적말{ display:block; font-size:12px; font-weight:700; letter-spacing:.02em;
  color:#5b6b7c; margin-bottom:9px }
.목적판{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
@media(min-width:720px){ .목적판{ grid-template-columns:repeat(3,1fr) } }
@media(min-width:1060px){ .목적판{ grid-template-columns:repeat(6,1fr) } }
.목적단추{ display:flex; flex-direction:column; gap:2px; min-height:60px;
  justify-content:center; padding:11px 13px; border-radius:12px;
  border:1px solid rgba(31,78,121,.18); background:rgba(255,255,255,.92);
  text-decoration:none; color:#16202b; transition:border-color .15s, background .15s }
.목적단추 b{ font-size:14.5px; font-weight:800; letter-spacing:-.3px; line-height:1.25 }
.목적단추 small{ font-size:11px; color:#5b6b7c; line-height:1.3 }
.목적단추:hover{ border-color:#2f6fb0; background:#fff }
.목적단추:active{ filter:brightness(.97) }