/* =================================================================
   鑫囍探索旅行 手工頁 — 統一隔離樣式表 (最佳化合併版)
   合併了 #jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom
   使用 :is() + CSS Nesting 消除大量重複規則，提升維護性與載入效能
   原始檔案：154 KB / 5882 行 → 最佳化後：~78 KB / ~930 行
================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ── 全域動畫定義（各頁共用，只需宣告一次）── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ================================================================
   共用設計系統 — 統一套用至所有手工頁容器
   (:is() 的 forgiving parsing 確保不存在的 ID 不會使整條規則失效)
   ================================================================ */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) {
  /* ── 品牌色彩設計 Token ── */
  --jt-purple:       #4C2A85;
  --jt-purple-hover: #3b2067;
  --jt-blue:         #92D2EC;
  --jt-blue-hover:   #7bbfdb;
  --jt-bg:           #F3EFF5;
  --jt-text:         #1A1A1A;
  --jt-text-muted:   #666666;
  --jt-border:       #E0DCE3;
  --jt-white:        #FFFFFF;

  /* ── 基底排版 ── */
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--jt-text);
  background-color: var(--jt-bg);
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 頁面淡入動畫 */
  opacity: 1;
  transition: opacity 0.8s ease-in-out;

  /* ── 子元素通用重置（使用 nesting 替代額外規則）── */
  & *, & *::before, & *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* ── 標題 ── */
  & h1, & h2, & h3, & h4, & h5, & h6 {
    font-family: 'Noto Serif TC', 'Songti TC', serif;
    font-weight: 600;
    line-height: 1.25;
    color: var(--jt-purple);
    text-wrap: balance;
  }

  /* ── 連結 ── */
  & a {
    color: var(--jt-purple);
    text-decoration: none;
    transition: color 0.2s ease;
    &:hover { color: var(--jt-blue); }
  }

  /* ── 圖片 ── */
  & img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* ================================================================
   Bootstrap 4 / 平台框架整合修正
   解決 Bootstrap .row 的 -15px 負 margin 造成的水平溢出問題
   ================================================================ */

/* 修正：作為 Bootstrap .row (flex) 直接子元素時的定位行為 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) {
  /* 在 Bootstrap flex row 中，明確佔滿 100% 而不溢出 */
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
  /* 清除平台可能注入的 col 類別 padding */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 修正：Bootstrap .row 負 margin 本身造成橫向卷軸 */
.row:has(> :is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom)) {
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
}

/* 修正：Bootstrap 4 對 button 的全域 normalize 干擾 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-btn {
  /* 蓋過 Bootstrap 的 btn focus outline */
  box-shadow: none !important;
  text-decoration: none !important;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-btn:focus,
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-btn:active {
  outline: 2px solid rgba(76, 42, 133, 0.4);
  outline-offset: 2px;
  box-shadow: none !important;
}

