/* =========================================
   1. 字體載入 (Fonts)
   ========================================= */
/* 載入標準字體 (包含 100 到 900 的粗細) */
@font-face {
  font-family: "Albert Sans";
  src: url("../font/AlbertSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../font/Roboto-VariableFont_wdth,wght.ttf")
    format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif TC";
  src: url("../font/NotoSerifTC-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   2. 全域變數設計系統 (Design Tokens)
   ========================================= */
:root {
    /* --- Figma 顏色系統 --- */
    --color-white: #ffffff;
    --color-brown-300: #a38860;
    --color-brown-800: #311e01;
    --color-text-500: #1c1c1c;
    --color-line: #c0c0c0;
    --color-text-100: #6c6c6c;
    --color-text-300: #484747;
    --color-brown-200: #d7c3a4;
    --color-disable: #737373;
    --color-gray-600: #7f7f7f;
    --color-placeholder: #b3b3b3;
    --color-red: #ff6c6c;
    /* --- 覆寫 Bootstrap 預設行為 --- */
    --bs-body-color: var(--color-text-500);
    --font-weight-lighter: lighter;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-bolder: bolder;
    --home-pad: 28px;
}

/* =========================================
   3. 基礎 HTML 標籤設定 (Base)
   ========================================= */
body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400; /* 預設 Regular */
  font-style: normal;
  color: var(--color-text-500);
}

a {
  text-decoration: none;
  color: var(--color-text-500);
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-weight: inherit;
}

/*將Bootstrap為body新增的padding-right移除*/
body.modal-open {
  padding-right: 0px !important;
}

/* =========================================
   Header 樣式
   ========================================= */

/* --- 變數 --- */
:root {
  --header-height-xl: 120px;
  --header-height-md: 80px;
  --header-height-sm: 56px;
  --header-bg: #ffffff;
  --header-overlay-bg: #1c1c1ce5;
}

/* --- 佔位 --- */
.header-spacer {
  height: var(--header-height-xl);
}
body.modal-open {
    padding-right: 0px !important;
}
/* =========================================
   1. Header
   ========================================= */
/* ========
   1-1. Header 主容器
   ======== */
/* ========
   1-1. Header 主容器
   ======== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--header-bg);
  border-bottom: 1px solid var(--color-line);
  font-family: "Roboto", sans-serif;
  /* ⬇️ 將 transition 從 top 改為 transform 和 opacity，時間 0.3s，ease-in-out ⬇️ */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  /* 預設狀態 (y: 0, opacity: 1) */
  transform: translateY(0);
  opacity: 1;
}

/* ⬇️ 隱藏時的狀態 (對應 Framer Motion 的 hidden: true) ⬇️ */
.site-header.header--hidden {
  transform: translateY(-140px); /* 往上移出 140px */
  opacity: 0; /* 漸隱 */
  pointer-events: none; /* 隱藏時不可點擊 */
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height-xl);
    padding: 44px 28px 32px 28px;
    max-width: 1920px;
    margin: 0 auto;
}

/* ========
   1-2. Logo
   ======== */
.header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-logo__img {
    height: 95px;
    width: auto;
    object-fit: contain;
}

/* ========
   1-3. XL 導覽列
   ======== */
.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.header-nav__link {
  font-size: 16px;
  color: var(--color-brown-800);
  text-decoration: none;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: color 0.2s;
}

.header-nav__link:hover {
  color: var(--color-brown-300);
}

.header-nav__menu-btn {
  font-size: 16px;
  color: var(--color-brown-800);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 1px;
  padding: 0;
  transition: color 0.2s;
}

.header-nav__menu-btn:hover {
  color: var(--color-brown-300);
}

/* ========
   1-4. XL 右側工具列
   ======== */
.header-tools {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 24px;
  flex-shrink: 0;
}

/* APP 按鈕 */
.header-tools__app-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-brown-800);
  font-size: 16px;
  letter-spacing: 0.5px;
  padding: 0;
  white-space: nowrap;
  transition: color 0.2s;
}

.header-tools__app-btn:hover {
  color: var(--color-brown-300);
}

/* 搜尋按鈕 + 搜尋框容器 */
.header-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
/* 搜尋按鈕 */
.header-tools__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-brown-800);
  background: none;
  cursor: pointer;
  color: var(--color-brown-800);
  transition: all 0.2s;
}

.header-tools__search-btn:hover {
  border-color: var(--color-brown-300);
  color: var(--color-brown-300);
}

/* 搜尋框 */
.header-search {
  position: absolute;
  top: calc(100% + 12px); /* ← 改：按鈕下方 12px */
  right: 0; /* ← 改：與按鈕右緣對齊 */
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--header-overlay-bg);
  border-radius: 100px;
  border: 1px solid #ffffff;
  padding: 8px;
  min-width: 257px;
  z-index: 10;
}

.header-search.is-open {
  display: flex;
}

.header-search__icon {
  color: #fff;
  flex-shrink: 0;
}

.header-search__input {
  border: none;
  outline: none;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  width: 100%;
}

.header-search__input::placeholder {
  color: #ffffff;
}

/* 分隔線 */
.header-tools__divider {
  width: 0.5px;
  height: 39px;
  background: var(--color-brown-800);
  margin: 0 4px;
}

/* ========
   1-5. 會員區塊
   ======== */
.header-member {
  position: relative;
}

.header-member__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-brown-800);
  font-size: 16px;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.header-member__btn:hover {
  color: var(--color-brown-300);
}

/* 會員下拉選單 */
.header-member__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--header-bg);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  z-index: 10;
  overflow: hidden;
}

.header-member__dropdown.is-open {
  display: block;
}

.header-member__dropdown a {
  display: block;
  padding: 12px 20px;
  font-size: 16px;
  color: var(--color-brown-800);
  text-decoration: none;
  text-align: center;
  transition: background 0.15s;
}

.header-member__dropdown a:hover {
  background: rgba(163, 136, 96, 0.08);
}

/* ========
   1-6. 漢堡按鈕（MD/SM）
   ======== */
.header-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.header-hamburger__line {
  display: block;
  height: 2px;
  background: var(--color-brown-300);
  border-radius: 1px;
  transition: width 0.2s;
}

.header-hamburger__line:nth-child(1) {
  width: 28px;
}

.header-hamburger__line:nth-child(2) {
  width: 28px;
}

.header-hamburger__line:nth-child(3) {
  width: 28px;
}

/* ========
   1-7. XL MENU 下拉面板
   ======== */
.header-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-panel {
    display: none;
    position: absolute;
    top: calc( 100% + 18px ); /* ← 改：對齊 header 下緣（32px = header-inner 的 padding-bottom） */
    right: 0; /* ← 改：與 MENU 右緣對齊 */
    left: auto; /* ← 改：取消原本的 left: 0 */
    width: 560px; /* ← 改：固定寬度 */
    background: var(--header-overlay-bg);
    z-index: 999;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    overflow-y: auto;
}
    .menu-panel::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Edge(Chromium) */
    }
.menu-panel.is-open {
  display: block;
  max-height: 80vh;
}

.menu-panel__inner {
  max-width: 560px;
  padding: 24px 40px 32px;
}

.menu-panel__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
}

.menu-panel__link {
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
  transition: color 0.2s;
}

a.menu-panel__link:hover {
    color: var(--color-line);
}

.menu-panel__link--parent {
  cursor: default;
}

.menu-panel__arrow {
  font-size: 12px;
  margin-left: 4px;
  color: #ffffff;
}

.menu-panel__divider {
  color: #ffffff;
  font-size: 12px;
}

.menu-panel__sub-link {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s;
}

.menu-panel__sub-link:hover {
  color: var(--color-line);
}

.menu-panel__lang {
  border-bottom: none;
  color: rgba(255, 255, 255, 0.7);
  gap: 8px;
  margin-top: 32px;
  padding: 0px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--color-line);
}

.menu-panel__lang span {
  font-size: 16px;
}

.menu-panel__lang-options {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-panel__lang-options a {
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s;
}

.menu-panel__lang-options a.active {
  color: #d8bc92;
}

.menu-panel__lang-options a:hover {
  color: var(--color-line);
}

.menu-panel__lang-options span {
  color: #ffffff;
  font-size: 12px;
}

/* ========
   1-8. MD/SM 全螢幕遮罩導覽
   ======== */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--header-overlay-bg);
  z-index: 2000;
  overflow-y: auto;
}

.mobile-nav-overlay.is-open {
  display: block;
}

.mobile-nav {
  min-height: 100vh;
  padding: 20px 24px 40px;
  position: relative;
}

/* 關閉按鈕 */
.mobile-nav__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
}

/* 選單項目 */
.mobile-nav__items {
  margin-top: 16px;
}

.mobile-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
}

.mobile-nav__link {
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
}

.mobile-nav__link--parent {
  cursor: default;
}

.mobile-nav__arrow {
  font-size: 12px;
  margin-left: 4px;
  color: #ffffff;
}

.mobile-nav__sep {
  color: #ffffff;
  font-size: 12px;
}

.mobile-nav__sub-link {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

/* APP */
.mobile-nav__app {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

/* 搜尋 */
.mobile-nav__search {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  padding: 8px;
  margin: 16px 0;
  max-width: 257px;
  border: 1px solid #ffffff;
}

.mobile-nav__search-input {
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: var(--font-weight-light);
  width: 100%;
}

.mobile-nav__search-input::placeholder {
  color: #ffffff;
  font-size: 16px;
  font-weight: var(--font-weight-light);
}

/* 登入/登出 */
.mobile-nav__auth {
  padding: 12px 0;
}

.mobile-nav__auth a {
  display: block;
  padding: 8px 0;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

/* 語系 */
.mobile-nav__lang {
  padding-top: 34.5px;
  border-top: 0.5px solid var(--color-line);
}

.mobile-nav__lang-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  margin-bottom: 32px;
}

.mobile-nav__lang-options {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mobile-nav__lang-options a {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.mobile-nav__lang-options a.active {
  color: var(--color-brown-300);
}

.mobile-nav__lang-options span {
  color: #ffffff;
  font-size: 12px;
}

/* ---- 內容模板(BlockTemplate)相關 ---- */
/* --- 1. 基礎與共用文字規格 --- */
.ck-content p {
    overflow-wrap: break-word; /* 允許長單字或網址換行 */
    word-break: break-all; /* 強制針對連續符號斷行 */
    max-width: 100%; /* 確保段落不超出容器 */
}

/* 2. 限制編輯器內的圖片不可超出容器 */
.ck-content img {
    max-width: 100%;
    height: auto; /* 保持圖片比例不變形 */
}
.has-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block-h1,
.block-h2,
.content-text,
.image-bottom-text {
    font-family: "Noto Sans TC", sans-serif !important;
    color: var(--color-text-500);
    margin: 0;
    white-space: pre-line;
}

.block-h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
}

.block-h2 {
  font-size: 18px;
  font-weight: 400;
  line-height: 23.97px;
  margin-top: 8px;
}

.content-text {
  font-size: 18px;
  line-height: 25.2px;
}

.image-bottom-text {
  font-size: 14px;
  text-align: right;
  margin-top: 4px;
  line-height: 23.97px;
}

/* --- 2. Template 1 樣式 --- */
.template-1 {
  width: 100%;
  margin: 0 auto;
}

.t1-image-container {
  display: flex;
  column-gap: 24px;
  margin-top: 24px;
}

.t1-image-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 462px;
}

.t1-default-img {
  width: 100%;
  aspect-ratio: 462 / 363 !important;
  background-color: transparent !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.t1-content-container {
  margin-top: 24px;
}

/* --- 3. Template 2 樣式 --- */
.template-2 {
  width: 100%;
  margin: 0 auto;
}

.template-2-top-row {
  display: flex;
  column-gap: 36px;
  align-items: center;
}

.template-2-image-wrapper {
  flex: 0 0 558px;
  display: flex;
  flex-direction: column;
}

.template-2-default-img {
  width: 100%;
  height: 438px;
  background-color: transparent !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.template-2-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.template-2-content-container {
  margin-top: 24px;
}

/* --- 4. Template 3 樣式 --- */
.template-3 {
  width: 100%;
  margin: 0 auto;
}

.template-3-top-row {
  display: flex;
  column-gap: 36px;
  align-items: center;
}

.template-3-image-wrapper {
  flex: 0 0 390px;
  display: flex;
  flex-direction: column;
}

.template-3-default-img {
  width: 100%;
  aspect-ratio: 390 / 440 !important;
  background-color: transparent !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.template-3-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.template-3-content-container {
  margin-top: 24px;
}

/* --- 5. Template 4 樣式 --- */
.template-4 {
  width: 100%;
  margin: 0 auto;
}

.t4-image-container {
  display: flex;
  column-gap: 24px;
  margin-top: 24px;
}

.t4-image-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 462px;
}

.t4-default-img {
  width: 100%;
  aspect-ratio: 462 / 550 !important;
  background-color: transparent !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.t4-content-container {
  margin-top: 24px;
}

/* --- 5. Template 5 樣式 --- */
/* Template 5 專屬樣式 */
.template-5 {
  width: 100%;
  margin: 0 auto;
}

.t5-content-container {
  margin-top: 24px;
}

.template-5 img {
  max-width: 100%;
  height: auto;
  display: block;
}

.full-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 關鍵：確保圖片不變形且填滿指定高度 */
  display: block;
  border-radius: 6px;
}

.content-block {
    margin-top: 32px;
}

.content-block:first-child{
    margin-top:0px;
}

/* =========================================
   2. Footer
   ========================================= */

/* ========
   2-1. Footer 主容器
   ======== */
.site-footer {
  position: relative;
  background-image: url("../images/footer-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f5f3f0; /* 底圖載入前備用色 */
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-500);
}

.footer-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 20px 53px;
}

/* ========
   2-2. 上半部：Logo + 社群（XL）
   ======== */
.footer-top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.footer-logo {
  display: flex;
  justify-content: center;
}

.footer-logo__img {
  width: 246px;
  object-fit: contain;
}

/* 社群按鈕（共用外觀） */
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* XL：絕對定位到右下 */
.footer-social--xl {
  position: absolute;
  right: 0;
  bottom: 0;
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-brown-300);
  flex-shrink: 0;
  transition: background 0.2s;
}

.footer-social__link:hover {
  background: rgba(163, 136, 96, 0.1);
}

.footer-social__link img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ========
   2-3. 分隔線
   ======== */
.footer-divider {
  height: 0.5px;
  background: var(--color-brown-300);
  margin: 10px 0 14px;
}

/* ========
   2-4. 資訊區
   ======== */
.footer-body {
  position: relative; /* ← 新增：作為 QR Code 的定位基準 */
  display: flex;
  align-items: flex-start;
  gap: 108px;
}

@media (max-width: 1364px) {
  .footer-body {
    gap: 40px;
  }
}

.footer-col--hotel {
  flex: 0 0 auto;
  min-width: 232px;
}

.footer-col--booking {
  flex: 0 0 auto;
  min-width: 232px;
}

.footer-col--qrcode {
  position: absolute; /* ← 改：脫離 flex 流 */
  left: 50%; /* ← 改：對齊 footer-inner 水平中心 */
  transform: translateX(-50%);
  top: 0;
  flex: none;
  display: flex;
  justify-content: center;
}

.footer-col--series {
  flex: 0 0 auto;
  margin-left: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
}

/* 區塊標題 */
.footer-col__title {
  font-size: 20px;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-500);
  margin: 0 0 16px;
}

/* 條列資訊 */
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-list li {
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-500);
  margin-bottom: 9px;
}

.footer-list li:last-child {
  margin-bottom: 0;
}

/* CHECK IN / OUT 對齊 */
.footer-list__time {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-list__time-label {
  min-width: 100px;
}

/* ========
   2-5. QR Code
   ======== */
.footer-qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 138px;
}

.footer-qrcode__img {
  width: 105px;
  height: 105px;
  object-fit: contain;
}

.footer-qrcode__text {
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-500);
  text-align: center;
  margin: 12px 0 0;
  max-width: 170px;
  line-height: 1.4;
}

/* ========
   2-6. 飯店系列
   ======== */
.footer-series {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.footer-series span {
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  color: var(--color-brown-800);
}

.footer-series__divider {
  width: 1px;
  height: 30px;
  background: #484747;
  flex-shrink: 0;
}

/* 上下堆疊版（SM） */
.footer-series--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* ========
   2-7. Copyright
   ======== */
.footer-copyright {
  font-size: 14px;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-100);
  text-align: center;
  margin: 48px 0 0;
}

/* ========
   2-8. SM 專屬區塊
   ======== */
.footer-sm-block {
  margin-bottom: 32px;
}

.footer-social--sm {
  justify-content: flex-start;
  margin-bottom: 32px;
}

/* =========================================
   3. 首頁 Home
   ========================================= */

/* ── 共用：內容容器（8-3：內容最寬 1920，底圖照常滿版） ── */
.home-container {
  --home-pad: 28px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* ── 共用：區塊標題 ── */
.section-head {
  margin-bottom: 32px;
}

.section-head--center {
  text-align: center;
}

.section-head__title {
  font-family: "Roboto", serif;
  font-size: 44px;
  font-weight: var(--font-weight-light);
  line-height: 1; /* 或 100% */
  letter-spacing: 0.4em;
  color: var(--color-text-500);
  margin: 0 0 4px;
}

.section-head__sub {
  font-family: "Albert Sans", sans-serif;
  font-size: 14px;
  color: var(--color-text-100);
  margin: 0;
}

/* ── 共用：實心按鈕 ── */
.btn-solid {
  display: flex;
  padding: 12px 40px;
  background: #582600;
  color: var(--color-white);
  border-radius: 100px;
  font-size: 20px;
  letter-spacing: 2px;
  text-align: center;
  transition: opacity 0.2s;
  justify-content: center;
}

.btn-solid:hover {
  opacity: 0.85;
  color: var(--color-white);
}

/* ── 共用：英文浮水印（Albert Sans 100 Thin 86px） ── */
.home-watermark {
  position: absolute;
  font-family: "Albert Sans", sans-serif;
  font-weight: 100;
  font-size: 86px;
  line-height: 1; /* ← 新增：Figma line-height 100% */
  letter-spacing: 0; /* ← 新增：Figma letter spacing 0% */
  color: rgba(0, 0, 0, 0.07); /* ← 0.08 改 0.07（#000000 7%） */
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* ===== 2. 熱門搜尋 ===== */
.hot-search {
    background-image: url("../images/footer-bg.png");
    background-size: cover;
    background-position: center;
    padding: 60px 0 80px;
    margin-top: 50px;
}

.hot-search__list {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
}

.hot-search__item {
    flex: 0 1 340px;
    text-decoration: none;
    text-align: center;
}

.hot-search__name {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-500);
    margin: 0 0 12px;
    letter-spacing: 0.05em;
}

.hot-search__img {
    border-radius: 15px;
    overflow: hidden;
    aspect-ratio: 340 / 192;
}

    .hot-search__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.hot-search__item:hover .hot-search__img img {
    transform: scale(1.05);
}




/* ========
   3-1. 輪播圖
   ======== */

.hero {
  position: relative;
  width: calc(100% - 50px); /* 左右各留 25px */
  max-width: 1920px; /* 超過 1920 不再放大 */
  aspect-ratio: 1395 / 628;
  margin: 0 auto; /* 置中，兩側自然各 25px */
  margin-top: 25px;
  overflow: hidden;
  border-radius: 20px;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  display: block;
}

.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero__slide picture,
.hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左下切換膠囊（圖4） */
.hero__nav {
  position: absolute;
  left: 60px;
  bottom: 40px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 100px;
  padding: 4px 8px;
  z-index: 2;
}

.hero__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px 14px;
}

.hero__nav-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.4);
}

/* ========
   3-3. 客房介紹
   ======== */
.rooms {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

/* 浮水印：內容區塊右上、右邊貼齊內容邊界 */
.rooms__watermark {
  right: var(--home-pad);
  left: auto;
  top: 30px; /* 與標題同高，依設計稿微調 */
}

/* 卡片右下角圓形裝飾（xl、md 顯示） */
.rooms__deco-circle {
  position: absolute;
  right: 30px; /* 依圖1微調：圓形離卡片右緣的距離 */
  bottom: -50px;
  width: 86px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* 卡片右下直線（高度 60%，所有斷點） */
.rooms__card::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 0.5px;
  height: 45%;
  background: #d8bc92;
}

.rooms__carousel {
  position: relative;
}

.rooms__slide {
  display: none;
  position: relative;
}

.rooms__slide.is-active {
  display: block;
}

/* 照片不滿版，右側留空間給卡片跨出 */
.rooms__photo {
  display: block;
  width: 76.8%;
  height: 560px;
  object-fit: cover;
}

/* 資訊卡：跨在照片右緣上，上下接近照片高度 */
.rooms__card {
  position: absolute;
  right: 0;
  top: 32px;
  bottom: 32px;
  width: 34%;
  min-width: 360px;
  max-width: 32.15%;
  background: rgba(106, 78, 37, 1);
  color: #fff;
  padding: 40px;
  padding-bottom: 67px;
  display: flex;
  flex-direction: column;
}

/* 標題區 + 短分隔線 */
.rooms__card-head {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.rooms__card-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 140px;
  height: 0.5px;
  background: rgba(255, 255, 255, 0.6);
}

.rooms__card-en {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  line-height: 1em;
  margin: 0 0 5px;
}

.rooms__card-name {
  font-family: "Roboto", serif;
  font-size: 32px;
  line-height: 1em;
  margin: 0;
}

.rooms__card-desc {
  font-size: 16px;
  line-height: 28px;
  margin: 0 0 24px;
}

/* meta：單行排列、無框線 */
.rooms__card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 16px;
  line-height: 28px;
}

.rooms__card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.rooms__card-meta-item img {
  width: 24px;
  height: 24px;
}

/* 動作連結：推到卡片左下角 */
.rooms__card-actions {
  margin-top: auto;
  text-align: center;
}

.rooms__card-actions a {
  color: #fddfb0;
  font-size: 17px;
}

.rooms__card-actions-sep {
  margin: 0 8px;
  color: #fddfb0;
}

/* PREV / NEXT（圖5：文字 + 長箭頭線） */
.carousel-textnav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  margin-top: 40px;
}

.carousel-textnav__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Albert Sans", sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--color-text-100);
}

.carousel-textnav__btn:hover {
  color: var(--color-text-500);
}

