/* ===== 전반적인 레이아웃 ===== */
:root {
  --logo-h:36px;  /* 로고 높이 */
  --pad:8px;      /* 패딩 */
  --line:#eee;    /* 라인 색상 */
  --text:#222;     /* 텍스트 색상 */
  --muted:#666;    /* 회색 텍스트 색상 */
  --brand:#0b5bd3; /* 브랜드 색상 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: #fff;
}

/* 헤더: 로고와 햄버거 메뉴 */
header.top {
  display: flex;
  justify-content: space-between; /* 로고와 메뉴 양쪽 끝에 배치 */
  align-items: center;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  min-height: calc(var(--logo-h) + 2 * var(--pad));
}

header.top .logo {
  display: flex;
}

header.top .logo img {
  height: var(--logo-h);
  display: block;
}

header.top .hamburger {
  width: 24px;
  height: 24px;
  background: url('assets/img/hamburger-icon.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
}

/* 카테고리 드롭다운 */
.catbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
}

.catbar select {
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  width: auto;
}

/* 제품 카드 */
main.container { padding: 12px; }

section.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  section.grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

a.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

a.card .thumb {
  background: #f7f7f7;
  text-align: center;
  display: block;
}

a.card .thumb img {
  width: 100%;
  height: auto;
  display: block;
}

a.card .body {
  padding: 12px;
}

.model {
  font-size: 16px;
  margin: 0 0 6px 0;
}

.cat {
  color: #666;
  font-size: 14px;
  margin: 0 0 12px 0;
}

.empty {
  padding: 24px;
  text-align: center;
  color: #777;
}

.npaging {
  text-align: center;
  padding: 16px 8px 24px;
}

.npaging a {
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.npaging a.active {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* 하단 고정 바: 전화번호 */
footer.callbar {
  background: var(--brand);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 16px;
}

footer.callbar a {
  color: #fff;
  text-decoration: none;
}

footer.callbar .call {
  font-size: 18px; /* 전화번호 글자 크기 크게 */
  font-weight: bold; /* 전화번호 글자 굵기 */
}

footer.callbar .call span {
  font-size: 16px; /* 시간 부분의 크기는 그대로 */
  font-weight: normal; /* 시간 부분은 굵기 그대로 */
}

/* 하단 메뉴 */
.footer-menu {
  display: flex;
  justify-content: space-evenly;
  padding: 12px;
  background: #f1f1f1;
  position: relative;
  width: 100%;
}

.footer-menu a {
  font-size: 14px;
  text-decoration: none;
  color: #333;
}

@media (min-width: 768px) {
  .footer-menu {
    justify-content: space-between;
  }
}