.signSection{
    justify-content: center; 
    align-items: center; 
}

.signCard{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 40px 0;

    background-color: var(--white);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

/* logo */
.signCard .signLogo{
    max-width: 200px;
    margin: 40px 0;
}

.signCard .signLogo img{
    width: 100%;
}

/* 表單樣式見form.css */
/* 表單-輸入區塊 */
.signCard .signForm{
    width: 100%;
    padding: 20px;
    /* 讓signInput跟signBtn與signForm之間產生間距 */
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    /* align-items: center; */
    margin-bottom: 24px;
}

.signCard .signForm .signInput{
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
}

/* 輸入框樣式 */
.signForm .signInput input{
    width: 100%;
    box-sizing: border-box;

    font-size: var(--fz-1);
    padding: 16px;
    border: 1px solid var(--lightgray);
    outline: none;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.signForm .signInput input::placeholder{
    font-size: var(--fz-1);
    color: var(--lightgray);
}

.signForm .signInput input:focus{
    border-color: var(--secondary); 
    box-shadow: 0 0 0 3px var(--secondary);
}

/* 忘記密碼 */
.signForm .forgotPassword a{
    display: block;
    text-align: left;
    font-size: var(--fz-1);

    margin-top: -8px;
    margin-bottom: 24px;
    text-decoration: none;  
    color: var(--primary);
}

.signForm .forgotPassword a:hover{
    color: var(--secondary);
}

/* 註冊文字 */
.signForm .signUpLink{
    font-size: var(--fz-1);
    letter-spacing: 1px;
    color: var(--primary);
    a{
        color: var(--secondary);
    }
}

/* btn樣式見button.css */
/* .signForm .signBtn{
    width: 100%;
    box-sizing: border-box;

    padding: 16px;
    margin-bottom: 16px;

    color: var(--white);
    background-color: var(--primary);

    font-size: var(--fz-2);
    font-weight: var(--fw-3);
    letter-spacing: 3.36px;
}

.signForm .signBtn:hover{
    background-color: var(--secondary);
    border: 2px solid var(--secondary);
    cursor: pointer;
} */

/* 快速登入 */
.signCard .fastSign{
    width: 100%;
    margin: 30px 0;
    letter-spacing: 1px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.signCard .fastSign::before,.signCard .fastSign::after {
    content: "";
    width: 30%;
    height: 1px;
    background-color: var(--lightgray);
}

.signCard .fastSign span{
    color: var(--darkgray);
    font-size: var(--fz-1);
    letter-spacing: 0.8px;

    padding: 0 15px;
    white-space: nowrap;
}

/* 第三方登入 */
.signCard .socialSign{
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
}

.signCard .socialSign .socialIcon{
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 60px; 
    height: 60px;
    border-radius: 50%;
    background-color: var(--white); 
    border: 1px solid var(--lightgray);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.signCard .socialSign .socialIcon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}



@media screen and (min-width: 480px){
/* 表單-輸入區塊 */
    .signCard .signForm{
        padding: 30px;
        max-width: 600px;
    }  
}


@media screen and (min-width: 768px){
/* 表單-輸入區塊 */
    .signCard .signForm{
        padding: 40px;
        max-width: 600px;
    }
    .signCard .signForm .signInput{
        margin-bottom: 20px;
    }
/* 輸入框樣式 */
    .signForm .signInput input{
        font-size: var(--fz-2);
    }
    .signForm .signInput input::placeholder{
        font-size: var(--fz-2);
    }
/* 忘記密碼 */
    .signForm .forgotPassword a{
        font-size: var(--fz-2);
    }

/* 註冊文字 */
    .signForm .signUpLink{
        font-size: var(--fz-2);
        letter-spacing: 1.2px;
    }

/* btn樣式見button.css */
/* 快速登入 */
    .signCard .fastSign span{
        font-size: var(--fz-2);
        letter-spacing: 1px;
    }
}