/* =========================
   INDEX NEW - BRAND STYLE
   ========================= */

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.8;
}

/* HERO 區 */
.hero {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #000;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('hero.jpg') center/cover no-repeat;
  opacity: 0.7;
  transform: scale(1.05);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.hero-title {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-top: 10px;
  opacity: 0.9;
}

/* 按鈕 */
.btn-primary {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 28px;
  background: #d4af37;
  color: #000;
  font-weight: bold;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.btn-primary:hover {
  background: #fff;
  transform: translateY(-2px);
}

/* 區塊 */
.section {
  max-width: 1100px;
  margin: auto;
  padding: 80px 20px;
}

.section-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 40px;
  color: #8b6b2e;
}

/* 卡片 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  padding: 25px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* 手機 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
}  /* 基礎設定 */
.hsu-brand-link {
    display: inline-block;
    text-decoration: none;
    padding: 10px 0;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.hsu-brand-title {
    display: block;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #e0e0e0; 
    transition: all 0.4s ease;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* 懸停效果：優化後的細緻光感 */
.hsu-brand-link:hover {
    transform: scale(1.1) translateY(-5px);
    /* 縮小光暈範圍與強度 */
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)); 
}

.hsu-brand-title:hover {
    color: #fff700; 
    /* 簡化 text-shadow 層級，減少視覺干擾 */
    text-shadow: 0 0 8px rgba(255, 223, 0, 0.6);
}

/* 底線兩側延伸效果 */
.hsu-brand-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 3px; 
    background: #fff700;
    transition: all 0.5s ease;
    /* 縮小底線光暈 */
    box-shadow: 0 0 5px #fff700; 
}

