/* 
✨ 미디어 쿼리 기반 완성형 타이포그래피 시스템 v3.0 ✨ 
📝
- 모바일 First 반응형 디자인
- 미디어 쿼리 3단계: 모바일(0~768px) → 태블릿(769px~1199px) → 큰모니터/노트북(1200px~)
- 시맨틱 태그(h1~h6) + 유틸리티 클래스 병행
- 접근성 + 다국어 + 성능 최적화
- 재사용성 극대화 (마진/패딩 제거)
- 색상은 별도 color.css에서 관리
- 각 브레이크포인트별 세부 크기 주석 포함
*/

/* ===== 미디어 쿼리 브레이크포인트 정의 ===== */
/*
📱 모바일: 0px ~ 768px (기본값)
📟 태블릿: 769px ~ 1199px
🖥️ 큰모니터/노트북: 1200px 이상

@media (max-width: 768px) - 모바일
@media (min-width: 769px) and (max-width: 1199px) - 태블릿  
@media (min-width: 1200px) - 큰모니터/노트북
*/

/* ===== ROOT VARIABLES (기본 폰트 웨이트, 라인높이, 자간) ===== */
:root {
  /* 폰트 weight */
  --weight-thin: 100;
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  
  /* line-height */
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-snug: 1.375;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;
  --lh-loose: 2;
  
  /* letter-spacing */
  --ls-tighter: -0.05em;
  --ls-tight: -0.025em;
  --ls-normal: 0em;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;
  
  /* 텍스트 투명도 */
  --text-opacity-high: 0.95;
  --text-opacity-medium: 0.8;
  --text-opacity-muted: 0.65;
  --text-opacity-subtle: 0.5;
  --text-opacity-disabled: 0.38;
}

/* 다크모드 대응 */
@media (prefers-color-scheme: dark) {
  :root {
    --text-opacity-muted: 0.75;
    --text-opacity-subtle: 0.6;
    --text-opacity-disabled: 0.45;
  }
}

/* 고대비 모드 대응 */
@media (prefers-contrast: high) {
  :root {
    --text-opacity-high: 1;
    --text-opacity-medium: 1;
    --text-opacity-muted: 0.9;
    --text-opacity-subtle: 0.8;
    --text-opacity-disabled: 0.7;
  }
}

/* 애니메이션 감소 대응 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================= */
/* ===== 시맨틱 태그 (h1~h6) ===== */
/* ============================================= */

/* H1 - 메인 제목 */
h1 { 
  font-weight: var(--weight-bold); 
  line-height: 1.2; 
  letter-spacing: var(--ls-tight);
  margin: 0; /* 마진 제거 */
}
/* 📱 모바일: 28px */
h1 { font-size: 1.75rem; }
/* 📟 태블릿: 36px */
@media (min-width: 769px) and (max-width: 1199px) {
  h1 { font-size: 2.25rem; }
}
/* 🖥️ 큰모니터/노트북: 40px */
@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }
}

/* H2 - 섹션 제목 */
h2 { 
  font-weight: var(--weight-bold); 
  line-height: 1.25; 
  letter-spacing: var(--ls-tight);
  margin: 0;
}
/* 📱 모바일: 24px */
h2 { font-size: 1.5rem; }
/* 📟 태블릿: 28px */
@media (min-width: 769px) and (max-width: 1199px) {
  h2 { font-size: 1.75rem; }
}
/* 🖥️ 큰모니터/노트북: 32px */
@media (min-width: 1200px) {
  h2 { font-size: 2rem; }
}

/* H3 - 서브섹션 제목 */
h3 { 
  font-weight: var(--weight-semibold); 
  line-height: 1.3; 
  letter-spacing: var(--ls-normal);
  margin: 0;
}
/* 📱 모바일: 20px */
h3 { font-size: 1.25rem; }
/* 📟 태블릿: 24px */
@media (min-width: 769px) and (max-width: 1199px) {
  h3 { font-size: 1.5rem; }
}
/* 🖥️ 큰모니터/노트북: 28px */
@media (min-width: 1200px) {
  h3 { font-size: 1.75rem; }
}

