/**
 * =====================================================
 * 2026 VIVEN 레벨디자인 해커톤 - 기본 스타일
 * =====================================================
 * 리셋 + 기본 요소 스타일링
 */

/* =====================================================
 * CSS Reset (Modern)
 * ===================================================== */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  background: var(--gradient-bg); /* 셰이더 뒤 기본 배경 */
  overflow: hidden; /* 슬라이드 모드에서 스크롤 방지 */
}

/* 전체화면 모드 */
html, body {
  width: 100%;
  height: 100%;
}

/* =====================================================
 * 타이포그래피
 * ===================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-title); }
h3 { font-size: var(--fs-subtitle); }
h4 { font-size: var(--fs-heading); }
h5 { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-caption); font-weight: var(--fw-semibold); }

p {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

small {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

strong, b {
  font-weight: var(--fw-bold);
}

em, i {
  font-style: italic;
}

/* =====================================================
 * 링크
 * ===================================================== */

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--accent-secondary);
}

/* =====================================================
 * 리스트
 * ===================================================== */

ul, ol {
  list-style: none;
}

/* =====================================================
 * 미디어
 * ===================================================== */

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =====================================================
 * 유틸리티 클래스
 * ===================================================== */

/* ----- 텍스트 컬러 ----- */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-primary); }
.text-purple { color: var(--accent-purple); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }

/* ----- 텍스트 정렬 ----- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ----- 폰트 굵기 ----- */
.fw-black { font-weight: var(--fw-black); }
.fw-bold { font-weight: var(--fw-bold); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-regular { font-weight: var(--fw-regular); }
.fw-light { font-weight: var(--fw-light); }

/* ----- 폰트 사이즈 ----- */
.fs-hero { font-size: var(--fs-hero); }
.fs-title { font-size: var(--fs-title); }
.fs-subtitle { font-size: var(--fs-subtitle); }
.fs-heading { font-size: var(--fs-heading); }
.fs-body { font-size: var(--fs-body); }
.fs-caption { font-size: var(--fs-caption); }

/* =====================================================
 * 특수 텍스트 효과
 * ===================================================== */

/* 그라데이션 텍스트 (절제된 시안) */
.gradient-text {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 강한 그라데이션 (필요할 때만) */
.gradient-text--strong {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 골드 그라데이션 텍스트 */
.gold-text {
  background: var(--gradient-gold);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 골드 텍스트 + 빛나는 애니메이션 */
.gold-text--animated {
  animation: goldShine 3s ease-in-out infinite;
}

@keyframes goldShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 글로우 효과 (절제된 버전) */
.glow-cyan { text-shadow: 0 0 20px rgba(91, 202, 237, 0.3); }
.glow-purple { text-shadow: 0 0 20px rgba(123, 107, 158, 0.3); }
.glow-gold { text-shadow: 0 0 20px rgba(212, 175, 55, 0.3); }

/* 강한 글로우 (필요할 때만) */
.glow-cyan--strong { text-shadow: var(--glow-cyan); }
.glow-purple--strong { text-shadow: var(--glow-purple); }
.glow-gold--strong { text-shadow: var(--glow-gold); }

/* =====================================================
 * 배경 유틸리티
 * ===================================================== */

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-card { background-color: var(--bg-card); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-gradient { background: var(--gradient-bg); }

/* =====================================================
 * 표시/숨김
 * ===================================================== */

.hidden { display: none !important; }
.invisible { visibility: hidden; }
.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;
}

/* =====================================================
 * 애니메이션 유틸리티
 * ===================================================== */

/* 페이드 인 */
.fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-out) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 슬라이드 업 */
.slide-up {
  animation: slideUp var(--duration-normal) var(--ease-out) forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 스케일 인 */
.scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-bounce) forwards;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 펄스 */
.pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* 플로팅 */
.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* =====================================================
 * 선택 방지 (슬라이드 모드)
 * ===================================================== */

.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* =====================================================
 * 커서
 * ===================================================== */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }