/* 헤더 앱 버전 배지 (2026-08-09 신설)
 *
 * 평상시   : V1.90.5        — 조용한 회색. 정보일 뿐 행동을 요구하지 않는다.
 * 불일치 시 : 신규버전출시 ⟳  — 클릭 가능 상태. 눈에는 띄되 **소란스럽지 않게**.
 *
 * ⚠톤을 일부러 낮춘 이유 = 개발 중이라 배포가 잦다(8/7 하루 7~8회). 강한 빨강이나 깜빡임을 쓰면
 *   하루 종일 경고가 떠 있는 꼴이 되어 금세 무시하게 된다. 알림 피로를 만들면 정작 중요한 순간에 안 보인다.
 *
 * ⚠PC 전용 — #header-user-name 과 동일하게 1040px 이하에서 숨긴다(레이아웃의 기존 규칙과 짝).
 *   모바일/앱은 헤더 폭이 좁아 프로필명조차 숨기는 상황이라 배지를 넣을 자리가 없다.
 */

.ordars-app-version {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #94a3b8;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* 신규 버전 — 앰버 계열(경고가 아니라 '알림'). 클릭 가능함을 커서로도 알린다. */
.ordars-app-version.is-stale {
  color: #b45309;
  background: #fffbeb;
  border-color: #fcd34d;
  cursor: pointer;
}

.ordars-app-version.is-stale:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}

.ordars-app-version.is-stale:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

.ordars-app-version .ord-appver-icon {
  flex-shrink: 0;
}

/* 새 버전이 있는 동안 아이콘만 아주 느리게 1회전 — 시선은 끌되 반복 애니메이션의 피로는 피한다.
   ⚠prefers-reduced-motion 존중. */
@media (prefers-reduced-motion: no-preference) {
  .ordars-app-version.is-stale .ord-appver-icon {
    animation: ord-appver-spin 2.4s ease-in-out 3;
  }
}

@keyframes ord-appver-spin {
  0%   { transform: rotate(0deg); }
  70%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

/* 다크 모드 — 개발자 전용이지만(8/1 봉인) 톤은 맞춰 둔다. */
html.dark .ordars-app-version {
  color: #64748b;
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.22);
}

html.dark .ordars-app-version.is-stale {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.4);
}

html.dark .ordars-app-version.is-stale:hover {
  background: rgba(245, 158, 11, 0.22);
}

/* PC 전용 — 프로필명과 동일 기준으로 숨김 */
@media (max-width: 1040px) {
  .ordars-app-version { display: none !important; }
}