:root {
    --bg-opacity: 1;
    --lightyellow-rgb: 240, 198, 116;
    --lightsuccess-rgb: 34, 197, 94;
    --lightblack-rgb: 26, 26, 26;
    --lightorange-rgb: 246, 145, 19;
    --lightpeachyorange-rgb: 242, 121, 96;
    --lightmintgreen-rgb: 91, 191, 178;
    --light-warm-mist-white-rgb: 251, 247, 244;
    --light-soft-apricot-beige-rgb: 249, 242, 232;
    --light-creamy-warm-beige-rgb: 247, 238, 221;
    --gray-rgb: 243, 244, 246
}
:root {
    --bs-body-bg: #ffffff;
}
[data-bs-theme="dark"] {
    --bs-body-bg: #272727;
}



.container-right{
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}


.nav-link.nav-no-hover:hover {
    background-color: inherit !important;
    color: inherit !important;
}



 .card {
    background-color: transparent !important;
}

.w-300px {
    --bs-offcanvas-width: 300px;
}



.bg-lightsuccess {
    background-color: rgba(var(--lightsuccess-rgb), var(--bg-opacity)) !important;
}
.bg-lightyellow {
    background-color: rgba(var(--lightyellow-rgb), var(--bs-bg-opacity, 1)) !important;
}
.bg-lightblack {
    background-color: rgba(var(--lightblack-rgb), var(--bg-opacity)) !important;
}
.bg-lightorange {
    background-color: rgba(var(--lightorange-rgb), var(--bg-opacity)) !important;
}
.bg-lightmintgreen {
    background-color: rgba(var(--lightmintgreen-rgb), var(--bg-opacity)) !important;
}
.bg-lightpeachyorange {
    background-color: rgba(var(--lightpeachyorange-rgb), var(--bg-opacity)) !important;
}
.bg-gray {
    background-color: rgba(var(--gray-rgb), var(--bg-opacity)) !important;
}
.bg-light-warm-mist-white {
    background-color: rgba(var(--light-warm-mist-white-rgb), var(--bg-opacity)) !important;
}
.bg-light-soft-apricot-beige {
    background-color: rgba(var(--light-soft-apricot-beige-rgb), var(--bg-opacity)) !important;
}
.bg-light-creamy-warm-beige {
    background-color: rgba(var(--light-creamy-warm-beige-rgb), var(--bg-opacity)) !important;
}





.text-lightsuccess {
    color: rgba(var(--lightsuccess-rgb), var(--bs-text-opacity, 1)) !important;
}
.text-lightyellow {
    color: rgba(var(--lightyellow-rgb), var(--bs-text-opacity, 1)) !important;
}
.text-lightblack {
    color: rgba(var(--lightblack-rgb), var(--bs-text-opacity, 1)) !important;
}
.text-lightorange {
    color: rgba(var(--lightorange-rgb), var(--bs-text-opacity, 1)) !important;
}
.text-lightpeachyorange {
    color: rgba(var(--lightpeachyorange-rgb), var(--bs-text-opacity, 1)) !important;
}
.text-lightmintgreen {
    color: rgba(var(--lightmintgreen-rgb), var(--bs-text-opacity, 1)) !important;
}
.text-gray {
    color: rgba(var(--gray-rgb), var(--bs-text-opacity, 1)) !important;
}
.text-light-warm-mist-white {
    color: rgba(var(--light-warm-mist-white-rgb), var(--bs-text-opacity, 1)) !important;
}
.text-light-soft-apricot-beige {
    color: rgba(var(--light-soft-apricot-beige-rgb), var(--bs-text-opacity, 1)) !important;
}
.text-light-creamy-warm-beige {
    color: rgba(var(--light-creamy-warm-beige-rgb), var(--bs-text-opacity, 1)) !important;
}




.border-lightyellow {
    --bs-border-opacity: 1;
    border-color: rgba(var(--lightyellow-rgb), var(--bs-border-opacity)) !important;
}
.border-lightsuccess {
    --bs-border-opacity: 1;
    border-color: rgba(var(--lightsuccess-rgb), var(--bs-border-opacity)) !important;
}
.border-lightblack {
    --bs-border-opacity: 1;
    border-color: rgba(var(--lightblack-rgb), var(--bs-border-opacity)) !important;
}
.border-lightorange {
    --bs-border-opacity: 1;
    border-color: rgba(var(--lightorange-rgb), var(--bs-border-opacity)) !important;
}
.border-lightpeachyorange {
    --bs-border-opacity: 1;
    border-color: rgba(var(--lightpeachyorange-rgb), var(--bs-border-opacity)) !important;
}
.border-lightmintgreen {
    --bs-border-opacity: 1;
    border-color: rgba(var(--lightmintgreen-rgb), var(--bs-border-opacity)) !important;
}
.border-gray {
    --bs-border-opacity: 1;
    border-color: rgba(var(--gray-rgb), var(--bs-border-opacity)) !important;
}
.border-light-warm-mist-white {
    --bs-border-opacity: 1;
    border-color: rgba(var(--light-warm-mist-white-rgb), var(--bs-border-opacity)) !important;
}

