/**
 * Typography System
 * 폰트 및 폰트 사이즈 통합 관리
 *
 * 폰트: 2개 (Pretendard, BMDOHYEON)
 * 사이즈: 5단계 (14/18/24/40/60px)
 */

/* ========================================
   1. 폰트 정의
   ======================================== */

/* Pretendard - 본문용 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* BMDOHYEON - 제목용 */
@font-face {
  font-family: "BMDOHYEON";
  src: url("https://cdn.jsdelivr.net/gh/wizfile/font/BMDOHYEON.eot");
  src: url("https://cdn.jsdelivr.net/gh/wizfile/font/BMDOHYEON.eot?#iefix") format("embedded-opentype"),
       url("https://cdn.jsdelivr.net/gh/wizfile/font/BMDOHYEON.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   2. CSS 변수
   ======================================== */

:root {
  /* 폰트 패밀리 */
  --font-body: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "BMDOHYEON", sans-serif;

  /* 폰트 사이즈 (5단계) */
  --text-xs: 18px;   /* 캡션, 부가 설명 */
  --text-sm: 24px;   /* 기본 본문 */
  --text-md: 30px;   /* 강조 본문, 소제목 */
  --text-lg: 50px;   /* 섹션 제목 */
  --text-xl: 80px;   /* 페이지 대제목 */

  /* 폰트 웨이트 (3단계) */
  --font-light: 300;
  --font-normal: 400;
  --font-bold: 700;

  /* 라인 하이트 */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.8;
}

/* ========================================
   3. 기본 스타일
   ======================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

/* 상단 타이틀 영역만 BMDOHYEON 적용 */
header h1,
.main-banner h1,
.hero h1,
.title-page {
  font-family: var(--font-heading);
}

/* ========================================
   4. 폰트 사이즈 클래스
   ======================================== */

.text-xs { font-size: var(--text-xs) !important; }  /* 14px */
.text-sm { font-size: var(--text-sm) !important; }  /* 18px */
.text-md { font-size: var(--text-md) !important; }  /* 24px */
.text-lg { font-size: var(--text-lg) !important; }  /* 40px */
.text-xl { font-size: var(--text-xl) !important; }  /* 60px */

/* ========================================
   5. 폰트 패밀리 클래스
   ======================================== */

.font-body { font-family: var(--font-body) !important; }
.font-heading { font-family: var(--font-heading) !important; }

/* ========================================
   6. 폰트 웨이트 클래스
   ======================================== */

.font-light { font-weight: var(--font-light) !important; }
.font-normal { font-weight: var(--font-normal) !important; }
.font-bold { font-weight: var(--font-bold) !important; }

/* ========================================
   7. 라인 하이트 클래스
   ======================================== */

.leading-tight { line-height: var(--leading-tight) !important; }
.leading-normal { line-height: var(--leading-normal) !important; }
.leading-relaxed { line-height: var(--leading-relaxed) !important; }

/* ========================================
   8. 텍스트 정렬 클래스
   ======================================== */

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* ========================================
   9. 반응형 폰트 사이즈
   ======================================== */

/* 태블릿 (768px 이하) */
@media (max-width: 768px) {
  :root {
    --text-xs: 12px;
    --text-sm: 16px;
    --text-md: 20px;
    --text-lg: 32px;
    --text-xl: 48px;
  }
}

/* 모바일 (480px 이하) */
@media (max-width: 480px) {
  :root {
    --text-xs: 14px;   /* 캡션, 부가 설명 */
    --text-sm: 18px;   /* 기본 본문 */
    --text-md: 22px;   /* 강조 본문, 소제목 */
    --text-lg: 28px;   /* 섹션 제목 */
    --text-xl: 34px;   /* 페이지 대제목 */
  }
}

/* ========================================
   10. 조합 클래스 (자주 사용하는 패턴)
   ======================================== */

/* 페이지 대제목 */
.title-page {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

/* 섹션 제목 */
.title-section {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

/* 소제목 */
.title-sub {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  line-height: var(--leading-normal);
}

/* 본문 텍스트 */
.text-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
}

/* 캡션/설명 텍스트 */
.text-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-light);
  line-height: var(--leading-normal);
}