/* ── 整頁等比縮放：以 1920px 為基準 ──
   根字級隨視窗寬度線性縮放（1920 / 16 = 120 → 100vw / 120）。
   1rem 在 1920px 時 = 16px，視窗放大/縮小時所有 rem 同步等比縮放，
   既有的 vw 值本就隨寬度縮放，兩者一致。
   ⚠️ 手機尚未設下限，待後續處理（可在窄螢幕 media query 內覆寫固定 font-size）。 */
html {
  /* ×1.3：除 welcome-title（用 vw 自訂）外，全頁文字以 1920 為基準放大 30% */
  font-size: calc(100vw / 120 * 1.3);
}

.page-index main {
  padding-top: var(--navbar-height);
}

.page-index .side-booking {
  top: 75%;
}

.index-container {
  width: min(calc(100% - clamp(2rem, 6vw, 5rem)), var(--container));
  margin: 0 auto;
}

.index-section {
  scroll-margin-top: calc(var(--navbar-height) + 1.2rem);
  padding: clamp(3rem, 7vw, 6rem) 0;
}

.index-section-kicker {
  margin: 0;
  color: var(--color-sky);
  font-family: var(--font-menu);
  font-size: clamp(0.82rem, 1.4vw, 1rem);
  letter-spacing: 0;
}

.index-section-heading {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.6rem);
  text-align: center;
}

.index-section-heading img {
  width: min(28rem, 82vw);
}

/* 排除 pill 標題（.index-heading-band__title，含 --band 與 --side），
   讓角色帶/側邊 pill 的字級由 .index-heading-band__title 自行控制；
   純文字標題（--text）仍套用大字。 */
.index-section-heading h2:not(.index-heading-band__title) {
  margin: 0;
  color: var(--color-sky);
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.12;
}

.index-section-heading--text h2 {
  color: var(--color-sky);
}

/* 票券及特典展示／票種說明標題：膠囊樣式（白字、膠囊底用原字色 sky 藍）。
   字級為共用大字 ×0.8 後再 ×0.8（兩次各縮 20%）；padding 為 em 隨字縮，整顆膠囊一起變小。 */
#benefit-title,
#ticket-note-title {
  justify-self: center;
  padding: 0.3em 1.4em;
  color: #fff;
  font-family: "GenSenRounded", sans-serif;
  font-size: clamp(1.008rem, 2.88vw, 2.016rem);
  background: var(--color-sky);
  border-radius: 999px;
  box-shadow: 0 0.4rem 1rem rgba(116, 83, 62, 0.12);
}

/* 票種說明膠囊往下挪：用正常流間距，避免 transform 造成視覺與版面脫節 */
#ticket-note-title {
  margin-top: clamp(1rem, 3vw, 2.5rem);
}

/* 票券及特典展示：與上方票價表拉遠、與下方輪播重疊 */
.index-section-heading:has(#benefit-title) {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 5vw, 4rem);
  margin-bottom: -5rem;
}

/* 票種說明標題列與下方卡片拉近：間距再壓到接近貼合 */
.index-section-heading:has(#ticket-note-title) {
  margin-bottom: clamp(0.1rem, 0.5vw, 0.3rem);
}

/* 中性骨架：基底不再硬塞白底/雲朵 mask/陰影/暈染，
   info-card 的外觀一律由各 section 自行處理（about / attention / ticket）。 */
.index-info-card {
  position: relative;
  overflow: hidden;
}

.index-info-card > * {
  position: relative;
}

.index-hero {
  position: relative;
  display: grid;
  justify-items: center;
  overflow-x: clip;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 0;
  background: radial-gradient(ellipse at 50% 32%, #fffce8 0%, #fdf5b8 58%, #fcf2a4 100%);
}

.index-hero__head {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3.5rem);
  left: 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(0.6rem, 2vw, 1.4rem);
  width: 100%;
  transform: translateX(-50%);
}

.index-hero__info {
  width: auto;
  height: auto;
  max-width: min(72%, 25.5rem);
  margin-top: -2rem;
}

.index-hero__title {
  width: min(58%, 30rem);
  margin: 0;
  /* 以 1920 基準上移 10%（相對 logo 自身高度） */
  transform: translateY(-20%);
}

.index-hero__title img {
  display: block;
  width: 100%;
  height: auto;
}

.index-hero__art {
  --hero-art-bleed: clamp(4rem, 22vw, 22rem);
  width: 98vw;
  margin: -4rem auto calc(var(--hero-art-bleed) * -1);
  padding-bottom: var(--hero-art-bleed);
  background: url("../assets/index/hero-art-large.png") center top / 100% auto no-repeat;
  filter: drop-shadow(0 1.2rem 1.8rem rgba(117, 82, 64, 0.16));
}

.index-hero__art img {
  display: block;
  width: 100%;
  height: auto;
}

/* welcome 區：所有尺寸以 1920px 為基準改用 vw，
   隨螢幕寬度等比例放大／縮小（1vw = 19.2px @1920）。 */
.index-welcome {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  /* 根據圖片 1263x1179 比例與 60vw 寬度計算最小高度，確保圖片完整顯示 */
  min-height: calc(60vw * (1179 / 1263));
  padding: 3.33vw 0;
  background: url("../assets/index/04.png") center / 60vw auto no-repeat;
}

