/* 載入本地端的 Material Symbols 圖示字型 */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

/* 圖示的基礎設定 */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}




/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800; /* 合併多個粗細宣告，寫這一行就夠了 */
  src: url('../fonts/plusjakartasans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  src: url('../fonts/plusjakartasans-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  src: url('../fonts/plusjakartasans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  src: url('../fonts/plusjakartasans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================
   assets/css/2026MainStyle.css
   2026 Tailwind Static Export & Custom Utilities
========================================= */

/* =========================================
   1. CSS Reset & Variables (Tailwind Preflight)
========================================= */
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:;
}

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

::before, ::after {
    --tw-content: '';
}

html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    line-height: inherit;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b, strong {
    font-weight: bolder;
}

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button, select {
    text-transform: none;
}

button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

:-moz-focusring {
    outline: auto;
}

:-moz-ui-invalid {
    box-shadow: none;
}

progress {
    vertical-align: baseline;
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
}

[type='search'] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

summary {
    display: list-item;
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

ol, ul, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

dialog {
    padding: 0;
}

textarea {
    resize: vertical;
}

    input::-moz-placeholder, textarea::-moz-placeholder {
        opacity: 1;
        color: #9ca3af;
    }

    input::placeholder, textarea::placeholder {
        opacity: 1;
        color: #9ca3af;
    }

button, [role="button"] {
    cursor: pointer;
}

:disabled {
    cursor: default;
}

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}

img, video {
    max-width: 100%;
    height: auto;
}

[hidden]:where(:not([hidden="until-found"])) {
    display: none;
}

/* =========================================
   2. Layout & Positioning (排版與定位)
========================================= */
.pointer-events-none {
    pointer-events: none;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-0 {
    inset: 0px;
}

.left-0 {
    left: 0px;
}

.left-4 {
    left: 1rem;
}

.right-0 {
    right: 0px;
}

.right-4 {
    right: 1rem;
}

.top-0 {
    top: 0px;
}

.top-1\/2 {
    top: 50%;
}

.z-10 {
    z-index: 10;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.z-\[45\] {
    z-index: 45;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Margins */
.-mt-12 {
    margin-top: -3rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mb-16 {
    margin-bottom: 4rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}
.ml-3 {
    margin-left: 0.75rem;
}

.ml-4 {
    margin-left: 1rem;
}

.ml-5 {
    margin-left: 1.25rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-16 {
    margin-top: 4rem;
}

/* Display & Flex/Grid */
.block {
    display: block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.grid {
    display: grid;
}

.hidden {
    display: none !important;
}

.flex-1 {
    flex: 1 1 0%;
}

.shrink-0 {
    flex-shrink: 0;
}

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

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

.items-start {
    align-items: flex-start;
}

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

.items-stretch {
    align-items: stretch;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

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

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Gaps & Spacing */
.gap-1 {
    gap: 0.25rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

/* =========================================
   3. Sizing (寬度與高度)
========================================= */
/* Heights */
.h-1 {
    height: 0.25rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.h-10 {
    height: 2.5rem;
}

.h-12 {
    height: 3rem;
}

.h-16 {
    height: 4rem;
}

.h-20 {
    height: 5rem;
}

.h-\[1px\] {
    height: 1px;
}

.h-\[2px\] {
    height: 2px;
}

.h-\[400px\] {
    height: 400px;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.min-h-screen {
    min-height: 100vh;
}

/* Widths */
.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.w-10 {
    width: 2.5rem;
}

.w-12 {
    width: 3rem;
}

.w-16 {
    width: 4rem;
}

.w-20 {
    width: 5rem;
}

.w-24 {
    width: 6rem;
}

.w-36 {
    width: 9rem;
}

.w-48 {
    width: 12rem;
}

.w-60 {
    width: 15rem;
}

.w-66 {
    width: 16.5rem;
}

.w-72 {
    width: 18rem;
}

/*.w-50percent {
    width: 50%;
}

.w-65percent {
    width: 65%;
}

.w-70percent {
    width: 70%;
}*/

.w-\[110px\] {
    width: 110px !important;
}

.w-full {
    width: 100%;
}

.max-w-7xl {
    max-width: 80rem;
}

.max-w-\[1600px\] {
    max-width: 1600px;
}

.max-w-\[200px\] {
    max-width: 200px;
}

.max-w-\[350px\] {
    max-width: 350px;
}

.max-w-\[500px\] {
    max-width: 500px;
}

.max-w-300 {
    max-width: 300px;
}

.max-w-500 {
    max-width: 500px;
}

/* =========================================
   MaxWidths (最大寬度補充) 
========================================= */
.max-w-xs {
    max-width: 20rem !important; /* 320px */
}

.max-w-sm {
    max-width: 24rem !important; /* 384px */
}

.max-w-md {
    max-width: 28rem !important; /* 448px */
}

.max-w-lg {
    max-width: 32rem !important; /* 512px */
}

.max-w-xl {
    max-width: 36rem !important; /* 576px */
}

.w-max {
    width: max-content !important;
}

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

/* =========================================
   補齊前台登入佈局遺漏的靜態 Tailwind 類別
========================================= */
.max-w-\[1100px\] {
    max-width: 1290px !important;
}

@media (min-width: 1024px) {
    .lg\:flex {
        display: flex !important;
    }
}

/* =========================================
   4. Padding (內距)
========================================= */
.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-8 {
    padding: 2rem;
}

.pl-6 {
    padding-left: 1.5rem; /* 相當於 24px */
}

.pl-6-i {
    padding-left: 1.5rem!important; 
}

.pl-12-i {
    padding-left: 3rem !important;
}

.pl-18-i {
    padding-left: 4.5rem !important;
}

.pl-24-i {
    padding-left: 6rem !important;
}

.pl-26-i {
    padding-left: 6.5rem !important;
}

.pl-28-i {
    padding-left: 7rem !important;
}

.pl-29-i {
    padding-left: 7.25rem !important;
}

.pl-30-i {
    padding-left: 7.5rem !important;
}

.pl-36-i {
    padding-left: 9rem !important;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pb-20 {
    padding-bottom: 5rem;
}

.pl-1 {
    padding-left: 0.25rem;
}

.pl-2 {
    padding-left: 0.5rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-12 {
    padding-left: 3rem;
}

.pr-4 {
    padding-right: 1rem;
}

.pr-12 {
    padding-right: 3rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-8 {
    padding-top: 2rem;
}

.pt-12 {
    padding-top: 3rem;
}

.pt-16 {
    padding-top: 4rem;
}

.pt-20 {
    padding-top: 5rem;
}

.pt-24 {
    padding-top: 6rem;
}

.pt-28 {
    padding-top: 7rem;
}

/* =========================================
   5. Borders & Radius (邊框與圓角)
========================================= */
/* Radius */
.rounded-md {
    border-radius: 0.375rem;
}

.rounded-lg {
    border-radius: 0.75rem;
}

.rounded-xl {
    border-radius: 1rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-\[2rem\] {
    border-radius: 2rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* Border Width */
.border {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-3 {
    border-width: 3px;
}

.border-4 {
    border-width: 4px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-l-4 {
    border-left-width: 4px;
}

.border-r-4 {
    border-right-width: 4px;
}

.border-t {
    border-top-width: 1px;
}

.border-t-8 {
    border-top-width: 8px;
}

.border-none {
    border-style: none;
}

/* Divide */
.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-surface-container-low > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(245 243 243 / var(--tw-divide-opacity, 1));
}

/* =========================================
   6. Colors (Backgrounds, Text, Borders)
========================================= */
/* Backgrounds */
.bg-background {
    --tw-bg-opacity: 1;
    background-color: rgb(251 249 249 / var(--tw-bg-opacity, 1));
}

.bg-black\/50 {
    background-color: rgb(0 0 0 / 0.5);
}

.bg-neutral-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(0 101 142 / var(--tw-bg-opacity, 1));
}

.bg-primary-container {
    --tw-bg-opacity: 1;
    background-color: rgb(0 161 224 / var(--tw-bg-opacity, 1));
}

/* 補齊遺失的 Secondary 背景色 */
.bg-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(142 62 145 / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary\/90:hover {
    background-color: rgb(142 62 145 / 0.9);
}

.bg-sky-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}

.bg-surface {
    --tw-bg-opacity: 1;
    background-color: rgb(251 249 249 / var(--tw-bg-opacity, 1));
}

.bg-surface-container-highest {
    --tw-bg-opacity: 1;
    background-color: rgb(227 226 226 / var(--tw-bg-opacity, 1));
}

.bg-surface-container-low {
    --tw-bg-opacity: 1;
    background-color: rgb(245 243 243 / var(--tw-bg-opacity, 1));
}

.bg-surface-container-lowest {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-surface-variant {
    --tw-bg-opacity: 1;
    background-color: rgb(227 226 226 / var(--tw-bg-opacity, 1));
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/80 {
    background-color: rgb(255 255 255 / 0.8);
}

/* 🔴 錯誤與危險 (Error / Red) - 用於刪除、失敗、嚴重警告 */
.bg-error {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); /* Tailwind red-600 */
}

.bg-error-light {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / 0.8); 
}

.hover\:bg-error\/90:hover {
    background-color: rgb(220 38 38 / 0.9);
}

.bg-error-container {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); /* 淺紅底色，用於錯誤訊息框 */
}

.bg-error-container\/20 {
    background-color: rgba(220, 38, 38, 0.08) !important; /* 柔和的紅底，用於停用狀態列表 */
}

/* 🟢 成功與啟用 (Success / Green) - 用於儲存成功、啟用狀態、通過 */
.bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); /* Tailwind green-600 */
}

.hover\:bg-green-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.bg-green-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); /* 淺綠底色，用於成功訊息框 */
}

/* 🟠 提醒與待辦 (Warning / Orange) - 用於待處理、警告、注意 */
.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1)); /* Tailwind orange-500 */
}

.hover\:bg-orange-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1)); /* 淺橘底色，用於 Kickout 提醒或注意事項 */
}

/* 🌺 第三輔助色 (Tertiary) - 0410 規範中的紫紅色，用於卡片的三色循環 */
.bg-tertiary {
    --tw-bg-opacity: 1;
    background-color: rgb(188 0 75 / var(--tw-bg-opacity, 1));
}

.hover\:bg-tertiary\/90:hover {
    background-color: rgb(188 0 75 / 0.9);
}

/* 🔘 實用的灰底透色 (Neutral Alpha) - 用於按鈕 Hover 或斑馬紋表格 */
.bg-neutral-900\/5 {
    background-color: rgb(23 23 23 / 0.05);
}

.bg-neutral-900\/10 {
    background-color: rgb(23 23 23 / 0.1);
}

/*
顏色實戰應用情境：
.bg-error：當你想要做一個醒目的「確認刪除」按鈕時可以用 (bg-error text-white)。
.bg-green-600：這是一顆標準的「成功/通過」按鈕。
.bg-error-container 與 .bg-green-50：這兩種顏色最適合拿來當作「整塊的提示訊息背板」，因為底色夠淺，裡面的字用深色讀起來會非常舒服！
.bg-neutral-900/5：這是一個帶有 5% 透明度的黑底，超級適合用來做「列表滑過 (hover:bg-neutral-900/5)」的效果，它會自動疊加在任何背景上產生微暗的變化，視覺質感滿分！
*/

/* Gradients */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

/* 🟠 Amber (黃橘色系 - 用於測試按鈕) */
.bg-amber-500 {
    background-color: #f59e0b !important;
}

.hover\:bg-amber-600:hover {
    background-color: #d97706 !important;
}

/* 如果未來會用到文字顏色，也順便補上 */
.text-amber-500 {
    color: #f59e0b !important;
}

/* =========================================
   補齊 CertificateDashboard.cshtml 缺失的顏色類別
========================================= */

/* --- 藍色系 (用於下載模板按鈕) --- */
.bg-blue-50 {
    background-color: #eff6ff !important;
}

.text-blue-700 {
    color: #1d4ed8 !important;
}

.border-blue-200 {
    border-color: #bfdbfe !important;
}

.hover\:bg-blue-100:hover {
    background-color: #dbeafe !important;
}

/* --- 紅色系 (用於錯誤提示底色與邊框) --- */
/* 補齊 bg-error-container/10 與 /50 的變體 */

/* 擴充 Tailwind 紅色系輔助色 */
.bg-red-50 {
    background-color: #fef2f2;
}

.text-red-600 {
    color: #dc2626;
}

.bg-error-container\/10 {
    background-color: rgba(220, 38, 38, 0.1) !important;
}

.bg-error-container\/50 {
    background-color: rgba(220, 38, 38, 0.5) !important;
}

/* 確保 error 邊框的透明度顯示正確 */
.border-error\/20 {
    border-color: rgba(220, 38, 38, 0.2) !important;
}

.text-error {
    color: #dc2626 !important;
}

.btn-comp {
    background-color: #FFB860;
    color: #ffffff;
}

    .btn-comp:hover {
        background-color: #ff9257;
        color: #ffffff;
    }

.btn-disp {
    background-color: #59ccd5;
    color: #ffffff;
}

    .btn-disp:hover {
        background-color: #0d8089;
        color: #ffffff;
    }


/* =========================================
   補齊 0410 報表統計與 Excel 匯出專屬擴充
========================================= */

/* --- 1. 統計頁面 (Statistics) 顏色區塊支援 --- */
.bg-cyan-50\/50 {
    background-color: rgba(6, 182, 212, 0.08) !important;
}

.bg-amber-50\/50 {
    background-color: rgba(245, 158, 11, 0.08) !important;
}

.bg-emerald-50\/50 {
    background-color: rgba(16, 185, 129, 0.08) !important;
}

.bg-cyan-100\/50 {
    background-color: rgba(6, 182, 212, 0.15) !important;
}

.bg-amber-100\/50 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

.bg-emerald-100\/50 {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

.text-cyan-700 {
    color: rgb(14, 116, 144) !important;
}

.text-cyan-800 {
    color: rgb(21, 94, 117) !important;
}

.text-amber-700 {
    color: rgb(180, 83, 9) !important;
}

.text-amber-800 {
    color: rgb(146, 64, 14) !important;
}

.text-emerald-700 {
    color: rgb(4, 120, 87) !important;
}

.text-emerald-800 {
    color: rgb(6, 95, 70) !important;
}

.hover\:text-cyan-700:hover {
    color: rgb(14, 116, 144) !important;
}

.hover\:text-amber-700:hover {
    color: rgb(180, 83, 9) !important;
}

.hover\:text-emerald-700:hover {
    color: rgb(4, 120, 87) !important;
}

/* --- 2. 統計頁面詳細明細 Modal 捲軸與字體 --- */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* 確保統計表格文字對齊一致性 (強制覆蓋) */
.text-center-i {
    text-align: center !important;
}


/* =========================================
   統計頁面顏色區塊 (透明度變體補齊)
========================================= */

/* 淺藍區塊 (Cyan) */
.bg-cyan-50\/30 {
    background-color: rgba(6, 182, 212, 0.08) !important;
}

/* 淺黃區塊 (Amber) */
.bg-amber-50\/30 {
    background-color: rgba(245, 158, 11, 0.08) !important;
}

/* 淺綠區塊 (Emerald) */
.bg-emerald-50\/30 {
    background-color: rgba(16, 185, 129, 0.08) !important;
}

/* 互動效果 Hover 補強 */
.hover\:bg-cyan-100:hover {
    background-color: rgb(207 250 254) !important;
}

.hover\:bg-amber-100:hover {
    background-color: rgb(253 230 138) !important;
}

.hover\:bg-emerald-100:hover {
    background-color: rgb(167 243 208) !important;
}

/* =========================================
   統計頁面：統一色彩體系 (Header: 10% / Body: 5%)
   解決斷層與不協調問題
========================================= */

/* 淺藍區塊 (Cyan) */
.bg-cyan-50\/50, .bg-cyan-header {
    background-color: rgba(6, 182, 212, 0.1) !important;
}
/* Header 10% */
.bg-cyan-50\/30, .bg-cyan-body {
    background-color: rgba(6, 182, 212, 0.05) !important;
}
/* Body 5% */

/* 淺黃區塊 (Amber) */
.bg-amber-50\/50, .bg-amber-header {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

.bg-amber-50\/30, .bg-amber-body {
    background-color: rgba(245, 158, 11, 0.05) !important;
}

/* 淺綠區塊 (Emerald) */
.bg-emerald-50\/50, .bg-emerald-header {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

.bg-emerald-50\/30, .bg-emerald-body {
    background-color: rgba(16, 185, 129, 0.05) !important;
}

/* 移除不必要的過多背景衝突：按鈕 Hover 時改用更溫和的透明度 */
.hover\:bg-cyan-100:hover {
    background-color: rgba(6, 182, 212, 0.2) !important;
}

.hover\:bg-amber-100:hover {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

.hover\:bg-emerald-100:hover {
    background-color: rgba(16, 185, 129, 0.2) !important;
}

/* =========================================
   統計頁面：現代化一體化色彩體系 (消滅白色孤島)
========================================= */

/* 🔷 展示區塊 (Cyan) */
.bg-cyan-header {
    background-color: rgba(6, 182, 212, 0.12) !important;
}
/* 表頭稍微明顯 */
.bg-cyan-body {
    background-color: rgba(6, 182, 212, 0.05) !important;
}
/* 表身極其柔和 */

/* 🔶 競賽區塊 (Amber) */
.bg-amber-header {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

.bg-amber-body {
    background-color: rgba(245, 158, 11, 0.05) !important;
}

/* 🟢 總計區塊 (Emerald) */
.bg-emerald-header {
    background-color: rgba(16, 185, 129, 0.12) !important;
}

.bg-emerald-body {
    background-color: rgba(16, 185, 129, 0.05) !important;
}



/* 🌟 補齊按鈕專屬樣式與顏色類別 */
.btn-modal-0410 {
    padding: 0.6rem 1.5rem;
    font-weight: 700;
    border-radius: 9999px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

/* 藍色按鈕 (寄 Email 專用) */
.bg-blue-500 {
    background-color: #3b82f6 !important;
}

.hover\:bg-blue-600:hover {
    background-color: #2563eb !important;
}

/* 綠色按鈕 (儲存並通過專用) */
.bg-green-600 {
    background-color: #16a34a !important;
}

.hover\:bg-green-700:hover {
    background-color: #15803d !important;
}

/* 基礎文字與效果 */
.text-white {
    color: #ffffff !important;
}

/* 按鈕點擊效果 */
.btn-modal-0410:active {
    transform: scale(0.95);
}

/* 🌟 全域按鈕嵌合樣式：吃貨背景、不留白邊、Hover 加深 */
.bg-cyan-700\/10 {
    background-color: rgba(6, 182, 212, 0.1) !important;
}

.hover\:bg-cyan-700\/20:hover {
    background-color: rgba(6, 182, 212, 0.22) !important;
}

.bg-amber-700\/10 {
    background-color: rgba(217, 119, 6, 0.1) !important;
}

.hover\:bg-amber-700\/20:hover {
    background-color: rgba(217, 119, 6, 0.22) !important;
}

.bg-emerald-700\/10 {
    background-color: rgba(4, 120, 87, 0.1) !important;
}

.hover\:bg-emerald-700\/20:hover {
    background-color: rgba(4, 120, 87, 0.22) !important;
}


.from-black\/60 {
    --tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary {
    --tw-gradient-from: #00658e var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 101 142 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-transparent {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-black\/20 {
    --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}

.to-primary-container {
    --tw-gradient-to: #00a1e0 var(--tw-gradient-to-position);
}

/* Text Colors */
.text-neutral-100 {
    --tw-text-opacity: 1;
    color: rgb(245 245 245 / var(--tw-text-opacity, 1));
}

.text-neutral-400 {
    --tw-text-opacity: 1;
    color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.text-neutral-500 {
    --tw-text-opacity: 1;
    color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}

.text-neutral-600 {
    --tw-text-opacity: 1;
    color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}

.text-neutral-800 {
    --tw-text-opacity: 1;
    color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}

.text-neutral-900 {
    --tw-text-opacity: 1;
    color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}

.text-on-surface {
    --tw-text-opacity: 1;
    color: rgb(27 28 28 / var(--tw-text-opacity, 1));
}

.text-on-surface-variant {
    --tw-text-opacity: 1;
    color: rgb(62 72 80 / var(--tw-text-opacity, 1));
}

.text-outline {
    --tw-text-opacity: 1;
    color: rgb(110 120 129 / var(--tw-text-opacity, 1));
}

.text-primary {
    --tw-text-opacity: 1;
    color: rgb(0 101 142 / var(--tw-text-opacity, 1));
}

.text-secondary {
    --tw-text-opacity: 1;
    color: rgb(142 62 145 / var(--tw-text-opacity, 1));
}

.text-sky-600 {
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}

.text-sky-700 {
    --tw-text-opacity: 1;
    color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}

.text-tertiary {
    --tw-text-opacity: 1;
    color: rgb(188 0 75 / var(--tw-text-opacity, 1));
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* --- 擴充狀態與輔助色系 --- */

/* 🟢 綠色系 (Success / 成功狀態) */
.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
/* 你原本後端寫的簡寫，對應到比較深的綠色，確保在白底上的可讀性 */
.text-green {
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

/* 🟠 橘黃色系 (Warning / 警告或提醒狀態) */
.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

/* 🟣 紫色系 (Special / 特殊狀態或區塊) */
.text-purple-600 {
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700 {
    --tw-text-opacity: 1;
    color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

/* 🟤 咖啡色系 (Neutral Warm / 溫暖中性色，適合強調但不刺眼的文字) */
.text-brown-600 {
    --tw-text-opacity: 1;
    color: rgb(139 90 43 / var(--tw-text-opacity, 1));
}

.text-brown-700 {
    --tw-text-opacity: 1;
    color: rgb(101 67 33 / var(--tw-text-opacity, 1));
}

/* 🟦 藏青/湖水綠 (Teal) - 代表系統安全、進階管理權限 */
.text-teal-600 {
    --tw-text-opacity: 1;
    color: rgb(13 148 136 / var(--tw-text-opacity, 1)) !important;
}

.text-teal-700 {
    --tw-text-opacity: 1;
    color: rgb(15 118 110 / var(--tw-text-opacity, 1)) !important;
}

/* 如果你未來想讓 hover 時背景也有淡淡的湖水綠，可以順便加上這行 */
.hover\:bg-teal-50:hover {
    background-color: rgb(240 253 250) !important;
}

/* Border Colors */
.border-neutral-100 {
    --tw-border-opacity: 1;
    border-color: rgb(245 245 245 / var(--tw-border-opacity, 1));
}

.border-neutral-200\/50 {
    border-color: rgb(229 229 229 / 0.5);
}

.border-neutral-50 {
    --tw-border-opacity: 1;
    border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
}

.border-outline-variant {
    --tw-border-opacity: 1;
    border-color: rgb(189 200 209 / var(--tw-border-opacity, 1));
}

.border-outline-variant\/20 {
    border-color: rgb(189 200 209 / 0.2);
}

.border-outline-variant\/30 {
    border-color: rgb(189 200 209 / 0.3);
}

.border-primary {
    --tw-border-opacity: 1;
    border-color: rgb(0 101 142 / var(--tw-border-opacity, 1));
}

.border-primary-light {
    border-color: rgba(0, 101, 142, 0.2);
}

.border-secondary {
    --tw-border-opacity: 1;
    border-color: rgb(142 62 145 / var(--tw-border-opacity, 1));
}

.border-secondary-light {
    border-color: rgba(142, 62, 145, 0.2);
}

.border-sky-100 {
    --tw-border-opacity: 1;
    border-color: rgb(224 242 254 / var(--tw-border-opacity, 1));
}

.border-sky-600 {
    --tw-border-opacity: 1;
    border-color: rgb(2 132 199 / var(--tw-border-opacity, 1));
}

.border-surface-container {
    --tw-border-opacity: 1;
    border-color: rgb(239 237 237 / var(--tw-border-opacity, 1));
}

.border-surface-container-highest {
    --tw-border-opacity: 1;
    border-color: rgb(227 226 226 / var(--tw-border-opacity, 1));
}

.border-surface-container-low {
    --tw-border-opacity: 1;
    border-color: rgb(245 243 243 / var(--tw-border-opacity, 1));
}

.border-tertiary {
    --tw-border-opacity: 1;
    border-color: rgb(188 0 75 / var(--tw-border-opacity, 1));
}

.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-t-primary {
    border-top-color: rgb(0, 101, 142);
}

.border-t-secondary {
    border-top-color: rgb(142, 62, 145);
}

/* Error & Warning Colors */
.text-error {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.bg-error-container {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.text-on-error-container {
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.border-error\/20 {
    border-color: rgb(220 38 38 / 0.2);
}

/* =========================================
   7. Typography (文字與排版)
========================================= */

.text-left-i {
    text-align: left !important;
}

.text-center-i {
    text-align: center !important;
}

.text-right-i {
    text-align: right !important;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.font-\[\'Plus_Jakarta_Sans\'\] {
    font-family: 'Plus Jakarta Sans';
}

.font-body {
    font-family: Inter, sans-serif;
}

.font-headline {
    font-family: Plus Jakarta Sans, sans-serif;
}

.font-label {
    font-family: Work Sans, sans-serif;
}

/* =========================================
   文字級距與黃金比例行高設定 (錨定 base = 18px)
   特點：收緊 UI 行高，解決表格與按鈕對齊的錯位問題
========================================= */

/* --- 帶有 !important 的強制覆寫版 --- */

/* 12px (行高 16px) */
.text-xxs-i {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

/* 14px (行高 20px) */
.text-xs-i {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

/* 16px (行高 24px) */
.text-sm-i {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

/* 18px (行高 26px) 🌟 核心基準：從 28px 收緊到 26px，完美貼合 32px 按鈕 */
.text-base-i {
    font-size: 1.125rem !important;
    line-height: 1.625rem !important;
}

/* 20px (行高 28px) */
.text-lg-i {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

/* 24px (行高 32px) */
.text-xl-i {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}

/* 30px (行高 36px) */
.text-2xl-i {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
}

/* 36px (行高 40px) */
.text-3xl-i {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
}

/* 48px (超大字體，行高 1 貼齊邊緣) */
.text-4xl-i {
    font-size: 3rem !important;
    line-height: 1 !important;
}

/* 60px */
.text-5xl-i {
    font-size: 3.75rem !important;
    line-height: 1 !important;
}

/* 72px */
.text-6xl-i {
    font-size: 4.5rem !important;
    line-height: 1 !important;
}


/* --- 標準版 --- */

.text-xxs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-xs {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-sm {
    font-size: 1rem;
    line-height: 1.5rem;
}

/* 🌟 核心基準 */
.text-base {
    font-size: 1.125rem;
    line-height: 1.625rem;
}

.text-lg {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-2xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-3xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-4xl {
    font-size: 3rem;
    line-height: 1;
}

.text-5xl {
    font-size: 3.75rem;
    line-height: 1;
}

.text-6xl {
    font-size: 4.5rem;
    line-height: 1;
}

.font-boldNone {
    font-weight: normal!important;
}

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

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-black {
    font-weight: 900;
}

.uppercase {
    text-transform: uppercase;
}

.leading-tight {
    line-height: 1.25;
}

.leading-snug {
    line-height: 1.375;
}

.leading-relaxed {
    line-height: 1.625;
}

.tracking-tighter {
    letter-spacing: -0.05em;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.decoration-2 {
    text-decoration-thickness: 2px;
}

.underline-offset-4 {
    text-underline-offset: 4px;
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================
   8. Effects & Transforms (特效與變形)
========================================= */



/* 自訂 Tailwind 透明度變體 (停用/錯誤狀態專用) */
.bg-error-container\/20 {
    /* 這裡給定一個絕對安全的萬用淺紅底色 (約莫是 Bootstrap Danger 紅的 8~10% 透明度) */
    /* 既能達到警示效果，又不會干擾深色文字的閱讀 */
    background-color: rgba(220, 53, 69, 0.08) !important;
    /* 💡 如果你們的系統已經有設定嚴格的 CSS 變數，你可以將上面那行替換成： */
    /* background-color: rgb(var(--color-error-container) / 0.2) !important; */
}

/* 順便幫你補上剛剛手機版有用到的 opacity-80 / opacity-60 / opacity-70 (如果 Tailwind 沒編譯到的話) */
.opacity-60 {
    opacity: 0.6 !important;
}

.opacity-70 {
    opacity: 0.7 !important;
}

.opacity-80 {
    opacity: 0.8 !important;
}



.mix-blend-overlay {
    mix-blend-mode: overlay;
}

.outline {
    outline-style: solid;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain;
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

.cursor-pointer {
    cursor: pointer;
}

.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.-translate-x-full {
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Shadows & Blurs */
.shadow-\[0_40px_40px_0_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
    --tw-shadow: 0 40px 40px 0 rgba(0,0,0,0.04);
    --tw-shadow-colored: 0 40px 40px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_40px_40px_0_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
    --tw-shadow: 0 40px 40px 0 rgba(0,0,0,0.08);
    --tw-shadow-colored: 0 40px 40px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[20px_20px_60px_rgba\(0\2c 0\2c 0\2c 0\.02\)\] {
    --tw-shadow: 20px 20px 60px rgba(0,0,0,0.02);
    --tw-shadow-colored: 20px 20px 60px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[40px_0_40px_0_rgba\(0\2c 0\2c 0\2c 0\.02\)\] {
    --tw-shadow: 40px 0 40px 0 rgba(0,0,0,0.02);
    --tw-shadow-colored: 40px 0 40px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[40px_0_40px_0_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
    --tw-shadow: 40px 0 40px 0 rgba(0,0,0,0.04);
    --tw-shadow-colored: 40px 0 40px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-primary\/20 {
    --tw-shadow-color: rgb(0 101 142 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}

.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-lg {
    --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-md {
    --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-xl {
    --tw-backdrop-blur: blur(24px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* Transitions & Behaviors */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

/* States (Hover, Focus, Active, Group, Peer) */
.selection\:bg-primary-container\/30 *::-moz-selection {
    background-color: rgb(0 161 224 / 0.3);
}

.selection\:bg-primary-container\/30 *::selection {
    background-color: rgb(0 161 224 / 0.3);
}

.selection\:bg-primary-container\/30::-moz-selection {
    background-color: rgb(0 161 224 / 0.3);
}

.selection\:bg-primary-container\/30::selection {
    background-color: rgb(0 161 224 / 0.3);
}

.placeholder\:text-outline-variant::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(189 200 209 / var(--tw-text-opacity, 1));
}

.placeholder\:text-outline-variant::placeholder {
    --tw-text-opacity: 1;
    color: rgb(189 200 209 / var(--tw-text-opacity, 1));
}

.hover\:translate-y-\[-4px\]:hover {
    --tw-translate-y: -4px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.02\]:hover {
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-neutral-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary\/10:hover {
    background-color: rgb(0 101 142 / 0.1);
}

.hover\:bg-sky-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-container-high:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(233 232 231 / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-container-low:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(245 243 243 / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-container-lowest:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:text-neutral-900:hover {
    --tw-text-opacity: 1;
    color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}

.hover\:text-on-surface:hover {
    --tw-text-opacity: 1;
    color: rgb(27 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-primary:hover {
    --tw-text-opacity: 1;
    color: rgb(0 101 142 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
    text-decoration-line: underline;
}



.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-primary\/20:focus {
    --tw-ring-color: rgb(0 101 142 / 0.2);
}

.active\:scale-95:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:focus-within .group-focus-within\:text-primary {
    --tw-text-opacity: 1;
    color: rgb(0 101 142 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary {
    --tw-text-opacity: 1;
    color: rgb(0 101 142 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary\/5 {
    color: rgb(0 101 142 / 0.05);
}

.group:hover .group-hover\:text-secondary {
    --tw-text-opacity: 1;
    color: rgb(142 62 145 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-secondary\/5 {
    color: rgb(142 62 145 / 0.05);
}

.group:hover .group-hover\:text-tertiary {
    --tw-text-opacity: 1;
    color: rgb(188 0 75 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-tertiary\/5 {
    color: rgb(188 0 75 / 0.05);
}

.peer:checked ~ .peer-checked\:block {
    display: block;
}

/* =========================================
   9. Media Queries (響應式設計與深色模式)
========================================= */
@media (min-width: 640px) {
    .sm\:flex {
        display: flex;
    }

    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:items-end {
        align-items: flex-end;
    }
}

@media (min-width: 768px) {
    .md\:-mt-20 {
        margin-top: -5rem;
    }

    .md\:mb-6 {
        margin-bottom: 1.5rem;
    }

    .md\:mb-10 {
        margin-bottom: 2.5rem;
    }

    .md\:ml-72 {
        margin-left: 18rem;
    }

    .md\:mt-8 {
        margin-top: 2rem;
    }

    .md\:mt-10 {
        margin-top: 2.5rem;
    }

    .md\:mt-20 {
        margin-top: 5rem;
    }

    .md\:block {
        display: block;
    }

    .md\:inline {
        display: inline;
    }

    .md\:hidden {
        display: none;
    }

    .md\:h-10 {
        height: 2.5rem;
    }

    .md\:h-\[500px\] {
        height: 500px;
    }

    .md\:w-10 {
        width: 2.5rem;
    }

    .md\:w-12 {
        width: 3rem;
    }

    .md\:w-\[calc\(100\%-18rem\)\] {
        width: calc(100% - 18rem);
    }

    .md\:max-w-none {
        max-width: none;
    }

    .md\:translate-x-0 {
        --tw-translate-x: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:gap-8 {
        gap: 2rem;
    }

    .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse));
    }

    .md\:rounded-\[2rem\] {
        border-radius: 2rem;
    }

    .md\:border-none {
        border-style: none;
    }

    .md\:p-8 {
        padding: 2rem;
    }

    .md\:p-10 {
        padding: 2.5rem;
    }

    .md\:p-12 {
        padding: 3rem;
    }

    .md\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .md\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }

    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
}

@media (min-width: 1024px) {
    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

@media (prefers-color-scheme: dark) {
    .dark\:bg-neutral-900 {
        --tw-bg-opacity: 1;
        background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
    }

    .dark\:bg-neutral-900\/80 {
        background-color: rgb(23 23 23 / 0.8);
    }

    .dark\:bg-neutral-950 {
        --tw-bg-opacity: 1;
        background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
    }

    .dark\:text-neutral-400 {
        --tw-text-opacity: 1;
        color: rgb(163 163 163 / var(--tw-text-opacity, 1));
    }

    .dark\:text-sky-400 {
        --tw-text-opacity: 1;
        color: rgb(56 189 248 / var(--tw-text-opacity, 1));
    }

    .dark\:text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    }

    .dark\:hover\:bg-neutral-800:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
    }

    .dark\:hover\:text-neutral-100:hover {
        --tw-text-opacity: 1;
        color: rgb(245 245 245 / var(--tw-text-opacity, 1));
    }
}

/* =========================================
   10. Custom Utilities & Animations (自訂類別與動畫)
========================================= */

/* 全域基礎設定與字體 */
body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.label-text {
    font-family: 'Work Sans', sans-serif;
}

.word-break-keep-all {
    word-break: keep-all;
}

/* Material Symbols (Google Icons) 基礎設定 */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* 視覺特效 */
.glass-effect, .glass-nav {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-line {
    border: none !important;
}

.tonal-layering {
    background-color: rgba(255, 255, 255, 0.8);
}

/* 純 CSS 互動邏輯 (左側手機版選單開關) */
#mobile-menu-checkbox:checked ~ aside {
    transform: translateX(0);
}

/* 動畫特效 (Animations) */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {
    50% {
        opacity: .5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}


/* =========================================
   補齊 0410 Loading 元件缺少的 Tailwind 靜態類別
========================================= */

/* 讓 SVG 線條自動吃 text-primary 的顏色 */
.stroke-current {
    stroke: currentColor;
}

/* 轉圈圈的背景淡色軌道 */
.opacity-20 {
    opacity: 0.2;
}

/* 撐開 Loading 區塊的上下高度 */
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}


/* =========================================
   補齊 0410 專屬現代化 Tailwind 擴充類別
   (解決舊版靜態編譯缺漏的 Utility Classes)
========================================= */

/* --- 1. 文字與空白處理 (Whitespace) --- */
.whitespace-pre-line {
    white-space: pre-line !important;
}

.whitespace-pre-wrap {
    white-space: pre-wrap !important;
}

.whitespace-nowrap {
    white-space: nowrap !important;
}

.break-all {
    word-break: break-all !important;
}

.break-words {
    overflow-wrap: break-word !important;
}

/* --- 2. 捲軸與溢出控制 (Overflow) --- */
.overflow-y-auto {
    overflow-y: auto !important;
}

.overflow-x-auto {
    overflow-x: auto !important;
}

/* --- 3. 動態高度與寬度 (Max Height / Min Width) --- */
.max-h-\[400px\] {
    max-height: 400px !important;
}

.max-h-\[450px\] {
    max-height: 450px !important;
}

.max-h-\[500px\] {
    max-height: 500px !important;
}

.min-w-0, .minWith0 {
    min-width: 0 !important;
}

.w-fit {
    width: fit-content !important;
}

/* --- 4. 內建陰影特效 (Shadows) --- */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

/* --- 5. 互動與按鈕特效 (Transforms & Transitions) --- */
.transition-all {
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

.hover\:scale-105:hover {
    transform: scale(1.05) !important;
}

.active\:scale-95:active {
    transform: scale(0.95) !important;
}

.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* --- 6. 補齊 0410 主題輔助色 (Backgrounds & Text) --- */
.bg-primary\/5 {
    background-color: rgba(0, 101, 142, 0.05) !important;
}

.bg-primary\/10 {
    background-color: rgba(0, 101, 142, 0.1) !important;
}

.border-primary\/10 {
    border-color: rgba(0, 101, 142, 0.1) !important;
}

/* 確保特定狀態的 Hover 顏色絕對生效 */
.hover\:bg-surface-container-highest:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(227 226 226 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:bg-surface-variant:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(227 226 226 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:bg-primary\/10:hover {
    background-color: rgba(0, 101, 142, 0.1) !important;
}

.hover\:bg-surface-container-high:hover {
    background-color: rgb(233 232 231) !important;
}

/* --- 7. Flexbox 與對齊輔助 --- */
.shrink-0 {
    flex-shrink: 0 !important;
}

.flex-1 {
    flex: 1 1 0% !important;
}

.whitespace-nowrap {
    white-space: nowrap !important;
}


/* =========================================
   補齊 0410 專屬現代化 Tailwind 擴充類別 (第二波)
   (針對表單、排版對齊與特定狀態)
========================================= */

/* --- 1. RWD 與 Flex 佈局補充 --- */
.flex-col-reverse {
    flex-direction: column-reverse !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.self-start {
    align-self: flex-start !important;
}

.self-end {
    align-self: flex-end !important;
}

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

.gap-y-2 {
    row-gap: 0.5rem !important;
}

.gap-y-4 {
    row-gap: 1rem !important;
}

.gap-x-2 {
    column-gap: 0.5rem !important;
}

.gap-x-4 {
    column-gap: 1rem !important;
}

/* --- 2. 邊框與圓角補充 (Borders & Radius) --- */
.rounded-t-lg {
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
}

.rounded-b-lg {
    border-bottom-left-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

.border-t-0 {
    border-top-width: 0px !important;
}

.border-b-0 {
    border-bottom-width: 0px !important;
}

.border-l {
    border-left-width: 1px !important;
}

.border-r {
    border-right-width: 1px !important;
}

/* --- 3. 背景與顏色補充 (Backgrounds & Colors) --- */
/* 表單唯讀與禁用狀態常用背景色 */
.bg-neutral-100 {
    background-color: rgb(245 245 245) !important;
}

.bg-neutral-200 {
    background-color: rgb(229 229 229) !important;
}

.hover\:bg-error\/10:hover {
    background-color: rgba(220, 38, 38, 0.1) !important;
}
/* 提示成功時的淡綠色背景 */
.bg-green-50 {
    background-color: rgb(240 253 244) !important;
}

.bg-green-100 {
    background-color: rgb(220 252 231) !important;
}

/* --- Tailwind Green 系列補充 --- */

.bg-green-600 {
    background-color: rgb(22 163 74) !important;
}

/* 這是證書按鈕 hover 時會用到的深綠色 */
.hover\:bg-green-700:hover {
    background-color: rgb(21 128 61) !important;
}

/* 這是「同意」文字會用到的綠色 */
.text-green-600 {
    color: rgb(22 163 74) !important;
}

.focus\:ring-green-600:focus {
    --tw-ring-color: rgb(22 163 74) !important;
}

/* --- 4. 文字補充 (Typography) --- */
.text-justify {
    text-align: justify !important;
}

.underline {
    text-decoration-line: underline !important;
}

.italic {
    font-style: italic !important;
}

.font-normal {
    font-weight: 400 !important;
}

/* --- 5. 游標狀態 (Cursor) --- */
.cursor-not-allowed {
    cursor: not-allowed !important;
}

.cursor-wait {
    cursor: wait !important;
}

.cursor-text {
    cursor: text !important;
}

/* --- 6. 其他實用 Utilities --- */
.resize-none {
    resize: none !important;
}

.resize-y {
    resize: vertical !important;
}

.w-auto {
    width: auto !important;
}

.h-auto {
    height: auto !important;
}

.min-h-\[100px\] {
    min-height: 100px !important;
}

.min-h-\[200px\] {
    min-height: 200px !important;
}




/* --- 響應式對齊輔助 --- */
@media (min-width: 640px) {
    .sm\:text-justify {
        text-align: justify !important;
    }
}

@media (min-width: 768px) {
    .md\:text-justify {
        text-align: justify !important;
    }
}


/* --- 手動補上 Tailwind flex-[2] 類別 --- */

/* 基礎版本 */
.flex-\[2\] {
    flex: 2 2 0% !important;
}

/* 響應式版本 (當螢幕大於 640px 時生效) */
@media (min-width: 640px) {
    .sm\:flex-\[2\] {
        flex: 2 2 0% !important;
    }
}



/* =========================================
   補齊 0410 專屬現代化 Tailwind 擴充類別 (第三波)
   (針對滿版排版與客製化陰影)
========================================= */

/* --- 1. 負邊界 (Negative Margins) 撐滿 Modal 用 --- */
.-mx-4 {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
}

@media (min-width: 640px) {
    .sm\:-mx-8 {
        margin-left: -2rem !important;
        margin-right: -2rem !important;
    }
}

@media (min-width: 768px) {
    .md\:-mx-8 {
        margin-left: -2rem !important;
        margin-right: -2rem !important;
    }
}

/* --- 2. 邊框 (Border Y) --- */
.border-y {
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
}

/* --- 3. 上下雙向立體陰影 (Custom Y-Axis Shadow) --- */
/* 將原本冗長的中括號寫法，簡化為好記的 .shadow-y-md */
.shadow-y-md {
    box-shadow: 0 8px 15px -3px rgba(0,0,0,0.1), 0 -8px 15px -3px rgba(0,0,0,0.1) !important;
}



/* =========================================
   2026 HTMX Grid 全域標準擴充
========================================= */

/* 🌟 1. 換頁置頂防遮擋魔法 (對齊 Sticky Navbar 高度) */
.switchPageScrollMarginTop {
    scroll-margin-top: 140px !important;
}

/* 🌟 2. 基礎工具類別：防撐破 */
.minWith0 {
    min-width: 0 !important;
}

/* 確保電腦版的項次和操作內容置中 */
.custom-grid td[data-label='項次'] > span,
.custom-grid td[data-label='排序'] > span,
.custom-grid td[data-label='序號'] > span {
    text-align: center;
    display: block;
}

.custom-grid td[data-label='操作'] > div {
    justify-content: center;
}

@media (max-width: 768px) {
    /* 🌟 手機版強制讓左側標籤靠左對齊 */
    .custom-grid td::before {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    /* 🌟 手機版讓右側內容靠左對齊 */
    .custom-grid td[data-label='項次'] > span,
    .custom-grid td[data-label='排序'] > span,
    .custom-grid td[data-label='序號'] > span {
        text-align: left;
    }

    .custom-grid td[data-label='操作'] > div {
        justify-content: flex-start;
    }
}


/* ==================================================================== */
/* 🌟 自訂全域內嵌式按鈕 Spinner 防禦樣式 */
/* ==================================================================== */

/* 1. 按鈕內部的 Spinner 圖示 */
.btn-spinner-icon {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    border: 2px solid rgba(255, 255, 255, 0.3); /* 淡白色邊框 */
    border-top-color: #ffffff; /* 亮白色頂部，形成斷點效果 */
    border-radius: 50%; /* 完美正圓 */
    animation: btn-spin-kf 0.8s linear infinite; /* 無限流暢旋轉 */
    display: inline-block;
    flex-shrink: 0; /* 防止被按鈕彈性盒子擠壓變形 */
}

/* 2. 定義純原生 CSS 旋轉核心動畫 */
@keyframes btn-spin-kf {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



/*統計分析報告 tab 功能*/

/* 核心佈局 */
.w-ar-seq {
    width: 5%;
    text-align: center;
}

.w-ar-group {
    width: 45%;
}

.w-ar-count {
    width: 15%;
    text-align: right;
}

.w-ar-dept {
    width: 70%;
}


/* 確保 Chart 箱子樣式 */
.ar-chart-box {
    width: 100%;
    height: 80vh;
    min-height: 400px;
    margin-bottom: 2rem;
}

/* 🌟 修正：強制隱藏非選中的 Tab 內容，直到 JS 加上 block */
.ar-tab-content {
    display: none; /* 預設全部隱藏 */
}

    /* 當加上 block 時才顯示 */
    .ar-tab-content.block {
        display: block !important;
    }

    .ar-tab-content.hidden {
        display: none;
    }

/* 🌟 修正：確保選中狀態的底線顏色清晰可見 */
.ar-tab-btn {
    border-bottom-width: 2px;
}

    .ar-tab-btn.active {
        color: #0066ca;
        border-color: #0066ca;
    }

    .ar-tab-btn:hover {
        color: #0066ca;
        border-color: #0066ca80;
    }

/* 取代原本的 style="height: 95vh;" */
.h-95vh {
    height: 95vh;
}



/* ==========================================================================
   Email Phrase Component (Email 信件片語元件)
   ========================================================================== */

.phrase-box {
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    overflow: hidden;
}

    .phrase-box.active {
        display: block;
        opacity: 1;
        padding: 8px;
    }

.phrase-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .phrase-item:last-child {
        border-bottom: none;
    }

    .phrase-item:hover {
        background-color: #f9fafb;
    }

.btn-close-phrase {
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

    .btn-close-phrase:hover {
        color: #ef4444;
    }


/*assets/css/htmxLayout.css*/

/* 這些是原本 HTMX 會自動注入的樣式，現在我們手動加到 CSS 檔中 */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}


/* 解決驗證套件自動加入 style 的問題 */
.field-validation-valid {
    display: none !important; /* 當沒有錯誤時隱藏，由 CSS 控制而非 Inline Style */
}

.field-validation-error {
    display: block !important;
    color: #ff0000 !important; /* 對應你的 text-red */
}


/* ========================================== */
/* please-wait area (0410 現代化升級版) */
/* ========================================== */

/* 1. 遮罩容器：毛玻璃與淡入效果 */
#please-wait-container:not(:empty) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.4); /* 偏藍黑的優雅半透明遮罩 */
    backdrop-filter: blur(4px); /* 🌟 0410 必備：毛玻璃模糊效果 */
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30000;
    animation: wait-fadeIn 0.2s ease-out; /* 柔和的淡入動畫 */
}

/* 2. 白色提示框：圓角、柔和陰影、卡片佈局 */
.wait-box {
    background: #ffffff;
    padding: 2.5rem 4rem;
    border-radius: 1rem; /* 🌟 0410 標準 1rem 圓角 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid rgb(189 200 209 / 0.3); /* 極淡的邊框線 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem; /* 讓轉圈圈跟文字產生間距 */
}

    /* 3. 🌟 CSS 魔術：免改 JS 直接生出 0410 主題色轉圈圈 */
    .wait-box::before {
        content: "";
        display: block;
        width: 3rem;
        height: 3rem;
        border: 4px solid rgb(0 101 142 / 0.15); /* 0410 Primary 的淺色底環 */
        border-top-color: rgb(0 101 142); /* 0410 Primary 的深色動態環 */
        border-radius: 50%;
        animation: wait-spin 1s linear infinite;
    }

    /* 4. 文字排版：精緻化 */
    .wait-box h2 {
        color: rgb(27, 28, 28); /* 0410 text-on-surface */
        margin: 0;
        font-size: 1.25rem; /* 縮小字體，提升精緻度 */
        font-weight: 700;
        letter-spacing: 0.05em;
    }

/* --- 動畫 Keyframes --- */
@keyframes wait-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes wait-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ========================================== */
/* Kickout area */
/* ========================================== */
.kickout-alert-box {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    position: relative; /* [新增] 作為絕對定位的基準 */
}

/* [新增區塊] 關閉按鈕的專屬 CSS (取代 Bootstrap 與行內樣式) */
.kickout-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
    color: #856404;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

    .kickout-close-btn:hover {
        color: #533f03; /* 滑鼠移過去時顏色變深 */
    }





/* ========================================== */
/* 全域 Modal 共用樣式 (整合公告、類別、組別設定) */
/* 範圍限定於 #modal-container 內，避免污染全站 */
/* ========================================== */

/* -------------------------------------------------- */
/* 1. Modal 基礎佈局：全螢幕遮罩與置中 */
/* -------------------------------------------------- */
#modal-container:not(:empty) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 較深的半透明背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    cursor: default; /* 背景不具備功能 */
}

/* -------------------------------------------------- */
/* 2. Modal 內容主視窗 (解決 POST 後變窄的關鍵) */
/* -------------------------------------------------- */
#modal-container .modal-content-box {
    background: #fff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    /* 寬度控制 (強制鎖定，防止 HTMX 置換時跑版) */
    width: 90% !important; /* 預設佔據畫面 90% 寬度，適合平板與手機 */
    max-width: 900px !important; /* 電腦版最大寬度限制，避免過度拉伸 */
    /* 避免內容過長超出螢幕 */
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* -------------------------------------------------- */
/* 3. Header, Body, Footer 區塊佈局 */
/* -------------------------------------------------- */
#modal-container .modal-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    flex-shrink: 0; /* 防止 Header 被壓縮 */
}

    #modal-container .modal-header-custom .modal-title {
        margin: 0 !important;
        text-align: left !important;
        flex: 1;
        line-height: 1.5 !important;
    }

#modal-container .modal-close-btn {
    background: transparent !important;
    border: none !important;
    font-size: 1.5em !important;
    cursor: pointer;
    color: #999;
    float: none !important;
    margin: 0 !important;
    margin-left: auto !important;
    line-height: 1 !important;
    padding: 0 5px !important;
}

    #modal-container .modal-close-btn:hover {
        color: #333;
        text-decoration: none;
    }

#modal-container .modal-body-custom {
    margin-top: 1.5em;
    flex: 1; /* 讓 Body 撐滿剩餘空間 */
}

    /* 網格系統 (2u: 標題, 9u: 內容) */
    #modal-container .modal-body-custom .2u {
        width: 20% !important;
        text-align: right;
        padding-right: 15px;
        line-height: 2.5em;
    }

    #modal-container .modal-body-custom .9u {
        width: 75% !important;
        float: left;
    }

#modal-container .modal-footer {
    display: flex;
    justify-content: flex-end; /* 電腦版靠右對齊 */
    gap: 10px;
    margin-top: 1.5em;
    border-top: 1px solid #eee;
    padding-top: 1em;
    flex-shrink: 0; /* 防止 Footer 被壓縮 */
}

    #modal-container .modal-footer .btn {
        margin: 0 !important;
        box-sizing: border-box;
    }

/* -------------------------------------------------- */
/* 4. 表單元件美化 (Input, Select, Textarea) */
/* -------------------------------------------------- */
#modal-container .modal-body-custom input[type="text"],
#modal-container .modal-body-custom select,
#modal-container .modal-body-custom textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}

#modal-container .modal-body-custom textarea {
    resize: vertical;
}

/* 唯讀欄位的反灰樣式 (SpotCode 防禦) */
#modal-container .modal-body-custom input[readonly],
#modal-container .modal-body-custom input[readonly]:focus {
    background-color: #e9ecef !important;
    color: #6c757d;
    cursor: not-allowed;
    border: 1px solid #ced4da;
}

/* -------------------------------------------------- */
/* 5. 附件列表專用 (Announce) */
/* -------------------------------------------------- */
#modal-container .file-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#modal-container .file-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

#modal-container .btn-delete-file {
    margin-left: 10px;
    padding: 4px 8px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #dc3545;
    cursor: pointer;
}

    #modal-container .btn-delete-file:hover {
        background-color: #dc3545;
        color: white;
    }

/* -------------------------------------------------- */
/* 6. CategoryMapper 專屬：原生 Checkbox 與 面板排版 */
/* -------------------------------------------------- */
#modal-container .native-checkbox {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    opacity: 1 !important;
    position: static !important;
    z-index: 1 !important;
    margin-right: 8px !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
}

#modal-container .native-checkbox-label {
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0;
    position: relative !important;
    width: 100%;
}

    #modal-container .native-checkbox-label::before,
    #modal-container .native-checkbox-label::after {
        display: none !important;
    }

#modal-container .checkbox-panel {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    max-height: 450px;
    overflow-y: auto;
}

#modal-container .checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#modal-container .checkbox-item-row {
    padding: 6px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    line-height: 1.4;
}

    #modal-container .checkbox-item-row:hover {
        background-color: #e2e6ea;
    }

#modal-container .CategoryLineHeight {
    line-height: 2.5em;
    font-weight: bold;
    color: #333;
}

/* -------------------------------------------------- */
/* 7. 手機版 RWD 最佳化 (小於 768px 時觸發) */
/* -------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* 讓網格強制變成 100% 寬度往下堆疊 */
    #modal-container .modal-body-custom [class*="u"] {
        width: 100% !important;
        float: none !important;
        display: block;
        text-align: left; /* 手機版文字靠左，不要靠右 */
        padding-right: 0;
    }

    /* 標籤行高與間距調整 */
    #modal-container .modal-body-custom label {
        line-height: 2em !important;
        margin-bottom: 5px;
        display: block;
    }

    /* 底部按鈕改為直向排列 */
    #modal-container .modal-footer {
        flex-direction: column;
        gap: 10px;
    }

        #modal-container .modal-footer .btn {
            width: 100% !important;
        }
}




/* ========================================== */
/* 圖形驗證碼專屬與密碼切換專屬 CSS 排版 */
/* ========================================== */
.captcha-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha-input-wrapper {
    flex: 1;
}

.captcha-img {
    border: 1px solid #ccc;
    cursor: pointer;
    height: 2.75em;
    border-radius: 4px;
    background-color: #fff;
}

.captcha-audio-btn {
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    height: 2.75em;
    width: 2.75em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #888;
    transition: all 0.2s ease-in-out;
}

    .captcha-audio-btn:hover {
        background-color: #f4f4f4;
        color: #00b2c2;
    }

    .captcha-audio-btn svg {
        width: 1.5em;
        height: 1.5em;
        fill: currentColor;
    }

/*.password-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .password-toggle-btn {
            position: absolute;
            right: 10px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none;
            color: #888;
        }*/

.password-wrapper {
    position: relative;
    /* 1. 將 flex 改為 inline-flex，讓容器縮緊貼合內容 */
    display: inline-flex;
    align-items: center;
    /* 2. 刪除 width: 100%; 這一行，非常重要！ */
}

/* 3. [新增] 加入這段保護輸入框的文字不被眼睛蓋住 */
/*.password-wrapper input {
                padding-right: 35px !important;
            }*/

.password-toggle-btn {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    color: #888;
}

    .password-toggle-btn:hover {
        color: #00b2c2;
    }

    .password-toggle-btn svg {
        width: 1.2em;
        height: 1.2em;
        fill: currentColor;
    }

/* [新增] 處理中(冷卻)的視覺狀態，取代 JS 直接操作 style */
.captcha-processing {
    opacity: 0.5 !important;
    pointer-events: none !important; /* 讓滑鼠無法點擊 */
}


/* 專門給 Captcha 處理中使用的樣式 */
.captcha-loading {
    opacity: 0.5 !important;
    pointer-events: none !important; /* 防止重複點擊 */
    cursor: wait !important;
}




/* ==========================================
   0410 全域彈窗與表單系統 (Global Modal & Form UI)
   ========================================== */

/* 1. 彈窗外框限制 */
.modal-0410-box {
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    border-radius: 1rem !important;
}

/* 2. 彈窗頭部 (Header) */
.modal-0410-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgb(189 200 209 / 0.2);
    background-color: #ffffff;
    height: 80px;
    flex-shrink: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

/* 3. 彈窗內容區塊 (Body - 產生捲軸的關鍵) */
.modal-0410-body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

/* 4. 0410 經典 3:9 表單網格系統 */
.form-grid-0410 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.form-inner-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.form-col-label {
    font-weight: 700;
    font-size: 1rem;
    color: rgb(27 28 28);
    text-align: left;
    padding-bottom: 0.25rem;
}

    .form-col-label .required-star {
        color: #ff4d4f;
        margin-right: 0.25rem;
    }

.form-col-input {
    width: 100%;
}

    .form-col-input .info-note-red {
        font-size: 12px;
        color: #ff4d4f;
        font-weight: 700;
        margin-top: 0.5rem;
        display: block;
        padding-left: 0.25rem;
    }

/* 5. 密碼眼睛切換區塊 */
.password-toggle-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.password-toggle-btn-right {
    position: absolute !important;
    right: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 0.5rem !important;
    color: rgb(110 120 129);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* 6. 彈窗底部按鈕共用樣式 (大小一致、Hover 效果) */
.btn-modal-0410 {
    min-width: 120px;
    padding: 0.625rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
}

.btn-modal-cancel {
    background-color: transparent;
    border: 2px solid rgb(189 200 209);
    color: rgb(110 120 129);
}

    .btn-modal-cancel:hover {
        background-color: rgb(245 243 243);
        color: rgb(27 28 28);
    }

.btn-modal-confirm {
    background-color: rgb(0 101 142);
    border: 2px solid rgb(0 101 142);
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

    .btn-modal-confirm:hover {
        background-color: rgb(0 161 224);
        border-color: rgb(0 161 224);
        box-shadow: 0 4px 12px rgba(0, 101, 142, 0.3);
    }

/* 7. 電腦版 RWD (寬度 >= 768px) */
@media (min-width: 768px) {
    .btn-modal-0410 {
        width: 220px !important;
    }

    /* 🌟 核心修正：拋棄 3:9 等分比例，改用「標籤固定寬度 + 內容填滿剩餘空間」 */
    .form-grid-0410 {
        /* 左側標籤固定給 140px 就夠了，右側輸入框填滿剩下的空間 */
        /* 20260511 改為 100px */
        grid-template-columns: 100px minmax(0, 1fr);
        align-items: start;
        column-gap: 1.5rem; /* 標籤與輸入框的呼吸距離 */
    }

    .form-col-label {
        /* 移除 span 3 限制，交由上方的 140px 控制 */
        grid-column: auto;
        text-align: right;
        padding-top: 0.75rem;
        padding-bottom: 0;
    }

    .form-col-input {
        /* 移除 span 9 限制，交由上方的 1fr 控制 */
        grid-column: auto;
    }

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


/* ========================================== */
/* 全域 Toast 提示訊息 - 修正版 */
/* ========================================== */

#custom-toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 容器設為無法點擊，讓點擊穿透到後方頁面 */
    pointer-events: none;
    align-items: center;
}

.custom-toast {
    position: relative; /* 關鍵：讓按鈕定位基於 toast */
    /* 🌟 關鍵修正：恢復 Toast 內部的點擊功能 */
    pointer-events: auto;
    padding: 12px 40px 12px 16px; /* 右側留空間給 X 按鈕 */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    font-weight: bold;
    font-size: 14px;
    /* 動畫設定 */
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    min-width: 250px;
    max-width: 400px;
}

    .custom-toast.show {
        opacity: 1;
        transform: translateY(0);
    }

.toast-msg {
    margin-right: 10px;
}

/* 關閉按鈕樣式 */
.toast-close-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: currentColor;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.6;
    padding: 0 5px;
    line-height: 1; /* 確保垂直置中更準確 */
}

    .toast-close-btn:hover {
        opacity: 1;
    }

/* 主題顏色 */
.toast-success {
    background-color: #ffffff;
    color: rgb(27 28 28);
    border-left: 6px solid rgb(22 163 74);
}

.toast-error {
    background-color: rgb(254 226 226);
    color: rgb(153 27 27);
    border-left: 6px solid rgb(220 38 38);
}


/* =========================================
   0410漢堡 Grid 共用 RWD 核心樣式 (Custom Grid)
========================================= */
.custom-grid.fixed-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
    text-align: left;
}

    .custom-grid.fixed-table th, .custom-grid.fixed-table td {
        vertical-align: middle;
    }

/* --- 欄位寬度配置區 (Utility Classes) --- */
.w-action {
    width: 10%;
    text-align: center;
}

.w-email {
    width: 25%;
}

.w-cname {
    width: 15%;
}

.w-ename {
    width: 20%;
}

.w-dept {
    width: 30%;
}

/* --- 共用排版設定 --- */
.custom-grid td > span {
    display: block;
    width: 100%;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.custom-grid .search-row th {
    border-bottom: 2px solid #e1e3e1 !important;
}

/* =========================================
   0410手機版 RWD 專屬優化設定 (完美卡片化 & 防溢出)
========================================= */
@media (max-width: 768px) {
    .custom-grid, .custom-grid thead, .custom-grid tbody, .custom-grid tr, .custom-grid th, .custom-grid td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

        .custom-grid thead tr:not(.search-row) {
            display: none !important;
        }

        .custom-grid .search-row {
            padding-bottom: 16px;
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            border-bottom: 2px solid #e1e3e1 !important;
        }

            .custom-grid .search-row th {
                padding: 0 !important;
                border: none !important;
                width: 100%;
            }

        /* 卡片內部間距稍微加大 (gap: 12px) 讓資訊更好閱讀 */
        .custom-grid tbody tr {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 16px;
            margin-bottom: 16px;
            background-color: #fff;
            border: 1px solid #e1e3e1;
            border-radius: 16px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            width: 100%;
            overflow: hidden;
        }

        /* td 改為靠左對齊 (flex-start)，並設定間距 (gap: 12px) */
        .custom-grid td {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 0 !important;
            border: none !important;
            width: 100%;
            gap: 12px;
        }

            /* 左側標籤給予「固定寬度 (85px)」，這是讓右側內容完美切齊的關鍵！ */
            .custom-grid td::before {
                content: attr(data-label);
                font-weight: bold;
                color: #444746;
                width: 85px;
                flex-shrink: 0;
                white-space: nowrap;
            }

            /* 右側內容佔滿剩餘空間 (flex: 1)、強制靠左、並全面啟動強制斷字防爆版 */
            .custom-grid td > span, .custom-grid td > div {
                flex: 1;
                text-align: left;
                min-width: 0;
                word-break: break-all; /* 一勞永逸解決未來任何長字串溢出 */
                overflow-wrap: break-word;
            }

            .custom-grid td[data-label='操作'] {
                align-items: center;
            }

                /* 操作按鈕改為靠左對齊 (flex-start) */
                .custom-grid td[data-label='操作'] > div {
                    display: flex;
                    justify-content: flex-start;
                }
}



/* =========================================
   Flatpickr 自訂底部按鈕區塊 (0410 專屬風格)
========================================= */
.flatpickr-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid #e1e3e1;
    background-color: #f8f9fa;
    gap: 8px;
}

.fp-btn {
    flex: 1;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
    border: 1px solid transparent;
}

/* 清除按鈕：灰色外框 */
.fp-btn-outline {
    border-color: #c4c7c5;
    color: #444746;
    background-color: transparent;
}

    .fp-btn-outline:hover {
        background-color: #f0f1f0;
    }

/* 今日按鈕：主色淺底 */
.fp-btn-primary {
    background-color: rgb(0 101 142 / 0.1);
    color: rgb(0 101 142);
}

    .fp-btn-primary:hover {
        background-color: rgb(0 101 142 / 0.2);
    }

/* 確定按鈕：主色實體 */
.fp-btn-success {
    background-color: rgb(0 101 142);
    color: #ffffff;
}

    .fp-btn-success:hover {
        background-color: rgb(0 161 224);
    }







/* html5 日期選擇器 */
/* 黑色模糊背景遮罩 */
/*.date-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);*/ /* 半透明黑色 */
    /*backdrop-filter: blur(4px);*/ /* 模糊效果 */
    /*z-index: 9998;*/ /* 在 Modal 之下，內容之上 */
    /*display: none;*/ /* 預設隱藏 */
/*}*/

/* 確保日期選擇器蓋在遮罩之上 */
/*input[type="datetime-local"] {
    position: relative;
    z-index: 9999;
}*/



/* 修改為局部遮罩，放在 .date-pair-row 內部 */
.date-pair-row {
    position: relative;
}

.date-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9997; /* 在彈出視窗之下 */
    display: none; /* 預設隱藏 */
}


input[type="text"]:focus, select:focus, textarea:focus {
    outline: none !important;
}

.spanPosAdj {
    right:5px;
}