/* ============================================
 Typography Package (타이포그래피 패키지)
 재사용 가능한 타이포그래피 시스템
 모든 값은 variables.css의 변수를 사용
 중복 최소화: 유틸리티 클래스 조합으로 사용
 ============================================ */

/* ============================================
 공통 기본 스타일
 실제 사용 중인 클래스만 포함 (연속된 번호로 정리)
 ============================================ */
.text-t1,
.text-t2,
.text-t3,
.text-t4,
.text-t5,
.text-t6,
.text-t7,
.text-t8,
.text-t9,
.text-t10,
.text-t11,
.text-t12,
.text-t13,
.text-t14,
.text-t15,
.text-t16,
.text-t17,
.text-t18,
.text-t19,
.text-t20,
.text-t21,
.text-t22,
.text-t23,
.text-t24,
.text-t25 { font-family: var(--font-primary); } 

/* ============================================
 Base Typography (기본 타이포그래피)
 실제 HTML에서 사용 중인 클래스만 정의
 번호를 연속적으로 재정렬
 ============================================ */

/* Typography 1 - 네비게이션 (14px, Medium, White-90) */
.text-t1 { font-size: var(--font-size-sm); font-weight: var(--typo-d-weight-medium); color: var(--color-text-white-90); } 

/* Typography 2 - 고정 텍스트 레이어용 (요트/로켓/점프 섹션) (64px, SemiBold) */
.text-t2 { font-size: var(--typo-e-size); font-weight: var(--typo-e-weight); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-02em); text-align: right; color: var(--typo-e-color); } 

/* Typography 2 ::before 가상 요소 (타이핑 효과용) */
.text-t2::before { font-family: var(--typo-e-family); font-size: var(--typo-e-size); font-weight: var(--typo-e-weight); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-02em); } 

/* Typography 3 - Propellant 카드 라벨 (14px, ExtraBold) */
.text-t3 { font-size: var(--font-size-sm); font-weight: var(--typo-d-weight-extrabold); line-height: var(--line-height-24); color: var(--color-propellant-card-label); } 

/* Typography 4 - Propellant 카드 타이틀 (20px, SemiBold) */
.text-t4 { font-size: var(--font-size-xl); font-weight: var(--typo-d-weight-semibold); line-height: var(--line-height-26); color: var(--color-propellant-card-text); } 

/* Typography 5 - Propellant 페이지 번호 (20px, ExtraBold) */
.text-t5 { font-size: var(--font-size-xl); font-weight: var(--typo-d-weight-extrabold); line-height: var(--line-height-26); color: var(--typo-d-color-white); } 

/* Typography 6 - Propellant 페이지 구분자/총 개수 (20px, Medium) */
.text-t6 { font-size: var(--font-size-xl); font-weight: var(--typo-d-weight-medium); line-height: var(--line-height-26); color: var(--typo-d-color-gray-medium); } 

/* Typography 7 - Propellant Family 타이틀 (20px, Bold) */
.text-t7 { font-size: var(--font-size-xl); font-weight: var(--typo-d-weight-bold); line-height: var(--line-height-28); letter-spacing: var(--letter-spacing-04px); color: var(--typo-d-color-white); } 

/* Typography 8 - Propellant Family 텍스트 (20px, SemiBold) */
.text-t8 { font-size: var(--font-size-xl); font-weight: var(--typo-d-weight-semibold); line-height: var(--line-height-32); letter-spacing: var(--letter-spacing-04px-small); color: var(--color-propellant-family-text-inactive); } 

/* Typography 9 - 첫 페이지 메뉴 라벨 (16px, Regular, 150% line-height, -0.2% letter-spacing) */
.text-t9 { font-family: var(--font-display); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-02percent); color: var(--color-menu-label); } 

/* Typography 10 - 첫 페이지 메뉴 텍스트 (24px, Light, 150% line-height, -0.2% letter-spacing) */
.text-t10 { font-family: var(--font-display); font-size: var(--font-size-24); font-weight: var(--font-weight-light); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-02percent); color: var(--typo-d-color-white); } 

/* Typography 11 - Propellant 타이틀 (40px, Light) - 기존 text-t14 */
.text-t11 { font-weight: var(--font-weight-light); font-size: var(--font-size-40); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-02em); color: var(--typo-c-color-white); } 

