/**
 * HC Login Pro - 폼 요소 스타일 (Joyn 통합)
 * 
 * File: forms.css
 * Version: 3.2.0
 * 
 * - 입력 높이: 52px (모바일 48px)
 * - 테두리: 2px
 * - 현대적인 포커스 스타일
 */

/* 상단 패딩은 login-form-design.css에서만 제어(forms.css에서 제거해 방해 요소 제거) */

/* 회원가입 폼 - 세로 공간 절약 */
.hc-register-form-wrapper .hc-form {
    gap: var(--hc-space-4);
}

/* 소셜 로그인 컨테이너 - 로그인 버튼과의 간격 */
.hc-login-form-wrapper #hc-social-login-container,
.hc-register-form-wrapper #hc-social-login-container,
.hc-form-wrapper #hc-social-login-container {
    margin-top: var(--hc-space-4);
}

/* 산수 캡차 - 라벨 아래에 문제와 입력란 한 줄로 배치 */
.hc-math-captcha-wrap .hc-math-captcha-row {
    display: flex;
    align-items: center;
    gap: var(--hc-space-3);
    flex-wrap: wrap;
}
.hc-math-captcha-wrap .hc-math-question {
    font-weight: var(--hc-font-semibold);
    font-size: var(--hc-text-base);
}
.hc-math-captcha-wrap .hc-math-answer {
    width: 6rem;
    min-width: 6rem;
}

/* ========================================
   기본 폼 레이아웃
   ======================================== */
.hc-form {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-5);
    font-family: var(--hc-font-sans);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.hc-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-2);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ========================================
   라벨 스타일
   ======================================== */
.hc-form-group label {
    font-size: var(--hc-text-sm);
    font-weight: var(--hc-font-semibold);
    color: var(--hc-text-primary);
    display: flex;
    align-items: center;
    gap: var(--hc-space-1);
}

.hc-form-group label .required {
    color: var(--hc-error);
    font-weight: var(--hc-font-bold);
}

/* 라벨 옆 힌트 텍스트 */
.hc-label-hint {
    color: var(--hc-text-muted);
    font-size: var(--hc-text-xs);
    font-weight: var(--hc-font-normal);
}

/* ========================================
   입력 필드 - Joyn 스타일 (52px, 2px border)
   ======================================== */
.hc-form-input,
.hc-form-select,
.hc-form-textarea {
    width: 100%;
    height: var(--hc-input-height);
    padding: 0 var(--hc-space-4);
    font-family: var(--hc-font-sans);
    font-size: var(--hc-text-base);
    font-weight: var(--hc-font-normal);
    color: var(--hc-text-primary);
    background: var(--hc-bg-input);
    border: 2px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    outline: none;
    transition: all var(--hc-transition);
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.hc-form-textarea {
    height: auto;
    min-height: 120px;
    padding: var(--hc-space-4);
    resize: vertical;
    line-height: 1.6;
}

/* Placeholder 스타일 */
.hc-form-input::placeholder,
.hc-form-select::placeholder,
.hc-form-textarea::placeholder {
    color: var(--hc-text-light);
    font-weight: var(--hc-font-normal);
}

/* ========================================
   포커스 상태 - 강화된 스타일
   ======================================== */
.hc-form-input:focus,
.hc-form-select:focus,
.hc-form-textarea:focus {
    border-color: var(--hc-primary);
    box-shadow: var(--hc-focus-ring);
}

/* ========================================
   호버 상태
   ======================================== */
.hc-form-input:hover:not(:focus):not(:disabled),
.hc-form-select:hover:not(:focus):not(:disabled),
.hc-form-textarea:hover:not(:focus):not(:disabled) {
    border-color: var(--hc-border-dark);
}

/* ========================================
   비활성 상태
   ======================================== */
.hc-form-input:disabled,
.hc-form-select:disabled,
.hc-form-textarea:disabled {
    background: var(--hc-bg-tertiary);
    color: var(--hc-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ========================================
   유효성 검사 상태
   ======================================== */
.hc-form-input.hc-field-error,
.hc-form-input:invalid:not(:placeholder-shown) {
    border-color: var(--hc-error);
}

.hc-form-input.hc-field-error:focus {
    box-shadow: var(--hc-focus-ring-error);
}

.hc-form-input.hc-field-valid {
    border-color: var(--hc-success);
}

.hc-form-input.hc-field-valid:focus {
    box-shadow: var(--hc-focus-ring-success);
}

/* ========================================
   도움말 텍스트
   ======================================== */
.hc-form-help {
    font-size: var(--hc-text-xs);
    color: var(--hc-text-muted);
    line-height: 1.5;
    margin-top: var(--hc-space-1);
}

.hc-form-help.hc-help-error {
    color: var(--hc-error);
    font-weight: var(--hc-font-medium);
}

.hc-form-help.hc-help-success {
    color: var(--hc-success);
    font-weight: var(--hc-font-medium);
}

/* ========================================
   입력 래퍼 (버튼 포함)
   ======================================== */
.hc-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.hc-input-wrapper .hc-form-input {
    padding-right: 52px;
}

.hc-input-wrapper .hc-input-btn {
    position: absolute;
    right: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hc-primary);
    color: var(--hc-text-inverse);
    border: none;
    border-radius: var(--hc-radius-md);
    cursor: pointer;
    transition: all var(--hc-transition);
}

.hc-input-wrapper .hc-input-btn:hover {
    background: var(--hc-primary-hover);
}

/* ========================================
   체크박스 & 라디오 - 현대적 스타일
   ======================================== */
.hc-checkbox-group,
.hc-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-3);
}

