html {
    font-size: 55% !important; 
}

.header-signup {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--form-logo-padding-v) 0; 
    background-color: var(--color-bg-primary);
    border-bottom: none;
    box-shadow: none;
}

.logo-home img {
    display: block;
    width: var(--form-logo-width);
    height: auto;
}

.signup-main {
    padding-bottom: var(--space-md);
    display: flex;
    /*가입 상자*/
    justify-content: center;
    background-color: var(--color-bg-primary);
}

.signup-inner {
    width: 100%;
    max-width: 55.0rem;
    position: relative;
}

.signup-tabs {
    display: flex;
    position: relative;
    /*층 쌓기*/
    z-index: 20; 
}

.signup-tabs button {
    flex: 1;
    padding: var(--btn-padding-tab-t) 0 var(--btn-padding-tab-b);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    position: relative;
    z-index: 1; 
}

.signup-tabs button.on {
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-bg-primary); 
    margin-bottom: -1px; 
    z-index: 15; 
}

.common-info, .seller-info-area {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: var(--form-box-padding);
    position: relative;
    z-index: 10; 
    margin-top: -1px; 
}

/* 구매자 영역 아래에 연결 */
.seller-info-area {
    border-radius: 0;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* 판매자 탭 활성화 시 구매자 영역 하단 border-radius 제거 */
.signup-form.seller-mode .common-info {
    border-radius: 0;
    border-bottom: none;
}

/* 판매자 탭 활성화 시 판매자 영역 하단 border-radius 추가 */
.signup-form.seller-mode .seller-info-area {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    display: block;
}

/* 판매자 영역 숨김 (기본) */
.seller-info-area {
    display: none;
}

label[for="phone-prefix"] {
    display: block; 
    margin-top: var(--space-form); 
}

/*마지막 행*/
.common-info .input-row:last-of-type {
    margin-bottom: var(--space-xs); 
}

.form-footer {
    padding: 0 var(--space-md);
    padding-top: 0;
}

.check-label {
    position: relative;
    display: block;
    padding-left: 2.6rem;
    margin-top: var(--space-md) !important;
    margin-bottom: 0;
    cursor: pointer;
}

.check-label input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0; 
}

.check-text {
    display: block;
    font-size: 1.5rem; 
    color: var(--color-text-muted);
    line-height: 1.6; 
    /*단어 단위 줄바꿈*/
    word-break: keep-all;
}

.check-text a {
    font-weight: var(--fw-bold);
    text-decoration: underline;
    color: var(--color-text-muted);
}

.btn-submit-join {
    width: 100%;
    height: var(--btn-height-md);
    margin-top: var(--form-gap);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-sm);
    background-color: var(--color-primary); 
    color: var(--color-text-inverse);
    transition: background-color 0.3s ease;
}

/*비활성화 상태*/
.btn-submit-join:disabled {
    background-color: var(--color-border-primary) !important;
    color: var(--color-text-inverse);
    cursor: not-allowed;
}

/*체크박스 제외 텍스트 입력창*/
.signup-form input:not([type="checkbox"]), 
.signup-form select {
    width: 100%;
    height: var(--form-input-height);
    padding: 0 var(--form-input-padding-x);
    line-height: normal; 
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    /*box 크기 고정*/
    box-sizing: border-box;
}

.signup-form label {
    display: block;
    font-size: var(--fs-md);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xs);
    margin-top: 1.2rem;
}

.input-row {
    position: relative;
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--form-gap);
}

.input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

input[type="password"] {
    font-size: var(--form-pw-dots-fs);
    letter-spacing: var(--form-pw-dots-ls);
    font-family: sans-serif; 
    padding-right: 4.5rem;
}

.btn-check, .btn-verify {
    width: 13.5rem;
    height: var(--form-input-height);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-sm);
    font-size: var(--form-fs-btn);
}

.btn-check:hover, .btn-verify:hover {
    background-color: var(--color-primary-hover);
}

.btn-check:active, .btn-verify:active {
    background-color: var(--color-primary-active);
}

.msg-error, .msg-success, .error-message, .msg-box {
    display: block;
    margin-top: var(--form-space-msg);
    margin-bottom: 0.8rem;
    font-size: var(--form-fs-msg); 
    line-height: 1.4rem;
    min-height: 1.6rem;
    word-break: keep-all;
}

.msg-error, .error-message {
    color: var(--color-error); 
}

.msg-success {
    color: var(--color-success);
}

/* 메시지 박스 표시 상태 */
.msg-box.show {
    position: relative;
    width: auto;
    height: auto;
    margin: var(--form-space-msg) 0 0.8rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.msg-box.show.error {
    color: var(--color-error);
}

.msg-box.show.success {
    color: var(--form-color-success);
}

.icon-valid-check {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    pointer-events: none;
    z-index: 10;
    opacity: 1; 
    object-fit: contain;
}

.input-error {
    border-color: var(--color-error) !important;
}

/* 입력창 에러 시 테두리 강조 */
.input-error {
    border-color: var(--color-error) !important;
}

/* 성공시 */
.input-success {
    border-color: var(--color-success) !important;
}