@charset "UTF-8";
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* Font Size */
/* Font Weight */
/* Width */
/* Height */
/* Display */
/* Margin */
/* Padding */
/* Cursor */
/* Background Color */
/* Color */
/******************  自 _config.scss 搬入（2026-08-14 item 32）  ******************/
/* 毛玻璃 */
/* Text Limit —— 後台原本沒有這支 */
: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;
  /* Neutral Color — 中性灰（取代舊的 sc 與 tc 兩組）*/
  --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;
  /* Red Color — 錯誤／危險（取代舊的 warn-200）*/
  --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 — 警告／待處理（取代舊的 error-200）*/
  --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 — 成功（取代舊的 ac 與 success-200）*/
  --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;
  /* 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;
}

/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/*隱藏ScrollBar*/
::-webkit-scrollbar {
  display: none;
}

html, body {
  width: 100% !important;
  height: 100svh !important;
  touch-action: manipulation;
  touch-action: pan-x pan-y;
  scroll-behavior: auto !important;
  padding-bottom: env(safe-area-inset-bottom);
  font-family: "Work Sans", sans-serif;
  background-color: var(--pc-950) !important;
}

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

label {
  margin-bottom: 0 !important;
}

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

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

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

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

/* Font Size */
.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);
}

.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);
}

.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-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-x-0 {
  padding: 0 0px !important;
}

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

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

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

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

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

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

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

