/* ==========================================================================
   app — Header / Hero / Dock / Catalog（一體成型，無區塊盒感）
   ========================================================================== */

/* 開場封面樣式見 splash.css */

/* ----- Header：預設（Dialog 內等仍可用） ----- */
.site-header {
  position: relative;
  z-index: 200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
  padding: 0.55rem clamp(0.75rem, 2vw, 1.25rem);
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* 舊浮層樣式保留相容（目前改放入布幕開合區） */
.site-header--overlay {
  position: fixed;
  left: clamp(0.75rem, 2.5vw, 1.5rem);
  right: clamp(0.75rem, 2.5vw, 1.5rem);
  top: clamp(0.65rem, 1.8vw, 1.1rem);
  width: auto;
  margin: 0;
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.48);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

/* 選單在 Banner 上方：與舞台同寬，無厚框感 */
.site-header--in-curtain {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: var(--banner-nav-h, 3.5rem);
  margin: 0;
  padding: 0.35rem 0.35rem;
  display: grid;
  /* logo | 選單（或漢堡）— 明確分欄避免重疊 */
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: center;
  border-radius: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  z-index: 6;
  pointer-events: auto;
  overflow: hidden;
}

/* 上部選單／footer 共用 wordmark 尺寸見下方 :root */

.site-header--in-curtain .brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  z-index: 2;
  min-width: 0;
  max-width: var(--brand-wordmark-w);
  overflow: hidden;
}

.site-header--in-curtain .brand__logo {
  width: 100%;
  max-width: var(--brand-wordmark-w);
  max-height: var(--brand-wordmark-h);
}

.site-header--in-curtain .nav-toggle {
  display: none;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  z-index: 2;
}

.site-header--in-curtain .header-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  z-index: 1;
}

/* 放得下一列：維持橫向 chip；即便殘留 collapsed 仍顯示 */
.site-header--in-curtain:not(.is-nav-fit-compact).is-nav-collapsed .header-nav {
  display: flex;
}

html:not(.is-nav-fit-compact) .nav-dialog {
  display: none !important;
}

/* 放不下一列 → 漢堡＋Dialog */
.site-header--in-curtain.is-nav-fit-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.55rem;
}

.site-header--in-curtain.is-nav-fit-compact .brand {
  max-width: var(--brand-wordmark-w);
}

.site-header--in-curtain.is-nav-fit-compact .brand__logo {
  max-width: var(--brand-wordmark-w);
  max-height: var(--brand-wordmark-h);
}

.site-header--in-curtain.is-nav-fit-compact .nav-toggle {
  display: inline-flex;
}

.site-header--in-curtain.is-nav-fit-compact .header-nav {
  display: none !important;
}

.site-header--in-curtain .nav-chip {
  min-height: 2.35rem;
  padding: 0 0.65rem;
  font-size: clamp(0.7rem, 1.05vw, 0.84rem);
  letter-spacing: 0.05em;
  flex: 0 0 auto;
  white-space: nowrap;
}

.header-nav a.nav-chip {
  text-decoration: none;
}

/* 選單收合鈕：與 nav-chip 同系玻璃 */
.nav-toggle {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.28);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(30, 58, 110, 0.28) 48%, rgba(2, 6, 23, 0.45) 100%);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    background 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1rem;
  height: 1.5px;
  border-radius: 1px;
  background: #e2e8f0;
  transition: transform 0.22s var(--ease), opacity 0.18s var(--ease), background 0.2s var(--ease);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -5px;
}

.nav-toggle__bars::after {
  top: 5px;
}

/* 展開／收合都維持三條線；僅邊框提示狀態（勿變成 ✕） */
.site-header.is-nav-open .nav-toggle,
.nav-toggle[aria-expanded="true"] {
  border-color: rgba(232, 200, 122, 0.55);
}

.site-header.is-nav-open .nav-toggle__bars,
.site-header.is-nav-open .nav-toggle__bars::before,
.site-header.is-nav-open .nav-toggle__bars::after {
  background: var(--gold-bright);
}

@media (hover: hover) and (pointer: fine) {
  .nav-toggle:hover {
    border-color: rgba(232, 200, 122, 0.7);
    transform: translateY(-1px);
  }
}

html.is-nav-dialog-open {
  overflow: hidden;
}

/* ----- 窄版選單 Dialog：滿版置中（掛 body，不受 nav-rail 裁切） ----- */
.nav-dialog {
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background:
    linear-gradient(165deg, rgba(8, 18, 36, 0.98) 0%, rgba(2, 8, 22, 0.99) 55%, #020816 100%);
  color: #f8fafc;
  box-shadow: none;
  overflow: hidden;
}

@supports not (height: 100dvh) {
  .nav-dialog {
    height: 100svh;
    max-height: 100svh;
  }
}

.nav-dialog[open] {
  display: flex;
  flex-direction: column;
}

.nav-dialog::backdrop {
  background: #020816;
}

.nav-dialog__shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  padding:
    calc(3rem + env(safe-area-inset-top, 0px))
    max(1.1rem, env(safe-area-inset-right, 0px))
    calc(0.85rem + env(safe-area-inset-bottom, 0px))
    max(1.1rem, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  overflow: hidden;
}

.nav-dialog__close {
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top, 0px));
  right: max(0.85rem, env(safe-area-inset-right, 0px));
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  border: 1px solid rgba(226, 232, 240, 0.28);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.35);
  color: #e2e8f0;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .nav-dialog__close:hover {
    border-color: rgba(232, 200, 122, 0.55);
    color: var(--gold-bright, #f0d78a);
  }
}

.nav-dialog__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  flex: 1 1 auto;
  width: min(100%, 17rem);
  min-height: 0;
  overflow: hidden;
  padding: 0.25rem 0 0.5rem;
}

.nav-dialog__nav .nav-chip {
  width: 100%;
  min-height: 2.45rem;
  justify-content: center;
  padding: 0.4rem 0.35rem 0.55rem;
  font-size: 0.98rem;
  letter-spacing: 0.12em;
  text-align: center;
}

.nav-dialog__nav .nav-chip::after {
  left: 50%;
  transform: translateX(-50%);
}

.nav-dialog__nav .nav-chip:hover::after {
  width: 2.75rem;
}

.nav-dialog__nav .nav-chip.is-active::after,
.nav-dialog__nav .nav-chip[aria-current="page"]::after {
  width: 3.5rem;
}

.nav-dialog__foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 0.65rem;
  margin-top: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

/* 橫式 logo：選單底部置中 */
.nav-dialog__logo {
  display: block;
  width: min(58vw, 13.5rem);
  max-width: 13.5rem;
  max-height: 3rem;
  height: auto;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}


.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 0.4rem;
  line-height: 0;
}

.brand__logo {
  display: block;
  height: auto;
  width: var(--brand-wordmark-w);
  max-width: var(--brand-wordmark-w);
  max-height: var(--brand-wordmark-h);
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

.brand__glyph {
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 40% 40% 40% 0;
  box-shadow: inset 0 0 0 2px transparent, 6px -4px 0 -2px #fff;
  opacity: 0.95;
  flex: 0 0 auto;
}

.brand__text em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  margin-left: 0.25em;
}

.header-fx {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: center;
}

