/**
 * HC Login Pro - 반응형 디자인 (Joyn 통합)
 * 
 * File: responsive.css
 * Version: 3.2.0
 * 
 * 브레이크포인트:
 * - 모바일: ~ 640px
 * - 태블릿: 641px ~ 1024px
 * - 데스크톱: 1025px ~
 */

/* ========================================
   모바일 (~ 640px)
   ======================================== */
@media (max-width: 640px) {
    /* 폼 래퍼 모바일 패딩은 login-form-design.css에서 로그인/회원가입 동일 적용 */

    /* 프로필 */
    .hc-profile-header {
        padding: var(--hc-space-5);
    }
    
    .hc-avatar {
        width: 80px;
        height: 80px;
    }
    
    .hc-profile-stats {
        gap: var(--hc-space-2);
        padding: var(--hc-space-4);
    }
    
    .hc-stat-value {
        font-size: var(--hc-text-xl);
    }
    
    .hc-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--hc-space-1);
    }
    
    .hc-info-value {
        text-align: left;
    }
    
    /* 탭 네비게이션 */
    .hc-profile-tabs {
        padding: var(--hc-space-1);
    }
    
    .hc-profile-tab {
        padding: var(--hc-space-2) var(--hc-space-3);
        font-size: var(--hc-text-xs);
    }
    
    /* 그리드 1열 */
    .hc-grid-2,
    .hc-grid-3 {
        grid-template-columns: 1fr;
    }
    
    /* 모바일 숨김 */
    .hc-hide-mobile {
        display: none !important;
    }
    
    /* 모달 */
    .hc-modal-content {
        width: 95%;
        max-width: none;
        margin: var(--hc-space-3);
        max-height: calc(100vh - var(--hc-space-6));
    }
    
    /* 토스트 */
    .hc-toast {
        left: var(--hc-space-4);
        right: var(--hc-space-4);
        transform: translateX(0) translateY(100px);
    }
    
    .hc-toast.show {
        transform: translateX(0) translateY(0);
    }
}

/* ========================================
   태블릿 (641px ~ 1024px)
   ======================================== */
@media (min-width: 641px) and (max-width: 1024px) {
    .hc-form-wrapper {
        max-width: var(--hc-form-width-lg);
    }
    
    /* 그리드 2열 */
    .hc-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 소셜 버튼 2열 */
    .hc-social-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .hc-btn-social {
        flex: 1 1 calc(50% - var(--hc-space-2));
    }
    
    /* 태블릿 숨김 */
    .hc-hide-tablet {
        display: none !important;
    }
}

/* ========================================
   데스크톱 (1025px ~)
   ======================================== */
@media (min-width: 1025px) {
    .hc-form-wrapper {
        max-width: 600px;
        padding: var(--hc-space-8);
    }
    
    /* 소셜 버튼 그리드 */
    .hc-social-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .hc-btn-social {
        flex: 1 1 calc(50% - var(--hc-space-2));
        min-width: 180px;
    }
    
    /* 데스크톱 숨김 */
    .hc-hide-desktop {
        display: none !important;
    }
}

/* ========================================
   큰 화면 (1280px ~)
   ======================================== */
@media (min-width: 1280px) {
    .hc-profile-wrapper {
        max-width: 600px;
    }
}

/* ========================================
   프린트 스타일
   ======================================== */
@media print {
    .hc-btn,
    .hc-social-login,
    .hc-form-links,
    .hc-modal {
        display: none !important;
    }
    
    .hc-form-wrapper {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ========================================
   다크 모드 지원 (선택적)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* joyn-common이 다크 모드를 처리하지 않을 때 사용 */
    :root:not([data-theme="light"]) {
        /* 필요 시 다크 모드 변수 오버라이드 */
    }
}

/* ========================================
   모션 감소 설정
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   고대비 모드
   ======================================== */
@media (prefers-contrast: high) {
    .hc-form-input,
    .hc-form-select,
    .hc-form-textarea {
        border-width: 3px;
    }
    
    .hc-btn {
        border-width: 3px;
    }
}