.hc-checkbox-label,
.hc-radio-label {
    display: flex !important;
    align-items: center !important;
    gap: var(--hc-space-3);
    cursor: pointer;
    font-size: var(--hc-text-sm);
    font-weight: var(--hc-font-normal);
    color: var(--hc-text-primary);
    user-select: none;
    width: auto !important;
    max-width: none !important;
}

.hc-checkbox-label input[type="checkbox"],
.hc-radio-label input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
    accent-color: var(--hc-primary);
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hc-checkbox-label span,
.hc-radio-label span {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
    line-height: normal !important;
}

.hc-checkbox-label:hover,
.hc-radio-label:hover {
    color: var(--hc-primary);
}

/* ========================================
   폼 링크 섹션
   ======================================== */
.hc-form-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--hc-space-3);
    margin-top: var(--hc-space-6);
    padding-top: var(--hc-space-6);
    border-top: 1px solid var(--border-2);
    font-size: var(--hc-text-sm);
    white-space: nowrap;
}

.hc-form-links span {
    color: var(--hc-text-muted);
}

/* 텍스트 링크 스타일 (버튼 아님) */
.hc-link,
.hc-login-link,
.hc-register-link,
.hc-reset-link {
    color: var(--hc-primary);
    text-decoration: none;
    font-weight: var(--hc-font-medium);
    transition: color var(--hc-transition-fast);
    /* 버튼 스타일 제거 - 순수 텍스트 링크 */
    padding: 0;
    background: none;
    border-radius: 0;
}

.hc-link:hover,
.hc-login-link:hover,
.hc-register-link:hover,
.hc-reset-link:hover {
    color: var(--hc-primary-hover);
    text-decoration: underline;
    background: none;
}

/* ========================================
   폼 액션 버튼 영역
   ======================================== */
.hc-form-actions {
    margin-top: var(--hc-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-3);
}

.hc-form-actions .hc-btn {
    width: 100%;
}

/* ========================================
   SELECT 드롭다운 스타일
   ======================================== */
.hc-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' 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 16px center;
    padding-right: 48px;
    cursor: pointer;
}

.hc-form-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' 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");
}

/* ========================================
   반응형 - 모바일
   ======================================== */
@media (max-width: 640px) {
    .hc-form {
        gap: var(--hc-space-4);
    }
    
    .hc-form-input,
    .hc-form-select {
        height: var(--hc-input-height);
        font-size: 16px; /* iOS 줌 방지 */
    }
    
    .hc-form-group label {
        font-size: var(--hc-text-sm);
    }
    
    /* 하단 링크 - 모바일에서도 가로 유지 */
    .hc-form-links {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--hc-space-2);
        font-size: var(--hc-text-xs);
        white-space: nowrap;
    }
    
    .hc-link,
    .hc-login-link,
    .hc-register-link,
    .hc-reset-link {
        padding: 0;
        text-align: center;
    }
}

/* ========================================
   태블릿 이상
   ======================================== */
@media (min-width: 641px) {
    .hc-form-links {
        flex-direction: row;
    }
}