.header-fx__label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.header-fx__select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  padding: 0.35rem 1.6rem 0.35rem 0.85rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23889cb8'/%3E%3C/svg%3E") no-repeat right 0.7rem center / 10px 6px;
  color: var(--text);
  font-size: 0.86rem;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.header-fx__select:focus {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.header-fx__select option {
  background: #060c16;
  color: #d7eaff;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Top Nav 選項：無外框文字鈕＋底線選中 */
.nav-chip {
  position: relative;
  min-height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.35rem 0.55rem;
  color: rgba(226, 232, 240, 0.58);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: color 0.22s var(--ease);
}

.nav-chip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.12rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7dd3fc, var(--accent, #38bdf8), #0284c7);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
  transform: translateX(-50%);
  opacity: 0;
  transition: width 0.28s var(--ease), opacity 0.22s var(--ease);
}

.nav-chip--cta {
  color: rgba(253, 230, 138, 0.78);
}

.nav-chip--cta::after {
  background: linear-gradient(90deg, transparent, #f0d78a, transparent);
  box-shadow: 0 0 14px rgba(232, 200, 122, 0.35);
}

.nav-chip:active {
  transform: none;
}

/* 選中／展開：亮字＋底線（不再用金色填色外框） */
.nav-chip.is-active,
.nav-chip[aria-expanded="true"],
.nav-chip[aria-current="page"] {
  color: #f8fafc;
  border: none;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 0 22px rgba(125, 211, 252, 0.28);
}

.nav-chip.is-active::after,
.nav-chip[aria-expanded="true"]::after,
.nav-chip[aria-current="page"]::after {
  width: 100%;
  opacity: 1;
}

.nav-chip--cta.is-active,
.nav-chip--cta[aria-current="page"] {
  color: #fde68a;
  text-shadow: 0 0 22px rgba(232, 200, 122, 0.3);
}

@media (hover: hover) and (pointer: fine) {
  .nav-chip:hover {
    color: #e2e8f0;
    border: none;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .nav-chip:hover::after {
    width: 55%;
    opacity: 0.55;
  }

  .nav-chip--cta:hover {
    color: #fde68a;
  }

  .nav-chip.is-active:hover,
  .nav-chip[aria-expanded="true"]:hover,
  .nav-chip[aria-current="page"]:hover {
    color: #f8fafc;
    border: none;
    background: transparent;
    transform: none;
  }

  .nav-chip.is-active:hover::after,
  .nav-chip[aria-expanded="true"]:hover::after,
  .nav-chip[aria-current="page"]:hover::after {
    width: 100%;
    opacity: 1;
  }
}

/* Top Nav 選項由 .nav-chip 統一樣式 */

/* ----- 選單／布幕共用尺度（獨立頁無 .hero 也能用） ----- */
:root {
  --banner-nav-h: clamp(3.1rem, 6.5vh, 3.85rem);
  --banner-pad-side: clamp(
    0.65rem,
    calc(var(--banner-pad-side-n, 11) * 1vw),
    calc(var(--banner-pad-side-n, 11) * 1vw)
  );
  /* 布幕上緣未遮蓋區 ≈ banner 框寬；選單不得超出 */
  --banner-frame-w: min(calc(100vw - 2 * var(--banner-pad-side)), 72rem);
  --nav-rail-max-w: min(var(--banner-frame-w), calc(100vw - 1.25rem));
  /* 上部選單／footer 共用 wordmark（明顯加大） */
  --brand-wordmark-w: min(78vw, 26rem);
  --brand-wordmark-h: 4.75rem;
}

/* ----- Hero：整頁滿版大圖 ----- */
/* Banner 尺度變數掛在 .hero，供固定選單與舞台共用 */
.hero {
  display: block;
  padding: 0;
  margin: 0;
  --dock-reserve: 2.5rem;
  /* 窄選單列高度（燈光在其下方完整露出） */
  --banner-nav-h: clamp(3.1rem, 6.5vh, 3.85rem);
  --banner-meta-h: clamp(4.25rem, 11vh, 6.25rem);
  --banner-stack-gap: 0.55rem;
  --banner-scale: 1;
  --banner-pad-top: clamp(
    0.35rem,
    calc(var(--banner-pad-top-n, 10) * var(--banner-scale, 1) * 0.15vh),
    1.25rem
  );
  --banner-pad-side: clamp(
    0.65rem,
    calc(var(--banner-pad-side-n, 11) * var(--banner-scale, 1) * 1vw),
    calc(var(--banner-pad-side-n, 11) * 1vw)
  );
  --banner-pad-bottom: clamp(
    3vh,
    calc(var(--banner-pad-bottom-n, 9) * var(--banner-scale, 1) * 1vh),
    calc(var(--banner-pad-bottom-n, 9) * 1vh)
  );
  --banner-radius: 0;
  /* 層級：選單 → 上部燈光 → banner */
  --banner-lights-h: clamp(2.2rem, 5.5vh, 3.25rem);
  --banner-avail-h: calc(
    100svh - var(--banner-pad-top) - var(--banner-pad-bottom) -
      var(--banner-nav-h) - var(--banner-lights-h) - var(--banner-meta-h) -
      (var(--banner-stack-gap) * 2)
  );
  --banner-frame-w: min(
    calc(100vw - 2 * var(--banner-pad-side)),
    calc(var(--banner-avail-h) * 16 / 9)
  );
  --banner-frame-h: min(
    var(--banner-avail-h),
    calc(var(--banner-frame-w) * 9 / 16)
  );
  --nav-rail-max-w: min(var(--banner-frame-w), calc(100vw - 1.25rem));
}

.hero--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.hero__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-stage-bg, #131021);
  /* 手機勿對 opacity／transform 做長 transition，避免網址列改高時整頁閃 */
  transition: background-color 0.45s ease;
}

@supports (height: 100dvh) {
  .hero__stage {
    height: 100dvh;
    min-height: 100dvh;
  }
}

@media (hover: none) and (pointer: coarse) {
  .hero__stage {
    /* 以首次可視高度鎖定，減少 Safari／Chrome 網址列伸縮重排 */
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
  }

  .hero__stage-lights__beam {
    animation: none;
  }

  /* 淡出轉場在行動 GPU 易閃黑；改瞬間切圖 */
  .hero__carousel.carousel-fade .carousel-item {
    transition-duration: 0.01ms;
  }
}

/*
 * 布幕開合區（原先層次，選單不遮燈光）：
 *   選單（預留高度）→ 上部燈光 → Banner → 下部燈光 → 文案
 */
.hero__proscenium {
  position: absolute;
  z-index: 2;
  top: calc(
    max(0.45rem, env(safe-area-inset-top, 0px)) +
      var(--banner-nav-h) +
      var(--banner-stack-gap) +
      var(--banner-pad-top)
  );
  left: 50%;
  transform: translateX(-50%);
  width: var(--banner-frame-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--banner-stack-gap);
  box-sizing: border-box;
  pointer-events: none;
}

/*
 * 選單軌道＝布幕上緣未遮蓋寬（--nav-rail-max-w ＝ banner 框）
 * 不用 transform 置中，以免卡住 Dialog 的 position:fixed。
 */
.hero__nav-rail {
  position: fixed;
  z-index: 4000;
  top: max(0.45rem, env(safe-area-inset-top, 0px));
  left: calc(50% - var(--nav-rail-max-w) / 2);
  width: var(--nav-rail-max-w);
  max-width: var(--nav-rail-max-w);
  height: var(--banner-nav-h);
  box-sizing: border-box;
  pointer-events: none;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  /* 抽屜／scrim 為 fixed，祖先不可用 filter／backdrop-filter／transform */
  overflow: visible;
}

.hero__nav-rail .site-header,
.hero__nav-rail .site-header--in-curtain {
  pointer-events: auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0.25rem 0.35rem;
  /* 舞台上維持透明，不蓋燈光；需要可讀性時靠文字陰影 */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-content: center;
  box-sizing: border-box;
}

.hero__nav-rail:not(.is-past-stage) .nav-chip {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}

.hero__nav-rail:not(.is-past-stage) .brand__logo {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

/* 離開舞台：底條可滿版，選單本體仍鎖在布幕可見寬 */
.hero__nav-rail.is-past-stage {
  left: 0;
  width: 100%;
  max-width: none;
  top: 0;
  height: auto;
  min-height: calc(
    var(--banner-nav-h) + max(0.35rem, env(safe-area-inset-top, 0px))
  );
  padding:
    max(0.4rem, env(safe-area-inset-top, 0px))
    max(0.5rem, calc((100vw - var(--nav-rail-max-w)) / 2))
    0.45rem;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

.hero__nav-rail.is-past-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(5, 10, 20, 0.96);
  border-bottom: 1px solid rgba(56, 189, 248, 0.16);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.hero__nav-rail.is-past-stage .site-header--in-curtain {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--nav-rail-max-w);
  margin: 0 auto;
  height: auto;
  min-height: var(--banner-nav-h, 3.5rem);
  padding: 0.35rem 0.25rem;
  background: transparent;
  filter: none;
}

/* 星光點點（Canvas；由 hero-starfield.js 掛載） */
.hero__starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero__starfield.is-on {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .hero__starfield {
    transition: opacity 1.1s ease;
  }
}

/* 舊星光／canvas 位階保留 */
.hero__lights,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: normal;
}

/* Banner：完整顯示不裁切；四周柔邊模糊融入星空 */
.hero__banners {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-items: center;
  padding: 10vh 10vw;
}

/* Banner：上部燈光 → 畫面 → 下部燈光（選單在燈光上方預留區，不重疊） */
.hero__banner-stack {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  z-index: 2;
  pointer-events: none;
  perspective: 1200px;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
}

.hero__carousel {
  position: relative;
  top: auto;
  left: auto;
  transform: rotateX(4.5deg);
  transform-origin: 50% 55%;
  width: 100%;
  height: var(--banner-frame-h);
  flex: 0 0 auto;
  z-index: 2;
  pointer-events: none;
  display: block;
  padding: 0;
  box-sizing: border-box;
  border-radius: 48% / 12%;
  overflow: hidden;
  background: #0a1220;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.45),
    inset 0 0 60px rgba(0, 0, 0, 0.28);
  border: none;
  -webkit-mask-image: radial-gradient(
    ellipse 92% 78% at 50% 48%,
    #000 52%,
    rgba(0, 0, 0, 0.92) 68%,
    rgba(0, 0, 0, 0.45) 82%,
    transparent 96%
  );
  mask-image: radial-gradient(
    ellipse 92% 78% at 50% 48%,
    #000 52%,
    rgba(0, 0, 0, 0.92) 68%,
    rgba(0, 0, 0, 0.45) 82%,
    transparent 96%
  );
  transition:
    width 0.35s var(--ease),
    height 0.35s var(--ease),
    transform 0.45s var(--ease);
}

/* 舞台燈光 */
.hero__stage-lights {
  height: var(--banner-lights-h, clamp(2.2rem, 5.5vh, 3.25rem));
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

/* 上部燈光：在選單下方、banner 上方（正常流） */
.hero__stage-lights--top {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 50% / 100%;
  margin: 0 0 0.15rem;
}

/* 下部燈光：仍貼在 banner 下緣 */
.hero__stage-lights--bottom {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -0.55rem;
  border-radius: 50% / 100%;
}

.hero__stage-lights__bar {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 214, 120, 0.15) 8%,
    rgba(255, 236, 180, 0.85) 22%,
    rgba(180, 220, 255, 0.7) 38%,
    rgba(255, 220, 140, 0.95) 50%,
    rgba(180, 220, 255, 0.7) 62%,
    rgba(255, 236, 180, 0.85) 78%,
    rgba(255, 214, 120, 0.15) 92%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(255, 220, 140, 0.55),
    0 0 28px rgba(120, 190, 255, 0.28);
}

.hero__stage-lights--bottom .hero__stage-lights__bar {
  bottom: 0.75rem;
  transform: scaleY(1.15);
  box-shadow:
    0 0 10px rgba(255, 220, 140, 0.55),
    0 0 28px rgba(120, 190, 255, 0.28),
    0 8px 22px rgba(0, 0, 0, 0.4);
}

.hero__stage-lights--top .hero__stage-lights__bar {
  top: 0.75rem;
  transform: scaleY(1.15);
  box-shadow:
    0 0 10px rgba(255, 220, 140, 0.55),
    0 0 28px rgba(120, 190, 255, 0.28),
    0 -8px 22px rgba(0, 0, 0, 0.4);
}

.hero__stage-lights__wash {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  filter: blur(2px);
  opacity: 0.95;
  border-radius: 50% / 90%;
}

.hero__stage-lights--bottom .hero__stage-lights__wash {
  bottom: 0;
  background:
    radial-gradient(ellipse 70% 120% at 50% 100%, rgba(255, 220, 140, 0.4) 0%, transparent 68%),
    radial-gradient(ellipse 34% 95% at 18% 100%, rgba(120, 190, 255, 0.26) 0%, transparent 70%),
    radial-gradient(ellipse 34% 95% at 82% 100%, rgba(120, 190, 255, 0.26) 0%, transparent 70%);
}

.hero__stage-lights--top .hero__stage-lights__wash {
  top: 0;
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%, rgba(255, 220, 140, 0.4) 0%, transparent 68%),
    radial-gradient(ellipse 34% 95% at 18% 0%, rgba(120, 190, 255, 0.26) 0%, transparent 70%),
    radial-gradient(ellipse 34% 95% at 82% 0%, rgba(120, 190, 255, 0.26) 0%, transparent 70%);
}

.hero__stage-lights__beam {
  position: absolute;
  width: clamp(2.2rem, 8vw, 4.5rem);
  height: 100%;
  filter: blur(6px);
  opacity: 0.75;
  animation: stage-beam-breathe 4.8s ease-in-out infinite;
}

.hero__stage-lights--bottom .hero__stage-lights__beam {
  bottom: 0.85rem;
  transform-origin: 50% 100%;
  background: linear-gradient(
    to top,
    rgba(255, 230, 160, 0.55) 0%,
    rgba(180, 210, 255, 0.12) 42%,
    transparent 100%
  );
}

.hero__stage-lights--top .hero__stage-lights__beam {
  top: 0.85rem;
  transform-origin: 50% 0%;
  background: linear-gradient(
    to bottom,
    rgba(255, 230, 160, 0.55) 0%,
    rgba(180, 210, 255, 0.12) 42%,
    transparent 100%
  );
  animation-duration: 5.2s;
}

.hero__stage-lights__beam:nth-child(1) { left: 8%; animation-delay: 0s; }
.hero__stage-lights__beam:nth-child(2) { left: 28%; animation-delay: 0.7s; width: clamp(2.8rem, 10vw, 5.5rem); }
.hero__stage-lights__beam:nth-child(3) { left: 48%; transform: translateX(-50%); animation-delay: 1.2s; width: clamp(3.2rem, 12vw, 6.2rem); }
.hero__stage-lights__beam:nth-child(4) { right: 28%; left: auto; animation-delay: 0.4s; width: clamp(2.8rem, 10vw, 5.5rem); }
.hero__stage-lights__beam:nth-child(5) { right: 8%; left: auto; animation-delay: 1.6s; }

.hero__stage-lights--top .hero__stage-lights__beam:nth-child(1) { animation-delay: 0.35s; }
.hero__stage-lights--top .hero__stage-lights__beam:nth-child(2) { animation-delay: 1.1s; }
.hero__stage-lights--top .hero__stage-lights__beam:nth-child(3) { animation-delay: 0.2s; }
.hero__stage-lights--top .hero__stage-lights__beam:nth-child(4) { animation-delay: 0.9s; }
.hero__stage-lights--top .hero__stage-lights__beam:nth-child(5) { animation-delay: 1.4s; }

@keyframes stage-beam-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__carousel {
    transform: none;
  }
  .hero__stage-lights__beam {
    animation: none;
    opacity: 0.7;
  }
}

.hero__carousel .carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 淡入淡出：所有張疊在同一層，用透明度交叉轉場 */
.hero__carousel.carousel-fade .carousel-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.35s ease-in-out;
  z-index: 0;
}

