@charset "UTF-8";
/*
 * Shared Typography Tokens — 공용 타이포그래피 시스템
 *
 * 대상 사이트: MetaHoop Arena / AX·DX Robot / XR·VP Studio
 *
 * 로드 순서 (base.html):
 *   1. content-protection.css
 *   2. consent-checkbox.css
 *   3. xrv-ov-carousel.css
 *   4. 이 파일  ← 공용 타이포그래피 토큰
 *   5. 사이트별 root.css  (레이아웃 + 브랜드)
 *   6. 사이트별 layout_*.css
 *
 * 규칙:
 *   • 폰트 패밀리·크기·weight·line-height·letter-spacing만 정의
 *   • 브랜드 액센트 색상은 이 파일에서 다루지 않음(사이트별 고유성 유지)
 *   • 새 사이트/섹션 추가 시 이 토큰을 var()로 참조하면 자동 통일
 */

:root {

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     HERO VISUAL
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* Kicker (eyebrow 레이블) */
  --typo-hero-kicker-size:              0.72rem;
  --typo-hero-kicker-weight:            700;       /* bold — 세 사이트 공통 */
  --typo-hero-kicker-letter-spacing:    0.16em;

  /* Title */
  --typo-hero-title-size:               clamp(1rem, 2.6vw, 2.84rem);
  --typo-hero-title-weight:             600;       /* semi-bold — AX·DX·XRV 기준으로 MHA 통일 */
  --typo-hero-title-line-height:        1.08;
  --typo-hero-title-letter-spacing:     -0.03em;

  /* Description */
  --typo-hero-desc-size:                clamp(0.94rem, 1.55vw, 1.06rem);
  --typo-hero-desc-weight:              300;
  --typo-hero-desc-line-height:         1.85;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     섹션 내비게이션
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --typo-nav-item-size:                 15px;      /* font-size-base */
  --typo-nav-item-weight:               500;       /* medium */
  --typo-nav-item-letter-spacing:       0.01em;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     OVERVIEW
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* Title */
  --typo-overview-title-size:           clamp(2.2rem, 4vw, 3.2rem);
  --typo-overview-title-weight:         500;       /* medium */
  --typo-overview-title-line-height:    1.14;
  --typo-overview-title-letter-spacing: -0.025em;

  /* Description */
  --typo-overview-desc-size:            1.06rem;
  --typo-overview-desc-weight:          300;
  --typo-overview-desc-line-height:     1.85;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     제품 리스트 카드
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* 카드 제목 (name) */
  --typo-product-name-size:             17px;      /* font-size-md */
  --typo-product-name-weight:           700;       /* bold */
  --typo-product-name-line-height:      1.35;

  /* 서브타이틀 */
  --typo-product-subtitle-size:         13px;      /* font-size-sm */
  --typo-product-subtitle-weight:       500;       /* medium */

  /* 헤드라인 */
  --typo-product-headline-size:         17px;      /* font-size-md */
  --typo-product-headline-weight:       800;       /* extra-bold */
  --typo-product-headline-letter-spacing: -0.01em;

  /* 설명 문구 — 기존 4줄 -webkit-line-clamp 작업 line-height 값 승계 */
  --typo-product-desc-size:             13px;      /* font-size-sm */
  --typo-product-desc-weight:           400;       /* normal */
  --typo-product-desc-line-height:      1.75;
}

/*
 * 접근성·SEO 유틸리티
 * .sr-only: 스크린리더와 검색엔진에만 노출, 화면에서는 숨김.
 * 대표적 사용: 페이지당 하나의 <h1> 보장(SEO), 시각 디자인 변경 없이.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}