:root {
  --color-bg: #ffffff;
  --color-panel: #f5fbfc; /* 시안 톤이 도는 아주 연한 그레이 패널 배경 */
  --color-white: #ffffff;
  --color-ink: #181818; /* 어두운 테마 지정 컬러 */
  --color-muted: #373838; /* 시안 테마에 어울리는 뮤트 그레이 */
  --color-soft: #a8b3b5;
  --color-line: #e2e8e9;
  --color-primary: #00cce0; /* 포인트 시안블루 */
  --color-primary-dark: #00cce0; /* 어두운 시안 */
  --color-primary-deep: #007b87; /* 더 어두운 시안 */
  --color-primary-soft: #e5fafe; /* 연한 시안 소프트 배경 */
  --color-green: #00cce0; /* 포인트 시안블루 */
  --color-green-dark: #00a2b3;
  --color-green-soft: #e5fafe;
  --color-blue-soft: #e5fafe;
  --color-warm-line: #cbd3d5;
  --color-accent: #00b8cc; /* 보조 포인트 시안블루 */
  --shadow-soft: 0 18px 44px rgba(9, 36, 57, 0.10);
  --shadow-card: 0 12px 30px rgba(8, 34, 62, 0.08);
  --shadow-lift: 0 18px 42px rgba(8, 34, 62, 0.12);
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-card: 12px;
  --radius-panel: 20px;
  --radius-pill: 999px;
  --container: 1280px;
  --page-gutter: 24px;
  --header-height: 76px;
  --font-sans: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 650;
  --font-bold: 750;
  --font-heavy: 850;
  --type-hero: 52px;
  --type-section-title: 40px;
  --type-subtitle: 24px;
  --type-card-title: 17.92px;
  --type-body: 16px;
  --type-small: 14.4px;
  --ease: 180ms ease;

  /* --- Typography System --- */
  /* 1. Hero Title (on-image) */
  --typo-hero-title-font: var(--font-sans);
  --typo-hero-title-size: 57.6px;
  --typo-hero-title-size-mo: 30px;
  --typo-hero-title-weight: var(--font-heavy);
  --typo-hero-title-lh: 1.15;
  --typo-hero-title-ls: 0;
  --typo-hero-title-line-display: block;
  --typo-hero-title-white-space: nowrap;

  /* 2. Section Title */
  --typo-section-title-font: var(--font-sans);
  --typo-section-title-size: clamp(35.2px, 3.6vw, 44px);
  --typo-section-title-size-mo: 28.48px;
  --typo-section-title-weight: var(--font-heavy);
  --typo-section-title-lh: 1.25;
  --typo-section-title-ls: -0.01em;

  /* CTA Title */
  --typo-cta-title-size: clamp(34.4px, 2.75vw, 40px);
  --typo-cta-title-size-mo: clamp(31.2px, 8.6vw, 35.52px);
  --typo-subpage-cta-title-size: clamp(28.8px, 2.5vw, 35.2px);
  --typo-subpage-cta-title-size-mo: 26px;
  --typo-subpage-cta-title-lh: 1.32;

  /* 3. Card Title */
  --typo-card-title-font: var(--font-sans);
  --typo-card-title-size: 17.92px;
  --typo-card-title-size-mo: 16.8px;
  --typo-card-title-weight: var(--font-bold);
  --typo-card-title-lh: 1.36;
  --typo-card-title-ls: -0.01em;

  /* 4. Body Text */
  --typo-body-font: var(--font-sans);
  --typo-body-size: 16px;
  --typo-body-weight: var(--font-medium);
  --typo-body-lh: 1.68;
  --typo-body-ls: 0;

  /* 5. Description Text */
  --typo-desc-font: var(--font-sans);
  --typo-desc-size: 17.28px;
  --typo-desc-weight: var(--font-medium);
  --typo-desc-lh: 1.7;
  --typo-desc-ls: 0;

  /* 6. Label / Eyebrow Text */
  --typo-label-font: var(--font-sans);
  --typo-label-size: 14.4px;
  --typo-label-weight: 800;
  --typo-label-lh: 1.2;
  --typo-label-ls: 0.08em;

  /* 7. Meta Text */
  --typo-meta-font: var(--font-sans);
  --typo-meta-size: 13.12px;
  --typo-meta-weight: var(--font-bold);
  --typo-meta-lh: 1.35;
  --typo-meta-ls: 0;

  /* 8. Button Text */
  --typo-btn-font: var(--font-sans);
  --typo-btn-size: 16px;
  --typo-btn-size-mo: 15px;
  --typo-btn-weight: var(--font-bold);
  --typo-btn-lh: 1.2;
  --typo-btn-ls: 0;

  /* --- Typography Colors --- */
  /* On-Light Context (밝은 배경) */
  --typo-color-on-light-primary: var(--color-ink); /* #181818 - 주 텍스트 */
  --typo-color-on-light-secondary: var(--color-muted); /* #373838 - 보조 텍스트 */
  --typo-color-on-light-muted: var(--color-soft); /* #a8b3b5 - 뮤트/메타 */
  --typo-color-on-light-accent: var(--color-primary); /* #00cce0 - 강조/링크/브랜드 */

  /* On-Dark Context (어두운 배경) */
  --typo-color-on-dark-primary: #ffffff;
  --typo-color-on-dark-secondary: rgba(255, 255, 255, 0.75);
  --typo-color-on-dark-muted: rgba(255, 255, 255, 0.5);
  --typo-color-on-dark-accent: #00cce0;

  /* On-Image Context (이미지 배경) */
  --typo-color-on-image-primary: #ffffff;
  --typo-color-on-image-secondary: rgba(255, 255, 255, 0.88);
  --typo-color-on-image-muted: rgba(255, 255, 255, 0.6);
  --typo-color-on-image-accent: #00cce0;
}