/*
 * F-B1 스마트티켓 회전 QR — 자체 스타일(kx 토큰만, 하드코딩 0). 공유 css 무수정.
 * Nifty 정합: 카드 서브틀 그림자·중립 팔레트·라운드 토큰.
 */
.kx-smtk {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.kx-smtk__qrwrap {
  width: 180px;
  height: 180px;
  padding: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
}

.kx-smtk__qr {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.kx-smtk__meta {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  width: 100%;
  max-width: 200px;
}

.kx-smtk__code {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  color: var(--color-primary-700);
}

.kx-smtk__count {
  width: 100%;
  height: 6px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.kx-smtk__count-bar {
  display: block;
  height: 100%;
  background: var(--color-primary-600);
  border-radius: var(--radius-pill);
  transition: width 1s linear;
}

.kx-smtk__hint {
  font-size: var(--fs-nano);
  color: var(--color-text-muted);
  text-align: center;
}

.kx-smtk__loading,
.kx-smtk__err {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-4);
}

.kx-smtk__err {
  color: var(--color-error);
}