.carousel-textnav__arrow {
  position: relative;
  display: inline-block;
  width: 72px;
  height: 1px;
  background: currentColor;
}

.carousel-textnav__arrow--left::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  width: 7px;
  height: 7px;
  transform: rotate(-45deg);
}

.carousel-textnav__arrow--right::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
}

/* ── 切換效果：照片先進場，卡片延遲一拍跟上 ── */
@keyframes roomFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rooms__slide.is-active .rooms__photo {
  animation: roomFadeIn 1.5s ease both;
}

.rooms__slide.is-active .rooms__card {
    animation: roomFadeIn 1.5s ease both;
}
/* ========
   3-4. 餐飲饗宴
   ======== */
.dining {
  position: relative;
  padding-top: 100px;
  padding-left: 20px;
  padding-right: 56px;
  overflow: visible;
}

.dining .section-head {
  margin-bottom: 16px;
}

.dining__watermark {
  left: var(--home-pad);
  right: auto;
  top: -60px; /* 原 40 − section 上 padding 100 */
}

/* 左下半圓裝飾 */
.dining__deco-circle {
  position: absolute;
  bottom: -150px;
  left: max(-96px, calc((100vw - 1920px) / 2));
  width: 191px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.dining__inner {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.dining__text {
  flex: 0 0 405px;
}

.dining__desc {
  font-size: 16px;
  line-height: 29px;
  color: var(--color-text-500);
  margin-bottom: 16px;
}

/* xl 兩顆直排按鈕 */
.dining__btns {
  display: flex;
  flex-direction: column;
  gap: 47px;
  margin-top: 64px;
  width: 70%;
  max-width: 70%;
  justify-self: center;
}

/* md/sm 合併按鈕（預設隱藏） */
.dining__btn-merged {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 40px;
  background: #582600;
  border-radius: 100px;
  font-size: 16px;
  letter-spacing: 2px;
}

.dining__btn-merged a {
  color: var(--color-white);
}

.dining__btn-merged-sep {
  color: rgba(255, 255, 255, 0.6);
}

.dining__gallery {
  flex: 1;
  min-width: 0;
  position: relative; /* ← 給小圓盤定位用 */
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.dining__img {
  flex: 1 1 0;
  min-width: 0;
  width: min(23.61vw, 340px); /* ← 原 clamp(340px, 23.61vw, 453px) */
  aspect-ratio: 267 / 590;
  object-fit: cover;
}

/* 依設計稿高低差：第 2 張最高、第 3 張略低、第 1 張最低 */
.dining__img--1 {
}

.dining__img--2 {
  margin-top: -100px;
}

.dining__img--3 {
  margin-top: -50px;
}

/* 疊在第 2、3 張下方的小圓盤 */
.dining__deco-dish {
  position: absolute;
  left: 55%;
  bottom: 0;
  width: min(11.11vw, 160px); /* ← 原 clamp(160px, 11.11vw, 213px) */
  height: auto;
  z-index: 1;
}

/* ========
   3-5. 商務會議 & 璀璨婚宴
   ======== */
.biz-wedding {
  position: relative;
  padding: 100px 0;
  overflow-x: clip; /* ← 水平方向：真正裁切，且不產生捲動容器 */
  overflow-y: visible; /* ← 垂直方向：放行，讓半圓凸出 30px 壓到下個區塊 */
  z-index: 2; /* 維持：疊在 gallery 之上 */
}

.biz-wedding .section-head {
  margin-bottom: 18px;
}

.biz-wedding__watermark {
  right: calc(var(--home-pad) + 200px);
  left: auto;
  top: 25px;
}

.biz-wedding__deco-circle {
  position: absolute;
  bottom: -30px;
  right: max(-61px, calc((100vw - 1920px) / 2));
  width: 122px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

/* xl：左右兩直欄，整體置中 */
.biz-wedding__grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.biz-wedding__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 左欄：商務按鈕 → 婚宴圖片 間距 54px */
.biz-wedding__col--left {
  gap: 54px;
}

/* 右欄：商務圖片 → 婚宴文字 間距 36px */
.biz-wedding__col--right {
  gap: 36px;
}

.biz-wedding__text {
  max-width: 528px; /* 文字欄寬度，可依設計稿微調 */
}

.biz-wedding__desc {
  font-size: 16px;
  line-height: 35px;
  margin-bottom: 18px;
}

/* 圖片：依設計稿比例縮放 + 1920 封頂 */
.biz-wedding__img {
  min-width: 0;
}

.biz-wedding__img--business {
  width: min(40.63vw, 585px); /* ← 780 改 585（設計稿原值） */
  aspect-ratio: 585 / 360;
}

.biz-wedding__img--wedding {
  width: min(34.17vw, 492px); /* ← 656 改 492 */
  aspect-ratio: 492 / 328;
}

.biz-wedding__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
/* ========
   3-6. 光影時刻
   ======== */
.gallery {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background-image: url("../images/footer-bg.png");
  background-size: cover;
  background-position: center;
  background-color: #efe5d8;
}

/* xl 兩側直式浮水印：貼齊內容區塊左右外側 */
.gallery__watermark--left {
  right: 100%; /* 自己的右緣貼齊內容左緣 */
  left: auto;
  margin-right: 32px; /* 與內容的間距，依設計稿微調 */
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
}

.gallery__watermark--right {
  left: 100%; /* 自己的左緣貼齊內容右緣 */
  right: auto;
  margin-left: 32px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
}

/* 3×3 環繞式排版（圖5）
   欄：284 | 284 | 284，列：204 | 250 | 204，間隙 10（皆為 1440 設計稿數值，等比縮放） */
.gallery__layout {
  position: relative;
  width: min(60.56vw, 872px); /* ← 1163 改 872 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 204fr 250fr 204fr;
  grid-template-areas:
    "textL vid1   vid2"
    "textL center textR"
    "vid3  vid4   textR";
  gap: clamp(8px, 0.69vw, 10px); /* ← 13 改 10 */
  aspect-ratio: 872 / 678;
}

/* 讓 foreach 產生的 4 個 item 直接參與外層 grid */
.gallery__grid {
  display: contents;
}

.gallery__item:nth-child(1) {
  grid-area: vid1;
}

.gallery__item:nth-child(2) {
  grid-area: vid2;
}

.gallery__item:nth-child(3) {
  grid-area: vid3;
}

.gallery__item:nth-child(4) {
  grid-area: vid4;
}

/* 咖啡色文字卡（284×464） */
.gallery__text {
  background: var(--color-brown-300);
  color: var(--color-white);
  /* 上下：768→28.5px、1440→67px；左右：768→19px、1440→41.5px */
  padding: clamp(16px, 5.73vw - 15.5px, 67px)
    clamp(12px, 3.35vw - 6.7px, 41.5px);
  display: flex;
  flex-direction: column;
  gap: 33px;
  overflow: hidden;
}

.gallery__text--tl {
  grid-area: textL;
}

.gallery__text--br {
  grid-area: textR;
}

.gallery__text p {
  font-size: 20px;
  line-height: 33px;
  color: var(--color-white);
  white-space: pre-line;
  margin: 0;
}

@media (max-width: 1284px) {
  .gallery__text p {
    font-size: 18px;
    line-height: 30px;
  }
}

/* 中央標題 */
.gallery__center {
  grid-area: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery__center .section-head {
  margin-bottom: 0;
}

/* 影片格（284×204，尺寸交給 grid 控制） */
.gallery__item {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery__item iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.gallery__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.gallery__item:hover .gallery__play {
  opacity: 0.85;
}

.gallery__item.is-playing {
  cursor: default;
}

.gallery__item.is-playing img,
.gallery__item.is-playing .gallery__play {
  visibility: hidden;
}
/* ========
   3-7. 在地旅行
   ======== */
.travel {
  position: relative;
  padding: 100px 0 120px;
  overflow: hidden;
}

.travel .section-head {
  margin-bottom: 66px;
  position: relative;
  display: inline-block; /* 寬度縮至標題文字寬，右邊界=標題右邊界 */
  padding: 0px 50px 50px 50px;
}

.travel__watermark {
  left: 50%; /* 左邊界 = 標題右邊界 + 80px */
  right: auto;
  bottom: 0; /* 貼齊標題區塊下緣（右下方） */
  top: 50px;
}

.travel__inner {
  position: relative; /* ← 新增：縮圖欄的定位基準 */
  width: min(100%, 92.64vw, 1334px); /* ← 1779 改 1334 */
  margin: 0 auto;
  display: flex;
  gap: clamp(16px, 1.8vw, 26px); /* ← 35 改 26 */
  align-items: flex-start; /* ← 改回 flex-start，取消 stretch */
  /* ← 新增：左側留出縮圖欄的空間（欄寬 + 間距） */
  padding-left: calc(
    min(9.58vw, 138px) + clamp(16px, 1.8vw, 26px)
  ); /* ← 184/35 改 138/26 */
}

.travel__thumbs,
.travel__thumbs--scroll {
  /* ← 改：絕對定位貼齊容器左側、上下緣 */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 40px; /* 大約扣掉大圖下方 caption 的高度 */
  width: min(9.58vw, 138px); /* ← 184 改 138 */
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 40px,
    #000 calc(100% - 40px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 40px,
    #000 calc(100% - 40px),
    transparent 100%
  );
}

.travel__thumbs::-webkit-scrollbar {
  display: none;
}

.travel__thumb {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  flex-shrink: 0;
}

/* 縮圖：1440 時 117，選中 138，等比縮放 */
.travel__thumb-img {
  position: relative;
  display: block;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  transition: width 0.25s, height 0.25s;
}

/* Figma inner shadow：上下左右各一道 0/±4、blur 8、#000 40% */
.travel__thumb-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 -4px 8px rgba(0, 0, 0, 0.4), inset 4px 0 8px rgba(0, 0, 0, 0.4),
    inset -4px 0 8px rgba(0, 0, 0, 0.4);
}

.travel__thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.travel__thumb.is-active .travel__thumb-img {
  width: 138px;
  height: 138px;
}

.travel__thumb-name {
  font-size: 13px;
  color: var(--color-text-500);
}

/* 中間文字：1440 時 340 寬 */
.travel__content {
  flex: 0 0 min(23.61vw, 340px); /* ← 453 改 340 */
  padding-top: 48px;
}

.travel__title {
  font-family: "Roboto", serif;
  font-size: 30px;
  letter-spacing: 6px;
  color: var(--color-text-500);
  margin: 0 0 16px;
}

.travel__arrow {
  margin-left: 8px;
}

.travel__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-500);
  margin: 0 0 16px;
}

.travel__meta img {
  width: 18px;
  height: 18px;
}

.travel__slogan {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  margin: 0 0 16px;
}

.travel__desc {
  font-size: 15px;
  line-height: 2;
  margin: 0;
}

/* 右側筆刷遮罩大圖：1440 時 804×714 */
.travel__photo {
  flex: 1;
  min-width: 0;
  text-align: center;
  justify-items: center;
}

.travel__photo-mask {
  display: block;
  -webkit-mask-image: url("../images/mask.png");
  mask-image: url("../images/mask.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.travel__photo-mask img {
  display: block;
  width: 100%;
  aspect-ratio: 804 / 714;
  object-fit: cover;
  /* 切換效果 */
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* 切換中：淡出 + 微縮放 */
.travel__photo-mask.is-switching img {
  opacity: 0;
  transform: scale(1.04);
}

.travel__photo-caption {
  font-size: 16px;
  color: var(--color-text-500);
  margin-top: 24px;
  max-width: 428px;
}

/* =========================================
   4.內頁 Banner
   ========================================= */
.page-banner {
  /* 三斷點長寬比（由 media query 切換），滿版貼邊、無上限持續放大 */
  --banner-ratio: 1440 / 481;
  position: relative;
  width: 100%;
  aspect-ratio: var(--banner-ratio);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end; /* 文字靠下 */
}

.page-banner__inner {
  padding: 0 55px 45px;
  color: var(--color-white);
}

/* 三個斷點文字大小相同，所以字級不放進 media query */
.page-banner__title {
  font-family: "Roboto", sans-serif;
  font-size: 44px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.31em;
  margin: 0 0 4px;
  line-height: 100%;
  color: #ffffff;
}

.page-banner__sub {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

/* ── 共用版（IsShared = true）：壓花紋底圖、文字正中央 ── */
.page-banner--shared {
  /* 高度目前與專屬版相同；之後若要不同，改這個變數即可
       （md/sm 也可在對應斷點內覆寫 .page-banner--shared 的 --banner-ratio） */
  --banner-ratio: 1440 / 166;
  background-image: url("../images/footer-bg.png");
  background-color: #efe5d8; /* 底圖載入前備用色 */
  align-items: center;
  justify-content: center;
}

    .page-banner--shared .page-banner__inner {
    padding: 0 16px;
    text-align: center;
    color: var(--color-text-300);
}

.page-banner--shared .page-banner__title {
  padding: 0 16px;
  text-align: center;
  color: var(--color-text-300);
}

.page-banner--shared .page-banner__sub {
  color: var(--color-text-300);
}

/* =========================================
   5, 內頁分類導覽 PageNav
   ========================================= */
/* ── xl：與 Banner 間距 21.5、與底線間距 24.5、底線 1200/1440 ── */
.page-nav {
  margin-top: 21.5px;
}

.page-nav__list {
  list-style: none;
  margin: 0 0 24.5px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-nav__item {
  padding: 0px 10px;
  border-bottom: 2px solid transparent; /* 佔位，避免 active 時跳動 */
}

.page-nav__item.is-active {
  color: var(--color-brown-300);
  border-bottom-color: var(--color-brown-300);
}

.page-nav__link {
  display: inline-block;
  font-size: 16px;
  color: var(--color-brown-300);
  padding: 4px 0px;
  transition: color 0.2s;
  white-space: nowrap;
}

.page-nav__link:hover {
  color: var(--color-brown-200);
}

/* item 間垂直分隔線：xl 左右各 40px */
.page-nav__divider {
  width: 0.75px;
  height: 22px;
  background: var(--color-line);
  margin: 0 40px;
  flex-shrink: 0;
}

/* 底線：1440 時 1200 寬（83.33vw），置中，跟著視窗縮放 */
.page-nav__line {
  width: min(83.33vw, 1200px);
  height: 1px;
  background: var(--color-line);
  margin: 0 auto;
}

/* sm 下拉版預設隱藏 */
.page-nav-select {
  display: none;
}
/* =========================================
   5-1. 共用分頁 Pagination
   ========================================= */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 78px;
}

.pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-brown-300);
  color: var(--color-brown-300);
  font-family: "Albert Sans", sans-serif;
  font-size: 16px;
  transition: all 0.2s;
}

.pagination__page:hover {
  background: rgba(163, 136, 96, 0.1);
  color: var(--color-brown-300);
}

.pagination__page.is-active {
  background: var(--color-brown-300);
  color: var(--color-white);
}

.pagination__ellipsis {
  color: var(--color-brown-300);
  font-family: "Albert Sans", sans-serif;
  letter-spacing: 2px;
  user-select: none;
}

.pagination__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-brown-300);
  transition: color 0.2s;
}

.pagination__arrow:hover {
  color: var(--color-brown-800);
}

/* =========================================
   6. 飯店介紹內頁 hotel-intro
   ========================================= */
.custom-page-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 91px 68px 91px;
}

/* xl：左右兩直欄，交錯由欄內容高度自然形成（同商務/婚宴的做法） */
.hotel-intro__grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: min(2.43vw, 35px); /* 35 / 1440 */
}

.hotel-intro__col {
  display: flex;
  flex-direction: column;
}

/* 欄寬 = 該欄圖片寬，文字自動同寬對齊 */
.hotel-intro__col--left {
  width: min(40.97vw, 590px); /* 590 / 1440 */
  gap: 116px; /* 文字1 與 圖A 的間距 */
}

.hotel-intro__col--right {
  width: min(47.15vw, 679px); /* 679 / 1440 */
  gap: 64px; /* 圖B 與 文字2 的間距 */
}

.hotel-intro__img {
  width: 100%;
}

.hotel-intro__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.hotel-intro__img--a {
  aspect-ratio: 590 / 373;
}

.hotel-intro__img--b {
  aspect-ratio: 679 / 439;
}

/* 文字 */
.hotel-intro__title {
  font-family: "Roboto", sans-serif;
  font-size: 44px;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.31em;
  line-height: 1em;
  color: var(--color-text-500);
  margin: 0 0 4px;
}

.hotel-intro__sub {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: var(--color-text-100);
  margin: 0 0 16px;
}

.hotel-intro__desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-500);
  margin: 0 0 36px;
}

.hotel-intro__desc:last-child {
  margin-bottom: 0;
}

/* =========================================
   7. 休閒設施列表 facility-list
   ========================================= */
/* xl：左右 62px，超過 1440 置中（間距自然加大）；1 row 2 個 */
.facility-list {
  max-width: 1440px;
  margin: 0 auto;
  padding: 78px 62px 100px;
}

.facility-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 36px;
  row-gap: 78px;
}

.facility-card {
  display: block;
  cursor: pointer;
}

.facility-card .facility-card__img img {
  transition: transform 0.4s ease;
}

.facility-card:hover .facility-card__img img {
  transform: scale(1.05); /* 圖片微放大 */
}

.facility-card .facility-card__name {
  transition: color 0.2s;
}

.facility-card:hover .facility-card__name {
  color: var(--color-brown-300);
}

/* 圖片：1440 時 640×380 */
.facility-card__img {
  width: 100%;
  aspect-ratio: 640 / 380;
  overflow: hidden;
}

.facility-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.facility-card__body {
  padding: 24px 0px 24px 20px;
}

/* 標題列：名稱 + 樓層徽章 */
.facility-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.facility-card__name {
  font-family: "Roboto", sans-serif;
  font-size: 44px;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.31em;
  line-height: 1em;
  color: var(--color-text-500);
  margin: 0;
}

/* 樓層徽章（17F / 百貨4F） */
.facility-card__place {
  flex-shrink: 0;
  background: var(--color-brown-300);
  color: var(--color-white);
  font-size: 24px;
  padding: 11px 8px;
  white-space: nowrap;
}

.facility-card__sub {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: var(--color-text-100);
  margin: 4px 0 16px;
}

.facility-card__intro {
  font-size: 16px;
  line-height: 35px;
  color: var(--color-text-500);
  white-space: pre-line;
  margin: 0 0 20px;
}

/* 專線 / 營業時間 */
.facility-card__info {
  list-style: none;
  margin: 0;
  padding: 0;
}

.facility-card__info li {
  display: flex;
  align-items: flex-start; /* ← 改：多行時 icon 與標籤停在第一行 */
  gap: 0px;
  font-size: 16px;
  line-height: 24px; /* ← 改：多行需要正常行高，1em 會疊行 */
  color: var(--color-text-500);
  margin-bottom: 10px;
}
.facility-card__info li img {
    margin-right: 4px;
}

.facility-card__info li:last-child {
  margin-bottom: 0;
}

/* 標籤：不換行、不被壓縮 */
.facility-card__info-label {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 值：佔剩餘寬度，換行時對齊自己的左緣（即標籤右側） */
.facility-card__info-value {
  flex: 1;
  min-width: 0;
  white-space: pre-line; /* 後台輸入的換行照常生效 */
}

/* =========================================
   8. 內頁共用版型 detail-layout（左文字 + divider + 右內容）
   ========================================= */
.detail-layout {
  max-width: 1440px;
  margin: 0 auto;
  padding: 49px 50px 39px; /* 與 banner 49、footer 39、左右 50 */
  display: flex;
  align-items: stretch; /* divider 撐滿內容高度 */
}

/* 左：文字區塊（xl 卷動時固定顯示） */
.detail-layout__side {
    flex: 0 0 min(36.11vw, 520px); /* 520 / 1440 */
    align-self: flex-start;
    position: sticky;
    top: calc(var(--header-height-xl) + 4px); /* 依 header 高度微調 */
}

/* 垂直 divider：高度 = 內容高度（stretch），與左區距離 9px */
.detail-layout__divider {
  flex: 0 0 0.5px;
  background: var(--color-line);
  margin-left: 9px;
  margin-right: 50px;
}

/* 右：主要內容 */
.detail-layout__main {
  flex: 0 0 min(53.82vw, 775px); /* 775 / 1440 */
  min-width: 0;
}
 
/* ── 共用表格（超寬自動橫向滑動，逐一獨立） ── */
.detail-table {
  margin-top: 40px;
}

.detail-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.detail-table table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table th,
.detail-table td {
  padding: 8px 40px; /* 三斷點相同 */
  text-align: center;
  white-space: nowrap; /* 關鍵：不換行 → 超寬時觸發該表格的橫向滑動 */
  font-size: 16px;
  border: 1px solid var(--color-gray-600);
}
.detail-table td {
  border: 1px solid var(--color-line);
}

.detail-table th {
  background: var(--color-gray-600);
  color: var(--color-white);
  font-weight: var(--font-weight-normal);
}

.detail-table td {
  background: var(--color-white);
  color: var(--color-text-500);
}

/* =========================================
   8-1. 休閒設施內頁 facility-detail
   ========================================= */
.facility-detail__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

/* 圖片輪播：775×417 */
.facility-detail__carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 775 / 417;
  overflow: hidden;
}

.facility-detail__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.facility-detail__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.facility-detail__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右下切換膠囊（同首頁 hero 語彙） */
.facility-detail__nav {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 100px;
  padding: 2px 6px;
  z-index: 2;
}

.facility-detail__nav button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px 10px;
}

.facility-detail__nav-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.4);
}

.facility-detail__desc {
  font-size: 16px;
  line-height: 35px;
  color: var(--color-text-500);
  white-space: pre-line;
  margin: 32px 0 0;
}

/* =========================================
   9. 404 頁面 error-page
   ========================================= */
.error-page {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 扣掉 header 與 footer 後至少撐滿一個畫面高度 */
  min-height: calc(100vh - var(--header-height-xl) - 200px);
  padding: 100px 28px;
  text-align: center;
}

/* 右下角半圓（同首頁語彙：貼齊視窗右緣，>1920 貼齊 1920 內容緣） */
.error-page__deco-circle {
  position: absolute;
  bottom: 40px;
  right: max(-61px, calc((100vw - 1920px) / 2));
  width: 122px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.error-page__inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

/* 大字 404：浮水印同款字體，但濃一點作為主視覺 */
.error-page__code {
  font-family: "Albert Sans", sans-serif;
  font-weight: 100;
  font-size: 160px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color-brown-300);
  margin: 0 0 8px;
  user-select: none;
}

