:root{
    --signature: rgb(0,0,0);
}
/* 모든 텍스트 요소에 폰트 강제 적용 */
* {
    font-family: 'Noto Sans', Arial, sans-serif !important; /* 모든 텍스트 요소에 강제 적용 */
}
.signup-subject{
    width: 360px;
    margin-bottom: 40px;
}
#signupForm1{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height:100vh;
}
h1 {
    font-size: 16pt;
    font-weight: 400;
    line-height: 100%;
    margin: 0;
    color: var(--signature);
}
/* 환영합니다 도우도우에 가입하시려면 약관에 동의해주세요 */
h3{
    font-size: 24pt;
    font-weight: 600;
    line-height: 1.5;
    margin: 0px;
    color: rgb(100,100,100);
    margin: 0;
}
#signupForm0{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height:100vh;
}

#policy-box {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    
}

/* ---------------------------------------------- */
/* 체크박스 전체 */
#checkbox{
    display: flex;
    align-items: center;
    justify-content: space-between; /* 요소들 간의 균등한 간격 유지 */
    flex-direction: column;
    background-color: transparent;
    border: 0px solid rgb(180,180,180);
    border-radius: 20px;
    width: 360px;
    gap:10px;
    padding:0px;
    margin-bottom: 40px;
    
}

/* 체크박스 (개인정보 방침 동의) */
.checkbox-1, .checkbox-2{
    display: flex;
    align-items: center;
    width: 360px;
}

/* 체크박스 주제부 */
.privacyPolicy, .marketingConsent{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 체크박스 체크 부분 */
#privacyPolicy, #marketingConsent{
    width: 16px; /* 체크박스의 너비 */
    height: 16px; /* 체크박스의 높이 */
    appearance: none; /* 브라우저 기본 스타일 제거 */
    border: 1px solid rgb(180,180,180); /* 테두리 추가 */
    border-radius: 10px; /* 둥근 모서리 */
    background-color: white; /* 배경색 */
    cursor: pointer;
    position: relative;
    margin: 0;
    margin-right: 10px;
}
.privacyPolicy-words{
    font-size: 14pt;
}
/* 체크박스 체크 부분 : 체크 후 */
#privacyPolicy:checked, #marketingConsent:checked {
    background-color: var(--signature); /* 체크 시 배경색 변경 */
    border-color: var(--signature); /* 체크 시 테두리 색상 변경 */
}

/* 체크박스 스크롤 부분 */
#policy-container, #policy-container-2 {
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 200px; /* 박스의 높이 */
    border: 1px solid #ccc; /* 테두리 추가 */
    border-radius: 10px; /* 둥근 모서리 */
    overflow-y: auto; /* 스크롤 활성화 */
    box-sizing: border-box; /* 테두리와 패딩 포함 */
    padding: 10px; /* 내부 여백 */
    background-color: #f9f9f9; /* 배경색 */
    outline: none;
    max-height: 100px; /* 높이 제한 */
}
#policy-container{
    margin-bottom: 20px;
}
#policy-container-2{
    margin-bottom: 0px;
}
#policy-container::-webkit-scrollbar-track #policy-container-2::-webkit-scrollbar-track{
    background: transparent; /* 트랙 배경을 투명하게 */
    border: none; /* 트랙의 테두리 제거 */
}
/* 스크롤 바 */
#policy-container::-webkit-scrollbar, #policy-container-2::-webkit-scrollbar {
    width: 8px; /* 스크롤바 너비 */
}
/* 스크롤 테두리 */
#policy-container::-webkit-scrollbar-track, #policy-container-2::-webkit-scrollbar-track {
    background: transparent; /* 트랙 배경 투명 */
    border: none; /* 트랙의 테두리 제거 */
}
/* 스크롤 볼 */
#policy-container::-webkit-scrollbar-thumb, #policy-container-2::-webkit-scrollbar-thumb {
    background: gray; /* 스크롤 핸들 색상 */
    border-radius: 4px; /* 스크롤 핸들 둥글게 */
}

#nextButton{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--signature);
    border: 0px solid rgb(180,180,180);
    width:360px;
    border-radius: 20px;
    margin: 0;
    padding: 0;
    height: 40px;
    color: white;
    font-size: 14pt;
}
#nextButton:disabled{
    background-color: rgb(235,235,235);
    color: rgb(180,180,180);
}

button:hover {
    cursor: pointer; /* hover 상태에서 포인터 모양을 '손가락' 모양으로 설정 */
}