/* 반응형 타이포그래피 시스템 */

/* 기본 폰트 크기 변수 */
:root {
    /* 데스크톱 기본값 */
    --base-font-size: 16px;
    --heading-scale: 1.25;
    
    /* 폰트 크기 변수 */
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-md: 1.125rem;    /* 18px */
    --fs-lg: 1.25rem;     /* 20px */
    --fs-xl: 1.5rem;      /* 24px */
    --fs-2xl: 1.875rem;   /* 30px */
    --fs-3xl: 2.25rem;    /* 36px */
}

/* 태블릿 (768px - 1024px) */
@media screen and (max-width: 1024px) {
    :root {
        --base-font-size: 15px;
        --fs-xs: 0.8rem;      /* 12.8px */
        --fs-sm: 0.9rem;      /* 14.4px */
        --fs-base: 1rem;      /* 16px */
        --fs-md: 1.1rem;      /* 17.6px */
        --fs-lg: 1.2rem;      /* 19.2px */
        --fs-xl: 1.4rem;      /* 22.4px */
        --fs-2xl: 1.75rem;    /* 28px */
        --fs-3xl: 2.1rem;     /* 33.6px */
    }
}

/* 대형 스마트폰 (480px - 768px) */
@media screen and (max-width: 768px) {
    :root {
        --base-font-size: 14px;
        --fs-xs: 0.857rem;    /* 12px */
        --fs-sm: 0.929rem;    /* 13px */
        --fs-base: 1rem;      /* 14px */
        --fs-md: 1.071rem;    /* 15px */
        --fs-lg: 1.143rem;    /* 16px */
        --fs-xl: 1.286rem;    /* 18px */
        --fs-2xl: 1.571rem;   /* 22px */
        --fs-3xl: 1.857rem;   /* 26px */
    }
    
    html {
        font-size: var(--base-font-size);
    }
}

/* 중형 스마트폰 (375px - 480px) */
@media screen and (max-width: 480px) {
    :root {
        --base-font-size: 13px;
        --fs-xs: 0.846rem;    /* 11px */
        --fs-sm: 0.923rem;    /* 12px */
        --fs-base: 1rem;      /* 13px */
        --fs-md: 1.077rem;    /* 14px */
        --fs-lg: 1.154rem;    /* 15px */
        --fs-xl: 1.231rem;    /* 16px */
        --fs-2xl: 1.462rem;   /* 19px */
        --fs-3xl: 1.692rem;   /* 22px */
    }
}

/* 소형 스마트폰 (320px - 375px) */
@media screen and (max-width: 375px) {
    :root {
        --base-font-size: 12px;
        --fs-xs: 0.833rem;    /* 10px */
        --fs-sm: 0.917rem;    /* 11px */
        --fs-base: 1rem;      /* 12px */
        --fs-md: 1.083rem;    /* 13px */
        --fs-lg: 1.167rem;    /* 14px */
        --fs-xl: 1.25rem;     /* 15px */
        --fs-2xl: 1.417rem;   /* 17px */
        --fs-3xl: 1.583rem;   /* 19px */
    }
}

/* 초소형 스마트폰 (320px 이하) */
@media screen and (max-width: 320px) {
    :root {
        --base-font-size: 11px;
        --fs-xs: 0.818rem;    /* 9px */
        --fs-sm: 0.909rem;    /* 10px */
        --fs-base: 1rem;      /* 11px */
        --fs-md: 1.091rem;    /* 12px */
        --fs-lg: 1.182rem;    /* 13px */
        --fs-xl: 1.273rem;    /* 14px */
        --fs-2xl: 1.364rem;   /* 15px */
        --fs-3xl: 1.545rem;   /* 17px */
    }
}

/* 메인페이지 카테고리 카드 타이포그래피 */
@media screen and (max-width: 768px) {
    .category-card-title {
        font-size: var(--fs-base) !important;
    }
    
    .category-site-name {
        font-size: var(--fs-sm) !important;
    }
    
    .category-rank {
        font-size: var(--fs-xs) !important;
    }
    
    /* 더보기 버튼은 아이콘만 사용하므로 제외 */
    
    .link-badge {
        font-size: var(--fs-xs) !important;
    }
    
    /* 헤더 요소들 */
    .logo-area img {
        height: calc(var(--base-font-size) * 2.5);
    }
    
    /* 네비게이션 텍스트 */
    .category-nav-text {
        font-size: var(--fs-xs) !important;
    }
}

/* 카테고리 페이지 타이포그래피 */
@media screen and (max-width: 768px) {
    /* 카테고리 페이지 헤더 */
    .category-header-title {
        font-size: var(--fs-xl) !important;
    }
    
    .category-header-subtitle {
        font-size: var(--fs-sm) !important;
    }
    
    /* 서브 카테고리 네비게이션 */
    .sub-category-nav .nav-link {
        font-size: var(--fs-sm) !important;
    }
    
    /* 카테고리 통계 */
    .category-stats h5 {
        font-size: var(--fs-md) !important;
    }
    
    .category-stats p {
        font-size: var(--fs-sm) !important;
    }
}

/* 동적 폰트 크기 조정 (viewport 기반) */
@media screen and (max-width: 768px) {
    /* vw 단위를 사용한 유동적 폰트 크기 */
    .category-card-title {
        font-size: clamp(0.85rem, 4vw, 1.1rem) !important;
    }
    
    .category-site-name {
        font-size: clamp(0.7rem, 3.2vw, 0.9rem) !important;
    }
    
    .category-rank {
        font-size: clamp(0.65rem, 2.8vw, 0.85rem) !important;
    }
    
    /* 최소/최대 크기 보장 */
    .link-badge {
        font-size: clamp(0.6rem, 2.5vw, 0.8rem) !important;
    }
    
    /* 카테고리 카드 헤더 패딩 조정 */
    .category-card-header {
        padding: clamp(8px, 2.5vw, 14px) clamp(10px, 3vw, 16px) !important;
    }
}

/* 화면 크기별 카테고리 카드 제목 */
@media screen and (max-width: 480px) {
    .category-card-title {
        font-size: clamp(0.8rem, 3.8vw, 1rem) !important;
    }
}

@media screen and (max-width: 375px) {
    .category-card-title {
        font-size: clamp(0.75rem, 3.6vw, 0.95rem) !important;
    }
}

@media screen and (max-width: 320px) {
    .category-card-title {
        font-size: clamp(0.7rem, 3.4vw, 0.9rem) !important;
    }
}

/* 가독성 향상을 위한 line-height 조정 */
@media screen and (max-width: 768px) {
    body {
        line-height: 1.5;
    }
    
    .category-site-name {
        line-height: 1.3 !important;
    }
    
    .category-card-title {
        line-height: 1.4 !important;
    }
    
    /* 카테고리 카드 제목 아이콘 크기 조정 */
    .category-card-title span:first-child {
        font-size: clamp(1rem, 4.5vw, 1.4rem) !important;
    }
}

@media screen and (max-width: 480px) {
    .category-card-title span:first-child {
        font-size: clamp(0.9rem, 4.2vw, 1.2rem) !important;
    }
}

@media screen and (max-width: 375px) {
    .category-card-title span:first-child {
        font-size: clamp(0.85rem, 4vw, 1.1rem) !important;
    }
}

/* 글자 간격 조정 */
@media screen and (max-width: 480px) {
    .category-site-name {
        letter-spacing: -0.03em !important;
    }
    
    .category-card-title {
        letter-spacing: -0.02em !important;
    }
}

/* 폰트 두께 조정 */
@media screen and (max-width: 768px) {
    /* 작은 화면에서는 약간 두꺼운 폰트로 가독성 향상 */
    .category-site-name {
        font-weight: 600 !important;
    }
    
    .category-rank {
        font-weight: 700 !important;
    }
    
    .link-badge {
        font-weight: 600 !important;
    }
    
    .category-card-title {
        font-weight: 700 !important;
    }
    
    .category-more-btn {
        font-weight: 700 !important;
    }
}

/* 다크모드 대응 */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    /* 다크모드에서는 폰트를 약간 크게 */
    :root {
        --base-font-size: calc(var(--base-font-size) * 1.05);
    }
}