.hero__carousel.carousel-fade .carousel-item.active {
  opacity: 1;
  z-index: 1;
}

.hero__carousel.carousel-fade .carousel-item.carousel-item-next.carousel-item-start,
.hero__carousel.carousel-fade .carousel-item.carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}

.hero__carousel.carousel-fade .carousel-item.active.carousel-item-start,
.hero__carousel.carousel-fade .carousel-item.active.carousel-item-end {
  z-index: 0;
  opacity: 0;
}

.hero__carousel:not(.carousel-fade) .carousel-item {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__carousel.carousel-fade .carousel-item {
    transition-duration: 0.01ms;
  }
}

.hero__banner {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 1;
  overflow: hidden;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 0;
  box-shadow: none;
  will-change: opacity;
}

/* 左右箭頭（可點） */
.hero__carousel-btn {
  pointer-events: auto;
  z-index: 6;
  width: clamp(2.6rem, 5vw, 3.4rem);
  height: clamp(2.6rem, 5vw, 3.4rem);
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(8, 16, 30, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.hero__carousel-btn.carousel-control-prev {
  left: clamp(0.75rem, 2.5vw, 1.5rem);
}

.hero__carousel-btn.carousel-control-next {
  right: clamp(0.75rem, 2.5vw, 1.5rem);
}

.hero__carousel-arrow {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1;
  color: #f5e6b8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.hero__carousel-btn:hover,
.hero__carousel-btn:focus {
  opacity: 1;
  background: rgba(10, 22, 40, 0.55);
  border-color: rgba(255, 215, 122, 0.75);
}

.hero__carousel-btn:focus-visible {
  outline: 2px solid rgba(255, 215, 122, 0.85);
  outline-offset: 2px;
}


/* 粒子換場：覆蓋在圖像上方，用 burst 方式做「換場視覺」 */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

.hero__particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, var(--p1, #3bdcff), var(--p2, #0a1628) 55%, rgba(0, 0, 0, 0) 72%);
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(0.2px);
  will-change: transform, opacity;
}


@media (max-width: 1023px) {
  .hero {
    --banner-scale: 0.42;
    --dock-reserve: 2rem;
    --banner-meta-h: clamp(4rem, 12vh, 5.75rem);
    --banner-nav-h: clamp(3rem, 6.5vh, 3.6rem);
  }
}

@media (max-width: 820px) {
  .hero {
    --banner-scale: 0.32;
    --dock-reserve: 1.75rem;
    --banner-meta-h: clamp(3.75rem, 13vh, 5.5rem);
    --banner-nav-h: clamp(2.75rem, 6vh, 3.35rem);
  }

  .site-header--in-curtain {
    align-items: center;
    padding: 0.35rem 0.55rem;
    min-height: 0;
    /* 保持 overflow:hidden，避免選單蓋住 logo */
  }

  .hero__nav-rail:not(.is-past-stage) .site-header--in-curtain {
    background: transparent;
  }

  .site-header--in-curtain .brand {
    position: relative;
    z-index: 2;
    max-width: var(--brand-wordmark-w);
  }

  .site-header--in-curtain .brand__logo {
    width: 100%;
    max-width: var(--brand-wordmark-w);
    height: auto;
    max-height: var(--brand-wordmark-h);
  }

  .site-header--in-curtain.is-nav-fit-compact .brand {
    max-width: var(--brand-wordmark-w);
  }

  .site-header--in-curtain.is-nav-fit-compact .brand__logo {
    max-width: var(--brand-wordmark-w);
    max-height: var(--brand-wordmark-h);
  }

  .hero__carousel-btn {
    width: 2.4rem;
    height: 2.4rem;
  }

  .hero__carousel-btn.carousel-control-prev {
    left: 0.35rem;
  }

  .hero__carousel-btn.carousel-control-next {
    right: 0.35rem;
  }
}

@media (max-width: 480px) {
  .hero {
    --banner-scale: 0.24;
    --dock-reserve: 1.5rem;
    --banner-meta-h: clamp(3.5rem, 14vh, 5.25rem);
  }

  .site-header--in-curtain .nav-chip {
    min-height: 36px;
    padding: 0 0.7rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
  }

  .hero__kicker {
    letter-spacing: 0.14em;
  }
}

.hero__meta {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  max-width: none;
  z-index: 5;
  box-sizing: border-box;
  padding: 0.15rem 0.35rem 0;
  pointer-events: none;
  text-align: center;
  overflow: visible;
  text-shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
  transition: opacity 0.55s ease;
}

.hero__meta.is-fading {
  opacity: 0;
}

.hero__kicker {
  font-size: clamp(0.68rem, 1.6vw, 0.75rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.3rem;
  overflow-wrap: anywhere;
}

.hero__title {
  font-size: clamp(1.15rem, 3.6vw, 2.75rem);
  letter-spacing: 0.04em;
  margin: 0 0 0.3rem;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
}

.hero__sub {
  color: rgba(226, 232, 240, 0.78);
  font-size: clamp(0.78rem, 2vw, 0.95rem);
  margin: 0;
  line-height: 1.45;
  overflow-wrap: break-word;
}

/* ----- 舞台以下一體表面（參考 logo/nexus.jpg：深夜藍＋斜向光束＋顆粒） ----- */
.site-surface {
  --surface-ink: #050a14;
  --surface-beam: #1e5fb3;
  --surface-beam-soft: rgba(30, 95, 179, 0.42);
  position: relative;
  z-index: 2;
  width: 100%;
  isolation: isolate;
  overflow: clip;
  background-color: var(--surface-ink);
  background-image:
    radial-gradient(ellipse 70% 55% at 88% 8%, var(--surface-beam-soft) 0%, transparent 62%),
    linear-gradient(
      148deg,
      #050a14 0%,
      #050a14 28%,
      rgba(14, 48, 110, 0.5) 42%,
      rgba(30, 95, 179, 0.34) 52%,
      rgba(8, 22, 48, 0.18) 64%,
      #050a14 82%
    ),
    linear-gradient(180deg, #060a16 0%, #050a14 18%, #070e1c 55%, #050a14 100%);
}

/* 顆粒材質：整段共用，不在各區塊重貼以免出現接縫 */
.site-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* 頂部與舞台銜接＋整體氛圍洗光 */
.site-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(19, 16, 33, 0.72) 0%, transparent 7%),
    radial-gradient(ellipse 45% 28% at 78% 6%, rgba(80, 150, 230, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 88%, rgba(4, 8, 18, 0.45) 100%);
}

.site-surface > * {
  position: relative;
  z-index: 1;
}

/* 表面內各區塊：透明外殼，共用上下節奏，看起來像同一平面上的章節 */
.site-surface .about-venue,
.site-surface .news-block,
.site-surface .event-catalog,
.site-surface .venue-rental,
.site-surface .contact-us {
  background: transparent;
  isolation: auto;
  overflow: visible;
  padding-top: clamp(2.25rem, 5.5vh, 3.5rem);
  padding-bottom: clamp(2.25rem, 5.5vh, 3.5rem);
}

.site-surface .about-venue {
  padding-top: clamp(2.75rem, 7vh, 4.25rem);
}

.site-surface .contact-us {
  padding-bottom: clamp(3.25rem, 9vh, 5.5rem);
}

/* ----- 關於我們：標題／文案在圖外；圖片左右切換卡片 ----- */
.about-venue {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.25rem, 5vw, 3rem)
    clamp(3rem, 8vh, 5.5rem);
  scroll-margin-top: 1.25rem;
}

.about-venue__inner {
  width: min(100%, 58rem);
  margin: 0 auto;
  text-align: center;
}

.about-venue__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.about-venue__heading {
  margin: 0 0 0.75rem;
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text);
}

.about-venue__title {
  margin: 0 0 1.15rem;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--gold-bright);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* ----- 關於我們：Tabs（無外框；選中以字色＋底線） ----- */
.about-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 1.75rem;
  margin: 0 auto 1.45rem;
  width: 100%;
}

.about-tabs__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 2.4rem;
  padding: 0.4rem 0.1rem 0.55rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(203, 213, 225, 0.55);
  cursor: pointer;
  user-select: none;
  transform: none;
  transition: color 0.22s var(--ease, ease);
}

.about-tabs__label {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.about-tabs__btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.12rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7dd3fc, var(--accent, #38bdf8), #0284c7);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
  transform: translateX(-50%);
  opacity: 0;
  transition: width 0.28s var(--ease, ease), opacity 0.22s var(--ease, ease);
}

.about-tabs__btn.is-on {
  color: #f8fafc;
  border: none;
  background: transparent;
  box-shadow: none;
  transform: none;
  text-shadow: 0 0 24px rgba(125, 211, 252, 0.28);
}

.about-tabs__btn.is-on::after {
  width: 100%;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .about-tabs__btn:hover {
    color: #e2e8f0;
    border: none;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .about-tabs__btn:hover::after {
    width: 55%;
    opacity: 0.55;
  }

  .about-tabs__btn.is-on:hover::after {
    width: 100%;
    opacity: 1;
  }

  .about-tabs__btn:active {
    transform: none;
  }
}

.about-tabs__btn:focus-visible {
  outline: none;
  color: #f8fafc;
}

.about-tabs__btn:focus-visible::after {
  width: 70%;
  opacity: 0.8;
}

.about-tabs__panels {
  width: 100%;
}

.about-tabs__panel {
  width: 100%;
}

/* 場館服務卡片列 */
.about-service__lead {
  margin: 0 auto 1.35rem;
  max-width: 42rem;
  font-size: 1.08rem;
  line-height: 1.8;
  color: rgba(226, 232, 240, 0.86);
}

.about-service__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 52rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem 1.1rem;
  text-align: left;
}

.about-service__card {
  margin: 0;
  padding: 1.05rem 1.1rem 1.15rem;
  border: none;
  border-radius: 0.85rem;
  background: rgba(8, 16, 32, 0.42);
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.1);
}

.about-service__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #38bdf8);
}

.about-service__title {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: #f1f5f9;
}

.about-service__copy {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(203, 213, 225, 0.86);
}

@media (max-width: 640px) {
  .about-service__grid {
    grid-template-columns: 1fr;
  }

  .about-tabs {
    gap: 0.1rem 1.15rem;
  }

  .about-tabs__label {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
  }
}

.about-map {
  width: min(100%, 52rem);
  margin: 0 auto;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a1220;
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.about-map iframe {
  width: 100%;
  height: min(34rem, 58svh);
  border: 0;
  display: block;
}

.about-map__addr {
  margin: 1rem auto 0;
  width: min(100%, 52rem);
  text-align: center;
  color: #e2e8f0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.about-map__hint {
  margin: 0.65rem auto 0;
  width: min(100%, 52rem);
  text-align: center;
  color: rgba(226, 232, 240, 0.78);
  font-size: 1.05rem;
}

.about-map__link {
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 200, 122, 0.35);
}

