/* ============================================================
   시안(ver_31 / ver_32 / ver_33) 전환 버튼 — 검토용 도구
   ------------------------------------------------------------
   헤더의 다크/라이트 토글 왼쪽에 놓인다.
   버튼 색은 각 시안의 대표색이라 색만 보고 어느 안인지 알 수 있다.
   현재 보고 있는 안은 링으로 표시한다.

   세 폴더에 같은 내용으로 들어간다. 시안 검토용이므로
   방향이 확정되면 이 파일과 링크를 함께 지우면 된다.
   ============================================================ */

.ver-switch {
  display: flex;
  gap: 5px;
  margin-right: 3px;
}
.ver-switch a {
  position: relative;   /* 현재 표시용 점의 기준 */
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 4px;   /* .ais-open-btn과 같은 값 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans KR', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-decoration: none;
  /* 현재 안은 링으로 구분되므로, 나머지도 색이 또렷하게 읽힐 만큼만 낮춘다 */
  opacity: 0.72;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.ver-switch a:hover {
  opacity: 1;
  transform: translateY(-1px);
}
/* 현재 보고 있는 시안: 링은 버튼을 두껍게 만들어 헤더 리듬을 흐트러뜨린다.
   대신 버튼 위에 점 하나만 찍는다 — 자리를 차지하지 않는다. */
.ver-switch a[aria-current="page"] { opacity: 1; }
.ver-switch a[aria-current="page"]::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg);
}
.ver-switch a:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

/* 각 시안의 대표색 */
.ver-switch .vs-1 { background: #2563eb; }  /* A · 현행 */
.ver-switch .vs-2 { background: #0e7490; }  /* B · 청사진 */
.ver-switch .vs-3 { background: #a1543a; }  /* C · 견본집 */

@media (prefers-reduced-motion: reduce) {
  .ver-switch a { transition: none; }
  .ver-switch a:hover { transform: none; }
}