/* ============================================================
   브랜드 페이지
   www/plugin/crawl/brand.css
   ============================================================ */

.br-wrap { max-width:1400px; margin:0 auto; padding:34px 18px 70px;
  font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",sans-serif;
  color:#2c2c2a; }

.br-sub { margin:0; font-size:14px; color:#6b7076; letter-spacing:-.01em; }
.br-cnt { margin-left:8px; padding:2px 9px; font-size:12px; color:#8a8f96;
  background:#f4f5f7; border-radius:11px; }

/* [수정] 예전에는 왼쪽에 260px 세로 칸을 두고 오른쪽에 로고를 깔았습니다.
   글자 버튼은 몇 개 안 되는데 로고 격자가 그만큼 좁아졌습니다.
   → 글자 찾기를 위로 올려 가로 전체를 쓰고, 로고는 그 아래 전폭으로 깝니다. */

/* 한글 묶음 · 영문 묶음
   글자 줄 바로 아래에 그 글자의 로고가 옵니다. */
.br-sec { margin-top:22px; padding-top:20px; border-top:1px solid #ececee; }
.br-sec .br-grid { margin-top:14px; }
.br-none { margin:14px 0 0; font-size:13px; color:#b4b8be; }

/* 나라별 보기 */
.br-h2 { margin:0 0 4px; font-size:16px; font-weight:800; letter-spacing:-.02em;
  color:#2c2c2a; }
.br-cn-row { margin-top:18px; }
.br-cn-h { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.br-flag { width:30px; height:20px; object-fit:cover; display:block;
  border:1px solid #ececee; border-radius:3px; background:#fafbfb; flex:0 0 auto; }
.br-cn-h .nm { font-size:14px; font-weight:700; letter-spacing:-.02em; color:#2c2c2a; }
.br-cn-h .n { padding:1px 8px; font-size:11.5px; color:#8a8f96;
  background:#f4f5f7; border-radius:10px; }

/* 글자 줄 */
.br-set { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.br-set a, .br-set span {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:36px; padding:0 10px;
  font-size:13.5px; border-radius:6px;
  border:1px solid #e8eaec; background:#fff;
  color:#55595f; text-decoration:none; box-sizing:border-box;
  transition:border-color .15s, color .15s, background .15s; }
.br-set a:hover { border-color:#c2c6cb; color:#2c2c2a; background:#fafafa; }
.br-set a.on { background:#2c2c2a; border-color:#2c2c2a; color:#fff; font-weight:700; }

/* 상품이 없는 글자 — 누를 수 없다는 것이 보이게 */
.br-set span.off { color:#dcdfe3; background:#fafbfb; border-color:#f1f2f4;
  cursor:default; }


/* 브랜드 격자 */
.br-grid { display:grid; gap:10px; margin:0; padding:0; list-style:none;
  align-items:stretch;
  grid-template-columns:repeat(10, minmax(0, 1fr)); }
.br-grid a { display:flex; flex-direction:column; align-items:center;
  height:100%; padding:16px 8px 14px; border:1px solid #ececee;
  border-radius:8px; background:#fff; text-decoration:none; color:inherit;
  box-sizing:border-box;
  transition:border-color .15s, transform .15s; }
.br-grid a:hover { border-color:#2c2c2a; transform:translateY(-2px); }

/* [수정] 칸 너비가 로고 원본 크기에 끌려다니던 문제
 *
 *   grid-template-columns: repeat(10, 1fr)
 *
 * 여기서 1fr 은 사실 minmax(auto, 1fr) 입니다. 칸이 내용물보다 작아지지
 * 못해서, 로고 원본이 넓으면 그 칸만 벌어지고 나머지가 밀렸습니다.
 * max-width:100% 는 그려질 때만 듣고, 칸 너비를 정하는 계산에는
 * 원본 너비가 쓰입니다.
 *
 * → minmax(0, 1fr) 로 바꾸고, 안쪽 요소에도 min-width:0 을 줍니다.
 *   격자 칸(li)과 flex 칸(a)은 기본이 min-width:auto 라 같은 일이 생깁니다.
 *   한 군데라도 빠지면 그 지점에서 다시 벌어집니다. */
.br-grid > li { min-width:0; display:block; }
.br-grid a { min-width:0; }

.br-logo { display:flex; align-items:center; justify-content:center;
  width:100%; min-width:0; height:46px; margin-bottom:10px;
  flex:0 0 46px;                 /* 눌리거나 늘어나지 않게 못을 박습니다 */
  overflow:hidden; }
.br-logo img { max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block; }
.br-noimg { font-size:15px; font-weight:700; color:#c2c6cb; letter-spacing:-.02em; }

.br-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; width:100%; min-width:0; height:35px; flex:0 0 35px;
  font-size:12.5px; font-weight:600; text-align:center;
  line-height:1.4; word-break:keep-all; }
.br-en { display:block; width:100%; min-width:0; height:14px; flex:0 0 14px;
  margin-top:2px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:10.5px; color:#a3a8ae; text-align:center;
  text-transform:uppercase; letter-spacing:.03em; }

.br-empty { padding:80px 0; text-align:center; color:#a3a8ae; font-size:14px; }
.br-back { margin:0 0 18px; font-size:13px; }
.br-back a { color:#8a8f96; text-decoration:none; }
.br-back a:hover { color:#2c2c2a; }

/* ── 브랜드 상세 ───────────────────────────────────────── */

.bv-banner { margin:0 0 26px; border-radius:11px; overflow:hidden;
  background:#f4f5f7; }
.bv-banner img { display:block; width:100%; height:auto; }

.bv-head { display:flex; align-items:center; gap:22px; margin-bottom:22px; }
.bv-logo { flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:108px; height:108px; padding:14px; border:1px solid #ececee;
  border-radius:11px; background:#fff; box-sizing:border-box; }
.bv-logo img { max-width:100%; max-height:100%; object-fit:contain; }

.bv-nm2 { margin:0; font-size:25px; font-weight:700; letter-spacing:-.02em; }
.bv-en { margin:5px 0 0; font-size:13px; color:#a3a8ae;
  text-transform:uppercase; letter-spacing:.04em; }
.bv-n { margin:10px 0 0; font-size:13px; color:#8a8f96; }

.bv-intro { margin:0 0 30px; padding:20px 22px; background:#fafafa;
  border-radius:9px; font-size:14px; line-height:1.85; color:#4a4e54; }

/* 정렬 */
.bv-sort { display:flex; gap:16px; margin:0 0 20px; padding-bottom:13px;
  border-bottom:1px solid #ececee; }
.bv-sort a { font-size:13.5px; color:#8a8f96; text-decoration:none; }
.bv-sort a:hover { color:#2c2c2a; }
.bv-sort a.on { color:#2c2c2a; font-weight:600; }

/* 상품 목록 */
.bv-items { display:grid; gap:26px 18px; margin:0 0 40px; padding:0;
  list-style:none; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.bv-items a { display:block; text-decoration:none; color:inherit; }

.bv-thumb { position:relative; display:block; margin-bottom:12px;
  border-radius:8px; overflow:hidden; background:#f4f5f7; }
.bv-thumb img { display:block; width:100%; height:auto; }
.bv-sold { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.78);
  font-size:14px; font-weight:600; color:#55595f; }

.bv-nm { display:block; font-size:14px; line-height:1.55; word-break:keep-all;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bv-pr { display:block; margin-top:8px; font-size:13.5px; color:#2c2c2a; }
.bv-pr del { margin-right:6px; color:#b8bcc2; font-size:12.5px; }
.bv-pr b { font-size:15.5px; font-weight:700; }

/* 화면이 좁아지면 칸 수를 줄인다. 10칸을 그대로 두면 로고가 안 보인다. */
@media (max-width:1300px) {
  .br-grid { grid-template-columns:repeat(8, minmax(0, 1fr)); }
}
@media (max-width:1100px) {
  .br-grid { grid-template-columns:repeat(6, minmax(0, 1fr)); }
}

@media (max-width:900px) {
  .br-set { gap:5px; }
  .br-set a, .br-set span { min-width:34px; height:32px; padding:0 8px;
    font-size:13px; }
  .br-grid { grid-template-columns:repeat(5, minmax(0, 1fr)); }
}

@media (max-width:640px) {
  .br-wrap { padding:24px 14px 50px; }
  .br-sec { margin-top:16px; padding-top:16px; }
  .br-sec .br-grid { margin-top:10px; }
  .br-set a, .br-set span { min-width:31px; height:30px; padding:0 6px; }
  .br-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .br-logo { height:40px; flex-basis:40px; }
  .bv-head { gap:15px; }
  .bv-logo { width:78px; height:78px; padding:10px; }
  .bv-nm2 { font-size:20px; }
  .bv-items { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 12px; }
}