.about-venue__copy {
  display: grid;
  gap: 1.1rem;
  width: min(100%, 48rem);
  margin: 0 auto 1.65rem;
  text-align: left;
}

.about-venue__copy p {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #e2e8f0;
  text-align: justify;
  text-justify: inter-ideograph;
}

.about-venue__carousel {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0 auto;
}

.about-venue__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a1220;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.about-venue__card {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}

.about-venue__card.is-hidden {
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
}

.about-venue__card.is-focus,
.about-venue__card:not(.is-hidden) {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 1;
}

.about-venue__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: zoom-in;
}

.about-venue__card--plan {
  background: #f4f6f8;
}

.about-venue__card--plan img {
  object-fit: contain;
  object-position: center;
}

/* 簡介圖滿版預覽：只顯示被點的那一張 */
.about-lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: #050b14;
  color: #f8fafc;
  overflow: hidden;
  touch-action: none;
  z-index: 12000;
}

@supports not (height: 100dvh) {
  .about-lightbox {
    height: 100svh;
    max-height: 100svh;
  }
}

.about-lightbox[open] {
  display: flex;
  flex-direction: column;
}

.about-lightbox::backdrop {
  background: #000;
}

.about-lightbox__shell {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding:
    calc(3.25rem + env(safe-area-inset-top, 0px))
    max(0.75rem, env(safe-area-inset-right, 0px))
    calc(1.25rem + env(safe-area-inset-bottom, 0px))
    max(0.75rem, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
  overflow: hidden;
}

.about-lightbox.is-zoomed .about-lightbox__shell {
  cursor: grab;
}

.about-lightbox__shell:active {
  cursor: grabbing;
}

.about-lightbox__figure {
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  touch-action: none;
  overflow: hidden;
}

.about-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  transform-origin: center center;
  will-change: transform;
  transition: none;
  pointer-events: auto;
  cursor: grab;
}

.about-lightbox__hint {
  position: absolute;
  left: 50%;
  bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(226, 232, 240, 0.7);
  pointer-events: none;
}

.about-lightbox__close {
  position: absolute;
  top: max(0.55rem, env(safe-area-inset-top, 0px));
  right: max(0.55rem, env(safe-area-inset-right, 0px));
  z-index: 5;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

html.is-lightbox-open,
html.is-lightbox-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 640px) {
  .about-lightbox__close {
    width: 2.9rem;
    height: 2.9rem;
  }
}

.about-venue__nav {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  line-height: 1;
  border-radius: 999px;
  color: var(--gold-bright);
}

.about-venue__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.about-venue__pager {
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .about-venue__carousel {
    gap: 0.4rem;
  }

  .about-venue__nav {
    width: 2.05rem;
    height: 2.05rem;
    font-size: 1.25rem;
  }

  .about-map iframe {
    height: min(28rem, 52svh);
  }

  .about-venue__copy p {
    text-align: left;
  }
}

/* ==========================================================================
   最新消息 .news-block
   --------------------------------------------------------------------------
   對齊 about-venue：內寬 58rem、置中、eyebrow／heading／title 階層相同。
   結構：年份 Tabs（.news-tabs）→ 手風琴列表（.news-acc）
   資料／互動：js/components/news.js ＋ data/news.json
   ========================================================================== */

/* 區塊外殼：滿寬；背景改由 .site-surface 一體承載 */
.news-block {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.25rem, 5vw, 3rem)
    clamp(3rem, 8vh, 5.5rem);
  /* 固定導覽約 3.5rem＋餘裕，錨點捲動不被擋住 */
  scroll-margin-top: 5.5rem;
}

/* 內容欄：與 about-venue__inner 同寬 */
.news-block__inner {
  width: min(100%, 58rem);
  margin: 0 auto;
  text-align: center;
}

.news-block__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.news-block__heading {
  margin: 0 0 0.75rem;
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text);
}

.news-block__title {
  margin: 0 0 1.15rem;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--gold-bright);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* ----- 年份 Tabs（對齊 about-tabs：無外框＋底線選中） ----- */
.news-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 1.75rem;
  margin: 0 auto 1.45rem;
  width: 100%;
}

.news-tabs__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 2.4rem;
  padding: 0.4rem 0.1rem 0.55rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(203, 213, 225, 0.55);
  cursor: pointer;
  user-select: none;
  transform: none;
  transition: color 0.22s var(--ease, ease);
}

.news-tabs__label {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.news-tabs__btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.12rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7dd3fc, var(--accent, #38bdf8), #0284c7);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
  transform: translateX(-50%);
  opacity: 0;
  transition: width 0.28s var(--ease, ease), opacity 0.22s var(--ease, ease);
}

.news-tabs__btn.is-on {
  color: #f8fafc;
  border: none;
  background: transparent;
  box-shadow: none;
  transform: none;
  text-shadow: 0 0 24px rgba(125, 211, 252, 0.28);
}

.news-tabs__btn.is-on::after {
  width: 100%;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .news-tabs__btn:hover {
    color: #e2e8f0;
    border: none;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .news-tabs__btn:hover::after {
    width: 55%;
    opacity: 0.55;
  }

  .news-tabs__btn.is-on:hover::after {
    width: 100%;
    opacity: 1;
  }
}

.news-tabs__btn:focus-visible {
  outline: none;
  color: #f8fafc;
}

.news-tabs__panels {
  width: 100%;
}

/* 各年度 panel：列表改左對齊（標題列仍置中於區塊） */
.news-tabs__panel {
  width: 100%;
  text-align: left;
}

/* ----- 手風琴 Accordion（.news-acc） ----- */
.news-acc {
  display: grid;
  gap: 0.65rem;
  width: 100%;
}

.news-acc__empty {
  margin: 1.5rem auto;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* 單則卡片：玻璃底；.is-open 時金邊強調 */
.news-acc__item {
  border-radius: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(15, 30, 55, 0.55) 48%, rgba(2, 6, 23, 0.72) 100%);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.news-acc__item.is-open {
  border-color: rgba(232, 200, 122, 0.45);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.32),
    0 0 24px rgba(232, 200, 122, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.news-acc__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* 觸發列：日期 | 標題 | ＋／－ 圖示 */
.news-acc__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  min-height: 3.4rem;
  padding: 0.85rem 1.05rem;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.news-acc__date {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.news-acc__title {
  font-size: clamp(0.95rem, 2.2vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f1f5f9;
  line-height: 1.4;
}

/* ＋ 圖示：橫線 + 豎線；展開時豎線淡出 → 變成 － */
.news-acc__icon {
  width: 1.35rem;
  height: 1.35rem;
  position: relative;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(232, 200, 122, 0.4);
  background: rgba(2, 6, 23, 0.35);
}

.news-acc__icon::before,
.news-acc__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 1.5px;
  background: var(--gold-bright);
  transform: translate(-50%, -50%);
  transition: transform 0.22s var(--ease), opacity 0.18s var(--ease);
}

.news-acc__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.news-acc__item.is-open .news-acc__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0.2);
}

/* 展開內容區（summary 可選；body 必備） */
.news-acc__panel {
  padding: 0 1.05rem 1.05rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.news-acc__summary {
  margin: 0.85rem 0 0.55rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(226, 232, 240, 0.92);
  line-height: 1.55;
}

.news-acc__body {
  margin: 0;
  font-size: clamp(1.02rem, 1.9vw, 1.14rem);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: #e2e8f0;
}

@media (hover: hover) and (pointer: fine) {
  .news-acc__trigger:hover .news-acc__title {
    color: #fff;
  }
}

/* 窄螢幕：日期獨列，標題與圖示同一列 */
@media (max-width: 640px) {
  .news-acc__trigger {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.75rem;
  }

  .news-acc__date {
    grid-column: 1 / -1;
  }

  .news-acc__title {
    grid-column: 1;
  }

  .news-acc__icon {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   場地租借 .venue-rental（頁內區塊，非 Dialog）
   --------------------------------------------------------------------------
   參考曲線分欄卡：左圖｜S 曲線｜右淺底年月＋深藍日曆區
   強調色改系統藍（--accent / --accent-hot），非參考圖橘
   ========================================================================== */
.venue-rental {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.25rem, 5vw, 3rem)
    clamp(3rem, 8vh, 5.5rem);
  scroll-margin-top: 5.5rem;
}

.venue-rental__inner {
  width: min(100%, 58rem);
  margin: 0 auto;
  text-align: center;
}

.venue-rental__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.venue-rental__heading {
  margin: 0 0 0.75rem;
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text);
}

.venue-rental__title {
  margin: 0 0 1.35rem;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--gold-bright);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* ----- 場地租借：檔期／收費 chips ----- */
.rental-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 auto 1.35rem;
}

.rental-tabs__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.3rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.5);
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.rental-tabs__chip.is-on {
  border-color: color-mix(in srgb, var(--accent, #38bdf8) 70%, white);
  color: #041018;
  background: linear-gradient(145deg, #7dd3fc 0%, var(--accent, #38bdf8) 55%, var(--accent-hot, #0284c7) 100%);
}

@media (hover: hover) and (pointer: fine) {
  .rental-tabs__chip:hover {
    border-color: rgba(125, 211, 252, 0.65);
    color: #f8fafc;
  }

  .rental-tabs__chip.is-on:hover {
    color: #041018;
    filter: brightness(1.05);
  }
}

.rental-tabs__chip:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.85);
  outline-offset: 2px;
}

/* ----- 收費標準表 ----- */
.rental-rates__inner {
  width: min(100%, 56rem);
  text-align: left;
}

.rental-rates .venue-rental__eyebrow,
.rental-rates .venue-rental__heading,
.rental-rates .rental-tabs {
  text-align: center;
}

.rental-rates__title {
  margin: 0 0 1.15rem;
  text-align: center;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f8fafc;
}

.rental-rates__table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 0.9rem;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background:
    linear-gradient(165deg, rgba(20, 40, 70, 0.92) 0%, rgba(6, 12, 24, 0.96) 100%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.rental-rates__table {
  width: 100%;
  min-width: 40rem;
  margin: 0;
  border-collapse: collapse;
  color: #e2e8f0;
  font-size: 0.86rem;
}

.rental-rates__table th,
.rental-rates__table td {
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  vertical-align: middle;
  text-align: center;
  line-height: 1.45;
}

.rental-rates__table thead th {
  background: rgba(8, 47, 73, 0.85);
  color: #f0f9ff;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.rental-rates__item {
  background: rgba(14, 116, 144, 0.28);
  color: #e0f2fe;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.rental-rates__slot-group {
  display: block;
  margin-bottom: 0.15rem;
  color: #7dd3fc;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.rental-rates__slot {
  display: block;
  font-variant-numeric: tabular-nums;
}

.rental-rates__note-cell {
  text-align: left;
  max-width: 14rem;
  font-size: 0.8rem;
  color: #cbd5e1;
}

.rental-rates__notes {
  margin: 1.15rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.55);
}

.rental-rates__notes-title {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f8fafc;
}

.rental-rates__notes-list {
  margin: 0;
  padding-left: 1.2rem;
  color: #cbd5e1;
  font-size: 0.86rem;
  line-height: 1.65;
}

.rental-rates__notes-list li + li {
  margin-top: 0.35rem;
}

.rental-rates__contact {
  display: grid;
  gap: 0.45rem;
  margin: 1.25rem 0 0;
  padding: 0;
}

.rental-rates__contact-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.65rem;
  align-items: baseline;
  margin: 0;
  font-size: 0.9rem;
}

.rental-rates__contact-row dt {
  margin: 0;
  color: #7dd3fc;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.rental-rates__contact-row dd {
  margin: 0;
  color: #e2e8f0;
}

.rental-rates__contact-row a {
  color: #e2e8f0;
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 211, 252, 0.35);
}

@media (hover: hover) and (pointer: fine) {
  .rental-rates__contact-row a:hover {
    color: #7dd3fc;
    border-bottom-color: rgba(125, 211, 252, 0.8);
  }
}

.rental-rates__source {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: 0.82rem;
}

.rental-rates__source a {
  color: rgba(203, 213, 225, 0.75);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (max-width: 640px) {
  .rental-rates__contact-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ----- 申請文件／表單獨立頁 ----- */
.rental-doc__inner {
  width: min(100%, 52rem);
  text-align: left;
}

.rental-doc .venue-rental__eyebrow,
.rental-doc .venue-rental__heading,
.rental-doc .rental-tabs {
  text-align: center;
}

.rental-doc__title {
  margin: 0 0 0.45rem;
  text-align: center;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f8fafc;
}

.rental-doc__meta {
  margin: 0 0 1.15rem;
  text-align: center;
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.86rem;
}

.rental-doc__card,
.rental-doc__notes,
.rental-form {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(56, 189, 248, 0.24);
  background:
    linear-gradient(165deg, rgba(20, 40, 70, 0.88) 0%, rgba(6, 12, 24, 0.94) 100%);
}

.rental-doc__h,
.rental-form__section-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #7dd3fc;
}

.rental-doc__lead {
  margin: 0 0 0.45rem;
  color: #e2e8f0;
  font-weight: 700;
}

.rental-doc__list {
  margin: 0;
  padding-left: 1.2rem;
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.65;
}

.rental-doc__list li + li {
  margin-top: 0.4rem;
}

.rental-doc__list li .rental-doc__dl-btn {
  margin-top: 0.35rem;
}

.rental-doc__list li .rental-doc__dl-btn + .rental-doc__dl-btn {
  margin-left: 0.4rem;
}

.rental-doc__list--plain {
  list-style: none;
  padding-left: 0;
}

.rental-doc__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin: 1.25rem 0 0;
}

.rental-doc__actions--inline {
  justify-content: flex-start;
  margin-top: 0.85rem;
}

.rental-doc__actions--inline .rental-doc__dl-btn {
  margin-left: 0;
}

.rental-doc__download,
.rental-doc__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.rental-doc__download {
  border: 1px solid rgba(255, 215, 122, 0.75);
  background: linear-gradient(145deg, rgba(15, 40, 71, 0.35) 0%, rgba(255, 215, 122, 0.9) 100%);
  color: #1a1205;
}

.rental-doc__dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.55rem;
  vertical-align: middle;
  min-height: 1.7rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 122, 0.7);
  background: linear-gradient(145deg, rgba(15, 40, 71, 0.35) 0%, rgba(255, 215, 122, 0.88) 100%);
  color: #1a1205;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .rental-doc__dl-btn:hover {
    filter: brightness(1.06);
  }
}