.mg-b-4 {
  margin-bottom: 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-x-4 {
  padding: 0 4px !important;
}

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

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

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

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

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

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

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

.mg-b-8 {
  margin-bottom: 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-x-8 {
  padding: 0 8px !important;
}

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

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

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

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

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

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

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

.mg-b-12 {
  margin-bottom: 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-x-12 {
  padding: 0 12px !important;
}

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

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

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

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

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

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

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

.mg-b-16 {
  margin-bottom: 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-x-16 {
  padding: 0 16px !important;
}

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

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

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

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

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

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

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

.mg-b-20 {
  margin-bottom: 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-x-20 {
  padding: 0 20px !important;
}

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

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

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

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

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

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

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

.mg-b-24 {
  margin-bottom: 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-x-24 {
  padding: 0 24px !important;
}

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

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

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

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

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

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

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

.mg-b-28 {
  margin-bottom: 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-x-28 {
  padding: 0 28px !important;
}

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

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

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

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

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

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

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

.mg-b-32 {
  margin-bottom: 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-x-32 {
  padding: 0 32px !important;
}

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

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

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

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

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

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

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

.mg-b-36 {
  margin-bottom: 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-x-36 {
  padding: 0 36px !important;
}

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

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

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

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

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

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

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

.mg-b-40 {
  margin-bottom: 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-x-40 {
  padding: 0 40px !important;
}

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

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

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

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

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

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

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

.mg-b-44 {
  margin-bottom: 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-x-44 {
  padding: 0 44px !important;
}

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

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

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

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

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

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

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

.mg-b-48 {
  margin-bottom: 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-x-48 {
  padding: 0 48px !important;
}

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

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

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

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

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

/* 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;
}

/* 自定義顏色 —— 5 組 × 11 階，產生 .color-{name} 與 .bg-color-{name} 各 55 個 */
.color-pc-950 {
  color: var(--pc-950);
}

.bg-color-pc-950 {
  background-color: var(--pc-950);
}

.color-pc-900 {
  color: var(--pc-900);
}

.bg-color-pc-900 {
  background-color: var(--pc-900);
}

.color-pc-800 {
  color: var(--pc-800);
}

.bg-color-pc-800 {
  background-color: var(--pc-800);
}

.color-pc-700 {
  color: var(--pc-700);
}

.bg-color-pc-700 {
  background-color: var(--pc-700);
}

.color-pc-600 {
  color: var(--pc-600);
}

.bg-color-pc-600 {
  background-color: var(--pc-600);
}

.color-pc-500 {
  color: var(--pc-500);
}

.bg-color-pc-500 {
  background-color: var(--pc-500);
}

.color-pc-400 {
  color: var(--pc-400);
}

.bg-color-pc-400 {
  background-color: var(--pc-400);
}

.color-pc-300 {
  color: var(--pc-300);
}

.bg-color-pc-300 {
  background-color: var(--pc-300);
}

.color-pc-200 {
  color: var(--pc-200);
}

.bg-color-pc-200 {
  background-color: var(--pc-200);
}

.color-pc-100 {
  color: var(--pc-100);
}

.bg-color-pc-100 {
  background-color: var(--pc-100);
}

.color-pc-50 {
  color: var(--pc-50);
}

.bg-color-pc-50 {
  background-color: var(--pc-50);
}

.color-nc-950 {
  color: var(--nc-950);
}

.bg-color-nc-950 {
  background-color: var(--nc-950);
}

.color-nc-900 {
  color: var(--nc-900);
}

.bg-color-nc-900 {
  background-color: var(--nc-900);
}

.color-nc-800 {
  color: var(--nc-800);
}

.bg-color-nc-800 {
  background-color: var(--nc-800);
}

.color-nc-700 {
  color: var(--nc-700);
}

.bg-color-nc-700 {
  background-color: var(--nc-700);
}

.color-nc-600 {
  color: var(--nc-600);
}

.bg-color-nc-600 {
  background-color: var(--nc-600);
}

.color-nc-500 {
  color: var(--nc-500);
}

.bg-color-nc-500 {
  background-color: var(--nc-500);
}

.color-nc-400 {
  color: var(--nc-400);
}

.bg-color-nc-400 {
  background-color: var(--nc-400);
}

.color-nc-300 {
  color: var(--nc-300);
}

.bg-color-nc-300 {
  background-color: var(--nc-300);
}

.color-nc-200 {
  color: var(--nc-200);
}

.bg-color-nc-200 {
  background-color: var(--nc-200);
}

.color-nc-100 {
  color: var(--nc-100);
}

.bg-color-nc-100 {
  background-color: var(--nc-100);
}

.color-nc-50 {
  color: var(--nc-50);
}

.bg-color-nc-50 {
  background-color: var(--nc-50);
}

.color-rc-950 {
  color: var(--rc-950);
}

.bg-color-rc-950 {
  background-color: var(--rc-950);
}

.color-rc-900 {
  color: var(--rc-900);
}

.bg-color-rc-900 {
  background-color: var(--rc-900);
}

.color-rc-800 {
  color: var(--rc-800);
}

.bg-color-rc-800 {
  background-color: var(--rc-800);
}

.color-rc-700 {
  color: var(--rc-700);
}

.bg-color-rc-700 {
  background-color: var(--rc-700);
}

.color-rc-600 {
  color: var(--rc-600);
}

.bg-color-rc-600 {
  background-color: var(--rc-600);
}

.color-rc-500 {
  color: var(--rc-500);
}

.bg-color-rc-500 {
  background-color: var(--rc-500);
}

.color-rc-400 {
  color: var(--rc-400);
}

.bg-color-rc-400 {
  background-color: var(--rc-400);
}

.color-rc-300 {
  color: var(--rc-300);
}

.bg-color-rc-300 {
  background-color: var(--rc-300);
}

.color-rc-200 {
  color: var(--rc-200);
}

.bg-color-rc-200 {
  background-color: var(--rc-200);
}

.color-rc-100 {
  color: var(--rc-100);
}

.bg-color-rc-100 {
  background-color: var(--rc-100);
}

.color-rc-50 {
  color: var(--rc-50);
}

.bg-color-rc-50 {
  background-color: var(--rc-50);
}

.color-yc-950 {
  color: var(--yc-950);
}

.bg-color-yc-950 {
  background-color: var(--yc-950);
}

.color-yc-900 {
  color: var(--yc-900);
}

.bg-color-yc-900 {
  background-color: var(--yc-900);
}

.color-yc-800 {
  color: var(--yc-800);
}

.bg-color-yc-800 {
  background-color: var(--yc-800);
}

.color-yc-700 {
  color: var(--yc-700);
}

.bg-color-yc-700 {
  background-color: var(--yc-700);
}

.color-yc-600 {
  color: var(--yc-600);
}

.bg-color-yc-600 {
  background-color: var(--yc-600);
}

.color-yc-500 {
  color: var(--yc-500);
}

.bg-color-yc-500 {
  background-color: var(--yc-500);
}

.color-yc-400 {
  color: var(--yc-400);
}

.bg-color-yc-400 {
  background-color: var(--yc-400);
}

.color-yc-300 {
  color: var(--yc-300);
}

.bg-color-yc-300 {
  background-color: var(--yc-300);
}

.color-yc-200 {
  color: var(--yc-200);
}

.bg-color-yc-200 {
  background-color: var(--yc-200);
}

.color-yc-100 {
  color: var(--yc-100);
}

.bg-color-yc-100 {
  background-color: var(--yc-100);
}

.color-yc-50 {
  color: var(--yc-50);
}

.bg-color-yc-50 {
  background-color: var(--yc-50);
}

.color-suc-950 {
  color: var(--suc-950);
}

.bg-color-suc-950 {
  background-color: var(--suc-950);
}

.color-suc-900 {
  color: var(--suc-900);
}

.bg-color-suc-900 {
  background-color: var(--suc-900);
}

.color-suc-800 {
  color: var(--suc-800);
}

.bg-color-suc-800 {
  background-color: var(--suc-800);
}

.color-suc-700 {
  color: var(--suc-700);
}

.bg-color-suc-700 {
  background-color: var(--suc-700);
}

.color-suc-600 {
  color: var(--suc-600);
}

.bg-color-suc-600 {
  background-color: var(--suc-600);
}

.color-suc-500 {
  color: var(--suc-500);
}

.bg-color-suc-500 {
  background-color: var(--suc-500);
}

.color-suc-400 {
  color: var(--suc-400);
}

.bg-color-suc-400 {
  background-color: var(--suc-400);
}

.color-suc-300 {
  color: var(--suc-300);
}

.bg-color-suc-300 {
  background-color: var(--suc-300);
}

.color-suc-200 {
  color: var(--suc-200);
}

.bg-color-suc-200 {
  background-color: var(--suc-200);
}

.color-suc-100 {
  color: var(--suc-100);
}

.bg-color-suc-100 {
  background-color: var(--suc-100);
}

.color-suc-50 {
  color: var(--suc-50);
}

.bg-color-suc-50 {
  background-color: var(--suc-50);
}

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

@media (max-width: 400px) {
  .desktop-show {
    display: none;
  }
  .mobile-show {
    display: block;
  }
}
.primary-btn {
  cursor: pointer;
  width: 80px;
  height: 40px;
  border: none;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--pc-800);
  color: var(--nc-50);
  font-weight: normal;
}
.primary-btn:hover {
  box-shadow: 0 0 5px var(--pc-800);
}

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

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

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

/* Text Limit */
.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;
}

/* Radius */
.radius-4 {
  border-radius: var(--radius-4);
}

.radius-8 {
  border-radius: var(--radius-8);
}

.radius-16 {
  border-radius: var(--radius-16);
}

.radius-24 {
  border-radius: var(--radius-24);
}

.radius-32 {
  border-radius: var(--radius-32);
}

.radius-40 {
  border-radius: var(--radius-40);
}

.radius-80 {
  border-radius: var(--radius-80);
}

.radius-100 {
  border-radius: var(--radius-100);
}

/******************  自 _config.scss 搬入（2026-08-14 item 32）  ******************/
.glass-background {
  background: rgba(51, 51, 51, 0.4392156863);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.8px solid rgba(237, 237, 237, 0.2274509804);
}

/* FlatPickr */
.picker {
  cursor: pointer;
  background: var(--nc-50) !important;
}

/* Information Tool Tip */
.tool-tip {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: var(--pc-800);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--nc-50);
  cursor: pointer;
}

.input-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

input, textarea {
  font-size: var(--text-sm) !important;
  border-radius: 5px !important;
}

.status-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  width: 120px;
  min-width: 80px;
  height: 28px;
  border-radius: 100px;
  padding: 0 12px;
}
.status-tag.green {
  background: var(--suc-500);
  color: var(--nc-50);
}
.status-tag.yellow {
  background: var(--yc-400);
  color: var(--nc-900);
}
.status-tag.gray {
  background: var(--nc-600);
  color: var(--nc-50);
}
.status-tag.red {
  background: var(--rc-500);
  color: var(--nc-50);
}

/* 頁面頂端的警示橫條。只在「出事了」時才渲染，所以沒有低調的版本——
   要能在一眼掃過整頁時把人攔下來 */
.alert-bar {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.alert-bar.red {
  background: var(--rc-500);
  color: var(--nc-50);
}

/* reset + utility class */
.animation-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 一定要 fixed：absolute 是釘在文件頂端，頁面往下捲遮罩就留在上面、下半截露出來。
     四邊都給 0 而不是 100vw/100vh，捲軸佔掉的寬度才不會多出一條橫向捲動 */
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(255, 255, 255, 0.4588235294);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(7px);
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 1001;
  /* 擋點擊那件事由 loadAnimation 的 pointer-events 負責，這層不要再攔一次 */
  pointer-events: none;
  /* 有游標的裝置本來就有忙碌游標，再蓋一顆是多的；判定用觸控不用寬度，iPad 橫放照寬度會算成桌機 */
}
@media (hover: hover) {
  .loading {
    display: none;
  }
}

.animation-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: var(--spacing-12);
  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);
  }
}
/************* 要替換掉的 *************/
/* 上面那顆 .animation 是整頁遮罩專用的，這顆塞進單一容器、不蓋住整個畫面 */
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--nc-200);
  border-top-color: var(--pc-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 576px) {
  .animation-bg {
    background: rgba(20, 20, 20, 0.1764705882);
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(0); */
  }
}
/* Loading keyframes */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 頂部列高度。手機版覆蓋層要從它底下開始鋪，兩邊用同一個值才不會露縫 */
.frame-body {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  background: url(/images/background/background.jpg) no-repeat center center !important;
  background-size: cover !important;
}
.frame-body .body-container {
  width: 100%;
  max-width: 1920px;
}

.body-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 0 var(--spacing-20);
}
.body-top .header {
  width: 100%;
  height: 100%;
  color: var(--nc-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.body-top {
  /* 漢堡與 logo 是一組，一起靠左 */
}
.body-top .brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}
@media (max-width: 768px) {
  .body-top {
    /* 捲到頁面中段時漢堡與登出都要還在畫面上。覆蓋層是 fixed、量的是視窗座標，不黏會對不齊 */
    background: var(--pc-950) !important;
    position: sticky;
    top: 0;
    z-index: 997;
  }
}

.body-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-24);
  padding: 0 var(--spacing-16) var(--spacing-32) var(--spacing-16);
}
@media (max-width: 576px) {
  .body-bottom {
    height: 100%;
  }
}
.body-bottom .left, .body-bottom .right {
  transition: width 0.3s ease;
}
.body-bottom .left {
  width: 250px;
  /* align-self 不能省：flex 預設 stretch 會把它拉到跟右側等高，塞滿容器就沒有可以 sticky 的餘裕 */
  position: sticky;
  top: var(--spacing-16);
  align-self: flex-start;
  /* top 與 bottom 都要給值：只給 top 的話 fixed 元素高度會塌成內容高 */
}
@media (max-width: 768px) {
  .body-bottom .left {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    /* 卡片的 height: 100% 押在這個值上，讓瀏覽器自己推會塌成內容高；dvh 跟著網址列伸縮，svh 會短一截 */
    height: calc(100dvh - 60px);
    /* 比頂部列低一階。反過來的話收起來的漢堡會被這片蓋住、點不到 */
    z-index: 996;
    overflow-y: auto;
    /* 要多推一個頂部列的高度，只推自己的高度時收起來的選單會從頂部列後面透出來 */
    transform: translateY(calc(-100% - 60px));
    /* 收起來時要真的拿掉，只用 transform 推出畫面的話鍵盤還 Tab 得進去 */
    visibility: hidden;
    transition: transform 0.3s ease-in-out, visibility 0.3s;
  }
}
.body-bottom .right {
  width: calc(100% - 270px);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.body-bottom .right .top {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  font-weight: light;
  display: flex;
  justify-content: space-between;
  align-items: center !important;
  height: 55px;
}
.body-bottom .right .bottom {
  height: calc(100% - 85px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 16px;
}
.body-bottom .right .data-add-btn {
  cursor: pointer;
  width: auto;
  height: 35px;
  border: none;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--pc-800);
  color: var(--nc-50);
  font-weight: normal;
  padding: var(--spacing-12);
}
.body-bottom .right .data-add-btn:hover {
  box-shadow: 0 0 5px var(--pc-800);
}
.body-bottom .right .data-add-btn:disabled {
  /* 底色跟正常狀態同一階的按鈕不少，只靠變色分不出鎖住沒有，變淡才看得出來 */
  pointer-events: none;
  opacity: 0.4;
  background: var(--pc-700);
  color: var(--nc-400);
}
.body-bottom .right .data-add-btn:disabled:hover, .body-bottom .right .data-add-btn:disabled.active {
  cursor: default;
  background: var(--pc-700);
  box-shadow: none;
}
.body-bottom .right .data-add-btn.active {
  background: var(--pc-900);
  box-shadow: 0 0 3px var(--pc-900);
}
.body-bottom .right .data-add-btn {
  padding: 0 10px;
}
@media (max-width: 768px) {
  .body-bottom .right {
    /* 桌機是 calc(100% - 270px)。選單浮起來之後右欄要吃滿 */
    width: 100%;
  }
}

/* 頂部nav icon */
.user {
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--pc-900);
}
.user .greeding {
  font-size: var(--text-lg);
  padding: 0 10px 0 10px;
}
.user .user-icon {
  font-size: 22pt;
}
.user .arror-icon {
  font-size: var(--text-base);
  margin-right: 15px;
}

.nav-user {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav-user .item:hover {
  background: var(--pc-500);
}
.nav-user .item {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px 20px;
}
.nav-user i {
  margin-right: 10px;
}

/* Bootstrap Table 類別切換Button */
.switch-group-block {
  background: rgba(51, 51, 51, 0.4392156863);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.8px solid rgba(237, 237, 237, 0.2274509804);
  height: 60px;
  padding: 10px 20px;
  border-radius: 10px;
  overflow: scroll;
  display: flex;
  align-items: center;
  /* 表格捲下去還要看得出在哪一個分頁。毛玻璃底本來就有，少了它捲上來的列會從字後面透出來 */
  position: sticky;
  top: var(--spacing-16);
  z-index: 2;
}
.switch-group-block .btn {
  cursor: pointer;
  width: auto;
  height: 30px;
  border: none;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--pc-700);
  color: var(--nc-50);
  font-weight: normal;
  padding: var(--spacing-12);
}
.switch-group-block .btn:hover {
  box-shadow: 0 0 5px var(--pc-700);
}
.switch-group-block .btn:disabled {
  /* 底色跟正常狀態同一階的按鈕不少，只靠變色分不出鎖住沒有，變淡才看得出來 */
  pointer-events: none;
  opacity: 0.4;
  background: var(--pc-700);
  color: var(--nc-400);
}
.switch-group-block .btn:disabled:hover, .switch-group-block .btn:disabled.active {
  cursor: default;
  background: var(--pc-700);
  box-shadow: none;
}
.switch-group-block .btn.active {
  background: var(--pc-900);
  box-shadow: 0 0 3px var(--pc-900);
}
.switch-group-block .btn {
  font-size: var(--text-sm);
  margin-right: 15px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .switch-group-block {
    /* 不讓開的話它捲到定位時整條埋進頂部列後面，而且層級遠低於它 */
    top: calc(var(--spacing-16) + 60px);
  }
}

.switch-group-scroll {
  width: 100px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.switch-group-scroll .icon-block {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: var(--pc-700);
  color: var(--nc-50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.switch-group-scroll .icon-block:hover {
  background: var(--pc-900);
  box-shadow: 0 0 4px var(--pc-700);
}

/* Bootstrap Table */
.bs-table {
  height: 100%;
  border-radius: var(--spacing-16);
  padding: var(--spacing-8) var(--spacing-16);
  overflow: scroll;
}
.bs-table.with-top {
  height: calc(100% - 50px - 10px);
}
.bs-table .table > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--nc-300);
}
.bs-table thead, .bs-table tbody {
  color: var(--nc-50) !important;
}
.bs-table thead {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  font-weight: bold;
}
.bs-table tbody tr {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  font-weight: medium;
  cursor: pointer;
}
.bs-table tbody tr:hover {
  background: rgba(210, 210, 210, 0.2392156863) !important;
}
.bs-table tbody tr.active {
  background: rgba(238, 238, 238, 0.1176470588);
}
.bs-table tbody .dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
.bs-table th > .th-inner, .bs-table td {
  padding: 15px !important;
}
.bs-table .table-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: var(--pc-500);
  color: var(--nc-50);
  padding: 10px;
}
.bs-table .table-button.edit {
  background: var(--pc-700);
}
.bs-table .table-button.edit.disable {
  background: var(--pc-400);
  cursor: no-drop;
}
.bs-table .table-button.delete, .bs-table .table-button.cancel {
  background: #D22525;
}
.bs-table .table-button.delete.disable, .bs-table .table-button.cancel.disable {
  background: #f97b7b;
  cursor: no-drop;
}
.bs-table .table-button i {
  color: var(--nc-50);
}
.bs-table .fixed-table-pagination {
  margin: 20px 5px;
}
.bs-table .page-item.active .page-link {
  background: var(--pc-800);
  color: white !important;
}
.bs-table .page-link {
  color: var(--nc-50) !important;
  border: none;
  background-color: transparent;
  padding: 8px 15px;
  border-radius: 5px;
}
.bs-table .page-item.disabled .page-link {
  background-color: transparent;
}
.bs-table .form-control {
  background: var(--nc-50) !important;
  border-radius: 100px;
  margin: 5px;
  border: none;
}

/* 這一條的選擇器從 body 起頭，塞不進任何一個 block，所以只有它留在檔尾 */
@media (max-width: 768px) {
  /* 背景鎖捲動不在這裡：那個屬性被彈窗用 inline style 佔著，css 規則永遠輸，改由 layout.js 處理 */
  body.--nav-open .body-bottom .left {
    transform: translateY(0);
    visibility: visible;
  }
}
/* 後台版型骨架：.frame-body / .body-top / .body-bottom */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 共用 */
/* 圖片上傳button */
.img-upload-btn {
  cursor: pointer;
  width: 60px;
  height: 25px;
  border: none;
  border-radius: 12.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--pc-800);
  color: var(--nc-50);
  font-weight: normal;
  padding: var(--spacing-12);
}
.img-upload-btn:hover {
  box-shadow: 0 0 5px var(--pc-800);
}
.img-upload-btn:disabled {
  /* 底色跟正常狀態同一階的按鈕不少，只靠變色分不出鎖住沒有，變淡才看得出來 */
  pointer-events: none;
  opacity: 0.4;
  background: var(--pc-700);
  color: var(--nc-400);
}
.img-upload-btn:disabled:hover, .img-upload-btn:disabled.active {
  cursor: default;
  background: var(--pc-700);
  box-shadow: none;
}
.img-upload-btn.active {
  background: var(--pc-900);
  box-shadow: 0 0 3px var(--pc-900);
}
.img-upload-btn {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
}

/* 多圖上傳 */
.img-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: var(--nc-50);
  border-radius: 4px;
  padding: 12px;
}
.img-list-wrap .img-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--nc-50);
  border: 1px solid var(--nc-300);
  border-radius: 8px;
  width: 100%;
  height: 44px;
  padding: 8px 12px;
}
.img-list-wrap .img-list img {
  width: 40px;
  border-radius: 4px;
}
.img-list-wrap .left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.img-list-wrap .right {
  cursor: move;
}
.img-list-wrap .del-icon {
  cursor: pointer;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--rc-500);
  color: var(--nc-50);
  font-weight: normal;
  padding: var(--spacing-12);
}
.img-list-wrap .del-icon:hover {
  box-shadow: 0 0 5px var(--rc-500);
}
.img-list-wrap .del-icon:disabled {
  /* 底色跟正常狀態同一階的按鈕不少，只靠變色分不出鎖住沒有，變淡才看得出來 */
  pointer-events: none;
  opacity: 0.4;
  background: var(--pc-700);
  color: var(--nc-400);
}
.img-list-wrap .del-icon:disabled:hover, .img-list-wrap .del-icon:disabled.active {
  cursor: default;
  background: var(--pc-700);
  box-shadow: none;
}
.img-list-wrap .del-icon.active {
  background: var(--pc-900);
  box-shadow: 0 0 3px var(--pc-900);
}

