/**
 * ADONG HOMEPAGE - BASE STYLES
 * 황금비율 기반 디자인 시스템 (Golden Ratio: 1.618)
 * Typography, Spacing, Layout Foundations
 *
 * VW/VH 비율 스케일링 시스템 (기준: 1440x1080)
 * 1vw = 14.4px at 1440px viewport
 * 1vh = 10.8px at 1080px viewport
 */

/* ==========================================
 * VW/VH PROPORTIONAL SCALING SYSTEM
 * 기준 해상도: 1440x1080 (4:3 비율)
 * ========================================== */

:root {
  /* === 타이포그래피 (vw 기반) === */
  /* 1440px 기준 변환: px / 14.4 = vw */
  --vw-title-hero: 4.167vw;      /* 60px at 1440 */
  --vw-title-section: 3.333vw;   /* 48px at 1440 */
  --vw-title-card: 1.528vw;      /* 22px at 1440 */
  --vw-text-large: 1.389vw;      /* 20px at 1440 */
  --vw-text-body: 1.111vw;       /* 16px at 1440 */
  --vw-text-small: 0.972vw;      /* 14px at 1440 */
  --vw-text-xs: 0.833vw;         /* 12px at 1440 */

  /* === 간격/패딩 (vw 기반) === */
  --vw-space-xs: 0.556vw;        /* 8px at 1440 */
  --vw-space-sm: 0.903vw;        /* 13px at 1440 */
  --vw-space-md: 1.458vw;        /* 21px at 1440 */
  --vw-space-lg: 2.361vw;        /* 34px at 1440 */
  --vw-space-xl: 3.819vw;        /* 55px at 1440 */
  --vw-space-2xl: 6.181vw;       /* 89px at 1440 */

  /* === 컴포넌트 크기 (vw 기반) === */
  --vw-card-padding: 2.083vw;    /* 30px at 1440 */
  --vw-button-padding-x: 1.667vw; /* 24px at 1440 */
  --vw-button-padding-y: 0.972vw; /* 14px at 1440 */
  --vw-container-padding: 1.458vw; /* 21px at 1440 */
  --vw-gap-cards: 2.083vw;       /* 30px at 1440 */

  /* === 보더 반경 (vw 기반) === */
  --vw-radius-sm: 0.417vw;       /* 6px at 1440 */
  --vw-radius-md: 0.625vw;       /* 9px at 1440 */
  --vw-radius-lg: 1.111vw;       /* 16px at 1440 */
  --vw-radius-xl: 1.736vw;       /* 25px at 1440 */

  /* === 높이 (vh 기반) === */
  /* 1080px 기준 변환: px / 10.8 = vh */
  --vh-header: 5.556vh;          /* 60px at 1080 */
  --vh-section-padding: 7.407vh; /* 80px at 1080 */
  --vh-card-min: 25.926vh;       /* 280px at 1080 */

  /* === 비디오/이미지 비율 유지 === */
  --vw-video-width: 55.556vw;    /* 800px at 1440 */
  --vw-video-max: 69.444vw;      /* 1000px at 1440 */
  --vw-character-size: 20.833vw; /* 300px at 1440 */
}

/* ==========================================
 * RESET & NORMALIZATION
 * ========================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 스크롤바 완전 차단 */
::-webkit-scrollbar {
  display: none;
}

* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html {
  font-size: 16px; /* Base font size */
  line-height: 1.618; /* Golden ratio line height */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

body {
  font-family: 'Pretendard GOV', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  color: var(--color-text-primary);
  background-color: var(--color-surface-primary);
  line-height: 1.618;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  height: 100vh;
  max-height: 100vh;
}

/* ==========================================
 * GOLDEN RATIO SPACING SYSTEM
 * Base: 8px → 13px → 21px → 34px → 55px → 89px
 * ========================================== */

:root {
  /* Base spacing unit */
  --spacing-unit: 0.5rem;

  /* Golden ratio progression */
  --spacing-2xs: 0.25rem;    /* 0.5 × base */
  --spacing-xs: 0.5rem;     /* 1 × base */
  --spacing-sm: 0.8125rem;    /* 1.618 × base */
  --spacing-md: 1.3125rem;    /* 2.618 × base */
  --spacing-lg: 2.125rem;    /* 4.236 × base */
  --spacing-xl: 3.4375rem;    /* 6.854 × base */
  --spacing-2xl: 5.5625rem;   /* 11.09 × base */
  --spacing-3xl: 9rem;  /* 18 × base */

  /* Semantic spacing names */
  --space-micro: var(--spacing-2xs);
  --space-tiny: var(--spacing-xs);
  --space-small: var(--spacing-sm);
  --space-medium: var(--spacing-md);
  --space-large: var(--spacing-lg);
  --space-huge: var(--spacing-xl);
  --space-massive: var(--spacing-2xl);
  --space-giant: var(--spacing-3xl);

  /* Component-specific spacing */
  --space-section: var(--spacing-2xl);        /* 89px - Section간 여백 */
  --space-section-sm: var(--spacing-xl);      /* 55px - 모바일 Section 여백 */
  --space-container: var(--spacing-lg);       /* 34px - Container 내부 패딩 */
  --space-container-sm: var(--spacing-md);    /* 21px - 모바일 Container 패딩 */
  --space-card: var(--spacing-lg);            /* 34px - Card 내부 패딩 */
  --space-card-sm: var(--spacing-md);         /* 21px - 모바일 Card 패딩 */
  --space-element: var(--spacing-md);         /* 21px - 요소간 기본 간격 */
  --space-element-sm: var(--spacing-sm);      /* 13px - 작은 요소간 간격 */
}

/* ==========================================
 * TYPOGRAPHY SYSTEM (Golden Ratio Based)
 * ========================================== */

:root {
  /* Font size scale (Golden ratio progression) */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px - Base */
  --font-size-md: 1.125rem;     /* 18px - 16 × 1.125 */
  --font-size-lg: 1.25rem;      /* 20px - 16 × 1.25 */
  --font-size-xl: 1.618rem;     /* 25.9px - 16 × 1.618 */
  --font-size-2xl: 2.618rem;    /* 41.9px - 16 × 2.618 */
  --font-size-3xl: 4.236rem;    /* 67.8px - 16 × 4.236 */
  --font-size-4xl: 6.854rem;    /* 109.7px - 16 × 6.854 */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line heights (Golden ratio based) */
  --line-height-tight: 1.25;
  --line-height-normal: 1.618;   /* Golden ratio */
  --line-height-relaxed: 2.0;

  /* Letter spacing */
  --letter-spacing-tight: -0.4px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.4px;
}

/* ==========================================
 * GOLDEN RATIO LAYOUT DIMENSIONS
 * ========================================== */

:root {
  /* Container widths */
  --container-xs: 30rem;
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 80rem;
  --container-2xl: 96rem;

  /* Golden ratio based dimensions */
  --width-golden-sm: 20rem;      /* Small golden rectangle */
  --height-golden-sm: 12.375rem;     /* 320 ÷ 1.618 */

  --width-golden-md: 32.375rem;      /* Medium golden rectangle */
  --height-golden-md: 20rem;     /* 518 ÷ 1.618 */

  --width-golden-lg: 52.375rem;      /* Large golden rectangle */
  --height-golden-lg: 32.375rem;     /* 838 ÷ 1.618 */

  /* Border radius system */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5625rem;              /* Button radius as specified */
  --radius-lg: 0.8125rem;
  --radius-xl: 1.3125rem;
  --radius-2xl: 1.5625rem;            /* Container radius as specified */
  --radius-3xl: 2.125rem;
  --radius-full: 9999px;

  /* Component specific radii */
  --radius-button: var(--radius-md);      /* 9px */
  --radius-container: var(--radius-2xl);  /* 25px */
  --radius-card: var(--radius-2xl);       /* 25px */
  --radius-input: var(--radius-md);       /* 9px */
  --radius-modal: var(--radius-2xl);      /* 25px */
}

/* ==========================================
 * TYPOGRAPHY STYLES
 * ========================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Pretendard GOV', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-small);
}

h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-medium);
}

h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-medium);
}

h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-small);
}

h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-small);
}

h5 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-small);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-small);
}

p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-small);
}

.text-large {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
}

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

.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

/* ==========================================
 * LAYOUT UTILITIES
 * ========================================== */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-left: var(--space-container-sm);
  padding-right: var(--space-container-sm);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-container);
    padding-right: var(--space-container);
  }
}

.section {
  padding-top: var(--space-section-sm);
  padding-bottom: var(--space-section-sm);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
  }
}

/* ==========================================
 * ACCESSIBILITY
 * ========================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-tiny) var(--space-small);
  border-radius: var(--radius-button);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  z-index: var(--z-tooltip);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 6px;
}

/* ==========================================
 * FOCUS STYLES
 * ========================================== */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove default focus styles for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================
 * SELECTION STYLES
 * ========================================== */

::selection {
  background-color: var(--color-primary-light);
  color: var(--color-primary-darker);
}

::-moz-selection {
  background-color: var(--color-primary-light);
  color: var(--color-primary-darker);
}

/* ==========================================
 * TRANSITIONS
 * ========================================== */

:root {
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==========================================
 * SPACING UTILITIES
 * ========================================== */

/* Margin utilities */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }

/* Margin directional utilities */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }

/* Padding directional utilities */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pt-sm { padding-top: var(--spacing-sm) !important; }
.pt-md { padding-top: var(--spacing-md) !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-md { padding-bottom: var(--spacing-md) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }