@charset "UTF-8";
/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
/*
    自定義在最下面
*/
/* Font Weight */
/* Width */
/* Height */
/* Display */
/* Margin */
/* Padding */
/* Cursor */
/* Background Color */
/* Color */
/* Text Limit */
/* 毛玻璃 */
/******************  自定義  ******************/
/* Color */
/* Background Color */
/* Font Size */
/* Button */
:root {
  /* Primary Color — 紫 purple（對齊 Figma pc）*/
  --pc-950: #09131A;
  --pc-900: #19222B;
  --pc-800: #2D353E;
  --pc-700: #424A53;
  --pc-600: #596068;
  --pc-500: #70767E;
  --pc-400: #888E95;
  --pc-300: #A1A6AC;
  --pc-200: #BABFC4;
  --pc-100: #D4D8DD;
  --pc-50: #EFF2F6;
  /* Secondary Color — 靛藍 indigo（對齊 Figma sc）*/
  --sc-950: #0B0910;
  --sc-900: #1E192B;
  --sc-800: #322D3E;
  --sc-700: #474253;
  --sc-600: #5D5868;
  --sc-500: #746F7E;
  --sc-400: #8C8795;
  --sc-300: #A4A0AC;
  --sc-200: #BDBAC4;
  --sc-100: #D7D4DD;
  --sc-50: #F1EFF6;
  /* Accent Color — 琥珀黃 amber（對齊 Figma ac，新增）*/
  --ac-950: #100D0A;
  --ac-900: #29221C;
  --ac-800: #43372C;
  --ac-700: #604D3D;
  --ac-600: #7D654F;
  --ac-500: #9C7D61;
  --ac-400: #AE937C;
  --ac-300: #C0AA97;
  --ac-200: #D2C2B4;
  --ac-100: #E4DAD1;
  --ac-50: #F5F2EF;
  /* 透明色 */
  --ac-light-transparent: #d8c3a51f;
  --ac-light-transparent-strong: #d8c3a580;
  --mask-dark: #00000080;
  /* Red Color */
  --rc-950: #4B0407;
  --rc-900: #881418;
  --rc-800: #A50F15;
  --rc-700: #C80D14;
  --rc-600: #ED151D;
  --rc-500: #FF444B;
  --rc-400: #FF646A;
  --rc-300: #FF9DA1;
  --rc-200: #FFC5C7;
  --rc-100: #FFDFE0;
  --rc-50: #FFF1F2;
  /* Yellow Color */
  --yc-950: #461B02;
  --yc-900: #7A350D;
  --yc-800: #94400C;
  --yc-700: #B75506;
  --yc-600: #DD7902;
  --yc-500: #F9A107;
  --yc-400: #FFC321;
  --yc-300: #FFD74A;
  --yc-200: #FFE888;
  --yc-100: #FFF5C6;
  --yc-50: #FFFBEB;
  /* Success Color */
  --suc-950: #0F2A09;
  --suc-900: #254D1A;
  --suc-800: #285B19;
  --suc-700: #2E7219;
  --suc-600: #3A951B;
  --suc-500: #51C128;
  --suc-400: #6ED645;
  --suc-300: #93E571;
  --suc-200: #BCF1A5;
  --suc-100: #DDF7D0;
  --suc-50: #F0FCE9;
  /* Neutral Color */
  --nc-950: #0A0A0A;
  --nc-900: #171717;
  --nc-800: #262626;
  --nc-700: #404040;
  --nc-600: #525252;
  --nc-500: #737373;
  --nc-400: #A1A1A1;
  --nc-300: #D4D4D4;
  --nc-200: #E5E5E5;
  --nc-100: #F5F5F5;
  --nc-50: #FFFFFF;
  /* Font-Size */
  --text-9xl: 128px;
  --text-9xl--line-height: 1;
  --text-8xl: 96px;
  --text-8xl--line-height: 1;
  --text-7xl: 72px;
  --text-7xl--line-height: 1;
  --text-6xl: 60px;
  --text-6xl--line-height: 1;
  --text-5xl: 48px;
  --text-5xl--line-height: 1;
  --text-4xl: 36px;
  --text-4xl--line-height: 2.5rem;
  --text-3xl: 30px;
  --text-3xl--line-height: 2.25rem;
  --text-2xl: 24px;
  --text-2xl--line-height: 2rem;
  --text-xl: 20px;
  --text-xl--line-height: 1.75rem;
  --text-lg: 18px;
  --text-lg--line-height: 1.75rem;
  --text-base: 16px;
  --text-base--line-height: 1.5rem;
  --text-sm: 14px;
  --text-sm--line-height: 1.25rem;
  --text-xs: 12px;
  --text-xs--line-height: 1rem;
  /* Radius */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-80: 80px;
  --radius-100: 100px;
  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --spacing-240: 240px;
}

/* 骨架與全域 */
/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
/* 版型尺寸。原本住在 frame.scss，但那支會編出 CSS，
   別的頁面 @use 它就會把整份版型再輸出一遍，所以把純變數抽到這裡。
   要用的人 @use './_frame-vars.scss' as *; 就好。 */
/* fixed header 的高度。頁面內容的 margin-top 與 sticky 的 top 都吃它——
   兩邊各寫一個數字的話，改高度時會有一邊忘記改，而且畫面上只是「稍微被蓋住」 */
/* ============================================================
 * 版型骨架
 * 頁面區段一律用：.blocks-wrap > .blocks-wrap__container > 內容
 * ==========================================================*/
