body {
  margin: 0;
  font-family: 'Noto Sans TC', sans-serif;
  padding-top: 120px;
  position: relative;
  z-index: 0;
  background-color: transparent; /* ✅ 不用白底 */
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('img/Embrace_grey.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1; /* ✅ 放在最底層 */
  opacity: 1; /* ✅ 可調整透明度 */
  animation: fadeInBg 2s ease-in-out forwards;
}

/* 淡入動畫 */
@keyframes fadeInBg {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.top-banner {
  background-color: #80bf49;
  padding: 30px;
  text-align: center;
  position: fixed;         /* 🔁 讓它固定 */
  top: 0;                  /* 位置固定在最上方 */
  left: 0;
  width: 100%;             /* 撐滿整個寬度 */
  z-index: 1000;           /* 確保它會蓋住其他元素 */
}

.banner-logo {
  display: block;     /* 讓圖片變區塊元素 */
  margin-left: 0;     /* 靠左 */
  width: 300px;
  height: auto;
  
  top: 20px;           /* 距離頂部 20px */
  left: 20px;          /* 距離左邊 20px */
}

/* RWD：Embrace logo（等比例縮放 + 置中） */
.banner-logo-2{
  display:block;
  width:clamp(180px, 72vw, 420px); /* 最小180px，隨視窗到32vw，上限420px */
  max-width:100%;                  /* 不超過容器 */
  height:auto;                     /* 依寬度自動等比例 */
  margin-inline:auto;              /* 置中 */
  object-fit:contain;              /* 保持比例不變形 */
}

/* 背景加上蔬菜圖 */
.embrace-bg {
   margin-top: -30px; /* 抵銷 body 的 padding-top */
  background-image: url('img/Embrace_background.jpg');  /* 確保路徑正確 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4rem 1rem;
  position: relative;
  overflow: hidden;
}

/* 給內容加上淡入動畫 */
.fade-in-content {
  animation: fadeIn 2s ease-in-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

/* 重新定義淡入動畫 */
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lunchbox-section {
  padding: 1rem 1rem;
  text-align: center;
}

/* Embrace 平衡食光 Logo 淡入效果 */
.banner-logo-2 {
  display: block;
  margin: 0 auto;
  max-width: 400px;
  height: auto;
  padding: 20px 0;
  opacity: 0;  /* 初始透明 */
  animation: fadeIn 2s ease-in forwards;  /* 淡入動畫 */
  animation-delay: 0.5s; /* 延遲開始 */
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.section-title {
  font-size: 1.8rem;
  color: #333;
}

.section-subtitle {
  font-size: 1rem;
  color: #555;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;

}

.food-menu{
  display:flex;
  justify-content:center;   /* 讓圖片整體水平置中 */
  align-items:center;
  padding:60px 40px;
}

/* 統一管 <picture> 內的主圖 */
.food-menu picture > img{
  display:block;
  width:100%;           /* 先吃滿容器寬 */
  max-width:900px;      /* 桌機不要超過 800px */
  height:auto;
  margin-inline:auto;   /* 再保險置中 */
  opacity:0;
  transform: translateY(30px);
  animation: slideInImage .6s ease forwards;
  animation-delay:.2s;
}

/* 手機：滿版，並縮小左右 padding，避免看起來「越縮越小」 */
@media (max-width:576px){
  .food-menu{ padding:40px 16px; }
  .food-menu picture > img{
    max-width:none;     /* 取消 800px 上限 → 真的滿版 */
    width:100%;
  }
}

/* 動畫 */
@keyframes slideInImage {
  to { opacity:1; transform: translateY(0); }
}

/* 主體卡片樣式 */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 固定 2 欄 */
  row-gap: 0.5rem;                        /* 上下間距縮小 */
  column-gap: 0.5rem;                      /* 左右間距維持 */
  padding: 3rem 15%;
}

@media (max-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr;          /* 手機版顯示 1 欄 */
    row-gap: 0.5rem;
    column-gap: 1rem;
    padding: 1rem 5%;                    /* 手機版左右間距維持 */
  }
}

.ingredient-chip {
  display: inline-block;
  background-color: #f4f4f4;         /* 顏色可自定義 */
  color: #333;
  border-radius: 12px;
  padding: 6px 10px;
  margin: 4px 4px 4px 0;
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background-color 0.3s ease;
}

.ingredient-chip:hover {
  background-color: #ffe2cc;
}

/* 額外調整註解文字樣式 */
.note-text {
  color: #727170;
  font-size: 11pt;
  margin-top: 0.5rem;
}

.ingredients-table {
  background-color: #f9f9f9;
  padding: 10px 15px;
  border-radius: 12px;
  margin-top: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  height: auto;       /* 或指定高度：例如 200px */
}

.summary-s {
  color: #b1aea9;
  font-size: 11pt;
 } 

.menu-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  scale: 0.95;
}

.menu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.menu-card img {
  max-width: 100%;
  height: auto;
  border-radius: 22px;
}

.menu-card h3 {
  color: #f15a24;
  margin-top: 0.5rem;
  font-size: 1.5rem;
}

.menu-card h4 {
  color: #54b436;
  margin-top: 0.5rem;
  font-size: 1.5rem;
}

.menu-card ul {
  list-style: none;
  padding: 0;
  margin: -1rem 0 0 0;
}

.menu-card ul li {
  font-size: 1rem;
  color: #444;
  margin: 0.5px 0;
}

.image-wrapper {
  position: relative;
  display: inline-block;
}

.calorie-badge.blue {
  background-color: #54b436;
}

.calorie-badge.orange {
  background-color: #f8760b;
}

.calorie-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 10px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: float 2s ease-in-out infinite; /* 加上這行讓它漂浮 */
  
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* ✅ 合併淡入動畫與 RWD 寬度設定 */
.banner-logo-2 {
  display:block;
  margin: 0 auto 12px;
  width: clamp(180px, 72vw, 520px);
  max-width:100%;
  height:auto;
  padding: 20px 0;
  object-fit:contain;
  opacity: 0;
  animation: fadeIn 2s ease-in forwards;
  animation-delay: 0.5s;
}

/* 桌機放大 */
@media (min-width: 1200px){
  .banner-logo-2 { width: 600px; }
}