/* H4 - 소제목 */
h4 { 
  font-weight: var(--weight-semibold); 
  line-height: 1.35; 
  letter-spacing: var(--ls-normal);
  margin: 0;
}
/* 📱 모바일: 16px */
h4 { font-size: 1rem; }
/* 📟 태블릿: 18px */
@media (min-width: 769px) and (max-width: 1199px) {
  h4 { font-size: 1.125rem; }
}
/* 🖥️ 큰모니터/노트북: 22px */
@media (min-width: 1200px) {
  h4 { font-size: 1.375rem; }
}

/* H5 - 작은 제목 */
h5 { 
  font-weight: var(--weight-semibold); 
  line-height: 1.4; 
  letter-spacing: var(--ls-normal);
  margin: 0;
}
/* 📱 모바일: 15px */
h5 { font-size: 0.9375rem; }
/* 📟 태블릿: 16px */
@media (min-width: 769px) and (max-width: 1199px) {
  h5 { font-size: 1rem; }
}
/* 🖥️ 큰모니터/노트북: 18px */
@media (min-width: 1200px) {
  h5 { font-size: 1.125rem; }
}

/* H6 - 최소 제목 */
h6 { 
  font-weight: var(--weight-semibold); 
  line-height: 1.4; 
  letter-spacing: var(--ls-normal);
  margin: 0;
}
/* 📱 모바일: 14px */
h6 { font-size: 0.875rem; }
/* 📟 태블릿: 15px */
@media (min-width: 769px) and (max-width: 1199px) {
  h6 { font-size: 0.9375rem; }
}
/* 🖥️ 큰모니터/노트북: 16px */
@media (min-width: 1200px) {
  h6 { font-size: 1rem; }
}

/* ============================================= */
/* ===== 디스플레이 헤딩 (대형 제목) ===== */
/* ============================================= */

/* Display 4XL - 최대 디스플레이 제목 */
.display-4xl { 
  font-weight: var(--weight-black); 
  line-height: 1.1; 
  letter-spacing: var(--ls-tighter);
  margin: 0;
}
/* 📱 모바일: 48px */
.display-4xl { font-size: 3rem; }
/* 📟 태블릿: 64px */
@media (min-width: 769px) and (max-width: 1199px) {
  .display-4xl { font-size: 4rem; }
}
/* 🖥️ 큰모니터/노트북: 80px */
@media (min-width: 1200px) {
  .display-4xl { font-size: 5rem; }
}

/* Display 3XL */
.display-3xl { 
  font-weight: var(--weight-extrabold); 
  line-height: 1.1; 
  letter-spacing: var(--ls-tighter);
  margin: 0;
}
/* 📱 모바일: 40px */
.display-3xl { font-size: 2.5rem; }
/* 📟 태블릿: 52px */
@media (min-width: 769px) and (max-width: 1199px) {
  .display-3xl { font-size: 3.25rem; }
}
/* 🖥️ 큰모니터/노트북: 64px */
@media (min-width: 1200px) {
  .display-3xl { font-size: 4rem; }
}

/* Display 2XL */
.display-2xl { 
  font-weight: var(--weight-extrabold); 
  line-height: 1.15; 
  letter-spacing: var(--ls-tight);
  margin: 0;
}
/* 📱 모바일: 32px */
.display-2xl { font-size: 2rem; }
/* 📟 태블릿: 44px */
@media (min-width: 769px) and (max-width: 1199px) {
  .display-2xl { font-size: 2.75rem; }
}
/* 🖥️ 큰모니터/노트북: 56px */
@media (min-width: 1200px) {
  .display-2xl { font-size: 3.5rem; }
}

/* Display XL */
.display-xl { 
  font-weight: var(--weight-bold); 
  line-height: 1.15; 
  letter-spacing: var(--ls-tight);
  margin: 0;
}
/* 📱 모바일: 28px */
.display-xl { font-size: 1.75rem; }
/* 📟 태블릿: 38px */
@media (min-width: 769px) and (max-width: 1199px) {
  .display-xl { font-size: 2.375rem; }
}
/* 🖥️ 큰모니터/노트북: 48px */
@media (min-width: 1200px) {
  .display-xl { font-size: 3rem; }
}

/* Display LG */
.display-lg { 
  font-weight: var(--weight-bold); 
  line-height: 1.2; 
  letter-spacing: var(--ls-tight);
  margin: 0;
}
/* 📱 모바일: 24px */
.display-lg { font-size: 1.5rem; }
/* 📟 태블릿: 32px */
@media (min-width: 769px) and (max-width: 1199px) {
  .display-lg { font-size: 2rem; }
}
/* 🖥️ 큰모니터/노트북: 40px */
@media (min-width: 1200px) {
  .display-lg { font-size: 2.5rem; }
}

/* Display MD */
.display-md { 
  font-weight: var(--weight-bold); 
  line-height: 1.25; 
  letter-spacing: var(--ls-normal);
  margin: 0;
}
/* 📱 모바일: 20px */
.display-md { font-size: 1.25rem; }
/* 📟 태블릿: 26px */
@media (min-width: 769px) and (max-width: 1199px) {
  .display-md { font-size: 1.625rem; }
}
/* 🖥️ 큰모니터/노트북: 32px */
@media (min-width: 1200px) {
  .display-md { font-size: 2rem; }
}

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

/* Heading 3XL */
.heading-3xl { 
  font-weight: var(--weight-extrabold); 
  line-height: 1.15; 
  letter-spacing: var(--ls-tighter);
  margin: 0;
}
/* 📱 모바일: 40px */
.heading-3xl { font-size: 2.5rem; }
/* 📟 태블릿: 52px */
@media (min-width: 769px) and (max-width: 1199px) {
  .heading-3xl { font-size: 3.25rem; }
}
/* 🖥️ 큰모니터/노트북: 60px */
@media (min-width: 1200px) {
  .heading-3xl { font-size: 3.75rem; }
}

/* Heading 2XL */
.heading-2xl { 
  font-weight: var(--weight-bold); 
  line-height: 1.2; 
  letter-spacing: var(--ls-tighter);
  margin: 0;
}
/* 📱 모바일: 32px */
.heading-2xl { font-size: 2rem; }
/* 📟 태블릿: 40px */
@media (min-width: 769px) and (max-width: 1199px) {
  .heading-2xl { font-size: 2.5rem; }
}
/* 🖥️ 큰모니터/노트북: 48px */
@media (min-width: 1200px) {
  .heading-2xl { font-size: 3rem; }
}

/* Heading XL */
.heading-xl { 
  font-weight: var(--weight-bold); 
  line-height: 1.25; 
  letter-spacing: var(--ls-tight);
  margin: 0;
}
/* 📱 모바일: 28px */
.heading-xl { font-size: 1.75rem; }
/* 📟 태블릿: 33px */
@media (min-width: 769px) and (max-width: 1199px) {
  .heading-xl { font-size: 2.0625rem; }
}
/* 🖥️ 큰모니터/노트북: 38px */
@media (min-width: 1200px) {
  .heading-xl { font-size: 2.375rem; }
}

/* Heading LG */
.heading-lg { 
  font-weight: var(--weight-semibold); 
  line-height: 1.3; 
  letter-spacing: var(--ls-tight);
  margin: 0;
}
/* 📱 모바일: 22px */
.heading-lg { font-size: 1.375rem; }
/* 📟 태블릿: 26px */
@media (min-width: 769px) and (max-width: 1199px) {
  .heading-lg { font-size: 1.625rem; }
}
/* 🖥️ 큰모니터/노트북: 32px */
@media (min-width: 1200px) {
  .heading-lg { font-size: 2rem; }
}

/* Heading MD */
.heading-md { 
  font-weight: var(--weight-semibold); 
  line-height: 1.35; 
  letter-spacing: var(--ls-normal);
  margin: 0;
}
/* 📱 모바일: 18px */
.heading-md { font-size: 1.125rem; }
/* 📟 태블릿: 21px */
@media (min-width: 769px) and (max-width: 1199px) {
  .heading-md { font-size: 1.3125rem; }
}
/* 🖥️ 큰모니터/노트북: 24px */
@media (min-width: 1200px) {
  .heading-md { font-size: 1.5rem; }
}

