Zomato: 개성 중심의 음식 UX

:root {
  /* Core brand red */
  --zomato-red: #e23744;         /* Primary: CTAs, headers, logo */
  --zomato-red-dark: #cb202d;    /* Pressed states, emphasis */
  --zomato-red-light: #f9e5e7;   /* Backgrounds, tags, badges */

  /* Supporting palette */
  --zomato-gold: #eea61b;        /* Ratings, premium, Gold membership */
  --zomato-green: #3ab757;       /* Veg indicator, success states */
  --zomato-green-dark: #1a8d37;  /* Pure veg restaurants */

  /* Surfaces */
  --zomato-white: #ffffff;
  --zomato-gray-50: #f8f8f8;     /* Page backgrounds */
  --zomato-gray-100: #f0f0f0;    /* Card backgrounds */
  --zomato-gray-400: #9c9c9c;    /* Secondary text */
  --zomato-gray-700: #3e4152;    /* Primary text */
  --zomato-gray-900: #1c1c1c;    /* Headings */
}

/* The veg/non-veg indicator is a critical cultural design element */
.food-indicator {
  width: 18px;
  height: 18px;
  border: 2px solid;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.food-indicator.veg {
  border-color: var(--zomato-green);
}

.food-indicator.veg::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zomato-green);
}

.food-indicator.non-veg {
  border-color: var(--zomato-red);
}

.food-indicator.non-veg::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--zomato-red);
}

/* Restaurant card */
.restaurant-card {
  background: var(--zomato-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 200ms ease;
}

.restaurant-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Hero image with overlays */
.card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Discount badge: top-left */
.discount-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: #2c365e;
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.discount-badge .amount {
  display: block;
  font-size: 17px;
}

/* Delivery time: bottom-right */
.delivery-time {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* Card content */
.card-content {
  padding: 12px 16px;
}

.restaurant-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--zomato-gray-900);
  margin: 0;
}

/* Rating badge */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--zomato-green-dark);
  color: white;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--zomato-gray-400);
  font-size: 13px;
  margin-top: 4px;
}

.card-meta .separator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--zomato-gray-400);
}

레스토랑 카드 구조:
┌─────────────────────────────────────┐
│  [      음식 사진                  ] │
│  [                                ] │
│  [ 60% 할인       ]   [ 25분    ] │
│  [ 최대 ₹120      ]               │
├─────────────────────────────────────┤
│  Paradise Biryani                    │
│  ★ 4.3  ·  비리야니, 북인도 요리    │
│  2인 ₹300  ·  2.5 km               │
└─────────────────────────────────────┘

장바구니가 비어 있을 때:
"맛있는 음식은 항상 만들어지고 있어요! 메뉴에서 맛있는 음식을 주문해보세요."

근처에 레스토랑이 없을 때:
"아직 이 근처에 레스토랑이 없는 것 같아요. 하지만 우리는 매일 성장하고 있답니다."

검색 결과가 없을 때:
"찾으시는 걸 발견하지 못했어요. 하지만 먹어야 할 847가지 다른 이유를 찾았습니다."

주문 처리 중:
"잠깐만요! 주방에서 가장 빠른 셰프를 찾고 있어요."

레스토랑 검색 중:
"주변의 최고의 음식을 찾고 있어요... *극적인 드럼롤*"

결제 처리 중:
"돈을 세고 있어요... 농담이에요, 결제를 처리하고 있습니다."

"배고프신 거 알아요. 우리는 항상 알고 있죠."
"음식이 월요일의 당신 의욕보다 빠르게 이동 중이에요."
"반전: 저녁 메뉴도 점심에 주문할 수 있어요."
"배달 파트너가 오고 있어요. 지도를 계속 쳐다보지 않으려고 해보세요. (그럴 거라는 거 알아요.)"

배달 추적 구조:
┌─────────────────────────────────────┐
│            [지도 화면]               │
│                                      │
│    🏪 ─────── 🛵 ──────── 🏠       │
│  레스토랑    파트너     내 위치      │
│                                      │
├─────────────────────────────────────┤
│  12분 후 도착 예정                   │
│  ████████████░░░░░░ 65%             │
├─────────────────────────────────────┤
│  ✓ 주문 확인됨              4:02 PM │
│  ✓ 레스토랑 준비 중         4:05 PM │
│  ✓ 음식 준비 완료           4:18 PM │
│  → 파트너 픽업 완료         4:22 PM │
│  ○ 이동 중                          │
│  ○ 곧 도착                          │
├─────────────────────────────────────┤
│  배달 파트너: Rahul                  │
│  [전화]  [채팅]  [팁]               │
└─────────────────────────────────────┘