/* ============================================================
   공용 디자인 테마 — 깔끔·미니멀(토스·애플 느낌)
   파랑=신뢰/행동(버튼·최저가·링크) · 초록=절약(무료배송·최저 조합) 전용.
   기존 마크업/JS를 건드리지 않고 부트스트랩/커스텀 클래스를 재도색한다.
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root{
    --text:#191F28; --sub:#8B95A1; --sub2:#4E5968;
    --line:#F2F4F6; --line2:#E5E8EB;
    --accent:#3182F6; --accent-dark:#2272E6; --accent-soft:#EBF3FF;
    --save:#00B26B; --save-soft:#EBFAF3;
    --danger:#F03E3E; --danger-soft:#FFF0F0; --warn-soft:#FFF7E6;
}

body{
    font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,sans-serif !important;
    color:var(--text); background:#fff; -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{letter-spacing:-.03em;font-weight:800;}

/* ── Nav (bg-primary → 화이트 미니멀) ── */
.navbar.bg-primary{background:rgba(255,255,255,.85)!important;backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);}
.navbar-dark .navbar-brand{color:var(--text)!important;font-weight:800;letter-spacing:-.03em;}
.navbar-dark .navbar-brand i{color:var(--accent);}
.navbar-dark .navbar-nav .nav-link{color:var(--sub2)!important;font-weight:600;}
.navbar-dark .navbar-nav .nav-link:hover,.navbar-dark .navbar-nav .nav-link.active{color:var(--text)!important;}
.navbar-toggler{border:1px solid var(--line2)!important;}
.navbar-dark .navbar-toggler-icon{filter:invert(.55);}
/* 네비 안의 장바구니 버튼(btn-warning)은 어두운 알약으로(화이트 네비에서 잘 보이게) */
.navbar .btn-warning{background:var(--text)!important;color:#fff!important;border:0!important;}
.navbar .btn-warning:hover{opacity:.92;}
.navbar .btn-warning .badge.bg-danger{background:var(--accent)!important;}

/* ── Buttons ── */
.btn{border-radius:12px;font-weight:700;letter-spacing:-.01em;}
.btn-sm{border-radius:10px;}
.btn-lg{border-radius:14px;}
.btn-primary,.btn-success{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;}
.btn-primary:hover,.btn-success:hover,.btn-primary:focus,.btn-success:focus{background:var(--accent-dark)!important;border-color:var(--accent-dark)!important;}
.btn-warning{background:#fff!important;border:1px solid var(--line2)!important;color:var(--text)!important;}
.btn-warning:hover,.btn-warning:focus{background:var(--line)!important;color:var(--text)!important;}
.btn-outline-primary{color:var(--accent)!important;border-color:var(--accent)!important;}
.btn-outline-primary:hover{background:var(--accent)!important;color:#fff!important;}
.btn-outline-secondary{color:var(--sub2)!important;border-color:var(--line2)!important;}
.btn-outline-secondary:hover{background:var(--line)!important;color:var(--text)!important;border-color:var(--line2)!important;}
.btn-outline-danger{color:var(--danger)!important;border-color:#FFC9C9!important;}
.btn-light{background:#fff!important;border:1px solid var(--line2)!important;color:var(--text)!important;}

/* ── Cards ── */
.card{border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:none!important;}
.card-body{padding:18px;}

/* ── Alerts (soft, rounded) ── */
.alert{border-radius:12px!important;border:1px solid var(--line)!important;}
.alert-info{background:var(--accent-soft)!important;border-color:#D6E6FF!important;color:#1B4B8F!important;}
.alert-success{background:var(--accent-soft)!important;border-color:#D6E6FF!important;color:#1B4B8F!important;} /* 최저가 안내 = 파랑 톤 */
.alert-warning{background:var(--warn-soft)!important;border-color:#FFE3A3!important;color:#8A6100!important;}
.alert-danger{background:var(--danger-soft)!important;border-color:#FFD6D6!important;color:#C92A2A!important;}
.alert-secondary,.alert-light{background:#FBFCFD!important;border-color:var(--line)!important;color:var(--sub2)!important;}

/* ── Badges ── */
.badge.bg-success{background:var(--accent)!important;}          /* 최저가 뱃지 = 파랑 */
.badge.bg-primary{background:var(--accent)!important;}
.badge.bg-info{background:var(--accent-soft)!important;color:var(--accent)!important;}
.badge.bg-danger{background:var(--danger)!important;}
.badge.bg-light{background:var(--line)!important;color:var(--sub2)!important;}

/* ── Forms ── */
.form-control,.form-select{border-radius:12px;border-color:var(--line2);color:var(--text);}
.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(49,130,246,.13);}
.input-group-lg .form-control{border-radius:12px;}
.input-group .btn{border-radius:12px;}

/* ── Text colors (파랑=행동, 초록=절약) ── */
.text-primary{color:var(--accent)!important;}
.text-success{color:var(--save)!important;}
.text-muted{color:var(--sub)!important;}
.text-info{color:var(--accent)!important;}
.bg-primary.text-white,.badge.text-bg-primary{background:var(--accent)!important;}

/* ── 상품 상세: 판매처 카드 ── */
.offer-card{border:1px solid var(--line)!important;border-radius:16px!important;transition:border-color .18s,box-shadow .18s;}
.offer-card.best{border:1.5px solid var(--accent)!important;box-shadow:0 8px 24px rgba(49,130,246,.1)!important;background:#fff!important;}
.offer-card.invalid{background:#FBFCFD!important;}
.retailer-name{font-weight:800!important;}
.offer-total{letter-spacing:-.02em;color:var(--text);}
.nutrient-row{border-bottom:1px solid var(--line)!important;}

/* 판매처 가격 비교 막대 */
.price-compare{border:1px solid var(--line)!important;border-radius:14px!important;}
.pbar-fill{background:var(--accent)!important;border-radius:6px!important;}
.pbar-fill.best{background:var(--save)!important;}

/* ── 장바구니 ── */
.cart-item{border:1px solid var(--line)!important;border-radius:14px!important;}
.best-box{border:1.5px solid #C6EFD9!important;background:var(--save-soft)!important;border-radius:16px!important;} /* 최적 조합 = 절약(초록) */
.ret-group{border:1px solid var(--line)!important;border-radius:14px!important;}
.scen-row{border:1px solid var(--line)!important;border-radius:12px!important;}
.savings-badge{background:var(--save)!important;}

/* ── 홈 카드(검색 결과 페이지에서 재사용될 수 있는 클래스) ── */
.status-chip{border-radius:999px;font-weight:700;}