/* Heading SM */
.heading-sm { 
  font-weight: var(--weight-semibold); 
  line-height: 1.4; 
  letter-spacing: var(--ls-normal);
  margin: 0;
}
/* 📱 모바일: 16px */
.heading-sm { font-size: 1rem; }
/* 📟 태블릿: 18px */
@media (min-width: 769px) and (max-width: 1199px) {
  .heading-sm { font-size: 1.125rem; }
}
/* 🖥️ 큰모니터/노트북: 20px */
@media (min-width: 1200px) {
  .heading-sm { font-size: 1.25rem; }
}

/* Heading XS */
.heading-xs { 
  font-weight: var(--weight-semibold); 
  line-height: 1.4; 
  letter-spacing: var(--ls-normal);
  margin: 0;
}
/* 📱 모바일: 14px */
.heading-xs { font-size: 0.875rem; }
/* 📟 태블릿: 15px */
@media (min-width: 769px) and (max-width: 1199px) {
  .heading-xs { font-size: 0.9375rem; }
}
/* 🖥️ 큰모니터/노트북: 16px */
@media (min-width: 1200px) {
  .heading-xs { font-size: 1rem; }
}

/* ============================================= */
/* ===== 본문 텍스트 ===== */
/* ============================================= */

/* Text 3XL - 큰 본문 */
.text-3xl { 
  font-weight: var(--weight-regular); 
  line-height: var(--lh-snug);
  margin: 0;
}
/* 📱 모바일: 26px */
.text-3xl { font-size: 1.625rem; }
/* 📟 태블릿: 31px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-3xl { font-size: 1.9375rem; }
}
/* 🖥️ 큰모니터/노트북: 36px */
@media (min-width: 1200px) {
  .text-3xl { font-size: 2.25rem; }
}

/* Text 2XL */
.text-2xl { 
  font-weight: var(--weight-regular); 
  line-height: var(--lh-normal);
  margin: 0;
}
/* 📱 모바일: 22px */
.text-2xl { font-size: 1.375rem; }
/* 📟 태블릿: 25px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-2xl { font-size: 1.5625rem; }
}
/* 🖥️ 큰모니터/노트북: 28px */
@media (min-width: 1200px) {
  .text-2xl { font-size: 1.75rem; }
}

/* Text XL */
.text-xl { 
  font-weight: var(--weight-regular); 
  line-height: var(--lh-normal);
  margin: 0;
}
/* 📱 모바일: 18px */
.text-xl { font-size: 1.125rem; }
/* 📟 태블릿: 19px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-xl { font-size: 1.1875rem; }
}
/* 🖥️ 큰모니터/노트북: 20px */
@media (min-width: 1200px) {
  .text-xl { font-size: 1.25rem; }
}

/* Text LG */
.text-lg { 
  font-weight: var(--weight-regular); 
  line-height: var(--lh-relaxed);
  margin: 0;
}
/* 📱 모바일: 16px */
.text-lg { font-size: 1rem; }
/* 📟 태블릿: 17px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-lg { font-size: 1.0625rem; }
}
/* 🖥️ 큰모니터/노트북: 18px */
@media (min-width: 1200px) {
  .text-lg { font-size: 1.125rem; }
}

/* Text Base/MD - 기본 본문 */
.text-base, .text-md { 
  font-weight: var(--weight-regular); 
  line-height: var(--lh-relaxed);
  margin: 0;
}
/* 📱 모바일: 14px */
.text-base, .text-md { font-size: 0.875rem; }
/* 📟 태블릿: 15px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-base, .text-md { font-size: 0.9375rem; }
}
/* 🖥️ 큰모니터/노트북: 16px */
@media (min-width: 1200px) {
  .text-base, .text-md { font-size: 1rem; }
}

/* Text SM */
.text-sm { 
  font-weight: var(--weight-regular); 
  line-height: var(--lh-normal);
  margin: 0;
}
/* 📱 모바일: 13px */
.text-sm { font-size: 0.8125rem; }
/* 📟 태블릿: 14px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-sm { font-size: 0.875rem; }
}
/* 🖥️ 큰모니터/노트북: 15px */
@media (min-width: 1200px) {
  .text-sm { font-size: 0.9375rem; }
}

