/* =========================================================
 * 기본 커스텀 스타일 (VeeDeeO 사이트 전역)
 * 목표: (1) Netlify 대역폭 절약, (2) 검색엔진/접근성 친화,
 *       (3) 재수정 불필요하도록 확장성 확보
 * =======================================================*/

/* 🌐 전역 CSS 변수 — 브랜드 색상 및 시스템 폰트 정의
   → 재배포 시에도 동일 결과, Tailwind 등 프레임워크와 충돌 없음 */
:root {
  /* 브랜드 색상 팔레트 */
  --brand: #4f46e5;         /* 기본 포인트 컬러 (인디고) */
  --brand-light: #6366f1;   /* hover, 강조용 */
  --brand-dark: #3730a3;    /* 포커스, 액센트용 */

  /* 색상 시스템 — 밝기 대비로 접근성(AA) 확보 */
  --text-color: #111827;
  --text-muted: #4b5563;
  --bg-color: #ffffff;
  --bg-alt: #f9fafb;
  --border-color: #e5e7eb;

  /* 시스템 폰트 — SEO / 접근성 우선 (웹폰트 트래픽 차단) */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;

  /* 전환 효과 — 사용자 ‘감소된 모션’ 선호 시 자동 차단 */
  --transition-speed: 0.25s;
}

/* 🌗 다크 모드 (선호도 기반) — SEO 영향 없음, 시각적 접근성 강화 */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #f3f4f6;
    --text-muted: #9ca3af;
    --bg-color: #111827;
    --bg-alt: #1f2937;
    --border-color: #374151;
  }
}

/* ⚙️ 기본 구조 — 모션 감소 설정 시 전환 즉시 비활성화 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ✨ 전역 스타일 — SEO/UX 친화 설정 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-system);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 링크 기본값 (접근성 + SEO 내부링크 강조) */
a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}
a:hover, a:focus {
  color: var(--brand-light);
  text-decoration: underline;
}

/* 이미지 — lazyload 기반 최적화 보조 */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: none;
}

/* 버튼 및 강조 영역 */
button, .btn {
  background-color: var(--brand);
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
}
button:hover, .btn:hover {
  background-color: var(--brand-dark);
}

/* 섹션 마진 — 정적 사이트 캐시 시 레이아웃 안정 */
section {
  margin-block: 3rem;
  padding-block: 1rem;
}

/* 제목 계층 — SEO 크롤러가 명확히 인식하도록 여백 일정 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  margin-block: 1.25rem 0.75rem;
}
p {
  margin-block: 0.5rem 1rem;
  color: var(--text-muted);
}

/* ✅ 접근성 보조요소 (화면 낭독용) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}