html, :root {
  --primary: #1c7ed6;
  --danger: #e03131;
  --bg: #f8f9fa;
  --card: #ffffff;
  --text: #343a40;
}

body {
  font-family: "Segoe UI", sans-serif;
  background-image: url('./圖片/IMG_1215.JPG');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 2rem 0.1rem 2rem 0rem;
  position: relative;
  z-index: 0;
}

h1 {
  color: var(--primary);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

h2 {
  color: var(--primary);
  font-size: 1.5rem;
  margin: 1.5rem 0 1rem 0;
}

.sub {
  color: var(--danger);
  margin-bottom: 1.2rem;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1;
}

.card, .weather-card-left {
  background: var(--card);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  max-width: 500px;
  margin-bottom: 2rem;
  color: var(--text);
}
.weather-card-left {
  background: rgba(255, 255, 255, 0.75); /* 白底、但帶點透明 */
  backdrop-filter: blur(3px);           /* 加一點模糊讓背景更柔和 */
  -webkit-backdrop-filter: blur(3px);   /* Safari 支援 */
  border: 1px solid #dee2e6;
}

.card {
  margin: 0 auto rem;
}


.weather-card-left {
  margin-left: 1.5rem;
  margin-right: auto;
}

.weather-title {
  background-color: #e7f5ff;
  padding: 0.6rem 1rem;
  border-left: 5px solid #1c7ed6;
  border-radius: 6px;
  color: #1c7ed6;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.card-group {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.table-container,
.forecast-table-container {
  overflow-x: auto;
  max-width: 100%;
}

/** 表格內字體加大 & padding 微調 */
#forecastTable th,
#forecastTable td {
  font-size: 1.0rem;  /* 原本1.0rem，數字比較清晰 */
  padding: 2px 1px;   /* 原本4px 8px，更有呼吸感 */
  text-align: center;
}

#stopConditionCard {
  width: 780px;
  max-width: 100%;
  font-size: 1.1rem; /* 字體稍微大一點 */
}


.forecast-table-container table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 0.8rem;
}
.card-group {
  display: flex;
  justify-content: center;
  gap: 2rem; /* 控制卡片之間的間距 */
  flex-wrap: wrap;
  margin: 2rem auto;
  padding: 0 2vw; /* 加這個讓左右有空間 */
  box-sizing: border-box;
}


.card-group > .weather-card-left {
  flex: 1 1 100%;
  max-width: 100%;
}


table th,
table td {
  border: 1px solid #dee2e6;
  padding: 2px 2px;
  text-align: center;
  vertical-align: middle;
  font-size: 0.72rem;
  line-height: 1.05;
}

th {
  background-color: #e3f2fd;
  color: #1971c2;
  white-space: nowrap;
}

.no-data {
  text-align: center;
  padding: 1rem;
  color: #495057;
}

.footer {
  text-align: center;
  margin-top: 1rem;
  color: #868e96;
  font-size: 0.85rem;
}

.status-indicator {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  margin-top: 1rem;
}

.status-danger, .forecast-danger {
  background-color: #ffe3e3;
  color: #d00000;
  border: 2px solid #d00000;
}

.status-warning, .forecast-warning {
  background-color: #fff3bf;
  color: #e67700;
  border: 2px solid #e67700;
}

.status-safe, .forecast-safe {
  background-color: #d3f9d8;
  color: #2b8a3e;
  border: 1px solid #2b8a3e;
}

.section-divider {
  border-top: 2px solid #dee2e6;
  margin: 1rem 0 0.5rem 0;
  padding-top: 0.5rem;
}

.alert-message {
  color: #e67700;
  font-weight: bold;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  display: none;
}

@media (max-width: 76px) {
  body {
    padding: 1rem;
  }

  .card {
    padding: 1rem;
    margin: 0 auto 1rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  th, td {
    padding: 6px 4px;
    font-size: 0.8rem;
  }

  .card-group {
    flex-direction: column;
  }
}

.fixed-top-left-image {
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 8px;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
  display: block;
  margin-top: 0.5rem; /* ✅ 加一點點距離就很自然 */
  margin: 0 auto 1rem;
  box-shadow:
    0 0 8px 2px rgba(28, 126, 214, 0.7),
    0 0 15px 5px rgba(28, 126, 214, 0.4);
}

.fixed-top-left-image:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 12px 3px rgba(28, 126, 214, 0.9),
    0 0 20px 8px rgba(28, 126, 214, 0.6);
}

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

.animated-row {
  animation: fadeInUp 0.35s ease-out;
}
.weather-card-modern {
  background: #ffffffb7;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  max-width: 800px;
  width: 100%;
  font-size: 0.9rem;
  color: #212529;
  margin-top: 1rem; /* 或 1rem 看你喜歡 */
  margin-bottom: 2rem;
}

    .weather-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid #1189df;
      padding-bottom: 0.5rem;
      margin-bottom: 1rem;
    }

    .weather-header h2 {
      font-size: 2rem; /* 原本是 1.2rem */
      color: #1c7ed6;
      margin: 0;
    }

    .weather-updated {
      font-size: 0.8rem;
      color: #868e96;
    }
    .weather-updated a {
      color: inherit;       /* 跟父元素一樣的顏色 */
      text-decoration: none; /* 移除底線 */
    }

    .weather-updated a:hover {
      text-decoration: underline; /* 滑過時再加底線（可選） */
    }
    .weather-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }

    .weather-temp {
      display: flex;
      align-items: center;
    }

    .temp-now {
      font-size: 2.5rem;
      font-weight: bold;
      color: #1c7ed6;
      margin-right: 1rem;
    }

    .temp-feel {
      font-size: 0.85rem;
      color: #495057;
    }

    .temp-feel span {
      display: block;
      font-size: 1.1rem;
      font-weight: 600;
    }

    .weather-condition {
      font-size: 1rem;
      color: #495057;
      font-weight: 500;
    }

    .weather-details {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-bottom: 1rem;
      font-size: 1rem;
      color: #495057;
    }

    .detail-item span {
      display: block;
      font-weight: 600;
      margin-top: 4px;
    }

    .weather-forecast {
      background: #f1f3f5;
      border-left: 4px solid #228be6;
      padding: 0.8rem;
      border-radius: 6px;
      font-size: 0.85rem;
      color: #343a40;
    }
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  text-align: center;
}