/* 修正：Bootstrap 4 的 form-control focus 藍色外框干擾 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-field:focus {
  border-color: var(--jt-purple) !important;
  box-shadow: 0 0 0 3px rgba(76, 42, 133, 0.1) !important;
  outline: none !important;
}

/* 修正：Bootstrap 4 對 img 加上 max-width: 100% 在某些情況下造成 hero img 縮小 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero-img {
  max-width: none !important;
  width: 100% !important;
}

/* 修正：Bootstrap 4 的 p margin-bottom: 1rem 在我們的 & * reset 後應為 0，
         但有些平台 CSS specificity 較高，明確覆蓋 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) p {
  margin-top: 0;
  margin-bottom: 0;
}

/* 修正：Bootstrap 4 的 ul/li padding-left 干擾 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tag-list,
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tag-list li {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* ==========================================================================
   排版結構 (Layout Structures)
   ========================================================================== */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-wrap-narrow {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-sec-pad {
  padding-block: 6rem;
}

/* ==========================================================================
   動畫效果 (Micro-Animations)
   ========================================================================== */
/* animation-fill-mode: both = 動畫前停在 from，動畫後停在 to，防止閃白 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-fade-in {
  animation: fadeIn    1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-fade-in-up {
  animation: fadeInUp  1s   cubic-bezier(0.4, 0, 0.2, 1) both;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-delay-1 { animation-delay: 0.2s; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-delay-2 { animation-delay: 0.4s; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-delay-3 { animation-delay: 0.6s; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-delay-4 { animation-delay: 0.8s; }

/* !! Hero 特殊覆蓋 !!
   Hero 是用戶第一眼看到的區塊，絕對不能因動畫造成白頁。
   強制立即顯示，不依賴任何動畫 fill-mode。 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero.jt-fade-in {
  animation: none !important;
  opacity: 1 !important;
}

/* 平台 lazy loader 把 src 改成 data-src 時，hero 圖片短暫不存在。
   確保 hero 背景色 (#4C2A85) 立即可見作為 fallback。 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero-img.lazy,
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero-img[data-src]:not([src]) {
  opacity: 0;
  transition: opacity 0.6s ease;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero-img.lazied,
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero-img[src] {
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* 滾動滑入 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-reveal.active {
  opacity: 1;
  transform: none;
}

/* 無障礙：使用者偏好減少動態 */
@media (prefers-reduced-motion: reduce) {
  :is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-reveal,
  :is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-fade-in,
  :is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-fade-in-up {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   通用公用類別 (Utilities)
   ========================================================================== */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .text-center     { text-align: center; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .text-right      { text-align: right; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .d-flex          { display: flex; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .flex-column     { flex-direction: column; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .justify-center  { justify-content: center; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .align-center    { align-items: center; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .text-uppercase  { text-transform: uppercase; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-track-wide   { letter-spacing: 0.1em; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-track-widest { letter-spacing: 0.35em; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-mb1  { margin-bottom: 0.25rem; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-mb2  { margin-bottom: 0.5rem; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-mb3  { margin-bottom: 0.75rem; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-mb4  { margin-bottom: 1rem; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-mb5  { margin-bottom: 1.5rem; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-mb6  { margin-bottom: 2rem; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-mb8  { margin-bottom: 3rem; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-mb10 { margin-bottom: 4rem; }

/* ==========================================================================
   一、 按鈕組件 (Buttons)
   ========================================================================== */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  text-decoration: none;
  text-align: center;
}
/* 主品牌深紫按鈕 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-btn-primary {
  background-color: var(--jt-purple);
  color: var(--jt-white) !important;
  &:hover {
    background-color: var(--jt-purple-hover);
    box-shadow: 0 4px 12px rgba(76, 42, 133, 0.2);
    transform: translateY(-2px);
  }
}
/* 湖水粉藍輔助按鈕 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-btn-secondary {
  background-color: var(--jt-blue);
  color: var(--jt-purple) !important;
  &:hover {
    background-color: var(--jt-blue-hover);
    box-shadow: 0 4px 12px rgba(146, 210, 236, 0.3);
    transform: translateY(-2px);
  }
}
/* 經典細邊框按鈕 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-btn-outline {
  background-color: transparent;
  border-color: var(--jt-purple);
  color: var(--jt-purple) !important;
  &:hover {
    background-color: var(--jt-purple);
    color: var(--jt-white) !important;
    transform: translateY(-2px);
  }
}
/* 白色細邊框按鈕（深色背景用） */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-btn-outline-white {
  background-color: transparent;
  border-color: var(--jt-white);
  color: var(--jt-white) !important;
  &:hover {
    background-color: var(--jt-white);
    color: var(--jt-purple) !important;
    transform: translateY(-2px);
  }
}
/* 滿版按鈕 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-btn-block { display: flex; width: 100%; }

/* ==========================================================================
   二、 卡片組件 (Cards)
   ========================================================================== */
/* 故事展示大卡片 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-card {
  background-color: var(--jt-white);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(76,42,133,0.07);
  padding: 3rem;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid var(--jt-border);
  position: relative;
  overflow: hidden;
  &:hover {
    box-shadow: 0 4px 16px rgba(76,42,133,0.09);
    transform: translateY(-5px);
    border-color: rgba(76, 42, 133, 0.15);
  }
}
/* 奢華旅遊商品卡片 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-story-card {
  background-color: var(--jt-white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(76,42,133,0.09);
  padding: 4rem 3rem;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem auto;
  transition: all 0.6s cubic-bezier(0.4,0,0.2,1);
  &:hover {
    box-shadow: 0 8px 32px rgba(76,42,133,0.12);
    transform: translateY(-3px);
  }
}
/* 圖文特色卡片 */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-feat-card {
  display: flex;
  flex-direction: column;
  background-color: var(--jt-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(76,42,133,0.07);
  height: 100%;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  &:hover {
    box-shadow: 0 4px 16px rgba(76,42,133,0.09);
    transform: translateY(-4px);
    & .jt-feat-img { transform: scale(1.06); }
  }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-feat-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: #e2e2e2;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-feat-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-feat-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ==========================================================================
   三、 標籤與徽章 (Tags & Badges)
   ========================================================================== */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tag {
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 0.75rem;
  color: var(--jt-text-muted);
  background-color: var(--jt-bg);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.2s ease;
  &:hover {
    color: var(--jt-purple);
    background-color: rgba(76, 42, 133, 0.08);
  }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-badge {
  display: inline-block;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--jt-purple);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--jt-blue);
  padding-bottom: 2px;
}

/* ==========================================================================
   四、 表單元件 (Forms)
   ========================================================================== */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-form-box {
  background-color: var(--jt-white);
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 4px 16px rgba(76,42,133,0.09);
  border: 1px solid var(--jt-border);
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-field-group {
  margin-bottom: 1rem;
  text-align: left;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-field-label {
  display: block;
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--jt-text);
  margin-bottom: 0.5rem;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-field {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 1rem;
  color: var(--jt-text);
  background-color: var(--jt-bg);
  border: 1px solid var(--jt-border);
  border-radius: 4px;
  transition: all 0.2s ease;
  outline: none;
  &:user-valid   { border-color: #2e7d52; }
  &:focus {
    border-color: var(--jt-purple);
    background-color: var(--jt-white);
    box-shadow: 0 0 0 3px rgba(76, 42, 133, 0.1);
  }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) textarea.jt-field {
  min-height: 120px;
  resize: vertical;
}

/* ==========================================================================
   五、 Hero Banner
   ========================================================================== */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero {
  position: relative;
  width: 100%;
  min-height: 88dvh;
  /* 雙重 fallback：CSS 變數不可用時直接用 HEX */
  background-color: #4C2A85;
  background-color: var(--jt-purple, #4C2A85);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  color: var(--jt-white, #FFFFFF);
  /* 強制脫離 Bootstrap row 的 flex 影響 */
  flex-shrink: 0;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(76, 42, 133, 0.7) 0%,
    rgba(76, 42, 133, 0.5) 50%,
    rgba(76, 42, 133, 0.85) 100%
  );
  z-index: 2;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero-content {
  position: relative;
  z-index: 3;
  padding: 0 1.5rem;
  max-width: 680px;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero-title {
  font-family: 'Noto Serif TC', 'Songti TC', serif;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--jt-white);
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hero-sub {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  color: var(--jt-blue);
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* ── 主題首頁專用 ── */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-intro-sec { padding-bottom: 3rem; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-bottom: 6rem;
  @media (max-width: 768px) { grid-template-columns: 1fr; gap: 2rem; }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-prod-grid .jt-feat-card { height: 100%; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-prod-meta {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--jt-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-prod-price {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--jt-purple);
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-consult-section {
  background-color: rgba(76, 42, 133, 0.03);
  border-radius: 16px;
  padding: 4rem 2rem;
  border: 1px solid rgba(76, 42, 133, 0.05);
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-consult-intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem auto;
  & h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
  & p  { color: var(--jt-text-muted); line-height: 1.8; }
}

/* ==========================================================================
   雜誌詳情頁樣式 (Editorial / Magazine Styles)
   ========================================================================== */

/* 1.1 首字放大 (Drop Caps) */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-drop-cap::first-letter {
  font-family: 'Noto Serif TC', 'Songti TC', serif;
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--jt-purple);
  float: left;
  line-height: 0.9;
  margin-right: 0.5rem;
  margin-top: 6px;
}

/* 1.2 雙欄排版 (Editorial Columns) */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-editorial {
  column-count: 2;
  column-gap: 3rem;
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--jt-text-muted);
  text-align: justify;
  text-wrap: pretty;
  @media (max-width: 768px) { column-count: 1; column-gap: 0; }
}

/* 1.3 拉頁金句 (Pull Quotes) */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-pullquote {
  font-family: 'Noto Serif TC', 'Songti TC', serif;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: var(--jt-purple);
  text-align: center;
  max-width: 680px;
  margin: 3rem auto;
  padding: 1.5rem 0;
  border-top: 1px dashed var(--jt-border);
  border-bottom: 1px dashed var(--jt-border);
  letter-spacing: 0.08em;
  line-height: 1.6;
  position: relative;
  &::before {
    content: '\201C';
    font-size: 3rem;
    position: absolute;
    top: -15px;
    left: 20px;
    opacity: 0.15;
  }
  &::after {
    content: '\201D';
    font-size: 3rem;
    position: absolute;
    bottom: -35px;
    right: 20px;
    opacity: 0.15;
  }
}

/* 1.4 不對稱圖文拼貼 (Asymmetric Spread) */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-spread {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-bottom: 6rem;
  &:hover .jt-spread-img img { transform: scale(1.03); }
  @media (max-width: 992px) {
    flex-direction: column;
    gap: 1.5rem;
    & .jt-spread-img, & .jt-spread-body { width: 100%; flex: none; }
  }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-spread-rev { flex-direction: row-reverse; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-spread-img {
  flex: 5;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(76,42,133,0.09);
  aspect-ratio: 16 / 10;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
  }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-spread-body { flex: 4; }

/* 1.5 立體重疊卡片 (Overlapping Cards) */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-overlap {
  position: relative;
  margin-bottom: 6rem;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-overlap-img-wrap {
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(76,42,133,0.09);
  @media (max-width: 768px) { height: 280px; }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-overlap-img { width: 100%; height: 100%; object-fit: cover; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-overlap-card {
  position: relative;
  background-color: var(--jt-white);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(76,42,133,0.12);
  padding: 3rem;
  max-width: 520px;
  margin: -120px auto 0 3rem;
  z-index: 2;
  border: 1px solid var(--jt-border);
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 32px rgba(76,42,133,0.12), 0 10px 20px rgba(76,42,133,0.05);
  }
  @media (max-width: 768px) { margin: 1rem auto 0 auto; max-width: 100%; }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-overlap-card-right { margin: -120px 3rem 0 auto; }

/* ==========================================================================
   商品核心亮點區 (Highlights Grid)
   ========================================================================== */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hl-section {
  background-color: var(--jt-white);
  border-radius: 16px;
  padding: 4rem 2rem;
  border: 1px solid var(--jt-border);
  margin-bottom: 6rem;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hl-h {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 3rem;
  font-family: 'Noto Serif TC', 'Songti TC', serif;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  @media (max-width: 992px) { grid-template-columns: 1fr; }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hl-item {
  text-align: center;
  padding: 1.5rem;
  border-inline-end: 1px solid var(--jt-border);
  &:last-child { border-inline-end: none; }
  @media (max-width: 992px) {
    border-inline-end: none;
    border-block-end: 1px solid var(--jt-border);
    padding-bottom: 2rem;
    &:last-child { border-block-end: none; }
  }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hl-icon { width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--jt-blue); }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hl-title { font-size: 1.125rem; font-family: 'Noto Serif TC', 'Songti TC', serif; margin-bottom: 0.5rem; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-hl-desc  { color: var(--jt-text-muted); font-size: 0.875rem; line-height: 1.8; }

/* ==========================================================================
   經典行程時間軸 (Sample Itinerary Timeline)
   ========================================================================== */
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-section { margin-bottom: 6rem; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-wrap {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
  padding: 2rem 0;
  &::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: var(--jt-purple);
    opacity: 0.15;
    inset-block: 0;
    left: 50%;
    margin-left: -1px;
    @media (max-width: 768px) { left: 31px; }
  }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-block {
  padding: 0.5rem 2rem;
  position: relative;
  width: 50%;
  @media (max-width: 768px) { width: 100%; padding-left: 70px; padding-right: 1rem; }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-left {
  left: 0;
  text-align: right;
  @media (max-width: 768px) { left: 0; text-align: left; }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-right {
  left: 50%;
  text-align: left;
  @media (max-width: 768px) { left: 0; }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-dot {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 15px;
  border-radius: 50%;
  background-color: var(--jt-white);
  border: 4px solid var(--jt-blue);
  z-index: 1;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-left  .jt-tl-dot { right: -8px; }
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-right .jt-tl-dot { left: -8px; }
@media (max-width: 768px) {
  :is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-left .jt-tl-dot,
  :is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-right .jt-tl-dot { left: 23px; }
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-time {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--jt-purple);
  margin-bottom: 0.25rem;
}
:is(#jt-themed, #jt-island, #jt-honeymoon, #jt-charter, #jt-custom) .jt-tl-content {
  padding: 1rem 1.5rem;
  background: var(--jt-white);
  border-radius: 8px;
  border: 1px solid var(--jt-border);
  box-shadow: 0 2px 8px rgba(76,42,133,0.07);
  display: inline-block;
  text-align: left;
  & h4 { font-size: 1rem; margin-bottom: 0.5rem; font-family: 'Noto Serif TC', 'Songti TC', serif; }
  & p  { font-size: 0.875rem; color: var(--jt-text-muted); line-height: 1.7; }
  @media (max-width: 768px) { width: 100%; }
}

/* ────────────────────────────────────────────────────────── */
/*                   峇里島×科摩多 (#jt-komodo)                   */
/* ────────────────────────────────────────────────────────── */
/* ── Google Fonts ──────────────────────────────────────────── */
    
    /* ── CSS 變數（限定在容器內，不污染 :root）────────────────── */
    #jt-komodo {
      /* 色彩 */
      --k-deep:      #0B3D52;
      --k-mid:       #1A6B8A;
      --k-teal:      #2596BE;
      --k-light:     #7ECCE0;
      --k-pale:      #C8EBF3;
      --k-sand:      #F5EDD8;
      --k-sand-dk:   #E8D5A8;
      --k-coral:     #E8845A;
      --k-white:     #FFFFFF;
      --k-ink:       #1C2B35;
      --k-smoke:     #5B7280;
      --k-mist:      #F0F7FA;
      --k-border:    rgba(37,150,190,0.14);

      /* 字型 */
      --k-serif:   'Playfair Display', 'Noto Serif TC', serif;
      --k-sans:    'Noto Sans TC', sans-serif;
      --k-ui:      'Montserrat', 'Noto Sans TC', sans-serif;

      /* 動效 */
      --k-ease:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --k-trans:   all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --k-shadow:  0 8px 40px rgba(11,61,82,0.16);
      --k-card-sh: 0 2px 18px rgba(11,61,82,0.09);

      /* 重置與基底 */
      box-sizing: border-box;
      font-family: var(--k-sans);
      font-size: 1rem;
      line-height: 1.82;
      color: var(--k-ink);
      background: var(--k-mist);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    #jt-komodo *, #jt-komodo *::before, #jt-komodo *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    #jt-komodo img { max-width: 100%; height: auto; display: block; }

    /* ── 頁首麵包屑導覽 ─────────────────────────────────────── */
    #jt-komodo .k-topbar {
      background: var(--k-deep);
      padding: 0.9rem 2rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    #jt-komodo .k-breadcrumb {
      font-family: var(--k-ui);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      text-decoration: none;
      transition: color 0.3s ease;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    #jt-komodo .k-breadcrumb:hover { color: var(--k-light); text-decoration: none; }
    #jt-komodo .k-breadcrumb-sep {
      color: rgba(255,255,255,0.2);
      font-size: 0.55rem;
    }
    #jt-komodo .k-breadcrumb-cur {
      font-family: var(--k-ui);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--k-light);
    }

    /* ── Hero ───────────────────────────────────────────────── */
    #jt-komodo .k-hero {
      position: relative;
      min-height: 94vh;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      background: var(--k-deep);
    }

    #jt-komodo .k-hero__bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center 35%;
      transform: scale(1.06);
      transition: transform 10s ease-out;
      will-change: transform;
    }

    #jt-komodo .k-hero.k-loaded .k-hero__bg { transform: scale(1); }

    #jt-komodo .k-hero__grad {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(11,61,82,0.94) 0%,
        rgba(11,61,82,0.45) 45%,
        rgba(11,61,82,0.12) 100%
      );
    }

    #jt-komodo .k-hero__body {
      position: relative;
      z-index: 2;
      padding: 0 3.5rem 4.5rem;
      max-width: 820px;
    }

    #jt-komodo .k-eyebrow {
      display: inline-block;
      font-family: var(--k-ui);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: var(--k-light);
      border: 1px solid rgba(126,204,224,0.38);
      padding: 0.38rem 1rem;
      margin-bottom: 1.5rem;
      opacity: 0;
      transform: translateY(12px);
      animation: kFadeUp 0.8s 0.25s var(--k-ease) forwards;
    }

    #jt-komodo .k-hero__h1 {
      font-family: var(--k-serif);
      font-size: clamp(2.2rem, 5.5vw, 4.6rem);
      font-weight: 700;
      color: var(--k-white);
      line-height: 1.14;
      margin-bottom: 1.25rem;
      opacity: 0;
      transform: translateY(22px);
      animation: kFadeUp 0.95s 0.45s var(--k-ease) forwards;
    }

    #jt-komodo .k-hero__h1 em {
      font-style: italic;
      color: var(--k-light);
    }

    #jt-komodo .k-hero__sub {
      font-family: var(--k-sans);
      font-size: 1rem;
      color: rgba(255,255,255,0.7);
      max-width: 520px;
      line-height: 1.85;
      margin-bottom: 2.5rem;
      opacity: 0;
      transform: translateY(14px);
      animation: kFadeUp 0.85s 0.65s var(--k-ease) forwards;
    }

    #jt-komodo .k-hero__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 2.5rem;
      opacity: 0;
      animation: kFadeIn 0.8s 0.85s ease forwards;
    }

    #jt-komodo .k-tag {
      font-family: var(--k-ui);
      font-size: 0.62rem;
      font-weight: 500;
      color: var(--k-pale);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(126,204,224,0.22);
      padding: 0.3rem 0.8rem;
    }

    #jt-komodo .k-hero__btns {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      opacity: 0;
      animation: kFadeIn 0.8s 1.05s ease forwards;
    }

    /* ── 按鈕 ───────────────────────────────────────────────── */
    #jt-komodo .k-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--k-ui);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.95rem 2.2rem;
      border: none;
      cursor: pointer;
      transition: var(--k-trans);
      position: relative;
    }

    #jt-komodo .k-btn--teal {
      background: var(--k-teal);
      color: var(--k-white);
    }
    #jt-komodo .k-btn--teal:hover {
      background: var(--k-deep);
      color: var(--k-white);
      text-decoration: none;
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(37,150,190,0.35);
    }

    #jt-komodo .k-btn--ghost {
      background: transparent;
      color: var(--k-white);
      border: 1.5px solid rgba(255,255,255,0.42);
    }
    #jt-komodo .k-btn--ghost:hover {
      background: rgba(255,255,255,0.1);
      border-color: var(--k-white);
      color: var(--k-white);
      text-decoration: none;
      transform: translateY(-2px);
    }

    #jt-komodo .k-btn--coral {
      background: var(--k-coral);
      color: var(--k-white);
    }
    #jt-komodo .k-btn--coral:hover {
      background: #d4643a;
      color: var(--k-white);
      text-decoration: none;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(232,132,90,0.4);
    }

    /* ── Stats bar ──────────────────────────────────────────── */
    #jt-komodo .k-stats {
      background: var(--k-deep);
      display: flex;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    #jt-komodo .k-stat {
      flex: 1;
      text-align: center;
      padding: 2rem 1rem;
      border-right: 1px solid rgba(255,255,255,0.08);
    }
    #jt-komodo .k-stat:last-child { border-right: none; }

    #jt-komodo .k-stat__n {
      display: block;
      font-family: var(--k-serif);
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--k-light);
      line-height: 1;
      margin-bottom: 0.3rem;
    }
    #jt-komodo .k-stat__l {
      font-family: var(--k-ui);
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.38);
    }

    /* ── 通用區塊 ───────────────────────────────────────────── */
    #jt-komodo .k-sec {
      padding: 5.5rem 3.5rem;
    }
    #jt-komodo .k-sec--white { background: var(--k-white); }
    #jt-komodo .k-sec--mist  { background: var(--k-mist); }
    #jt-komodo .k-sec--sand  { background: var(--k-sand); }
    #jt-komodo .k-sec--ocean { background: var(--k-deep); color: var(--k-white); }

    #jt-komodo .k-wrap {
      max-width: 1100px;
      margin: 0 auto;
    }

    #jt-komodo .k-label {
      font-family: var(--k-ui);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--k-teal);
      margin-bottom: 0.8rem;
    }
    #jt-komodo .k-sec--ocean .k-label { color: var(--k-light); }

    #jt-komodo .k-h2 {
      font-family: var(--k-serif);
      font-size: clamp(1.7rem, 3vw, 2.7rem);
      font-weight: 600;
      line-height: 1.22;
      color: var(--k-ink);
      margin-bottom: 1rem;
    }
    #jt-komodo .k-sec--ocean .k-h2 { color: var(--k-white); }

    #jt-komodo .k-rule {
      width: 48px;
      height: 2px;
      background: var(--k-teal);
      margin: 1.25rem 0 2.8rem;
    }
    #jt-komodo .k-rule--c { margin-left: auto; margin-right: auto; }
    #jt-komodo .k-sec--ocean .k-rule { background: var(--k-light); }

    /* ── Scroll reveal ──────────────────────────────────────── */
    #jt-komodo .k-reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
    #jt-komodo .k-reveal.k-vis { opacity: 1; transform: none; }
    #jt-komodo .k-d1 { transition-delay: 0.1s; }
    #jt-komodo .k-d2 { transition-delay: 0.2s; }
    #jt-komodo .k-d3 { transition-delay: 0.3s; }
    #jt-komodo .k-d4 { transition-delay: 0.4s; }
    #jt-komodo .k-d5 { transition-delay: 0.5s; }

    /* ── 旅程亮點卡 ─────────────────────────────────────────── */
    #jt-komodo .k-highlights {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    #jt-komodo .k-hl {
      background: var(--k-white);
      border: 1px solid var(--k-border);
      padding: 2rem;
      position: relative;
      overflow: hidden;
      transition: var(--k-trans);
    }
    #jt-komodo .k-hl::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: var(--k-teal);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s var(--k-ease);
    }
    #jt-komodo .k-hl:hover {
      box-shadow: var(--k-shadow);
      transform: translateY(-4px);
      border-color: rgba(37,150,190,0.28);
    }
    #jt-komodo .k-hl:hover::after { transform: scaleX(1); }

    #jt-komodo .k-hl__num {
      font-family: var(--k-serif);
      font-size: 3rem;
      font-weight: 700;
      color: var(--k-pale);
      line-height: 1;
      margin-bottom: 0.85rem;
    }
    #jt-komodo .k-hl__sub {
      font-family: var(--k-ui);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--k-teal);
      margin-bottom: 0.5rem;
    }
    #jt-komodo .k-hl__title {
      font-family: var(--k-serif);
      font-size: 1.08rem;
      font-weight: 600;
      color: var(--k-ink);
      margin-bottom: 0.6rem;
    }
    #jt-komodo .k-hl__desc {
      font-size: 0.86rem;
      color: var(--k-smoke);
      line-height: 1.75;
    }

    /* ── 行程地圖與航班組別 ───────────────────────────────── */
    #jt-komodo .k-route-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
      gap: 2rem;
      align-items: stretch;
    }

    #jt-komodo .k-route-map,
    #jt-komodo .k-flight-groups {
      background: var(--k-white);
      border: 1px solid rgba(37,150,190,0.16);
      box-shadow: var(--k-card-sh);
    }

    #jt-komodo .k-route-map {
      padding: clamp(1rem, 2.4vw, 1.6rem);
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    #jt-komodo .k-route-map__head {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: baseline;
      margin-bottom: 1rem;
      font-family: var(--k-ui);
      color: var(--k-deep);
    }
    #jt-komodo .k-route-map__head span {
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    #jt-komodo .k-route-map__head small {
      font-size: 0.62rem;
      color: var(--k-smoke);
      letter-spacing: 0.08em;
    }

    #jt-komodo .k-route-map__canvas {
      width: 100%;
      aspect-ratio: 760 / 430;
      min-height: 260px;
      overflow: hidden;
    }
    #jt-komodo .k-route-map__svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    #jt-komodo .k-route-map__line {
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 10 12;
    }
    #jt-komodo .k-route-map__line--out { stroke: var(--k-teal); }
    #jt-komodo .k-route-map__line--mid { stroke: var(--k-coral); }
    #jt-komodo .k-route-map__line--back { stroke: #6ea6b8; opacity: 0.75; }
    #jt-komodo .k-route-map__node circle {
      fill: var(--k-white);
      stroke: var(--k-teal);
      stroke-width: 5;
    }
    #jt-komodo .k-route-map__node text {
      font-family: var(--k-ui);
      font-size: 18px;
      font-weight: 800;
      fill: var(--k-deep);
      text-anchor: middle;
      letter-spacing: 0.08em;
    }
    #jt-komodo .k-route-map__node text:last-child {
      font-size: 13px;
      fill: var(--k-smoke);
      letter-spacing: 0.18em;
    }
    #jt-komodo .k-route-map__label rect {
      fill: rgba(255,255,255,0.86);
      stroke: rgba(37,150,190,0.18);
    }
    #jt-komodo .k-route-map__label text {
      font-family: var(--k-ui);
      font-size: 13px;
      font-weight: 800;
      fill: var(--k-deep);
      text-anchor: middle;
      dominant-baseline: middle;
      letter-spacing: 0.1em;
    }

    #jt-komodo .k-flight-groups {
      padding: 1.35rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    #jt-komodo .k-flight-group {
      display: grid;
      grid-template-columns: 4.5rem 1fr;
      gap: 1rem;
      padding: 1.1rem;
      background: rgba(37,150,190,0.055);
      border: 1px solid rgba(37,150,190,0.14);
    }
    #jt-komodo .k-flight-group--return {
      background: rgba(232,132,90,0.06);
      border-color: rgba(232,132,90,0.16);
    }
    #jt-komodo .k-flight-group__tag {
      align-self: start;
      justify-self: start;
      font-family: var(--k-ui);
      font-size: 0.64rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      color: var(--k-white);
      background: var(--k-teal);
      padding: 0.42rem 0.62rem;
      text-transform: uppercase;
      white-space: nowrap;
    }
    #jt-komodo .k-flight-group--return .k-flight-group__tag {
      background: var(--k-coral);
    }
    #jt-komodo .k-flight-group__title {
      font-family: var(--k-serif);
      font-size: 1rem;
      font-weight: 700;
      color: var(--k-ink);
      line-height: 1.35;
      margin-bottom: 0.45rem;
    }
    #jt-komodo .k-flight-group__desc {
      font-size: 0.82rem;
      line-height: 1.68;
      color: var(--k-smoke);
      margin-bottom: 0.75rem;
    }
    #jt-komodo .k-flight-legs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }
    #jt-komodo .k-flight-legs span {
      font-family: var(--k-ui);
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--k-deep);
      background: var(--k-white);
      border: 1px solid rgba(37,150,190,0.16);
      padding: 0.3rem 0.58rem;
    }
    #jt-komodo .k-flight-note {
      font-size: 0.78rem;
      color: var(--k-smoke);
      line-height: 1.65;
      border-top: 1px solid rgba(37,150,190,0.12);
      padding-top: 0.9rem;
    }

    /* ── 飯店卡 ─────────────────────────────────────────────── */
    #jt-komodo .k-hotels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    #jt-komodo .k-hotel {
      background: var(--k-white);
      overflow: hidden;
      box-shadow: var(--k-card-sh);
      transition: var(--k-trans);
    }
    #jt-komodo .k-hotel:hover {
      transform: translateY(-5px);
      box-shadow: var(--k-shadow);
    }

    #jt-komodo .k-hotel__img {
      height: 210px;
      background-size: cover;
      background-position: center;
      background-color: var(--k-mid);
      position: relative;
    }
    #jt-komodo .k-hotel__img::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.3);
      z-index: 1;
    }
    #jt-komodo .k-hotel__img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(11,61,82,0.5) 0%, transparent 55%);
      z-index: 2;
    }

    #jt-komodo .k-hotel__body { padding: 1.75rem; }
    #jt-komodo .k-hotel__loc {
      font-family: var(--k-ui);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--k-teal);
      margin-bottom: 0.45rem;
    }
    #jt-komodo .k-hotel__name {
      font-family: var(--k-serif);
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--k-ink);
      margin-bottom: 0.65rem;
    }
    #jt-komodo .k-hotel__desc {
      font-size: 0.86rem;
      color: var(--k-smoke);
      line-height: 1.75;
    }

    /* ── 天數行程卡 ─────────────────────────────────────────── */
    #jt-komodo .k-days { display: flex; flex-direction: column; }

    #jt-komodo .k-day {
      display: grid;
      grid-template-columns: 90px 1fr;
      min-height: 150px;
    }
    #jt-komodo .k-day:hover .k-day__body {
      background: rgba(37,150,190,0.035);
    }

    #jt-komodo .k-day__num {
      background: var(--k-deep);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.5rem 0.6rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    #jt-komodo .k-day__n {
      font-family: var(--k-serif);
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--k-light);
      line-height: 1;
    }
    #jt-komodo .k-day__d {
      font-family: var(--k-ui);
      font-size: 0.52rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      margin-top: 3px;
    }

    #jt-komodo .k-day__body {
      border-bottom: 1px solid rgba(37,150,190,0.1);
      padding: 1.6rem 1.85rem;
      background: var(--k-white);
      transition: background 0.3s ease;
    }

    #jt-komodo .k-day__title {
      font-family: var(--k-serif);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--k-ink);
      margin-bottom: 0.5rem;
      line-height: 1.3;
    }
    #jt-komodo .k-day__desc {
      font-size: 0.86rem;
      color: var(--k-smoke);
      line-height: 1.72;
      margin-bottom: 0.85rem;
    }
    #jt-komodo .k-day__pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    #jt-komodo .k-pill {
      font-family: var(--k-ui);
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.26rem 0.7rem;
      background: var(--k-pale);
      color: var(--k-deep);
    }
    #jt-komodo .k-pill--hotel {
      background: rgba(232,132,90,0.1);
      color: var(--k-coral);
    }
    #jt-komodo .k-pill--star {
      background: var(--k-sand-dk);
      color: #7a5c20;
    }

    /* ── 垂直時間軸 ─────────────────────────────────────────── */
    #jt-komodo .k-tl {
      position: relative;
      padding-left: 1.85rem;
      margin: 0.85rem 0 1rem;
    }
    #jt-komodo .k-tl::before {
      content: '';
      position: absolute;
      left: 5px; top: 8px; bottom: 8px;
      width: 1px;
      background: linear-gradient(to bottom, var(--k-teal), rgba(37,150,190,0.08));
    }
    #jt-komodo .k-tl__item {
      position: relative;
      margin-bottom: 1.5rem;
    }
    #jt-komodo .k-tl__item:last-child { margin-bottom: 0; }
    #jt-komodo .k-tl__dot {
      position: absolute;
      left: -1.55rem;
      top: 5px;
      width: 9px; height: 9px;
      border-radius: 50%;
      background: var(--k-teal);
      border: 2px solid var(--k-mist);
      box-shadow: 0 0 0 2px var(--k-teal);
    }
    #jt-komodo .k-tl__lbl {
      font-family: var(--k-ui);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--k-teal);
      margin-bottom: 0.2rem;
    }
    #jt-komodo .k-tl__ev {
      font-family: var(--k-serif);
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--k-ink);
      margin-bottom: 0.18rem;
    }
    #jt-komodo .k-tl__note {
      font-size: 0.8rem;
      color: var(--k-smoke);
      line-height: 1.62;
    }

    /* ── Info box ───────────────────────────────────────────── */
    #jt-komodo .k-info {
      background: rgba(37,150,190,0.07);
      border-left: 3px solid var(--k-teal);
      padding: 0.85rem 1.15rem;
      margin-top: 0.85rem;
      font-size: 0.83rem;
      color: var(--k-deep);
      line-height: 1.65;
    }

    /* ── 跳島景點格 ─────────────────────────────────────────── */
    #jt-komodo .k-spots {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1rem;
      margin-top: 2.5rem;
    }
    #jt-komodo .k-spot {
      background: var(--k-white);
      border: 1px solid rgba(255,255,255,0.12);
      padding: 1.25rem 0.75rem;
      text-align: center;
      transition: var(--k-trans);
    }
    #jt-komodo .k-spot:hover {
      border-color: rgba(126,204,224,0.5);
      box-shadow: var(--k-card-sh);
      transform: translateY(-3px);
    }
    #jt-komodo .k-spot__ico { font-size: 1.4rem; margin-bottom: 0.55rem; }
    #jt-komodo .k-spot__name {
      font-family: var(--k-serif);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--k-white);
      margin-bottom: 0.2rem;
    }
    #jt-komodo .k-spot__en {
      font-family: var(--k-ui);
      font-size: 0.58rem;
      color: var(--k-light);
      letter-spacing: 0.08em;
    }

    /* ── 費用包含表 ─────────────────────────────────────────── */
    #jt-komodo .k-incl-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    #jt-komodo .k-incl-box {
      padding: 2.25rem;
    }
    #jt-komodo .k-incl-box--yes {
      background: rgba(37,150,190,0.06);
      border: 1px solid rgba(37,150,190,0.2);
    }
    #jt-komodo .k-incl-box--no {
      background: var(--k-mist);
      border: 1px solid rgba(0,0,0,0.07);
    }

    #jt-komodo .k-incl-box__h {
      font-family: var(--k-ui);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      padding-bottom: 0.85rem;
      border-bottom: 1px solid rgba(37,150,190,0.15);
      margin-bottom: 1.25rem;
    }
    #jt-komodo .k-incl-box--yes .k-incl-box__h { color: var(--k-deep); }
    #jt-komodo .k-incl-box--no .k-incl-box__h  { color: var(--k-smoke); }

    #jt-komodo .k-incl-list { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
    #jt-komodo .k-incl-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      font-size: 0.86rem;
      color: var(--k-ink);
      line-height: 1.6;
    }
    #jt-komodo .k-incl-list--no li { color: var(--k-smoke); }
    #jt-komodo .k-incl-dot {
      flex-shrink: 0;
      font-size: 0.7rem;
      margin-top: 3px;
      color: var(--k-teal);
    }
    #jt-komodo .k-incl-list--no .k-incl-dot { color: #b0b8c1; }

    /* ── 適合旅人 ───────────────────────────────────────────── */
    #jt-komodo .k-aud-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }
    #jt-komodo .k-aud {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 1.6rem;
      transition: var(--k-trans);
    }
    #jt-komodo .k-aud:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(126,204,224,0.35);
      transform: translateY(-3px);
    }
    #jt-komodo .k-aud__ico { font-size: 1.4rem; margin-bottom: 0.85rem; }
    #jt-komodo .k-aud__title {
      font-family: var(--k-serif);
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--k-white);
      margin-bottom: 0.35rem;
    }
    #jt-komodo .k-aud__desc {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.52);
      line-height: 1.6;
    }

    /* ── CTA 橫幅 ───────────────────────────────────────────── */
    #jt-komodo .k-cta {
      background: var(--k-deep);
      padding: 5rem 3.5rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    #jt-komodo .k-cta::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 70% 60% at 50% 110%, rgba(37,150,190,0.18) 0%, transparent 65%);
      pointer-events: none;
    }
    #jt-komodo .k-cta__label {
      font-family: var(--k-ui);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.36em;
      text-transform: uppercase;
      color: var(--k-light);
      margin-bottom: 1.25rem;
    }
    #jt-komodo .k-cta__h2 {
      font-family: var(--k-serif);
      font-size: clamp(1.7rem, 3vw, 2.9rem);
      font-weight: 700;
      color: var(--k-white);
      margin-bottom: 1rem;
      line-height: 1.22;
    }
    #jt-komodo .k-cta__desc {
      font-size: 0.94rem;
      color: rgba(255,255,255,0.58);
      max-width: 460px;
      margin: 0 auto 2.5rem;
      line-height: 1.82;
    }
    #jt-komodo .k-cta__btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }

    /* ── 頁尾 ───────────────────────────────────────────────── */
    #jt-komodo .k-footer {
      background: #061d28;
      border-top: 1px solid rgba(37,150,190,0.12);
      padding: 2rem 3.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    #jt-komodo .k-footer__back {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-family: var(--k-ui);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--k-light);
      text-decoration: none;
      transition: gap 0.3s ease;
    }
    #jt-komodo .k-footer__back:hover { gap: 0.7rem; color: var(--k-white); text-decoration: none; }
    #jt-komodo .k-footer__copy {
      font-family: var(--k-ui);
      font-size: 0.62rem;
      color: rgba(255,255,255,0.22);
      letter-spacing: 0.06em;
    }

    /* ── Keyframes ──────────────────────────────────────────── */
    @keyframes kFadeUp {
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes kFadeIn {
      to { opacity: 1; }
    }

    /* ── RWD ────────────────────────────────────────────────── */
    @media (max-width: 900px) {
      #jt-komodo .k-sec  { padding: 4rem 1.5rem; }
      #jt-komodo .k-hero__body { padding: 0 1.5rem 3.5rem; }
      #jt-komodo .k-highlights { grid-template-columns: 1fr; }
      #jt-komodo .k-hotels     { grid-template-columns: 1fr; }
      #jt-komodo .k-aud-grid   { grid-template-columns: 1fr 1fr; }
      #jt-komodo .k-spots      { grid-template-columns: repeat(3, 1fr); }
      #jt-komodo .k-incl-grid  { grid-template-columns: 1fr; }
      #jt-komodo .k-route-grid { grid-template-columns: 1fr; }
      #jt-komodo .k-stats      { flex-wrap: wrap; }
      #jt-komodo .k-stat        { flex: 1 1 45%; }
      #jt-komodo .k-day         { grid-template-columns: 70px 1fr; }
      #jt-komodo .k-cta         { padding: 3.5rem 1.5rem; }
      #jt-komodo .k-footer      { padding: 1.75rem 1.5rem; flex-direction: column; text-align: center; }
      #jt-komodo .k-topbar      { padding: 0.75rem 1.5rem; }
    }
    @media (max-width: 600px) {
      #jt-komodo .k-spots { grid-template-columns: 1fr 1fr; }
      #jt-komodo .k-aud-grid { grid-template-columns: 1fr; }
      #jt-komodo .k-route-map__head { flex-direction: column; gap: 0.25rem; }
      #jt-komodo .k-route-map__canvas { min-height: 210px; }
      #jt-komodo .k-flight-group { grid-template-columns: 1fr; }
    }

/* ────────────────────────────────────────────────────────── */
/*          馬爾地夫系列頁面共用 CSS                           */
/*  #jt-maldives / #jt-mlx / #jt-mhoney / #jt-mfamily       */
/*  #jt-mall / #jt-mdive / #jt-mtrend / #jt-mwell / #jt-mboat */
/* ────────────────────────────────────────────────────────── */

/* ── 所有馬爾地夫頁面共用的 token（用 [id^="jt-m"] 一次套用）── */
[id^="jt-m"] {
  --md-ocean:    #2596BE;
  --md-teal:     #7ECCE0;
  --md-sky:      #C8EBF3;
  --md-sand:     #F5EDD8;
  --md-sand-dk:  #E8D5A8;
  --md-white:    #FFFFFF;
  --md-ink:      #1C2B35;
  --md-smoke:    #5B7280;
  --md-mist:     #F0F7FA;
  --md-gold:     #C9A96E;
  --md-purple:   #4C2A85;

  --md-serif:    'Playfair Display', 'Noto Serif TC', serif;
  --md-sans:     'Noto Sans TC', 'PingFang TC', sans-serif;
  --md-ui:       'Montserrat', 'Noto Sans TC', sans-serif;
  --md-ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --md-trans:    all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --md-shadow:   0 8px 40px rgba(0,119,182,0.14);
  --md-card-sh:  0 2px 18px rgba(0,119,182,0.09);

  box-sizing: border-box;
  font-family: var(--md-sans);
  font-size: 1rem;
  line-height: 1.82;
  color: var(--md-ink);
  background: var(--md-mist);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[id^="jt-m"] *, [id^="jt-m"] *::before, [id^="jt-m"] *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
[id^="jt-m"] img { max-width: 100%; height: auto; display: block; }
[id^="jt-m"] a   { text-decoration: none; color: inherit; }

/* ── Hero ── */
[id^="jt-m"] .md-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--md-ocean);
}
[id^="jt-m"] .md-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.05);
  transition: transform 10s ease-out;
}
[id^="jt-m"] .md-hero.md-loaded .md-hero__bg { transform: scale(1); }
[id^="jt-m"] .md-hero__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11,61,82,0.92) 0%,
    rgba(0,60,100,0.42) 50%,
    rgba(11,61,82,0.12) 100%
  );
}
[id^="jt-m"] .md-hero__body {
  position: relative;
  z-index: 2;
  padding: 0 4rem 4.5rem;
  max-width: 860px;
}
[id^="jt-m"] .md-eyebrow {
  display: inline-block;
  font-family: var(--md-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--md-sky);
  border: 1px solid rgba(144,224,239,0.38);
  padding: 0.38rem 1rem;
  margin-bottom: 1.4rem;
  opacity: 0;
  transform: translateY(12px);
  animation: mdFadeUp 0.8s 0.25s var(--md-ease) forwards;
}
[id^="jt-m"] .md-hero__h1 {
  font-family: var(--md-serif);
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 700;
  color: var(--md-white);
  line-height: 1.15;
  margin-bottom: 1.2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: mdFadeUp 0.95s 0.45s var(--md-ease) forwards;
}
[id^="jt-m"] .md-hero__h1 em {
  font-style: italic;
  color: var(--md-sky);
}
[id^="jt-m"] .md-hero__sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.72);
  max-width: 540px;
  line-height: 1.85;
  margin-bottom: 2.4rem;
  opacity: 0;
  transform: translateY(12px);
  animation: mdFadeUp 0.85s 0.65s var(--md-ease) forwards;
}
[id^="jt-m"] .md-hero__btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: mdFadeIn 0.8s 0.85s ease forwards;
}

/* ── 按鈕 ── */
[id^="jt-m"] .md-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--md-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 2.2rem;
  cursor: pointer;
  border: none;
  transition: var(--md-trans);
}
[id^="jt-m"] .md-btn--ocean {
  background: var(--md-ocean);
  color: var(--md-white);
}
[id^="jt-m"] .md-btn--ocean:hover {
  background: #0B3D52;
  color: var(--md-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,119,182,0.35);
}
[id^="jt-m"] .md-btn--outline {
  background: transparent;
  color: var(--md-white);
  border: 1.5px solid rgba(255,255,255,0.45);
}
[id^="jt-m"] .md-btn--outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--md-white);
  transform: translateY(-2px);
}
[id^="jt-m"] .md-btn--sand {
  background: var(--md-sand-dk);
  color: var(--md-ink);
}
[id^="jt-m"] .md-btn--sand:hover {
  background: #c9a850;
  color: var(--md-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201,148,58,0.3);
}

/* ── 通用 section ── */
[id^="jt-m"] .md-sec {
  padding: 5.5rem 4rem;
}
[id^="jt-m"] .md-sec--white  { background: var(--md-white); }
[id^="jt-m"] .md-sec--mist   { background: var(--md-mist); }
[id^="jt-m"] .md-sec--sand   { background: var(--md-sand); }
[id^="jt-m"] .md-sec--ocean  { background: var(--md-ocean); color: var(--md-white); }
[id^="jt-m"] .md-sec--deep   { background: #0B3D52; color: var(--md-white); }
[id^="jt-m"] .md-wrap        { max-width: 1200px; margin: 0 auto; }

[id^="jt-m"] .md-label {
  font-family: var(--md-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--md-ocean);
  margin-bottom: 0.75rem;
}
[id^="jt-m"] .md-sec--ocean .md-label,
[id^="jt-m"] .md-sec--deep  .md-label { color: var(--md-sky); }

[id^="jt-m"] .md-h2 {
  font-family: var(--md-serif);
  font-size: clamp(1.65rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--md-ink);
  margin-bottom: 0.9rem;
}
[id^="jt-m"] .md-sec--ocean .md-h2,
[id^="jt-m"] .md-sec--deep  .md-h2 { color: var(--md-white); }

[id^="jt-m"] .md-h3 {
  font-family: var(--md-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--md-ink);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
[id^="jt-m"] .md-rule {
  width: 48px; height: 2px;
  background: var(--md-ocean);
  margin: 1.1rem 0 2.5rem;
}
[id^="jt-m"] .md-rule--c { margin-left: auto; margin-right: auto; }
[id^="jt-m"] .md-sec--ocean .md-rule,
[id^="jt-m"] .md-sec--deep  .md-rule { background: var(--md-sky); }

/* ── Scroll reveal ── */
[id^="jt-m"] .md-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
[id^="jt-m"] .md-reveal.md-vis { opacity: 1; transform: none; }
[id^="jt-m"] .md-d1 { transition-delay: 0.1s; }
[id^="jt-m"] .md-d2 { transition-delay: 0.2s; }
[id^="jt-m"] .md-d3 { transition-delay: 0.3s; }
[id^="jt-m"] .md-d4 { transition-delay: 0.4s; }
[id^="jt-m"] .md-d5 { transition-delay: 0.5s; }

/* ── 八大主題卡（總覽頁）── */
[id^="jt-m"] .md-themes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
[id^="jt-m"] .md-theme-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  transition: var(--md-trans);
}
[id^="jt-m"] .md-theme-card:hover { transform: translateY(-5px); box-shadow: var(--md-shadow); }
[id^="jt-m"] .md-theme-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--md-ease);
  filter: brightness(1.08) saturate(0.7);
}
[id^="jt-m"] .md-theme-card:hover .md-theme-card__bg { transform: scale(1.06); }
[id^="jt-m"] .md-theme-card__grad {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,20,40,0.72) 0%, rgba(0,20,40,0.08) 60%, transparent 100%),
    rgba(255,255,255,0.12);
}
[id^="jt-m"] .md-theme-card__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  z-index: 2;
}
[id^="jt-m"] .md-theme-card__icon {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
[id^="jt-m"] .md-theme-card__title {
  font-family: var(--md-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--md-white);
  margin-bottom: 0.2rem;
}
[id^="jt-m"] .md-theme-card__sub {
  font-family: var(--md-ui);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--md-sky);
}
[id^="jt-m"] .md-theme-card__arrow {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-white);
  font-size: 0.8rem;
  transition: var(--md-trans);
  z-index: 2;
}
[id^="jt-m"] .md-theme-card:hover .md-theme-card__arrow {
  background: var(--md-ocean);
  border-color: var(--md-ocean);
}

