/* ============================================
   LOCATEWISE - 마이페이지
   ============================================ */

/* 페이지 진입 */
.page-container {
  animation: pageEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Stat Card 강화 */
.stat-card {
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.stat-card:hover::before {
  opacity: 1;
}

/* 색상 코딩 */
.stat-card:nth-child(1) {
  border-top-color: var(--color-primary-500);
}

.stat-card:nth-child(1) .stat-value {
  color: var(--color-primary-500);
}

.stat-card:nth-child(1)::before {
  background: linear-gradient(180deg, rgba(10, 158, 135, 0.04) 0%, transparent 60%);
}

.stat-card:nth-child(2) {
  border-top-color: var(--color-info);
}

.stat-card:nth-child(2) .stat-value {
  color: var(--color-info);
}

.stat-card:nth-child(2)::before {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
}

.stat-card:nth-child(3) {
  border-top-color: var(--color-warning);
}

.stat-card:nth-child(3) .stat-value {
  color: var(--color-warning);
}

.stat-card:nth-child(3)::before {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.04) 0%, transparent 60%);
}

/* Stat 값 카운트업 느낌 */
.stat-value {
  transition: transform 0.3s ease;
}

.stat-card:hover .stat-value {
  transform: scale(1.08);
}

/* 스태거 진입 */
.mypage-stats .stat-card {
  animation: cardPopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mypage-stats .stat-card:nth-child(1) { animation-delay: 0.1s; }
.mypage-stats .stat-card:nth-child(2) { animation-delay: 0.2s; }
.mypage-stats .stat-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes cardPopIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 섹션 타이틀 진입 */
.section-title {
  animation: slideInLeft 0.5s ease both;
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 반응형 */
@media (max-width: 768px) {
  .mypage-stats {
    grid-template-columns: 1fr 1fr;
  }

  .data-table {
    display: block;
    overflow-x: auto;
  }

  .modal {
    width: 95%;
    max-height: 90vh;
  }
}

@media (max-width: 480px) {
  .mypage-stats {
    grid-template-columns: 1fr;
  }

  .credit-package-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-container,
  .mypage-stats .stat-card,
  .section-title {
    animation: none;
  }

  .stat-card:hover {
    transform: none;
  }
}