.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  justify-content: center;
  padding-bottom: 80px;
}

/* 새로 추가한 세일 뱃지 컨테이너 */
.sale-badges {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 8px;
  width: 2.2rem;
  height: 2.4rem;
  z-index: 1;
}

.top {
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tags {
  height: 1.3rem;
}

/* 메뉴명 2줄*/
.menu-name2 {
  font-size: var(--fs13);
  margin-bottom: 8px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 30px;
}

.menu-name4 {
  font-size: var(--fs13);
  margin-bottom: 8px;
  font-weight: 600;
  line-height: 1.2;
}

/* 메뉴 타이틀 위 카테고리  */
.menu-name {
  font-size: var(--fs12);
  color: var(--gray);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.menu-bt {
  background-color: var(--white);
  /* width: 92px; */
  /* padding: 7px 20px; */
  box-shadow: 0 0 8px 0 #00000026;
  border-radius: 30px;
  color: var(--red);
  font-size: var(--fs13);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  min-width:75%;
}

.menu-bt.active {
  background-color: var(--red2);
  color: var(--white);
}

.menu-align {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 17px;
  object-fit: contain;
}
.menu-align2 {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 5px;
}

.ali-row {
  position: relative;
  display: flex;
  justify-content: center; /* 텍스트를 수평 중앙에 배치 */
  align-items: center; /* 수직 중앙 정렬 */
}

.ali-row .menu-name {
  text-align: center; /* 텍스트 가운데 정렬 */
}

.ali-row .heart {
  position: absolute;
  right: 0;
  top: -7%;
  width: 16px;
  height: 16px;
}

.ali-row.bali {
	position: fixed;
}

.bottom {
  box-shadow: 0 0 10px 0 #0000001a;
  background-color: var(--white);
  border-radius: 10px;
  padding: 20px 15px;
  text-align: center;
  height: 50%;
}

/* 01-00-02 css -------------------------------------------------------------  */

.bottom2 {
  box-shadow: 0 0 10px 0 #0000001a;
  background-color: var(--white);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  height: 50%;
}

.menu-name3 {
  font-size: var(--fs12);
  font-weight: bold;
}

/* UI-ORD-04-01 */
.pepper {
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  left: -8px;
  bottom: 19px;
  transform: translateY(-50%);
}
/* 메뉴가 3줄일때 고추 */
.pepper2 {
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  left: -8px;
  bottom: 37px;
  transform: translateY(-50%);
}

/* 08-01 */

.menu-name2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}