/* Typography 12 - 테이블 섹션 메인 문구 (80px, Light) - 기존 text-t19 */
.text-t12 { font-weight: var(--font-weight-light); font-size: var(--font-size-80); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-04px); color: var(--color-text-white); text-align: center; } 

/* Typography 13 - 테이블 섹션 서브 문구 (32px, Regular) - 기존 text-t20 */
.text-t13 { font-weight: var(--font-weight-regular); font-size: var(--font-size-32); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-03px); color: var(--color-text-c9c9c9); text-align: center; } 

/* Typography 14 - 글래스 영역 Overview 라벨 (20px, Light) - 기존 text-t21 */
.text-t14 { font-weight: var(--font-weight-light); font-size: var(--font-size-xl); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-04px); color: var(--color-text-00adee); } 

/* Typography 15 - 글래스 영역 메인 타이틀 (56px, Light) - 기존 text-t22 */
.text-t15 { font-weight: var(--font-weight-light); font-size: var(--font-size-56); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-224px); color: var(--color-text-1e1e1e); } 

/* Typography 16 - 글래스 영역 서브 문구 (28px, Light) - 기존 text-t23 */
.text-t16 { font-weight: var(--font-weight-light); font-size: var(--font-size-28); line-height: var(--line-height-170); letter-spacing: var(--letter-spacing-112px); color: var(--color-text-gray-727272); } 

/* Typography 17 - 숲 섹션 메인 텍스트 (80px, Light) - 기존 text-t24 */
.text-t17 { font-weight: var(--font-weight-light); font-size: var(--font-size-80); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-04em); color: var(--color-text-white); text-align: center; } 

/* Typography 18 - 숲 섹션 회색 텍스트 (80px, Light) - 기존 text-t25 */
.text-t18 { font-weight: var(--font-weight-light); font-size: var(--font-size-80); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-04em); color: var(--color-text-b0b0b0); text-align: center; } 

/* Typography 19 - 흰색 섹션 텍스트 (48px, Light) - 기존 text-t26 */
.text-t19 { font-weight: var(--font-weight-light); font-size: var(--font-size-48); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-192px); color: var(--color-text-414141); text-align: center; }

/* Typography 20 - Propellant 타이틀 (48px, Light, -4% letter-spacing) */
.text-t20 { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--font-size-48); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-192px); color: var(--typo-c-color-white); }

/* Typography 21 - About 페이지 라벨 (24px, Regular, 150% line-height, -2% letter-spacing) */
.text-t21 { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-24); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-02em); color: var(--color-text-bcbcbc); }

/* Typography 22 - About 페이지 본문 (34px, Light, 160% line-height, -4% letter-spacing) */
.text-t22 { font-family: var(--font-primary); font-weight: var(--font-weight-light); font-size: var(--font-size-34); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-04em); }
.text-t22 span { font-weight: var(--font-weight-semibold); }

/* Typography 23 - About 페이지 목록 숫자 (20px, Light, 140% line-height, -2% letter-spacing) */
.text-t23 { font-family: var(--font-primary); font-weight: var(--font-weight-light); font-size: var(--font-size-xl); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-02em); text-align: center; }

/* Typography 24 - About 페이지 목록 타이틀 (30px, Semibold, 140% line-height, -2% letter-spacing) */
.text-t24 { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-30); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-02em); text-align: left; color: var(--color-text-1e1e1e); }

/* Typography 25 - About 페이지 목록 서브타이틀 (24px, Regular, 140% line-height, -2% letter-spacing) */
.text-t25 { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-24); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-02em); text-align: left; color: var(--color-text-888888); }

/* Typography 26 - 인사말 본문 (18px, Regular, 160% line-height, -2% letter-spacing) */
.text-t26 { font-family: var(--font-primary); font-size: var(--font-size-lg); font-weight: var(--font-weight-regular); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-02em); }
.text-t26 span { font-weight: var(--font-weight-medium); }

/* Typography 27 - 인사말 서명 타이틀 (20px, Semibold, 160% line-height, -2% letter-spacing) */
.text-t27 { font-family: var(--font-primary); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-02em); }

/* Typography 28 - 인사말 서명 이름 (20px, Semibold, 160% line-height, -2% letter-spacing) */
.text-t28 { font-family: var(--font-primary); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-02em); }

