body {
    font-family: 'Noto Sans TC', sans-serif;
}

a{
    text-decoration:none !important;
}

:root {
    /* Teal */
    --teal-95: #E5F4F3;
    --teal-90: #D2E7E6;
    --teal-80: #7DD5D5;
    --teal-60: #14A1A1;
    --teal-40: #006A6A;
    --teal-20: #173535;

    /* System colors - Brand */
    --brand-primary: var(--teal-40);
    --brand-onPrimary: #FFFFFF;
    --brand-primaryVar: var(--teal-90);
    --brand-onPrimaryVarLight: var(--teal-40);
    --brand-onPrimaryVarDark: var(--teal-20);


    /* Red */
    --red-95: #FFEDEB;
    --red-90: #FFDAD8;
    --red-80: #FFB4B1;
    --red-60: #E26E6C;
    --red-40: #AB3439;
    --red-20: #5C1719;

    /* System colors - Danger */
    --danger-primary: var(--red-40);
    --danger-onPrimary: #FFFFFF;
    --danger-primaryVar: var(--red-90);
    --danger-onPrimaryVarLight: var(--red-40);
    --danger-onPrimaryVarDark: var(--red-20);

    /* Green */
    --green-95: #EFF2E3;
    --green-90: #DDE6CD;
    --green-80: #B5D098;
    --green-60: #6D9F3E;
    --green-40: #3A6B00;
    --green-20: #1B3700;

    /* System colors - Success */
    --success-primary: var(--green-40);
    --success-onPrimary: #FFFFFF;
    --success-primaryVar: var(--green-90);
    --success-onPrimaryVarLight: var(--green-40);
    --success-onPrimaryVarDark: var(--green-20);

    /* Gray */
    --gray-100: #FFFFFF;
    --gray-95: #EDF1F7;
    --gray-90: #DBE4EE;
    --gray-80: #BFC7D1;
    --gray-60: #8A929B;
    --gray-40: #575F67;
    --gray-30: #364959;
    --gray-20: #091D2C;

    /* System colors - Neutral */
    --neutral-primary: var(--gray-40);
    --neutral-primaryDark: var(--gray-20);
    --neutral-onPrimary: #FFFFFF;
    --neutral-primaryVar: var(--gray-90);
    --neutral-onPrimaryVarLight: var(--gray-40);
    --neutral-onPrimaryVarDark: var(--gray-20);

    /* System colors - Surface */
    --surface-onSurface: var(--gray-20);
    --surface-onSurfaceVar: var(--gray-30);
    --surface-onSurfaceVarL: var(--gray-40);
    --surface-onSurfacebrand: var(--gray-60);
    --surface-outline: var(--gray-80);
    --surface-outlineVar: var(--gray-90);
    --surface-surface-100: var(--gray-100);
    --surface-surface-200: var(--gray-95);
}

.text-theme-light {
    color: #14A1A1
}

.text-theme {
    color: var(--brand-primary)
}

.btn-dark {
    background-color: var(--brand-primary);
    color: var(--brand-onPrimary);
    border: none;
    border-radius: 5px;
}

.btn-dark:hover {
    background-color: var(--brand-primary);
    color: var(--brand-onPrimary);
    border: none;
    border-radius: 5px;
}

.btn-grey {
    background-color: #E9E9E9;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
}

.btn-light {
    background-color: var(--teal-60);
    color: var(--brand-onPrimary);
    border: none;
    border-radius: 5px;
}

.btn-light:hover {
    background-color: var(--teal-60);
    color: var(--brand-onPrimary);
    border: none;
    border-radius: 5px;
}

.theme-bg {
    background-color: var(--gray-95);
}

.pagination-title {
    position: relative;
}

.pagination-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -16px;
    width: 10px;
    height: 52px;
    border-radius: 5px;
    background-color: var(--teal-60);
}

.number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gray-95);
}


.QA-number {
    position: relative;
    background-color: var(--brand-primaryVar);
    width: 32px;
    height: 32px;
    text-align: center;
    border-radius: 8px;
}

    .QA-number::before {
        content: '';
        bottom: -10%;
        left: 37%;
        transform: rotate(45deg);
        position: absolute;
        background-color: var(--brand-primaryVar);
        width: 8px;
        height: 8px;
    }

.custom-ol {
    list-style: none;
    /* 移除預設 1. 樣式 */
    counter-reset: custom-ol;
    /* 初始化計數器 */
    padding-left: 1.5em;
    /* 控制整體左縮排 */
    margin: 1em 0;
}

.custom-ol > li {
    counter-increment: custom-ol;
    /* 每個 li +1 */
    position: relative;
    margin: 0.4em 0;
    padding-left: 0.5em;
}

/* 在每個 li 前面加上 (1)、(2)、(3)... */
.custom-ol > li::before {
    content: "(" counter(custom-ol) ") ";
    position: absolute;
    left: -1.5em;
    /* 對齊括號位置 */
    /* font-weight: 600; */
}

.custom-marker {
    list-style: none;
    /* 移除預設圓點 */
    position: relative;
}

    .custom-marker::before {
        content: '';
        position: absolute;
        left: -1.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1rem;
        height: 1rem;
        background-color: #5ACFB6;
        border-radius: 3px;
    }

.custom-line {
    position: relative;
}

    .custom-line::before {
        content: '';
        position: absolute;
        width: 45.5%;
        height: 2px;
        top: 50%;
        left: 0;
        background-color: var(--gray-95);
    }

    .custom-line::after {
        content: '';
        position: absolute;
        width: 45.5%;
        height: 2px;
        top: 50%;
        right: 0;
        background-color: var(--gray-95);
    }

.custom-line-2 {
    position: relative;
}

    .custom-line-2::before {
        content: '';
        position: absolute;
        width: 95.5%;
        height: 2px;
        top: 50%;
        right: 0;
        background-color: var(--gray-95);
    }