.status-green { background-color: #d3f9d8; color: #2b8a3e; }
.status-orange { background-color: #fff3bf; color: #e67700; }
.status-red { background-color: #ffe3e3; color: #d00000; }
.status-white { background-color: #f1f3f5; color: #495057; }
.play-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  max-width: 720px;
  margin: 2rem auto;
}

.play-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #1c7ed6;
  margin-bottom: 0.25rem;
  text-align: center;
}

.tag-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.8rem 0 1.2rem;
}

.tag {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
  background-color: #e9ecef;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
  line-height: 1.4;
}

.tag-green {
  background-color: #d3f9d8;
  color: #2b8a3e;
}
.tag-orange {
  background-color: #ffe8cc;
  color: #f08c00;
}
.tag-red {
  background-color: #ffe3e3;
  color: #d6336c;
}
.tag-white {
  background-color: #f1f3f5;
  color: #495057;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.2rem;
  margin: 1rem 0 1.5rem;
}

.tag {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background-color: #e9ecef;
  color: #495057;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* 各狀態配色 */
.tag-green {
  background-color: #d3f9d8;
  color: #2f9e44;
}

.tag-orange {
  background-color: #fff3bf;
  color: #f08c00;
}

.tag-red {
  background-color: #ffe3e3;
  color: #d6336c;
}

.tag-white {
  background-color: #f1f3f5;
  color: #495057;
}


.tag-green { background-color: #d3f9d8; color: #2b8a3e; }
.tag-orange { background-color: #ffe8cc; color: #f08c00; }
.tag-red { background-color: #ffe3e3; color: #d6336c; }
.tag-white { background-color: #dee2e6; color: #495057; }

#playInfo {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 👈 固定為六欄 */
  gap: 0.8rem;
  justify-content: center;
  padding: 0.5rem 0;
}

.activity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;

  width: 100%;
  min-height: 106px;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .weather-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

.activity-item:hover {
  transform: translateY(-3px);
}

.activity-icon {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.activity-name {
  display: inline-block;
  padding: 0.3rem 0.8rem; 
  border-radius: 50px; 
  font-weight: 600;
  white-space: nowrap;
}

.info-box {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #495057;
  text-align: center;
  line-height: 1.6;
}
.day-theme {
  background: linear-gradient(to bottom, #a0d8f1, #ffffff);
  color: #212529;
}

.night-theme {
  background: linear-gradient(to bottom, #0b1d36, #1a1a2e);
  color: #f1f3f5;
}
#playInfo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* ✅ RWD-friendly */
  gap: 0.8rem;
  padding: 0.5rem 0;
  justify-items: center;
}

.night-theme .play-card,
.night-theme .weather-card-modern {
  background-color: #243b55;
  color: #f1f3f5;
}

@media (max-width: 600px) {
  .forecast-table-container {
    overflow-x: hidden; /* ✅ 不要橫向滾動 */
  }

  #forecastTable {
    table-layout: auto; /* ✅ 自動寬度 */
    font-size: 0.7rem;  /* ✅ 壓縮字體 */
    word-break: break-word;
  }

  #forecastTable th, #forecastTable td {
    padding: 2px 4px;
    font-size: 0.7rem;
    white-space: normal; /* ✅ 自動換行 */
  }

  #forecastTable th {
    font-weight: bold;
    font-size: 0.75rem;
  }

  #stopConditionCard {
    padding: 0.5rem;
  }
}

.suggestion-card {
  background: #ffffffdd;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 2rem auto;
  text-align: center;
}

.suggestion-card textarea {
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 8px;
  resize: vertical;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

.suggestion-card button {
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.suggestion-card button:hover {
  background-color: #1864ab;
}

.suggestion-status {
  margin-top: 0.8rem;
  font-size: 0.9rem;
}

/** 小琉球監視器按鈕美化 **/
.button-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.button-group button {
  background-color: #f1f3f5;
  color: #1c7ed6;
  font-weight: 600;
  border: 2px solid #1c7ed6;
  border-radius: 999px;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.button-group button:hover {
  background-color: #1c7ed6;
  color: white;
}

.button-group button:active {
  transform: scale(0.97);
  background-color: #1971c2;
}
.video-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.video-container iframe {
  flex: 1 1 48%;
  min-width: 300px;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(10, 109, 202, 0.7);
  padding: 0.2rem 2rem;
  padding-bottom: 0.8rem;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}


nav .nav-left img {
      height: 50px;
    }
    nav .nav-right a {
      color: white;
      text-decoration: none;
      margin-left: 1.5rem;
      font-weight: bold;
      font-size: 1rem;
      transition: color 0.3s;
    }
    nav .nav-right a:hover {
      color: #63e6be;
    }
    .overlay {
      background: rgba(0, 0, 0, 0.5);
      padding: 2rem;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
/* =========================================
   6. 攝影機與互動區 (已加入進退場動畫)
========================================= */

.video-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  
  /* ✨ 動畫關鍵設定：透明度與位移過渡 */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 當 JS 加上 .switching class 時的狀態 (隱藏並下沉) */
.video-container.switching {
  opacity: 0;
  transform: translateY(10px);
}

.video-container iframe {
  flex: 1 1 48%;
  min-width: 300px;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  
  /* 確保 iframe 陰影也有平滑效果 */
  transition: box-shadow 0.3s ease;
}

/* =========================================
   導覽列 (Navbar) - 玻璃擬態質感 & 動畫
========================================= */

/* 1. 導覽列容器 (主體) */
.main-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  
  /* 🌊 玻璃擬態質感 (Glassmorphism) */
  background-color: rgba(28, 126, 214, 0.75); /* 使用 primary color + 透明度 */
  backdrop-filter: blur(10px) saturate(1.8); /* 增加強烈模糊與色彩飽和度 */
  -webkit-backdrop-filter: blur(10px) saturate(1.8); 
  
  padding: 0.5rem 0; /* 調整垂直內距，讓整體更瘦長優雅 */
  z-index: 9999;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); /* 提升陰影層次感 */
  transition: all 0.3s ease; /* 增加過渡動畫 */
}

/* 2. 內部內容容器 */
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  padding: 0 3rem; /* 左右間距稍微大一點 */
  margin: 0 auto;
}

/* RWD 調整：小螢幕時縮小 padding */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 1.5rem;
  }
}

/* 3. 左側 Logo 區 */
.nav-left {
  margin-right: auto;
  transition: transform 0.3s ease;
}

.nav-left .logo {
  height: 40px; /* 稍微縮小 Logo，讓導覽列看起來更精緻 */
  display: block;
}

/* Logo 滑鼠懸停動畫 */
.nav-left:hover {
  transform: scale(1.05) rotate(-1deg);
}

/* 4. 右側導覽連結 */
.nav-right {
  display: flex;
  align-items: center;
}

.nav-right a {
  color: white;
  text-decoration: none;
  margin-left: 2rem; /* 增加連結間距 */
  font-weight: 600; /* 使用 600 粗細更細緻 */
  font-size: 1.05rem;
  position: relative;
  transition: all 0.3s ease;
}

/* 連結滑鼠懸停效果 (底部滑動光線) */
.nav-right a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 3px;
  bottom: -6px;
  left: 0;
  background-color: #63e6be; /* 螢光綠色，作為 hover 亮點 */
  transition: width 0.3s ease-out;
}

.nav-right a:hover {
  color: #63e6be; /* 螢光綠色字體 */
  transform: translateY(-2px);
}

.nav-right a:hover::after {
  width: 100%;
}

/* 避免導覽列遮住畫面內容 (保持原本的 body padding-top) */
body {
  padding-top: 65px;
}

/* 平板置中：768–1200px */
@media (min-width: 768px) and (max-width: 1200px) {
  /* 把所有主要卡片、影片容器統一寬度與置中 */
  .weather-card-modern,
  #stopConditionCard,
  .video-container {
    width: 93vw;        /* 佔螢幕 92% */
    max-width: 820px;   /* 不要超過這個寬度 */
    margin: 1rem auto !important;
    box-sizing: border-box;
  }

  /* 清掉舊的卡片偏移 */
  .card {
    margin: 0 auto 2rem !important;
    max-width: none !important;
  }
  .weather-card-left {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 父容器也統一置中 */
  .card-group {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 3vw;
    justify-content: center;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

/** 訪問人數顯示區塊 - 藥丸樣式 */
#visitor-count {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  margin: 2rem auto 2.5rem auto;
  text-align: center;
  animation: fadeIn 1s ease-out;
}

#visitor-count:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.05);
  transition: all 0.3s ease;
}


/* 靜態圖例列 */
.legend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.8rem 0 1.2rem;
}

/* 靜態圖例基本樣式 */
.legend-chip {
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-weight: bold;
  display: inline-block;
  min-width: 90px;
  text-align: center;
}

/* 顏色與動態樣式一致（加 !important 避免被覆蓋） */
.legend-safe  { background-color: #d3f9d8 !important; color: #2b8a3e !important; }
.legend-alert { background-color: #fff3bf !important; color: #e67700 !important; }
.legend-danger{ background-color: #ffe3e3 !important; color: #d00000 !important; }
.legend-none  { background-color: #f1f3f5 !important; color: #495057 !important; }

/* 表格樣式：延續 forecast-table 語彙 */
.tide-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}
.tide-table th, .tide-table td{
  border: 1px solid #dee2e6;
  text-align: center;
  vertical-align: middle;
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 6px 6px;
  color: var(--text);
}
.tide-table thead th{
  background: #e7f5ff;
  color: #1971c2;
  font-weight: 800;
  position: sticky; top: 0; z-index: 1;
}

/* 日期欄底色 + 潮差 badge */
.tide-table td[headers="date"]{
  background: #f7fbff;
  font-weight: 700;
}
.tide-chip{
  display:inline-block; margin-left:.4rem; padding:.15rem .55rem;
  border-radius:999px; font-size:.72rem; font-weight:800;
  background:#e9f4ff; color:#1c7ed6;
}

/* 數值欄靠右 */
.tide-table td:nth-last-child(-n+3){
  text-align:right;
  font-variant-numeric: tabular-nums;
}

/* ===== Sun card 2.0 玻璃質感（無需改 HTML）===== */
.sun-card{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.1rem;
  margin:.8rem 0 1.4rem;
}

.sun-kv{
  position:relative;
  border-radius:18px;
  padding:16px 18px 14px 18px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(25, 113, 194, .18);
  box-shadow:
    0 8px 22px rgba(31,81,120,.10),
    inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter:saturate(1.2) blur(6px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sun-kv:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 28px rgba(31,81,120,.14),
    inset 0 1px 0 rgba(255,255,255,.65);
  border-color:rgba(25,113,194,.28);
}

/* 左側色條（淡藍） */
.sun-kv::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:6px; border-radius:18px 0 0 18px;
  background:linear-gradient(180deg,#4dabf7 0%, #228be6 100%);
  opacity:.75;
}

/* 標籤、主數值、副標 */
.sun-label{
  color:#5b6b7b;
  font-size:.86rem;
  letter-spacing:.3px;
  display:flex; align-items:center; gap:.4rem;
}
.sun-label::before{
  /* emoji 不想放也可刪掉這行 */
  content:"☀️";
  font-size:1rem; line-height:1;
  filter:grayscale(15%);
}
.sun-kv:nth-child(2) .sun-label::before{ content:"🌇"; }

.sun-value{
  font-size:2.2rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.5px;
  margin:.35rem 0 .25rem;
  color:#1c7ed6;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

.sun-hint{
  font-size:.84rem;
  color:#748194;
}

/* 夜間主題配色（沿用你站上的 .night-theme） */
.night-theme .sun-kv{
  background:rgba(25,38,55,.78);
  border-color:rgba(99,230,190,.18);
  box-shadow:
    0 8px 22px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.night-theme .sun-kv::before{
  background:linear-gradient(180deg,#63e6be 0%, #12b886 100%);
  opacity:.85;
}
.night-theme .sun-label{ color:#c8d4e3; }
.night-theme .sun-value{
  color:#63e6be;
  text-shadow:none;
}
.night-theme .sun-hint{ color:#a8b5c6; }

/* RWD：手機一欄 */
@media (max-width: 640px){
  .sun-card{ grid-template-columns:1fr; gap:.9rem; }
  .sun-value{ font-size:2rem; }
}

/* =========================================
   日間/深夜模式開關 (Theme Switch)
   ========================================= */

.theme-switch-wrapper {
  margin-left: 2.5rem; /* 與最後一個連結保持間距 */
  display: flex;
  align-items: center;
  /* 確保開關不會因為導覽列的垂直置中而跑掉 */
  align-self: center; 
}

/* 隱藏原生 checkbox */
.theme-switch-wrapper input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}

/* 整個開關的底座 */
.theme-toggle-label {
  cursor: pointer;
  width: 55px; /* 寬度 */
  height: 28px; /* 高度 */
  background: rgba(255, 255, 255, 0.6); /* 淺色半透明底 */
  display: block;
  border-radius: 999px;
  position: relative;
  transition: background 0.3s;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 滑動鈕 (圓形) */
.theme-toggle-label .slider {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: white; /* 預設白色 (太陽) */
  border-radius: 50%;
  transition: transform 0.3s, background 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  /* 太陽圖標：使用 emoji */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* 日間模式：太陽圖標 */
.theme-toggle-label .slider::before {
    content: "☀️";
}

/* 當 checkbox 被勾選 (深夜模式開啟) 時 */
.theme-switch-wrapper input:checked + .slider {
  /* 將圓點移到右側，並補償內距 */
  transform: translateX(27px);
  background: #34495e; /* 深色滑動鈕 (月亮) */
}

/* 當 checkbox 被勾選 (深夜模式開啟) 時的底座顏色 */
.theme-toggle-label:has(input:checked) {
  background: #4a637d; /* 深色底座 */
}

/* 深夜模式：月亮圖標 */
.theme-switch-wrapper input:checked + .slider::before {
    content: "🌙";
}


/* =========================================================
   🌙 A. NIGHT THEME — 核心主題色、背景
   ========================================================= */
.night-theme {
  --bg: #0f141a;
  --card: rgba(22, 29, 37, 0.85);
  --text: #0c55b4;
  --primary: #4da3ff;
  --danger: #ff6b6b;
  background: linear-gradient(#000e1f, #0f141a);
  color: var(--text);
  filter: brightness(0.94) saturate(1.1);
}

.night-theme body {
  background-color: #0f141a !important;
  background-image: url('./圖片/IMG_1215.JPG');
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) contrast(1.15) saturate(1.2);
}

/* 卡片玻璃霧面效果 */
.night-theme .weather-card-modern,
.night-theme .card,
.night-theme .play-card,
.night-theme .suggestion-card {
  background: rgba(25, 32, 41, 0.75);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  color: var(--text);
}

/* 標題 */
.night-theme h1,
.night-theme h2 {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(77,163,255,0.3);
}

/* 小型標籤 */
.night-theme .weather-updated {
  color: #b4c2d3 !important;
}

/* =========================================================
   🌙 B. TABLE 通用（海象、潮汐表格）
   ========================================================= */
.night-theme table th {
  background: rgba(34,43,54,0.9);
  color: #88c4ff !important;
  border-color: rgba(255,255,255,0.08);
  text-shadow: 0 0 6px rgba(80,150,255,0.25);
}

.night-theme table td {
  background: rgba(19,25,33,0.55) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.06);
}

/* 預報顏色（安全 / 警戒 / 停航） */
.night-theme .forecast-danger {
  background: rgba(255, 90, 90, 0.15) !important;
  color: #ff6b6b !important;
}

.night-theme .forecast-warning {
  background: rgba(255, 199, 94, 0.18) !important;
  color: #ffb84d !important;
}

.night-theme .forecast-safe {
  background: rgba(55,178,120,0.15) !important;
  color: #63e6be !important;
}

/* =========================================================
   🌙 C. 天氣區塊（目前天氣）
   ========================================================= */
/* 溫度大字 */
.night-theme .weather-temp .temp-now {
  color: #4da3ff !important;
  text-shadow: 0 0 6px rgba(77,163,255,0.4);
}

/* 體感溫度 */
.night-theme .temp-feel {
  color: #e4e7eb !important;
}
.night-theme .temp-feel span {
  color: #ffffff !important;
}

/* 天氣現象（多雲、晴等） */
.night-theme .weather-condition {
  color: #d7e4f7 !important;
  font-weight: 600;
}

/* 天氣細項（濕度、風速、紫外線…） */
.night-theme .weather-details {
  color: #dce3eb !important;
}
.night-theme .weather-details .detail-item span {
  color: #ffffff !important;
}

/* 天氣預報條 */
.night-theme .weather-forecast {
  background: rgba(255,255,255,0.06) !important;
  color: #e6edf5 !important;
  border-left: 4px solid #4da3ff !important;
}

/* =========================================================
   🌙 D. 今日潮汐專用
   ========================================================= */
.night-theme .tide-table {
  background: rgba(20,27,36,0.6) !important;
  border-radius: 14px;
  backdrop-filter: blur(10px);
}

/* 日期欄位 */
.night-theme .tide-table td[headers="date"] {
  background: rgba(28,40,55,0.75) !important;
  color: #ffffff !important;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(90,180,255,0.25);
}

/* 潮差 Badge */
.night-theme .tide-chip {
  background: rgba(70,130,255,0.25) !important;
  color: #9dd3ff !important;
  border: 1px solid rgba(120,180,255,0.3);
  backdrop-filter: blur(4px);
}

/* 無資料 */
.night-theme .no-data {
  color: #d1d8e0 !important;
}

/* =========================================================
   🌙 E. 水上活動警示
   ========================================================= */
/* 最底部「資料時間：...」 */
.night-theme .info-box {
  color: #ffffff !important;
}

/* =========================================================
   🌙 F. NAVBAR
   ========================================================= */
.night-theme .main-navbar {
  background-color: rgba(12,60,110,0.7);
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.night-theme .nav-right a {
  color: #cfe4ff;
}
.night-theme .nav-right a:hover {
  color: #63e6be;
}

/* =========================================================
   🌙 G. 日夜模式切換動畫（酷炫）
   ========================================================= */
.theme-transition {
  transition:
    background 0.8s ease-in-out,
    color 0.8s ease-in-out,
    filter 0.8s ease-in-out,
    background-color 0.8s ease-in-out;
}

/* 背景光暈動畫 */
.theme-transition body {
  transition:
    background-color 0.8s ease-in-out,
    background-image 0.8s ease-in-out,
    filter 1s ease-in-out;
}

/* 卡片霧化 -> 清晰 */
.theme-transition .weather-card-modern,
.theme-transition .card,
.theme-transition .play-card,
.theme-transition .suggestion-card,
.theme-transition .sun-kv {
  transition:
    background 0.8s ease-in-out,
    color 0.8s ease-in-out,
    box-shadow 0.8s ease-in-out,
    border-color 0.8s ease-in-out,
    backdrop-filter 0.8s ease-in-out;
}

/* 切換瞬間的小爆光 */
.theme-switch-burst {
  animation: themePop 0.6s ease-out;
}

@keyframes themePop {
  0% { transform: scale(0.7); opacity: 0.2; filter: brightness(1.8); }
  60% { transform: scale(1.18); opacity: 1; filter: brightness(1); }
  100% { transform: scale(1); opacity: 1; }
}

/* 標題 */

.weather-card-modern .weather-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  margin-bottom: 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(28, 126, 214, 0.25);
}

.weather-card-modern .weather-header h2 {
  margin: 0;
  color: #1683df;
  font-size: clamp(1.55rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.weather-card-modern .weather-updated {
  color: #8a96a3;
  font-size: 0.76rem;
  line-height: 1.55;
}

/* 溫度主區域 */

.weather-card-modern .weather-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.weather-card-modern .weather-temp {
  display: flex;
  align-items: center;
}

.weather-card-modern .temp-now {
  margin-right: 1rem;
  color: #1683df;
  font-size: clamp(2.65rem, 9vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
}

.weather-card-modern .temp-feel {
  padding-left: 0.9rem;
  color: #7b8794;
  font-size: 0.78rem;
  line-height: 1.4;
  border-left: 1px solid #dce6ee;
}

.weather-card-modern .temp-feel span {
  margin-top: 2px;
  color: #3f4b57;
  font-size: 1rem;
  font-weight: 700;
}

.weather-card-modern .weather-condition {
  max-width: 210px;
  color: #3f4b57;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.45;
  text-align: right;
}

/* 六項天氣資料 */

.weather-card-modern .weather-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
  color: #56616d;
}

.weather-card-modern .detail-item {
  min-width: 0;
  min-height: 66px;
  padding: 0.65rem 0.7rem;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(28, 126, 214, 0.08);
  border-radius: 11px;
  line-height: 1.45;
}

.weather-card-modern .detail-item span {
  display: block;
  margin-top: 0.25rem;
  color: #3f4b57;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

/* 天氣預報 */

.weather-card-modern .weather-forecast {
  margin-top: 0.4rem;
  padding: 0.85rem 0.9rem;

  color: #46515d;
  background: rgba(240, 248, 255, 0.85);
  border: 0;
  border-left: 4px solid #228be6;
  border-radius: 10px;

  font-size: 0.82rem;
  line-height: 1.55;
}

.weather-card-modern .weather-forecast strong {
  color: #1971c2;
}

/* 手機版細節 */

@media (max-width: 600px) {
  .weather-card-modern {
    width: calc(100% - 16px);
    margin: 1rem auto;
    padding: 1.25rem;
    border-radius: 18px;
  }

  .weather-card-modern .weather-header {
    display: block;
  }

  .weather-card-modern .weather-header h2 {
    white-space: nowrap;
  }

  .weather-card-modern .weather-updated {
    margin-top: 0.45rem;
  }

  .weather-card-modern .weather-main {
    align-items: center;
  }

  .weather-card-modern .temp-now {
    margin-right: 0.7rem;
  }

  .weather-card-modern .temp-feel {
    padding-left: 0.7rem;
  }

  .weather-card-modern .weather-condition {
    max-width: 125px;
    font-size: 0.85rem;
  }

  .weather-card-modern .weather-details {
    gap: 0.45rem;
  }

  .weather-card-modern .detail-item {
    min-height: 64px;
    padding: 0.55rem 0.45rem;
    font-size: 0.82rem;
  }

  .weather-card-modern .detail-item span {
    font-size: 0.85rem;
  }
}

/* 電腦版：右側卡片只向下對齊，不改變寬度 */
@media (min-width: 768px) {
  #stopConditionCard {
    position: relative;
    top: 1rem;
  }
}

/* ===== 即時影像 UI 改版 ===== */

.camera-section {
  margin-top: 1.5rem;
}

.camera-section .camera-header {
  margin-bottom: 0;
}

.camera-section .camera-header h2 {
  margin-bottom: 0.2rem;
}

.camera-subtitle {
  margin: 0;
  color: #7b8794;
  font-size: 0.78rem;
  line-height: 1.5;
}

.camera-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 0;
}

.camera-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
}

.camera-tabs button {
  min-width: 110px;
  padding: 0.55rem 1.15rem;
  color: #1683df;
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid #1683df;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 9px rgba(31, 81, 120, 0.1);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.camera-tabs button:hover,
.camera-tabs button:focus-visible {
  color: #fff;
  background: #1683df;
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(22, 131, 223, 0.24);
}

.camera-tabs button:active {
  transform: translateY(0);
}

.camera-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0;
  padding: 0.25rem 0.8rem;
  color: #66727e;
  background: rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
}

.camera-status.is-ready {
  color: #237a3b;
  background: rgba(211, 249, 216, 0.78);
}

.camera-status.is-error {
  color: #c92a2a;
  background: rgba(255, 227, 227, 0.82);
}

.camera-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  margin: 0 0 1.5rem;
}

.camera-grid iframe {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  aspect-ratio: 16 / 9;
  background: #202020;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 7px 18px rgba(31, 49, 65, 0.16);
}

/* 影像切換動畫 */
.camera-grid.switching {
  opacity: 0;
  transform: translateY(8px);
}

.camera-grid {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* 手機版 */
@media (max-width: 600px) {
  .camera-section .camera-header {
    display: block;
  }

  .camera-section .weather-updated {
    margin-top: 0.45rem;
  }

  .camera-toolbar {
    padding: 0.8rem 0;
  }

  .camera-tabs {
    gap: 0.5rem;
  }

  .camera-tabs button {
    min-width: 88px;
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
  }

  .camera-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .camera-grid iframe {
    border-radius: 12px;
  }
}

/* 即時影像狀態與更新時間 */

.camera-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;

  min-width: 250px;
  padding: 0.5rem 1rem;
  box-sizing: border-box;

  background: rgba(211, 249, 216, 0.78);
  border: 1px solid rgba(43, 138, 62, 0.08);
  border-radius: 12px;
  text-align: center;
}

.camera-meta .camera-status {
  min-height: auto;
  margin: 0;
  padding: 0;

  color: #2b8a3e;
  background: transparent;
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.camera-update-time {
  color: #66727e;
  font-size: 0.72rem;
  line-height: 1.4;
}

/* 載入失敗時改成淡紅色 */

.camera-meta:has(.camera-status.is-error) {
  background: rgba(255, 227, 227, 0.82);
}

.camera-meta .camera-status.is-error {
  color: #c92a2a;
  background: transparent;
}

/* 手機版 */

@media (max-width: 600px) {
  .camera-meta {
    width: 100%;
    min-width: 0;
  }
}

/* ===== 下一次潮汐摘要 ===== */

.next-tide-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 0.8rem 0 1.2rem;
}

.next-tide-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82px;
  padding: 0.8rem 1rem;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(28, 126, 214, 0.1);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(31, 81, 120, 0.07);
}

.next-tide-label {
  margin-bottom: 0.3rem;
  color: #7b8794;
  font-size: 0.76rem;
}

.next-tide-item strong {
  color: #1683df;
  font-size: 1.25rem;
  line-height: 1.3;
}

.next-tide-countdown {
  background: linear-gradient(
    135deg,
    rgba(231, 245, 255, 0.9),
    rgba(240, 248, 255, 0.75)
  );
  border-color: rgba(28, 126, 214, 0.18);
}

/* 夜間模式 */

.night-theme .next-tide-item {
  background: rgba(25, 38, 55, 0.78);
  border-color: rgba(99, 230, 190, 0.14);
}

.night-theme .next-tide-label {
  color: #c8d4e3;
}

.night-theme .next-tide-item strong {
  color: #63e6be;
}

/* 手機版 */

/* ===== 手機版潮汐摘要區隔 ===== */

@media (max-width: 600px) {
  .next-tide-summary {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;

    margin: 0.9rem 0 1.4rem;
    padding-bottom: 1.4rem;

    /* 與下方潮汐表格區隔 */
    border-bottom: 2px dashed rgba(28, 126, 214, 0.2);
  }

  .next-tide-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    min-height: 62px;
    padding: 0.7rem 0.9rem;
    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(28, 126, 214, 0.1);
    border-left-width: 5px;
    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(31, 81, 120, 0.08);
  }

  /* 下一次滿潮：藍色 */
  .next-tide-item:nth-child(1) {
    border-left-color: #228be6;
  }

  /* 倒數時間：橘色 */
  .next-tide-item:nth-child(2) {
    border-left-color: #f59f00;
    background: rgba(255, 249, 219, 0.82);
  }

  /* 下一次乾潮：青綠色 */
  .next-tide-item:nth-child(3) {
    border-left-color: #12b886;
  }

  .next-tide-label {
    flex: 1;
    margin: 0;
    color: #687582;
    font-size: 0.78rem;
    font-weight: 600;
  }

  .next-tide-item strong {
    flex-shrink: 0;
    color: #1683df;
    font-size: 1rem;
    line-height: 1.3;
    text-align: right;
  }

  .next-tide-item:nth-child(2) strong {
    color: #e67700;
  }

  .next-tide-item:nth-child(3) strong {
    color: #0b8f69;
  }

  /* 潮汐表格和摘要保持距離 */
  .next-tide-summary + .forecast-table-container {
    margin-top: 0;
  }
}

.next-tide-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tide-icon {
  display: inline-flex;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: #228be6;
}

.tide-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 倒數圖示使用橘色 */
.next-tide-item:nth-child(2) .tide-icon {
  color: #e67700;
}

/* 乾潮圖示使用青綠色 */
.next-tide-item:nth-child(3) .tide-icon {
  color: #0b8f69;
}

/* 海象預報表格不要限制 sticky 表頭 */
.sea-forecast-table {
  overflow: visible !important;
}

/* 電腦、手機向下捲動時，固定海象欄位名稱 */
#forecastTable thead th {
  position: sticky;
  top: 56px; /* 上方導覽列約 56px 高 */
  z-index: 100;
}

/* 移除水瓶，只保留浪高數字與流動海浪 */
.weather-card-modern .wave-mini__bar {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 單色海浪 */
.weather-card-modern .wave-mini__bar > i,
.weather-card-modern .wave-mini__bar > i::before {
  background: #45b8e8 !important;
}

/* 移除白色浪層 */
.weather-card-modern .wave-mini__bar > i::after {
  display: none !important;
  content: none !important;
}

/* ==================================================
   今日潮汐｜手機版線條與表格文字修正
   可直接貼到 style.css 最底部
   ================================================== */

@media (max-width: 600px) {
  /*
   * 只移除「今日潮汐」標題下方的線，
   * 不影響目前天氣、日出日落等其他標題。
   */
  .weather-card-modern
    .weather-header:has(+ .next-tide-summary) {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  /* 移除摘要區下方的藍色虛線 */
  .weather-card-modern .next-tide-summary {
    margin-bottom: 1rem !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  /* 移除三張摘要卡左側的藍、橘、綠粗線 */
  .weather-card-modern .next-tide-item,
  .weather-card-modern .next-tide-item:nth-child(1),
  .weather-card-modern .next-tide-item:nth-child(2),
  .weather-card-modern .next-tide-item:nth-child(3) {
    border-left-width: 1px !important;
    border-left-color: rgba(28, 126, 214, 0.1) !important;
  }

  /*
   * style4.css 會在 style.css 後面把容器改成 overflow: visible。
   * 使用更精確的選擇器，確保潮汐表格維持在手機卡片內。
   */
  .weather-card-modern
    .next-tide-summary
    + .forecast-table-container.sea-forecast-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 六個欄位固定在容器範圍內 */
  .weather-card-modern #tideTable {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    table-layout: fixed !important;
  }

  /*
   * 取消全站 th 的 nowrap。
   * 中文標題與儲存格文字可以完整換行，不會被切掉一半。
   */
  .weather-card-modern #tideTable th,
  .weather-card-modern #tideTable td {
    min-width: 0 !important;
    padding: 6px 2px !important;
    overflow: visible !important;
    font-size: clamp(0.63rem, 2.8vw, 0.72rem) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  /* 重新分配六個欄位，總寬度為 100% */
  .weather-card-modern #tideTable th:nth-child(1) {
    width: 29% !important;
  }

  .weather-card-modern #tideTable th:nth-child(2) {
    width: 12% !important;
  }

  .weather-card-modern #tideTable th:nth-child(3) {
    width: 13% !important;
  }

  .weather-card-modern #tideTable th:nth-child(4) {
    width: 15% !important;
  }

  .weather-card-modern #tideTable th:nth-child(5) {
    width: 16% !important;
  }

  .weather-card-modern #tideTable th:nth-child(6) {
    width: 15% !important;
  }

  /* 手機版數值置中，避免貼著格線 */
  .weather-card-modern
    #tideTable td:nth-last-child(-n+3) {
    text-align: center !important;
  }

  /* 日期欄內的潮差標籤改成獨立一行 */
  .weather-card-modern #tideTable .tide-chip {
    display: block !important;
    width: fit-content;
    max-width: 100%;
    margin: 0.25rem auto 0 !important;
    padding: 0.1rem 0.3rem !important;
    font-size: 0.6rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}
/* ==================================================
   海象預報｜風級、浪高重點欄位

   風級：柔和紫色
   浪高：清爽海藍色

   請在 style.css、style4.css 之後載入。
   ================================================== */

/* ---------- 表頭 ---------- */

#forecastTable thead th:nth-child(4) {
  background: #eee9f8 !important;
  border-color: #d9cfee !important;
  color: #62458f !important;
  font-weight: 900 !important;
}

