/*
 * 반상회 추가 스타일
 * main.css(템플릿 원본)는 건드리지 않고, 새로 필요한 것만 여기에 적는다.
 * 디자인 변경이 아니라 "새 기능에 필요한 최소한"만 넣는 것이 원칙.
 */

/* 메뉴 팝업 설명 — 페이지에는 안 보이고 팝업 안에서만 쓰인다 */
.glightbox-desc {
  display: none;
}

/* 팝업 안 설명 글자가 너무 붙어 보이지 않게 */
.gslide-description .gdesc-inner {
  padding: 20px;
}

.gslide-description .gslide-title {
  margin-bottom: 8px;
}

/* 품절 표시 — 관리자에서 '품절' 체크한 메뉴 */
.menu-item.bsh-soldout .menu-img {
  filter: grayscale(1);
  opacity: .45;
}

.menu-item.bsh-soldout {
  position: relative;
}

.menu-item.bsh-soldout::after {
  content: "SOLD OUT";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 8px 18px;
  border-radius: 4px;
  pointer-events: none;
}

/* ── 로고 ──────────────────────────────────────────────
   템플릿 기본은 max-height:36px 인데, 반상회 로고는 아래에
   "Korean BBQ Restaurant" 배지가 붙어 있어서 36px 에서는 글자가 뭉갠다.
   헤더 padding 이 20px 이라 46px 까지는 높이가 변하지 않는다.
   main.css 는 건드리지 않고 여기서만 덮어쓴다.                        */
.header .logo img {
  max-height: 46px;
}

@media (max-width: 575px) {
  /* 좁은 화면에서는 메뉴 버튼과 부딪히지 않게 조금 줄인다 */
  .header .logo img { max-height: 38px; }
}