/* 放圖片的區域 */
.img-block {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--nc-50);
  color: var(--nc-600);
  font-weight: bolder;
  border: 1px dashed var(--nc-300);
  width: 100%;
  min-height: 200px;
  border-radius: 10px;
  padding: 20px;
}
.img-block .img-box {
  position: relative;
  display: flex;
  justify-content: center;
}
.img-block .del-icon-block {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: -10px;
  width: 23px;
  height: 23px;
  border-radius: 100%;
  color: var(--nc-50);
  background: #eb2323;
  cursor: pointer;
}
.img-block img {
  width: 90%;
}

/* 彈窗Tab切換Button */
.nav-pills {
  gap: 4px;
}
.nav-pills .nav-link {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
  color: var(--nc-50) !important;
  height: 50px;
  background: var(--nc-100);
}
.nav-pills .nav-link.active {
  color: var(--nc-50) !important;
  font-weight: bold;
  background: none !important;
  border-bottom: 2px solid var(--pc-300);
  border-radius: 0;
}
.nav-pills .nav-link:hover {
  color: var(--nc-800) !important;
  color: var(--pc-800);
  background: rgba(212, 212, 212, 0.4196078431) !important;
}

.tab {
  width: 100%;
}
.tab-container {
  cursor: pointer;
  background-color: var(--nc-200);
  color: var(--pc-700);
  border-radius: 18.5px;
  height: 37px;
  padding: 5px;
}
.tab-box {
  height: 100%;
  margin: 0 5px;
  position: relative;
  display: flex;
  align-items: center;
}
.tab-title {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--nc-900);
}
.tab-content {
  padding: var(--spacing-12) 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.tab-select {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 27px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 13.5px;
  background: var(--pc-900);
  color: var(--nc-400);
  transition: left 0.5s ease-out;
}

/* 設定管理員的頁面權限 /Admin/MemberManage/RoleAuth */
.page-block {
  width: 100%;
}
.page-block .page-title {
  display: flex;
  align-items: center;
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  width: 100%;
  height: 40px;
  background: var(--nc-100);
  border-radius: 5px;
  user-select: none;
  padding: 10px 20px;
}
.page-block:not(:has(.page-list)) .page-title:hover {
  cursor: pointer;
  background: var(--pc-400);
}
.page-block:not(:has(.page-list)) .page-title:active {
  background: var(--pc-500);
}
.page-block .page-list {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  margin: 10px 0;
  border-radius: 5px;
  user-select: none;
  cursor: pointer;
}
.page-block .page-list:hover {
  background: var(--pc-300);
}
.page-block .page-list:active {
  background: var(--pc-400);
}

/* 頁面設定 /Admin/SysSetting/Page */
.page-setting {
  background: rgba(51, 51, 51, 0.4392156863);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.8px solid rgba(237, 237, 237, 0.2274509804);
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  border-radius: 10px;
}
.page-setting .block {
  width: 100%;
  margin-bottom: 20px;
}
.page-setting .page {
  display: flex;
  justify-content: space-between;
  display: flex;
  align-items: center;
  cursor: default;
  padding: 10px 30px;
  border: 1px solid var(--pc-500);
  border-radius: 10px;
  margin: 0 0 20px 0;
}
.page-setting .page-list {
  width: 95%;
  float: right;
}
.page-setting .main-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: var(--pc-700);
  color: var(--pc-50);
  text-size: 15pt;
}
.page-setting .title {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  font-weight: bolder;
  color: var(--nc-800);
}
.page-setting .subtitle {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--pc-500);
}
.page-setting .add-icon {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--nc-50);
  border: 2px solid var(--pc-800);
  color: var(--pc-800);
  padding: var(--spacing-12);
  cursor: pointer;
}
.page-setting .add-icon:hover {
  box-shadow: 0 0 5px var(--pc-800);
}
.page-setting .add-icon:focus {
  border: 2px solid var(--pc-900);
  color: var(--pc-900);
}
.page-setting .add-icon:disabled {
  border: 2px solid var(--pc-700);
  color: var(--pc-600);
}
.page-setting .add-icon {
  cursor: pointer;
  color: var(--pc-700);
  border: 3px solid var(--pc-700);
}
.page-setting .memu-drawer {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin-left: 20px;
  border-radius: 5px;
}
.page-setting .memu-drawer:hover {
  box-shadow: 0 0 10px var(--pc-400);
}