/* ── 精選飯店卡（子頁）── */
[id^="jt-m"] .md-hotels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
[id^="jt-m"] .md-hotel-card {
  background: var(--md-white);
  overflow: hidden;
  box-shadow: var(--md-card-sh);
  transition: var(--md-trans);
}
[id^="jt-m"] .md-hotel-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--md-shadow);
}
[id^="jt-m"] .md-hotel-card__img {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #C8EBF3;
  position: relative;
  overflow: hidden;
}
[id^="jt-m"] .md-hotel-card__img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.3);
  z-index: 1;
}
[id^="jt-m"] .md-hotel-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,61,82,0.32) 0%, transparent 55%);
  z-index: 2;
}
[id^="jt-m"] .md-hotel-card__badge {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  font-family: var(--md-ui);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--md-ink);
  background: var(--md-sand-dk);
  padding: 0.25rem 0.6rem;
  z-index: 3;
}
[id^="jt-m"] .md-hotel-card__body { padding: 1.35rem 1.5rem 1.5rem; }
[id^="jt-m"] .md-hotel-card__name {
  font-family: var(--md-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--md-ink);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
[id^="jt-m"] .md-hotel-card__atoll {
  font-family: var(--md-ui);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--md-ocean);
  margin-bottom: 0.6rem;
}
[id^="jt-m"] .md-hotel-card__desc {
  font-size: 0.84rem;
  color: var(--md-smoke);
  line-height: 1.72;
  margin-bottom: 0.9rem;
}
[id^="jt-m"] .md-hotel-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
[id^="jt-m"] .md-hotel-tag {
  font-family: var(--md-ui);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  background: rgba(0,119,182,0.08);
  color: var(--md-ocean);
  border: 1px solid rgba(0,119,182,0.18);
}
[id^="jt-m"] .md-hotel-tag--gold {
  background: rgba(201,148,58,0.1);
  color: var(--md-gold);
  border-color: rgba(201,148,58,0.25);
}

