h1, h2, h3, h4, h5, h6, p, button, span {
  font-family: "Chiron GoRound TC", "Noto Sans TC", sans-serif;
}

/*--------------1. Header 導覽列--------------*/

/* header 置頂固定 + 滑動顯示/隱藏 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  animation-duration: 0.4s; /* 控制 slideIn/slideOut 動畫速度 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 預留 header 高度，實際值由 JS 校正 */
html {
  overflow-y: scroll;
}

/* 徹底阻止 Bootstrap 開啟 Modal 時對 body 加上的捲軸補償位移，
   避免整個頁面背景/內容在開關 Modal 時產生跳動 */
body.modal-open {
  overflow: visible !important;
  padding-right: 0 !important;
}

/* Bootstrap 開 Modal 時也會對所有 .fixed-top 元素（包含 header）
   自動加上 padding-right 行內樣式做捲軸補償，這裡一併清零，
   避免 header 的內容/背景跟著位移 */
.site-header,
.fixed-top {
  padding-right: 0 !important;
}

body {padding-top: 90px;overflow-x: hidden;letter-spacing: 1px}

/*--------------Hero & First 銜接處漸層--------------*/
#Hero {
  position: relative;
}
#Hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 230, 104, 0) 0%, #ffe668 100%);
  pointer-events: none;
  z-index: 5;
}
/* navbar 加高、logo 放大 */
.logo-custom {height: 4.5rem;width: auto;max-width: none;padding: 5px}

/* 漢堡選單按鈕 */
.toggler-a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #000;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 1);
  transition: box-shadow 0.15s, transform 0.15s;
}

.toggler-a:hover {box-shadow: 5px 5px 0 rgba(0, 0, 0, 1);}

.toggler-a:active {box-shadow: 1px 1px 0 rgba(0, 0, 0, 1);transform: translate(3px, 3px);}

.toggler-a .toggler-a-line,.toggler-a .toggler-a-line::before,.toggler-a .toggler-a-line::after {content: '';display: block;width: 20px;height: 2.5px;
  background: #000;border-radius: 6px;transition: 0.3s;}

.toggler-a .toggler-a-line::before {position: absolute;transform: translateY(-6px);}
.toggler-a .toggler-a-line::after {position: absolute;transform: translateY(6px);}
.toggler-a[aria-expanded="true"] .toggler-a-line {background: transparent;}
.toggler-a[aria-expanded="true"] .toggler-a-line::before {transform: rotate(45deg);}
.toggler-a[aria-expanded="true"] .toggler-a-line::after {transform: rotate(-45deg);}

/* 回到頂端按鈕 */
.btn-gotop {
  position: fixed;
  right: 12px;
  bottom: 45px;
  z-index: 1030;
  width: 68px;
  border-radius: 20px;
  background: #fff;
  border: 3px solid #000;
  color: #000;
  padding: 8px 6px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 1);
  transition: box-shadow 0.15s, transform 0.15s, opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

.btn-gotop.is-visible {opacity: 1;visibility: visible;transform: translateY(0);}

.btn-gotop:hover {box-shadow: 5px 5px 0 rgba(0, 0, 0, 1);}

.btn-gotop:active {box-shadow: 1px 1px 0 rgba(0, 0, 0, 1);transform: translate(3px, 3px);}

.btn-gotop-icon {
  width: 44px;
  height: auto;
  pointer-events: none;
}

.btn-gotop-label {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #000;
  line-height: 1;
}

@media (max-width: 767.98px) {
  .btn-gotop {right: 12px;bottom: 40px;width: 58px;padding: 6px 5px 6px;}
  .btn-gotop-icon {width: 36px;}
  .btn-gotop-label {font-size: 0.6rem;}
}

/* 標題文字兩側加分隔線 */
.heading-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.heading-divider::before,
.heading-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: currentColor;
  opacity: 0.45;
}

/*按鈕*/
.btn-yellow {
  --bs-btn-color: #000;
  --bs-btn-bg: #f5e67e;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d7ca6e;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 245, 230, 126;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #bfb362;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f5e67e;
  --bs-btn-disabled-border-color: #000;
  font-weight: bolder;
  letter-spacing: 1.5px;
  border: 3px solid #000;
  transition: box-shadow 0.15s, transform 0.15s;
}