/* 表單內容的樣式住在 form.scss 的 .form-block，彈窗與頁面表單都掛那個 class */
/* 左月曆右內容的頁面版面。行事曆管理與禁約時段設定共用。
   不掛 c- 前綴：它沒有統一的產出處，是兩支 View 各自手寫的骨架，不是元件 */
.calendar-layout {
  display: flex;
  gap: var(--spacing-16);
  align-items: flex-start;
  /* 手機改直排。align-items 要跟著換成 stretch，維持 flex-start 的話兩塊只會有內容寬、不是滿版 */
}
@media (max-width: 768px) {
  .calendar-layout {
    flex-direction: column;
    align-items: stretch;
  }
}
.calendar-layout__calendar {
  /* 各半是拍板的起始值，之後要調就動這兩行 */
  flex: 0 0 50%;
  min-width: 0;
  /* 捲動時停在視窗頂端，跟側邊選單同一個做法。
     上面那行 align-items: flex-start 不能拿掉，被拉成滿高就沒有可以 sticky 的餘裕 */
  position: sticky;
  top: var(--spacing-16);
  /* 直排之後 50% 量的是高度不是寬度，而釘住會把下面那塊擠出畫面，兩個都要收掉 */
}
@media (max-width: 768px) {
  .calendar-layout__calendar {
    flex: 0 0 auto;
    position: static;
  }
}
.calendar-layout__content {
  flex: 1 1 0;
  min-width: 0;
}
.calendar-layout {
  /* 讀取中與無資料共用這一格，兩者不會同時出現。
     撐高度是為了讓清單不要在讀完的瞬間往上跳 */
}
.calendar-layout__state {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-50) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