/* Typography 29 - 성장성 페이지 모토 (34px, Semibold, 160% line-height, -4% letter-spacing) */
.text-t29 { font-family: var(--font-primary); font-size: var(--font-size-34); font-weight: var(--font-weight-semibold); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-04em); } 

/* Typography 30 - 성장성 페이지 본문 (24px, Regular, 160% line-height, -2% letter-spacing) */
.text-t30 { font-family: var(--font-primary); font-size: var(--font-size-24); font-weight: var(--font-weight-regular); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-02em); color: var(--color-text-1e1e1e); }
.text-t30 span { font-weight: var(--font-weight-semibold); }

/* Typography 31 - 전문성 페이지 모토 (34px, Regular, 160% line-height, -4% letter-spacing) */
.text-t31 { font-family: var(--font-primary); font-size: var(--font-size-34); font-weight: var(--font-weight-regular); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-04em); color: var(--color-text-1e1e1e); }
.text-t31 span { font-weight: var(--font-weight-semibold); }

/* Typography 32 - 전문성 페이지 본문 강조 (38px, Regular, 160% line-height, -4% letter-spacing) */
.text-t32 { font-family: var(--font-primary); font-size: var(--font-size-38); font-weight: var(--font-weight-regular); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-04em); color: var(--color-text-1e1e1e); }
.text-t32 span { font-weight: var(--font-weight-semibold); }

/* Typography 33 - 혁신성 페이지 목록 타이틀 (24px, Medium, color #555555) */
.text-t33 { font-family: var(--font-primary); font-size: var(--font-size-24); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-02em); color: var(--color-text-555); }

/* Typography 34 - 혁신성 페이지 목록 서브텍스트 (16px, Light, color #555555) */
.text-t34 { font-family: var(--font-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-02em); color: var(--color-text-555); }

/* Typography 35 - 사회공헌 페이지 본문 (24px, Regular, color #555555) */
.text-t35 { font-family: var(--font-primary); font-size: var(--font-size-24); font-weight: var(--font-weight-regular); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-02em); color: var(--color-text-555); }

/* ============================================
   Utility Classes (유틸리티 클래스)
 재사용 가능한 유틸리티 클래스 - CSS에서 살을 붙여서 사용
 ============================================ */

/* 텍스트 정렬 */
.text-left { text-align: left; } 

.text-center { text-align: center; } 

.text-right { text-align: right; } 

/* 텍스트 색상 */
.text-white { color: var(--color-text-white); } 

.text-white-90 { color: var(--color-text-white-90); } 

.text-white-80 { color: var(--color-text-white-80); } 

.text-color-primary { color: var(--color-primary); } 

.text-gray-494949 { color: var(--color-text-gray-494949); } 

.text-black { color: var(--color-bg-black); } 

.text-cecece { color: var(--color-text-cecece); } 

.text-1e1e1e { color: var(--color-text-1e1e1e); } 

.text-00adee { color: var(--color-text-00adee); } 

.text-b0b0b0 { color: var(--color-text-b0b0b0); } 

.text-414141 { color: var(--color-text-414141); } 

.text-c9c9c9 { color: var(--color-text-c9c9c9); } 

.text-gray-727272 { color: var(--color-text-gray-727272); } 

/* 폰트 굵기 */
.font-light { font-weight: var(--font-weight-light); } 

.font-regular { font-weight: var(--font-weight-regular); } 

.font-medium { font-weight: var(--font-weight-medium); } 

.font-bold { font-weight: var(--font-weight-bold); } 

.font-semibold { font-weight: var(--font-weight-semibold); } 

.font-extrabold { font-weight: var(--font-weight-extrabold); } 

/* 폰트 크기 */
.text-sm { font-size: var(--font-size-sm); } 

.text-lg { font-size: var(--font-size-lg); } 

.text-xl { font-size: var(--font-size-xl); } 

.text-2xl { font-size: var(--font-size-2xl); } 

.text-24 { font-size: var(--font-size-24); } 

.text-28 { font-size: var(--font-size-28); } 

.text-32 { font-size: var(--font-size-32); } 

.text-40 { font-size: var(--font-size-40); } 

.text-48 { font-size: var(--font-size-48); } 

.text-56 { font-size: var(--font-size-56); } 

.text-64 { font-size: var(--font-size-64); } 

