/* ================================================================
   Kick.com 영감 폰트 크기 시스템 (반응형)
   생성일: 2026-06-03 03:55 UTC
   
   참고:
   - Material Design: https://m2.material.io/design/typography/the-type-system.html
   - Responsive Typography: https://remtopx.com/blog/responsive-typography-best-practices/
   - WCAG 2.2: https://accessibility.build/guides/accessible-typography-wcag
   ================================================================ */

/* ================== Desktop 폰트 크기 (10가지) ================== */

/* 1️⃣ H1 - 페이지 제목 (40px) */
h1, .heading-1, .page-title {
  font-size: 2.5rem;  /* 40px */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 1.5rem 0 1rem 0;
}

/* 2️⃣ H2 - 섹션 제목 (32px) */
h2, .heading-2, .section-title {
  font-size: 2rem;    /* 32px */
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 1.25rem 0 0.875rem 0;
}

/* 3️⃣ H3 - 서브섹션 제목 (28px) */
h3, .heading-3, .subsection-title {
  font-size: 1.75rem;  /* 28px */
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1rem 0 0.75rem 0;
}

/* 4️⃣ H4 - 4단계 제목 (24px) */
h4, .heading-4 {
  font-size: 1.5rem;   /* 24px */
  line-height: 1.4;
  font-weight: 600;
  margin: 0.875rem 0 0.625rem 0;
}

/* 5️⃣ H5 - 5단계 제목 (20px) */
h5, .heading-5 {
  font-size: 1.25rem;  /* 20px */
  line-height: 1.5;
  font-weight: 600;
  margin: 0.75rem 0 0.5rem 0;
}

/* 6️⃣ 네비게이션 링크 (18px) */
nav a, .nav-link, .nav-btn {
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  font-weight: 500;
}

/* 7️⃣ 본문 텍스트 (16px) */
p, body, .body-text, .content {
  font-size: 1rem;     /* 16px */
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.0125em;
}

/* 8️⃣ 버튼 텍스트 (16px) */
button, .btn, .button {
  font-size: 1rem;     /* 16px */
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* 9️⃣ 캡션/설명 (14px) */
.caption, .description, .meta, small, figcaption {
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  font-weight: 400;
  color: #8898aa;
}

/* 🔟 작은 텍스트 (12px) */
.small-text, .tiny, .badge {
  font-size: 0.75rem;  /* 12px */
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ================== Mobile 폰트 크기 (10가지) ================== */

@media (max-width: 768px) {
  /* 1️⃣ H1 - 페이지 제목 (30px) */
  h1, .heading-1, .page-title {
    font-size: 1.875rem;  /* 30px */
    line-height: 1.2;
    margin: 1.25rem 0 0.875rem 0;
  }

  /* 2️⃣ H2 - 섹션 제목 (24px) */
  h2, .heading-2, .section-title {
    font-size: 1.5rem;    /* 24px */
    line-height: 1.3;
    margin: 1rem 0 0.75rem 0;
  }

  /* 3️⃣ H3 - 서브섹션 제목 (22px) */
  h3, .heading-3, .subsection-title {
    font-size: 1.375rem;  /* 22px */
    line-height: 1.4;
    margin: 0.875rem 0 0.625rem 0;
  }

  /* 4️⃣ H4 - 4단계 제목 (20px) */
  h4, .heading-4 {
    font-size: 1.25rem;   /* 20px */
    line-height: 1.4;
    margin: 0.75rem 0 0.5rem 0;
  }

  /* 5️⃣ H5 - 5단계 제목 (18px) */
  h5, .heading-5 {
    font-size: 1.125rem;  /* 18px */
    line-height: 1.5;
    margin: 0.625rem 0 0.375rem 0;
  }

  /* 6️⃣ 네비게이션 링크 (16px) */
  nav a, .nav-link, .nav-btn {
    font-size: 1rem;      /* 16px */
    line-height: 1.5;
  }

  /* 7️⃣ 본문 텍스트 (15.2px) */
  p, body, .body-text, .content {
    font-size: 0.95rem;   /* 15.2px */
    line-height: 1.6;
  }

  /* 8️⃣ 버튼 텍스트 (15.2px) */
  button, .btn, .button {
    font-size: 0.95rem;   /* 15.2px */
    line-height: 1.5;
    padding: 0.75rem 1.5rem;
    min-height: 44px;
  }

  /* 9️⃣ 캡션/설명 (12.8px) */
  .caption, .description, .meta, small, figcaption {
    font-size: 0.8rem;    /* 12.8px */
    line-height: 1.5;
  }

  /* 🔟 작은 텍스트 (11.2px) */
  .small-text, .tiny, .badge {
    font-size: 0.7rem;    /* 11.2px */
    line-height: 1.4;
  }
}

/* ================== 테블릿 폰트 크기 (768px - 1024px) ================== */

@media (min-width: 768px) and (max-width: 1024px) {
  h1, .heading-1, .page-title {
    font-size: 2.125rem;  /* 34px - 데스크톱과 모바일의 중간 */
  }

  h2, .heading-2, .section-title {
    font-size: 1.75rem;   /* 28px */
  }

  h3, .heading-3, .subsection-title {
    font-size: 1.5rem;    /* 24px */
  }

  p, body, .body-text, .content {
    font-size: 0.975rem;  /* 15.6px */
  }
}

/* ================== 접근성 향상 (WCAG 2.2) ================== */
/* 참고: https://accessibility.build/guides/accessible-typography-wcag */

/* 사용자 확대 텍스트를 위한 최소 크기 보장 */
body {
  font-size: 100%;  /* 16px 기본값 유지 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 고대비 모드 지원 */
@media (prefers-contrast: more) {
  h1, h2, h3, h4, h5 {
    font-weight: 800;
  }
}

/* 감소된 동작 지원 */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
    transition: none;
  }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .caption, .description, .meta {
    color: #8898aa;
  }
}

/* ================== 링크-스트림 특화 폰트 크기 ================== */

/* 스트리밍 카드 제목 */
.stream-title, .video-title {
  font-size: 1.125rem;  /* 18px (데스크톱) */
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}

@media (max-width: 768px) {
  .stream-title, .video-title {
    font-size: 1rem;      /* 16px (모바일) */
  }
}

/* 라이브 배지 */
.live-badge {
  font-size: 0.75rem;   /* 12px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
}

/* 채팅 메시지 */
.chat-message {
  font-size: 0.95rem;   /* 15.2px */
  line-height: 1.5;
  word-wrap: break-word;
}

/* 시청자 수 */
.viewer-count {
  font-size: 0.875rem;  /* 14px */
  color: #8898aa;
}

/* ================== 인쇄 스타일 ================== */

@media print {
  h1 { font-size: 24pt; }
  h2 { font-size: 20pt; }
  h3 { font-size: 16pt; }
  p, body { font-size: 12pt; line-height: 1.5; }
}