.index-cloud-card {
  /* 限制寬度以確保文字落在背景圖中央的白色區域 */
  width: 50vw;
  margin-inline: auto;
  text-align: left;
}

.index-cloud-card h2 {
  /* 標題位移（獨立調整）：上方 margin 為負值＝往上移 */
  margin: -1.67vw auto 1vw;
  max-width: 38.33vw;
  color: var(--color-sky);
  font-family: var(--font-title);
  font-size: 2.78vw;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.index-cloud-card p {
  /* 內文位移（獨立調整） */
  max-width: 43.33vw;
  margin: 0.58vw auto 0;
  padding-left: 3.33vw;
  /* 0.98vw ×1.3：welcome 內文（vw 自訂，不受根字級影響）一併放大 30% */
  font-size: 1.27vw;
}

.index-about {
  background: var(--dot-pattern), linear-gradient(180deg, #e6f2e6 0%, #e6f2e6 78%, #e5eff7 100%);
}

.index-info-card {
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 6vw, 5rem);
}

.index-about__list {
  display: grid;
  gap: 0;
  margin: 0;
}

.index-about__list div {
  padding: 1rem 0.5rem;
  border-bottom: 1px solid var(--color-line);
}

.index-about__list div:last-child {
  border-bottom: 0;
}

.index-about__list dt {
  margin-bottom: 0.35rem;
  color: var(--color-sky);
  font-family: var(--font-menu);
  font-weight: 500;
}

.index-about__list dd {
  margin: 0;
}

.index-about__list p {
  margin: 0;
}

.index-table-wrap {
  position: relative;
  /* 桌機允許徽章往左凸出表格外；mobile 卡片版於 @media 內還原 hidden */
  overflow: visible;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.index-ticket {
  background: var(--dot-pattern), linear-gradient(180deg, #e5eff7 0%, #e5eff7 88%, #e5eff7 100%);
}

.index-ticket-table,
.index-note-table {
  width: 100%;
  border-collapse: collapse;
  /* 兩表文字統一棕色，各格繼承之 */
  color: var(--color-brown);
}

/* 票種說明表補四邊外框（內部格線維持；票價表仍無外框） */
.index-note-table {
  border: 2px solid var(--color-line);
  font-weight: 700;
  color: var(--color-brown);
}

/* 票價表與票種說明表統一：去外框、去底色，只留內部格線。
   每格僅畫上邊＋左邊線形成格線，再去掉表頭列上緣與首欄左緣（外框）。 */
.index-ticket-table th,
.index-ticket-table td,
.index-note-table th,
.index-note-table td {
  padding: clamp(0.85rem, 1.8vw, 1.25rem);
  vertical-align: top;
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}

/* 票種說明表內部格線加粗（0610 回饋「表格框太細」）。
   必須置於上方共用 1px 規則之後，同特異度靠順序勝出。 */
.index-note-table th,
.index-note-table td {
  border-top: 2px solid var(--color-line);
  border-left: 2px solid var(--color-line);
}

.index-ticket-table td[rowspan] {
  vertical-align: middle;
}

.index-ticket-table thead th,
.index-note-table thead th {
  border-top: 0;
}

.index-ticket-table th:first-child,
.index-ticket-table td:first-child,
.index-note-table th:first-child,
.index-note-table td:first-child {
  border-left: 0;
}

.index-ticket-table thead th,
.index-note-table thead th {
  font-family: var(--font-menu);
  text-align: center;
  white-space: nowrap;
}

.index-ticket-table tbody th,
.index-note-table tbody th {
  width: 11rem;
  color: var(--color-brown);
  font-family: var(--font-menu);
  text-align: center;
}

/* 內容文字置中；唯「通路」內容與「適用對象」欄靠左
   （「通路」標題不列入靠左，故由基底 thead 規則置中）。 */
.index-ticket-table tbody td {
  text-align: center;
}

.index-ticket-table tbody td[data-label="內容"] {
  white-space: nowrap;
  vertical-align: middle;
}

.index-ticket-table tbody td[data-label="價格"] {
  text-align: center;
  vertical-align: middle;
}

.index-ticket-table tbody td[data-label="通路"] {
  text-align: left;
}

/* 票種說明表：票種/適用對象垂直置中；適用對象內容水平靠左（多行說明閱讀順） */
.index-note-table tbody th {
  white-space: nowrap;
}

.index-note-table tbody th,
.index-note-table tbody td {
  vertical-align: middle;
}

.index-note-table tbody td {
  text-align: left;
  white-space: nowrap;
}

/* 預售限定徽章：橘色對話泡圖，絕對定位壓在表格左緣、往左凸出一半、垂直置中 */
/* 所有票種格文字垂直置中（水平置中由基底 tbody th 的 text-align 提供），
   列高被 rowspan 撐高時亦不貼頂 */
.index-ticket-table tbody th {
  vertical-align: middle;
}

.index-ticket-table tbody th:has(.ticket-badge) {
  position: relative;
}

.ticket-name--mobile {
  display: none;
}

.index-ticket-table tbody th .ticket-badge {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  width: clamp(2.75rem, 5vw, 3.75rem);
  height: auto;
  /* Y -55%：在置中基礎上再往上移 5%（相對徽章自身高度） */
  transform: translate(-50%, -100%);
}

.index-ticket-table ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.index-ticket-table p,
.index-ticket-table em,
.index-note-table p {
  margin: 0;
}

/* ※ 註記改紅色強調（其餘表格文字維持棕色） */
.index-ticket-table em {
  display: block;
  color: var(--color-note);
  font-style: normal;
  font-size: 0.92em;
}

.index-ticket-table a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ※ 註記區塊：桌機隱藏（註記顯示於各通路格內），<768 才置於表格下方 */
.index-ticket-footnote {
  display: none;
}

.index-benefit {
  background: var(--dot-pattern), #e5eff7;
}

.index-ticket-note {
  background: var(--dot-pattern), linear-gradient(180deg, #e5eff7 0%, #e5eff7 86%, #f2e6f2 100%);
}

.index-carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: clamp(0.6rem, 2vw, 1.2rem);
  row-gap: 0;
  align-items: center;
  width: 90%;
  margin-inline: auto;
}

.index-carousel__viewport {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
}

.index-carousel__slide {
  position: relative;
  display: none;
  margin: 0;
  padding: clamp(0.8rem, 2vw, 1.2rem);
  text-align: center;
}

.index-carousel__slide.is-active {
  display: block;
}

.index-carousel__slide figcaption {
  position: absolute;
  bottom: clamp(0.6rem, 1.5vw, 1rem);
  left: 0;
  right: 0;
  color: var(--color-sky);
  font-family: var(--font-menu);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
}

.index-carousel__control {
  display: grid;
  width: clamp(2.75rem, 5vw, 3.6rem);
  height: clamp(2.75rem, 5vw, 3.6rem);
  place-items: center;
  border: 0;
  color: var(--color-sky);
  background: transparent;
}

.index-carousel__control span {
  display: block;
  margin-top: -0.12em;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
}

.index-carousel__dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: clamp(0.5rem, 1.2vw, 0.75rem);
  margin-top: 0.5rem;
}

.index-carousel__dot {
  width: clamp(0.6rem, 1.2vw, 0.75rem);
  height: clamp(0.6rem, 1.2vw, 0.75rem);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(91, 155, 213, 0.35);
  cursor: pointer;
}

.index-carousel__dot.is-active {
  background: var(--color-sky);
}

.index-note-table p + p {
  margin-top: 0.25rem;
}

.index-attention {
  background: var(--dot-pattern), linear-gradient(180deg, #e5eff7 0%, #f2e6f2 16%, #f2e6f2 86%, #e5eff7 100%);
}

.index-attention__list {
  display: grid;
  gap: 1.8rem;
  margin: 0;
  padding-left: 1.4rem;
  /* 改用「-」項目符號（比照 ATTENTION.md），取代數字 */
  list-style-type: "- ";
  /* 文字放大 10%（em 相對繼承字級，隨 1920 基準等比縮放） */
  font-size: 1.1em;
  position: relative;
  left: 0;
}

.index-attention__list li::marker {
  color: var(--color-sky);
  font-family: var(--font-menu);
}

.index-faq__list {
  display: grid;
  gap: 0.85rem;
}

.index-faq__item {
  overflow: hidden;
  border: 0.15rem solid rgba(166, 124, 82, 0.28);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
}

.index-faq__item h3 {
  margin: 0;
}

.index-faq__item button {
  position: relative;
  width: 100%;
  padding: 1rem 3.2rem 1rem 1.25rem;
  border: 0;
  color: var(--color-sky);
  font-family: var(--font-menu);
  font-size: clamp(1rem, 1.8vw, 1.16rem);
  text-align: left;
  background: transparent;
}

.index-faq__item button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  display: grid;
  width: 0.85rem;
  height: 0.85rem;
  place-items: center;
  border-right: 3px solid var(--color-sky);
  border-bottom: 3px solid var(--color-sky);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.24s ease;
}

.index-faq__item button[aria-expanded="true"]::after {
  transform: translateY(-35%) rotate(225deg);
}

.index-faq__panel {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem 0 0.25rem;
  transition: max-height 0.28s ease;
}

.index-faq__item button[aria-expanded="true"] + .index-faq__panel {
  max-height: 16rem;
  padding-bottom: 1.15rem;
}

.index-faq {
  background: var(--dot-pattern), #e5eff7;
}

.index-faq__panel p {
  margin: 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-line);
}

@media (max-width: 1024px) {
  .index-about__list div {
    grid-template-columns: 7.5rem 1fr;
  }
}

@media (max-width: 768px) {
  .index-container {
    width: min(calc(100% - 1.5rem), var(--container));
  }

  .index-section {
    padding: 3rem 0;
  }

  .index-cloud-card,
  .index-info-card {
    border-radius: 1.25rem;
  }

  .index-about__list div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  /* 售票資訊維持表格呈現；窄螢幕保留真實表頭，改為橫向捲動 */
  .index-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .index-ticket-table {
    min-width: 40rem;
  }

  /* 徽章退回行內排列，避免絕對定位於可捲動表格內被裁切 */
  .index-ticket-table tbody th .ticket-badge {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35rem;
    transform: none;
  }

  .index-carousel {
    grid-template-columns: 1fr 1fr;
  }

  .index-carousel__viewport {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .index-carousel__control {
    justify-self: center;
  }

  /* ※ 註記改置於票價表下方，格內版本隱藏 */
  .index-ticket-table td > em {
    display: none;
  }

  .index-ticket-footnote {
    display: block;
    margin-top: 0.85rem;
  }

  .index-ticket-footnote em {
    display: block;
    color: var(--color-note);
    font-style: normal;
    font-size: 0.92em;
  }

  /* 票種說明表維持表格呈現；窄螢幕縮窄票種欄 */
  .index-note-table tbody th {
    width: 6.5rem;
  }
}

@media (max-width: 480px) {
  .index-cloud-card {
    padding: 1.25rem;
  }

  .index-ticket-table th,
  .index-ticket-table td,
  .index-note-table th,
  .index-note-table td {
    padding: 0.8rem;
  }

  .index-faq__item button {
    padding-right: 2.8rem;
  }
}

@media (max-width: 440px) {
  /* 窄螢幕其他 section 整體放大 50%：覆寫流體根字級（1.3 → 1.95），
     令所有 rem 版面同步放大 1.5 倍。 */
  html {
    font-size: calc(100vw / 120 * 1.95);
  }

  .index-section {
    padding: 8rem 0;
  }

  /* 整體內容容器改為 80vw（置中留邊；hero 不使用此容器） */
  .index-container {
    width: 80vw;
  }

  /* 輪播還原左中右三欄（抵銷 ≤768 的兩欄配置） */
  .index-carousel {
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
  }

  .index-carousel__viewport {
    grid-column: auto;
    grid-row: auto;
  }

  .index-carousel__control {
    justify-self: auto;
    width: clamp(5.5rem, 10vw, 7.2rem);
    height: clamp(5.5rem, 10vw, 7.2rem);
  }

  .index-carousel__control span {
    font-size: clamp(4rem, 8vw, 5.6rem);
  }

  .index-carousel__dots {
    gap: 1.2rem;
    margin-top: 0.6rem;
  }

  .index-carousel__dot {
    width: 5px;
    height: 5px;
  }

  /* hero 改用直式手機圖 deco-group2435.png，疊在泡泡底圖之上 */
  .index-hero__art {
    --hero-art-bleed: clamp(1.5rem, 10vw, 3rem);
    width: min(97vw, 432px);
    margin-top: -3rem;
    margin-left: 3rem;
    background-image: url("../assets/index/hero-art-large-mobile.png");
    background-size: cover;
    background-position: center top;
  }

  .index-hero__art img {
    aspect-ratio: auto;
  }

  /* 場館日期（03.png）與主標（key-visual-logo-zh.png）整體下移 */
  .index-hero__head {
    top: 24%;
  }

  /* 場館日期與主標維持先前核准的「放大一倍」視覺：
     因根字級已 ×1.5，故 rem 同步 ÷1.5（51→34、60→40）保持像素不變。 */
  .index-hero__info {
    max-width: min(96%, 34rem);
    margin-top: -2rem;
  }

  .index-hero__title {
    width: min(96%, 40rem);
    transform: translateY(-20%);
  }

  /* welcome 段落用 vw，不受根字級影響，需明確放大 */
  .index-cloud-card p {
    font-size: 4vw;
  }

  /* 膠囊標題：抵銷根字級 ×1.5 後再放大 56%（×1.2×1.3） */
  #benefit-title,
  #ticket-note-title {
    font-size: clamp(1.153rem, 4.942vw, 2.306rem);
  }

  .index-section-heading:has(#benefit-title) {
    margin-top: 6rem;
    margin-bottom: -2rem;
  }

  .index-heading-band__title {
    font-size: 13.14vw;
  }

  .index-section-heading h2:not(.index-heading-band__title) {
    font-size: clamp(1.167rem, 5vw, 2.333rem);
  }
}

/* === 底圖：改用設計稿原圖 page-bg.png（皇上指定）===
   各區段底色一律透明，讓 body 的 page-bg.png 透出顯示。
   白色雲朵卡（.index-cloud-card / .index-info-card）保留以維持文字可讀。 */
.index-hero,
.index-about,
.index-ticket,
.index-benefit,
.index-ticket-note,
.index-attention,
.index-faq {
  background: transparent !important;
}

/* ============================================================
   重新組裝：各區「角色帶 + 標題膠囊」與「雲朵卡（設計稿 -02 切片）」
   角色圖：ABOUT/TICKET/faq.png（標題兩側角色，中間留空）、attention.png（熊貓）
   雲朵卡：about-02 / ticket-02 / attention02 / faq02.png（白色扇貝卡）
   ============================================================ */

/* --- 標題列：角色帶疊白色標題膠囊 --- */
.index-heading-band {
  position: relative;
  display: inline-block;
  max-width: 92vw;
}

.index-heading-band > img {
  width: min(48rem, 92vw);
}

/* ABOUT 區角色帶（48rem ×1.2 ×1.1 ×0.9 ≈ 57rem，僅此區）- 在 1920px 下累計縮小 20% (再縮小 10%) */
.index-about .index-heading-band > img {
  width: min(46.17rem, 92vw);
}

/* ABOUT 角色帶下移、疊在 about-02 卡片上方，一半超出卡片頂緣 */
.index-about .index-section-heading--band {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}

.index-about .index-info-card {
  /* 上提「半個角色帶高度」(寬 ×208/938÷2 ≈ ×0.111)，使角色帶中線落在卡片頂緣 */
  margin-top: calc(min(46.17rem, 92vw) * -0.111);
}

.index-heading-band__title {
  position: absolute;
  top: 13%;
  left:47%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.3em 0.85em;
  white-space: nowrap;
  color: var(--color-sky);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.098rem, 3.285vw, 2.628rem);
  line-height: 1.1;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  box-shadow: 0 0.4rem 1rem rgba(116, 83, 62, 0.12);
}

