/* ==========================================================================
   TTBOX — 셀러 상품카드 공용 (.tt-cards 스코프)
   전시관 목록 · 공급사관 · 메인 섹션이 모두 이 한 벌을 쓴다.
   마크업은 app/views/public/b2b/_ttSellerCard.php
   ========================================================================== */

.tt-cards{
  --tc-ink:#0f1626;
  --tc-ink-2:#395a4c;
  --tc-muted:#767f92;
  --tc-line:#e6eaf2;
  --tc-blue:#006b4f;
  --tc-blue-d:#00563f;
  --tc-blue-soft:#eff8f4;
  --tc-mint:#00915a;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
  gap:22px;
}

.tt-cards .product__item{
  background:#fff;
  border:1px solid var(--tc-line);
  border-radius:18px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.tt-cards .product__item:hover{
  transform:translateY(-4px);
  border-color:#dff0e8;
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 18px 40px rgba(0, 107, 79,.13);
}

/* 썸네일 */
.tt-cards .product__thum{
  display:block; position:relative; width:100%; padding-top:100%;
  overflow:hidden; background:#e6f1ec;
}
.tt-cards .product__thum img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.tt-cards .product__item:hover .product__thum img{ transform:scale(1.05); }
.tt-cards .b2b-soldout{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,22,38,.5); backdrop-filter:grayscale(45%);
}
.tt-cards .b2b-soldout > span{
  font-size:12.5px; font-weight:800; letter-spacing:2px; color:#fff;
  border:1.5px solid rgba(255,255,255,.9);
  padding:6px 16px; border-radius:999px; background:rgba(15,22,38,.5);
}
.tt-cards .product__thum .stock-badge{
  position:absolute; left:10px; bottom:10px; z-index:4;
  background:rgba(15,22,38,.78); color:#fff;
  font-size:11.5px; font-weight:700; padding:5px 9px; border-radius:8px;
  line-height:1; letter-spacing:-.01em; pointer-events:none;
  backdrop-filter:blur(4px);
}
.tt-cards .product__thum .stock-badge::before{ content:'재고 '; opacity:.72; font-weight:600; }
.tt-cards .product__thum .stock-badge::after{ content:'개'; opacity:.72; font-weight:600; }

