/* /volume1/hwi/css/glitter.bz.css */

.scan-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge {
  min-width: 110px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
}

.badge-idle { background: #f9fafb; color: #6b7280; }
.badge-run  { background: #eef2ff; color: #3730a3; }
.badge-ok   { background: #ecfdf5; color: #065f46; }
.badge-warn { background: #fff7ed; color: #9a3412; }
.badge-err  { background: #fef2f2; color: #991b1b; }

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  margin-right: 6px;
  animation: spin 0.7s linear infinite;
}


/* 기존 버튼 공통 */
#scanBtn {
  transition: background-color 0.2s ease;
}

/* 실행 중 상태 */
#scanBtn.running {
  background-color: #405862; /* 더 진한 남색/슬레이트톤 */
}

/* 진행 배지 + 버튼 실행 상태 */
.scan-cta{display:flex;align-items:center;gap:10px}
.badge{min-width:110px;height:28px;padding:0 10px;border-radius:999px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e5e7eb}
.badge-idle{background:#f9fafb;color:#6b7280}
.badge-run{background:#eef2ff;color:#3730a3}
.badge-ok{background:#ecfdf5;color:#065f46}
.badge-warn{background:#fff7ed;color:#9a3412}
.badge-err{background:#fef2f2;color:#991b1b}
.spinner{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:6px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 버튼 색 강화(실행 중) */
#scanBtn{transition:background-color .2s ease}
#scanBtn.running{background-color:#405862}

.badge-container {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  width: 220px; /* badge 영역 너비 */
  position: relative;
}

.scroll-text {
  display: inline-block;
  padding-left: 100%; /* 시작 위치를 오른쪽 바깥으로 밀기 */
  animation: scroll-left 8s linear infinite;
  font-weight: bold; /* 볼드체 적용 */  
}

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