/* CSS Document */


/* ====== 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;                /* 滑�?移�??��?顯示 */
}
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;
    }
/* �w������ (�ù��p�� 768px) ���ץ� */
/* ������̲׭ץ��G�@�ƨ�i�A��Ҧ۵M */
/* ������ƪ��P��ҳ̲��u�Ƴ]�w */
@media screen and (max-width: 768px) {
    /* 1. �ץ��W�������歫�|���D */
    .header, .nav, .menu-container {
        display: block !important;
        text-align: center !important;
    }
    
    /* 2. ���Ϥ��@�ƥu��� 2 �i�A�קK���� */
    .gallery, .group-container, .grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 10px !important;
    }

    /* 3. �Τ@�Ϥ���Ҭ� 3:4 ����ΡA�A�X�i��§�A */
    .item {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 15px !important;
    }

    .img-wrapper {
        aspect-ratio: 3 / 4 !important; /* �T�w������ */
        height: auto !important;
        overflow: hidden !important;
        border-radius: 8px !important;
    }

    .img-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* �T�O�Ϥ����ܧζ񺡮�l */
    }

    /* 4. �ץ��U����s�P���Ҥ�r�j�p */
    .tag-label {
        font-size: 14px !important;
        padding: 6px 0 !important;
        display: block !important;
    }

    .goto-link {
        font-size: 13px !important;
        padding: 8px !important;
        margin-top: 5px !important;
        display: block !important;
        background-color: #A67C52 !important; /* �T�O���s�C����� */
        color: #fff !important;
        text-decoration: none !important;
        border-radius: 4px !important;
    }
}

    .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;
}