/* ===================================
   Typography System
   Synced with: docs/typography-system.md
   =================================== */

/* --- 1. Global Type Control --- */
/* 다국어 혼용 시 줄바꿈 및 영문 제어 */
body {
  word-break: keep-all;
}

@media (max-width: 767px) {
  p {
    word-break: break-all;
    text-align: justify;
  }
}

/* --- English Language Specific Overrides --- */
html[lang="en"] body {
  word-break: normal;
  overflow-wrap: break-word;
  letter-spacing: var(--tracking-normal, 0);
  font-family: var(--font-en-primary);
}

html[lang="en"] .txt-display,
html[lang="en"] h1, html[lang="en"] .txt-title,
html[lang="en"] h2, html[lang="en"] .txt-section-heading,
html[lang="en"] h3, html[lang="en"] .txt-content-heading,
html[lang="en"] h4, html[lang="en"] th, html[lang="en"] dt, html[lang="en"] .txt-content-subheading,
html[lang="en"] p, html[lang="en"] td, html[lang="en"] dd, html[lang="en"] li, html[lang="en"] form label, html[lang="en"] .txt-body,
html[lang="en"] h5, html[lang="en"] .txt-body-strong {
  font-family: var(--font-en-primary);
  letter-spacing: -0.01em;
}

html[lang="en"] .txt-display,
html[lang="en"] h1, html[lang="en"] .txt-title {
  font-family: var(--font-en-secondary);
}


/* --- 2. Hierarchy Classes (L0 ~ L5) --- */

/* L0 - Display Title */
.txt-display {
  font-family: var(--type-display-font);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line);
  color: var(--color-text-primary);
  margin: 0;
}

/* L1 - Page Title */
h1, .txt-title {
  font-family: var(--type-title-font);
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-line);
  color: var(--color-text-primary);
  margin: 0;
  position: relative;
  z-index: 1;  
  text-transform: uppercase;;
}

/* L2 - Section Heading */
h2, .txt-section-heading {
  font-family: var(--type-section-heading-font);
  font-size: var(--type-section-heading-size);
  font-weight: var(--type-section-heading-weight);
  line-height: var(--type-section-heading-line);
  color: var(--color-text-primary);
  margin: 0 0 40px 0;
}

/* L3 - Content Heading */
h3, .txt-content-heading {
  font-family: var(--type-content-heading-font);
  font-size: var(--type-content-heading-size);
  font-weight: var(--type-content-heading-weight);
  line-height: var(--type-content-heading-line);
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
}

/* L4 - Content Subheading */
h4, th, dt, .txt-content-subheading {
  font-family: var(--type-content-subheading-font);
  font-size: var(--type-content-subheading-size);
  font-weight: var(--type-content-subheading-weight);
  line-height: var(--type-content-subheading-line);
  color: var(--color-text-primary);
  margin: 0;
}

/* L5 - Content Body */
p, td, dd, li, form label, .txt-body {
  font-family: var(--type-body-font);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line);
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
}
/* 단, <li>, <td> 등은 기본 여백 없이 상속될 수 있도록 덮어쓰거나 리셋에서 처리함 */
td, th, li { margin-bottom: 0; }

/* L6 - Content Body Strong */
h5, .txt-body-strong {
  font-family: var(--font-primary);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-strong-weight);
  line-height: var(--type-body-line);
  color: var(--color-primary);
  margin: 12px 0 8px;
}

/* --- 3. Component Text Classes --- */

/* 오버레이 강조 텍스트 (Overlay / Kicker Text) */
.text-kicker, .text-overlay {
  font-family: var(--font-secondary);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(1rem, 2.2vw, 2rem); /* 반응형 예시 */
}
@media (max-width: 767px) {
  .text-kicker { font-size: 4vw; }
}

/* 네비게이션 및 링크 (Navigation & Links) */
.text-nav, .text-link {
  font-family: var(--type-title-font);
  font-weight: 500;
}
.text-nav.active, .text-link:hover, .text-link:focus {
  font-weight: 700;
  color: var(--color-text-primary);
}

/* 부가 정보 및 푸터 (Caption & Footer) */
.text-caption, .text-footer {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-secondary);
}
.text-footer-link {
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
}