/* Text XS */
.text-xs { 
  font-weight: var(--weight-regular); 
  line-height: var(--lh-normal);
  margin: 0;
}
/* 📱 모바일: 12px */
.text-xs { font-size: 0.75rem; }
/* 📟 태블릿: 13px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-xs { font-size: 0.8125rem; }
}
/* 🖥️ 큰모니터/노트북: 14px */
@media (min-width: 1200px) {
  .text-xs { font-size: 0.875rem; }
}

/* ============================================= */
/* ===== 강조 텍스트 ===== */
/* ============================================= */

/* Strong 2XL */
.text-strong-2xl { 
  font-weight: var(--weight-bold); 
  line-height: var(--lh-tight);
  margin: 0;
}
/* 📱 모바일: 24px */
.text-strong-2xl { font-size: 1.5rem; }
/* 📟 태블릿: 28px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-strong-2xl { font-size: 1.75rem; }
}
/* 🖥️ 큰모니터/노트북: 32px */
@media (min-width: 1200px) {
  .text-strong-2xl { font-size: 2rem; }
}

/* Strong XL */
.text-strong-xl { 
  font-weight: var(--weight-bold); 
  line-height: var(--lh-tight);
  margin: 0;
}
/* 📱 모바일: 20px */
.text-strong-xl { font-size: 1.25rem; }
/* 📟 태블릿: 22px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-strong-xl { font-size: 1.375rem; }
}
/* 🖥️ 큰모니터/노트북: 24px */
@media (min-width: 1200px) {
  .text-strong-xl { font-size: 1.5rem; }
}

/* Strong LG */
.text-strong-lg { 
  font-weight: var(--weight-bold); 
  line-height: var(--lh-snug);
  margin: 0;
}
/* 📱 모바일: 16px */
.text-strong-lg { font-size: 1rem; }
/* 📟 태블릿: 18px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-strong-lg { font-size: 1.125rem; }
}
/* 🖥️ 큰모니터/노트북: 20px */
@media (min-width: 1200px) {
  .text-strong-lg { font-size: 1.25rem; }
}

/* Strong MD */
.text-strong-md { 
  font-weight: var(--weight-bold); 
  line-height: var(--lh-snug);
  margin: 0;
}
/* 📱 모바일: 14px */
.text-strong-md { font-size: 0.875rem; }
/* 📟 태블릿: 15px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-strong-md { font-size: 0.9375rem; }
}
/* 🖥️ 큰모니터/노트북: 16px */
@media (min-width: 1200px) {
  .text-strong-md { font-size: 1rem; }
}

/* Strong SM */
.text-strong-sm { 
  font-weight: var(--weight-bold); 
  line-height: var(--lh-snug);
  margin: 0;
}
/* 📱 모바일: 12px */
.text-strong-sm { font-size: 0.75rem; }
/* 📟 태블릿: 13px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-strong-sm { font-size: 0.8125rem; }
}
/* 🖥️ 큰모니터/노트북: 14px */
@media (min-width: 1200px) {
  .text-strong-sm { font-size: 0.875rem; }
}

/* Strong XS */
.text-strong-xs { 
  font-weight: var(--weight-bold); 
  line-height: var(--lh-snug);
  margin: 0;
}
/* 📱 모바일: 11px */
.text-strong-xs { font-size: 0.6875rem; }
/* 📟 태블릿: 12px */
@media (min-width: 769px) and (max-width: 1199px) {
  .text-strong-xs { font-size: 0.75rem; }
}
/* 🖥️ 큰모니터/노트북: 13px */
@media (min-width: 1200px) {
  .text-strong-xs { font-size: 0.8125rem; }
}

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

/* Muted - 희미한 텍스트 (에러 메시지, 안내 문구 등) */
.muted {
  color: var(--text-slate);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin: 0;
  padding: 20px 0;
}

/* ============================================= */
/* ===== 숫자/데이터 텍스트 ===== */
/* ============================================= */