.error-page .section-head {
  margin-bottom: 24px;
}

.error-page__desc {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text-500);
  margin: 0 0 40px;
}

.error-page__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.error-page__actions .btn-solid {
  min-width: 240px;
}

.error-page__back {
  font-size: 16px;
  color: var(--color-brown-300);
  letter-spacing: 2px;
  transition: color 0.2s;
}

.error-page__back:hover {
  color: var(--color-brown-800);
}

/* =========================================
   10. 榮譽事蹟 awards
   ========================================= */
.awards {
  --awards-year-w: 110px; /* 年份欄寬 */
  --awards-line-x: calc(
    var(--awards-year-w) + 24px
  ); /* 垂直線位置（年份與內容間距 48 的中點） */
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 80px 0; /* 與 PageNav 48、左右 80、與 Footer 0 */
  display: flex;
  gap: 24px;
}

/* 左下人物圖：476×704，貼齊區塊底部 */
.awards__figure {
  flex: 0 0 min(33.06vw, 476px); /* 476 / 1440 */
  align-self: flex-end;
}

.awards__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 476 / 704;
  object-fit: cover;
  object-position: top;
}

/* 右側時間軸 */
.awards__timeline {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-bottom: 24px;
}

/* 貫穿整個時間軸的垂直線 */
.awards__timeline::before {
  content: "";
  position: absolute;
  left: var(--awards-line-x);
  top: 12px;
  bottom: 0;
  width: 1px;
  background: var(--color-line);
}

/* 年份節點：年份欄 + 內容欄 */
.awards__node {
  position: relative;
  display: grid;
  grid-template-columns: var(--awards-year-w) 1fr;
  column-gap: 52px;
  margin-bottom: 38px;
}
.awards__node:first-child {
  margin-top: 30px;
}
.awards__node:first-child::before {
  top: 30px;
}
.awards__node:first-child .awards__year {
  position: relative;
  top: 20px;
}

.awards__node:last-child {
  margin-bottom: 0;
}

/* 線上的圓點：對齊年份第一行 */
.awards__node::before {
  content: "";
  position: absolute;
  left: calc(var(--awards-line-x) - 4px);
  top: 15px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-brown-200);
  z-index: 1;
}

.awards__year {
  font-family: "Albert Sans", sans-serif;
  font-weight: var(--font-weight-light);
  font-size: 40px;
  line-height: 1;
  color: var(--color-text-500);
  text-align: right;
  margin: 0;
}

/* 單筆獎項：文字 + 固定 82px 圖片欄 */
.awards__item {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 27px;
}

.awards__item:last-child {
  margin-bottom: 0;
}

.awards__item-text {
  min-width: 0;
}

.awards__item-name {
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  font-weight: var(--font-weight-normal);
  line-height: 1em;
  color: var(--color-text-500);
  margin: 0 0 4px;
}

.awards__item-desc {
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-500);
  white-space: pre-line;
  margin: 0;
}

/* 圖片欄：固定 82px（不隨視窗縮放），無圖也佔位使所有圖片對齊 */
.awards__item-img {
  flex: 0 0 82px;
  width: 82px;
}

.awards__item-img img {
  display: block;
  width: 82px;
  height: 76px;
  object-fit: contain;
}

/* =========================================
   11. 藝術典藏 art-collection
   ========================================= */
/* xl：上下 40、左右 173，1 row 2 col、間距 50 */
.art-collection {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 173px;
}

.art-collection__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px; /* 同 row 等高由 grid 預設 stretch 達成 */
}

.art-card {
  padding: 32px;
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}

.art-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

/* 棋盤底色（2 col）：第 1 row 白灰、第 2 row 灰白…
       4 個一組：第 1、4 個白，第 2、3 個灰 */
.art-card:nth-child(4n + 1),
.art-card:nth-child(4n + 4) {
  background: var(--color-white);
  border: 1px solid #e9e9e9;
  border-radius: 10px;
}

.art-card:nth-child(4n + 2),
.art-card:nth-child(4n + 3) {
  background: #fafafa;
  border-radius: 10px;
}

.art-card__name {
  font-family: "Roboto", sans-serif;
  font-size: 44px;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.31em;
  line-height: 1;
  color: var(--color-text-500);
  margin: 0 0 16px;
}

.art-card__desc {
  font-size: 16px;
  line-height: 29px;
  color: var(--color-text-500);
  white-space: pre-line;
  margin: 0 0 22px;
}

/* 圖片：寬 = 內容寬，高依比例自動 */
.art-card__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 燈箱 Lightbox ── */
.lightbox {
  display: flex; /* ← 改：常駐 flex，用透明度控制顯示 */
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.85);
  /* 隱藏狀態 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

/* 上方工具列：滿版、半透明黑 */
.lightbox__toolbar {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 20px;
}

.lightbox__toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
}

.lightbox__toolbar button:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* 中間：圖片置中，最大不超過可視範圍，等比縮放不變形 */
.lightbox__body {
  flex: 1;
  min-height: 0; /* 讓 flex 子項可以縮小，max-height 才有效 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto; /* 放大超出時可捲動查看 */
  padding: 16px;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.25s ease;
  user-select: none;
}

/* 下方名稱列：滿版、半透明黑 */
.lightbox__caption {
  flex-shrink: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  text-align: center;
  padding: 12px 20px;
  margin: 0;
}

@keyframes lightboxImgIn {
  from {
    opacity: 0;
    scale: 0.92; /* 用獨立的 scale 屬性，不佔用 transform */
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

.lightbox.is-open .lightbox__img {
  animation: lightboxImgIn 0.4s ease 0.1s both;
}

/* =========================================
   12. 媒體部落客列表 media-list
   ========================================= */
/* xl：左右 154.5、與 Banner/Footer 各 50，1 row 3 col、間距 55 */
.media-list {
  max-width: 1440px;
  margin: 0 auto;
  padding: 50px 154.5px;
}

.media-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center; /* 欄寬固定 340，整體置中 */
  gap: 55px;
}

.media-card {
  display: block;
  cursor: pointer;
}

/* 圖片：340×330 等比 */
.media-card__img {
  width: 100%;
  aspect-ratio: 340 / 330;
  overflow: hidden;
}

.media-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.media-card:hover .media-card__img img {
  transform: scale(1.05);
}

/* 日期列：日期 + 年份 + divider + 類別 */
.media-card__meta {
  display: flex;
  align-items: center;
  margin: 16px 0 16px;
}

.media-card__date {
  font-family: "Albert Sans", sans-serif;
  font-weight: var(--font-weight-light);
  font-size: 48px;
  line-height: 1;
  color: var(--color-text-500);
}

.media-card__year {
  font-family: "Albert Sans", sans-serif;
  font-size: 16px;
  color: var(--color-text-500);
  margin-left: 8px;
  align-self: end;
}

/* 年份與類別間的 divider：兩側各 16px */
.media-card__divider {
  flex: 1;
  height: 1px;
  background: var(--color-line);
  margin: 0 16px;
  align-self: center;
}

.media-card__type {
  font-size: 16px;
  color: var(--color-brown-300);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 標題：最多兩行，超過以 ... 呈現 */
.media-card__title {
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  color: var(--color-text-500);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.media-card:hover .media-card__title {
  color: var(--color-brown-300);
}

/* =========================================
   13. 熱門搜尋列表 news-list
   ========================================= */
/* xl：左右 122、與 Banner/Footer 各 52，1 row 3 col、間距 55 */
.news-list {
  max-width: 1440px;
  margin: 0 auto;
  padding: 52px 122px;
}

.news-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 360px));
  justify-content: center; /* 欄寬固定 360，整體置中 */
  gap: 55px;
}

.news-card {
  display: block;
  cursor: pointer;
}

/* 圖片：360×202 等比，圓角 */
.news-card__img {
  width: 100%;
  aspect-ratio: 360 / 202;
  overflow: hidden;
  border-radius: 10px;
}

.news-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.news-card:hover .news-card__img img {
  transform: scale(1.05);
}

/* 日期列：日期 + 年份 + divider + 類別 */
.news-card__meta {
  display: flex;
  align-items: center;
  margin: 16px 0;
}

.news-card__date {
  font-family: "Albert Sans", sans-serif;
  font-weight: var(--font-weight-light);
  font-size: 48px;
  line-height: 1;
  color: var(--color-text-500);
}

.news-card__year {
  font-family: "Albert Sans", sans-serif;
  font-size: 16px;
  color: var(--color-text-500);
  margin-left: 8px;
  align-self: end;
}

/* 年份與類別間的 divider：兩側各 16px */
.news-card__divider {
  flex: 1;
  height: 1px;
  background: var(--color-line);
  margin: 0 16px;
  align-self: center;
}

.news-card__type {
  font-size: 16px;
  color: var(--color-brown-300);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 標題：最多兩行，超過以 ... 呈現（hover 全文由 title 屬性顯示） */
.news-card__title {
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  color: var(--color-text-500);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.news-card:hover .news-card__title {
  color: var(--color-brown-300);
}

/* =========================================
   14. 熱門搜尋內頁 news-detail
   ========================================= */
/* xl：左右 120、與 Banner/Footer 各 45 */
.news-detail {
  max-width: 1440px;
  margin: 0 auto;
  padding: 45px 120px;
  display: flex;
  flex-direction: column;
}

/* 標題 + 日期 */
.news-detail__head {
  order: 1;
  text-align: center;
  margin-bottom: 24px;
}

.news-detail__title {
  font-family: "Roboto", sans-serif;
  font-size: 38px;
  font-weight: var(--font-weight-normal);
  line-height: 1;
  color: var(--color-text-500);
  margin: 0 0 18px;
}

.news-detail__date {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: var(--color-text-500);
    margin: 0;
}

/* 主圖：1200×673 等比 */
.news-detail__img {
  order: 2;
  width: 100%;
  aspect-ratio: 1200 / 673;
  overflow: hidden;
}

.news-detail__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 內容區塊 */
.news-detail__content {
    order: 3;
    width: 100%;
    margin-top: 40px;
    padding-left: 70px;
    padding-right: 70px;
}

.news-detail__content .blocks-container {
  width: 100%;
}

.news-share-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    min-width: 140px;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

    .news-share-menu.show {
        display: block;
    }

    .news-share-menu li a {
        display: block;
        padding: 8px 16px;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        transition: background-color 0.2s;
    }

        .news-share-menu li a:hover {
            background-color: var(--color-brown-300);
        }
/* =========================================
   15. 商務會議 meeting
   ========================================= */
/* 外層：滿版，只負責裁切（裁切線 = 視窗邊緣） */
.meeting-hero {
    position: relative;
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
}

/* 內層：1440 置中，排版與圖片定位的基準 */
.meeting-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 0 100px 120px;
    min-height: 620px;
}

.meeting-hero__text {
    width: 540px; /* xl 固定寬，不隨視窗縮放 */
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.meeting-hero__title {
    font-family: "Roboto", sans-serif;
    font-size: 44px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.15em;
    line-height: 1;
    color: var(--color-text-500);
    margin: 0 0 8px;
}

.meeting-hero__en {
    font-family: "Roboto", sans-serif;
    font-size: 44px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.15em;
    line-height: 1;
    color: var(--color-text-500);
    margin: 0 0 30px;
}

.meeting-hero__slogan {
    font-size: 20px;
    color: var(--color-text-500);
    letter-spacing: 0.20em;
    margin: 0 0 30px;
}

.meeting-hero__desc {
    font-size: 16px;
    line-height: 35px;
    color: var(--color-text-500);
    white-space: pre-line;
    margin: 0;
}

/* 右上角圓角菱形：貼齊視窗右邊界 */
.meeting-hero__img {
    position: absolute;
    top: -210px;
    right: -320px; /* ← 負值讓菱形右半超出視窗被裁掉，露出的斜面貼齊右緣；依設計稿微調 */
    left: auto;
    width: 829px;
    height: 643px;
    border-radius: 88px;
    transform: rotate(135deg);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

    .meeting-hero__img img {
        position: absolute;
        top: 50%;
        left: 85%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) rotate(-135deg);
        object-fit: cover;
        display: block;
    }

/* ── 2. 場地區塊 ── */
/* 外層：滿版，只負責底圖 */
.meeting-site {
    position: relative;
}

/* 內層：內容最大 1440 置中，左右間距在這層 */
.meeting-site__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 38px 168px; /* ← 從外層搬過來 */
    display: flex;
    align-items: center;
    gap: 78px;
}

/* 奇數：有底圖 */
.meeting-site--odd {
    position: relative;
    background-image: url("../images/page-bg.png");
    background-position: center;
    background-color: rgba(255, 255, 255, 0.6);
    background-blend-mode: lighten;
}

/* 偶數：文字在左、相簿在右 */
.meeting-site--even .meeting-site__inner {
    flex-direction: row-reverse;
}

/* 相簿：左上、右上、下方大圖 */
.meeting-site__album {
    flex: 0 0 min(30.42vw, 438px); /* 438 / 1440 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: min(1.18vw, 17px); /* 17 / 1440 */
}

/* 觀看相簿按鈕（左上格） */
.meeting-site__album-btn {
    aspect-ratio: 220 / 240;
    background: var(--color-brown-300);
    border: none;
    border-radius: 10px;
    color: var(--color-white);
    font-size: 20px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: opacity 0.2s;
}

    .meeting-site__album-btn:hover {
        opacity: 0.85;
    }

.meeting-site__album-cell {
    overflow: hidden;
    border-radius: 10px;
}

    .meeting-site__album-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* 右上格：220×240 */
.meeting-site__album-cell--2 {
    aspect-ratio: 220 / 240;
}

/* 下方大圖：橫跨兩欄，438×177 */
.meeting-site__album-cell--3 {
    grid-column: 1 / -1;
    aspect-ratio: 438 / 177;
}

/* 文字 */
.meeting-site__text {
    flex: 0 0 min(38.05vw, 551px); /* 533 / 1440 */
}

.meeting-site__name {
    font-family: "Roboto", sans-serif;
    font-size: 44px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.31em;
    line-height: 1em;
    color: var(--color-text-500);
    margin: 0 0 4px;
}

.meeting-site__sub {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: var(--color-text-100);
    margin: 0 0 28px;
}

.meeting-site__desc {
    font-size: 16px;
    line-height: 35px;
    color: var(--color-text-500);
    white-space: pre-line;
    margin: 0 0 28px;
}

/* ── 3. 服務介紹 ── */
.meeting-service {
    /* 保留原本的底色與內距 */
    background-color: transparent;
    padding: 48px 278px;
    /* 新增以下兩個屬性 */
    position: relative; /* 讓偽元素可以根據這個容器定位 */
    z-index: 0; /* 建立層疊上下文，確保偽元素不會跑到背景色下面或影響其他區塊 */
}

    /* 建立一個只有背景圖的偽元素 */
    .meeting-service::before {
        content: "";
        position: absolute;
        inset: 0; /* 等同於 top: 0; right: 0; bottom: 0; left: 0; 填滿整個容器 */
        /* 把原本的背景圖設定移到這裡 */
        background-image: url("../images/page-bg.png");
        background-position: center;
        opacity: 0.4; /* 🔥 單獨讓背景圖片的透明度變成 40% */
        z-index: -1; /* 讓圖片疊在 #EFE5D8 底色之上、但是文字內容之下 */
    }

.meeting-service__content {
    font-size: 16px;
    line-height: 35px;
    color: var(--color-text-500);
    white-space: pre-line; /* ← 保留換行，並把行首多餘空白收掉 */
}

    .meeting-service__content ol,
    .meeting-service__content ul {
        margin: 0;
        padding-left: 24px;
    }

/* ── 4. 場地規格 ── */
.meeting-spec {
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 80px;
}

    .meeting-spec .detail-table {
        margin-top: 0;
    }

.meeting-spec__actions {
    display: flex;
    justify-content: center;
    margin-top: 74.5px;
}

/* 線框按鈕（聯絡我們） */
.btn-outline {
    display: inline-block;
    padding: 8.5px 79px;
    border: 1px solid var(--color-brown-300);
    border-radius: 6px;
    color: var(--color-brown-300);
    font-size: 16px;
    transition: all 0.2s;
}

    .btn-outline:hover {
        background: var(--color-brown-300);
        color: var(--color-white);
    }

/* ── 共用相簿燈箱 ── */
.gallery-lightbox {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .gallery-lightbox.is-open {
        opacity: 1;
        visibility: visible;
    }

.gallery-lightbox__toolbar {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
}

    .gallery-lightbox__toolbar button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 4px;
    }

.gallery-lightbox__stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* 底部中央切換膠囊 */
.gallery-lightbox__nav {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    background: #00000094;
    border-radius: 100px;
    padding: 2px 6px;
}

    .gallery-lightbox__nav button {
        display: flex;
        align-items: center;
        background: none;
        border: none;
        color: #FFFFFFBF;
        cursor: pointer;
        padding: 8px 12px;
    }

.gallery-lightbox__nav-sep {
    width: 1px;
    height: 16px;
    background: rgba(0, 0, 0, 0.2);
}

/* 縮圖列 */
.gallery-lightbox__thumbs {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .gallery-lightbox__thumbs::-webkit-scrollbar {
        display: none;
    }

.gallery-lightbox__thumb {
    flex: 0 0 auto;
    width: 210px;
    aspect-ratio: 210 / 158;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

    .gallery-lightbox__thumb.is-active {
        border-color: var(--color-brown-300);
    }

    .gallery-lightbox__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* =========================================
   16. 璀璨婚宴 wedding
   ========================================= */
/* ── 1. 上方介紹 ── */
.wedding-hero {
    position: relative;
    background-image: url("../images/wedding/hero-bg.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.wedding-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 34px 0px 110px 0px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    z-index: 1;
}

/* 左圖：949×660（圖片本身已含遮罩效果） */
.wedding-hero__img {
    flex: 1;
    min-width: 0;
    max-width:949px;
}

    .wedding-hero__img img {
        display: block;
        width: 100%;
        max-width: 949px;
        position:relative;
        left:22px;
        aspect-ratio: 949 / 660;
        object-fit: cover;
    }

/* 右文字：固定 351px */
.wedding-hero__text {
    flex: 0 0 351px;
    display: flex;
    flex-direction: column;
    position:relative;
    top: 30px;
}

.wedding-hero__title {
    font-family: "Roboto", sans-serif;
    font-size: 44px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--color-text-500);
    margin: 0 0 8px;
}

.wedding-hero__en {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: var(--color-text-500);
    margin: 0 0 21px;
}

.wedding-hero__slogan {
    font-size: 20px;
    letter-spacing: 0.1em;
    color: var(--color-text-500);
    margin: 0 0 15px;
}

.wedding-hero__desc {
    font-size: 16px;
    line-height: 35px;
    color: var(--color-text-500);
    white-space: pre-line;
    margin: 0;
}

/* 文字圖片：文字下方 37px、292×143 */
.wedding-hero__signature {
    display: block;
    width: 292px;
    height: 143px;
    object-fit: contain;
    margin-top: 37px;
    align-self: center;
}

/* 右下角花草：貼齊區塊右下（會被下個區塊蓋住一點） */
.wedding-hero__deco {
    position: absolute;
    right: -60px;
    bottom: -125px;
    width: 200px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

/* ── 2. 場地區塊 ── */
.wedding-sites {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 底圖與白卡疊在同一格：高度由白卡決定，最少 454 */
.wedding-site {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    min-height: 454px;
    overflow: hidden;
}

/* 底圖：滿版貼邊，超出高度直接裁掉 */
.wedding-site__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

    .wedding-site__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* 遮罩 */
    .wedding-site__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.07);
    }

/* 中間白卡：固定 454 寬，高度隨內容、最少 454 */
.wedding-site__card {
    position: relative;
    z-index: 1;
    width: 454px;
    max-width: 100%;
    min-height: 454px;
    background: rgba(255, 255, 255, 0.95);
    padding: 31px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wedding-site__name {
    font-family: "Roboto", sans-serif;
    font-size: 40px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.31em;
    line-height: 1em;
    color: var(--color-text-500);
    margin: 0 0 4px;
}

.wedding-site__sub {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: var(--color-text-100);
    margin: 0 0 24px;
}

.wedding-site__desc {
    font-size: 16px;
    line-height: 32px;
    color: var(--color-text-500);
    white-space: pre-line;
    margin: 0 0 24px;
}

.wedding-site__actions {
    margin-top: 24px;
}

/* 膠囊線框按鈕（詳細資訊） */
.btn-pill {
    display: flex;
    padding: 10px 24px;
    border: 1px solid var(--color-text-300);
    border-radius: 100px;
    color: var(--color-text-300);
    font-size: 16px;
    text-align: center;
    transition: all 0.2s;
    width: 80%;
    justify-content: center; /* 讓按鈕「內部」的文字置中 */
    margin: 0 auto; /* 讓按鈕「本身」在父元素中置中 */
}

    .btn-pill:hover {
        background: var(--color-brown-300);
        border-color: var(--color-brown-300);
        color: var(--color-white);
    }

/* =========================================
   16-1. 璀璨婚宴內頁 wedding-detail
   ========================================= */
/* 覆寫共用版型的左右寬度與 divider 間距 */
.wedding-detail .detail-layout__side {
    flex: 0 0 min(31.94vw, 460px); /* 460 / 1440 */
}

.wedding-detail .detail-layout__divider {
    margin-left: 23px;
    margin-right: 28px;
}

.wedding-detail .detail-layout__main {
    flex: 0 0 min(57.22vw, 824px); /* 824 / 1440 */
}

/* 輪播比例：824×372 */
.wedding-detail__carousel {
    aspect-ratio: 824 / 372;
}

/* 服務備品 */
.wedding-detail__subtitle {
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.31em;
    line-height: 1em;
    color: var(--color-text-500);
    margin: 40px 0 20px;
}

.wedding-detail__supplies {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .wedding-detail__supplies li {
        position: relative;
        padding-left: 20px;
        font-size: 16px;
        line-height: 35px;
        color: var(--color-text-500);
    }

        .wedding-detail__supplies li:last-child {
            margin-bottom: 0;
        }

        /* 項目符號 */
        .wedding-detail__supplies li::before {
            content: "・";
            position: absolute;
            left: 0;
            color: var(--color-text-500);
        }

.wedding-detail__actions {
    margin-top: 34px;
    display:flex;
    justify-content:center;
}

.wedding-detail__actions a,
.wedding-detail__contact a {
    width:222px;
    padding-left:0px;
    padding-right:0px;
    text-align:center;
}
/* 表格：加上標題 + 英文副標 */
.wedding-detail__table {
    margin-top: 32px;
}

.wedding-detail__table-head {
    margin-bottom: 8px;
}

.wedding-detail__table-title {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.31em;
    line-height: 1.2;
    color: var(--color-text-500);
    margin: 0;
}

.wedding-detail__table-sub {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: var(--color-text-100);
    margin: 0;
}

/* 表格寬度依內容（不撐滿），符合設計稿 */
.wedding-detail__table table {
    width: auto;
    min-width: 0;
}

/* 聯絡我們（右欄底部） */
.wedding-detail__contact {
    margin-top: 40px;
    position:relative;
    left: 78px;
}

/* =========================================
   17. 線上購物列表 shop-list
   ========================================= */
/* xl：左右 232、與 Banner/Footer 各 52，1 row 3 col、間距 36 */
.shop-list {
    max-width: 1440px;
    margin: 0 auto;
    padding: 52px 232px;
}

.shop-list__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 304px));
    justify-content: center; /* 欄寬固定 304，整體置中 */
    gap: 36px;
}

.shop-card {
    display: block;
    cursor: pointer;
}

/* 商品圖：正方形外框 + 12px 內距 */
.shop-card__img {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}

    .shop-card__img img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 商品圖完整呈現、不裁切 */
        display: block;
        transition: transform 0.4s ease;
    }

.shop-card:hover .shop-card__img {
    border-color: var(--color-brown-300);
}

    .shop-card:hover .shop-card__img img {
        transform: scale(1.05);
    }

/* 標題：最多兩行，超過以 ... 呈現（hover 全文由 title 屬性顯示） */
.shop-card__name {
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--color-text-500);
    margin: 16px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.shop-card:hover .shop-card__name {
    color: var(--color-brown-300);
}

/* =========================================
   17-1. 線上購物內頁 shop-detail
   ========================================= */
/* 內容區塊 1200 置中，左右 120、上 45、下 100 */
.shop-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 45px 0px 100px;
}