@media (max-width: 640px) {
  .rental-doc__dl-btn {
    display: inline-flex;
    margin: 0.45rem 0 0;
  }
}

.rental-doc__link {
  border: 1px solid rgba(125, 211, 252, 0.45);
  background: rgba(15, 23, 42, 0.55);
  color: #e0f2fe;
}

@media (hover: hover) and (pointer: fine) {
  .rental-doc__download:hover {
    filter: brightness(1.06);
  }

  .rental-doc__link:hover {
    border-color: rgba(125, 211, 252, 0.85);
    color: #fff;
  }
}

.rental-form__section + .rental-form__section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.rental-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.rental-form__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rental-form__field {
  display: grid;
  gap: 0.35rem;
}

.rental-form__field--full {
  grid-column: 1 / -1;
}

.rental-form__label {
  color: #7dd3fc;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.rental-form__line,
.rental-form__area {
  display: block;
  min-height: 2rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.45);
}

.rental-form__area {
  min-height: 4.5rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.5rem;
  background: rgba(2, 6, 23, 0.28);
}

.rental-form__line-text,
.rental-form__date,
.rental-form__sub,
.rental-form__hint {
  color: #cbd5e1;
  font-size: 0.86rem;
  line-height: 1.7;
}

.rental-form__sub {
  margin: 0.75rem 0 0.35rem;
  font-weight: 700;
  color: #e2e8f0;
}

.rental-form__hint {
  margin: 0.55rem 0 0;
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.8rem;
}

.rental-form__blank {
  display: inline-block;
  min-width: 2.4rem;
  margin: 0 0.15rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.55);
  vertical-align: baseline;
}

.rental-form__blank--md {
  min-width: 5rem;
}

.rental-form__blank--lg {
  min-width: 8rem;
}

.rental-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
}

.rental-form__check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #e2e8f0;
  font-size: 0.86rem;
}

.rental-form__check input {
  accent-color: #38bdf8;
}

.rental-form__stamp-box {
  display: block;
  min-height: 5.5rem;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 0.5rem;
  background: rgba(2, 6, 23, 0.2);
}

.rental-form__venue {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.rental-form__venue-title {
  margin: 0 0 0.65rem;
  color: #f8fafc;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.rental-form__schedule {
  min-width: 36rem;
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  .rental-form__grid,
  .rental-form__grid--3 {
    grid-template-columns: 1fr;
  }
}

/* ----- 曲線分欄卡 ----- */
.rental-board {
  --rental-blue: var(--accent);
  --rental-blue-hot: var(--accent-hot);
  --rental-ink: #0b1220;
  --rental-paper: #f4f7fb;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  width: 100%;
  min-height: clamp(22rem, 52vh, 32rem);
  border-radius: 1.35rem;
  overflow: hidden;
  text-align: left;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(56, 189, 248, 0.12);
}

/* 左圖：右側用圓弧 clip 做出 S 曲線感 */
.rental-board__visual {
  position: relative;
  min-height: 100%;
  background: #061018;
  /* 右緣凹凸曲線（近似參考圖） */
  clip-path: polygon(
    0 0,
    92% 0,
    78% 22%,
    96% 48%,
    80% 72%,
    94% 100%,
    0 100%
  );
}

.rental-board__visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -5%;
  right: 2%;
  width: 0.22rem;
  height: 110%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #7dd3fc 0%,
    var(--rental-blue) 45%,
    var(--rental-blue-hot) 100%
  );
  transform: rotate(8deg);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
  pointer-events: none;
}

.rental-board__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.18) 100%);
}

.rental-board__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  min-height: 22rem;
  transition: opacity 0.22s var(--ease);
}

/* 左上角圓弧編號（參考圖 01 → 系統藍） */
.rental-board__badge {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 4.25rem;
  height: 4.25rem;
  display: grid;
  place-items: center;
  border-radius: 0 0 100% 0;
  background: linear-gradient(145deg, #7dd3fc 0%, var(--rental-blue) 42%, var(--rental-blue-hot) 100%);
  color: #041018;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px rgba(14, 80, 140, 0.35);
}

.rental-board__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--rental-paper);
  color: var(--rental-ink);
}

.rental-board__head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "year info"
    "month month";
  gap: 0.35rem 1rem;
  align-items: start;
  padding: 1.15rem 1.25rem 0.85rem;
}

.rental-board__year {
  grid-area: year;
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--rental-blue-hot);
}

.rental-board__info {
  grid-area: info;
  justify-self: end;
  text-align: right;
  display: grid;
  justify-items: end;
  gap: 0.15rem;
}

.rental-board__logo {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
  margin-bottom: 0.15rem;
}

.rental-board__info-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1e293b;
}

.rental-board__info-sub {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.04em;
}

.rental-board__month-row {
  grid-area: month;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.rental-board__month {
  margin: 0;
  flex: 1 1 auto;
  font-size: clamp(1.45rem, 3.5vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f172a;
}

.rental-board__nav {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, 0.35);
  background: rgba(56, 189, 248, 0.12);
  color: var(--rental-blue-hot);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.rental-board__nav:disabled,
.rental-board__nav[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .rental-board__nav:hover:not(:disabled) {
    background: rgba(56, 189, 248, 0.22);
    border-color: var(--rental-blue);
  }
}

/* 深藍日曆殼：左側內凹圓弧對齊曲線 */
.rental-board__cal-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.25rem 0 0;
  padding: 1rem 1.1rem 1.2rem;
  background:
    linear-gradient(160deg, #152238 0%, #0a1220 48%, #050b14 100%);
  border-radius: 2.75rem 0 0 0;
  color: #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.12);
  min-height: 0;
}

.rental-board__cal-shell .rental-board__stage {
  flex: 1 1 auto;
}

.rental-board__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.rental-board__chip {
  min-height: 1.7rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.45);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: outline 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s var(--ease);
}

.rental-board__chip.status-contracted {
  background: var(--day-contracted);
  border-color: rgba(255, 255, 255, 0.22);
  color: #2a1200;
}

.rental-board__chip.status-event {
  background: var(--day-event);
  border-color: rgba(255, 255, 255, 0.22);
  color: #3a1020;
}

.rental-board__chip.status-reviewing {
  background: var(--day-reviewing);
  border-color: rgba(255, 255, 255, 0.22);
  color: #04283a;
}

.rental-board__chip.status-maintenance {
  background: var(--day-maintenance);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.rental-board__chip.status-available {
  background: var(--day-available);
  border-color: rgba(255, 255, 255, 0.28);
  color: #e8eef8;
}

.rental-board__chip.is-on {
  outline: 2px solid var(--gold, #f5e6b8);
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(255, 215, 122, 0.35);
  filter: brightness(1.08);
}

.rental-board__cal {
  min-width: 0;
}

/* 日曆與詳情 Dialog 同區：點日期後詳情覆在日曆上 */
.rental-board__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 12rem;
}

.rental-board__detail {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 0.85rem;
  background:
    linear-gradient(165deg, rgba(20, 40, 70, 0.97) 0%, rgba(6, 12, 24, 0.98) 100%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  color: #e2e8f0;
}

.rental-board__detail[hidden] {
  display: none !important;
}

.rental-board.is-detail-open .rental-board__cal {
  visibility: hidden;
  pointer-events: none;
}

.rental-board.is-detail-open .rental-board__chips {
  opacity: 0.35;
  pointer-events: none;
}

.rental-board__detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  background: rgba(2, 10, 24, 0.45);
}

.rental-board__detail-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.rental-board__detail-close {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.55);
  color: #f8fafc;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .rental-board__detail-close:hover {
    border-color: var(--accent);
    background: rgba(56, 189, 248, 0.18);
  }
}

.rental-board__detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.85rem;
  -webkit-overflow-scrolling: touch;
}

/* 詳情 Dialog 內活動卡：左側已有圖，改為文字為主 */
.rental-board__detail .rental-event-card--compact {
  border: none;
  background: transparent;
  box-shadow: none;
}

.rental-board__detail .rental-event-card__body--plain {
  position: relative;
  padding: 0;
  gap: 0.45rem;
}

.rental-board__detail .rental-card-pager {
  position: static;
  margin-top: 0.85rem;
  justify-content: flex-start;
}