/* 一排幾格的方格容器。手寫在 view 裡、沒有統一的產出處，所以不掛 c- 前綴。
   名字刻意不寫死裝什麼——目前放時段格子，之後放別的一樣用得上 */
.cell-grid {
  display: grid;
  /* 彈窗寬 600px，一排四格。前台是整頁寬所以排得比較多 */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}

/* 只有行事曆的卡片在用，沒有統一的產出處，所以不掛 c- 前綴 */
.pay-dot {
  display: inline-block;
  /* 跟旁邊的方案名對齊。少了它球會坐在文字基線上、看起來往下沉 */
  vertical-align: middle;
  width: var(--spacing-12);
  height: var(--spacing-12);
  border-radius: var(--radius-100);
  margin-right: var(--spacing-8);
}
.pay-dot.--paid {
  background: var(--suc-500);
}
.pay-dot.--unpaid {
  background: var(--yc-500);
}

/* bootstrap 預設把說明文字置中，兩行以上讀起來像標語。
   bootstrap.min.css 掛在 site.css 後面，同分權重會輸，所以多包一層 */
.tooltip .tooltip-inner {
  text-align: left;
}

/* 後台元件與頁面區塊：圖片上傳、頁籤、權限維護、.calendar-layout、.cell-grid */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* ============================================================
   jump-window 彈窗
   ------------------------------------------------------------
   結構層（遮罩、定位、動畫）在這裡；每次開窗都不一樣的值
   （寬度、座標、配色）仍由 js/jump-window.js 以 inline style 給。
   判準：同一個值對所有彈窗都成立 → 寫這裡；隨呼叫端變 → 留 js。
   ============================================================ */
/* ---------- 1. 遮罩層 ---------- */
.js-jw-background {
  position: fixed;
  /* inset 而不是 width:100vw —— 100vw 不扣捲軸寬度，有垂直捲軸時會橫向溢出 */
  inset: 0;
}

/* ---------- 2. 彈窗變體 ----------
   這幾組值原本寫死在 utils.js 的四支包裝裡、每次開窗都當 inline style 寫上去，
   所以外部 CSS 永遠蓋不過。它們是「同一種彈窗都一樣」而不是「每次不同」，
   收進來之後 js 只剩真正會變的（寬度、座標）。
   ⚠️ 半透明疊層的色值沒辦法用不透明的色票階表示，維持字面值 */
/* dialog 用 */
/* toast 用，比 dialog 更暗 */
/* 白霧面 */
/* 抽屜白霧面，比上面略實 */
/* 深灰霧面 */
.jw-backdrop--dialog {
  background-color: rgba(0, 0, 0, 0.6392156863);
}

.jw-backdrop--toast {
  background-color: rgba(12, 10, 10, 0.6392156863);
}

/* drawer 與 menu 沒有遮罩，維持透明 */
.jw-main--dialog {
  background: rgba(51, 51, 51, 0.4392156863);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.8px solid rgba(237, 237, 237, 0.2274509804);
  border: 2px solid rgba(179, 179, 179, 0.2274509804);
  border-radius: var(--radius-24);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--nc-900);
  padding: 25px;
}
@media (max-width: 576px) {
  .jw-main--dialog {
    padding: 15px;
  }
}

.jw-main--toast {
  background-color: rgba(134, 134, 134, 0.6392156863);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-16);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1019607843);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  padding: 15px 20px;
}

.jw-main--drawer {
  background: rgba(51, 51, 51, 0.4392156863);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.8px solid rgba(237, 237, 237, 0.2274509804);
  border: 3px solid rgba(197, 197, 197, 0.1607843137);
  border-radius: var(--radius-16);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--spacing-8);
}
.jw-main--drawer__menu {
  color: var(--nc-50) !important;
  display: block;
  cursor: pointer;
  padding: var(--spacing-4);
  border-radius: var(--radius-4);
}
.jw-main--drawer__menu:hover {
  color: var(--nc-800) !important;
  background: var(--pc-200);
}

.jw-main--menu {
  background-color: rgba(255, 255, 255, 0.8196078431);
  border: 2px solid rgba(179, 179, 179, 0.1882352941);
  border-radius: var(--radius-16);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 0;
}

/* ---------- 3. 彈窗容器 ---------- */
.jw-main {
  position: absolute;
  box-sizing: border-box;
  /* auto 而不是 scroll，內容短時不留捲軸槽 */
  overflow-y: auto;
  user-select: text;
  max-height: 90%;
  /* 進場動畫。transform 的實際值由 js 給（要與呼叫端傳的 translate 疊加），
     這裡只定義過場曲線 */
}
.jw-main.is-anim-scale {
  transition: transform 0.25s ease;
}
.jw-main.is-anim-translate {
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
@media (max-width: 576px) {
  .jw-main .form-control {
    border-radius: var(--radius-8);
  }
}

/* ---------- 5. 彈窗專屬元素 ---------- */
.jw-main .btn-cancel {
  width: auto;
  height: 30px;
  border-radius: var(--radius-16);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--nc-50);
  border: 2px solid var(--pc-700);
  color: var(--pc-700);
  padding: var(--spacing-12);
  cursor: pointer;
}
.jw-main .btn-cancel:hover {
  box-shadow: 0 0 5px var(--pc-700);
}
.jw-main .btn-cancel:focus {
  border: 2px solid var(--pc-900);
  color: var(--pc-900);
}
.jw-main .btn-cancel:disabled {
  border: 2px solid var(--pc-700);
  color: var(--pc-600);
}
.jw-main .btn-cancel {
  font-size: var(--text-sm);
}
.jw-main .jw-close-icon {
  cursor: pointer;
  color: var(--pc-400) !important;
  font-size: var(--text-2xl);
}
.jw-main .jw-close-icon:hover {
  color: var(--pc-700);
}
@media (max-width: 576px) {
  .jw-main .main-title {
    font-size: var(--text-base) !important;
  }
}

