@charset "utf-8";
/* CSS Document */
/* Block: alla-page */
/* ====== 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>
	

</head>


<body>

  <!-- Lightbox2 CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">

  <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;                /* 滑鼠移上去才顯示 */
}

  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>

/* 按鈕樣式 */
.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');

buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    buttons.forEach(b => b.classList.remove('active'));
    groups.forEach(g => g.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById(btn.dataset.target).classList.add('active');
  });
});
</script>
  <script>
    const buttons = document.querySelectorAll('#filters button');
    const groups  = document.querySelectorAll('.themes');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        groups.forEach(g => g.classList.remove('active'));
        document.getElementById(btn.dataset.target).classList.add('active');
      });
    });
  </script>
	  
	<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>
</html>

    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>

<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>
 
  <!-- 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>
<script>
const slogans = [
  "每場婚禮都是愛的篇章，浪漫只屬於妳們。",
  "獨一無二的婚禮，共築永恆浪漫。",
  "專屬故事，專屬浪漫。",
  "幸福的開始，用婚禮寫下。",
  "浪漫不複製，只為妳們專屬。",
  "愛情的故事，因婚禮而永恆。",
  "每一刻，都值得被珍藏。",
  "婚禮，是愛最美的展現。",
  "專屬妳們的浪漫篇章，正在展開。",
  "讓愛，成為婚禮的靈魂。",
  "愛在婚禮中綻放。",
  "浪漫，是妳們的專屬語言。",
  "每一眼凝視，都是永恆。",
  "幸福，不只是一刻，而是一生。",
  "婚禮，是愛的最佳註解。",
  "浪漫氛圍，溫暖記憶。",
  "專屬妳們的故事，專屬妳們的愛。",
  "每場婚禮，都是夢想的開始。",
  "愛情的篇章，用婚禮書寫。",
  "浪漫，因妳們而完整。"
];

let index = 0;
const sloganEl = document.getElementById("slogan");

function typeWriter(text, i, callback) {
  if (i < text.length) {
    sloganEl.textContent = text.substring(0, i+1);
    setTimeout(() => typeWriter(text, i+1, callback), 100); // 每字間隔 0.1 秒
  } else if (callback) {
    setTimeout(callback, 2000); // 完整顯示後停 2 秒再切換
  }
}

function showNextSlogan() {
  typeWriter(slogans[index], 0, () => {
    index = (index + 1) % slogans.length;
    showNextSlogan();
  });
}

// 初始化
showNextSlogan();
</script>

</body>
</html>