/* 📝 ProductStoryChain Typography System
 * UI DesignGuide.md 기반 타이포그래피 시스템
 * Pretendard 폰트를 기본으로 하며, 가독성과 계층 구조를 고려한 스타일 정의
 */

/* 🔤 Font Import - Optimistic Text / Montserrat / Pretendard */
/* Optimistic Text CDN(외부) 500 오류로 인한 임시 비활성화
   → 폰트 패밀리는 그대로 두고, 실제 로딩은 Montserrat를 사용(폴백 작동)
   → 필요 시 self-host로 교체 예정 */
/* @import url('https://fonts.cdnfonts.com/css/optimistic-text'); */
/* 폴백: Montserrat가 1순위 대체 역할 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* 🏗️ Base Typography Setup - 기본 타이포그래피 설정 */
html {
   font-size: 16px;
   /* 1rem = 16px 기준 */
   font-family: var(--font-family-primary);
   line-height: var(--line-height-normal);
   color: var(--color-text-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family: var(--font-family-primary);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-normal);
   color: var(--color-text-primary);
   background-color: var(--color-background);
}

/* 📖 Headings - 제목 스타일 */
h1,
.heading-1 {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-extrabold);
   line-height: var(--line-height-tight);
   color: var(--color-text-primary);
   margin: 0 0 var(--spacing-lg) 0;
   letter-spacing: -0.025em;
}

h2,
.heading-2 {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
   color: var(--color-text-primary);
   margin: 0 0 var(--spacing-md) 0;
   letter-spacing: -0.015em;
}

h3,
.heading-3 {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
   color: var(--color-text-primary);
   margin: 0 0 var(--spacing-sm) 0;
}

h4,
.heading-4 {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
   color: var(--color-text-primary);
   margin: 0 0 var(--spacing-sm) 0;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

/* 📄 Body Text - 본문 텍스트 */
p,
.body-text {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-normal);
   color: var(--color-text-primary);
   margin: 0 0 var(--spacing-md) 0;
}

.body-small {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-normal);
   color: var(--color-text-secondary);
}

.body-large {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-relaxed);
   color: var(--color-text-primary);
}

/* 🏷️ Labels & Captions - 라벨 및 캡션 */
.label {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-tight);
   color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin: 0;
}

.caption {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-normal);
   color: var(--color-text-secondary);
   margin: 0;
}

/* 🔗 Links - 링크 스타일 */
a,
.link {
   color: var(--color-accent);
   text-decoration: none;
   font-weight: var(--font-weight-medium);
   transition: color var(--transition-fast);
}

a:hover,
.link:hover,
a:focus,
.link:focus {
   color: var(--color-primary);
   text-decoration: underline;
}

/* 💬 Interactive Text - 상호작용 텍스트 */
.text-interactive {
   color: var(--color-accent);
   cursor: pointer;
   transition: color var(--transition-fast);
}

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

/* 🎯 Semantic Text Colors - 의미별 텍스트 색상 */
.text-primary {
   color: var(--color-text-primary);
}

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

.text-disabled {
   color: var(--color-text-disabled);
   cursor: not-allowed;
}

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

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

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

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

/* 📏 Text Sizes - 텍스트 크기 유틸리티 */
.text-xs {
   font-size: var(--font-size-xs);
}

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

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

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

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

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

/* 💪 Font Weights - 폰트 굵기 유틸리티 */
.font-normal {
   font-weight: var(--font-weight-normal);
}

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

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

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

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

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

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

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

/* 🔄 Text Transform - 텍스트 변형 */
.text-uppercase {
   text-transform: uppercase;
}

.text-lowercase {
   text-transform: lowercase;
}

.text-capitalize {
   text-transform: capitalize;
}

/* ✂️ Text Overflow - 텍스트 오버플로우 */
.text-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.text-truncate-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.text-truncate-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* 💻 Code & Monospace - 코드 및 고정폭 폰트 */
code,
pre,
.code {
   font-family: var(--font-family-mono);
   font-size: 0.875em;
   background-color: var(--color-border);
   padding: 0.125rem 0.25rem;
   border-radius: var(--radius-sm);
}

pre {
   padding: var(--spacing-md);
   border-radius: var(--radius-md);
   overflow-x: auto;
   line-height: var(--line-height-normal);
}

/* 📱 Mobile Typography Adjustments - 모바일 타이포그래피 조정 */
@media (max-width: 767px) {

   h1,
   .heading-1 {
      font-size: var(--font-size-xl);
      margin-bottom: var(--spacing-md);
   }

   h2,
   .heading-2 {
      font-size: 1.125rem;
      /* 18px */
      margin-bottom: var(--spacing-sm);
   }

   p,
   .body-text {
      margin-bottom: var(--spacing-sm);
   }
}

/* 🔤 Korean Typography Optimization - 한글 타이포그래피 최적화 */
:lang(ko) {
   word-break: keep-all;
   line-height: 1.6;
}

/* 🌍 Multi-language Support - 다국어 지원 */
:lang(en) { font-family: 'Optimistic Text', 'Montserrat', 'Helvetica', 'Arial', 'Noto Sans', sans-serif; }

:lang(es) {
   font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
}