.btn-yellow:hover {box-shadow: 5px 5px 0 rgba(0, 0, 0, 1);}
.btn-yellow:active {box-shadow: 1px 1px 0 rgba(0, 0, 0, 1);transform: translate(3px, 3px);}

.btn-pink {
  --bs-btn-color: #000;
  --bs-btn-bg: #f5bed6;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d7a7bc;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 245, 190, 214;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #bf94a6;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f5bed6;
  --bs-btn-disabled-border-color: #000;
  font-weight: bolder;
  letter-spacing: 1.5px;
  border: 3px solid #000;
  transition: box-shadow 0.15s, transform 0.15s;
}
.btn-green {
  --bs-btn-color: #000;
  --bs-btn-bg: #9aca65;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #87b158;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 154, 202, 101;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #789d4e;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #9aca65;
  --bs-btn-disabled-border-color: #000;
  font-weight: bolder;
  letter-spacing: 1.5px;
  border: 3px solid #000;
  transition: box-shadow 0.15s, transform 0.15s;
}

.btn-green:hover {box-shadow: 5px 5px 0 rgba(0, 0, 0, 1);}
.btn-green:active {box-shadow: 1px 1px 0 rgba(0, 0, 0, 1);transform: translate(3px, 3px);}

.btn-blue {
  --bs-btn-color: #000;
  --bs-btn-bg: #9fd9f6;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #7fcaf0;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #6ccaef;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #9fd9f6;
  --bs-btn-disabled-border-color: #000;
  font-weight: bolder;
  letter-spacing: 1.5px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 1);
  transition: box-shadow 0.15s, transform 0.15s;
}

.btn-blue:hover {box-shadow: 5px 5px 0 rgba(0, 0, 0, 1);}
.btn-blue:active {box-shadow: 1px 1px 0 rgba(0, 0, 0, 1);transform: translate(3px, 3px);}



#Second .btn-pink {
  --bs-btn-color: #000;
  --bs-btn-bg: #f5bed6;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #bf94a6;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #bf94a6;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f5bed6;
  --bs-btn-disabled-border-color: #000;
  font-weight: bolder;
  letter-spacing: 1.5px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 1);
  transition: box-shadow 0.15s, transform 0.15s;
}

.btn-pink:hover {box-shadow: 5px 5px 0 rgba(0, 0, 0, 1);}
.btn-pink:active {box-shadow: 1px 1px 0 rgba(0, 0, 0, 1);transform: translate(3px, 3px);}



.btn-white {
  --bs-btn-color: #000;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: #000;
  font-weight: bolder;
  letter-spacing: 1.5px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 1);
  transition: box-shadow 0.15s, transform 0.15s;
}

.btn-white:hover {box-shadow: 5px 5px 0 rgba(0, 0, 0, 1);}
.btn-white:active {box-shadow: 1px 1px 0 rgba(0, 0, 0, 1);transform: translate(3px, 3px);}

.bank-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.bank-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bank-logo-missing {
  width: 100%;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #c0392b;
  white-space: pre-line;
  text-align: center;
}

.bank-location {
  font-size: 0.85rem;
  font-weight: normal;
  color: #000;
  margin-left: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bank-location::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZ2VvLWFsdC1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDE2czYtNS42ODYgNi0xMEE2IDYgMCAwIDAgMiA2YzAgNC4zMTQgNiAxMCA2IDEwbTAtN2EzIDMgMCAxIDEgMC02IDMgMyAwIDAgMSAwIDYiLz4KPC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZ2VvLWFsdC1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDE2czYtNS42ODYgNi0xMEE2IDYgMCAwIDAgMiA2YzAgNC4zMTQgNiAxMCA2IDEwbTAtN2EzIDMgMCAxIDEgMC02IDMgMyAwIDAgMSAwIDYiLz4KPC9zdmc+");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.bank-section + .bank-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed #ccc;
}