.hsu-brand-link:hover::after {
    width: 100%;
    left: 0;
}
 /* 導航列容器 */
    .hsu-desktop-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 30px; /* 選項間距 */
    }

    /* 選項基礎樣式 */
    .hsu-desktop-nav li a {
        display: inline-block;
        text-decoration: none;
        padding: 10px 5px;
        position: relative;
        font-weight: 700;
        letter-spacing: 1px;
        color: #e0e0e0; /* 亮銀白基礎色 */
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* 懸停交互效果 */
    .hsu-desktop-nav li a:hover {
        color: #fff700; /* 耀眼金 */
        transform: translateY(-3px);
        text-shadow: 0 0 10px #ffdf00, 0 0 15px #ffaf00;
    }

    /* 底線延伸光條 */
    .hsu-desktop-nav li a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: #fff700;
        transition: all 0.4s ease;
        box-shadow: 0 0 8px #fff700;
    }

    .hsu-desktop-nav li a:hover::after {
        width: 100%;
        left: 0;
    }


 /* 1. 導航列與基礎佈局 */
    body { overflow-x: hidden; }
    .hsu-navbar { display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 5%; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); position: fixed; top: 0; width: 100%; z-index: 9999; box-sizing: border-box; }
    .hsu-logo-area { display: flex; align-items: center; gap: 15px; }

    /* 2. Logo 特效 (與您的圖片路徑綁定) */
    .hsu-logo-box { width: 40px !important; height: 40px !important; position: relative !important; cursor: pointer !important; transition: 0.3s; }
    .hsu-rotate-ring { width: 100% !important; height: 100% !important; background: url('outer-frame.png') center/contain no-repeat !important; animation: hsu-spin 4s linear infinite; }
    .hsu-static-core { width: 100% !important; height: 100% !important; position: absolute !important; top: 0; background: url('inner-logo.png') center/contain no-repeat !important; }
    
    .hsu-logo-box:hover { transform: scale(1.2); }
    .hsu-logo-box:hover .hsu-rotate-ring { animation: hsu-spin 0.2s linear infinite !important; box-shadow: 0 0 15px 5px rgba(212, 175, 55, 0.8) !important; border-radius: 50% !important; }

    /* 3. 桌機選單 */
    .hsu-brand-title { color: #d4af37; font-size: 18px; font-weight: bold; }
    .hsu-desktop-nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
    .hsu-desktop-nav a { color: #fff; text-decoration: none; padding: 0 15px; font-size: 15px; }

    /* 4. 手機選單與底線修復 */
    .hsu-mobile-trigger { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
    .hsu-mobile-menu { position: fixed; top: 60px; right: -100%; width: 250px; height: 100vh; background: rgba(0,0,0,0.98); transition: 0.3s; padding: 20px; z-index: 9999; }
    .hsu-menu-list { list-style: none; padding: 0; margin: 0; }
    .hsu-menu-list li { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.3) !important; } /* 強制底線 */
    .hsu-menu-list a { color: #fff; text-decoration: none; font-size: 18px; display: block; }

    @media (max-width: 768px) { .hsu-desktop-nav { display: none; } .hsu-mobile-trigger { display: block; } }
    @keyframes hsu-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


  /* 旗艦版共用樣式 */
    .hsu-master-container { font-family: 'Noto Serif TC', serif; color: #333; line-height: 1.8; }
    
    /* 懸浮預約按鈕 (手機版專用) */
    .sticky-booking {
        position: fixed; bottom: 20px; left: 0; right: 0; z-index: 999;
        text-align: center; padding: 15px;
    }
    .sticky-booking a {
        background: #d4af37; color: #fff; padding: 15px 40px; 
        border-radius: 50px; text-decoration: none; font-weight: bold;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    /* 手機版標題優化 */
    @media (max-width: 768px) {
        .hsu-title { font-size: 1.5rem !important; letter-spacing: 2px !important; }
        .hsu-desc { font-size: 1rem !important; padding: 0 15px; }
    }


 /* 懸停視覺回饋 */
    .leehi-museum-entrance a:hover img { transform: scale(1.05); }
    /* 響應式排版 */
    @media (max-width: 768px) { 
        .leehi-museum-entrance div[style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; } 
    }
    @media (max-width: 480px) { 
        .leehi-museum-entrance div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } 
    }

 .leehi-btn {
    display: inline-block;
    background-color: #d4af37; /* 預設金色 */
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.4s ease; /* 控制變色速度 */
  }
  .leehi-btn:hover {
    background-color: #2c3e50; /* 滑鼠移入變深色 */
    color: #d4af37;           /* 文字轉為金色 */
    transform: scale(1.05);   /* 微小放大效果，讓按鈕「動一下」 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  /* 客製化 RWD 容器：典藏質感背景與邊框 */
    .digital-museum-section {
        max-width: 1200px;
        margin: 40px auto;
        padding: 20px;
        font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
        background-color: #fcfcfc; /* 極致極簡白，更顯典藏感 */
        border: 2px solid #b38a38; /* 典藏金實心邊框 */
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    }

    /* 標題設定：超吸睛大氣金色質感 */
    .section-title {
        text-align: center;
        color: #b38a38; /* 典藏金 */
        font-size: 32px;
        letter-spacing: 3px;
        margin-bottom: 40px;
        border-bottom: 3px solid #b38a38;
        display: inline-block;
        padding-bottom: 15px;
        width: 100%;
        text-transform: uppercase;
    }

    /* 網格佈局：自動適應手機與電腦 */
    .media-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* RWD 最小寬度調整 */
        gap: 25px; /* 區塊間距放大 */
    }

    /* 影像與影片容器：極簡無邊框懸浮感 */
    .media-item {
        background: #fff;
        border: 1px solid #e0e0e0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        overflow: hidden;
        border-radius: 4px; /* 微幅圓角 */
    }

    .media-item:hover {
        transform: translateY(-8px); /* 滑鼠滑過大幅跳動感 */
        box-shadow: 0 8px 25px rgba(179,138,56,0.2); /* 金色懸浮光暈 */
    }

    .media-item img, .media-item video {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 影片區塊特殊樣式：高張力金色陰影 */
    .media-item.video-container {
        border: 2px solid #b38a38;
        grid-column: span 1; /* 預設寬度 */
    }

    /* 影片在電腦版上可以佔 2 格寬，增加張力 */
    @media (min-width: 768px) {
        .media-item.video-container {
            grid-column: span 2;
        }
    }

    .media-caption {
        padding: 20px;
        text-align: center;
        font-size: 16px;
        color: #333;
        line-height: 1.8;
        background-color: #fff;
    }

    .media-caption strong {
        color: #b38a38; /* 內文關鍵字金色 */
        font-size: 18px;
        display: block;
        margin-bottom: 5px;
    }

/* 增加按鈕脈衝動畫效果 */
.cta-pulse:hover {
    transform: scale(1.05);
}
@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}
.cta-pulse {
    animation: pulse-gold 2s infinite;
}

  .leehi-guide-section {
        max-width: 900px;
        margin: 40px auto;
        padding: 30px;
        background: #fdfcf9;
        border: 1px solid #e0d8c3;
        font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
    }
    .leehi-title {
        color: #8b7355;
        text-align: center;
        font-size: 28px;
        margin-bottom: 30px;
        letter-spacing: 2px;
    }
    .guide-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }
    .guide-item {
        padding: 20px;
        border-bottom: 1px solid #eee;
    }
    .guide-item h3 {
        color: #555;
        font-size: 18px;
        margin-bottom: 10px;
    }
    .guide-item p {
        color: #666;
        line-height: 1.8;
        font-size: 15px;
    }

 .hero-img { display: block !important; width: 100% !important; height: auto !important; object-fit: cover !important; transition: transform 0.5s ease; }
        .hero-link:hover .hero-img { transform: scale(1.02); }
        .overlay-text { background: rgba(0,0,0,0.6); color: #fff; padding: 10px; text-align: center; }

 .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; }
  .hsu-craftsman-note {
        padding: 30px;
        background: #222; /* 深色背景，代表深夜燈火 */
        color: #ddd;
        font-size: 16px;
        border-radius: 8px;
        margin: 40px auto;
        max-width: 850px;
        border-left: 5px solid #d4af37;
        font-family: "Microsoft JhengHei", sans-serif;
    }
    .hsu-craftsman-note b { color: #fff; }
    .hsu-craftsman-note .highlight { color: #d4af37; }

  .truelove-service-gallery .gallery-item {
                flex: 1 1 calc(33.333% - 20px);
                min-width: 300px;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 8px 20px rgba(0,0,0,0.1);
                background: #fff;
                position: relative;
                transition: transform 0.4s ease, box-shadow 0.4s ease;
            }
            .truelove-service-gallery .gallery-item:hover {
                transform: translateY(-8px);
                box-shadow: 0 15px 30px rgba(184,134,11,0.3);
                z-index: 10;
            }
            .truelove-service-gallery .gallery-media {
                width: 100%;
                height: auto;
                display: block;
                transition: filter 0.4s ease;
            }
            /* 優雅漸層與穿透點擊 */
            .truelove-service-gallery .gallery-caption {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 20px;
                background: linear-gradient(to top, rgba(90, 62, 26, 0.85) 0%, rgba(90, 62, 26, 0.4) 60%, transparent 100%);
                color: #ffffff !important;
                transform: translateY(100%);
                transition: transform 0.4s ease;
                pointer-events: none; /* 解決無法點擊問題：滑鼠可穿透此層點擊連結 */
                box-sizing: border-box;
            }
            .truelove-service-gallery .gallery-item:hover .gallery-caption {
                transform: translateY(0);
            }
            .truelove-service-gallery .caption-title {
                font-size: 19px;
                font-weight: bold;
                color: #d4af37 !important;
                display: block;
                margin-bottom: 5px;
            }
            .truelove-service-gallery .caption-text {
                font-size: 15px;
                line-height: 1.6;
                display: block;
            }