.border-light-soft-apricot-beige {
    --bs-border-opacity: 1;
    border-color: rgba(var(--light-soft-apricot-beige-rgb), var(--bs-border-opacity)) !important;
}
.border-light-creamy-warm-beige {
    --bs-border-opacity: 1;
    border-color: rgba(var(--light-creamy-warm-beige-rgb), var(--bs-border-opacity)) !important;
}





@media (min-width: 768px) {
    .border-md-0 {
        border: 0 !important;
    }
}


.btn.btn-lightsuccess {
    --bs-btn-color: #fff;
    --bs-btn-bg: #22C55E;
    --bs-btn-border-color: #22C55E;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #16A34A;
    --bs-btn-hover-border-color: #16A34A;
    --bs-btn-focus-shadow-rgb: 34, 197, 94;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #16A34A;
    --bs-btn-active-border-color: #16A34A;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #22C55E;
    --bs-btn-disabled-border-color: #22C55E;
    /* ⬇️ 以下是手動補充的 Bootstrap 核心樣式 */
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-lightsuccess:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-lightsuccess:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    }

    .btn.btn-lightsuccess:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: var(--bs-btn-active-shadow);
    }

.btn.btn-outline-lightsuccess {
    --bs-btn-color: #22C55E;
    --bs-btn-border-color: #22C55E;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #22C55E;
    --bs-btn-hover-border-color: #22C55E;
    --bs-btn-focus-shadow-rgb: 34, 197, 94;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #16A34A;
    --bs-btn-active-border-color: #16A34A;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #22C55E;
    --bs-btn-disabled-border-color: #22C55E;
    color: var(--bs-btn-color);
    background-color: transparent;
    border: 1px solid var(--bs-btn-border-color);
}

    .btn.btn-outline-lightsuccess:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-outline-lightsuccess:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    }

    .btn.btn-outline-lightsuccess:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: var(--bs-btn-active-shadow);
    }



.btn.btn-lightyellow {
    --bs-btn-color: #fff; /* 深色字體以符合亮背景 */
    --bs-btn-bg: #f0c674;
    --bs-btn-border-color: #f0c674;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e6b85c; /* 稍淡一點的 hover 色 */
    --bs-btn-hover-border-color: #e6b85c;
    --bs-btn-focus-shadow-rgb: 240, 198, 116;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e6b85c;
    --bs-btn-active-border-color: #e6b85c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #f0c674;
    --bs-btn-disabled-border-color: #f0c674;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-lightyellow:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-lightyellow:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    }

    .btn.btn-lightyellow:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: var(--bs-btn-active-shadow);
    }

.btn.btn-outline-lightyellow {
    --bs-btn-color: #f0c674;
    --bs-btn-border-color: #f0c674;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f0c674;
    --bs-btn-hover-border-color: #f0c674;
    --bs-btn-focus-shadow-rgb: 240, 198, 116;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e6b85c;
    --bs-btn-active-border-color: #e6b85c;
    --bs-btn-disabled-color: #f0c674;
    --bs-btn-disabled-border-color: #f0c674;
    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-outline-lightyellow:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-outline-lightyellow:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    }

    .btn.btn-outline-lightyellow:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: var(--bs-btn-active-shadow, inset 0 3px 5px rgba(0, 0, 0, 0.125));
    }


.btn.btn-lightorange {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(246, 145, 19);
    --bs-btn-border-color: rgb(246, 145, 19);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(230, 135, 15);
    --bs-btn-hover-border-color: rgb(230, 135, 15);
    --bs-btn-focus-shadow-rgb: 246, 145, 19;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(212, 120, 10);
    --bs-btn-active-border-color: rgb(212, 120, 10);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgb(246, 145, 19);
    --bs-btn-disabled-border-color: rgb(246, 145, 19);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-lightorange:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-lightorange:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn.btn-lightorange:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: var(--bs-btn-active-shadow);
    }

