.mcd-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;max-width:1100px;margin:24px auto;padding:12px}
.mcd-total{font-weight:800;font-size:18px;margin:4px 0 12px}
.mcd-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mcd-tab{padding:6px 10px;border:1px solid #ddd;border-radius:999px;cursor:pointer}
.mcd-tab.active{background:#222;color:#fff;border-color:#222}
.mcd-toolbar{display:flex;gap:8px;align-items:center;margin:8px 0}
#mcd-search{flex:1;padding:8px 10px;border:1px solid #ddd;border-radius:8px}
.mcd-grid{display:grid;grid-template-columns:1fr 340px;gap:24px}
@media(max-width:900px){.mcd-grid{grid-template-columns:1fr}}
/* 리스트 카드: 좌우 간격 축소 */
.mcd-card{border:1px solid #eee;border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:8px}
.mcd-name{font-weight:600}
.mcd-kcal{opacity:.75;font-size:13px}
.mcd-add{padding:6px 12px;border:0;background:#ffb300;border-radius:8px;cursor:pointer;white-space:nowrap}
/* 카트: 항목 간 간격 확대 */
.mcd-cart{position:sticky;top:12px;border:1px solid #eee;border-radius:12px;padding:14px;height:fit-content}
.mcd-cart h3{margin:0 0 8px}
.mcd-cart-item{display:flex;justify-content:space-between;align-items:center;margin:10px 0;gap:12px}
.mcd-cart-item span:last-child button{margin-left:6px}
.mcd-result{margin-top:16px;border-top:1px dashed #ddd;padding-top:12px}
.mcd-summary{margin-top:8px;font-size:14px}

/* 총 칼로리: H1 느낌 + 중앙 */
#mcd-root .mcd-total{
  font-weight:800;
  font-size:clamp(26px, 5vw, 34px);
  text-align:center;
  margin:8px 0 18px;
}


/* 리스트 카드: 좌우 간격 확 줄이기 */
#mcd-root .mcd-card{
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;              /* ← 간격 축소 */
  padding:8px 10px;     /* ← 패딩 약간 축소 */
}
#mcd-root .mcd-add{
  padding:6px 10px;     /* ← 버튼 크기 살짝 줄임 */
  white-space:nowrap;   /* 버튼 텍스트 줄바꿈 방지 */
}

/* 장바구니: 버튼들이 두 줄로 밀리지 않게 */
#mcd-root .mcd-cart-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;             /* ← 항목 간격은 오히려 넉넉히 */
  margin:12px 0;
}
#mcd-root .mcd-cart-item span:first-child{
  flex:1;               /* 왼쪽(메뉴명)은 가변 폭 */
  min-width:0;
}
#mcd-root .mcd-cart-item span:last-child{
  white-space:nowrap;   /* 오른쪽(kcal+버튼)은 한 줄 고정 */
}
#mcd-root .mcd-grid{ grid-template-columns:1fr 600px; } /* 기존 340→360 */

/* 총 칼로리 강조 */
#mcd-root .mcd-total {
  font-weight: 800;
  font-size: clamp(26px, 5vw, 34px);
  text-align: center;
  margin: 8px 0 18px;
}

#mcd-root .mcd-total .highlight {
  color: #e53935; /* 강렬한 빨강 */
}


/* 총 칼로리: H1 느낌 + 중앙, 빨간 숫자 강조(이미 적용돼 있으면 유지) */
#mcd-root .mcd-total{
  font-weight:800;
  font-size:clamp(26px, 5vw, 34px);
  text-align:center;
  margin:8px 0 18px;
}
#mcd-root .mcd-total .highlight{ color:#e53935; }

/* 상단 동물 이미지 영역 (총칼로리 문구 위) */
#mcd-root .mcd-animal-top{
  text-align:center;
  min-height: 160px;        /* 이미지 없는 순간에도 레이아웃 안정 */
  margin: 4px 0 10px;
}
#mcd-root .mcd-animal-top img{
  max-width: 220px;
  border-radius: 12px;
  display: inline-block;
  animation: mcd-pop .35s ease; /* 바뀔 때 부드럽게 */
}

/* 간단 팝 애니메이션 */
@keyframes mcd-pop{
  0%   { opacity: 0; transform: scale(.92); }
  100% { opacity: 1; transform: scale(1); }
}