/**
 * HC Login Pro - 기본 레이아웃 (Joyn 통합)
 * 
 * File: base.css
 * Version: 3.2.0
 */

/* ========================================
   기본 리셋 & 박스 모델
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ========================================
   폼 래퍼 - 중앙 정렬 카드
   ======================================== */
.hc-form-wrapper {
    width: 100%;
    max-width: var(--hc-form-width);
    margin: var(--hc-space-8) auto 0 auto; /* 상단 메뉴와 간격 (32px) */
    padding: var(--hc-space-8);
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    font-family: var(--hc-font-sans);
    box-sizing: border-box;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hc-form-wrapper:focus-within {
    border-color: var(--border-1);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   폼 타이틀
   ======================================== */
.hc-form-title {
    font-size: var(--hc-text-2xl);
    font-weight: var(--hc-font-bold);
    color: var(--hc-text-primary);
    text-align: center;
    margin: 0 0 var(--hc-space-6) 0;
    line-height: 1.3;
}

.hc-form-subtitle {
    font-size: var(--hc-text-base);
    font-weight: var(--hc-font-normal);
    color: var(--hc-text-secondary);
    text-align: center;
    margin: calc(var(--hc-space-2) * -1) 0 var(--hc-space-6) 0;
}

/* ========================================
   섹션 & 카드
   ======================================== */
.hc-section {
    margin-bottom: var(--hc-space-6);
}

.hc-section-title {
    font-size: var(--hc-text-lg);
    font-weight: var(--hc-font-semibold);
    color: var(--hc-text-primary);
    margin: 0 0 var(--hc-space-4) 0;
    padding-bottom: var(--hc-space-3);
    border-bottom: 2px solid var(--hc-border);
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
}

.hc-section-title i {
    color: var(--hc-primary);
}

.hc-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: var(--hc-space-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-2);
}

/* ========================================
   구분선
   ======================================== */
.hc-divider {
    height: 1px;
    background: var(--hc-border);
    margin: var(--hc-space-6) 0;
    border: none;
}

.hc-divider-text {
    display: flex;
    align-items: center;
    gap: var(--hc-space-4);
    margin: var(--hc-space-6) 0;
    color: var(--hc-text-muted);
    font-size: var(--hc-text-sm);
}

.hc-divider-text::before,
.hc-divider-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hc-border);
}

/* ========================================
   컨테이너
   ======================================== */
.hc-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--hc-space-4);
}

.hc-container-sm {
    max-width: var(--hc-form-width-sm);
}

.hc-container-lg {
    max-width: var(--hc-form-width-lg);
}

.hc-container-xl {
    max-width: var(--hc-form-width-xl);
}

/* ========================================
   그리드 시스템
   ======================================== */
.hc-grid {
    display: grid;
    gap: var(--hc-space-4);
}

.hc-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.hc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ========================================
   플렉스 유틸리티
   ======================================== */
.hc-flex {
    display: flex;
}

.hc-flex-col {
    flex-direction: column;
}

.hc-flex-center {
    align-items: center;
    justify-content: center;
}

.hc-flex-between {
    justify-content: space-between;
}

.hc-gap-2 { gap: var(--hc-space-2); }
.hc-gap-3 { gap: var(--hc-space-3); }
.hc-gap-4 { gap: var(--hc-space-4); }
.hc-gap-5 { gap: var(--hc-space-5); }
.hc-gap-6 { gap: var(--hc-space-6); }

/* ========================================
   텍스트 정렬
   ======================================== */
.hc-text-center { text-align: center; }
.hc-text-left { text-align: left; }
.hc-text-right { text-align: right; }

/* ========================================
   마진 유틸리티
   ======================================== */
.hc-mt-0 { margin-top: 0; }
.hc-mt-4 { margin-top: var(--hc-space-4); }
.hc-mt-6 { margin-top: var(--hc-space-6); }
.hc-mt-8 { margin-top: var(--hc-space-8); }

.hc-mb-0 { margin-bottom: 0; }
.hc-mb-4 { margin-bottom: var(--hc-space-4); }
.hc-mb-6 { margin-bottom: var(--hc-space-6); }
.hc-mb-8 { margin-bottom: var(--hc-space-8); }

/* ========================================
   숨김 유틸리티
   ======================================== */
.hc-hidden {
    display: none !important;
}

.hc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   반응형 - 모바일
   ======================================== */
@media (max-width: 640px) {
    /* 로그인/회원가입/비밀번호재설정은 login-form-design.css에서만 제어(이중 적용 방지) */
    .hc-form-wrapper:not(.hc-login-form-wrapper):not(.hc-register-form-wrapper):not(.hc-reset-form-wrapper):not(.hc-find-id-form-wrapper) {
        padding: var(--hc-space-5);
        border-radius: var(--hc-radius-lg);
        box-shadow: var(--hc-shadow-md);
        margin: var(--hc-space-4);
        max-width: calc(100% - var(--hc-space-8));
    }
    
    .hc-form-title {
        font-size: var(--hc-text-xl);
        margin-bottom: var(--hc-space-5);
    }
    
    .hc-grid-2,
    .hc-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .hc-hide-mobile {
        display: none !important;
    }
}

/* ========================================
   태블릿
   ======================================== */
@media (min-width: 641px) and (max-width: 1024px) {
    .hc-form-wrapper {
        max-width: var(--hc-form-width-lg);
    }
    
    .hc-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hc-hide-tablet {
        display: none !important;
    }
}

/* ========================================
   데스크톱
   ======================================== */
@media (min-width: 1025px) {
    .hc-hide-desktop {
        display: none !important;
    }
}