/* 日曆格（頁內版；覆寫 dialog 時代部分視覺） */
.rental-board .rental-cal__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.2rem;
  margin-bottom: 0.35rem;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--rental-blue) 85%, white);
  text-transform: uppercase;
}

.rental-board .rental-cal__week .is-sun {
  color: var(--rental-blue);
}

.rental-board .rental-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.28rem;
}

.rental-board .rental-cal__day {
  min-height: 2.35rem;
  border-radius: 0.45rem;
}

.rental-board .rental-cal__day.is-sun .rental-cal__num {
  color: var(--rental-blue);
}

.rental-board .rental-cal__day.is-selected {
  outline: 2px solid var(--rental-blue);
  outline-offset: 1px;
}

.rental-about {
  padding: 1.25rem 1.35rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(56, 189, 248, 0.22);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(15, 40, 70, 0.55) 50%, rgba(2, 6, 23, 0.75) 100%);
}

.rental-about__heading {
  margin: 0 0 0.65rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
}

.rental-about__copy {
  margin: 0 0 1rem;
  font-size: 1.08rem;
  line-height: 1.8;
  color: #e2e8f0;
}

.rental-about__meta {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

.rental-about__meta dt {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.rental-about__meta dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
  color: #f1f5f9;
}

.rental-about__meta a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(56, 189, 248, 0.35);
}

@media (max-width: 820px) {
  .rental-board {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .rental-board__visual {
    clip-path: none;
    min-height: 12rem;
    max-height: 14rem;
  }

  .rental-board__visual::before {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.2rem;
    transform: none;
  }

  .rental-board__photo {
    min-height: 12rem;
  }

  .rental-board__cal-shell {
    border-radius: 1.5rem 1.5rem 0 0;
  }
}

/* ==========================================================================
   頁尾 .site-footer（與上方 site-surface 連成一體，弱分隔）
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #050a14;
  color: #cbd5e1;
}

.site-footer__shell {
  width: min(100%, 56rem);
  margin: 0 auto;
  padding: 0 clamp(0.85rem, 3vw, 1.75rem) clamp(0.85rem, 2vh, 1.35rem);
}

.site-footer__panel {
  position: relative;
  overflow: visible;
  isolation: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  padding: clamp(1.2rem, 3vw, 1.75rem) 0 clamp(0.75rem, 2vw, 1.1rem);
  border-radius: 0;
  text-align: center;
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: none;
}

.site-footer__panel::before {
  content: none;
}

.site-footer__row,
.site-footer__cols,
.site-footer__copy {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 第 1 列：logo + 社群 */
.site-footer__row--brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #f1f5f9;
  width: fit-content;
  margin: 0 auto;
  line-height: 0;
}

.site-footer__logo img,
.site-footer__wordmark,
.site-footer__wordmark.brand__logo {
  display: block;
  width: var(--brand-wordmark-w) !important;
  max-width: var(--brand-wordmark-w) !important;
  height: auto !important;
  max-height: var(--brand-wordmark-h) !important;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.site-footer__blurb {
  margin: 0;
}

.site-footer__social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}

.site-footer__social-btn {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: none;
  color: #041018;
  background: linear-gradient(145deg, #7dd3fc 0%, var(--accent, #38bdf8) 45%, var(--accent-hot, #3b82f6) 100%);
  box-shadow: 0 6px 14px rgba(14, 80, 140, 0.28);
  transition: transform 0.2s var(--ease, ease), filter 0.2s var(--ease, ease);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__social-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
  }
}

/* 第 2 列：固定三欄 */
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  width: min(100%, 36rem);
  margin: 0 auto;
  justify-items: center;
}

.site-footer__col {
  width: 100%;
  text-align: center;
}

.site-footer__heading {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, #38bdf8);
  text-align: center;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
}

.site-footer__links a,
.site-footer__links span {
  display: inline-block;
  font-size: 0.86rem;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.78);
  text-decoration: none;
  text-align: center;
  transition: color 0.2s var(--ease, ease);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__links a:hover {
    color: #f8fafc;
  }
}

/* 第 3 列：版權 */
.site-footer__copy {
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(148, 163, 184, 0.72);
}

@media (max-width: 820px) {
  .site-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .site-footer__links a,
  .site-footer__links span {
    font-size: 0.78rem;
  }
}

@media (max-width: 560px) {
  .site-footer__shell {
    padding-inline: 0.65rem;
  }

  .site-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .site-footer__heading {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .site-footer__links a,
  .site-footer__links span {
    font-size: 0.72rem;
  }
}

/* ==========================================================================
   獨立 SEO 頁（無 splash／hero；共用 site-surface 區塊）
   ========================================================================== */
.page-layout {
  min-height: 100dvh;
  background: #020617;
  color: #e2e8f0;
}

.page-chrome {
  position: relative;
  z-index: 4000;
  min-height: calc(
    var(--banner-nav-h, 3.5rem) + max(0.35rem, env(safe-area-inset-top, 0px))
  );
}

.page-layout .hero__nav-rail,
.page-layout .hero__nav-rail.is-past-stage {
  left: 0;
  width: 100%;
  max-width: none;
  top: 0;
  height: auto;
  min-height: calc(
    var(--banner-nav-h, 3.5rem) + max(0.35rem, env(safe-area-inset-top, 0px))
  );
  padding:
    max(0.4rem, env(safe-area-inset-top, 0px))
    max(0.5rem, calc((100vw - var(--nav-rail-max-w)) / 2))
    0.45rem;
  justify-content: center;
}

.page-layout .hero__nav-rail .site-header--in-curtain {
  width: 100%;
  max-width: var(--nav-rail-max-w);
  margin: 0 auto;
}

.page-main {
  position: relative;
  z-index: 1;
}

.page-surface {
  padding-top: clamp(0.75rem, 2vh, 1.25rem);
}

/* ----- 聯絡我們：側邊 LOGO＋聯絡資訊（整塊置中） ----- */
.contact-us {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.25rem, 5vw, 3rem)
    clamp(3.5rem, 9vh, 6rem);
  scroll-margin-top: 1.25rem;
}

.contact-us__inner {
  width: min(100%, 48rem);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
}

.contact-us__brand {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.contact-us__logo {
  display: block;
  width: min(32vw, 10.5rem);
  height: auto;
  aspect-ratio: 1 / 1.15;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}

.contact-us__body {
  flex: 1 1 16rem;
  max-width: 28rem;
  text-align: center;
  min-width: 0;
}

.contact-us__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.contact-us__heading {
  margin: 0 0 0.85rem;
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--gold-bright);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.contact-us__lead {
  margin: 0 0 1.15rem;
  font-size: clamp(1.08rem, 2.2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

.contact-us__list {
  margin: 0;
  display: grid;
  gap: 0.85rem;
  justify-items: center;
}

.contact-us__row {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  text-align: center;
}

.contact-us__row dt {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.contact-us__row dd {
  margin: 0;
  font-size: clamp(1.02rem, 1.8vw, 1.12rem);
  font-weight: 500;
  line-height: 1.7;
  color: #e2e8f0;
}

.contact-us__link {
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 200, 122, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .contact-us__link:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.55);
  }
}

@media (max-width: 640px) {
  .contact-us__inner {
    flex-direction: column;
  }

  .contact-us__logo {
    width: min(40vw, 7.5rem);
  }

  .contact-us__body {
    max-width: none;
  }
}

/* Floating tags */
.floating-tags {
  position: absolute;
  top: calc(var(--header-h) + 0.75rem);
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  max-width: min(92vw, 40rem);
  padding: 0.35rem;
}

.tag {
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.tag:hover {
  transform: translateY(-2px);
}

.tag[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--tag-color, var(--accent)) 70%, transparent);
  background: color-mix(in srgb, var(--tag-color, var(--accent)) 22%, rgba(15, 23, 42, 0.5));
  box-shadow: 0 0 20px color-mix(in srgb, var(--tag-color, var(--accent)) 35%, transparent);
}

.tag[data-category="concert"] { --tag-color: var(--cat-concert); }
.tag[data-category="sports"] { --tag-color: var(--cat-sports); }
.tag[data-category="exhibition"] { --tag-color: var(--cat-exhibition); }
.tag[data-category="arts"] { --tag-color: var(--cat-arts); }
.tag[data-category="gathering"] { --tag-color: var(--cat-gathering); }

/* ----- Category Dock：固定底部、可橫滑、圓框玻璃立體 ----- */
.date-dock-wrap {
  display: block;
}

.date-dock-wrap--overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  padding:
    1.35rem 0
    calc(0.9rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(
    0deg,
    rgba(2, 6, 23, 0.45) 0%,
    rgba(2, 6, 23, 0.12) 55%,
    transparent 100%
  );
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x;
  pointer-events: auto;
}

.date-dock-wrap--overlay::-webkit-scrollbar {
  display: none;
}

.date-dock-wrap--overlay .date-dock {
  pointer-events: auto;
}

.date-dock {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.85rem, 3vw, 1.75rem);
  width: max-content;
  min-width: 100%;
  min-height: 5.75rem;
  margin: 0 auto;
  padding: 0.35rem clamp(1.1rem, 4vw, 2rem) 0.2rem;
  box-sizing: border-box;
  transform-origin: bottom center;
  perspective: 600px;
}

.dock-item {
  flex: 0 0 auto;
  width: 4.6rem;
  height: 4.6rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.06) 28%,
      rgba(15, 23, 42, 0.45) 62%,
      rgba(2, 6, 23, 0.55) 100%
    );
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  color: var(--muted);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -10px 18px rgba(0, 0, 0, 0.28);
  transform-origin: bottom center;
  transform: translateZ(0);
  will-change: transform;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
}

.dock-item--cat {
  width: 4.6rem;
  height: 4.6rem;
  min-width: 4.6rem;
  max-width: none;
  padding: 0;
}

.dock-item__md {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dock-item__wk {
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.dock-item:active {
  transform: translateY(-2px) scale(1.03);
}

@media (hover: hover) and (pointer: fine) {
  .dock-item:hover {
    color: #fff;
    box-shadow:
      0 18px 34px rgba(0, 0, 0, 0.55),
      0 6px 12px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -10px 18px rgba(0, 0, 0, 0.22);
  }
}

.dock-item.is-active {
  color: #fff;
  border-color: rgba(125, 211, 252, 0.7);
  background:
    linear-gradient(
      155deg,
      rgba(125, 211, 252, 0.45) 0%,
      rgba(37, 99, 235, 0.35) 42%,
      rgba(15, 23, 42, 0.55) 100%
    );
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(56, 189, 248, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 16px rgba(0, 0, 0, 0.22);
  transform: translateY(-6px) scale(1.06);
}

.dock-item.is-active .dock-item__md {
  color: #fff;
}

.dock-item[data-category="concert"].is-active {
  border-color: color-mix(in srgb, var(--cat-concert) 75%, white);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.5),
    0 0 28px color-mix(in srgb, var(--cat-concert) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 16px rgba(0, 0, 0, 0.22);
}
.dock-item[data-category="sports"].is-active {
  border-color: color-mix(in srgb, var(--cat-sports) 75%, white);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.5),
    0 0 28px color-mix(in srgb, var(--cat-sports) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 16px rgba(0, 0, 0, 0.22);
}
.dock-item[data-category="exhibition"].is-active {
  border-color: color-mix(in srgb, var(--cat-exhibition) 75%, white);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.5),
    0 0 28px color-mix(in srgb, var(--cat-exhibition) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 16px rgba(0, 0, 0, 0.22);
}
.dock-item[data-category="arts"].is-active {
  border-color: color-mix(in srgb, var(--cat-arts) 75%, white);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.5),
    0 0 28px color-mix(in srgb, var(--cat-arts) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 16px rgba(0, 0, 0, 0.22);
}
.dock-item[data-category="gathering"].is-active {
  border-color: color-mix(in srgb, var(--cat-gathering) 75%, white);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.5),
    0 0 28px color-mix(in srgb, var(--cat-gathering) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 16px rgba(0, 0, 0, 0.22);
}

/* 舊浮動標籤已移除 */
.floating-tags {
  display: none !important;
}

/* ----- Dialog 共用開闔動畫（場地租借） ----- */
@keyframes about-fold-open {
  from {
    opacity: 0;
    transform: scaleY(0.04) translateY(-1.5rem);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes about-fold-close {
  from {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: scaleY(0.04) translateY(-1.5rem);
    filter: blur(6px);
  }
}

@keyframes about-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes about-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ----- About Dialog：樣式改由 about-book.css（滿版雜誌翻書）----- */
.about-dialog__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: clamp(0.5rem, 2vh, 1.25rem) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 3vh, 2.5rem);
}

.about-dialog__body .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.65rem;
}

.about-dialog__body h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.1rem);
  margin-bottom: 1rem;
}