/* ATTENTION：標題膠囊 + 側邊熊貓 */
.index-section-heading--side {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
}

.index-section-heading--side .index-heading-band__title {
  position: static;
  transform: none;
}

.index-heading-side {
  width: clamp(3.5rem, 8vw, 6rem);
}

/* --- 雲朵卡：以設計稿 -02 切片做可伸縮的扇貝白卡 ---
   border-image：四邊取樣 scallop、round 平鋪、fill 保留白色中心，
   故任何尺寸/長寬的 -02 來源皆可鋪成一致的扇貝邊。 */
.index-about .index-info-card,
.index-ticket .index-table-wrap,
.index-attention .index-info-card,
.index-faq .index-faq__list {
  overflow: visible;
  background: #fff;
  box-shadow: none;
  border: none;
  border-width: clamp(1.1rem, 3vw, 1.7rem);
  border-color: transparent;
  border-image-slice: 46 fill;
  border-image-repeat: round;

  /* 取消 codex 的 CSS mask 扇貝（改用圖片） */
  mask: none;
  -webkit-mask: none;
}

.index-about .index-info-card {
  border-image-source: url("../assets/index/about-02.png");
}
.index-ticket .index-table-wrap {
  border-image-source: url("../assets/index/ticket-02.png");
}
.index-attention .index-info-card {
  border-image-source: url("../assets/index/attention02.png");
}
.index-faq .index-faq__list {
  border-image-source: url("../assets/index/faq02.png");
}

