/*
 * Glass Morphism 효과
 * 
 * 반투명 배경과 블러 효과를 사용한 모던 UI 스타일
 * Fallback: backdrop-filter 미지원 브라우저를 위한 대체 스타일 포함
 */

/* ========================================
   Glass Card (기본)
   ======================================== */
.glass-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(229, 231, 235, 0.8);
  border-radius: var(--radius-lg, 1rem);
  box-shadow: 0 4px 20px -4px rgba(27, 46, 80, 0.08), 0 2px 8px -2px rgba(27, 46, 80, 0.04);
  transition: all var(--transition-base, 300ms cubic-bezier(0.4, 0, 0.2, 1));
  
  /* Glass Effect */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Fallback: backdrop-filter 미지원 시 */
@supports not (backdrop-filter: blur(8px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.98);
  }
}

/* Hover State */
.glass-card:hover {
  border-color: rgba(0, 163, 196, 0.4);
  background: rgba(255, 255, 255, 1);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px -6px rgba(27, 46, 80, 0.12), 0 4px 16px -4px rgba(27, 46, 80, 0.06);
}

/* Focus State (키보드 접근성) */
.glass-card:focus-visible {
  border-color: var(--color-accent-cyan, #00a3c4);
  outline: 2px solid var(--color-accent-cyan, #00a3c4);
  outline-offset: 2px;
}


/* ========================================
   Glass Card Variants
   ======================================== */

/* 가벼운 Glass (더 투명) */
.glass-card-light {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

@supports not (backdrop-filter: blur(8px)) {
  .glass-card-light {
    background: rgba(255, 255, 255, 0.85);
  }
}

/* 무거운 Glass (더 불투명) */
.glass-card-heavy {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
}

@supports not (backdrop-filter: blur(16px)) {
  .glass-card-heavy {
    background: rgba(255, 255, 255, 0.98);
  }
}


/* ========================================
   Interactive Statement (활성화 효과)
   ======================================== */
.interactive-statement {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(27, 46, 80, 0.1);
  border-radius: var(--radius-lg, 1rem);
  padding: var(--spacing-md, 1.5rem);
  transition: all var(--transition-slow, 500ms ease);
  cursor: pointer;
}

@supports not (backdrop-filter: blur(8px)) {
  .interactive-statement {
    background: rgba(255, 255, 255, 0.85);
  }
}

.interactive-statement.active {
  border-color: var(--color-accent-cyan, #00a3c4);
  background: var(--color-white, #ffffff);
  box-shadow: 0 0 30px rgba(0, 163, 196, 0.1);
  transform: scale(1.02);
}


/* ========================================
   Header Glass
   ======================================== */
.header-glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(203, 213, 225, 0.3);
}

@supports not (backdrop-filter: blur(12px)) {
  .header-glass {
    background: rgba(255, 255, 255, 0.95);
  }
}


/* ========================================
   반응형 조정
   ======================================== */
@media (max-width: 768px) {
  .glass-card:hover {
    /* 모바일에서는 hover 대신 tap에만 반응 */
    transform: none;
  }
  
  .glass-card:active {
    transform: scale(0.98);
  }
}


/* ========================================
   다크 모드 대응 (향후 확장)
   ======================================== */
/* 현재는 라이트 모드만 지원 */
@media (prefers-color-scheme: dark) {
  .glass-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(229, 231, 235, 0.8);
  }
  
  @supports not (backdrop-filter: blur(8px)) {
    .glass-card {
      background: rgba(255, 255, 255, 0.98);
    }
  }
}


/* ========================================
   애니메이션 감소 설정
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .interactive-statement {
    transition: none;
  }
  
  .glass-card:hover,
  .interactive-statement.active {
    transform: none;
  }
}