.about-dialog__body > p {
  color: #e2e8f0;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.about-dialog__meta {
  display: grid;
  gap: 1.1rem;
}

.about-dialog__meta dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.about-dialog__meta dd {
  color: var(--text);
  font-size: 1.02rem;
}

.about-dialog__meta a {
  color: var(--accent);
}

/* ----- About（舊區塊樣式保留相容，目前改 Dialog） ----- */
.about {
  display: none;
}

/* ----- 展演活動：頁內區塊（對齊關於我們；僅種類標籤） ----- */
.event-catalog {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.25rem, 5vw, 3rem)
    clamp(3rem, 8vh, 5.5rem);
  scroll-margin-top: 1.25rem;
}

.event-catalog__inner {
  width: min(100%, 58rem);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.event-catalog__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.event-catalog__heading {
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text);
}

.event-catalog__title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--gold-bright);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* 種類標籤列：無外框＋分類色底線 */
.catalog-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem 1.5rem;
  width: 100%;
  padding: 0.25rem 0 0.45rem;
}

.catalog-cats .glass-chip--cat {
  --chip: var(--accent, #38bdf8);
  min-height: 2.4rem;
  min-width: 0;
  gap: 0;
  padding: 0.4rem 0.15rem 0.55rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(203, 213, 225, 0.55);
  transform: none;
  transition: color 0.22s var(--ease, ease);
}

.catalog-cats .glass-chip--cat::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.12rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--chip),
    transparent
  );
  box-shadow: 0 0 14px color-mix(in srgb, var(--chip) 55%, transparent);
  transform: translateX(-50%);
  opacity: 0;
  transition: width 0.28s var(--ease, ease), opacity 0.22s var(--ease, ease);
}

.catalog-cats .glass-chip__check {
  display: none;
}

.catalog-cats .glass-chip__text {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
}

.catalog-cats .btn-check:checked + .glass-chip--cat,
.catalog-cats .glass-chip--cat.is-on {
  color: #f8fafc;
  border: none;
  background: transparent;
  box-shadow: none;
  transform: none;
  text-shadow: 0 0 22px color-mix(in srgb, var(--chip) 45%, transparent);
}

.catalog-cats .btn-check:checked + .glass-chip--cat::after,
.catalog-cats .glass-chip--cat.is-on::after {
  width: 100%;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .catalog-cats .glass-chip--cat:hover {
    color: #e2e8f0;
    border: none;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .catalog-cats .glass-chip--cat:hover::after {
    width: 55%;
    opacity: 0.55;
  }

  .catalog-cats .btn-check:checked + .glass-chip--cat:hover::after {
    width: 100%;
    opacity: 1;
  }
}

/* 水平捲動海報帶（範圍對齊 about-venue__inner：58rem 置中） */
.event-rail {
  --poster-w: min(78%, 17.5rem);
  --poster-gap: 0.85rem;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  box-sizing: border-box;
}

.event-rail__track {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--poster-gap);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.25rem;
  padding-inline: 0.25rem;
  padding-block: 0.35rem 0.65rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  outline: none;
}

.event-rail__track::-webkit-scrollbar {
  display: none;
}

.event-rail__track.is-empty {
  display: block;
  padding-block: 1.5rem;
  text-align: center;
}

.event-rail__nav {
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  min-width: 2.6rem;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.event-rail.is-scrollable .event-rail__nav {
  opacity: 1;
  pointer-events: auto;
}

.event-rail__nav:disabled {
  opacity: 0.28;
  cursor: default;
}

.catalog-empty {
  margin: 1.5rem auto;
  color: var(--muted);
  text-align: center;
}

.catalog-cards__hint {
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0.15rem 0 0;
}

.event-poster {
  position: relative;
  flex: 0 0 var(--poster-w);
  width: var(--poster-w);
  aspect-ratio: 2 / 3;
  border-radius: 1rem;
  overflow: hidden;
  scroll-snap-align: start;
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.22);
  isolation: isolate;
}

.event-poster__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-poster__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.12) 0%, rgba(2, 6, 23, 0.2) 42%, rgba(2, 6, 23, 0.88) 100%);
  pointer-events: none;
}

.event-poster__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.95rem 0.9rem 1rem;
  text-align: start;
}

.event-poster__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--chip, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--chip, var(--accent)) 28%, rgba(2, 6, 23, 0.8));
}

.event-poster__badge[data-category="concert"] { --chip: var(--cat-concert); }
.event-poster__badge[data-category="sports"] { --chip: var(--cat-sports); }
.event-poster__badge[data-category="exhibition"] { --chip: var(--cat-exhibition); }
.event-poster__badge[data-category="arts"] { --chip: var(--cat-arts); }
.event-poster__badge[data-category="gathering"] { --chip: var(--cat-gathering); }

.event-poster__title {
  margin: 0;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-poster__meta {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.78);
}

.event-poster__cta {
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .event-poster__cta:hover {
    background: rgba(255, 255, 255, 0.22);
  }
}

@media (min-width: 821px) {
  .event-rail {
    --poster-w: min(17.5rem, 32%);
    --poster-gap: 1rem;
  }
}

@media (max-width: 820px) {
  .event-catalog__inner {
    gap: 0.85rem;
  }

  .event-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-rail .event-rail__nav {
    display: none;
  }

  .catalog-cats {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.15rem 1.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.35rem 0.1rem 0.25rem;
    touch-action: pan-x;
  }

  .catalog-cats::-webkit-scrollbar {
    display: none;
  }

  .catalog-cats .glass-chip--cat {
    flex: 0 0 auto;
    min-height: 2.4rem;
    padding: 0.4rem 0.1rem 0.55rem;
  }
}

/* ----- 玻璃磨砂 Chip（Bootstrap btn-check 只負責觸發） ----- */
.glass-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  cursor: pointer;
  user-select: none;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.22) 0%, rgba(30, 80, 162, 0.18) 42%, rgba(2, 6, 23, 0.5) 100%);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.glass-chip__check {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  border: 1.5px solid rgba(148, 163, 184, 0.55);
  background: rgba(2, 8, 24, 0.35);
  flex: 0 0 auto;
  position: relative;
}

.glass-chip__check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0.26rem;
  height: 0.46rem;
  border: solid transparent;
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.glass-chip--cat {
  min-height: 2.6rem;
  min-width: 5.2rem;
  padding: 0.45rem 1rem 0.45rem 0.7rem;
}

.glass-chip__text {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.glass-chip--tag,
.glass-chip--mini {
  min-height: 1.7rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: default;
}

.glass-chip--mini {
  flex: 0 0 auto;
  white-space: nowrap;
}

.glass-chip--tag.is-muted {
  color: var(--muted);
}

.glass-chip--nav {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.18), rgba(2, 6, 23, 0.45));
}

.btn-check:checked + .glass-chip,
.glass-chip--tag.is-on {
  color: #1a1205;
  border-color: rgba(245, 230, 184, 0.95);
  background: var(--gold-grad);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.38),
    0 0 26px var(--gold-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(120, 80, 10, 0.35);
  transform: translateY(-2px);
  text-shadow: 0 1px 0 rgba(255, 248, 220, 0.35);
}

.btn-check:checked + .glass-chip .glass-chip__check,
.glass-chip--tag.is-on .glass-chip__check {
  border-color: rgba(120, 80, 10, 0.55);
  background: rgba(26, 18, 5, 0.55);
}

.btn-check:checked + .glass-chip .glass-chip__check::after {
  border-color: var(--gold-bright);
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .glass-chip:hover {
    border-color: rgba(125, 211, 252, 0.85);
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.34),
      0 0 22px rgba(56, 189, 248, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
  }

  .glass-chip:active {
    transform: translateY(-1px) scale(0.99);
  }
}

.glass-chip[data-category="concert"] { --chip: var(--cat-concert); }
.glass-chip[data-category="sports"] { --chip: var(--cat-sports); }
.glass-chip[data-category="exhibition"] { --chip: var(--cat-exhibition); }
.glass-chip[data-category="arts"] { --chip: var(--cat-arts); }
.glass-chip[data-category="gathering"] { --chip: var(--cat-gathering); }

/* 目錄種類選中：不再覆寫成金色外框（改由 .catalog-cats 規則處理） */
.catalog-cats .btn-check:checked + .glass-chip[data-category] {
  border-color: transparent;
}

@media (max-width: 820px) {
  .brand__logo {
    width: var(--brand-wordmark-w);
    max-width: var(--brand-wordmark-w);
    height: auto;
    max-height: var(--brand-wordmark-h);
  }

  .brand__text {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .site-header--in-curtain .brand__logo,
  .brand__logo {
    width: var(--brand-wordmark-w);
    max-width: var(--brand-wordmark-w);
    height: auto;
    max-height: var(--brand-wordmark-h);
  }

  .header-nav {
    gap: 0.35rem;
  }
}

/* ==========================================================================
   場地租借 Dialog（左日曆／右資訊）
   ========================================================================== */

.rental-dialog {
  width: 100vw;
  height: 100svh;
  max-width: 100vw;
  max-height: 100svh;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  color: var(--text);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(12, 40, 36, 0.42) 38%, rgba(2, 10, 24, 0.88) 100%);
  backdrop-filter: blur(42px) saturate(1.5);
  -webkit-backdrop-filter: blur(42px) saturate(1.5);
  box-shadow: none;
  overflow: hidden;
  transform-origin: center center;
}

.rental-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: about-fold-open 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rental-dialog.is-closing {
  animation: about-fold-close 0.36s cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

.rental-dialog[open]::backdrop {
  background: rgba(2, 6, 23, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: about-backdrop-in 0.4s ease both;
}

.rental-dialog.is-closing::backdrop {
  animation: about-backdrop-out 0.36s ease both;
}

.rental-dialog__shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  /* 與四周間距 3% */
  padding:
    calc(3% + env(safe-area-inset-top, 0px))
    3%
    calc(3% + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  gap: 0.75rem;
  overflow: hidden;
}

.rental-dialog__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  flex: 0 0 auto;
}

.rental-dialog__head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.14em;
}

