/* ========================================
   타이포그래피 시스템 
   ======================================== */

/* ========================================
   폰트 굵기
   ======================================== */
:root {
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
}

/* ========================================
   줄 간격
   ======================================== */
:root {
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;
}

/* ========================================
   자간
   ======================================== */
:root {
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
}

/* ========================================
   모바일 타이포그래피 스케일 (vw 단위)
   ======================================== */
:root {
    /* 디스플레이  375px 기준 */
    --text-display-1: 8.53vw;
    /* 32px */
    --text-display-2: 7.47vw;
    /* 28px */

    /* 제목  375px 기준 */
    --text-heading-1: 6.4vw;
    /* 24px */
    --text-heading-2: 5.33vw;
    /* 20px */
    --text-heading-3: 4.8vw;
    /* 18px */
    --text-heading-4: 4.27vw;
    /* 16px */

    /* 본문  375px 기준 */
    --text-body-1: 4.27vw;
    /* 16px */
    --text-body-2: 3.73vw;
    /* 14px */
    --text-body-3: 3.47vw;
    /* 13px */

    /* 캡션  375px 기준 */
    --text-caption-1: 3.2vw;
    /* 12px */
    --text-caption-2: 2.93vw;
    /* 11px */

    /* 버튼  375px 기준 */
    --text-button-1: 4.27vw;
    /* 16px */
    --text-button-2: 3.73vw;
    /* 14px */
    --text-button-3: 3.2vw;
    /* 12px */

    /* 페이지 공통 요소 */
    --text-page-common-label: 4.8vw;
    /* 18px */
    --text-page-common-title: 8.53vw;
    /* 32px */
    --text-page-common-content: 4.27vw;
    /* 16px */

    /* 페이지 소개 요소 */
    --text-intro-title: 8.53vw;
    /* 32px */
    --text-intro-content: 4.27vw;
    /* 16px */

    /* 섹션 요소 */
    --text-section-title: 8.53vw;
    /* 32px */
    --text-section-description: 4.27vw;
    /* 16px */

    /* 카드 요소 */
    --text-card-title: 4.8vw;
    /* 18px (기존 text-heading-3 사용) */
    --text-card-sub: 5.87vw;
    /* 22px */
    --text-card-description: 4.27vw;
    /* 16px */
}

/* ========================================
   PC 타이포그래피 스케일 (rem 단위 - 62.5% 기준)
   ======================================== */
@media (min-width: 768px) {
    :root {
        /* 디스플레이 1440px 기준 */
        --text-display-1: 4.8rem;
        /* 48px */
        --text-display-2: 4rem;
        /* 40px */

        /* 제목 1440px 기준 */
        --text-heading-1: 3.2rem;
        /* 32px */
        --text-heading-2: 2.8rem;
        /* 28px */
        --text-heading-3: 2.4rem;
        /* 24px */
        --text-heading-4: 2rem;
        /* 20px */

        /* 본문 1440px 기준 */
        --text-body-1: 1.8rem;
        /* 18px */
        --text-body-2: 1.6rem;
        /* 16px */
        --text-body-3: 1.4rem;
        /* 14px */

        /* 캡션 1440px 기준 */
        --text-caption-1: 1.3rem;
        /* 13px */
        --text-caption-2: 1.2rem;
        /* 12px */

        /* 버튼 1440px 기준 */
        --text-button-1: 1.8rem;
        /* 18px */
        --text-button-2: 1.6rem;
        /* 16px */
        --text-button-3: 1.4rem;
        /* 14px */

        /* 페이지 공통 요소 1440px 기준 */
        --text-page-common-label: 2.4rem;
        /* 24px */
        --text-page-common-title: 6rem;
        /* 60px */
        --text-page-common-content: 2rem;
        /* 20px */

        /* 페이지 소개 요소 1440px 기준 */
        --text-intro-title: 5.6rem;
        /* 56px */
        --text-intro-content: 2.4rem;
        /* 24px */

        /* 섹션 요소 1440px 기준 */
        --text-section-title: 5.6rem;
        /* 56px */
        --text-section-description: 2.4rem;
        /* 24px */

        /* 카드 요소 1440px 기준 */
        --text-card-title: 4.4rem;
        /* 44px */
        --text-card-sub: 2.4rem;
        /* 24px */
        --text-card-description: 1.8rem;
        /* 18px */
    }
}

/* ========================================
   타이포그래피 클래스
   ======================================== */

/* 디스플레이 스타일 */
.text-display-1 {
    font-size: var(--text-display-1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.text-display-2 {
    font-size: var(--text-display-2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

/* 제목 스타일 */
.text-heading-1 {
    font-size: var(--text-heading-1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.text-heading-2 {
    font-size: var(--text-heading-2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.text-heading-3 {
    font-size: var(--text-heading-3);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

.text-heading-4 {
    font-size: var(--text-heading-4);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* 본문 스타일 */
.text-body-1 {
    font-size: var(--text-body-1);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
}

.text-body-2 {
    font-size: var(--text-body-2);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
}

.text-body-3 {
    font-size: var(--text-body-3);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
}

/* 캡션 스타일 */
.text-caption-1 {
    font-size: var(--text-caption-1);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wide);
}

.text-caption-2 {
    font-size: var(--text-caption-2);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wide);
}

/* 버튼 스타일 */
.text-button-1 {
    font-size: var(--text-button-1);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

.text-button-2 {
    font-size: var(--text-button-2);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

.text-button-3 {
    font-size: var(--text-button-3);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* ========================================
   시맨틱 타이포그래피 클래스
   ======================================== */

/* 페이지 제목 */
.text-page-title {
    font-size: var(--text-display-1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

/* 섹션 제목 */
.text-section-title {
    font-size: var(--text-section-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-tight);
}

/* 서브 섹션 제목 */
.text-sub-section-title {
    font-size: var(--text-heading-2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}


/* 메인 콘텐츠 */
.text-main-content {
    font-size: var(--text-body-1);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
}

/* 보조 콘텐츠 */
.text-secondary-content {
    font-size: var(--text-body-2);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
}

/* 작은 콘텐츠 */
.text-small-content {
    font-size: var(--text-body-3);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
}

/* 라벨 */
.text-label {
    font-size: var(--text-caption-1);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wide);
}

/* 도움말 텍스트 */
.text-helper {
    font-size: var(--text-caption-2);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wide);
}

/* 주요 버튼 */
.text-primary-button {
    font-size: var(--text-button-1);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* 보조 버튼 */
.text-secondary-button {
    font-size: var(--text-button-2);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* 작은 버튼 */
.text-small-button {
    font-size: var(--text-button-3);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* ========================================
페이지 공통 요소 시맨틱 클래스
======================================== */

/* 페이지 공통 라벨 */
.text-page-common-label {
    font-size: var(--text-page-common-label);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wide);
}

/* 페이지 공통 제목 */
.text-page-common-title {
    font-size: var(--text-page-common-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

/* 페이지 공통 콘텐츠 */
.text-page-common-content {
    font-size: var(--text-page-common-content);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
}

/* ========================================
페이지 소개 요소 시맨틱 클래스
======================================== */

/* 페이지 소개 제목 */
.text-intro-title {
    font-size: var(--text-intro-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: #fff;
}

/* 페이지 소개 콘텐츠 */
.text-intro-content {
    font-size: var(--text-intro-content);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
    color: rgba(255, 255, 255, 0.8);
}

/* ========================================
섹션 요소 시맨틱 클래스
======================================== */

/* 섹션 디스크립션 */
.text-section-description {
    font-size: var(--text-section-description);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
}

/* ========================================
카드 요소 시맨틱 클래스
======================================== */

/* 카드 제목 */
.text-card-title {
    font-size: var(--text-card-title);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* 카드 서브 제목 */
.text-card-sub {
    font-size: var(--text-card-sub);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* 카드 디스크립션 */
.text-card-description {
    font-size: var(--text-card-description);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
}

/* ========================================
   유틸리티 클래스
   ======================================== */

/* 폰트 굵기 유틸리티 */
.font-thin {
    font-weight: var(--font-weight-thin);
}

.font-extra-light {
    font-weight: var(--font-weight-extra-light);
}

.font-light {
    font-weight: var(--font-weight-light);
}

.font-regular {
    font-weight: var(--font-weight-regular);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semi-bold {
    font-weight: var(--font-weight-semi-bold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-extra-bold {
    font-weight: var(--font-weight-extra-bold);
}

.font-black {
    font-weight: var(--font-weight-black);
}

/* 줄 간격 유틸리티 */
.leading-tight {
    line-height: var(--line-height-tight);
}

.leading-normal {
    line-height: var(--line-height-normal);
}

.leading-relaxed {
    line-height: var(--line-height-relaxed);
}

.leading-loose {
    line-height: var(--line-height-loose);
}

/* 자간 유틸리티 */
.tracking-tight {
    letter-spacing: var(--letter-spacing-tight);
}

.tracking-normal {
    letter-spacing: var(--letter-spacing-normal);
}

.tracking-wide {
    letter-spacing: var(--letter-spacing-wide);
}

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

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

/* 텍스트 변환 */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* 텍스트 장식 */
.underline {
    text-decoration: underline;
}

.line-through {
    text-decoration: line-through;
}

.no-underline {
    text-decoration: none;
}

/* ========================================
   반응형 유틸리티
   ======================================== */

/* 모바일 우선 접근법 */
@media (min-width: 768px) {
    .md\:text-display-1 {
        font-size: var(--text-display-1);
    }

    .md\:text-display-2 {
        font-size: var(--text-display-2);
    }

    .md\:text-heading-1 {
        font-size: var(--text-heading-1);
    }

    .md\:text-heading-2 {
        font-size: var(--text-heading-2);
    }

    .md\:text-heading-3 {
        font-size: var(--text-heading-3);
    }

    .md\:text-heading-4 {
        font-size: var(--text-heading-4);
    }

    .md\:text-body-1 {
        font-size: var(--text-body-1);
    }

    .md\:text-body-2 {
        font-size: var(--text-body-2);
    }

    .md\:text-body-3 {
        font-size: var(--text-body-3);
    }

    .md\:text-caption-1 {
        font-size: var(--text-caption-1);
    }

    .md\:text-caption-2 {
        font-size: var(--text-caption-2);
    }

    .md\:text-button-1 {
        font-size: var(--text-button-1);
    }

    .md\:text-button-2 {
        font-size: var(--text-button-2);
    }

    .md\:text-button-3 {
        font-size: var(--text-button-3);
    }
}

@media (min-width: 1024px) {
    .lg\:text-display-1 {
        font-size: var(--text-display-1);
    }

    .lg\:text-display-2 {
        font-size: var(--text-display-2);
    }

    .lg\:text-heading-1 {
        font-size: var(--text-heading-1);
    }

    .lg\:text-heading-2 {
        font-size: var(--text-heading-2);
    }

    .lg\:text-heading-3 {
        font-size: var(--text-heading-3);
    }

    .lg\:text-heading-4 {
        font-size: var(--text-heading-4);
    }

    .lg\:text-body-1 {
        font-size: var(--text-body-1);
    }

    .lg\:text-body-2 {
        font-size: var(--text-body-2);
    }

    .lg\:text-body-3 {
        font-size: var(--text-body-3);
    }

    .lg\:text-caption-1 {
        font-size: var(--text-caption-1);
    }

    .lg\:text-caption-2 {
        font-size: var(--text-caption-2);
    }

    .lg\:text-button-1 {
        font-size: var(--text-button-1);
    }

    .lg\:text-button-2 {
        font-size: var(--text-button-2);
    }

    .lg\:text-button-3 {
        font-size: var(--text-button-3);
    }
}

/* 색상별 라벨 클래스 */
.text-page-common-label.text-color-primary {
    color: var(--color-primary, #00A3A9);
}