.main {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  flex-grow: 1;
  margin-top: 65px; /* 留給 fixed header 的高度 */
  /* 內頁區塊 */
}
.main .blocks-wrap {
  display: flex;
  justify-content: center;
  padding: var(--spacing-120) var(--spacing-16); /* 上下 120 ← Figma section padding */
}
.main .blocks-wrap.--left {
  justify-content: flex-start;
}
.main .blocks-wrap__container {
  width: 1920px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
  align-items: center;
}
@media (max-width: 1920px) {
  .main .blocks-wrap {
    width: 100%;
    padding: var(--spacing-64) var(--spacing-16);
  }
  .main .blocks-wrap__container {
    width: 100%;
  }
}
@media (max-width: 1920px) {
  .main {
    width: 1200px;
  }
}
@media (max-width: 992px) {
  .main {
    width: 100%;
  }
  .main .blocks-wrap {
    padding: var(--spacing-32) var(--spacing-16);
  }
}
@media (max-width: 768px) {
  .main .blocks-wrap__container {
    gap: var(--spacing-32);
  }
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
/*隱藏ScrollBar*/
::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

html, body {
  background: var(--pc-950) !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  -webkit-text-size-adjust: none;
  touch-action: manipulation;
  touch-action: pan-x pan-y;
  scroll-behavior: smooth;
  padding-bottom: env(safe-area-inset-bottom);
  font-family: "Work Sans", sans-serif;
  background-color: white;
}

img {
  -webkit-user-drag: none;
} /*照片無法拖動*/
a {
  color: inherit;
  text-decoration: none !important;
}

label {
  margin-bottom: 0 !important;
}

hr {
  opacity: 100% !important;
  border: 0.5px solid var(--nc-500);
  margin: 0;
}

/* Width */
.block-1200 {
  width: 1200px;
}

.w-50 {
  width: 50% !important;
}

.w-100 {
  width: 100% !important;
}

/* Height */
.h-50 {
  height: 50% !important;
}

.h-100 {
  height: 100% !important;
}

.multiselect-placeholder {
  font-size: 100px;
}

/* Font Weight */
.font-weight-bolder {
  font-weight: bolder;
}

.font-weight-medium {
  font-weight: medium;
}

.font-weight-normal {
  font-weight: normal;
}

.font-weight-lighter {
  font-weight: lighter;
}

/* Display */
.dis-flex {
  display: flex;
}

.dis-block {
  display: block;
}

/* 這支是 JS 切換顯示的唯一機制，必須壓過元件自己的 display。
   同權重時後編出來的贏，而頁面級 css 永遠排在 site.css 後面，只靠順序修不掉 */
.dis-none {
  display: none !important;
}

.dis-col {
  display: flex;
  flex-direction: column;
}

.dis-justify-center {
  display: flex;
  justify-content: center;
}

.dis-justify-between {
  display: flex;
  justify-content: space-between;
}

.dis-justify-start {
  display: flex;
  justify-content: start;
}

.dis-justify-end {
  display: flex;
  justify-content: end;
}

.dis-justify-left {
  display: flex;
  justify-content: left;
}

.dis-justify-right {
  display: flex;
  justify-content: right;
}

.dis-justify-around {
  display: flex;
  justify-content: space-around;
}

.dis-justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

.dis-v-center {
  display: flex;
  align-items: center;
}

.dis-h-center {
  display: flex;
  justify-content: center;
}

.dis-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.align-items-center {
  align-items: center !important;
}

.dis-col-gap-4 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dis-gap-4 {
  display: flex;
  gap: 4px;
}

.dis-col-gap-8 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dis-gap-8 {
  display: flex;
  gap: 8px;
}

.dis-col-gap-12 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dis-gap-12 {
  display: flex;
  gap: 12px;
}

.dis-col-gap-16 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dis-gap-16 {
  display: flex;
  gap: 16px;
}

.dis-col-gap-20 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dis-gap-20 {
  display: flex;
  gap: 20px;
}

.dis-col-gap-24 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dis-gap-24 {
  display: flex;
  gap: 24px;
}

.dis-col-gap-28 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.dis-gap-28 {
  display: flex;
  gap: 28px;
}

.dis-col-gap-32 {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dis-gap-32 {
  display: flex;
  gap: 32px;
}

.dis-col-gap-36 {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.dis-gap-36 {
  display: flex;
  gap: 36px;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Margin/Padding */
.mg-0 {
  margin: 0px !important;
}

.mg-t-0 {
  margin-top: 0px !important;
}

.mg-b-0 {
  margin-bottom: 0px !important;
}

.mg-l-0 {
  margin-left: 0px !important;
}

.mg-r-0 {
  margin-right: 0px !important;
}

.mg-x-0 {
  margin: 0 0px !important;
}

.mg-y-0 {
  margin: 0px 0 !important;
}

.pd-0 {
  padding: 0px !important;
}

.pd-t-0 {
  padding-top: 0px !important;
}

.pd-b-0 {
  padding-bottom: 0px !important;
}

.pd-l-0 {
  padding-left: 0px !important;
}

.pd-r-0 {
  padding-right: 0px !important;
}

.pd-x-0 {
  padding: 0 0px !important;
}

.pd-y-0 {
  padding: 0px 0 !important;
}

.mg-4 {
  margin: 4px !important;
}

.mg-t-4 {
  margin-top: 4px !important;
}

.mg-b-4 {
  margin-bottom: 4px !important;
}

.mg-l-4 {
  margin-left: 4px !important;
}

.mg-r-4 {
  margin-right: 4px !important;
}

.mg-x-4 {
  margin: 0 4px !important;
}

.mg-y-4 {
  margin: 4px 0 !important;
}

.pd-4 {
  padding: 4px !important;
}

.pd-t-4 {
  padding-top: 4px !important;
}

.pd-b-4 {
  padding-bottom: 4px !important;
}

.pd-l-4 {
  padding-left: 4px !important;
}

.pd-r-4 {
  padding-right: 4px !important;
}

.pd-x-4 {
  padding: 0 4px !important;
}

.pd-y-4 {
  padding: 4px 0 !important;
}

.mg-8 {
  margin: 8px !important;
}

.mg-t-8 {
  margin-top: 8px !important;
}

.mg-b-8 {
  margin-bottom: 8px !important;
}

.mg-l-8 {
  margin-left: 8px !important;
}

.mg-r-8 {
  margin-right: 8px !important;
}

.mg-x-8 {
  margin: 0 8px !important;
}

.mg-y-8 {
  margin: 8px 0 !important;
}

.pd-8 {
  padding: 8px !important;
}

.pd-t-8 {
  padding-top: 8px !important;
}

.pd-b-8 {
  padding-bottom: 8px !important;
}

.pd-l-8 {
  padding-left: 8px !important;
}

.pd-r-8 {
  padding-right: 8px !important;
}

.pd-x-8 {
  padding: 0 8px !important;
}

.pd-y-8 {
  padding: 8px 0 !important;
}

.mg-12 {
  margin: 12px !important;
}

.mg-t-12 {
  margin-top: 12px !important;
}

.mg-b-12 {
  margin-bottom: 12px !important;
}

.mg-l-12 {
  margin-left: 12px !important;
}

.mg-r-12 {
  margin-right: 12px !important;
}

.mg-x-12 {
  margin: 0 12px !important;
}

.mg-y-12 {
  margin: 12px 0 !important;
}

.pd-12 {
  padding: 12px !important;
}

.pd-t-12 {
  padding-top: 12px !important;
}

.pd-b-12 {
  padding-bottom: 12px !important;
}

.pd-l-12 {
  padding-left: 12px !important;
}

.pd-r-12 {
  padding-right: 12px !important;
}

.pd-x-12 {
  padding: 0 12px !important;
}

.pd-y-12 {
  padding: 12px 0 !important;
}

.mg-16 {
  margin: 16px !important;
}

.mg-t-16 {
  margin-top: 16px !important;
}

.mg-b-16 {
  margin-bottom: 16px !important;
}

.mg-l-16 {
  margin-left: 16px !important;
}

.mg-r-16 {
  margin-right: 16px !important;
}

.mg-x-16 {
  margin: 0 16px !important;
}

.mg-y-16 {
  margin: 16px 0 !important;
}

.pd-16 {
  padding: 16px !important;
}

.pd-t-16 {
  padding-top: 16px !important;
}

.pd-b-16 {
  padding-bottom: 16px !important;
}

.pd-l-16 {
  padding-left: 16px !important;
}

.pd-r-16 {
  padding-right: 16px !important;
}

.pd-x-16 {
  padding: 0 16px !important;
}

.pd-y-16 {
  padding: 16px 0 !important;
}

.mg-20 {
  margin: 20px !important;
}

.mg-t-20 {
  margin-top: 20px !important;
}

.mg-b-20 {
  margin-bottom: 20px !important;
}

.mg-l-20 {
  margin-left: 20px !important;
}

.mg-r-20 {
  margin-right: 20px !important;
}

.mg-x-20 {
  margin: 0 20px !important;
}

.mg-y-20 {
  margin: 20px 0 !important;
}

.pd-20 {
  padding: 20px !important;
}

.pd-t-20 {
  padding-top: 20px !important;
}

.pd-b-20 {
  padding-bottom: 20px !important;
}

.pd-l-20 {
  padding-left: 20px !important;
}

.pd-r-20 {
  padding-right: 20px !important;
}

.pd-x-20 {
  padding: 0 20px !important;
}

.pd-y-20 {
  padding: 20px 0 !important;
}

.mg-24 {
  margin: 24px !important;
}

.mg-t-24 {
  margin-top: 24px !important;
}

.mg-b-24 {
  margin-bottom: 24px !important;
}

.mg-l-24 {
  margin-left: 24px !important;
}

.mg-r-24 {
  margin-right: 24px !important;
}

.mg-x-24 {
  margin: 0 24px !important;
}

.mg-y-24 {
  margin: 24px 0 !important;
}

.pd-24 {
  padding: 24px !important;
}

.pd-t-24 {
  padding-top: 24px !important;
}

.pd-b-24 {
  padding-bottom: 24px !important;
}

.pd-l-24 {
  padding-left: 24px !important;
}

.pd-r-24 {
  padding-right: 24px !important;
}

.pd-x-24 {
  padding: 0 24px !important;
}

.pd-y-24 {
  padding: 24px 0 !important;
}

.mg-28 {
  margin: 28px !important;
}

.mg-t-28 {
  margin-top: 28px !important;
}

.mg-b-28 {
  margin-bottom: 28px !important;
}

.mg-l-28 {
  margin-left: 28px !important;
}

.mg-r-28 {
  margin-right: 28px !important;
}

.mg-x-28 {
  margin: 0 28px !important;
}

.mg-y-28 {
  margin: 28px 0 !important;
}

.pd-28 {
  padding: 28px !important;
}

.pd-t-28 {
  padding-top: 28px !important;
}

.pd-b-28 {
  padding-bottom: 28px !important;
}

.pd-l-28 {
  padding-left: 28px !important;
}

.pd-r-28 {
  padding-right: 28px !important;
}

.pd-x-28 {
  padding: 0 28px !important;
}

.pd-y-28 {
  padding: 28px 0 !important;
}

.mg-32 {
  margin: 32px !important;
}

.mg-t-32 {
  margin-top: 32px !important;
}

.mg-b-32 {
  margin-bottom: 32px !important;
}

.mg-l-32 {
  margin-left: 32px !important;
}

.mg-r-32 {
  margin-right: 32px !important;
}

.mg-x-32 {
  margin: 0 32px !important;
}

.mg-y-32 {
  margin: 32px 0 !important;
}

.pd-32 {
  padding: 32px !important;
}

.pd-t-32 {
  padding-top: 32px !important;
}

.pd-b-32 {
  padding-bottom: 32px !important;
}

.pd-l-32 {
  padding-left: 32px !important;
}

.pd-r-32 {
  padding-right: 32px !important;
}

.pd-x-32 {
  padding: 0 32px !important;
}

.pd-y-32 {
  padding: 32px 0 !important;
}

.mg-36 {
  margin: 36px !important;
}

.mg-t-36 {
  margin-top: 36px !important;
}

.mg-b-36 {
  margin-bottom: 36px !important;
}

.mg-l-36 {
  margin-left: 36px !important;
}

.mg-r-36 {
  margin-right: 36px !important;
}

.mg-x-36 {
  margin: 0 36px !important;
}

.mg-y-36 {
  margin: 36px 0 !important;
}

.pd-36 {
  padding: 36px !important;
}

.pd-t-36 {
  padding-top: 36px !important;
}

.pd-b-36 {
  padding-bottom: 36px !important;
}

.pd-l-36 {
  padding-left: 36px !important;
}

.pd-r-36 {
  padding-right: 36px !important;
}

.pd-x-36 {
  padding: 0 36px !important;
}

.pd-y-36 {
  padding: 36px 0 !important;
}

.mg-40 {
  margin: 40px !important;
}

.mg-t-40 {
  margin-top: 40px !important;
}

.mg-b-40 {
  margin-bottom: 40px !important;
}

.mg-l-40 {
  margin-left: 40px !important;
}

.mg-r-40 {
  margin-right: 40px !important;
}

.mg-x-40 {
  margin: 0 40px !important;
}

.mg-y-40 {
  margin: 40px 0 !important;
}

.pd-40 {
  padding: 40px !important;
}

.pd-t-40 {
  padding-top: 40px !important;
}

.pd-b-40 {
  padding-bottom: 40px !important;
}

.pd-l-40 {
  padding-left: 40px !important;
}

.pd-r-40 {
  padding-right: 40px !important;
}

.pd-x-40 {
  padding: 0 40px !important;
}

.pd-y-40 {
  padding: 40px 0 !important;
}

.mg-44 {
  margin: 44px !important;
}

.mg-t-44 {
  margin-top: 44px !important;
}

.mg-b-44 {
  margin-bottom: 44px !important;
}

.mg-l-44 {
  margin-left: 44px !important;
}

.mg-r-44 {
  margin-right: 44px !important;
}

.mg-x-44 {
  margin: 0 44px !important;
}

.mg-y-44 {
  margin: 44px 0 !important;
}

.pd-44 {
  padding: 44px !important;
}

.pd-t-44 {
  padding-top: 44px !important;
}

.pd-b-44 {
  padding-bottom: 44px !important;
}

.pd-l-44 {
  padding-left: 44px !important;
}

.pd-r-44 {
  padding-right: 44px !important;
}

.pd-x-44 {
  padding: 0 44px !important;
}

.pd-y-44 {
  padding: 44px 0 !important;
}

.mg-48 {
  margin: 48px !important;
}

.mg-t-48 {
  margin-top: 48px !important;
}

.mg-b-48 {
  margin-bottom: 48px !important;
}

.mg-l-48 {
  margin-left: 48px !important;
}

.mg-r-48 {
  margin-right: 48px !important;
}

.mg-x-48 {
  margin: 0 48px !important;
}

.mg-y-48 {
  margin: 48px 0 !important;
}

.pd-48 {
  padding: 48px !important;
}

.pd-t-48 {
  padding-top: 48px !important;
}

.pd-b-48 {
  padding-bottom: 48px !important;
}

.pd-l-48 {
  padding-left: 48px !important;
}

.pd-r-48 {
  padding-right: 48px !important;
}

.pd-x-48 {
  padding: 0 48px !important;
}

.pd-y-48 {
  padding: 48px 0 !important;
}

.mg-x-auto {
  margin: 0 auto;
}

.mg-y-auto {
  margin: auto 0;
}

.pd-x-auto {
  padding: 0 auto;
}

.pd-y-auto {
  padding: auto 0;
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

.cursor-all-scroll {
  cursor: all-scroll;
}

.cursor-col-resize {
  cursor: col-resize;
}

.cursor-row-resize {
  cursor: row-resize;
}

.cursor-copy {
  cursor: copy;
}

.cursor-grabbing {
  cursor: grabbing;
}

.cursor-move {
  cursor: move;
}

.cursor-no-drop {
  cursor: no-drop;
}

.cursor-wait {
  cursor: wait;
}

/* Text Align */
.text-align-center {
  text-align: center;
}
.text-align-left {
  text-align: left;
}
.text-align-right {
  text-align: right;
}

/* Text Limig */
.text-limit-1 {
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-limit-2 {
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-limit-3 {
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-limit-4 {
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-limit-5 {
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop/Mobile show/hide */
.mobile-show {
  display: none;
}

@media (max-width: 400px) {
  .desktop-show {
    display: none;
  }
  .mobile-show {
    display: block;
  }
}
/* Banner */
.banner-top {
  width: 100%;
  height: 300px;
  background-position: center !important;
  position: relative;
}
.banner-top .text-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.banner-top .text-block .text {
  color: var(--nc-50) !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.2509803922);
}
@media (max-width: 768px) {
  .banner-top {
    background-size: cover !important;
    height: 128px;
  }
}

/* Select 2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 100% !important;
}

.select2-container .select2-selection--single {
  height: 35px !important;
}

.select2-selection__rendered {
  height: auto;
  font-size: 10pt;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--nc-500);
  display: flex !important;
  align-items: center;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 9px !important;
}

.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
  border: solid 1px #ced4da !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--pc-100) !important;
  border: 1px solid var(--pc-100) !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  margin-top: 10px !important;
  margin-right: 10px !important;
  font-size: var(--text-xs) !important;
  color: var(--nc-800) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 5px !important;
}

.select2-results__option {
  font-size: 14px;
}

/* Lazy Load */
.fade-up {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: opacity, transform;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* 初始狀態：透明度 0，稍微往上一點點（或不位移也可以） */
.stagger-show {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* 啟動狀態 */
.stagger-show.active {
  opacity: 1;
  transform: translateY(0);
}

/* 自定義 */
/* 自定義字體 */
h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 0;
}

.text-9xl-bold {
  font-size: var(--text-9xl) !important;
  line-height: var(--text-9xl--line-height);
  font-weight: bold;
}

.text-9xl-regular {
  font-size: var(--text-9xl) !important;
  line-height: var(--text-9xl--line-height);
}

.text-8xl-bold {
  font-size: var(--text-8xl) !important;
  line-height: var(--text-8xl--line-height);
  font-weight: bold;
}

.text-8xl-regular {
  font-size: var(--text-8xl) !important;
  line-height: var(--text-8xl--line-height);
}

.text-7xl-bold {
  font-size: var(--text-7xl) !important;
  line-height: var(--text-7xl--line-height);
  font-weight: bold;
}

.text-7xl-regular {
  font-size: var(--text-7xl) !important;
  line-height: var(--text-7xl--line-height);
}

.text-6xl-bold {
  font-size: var(--text-6xl) !important;
  line-height: var(--text-6xl--line-height);
  font-weight: bold;
}

.text-6xl-regular {
  font-size: var(--text-6xl) !important;
  line-height: var(--text-6xl--line-height);
}

.text-5xl-bold {
  font-size: var(--text-5xl) !important;
  line-height: var(--text-5xl--line-height);
  font-weight: bold;
}

.text-5xl-regular {
  font-size: var(--text-5xl) !important;
  line-height: var(--text-5xl--line-height);
}

.text-4xl-bold {
  font-size: var(--text-4xl) !important;
  line-height: var(--text-4xl--line-height);
  font-weight: bold;
}

.text-4xl-regular {
  font-size: var(--text-4xl) !important;
  line-height: var(--text-4xl--line-height);
}

.text-3xl-bold {
  font-size: var(--text-3xl) !important;
  line-height: var(--text-3xl--line-height);
  font-weight: bold;
}

.text-3xl-regular {
  font-size: var(--text-3xl) !important;
  line-height: var(--text-3xl--line-height);
}

.text-2xl-bold {
  font-size: var(--text-2xl) !important;
  line-height: var(--text-2xl--line-height);
  font-weight: bold;
}

.text-2xl-regular {
  font-size: var(--text-2xl) !important;
  line-height: var(--text-2xl--line-height);
}

.text-xl-bold {
  font-size: var(--text-xl) !important;
  line-height: var(--text-xl--line-height);
  font-weight: bold;
}

.text-xl-regular {
  font-size: var(--text-xl) !important;
  line-height: var(--text-xl--line-height);
}

.text-lg-bold {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
  font-weight: bold;
}

.text-lg-regular {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
}

.text-base-bold {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
}

.text-base-regular {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
}

.text-sm-bold {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  font-weight: bold;
}

.text-sm-regular {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  font-weight: bold;
}

.text-xs-bold {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
  font-weight: bold;
}

.text-xs-regular {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
  font-weight: bold;
}

/* 字體顏色 */
.text-primary-ultra-dark {
  color: var(--pc-950) !important;
}

.text-primary-dark {
  color: var(--pc-900) !important;
}

.text-primary {
  color: var(--pc-800) !important;
}

.text-primary-light {
  color: var(--pc-200) !important;
}

.text-accent {
  color: var(--ac-600) !important;
}

.text-accent-light {
  color: var(--ac-300) !important;
}

.text-white {
  color: var(--nc-50) !important;
}

.text-black {
  color: var(--nc-800) !important;
}

.text-gray-light {
  color: var(--nc-300) !important;
}

.text-gray {
  color: var(--nc-400) !important;
}

.text-gray-dark {
  color: var(--nc-500) !important;
}

.text-red {
  color: var(--rc-600) !important;
}

.text-yellow {
  color: var(--yc-500) !important;
}

.text-success {
  color: var(--suc-500) !important;
}

/* Input Number */
.input-number-no-spinners {
  /* 針對 Firefox 瀏覽器 */
  -moz-appearance: textfield;
  /* 移除 type="number" 的預設箭頭樣式，將其視為一般文字輸入框 */
}

.input-number-no-spinners::-webkit-outer-spin-button,
.input-number-no-spinners::-webkit-inner-spin-button {
  /* 針對 Chrome, Safari, Edge 瀏覽器 */
  -webkit-appearance: none;
  margin: 0; /* 移除可能的 margin 空間 */
}

/* Sweet Alert */
.swal2-container {
  /* 套件預設值寫在 :root、又比 site.css 晚進 head，蓋不掉；掛在元素上才吃得到 */
  --swal2-backdrop: rgba(15, 8, 32, .72);
  --swal2-background: var(--sc-950);
  --swal2-color: var(--nc-50);
  --swal2-border: 1px solid var(--ac-light-transparent-strong);
  --swal2-border-radius: var(--spacing-16);
  --swal2-close-button-color: var(--nc-300);
  --swal2-input-background: #ffffff0f;
  --swal2-input-border: 1px solid var(--ac-light-transparent-strong);
}
.swal2-container .swal2-html-container {
  display: flex !important;
  flex-direction: column;
  gap: var(--spacing-8);
}
.swal2-container .swal2-html-container .title {
  text-align: left;
}
.swal2-container {
  /* 套件預設 5em（80px）太大。打勾的線條與圓弧遮罩都是 em、照 80px 的圓算好的，
     直接壓 width/height 會讓打勾跑出圈外、動畫掃錯位置，所以改縮字級讓整組幾何等比縮 */
}
.swal2-container .swal2-icon {
  font-size: 12px;
}
.swal2-container .swal2-icon .swal2-icon-content {
  font-size: 44px;
}
.swal2-container {
  /* 兩顆鈕比照 header 的「立即預約」「會員中心」，也就是 .c-button 的 --fill / --outline --round；
     這裡不能直接掛 c-button，按鈕是 SweetAlert 自己產的、class 由套件決定 */
}
.swal2-container .swal2-confirm,
.swal2-container .swal2-cancel {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-8) var(--spacing-24);
  border: 1px solid transparent;
  border-radius: 100px;
  min-width: 128px;
  cursor: pointer;
  white-space: nowrap;
}
.swal2-container .swal2-confirm {
  color: var(--nc-800) !important;
  background: var(--ac-300);
  border-color: var(--ac-300);
}
.swal2-container .swal2-confirm:hover {
  box-shadow: 0 0 10px var(--ac-300);
}
.swal2-container .swal2-cancel {
  color: var(--nc-50) !important;
  background: transparent;
  border-color: var(--ac-300);
}
.swal2-container .swal2-cancel:hover {
  color: var(--nc-800) !important;
  background: var(--ac-300);
}
.swal2-container {
  /* 被擋時的驗證訊息，樣式留給使用者自己填 */
}
.swal2-container .swal2-validation-message {
  background: var(--pc-950) !important;
  color: var(--nc-50) !important;
  /* 套件把那顆圓的紅底寫死在規則裡，沒有變數可蓋，只能靠 mixin 自帶的 !important */
}
.swal2-container .swal2-validation-message::before {
  background: var(--nc-50) !important;
  color: var(--pc-950) !important;
}

.number-wrap {
  display: flex;
  gap: 10px;
}
.number-wrap input {
  border-radius: var(--spacing-8);
}
.number-wrap .opt-btn {
  font-size: var(--text-xl) !important;
  line-height: var(--text-xl--line-height);
  font-weight: bold;
  background: var(--nc-50) !important;
  width: 40px;
  height: 40px;
  border: 1px solid var(--nc-100);
  border-radius: var(--spacing-8);
}
@media (max-width: 576px) {
  .number-wrap input {
    height: 32px;
  }
  .number-wrap .opt-btn {
    font-size: var(--text-base) !important;
    line-height: var(--text-base--line-height);
    font-weight: bold;
    width: 32px;
    height: 32px;
  }
}

.animation-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.4588235294);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(7px);
}

.animation-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 25px;
  background: rgba(168, 168, 168, 0.3019607843);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/************* 要替換掉的 *************/
.animation {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  margin: 12px auto;
  position: relative;
  background: #FFF;
  box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  box-sizing: border-box;
  animation: shadowPulse 1.5s linear infinite;
}

@keyframes shadowPulse {
  33% {
    background: #FFF;
    box-shadow: -24px 0 var(--pc-500), 24px 0 #FFF;
  }
  66% {
    background: var(--pc-500);
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  }
  100% {
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 var(--pc-500);
  }
}
/************* 要替換掉的 *************/
@media (max-width: 576px) {
  .animation-bg {
    background: rgba(20, 20, 20, 0.1764705882);
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(0); */
  }
}
/* 元件 */
/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
/* 表單控制項全部住這裡：input / select / textarea / radio / checkbox
 *
 * partial 分三支而樣式合成這一支：欄位是「標題在上、欄位在下」，
 * radio 與 checkbox 是「框在左、文字在右」，markup 併不起來；
 * 但找樣式的人要的是「表單長怎樣」，散成三支檔要翻三次
 */
/* Input — 對齊 Figma Component/Input（node 114:3103）深色版 */
.c-input {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  width: 100%;
}
.c-input__title {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-50) !important;
}
.c-input {
  /* Figma 必填星號 #e17100 → --ac-600 */
}
.c-input__required {
  color: var(--ac-600) !important;
}
.c-input__alarm {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--ac-600) !important;
}
.c-input__box {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
  color: var(--nc-50) !important;
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--sc-950);
  border: 0.5px solid var(--ac-light-transparent-strong);
  border-radius: var(--spacing-8);
  padding: 10px var(--spacing-16); /* Figma 10 / 16；10 不在 spacing 階上，照設計稿寫死 */
  /* iPhone 的 Safari 遇到小於 16px 的輸入框會自動放大整頁，16 是它的門檻 */
}
@media (max-width: 992px) {
  .c-input__box {
    font-size: var(--text-base) !important;
    line-height: var(--text-base--line-height);
  }
}
.c-input__box::placeholder {
  color: var(--nc-400) !important;
}
.c-input__box:focus {
  outline: none;
  border-color: var(--ac-300);
}
.c-input__box {
  /* 唯讀：看得到、選得到、複製得到，但一眼看得出不能改。
     用 readonly 不用 disabled，disabled 連選取複製都不行 */
}
.c-input__box.--readonly {
  background: var(--pc-950);
  border-color: transparent;
  cursor: default;
  color: var(--nc-400) !important;
}
.c-input__box.--readonly:focus {
  border-color: transparent;
}
.c-input__select {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  appearance: none;
  cursor: pointer;
}
.c-input__select:focus {
  outline: none;
}
.c-input__select option {
  background: var(--sc-950);
}
.c-input {
  /* 還停在 placeholder option 時字轉灰，對齊 Figma 未選狀態 */
}
.c-input__box:has(.c-input__select option[value=""]:checked) {
  color: var(--nc-400) !important;
}
.c-input {
  /* Figma 匯出的箭頭 SVG fill 是 white，不是黃 */
}
.c-input__icon {
  flex: 0 0 auto;
  margin-left: var(--spacing-8);
  font-size: 12px;
  color: var(--nc-50) !important;
}
.c-input__textarea {
  height: 215px;
  align-items: flex-start;
  resize: vertical;
}

/* 自製 radio（黃圓+黑點 / 未選黃50%圈）—— 方案卡與規格選項共用 */
.c-radio {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--ac-light-transparent-strong);
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}
.c-radio:checked {
  border-color: var(--ac-300);
  background: var(--ac-300);
}
.c-radio:checked::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nc-800);
}

/* 自製 checkbox（黃底黑勾 / 未選白30%細框）*/
.c-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  cursor: pointer;
  /* 原生框不能拿掉、只能藏：勾選狀態要靠它推旁邊那顆假框 */
}
.c-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.c-checkbox__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-4);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.c-checkbox__box i {
  display: none;
  font-size: 12px;
  color: var(--nc-800) !important;
}
.c-checkbox__input:checked + .c-checkbox__box {
  background: var(--ac-300);
  border-color: var(--ac-300);
}
.c-checkbox__input:checked + .c-checkbox__box i {
  display: block;
}
.c-checkbox__text {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-50) !important;
}
.c-checkbox__link {
  color: var(--ac-300);
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  text-decoration: underline !important;
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-button {
  width: 100%;
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  /* Figma text-base/bold 16px */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-8) var(--spacing-24);
  /* Figma 8/24 → 高 40 */
  border: 1px solid transparent;
  /* 讓 fill / outline 盒高一致 */
  cursor: pointer;
  white-space: nowrap;
  /* ---- State ---- */
}
.c-button.--fill {
  /* Fill：黃底深字 */
  background: var(--ac-300);
  /* #ffd230 */
  border-color: var(--ac-300);
  color: var(--nc-800) !important;
  /* #262626 → nc-800 */
}
.c-button.--fill:hover {
  box-shadow: 0 0 10px var(--ac-300);
}
.c-button.--fill.disabled {
  background: var(--nc-500);
  border-color: var(--nc-500);
  box-shadow: none;
  cursor: auto;
  color: var(--nc-300) !important;
}
.c-button.--outline {
  /* Outline：透明底 + 黃框 + 白字 */
  background: transparent;
  border-color: var(--ac-300);
  color: var(--nc-50) !important;
}
.c-button.--outline:hover {
  background: var(--ac-300);
  color: var(--nc-800) !important;
}
.c-button {
  /* ---- Type（圓角）---- */
}
.c-button.--round {
  border-radius: 100px;
}
.c-button {
  /* 藥丸 */
}
.c-button.--radius {
  border-radius: var(--radius-8);
}
.c-button {
  /* 小圓角 8 */
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-title-decoration {
  display: flex;
  gap: var(--spacing-12);
  align-items: center;
}
.c-title-decoration .__text {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--nc-800) !important;
}
.c-title-decoration .__decoration-wrap {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
}
.c-title-decoration .__circle {
  background: var(--pc-500) !important;
  width: var(--spacing-16);
  height: var(--spacing-16);
  border-radius: 100px;
}
.c-title-decoration .__bar {
  width: var(--spacing-64);
  height: var(--spacing-4);
  border-radius: 100px;
}
.c-title-decoration .__bar--right {
  background: linear-gradient(to right, var(--pc-500), var(--pc-100));
}
.c-title-decoration .__bar--left {
  background: linear-gradient(to right, var(--pc-100), var(--pc-500));
}
@media (max-width: 576px) {
  .c-title-decoration .__circle {
    width: var(--spacing-12);
    height: var(--spacing-12);
  }
  .c-title-decoration .__bar {
    width: var(--spacing-48);
  }
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-main-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.c-main-title__heading {
  width: 100%;
  display: flex;
  gap: var(--spacing-24);
  align-items: flex-end;
}
.c-main-title__title-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  white-space: nowrap;
}
.c-main-title__eyebrow {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--ac-600) !important;
  /* Text/accent #e17100 → ac-600 */
}
.c-main-title__title {
  font-size: var(--text-4xl) !important;
  line-height: var(--text-4xl--line-height);
  font-weight: bold;
  color: var(--ac-300) !important;
  /* Text/accent-light #ffd230 → ac-300 */
}
.c-main-title__line {
  flex: 1 0 0;
  min-width: 1px;
  height: 1px;
  background: var(--ac-300); /* Background/accent-light #ffd230 */
  margin-bottom: var(--spacing-8); /* 對齊 Figma Line Wrap 的 pb-8 */
}
.c-main-title__desc {
  width: 100%;
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-50) !important;
}
.c-main-title {
  /* 靠右鏡像（見證區）：線在左、文字靠右，Heading gap 16 */
}
.c-main-title.--right .c-main-title__heading {
  gap: var(--spacing-16);
}
.c-main-title.--right .c-main-title__title-block {
  align-items: flex-end;
}
.c-main-title.--right .c-main-title__desc {
  text-align: right;
}
.c-main-title {
  /* 置中（首頁未用，備用）*/
}
.c-main-title.--center .c-main-title__title-block {
  align-items: center;
}
.c-main-title.--center .c-main-title__desc {
  text-align: center;
}
@media (max-width: 576px) {
  .c-main-title__title {
    font-size: var(--text-3xl) !important;
    line-height: var(--text-3xl--line-height);
    font-weight: bold;
  }
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-breadcrumb {
  display: flex;
  justify-content: center;
  width: 100%;
}
.c-breadcrumb__container, .c-breadcrumb__item {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
}
.c-breadcrumb__container {
  width: 1440px;
}
.c-breadcrumb__item.active {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
  font-weight: bold;
  color: var(--nc-800) !important;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
  padding-right: var(--spacing-4);
  content: "›";
}
.c-breadcrumb ol {
  margin: 0;
  display: flex;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}
@media (max-width: 576px) {
  .c-breadcrumb__container, .c-breadcrumb__item {
    font-size: var(--text-base) !important;
    line-height: var(--text-base--line-height);
  }
  .c-breadcrumb__item.active {
    font-size: var(--text-base) !important;
    line-height: var(--text-base--line-height);
    font-weight: bold;
  }
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-service {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.c-service__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}
.c-service__no {
  font-size: var(--text-4xl) !important;
  line-height: var(--text-4xl--line-height);
  font-weight: bold;
  color: var(--ac-300);
}
.c-service { /* accent 黃 #ffd230 */ }
.c-service__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.c-service__title {
  font-size: var(--text-xl) !important;
  line-height: var(--text-xl--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
}
.c-service__subtitle {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-400) !important;
}
.c-service__price {
  font-size: var(--text-xl) !important;
  line-height: var(--text-xl--line-height);
  font-weight: bold;
  color: var(--ac-300);
}
.c-service { /* accent 黃 #ffd230 */ }
@media (max-width: 576px) {
  .c-service__no {
    font-size: var(--text-3xl) !important;
    line-height: var(--text-3xl--line-height);
    font-weight: bold;
  }
  .c-service__title {
    font-size: var(--text-lg) !important;
    line-height: var(--text-lg--line-height);
    font-weight: bold;
  }
  .c-service__price {
    font-size: var(--text-lg) !important;
    line-height: var(--text-lg--line-height);
    font-weight: bold;
  }
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-customer-review {
  width: 100%;
  background: var(--sc-950); /* 卡底 #1a0f2e */
  border: 1px solid var(--nc-800);
  border-radius: var(--spacing-8);
  padding: var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}
.c-customer-review__heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.c-customer-review__profile {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}
.c-customer-review__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--ac-300); /* accent 黃 #ffd230 */
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  font-weight: bold;
  color: var(--nc-800) !important;
}
.c-customer-review__text {
  display: flex;
  flex-direction: column;
}
.c-customer-review__name {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
}
.c-customer-review__service {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
  color: var(--nc-400) !important;
}
.c-customer-review__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-4);
}
.c-customer-review__stars {
  display: flex;
  gap: 2px;
  color: var(--ac-300);
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
}
.c-customer-review { /* accent 黃 */ }
.c-customer-review__recommend {
  padding: var(--spacing-4) var(--spacing-8);
  border: 1px solid var(--ac-300);
  border-radius: var(--spacing-8);
  color: var(--ac-300);
  white-space: nowrap;
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
}
.c-customer-review__desc {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-400) !important;
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  max-width: 1920px;
  height: 65px;
  z-index: 100;
  background: var(--pc-950);
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--ac-light-transparent-strong);
}
.c-header__container {
  width: 1920px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.c-header__logo {
  font-size: var(--text-2xl) !important;
  line-height: var(--text-2xl--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
  text-decoration: none;
}
.c-header__menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-32);
}
.c-header__link {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-50) !important;
  text-decoration: none;
}
.c-header__link:hover {
  color: var(--ac-300) !important;
}
.c-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}
@media (max-width: 1920px) {
  .c-header {
    width: 1200px;
  }
}
@media (max-width: 1440px) {
  .c-header__container {
    width: 100%;
    padding: 0 var(--spacing-16);
  }
}
@media (max-width: 992px) {
  .c-header {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .c-header__link {
    display: none;
  }
  .c-header {
    /* 漢堡選單列第二階段 */
  }
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-footer {
  width: 100%;
  background: var(--pc-950);
  display: flex;
  justify-content: center;
  padding: var(--spacing-32) var(--spacing-16);
  border-top: 1px solid var(--ac-light-transparent-strong);
}
.c-footer__container {
  width: 1920px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}
.c-footer__top {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-48);
}
.c-footer__logo {
  font-size: var(--text-4xl) !important;
  line-height: var(--text-4xl--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
  text-decoration: none;
}
.c-footer__nav {
  display: flex;
  gap: var(--spacing-48);
  height: fit-content;
  width: 100%;
}
.c-footer__link {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-400) !important;
  text-decoration: none;
}
.c-footer__link:hover {
  color: var(--ac-300) !important;
}
.c-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  width: 400px;
}
.c-footer__contact-title {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
}
.c-footer__hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--nc-700);
  margin: var(--spacing-8) 0;
}
.c-footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.c-footer__contact-list li {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--nc-400) !important;
}
.c-footer__bottom {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--nc-400) !important;
  text-align: center;
  border-top: 1px solid var(--nc-800);
  padding-top: var(--spacing-16);
}
@media (max-width: 1920px) {
  .c-footer__container {
    width: 1200px;
  }
}
@media (max-width: 992px) {
  .c-footer {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .c-footer__top {
    flex-direction: column;
    gap: var(--spacing-24);
  }
  .c-footer__contact {
    width: 100%;
  }
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-panel {
  background: var(--sc-950) !important;
  border: 1px solid var(--ac-light-transparent-strong);
  border-radius: var(--spacing-16);
  overflow: hidden;
}
.c-panel__top {
  font-size: var(--text-xl) !important;
  line-height: var(--text-xl--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
  background: var(--ac-light-transparent);
  padding: var(--spacing-24);
  display: flex;
  align-items: center;
}
.c-panel__top.--center {
  justify-content: center;
}
.c-panel__title {
  margin: 0;
  font-size: var(--text-xl) !important;
  line-height: var(--text-xl--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
}
.c-panel__body {
  background: var(--sc-950);
  padding: var(--spacing-32) var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  /* 預約流程那種密排的內容 */
}
.c-panel__body.--tight {
  gap: var(--spacing-12);
}

/* 預約流程元件 */
/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-plan-card {
  background: var(--sc-950) !important;
  width: 100%;
  border: 1px solid var(--ac-light-transparent-strong);
  border-radius: var(--radius-16);
  overflow: hidden;
}
.c-plan-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-16);
  padding: var(--spacing-20) var(--spacing-24);
  cursor: pointer;
}
.c-plan-card__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.c-plan-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}
.c-plan-card__name {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
  font-weight: bold;
  color: var(--nc-50);
}
.c-plan-card__badge {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
  background: var(--ac-light-transparent) !important;
  color: var(--ac-300);
  border: 1px solid var(--ac-light-transparent-strong);
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--radius-4);
  /* 非即時：紫（primary）*/
}
.c-plan-card__badge.--primary {
  color: var(--pc-200);
  background: rgba(173, 70, 255, 0.1);
  border-color: rgba(173, 70, 255, 0.5);
}
.c-plan-card__target {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--nc-400);
}
.c-plan-card .c-radio {
  margin-top: 2px;
}
.c-plan-card__bottom {
  background: var(--sc-950) !important;
  display: none;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  border-top: 1px solid rgba(201, 162, 39, 0.12);
}
.c-plan-card__spec {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.c-plan-card__spec-term {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-400);
}
.c-plan-card__spec-desc {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-50);
}
.c-plan-card__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}
.c-plan-card__group-label {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-400);
}
.c-plan-card__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  /* 附加服務：整條寬、上下堆疊 */
}
.c-plan-card__options.--stack {
  flex-direction: column;
  flex-wrap: nowrap;
}
.c-plan-card__options.--stack .c-plan-button {
  flex: 0 0 auto;
}
.c-plan-card {
  /* 選中/展開：header 黃底、方案名黃、內容展開 */
}
.c-plan-card.--expanded .c-plan-card__top {
  background: var(--ac-light-transparent);
}
.c-plan-card.--expanded .c-plan-card__name {
  color: var(--ac-300);
}
.c-plan-card.--expanded .c-plan-card__bottom {
  display: flex;
}
@media (max-width: 576px) {
  .c-plan-card__top, .c-plan-card__bottom {
    padding: var(--spacing-20) var(--spacing-16);
  }
}