/* ---------- 6. 確認窗 / 刪除窗 ---------- */
/* 整組原本是寫死在 js 裡的 inline style，吃不到色票 */
.jw-main .jw-ask {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.jw-main .jw-ask__icon {
  width: 50px;
  /* SVG 的 fill 是 currentColor，顏色由這裡決定 */
}
.jw-main .jw-ask__icon.is-delete {
  color: var(--rc-600);
}
.jw-main .jw-ask__icon.is-warn {
  color: var(--yc-400);
}
.jw-main .jw-ask__text {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
  text-align: center;
}
.jw-main .jw-ask__actions {
  display: flex;
  gap: 8px;
}
.jw-main {
  /* 只有「會造成後果」的那一顆是紅的，取消鈕收成中性灰 ——
     兩顆都紅的話一眼分不出哪個是危險動作 */
}
.jw-main .jw-ask-btn {
  cursor: pointer;
  width: 80px;
  height: 34px;
  border-radius: var(--radius-16);
  font-size: var(--text-sm);
}
.jw-main .jw-ask-btn.confirm {
  border: none;
  background: var(--rc-600);
  color: var(--nc-50);
}
.jw-main .jw-ask-btn.confirm:hover {
  background: var(--rc-500);
}
.jw-main .jw-ask-btn.cancel {
  background: var(--nc-50);
  border: 1px solid var(--nc-300);
  color: var(--nc-700);
}
.jw-main .jw-ask-btn.cancel:hover {
  background: var(--nc-100);
}

/* 彈窗自己的東西：遮罩、定位、動畫、變體（.jw-main）*/
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 表單控制項的邊框。四個地方共用，改配色只動這一行 */
.form-block {
  /* select2 的兩層都要列進來：底色吃在外框、文字色吃在裡面那層，
     lib 對 __rendered 另外寫了一條 color，只靠繼承會被它蓋掉 */
}
.form-block input, .form-block select, .form-block .img-block, .form-block textarea,
.form-block .select2-container--default .select2-selection--single,
.form-block .select2-container--default .select2-selection--single .select2-selection__rendered {
  background: var(--sc-950) !important;
  color: var(--nc-50) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  border: 1px solid var(--nc-600) !important;
}
.form-block .main-title, .form-block .input-content {
  color: var(--nc-50) !important;
}
.form-block hr {
  background: var(--nc-50) !important;
  opacity: 1;
}
.form-block .main-title {
  font-size: var(--text-xl) !important;
  line-height: var(--text-xl--line-height);
  font-weight: bold;
}
.form-block .input-title {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  color: var(--nc-300) !important;
}
.form-block .input-content {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
}
.form-block {
  /* mixin 已含 hover / disabled / active，這裡不要再寫一次。
     padding 不走 pd-x / pd-y —— 那兩支各自輸出完整簡寫又帶 !important，一起用會互相蓋掉 */
}
.form-block .btn-add, .form-block .btn-confirm {
  cursor: pointer;
  width: auto;
  height: 30px;
  border: none;
  border-radius: var(--radius-16);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--pc-700);
  color: var(--nc-50);
  font-weight: normal;
  padding: var(--spacing-12);
}
.form-block .btn-add:hover, .form-block .btn-confirm:hover {
  box-shadow: 0 0 5px var(--pc-700);
}
.form-block .btn-add:disabled, .form-block .btn-confirm:disabled {
  /* 底色跟正常狀態同一階的按鈕不少，只靠變色分不出鎖住沒有，變淡才看得出來 */
  pointer-events: none;
  opacity: 0.4;
  background: var(--pc-700);
  color: var(--nc-400);
}
.form-block .btn-add:disabled:hover, .form-block .btn-add:disabled.active, .form-block .btn-confirm:disabled:hover, .form-block .btn-confirm:disabled.active {
  cursor: default;
  background: var(--pc-700);
  box-shadow: none;
}
.form-block .btn-add.active, .form-block .btn-confirm.active {
  background: var(--pc-900);
  box-shadow: 0 0 3px var(--pc-900);
}
.form-block .btn-add, .form-block .btn-confirm {
  padding: 2px 15px;
  font-size: var(--text-sm);
}
.form-block {
  /* select2 顏色以外的事。它生的是 div 不是 input，高度與垂直置中要自己給，
     不給的話同一列裡它會比隔壁的輸入框矮一截 */
}
.form-block .select2-container--default .select2-selection--single {
  height: 35px !important;
  border: 1px solid var(--nc-600) !important;
}
.form-block .select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex !important;
  align-items: center;
  height: 100% !important;
}
.form-block .select2-container--default .select2-selection--single {
  /* 沒選東西時的提示字要比選好的值淡，不然分不出「已選」與「還沒選」 */
}
.form-block .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--nc-400) !important;
}
.form-block .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
}
.form-block {
  /* 多選。目前後台四個下拉都是單選，這段沒有呼叫端 */
}
.form-block .select2-container--default .select2-selection--multiple {
  background: var(--sc-950) !important;
  border: 1px solid var(--nc-600) !important;
}
.form-block .select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: var(--nc-50) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  background-color: var(--pc-600) !important;
  border: 1px solid var(--pc-600) !important;
  border-radius: var(--radius-8) !important;
  padding: 7px 10px !important;
  margin-top: 10px !important;
  margin-right: 10px !important;
}
.form-block .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--nc-50) !important;
  margin-right: 5px !important;
}
.form-block .select2-container .select2-search--inline .select2-search__field {
  margin-top: 9px !important;
  /* 複選的搜尋框是真的 input，會吃到上面那條裸 input 的邊框與底色，變成框裡再一個框 */
  border: none !important;
  background: transparent !important;
}

/* 展開的選單面板由 select2 掛在 body 底下，不在 .form-block 裡面，
   收進去就吃不到，只能單獨寫一份 */
.select2-dropdown {
  background: var(--sc-950) !important;
  border: 1px solid var(--nc-600) !important;
}

.select2-results__option {
  color: var(--nc-50) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
}

/* 已經選過的那一項。lib 預設是 #ddd 淺灰底，深色底上會變成一塊反灰。
   要排在 --highlighted 前面：兩條權重相同，靠先後決勝，放後面會蓋掉 hover */
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--pc-400) !important;
}

/* 游標所在那一項。lib 預設是淺藍配白字，深色底上會刺眼 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--pc-700) !important;
}

.select2-search--dropdown .select2-search__field {
  background: var(--sc-950) !important;
  color: var(--nc-50) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  border: 1px solid var(--nc-600) !important;
}

/* 後台表單內容的字級與配色（.form-block），彈窗與頁面共用 */
/* 共用元件。命名照前台慣例：c- 前綴 + BEM，一支檔一個元件 */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 一筆資料一張卡 — 彈窗或頁面裡「一列一筆、寬度滿版」的清單
 *
 * 用在「一筆主資料底下還會掛東西」的地方：會員詳細的預約紀錄、
 * 售後額度底下的售後紀錄、訂單底下的退款單。表格塞不下、
 * 而 renderInfoRow 那種 label/value 兩欄也裝不了兩層文字。
 *
 * 用法：
 *   <div class="c-data-card">
 *       <div class="c-data-card__title">BK20260813001</div>
 *       <div class="c-data-card__sub">2026/08/13　已完成</div>
 *   </div>
 *
 * 🔴 基本款是純顯示、不可點。可點的那種要自己是 <a> 並加 --clickable，
 *    不要直接在這層掛 cursor:pointer —— 看起來可點但點了沒反應，
 *    比不可點更糟。同一份清單裡兩種會並存（會員的預約紀錄就是），
 *    所以差異一定要看得出來，不能只靠游標。
 */
.c-data-card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-data-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(51, 51, 51, 0.4392156863);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.8px solid rgba(237, 237, 237, 0.2274509804);
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--nc-200);
  border-radius: var(--spacing-12);
}
.c-data-card__title, .c-data-card__sub {
  color: var(--nc-50) !important;
}
.c-data-card__title {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
}
.c-data-card__sub {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
}
.c-data-card {
  /* 卡片自己的操作鈕（開 jwDrawer 的那顆 ⋯）。
     長相跟表格的 .table-button 一樣，但那支寫在 .bs-table 底下，
     卡片在彈窗裡沒有那個祖先、一條都吃不到，所以這裡自己來一份 */
}
.c-data-card__action {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: var(--pc-500);
  cursor: pointer;
}
.c-data-card__action i {
  color: var(--nc-50);
}
.c-data-card--clickable {
  /* 可點的那種。<a> 的底線要壓掉，否則整張卡變成一坨藍色連結 */
  cursor: pointer;
  text-decoration: none;
}
.c-data-card--clickable:hover {
  border-color: var(--pc-500);
}

