/* ==================================================
   Variant Switcher — 시안 1/2/3 전환 UI
   (모든 시안에서 공통으로 로드됨)
   ================================================== */

.variant-switch {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 5px 4px 4px;
  background: rgba(10, 14, 31, 0.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55);
  user-select: none;
}

.variant-switch .vs-label {
  padding: 4px 10px 4px 10px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 800;
}

.variant-switch .vs-btn {
  min-width: 34px;
  padding: 6px 10px;
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  font: inherit;
  text-align: center;
  transition: color .15s ease, background .15s ease;
}

.variant-switch .vs-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.variant-switch .vs-btn.active {
  background: #ffffff;
  color: #0a0e1f;
}

.variant-switch .vs-hint {
  padding: 4px 10px 4px 6px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 9px;
  letter-spacing: 0.1em;
}

@media (max-width: 520px) {
  .variant-switch {
    top: auto;
    bottom: 16px;
    right: 16px;
  }
  .variant-switch .vs-hint { display: none; }
}