@charset "utf-8";
/* CSS Document */

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 按鈕特效 */
.goto-link {
  display: inline-block;
  padding: 8px 16px;
  margin-top: 8px;
  background: linear-gradient(90deg, #ff7eb3, #ff758c);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
}

.goto-link::after {
  content: "++++";
  position: absolute;
  right: -20px;
  opacity: 0;
  transition: opacity 0.3s ease, right 0.3s ease;
  color: #ffd700;
}

.goto-link:hover {
  background: linear-gradient(90deg, #ff758c, #ff7eb3);
  transform: scale(1.05);
}

.goto-link:hover::after {
  opacity: 1;
  right: -5px;
}

/* 編號特效 */
.card-number {
  font-size: 18px;
  font-weight: bold;
  color: #ff758c;
  transition: all 0.3s ease;
}

.item:hover .card-number {
  color: #ffd700;
  text-shadow: 0 0 8px #ff7eb3;
}

/* 圖片邊框特效 */
.img-wrapper img {
  border: 3px solid transparent;
  transition: all 0.4s ease;
}

.img-wrapper:hover img {
  border: 3px solid #ff7eb3;
  box-shadow: 0 0 12px #ffd700;
}

.goto-link {
  display: inline-block;
  padding: 8px 16px;
  margin-top: 8px;
  background: linear-gradient(90deg, #ff7eb3, #ff758c);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
}

.goto-link::after {
  content: "++++";
  position: absolute;
  right: -20px;
  opacity: 0;
  transition: opacity 0.3s ease, right 0.3s ease;
  color: #ffd700;
}

.goto-link:hover {
  background: linear-gradient(90deg, #ff758c, #ff7eb3);
  transform: scale(1.05);
}

.goto-link:hover::after {
  opacity: 1;
  right: -5px;
}

.card-number {
  font-size: 18px;
  font-weight: bold;
  color: #ff758c;
  transition: all 0.3s ease;
}

.item:hover .card-number {
  color: #ffd700;
  text-shadow: 0 0 8px #ff7eb3;
}

.img-wrapper img {
  border: 3px solid transparent;
  transition: all 0.4s ease;
}

.img-wrapper:hover img {
  border: 3px solid #ff7eb3;
  box-shadow: 0 0 12px #ffd700;
}

.img-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden; /* 確保放大時不超出邊界 */
}

/* 編號 */
.card-number {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* 圖片互動 */
.img-wrapper img {
  transition: transform 0.5s ease, filter 0.5s ease;
}

.img-wrapper:hover .card-number {
  opacity: 0; /* 滑鼠靠近時淡出編號 */
}

.img-wrapper:hover img {
  transform: scale(1.05); /* 圖片放大 5% */
  filter: brightness(1.1); /* 圖片加亮 */
}

/* figcaption 初始隱藏 */
.tag-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* 滑鼠移入時淡入顯示 */
.img-wrapper:hover .tag-label {
  opacity: 1;
}

/* 按鈕互動 */
.goto-link {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.goto-link:hover {
  background: #555;        /* 顏色變化 */
  transform: scale(1.05);  /* 輕微放大 */
}

.img-wrapper {
  position: relative; /* 讓子元素能用絕對定位 */
  display: inline-block;
}

.card-number {
  position: absolute;
  top: 8px;       /* 距離上方 */
  left: 8px;      /* 距離左邊 */
  background: rgba(0,0,0,0.6); /* 半透明背景，避免文字看不清楚 */
  color: #fff;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
  transition: opacity 0.3s ease; /* 平滑消失效果 */
}

.img-wrapper:hover .card-number {
  opacity: 0; /* 滑鼠靠近時消失 */
}

  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-QG4PPDKZ5Y');
  </script>

  <!-- Schema.org WebSite -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "https://www.leehi.tw/",
    "name": "LEEHI 麗嗨媽媽禮服",
    "publisher": {
      "@type": "Organization",
      "name": "LEEHI 真愛婚禮"
    },
    "potentialAction": {
      "@type": "SearchAction",
      "target": "https://www.leehi.tw/?s={search_term_string}",
      "query-input": "required name=search_term_string"
    }
  }
  </script>

  <!-- Schema.org LocalBusiness -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "真愛婚紗攝影禮服西裝媽媽裝",
    "image": "https://www.truelove.tw/images/mom1.jpg",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "彰化市",
      "addressRegion": "台灣",
      "streetAddress": "金馬路三段806號"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 24.0754973,
      "longitude": 120.5280841
    },
    "telephone": "+886-4-7633888",
    "url": "https://www.truelove.tw",
    "priceRange": "$$",
    "openingHours": "Mo,Tu,We,Fr,Sa,Su 12:00-21:00",
    "contactPoint": {
      "@type": "ContactPoint",
      "contactType": "customer service",
      "telephone": "+886-932-963023",
      "name": "許總"
    },
    "sameAs": [
      "https://line.me/ti/p/42q1LkWhh9",
      "https://www.instagram.com/truelove.wedding/",
      "https://www.facebook.com/e.truelove.Wedding/",
      "https://www.youtube.com/@彰化真愛婚禮",
      "https://www.google.com/maps/place/leehi%E9%BA%97%E5%97%A8%E5%AA%BD%E5%AA%BD%E7%A6%AE%E6%9C%8D/"
    ],
    "description": "Suits.com.tw 為真愛婚禮延伸出的男士西服品牌，讓家的榮耀在婚禮中完整呈現。每一套西服，不只是造型，更是一份情感的承載。"
  }
  </script>

<style>
/* ====== 全域設定 ====== */
body { margin:0; font-family:"Noto Sans TC", sans-serif; background:#f9f9f9; color:#333; line-height:1.6; }
a { text-decoration:none; }

/* ====== 導覽列 ====== */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(to right, #000000, #333333);
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 20px; transition: background 0.5s ease, box-shadow 0.5s ease;
}
.logo-link { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-link img { height:30px; width:auto; display:block; }
.logo-text {
  font-size:1.4rem; font-weight:bold;
  background: linear-gradient(90deg, #ff8fb1, #ffd6e7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.main-nav { list-style:none; display:flex; gap:20px; margin:0; padding:0; }
.main-nav li a { color:#fff; font-weight:500; }
.main-nav li a:hover { color:#ffd6e7; border-bottom:2px solid #ffd6e7; }
.cta-btn { background:#ff8fb1; color:#fff; font-weight:bold; padding:8px 16px; border-radius:20px; }
.cta-btn:hover { background:#d6336c; }

/* ====== Hero 區塊 ====== */
.hero { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:40px 20px; }
.hero h1 { font-size:48px; margin-bottom:20px; }
.hero p { max-width:600px; font-size:18px; margin-bottom:30px; }

/* ====== 主要內容區塊 ====== */
section { padding:40px 20px; text-align:center; }
section h2 { font-size:32px; margin-bottom:20px; }
section p { max-width:600px; margin:0 auto; }

/* ====== Footer ====== */
.footer { background:#171721; color:#fff; text-align:center; padding:20px; font-size:14px; }

/* ====== 展示牆標題 ====== */
.page-title { font-size:3rem; font-weight:700; text-align:center; line-height:1.4; margin-bottom:20px; }
.page-title .tagline { display:block; font-size:1.5rem; font-weight:400; margin-top:8px; opacity:0.9; }
.page-subtitle { font-size:1.2rem; font-weight:300; text-align:center; color:#666; margin-top:10px; letter-spacing:1px; }
/* 針對手機版 (螢幕小於 768px) 的修正 */
@media (max-width: 768px) {
    .img-wrapper img {
        /* 將比例從 1/1 改成 auto，讓它恢復長方形 */
        aspect-ratio: auto !important; 
        /* 確保寬度充滿格子 */
        width: 100%; 
        /* 避免圖片變形，保持長比例 */
        object-fit: contain; 
        height: auto;
    }

    .item {
        /* 確保格子的外框也是長方形 */
        height: auto !important;
    }
}

/* ====== 深色背景故事區塊 ====== */
#story {
  min-height:100px;
  padding:30px 10px;
  box-sizing:border-box;
  background:linear-gradient(180deg, #000000, #2c003e);
}
@media (max-width:768px) {
  #story {
    min-height:100px;
    padding:20px 15px;
    background:linear-gradient(180deg, #000000, #d4af37);
  }
}
.top-booking-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #ffd6e8, #ffb6c1, #ffc0cb); /* ✅ 更淡的粉紅漸層 */
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 1000;
  opacity: 0;
  animation: fadeInTopBtn 0.8s ease forwards;
}

/* ====== 背景場景 ====== */
.bg-scene { transition: background 1.5s ease; }
.scene-hero { background: linear-gradient(270deg, rgba(18,18,24,0.7), rgba(139,28,40,0.7)), url('images/600.jpg') center/cover no-repeat; }
.scene-red { background: linear-gradient(180deg, #C91F33, #8B1C28); color:#fff; }
.scene-dark { background: linear-gradient(180deg, #171721, #0f0f12); color:#fff; }
.scene-light { background: linear-gradient(180deg, #ffffff, #cccccc); }

/* ====== 文字漸層 ====== */
.text-gradient-red { background: linear-gradient(90deg, #C91F33, #8B1C28); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.text-gradient-light { background: linear-gradient(90deg, #ffffff, #cccccc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.text-gradient-dark { background: linear-gradient(90deg, #171721, #0f0f12); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* ====== 動畫效果 ====== */
.fade-item { opacity:0; transition:opacity 1s ease, transform 1s ease; }
.fade-item.visible { opacity:1; transform:translateX(0) translateY(0); }
.fade-up { transform:translateY(30px); }
.fade-down { transform:translateY(-30px); }
.fade-left { transform:translateX(-30px); }
.fade-right { transform:translateX(30px); }

/* ====== LOGO 光暈特效 ====== */
.logo-link { opacity:0; transform:translateY(-10px); animation: fadeInLogo 1.2s ease forwards; transition: box-shadow 0.4s ease, transform 0.3s ease; }
.logo-link img { transition: filter 0.4s ease, transform 0.3s ease; }
.logo-text { background-size:200% 100%; background-position:left; transition: background-position 0.6s ease; }
.logo-link:hover { box-shadow:0 0 15px rgba(255,143,177,0.6); transform:scale(1.05); }
.logo-link:hover .logo-text { background-position:right; }
.logo-link:hover img { filter: drop-shadow(0 0 8px #ff8fb1); }
@keyframes fadeInLogo { to { opacity:1; transform:translateY(0); } }
</style>
  
  <style>
    /* ====== 標題樣式 ====== */
    .lace-title {
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      background: linear-gradient(90deg, #b22222, #000000);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 20px 0;
    }

    /* ====== Logo 圖片 ====== */
    .logo img {
      height: 30px; /* 原本 60px，縮小一半 */
      width: auto;
      display: block;
    }

    /* ====== Hero 區塊 ====== */
    .hero-section {
      text-align: center;
      padding: 80px 20px;
      background: linear-gradient(135deg, #b22222, #000000, #b22222);
      background-size: 400% 400%;
      animation: bgFlow 20s ease infinite;
      position: relative;
      color: #fff;
      overflow: hidden;
    }
    .hero-section::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: url('lace-pattern.png') repeat;
      background-size: 600px;
      opacity: 0.15;
      pointer-events: none;
      z-index: 0;
    }

    /* Hero 標題動畫 */
    .page-title {
      font-size: 2.8rem;
      font-weight: 700;
      margin: 0 0 15px;
      opacity: 0;
      animation: fadeInDown 1s ease forwards;
      animation-delay: 0.2s;
      position: relative;
      z-index: 1;
    }
    .page-subtitle {
      font-size: 1.3rem;
      font-style: italic;
      background: linear-gradient(90deg, #ff6f91, #ffffff, #ff3d6e);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      opacity: 0;
      animation: fadeInUp 1s ease forwards;
      animation-delay: 0.6s;
      position: relative;
      z-index: 1;
    }
    .page-subtitle:hover { animation: subtitleFlow 3s ease infinite; }

    @keyframes fadeInDown { from { opacity:0; transform:translateY(-30px);} to { opacity:1; transform:translateY(0);} }
    @keyframes fadeInUp { from { opacity:0; transform:translateY(30px);} to { opacity:1; transform:translateY(0);} }
    @keyframes subtitleFlow { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
    @keyframes bgFlow { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

    /* ====== Hero Title ====== */
    .hero-title { text-align:center; margin:60px auto 40px auto; }
    .hero-title h1 {
      font-size:3rem; font-weight:700; letter-spacing:4px;
      background: linear-gradient(90deg, #d4af37, #f5f5f5);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    }
    .hero-title .subtitle { font-size:1.2rem; font-weight:300; color:#666; margin-top:10px; letter-spacing:2px; }

    /* Romantic 樣式 */
    .hero-title.romantic h1 {
      font-size:3.5rem; font-family:'Great Vibes', cursive; font-weight:400; letter-spacing:3px;
      background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fbc2eb);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text; color:transparent;
    }
    .hero-title.romantic .subtitle {
      font-size:1.3rem; font-family:'Playfair Display', serif; font-weight:300;
      background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fbc2eb);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text; color:transparent;
      margin-top:12px; letter-spacing:2px;
    }
    @media (max-width:768px) {
      .hero-title.romantic h1 { font-size:2.5rem; letter-spacing:2px; display:flex; flex-direction:column; align-items:center; }
      .hero-title.romantic .subtitle { font-size:1rem; letter-spacing:1px; margin-top:8px; }
    }

    /* ====== Page Title ====== */
    .page-title { font-size:3rem; font-weight:700; text-align:center; line-height:1.4; margin-bottom:20px; }
    .page-title .tagline { display:block; font-size:1.5rem; font-weight:400; margin-top:8px; opacity:0.9; }
    .page-subtitle { font-size:1.2rem; font-weight:300; text-align:center; color:#666; margin-top:10px; letter-spacing:1px; }
    @media (max-width:768px) {
      .page-title { font-size:2rem; }
      .page-title .tagline { font-size:1rem; }
      .page-subtitle { font-size:0.9rem; }
    }

    /* ====== Story 區塊 ====== */
    #story.fade-section.bg-scene.scene-dark {
      height:auto !important; min-height:300px !important; padding:40px 20px !important;
      box-sizing:border-box; background:linear-gradient(180deg, #000000, #2c003e);
    }
    @media (max-width:768px) {
      #story.fade-section.bg-scene.scene-dark {
        min-height:200px !important; padding:20px 15px !important;
        background:linear-gradient(180deg, #000000, #d4af37);
      }
    }/* 導覽列基本樣式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 40px;
  margin-right: 8px;
}

.logo-text {
  font-weight: 600;
  color: #333;
}

.main-nav {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.main-nav li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

.main-nav li a:hover {
  color: #ff3d6e;
}

/* 透明佔位的立即預約 */
.nav-placeholder {
  visibility: hidden;   /* 隱藏文字 */
  display: inline-block;
  min-width: 100px;     /* 保留固定寬度空位 */
}
/* 導覽列基本樣式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);

  /* 讓導覽列固定在頂部 */
  position: fixed;   /* 或改成 sticky */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;     /* 確保在最上層 */
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 40px;
  margin-right: 8px;
}

.logo-text {
  font-weight: 600;
  color: #333;
}

.main-nav {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.main-nav li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

.main-nav li a:hover {
  color: #ff3d6e;
}

/* 透明佔位的立即預約 */
.nav-placeholder {
  visibility: hidden;   /* 隱藏文字 */
  display: inline-block;
  min-width: 100px;     /* 保留固定寬度空位 */
}
/* 導覽列基本樣式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);

  /* 固定在頂部 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* 滾動時背景變色 */
.navbar.scrolled {
  background: #ffe4e1; /* 滾動後的背景色，可自行調整 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 40px;
  margin-right: 8px;
}

.logo-text {
  font-weight: 600;
  color: #333;
}

.main-nav {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.main-nav li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

.main-nav li a:hover {
  color: #ff3d6e;
}

/* 透明佔位的立即預約 */
.nav-placeholder {
  visibility: hidden;   /* 隱藏文字 */
  display: inline-block;
  min-width: 100px;     /* 保留固定寬度空位 */
}
  </style>
  <style>
    /* 移除外層固定高度，避免撐滿整個螢幕 */
    #hero, #story,
    .hero, .fade-section, .bg-scene, .scene-dark, .scene-hero {
      min-height: auto !important;
      height: auto !important;
    }

    /* Hero 區塊：減半高度 */
    #hero {
      padding-top: 60px;
      padding-bottom: 60px;
      text-align: center;
    }

    #hero h1 {
      font-size: 2.5rem;
      margin: 0;
    }

    #hero .subtitle {
      font-size: 1.2rem;
      color: #eee;
      margin-top: 10px;
    }

    /* 品牌故事區塊：減半高度 */
    #story {
      padding-top: 40px;
      padding-bottom: 40px;
      text-align: center;
      margin: 0;
    }

    #story h2 {
      font-size: 2rem;
      margin-bottom: 15px;
    }

    #story p {
      font-size: 1.2rem;
      color: #444;
    }

    /* RWD：手機再縮小一半 */
    @media (max-width: 768px) {
      #hero {
        padding-top: 30px;
        padding-bottom: 30px;
      }
      #hero h1 {
        font-size: 2rem;
      }
      #hero .subtitle {
        font-size: 1rem;
      }

      #story {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      #story h2 {
        font-size: 1.5rem;
      }
      #story p {
        font-size: 1rem;
      }
    }

    /* 導覽列滾動效果 */
    .navbar.scrolled {
      background: linear-gradient(90deg, #ff6f91, #ff3d6e);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }#story p {
  font-size: 22px;          /* 調整字體大小 */
  line-height: 1.8;         /* 行距更舒適 */
  font-weight: 600;         /* 字體加粗，像標語 */
  text-align: center;       /* 置中顯示 */
  color: #fce4ec;           /* 淡粉色，呼應背景 */
  background: linear-gradient(90deg, #FADADD, #8B3A62);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* 漸層文字效果 */
  text-shadow: 0 0 12px rgba(255, 200, 220, 0.6); /* 光暈效果 */
}
.glow-text {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(90deg, #FADADD, #8B3A62, #FADADD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255, 200, 220, 0.6);
  background-size: 200% 200%;
  animation: glowMove 6s linear infinite;
}

@keyframes glowMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

  </style>

</section>

  <!-- JS -->
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const toggle = document.querySelector(".menu-toggle");
      const nav = document.querySelector(".main-nav");
      const overlay = document.querySelector(".overlay");
      const navbar = document.querySelector(".navbar");

      if (toggle) {
        toggle.addEventListener("click", () => {
          toggle.classList.toggle("active");
          nav.classList.toggle("active");
          overlay.classList.toggle("active");
        });
      }

      if (overlay) {
        overlay.addEventListener("click", () => {
          if (toggle) toggle.classList.remove("active");
          nav.classList.remove("active");
          overlay.classList.remove("active");
        });
      }

      // 滾動時導覽列底色漸層
      document.addEventListener("scroll", () => {
        if (window.scrollY > 50) {
          navbar.classList.add("scrolled");
        } else {
          navbar.classList.remove("scrolled");
        }
      });
    });
	.glow-text {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(90deg, #FADADD, #8B3A62, #FADADD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255, 200, 220, 0.6);
  background-size: 200% 200%;
  animation: glowMove 6s linear infinite;
  display: inline-block;
  position: relative;
}

@keyframes glowMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 游標效果 */
.glow-text::after {
  content: "|";
  position: absolute;
  right: -10px;
  animation: blinkCursor 0.8s infinite;
  color: #FADADD;
}

@keyframes blinkCursor {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
  
	  
  </script>
  <style>
    /* 背景區塊：紅黑漸層 + 緩慢流動 */
    .hero-section {
      text-align: center;
      padding: 40px 20px; /* 原本 80px，改成 40px，減半高度 */
      background: linear-gradient(135deg, #b22222, #000000, #b22222);
      background-size: 400% 400%;
      animation: bgFlow 20s ease infinite;
      position: relative;
      color: #fff;
      overflow: hidden;
    }

    /* 半透明蕾絲紋理覆蓋 */
    .hero-section::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: url('lace-pattern.png') repeat;
      background-size: 600px;
      opacity: 0.15;
      pointer-events: none;
      z-index: 0;
    }

    /* 單行標題 */
    .page-title {
      font-size: 2rem;       /* 桌機字體大小 */
      font-weight: 600;
      margin: 0;
      opacity: 0;
      animation: fadeInDown 1s ease forwards;
      position: relative;
      z-index: 1;
    }

    /* 動畫效果 */
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes bgFlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* RWD：手機再縮小一半高度與字體 */
    @media (max-width: 768px) {
      .hero-section {
        padding: 20px 10px; /* 再縮小一半 */
      }
.brand-glow {
  font-size: 24px; /* 標題可再調大 */
  font-weight: 600;
  text-align: center;
  background: linear-gradient(90deg, #ff6b6b, #8B3A62, #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255, 120, 150, 0.6);
  background-size: 200% 200%;
  animation: glowMove 6s linear infinite;
  display: inline-block;
  position: relative;
}

@keyframes glowMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

  </style>

<style>
/* ====== Grid 容器 ====== */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 0;
}
.item {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.item.active { opacity: 1; transform: translateY(0); }

/* ====== 淡入動畫 ====== */
.fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease forwards; }
.fade-in:nth-child(odd) { animation-delay: 0.2s; }
.fade-in:nth-child(even) { animation-delay: 0.4s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0);} }

/* ====== 圖片樣式 ====== */
.img-wrapper { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
.img-wrapper img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; border-radius: 8px; }
.img-wrapper:hover img { transform: scale(1.05); }

/* ====== 漸層遮罩 ====== */
.overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
  opacity: 0; transition: opacity 0.3s ease;
  border-radius: 8px; z-index: 1;
}
.img-wrapper:hover .overlay { opacity: 1; }

/* ====== 浮標籤文字 ====== */
.tag-label {
  position: absolute; bottom: 12px; left: 12px;
  color: #fff; font-size: 1rem; font-weight: 600;
  background: rgba(0,0,0,0.6); padding: 6px 12px;
  border-radius: 4px; opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease; z-index: 2;
}
.img-wrapper:hover .tag-label { opacity: 1; transform: translateY(0); }

/* ====== 覆蓋整張圖片的連結 ====== */
.goto-link {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0));
  display: flex; justify-content: center; align-items: flex-end;
  text-decoration: none; color: #fff; font-size: 1.2rem;
  padding-bottom: 20px; opacity: 0; transform: translateY(100%);
  transition: all 0.8s ease; z-index: 10;
}
.img-wrapper:hover .goto-link { opacity: 1; transform: translateY(0); }
.goto-link:hover { background: linear-gradient(to top, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.2)); }

.goto-text {
  color: #fff; font-size: 1.4rem;
  opacity: 0; transform: scale(0.9);
  transition: all 0.8s ease;
}
.img-wrapper:hover .goto-text { opacity: 1; transform: scale(1); }

/* ====== 響應式 ====== */
@media (max-width:1024px){ .grid-container{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:768px){ .grid-container{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .grid-container{ grid-template-columns:1fr;} }

/* ====== CTA 按鈕 ====== */
.cta-section { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px auto; justify-content: center; }
.cta-btn {
  padding: 10px 18px; border-radius: 6px;
  font-weight: 600; text-decoration: none;
  transition: 0.3s; color: #fff;
  opacity: 0; transform: translateY(20px);
  animation: ctaFadeIn 0.8s ease forwards;
  position: relative; overflow: hidden;
}
.cta-btn.pink { background:#e91e63; animation-delay:0.2s; }
.cta-btn.green { background:#4caf50; animation-delay:0.4s; }
.cta-btn.brown { background:#795548; animation-delay:0.6s; }
@keyframes ctaFadeIn { to { opacity:1; transform:translateY(0); } }
.cta-btn::after {
  content:""; position:absolute; inset:0;
  border-radius:6px; box-shadow:0 0 12px rgba(255,255,255,.6);
  opacity:0; transition:0.4s;
}
.cta-btn:hover::after { opacity:1; }

/* ====== Footer ====== */
.site-footer {
  background: linear-gradient(135deg,#2c2c2c,#3a3a3a,#1a1a1a);
  color:#eee; padding:40px 20px; font-size:.95rem;
  border-top:4px solid #ffd700;
  box-shadow: inset 0 6px 12px rgba(0,0,0,.4);
  text-align:center;
}
.footer-info h3 { color:#ffd700; margin-bottom:10px; }
.footer-info a { color:#4caf50; text-decoration:none; }
.footer-info a:hover { text-decoration:underline; }

.footer-social ul {
  list-style:none; padding:0;
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; margin:20px 0;
}
.footer-social a {
  color:#eee; text-decoration:none; font-weight:500;
  display:inline-block; padding:6px 10px; border-radius:6px;
  transition:.3s;
}
.footer-social a:hover {
  color:#ffd700; transform:scale(1.1);
  box-shadow:0 0 12px rgba(255,215,0,.6);
}

.footer-slogan {
  font-style:italic; margin:15px 0; color:#ccc;
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:10px;
}
.footer-copyright {
  font-size:.85rem; color:#888;
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:10px; padding-top:10px;
}

/* 圖片放大 (Lightbox) */
.img-wrapper a.lightbox img {
  cursor: zoom-in; /* 滑鼠移到圖片顯示放大鏡 */
  transition: transform 0.3s ease;
}

.img-wrapper a.lightbox img:hover {
  transform: scale(1.05); /* 滑過時稍微放大 */
}

/* 前往主題按鈕 */
.goto-link {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  background-color: #ff6f61; /* 按鈕底色 */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  opacity: 0; /* 初始透明 */
  animation: fadeIn 1s forwards; /* 淡入動畫 */
  transition: background-color 0.3s ease;
  position: relative;
}

/* 箭頭圖示 */
.goto-link::before {
  content: "➡️ ";
  position: relative;
  left: 0;
  transition: left 0.3s ease;
}

/* 滑過時效果 */
.goto-link:hover {
  background-color: #e85c50; /* 顏色加深 */
}

.goto-link:hover::before {
  left: 4px; /* 箭頭往右移動 */
}

/* 標籤文字 */
.tag-label {
  font-size: 16px;
  font-weight: bold;
  margin-top: 6px;
  color: #333;
}

/* Lightbox 圖片提示文字 */
.lightbox::after {
  content: " 🔍"; /* 在圖片連結後加上放大鏡圖示 */
  font-size: 14px;
  color: #666;
}

/* 淡入動畫定義 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 整個展示牆容器 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* 每個項目淡入動畫 */
.item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards;
}

/* 依序延遲效果 */
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }
.item:nth-child(4) { animation-delay: 0.4s; }
.item:nth-child(5) { animation-delay: 0.5s; }
/* ...依序到第 24 */
.item:nth-child(24) { animation-delay: 2.4s; }

/* 動畫定義 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 初始狀態：隱藏 */
.item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 顯示狀態：淡入 */
.item.show {
  opacity: 1;
  transform: translateY(0);
}

  </style>
	
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }
    .item {
      text-align: center;
    }
    .tag-label {
      font-size: 16px;
      font-weight: bold;
      margin-top: 6px;
      color: #333;
    }
    .goto-link {
      display: inline-block;
      margin-top: 8px;
      padding: 6px 12px;
      background-color: #ff6f61;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }
    .goto-link:hover {
      background-color: #e85c50;
    }
  </style>

  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }
    .item {
      text-align: center;
      position: relative;
    }
    .img-wrapper {
      position: relative;
    }
    .tag-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 90px;  
      line-height: 90px;  
      background: linear-gradient(
        to top,
        rgba(0,0,0,0.9) 0%,    /* 底部最深黑色 */
        rgba(0,0,0,0.6) 40%,   /* 中間稍微淡一點 */
        rgba(0,0,0,0.3) 70%,   /* 再往上更淡 */
        rgba(0,0,0,0.0) 100%   /* 頂端完全透明 */
      );
      color: #fff;
      font-size: 18px;
      text-align: center;
    }
    .goto-link {
      display: inline-block;
      margin-top: 8px;
      padding: 6px 12px;
      background-color: #ff6f61;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }
    .goto-link:hover {
      background-color: #e85c50;
    }
    .goto-link::before {
      content: "➡️ ";
    }.tag-label {
  opacity: 0;                /* 預設隱藏 */
  transition: opacity 0.3s;  /* 漸變效果 */
}

.img-wrapper:hover .tag-label {
  opacity: 1;                /* 滑鼠移上去才顯示 */
}

  </style>

				 
				 
				 
				 
</div>
<!-- jQuery 必須在 Lightbox 之前 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Lightbox2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

	
	

	

	
<!-- 燈箱容器 -->
<div id="lightbox-overlay">
  <span id="lightbox-close">&times;</span>
  <span id="lightbox-prev">&#10094;</span>
  <span id="lightbox-next">&#10095;</span>
  <img id="lightbox-img" src="" alt="">
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const lightboxLinks = document.querySelectorAll('.lightbox');
  const overlay = document.getElementById('lightbox-overlay');
  const lightboxImg = document.getElementById('lightbox-img');
  const closeBtn = document.getElementById('lightbox-close');
  const prevBtn = document.getElementById('lightbox-prev');
  const nextBtn = document.getElementById('lightbox-next');
  let currentIndex = 0;

  function showLightbox(index) {
    currentIndex = index;
    lightboxImg.src = lightboxLinks[index].href;
    overlay.style.display = 'flex';
  }

  lightboxLinks.forEach((link, index) => {
    link.addEventListener('click', e => {
      e.preventDefault();
      showLightbox(index);
    });
  });

  closeBtn.addEventListener('click', () => overlay.style.display = 'none');
  overlay.addEventListener('click', e => {
    if(e.target.id === 'lightbox-overlay') overlay.style.display = 'none';
  });

  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + lightboxLinks.length) % lightboxLinks.length;
    showLightbox(currentIndex);
  });

  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % lightboxLinks.length;
    showLightbox(currentIndex);
  });

  // 鍵盤操作
  document.addEventListener('keydown', e => {
    if(overlay.style.display === 'flex'){
      if(e.key === 'Escape') overlay.style.display = 'none';
      if(e.key === 'ArrowLeft'){
        currentIndex = (currentIndex - 1 + lightboxLinks.length) % lightboxLinks.length;
        showLightbox(currentIndex);
      }
      if(e.key === 'ArrowRight'){
        currentIndex = (currentIndex + 1) % lightboxLinks.length;
        showLightbox(currentIndex);
      }
    }
  });

  // IntersectionObserver 進場動畫
  const title = document.querySelector(".section-title");
  const items = document.querySelectorAll(".item");
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry, index) => {
      if (entry.isIntersecting) {
        if (entry.target.classList.contains("section-title")) {
          entry.target.classList.add("active");
        } else {
          setTimeout(() => {
            entry.target.classList.add("active");
          }, index * 300);
        }
      }
    });
  }, { threshold: 0.2 });

  if(title) observer.observe(title);
  items.forEach(item => observer.observe(item));
});
</script>

<style>
/* 區塊背景 */
.themes-section {
  position: relative;
  background: url('images/wedding-bg-tw.png') no-repeat center center / cover;
  padding: 60px 20px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* 花瓣飄落動畫 */
.petals { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.petal {
  position: absolute; top:-50px; width:30px; height:30px;
  background: url('https://www.leehi.tw/images/petal.png') no-repeat center/contain;
  animation: fall 10s linear infinite; opacity:0.8;
}
.petal:nth-child(1){ left:10%; animation-delay:0s; }
.petal:nth-child(2){ left:30%; animation-delay:2s; }
.petal:nth-child(3){ left:50%; animation-delay:4s; }
.petal:nth-child(4){ left:70%; animation-delay:6s; }
.petal:nth-child(5){ left:90%; animation-delay:8s; }
@keyframes fall { 0%{transform:translateY(-10px) rotate(0deg); opacity:1;} 100%{transform:translateY(600px) rotate(360deg); opacity:0;} }

/* 標題 */
.section-title {
  opacity:0; transform:translateY(20px);
  transition:opacity 1s ease, transform 1s ease;
  text-align:center; font-size:2rem; margin-bottom:40px;
  color:#444; font-family:"DFKai-SB","Noto Serif TC",serif;
  position:relative; z-index:1;
}
.section-title.active { opacity:1; transform:translateY(0); }

/* 展示牆 */
.themes { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; z-index:1; }
@media(max-width:768px){ .themes{ grid-template-columns:1fr; } }

.item { opacity:0; transform:translateY(30px); transition:opacity 0.8s ease, transform 0.8s ease; }
.item.active { opacity:1; transform:translateY(0); }

.img-wrapper img {
  width:95%; max-height:350px; object-fit:cover;
  opacity:0.9; border-radius:12px; margin:auto; display:block;
  transition:transform 0.5s ease, box-shadow 0.5s ease;
}
.img-wrapper img:hover { transform:scale(1.05); box-shadow:0 0 20px rgba(255,182,193,0.6); }

/* 燈箱樣式 */
#lightbox-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.8);
  justify-content:center; align-items:center;
  z-index:9999;
}.themes-section {
  position: relative;
  background: url('images/wedding-bg-tw.png') no-repeat center center / cover;
  padding: 60px 20px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  overflow: visible; /* 讓花瓣不被裁掉 */
}

.petals {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1; /* 背景上層 */
}

.section-title, .themes {
  position: relative;
  z-index: 2; /* 前景層 */
}

#lightbox-overlay img { max-width:90%; max-height:90%; border-radius:8px; }
#lightbox-close, #lightbox-prev, #lightbox-next {
  position:absolute; color:#fff; font-size:2rem; cursor:pointer; user-select:none;
}
#lightbox-close { top:20px; right:30px; }
#lightbox-prev { top:50%; left:30px; transform:translateY(-50%); }
#lightbox-next { top:50%; right:30px; transform:translateY(-50%); }
</style>

  <style>
    body { font-family:"Microsoft JhengHei",sans-serif; background:#f9f9f9; margin:0; }
    .gallery { max-width:1400px; margin:0 auto; padding:24px; }
    .section-title { text-align:center; font-size:28px; margin-bottom:20px; }

    .filter-buttons { text-align:center; margin-bottom:20px; }
    .filter-buttons button {
      margin:0 6px; padding:10px 16px; border:none; border-radius:6px;
      background:#ff6699; color:#fff; cursor:pointer;
      transition: background 0.3s ease;
    }
    .filter-buttons button.active { background:#333; }

    .themes { display:none; opacity:0; transition: opacity 0.6s ease; }
    .themes.active {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
      opacity:1;
    }
    @media(max-width:1024px){ .themes.active{ grid-template-columns:repeat(3,1fr);} }
    @media(max-width:768px){ .themes.active{ grid-template-columns:repeat(2,1fr);} }
    @media(max-width:480px){ .themes.active{ grid-template-columns:1fr;} }

    .group-title {
      grid-column:1/-1;
      text-align:center;
      font-size:22px;
      margin:10px 0;
      color:#444;
    }

    /* 卡片進場動畫 */
    .item {
      background:#fff;
      border-radius:8px;
      overflow:hidden;
      box-shadow:0 2px 6px rgba(0,0,0,.1);
      position:relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      opacity:0;
      transform: translateY(30px);
      animation: fadeInUp 0.8s ease forwards;
    }
    .item:nth-child(odd) { animation-delay:0.2s; }
    .item:nth-child(even) { animation-delay:0.4s; }

    @keyframes fadeInUp {
      from { opacity:0; transform:translateY(30px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* hover 放大 + 陰影 */
    .item img {
      width:100%;
      height:360px;
      object-fit:cover;
      display:block;
      transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.3s ease;
    }
    .item:hover img {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(0,0,0,0.25);
      opacity:0.9;
    }

    /* figcaption 漸層遮罩文字 */
    figcaption.overlay {
      position:absolute;
      bottom:0; left:0; right:0;
      padding:10px;
      background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
      color:#fff; font-size:14px;
      opacity:0; transition: opacity 0.4s ease;
    }
    .item:hover figcaption.overlay { opacity:1; }

    .seo-desc {
      text-align:center; font-size:14px; color:#555; margin:8px 0;
      transition: opacity 0.3s ease;
    }
    .item:hover .seo-desc { opacity:0.8; }
	  .group-title {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  background: linear-gradient(90deg, #ff6699, #ffcc66);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 20px 0;
  letter-spacing: 2px;
  position: relative;
}

.group-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #ff6699;
  margin: 8px auto 0;
  border-radius: 2px;
}
.group-title::after {
  content: "";
  display: block;
  width: 200px;
  height: 4px;
  background: linear-gradient(90deg, #ff6699, #ffcc66);
  margin: 8px auto 0;
  border-radius: 2px;
}
.group-title {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #333;
  margin: 20px 0;
  position: relative;
  letter-spacing: 2px;
}

.group-title::after {
  content: "";
  display: block;
  width: 60%;   /* ✅ 改成佔整體寬度的 60%，更長 */
  height: 4px;
  background: linear-gradient(90deg, #ff6699, #ffcc66); /* 漸層線條 */
  margin: 8px auto 0;
  border-radius: 2px;
}
/* 手機版排版修正 */
@media(max-width:480px){
  .themes.active {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 兩欄整齊排列 */
    row-gap: 24px;                         /* ✅ 垂直間距，確保上下不貼死 */
    column-gap: 16px;                      /* 水平間距 */
    justify-content: center;              /* ✅ 最後一張自動置中 */
    padding-bottom: 40px;                 /* ✅ 底部留白 */
  }
}

@media(max-width:360px){
  .themes.active {
    grid-template-columns: 1fr;           /* ✅ 超小螢幕單欄顯示 */
    row-gap: 24px;
    padding-bottom: 40px;
  }
}

/* 每張卡片底部留空（加強版） */
.item {
  margin-bottom: 0 !important;            /* ✅ 清除干擾 */
}
/* 手機版排版修正 */
@media(max-width:480px){
  .themes.active {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 兩欄整齊排列 */
    row-gap: 24px;                         /* 垂直間距，避免上下貼死 */
    column-gap: 16px;                      /* 水平間距 */
    justify-content: center;              /* 最後一張自動置中 */
    padding-bottom: 48px;                 /* 底部留白 */
  }
}

@media(max-width:360px){
  .themes.active {
    grid-template-columns: 1fr;           /* 超小螢幕單欄顯示 */
    row-gap: 24px;
    padding-bottom: 48px;
  }
}

/* 每張卡片底部留空（加強版） */
.item {
  margin-bottom: 0 !important;
}

/* 保險：圖片底部也留一點空間 */
.item img {
  margin-bottom: 8px;
}
@media(max-width:480px){
  .themes.active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 兩欄穩定排列 */
    gap: 20px;                                        /* 上下左右間距 */
    align-items: start;                               /* 垂直對齊 */
    justify-items: center;                            /* ✅ 卡片居中 */
    padding: 20px 0 60px;                             /* ✅ 上下留白 */
  }
}

@media(max-width:360px){
  .themes.active {
    grid-template-columns: 1fr;                       /* ✅ 超小螢幕單欄 */
    gap: 24px;
    padding: 20px 0 60px;
  }
}

/* 卡片底部留空，避免貼死 */
.item {
  margin-bottom: 0 !important;
}

/* 圖片底部留空，避免 figcaption 黏住 */
.item img {
  display: block;
  margin-bottom: 8px;
}

  </style>
		
<style>
/* 按鈕樣式 */
.tab-buttons {text-align:center;margin:20px 0;}
.tab-buttons button {
  background:#E6E6E6;border:none;padding:10px 20px;margin:5px;
  border-radius:6px;cursor:pointer;font-size:16px;transition:all 0.3s ease;
}
.tab-buttons button.active {background:#8B3A62;color:#fff;}
.tab-buttons button:hover {background:#FADADD;}

/* 展示牆排版 */
.themes {opacity:0;visibility:hidden;transition:all 0.5s ease;}
.themes.active {opacity:1;visibility:visible;display:grid;
  grid-template-columns:repeat(4,1fr);gap:20px;max-width:1200px;margin:40px auto;}
.group-title {grid-column:1/-1;font-size:24px;font-weight:bold;text-align:center;margin-bottom:20px;color:#8B3A62;}

/* 圖片卡片效果 */
figure.item {position:relative;overflow:hidden;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.2);}
figure.item img {width:100%;display:block;transition:transform 0.3s ease;}
figure.item:hover img {transform:scale(1.05);}
figcaption.overlay {
  position:absolute;bottom:0;background:rgba(0,0,0,0.6);color:#fff;width:100%;
  text-align:center;padding:8px;opacity:0;transition:opacity 0.3s ease;
}
figure.item:hover figcaption.overlay {opacity:1;}
p.seo-desc {text-align:center;font-size:14px;margin-top:8px;color:#555;}
</style>

<script>
// Tab 切換功能 + 自動輪播
const buttons = document.querySelectorAll('.tab-buttons button');
const groups = document.querySelectorAll('.themes');
let currentIndex = 0;
let autoPlayInterval;

// 切換顯示的函式
function showGroup(index) {
  // 移除所有 active 樣式
  buttons.forEach(b => b.classList.remove('active'));
  groups.forEach(g => g.classList.remove('active'));

  // 加上當前 active
  buttons[index].classList.add('active');
  groups[index].classList.add('active');
  currentIndex = index;
}

// 手動點擊切換
buttons.forEach((btn, i) => {
  btn.addEventListener('click', () => {
    showGroup(i);
    resetAutoPlay(); // 點擊後重置自動輪播
  });
});

// 自動輪播
function autoPlay() {
  currentIndex = (currentIndex + 1) % groups.length;
  showGroup(currentIndex);
}
function resetAutoPlay() {
  clearInterval(autoPlayInterval);
  autoPlayInterval = setInterval(autoPlay, 5000); // 每 5 秒切換一次
}

// 啟動輪播
showGroup(0); // 預設顯示第一組
resetAutoPlay();
</script>
  
    body {
      margin: 0;
      font-family: "Microsoft JhengHei", sans-serif;
      background: #fff0f5;
    }

    /* ===== 花瓣容器 ===== */
    .petals {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      overflow: hidden;
      z-index: 2000;
    }
    .petal { position: absolute; pointer-events: none; }
    @keyframes fall {
      0%   { transform: translateY(var(--startY)) translateX(0) rotate(0deg); opacity: var(--opacity); }
      50%  { transform: translateY(50vh) translateX(var(--drift)) rotate(180deg); opacity: calc(var(--opacity) - 0.2); }
      100% { transform: translateY(110vh) translateX(calc(var(--drift) * -1)) rotate(360deg); opacity: 0; }
    }

    /* ===== 導覽列 ===== */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 24px;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      z-index: 1000;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .navbar.scrolled {
      background: #fff5f7;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    /* LOGO */
    .logo-link {
      display: flex;
      align-items: center;
      text-decoration: none;
    }
    .logo-link img { height: 40px; margin-right: 8px; }
    .logo-text { font-weight: 600; color: #333; }

    /* 導覽選單 */
    .main-nav {
      list-style: none;
      display: flex;
      gap: 20px;
      margin: 0; padding: 0;
    }
    .main-nav li a {
      text-decoration: none;
      color: #333;
      font-weight: 500;
      transition: color 0.3s ease;
    }
    .main-nav li a:hover { color: #ff3d6e; }
    .nav-placeholder { color: transparent; pointer-events: none; }

    /* 右上角立即預約按鈕 */
    .top-booking-btn {
      position: fixed;
      top: 20px; right: 20px;
      background: linear-gradient(135deg, #ff6f91, #ff3d6e, #ff8fa3);
      color: #fff;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 600;
      text-decoration: none;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      z-index: 1200;
      opacity: 0;
      animation: fadeInTopBtn 0.8s ease forwards;
    }
    .top-booking-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 15px rgba(255,105,135,0.8);
    }
    @keyframes fadeInTopBtn {
      from { opacity: 0; transform: translateY(-5px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ===== 主題區塊 ===== */
    .themes-section {
      position: relative;
      background: #fff5f7;
      padding: 60px 20px;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      text-align: center;
      min-height: 300px;
      color: #333;
      margin-top: 80px;
    }

    /* CTA 區塊 */
    .cta-section {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 40px;
      flex-wrap: wrap;
      opacity: 0;
      transform: translateY(20px);
      transition: all 1s ease;
    }
    .cta-btn {
      display: inline-block;
      min-width: 160px;
      text-align: center;
      padding: 12px 20px;
      border-radius: 8px;
      font-weight: 600;
      text-decoration: none;
      color: #fff;
      transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease;
      opacity: 0;
      transform: translateY(20px);
    }
    .cta-btn.booking { background: linear-gradient(135deg, #ff6f91, #ff3d6e, #ff8fa3); }
    .cta-btn.line { background: linear-gradient(135deg, #4caf50, #2e7d32, #81c784); }
    .cta-btn.map { background: linear-gradient(135deg, #8d6e63, #5d4037, #a1887f); }
    .cta-btn:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(0,0,0,0.3); }

    /* ===== Footer ===== */
    .site-footer {
      background: linear-gradient(180deg, #fff0f5 0%, #ffffff 60%, #ffe4e1 100%);
      padding: 40px 20px;
      border-top: 4px double #f3c;
      text-align: center;
      position: relative;
    }
    .footer-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .footer-info, .footer-map, .footer-qr {
      flex: 1;
      min-width: 220px;
      max-width: 300px;
      text-align: center;
    }
    .footer-map iframe {
      width: 100%; height: 200px;
      border-radius: 8px;
      box-shadow: 0 0 12px rgba(0,0,0,0.2);
    }
    .footer-qr img { border-radius: 8px; box-shadow: 0 0 12px rgba(0,0,0,0.2); }

    /* Footer文字顏色修正 */
    .footer-info p,
    .footer-info a {
      color: #222;
      font-weight: 600;
    }
    .footer-info a {
      text-decoration: none;
      color: #ff3d6e;
    }
    .footer-info a:hover {
      text-shadow: 0 0 6px rgba(255,105,135,0.8);
    }

    .footer-social ul {
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-social a { color: #111; font-weight: 600; text-decoration: none; }
    .footer-social a:hover { color: #ff3d6e; text-shadow: 0 0 8px rgba(255,105,135,0.8); }
    .footer-slogan { font-size: 1.1em; font-weight: 600; margin-top: 15px; }
    .footer-copyright { font-size: 0.85rem; color: #555; margin-top: 10px; }

    /* 回到頂端按鈕 */
    .back-to-top {
      position: fixed;
      bottom: 40px; right: 30px;
      background: linear-gradient(135deg, #ff6f91, #ff3d6e, #ff8fa3);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 30px; height: 30px;
      font-size: 0.75rem;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      transition: opacity 0.4s ease, transform 0.3s ease;
      opacity: 0.8;
      z-index: 999;
    }
    .back-to-top:hover { transform: scale(1.1); }/* 立即預約：浮動效果 */
.cta-btn.booking:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

/* LINE：晃動效果 */
@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(2deg); }
  50%  { transform: rotate(-2deg); }
  75%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}
.cta-btn.line:hover {
  animation: wiggle 0.4s ease;
}

/* 門市位置：跳動效果 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.cta-btn.map:hover {
  animation: bounce 0.5s ease;
}
.themes-section {
  position: relative;
  background: #fff5f7;
  padding: 60px 20px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  text-align: center;
  min-height: 300px;
  color: #333;
  margin-top: 80px;
}
.themes-section {
  position: relative;
  background: #fff5f7;
  padding: 30px 20px;   /* ✅ 上下內距減半 */
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  text-align: center;
  min-height: 150px;   /* ✅ 最小高度減半 */
  color: #333;
  margin-top: 80px;
}

  </style>
  <style>
    .about {
      max-width: 900px;
      margin: 40px auto;
      padding: 40px 20px;
      line-height: 1.8;
      font-size: 18px;
      border-radius: 12px;
      transition: opacity 0.5s ease; /* 淡入淡出 */
      opacity: 1;
    }
    .about.fade { opacity: 0; }

    /* 白灰底 */
    .light { background: #f9f9f9; color: #222; }
    .light h3 { color: #c03; }
    .light p { background: #fff; border: 1px solid #ddd; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }

    /* 粉色漸層 */
    .gradient { background: linear-gradient(135deg, #fff0f5, #ffe4e1); color: #222; }
    .gradient h3 { color: #b22222; }
    .gradient p { background: rgba(255,255,255,0.9); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

    /* 深色背景 */
    .dark { background: linear-gradient(135deg, #444, #222); color: #fff; }
    .dark h3 { color: #fff; }
    .dark p { background: rgba(0,0,0,0.4); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

    /* 按鈕 */
    .mode-buttons { text-align: center; margin: 20px; }
    .mode-buttons button {
      margin: 0 10px; padding: 10px 20px; font-size: 16px;
      border: none; border-radius: 6px; cursor: pointer;
    }
    .btn-light { background: #ddd; }
    .btn-gradient { background: #ffb6c1; }
    .btn-dark { background: #333; color: #fff; }

    /* 提示文字 */
    #mode-status { text-align: center; font-size: 18px; margin-bottom: 20px; font-weight: bold; }

    /* emoji 閃亮動畫 */
    @keyframes sparkle {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.3); opacity: 0.7; }
      100% { transform: scale(1); opacity: 1; }
    }
    .sparkle { display: inline-block; animation: sparkle 0.8s ease; }
  </style>

</section>

<script>
  function setMode(mode) {
    const aboutSection = document.getElementById('about');
    const modeStatus = document.getElementById('mode-status');

    // 淡出
    aboutSection.classList.add('fade');
    setTimeout(() => {
      aboutSection.className = 'about ' + mode;
      aboutSection.classList.remove('fade'); // 淡入
    }, 300);

    // 更新提示文字
    let modeText = '';
    if (mode === 'light') modeText = '白灰底';
    if (mode === 'gradient') modeText = '粉色漸層';
    if (mode === 'dark') modeText = '深色背景';
    modeStatus.textContent = '目前模式：' + modeText;

    // 記住選擇
    localStorage.setItem('aboutMode', mode);
  }

  // 預設模式：讀取上次選擇，如果沒有就用粉色漸層
  window.onload = function() {
    const savedMode = localStorage.getItem('aboutMode') || 'gradient';
    setMode(savedMode);
  };
</script>
  

  <!-- 回到頂端按鈕 -->
  <button id="backToTop" class="back-to-top">⬆</button>

  <!-- JS：花瓣特效 + Navbar 滾動變色 + 回到頂端 + CTA 淡入 -->
  <script>
    // 花瓣生成
    function createPetals() {
      const petalsContainer = document.querySelector('.petals');
      if (!petalsContainer) return;

      const count = 1 + Math.floor(Math.random() * 2);
      const baseLeft = Math.random() * 60 + 20;

      for (let i = 0; i < count; i++) {
        const petal = document.createElement('img');
        petal.src = "images/petal.png";

        const size = 20 + Math.random() * 10;
        petal.style.width = size + 'px';
        petal.style.height = size + 'px';

        const opacity = (0.6 + Math.random() * 0.3).toFixed(2);
        petal.style.opacity = opacity;

        const filters = [
          "hue-rotate(330deg) saturate(1.2)", // 粉紅
          "hue-rotate(270deg) saturate(1.1)", // 淡紫
          "brightness(1.2) saturate(0.8)"     // 淡白
        ];
        petal.style.filter = filters[Math.floor(Math.random() * filters.length)];

        petal.classList.add('petal');
        petal.style.left = (baseLeft + (Math.random() * 6 - 3)) + '%';

        const drift = (Math.random() * 30 - 15) + "px";
        petal.style.setProperty('--startY', "-50px");
        petal.style.setProperty('--drift', drift);
        petal.style.setProperty('--opacity', opacity);

        const duration = 10 + Math.random() * 5;
        petal.style.animation = `fall ${duration}s linear forwards`;
        petal.style.animationDelay = Math.random() * 2 + 's';

        petalsContainer.appendChild(petal);
        setTimeout(() => { petal.remove(); }, duration * 1000 + 500);
      }
    }
    setInterval(createPetals, 2000);

    // Navbar 滾動變色
    document.addEventListener("scroll", () => {
      const navbar = document.querySelector(".navbar");
      if (window.scrollY > 50) {
        navbar.classList.add("scrolled");
      } else {
        navbar.classList.remove("scrolled");
      }
    });

    // 回到頂端功能 + CTA 淡入
    document.addEventListener("DOMContentLoaded", () => {
      const btn = document.getElementById("backToTop");
      btn.addEventListener("click", () => {
        window.scrollTo({ top: 0, behavior: "smooth" });
      });

      const ctaSection = document.querySelector(".cta-section");
      const ctaBtns = document.querySelectorAll(".cta-btn");
      setTimeout(() => {
        ctaSection.style.opacity = "1";
        ctaSection.style.transform = "translateY(0)";
        ctaBtns.forEach((btn, index) => {
          setTimeout(() => {
            btn.style.opacity = "1";
            btn.style.transform = "translateY(0)";
          }, 200 * (index + 1));
        });
      }, 500);
    });
  </script>
</body>
</html>