/* 본문 */
.tt-cards .product__desc{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.tt-cards .product__badges{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.tt-cards .badge{
  display:inline-block; padding:3.5px 9px; border-radius:7px;
  font-size:11.5px; font-weight:700; line-height:1.35; letter-spacing:-.01em;
}
.tt-cards .badge--blue{ background:var(--tc-blue-soft); color:var(--tc-blue); }
.tt-cards .badge--gray{ background:#f1f3f8; color:#6b7484; font-weight:600; }
.tt-cards .badge--bulk{ background:#fff1e6; color:#c05600; }

.tt-cards .product__title{
  font-size:14.5px; font-weight:600; line-height:1.45; letter-spacing:-.02em;
  color:var(--tc-ink); margin:0 0 12px; min-height:42px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* 가격 — 사입가 중심 */
.tt-cards .product__price{ margin:0 0 11px; }
.tt-cards .product__price .tl-price-label{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.03em;
  color:#8b93a5; margin-bottom:2px;
}
.tt-cards .product__price .price{
  display:flex; align-items:baseline; gap:1px;
  font-size:23px; font-weight:800; letter-spacing:-.04em;
  color:var(--tc-ink); margin:0; line-height:1.1;
}
.tt-cards .product__price .price .won{ font-size:14px; font-weight:700; margin-left:2px; }
.tt-cards .product__price .member-only{
  display:inline-block; padding:6px 12px; border-radius:9px;
  background:#f1f3f8; color:#6b7484;
  font-size:12.5px; font-weight:700; letter-spacing:-.02em;
}

/* 셀러 지표 — 소비자가 / 마진 */
.tt-cards .tl-margin{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--tc-line); border:1px solid var(--tc-line);
  border-radius:11px; overflow:hidden; margin:0 0 13px;
}
.tt-cards .tl-margin > div{ background:#fbfcfe; padding:8px 10px; min-width:0; }
.tt-cards .tl-margin dt{
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  color:#8b93a5; margin:0 0 3px;
}
.tt-cards .tl-margin dd{
  margin:0; font-size:13.5px; font-weight:700; letter-spacing:-.03em;
  color:var(--tc-ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tt-cards .tl-margin .tl-m-rate dd{ color:var(--tc-mint); }
.tt-cards .tl-margin .tl-m-rate dd small{ font-size:11px; font-weight:700; opacity:.75; margin-left:2px; }

/* 버튼 */
.tt-cards .product__btns{ display:flex; gap:8px; margin-top:auto; }
.tt-cards .product__btns .btn{
  flex:1; padding:11px 8px; text-align:center; border-radius:11px;
  font-size:13px; font-weight:700; letter-spacing:-.02em;
  text-decoration:none; cursor:pointer; font-family:inherit;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.tt-cards .product__btns .btn_sub{ background:#fff; color:var(--tc-ink-2); border:1px solid var(--tc-line); }
.tt-cards .product__btns .btn_sub:hover{ background:#f7f9fd; color:var(--tc-blue); border-color:#dff0e8; }
.tt-cards .product__btns .btn_primary{ background:var(--tc-blue); color:#fff; border:1px solid var(--tc-blue); }
.tt-cards .product__btns .btn_primary:hover{
  background:var(--tc-blue-d); border-color:var(--tc-blue-d);
  transform:translateY(-1px); box-shadow:0 8px 18px rgba(0, 107, 79,.28);
}

/* ── 비밀링크 카드(.bh-*) ────────────────────────────────────── */
.tt-cards.bh-grid{ grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); }
.tt-cards .bh-card{
  background:#fff; border:1px solid var(--tc-line); border-radius:18px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  transition:transform .22s, box-shadow .22s, border-color .22s;
}
.tt-cards .bh-card:hover{
  transform:translateY(-4px); border-color:#dff0e8;
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 18px 40px rgba(0, 107, 79,.13);
}
.tt-cards .bh-img{ position:relative; width:100%; padding-top:100%; overflow:hidden; background:#e6f1ec; }
.tt-cards .bh-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:blur(7px) saturate(.7); transform:scale(1.08);
}
.tt-cards .bh-lock{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  background:rgba(15,22,38,.42);
}
.tt-cards .bh-lock .ico{ font-size:24px; line-height:1; }
.tt-cards .bh-lock .t{
  font-size:11.5px; font-weight:800; letter-spacing:.06em; color:#fff;
  border:1px solid rgba(255,255,255,.75);
  padding:5px 12px; border-radius:999px; background:rgba(15,22,38,.45);
}
.tt-cards .bh-img .stock-badge{
  position:absolute; left:10px; bottom:10px; z-index:4;
  background:rgba(15,22,38,.78); color:#fff;
  font-size:11.5px; font-weight:700; padding:5px 9px; border-radius:8px;
  line-height:1; pointer-events:none;
}
.tt-cards .bh-info{ padding:16px; }
.tt-cards .bh-badges{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.tt-cards .bh-b{
  display:inline-block; padding:3.5px 9px; border-radius:7px;
  font-size:11.5px; font-weight:700; line-height:1.35;
}
.tt-cards .bh-b.green{ background:var(--tc-blue-soft); color:var(--tc-blue); }
.tt-cards .bh-b.gray{ background:#f1f3f8; color:#6b7484; font-weight:600; }
.tt-cards .bh-b.line{ background:#fff; border:1px solid var(--tc-line); color:#6b7484; font-weight:600; }
.tt-cards .bh-name{
  font-size:14.5px; font-weight:600; line-height:1.45; letter-spacing:-.02em;
  color:var(--tc-ink); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── 빈 상태 ─────────────────────────────────────────────────── */
.tt-cards .tl-empty{
  grid-column:1/-1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:80px 24px;
  background:#fff; border:1px dashed #d7dded; border-radius:18px;
  text-align:center;
}
.tt-cards .tl-empty .ico{
  width:46px; height:46px; margin-bottom:6px; border-radius:14px;
  background:var(--tc-blue-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b5cff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8V21H3V8"/><rect x="1" y="3" width="22" height="5" rx="1"/><line x1="10" y1="12" x2="14" y2="12"/></svg>') no-repeat center/23px;
}
.tt-cards .tl-empty strong{ font-size:16px; font-weight:700; color:var(--tc-ink); letter-spacing:-.02em; }
.tt-cards .tl-empty span{ font-size:13.5px; color:var(--tc-muted); line-height:1.6; }

/* ── 반응형 ──────────────────────────────────────────────────── */
@media (max-width:768px){
  /* 158px 이면 컨테이너 324px(공급사관)에서 열폭이 156px 이 되어 auto-fill 이
     1열로 떨어진다. 전시관(329px)만 2열이 되던 경계 문제 → 150px 로 낮춘다 */
  .tt-cards{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .tt-cards .product__desc{ padding:13px 13px 15px; }
  .tt-cards .product__title{ font-size:13.5px; min-height:39px; }
  .tt-cards .product__price .price{ font-size:19px; }
  .tt-cards .tl-margin{ grid-template-columns:1fr; }
  .tt-cards .product__btns{ flex-direction:column; }
}

/* ==========================================================================
   공급사 카드 (.tt-vcards) — mainVendor
   ========================================================================== */
.tt-vcards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:22px;
}
.tt-vcard{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #e6eaf2;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.tt-vcard:hover{
  transform:translateY(-4px); border-color:#dff0e8;
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 18px 40px rgba(0, 107, 79,.13);
}

/* 대표상품 콜라주 */
.tt-vcollage{
  display:grid; gap:2px; height:168px; background:#e6f1ec;
}
.tt-vcollage.tt-vn3{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.tt-vcollage.tt-vn3 .big{ grid-row:1/3; }
.tt-vcollage.tt-vn2{ grid-template-columns:2fr 1fr; }
.tt-vcollage.tt-vn1,
.tt-vcollage.tt-vn0{ grid-template-columns:1fr; }
.tt-vc{
  display:block; background-size:cover; background-position:center; background-color:#e6f1ec;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.tt-vcard:hover .tt-vc{ transform:scale(1.04); }
.tt-vc.tt-vempty{
  background:#f2f5fa url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b9c2d4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8V21H3V8"/><rect x="1" y="3" width="22" height="5" rx="1"/></svg>') no-repeat center/34px;
}

/* 본문 */
.tt-vbody{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.tt-vtop{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.tt-vava{
  width:40px; height:40px; flex:none;
  border-radius:12px;
  background:linear-gradient(135deg,#006b4f,#6cb79b);
  color:#fff; font-size:13.5px; font-weight:800; letter-spacing:-.03em;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0, 107, 79,.26);
}
.tt-vwho{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.tt-vname{
  display:flex; align-items:center; gap:5px;
  font-size:15px; font-weight:800; letter-spacing:-.03em; color:#0f1626;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tt-vf{
  flex:none; width:15px; height:15px; border-radius:50%;
  background:#006b4f; color:#fff;
  font-size:9px; font-style:normal; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.tt-vmeta{ font-size:12.5px; color:#767f92; letter-spacing:-.01em; }
.tt-vmeta b{ color:#395a4c; font-weight:700; }

.tt-vprice{
  display:flex; align-items:baseline; gap:5px;
  padding:9px 11px; margin-bottom:14px;
  background:#fbfcfe; border:1px solid #e6eaf2; border-radius:11px;
  font-size:12px; color:#767f92; letter-spacing:-.01em;
}
.tt-vprice b{
  font-size:16px; font-weight:800; letter-spacing:-.03em; color:#0f1626;
}

.tt-vgo{
  margin-top:auto;
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:42px; border-radius:11px;
  background:#f4f7fd; color:#395a4c;
  font-size:13px; font-weight:700; letter-spacing:-.02em;
  transition:background .18s, color .18s;
}
.tt-vgo i{ font-style:normal; transition:transform .18s; }
.tt-vcard:hover .tt-vgo{ background:#006b4f; color:#fff; }
.tt-vcard:hover .tt-vgo i{ transform:translateX(3px); }

@media (max-width:768px){
  .tt-vcards{ grid-template-columns:1fr; gap:14px; }
  .tt-vcollage{ height:140px; }
}