.shop-detail__title {
    font-family: "Roboto", sans-serif;
    font-size: 38px;
    font-weight: var(--font-weight-normal);
    line-height: 1;
    color: var(--color-text-500);
    text-align: center;
    margin: 0 0 32px;
}

/* 商品圖：580×580 正方形，置中 */
.shop-detail__img {
    width: min(60.42vw, 580px); /* 580 / 960（內容區扣掉左右 padding） */
    max-width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
}

    .shop-detail__img img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 商品圖完整呈現、不裁切 */
        display: block;
    }

/* 文字區塊：左右 72、與圖片間距 36 */
.shop-detail__body {
    padding: 0 72px;
    margin-top: 36px;
}

/* 點我購買 */
.shop-detail__buy {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 32px;
    color: #489EDC;
    transition: color 0.2s;
}

    .shop-detail__buy:hover {
        color: var(--color-brown-800);
    }

.shop-detail__buy-arrow {
    font-size: 20px;
}

/* 商品描述 */
.shop-detail__desc {
    font-size: 16px;
    line-height: 32px;
    color: var(--color-text-500);
    white-space: pre-line; /* 後台輸入的換行照常呈現 */
    margin-top: 32px;
}

/* =========================================
   18. 房型總覽 room-list
   ========================================= */
/* 內容 1108 置中 */
.room-list {
    max-width: 1108px;
    margin: 0 auto;
    padding: 40px 0 80px;
}

.room-list .btn-pill{
    border-color: var(--color-line);
}

/* ── 房型篩選 ── */
.room-filter {
    display: flex;
    align-items: center;
    justify-self:center;
    gap: 28px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 8px 24px;
    margin-bottom: 40px;
    width: fit-content;
}

.room-filter__title {
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    letter-spacing: 0.4em;
    line-height: 1;
    color: var(--color-brown-300);
    margin: 0 0 4px;
}

.room-filter__sub {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: var(--color-text-500);
    margin: 0;
}

.room-filter__options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.room-filter__option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    color: var(--color-text-500);
    cursor: pointer;
}

    .room-filter__option input {
        width: 19px;
        height: 19px;
        accent-color: var(--color-brown-300);
        cursor: pointer;
    }

/* ── 房型項目 ── */
.room-list__items {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.room-item {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 淡出中：仍佔版面，避免其他項目突然跳動 */
.room-item.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* 淡入：從下方浮上 */
@keyframes roomItemIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.room-item.is-showing {
    animation: roomItemIn 0.4s ease both;
}
/* 圖片：587×422 */
.room-item__img {
    flex: 0 0 min(40.76vw, 587px); /* 587 / 1440 */
    aspect-ratio: 587 / 422;
    overflow: hidden;
}

    .room-item__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* 文字區塊：460 寬、下 border */
.room-item__body {
    flex: 0 0 min(31.94vw, 460px); /* 460 / 1440 */
    min-width: 0;
    padding: 24px 24px 24px 12px;
    border-bottom: 1px solid var(--color-line);
}

.room-item__name {
    font-family: "Roboto", sans-serif;
    font-size: 44px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.4em;
    line-height: 1;
    color: var(--color-text-500);
    margin: 0 0 4px;
}

.room-item__sub {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: var(--color-text-100);
    margin: 0 0 16px;
}

.room-item__desc {
    font-size: 16px;
    line-height: 35px;
    color: var(--color-text-500);
    margin: 0 0 16px;
}

/* meta：人數 / 坪數 / 床型 */
.room-item__meta {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 16px;
    line-height:28px;
    color: var(--color-text-500);
    justify-self:center;
}

.room-item__meta-item {
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
    white-space: nowrap;
}

    .room-item__meta-item img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        margin-top: 2px;
    }

/* 床型組合：同組用 &（已由後端組好），組間用 |，換行時不留 | */
.room-item__meta-item--bed {
    flex: 1;
    min-width: 0;
}

.room-item__beds {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    line-height: 24px;
    white-space: normal;
}

.room-item__bed {
    white-space: nowrap;
}

    /* 分隔線做成偽元素：每行第一個自動不顯示 */
    .room-item__bed + .room-item__bed::before {
        content: "|";
        margin-right: 8px;
        color: var(--color-line);
    }

/* divider：上下間距 24 */
.room-item__bottom {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-line);
}

.room-item__price {
    text-align: center;
    margin: 0 0 16px;
}

.room-item__price-num {
    font-family: "Roboto", sans-serif;
    font-size: 32px;
    font-weight: var(--font-weight-light);
    color: var(--color-text-500);
}

.room-item__price-unit {
    font-size: 16px;
    color: var(--color-text-500);
    margin-left: 4px;
}

.room-list__empty {
    text-align: center;
    font-size: 16px;
    color: var(--color-text-100);
    padding: 60px 0;
    margin: 0;
    animation: roomItemIn 0.4s ease both;
}

/* =========================================
   18-1. 房型內頁 room-detail
   ========================================= */
/* ── 紅色區塊：圖片貼左裁切 + 右欄固定 496 ── */
.room-detail-main {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 686px;
    padding-right: 16px; /* 右欄與視窗右緣 16 */
    overflow: hidden;
    margin-top: 44px;
}

/* 圖片：填滿右欄以外的空間，靠右對齊 → 視窗變窄時裁掉左側，不縮放 */
.room-detail-main__img {
    position: absolute;
    left: 0;
    top: 0;
    right: calc(496px + 8px + 16px); /* 右欄 496 + 間距 8 + 右邊界 16 */
    height: 686px;
}

    .room-detail-main__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center; /* 關鍵：裁左側、右緣固定 */
        display: block;
    }

/* 右欄：固定 496，貼齊容器右側 */
.room-detail-main__body {
    width: 496px;
    margin-left: auto;
    padding-left: 12px;
    padding-right: 24px;
}

.room-detail__name {
    font-family: "Roboto", sans-serif;
    font-size: 44px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.4em;
    line-height: 1;
    color: var(--color-text-500);
    margin: 0 0 4px;
}

.room-detail__sub {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: var(--color-text-100);
    margin: 0 0 16px;
}

.room-detail__desc {
    font-size: 16px;
    line-height: 35px;
    color: var(--color-text-500);
    margin: 0 0 16px;
}

/* 價格 + 按鈕 */
.room-detail__price-row {
    border-top: 1px solid var(--color-line);
    margin-top: 20px;
    padding-top: 24px;
}

.room-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 20px;
}

.room-detail__btn {
    flex: 1 1 calc(50% - 16px);
    font-size: 18px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
}

.room-detail__btn--wide {
    flex: 0 0 100%;
}

/* ── 床型型態 ── */
.room-detail__subtitle {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    margin: 0px 0 12px;
} 

.room-detail__beds-detail .room-detail__subtitle {
    margin-top: 24px;
}

.room-detail__beds-detail {
    border-top: 1px solid var(--color-line);
    margin-top: 24px;
}

.room-detail__beds-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* icon 與名稱數量同列 */
/* icon 與右側文字（名稱數量 + 尺寸）分兩欄 */
.room-detail__bed {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.room-detail__bed-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

    .room-detail__bed-icons img {
        width: 32px;
        height: 32px;
        display: block;
    }

/* 右側文字欄：名稱數量在上、尺寸在下，左緣自動對齊 */
.room-detail__bed-text {
    min-width: 0;
}

.room-detail__bed-names {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 4px;
}

.room-detail__bed-name {
    font-size: 14px;
    color: var(--color-text-500);
    white-space: nowrap;
}

.room-detail__bed-size {
    font-size: 14px;
    color: var(--color-text-100);
    line-height: 24px;
    margin: 0;
}

/* ── 藍色區塊：文字 + 輪播 ── */
.room-detail-sub {
    max-width: 1440px;
    margin: 86px auto 0; /* 與紅色區塊間距 86 */
    padding: 0 40px 80px;
    display: flex;
    align-items: flex-start;
    gap: min(2.29vw, 33px); /* 33 / 1440 */
}

.room-detail-sub__text {
    flex: 0 0 min(35.49vw, 511px); /* 511 / 1440 */
    min-width: 0;
}

/* 房型設施：三欄清單 */
.room-detail__facilities {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: min(14.03vw, 202px) 1fr 1fr; /* 202 / 1440，其餘兩欄平分 */
    gap: 0px 16px;
    margin-bottom: 55px;
}

    .room-detail__facilities li {
        position: relative;
        padding-left: 16px;
        font-size: 16px;
        line-height: 35px;
        color: var(--color-text-500);
    }

        .room-detail__facilities li::before {
            content: "・";
            position: absolute;
            left: 0;
        }

/* 住房須知：編號清單 */
.room-detail__instructions {
    margin: 0;
    padding-left: 20px;
}

    .room-detail__instructions li {
        font-size: 16px;
        line-height: 35px;
        color: var(--color-text-500);
        margin-bottom: 0px;
    }

        .room-detail__instructions li:last-child {
            margin-bottom: 0;
        }

/* 輪播：816×459 */
.room-detail-sub__carousel {
    position: relative;
    flex: 0 0 min(56.67vw, 816px); /* 816 / 1440 */
    aspect-ratio: 816 / 459;
    overflow: hidden;
}

/* ── 價目表彈窗 ── */
.price-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.5);
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .price-modal.is-open {
        opacity: 1;
        visibility: visible;
    }

.price-modal__panel {
    position: relative;
    background: var(--color-white);
    width: min(100%, 1080px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 35px 25px;
    transform: translateY(16px);
    transition: transform 0.3s ease;
}

.price-modal.is-open .price-modal__panel {
    transform: translateY(0);
}

.price-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--color-text-500);
    cursor: pointer;
    padding: 4px;
}

.price-modal__head {
    margin-bottom: 20px;
}

.price-modal__title {
    font-family: "Roboto", sans-serif;
    font-size: 32px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.31em;
    line-height: 1.2;
    color: var(--color-text-500);
    margin: 0;
}

.price-modal__sub {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: var(--color-text-100);
    margin: 0;
}

.price-modal .detail-table {
    margin-top: 0;
}

.price-modal__note {
    font-size: 14px;
    color: var(--color-text-500);
    margin: 16px 0 0;
}

/* =========================================
   19. 主題餐廳列表 rest-list
   ========================================= */

/* ── 標題區：置中、上下間距 ── */
.rest-list-heading {
    text-align: center;
    padding: 44px 16px;
}

.rest-list-heading__title {
    font-size: 44px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.31em;
    color: var(--color-text-500);
    margin: 0 0 4px;
}

.rest-list-heading__sub {
    font-size: 16px;
    color: var(--color-text-500);
    margin: 0;
}

/* ── 列表容器 ── */
.rest-list {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px 175px;
    /* 1440 時：3×443 + 2×36 = 1401，左右 padding = (1440−1401)/2 ≈ 19.5
       但設計稿看起來外邊距約 38.5px，依實際微調 */
}

.rest-list__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 443px));
    column-gap: 36px;
    row-gap: 56px;
    justify-content: center;
}

/* ── 卡片 ── */
.rest-card {
    display: block;
    cursor: pointer;
    position: relative; /* 給 ::after 定位基準 */
}

    .rest-card .rest-card__img img {
        transition: transform 0.4s ease;
    }

    .rest-card:hover .rest-card__img img {
        transform: scale(1.05);
    }

    .rest-card .rest-card__name {
        transition: color 0.2s;
    }

    .rest-card:hover .rest-card__name {
        color: var(--color-brown-300);
    }
/* 名稱連結撐滿整張卡片 */
.rest-card__link {
    color: inherit;
}

    .rest-card__link::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

/* 外送 icon 要能穿透 stretched link 被獨立點擊 */
.rest-card__links {
    position: relative;
    z-index: 2;
}

/* 圖片：443×365 比例 */
.rest-card__img {
    width: 100%;
    aspect-ratio: 443 / 365;
    overflow: hidden;
}

    .rest-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* 標題列：名稱 + 樓層 */
.rest-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.rest-card__name {
    font-family: "Roboto", sans-serif;
    font-size: 30px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.15em;
    line-height: 1;
    color: var(--color-text-500);
    margin: 0;
    /* 最多兩行，超過省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 樓層徽章 */
.rest-card__place {
    flex-shrink: 0;
    background: var(--color-brown-300);
    color: var(--color-white);
    font-size: 16px;
    padding: 8px 4px;
    white-space: nowrap;
    line-height: 1;
}

.rest-card__sub {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: var(--color-text-100);
    margin: 4px 0 16px;
}

.rest-card__intro {
    font-size: 16px;
    line-height: 35px;
    color: var(--color-text-500);
    white-space: pre-line;
    margin: 0 0 12px;
    /* 文字截斷（依需求可調行數） */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 外送平台 icon */
.rest-card__links {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .rest-card__links a {
        display: flex;
    }

    .rest-card__links img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

/* =========================================
   19-1. 主題餐廳內頁 rest-detail
   ========================================= */
.restaurant-detail .facility-card__name{
    letter-spacing: 0.15em;
}
/* 外送平台 icon（左側文字區塊底部） */
.rest-detail__links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

    .rest-detail__links a {
        display: flex;
    }

    .rest-detail__links img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

/* 主題特色標題 */
.rest-detail__content-title {
    font-size: 32px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.41em;
    color: var(--color-text-500);
    margin: 0 0 10px;
}

.rest-detail__content {
    margin-top: 32px;
}

.rest-detail__content-text {
    font-size: 16px;
    line-height: 35px;
    color: var(--color-text-500);
    white-space: pre-line; /* 保留 textarea 的換行 */
    margin: 0;
}

/* 主廚推薦內頁：我要購買按鈕 */
.chef-detail__order {
    margin-top: 32px;
    display: flex;
    justify-content:center;
}


.chef-recommendation-detail .facility-card__name {
    letter-spacing: 0.15em;
}

/* =========================================
   20. 聯絡我們 contact-us
   ========================================= */
.contact-us {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 16px 100px;
}

.contact-us__inner {
    max-width: 720px;
    margin: 0 auto;
}

.contact-us__note {
    text-align: right;
    font-size: 14px;
    color: var(--color-text-100);
    margin-bottom: 32px;
}

.contact-us__star {
    color: var(--color-brown-200);
}

/* 每列：label + field 水平排列 */
.contact-us__row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
}

.contact-us__row--top {
    align-items: flex-start;
}

.contact-us__label {
    flex: 0 0 100px;
    font-size: 16px;
    color: var(--color-text-500);
    text-align: right;
    white-space: nowrap;
}

.contact-us__field {
    flex: 1;
    min-width: 0;
}

/* 輸入框共用 */
.contact-us__input {
    width: 100%;
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-text-500);
    border: none;
    border-bottom: 1px solid var(--color-line);
    outline: none;
    background: transparent;
    transition: border-color 0.2s;
}

    .contact-us__input:focus {
        border-bottom-color: var(--color-brown-300);
    }

    .contact-us__input::placeholder {
        color: var(--color-placeholder);
    }

/* 下拉選單 */
.contact-us__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236c6c6c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 24px;
    cursor: pointer;
}

/* textarea */
.contact-us__textarea {
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 12px;
    resize: vertical;
    min-height: 180px;
}

    .contact-us__textarea:focus {
        border-color: var(--color-brown-300);
    }

/* 性別 radio */
.contact-us__radio-group {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
}

.contact-us__radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: var(--color-text-500);
    cursor: pointer;
}

    .contact-us__radio input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-brown-300);
        cursor: pointer;
    }

/* 驗證碼 */
.contact-us__captcha-wrap {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-us__captcha-input {
    flex: 1;
    min-width: 0;
}

.contact-us__captcha-img {
    flex-shrink: 0;
    width: 130px;
    height: 46px;
    border: 1px solid var(--color-line);
    cursor: pointer;
    object-fit: contain;
}

/* 驗證錯誤訊息 */
.contact-us__error {
    display: block;
    font-size: 14px;
    color: var(--color-red);
    margin-top: 4px;
    min-height: 0;
}

/* 送出按鈕 */
.contact-us__submit-row {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.contact-us__submit {
    width: min(100%, 380px);
    padding: 14px 0;
    background: var(--color-brown-300);
    color: var(--color-white);
    border: none;
    font-size: 18px;
    letter-spacing: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
}

    .contact-us__submit:hover {
        opacity: 0.85;
    }

    .contact-us__submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* =========================================
   21. 推薦景點卡片 travel-card（沿用 media-list grid）
   ========================================= */
.travel-card__name {
    font-size: 24px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.1em;
    line-height: 1.3;
    color: var(--color-text-500);
    margin: 16px 0 4px;
    transition: color 0.2s;
}

.media-card:hover .travel-card__name {
    color: var(--color-brown-300);
}

.travel-card__type {
    display: block;
    font-size: 16px;
    color: var(--color-brown-300);
    margin-bottom: 8px;
}

.travel-card__distance {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--color-text-500);
    margin: 0;
}

    .travel-card__distance img {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* =========================================
   22. 活動報名內頁 event-detail
   ========================================= */
.event-detail {
    max-width: 1440px;
    margin: 0 auto;
    padding: 45px 120px;
}

/* --- 資訊卡 --- */
.event-detail__info-card {
    display: flex;
    align-items: stretch;
    gap: 40px;
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 32px;
    box-shadow: 1px 1px 10px rgba(142, 142, 142, 0.15);
}

.event-detail__img-wrap {
    flex: 0 0 420px;
    max-width: 420px;
    border-radius: 6px;
    overflow: hidden;
}

.event-detail__img {
    width: 100%;
    aspect-ratio: 420 / 265;
    object-fit: cover;
    display: block;
}

.event-detail__info-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.event-detail__title {
    font-family: "Roboto", sans-serif;
    font-size: 32px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    margin: 0 0 8px;
}

.event-detail__sub {
    font-size: 18px;
    color: var(--color-text-100);
    margin: 0 0 auto;
}

.event-detail__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.event-detail__meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}

.event-detail__meta-label {
    color: var(--color-text-100);
}

.event-detail__meta-value {
    color: var(--color-brown-300);
    font-size: 18px;
}

/* --- 區塊標題 --- */
.event-detail__section-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-family: "Roboto", sans-serif;
    font-size: 28px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    margin-top: 60px;
    margin-bottom: 24px;
}

    .event-detail__section-title span {
        font-size: 14px;
        color: var(--color-text-100);
    }

/* --- xl 場次表格 --- */
.event-session-table-wrap {
    box-shadow: 1px 1px 10px rgba(142, 142, 142, 0.15);
}

.event-session-table {
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--color-white);
}

.event-session-table__header {
    background-color: var(--color-gray-600);
    padding: 16px 24px;
    color: var(--color-white);
    font-size: 18px;
}

.event-session-table__row {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-line);
    font-size: 16px;
    color: var(--color-text-500);
}

    .event-session-table__row:last-child {
        border-bottom: none;
    }

.event-session-col--name {
    flex: 0 0 34%;
}

.event-session-col--loc {
    flex: 0 0 26%;
}

.event-session-col--time {
    flex: 0 0 18%;
}

.event-session-col--btn {
    flex: 1;
    text-align: center;
}

.event-session-btn {
    display: inline-block;
    border: 1px solid var(--color-brown-300);
    color: var(--color-brown-300);
    background-color: transparent;
    border-radius: 6px;
    padding: 6px 32px;
    font-size: 16px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

    .event-session-btn:hover {
        background-color: var(--color-brown-300);
        color: var(--color-white);
    }

    .event-session-btn.is-full,
    .event-session-btn:disabled {
        color: var(--color-line);
        border: none;
        cursor: not-allowed;
        pointer-events: none;
    }

/* --- md/sm 場次卡片 --- */
.event-session-card {
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: 1px 1px 10px rgba(142, 142, 142, 0.15);
}

.event-session-card__header {
    background-color: var(--color-gray-600);
    padding: 10px 20px;
    color: var(--color-white);
    font-size: 18px;
}

.event-session-card__body {
    padding: 16px 20px 20px;
}

.event-session-card__item {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-line);
    font-size: 16px;
    color: var(--color-text-500);
}

    .event-session-card__item svg {
        flex-shrink: 0;
        color: var(--color-brown-300);
    }

.event-session-card__label {
    font-size: 14px;
    color: var(--color-text-100);
}

/* =========================================
   14-3. Event Modal 彈窗（白底，無底圖）
   ========================================= */