/* ── 優勢/特色清單 ── */
[id^="jt-m"] .md-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
[id^="jt-m"] .md-feat {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--md-white);
  border: 1px solid rgba(0,119,182,0.1);
  transition: var(--md-trans);
}
[id^="jt-m"] .md-feat:hover {
  border-color: var(--md-teal);
  transform: translateY(-4px);
  box-shadow: var(--md-card-sh);
}
[id^="jt-m"] .md-feat__icon {
  font-size: 2rem;
  margin-bottom: 0.85rem;
}
[id^="jt-m"] .md-feat__title {
  font-family: var(--md-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-ink);
  margin-bottom: 0.45rem;
}
[id^="jt-m"] .md-feat__desc {
  font-size: 0.82rem;
  color: var(--md-smoke);
  line-height: 1.7;
}

/* ── 主題子頁 breadcrumb ── */
[id^="jt-m"] .md-topbar {
  background: #0B3D52;
  padding: 0.85rem 4rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
[id^="jt-m"] .md-crumb {
  font-family: var(--md-ui);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  text-decoration: none;
  transition: color 0.3s ease;
}
[id^="jt-m"] .md-crumb:hover { color: var(--md-sky); }
[id^="jt-m"] .md-crumb-sep   { color: rgba(255,255,255,0.2); font-size: 0.55rem; }
[id^="jt-m"] .md-crumb-cur   {
  font-family: var(--md-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--md-sky);
}

/* ── 總覽頁：選島顧問四格 ── */
[id^="jt-m"] .md-advisor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
[id^="jt-m"] .md-advisor-item {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 1.5rem;
  transition: var(--md-trans);
}
[id^="jt-m"] .md-advisor-item:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(144,224,239,0.35);
  transform: translateY(-3px);
}
[id^="jt-m"] .md-advisor-item__icon { font-size: 1.5rem; margin-bottom: 0.7rem; }
[id^="jt-m"] .md-advisor-item__title {
  font-family: var(--md-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--md-white);
  margin-bottom: 0.3rem;
}
[id^="jt-m"] .md-advisor-item__desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.6;
}