.btn.btn-outline-lightorange {
    --bs-btn-color: rgb(246, 145, 19); /* 按鈕文字顏色 */
    --bs-btn-border-color: rgb(246, 145, 19); /* 外框顏色 */
    --bs-btn-hover-color: #fff; /* hover 時的文字顏色 */
    --bs-btn-hover-bg: rgb(246, 145, 19); /* hover 時的背景顏色 */
    --bs-btn-hover-border-color: rgb(246, 145, 19); /* hover 時的外框顏色 */
    --bs-btn-focus-shadow-rgb: 246, 145, 19; /* focus 時的陰影顏色 */
    --bs-btn-active-color: #fff; /* active 時的文字顏色 */
    --bs-btn-active-bg: rgb(212, 120, 10); /* active 時的背景顏色 */
    --bs-btn-active-border-color: rgb(212, 120, 10); /* active 時的外框顏色 */
    --bs-btn-disabled-color: rgb(246, 145, 19); /* disabled 時的文字顏色 */
    --bs-btn-disabled-bg: transparent; /* disabled 時的背景顏色 */
    --bs-btn-disabled-border-color: rgb(246, 145, 19); /* disabled 時的外框顏色 */

    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-outline-lightorange:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-outline-lightorange:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn.btn-outline-lightorange:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Active 狀態下的陰影 */
    }










.btn.btn-lightpeachyorange {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(242, 121, 96);
    --bs-btn-border-color: rgb(242, 121, 96);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(226, 105, 84);
    --bs-btn-hover-border-color: rgb(226, 105, 84);
    --bs-btn-focus-shadow-rgb: 242, 121, 96;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(211, 96, 74);
    --bs-btn-active-border-color: rgb(211, 96, 74);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgb(242, 121, 96);
    --bs-btn-disabled-border-color: rgb(242, 121, 96);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-lightpeachyorange:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-lightpeachyorange:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn.btn-lightpeachyorange:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: var(--bs-btn-active-shadow);
    }
.btn.btn-outline-lightpeachyorange {
    --bs-btn-color: rgb(242, 121, 96); /* 外框和文字的顏色 */
    --bs-btn-border-color: rgb(242, 121, 96); /* 外框顏色 */
    --bs-btn-hover-color: #fff; /* hover 时的文字颜色 */
    --bs-btn-hover-bg: rgb(242, 121, 96); /* hover 时的背景颜色 */
    --bs-btn-hover-border-color: rgb(242, 121, 96); /* hover 时的外框颜色 */
    --bs-btn-focus-shadow-rgb: 242, 121, 96; /* focus 时的阴影颜色 */
    --bs-btn-active-color: #fff; /* active 时的文字颜色 */
    --bs-btn-active-bg: rgb(211, 96, 74); /* active 时的背景颜色 */
    --bs-btn-active-border-color: rgb(211, 96, 74); /* active 时的外框颜色 */
    --bs-btn-disabled-color: rgb(242, 121, 96); /* disabled 时的文字颜色 */
    --bs-btn-disabled-bg: transparent; /* disabled 时的背景颜色 */
    --bs-btn-disabled-border-color: rgb(242, 121, 96); /* disabled 时的外框颜色 */

    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-outline-lightpeachyorange:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-outline-lightpeachyorange:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn.btn-outline-lightpeachyorange:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* active 状态下的阴影 */
    }



.btn.btn-lightmintgreen {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(91, 191, 178);
    --bs-btn-border-color: rgb(91, 191, 178);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(71, 171, 158);
    --bs-btn-hover-border-color: rgb(71, 171, 158);
    --bs-btn-focus-shadow-rgb: 91, 191, 178;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(61, 161, 148);
    --bs-btn-active-border-color: rgb(61, 161, 148);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgb(91, 191, 178);
    --bs-btn-disabled-border-color: rgb(91, 191, 178);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-lightmintgreen:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-lightmintgreen:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn.btn-lightmintgreen:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: var(--bs-btn-active-shadow);
    }