/* 方案規格 / 附加服務的選項按鈕（內容寬度、靠左、可並排 wrap；不撐滿）*/
.c-plan-button {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-32);
  min-height: 68px;
  padding: var(--spacing-16);
  border: 1px solid var(--ac-light-transparent);
  border-radius: var(--radius-16);
  background: var(--sc-950);
  cursor: pointer;
}
.c-plan-button__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  min-width: 0;
}
.c-plan-button__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.c-plan-button__title {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  color: var(--nc-300);
}
.c-plan-button__title-sub {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--nc-300);
}
.c-plan-button__price {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  color: var(--nc-300);
}
.c-plan-button__qty {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  color: var(--nc-50);
  flex: 0 0 auto;
}
@media (max-width: 576px) {
  .c-plan-button__qty {
    font-size: var(--text-xl) !important;
    line-height: var(--text-xl--line-height);
  }
}
.c-plan-button__qty i {
  color: var(--nc-300);
  font-size: 16px;
  cursor: pointer;
}
@media (max-width: 576px) {
  .c-plan-button__qty i {
    font-size: 18px;
  }
}
.c-plan-button {
  /* 選中：黃底黃框、標題白、價格黃 */
}
.c-plan-button:has(.c-radio:checked) {
  background: var(--ac-light-transparent) !important;
  border-color: var(--ac-light-transparent-strong);
}
.c-plan-button:has(.c-radio:checked) .c-plan-button__title {
  color: var(--nc-50);
}
.c-plan-button:has(.c-radio:checked) .c-plan-button__price {
  color: var(--ac-300);
}
@media (max-width: 768px) {
  .c-plan-button {
    width: 100%;
  }
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
/* 付款方式等：icon + 標題 + 說明，整條寬、可點選 */
.c-option-card {
  display: block;
  cursor: pointer;
}
.c-option-card__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.c-option-card__body {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-20);
  border: 1px solid var(--ac-light-transparent);
  border-radius: var(--radius-8);
  background: var(--sc-950);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.c-option-card__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ac-300);
}
.c-option-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  flex: 1 1 auto;
}
.c-option-card__title {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  color: var(--nc-50);
}
.c-option-card__desc {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--nc-400);
}
.c-option-card__price {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  color: var(--ac-300);
  flex: 0 0 auto;
}
.c-option-card:hover .c-option-card__body {
  border-color: var(--ac-light-transparent-strong);
}
.c-option-card {
  /* 選取：黃框 + 黃微底 */
}
.c-option-card .c-option-card__input:checked + .c-option-card__body {
  border-color: var(--ac-light-transparent-strong);
  background: var(--ac-light-transparent) !important;
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-order-summary {
  background: var(--sc-950) !important;
  width: 100%;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: var(--radius-16);
  overflow: hidden;
  position: sticky;
  top: calc(65px + var(--spacing-24));
  /* 標題列：黃底、置中、黃字 */
}
.c-order-summary__title {
  background: var(--ac-light-transparent) !important;
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-16);
  color: var(--ac-300);
}
.c-order-summary__body {
  background: var(--sc-950) !important;
  border-top: 1px solid rgba(201, 162, 39, 0.12);
  padding: var(--spacing-20);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}