.event-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    overflow-y: auto;
    padding: 40px 16px;
    align-items: flex-start;
    display: none;
}

    .event-modal-overlay.is-open {
        display: flex;
    }

.event-modal-box {
    position: relative;
    max-width: 1025px;
    margin: auto;
    width: 100%;
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 56px 48px 48px;
    overflow: hidden;
}

    .event-modal-box > * {
        position: relative;
        z-index: 1;
    }

.event-modal-x {
    position: absolute;
    top: 16px;
    right: 20px;
    border: none;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    color: var(--color-brown-300);
    cursor: pointer;
    z-index: 2;
}

.event-modal-step {
    display: none;
}

    .event-modal-step.is-active {
        display: block;
    }

    .event-modal-step.step-centered.is-active {
        display: flex;
        min-height: 45dvh;
        flex-direction: column;
        justify-content: center;
    }

.event-modal-center {
    text-align: center;
    padding: 40px 0;
}

.event-modal-heading {
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    margin-bottom: 8px;
}

.event-modal-subtext {
    font-size: 16px;
    color: var(--color-text-100);
}

.event-modal-highlight {
    font-size: 18px;
    color: var(--color-brown-300);
}

.event-modal-btn-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

.event-btn-outline,
.event-btn-solid {
    flex: 1;
    max-width: 380px;
    padding: 12px 0;
    border-radius: 6px;
    font-size: 18px;
    letter-spacing: 1.2px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.event-btn-outline {
    border: 1px solid var(--color-brown-300);
    color: var(--color-brown-300);
    background-color: transparent;
}

    .event-btn-outline:hover {
        background-color: var(--color-brown-300);
        color: var(--color-white);
    }

.event-btn-solid {
    border: 1px solid var(--color-brown-300);
    background-color: var(--color-brown-300);
    color: var(--color-white);
}

    .event-btn-solid:hover {
        background-color: var(--color-brown-800);
        border-color: var(--color-brown-800);
        color: var(--color-white);
    }


/* --- 登入步驟（精簡版） --- */
.event-modal-box.is-login-mode {
    width: auto; /* 取消預設的 100% 寬度 */
}
.event-login-compact {
    text-align: center;
    padding: 60px 80px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.event-login-compact__title {
    font-family: "Noto Serif TC", sans-serif;
    font-size: 38px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    letter-spacing: 0.2em;
    margin: 0 0 10px;
}

.event-login-compact__sub {
    font-family: "Noto Serif TC", sans-serif;
    font-size: 20px;
    color: var(--color-text-500);
    letter-spacing: 0.15em;
    margin: 0 0 84px;
}

.event-login-form {
    width:100%;
    max-width: 347px;
}

.event-login-compact__input {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: var(--color-text-500);
    border: none;
    border-bottom: 1px solid var(--color-line);
    outline: none;
    background: transparent;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}

    .event-login-compact__input:focus {
        border-bottom-color: var(--color-brown-300);
    }

    .event-login-compact__input::placeholder {
        color: var(--color-placeholder);
    }

.event-login-compact__forgot {
    text-align: right;
    margin-bottom: 24px;
}

    .event-login-compact__forgot a {
        font-size: 14px;
        color: var(--color-text-500);
        text-decoration: underline;
    }

.event-login-compact__btn {
    display: block;
    width: 100%;
    padding: 12px 0;
    background: var(--color-brown-300);
    color: var(--color-white);
    border: none;
    font-size: 18px;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 16px;
}

    .event-login-compact__btn:hover {
        background: var(--color-brown-200);
    }

.event-login-compact__register {
    display: inline-block;
    font-size: 16px;
    color: var(--color-brown-300);
}

.event-login-compact__field {
    margin-bottom: 12px;
}

.event-login-compact__error {
    display: block;
    font-size: 13px;
    color: var(--color-red);
    margin-top: 4px;
    min-height: 0;
    text-align: left;
}

/* --- 報名表單頂部摘要卡 --- */
.event-reg-summary {
    display: flex;
    gap: 32px;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 1px 1px 10px rgba(142, 142, 142, 0.25);
}

.event-reg-summary__img {
    flex: 0 0 42%;
    max-width: 42%;
    aspect-ratio: 420 / 265;
    object-fit: cover;
    border-radius: 6px;
}

.event-reg-summary__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event-reg-summary__title {
    font-size: 22px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    margin: 0 0 4px;
}

.event-reg-summary__session {
    font-size: 18px;
    color: var(--color-brown-300);
    margin: 0 0 12px;
}

.event-reg-summary__meta {
    font-size: 18px;
    color: var(--color-text-500);
    margin: 0 0 4px;
}

.event-reg-summary__value {
    color: var(--color-brown-300);
    margin-left:8px;
}

/* --- 報名表單（底線版） --- */
.event-modal-box.is-reg-mode {
    padding: 56px 16px 48px;
}
.event-reg-hint {
    text-align: center;
    font-size: 18px;
    color: var(--color-text-500);
    margin-bottom: 32px;
    letter-spacing:1.2px;
}
.event-reg-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.event-reg-form-1 {
    max-width: 566px;
    width: 100%;
}
.event-reg-form-2 {
    max-width: 614px;
    width: 100%;
}
/* label 與 field 同行 */
.event-form__row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.event-form__row--top {
    align-items: flex-start;
}

.event-form__label {
    flex: 0 0 45px;
    font-size: 16px;
    color: var(--color-text-500);
    text-align: right;
    white-space: nowrap;
    padding-top: 0;
}
.event-form__star{
    color:var(--color-brown-200);
}

.event-form__field {
    flex: 1;
    min-width: 0;
}

/* 底線 input */
.event-form__input--line {
    display: block;
    width: 100%;
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-text-500);
    border: none;
    border-bottom: 1px solid var(--color-line);
    outline: none;
    background: transparent;
    transition: border-color 0.2s;
}

    .event-form__input--line:focus {
        border-bottom-color: var(--color-brown-300);
    }

    .event-form__input--line.input-validation-error {
        border-bottom-color: var(--color-red);
    }

/* 底線 select */
.event-form__select--line {
    display: inline-block;
    padding: 8px 24px 8px 8px;
    font-size: 16px;
    color: var(--color-text-500);
    border: none;
    border-bottom: 1px solid var(--color-line);
    outline: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236c6c6c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    cursor: pointer;
    transition: border-color 0.2s;
}

    .event-form__select--line:focus {
        border-bottom-color: var(--color-brown-300);
    }

    .event-form__select--line.input-validation-error {
        border-bottom-color: var(--color-red);
    }

/* textarea 維持全框線 */
.event-form__textarea {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    color: var(--color-text-500);
    border: 1px solid var(--color-line);
    border-radius: 4px;
    outline: none;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.2s;
}

    .event-form__textarea:focus {
        border-color: var(--color-brown-300);
    }

/* 個資聲明（獨立區塊，不在 row 裡） */
.event-form__privacy {
    margin-bottom: 37px;
}

.event-form__privacy-label {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--color-text-500);
    line-height: 1.6;
    cursor: pointer;
}

    .event-form__privacy-label input[type="checkbox"] {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin-top: 2px;
        accent-color: var(--color-brown-300);
        cursor: pointer;
    }

    .event-form__privacy-label a {
        color: var(--color-brown-300);
        text-decoration: underline;
    }

.field-error{
    color:var(--color-red);
}
/* 送出 + 取消（垂直置中排列） */
.event-form__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.event-form__submit {
    width: min(100%, 380px);
    padding: 14px 0;
    background: var(--color-brown-300);
    color: var(--color-white);
    border: none;
    font-size: 18px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.2s;
}

    .event-form__submit:hover {
        background: var(--color-brown-200);
    }

    .event-form__submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.event-form__cancel {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--color-brown-300);
    cursor: pointer;
    padding: 4px 0;
}

    .event-form__cancel:hover {
        color: var(--color-brown-800);
    }

/* 分享活動按鈕 */
.event-reg-summary__share {
    margin-top: 16px;
}

.event-reg-summary__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--color-line);
    border-radius: 100px;
    background: transparent;
    font-size: 14px;
    color: var(--color-text-500);
    cursor: pointer;
    transition: border-color 0.2s;
}

    .event-reg-summary__share-btn:hover {
        border-color: var(--color-brown-300);
    }

/* --- APP QRcode 彈窗 --- */
.app-qrcode-modal-content {
    position: relative;
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 40px 32px 32px;
    overflow: hidden;
}

    .app-qrcode-modal-content .event-modal-center {
        position: relative;
        z-index: 1;
    }

    .app-qrcode-modal-content .event-modal-x {
        z-index: 2;
    }

.event-qrcode-img {
    width: 280px;
    max-width: 80%;
}


/* =========================================
   23. 交通位置 location
   ========================================= */
/* Google Map */
.location-map {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 120px;
    aspect-ratio: 1200 / 450;
    margin-top:32px;
}

    .location-map iframe {
        width: 100%;
        height: 100%;
        display: block;
    }

/* 區塊間距 */
.location-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 120px;
}

    .location-section + .location-section {
        margin-top: 64px;
    }

/* 大標題 */
.location-heading {
    font-size: 32px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.31em;
    color: var(--color-text-500);
    text-align: center;
    margin: 64px 0 4px;
}

.location-heading-sub {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: var(--color-text-100);
    text-align: center;
    margin: 0;
}

/* ── 左右排版行（圖 + 文字） ── */
.location-row {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

/* 反轉：文字在左、圖在右 */
.location-row--reverse {
    flex-direction: row-reverse;
}

.location-row__img {
    flex: 0 0 46%;
    min-width: 0;
}

    .location-row__img img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 6px;
    }

.location-row__text {
    flex: 1;
    min-width: 0;
}

.location-row__title {
    font-size: 28px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.25em;
    color: var(--color-text-500);
    margin: 0 0 16px;
}

.location-row__route-name {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-brown-300);
    margin: 16px 0 4px;
}

.location-row__route-desc {
    font-size: 16px;
    line-height: 28px;
    color: var(--color-text-500);
    margin: 0;
}

/* ── 停車資訊 ── */
.location-parking__intro {
    font-size: 16px;
    line-height: 28px;
    color: var(--color-text-500);
    margin: 0 0 20px;
}

.location-parking__list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

    .location-parking__list li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        line-height: 32px;
        color: var(--color-text-500);
    }

.location-parking__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-brown-300);
    color: var(--color-white);
    font-size: 13px;
    flex-shrink: 0;
}

.location-parking__notes {
    margin-top: 16px;
}

    .location-parking__notes p {
        font-size: 14px;
        line-height: 24px;
        color: var(--color-text-100);
        margin: 0;
    }

/* ── 客運 / 腳踏車 卡片 ── */
.location-cards {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 64px;
    padding-bottom: 80px;
}

.location-card {
    flex: 0 0 280px;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
}

.location-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: transparent;
    margin: 0 auto 16px;
    transition: background 0.3s;
}

    .location-card__icon img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        transition: filter 0.3s;
    }

/* hover：出現棕色圓底 + icon 轉白 */
.location-card:hover .location-card__icon {
    background: var(--color-brown-300);
}

    .location-card:hover .location-card__icon img {
        filter: brightness(0) invert(1);
    }

.location-card__title {
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    margin: 0 0 12px;
}

    .location-card__title span {
        font-size: 14px;
        color: var(--color-text-100);
        margin-left: 4px;
    }

.location-card__desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-100);
    margin: 0 0 20px;
}

.location-card__btn {
    display: inline-block;
    padding: 8px 24px;
    border: 1px solid var(--color-brown-300);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-brown-300);
    transition: all 0.2s;
}

    .location-card__btn:hover {
        background: var(--color-brown-300);
        color: var(--color-white);
    }

/* =========================================
   21-1. 推薦景點內頁 travel-detail
   ========================================= */
.travel-detail {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 120px 60px;
}

/* 標題卡：名稱 + meta 同行，底線分隔 */
.travel-detail__head {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.travel-detail__name {
    font-size: 32px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.15em;
    color: var(--color-text-500);
    margin: 0 0 16px;
}

.travel-detail__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.travel-detail__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: var(--color-text-500);
}

    .travel-detail__meta-item img {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

.travel-detail__map-btn {
    display: inline-block;
    padding: 6px 20px;
    border: 1px solid var(--color-brown-300);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-brown-300);
    transition: all 0.2s;
}

    .travel-detail__map-btn:hover {
        background: var(--color-brown-300);
        color: var(--color-white);
    }

/* Content 區塊（純 HTML，基本排版即可） */
.travel-detail__content {
    font-size: 16px;
    line-height: 35px;
    color: var(--color-text-500);
}

    .travel-detail__content img {
        max-width: 100%;
        height: auto;
    }

/* =========================================
   會員登入頁面 (Login Page)
   ========================================= */
.login-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
}

.login-page__inner {
    display: flex;
    min-height: 560px;
}

.login-page__form-side {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
    text-align: center;
}

.login-page__image-side {
    flex: 0 0 50%;
    overflow: hidden;
}

.login-page__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-page__title {
    font-family: "Noto Serif TC", serif;
    font-size: 38px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    letter-spacing: 0.2em;
    margin: 0 0 10px;
}

.login-page__subtitle {
    font-family: "Noto Serif TC", serif;
    font-size: 20px;
    color: var(--color-text-500);
    letter-spacing: 0.15em;
    margin: 0 0 64px;
}

.login-page__form {
    width: 100%;
    max-width: 347px;
}

.login-page__input {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: var(--color-text-500);
    border: none;
    border-bottom: 1px solid var(--color-line);
    outline: none;
    background: transparent;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}

    .login-page__input:focus {
        border-bottom-color: var(--color-brown-300);
    }

    .login-page__input::placeholder {
        color: var(--color-placeholder);
    }

.login-page__error {
    color: var(--color-red);
    font-size: 14px;
    margin-bottom: 16px;
    text-align: left;
}

.login-page__forgot {
    text-align: right;
    margin-bottom: 40px;
}

    .login-page__forgot a {
        font-size: 14px;
        color: var(--color-text-500);
        text-decoration: underline;
    }

        .login-page__forgot a:hover {
            color: var(--color-brown-300);
        }

.login-page__btn {
    display: block;
    width: 100%;
    padding: 14px 0;
    background: var(--color-brown-300);
    color: var(--color-white);
    border: none;
    font-size: 18px;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 16px;
}

    .login-page__btn:hover {
        background: var(--color-brown-200);
    }

.login-page__register {
    text-align: center;
}

    .login-page__register a {
        font-size: 16px;
        color: var(--color-brown-300);
        text-decoration: none;
    }

        .login-page__register a:hover {
            text-decoration: underline;
        }

.login-page__field {
    margin-bottom: 16px;
}

.login-page__error {
    display: block;
    font-size: 14px;
    color: var(--color-red);
    margin-top: 4px;
    min-height: 0;
}

/* ===== Loading 共用元件 ===== */
.loader-mask {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
}

.loader-mask--local {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
}

.loader-container {
    text-align: center;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border: 3px solid var(--color-line);
    border-top-color: var(--color-brown-300);
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.loader-text {
    font-size: 14px;
    color: var(--color-text-100);
    letter-spacing: 0.1em;
    margin: 0;
}

/* ===== 會員註冊頁 ===== */
.register-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 60px 40px 80px;
}

.register-page__form {
    width: 100%;
}

.register-page__row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
}

.register-page__row--top {
    align-items: flex-start;
}

.register-page__label {
    flex: 0 0 100px;
    font-size: 16px;
    color: var(--color-text-500);
    text-align: right;
    white-space: nowrap;
}

.register-page__required {
    color: var(--color-brown-300);
    margin-left: 2px;
}

.register-page__field {
    flex: 1;
    min-width: 0;
}

.register-page__input {
    width: 100%;
    padding: 8px 0;
    font-size: 16px;
    color: var(--color-text-500);
    border: none;
    border-bottom: 1px solid var(--color-line);
    outline: none;
    background: transparent;
    transition: border-color 0.2s;
}

    .register-page__input:focus {
        border-bottom-color: var(--color-brown-300);
    }

    .register-page__input::placeholder {
        color: var(--color-placeholder);
    }

.register-page__input--addr {
    margin-top: 16px;
}

.register-page__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236c6c6c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 24px;
    cursor: pointer;
}

/* 出生日期三欄 + 斜線 */
.register-page__birth-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.register-page__birth-select {
    flex: 1;
    min-width: 0;
}

.register-page__birth-sep {
    color: var(--color-placeholder);
    font-size: 16px;
    flex-shrink: 0;
}

/* 地址兩欄 */
.register-page__address-group {
    display: flex;
    gap: 16px;
}

.register-page__addr-select {
    flex: 1;
    min-width: 0;
}

/* 性別 radio */
.register-page__radio-group {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
}

.register-page__radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: var(--color-text-500);
    cursor: pointer;
}

    .register-page__radio input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-brown-300);
        cursor: pointer;
    }

/* 錯誤訊息 */
.register-page__error {
    display: block;
    font-size: 14px;
    color: var(--color-red);
    margin-top: 4px;
    min-height: 0;
}

/* 隱私權 checkbox */
.register-page__privacy {
    margin: 36px 0 0;
    text-align: center;
}

.register-page__checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--color-text-500);
    cursor: pointer;
}

.register-page__checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-brown-300);
    cursor: pointer;
}

.register-page__checkbox-label a {
    color: var(--color-brown-300);
    text-decoration: underline;
}

/* 送出按鈕 */
.register-page__submit-row {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.register-page__btn {
    display: block;
    width: min(100%, 380px);
    padding: 14px 0;
    background: var(--color-brown-300);
    color: var(--color-white);
    border: none;
    font-size: 18px;
    letter-spacing: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
    text-align: center;
    text-decoration: none;
}

    .register-page__btn:hover {
        opacity: 0.85;
    }

    .register-page__btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* 取消連結 */
.register-page__cancel-row {
    margin-top: 16px;
    text-align: center;
}

.register-page__cancel {
    font-size: 16px;
    color: var(--color-brown-300);
    text-decoration: none;
}

    .register-page__cancel:hover {
        text-decoration: underline;
    }

/* 註冊成功 */
.register-page__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 80px 20px;
}

.register-page__success-icon {
    font-size: 64px;
    color: var(--color-brown-300);
    margin-bottom: 24px;
}

.register-page__success-title {
    font-family: "Noto Serif TC", serif;
    font-size: 28px;
    color: var(--color-text-500);
    letter-spacing: 0.1em;
    margin: 0 0 12px;
}

.register-page__success-desc {
    font-size: 16px;
    color: var(--color-text-500);
    margin: 0 0 40px;
}

/* ===== 驗證認證碼頁 ===== */
.verify-page__inner {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 0 80px;
}

.verify-page__desc {
    font-size: 16px;
    color: var(--color-text-500);
    margin: 0 0 48px;
    line-height: 1.6;
}

.verify-page__form {
    text-align: left;
}

.verify-page__actions {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.verify-page__resend {
    background: none;
    border: none;
    font-size: 15px;
    color: var(--color-brown-300);
    cursor: pointer;
    text-decoration: underline;
    padding: 4px 0;
    transition: opacity 0.2s;
}

    .verify-page__resend:hover {
        opacity: 0.7;
    }

    .verify-page__resend:disabled {
        color: var(--color-placeholder);
        cursor: not-allowed;
        text-decoration: none;
        opacity: 0.6;
    }

/* ===== 會員專區 — 點數專區 ===== */
.point-zone {
    max-width: 1200px;
    width:100%;
    margin: 0px;
    padding: 0 0px 80px;
    justify-self:center;
}

.point-zone__summary {
    display: flex;
    justify-content: flex-end;
    padding: 32px 0 16px;
}

.point-zone__points-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.point-zone__points-label {
    font-size: 16px;
    color: var(--color-text-300);
    letter-spacing: 3px;
    line-height:22px;
}

.point-zone_point-info {
    display:flex;
    align-items:center;
    gap:6px;
}



.point-zone__points-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-brown-200);
    color: var(--color-white);
    font-size: 14px;
    font-weight: bold;
}

.point-zone__points-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--color-text-500);
}

/* 卡片 grid */
.point-zone__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.point-zone__card {
    display: flex;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-white);
    padding: 8px 12px;
}

.point-zone__card-img {
    flex: 0 0 128px;
    height: 128px;
    overflow: hidden;
}

    .point-zone__card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.point-zone__card-noimg {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
}

.point-zone__card-body {
    flex: 1;
    min-width: 0;
    padding-left:8px;
    display: flex;
    flex-direction: column;
}

.point-zone__card-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-500);
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.point-zone__card-points {
    font-size: 15px;
    color: var(--color-brown-300);
    margin: 0 0 2px;
    font-weight: 400;
}

.point-zone__card-desc {
    font-size: 14px;
    color: var(--color-text-500);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.point-zone__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
}

.point-zone__card-remain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--color-text-100);
}

    .point-zone__card-remain svg {
        color: var(--color-text-100);
    }

.point-zone__card-btn {
    display: inline-block;
    padding: 4px 20px;
    border: 1px solid var(--color-brown-300);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-brown-300);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    background: transparent;
    white-space: nowrap;
}

    .point-zone__card-btn:hover {
        background: var(--color-brown-300);
        color: var(--color-white);
    }

.point-zone__card-btn--disabled {
    border-color: var(--color-line);
    color: var(--color-placeholder);
    cursor: not-allowed;
}

    .point-zone__card-btn--disabled:hover {
        background: transparent;
        color: var(--color-placeholder);
    }

.point-zone__empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--color-placeholder);
    font-size: 16px;
}

/* ===== 點數專區 - 內頁 ===== */
/*.pz-detail {
    max-width: 1200px;
    width: 100%;
    margin: 0;
    padding: 0 0 80px;
    justify-self: center;
}*/

.pz-detail__main {
    display: flex;
    gap: 40px;
    padding-top: 32px;
}

/* 左欄 */
.pz-detail__left {
    flex: 0 0 400px;
    max-width: 400px;
}

.pz-detail__img {
    width: 100%;
    aspect-ratio: 500 / 440;
    overflow: hidden;
}

    .pz-detail__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pz-detail__img-empty {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
}

.pz-detail__info {
    padding: 16px 0 0;
}

.pz-detail__title {
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text-500);
    margin: 0 0 8px;
    line-height: 1.4;
}

.pz-detail__points {
    font-size: 20px;
    color: var(--color-brown-300);
    margin: 0 0 4px;
    font-weight: 400;
}