#forecastTable thead th:nth-child(6) {
  background: #e5f3f9 !important;
  border-color: #c5e1ec !important;
  color: #176b8b !important;
  font-weight: 900 !important;
}

/* ==================================================
   每個日期第一列有日期 rowspan：
   風級為第 4 格，浪高為第 6 格。

   同日期後續列沒有日期格：
   風級為第 3 格，浪高為第 5 格。
   ================================================== */

/* ---------- 風級：柔和紫色 ---------- */

#forecastTable tbody
  tr:has(> td[rowspan]) > td:nth-child(4),
#forecastTable tbody
  tr:not(:has(> td[rowspan])) > td:nth-child(3) {
  background: #f5f1fb !important;
  border-color: #ded5ef !important;
  color: #60438e !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
}

/* ---------- 浪高：清爽海藍色 ---------- */

#forecastTable tbody
  tr:has(> td[rowspan]) > td:nth-child(6),
#forecastTable tbody
  tr:not(:has(> td[rowspan])) > td:nth-child(5) {
  background: #edf7fb !important;
  border-color: #cce5ef !important;
  color: #116b8d !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
}

/* 手機維持柔和配色，僅加強文字清晰度。 */

@media (max-width: 600px) {
  #forecastTable thead th:nth-child(4),
  #forecastTable thead th:nth-child(6),
  #forecastTable tbody
    tr:has(> td[rowspan]) > td:nth-child(4),
  #forecastTable tbody
    tr:not(:has(> td[rowspan])) > td:nth-child(3),
  #forecastTable tbody
    tr:has(> td[rowspan]) > td:nth-child(6),
  #forecastTable tbody
    tr:not(:has(> td[rowspan])) > td:nth-child(5) {
    font-weight: 900 !important;
  }
}
/* Logo 靠左、導覽連結靠右 */
.main-navbar > .nav-container {
  width: 100%;
  box-sizing: border-box;
}

.main-navbar .nav-left {
  margin-right: auto;
  flex-shrink: 0;
}

.main-navbar .nav-right {
  margin-left: auto;
  justify-content: flex-end;
}

/* 夜間開關已停用，移除原本預留空間 */
.main-navbar .theme-switch-wrapper {
  display: none;
  margin-left: 0;
}

@media (max-width: 768px) {
  .main-navbar > .nav-container {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}