.c-order-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.c-order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-16);
}
.c-order-summary__label {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-400);
}
.c-order-summary__value {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-50);
  text-align: right;
}
.c-order-summary__divider {
  width: 100%;
  height: 1px;
  background: var(--ac-light-transparent-strong) !important;
}
.c-order-summary__foot {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-top: calc(var(--spacing-8) - var(--spacing-16));
}
.c-order-summary__total-label {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-50);
}
.c-order-summary__total-value {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
  font-weight: bold;
  color: var(--ac-300);
}
.c-order-summary {
  /* 這兩個只有窄螢幕的底部條用得到 */
}
.c-order-summary__info {
  display: none;
}
.c-order-summary__mask {
  display: none;
}
.c-order-summary__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.c-order-summary {
  /* ---- 窄螢幕：整張改成釘在畫面底部的一條，明細收進往上滑出的面板 ---- */
}
@media (max-width: 992px) {
  .c-order-summary {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    z-index: 60;
    border: none;
    border-top: 1px solid rgba(201, 162, 39, 0.45);
    border-radius: 0;
    overflow: visible;
  }
  .c-order-summary__title {
    display: none;
  }
  .c-order-summary__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-top: none;
  }
  .c-order-summary {
    /* 明細改成貼在條正上方的面板。bottom 用 100% 是為了不必寫死條的高度 */
  }
  .c-order-summary .c-order-summary__rows {
    background: var(--sc-950) !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: -1;
    padding: var(--spacing-16);
    border-top: 1px solid rgba(201, 162, 39, 0.45);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  }
  .c-order-summary .c-order-summary__foot {
    margin-top: 0;
    flex: 0 0 auto;
    cursor: pointer;
  }
  .c-order-summary .c-order-summary__foot .c-order-summary__divider {
    display: none;
  }
  .c-order-summary .c-order-summary__foot .c-order-summary__row {
    gap: var(--spacing-8);
  }
  .c-order-summary__info {
    display: inline-block;
    margin-left: var(--spacing-4);
    color: var(--ac-300);
    font-size: var(--text-xs) !important;
    line-height: var(--text-xs--line-height);
  }
  .c-order-summary {
    /* 比面板再低一階，於是變暗的是頁面、不是條也不是面板 */
  }
  .c-order-summary__mask {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--mask-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .c-order-summary__actions {
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--spacing-8);
    flex: 0 1 auto;
  }
  .c-order-summary.--open .c-order-summary__rows, .c-order-summary.--open .c-order-summary__mask {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
}
.c-order-summary {
  /* 第三步的按鈕文字是「確認資訊，前往結帳」，跟總計橫排在手機寬度放不下 */
}
@media (max-width: 576px) {
  .c-order-summary__body {
    flex-direction: column;
    align-items: stretch;
  }
  .c-order-summary__actions .c-button {
    flex: 1 1 auto;
  }
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
.c-time-slot {
  display: block;
  cursor: pointer;
}
.c-time-slot__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.c-time-slot__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--spacing-8) var(--spacing-4);
  border: 1px solid var(--ac-300);
  border-radius: var(--radius-8);
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.c-time-slot {
  /* 可選的時間文字走強調色，不是白色（2026-08-12 對過設計稿） */
}
.c-time-slot__time {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--ac-300) !important;
}
.c-time-slot__note {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
  color: var(--ac-300);
}
.c-time-slot {
  /* 格子由 JS 複製模子產生，沒有註記時那個 span 還在。
     空殼會多佔一道 gap，置中之下時間會往上跑一點 */
}
.c-time-slot__note:empty {
  display: none;
}
.c-time-slot:hover .c-time-slot__body {
  background: var(--ac-light-transparent);
}
.c-time-slot {
  /* 選取：黃底深字 */
}
.c-time-slot .c-time-slot__input:checked + .c-time-slot__body {
  background: var(--ac-300);
  border-color: var(--ac-300);
}
.c-time-slot .c-time-slot__input:checked + .c-time-slot__body .c-time-slot__time {
  color: var(--nc-800) !important;
}
.c-time-slot .c-time-slot__input:checked + .c-time-slot__body {
  /* 亮著的格子還寫「時間不足」很怪，原因文字藏起來 */
}
.c-time-slot .c-time-slot__input:checked + .c-time-slot__body .c-time-slot__note {
  display: none;
}
.c-time-slot {
  /* 額滿 / 不可選：灰框灰字 */
}
.c-time-slot.--disabled {
  cursor: not-allowed;
}
.c-time-slot.--disabled .c-time-slot__body {
  /* 不可選的框仍是強調色、只是透明度降下來——同色相靠濃淡分強弱，不換成灰白 */
  border-color: var(--ac-light-transparent-strong);
  background: transparent;
}
.c-time-slot.--disabled .c-time-slot__time {
  color: var(--nc-500) !important;
}
.c-time-slot.--disabled .c-time-slot__note {
  color: var(--nc-500) !important;
}
.c-time-slot.--disabled:hover .c-time-slot__body {
  background: transparent;
}
.c-time-slot {
  /* 佔用範圍內的格子一起標亮，客人才看得出這一次佔掉多久。
     它們是 disabled、永遠 checked 不了，所以另開一個狀態。
     🔴 一定要放在 --disabled 後面：兩者權重相同，寫在前面會被刷回透明 */
}
.c-time-slot.--in-range .c-time-slot__body {
  background: var(--ac-300);
  border-color: var(--ac-300);
}
.c-time-slot.--in-range .c-time-slot__body .c-time-slot__time {
  color: var(--nc-800) !important;
}
.c-time-slot.--in-range .c-time-slot__body .c-time-slot__note {
  display: none;
}
.c-time-slot.--in-range:hover .c-time-slot__body {
  background: var(--ac-300);
}

