/* ============================================================
   Smartix Typography Hierarchy — 단일 폰트 위계 토큰
   ------------------------------------------------------------
   적용: head 최하단 (인라인 <style> 이후)에 link.
   토큰: 한글 명칭 → CSS 변수 → tag 매핑 1:1.
   !important 사용 이유: 41 페이지의 옛 인라인 사이즈를 일괄 override.
   ============================================================ */

:root{
  /* 제목 (Title) — 4단계 */
  --t-xl: clamp(44px, 6vw, 78px);        /* 제목 특대 — Hero / 페이지 타이틀 */
  --t-lg: clamp(28px, 3.5vw, 48px);      /* 제목 대   — 섹션 헤더 */
  --t-md: clamp(20px, 2.2vw, 28px);      /* 제목 중   — 카드 / 서브섹션 제목 */
  --t-sm: 16px;                          /* 제목 소   — 작은 카드 / 보조 헤딩 */

  /* 본문 (Body) — 3단계 + 마이크로 */
  --b-lg: clamp(16px, 1.5vw, 20px);      /* 본문 대   — Hero subtitle, intro */
  --b:    15px;                          /* 본문      — 일반 단락 */
  --b-sm: 13.5px;                        /* 본문 소   — 캡션, 작은 텍스트 */
  --b-xs: 12px;                          /* 마이크로  — 알약, 라벨, 메타 */

  /* line-height·letter-spacing 토큰 (옵션) */
  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-base:  1.25;
  --lh-body:  1.65;
  --ls-tight: -0.06em;
  --ls-snug:  -0.045em;
  --ls-base:  -0.025em;
  --ls-loose: -0.015em;
}

/* === Tag → Token 매핑 ============================================
   메인/서브 분기
   · 메인 페이지 (body.tier-main): H1=특대 / H2=대 / H3=중 / H4=소
   · 서브 페이지 (그 외 — tier-hub, tier-detail 등): 한 단계씩 내림
     → H1=대 / H2=중 / H3=소 / H4=본문 소
   서브 페이지가 다수이므로 기본값을 서브 기준으로 두고
   메인은 body.tier-main으로 specificity 올려 override.
   ============================================================ */

/* 기본 (서브 페이지 기준 — 한 단계 내림) */
h1{
  font-size: var(--t-lg) !important;
  line-height: var(--lh-snug) !important;
  letter-spacing: var(--ls-tight) !important;
  font-weight: 950;
}
h2{
  font-size: var(--t-md) !important;
  line-height: var(--lh-base) !important;
  letter-spacing: var(--ls-snug) !important;
  font-weight: 950;
}
h3{
  font-size: var(--t-sm) !important;
  line-height: 1.4 !important;
  letter-spacing: var(--ls-base) !important;
  font-weight: 950;
}
h4{
  font-size: var(--b-sm) !important;
  line-height: 1.5 !important;
  letter-spacing: var(--ls-base) !important;
  font-weight: 700;
}

/* 메인 페이지 (body.tier-main) — 한 단계 위로 */
body.tier-main h1{
  font-size: var(--t-xl) !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-tight) !important;
  font-weight: 950;
}
body.tier-main h2{
  font-size: var(--t-lg) !important;
  line-height: var(--lh-snug) !important;
  letter-spacing: var(--ls-tight) !important;
  font-weight: 950;
}
body.tier-main h3{
  font-size: var(--t-md) !important;
  line-height: var(--lh-base) !important;
  letter-spacing: var(--ls-snug) !important;
  font-weight: 950;
}
body.tier-main h4{
  font-size: var(--t-sm) !important;
  line-height: 1.4 !important;
  letter-spacing: var(--ls-base) !important;
  font-weight: 700;
}

/* === 본문·보조 클래스 매핑 (옵션 — 점진 도입) ===================== */
.t-xl{ font-size: var(--t-xl) !important; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 950; }
.t-lg{ font-size: var(--t-lg) !important; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); font-weight: 950; }
.t-md{ font-size: var(--t-md) !important; line-height: var(--lh-base); letter-spacing: var(--ls-snug); font-weight: 950; }
.t-sm{ font-size: var(--t-sm) !important; line-height: 1.4; letter-spacing: var(--ls-base); font-weight: 700; }
.b-lg{ font-size: var(--b-lg) !important; line-height: var(--lh-body); }
.b   { font-size: var(--b)    !important; line-height: var(--lh-body); }
.b-sm{ font-size: var(--b-sm) !important; line-height: 1.6; }
.b-xs{ font-size: var(--b-xs) !important; line-height: 1.5; }

/* === 자주 사용되는 컴포넌트 (point fix) ========================== */
/* 알약·메타·라벨 패턴 — 마이크로 */
.label, .chip, .pill, .badge, .kicker, .eyebrow,
.product-card small, .scenario-meta span, .compare-card-scene{
  font-size: var(--b-xs) !important;
}

/* products/ "현장 운영 목적에 따라 어떻게 조합되나요" 섹션 카드 제목 — 한 단계 위 */
.map-purpose-card h4{
  font-size: var(--t-sm) !important;   /* 13.5px → 16px (본문 소 → 제목 소) */
  line-height: 1.35 !important;
  font-weight: 950;
}

/* 일반 단락 본문 — 본문 기본 */
p{
  font-size: var(--b);
  line-height: var(--lh-body);
}

/* Hero subtitle 등 큰 본문 */
.hero p, .hero-sub, .lead{
  font-size: var(--b-lg) !important;
  line-height: var(--lh-body);
}

/* === 의도 예외 보존 (escape hatch) =============================== */
/* 페이지가 특정 h를 다르게 표시해야 한다면 .no-typo 클래스를 부여하면 토큰 무효 */
.no-typo h1, .no-typo h2, .no-typo h3, .no-typo h4{
  font-size: revert !important;
  line-height: revert !important;
  letter-spacing: revert !important;
  font-weight: revert !important;
}