/* ── CTA 橫幅 ── */
[id^="jt-m"] .md-cta {
  background: #0B3D52;
  padding: 5rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
[id^="jt-m"] .md-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 110%, rgba(0,180,216,0.18) 0%, transparent 65%);
  pointer-events: none;
}
[id^="jt-m"] .md-cta__label {
  font-family: var(--md-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--md-sky);
  margin-bottom: 1.2rem;
}
[id^="jt-m"] .md-cta__h2 {
  font-family: var(--md-serif);
  font-size: clamp(1.6rem, 3vw, 2.75rem);
  font-weight: 700;
  color: var(--md-white);
  margin-bottom: 1rem;
  line-height: 1.22;
}
[id^="jt-m"] .md-cta__desc {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.58);
  max-width: 460px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
}
[id^="jt-m"] .md-cta__btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ── 頁尾 ── */
[id^="jt-m"] .md-footer {
  background: #061d28;
  border-top: 1px solid rgba(0,180,216,0.12);
  padding: 1.75rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
[id^="jt-m"] .md-footer__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--md-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--md-sky);
  text-decoration: none;
  transition: gap 0.3s ease;
}
[id^="jt-m"] .md-footer__back:hover { gap: 0.7rem; color: var(--md-white); }
[id^="jt-m"] .md-footer__copy {
  font-family: var(--md-ui);
  font-size: 0.6rem;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.06em;
}