.text-80 { font-size: var(--font-size-80); } 

.text-90 { font-size: var(--font-size-90); } 

/* Line Height */
.leading-24 { line-height: var(--line-height-24); } 

.leading-26 { line-height: var(--line-height-26); } 

.leading-28 { line-height: var(--line-height-28); } 

.leading-32 { line-height: var(--line-height-32); } 

.leading-36 { line-height: var(--line-height-36); } 

.leading-130 { line-height: var(--line-height-tight); } 

.leading-140 { line-height: var(--line-height-normal); } 

.leading-150 { line-height: var(--line-height-relaxed); } 

.leading-160 { line-height: var(--line-height-loose); } 

.leading-170 { line-height: var(--line-height-170); } 

/* Letter Spacing */
.tracking-02em { letter-spacing: var(--letter-spacing-02em); } 

.tracking-015em { letter-spacing: var(--letter-spacing-015em); } 

.tracking-03px { letter-spacing: var(--letter-spacing-03px); } 

.tracking-04px { letter-spacing: var(--letter-spacing-04px); } 

.tracking-04px-small { letter-spacing: var(--letter-spacing-04px-small); } 

.tracking-05px { letter-spacing: var(--letter-spacing-05px); } 

.tracking-16px { letter-spacing: var(--letter-spacing-16px); } 

.tracking-32px { letter-spacing: var(--letter-spacing-32px); } 

.tracking-36px { letter-spacing: var(--letter-spacing-36px); } 

.tracking-112px { letter-spacing: var(--letter-spacing-112px); } 

.tracking-192px { letter-spacing: var(--letter-spacing-192px); } 

.tracking-224px { letter-spacing: var(--letter-spacing-224px); } 

/* ============================================
   text-t 시리즈 모바일 (max-width: 1200px)
   기준: .text-t22 데스크톱 34px → 16px 비율(16/34), 11px 미만은 11px
   인트로·growth-page 보정 포함 (style.css의 데스크톱 전용 font-size와 함께 사용)
   ============================================ */
@media (max-width: 1200px) {
  .text-t1 { font-size: 11px; }
  .text-t2,
  .text-t2::before { font-size: 30px; }
  .text-t3,
  .text-t4,
  .text-t5,
  .text-t6,
  .text-t7,
  .text-t8 { font-size: 14px; }
  .text-t9 { font-size: 14px; }
  .text-t10 { font-size: 14px; }
  .text-t11 { font-size: 19px; }
  .text-t12 { font-size: 38px; }
  .text-t13 { font-size: 15px; }
  .text-t14 { font-size: 14px; }
  .text-t15 { font-size: 26px; }
  .text-t16 { font-size: 14px; }
  .text-t17,
  .text-t18 { font-size: 38px; }
  .text-t19,
  .text-t20 { font-size: 23px; }
  .text-t21 { font-size: 14px; }
  .text-t22 { font-size: 16px; }
  .text-t23 { font-size: 14px; }
  .text-t24 { font-size: 14px; }
  .text-t25 { font-size: 14px; }
  .text-t26 { font-size: 14px; }
  .text-t27,
  .text-t28 { font-size: 14px; }
  .text-t29 { font-size: 16px; }
  .text-t30 { font-size: 16px; }
  .text-t31 { font-size: 16px; }
  .text-t32 { font-size: 18px; }
  .text-t33 { font-size: 14px; font-weight: 500; }
  .text-t34 { font-size: 12px; font-weight: 400; }
  .text-t35 { font-size: 14px; }

  .intro-text p.text-t2,
  .intro-text p.text-t2::before { font-size: 28px; }
  .intro-text p.text-t2 span { font-size: inherit; }

  .intro-slider .intro-text.text-1:not(.active) p.text-t2,
  .intro-slider .intro-text.text-2:not(.active) p.text-t2,
  .intro-slider .intro-text.text-3:not(.active):not(.intro-highlighted) p.text-t2,
  .intro-slider .intro-text.text-1:not(.active) p.text-t2 span,
  .intro-slider .intro-text.text-2:not(.active) p.text-t2 span,
  .intro-slider .intro-text.text-3:not(.active):not(.intro-highlighted) p.text-t2 span {
    font-size: 19px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
  }

  .growth-page .text-t29 { font-size: 16px; font-weight: 600 !important; }
}