/* 반응형 웹 디자인 - 1080P 최적화 */

/* 1080P (1920x1080) 해상도 최적화 - 80% 축소 */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
    /* 1080P에서만 80% 축소 적용 */
    html {
        font-size: 80% !important; /* 기본 16px -> 12.8px (80%) */
    }
    
    /* 모든 rem 단위가 자동으로 80%로 조정되므로 추가 조정 불필요 */
    /* 하지만 px 단위나 고정 크기는 별도로 조정 필요 */
    
    /* px 단위 사용하는 요소들 80% 조정 */
    .container {
        max-width: 1280px !important; /* 1600px의 80% */
        padding: 0 1.6rem !important; /* 2rem의 80% */
    }
}

/* 1440p (2560x1440) 이상 해상도 - 현재 상태 유지 (100%) */
@media screen and (min-width: 2560px) {
    html {
        font-size: 100% !important; /* 원래 크기 유지 */
    }
    
    .container {
        max-width: 1600px;
        padding: 0 2rem;
    }
    
    .card {
        padding: 2.5rem;
        margin-bottom: 2.5rem;
    }
    
    .content-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
}

/* 1366px - 1919px 해상도 */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
    .container {
        max-width: 1400px;
        padding: 0 1.5rem;
    }
}

/* 태블릿 가로 (1024px - 1365px) */
@media screen and (min-width: 1024px) and (max-width: 1365px) {
    .container {
        max-width: 1200px;
        padding: 0 1.5rem;
    }
}

/* 태블릿 세로 (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: 100%;
        padding: 0 1.5rem;
    }
    
    .card {
        padding: 1.5rem;
    }
}

/* 모바일 가로 (481px - 767px) */
@media screen and (max-width: 767px) {
    .container {
        padding: 0 1rem;
    }
    
    .card {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }
}

/* 모바일 세로 (480px 이하) */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 0.75rem;
    }
    
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 0.75rem;
    }
}

/* 공통 반응형 유틸리티 */
@media screen and (max-width: 768px) {
    /* 작은 화면에서 텍스트 크기 조정 */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    /* 버튼 크기 조정 */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}