/**
 * progress.css
 *
 * [show/hide 일관성 수정 - 기존 버그 해결]
 *
 * 버그 원인:
 *   .progress-container { display: none }  ← 기본값이 none
 *   JS _show() 는 .hidden 클래스만 제거
 *   → .hidden 제거 후에도 기본값 display:none 이 남아 화면에 안 보임
 *
 * 해결:
 *   .progress-container 기본값을 display:block 으로 변경
 *   숨김은 layout.css의 .hidden { display:none !important } 으로만 제어
 */

.progress-container {
  display: block;   /* ★ none → block */
  width: 100%;
  animation: section-reveal 0.6s var(--ease-out);
}

/* 하위 호환성 */
.progress-container.progress--visible {
  display: block;
}

/* 프로그레스 바 */
.progress-bar {
  width: 100%;
  height: var(--progress-height);
  background: var(--progress-bg);
  border-radius: var(--progress-border-radius);
  overflow: hidden;
  position: relative;
}

.progress-bar-fill,
.progress-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--progress-fill-bg);
  border-radius: var(--progress-border-radius);
  transition: var(--progress-transition);
  position: relative;
}

.progress--ai-analyzing .progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progress-shimmer 1.5s ease-in-out infinite;
}

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

.progress--gradient .progress-bar-fill { background: var(--gradient-primary); }
.progress--success  .progress-bar-fill { background: var(--gradient-success); }
.progress--danger   .progress-bar-fill { background: var(--gradient-danger); }

/* 스피너 */
.spinner {
  position: relative;
  display: inline-block;
}

.spinner--minimal {
  width: 40px; height: 40px;
  border: 2px solid var(--color-border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinner-rotate 1s linear infinite;
}

.spinner--large { width: 56px; height: 56px; border-width: 2px; }
.spinner--small { width: 20px; height: 20px; border-width: 1.5px; }

@keyframes spinner-rotate { to { transform: rotate(360deg); } }

.progress__percentage {
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .spinner--large { width: 40px; height: 40px; }
}

@media print {
  .progress-container, .spinner { display: none !important; }
}