.rental-dialog__accent {
  width: 0.28rem;
  height: 1.15em;
  border-radius: 999px;
  background: var(--gold-grad);
  box-shadow: 0 0 12px var(--gold-glow);
}

.rental-dialog__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  color: var(--muted);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(15, 23, 42, 0.35);
}

@media (hover: hover) and (pointer: fine) {
  .rental-dialog__close:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
  }
}

.rental-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: start;
  justify-items: stretch;
  /* 內容與日曆明確分開，避免視覺重疊 */
  gap: clamp(1rem, 3vh, 1.75rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.rental-dialog__panel,
.rental-dialog__calendar {
  position: relative;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  border-radius: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.rental-dialog__panel {
  z-index: 0;
  padding: 0;
  text-align: center;
  overflow: hidden; /* 活動圖上的絕對定位資訊不得溢出到日曆 */
}

.rental-dialog__calendar {
  z-index: 1;
  padding: 0;
  overflow: visible;
  margin-top: 0;
  /* 與上方內容切開 */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: clamp(0.85rem, 2.2vh, 1.25rem);
}

.rental-dialog__dock {
  display: none;
}

.rental-panel__empty {
  min-height: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.35rem;
  color: #e2e8f0;
}

.rental-panel__hint {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.rental-panel__sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* 活動卡：資訊疊在活動圖上（不溢出到下方日曆） */
.rental-event-card {
  height: auto;
  width: min(100%, 42rem);
  margin: 0 auto;
  display: block;
  text-align: center;
  overflow: hidden;
}

.rental-event-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  border-radius: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #0b1220 center / cover no-repeat;
  isolation: isolate;
  contain: layout paint;
}

.rental-event-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(2, 8, 20, 0.88) 0%,
      rgba(2, 8, 20, 0.55) 42%,
      rgba(2, 8, 20, 0.12) 72%,
      transparent 100%
    );
}

/* 活動資訊疊在圖片上方（遠離下方日曆） */
.rental-event-card__body {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  z-index: 2;
  width: 100%;
  max-height: 72%;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.3rem;
  padding: 0.9rem 1rem 1rem;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
}

.rental-event-card__badge {
  justify-self: center;
  pointer-events: none;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #4a1028;
  background: var(--day-event-grad);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(120, 40, 70, 0.35);
}

.rental-event-card__title {
  margin: 0;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.rental-event-card__meta,
.rental-event-card__loc {
  margin: 0;
  font-size: 0.88rem;
  color: #f1f5f9;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.rental-event-card__desc {
  margin: 0.15rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #e2e8f0;
  max-width: 36rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rental-event-card .rental-card-pager {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  top: auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  border-top: none;
  pointer-events: auto;
}

.rental-card-pager__text {
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.rental-card-pager__btn {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(232, 200, 122, 0.45);
  background: rgba(2, 8, 24, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--gold-bright);
  font-size: 1.15rem;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .rental-card-pager__btn:hover {
    border-color: rgba(245, 230, 184, 0.9);
    background: var(--gold-grad);
    color: #1a1205;
  }
}

/* 狀態卡 */
.rental-status-card {
  height: auto;
  min-height: 0;
  width: min(100%, 42rem);
  margin: 0 auto;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 0.5rem 0 0;
}

.rental-status-card__dot {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 auto 0.35rem;
  border-radius: 999px;
}

.rental-status-card--contracted .rental-status-card__dot {
  background: var(--day-contracted-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.rental-status-card--reviewing .rental-status-card__dot {
  background: var(--day-reviewing-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.rental-status-card--maintenance .rental-status-card__dot {
  background: var(--day-maintenance-grad);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.rental-status-card__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
}

.rental-status-card__date {
  margin: 0;
  font-weight: 700;
  color: #e2e8f0;
}

.rental-status-card__desc {
  margin: 0.35rem 0 0;
  max-width: 22rem;
  color: #cbd5e1;
  line-height: 1.7;
}

/* 租借表單 */
.rental-form {
  display: grid;
  gap: 0.7rem;
}

.rental-form__head {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.rental-form__badge {
  justify-self: start;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #052e16;
  background: linear-gradient(145deg, #bbf7d0, #4ade80 60%, #16a34a);
}

.rental-form__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.rental-form__date {
  margin: 0;
  font-weight: 700;
  color: var(--gold-bright);
}

.rental-form__field {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e2e8f0;
}

.rental-form__field input,
.rental-form__field select,
.rental-form__field textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(2, 8, 24, 0.45);
  color: var(--text);
  font-weight: 500;
  outline: none;
}

.rental-form__field textarea {
  min-height: 5rem;
  resize: vertical;
}

.rental-form__field input:focus,
.rental-form__field select:focus,
.rental-form__field textarea:focus {
  border-color: rgba(232, 200, 122, 0.75);
  box-shadow: 0 0 0 3px rgba(232, 200, 122, 0.18);
}

.rental-form__submit {
  min-height: 2.7rem;
  margin-top: 0.25rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 230, 184, 0.9);
  color: #1a1205;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: var(--gold-grad);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 0 20px var(--gold-glow);
}

@media (hover: hover) and (pointer: fine) {
  .rental-form__submit:hover {
    filter: brightness(1.06);
  }
}

.rental-form__note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

/* 月曆：放寬留白、置中、狀態色整格填滿
   （格子由 venue-rental.js 動態產生，此處只負責視覺） */
.rental-cal {
  --cal-day: 3.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0.35rem 0.25rem 0.5rem;
  box-sizing: border-box;
}

.rental-cal__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.15rem 0 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rental-cal__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.35rem 0.95rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  color: #1a1205;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: none;
  transition: filter 0.18s var(--ease), box-shadow 0.18s var(--ease), outline 0.18s var(--ease);
}

.rental-cal__chip.status-contracted {
  background: var(--day-contracted);
  color: #2a1200;
}
.rental-cal__chip.status-event {
  background: var(--day-event);
  color: #3a1020;
}
.rental-cal__chip.status-reviewing {
  background: var(--day-reviewing);
  color: #04283a;
}
.rental-cal__chip.status-maintenance {
  background: var(--day-maintenance);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.rental-cal__chip.status-available {
  background: var(--day-available);
  color: #e8eef8;
  border-color: rgba(255, 255, 255, 0.28);
}

.rental-cal__chip-dot {
  display: none;
}

.rental-cal__chip.is-on {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 14px var(--gold-glow);
  filter: none;
}

.rental-cal__head {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0.15rem 0;
}

.rental-cal__title {
  margin: 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.rental-cal__btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 22, 40, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--gold-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@media (hover: hover) and (pointer: fine) {
  .rental-cal__btn:hover {
    border-color: rgba(232, 200, 122, 0.7);
  }
  .rental-cal__chip:hover {
    filter: brightness(1.08);
  }
}

.rental-cal__week,
.rental-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}

.rental-cal__week span {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
  line-height: 1.4;
  padding: 0.2rem 0 0.35rem;
}

.rental-cal__cell.is-empty {
  min-height: var(--cal-day);
  height: var(--cal-day);
}

/* 日格：狀態色整格填滿、留白較寬 */
.rental-cal__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--cal-day);
  min-height: var(--cal-day);
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  font-weight: 800;
  box-shadow: none;
  transition:
    box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease),
    opacity 0.2s var(--ease),
    filter 0.2s var(--ease),
    outline 0.2s var(--ease);
}

.rental-cal__num {
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.rental-cal__dot {
  display: none;
}

.rental-cal__day.status-contracted {
  color: #2a1200;
  background: var(--day-contracted);
  border-color: rgba(255, 180, 100, 0.45);
  text-shadow: none;
}

.rental-cal__day.status-event {
  color: #3a1020;
  background: var(--day-event);
  border-color: rgba(255, 190, 210, 0.5);
  text-shadow: none;
}

.rental-cal__day.status-reviewing {
  color: #04283a;
  background: var(--day-reviewing);
  border-color: rgba(160, 220, 250, 0.55);
  text-shadow: none;
}

.rental-cal__day.status-maintenance {
  color: #fff;
  background: var(--day-maintenance);
  border-color: rgba(255, 255, 255, 0.22);
  text-shadow: none;
}

.rental-cal__day.status-available {
  color: #e8eef8;
  background: var(--day-available);
  border-color: rgba(255, 255, 255, 0.28);
  text-shadow: none;
}

.rental-cal__day.is-focus {
  z-index: 1;
  outline: 2px solid rgba(245, 230, 184, 0.95);
  outline-offset: 2px;
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 18px rgba(255, 215, 122, 0.4);
}

.rental-cal__day.is-dimmed {
  opacity: 0.28;
  filter: saturate(0.45);
}

.rental-cal__day.is-selected {
  color: #1a1205 !important;
  border-color: rgba(245, 230, 184, 0.95) !important;
  background: var(--gold) !important;
  outline: 2px solid rgba(245, 230, 184, 0.8);
  outline-offset: 2px;
  text-shadow: none;
  box-shadow:
    0 0 0 1px rgba(232, 200, 122, 0.4),
    0 0 16px var(--gold-glow);
}

@media (hover: hover) and (pointer: fine) {
  .rental-cal__day:hover {
    filter: brightness(1.08);
  }

  .rental-cal__day.is-focus:hover {
    filter: brightness(1.12);
  }
}

body.is-rental-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .rental-dialog {
    width: 100vw;
    height: 100svh;
  }

  .rental-dialog__shell {
    padding:
      calc(3% + env(safe-area-inset-top, 0px))
      3%
      calc(3% + env(safe-area-inset-bottom, 0px));
    gap: 0.55rem;
  }

  .rental-dialog__head {
    min-height: 2.35rem;
  }

  .rental-dialog__head h2 {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
    letter-spacing: 0.1em;
  }

  .rental-dialog__close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .rental-dialog__body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 1rem;
  }

  .rental-dialog__calendar {
    overflow: visible;
    padding-top: 0.85rem;
    width: 100%;
    max-width: none;
  }

  .rental-dialog__panel {
    overflow: hidden;
    padding: 0;
    min-height: 0;
  }

  .rental-event-card {
    width: min(100%, 36rem);
  }

  .rental-event-card__media {
    max-height: none;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .rental-event-card__body {
    padding: 0.75rem 0.75rem 0.85rem;
    max-height: 68%;
  }

  .rental-event-card__desc {
    font-size: 0.82rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .rental-cal__week,
  .rental-cal__grid {
    gap: 0.4rem;
  }

  .rental-cal {
    --cal-day: 2.95rem;
    width: 100%;
    max-width: none;
    gap: 0.65rem;
    padding: 0.15rem 0 0.35rem;
  }

  .rental-cal__num {
    font-size: 0.9rem;
  }

  .rental-cal__title {
    font-size: 1.1rem;
  }

  .rental-cal__btn {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
  }

  .rental-cal__chip {
    min-height: 2.15rem;
    font-size: 0.76rem;
    padding: 0.28rem 0.7rem;
  }

  .rental-cal__cell.is-empty {
    min-height: var(--cal-day);
    height: var(--cal-day);
  }

  .rental-cal__day {
    height: var(--cal-day);
    min-height: var(--cal-day);
  }

  .rental-form__field input,
  .rental-form__field select,
  .rental-form__field textarea {
    font-size: 16px;
    min-height: 2.75rem;
  }

  .rental-form__submit {
    min-height: 2.85rem;
    font-size: 1rem;
  }
}