/* .c-data-card 一筆資料一張卡 */
/* 配 js/admin-calendar.js。scss 原始檔一律留在這裡，
   放進 lib/ 的話 sass 的來源目錄掃不到、永遠編不出 css */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 照前台 _calendar.scss 抄，--ac-* 換成後台的 --pc-*，圖例整段拿掉（後台沒有不可預約這個狀態） */
.c-calendar {
  background: rgba(51, 51, 51, 0.4392156863);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.8px solid rgba(237, 237, 237, 0.2274509804);
  width: 100%;
  border-radius: var(--radius-16);
  overflow: hidden;
  border: 1px solid var(--nc-200);
}
.c-calendar__header {
  background: var(--sc-950) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-16);
  border: 0;
}
.c-calendar__month {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg--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 {
  color: var(--nc-50) !important;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.c-calendar__nav:hover {
  color: var(--pc-300);
}
.c-calendar__body {
  padding: var(--spacing-16);
}
.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(--pc-300);
}
.c-calendar__day {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  min-height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-8);
  background: transparent;
  color: var(--nc-50);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.c-calendar__day:hover {
  border-color: var(--pc-300);
}
.c-calendar__day {
  /* 補位用的上下月格子，點不到也不該搶注意力 */
}
.c-calendar__day.--other-month {
  color: var(--nc-600);
  cursor: default;
}
.c-calendar__day.--other-month:hover {
  border-color: transparent;
}
.c-calendar__day.--today {
  border-color: var(--pc-500);
}
.c-calendar__day {
  /* 一定要放在 --today 後面，兩者權重相同、寫前面會被它的框蓋掉 */
}
.c-calendar__day.--selected {
  background: var(--pc-300);
  border-color: var(--pc-300);
  color: var(--nc-800) !important;
}
@media (max-width: 576px) {
  .c-calendar__body {
    padding: var(--spacing-16) var(--spacing-4);
  }
  .c-calendar__day {
    min-height: 44px;
  }
}

/* .c-calendar 月曆 */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 一顆時段格子。markup 的唯一出處是 Views/Shared/_TimeSlot.cshtml，
   兩個專案都是把它放進 <template> 再由 js 複製、填值 */
.c-time-slot {
  width: 100%;
  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-width: 80px;
  min-height: 56px;
  padding: var(--spacing-8) var(--spacing-4);
  border: 1px solid var(--pc-300);
  border-radius: var(--radius-8);
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.c-time-slot__body:hover {
  background: var(--pc-50);
}
@media (max-width: 576px) {
  .c-time-slot__body:hover {
    background: none;
  }
}
.c-time-slot__time {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--pc-300);
}
.c-time-slot__note {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
  color: var(--pc-300);
}
.c-time-slot {
  /* 沒有註記時 span 還在，空殼會多佔一道 gap 讓時間往上跑 */
}
.c-time-slot__note:empty {
  display: none;
}
.c-time-slot {
  /* 選取：實心底、深字 */
}
.c-time-slot .c-time-slot__input:checked + .c-time-slot__body {
  background: var(--pc-300);
  border-color: var(--pc-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(--pc-200);
  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 後面，兩者權重相同、寫前面會被刷回透明 */
}
.c-time-slot.--in-range .c-time-slot__body {
  background: var(--pc-300);
  border-color: var(--pc-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(--pc-300);
}
.c-time-slot {
  /* 點亮。營業時間頁是「有開」，禁約頁是「關掉」，同一個黃色語意由頁面決定 */
}
.c-time-slot.--on .c-time-slot__body {
  background: var(--yc-400);
  border-color: var(--yc-400);
}
.c-time-slot.--on .c-time-slot__body .c-time-slot__time {
  color: var(--nc-800) !important;
}
.c-time-slot.--on .c-time-slot__body .c-time-slot__note {
  color: var(--nc-800) !important;
}
.c-time-slot.--on {
  /* 不重寫一次的話游標移過去會被上面的 :hover 刷回 --pc-50，看不出自己點到哪 */
}
.c-time-slot.--on:hover .c-time-slot__body {
  background: var(--yc-400);
}
.c-time-slot {
  /* 加價時段。一定要放在 --on 後面，加價的格子開著要顯示橘色而不是一般的黃色 */
}
.c-time-slot.--marked .c-time-slot__body {
  border-color: var(--yc-600);
  /* 關掉之後金額照樣要看得到，不然老師不知道打開這段會加價 */
}
.c-time-slot.--marked .c-time-slot__body .c-time-slot__note {
  color: var(--nc-500) !important;
}
.c-time-slot.--marked.--on .c-time-slot__body {
  background: var(--yc-600);
}
.c-time-slot.--marked.--on .c-time-slot__body .c-time-slot__time {
  color: var(--nc-800) !important;
}
.c-time-slot.--marked.--on .c-time-slot__body .c-time-slot__note {
  color: var(--nc-800) !important;
}
.c-time-slot.--marked.--on:hover .c-time-slot__body {
  background: var(--yc-600);
}
.c-time-slot {
  /* 營業時間後來改掉、禁約卻還留著的格子。放最後，它要蓋掉 --on 的黃底 */
}
.c-time-slot.--stale .c-time-slot__body {
  background: transparent;
  border-color: var(--nc-500);
  border-style: dashed;
}
.c-time-slot.--stale .c-time-slot__body .c-time-slot__time {
  color: var(--nc-500) !important;
}
.c-time-slot.--stale .c-time-slot__body .c-time-slot__note {
  color: var(--nc-500) !important;
}
.c-time-slot.--stale:hover .c-time-slot__body {
  background: transparent;
}

/* .c-time-slot 一顆時段格子，配 _TimeSlot.cshtml */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 一格統計 — 一個大數字配一行說明
 *
 * 用在首頁瀏覽紀錄頁上方那排（今天／本月／最近 30 天）。
 * 跟 c-data-card 的差別：那個是「一列一筆資料」，這個是「一個算出來的數字」。
 *
 * 用法：
 *   <div class="c-stat-tile-row">
 *       <div class="c-stat-tile glass-background">
 *           <div class="c-stat-tile__label">今天</div>
 *           <div class="c-stat-tile__main">320 次</div>
 *           <div class="c-stat-tile__sub">來自 87 個訪客</div>
 *       </div>
 *   </div>
 */
.c-stat-tile-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-16);
  /* 專案沒有 mobile 混成器，既有的 _admin-calendar.scss 也是直接寫 media query */
}
@media (max-width: 576px) {
  .c-stat-tile-row {
    grid-template-columns: 1fr;
  }
}

.c-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--spacing-16);
  border: 1px solid var(--nc-200);
  border-radius: var(--spacing-12);
}
.c-stat-tile__label {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--nc-200);
}
.c-stat-tile__main {
  font-size: var(--text-2xl) !important;
  line-height: var(--text-2xl--line-height);
  font-weight: bold;
  color: var(--nc-50) !important;
}
.c-stat-tile__sub {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  color: var(--nc-200);
}

.c-stat-chart {
  /* Chart.js 的 canvas 沒有固定高度會一路撐開，配 maintainAspectRatio: false 用 */
  height: 280px;
  padding: var(--spacing-16);
  margin-bottom: var(--spacing-16);
  border: 1px solid var(--nc-200);
  border-radius: var(--spacing-12);
}

