body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    /* 마켓 컬리 폰트 사용 (Pretendard 폰트 로드 실패 시 옆에 있는 폰트들 사용.) */
    background-color: #1E1E1E;
    /* 배경색 어두운 색으로 변경 */
    margin: 0;
    /* 기본 여백 제거 */
}

nav {
    background-color: #010101;
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 20px;
}

.nav-ele {
    display: flex;
    gap: 15px;
}

.nav-logo {
    width: 50px;
}

.nav-ele div a {
    text-decoration: none;
    color: #FFFFFF;
}

.nav-ele {
    display: flex;
    align-items: center;     /* 세로 중앙 정렬 */
}

header {
    background-color: #141414;
    padding: 20px;
    color: #FFFFFF;
    text-align: center;
    border-bottom: 3px solid #484848;
}

header a {
    text-decoration: none;
    color: #FFFFFF;
}

main {
    margin: 0 auto;
    /* 좌우 가운데 정렬 */
    width: 640px;
    /* 고정 너비 */
    margin-top: 50px;
    /* 상단 여백 */
}

.title {
    margin-bottom: 50px;
    /* 하단 여백 */
    font-size: 28px;
    /* 글자 크기 */
    line-height: 35px;
    /* 줄 높이 */
    font-weight: 500;
    /* 글자 굵기*/
    text-align: center;
    /* 텍스트 가운데 정렬 */
    letter-spacing: -1px;
    /* 자간 좁히기 */
    color: #E0E0E0;
    /* 글자색 */
}

.join-required {
    padding-bottom: 10px;
    /* 하단 안쪽 여백 */
    border-bottom: 2px solid #444444;
    /* 하단 테두리 2px 실선 */
    font-size: 12px;
    /* 작은 글자 크기 */
    color: #A0A0A0;
    /* 중간 회색 글자색 */
    line-height: 17px;
    text-align: right;
    /* 오른쪽 정렬 */
}

.red {
    color: #ff7b8b;
    /* 빨간 강조색 */
}

.input-box {
    display: inline-flex;
    /* 플렉스 (내용물 자체 크기만 차지) */
    padding: 10px 20px;
    /* 상하 10px, 좌우 20px 안쪽 여백 */
}

label {
    font-weight: 500;
    color: #E0E0E0;
    line-height: 20px;
    min-width: 139px;
    /* 라벨 최소 너비 (정렬용) */
}

.input-general {
    width: 381px;
    /* 입력창 너비 */
    height: 46px;
    /* 입력창 높이 */
    padding: 0px 11px 1px 15px;
    /* 상 우 하 좌 안쪽 여백 */
    border-radius: 4px;
    /* 모서리 둥글기 */
    border: 1px solid #444444;
    /* 연한 회색 테두리 */
    font-weight: 400;
    /* 글자 굵기 */
    font-size: 16px;
    line-height: 1.5;
    /* 줄 높이 1.5배 */
    color: #E0E0E0;
    background-color: #2A2A2A;
    outline: none;
    /* 포커스 시 외곽선 제거 */
    box-sizing: border-box;
    /* padding, border를 너비에 포함 */
}

.email-form {
    position: relative;
    /* 가장 가까운 static이 아닌 부모요소를 기준으로 삼음 */
    height: 48px;
    width: 381px;
    border-radius: 4px;
    border: 1px solid #444444;
    background-color: #2A2A2A;
    display: flex;
    /* 플렉스 박스 레이아웃 */
    -webkit-box-align: center;
    /* 웹킷 브라우저 세로 중앙 정렬 */
    align-items: center;
    /* 세로 중앙 정렬 */
}

.email-at {
    position: absolute;
    /* 부모 기준 절대 위치 */
    left: 50%;
    /* 왼쪽에서 50% */
    transform: translateX(-50%);
    /* 자기 너비의 50% 왼쪽으로 이동 (정중앙) */
    font-size: 16px;
    line-height: 1.5;
    color: #E0E0E0;
}

.emailId {
    width: 50%;
    /* 부모 너비의 절반 */
    height: 46px;
    padding: 0px 11px 1px 15px;
    border: none;
    /* 테두리 제거 */
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #E0E0E0;
    background-color: transparent;
    outline: none;
    box-sizing: border-box;
}

#email-domain {
    width: 50%;
    height: 46px;
    padding: 0px 11px 1px 15px;
    border: none;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #E0E0E0;
    background-color: transparent;
    outline: none;
    box-sizing: border-box;
}

.send {
    margin-left: 8px;
    /* 왼쪽 바깥 여백 */
    display: block;
    /* 블록 요소로 표시 */
    padding: 0px 10px;
    text-align: center;
    overflow: hidden;
    /* 넘치는 내용 숨김 */
    width: 120px;
    height: 46px;
    border-radius: 3px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    background-color: #2A2A2A;
    /* 흰색 배경 */
    border: 1px solid #ffffff;
    /* 보라색 테두리 */
}

.address {
    padding: 0px 10px;
    text-align: center;
    width: 381px;
    height: 44px;
    border-radius: 4px;
    color: #ffffff;
    background-color: #2A2A2A;
    border: 1px solid #ffffff;
    cursor: pointer;
}

.address-button-text {
    display: flex;
    justify-content: center;
    /* 가로 중앙 정렬 */
}

.address-button-text div {
    padding-top: 3px;
    /* 상단 안쪽 여백 (아이콘과 텍스트 정렬용) */
}

.gender {
    display: flex;
    gap: 10px;
    /* 플렉스 자식 간 간격 */
}

