/**
 * 진행률 섹션 스타일
 *
 * Phase 기반 진행률 바, 원형 진행률, 통계 카드 등
 */

/* ========================================
   진행률 섹션
   ======================================== */

.progress-section {
  animation: fade-in var(--duration-slow) var(--easing-ease-out);
}

.progress-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

/* ========================================
   원형 진행률 바 (Progress Circle)
   ======================================== */

.progress-circle {
  position: relative;
  width: 180px;
  height: 180px;
  margin: var(--spacing-xl) auto;
}

.progress-circle__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 2px 4px hsl(0 0% 0% / 0.1));
}

.progress-circle__bg {
  fill: none;
  stroke: hsl(var(--muted));
  stroke-width: 8;
}

.progress-circle__fill {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.292; /* 2 * PI * r (r=54) */
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset var(--duration-slow) var(--easing-ease-in-out),
              stroke var(--duration-base) var(--easing-ease-in-out);
}

/* Phase별 색상 변경 */
.progress-circle[data-phase="1"] .progress-circle__fill {
  stroke: hsl(var(--color-phase1));
}

.progress-circle[data-phase="2"] .progress-circle__fill {
  stroke: hsl(var(--color-phase2));
}

.progress-circle[data-phase="3"] .progress-circle__fill {
  stroke: hsl(var(--color-phase3));
}

.progress-circle__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-circle__percent {
  margin: 0;
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  color: hsl(var(--foreground));
  line-height: 1;
}

.progress-circle__label {
  margin: var(--spacing-xs) 0 0 0;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

/* ========================================
   수평 진행률 바 (Progress Bar)
   ======================================== */

.progress-bar {
  width: 100%;
  height: 24px;
  background-color: hsl(var(--muted));
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
  transition: width var(--duration-base) var(--easing-ease-in-out);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

/* Phase별 색상 */
.progress-bar[data-phase="1"] .progress-bar__fill {
  background: linear-gradient(90deg,
    hsl(var(--color-phase1)),
    hsl(var(--color-phase1) / 0.8)
  );
}

.progress-bar[data-phase="2"] .progress-bar__fill {
  background: linear-gradient(90deg,
    hsl(var(--color-phase2)),
    hsl(var(--color-phase2) / 0.8)
  );
}

.progress-bar[data-phase="3"] .progress-bar__fill {
  background: linear-gradient(90deg,
    hsl(var(--color-phase3)),
    hsl(var(--color-phase3) / 0.8)
  );
}

/* Shimmer 애니메이션 */
.progress-bar__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ========================================
   통계 카드 (Stat Card)
   ======================================== */

.progress-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: hsl(var(--muted) / 0.3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  text-align: center;
  transition: all var(--duration-base) var(--easing-ease-in-out);
}

.stat-card:hover {
  background-color: hsl(var(--muted) / 0.5);
  box-shadow: var(--shadow-sm);
}

.stat-card__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.stat-card__value,
.stat-value {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: hsl(var(--primary));
}

/* 상태별 색상 */
.stat-value.success {
  color: hsl(var(--color-success));
}

.stat-value.error {
  color: hsl(var(--color-error));
}

.stat-value.warning {
  color: hsl(var(--color-warning));
}

.stat-card__label,
.stat-label {
  margin: 0;
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
   현재 파일 표시 (Current File)
   ======================================== */

.current-file {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: hsl(var(--muted) / 0.3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  margin-top: var(--spacing-lg);
  animation: fade-in var(--duration-base) var(--easing-ease-in-out);
}

.current-file__icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
}

.current-file__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.current-file__label {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.5px;
}

.current-file__name {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: hsl(var(--foreground));
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   취소 버튼
   ======================================== */

.cancel-section {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-lg);
  gap: var(--spacing-md);
}

/* ========================================
   진행률 정보
   ======================================== */

.progress-info {
  display: flex;
  justify-content: space-around;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid hsl(var(--border));
  flex-wrap: wrap;
}

.progress-info__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-sm);
}

.progress-info__label {
  color: hsl(var(--muted-foreground));
  font-weight: var(--font-weight-medium);
}

.progress-info__value {
  color: hsl(var(--primary));
  font-weight: var(--font-weight-bold);
}

/* ========================================
   반응형 디자인
   ======================================== */

@media (max-width: 768px) {
  .progress-circle {
    width: 140px;
    height: 140px;
  }

  .progress-circle__percent {
    font-size: 2rem;
  }

  .progress-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .stat-card {
    padding: var(--spacing-sm);
  }

  .stat-card__value {
    font-size: var(--text-base);
  }

  .progress-info {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .progress-bar {
    height: 20px;
  }
}

@media (max-width: 480px) {
  .progress-circle {
    width: 120px;
    height: 120px;
  }

  .progress-circle__percent {
    font-size: 1.5rem;
  }

  .progress-circle__label {
    font-size: var(--text-xs);
  }

  .progress-stats {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   간소화된 진행률 헤더
   ======================================== */

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.progress-count {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: hsl(var(--foreground));
}

/* ========================================
   ZIP 정보
   ======================================== */

.zip-info {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: hsl(var(--muted) / 0.5);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.zip-info span {
  font-weight: var(--font-weight-semibold);
}