.btn.btn-outline-lightmintgreen {
    --bs-btn-color: rgb(91, 191, 178); /* 外框和文字的顏色 */
    --bs-btn-border-color: rgb(91, 191, 178); /* 外框顏色 */
    --bs-btn-hover-color: #fff; /* hover 时的文字颜色 */
    --bs-btn-hover-bg: rgb(91, 191, 178); /* hover 时的背景颜色 */
    --bs-btn-hover-border-color: rgb(91, 191, 178); /* hover 时的外框颜色 */
    --bs-btn-focus-shadow-rgb: 91, 191, 178; /* focus 时的阴影颜色 */
    --bs-btn-active-color: #fff; /* active 时的文字颜色 */
    --bs-btn-active-bg: rgb(61, 161, 148); /* active 时的背景颜色 */
    --bs-btn-active-border-color: rgb(61, 161, 148); /* active 时的外框颜色 */
    --bs-btn-disabled-color: rgb(91, 191, 178); /* disabled 时的文字颜色 */
    --bs-btn-disabled-bg: transparent; /* disabled 时的背景颜色 */
    --bs-btn-disabled-border-color: rgb(91, 191, 178); /* disabled 时的外框颜色 */

    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-outline-lightmintgreen:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-outline-lightmintgreen:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn.btn-outline-lightmintgreen:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* active 状态下的阴影 */
    }





/* 第一種按鈕樣式 (.btn-gray) */
.btn.btn-gray {
    --bs-btn-color: #000;
    --bs-btn-bg: #F3F4F6; /* 未放置游標時的顏色 */
    --bs-btn-border-color: #F3F4F6;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #E5E7EB; /* 放置游標時的顏色 */
    --bs-btn-hover-border-color: #E5E7EB;
    --bs-btn-focus-shadow-rgb: 229, 231, 235;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #E5E7EB;
    --bs-btn-active-border-color: #E5E7EB;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #F3F4F6;
    --bs-btn-disabled-border-color: #F3F4F6;
    /* 手動補充的 Bootstrap 核心樣式 */
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-gray:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-gray:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    }

    .btn.btn-gray:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: var(--bs-btn-active-shadow);
    }
.btn.btn-outline-gray {
    --bs-btn-color: #F3F4F6; /* 外框和文字顏色 */
    --bs-btn-border-color: #F3F4F6; /* 外框顏色 */
    --bs-btn-hover-color: #000; /* hover 時的文字顏色 */
    --bs-btn-hover-bg: #F3F4F6; /* hover 時的背景顏色 */
    --bs-btn-hover-border-color: #E5E7EB; /* hover 時的外框顏色 */
    --bs-btn-focus-shadow-rgb: 229, 231, 235; /* focus 時的陰影顏色 */
    --bs-btn-active-color: #fff; /* active 時的文字顏色 */
    --bs-btn-active-bg: #E5E7EB; /* active 時的背景顏色 */
    --bs-btn-active-border-color: #E5E7EB; /* active 時的外框顏色 */
    --bs-btn-disabled-color: #F3F4F6; /* disabled 時的文字顏色 */
    --bs-btn-disabled-bg: transparent; /* disabled 時的背景顏色 */
    --bs-btn-disabled-border-color: #F3F4F6; /* disabled 時的外框顏色 */

    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-outline-gray:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-outline-gray:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn.btn-outline-gray:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* active 狀態下的陰影 */
    }



/* 第二種按鈕樣式 (.btn-grayred) */
.btn.btn-grayred {
    --bs-btn-color: #fff;
    --bs-btn-bg: #FEE2E2; /* 未放置游標時的顏色 */
    --bs-btn-border-color: #FEE2E2;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #FECBCA; /* 放置游標時的顏色 */
    --bs-btn-hover-border-color: #FECBCA;
    --bs-btn-focus-shadow-rgb: 254, 202, 202;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #FECBCA;
    --bs-btn-active-border-color: #FECBCA;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #FEE2E2;
    --bs-btn-disabled-border-color: #FEE2E2;
    /* 手動補充的 Bootstrap 核心樣式 */
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-grayred:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-grayred:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    }

    .btn.btn-grayred:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: var(--bs-btn-active-shadow);
    }

.btn.btn-outline-grayred {
    --bs-btn-color: #FEE2E2; /* 外框和文字的顏色 */
    --bs-btn-border-color: #FEE2E2; /* 外框顏色 */
    --bs-btn-hover-color: #000; /* hover 時的文字顏色 */
    --bs-btn-hover-bg: #FEE2E2; /* hover 時的背景顏色 */
    --bs-btn-hover-border-color: #FECBCA; /* hover 時的外框顏色 */
    --bs-btn-focus-shadow-rgb: 254, 202, 202; /* focus 時的陰影顏色 */
    --bs-btn-active-color: #fff; /* active 時的文字顏色 */
    --bs-btn-active-bg: #FECBCA; /* active 時的背景顏色 */
    --bs-btn-active-border-color: #FECBCA; /* active 時的外框顏色 */
    --bs-btn-disabled-color: #FEE2E2; /* disabled 時的文字顏色 */
    --bs-btn-disabled-bg: transparent; /* disabled 時的背景顏色 */
    --bs-btn-disabled-border-color: #FEE2E2; /* disabled 時的外框顏色 */

    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
}

    .btn.btn-outline-grayred:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn.btn-outline-grayred:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn.btn-outline-grayred:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* active 状态下的阴影 */
    }