.pz-detail__subtitle {
    font-size: 15px;
    color: var(--color-text-500);
    margin: 0 0 8px;
}

.pz-detail__remain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--color-text-100);
}

    .pz-detail__remain img {
        width: 16px;
        height: 16px;
    }

.pz-detail__action {
    padding: 20px 0 0;
    justify-self:center;
}

.pz-detail__redeem-btn {
    display: block;
    width: 280px;
    padding: 10px 0;
    border: 1px solid var(--color-brown-300);
    font-size: 16px;
    color: var(--color-white);
    background: var(--color-brown-300);
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s;
}

    .pz-detail__redeem-btn:hover {
        opacity: 0.85;
    }

.pz-detail__redeem-btn--disabled {
    background: var(--color-line);
    border-color: var(--color-line);
    color: var(--color-white);
    cursor: not-allowed;
}

    .pz-detail__redeem-btn--disabled:hover {
        opacity: 1;
    }

/* 右欄 */
.pz-detail__right {
    flex: 1;
    min-width: 0;
}

.pz-detail__section {
    margin-bottom: 24px;
}

.pz-detail__section-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-brown-300);
    margin: 0 0 8px;
}

.pz-detail__desc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

    .pz-detail__desc-list li {
        font-size: 16px;
        color: var(--color-text-500);
        line-height: 150%;
    }

.pz-detail__label {
}

.pz-detail__rich-text {
    font-size: 15px;
    color: var(--color-text-500);
    line-height: 1.8;
}

    .pz-detail__rich-text ol {
        padding-left: 20px;
        margin: 0;
    }

        .pz-detail__rich-text ol li {
            line-height: 1.8;
        }

/* ===== 我的票匣 ===== */
.my-tickets {
    max-width: 1200px;
    width: 100%;
    margin: 0;
    padding: 0 0 80px;
    justify-self: center;
}

/* Tab 切換列 */
.my-tickets__tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 24px 0 20px;
}

.my-tickets__tab {
    padding: 8px 32px;
    font-size: 16px;
    border: 1px solid var(--color-brown-800);
    background: var(--color-white);
    color: var(--color-brown-800);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 24px;
}

    .my-tickets__tab + .my-tickets__tab {
        margin-left: 8px;
    }

    .my-tickets__tab.is-active {
        background: var(--color-brown-800);
        color: var(--color-white);
    }

/* Panel 顯示控制 */
.my-tickets__panel {
    display: none;
}

    .my-tickets__panel.is-active {
        display: block;
    }

/* 卡片 grid */
.my-tickets__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* 卡片 */
.my-tickets__card {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-white);
    padding:8px;
}

.my-tickets__card--disabled {
    opacity: 0.7;
}

/* 左側標籤區 */
.my-tickets__card-label {
    flex: 0 0 80px;
    height:80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brown-300);
    position: relative;
    overflow: hidden;
}

    .my-tickets__card-label::after {
        content: '';
        position: absolute;
        top: 50%;
        left: -8px;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background: var(--color-white);
        border-radius: 50%;
    }

.my-tickets__card-label-text {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-white);
    writing-mode: horizontal-tb;
    text-align: center;
    padding: 0 12px;
}

.my-tickets__card-label--disabled {
    background: var(--color-text-300);
}

/* 卡片內容 */
.my-tickets__card-body {
    flex: 1;
    min-width: 0;
    padding: 8px 5px 8px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.my-tickets__card-title {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-500);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-tickets__card-subtitle {
    font-size: 14px;
    color: var(--color-text-300);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-tickets__card-date {
    font-size: 12px;
    color: var(--color-text-100);
    margin: 0;
}

/* 卡片右側操作區 */
.my-tickets__card-action {
    flex: 0 0 auto;
    display: flex;
    align-items: end;
}

.my-tickets__use-btn {
    padding: 4px 20px;
    border: 1px solid var(--color-brown-300);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-brown-300);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .my-tickets__use-btn:hover {
        background: var(--color-brown-300);
        color: var(--color-white);
    }

.my-tickets__expired-tag {
    font-size: 14px;
    color: #e8763a;
    white-space: nowrap;
}

.my-tickets__empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--color-placeholder);
    font-size: 16px;
}

/* 載入更多 */
.my-tickets__load-more {
    text-align: center;
    padding: 24px 0 0;
}

.my-tickets__load-more-btn {
    padding: 10px 48px;
    border: 1px solid var(--color-brown-300);
    border-radius: 24px;
    font-size: 15px;
    color: var(--color-brown-300);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

    .my-tickets__load-more-btn:hover {
        background: var(--color-brown-300);
        color: var(--color-white);
    }

/* ===== 會員資料頁（復用 .register-page 表單樣式） ===== */
.profile-page__section-title {
    text-align: center;
    margin-bottom: 8px;
}

.profile-page__section-sub {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-placeholder);
    margin-left: 8px;
}

.profile-page__note {
    text-align: right;
    font-size: 14px;
    color: var(--color-text-500);
    margin-bottom: 24px;
}

/* 唯讀 input */
.register-page__input--readonly {
    color: var(--color-placeholder);
    background-color: #f5f5f5;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: not-allowed;
}

/* 行動電話 + 修改手機按鈕 */
.profile-page__mobile-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-page__mobile-input {
    flex: 1;
    min-width: 0;
}

.profile-page__btn-mobile {
    flex-shrink: 0;
    padding: 8px 20px;
    font-size: 14px;
    color: #fff;
    background-color: var(--color-brown-300);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

    .profile-page__btn-mobile:hover {
        opacity: 0.85;
    }

/* 按鈕組（取消 + 確認修改） */
.profile-page__btn-group {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.profile-page__btn {
    display: block;
    min-width: 160px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 400;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s;
    border: none;
}

.profile-page__btn--submit {
    color: #fff;
    background-color: var(--color-brown-300);
}

    .profile-page__btn--submit:hover {
        opacity: 0.85;
    }

.profile-page__btn--cancel {
    color: var(--color-brown-300);
    background-color: transparent;
    border: 1px solid var(--color-brown-300);
}

    .profile-page__btn--cancel:hover {
        opacity: 0.85;
    }

.profile-page__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 48px 0;
}

/* ===== 修改手機驗證碼彈窗 ===== */
.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.profile-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 40px 32px;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.profile-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-500);
    cursor: pointer;
    line-height: 1;
}

    .profile-modal__close:hover {
        opacity: 0.6;
    }

.profile-modal__title {
    font-family: Roboto, serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--color-text-500);
    text-align: center;
    margin: 0 0 12px;
}

.profile-modal__desc {
    font-size: 14px;
    color: var(--color-placeholder);
    text-align: center;
    margin: 0 0 28px;
    line-height: 1.6;
}

.profile-modal__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.profile-modal__verify-btn {
    width: 100%;
}

.profile-modal__resend {
    background: none;
    border: none;
    font-size: 15px;
    color: var(--color-brown-300);
    cursor: pointer;
    text-decoration: underline;
    transition: opacity 0.2s;
}

    .profile-modal__resend:hover {
        opacity: 0.7;
    }

    .profile-modal__resend:disabled {
        color: var(--color-placeholder);
        cursor: not-allowed;
        text-decoration: none;
    }

/* ===== 點數查詢 Bonus Record ===== */
.bonus-record {
    max-width: 1040px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.bonus-record__top {
    display: flex;
    gap: 24px;
    padding: 40px 0;
}

/* -- 會員卡 -- */
.bonus-record__card {
    flex: 0 0 calc(63% - 30px);
    display: flex;
    gap: 30px;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 1px 1px 10px 0px rgba(142, 142, 142, 0.25);
    justify-content: space-between
}

.bonus-record__card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top:8px;
}

.bonus-record__card-name {
    font-size: 24px;
    font-weight:var(--font-weight-semibold);
    color: var(--color-brown-300);
    margin-bottom:16px;
}

.bonus-record__card-sub {
    font-size: 18px;
    color: var(--color-text-300);
}

.bonus-record__card-img {
    width:auto;
    max-width:300px;
}

    .bonus-record__card-img img {
        width: 100%;
        height: auto;
        display: block;
    }

/* -- 點數摘要 -- */
/* -- 點數摘要 -- */
.bonus-record__summary {
    flex: 1;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 1px 1px 10px 0px rgba(142, 142, 142, 0.25);
}

.bonus-record__summary-top {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 4px;
}

.bonus-record__summary-badge {
    width: 50px;
    height: 50px;
}

.bonus-record__summary-main {
    display: flex;
    flex-direction: column;
}

.bonus-record__summary-header {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-300);
    margin-bottom: 0px;
}

.bonus-record__summary-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.bonus-record__summary-value {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-brown-300);
    line-height: 34px;
    letter-spacing:1.3px;
}

.bonus-record__summary-unit {
    font-size: 18px;
    color: var(--color-text-300);
    line-height: 34px;
    letter-spacing: 1.3px;
    font-weight: var(--font-weight-medium);
}

.bonus-record__summary-desc {
    font-size: 13px;
    color: var(--color-text-100);
    margin-top: 2px;
    margin-bottom: 0px;
}

.bonus-record__summary-expire {
    display: flex;
     padding-top: 20px;
}

.bonus-record__expire-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .bonus-record__expire-item + .bonus-record__expire-item {
        border-left: 1px solid var(--color-line);
        padding-left: 32px;
    }

.bonus-record__expire-label {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-300);
}

.bonus-record__expire-points {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.bonus-record__expire-value {
    font-size: 28px;
    font-weight: bold;
    color: var(--color-brown-300);
    line-height: 1.2;
}

.bonus-record__expire-unit {
    font-size: 14px;
    color: var(--color-text-300);
}

.bonus-record__expire-date {
    font-size: 12px;
    color: var(--color-text-100);
}

/* -- 消費紀錄標題 -- */
.bonus-record__history-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 0;
    justify-content:center;
}

.bonus-record__history-title {
    font-size: 32px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-500);
}

.bonus-record__history-subtitle {
    font-size: 14px;
    color: var(--color-text-300);
}

.bonus-record__divider {
    border: none;
    border-top: 1px solid var(--color-line);
    margin: 16px 0 0;
}


/* -- Tab -- */
.bonus-record__tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 24px 0 20px;
}

.bonus-record__tab {
    padding: 8px 32px;
    font-size: 16px;
    border: 1px solid var(--color-brown-800);
    background: var(--color-white);
    color: var(--color-brown-800);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 24px;
}

    .bonus-record__tab + .bonus-record__tab {
        margin-left: 8px;
    }

    .bonus-record__tab.is-active {
        background: var(--color-brown-800);
        color: var(--color-white);
    }

/* -- Panel -- */
.bonus-record__panel {
    display: none;
}

    .bonus-record__panel.is-active {
        display: block;
    }

/* -- Table -- */
.bonus-record__table-wrap {
    overflow-x: auto;
    box-shadow: 1px 1px 4px 0px rgba(142, 142, 142, 0.25);
}

.bonus-record__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .bonus-record__table thead th {
        background-color: var(--color-gray-600);
        color: #fff;
        font-size: 18px;
        font-weight: var(--font-weight-medium);
        padding: 14px 24px;
        text-align: left;
        white-space: nowrap;
    }

        .bonus-record__table thead th:first-child {
            border-radius: 12px 0 0 0;
        }

        .bonus-record__table thead th:last-child {
            border-radius: 0 12px 0 0;
        }

        /* 2. 針對最後一列 (tr:last-child) 的 左下角 (td:first-child) */
        .bonus-record__table tbody tr:last-child td:first-child {
            border-radius: 0 0 0 12px; /* 左下角 */
        }

        /* 3. 針對最後一列 (tr:last-child) 的 右下角 (td:last-child) */
        .bonus-record__table tbody tr:last-child td:last-child {
            border-radius: 0 0 12px 0; /* 右下角 */
        }

    .bonus-record__table tbody tr {
        border-bottom: 1px solid var(--color-line);
    }

    .bonus-record__table tbody td {
        padding: 20px 24px;
        font-size: 15px;
        color: var(--color-text-500);
        border-bottom: 1px solid var(--color-line);
        vertical-align: middle;
    }

/* -- 類型欄 icon + 文字 -- */
.bonus-record__type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.bonus-record__type-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.bonus-record__type-icon--earn {
    background-color: var(--color-brown-300);
    color: #fff;
}

.bonus-record__type-icon--redeem {
    background-color: var(--color-gray-600);
    color: #fff;
}

/* 點數變動欄 — 統一用強調色 */
.bonus-record__points {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--color-brown-300);
}

/* -- Empty -- */
.bonus-record__empty {
    text-align: center;
    padding: 60px 0;
    color: var(--color-placeholder);
    font-size: 16px;
}

/* -- 載入更多 -- */
.bonus-record__load-more {
    text-align: center;
    padding: 24px 0;
}

.bonus-record__load-more-btn {
    padding: 10px 48px;
    font-size: 16px;
    border: 1px solid var(--color-brown-800);
    border-radius: 24px;
    background: #fff;
    color: var(--color-brown-800);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .bonus-record__load-more-btn:hover {
        background: var(--color-brown-800);
        color: #fff;
    }

/* ===== 會員優惠 Member Discount ===== */
.member-discount {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.member-discount__header {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    padding: 40px 0 0;
}

.member-discount__title {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-text-500);
}

.member-discount__subtitle {
    font-size: 14px;
    color: var(--color-text-300);
}

.member-discount__divider {
    border: none;
    border-top: 1px solid var(--color-line);
    margin: 16px 0 0;
}

/* -- 手風琴 -- */
.member-discount__accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
}

.member-discount__item {
    border-radius: 12px;
    transition: background-color 0.3s;
    box-shadow: 1px 1px 10px 0px rgba(142, 142, 142, 0.25);
}

    .member-discount__item.is-open {
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

.member-discount__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.member-discount__question-text {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-text-500);
    line-height: 1.4;
}

.is-open .member-discount__question-text {
    color: var(--color-brown-300);
}

/* +/- icon */
.member-discount__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 16px;
    position: relative;
}

    .member-discount__icon::before,
    .member-discount__icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: var(--color-text-300);
        transition: transform 0.3s;
    }

    /* 橫線 (—) */
    .member-discount__icon::before {
        width: 18px;
        height: 2px;
        transform: translate(-50%, -50%);
    }

    /* 直線 (|)，展開時消失 */
    .member-discount__icon::after {
        width: 2px;
        height: 18px;
        transform: translate(-50%, -50%);
    }

.is-open .member-discount__icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}

/* -- 答案區 -- */
.member-discount__answer {
    display: none;
    overflow: hidden;
}

.member-discount__answer-content {
    padding: 0 32px 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-500);
}

    /* 確保 HTML 內容中的圖片自適應 */
    .member-discount__answer-content img {
        max-width: 100%;
        height: auto;
    }

/* -- Empty -- */
.member-discount__empty {
    text-align: center;
    padding: 60px 0;
    color: var(--color-placeholder);
    font-size: 16px;
}
.register-page__desc {
    text-align: center;
    font-size: 15px;
    color: var(--color-text-300);
    margin-bottom: 32px;
    line-height: 1.6;
}

/* =========================================
   21-2. 推薦行程內頁 itinerary-detail
   ========================================= */
.itinerary-detail {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 60px 60px;
}

.itinerary-detail__head {
    margin-bottom: 24px;
    display:flex;
    justify-content:center;
}

.itinerary-detail__name {
    font-size: 32px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    margin: 0 0 8px;
}

.itinerary-detail__type {
    display: inline-block;
    padding: 4px 16px;
    border: 1px solid var(--color-brown-300);
    color: var(--color-brown-300);
    font-size: 14px;
    border-radius: 4px;
}

.itinerary-detail__desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-300);
    margin-bottom: 32px;
    white-space: pre-line;
}

.itinerary-detail__image {
    margin-bottom: 40px;
}

    .itinerary-detail__image img {
        width: auto;
        max-width:100%;
        height: auto;
        display: block;
    }

/* 地圖 + 地點清單 */
.itinerary-detail__map-section {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
}

.itinerary-detail__map-wrap {
    flex: 1 1 60%;
    min-width: 0;
}

.itinerary-detail__map {
    width: 100%;
    height: 480px;
    border-radius: 8px;
    border: 1px solid var(--color-line);
    z-index: 1;
}

.itinerary-detail__locations {
    flex: 0 0 35%;
    max-height: 480px;
    overflow-y: auto;
}

.itinerary-detail__locations-title {
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-line);
}

.itinerary-detail__location-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.itinerary-detail__location-item {
    border-bottom: 1px solid #eee;
}

    .itinerary-detail__location-item.is-active {
        background: #f9f5ef;
    }

.itinerary-detail__location-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

    .itinerary-detail__location-btn:hover {
        background: #f9f5ef;
    }

.itinerary-detail__location-seq {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-brown-300);
    color: var(--color-white);
    font-size: 14px;
    flex-shrink: 0;
}

.itinerary-detail__location-name {
    font-size: 16px;
    color: var(--color-text-500);
}
.itinerary-detail__location-desc {
    font-size: 14px;
    color: var(--color-gray);
    margin: 4px 0 0;
    line-height: 1.5;
    white-space: pre-line;
}
/* Leaflet Popup 樣式 */
.itinerary-popup {
    text-align: center;
    min-width: 120px;
}

.itinerary-popup__nav-btn {
    display: inline-block;
    padding: 4px 16px;
    background: var(--color-brown-300);
    color: var(--color-white) !important;
    font-size: 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s;
}

    .itinerary-popup__nav-btn:hover {
        background: var(--color-brown-800);
    }

/* =========================================
   快速預訂懸浮按鈕 quick-booking
   ========================================= */
.quick-booking {
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

/* ── 展開選單 ── */
.quick-booking__menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    pointer-events: none;
}

.quick-booking.is-open .quick-booking__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.quick-booking__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--color-white);
    text-decoration: none;
    transition: background 0.2s;
    box-shadow: 0px 4px 10px 0px #0000000F;
}

    .quick-booking__item:hover {
        background: var(--color-brown-300);
    }

        .quick-booking__item:hover .quick-booking__item-text {
            color: var(--color-white);
        }

.quick-booking__item-text {
    font-size: 20px;
    color: var(--color-brown-300);
    text-align: center;
    transition: color 0.2s;
    letter-spacing:0.06em;
}

/* ── 主按鈕（弧形文字 + 圓形） ── */
.quick-booking__toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}

/* 弧形文字：浮在圓形上方 */
.quick-booking__arc-text {
    width: 180px;
    height: 180px;
    margin-bottom: -100px;
}

    .quick-booking__arc-text text {
        font-size: 16px;
        fill: var(--color-brown-300);
        letter-spacing: 1px;
    }

/* 圓形本體 */
.quick-booking__circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(211.05deg, #BCA38F 30.87%, #A07E63 71.73%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -8px 18px 21px 0px #6C502B47;
    transition: transform 0.2s, box-shadow 0.2s;
}

.quick-booking__toggle:hover .quick-booking__circle {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(163, 136, 96, 0.45);
}

.quick-booking__circle-text {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-white);
    letter-spacing: 0.06em;
}

/* =========================================
   首頁線上訂房懸浮按鈕
   ========================================= */
.home-booking-btn {
    position: fixed;
    left: 0;
    top: 300px;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 42px;
    padding: 13px 0;
    background: linear-gradient(211.05deg, #BCA38F 30.87%, #A07E63 71.73%);
    border-radius: 0 6px 6px 0;
    text-decoration: none;
    color: var(--color-white);
    writing-mode: vertical-rl;
    box-shadow: 2px 4px 10px 0px #00000040;
    transition: background 0.2s;
}

    .home-booking-btn:hover {
        background: linear-gradient(211.05deg, #BCA38F 30.87%, #A07E63 90%);
        color: var(--color-white);
    }

.home-booking-btn__icon {
    width: 24px;
    height: 24px;
    writing-mode: horizontal-tb;
}

.home-booking-btn__text {
    font-size: 16px;
    letter-spacing: 4px;
    color: var(--color-white);
}
/* =========================================
   全站搜尋結果頁 search-result
   ========================================= */
.search-result {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 60px 60px;
}

.search-result__summary {
    font-size: 18px;
    color: var(--color-text-300);
    margin-bottom: 40px;
}

.search-result__empty {
    text-align: center;
    font-size: 16px;
    color: var(--color-text-100);
    padding: 60px 0;
}

.search-result__section {
    margin-bottom: 56px;
}

.search-result__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-line);
}

.search-result__section-title {
    font-size: 24px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-500);
    margin: 0;
}

.search-result__count {
    font-size: 16px;
    color: var(--color-text-100);
}

