/* /css/b2b_index.css — 고객용 메인(index.php) 전용. 2026-08-25
   클래스 접두 bidx- 로 전부 스코프 (기존 CSS 와 충돌 0건 확인) */

.bidx-wrap{max-width:1200px;margin:0 auto;padding:0 16px 80px;box-sizing:border-box}
body{overflow-x:hidden}
.bidx-wrap *{box-sizing:border-box}

/* ── 메인 비주얼 ── */
/* 히어로는 .bidx-wrap 밖(body 직속)에 둔다 — 그래야 좌우 여백 없이 전체폭을 먹는다.
   width:100vw 는 스크롤바 폭 때문에 가로 넘침이 생기므로 쓰지 않는다 */
.bidx-hero{position:relative;width:100%;margin:0;height:350px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2b2b33 0%,#4a4048 55%,#6b5b52 100%);overflow:hidden}
/* 배경 이미지가 있을 때 (2026-08-31) — url 은 index.php 가 인라인 style 로 넣는다.
   2026-08-31 안쪽 문구 제거(진수님 지시) → 가독용 어두운 막(::after)과 문구 스타일(.bidx-hero-inner/-title/-sub)도 함께 삭제 */
.bidx-hero--img{background-color:#2b2b33;background-position:center;background-size:cover;background-repeat:no-repeat;background-image:none}

/* ── 섹션 제목 ── */
.bidx-sec-title{font-size:20px;font-weight:700;line-height:1.5;color:#111;margin:0 0 26px}
.bidx-sec-title--sm{font-size:19px}
.bidx-eyebrow{color:#111}
.bidx-brand{color:#111}

/* ── 단독혜택 ── */
.bidx-benefit{padding:56px 0 50px}
.bidx-benefit-list{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.bidx-benefit-list li{flex:1 1 200px;min-width:200px;text-align:center;padding:22px 12px;border-left:1px solid #eee}
.bidx-benefit-list li:first-child{border-left:0}
.bidx-benefit-list i{font-size:34px;color:#c9a227;display:block;margin-bottom:14px}
.bidx-benefit-list p{margin:0;font-size:14px;font-weight:600;color:#333;line-height:1.7}
.bidx-benefit-list p span{display:block;font-size:13px;font-weight:400;color:#888;margin-top:4px}

/* ── 상품 그리드 ── */
.bidx-best{padding:30px 0 56px;border-top:1px solid #eee}
.bidx-all{padding:44px 0 0;border-top:1px solid #eee}
.bidx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 18px;list-style:none;margin:0;padding:0}
.bidx-card a{display:block;text-decoration:none;color:inherit}
.bidx-thumb{position:relative;width:100%;padding-top:100%;overflow:hidden;background:#f4f4f6;border-radius:2px}
.bidx-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.bidx-thumb.bidx-noimg::after{content:'이미지 준비중';position:absolute;top:50%;left:0;width:100%;
  transform:translateY(-50%);text-align:center;font-size:12px;color:#b0b0b8}
.bidx-badge{position:absolute;top:0;left:0;z-index:2;background:#111;color:#fff;font-size:11px;font-weight:700;
  padding:4px 9px;letter-spacing:.5px}
.bidx-time{position:absolute;right:8px;bottom:8px;z-index:2;background:rgba(0,0,0,.6);color:#fff;font-size:11px;
  padding:3px 7px;border-radius:11px}
.bidx-time i{margin-right:3px}
.bidx-cate-label{margin:12px 0 5px;font-size:12px;color:#999}
.bidx-name{margin:0 0 6px;font-size:14px;color:#222;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bidx-price{margin:0;font-size:14px;color:#222;min-height:20px}
.bidx-price b{font-size:15px;font-weight:700}
.bidx-origin{color:#bbb;text-decoration:line-through;font-size:12px;margin-right:6px}
.bidx-free{color:#e0466b;font-weight:700}

/* ── 전체상품 탭 ── */
.bidx-tabs{display:flex;gap:8px;margin:0 0 28px;flex-wrap:wrap}
.bidx-tabs button{padding:9px 20px;border:1px solid #ddd;background:#fff;border-radius:2px;font-size:13px;
  color:#555;cursor:pointer;font-family:inherit}
.bidx-tabs button.on{background:#111;border-color:#111;color:#fff;font-weight:600}

/* ── 더보기 ── */
.bidx-more{display:flex;justify-content:center;gap:10px;padding:44px 0 0;flex-wrap:wrap}
.bidx-more a{display:inline-flex;align-items:center;gap:6px;padding:12px 26px;border:1px solid #ddd;
  font-size:13px;color:#444;text-decoration:none;border-radius:2px}
.bidx-more a:hover{border-color:#111;color:#111}

/* ── 반응형 ── */
@media (max-width:1024px){
  .bidx-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .bidx-hero{height:340px}
  .bidx-grid{grid-template-columns:repeat(2,1fr);gap:22px 14px}
  .bidx-benefit-list li{flex:1 1 100%;border-left:0;border-top:1px solid #eee}
  .bidx-benefit-list li:first-child{border-top:0}
}
@media (max-width:480px){
  .bidx-hero{height:270px}
  .bidx-sec-title{font-size:17px}
  .bidx-more a{padding:11px 18px;font-size:12px}
}