/* index-info-card（about/attention）白底改用 about-02.png 扇貝卡。
   slice 加大到 ~115 才切得到扇貝凸起（原 46 太小會渲染成純白方框）。 */
.index-about .index-info-card,
.index-attention .index-info-card {
  /* 不可留實心白底，否則扇貝凹陷會被白矩形填滿看不出來；白色中心由 fill 提供 */
  background: transparent;
  border-width: clamp(1.4rem, 3.2vw, 2.2rem);
  border-image-source: url("../assets/index/about-02.png");
  border-image-slice: 115 fill;
}

/* 卡片內側留白（border-image 不佔內距） */
.index-about .index-info-card,
.index-attention .index-info-card {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4rem);
}
.index-faq .index-faq__list {
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.75rem) 0;
}
.index-ticket .index-table-wrap {
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
}

/* ============================================================
   [暫時] 移除所有 section 的白底卡與底圖，待重新設計背景。
   刪除本整段（含 body 的 page-bg 還原）即可回復先前所有背景。
   ============================================================ */
.index-hero,
.index-about,
.index-ticket,
.index-benefit,
.index-ticket-note,
.index-attention,
.index-faq,
.index-cloud-card,
.index-table-wrap,
.index-faq__list {
  background: none !important;
  border: 0 !important;
  border-image: none !important;
  box-shadow: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* ABOUT info-card 底圖比照 04.png：背景圖＋鎖長寬比，about-02 完整呈現、內容置中。
   （取代原 border-image；attention 內容過長不適用鎖比例，故僅此區） */
.index-about .index-info-card {
  display: grid;
  place-items: center;
  /* 與 04.png 一致：用視窗 60vw，並以負 margin 掙脫 .index-container(1200px) 的寬度限制後置中 */
  width: 60vw;
  margin-inline: calc((100% - 60vw) / 2);
  aspect-ratio: 1263 / 894;
  padding: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 7vw, 6rem);
  background: url("../assets/index/about-02.png") center / 100% auto no-repeat;
  border: 0;
  border-image: none;
  box-shadow: none;
}