.search-result__more {
    font-size: 14px;
    color: var(--color-brown-300);
    text-decoration: none;
    border: 1px solid var(--color-brown-300);
    padding: 6px 20px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

    .search-result__more:hover {
        background: var(--color-brown-300);
        color: var(--color-white);
    }

/* =========================================
   14. 響應式排版集中區 (Media Queries)
   ========================================= */
/* --- [ 平板斷點：1200px 以下 (md, lg 等) ] --- */
@media (max-width: 1200px) {
    .block-h1 {
    font-size: 18px !important;
    letter-spacing: 0.01em !important;
    line-height: 25.2px !important;
  }

  .block-h2 {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .content-text {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  .image-bottom-text {
    font-size: 12px !important;
    line-height: 10.88px !important;
    margin-top: 2px !important;
  }

  /* T1 手機：強制 1:1 正方形 */
  .t1-image-container {
    column-gap: 16px;
    margin-top: 11px;
  }

  .t1-default-img {
    height: auto !important;
    aspect-ratio: 462 / 363 !important;
  }

  .t1-content-container {
    margin-top: 11px;
  }

  /* T2 手機：維持原圖比例 */
  .template-2-top-row {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 11px;
  }

  .template-2-image-wrapper {
    width: 100%;
    flex: none;
  }

  .template-2-default-img {
    height: auto !important;
    aspect-ratio: 558 / 438 !important;
  }

  .template-2-content-container {
    margin-top: 11px;
  }

  /* T3 手機：維持狹長比例 */
  .template-3-top-row {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 11px;
  }

  .template-3-image-wrapper {
    width: 100%;
    flex: none;
  }

  .template-3-default-img {
    height: auto !important;
    aspect-ratio: 390 / 440 !important;
  }

  .template-3-content-container {
    margin-top: 11px;
  }

  /* T4 手機：維持長方形比例 */
  .t4-image-container {
    column-gap: 16px;
    margin-top: 11px;
  }

  .t4-default-img {
    height: auto !important;
    aspect-ratio: 462 / 550 !important;
  }

  .t4-content-container {
    margin-top: 11px;
  }

  .t5-content-container {
    margin-top: 11px;
  }

  /* ========
   1. Header
   ======== */
  .header-spacer {
    height: var(--header-height-md);
  }

  .header-inner {
    height: var(--header-height-md);
    padding: 0 24px;
  }

  .header-logo__img {
    height: 48px;
  }

  /* ========
       2. Footer
       ======== */
  .footer-inner {
    padding: 17px 23px;
  }

  .footer-top {
    min-height: auto;
  }

  .footer-logo__img {
    width: 152px;
  }

  .footer-divider {
    margin: 20px 0 32px;
  }

  .footer-body {
    gap: 24px;
    flex-wrap: wrap;
  }

  .footer-col--hotel {
    flex: 1 1 32%;
    min-width: 0;
  }

  .footer-col--booking {
    flex: 1 1 32%;
    min-width: 0;
  }

  /* QR Code 移到下一行置中 */
  .footer-col--qrcode {
    position: static; /* ← 新增：還原為流內元素 */
    left: auto; /* ← 新增 */
    transform: none; /* ← 新增 */
    order: 3;
    flex: 0 0 100%;
    justify-content: center;
    margin-top: 8px;
  }

  .footer-col--series {
    gap: 28px;
  }

  /* 系列文字改為上下排列 */
  .footer-series {
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
  }

  .footer-copyright {
    margin-top: 32px;
  }

  /* ========
       3. 首頁
       ======== */
  .home-container {
    padding: 0 32px;
  }

    .hot-search {
        padding: 48px 0 60px;
    }
     .hot-search .home-container{
         padding:0px 8px;
     }

    .hot-search__list {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0;
        gap: 20px;
    }

    .hot-search__list::-webkit-scrollbar {
        display: none;
    }

    .hot-search__item {
        flex: 0 0 340px;
        scroll-snap-align: none;
    }

    .hot-search__name {
        font-size: 16px;
    }
  .hero {
    height: 420px;
  }

  .hero__nav {
    left: 32px;
    bottom: 24px;
  }

  .room-type-container {
    padding: 0px;
  }

  .room-type-container .section-head {
    padding-left: 40px;
  }

  .rooms__card-meta {
    justify-content: center;
    border-bottom: none;
  }

  .rooms__photo {
    width: 100%;
    height: 420px;
  }

  .rooms__card {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    display: block; /* 取消 flex，actions 不再吸底 */
  }

  .rooms__card-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }

  .rooms,
  .dining,
  .biz-wedding,
  .gallery {
    padding: 64px 0;
  }

  .travel {
    padding: 64px 0 80px;
  }

  /* 客房：卡片移到圖片下方 */
  .rooms__photo {
    height: 420px;
  }

  .rooms__card {
    position: static;
    width: 100%;
  }

  /* 餐飲：直向堆疊 */
  /* 餐飲：標題 → 圖 → 描述 → 合併按鈕 */
  .dining__inner {
    flex-direction: column;
    gap: 40px;
  }

  .dining__text {
    display: contents; /* 讓子元素直接參與排序 */
  }

  .dining .section-head {
    order: 1;
    margin-bottom: 0;
  }

  .dining__gallery {
    order: 2;
    width: 100%;
    max-width: 100%;
    gap: 16px;
  }

  .dining__descs {
    order: 3;
  }

  .dining__btns {
    display: none; /* 隱藏 xl 的兩顆按鈕 */
  }

  .dining__btn-merged {
    display: inline-flex;
    order: 4;
    align-self: center;
  }

  .dining__img {
    max-width: none;
  }

  .dining__img--1 {
    margin-top: 70px;
  }

  .dining__img--2 {
    margin-top: -30px;
  }

  .dining__img--3 {
    margin-top: 28px;
  }

  .dining__deco-circle {
    width: 72px;
  }

  /* 商務/婚宴：md/sm 直向排列，婚宴在前、圖上文下 */
  .biz-wedding__grid {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .biz-wedding__col {
    display: contents; /* 讓四個項目直接參與 grid 的排序 */
  }

  .biz-wedding__img--wedding {
    order: 1;
  }

  .biz-wedding__text--wedding {
    order: 2;
    margin-bottom: 32px; /* 32(gap) + 32 = 婚宴與商務之間 64px */
  }

  .biz-wedding__img--business {
    order: 3;
  }

  .biz-wedding__text--business {
    order: 4;
  }

  .biz-wedding__img--business,
  .biz-wedding__img--wedding {
    width: 100%; /* 還原 xl 的固定寬度 */
  }

  .biz-wedding__text {
    max-width: none;
  }

  .biz-wedding__deco-circle {
    width: 62px;
  }

  .biz-wedding__row--business {
    flex-direction: column-reverse;
  }

  .biz-wedding__text {
    flex: none;
  }

  /* 光影時刻：md 沿用 xl 排版，內容撐滿容器（768 時約 737 寬） */
  .gallery__layout {
    width: 100%;
  }

  /* 在地旅行：圖在上、文字中、縮圖橫排在下（寬度以大圖為準，超出左右滑動 + 邊界淡出） */
  .travel__inner {
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
    align-items: flex-start;
    position: static; /* ← 新增：還原 */
    padding-left: 0; /* ← 新增：還原 */
  }

  .travel__photo {
    flex: 0 0 100%;
    order: 1;
  }

  .travel__content {
    flex: 1 1 100%;
    order: 2;
    padding-top: 0;
  }

  .travel__thumbs,
  .travel__thumbs--scroll {
    position: static; /* ← 新增：還原 */
    width: 100%;
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    overflow-y: visible;
    overflow-x: auto;
    padding: 4px 0;
    /* 左右邊界漸淡 */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 40px,
      #000 calc(100% - 40px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 40px,
      #000 calc(100% - 40px),
      transparent 100%
    );
  }

  /* md 縮圖回固定尺寸 */
  .travel__thumb-img {
    width: 108px;
    height: 108px;
  }

  .travel__thumb.is-active .travel__thumb-img {
    width: 138px;
    height: 138px;
  }

  /* ========
       4.  內頁 Banner
       ======== */
  .page-banner {
    --banner-ratio: 768 / 238;
  }

  .page-banner__inner {
    padding: 0 24px 20px;
  }

    .page-banner--shared {
        --banner-ratio: 768 / 166;
    }
        /* =========================================
   5, 內頁分類導覽 PageNav
   ========================================= */
        /* 內頁分類導覽：divider 間距縮小、底線 739/768、與底線間距 21.5 */
        .page-nav__list {
    margin-bottom: 21.5px;
  }

  .page-nav__divider {
    margin: 0 12px;
  }

  .page-nav__line {
    width: min(96.22vw, 739px); /* 739 / 768 */
  }

  .pagination {
    margin-top: 48px;
  }

  /* =========================================
   6. 飯店介紹內頁 hotel-intro
   ========================================= */
  .hotel-intro {
    padding: 40px 44px 64px; /* 左右 44 */
  }

  .hotel-intro__grid {
    flex-direction: column;
    gap: 36px;
  }

  .hotel-intro__col {
    display: contents; /* 拆散兩欄，讓四個項目直接參與排序 */
  }

  .hotel-intro__img--a {
    order: 1;
    aspect-ratio: 678 / 429;
  }

  .hotel-intro__body--1 {
    order: 2;
    margin-bottom: 24px; /* 與下一組的加大間距，可微調 */
  }

  .hotel-intro__img--b {
    order: 3;
    aspect-ratio: 678 / 438;
  }

  .hotel-intro__body--2 {
    order: 4;
  }

  /* =========================================
   7. 休閒設施列表 facility-list
   ========================================= */
  .facility-list {
    padding: 48px 64px 64px;
  }

  .facility-list__grid {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }

  .facility-card__img {
    aspect-ratio: 640 / 380; /* 維持比例，寬度=容器寬 */
  }

  /* 內頁版型：直向排列，順序 圖 → 文字 → Table → Description */
  .detail-layout {
    flex-direction: column;
    padding: 24px 50px 58px; /* banner 24、footer 58、左右 50 */
  }

  .detail-layout__divider {
    display: none;
  }

  .detail-layout__side {
    position: static;
    flex: none;
    order: 2;
    width: 100%;
    /* 文字區塊 padding 同 facility-card__body */
    padding: 24px 0 24px 20px;
  }

  .detail-layout__main {
    display: contents; /* 拆散：圖、Table、Description 直接參與排序 */
  }

  .facility-detail__carousel {
    order: 1;
    aspect-ratio: 775 / 417; /* 圖片比例，各內頁可覆寫 */
  }

  .detail-table {
    order: 3;
    margin-top: 0;
  }

  .detail-table + .detail-table {
    margin-top: 24px;
  }

  /* Table：隱藏橫向捲軸（仍可滑動） */
  .detail-table__scroll {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* 舊版 Edge/IE */
  }

  .detail-table__scroll::-webkit-scrollbar {
    display: none; /* Chrome / Safari */
  }

  .facility-detail__desc {
    order: 4;
    margin-top: 24px;
  }

  /* 404 頁面 */
  .error-page {
    min-height: calc(100vh - var(--header-height-md) - 160px);
    padding: 64px 32px;
  }

  .error-page__code {
    font-size: 120px;
  }

  .error-page__deco-circle {
    width: 62px;
    bottom: 24px;
  }

  /* 榮譽事蹟：隱藏人物圖 */
  .awards {
    padding: 32px 76px 30px; /* 左右 76、與 Footer 30 */
  }

  .awards__figure {
    display: none;
  }

  .awards__item-name {
    font-size: 32px;
  }

  .awards__year {
    font-size: 32px;
  }
  .awards__node::before {
    top: 10px;
  }

  /* 藝術典藏 */
  .art-collection {
    padding: 24px 10px;
  }

  .art-collection__grid {
    gap: 16px;
  }

  .art-card {
    padding: 32px 16px;
  }

  .art-card__name {
    font-size: 36px;
  }

  /* 媒體部落客列表：1 row 2 col */
  .media-list {
    padding: 25px 35px;
  }

  .media-list__grid {
    grid-template-columns: repeat(2, minmax(0, 340px));
    gap: 16px;
  }

  /* 熱門搜尋列表：1 row 2 col */
  .news-list {
    padding: 30px 35px; /* 左右 35（設計稿未定，比照媒體部落客） */
  }

  .news-list__grid {
    grid-template-columns: repeat(2, minmax(0, 360px));
    gap: 16px;
  }

  /* 熱門搜尋內頁：沿用 xl 排版，間距縮小 */
  .news-detail {
    padding: 32px 60px;
  }

  .news-detail__content {
    margin-top: 20px;
    padding-left: 0px;
    padding-right: 0px;
  }

    /* 商務會議 */
    .meeting-hero {
        padding: 0;
        min-height: 0;
        display: flex;
        flex-direction: column-reverse;
    }

    /* 商務會議 */
    .meeting-hero__inner {
        padding: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .meeting-hero__img {
        position: static;
        order: 1;
        width: 100%;
        max-height:596px;
        right: auto;
        top: auto;
        height: auto;
        border-radius: 0;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

        .meeting-hero__img img {
            position: static;
            width: 100%;
            height: 100%;
            transform: none;
        }

    .meeting-hero__text {
        order: 2;
        width: 100%;
        padding: 24px 24px 6px;
    }

    .meeting-site__inner,
    .meeting-site--even .meeting-site__inner {
        padding: 55px 24px; /* ← 搬到 inner */
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
    }

    .meeting-site__inner,
    .meeting-site--even .meeting-site__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
    }

    .meeting-site__album {
        flex: none;
        width: 100%;
        gap: min(2.99vw, 23px); /* 23 / 768 */
    }

    .meeting-site__album-btn,
    .meeting-site__album-cell--2 {
        aspect-ratio: 345 / 376;
    }

    .meeting-site__album-cell--3 {
        aspect-ratio: 720 / 278;
    }

    .meeting-site__text {
        flex: none;
        width: 100%;
    }

    .meeting-site__name {
        font-size: 36px;
    }

    /* 服務介紹 */
    .meeting-service {
        padding: 30px 23px;
    }

    /* 場地規格 */
    .meeting-spec {
        padding: 40px 12px;
    }

    /* 璀璨婚宴：上方圖文改直向 */
    .wedding-hero__inner {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    .wedding-hero__img {
        flex: none;
        width: 100%;
        max-width:none;
    }

        /* 圖片貼邊、高度固定 660，超出寬度隱藏 */
        .wedding-hero__img img {
            aspect-ratio: auto;
            height: 660px;
            left:0px;
            width:100%;
            max-width:none;
        }

    .wedding-hero__text {
        flex: none;
        width: 100%;
        padding: 25px;
        top:0px;
    }

    /* md/sm 不顯示文字圖片與花草 */
    .wedding-hero__signature,
    .wedding-hero__deco {
        display: none;
    }

    /* 場地：僅間距不同 */
    .wedding-sites {
        gap: 18px;
    }

    /* 璀璨婚宴內頁：padding 16、side 無左右 padding */
    .wedding-detail.detail-layout {
        padding: 16px;
    }

    .wedding-detail .detail-layout__side {
        padding: 24px 0;
    }

        /* 覆寫共用版型的子元素縮排 */
        .wedding-detail .detail-layout__side .facility-card__sub,
        .wedding-detail .detail-layout__side .facility-card__intro,
        .wedding-detail .detail-layout__side .facility-card__info,
        .wedding-detail .detail-layout__side .facility-detail__head {
            padding-left: 0;
        }

    .wedding-detail .detail-layout__main {
        flex: none;
    }

    .wedding-detail__carousel {
        order: 1;
        aspect-ratio: 736 / 332; /* 768 − 32 */
    }

    .wedding-detail__table {
        order: 3;
        margin-top: 24px;
    }

    .wedding-detail__actions {
        justify-content: start;
    }

    .wedding-detail__contact {
        order: 4;
        margin-top: 32px;
        left:0;
    }

    /* 線上購物列表：1 row 2 col */
    .shop-list {
        padding: 30px 40px; /* 左右 40（設計稿未定，768 時內容 688 = 2×304 + 24 + 餘裕） */
    }

    .shop-list__grid {
        grid-template-columns: repeat(2, minmax(0, 304px));
        gap: 24px;
    }

    /* 線上購物內頁：padding 縮小 */
    .shop-detail {
        padding: 32px 60px 64px;
    }

    .shop-detail__body {
        padding: 0px;
    }

    .shop-detail__title {
        font-size: 28px;
    }

    /* 房型總覽：圖上文下 */
    .room-list {
        padding: 32px 44px 64px;
    }

    .room-filter {
        flex-wrap: wrap;
        gap: 16px 24px;
        margin-bottom: 32px;
    }

    .room-item {
        flex-direction: column;
        gap: 0;
    }

    .room-item__img {
        flex: none;
        width: 100%;
    }

    .room-item__body {
        flex: none;
        width: 100%;
        padding: 24px 0;
    }

    .room-item__name {
        font-size: 28px;
    }


    .room-item__bottom {
        border-top: none;
        margin-top: 16px;
        padding-top: 16px;
    }
    /* 房型內頁：垂直排列，圖在上文在下 */
    .room-detail-main {
        min-height: 0;
        padding: 0;
        overflow: visible;
    }

    .room-detail-main__img {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 920 / 686; /* md/sm 改等比縮放 */
    }

        .room-detail-main__img img {
            object-position: center;
        }

    .room-detail-main__body {
        width: 100%;
        padding: 24px;
    }

    .room-detail__name {
        font-size: 32px;
    }

    .room-detail-sub {
        flex-direction: column;
        margin-top: 48px;
        padding: 0 24px 64px;
        gap: 32px;
    }

    .room-detail-sub__text,
    .room-detail-sub__carousel {
        flex: none;
        width: 100%;
        order: 2;
    }

    .room-detail-sub__carousel {
        order: 1; /* 圖在上 */
    }

    .room-detail__facilities {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 36px;
    }

    .price-modal__panel {
        padding: 32px 24px;
    }

    /* 主題餐廳列表 */
    .rest-list-heading {
        padding: 32px 16px;
    }

    .rest-list {
        padding: 0 16px 64px;
    }

    .rest-list__grid {
        grid-template-columns: repeat(2, minmax(0, 361px));
        column-gap: 16px;
        row-gap: 16px;
    }

    .rest-card__img {
        aspect-ratio: 361 / 297;
    }


    .rest-card__place {
        font-size: 16px;
        padding: 9px 9px;
    }

    .restaurant-detail.detail-layout {
        padding: 40px 21px 36px;
    }

    .rest-detail__content {
        order: 4;
        margin-top: 24px;
        padding: 24px 0 24px 20px;
    }

    /* 聯絡我們 */
    .contact-us {
        padding: 32px 16px 64px;
    }

    /* 活動報名內頁 md */
    .event-detail {
        padding: 32px 60px;
    }

    .event-detail__info-card {
        flex-direction: column;
        gap: 16px;
        padding: 30px;
    }

    .event-detail__img-wrap {
        flex: none;
        max-width: 100%;
    }

    .event-detail__img {
        aspect-ratio: 585 / 394;
    }

    .event-detail__section-title {
        margin-top: 40px;
    }

    .event-modal-box {
        max-width: 700px;
        padding: 48px 32px 40px;
    }

    .event-reg-summary {
        flex-direction: column;
        gap: 16px;
    }

    .event-reg-summary__img {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    .event-login-compact {
        padding: 30px 40px
    }
    /* 交通位置 */
    .location-map {
        padding: 0 24px;
        aspect-ratio: 720 / 400;
        margin-top:16px;
    }

    .location-section {
        padding: 0 24px;
    }

        .location-section + .location-section {
            margin-top: 48px;
        }

    .location-heading {
        margin-top: 40px;
    }

    .location-row,
    .location-row--reverse {
        flex-direction: column;
        gap: 24px;
    }

    .location-row__img {
        flex: none;
        width: 100%;
    }

    .location-cards {
        margin-top: 48px;
        padding-bottom: 64px;
    }
    /* 推薦景點內頁 */
    .travel-detail {
        padding: 32px 24px 48px;
    }

    /* --- 登入頁 md --- */
    .login-page__image-side {
        display: none;
    }

    .login-page__form-side {
        flex: 0 0 100%;
        padding: 60px 40px;
    }

    .login-page__title {
        font-size: 32px;
    }

    .login-page__subtitle {
        font-size: 18px;
        margin-bottom: 48px;
    }

    .login-page__form {
        max-width: 400px;
    }

    /* --- 註冊頁 md --- */
    .register-page__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .register-page__label {
        text-align: left;
        flex: none;
    }

    .register-page__field {
        width: 100%;
    }

    /* --- 點數專區 md --- */
    .point-zone {
        padding-left: 29px;
        padding-right: 29px;
    }
    .point-zone__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .point-zone__card-btn {
        max-width: 80px;
        padding:4px;
    }

    /* --- 點數專區內頁 md --- */
/*    .pz-detail {
        padding-left: 29px;
        padding-right: 29px;
    }*/

    .pz-detail__main {
        flex-direction: column;
        gap: 0;
    }

    .pz-detail__left {
        flex: none;
        max-width: 100%;
    }

    .pz-detail__img {
        max-width: 500px;
        margin: 0 auto;
    }

    .pz-detail__info {
        max-width: 520px;
        margin: 0 auto;
    }

    .pz-detail__action {
        width:100%;
        max-width: 300px;
        margin: 0 auto;
        padding: 20px 0 32px;
    }

    .pz-detail__redeem-btn {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        display: block;
    }

    /* --- 我的票匣 md --- */
    .my-tickets {
        padding-left: 29px;
        padding-right: 29px;
    }

    .my-tickets__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* -- 點數查詢 RWD md -- */
    .bonus-record {
        padding-left: 29px;
        padding-right: 29px;
    }

    .bonus-record__card-img {
        max-width: 160px;
    }
    .bonus-record__table tbody td {
        padding: 18px 20px;
    }

    .member-discount {
        padding-left: 29px;
        padding-right: 29px;
    }

    /* 推薦行程內頁 */
    .itinerary-detail {
        padding: 32px 24px 48px;
    }

    .itinerary-detail__map-section {
        flex-direction: column;
    }

    .itinerary-detail__map-wrap {
        flex: none;
    }

    .itinerary-detail__map {
        height: 400px;
    }

    .itinerary-detail__locations {
        flex: none;
        max-height: 360px;
    }

    /* 快速預訂 */
    .quick-booking {
        right: 16px;
        bottom: 16px;
    }

    .quick-booking__arc-text {
        width: 160px;
        height: 76px;
        margin-bottom: -45px;
    }

        .quick-booking__arc-text text {
            font-size: 14px;
        }

    .quick-booking__circle {
        width: 70px;
        height: 70px;
    }

    .quick-booking__circle-text {
        font-size: 14px;
    }

    .quick-booking__item {
        width: 68px;
        height: 68px;
    }

    .quick-booking__item-text {
        font-size: 14px;
    }

    .quick-booking__menu {
        gap: 12px;
        margin-bottom: 12px;
    }

    /* 搜尋結果 */
    .search-result {
        padding: 32px 24px 48px;
    }

    .search-result__section-title {
        font-size: 20px;
    }
}

/* --- [ 手機斷點：576px 以下 (sm, xs 等) ] --- */
@media (max-width: 576px) {
    /* ========
   1. Header
   ======== */

    .header-spacer {
        height: var(--header-height-sm);
    }

    .header-inner {
        height: var(--header-height-sm);
        padding: 0 16px;
    }

    .header-logo__img {
        height: 36px;
    }

    .mobile-nav {
        padding: 16px 16px 32px;
    }

    /* ========
       2. Footer
       ======== */
    .footer-inner {
        padding: 40px 16px;
    }

    .footer-logo__img {
        width: 152px;
    }

    .footer-divider {
        margin: 16px 0 24px;
    }

    /* 單欄垂直排列 */
    .footer-body {
        flex-direction: column;
        gap: 32px;
    }

    .footer-col--hotel,
    .footer-col--booking,
    .footer-col--qrcode {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
    }

    .footer-col--qrcode {
        order: 0;
        margin-top: 0;
    }

    .footer-social--sm {
        gap: 20px;
    }

    .footer-qrcode__img {
        width: 132px;
        height: 132px;
    }

    .footer-series {
        align-items: flex-start;
    }

    .footer-copyright {
        margin-top: 32px;
    }
    /* ========
       3. 首頁
       ======== */
    .home-container {
        padding: 0 16px;
    }

    .hero {
        height: 480px;
        width:100%;
        margin:0px;
        border-radius:0px;
    }
    /* sm 用直式 Mobile 圖 */
    .hero__nav {
        left: 16px;
        bottom: 16px;
    }

    .section-head__title {
        font-size: 24px;
        letter-spacing: 6px;
    }
    .hot-search {
        padding: 36px 0 48px;
    }

    .hot-search__list {
        flex-direction: column;
        overflow-x: visible;
        scroll-snap-type: none;
        padding: 0 16px;
        gap: 20px;
    }

    .hot-search__item {
        flex: none;
        width: 100%;
    }

    .hot-search__img {
        aspect-ratio: 340 / 192;
    }

    .hot-search__name {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .rooms,
    .dining,
    .biz-wedding,
    .gallery {
        padding: 48px 0;
    }

    .travel {
        padding: 48px 0 64px;
    }

    .rooms__photo {
        height: 260px;
    }

    .rooms__card {
        padding: 24px;
    }

    .rooms__card-name {
        font-size: 22px;
    }

    .dining__inner {
        gap: 17px;
    }

    .dining__gallery {
        gap: 10px;
    }

    .dining__img--1 {
        margin-top: 35px;
    }

    .dining__img--2 {
        margin-top: 0px;
    }

    .dining__img--3 {
        margin-top: 20px;
    }

    .dining__deco-circle {
        width: 56px;
    }

    .biz-wedding__deco-circle {
        width: 56px;
    }

    /* 光影時刻：sm 隱藏文字卡，標題 + 4 支影片直向排列 */
    .gallery__layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        aspect-ratio: auto;
    }

    .gallery__text {
        display: none;
    }

    .gallery__center {
        order: -1;
        margin-bottom: 8px;
    }

    .gallery__item {
        width: 100%;
        height: auto;
        aspect-ratio: 358 / 257;
    }

    /* 在地旅行：縮圖一列兩個往下排，全部顯示 */
    .travel__thumbs,
    .travel__thumbs--scroll {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        justify-items: center;
        overflow: visible;
        max-height: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .travel__thumb-img {
        width: 108px;
        height: 108px;
    }

    .travel__thumb.is-active .travel__thumb-img {
        width: 138px;
        height: 138px;
    }

    .travel__content {
        flex: 0 0 100%;
    }

    /* ========
       4.  內頁 Banner
       ======== */
    /* 內頁 Banner：文字改水平置中 */
    .page-banner {
        --banner-ratio: 390 / 242;
    }
    .page-banner--shared {
        --banner-ratio: 390 / 166;
    }
    .page-banner__inner {
        width: 100%;
        text-align: center;
        padding: 0 16px 24px;
    }

    /* =========================================
   5, 內頁分類導覽 PageNav
   ========================================= */
    /* 內頁分類導覽：改下拉選單 */
    .page-nav {
        display: none;
    }

    .page-nav-select {
        display: block;
        position: relative;
        width: min(91.79vw, 358px); /* 358 / 390 */
        margin: 13.5px auto 0;
    }

    .page-nav-select__control {
        width: 100%;
        padding: 8.5px 12px;
        font-size: 16px;
        color: var(--color-text-500);
        background: var(--color-white);
        border: 1px solid var(--color-brown-300);
        border-radius: 8px;
        appearance: none; /* 拿掉系統箭頭，用自訂 SVG */
        -webkit-appearance: none;
        cursor: pointer;
    }

    .page-nav-select__arrow {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-brown-300);
        pointer-events: none; /* 點箭頭等於點 select */
    }

    .pagination {
        margin-top: 32px;
    }

    /* 飯店介紹：sm 間距與字級 */
    .hotel-intro {
        padding: 13px 16px 22px; /* 左右 16 */
    }

    .hotel-intro__title {
        font-size: 32px;
    }

    .hotel-intro__img--a {
        aspect-ratio: 358 / 226;
    }

    .hotel-intro__img--b {
        aspect-ratio: 358 / 231;
    }

    .hotel-intro__grid {
        flex-direction: column;
        gap: 24px;
    }

    /* =========================================
   7. 休閒設施列表 facility-list
   ========================================= */
    /* 休閒設施列表：圖片滿版貼邊、文字左右 20 */
    .facility-list {
        padding: 24px 0 48px; /* 左右 0 */
    }

    .facility-list__grid {
        row-gap: 15px;
    }

    .facility-card__body {
        padding: 24px 20px 24px 20px;
    }

    .facility-card__name {
        font-size: 32px;
        letter-spacing: 0.15em;
    }

    .facility-card__sub {
        font-size: 14px;
    }

    .facility-card__place {
        font-size: 20px;
        padding: 8px;
    }

    /* 內頁版型：圖片貼邊，文字/表格/描述縮排 20 */
    .detail-layout {
        padding: 24px 0 48px; /* 左右 0 */
    }

    .detail-layout__side {
        padding: 24px 20px; /* 同 facility-card__body sm */
    }

    .detail-table {
        padding-left: 20px;
        padding-right: 20px;
    }

    .facility-detail__desc {
        padding: 0 20px;
    }

    /* 404 頁面 */
    .error-page {
        min-height: calc(100vh - var(--header-height-sm) - 120px);
        padding: 48px 16px;
    }

    .error-page__code {
        font-size: 88px;
    }

    .error-page__deco-circle {
        width: 56px;
    }

    /* 榮譽事蹟：隱藏 item 圖片、間距縮小 */
    .awards {
        --awards-year-w: 64px;
        --awards-line-x: calc(var(--awards-year-w) + 14px);
        padding: 24px 16px 20px; /* 左右 16、與 Footer 20 */
    }

    .awards__node {
        column-gap: 28px;
        margin-bottom: 32px;
    }

    .awards__year {
        font-size: 24px;
    }

    .awards__item-name {
        font-size: 24px;
    }

    .awards__item-img {
        display: none; /* sm 隱藏獎項圖片 */
    }

    .awards__timeline {
        padding-bottom: 40px;
    }

    .awards__item-desc {
        font-size: 14px;
    }

    .awards__year {
        position: relative;
        top: 5px;
    }

    .awards__node:first-child .awards__year {
        top: 15px;
    }

    .awards__node:first-child::before {
        top: 20px;
    }

    /* 藝術典藏：1 row 1 col，底色改單純白灰交錯 */
    .art-collection {
        padding: 20px 16px;
    }

    .art-collection__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .art-card {
        padding: 32px 8px;
    }

        /* 覆寫棋盤公式 → 奇白偶灰 */
        .art-card:nth-child(odd) {
            background: var(--color-white);
            border: 1px solid #e9e9e9;
            border-radius: 10px;
        }

        .art-card:nth-child(even) {
            background: #fafafa;
            border-radius: 10px;
        }

    .art-card__name {
        font-size: 32px;
    }

    /* 媒體部落客列表：1 row 1 col */
    .media-list {
        padding: 20px 25px;
    }

    .media-list__grid {
        grid-template-columns: minmax(0, 340px);
        gap: 12px;
    }

    /* 熱門搜尋列表：1 row 1 col */
    .news-list {
        padding: 25px 16px;
    }

    .news-list__grid {
        grid-template-columns: minmax(0, 360px);
        gap: 12px;
    }

    /* 熱門搜尋內頁：標題與日期移到圖片下方 */
    .news-detail {
        padding: 20px 16px;
    }

    .news-detail__img {
        order: 1; /* ← 圖片排到最前 */
    }

    .news-detail__head {
        order: 2; /* ← 標題日期改在圖片下方 */
        text-align: left;
        margin: 20px 0 0;
    }

    .news-detail__title {
        font-size: 32px;
    }

    .news-detail__date {
        text-align: center; /* 依設計稿：日期靠右 */
    }

    .news-detail__content {
        order: 3;
        margin-top: 12px;
    }

    /* 商務會議 */
    .meeting-hero__img {
        aspect-ratio: auto;
        height: 422px; /* 高度固定，寬度多的裁掉 */
    }


    .meeting-hero__en {
        font-size: 24px;
        margin: 0 0 20px;
    }

    .meeting-hero__slogan {
        letter-spacing: 0.1em;
        margin: 0 0 20px;
    }

    .meeting-hero__text {
        padding: 20px 16px 10px;
    }

    .meeting-site__inner,
    .meeting-site--even .meeting-site__inner {
        padding: 42px 16px;
        gap: 28px;
    }

    .meeting-site__inner,
    .meeting-site--even .meeting-site__inner {
        gap: 28px;
    }

    .meeting-site__album {
        gap: min(2.82vw, 11px); /* 11 / 390 */
    }

    .meeting-site__album-btn,
    .meeting-site__album-cell--2 {
        aspect-ratio: 171 / 187;
    }

    .meeting-site__album-cell--3 {
        aspect-ratio: 358 / 138;
    }

    .meeting-site__name {
        font-size: 36px;
        letter-spacing: 0.05em;
    }

    .meeting-service .section-head__title,
    .meeting-spec .section-head__title {
        font-size: 44px;
        letter-spacing: 0.4em;
    }

    .meeting-service {
        padding: 38px 16px;
    }


    .meeting-spec {
        padding: 32px 8px;
    }

    .meeting-spec__actions {
        margin-top: 36px;
    }
    /* 燈箱縮圖縮小 */
    .gallery-lightbox__thumb {
        width: 120px;
    }

    /* 璀璨婚宴 */
    .wedding-hero__img img {
        height: 390px;
    }

    .wedding-hero__text {
        padding: 20px 16px;
    }


    /* 場地：無底圖，卡片獨立並加陰影 */
    .wedding-sites {
        gap: 25px;
    }

    .wedding-site {
        min-height: 0;
        overflow: visible;
    }

    .wedding-site__bg {
        display: none; /* sm 不顯示底圖 */
    }


    .wedding-site__card {
        width: 100%;
        min-height: 0;
        padding: 31px 16px;
        background: rgba(255, 255, 255, 0.95);
        filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
    }

    .wedding-site__sub {
        margin: 0 0 21px;
    }

    .wedding-site__desc {
        margin: 0 0 21px;
    }

    .wedding-sites {
        padding-bottom: 22px;
    }

    /* 璀璨婚宴內頁：與休閒設施內頁相同（圖片貼邊、文字縮排 20） */
    .wedding-detail.detail-layout {
        padding: 24px 0 48px;
    }

    .wedding-detail .detail-layout__side {
        padding: 24px 0;
    }

        .wedding-detail .detail-layout__side .facility-card__sub,
        .wedding-detail .detail-layout__side .facility-card__intro,
        .wedding-detail .detail-layout__side .facility-card__info,
        .wedding-detail .detail-layout__side .wedding-detail__subtitle,
        .wedding-detail .detail-layout__side .wedding-detail__supplies,
        .wedding-detail .detail-layout__side .wedding-detail__actions,
        .wedding-detail .detail-layout__side .facility-card__name {
            padding-left: 16px;
            padding-right: 16px;
        }

    .wedding-detail__carousel {
        aspect-ratio: 390 / 176;
    }

    .wedding-detail__subtitle {
        font-size: 20px;
    }

    .wedding-detail__contact {
        padding: 0 20px;
        max-width: none;
    }


    /* 線上購物列表：1 row 1 col */
    .shop-list {
        padding: 25px 16px;
    }

    .shop-list__grid {
        grid-template-columns: minmax(0, 304px);
        gap: 12px;
    }

    /* 線上購物內頁：padding 再縮小 */
    .shop-detail {
        padding: 24px 16px 48px;
    }

    .shop-detail__body {
        padding: 0;
        margin-top: 24px;
    }

    .shop-detail__title {
        font-size: 24px;
    }

    .shop-detail__buy {
        font-size: 20px;
    }

    /* 房型總覽 */
    .room-list {
        padding: 24px 16px 48px;
    }

    .room-filter {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .room-list__items {
        gap: 32px;
    }

    .room-item__name {
        font-size: 24px;
        letter-spacing: 0.15em;
    }

    .room-item__meta {
        gap: 8px 16px;
        font-size: 14px;
        justify-content: center;
    }

        .room-item__meta img {
            height: 20px;
            width: 20px;
        }

    /* 床型移到下一行，不與人數/坪數同排 */
    .room-item__meta-item--bed {
        flex: 0 0 100%;
        width: 100%;
        justify-content: center;
    }

    .room-item__bottom {
        margin-top: 8px;
        padding-top: 8px;
    }
    /* 房型內頁 */
    .room-detail-main__body {
        padding: 20px 16px;
    }

    .room-detail__name {
        font-size: 26px;
        letter-spacing: 0.15em;
    }

    .room-detail__btn {
        flex: 0 0 100%;
        font-size: 16px;
    }


    .room-detail-sub {
        padding: 0 16px 48px;
        margin-top: 32px;
    }

    .price-modal {
        padding: 16px;
    }

    .price-modal__panel {
        padding: 24px 16px;
    }

    .price-modal__title {
        font-size: 24px;
    }

    .room-detail__facilities {
        grid-template-columns: 1fr;
        margin-bottom: 25px;
    }

    /* 主題餐廳列表 */
    .rest-list-heading {
        padding: 16px 16px;
    }

    .rest-list {
        padding: 0 0 48px;
    }

    .rest-list__grid {
        grid-template-columns: 1fr;
        row-gap: 36px;
    }

    /* sm：圖片滿版貼邊、文字區域左右 16 */
    .rest-card__img {
        aspect-ratio: auto; /* 高度按圖片原始比例 */
    }

    .rest-card__head,
    .rest-card__sub,
    .rest-card__intro,
    .rest-card__links {
        padding-left: 8px;
        padding-right: 8px;
    }

    .rest-card__intro {
        margin-bottom: 0;
    }

    .rest-card__name {
        font-size: 24px;
    }

    .rest-card__links img {
        width: 30px;
        height: 30px;
    }

    /* 主題餐廳內頁 */
    .rest-detail__content {
        margin-top: 0;
    }

    .rest-detail__content-title {
        font-size: 24px;
    }

    .rest-detail__content {
        padding: 24px 20px;
    }

    /* 聯絡我們 */
    .contact-us {
        padding: 24px 16px 48px;
    }

    .contact-us__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .contact-us__label {
        text-align: left;
        flex: none;
    }

    .contact-us__field {
        width: 100%;
    }
    /* 活動報名內頁 sm */
    .event-detail {
        padding: 20px 16px;
    }

    .event-detail__info-card {
        padding: 20px;
    }

    .event-detail__title {
        font-size: 24px;
    }

    .event-detail__section-title {
        font-size: 22px;
        margin-top: 24px;
    }

    .event-modal-box {
        padding: 48px 20px 32px;
    }

    .event-modal-btn-row {
        gap: 12px;
    }

    .event-session-table__header,
    .event-session-table__row {
        padding: 12px 16px;
    }

    .event-form__label {
        flex: none;
        text-align: left;
    }

    .event-login-compact {
        padding: 15px 0px
    }

    .event-login-compact__title {
        font-size: 24px;
        letter-spacing: 0.1em;
        margin: 0 0 8px;
    }
    .event-login-compact__sub {
        font-size: 17px;
        color: var(--color-text-500);
        letter-spacing: 0em;
        margin: 0 0 24px;
    }
    /* 交通位置 */
    .location-map {
        padding: 0px;
        aspect-ratio: 358 / 300;
        margin-top: 8px;
    }

    .location-section {
        padding: 0 16px;
    }

        .location-section + .location-section {
            margin-top: 36px;
        }

    .location-heading {
        font-size: 24px;
        margin-top: 32px;
    }

    .location-row__title {
        font-size: 24px;
    }

    .location-cards {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 36px;
        padding-bottom: 48px;
    }

    .location-card {
        flex: none;
        width: 100%;
        max-width: 320px;
    }
    /* 推薦景點內頁 */
    .travel-detail {
        padding: 24px 16px 36px;
    }

    .travel-detail__head {
        padding: 16px;
    }

    .travel-detail__name {
        font-size: 24px;
    }

    .travel-detail__meta {
        gap: 12px 16px;
    }

    /* --- 登入頁 sm --- */
    .login-page__form-side {
        padding: 40px 24px;
    }

    .login-page__title {
        font-size: 26px;
    }

    .login-page__subtitle {
        font-size: 16px;
        margin-bottom: 36px;
    }

    /* --- 註冊頁 sm --- */
    .register-page {
        padding: 32px 16px 48px;
    }

    .register-page__birth-group {
        gap: 4px;
    }

    .register-page__address-group {
        flex-direction: column;
        gap: 0;
    }

    .register-page__success-title {
        font-size: 24px;
    }

    /* --- 驗證頁 sm --- */
    .verify-page__inner {
        padding: 24px 0 48px;
    }

    /* --- 點數專區 sm --- */
    .point-zone {
        padding: 0 16px 48px;
    }

    .point-zone__summary {
        padding: 20px 0 13px;
        display:block;
        border-bottom: 1px solid var(--color-line);
        margin-bottom:16px;
    }

    .point-zone__points-row {
        display:flex;

        justify-content: space-between;
    }

    .point-zone__points-value {
        font-size: 28px;
    }

    .point-zone__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0px;
    }

    /* --- 點數專區內頁 sm --- */
/*    .pz-detail {
        padding: 0 16px 48px;
    }*/

    .pz-detail__main {
        padding-top: 16px;
    }

    .pz-detail__img {
        max-width: 100%;
    }

    .pz-detail__info {
        max-width: 100%;
    }

    .pz-detail__action {
        padding: 16px 0 24px;
    }

    .pz-detail__redeem-btn {
        width: 100%;
        max-width: 100%;
    }


    .pz-detail__section-title {
        font-size: 15px;
    }

    .pz-detail__desc-list li,
    .pz-detail__rich-text {
        font-size: 14px;
    }

    /* --- 我的票匣 sm --- */
    .my-tickets {
        padding: 0 16px 48px;
    }

    .my-tickets__tabs {
        padding: 16px 0 16px;
    }

    .my-tickets__tab {
        flex: none;
        padding: 8px 20px;
        font-size: 14px;
    }

    .my-tickets__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* 會員資料頁 */
    .profile-page__btn-group {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .profile-page__btn {
        width: 100%;
        min-width: unset;
    }

    .profile-page__mobile-row {
        flex-wrap: wrap;
    }

    .profile-page__btn-mobile {
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }

    .profile-modal__dialog {
        padding: 32px 20px;
    }

    /* -- 點數查詢 RWD sm -- */
    .bonus-record {
        padding: 0 16px 48px;
    }

    .bonus-record__top {
        flex-direction: column;
        gap: 16px;
        padding: 24px 0;
    }

    .bonus-record__card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap:8px;
    }

    .bonus-record__card-info{
        flex-direction:row-reverse;
        align-items:center;
        gap:6px;
    }
    .bonus-record__card-info p{
        margin-bottom:0px;
    }

    .bonus-record__card-img {
        max-width: 100%;
    }

    .bonus-record__summary {
        padding: 24px 20px;
    }

    .bonus-record__summary-top {
        align-items: center;
        text-align: center;
    }


    .bonus-record__summary-header {
        font-size: 16px;
        color: var(--color-text-500);
        text-align:start;
        margin-bottom:15px;
    }

    .bonus-record__summary-value {
        font-size: 32px;
    }

    .bonus-record__summary-desc {
        text-align: center;
    }

    .bonus-record__summary-expire {
        justify-content: space-between;
        border-top: 1px solid var(--color-line);
        padding-top:24px;
        margin-top:24px;
    }

    .bonus-record__expire-item {
        align-items: start;
        text-align: start;
    }

        .bonus-record__expire-item + .bonus-record__expire-item {
            padding-left: 0px;
            border:none;
        }

    .bonus-record__history-header {
        align-items: center;
        gap: 16px;
    }
    .bonus-record__history-title{
        font-size:24px;
        margin-bottom:0px;
    }

    .bonus-record__tab {
        padding: 8px 24px;
        font-size: 14px;
    }

    /* 手機版 table 改 card 排列 */
    /* xs: 隱藏類型欄，只留 3 欄 */
    .bonus-table thead th:nth-child(3),
    .bonus-table tbody td:nth-child(3) {
        display: none;
    }

    .bonus-record__table thead th {
        font-size: 13px;
        padding: 10px 12px;
    }

    .bonus-record__table tbody td {
        padding: 14px 12px;
        font-size: 14px;
    }

    .bonus-record__points {
        font-size: 16px;
    }

    .member-discount {
        padding: 0 16px 48px;
    }

    .member-discount__header {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding-top: 24px;
    }

    .member-discount__question {
        padding: 16px 20px;
    }

    .member-discount__question-text {
        font-size: 15px;
    }

    .member-discount__answer-content {
        padding: 0 20px 20px;
        font-size: 14px;
    }

    /* 推薦行程內頁 */
    .itinerary-detail {
        padding: 24px 16px 36px;
    }

    .itinerary-detail__name {
        font-size: 24px;
    }

    .itinerary-detail__map {
        height: 300px;
    }

    .itinerary-detail__locations {
        max-height: 300px;
    }

    /* 快速預訂 */
    .quick-booking {
        right: 14px;
        bottom: 14px;
    }

    .quick-booking__arc-text {
        display:none;
        width: 130px;
        height: 90px;
        margin-bottom: -50px;
    }

        .quick-booking__arc-text text {
            font-size: 17px;
            letter-spacing: 0.5px;
        }



    .quick-booking__circle {
        width: 60px;
        height: 60px;
        box-shadow: -4px 9px 10px 0px #6C502B47;
    }

    .quick-booking__circle-text {
        font-size: 12px;
        letter-spacing: 0; 
    }
    .quick-booking__item {
        width: 56px;
        height: 56px;
    }

    .quick-booking__item-text {
        font-size: 14px;
    }

    .quick-booking__menu {
        gap: 10px;
        margin-bottom: 10px;
    }

    /* 搜尋結果 */
    .search-result {
        padding: 24px 16px 36px;
    }

    .search-result__summary {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .search-result__section {
        margin-bottom: 40px;
    }

    .search-result__section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .search-result__section-title {
        font-size: 18px;
    }
    .custom-page-container {
        margin: 0 auto;
        padding: 0px;
    }
}