.lh-xs {
    line-height: 0.8;
}


.lh-06 {
    line-height: 0.6;
}








.card-img-mask {
    position: relative;
    overflow: hidden;
}

    .card-img-mask .card-img-mask-gray {
        display: block;
        width: 100%;
        height: auto;
        transition: filter 0.3s ease;
    }

    .card-img-mask:hover .card-img-mask-gray {
        filter: grayscale(100%);
    }

.card-img-mask-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    padding: 0 5px;
    z-index: 1;
}

.card-img-mask:hover .card-img-mask-body {
    opacity: 1;
}

.card-img-mask-body img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: auto;
}





















.image-card {
    position: relative;
    overflow: hidden;
}

.image-card .main-image {
    display: block;
    width: 100%;
    height: auto;
    transition: filter 0.3s ease;
}

.image-card:hover .main-image {
    filter: grayscale(100%);
}

.overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.image-card:hover .overlay-text {
    opacity: 1;
}

.overlay-text img {
    width: 40px;
    height: auto;
}



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



/* 側邊欄 (Offcanvas) 優化 */
.offcanvas-entry-permit {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    box-shadow: -5px 0 30px rgba(0,0,0,0.15);
}

.offcanvas-entry-permit-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
}

/* 側邊欄底部的行動呼籲區塊 */
.sidebar-entry-permit-footer {
    border-top: 1px solid #eee;
    padding: 1rem;
    background: white;
    /* 讓按鈕區塊固定在底部 */
}



/* Sidebar 寬度 */
.offcanvas-start {
    width: 250px;
}

.offcanvas-end {
    width: 1250px;
}

/* 主內容偏移效果 */
#main-content {
    transition: margin-left 0.3s ease;
}


/* 釘選按鈕 */
#pinToggle {
    white-space: nowrap;
    cursor: pointer;
}


.btn-offcanvas-toggle {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .65);
    background-color: transparent;
    border: 0;
}

    .btn-offcanvas-a:hover,
    .btn-offcanvas-toggle:hover,
    .btn-offcanvas-toggle:focus,
    .btn-offcanvas-toggle-nav a:hover {
        color: rgba(0, 0, 0, .85);
        background-color: #d2f4ea;
    }


    .btn-offcanvas-toggle::before {
        width: 1.25em;
        line-height: 0;
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
        transition: transform .35s ease;
        transform-origin: .5em 50%;
    }

    .btn-offcanvas-toggle[aria-expanded="true"]::before {
        transform: rotate(90deg);
    }

.btn-offcanvas-toggle-nav a {
    display: inline-flex;
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
    text-decoration: none;
}



.btn-offcanvas-a {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .65);
    background-color: transparent;
    border: 0;
}


@media (min-width: 768px) {
    .rounded-md-1 {
        border-radius: 0.2rem !important; /* Bootstrap rounded-1 */
    }

    .rounded-md-2 {
        border-radius: 0.25rem !important; /* Bootstrap rounded-2 */
    }

    .rounded-md-3 {
        border-radius: 0.3rem !important; /* Bootstrap rounded-3 */
    }

    .rounded-md-4 {
        border-radius: 0.375rem !important; /* Bootstrap rounded-4 */
    }

    .rounded-md-5 {
        border-radius: 0.5rem !important; /* Bootstrap rounded-5 */
    }
}



.mt--4 {
    margin-top: -1.5rem;
}
.mt--5 {
    margin-top: -3rem;
}
.mt--6 {
    margin-top: -60px;
}
.mt--7 {
    margin-top: -6.9rem;
}


.top-10 {
    top: 10% !important;
}
.top-20 {
    top: 20% !important;
}
.top-30 {
    top: 30% !important;
}
.top-50 {
    top: 50% !important;
}
.top-60 {
    top: 60% !important;
}
.top-70 {
    top: 70% !important;
}
.top-80 {
    top: 80% !important;
}
.top-90 {
    top: 90% !important;
}