/* .c-stat-tile 一個算出來的數字 */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 漢堡按鈕與側邊選單的長相。markup 在 Views/Shared/_Hamburger.cshtml／_SidePage.cshtml，開合在 wwwroot/js/layout.js */
.c-hamb {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-4);
  /* 圖形尺寸，不走間距刻度 */
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.c-hamb__bar {
  background: var(--nc-50) !important;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-4);
  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

/* 斷點與 frame.scss 的手機規則同一個數字；選單怎麼滑是 .left 的事，這裡只管長相 */
@media (max-width: 768px) {
  .c-hamb {
    display: flex;
  }
  /* 三條線的中心相距 6px，上下兩條各往中間移 6px 再轉 45 度就疊成叉叉 */
  body.--nav-open .c-hamb__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.--nav-open .c-hamb__bar:nth-child(2) {
    opacity: 0;
  }
  body.--nav-open .c-hamb__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}
/* 側邊欄 */
.c-sidemenu-block {
  background: rgba(51, 51, 51, 0.4392156863);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.8px solid rgba(237, 237, 237, 0.2274509804);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  border-radius: var(--radius-32);
  padding: var(--spacing-32) var(--spacing-20);
  height: 100%;
  /* 選單超過一個螢幕時在卡片內部捲，捲軸 util.scss 已全域隱藏、視覺上不會多一條 */
  max-height: calc(100svh - var(--spacing-32));
  overflow-y: auto;
  /* 滿版時是一整面牆，內部捲動上限不要 */
}
@media (max-width: 768px) {
  .c-sidemenu-block {
    max-height: none;
    min-height: 100%;
    border-radius: var(--spacing-32);
  }
}

.c-sidemenu .block {
  cursor: pointer;
}
.c-sidemenu .mainlist {
  padding: var(--spacing-8) var(--spacing-12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--nc-900);
  border-radius: var(--radius-4);
}
.c-sidemenu .mainlist:hover {
  background: rgba(250, 245, 255, 0.1764705882);
}
.c-sidemenu .mainlist.active {
  background: rgba(250, 245, 255, 0.2823529412);
}
.c-sidemenu .mainlist.active .text-block, .c-sidemenu .mainlist.active .icon-arror {
  color: var(--nc-800);
}
.c-sidemenu .mainlist .text-block {
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}
.c-sidemenu .mainlist .icon-main {
  color: var(--pc-400) !important;
  width: 25px;
  display: flex;
  justify-content: center;
  font-size: 15px;
}
.c-sidemenu .mainlist .text {
  color: var(--nc-50);
}
.c-sidemenu .mainlist .icon-arror {
  font-size: 13px;
  color: var(--nc-50);
}
.c-sidemenu .sublist {
  display: none;
  overflow: hidden;
  color: var(--nc-400);
}
.c-sidemenu .sublist .subtext {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  /* util.scss 有 a{color:black !important}，這裡不加 !important 會被蓋成黑字 */
  color: var(--nc-300) !important;
}
.c-sidemenu .sublist .subtext:hover {
  /* 同 .subtext：不加 !important 會被 util.scss 的 a 蓋成黑字 */
  color: var(--nc-400) !important;
  padding: var(--spacing-8) var(--spacing-32);
}
.c-sidemenu .sublist .subtext {
  display: block;
  transition-property: padding;
  transition-duration: 0.6s;
  padding: var(--spacing-8) var(--spacing-20);
  overflow: hidden;
}

/* .c-hamb 漢堡按鈕 ＋ .c-sidemenu-block／.c-sidemenu 側邊選單 */
/* 一頁一支的版面。只有這一頁在用的東西寫這裡，不要往 admin.scss 疊 */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 讀取失敗那行紅字。不比內文小一階的話會跟旁邊的說明混在一起 */
.week-hint {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
  color: var(--nc-400);
  margin-top: var(--spacing-8);
}

/* 營業時間設定頁的七欄格子牆。一顆按鈕的皮在 components/_timeslot.scss，這裡只管怎麼排 */
.week-grid {
  display: flex;
  gap: var(--spacing-8);
  width: 100%;
}
.week-grid__col {
  color: var(--nc-50) !important;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  flex: 1 1 0;
  min-width: 0;
}
.week-grid {
  /* 捲到下午還要看得出這一欄是星期幾。黏的是視窗，
     所以上緣要對齊側邊選單那一階，不然它會貼到瀏覽器最頂 */
}
.week-grid__head {
  background: rgba(51, 51, 51, 0.4392156863);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.8px solid rgba(237, 237, 237, 0.2274509804);
  position: sticky;
  top: var(--spacing-16);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) 0;
  border-radius: var(--radius-4);
}
.week-grid__slots {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
@media (max-width: 768px) {
  .week-grid {
    /* 七欄各自照內容撐開、不再被壓扁，總寬超過畫面才有得左右捲 */
    width: max-content;
  }
  .week-grid__col {
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  .week-grid-scroll {
    /* 只給 X。給了高度上限就變成一個框，牆會佔滿畫面、擠到下面的內容 */
    overflow-x: auto;
  }
}

/* .week-grid 營業時間設定的七欄格子牆 */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 月曆右邊那行「哪一天的禁約時段」。導覽鈕關掉之後，這是唯一看得出在編哪天的地方 */
.day-title {
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
  font-weight: bold;
  margin: var(--spacing-16) 0 var(--spacing-8);
}

/* 說明小字。不比內文小一階的話會跟格子牆黏成一片 */
.day-hint {
  font-size: var(--text-xs) !important;
  line-height: var(--text-xs--line-height);
  color: var(--nc-400);
  margin-top: var(--spacing-8);
}

/* 禁約時段設定頁的格子牆。排法走 bootstrap 的 row / col，這裡不需要再寫，
   自己用 flex 排會撞到 .c-time-slot 的 width: 100%、每顆各佔一整行 */
/* .day-picker 禁約時段設定的格子牆 */
/* 後台樣式聚合入口 —— 編出 wwwroot/css/site.css
   新增功能 scss 後要回來加一行 @use，否則不會被編譯。
   （login.scss 不在這裡：登入頁 Layout = null、自己編一支 login.css） */
/* 取 glass-background 的底與框，不取它的 backdrop-filter —— 彈窗外層已經 blur 過一次，框裡再 blur 是疊在同一張背景上，只會變糊不會變深 */
/* 動作區的排版：左邊說明、右邊按鈕。抽出來是因為複製兩份的話改一邊就歪 */
/* 退費彈窗的分區框。各區各自關起來，人才分得出「這一顆會動到錢」與「這一區只是改紀錄」 */
.refund-zone {
  background: rgba(51, 51, 51, 0.4392156863);
  border: 1.8px solid rgba(237, 237, 237, 0.2274509804);
  border-radius: var(--radius-8);
  padding: var(--spacing-12);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}
.refund-zone--ecpay, .refund-zone--manual {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* 按鈕不准被左邊的說明擠掉 —— 「改用人工匯款」五個字斷成兩行就不像一顆按鈕了 */
}
.refund-zone--ecpay > :last-child, .refund-zone--manual > :last-child {
  flex: none;
}
.refund-zone--ecpay, .refund-zone--manual {
  background: rgba(30, 58, 40, 0.4392156863);
  border-color: var(--suc-900);
}
.refund-zone__textblock {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.refund-zone__title {
  color: var(--nc-50) !important;
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height);
  font-weight: bold;
}
.refund-zone__subtitle {
  color: var(--nc-400) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height);
}
.refund-zone__btn {
  background: var(--suc-700) !important;
}
.refund-zone__btn:hover {
  box-shadow: 0 0 4px var(--suc-500) !important;
}

/* .refund-zone 退費管理彈窗的分區框 */