@charset "utf-8";

/* 1. 타이포그래피 토큰 및 기본 설정 */
:root {
  --font-family-base: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 폰트 크기 토큰 */
  --font-body: 16px;
  --font-body-small: 14px;
  --font-meta: 13px;

  --font-page-title: 42px;
  --font-section-title: 32px;
  --font-subsection-title: 24px;
  --font-card-title: 20px;
  --font-button: 15px;
  --font-gnb: 16px;

  /* 굵기 토큰 */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 행간 토큰 */
  --line-body: 1.65;
  --line-heading: 1.3;
}

/* 2. 전역 엘리먼트 초기화 (아이콘 폰트 영향 방지를 위해 !important 미사용) */
html,
body,
button,
input,
select,
textarea,
table {
  font-family: var(--font-family-base);
}

/* 아이콘 폰트 강제 유지 규칙 */
.material-symbols-outlined,
.material-icons,
[class*="material-symbols"] {
  font-family: "Material Symbols Outlined" !important;
}

/* 3. 공통 타이포그래피 클래스 체계 정의 */
.page-title {
  font-family: var(--font-family-base);
  font-size: var(--font-page-title);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.section-title {
  font-size: var(--font-section-title);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.subsection-title {
  font-size: var(--font-subsection-title);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.card-title {
  font-size: var(--font-card-title);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}

.body-text {
  font-size: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-body);
  letter-spacing: -0.01em;
}

.eyebrow-label {
  font-family: var(--font-family-base);
  font-size: var(--font-meta);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 4. 모바일 반응형 기준 적용 */
@media (max-width: 768px) {
  :root {
    --font-page-title: 34px;
    --font-section-title: 28px;
    --font-subsection-title: 22px;
    --font-card-title: 19px;
    --font-body: 15px;
  }
}

/* 5. 특장점 및 카드 요소 중앙 정렬 공통 클래스 */
.feature-card-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}