@media (min-width: 768px) {
    .top-md-70 {
        top: 70% !important;
    }
}
@media (min-width: 768px) {
    .top-md-60 {
        top: 60% !important;
    }
}
@media (min-width: 768px) {
    .top-md-50 {
        top: 50% !important;
    }
}

.w-80 {
    width: 80% !important;
}
.w-85 {
    width: 85% !important;
}
.w-90 {
    width: 90% !important;
}

.w-fit-content {
    width: fit-content !important;
}
@media (min-width: 768px) {
    .w-md-fit-content {
        width: fit-content !important;
    }
}

@media (min-width: 768px) {
    .min-w-md-auto {
        min-width: auto !important;
    }
}

@media (min-width: 768px) {
    .position-md-static {
        position: static !important;
    }
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}









.image-container {
    width: 100%;
    height: 100vh; /* 滿版畫面高度 */
    overflow: hidden;
    background-color: black;
    position: relative;
}

.zoom-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填滿整個容器，必要時裁切邊緣 */
    object-position: center;
    transform: scale(1.2); /* 初始放大 */
    opacity: 0;
    transition: transform 7s ease, opacity 7s ease;
}

.carousel-item.active .zoom-img {
    transform: scale(1);
    opacity: 1;
}

@keyframes initZoom {
    from {
        transform: scale(1.2);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.carousel-item:first-child.active .zoom-img {
    animation: initZoom 7s ease forwards;
}



.dropdown-toggle-icon-none::after {
    display: none !important;
}




.list-group-item-action.active {
    position: relative; /* 讓元素能夠處理偽元素定位 */
    z-index: 1;
    color: rgb(var(--lightyellow-rgb)); /* 使用自定義的顏色 */
    background-color: var(--bs-list-group-bg);
    border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
    font-weight: bold;
    overflow: hidden; /* 避免邊框超出圓角 */
}

    .list-group-item-action.active::before {
        content: ""; /* 不需要文字，只需呈現邊框 */
        position: absolute;
        left: 0; /* 邊框橫跨整個項目 */
        right: 0; /* 確保邊框延伸到右邊 */
        bottom: 0; /* 將邊框放置在底部 */
        height: 3px; /* 邊框高度 */
        background-color: rgb(var(--lightyellow-rgb)); /* 邊框顏色 */
    }

    .list-group-item-action.active:hover {
        background-color: rgb(var(--bs-list-group-bg)); /* 邊框顏色 */

    }





.list-group-item-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
}






@media (min-width: 768px) {
    .bg-md-transparent {
        background-color: transparent !important;
    }
}




.nav-tabs .nav-link {
    position: relative; /* 讓偽元素能相對定位 */
    color: var(--bs-nav-link-color);
    background-color: transparent;
    border: none;
    font-weight: normal;
    transition: color 0.3s;
    color: inherit;
    transition: color 0.3s;
}
    .nav-tabs .nav-link.active {
        color: rgb(var(--lightyellow-rgb));
        font-weight: bold;
        background-color: transparent; /* 保持背景透明 */
        font-weight: bold;
    }

        .nav-tabs .nav-link.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            background-color: rgb(var(--lightyellow-rgb)); /* 自定義底部邊框顏色 */
        }

    .nav-tabs .nav-link:hover {
        color: rgb(var(--lightyellow-rgb));
    }



/* 預設小尺寸（sm） */
.btn-md-group .btn {
    padding: 0.25rem 0.25rem;
    font-size: 0.575rem;
}

/* 中尺寸以上恢復預設（原始大小） */
@media (min-width: 768px) {
    .btn-md-group .btn {
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
    }
}




.fs-7 {
    font-size: 0.9rem !important;
}



@media (min-width: 768px) {
    .fs-md-1 {
        font-size: 2.5rem !important;
    }
    .fs-md-2 {
        font-size: 2rem !important;
    }
    .fs-md-3 {
        font-size: 1.75rem !important;
    }
    .fs-md-4 {
        font-size: 1.5rem !important;
    }
    .fs-md-5 {
        font-size: 1.25rem !important;
    }
    .fs-md-6 {
        font-size: 1rem !important;
    }
    .fs-md-7 {
        font-size: 0.9rem !important;
    }
}







.btn-ml, .btn-group-ml > .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1.875rem;
    border-radius: 0.3rem;
}


.btn-xl, .btn-group-xl > .btn {
    padding: 1rem 2rem;
    font-size: 2.5rem;
    border-radius: 0.3rem;
}