/* ===========================================
 Pretendard Font Definitions
 =========================================== */

/* 폰트 정의 */
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold 폰트가 없을 경우 SemiBold를 Bold로 매핑 */
@font-face {
  font-family: 'Pretendard';
  src: url('./font/Pretendard-SemiBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 폰트 정의 */
@font-face {
  font-family: 'KIMM_Light';
  src: url('./font/KIMM_Light.ttf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Bold 폰트가 없을 경우 SemiBold를 Bold로 매핑 */
@font-face {
  font-family: 'KIMM_bold';
  src: url('./font/KIMM_bold.ttf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ===========================================
 CSS Variables
 =========================================== */

:root {
	/* Font Family */
	--font-pretendard: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;

	/* Heading Sizes (Desktop) - H0부터 시작 */
	--h0-size: 48px;
	--h1-size: 32px;
	--h2-size: 24px;
	--h3-size: 20px;
	--h4-size: 18px;
	--h5-size: 16px;
	--h6-size: 16px;

	/* Paragraph Sizes */
	--p1-size: 14px;
	--p2-size: 14px;
	--p3-size: 12px;
	--p4-size: 12px;
	--p5-size: 10px;
	--p6-size: 10px;

	/* Font Weights */
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* Line Heights /
	--line-height-120: 1.2;   / 120% /
	--line-height-133: 1.33;  / 133% /
	--line-height-150: 1.5;   / 150% */

	/* Spacing */
	--paragraph-spacing: 0px;
	--heading-spacing: 0px;
	--letter-spacing-tight: -0.02em;
	--letter-spacing-normal: 0;
}

/* ===========================================
Base Typography Reset
=========================================== */

body {
	font-family: var(--font-pretendard);
	font-weight: var(--weight-regular);
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ===========================================
Heading Styles
=========================================== */

/* H0 - 메인 타이틀 (48px, Semibold, 133%) */
.heading-h0 {
	font-family: var(--font-pretendard);
	font-size: var(--h0-size);
	font-weight: var(--weight-semibold);
	line-height: var(--line-height-133);
	letter-spacing: var(--letter-spacing-normal);
	margin-bottom: var(--heading-spacing);
	word-break: keep-all;
}

/* H1 - 섹션 타이틀 (32px, Medium, 133%) */
.heading-h1,
h1.heading {
	font-family: var(--font-pretendard);
	font-size: var(--h1-size);
	font-weight: var(--weight-medium);
	line-height: var(--line-height-133);
	letter-spacing: var(--letter-spacing-normal);
	margin-bottom: var(--heading-spacing);
	word-break: keep-all;
}

/* H2 - 서브섹션 타이틀 (24px, Bold, 133%) */
.heading-h2,
h2.heading {
	font-family: var(--font-pretendard);
	font-size: var(--h2-size);
	font-weight: var(--weight-bold);
	line-height: var(--line-height-133);
	letter-spacing: var(--letter-spacing-normal);
	margin-bottom: var(--heading-spacing);
	word-break: keep-all;
}

/* H3 - 작은 섹션 타이틀 (20px, Bold, 120%) */
.heading-h3,
h3.heading {
	font-family: var(--font-pretendard);
	font-size: var(--h3-size);
	font-weight: var(--weight-bold);
	line-height: var(--line-height-120);
	letter-spacing: var(--letter-spacing-normal);
	margin-bottom: var(--heading-spacing);
	word-break: keep-all;
}

/* H4 - 마이너 헤딩 (18px, Semibold, 120%) */
.heading-h4,
h4.heading {
	font-family: var(--font-pretendard);
	font-size: var(--h4-size);
	font-weight: var(--weight-semibold);
	line-height: var(--line-height-120);
	letter-spacing: var(--letter-spacing-normal);
	margin-bottom: var(--heading-spacing);
	word-break: keep-all;
}

/* H5 - 작은 헤딩 (16px, Semibold, 150%) */
.heading-h5,
h5.heading {
	font-family: var(--font-pretendard);
	font-size: var(--h5-size);
	font-weight: var(--weight-semibold);
	line-height: var(--line-height-150);
	letter-spacing: var(--letter-spacing-normal);
	margin-bottom: var(--heading-spacing);
	word-break: keep-all;
}

/* H6 - 가장 작은 헤딩 (16px, Regular, 150%) */
.heading-h6,
h6.heading {
	font-family: var(--font-pretendard);
	font-size: var(--h6-size);
	font-weight: var(--weight-regular);
	line-height: var(--line-height-150);
	letter-spacing: var(--letter-spacing-normal);
	margin-bottom: var(--heading-spacing);
	word-break: keep-all;
}
/* ===========================================
 Paragraph Styles
 =========================================== */

/* P1 - 큰 본문 (14px, Medium, 150%) */
.paragraph-p1,
p.p1 {
  font-family: var(--font-pretendard);
  font-size: var(--p1-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing);
  word-break: keep-all;
}

/* P2 - 일반 본문 (14px, Regular, 150%) */
.paragraph-p2,
p.p2,
p {
  font-family: var(--font-pretendard);
  font-size: var(--p2-size);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing);
  word-break: keep-all;
}

/* P3 - 중간 본문 (12px, Medium, 150%) */
.paragraph-p3,
p.p3 {
  font-family: var(--font-pretendard);
  font-size: var(--p3-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing);
  word-break: keep-all;
}

/* P4 - 작은 본문 (12px, Regular, 150%) */
.paragraph-p4,
p.p4 {
  font-family: var(--font-pretendard);
  font-size: var(--p4-size);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing);
  word-break: keep-all;
}

/* P5 - 캡션 강조 (10px, Medium, 150%) */
.paragraph-p5,
p.p5 {
  font-family: var(--font-pretendard);
  font-size: var(--p5-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing);
  word-break: keep-all;
}

/* P6 - 캡션 (10px, Regular, 150%) */
.paragraph-p6,
p.p6 {
  font-family: var(--font-pretendard);
  font-size: var(--p6-size);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing);
  word-break: keep-all;
}

/* ===========================================
 Utility Classes
 =========================================== */

/* Text Alignment */
.text--left { text-align: left; }
.text--center { text-align: center; }
.text--right { text-align: right; }
.text--justify { text-align: justify; }

/* Font Weight Overrides */
.text--light { font-weight: var(--weight-light) !important; }
.text--regular { font-weight: var(--weight-regular) !important; }
.text--medium { font-weight: var(--weight-medium) !important; }
.text--semibold { font-weight: var(--weight-semibold) !important; }
.text--bold { font-weight: var(--weight-bold) !important; }

/* Spacing Utilities */
.text--no-margin { margin: 0 !important; }
.text--small-margin { margin-bottom: 2px !important; }
.text--large-margin { margin-bottom: 12px !important; }
.text--xl-margin { margin-bottom: 20px !important; }

/* Color Variants */
.text--primary { color: #2563eb; }
.text--secondary { color: #64748b; }
.text--success { color: #059669; }
.text--warning { color: #d97706; }
.text--destructive { color: #FE5050; }
.text--danger { color: #dc2626; }
.text--muted { color: #6b7280; }
.text--white { color: #ffffff; }
.text--black { color: #000000; }

/* Special Effects for Headings */
.heading--gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.heading--underline {
  position: relative;
  padding-bottom: 8px;
}

.heading--underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: currentColor;
  opacity: 0.3;
}

.heading--highlight {
  background: linear-gradient(180deg, transparent 50%, #fef3c7 50%);
  padding: 0 4px;
}

/* Paragraph Specific Utilities */
.paragraph--lead {
  font-size: 1.125em;
  font-weight: var(--weight-medium);
  color: #374151;
}

.paragraph--small {
  font-size: 0.875em;
  color: #6b7280;
}

.paragraph--caption {
  font-size: 0.75em;
  color: #9ca3af;
  font-style: italic;
}

/* ===========================================
 Content Specific Styles
 =========================================== */

/* Article/Blog Content */
.content-article p {
  margin-bottom: 16px;
}

.content-article p:last-child {
  margin-bottom: 0;
}

/* UI Text */
.ui-text {
  margin-bottom: 0;
}

/* Form Labels */
.form-label {
  display: block;
  margin-bottom: 4px;
  font-weight: var(--weight-medium);
}

/* Help Text */
.help-text {
  font-size: var(--p6-size);
  color: var(--text-muted);
  margin-top: 4px;
}

/* ===========================================
 Print Styles
 =========================================== */

@media print {
  /* Headings */
  .heading-h1, h1.heading { font-size: 24pt; color: #000 !important; }
  .heading-h2, h2.heading { font-size: 18pt; color: #000 !important; }
  .heading-h3, h3.heading { font-size: 16pt; color: #000 !important; }
  .heading-h4, h4.heading { font-size: 14pt; color: #000 !important; }
  .heading-h5, h5.heading { font-size: 12pt; color: #000 !important; }
  .heading-h6, h6.heading { font-size: 11pt; color: #000 !important; }
  .heading-h7 { font-size: 10pt; color: #000 !important; }
  
  /* Paragraphs */
  .paragraph-p1, p.p1 { font-size: 12pt; color: #000 !important; }
  .paragraph-p2, p.p2, p { font-size: 11pt; color: #000 !important; }
  .paragraph-p3, p.p3 { font-size: 10pt; color: #000 !important; }
  .paragraph-p4, p.p4 { font-size: 9pt; color: #000 !important; }
  .paragraph-p5, p.p5 { font-size: 8pt; color: #000 !important; }
  .paragraph-p6, p.p6 { font-size: 8pt; color: #000 !important; }
}

/* ===========================================
 Accessibility
 =========================================== */

@media (prefers-reduced-motion: reduce) {
  * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .text--muted { color: #000; }
  .paragraph--small { color: #000; }
  .paragraph--caption { color: #000; }
  
  @media (prefers-color-scheme: dark) {
      .text--muted { color: #fff; }
      .paragraph--small { color: #fff; }
      .paragraph--caption { color: #fff; }
  }
}

/* ===========================================
 Font Loading Optimization
 =========================================== */

/* 폰트 로딩 중 fallback */
.font-loading {
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
}

/* 폰트 로딩 완료 후 */
.font-loaded {
  font-family: var(--font-pretendard);
}

/* ===========================================
 Button Text Styles (Based on Design System)
 =========================================== */

/* Button Medium - 16px, Semibold, 150% */
.button-medium,
.btn-medium {
  font-family: var(--font-pretendard);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing);
  word-break: keep-all;
}

/* Button Small - 16px, Semibold, 150% */
.button-small,
.btn-small {
  font-family: var(--font-pretendard);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing);
  word-break: keep-all;
}

/* Button XSmall - 14px, Medium, 150% */
.button-xsmall,
.btn-xsmall {
  font-family: var(--font-pretendard);
  font-size: 14px;
  font-weight: var(--weight-medium);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing);
  word-break: keep-all;
}

/* Button XXSmall - 12px, Medium, 150% */
.button-xxsmall,
.btn-xxsmall {
  font-family: var(--font-pretendard);
  font-size: 12px;
  font-weight: var(--weight-medium);
  line-height: var(--line-height-150);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--paragraph-spacing);
  word-break: keep-all;
}