/* ── Keyframes ── */
@keyframes mdFadeUp  { to { opacity: 1; transform: translateY(0); } }
@keyframes mdFadeIn  { to { opacity: 1; } }

/* ── RWD ── */
@media (max-width: 1024px) {
  [id^="jt-m"] .md-themes   { grid-template-columns: repeat(2, 1fr); }
  [id^="jt-m"] .md-hotels   { grid-template-columns: repeat(2, 1fr); }
  [id^="jt-m"] .md-features { grid-template-columns: repeat(2, 1fr); }
  [id^="jt-m"] .md-advisor-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  [id^="jt-m"] .md-sec       { padding: 4rem 1.5rem; }
  [id^="jt-m"] .md-hero__body{ padding: 0 1.5rem 3.5rem; }
  [id^="jt-m"] .md-themes    { grid-template-columns: 1fr 1fr; }
  [id^="jt-m"] .md-hotels    { grid-template-columns: 1fr; }
  [id^="jt-m"] .md-features  { grid-template-columns: 1fr 1fr; }
  [id^="jt-m"] .md-advisor-grid { grid-template-columns: 1fr 1fr; }
  [id^="jt-m"] .md-topbar    { padding: 0.75rem 1.5rem; }
  [id^="jt-m"] .md-cta       { padding: 3.5rem 1.5rem; }
  [id^="jt-m"] .md-footer    { padding: 1.5rem; flex-direction: column; text-align: center; }
}

/* ── 全站卡片主視覺淡化 30% ─────────────────────────────── */
#jt-themed .jt-feat-img-wrap::after,
#jt-island .jt-feat-img-wrap::after,
#jt-honeymoon .jt-feat-img-wrap::after,
#jt-charter .jt-feat-img-wrap::after,
#jt-custom .jt-feat-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.3);
  pointer-events: none;
  z-index: 1;
}

#jt-themed .jt-feat-img,
#jt-island .jt-feat-img,
#jt-honeymoon .jt-feat-img,
#jt-charter .jt-feat-img,
#jt-custom .jt-feat-img {
  filter: saturate(0.7) brightness(1.08);
}