/* ============================================================
   WIVer Typography System — Responsive clamp() + Weight Classes
   ============================================================ */

/* ----- Font Size Variables ----- */

:root {
  --fs-display:   clamp(2rem, calc(1.692rem + 1.282vw), 3rem);             /* 32px → 48px */
  --fs-h1:        clamp(1.625rem, calc(1.481rem + 0.641vw), 2.25rem);    /* 26px → 36px */
  --fs-h2:        clamp(1.375rem, calc(1.288rem + 0.385vw), 1.75rem);    /* 22px → 28px */
  --fs-h3:        clamp(1.188rem, calc(1.144rem + 0.192vw), 1.375rem);   /* 19px → 22px */
  --fs-subtitle:  clamp(1rem,     calc(0.971rem + 0.128vw), 1.125rem);   /* 16px → 18px */
  --fs-body:      1rem;                                                    /* 16px 고정 */
  --fs-caption:   clamp(0.813rem, calc(0.798rem + 0.064vw), 0.875rem);   /* 13px → 14px */
  --fs-label:     clamp(0.75rem,  calc(0.737rem + 0.064vw), 0.813rem);   /* 12px → 13px */

  --lh-display:   1.25;
  --lh-heading:   1.35;
  --lh-subtitle:  1.5;
  --lh-body:      1.6;
  --lh-caption:   1.4;
  --lh-label:     1.2;

  --ls-display:   -0.02em;
  --ls-heading:   -0.01em;
  --ls-body:      0em;
  --ls-caption:   0em;
  --ls-label:     0.125rem;
}

/* ============================================================
   Typography Preset Classes
   ============================================================ */

.typo-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.typo-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.typo-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.typo-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.typo-subtitle {
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  letter-spacing: var(--ls-body);
}

.typo-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.typo-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
}

.typo-label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ============================================================
   Font Weight Override Classes
   ============================================================ */

.fw-regular,
.fw-regular :is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div) {
  font-weight: 400 !important;
}

.fw-medium,
.fw-medium :is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div) {
  font-weight: 500 !important;
}

.fw-semibold,
.fw-semibold :is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div) {
  font-weight: 600 !important;
}

.fw-bold,
.fw-bold :is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div) {
  font-weight: 700 !important;
}

.fw-extrabold,
.fw-extrabold :is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div) {
  font-weight: 800 !important;
}

.fw-black,
.fw-black :is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div) {
  font-weight: 900 !important;
}

/* 헤딩 — 줄 길이 균등 분배 */
:is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div), .e-loop-item :is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div){
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Text Ellipsis */
.ellipsis-1, .ellipsis-1 :is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

.ellipsis-2, .ellipsis-2 :is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ellipsis-3, .ellipsis-3 :is(h1, h2, h3, h4, h5, h6, p, span, a, li, ol, ul, td, th, dt, dd, label, strong, em, b, i, small, blockquote, figcaption, cite, div) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}