.index-about .index-about__list {
  width: min(100%, 46rem);
}

/* TICKET 內容卡：ticket-02.png 直式扇貝卡，鎖 60vw（與 about-02 統一）、鎖比例完整呈現。
   併入後內容（票價表＋特典展示＋票種說明）置於卡內，由上往下排列。 */
/* TICKET 角色帶放大 20%（48rem ×1.2 = 57.6rem，僅此區） */
.index-ticket .index-heading-band > img {
  width: min(46.08rem, 92vw);
}

/* TICKET 角色帶下移、疊在 ticket-02 卡片上方，一半超出卡片頂緣（比照 ABOUT） */
.index-ticket .index-section-heading--band {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}

.index-ticket .index-heading-band__title {
  top: -10%;
  left: 50%;
}

.index-ticket__card {
  box-sizing: border-box;
  /* ticket-02.png 扇貝框作背景，鎖寬 60vw、置中；高度由卡內內容驅動，背景隨之伸縮。 */
  width: 60vw;
  /* 上提「半個角色帶高度」(ticket.png 寬 ×166/1008÷2 ≈ ×0.0823)，使角色帶中線落在卡片頂緣 */
  margin-top: calc(min(57.6rem, 92vw) * -0.0823);
  /* 負邊距置中（比照 ABOUT）：60vw 超過容器(1200px)時 margin auto 會歸 0 致右偏，故改用此式 */
  margin-inline: calc((100% - 60vw) / 2);
  background-image: url("../assets/index/ticket-1200px.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* 卡內內容：直向堆疊、水平置中，留內距使內容退離扇貝邊 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
}

.index-ticket__card > * {
  width: min(100%, 60rem);
}

/* 票種說明區塊直接坐落 ticket-02 卡面，剝除基底 .index-info-card 另疊的白卡
   （白底 + 雲朵 mask + 陰影），不影響 about/attention 的扇貝白卡。 */
.index-ticket .index-info-card {
  background: transparent;
  mask: none;
  -webkit-mask: none;
  box-shadow: none;
}

/* ATTENTION 內容卡：底圖比照 TICKET 處理，改用 attention02.png。
   鎖寬 60vw、置中；高度由注意事項清單內容驅動，背景以 100% 100% 隨之伸縮。
   （注意事項內容過長，不適用 ABOUT 的鎖比例，故與 TICKET 同採可伸縮背景，
   並清掉 line 737-744 留下的 about-02 border-image 扇貝框） */
.index-attention .index-info-card {
  box-sizing: border-box;
  width: 60vw;
  /* 高度依 attention02.png 原圖比例（1263×1375）拉長到對應 60vw 寬的長度，
     使卡片長寬比＝原圖，100% 100% 填滿時扇貝不再被垂直壓縮（比照 .index-welcome）。
     min-height：內容較短時卡片維持此拉長高度，內容較長時可再撐高不被裁切。 */
  min-height: calc(60vw * 1375 / 1263);
  /* 負邊距置中（比照 ABOUT）：60vw 超過容器(1200px)時 margin auto 會歸 0 致右偏，故改用此式 */
  margin-inline: calc((100% - 60vw) / 2);
  background-image: url("../assets/index/attention02.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
  border: 0;
  border-image: none;
  box-shadow: none;
}

.index-attention .index-info-card > * {
  width: min(100%, 60rem);
}

/* ATTENTION 標題列：熊貓 attention.png 縮小一半（共用 .index-section-heading img
   的 28rem → 14rem），並比照 ABOUT 疊在卡片頂緣。
   （.index-attention .index-heading-side 特異度 0,2,0 蓋過 line 31 的
   .index-section-heading img 0,1,1） */
.index-attention .index-heading-side {
  /* 再縮 20%：14rem ×0.8 = 11.2rem、41vw ×0.8 = 32.8vw */
  width: min(11.2rem, 32.8vw);
  /* 熊貓移出 flex 流（絕對定位），讓膠囊獨自置中；
     貼右側、下移到膠囊文字之下，避免蓋住置中膠囊，下半身疊在卡片右上角 */
  position: absolute;
  /* 熊貓上移到半身跨在卡片頂緣（卡片頂緣＝標題列底；熊貓中心對齊該線 → top 約 -20%） */
  top: -20%;
  /* 左移 10%：right 2% → 12% */
  right: 12%;
}

/* 標題列疊在卡片之上、取消下方間距（比照 ABOUT 的 --band） */
.index-attention .index-section-heading--side {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}

/* 熊貓改絕對定位後，標題列高度只剩膠囊本身，卡片緊貼膠囊下方即可；
   熊貓自頂端垂落、下半身疊在卡片頂緣，毋須再以負 margin 上提卡片 */
.index-attention .index-info-card {
  margin-top: 0;
}

/* ATTENTION 膠囊上移 5%：--side 版型膠囊為 position: static（line 692-695），
   改用 relative + top:-5%（相對標題列高度），視覺幅度比照角色帶膠囊的上移。
   特異度與 --side 規則同為 0,2,0，靠源碼順序在後而生效。 */
#attention-title br {
  display: none;
}

.index-attention .index-heading-band__title {
  position: relative;
  top: -1.5rem;
  /* 膠囊隨 PNG 一起縮 20%：基底 clamp(1.22rem,3.65vw,2.92rem) ×0.8 */
  font-size: clamp(0.878rem, 2.628vw, 2.102rem);
  /* 抵銷基底 .index-heading-band__title 的 left:47%（position 一旦改 relative 就會生效，
     把膠囊往右推 564px）；歸零後膠囊由 flex justify-content:center 正常置中 */
  left: 0;
}

/* ============================================================
   FAQ：拆掉手風琴卡片（.index-faq__item），改純段落（Q/A），
   外層 .index-faq__list 套 faq02 扇貝卡。
   faq02.png 原檔下方有約 445px 空白、非乾淨四邊框，已用 Pillow 頂端裁切為
   faq02-card.png（1263×1317 純扇貝卡）。改用 border-image：四角扇貝固定、
   四邊平鋪，段落多寡撐高都不變形（扇貝齒深僅約 29px，slice 取 40 含齒含圓角）。
   需 !important 蓋過上方 [暫時移除] 區塊對 .index-faq__list 的 !important 清除。
   ============================================================ */
/* FAQ 角色帶放大 50% 後再縮 20%（72rem ×0.8 = 57.6rem），再縮 5% 三次（×0.95³ = 49.3848rem） */
.index-faq .index-heading-band > img {
  width: min(49.3848rem, 92vw);
}

/* FAQ 角色帶比照 ABOUT：下移疊在卡片頂緣，角色下半超出卡片頂緣（半個帶高） */
.index-faq .index-section-heading--band {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}

/* FAQ 膠囊在共用 47% 基礎上右移 5%（→ 52%）、共用 13% 基礎上上移 5%（→ 8%） */
.index-faq .index-heading-band__title {
  left: 50%;
  top: -5%;
}

.index-faq .index-faq__list {
  /* 寬度比照 about/ticket/attention 三張卡統一為 60vw、置中 */
  width: 60vw;
  /* 負邊距置中（比照 ABOUT）：60vw 超過容器(1200px)時 margin auto 會歸 0 致右偏，故改用此式 */
  margin-inline: calc((100% - 60vw) / 2);
  /* 上提半個角色帶高度（faq.png 寬 ×110/1001÷2 ≈ ×0.055，帶寬 57.6rem），
     使角色帶中線落在卡片頂緣、下半疊在 faq02-card 上（比照 ABOUT info-card） */
  margin-top: calc(min(49.3848rem, 92vw) * -0.055);
  /* 不用 border-image，改背景圖：裁好的 faq02-card.png（1263×1317 純扇貝卡）鋪滿，
     min-height 鎖原圖比例避免 100% 100% 壓縮扇貝（與 attention 同手法）。 */
  min-height: calc(60vw * 1317 / 1263);
  display: grid;
  align-content: center;
  gap: clamp(1.1rem, 2.6vw, 1.7rem);
  background: url("../assets/index/faq02-card.png") center top / 100% 100% no-repeat !important;
  border: 0 !important;
  border-image: none !important;
  box-shadow: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  overflow: visible !important;
}

/* 一組問答（文字靠左，整體右移 5% 修正左偏） */
.index-faq__qa {
  display: grid;
  gap: 0.4rem;
  margin-left: 10%;
}

/* 問題：暗紅、menu 字體、略粗 */
.index-faq__q {
  margin: 0;
  color: #962b34;
  font-family: var(--font-menu);
  font-weight: 500;
  font-size: clamp(1rem, 1.9vw, 1.18rem);
  line-height: 1.4;
}

/* 答案：棕色內文 */
.index-faq__a {
  margin: 0;
  color: var(--color-brown);
  line-height: 1.7;
}

/* ============================================================
   ≤425 B 覆寫：角色帶與四張白卡統一放大至 90vw。
   此區塊必須置於檔尾——所有 base 角色帶/卡片規則之後，
   才能在「同特異度」下以後置順序勝出（@media 不增加特異度）。
   ============================================================ */
@media (max-width: 440px) {
  /* 角色帶（about/ticket/faq）收至 90vw，對齊 90vw 內容容器 */
  .index-heading-band {
    max-width: 90vw;
  }

  .index-heading-band > img,
  .index-ticket .index-heading-band > img,
  .index-faq .index-heading-band > img {
    width: 90vw;
  }

  .index-about .index-heading-band > img {
    width: 85.5vw;
    transform: translateY(2rem);
  }

  .index-attention .index-heading-band > img {
    width: 72vw;
  }

  #attention-title br {
    display: inline;
  }

  .index-attention .index-heading-band__title {
    text-align: center;
  }

  .index-faq .index-heading-band > img {
    width: 72.9vw;
    transform: translateY(-1vw);
  }

  /* 四張內容白卡一併放大至 90vw、與角色帶等寬；margin-inline 歸零、
     疊壓負 margin 與 min-height 比例同步改用 90vw。 */

  .index-about .index-info-card {
    width: 90vw;
    margin-inline: calc((100% - 90vw) / 2);
    margin-top: calc(90vw * -0.111);
    aspect-ratio: auto;
    background-size: 100% 100%;
  }

  .index-ticket__card {
    width: 90vw;
    margin-inline: calc((100% - 90vw) / 2);
    margin-top: calc(90vw * -0.0823);
    background-size: 100% 100%;
  }

  .index-attention .index-info-card {
    width: 90vw;
    margin-inline: calc((100% - 90vw) / 2);
    min-height: calc(90vw * 1375 / 1263 * 1.3);
    aspect-ratio: auto;
    background-size: 100% 100%;
  }


  .index-faq .index-faq__list {
    width: 85.5vw;
    margin-inline: calc((100% - 85.5vw) / 2);
    min-height: unset;
    margin-top: calc(85.5vw * -0.055);
    padding-block: clamp(4.39rem, 8.79vw, 6.59rem);
    gap: clamp(0.6rem, 1.5vw, 1rem);
    background-size: 100% 100% !important;
  }

  .index-heading-band__title,
  .index-attention .index-heading-band__title {
    font-size: 5.125vw;
    top: -3rem;
  }

  .index-about .index-heading-band__title {
    top: -5%;
  }

  .index-faq .index-heading-band__title {
    top: -50%;
  }

  .index-about__list {
    margin-top: 3rem;
  }

  /* about / ticket / attention / faq 內文字級比照 welcome vw 處理 */
  .index-about__list dt,
  .index-ticket-table thead th,
  .index-note-table thead th {
    font-size: 4vw;
  }

  .index-faq__q {
    font-size: 3.078vw !important;
    padding-block: 0;
  }

  .index-faq__item button {
    font-size: 3.078vw !important;
    padding-block: 0.3rem;
  }

  .index-faq__qa {
    gap: 0.15rem;
  }

  .index-attention__list {
    gap: 0.2rem;
  }

  .index-about__list dd,
  .index-about__list p,
  .index-ticket-table tbody th,
  .index-ticket-table tbody td,
  .index-note-table tbody th,
  .index-note-table tbody td,
  .index-attention__list li,
  .index-ticket-footnote em {
    font-size: 3vw;
  }

  .index-faq__a,
  .index-faq__panel p {
    font-size: 2.3085vw !important;
  }

  /* welcome 白底卡（04.png 背景）放大至 90vw、min-height 拉長容納內文 */
  .index-welcome {
    min-height: calc(90vw * 1.6);
    margin-bottom: 5rem;
    background-size: 90vw 100%;
  }

  /* welcome 容器展寬至 90vw，確保 88vw 的 cloud-card 不溢出，margin-inline: auto 才能置中 */
  .index-welcome .index-container {
    width: 90vw;
  }

  /* ATTENTION 熊貓圖（attention.png）往右移（right 12% → 2%）、往上移（top -20% → -30%） */
  .index-attention .index-heading-side {
    right: -5%;
    top: 30%;
  }

  /* welcome 內文隨白底卡等比放大（×80/60＝×4/3），維持文字與卡片比例 */
  .index-cloud-card {
    width: 88vw;
    margin-inline: auto;
  }

  .index-cloud-card h2 {
    margin: -10vw auto 8vw;
    max-width: 67.6vw;
    font-size: 5vw;
  }

  .index-cloud-card p {
    max-width: 76.4vw;
    margin: 0.77vw auto 0;
    padding-left: 0;
    font-size: 3vw;
  }

  /* 輪播 viewport 往下延展，容納下移的 figcaption */
  .index-carousel__viewport {
    padding-bottom: 2rem;
  }

  /* 輪播 figcaption：藍色、字級放大 30% 後再縮 10% */
  .index-carousel__slide figcaption {
    color: var(--color-sky);
    font-size: clamp(2.05rem, 3.7vw, 2.57rem);
    bottom: -1.5rem;
  }

  /* 票種說明：白底卡解除 overflow 裁切，表格縮小 20%、寬 90%、置中 */
  .index-ticket .index-info-card {
    overflow: visible;
  }

  .index-ticket .index-note-table {
    width: 90%;
    margin-inline: auto;
  }

  .index-ticket .index-note-table p + p {
    margin-top: 0;
  }

  .index-ticket .index-note-table p {
    line-height: 1.25;
  }

  .index-ticket .index-note-table tbody td,
  .index-ticket .index-note-table tbody td p {
    white-space: normal;
  }

  /* footnote 左對齊 table 左邊框（補上 table-wrap 的 padding-left） */
  .index-ticket-footnote {
    padding-left: clamp(1.25rem, 3.5vw, 2.5rem);
  }

  /* 票價表改合版面呈現（0610 回饋示意）：取消橫向捲動與固定最小寬，
     補外框、欄寬交還內容自行分配，整表收進螢幕內。 */
  .index-table-wrap {
    overflow-x: visible;
  }

  .index-ticket-table {
    min-width: 0;
    border: 0;
  }

  .index-ticket-table tbody th {
    width: auto;
  }

  .index-ticket-table th,
  .index-ticket-table td {
    padding: 0.5rem 0.4rem;
  }

  .index-ticket-table ul {
    padding-left: 0;
  }

  /* 預售票種欄：徽章＋文字改上下佈局，th 保持 table-cell 才能 vertical-align */
  .index-ticket-table tbody th:has(.ticket-badge) {
    vertical-align: middle;
    text-align: center;
  }

  .index-ticket-table tbody th:has(.ticket-badge) .ticket-badge {
    display: block;
    width: 20vw;
    margin: 0 auto 0.4rem;
  }

  .ticket-name--desktop {
    display: none;
  }

  .ticket-name--mobile {
    display: inline;
  }

  /* 側邊預約鈕與回頂鈕放大一倍；位置下移至畫面約 3/4 處（0610 回饋） */
  .page-index .side-booking {
    top: 65%;
    width: 14.25vw;
    right: -2.5rem;
  }

  .back-to-top {
    width: 14.25vw;
    height: 14.25vw;
    bottom: calc(15svh + env(safe-area-inset-bottom, 0px));
    right: -2rem;
  }

  .back-to-top img {
    width: 6.58vw;
  }
}