/* ===========================================================================
   굿바이딜러 — 「라벤더」 느낌 (2026-09-15, 3번 시안 C안의 느낌만)

   화면 배치는 그대로 두고, 바탕·카드·숫자·탭바의 느낌만 바꾼다.
   app.css 뒤에 불러와 덮어쓴다.
   ★ 되돌리려면 index.html 에서 이 파일을 불러오는 줄을 지우고,
     core.js 의 FIXED_COLOR 를 4(초록)로 되돌린다. (로고 색은 icons.js · logo.svg)
   =========================================================================== */

:root{
  --bg:#F3F0FB;                 /* 연보라 바탕 */
  --line:#E7E2F3;
  --ink:#1B1530; --ink2:#4A4460; --muted:#857E9E;
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(40,24,90,.04), 0 6px 18px rgba(40,24,90,.06);
}
body{background:var(--bg); color:var(--ink)}

/* ── 머리줄: 바탕과 이어지게 ───────────────────────────── */
.appbar{background:var(--bg); border-bottom-color:transparent}

/* ── 공통 부품: 테두리 대신 흰 칸 + 부드러운 그림자 ──────── */
.card{border-color:transparent; border-radius:var(--radius)}
.btn{border-radius:12px}
.btn.sm{border-radius:10px}
.chip{border-radius:999px}
.notice{border-color:transparent; border-radius:16px; background:#FBFAFE}
.ad-banner{border-color:transparent; border-radius:20px; box-shadow:var(--shadow)}

/* ── 홈 첫 배너: 칸처럼 둥글게 ─────────────────────────── */
.hero{border-radius:22px; box-shadow:0 10px 24px rgba(74,47,168,.22)}
.hero .cta{border-radius:999px; padding:10px 16px}

/* ── 검색줄: 흰 칸 ─────────────────────────────────────── */
.sb-sel{border-color:transparent; border-radius:14px; box-shadow:var(--shadow)}

/* ── 구역 제목 ─────────────────────────────────────────── */
.sec-head .t{font-weight:900}
.sec-head .more{border-color:transparent; border-radius:999px; box-shadow:var(--shadow)}

/* ── 매물 카드: 테두리 없는 흰 칸, 사진도 둥글게 ────────── */
.lcard{border-color:transparent; border-radius:22px}
.mini{border-color:transparent; border-radius:18px; box-shadow:var(--shadow)}
.lcard .timer{border-radius:999px}
.mini .th .tm{border-radius:999px}

/* ── 숫자: 굵고 폭이 고른 숫자 (가격·남은 시간) ─────────── */
.lcard .price,.mini .pr,.lcard .timer,.mini .th .tm,.calc-card .v{
  font-variant-numeric:tabular-nums; font-weight:900; letter-spacing:-.02em}

/* ── 아래 탭바: 화면에 떠 있는 둥근 막대 (휴대폰 화면만) ─── */
@media (max-width:899px), (max-height:599px){
  .tabbar{left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom));
    border:0; border-radius:22px; padding-bottom:0;
    box-shadow:0 8px 24px rgba(40,24,90,.14)}
  body{padding-bottom:calc(var(--tab-h) + 22px + env(safe-area-inset-bottom))}
  body.no-tabs{padding-bottom:0}
}
.tabbar button.on{font-weight:800}