.bank-section-title {
  font-weight: bolder;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.bank-section-note {
  font-size: 0.8rem;
  color: #000;
  margin-bottom: 0.5rem;
}

.bank-amount {
  color: #e05a5a;
  font-weight: bolder;
  font-size: 1.15em;
}

.bank-box {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}

.bank-box--yellow {
  background: #f5e67e;
}

.bank-box--pink {
  background: #f5bed6;
}

.bank-box-title {
  font-weight: bolder;
  margin-bottom: 0.25rem;
}

.bank-box-line {
  margin-bottom: 0;
}

.bank-box-line + .bank-box-line {
  margin-top: 0.25rem;
}


/*--------------Modal--------------*/
.modal-content {
  --bs-modal-border-width: 3px;
  --bs-modal-border-color: #000;
  --bs-modal-border-radius: 1.75rem;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 1);
  overflow: hidden;
  /* 修正 iOS Safari 已知 bug：border-radius + overflow:hidden 的容器，
     內部捲動內容在慣性捲動(momentum scroll)時可能沒被正確裁切，
     導致文字貼出圓角邊界（例如貼到下方 modal-footer 按鈕上）。
     強制觸發獨立圖層合成可解決。*/
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.modal-header {
  --bs-modal-header-padding: 18px 24px;
  --bs-modal-header-border-width: 3px;
  --bs-modal-header-border-color: #000;
  background: #f5e67e;
}

.modal-title {font-weight: 900;letter-spacing: 1px;}

.btn-close {
  --bs-btn-close-bg: none;
  --bs-btn-close-opacity: 1;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 1);
  position: relative;
  transition: box-shadow 0.15s, transform 0.15s;
}

.btn-close::before {
  content: '×';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 1.3rem;
  font-weight: bold;
  color: #000;
  line-height: 1;
}

.btn-close:hover {box-shadow: 4px 4px 0 rgba(0, 0, 0, 1);}

.btn-close:active {box-shadow: 1px 1px 0 rgba(0, 0, 0, 1);transform: translate(2px, 2px);}

.modal-body {--bs-modal-padding: 26px 28px;font-size: 0.98rem;line-height: 1.9;}

/* 桌面滑鼠環境：讓 Modal 內容的捲軸常駐顯示，不用等使用者滑動才出現，
   提示使用者「這裡還有更多內容」。手機/觸控裝置（尤其 iOS Safari）的捲軸
   是系統層級控制的懸浮捲軸，規範上就是只有觸碰當下才會出現，CSS 強制不了，
   所以手機這邊改用下方的漸層＋箭頭提示來達成類似效果 */
.modal-dialog-scrollable .modal-body {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #000 #f0f0f0; /* Firefox：滑桿顏色 / 軌道顏色 */
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  width: 8px; /* Chrome / Safari（桌面版才有效，iOS 不受影響） */
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 999px;
}

/* 「還能往下滑」提示：疊在 modal-body 底部的淡出漸層 + 箭頭。
   用負 margin 讓它疊在 modal-body 捲動區塊的最下緣，但本身是 modal-body
   的「兄弟元素」，不在捲動範圍內，所以不會跟著內容一起被捲走。
   顯示/隱藏邏輯見 main.js 的 shown.bs.modal 事件 */
.modal-scroll-hint {
  position: relative;
  margin-top: -48px;
  height: 48px;
  flex-shrink: 0; /* 修正：這是 .modal-content(flex) 的子元素，內容較長、modal 逼近
                      視窗高度時 flexbox 會把它壓扁，造成負 margin 對不齊、
                      把下方 modal-footer 的按鈕往上拉、疊到還沒捲完的文字上 */
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 85%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  opacity: 1;
  transition: opacity 0.25s ease;
  z-index: 2;
}

.modal-scroll-hint.is-hidden {
  opacity: 0;
}

.modal-scroll-hint svg {
  width: 20px;
  height: 20px;
  animation: modal-scroll-hint-bounce 1.4s ease-in-out infinite;
}

@keyframes modal-scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.modal-body ul {margin: 0;padding-left: 1.3em;}

.modal-body li {margin-bottom: 10px;}

