/* Auth UI — 상단 nav 내 로그인 버튼 + 아바타 드롭다운 */
.vb-auth {
  position: relative;
  font-family: 'Segoe UI', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vb-auth__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--vb-border);
  background: var(--vb-bg-elevated);
  color: var(--vb-text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: background var(--vb-dur-fast) var(--vb-ease), border-color var(--vb-dur-fast) var(--vb-ease), transform var(--vb-dur-fast) var(--vb-ease);
}

.vb-auth__btn:hover {
  background: var(--vb-bg-tint);
  border-color: var(--vb-aubergine);
}

.vb-auth__btn:active { transform: translateY(1px); }

.vb-auth__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Kakao brand — 노란색 #FEE500 + 다크브라운 라벨/아이콘.
   Kakao 디자인 가이드 준수 (밝은 모드 / 다크 모드 동일 유지). */
.vb-auth__btn--kakao {
  background: #FEE500;
  color: #3C1E1E;
  border-color: #FEE500;
}

.vb-auth__btn--kakao:hover {
  background: #FFD600;
  border-color: #FFD600;
  color: #3C1E1E;
}

/* Google Sign-In 버튼 — Google 브랜딩 가이드 준수.
   공식 4색 "G" 로고 (수정 금지) + light 변형 (white / #747775 border / #1F1F1F).
   light 변형은 다크 배경 위에서도 허용되므로 한 클래스로 전 테마 커버.
   min-height 40px / 로고 18px / Roboto 폰트. */
.gsi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #747775;
  border-radius: 4px;
  background: #FFFFFF;
  color: #1F1F1F;
  cursor: pointer;
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.25px;
  transition: background var(--vb-dur-fast) var(--vb-ease), box-shadow var(--vb-dur-fast) var(--vb-ease);
}

.gsi-btn:hover { background: #F7F8F8; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }
.gsi-btn:active { background: #EEF0F1; }
.gsi-btn:focus-visible { outline: 2px solid #4285F4; outline-offset: 2px; }
.gsi-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }

.gsi-btn__icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.vb-auth__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vb-aubergine);
  color: var(--vb-text-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--vb-border);
}

.vb-auth__avatar:focus-visible {
  outline: none;
  box-shadow: var(--vb-focus-ring);
}

.vb-auth__menu {
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 200px;
  background: var(--vb-bg-elevated);
  border: 1px solid var(--vb-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  padding: 8px 0;
  z-index: 60;
}

.vb-auth__menu[hidden] { display: none; }

.vb-auth__menu-item {
  display: block;
  padding: 8px 14px;
  color: var(--vb-text-primary);
  text-decoration: none;
  font-size: 14px;
}

.vb-auth__menu-item:hover {
  background: var(--vb-bg-tint);
  color: var(--vb-aubergine);
}

.vb-auth__email {
  padding: 8px 14px 6px;
  font-size: 12px;
  color: var(--vb-text-secondary);
  border-bottom: 1px solid var(--vb-border);
  margin-bottom: 4px;
}