/*
 * 100배 주식 - Custom Styles
 * Pretendard + Inter 폰트, 카드 스타일, 애니메이션
 */

/* 기본 폰트 설정 */
body {
  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 숫자 정렬 (금융앱 필수) */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* 가격, 점수 등 숫자 */
.price, .score-value {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* 카드 스타일 - 그라데이션 배경 + 그림자 */
.stock-card {
  background: linear-gradient(145deg, #374151 0%, #1f2937 100%);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease-in-out;
}

.stock-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

/* A등급 카드 (점수 80+) */
.stock-card-grade-a {
  background: linear-gradient(145deg, #374151 0%, #1f2937 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  position: relative;
}

.stock-card-grade-a:hover {
  border-color: rgba(251, 191, 36, 0.5);
}

/* B등급 카드 (점수 60-79) */
.stock-card-grade-b {
  background: linear-gradient(145deg, #374151 0%, #1f2937 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* C등급 카드 (점수 60 미만) */
.stock-card-grade-c {
  background: linear-gradient(145deg, #2d3748 0%, #1a202c 100%);
  opacity: 0.85;
}

/* 점수 프로그레스 링 */
.score-ring {
  transform: rotate(-90deg);
}

.score-ring-bg {
  fill: none;
  stroke: #374151;
  stroke-width: 4;
}

.score-ring-progress {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease-in-out;
}

.score-ring-progress-high {
  stroke: #10b981;
}

.score-ring-progress-medium {
  stroke: #f59e0b;
}

.score-ring-progress-low {
  stroke: #6b7280;
}

/* Sparkline 스타일 */
.sparkline {
  display: block;
}

.sparkline polyline {
  vector-effect: non-scaling-stroke;
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1f2937;
}

::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* 선택 색상 */
::selection {
  background: rgba(16, 185, 129, 0.3);
  color: #fff;
}