/* =========================================
    1. 核心變數與基礎設定
    ========================================= */
:root {
  --ocean-dark: #006994;
  --ocean-light: #48CAE4;
  --white: #ffffff;
  --text-dark: #333333;
  --text-gray: #6D6E7C;
  --price-red: #ff5a5f;
  --badge-yellow: #f4b400;
  --bg-gray: #f4f7f9;
  --gold-link: #d4a373;
  --radius-card: 20px;
}

/* =========================================
    1-1. 全域滾軸隱藏
    ========================================= */
::-webkit-scrollbar { 
  display: none; 
}

* { 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
  box-sizing: border-box; 
}

/* =========================================
    1-2. Body 基礎樣式
    ========================================= */
body { 
  margin: 0; 
  font-family: 'Noto Sans TC', sans-serif; 
  background-color: var(--bg-gray); 
  color: var(--text-dark); 
  overflow-x: hidden; 
}

body.stop-scroll { 
  overflow: hidden !important; 
}

/* =========================================
    2. 導覽列 (Navbar)
    ========================================= */
.main-navbar { 
  position: fixed; 
  top: 0; 
  width: 100%; 
  z-index: 1000; 
  padding: 15px 20px; 
  transition: 0.4s; 
  display: flex; 
  justify-content: center; 
}

.main-navbar.scrolled { 
  background: rgba(0, 105, 148, 0.95); 
  backdrop-filter: blur(10px); 
  box-shadow: 0 4px 20px rgba(0,0,0,0.1); 
  padding: 10px 20px; 
}

.main-navbar.hide-nav { 
  transform: translateY(-100%); 
}

.nav-container { 
  width: 100%; 
  max-width: 1200px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.logo { 
  height: 35px; 
  cursor: pointer; 
}

.nav-right a { 
  text-decoration: none; 
  color: var(--white); 
  font-weight: 600; 
  margin-left: 20px; 
  font-size: 14px; 
}

/* =========================================
    3. 按鈕 (Buttons)
    ========================================= */
.filter-container { 
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap; 
  justify-content: center; 
  margin: 20px auto; 
}

.filter-btn {
  border: 1px solid rgba(0, 105, 148, 0.1); 
  background: white; 
  color: var(--ocean-dark);
  padding: 8px 18px; 
  border-radius: 50px; 
  font-size: 14px; 
  font-weight: 600; 
  cursor: pointer;
  transition: 0.3s; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.filter-btn.active { 
  background: linear-gradient(135deg, var(--ocean-light), var(--ocean-dark)); 
  color: white; 
  border: none; 
}

/* =========================================
    4. 英雄區 (Hero Section)
    ========================================= */
.island-hero { 
  height: 45vh; 
  min-height: 350px; 
  background: linear-gradient(180deg, rgba(0,105,148,0.4), rgba(0,105,148,0.2)), url('DSC_2287.webp') center/cover; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  color: white; 
}

.tagline { 
  background: var(--badge-yellow); 
  color: #000; 
  padding: 4px 12px; 
  border-radius: 20px; 
  font-weight: 700; 
  font-size: 12px; 
  margin-bottom: 8px; 
}

/* =========================================
    5. 主內容區 (Main Content)
    ========================================= */
.main-content { 
  max-width: 1400px; 
  margin: auto; 
  padding: 30px 15px; 
}

/* =========================================
    6. 卡片列表 (Card Grid)
    ========================================= */
.attractions-grid { 
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
  gap: 15px; 
}

.attraction-card { 
  background: white; 
  border-radius: var(--radius-card); 
  overflow: hidden; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
  display: flex; 
  flex-direction: column; 
  transition: 0.3s; 
  cursor: pointer; 
  position: relative;
}

.attraction-card:hover { 
  transform: translateY(-5px); 
}

/* =========================================
    6-1. 卡片圖片區 (Card Image)
    ========================================= */
.card-image-box { 
  position: relative; 
  height: 160px; 
}

.card-image-box img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.badge-hot { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  background: var(--badge-yellow); 
  color: #000; 
  padding: 3px 10px; 
  border-radius: 10px; 
  font-size: 11px; 
  font-weight: bold; 
  z-index: 5;
}

/* =========================================
    6-2. 卡片內容區 (Card Body)
    ========================================= */
.card-body { 
  padding: 15px; 
  flex-grow: 1; 
}

.title-row { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 5px; 
}

.card-title { 
  font-size: 1.05rem; 
  font-weight: 700; 
  margin: 0; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.card-price { 
  color: var(--price-red); 
  font-weight: bold; 
  font-size: 1.1rem; 
}

.store-type { 
  font-size: 0.8rem; 
  color: var(--text-gray); 
  margin-bottom: 8px; 
  display: flex; 
  align-items: center; 
  gap: 4px; 
}

.card-desc { 
  font-size: 0.85rem; 
  color: #666; 
  line-height: 1.4; 
  height: 40px; 
  overflow: hidden; 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  line-clamp: 2; 
}

.join-card { 
  border: 2px dashed #ccc; 
  background: transparent; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
}

/* =========================================
    7. 詳情彈窗 (Detail Modal)
    ========================================= */
#detail-view {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 3000;
  background: rgba(0, 0, 0, 0.4); 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px);
  display: none; 
  justify-content: center; 
  align-items: flex-end; 
  opacity: 0; 
  transition: opacity 0.4s ease;
}

#detail-view.active { 
  display: flex; 
  opacity: 1; 
}

#detail-content {
  background: white; 
  width: 100%; 
  max-width: 850px; 
  height: 88vh; 
  border-radius: 30px 30px 0 0; 
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2); 
  overflow-y: auto; 
  position: relative;
  transform: translateY(100%); 
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

#detail-view.active #detail-content { 
  transform: translateY(0); 
}

.detail-hero-img { 
  width: 100%; 
  height: 350px; 
  object-fit: cover; 
}

.detail-body { 
  padding: 30px; 
}

/* =========================================
    7-1. 詳情內容排版 (Detail Layout)
    ========================================= */
.detail-grid-responsive { 
  display: grid; 
  grid-template-columns: 1.5fr 1fr; 
  gap: 30px; 
  margin-top: 30px; 
  align-items: start;
}

.info-card-box { 
  background: #f9f9f9; 
  padding: 20px; 
  border-radius: 20px; 
  border: 1px solid #eee;
}

.detail-info-item { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  margin-bottom: 12px; 
  font-size: 14px; 
}

/* =========================================
    7-2. 社群圖示 (Social Icons)
    ========================================= */
.social-icons { 
  display: flex; 
  gap: 12px; 
  margin-top: 15px; 
}

.icon-circle { 
  width: 38px; 
  height: 38px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: 0.3s; 
  text-decoration: none; 
}

.icon-circle svg { 
  width: 20px; 
  height: 20px; 
  stroke: white; 
}

.icon-line { 
  background: #06C755; 
}

.icon-ig { 
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%,#d6249f 60%,#285AEB 90%); 
}

/* =========================================
    7-3. 菜單/ 價目表 (Menu Section)
    ========================================= */
.menu-section { 
  margin-top: 30px; 
  border-top: 1px solid #eee; 
  padding-top: 25px; 
}

.menu-item-row { 
  display: flex; 
  align-items: center; 
  gap: 15px; 
  padding: 12px 0; 
  border-bottom: 1px solid #f5f5f5; 
}

.menu-item-thumb { 
  width: 50px; 
  height: 50px; 
  border-radius: 8px; 
  overflow: hidden; 
  background: #eee; 
  flex-shrink: 0; 
}

.menu-item-thumb img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

/* =========================================
    8. 響應式設計 (Mobile RWD)
    ========================================= */

/* 大平板 (1200px 以下) */
@media (max-width: 1200px) { 
  .attractions-grid { 
     grid-template-columns: repeat(4, 1fr); 
  } 
}

/* 平板 (992px 以下) */
@media (max-width: 992px) { 
  .attractions-grid { 
     grid-template-columns: repeat(3, 1fr); 
  } 
}

/* 手機 (768px 以下) */
@media (max-width: 768px) {
  .attractions-grid { 
     grid-template-columns: repeat(2, 1fr); 
     gap: 10px; 
  }
  
  .card-image-box { 
     height: 130px; 
  }
  
  .island-hero h1 { 
     font-size: 1.8rem; 
  }
  
  .detail-grid-responsive { 
     display: flex; 
     flex-direction: column;
     gap: 20px; 
  }
  
  #detail-content { 
     height: 92vh; 
  }
  
  .detail-hero-img { 
     height: 220px; 
  }
  
  .detail-body { 
     padding: 20px; 
  }
}