.modal-body li::marker {color: #f5a623;}

.modal-footer {--bs-modal-footer-border-width: 0;padding: 14px 28px 26px;justify-content: center;background: #fff;position: relative;z-index: 3;}

.nav-btn {
  width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 卡片顏色 */
.bg-yellow {--bs-bg-opacity: 1;background-color: #f5e67e!important;}
.bg-pink {--bs-bg-opacity: 1;background-color: #f7cee0!important;}
.bg-inf1 {--bs-bg-opacity: 1;background-color: #ededed!important;}
.bg-inf2 {--bs-bg-opacity: 1;background-color: #fce0d9!important;}

/*--------------背景裝飾 + 疊加物件--------------*/
.deco-wrap {position: relative;}
.deco-blob {
  position: absolute;
  z-index: 1;
  width: 450px;
  height: 450px;
  pointer-events: none;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-attachment: scroll;
  opacity: 0;
  transform: translate(var(--deco-tx, 0), var(--deco-ty, 0));
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.deco-blob.is-visible {opacity: 1;transform: translate(0, var(--deco-ty, 0));}
.deco-blob--left  {left: -320px;  --deco-tx: -60px;}
.deco-blob--right {right: -320px; --deco-tx: 60px;}

#deco-1 {background-image: url('../images/bg1.webp');}
#deco-2 {background-image: url('../images/bg2.webp');}
#deco-3 {background-image: url('../images/bg3.webp');}
#deco-4 {background-image: url('../images/bg4.webp');}
#deco-5 {background-image: url('../images/bg5.webp');}

/* 內容蓋在裝飾圖之上 */
.deco-wrap > *:not(.deco-blob) {position: relative; z-index: 2;}

/* data-animate 區塊：動畫觸發前先隱藏，避免一開始就整個顯示、滑到才閃一下淡入 */
#First [data-animate], #Second [data-animate] {opacity: 0;}
#First [data-animate].animate__animated, #Second [data-animate].animate__animated {opacity: 1;}

/* 裝飾圖大致落在區塊上/中/下即可 */
.deco-blob--top    {top: 0;    --deco-ty: 10%;}
.deco-blob--mid    {top: 70%;  --deco-ty: -20%;}
.deco-blob--bottom {bottom: 0; --deco-ty: 10%;}
#deco-1,#deco-2,#deco-3,#deco-4,#deco-5 {width: 400px; height: 400px;}   

/* 小於等於1024px(手機、平板直向如iPad)隱藏裝飾圖 */
@media (max-width: 1024px) {.deco-blob {display: none;}}

/* 小筆電位置微調 */
@media (min-width: 1025px) and (max-width: 1440px) {
  .deco-blob--left  {left: -120px;}
  .deco-blob--right {right: -120px;}
}

/* 裝飾圖(.deco-blob)貼邊位置維持設計原值不變(-300px)；
   #First / #Second 本身裁掉超出畫面外的部分即可，不需要縮小偏移量 */
#First, #Second {overflow-x: hidden;}

/* 13吋筆電(常見邏輯寬度約1440px)仍要維持 col-lg-8 的窄版效果，
   Bootstrap 內建的 xxl(1400px) 斷點太低會誤判成大螢幕，所以自訂 1500px 當作「比13吋大」的門檻 */
@media (min-width: 1500px) {
  .wide-desktop-full {
    flex: 0 0 auto;
    width: 100% !important;
  }
}
/*--------------2.Hero 區塊--------------*/

.hero-ratio {--bs-aspect-ratio: 43%;}
.hero-bg {background-color: #f5e67e;background-image: url('../images/bg.jpg');background-size: cover;background-position: center top;background-repeat: no-repeat;overflow: hidden;}
.hero-img {position: absolute;width: auto;height: auto;max-width: none;pointer-events: none;opacity: 0;}
.hero-img:not([data-hero-animate]) {transition: opacity 0.3s ease;}
.hero-bg.is-loaded .hero-img:not([data-hero-animate]) {opacity: 1;}
.placeholder {background: rgba(255, 0, 0, 0.15);border: 1px dashed red;}

/* Hero 圖片座標（電腦版） */
.hero-dino          { left: -1.95%; top: 38%;   width: 20.25%; }
.hero-shootingstar  { left: 15%;    top: 11.9%; width: 13.5%; }
.hero-center-top    { left: 34%;    top: 0.5%;  width: 29.5%; z-index: 10; }
.hero-center-bottom { left: 28%;    top: 46%;   width: 42%;   z-index: 20; }

.hero-sogo   { left: 72%;   top: 37%;   width: 21.75%; }
.hero-pizza  { left: 91%;   top: 70%; width: 7.25%; }
.hero-mascot { left: 82.5%; top: 2%;    width: 18.75%; }

.hero-star-1 { left: 70%; top: 80%; width: 2.4%; }
.hero-star-2 { left: 25%; top: 88%; width: 2.4%; }
.hero-star-3 { left: 75%; top: 5%;  width: 2%; }
.hero-star-4 { left: 72%; top: 71%; width: 1.8%; }
.hero-star-5 { display: none; } /* 目前只在手機版使用 */

.hero-star-d1 { left: 37.72%; top: 7.89%;  width: 1.3%; z-index: 15; }
.hero-star-d2 { left: 38.37%; top: 13.16%; width: 1.6%; z-index: 15; }
.hero-star-d3 { left: 56.36%; top: 13.56%; width: 1.8%; z-index: 15; }
.hero-star-d4 { left: 57%;    top: 20%;    width: 1%;   z-index: 15; }


/*--------------body--------------*/
#First.bg-ready {
  background-image: url('../images/bgbody.webp');
  background-size: 120px 120px; 
  background-position: top left;
  background-repeat: repeat;
}

#Second.bg-ready {
  background-image: url('../images/bgbody2.webp');
  background-size: 120px 120px; 
  background-position: top left;
  background-repeat: repeat;
}

#First, #Second {background-attachment: scroll;}

.footer-flowers {
  width: 100%;
  height: 136px;               
  background-image: url('../images/footer.webp');
  background-repeat: repeat-x; 
  background-position: bottom left;
  background-size: auto 100%;  
}

.footer-copyright {
  background-color: #d6e5cd;
  padding: 18px 16px;
  text-align: center;
  border-top: 0.25rem solid #000;
}

.footer-copyright p {font-size: 0.9rem;letter-spacing: 0.5px;color: #333;}

/* 輪播 */
.slick-slider .slick-list {margin: -6px -12px;}
.slick-slider .slick-slide {padding: 6px 12px;box-sizing: border-box;}


/*--------------4. RWD 響應式：平板 (768px ~ 1199.98px)--------------*/

@media (min-width: 768px) and (max-width: 1199.98px) {
  .nav-custom {padding-top: 8px;padding-bottom: 8px;min-height: 90px;}

  .logo-custom { height: 60px;}

  .hero-ratio {--bs-aspect-ratio: 69.122%;}

  .hero-bg {background-image: url('../images/bgm.webp');}

  .hero-dino          { left: -6.75%; top: 35.5%; width: 32.25%; }
  .hero-shootingstar  { left: 13%;    top: 13.9%; width: 17.5%; }
  .hero-center-top    { left: 27%;    top: 1.5%;  width: 46%;   z-index: 10; }
  .hero-center-bottom { left: 22.5%;  top: 53%;   width: 56%;   z-index: 20; }
  .hero-mascot        { left: 73%;    top: 17%;   width: 30.15%; }

  .hero-pizza,.hero-sogo,.hero-star-4 {display: none;}

  .hero-star-1 { left: 22%; top: 49%; width: 2.5%; }
  .hero-star-2 { left: 23%; top: 42%; width: 3.5%; }
  .hero-star-3 { left: 84%; top: 58%; width: 4%; }

  .hero-star-d1 { left: 33.36%; top: 9.18%; width: 2.4%; }
  .hero-star-d2 { left: 35%;    top: 14%;   width: 2.6%; }
  .hero-star-d3 { left: 63%;    top: 15%;   width: 3.5%; }
  .hero-star-d4 { left: 65%;    top: 22%;   width: 2%; }

  #First {background-size: 23% auto;}
  #Second {background-size: 23% auto;}
  .footer-flowers {background-size: 93% auto;}
}

/* 漢堡選單斷點：導覽按鈕改滿版垂直排列 */
@media (max-width: 991.98px) {.nav-btn {width: 100%;margin-left: 0 !important;margin-right: 0 !important;}}

/*--------------5. RWD 響應式：手機 (< 768px)--------------*/

@media (max-width: 767.98px) {
  .nav-custom {padding-top: 6px;padding-bottom: 6px;min-height: 64px;}

  .logo-custom {height: 50px;}

  .hero-ratio {--bs-aspect-ratio: 100%;}

  .hero-bg {background-image: url('../images/bgs.webp');}

  .hero-dino          { left: -14%; top: 34%; width: 40%; z-index: 11; }
  .hero-shootingstar  { left: 1%;   top: 5%;  width: 26%; }
  .hero-center-top    { left: 19%;  top: 5%;  width: 65%; z-index: 10; }
  .hero-center-bottom { left: 13%;  top: 53%; width: 77%; z-index: 20; }
  .hero-mascot        { left: 70%;  top: 18%; width: 40%; }

  /* SOGO、披薩手機版不顯示 */
  .hero-pizza,.hero-sogo {display: none;}

  .hero-star-1 { left: 6%;  top: 84%; width: 3.6%; }
  .hero-star-2 { left: 9%;  top: 89%; width: 5%; }
  .hero-star-3 { left: 93%; top: 72%; width: 5%; }
  .hero-star-4 { left: 90%; top: 79%; width: 3.7%; }
  .hero-star-5 { display: block; left: 83%; top: 7%; width: 4.5%; }

  .hero-star-d1 { left: 18%; top: 23%; width: 3.2%; }
  .hero-star-d2 { left: 19%; top: 27%;  width: 5.2%; }
  .hero-star-d3 { left: 68%; top: 15.91%; width: 6%; }
  .hero-star-d4 { left: 73%; top: 24%;    width: 3%; }

  #First {background-size: 22% auto;}
  #Second {background-size: 22% auto;}
  .footer-flowers {background-size: 120% auto;}
}  

/* Swiper */
.swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  border: 0.25rem solid #000;
  border-radius: 50%;
  background: #fff;
  opacity: 1;
  margin: 0 6px !important;
  transition: background 0.2s;
}

.swiper-pagination-bullet-active {
  background: #f8bf66;
}

.swiper-pagination-bullet:hover {
  background: #f8bf66;
}
/* 讓 swiper 底部保留空間,dots 顯示在卡片下方,不疊在卡片上 */
.swiper {
  padding-bottom: 50px;  
}

.swiper-pagination {
  bottom: 0 !important;
}

/* 讓卡片的立體陰影(box-shadow)有空間顯示，不被 Swiper 的 overflow:hidden 硬裁掉 */
.swiper-slide {
  padding: 0 6px 6px 0;
  box-sizing: border-box;
}

/* ===== 頁面載入遮罩 Page Loader ===== */
body.is-loading {
  overflow: hidden;
}

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9ed8f5;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#page-loader svg {
  display: block;
  width: 180px;
  height: 180px;
}

#page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


.text-red{color:#e05a5a;}
.text-green{color:#9aca65;}
.text-weight{font-weight: bolder;}


.rounded-photo {
border-radius: 1.5rem;
border: 0.5rem solid #fff;
width: 100%;
display: block;
}

.limited-badge {
display: inline-block;
background: #f5e67e;
border: 2px solid #000;
border-radius: 999px;
padding: 4px 16px;
font-weight: bolder;
}

/* 來店禮：贈品已兌換完畢狀態
   照片降彩度+淡化，角落貼一張灰色貼紙角標，
   原本黃色限量膠囊改灰色並置換文字，
   下方加一行小字提醒頁面非即時更新，實際狀況以現場公告為準 */
.card-soldout .rounded-photo {
  filter: grayscale(0.6);
  opacity: 0.55;
}

.card-soldout .photo-wrap::after {
  content: "兌換完畢";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  z-index: 2;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-weight: bolder;
  font-size: clamp(1.1rem, 5vw, 1.75rem);
  letter-spacing: 0.15em;
  white-space: nowrap;
  padding: 0.35em 1em;
  border: 3px solid #fff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.limited-badge.is-soldout {
  background: #d9d9d9;
  color: #555;
}

.card {
  position: relative;
}

.photo-wrap {
  position: relative;
}

.info-icon-btn {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 3;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: bold;
  font-size: 0.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.info-icon-btn:hover {
  background: #333;
}

/* 活動卡片圖片右上角「詳情」按鈕：比照站內按鈕的貼紙感（黑色描邊＋實色偏移陰影）。
   往外偏移讓按鈕大部分落在卡片背景上，避免壓到圖片本身的文字內容 */
.photo-detail-btn {
  position: absolute;
  top: -0.7rem;
  right: -0.5rem;
  z-index: 4;
  background: #9fd9f6;
  border: 0.15rem solid #000;
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-weight: bolder;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: #000;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 1);
  transition: box-shadow 0.15s, transform 0.15s;
}

.photo-detail-btn:hover {
  background: #7fcaf0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 1);
}

.photo-detail-btn:active {
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 1);
  transform: translate(2px, 2px);
}

/* 活動卡片「詳情」按鈕：做成從卡片右下角延伸出來的色塊角標，
   外側圓角與粗細比照卡片本身（.card 的 2rem 圓角、0.25rem 黑色描邊），
   左上角用 radial-gradient 做出內凹弧線，視覺上像從卡片邊框「長出來」 */
.detail-tab {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  z-index: 5;
  min-width: 4.75rem;
  height: 3rem;
  padding: 0 1rem 0.3rem 1.4rem;
  background: #9fd9f6;
  border: 0.25rem solid #000;
  border-left: none;
  border-top: none;
  border-top-left-radius: 0;
  border-bottom-right-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: #000;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.detail-tab:hover {
  background: #7fcaf0;
  transform: translate(2px, 2px);
}

.detail-tab::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: -1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background:
    radial-gradient(circle at top left, transparent 0 1.05rem, #000 1.05rem 1.3rem, transparent 1.3rem 100%),
    radial-gradient(circle at top left, transparent 0 1.3rem, #9fd9f6 1.3rem 100%);
}

.detail-tab:hover::before {
  background:
    radial-gradient(circle at top left, transparent 0 1.05rem, #000 1.05rem 1.3rem, transparent 1.3rem 100%),
    radial-gradient(circle at top left, transparent 0 1.3rem, #7fcaf0 1.3rem 100%);
}

/* 卡片內容若有「詳情」角標，底部保留空間避免文字被蓋住 */
.card-has-tab .card-body {
  padding-bottom: 3.5rem;
}

/* 活動卡片底部條：卡片內容下方接一條滿版淺藍色區塊，跟卡片本身共用外框圓角與黑色描邊，
   用一條分隔線隔開上方內容。內部改成左右排列：左邊放日期/狀態文字，右邊放實際可點的「詳情」按鈕 */
.card-footer-bar {
  width: 100%;
  background: #9fd9f6;
  border: none;
  border-top: 0.25rem solid #000;
  border-bottom-left-radius: 1.75rem;
  border-bottom-right-radius: 1.75rem;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.card-footer-label {
  font-weight: bolder;
  font-size: 1.05rem;
  letter-spacing: 1px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 底部條右側的「詳情」小按鈕：跟其他站內按鈕一樣的貼紙感黑邊＋偏移陰影，
   用白底跟藍色底的按鈕做出區隔，在藍色底部條上更清楚跳出來 */
.footer-mini-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 0.15rem solid #000;
  border-radius: 999px;
  padding: 0.3rem 0.7rem 0.3rem 1rem;
  font-weight: bolder;
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: #000;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 1);
  transition: box-shadow 0.15s, transform 0.15s;
}

.footer-mini-btn .icon-inline {
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.1rem;
}

/* 取代 bootstrap-icons 字型的 inline SVG icon：
   預設用 1em 跟隨所在文字的 font-size 縮放，顏色跟隨 currentColor */
.icon-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  flex-shrink: 0;
}

.footer-mini-btn:hover {
  background: #f5f5f5;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 1);
}

.footer-mini-btn:active {
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 1);
  transform: translate(1px, 1px);
}

.credit-notice-badge {
  border: 1px solid #000;
  padding: 5px 14px;
  font-weight: bolder;
  white-space: nowrap;
}

/* d-flex 容器裡的 <br> 預設不會斷行（會被當成空的 flex 項目忽略），
   這裡強制讓 <br> 佔滿整行寬度，逼後面的內容換到下一行 */
/* 用一個空的 span 強制斷行（比 <br> 更可靠：<br> 在 flex 容器裡常被瀏覽器忽略 flex-basis 設定） */
.credit-notice-break {
  flex-basis: 100%;
  height: 0;
}

/* 化妝品加碼 / 化妝品品牌日 切換卡片樣式 */
      .cosmetic-toggle-slides { display: grid; touch-action: pan-y; }
      .cosmetic-toggle-slide {
        grid-area: 1 / 1;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease;
        pointer-events: none;
      }
      .cosmetic-toggle-slide.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .cosmetic-toggle-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 0 0 16px;
      }
      .cosmetic-toggle-dot {
        width: 12px;
        height: 12px;
        padding: 0;
        border: 2px solid #000;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        transition: background 0.2s;
      }
      .cosmetic-toggle-dot.is-active {
        background: #f8bf66;
      }
/* 輪播卡片等高：*/
.swiper-wrapper {
  align-items: stretch;
}

.mySwiper1 .swiper-slide,
.mySwiper2 .swiper-slide {
  height: auto;
}

.swiper-slide .card {
  height: 100%;
}

/* 來店禮卡片（mySwiper1）：標題行數不一致時，讓限量標籤永遠貼齊卡片底部 */
.mySwiper1 .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mySwiper1 .card-body > center:last-child {
  margin-top: auto;
}