input[type="radio"] {
    min-width: 24px;
    /* 라디오 버튼 최소 너비 */
    min-height: 24px;
    /* 라디오 버튼 최소 높이 */
    display: inline-block;
    position: relative;
    border-radius: 50%;
    /* 완전한 원형 */
    box-sizing: border-box;
    border: 2px solid #444444;
    cursor: pointer;
    /* 마우스 커서를 손가락 모양으로 */
    appearance: none;
    /* 브라우저 기본 라디오 스타일 제거 */
    -webkit-appearance: none;
    /* 웹킷 브라우저 기본 스타일 제거 */
    background-color: #2A2A2A;
}

input[type="radio"]:checked {
    border: 7px solid #2275ce;
    /* 내부 원 효과를 주면서 다크모드에서 선명하게 보임 */
}

.gender label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #E0E0E0;
}

.birth {
    height: 44px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    /* 부모 너비에 맞춤 */
    border-radius: 3px;
    border: 1px solid #444444;
    background-color: #2A2A2A;
}

.input-birth {
    width: 124px;
    height: 40px;
    border-radius: 4px;
    font-weight: 400;
    text-align: center;
    font-size: 14px;
    line-height: 38px;
    border: none;
    color: #E0E0E0;
    background-color: transparent;
    outline: none;
    box-sizing: border-box;
}

.birth-separator {
    font-size: 14px;
    line-height: 40px;
    color: #555555;
    /* 연한 회색 (구분자 슬래시) */
}

.join-border {
    padding: 10px 0px;
    border-bottom: 1px solid #444444;
    margin-bottom: 10px;
}

.terms-label {
    font-weight: 500;
    color: #E0E0E0;
    line-height: 20px;
    min-width: 139px;
}

.all-terms {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    vertical-align: top;
    /* 인라인 요소 상단 정렬 */
    line-height: normal;
    /* 기본 줄 높이 */
    color: #E0E0E0;
    padding: 0px;
    font-weight: 500;
    font-size: 17px;
}

.all-terms div {
    margin-right: 12px;
    /* 오른쪽 바깥 여백 */
}

.term-ic {
    font-size: 10px;
    color: #A0A0A0;
    padding-top: 4px;
    padding-left: 36px;
    /* 체크박스 너비만큼 들여쓰기 */
    margin: 0px;
}

.terms-of-elements {
    margin-top: 16px;
    /* 상단 바깥 여백 */
}

.gen-terms {
    font-size: 14px;
    line-height: normal;
    color: #E0E0E0;
}

.terms-info {
    padding-left: 5px;
    color: #888888;
    word-break: keep-all;
    /* 한글 단어 단위 줄바꿈 */
    font-weight: 400;
}

.terms-content-box {
    width: 381px;
}

.term-row {
    display: flex;
    justify-content: space-between;
    /* 양쪽 끝 정렬 */
    align-items: center;
    margin-bottom: 20px;
}

.term-all {
    margin-bottom: 5px;
}

.all-terms-text {
    font-size: 18px;
    font-weight: 500;
}

.term-row-group {
    margin-bottom: 20px;
}

.sub-terms-row {
    display: flex;
    gap: 80px;
    /* 하위 약관 항목 간 넓은 간격 */
    padding-left: 36px;
}

.check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-terms-link {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    /* 밑줄 제거 */
    letter-spacing: -0.3px;
}

.submit-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 60px;
    border-top: 1px solid #333333;
    /* 상단 구분선 */
}

.btn-join {
    width: 240px;
    height: 56px;
    background-color: #ffffff;
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* [CSS 수정] 기본(미체크) 상태의 SVG 스타일 강제 오버라이드 */
.check-icon path:first-child {
    fill: #2A2A2A !important;
    stroke: #444444 !important;
}

.check-icon path:last-child {
    stroke: #555555 !important;
    /* 체크 표시선도 미체크 시에는 어둡게 처리 */
}

/* [CSS 수정] 체크 시 보라색(또는 밝은 회색) 원 + 흰색 체크마크 */
.check-icon.checked path:first-child {
    fill: #2275ce !important;
    /* 브랜드 보라색 계열로 변경 */
    stroke: #2275ce !important;
}

.check-icon.checked path:last-child {
    stroke: #ffffff !important;
    /* 체크 표시는 선명한 흰색 */
}


.check-icon {
    cursor: pointer;
}

#email-domain option {
    background-color: #2A2A2A;
    color: #E0E0E0;
}

#email-manual {
    display: none;
    width: 50%;
    height: 46px;
    border: none;
    padding: 0 11px;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    background-color: transparent;
    color: #E0E0E0;
}

/* 로그인 페이지 버튼 스타일 */
.button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 버튼 가운데 정렬 */
    gap: 12px;
    /* 버튼 간 간격 */
    padding: 40px 20px;
    /* 상하 우좌 안쪽 여백 */
    border-top: 1px solid #333333;
    /* 상단 구분선 */
    margin-top: 20px;
    /* 상단 바깥 여백 */
}

.btn {
    width: 240px;
    height: 56px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    /* 링크의 밑줄 제거 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 텍스트 가운데 정렬 */
    transition: background-color 0.3s ease;
    /* 배경색 변화 부드럽게 */
}

.btn-login {
    background-color: #2275ce;
    /* 파란색 */
    color: #ffffff;
    /* 흰색 글자 */
}

.btn-login:hover {
    background-color: #1a5a9f;
    /* 호버 시 더 진한 파란색 */
}

.btn-join {
    background-color: #ffffff;
    /* 흰색 */
    color: #000000;
    /* 검정색 글자 */
}

.btn-join:hover {
    background-color: #e0e0e0;
    /* 호버 시 밝은 회색 */
}