/* 全站入口：這裡 @use 的東西才會被編進 site.css
 * 新增元件 scss 後，記得在下面加一行 @use，否則不會生效
 */
/* 自製月曆（由 /js/calendar.js 渲染）—— 照 Figma Calendar 結構 */
.c-calendar {
  background: var(--sc-950) !important;
  width: 100%;
  border: 1px solid var(--ac-light-transparent-strong); /* 黃框 */
  border-radius: var(--radius-16);
  overflow: hidden;
  /* 標題列：黃底、標題白 20px、右側純箭頭 */
}
.c-calendar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-24);
  background: var(--ac-light-transparent) !important;
}
.c-calendar__month {
  font-size: var(--text-xl) !important;
  line-height: var(--text-xl--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
}
.c-calendar__nav-wrap {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}
.c-calendar__nav {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--nc-50) !important;
  font-size: 18px;
  line-height: 1;
}
.c-calendar__nav:hover {
  color: var(--ac-300);
}
.c-calendar {
  /* 主體 */
}
.c-calendar__body {
  background: var(--sc-950);
  padding: var(--spacing-32) var(--spacing-8);
}
.c-calendar__body {
  padding: var(--spacing-32);
}
.c-calendar__weekdays, .c-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.c-calendar__weekday {
  text-align: center;
  padding: var(--spacing-4) 0;
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
  font-weight: bold;
  color: var(--nc-50);
}
.c-calendar__weekday:first-child, .c-calendar__weekday:last-child {
  color: var(--ac-300);
}
.c-calendar__weekday { /* 日、六 黃 */ }
.c-calendar__day {
  min-height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-8);
  background: transparent;
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
  font-weight: bold;
  color: var(--nc-50);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.c-calendar__day:hover {
  border-color: var(--ac-light-transparent-strong);
}
.c-calendar__day.--other-month {
  color: rgba(255, 255, 255, 0.15);
}
.c-calendar__day {
  /* 過去/不可預約：灰、regular */
}
.c-calendar__day.--disabled {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
  color: var(--nc-500);
  cursor: not-allowed;
}
.c-calendar__day.--disabled:hover {
  border-color: transparent;
}
.c-calendar__day {
  /* 今日：黃底 + 黃框 */
}
.c-calendar__day.--today {
  background: var(--ac-light-transparent);
  border-color: var(--ac-light-transparent-strong);
}
.c-calendar__day {
  /* 選取：黃實底 + 深字 */
}
.c-calendar__day.--selected {
  background: var(--ac-300);
  border-color: var(--ac-300);
  color: var(--pc-950);
}
.c-calendar {
  /* 圖例 */
}
.c-calendar__legend {
  display: flex;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  background: var(--sc-950);
  border-top: 1px solid var(--ac-light-transparent-strong);
}
.c-calendar__legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
}
.c-calendar__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.c-calendar__legend-dot.--selected {
  background: var(--ac-300);
}
.c-calendar__legend-dot.--today {
  background: var(--ac-light-transparent) !important;
  border: 1px solid var(--ac-light-transparent-strong);
}
.c-calendar__legend-dot.--disabled {
  background: var(--nc-500);
}
@media (max-width: 576px) {
  .c-calendar__body {
    padding: var(--spacing-16) var(--spacing-4);
  }
  .c-calendar__day {
    min-height: 44px;
  }
}