body {
    background-color: #F3F4F9;
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#form-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#form-inner-container {
    background-color: white;
    max-width: 70%;
    border-radius: 8px;
    box-shadow: 0 0 20px gainsboro;
}

#sign-up-container, #sign-in-container {
    padding: 60px 80px;
    width: 640px;
    /* width: 320px; */
    display: inline-block;
}

#form-inner-container input {
    display: block;
    margin-bottom: 20px;
    border: 1px solid #E5E9F5;
    background-color: #F6F7FA;
    padding: 8px; /* height 지정 */
    margin-top: 10px;
    border-radius: 10px;
    width: 100%;
}

#form-inner-container select {
    display: block;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px; /* input과 동일한 여백 */
    border: 1px solid #E5E9F5;
    background-color: #F6F7FA;
    border-radius: 10px;
    font-size: 16px; /* 글자 크기 맞춤 */
    color: #333333;
    
    /* 화살표 커스텀을 위한 필수 속성 */
    -webkit-appearance: none; /* 사파리/크롬 기본 화살표 제거 */
    -moz-appearance: none;    /* 파이어폭스 기본 화살표 제거 */
    appearance: none;         /* 표준 브라우저 기본 화살표 제거 */
    
    /* 깔끔한 커스텀 다운 화살표 이미지 아이콘 (SVG) 추가 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23707D93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center; /* 오른쪽에 패딩만큼 띄워서 배치 */
    background-size: 18px; /* 화살표 크기 */
    
    cursor: pointer;
    box-sizing: border-box; /* 크기 계산 오류 방지 */
}

/* 마우스를 올렸을 때 반응 (선택사항) */
#form-inner-container select:hover {
    border-color: #cbd5e1;
}

/* 클릭해서 메뉴가 열렸을 때 반응 (선택사항) */
#form-inner-container select:focus {
    outline: none;
    border-color: #6366f1; /* 부드러운 포인트 컬러 테두리 */
}


#captcha-controls {
    margin-top: 40px;
}

#form-controls {
	margin-top: 4cc0px;
    margin-bottom: 20px;
}


h3 {
    display: inline-flex;  /* 글자와 이미지를 한 줄로 나란히 배치 */
    align-items: center;   /* 세로 기준 정중앙 정렬 (높낮이 뒤틀림 방지) */
    gap: 8px;              /* 타이틀 글자와 이미지 사이의 간격 (원하는 대로 조절) */
    
    color: #293865;
    font-size: 150%;
    font-weight: 500;
    margin-bottom: 40px;
}

h3 .title-icon {
    height: 1em;           /* 현재 글자 높이(font-size)와 100% 똑같은 높이 지정 */
    width: 1em;            /* 높이와 똑같은 너비를 주어 완벽한 '정사각형' 유지 */
    object-fit: contain;   /* 이미지가 일그러지지 않고 비율을 유지하며 상자 안에 쏙 들어가게 함 */
}

label {
    color: #7369AB;
}

::placeholder {
    color: #C0C7DB;
    font-size: larger;
    letter-spacing: 1.0px;
    /* letter-spacing: 1.2px; */
}

/* 기본 placeholder 글자 크기 및 색상 조절 */
#form-inner-container input::placeholder,
#form-inner-container select:invalid {
    font-size: 14px; /* 기존 16px에서 14px로 축소 (원하는 크기로 조절 가능) */
    color: #718096;  /* 글자가 작아진 만큼 보기 편하도록 부드러운 회색으로 변경 #A0AEC0 */
}

/* 인터넷 익스플로러 등 구형 브라우저 호환성용 (선택사항) */
#form-inner-container input::-webkit-input-placeholder { font-size: 14px; color: #718096; }
#form-inner-container input::-ms-input-placeholder { font-size: 14px; color: #718096; }

/* 1. 입력창과 버튼을 한 줄로 배치하는 컨테이너 */
#form-inner-container .phone-row {
    display: flex;
    gap: 10px; /* 입력창과 버튼 사이의 간격 */
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px; /* 기존 input들과 동일한 하단 여백 */
}

/* 2. 한 줄 컨테이너 안의 input 스타일 조정 */
#form-inner-container .phone-row .phone-input {
    flex: 1; /* 남은 공간을 모두 차지하도록 설정 */
    margin-top: 0; /* 부모(phone-row)에서 마진을 제어하므로 0으로 초기화 */
    margin-bottom: 0; /* 부모(phone-row)에서 마진을 제어하므로 0으로 초기화 */
    box-sizing: border-box;
}

/* 3. 인증번호발송 버튼 스타일 (기존 input 디자인 톤 유지) */
#form-inner-container .phone-row .cert-btn {
    padding: 8px; /* input과 동일한 위아래 두께 유지 */
    white-space: nowrap; /* 버튼 글자가 아래로 줄바꿈되는 것 방지 */
    /* border: 1px solid #E5E9F5; */
    /* background-color: #E5E9F5; */ /* 기존 테두리 색상을 배경으로 써서 톤온톤 매칭 */
    /* color: #4A5568; */ /* 선명한 글자 색상 */
    font-size: 14px; /* font-size: 16px; */
    /* font-weight: bold; */
    border-radius: 10px;
    cursor: pointer;
    /* box-sizing: border-box; */
    /* transition: background-color 0.2s; */
}

/* 인증 버튼에 마우스 올렸을 때 효과 */
/*
#form-inner-container .phone-row .cert-btn:hover {
    background-color: #cbd5e1;
    border-color: #cbd5e1;
}
*/

/* 1. 전체를 한 줄로 배치하는 컨테이너 */
#form-inner-container .code-row {
    display: flex;
    align-items: center;
    gap: 8px; /* 요소들 사이의 좁은 간격 */
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* 2. 입력창과 타이머를 감싸는 내부 박스 */
#form-inner-container .code-row .code-input-wrapper {
    position: relative;
    flex: none; /* 늘어나지 않도록 고정 */
    width: 50%; /* 50% 크기 지정 */
    /* flex: 1; */ /* 남은 공간을 넓게 차지 */
    /* min-width: 130px; */ /* 너무 줄어들지 않도록 최소 너비 확보 */
}

/* 3. 인증번호 입력창 내부 패딩 조정 */
#form-inner-container .code-row .code-input {
    /* width: 100%; */
    width: 100%;
    padding: 8px 10px 8px 10px; /* 우측에 타이머가 들어갈 확보 */
    margin: 0;
    box-sizing: border-box;
}

/* 4. 입력창 우측 안쪽에 고정될 타이머 스타일 */
#form-inner-container .code-row .timer {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #E53E3E; /* 붉은색 타이머 */
    font-size: 14px;
    font-weight: bold;
    pointer-events: none; /* 클릭 방해 금지 */
}

/* 5. 확인 및 연장 버튼 공통 스타일 */
#form-inner-container .code-row .action-btn {
    padding: 8px 15px; /* 양옆 패딩을 줄여 좁은 공간에 최적화 */
    white-space: nowrap;
    border: 1px solid #E5E9F5;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s;
}

/* 인증 버튼 (포인트 컬러 부여 가능) */
#form-inner-container .code-row .verify-btn {
    background-color: #0d6efd;
    color: #FFFFFF;
}
#form-inner-container .code-row .verify-btn:hover { background-color: #0b5ed7; }

/* 연장 버튼 */
#form-inner-container .code-row .retry-btn {
    background-color: #dc3545;
    color: #FFFFFF;
}
#form-inner-container .code-row .retry-btn:hover { background-color: #bb2d3b; }

/* 6. 결과 메시지 (성공/실패) 스타일 */
#form-inner-container .code-row .result-msg {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    padding: 0 5px;
}
.text-success { color: #38A169; } /* 초록색 성공 문구 */
.text-error { color: #E53E3E; }   /* 붉은색 실패 문구 */


#form-controls button {
    border: none;
    font-size: 120%;
}

#form-controls button:hover {
    cursor: pointer;
}

#btnLogin, #btnRegister {
    padding: 16px 75px;
    /* background-color: #ED4B5E; */
    background-color: #293865;
    border-radius: 10px;
    color: white;
}

#btnLogin, #btnRegister:hover {
    /* background-color: #ff6678; */
    background-color: #293865;
}

#toggleSignIn, #toggleSignUp {
    /* padding: 16px 0 16px 35px; */
    padding: 16px 10px 16px 10px;
    background-color: transparent;
    /* color: #ED4B5E; #293865 */
    color: #0072BB;
}

#terms {
    width: 30px;
    height: 30px;
    appearance: none;
    border: 2px solid #7369AB;
    border-radius: 4px;
    position: relative;
}

#terms:checked:after {
    content: '\2713';
    color: #7369AB;
    font-size: 24px;
    position: absolute;
    top: 0;
    left: 3px;
}

label[for="terms"] {
    display: inline-block;
    width: 80%;
    margin-left: 10px;
}

.termsLink {
    color: #EF7886;
    text-decoration: none;
}

.hide {
    display: none!important;
}

/* responsive display */

@media(max-width:1438px) {

}

@media(max-width:1124px) {

    #form-inner-container{
        display: flex;
        justify-content: center;
    }
}

@media(max-width: 684px) {
    #form-controls {
        text-align: center;
        margin: 0;
        padding: 0;
    }

    button {
        width: 100%;
    }

    #form-inner-container input {
        width: 85%;
    }

    #toggleSignIn, #toggleSignUp {
        padding: 16px 75px;
    }

    #terms {
        width: 20px;
        height: 20px;
    }
    
    label[for="terms"] {
        display: inline-block;
        font-size: smaller;
    }
}